/* ============================================================
   b.nito — shared site chrome (tokens, navbar, footer,
   buttons, section + card scaffolding). Linked by every
   secondary page (Work, Services, per-service). Home keeps
   its own inline styles for the globe/org-chart/hero.
   Palette: Teal Ladder. Type: Deuterium + Archivo + Space Mono.
   ============================================================ */

:root {
  --bg: #000;
  --ink: #f0eadc;
  --muted: rgba(240, 234, 220, 0.72);
  --lime: #c8f542;
  --lime-bright: #d8ff55;
  --lime-soft: rgba(200, 245, 66, 0.45);
  --line: rgba(240, 234, 220, 0.14);
  --teal-deep: #1f6f5f;
  --teal: #2fa084;
  --mint: #6fcf97;
  --font-display: "deuterium-variable", 'Archivo', sans-serif;
  --font-head: 'Archivo', system-ui, sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  --font-label: 'Space Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
html, body {
  min-height: 100dvh; background: var(--bg); color: var(--ink);
  font-family: var(--font-body), -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; overflow-x: clip; /* clip not hidden: keeps position:sticky working (break-scrub) */
}

/* ── Ambient background blobs (lighter than Home: no globe) ── */
.blob { position: fixed; border-radius: 50%; filter: blur(140px); pointer-events: none; z-index: 0; will-change: transform; }
.blob.b1 { width: 60vmax; height: 60vmax; top: -30vmax; left: -22vmax; background: radial-gradient(circle, var(--lime), transparent 60%); opacity: .14; }
.blob.b2 { width: 55vmax; height: 55vmax; bottom: -28vmax; right: -25vmax; background: radial-gradient(circle, var(--teal), transparent 60%); opacity: .2; }

/* ── Top navbar ──────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem clamp(1rem, 4vw, 2.4rem);
  border-bottom: 1px solid var(--line);
}
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8,8,8,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav-brand { font-family: var(--font-label); font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.nav-brand .n { color: var(--lime); }
.nav-menu { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); list-style: none; }
.nav-links a { font-family: var(--font-label); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .25s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--lime); }
.nav-cta {
  font-family: var(--font-label); font-weight: 700; font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; background: linear-gradient(100deg, var(--lime), var(--teal));
  color: #04140f; padding: .62rem 1.15rem; border-radius: 999px; text-decoration: none;
  transition: filter .25s ease, transform .25s ease;
}
.nav-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.nav-toggle, .nav-burger { display: none; }
@media (max-width: 760px) {
  .nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
  .nav-burger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: .4rem; z-index: 61; }
  .nav-burger span { width: 24px; height: 2px; background: var(--ink); transition: transform .3s ease, opacity .3s ease; }
  .nav-menu {
    position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px);
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1.6rem;
    padding: 5.5rem 2rem 2rem; background: rgba(8,8,8,.98); border-left: 1px solid var(--line);
    transform: translateX(100%); transition: transform .3s ease; z-index: 60;
  }
  .nav-links { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .nav-links a { font-size: .85rem; }
  .nav-toggle:checked ~ .nav-menu { transform: translateX(0); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ── Layout + sections ───────────────────────────────── */
main { position: relative; z-index: 2; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.section { max-width: 1180px; margin: 0 auto; padding: 4rem 1.5rem 0; }
.section + .section { padding-top: 4.5rem; }
.section.bordered { border-top: 1px solid rgba(47,160,132,.22); margin-top: 4.5rem; padding-top: 3.5rem; }

.eyebrow { font-family: var(--font-label); font-size: clamp(.65rem, .95vw, .78rem); letter-spacing: .3em; text-transform: uppercase; color: var(--lime); margin-bottom: 1rem; }
.page-head { max-width: 760px; }
.page-head h1, .page-head h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.02; }
.page-head .display { font-family: var(--font-display); }
.page-head .n { color: var(--teal); }
.lede { font-weight: 300; font-size: clamp(.95rem, 1.5vw, 1.12rem); color: var(--muted); line-height: 1.7; max-width: 600px; margin-top: 1.1rem; }
.lede b { color: var(--ink); font-weight: 500; }

/* Full-bleed image hero for service explore pages (heading sits over the image). Mirrors the 3D-CGI hero. */
.svc-hero { position: relative; max-width: none; width: 100%; margin: 0; padding: 0; overflow: hidden; }
.svc-herobg { display: block; width: 100vw; height: auto; pointer-events: none; user-select: none;
  animation: svcHeroIn 1.2s cubic-bezier(.22,1,.36,1) both; }
.svc-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.74) 0, rgba(0,0,0,.34) 44%, transparent 74%); }
.svc-hero .page-head { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
  max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px,5vw,80px); z-index: 2;
  text-shadow: 0 2px 30px rgba(0,0,0,.92); }
