/* ==========================================================================
   Page asset. Not a design token — lives in tokens.css instead — because
   it names a specific piece of art, not a value shared across the system.
   ========================================================================== */
:root {
  --hero-img: url('/img/hero-auto.webp');
}

/* ==========================================================================
   Document & Body Setup
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--cream);
  background-color: var(--page-bg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Header
   ========================================================================== */
header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3);
  background-color: var(--deep-surface);
  border-bottom: 1px solid var(--mid-surface);
}

@media (min-width: 800px) {
  header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo nav"
      "tagline nav";
    align-items: center;
    column-gap: var(--space-3);
    row-gap: 0.25rem;
    padding: var(--space-3) var(--hero-inset);
  }
}

header h1 {
  grid-area: logo;
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--cream);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

#hero-tagline {
  grid-area: tagline;
  font-size: 0.95rem;
  color: var(--light-warm);
  margin: 0;
  line-height: 1.4;
}

.header-controls {
  grid-area: nav;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

#industries-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

#theme-toggle {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  border: 1px solid var(--warm-mid);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#theme-toggle:hover,
#theme-toggle:focus-visible {
  background-color: var(--mid-surface);
}

#industries-nav a {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius);
  color: var(--cream);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#industries-nav a:hover,
#industries-nav a:focus-visible {
  background-color: var(--mid-surface);
  color: var(--cream);
}

#industries-nav a[aria-current="page"] {
  background-color: var(--mid-surface);
  border-color: var(--warm-mid);
  color: var(--cream);
  font-weight: 600;
  box-shadow: var(--shadow-nav-current);
}

/* ==========================================================================
   Main & Hero

   Sections are targeted by what they CONTAIN, not by position. The shells
   currently hold two sections (hero, survey); the survey is going away in the
   pivot. :has() survives that removal, a reordering, and a future third
   section - :first-of-type/:last-of-type survive none of them, and both would
   match the single remaining section once the survey goes.
   ========================================================================== */
main {
  display: block;
  width: 100%;
}

main > section:has(#hero-h2) {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--page-bg);
  border-bottom: 1px solid var(--mid-surface);
}

main > section:has(#hero-h2)::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 2.294;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--mid-surface);
  margin-bottom: var(--space-3);
}

#hero-h2 {
  text-wrap: balance;
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.25;
  /* Fixed, not the semantic --cream alias: the hero photo is dark in both
     themes, so its copy must stay cream in both themes too (readme.md,
     VISUAL FOUNDATIONS; matches design-system/components/layout/Hero.jsx). */
  color: var(--color-ramp-cream);
  margin: 0 auto var(--space-2) auto;
  padding: 0 var(--space-3);
  width: 100%;
  max-width: 68ch;
  letter-spacing: -0.01em;
}

#hero-pitch {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-ramp-cream);
  margin: 0 auto var(--space-5) auto;
  padding: 0 var(--space-3);
  width: 100%;
  max-width: 68ch;
}

@media (min-width: 800px) {
  main > section:has(#hero-h2) {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    aspect-ratio: 2.294;
    min-height: 300px;
    max-height: 560px;
    overflow: hidden;
    padding: var(--space-5) var(--hero-inset) var(--space-6);
    border-bottom: 1px solid var(--mid-surface);
  }

  main > section:has(#hero-h2)::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    margin-bottom: 0;
    border-bottom: none;
    z-index: 0;
    background-image:
      linear-gradient(to right,
        rgb(var(--color-scrim-hero) / 0.55) 0%,
        rgb(var(--color-scrim-hero) / 0.45) 28%,
        rgb(var(--color-scrim-hero) / 0.15) 38%,
        rgb(var(--color-scrim-hero) / 0) 48%),
      var(--hero-img);
    background-position: center center, right center;
    background-size: cover, cover;
  }

  #hero-h2 {
    position: relative;
    z-index: 1;
    margin: 0 0 var(--space-3) 0;
    padding: 0;
    max-width: calc(var(--hero-panel-edge) - var(--hero-inset) - var(--hero-gutter));
    font-size: clamp(2rem, 1.25rem + 1.55vw, 3rem);
  }

  #hero-pitch {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    max-width: calc(var(--hero-panel-edge) - var(--hero-inset) - var(--hero-gutter));
    font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.25rem);
  }
}

/* ==========================================================================
   Survey Section & Conversion Form

   Present because the shells still contain the form. When the survey pivot
   removes it from the shells and the data, this whole block becomes dead and
   should be deleted - the :has(form) scoping means it simply stops matching
   rather than leaking onto whatever section is left.
   ========================================================================== */
main > section:has(form) {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-3) var(--space-8);
}

#survey-intro {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--cream);
  margin: 0 0 var(--space-3) 0;
  max-width: 68ch;
}

main > section:has(form) form {
  background-color: var(--deep-surface);
  border: 1px solid var(--mid-surface);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (max-width: 600px) {
  main > section:has(form) form {
    padding: var(--space-3) var(--space-2);
    gap: var(--space-2);
  }
}

form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cream);
  cursor: pointer;
}

#survey-question-text {
  font-weight: 600;
  color: var(--cream);
  line-height: 1.5;
}

form input[type="text"],
form input[type="email"] {
  min-height: 48px;
  padding: 0.75rem 1rem;
  background-color: var(--page-bg);
  border: 1px solid var(--mid-surface);
  border-radius: var(--radius);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.4;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

form input:hover {
  border-color: var(--warm-mid);
}

form input:focus-visible {
  outline: 2px solid var(--light-warm);
  outline-offset: 2px;
  border-color: var(--light-warm);
}

form button[type="submit"] {
  align-self: flex-start;
  min-height: 48px;
  padding: 0.85rem 2.5rem;
  background-color: var(--accent);
  color: var(--page-bg);
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  margin-top: var(--space-1);
  transition: background-color 0.2s ease;
}

form button[type="submit"]:hover {
  background-color: #f0b562;
}

@media (max-width: 600px) {
  form button[type="submit"] {
    width: 100%;
    align-self: stretch;
  }
}

/* ==========================================================================
   Focus & Accessibility
   ========================================================================== */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}

/* ==========================================================================
   Footnote — quiet secondary text: legal links, a mention of another page.
   Never the primary CTA on a page; that's what buttons/forms are for.
   ========================================================================== */
.footnote {
  font-size: 0.85rem;
  opacity: 0.75;
}