/* ==========================================================================
   Clutch Auto Transport — Site stylesheet
   Authored mobile-first. No framework, no page builder.
   This file is the single source of truth for both the static build and the
   WordPress child theme (wp/theme/assets/site.css is a copy, see build.py).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts. Self-hosted Inter variable. font-display:optional is deliberate:
   it eliminates the layout shift that a swap-in webfont causes on the h1,
   which is the single biggest CLS source on a hero-led page.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url("../fonts/inter-variable.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4, h5 {
  color: var(--c-heading);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: -0.021em;
  text-wrap: balance;
}
h3, h4, h5 { line-height: var(--lh-snug); }
p, li { text-wrap: pretty; }

a { color: var(--c-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-link-hover); }

:focus-visible {
  outline: 3px solid var(--c-sky);
  outline-offset: 2px;
  border-radius: 3px;
}

.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;
}

.skip-link {
  position: absolute; left: 8px; top: -100px;
  background: var(--c-navy); color: #fff;
  padding: .65rem 1rem; border-radius: var(--r-sm);
  z-index: 200; font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 8px; color: #fff; }

/* --------------------------------------------------------------------------
   2. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
@media (max-width: 600px) { .container { width: min(100% - 2rem, var(--container)); } }
.container--wide  { max-width: var(--container-wide); }
.container--prose { width: min(100% - 2.5rem, var(--container-prose)); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .62); }
.section--tint  { background: var(--c-surface); }
.section--tint-2{ background: var(--c-surface-2); }

/* Dark section. Everything inside inverts. */
.section--dark {
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(55,201,239,.16), transparent 60%),
    linear-gradient(160deg, var(--c-ink) 0%, var(--c-ink-2) 62%, #0A2A4A 100%),
    var(--c-ink);
  color: #C7D8E8;
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5 { color: #fff; }
.section--dark a { color: var(--c-aqua); }
.section--dark .eyebrow { color: var(--c-sky); }
.section--dark .lede { color: #B9CEE2; }

/* The signature five-color stripe */
.stripe {
  height: 6px;
  background: var(--stripe);
  border: 0;
}
.stripe--thin { height: 4px; }
.stripe--rule { height: 5px; width: 84px; border-radius: 3px; }

/* Grids */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid { gap: var(--s-6); }
}

.split {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-9); }
  .split--wide-left  { grid-template-columns: 1.15fr .85fr; }
  .split--wide-right { grid-template-columns: .85fr 1.15fr; }
}

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   3. Typography helpers
   -------------------------------------------------------------------------- */
.eyebrow {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-sky-deep);
  margin-bottom: var(--s-3);
}
.display { font-size: var(--t-5xl); letter-spacing: -0.03em; }
.h1 { font-size: var(--t-4xl); }
.h2 { font-size: var(--t-3xl); }
.h3 { font-size: var(--t-2xl); }
.h4 { font-size: var(--t-xl); }

.lede {
  font-size: var(--t-lg);
  color: var(--c-mute);
  max-width: 62ch;
}
.section-head { max-width: 68ch; margin-bottom: var(--s-7); }
.section-head--center { margin-inline: auto; text-align: center; }

/* The answer-first paragraph that opens every page. This is the block that
   answer engines lift, so it gets real visual treatment, not a muted intro. */
.answer {
  font-size: var(--t-lg);
  color: var(--c-ink);
  border-left: 5px solid var(--c-sky);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  max-width: 68ch;
  font-weight: 450;
}

.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-size: var(--t-2xl); margin-top: var(--s-8); }
.prose h3 { font-size: var(--t-xl);  margin-top: var(--s-6); }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li + li { margin-top: .4rem; }
.prose strong { color: var(--c-ink); font-weight: 650; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--c-navy);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  min-height: 48px;              /* touch target */
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 650;
  font-size: var(--t-base);
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
  box-shadow: var(--shadow-sm);
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); }

.btn--primary   { --btn-bg: var(--c-navy); }
.btn--primary:hover { --btn-bg: var(--c-link-hover); }

.btn--accent    { --btn-bg: var(--c-sky); --btn-fg: var(--c-ink); }
.btn--accent:hover { --btn-bg: var(--c-teal); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-navy);
  border-color: var(--c-line);
  box-shadow: none;
}
.btn--ghost:hover { --btn-bg: var(--c-surface); border-color: var(--c-navy); }

