/* ==========================================================================
   GeoStrata — main stylesheet
   Palette and type scale sampled from the previous Wix site so the rebuild
   reads as the same company, with tightened spacing and real mobile behavior.
   ========================================================================== */

/* ---- Fonts (self-hosted; no third-party requests) ---------------------- */
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-latin-600-normal.woff2') format('woff2');
             font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-latin-700-normal.woff2') format('woff2');
             font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2');
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');
             font-weight: 600; font-style: normal; font-display: swap; }

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --navy:        #1e2d3b;
  --navy-deep:   #16222d;
  --slate:       #3d5975;
  --slate-light: #5b86b0;
  --ink:         #292929;
  --ink-soft:    #3b3a3a;
  --muted:       #6f7680;
  --pale:        #c6c6c6;
  --bg:          #ffffff;
  --bg-alt:      #f7f7f7;
  --line:        #e4e7eb;

  --head: 'Montserrat', 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --wrap: 1200px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --sect: clamp(4rem, 9vw, 7.5rem);
  --radius: 2px;
  --shadow: 0 1px 3px rgba(30, 45, 59, .08), 0 8px 24px rgba(30, 45, 59, .06);
  --shadow-lift: 0 2px 6px rgba(30, 45, 59, .10), 0 16px 40px rgba(30, 45, 59, .12);
}

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--slate); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 700; line-height: 1.15; margin: 0 0 .6em; color: var(--ink-soft); }
p { margin: 0 0 1.15em; }
ul { margin: 0 0 1.15em; padding-left: 1.15em; }
:focus-visible { outline: 3px solid var(--slate-light); outline-offset: 3px; }

/* ---- Layout helpers ---------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--sect); }
.section--alt { background: var(--bg-alt); }
.section--navy { background: var(--navy); color: #fff; }
.section--navy h2, .section--navy h3 { color: #fff; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff;
  padding: .75rem 1.25rem; z-index: 200;
}
.skip:focus { left: 0; }

/* Big pale section label — the previous site's signature move */
.section-label {
  font-family: var(--head); font-weight: 700; color: var(--pale);
  font-size: clamp(2rem, 5.5vw, 3.125rem); letter-spacing: .02em;
  text-transform: uppercase; margin: 0 0 2.5rem;
}
.section-label--tight { margin-bottom: 1.5rem; }

.lede { font-size: clamp(1.09rem, 1.6vw, 1.28rem); color: var(--ink-soft); max-width: 62ch; }

/* A quieter aside than body copy, for provenance rather than pitch. */
.founder-note {
  margin-top: 1.75rem; padding-left: 1.1rem; border-left: 2px solid var(--slate-light);
  color: var(--muted); font-size: .95rem;
}
.founder-note strong { color: var(--ink-soft); font-weight: 600; }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-block; font-family: var(--head); font-weight: 600;
  font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .95rem 1.6rem; border-radius: var(--radius); border: 1.5px solid var(--navy);
  background: var(--navy); color: #fff; text-decoration: none; cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { background: var(--slate); border-color: var(--slate); color: #fff; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--on-dark { background: #fff; border-color: #fff; color: var(--navy); }
.btn--on-dark:hover { background: var(--slate-light); border-color: var(--slate-light); color: #fff; }
.btn--outline-light { background: transparent; border-color: rgba(255,255,255,.72); color: #fff; }
.btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--navy); }

/* ---- Header / nav ------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.97);
  backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 74px; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut);
}
.brand { flex: 0 0 auto; line-height: 0; }
.brand img { width: 178px; height: auto; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block; font-family: var(--head); font-weight: 600; font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
  text-decoration: none; padding: .65rem .7rem; border-radius: var(--radius);
  white-space: nowrap;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--navy); background: var(--bg-alt); }
.nav__item { position: relative; }
.nav__toggle-icon { display: inline-block; margin-left: .3em; font-size: .7em; opacity: .6; }

/* dropdown */
.nav__sub {
  position: absolute; top: 100%; left: 0; min-width: 210px; list-style: none;
  margin: 0; padding: .4rem; background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow); border-radius: var(--radius);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav__item:hover > .nav__sub, .nav__item:focus-within > .nav__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__sub .nav__link { font-size: .74rem; padding: .55rem .7rem; letter-spacing: .08em; }

