/* ──────────────────────────────────────────────────────────────
   The brand kit on top of base.css: halftone handshake, crosshair grid, grain, engraved eye,
   Archivo Expanded Black, the big lockup. No images behind the proof:
   people have to be able to read it (Adam, 2 Nov 2026).
   Loaded after base.css. Only adds to it.
   ────────────────────────────────────────────────────────────── */
@font-face { font-family: "Archivo Expanded"; src: url("assets/fonts/Archivo-ExpandedBlack.ttf") format("truetype"); font-weight: 900; font-display: swap; }

/* print grain over everything */
.brand::after {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* hero: halftone handshake + crosshair grid behind the headline */
.brand .hero { position: relative; isolation: isolate; background: var(--ink); } /* the image blends with this, no visible edge */
.brand .hero::before {
  content: ""; position: absolute; z-index: -2; inset: -40px 0 0; pointer-events: none;
  background: url("assets/bv/brand/handshake.jpg") center 110px / min(1500px, 170%) auto no-repeat; /* clear of the headline and sub line */
  mix-blend-mode: screen; opacity: .62;
  -webkit-mask-image: linear-gradient(#000 40%, transparent 84%); mask-image: linear-gradient(#000 40%, transparent 84%);
}
.brand .hero::after {
  content: ""; position: absolute; z-index: -1; inset: 120px 0 0; pointer-events: none; opacity: .9; /* starts below the top row */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M7.5 0v15M0 7.5h15' stroke='%23343440'/%3E%3C/svg%3E") 0 0 / 120px 120px;
  -webkit-mask-image: linear-gradient(#000, transparent 92%); mask-image: linear-gradient(#000, transparent 92%);
}
.brand .hero-cal { background: var(--panel); }
.brand .pill { background: rgba(8, 8, 11, .7); }

/* results: flat panels, nothing behind the proof */
.brand .case { margin-top: 14px; padding: 28px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 26px; }
.brand .case:last-child { padding-bottom: 28px; }
.brand .rule + .case { margin-top: 20px; }
.brand .stat { background: var(--ink); }
.brand .shots { margin-inline: -20px; padding-inline: 20px; }
.brand .shot img { border-color: rgba(142, 205, 247, .22); }

/* how it works: the engraved eye behind the cards (Adam's pick, 2 Nov 2026) */
.how { position: relative; isolation: isolate; background: var(--ink); }
.how::before {
  content: ""; position: absolute; z-index: -1; right: 0; top: 40px; width: min(900px, 90%); aspect-ratio: 1; pointer-events: none;
  background: url("assets/bv/brand/eye.jpg") center / contain no-repeat; mix-blend-mode: screen; opacity: .3;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent);
}
.brand .step { background: rgba(14, 14, 19, .84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* book: the lens sits top right, clear of the calendar */
.brand .book-panel { position: relative; isolation: isolate; overflow: hidden; }
.brand .book-panel::before {
  content: ""; position: absolute; z-index: -1; top: 0; right: 0; width: min(620px, 100%); height: 420px; pointer-events: none;
  background: var(--book-img, url("assets/bv/brand/lens.jpg")) var(--book-pos, center) / cover no-repeat; mix-blend-mode: screen; opacity: var(--book-op, .5);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%), linear-gradient(#000 45%, transparent 92%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 55%), linear-gradient(#000 45%, transparent 92%); mask-composite: intersect;
}
.brand .book h2 { font-family: "Archivo Expanded", var(--display); font-weight: 900; font-size: clamp(38px, 6vw, 76px); line-height: .95; letter-spacing: -.03em; }

/* the big lockup closes the page */
.lockup { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); border-top: 1px solid var(--line); padding: 72px 0 20px; }
.lockup::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: url("assets/bv/brand/handshake.jpg") center 30% / min(1500px, 190%) auto no-repeat; mix-blend-mode: screen; opacity: .32;
}
.lockup .wrap { display: block; text-align: center; }
.lock-mark { width: clamp(64px, 8vw, 104px); height: auto; display: block; margin: 0 auto 22px; }
.lock-word { font-size: clamp(44px, 11.4vw, 168px); line-height: 1; letter-spacing: .005em; margin: 0; white-space: nowrap; }
.lock-word sup { font-size: .22em; vertical-align: super; line-height: 0; }
.lock-rule { border: 0; border-top: 1px solid rgba(242, 242, 245, .35); margin: 24px auto 16px; max-width: 900px; }
.lockup .sig { font-size: clamp(10px, 1.3vw, 15px); letter-spacing: .3em; color: var(--paper); }
.lockup nav { justify-content: center; margin-top: 44px; }

@media (min-width: 720px) {
  .brand .case { padding: 40px 36px; }
  .brand .case:last-child { padding-bottom: 40px; }
  .brand .shots { margin-inline: 0; padding-inline: 0; }
}