/*
 * Reversible homepage palette experiment.
 * Chapter rhythm: hero dark / showcase light / studio dark / pricing light / contact dark.
 * Remove this stylesheet link from index.html to restore the previous palette.
 */

.home-page {
  --palette-ink: #0b0b0b;
  --palette-paper: #edebe7;
  --palette-paper-raised: #f7f4ef;
  --palette-space-raised: #171817;
  --palette-muted-dark: #5f5a54;
  --palette-muted-light: #aaa59e;
  --palette-signal: #cc6437;
  --palette-signal-on-paper: #a6421c;
  --palette-line-dark: rgba(11, 11, 11, .18);
  --palette-line-light: rgba(237, 235, 231, .18);
}

/* Showcase / latest project: light canvas with a dark browser artefact. */
.home-page .work-section {
  --work-bg: var(--palette-paper);
  --work-fg: var(--palette-ink);
  --work-muted: var(--palette-muted-dark);
  --work-accent: var(--palette-signal);
  --space-star: rgba(11, 11, 11, .36);
  --space-star-accent: rgba(204, 100, 55, .72);
  --space-star-opacity: .18;
  background: var(--palette-paper);
  color: var(--palette-ink);
}

.home-page .work-section .work-heading {
  --pricing-line: var(--palette-line-dark);
  --pricing-muted: var(--palette-muted-dark);
  width: min(100%, 1600px);
  max-width: 1600px;
  color: var(--palette-ink);
}

.home-page .work-section .work-heading > div > p {
  max-width: 58ch;
  margin: 14px 0 0;
  color: var(--palette-muted-dark);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.55;
  text-transform: none;
}

.home-page .work-section .section-heading::after,
.home-page .work-section .project-type,
.home-page .work-section .case-study-copy,
.home-page .work-section .project-proof,
.home-page .work-section .nsta-showcase,
.home-page .work-section .case-study-footer {
  border-color: var(--palette-line-dark);
}

.home-page .work-section .project-details h2,
.home-page .work-section .project-proof span,
.home-page .work-section .nsta-visual-system h3,
.home-page .work-section .nsta-palette strong,
.home-page .work-section .nsta-system-notes strong {
  color: var(--palette-ink);
}

.home-page .work-section .featured-work--nsta .project-details .case-study-kicker {
  color: #b44f26;
}

.home-page .work-section .project-details :is(p, li),
.home-page .work-section .case-study-copy p,
.home-page .work-section .case-study-footer p,
.home-page .work-section .nsta-visual-system > header p,
.home-page .work-section .nsta-system-notes p {
  color: var(--palette-muted-dark);
}

.home-page .work-section .featured-work--nsta .case-study-copy section,
.home-page .work-section .featured-work--nsta .case-study-copy section + section,
.home-page .work-section .featured-work--nsta .project-proof,
.home-page .work-section .featured-work--nsta .project-proof li,
.home-page .work-section .nsta-showcase figure,
.home-page .work-section .case-study-footer,
.home-page .work-section .nsta-visual-system,
.home-page .work-section .nsta-palette li,
.home-page .work-section .nsta-system-notes,
.home-page .work-section .nsta-system-notes p + p {
  border-color: var(--palette-line-dark);
}

.home-page .work-section .nsta-palette code {
  color: #736e67;
}

.home-page .work-section .nsta-testimonial {
  background: var(--palette-paper-raised);
  box-shadow: inset 0 0 0 1px var(--palette-line-dark);
}

.home-page .work-section .case-study-cta:is(:hover, :focus-visible) {
  border-color: var(--palette-ink);
  background: var(--palette-ink);
  color: var(--palette-paper);
}

/* One studio: dark process register with the existing orange calibration signal. */
.home-page .services-index {
  --space-star: rgba(237, 235, 231, .48);
  --space-star-accent: rgba(204, 100, 55, .72);
  --space-star-opacity: .2;
  background: var(--palette-ink);
  color: var(--palette-paper);
  border-color: var(--palette-line-light);
}

.home-page .services-index__frame,
.home-page .services-index__intro,
.home-page .service-routes article,
.home-page [data-path-calibration] .services-index__frame {
  border-color: var(--palette-line-light);
}

.home-page .services-index__intro p,
.home-page .service-routes p {
  color: var(--palette-muted-light);
}

.home-page .services-index .service-route__number {
  color: var(--palette-signal);
}

.home-page .service-routes article:hover,
.home-page .service-routes article:focus-within {
  background: rgba(204, 100, 55, .08);
}

.home-page .path-calibration__probe {
  color: var(--palette-paper);
}

.home-page .path-calibration__probe svg {
  stroke: var(--palette-ink);
}

.home-page .path-calibration__probe > span {
  border-color: rgba(237, 235, 231, .34);
  background: var(--palette-space-raised);
  color: var(--palette-paper);
}