@keyframes svcHeroIn { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 880px) {
  /* match the 3d-cgi hero on mobile: the title sits ON the image (not below it), and a lighter
     gradient + slight brightness so the hero image stops reading so dark */
  .svc-hero { min-height: 80vh; }
  .svc-herobg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% center; filter: brightness(1.14); }
  .svc-hero .page-head { position: absolute; top: 50%; transform: translateY(-50%); padding-top: 0; }
  .svc-hero::after { background: linear-gradient(180deg, rgba(0,0,0,.28) 0, rgba(0,0,0,.48) 58%, rgba(0,0,0,.78)); } }
@media (prefers-reduced-motion: reduce) { .svc-herobg { animation: none; } }
/* Looping crossfade hero — multiple stacked images cycle behind the copy */
.svc-hero.is-loop { aspect-ratio: 2 / 1; }
.svc-hero.is-loop::after { background: linear-gradient(90deg, rgba(0,0,0,.8) 0, rgba(0,0,0,.46) 50%, rgba(0,0,0,.22) 100%); }
.svc-hero.is-loop .svc-herobg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; animation: svcHeroLoop 18s ease-in-out infinite; }
.svc-hero.is-loop .svc-herobg:nth-child(1) { animation-delay: 0s; }
.svc-hero.is-loop .svc-herobg:nth-child(2) { animation-delay: 6s; }
.svc-hero.is-loop .svc-herobg:nth-child(3) { animation-delay: 12s; }
/* Each image holds until the next is fully in (later images stack on top), so changes crossfade, never dip to black. */
@keyframes svcHeroLoop { 0% { opacity: 0; } 4% { opacity: 1; } 37.3% { opacity: 1; } 41.3% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .svc-hero.is-loop .svc-herobg { animation: none; opacity: 0; }
  .svc-hero.is-loop .svc-herobg:nth-child(1) { opacity: 1; }
}
/* Framed feature image inside a service explore page body */
.svc-feature-img { display: block; width: min(1180px, 92%); margin: 3rem auto 0; }
.svc-feature-img img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }

/* Drifting brand-colour bokeh — ambient depth on service pages (matches Home). Sits above .blob glows, behind content. */
.amb-bokeh { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.abok { position: absolute; border-radius: 50%; filter: blur(10px);
  background: radial-gradient(circle at 38% 34%, var(--c), transparent 70%);
  opacity: var(--o,.4); will-change: transform; animation: ambBokFloat var(--d,20s) ease-in-out infinite; animation-delay: var(--dl,0s); }
@keyframes ambBokFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(var(--mx,20px), var(--my,-28px)) scale(1.12); } }
@media (prefers-reduced-motion: reduce){ .abok { animation: none; } }
.section-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.section-title .n { color: var(--teal); }

/* ── Buttons ─────────────────────────────────────────── */
.cta {
  display: inline-block; background: linear-gradient(100deg, var(--lime), var(--teal)); color: #04140f;
  font-family: var(--font-label); font-weight: 700; font-size: clamp(.7rem, 1vw, .82rem);
  letter-spacing: .18em; text-transform: uppercase; padding: 1rem 2.2rem; border-radius: 999px;
  text-decoration: none; transition: filter .3s ease, transform .3s ease, box-shadow .3s ease;
}
.cta:hover { filter: brightness(1.08); transform: translateY(-2px) scale(1.04); box-shadow: 0 0 36px rgba(200,245,66,.4), 0 0 80px rgba(47,160,132,.22); }
.cta.ghost { background: transparent; color: var(--mint); border: 1px solid rgba(47,160,132,.55); }
.cta.ghost:hover { background: rgba(47,160,132,.12); border-color: var(--teal); box-shadow: 0 0 26px rgba(47,160,132,.2); }

