/* ==========================================================================
   Right Path Agency
   --------------------------------------------------------------------------
   1. Tokens (colours, type, spacing — change the look of the site here)
   2. Base
   3. Shared pieces (buttons, links, panels, section heads)
   4. The path line and its waypoints
   5. Header
   6. Hero
   7. About
   8. Services
   9. Complimentary services
   10. Client stories
   11. Contact and booking form
   12. Footer
   13. Small screens
   14. Reduced motion
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --pine: #14382b;        /* headings, dark panels, footer */
  --leaf: #1b7f3a;        /* buttons and links (the logo green, tuned for contrast) */
  --leaf-deep: #14642d;   /* button hover */
  --fresh: #e3f0de;       /* soft green tint */
  --sprout: #a5dba0;      /* green accent on dark */
  --mist: #f4f7f1;        /* page background */
  --paper: #ffffff;
  --ink: #1e2a24;         /* body text */
  --ink-soft: #4d5b53;    /* secondary text */
  --rule: #d9e2d6;        /* hairlines and input borders */
  --brick: #9a2b1f;       /* the path, and only the path */
  --danger: #a3261a;

  --display: "Young Serif", "Noto Serif TC", "Iowan Old Style", Georgia, serif;
  --text: "Figtree", "Noto Sans TC", "Segoe UI", system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;

  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(72px, 10vw, 136px);

  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --glide: cubic-bezier(.22, 1, .36, 1);     /* long, soft landing: used when the language changes */
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--mist) url("../images/contours.svg") 50% 0 / 1600px auto;   /* faint map contour lines */
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  color: var(--pine);
  text-wrap: balance;
}
h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem); line-height: 1.08; letter-spacing: -0.015em; }
h3 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem); line-height: 1.2; letter-spacing: -0.005em; }

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

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

.skip {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--pine); color: #fff; text-decoration: none;
}
.skip:focus { top: 16px; }

.wrap {
  position: relative;
  z-index: 1;                       /* content sits above the path line */
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

/* 3. Shared pieces --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 28px;
  border: 0; border-radius: var(--r-md);
  background: var(--leaf); color: #fff;
  font: 600 1rem/1.2 var(--text); text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--leaf-deep); }
.btn:active { transform: translateY(1px); }
.btn--small { min-height: 44px; padding: 10px 20px; font-size: .9375rem; }
.btn--light { background: var(--paper); color: var(--pine); }
.btn--light:hover { background: var(--fresh); }
.btn--quiet { background: transparent; color: var(--pine); box-shadow: inset 0 0 0 1.5px var(--rule); }
.btn--quiet:hover { background: var(--mist); }

.link {
  color: var(--leaf);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, var(--leaf) 35%, transparent);
  transition: text-decoration-color .2s var(--ease);
}
.link:hover { text-decoration-color: currentColor; }

.panel { border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper); }

/* Section heading: title on the left, short intro on the right,
   leaving the middle clear for the path to pass through. */
.head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr);
  align-items: end;
  margin-bottom: clamp(48px, 7vw, 96px);
}
.head h2 { grid-column: 1; }
.head p { grid-column: 3; color: var(--ink-soft); max-width: 46ch; }

/* 4. The path line and its waypoints -------------------------------------- */
main { position: relative; }

.trail {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
.trail path { fill: none; stroke-linecap: round; }
.trail__track { stroke: color-mix(in srgb, var(--pine) 22%, transparent); stroke-width: 2; stroke-dasharray: 2 9; }
.trail__line { stroke: var(--brick); stroke-width: 2.5; }

.wp {
  display: block;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--mist);
  box-shadow: inset 0 0 0 2.5px var(--brick), 0 0 0 6px var(--mist);
  transition: background-color .35s var(--ease), transform .35s var(--ease);
}
.wp.is-reached { background: var(--brick); transform: scale(1.12); }
.wp--ghost { visibility: hidden; position: absolute; margin-left: -8px; }   /* steers the line, shows nothing */
.wp--start { background: var(--brick); }
.wp--end {
  position: absolute; top: -13px; left: 50%; margin-left: -13px;
  width: 26px; height: 26px;
  background: var(--paper);
  box-shadow: inset 0 0 0 2.5px var(--brick), 0 0 0 6px var(--mist);
}
.wp--end.is-reached { background: var(--leaf); box-shadow: inset 0 0 0 5px var(--paper), 0 0 0 2.5px var(--leaf), 0 0 0 8px var(--mist); transform: none; }

