/* ==========================================================================
   Infinitie Consulting - Design System
   Brand colors as specified: navy hsl(209.3 78.18% 10.78%) + white.
   Supporting neutrals (text/border/soft-bg grays) are derived from the same
   209.3deg hue at low saturation so everything reads as one palette.
   ========================================================================== */

:root {
  /* Brand */
  --navy: hsl(209.3deg 78.18% 10.78%); /* #061c31 */
  --navy-600: hsl(209.3deg 70% 18%);
  --navy-500: hsl(209.3deg 62% 30%);
  --white: #ffffff;

  /* Derived neutrals (same hue, low saturation) */
  --ink: hsl(209.3deg 30% 14%);
  --muted: hsl(209.3deg 12% 40%);
  --muted-light: hsl(209.3deg 15% 58%);
  --border: hsl(209.3deg 20% 88%);
  --bg-soft: hsl(209.3deg 35% 97%);
  --bg-soft-2: hsl(209.3deg 25% 94%);

  /* Feedback colors */
  --success: hsl(152deg 55% 32%);
  --error: hsl(4deg 70% 45%);

  /* Type */
  --font-body: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-heading: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Layout */
  --container: 1200px;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px hsl(209.3deg 40% 10% / 0.06), 0 1px 1px hsl(209.3deg 40% 10% / 0.04);
  --shadow-md: 0 8px 24px hsl(209.3deg 40% 10% / 0.08), 0 2px 6px hsl(209.3deg 40% 10% / 0.05);
  --header-height: 76px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 0.6em;
  font-weight: 700;
}

p {
  margin: 0 0 1em;
}

button {
  font-family: inherit;
}

.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Utility ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.section {
  padding-block: 88px;
}

.section--sm {
  padding-block: 56px;
}

.section--soft {
  background: var(--bg-soft);
}

.section--navy {
  background: var(--navy);
  color: hsl(209.3deg 25% 92%);
}

.section--navy h1,
.section--navy h2,
.section--navy h3 {
  color: var(--white);
}

.text-center {
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-500);
  margin-bottom: 14px;
}

.section--navy .eyebrow {
  color: hsl(200deg 70% 72%);
}

.section-head {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-head p {
  color: var(--muted);
}

.section--navy .section-head p {
  color: hsl(209.3deg 20% 78%);
}

.lede {
  font-size: 1.15rem;
  color: var(--muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--navy);
  color: var(--white);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn .icon {
  font-size: 20px;
}

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

.btn--primary:hover {
  background: var(--navy-600);
  border-color: var(--navy-600);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}

.btn--outline:hover {
  background: var(--navy);
  color: var(--white);
}

.section--navy .btn--outline,
.hero .btn--outline {
  color: var(--white);
  border-color: hsl(209.3deg 30% 45%);
}

.section--navy .btn--outline:hover,
.hero .btn--outline:hover {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

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

.btn--light:hover {
  background: hsl(209.3deg 25% 94%);
  box-shadow: var(--shadow-md);
}

.btn--block {
  width: 100%;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  height: var(--header-height);
  display: flex;
  align-items: center;
  transition: box-shadow 0.2s ease;
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand__logo {
  display: block;
  height: 34px;
  width: auto;
}

.brand__chip {
  display: inline-flex;
  align-items: center;
  background: var(--white);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
}

.brand__chip .brand__logo {
  height: 30px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--navy);
  background: var(--bg-soft);
}

.nav__link .icon {
  font-size: 18px;
  transition: transform 0.15s ease;
}

.nav-item--dropdown {
  position: relative;
}

.nav-item--dropdown:hover .nav__link .icon,
.nav-item--dropdown.is-open .nav__link .icon {
  transform: rotate(180deg);
}

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  translate: 0 6px;
  transition: opacity 0.15s ease, translate 0.15s ease, visibility 0.15s;
  z-index: 110;
}

.nav-item--dropdown:hover .dropdown,
.nav-item--dropdown.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.dropdown__link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
}

.dropdown__link:hover {
  background: var(--bg-soft);
}

.dropdown__link .icon {
  color: var(--navy-500);
  font-size: 22px;
  margin-top: 1px;
  flex-shrink: 0;
}

.dropdown__title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
}

