/* ==========================================================================
   layout.css — containers, section rhythm, grids, page-level composition.
   Only two media queries exist in this project, both declared here:
     48rem (768px) — mobile nav gives way to the desktop bar
     64rem (1024px) — hero goes two-column; comparison table unwraps
   Everything else reflows with auto-fit grids and clamp().
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

/* ------------------------------------------------------------- SECTIONS -- */

.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--surface);
  color: var(--fg);
}
.section--tight { padding-block: calc(var(--section-y) * 0.62); }
.section--alt { --surface: var(--paper-2); }

/* A hairline between two same-coloured sections, so the rhythm reads without
   a heavy divider. */
.section--ruled { border-top: 1px solid var(--hairline); }

.section-head {
  display: grid;
  gap: var(--sp-4);
  max-width: var(--measure);
  margin-bottom: var(--sp-8);
}
.section-head__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--fg-2);
  max-width: var(--measure-tight);
}

/* --------------------------------------------------------------- HEADER -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  /* Transparent over the paper hero, then a paper background with a hairline
     once scrolled (components.css, .is-scrolled). Ink on paper in BOTH
     states, so the brand never renders light-on-light. */
  background: transparent;
  transition: background var(--dur-2) var(--ease-inout),
              box-shadow var(--dur-2) var(--ease-inout),
              border-color var(--dur-2) var(--ease-inout);
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
}
.site-header__nav { display: none; }
.site-header__actions { display: flex; align-items: center; gap: var(--sp-3); }

@media (min-width: 48rem) {
  .site-header { height: var(--header-h-lg); }
  .site-header__nav { display: flex; align-items: center; gap: var(--sp-5); }
  /* .nav-toggle is hidden in components.css, which loads later. */
}

/* ----------------------------------------------------------------- HERO --
   Paper surface since V4 (ADR-012). The header sits ABOVE the hero in normal
   flow — no negative-margin pull-up. The old dark hero needed one so the
   header could overlay it; V4 kept the pull-up but shrank the padding, which
   slid the eyebrow under the header. On paper the overlay buys nothing.

   Mobile order: copy (headline, lead, CTAs, reassurance) -> product.
   Desktop:      copy | product. The sector strip closes the hero.          */

.hero {
  position: relative;
  padding-block: var(--sp-5) 0;
  /* One soft key light from the upper right, the same direction as the light
     in the photograph. Ends on plain paper so there is no seam below. */
  background:
    radial-gradient(70% 60% at 78% 18%, var(--paper-hi) 0%, transparent 70%),
    var(--paper);
  overflow: hidden;
  isolation: isolate;
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'copy' 'art';
  row-gap: var(--sp-5);
  padding-bottom: var(--sp-6);
}
.hero__copy     { grid-area: copy; display: grid; justify-items: start; gap: var(--sp-4); min-width: 0; }
.hero__art      { grid-area: art; min-width: 0; }
.hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--ink-2);
  max-width: var(--measure-tight);
}
/* Phones: both CTAs full width and stacked, primary first. Side by side they
   only fit by shrinking the label below a readable size (V4 used 12px). */
.hero__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  width: 100%;
  margin-top: var(--sp-2);
}

@media (min-width: 30rem) {
  .hero__actions { display: flex; flex-wrap: wrap; width: auto; }
}

@media (min-width: 64rem) {
  .hero { padding-block: var(--sp-7) 0; }
  .hero__inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-areas: 'copy art';
    column-gap: var(--sp-7);
    align-items: center;
    padding-bottom: var(--sp-8);
  }
  .hero__copy { gap: var(--sp-5); }
  /* 64-80rem: the copy column cannot hold both CTAs on one row, so they
     stack at one shared width instead of wrapping raggedly. */
  .hero__actions { display: grid; grid-template-columns: max-content; }
}
@media (min-width: 80rem) {
  .hero__actions { display: flex; }
  .site-header__nav { gap: var(--sp-6); }
}

/* ---------------------------------------------------------------- GRIDS --
   auto-fit + minmax means these need no breakpoints of their own. */

.grid-products {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}

/* Industries deliberately do NOT use a card grid — the brief forbids
   repeating identical card grids down the page. This is an editorial
   two-column list separated by hairlines. */
/* Hairline dividers drawn by a 1px gap over a hairline-coloured ground, so
   they are correct at ANY column count. (The previous odd/even border rules
   assumed two columns while auto-fit produced three at 1240px: ragged grid.) */
.industry-list {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.grid-custom {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.grid-steps {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  counter-reset: step;
}

.grid-trust {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/* --------------------------------------------------------- SECTION CTAs --
   Deliberately four different shapes so no two consecutive CTAs look the
   same (docs/UX-STRATEGY.md §2). */

.section-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--hairline);
}
.section-cta__note {
  font-size: var(--fs-sm);
  color: var(--fg-3);
  max-width: 44ch;
}
.section-cta--quiet {
  justify-content: flex-start;
  border-top: 0;
  padding-top: 0;
  margin-top: var(--sp-6);
}

/* --------------------------------------------------------------- FOOTER -- */

.site-footer {
  background: var(--studio);
  color: var(--on-studio-2);
  padding-block: var(--sp-8) var(--sp-6);
  font-size: var(--fs-sm);
}
.site-footer__top {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--rule-dark);
}
.site-footer__brand { display: grid; gap: var(--sp-3); align-content: start; }
.site-footer__col { display: grid; gap: var(--sp-3); align-content: start; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-5);
  font-size: var(--fs-xs);
}

/* ------------------------------------------------ FLOATING CONTACT (all sizes)
   Exactly one floating affordance, on desktop and mobile. It is suppressed
   rather than hidden, so it animates away instead of popping. contact.js owns
   the suppression reasons: hero in view, quote form in view, drawer open,
   deep in the footer. */

.sticky-contact {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: var(--z-fab);
  transition: transform var(--dur-3) var(--ease-out),
              opacity var(--dur-2) var(--ease-inout);
}
.sticky-contact[data-suppressed='true'] {
  transform: translateY(140%) scale(.9);
  opacity: 0;
  pointer-events: none;
}