/* ==========================================================================
   4BIT DIGITAL STUDIO — project.css
   The case study page (project.php): hero, live-link button, scoreboard,
   story, gallery + lightbox, delivery timeline, client verdict, crew and
   the next-project band. Loaded only by that page, after pages.css.
   ========================================================================== */

/* ==========================================================================
   COLOURWAYS — the same six recipes the work cards use
   ========================================================================== */
.cs[data-art="1"], .visit[data-art="1"] { --a1: rgba(245,69,58,.85);  --a2: rgba(234,42,128,.7);  --a3: rgba(90,30,140,.6); }
.cs[data-art="2"], .visit[data-art="2"] { --a1: rgba(40,90,200,.7);   --a2: rgba(234,42,128,.65); --a3: rgba(20,25,45,.9); }
.cs[data-art="3"], .visit[data-art="3"] { --a1: rgba(255,120,40,.75); --a2: rgba(238,46,92,.8);   --a3: rgba(60,20,30,.9); }
.cs[data-art="4"], .visit[data-art="4"] { --a1: rgba(200,200,215,.5); --a2: rgba(238,46,92,.6);   --a3: rgba(30,35,55,.95); }
.cs[data-art="5"], .visit[data-art="5"] { --a1: rgba(40,190,160,.55); --a2: rgba(234,42,128,.6);  --a3: rgba(25,30,50,.9); }
.cs[data-art="6"], .visit[data-art="6"] { --a1: rgba(150,60,220,.65); --a2: rgba(245,69,58,.65);  --a3: rgba(20,22,40,.9); }

/* ==========================================================================
   HERO
   ========================================================================== */
.cs {
  position: relative;
  overflow: hidden;
  padding-top: clamp(5.5rem, 4rem + 9vw, 9.5rem);
}
.cs__glow {
  position: absolute;
  top: -34%; left: 50%;
  translate: -50% 0;
  width: min(1400px, 160vw);
  aspect-ratio: 2 / 1;
  background:
    radial-gradient(ellipse 46% 60% at 30% 50%, var(--a1, rgba(245,69,58,.5)), transparent 70%),
    radial-gradient(ellipse 46% 60% at 70% 45%, var(--a2, rgba(234,42,128,.5)), transparent 70%);
  filter: blur(70px);
  opacity: .5;
  pointer-events: none;
}
.cs__inner { position: relative; z-index: 2; }

.cs__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.cs__crumbs a { transition: color var(--d-fast); }
.cs__crumbs a:hover { color: var(--brand-2); }
.cs__crumbs b { font-weight: 500; color: var(--text-soft); }

.cs__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
@media (max-width: 900px) { .cs__head { grid-template-columns: 1fr; align-items: start; } }

.cs__index { display: flex; align-items: baseline; gap: .55rem; margin-bottom: .7rem; font-family: var(--f-mono); }
.cs__index i {
  font-style: normal;
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cs__index span { font-size: .66rem; letter-spacing: .2em; color: var(--text-dim); }

.cs__title { font-size: var(--t-3xl); line-height: .93; max-width: 15ch; }
.cs__summary {
  margin-top: 1.2rem;
  max-width: 52ch;
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--text-soft);
}

/* ---- the live-project button -------------------------------------------- */
.cs__live { display: grid; gap: .7rem; justify-items: start; }
@media (min-width: 901px) { .cs__live { justify-items: end; } }

.livebtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem 1rem .85rem 1.35rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.045);
  box-shadow: 0 0 0 1px var(--glass-brd) inset;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow var(--d-mid) var(--e-out), transform var(--d-fast) var(--e-out), background var(--d-mid);
}
.livebtn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--brand-grad);
  opacity: 0;
  transition: opacity var(--d-mid) var(--e-out);
}
.livebtn:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.28) inset, 0 22px 50px -22px rgba(var(--brand-rgb, 238 46 92), .95);
}
.livebtn:hover::before { opacity: .18; }

/* the "it is actually up" signal */
.livebtn__pulse {
  position: relative;
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #21D07A;
  box-shadow: 0 0 0 0 rgba(33,208,122,.6);
  animation: pulse 2.4s var(--e-out) infinite;
}