.home-page .path-calibration__lock {
  background: var(--palette-space-raised);
  color: var(--palette-signal);
}

.home-page .path-calibration__status {
  color: rgba(237, 235, 231, .62);
}

.home-page .path-calibration__status b {
  border-color: rgba(237, 235, 231, .3);
  color: var(--palette-signal);
}

.home-page [data-path-calibration][data-path-state="complete"] .path-calibration__status b {
  border-color: var(--palette-signal);
  background: var(--palette-signal);
  color: var(--palette-ink);
}

/* Pricing: paper canvas and softly raised comparison cards. */
.home-page .pricing-section {
  --pricing-canvas: var(--palette-paper);
  --pricing-ink: var(--palette-ink);
  --pricing-muted: var(--palette-muted-dark);
  --pricing-line: var(--palette-line-dark);
  --pricing-card: var(--palette-paper-raised);
  --pricing-card-hover: #fffaf2;
  --pricing-card-ink: var(--palette-ink);
  --pricing-card-line: var(--palette-line-dark);
  --pricing-care-line: var(--palette-line-dark);
  --space-star: rgba(11, 11, 11, .36);
  --space-star-accent: rgba(204, 100, 55, .72);
  --space-star-opacity: .18;
  background: var(--palette-paper);
  color: var(--palette-ink);
}

.home-page .pricing-grid .price-plan,
.home-page .pricing-grid .price-plan:hover,
.home-page .pricing-grid .price-plan:focus-within {
  background: var(--pricing-card);
  color: var(--pricing-card-ink);
}

.home-page .pricing-grid .price-plan:hover,
.home-page .pricing-grid .price-plan:focus-within {
  background: var(--pricing-card-hover);
}

.home-page .pricing-grid {
  scrollbar-color: var(--palette-signal) var(--palette-paper);
}

.home-page .pricing-grid .plan-type,
.home-page .pricing-grid .plan-outcome,
.home-page .pricing-grid .plan-timing,
.home-page .pricing-grid .price-plan ul,
.home-page .nexus-panel__intro > p:last-child {
  color: var(--palette-muted-dark);
}

.home-page .pricing-grid .price,
.home-page .care-section,
.home-page .care-options article + article {
  border-color: var(--palette-line-dark);
}

.home-page .pricing-grid .price-plan > a:hover,
.home-page .pricing-grid .price-plan > a:focus-visible,
.home-page .nexus-panel > a:hover,
.home-page .nexus-panel > a:focus-visible {
  color: var(--palette-ink) !important;
}

.home-page .nexus-panel {
  border-color: var(--palette-line-dark);
  background: var(--palette-paper-raised);
  color: var(--palette-ink);
}

.home-page .nexus-panel__intro h3 {
  color: var(--palette-ink);
}

.home-page .care-section,
.home-page .care-options,
.home-page .care-options article {
  background: transparent;
  color: var(--palette-ink);
}

/* Bottom / contact: dark final chapter and readable footer metadata. */
.home-page .contact-section {
  --panel-bg: var(--palette-ink);
  --panel-fg: var(--palette-paper);
  --panel-muted: var(--palette-muted-light);
  --space-star: rgba(237, 235, 231, .48);
  --space-star-accent: rgba(204, 100, 55, .72);
  --space-star-opacity: .22;
  background: var(--palette-ink);
  color: var(--palette-paper);
}

.home-page .contact-grid,
.home-page .contact-copy,
.home-page .contact-badge-panel,
.home-page .contact-section > footer {
  border-color: var(--palette-line-light);
}

.home-page .contact-copy {
  background: var(--palette-space-raised);
}

.home-page .contact-copy > div > p {
  color: var(--palette-muted-light);
}

.home-page .contact-email {
  color: var(--palette-paper);
}

.home-page .contact-start:hover,
.home-page .contact-start:focus-visible {
  border-color: var(--palette-paper);
  background: var(--palette-paper);
  color: var(--palette-ink);
}

.home-page .contact-section > footer .country-acknowledgement {
  padding-top: 0;
  border-top: 0;
  color: rgba(237, 235, 231, .7);
}

.home-page .contact-section [data-signal-lock] > .signal-lock-frame {
  --signal-lock-color: var(--mission-cream);
}

@media (max-width: 980px) {
  .home-page .services-index__intro,
  .home-page .service-routes article {
    border-color: var(--palette-line-light);
  }

  .home-page [data-path-calibration] .service-routes::before {
    background: var(--palette-line-light);
  }
}

@media (max-width: 760px) {
  .home-page .work-section .featured-work--nsta .project-proof li,
  .home-page .work-section .featured-work--nsta .project-proof li:first-child {
    border-color: var(--palette-line-dark);
  }
}

