/* ==========================================================================
   Section: work — "Our work speaks for itself" (case-study carousel)
   Figma "Home Page" y 4361→5308 (1920 frame) · "Mobile Home" y 2897→3865 (402)
   Layout notes (desktop): left column 100→960, right column 971→1820.
   Case-study detail content is inset 22px (x=993) so the 827px rules end at 1820.
   ========================================================================== */

.section--work {
  padding: 44px 0 79px; /* (4361−4273)/2 above, (5466−5308)/2 below */
}

/* ---- Intro row: eyebrow + heading (x=100) | lede (x=971) ----------------- */
.section--work .work__title {
  max-width: 839px;
  margin-top: 41px; /* eyebrow bottom 4386 → heading 4427 */
}
.section--work .work__lede {
  max-width: 849px;
  margin-top: 66px; /* top-aligns with the heading (y=4427): eyebrow 25 + 41 */
}

/* ---- Carousel (js/work.js crossfades the slides; layout is all here) --------
   .work__slides stacks every slide in one grid cell, so the block is as tall
   as the tallest slide and never changes size when the slide changes. Only
   the .is-active slide is visible; .is-leaving keeps the outgoing one
   rendered underneath for the crossfade. The arrows and the CTA are shared:
   .work__controls is laid over the stack on the same two-column grid, with an
   invisible box the size of the photo, so the arrows are anchored to the
   photo (54px below it) whatever the stats column measures; the CTA follows
   the stack in normal flow. */
.section--work .work__carousel {
  margin-top: 60px; /* heading bottom 4579 → image top 4639 */
}
.section--work .work__stage { position: relative; }
.section--work .work__slides {
  display: grid;
  touch-action: pan-y pinch-zoom; /* a horizontal swipe steps the carousel (js/work.js) */
}
.section--work .work__slide {
  grid-area: 1 / 1;
  min-width: 0;
  visibility: hidden;
}
.section--work .work__slide.is-active { visibility: visible; z-index: 1; }
.section--work .work__slide.is-leaving { visibility: visible; z-index: 0; }
/* 1fr tracks must not inherit the 847px photo's intrinsic width as their minimum */
.section--work .work__intro > *,
.section--work .work__case > * { min-width: 0; }

/* ---- Left column: photo 847×579 at x=103, prev/next right-aligned to it --- */
.section--work .work__media {
  padding-left: 3px;   /* Rectangle 90 starts at x=103 */
  padding-right: 10px; /* …and ends at x=950 (column ends at 960) */
}
.section--work .work__figure {
  position: relative;
  width: 100%;
}
.section--work .work__link {
  position: relative; /* the wordmark overlay is placed against the link so it rises with the photo */
  display: block;
}
.section--work .work__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 847 / 579;
  object-fit: cover;
}
/* Oakleigh Dental wordmark overlaid on the photo (554×77 at 127,264 inside the image) */
.section--work .work__logo {
  position: absolute;
  left: 15%;   /* 127 / 847 */
  top: 45.6%;  /* 264 / 579 */
  width: 65.4%; /* 554 / 847 */
  height: auto;
}
.section--work .work__controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;            /* above the stacked slides (grid items with z-index) */
  pointer-events: none;  /* only the buttons take the pointer */
}
.section--work .work__spacer {
  position: relative;
  aspect-ratio: 847 / 579; /* = .work__photo's box: same column, same width, same ratio */
}
.section--work .work__arrows {
  position: absolute;
  top: 100%;
  right: 0;
  display: flex;
  gap: 10px;
  margin-top: 54px; /* image bottom 5218 → buttons 5272 */
}
.section--work .work__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 61px;
  height: 36px;
  border-radius: 46px;
  box-shadow: inset 0 0 0 2px var(--fg);
  color: var(--fg);
  pointer-events: auto;
  transition: background-color .25s ease, color .25s ease;
}
.section--work .work__arrow svg { width: 36px; height: 15px; }
.section--work .work__arrow:hover { background: var(--fg); color: var(--bg); }
.section--work .work__arrow:disabled { opacity: .35; cursor: default; } /* a single slide: nothing to step to */
.section--work .work__arrow:disabled:hover { background: transparent; color: var(--fg); }

