/* ===========================================================================
   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);
}

/* The mark is now a rendered image, so it carries its own ground. The dark
   tile behind it is dropped, or the round mark reads as a sticker on a
   square. A raster cannot draw itself in, so it settles instead. */
.brand-mark,
.site-footer .brand-mark {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.raycare-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  overflow: visible;
  animation: rc-logo-settle 760ms var(--rc-ease) 120ms both;
}

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

@keyframes rc-logo-settle {
  from { opacity: 0; transform: translateY(4px) scale(.94); }
  to { opacity: 1; transform: none; }
}

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

@media (prefers-reduced-motion: reduce) {
  .raycare-logo,
  .brand-lockup:hover .raycare-logo { animation: 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.
   ------------------------------------------------------------------------ */

/* The section scale itself is declared once, further down, against the
   --rc-section-y token. It was previously set here as well, and the two
   unconditional copies meant the rhythm was decided by declaration order
   rather than intent. */

.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
   ------------------------------------------------------------------------ */

/* The right column now carries the map and, beneath it, the before/during/
   after strip that used to sit under the hero copy. Moving it across keeps
   the two columns close in height once the vision block joins the left. */
.hero-visual {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 1.7vw, 26px);
  justify-content: center;
  /* stretch, or the metrics row shrinks to its content and sits inset
     from the map card above it */
  align-items: stretch;
}

.hero-visual .corridor-map {
  flex: 0 1 auto;
  min-width: 0;
}

/* Padded to the map's own inner gutter so the three labels line up with
   the map card's text rather than floating loose beneath it */
.hero-visual .hero-metrics {
  margin-top: 0;
  max-width: none;
  padding: 0 clamp(14px, 1.25vw, 18px);
}

/* The vision statement sits directly under the headline. No card, just a
   rule and an indent, so it reads as part of the opening statement rather
   than a second panel competing with the display title above it. */
/* One rhythm inside the block: every gap is a step of the same scale, so the
   three parts read as eyebrow, statement, explanation rather than one clump.
   Sized up to the site's reading scale, with room above and below so it
   separates from the headline and the hero paragraph. */
.hero-vision {
  margin: clamp(19px, 1.7vw, 27px) 0 clamp(16px, 1.45vw, 22px);
  padding: clamp(2px, .2vw, 4px) 0 clamp(2px, .2vw, 4px) clamp(18px, 1.6vw, 24px);
  border-left: 2px solid rgba(79, 173, 161, .42);
  /* holds the measure so a long line cannot push the column wider than the map */
  max-width: 46em;
}

.hero-vision .eyebrow {
  display: block;
  margin: 0 0 clamp(9px, .8vw, 12px);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(16, 47, 56, .58);
}

.hero-vision blockquote {
  margin: 0;
  font-family: var(--font-serif, Georgia, "Times New Roman", serif);
  font-size: clamp(15.5px, 1.35vw, 18.5px);
  font-style: italic;
  line-height: 1.5;
  letter-spacing: -.008em;
  color: var(--forest, #102f38);
}

.hero-vision blockquote::before { content: "“"; margin-right: 1px; opacity: .5; }
.hero-vision blockquote::after  { content: "”"; margin-left: 1px; opacity: .5; }

/* A hairline separates the explanation from the statement it explains */
.hero-vision > p {
  margin: clamp(12px, 1.1vw, 16px) 0 0;
  padding-top: clamp(11px, 1vw, 14px);
  border-top: 1px solid rgba(16, 47, 56, .09);
  font-size: clamp(14px, 1.2vw, 15.5px);
  line-height: 1.68;
  color: rgba(16, 47, 56, .7);
}

/* An invisible target so the map dots can be tapped, not just toured */
.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;
}

.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 */
/* The nine region notes run from 63 to 114 characters. With the card free to
   size to its content it grew and shrank on every auto-tour step, which moved
   the whole right column. The worst case is reserved once, and content is
   top-aligned so a short note sits still instead of recentring itself. */
.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: start;
  align-content: 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);
  /* Measured: the longest note wraps to four lines in this column, so four
     line boxes are reserved. In em, so it tracks the type scale. */
  min-height: 6.4em;
}

/* The label column is held too, so "Middle East" and "Nepal" occupy the
   same space and the name never reflows the row beneath it */
.map-place-card strong {
  min-height: 1.35em;
}

/* 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 · "Where we can help" corridor flow — the third scroll on the homepage

   Eight origins converge on one destination. The curves carry the meaning,
   so the rows stay quiet: names on a hairline, no boxes. Rows and curves are
   both eighths of the same height, which is what keeps them aligned.
   ------------------------------------------------------------------------ */

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

/* Eight equal rows, so every curve meets its name */
.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 var(--rc-ease), transform 220ms var(--rc-ease);
}

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

/* The dot brightens just as its pulse leaves for the hub */
@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); }
}

/* The svg is taken out of flow so its 220x400 viewBox cannot inflate the row.
   The row is then exactly as tall as the eight names, which is what makes
   each curve leave from the middle of its own row. */
.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%;
}

