/* boatparts.app — design tokens mirror the app theme (navy / coral) */

:root {
  --navy: #0b192c;
  --navy-2: #122443;
  --slate: #1f316f;
  --coral: #ff4c4c;
  --coral-hover: #ff6a6a;
  --bg: #f8f9fa;
  --bg-2: #f3f4f6;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --faint: #9aa3af;
  --on-navy: #eef2f7;
  --on-navy-muted: rgba(238, 242, 247, 0.66);
  --line: rgba(17, 24, 39, 0.09);
  --line-strong: rgba(17, 24, 39, 0.16);
  --line-navy: rgba(238, 242, 247, 0.14);
  --radius: 14px;
  --wrap: 1180px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

h1, h2, h3, h4 {
  font-weight: 800;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

a { color: inherit; }

/* height:auto is required — the width/height attributes would otherwise fix the
   rendered height and stretch every scaled image vertically. */
img { max-width: 100%; height: auto; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 40px;
}

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0 0 14px;
}
.eyebrow.on-light { color: var(--slate); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--on-navy);
  padding: 12px 18px;
  z-index: 100;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- logo ---------- */

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.logo img {
  display: block;
  height: 38px;
  width: auto;
}
.logo.lg img { height: 46px; }

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

nav.site {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(248, 249, 250, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

nav.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 76px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.92rem;
  font-weight: 600;
}
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--text); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  padding: 13px 22px;
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

.btn-coral { background: var(--coral); color: #fff9f6; }
.btn-coral:hover { background: var(--coral-hover); }

.btn-navy { background: var(--navy); color: var(--on-navy); }
.btn-navy:hover { background: var(--navy-2); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--bg-2); }

.btn-ghost.on-navy {
  color: var(--on-navy);
  border-color: var(--line-navy);
}
.btn-ghost.on-navy:hover { background: rgba(238, 242, 247, 0.07); }

/* ---------- store badges ---------- */

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 10px 20px 10px 16px;
  text-decoration: none;
  min-width: 196px;
  transition: transform 0.12s ease, opacity 0.15s ease;
}
.store-badge:hover { transform: translateY(-1px); }
.store-badge:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.store-badge svg { width: 26px; height: 26px; flex-shrink: 0; fill: currentColor; }
.store-badge .sb-text { display: flex; flex-direction: column; line-height: 1.15; }
.store-badge .sb-small { font-size: 0.66rem; letter-spacing: 0.04em; opacity: 0.82; }
.store-badge .sb-big { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }

/* rendered as a <span> until the app is live, so it cannot be clicked at all */
.store-badge[aria-disabled="true"] {
  background: rgba(238, 242, 247, 0.07);
  border-color: var(--line-navy);
  color: var(--on-navy);
  cursor: default;
}
.store-badge[aria-disabled="true"]:hover { transform: none; }

/* inline links outside the legal reading column must not rely on colour alone */
.store-note a,
#pricing p a {
  color: var(--slate);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.table-scroll:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

.store-note {
  font-size: 0.82rem;
  color: var(--on-navy-muted);
  margin: 16px 0 0;
}

/* ---------- hero ---------- */

header.hero {
  /* Photograph under the gradients, not instead of them: the washes are what
     guarantee the text contrast, and they are also what shows if the image
     fails to load. The picture is the last layer, so it only ever fills in. */
  background:
    radial-gradient(ellipse 900px 520px at 88% -8%, rgba(255, 76, 76, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(11, 27, 43, 0.68) 0%, rgba(10, 21, 34, 0.72) 52%, rgba(10, 21, 34, 0.94) 88%, var(--navy) 100%),
    image-set(url("/assets/photos/hero-ocean-1200.webp") 1x,
              url("/assets/photos/hero-ocean.webp") 2x)
      center / cover no-repeat,
    var(--navy);
  color: var(--on-navy);
  padding: 64px 0 0;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.3rem);
  margin: 0 0 20px;
}
.hero h1 .accent { color: var(--coral); }

