/*
  The Lawneds, layout landmarks
  Header, mobile drawer, footer.

  These are NOT components and are deliberately not in components.css. Brand
  system 11.0 fixes the canonical 22, and section 12.1 lists header, nav, main
  and footer as landmarks: "semantic, not divs". Same distinction as `card`
  being a surface. Do not add anything here that belongs in the 22.

  Authority: information architecture 0.1, 0.2, 0.3. Brand system 3, 4.3, 12.1.
*/

/* ==========================================================================
   Header (information architecture 0.1)
   Sticky. Transparent over a hero, solid white with a hairline and small
   shadow after ~80px of scroll. js/nav.js adds .is-scrolled.
   ========================================================================== */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 80;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-nav) var(--ease),
    border-color var(--dur-nav) var(--ease),
    box-shadow var(--dur-nav) var(--ease);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
  min-height: 80px;
}

/* Scrolled, and the default on any page without a hero. */
.site-header.is-scrolled,
.site-header--solid {
  background: var(--white);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-header);
}

/* Over a hero the logo and nav are reversed. The text wordmark swaps by colour
   alone, so there is no second file to preload and nothing to flash
   (brand system 3.1 warns about exactly that with drawn variants). */
.site-header:not(.is-scrolled):not(.site-header--solid) .logo { color: var(--white); }
.site-header:not(.is-scrolled):not(.site-header--solid) .logo__the { color: var(--accent-light); }
.site-header:not(.is-scrolled):not(.site-header--solid) .nav__link { color: var(--white); }
.site-header:not(.is-scrolled):not(.site-header--solid) .nav__toggle { color: var(--white); }

/* ---------- Desktop nav ---------- */

.nav {
  display: none;
  align-items: center;
  gap: var(--space-32);
}
/* Collapses at 1024px, NOT 768px: six items plus a CTA will not fit at 900px,
   and discovering that in QA is avoidable (information architecture 0.1). */
@media (min-width: 1024px) { .nav { display: flex; } }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  transition: color var(--dur-link) var(--ease);
}

/* Active: emerald underline, 2px, offset 6px (information architecture 0.1).
   Drawn with a pseudo element rather than text-decoration so the offset is
   exact and it can animate independently. */
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(50% - 0.7em - 6px);
  height: 2px;
  background: var(--accent-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-link) var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current='page']::after { transform: scaleX(1); }

/* On the transparent header the underline must not be accent-strong: it is
   2.01:1 on navy and on a dark hero image. White carries it. */
.site-header:not(.is-scrolled):not(.site-header--solid) .nav__link::after {
  background: var(--white);
}

/* ---------- Hamburger ---------- */

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--navy);
  border-radius: var(--radius-sm);
}
@media (min-width: 1024px) { .nav__toggle { display: none; } }
.nav__toggle .icon { color: currentColor; }

/* ==========================================================================
   Mobile drawer (information architecture 0.2)
   Full height, navy, white text. Focus trap, Escape closes, aria-expanded on
   the toggle, focus returns to the toggle on close (brand system 12.1).
   Nav items 20px, 56px tap targets. CTA pinned at the bottom.
   ========================================================================== */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--navy);
  color: var(--white);
  padding: var(--space-24);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--dur-nav) var(--ease),
    visibility 0s linear var(--dur-nav);
}
.drawer[data-open='true'] {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform var(--dur-nav) var(--ease),
    visibility 0s;
}
@media (min-width: 1024px) { .drawer { display: none; } }

/* Reduced motion: appear, do not slide. The global rule in base.css already
   flattens the duration; visibility must not lag behind it. */
@media (prefers-reduced-motion: reduce) {
  .drawer { transition: none; }
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  margin-bottom: var(--space-32);
}
.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--white);
  border-radius: var(--radius-sm);
}
.drawer__close .icon { color: currentColor; }

.drawer__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.drawer__link {
  display: flex;
  align-items: center;
  min-height: 56px;         /* generous tap target per 0.2 */
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 12%);
}
.drawer__link[aria-current='page'] { color: var(--accent-light); }

.drawer__cta { margin-top: var(--space-32); }
.drawer__cta .btn { width: 100%; }

/* Scroll lock while the drawer is open. Set by js/nav.js. */
body.has-drawer-open { overflow: hidden; }

/* ==========================================================================
   Footer (information architecture 0.3)
   Navy, white text, three columns plus a legal bar.
   Slate is 1.74:1 on navy and is NEVER type here (brand system 4.3 rule 3).
   Links are --accent-light at 5.14:1, never --accent at 2.73:1 (rule 4).
   ========================================================================== */

.site-footer {
  background: var(--navy);
  color: rgb(255 255 255 / 90%);
  padding-top: var(--space-64);
}
@media (min-width: 1024px) { .site-footer { padding-top: var(--space-96); } }

.site-footer h2, .site-footer h3 { color: var(--white); }

.site-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
  padding-bottom: var(--space-64);
}
@media (min-width: 640px)  { .site-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .site-footer__cols { grid-template-columns: 2fr 1fr 1fr; gap: var(--space-64); } }

.site-footer__tagline {
  margin-top: var(--space-16);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--white);
  max-width: 24ch;
}
.site-footer__descriptor {
  margin-top: var(--space-16);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  color: var(--accent-light);
}
.site-footer p { font-size: var(--fs-small); max-width: 46ch; }
.site-footer__blurb { margin-top: var(--space-16); }

.site-footer__heading {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: var(--space-24);
}

/* Baseline for every link in the footer, before the per component rules below
   override it. Without this a bare link, such as "Connect on LinkedIn" which
   sits in a plain paragraph rather than in one of the lists, inherits the
   inline link colour --accent-strong. That is 2.01:1 on navy and fails 1.4.3 AA.
   It was failing, and it was found by scanning rather than by reading.
   Standing rule 4: footer links are --accent-light, 5.14:1 on navy. */