/* 5. Header ---------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--rule); }

.site-header__inner {
  display: flex; align-items: center; gap: 32px;
  width: min(100% - 2 * var(--gutter), 1320px);
  min-height: 76px;
  margin-inline: auto;
}
.brand { flex: none; display: block; }
.brand img { width: auto; height: 52px; }

.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  position: relative;
  padding: 10px 14px; border-radius: var(--r-md);
  font-weight: 500; font-size: .9875rem; text-decoration: none; color: var(--ink);
  transition: background-color .2s var(--ease);
}
.nav a:hover { background: var(--mist); }

.site-header__actions { display: flex; align-items: center; gap: 20px; }
.phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--pine); text-decoration: none; white-space: nowrap;
}
.phone svg { color: var(--leaf); }
.phone:hover span { text-decoration: underline; text-underline-offset: 4px; }

.menu-toggle { display: none; }

/* 6. Hero ------------------------------------------------------------------ */
.hero { padding-top: clamp(32px, 5vw, 72px); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}

.hero__title {
  font-size: clamp(2.75rem, 1rem + 5.6vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.hero__title .line > span { display: block; }

.swoosh { position: relative; z-index: 0; white-space: nowrap; }
.swoosh svg {                       /* sits behind the letters, just under the baseline */
  position: absolute; z-index: -1; left: -1%; bottom: .03em;
  width: 102%; height: .2em;
  overflow: visible;
}
.swoosh path {
  fill: none; stroke: var(--brick); stroke-width: 5; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.hero__lede {
  max-width: 52ch;
  margin-top: clamp(20px, 2.4vw, 32px);
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
}
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(28px, 3vw, 40px); }
.hero__note { margin-top: 28px; font-size: .9375rem; color: var(--ink-soft); }

.hero__media { position: relative; }
.hero__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: min(680px, calc(100vh - 150px));
  margin-left: auto;
  transform: translate(calc(var(--px, 0) * -7px), calc(var(--py, 0) * -7px));
  transition: transform .6s ease-out;
}
.hero__photo::before {              /* thin frame set off behind the photo */
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 1.5px solid var(--leaf); border-radius: var(--r-lg);
  transform: translate(calc(14px + var(--px, 0) * 12px), calc(14px + var(--py, 0) * 12px));
  transition: transform .6s ease-out;
}
.hero__clip { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: var(--r-lg); background: #b9c7a6; }
.hero__clip img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }

.guides {
  position: absolute; left: -40px; bottom: 36px;
  display: flex; align-items: center; gap: 14px;
  max-width: 330px; padding: 10px 20px 10px 10px;
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: 0 18px 40px -18px rgb(20 56 43 / .45);
  font-size: .875rem; line-height: 1.4; color: var(--ink-soft);
  text-decoration: none;
  translate: calc(var(--px, 0) * 14px) calc(var(--py, 0) * 14px);
  transition: transform .25s var(--ease), translate .6s ease-out;
}
.guides:hover { transform: translateY(-3px); }
.guides img { flex: none; width: 96px; height: 66px; object-fit: cover; border-radius: var(--r-sm); }
.guides strong { display: block; font-size: 1rem; color: var(--pine); }
.guides span span { display: block; text-wrap: balance; }

.hero__start {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding-block: clamp(40px, 5vw, 64px) 0;
}
.wp-label {
  position: absolute; left: calc(50% + 22px); top: clamp(40px, 5vw, 64px);
  margin-top: -5px;
  font-size: .9375rem; font-weight: 600; color: var(--brick); white-space: nowrap;
}

/* The one load moment: headline rises, the swoosh draws, the photo settles. */
.js .hero__title .line > span { transform: translateY(105%); }
.js .swoosh svg { clip-path: inset(-50% 100% -50% 0); }
.js .hero__photo img { transform: scale(1.08); }
.js .hero__lede, .js .hero__cta, .js .hero__note, .js .guides { opacity: 0; }

.js.is-ready .hero__title .line > span { transform: none; transition: transform .9s var(--ease); }
.js.is-ready .hero__title .line:nth-child(2) > span { transition-delay: .09s; }
.js.is-ready .hero__title .line:nth-child(3) > span { transition-delay: .18s; }
.js.is-ready .hero__title .line:nth-child(4) > span { transition-delay: .27s; }
.js.is-ready .swoosh svg { clip-path: inset(-50% 0 -50% 0); transition: clip-path .8s var(--ease) .75s; }
.js.is-ready .hero__photo img { transform: none; transition: transform 1.8s var(--ease); }
.js.is-ready .hero__lede, .js.is-ready .hero__cta, .js.is-ready .hero__note { opacity: 1; transition: opacity .8s ease .45s; }
.js.is-ready .guides { opacity: 1; transition: opacity .8s ease .9s, transform .25s var(--ease), translate .6s ease-out; }

/* 7. About ----------------------------------------------------------------- */
.about { padding-top: clamp(48px, 6vw, 88px); }

.about__panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(16px, 2vw, 24px);
}
.about__photo { overflow: hidden; border-radius: var(--r-sm); align-self: stretch; background: #c9c9c9; }
.about__photo img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: 50% 18%; }

