/* One navy palette for the whole site, regardless of the visitor's
   light/dark setting. */
:root {
  color-scheme: dark;

  --ground:        #000f24;
  --surface:       #072650;
  --surface-sunk:  #011a38;
  --band:          #011a38;

  --ink:           #eaf0f8;
  --ink-muted:     #b0bfd5;
  --ink-faint:     #8d9db6;

  --rule:          #173d6b;
  --rule-strong:   #2a5185;

  --accent:        #7db3f2;
  --accent-deep:   #a6caf7;
  --accent-wash:   #0a2f5c;
  --teal:          #4fc0cf;
  --on-teal:       #0a1a33;
  --ledger:        #f08a78;
  --ledger-wash:   #2e1f2a;

  /* Button / highlight colour: the gold of the logo's "L".
     (Tried soft coral: #ff8a70, hover #ffa08a.) */
  --cta:       #e4c073;
  --cta-hover: #eed08f;
  --cta-deep:  #d3aa55;
  --cta-light: #f4dca6;
  --cta-rgb:   228, 192, 115;

  --masthead-bg:    #0f2b50;
  --masthead-ink:   #ffffff;
  --masthead-muted: #c3d0e4;
  --masthead-rule:  rgba(255, 255, 255, 0.28);

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg:   1.1875rem;
  --fs-xl:   1.4375rem;
  --fs-2xl:  1.875rem;
  --fs-3xl:  2.375rem;

  /* Sora (headings, nav, buttons) and Inter (reading text): both SIL Open
     Font License, served by Google Fonts. */
  --display: "Sora", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --label:   "Sora", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

  --measure: 68ch;
  --wide:    1120px;
  --radius:  16px;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-underline-offset: 0.18em;
}
/* Tabular figures only where digits need to line up. Inter widens hyphens
   under tabular-nums, which spaced out "W-2" in running text. */
table, .price, .hours { font-variant-numeric: tabular-nums; }

img, svg { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.16;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.015em;
}

p { margin: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#nl-badge-frame, [id^="nl-badge"] { display: none !important; }

.skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 50;
  background: var(--masthead-ink);
  color: var(--masthead-bg);
  padding: 0.7em 1.1em;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  transition: top 140ms ease;
}
.skip:focus { top: 12px; }

.placeholder {
  background: var(--ledger-wash);
  color: var(--ledger);
  font-family: var(--label);
  font-size: 0.92em;
  padding: 0.1em 0.3em;
  border-radius: 2px;
}

.shell {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (max-width: 520px) { .shell { padding-inline: 18px; } }

.measure { max-width: var(--measure); }

.eyebrow {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--teal);
  margin: 0;
}

/* Transparent header. Inner pages sit on the light ground, so the nav uses ink
   colours; the home page lays it over the navy hero (.masthead--overlay). */
.masthead {
  --nav-ink:   var(--ink);
  --nav-muted: var(--ink-muted);
  --nav-rule:  var(--rule-strong);
  --nav-panel: var(--surface);
  /* Stays pinned to the top while scrolling. Transparent at the very top of
     the page; once scrolled, script.js adds .is-scrolled and it gains a
     translucent dark bar so it reads clearly over what passes underneath. */
  position: sticky;
  top: 0;
  z-index: 40;
  background: transparent;
  border-bottom: 1px solid transparent;
  color: var(--nav-ink);
  transition: background-color 250ms ease, border-color 250ms ease;
}
.masthead.is-scrolled {
  background: rgba(0, 8, 22, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.masthead--overlay {
  --nav-ink:   #ffffff;
  --nav-muted: #c3d0e4;
  --nav-rule:  rgba(255, 255, 255, 0.4);
  --nav-panel: #0f2b50;
}

.masthead :focus-visible { outline-color: var(--nav-ink); }
.masthead-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-block: 18px 12px;
}

.brand { display: inline-flex; flex: none; }
.brand img { display: block; width: auto; height: 38px; }

.masthead nav .nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.45em 1.05em;
  border-radius: 999px;
  background: var(--accent);
  color: var(--surface);
  font-weight: 600;
  transition: background-color 150ms ease, transform 160ms var(--ease-out);
}
.masthead nav .nav-cta:hover { background: var(--accent-deep); color: var(--surface); transform: translateY(-1px); }
.masthead nav .nav-cta::after { display: none; }
.masthead--overlay nav .nav-cta { background: var(--cta); color: #0a1f3d; }
.masthead--overlay nav .nav-cta:hover { background: var(--cta-hover); color: #0a1f3d; }

@media (max-width: 520px) {
  .masthead-inner { padding-block: 14px 10px; }
  .brand img { height: 34px; }
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--nav-ink);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 180ms ease, opacity 180ms ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 700px) {
  .has-js .nav-toggle { display: inline-flex; margin-left: auto; }
  /* On phones the tabs drop down as a solid panel so they stay readable over
     whatever is underneath. */
  .has-js .masthead nav ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 16px; right: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0;
    background: var(--nav-panel);
    border: 1px solid var(--nav-rule);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 43, 80, 0.28);
    text-align: center;
  }
  .has-js .masthead.is-open nav ul { display: flex; }
  .has-js .masthead nav a {
    display: block;
    padding: 12px 8px;
    font-size: var(--fs-base);
    border-bottom: 0;
  }
  .has-js .masthead nav .nav-cta { display: block; margin: 6px 14px 8px; }
}