/* ---- Crossfade (js/work.js toggles .is-active / .is-leaving) ---------------
   The incoming photo fades in and rises over the outgoing one, which stays put
   underneath so the picture never dips to the page colour; the outgoing copy
   fades out first, the incoming copy fades in behind the photo. Only elements
   WITHOUT data-reveal are animated here, because js/main.js writes inline
   opacity/transform to the [data-reveal] ones. js/work.js keeps .is-leaving
   for 650ms (SWAP_MS), a touch over the longest duration below. Under
   prefers-reduced-motion base.css drops every transition: swaps are instant. */
.section--work .work__link {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
.section--work .work__tag,
.section--work .work__client > a,
.section--work .work__stats {
  opacity: 0;
  transition: opacity .5s ease .12s;
}
.section--work .work__client > a { transition: opacity .5s ease .12s, color .25s ease; } /* + the #38 hover colour */
.section--work .is-active .work__link { opacity: 1; transform: none; }
.section--work .is-active .work__tag,
.section--work .is-active .work__client > a,
.section--work .is-active .work__stats { opacity: 1; }
.section--work .is-leaving .work__link { opacity: 1; transform: none; transition: none; }
/* Directional swap (js sets .is-next / .is-prev on the list): the outgoing photo fades out sideways in the
   direction of travel — left on next, right on prev — while the incoming one fades in over it. */
.section--work .work__slides.is-next .is-leaving .work__link,
.section--work .work__slides.is-prev .is-leaving .work__link {
  opacity: 0;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}
.section--work .work__slides.is-next .is-leaving .work__link { transform: translateX(-52px); }
.section--work .work__slides.is-prev .is-leaving .work__link { transform: translateX(52px); }
.section--work .is-leaving .work__tag,
.section--work .is-leaving .work__client > a,
.section--work .is-leaving .work__stats { opacity: 0; transition: opacity .25s ease; }

/* ---- Right column: tags → client → stats → CTA (content at x=993) --------- */
.section--work .work__details {
  padding-left: 22px; /* 971 → 993 */
  align-self: stretch;               /* req #6: match the photo's height (overrides .grid-2 align-items:start) */
  display: flex;
  flex-direction: column;
}
.section--work .work__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  margin-top: 8px;   /* image top 4639 → tags 4647 */
  margin-left: -6px; /* first dot sits at x=987 */
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 0.98;
  text-transform: capitalize;
}
.section--work .work__tag {
  display: flex;
  align-items: center;
  gap: 18.5px; /* Figma hand-places the dots (21/19/16/14px before each word); 18.5 keeps every dot and word within 4px of the design */
  white-space: nowrap;
}
/* "Web Design" only fits the 362px mobile row as the Figma mobile copy "Website" */
.section--work .work__tag-short { display: none; }
/* Eyebrow copy differs between the frames: "Our projects" (Home Page) / "Our work" (Mobile Home) */
.section--work .work__eyebrow-short { display: none; }
.section--work .work__tag::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.section--work .work__client {
  margin-top: 28px; /* tags bottom 4671 → 4699 */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.08;
  text-transform: uppercase;
}
/* Hover / keyboard focus turns the name green (client change request #38: green, not underlined) */
.section--work .work__client > a:hover,
.section--work .work__client > a:focus-visible { color: var(--accent); }
/* Value | label: the rows share the list's two columns (each row is a subgrid), so the labels line up down
   a slide. The value column is the design's 267px (value x=993, label x=1260) unless the slide's widest
   value needs more — "$938,715" (El Jannah) is ≈270px at 64px — so a long number never runs into its label. */