.about__copy { padding: clamp(16px, 3vw, 48px) clamp(12px, 3vw, 48px) clamp(16px, 3vw, 48px) 0; }
.about__copy > p { max-width: 58ch; }
.about__lead { margin-top: 24px; font-size: 1.1875rem; line-height: 1.6; color: var(--ink); }
.about__lead + p { margin-top: 16px; color: var(--ink-soft); }

.creds {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px;
  margin-top: 32px;
  border-top: 1px solid var(--rule);
}
.creds li { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: .9875rem; line-height: 1.45; color: var(--ink-soft); }
.creds strong { color: var(--pine); font-weight: 700; }

.about__promise {
  margin: 32px 0 28px;
  font-family: var(--display); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.3;
  color: var(--pine);
}

.partners {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px;
  margin-top: 36px; padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.partners a { display: block; opacity: .9; transition: opacity .2s var(--ease); }
.partners a:hover { opacity: 1; }
.partners img { width: auto; height: 46px; }

/* 8. Services -------------------------------------------------------------- */
.services { padding-top: var(--section); }

.route { display: grid; gap: clamp(64px, 8vw, 112px); }

.stop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(96px, 12vw, 168px) minmax(0, 1fr);
  align-items: center;
}
.stop__img { grid-column: 1; grid-row: 1; overflow: hidden; border-radius: var(--r-md); background: #b9c7a6; }
.stop__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transform: translate3d(0, calc(var(--shift, 0) * 1px), 0) scale(1.08); will-change: transform; }
.stop > .wp { grid-column: 2; grid-row: 1; justify-self: end; margin-right: 22%; }
.stop__body { grid-column: 3; grid-row: 1; max-width: 440px; }

.stop:nth-child(even) .stop__img { grid-column: 3; }
.stop:nth-child(even) > .wp { justify-self: start; margin-right: 0; margin-left: 22%; }
.stop:nth-child(even) .stop__body { grid-column: 1; justify-self: end; }

.stop__sub { margin-top: 6px; font-weight: 600; color: var(--leaf); }
.stop__sub + p { margin-top: 16px; color: var(--ink-soft); }
.stop__body .link { display: inline-block; margin-top: 20px; }