.btn--on-dark {
  --btn-bg: rgba(255,255,255,.08);
  --btn-fg: #fff;
  border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
}
.btn--on-dark:hover { --btn-bg: rgba(255,255,255,.16); }

.btn--lg { padding: 1.05rem 1.9rem; font-size: var(--t-lg); min-height: 56px; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 460px) { .btn-row .btn { width: 100%; } }

.arrow-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 650; text-decoration: none;
}
.arrow-link::after { content: "\2192"; transition: transform var(--dur) var(--ease); }
.arrow-link:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. Header + navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.site-header__bar {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 30px; width: auto; }
@media (max-width: 900px) { .brand img { height: 25px; } }

/* Utility strip above the nav, desktop only. Phone + portal login. */
.utility {
  display: none;
  background: var(--c-ink);
  color: #A9C2D8;
  font-size: var(--t-xs);
}
@media (min-width: 1000px) {
  .utility { display: block; }
  .utility__inner {
    display: flex; align-items: center; justify-content: flex-end;
    gap: var(--s-5); height: 36px;
  }
  .utility a { color: #D6E5F2; text-decoration: none; font-weight: 550; }
  .utility a:hover { color: #fff; }
  .utility__sep { width: 1px; height: 14px; background: rgba(255,255,255,.18); }
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .35rem; list-style: none; padding: 0; margin: 0; }
.nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .6rem .8rem;
  font-weight: 600; font-size: .95rem;
  color: var(--c-ink);
  text-decoration: none;
  border-radius: var(--r-sm);
  background: none; border: 0;
  white-space: nowrap;
}
.nav__link:hover, .nav__item[data-open="true"] .nav__link {
  background: var(--c-surface); color: var(--c-navy);
}
.nav__link[aria-current="page"] { color: var(--c-navy); }
.nav__caret {
  width: 9px; height: 9px; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform var(--dur) var(--ease);
}
.nav__item[data-open="true"] .nav__caret { transform: rotate(-135deg) translate(-3px,-3px); }

/* Mega panel */
.nav__panel {
  position: absolute;
  left: 50%; transform: translateX(-50%) translateY(8px);
  top: calc(100% + 1px);
  width: min(100vw - 2.5rem, var(--container));
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s-6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.nav__item[data-open="true"] .nav__panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__panel-grid { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) {
  .nav__panel-grid { grid-template-columns: 2fr 1fr; }
  .nav__panel-grid--single { grid-template-columns: 1fr; }
}
.nav__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: .25rem var(--s-5); }
.nav__heading {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--c-mute); margin-bottom: var(--s-3);
  grid-column: 1 / -1;
}
.nav__entry {
  display: block; padding: .6rem .7rem; border-radius: var(--r-sm);
  text-decoration: none; color: var(--c-ink); font-weight: 600; font-size: .94rem;
}
.nav__entry span { display: block; font-weight: 450; font-size: .8rem; color: var(--c-mute); margin-top: .1rem; }
.nav__entry:hover { background: var(--c-surface); color: var(--c-navy); }

/* Promo card inside the mega panel (the Portal) */
.nav__promo {
  background: linear-gradient(155deg, var(--c-ink), var(--c-ink-2));
  color: #C7D8E8;
  border-radius: var(--r-md);
  padding: var(--s-5);
  position: relative; overflow: hidden;
}
.nav__promo::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--stripe);
}
.nav__promo h4 { color: #fff; font-size: var(--t-base); margin-bottom: .4rem; }
.nav__promo p  { font-size: .85rem; margin-bottom: var(--s-4); }
.nav__promo ul { list-style: none; padding: 0; margin: 0 0 var(--s-4); font-size: .85rem; }
.nav__promo li { padding-left: 1.2rem; position: relative; margin-bottom: .25rem; }
.nav__promo li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-sky);
}

.nav__cta { margin-left: .5rem; }

