/* ==========================================================================
   Unified Solutions Group, LLC
   Single page site styles. Mobile first. No frameworks, no preprocessors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette */
  --navy: #16283F;
  --navy-deep: #0F1C30;
  --steel: #4677A5;        /* accents and icon strokes only */
  --steel-ink: #35608B;    /* darkened steel, used whenever steel carries text */
  --tint: #E8EEF5;
  --offwhite: #FAFBFC;
  --slate: #2A3542;
  --border: #D9E0E8;
  --white: #FFFFFF;
  --footer-ink: #A8B7C9;

  /* Logomark. Two fills, so the mark can be recoloured for dark grounds
     without needing a second copy of the artwork. */
  --logo-ink: #16283F;
  --logo-accent: #4677A5;

  /* Type */
  --display: "Archivo", Arial, Helvetica, sans-serif;
  --body: "Public Sans", Arial, Helvetica, sans-serif;

  /* Rhythm */
  --gutter: 18px;
  --section-y: 64px;
  --header-h: 62px;

  /* Elevation, used sparingly */
  --shadow-card: 0 1px 2px rgba(22, 40, 63, 0.04);
  --shadow-nav: 0 14px 28px rgba(22, 40, 63, 0.10);
}

@media (min-width: 360px) {
  :root { --gutter: 20px; }
}

@media (min-width: 600px) {
  :root { --gutter: 28px; --section-y: 84px; }
}

@media (min-width: 900px) {
  :root { --gutter: 32px; --section-y: 104px; }
}

@media (min-width: 1000px) {
  :root { --header-h: 74px; }
}

@media (min-width: 1140px) {
  :root { --section-y: 118px; }
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--slate);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.0625rem, 6.4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(1.625rem, 4.2vw, 2.375rem);
  letter-spacing: -0.02em;
}

h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

p { margin: 0; }

ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }

a { color: var(--steel-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }

svg { display: block; }

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

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   3. Focus, skip link, screen reader helpers
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--steel-ink);
  outline-offset: 3px;
  border-radius: 1px;
}

.btn-primary:focus-visible,
.site-footer :focus-visible,
.portrait:focus-visible {
  outline-color: var(--tint);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  background: var(--navy);
  color: var(--white);
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 18px;
  transition: top 120ms ease-out;
}

.skip-link:focus {
  top: 12px;
  color: var(--white);
}

/* --------------------------------------------------------------------------
   4. The logomark
   Sized by width only. The height follows from the 65 by 49 viewBox, so the
   mark can never be stretched by a rounding error.
   -------------------------------------------------------------------------- */

.mark {
  flex: none;
  height: auto;
}

.mark-brand { width: 28px; }

@media (min-width: 360px) { .mark-brand { width: 31px; } }
@media (min-width: 480px) { .mark-brand { width: 34px; } }
@media (min-width: 900px) { .mark-brand { width: 38px; } }

/* Hero accent: the mark blown up as a watermark over the blueprint grid.
   Tinted rather than made transparent, because fading navy and steel together
   collapses them to the same grey and the two tone split is lost. */
.mark-hero { width: 100%; }

/* --------------------------------------------------------------------------
   4b. The list marker: a short vertical rule
   The chevron is reserved for identity. Repeated at text size it stops reading
   as a mark and starts reading as a dropdown caret, so section eyebrows, the
   trust band, and the client list share this instead. It is sized in em, so it
   tracks whatever text it sits beside, and it echoes the hairline rules the
   rest of the page is built from.
   -------------------------------------------------------------------------- */

.eyebrow::before,
.band-list li::before,
.serve-grid li::before {
  content: "";
  flex: none;
  width: 3px;
  height: 0.9em;
  margin-top: 0.24em;
  background: var(--steel);
}

