/* ===========================================================================
   RayCare · refinement layer
   Loaded after globals.css and tech.css. Nothing here changes the design
   language. It evens out the spacing rhythm, squares up the grids so cards
   line up on a shared baseline, adds the motion pass, and rebuilds the
   small screen experience.
   ======================================================================== */

:root {
  /* One spacing scale, used everywhere below */
  --rc-gap: clamp(12px, 1.05vw, 16px);
  --rc-card-pad: clamp(22px, 1.9vw, 30px);
  --rc-radius: 18px;
  --rc-radius-lg: 26px;
  --rc-ease: cubic-bezier(.16, 1, .3, 1);
  --rc-header-h: 78px;
}

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

body {
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

.site-frame {
  overflow-x: clip;
}

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

/* ---------------------------------------------------------------------------
   1 · Brand mark and the new C over R logo
   ------------------------------------------------------------------------ */

.brand-mark,
.site-footer .brand-mark {
  padding: 5px;
  overflow: visible;
  transition: transform 420ms var(--rc-ease), box-shadow 420ms var(--rc-ease),
    border-color 420ms var(--rc-ease);
}

.brand-lockup:hover .brand-mark {
  transform: translateY(-1px) rotate(-2deg);
  border-color: rgba(142, 221, 209, .55);
  box-shadow: inset 0 0 26px rgba(142, 221, 209, .1), 0 10px 26px rgba(0, 0, 0, .22);
}

.raycare-logo {
  overflow: visible;
}

.logo-c {
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
  animation: rc-logo-draw 1400ms var(--rc-ease) 120ms forwards;
}

.logo-r {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: rc-logo-set 720ms var(--rc-ease) 620ms forwards;
}

.brand-lockup:hover .logo-r {
  animation: rc-logo-nudge 620ms var(--rc-ease);
}

@keyframes rc-logo-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes rc-logo-set {
  from { opacity: 0; transform: translateY(5px) scale(.9); }
  to { opacity: 1; transform: none; }
}

@keyframes rc-logo-nudge {
  0% { transform: none; }
  45% { transform: translateY(-2px) scale(1.05); }
  100% { transform: none; }
}

/* ---------------------------------------------------------------------------
   2 · Header, navigation, buttons
   ------------------------------------------------------------------------ */

.nav-shell {
  padding-right: 12px;
  padding-left: 14px;
  gap: 18px;
}

.desktop-nav {
  justify-self: center;
  gap: 2px;
}

.desktop-nav a {
  position: relative;
  transition: color 240ms ease, background 240ms ease;
}

.desktop-nav a::before {
  position: absolute;
  right: 14px;
  bottom: 6px;
  left: 14px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--signal, #8eddd1);
  content: "";
  opacity: 0;
  transform: scaleX(.2);
  transform-origin: left;
  transition: transform 380ms var(--rc-ease), opacity 240ms ease;
}

.desktop-nav a:hover::before,
.desktop-nav a.active::before {
  opacity: .85;
  transform: scaleX(1);
}

.nav-actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* A quiet sheen that crosses the primary button on hover */
.button {
  isolation: isolate;
}

.button.button-primary {
  overflow: hidden;
}

.button-primary::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  z-index: -1;
  width: 45%;
  content: "";
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-18deg);
  transition: left 620ms var(--rc-ease);
}

.button-primary:hover::after {
  left: 130%;
}

.button-arrow {
  display: inline-grid;
  place-items: center;
  transition: transform 300ms var(--rc-ease);
}

.button:hover .button-arrow {
  transform: translateX(3px);
}

.button:active {
  transform: translateY(0) scale(.99);
}

/* ---------------------------------------------------------------------------
   3 · Section rhythm. One vertical scale for every section on every page.
   ------------------------------------------------------------------------ */

.section,
.compact-section,
.method-core-section,
.method-hubs-section,
.method-compare-section,
.method-limits-section {
  padding: clamp(72px, 6.4vw, 108px) 0;
}

.section-small {
  padding: clamp(52px, 4.5vw, 72px) 0;
}

.difference-section {
  padding-bottom: clamp(48px, 4vw, 66px);
}

.home-final-cta {
  padding-top: clamp(30px, 3vw, 44px);
}

.section-heading {
  margin-bottom: clamp(30px, 3vw, 46px);
  align-items: start;
}

/* Nudge the label down so it sits on the first line of the title */
.section-heading > .eyebrow {
  padding-top: clamp(6px, 0.7vw, 13px);
}

.section-heading > div:last-child {
  min-width: 0;
}

.section-copy {
  margin-bottom: 0;
}

/* Every card grid shares the same gutter */
.support-grid,
.friendly-compare-grid,
.simple-payment-grid,
.family-understanding-grid,
.fit-grid {
  gap: var(--rc-gap);
}

