/*
 * Brands — capabilities, selected work and the brand case studies.
 *
 * Destination 9 (rfnBrandCase) fills the four .cs-feature card images.
 * Ported from the frozen static brands.html; copy is lifted verbatim.
 *
 * @package Refinery
 *
 * Lifted verbatim from the <style> block in the frozen static build's
 * brands.html. STATIC-REFERENCE.md is the authority on why it looks this way.
 * Kept page-scoped and unedited so a future diff against the static
 * build still means something; url() paths are rewritten to ../ because
 * CSS resolves them against the stylesheet, not the page.
 *
 * Enqueued only on its own page — see refinery_enqueue_assets().
 */

    /* ── Hero: reel + centred type, ported from entertainment.html ─────────── */

    /* Sub-nav hidden on this page only, "for now" (2026-08-07) — Overview /
       Capabilities / Case Studies / Contact, and the iron-grey bar they sit on.
       display:none rather than deleting the markup so it's a one-line restore;
       initSubNav()'s scroll-spy keeps running against hidden links harmlessly.
       The section ids (#overview, #capabilities, #case-studies) are still live
       anchor targets from the footer and from other pages, so they stay. */
    /* ⚠️ DELIBERATELY NOT APPLIED (2026-08-25).
       This rule never worked: the file header opened a second doc-comment
       inside the first one. CSS comments do not nest, so the header closed at
       its first terminator and everything after it was parsed as CSS — which
       swallowed the first real rule, this one. Fixed today, which
       would have made the Brands sub-nav vanish for the first time since it
       was written on 2026-08-07.

       Left inert on purpose. The page has been designed, reviewed and (today)
       REORDERED against a visible sub-nav — Overview / Capabilities / Case
       Studies is exactly the order the sections now run in. Making navigation
       disappear is a design decision, not a parse fix, so it is Kay's call.

       To hide it after all, delete this comment and uncomment the line. */
    /* .sub-nav { display: none; } */

    .brand-reel {
      background: #000;
      /* Only --nav-height of clearance: the site nav is position:fixed, and the
         sub-nav that would otherwise sit under it is display:none here. */
      padding-top: var(--nav-height);
      line-height: 0;
      position: relative;
    }

    .brand-reel-video {
      display: block;
      width: 100%;
      /* 56.25vw = a true 16:9 at full width, clamped so the headline below still
         breaks the fold on short screens. Matches .ent-reel-video exactly. */
      height: clamp(240px, 56.25vw, 78vh);
      object-fit: cover;
      background: #000;
      /* Chartreuse rule closing the reel — see the twin declaration on
         .ent-reel-video in entertainment.css. Kept identical on purpose: the
         two reels are the same component on two pages. */
      border-bottom: 5px solid var(--chartreuse);
    }

    /* Placeholder marker — delete with the note in the markup once the reel lands. */
    .brand-reel-pending {
      position: absolute;
      top: calc(50% + (var(--nav-height) / 2));
      left: 50%;
      transform: translate(-50%, -50%);
      line-height: 1.4;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--chartreuse);
      padding: 0.85rem 1.5rem;
      border: 1px dashed var(--chartreuse);
      border-radius: 6px;
      text-align: center;
    }

    .brand-hero-intro {
      background: var(--dark);
      color: var(--white);
      padding: 4.5rem 0 4rem;
      text-align: center;
    }

    /* No eyebrow above this heading (the "Brand Creative" .section-label was
       removed 2026-08-07) — the reel above and the headline carry it.
       Capped at 1200px (the .container gives 1376px of content width at the
       1440px max) purely to control where the lines break; the auto side
       margins keep the narrowed block centred in the container. */
    .brand-hero-intro h1 {
      max-width: 1200px;
      margin: 0 auto 2.5rem;
    }

    /* .brand-hero-actions no longer has anything to lay out — BR-1 removed the
       hero's only button, and the wrapper went with it. The rule stays because
       index-video.html and the Backups copies still emit the element, and this
       sheet is kept diffable against the static build it came from. */
    .brand-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: center;
    }

    /* ── BR-3 / BR-5: the inverted headings ─────────────────────────────────
       The site's standing pattern is a heavy chartreuse heading with one light
       white .accent-brush word inside it. These two headings are the reverse —
       a light white line with heavy chartreuse fragments — which is what the
       2026-08-25 mark-up asked for on both ("Built to / impact", "how we
       work."). They cannot use .accent-brush to say it: the
       `.t-display-md:has(.accent-brush)` rule in style.css would repaint the
       whole line chartreuse and produce exactly the wrong result.

       So the arrangement is the splash headline's instead — light base,
       <strong> for the emphasis. .t-display-md brings font-weight 900, hence
       the explicit 300 here; the uppercase transform it also brings is correct
       and is left alone. */
    .brand-cap-heading {
      font-weight: 300;
      color: var(--white);
    }

    .brand-cap-heading strong {
      font-weight: 900;
      color: var(--chartreuse);
    }

    /* The uppercase + Poppins Black treatment that used to live here is now on
       .t-display-* / .cta-title in styles.css, site-wide.

       ⚠️ text-transform: uppercase below is REQUIRED, not cosmetic, and is NOT
       redundant with that — the accent needs it in its own right. The font's
       kern table covers A-Z, the .ss01 alternates, digits and hyphen only; it
       has NO lowercase pairs, so a lowercase accent renders completely unkerned
       ("entertainment" measured 0px of kerning vs 110px at 200px in caps).
       Transforming in CSS shapes the uppercase glyphs (verified: identical
       metrics to typed caps) while the markup keeps the real word for screen
       readers, copy-paste and SEO. Write accents lowercase and let this do it.

       Sizes are tuned for an accent sitting INSIDE a heading; the global
       .accent-brush (1.18em / -0.04em) rides high. */
      /* Brush font removed 2026-08-13 — the accent is now Poppins Light 300 at
         the SAME size as the type it sits in, so no optical size-up or baseline
         correction. Every value here used to compensate for brush caps
         rendering ~0.73x Poppins caps; all of it is dead with the brush gone. */
    #brands-heading .accent-brush,
    #capabilities-heading .accent-brush,
    #why-brands-heading .accent-brush {
      text-transform: uppercase;
      font-size: 1em;
    }

    /* Real images inside the brand work cards */
    .bwc-thumb img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform var(--transition-slow);
    }
    .bwc:hover .bwc-thumb img { transform: scale(1.05); }
    /* Square portfolio thumbnails */
    .brand-grid .bwc-thumb { aspect-ratio: 1 / 1; }

    /* Featured case-study cards. Dark treatment since the whole page went dark
       2026-08-07 — same faint-white-panel recipe the Capabilities cards use
       (rgba white 0.04 fill, 0.1 border) so the two sections read as one system. */
    .cs-feature {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr);
      border: 1.5px solid rgba(255,255,255,0.1);
      border-radius: 16px;
      overflow: hidden;
      cursor: pointer;
      background: rgba(255,255,255,0.04);
      transition: box-shadow var(--transition-med), border-color var(--transition-med), transform var(--transition-med);
    }
    .cs-feature:hover {
      box-shadow: 0 16px 48px rgba(0,0,0,0.35);
      border-color: var(--chartreuse);
      transform: translateY(-3px);
    }
    .cs-feature-img { position: relative; overflow: hidden; min-height: 240px; }
    .cs-feature-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    /* Drive cutover 2026-08-11 — the placeholder fills the same box the
       card image did. Delete with the .rfn-slot markup when Drive feeds this. */
    .cs-feature-img .rfn-slot { position: absolute; inset: 0; }
    .cs-feature-body { padding: 2.5rem; align-self: center; }
    .cs-feature-client { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--chartreuse); }
    .cs-feature-title { font-size: clamp(1.35rem, 2.1vw, 1.9rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin: 0.65rem 0 0.85rem; color: var(--white); }
    .cs-feature-desc { color: rgba(255,255,255,0.6); line-height: 1.6; margin-bottom: 1.25rem; }
    .cs-feature-cta { font-size: 0.95rem; font-weight: 600; color: var(--white); transition: color var(--transition-fast); }
    .cs-feature:hover .cs-feature-cta { color: var(--chartreuse); }
    @media (max-width: 720px) {
      .cs-feature { grid-template-columns: 1fr; }
      .cs-feature-img { min-height: 200px; }
      .cs-feature-body { padding: 1.75rem; }
    }

    /* One step lighter than --dark (#1a1a1a) so the Case Studies band separates
       from the dark sections directly above and below it. Kay's value. */
    .cs-band { background: #121212; }

    /* ── Dark page treatment (2026-08-07) ─────────────────────────────────────
       The light text base now comes from `.bg-dark` in styles.css, which sets
       colour as well as background. Only the brands-only components are
       re-pointed below. */

    /* Portfolio cards: .bwc-* live in styles.css tuned for the off-white section
       this used to be, so they're re-pointed for dark here rather than in the
       shared sheet (these cards are brands-only). The card FILL matters most —
       a white card body under each thumbnail was the loudest thing left on the
       darkened page. */
    .bwc {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.1);
    }
    .bwc:hover { box-shadow: 0 16px 48px rgba(0,0,0,0.35); }
    .bwc-client { color: rgba(255,255,255,0.55); }
    .bwc-title  { color: var(--white); }
    .bwc-tag    { color: rgba(255,255,255,0.6); }
    .bwc:hover .bwc-tag { color: var(--chartreuse); }

    /* Filter pills — same, light-on-dark instead of dark-on-light. */
    .filter-btn { border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.65); }
    .filter-btn:hover { border-color: rgba(255,255,255,0.45); color: var(--white); }
    .filter-btn.active {
      background: var(--chartreuse);
      border-color: var(--chartreuse);
      color: var(--dark);
    }

    /* Quick-view lightbox */
    .brand-lb {
      position: fixed; inset: 0; z-index: 2000;
      display: none;
      background: rgba(8,8,8,0.92);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      padding: 5vh 5vw;
    }
    .brand-lb.is-open { display: flex; align-items: center; justify-content: center; }
    .brand-lb-inner {
      display: grid;
      grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.9fr);
      max-width: 1180px; width: 100%; max-height: 88vh;
      background: var(--dark); border-radius: 14px; overflow: hidden;
      box-shadow: 0 40px 120px rgba(0,0,0,0.6);
    }
    .brand-lb-figure { background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .brand-lb-figure img { width: 100%; height: 100%; max-height: 88vh; object-fit: contain; display: block; }
    .brand-lb-info { padding: 2.5rem 2.25rem; color: var(--white); align-self: center; }
    .brand-lb-cat { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chartreuse); margin-bottom: 0.85rem; }
    .brand-lb-title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 800; line-height: 1.1; margin-bottom: 0.85rem; }
    .brand-lb-client { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 1rem; }
    .brand-lb-desc { color: rgba(255,255,255,0.7); line-height: 1.65; margin-bottom: 1.75rem; }
    .brand-lb-close, .brand-cs-close {
      position: fixed; top: 1.25rem; right: 1.5rem; z-index: 2010;
      width: 46px; height: 46px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.25); background: rgba(20,20,20,0.72);
      color: #fff; font-size: 1.75rem; line-height: 1; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background var(--transition-fast), color var(--transition-fast);
    }
    .brand-lb-close:hover, .brand-cs-close:hover { background: var(--chartreuse); color: var(--dark); }
    @media (max-width: 760px) {
      .brand-lb { padding: 0; }
      .brand-lb.is-open { align-items: stretch; }
      .brand-lb-inner { grid-template-columns: 1fr; max-height: 100vh; border-radius: 0; overflow-y: auto; }
      .brand-lb-figure img { max-height: 55vh; }
      .brand-lb-info { padding: 1.75rem; }
    }

    /* Full case-study overlay */
    .brand-cs { position: fixed; inset: 0; z-index: 2000; display: none; background: var(--dark); color: var(--white); overflow-y: auto; }
    .brand-cs.is-open { display: block; }
    .brand-cs-scroll { max-width: 920px; margin: 0 auto; padding: 6rem 1.5rem 5rem; }
    .brand-cs-back {
      position: fixed; top: 1.25rem; left: 1.5rem; z-index: 2010;
      display: inline-flex; align-items: center; gap: 0.4rem;
      padding: 0.6rem 1.05rem; border-radius: 100px;
      border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06);
      font-size: 0.85rem; font-weight: 600; color: var(--white); cursor: pointer;
      transition: border-color var(--transition-fast);
    }
    .brand-cs-back:hover { border-color: var(--chartreuse); }
    .brand-cs-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chartreuse); margin-bottom: 1rem; }
    .brand-cs .cs-hero-title { font-size: clamp(2rem, 4.5vw, 3.3rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 0.85rem; }
    .brand-cs .cs-hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: rgba(255,255,255,0.6); margin-bottom: 1.25rem; }
    .brand-cs .cs-client { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 3rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.12); }
    .brand-cs .cs-block { margin-bottom: 2.75rem; }
    .brand-cs .cs-block h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; margin-bottom: 0.75rem; }
    .brand-cs .cs-block p { color: rgba(255,255,255,0.6); line-height: 1.7; font-size: 1.0625rem; }
    .brand-cs figure { margin: 0 0 2.75rem; }
    .brand-cs figure img { width: 100%; border-radius: 12px; display: block; }
    .brand-cs figcaption { font-size: 0.8rem; color: rgba(255,255,255,0.45); margin-top: 0.65rem; text-align: center; }
    .brand-cs .cs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 2.75rem; }
    .brand-cs .cs-pair figure { margin: 0; }
    .brand-cs .cs-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2.75rem; }
    .brand-cs .cs-ba-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden; }
    .brand-cs .cs-ba-card img { width: 100%; display: block; }
    .brand-cs .cs-ba-text { padding: 1.25rem 1.375rem 1.5rem; }
    .brand-cs .cs-ba-text h4 { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chartreuse); margin-bottom: 0.5rem; }
    .brand-cs .cs-ba-text p { font-size: 0.95rem; color: rgba(255,255,255,0.6); line-height: 1.6; }
    @media (max-width: 640px) {
      .brand-cs .cs-pair, .brand-cs .cs-ba { grid-template-columns: 1fr; }
      .brand-cs-scroll { padding: 5rem 1.25rem 4rem; }
    }

    /* Placeholder case-study bits (lorem entries awaiting Claire's copy) */
    .brand-cs .cs-note {
      margin-bottom: 2rem;
      padding: 0.85rem 1.25rem;
      border: 1.5px dashed var(--chartreuse);
      border-radius: 10px;
      background: rgba(219, 225, 32, 0.1);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--chartreuse);
    }
    .brand-cs .cs-ph {
      aspect-ratio: 16 / 9;
      border-radius: 12px;
      background: rgba(255,255,255,0.05);
      border: 1px dashed rgba(255,255,255,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .brand-cs .cs-ph::after {
      content: 'Image placeholder';
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.4);
    }
    .brand-cs .cs-ph--square { aspect-ratio: 1 / 1; }

    /* "Case study:" links on capability cards */
    .capability-cs-links {
      margin-top: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }
    .capability-cs-links a {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--chartreuse);
    }
    .capability-cs-links a:hover { color: #eaf03a; }

    body.brand-modal-open { overflow: hidden; }
    /* ── "See everything we make" → /capabilities/ ──────────────────────────
       A copy of .accordion-explore from entertainment.css, not a shared rule.
       The two page stylesheets are mutually exclusive — neither is ever
       enqueued on the other's page — and each is kept as a self-contained
       sheet so it stays diffable against the static build it came from. A
       shared component would have to live in style.css and would then load on
       every page for the sake of two links. If you restyle one, restyle both.
       (2026-08-24) */
    /* Kept identical to the copy in entertainment.css — see the note there
       for why the two are duplicated rather than shared. Restyled to a
       filled button 2026-09-09; change both or neither. */
    .accordion-explore {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      margin: 2rem 0 2.5rem;
      padding: 0.95rem 1.75rem;
      border-radius: 999px;
      background: var(--chartreuse);
      color: var(--dark);
      font-size: 1.125rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      text-decoration: none;
      transition: gap var(--transition-fast), transform var(--transition-fast);
    }
    .accordion-explore:hover,
    .accordion-explore:focus-visible {
      color: var(--dark);
      transform: translateY(-2px);
    }
    .accordion-explore .arrow {
      display: inline-block;
      transition: transform var(--transition-fast);
    }
    .accordion-explore:hover { color: #eaf03a; }
    .accordion-explore:hover .arrow { transform: translateX(5px); }

    /* --------------------------------------------------------------------------
       HERO -> WHY US SPACING (Kay, 2026-09-08)
       Overrides, not edits. Everything above this line is lifted verbatim from
       the static build's brands.html and the file header asks that it stay that
       way so a diff against it still means something — so these two land here
       as later same-or-higher-specificity rules instead.

       There was ~15.5rem of black between the hero headline and the cards:
       2.5rem under the h1 + 4rem of header padding + 6rem of .section padding
       + 3rem under the "Why Us" eyebrow. The eyebrow is gone, the section takes
       .section--tight (3rem), and these two take the rest. Net ~5rem.
       -------------------------------------------------------------------------- */

    .brand-hero-intro {
      padding-bottom: 2rem;
    }

    /* BR-1 removed the hero's only button, so the h1 IS the last child here and
       its 2.5rem bottom margin is pure dead space. Keyed on :last-child so the
       spacing returns by itself if a button ever comes back — and so the static
       build, which still emits .brand-hero-actions after it, is untouched. */
    .brand-hero-intro h1:last-child {
      margin-bottom: 0;
    }

    /* Capabilities sat on .section's full 6rem top padding directly under the
       Why Us cards, which already carry their own 1.75rem of internal padding
       — so the visual gap was much larger than the number suggested (Kay,
       2026-09-08: "too much space above capabilities"). */
    #capabilities.section {
      padding-top: 2.5rem;
    }

    /* --------------------------------------------------------------------------
       WHY US — the three claim cards
       Added 2026-09-08 (Kay). Previously eleven inline style="" attributes in
       page-brands.php; moved into real rules because inline styles beat a class
       silently, which has already cost this project a day (see CLAUDE.md on the
       --off-white background audit).
       -------------------------------------------------------------------------- */
    .why-us-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.25rem;
    }

    /* DARKER than the section, not lighter. The cards used to be
       rgba(255,255,255,0.04) — a lift off --dark — and Why Us, Capabilities and
       Case Studies all carry .bg-dark, so the three bands ran together as one
       field of black. Recessing the cards instead gives this band an edge
       without introducing a fourth background colour to the page (Kay,
       2026-09-08). The hairline is what keeps a recessed card from dissolving
       into the section on a dim display. */
    .why-us-card {
      padding: 1.75rem;
      background: rgba(0, 0, 0, 0.32);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
    }

    /* The chartreuse tile. 40px -> 48px and the radius with it (Kay asked for
       "slightly larger"). */
    .why-us-icon {
      width: 48px;
      height: 48px;
      background: var(--chartreuse);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
    }

    /* currentColor through a mask, NOT an <img> — the same reasoning as the
       zesty marks and the client logo strip: these SVGs are black-on-transparent
       and an <img> would lock that in, so the day the tile stops being
       chartreuse the drawing goes invisible. Through a mask the tile sets
       `color` and the drawing follows. Only the alpha is read. */
    /* 30px in a 48px tile. Deliberately a bigger share of the tile than the
       18px emoji held in the old 40px one: these are fine-stroke line drawings
       and an emoji is a solid glyph, so matching the old ratio left them
       reading as faint. Measured, not guessed — ink fills 92-97% of all three
       viewBoxes, so there is no padding to discount.

       They are height-matched, not width-matched: contain on a square box fits
       the long side, and the clapper (277x405) and bolt (295x421) are much
       narrower than the expand (398x378). Matching heights is what makes the
       three read as one set across the row. */
    .why-us-icon__mark {
      width: 30px;
      height: 30px;
      background-color: var(--dark);
      -webkit-mask: var(--why-us-icon) center / contain no-repeat;
              mask: var(--why-us-icon) center / contain no-repeat;
    }

    /* Re-pointed 2026-09-09 at the new icon set. These are the SAME THREE
       DRAWINGS as the icon-*.svg files they replace — the proportions match to
       two decimal places (0.68 / 1.05 / 0.71) — re-exported with tight
       viewBoxes instead of being centred in a padded 216x216 square.

       That is why this is worth doing rather than cosmetic: `contain` fits the
       art to the box, so with a padded square it fits the PADDING and the
       drawing lands smaller than the number in the CSS says. With a tight
       viewBox the 30px below is the ink. The old files are deleted, so a stray
       reference fails loudly rather than silently rendering the wrong size. */
    .why-us-icon__mark--clapper { --why-us-icon: url("../doodles/extra/clapperboard.svg"); }
    .why-us-icon__mark--expand  { --why-us-icon: url("../doodles/extra/expand1.svg"); }
    .why-us-icon__mark--bolt    { --why-us-icon: url("../doodles/extra/lightningbolt.svg"); }

    /* Without mask support the box would be a solid dark square on chartreuse —
       far worse than the drawing. Paint the SVG directly there instead; its
       paths are already black, so nothing is lost but the ability to recolour. */
    @supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
      .why-us-icon__mark {
        background-color: transparent;
        background: var(--why-us-icon) center / contain no-repeat;
      }
    }

    /* --------------------------------------------------------------------------
       IMAGE BREAK — slow drift of case-study artwork (Kay, 2026-09-08)
       Sits between Why Us and Capabilities. Every tile is a link into the case
       study its art came from; see the note in page-brands.php.
       -------------------------------------------------------------------------- */
    .cs-break {
      overflow: hidden;
      background: var(--dark);
      padding: 0.5rem 0 2.5rem;
      /* Full-bleed: it escapes .container on purpose, because a drifting strip
         that stops at the container edge reads as a widget rather than a band. */
      width: 100%;
    }

    .cs-break-track {
      display: flex;
      width: max-content;
      gap: 10px;
      /* SLOW. 120s for one pass of a doubled set — the brief was "slow-scroll",
         and this is roughly a third of the splash rows' pace. It is ambient;
         if it reads as "scrolling" it is too fast. */
      animation: csBreakDrift 120s linear infinite;
    }

    @keyframes csBreakDrift {
      from { transform: translateX(0); }
      /* -50% because the set is emitted twice — one full set of travel lands
         the duplicate exactly where the original started, so the loop has no
         visible seam. Emit it once and this jumps every pass. */
      to   { transform: translateX(-50%); }
    }

    /* Motion on intent, and an accessibility floor. Pausing on hover is what
       makes the strip usable: the tiles are LINKS, and asking someone to click
       a moving target is hostile. */
    .cs-break:hover .cs-break-track,
    .cs-break:focus-within .cs-break-track {
      animation-play-state: paused;
    }

    /* ⚠️ Specificity has to match .cs-break-track, not undercut it — a media
       query adds none of its own. This is the mistake the splash rows are
       still carrying (their reduced-motion rule is outranked by an
       :nth-child), so it is written correctly here from the start. */
    @media (prefers-reduced-motion: reduce) {
      .cs-break .cs-break-track {
        animation: none;
      }
      /* With no drift the strip would show only its first few tiles and the
         rest would be unreachable, so let it scroll by hand instead. */
      .cs-break {
        overflow-x: auto;
      }
    }

    /* FIXED HEIGHT, WIDTH FROM THE ART (Kay, 2026-09-09: "one row, fixed
       height, dynamic widths"). This was a fixed 260px box at 2:3 with
       `object-fit: cover`, which cropped every landscape piece to a portrait
       slot — and Brands work is packaging, identity and environmental, almost
       none of it 2:3.
    
       Same idiom as the splash rows: pin the height, let each width follow its
       own ratio. A row of mixed widths IS the design, and nothing is cropped.
       `flex: 0 0 auto` keeps the track from compressing them to fit. */
    .cs-break-item {
      position: relative;
      display: block;
      flex: 0 0 auto;
      height: clamp(180px, 20vw, 260px);
      width: auto;
      overflow: hidden;
      text-decoration: none;
    }

    .cs-break-item img {
      display: block;
      height: 100%;
      width: auto;          /* natural width at the row's height */
      transition: transform 0.5s ease, opacity 0.3s ease;
    }

    .cs-break-item:hover img,
    .cs-break-item:focus-visible img {
      transform: scale(1.04);
      opacity: 0.75;
    }

    /* The case-study name, revealed on hover. Hidden by opacity rather than
       display so it is still in the accessible name of the link. */
    .cs-break-label {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 0.75rem 0.85rem;
      background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
      color: var(--white);
      font-size: 0.8125rem;
      font-weight: 600;
      line-height: 1.3;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .cs-break-item:hover .cs-break-label,
    .cs-break-item:focus-visible .cs-break-label {
      opacity: 1;
    }

    .cs-break-item:focus-visible {
      outline: 3px solid var(--chartreuse);
      outline-offset: -3px;
    }

    @media (max-width: 640px) {
      /* Height, not width — the width is the art's own. */
      .cs-break-item { height: 150px; }
    }