/*
 * IKELABO vivid inner-page system.
 * Keeps each page's content and function while giving every non-home route
 * the same energetic editorial voice as the renewed home page.
 */

body:not(.home-vivid) {
  --vivid-black: #111111;
  --vivid-white: #fffdf8;
  --vivid-paper: #f3f0ea;
  --vivid-yellow: #ffd84d;
  --vivid-aqua: #21d4ce;
  --vivid-orange: #ff5a1f;
  --vivid-pink: #ff4f91;
  --canvas: var(--vivid-paper);
  --paper: var(--vivid-white);
  --ink: var(--vivid-black);
  --body: #403d39;
  --muted: #625e58;
  --line: #cbc4ba;
  --orange: var(--vivid-orange);
  --amber: var(--vivid-yellow);
  --navy: var(--vivid-black);
  --navy-2: #090909;
  --soft-orange: #fff0e9;
  --soft-navy: #e8f8f6;
  --radius: 4px;
  --shadow: 9px 9px 0 var(--vivid-aqua);
  padding-bottom: 0;
  color: var(--body);
  background: var(--vivid-paper);
}

body:not(.home-vivid) h1,
body:not(.home-vivid) h2,
body:not(.home-vivid) h3,
body:not(.home-vivid) h4,
body:not(.home-vivid) .site-nav a,
body:not(.home-vivid) .btn {
  letter-spacing: 0;
}

body:not(.home-vivid) .wrap {
  width: min(1180px, calc(100% - 52px));
}

body:not(.home-vivid) .wrap--wide {
  width: min(1360px, calc(100% - 52px));
}

body:not(.home-vivid) .section,
body:not(.home-vivid) .page-sec {
  border-bottom: 3px solid var(--vivid-black);
}

body:not(.home-vivid) .section {
  padding-block: 104px;
}

body:not(.home-vivid) .page-sec {
  padding-block: 100px;
}

body:not(.home-vivid) .section--paper,
body:not(.home-vivid) .page-sec--paper {
  background: var(--vivid-white);
}

body:not(.home-vivid) .section--navy,
body:not(.home-vivid) .story-vision-band,
body:not(.home-vivid) .story-entry-band {
  color: #fff;
  border-bottom: 3px solid var(--vivid-yellow);
  background: var(--vivid-black);
}

