/* ===========================================================
   KollectiveLabs — V4 · "SIGNAL"
   Layered on top of styles-v2.css + styles-v3.css.
   Brief: more pop. Urban / digital culture. Less institutional.
   A change agent in a technologically transforming society.

   Moves:
   • Display type → Bricolage Grotesque (heavy, contemporary)
     replacing the editorial Newsreader serif. Italics neutralised.
   • Cooler paper + near-black ink; ELECTRIC COBALT accent
     replacing institutional blue; disciplined ACID-LIME pop.
   • Bold colour-blocking, a kinetic marquee, black brand tiles.
   =========================================================== */

:root {
  /* type */
  --font-head: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
  --head-weight: 700;
  --head-tracking: -0.03em;
  --label-tracking: 0.2em;

  /* cooler, higher-contrast neutrals */
  --bg:        #edece6;
  --surface:   #f6f5f0;
  --surface-2: #e2e0d8;
  --ink:       #141417;
  --ink-soft:  #34343b;
  --muted:     #6b6b73;
  --line:      #d6d4cb;
  --line-soft: #e3e1d8;

  /* electric cobalt + acid pop */
  --accent:     #2f2bff;
  --accent-deep:#1c18cf;
  --accent-soft:#b7b5ff;
  --accent-on:  #ffffff;
  --pop:        #d8fb50;
  --pop-ink:    #15151a;

  --radius: 5px;
}

::selection { background: var(--pop); color: var(--pop-ink); }

/* ===========================================================
   NEUTRALISE SERIF ITALICS → grotesk colour accents
   =========================================================== */
.hero-title em,
.section-title em,
.contact-title em,
.manifesto-line em,
.quote { font-style: normal; }

.hero-sub,
.section-note { font-style: normal; }

/* ===========================================================
   TYPE WEIGHT OVERRIDES (v2 set literal weights on these)
   =========================================================== */
.hero-title { font-weight: 700; letter-spacing: -0.04em; line-height: .92; }
.hero-title em {
  color: var(--accent);
  background-image: linear-gradient(var(--pop), var(--pop));
  background-repeat: no-repeat;
  background-size: 100% 0.11em;
  background-position: 0 100%;
  padding-bottom: 0.03em;
}

.hero-sub { font-weight: 500; color: var(--ink-soft); }

.section-title { font-weight: 700; letter-spacing: -0.032em; }
.section-title em { color: var(--accent); }

.manifesto-line { font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; }
.quote { font-weight: 700; letter-spacing: -0.03em; }

.contact-title { font-weight: 700; letter-spacing: -0.035em; }

.news-title { letter-spacing: -0.03em; }
.flag-lede  { font-weight: 600; letter-spacing: -0.02em; }
.flag-mark  { font-style: normal; font-weight: 700; }

/* ===========================================================
   BUTTONS — chunkier, more confident
   =========================================================== */
.btn { font-weight: 600; padding: 13px 24px; letter-spacing: -0.005em; }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { box-shadow: 0 12px 28px -14px var(--accent); }

/* ===========================================================
   EYEBROWS / LABELS — squared bullet for digital-culture edge
   =========================================================== */
.eyebrow { font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; gap: 9px; }
.eyebrow::before {
  content: ''; width: 7px; height: 7px; background: var(--accent);
  display: inline-block; flex: none;
}
.manifesto .eyebrow::before { background: var(--pop); }
.contact .eyebrow::before { background: var(--pop); }

/* ===========================================================
   HERO — bigger, bolder
   =========================================================== */
.hero-grid { grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 3vw, 48px); }
.hero-meta .v { font-weight: 700; }

/* highlighter marker on the right-hand lede */
.hero-lede p {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background-color: var(--pop);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.95;
  padding: 0.08em 0.18em;
  height: auto !important;   /* override the inline fixed height */
}
.hero-meta .cell:hover .v { color: var(--accent); transition: color .25s; }

/* ===========================================================
   HERO REDESIGN — "Statement" (full-bleed headline + balanced band)
   Active layout; supersedes the .hero-grid two-column hero.
   =========================================================== */