.site-footer a { color: var(--accent-light); }
.site-footer .logo { color: inherit; }

.site-footer__list { list-style: none; margin: 0; padding: 0; }
/* Direct children only. Unscoped, this also spaced the Solutions sublist at the
   top level's rhythm, which is half the reason the children did not read as
   children. */
.site-footer__list > li + li { margin-top: var(--space-8); }
.site-footer__list a,
.site-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 44px;
  font-size: var(--fs-small);
  color: var(--accent-light);     /* 5.14:1 on navy */
  text-decoration: none;
}
.site-footer__list a:hover,
.site-footer__contact a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Solution children, indented one level (information architecture 0.3).
   The full sector list is deliberately NOT repeated here: seven more links adds
   nothing and dilutes the footer's link equity. */
/* Solution children: a bulleted submenu under Solutions.

   A 16px indent alone did not read as a submenu, for two reasons that compounded:
   the children inherit the 44px touch target from the rule above, and the
   unscoped `li + li` gave them the top level's 8px gap as well. Same size rhythm,
   same spacing, 16px further right. That reads as a flat list someone nudged.

   The bullet is DRAWN, not a ::marker and not a glyph, for two reasons:

     - These links are inline-flex at a 44px minimum height. A native ::marker
       aligns to the top of that 44px line box, not to the centre of the text, so
       it would sit visibly high. As a flex item the dot centres on the label
       whatever the target height.
     - `content: ''` with a background is silent. A "•" in generated content is
       announced by some screen readers, which would put a bullet character into
       the accessible name of every child link. The nesting is already real markup
       (a <ul> inside the parent <li>), so the dot is purely visual and should
       stay that way.

   4px, accent-light: the navy-safe emerald at 5.14:1, tying the marker to the
   parent link colour. A single brand-coloured dot is a list marker, not one of
   the "colourful icons" section 1.4 bans. */
.site-footer__sublist {
  list-style: none;
  margin: var(--space-4) 0 0 0;
  padding: 0 0 0 var(--space-16);
}
.site-footer__sublist li {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.site-footer__sublist li::before {
  content: '';
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-light);
  transition: background-color var(--dur-link) var(--ease);
}
.site-footer__sublist li:hover::before { background: var(--white); }

/* No inter-item gap: the 44px target already spaces them, and removing the extra
   8px is what binds the three into one group. */
.site-footer__sublist li + li { margin-top: 0; }

/* Children are white at 75 per cent (7.25:1), a step below the parent's
   accent-light. Colour separates them from the top level; the bullet and the
   indent say what they are. Lifting to full white on hover is the only state,
   at the 150ms link duration (section 10.2). */
.site-footer__sublist a {
  font-size: var(--fs-caption);
  color: rgb(255 255 255 / 75%);
  transition: color var(--dur-link) var(--ease);
}
.site-footer__sublist a:hover { color: var(--white); }   /* 11.60:1 */

.site-footer__contact { list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); }
.site-footer__contact li { display: flex; align-items: flex-start; gap: var(--space-8); }
.site-footer__contact li + li { margin-top: var(--space-8); }
.site-footer__contact .icon { color: var(--accent-light); margin-top: 10px; }

/* ---------- Legal bar ---------- */

.site-footer__legal {
  background: var(--navy-deep);
  padding-block: var(--space-24);
}
/* The legal bar carries the company disclosure and the build credit only: the
   page links moved up into the Other Links column. With nothing to sit beside,
   it runs the full width and centres, rather than being pinned left against a
   list on the right. */
.site-footer__legal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
}
.site-footer__legal p { font-size: var(--fs-caption); color: rgb(255 255 255 / 75%); margin: 0; }

/* The disclosure is meant to span, so the 46ch cap that .site-footer p puts on
   every paragraph in the footer has to be lifted here explicitly. Without this
   line it silently stays narrow and the centring looks like a bug.
   It still never drops below --fs-caption, 14px, the floor for this bar.
   text-wrap: balance evens the wrapped lines rather than orphaning a word. */
.site-footer__legal .site-footer__disclosure {
  max-width: none;
  text-wrap: balance;
}
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--space-24); list-style: none; margin: 0; padding: 0; }
.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-caption);
  color: var(--accent-light);
  text-decoration: none;
}
.site-footer__legal a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Page hero, compact (used by every page except Home)
   Navy, no image, or a subtle image at low opacity. Sits under the fixed
   header, so it carries the header's height as top padding.
   ========================================================================== */

.page-hero {
  background: var(--navy);
  color: var(--white);
  padding-top: calc(80px + var(--space-64));
  padding-bottom: var(--space-64);
}
@media (min-width: 1024px) {
  .page-hero { padding-top: calc(80px + var(--space-96)); padding-bottom: var(--space-96); }
}
.page-hero h1 { color: var(--white); }
.page-hero__sub {
  margin-top: var(--space-24);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: rgb(255 255 255 / 90%);
  max-width: 52ch;
}
.page-hero .breadcrumb { margin-bottom: var(--space-32); }
.page-hero .breadcrumb li,
.page-hero .breadcrumb a { color: rgb(255 255 255 / 75%); }
.page-hero .breadcrumb [aria-current='page'] { color: var(--white); }
.page-hero .breadcrumb .icon { color: rgb(255 255 255 / 40%); }

/* The homepage hero is full bleed and carries the header transparently. */
.hero--home {
  display: flex;
  align-items: center;
  min-height: 78vh;
  padding-top: calc(80px + var(--space-64));
  padding-bottom: var(--space-64);
}