body:not(.home-vivid) .eyebrow {
  gap: 10px;
  color: var(--vivid-orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

body:not(.home-vivid) .eyebrow::before {
  width: 34px;
  height: 3px;
}

body:not(.home-vivid) .section-title,
body:not(.home-vivid) .page-copy h2 {
  color: var(--vivid-black);
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 900;
  line-height: 1.14;
}

body:not(.home-vivid) .page-copy h3 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.3;
}

body:not(.home-vivid) .section-lead,
body:not(.home-vivid) .page-copy p {
  color: #57534f;
  font-size: 16px;
  line-height: 2;
}

body:not(.home-vivid) .btn,
body:not(.home-vivid) .header-cta,
body:not(.home-vivid) .post-foot__cta,
body:not(.home-vivid) .post-body a.c-btn {
  min-height: 52px;
  padding: 13px 22px;
  border: 2px solid var(--vivid-black);
  border-radius: 3px;
  color: var(--vivid-black);
  background: var(--vivid-yellow);
  box-shadow: 5px 5px 0 var(--vivid-orange);
  font-weight: 900;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

body:not(.home-vivid) .btn:hover,
body:not(.home-vivid) .header-cta:hover,
body:not(.home-vivid) .post-foot__cta:hover,
body:not(.home-vivid) .post-body a.c-btn:hover {
  background: var(--vivid-aqua);
  box-shadow: 8px 8px 0 var(--vivid-orange);
  transform: translate(-3px, -3px);
}

body:not(.home-vivid) .btn--dark {
  color: #fff;
  background: var(--vivid-black);
  box-shadow-color: var(--vivid-aqua);
}

body:not(.home-vivid) .btn--ghost {
  color: var(--vivid-black);
  background: #fff;
  box-shadow-color: var(--vivid-aqua);
}

/* Full-width black navigation shared with the renewed home page. */
body:not(.home-vivid) .site-header,
body:not(.home-vivid) .site-header.is-scrolled {
  top: 0;
}

body:not(.home-vivid) .header-pill {
  width: 100%;
  max-width: none;
  min-height: 76px;
  padding: 10px 28px;
  color: #fff;
  border: 0;
  border-bottom: 2px solid rgba(255, 255, 255, .12);
  border-radius: 0;
  background: rgba(17, 17, 17, .97);
  box-shadow: none;
  backdrop-filter: blur(16px);
}

body:not(.home-vivid) .brand,
body:not(.home-vivid) .brand__name,
body:not(.home-vivid) .site-nav a {
  color: #fff;
}

body:not(.home-vivid) .brand__name small {
  color: rgba(255, 255, 255, .58);
  letter-spacing: 0;
}

body:not(.home-vivid) .site-nav a {
  font-weight: 900;
}

body:not(.home-vivid) .site-nav a::after {
  height: 3px;
  background: var(--vivid-yellow);
}

body:not(.home-vivid) .header-cta {
  min-height: 48px;
  padding-inline: 20px;
  box-shadow: 4px 4px 0 var(--vivid-orange);
}

body:not(.home-vivid) .menu-toggle {
  width: 48px;
  height: 48px;
  border: 2px solid #fff;
  border-radius: 2px;
  background: var(--vivid-orange);
}

body:not(.home-vivid) .menu-toggle span {
  width: 22px;
  height: 3px;
}

body:not(.home-vivid) .mobile-drawer {
  border: 3px solid var(--vivid-black);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--vivid-white);
  box-shadow: 0 -12px 0 var(--vivid-aqua);
}

body:not(.home-vivid) .mobile-tile,
body:not(.home-vivid) .mobile-drawer__cta {
  border: 2px solid var(--vivid-black);
  border-radius: 3px;
}

body:not(.home-vivid) .mobile-tile:nth-child(3n + 1) { box-shadow: 4px 4px 0 var(--vivid-yellow); }
body:not(.home-vivid) .mobile-tile:nth-child(3n + 2) { box-shadow: 4px 4px 0 var(--vivid-aqua); }
body:not(.home-vivid) .mobile-tile:nth-child(3n) { box-shadow: 4px 4px 0 var(--vivid-orange); }

/* Inner-page hero: bold editorial intro with the page purpose front and centre. */
body:not(.home-vivid) .page-hero {
  min-height: 560px;
  align-items: end;
  padding: 166px 0 78px;
  border-bottom: 10px solid var(--vivid-yellow);
  background: var(--vivid-black);
}

body:not(.home-vivid) .page-hero::before {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(7, 7, 7, .96) 0%, rgba(7, 7, 7, .78) 50%, rgba(7, 7, 7, .38) 100%),
    radial-gradient(rgba(255, 255, 255, .26) 1px, transparent 1px);
  background-size: auto, 18px 18px;
}

body:not(.home-vivid) .page-hero::after {
  position: absolute;
  right: clamp(24px, 5vw, 74px);
  bottom: 0;
  z-index: 3;
  width: clamp(130px, 16vw, 250px);
  height: 14px;
  background: var(--vivid-aqua);
  box-shadow: -180px 0 0 var(--vivid-orange);
  content: "";
}

body:not(.home-vivid) .page-hero__mq {
  filter: saturate(.92) contrast(1.08);
}