.livebtn__body { display: grid; gap: .1rem; text-align: left; }
.livebtn__kicker {
  font-family: var(--f-mono);
  font-size: .56rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.livebtn__url {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;
}
.livebtn__go {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brand-grad);
  transition: transform var(--d-fast) var(--e-spring);
}
.livebtn:hover .livebtn__go { transform: scale(1.08); }
.livebtn__go svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.cs__live-note {
  max-width: 34ch;
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--text-mute);
}
@media (min-width: 901px) { .cs__live-note { text-align: right; } }

/* ---- cover plate --------------------------------------------------------- */
.cs__cover {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--glass-brd);
  box-shadow: 0 60px 120px -50px rgba(0,0,0,.95);
}
@media (max-width: 700px) { .cs__cover { aspect-ratio: 4 / 3; } }

.cs__cover-inner {
  position: absolute;
  inset: -6%;
  background:
    radial-gradient(circle at 22% 26%, var(--a1), transparent 52%),
    radial-gradient(circle at 78% 68%, var(--a2), transparent 55%),
    radial-gradient(circle at 52% 92%, var(--a3), transparent 58%);
  background-color: var(--ink-1);
  will-change: transform;
}
.cs__cover--img .cs__cover-inner { background: var(--ink-0); }
.cs__cover-inner img { width: 100%; height: 100%; object-fit: cover; }

.cs__cover-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.4) 1px, transparent 1px);
  background-size: 42px 42px;
  mix-blend-mode: overlay;
  opacity: .75;
}
.cs__cover-mark {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22%;
  aspect-ratio: 1;
  background: #fff;
  opacity: .14;
  -webkit-mask: url("../img/logo-mark.svg") center / contain no-repeat;
  mask: url("../img/logo-mark.svg") center / contain no-repeat;
}

/* spec strip sitting on the bottom edge of the cover */
.cs__spec {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem clamp(1.5rem, 5vw, 3.5rem);
  padding: clamp(.9rem, 2.5vw, 1.3rem) clamp(1.1rem, 3vw, 2rem);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(6,9,15,.4), rgba(6,9,15,.82));
  box-shadow: 0 -1px 0 0 rgba(255,255,255,.09) inset;
}
.cs__spec-item { display: grid; gap: .2rem; }
.cs__spec-label {
  font-family: var(--f-mono);
  font-size: .54rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.cs__spec-value {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text);
}

/* ==========================================================================
   SCOREBOARD
   ========================================================================== */
.section--cs-results { padding-block: clamp(3rem, 6vw, 5.5rem); }

.scoreboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(1.4rem, 3vw, 2.5rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid rgba(255,255,255,.09);
}
.score { display: grid; gap: .35rem; align-content: start; }
.score__figure {
  display: flex;
  align-items: baseline;
  gap: .05em;
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  background: linear-gradient(170deg, #fff 20%, rgba(255,255,255,.5));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.score__figure em {
  font-style: normal;
  font-size: .55em;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.score__label {
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.score__note { font-size: var(--t-xs); line-height: 1.5; color: var(--text-dim); }

/* ==========================================================================
   STORY
   ========================================================================== */
.cs-story {
  display: grid;
  grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .cs-story { grid-template-columns: 1fr; } }

.cs-story__sticky { display: grid; gap: 1.8rem; }
@media (min-width: 901px) { .cs-story__sticky { position: sticky; top: calc(var(--header-h) + 24px); } }

.cs-list__label {
  margin-bottom: .9rem;
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.cs-list ul:not(.chips) { display: grid; gap: .6rem; }
.cs-list li:not(.chips li) { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--t-sm); color: var(--text-soft); }
.cs-list li svg {
  flex: none;
  width: 15px; height: 15px;
  margin-top: .28em;
  fill: none;
  stroke: var(--brand-2);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cs-list .chips { margin-top: 0; padding-top: 0; }

.cs-list__live {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.1rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.035);
  box-shadow: 0 0 0 1px var(--glass-brd) inset;
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-soft);
  transition: color var(--d-fast), box-shadow var(--d-fast), background var(--d-fast);
}
.cs-list__live:hover { color: #fff; background: rgba(var(--brand-rgb, 238 46 92), .16); box-shadow: 0 0 0 1px rgba(var(--brand-rgb, 238 46 92), .5) inset; }
.cs-list__live svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cs-list__live svg:last-child { width: 12px; height: 12px; stroke-width: 2.4; margin-left: auto; }

.cs-story__body { display: grid; gap: clamp(2.4rem, 5vw, 3.6rem); }

.chapter { display: grid; gap: 1rem; }
.chapter__label {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brand-2);
}
.chapter__label i {
  font-style: normal;
  display: grid;
  place-items: center;
  min-width: 2.1em;
  padding: .3em .5em;
  border-radius: 6px;
  background: var(--brand-grad);
  color: #fff;
  font-weight: 700;
  letter-spacing: .1em;
  box-shadow: 0 6px 18px -6px rgba(var(--brand-rgb, 238 46 92), .85);
}
.chapter__body { display: grid; gap: 1.1rem; font-size: var(--t-md); line-height: 1.8; color: var(--text-soft); }
.chapter__body strong, .chapter__body b { color: var(--text); font-weight: 600; }
.chapter__body a { color: var(--brand-2); }
.chapter:first-child .chapter__body { font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem); color: var(--text); }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.9rem, 2vw, 1.6rem);
}
@media (max-width: 640px) { .shots { grid-template-columns: 1fr; } }
.shot--wide { grid-column: 1 / -1; }

.shot { display: grid; gap: .7rem; }
.shot__open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-1);
  box-shadow: 0 0 0 1px var(--glass-brd) inset, 0 24px 55px -28px rgba(0,0,0,.95);
  transition: transform var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out);
}
.shot__open:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 0 1px var(--glass-brd-hi) inset, 0 34px 70px -30px rgba(var(--brand-rgb, 238 46 92), .6);
}
.shot__open img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out), filter var(--d-mid);
}
.shot--wide .shot__open img { aspect-ratio: 21 / 9; }
.shot__open:hover img { transform: scale(1.04); }

.shot__zoom {
  position: absolute;
  right: .85rem; bottom: .85rem;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(8,11,19,.6);
  box-shadow: 0 0 0 1px rgba(255,255,255,.16) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  opacity: 0;
  transform: scale(.7);
  transition: opacity var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-spring), background var(--d-fast);
}
.shot__open:hover .shot__zoom, .shot__open:focus-visible .shot__zoom { opacity: 1; transform: none; }
.shot__zoom svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

.shot figcaption {
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--text-mute);
  padding-inline: .2rem;
}

/* Stand-in frame for a shot with no screenshot uploaded yet. */
.shot__plate {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 24%, var(--p1), transparent 54%),
    radial-gradient(circle at 78% 70%, var(--p2), transparent 56%),
    var(--ink-1);
  box-shadow: 0 0 0 1px var(--glass-brd) inset, 0 24px 55px -30px rgba(0,0,0,.95);
}
.shot--wide .shot__plate { aspect-ratio: 21 / 9; }
.shot__plate[data-art="1"] { --p1: rgba(245,69,58,.55);  --p2: rgba(234,42,128,.4); }
.shot__plate[data-art="2"] { --p1: rgba(40,90,200,.5);   --p2: rgba(234,42,128,.35); }
.shot__plate[data-art="3"] { --p1: rgba(255,120,40,.5);  --p2: rgba(238,46,92,.4); }
.shot__plate[data-art="4"] { --p1: rgba(180,185,205,.32);--p2: rgba(238,46,92,.32); }
.shot__plate[data-art="5"] { --p1: rgba(40,190,160,.42); --p2: rgba(234,42,128,.35); }
.shot__plate[data-art="6"] { --p1: rgba(150,60,220,.45); --p2: rgba(245,69,58,.35); }