.heroX { padding-top: clamp(118px, 14vh, 166px); padding-bottom: clamp(40px, 5vw, 72px); }

.heroX-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; padding-bottom: clamp(22px, 2.4vw, 34px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(28px, 3.4vw, 52px);
}
.heroX-locator {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}

.heroX-title {
  margin: 0;
  font-family: var(--font-head); font-weight: 700;
  letter-spacing: -0.045em; line-height: .9;
  font-size: clamp(46px, 9vw, 130px);
  color: var(--ink); text-wrap: balance;
}
.heroX-title .ln { display: block; }
.heroX-title em {
  font-style: normal; color: var(--accent);
  background-image: linear-gradient(var(--pop), var(--pop));
  background-repeat: no-repeat; background-size: 100% 0.1em; background-position: 0 100%;
  padding-bottom: 0.02em;
}

.heroX-lower {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 76px); align-items: start;
  margin-top: clamp(34px, 4.5vw, 64px);
}
.heroX-lead { display: flex; flex-direction: column; gap: clamp(24px, 2.6vw, 34px); max-width: 30ch; }
.heroX-lead .heroX-sub {
  margin: 0; font-family: var(--font-head); font-weight: 500; font-style: normal;
  font-size: clamp(20px, 1.95vw, 28px); line-height: 1.32; letter-spacing: -0.02em;
  color: var(--ink-soft); text-wrap: pretty;
}
.heroX-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.heroX-note { display: block; }
.heroX-mark {
  display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  background-color: var(--pop); color: var(--ink);
  font-weight: 500; font-size: clamp(15.5px, 1.35vw, 19px); line-height: 1.9;
  padding: 0.06em 0.2em;
}
.heroX .hero-meta { margin-top: clamp(40px, 5vw, 66px); }

@media (max-width: 880px) {
  .heroX-lower { grid-template-columns: 1fr; gap: 30px; }
  .heroX-lead { max-width: none; }
  .heroX-title { font-size: clamp(44px, 12vw, 92px); }
}

/* ---------- Hero meta strip: compact ---------- */
.heroX .hero-meta { margin-top: clamp(26px, 3vw, 40px); }
.heroX .hero-meta .cell { padding: 15px 20px 15px 0; }
.heroX .hero-meta .k { margin-bottom: 6px; font-size: 10px; }
.heroX .hero-meta .v { font-size: clamp(15px, 1.35vw, 19px) !important; line-height: 1.2 !important; }

/* ===========================================================
   LOGO CAROUSEL — "Organisations we've worked with"
   =========================================================== */
.logos { padding-block: clamp(30px, 3.6vw, 52px); border-top: 1px solid var(--line); }
.logos-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 clamp(18px, 2vw, 28px);
}
.logos-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.logos-track {
  display: flex; width: max-content; gap: 18px;
  animation: logos-scroll 46s linear infinite;
}
.logos-marquee:hover .logos-track { animation-play-state: paused; }
.logo-tile {
  flex: none; width: 184px; height: 96px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  display: grid; place-items: center; padding: 16px 24px;
}
.logo-tile img { max-width: 100%; max-height: 64px; object-fit: contain; display: block; }

/* ---------- Case study external link ---------- */
.case-link {
  grid-column: 2; justify-self: start; margin-top: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; font-weight: 700;
  color: var(--accent); text-decoration: none;
  padding-bottom: 3px; border-bottom: 1px solid var(--accent-soft);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.case-link:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }
.case-link-host {
  color: var(--muted); text-transform: lowercase; letter-spacing: .02em;
  padding-left: 10px; border-left: 1px solid var(--line);
}
.case-link-arr { font-family: var(--font-head); font-size: 14px; line-height: 1; }
@media (max-width: 720px) { .case-link { grid-column: 1; } }
@keyframes logos-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logos-track { animation: none; } }
@media (max-width: 620px) {
  .logo-tile { width: 150px; height: 80px; padding: 14px 18px; }
  .logo-tile img { max-height: 52px; }
}

/* ===========================================================
   MARQUEE — kinetic culture strip (new)
   =========================================================== */
