/* ============================================================================
   DALC — branding "Selected work" as a CASE-STUDY INDEX (work-branding.html)
   One full-bleed panel per client, each in that brand's own colour, holding
   the name, one line about the work shown, a small deliverables line and a
   link to the case study. The brand board is the panel's art.

   Modelled on abhaysingh.in's project index: calm, editorial, no parallax.
   The layout is finished without JS — brand-index.js only adds the lift-in
   and opens a board in the page lightbox.
   ========================================================================== */
.bi{--bi-pad:48px;--bi-line:rgba(20,20,20,.14)}

/* ── index header ─────────────────────────────────────────────────────── */
.bi-head{max-width:1440px;margin:0 auto;padding:18px var(--bi-pad) 64px}
.bi-row{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.bi-title,.bi-count{margin:0;font-family:var(--font-heading);font-weight:400;line-height:.95;
    font-size:clamp(52px,8.5vw,132px);letter-spacing:-.01em}
.bi-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px;align-items:start;
    margin-top:34px}
.bi-meta{display:flex;flex-direction:column;gap:6px;padding-top:4px;font-size:13px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#58524e)}
.bi-lede{margin:0;max-width:32em;font-size:clamp(18px,1.55vw,22px);line-height:1.45;color:var(--ink,#141414)}

/* ── panels ───────────────────────────────────────────────────────────── */
.bi-panel{background:var(--tint);color:var(--on)}
.bi-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(32px,5vw,80px);
    align-items:center;max-width:1440px;margin:0 auto;
    padding:clamp(64px,8vw,110px) var(--bi-pad);min-height:min(88svh,900px)}

.bi-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 18px;font-size:12.5px;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase}
.bi-eyebrow i{display:block;width:26px;height:1.5px;background:currentColor;opacity:.5}
.bi-eyebrow span:last-child{opacity:1}
.bi-name{margin:0 0 18px;font-family:var(--font-heading);font-weight:400;line-height:.94;
    font-size:clamp(40px,5.6vw,86px);letter-spacing:-.01em}
.bi-desc{margin:0 0 22px;max-width:24em;font-size:clamp(17px,1.35vw,21px);line-height:1.5}
/* the small deliverables line — only what the board actually carries */
.bi-stat{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 34px;padding-top:18px;
    border-top:1.5px solid currentColor;max-width:34em;
    font-size:13px;font-weight:600;letter-spacing:.04em}
.bi-stat b{font-weight:600}

.bi-go{display:inline-flex;align-items:center;gap:12px;padding:14px 26px;border-radius:999px;
    border:1.6px solid currentColor;text-decoration:none;font-size:14px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;
    transition:background .25s,color .25s,gap .25s}
.bi-go svg{flex:none}
a.bi-go:hover{gap:18px;background:var(--on);color:var(--tint)}
a.bi-go:focus-visible{outline:3px solid var(--on);outline-offset:4px}
.bi-go.is-soon{border-style:dashed;opacity:.6;cursor:default}

/* ── the board, as the panel's art ────────────────────────────────────── */
.bi-art{margin:0}
.bi-img{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
    border-radius:4px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.28);
    transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.bi-img img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.bi-img:hover{transform:translateY(-6px);box-shadow:0 40px 90px rgba(0,0,0,.36)}
.bi-img:focus-visible{outline:3px solid var(--on);outline-offset:6px}
/* The art is a mockup, not a photograph of installed signage — say so on the
   panel, the same way the case pages chip theirs. currentColor keeps it
   legible on every brand tint. */
.bi-art-cap{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;
    font-size:13.5px;color:currentColor}
.bi-art-cap span{padding:3px 10px;border-radius:999px;border:1px dashed currentColor;
    font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
/* no opacity on the chip: at .8 it fell to 3.78:1 on the ember-red panel.
   The dashed border already sets it apart from the caption. */

/* ── closing panel ────────────────────────────────────────────────────── */
.bi-end{background:#141414;color:#f5efe6}
.bi-end .bi-in{min-height:auto;grid-template-columns:1fr;text-align:center;justify-items:center;
    padding:clamp(72px,9vw,130px) var(--bi-pad)}
.bi-end h3{margin:0 0 16px;font-family:var(--font-heading);font-weight:400;line-height:1;
    font-size:clamp(38px,5.4vw,82px)}
.bi-end h3 em{font-style:italic;color:var(--accent,#1FA396)}
.bi-end p{margin:0 0 32px;max-width:30em;font-size:clamp(16px,1.2vw,19px);line-height:1.55;opacity:.78}

/* text lifts in as it arrives */
.bi.is-live [data-rise]{opacity:0;transform:translateY(26px);
    transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.bi.is-live [data-rise].in{opacity:1;transform:none}

@media (max-width:900px){
  .bi{--bi-pad:22px}
  .bi-head{padding:6px var(--bi-pad) 40px}
  .bi-grid{grid-template-columns:1fr;gap:12px;margin-top:22px}
  .bi-meta{flex-direction:row;gap:20px;font-size:11.5px}
  .bi-in{grid-template-columns:1fr;gap:34px;min-height:0;padding:clamp(48px,11vw,72px) var(--bi-pad)}
  .bi-art{order:-1}
  .bi-img{max-width:400px}
  .bi-stat{margin-bottom:26px}
}
@media (prefers-reduced-motion:reduce){
  .bi.is-live [data-rise]{opacity:1;transform:none;transition:none}
  .bi-img,.bi-go{transition:none}
  .bi-img:hover{transform:none}
}