/* ==========================================================================
   Sections: styles specific to individual page sections
   Generic, reusable pieces belong in components.css — this file is for
   one-off composition.
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: center;
  padding-block: var(--space-20) var(--section-padding);
}

/* A soft off-white wash behind the hero so it separates from the sections
   below without a hard rule. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    180deg,
    var(--color-bg-subtle) 0%,
    var(--color-bg) 100%
  );
}

/* Two overlapping accent glows, kept very low contrast. Decorative only —
   if color-mix is unsupported the layer simply doesn't paint. */
.hero::after {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      42rem 28rem at 12% 8%,
      color-mix(in oklab, var(--color-accent) 14%, transparent) 0%,
      transparent 70%
    ),
    radial-gradient(
      36rem 24rem at 88% 0%,
      color-mix(in oklab, var(--color-accent) 9%, transparent) 0%,
      transparent 68%
    );
}

[data-theme="dark"] .hero::after {
  background:
    radial-gradient(
      42rem 28rem at 12% 8%,
      color-mix(in oklab, var(--color-accent) 20%, transparent) 0%,
      transparent 70%
    ),
    radial-gradient(
      36rem 24rem at 88% 0%,
      color-mix(in oklab, var(--color-accent) 12%, transparent) 0%,
      transparent 68%
    );
}

/* Single column until there's genuinely room for the panel beside the copy.
   Below that the text keeps the full width to itself. */
.hero__grid {
  display: grid;
  align-items: center;
  gap: var(--space-12);
}

/* Two columns only from 1152px up, and weighted toward the copy. Any earlier
   or any more even, and the text column gets narrow enough to break the
   headline onto a third line. */
@media (min-width: 72rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: var(--space-12);
  }
}

.hero__inner {
  max-width: 54rem;
}

.hero__title {
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
}

.hero__lead {
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  /* Held short of the headline so the two edges don't line up rigidly. */
  max-width: 40rem;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-10);
}

/* Mobile-first: the hero is content-sized on small screens, where filling the
   viewport would only push the headline around. It takes a full screen from
   tablet up. */
@media (min-width: 48rem) {
  .hero {
    min-height: calc(100svh - var(--nav-height));
    padding-block: var(--space-24) var(--section-padding);
  }

  .hero__actions {
    gap: var(--space-4);
  }
}

/* The button goes full-width while the screen is too narrow to sit it
   comfortably inline. */
@media (max-width: 26rem) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }
}

/* ---- Hero spec panel ------------------------------------------------------
   Unlike a decorative graphic, this is content, so it stays visible at every
   width and simply stacks under the copy on narrow screens. */

.spec-panel {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding-inline: var(--space-6);
  max-width: 26rem;
  margin-inline: auto;
}

.spec-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.spec-panel__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  flex-shrink: 0;
}

.spec-panel__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.spec-panel__rows {
  margin: 0;
}

/* Label above value rather than beside it. Side-by-side leaves the value
   around 230px wide, which wraps these four-item lists to four lines each. */
.spec-panel__row {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.spec-panel__row:last-child {
  border-bottom: none;
}

.spec-panel__label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.spec-panel__value {
  /* Definition lists indent by default. */
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-text);
  text-wrap: pretty;
}

/* The exclusions still need to be legible, but they shouldn't compete with
   the rows describing what you do want. */
.spec-panel__value--muted {
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
}

/* ---- Services: full-width rows -------------------------------------------
   Deliberately not cards. The rows span the container so the section fills
   the page width, and the titles sit high in the type scale to carry the
   hierarchy that a section heading would otherwise provide. */

.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.service-list__item {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--duration-base) var(--ease-out);
}

/* Icon rail, title, then body copy. Single column until there's room for the
   three-track layout to breathe. */
@media (min-width: 52rem) {
  .service-list__item {
    grid-template-columns: auto minmax(11rem, 1fr) minmax(0, 1.6fr);
    gap: var(--space-8);
    align-items: start;
    padding-inline: var(--space-4);
    /* Pulls the row edge-to-edge with the container despite the inline
       padding the hover tint needs. */
    margin-inline: calc(var(--space-4) * -1);
    border-radius: var(--radius-md);
  }

  .service-list__item:hover {
    background-color: var(--color-bg-subtle);
  }
}

.service-list__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background-color: var(--color-accent-soft);
  color: var(--color-accent-text);
  transition: transform var(--duration-base) var(--ease-out);
}

.service-list__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.service-list__item:hover .service-list__icon {
  transform: translateY(-2px);
}

.service-list__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

.service-list__body {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 34rem;
}

/* ---- About: centered statement -------------------------------------------
   A single large passage on a narrow measure. The only centered block on the
   page, which is what keeps it distinct from the rows above and the band
   below. */

.about-statement {
  text-align: center;
}

/* Two weights instead of one big block: the claim carries the emphasis, the
   consequence reads as body copy. Keeps the section calm while the centered
   alignment still sets it apart from the rows above and the band below. */
.about-statement__lead {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text);
  max-width: 34rem;
  margin: var(--space-6) auto 0;
  /* Balanced rather than pretty: a centered block shows an uneven rag badly. */
  text-wrap: balance;
}

.about-statement__body {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 38rem;
  margin: var(--space-5) auto 0;
  text-wrap: balance;
}

/* Centering costs readability once the measure gets narrow, so the statement
   left-aligns on phones. */
@media (max-width: 40rem) {
  .about-statement {
    text-align: left;
  }

  .about-statement__lead,
  .about-statement__body {
    text-wrap: pretty;
  }
}

/* ---- Contact: full-bleed band --------------------------------------------
   The page's one saturated moment. It breaks the container so the color runs
   edge to edge, and carries its own light-on-dark palette in both themes. */

.contact-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-padding);
  background:
    radial-gradient(
      60rem 30rem at 18% 0%,
      rgba(165, 163, 255, 0.35) 0%,
      transparent 62%
    ),
    linear-gradient(135deg, #3a30ad 0%, #4c42d6 100%);
  color: #fff;
}

[data-theme="dark"] .contact-band {
  background:
    radial-gradient(
      60rem 30rem at 18% 0%,
      rgba(132, 130, 255, 0.28) 0%,
      transparent 62%
    ),
    linear-gradient(135deg, #2a2287 0%, #3b32ac 100%);
}

.contact-band__inner {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 52rem) {
  .contact-band__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-12);
  }
}

.contact-band__title {
  font-size: var(--text-4xl);
  color: #fff;
  margin-bottom: var(--space-3);
}

.contact-band__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.82);
  /* Wide enough to hold the sentence on one line at desktop sizes. */
  max-width: 40rem;
}

/* The address is the button label, so it wraps rather than forcing the
   layout wider than the screen. */
.contact-band .btn {
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}

.contact-band__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}