/* ==========================================================================
   Selution — Where Work Meets Play
   Two grounds: dark = Play (culture), light = Work (operations).
   The alternation is meaning, not decoration.
   ========================================================================== */

:root{
  /* Grounds */
  --ink:        #071726;   /* Play ground — near-black navy, cinematic */
  --ink-2:      #0C2338;   /* raised surface on dark */
  --ink-3:      #14324D;   /* hairlines on dark */
  --paper:      #F7F6F3;   /* Work ground — clean near-white */
  --paper-2:    #EDEAE3;   /* raised surface on light */
  --paper-3:    #DCD7CC;   /* hairlines on light */

  /* The one loud colour — from the Selution logo */
  --flare:      #F5902E;
  --flare-deep: #C96A15;

  /* Text */
  --on-ink:        #F3F1EC;
  --on-ink-soft:   #93A6B8;
  --on-paper:      #10222F;
  --on-paper-soft: #55636E;

  --ok: #34C08D;

  /* Type */
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body:    "Instrument Sans", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --shell: 1240px;
  --r:  18px;   /* card radius */
  --r-s: 12px;
  --nav-h: 68px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--on-ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; }

.shell{ width:100%; max-width:var(--shell); margin:0 auto; padding:0 24px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:16px; top:-60px; z-index:400;
  background:var(--flare); color:#08131D; font-weight:600;
  padding:10px 18px; border-radius:999px; text-decoration:none;
  transition:top .16s var(--ease);
}
.skip-link:focus{ top:14px; }

:focus-visible{ outline:3px solid var(--flare); outline-offset:3px; border-radius:6px; }

/* ── Type scale ─────────────────────────────────────────────────────────── */
h1,h2,h3{ font-family:var(--display); margin:0; line-height:1.02; letter-spacing:-.025em; }

.band-title{ font-size:clamp(2.3rem,5.4vw,4rem); font-weight:800; }
.band-lead{ max-width:56ch; font-size:1.06rem; margin:16px 0 0; }
.band-dark .band-lead{ color:var(--on-ink-soft); }
.band-light .band-lead{ color:var(--on-paper-soft); }

/* Section tags — the Work/Play system made visible */
.band-tag{
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; margin:0 0 14px;
}
.tag-play{ color:var(--flare); }
.tag-work{ color:var(--flare); }
.band-light .tag-work{ color:var(--flare-deep); }

.band-head{ margin-bottom:56px; }