/* Mobile toggle */
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; margin-left: auto;
  background: none; border: 1px solid var(--c-line); border-radius: var(--r-sm);
  padding: 0 11px;
}
.nav-toggle span {
  display: block; height: 2px; background: var(--c-ink); border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 999px) {
  /* backdrop-filter on an ancestor makes it the containing block for fixed
     descendants, which clipped the drawer to the header's height. Drop it on
     mobile so .nav can actually be viewport-fixed. */
  .site-header { backdrop-filter: none; background: #fff; }
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: #fff;
    padding: var(--s-5) 0 var(--s-9);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .28s var(--ease);
    margin-left: 0;
  }
  .nav[data-open="true"] { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; width: min(100% - 2rem, 640px); margin-inline: auto; }
  .nav__item { border-bottom: 1px solid var(--c-line-soft); }
  .nav__link { width: 100%; justify-content: space-between; padding: 1rem .25rem; font-size: 1.05rem; }
  .nav__panel {
    position: static; transform: none; width: 100%;
    border: 0; box-shadow: none; border-radius: 0;
    padding: 0 0 var(--s-4) .5rem;
    display: none; opacity: 1; visibility: visible; pointer-events: auto;
  }
  .nav__item[data-open="true"] .nav__panel { display: block; transform: none; }
  .nav__panel-grid { gap: var(--s-4); }
  .nav__cols { grid-template-columns: 1fr; }
  .nav__cta { margin: var(--s-5) 0 0; }
  .nav__cta .btn { width: 100%; }
  body[data-nav-open="true"] { overflow: hidden; }
}
@media (min-width: 1000px) {
  .nav-toggle { display: none; }
  .nav__item { position: static; }
  .site-header__bar { position: relative; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  color: #D3E3F1;
  background: var(--c-ink);
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(11,37,66,.96) 0%, rgba(11,37,66,.92) 45%, rgba(11,37,66,.80) 72%, rgba(11,37,66,.74) 100%),
    radial-gradient(900px 420px at 12% 8%, rgba(55,201,239,.20), transparent 65%);
}
.hero__inner {
  position: relative; z-index: 1;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
}
.hero__grid { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: 1.08fr .92fr; gap: var(--s-9); }
}
.hero h1 { color: #fff; font-size: var(--t-5xl); letter-spacing: -0.032em; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--c-sky), var(--c-teal) 55%, var(--c-aqua));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lede { font-size: var(--t-lg); color: #B7CFE4; max-width: 54ch; margin-top: var(--s-5); }
.hero .eyebrow { color: var(--c-sky); }
.hero__actions { margin-top: var(--s-7); }
.hero__stripe { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--stripe); z-index: 2; }

/* Trust bar directly under the hero */
.trustbar { background: #fff; border-bottom: 1px solid var(--c-line); }
.trustbar__inner {
  display: grid; gap: var(--s-4) var(--s-5);
  grid-template-columns: repeat(2, 1fr);
  padding-block: var(--s-5);
}
@media (min-width: 900px) { .trustbar__inner { grid-template-columns: repeat(4, 1fr); } }
.trustbar__item { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; font-weight: 600; color: var(--c-ink); }
.trustbar__item svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--c-sky-deep); margin-top: 1px; }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--c-sky);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #C6D5E4; }
.card:hover::before { transform: scaleX(1); }
.card h3 { font-size: var(--t-xl); margin-bottom: var(--s-3); }
.card p { font-size: .95rem; }
.card__foot { margin-top: auto; padding-top: var(--s-5); }

/* Whole card clickable, keyboard-safe: the link stretches. */
.card--link h3 a { text-decoration: none; color: inherit; }
.card--link h3 a::after { content: ""; position: absolute; inset: 0; }

.card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: linear-gradient(145deg, var(--c-navy), var(--c-blue));
  color: #fff;
  margin-bottom: var(--s-4);
}
.card__icon svg { width: 22px; height: 22px; }