.shot__plate-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.34) 1px, transparent 1px);
  background-size: 34px 34px;
  mix-blend-mode: overlay;
}
.shot__plate-mark {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18%;
  aspect-ratio: 1;
  background: #fff;
  opacity: .13;
  -webkit-mask: url("../img/logo-mark.svg") center / contain no-repeat;
  mask: url("../img/logo-mark.svg") center / contain no-repeat;
}
.shot__plate-no {
  position: absolute;
  top: .9rem; left: 1.1rem;
  font-family: var(--f-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: rgba(255,255,255,.5);
}

/* ---- lightbox ------------------------------------------------------------
   The viewer itself lives in components.css — the product pages open the
   same dialog, so it stopped being case-study furniture. */

/* ==========================================================================
   DELIVERY TIMELINE
   ========================================================================== */
.phases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(2.2rem, 4vw, 3rem) clamp(1.6rem, 3vw, 2.4rem);
}

/* Each phase carries its own segment of the track rather than one line
   running behind the whole grid — so a row that wraps still lines up. */
.phase {
  position: relative;
  display: grid;
  gap: .45rem;
  align-content: start;
  padding-top: 2rem;
}
.phase::before {
  content: "";
  position: absolute;
  top: 5px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--brand-rgb, 238 46 92), .5), rgba(255,255,255,.06));
}
.phase__dot {
  position: absolute;
  top: 0; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--brand-grad);
  box-shadow: 0 0 0 4px var(--void), 0 0 22px -2px rgba(var(--brand-rgb, 238 46 92), .9);
}
.phase__when {
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-2);
}
.phase__title { font-size: var(--t-md); font-weight: 600; letter-spacing: -.025em; }
.phase__text { font-size: var(--t-sm); line-height: 1.65; color: var(--text-mute); }

@media (max-width: 700px) {
  .phases { grid-template-columns: 1fr; padding-left: 1.7rem; gap: 1.8rem; }
  .phase { padding-top: 0; }
  /* the track turns vertical and runs down the left edge of each phase */
  .phase::before {
    top: 6px; bottom: -1.8rem; left: -1.7rem;
    right: auto;
    width: 1px; height: auto;
    background: linear-gradient(180deg, rgba(var(--brand-rgb, 238 46 92), .5), rgba(255,255,255,.06));
  }
  .phase:last-child::before { bottom: auto; height: 1.4rem; }
  .phase__dot { top: 2px; left: -2.05rem; }
}

/* ==========================================================================
   CLIENT VERDICT
   ========================================================================== */
.verdict {
  display: grid;
  gap: 1.2rem;
  padding: clamp(1.8rem, 5vw, 3.4rem);
  max-width: 62rem;
  margin-inline: auto;
}
.verdict__kicker {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.verdict__kicker svg { width: 22px; height: 22px; fill: none; stroke: var(--brand-2); stroke-width: 1.4; }

.verdict__stars { display: flex; gap: .25rem; }
.verdict__stars svg { width: 16px; height: 16px; fill: url(#gradBrand); stroke: none; }

.verdict__quote {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2.1rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -.03em;
  color: var(--text);
  text-wrap: balance;
}
.verdict__quote::before { content: "\201C"; }
.verdict__quote::after  { content: "\201D"; }

.verdict__who {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.verdict__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--brand-grad-soft);
  box-shadow: 0 0 0 1px var(--glass-brd) inset;
  font-family: var(--f-display);
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
}
.verdict__avatar img { width: 100%; height: 100%; object-fit: cover; }
.verdict__who b { display: block; font-family: var(--f-display); font-size: var(--t-sm); font-weight: 600; }
.verdict__who i {
  display: block;
  font-style: normal;
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--text-mute);
}

/* ==========================================================================
   CREW BAR
   ========================================================================== */
.section--cs-crew { padding-block: clamp(2rem, 4vw, 3.5rem); }

.crewbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid rgba(255,255,255,.08);
}
.crewbar__label {
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.crewbar__list { display: flex; flex-wrap: wrap; gap: .7rem; }

.crewchip {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem 1rem .5rem .5rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.032);
  box-shadow: 0 0 0 1px var(--glass-brd) inset;
  transition: transform var(--d-fast) var(--e-out), background var(--d-fast), box-shadow var(--d-fast);
}
a.crewchip:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px var(--glass-brd-hi) inset, 0 16px 34px -20px rgba(0,0,0,.95);
}
.crewchip__face {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  font-family: var(--f-display);
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  background: linear-gradient(150deg, var(--c1, rgba(245,69,58,.85)), var(--c2, rgba(30,18,32,.95)));
}
.crewchip__face img { width: 100%; height: 100%; object-fit: cover; }
.crewchip__face[data-art="1"] { --c1: rgba(245,69,58,.85);  --c2: rgba(48,18,28,.95); }
.crewchip__face[data-art="2"] { --c1: rgba(64,120,255,.8);  --c2: rgba(16,22,48,.95); }
.crewchip__face[data-art="3"] { --c1: rgba(255,140,48,.8);  --c2: rgba(44,24,14,.95); }
.crewchip__face[data-art="4"] { --c1: rgba(38,205,170,.75); --c2: rgba(10,34,38,.95); }
.crewchip__face[data-art="5"] { --c1: rgba(160,72,255,.8);  --c2: rgba(28,16,48,.95); }
.crewchip__face[data-art="6"] { --c1: rgba(234,42,128,.85); --c2: rgba(44,12,34,.95); }