/* ── Bands ──────────────────────────────────────────────────────────────── */
.band{ padding:110px 0; position:relative; }
.band-dark{ background:var(--ink); color:var(--on-ink); }
.band-light{ background:var(--paper); color:var(--on-paper); }
.band-light .band-title{ color:var(--on-paper); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:.96rem;
  padding:15px 26px; border-radius:999px; border:0;
  text-decoration:none; cursor:pointer;
  transition:transform .16s var(--ease), background-color .16s var(--ease);
}
.btn-flare{ background:var(--flare); color:#08131D; }
.btn-flare:hover{ background:var(--flare-deep); color:#fff; transform:translateY(-2px); }
.btn-full{ width:100%; }

/* ══════════════════════════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════════════════════════ */
.nav{
  position:sticky; top:0; z-index:200; height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(7,23,38,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(243,241,236,.09);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.nav-brand img{ height:26px; width:auto; }

.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{
  text-decoration:none; font-size:.92rem; font-weight:500;
  color:var(--on-ink); opacity:.82; white-space:nowrap;
  transition:opacity .15s var(--ease);
}
.nav-links a:hover{ opacity:1; }
.nav-links .tag-play,
.nav-links .tag-work{
  font-family:var(--mono); font-size:.58rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  display:block; color:var(--flare); opacity:.75; margin-bottom:1px;
}
.nav-join{ font-weight:600 !important; opacity:1 !important; }
.nav-cta{
  background:var(--flare); color:#08131D !important; opacity:1 !important;
  padding:10px 20px; border-radius:999px; font-weight:600 !important;
  transition:background-color .16s var(--ease);
}
.nav-cta:hover{ background:var(--flare-deep); color:#fff !important; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:6px;
  width:42px; height:42px; padding:0; background:none; border:0; cursor:pointer;
}
.nav-toggle .bar{
  display:block; height:2px; width:22px; margin:0 auto;
  background:var(--on-ink); border-radius:2px;
  transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════ */
.hero{
  position:relative; overflow:hidden;
  min-height:min(92vh,860px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:90px;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video,
.hero-montage img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.hero-media video{ opacity:0; transition:opacity .6s var(--ease); }
.hero-media video.is-playing{ opacity:1; }
.hero-media video.is-playing ~ .hero-montage{ opacity:0; }

.hero-montage{ position:absolute; inset:0; transition:opacity .6s var(--ease); }
.hero-montage img{ opacity:0; transform:scale(1.06); transition:opacity 1.6s var(--ease); }
.hero-montage img.is-on{ opacity:1; animation:kenburns 9s linear forwards; }
@keyframes kenburns{ from{ transform:scale(1.02); } to{ transform:scale(1.12); } }

/* Two layers: a soft vertical wash for depth, plus a bottom-weighted
   block that guarantees the headline and CTAs stay legible over any photo. */
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,23,38,.72) 0%, rgba(7,23,38,.50) 30%, rgba(7,23,38,.78) 62%, rgba(7,23,38,.96) 92%),
    radial-gradient(120% 80% at 78% 6%, rgba(245,144,46,.18), transparent 60%);
}

.hero-inner{ position:relative; z-index:2; padding-bottom:52px; }

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.74rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-ink); margin:0 0 26px;
  background:rgba(7,23,38,.5); border:1px solid rgba(243,241,236,.16);
  padding:8px 15px; border-radius:999px;
}
.live-dot{
  width:7px; height:7px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 0 rgba(52,192,141,.7); animation:pulse 2.4s infinite;
  flex:0 0 auto;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(52,192,141,.6); }
  70%{ box-shadow:0 0 0 9px rgba(52,192,141,0); }
  100%{ box-shadow:0 0 0 0 rgba(52,192,141,0); }
}

/* The signature: two typographic voices colliding in one sentence */
.hero-title{
  font-size:clamp(3rem,9.5vw,7.4rem);
  font-weight:800; letter-spacing:-.04em; line-height:.92;
  margin:0 0 22px;
}
.ht-line{ display:block; }
.ht-work{
  font-family:var(--mono); font-weight:600;
  font-size:.52em; letter-spacing:-.01em;
  text-transform:uppercase;
  border:2px solid var(--flare); color:var(--flare);
  padding:.06em .3em .1em; border-radius:10px;
  display:inline-block; transform:translateY(-.14em) rotate(-1.5deg);
}
.ht-play{
  font-style:italic; color:var(--flare);
  letter-spacing:-.045em;
}

.hero-sub{
  font-size:clamp(1.02rem,1.7vw,1.24rem);
  max-width:44ch; color:var(--on-ink); opacity:.9; margin:0 0 38px;
}

/* Dual-path doors — split the audience at the entrance */
.doors{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; max-width:720px; }
.door{
  position:relative; display:flex; flex-direction:column; gap:3px;
  padding:22px 24px 20px; border-radius:var(--r);
  text-decoration:none; overflow:hidden;
  border:1px solid rgba(243,241,236,.2);
  background:rgba(7,23,38,.58);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}
.door:hover{ transform:translateY(-3px); border-color:var(--flare); }
.door-tag{
  font-family:var(--mono); font-size:.62rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--flare);
}
.door-head{ font-family:var(--display); font-weight:700; font-size:1.44rem; letter-spacing:-.02em; }
.door-sub{ font-size:.9rem; color:var(--on-ink-soft); }
/* Always visible so touch users get the affordance too — brightens on hover. */
.door-go{
  position:absolute; right:22px; top:50%; transform:translateY(-50%);
  font-size:1.4rem; color:var(--flare); opacity:.5;
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.door:hover .door-go{ opacity:1; transform:translateY(-50%) translateX(4px); }
.door-work{ background:rgba(245,144,46,.1); }

/* Numbers marquee */
.hero-marquee{
  position:relative; z-index:2;
  border-top:1px solid rgba(243,241,236,.12);
  border-bottom:1px solid rgba(243,241,236,.12);
  background:rgba(7,23,38,.72);
  overflow:hidden; padding:15px 0;
}
.marquee-track{
  display:flex; align-items:center; gap:34px; width:max-content;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.06em;
  color:var(--on-ink-soft); white-space:nowrap;
  animation:slide 34s linear infinite;
}
.hero-marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track b{ color:var(--on-ink); font-weight:600; }
.marquee-track i{ color:var(--flare); font-style:normal; font-size:.6rem; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ══════════════════════════════════════════════════════════════════════════
   LIFE AT SELUTION
   ══════════════════════════════════════════════════════════════════════════ */
.week{ margin-bottom:52px; }
.week-label{
  font-family:var(--mono); font-size:.7rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--on-ink-soft);
  margin:0 0 16px;
}
.week-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:16px; }
.week-card{
  background:var(--ink-2); border:1px solid var(--ink-3);
  border-radius:var(--r); padding:22px; margin:0;
  transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.week-card:hover{ border-color:rgba(245,144,46,.5); transform:translateY(-2px); }
.week-feature{ display:flex; gap:20px; align-items:center; padding:18px; }

/* Click-to-play YouTube facade — real thumbnail, player loads on demand */
.yt-facade{
  position:relative; flex:0 0 232px; aspect-ratio:16/9;
  padding:0; border:0; border-radius:var(--r-s); overflow:hidden;
  background:var(--ink-3); cursor:pointer; display:block;
}
.yt-facade img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.yt-facade:hover img{ transform:scale(1.05); }
.yt-play{
  position:absolute; inset:0; margin:auto;
  width:52px; height:52px; border-radius:50%;
  background:rgba(230,33,23,.94);
  box-shadow:0 6px 18px -4px rgba(0,0,0,.5);
  transition:transform .18s var(--ease), background-color .18s var(--ease);
}
.yt-play::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:0; height:0; border-style:solid;
  border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
  transform:translateX(2px);
}
.yt-facade:hover .yt-play{ transform:scale(1.09); background:#E62117; }
.yt-dur{
  position:absolute; right:8px; bottom:8px;
  font-family:var(--mono); font-size:.66rem; font-weight:600;
  background:rgba(7,23,38,.86); color:var(--on-ink);
  padding:3px 7px; border-radius:5px;
}
/* Width must be explicit: on a replaced element, flex-basis + aspect-ratio
   lets the resolved height drive the width instead. */
.yt-frame{
  flex:0 0 auto; width:232px; height:auto; aspect-ratio:16/9;
  border:0; border-radius:var(--r-s); overflow:hidden; display:block;
}
.week-kicker{
  font-family:var(--mono); font-size:.64rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--flare);
  margin:0 0 8px;
}
.week-card h3{ font-size:1.12rem; font-weight:700; letter-spacing:-.015em; }
.week-note{ font-size:.86rem; color:var(--on-ink-soft); margin:8px 0 0; }
.week-link{
  display:inline-block; margin-top:10px; font-size:.88rem; font-weight:600;
  color:var(--flare); text-decoration:none;
}
.week-link:hover{ text-decoration:underline; }