.section--work .work__stats {
  margin-top: auto; /* req #6: push the stats to the bottom so the last rule aligns with the photo bottom at any width */
  display: grid;
  grid-template-columns: minmax(267px, max-content) minmax(0, 1fr);
}
.section--work .work__stat {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  padding-bottom: 36px;
  border-bottom: 2px solid var(--fg);
}
/* Client change request #19: a slide shows at most 3 stats (the Figma's count) whatever the study lists, so
   the CPT keeps its full set for the case-study page (Oakleigh Dental has 4). A 4th+ row is not displayed,
   and js/blocks/case-study-carousel.js skips it for the count-up; the 3rd row takes the last-row spacing. */
.section--work .work__stat:nth-child(n+4) { display: none; }
.section--work .work__stat + .work__stat { padding-top: 26px; }
/* Figma rules sit at 4972 / 5097 / 5216: rows are hand-spaced (45 / 36 / 30 below content) */
.section--work .work__stat:first-child { padding-bottom: 45px; }
.section--work .work__stat:is(:nth-child(3), :last-child) { padding-bottom: 30px; }
.section--work .work__stat-value {
  padding-right: .4em; /* the least gap before the label when a value widens its column */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 64px;
  line-height: 0.95;
  text-transform: uppercase;
}
/* The final value (data-value), invisible and 0 tall, keeps the column at its full width while the count-up
   (js/blocks/case-study-carousel.js) shows shorter numbers, so the labels never shift mid-count */
.section--work .work__stat-value::after {
  content: attr(data-value);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.section--work .work__stat-label {
  max-width: 435px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.08;
}
/* The CTA follows the slide stack, i.e. the tallest slide's last rule (Figma:
   last rule 5216 → button 5267). At 1920 the Oakleigh column ends 0.6px above
   the photo, so a slide whose stats column is no taller than Oakleigh's lands
   the button exactly on the design; a slide with two 2-line labels (Create
   Fertility, Zest) is 8px taller and, since the block never resizes between
   slides, lowers the button by that much for every slide. */
.section--work .work__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 51px;
}
/* "View all case studies" is a filled green pill (client change request #19; the Figma draws a white outline):
   .btn's green fill + black label, as the site's other filled pills. Hover is their reverse wipe (header
   Contact, team "Meet the team"): the page colour sweeps in under a green ring, label + arrow turn green. */
.section--work .work__cta {
  --wipe-fill: var(--bg);
  --wipe-txt: var(--accent);
  min-width: 350px; /* Rectangle 135: 1470→1820; text at 1497, arrow ends 1793 */
  height: 38px;
  padding: 0 27px;
  gap: 10px;
  justify-content: space-between;
}
.section--work .work__cta:hover,
.section--work .work__cta:focus-visible { --wipe-edge: var(--accent); }
.section--work .work__cta svg { flex: 0 0 auto; width: 26px; height: 15px; }

/* ---- Service pages (Figma "Social Media Advertising" 4506:165, y 4457→5401) --
   Same block, a few hand-placed details differ from the homepage frame: the tag
   row is top-aligned with the photo (0 vs 8px), its first dot sits on the content
   edge (x995: no −6px pull), dots are 16px before each word and 37px after the
   previous one (vs 18.5 / 30), with the client name still 60px under the photo
   top; the stat labels are set 465px wide (vs 435), so "Increase in click through
   rate" stays on one line; and the first stat row keeps its 114px pitch (row top
   → rule) with a one-line label (those apply to the two-column layout only; the
   402 frame's own small differences are noted on the ≤640 rules). `single-service` is the body class
   WordPress gives every `service` CPT page. Vertical padding follows the same
   half-the-gap convention as the homepage: (4457−4229)/2 above, (5545−5401)/2
   below at 1920; (3782−3702)/2 and (4779−4686)/2 on the 402 frame. */