.card--dark {
  background: linear-gradient(155deg, var(--c-ink), var(--c-ink-2));
  border-color: rgba(255,255,255,.12);
  color: #C1D6E8;
}
.card--dark h3 { color: #fff; }

/* Audience card, used on the two section hubs */
.card--audience .who {
  font-size: .8rem; color: var(--c-mute); border-top: 1px solid var(--c-line-soft);
  margin-top: var(--s-4); padding-top: var(--s-4);
}

/* --------------------------------------------------------------------------
   8. Numbered process steps
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .steps--4 { grid-template-columns: repeat(4,1fr); } .steps--3 { grid-template-columns: repeat(3,1fr); } }
.step { counter-increment: step; position: relative; padding-top: var(--s-6); }
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-size: var(--t-sm); font-weight: 800; letter-spacing: .08em;
  color: var(--c-sky-deep);
}
.step::after {
  content: ""; position: absolute; top: 10px; left: 2.4rem; right: -1rem; height: 2px;
  background: linear-gradient(90deg, var(--c-line), transparent);
}
@media (max-width: 899px) { .step::after { display: none; } }
.steps > .step:last-child::after { display: none; }
.step h3 { font-size: var(--t-lg); margin-bottom: .5rem; }
.step p { font-size: .93rem; }

/* --------------------------------------------------------------------------
   9. Stats
   -------------------------------------------------------------------------- */
.stats { display: grid; gap: var(--s-6); grid-template-columns: repeat(2,1fr); }
@media (min-width: 900px) { .stats--4 { grid-template-columns: repeat(4,1fr); } .stats--3 { grid-template-columns: repeat(3,1fr); } }
.stat__num {
  font-size: var(--t-3xl); font-weight: 800; color: var(--c-navy);
  letter-spacing: -0.03em; line-height: 1;
}
.section--dark .stat__num { color: var(--c-sky); }
.stat__label { font-size: .88rem; color: var(--c-mute); margin-top: .5rem; }
.section--dark .stat__label { color: #9FB8CE; }

/* --------------------------------------------------------------------------
   10. Tables (transit times, pricing, comparisons)
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: #fff;
}
table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: .94rem; }
caption { text-align: left; padding: var(--s-4) var(--s-5) 0; font-size: .85rem; color: var(--c-mute); }
thead th {
  text-align: left; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .07em; color: var(--c-mute); font-weight: 700;
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--c-line);
  background: var(--c-surface); white-space: nowrap;
}
tbody td { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--c-line-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: #FBFDFE; }
tbody th { text-align: left; padding: var(--s-4) var(--s-5); font-weight: 650; color: var(--c-ink); white-space: nowrap; }

/* --------------------------------------------------------------------------
   11. FAQ accordion. Native details/summary. No JS required.
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--c-line); }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5) 0;
  font-weight: 650; font-size: var(--t-lg); color: var(--c-ink);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 14px; height: 14px; margin-top: .4rem;
  border-right: 2px solid var(--c-sky-deep); border-bottom: 2px solid var(--c-sky-deep);
  transform: rotate(45deg); transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details[open] summary { color: var(--c-navy); }
.faq__body { padding: 0 0 var(--s-5); max-width: 76ch; }
.faq__body > * + * { margin-top: var(--s-3); }

/* --------------------------------------------------------------------------
   12. Callouts, pills, badges
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .34rem .8rem;
  background: rgba(55,201,239,.13);
  color: var(--c-sky-deep);
  border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .03em;
}
.pill--on-dark { background: rgba(255,255,255,.12); color: var(--c-aqua); }

.callout {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 5px solid var(--c-sky);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.callout h4 { font-size: var(--t-base); margin-bottom: .4rem; }
.callout p { font-size: .93rem; }

/* Placeholder marker. Anything still awaiting real input from Brian renders
   with this so it is impossible to ship by accident. */
.placeholder {
  border: 1px dashed #C99A06;
  background: #FFFBEB;
  color: #7A5C00;
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  font-size: .9rem;
}
.placeholder strong { color: #6B4E00; }
.placeholder::before {
  content: "PLACEHOLDER";
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  color: #B98904; margin-bottom: .35rem;
}

/* --------------------------------------------------------------------------
   13. Breadcrumbs
   -------------------------------------------------------------------------- */
.crumbs { font-size: var(--t-xs); color: var(--c-mute); padding-block: var(--s-4); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.crumbs li::after { content: "/"; margin-left: .4rem; color: var(--c-line); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--c-mute); text-decoration: none; }
.crumbs a:hover { color: var(--c-navy); text-decoration: underline; }

/* Page header for interior pages */
.page-head { background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.page-head__inner { padding-block: var(--s-7) var(--s-8); }
.page-head h1 { font-size: var(--t-4xl); max-width: 20ch; }
.page-head .lede { margin-top: var(--s-5); }
.page-head--dark { background: var(--c-ink); border-bottom: 0; }

/* --------------------------------------------------------------------------
   14. Quote form
   -------------------------------------------------------------------------- */
.quote-card {
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.5);
}
.quote-card__head { padding: var(--s-6) var(--s-6) 0; }
.quote-card__head h2 { font-size: var(--t-xl); }
.quote-card__head p { font-size: .9rem; color: var(--c-mute); margin-top: .4rem; }
.quote-card__body { padding: var(--s-5) var(--s-6) var(--s-6); }
.quote-card__stripe { height: 5px; background: var(--stripe); }

/* Hero self-identification boxes. Brian's round 1 feedback: the business vs.
   individual split has to stand out more and each box has to read clearly as a
   clickable CTA, not as a panel of text. */
.fork-box {
  display: block;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  margin-bottom: .75rem;
  background: rgba(255,255,255,.05);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.fork-box:last-child { margin-bottom: 0; }
.fork-box--primary { background: rgba(55,201,239,.14); border-color: rgba(55,201,239,.45); }
.fork-box__title { display: block; color: #fff; font-size: 1.05rem; margin-bottom: .25rem; }
.fork-box__text { display: block; color: #B9CEE2; font-size: .87rem; }
.fork-box__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .7rem;
  color: var(--c-sky);
  font-weight: 650;
  font-size: .87rem;
}
.fork-box__cta span { transition: transform .18s ease; }
.fork-box:hover, .fork-box:focus-visible {
  background: rgba(55,201,239,.2);
  border-color: var(--c-sky);
  transform: translateY(-2px);
}
.fork-box:hover .fork-box__cta span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .fork-box, .fork-box__cta span { transition: none; }
  .fork-box:hover, .fork-box:focus-visible { transform: none; }
  .fork-box:hover .fork-box__cta span { transform: none; }
}

.field { margin-bottom: var(--s-4); }
.field label { display: block; font-size: .85rem; font-weight: 650; color: var(--c-ink); margin-bottom: .35rem; }
.field .hint { font-size: .78rem; color: var(--c-mute); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .8rem .9rem;
  min-height: 48px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: #fff;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--c-sky);
  box-shadow: 0 0 0 3px rgba(55,201,239,.22);
}
.field-row { display: grid; gap: var(--s-4); }
@media (min-width: 520px) { .field-row--2 { grid-template-columns: 1fr 1fr; } }
.radio-row { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.radio-chip { flex: 1 1 auto; }
.radio-chip input { position: absolute; opacity: 0; pointer-events: none; }
.radio-chip span {
  display: block; text-align: center;
  padding: .7rem 1rem; min-height: 46px;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.radio-chip input:checked + span {
  border-color: var(--c-navy); background: rgba(19,83,138,.06); color: var(--c-navy);
}
.radio-chip input:focus-visible + span { outline: 3px solid var(--c-sky); outline-offset: 2px; }

.form-note { font-size: .78rem; color: var(--c-mute); margin-top: var(--s-4); }

/* Progress dots for the multi-step quote */
.steps-dots { display: flex; gap: .4rem; align-items: center; margin-bottom: var(--s-5); }
.steps-dots span {
  height: 4px; flex: 1; border-radius: 2px; background: var(--c-line);
}
.steps-dots span[data-done="true"] { background: var(--c-sky); }

/* --------------------------------------------------------------------------
   15. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: linear-gradient(150deg, var(--c-ink) 0%, #143A63 60%, #0F4C7D 100%);
  color: #C7D8E8;
  overflow: hidden;
}
.cta-band::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--stripe); }
.cta-band::after {
  content: ""; position: absolute; right: -10%; top: -40%;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(55,201,239,.18), transparent 62%);
}
.cta-band__inner { position: relative; z-index: 1; padding-block: var(--section-y); }
.cta-band h2 { color: #fff; font-size: var(--t-3xl); max-width: 22ch; }
.cta-band p { margin-top: var(--s-4); max-width: 56ch; font-size: var(--t-lg); color: #B9CEE2; }
.cta-band .btn-row { margin-top: var(--s-6); }

/* Dual-path CTA: the B2B/B2C fork */
.fork { display: grid; gap: var(--s-5); }
@media (min-width: 860px) { .fork { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
.fork__panel {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.fork__panel--primary {
  background: rgba(55,201,239,.10);
  border-color: rgba(55,201,239,.42);
}
.fork__panel h3 { color: #fff; font-size: var(--t-xl); margin-bottom: .6rem; }
.fork__panel p { font-size: .95rem; margin-bottom: var(--s-5); color: #B9CEE2; }

/* --------------------------------------------------------------------------
   16. Logo / proof strip
   -------------------------------------------------------------------------- */
.proof { padding-block: var(--s-7); }
.proof__label {
  text-align: center; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--c-mute); margin-bottom: var(--s-5);
}
.proof__row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-5) var(--s-8); align-items: center;
}
.proof__slot {
  height: 44px; min-width: 130px;
  display: grid; place-items: center;
  border: 1px dashed var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-mute); font-size: .72rem; letter-spacing: .06em;
  padding-inline: var(--s-4);
  background: #fff;
}

/* --------------------------------------------------------------------------
   17. Resource / article grid
   -------------------------------------------------------------------------- */
.res-card { padding: var(--s-5); }
.res-card .kicker {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-sky-deep); margin-bottom: var(--s-3);
}
.res-card h3 { font-size: var(--t-lg); }

/* Sidebar layout for resource articles */
.with-aside { display: grid; gap: var(--s-8); }
@media (min-width: 1000px) {
  .with-aside { grid-template-columns: minmax(0,1fr) 320px; gap: var(--s-9); align-items: start; }
  .aside { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
.aside__box {
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  padding: var(--s-5); background: var(--c-surface);
}
.aside__box + .aside__box { margin-top: var(--s-5); }
.aside__box h4 { font-size: var(--t-base); margin-bottom: var(--s-3); }
.aside__list { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.aside__list li + li { margin-top: .55rem; }
.aside__list a { text-decoration: none; }
.aside__list a:hover { text-decoration: underline; }

/* Table of contents */
.toc { font-size: .9rem; }
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li { counter-increment: toc; margin-bottom: .5rem; padding-left: 1.6rem; position: relative; }
.toc li::before {
  content: counter(toc); position: absolute; left: 0; top: 0;
  font-size: .72rem; font-weight: 700; color: var(--c-sky-deep);
  width: 1.1rem; text-align: right;
}
.toc a { text-decoration: none; color: var(--c-slate); }
.toc a:hover { color: var(--c-navy); text-decoration: underline; }

/* --------------------------------------------------------------------------
   18. Media / figures
   -------------------------------------------------------------------------- */
.figure { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--c-surface); }
.figure img { width: 100%; }
.figure--framed { border: 1px solid var(--c-line); }

/* Placeholder image block, clearly marked, brand-consistent */
.img-ph {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, rgba(19,83,138,.07), rgba(55,201,239,.10)),
    var(--c-surface);
  border: 1px dashed #B9CBDD;
  color: var(--c-mute);
  text-align: center;
  padding: var(--s-5);
  overflow: hidden;
}
.img-ph::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--stripe); opacity: .55;
}
.img-ph span { font-size: .8rem; letter-spacing: .04em; max-width: 30ch; }
.img-ph strong { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #90A6BB; margin-bottom: .5rem; }
.img-ph--tall  { aspect-ratio: 3 / 4; }
.img-ph--wide  { aspect-ratio: 21 / 9; }
.img-ph--square{ aspect-ratio: 1 / 1; }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--c-ink); color: #9FB8CE; font-size: .9rem; }
.site-footer__stripe { height: 6px; background: var(--stripe); }
.site-footer__top { padding-block: var(--s-9) var(--s-8); }
.site-footer__grid { display: grid; gap: var(--s-7); }
@media (min-width: 760px)  { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .site-footer__grid { grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--s-6); } }
.site-footer h5 {
  color: #fff; font-size: var(--t-xs); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; margin-bottom: var(--s-4); font-weight: 700;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: .55rem; }
.site-footer a { color: #B9CEE2; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__brand img { height: 30px; margin-bottom: var(--s-5); }
.site-footer__brand p { max-width: 34ch; }
.footer-contact { margin-top: var(--s-5); }
.footer-contact a { display: block; font-weight: 650; color: #fff; font-size: var(--t-lg); }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.10);
  padding-block: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5);
  align-items: center; justify-content: space-between;
  font-size: .82rem;
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.dircks-endorse {
  display: inline-flex; align-items: center; gap: .5rem;
  color: #B9CEE2;
}
.dircks-endorse strong { color: #fff; font-weight: 650; }

/* --------------------------------------------------------------------------
   20. Utilities
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-0 { margin-bottom: 0; }
.max-prose { max-width: 68ch; }
.nowrap { white-space: nowrap; }

/* Reveal on scroll. Progressive: without JS everything is simply visible. */
/* Scoped to .js, which site.js sets on <html> immediately. Without JS the
   content is simply visible: never hide content behind a script that might
   not run. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(14px); }
  .js [data-reveal].is-in {
    opacity: 1; transform: none;
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
}

/* --------------------------------------------------------------------------
   21. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cta-band, .nav, .skip-link { display: none !important; }
  body { color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* --------------------------------------------------------------------------
   22. HighLevel form embed
   The LeadConnector widget ships inline height:100%, which collapses to about
   150px because the parent has no height, and form_embed.js does not resize
   it here. Explicit px heights are the fix; these values were measured on the
   live Squarespace site (desktop ~979-993px, 343px wide -> 1213, 320 -> 1273).
   -------------------------------------------------------------------------- */
.clutch-hl-embed { padding: var(--s-4) var(--s-5) var(--s-5); }
.clutch-hl-embed iframe {
  /* HighLevel's form_embed.js (iFrameResizer) sets the real height inline to
     fit the form (about 1190px desktop for General contact). Never override
     it with !important: that clipped the Submit button. min-height only
     covers the moment before the script runs. */
  width: 100% !important;
  min-height: 1000px;
  border: none;
  border-radius: var(--r-md);
  display: block;
  background: #fff;
}

/* --------------------------------------------------------------------------
   23. Trust signals
   -------------------------------------------------------------------------- */
.creds {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: #fff;
  padding: var(--s-6);
}
@media (min-width: 620px) { .creds { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .creds { grid-template-columns: repeat(5, 1fr); gap: var(--s-5); } }
.cred { text-align: center; position: relative; }
@media (min-width: 900px) {
  .cred + .cred::before {
    content: ""; position: absolute; left: calc(var(--s-5) / -2); top: 10%;
    height: 80%; width: 1px; background: var(--c-line);
  }
}
.cred__v {
  font-size: var(--t-lg); font-weight: 750; color: var(--c-ink);
  letter-spacing: -0.02em; line-height: 1.2;
}
.cred__l {
  font-size: .74rem; color: var(--c-mute); margin-top: .35rem;
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
}
.creds__note {
  text-align: center; font-size: .8rem; color: var(--c-mute);
  margin-top: var(--s-5);
}
.creds__note a { color: var(--c-sky-deep); }

/* Promise cards */
.guarantees { display: grid; gap: var(--s-5); }
@media (min-width: 700px)  { .guarantees { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .guarantees { grid-template-columns: repeat(4, 1fr); } }
.guarantee {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  background: #fff;
  position: relative;
}
.section--dark .guarantee {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}
.guarantee__icon {
  width: 40px; height: 40px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: var(--s-4);
  background: rgba(55,201,239,.14); color: var(--c-sky-deep);
}
.section--dark .guarantee__icon { background: rgba(55,201,239,.18); color: var(--c-sky); }
.guarantee__icon svg { width: 20px; height: 20px; }
.guarantee h3 { font-size: var(--t-base); margin-bottom: .5rem; }
.guarantee p { font-size: .9rem; }

/* Checkmark list used beside forms */
.trust-list { list-style: none; padding: 0; margin: 0; }
.trust-list li { display: flex; gap: .6rem; margin-bottom: .8rem; align-items: flex-start; }
.trust-list svg { flex: 0 0 auto; width: 19px; height: 19px; color: var(--c-sky); margin-top: 2px; }

/* Licensing line in the footer */
.footer-cred {
  font-size: .78rem; color: #8FA9C2; margin-top: var(--s-4);
  line-height: 1.6;
}
.footer-cred strong { color: #C7D8E8; font-weight: 650; }

/* --------------------------------------------------------------------------
   24. Dark-surface contrast corrections
   Light-context defaults (near-black headings, navy strong text, navy ghost
   buttons) fail badly on the dark sections. Anything that sets an ink or navy
   color must be re-stated for every dark surface: .section--dark, .cta-band,
   .hero, and the dark card variant.
   -------------------------------------------------------------------------- */
.section--dark .prose strong,
.cta-band .prose strong,
.card--dark strong,
.hero strong {
  color: #FFFFFF;
}

.section--dark .prose,
.cta-band .prose { color: #C7D8E8; }

.section--dark .prose a,
.cta-band .prose a { color: var(--c-aqua); }

.section--dark code,
.cta-band code,
.hero code {
  background: rgba(255,255,255,.12);
  color: var(--c-aqua);
  padding: .1em .35em;
  border-radius: 4px;
}

/* Buttons on dark. Navy on navy is the worst offender: the primary CTA was
   effectively invisible. Sky is the accessible accent against --c-ink. */
.section--dark .btn--primary,
.cta-band .btn--primary,
.hero .btn--primary {
  --btn-bg: var(--c-sky);
  --btn-fg: var(--c-ink);
}
.section--dark .btn--primary:hover,
.cta-band .btn--primary:hover,
.hero .btn--primary:hover { --btn-bg: var(--c-teal); }

.section--dark .btn--ghost,
.cta-band .btn--ghost,
.hero .btn--ghost {
  --btn-bg: rgba(255,255,255,.06);
  --btn-fg: #FFFFFF;
  border-color: rgba(255,255,255,.34);
}
.section--dark .btn--ghost:hover,
.cta-band .btn--ghost:hover,
.hero .btn--ghost:hover {
  --btn-bg: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.6);
}

/* Trust-list and step text on dark */
.section--dark .step p,
.section--dark .card p { color: #C1D6E8; }
.section--dark .step h3 { color: #FFFFFF; }
.section--dark .step::before { color: var(--c-sky); }
.section--dark .step::after {
  background: linear-gradient(90deg, rgba(255,255,255,.22), transparent);
}

/* Callouts and placeholders keep their light treatment, so give them a light
   ground rather than letting dark-section colors bleed through. */
.section--dark .callout {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  border-left-color: var(--c-sky);
  color: #C7D8E8;
}
.section--dark .callout h4 { color: #FFFFFF; }

.section--dark .placeholder {
  background: rgba(255, 214, 102, .10);
  border-color: rgba(255, 214, 102, .45);
  color: #F5DFA3;
}
.section--dark .placeholder strong { color: #FFE9B0; }
.section--dark .placeholder::before { color: #E8C15F; }
.section--dark .placeholder code {
  background: rgba(255,255,255,.14); color: #FFE9B0;
}

/* Form-note and hints on dark */
.section--dark .form-note { color: #A5BDD3; }

/* The image placeholder sits on dark grounds too */
.section--dark .img-ph {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.26);
  color: #A5BDD3;
}
.section--dark .img-ph strong { color: #8FA9C2; }

/* A button is not a link. `.section--dark a` (0,1,1) was outranking `.btn`
   (0,1,0), repainting button labels with the dark-section link color: aqua on
   sky measured 1.39:1. Restate the button's own foreground at higher
   specificity on every dark surface. */
.section--dark a.btn,
.cta-band a.btn,
.hero a.btn,
.card--dark a.btn,
.nav__promo a.btn {
  color: var(--btn-fg);
}

/* The quote card is a LIGHT surface nested inside a dark section, so the
   dark-section inversions must be undone inside it or the card's heading
   renders white on white (measured 1:1). Reset the light palette. */
.section--dark .quote-card,
.cta-band .quote-card { color: var(--c-text); }
.section--dark .quote-card h1, .section--dark .quote-card h2,
.section--dark .quote-card h3, .section--dark .quote-card h4,
.cta-band .quote-card h1, .cta-band .quote-card h2,
.cta-band .quote-card h3, .cta-band .quote-card h4 { color: var(--c-heading); }
.section--dark .quote-card p,
.cta-band .quote-card p { color: var(--c-mute); }
.section--dark .quote-card a:not(.btn),
.cta-band .quote-card a:not(.btn) { color: var(--c-link); }

/* --------------------------------------------------------------------------
   25. Paid landing pages
   Same design system, minimal chrome. Every nav link on a paid landing page is
   a way for a click you paid for to leave without converting.
   -------------------------------------------------------------------------- */
.site-header--landing { position: static; }
.site-header--landing .site-header__bar { justify-content: space-between; }
.landing-contact { margin-left: auto; }
.landing-phone {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: var(--t-lg);
  color: var(--c-navy); text-decoration: none;
  padding: .5rem .9rem; border-radius: var(--r-md);
  min-height: 48px;
}
.landing-phone:hover { background: var(--c-surface); }
.landing-phone svg { width: 19px; height: 19px; }
@media (max-width: 520px) {
  .landing-phone span { display: none; }   /* icon-only tap target on small screens */
  .landing-phone { padding: .5rem; }
}
.site-footer--landing .site-footer__bottom { border-top: 0; }