/* --------------------------------------------------------------------------
   5. Typographic components
   -------------------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--steel-ink);
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

@media (min-width: 600px) {
  .eyebrow { font-size: 0.75rem; margin-bottom: 20px; }
}

.lead {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--slate);
  max-width: 60ch;
}

@media (min-width: 600px) {
  .lead { font-size: 1.0625rem; }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out;
}

.btn-primary {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: var(--white);
}

/* The outline is what identifies this control, so it is drawn in navy rather
   than in the hairline colour, which would not reach 3:1 against white. */
.btn-secondary {
  background: var(--white);
  border-color: var(--navy);
  color: var(--navy);
}

.btn-secondary:hover {
  background: var(--tint);
  border-color: var(--navy);
  color: var(--navy);
}

.btn-compact {
  min-height: 42px;
  padding: 10px 18px;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

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

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  text-decoration: none;
}

.brand:hover { color: var(--navy); }

/* The wordmark and the menu button share one row at every width, so the
   sticky header stays a single band. Sized up in steps as room appears. */
.brand-name {
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.15;
  text-transform: uppercase;
}

@media (min-width: 360px) { .brand-name { font-size: 0.8125rem; } }
@media (min-width: 420px) { .brand-name { font-size: 0.875rem; } }
@media (min-width: 480px) { .brand-name { font-size: 0.9375rem; } }

@media (min-width: 900px) {
  .brand { gap: 12px; }
  .brand-name { font-size: 1rem; letter-spacing: 0.06em; }
}

/* Menu toggle. Hidden until JavaScript confirms it can control the panel,
   so the navigation stays reachable if the script never runs. */
.nav-toggle { display: none; }

.js .nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  margin-right: -4px;
  background: none;
  border: 1px solid var(--navy);
  color: var(--navy);
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 140ms ease-out;
}

.js .nav-toggle:hover { background: var(--tint); }

/* On narrow phones the button is bars only. The word stays in the accessibility
   tree, so the button is still announced as "Menu". */
.nav-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 560px) {
  .nav-toggle-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

.nav-toggle-bars {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 16px;
  height: 11px;
}

.nav-toggle-bars span {
  display: block;
  height: 2px;
  background: var(--navy);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0.35; }

/* No JavaScript: links simply wrap onto a second row. */
.primary-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  width: 100%;
  padding-bottom: 14px;
}

.js .primary-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: auto;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-nav);
  padding: 6px var(--gutter) 20px;
}

.js .site-header.is-open .primary-nav { display: flex; }

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 26px;
}

.js .nav-list { flex-direction: column; align-items: stretch; gap: 0; }

.nav-list a {
  display: block;
  color: var(--navy);
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 0;
}

.js .nav-list a {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.nav-list a:hover { color: var(--steel-ink); }

.js .primary-nav .btn { margin-top: 18px; }

/* The inline navigation needs room for four links plus the button beside the
   wordmark. Below 1000px it wrapped onto a second row and doubled the height of
   the sticky header, so the menu button stays in charge until there is space. */
@media (min-width: 1000px) {
  .primary-nav,
  .js .primary-nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    width: auto;
    gap: 30px;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .js .nav-toggle { display: none; }

  .nav-list,
  .js .nav-list {
    flex-direction: row;
    align-items: center;
    gap: 26px;
  }

  .js .nav-list a { padding: 6px 0; border-bottom: 0; }
  .js .primary-nav .btn { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--offwhite);
  border-bottom: 1px solid var(--border);
  padding-block: 56px 60px;
  overflow: hidden;
}

/* Blueprint grid. Two rules, both very low opacity navy, faded at the edges. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(22, 40, 63, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 40, 63, 0.055) 1px, transparent 1px),
    linear-gradient(to right, rgba(22, 40, 63, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 40, 63, 0.028) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.15) 78%, transparent);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.15) 78%, transparent);
}

.hero-inner { position: relative; }

.hero-copy { max-width: 42rem; }

.hero h1 { margin-bottom: 22px; }

.hero .lead { max-width: 54ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero-actions .btn { flex: 1 1 auto; min-width: 200px; }

.hero-accent {
  display: none;
  --logo-ink: #D2DFEC;
  --logo-accent: #E5EDF5;
}

@media (min-width: 600px) {
  .hero { padding-block: 76px 84px; }
  .hero-actions .btn { flex: 0 0 auto; }
}

@media (min-width: 900px) {
  .hero { padding-block: 104px 116px; }

  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 236px;
    align-items: center;
    gap: 48px;
  }

  .hero-accent { display: block; }
}

@media (min-width: 1140px) {
  .hero { padding-block: 118px 122px; }
  .hero-inner { grid-template-columns: minmax(0, 1fr) 288px; gap: 64px; }
}

/* --------------------------------------------------------------------------
   9. Trust band
   -------------------------------------------------------------------------- */

.band {
  background: var(--tint);
  border-bottom: 1px solid var(--border);
}

.band-list {
  display: flex;
  flex-direction: column;
}

.band-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px 0;
  color: var(--navy);
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.45;
  text-transform: uppercase;
}