/* 9. Complimentary services ------------------------------------------------ */
.free { padding-top: var(--section); }
.free__wp { left: 50%; top: 0; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--paper); }
.card figure { overflow: hidden; background: #b9c7a6; }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transform: translate3d(0, calc(var(--shift, 0) * 1px), 0) scale(1.08); will-change: transform; }
.card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(20px, 2.4vw, 32px); }
.card__body p { margin-top: 12px; font-size: 1rem; color: var(--ink-soft); }
.card__body .link { align-self: flex-start; margin-top: auto; padding-top: 20px; }

/* 10. Client stories ------------------------------------------------------- */
.stories { padding-top: var(--section); }
.stories__wp { left: 50%; bottom: -8px; }

.stories__panel {
  padding: clamp(32px, 6vw, 88px);
  border-color: transparent;
  background: var(--pine) url("../images/contours-light.svg") 30% 40% / 1400px auto;
  color: #e9f1e5;
}
.stories__panel h2 { color: #fff; }

.stories__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 88px);
  margin-top: clamp(32px, 4vw, 56px);
}
.quote blockquote { margin: 0; }
.quote figcaption { margin-top: 16px; font-weight: 600; color: var(--sprout); }
.quote--lead blockquote {
  font-family: var(--display);
  font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem);
  line-height: 1.42;
  color: #fff;
}
.quote--lead blockquote p::before { content: "\201C"; }
.quote--lead blockquote p::after { content: "\201D"; }

.stories__side { display: grid; align-content: start; gap: 0; }
.stories__side .quote { padding-block: 28px; border-top: 1px solid rgb(255 255 255 / .16); }
.stories__side .quote:last-child { border-bottom: 1px solid rgb(255 255 255 / .16); }
.stories__side blockquote p::before { content: "\201C"; }
.stories__side blockquote p::after { content: "\201D"; }

.stories__close {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px;
  margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid rgb(255 255 255 / .16);
}
.stories__close p { max-width: 44ch; font-size: 1.1875rem; line-height: 1.5; color: #fff; }

/* 11. Contact and booking form -------------------------------------------- */
.contact { padding-block: var(--section); }

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 7vw, 104px);
  align-items: start;
}

.contact__lede { max-width: 40ch; margin-top: 20px; font-size: 1.1875rem; line-height: 1.55; color: var(--ink-soft); }

.details { margin: clamp(32px, 4vw, 48px) 0 0; border-top: 1px solid var(--rule); }
.details > div { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.details dt { color: var(--ink-soft); }
.details dd { margin: 0; font-weight: 600; color: var(--pine); overflow-wrap: anywhere; }
.details a { text-decoration: none; }
.details a:hover { text-decoration: underline; text-underline-offset: 4px; }

.booking {
  position: relative;
  padding: clamp(24px, 3.4vw, 44px);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: 0 30px 60px -40px rgb(20 56 43 / .35);
}
.booking__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.booking__progress { font-size: .9375rem; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.booking__bar { height: 4px; margin-top: 16px; border-radius: 4px; background: var(--fresh); overflow: hidden; }
.booking__bar i { display: block; width: 33.333%; height: 100%; border-radius: 4px; background: var(--leaf); transition: width .45s var(--ease); }

.step { margin: 28px 0 0; padding: 0; border: 0; min-width: 0; }
.step.is-active { animation: step-in .4s var(--ease); }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } }
.step legend { padding: 0; font-weight: 700; font-size: 1.0625rem; color: var(--pine); }
.hint { margin-top: 4px; font-size: .9375rem; color: var(--ink-soft); }