.hero p.lede {
  font-size: 1.1rem;
  color: var(--on-navy-muted);
  margin: 0 0 30px;
  max-width: 46ch;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 40px 0 0;
  padding: 26px 0 40px;
  border-top: 1px solid var(--line-navy);
  list-style: none;
}
.hero-stats .n {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.hero-stats .l {
  font-size: 0.7rem;
  color: var(--on-navy-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- phone frame ---------- */

.phone {
  position: relative;
  width: 100%;
  max-width: 262px;
  margin: 0 auto;
  border-radius: 42px;
  padding: 10px;
  background: linear-gradient(160deg, #2a3a55, #0d1626);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.42), 0 2px 0 rgba(255, 255, 255, 0.09) inset;
}
.phone img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 603 / 1311;
  border-radius: 33px;
  background: var(--bg);
}
.phone::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 22px;
  background: #05090f;
  border-radius: 12px;
}

.hero-phones {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  padding-bottom: 44px;
}
.hero-phones .phone { max-width: 214px; }
.hero-phones .phone:first-child {
  transform: rotate(-4deg) translateY(16px) scale(0.9);
  z-index: 1;
  margin-right: -38px;
}
.hero-phones .phone:last-child { z-index: 2; }

/* ---------- sections ---------- */

section { padding: 92px 0; }
section.tight { padding: 64px 0; }
section.alt { background: var(--bg-2); }

section.navy {
  background: var(--navy);
  color: var(--on-navy);
}
section.navy h2 { color: var(--on-navy); }
section.navy p { color: var(--on-navy-muted); }

.section-head { max-width: 62ch; margin: 0 0 52px; }

/* Text beside a photograph. The image is decoration, so it drops below the
   text on narrow screens rather than squeezing both. */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  margin: 0 0 52px;
}
.split .section-head { margin: 0; }
.split-text p + p { margin-top: 14px; }
.split-media { margin: 0; }
.split-media img {
  width: 100%;
  /* Capped and cropped rather than sized by the file, so a portrait photo and
     a landscape one sit the same height beside their text. */
  max-height: 440px;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0 0 14px; }
.section-head p { font-size: 1.05rem; color: var(--muted); margin: 0; }

/* ---------- feature cards ---------- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.feature {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
}
.feature .ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(255, 76, 76, 0.1);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
}
.feature .ico svg { width: 22px; height: 22px; }
.feature h3 { font-size: 1.07rem; margin: 0 0 9px; }
.feature p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* ---------- screenshot showcase ---------- */

.showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 34px;
  align-items: start;
}
.showcase figure { margin: 0; }
.showcase .phone { max-width: 260px; }
.showcase figcaption {
  margin: 22px auto 0;
  max-width: 30ch;
  text-align: center;
}
.showcase figcaption strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 5px;
}
.showcase figcaption span {
  font-size: 0.9rem;
  color: var(--on-navy-muted);
}

/* ---------- category grid ---------- */

.cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cats li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 15px 18px;
  font-size: 0.95rem;
  font-weight: 600;
}
.cats .num {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* ---------- pricing ---------- */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.tier {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
}
.tier.highlight { border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
.tier h3 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.tier .price { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; }
.tier .price small { font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.tier ul { list-style: none; margin: 20px 0 0; padding: 0; font-size: 0.93rem; color: var(--muted); }
.tier li { padding: 7px 0 7px 24px; position: relative; }
.tier li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 15px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--coral);
  border-bottom: 2px solid var(--coral);
  transform: rotate(-45deg);
}

/* roadmap items — never let a plan read as a shipped feature */
.tier li.soon { color: var(--faint); }
.tier li.soon::before { border-color: var(--faint); }
.tier li.soon::after {
  content: "soon";
  margin-left: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
}

.soon-key {
  margin: 22px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.soon-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
}

/* ---------- CTA band ---------- */

.cta-band {
  background:
    radial-gradient(ellipse 700px 400px at 82% 110%, rgba(255, 76, 76, 0.2), transparent 62%),
    var(--navy);
  color: var(--on-navy);
  text-align: center;
}
.cta-band h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0 0 14px; }
.cta-band p { color: var(--on-navy-muted); max-width: 52ch; margin: 0 auto 32px; }
.cta-band .stores { justify-content: center; }

/* ---------- footer ---------- */

footer.site {
  background: var(--navy);
  color: var(--on-navy-muted);
  border-top: 1px solid var(--line-navy);
  padding: 56px 0 40px;
  font-size: 0.9rem;
}
footer.site a { color: var(--on-navy-muted); text-decoration: none; }
footer.site a:hover { color: var(--on-navy); text-decoration: underline; }

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--line-navy);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-bottom {
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 0.84rem;
  color: rgba(238, 242, 247, 0.5);
}

/* ---------- legal / text pages ---------- */

.legal { padding: 66px 0 88px; }

.legal-head {
  max-width: 74ch;
  margin: 0 0 44px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.legal-head h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: 0 0 14px; }
.legal-head p { color: var(--muted); margin: 0; }