@media (max-width: 720px) {
  .home-page .pricing-grid .price-plan,
  .home-page .pricing-grid .price-plan:hover,
  .home-page .pricing-grid .price-plan:focus-within {
    background: var(--pricing-card);
  }

  .home-page .pricing-grid .price-plan:hover,
  .home-page .pricing-grid .price-plan:focus-within {
    background: var(--pricing-card-hover);
  }

  .home-page .care-options article + article {
    border-color: var(--palette-line-dark);
  }
}

@media (max-width: 560px) {
  .home-page .work-section .nsta-palette li:nth-child(4) {
    border-color: var(--palette-line-dark);
  }
}

/* Impeccable polish pass: clearer functional type, stronger paper contrast and
   complete mobile interaction states without changing the incumbent visual world. */
.home-page .skip-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: .09em;
}

.home-page .work-section .featured-work--nsta .case-study-kicker,
.home-page .work-section .featured-work--nsta .case-study-copy h3,
.home-page .work-section .featured-work--nsta .project-proof strong,
.home-page .work-section .nsta-system-notes span,
.home-page .work-section .case-study-footer span,
.home-page .pricing-grid .price-plan > a,
.home-page .nexus-panel > a,
.home-page .nexus-label,
.home-page .care-included,
.home-page .care-code {
  color: var(--palette-signal-on-paper);
}

.home-page .work-section .featured-work--nsta .project-details .case-study-kicker {
  color: var(--palette-signal-on-paper);
}

.home-page .pricing-section .pricing-grid .price-plan > a:not(:hover):not(:focus-visible),
.home-page .pricing-section .nexus-panel > a:not(:hover):not(:focus-visible),
.home-page .pricing-section .nexus-panel .nexus-label {
  color: var(--palette-signal-on-paper) !important;
}

.home-page .pricing-section .nexus-panel .nexus-label {
  font-size: 10px !important;
  line-height: 1.4;
}

.home-page .work-section .window-address {
  color: #c8c3bc;
}

.home-page .work-section .nsta-palette code {
  color: var(--palette-muted-dark);
}

.home-page .pricing-grid .plan-type,
.home-page .nexus-label,
.home-page .care-included,
.home-page .care-code,
.home-page .care-price small,
.home-page .work-section .featured-work--nsta .case-study-copy h3,
.home-page .work-section .featured-work--nsta .project-proof li,
.home-page .work-section .nsta-system-notes span {
  font-size: 10px;
  line-height: 1.4;
}

.home-page .pricing-grid .plan-timing,
.home-page .pricing-grid .price-plan > a,
.home-page .nexus-panel > a,
.home-page .contact-start,
.home-page .work-section .project-type,
.home-page .work-section .nsta-carousel__tabs button,
.home-page .work-section .nsta-carousel__toggle,
.home-page .work-section .case-study-cta {
  font-size: 11px;
  letter-spacing: .08em;
}

.home-page .contact-email {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.home-page .contact-section > footer {
  font-size: 10px;
  letter-spacing: .09em;
}

.intake-package-selection {
  margin: 0 0 26px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 18px;
  border: 1px solid #514a43;
  background: #171412;
}

.intake-package-selection[hidden] {
  display: none;
}

.intake-package-selection span {
  color: #b7ada0;
  font: 700 10px/1.2 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.intake-package-selection strong {
  color: #f4eee4;
  font: 600 18px/1.25 var(--body);
}

.intake-package-selection button {
  min-height: 44px;
  grid-column: 2;
  grid-row: 1 / 3;
  padding: 0 14px;
  border: 1px solid #cc6437;
  background: transparent;
  color: #f4eee4;
  font: 700 10px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.intake-package-selection button:is(:hover, :focus-visible) {
  background: #cc6437;
  color: #0b0b0b;
}

@media (max-width: 1360px) {
  .home-page .site-nav::before {
    position: fixed;
    inset: 66px 0 0;
    z-index: 0;
    background: rgba(11, 11, 11, .68);
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .home-page .site-nav__inner {
    position: relative;
    z-index: 1;
  }

  .home-page .site-nav:has(.nav-links.is-open)::before {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 560px) {
  .home-page .hero-stage {
    min-height: 0;
    gap: 0;
  }

  .home-page .hero-copy {
    padding: 36px 22px 14px;
  }

  .home-page .hero-intro {
    margin-top: 20px;
    padding-top: 18px;
  }

  .home-page .hero-art {
    min-height: clamp(292px, 72vw, 400px);
  }

  .intake-package-selection {
    grid-template-columns: 1fr;
  }

  .intake-package-selection button {
    width: 100%;
    margin-top: 8px;
    grid-column: 1;
    grid-row: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .site-nav::before {
    transition: none;
  }

  .home-page :is(a, button, input, select, textarea) {
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, outline-color 120ms ease !important;
  }
}