.single-service .section--work { padding: min(5.9375vw, 114px) 0 min(3.75vw, 72px); }
@media (max-width: 640px) {   /* Mobile Category (4148:2776) y 3782→4686 */
  .single-service .section--work { padding: 40px 0 46px; }
  .single-service .section--work .work__carousel { margin-top: 48px; } /* lede bottom 4028 → client 4076 (home: 41) */
  .single-service .section--work .work__tags { column-gap: 24px; }     /* tag groups at x20 / x135 (home: 18) */
  .single-service .section--work .work__actions { margin-top: 35px; }  /* last stat 4563 → button 4639 (home: 72) */
}
@media (min-width: 1025px) {   /* 1920 px values × --work-s, as the two-column rules below */
  .single-service .section--work .work__tags { margin-top: 0; margin-left: 0; column-gap: calc(37 * var(--work-s)); }
  .single-service .section--work .work__tag { gap: calc(16 * var(--work-s)); }
  .single-service .section--work .work__client { margin-top: calc(36 * var(--work-s)); }
  .single-service .section--work .work__stat-label { max-width: 14.53em; } /* 465px at the 32px label */
  .single-service .section--work .work__stat:first-child { padding-bottom: calc(52 * var(--work-s)); }
}

/* ---- Two-column widths (≥1025): the details column scales with the Figma ----
   Client change request #19 (laptop 1440): smaller stat numbers / labels so the client name has room, and
   sizing + spacing closer to the Figma. Each 1920-frame px value is multiplied by --work-s (1px at 1920,
   100vw/1920 below it: the rate the gutters and the photo already scale at), so the tags → name → stats
   column is the design scaled as a whole. At 1440: tags 18, stat value 48, label 24 (was a fixed 52 / 26),
   rows and gaps ×0.75. Floors keep it readable near 1025. The client name keeps its 32px floor so it stays
   the slide's heading; its margin-bottom is the least gap left above the stats when a long name and 2-line
   labels fill the photo's height (the stats are otherwise bottom-aligned). Labels wrap at 13.6em (= 435px
   at 32px), so they break where the Figma's do at any width; the value column still widens for a long
   value (see .work__stats). */
@media (min-width: 1025px) {
  .section--work { --work-s: min(100vw / 1920, 1px); }
  .section--work .work__tags {
    margin-top: calc(8 * var(--work-s));
    column-gap: calc(30 * var(--work-s));
    font-size: max(18px, calc(24 * var(--work-s)));
  }
  .section--work .work__tag { gap: calc(18.5 * var(--work-s)); }
  .section--work .work__client {
    margin-top: calc(28 * var(--work-s));
    margin-bottom: calc(40 * var(--work-s));
    font-size: max(32px, calc(40 * var(--work-s)));
  }
  .section--work .work__stats { grid-template-columns: minmax(calc(267 * var(--work-s)), max-content) minmax(0, 1fr); }
  .section--work .work__stat { padding-bottom: calc(36 * var(--work-s)); }
  .section--work .work__stat + .work__stat { padding-top: calc(26 * var(--work-s)); }
  .section--work .work__stat:first-child { padding-bottom: calc(45 * var(--work-s)); }
  .section--work .work__stat:is(:nth-child(3), :last-child) { padding-bottom: calc(30 * var(--work-s)); }
  .section--work .work__stat-value { font-size: max(40px, calc(64 * var(--work-s))); }
  .section--work .work__stat-label { max-width: 13.6em; font-size: max(20px, calc(32 * var(--work-s))); }
  .section--work .work__arrows { margin-top: calc(54 * var(--work-s)); }  /* photo bottom → prev / next */
  .section--work .work__actions { margin-top: calc(51 * var(--work-s)); } /* last rule → "View all" */
}

