/* Site chrome: utility bar, header, footer, cookie banner.
   Loaded on marketing-site pages, not on the splash.

   The prototype expressed all of this as inline style attributes sized in
   container-query units (cqw) against a preview wrapper. Neither survives:
   style attributes are blocked by style-src, and there is no container to
   query in production. Values below are the prototype's, with cqw read as vw. */

/* The one color transcribed as a hex rather than taken from a token. The
   design uses #9db4c4 for de-emphasised text on navy and the token set has no
   equivalent — --ink-300 is a light-surface value. Kept local and named so it
   is obvious this is an exception, not a habit. */
:root {
  --footer-muted: #9db4c4;
}

.shell { display: flex; flex-direction: column; min-height: 100%; }
.shell__main { flex: 1 0 auto; }

.wrap {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

/* ---------- Utility bar ---------- */
.utility {
  background: var(--navy-900);
  color: var(--mist-200);
}
.utility__inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.utility__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  color: var(--mist-200);
  font: 500 13px var(--font-sans);
}
.utility__link:hover { color: var(--paper-50); }

/* ---------- Header ---------- */
.masthead {
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
}
.masthead__inner {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.masthead__brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 8px 0;
}
.masthead__mark { height: 32px; width: auto; display: block; }
.masthead__right { display: flex; align-items: center; gap: 8px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font: 600 14.5px var(--font-sans);
  color: var(--navy-900);
}
.nav__link:hover { background: var(--surface-sunken); color: var(--navy-900); }
.nav__link[aria-current='page'] { background: var(--surface-sunken); }
.masthead__cta { margin-left: 10px; }

.burger {
  width: 46px;
  height: 46px;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  color: var(--navy-900);
  cursor: pointer;
}

/* Mobile nav panel. Hidden via [hidden] in base.css until the burger opens it. */
.navpanel {
  border-top: 1px solid var(--border-subtle);
  padding: 10px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.navpanel__link {
  text-align: left;
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 14px 6px;
  border-bottom: 1px solid var(--border-subtle);
  font: 600 16px var(--font-sans);
  color: var(--navy-900);
}
.navpanel__cta { margin-top: 16px; }

/* Single breakpoint, per the design: below ~900px the header collapses to a
   burger and every multi-column grid falls to one column. */
@media (max-width: 899px) {
  .masthead__right { display: none; }
  .burger { display: inline-flex; }
}
@media (min-width: 900px) {
  .navpanel { display: none; }
}

/* ---------- Footer ---------- */
.foot {
  background: var(--navy-900);
  color: var(--mist-200);
}
.foot__cols {
  padding-block: clamp(44px, 6vw, 72px) 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 38px;
}
.foot__lockup { display: inline-flex; align-items: center; gap: 12px; }
.foot__mark { height: 28px; width: auto; display: block; }
.foot__tagline {
  margin: 18px 0 0;
  font: 400 14px/1.6 var(--font-sans);
  color: var(--mist-200);
  max-width: 250px;
}
.foot__heading {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--footer-muted);
  margin-bottom: 14px;
}
.foot__links { display: flex; flex-direction: column; gap: 1px; }
.foot__link {
  padding: 1px 0;
  min-height: 26px;
  display: flex;
  align-items: center;
  font: 400 14px var(--font-sans);
  color: var(--mist-200);
}
.foot__link:hover { color: var(--paper-50); }
.foot__address { margin: 0; font: 400 14px/1.7 var(--font-sans); color: var(--mist-200); }
.foot__cta { margin-top: 20px; }

.foot__legal {
  padding-block: 22px 40px;
  border-top: 1px solid var(--border-inverse);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.foot__notice {
  margin: 0;
  font: 400 12.5px/1.6 var(--font-sans);
  color: var(--footer-muted);
  max-width: 640px;
}
.foot__legal-links { display: flex; gap: 20px; align-items: baseline; flex-wrap: wrap; }
.foot__legal-link {
  padding: 4px 0;
  min-height: 24px;
  font: 400 12.5px var(--font-sans);
  color: var(--footer-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent;
  border: 0;
  cursor: pointer;
  line-height: inherit;
  font-family: var(--font-sans);
}
.foot__legal-link:hover { color: var(--paper-50); }

/* ---------- Cookie banner ---------- */
.cookie {
  position: sticky;
  bottom: 0;
  z-index: 60;
  background: var(--surface-card);
  border-top: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
}
.cookie__inner { padding-block: clamp(18px, 2.4vw, 26px); }
.cookie__row {
  display: flex;
  gap: clamp(18px, 3vw, 44px);
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cookie__copy { flex: 1 1 320px; min-width: 0; }
.cookie__title { margin: 0; font: 600 15.5px var(--font-sans); color: var(--navy-900); }
.cookie__text {
  margin: 7px 0 0;
  font: 400 14px/1.6 var(--font-sans);
  color: var(--text-body);
  max-width: 70ch;
  text-wrap: pretty;
}
.cookie__text a { text-decoration: underline; text-underline-offset: 3px; }
.cookie__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; flex: none; }

.cookie__prefs {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}
.cookie__cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px 32px;
}
.cookie__cat-row {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--navy-900);
}
.cookie__cat-desc {
  margin: 2px 0 0 48px;
  font: 400 13.5px/1.55 var(--font-sans);
  color: var(--text-muted);
  max-width: 38ch;
}
.cookie__save { margin-top: 18px; display: flex; justify-content: flex-end; }

/* Switch (design-system Switch.jsx). A real checkbox under a drawn track, so
   it keeps native semantics and keyboard behavior. */
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 36px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--slate-400);
  position: relative;
  flex: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.switch__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--paper-50);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.switch input:checked + .switch__track { background: var(--action-primary); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--shadow-focus); }
.switch input:disabled + .switch__track { opacity: 0.55; cursor: not-allowed; }
.switch__label { font: 600 14px var(--font-sans); color: var(--navy-900); }

/* ---------- Print ----------
   Clients and opposing counsel print the legal documents; chrome must not
   come with them. */
@media print {
  [data-print-hide] { display: none !important; }
  html, body { background: #fff !important; }
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 10px;
    color: var(--blue-700);
    word-break: break-all;
  }
}

/* Links inside the address block stay inline. .foot__link is display:flex with
   a 26px min-height, which is right for the stacked Firm column and wrong here:
   inside a <p> separated by <br> it forces block layout and opens a visible gap
   between the phone number and the email address. */
.foot__address a { color: var(--mist-200); }
.foot__address a:hover { color: var(--paper-50); }