/* Earlier episodes — auto-fill so the row absorbs new uploads */
.eps{ margin-bottom:52px; }
.eps-label{
  font-family:var(--mono); font-size:.7rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--on-ink-soft);
  margin:0 0 16px;
}
.eps-row{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(232px, 1fr));
}
.ep{ margin:0; }
.ep .yt-facade,
.ep .yt-frame{ flex:none; width:100%; }
.ep-title{
  font-size:.98rem; font-weight:600; letter-spacing:-.01em;
  margin:12px 0 0; color:var(--on-ink);
}

/* Channels */
.channels{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:52px; }
.channel{
  display:flex; align-items:center; gap:14px;
  padding:18px 22px; border-radius:var(--r);
  background:var(--ink-2); border:1px solid var(--ink-3);
  text-decoration:none;
  transition:transform .18s var(--ease), border-color .18s var(--ease);
}
.channel svg{ width:28px; height:28px; flex:0 0 auto; }
.channel-name{ font-family:var(--display); font-weight:700; font-size:1.06rem; }
.channel-handle{ font-family:var(--mono); font-size:.76rem; color:var(--on-ink-soft); margin-left:auto; }
.channel:hover{ transform:translateY(-3px); }
.channel-yt:hover{ border-color:#E62117; }
.channel-tt:hover{ border-color:#25F4EE; }
.channel-ig:hover{ border-color:#E1306C; }

/* Photo reel — horizontal, scroll-snapped */
.reel{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(440px,78vw);
  gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:14px; margin:0 -24px; padding-left:24px; padding-right:24px;
  scrollbar-width:thin; scrollbar-color:var(--ink-3) transparent;
}
.reel::-webkit-scrollbar{ height:7px; }
.reel::-webkit-scrollbar-thumb{ background:var(--ink-3); border-radius:99px; }
.reel-item{
  margin:0; position:relative; scroll-snap-align:start;
  border-radius:var(--r); overflow:hidden; background:var(--ink-2);
}
.reel-item img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; transition:transform .5s var(--ease); }
.reel-tall img{ aspect-ratio:4/5; }
.reel-item:hover img{ transform:scale(1.04); }
.reel-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 16px 13px;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.04em;
  background:linear-gradient(to top, rgba(7,23,38,.92), transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   WHAT WE DO
   ══════════════════════════════════════════════════════════════════════════ */
.svc-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.svc{
  background:var(--paper-2); border:1px solid var(--paper-3);
  border-radius:var(--r); padding:26px 22px 24px;
  transition:transform .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}
.svc:hover{ transform:translateY(-3px); border-color:var(--flare); background:#fff; }
.svc-n{
  display:block; font-family:var(--display); font-weight:700;
  font-size:1.16rem; letter-spacing:-.02em; margin-bottom:9px;
  color:var(--on-paper);
}
.svc p{ margin:0; font-size:.92rem; color:var(--on-paper-soft); line-height:1.55; }
/* The 8 services fill two clean rows; the ask spans the full width below
   them so it reads as a closing invitation rather than a ninth service. */
.svc-cta{
  grid-column:1 / -1;
  background:var(--on-paper); border-color:var(--on-paper);
  display:flex; align-items:center; gap:10px 26px; flex-wrap:wrap;
  padding:24px 28px;
}
.svc-cta .svc-n{ color:var(--paper); margin-bottom:0; }
.svc-cta p{ color:rgba(247,246,243,.72); flex:1 1 280px; }
.svc-cta a{
  color:var(--flare); font-weight:600; font-size:.95rem;
  text-decoration:none; white-space:nowrap;
}
.svc-cta:hover{ background:var(--on-paper); border-color:var(--flare); transform:none; }
.svc-cta a:hover{ text-decoration:underline; }

/* ══════════════════════════════════════════════════════════════════════════
   THE CREW
   ══════════════════════════════════════════════════════════════════════════ */
.crew-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.person{
  background:var(--ink-2); border:1px solid var(--ink-3);
  border-radius:var(--r); padding:20px; margin:0;
  transition:transform .18s var(--ease), border-color .18s var(--ease);
}
.person:hover{ transform:translateY(-3px); border-color:rgba(245,144,46,.5); }
.person-photo{
  aspect-ratio:1; border-radius:var(--r-s); margin-bottom:16px;
  background:linear-gradient(150deg, var(--ink-3), var(--ink));
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.person-photo img{ width:100%; height:100%; object-fit:cover; }
.person-init{
  font-family:var(--display); font-weight:800; font-size:2.6rem;
  color:rgba(245,144,46,.28);
}
.person h3{ font-size:1.14rem; font-weight:700; }
.person-role{
  font-family:var(--mono); font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--flare);
  margin:6px 0 10px;
}
.person-line{ font-size:.9rem; color:var(--on-ink-soft); margin:0; line-height:1.55; }

/* ══════════════════════════════════════════════════════════════════════════
   WHY CLIENTS STAY
   ══════════════════════════════════════════════════════════════════════════ */
.proof-split{ display:grid; grid-template-columns:1.05fr .95fr; gap:26px; align-items:start; }

.manifest{
  background:var(--on-paper); color:var(--paper);
  border-radius:var(--r); padding:24px 22px 20px;
  box-shadow:0 30px 60px -28px rgba(16,34,47,.5);
}
.manifest-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding-bottom:14px; margin-bottom:12px;
  border-bottom:1px solid rgba(247,246,243,.16);
}
.manifest-title{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.76rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
}
.manifest-date{ font-family:var(--mono); font-size:.74rem; color:rgba(247,246,243,.6); }
.manifest-cols{
  display:grid; grid-template-columns:.6fr 1.4fr 1.2fr .45fr .95fr; gap:10px;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(247,246,243,.45); padding-bottom:9px;
}
.manifest-rows{ list-style:none; margin:0; padding:0; }
.manifest-row{
  display:grid; grid-template-columns:.6fr 1.4fr 1.2fr .45fr .95fr; gap:10px;
  align-items:center; padding:11px 0; font-size:.85rem;
  border-top:1px solid rgba(247,246,243,.12);
}
.m-time{ font-family:var(--mono); font-weight:600; }
.m-count{ font-family:var(--mono); font-weight:600; }
.m-venue,.m-role{ font-weight:500; }
.m-status{
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  font-family:var(--mono); font-size:.72rem; color:var(--ok);
}
.m-status.pending{ color:var(--flare); }
.tick{
  position:relative; flex:0 0 auto;
  width:15px; height:15px; border-radius:50%; background:var(--ok);
}
.tick::before{
  content:""; position:absolute; left:6.6px; top:3.6px;
  width:2.4px; height:8px; background:var(--on-paper);
  transform:rotate(35deg); border-radius:1px;
}
.tick::after{
  content:""; position:absolute; left:4px; top:6.8px;
  width:5px; height:2.4px; background:var(--on-paper);
  transform:rotate(-45deg); border-radius:1px;
}
.manifest-foot{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:14px; padding-top:13px;
  border-top:1px solid rgba(247,246,243,.16);
  font-family:var(--mono); font-size:.76rem; color:rgba(247,246,243,.65);
}
.manifest-foot-ok{ color:var(--ok); font-weight:600; }
.manifest-foot-warn{ color:var(--flare); font-weight:600; }
.manifest-note{
  margin:16px 0 0; font-size:.84rem; line-height:1.6;
  color:rgba(247,246,243,.62);
}

.quotes{ display:grid; gap:12px; }
.quote{
  margin:0; background:var(--paper-2); border:1px solid var(--paper-3);
  border-radius:var(--r); padding:20px 22px;
}
.quote p{ margin:0 0 12px; font-size:.98rem; line-height:1.6; color:var(--on-paper); }
.quote footer{
  font-family:var(--mono); font-size:.72rem; color:var(--on-paper-soft);
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.quote footer span{
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--flare-deep); border:1px solid rgba(201,106,21,.4);
  padding:2px 7px; border-radius:999px;
}

.logos{ margin-top:20px; }
.logos-label{
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-paper-soft); margin:0 0 12px;
}
/* auto-fill so the row stays balanced whatever number of logos exist */
.logos-row{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(108px, 1fr));
}
/* White tile + multiply blend so logos supplied on a white background sit
   flush instead of showing a pale rectangle against the section. */
.logo-slot{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:16/9; border-radius:var(--r-s);
  background:#fff; border:1px solid var(--paper-3);
  padding:14px;
}
/* Client marks arrive in clashing colours; muting them to one tone keeps
   the row calm, and full colour on hover rewards a closer look. */
.logo-slot img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; mix-blend-mode:multiply;
  filter:grayscale(1); opacity:.85;
  transition:filter .2s var(--ease), opacity .2s var(--ease);
}
.logo-slot:hover img{ filter:none; opacity:1; }
/* Some brands only supply a mark on their own coloured ground. Those fill
   the tile edge to edge so they read as intentional, not as a stray block. */