.dropdown__desc {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.header-actions__phone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
}

.header-actions__phone .icon {
  font-size: 18px;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--navy);
  cursor: pointer;
  padding: 6px;
}

.nav-toggle .icon {
  font-size: 28px;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
  padding-block: 100px;
}

/* WebGL dot-matrix field, rendered by dot-matrix-bg.js. The solid navy
   background above remains as the fallback when WebGL2 isn't available or
   the user has asked for reduced motion, the canvas simply never mounts. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__bg canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  color: var(--white);
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  margin-bottom: 0.45em;
}

.hero p.lede {
  color: hsl(209.3deg 22% 82%);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.hero__badge-row {
  display: flex;
  gap: 28px;
  margin-top: 44px;
  flex-wrap: wrap;
}

.hero__badge {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.hero__badge strong {
  font-size: 1.7rem;
  color: var(--white);
  font-family: var(--font-heading);
}

.hero__badge span {
  font-size: 0.8rem;
  color: hsl(209.3deg 20% 72%);
}

/* Hero orbit: logo mark at center, six value-pillar circles arranged
   around it, each tied back to the logo by a short spoke rather than one
   ring running through all of them. */
.hero__orbit {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1;
  margin-inline: auto;
}

.hero__orbit-spokes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero__orbit-spoke {
  stroke: hsl(200deg 45% 60% / 0.4);
  stroke-width: 1.25;
  stroke-linecap: round;
}

.hero__orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 47.8%; /* 220 / 460 */
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__orbit-logo {
  width: 85%;
  height: 85%;
  object-fit: contain;
  filter: drop-shadow(0 14px 30px hsl(209.3deg 60% 4% / 0.5));
}

/* translate's Y is a fixed -30px (half the circle's own height), not -50%,
   because the item's box also includes the gap + label below the circle:
   centering the whole box would pull the circle itself off the ring it's
   meant to sit on. This way the circle's center always lands exactly on
   the point, and the label just hangs below it. */
.hero__orbit-item {
  position: absolute;
  translate: -50% -30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: max-content;
}

.hero__orbit-item--1 {
  top: 7.6%;
  left: 50%;
}
.hero__orbit-item--2 {
  top: 28.8%;
  left: 86.7%;
}
.hero__orbit-item--3 {
  top: 71.2%;
  left: 86.7%;
}
.hero__orbit-item--4 {
  top: 92.4%;
  left: 50%;
}
.hero__orbit-item--5 {
  top: 71.2%;
  left: 13.3%;
}
.hero__orbit-item--6 {
  top: 28.8%;
  left: 13.3%;
}

.hero__orbit-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid hsl(200deg 40% 60% / 0.4);
  color: hsl(200deg 80% 82%);
}

.hero__orbit-circle .icon {
  font-size: 24px;
}

.hero__orbit-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: hsl(209.3deg 18% 82%);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .hero__orbit-item {
    translate: -50% -23px;
  }

  .hero__orbit-circle {
    width: 46px;
    height: 46px;
  }

  .hero__orbit-circle .icon {
    font-size: 18px;
  }

  .hero__orbit-label {
    font-size: 0.68rem;
  }
}

/* Page header (non-home pages) */
.page-hero {
  background: var(--navy);
  color: var(--white);
  padding-block: 64px;
  position: relative;
  overflow: hidden;
}

.page-hero .container {
  position: relative;
}

.page-hero h1 {
  color: var(--white);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  margin-bottom: 0.3em;
}

.page-hero p {
  color: hsl(209.3deg 20% 80%);
  max-width: 60ch;
  margin-bottom: 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: hsl(209.3deg 20% 70%);
  margin-bottom: 18px;
}

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

.breadcrumb .icon {
  font-size: 16px;
}

/* ==========================================================================
   Cards / Grids
   ========================================================================== */
.grid {
  display: grid;
  gap: 28px;
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: hsl(209.3deg 25% 82%);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--bg-soft-2);
  color: var(--navy);
  margin-bottom: 18px;
}

.card__icon .icon {
  font-size: 26px;
}

.card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5em;
}

.card p {
  color: var(--muted);
  font-size: 0.94rem;
  margin-bottom: 1.1em;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--navy);
}