.crewchip__id b { display: block; font-family: var(--f-display); font-size: .82rem; font-weight: 600; letter-spacing: -.01em; }
.crewchip__id i {
  display: block;
  font-style: normal;
  font-family: var(--f-mono);
  font-size: .56rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.crewchip__go { width: 12px; height: 12px; fill: none; stroke: var(--brand-2); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: translate var(--d-fast) var(--e-out); }
a.crewchip:hover .crewchip__go { translate: 3px -3px; }

/* ==========================================================================
   VISIT CTA
   ========================================================================== */
.visit {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.8rem, 5vw, 3.4rem);
  overflow: hidden;
}
.visit__aura {
  position: absolute;
  inset: -60% -20%;
  background: conic-gradient(from 200deg, transparent, var(--a1, rgba(245,69,58,.5)), transparent 55%);
  filter: blur(60px);
  opacity: .45;
  animation: auraDrift 30s linear infinite;
  pointer-events: none;
}
@keyframes auraDrift { to { rotate: 1turn; } }
.visit__body { position: relative; z-index: 2; display: grid; gap: .8rem; max-width: 44ch; }
.visit__title { font-size: var(--t-xl); }
.visit__text { color: var(--text-soft); line-height: 1.6; }
.visit .btn { position: relative; z-index: 2; }
.visit .btn__label { font-family: var(--f-mono); letter-spacing: .04em; }

/* ==========================================================================
   NEXT PROJECT BAND
   ========================================================================== */
.nextproject {
  position: relative;
  display: block;
  padding-block: clamp(3rem, 7vw, 6rem);
  border-block: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
  isolation: isolate;
}
.nextproject::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 60% 140% at 50% 120%, rgba(var(--brand-rgb, 238 46 92), .22), transparent 70%);
  opacity: 0;
  transition: opacity var(--d-mid) var(--e-out);
}
.nextproject:hover::before { opacity: 1; }

.nextproject__inner { position: relative; display: grid; gap: .35rem; }
.nextproject__label {
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.nextproject__title {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  transition: translate var(--d-mid) var(--e-out), color var(--d-mid);
}
.nextproject:hover .nextproject__title { translate: 12px 0; color: var(--brand-2); }
.nextproject__tags {
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.nextproject__go {
  position: absolute;
  right: 0; top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: clamp(52px, 8vw, 74px);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--glass-brd) inset;
  transition: background var(--d-mid) var(--e-out), box-shadow var(--d-mid), translate var(--d-mid) var(--e-out);
}
.nextproject:hover .nextproject__go { background: var(--brand-grad); box-shadow: 0 18px 40px -16px rgba(var(--brand-rgb, 238 46 92), .95); }
.nextproject__go svg { width: 40%; height: 40%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 620px) { .nextproject__go { display: none; } }

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .visit__aura, .livebtn__pulse { animation: none; }
  .cs__cover-inner { transform: none !important; }
}