.masthead nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px 26px;
  list-style: none;
  margin: 0; padding: 0;
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.masthead nav a {
  color: var(--nav-muted);
  text-decoration: none;
  display: inline-block;
  padding-block: 8px;
  border-bottom: 1px solid transparent;
}
.masthead nav a:hover { color: var(--nav-ink); border-bottom-color: var(--nav-rule); }

.masthead nav a {
  transition: color 200ms ease, text-shadow 300ms ease, border-color 200ms ease;
}
.masthead nav a.is-active {
  color: var(--nav-ink);
  border-bottom-color: #0091af;
  text-shadow:
    0 0 6px  rgba(0, 145, 175, 0.85),
    0 0 14px rgba(0, 145, 175, 0.55),
    0 0 26px rgba(0, 145, 175, 0.30);
}

/* Floating price pill, pinned near the bottom of the viewport on the home
   page only. Body gets extra bottom padding so it never hides the end of the
   footer. */
.price-pill {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 45;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 580px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: #163a68;
  color: var(--masthead-ink);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  font-family: var(--display);
  font-size: var(--fs-sm);
  animation: pill-in 600ms var(--ease-out) 500ms both;
}
.price-pill p { color: var(--masthead-muted); }
.price-pill strong { color: var(--masthead-ink); font-weight: 700; }
.price-pill .btn {
  flex: none;
  min-height: 34px;
  padding: 0.4em 1.3em;
  border-radius: 999px;
  background: var(--cta);
  color: #0a1f3d;
  border-color: var(--cta);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}
.price-pill .btn:hover { background: var(--cta-hover); border-color: var(--cta-hover); }
.price-pill :focus-visible { outline-color: #fff; }

/* Rotating messages: all three share one grid cell so the pill keeps a
   steady size; only the active one is visible (and reachable by keyboard).
   Without JavaScript the first message simply stays. */
.pill-track {
  flex: 1;
  min-width: 0;
  display: grid;
  overflow: hidden;
  /* Room for the button's focus ring inside the clipped area. */
  padding: 4px 4px 4px 19px;
  margin: -4px -4px -4px 0;
}
.pill-pause:not([hidden]) + .pill-track { padding-left: 8px; }
.pill-slide {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(70%);
  transition:
    opacity 350ms ease,
    transform 450ms var(--ease-out),
    visibility 0s linear 450ms;
}
.pill-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 120ms, 120ms, 0s;
}
.pill-slide.is-leaving { transform: translateY(-70%); }
.pill-slide p { min-width: 0; line-height: 1.3; }

/* Pause/play toggle for the rotation (WCAG 2.2.2: content that changes on
   its own needs a way to stop it). */
.pill-pause {
  flex: none;
  position: relative;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--masthead-ink);
  cursor: pointer;
  transition: background-color 150ms ease;
}
.pill-pause:hover { background: rgba(255, 255, 255, 0.2); }
/* Pause icon: two bars. Play icon (when paused): a triangle. */
.pill-pause::before,
.pill-pause::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 3px;
  height: 11px;
  margin-top: -5.5px;
  border-radius: 1px;
  background: currentColor;
}
.pill-pause::before { left: 13px; }
.pill-pause::after  { left: 18px; }
.pill-pause[aria-pressed="true"]::after { display: none; }
.pill-pause[aria-pressed="true"]::before {
  left: 14px;
  width: 0;
  height: 0;
  margin-top: -6px;
  border-radius: 0;
  background: none;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent currentColor;
}
body:has(.price-pill) { padding-bottom: 96px; }