.nav__cta { margin-left: .75rem; }
.nav__cta .btn { padding: .7rem 1.15rem; font-size: .7rem; }

/* mobile nav */
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: .55rem .7rem; cursor: pointer; color: var(--navy);
}
.nav-toggle svg { width: 22px; height: 22px; display: block; }

@media (max-width: 1020px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 74px 0 auto 0; background: #fff; margin: 0;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    max-height: calc(100vh - 74px); overflow-y: auto;
    display: none;
  }
  .nav[data-open="true"] { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gut) 1.5rem; }
  .nav__link { padding: .9rem .25rem; font-size: .82rem; border-bottom: 1px solid var(--line); }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 0 0 0 1rem; min-width: 0;
  }
  .nav__sub .nav__link { font-size: .78rem; color: var(--muted); }
  .nav__toggle-icon { display: none; }
  .nav__cta { margin: 1rem .25rem 0; }
  .nav__cta .btn { display: block; text-align: center; padding: .95rem 1rem; font-size: .78rem; }
}

/* ---- Hero -------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; background: var(--navy); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture, .hero__media img { width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: center 60%; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(22,34,45,.42) 0%, rgba(22,34,45,.30) 45%, rgba(22,34,45,.55) 100%);
}
.hero__inner {
  max-width: var(--wrap); margin-inline: auto; padding: clamp(6rem, 18vh, 11rem) var(--gut);
  min-height: clamp(460px, 78vh, 760px); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.hero__title {
  color: #fff; font-size: clamp(1.85rem, 5.2vw, 3.4rem); letter-spacing: .1em;
  text-transform: uppercase; line-height: 1.24; margin: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
  max-width: 22ch;
}
.hero__sub {
  color: rgba(255,255,255,.92); margin: 1.6rem 0 0; font-size: clamp(1rem, 1.8vw, 1.2rem);
  max-width: 58ch; text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; margin-top: 2.25rem; }

/* page hero (interior pages) */
.page-hero { position: relative; isolation: isolate; background: var(--navy); }
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media picture { display: block; width: 100%; height: 100%; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(22,34,45,.62), rgba(22,34,45,.74));
}
.page-hero__inner {
  max-width: var(--wrap); margin-inline: auto; padding: clamp(3.5rem, 10vw, 6.5rem) var(--gut);
}
.page-hero__eyebrow {
  font-family: var(--head); font-weight: 600; font-size: .75rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--slate-light); margin: 0 0 .9rem;
}
.page-hero__title {
  color: #fff; font-size: clamp(1.9rem, 4.6vw, 3rem); letter-spacing: .06em;
  text-transform: uppercase; margin: 0; max-width: 26ch;
}
.page-hero__lede { color: rgba(255,255,255,.9); margin: 1.1rem 0 0; max-width: 60ch; }

/* ---- Cards / grids ----------------------------------------------------- */
.grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
/* Team rows sit on a fixed 4-track grid at desktop so a card is the same size
   in every group. A group of three fills three tracks and stops — a partial row
   reads correctly in a directory, whereas stretching three cards across the full
   width would make the photo-less stand-ins the largest thing on the page. */
.grid--people { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
@media (min-width: 1021px) {
  .grid--people { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1020px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  text-decoration: none; color: inherit; height: 100%;
}
a.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); border-color: #d7dce2; }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt); }
.card__media picture { display: block; width: 100%; height: 100%; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
a.card:hover .card__media img { transform: scale(1.035); }
.card__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.card__title {
  font-size: 1.0625rem; letter-spacing: .09em; text-transform: uppercase;
  margin: 0 0 .6rem; color: var(--navy);
}
.card__text { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.card__more {
  margin-top: 1.1rem; font-family: var(--head); font-weight: 600; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--slate);
}

/* ---- Stats ------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat__value {
  font-family: var(--head); font-weight: 700; color: #fff;
  font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1; margin: 0 0 .5rem;
}
.stat__label {
  font-family: var(--head); font-weight: 600; font-size: .73rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--slate-light); margin: 0;
}

/* ---- Clients ----------------------------------------------------------- */
.logo-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.75rem, 5vw, 4rem); margin-bottom: 2.75rem;
}
.logo-strip picture {
  display: flex; align-items: center; justify-content: center;
  width: clamp(120px, 15vw, 170px); height: 64px;
}
.logo-strip img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; opacity: .72; filter: grayscale(1);
  transition: opacity .2s ease, filter .2s ease;
}
.logo-strip img:hover { opacity: 1; filter: grayscale(0); }
.client-names {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem .5rem;
  list-style: none; margin: 0; padding: 0;
}
.client-names li {
  font-family: var(--head); font-weight: 600; font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1rem; background: #fff;
}