/* ── Card grids ──────────────────────────────────────── */
.grid { display: grid; gap: .9rem; }
/* auto-fit with a smaller floor: at 290px only four ever fit in 1180, so a group of
   five stranded one node alone on its own row. min() keeps it from overflowing on a
   narrow screen. */
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card {
  display: block; background: linear-gradient(180deg, rgba(31,111,95,.18), rgba(0,0,0,.55));
  border: 1px solid var(--line); border-radius: 6px; padding: 1.4rem 1.5rem;
  text-decoration: none; color: var(--ink); backdrop-filter: blur(6px);
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.card:hover { border-color: var(--teal); transform: translateY(-3px); box-shadow: 0 0 28px rgba(47,160,132,.22); }
.card-thumb { display: block; margin: -1.4rem -1.5rem 1.1rem; height: 150px; overflow: hidden; border-radius: 6px 6px 0 0; background: #0a120e; border-bottom: 1px solid var(--line); }
.card-thumb img, .card-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
/* A logo is not a photograph. `cover` fills the 150px band by scaling the mark
   up and slicing the top and bottom off it, which reads as a thumbnail that is
   too big rather than one that is cropped. Contain shows the whole mark. */
/* Specificity has to clear .svc-card .card-thumb img, which lives in the
   homepage's own <style> block and therefore also loads after this file.
   Matching its weight would lose on order, so this outweighs it instead. */
.svc-card .card-thumb img.fit-contain,
.card .card-thumb img.fit-contain,
.card-thumb img.fit-contain { object-fit: contain; background: #05100f; }
.card:hover .card-thumb img, .svc-card:hover .card-thumb img,
.card:hover .card-thumb video, .svc-card:hover .card-thumb video { transform: scale(1.05); }
/* Approved node scheme: teal label, lime display title, cream body, lime link.
   The old default was a lime label and a mint link, which is the "awful scheme"
   every page outside the reworked cards had defaulted to. */
.w-tag { font-family: var(--font-label); font-weight: 700; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: .6rem; }
/* --font-head is Archivo. Node titles are display type: this single line is why every
   card outside the homepage was in the wrong face. */
.w-title { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; letter-spacing: -.01em; color: var(--lime); display: block; margin-bottom: .55rem; }
/* was 300 weight against a busy backdrop: too light to read on the translucent cards */
.w-desc { font-weight: 400; font-size: .87rem; color: var(--ink); opacity: .86; line-height: 1.65; display: block; }
.w-link { font-family: var(--font-label); font-weight: 700; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); display: block; margin-top: 1rem; }
a.card:hover .w-link { color: var(--lime-bright, #d8ff55); }

/* ── Brand proof strip ───────────────────────────────── */
.brands { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.brands li { list-style: none; font-family: var(--font-label); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: .6rem 1.1rem; }

/* ── CTA band ────────────────────────────────────────── */
.cta-band { text-align: center; max-width: 700px; margin: 5rem auto 0; padding: 3.5rem 1.5rem 2.5rem; border-top: 1px solid rgba(47,160,132,.22); background: radial-gradient(120% 100% at 50% 100%, rgba(31,111,95,.16), transparent 60%); border-radius: 14px; }
.cta-band h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 1rem; }
.cta-band h2 em { font-style: normal; color: var(--teal); }
.cta-band p { color: var(--muted); font-weight: 300; line-height: 1.7; margin-bottom: 2rem; }

/* Brands logo marquee (shared) */
.logo-strip { max-width: 1180px; margin: 5rem auto 0; padding: 2.4rem 0 0; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .logo-strip { margin-top: 2.6rem; } }
.logo-strip-label { text-align: center; font-family: 'Space Mono', monospace; font-size: .6rem; letter-spacing: .34em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.9rem; }
.logo-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.logo-track { display: flex; align-items: center; width: max-content; animation: logoMarquee 62s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
/* symmetric per-logo margin (not flex gap) so translateX(-50%) lands exactly one set over = seamless */
.logo-track img { height: 36px; width: auto; flex: none; margin: 0 clamp(1.1rem, 2.5vw, 2.2rem); opacity: .7; transition: opacity .3s ease, transform .3s ease; }
.logo-track img.sm { height: 24px; }   /* Mars: optically heavy, sits smaller */
.logo-track img.lg { height: 41px; }   /* +15% optical balance */
.logo-track img.xs { height: 29px; }   /* -20% optical balance */
.logo-track img:hover { opacity: 1; transform: translateY(-2px); }
@keyframes logoMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 1.7rem; }
  .logo-track img.dupe { display: none; }
}

/* ── Footer ──────────────────────────────────────────── */
.site-foot {
  width: 100vw; margin: 6rem 0 0; margin-left: calc(50% - 50vw);
  padding: 4.6rem clamp(1.2rem, 5vw, 4rem) 1.8rem;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(72% 130% at 16% 0%, rgba(200,245,66,.06), transparent 58%),
    linear-gradient(180deg, rgba(31,111,95,.10), rgba(0,0,0,0) 60%);
  text-align: left;
}
.site-foot .foot-lead { max-width: 1180px; margin: 0 auto 2.6rem; }
.site-foot .foot-statement {
  font-family: var(--font-display); font-weight: 600; line-height: 1.0;
  font-size: clamp(2rem, 6vw, 4rem); letter-spacing: -.02em; color: var(--ink); margin: 0 0 1.5rem;
}
.site-foot .foot-statement .n { color: var(--lime); }
.site-foot .foot-email {
  display: inline-block; font-family: 'Space Mono', monospace; font-weight: 700;
  font-size: clamp(1.55rem, 5vw, 3rem); letter-spacing: -.01em; color: var(--lime);
  text-decoration: none; line-height: 1.1; transition: color .2s ease, text-shadow .2s ease;
}
.site-foot .foot-email:hover { color: #d8ff55; text-shadow: 0 0 26px rgba(200,245,66,.45); }
.site-foot .foot-meta {
  margin: 1rem 0 0; font-family: 'Space Mono', monospace; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.site-foot .foot-meta a { color: var(--muted); text-decoration: none; }
.site-foot .foot-meta a:hover { color: var(--lime); }
.site-foot .foot-meta .dot { color: var(--lime); padding: 0 .5rem; opacity: .7; }
.site-foot .foot-contact-row { display: flex; align-items: center; justify-content: flex-start; gap: 1.5rem clamp(2.5rem, 8vw, 6rem); flex-wrap: wrap; }
.site-foot .foot-roundel { position: relative; flex: 0 0 auto; width: 132px; height: 132px; display: grid; place-items: center; text-decoration: none; }
.site-foot .foot-roundel::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(200,245,66,.22); }
.site-foot .roundel-svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: rdlSpin 16s linear infinite; }
.site-foot .roundel-svg text { fill: var(--lime); font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 1.5px; font-weight: 700; text-transform: uppercase; }
.site-foot .roundel-arrow { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(200,245,66,.45); color: var(--lime); display: grid; place-items: center; font-size: 1.4rem; line-height: 1; transition: background .2s ease, color .2s ease, transform .25s ease; }
.site-foot .foot-roundel:hover .roundel-arrow { background: var(--lime); color: #06100c; transform: translate(2px,-2px); }
.site-foot .foot-roundel:hover .roundel-svg { animation-duration: 7s; }
@keyframes rdlSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .site-foot .roundel-svg { animation: none; } }
.site-foot .foot-base {
  max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 1rem 1.6rem;
  border-top: 1px solid var(--line); padding-top: 1.5rem;
}
/* The footer lockup is the OUTLINED master, same file as the nav. Was live
   Space Mono text, which was neither the mark nor the right typeface. */
.site-foot .f-mark { display: inline-flex; align-items: center; text-decoration: none; }
.site-foot .foot-mark { height: 38px; width: auto; display: block; }
/* The old bottom line ran "(c) 2026 b.nito - privacy - make things move" as ONE
   string. That is three unrelated things: a legal notice, a page link and the
   tagline. Privacy moved into the nav where it is a page like any other; the
   tagline and the copyright are now stacked and typed differently, because they
   are not the same kind of statement. */
.site-foot .foot-tail { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; text-align: right; }
.site-foot .foot-tagline { font-family: 'Space Mono', monospace; font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--lime); }
.site-foot .foot-nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.site-foot .foot-nav a { font-family: 'Space Mono', monospace; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .2s ease; }
.site-foot .foot-nav a:hover { color: var(--lime); }
.site-foot .foot-copy { font-family: 'Space Mono', monospace; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.site-foot .foot-copy a { color: var(--muted); text-decoration: none; }
.site-foot .foot-copy a:hover { color: var(--lime); }
.site-foot .foot-copy .dot { padding: 0 .35rem; opacity: .6; }
@media (max-width: 700px){
  .site-foot .foot-base { flex-direction: column; align-items: flex-start; }
  .site-foot .foot-meta { font-size: .72rem; }
  .site-foot .foot-tail { align-items: flex-start; text-align: left; }
}

/* ── Scroll reveals (no-op under reduced motion) ─────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 700px) {
  .card { backdrop-filter: none; background: rgba(8,8,8,.9); }
  .blob { filter: blur(80px); }
}
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Looping product-motion players (ZYN reveal + turntable). See assets/zyn-player.js */
.zyn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1rem, 3vw, 2.4rem); margin-top: 1.9rem; }
.zyn-cell { margin: 0; }
.zyn-player { position: relative; width: 100%; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 36%, rgba(47,160,132,.12), transparent 60%), #060606; }
.zyn-player canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.zyn-cell figcaption { margin-top: .8rem; font-family: var(--font-label); font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }

/* Work page: Scene 1 looping in the right-hand third as an ambient background. */
/* Span the gap between the card cluster's right edge (centered 1180 section + 24px pad + 620px grid
   = 50vw + 54px) and the screen edge, and centre the can in that gap. */
/* Work page hero BAND: cycling product renders + ZYN can + the hero copy. The work cards sit BELOW this band (off the image). */
.work-hero { position: relative; width: 100%; min-height: 86vh; overflow: hidden; display: flex; align-items: center; }
.work-hero-cycle { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.work-hero-cycle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.work-hero-cycle img.is-shown { opacity: 1; }
.work-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.74) 0, rgba(0,0,0,.36) 44%, transparent 74%),
              linear-gradient(180deg, transparent 55%, rgba(6,6,6,.5) 100%); }
