/* Homepage-only dark gradient system.
   Keeps portfolio and service cards as contrasting content surfaces while
   making each major homepage section read as a distinct visual chapter. */

.home-experiment {
  --chapter-line-violet: rgba(142, 126, 255, .24);
  --chapter-line-cyan: rgba(92, 225, 230, .2);
  --chapter-line-plum: rgba(180, 122, 255, .2);
  --chapter-line-footer: rgba(255, 255, 255, .12);
  background: #0c0d15;
  color: #f7f5ff;
}

.home-experiment main {
  background: #0c0d15;
}

/* Phase 6 brand alignment: the homepage shell now belongs to the same dark
   studio system as the hero instead of retaining the earlier paper palette. */
.home-experiment .site-nav {
  border-bottom-color: rgba(255, 255, 255, .1);
  background: rgba(14, 16, 27, .94);
  backdrop-filter: blur(18px);
}

.home-experiment .site-nav.is-scrolled {
  background: rgba(10, 11, 18, .975);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
}

.home-experiment .site-nav .navbar-item {
  color: #f7f5ff;
}

.home-experiment .site-nav a.navbar-item:not(.button):hover {
  background: rgba(255, 255, 255, .07);
  color: var(--studio-acid);
}

.home-experiment .site-nav a.navbar-item[aria-current="page"]:not(.button) {
  color: var(--studio-acid);
  box-shadow: inset 0 -3px 0 var(--studio-acid);
}

.home-experiment .site-nav .button.is-brand {
  border-color: var(--studio-acid);
  background: var(--studio-acid);
  color: #17151d;
}

.home-experiment .site-nav .brand-symbol {
  color: var(--studio-cyan);
}

.home-experiment .site-nav .brand-name {
  color: #fff;
}

.home-experiment .site-nav .brand-studio {
  color: #b8b4c9;
}

.home-experiment .site-nav .brand-mark:hover .brand-symbol,
.home-experiment .site-nav .brand-mark:focus-visible .brand-symbol,
.home-experiment .site-nav .brand-mark:hover .brand-name,
.home-experiment .site-nav .brand-mark:focus-visible .brand-name {
  color: var(--studio-acid);
}

.home-experiment .site-nav .navbar-burger {
  color: #f7f5ff;
}

/* Hero remains the opening midnight/teal chapter. Its closing tone is kept
   dark and cool so Selected Work can enter with a perceptible plum shift. */
.home-experiment .studio-hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(92, 225, 230, .24), transparent 29rem),
    radial-gradient(circle at 14% 92%, rgba(109, 93, 252, .3), transparent 31rem),
    linear-gradient(180deg, #10141d 0%, #111725 52%, #141827 100%);
}

.home-experiment .studio-showcase {
  position: relative;
  padding-bottom: 2.5rem;
  border-bottom: 0;
  background:
    radial-gradient(circle at 88% 18%, rgba(109, 93, 252, .2), transparent 28rem),
    radial-gradient(circle at 8% 82%, rgba(92, 225, 230, .08), transparent 24rem),
    linear-gradient(180deg, #1b1638 0%, #1d183b 45%, #261d50 100%);
  box-shadow: inset 0 1px 0 var(--chapter-line-violet);
  color: #f8f7ff;
}

.home-experiment .studio-showcase-heading.mb-6 {
  margin-bottom: 2.5rem !important;
}

.home-experiment .studio-showcase .buttons.mt-6 {
  margin-top: 2rem !important;
}

.home-experiment .studio-showcase .eyebrow {
  color: var(--studio-cyan);
}

.home-experiment .studio-showcase .studio-section-title,
.home-experiment .studio-showcase .title:not(.showcase-copy .title) {
  color: #fff !important;
}

.home-experiment .studio-showcase-intro {
  color: #c8c6dc;
}

/* Featured portfolio work sits in a neutral dark studio frame. Project
   identity survives as restrained coral/violet accents rather than a full
   saturated card shell, so the artwork remains the strongest color source. */
.home-experiment .showcase-project {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(31, 32, 48, .98), rgba(22, 23, 35, .98));
  color: #f7f5ff;
  box-shadow: 0 24px 58px rgba(5, 5, 14, .3);
}

.home-experiment .showcase-project::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 4px;
  pointer-events: none;
}

.home-experiment .showcase-project.is-coral {
  border-color: rgba(214, 111, 99, .48);
  background: linear-gradient(180deg, rgba(45, 31, 36, .98), rgba(24, 23, 34, .98));
  color: #f8f4f3;
}