/* ---- Single column (Figma "Mobile Home" order): client → photo → tags → stats → CTA */
@media (max-width: 1024px) {
  .section--work .work__lede { margin-top: 0; }
  .section--work .work__case { row-gap: 0; }
  .section--work .work__details { display: contents; }
  .section--work .work__client  { order: 1; margin-top: 0; font-size: 32px; }
  .section--work .work__stat-value { font-size: 52px; }
  .section--work .work__stat-label { font-size: 26px; }
  .section--work .work__media   { order: 2; position: relative; margin-top: 12px; padding: 0; }
  .section--work .work__tags    { order: 3; margin-top: 19px; margin-left: 0; }
  .section--work .work__stats   { order: 4; margin-top: 24px; }
  .section--work .work__actions { justify-content: flex-start; margin-top: 31px; }
  .section--work .work__logo { display: none; }
  /* The arrow overlay's photo-sized box must start where the photo does: below
     the client name (32px × 1.08 per line) and its 12px gap. A name that wraps
     lowers the photo, so js/blocks/case-study-carousel.js sets
     --work-name-extra on the scope to the active name's extra lines (0 for a
     one-line name, so the one-line geometry is exactly the design's). */
  .section--work .work__controls .work__media {
    padding-top: calc(32px * 1.08 + var(--work-name-extra, 0px));
    transition: padding-top .5s cubic-bezier(.22, .61, .36, 1);
  }
  /* prev/next straddle the photo's edges, vertically centred on it */
  .section--work .work__arrows {
    top: calc(50% - 18px);
    left: -11px;
    right: -14px;
    justify-content: space-between;
    margin-top: 0;
  }
  .section--work .work__link { transform: translateY(12px); } /* a shorter rise: the tags sit only 19px under the photo */
}

/* ---- Mobile (402 frame, 20px gutters) -------------------------------------- */
@media (max-width: 640px) {
  .section--work { padding: 50px 0; } /* (2897−2796)/2 above, (3964−3865)/2 below */
  .section--work .work__intro { row-gap: 24px; } /* title bottom 3069 → lede 3093 */
  .section--work .work__title { margin-top: 15px; }
  .section--work .work__carousel { margin-top: 42px; } /* lede bottom 3217 → client 3259 */
  .section--work .work__client { font-size: 24px; }
  .section--work .work__controls .work__media { padding-top: calc(24px * 1.08 + var(--work-name-extra, 0px)); } /* = the 24px client name (+ its extra lines, see ≤1024) */
  .section--work .work__arrows { top: calc(50% - 13px); }
  .section--work .work__arrow { width: 35px; height: 26px; }
  .section--work .work__arrow svg { width: 17px; height: 7px; }
  .section--work .work__tags {
    gap: 8px 18px; /* Figma groups sit 21/16/16px apart; 18 keeps each within 4px and the row ends at x=370 (<382) */
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.24;
  }
  .section--work .work__tag { gap: 9px; }
  .section--work .work__tag-long { display: none; }
  .section--work .work__tag-short { display: inline; }
  .section--work .work__eyebrow-long { display: none; }
  .section--work .work__eyebrow-short { display: inline; }
  .section--work .work__stats { grid-template-columns: minmax(179px, max-content) minmax(0, 1fr); } /* value at x=20, label at x=199 */
  .section--work .work__stat { padding-bottom: 17px; }
  .section--work .work__stat + .work__stat { padding-top: 9px; }
  .section--work .work__stat:first-child { padding-bottom: 13px; } /* rule at 3664 */
  .section--work .work__stat:is(:nth-child(3), :last-child) { padding-bottom: 0; border-bottom: 0; } /* no rule under the last (shown) row on mobile */
  .section--work .work__stat-value { font-size: 43px; }
  .section--work .work__stat-label { max-width: 183px; font-size: 20px; }
  .section--work .work__cta {
    width: 315px;
    min-width: 0;
    max-width: 100%;
    height: 47px;
    padding: 0 20px 0 24px;
    gap: 12px;
    justify-content: space-between;
    font-size: 20px;
    /* Rectangle 180 is a green 2px ring in the Figma; filled green like desktop since #19 (same hover) */
  }
  /* Figma centres the label in a 233.71px box (x 42.59→276.3) with the arrow at 287.88→313.67 */
  .section--work .work__cta-label { flex: 1 1 auto; text-align: center; }
}
/* Small phones (320–359): the 179px value column (181 for "10,000+" at 43px) leaves the labels ≈100px at 320,
   narrower than their longest words at 20px ("impressions" 114, "engagement" 124, "Improvement" 128), which ran
   past the page edge (329px wide). Values 36px in a 140px column and labels 18px (the ≤359 pill scale,
   css/base.css): the label column is ≥ 128px at 320 ("10,000+" → 152), the longest word ≈ 115. The 315px CTA
   pill is capped at the column too, so its 20px label + arrow ran onto the right edge: the same 18px scale. */