/* ---------------------------------------------------------------------------
   4 · Cards line up. Chip on top, copy locked to the bottom edge, so every
   card in a row shares the same two baselines regardless of copy length.
   ------------------------------------------------------------------------ */

.support-card,
.coverage-card,
.journey-step,
.city-grid article,
.compare-grid article,
.simple-payment-grid article,
.difference-grid .principle {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.support-card > span,
.coverage-card > span,
.journey-step > span,
.city-grid article > span,
.compare-grid article > span,
.simple-payment-grid article > span,
.difference-grid .principle .card-index {
  flex: 0 0 auto;
  align-self: flex-start;
}

/* One fixed drop from the chip to the heading, so every heading in a row
   starts on the same line no matter how long the copy underneath runs */
.support-card h3,
.coverage-card h3,
.journey-step h3,
.city-grid h3,
.compare-grid h3,
.simple-payment-grid h3,
.difference-grid .principle h3 {
  margin-top: clamp(24px, 2.2vw, 36px);
  margin-bottom: 10px;
}

.support-card p,
.coverage-card p,
.journey-step p,
.city-grid p,
.compare-grid p,
.simple-payment-grid p,
.difference-grid .principle p {
  margin-bottom: 0;
}

.support-card,
.coverage-card {
  min-height: 250px;
  padding: var(--rc-card-pad);
  border-radius: var(--rc-radius);
}

.journey-step,
.city-grid article,
.simple-payment-grid article {
  padding: var(--rc-card-pad);
}

.compare-grid article {
  padding: calc(var(--rc-card-pad) - 4px);
}

.difference-grid .principle {
  padding: var(--rc-card-pad);
}

/* Hover: a single, consistent lift for every card on the site */
.support-card,
.coverage-card,
.compare-grid article,
.family-card,
.fit-card,
.simple-payment-grid article {
  transition: transform 420ms var(--rc-ease), box-shadow 420ms var(--rc-ease),
    border-color 420ms var(--rc-ease), background 420ms var(--rc-ease);
}

.support-card:hover,
.coverage-card:hover,
.compare-grid article:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 54px rgba(18, 54, 63, .1);
}

.support-card > span,
.coverage-card > span,
.compare-grid article > span {
  transition: background 320ms ease, color 320ms ease, transform 320ms var(--rc-ease);
}

.support-card:hover > span,
.coverage-card:hover > span,
.compare-grid article:hover > span {
  background: var(--forest-2);
  color: #fff;
  transform: translateY(-2px);
}

/* Treatment areas: seven cards, four then three centred, never an orphan */
.coverage-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rc-gap);
}

.coverage-grid .coverage-card {
  flex: 0 1 calc((100% - 3 * var(--rc-gap)) / 4);
  min-width: 220px;
}

/* Journey and city rows keep their hairline dividers even when they wrap */
.journey-grid,
.four-city-grid {
  gap: 0;
}

/* ---------------------------------------------------------------------------
   5 · Our vision
   ------------------------------------------------------------------------ */

.vision-section {
  padding: clamp(56px, 5vw, 88px) 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(142, 221, 209, .16), transparent 46%),
    var(--paper);
}

.vision-statement {
  margin: 0 auto;
  max-width: 940px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.vision-statement .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vision-statement .eyebrow::before {
  display: none;
}

.vision-statement blockquote {
  position: relative;
  margin: 22px 0 0;
  color: var(--ink);
  font-size: clamp(27px, 3.3vw, 46px);
  font-weight: 560;
  letter-spacing: -.042em;
  line-height: 1.16;
  text-wrap: balance;
}

.vision-statement blockquote::before,
.vision-statement blockquote::after {
  color: var(--forest-2);
  opacity: .5;
}

.vision-statement blockquote::before { content: "“"; }
.vision-statement blockquote::after { content: "”"; }

.vision-rule {
  margin-top: 26px;
  width: 96px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--forest-2), transparent);
  transform: scaleX(.25);
  transform-origin: center;
  transition: transform 900ms var(--rc-ease) 180ms;
}

.vision-statement.is-visible .vision-rule {
  transform: scaleX(1);
}

/* ---------------------------------------------------------------------------
   6 · Care corridor map
   ------------------------------------------------------------------------ */

.hero-visual {
  min-width: 0;
}

.corridor-map {
  display: flex;
  flex-direction: column;
}

.map-stage {
  flex: 1 1 auto;
}

.map-links path.active {
  stroke-width: 2.1;
  opacity: 1;
  animation-duration: 7s;
}

.map-points g {
  transition: opacity 320ms ease;
}

/* SVG text scales with the viewBox, so the label size has to grow as the
   stage gets narrower or the names become unreadable on a phone */
.map-points text {
  font-size: 11px;
  stroke-width: 4.5px;
  transition: opacity 320ms ease;
}

/* The detail card sits under the map rather than on top of it, so it never
   covers Sri Lanka or the Maldives */
