/* ══════════════════════════════════════════════════════════════════
   branding.css — the Branding world (Figma frame 2:227).

   A drafting-table world: near-black ground, navy panels, orange as the
   only accent, and construction geometry showing through. Aboreto carries
   the display type; Geist Mono handles every label, because the design
   treats labels as instrument readouts rather than words.

   Scoped to `.bx` so the font stack never leaks to the rest of the site.
   ══════════════════════════════════════════════════════════════════ */

.bx{
  --bx-ease:cubic-bezier(.25,.1,.25,1);
  --bx-panel:#242e3d;
  --bx-line:#2f4560;
  --bx-gutter:clamp(20px,5.5vw,80px);

  background:var(--ink-000);
  color:var(--paper-100);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

.bx main{display:flex;flex-direction:column;gap:clamp(72px,9vw,120px);}
.bx-masthead, .bx-bento-wrap, .bx-cases, .bx-timeline{
  padding-inline:var(--bx-gutter);
  max-width:1600px;margin-inline:auto;width:100%;
}

/* ── reveal ── */
[data-bx]{opacity:0;transform:translateY(40px);
  transition:opacity .8s var(--bx-ease), transform .8s var(--bx-ease);}
[data-bx].is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  [data-bx]{opacity:1;transform:none;transition:none;}
}

/* ── nav ── */
.bx-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(20px,2.4vw,32px) var(--bx-gutter);
  border-bottom:1px solid rgba(255,255,255,.1);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
}
.bx-back{color:var(--accent);}
.bx-back:hover{color:var(--paper-000);}
.bx-home{color:var(--paper-000);font-weight:600;}
.bx-home span{color:var(--accent-2);margin-left:6px;}

/* ── masthead ── */
.bx-masthead{padding-top:clamp(48px,7vw,96px);}
.bx-tag{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-weight:600;font-size:clamp(11px,1vw,14px);
  color:var(--accent);letter-spacing:.08em;margin-bottom:clamp(16px,2vw,24px);
}
.bx-dot{width:8px;height:8px;border-radius:2px;background:var(--accent);flex:0 0 auto;}
.bx-title{
  font-family:var(--font-display);font-weight:900;
  /* the design sets 220px against a 1440 frame — hold that ratio, but never
     let it overflow a narrow screen */
  font-size:clamp(56px,15.3vw,220px);
  line-height:.85;color:#fff;margin:0;
  letter-spacing:-.01em;
}

/* ══════════════ CAPABILITY BENTO ══════════════
   Asymmetric glass tiles on the near-black ground. Three things carry the
   "premium" read here and none of them is decoration for its own sake:
   generous radii, a light that follows the pointer, and restraint — accent
   colour appears only on hover and in the figures.

   The pointer light is a radial gradient positioned from --mx/--my, which
   js/branding.js writes on pointermove. Compositing a gradient's position is
   cheap; animating box-shadow per frame would not be. */
.bx-bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.4vw,20px);
  /* Rows hug their content. A fixed 180px floor plus a two-row span left every
     tile roughly half void — the large one was 420px tall carrying 139px of
     copy. Each row is now as tall as the tallest card in it and no taller. */
  grid-auto-rows:auto;
}
.bx-bento-head{
  display:flex;flex-direction:column;gap:10px;
  margin-bottom:clamp(24px,3vw,40px);
}
.bx-bento-h2{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(28px,3.4vw,48px);line-height:1;color:#fff;margin:0;
}

.bx-bento-card{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;
  /* Copy sits at the BOTTOM on every tile. The plate behind it is scrimmed from
     the bottom up, so text and image never fight for the same pixels — the
     first pass put copy at the top of the small tiles, directly over the
     busiest part of the artwork, and they were unreadable. */
  justify-content:flex-end;
  gap:10px;
  padding:clamp(20px,2.2vw,30px);
  border-radius:clamp(24px,2.2vw,32px);
  overflow:hidden;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.085);
  backdrop-filter:blur(22px) saturate(130%);
  -webkit-backdrop-filter:blur(22px) saturate(130%);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -28px rgba(0,0,0,.9);
  transition:transform .55s var(--bx-ease), border-color .55s var(--bx-ease),
             box-shadow .55s var(--bx-ease);
}
/* the pointer light */
.bx-bento-card::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
    rgba(255,145,36,.16), rgba(255,145,36,.04) 38%, transparent 62%);
  opacity:0;transition:opacity .45s var(--bx-ease);
}
.bx-bento-card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,145,36,.45);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,
             0 34px 60px -28px rgba(0,0,0,.95),
             0 0 34px -12px rgba(255,145,36,.3);
}
.bx-bento-card:hover::before{opacity:1;}
.bx-bento-card:focus-within{border-color:rgba(255,145,36,.55);}