.logo-slot--bleed{ padding:0; background:transparent; overflow:hidden; }
/* Illustrated marks lose too much in full greyscale, so these only get
   damped enough to sit with the flat wordmarks beside them. */
.logo-slot--bleed img{
  width:100%; height:100%; max-width:none; max-height:none;
  object-fit:cover; mix-blend-mode:normal;
  filter:saturate(.5); opacity:.9;
}
.logo-slot.is-empty{ display:none; }
/* Authoring aid: unfilled slots are only visible when working locally. */
.logo-slot.is-empty.show-slot{
  display:flex; background:transparent;
  border:1.5px dashed var(--paper-3);
  font-family:var(--mono); font-size:.6rem; text-align:center;
  color:var(--on-paper-soft);
}
.logo-slot.is-empty.show-slot::before{ content:attr(data-file); }
.logo-slot.is-empty img{ display:none; }

/* ══════════════════════════════════════════════════════════════════════════
   JOIN
   ══════════════════════════════════════════════════════════════════════════ */
.join-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:26px; align-items:start; }
.perks{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.perk{
  background:var(--ink-2); border:1px solid var(--ink-3);
  border-radius:var(--r); padding:22px;
}
.perk-k{
  display:block; font-family:var(--display); font-weight:700;
  font-size:1.16rem; letter-spacing:-.02em; margin-bottom:8px; color:var(--flare);
}
.perk p{ margin:0; font-size:.92rem; color:var(--on-ink-soft); line-height:1.55; }

.join-cta{
  background:var(--flare); color:#08131D;
  border-radius:var(--r); padding:30px 28px;
}
.join-kicker{
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; margin:0 0 10px; opacity:.75;
}
.join-cta h3{ font-size:1.7rem; font-weight:800; margin-bottom:12px; }
.join-cta p{ margin:0 0 20px; font-size:.96rem; line-height:1.6; color:rgba(8,19,29,.82); }

/* Buttons sitting on the orange card: solid dark is primary (Telegram —
   where shifts actually get posted), outlined is the secondary route. */
.join-actions{ display:flex; flex-direction:column; gap:10px; }
.btn-dark{ background:#08131D; color:var(--paper); }
.btn-dark:hover{ background:#000; color:#fff; transform:translateY(-2px); }
.btn-ghost-dark{
  background:transparent; color:#08131D;
  border:1.5px solid rgba(8,19,29,.4);
}
.btn-ghost-dark:hover{ border-color:#08131D; background:rgba(8,19,29,.07); transform:translateY(-2px); }
.btn-ico{ width:20px; height:20px; flex:0 0 auto; }
.join-fine{ font-size:.8rem !important; margin:14px 0 0 !important; opacity:.7; }

/* ══════════════════════════════════════════════════════════════════════════
   HIRE
   ══════════════════════════════════════════════════════════════════════════ */
.hire-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:44px; align-items:start; }
.contact-list{ margin:30px 0 0; }
.contact-list div{
  display:flex; gap:16px; padding:12px 0;
  border-top:1px solid var(--paper-3);
  font-family:var(--mono); font-size:.86rem;
}
.contact-list dt{ color:var(--on-paper-soft); min-width:104px; }
.contact-list dd{ margin:0; color:var(--on-paper); }
.contact-list a{ color:var(--on-paper); text-decoration:none; border-bottom:1px solid var(--flare); }
.contact-list a:hover{ color:var(--flare-deep); }

.hire-form{ background:#fff; border:1px solid var(--paper-3); border-radius:var(--r); padding:30px; }
.form-note{
  font-family:var(--mono); font-size:.74rem; color:var(--on-paper-soft);
  margin:0 0 20px; padding-bottom:16px; border-bottom:1px solid var(--paper-3);
}
.fr{ margin:0 0 16px; border:0; padding:0; }
.fr-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hire-form label,
.hire-form legend{
  display:block; font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-paper-soft); margin:0 0 7px; padding:0;
}
.hire-form input,
.hire-form textarea{
  width:100%; font-family:var(--body); font-size:.98rem;
  padding:13px 15px; border-radius:var(--r-s);
  border:1.5px solid var(--paper-3); background:var(--paper);
  color:var(--on-paper);
}
.hire-form textarea{ resize:vertical; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex !important; align-items:center; gap:7px;
  background:var(--paper); border:1.5px solid var(--paper-3);
  border-radius:999px; padding:9px 15px;
  font-family:var(--body) !important; font-size:.86rem !important;
  font-weight:500 !important; letter-spacing:0 !important;
  text-transform:none !important; color:var(--on-paper) !important;
  margin:0 !important; cursor:pointer;
}
.chip input{ width:auto !important; accent-color:var(--flare); margin:0; }
#form-status{
  font-family:var(--mono); font-size:.8rem; margin:12px 0 0;
  min-height:1.2em; text-align:center; color:var(--flare-deep);
}
#form-status.ok{ color:var(--ok); }

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
.foot{ background:var(--ink); padding:70px 0 34px; border-top:1px solid var(--ink-3); }
.foot-top{ display:grid; grid-template-columns:1.2fr 1.4fr; gap:44px; padding-bottom:38px; }
.foot-logo{ height:38px; width:auto; margin-bottom:16px; }
.foot-line{
  font-family:var(--display); font-weight:700; font-size:1.24rem;
  letter-spacing:-.02em; margin:0 0 12px; color:var(--flare);
}
.foot-fine{ font-size:.84rem; color:var(--on-ink-soft); margin:0; max-width:44ch; line-height:1.6; }

.foot-nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.foot-h{
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--flare); margin:0 0 12px;
}
.foot-nav a{
  display:block; text-decoration:none; font-size:.92rem;
  color:var(--on-ink-soft); padding:5px 0;
  transition:color .15s var(--ease);
}
.foot-nav a:hover{ color:var(--on-ink); }

.foot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap;
  padding-top:24px; border-top:1px solid var(--ink-3);
}
.foot-bottom p{ margin:0; font-size:.8rem; color:var(--on-ink-soft); }
.foot-social{ display:flex; gap:10px; }
.foot-social a{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--ink-3);
  transition:border-color .16s var(--ease), transform .16s var(--ease);
}
.foot-social a:hover{ border-color:var(--flare); transform:translateY(-2px); }
.foot-social svg{ width:20px; height:20px; }