body:not(.home-vivid) .page-hero .crumb {
  margin-bottom: 18px;
  color: var(--vivid-aqua);
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

body:not(.home-vivid) .page-hero .crumb a {
  color: #fff;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

body:not(.home-vivid) .page-hero h1 {
  width: fit-content;
  max-width: 980px;
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(52px, 7vw, 90px);
  font-weight: 900;
  line-height: 1.08;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, .32);
}

body:not(.home-vivid) .page-hero p {
  max-width: 48em;
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.9;
}

/* Dedicated generated hero artwork for key pages. */
body:not(.home-vivid) .page-hero--visual {
  display: block;
  min-height: 0;
  padding: 76px 0 0;
  border-bottom: 10px solid var(--vivid-yellow);
  background: var(--vivid-black);
}

body:not(.home-vivid) .page-hero--visual::before,
body:not(.home-vivid) .page-hero--visual::after {
  display: none;
}

body:not(.home-vivid) .page-hero__art,
body:not(.home-vivid) .page-hero__art img {
  display: block;
  width: 100%;
}

body:not(.home-vivid) .page-hero__art img {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.vivid-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* Editorial content rhythm. */
body:not(.home-vivid) .split {
  gap: clamp(42px, 6vw, 82px);
}

body:not(.home-vivid) .split__image,
body:not(.home-vivid) .visual-explainer img,
body:not(.home-vivid) .roadmap-visual img,
body:not(.home-vivid) .roadmap-comic img,
body:not(.home-vivid) .aiwriter-slide-visual img,
body:not(.home-vivid) .aiwriter-step-figure img,
body:not(.home-vivid) .story-visual img,
body:not(.home-vivid) .story-comic img,
body:not(.home-vivid) .post-figure img {
  border: 3px solid var(--vivid-black);
  border-radius: 3px;
  box-shadow: 11px 11px 0 var(--vivid-aqua);
}

body:not(.home-vivid) main > section:nth-of-type(4n + 3) .split__image,
body:not(.home-vivid) main > section:nth-of-type(4n + 3) .visual-explainer img,
body:not(.home-vivid) main > section:nth-of-type(4n + 3) .roadmap-visual img {
  box-shadow-color: var(--vivid-orange);
}

body:not(.home-vivid) main > section:nth-of-type(4n) .split__image,
body:not(.home-vivid) main > section:nth-of-type(4n) .visual-explainer img,
body:not(.home-vivid) main > section:nth-of-type(4n) .roadmap-visual img {
  box-shadow-color: var(--vivid-yellow);
}

body:not(.home-vivid) .fact-wall {
  gap: 12px;
  border: 0;
  background: transparent;
}

body:not(.home-vivid) .fact {
  min-height: 210px;
  padding: 28px;
  border: 3px solid var(--vivid-black);
  background: #fff;
  box-shadow: 7px 7px 0 var(--vivid-yellow);
}

body:not(.home-vivid) .fact:nth-child(even) {
  color: #fff;
  background: var(--vivid-black);
  box-shadow-color: var(--vivid-aqua);
}

body:not(.home-vivid) .fact b {
  color: var(--vivid-orange);
  font-size: clamp(50px, 5vw, 72px);
  letter-spacing: 0;
}

body:not(.home-vivid) .fact:nth-child(even) span {
  color: rgba(255, 255, 255, .72);
}

body:not(.home-vivid) .link-index {
  border-top: 3px solid var(--vivid-black);
}

body:not(.home-vivid) .link-index a {
  min-height: 84px;
  border-bottom: 2px solid var(--vivid-black);
  font-weight: 900;
}

body:not(.home-vivid) .link-index a:hover {
  padding-inline: 16px;
  color: var(--vivid-black);
  background: var(--vivid-yellow);
}

/* Projects: make every active item feel like something people can enter. */
body:not(.home-vivid) .project-head {
  margin-bottom: 44px;
}

body:not(.home-vivid) .filters {
  gap: 10px;
  margin-block: 28px 38px;
}

body:not(.home-vivid) .filter-btn,
body:not(.home-vivid) .area-filter,
body:not(.home-vivid) .area-chip {
  min-height: 44px;
  padding: 9px 15px;
  color: var(--vivid-black);
  border: 2px solid var(--vivid-black);
  border-radius: 2px;
  background: #fff;
  font-weight: 900;
}

body:not(.home-vivid) .filter-btn[aria-pressed="true"],
body:not(.home-vivid) .area-filter.is-active,
body:not(.home-vivid) .area-filter[aria-pressed="true"],
body:not(.home-vivid) .area-chip.is-active,
body:not(.home-vivid) .area-chip[aria-pressed="true"] {
  color: var(--vivid-black);
  border-color: var(--vivid-black);
  background: var(--vivid-yellow);
  box-shadow: 4px 4px 0 var(--vivid-orange);
}

body:not(.home-vivid) .project-grid {
  gap: 16px;
}

body:not(.home-vivid) .project-card {
  border: 3px solid var(--vivid-black);
  border-radius: 3px;
  box-shadow: 7px 7px 0 var(--vivid-aqua);
  transition: transform .22s ease, box-shadow .22s ease;
}

body:not(.home-vivid) .project-card:nth-child(3n + 2) { box-shadow-color: var(--vivid-yellow); }
body:not(.home-vivid) .project-card:nth-child(3n) { box-shadow-color: var(--vivid-orange); }

body:not(.home-vivid) .project-card:hover {
  box-shadow: 11px 11px 0 var(--vivid-yellow);
  transform: translate(-4px, -4px);
}

body:not(.home-vivid) .project-card__img::after {
  background: linear-gradient(180deg, transparent 20%, rgba(6, 6, 6, .94) 100%);
}

body:not(.home-vivid) .project-card__status {
  color: var(--vivid-black);
  border: 2px solid var(--vivid-black);
  border-radius: 2px;
  background: var(--vivid-yellow);
}

body:not(.home-vivid) .project-card__arrow {
  width: 42px;
  height: 42px;
  color: var(--vivid-black);
  border: 2px solid var(--vivid-black);
  border-radius: 2px;
  background: var(--vivid-aqua);
}

body:not(.home-vivid) .project-card h3 {
  font-size: 24px;
}

/* Members: faces remain the focus, with a clear tactile action surface. */
body:not(.home-vivid) .writer-filter {
  border: 3px solid var(--vivid-black);
  border-radius: 3px;
  background: #fff;
  box-shadow: 9px 9px 0 var(--vivid-yellow);
}

body:not(.home-vivid) .writer-filter__group {
  border: 2px solid var(--vivid-black);
  border-radius: 2px;
  background: var(--vivid-paper);
}

body:not(.home-vivid) .writer-grid {
  gap: 22px;
}

body:not(.home-vivid) .writer-card,
body:not(.home-vivid) .member-profile-card {
  border: 3px solid var(--vivid-black);
  border-radius: 3px;
  background: #fff;
  box-shadow: 7px 7px 0 var(--vivid-yellow);
  transition: transform .22s ease, box-shadow .22s ease;
}

body:not(.home-vivid) .writer-card:nth-child(3n + 2) { box-shadow-color: var(--vivid-aqua); }
body:not(.home-vivid) .writer-card:nth-child(3n) { box-shadow-color: var(--vivid-orange); }

body:not(.home-vivid) .writer-card:hover {
  box-shadow: 11px 11px 0 var(--vivid-aqua);
  transform: translate(-4px, -4px);
}

body:not(.home-vivid) .writer-card__image::after {
  background: linear-gradient(180deg, transparent 68%, rgba(17, 17, 17, .42));
}

body:not(.home-vivid) .writer-card__meta span,
body:not(.home-vivid) .writer-card__supports span {
  color: var(--vivid-black);
  border: 1px solid var(--vivid-black);
  border-radius: 2px;
  background: var(--vivid-yellow);
}

body:not(.home-vivid) .member-link,
body:not(.home-vivid) .member-detail-final,
body:not(.home-vivid) .member-story-block {
  border: 2px solid var(--vivid-black);
  border-radius: 3px;
}

/* Blog archive and articles: clearer scanning and a stronger reading rhythm. */
body:not(.home-vivid) .p-newsgrid {
  gap: 24px;
}

body:not(.home-vivid) .p-card {
  border: 3px solid var(--vivid-black);
  border-radius: 3px;
  background: #fff;
  box-shadow: 8px 8px 0 var(--vivid-aqua);
  transition: transform .22s ease, box-shadow .22s ease;
}

body:not(.home-vivid) .p-card:nth-child(even) {
  box-shadow-color: var(--vivid-yellow);
}

body:not(.home-vivid) .p-card:hover {
  box-shadow: 12px 12px 0 var(--vivid-orange);
  transform: translate(-4px, -4px);
}

body:not(.home-vivid) .p-card__ph {
  padding: 14px;
  border-right: 3px solid var(--vivid-black);
  background: var(--vivid-white);
}

body:not(.home-vivid) .p-card__ph img {
  border: 0;
  border-radius: 0;
}

body:not(.home-vivid) .p-card__cat {
  color: var(--vivid-black);
  border: 1px solid var(--vivid-black);
  border-radius: 2px;
  background: var(--vivid-yellow);
  font-weight: 900;
}

body:not(.home-vivid) .p-card__ttl {
  color: var(--vivid-black);
  font-size: 24px;
  line-height: 1.45;
}

body:not(.home-vivid) .p-card__more {
  color: var(--vivid-orange);
  font-weight: 900;
  letter-spacing: 0;
}

body:not(.home-vivid) .post-hero {
  min-height: 560px;
  display: flex;
  align-items: end;
  padding: 158px 0 76px;
  border-bottom: 10px solid var(--vivid-yellow);
  background: var(--vivid-black);
}

body:not(.home-vivid) .post-hero__bg::after {
  background:
    linear-gradient(90deg, rgba(7, 7, 7, .96), rgba(7, 7, 7, .64)),
    radial-gradient(rgba(255, 255, 255, .2) 1px, transparent 1px);
  background-size: auto, 18px 18px;
}

body:not(.home-vivid) .post-hero h1 {
  max-width: 880px;
  margin-bottom: 0;
  color: #fff;
  font-size: clamp(42px, 6vw, 74px);
  line-height: 1.18;
}

body:not(.home-vivid) .post-hero__meta > * {
  padding: 5px 9px;
  color: var(--vivid-black);
  border: 1px solid var(--vivid-black);
  border-radius: 2px;
  background: var(--vivid-yellow);
  font-weight: 900;
}

body:not(.home-vivid) .post-wrap {
  gap: 58px;
  padding-block: 78px 112px;
}

body:not(.home-vivid) .post-main {
  min-width: 0;
}

body:not(.home-vivid) .post-body {
  padding: clamp(24px, 4vw, 52px);
  border: 3px solid var(--vivid-black);
  background: #fff;
  box-shadow: 10px 10px 0 var(--vivid-aqua);
}

body:not(.home-vivid) .post-body p,
body:not(.home-vivid) .post-body li {
  color: #4d4944;
  font-size: 16px;
  line-height: 2.05;
}

body:not(.home-vivid) .post-body h2 {
  margin-top: 2.4em;
  padding: 16px 18px;
  border: 0;
  border-left: 10px solid var(--vivid-orange);
  color: var(--vivid-black);
  background: var(--vivid-yellow);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.35;
}

body:not(.home-vivid) .post-body h3 {
  margin-top: 2em;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--vivid-black);
  font-size: clamp(22px, 3vw, 30px);
}

body:not(.home-vivid) .post-body blockquote {
  margin-inline: 0;
  padding: 26px;
  border: 3px solid var(--vivid-black);
  border-left: 12px solid var(--vivid-aqua);
  background: var(--vivid-paper);
  box-shadow: 6px 6px 0 var(--vivid-yellow);
}

body:not(.home-vivid) .post-body .post-link-card {
  border: 3px solid var(--vivid-black);
  border-radius: 3px;
  background: #fff;
  box-shadow: 7px 7px 0 var(--vivid-orange);
}

body:not(.home-vivid) .post-body .post-link-card:hover {
  background: var(--vivid-yellow);
  box-shadow: 10px 10px 0 var(--vivid-aqua);
}

body:not(.home-vivid) .post-side > * {
  border: 2px solid var(--vivid-black);
  border-radius: 3px;
  background: #fff;
  box-shadow: 5px 5px 0 var(--vivid-yellow);
}

/* Reusable information cards across service, story, roadmap and legal pages. */
body:not(.home-vivid) .feature-stack,
body:not(.home-vivid) .story-steps,
body:not(.home-vivid) .story-benefit-grid,
body:not(.home-vivid) .roadmap-stage-grid,
body:not(.home-vivid) .roadmap-offer-grid,
body:not(.home-vivid) .aiwriter-growth-cards,
body:not(.home-vivid) .income-grid,
body:not(.home-vivid) .support-engines,
body:not(.home-vivid) .route-cards {
  gap: 12px;
  border: 0;
  background: transparent;
}

body:not(.home-vivid) .feature-row,
body:not(.home-vivid) .story-steps article,
body:not(.home-vivid) .story-benefit,
body:not(.home-vivid) .roadmap-stage,
body:not(.home-vivid) .roadmap-offer-grid article,
body:not(.home-vivid) .aiwriter-growth-cards article,
body:not(.home-vivid) .income-card,
body:not(.home-vivid) .support-engine,
body:not(.home-vivid) .route-card,
body:not(.home-vivid) .entry-route,
body:not(.home-vivid) .growth-step,
body:not(.home-vivid) .labo-step,
body:not(.home-vivid) .mirai-promise {
  border: 3px solid var(--vivid-black);
  border-radius: 3px;
  background: #fff;
  box-shadow: 7px 7px 0 var(--vivid-yellow);
}

body:not(.home-vivid) .feature-row:nth-child(3n + 2),
body:not(.home-vivid) .story-steps article:nth-child(3n + 2),
body:not(.home-vivid) .story-benefit:nth-child(3n + 2),
body:not(.home-vivid) .roadmap-stage:nth-child(3n + 2),
body:not(.home-vivid) .aiwriter-growth-cards article:nth-child(3n + 2),
body:not(.home-vivid) .income-card:nth-child(3n + 2) { box-shadow-color: var(--vivid-aqua); }

body:not(.home-vivid) .feature-row:nth-child(3n),
body:not(.home-vivid) .story-steps article:nth-child(3n),
body:not(.home-vivid) .story-benefit:nth-child(3n),
body:not(.home-vivid) .roadmap-stage:nth-child(3n),
body:not(.home-vivid) .aiwriter-growth-cards article:nth-child(3n),
body:not(.home-vivid) .income-card:nth-child(3n) { box-shadow-color: var(--vivid-orange); }

body:not(.home-vivid) .feature-row__no,
body:not(.home-vivid) .roadmap-stage > span,
body:not(.home-vivid) .story-steps article > span {
  color: var(--vivid-black);
  -webkit-text-stroke: 0;
}

body:not(.home-vivid) .legal-copy {
  padding: clamp(26px, 5vw, 58px);
  border: 3px solid var(--vivid-black);
  background: #fff;
  box-shadow: 9px 9px 0 var(--vivid-aqua);
}

body:not(.home-vivid) .legal-copy h2 {
  padding: 10px 14px;
  border: 0;
  border-left: 8px solid var(--vivid-orange);
  background: var(--vivid-yellow);
}

body:not(.home-vivid) .legal-copy dl,
body:not(.home-vivid) .legal-copy dt,
body:not(.home-vivid) .legal-copy dd {
  border-color: var(--vivid-black);
}

/* Manga and diagram viewers should feel like a feature, not an embed. */
body:not(.home-vivid) .roadmap-manga-viewer,
body:not(.home-vivid) .aiwriter-manga,
body:not(.home-vivid) .aiwriter-diagram-block,
body:not(.home-vivid) .ai-labo-step-card {
  border: 3px solid var(--vivid-black);
  border-radius: 3px;
  box-shadow: 10px 10px 0 var(--vivid-aqua);
}

body:not(.home-vivid) .roadmap-manga-viewer {
  background: var(--vivid-black);
}

body:not(.home-vivid) .roadmap-manga-count,
body:not(.home-vivid) .roadmap-manga-swipe-balloon {
  color: var(--vivid-black);
  border: 2px solid var(--vivid-black);
  border-radius: 3px;
  background: var(--vivid-yellow);
}

/* Closing sections and footer. */
body:not(.home-vivid) .final-cta {
  min-height: 720px;
  border-top: 10px solid var(--vivid-aqua);
  border-bottom: 10px solid var(--vivid-yellow);
  background: var(--vivid-black);
}

body:not(.home-vivid) .final-cta__bg::after {
  background:
    linear-gradient(135deg, rgba(7, 7, 7, .92), rgba(7, 7, 7, .68)),
    radial-gradient(rgba(255, 255, 255, .2) 1px, transparent 1px);
  background-size: auto, 18px 18px;
}

body:not(.home-vivid) .final-cta__glow {
  display: none;
}

body:not(.home-vivid) .final-cta__icon,
body:not(.home-vivid) .final-cta__inner > picture {
  border-radius: 3px;
}

body:not(.home-vivid) .final-cta__icon {
  border: 3px solid var(--vivid-black);
  box-shadow: 7px 7px 0 var(--vivid-aqua);
}

body:not(.home-vivid) .final-cta h2 {
  font-size: clamp(50px, 7vw, 88px);
  line-height: 1.06;
}

body:not(.home-vivid) .site-footer {
  color: #fff;
  border-top: 3px solid var(--vivid-black);
  background: var(--vivid-black);
}

body:not(.home-vivid) .footer-cta {
  padding-block: 42px;
  border-color: rgba(255, 255, 255, .3);
}

body:not(.home-vivid) .footer-cta h2 {
  font-size: clamp(26px, 3vw, 38px);
}

body:not(.home-vivid) .footer-col h3 {
  color: var(--vivid-yellow);
  letter-spacing: 0;
}

body:not(.home-vivid) .footer-col a:hover {
  color: var(--vivid-aqua);
}

/* Persistent, low-pressure route to a conversation. */
.site-vivid-quick-line {
  position: fixed;
  top: 54%;
  right: 0;
  z-index: 95;
  display: grid;
  width: 56px;
  min-height: 220px;
  place-items: center;
  padding: 16px 10px;
  color: var(--vivid-black);
  border: 3px solid var(--vivid-black);
  border-right: 0;
  border-radius: 3px 0 0 3px;
  background: var(--vivid-yellow);
  box-shadow: -6px 6px 0 var(--vivid-orange);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  text-decoration: none;
  writing-mode: vertical-rl;
  transform: translateY(-50%);
  transition: width .2s ease, background .2s ease;
}

.site-vivid-quick-line:hover {
  width: 64px;
  background: var(--vivid-aqua);
}

.site-vivid-quick-line b {
  color: var(--vivid-orange);
}

.site-vivid-quick-line__short {
  display: none;
}

.home-vivid .site-vivid-quick-line {
  display: none;
}

@media (max-width: 1040px) {
  body:not(.home-vivid) .header-pill {
    grid-template-columns: 1fr auto;
  }

  body:not(.home-vivid) .page-hero h1 {
    font-size: clamp(48px, 8vw, 76px);
  }
}

@media (max-width: 768px) {
  body:not(.home-vivid) {
    padding-bottom: 82px;
  }

  body:not(.home-vivid) .wrap,
  body:not(.home-vivid) .wrap--wide {
    width: min(100% - 32px, 1180px);
  }

  body:not(.home-vivid) .section,
  body:not(.home-vivid) .page-sec {
    padding-block: 72px;
  }

  body:not(.home-vivid) .header-pill {
    width: 100%;
    min-height: 68px;
    padding: 8px 12px;
  }

  body:not(.home-vivid) .brand__mark {
    width: 34px;
    height: 34px;
  }

  body:not(.home-vivid) .menu-toggle {
    width: 46px;
    height: 46px;
  }

  body:not(.home-vivid) .page-hero {
    min-height: 540px;
    padding: 132px 0 64px;
  }

  body:not(.home-vivid) .page-hero h1 {
    font-size: clamp(39px, 12vw, 56px);
    line-height: 1.12;
  }

  body:not(.home-vivid) .page-hero p {
    font-size: 14px;
    line-height: 1.8;
  }

  body:not(.home-vivid) .page-hero--visual {
    min-height: 0;
    padding-top: 68px;
  }

  body:not(.home-vivid) .page-hero__art img {
    aspect-ratio: 9 / 16;
  }

  body:not(.home-vivid) .section-title,
  body:not(.home-vivid) .page-copy h2 {
    font-size: clamp(34px, 10vw, 48px);
  }

  body:not(.home-vivid) .split {
    gap: 42px;
  }

  body:not(.home-vivid) .split__image,
  body:not(.home-vivid) .visual-explainer img,
  body:not(.home-vivid) .roadmap-visual img,
  body:not(.home-vivid) .story-visual img,
  body:not(.home-vivid) .story-comic img,
  body:not(.home-vivid) .post-figure img {
    box-shadow: 8px 8px 0 var(--vivid-aqua);
  }

  body:not(.home-vivid) .project-grid {
    gap: 18px;
  }

  body:not(.home-vivid) .project-card {
    box-shadow: 6px 6px 0 var(--vivid-aqua);
  }

  body:not(.home-vivid) .writer-grid {
    gap: 14px;
  }

  body:not(.home-vivid) .writer-card {
    box-shadow: 5px 5px 0 var(--vivid-yellow);
  }

  body:not(.home-vivid) .p-card {
    box-shadow: 6px 6px 0 var(--vivid-aqua);
  }

  body:not(.home-vivid) .p-card__ph {
    border-right: 0;
    border-bottom: 3px solid var(--vivid-black);
  }

  body:not(.home-vivid) .p-card__bd {
    padding: 22px 18px 26px;
  }

  body:not(.home-vivid) .post-hero {
    min-height: 520px;
    padding: 132px 0 62px;
  }

  body:not(.home-vivid) .post-hero h1 {
    font-size: clamp(36px, 10vw, 52px);
  }

  body:not(.home-vivid) .post-wrap {
    padding: 54px 16px 88px;
  }

  body:not(.home-vivid) .post-body {
    padding: 24px 18px;
    box-shadow: 7px 7px 0 var(--vivid-aqua);
  }

  body:not(.home-vivid) .post-body h2 {
    margin-inline: -18px;
    padding: 14px 16px;
    font-size: 28px;
  }

  body:not(.home-vivid) .fact-wall {
    gap: 10px;
  }

  body:not(.home-vivid) .fact {
    min-height: 165px;
    padding: 20px;
    box-shadow: 5px 5px 0 var(--vivid-yellow);
  }

  body:not(.home-vivid) .fact b {
    font-size: 48px;
  }

  body:not(.home-vivid) .final-cta {
    min-height: 670px;
  }

  body:not(.home-vivid) .final-cta h2 {
    font-size: clamp(42px, 12vw, 58px);
  }

  .site-vivid-quick-line {
    top: auto;
    right: 12px;
    bottom: 12px;
    left: auto;
    display: grid;
    width: 68px;
    min-height: 60px;
    place-items: center;
    padding: 7px;
    border: 3px solid var(--vivid-black);
    border-radius: 3px;
    box-shadow: 5px 5px 0 var(--vivid-orange);
    font-size: 12px;
    line-height: 1.25;
    writing-mode: initial;
    transform: none;
  }

  .site-vivid-quick-line:hover {
    width: 68px;
  }

  .site-vivid-quick-line__long {
    display: none;
  }

  .site-vivid-quick-line__short {
    display: block;
  }
}

@media (max-width: 480px) {
  body:not(.home-vivid) .writer-grid {
    grid-template-columns: 1fr;
  }

  body:not(.home-vivid) .writer-card {
    grid-template-rows: 210px 1fr;
  }

  body:not(.home-vivid) .writer-card h3 {
    font-size: 21px;
  }

  body:not(.home-vivid) .fact-wall {
    grid-template-columns: 1fr 1fr;
  }

  body:not(.home-vivid) .fact {
    min-width: 0;
  }

  body:not(.home-vivid) .fact span {
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-vivid-quick-line,
  body:not(.home-vivid) .project-card,
  body:not(.home-vivid) .writer-card,
  body:not(.home-vivid) .p-card {
    transition: none;
  }
}