.marquee {
  background: var(--ink); color: var(--bg);
  border-block: 1px solid var(--ink);
  overflow: hidden; padding-block: 16px;
}
.marquee-track {
  display: flex; width: max-content; gap: 0;
  animation: kl-marquee 34s linear infinite;
}
.marquee-item {
  font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(20px, 2.4vw, 30px); white-space: nowrap;
  display: inline-flex; align-items: center; gap: clamp(22px, 3vw, 44px);
  padding-right: clamp(22px, 3vw, 44px);
}
.marquee-item .dot { color: var(--pop); font-size: .8em; }
.marquee-item .ghost { color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--bg) 55%, transparent); }
@keyframes kl-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ===========================================================
   MANIFESTO — full cobalt pop moment
   =========================================================== */
.manifesto { background: var(--accent); color: #fff; }
.manifesto .eyebrow { color: var(--pop); }
.manifesto-line { color: #fff; }
.manifesto-line em { color: var(--pop); }

/* ===========================================================
   CAPABILITIES — accent number, acid hover marker
   =========================================================== */
.cap-num { font-weight: 700; color: var(--accent); }
.cap::before { background: var(--surface); }
.cap:hover .cap-num { color: var(--pop-ink); }
.cap:hover .cap-num { position: relative; }
.cap-title { font-weight: 700; }

/* ===========================================================
   CASES — bolder names
   =========================================================== */
.case-name { font-weight: 700; }
.case-num { font-weight: 700; }
.case[aria-expanded="true"] .case-toggle { background: var(--accent); border-color: var(--accent); }

/* ===========================================================
   TAGS — squarer, more "chip/terminal"
   =========================================================== */
.tag { border-radius: 3px; background: var(--surface); border-color: var(--line); font-weight: 400; }
.partner:hover { box-shadow: 0 26px 54px -34px var(--accent-deep); }

/* ===========================================================
   FLAGSHIP — black brand tiles, acid detail
   =========================================================== */
.flag { border-color: var(--line); border-radius: var(--radius); }
.flag-brand { background: var(--ink); }
.flag-brand .ph-grid {
  background-image: repeating-linear-gradient(135deg, var(--bg) 0 1px, transparent 1px 14px);
  opacity: .1;
}
.flag-mark { color: #fff; }
.flag-word { color: var(--pop); }
.flag-note { color: color-mix(in srgb, var(--bg) 45%, transparent); }
.flag-kicker { font-weight: 700; color: var(--accent); }
.flag-action-c h4 { font-weight: 700; }
.flag-action-n { font-weight: 700; color: var(--accent); }

/* ---------- COMPACT: thumbnail brand tile + condensed body ---------- */
.flagship .section-head { margin-bottom: clamp(22px, 2.4vw, 32px); }
.flag-list { gap: clamp(14px, 1.6vw, 20px); }

.flag {
  grid-template-columns: 132px 1fr;
  align-items: start;
}
.flag--reverse .flag-brand { order: 0; }   /* keep thumbnail on the left both cards */
.flag--reverse .flag-body  { order: 0; }

/* thumbnail tile */
.flag-brand {
  min-height: 0;
  aspect-ratio: 1 / 1;
  width: 132px;
  align-self: start;
  margin: clamp(20px, 2vw, 26px);
  margin-right: 0;
  border-radius: 4px;
  padding: 14px;
}
.flag-brand .flag-note { display: none; }
.flag-lockup { gap: 7px; }
.flag-mark { font-size: clamp(26px, 3vw, 34px); line-height: .88; }
.flag-word { font-size: 8.5px; letter-spacing: .14em; max-width: 14ch; }
.flag-mark span { font-size: inherit; }

/* condensed body */
.flag-body { padding: clamp(20px, 2vw, 26px) clamp(22px, 2.2vw, 30px); }
.flag-kicker { margin-bottom: 10px; font-size: 10.5px; }
.flag-lede { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.32; }
.flag-text { margin-top: 10px; font-size: 13.5px; line-height: 1.55; }
.flag-actions {
  margin-top: 16px; padding-top: 14px; gap: clamp(14px, 1.5vw, 22px);
}
.flag-action { gap: 11px; }
.flag-action-c h4 { font-size: 15px; }
.flag-action-c p { margin-top: 4px; font-size: 12.5px; line-height: 1.45; }
.flag-tags { margin-top: 16px; gap: 6px; }

@media (max-width: 720px) {
  .flag { grid-template-columns: 1fr; }
  .flag-brand { margin: clamp(18px, 4vw, 22px); margin-bottom: 0; }
}

/* ===========================================================
   FOUNDER / BOARDS / PARTNERS — weight bumps
   =========================================================== */
.founder-name, .partner-name, .board-org, .news-title { font-weight: 700; }
.founder-role, .partner-role { font-weight: 700; }

/* ---------- Board mandates: smaller, prose-led ---------- */
.boards-lead { max-width: 70ch; margin-bottom: clamp(22px, 2.4vw, 32px); }
.boards-lead .eyebrow { margin-bottom: 12px; }
.boards-intro {
  font-family: var(--font-head); font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(17px, 1.7vw, 20px); line-height: 1.42; color: var(--ink-soft);
  text-wrap: pretty;
}
.boards-intro strong { font-weight: 700; color: var(--ink); }
.board-list--compact .board-org { font-size: 15px; }
.board-list--compact .board-desc { font-size: 13.5px; }
.board-role {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}

/* ===========================================================
   NEWSLETTER — cobalt focus, squarer field
   =========================================================== */
.news-input { border-radius: 6px; }
.news-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.news-thanks { font-style: normal; font-weight: 700; color: var(--accent); }

/* ===========================================================
   CONTACT — switch from cobalt to near-black, acid + cobalt accents
   =========================================================== */
.contact { background: var(--ink); }
.contact .eyebrow { color: var(--pop); }
.contact-title em { color: var(--pop); }
.contact-line a.v:hover { border-color: var(--pop); }
.btn--invert { background: var(--pop); color: var(--pop-ink); border-color: var(--pop); }
.btn--invert:hover { box-shadow: 0 12px 30px -14px var(--pop); }

/* ===========================================================
   TOPBAR — keep crisp; accent CTA
   =========================================================== */
.topbar.scrolled { backdrop-filter: blur(14px) saturate(1.1); }
.nav-links a::after { background: var(--accent); }
.brand-word { letter-spacing: .19em; }

/* ===========================================================
   MOBILE / PHONE PASS
   The grids already collapse (v2/v3 @media). This tightens the
   hero, overrides fixed inline widths, and keeps the topbar/CTAs
   comfortable on small screens.
   =========================================================== */
@media (max-width: 760px) {
  /* hero: kill the fixed inline width that would overflow narrow screens */
  .heroX-sub { width: auto !important; max-width: 34ch; }
  .heroX-note { height: auto !important; padding: 0 !important; }
  .heroX { padding-top: 112px !important; padding-bottom: 44px !important; }
  .heroX-lower { margin-top: 28px; }
  .heroX-title { letter-spacing: -0.035em; }
  /* founder grid: the .founder-compact override out-specifies the v2 collapse — force 1col */
  .founder-compact .founder-grid { grid-template-columns: 1fr; gap: 22px; }
  .founder-compact .portrait { position: static; top: auto; max-width: 200px; }
  /* topbar breathing room (nav links already hidden ≤720) */
  .nav { gap: 14px; }
  .brand-word { font-size: 13px; letter-spacing: .12em; }
}

@media (max-width: 480px) {
  .heroX-title { font-size: clamp(33px, 12.5vw, 60px) !important; line-height: .94; }
  .heroX-sub { font-size: 19px !important; max-width: none; }
  /* full-width stacked CTAs read better than wrapped pills */
  .heroX-cta { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }
  .heroX-cta .btn { justify-content: center; }
  /* reclaim space in the topbar: drop the LinkedIn chip, keep the CTA */
  .topbar .nav > .li-link { display: none; }
  /* logo carousel: a touch smaller, faster */
  .logos { padding-block: 26px; }
  /* case rows: keep the number tight */
  .case-link { font-size: 11px; }
}