/* WhatsApp FAB */
.wa-fab{
  position:fixed; right:22px; bottom:22px; z-index:220;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px -8px rgba(0,0,0,.55);
  transition:transform .16s var(--ease);
}
.wa-fab:hover{ transform:scale(1.06); }
.wa-fab svg{ width:56px; height:56px; }

/* ── Scroll reveal ──────────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .svc-grid{ grid-template-columns:repeat(3,1fr); }
  .crew-grid{ grid-template-columns:repeat(2,1fr); }
  .week-grid{ grid-template-columns:1fr 1fr; }
  .week-feature{ grid-column:1 / -1; }
}

@media (max-width:900px){
  .band{ padding:78px 0; }
  .band-head{ margin-bottom:40px; }
  .proof-split,
  .join-grid,
  .hire-grid,
  .foot-top{ grid-template-columns:1fr; }
  .channels{ grid-template-columns:1fr; }
  .hero{ min-height:auto; padding-top:56px; }
  .hero-inner{ padding-bottom:44px; }
}

@media (max-width:760px){
  body{ font-size:16px; }

  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); border-bottom:1px solid var(--ink-3);
    padding:10px 24px 22px; max-height:calc(100vh - var(--nav-h));
    overflow-y:auto;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    pointer-events:none;
    transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  }
  .nav-links.is-open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  .nav-links a{ padding:14px 0; border-top:1px solid var(--ink-3); font-size:1rem; }
  .nav-links a:first-child{ border-top:0; }
  .nav-cta,
  .nav-join{ text-align:center; margin-top:12px; border-top:0 !important; }
  .nav-toggle{ display:flex; }

  .doors{ grid-template-columns:1fr; }
  .svc-grid,
  .crew-grid,
  .perks,
  .week-grid,
  .logos-row{ grid-template-columns:1fr; }
  /* keep the Telegram label on one line at phone widths */
  .join-actions .btn{ padding:15px 14px; font-size:.9rem; gap:7px; }
  .week-feature{ flex-direction:column; align-items:stretch; }
  .yt-facade,
  .yt-frame{ flex:none; width:100%; }
  .foot-nav{ grid-template-columns:1fr 1fr; }
  .fr-2{ grid-template-columns:1fr; }
  .logos-row{ grid-template-columns:1fr 1fr; }

  .manifest-cols{ display:none; }
  .manifest-row{ grid-template-columns:1fr; gap:3px; padding:14px 0; }
  .manifest-row > span::before{
    content:attr(data-label); display:block;
    font-family:var(--mono); font-size:.58rem; letter-spacing:.14em;
    text-transform:uppercase; color:rgba(247,246,243,.45); margin-bottom:2px;
  }

  .foot-bottom{ flex-direction:column; align-items:flex-start; }
  .wa-fab{ right:16px; bottom:16px; width:52px; height:52px; }
  .wa-fab svg{ width:52px; height:52px; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero-montage img.is-on{ animation:none; }
  .marquee-track{ animation:none; }
  .hero-marquee{ overflow-x:auto; }
}