/* ---- Service detail page ---------------------------------------------- */
.svc { display: grid; grid-template-columns: 250px 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .svc { grid-template-columns: 1fr; } }
.svc__toc { position: sticky; top: 100px; }
@media (max-width: 900px) { .svc__toc { position: static; } }
.svc__toc-title {
  font-family: var(--head); font-weight: 700; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .9rem;
}
.svc__toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.svc__toc a {
  display: block; padding: .5rem 0 .5rem .9rem; margin-left: -2px;
  border-left: 2px solid transparent; font-size: .92rem; color: var(--muted); text-decoration: none;
}
.svc__toc a:hover { color: var(--navy); border-left-color: var(--slate-light); }

.svc-block { padding-bottom: 2.75rem; margin-bottom: 2.75rem; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.svc-block:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.svc-block__title { font-size: clamp(1.2rem, 2.2vw, 1.5rem); color: var(--navy); letter-spacing: .03em; margin: 0 0 .75rem; }
.svc-block p { color: var(--ink-soft); }
.tag-list { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 1.1rem 0 0; padding: 0; }
.tag-list li {
  font-size: .82rem; color: var(--slate); background: var(--bg-alt);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .38rem .7rem;
}

/* Lab capability columns */
.cap-cols { columns: 3 220px; column-gap: 2.5rem; }
.cap-cols ul { list-style: none; padding: 0; margin: 0; }
.cap-cols li { padding: .3rem 0 .3rem 1.1rem; position: relative; font-size: .93rem; color: var(--ink-soft); break-inside: avoid; }
.cap-cols li::before { content: ''; position: absolute; left: 0; top: .78em; width: 5px; height: 5px; background: var(--slate-light); border-radius: 50%; }

/* ---- Team -------------------------------------------------------------- */
.team-group__title {
  font-family: var(--head); font-weight: 700; font-size: .78rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 1.75rem;
  padding-bottom: .75rem; border-bottom: 1px solid var(--line);
}
/* Column layout so the contact links sit on one baseline across a row, even
   when a title wraps to two lines. */
.person { display: flex; flex-direction: column; height: 100%; }
.person__links { margin-top: auto; padding-top: .25rem; }
.person__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-alt); border-radius: var(--radius); }
.person__media picture { display: block; width: 100%; height: 100%; }
.person__media img { transform: scale(1.06); transform-origin: center 30%; }

/* Stand-in for a principal we don't have a photo of yet: same 3:4 footprint as a
   real headshot, so the row still reads as one object. */
.person__media--mono {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(91,134,176,.22) 0%, rgba(91,134,176,0) 60%),
    var(--navy);
}
.person__media--mono .mono {
  font-family: var(--head); font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.4rem); letter-spacing: .06em;
  color: #fff; opacity: .9; line-height: 1;
}
.person__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.person__name { font-size: 1.05rem; color: var(--navy); margin: 1.1rem 0 .2rem; letter-spacing: .02em; }
.person__role {
  font-family: var(--head); font-weight: 600; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate-light); margin: 0 0 .8rem;
}
/* Titles differ in length — "President" fits one line, "Senior Geotechnical
   Engineer" needs two — which pushed one card's bio a line lower than its
   neighbours'. Reserving two lines puts every bio in a row on the same
   baseline. 3.3em is two lines at the inherited 1.65 line-height.
   Unconditional on purpose: the grid is auto-fit, so the width at which it
   drops to one column depends on the gutter clamp, and a hand-picked
   breakpoint got it wrong at exactly 640px — still two columns there, but
   outside the query. The cost of applying it in single-column too is 19px of
   whitespace under a short title, which is invisible with nothing beside it. */
.person__role { min-height: 3.3em; }
.person__bio { font-size: .94rem; color: var(--muted); margin: 0 0 1rem; }
.person__links { display: flex; gap: .55rem; align-items: center; }