.work-hero .page-head { position: relative; z-index: 3; max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 clamp(20px,5vw,80px); text-shadow: 0 2px 30px rgba(0,0,0,.9); }
@media (prefers-reduced-motion: reduce) { .work-hero-cycle img { transition: none; } }
/* ZYN can reel — sits inline (right) with the "Trusted on work that ships" section, off the hero images */
.work-trust { position: relative; }
.workreel-bg { position: absolute; top: 0; bottom: 0; right: 0; width: 40%; z-index: 1; pointer-events: none; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.workreel-bg .zyn-player { position: relative; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; background: none; opacity: 1; }
.workreel-veil { display: none; }
@media (max-width: 900px) { .workreel-bg { display: none; } }
/* Slider cards: two side by side, the third spanning beneath, held to the left
   so the Scene 1 background stays the hero. */
/* No max-width: the 940px cap left these three sitting narrower than, and out of
   line with, the full-width panels directly below them. */
.work-cards .grid { grid-template-columns: repeat(3, 1fr); gap: .75rem; }
/* The card body is translucent (rgba(0,0,0,.55) over the page image), so a solid black
   thumbnail above it made the card read as two different panels stacked. Let the same
   backdrop through the top half and match the weight. */
.work-cards .card .lt-frame { background: transparent; }
.work-cards .card .lt-frame iframe { opacity: .42; }
.work-cards .card:hover .lt-frame iframe { opacity: .9; }
.work-cards .card { padding: 1rem 1.15rem; }
.work-cards .w-title { font-size: 1rem; }
.work-cards .w-desc { font-size: .8rem; line-height: 1.6; }
.work-cards .w-link { margin-top: .7rem; }
@media (max-width: 900px) {
  .work-cards .grid { grid-template-columns: 1fr; max-width: none; }
  .work-cards .card:nth-child(3) { grid-column: auto; }
}

/* Image-save deterrents (no visual change; deters casual saving, not foolproof) */
img, canvas { -webkit-user-drag: none; -webkit-touch-callout: none; }

.inline-cta { color: var(--lime); text-decoration: none; border-bottom: 1px solid currentColor; white-space: nowrap; }
.inline-cta:hover { color: var(--lime-bright); }

/* ── the mark, settled 2026-08-13 ──────────────────────────────────────────
   .{bnito} — Oswald SemiBold core, Teko braces, 16deg forward slant.
   V013 colours: dot + b lime, nito ink/cream per ground, braces dark grey.
   Full spec: brand/mark-spec.json. Outlined master: brand/wordmark-dark.svg.
   The nav is the same lockup as the hero, only smaller. */
.bm {
  font-family: 'Oswald', 'Archivo', sans-serif; font-weight: 600;
  letter-spacing: -.01em; display: inline-block;
  /* The lean overhangs the box top and undercuts the bottom, so a flush-left
     mark reads as indented and its last glyph clips. Half the lean back, and
     room on the right. */
  transform: skewX(-16deg);
  margin-left: -.07em; padding-right: .15em;
}
.bm-d { color: var(--lime); }
.bm-b { color: var(--lime); }
.bm-n { color: var(--ink); }
.bm-c {
  font-family: 'Teko', 'Oswald', sans-serif; font-weight: 400;
  color: #4a4a44; font-size: 1.04em;
  display: inline-block; transform: translateY(-.02em);
}
.nav-brand .bm { font-size: 1.18rem; }

/* The nav mark is John's October 2026 logo as outlined SVG, from brand/logo/
   via tools/build-logo.py. Paths, not live text, so no webfont has to arrive.
   Aspect is 1.589:1 and the viewBox is cut tight, so it sits flush with no
   negative margin (the August master needed one for its 15% padding). */
.nav-brand { display: inline-flex; align-items: center; }
.nav-mark { display: block; height: 42px; width: auto; }
@media (max-width: 780px) { .nav-mark { height: 36px; } }



/* Hover lifts the title rather than changing it, so the scheme reads the same at rest
   on every node on every page. */
.card:hover .w-title, .svc-card:hover .w-title, .work-card:hover .w-title,
.demo-box:hover .w-title { color: var(--lime-bright, #d8ff55); }

/* ── Node motion, site wide ────────────────────────────────────────────────
   Entrance: the node scales up from 90% with a small overshoot and settles. No
   sideways travel and no bounce, so it reads as the node arriving rather than being
   thrown at the page. Chosen from four options built side by side; the two travelling
   variants both read as fussy at this card size.

   node-reveal.js strips the animation on animationend and adds .node-settled. An
   animation with fill-mode both keeps ownership of the transform property, so the
   hover magnify silently never fires on a node that had animated in.

   Hover uses !important on the transform only. Several pages define their own
   :hover translateY in an inline <style> block, which loads after this file and
   would otherwise win. */
@keyframes nodeSettle {
  0%   { opacity: 0; transform: scale(.9); }
  60%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: none; }
}

.node-stagger > * { opacity: 0; }
.node-stagger > .node-in { animation: nodeSettle .55s cubic-bezier(.2, .85, .3, 1) both; }
.node-stagger > .node-settled { opacity: 1; transform: none; animation: none; }

.card, .svc-card, .work-card, .demo-box, .prin, .sol-card, .member {
  transition: transform .26s cubic-bezier(.2, .9, .25, 1.5),
              border-color .2s ease, box-shadow .3s ease, filter .25s ease;
  will-change: transform;
}
/* 1.06 and 6px was firing correctly and reading as nothing on a card this size.
   Bigger lift, a lime edge, a real glow and the artwork brightening together, so the
   node visibly reacts rather than technically reacting. */
.card:hover, .svc-card:hover, .work-card:hover, .demo-box:hover,
.prin:hover, .sol-card:hover, .member:hover,
.node-stagger > .node-settled:hover {
  transform: scale(1.09) translateY(-12px) !important;
  z-index: 6;
  border-color: var(--lime, #c8f542) !important;
  box-shadow: 0 26px 64px rgba(0,0,0,.62), 0 0 0 1px rgba(200,245,66,.55),
              0 0 46px rgba(200,245,66,.34) !important;
  filter: brightness(1.06);
}
.card:hover .lt-frame iframe, .svc-card:hover .lt-frame iframe,
.work-card:hover .lt-frame iframe, .demo-box:hover .lt-frame iframe { opacity: 1 !important; }
.card:hover .w-link, .svc-card:hover .w-link, .work-card:hover .w-link,
.demo-box:hover .w-link { letter-spacing: .22em; }
.card:active, .svc-card:active, .work-card:active, .demo-box:active,
.prin:active, .sol-card:active { transform: scale(1.03) translateY(-4px) !important; }

@media (prefers-reduced-motion: reduce) {
  .node-stagger > *, .node-stagger > .node-in { opacity: 1; animation: none; transform: none; }
  .card:hover, .svc-card:hover, .work-card:hover, .demo-box:hover,
  .prin:hover, .sol-card:hover, .member:hover { transform: none !important; }
}