/* Spans chosen so every row fills exactly four columns and nothing is left
   hanging: [2+2] / [1+1+2] / [4]. */
.bx-bento-lg{grid-column:span 2;}
.bx-bento-wide{grid-column:span 2;}
.bx-bento-sm{grid-column:span 1;}
.bx-bento-stat{grid-column:span 4;}

/* media sits behind the copy, dimmed, and lifts slightly on hover */
.bx-bento-media{position:absolute;inset:0;z-index:-2;}
.bx-bento-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:.5;
  transform:scale(1.02);
  transition:transform .8s var(--bx-ease), opacity .55s var(--bx-ease);
}
/* the scrim — opaque under the copy, clearing toward the top of the tile */
.bx-bento-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(17,17,17,.96) 0%, rgba(17,17,17,.86) 30%,
    rgba(17,17,17,.5) 62%, rgba(17,17,17,.2) 100%);
}
.bx-bento-card:hover .bx-bento-media img{transform:scale(1.07);opacity:.62;}

/* The small and wide tiles are too short for a plate to read as anything but
   noise behind the copy — one of them is a dense gig poster. There the image is
   texture, not content, so it sits well back; the large tile keeps its plate
   legible because it has the room to carry one. */
.bx-bento-sm .bx-bento-media img,
.bx-bento-wide .bx-bento-media img{opacity:.22;}
.bx-bento-sm:hover .bx-bento-media img,
.bx-bento-wide:hover .bx-bento-media img{opacity:.34;}
/* No min-height anywhere: a floor on one tile stretches everything sharing its
   row, which is what left Packaging 200px taller than its copy. Row height is
   now purely the tallest card's content. */
.bx-bento-lg .bx-bento-media::after{
  background:linear-gradient(to top,
    rgba(17,17,17,.95) 0%, rgba(17,17,17,.72) 38%,
    rgba(17,17,17,.25) 72%, transparent 100%);
}

.bx-bento-k{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0;
}
.bx-bento-t{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(20px,2.1vw,30px);line-height:1;color:#fff;margin:0;
}
.bx-bento-lg .bx-bento-t{font-size:clamp(26px,3vw,42px);}
.bx-bento-b{
  font-size:clamp(12px,1.05vw,14px);line-height:1.55;
  color:rgba(229,229,229,.72);margin:0;max-width:44ch;
}
.bx-bento-m{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  color:rgba(229,229,229,.42);margin:6px 0 0;
}

/* the figures tile — spans the full width, so the figures spread across it
   rather than clustering in the left third and leaving the rest dead */
.bx-bento-stats{
  display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,40px);margin:4px 0 0;
}
.bx-bento-stats div{
  flex:1 1 0;min-width:120px;
  display:flex;flex-direction:column;gap:4px;
}
.bx-bento-stats dt{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(30px,3.6vw,52px);line-height:.9;color:var(--accent);margin:0;
}
.bx-bento-stats dd{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(229,229,229,.55);margin:0;
}

@media (max-width: 900px){
  .bx-bento{grid-template-columns:repeat(2,1fr);}
  .bx-bento-lg{grid-column:span 2;}
  .bx-bento-wide,.bx-bento-stat{grid-column:span 2;}
}
@media (max-width: 560px){
  .bx-bento{grid-template-columns:1fr;}
  .bx-bento-sm,.bx-bento-lg,.bx-bento-wide,.bx-bento-stat{grid-column:span 1;}
}
@media (prefers-reduced-motion: reduce){
  .bx-bento-card,.bx-bento-card::before,.bx-bento-media img{transition:none;}
  .bx-bento-card:hover{transform:none;}
  .bx-bento-card:hover .bx-bento-media img{transform:scale(1.02);}
}


