/**
 * Coastline DC — Homepage premium polish
 * Sprint 1 — design standard for the platform.
 */

html:has(body[data-page="home"]) {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:has(body[data-page="home"]) {
    scroll-behavior: auto;
  }
}

body[data-page="home"] {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Premium navigation ─── */

body[data-page="home"] .site-header--premium .site-header__trust {
  display: block;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  background: rgb(6 13 24 / 0.35);
  backdrop-filter: blur(12px);
}

body[data-page="home"] .site-header--premium.is-scrolled .site-header__trust {
  display: none;
}

body[data-page="home"] .site-header__trust-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  max-width: var(--container-max-width-wide);
  margin-inline: auto;
  padding: var(--space-2) var(--container-padding-x);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-page="home"] .site-header__trust--on-hero .site-header__trust-inner {
  color: rgb(255 255 255 / 0.72);
}

body[data-page="home"] .site-header__trust-badge {
  color: var(--primitive-gold-400);
}

body[data-page="home"] .site-header__trust-divider {
  width: 1px;
  height: 0.75rem;
  background: rgb(255 255 255 / 0.2);
}

@media (max-width: 47.99rem) {
  body[data-page="home"] .site-header__trust-region {
    display: none;
  }
}

body[data-page="home"] .site-header__logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-right: var(--space-2);
  font-family: var(--font-family-display);
  font-size: 1.125rem;
  font-weight: var(--font-weight-regular);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  opacity: 0.9;
}

body[data-page="home"] .site-header__logo-text {
  font-family: var(--font-family-display);
  font-size: 1.25rem;
  letter-spacing: var(--letter-spacing-tight);
}

body[data-page="home"] .site-header--premium .site-nav__link {
  font-size: var(--font-size-sm);
  letter-spacing: 0.02em;
}

@media (min-width: 64rem) {
  body[data-page="home"] .site-header--premium .site-nav__list {
    gap: var(--space-1);
  }
}

/* ─── Mobile: restore elegant hero entrance ─── */

@media (max-width: 63.99rem) {
  body[data-page="home"] .hero__animate {
    animation: hero-enter 1s var(--ease-editorial) backwards !important;
  }

  body[data-page="home"] .hero__animate--1 { animation-delay: 0.06s !important; }
  body[data-page="home"] .hero__animate--2 { animation-delay: 0.14s !important; }
  body[data-page="home"] .hero__animate--3 { animation-delay: 0.22s !important; }
  body[data-page="home"] .hero__animate--4 { animation-delay: 0.3s !important; }

  body[data-page="home"] .hero__bar {
    animation: hero-enter 0.9s var(--ease-editorial) 0.42s backwards !important;
  }

  body[data-page="home"] [data-reveal] {
    opacity: 0 !important;
    transform: translateY(1.25rem) !important;
    transition:
      opacity 0.75s var(--ease-editorial),
      transform 0.75s var(--ease-editorial) !important;
  }

  body[data-page="home"] [data-reveal].is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* ─── Hero — construction photography ─── */

body[data-page="home"] .hero--photo .hero__media {
  will-change: transform;
}

body[data-page="home"] .hero--photo .hero__headline {
  font-size: clamp(2.25rem, 8.5vw, 3.125rem);
  line-height: 1.02;
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.18);
}

@media (min-width: 48rem) {
  body[data-page="home"] .hero--photo .hero__headline {
    font-size: clamp(2.75rem, 4.2vw + 1rem, 5.25rem);
  }
}

body[data-page="home"] .hero--photo .hero__subheadline {
  font-size: clamp(1.0625rem, 3.5vw, 1.3125rem);
  line-height: 1.55;
  max-width: 34ch;
  text-shadow: 0 1px 16px rgb(0 0 0 / 0.14);
}

body[data-page="home"] .hero--photo .hero__copy {
  padding-block: var(--space-2);
}

@media (min-width: 48rem) {
  body[data-page="home"] .hero--photo .hero__copy {
    padding-right: clamp(var(--space-8), 18vw, var(--space-24));
  }
}