.legal-body { max-width: 74ch; }
/* tables and card grids may exceed the reading column */
.legal-body .table-scroll,
.legal-body .contact-grid { width: min(calc(100vw - 80px), 900px); }
.legal-body h2 {
  font-size: 1.22rem;
  margin: 46px 0 14px;
  padding-top: 6px;
  /* clear the sticky nav when jumped to from the table of contents */
  scroll-margin-top: 96px;
}
.legal-body h3 { font-size: 1.02rem; margin: 28px 0 8px; }
.legal-body p, .legal-body li { color: #2c3644; }
.legal-body ul, .legal-body ol { padding-left: 22px; }
.legal-body li { margin: 7px 0; }
/* Prose links only — `:not(.btn)` keeps this off the buttons, whose own colour
   rule is less specific than `.legal-body a` and would otherwise lose. */
.legal-body a:not(.btn) { color: var(--slate); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:not(.btn):hover { color: var(--coral); }

.legal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 0.93rem;
}
.legal-body th, .legal-body td {
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--line);
  vertical-align: top;
}
.legal-body th { background: var(--bg-2); font-weight: 700; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.toc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 0 0 40px;
}
.toc strong { display: block; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.toc ol { margin: 0; padding-left: 20px; font-size: 0.94rem; }
.toc li { margin: 5px 0; }

.callout {
  background: rgba(255, 76, 76, 0.06);
  border: 1px solid rgba(255, 76, 76, 0.28);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 26px 0;
}
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

.todo {
  background: #fff8e6;
  border: 1px dashed #d9a441;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 22px 0;
  font-size: 0.9rem;
  color: #6b4b12;
}
.todo strong { color: #6b4b12; }

.fill { color: #b3320f; font-weight: 700; background: #ffe9e2; padding: 1px 6px; border-radius: 4px; }

/* ---------- newsletter (on the dark CTA band) ---------- */

.newsletter {
  margin: 40px auto 0;
  padding: 30px 30px 26px;
  max-width: 620px;
  text-align: left;
  background: rgba(238, 242, 247, 0.05);
  border: 1px solid var(--line-navy);
  border-radius: var(--radius);
}

.newsletter h3 {
  margin: 0 0 8px;
  font-size: 1.28rem;
  letter-spacing: -0.015em;
}

.newsletter > p {
  margin: 0 0 20px;
  color: var(--on-navy-muted);
  font-size: 0.95rem;
}

.nl-row { display: flex; gap: 10px; flex-wrap: wrap; }

.nl-row input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  font: inherit;
  font-size: 0.95rem;
  color: var(--on-navy);
  background: rgba(11, 25, 44, 0.5);
  border: 1px solid var(--line-navy);
  border-radius: 9px;
  padding: 12px 14px;
}
.nl-row input[type="email"]::placeholder { color: rgba(238, 242, 247, 0.4); }
.nl-row input[type="email"]:focus,
.nl-consent input:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 1px;
  border-color: transparent;
}
.nl-row .btn { flex: 0 0 auto; }
.nl-row .btn:disabled { opacity: 0.5; cursor: default; }

.nl-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 16px 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--on-navy-muted);
  cursor: pointer;
}
.nl-consent input {
  flex: 0 0 auto;
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--coral);
}
.nl-consent a { color: var(--on-navy); text-decoration: underline; text-underline-offset: 2px; }

/* honeypot — off-screen rather than display:none, which some bots detect */
.nl-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.nl-status {
  margin: 16px 0 0;
  padding: 12px 14px;
  font-size: 0.88rem;
  color: var(--on-navy);
  background: rgba(255, 76, 76, 0.12);
  border: 1px solid rgba(255, 76, 76, 0.35);
  border-radius: 9px;
}

#nl-sink { display: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- contact form ---------- */

.form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 30px 28px;
  width: min(calc(100vw - 80px), 640px);
}

.field { margin: 0 0 20px; }
.field:last-of-type { margin-bottom: 26px; }

.field label {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  margin: 0 0 7px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 12px 14px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field select { appearance: none; background-image: none; cursor: pointer; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--coral);
  outline-offset: 1px;
  border-color: transparent;
  background: var(--card);
}

.field .hint {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin: 6px 0 0;
}

.form-note {
  font-size: 0.84rem;
  color: var(--muted);
  margin: 16px 0 0;
}

/* ---------- contact cards ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 20px;
  /* the cards breathe wider than the 74ch reading column around them */
  width: min(100%, 900px);
  max-width: none;
  margin: 0 0 12px;
}
.contact-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
}
.contact-card h2 { font-size: 1.05rem; margin: 0 0 8px; padding: 0; }
.contact-card p { margin: 0 0 12px; color: var(--muted); font-size: 0.93rem; }
.contact-card a.mail {
  font-weight: 700;
  color: var(--slate);
  text-decoration: none;
  word-break: break-word;
}
.contact-card a.mail:hover { color: var(--coral); text-decoration: underline; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .wrap { padding: 0 24px; }
  .hero-grid { grid-template-columns: 1fr; gap: 12px; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .hero { padding-top: 62px; }
  /* A narrow, tall hero scales a landscape photo until it is as tall as the
     hero, so only the horizontal crop is left to choose — a vertical offset
     does nothing here. Anchored left of the boat, which otherwise lands behind
     the figures at the bottom. Positions are per background layer, in the same
     order as the shorthand: coral wash, scrim, photo, fallback colour. */
  header.hero {
    background-position: center, center, 22% center, center;
  }
  .hero-phones { padding-bottom: 30px; }
  .hero-phones .phone:first-child { display: none; }
  .nav-links { display: none; }
  section { padding: 66px 0; }
  .legal { padding: 44px 0 66px; }
}

@media (max-width: 520px) {
  .store-badge { min-width: 0; flex: 1 1 100%; }
  .hero-stats { gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- footer social ---------- */

.footer-grid .social {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  color: var(--on-navy-muted);
  text-decoration: none;
  font-size: 0.92rem;
}

.footer-grid .social svg { fill: currentColor; flex: none; }
.footer-grid .social:hover { color: var(--coral); }