@keyframes pill-in {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 520px) {
  .price-pill { bottom: 12px; font-size: var(--fs-xs); }
  .pill-track { padding-left: 14px; }
  .pill-slide { gap: 10px; }
  .price-pill .btn { padding-inline: 1em; }
}

.hero-band {
  position: relative;
  isolation: isolate;

  background:
    radial-gradient(ellipse 80% 62% at 50% 38%,
      rgba(22, 74, 128, 0.55) 0%,
      rgba(12, 48, 88, 0.28) 45%,
      rgba(1, 29, 62, 0) 78%),
    linear-gradient(180deg, #02224a 0%, #011d3e 58%, #01142c 100%);
  color: #fff;
  overflow: hidden;
  /* A rounded card below the header, lined up with the header's logo and tabs
     rather than running edge to edge. */
  width: calc(100% - 48px);
  max-width: calc(var(--wide) - 48px);
  margin: 8px auto 32px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
/* The hero box fills the first screen: everything between the header and the
   floating price pill. */
.hero-band {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - var(--masthead-h, 72px) - 120px);
}
.hero-band > .hero { width: 100%; }
/* The first slide takes the whole first screen, so the next section starts
   below the fold instead of peeking under the hero box. */
.slide--hero { min-height: calc(100svh - var(--masthead-h, 72px)); }
@media (max-width: 520px) {
  .hero-band { width: calc(100% - 32px); border-radius: 20px; margin-bottom: 24px; }
}

.hero-band :focus-visible { outline-color: #fff; }

/* Inner pages open with the same rounded gradient box, sized to its content
   instead of the whole screen. */
.hero-band--page { min-height: 0; margin-bottom: clamp(20px, 3vw, 36px); }
.hero-band--tall { min-height: calc(60svh - var(--masthead-h, 72px)); }
.page-hero {
  width: 100%;
  padding-block: clamp(44px, 6vw, 84px);
  text-align: center;
}
.page-hero h1 {
  max-width: 24ch;
  margin-inline: auto;
  font-size: clamp(2rem, 4.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 28px rgba(1, 29, 62, 0.9);
  animation: rise-in 600ms var(--ease-out) 80ms both;
}
.page-hero > p {
  max-width: 62ch;
  margin: 18px auto 0;
  color: #dbe4f1;
  animation: rise-in 600ms var(--ease-out) 200ms both;
}
.page-hero .eyebrow {
  margin: 0 auto 14px;
  color: var(--cta);
  font-family: var(--display);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.page-hero .legal-date { margin-top: 14px; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.65); }
.page-hero .cta-row { justify-content: center; animation: rise-in 600ms var(--ease-out) 300ms both; }

/* The content right after a page box doesn't need a full section's top gap. */
.hero-band--page + section[id] { padding-top: 8px; }
.hero-band--page + section[id] > .shell > :first-child { margin-top: 0; }
.hero-band--page + .legal { padding-top: 8px; }

.hero {
  position: relative;
  padding-block: clamp(48px, 7vw, 96px) clamp(52px, 7.5vw, 104px);
  text-align: center;
}

.hero-logo {
  display: block;
  width: clamp(200px, 24vw, 280px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
}

.hero h1 {
  font-size: clamp(2rem, 5.2vw, 3rem);
  margin: 30px auto 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 28px rgba(1, 29, 62, 0.9);
}
.hero h1 em {
  font-style: normal;
  font-weight: 300;
  color: var(--cta);
}
.hero .lede {
  max-width: 56ch;
  margin: 22px auto 0;
  font-size: var(--fs-lg);
  color: #dbe4f1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 18px rgba(1, 29, 62, 0.9);
}
.hero .cta-row { justify-content: center; margin-top: 34px; gap: 14px; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* One button style site-wide, the one the home hero introduced: pill shape,
   small spaced capitals, gold primary, white-outline secondary. */
.btn {
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.95em 1.9em;
  min-height: 44px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 130ms ease, border-color 130ms ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--cta-deep) 0%, var(--cta) 55%, var(--cta-light) 100%);
  color: #0a1f3d;
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(var(--cta-rgb), 0.28);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--cta) 0%, var(--cta-hover) 55%, var(--cta-light) 100%);
  border-color: transparent;
}
.btn-quiet { color: #fff; border-color: rgba(255, 255, 255, 0.7); background: transparent; }
.btn-quiet:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

   Every selector below is written .btn.btn-disabled rather than .btn-disabled
   on its own. That is deliberate: further down the file .cta-band .btn-primary
   repaints the button gold, and a plain .btn-disabled ties it on specificity
   and loses on source order. Doubling the class wins outright and stops this
   breaking again if the band styles ever move. */
.btn.btn-disabled {
  background: var(--surface-sunk);
  color: var(--ink-muted);
  border-color: var(--rule-strong);
  cursor: not-allowed;
  box-shadow: none;
}

.btn.btn-disabled:hover,
.btn.btn-disabled:active {
  background: var(--surface-sunk);
  color: var(--ink-muted);
  border-color: var(--rule-strong);
  transform: none;
  box-shadow: none;
}

.hero-band .btn.btn-disabled,
.cta-band .btn.btn-disabled,
.hero-band .btn.btn-disabled:hover,
.cta-band .btn.btn-disabled:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: none;
}

.season-note {
  margin: 26px 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}
.hero-band .season-note,
.cta-band .season-note { color: rgba(255, 255, 255, 0.78); }

.season-panel {
  margin: 0 auto;
  max-width: 640px;
  padding: 22px 24px;
  background: var(--surface-sunk);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  text-align: left;
}
.season-panel h2 { margin: 0 0 8px; font-size: 1.15rem; color: var(--ink); }
.season-panel p { margin: 0 0 10px; color: var(--ink-muted); font-size: var(--fs-sm); }
.season-panel p:last-child { margin-bottom: 0; }

.promises {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 40px;
}
@media (max-width: 820px) { .promises { grid-template-columns: 1fr; gap: 28px; } }
.promises li {
  padding-top: 18px;
  border-top: 3px solid var(--teal);
}
.promises h3 { font-size: var(--fs-lg); font-weight: 600; }
.promises p { margin-top: 10px; color: var(--ink-muted); }

.trust { border-bottom: 1px solid var(--rule); background: var(--surface); }
.trust-list {
  list-style: none;
  margin: 0 auto;
  padding-block: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 40px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.trust-list li { display: flex; align-items: center; gap: 9px; }
.trust-list li::before { content: "\2713"; color: var(--teal); font-weight: 700; }
@media (max-width: 600px) {
  .trust-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; justify-items: start; }
}

.steps-row {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 28px;
  text-align: center;
}
@media (max-width: 900px) { .steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .steps-row { grid-template-columns: 1fr; gap: 28px; } }
.steps-row .step-icon { width: 64px; height: 64px; margin: 0 auto 14px; }
.steps-row h3 {
  font-size: var(--fs-lg);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.step-num {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--on-teal);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.steps-row p { margin-top: 8px; color: var(--ink-muted); font-size: var(--fs-sm); }

.reviews-empty {
  margin: 36px auto 0;
  max-width: 560px;
  padding: 28px 24px;
  border: 1px dashed var(--rule);
  border-radius: 20px;
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}
.reviews {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 820px) { .reviews { grid-template-columns: 1fr; } }

.closing-line {
  margin: 48px auto 0;
  max-width: var(--measure);
  text-align: center;
  color: var(--ink-muted);
  text-wrap: balance;
}
.closing-line a { font-weight: 600; }

.season-bar {
  background: var(--accent-wash);
  border-bottom: 1px solid var(--rule);
}
.season-bar p {
  padding-block: 14px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink);
  text-wrap: balance;
}
.season-bar strong { font-weight: 600; }

.contact-panel {
  margin: 40px auto 0;
  max-width: 620px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.contact-cta {
  padding: 32px 30px;
  text-align: center;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--rule);
}
.contact-cta h2 { font-size: var(--fs-xl); }
.contact-cta p {
  margin: 10px auto 22px;
  max-width: 44ch;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

.contact-rows {
  margin: 0;
  padding: 10px 30px;
  border-bottom: 1px solid var(--rule);
}
.contact-rows > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.contact-rows > div:last-child { border-bottom: 0; }
.contact-rows dt {
  font-weight: 600;
  color: var(--ink);
  font-size: var(--fs-sm);
}
.contact-rows dd {
  margin: 0;
  font-weight: 600;
  word-break: break-word;
}

.contact-hours { padding: 24px 30px 26px; }
.contact-hours h3 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
}
.contact-hours .hours { margin: 0; }

.contact-foot {
  margin: 22px auto 0;
  max-width: 560px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

@media (max-width: 520px) {
  .contact-cta { padding: 26px 20px; }
  .contact-rows { padding: 6px 20px; }
  .contact-hours { padding: 20px 20px 22px; }
}

.reviews--two {
  grid-template-columns: repeat(auto-fit, minmax(0, 420px));
  justify-content: center;
}
@media (max-width: 820px) { .reviews--two { grid-template-columns: 1fr; } }
.reviews-disclaimer {
  margin: 20px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}
.review {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.review blockquote { margin: 0; flex: 1; }
.review blockquote p::before { content: "\201C"; display: block; font-size: 2.4rem; line-height: 0.6; margin-bottom: 10px; color: var(--teal); }
.review figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: var(--fs-sm); }
.review-name { font-weight: 600; color: var(--ink); }
.review-meta { color: var(--ink-muted); }

.reviews-more { margin: 28px 0 0; text-align: center; }

.btn-google {
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-google:hover { background: #f4f5f7; color: #1f1f1f; }
.btn-google svg { width: 18px; height: 18px; flex: none; }

main { min-height: 62vh; }
section[id] { padding-block: clamp(52px, 7vw, 84px); scroll-margin-top: 92px; }

#difference { padding-top: clamp(36px, 5vw, 56px); padding-bottom: clamp(28px, 4vw, 44px); }
#process { padding-top: clamp(36px, 5vw, 56px); }

.cta-band {
  background: var(--masthead-bg);
  color: #fff;
  text-align: center;
}
.cta-band h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); font-weight: 700; color: #fff; }
.cta-band p { margin: 12px auto 0; max-width: 50ch; color: #c3d0e4; }
.cta-band .btn { margin-top: 26px; }
.cta-band .btn-primary { background: var(--cta); color: #0a1f3d; border-color: var(--cta); }
.cta-band .btn-primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); }
.cta-band :focus-visible { outline-color: #fff; }
@media (max-width: 520px) { section[id] { scroll-margin-top: 112px; } }


.section-head { text-align: center; }
.section-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  column-gap: 22px;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.section-title::before,
.section-title::after {
  content: "";
  height: 2px;
  background: var(--rule-strong);
  margin-bottom: 0.32em;
}
.section-title span { padding-inline: 4px; }
@media (max-width: 520px) { .section-title { column-gap: 14px; } }

.section-head > p {
  margin: 16px auto 0;
  max-width: 62ch;
  color: var(--ink-muted);
}

.section-head--plain { text-align: center; }
.section-head--plain h1,
.section-head--plain h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.tier-group { margin-top: 46px; }

.tier-group-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-strong);
}
.tier-group-head h2 { font-size: var(--fs-lg); font-weight: 600; }
.tier-group-head .count {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin-left: auto;
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 22px;
}
@media (max-width: 760px) { .tier-grid { grid-template-columns: 1fr; } }

.tier {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(15, 43, 80, 0.10), 0 1px 3px rgba(15, 43, 80, 0.08);
  padding: 26px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 520px) { .tier { padding: 22px 18px 24px; } }

.tier-name { font-size: var(--fs-lg); font-weight: 600; }
.tier-forms {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin-top: 4px;
}

.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-family: var(--label);
  font-variant-numeric: tabular-nums;
}
.price-now {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.price-was {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  text-decoration-thickness: 1.5px;
}
td.num-was { font-weight: 400; color: var(--ink-muted); text-decoration: line-through; }
.price-note {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  letter-spacing: 0;
  width: 100%;
}

.tier-for {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}

.tier h4 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
}

.ticks {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: var(--fs-sm);
}
.ticks li {
  display: grid;
  grid-template-columns: 1.35em 1fr;
  align-items: start;
}
.ticks li::before { content: "\2713"; color: var(--teal); font-weight: 600; }

.table-wrap {
  margin-top: 46px;
  overflow-x: auto;
  border: 1px solid var(--rule-strong);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(15, 43, 80, 0.10), 0 1px 3px rgba(15, 43, 80, 0.08);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
caption {
  text-align: left;
  padding: 18px 20px 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
th, td {
  text-align: left;
  padding: 13px 20px;
  border-bottom: 1px solid var(--rule);
}
thead th {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
tbody th { font-weight: 400; color: var(--ink-muted); }
td.num { font-family: var(--label); font-variant-numeric: tabular-nums; font-weight: 600; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: none; }

.pledge {
  margin-top: 46px;
  display: grid;
  grid-template-columns: minmax(0, 15ch) minmax(0, 1fr);
  gap: 20px 40px;
  padding-top: 26px;
  border-top: 1px solid var(--cta);
}
@media (max-width: 620px) { .pledge { grid-template-columns: 1fr; gap: 14px; } }
.pledge h2 { font-size: var(--fs-lg); font-weight: 600; }
.pledge-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 62ch;
}
.pledge-body p:last-child { font-weight: 600; color: var(--ink); }

.steps {
  list-style: none;
  counter-reset: step;
  margin: 46px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
.step {
  counter-increment: step;
  background: var(--ground);
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: 0 24px;
  align-items: center;
  padding-block: 26px;
}
@media (max-width: 560px) {
  .step { grid-template-columns: 1fr auto; gap: 8px 16px; padding-block: 22px; }
  .step::before { grid-column: 1 / -1; }
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--teal);
  align-self: start;
  padding-top: 0.18em;
}
.step h3 { font-size: var(--fs-lg); font-weight: 600; }
.step p { margin-top: 8px; color: var(--ink-muted); max-width: 60ch; }

.step-icon {
  width: 84px;
  height: 84px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step-icon .accent { stroke: var(--teal); }
@media (max-width: 560px) { .step-icon { width: 64px; height: 64px; } }

.about {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 44px;
  align-items: start;
}
@media (max-width: 820px) { .about { grid-template-columns: 1fr; gap: 30px; } }

.about-prose {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: var(--measure);
  color: var(--ink-muted);
}
.about-prose strong { color: var(--ink); font-weight: 600; }

.badges { margin-top: 8px; }
.badges-h {
  margin: 0 0 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.badges-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.badges-row img {
  display: block;
  width: 104px;
  height: auto;
}
.badges-row a {
  display: inline-block;
  border-radius: 8px;
  transition: transform 160ms var(--ease-out);
}
.badges-row a:hover { transform: translateY(-2px); }

.headshot {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
}

@media (max-width: 820px) { .headshot { max-width: 260px; margin-inline: auto; } }

.faq-block { margin-top: 44px; }
.faq-block > .eyebrow { padding-bottom: 12px; border-bottom: 1px solid var(--rule-strong); }

.qa-item { border-bottom: 1px solid var(--rule); }
.qa-item summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 16px;
  align-items: center;
  padding-block: 18px;
  min-height: 44px;
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.28;
  color: var(--ink);
}
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 160ms ease;
  justify-self: center;
}
.qa-item[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.qa-item summary:hover { color: var(--accent); }
.qa-answer { padding-bottom: 20px; color: var(--ink-muted); max-width: 68ch; }
.qa-answer p + p { margin-top: 10px; }


.form-layout {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 48px;
  align-items: start;
}
@media (max-width: 860px) { .form-layout { grid-template-columns: 1fr; gap: 34px; } }

form { display: flex; flex-direction: column; gap: 22px; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: var(--fs-sm); font-weight: 600; }

.req {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ledger);
  margin-left: 4px;
}
.hint { font-size: var(--fs-xs); color: var(--ink-muted); }

input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  font-family: var(--sans);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.72em 0.85em;
  min-height: 44px;
  width: 100%;
}
input::placeholder { color: var(--ink-faint); }

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23b0bfd5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95em center;
  cursor: pointer;
}
select:invalid, select option[value=""] { color: var(--ink-faint); }
select option { color: var(--ink); }

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}
@media (max-width: 600px) { .field-grid { grid-template-columns: 1fr; } }