/* ── case studies ── */
.bx-cases{display:flex;flex-direction:column;gap:clamp(56px,7vw,96px);}
.bx-case{display:flex;flex-direction:column;gap:clamp(24px,3vw,40px);}
.bx-case-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(24px,4vw,64px);flex-wrap:wrap;
}
.bx-case-id{display:flex;flex-direction:column;gap:8px;}
.bx-case-n{
  font-family:var(--font-display);font-size:clamp(28px,3.4vw,48px);
  color:#fff;margin:0;line-height:1;
}
.bx-case-d{
  font-family:var(--font-mono);font-size:clamp(11px,1vw,14px);
  color:var(--paper-100);margin:0;letter-spacing:.06em;max-width:420px;
}

/* Six columns, and the build script gives every plate a span that makes its
   row add up to exactly six — so a five-plate brand fills two full rows
   instead of leaving three-quarters of the second one empty. The navy panel
   and its rule grid are gone with it; the plates now sit on the page. */
.bx-plates{
  --plate-gap:clamp(10px,1.2vw,16px);
  display:flex;flex-wrap:wrap;gap:var(--plate-gap);
}
.bx-plate{
  position:relative;margin:0;overflow:hidden;cursor:pointer;
  /* Share of the row, after the gaps are taken out of it. The shares sum to
     exactly 1, so the row comes to exactly 100% — and sub-pixel rounding then
     tips it over and wraps the last plate onto its own line. BLEEP did exactly
     that. Half a pixel of slack per plate costs nothing visible and keeps the
     row intact. */
  flex:0 0 calc((100% - (var(--n, 3) - 1) * var(--plate-gap)) * var(--share, .3333) - .5px);
  aspect-ratio:var(--ar, 1.3333);
  border-radius:clamp(14px,1.2vw,18px);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  transition:border-color .4s var(--bx-ease), transform .4s var(--bx-ease),
             box-shadow .4s var(--bx-ease);
}
.bx-plate img{width:100%;height:100%;object-fit:cover;display:block;}
.bx-plate:hover{
  border-color:rgba(255,145,36,.5);transform:translateY(-4px);
  box-shadow:0 26px 46px -26px rgba(0,0,0,.9), 0 0 26px -12px rgba(255,145,36,.28);
}
.bx-plate:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.bx-plate-n{
  position:absolute;left:10px;bottom:8px;margin:0;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8);
}

/* ── timeline ── */
.bx-timeline{display:flex;flex-direction:column;gap:clamp(24px,3vw,48px);}
.bx-steps{
  list-style:none;margin:0;padding:20px 0 0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,2vw,24px);
  position:relative;
}
/* the connecting rail sits behind the nodes, inset so it starts and ends on one */
.bx-steps::before{
  content:'';position:absolute;left:10%;right:10%;top:30px;height:2px;
  background:linear-gradient(90deg,var(--bx-line),var(--accent));
}
.bx-step{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;}
.bx-node{
  width:24px;height:24px;border-radius:12px;
  background:var(--ink-000);border:2px solid var(--bx-line);
  position:relative;z-index:1;
}
.bx-step.is-on .bx-node{border-color:var(--accent);background:var(--accent);}
.bx-step-t{
  font-family:var(--font-mono);font-weight:700;font-size:clamp(11px,1vw,14px);
  color:#fff;margin:0;letter-spacing:.06em;
}
.bx-step.is-on .bx-step-t{color:var(--accent);}
.bx-step-d{font-size:clamp(11px,1vw,12px);color:var(--paper-100);margin:0;line-height:1.4;}

/* ── footer ── */
.bx-foot{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(40px,5vw,72px) var(--bx-gutter);
  margin-top:clamp(72px,9vw,120px);
  border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
}
.bx-foot-link{color:var(--accent);}
.bx-foot-link:hover{color:var(--paper-000);}
.bx-foot-mark{color:rgba(229,229,229,.5);margin:0;}

/* ── narrow ── */
@media (max-width: 760px){
  /* Three-up is too fine on a phone. Two per row, each taking half the width
     minus the gap, still at its own ratio — so rows stay flush and the art is
     still uncropped, just in shorter rows. */
  .bx-plate{flex:0 0 calc((100% - var(--plate-gap)) / 2);}
}
@media (max-width: 440px){
  .bx-plate{flex:0 0 100%;}
}
@media (max-width: 900px){
  .bx-steps{grid-template-columns:repeat(2,1fr);gap:32px 16px;}
  .bx-steps::before{display:none;}   /* a rail across wrapped rows reads as a mistake */
}
@media (max-width: 560px){
  .bx-steps{grid-template-columns:1fr;}
  .bx-foot{flex-direction:column;align-items:flex-start;gap:12px;}
}