.home-experiment .showcase-project.is-coral::before {
  background: linear-gradient(90deg, #d66f63, rgba(214, 111, 99, .18));
}

.home-experiment .showcase-project.is-violet {
  border-color: rgba(109, 93, 252, .5);
  background: linear-gradient(180deg, rgba(34, 31, 55, .98), rgba(23, 22, 38, .98));
  color: #f7f5ff;
}

.home-experiment .showcase-project.is-violet::before {
  background: linear-gradient(90deg, #6d5dfc, rgba(109, 93, 252, .18));
}

.home-experiment .showcase-media {
  min-height: 330px;
  margin: .8rem .8rem 0;
  border-radius: 22px;
  background: rgba(255, 255, 255, .035);
}

.home-experiment .showcase-media img {
  max-height: 460px;
}

.home-experiment .showcase-project.is-coral .showcase-media {
  background:
    radial-gradient(circle at 82% 12%, rgba(214, 111, 99, .17), transparent 18rem),
    rgba(255, 255, 255, .035);
}

.home-experiment .showcase-project.is-violet .showcase-media {
  background:
    radial-gradient(circle at 82% 12%, rgba(109, 93, 252, .18), transparent 18rem),
    rgba(255, 255, 255, .035);
}

.home-experiment .showcase-copy {
  color: #d8d5e2;
}

.home-experiment .showcase-copy .title {
  color: #fff !important;
}

.home-experiment .showcase-project.is-coral .showcase-kicker {
  color: #f09a90;
}

.home-experiment .showcase-project.is-violet .showcase-kicker {
  color: #a99fff;
}

.home-experiment .studio-showcase .button.is-dark {
  border-color: var(--studio-acid);
  background: var(--studio-acid);
  color: #17151d;
  font-weight: 800;
}

.home-experiment .studio-showcase .button.is-dark:hover {
  border-color: #efffba;
  background: #efffba;
  color: #17151d;
}

/* Services enters through a cooler ink-blue rather than inheriting the exact
   plum ending of Selected Work, then settles into the established teal. */
.home-experiment .home-services {
  position: relative;
  padding-top: 7rem;
  padding-bottom: 5rem;
  background:
    radial-gradient(circle at 10% 24%, rgba(109, 93, 252, .13), transparent 24rem),
    radial-gradient(circle at 92% 78%, rgba(92, 225, 230, .12), transparent 26rem),
    linear-gradient(180deg, #1b2844 0%, #17283d 46%, #123039 100%);
  box-shadow: inset 0 1px 0 var(--chapter-line-cyan);
  color: #f8faff;
}

.home-experiment .home-services .eyebrow {
  color: var(--studio-acid);
}

.home-experiment .home-services .section-title {
  color: #fff !important;
}

.home-experiment .studio-section-copy {
  color: #c8d4df;
}

.home-experiment .studio-service-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(31, 32, 48, .98), rgba(22, 23, 35, .98));
  color: #f7f5ff;
  box-shadow: 0 22px 52px rgba(4, 7, 16, .28);
}

.home-experiment .studio-service-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  pointer-events: none;
}

.home-experiment .studio-service-card:nth-child(1) {
  border-color: rgba(214, 111, 99, .46);
  background:
    radial-gradient(circle at 88% 10%, rgba(214, 111, 99, .12), transparent 15rem),
    linear-gradient(180deg, rgba(45, 31, 36, .98), rgba(24, 23, 34, .98));
}
.home-experiment .studio-service-card:nth-child(1)::before {
  background: linear-gradient(90deg, #d66f63, rgba(214, 111, 99, .18));
}

.home-experiment .studio-service-card:nth-child(2) {
  border-color: rgba(109, 93, 252, .48);
  background:
    radial-gradient(circle at 88% 10%, rgba(109, 93, 252, .14), transparent 15rem),
    linear-gradient(180deg, rgba(34, 31, 55, .98), rgba(23, 22, 38, .98));
}
.home-experiment .studio-service-card:nth-child(2)::before {
  background: linear-gradient(90deg, #6d5dfc, rgba(109, 93, 252, .18));
}

.home-experiment .studio-service-card:nth-child(3) {
  border-color: rgba(75, 203, 209, .46);
  background:
    radial-gradient(circle at 88% 10%, rgba(75, 203, 209, .13), transparent 15rem),
    linear-gradient(180deg, rgba(24, 43, 48, .98), rgba(20, 28, 36, .98));
}
.home-experiment .studio-service-card:nth-child(3)::before {
  background: linear-gradient(90deg, #4bcbd1, rgba(75, 203, 209, .18));
}

.home-experiment .studio-service-card .title {
  color: #fff !important;
}

.home-experiment .studio-service-card p {
  color: #d0ceda;
}

.home-experiment .service-index {
  color: #aaa6ba;
}

.home-experiment .home-services .button.is-dark {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.home-experiment .home-services .button.is-dark:hover {
  border-color: #fff;
  background: #fff;
  color: #15212d;
}

/* Launch Scope mirrors the portfolio/service frame treatment instead of
   reading as a separate pale information slab. */
.home-experiment .studio-scope-note {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(75, 203, 209, .46);
  border-left-width: 1px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 10%, rgba(75, 203, 209, .12), transparent 16rem),
    linear-gradient(180deg, rgba(24, 43, 48, .98), rgba(18, 27, 34, .98));
  color: #d8eef0;
  box-shadow: 0 22px 52px rgba(4, 9, 16, .26);
}

.home-experiment .studio-scope-note::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #4bcbd1, rgba(75, 203, 209, .18));
  pointer-events: none;
}

.home-experiment .studio-scope-note strong {
  color: #fff;
}

/* Process enters with a deeper ink-teal than the Services ending tone, then
   gradually returns to midnight. */
.home-experiment .home-process {
  position: relative;
  padding-top: 6.5rem;
  padding-bottom: 5.5rem;
  background:
    radial-gradient(circle at 84% 20%, rgba(92, 225, 230, .09), transparent 26rem),
    linear-gradient(180deg, #10272f 0%, #14232f 35%, #111827 68%, #111019 100%);
  box-shadow: inset 0 1px 0 rgba(92, 225, 230, .16);
  color: #fff;
}

.home-experiment .studio-process-step {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .045);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .14);
}

/* Final CTA remains the concentrated plum conclusion, but Phase 5 reduces
   excess outer/panel space so it reads as an endpoint rather than another
   long chapter. */
.home-experiment .home-cta {
  padding-top: 2rem;
  padding-bottom: 4.5rem;
  background:
    radial-gradient(circle at 82% 20%, rgba(109, 93, 252, .17), transparent 24rem),
    linear-gradient(180deg, #1b1431 0%, #20163a 48%, #2c1b4d 100%);
  box-shadow:
    inset 0 1px 0 var(--chapter-line-plum),
    inset 0 -1px 0 rgba(255, 255, 255, .08);
  color: #fff;
}

.home-experiment .studio-cta-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid rgba(217, 255, 111, .42);
  background:
    radial-gradient(circle at 88% 12%, rgba(217, 255, 111, .12), transparent 18rem),
    linear-gradient(180deg, rgba(31, 30, 45, .98), rgba(20, 19, 31, .98));
  color: #f7f5ff;
  box-shadow: 0 30px 72px rgba(0, 0, 0, .34);
}

.home-experiment .studio-cta-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--studio-acid), rgba(217, 255, 111, .18));
  pointer-events: none;
}