.band-list li + li { border-top: 1px solid var(--border); }

/* Only lay the band out as one thin row once all three items fit on a
   single line, so it never reads as three ragged wrapped blocks. */
@media (min-width: 1040px) {
  .band-list { flex-direction: row; align-items: stretch; }

  .band-list li {
    flex: 1 1 auto;
    align-items: center;
    padding: 18px 16px;
    font-size: 0.625rem;
    letter-spacing: 0.12em;
  }

  .band-list li:first-child { padding-left: 0; }
  .band-list li:last-child { padding-right: 0; }
  .band-list li + li { border-top: 0; border-left: 1px solid var(--border); }
}

/* --------------------------------------------------------------------------
   10. Sections
   -------------------------------------------------------------------------- */

.section { padding-block: var(--section-y); }
.section-white { background: var(--white); border-bottom: 1px solid var(--border); }
.section-tinted { background: var(--offwhite); border-bottom: 1px solid var(--border); }

.section-head { max-width: 46rem; margin-bottom: 42px; }
.section-head h2 + .lead { margin-top: 20px; }

@media (min-width: 900px) {
  .section-head { margin-bottom: 56px; }
}

/* --------------------------------------------------------------------------
   11. Service cards
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 620px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (min-width: 1000px) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--navy);
  padding: 26px 24px 28px;
  box-shadow: var(--shadow-card);
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

.card:hover {
  border-color: #C6D2DF;
  border-top-color: var(--navy);
  box-shadow: 0 6px 18px rgba(22, 40, 63, 0.07);
}

.card-icon {
  display: block;
  margin-bottom: 20px;
}

.card-icon svg {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.card h3 { margin-bottom: 11px; }

.card p {
  font-size: 0.9375rem;
  line-height: 1.68;
}

@media (min-width: 620px) {
  .card { padding: 28px 26px 30px; }
}

/* --------------------------------------------------------------------------
   12. Who we serve
   -------------------------------------------------------------------------- */

.serve-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border);
}

.serve-grid li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--border);
  color: var(--navy);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
}

@media (min-width: 640px) {
  .serve-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }
}

@media (min-width: 980px) {
  .serve-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 44px;
  }
  .serve-grid li { padding: 18px 2px; font-size: 1rem; }
}

.serve-close {
  margin-top: 34px;
  max-width: 52ch;
  font-size: 0.9375rem;
  color: var(--slate);
}

@media (min-width: 900px) {
  .serve-close { margin-top: 42px; font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   13. About
   -------------------------------------------------------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

@media (min-width: 720px) {
  .about-grid { grid-template-columns: 196px minmax(0, 1fr); gap: 40px; }
}

@media (min-width: 1000px) {
  .about-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 52px; }
}

/* Neutral portrait placeholder: an initials monogram on navy. No photography. */
.portrait {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 158px;
  aspect-ratio: 4 / 5;
  background: var(--navy);
  border: 1px solid var(--navy);
  outline: 1px solid var(--border);
  outline-offset: 5px;
}

.portrait-initials {
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1;
  color: var(--white);
  transform: translateX(0.045em); /* optical centring for the tracked letters */
}

@media (min-width: 720px) {
  .portrait { width: 100%; }
  .portrait-initials { font-size: 3.25rem; }
}

.bio-name {
  font-size: 1.125rem;
  margin-bottom: 14px;
}

@media (min-width: 900px) {
  .bio-name { font-size: 1.25rem; }
}

.about-body p {
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.75;
}

@media (min-width: 600px) {
  .about-body p { font-size: 1rem; }
}

/* Company facts: label and value rows, deliberately quiet. */
.facts {
  margin-top: 48px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}

@media (min-width: 900px) {
  .facts { margin-top: 64px; }
}

.facts-title {
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-ink);
  margin-bottom: 16px;
}