/* Transparent header over bright hero — readable nav with subtle shadow */

body[data-page="home"] .site-header:not(.is-scrolled):not(.has-mega-open) .site-header__logo--on-hero,
body[data-page="home"] .site-header:not(.is-scrolled):not(.has-mega-open) .site-nav__link,
body[data-page="home"] .site-header:not(.is-scrolled):not(.has-mega-open) .site-nav__trigger,
body[data-page="home"] .site-header:not(.is-scrolled):not(.has-mega-open) .site-header__toggle {
  color: var(--color-text-inverse);
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.35);
}

body[data-page="home"] .site-header:not(.is-scrolled):not(.has-mega-open) .site-header__actions .btn--primary {
  background-color: rgb(255 255 255 / 0.94);
  color: var(--primitive-navy-900);
  border-color: transparent;
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.12);
}

body[data-page="home"] .site-header:not(.is-scrolled) .site-header__trust-inner {
  color: rgb(255 255 255 / 0.88);
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.3);
}

/* ─── Section rhythm ─── */

body[data-page="home"] .section {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
}

body[data-page="home"] .section--compact {
  padding-block: clamp(var(--space-10), 5vw, var(--space-16));
}

body[data-page="home"] .home-section-header {
  max-width: 44rem;
  margin-bottom: clamp(var(--space-12), 6vw, var(--space-20));
}

body[data-page="home"] .home-section-header .text-heading-xl {
  font-size: clamp(1.875rem, 5.5vw, 3rem);
  letter-spacing: var(--letter-spacing-tight);
}

/* ─── Trust bar ─── */

body[data-page="home"] .confidence {
  padding-block: clamp(var(--space-8), 4vw, var(--space-12));
  background: var(--primitive-navy-900);
  border-block: none;
  color: var(--color-text-inverse);
}

body[data-page="home"] .confidence.section--compact {
  padding-block: clamp(var(--space-8), 4vw, var(--space-12));
}

body[data-page="home"] .confidence .text-overline {
  color: var(--primitive-gold-400);
}

body[data-page="home"] .confidence .text-heading-lg {
  color: var(--color-text-inverse);
}

body[data-page="home"] .confidence__value {
  font-family: var(--font-family-display);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  color: var(--color-text-inverse);
  line-height: 1;
}

body[data-page="home"] .confidence__label {
  color: var(--primitive-sand-300);
}

body[data-page="home"] .confidence__credentials span {
  color: var(--primitive-sand-200);
  border-color: rgb(255 255 255 / 0.15);
}

body[data-page="home"] .confidence__note {
  color: var(--primitive-stone-500);
  max-width: 32rem;
  margin-inline: auto;
  text-align: center;
}

@media (max-width: 47.99rem) {
  body[data-page="home"] .confidence__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  body[data-page="home"] .confidence__header {
    margin-bottom: var(--space-8);
  }

  body[data-page="home"] .confidence__value {
    font-size: 1.5rem;
  }

  body[data-page="home"] .confidence__label {
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
  }

  body[data-page="home"] .confidence__credentials {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgb(255 255 255 / 0.1);
  }
}

/* ─── Divisions — editorial cards ─── */

body[data-page="home"] .division-card {
  border: 1px solid var(--color-border-subtle);
  box-shadow: none;
  border-radius: var(--radius-md);
}

body[data-page="home"] .division-card:hover {
  box-shadow: 0 12px 40px rgb(10 22 40 / 0.08);
}

body[data-page="home"] .division-card__media {
  aspect-ratio: 5 / 4;
  overflow: hidden;
}

body[data-page="home"] .division-card__media .media-ph {
  transition: transform 1.2s var(--ease-editorial);
}

@media (prefers-reduced-motion: no-preference) {
  body[data-page="home"] .division-card:hover .division-card__media .media-ph {
    transform: scale(1.04);
  }
}

body[data-page="home"] .division-card__title {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
}

/* ─── Featured projects — editorial grid ─── */

body[data-page="home"] .section--cinematic {
  background: var(--primitive-sand-100);
}