.card__link .icon {
  font-size: 18px;
  transition: translate 0.15s ease;
}

.card__link:hover .icon {
  translate: 3px 0;
}

/* Service list (numbered, editorial) */
.service-list {
  display: flex;
  flex-direction: column;
}

.service-row {
  display: flex;
  gap: 24px;
  padding-block: 30px;
  border-top: 1px solid var(--border);
  align-items: flex-start;
}

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

.service-row__index {
  font-size: 1.6rem;
  font-weight: 800;
  color: hsl(209.3deg 30% 82%);
  width: 48px;
  flex-shrink: 0;
}

.service-row__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  background: var(--bg-soft-2);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.service-row__body {
  flex: 1;
}

.service-row__body h3 {
  font-size: 1.15rem;
  margin-bottom: 0.35em;
}

.service-row__body p {
  color: var(--muted);
  margin-bottom: 0.6em;
}

.service-row__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--navy-500);
  flex-shrink: 0;
  align-self: center;
}

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
}

.stat {
  text-align: center;
  border-left: 1px solid var(--border);
}

.stat:first-child {
  border-left: none;
}

.stat strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.3rem;
  color: var(--navy);
}

.stat span {
  font-size: 0.85rem;
  color: var(--muted);
}

/* Testimonials */
.testimonial {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.testimonial .icon {
  color: hsl(209.3deg 25% 85%);
  font-size: 34px;
}

.testimonial blockquote {
  margin: 0;
  font-size: 1.02rem;
  color: var(--ink);
}

.testimonial footer {
  font-weight: 700;
  color: var(--navy);
  font-size: 0.9rem;
}

/* CTA band */
.cta-band {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding-block: 64px;
  position: relative;
  overflow: hidden;
}

.cta-band h2 {
  color: var(--white);
}

.cta-band p {
  color: hsl(209.3deg 20% 80%);
  margin-bottom: 28px;
}

.cta-band__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Detail page: sidebar layout */
.detail {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 56px;
  align-items: start;
}

.detail__body h2 {
  font-size: 1.4rem;
  margin-top: 1.6em;
}

.detail__body h2:first-child {
  margin-top: 0;
}

.detail__body p {
  color: var(--ink);
}

.detail__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 1.2em 0;
}

.detail__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--ink);
}

.detail__list .icon {
  color: var(--success);
  font-size: 20px;
  margin-top: 2px;
  flex-shrink: 0;
}

.framework-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 1em 0 1.6em;
}

.framework-tag {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-soft-2);
  color: var(--navy);
  border: 1px solid var(--border);
}

.detail__aside {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.aside-card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
}

.aside-card h4 {
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.aside-card ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aside-card a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}

.aside-card a:hover,
.aside-card a[aria-current="page"] {
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}

.aside-card a .icon {
  font-size: 18px;
  color: var(--navy-500);
}

.aside-card--dark {
  background: var(--navy);
  color: var(--white);
}

.aside-card--dark h4 {
  color: var(--white);
}

.aside-card--dark p {
  color: hsl(209.3deg 20% 78%);
  font-size: 0.88rem;
}

/* ==========================================================================
   Forms
   ========================================================================== */
.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ink);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--navy-500);
  box-shadow: 0 0 0 3px hsl(209.3deg 60% 40% / 0.15);
}

.field textarea {
  resize: vertical;
  min-height: 110px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-note {
  display: none;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  margin-bottom: 18px;
}

.form-note.is-visible {
  display: flex;
}

.form-note--info {
  background: hsl(209.3deg 45% 95%);
  color: var(--navy-600);
  border: 1px solid hsl(209.3deg 40% 85%);
}

.form-note--error {
  background: hsl(4deg 70% 96%);
  color: var(--error);
  border: 1px solid hsl(4deg 60% 85%);
}

.form-note .icon {
  font-size: 20px;
  flex-shrink: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--navy);
  color: hsl(209.3deg 20% 80%);
}

.footer-top {
  padding-block: 72px 48px;
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 1fr;
  gap: 48px;
}