.topics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.topic { position: relative; display: block; cursor: pointer; }
.topic input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.topic span {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 10px 14px;
  border: 1.5px solid var(--rule); border-radius: var(--r-sm);
  font-size: .9688rem; font-weight: 500; line-height: 1.25;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.topic span::before {
  content: ""; flex: none; width: 18px; height: 18px;
  border: 1.5px solid #a9b8ad; border-radius: 2px; background: var(--paper) center / 12px no-repeat;
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.topic:hover span { border-color: #a9b8ad; }
.topic input:checked + span { border-color: var(--leaf); background: var(--fresh); color: var(--pine); }
.topic input:checked + span::before {
  border-color: var(--leaf); background-color: var(--leaf);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 6.300 2.700 2.700 5.300-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.topic input:focus-visible + span { outline: 3px solid var(--leaf); outline-offset: 2px; }

.field { margin-top: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label { display: block; margin-bottom: 6px; font-size: .9375rem; font-weight: 600; color: var(--pine); }
.optional { font-weight: 400; color: var(--ink-soft); }
.field input {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 1.5px solid var(--rule); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
  font: inherit;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input::placeholder { color: #8b998f; }
.field input:hover { border-color: #a9b8ad; }
.field input:focus { outline: 0; border-color: var(--leaf); box-shadow: 0 0 0 3px color-mix(in srgb, var(--leaf) 22%, transparent); }
.field input[aria-invalid="true"] { border-color: var(--danger); }

.consent { display: flex; gap: 12px; margin-top: 22px; font-size: .9375rem; line-height: 1.5; color: var(--ink-soft); cursor: pointer; }
.consent input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--leaf); }

.error { margin-top: 8px; font-size: .9375rem; font-weight: 600; color: var(--danger); }
.error--form { margin-top: 20px; }

.booking__nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 32px; }
.booking__nav [data-back] { margin-right: auto; }

.booking__done { padding-block: 24px 8px; text-align: center; color: var(--leaf); }
.booking__done:focus { outline: 0; }
.booking__done h3 { margin-top: 16px; }
.booking__done p { max-width: 40ch; margin: 12px auto 0; color: var(--ink-soft); }
.booking__done a { color: var(--leaf); font-weight: 600; }

[hidden] { display: none !important; }

/* 12. Footer --------------------------------------------------------------- */
.site-footer {
  position: relative;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: .9375rem;
}
.site-footer a { color: var(--pine); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }

.foot__main {
  display: flex; align-items: center; justify-content: space-between; gap: 24px 48px;
  padding-block: clamp(32px, 4vw, 48px);
}
.foot__brand { display: flex; align-items: center; gap: 20px; }
.foot__brand a { flex: none; }
.foot__brand img { width: auto; height: 48px; }
.foot__brand p { max-width: 28ch; line-height: 1.45; text-wrap: balance; }
.foot__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 28px; }
.foot__nav a { font-weight: 500; }

.foot__base {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px;
  padding-block: 20px;
  border-top: 1px solid var(--rule);
  font-size: .875rem;
}
.foot__contact { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.foot__contact a { color: var(--ink-soft); }

/* 12a. Language switch and per-language type ------------------------------- */
.lang { position: relative; flex: none; display: flex; overflow: hidden; border: 1.5px solid var(--rule); border-radius: var(--r-md); }
.lang__thumb {                      /* the dark highlight that slides to the chosen language */
  position: absolute; top: 0; bottom: 0; left: 0;
  width: var(--thumb-w, 44px);
  transform: translateX(var(--thumb-x, 0px));
  background: var(--pine);
}
.lang.is-live .lang__thumb { transition: transform .55s var(--glide), width .55s var(--glide); }
.lang button {
  position: relative; z-index: 1;
  min-width: 44px; min-height: 40px; padding: 0 10px;
  border: 0; border-left: 1.5px solid var(--rule); border-radius: 0;
  background: transparent; color: var(--ink-soft);
  font: 600 .875rem/1 var(--text);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.lang button:first-of-type { border-left: 0; }
.lang button:hover { background: var(--mist); color: var(--pine); }
.lang button[aria-pressed="true"], .lang button[aria-pressed="true"]:hover { background: transparent; color: #fff; }
.lang button[aria-pressed="true"], .lang button[aria-pressed="true"] + button { border-left-color: transparent; }
.lang button:focus-visible { outline-offset: -3px; }

.stories__note { margin-top: 10px; font-size: .9375rem; color: var(--sprout); }
.stories__note:empty { display: none; }

/* Chinese: the display face has no Chinese letters, so a bold Chinese serif steps in.
   Chinese text also wants more air between lines and no negative letter-spacing. */
html[lang="zh-Hant"] body { line-height: 1.8; }
html[lang="zh-Hant"] :is(h1, h2, h3, .about__promise, .quote--lead blockquote, .finder__steps strong) {
  font-weight: 700; font-synthesis: none; letter-spacing: 0;
}
html[lang="zh-Hant"] h2 { line-height: 1.28; }
html[lang="zh-Hant"] h3 { line-height: 1.4; }
html[lang="zh-Hant"] .hero__title { font-size: clamp(2.25rem, 1rem + 4.1vw, 4.375rem); line-height: 1.3; }
html[lang="zh-Hant"] .hero__title .line { padding-bottom: .22em; margin-bottom: -.22em; }
html[lang="zh-Hant"] .swoosh svg { bottom: -.17em; }   /* Chinese letters sit lower, so the underline drops too */
html[lang="zh-Hant"] .quote--lead blockquote { line-height: 1.7; }

/* Spanish runs longer than English, so the headline steps down a size. */
html[lang="es"] .hero__title { font-size: clamp(2.5rem, 1rem + 4.7vw, 4.875rem); line-height: 1.1; }

/* 12a-2. The change-of-language transition --------------------------------
   js/i18n.js adds "lang-vt" to <html> while the language is changing. The old
   page lifts away, softly blurred, and the new one settles in from below. The
   header bar is captured on its own so it holds still while only its words
   change, and the switch itself is left live so its highlight can slide. */
html.lang-vt .site-header { view-transition-name: rp-header; }
html.lang-vt .lang { view-transition-name: rp-switch; }

html.lang-vt::view-transition-old(root) { animation: lang-leave .34s cubic-bezier(.4, 0, .6, 1) both; mix-blend-mode: normal; }
html.lang-vt::view-transition-new(root) { animation: lang-arrive .7s var(--glide) .1s both; mix-blend-mode: normal; }
@keyframes lang-leave { to { opacity: 0; transform: translateY(-12px); filter: blur(5px); } }
@keyframes lang-arrive { from { opacity: 0; transform: translateY(16px); filter: blur(5px); } }

html.lang-vt::view-transition-group(rp-header) { animation-duration: .5s; animation-timing-function: var(--glide); }
html.lang-vt::view-transition-old(rp-header), html.lang-vt::view-transition-new(rp-header) { animation-duration: .5s; }
html.lang-vt::view-transition-old(rp-switch) { display: none; }
html.lang-vt::view-transition-new(rp-switch) { animation: none; }

/* Older browsers without that feature get a plain fade out and back in. */
html.lang-fade :is(main, .site-footer, .nav, .site-header .btn) { transition: opacity .5s var(--glide), transform .5s var(--glide), filter .5s var(--glide); }
html.lang-out :is(main, .site-footer, .nav, .site-header .btn) { opacity: 0; transform: translateY(-10px); filter: blur(5px); transition-duration: .22s; transition-timing-function: ease-in; }

/* The red underline redraws under the headline in its new language. */
.swoosh--redraw svg { animation: swoosh-draw .95s var(--glide) .5s both; }
@keyframes swoosh-draw { from { clip-path: inset(-50% 100% -50% 0); } to { clip-path: inset(-50% 0 -50% 0); } }

/* 12b. Background motes, path marker, pathfinder, reveals ------------------- */

/* Drifting specks of light behind everything (drawn in js/main.js). */
.motes { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* The marker that travels the path as you scroll. */
.trail__you { fill: var(--brick); opacity: 0; transition: opacity .3s ease; }
.trail__you.is-on { opacity: 1; }
.trail__halo { fill: var(--brick); opacity: .22; transform-box: fill-box; transform-origin: center; animation: halo 2.4s ease-out infinite; }
@keyframes halo { from { transform: scale(.45); opacity: .5; } to { transform: scale(1.5); opacity: 0; } }

/* Menu link for the section you are reading. */
.nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--leaf); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav a[aria-current="true"]::after { transform: scaleX(1); }

/* Pathfinder */
.finder { padding-top: clamp(40px, 5vw, 72px); }
.finder__panel {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(28px, 5vw, 72px);
  border-color: transparent;
  background: var(--pine) url("../images/contours-light.svg") 70% 20% / 1400px auto;
  color: #dbe7d6;
}
.finder__panel h2 { color: #fff; }
.finder__ask > p { margin-top: 14px; max-width: 48ch; }

.goals { display: grid; margin-top: clamp(24px, 3vw, 40px); border-bottom: 1px solid rgb(255 255 255 / .18); }
.goal {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 58px; padding: 12px 18px;
  border: 0; border-top: 1px solid rgb(255 255 255 / .18); border-radius: 0;
  background: transparent; color: #fff;
  font: 600 1.0625rem/1.3 var(--text); text-align: left;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), padding .25s var(--ease);
}
.goal::after {                       /* small chevron */
  content: ""; flex: none; width: 8px; height: 8px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: translateX(-6px) rotate(45deg); opacity: 0;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.goal:hover { background: rgb(255 255 255 / .07); padding-left: 24px; }
.goal:hover::after, .goal[aria-pressed="true"]::after { transform: rotate(45deg); opacity: 1; }
.goal[aria-pressed="true"] { background: var(--paper); color: var(--pine); padding-left: 24px; }
.goal:focus-visible { outline-color: var(--sprout); outline-offset: -3px; }

.finder__result {
  display: flex; flex-direction: column;
  padding: clamp(22px, 3vw, 40px);
  border: 1px solid rgb(255 255 255 / .18); border-radius: var(--r-md);
  background: rgb(255 255 255 / .05);
}
.finder__label { font-weight: 600; color: var(--sprout); }
.finder__steps { position: relative; display: grid; gap: 26px; margin: 22px 0 32px; padding-left: 30px; }
.finder__steps::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; background: var(--sprout); opacity: .55; }
.finder__steps li { position: relative; }
.finder__steps li::before {
  content: ""; position: absolute; left: -30px; top: 5px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--sprout); box-shadow: 0 0 0 5px #1b4435;
}
.finder__steps a { display: block; text-decoration: none; }
.finder__steps strong { display: block; font: 400 1.375rem/1.2 var(--display); color: #fff; }
.finder__steps a:hover strong { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.finder__steps span { display: block; margin-top: 6px; font-size: 1rem; line-height: 1.5; }
.finder__steps em { display: inline-block; margin-left: 10px; padding: 2px 8px; border: 1px solid currentColor; border-radius: var(--r-sm); font: 600 .75rem/1.4 var(--text); color: var(--sprout); vertical-align: middle; }
.finder__steps.is-in li { animation: step-in .45s var(--ease) both; }
.finder__steps.is-in li:nth-child(2) { animation-delay: .09s; }
.finder__result .btn { margin-top: auto; align-self: flex-start; }

/* Services and cards unveil as you reach them. */
.will-reveal .stop__img, .will-reveal.card figure { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease) var(--delay, 0s); }
.will-reveal .stop__body, .will-reveal .card__body { opacity: 0; transform: translateY(18px); transition: opacity .7s ease calc(var(--delay, 0s) + .25s), transform .8s var(--ease) calc(var(--delay, 0s) + .25s); }
.will-reveal.is-on .stop__img, .will-reveal.is-on.card figure { clip-path: inset(0); }
.will-reveal.is-on .stop__body, .will-reveal.is-on .card__body { opacity: 1; transform: none; }

/* A service or card you jumped to from the pathfinder gets a brief highlight. */
.stop:target .stop__body h3, .card:target h3 { animation: arrive 1.6s var(--ease); }
@keyframes arrive { 0%, 60% { color: var(--brick); } }

/* 13. Small screens -------------------------------------------------------- */
@media (max-width: 1280px) {
  .site-header__inner { gap: 20px; }
  .phone span { display: none; }
  .phone { width: 44px; height: 44px; justify-content: center; border-radius: var(--r-md); background: var(--fresh); }
}

@media (max-width: 1120px) {
  .site-header__actions { margin-left: auto; }
  .nav a::after { display: none; }

  .menu-toggle {
    display: grid; place-items: center;
    width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: var(--r-md);
    background: var(--pine); color: #fff; cursor: pointer;
  }
  .menu-toggle__bars, .menu-toggle__bars::before { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease); }
  .menu-toggle__bars { transform: translateY(-3px); }
  .menu-toggle__bars::before { content: ""; transform: translateY(6px); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: rotate(-90deg); }

  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; gap: 0;
    margin: 0; padding: 8px var(--gutter) 20px;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    box-shadow: 0 24px 40px -24px rgb(20 56 43 / .3);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; }
  .nav a:last-child { border-bottom: 0; }
}

@media (max-width: 1080px) {
  .guides { left: 16px; bottom: 16px; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 80px; }

  /* The winding line needs room; on small screens the services get a simple rail instead. */
  .trail, .hero__start, .wp--end, .wp--ghost { display: none; }

  .site-header__inner { gap: 12px; min-height: 64px; }
  .brand img { height: 42px; }
  .site-header__actions { margin-left: auto; gap: 10px; }
  .site-header__actions .btn { display: none; }


  .hero__grid, .about__panel, .stories__grid, .contact__grid, .finder__panel { grid-template-columns: minmax(0, 1fr); }

  .hero__photo { aspect-ratio: 4 / 3.6; max-height: none; margin-right: 10px; }
  .hero__photo::before { transform: translate(10px, 10px); }
  .guides { position: relative; left: auto; bottom: auto; max-width: none; margin: -40px 16px 0; }

  .about__photo img { min-height: 0; aspect-ratio: 4 / 4.4; }
  .about__copy { padding: 8px clamp(8px, 3vw, 24px) 24px; }

  .head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .head h2, .head p { grid-column: 1; }

  .route { position: relative; gap: 56px; padding-left: 32px; }
  .route::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 0; width: 2px; background: var(--brick); border-radius: 2px; opacity: .85; }
  .stop { position: relative; display: block; }
  .stop > .wp, .stop:nth-child(even) > .wp { position: absolute; left: -32px; top: 0; margin: 0; background: var(--brick); transform: none; }
  .stop__body { max-width: none; margin-top: 20px; }

  .stories__side .quote:last-child { border-bottom: 0; }

  .cards { grid-template-columns: minmax(0, 1fr); }
  .card { max-width: 560px; }

  .foot__main { flex-direction: column; align-items: flex-start; }
  .foot__nav { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .creds, .topics, .field-row { grid-template-columns: minmax(0, 1fr); }
  .lang button { min-width: 38px; padding: 0 6px; }
  .site-header__inner { gap: 8px; }
  .site-header__actions { gap: 8px; }
  .hero__cta .btn { width: 100%; }
  .partners img { height: 34px; }
  .details > div { grid-template-columns: 88px 1fr; }
  .booking__nav .btn { flex: 1; padding-inline: 16px; }
  .stories__close .btn { width: 100%; }
}

/* 14. Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .hero__title .line > span, .js .hero__photo img { transform: none; }
  .motes, .trail__you { display: none; }
  .stop__img img, .card img { transform: none; }
  .js .swoosh svg { clip-path: none; }
  .js .hero__lede, .js .hero__cta, .js .hero__note, .js .guides { opacity: 1; }
}