/* =============================================================================
   design.css
   Page-only styles for /design.html.
   Foundation styles live in /css/style.css — do not duplicate tokens here.
   ============================================================================= */

/* =============================================================================
   1. HERO
   ============================================================================= */
.ds-hero {
  padding-block: calc(var(--nav-h) + clamp(3rem, 6vw, 6rem)) clamp(4rem, 8vw, 8rem);
  background: var(--c-bg);
}

.ds-hero .hero__inner {
  max-width: var(--w-text);
}

.ds-hero h1 {
  max-width: 22ch;
  font-weight: 700;
}

.ds-hero .hero__sub {
  max-width: 56ch;
  margin-top: var(--sp-3);
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--c-ink-2);
}

.ds-hero .hero__actions {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.ds-hero .hero__media {
  margin-top: var(--sp-6);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* =============================================================================
   2. SERVICES SECTION — 3-card grid
   ============================================================================= */
#design-services .section-head h2 {
  max-width: 24ch;
}

/* Slightly tighter h3 for 3-card density */
#design-services .card h3 {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  font-weight: 500;
}

/* Stack the two body paragraphs inside each card with a small gap */
#design-services .card .card__body + .card__body {
  margin-top: var(--sp-2);
}

/* =============================================================================
   3. SERVICE DETAIL SECTIONS — side-by-side content + visual
   ============================================================================= */
.ds-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: center;
}

/* Reversed layout: visual left, content right */
.ds-detail--reverse .ds-detail__content {
  order: 2;
}
.ds-detail--reverse .ds-detail__visual {
  order: 1;
}

.ds-detail__content {
  display: grid;
  gap: var(--sp-3);
}

.ds-detail__content .eyebrow {
  display: block;
}

.ds-detail__content h2 {
  /* Smaller than the global h2 and a wider wrap so these ~48-char headlines
     land on ~2 lines instead of 3. */
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  max-width: 26ch;
}

.ds-detail__content p {
  color: var(--c-ink-2);
  max-width: 56ch;
}

.ds-detail__content p + p {
  margin-top: var(--sp-2);
}

.ds-detail__visual {
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* =============================================================================
   4. CTA BAND — dark, #contact
   ============================================================================= */
#contact.cta-band {
  /* foundation .section--dark sets the background gradient */
}

#contact .cta-band__inner {
  max-width: 680px;
  margin-inline: auto;
  display: grid;
  gap: var(--sp-3);
  justify-items: center;
  text-align: center;
}

#contact .cta-band__inner h2 {
  color: var(--c-on-dark);
}

#contact .cta-band__inner p {
  color: var(--c-on-dark-2);
  max-width: 52ch;
}

/* =============================================================================
   5. RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .ds-detail {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .ds-detail--reverse .ds-detail__content,
  .ds-detail--reverse .ds-detail__visual {
    order: unset;
  }

  .ds-detail--reverse .ds-detail__visual {
    order: -1;
  }
}

@media (max-width: 768px) {
  .ds-hero h1 {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
  }

  #contact .cta-band__inner {
    text-align: left;
    justify-items: start;
  }
}

@media (max-width: 480px) {
  .ds-hero .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* "The definition" inline SVG graphic (Claude Design handoff). Rendered inline
   so the drop-shadow filter + JetBrains Mono / Space Grotesk fonts apply. The
   .mono/.sans classes are scoped here to avoid colliding with anything global. */
.def-graphic {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  aspect-ratio: 540 / 720;
}
.def-graphic svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter:
    drop-shadow(0 22px 38px rgba(74, 155, 209, 0.22))
    drop-shadow(0 8px 14px rgba(15, 23, 42, 0.08));
}
.def-graphic .mono { font-family: 'JetBrains Mono', monospace; }
.def-graphic .sans { font-family: 'Space Grotesk', sans-serif; }

/* Engineering-pipeline crosslink image: 70% + centered on desktop, but full
   width (inside the .container padding) on mobile per design direction. */
.pipeline-graphic {
  display: block;
  width: 70%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--r-lg);
}
@media (max-width: 768px) {
  .pipeline-graphic { width: 100%; }
}