.footer-brand p {
  margin-top: 16px;
  font-size: 0.9rem;
  color: hsl(209.3deg 18% 72%);
  max-width: 34ch;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid hsl(209.3deg 25% 32%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.footer-social a:hover {
  background: hsl(209.3deg 30% 22%);
  border-color: hsl(209.3deg 30% 45%);
}

.footer-social .icon {
  font-size: 18px;
}

.footer-col h4 {
  color: var(--white);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col a {
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.footer-col .icon {
  font-size: 18px;
  color: hsl(200deg 60% 65%);
  flex-shrink: 0;
}

.footer-contact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-bottom: 8px;
}

.footer-contact li {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  font-size: 0.92rem;
  /* Establishes a query container so .phone-group below can react to its
     own available width (not the viewport), which is what actually
     determines whether the two numbers fit on one line. */
  container-name: footer-contact-cell;
  container-type: inline-size;
}

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

/* The two phone numbers stay on one line, joined by " / ", whenever there's
   room. Only when their own column genuinely can't fit that (a narrow
   phone, or a mid-width viewport where the 3-column grid hasn't stacked
   yet) do they drop to two lines with a divider, instead of the browser's
   default wrap orphaning the "/" on its own line. */
.phone-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}

.phone-sep {
  color: hsl(209.3deg 16% 50%);
}

@container footer-contact-cell (max-width: 320px) {
  .phone-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .phone-sep {
    display: none;
  }

  .phone-group a + a {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid hsl(209.3deg 25% 30%);
  }
}

.map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid hsl(209.3deg 25% 28%);
  height: 100%;
  min-height: 320px;
}

.map-wrap iframe {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  display: block;
}

.footer-bottom {
  border-top: 1px solid hsl(209.3deg 25% 24%);
  padding-block: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: hsl(209.3deg 16% 62%);
}

.footer-bottom__legal {
  display: flex;
  gap: 20px;
}

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

/* ==========================================================================
   Legal / Privacy pages
   ========================================================================== */
.legal-content {
  max-width: 760px;
  margin: 0 auto;
}

.legal-content h2 {
  font-size: 1.15rem;
  margin-top: 1.8em;
}

.legal-content p,
.legal-content li {
  color: var(--muted);
}

.legal-content ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0.8em 0 1.2em;
  padding-left: 4px;
}

.legal-content li {
  padding-left: 18px;
  position: relative;
}

.legal-content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--navy-500);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .nav,
  .header-actions__phone {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .hero .container,
  .detail,
  .footer-top,
  .footer-contact {
    grid-template-columns: 1fr;
  }

  .hero__orbit {
    order: -1;
    max-width: 340px;
  }

  .detail__aside {
    position: static;
  }

  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .stat {
    border-left: none;
    border-top: 1px solid var(--border);
    padding-top: 20px;
  }

  .stat:first-child {
    border-top: none;
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  .section {
    padding-block: 56px;
  }

  .grid--3,
  .grid--4,
  .grid--2 {
    grid-template-columns: 1fr;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
}

.mobile-nav.is-open {
  visibility: visible;
}

.mobile-nav__backdrop {
  position: absolute;
  inset: 0;
  background: hsl(209.3deg 60% 6% / 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mobile-nav.is-open .mobile-nav__backdrop {
  opacity: 1;
}

.mobile-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(360px, 86vw);
  background: var(--white);
  box-shadow: var(--shadow-md);
  padding: 20px;
  translate: 100% 0;
  transition: translate 0.25s ease;
  overflow-y: auto;
}

.mobile-nav.is-open .mobile-nav__panel {
  translate: 0 0;
}

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.mobile-nav__close {
  background: none;
  border: none;
  color: var(--navy);
  cursor: pointer;
  padding: 6px;
}

.mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-nav__links > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 10px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  color: var(--ink);
}

.mobile-nav__links > li > a[aria-current="page"] {
  color: var(--navy);
  background: var(--bg-soft);
}

.mobile-nav__sub {
  display: flex;
  flex-direction: column;
  padding-left: 14px;
  border-left: 2px solid var(--border);
  margin: 4px 0 10px 24px;
}

.mobile-nav__sub a {
  padding: 9px 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  border-radius: var(--radius-sm);
}

.mobile-nav__sub a:hover {
  color: var(--navy);
  background: var(--bg-soft);
}

.mobile-nav__cta {
  margin-top: 18px;
}