.home-experiment .studio-cta-panel .eyebrow {
  color: var(--studio-acid);
}

.home-experiment .studio-cta-panel .title {
  color: #fff !important;
}

.home-experiment .studio-cta-panel > p:not(.eyebrow) {
  color: #d2cfdd;
}

.home-experiment .studio-cta-panel .button.is-ink {
  border-color: var(--studio-acid);
  background: var(--studio-acid);
  color: #17151d;
  font-weight: 850;
}

.home-experiment .studio-cta-panel .button.is-ink:hover {
  border-color: #efffba;
  background: #efffba;
  color: #17151d;
}

.home-experiment .studio-cta-panel .button.is-outline-ink {
  border-color: rgba(255, 255, 255, .46);
  background: rgba(255, 255, 255, .035);
  color: #fff;
}

.home-experiment .studio-cta-panel .button.is-outline-ink:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .09);
  color: #fff;
}

.home-experiment .site-footer {
  border-top-color: rgba(255, 255, 255, .18);
  background: linear-gradient(180deg, #0d0c14 0%, #08080d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}

.home-experiment .site-footer .footer-brand-name {
  color: #f7f5ff;
}

@media screen and (max-width: 768px) {
  .home-experiment .site-nav .navbar-brand {
    background: rgba(10, 11, 18, .985);
  }

  .home-experiment .studio-showcase {
    padding-bottom: 2.25rem;
    background:
      radial-gradient(circle at 92% 12%, rgba(109, 93, 252, .18), transparent 18rem),
      linear-gradient(180deg, #1b1638 0%, #1d183b 46%, #261d50 100%);
  }

  .home-experiment .studio-showcase-heading.mb-6 {
    margin-bottom: 2rem !important;
  }

  .home-experiment .showcase-media {
    min-height: 0;
    margin: .65rem .65rem 0;
    border-radius: 18px;
  }

  .home-experiment .showcase-media img {
    max-height: 390px;
  }

  .home-experiment .home-services {
    padding-top: 4.5rem;
    padding-bottom: 4rem;
    background:
      radial-gradient(circle at 10% 20%, rgba(109, 93, 252, .1), transparent 18rem),
      radial-gradient(circle at 90% 82%, rgba(92, 225, 230, .1), transparent 18rem),
      linear-gradient(180deg, #1b2844 0%, #17283d 48%, #123039 100%);
  }

  .home-experiment .studio-service-card,
  .home-experiment .studio-scope-note {
    border-radius: 18px;
  }

  .home-experiment .home-process {
    padding-top: 4.5rem;
    padding-bottom: 4rem;
    background: linear-gradient(180deg, #10272f 0%, #14232f 34%, #111827 68%, #111019 100%);
  }

  .home-experiment .home-cta {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
    background:
      radial-gradient(circle at 84% 18%, rgba(109, 93, 252, .14), transparent 17rem),
      linear-gradient(180deg, #1b1431 0%, #20163a 48%, #2c1b4d 100%);
  }

  .home-experiment .site-footer .footer-shell {
    padding-inline: 1.25rem;
  }
}

@media (forced-colors: active) {
  .home-experiment .studio-showcase,
  .home-experiment .showcase-project,
  .home-experiment .home-services,
  .home-experiment .studio-service-card,
  .home-experiment .studio-scope-note,
  .home-experiment .home-process,
  .home-experiment .home-cta,
  .home-experiment .studio-cta-panel {
    forced-color-adjust: auto;
  }
}