@media (max-width: 359px) {
  .section--work .work__stats { grid-template-columns: minmax(140px, max-content) minmax(0, 1fr); }
  .section--work .work__stat-value { font-size: 36px; }
  .section--work .work__stat-label { font-size: 18px; }
  .section--work .work__cta { padding: 0 16px 0 20px; font-size: 18px; }
}

/* ==========================================================================
   Variant "cards" — creative service pages (no stats)
   Figma Graphic Design 4696:1095 y 6114→7071 · Web Design 4816:2 y 9865 ·
   Photography 5041:2 y 6911 · Videography 5050:499 y 7437 (all the same
   geometry; Web sits 2px left in the Figma). Eyebrow → title 56 below it;
   intro at the title's top (x971) with the pill 86 below the intro top
   (x976; an outline in the Figma, filled green since #19); photo cards 847×579 60 under the title (x103, 26 gap), the
   third card bleeding off the right edge; name 31 under each photo, summary
   beside it (x+432, 416 wide, 4 lower). No mobile frame exists: the ≤1024 /
   ≤640 rules below are derived in the Mobile Category language.
   Everything here is scoped to .section--work--cards, so the stats layout
   (home, performance pages) is untouched.
   ========================================================================== */
.section--work--cards .work__title { margin-top: 31px; } /* eyebrow 6114 (25 tall) → title 6170 */
.section--work--cards .work__intro-right {
  min-width: 0;
  margin-top: 56px; /* top-aligns with the title (y 6170) */
}
.section--work--cards .work__lede {
  margin-top: 0;
  min-height: calc(2em * 1.24); /* the pill sits 86 under the intro top whether the intro runs 1 line (Photography) or 2 */
}
.section--work--cards .work__head-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 36px; /* intro top 6170 + 50 → pill 6256 */
}
.section--work--cards .work__cta { margin-left: 5px; } /* Rectangle 135 at x976, 5 right of the intro */
/* prev / next: not drawn in the Figma — the client's "auto-rotate + click arrows" rule. The stats layout's
   61×36 pills, right-aligned (x1820) on the pill's row, just above the bleeding third card. */
.section--work--cards .work__nav { display: flex; gap: 10px; }