.map-place-card {
  position: static;
  width: auto;
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  grid-template-areas: "kind note" "name note";
  gap: 2px 22px;
  align-items: center;
  border-radius: 16px;
}

.map-place-card span { grid-area: kind; }
.map-place-card strong { grid-area: name; }

.map-place-card p {
  grid-area: note;
  margin: 0;
  padding-left: 22px;
  border-left: 1px solid rgba(163, 224, 214, .18);
}

/* Nine locations sit as an even three by three block */
.map-selectors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.map-selectors button {
  min-height: 36px;
  padding: 0 12px;
  justify-content: center;
  font-size: 10.5px;
  letter-spacing: .01em;
}

.map-note {
  margin-top: 12px;
}

/* ---------------------------------------------------------------------------
   7 · WhatsApp contact block inside the query form
   ------------------------------------------------------------------------ */

.form-whatsapp {
  position: relative;
  margin: 22px 0 6px;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  border: 1px solid rgba(37, 133, 90, .22);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(37, 211, 102, .09), rgba(142, 221, 209, .08));
  transition: transform 320ms var(--rc-ease), box-shadow 320ms var(--rc-ease),
    border-color 320ms ease;
}

.form-whatsapp:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 133, 90, .42);
  box-shadow: 0 14px 32px rgba(24, 96, 70, .14);
}

.form-whatsapp-mark {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #25d366;
  box-shadow: 0 6px 16px rgba(37, 211, 102, .3);
}

.form-whatsapp-mark svg {
  width: 23px;
  height: 23px;
  fill: #fff;
}

.form-whatsapp-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.form-whatsapp-copy small {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.form-whatsapp-copy strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 640;
  letter-spacing: -.01em;
}

.form-whatsapp-go {
  margin-left: auto;
  color: var(--forest-2);
  font-size: 17px;
  transition: transform 320ms var(--rc-ease);
}

.form-whatsapp:hover .form-whatsapp-go {
  transform: translateX(4px);
}

/* ---------------------------------------------------------------------------
   8 · Form polish
   ------------------------------------------------------------------------ */

.field-grid {
  gap: 14px;
}

.field-grid label {
  min-width: 0;
}

.field-grid input,
.field-grid select,
.field-grid textarea {
  min-height: 54px;
  font-size: 15px;
}