input[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--ledger);
  border-width: 2px;
}

fieldset {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  margin: 0;
  padding: 16px 18px 18px;
  background: var(--surface);
}
legend { font-size: var(--fs-sm); font-weight: 600; padding-inline: 6px; }

.radios { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.radios label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: baseline;
  font-size: var(--fs-sm);
  font-weight: 400;
  padding-block: 9px;
  min-height: 44px;
  cursor: pointer;
}
.radios input[type="radio"] {
  width: 1.05em; height: 1.05em;
  accent-color: var(--accent);
  margin: 0;
  transform: translateY(0.18em);
}
.radios .tag {
  font-family: var(--label);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.hp { position: absolute; left: -9999px; }

.notice {
  border-left: 3px solid var(--ledger);
  background: var(--ledger-wash);
  padding: 14px 16px;
  font-size: var(--fs-sm);
}
.notice strong { font-weight: 600; }

[role="status"]:not(:empty),
[role="alert"]:not(:empty) {
  border-left: 3px solid var(--ledger);
  background: var(--ledger-wash);
  padding: 14px 16px;
  font-size: var(--fs-sm);
}

.aside-panel {
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.aside-panel h2 {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink);
}
.aside-panel dl { margin: 0; display: grid; gap: 16px; }
.aside-panel dt {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.aside-panel dd { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--ink-muted); }
.aside-panel dd a { color: var(--accent); }

.hours-tz { font-weight: 400; color: var(--ink-muted); }
.hours {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 4px;
}
.hours li { display: flex; justify-content: space-between; gap: 16px; }
.hours li span:first-child { color: var(--ink); }

.book {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.book-lead { font-size: var(--fs-sm); font-weight: 600; }
.book .btn { align-self: flex-start; }

footer {
  border-top: 1px solid var(--rule);
  padding-block: 38px 46px;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 30px 48px;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid p + p { margin-top: 12px; }
.footer-legal { max-width: 70ch; font-size: var(--fs-xs); line-height: 1.7; }

.social {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.social a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.social a:hover, .social a:focus-visible { color: var(--teal); }
.social svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

.legal { padding-block: clamp(48px, 8vw, 90px); max-width: calc(var(--measure) + 48px); }
.legal h1 { font-size: clamp(1.9rem, 4.6vw, var(--fs-3xl)); margin-top: 14px; }
.legal .lede { margin-top: 18px; font-size: var(--fs-lg); color: var(--ink-muted); }
.legal-date { margin-top: 16px; font-size: var(--fs-sm); color: var(--ink-faint); }
.legal-body { margin-top: 12px; }
.legal-body h2 { font-size: var(--fs-lg); font-weight: 600; margin-top: 34px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body ul { margin-top: 12px; color: var(--ink-muted); }
.legal-body ul { padding-left: 1.2em; display: grid; gap: 10px; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal .cta-row { margin-top: 40px; }

.confirm { padding-block: clamp(56px, 9vw, 110px); }
.confirm--simple { text-align: center; padding-block: clamp(80px, 14vw, 160px); }
.confirm--simple h1 { margin-inline: auto; }
.confirm--simple .cta-row { justify-content: center; margin-top: 34px; }
.confirm h1 { font-size: clamp(1.9rem, 4.6vw, var(--fs-3xl)); max-width: 24ch; }
.confirm .lede {
  margin-top: 20px;
  font-size: var(--fs-lg);
  color: var(--ink-muted);
  max-width: 56ch;
}
.confirm .next {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 2px solid var(--accent);
  max-width: var(--measure);
}

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-d: 560ms;
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes logo-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.hero-logo    { animation: logo-in 700ms var(--ease-out) both; }
.hero h1      { animation: rise-in 600ms var(--ease-out) 180ms both; }
.hero .lede   { animation: rise-in 600ms var(--ease-out) 300ms both; }
.hero .cta-row{ animation: rise-in 600ms var(--ease-out) 380ms both; }

.has-js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   var(--reveal-d) var(--ease-out),
    transform var(--reveal-d) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.has-js .reveal.is-in { opacity: 1; transform: none; }

.has-js .headshot.reveal { transform: translateX(18px); }
.has-js .headshot.reveal.is-in { transform: none; }

.has-js .section-head.reveal .section-title::before,
.has-js .section-head.reveal .section-title::after {
  transform: scaleX(0);
  transition: transform 700ms var(--ease-out) 200ms;
}
.has-js .section-head.reveal .section-title::before { transform-origin: right; }
.has-js .section-head.reveal .section-title::after  { transform-origin: left; }
.has-js .section-head.reveal.is-in .section-title::before,
.has-js .section-head.reveal.is-in .section-title::after { transform: scaleX(1); }

.has-js .steps-row.reveal-group .step-icon > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + 150ms);
}
.has-js .steps-row.reveal-group.is-in .step-icon > * { stroke-dashoffset: 0; }

.btn {
  transition:
    background-color 130ms ease,
    border-color 130ms ease,
    transform 160ms var(--ease-out),
    box-shadow 160ms var(--ease-out);
}
.btn:hover  { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 43, 80, 0.16); }
.btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(15, 43, 80, 0.14); transition-duration: 60ms; }
.btn-primary:hover { box-shadow: 0 10px 28px rgba(var(--cta-rgb), 0.4); }
.cta-band .btn-primary:hover { box-shadow: 0 8px 22px rgba(var(--cta-rgb), 0.35); }

.tier {
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.tier:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(15, 43, 80, 0.14), 0 2px 4px rgba(15, 43, 80, 0.08);
}

.steps-row li .step-icon { transition: transform 260ms var(--ease-out); }
.steps-row li:hover .step-icon { transform: translateY(-3px) scale(1.04); }

@keyframes answer-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.qa-item[open] .qa-answer { animation: answer-in 220ms var(--ease-out); }

.masthead nav a { position: relative; border-bottom: 0; padding-bottom: 8px; }
.masthead nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--nav-rule);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
}
.masthead nav a:hover::after { transform: scaleX(1); }
.masthead nav a.is-active::after { transform: scaleX(1); background: #0091af; }

@media (max-width: 700px) { .has-js .masthead nav a::after { display: none; } }

.social svg { transition: transform 200ms var(--ease-out); }
.social a:hover svg { transform: translateY(-2px); }

/* ---- Scroll scenes (every page) ---------------------------------------
   Normal scrolling. script.js tags each scene with .scene and sets --leave
   and --enter (0 to 1) from its position in the viewport: a block zooms out
   and fades as it scrolls off the top, and the next one fades and settles in
   as it comes up. Values follow the scroll position, so stopping mid-way just
   holds. */
.has-scenes .scene {
  --leave: 0;
  --enter: 0;
  opacity: calc(1 - var(--leave) * 0.85 - var(--enter) * 0.9);
  transform:
    translateY(calc(var(--enter) * 48px))
    scale(calc(1 - var(--leave) * 0.08 - var(--enter) * 0.04));
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

@media (min-width: 900px) {
  .slide--hero .hero-logo { width: clamp(200px, 30vh, 340px); }
}

.deck-dots {
  position: fixed;
  right: 24px;
  top: 50%;
  z-index: 44;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.deck-dots button {
  display: block;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: height 300ms var(--ease-out), background-color 200ms ease;
}
.deck-dots button:hover { background: rgba(255, 255, 255, 0.6); }
.deck-dots button[aria-current="true"] { height: 26px; background: var(--cta); }
.deck-dots button:focus-visible { outline-color: #fff; }
@media (max-width: 899px) { .deck-dots { display: none; } }

/* ---- Page-to-page transitions -----------------------------------------
   Browsers with cross-document view transitions (Chrome, Edge, Safari 18.2+)
   crossfade between pages; others just navigate normally. The header and the
   price pill are named so they hold still while the page content changes. */
@view-transition { navigation: auto; }

.masthead   { view-transition-name: masthead; }
.price-pill { view-transition-name: price-pill; }

::view-transition-old(root) {
  animation: page-out 320ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: page-in 520ms var(--ease-out) 120ms both;
}
@keyframes page-out {
  to { opacity: 0; transform: scale(0.98); }
}
@keyframes page-in {
  from { opacity: 0; transform: scale(1.015); }
}
/* Arriving via a transition, the pill is already on screen, so skip its
   slide-up entrance. script.js sets this class. */
.vt-arrived .price-pill { animation: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .hero-logo, .hero h1, .hero .lede, .hero .cta-row,
  .page-hero h1, .page-hero > p, .page-hero .cta-row { animation: none; }
  .has-js .reveal,
  .has-js .headshot.reveal { opacity: 1; transform: none; transition: none; }
  .has-js .section-head.reveal .section-title::before,
  .has-js .section-head.reveal .section-title::after { transform: none; transition: none; }
  .has-js .steps-row.reveal-group .step-icon > * { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  .btn:hover, .tier:hover, .steps-row li:hover .step-icon, .social a:hover svg { transform: none; }
  .qa-item[open] .qa-answer { animation: none; }
  .price-pill { animation: none; }
  .pill-slide, .pill-slide.is-active { transform: none; transition: none; }
}