/* ---- Track: a scroll-snap row that runs past x=1820 to the viewport edge --- */
.section--work--cards .work__cards {
  margin-top: 60px;                        /* title bottom 6322 → cards 6382 */
  margin-right: calc(var(--gutter) * -1);  /* the third card bleeds off the right edge */
}
.section--work--cards .work__track {
  display: flex;
  align-items: flex-start;
  gap: 26px;                               /* 847 + 26 = the Figma's 873 pitch */
  padding: 0 var(--gutter) 28px 3px;       /* 3px: the cards start at x=103; right: gutter after the last card; bottom: room for the reveal rise */
  margin-bottom: -28px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 3px;
  overscroll-behavior-x: contain;          /* a horizontal trackpad swipe at either end never triggers browser back / forward */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.section--work--cards .work__track::-webkit-scrollbar { display: none; }
/* js/blocks/case-study-carousel.js: mouse drag-to-scroll (snap off while the pointer drags) */
.section--work--cards .work__track.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
.section--work--cards .work__card {
  position: relative;                      /* the name's link is stretched over the whole card */
  /* two whole cards + the gap = the 1720 content width: the track's content box is (content − 3px) wide */
  flex: 0 0 calc((100% + 3px - 26px) / 2);
  min-width: 0;
  scroll-snap-align: start;
}
.section--work--cards .work__card-media {
  position: relative;
  aspect-ratio: 847 / 579;
  overflow: hidden;
  background: #1a1a1a;                     /* while the lazy photo loads */
}
.section--work--cards .work__card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Oakleigh Dental wordmark over the photo (554×77 at 127,264 inside the card — as the stats slide) */
.section--work--cards .work__card-logo {
  position: absolute;
  left: 15%;
  top: 45.6%;
  width: 65.4%;
  height: auto;
}
.section--work--cards .work__card-text {
  display: grid;
  grid-template-columns: 432fr 415fr;      /* name 432 | summary from x+432 (416 wide, ends with the card) */
  align-items: start;
  margin-top: 31px;                        /* photo bottom 6961 → name 6992 */
}
.section--work--cards .work__card-name {
  min-width: 0;
  padding-right: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: min(2.0833vw, 40px);          /* 40px at 1920, scales with the card */
  line-height: 1.08;
  text-transform: uppercase;
}
.section--work--cards .work__card-name:only-child { grid-column: 1 / -1; padding-right: 0; } /* no summary: the name gets the card's width (Photography: 825 box) */
.section--work--cards .work__card-link::after {
  content: "";
  position: absolute;
  inset: 0;                                /* the whole card (photo + text) is the link's hit area */
}
/* Hovering the card (or focusing its link) turns the name green: client change request #38, "hover should
   go green, not underlined" (the stats layout's client name does the same) */
.section--work--cards .work__card-link { transition: color .25s ease; }
.section--work--cards .work__card:hover .work__card-link,
.section--work--cards .work__card-link:focus-visible { color: var(--accent); }
.section--work--cards .work__card-summary {
  margin-top: 4px;                         /* name 6992 → summary 6996 */
  max-width: 416px;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.24;
}

/* ---- Tablet: stacked header, ~1.4 cards visible, summary under the name --- */
@media (max-width: 1024px) {
  .section--work--cards .work__intro-right { margin-top: 0; }
  .section--work--cards .work__lede { min-height: 0; }
  .section--work--cards .work__head-actions { margin-top: 28px; }
  .section--work--cards .work__cta { margin-left: 0; }
  .section--work--cards .work__cards { margin-top: 48px; }
  .section--work--cards .work__track { gap: 20px; padding-left: 0; scroll-padding-left: 0; }
  .section--work--cards .work__card { flex-basis: 72%; }
  .section--work--cards .work__card-text { display: block; margin-top: 20px; }
  .section--work--cards .work__card-name { padding-right: 0; font-size: 32px; }
  .section--work--cards .work__card-summary { margin-top: 10px; max-width: 520px; font-size: 18px; }
}

/* ---- Mobile (derived; Mobile Category language: 20px gutters, 24px names) -- */
@media (max-width: 640px) {
  .section--work--cards .work__title { margin-top: 15px; }            /* as the stats layout's 402 frame */
  .section--work--cards .work__head-actions { flex-wrap: wrap; row-gap: 20px; margin-top: 24px; }
  .section--work--cards .work__nav { display: none; }                  /* client #53 (1 Oct): no arrows on phones — the cards swipe */
  /* keep the 61×36 pill (not the stats layout's 35×26 overlay arrows) with a 44px-tall hit area */
  .section--work--cards .work__arrow { position: relative; width: 61px; height: 36px; }
  .section--work--cards .work__arrow::before { content: ""; position: absolute; inset: -4px 0; }
  .section--work--cards .work__arrow svg { width: 36px; height: 15px; }
  .section--work--cards .work__cards { margin-top: 24px; }
  .section--work--cards .work__track { gap: 12px; }
  .section--work--cards .work__card { flex-basis: 85%; }
  .section--work--cards .work__card-text { margin-top: 14px; }
  .section--work--cards .work__card-name { font-size: 24px; }
  .section--work--cards .work__card-summary { margin-top: 8px; font-size: 16px; line-height: 1.3; }
}