body[data-page="home"] .featured-card {
  border: 1px solid var(--color-border-subtle);
  box-shadow: none;
  border-radius: var(--radius-md);
}

body[data-page="home"] .featured-card:hover {
  box-shadow: 0 16px 48px rgb(10 22 40 / 0.1);
}

body[data-page="home"] .featured-card__body {
  padding: var(--space-5) var(--space-6) var(--space-6);
}

body[data-page="home"] .featured-card__media {
  overflow: hidden;
}

body[data-page="home"] .featured-card__media .media-ph {
  transition: transform 1.4s var(--ease-editorial);
}

@media (prefers-reduced-motion: no-preference) and (min-width: 48rem) {
  body[data-page="home"] .featured-card:hover .featured-card__media .media-ph {
    transform: scale(1.05);
  }
}

body[data-page="home"] .swipe-hint {
  display: block;
}

@media (min-width: 48rem) {
  body[data-page="home"] .swipe-hint {
    display: none;
  }
}

@media (min-width: 64rem) {
  body[data-page="home"] .featured-grid {
    gap: var(--space-5);
    grid-template-rows: auto auto auto;
  }

  body[data-page="home"] .featured-card:nth-child(5) {
    grid-column: 1 / 7;
    grid-row: 3;
  }

  body[data-page="home"] .featured-card:nth-child(6) {
    grid-column: 7 / 13;
    grid-row: 3;
  }

  body[data-page="home"] .featured-card:nth-child(5) .featured-card__media,
  body[data-page="home"] .featured-card:nth-child(6) .featured-card__media {
    aspect-ratio: 21 / 9;
  }
}

/* ─── Pillars — spacious editorial ─── */

body[data-page="home"] .pillar {
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
}

body[data-page="home"] .pillar__number {
  font-size: clamp(2rem, 4vw, 2.75rem);
  opacity: 0.35;
}

/* ─── AI Designer teaser ─── */

body[data-page="home"] .ai-designer-teaser {
  border-block: none;
}

body[data-page="home"] .dream-disclaimer {
  margin-block: var(--space-6);
}

body[data-page="home"] .ai-designer-teaser__visual {
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-md);
  background:
    linear-gradient(155deg, var(--primitive-navy-900), var(--primitive-ocean-800) 50%, var(--primitive-navy-800));
}

body[data-page="home"] .ai-designer-teaser__visual-inner {
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  padding: var(--space-8);
}

body[data-page="home"] .ai-designer-teaser__visual-project {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  color: var(--color-text-inverse);
  margin-top: var(--space-2);
}

/* ─── Eval mock — device frame ─── */

body[data-page="home"] .eval-preview__mock {
  border-radius: var(--radius-md);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.6) inset,
    0 32px 64px rgb(10 22 40 / 0.12);
}

/* ─── Proof cards ─── */

body[data-page="home"] .proof-card {
  box-shadow: none;
}

/* ─── Knowledge cards ─── */

body[data-page="home"] .knowledge-card {
  border-radius: var(--radius-md);
  transition: border-color var(--duration-normal) var(--ease-default);
}

body[data-page="home"] .knowledge-card:hover {
  border-color: var(--color-border-default);
}

/* ─── Final CTA ─── */

body[data-page="home"] .cta-final {
  padding-block: clamp(var(--space-20), 10vw, var(--space-24));
}

body[data-page="home"] .cta-final .text-heading-xl {
  font-size: clamp(2rem, 5vw, 3.25rem);
}

/* ─── Premium footer on home ─── */

body[data-page="home"] .site-footer {
  padding-block: clamp(var(--space-16), 6vw, var(--space-20)) var(--space-10);
}

body[data-page="home"] .site-footer__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
  font-size: var(--font-size-xs);
  color: var(--primitive-stone-500);
}

body[data-page="home"] .site-footer__credentials span:not(:last-child)::after {
  content: "·";
  margin-left: var(--space-4);
  opacity: 0.5;
}

@media (min-width: 48rem) {
  body[data-page="home"] .site-footer__grid--premium {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-10);
  }
}