/* ==========================================================================
   LAYOUT & PAGE SHELL — SHARED, DO NOT EDIT IN TASK FILES
   Container, section rhythm, section headers, dark closing block, sticky
   header + mobile nav panel, and the footer. Section-specific styling lives
   in styles/main.css (t1); JS-driven overlay UI lives in
   styles/interactive.css (t2).
   ========================================================================== */

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container-narrow { max-width: var(--container-narrow); }

/* ---------- Section rhythm ----------
   Every top-level <section> gets the same vertical rhythm so blocks can be
   reordered or removed without disturbing spacing. */
main > section {
  padding-block: var(--section-y);
  scroll-margin-top: var(--header-h);
}

/* Alternating tone helper for adjacent light sections */
.section-tint { background: var(--color-surface-alt); }

/* Hairline between two same-tone neighbours so blocks stay legible if one
   of the optional sections (process / clients / testimonials) is removed. */
.section-tint + .section-tint { border-top: 1px solid var(--color-border); }

/* Dark closing block (contact) */
.dark-section {
  background: var(--color-ink);
  color: var(--color-ink-text);
}
.dark-section a { color: var(--color-accent-on-dark); }
.dark-section a:hover { color: var(--color-accent-on-dark); }

/* ---------- Section header block ---------- */
.section-head {
  max-width: 40rem;
  margin-bottom: var(--space-7);
}
.section-head h2 { font-size: var(--fs-h2); }
.section-head .lead { margin-top: var(--space-4); }

/* Opt-in centred variant for the short sections (clients, testimonials) */
.section-head.is-centered {
  margin-inline: auto;
  text-align: center;
}

/* Generic two-column split used by hero/about/contact at wide sizes */
.split {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 60em) {
  .split { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); }
}

/* ==========================================================================
   STICKY HEADER + NAVIGATION (shell)
   Markup contract — see docs/markup-contract.md:
     header.site-header > .container.header-inner
       a.wordmark, button.nav-toggle[aria-expanded][aria-controls],
       nav#primary-navigation.primary-nav > ul.nav-list
   JS toggles .is-scrolled on .site-header, .is-open on .primary-nav,
   and aria-current="true" on the active nav link.
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-header);
  border-bottom-color: var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--color-text);
}
.wordmark:hover { color: var(--color-accent); }
.wordmark small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-top: 2px;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.nav-toggle:hover { background: var(--color-surface-alt); }
.nav-toggle-icon { position: relative; width: 1.25rem; height: 1px; background: var(--color-text); }
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-text);
  transition: transform var(--transition-fast);
}
.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-icon::before,
  .nav-toggle-icon::after { transition: none; }
}

/* Mobile panel — anchored to the bottom edge of the sticky header */
.primary-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-nav-panel);
  display: none;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  padding: var(--space-3) var(--container-pad) var(--space-6);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.primary-nav.is-open { display: block; }

.nav-list { display: flex; flex-direction: column; gap: 0; }
.nav-list a {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  color: var(--color-text);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border);
}
.nav-list a:hover,
.nav-list a[aria-current="true"] { color: var(--color-accent); }

@media (min-width: 60em) {
  .nav-toggle { display: none; }
  .primary-nav {
    position: static;
    display: block;
    max-height: none;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .nav-list { flex-direction: row; gap: var(--space-6); }
  .nav-list a {
    min-height: 0;
    padding: var(--space-2) 0;
    border-bottom: 1px solid transparent;
  }
  .nav-list a[aria-current="true"] { border-bottom-color: var(--color-accent); }
}

/* ==========================================================================
   FOOTER (shell)
   Markup contract: footer.site-footer > .container.footer-inner
     p (copyright, with #current-year span), nav > ul.footer-links, a.back-to-top
   ========================================================================== */
.site-footer {
  background: var(--color-ink);
  color: var(--color-ink-text-muted);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-ink-border);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  font-size: var(--fs-small);
}
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); }
.footer-links a,
.back-to-top { color: var(--color-ink-text-muted); }
.footer-links a:hover,
.back-to-top:hover { color: var(--color-accent-on-dark); }
.site-footer :focus-visible { outline-color: var(--color-focus-on-dark); }

@media (min-width: 48em) {
  .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; }
  .footer-links { justify-content: flex-start; }
}