.field-grid select {
  padding-right: 38px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--forest-2) 50%),
    linear-gradient(135deg, var(--forest-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 25px, calc(100% - 15px) 25px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

.check-row {
  align-items: flex-start;
  padding: 15px 16px;
  line-height: 1.6;
}

.form-submit {
  width: 100%;
  margin-top: 6px;
}

.intake-rules ul {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   9 · Motion pass
   ------------------------------------------------------------------------ */

.scroll-reveal {
  will-change: opacity, transform;
}

.hero-visual .corridor-map {
  animation: rc-float 9s ease-in-out 1.2s infinite;
}

@keyframes rc-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* The accent words in the big headings warm up as they arrive */
.section-title em,
.display-title em {
  background: linear-gradient(100deg, var(--forest-2), #5fb3ab 45%, var(--forest-2));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rc-sheen 9s ease-in-out infinite;
}

.gentle-dark .section-title em,
.section-dark .section-title em {
  background: linear-gradient(100deg, #b9ddd7, #eafffb 45%, #b9ddd7);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes rc-sheen {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

.truth-band {
  position: relative;
}

.truth-band::before,
.truth-band::after {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 70px;
  height: 100%;
  content: "";
  pointer-events: none;
}

.truth-band::before {
  left: 0;
  background: linear-gradient(90deg, var(--forest), transparent);
}

.truth-band::after {
  right: 0;
  background: linear-gradient(270deg, var(--forest), transparent);
}

.service-row > button,
.faq-list summary,
.method-explorer-nav button,
.lens-tab {
  transition: background 300ms ease, color 300ms ease;
}

.faq-list details[open] summary {
  color: var(--forest-2);
}

.service-row:not(.open) .service-detail {
  display: none;
}

.service-detail,
.method-explorer-panel {
  animation: rc-panel-in 460ms var(--rc-ease) both;
}

@keyframes rc-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.deliverable {
  animation: rc-panel-in 460ms var(--rc-ease) both;
}

.deliverable:nth-child(2) { animation-delay: 60ms; }
.deliverable:nth-child(3) { animation-delay: 120ms; }
.deliverable:nth-child(4) { animation-delay: 180ms; }
.deliverable:nth-child(5) { animation-delay: 240ms; }

/* ---------------------------------------------------------------------------
   9b · Consent bar. Only rendered when a GA4 measurement ID is configured.
   ------------------------------------------------------------------------ */

.consent-bar {
  position: fixed;
  z-index: 96;
  right: 18px;
  bottom: 18px;
  left: auto;
  width: min(430px, calc(100% - 36px));
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid rgba(142, 221, 209, .28);
  border-radius: 18px;
  background: rgba(16, 47, 56, .97);
  box-shadow: 0 26px 60px rgba(8, 29, 37, .34);
  color: #eafffb;
  animation: rc-panel-in 520ms var(--rc-ease) 900ms both;
}

.consent-bar p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(234, 255, 251, .78);
}

.consent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.consent-actions .button {
  width: 100%;
  min-height: 46px;
  justify-content: center;
}

.consent-bar .button-light {
  border-color: rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .06);
  color: #eafffb;
}

@media (max-width: 620px) {
  .consent-bar {
    right: 12px;
    left: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: auto;
    padding: 17px 18px;
  }
}

/* ---------------------------------------------------------------------------
   10 · Footer
   ------------------------------------------------------------------------ */

.footer-grid {
  gap: clamp(28px, 4vw, 64px);
}

.footer-column a {
  position: relative;
  width: fit-content;
  transition: color 240ms ease, transform 240ms var(--rc-ease);
}

.footer-column a:hover {
  color: #bcefe7;
  transform: translateX(3px);
}

.footer-bottom {
  gap: 12px;
}

/* ---------------------------------------------------------------------------
   11 · Small screens. Rebuilt rather than scaled down.
   ------------------------------------------------------------------------ */

@media (max-width: 1180px) {
  .coverage-grid .coverage-card {
    flex-basis: calc((100% - 2 * var(--rc-gap)) / 3);
  }
}

@media (max-width: 980px) {
  .hero-grid {
    gap: 34px;
  }

  .hero-visual .corridor-map {
    animation: none;
  }

  .map-points text {
    font-size: 14px;
    stroke-width: 5px;
  }

  .coverage-grid .coverage-card {
    flex-basis: calc((100% - var(--rc-gap)) / 2);
  }
}

@media (max-width: 820px) {
  .site-header,
  .site-header.scrolled {
    padding: 8px 10px;
    padding-top: max(8px, env(safe-area-inset-top));
  }

  .nav-shell {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 0 8px 0 10px;
  }

  .desktop-nav {
    display: none;
  }

  .nav-actions .independence-chip {
    display: none;
  }

  .nav-actions .button-primary {
    display: none;
  }

  .menu-button {
    width: 44px;
    height: 44px;
  }

  .mobile-menu {
    padding: calc(84px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-menu a:not(.button) {
    min-height: 58px;
    padding: 14px 2px;
    font-size: clamp(28px, 7.6vw, 40px);
  }

  .mobile-menu.open a {
    animation: rc-menu-in 520ms var(--rc-ease) both;
  }

  .mobile-menu.open a:nth-child(2) { animation-delay: 50ms; }
  .mobile-menu.open a:nth-child(3) { animation-delay: 100ms; }
  .mobile-menu.open a:nth-child(4) { animation-delay: 150ms; }
  .mobile-menu.open a:nth-child(5) { animation-delay: 200ms; }
  .mobile-menu.open a:nth-child(6) { animation-delay: 250ms; }

  .hero-grid,
  .page-hero-grid,
  .section-heading {
    grid-template-columns: 1fr;
  }

  .section-heading > .eyebrow {
    padding-top: 0;
  }

  .support-grid,
  .friendly-compare-grid {
    grid-template-columns: 1fr 1fr;
  }

  .coverage-grid .coverage-card {
    flex-basis: calc((100% - var(--rc-gap)) / 2);
    min-width: 0;
  }

  /* Give the page room for the sticky query bar */
  .site-footer {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

@keyframes rc-menu-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 620px) {
  :root {
    --rc-gap: 11px;
    --rc-card-pad: 21px;
  }

  .container,
  .narrow-container {
    width: min(100% - 26px, 1320px);
  }

  /* Nothing on a phone should be smaller than this */
  .map-legend span,
  .map-note,
  .map-place-card span,
  .hero-metrics span,
  .independence-chip,
  .footer-signal,
  .footer-bottom,
  .footer-column a,
  .footer-column span,
  .micro-label,
  .eyebrow,
  .form-section-label,
  .field-grid label > span,
  .fit-card > span,
  .emergency-note span,
  .intake-rules li,
  .query-promise span,
  .truth-set span {
    font-size: 11px;
  }

  .map-place-card p,
  .support-card p,
  .coverage-card p,
  .journey-step p,
  .city-grid p,
  .compare-grid p,
  .simple-payment-grid p,
  .difference-grid .principle p,
  .boundary-list span,
  .fit-card li,
  .check-row {
    font-size: 13.5px;
    line-height: 1.62;
  }

  .support-grid,
  .friendly-compare-grid {
    grid-template-columns: 1fr;
  }

  .coverage-grid .coverage-card {
    flex-basis: 100%;
  }

  .support-card,
  .coverage-card {
    min-height: 0;
  }

  .support-card h3,
  .coverage-card h3,
  .journey-step h3,
  .city-grid h3,
  .compare-grid h3,
  .simple-payment-grid h3,
  .difference-grid .principle h3 {
    margin-top: 16px;
    font-size: 22px;
  }

  .journey-step,
  .city-grid article,
  .compare-grid article,
  .simple-payment-grid article,
  .difference-grid .principle {
    min-height: 0;
  }

  .hero {
    padding-top: calc(96px + env(safe-area-inset-top));
  }

  .hero-actions .button {
    width: 100%;
    justify-content: center;
  }

  .corridor-map {
    min-height: 0;
    padding: 13px;
  }

  .map-stage {
    min-height: 0;
    aspect-ratio: 780 / 468;
  }

  .map-points text {
    font-size: 19px;
    stroke-width: 6px;
  }

  .map-point-ring { r: 14; }
  .map-point-core { r: 6.5; }

  .map-place-card {
    grid-template-columns: 1fr;
    grid-template-areas: "kind" "name" "note";
    gap: 3px;
  }

  .map-place-card p {
    margin-top: 6px;
    padding-left: 0;
    border-left: 0;
  }

  .map-selectors {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .map-selectors button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 14px;
    scroll-snap-align: start;
  }

  .vision-statement blockquote {
    font-size: clamp(24px, 7vw, 32px);
  }

  /* 16px stops iOS zooming the page when a field takes focus */
  .field-grid input,
  .field-grid select,
  .field-grid textarea {
    min-height: 52px;
    font-size: 16px;
  }

  .field-grid select {
    background-position: calc(100% - 20px) 24px, calc(100% - 15px) 24px;
  }

  .check-row input {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  .form-whatsapp {
    padding: 13px 14px;
    gap: 12px;
  }

  .form-whatsapp-copy strong {
    font-size: 17px;
  }

  /* All four phases visible as a two by two block instead of a hidden scroll */
  .method-explorer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: visible;
  }

  .method-explorer-nav button {
    min-width: 0;
    min-height: 62px;
  }

  .service-row > button {
    min-height: 0;
    padding: 20px 0;
  }

  .faq-list summary {
    font-size: 19px;
    padding-right: 30px;
  }

  .zero-fee-note strong {
    font-size: 28px;
  }

  .difference-proof span {
    min-height: 46px;
  }

  /* Sticky query bar */
  .mobile-quick-contact {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 12px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 650;
    box-shadow: 0 14px 34px rgba(8, 29, 37, .28);
  }
}

@media (max-width: 400px) {
  .container,
  .narrow-container {
    width: min(100% - 22px, 1320px);
  }

  .display-title {
    font-size: clamp(42px, 13vw, 54px);
  }

  .brand-description {
    display: none;
  }
}

/* Landscape phones: stop the hero eating the whole screen */
@media (max-height: 520px) and (orientation: landscape) {
  .hero,
  .soft-hero {
    min-height: 0;
    padding-top: 96px;
  }
}

/* ---------------------------------------------------------------------------
   12 · Motion preferences and print
   ------------------------------------------------------------------------ */

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

  .logo-c { stroke-dashoffset: 0; }
  .logo-r { opacity: 1; }
  .vision-rule { transform: scaleX(1); }
}

@media print {
  .site-header,
  .mobile-menu,
  .mobile-quick-contact,
  .scroll-progress {
    display: none !important;
  }
}

/* ===========================================================================
   13 · Type scale and vertical rhythm
   The original build ran a very wide scale: display type near 90px against
   card copy at 12px and labels at 9px. That reads as two unrelated systems
   and the small end is genuinely hard to read. Everything below compresses
   the range from both ends: the display sizes come down, the small sizes
   come up to a readable floor, and the space between blocks tightens so a
   section fits a screen instead of spilling over it.
   ======================================================================== */

:root {
  --rc-display: clamp(44px, 5.2vw, 76px);
  --rc-page-title: clamp(41px, 4.8vw, 66px);
  --rc-section-title: clamp(31px, 3.5vw, 49px);
  --rc-card-title: 21px;
  --rc-lead: clamp(16px, 1.15vw, 17.5px);
  --rc-body: 14.5px;
  --rc-meta: 12.5px;
  --rc-label: 11.5px;
}

/* --- display and headings --- */

.display-title {
  margin: 20px 0 22px;
  font-size: var(--rc-display);
  line-height: .96;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.page-title {
  font-size: var(--rc-page-title);
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.method-page-hero .page-title {
  font-size: var(--rc-page-title);
}

.section-title {
  font-size: var(--rc-section-title);
  line-height: 1.03;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.cta-content h2,
.form-head h2,
.method-panel-copy h2,
.boundary-panel h2,
.lens-panel h3,
.service-name {
  font-size: clamp(30px, 3.3vw, 46px);
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.footer-statement {
  font-size: clamp(21px, 1.9vw, 29px);
  line-height: 1.3;
}

.map-heading h2 {
  font-size: 22px;
  letter-spacing: -.028em;
}

.faq-list summary {
  font-size: 20px;
  letter-spacing: -.024em;
}

.support-card h3,
.coverage-card h3,
.journey-step h3,
.city-grid h3,
.compare-grid h3,
.simple-payment-grid h3,
.difference-grid .principle h3,
.family-card h3,
.prepared-card h3 {
  font-size: var(--rc-card-title);
  line-height: 1.16;
  letter-spacing: -.028em;
}

.family-card h3 {
  font-size: 23px;
}

/* --- reading copy --- */

.hero-copy,
.page-intro,
.section-copy,
.lens-panel > p,
.method-panel-copy p,
.service-line,
.cta-side p,
.form-intro,
.service-detail p {
  font-size: var(--rc-lead);
  line-height: 1.62;
}

.support-card p,
.coverage-card p,
.journey-step p,
.city-grid p,
.compare-grid p,
.simple-payment-grid p,
.difference-grid .principle p,
.family-card > p,
.map-place-card p,
.boundary-list span,
.fit-card li,
.faq-list details p,
.check-row,
.service-detail li,
.deliverable,
.emergency-note p,
.prepared-card p,
.hero-note,
.zero-fee-note span,
.family-card li,
.lens-point,
.query-promise strong {
  font-size: var(--rc-body);
  line-height: 1.6;
}

/* --- small print gets a floor it can actually be read at --- */

.map-legend span,
.map-note,
.map-selectors button,
.hero-metrics span,
.independence-chip,
.footer-signal,
.footer-bottom span,
.footer-column a,
.footer-column span,
.query-promise span,
.intake-rules li,
.field-grid label > span,
.brand-description,
.truth-set span,
.difference-proof span,
.boundary-list strong,
.intro-points span,
.start-intro span,
.map-place-card span,
.family-card-top small,
.fit-card > span,
.emergency-note span,
.form-seal,
.mobile-menu-status,
.mobile-menu a:not(.button) span,
.query-promise li i,
.lens-tab span:first-child {
  font-size: var(--rc-meta);
  line-height: 1.5;
}

.eyebrow,
.micro-label,
.form-section-label,
.map-kicker,
.service-code,
.card-index,
.support-card > span,
.coverage-card > span,
.journey-step > span,
.city-grid article > span,
.compare-grid article > span,
.simple-payment-grid article > span,
.method-explorer-nav button span,
.family-card-top span {
  font-size: var(--rc-label);
  letter-spacing: .07em;
}

.desktop-nav a,
.button,
.method-explorer-nav button strong,
.hero-metrics strong,
.footer-column h3 {
  font-size: 13.5px;
}

.footer-column h3 {
  letter-spacing: .09em;
}

.brand-name {
  font-size: 17px;
}

/* --- rhythm: shorter sections, so one screen holds one idea --- */

.section,
.compact-section,
.method-core-section,
.method-hubs-section,
.method-compare-section,
.method-limits-section {
  padding: clamp(52px, 4.4vw, 80px) 0;
  scroll-margin-top: 84px;
}

.section-small {
  padding: clamp(40px, 3.4vw, 58px) 0;
}

.vision-section {
  padding: clamp(44px, 3.6vw, 64px) 0;
}

.difference-section {
  padding-bottom: clamp(36px, 3vw, 50px);
}

.home-final-cta {
  padding-top: clamp(24px, 2.2vw, 34px);
}

.section-heading {
  margin-bottom: clamp(22px, 2vw, 34px);
}

.section-copy {
  margin-top: 12px;
}

.cta-panel,
.soft-cta {
  padding: clamp(34px, 4.4vw, 62px);
}

/* Cards size to their content instead of holding a fixed block of air */
.support-card,
.coverage-card {
  min-height: 0;
  padding: clamp(20px, 1.7vw, 26px);
}

.journey-step,
.city-grid article,
.compare-grid article,
.simple-payment-grid article,
.difference-grid .principle,
.family-card {
  min-height: 0;
}

.journey-step,
.city-grid article,
.simple-payment-grid article,
.difference-grid .principle {
  padding: clamp(20px, 1.7vw, 26px);
}

.compare-grid article {
  padding: clamp(18px, 1.5vw, 23px);
}

.support-card h3,
.coverage-card h3,
.journey-step h3,
.city-grid h3,
.compare-grid h3,
.simple-payment-grid h3,
.difference-grid .principle h3 {
  margin-top: clamp(20px, 1.8vw, 28px);
  margin-bottom: 8px;
}

.fit-card {
  min-height: 0;
}

.fit-card ul {
  margin-top: 18px;
}

/* --- the hero fits the screen it opens on --- */

.site-frame {
  min-height: 100svh;
}

.hero,
.soft-hero {
  min-height: 0;
  padding: clamp(104px, 9vw, 128px) 0 clamp(44px, 4vw, 62px);
}

.hero-grid {
  align-items: center;
  gap: clamp(32px, 3.4vw, 58px);
}

@media (min-width: 821px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.hero-actions {
  margin-top: 24px;
}

.hero-note {
  margin-top: 20px;
}

.hero-metrics {
  margin-top: 20px;
}

.hero-metrics div {
  min-height: 0;
  padding: 13px 14px 12px 0;
}

.corridor-map {
  min-height: 0;
  padding: clamp(14px, 1.25vw, 18px);
  gap: 10px;
}

.map-stage {
  min-height: 0;
  margin-top: 0;
  aspect-ratio: 780 / 420;
}

.map-heading {
  margin-bottom: 0;
}

.map-place-card {
  margin-top: 0;
  padding: 13px 16px;
}

.map-selectors {
  margin: 0;
  gap: 6px;
}

.map-selectors button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.map-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.hero,
.soft-hero {
  padding: clamp(100px, 8.5vw, 120px) 0 clamp(40px, 3.6vw, 56px);
}

.page-hero,
.soft-page-hero {
  padding: clamp(112px, 9vw, 140px) 0 clamp(40px, 3.6vw, 62px);
}

.method-page-hero {
  padding: clamp(112px, 9vw, 140px) 0 clamp(40px, 3.6vw, 62px);
}

.method-explorer-panel {
  min-height: 0;
  padding: clamp(26px, 3.4vw, 48px);
}

.lens-content {
  padding: clamp(28px, 3.4vw, 48px);
}

.case-form {
  padding: clamp(24px, 3.4vw, 46px);
}

.intake-aside,
.query-aside {
  padding: clamp(22px, 2.4vw, 30px);
}

.service-row > button {
  min-height: 0;
  padding: clamp(20px, 2vw, 30px) 0;
}

/* --- small screens: same scale, tuned down one notch --- */

@media (max-width: 820px) {
  :root {
    --rc-display: clamp(40px, 9.4vw, 58px);
    --rc-page-title: clamp(38px, 8.8vw, 54px);
    --rc-section-title: clamp(29px, 6.6vw, 42px);
    --rc-card-title: 20px;
    --rc-lead: 16px;
    --rc-body: 14.5px;
  }

  .section,
  .compact-section,
  .method-core-section,
  .method-hubs-section,
  .method-compare-section,
  .method-limits-section {
    padding: 52px 0;
    scroll-margin-top: 76px;
  }

  .section-small {
    padding: 40px 0;
  }

  .hero,
  .soft-hero {
    padding: calc(88px + env(safe-area-inset-top)) 0 40px;
  }

  .page-hero,
  .soft-page-hero,
  .method-page-hero {
    padding: calc(94px + env(safe-area-inset-top)) 0 40px;
  }

  .cta-content h2,
  .form-head h2,
  .method-panel-copy h2,
  .boundary-panel h2,
  .lens-panel h3,
  .service-name {
    font-size: clamp(28px, 6.4vw, 40px);
  }
}

@media (max-width: 620px) {
  :root {
    --rc-display: clamp(37px, 10.4vw, 46px);
    --rc-page-title: clamp(35px, 9.8vw, 44px);
    --rc-section-title: clamp(27px, 7.4vw, 35px);
    --rc-meta: 12.5px;
    --rc-label: 11px;
  }

  .display-title {
    margin: 16px 0 18px;
  }

  .hero-copy {
    line-height: 1.55;
  }

  .section,
  .compact-section,
  .method-core-section,
  .method-hubs-section,
  .method-compare-section,
  .method-limits-section {
    padding: 44px 0;
  }

  .section-small {
    padding: 34px 0;
  }

  .vision-section {
    padding: 40px 0;
  }

  .vision-statement blockquote {
    font-size: clamp(23px, 6.6vw, 30px);
  }

  .map-heading h2 {
    font-size: 20px;
  }

  .faq-list summary {
    font-size: 18px;
  }

  /* Tap targets stay at finger size even though the desktop chips shrank */
  .map-selectors button {
    min-height: 40px;
    padding: 0 14px;
    font-size: 12.5px;
  }

  .map-stage {
    aspect-ratio: 780 / 468;
  }

  /* Room for the sticky query bar under the last block of every page */
  .page-main {
    padding-bottom: 8px;
  }

  .site-footer {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }
}

/* Nothing on any page may push the document sideways */
.container,
.narrow-container,
.hero-grid,
.page-hero-grid,
.section-heading,
.support-grid,
.coverage-grid,
.journey-grid,
.field-grid {
  max-width: 100%;
  min-width: 0;
}

.fit-card .fit-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 47, 56, 0.08);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(15, 47, 56, 0.72);
}

/* --- corridor flow (section three) --- */
.corridor-section .section-heading { margin-bottom: clamp(30px,2.8vw,46px); }
.corridor-flow { display:grid; grid-template-columns: minmax(0,1fr) minmax(94px,.56fr) minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:clamp(10px,1.6vw,28px); align-items:start; }
.corridor-label { grid-row:1; padding-bottom:11px; margin-bottom:15px; border-bottom:1px solid rgba(184,240,230,.14); font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(184,240,230,.5); }
.corridor-label.is-origins { grid-column:1; }
.corridor-label.is-bridge { grid-column:2; border-bottom-color:transparent; }
.corridor-label.is-hub { grid-column:3; }
.corridor-origins { grid-row:2; grid-column:1; display:grid; grid-template-rows:repeat(8,minmax(40px,1fr)); margin:0; padding:0; list-style:none; }
.corridor-origins li { display:flex; align-items:center; gap:13px; padding:0 10px 0 3px; border-radius:10px; color:#eaf6f3; font-size:clamp(13.5px,1.05vw,15.5px); font-weight:500; letter-spacing:-.005em; transition:background 220ms cubic-bezier(.16,1,.3,1), transform 220ms cubic-bezier(.16,1,.3,1); }
.corridor-origins li:hover { background:rgba(184,240,230,.06); transform:translateX(3px); }
.origin-dot { flex:0 0 7px; width:7px; height:7px; border-radius:50%; background:#5fc9b8; animation:corridor-dot 6.4s ease-in-out infinite; animation-delay:calc(var(--row,0) * .28s); }
@keyframes corridor-dot { 0%,72%,100% { opacity:.5; box-shadow:0 0 0 3px rgba(95,201,184,.12); } 10%,22% { opacity:1; box-shadow:0 0 0 5px rgba(95,201,184,.22); } }
.corridor-bridge { position:relative; grid-row:2; grid-column:2; align-self:stretch; }
.corridor-bridge svg { position:absolute; inset:0; display:block; width:100%; height:100%; }
.corridor-bridge path { fill:none; stroke:rgba(146,214,202,.26); stroke-width:1; vector-effect:non-scaling-stroke; }
.corridor-bridge path.flow { stroke:#7fd8c8; stroke-width:1.7; stroke-dasharray:20 220; animation:corridor-run 6.4s linear infinite; animation-delay:calc(var(--row,0) * .28s); }
@keyframes corridor-run { from { stroke-dashoffset:240; } to { stroke-dashoffset:0; } }
.corridor-destination { grid-row:2; grid-column:3; align-self:center; padding:clamp(20px,1.85vw,28px); border-radius:26px; background:linear-gradient(158deg, rgba(95,201,184,.15), rgba(95,201,184,.035)); border:1px solid rgba(146,214,202,.24); box-shadow:0 18px 48px -30px rgba(0,0,0,.7); }
.corridor-destination > strong { display:block; font-size:clamp(21px,2.1vw,28px); font-weight:600; letter-spacing:-.022em; line-height:1.1; color:#eafffb; }
.corridor-destination > p { margin:9px 0 0; font-size:clamp(12.5px,1vw,13.5px); line-height:1.6; color:rgba(213,240,235,.72); }
.destination-points { display:grid; gap:9px; margin:16px 0 0; padding:15px 0 0; border-top:1px solid rgba(146,214,202,.16); list-style:none; }
.destination-points li { position:relative; padding-left:21px; font-size:12.5px; line-height:1.5; color:rgba(213,240,235,.8); }
.destination-points li::before { content:"\2713"; position:absolute; left:0; top:-1px; font-size:11px; color:#7fd8c8; }
.corridor-footnote { max-width:82ch; margin:clamp(22px,2vw,32px) 0 0; padding-top:17px; border-top:1px solid rgba(184,240,230,.12); font-size:12.5px; line-height:1.65; color:rgba(213,240,235,.58); }
@media (max-width:860px) {
  .corridor-flow { display:flex; flex-direction:column; align-items:stretch; }
  .corridor-label.is-bridge, .corridor-bridge { display:none; }
  .corridor-label.is-origins { order:0; }
  .corridor-origins { order:1; grid-template-rows:none; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; }
  .corridor-label.is-hub { order:2; margin-top:26px; }
  .corridor-destination { order:3; }
}
@media (max-width:359px) { .corridor-origins { grid-template-columns:1fr; } }

/* --- hero map: centred, trimmed --- */
.hero-visual { min-width:0; display:flex; align-items:center; }
.hero-visual .corridor-map { flex:1 1 auto; min-width:0; }
.map-hit { fill:transparent; cursor:pointer; }
.map-points g:focus-visible { outline:none; }
.map-points g:focus-visible .map-point-ring { stroke:#b8f0e6; stroke-width:2.5; }