/* The viewBox is stretched to the column, so strokes are held at true width */
.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: var(--rc-radius-lg);
  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: "✓";
  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);
}

/* Below the split the flow reads top to bottom, so the curves step aside
   and the names take two columns */
@media (max-width: 860px) {
  /* start would shrink each child to its own width once the axis turns */
  .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; }
  .corridor-label.is-hub { order: 2; margin-top: 26px; }
  .corridor-destination { order: 3; }

  .corridor-origins {
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }
}

/* Two columns hold down to the narrowest common phone; only below that does
   the list fall back to one */
@media (max-width: 359px) {
  .corridor-origins {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   8 · 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;
    /* full width column wraps the longest note to about five lines */
    min-height: 8em;
  }

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

/* --- The one vertical rhythm for the whole site ---------------------------
   Every section band is a multiple of a single token, so the gaps between
   ideas are the same on every page. The two sections that deliberately join
   more tightly (the closing argument and the call to action beneath it) are
   expressed as fractions of that token, not as loose values. */

:root {
  --rc-section-y: clamp(60px, 5vw, 94px);
}

.section,
.compact-section,
.method-core-section,
.method-hubs-section,
.method-compare-section,
.method-limits-section {
  padding: var(--rc-section-y) 0;
  /* anchors clear the floating bar instead of hiding under it */
  scroll-margin-top: calc(var(--rc-bar-h, 56px) + var(--rc-bar-inset, 8px) + 16px);
}

.section-small {
  padding: calc(var(--rc-section-y) * .7) 0;
}

/* The closing argument and its call to action read as one unit */
.difference-section {
  padding-bottom: calc(var(--rc-section-y) * .55);
}

.home-final-cta {
  padding-top: calc(var(--rc-section-y) * .45);
}

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

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

/* --- 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);
    align-items: center;
  }
}

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

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

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

.hero-metrics div {
  min-height: 0;
  padding: 17px 14px 16px 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;
}

/* Padding answers to the height of the screen as well as its width, so a
   short laptop gets a shorter hero instead of pushing content past the fold */
.hero,
.soft-hero {
  padding: clamp(88px, 11svh, 120px) 0 clamp(32px, 5svh, 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;
}

/* ---------------------------------------------------------------------------
   9 · What We Help With — the opening promise carries the page, so it is set
   a full step above the standard page intro rather than at reading size.
   Scoped to this hero so the method and start intros keep their own scale.
   ------------------------------------------------------------------------ */

.services-page-hero .page-intro {
  font-size: clamp(19px, 1.65vw, 25px);
  line-height: 1.5;
  font-weight: 450;
  letter-spacing: -.012em;
  color: var(--forest, #102f38);
  text-wrap: balance;
}

@media (max-width: 820px) {
  .services-page-hero .page-intro {
    font-size: clamp(18px, 4.4vw, 22px);
    max-width: none;
  }
}

/* ---------------------------------------------------------------------------
   10 · Mobile pass. Findings from a device-width audit of all four pages:
   overflow and gutters were already clean, form fields already sit at 55px
   with 16px text (which is what stops iOS zooming on focus). What was left
   was tap comfort and the small tracked labels, plus the touch latency and
   tap-flash that make a site feel less smooth than it looks.
   ------------------------------------------------------------------------ */

/* Removes the ~300ms double-tap delay and the grey flash on every tap */
a,
button,
summary,
label,
[role="button"],
input[type="checkbox"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 820px) {
  /* The wordmark was a 39px target, just under the 44px comfortable minimum */
  .brand-lockup {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Uppercase tracked labels read smaller than their nominal size, so the
     floor is lifted a step on small screens rather than left at 10.5px */
  .eyebrow,
  .micro-label,
  .map-kicker,
  .corridor-label,
  .form-section-label {
    font-size: 11.5px;
    letter-spacing: .13em;
  }

  /* The row is the real target, but the box itself should still be easy to hit */
  .check-row input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }

  /* Momentum scrolling for the few strips that scroll sideways on purpose */
  .map-selectors,
  .tablewrap,
  .method-explorer-nav {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .map-selectors::-webkit-scrollbar,
  .method-explorer-nav::-webkit-scrollbar {
    display: none;
  }
}

/* Motion is opt-out everywhere, including the scroll jump */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
   11 · Short viewports. A 1280x720 laptop was the case where the hero ran
   past the fold. Both columns are trimmed by a similar amount so the symmetry
   established above survives the squeeze.
   ------------------------------------------------------------------------ */

@media (min-width: 861px) and (max-height: 840px) {
  .hero-vision {
    margin: clamp(12px, 1.2vw, 18px) 0 clamp(10px, 1vw, 15px);
  }

  .hero-actions { margin-top: 15px; }
  .hero-note { margin-top: 12px; }

  .hero-visual { gap: clamp(13px, 1.3vw, 18px); }

  /* A slightly wider stage is shorter, and the map reads the same. Tuned so
     the two columns stay level once the left one is trimmed. */
  .map-stage { aspect-ratio: 780 / 398; }

  .corridor-map { gap: 8px; }
  .map-heading { margin-bottom: 0; }
  .map-place-card { padding: 11px 15px; }
  .hero-metrics div { padding: 13px 14px 12px 0; }
}

/* Tighter still, but nothing is hidden: every sentence stays on the page */
@media (min-width: 861px) and (max-height: 730px) {
  .hero-vision > p {
    margin-top: 9px;
    padding-top: 8px;
    line-height: 1.55;
  }

  .hero-vision blockquote { line-height: 1.4; }
  .map-stage { aspect-ratio: 780 / 360; }
}

/* ---------------------------------------------------------------------------
   12 · Chrome. One frosted system for the header bar, the mobile sheet and
   the floating contact button. Content surfaces are left alone so long-form
   copy keeps a solid ground.

   The bar is dark by design and its text is white, so the frost here is a
   dark translucency. A light tint would erase the navigation.
   ------------------------------------------------------------------------ */

:root {
  --rc-glass-blur: blur(22px) saturate(140%);
  /* dark bar */
  --rc-bar-tint: rgba(7, 27, 35, .72);
  --rc-bar-tint-strong: rgba(7, 27, 35, .88);
  --rc-bar-line: rgba(174, 231, 221, .18);
  --rc-bar-sheen: linear-gradient(115deg, rgba(255, 255, 255, .05), transparent 42%);
  /* light sheet, for the mobile menu */
  --rc-sheet-tint: rgba(245, 248, 246, .86);
}

.site-header {
  transition: padding 420ms var(--rc-ease), background 420ms ease;
}

.nav-shell {
  background: var(--rc-bar-sheen), var(--rc-bar-tint);
  border: 1px solid var(--rc-bar-line);
  backdrop-filter: var(--rc-glass-blur);
  -webkit-backdrop-filter: var(--rc-glass-blur);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 16px 48px rgba(6, 23, 30, .22);
  transition: transform 460ms var(--rc-ease), box-shadow 460ms var(--rc-ease),
    background 420ms ease, min-height 420ms var(--rc-ease);
}

/* Scrolled, the bar draws in and firms up, which reads as the page moving
   underneath it rather than the bar resizing */
.site-header.scrolled {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header.scrolled .nav-shell {
  min-height: 62px;
  transform: scale(.986);
  background: var(--rc-bar-sheen), var(--rc-bar-tint-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 20px 56px rgba(6, 23, 30, .3);
}

.desktop-nav a {
  transition: color 240ms ease, background 240ms ease, transform 320ms var(--rc-ease);
}

.desktop-nav a:hover {
  transform: translateY(-1px);
}

.mobile-menu {
  background:
    radial-gradient(circle at 85% 10%, rgba(95, 201, 184, .16), transparent 42%),
    var(--rc-bar-tint-strong, rgba(5, 20, 27, .94));
  backdrop-filter: var(--rc-glass-blur);
  -webkit-backdrop-filter: var(--rc-glass-blur);
  color: #eafffb;
}

.mobile-quick-contact {
  background: rgba(7, 27, 35, .82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(174, 231, 221, .18);
  box-shadow: 0 10px 30px rgba(6, 23, 30, .32);
}

/* Without the effect a translucent bar has nothing behind it, so both the
   bar and the sheet go opaque rather than unreadable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-shell,
  .site-header.scrolled .nav-shell { background: rgba(7, 27, 35, .97); }
  .mobile-menu { background: #071b23; }
  .mobile-quick-contact { background: rgba(7, 27, 35, .97); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .nav-shell,
  .desktop-nav a { transition: none; }
  .site-header.scrolled .nav-shell { transform: none; }
}

/* ---------------------------------------------------------------------------
   13 · Query channel. WhatsApp stays the default path; email is the second
   route for families who would rather write than message.
   ------------------------------------------------------------------------ */

.channel-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  border: 1px solid rgba(23, 50, 59, .1);
  border-radius: 12px;
  background: rgba(23, 50, 59, .04);
}

.channel-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(16, 47, 56, .62);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 280ms var(--rc-ease), color 220ms ease, box-shadow 280ms var(--rc-ease);
}

.channel-tabs button:hover { color: var(--forest, #102f38); }

.channel-tabs button.active {
  background: #fff;
  color: var(--forest, #102f38);
  box-shadow: 0 1px 3px rgba(16, 47, 56, .12);
}

.channel-tabs button:focus-visible {
  outline: 2px solid var(--forest-2, #3f817c);
  outline-offset: 1px;
}

/* The email contact block reuses the WhatsApp block's shape so switching tabs
   changes the content, not the layout */
.form-email .form-whatsapp-mark {
  background: rgba(63, 129, 124, .12);
  color: var(--forest-2, #3f817c);
}

/* A class rule with display:flex outranks the hidden attribute's own
   display:none, so the attribute is honoured explicitly */
.form-whatsapp[hidden],
.form-email[hidden] {
  display: none;
}

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

.form-note {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.55;
}

.form-note strong { font-size: 14.5px; }

.form-note-ok {
  border: 1px solid rgba(63, 129, 124, .3);
  background: rgba(63, 129, 124, .08);
  color: var(--forest, #102f38);
}

.form-note-error {
  border: 1px solid rgba(168, 74, 47, .3);
  background: rgba(168, 74, 47, .07);
  color: #7c3a22;
}

.form-note a { color: inherit; text-decoration: underline; }

.form-submit[disabled] { opacity: .65; cursor: progress; }

/* Email beside the reply-time note on the query page */
.start-intro-mail {
  display: inline-block;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--forest-2, #3f817c);
  text-decoration: none;
  border-bottom: 1px solid rgba(63, 129, 124, .35);
}

.start-intro-mail:hover { border-bottom-color: currentColor; }

@media (max-width: 820px) {
  .channel-tabs button { min-height: 46px; }
}

/* ---------------------------------------------------------------------------
   14 · Touch targets in the footer and the new contact links. Footer links
   sat at 19px site-wide, which is fine with a mouse and awkward with a thumb.
   ------------------------------------------------------------------------ */

@media (max-width: 820px) {
  .footer-column a,
  .footer-column span {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .start-intro-mail {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   15 · Header, rebuilt to a proportional lockup.

   Measured before: a 46px mark next to a 17px wordmark inside a 62px bar,
   which left 8px of clearance and made the mark read as nearly three times
   the type. A lockup wants the mark close to the height of the text block it
   sits beside, so the mark comes down, the two text lines tighten, and the
   bar slims around them.
   ------------------------------------------------------------------------ */

.nav-shell {
  min-height: 56px;
  padding: 0 10px 0 12px;
  gap: 16px;
}

.brand-lockup {
  gap: 11px;
  align-items: center;
}

.brand-mark,
.site-footer .brand-mark {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
}

/* The two lines now stack to about the mark's height, so the lockup reads as
   one block instead of a large badge with text floating beside it */
.brand-name {
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: -.008em;
}

.brand-description {
  font-size: 9.75px;
  line-height: 1.3;
  letter-spacing: .02em;
  opacity: .68;
}

/* Denser glass. The bar was reading as washed out rather than frosted. */
:root {
  --rc-glass-blur: blur(26px) saturate(150%);
  --rc-bar-tint: rgba(7, 27, 35, .88);
  --rc-bar-tint-strong: rgba(5, 21, 28, .95);
}

/* Scrolled: darker, tighter, and lifted. The change is legible without the
   bar appearing to resize under the cursor. */
.site-header.scrolled .nav-shell {
  min-height: 50px;
  transform: scale(.99);
}

.site-header.scrolled .brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

.site-header.scrolled .brand-description {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.brand-mark,
.brand-description {
  transition: width 380ms var(--rc-ease), height 380ms var(--rc-ease),
    flex-basis 380ms var(--rc-ease), opacity 300ms ease, max-height 380ms var(--rc-ease);
}

.brand-description {
  max-height: 2em;
}

@media (max-width: 820px) {
  .nav-shell { min-height: 54px; }
  .brand-mark,
  .site-footer .brand-mark { width: 32px; height: 32px; flex: 0 0 32px; }
  .site-header.scrolled .brand-description { opacity: .72; max-height: 2em; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark,
  .brand-description { transition: none; }
}

/* ---------------------------------------------------------------------------
   16 · Hero clearance. The header floats over the hero, so the hero's top
   padding has to clear it and then add breathing room, not merely reach it.
   Measured before: content began 33px under the bar, which read as the map
   card being stuck to the header.
   ------------------------------------------------------------------------ */

:root {
  --rc-bar-h: 56px;      /* nav shell */
  --rc-bar-inset: 8px;   /* header padding above it */
}

.hero,
.soft-hero {
  padding-top: calc(var(--rc-bar-h) + var(--rc-bar-inset) + clamp(42px, 6.8svh, 74px));
  padding-bottom: clamp(32px, 5svh, 56px);
}

.page-hero,
.soft-page-hero {
  padding-top: calc(var(--rc-bar-h) + var(--rc-bar-inset) + clamp(30px, 4.5svh, 54px));
}

@media (max-width: 820px) {
  :root { --rc-bar-h: 54px; }
}

/* ---------------------------------------------------------------------------
   17 · Containment. The map svg overhangs its section by a few pixels at some
   viewport widths, which shows up as a hairline of the next band bleeding in.
   ------------------------------------------------------------------------ */

.map-stage,
.corridor-map {
  overflow: hidden;
}

.map-stage svg {
  display: block;
}

/* Sections own their content, so nothing crosses a band boundary */
.page-main > section {
  position: relative;
  overflow-x: clip;
}

/* ---------------------------------------------------------------------------
   18 · Entrance failsafe. The .reveal entrance animates from opacity 0 with a
   small upward shift. If motion is reduced, or the animation is interrupted,
   the element must resolve to its visible resting state rather than stay
   stuck on the first frame.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.delay-1,
  .reveal.delay-2,
  .reveal.delay-3,
  .reveal.delay-4 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------------
   19 · Mobile navigation state and compaction.

   The mobile sheet links now show which page you are on, and tapping a link
   gives a clear pressed colour so the section you chose reads back to you.
   The header glass is deepened so the bar is unmistakably frosted.
   ------------------------------------------------------------------------ */

/* Deeper frost on the bar so it reads as glass, not a flat panel */
:root {
  --rc-glass-blur: blur(30px) saturate(155%);
  --rc-bar-tint: rgba(7, 27, 35, .86);
  --rc-bar-tint-strong: rgba(5, 20, 27, .94);
}

@media (max-width: 820px) {
  /* The current page reads back in the accent, its number in a filled chip */
  .mobile-menu a:not(.button) {
    color: rgba(234, 246, 243, .78);
    transition: color 200ms ease, transform 200ms var(--rc-ease);
  }

  .mobile-menu a:not(.button) span {
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
  }

  .mobile-menu a:not(.button).active {
    color: #eafffb;
  }

  .mobile-menu a:not(.button).active span {
    background: var(--signal, #8eddd1);
    color: #062028;
    border-color: transparent;
  }

  /* A pressed link flushes to the accent, so the tap is acknowledged */
  .mobile-menu a:not(.button):active {
    color: var(--signal, #8eddd1);
    transform: translateX(4px);
  }

  /* Tighter sheet so the four sections and the button fit one thumb-reach */
  .mobile-menu {
    padding: calc(76px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
    gap: 2px;
  }

  .mobile-menu a:not(.button) {
    min-height: 54px;
    padding: 11px 2px;
    font-size: clamp(26px, 7vw, 36px);
  }

  .mobile-menu-status {
    margin-bottom: 10px;
  }
}

/* Phones proper: a compacter, squarer rhythm so each screen holds one idea */
@media (max-width: 620px) {
  :root {
    --rc-section-y: clamp(46px, 11vw, 60px);
  }

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

  /* Cards breathe a little less so two never leave an awkward half on screen */
  .support-card,
  .coverage-card {
    min-height: 0;
  }

  /* The hero metrics strip reads as three even thirds, not a ragged stack */
  .hero-visual .hero-metrics {
    padding: 0 2px;
  }
}

/* =====================================================================
   Language switcher and mobile menu (2026-09-11)
   One block owns the phone chrome. The menu sheet is opaque on purpose: it
   must stay legible with or without backdrop-filter. A translucent light
   sheet under white links is how the menu became white-on-white.
   ===================================================================== */
:root {
  --rc-menu-bg-1: #0d2e37;
  --rc-menu-bg-2: #04131a;
  --rc-menu-ink: #eafffb;
  --rc-menu-soft: rgba(234, 246, 243, .64);
  --rc-menu-line: rgba(255, 255, 255, .08);
  --rc-accent: #8eddd1;
  --rc-accent-ink: #062028;
}

.lang-icon {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.lang-option,
.lang-rail-toggle,
.lang-btn,
.lang-sheet-close,
.menu-lang {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.lang-option:focus-visible,
.lang-rail-toggle:focus-visible,
.lang-btn:focus-visible,
.lang-sheet-close:focus-visible,
.menu-lang:focus-visible,
.menu-button:focus-visible {
  outline: 2px solid var(--rc-accent);
  outline-offset: 2px;
}

/* Desktop and tablet: a tab flush to the left edge, covering as little of
   the page as possible */
.lang-rail {
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(-50%);
}

.lang-rail-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  min-height: 66px;
  padding: 10px 0;
  border: 1px solid rgba(163, 224, 214, .24);
  border-left: 0;
  border-radius: 0 14px 14px 0;
  background: rgba(7, 27, 35, .92);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  color: var(--rc-menu-ink);
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(3, 15, 20, .26);
  transition: width 200ms ease, background 200ms ease;
}

.lang-rail-toggle:hover,
.lang-rail.open .lang-rail-toggle {
  width: 48px;
  background: rgba(10, 38, 47, .97);
}

.lang-rail-toggle .lang-icon {
  color: var(--rc-accent);
}

.lang-code {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  opacity: .85;
}

.lang-rail-list {
  display: none;
  gap: 2px;
  min-width: 212px;
  max-height: min(72vh, 480px);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgba(163, 224, 214, .2);
  border-radius: 16px;
  background:
    radial-gradient(circle at 90% 0%, rgba(95, 201, 184, .16), transparent 46%),
    rgba(5, 20, 27, .97);
  box-shadow: 0 24px 60px rgba(3, 15, 20, .45);
}

.lang-rail.open .lang-rail-list {
  display: grid;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #d6f3ee;
  text-align: start;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.lang-option:hover {
  background: rgba(142, 221, 209, .1);
}

.lang-native {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.lang-label {
  margin-inline-start: auto;
  font-size: 11.5px;
  letter-spacing: .01em;
  opacity: .6;
}

.lang-option.active {
  background: rgba(142, 221, 209, .16);
  color: #fff;
}

.lang-option.active::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 5px;
  margin: -3px 2px 0;
  border-bottom: 2px solid var(--rc-accent);
  border-left: 2px solid var(--rc-accent);
  transform: rotate(-45deg);
}

/* Phones: a button in the header bar opens a bottom sheet */
.lang-btn {
  display: none;
}

.lang-sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
}

.lang-sheet[hidden] {
  display: none !important;
}

.lang-sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 10, 13, .56);
  opacity: 0;
  transition: opacity 260ms ease;
}

.lang-sheet-panel {
  position: relative;
  width: 100%;
  max-height: 86vh;
  max-height: 86svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(163, 224, 214, .2);
  border-radius: 22px 22px 0 0;
  background:
    radial-gradient(circle at 92% 0%, rgba(95, 201, 184, .18), transparent 46%),
    linear-gradient(180deg, var(--rc-menu-bg-1), var(--rc-menu-bg-2));
  color: var(--rc-menu-ink);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .35);
  transform: translateY(100%);
  transition: transform 340ms cubic-bezier(.2, .8, .2, 1);
}

.lang-sheet.open .lang-sheet-scrim {
  opacity: 1;
}

.lang-sheet.open .lang-sheet-panel {
  transform: none;
}

.lang-sheet-grab {
  width: 40px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .22);
}

.lang-sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 2px 14px;
}

.lang-sheet-head .lang-icon {
  width: 22px;
  height: 22px;
  color: var(--rc-accent);
}

.lang-sheet-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.lang-sheet-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-inline-start: auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  color: var(--rc-menu-ink);
  cursor: pointer;
}

.lang-sheet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.lang-sheet-grid .lang-option {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-height: 62px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
}

.lang-sheet-grid .lang-native {
  font-size: 16px;
}

.lang-sheet-grid .lang-label {
  margin: 0;
}

.lang-sheet-grid .lang-option.active {
  border-color: rgba(142, 221, 209, .55);
  background: rgba(142, 221, 209, .14);
}

.lang-sheet-grid .lang-option.active::after {
  position: absolute;
  top: 16px;
  inset-inline-end: 14px;
  margin: 0;
}

@media (max-width: 820px) {
  .lang-rail {
    display: none;
  }

  .nav-actions {
    gap: 8px;
  }

  .lang-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    color: var(--rc-menu-ink);
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease;
  }

  .lang-btn .lang-icon {
    width: 21px;
    height: 21px;
  }

  /* A dot on the button says the page is currently translated */
  .lang-btn.is-translated::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rc-accent);
    box-shadow: 0 0 0 2px rgba(7, 27, 35, .95);
  }

  .lang-btn:active,
  .menu-button:active {
    transform: scale(.95);
  }
}

/* The menu itself, wherever the hamburger shows */
@media (max-width: 1100px) {
  .mobile-menu {
    gap: 0;
    padding: calc(var(--rc-bar-h, 56px) + 30px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(120% 55% at 100% 0%, rgba(95, 201, 184, .17), transparent 62%),
      linear-gradient(170deg, var(--rc-menu-bg-1), var(--rc-menu-bg-2));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--rc-menu-ink);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 260ms ease, transform 380ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 380ms;
  }

  .mobile-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity 260ms ease, transform 380ms cubic-bezier(.2, .8, .2, 1), visibility 0s;
  }

  .mobile-menu-status {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    padding: 7px 12px 7px 10px;
    border: 1px solid rgba(142, 221, 209, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: var(--rc-menu-soft);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .mobile-menu > a:not(.button) {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 0 4px;
    border: 0;
    border-bottom: 1px solid var(--rc-menu-line);
    color: rgba(234, 246, 243, .9);
    font-family: var(--sans, inherit);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
    text-decoration: none;
  }

  .mobile-menu-status + a:not(.button) {
    border-top: 1px solid var(--rc-menu-line);
  }

  .mobile-menu > a:not(.button) span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(142, 221, 209, .24);
    border-radius: 9px;
    background: transparent;
    color: var(--rc-accent);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    line-height: 1;
  }

  /* A drawn chevron. The old "↗" glyph renders as a blue emoji box on iOS */
  .mobile-menu > a:not(.button)::after {
    content: "";
    justify-self: end;
    width: 8px;
    height: 8px;
    margin: 0 3px 0 0;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    font-size: 0;
    opacity: .45;
    transform: rotate(45deg);
  }

  [dir="rtl"] .mobile-menu > a:not(.button)::after {
    margin: 0 0 0 3px;
    transform: rotate(-135deg);
  }

  .mobile-menu > a:not(.button).active {
    color: #fff;
  }

  .mobile-menu > a:not(.button).active span {
    border-color: transparent;
    background: var(--rc-accent);
    color: var(--rc-accent-ink);
  }

  .mobile-menu > a:not(.button).active::after {
    color: var(--rc-accent);
    opacity: .9;
  }

  .mobile-menu > a:not(.button):active {
    background: rgba(255, 255, 255, .03);
    color: var(--rc-accent);
    transform: none;
  }

  .mobile-menu-extras {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
  }

  .menu-lang {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 54px;
    padding: 0 16px;
    border: 1px solid rgba(142, 221, 209, .2);
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    color: var(--rc-menu-ink);
    font-size: 15px;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
  }

  .menu-lang .lang-icon {
    color: var(--rc-accent);
  }

  .menu-lang b {
    margin-inline-start: auto;
    color: var(--rc-menu-soft);
    font-size: 14px;
    font-weight: 600;
  }

  .menu-lang i {
    width: 7px;
    height: 7px;
    margin: -4px 2px 0 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: .5;
    transform: rotate(45deg);
  }

  .mobile-menu .menu-contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .mobile-menu .menu-contact a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    color: var(--rc-menu-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-decoration: none;
  }

  .mobile-menu .menu-contact a::after {
    content: none;
  }

  .mobile-menu .menu-contact svg {
    width: 18px;
    height: 18px;
    color: var(--rc-accent);
  }

  .mobile-menu .menu-contact a:active {
    background: rgba(255, 255, 255, .08);
    transform: none;
  }

  .mobile-menu.open .menu-contact a {
    animation: none;
  }

  .mobile-menu > .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    margin-top: 0;
    border-color: var(--rc-accent);
    border-radius: 14px;
    background: var(--rc-accent);
    color: var(--rc-accent-ink);
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .25);
  }

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

  .mobile-menu.open .mobile-menu-extras {
    animation-delay: 220ms;
  }

  .mobile-menu.open > .button {
    animation-delay: 260ms;
  }

  /* Anchors the foot of the sheet so the button doesn't float in space */
  .menu-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: auto;
    padding: 20px 0 12px;
    color: var(--rc-menu-soft);
    font-size: 12.5px;
    letter-spacing: .01em;
  }

  .menu-trust i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rc-accent);
    box-shadow: 0 0 0 4px rgba(142, 221, 209, .12);
  }

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

  /* Hamburger: heavier strokes, and it turns into a close mark when open */
  .menu-button {
    border-radius: 12px;
  }

  .menu-lines,
  .menu-lines::before,
  .menu-lines::after {
    width: 18px;
    height: 2px;
    border-radius: 2px;
    transition: transform 280ms cubic-bezier(.2, .8, .2, 1), background-color 200ms ease;
  }

  .menu-lines::before {
    transform: translateY(-6px);
  }

  .menu-lines::after {
    transform: translateY(4px);
  }

  .menu-button[aria-expanded="true"] .menu-lines {
    background-color: transparent;
  }

  .menu-button[aria-expanded="true"] .menu-lines::before {
    transform: translateY(0) rotate(45deg);
  }

  .menu-button[aria-expanded="true"] .menu-lines::after {
    transform: translateY(-2px) rotate(-45deg);
  }
}

/* Neutralise the Google website-translate chrome. Its banner class names
   are obfuscated and version dependent, so key off the stable skiptranslate
   hook on the banner iframe. */
#google_translate_element {
  position: absolute !important;
  top: 0 !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

iframe.skiptranslate,
.goog-te-banner-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.goog-te-gadget-icon,
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
}

.goog-te-gadget {
  height: 0;
  overflow: hidden;
}

.translated-ltr body,
.translated-rtl body {
  top: 0 !important;
}

.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .lang-rail-toggle,
  .lang-option,
  .lang-btn,
  .lang-sheet-scrim,
  .lang-sheet-panel,
  .mobile-menu,
  .menu-lines,
  .menu-lines::before,
  .menu-lines::after {
    transition: none;
  }

  .mobile-menu.open .mobile-menu-status,
  .mobile-menu.open .mobile-menu-extras {
    animation: none;
  }
}

/* =====================================================================
   Mobile paint budget (2026-09-11)
   Measured on a 375px phone viewport: about 70 elements held a permanent
   will-change layer, 31 kept a blur(0) filter layer after revealing, a
   fixed full-screen SVG turbulence (grain) layer was re-composited on
   every scroll frame, and two decorative animations looped forever.
   Together that exhausts a phone's GPU memory: tiles stop painting and
   the tab can die. Keep the look, drop the cost.
   ===================================================================== */
.scroll-reveal,
.scroll-reveal.is-visible {
  will-change: auto;
  filter: none;
}

@media (max-width: 820px), (hover: none) {
  body::before {
    display: none;
  }

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

/* Legibility floor on phones: nothing that carries meaning below 11px */
@media (max-width: 820px) {
  .form-whatsapp-copy small {
    font-size: 11.5px;
  }

  .deliverable i,
  .deliverable b {
    font-size: 11px;
  }
}

/* Phones: the hero metrics stack, so no item keeps the desktop column
   indent (the third one did, via the more specific div + div rule) */
@media (max-width: 620px) {
  .hero-visual .hero-metrics div + div {
    padding-left: 0;
  }
}

/* Phones: a compact footer. Navigate's four short links sit in a 2 x 2
   grid; links keep thumb-sized rows, the Our standard list does not need them */
@media (max-width: 620px) {
  .footer-grid {
    gap: 26px;
  }

  .footer-column h3 {
    margin-bottom: 4px;
  }

  .footer-grid > .footer-column:nth-child(2) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  .footer-grid > .footer-column:nth-child(2) h3 {
    grid-column: 1 / -1;
  }

  .footer-column a {
    margin: 0;
    min-height: 44px;
  }

  .footer-column span {
    margin: 0;
    min-height: 0;
    padding: 6px 0;
  }
}

/* =====================================================================
   Menu extras, guarded at every width (2026-09-12)
   site.js injects the Language row, the WhatsApp/Email links and the
   trust line into #mobile-menu at every screen size, but their styling
   sat inside the phone breakpoint. Above 1100px the injected icons had
   no size, so each SVG stretched to the container width (a square
   viewBox, so ~1232px tall too) and its link covered the page: one huge
   WhatsApp target that swallowed every click. The sizing below is
   unconditional, and a closed menu neither paints nor takes clicks.
   ===================================================================== */
.mobile-menu:not(.open) {
  visibility: hidden;
  pointer-events: none;
}

.mobile-menu .menu-contact svg,
.mobile-menu-extras .lang-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.mobile-menu-extras {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
}

.mobile-menu .menu-contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mobile-menu .menu-contact a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  color: var(--rc-menu-ink, #eafffb);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
}

.mobile-menu .menu-contact a::after {
  content: none;
}

.menu-lang {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid rgba(142, 221, 209, .2);
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  color: var(--rc-menu-ink, #eafffb);
  font-size: 15px;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}

.menu-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 20px 0 12px;
  color: var(--rc-menu-soft, rgba(234, 246, 243, .64));
  font-size: 12.5px;
}

/* =====================================================================
   Blog: article prose and the guide cards (2026-09-16)
   Long-form reading measure, plus tables and step lists that answer
   engines can lift cleanly. Reuses the site's existing tokens.
   ===================================================================== */
.article-crumbs {
  margin-bottom: 14px;
  color: var(--ink-soft, #5d6f6b);
  font-size: 12.5px;
  letter-spacing: .01em;
}

.article-crumbs a {
  color: var(--forest-2, #3f817c);
  text-decoration: none;
}

.article-crumbs a:hover { text-decoration: underline; }

.article-meta {
  margin: 14px 0 0;
  color: var(--ink-soft, #5d6f6b);
  font-size: 13px;
}

/* The lead paragraph: the block an answer engine should be able to lift whole */
.article-answer {
  margin: 0 0 30px;
  padding: 20px 22px;
  border-left: 3px solid var(--sage, #7db8ae);
  border-radius: 0 14px 14px 0;
  background: rgba(125, 184, 174, .09);
  color: var(--ink, #14312f);
  font-size: 17.5px;
  line-height: 1.6;
}

.article-body {
  color: var(--ink, #14312f);
  font-size: 16.5px;
  line-height: 1.75;
}

.article-body h2 {
  margin: 38px 0 12px;
  font-size: clamp(22px, 3.2vw, 27px);
  font-weight: 640;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.article-body h3 {
  margin: 26px 0 8px;
  font-size: 18px;
  font-weight: 640;
}

.article-body p { margin: 0 0 16px; }

.article-body ul { margin: 0 0 18px; padding-left: 20px; }

.article-body li { margin-bottom: 8px; }

.article-body a {
  color: var(--forest-2, #3f817c);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-steps { margin: 0 0 20px; }

.article-steps dt {
  margin-top: 16px;
  color: var(--forest-2, #3f817c);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.article-steps dd { margin: 4px 0 0; }

.article-table {
  width: 100%;
  margin: 0 0 22px;
  border-collapse: collapse;
  font-size: 15px;
}

.article-table th,
.article-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line, rgba(20, 49, 47, .12));
  text-align: left;
  vertical-align: top;
}

.article-table th {
  color: var(--forest-2, #3f817c);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.article-table thead th:empty { border-bottom-color: transparent; }

/* Wide tables scroll inside themselves rather than pushing the page sideways */
.article-body { overflow-x: auto; }

.blog-grid { display: grid; gap: 16px; }

.blog-card a {
  display: block;
  padding: 24px 26px;
  border: 1px solid var(--line, rgba(20, 49, 47, .12));
  border-radius: 18px;
  background: var(--white, #fff);
  color: inherit;
  text-decoration: none;
  transition: transform 240ms var(--rc-ease, ease), box-shadow 240ms ease, border-color 240ms ease;
}

.blog-card a:hover {
  transform: translateY(-2px);
  border-color: rgba(125, 184, 174, .5);
  box-shadow: 0 14px 34px rgba(24, 96, 70, .10);
}

.blog-card-meta {
  display: block;
  margin-bottom: 10px;
  color: var(--ink-soft, #5d6f6b);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.blog-card h2 {
  margin: 0 0 10px;
  font-size: clamp(20px, 3vw, 25px);
  font-weight: 640;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.blog-card p { margin: 0 0 14px; color: var(--ink-soft, #5d6f6b); font-size: 15.5px; line-height: 1.6; }

.blog-card-go { color: var(--forest-2, #3f817c); font-size: 13.5px; font-weight: 650; }

@media (max-width: 620px) {
  .article-answer { padding: 16px 18px; font-size: 16.5px; }
  .article-body { font-size: 16px; }
  .article-table { font-size: 14px; }
  .article-table th, .article-table td { padding: 9px 10px; }
  .blog-card a { padding: 20px; }
}