.facts-list {
  display: grid;
  grid-template-columns: 1fr;
}

.facts-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 13px 0;
  border-top: 1px solid var(--border);
}

.facts-row:last-child { border-bottom: 1px solid var(--border); }

.facts-row dt {
  font-family: var(--display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-ink);
  line-height: 1.6;
}

.facts-row dd {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.55;
}

@media (min-width: 620px) {
  .facts-row {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
  }
  .facts-row dt { font-size: 0.6875rem; }
}

@media (min-width: 900px) {
  .facts-row { grid-template-columns: 210px minmax(0, 1fr); gap: 32px; }
}

/* --------------------------------------------------------------------------
   14. Contact
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: start;
}

.contact-head { margin-bottom: 0; }

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 64px;
  }
}

.contact-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--navy);
  padding: 26px 24px 28px;
  box-shadow: var(--shadow-card);
}

@media (min-width: 620px) {
  .contact-card { padding: 30px 30px 32px; }
}

.contact-name {
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--navy);
  padding-bottom: 18px;
}

.contact-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 13px 0;
  border-top: 1px solid var(--border);
}

.contact-row dt {
  font-family: var(--display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-ink);
  line-height: 1.6;
}

.contact-row dd {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--navy);
  overflow-wrap: break-word;
}

.contact-row dd a { font-weight: 600; }

@media (min-width: 480px) {
  .contact-row { grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: baseline; }
  .contact-row dt { font-size: 0.6875rem; }
}

.contact-actions { margin-top: 26px; }
.contact-actions .btn { width: 100%; }

@media (min-width: 480px) {
  .contact-actions .btn { width: auto; min-width: 220px; }
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy-deep);
  color: var(--footer-ink);
  padding-block: 48px 34px;
}

@media (min-width: 900px) {
  .site-footer { padding-block: 60px 40px; }
}

.footer-top {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(232, 238, 245, 0.14);
}

@media (min-width: 780px) {
  .footer-top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
  }
}

/* Laid out as a column so the gap is exactly the gap. Relying on the inline
   strut here left the spacing at the mercy of the body font's descent. */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* On the deep navy footer the mark's navy half would vanish, so both fills are
   swapped for light values. Custom properties inherit into the <use> shadow
   tree, which is why one copy of the artwork can serve both grounds. */
.brand-footer {
  color: var(--white);
  --logo-ink: var(--white);
  --logo-accent: #7FA6CB;
}

.brand-footer .brand-name { color: var(--white); }

.footer-tag {
  font-family: var(--display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--footer-ink);
}

@media (min-width: 420px) {
  .footer-tag { font-size: 0.6875rem; }
}

/* Two tidy columns on phones rather than a three plus one wrap. */
.footer-nav ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
}

@media (min-width: 480px) {
  .footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
  }
}

.footer-nav a {
  color: var(--footer-ink);
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
}

.footer-nav a:hover { color: var(--white); }

@media (min-width: 780px) {
  .footer-nav ul { justify-content: flex-end; }
}

.footer-legal {
  margin-top: 26px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--footer-ink);
}

/* --------------------------------------------------------------------------
   16. Motion: one subtle fade and rise on entry, nothing else
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms ease-out, transform 620ms ease-out;
  will-change: opacity, transform;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --------------------------------------------------------------------------
   17. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .nav-toggle, .hero-accent, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .section { padding-block: 24px; }
}