/* Circular icon button. Sized as a real touch target, quiet at rest so a row
   of them doesn't compete with the portraits, and filling with the brand navy
   on hover so it reads as clearly interactive. The glyph inherits currentColor,
   so one rule drives both states. */
.icon-btn {
  --icon-size: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--icon-size); height: var(--icon-size);
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--slate);
  text-decoration: none;
  flex: 0 0 auto;
  transition: background .18s ease, border-color .18s ease,
              color .18s ease, transform .18s ease;
}
.icon-btn svg { width: 17px; height: 17px; display: block; }
/* A solid glyph fills its whole bounding box, unlike the envelope's 1.75px
   stroke, so it reads heavier at the same size. The LinkedIn mark sits a touch
   smaller to balance against it. */
.icon-btn--filled svg { width: 15px; height: 15px; }
.icon-btn:hover,
.icon-btn:focus-visible {
  background: var(--navy); border-color: var(--navy); color: #fff;
  transform: translateY(-1px);
}
/* On the alternating grey section the resting fill needs to stay distinct. */
.section--alt .icon-btn { background: #fff; }

@media (max-width: 640px) {
  .icon-btn { --icon-size: 42px; }
  .icon-btn svg { width: 19px; height: 19px; }
  .icon-btn--filled svg { width: 17px; height: 17px; }
}

/* ---- Contact ----------------------------------------------------------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
/* Two offices side by side, stacking on narrow screens. */
.offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; margin-bottom: 2rem; }
@media (max-width: 560px) { .offices { grid-template-columns: 1fr; } }
.office { padding-left: 1rem; border-left: 2px solid var(--slate-light); }
.office__label {
  font-family: var(--head); font-weight: 600; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .45rem;
}
.office__addr { margin: 0; font-size: 1.02rem; color: var(--ink-soft); line-height: 1.5; }
.office__meta { margin: .35rem 0 0; font-size: 1.02rem; }
.office__note { margin: .5rem 0 0; font-size: .84rem; color: var(--muted); line-height: 1.45; }

.contact__detail { margin: 0 0 1.75rem; }
.contact__detail dt {
  font-family: var(--head); font-weight: 600; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .3rem;
}
.contact__detail dd { margin: 0 0 1.15rem; font-size: 1.02rem; color: var(--ink-soft); }
.contact__detail a { color: var(--slate); }

.field { margin-bottom: 1.1rem; }
.field label {
  display: block; font-family: var(--head); font-weight: 600; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .45rem;
}
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--body); font-size: 1rem; color: var(--ink);
  padding: .8rem .9rem; background: #fff;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--slate-light); box-shadow: 0 0 0 3px rgba(91,134,176,.16);
}
.field textarea { min-height: 148px; resize: vertical; }
.field--required label::after { content: ' *'; color: #b3261e; }
.form__note { font-size: .84rem; color: var(--muted); margin: .85rem 0 0; }
.form__status { margin: 1rem 0 0; padding: .9rem 1.1rem; border-radius: var(--radius); font-size: .95rem; display: none; }
.form__status[data-state="ok"]   { display: block; background: #edf7ee; border: 1px solid #b7dfbb; color: #1e4620; }
.form__status[data-state="err"]  { display: block; background: #fdecea; border: 1px solid #f3c0bb; color: #611a15; }
.form__status[data-state="busy"] { display: block; background: var(--bg-alt); border: 1px solid var(--line); color: var(--muted); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Footer ------------------------------------------------------------ */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.72); padding-block: clamp(2.75rem, 6vw, 4.25rem) 2rem; }
.site-footer a { color: rgba(255,255,255,.86); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__title {
  font-family: var(--head); font-weight: 700; font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: #fff; margin: 0 0 1rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.footer__list li { margin-bottom: .55rem; }
.footer__brand img { width: 190px; margin-bottom: 1.1rem; filter: brightness(0) invert(1); opacity: .95; }
.footer__bottom {
  margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .84rem;
}
.footer__social { display: flex; gap: 1.1rem; }

/* ---- News embed -------------------------------------------------------- */
.news-embed { min-height: 620px; }
.news-embed__fallback { color: var(--muted); font-size: .95rem; }