/* ==========================================================================
   Shih Travels — site stylesheet
   Type:  David Libre Bold (headlines) · Source Sans 3 (subheads + body)
   Brand: #E88D72 peach (primary) · #8A9A82 olive (accent)

   Colour strategy: peach leads,
olive accents. Section grounds alternate to
   give each page a rhythm,
and every deep ground carries a translucent
   silhouette texture (see tools/gen_placeholders.py) for depth.

     .section--paper   bright cream (default)
     .section--warm    soft peach tint
     .section--mist    pale olive tint
     .section--peach   deep rose-peach + texture,
white copy
     .section--olive   deep olive + texture,
light copy   (the inversion)

   Contrast: several values sit deliberately at the WCAG AA line — see the
   README table before retuning any of them.
   ========================================================================== */

/* --- 1. Tokens ------------------------------------------------------------- */

:root {
  /* brand */
  --peach: #e88d72;
  --olive: #5f6e58; /* accent fill + marks; white text on this passes AA */

  /* peach family */
  --peach-light: #f6c6b2;
  --peach-soft: #f9d9cb;
  --peach-mist: #fdf1eb;
  --peach-deep: #c86e52;

  /* olive family — the brand olive is #8A9A82; the rest are the darker
     derivatives that small text and button fills need to stay legible */
  --olive-brand: #8a9a82;
  --olive-bright: #8a9a82;
  --olive-text: #55634e; /* small accent text on light grounds */
  --olive-deep: #3c4838; /* dark section ground, eyebrows on light */
  --olive-darker: #2a3427; /* footer */
  --olive-ink: #2b3727; /* text on a peach ground */
  --olive-soft: #c9d3c1; /* body copy on the dark olive ground */
  --olive-mist: #ebefe6; /* pale olive section tint */

  /* deep grounds that carry white copy. Both sit at the AA line: pure white
     on #AD5E55 is 4.66:1, and one step lighter drops under. */
  --ground-peach: #ad5e55;
  --hero-cream: #fffaf6;
  --hero-sage: #cbdac1; /* the "green" in the white-and-green hero headline */

  /* neutrals, warmed toward olive */
  --paper: #fffaf6;
  --paper-warm: #fdf2ea;
  --ink: #232a1e;
  --ink-muted: #5f6857;
  --ink-soft: #3e4738;
  --line: #e6ddcf;
  --line-dark: rgba(233, 239, 230, 0.2);

  /* type */
  --font-display: "David Libre", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1: clamp(1.18rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.75vw, 1.9rem);
  --step-3: clamp(1.85rem, 1.55rem + 1.5vw, 2.7rem);
  --step-4: clamp(2.3rem, 1.8rem + 2.5vw, 3.9rem);
  --step-5: clamp(2.9rem, 2rem + 4.4vw, 5.6rem);

  /* rhythm */
  --header-h: calc(4.75rem + 1px);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --wrap: 1240px;
  --wrap-narrow: 760px;
  --wrap-mid: 980px;

  /* motif — the arch. Vertical radius is a fixed length, not a percentage, so
     the dome keeps the same shallow rise whatever the image aspect ratio is.
     A percentage here turns square images into eggs. */
  --arch: 50% 50% 6px 6px / 120px 120px 6px 6px;
  --arch-card: 50% 50% 5px 5px / 72px 72px 5px 5px;
  --shadow-soft: 0 24px 60px -32px rgba(60, 72, 56, 0.45);
}

/* --- 2. Reset -------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* The width/height attributes on <img> reserve layout space,
but they also map
   to presentational height,
which beats `aspect-ratio`. Reset it so the ratio
   rules below actually apply; explicit heights later in this file still win. */
img {
  height: auto;
}

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

h1 {
  font-size: var(--step-5);
}
h2 {
  font-size: var(--step-4);
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}

p {
  margin: 0 0 1.15em;
  text-wrap: pretty;
}

a {
  color: inherit;
}

ul,
ol {
  margin: 0 0 1.15em;
  padding-left: 1.15em;
}

li {
  margin-bottom: 0.4em;
}

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

:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--olive :focus-visible,
.cta-band :focus-visible {
  outline-color: var(--peach);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--olive-deep);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

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

/* --- 3. Layout primitives -------------------------------------------------- */

.wrap {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}
.wrap--mid {
  width: min(100% - var(--gutter) * 2, var(--wrap-mid));
  margin-inline: auto;
}
.wrap--narrow {
  width: min(100% - var(--gutter) * 2, var(--wrap-narrow));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--tight {
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

/* --- section grounds --- */

.section--paper {
  background: var(--paper);
}
.section--warm {
  background: var(--paper-warm);
}
.section--mist {
  background: var(--olive-mist);
}

/* Deep rose-peach with white copy. Sits at the AA line — see README. */
.section--peach {
  background: url("../img/tex-peach.svg") center bottom / cover no-repeat,
    var(--ground-peach);
  color: #ffffff;
}
.section--peach h1,
.section--peach h2,
.section--peach h3,
.section--peach h4,
.section--peach .eyebrow,
.section--peach .lede,
.section--peach p {
  color: #ffffff;
}

/* the inversion: deep olive ground,
peach accents */
.section--olive {
  background: url("../img/tex-olive.svg") center bottom / cover no-repeat,
    var(--olive-deep);
  color: var(--olive-soft);
}
.section--olive h1,
.section--olive h2,
.section--olive h3,
.section--olive h4 {
  color: var(--paper);
}
.section--olive h1,
.section--olive h2,
.section--olive h3,
.section--olive h4 {
  color: var(--paper);
}

.stack > * + * {
  margin-top: 1.15rem;
}

.center {
  text-align: center;
}
.center .eyebrow,
.eyebrow.center,
.cta-band .eyebrow {
  justify-content: center;
  margin-inline: auto;
}
/* a centred section head has to centre the block too,
not just its text */
.section-head.center {
  margin-inline: auto;
}

/* --- 4. Small type components ---------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-deep);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: currentColor;
  flex: none;
}
/* the peach ground now carries white copy — see section 23 */
.section--peach .eyebrow {
  color: var(--olive-ink);
}
/* on deep olive grounds peach becomes the accent */
.section--olive .eyebrow,
.cta-band .eyebrow {
  color: var(--peach-light);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-muted);
  font-weight: 300;
}
.section--olive .lede {
  color: var(--olive-soft);
}
.section--peach .lede {
  color: rgba(6, 52, 43, 0.9);
}

.kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
}

.muted {
  color: var(--ink-muted);
}

/* --- 5. Buttons + links ---------------------------------------------------- */

/* Default is olive — the accent carries the calls to action on peach and cream
   grounds. On deep olive grounds the fill flips to peach automatically,
so the
   markup never has to name a colour. */
.btn {
  --btn-bg: var(--olive);
  --btn-fg: #ffffff;
  --btn-bd: var(--olive);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.82em 1.7em;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease,
    border-color 0.25s ease;
}
.btn:hover {
  transform: translateY(-2px);
  --btn-bg: var(--olive-deep);
  --btn-bd: var(--olive-deep);
}

.section--olive .btn:not(.btn--ghost),
.cta-band .btn:not(.btn--ghost) {
  --btn-bg: var(--peach);
  --btn-bd: var(--peach);
  --btn-fg: var(--olive-ink);
}
.section--olive .btn:not(.btn--ghost):hover,
.cta-band .btn:not(.btn--ghost):hover {
  --btn-bg: var(--paper);
  --btn-bd: var(--paper);
  --btn-fg: var(--olive-ink);
}

/* explicit peach fill {
  --btn-bg: var(--peach);
  --btn-bd: var(--peach);
  --btn-fg: var(--olive-ink);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--olive-deep);
  --btn-bd: currentColor;
}
.btn--ghost:hover {
  --btn-bg: var(--olive-deep);
  --btn-fg: #ffffff;
  --btn-bd: var(--olive-deep);
}
.section--olive .btn--ghost,
.hero .btn--ghost,
.cta-band .btn--ghost {
  --btn-fg: var(--paper);
  --btn-bd: rgba(255, 250, 246, 0.5);
}
.section--olive .btn--ghost:hover,
.cta-band .btn--ghost:hover {
  --btn-bg: var(--paper);
  --btn-fg: var(--olive-ink);
  --btn-bd: var(--paper);
}
/* the homepage hero is a light peach field,
so its ghost button stays dark */
.hero .btn--ghost:hover {
  --btn-bg: var(--olive-deep);
  --btn-fg: #ffffff;
  --btn-bd: var(--olive-deep);
}
.section--peach .btn--ghost {
  --btn-fg: var(--olive-ink);
  --btn-bd: var(--olive-ink);
}
.section--peach .btn--ghost:hover {
  --btn-bg: var(--olive-ink);
  --btn-fg: var(--peach-mist);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}
.center .btn-row,
.cta-band .btn-row {
  justify-content: center;
}

/* arrow text link */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--olive-text);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.25s ease, gap 0.25s ease;
}
.arrow-link::after {
  content: "→";
  transition: transform 0.25s ease;
}
.arrow-link:hover {
  border-color: currentColor;
}
.arrow-link:hover::after {
  transform: translateX(4px);
}
.section--olive .arrow-link {
  color: var(--peach-light);
}
.section--peach .arrow-link {
  color: var(--olive-ink);
}

/* --- 6. Header / nav ------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 250, 246, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* The sticky header sits above the hero in normal flow,
so it can't be
   transparent — it takes the hero's top colour instead. That band is light,
so
   the header carries dark type while the hero copy below it is white. */
.site-header--onhero {
  background: var(--hero-top);
  border-color: transparent;
}
.site-header--onhero .brand__name,
.site-header--onhero .nav__link {
  color: var(--ink);
}
.site-header--onhero .brand__mark {
  color: var(--olive-deep);
}
.site-header--onhero .nav__link::after {
  background: var(--olive);
}
.site-header--onhero .nav-toggle {
  border-color: rgba(60, 72, 56, 0.45);
}
.site-header--onhero .nav-toggle span {
  background: var(--olive-deep);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex: none;
}
/* The mark is a doorway with an S-shaped river running edge to edge through
   it — the letterform and the water are the same stroke. Inline SVG rather
   than an <img> so it inherits `color` wherever the mark sits. */
.brand__mark {
  width: 2.1rem;
  height: 2.1rem;
  display: block;
  color: var(--olive);
  flex: none;
}
.brand__mark svg {
  display: block;
  width: 100%;
  height: 100%;
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.2rem);
}
.nav__link {
  position: relative;
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  padding-block: 0.3rem;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--olive);
  transition: right 0.28s ease;
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  right: 0;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--olive);
  border-radius: 999px;
  background: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 1.05rem;
  height: 1.5px;
  margin-inline: auto;
  background: var(--olive);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 1140px) {
  .nav-toggle {
    display: flex;
  }
  .nav {
    position: fixed;
    inset: 4.75rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 2rem;
    transform: translateY(-130%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: var(--shadow-soft);
  }
  .nav[data-open="true"] {
    transform: translateY(0);
  }
  /* the drop-down panel is always cream,
even while the header sits on the
     hero — so it has to beat .site-header--onhero on specificity */
  .site-header .nav__link,
.site-header--onhero .nav__link {
    color: var(--ink);
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.95rem;
  }
  .nav .btn {
    margin-top: 1.35rem;
    justify-content: center;
  }
}

/* --- 7. Hero -------------------------------------------------------------
   Every hero is the same construction,
varied by three custom properties: the
   flat colour the sticky header sits on,
the gradient ramp,
and the texture
   layered over it.

   The ramp always opens light and deepens downward,
and the light band sits
   ABOVE the copy — the hero carries extra top padding so the eyebrow,
the
   first white text,
begins below the point where the ramp has crossed the
   4.5:1 threshold (ground luminance 0.183). The header rides the light band
   instead,
which is why it flips to dark type.

   The texture only ever darkens what is beneath it,
so it can be layered
   behind type without weakening contrast.
   -------------------------------------------------------------------------- */

/* The field variables live on <body>,
not on .hero — the sticky header sits
   outside the hero element and has to read --hero-top too. */
body {
  --hero-top: #f0bca8;
  --hero-ramp: linear-gradient(
    180deg,
    #f0bca8 0%,
    #c9836f 9%,
    #ab5e56 19%,
    #9d5350 45%,
    #964a4b 66%,
    #833b3e 100%
  );
  --hero-tex: url("../img/tex-hero-home.svg");
}

/* Per-page fields. Travelers is peach and Agents olive so each page answers
   the doorway that led to it. */
body.field--peach {
  --hero-top: #f2c2ae;
  --hero-ramp: linear-gradient(180deg, #f2c2ae 0%, #cd8874 9%, #ad6058 19%, #9f5552 45%, #984c4d 66%, #853d40 100%);
  --hero-tex: url("../img/tex-hero-travelers.svg");
}
body.field--olive {
  --hero-top: #cfd8c4;
  --hero-ramp: linear-gradient(180deg, #cfd8c4 0%, #93a488 9%, #5f7055 19%, #526248 45%, #465538 66%, #2f3d2a 100%);
  --hero-tex: url("../img/tex-hero-agents.svg");
}
body.field--dusk {
  --hero-top: #cdd8e4;
  --hero-ramp: linear-gradient(180deg, #cdd8e4 0%, #8fa3bd 9%, #566a87 19%, #4a5c78 45%, #3e4e68 66%, #26334a 100%);
  --hero-tex: url("../img/tex-hero-destinations.svg");
}
body.field--plum {
  --hero-top: #d6cbe4;
  --hero-ramp: linear-gradient(180deg, #d6cbe4 0%, #a394bb 9%, #6b5a86 19%, #5e4e76 45%, #524365 66%, #3f3252 100%);
  --hero-tex: url("../img/tex-hero-about.svg");
}
body.field--teal {
  --hero-top: #c6ddd6;
  --hero-ramp: linear-gradient(180deg, #c6ddd6 0%, #86b0a6 9%, #3f6f65 19%, #356057 45%, #2b524a 66%, #17403a 100%);
  --hero-tex: url("../img/tex-hero-journeys.svg");
}
body.field--stone {
  --hero-top: #dcdbd2;
  --hero-ramp: linear-gradient(180deg, #dcdbd2 0%, #a6a69b 9%, #6a6b62 19%, #5c5d55 45%, #4e4f48 66%, #35362f 100%);
  --hero-tex: url("../img/tex-hero-faq.svg");
}

.hero {
  position: relative;
  background: var(--hero-top);
  color: var(--hero-cream);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hero-tex) center bottom / cover no-repeat, var(--hero-ramp);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  /* the extra top padding is what pushes the copy clear of the light band */
  padding-block: clamp(6rem, 13vw, 11rem) clamp(3.5rem, 8vw, 7rem);
}

.hero .eyebrow {
  color: #ffffff;
}
.hero__title {
  color: #ffffff;
  margin-bottom: 0.35em;
}
/* Colour alone carries the emphasis — no italic. David Libre ships no true
   italic on Google Fonts,
so an italic here is a synthesised oblique. */
.hero__title em {
  font-style: normal;
  color: var(--hero-sage);
}
.hero__text {
  font-size: var(--step-1);
  color: rgba(255, 250, 246, 0.95);
  font-weight: 400;
  max-width: 34ch;
}
.hero .breadcrumb {
  color: rgba(255, 250, 246, 0.9);
}

.hero .btn:not(.btn--ghost) {
  --btn-bg: var(--hero-cream);
  --btn-fg: #8f3722;
  --btn-bd: var(--hero-cream);
}
.hero .btn:not(.btn--ghost):hover {
  --btn-bg: var(--hero-sage);
  --btn-fg: #2b3727;
  --btn-bd: var(--hero-sage);
}
.hero .btn--ghost {
  --btn-fg: var(--hero-cream);
  --btn-bd: rgba(255, 250, 246, 0.6);
}
.hero .btn--ghost:hover {
  --btn-bg: var(--hero-cream);
  --btn-fg: #8f3722;
  --btn-bd: var(--hero-cream);
}
/* the olive and dusk fields want their own button ink,
not the peach one */
.field--olive .hero .btn:not(.btn--ghost),
.field--olive .hero .btn--ghost:hover {
  --btn-fg: #2f3d2a;
}
.field--dusk .hero .btn:not(.btn--ghost),
.field--dusk .hero .btn--ghost:hover {
  --btn-fg: #26334a;
}
.field--teal .hero .btn:not(.btn--ghost),
.field--teal .hero .btn--ghost:hover {
  --btn-fg: #17403a;
}
.field--stone .hero .btn:not(.btn--ghost),
.field--stone .hero .btn--ghost:hover {
  --btn-fg: #35362f;
}
.field--plum .hero .btn:not(.btn--ghost),
.field--plum .hero .btn--ghost:hover {
  --btn-fg: #3f3252;
}

.hero__media {
  position: relative;
}
.hero__img {
  width: 100%;
  height: clamp(320px, 46vw, 560px);
  object-fit: cover;
  border-radius: var(--arch);
}
/* thin offset frame echoing the arch */
.hero__media::after {
  content: "";
  position: absolute;
  inset: -0.9rem;
  border: 1px solid rgba(255, 250, 246, 0.32);
  border-radius: var(--arch);
  pointer-events: none;
  z-index: -1;
}

/* interior pages: one column,
no artwork window — the field carries it */
.hero--page .hero__inner {
  grid-template-columns: 1fr;
}

/* Interior heroes: a flat deep field instead of a ramp,
and much less height.
   The gradient only earns its keep on the homepage,
where the artwork window
   needs the vertical room; here it just made a long empty fade. With the field
   flat,
the header takes the same colour and reads as transparent. */
.page--interior .hero--page .hero__inner {
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem) clamp(2.75rem, 5.5vw, 4.5rem);
}
/* Genuinely transparent nav on interior pages: the hero is pulled up under the
   header by exactly the header's height and given that height back as padding,
so the field starts at the very top of the page and the gradient runs
   unbroken behind the nav into the copy. */
.page--interior .hero--page {
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
}
.page--interior .site-header--onhero {
  /* Not fully transparent: a faint dark tint so the bar still reads as a bar,
     while the hero gradient continues through it. The tint only darkens, so
     the light nav type gains contrast rather than losing it. */
  background: rgba(24, 20, 16, 0.14);
  border-color: transparent;
  backdrop-filter: blur(6px);
}

.page--interior .hero--page::before {
  background: var(--hero-tex) center bottom / cover no-repeat, var(--hero-fade);
}
/* A gentle tonal fall rather than the homepage's full ramp — roughly one step
   of value from top to bottom,
enough to give the field some air without the
   long dramatic fade. --hero-top stays the gradient's first colour so the
   header still meets it seamlessly. */
.page--interior.field--peach {
  --hero-top: #9c4a4c;
  --hero-fade: linear-gradient(180deg, #9c4a4c 0%, #8a3f42 55%, #77373a 100%);
}
.page--interior.field--olive {
  --hero-top: #3b4c34;
  --hero-fade: linear-gradient(180deg, #3b4c34 0%, #32412c 55%, #283420 100%);
}
.page--interior.field--dusk {
  --hero-top: #334159;
  --hero-fade: linear-gradient(180deg, #334159 0%, #29364b 55%, #1f2a3e 100%);
}
.page--interior.field--plum {
  --hero-top: #5c4a75;
  --hero-fade: linear-gradient(180deg, #5c4a75 0%, #4e3e64 55%, #3f3252 100%);
}
.page--interior.field--teal {
  --hero-top: #23514a;
  --hero-fade: linear-gradient(180deg, #23514a 0%, #1c453f 55%, #143935 100%);
}
.page--interior.field--stone {
  --hero-top: #45463f;
  --hero-fade: linear-gradient(180deg, #45463f 0%, #3b3c36 55%, #31322c 100%);
}
/* Let's Chat carries no field class,
so it wears the house rose-peach. The
   interior default has to be spelled out — .page--interior swaps the ramp for
   --hero-fade,
and an unset one would leave the field blank. */
.page--interior:not([class*="field--"]) {
  --hero-top: #96474a;
  --hero-fade: linear-gradient(180deg, #96474a 0%, #853d40 55%, #733539 100%);
}

/* the header now sits on that deep field,
so its type flips back to light */
.page--interior .site-header--onhero .brand__name,
.page--interior .site-header--onhero .nav__link {
  color: var(--hero-cream);
}
.page--interior .site-header--onhero .brand__mark {
  color: var(--hero-sage);
}
.page--interior .site-header--onhero .nav__link::after {
  background: var(--hero-sage);
}
.page--interior .site-header--onhero .nav-toggle {
  border-color: rgba(255, 250, 246, 0.55);
}
.page--interior .site-header--onhero .nav-toggle span {
  background: var(--hero-cream);
}
.page--interior .site-header--onhero .btn {
  --btn-bg: var(--hero-cream);
  --btn-bd: var(--hero-cream);
  --btn-fg: #8f3722;
}
.page--interior.field--olive .site-header--onhero .btn { --btn-fg: #2f3d2a; }
.page--interior.field--dusk .site-header--onhero .btn { --btn-fg: #26334a; }
.page--interior.field--plum .site-header--onhero .btn { --btn-fg: #3f3252; }
.page--interior.field--teal .site-header--onhero .btn { --btn-fg: #143935; }
.page--interior.field--stone .site-header--onhero .btn { --btn-fg: #31322c; }
.hero--page .hero__copy {
  max-width: 46rem;
}
.hero--page .hero__title {
  font-size: var(--step-4);
}

.breadcrumb {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.breadcrumb li {
  margin: 0;
}
.breadcrumb a {
  text-decoration: none;
  opacity: 0.85;
}
.breadcrumb a:hover {
  opacity: 1;
  text-decoration: underline;
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.6rem;
  opacity: 0.55;
}

@media (max-width: 860px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }
  .hero__media {
    order: -1;
  }
  .hero__img {
    height: clamp(260px, 60vw, 380px);
  }
  /* the offset frame runs into the page gutter at narrow widths */
  .hero__media::after {
    display: none;
  }
}

/* --- 8. Section headers ---------------------------------------------------- */

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  max-width: none;
}
.section-head p:last-child {
  margin-bottom: 0;
}

@media (max-width: 820px) {
  .section-head--split {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* --- 9. Split / feature blocks --------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split__media img {
  width: 100%;
  height: clamp(300px, 40vw, 520px);
  object-fit: cover;
  border-radius: var(--arch);
}
.split--flip .split__media {
  order: 2;
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }
  .split--flip .split__media {
    order: 0;
  }
  .split__media img {
    height: clamp(240px, 55vw, 340px);
  }
}

/* --- 10. Cards ------------------------------------------------------------- */

.grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .grid--3,
.grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .grid--2,
.grid--3,
.grid--4 {
    grid-template-columns: 1fr;
  }
}

/* destination / journey card */
.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--arch-card);
  margin-bottom: 1.25rem;
  background: var(--olive-mist);
}
.card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover .card__media img {
  transform: scale(1.05);
}
.card__index {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--paper);
  background: rgba(43, 55, 39, 0.78);
  backdrop-filter: blur(4px);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}
.card__title {
  font-size: var(--step-2);
  margin-bottom: 0.35rem;
}
.card__meta {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive-deep);
  margin-bottom: 0.6rem;
}
.card__text {
  color: var(--ink-muted);
  font-size: 0.98rem;
  margin-bottom: 0.9rem;
}
/* Push only a trailing call-to-action to the bottom so CTAs line up across a
   row. Body copy must stay put,
or uneven title lengths leave it floating. */
.card > p:last-child:has(.arrow-link) {
  margin-top: auto;
}
.section--olive .card__text {
  color: var(--olive-soft);
}
.section--olive .card__meta {
  color: var(--peach-light);
}
.section--peach .card__text {
  color: rgba(6, 52, 43, 0.92);
}
.section--peach .card__meta {
  color: var(--olive-ink);
}

/* plain panel card (no image) */
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(1.6rem, 3vw, 2.5rem);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.panel__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--olive);
  margin-bottom: 0.9rem;
  display: block;
}
.panel h3 {
  font-size: var(--step-1);
}
.panel p:last-child {
  margin-bottom: 0;
}
.panel p {
  color: var(--ink-muted);
  font-size: 0.98rem;
}
.section--olive .panel {
  background: rgba(255, 255, 255, 0.055);
  border-color: var(--line-dark);
}
.section--olive .panel p {
  color: var(--olive-soft);
}
.section--olive .panel__num {
  color: var(--peach-light);
}
.section--peach .panel {
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(6, 52, 43, 0.14);
}
.section--peach .panel p {
  color: rgba(6, 52, 43, 0.92);
}
.section--peach .panel__num {
  color: var(--olive);
}

/* --- 11. Pull quote / manifesto -------------------------------------------- */

.manifesto {
  position: relative;
  border-left: 2px solid var(--olive);
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
}
.manifesto p {
  font-size: var(--step-1);
  line-height: 1.6;
  font-weight: 300;
}
.manifesto p:first-of-type {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.manifesto em {
  font-style: italic;
  color: var(--olive);
  font-weight: 400;
}
.section--peach .manifesto {
  border-left-color: var(--olive-ink);
}
.section--peach .manifesto p {
  color: var(--olive-ink);
}
/* On peach,
emphasis carries typographically rather than by colour — white or
   mid-olive would both drop under the 4.5:1 contrast floor at body size. */
.section--peach .manifesto em {
  color: inherit;
}
.section--olive .manifesto {
  border-left-color: var(--peach);
}
.section--olive .manifesto em {
  color: var(--peach-light);
}

/* --- 12. Tag chips + lists ------------------------------------------------- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}
.tags li {
  margin: 0;
}
.tag {
  display: inline-block;
  padding: 0.35em 0.95em;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  background: var(--paper);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
a.tag:hover,
button.tag:hover,
.tag--active {
  background: var(--olive);
  border-color: var(--olive);
  color: #ffffff;
}
.section--olive .tag {
  background: transparent;
  border-color: var(--line-dark);
  color: var(--olive-soft);
}
.section--olive a.tag:hover,
.section--olive button.tag:hover,
.section--olive .tag--active {
  background: var(--peach);
  border-color: var(--peach);
  color: var(--olive-ink);
}

/* checklist with diamond marks */
.ticks {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ticks li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.85rem;
  color: var(--ink-muted);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--olive);
  transform: rotate(45deg);
}
.ticks strong {
  color: var(--ink);
  font-weight: 600;
}
.section--olive .ticks li {
  color: var(--olive-soft);
}
.section--olive .ticks strong {
  color: var(--paper);
}
.section--olive .ticks li::before {
  background: var(--peach);
}
.section--peach .ticks li {
  color: rgba(6, 52, 43, 0.92);
}
.section--peach .ticks strong {
  color: var(--olive-ink);
}
.section--peach .ticks li::before {
  background: var(--olive-ink);
}

/* partner columns */
.partners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
  padding-top: 2.5rem;
}
.partners h4 {
  font-size: var(--step--1);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive-deep);
  margin-bottom: 0.9rem;
}
.partners ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.98rem;
  color: var(--ink-muted);
  line-height: 1.9;
}
.partners li {
  margin: 0;
}
.section--olive .partners {
  border-color: var(--line-dark);
}
.section--olive .partners ul {
  color: var(--olive-soft);
}
.section--olive .partners h4 {
  color: var(--peach-light);
}

/* --- 13. Forms ------------------------------------------------------------- */

.form {
  display: grid;
  gap: 1.5rem;
}
.form fieldset {
  border: none;
  border-top: 1px solid var(--line);
  padding: 2rem 0 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
  /* fieldset defaults to min-inline-size: min-content, which lets long option
     labels push it wider than its container */
  min-inline-size: 0;
}
.form legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  padding: 0 1.1rem 0 0;
  color: var(--ink);
}
.form legend small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--ink-muted);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 0.35rem;
}

.field {
  display: grid;
  gap: 0.5rem;
}
.field > label,
.field > .field__label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
}
.field .hint {
  font-size: 0.92rem;
  color: var(--ink-muted);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  line-height: 1.5;
}
/* text-ish controls only — radios and checkboxes are styled with .choice */
.field input:not([type="radio"]):not([type="checkbox"]),
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(95, 110, 88, 0.22);
}
.field textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 620px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}

.choices {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.2rem;
}
.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  cursor: pointer;
  font-size: 0.98rem;
  line-height: 1.45;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.choice:hover {
  border-color: var(--olive);
}
.choice input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.28rem 0 0;
  accent-color: var(--olive);
  flex: none;
}
.choice:has(input:checked) {
  border-color: var(--olive);
  background: var(--olive-mist);
}

.form__note {
  background: var(--olive-deep);
  color: var(--olive-soft);
  border-radius: 6px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.form__note h3 {
  color: var(--paper);
  font-size: var(--step-1);
}
.form__note p:last-child {
  margin-bottom: 0;
}

/* --- 14. CTA band ---------------------------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  /* same construction as the hero and the coloured grounds: a translucent
     silhouette over a solid colour, so it can only darken what's beneath */
  background: url("../img/tex-cta.svg") center bottom / cover no-repeat,
    var(--olive-deep);
  color: var(--olive-soft);
  isolation: isolate;
  text-align: center;
}
.cta-band h2 {
  color: var(--paper);
  max-width: 22ch;
  margin-inline: auto;
}
.cta-band p {
  color: var(--olive-soft);
  max-width: 52ch;
  margin-inline: auto;
  font-size: var(--step-1);
  font-weight: 300;
}

/* --- 15. Footer ------------------------------------------------------------ */

.site-footer {
  background: var(--olive-darker);
  color: var(--olive-soft);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
  font-size: 0.98rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line-dark);
}
.site-footer .brand__name,
.site-footer h4 {
  color: var(--paper);
}
.site-footer .brand__mark {
  color: var(--peach);
}
.site-footer h4 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.footer__blurb {
  max-width: 34ch;
  margin-top: 1.35rem;
  color: var(--olive-soft);
}
.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 2.1;
}
.footer__list a {
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.footer__list a:hover {
  opacity: 1;
  color: var(--peach-light);
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  font-size: 0.88rem;
  color: rgba(201, 211, 193, 0.78);
}
.footer__bottom p {
  margin: 0;
}

@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

/* --- 16. Scroll reveal ----------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --- 17. Misc -------------------------------------------------------------- */

.placeholder-note {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0.75;
}
.section--olive .placeholder-note,
.form__note .placeholder-note,
.site-footer .placeholder-note {
  color: var(--olive-soft);
  opacity: 0.8;
}

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

/* --- 18. Doorways --------------------------------------------------------
   The central choice on the homepage: arched doorways with an inset frame and
   a call to action bigger than any other button on the site.

   They carry NO darkening overlay. Their artwork is drawn as a vivid sky over
   a deep silhouette whose front layer starts just above the copy,
so the land
   itself holds the white text (measured 7.7–12.1:1). Swapping in photography
   here breaks that unless the photo has a similarly dark lower half.
   -------------------------------------------------------------------------- */

.doorways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
}

.doorway {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  --door-pad: clamp(1.75rem, 3vw, 2.75rem);
  min-height: clamp(420px, 52vw, 620px);
  padding: var(--door-pad);
  /* a taller, rounder arch than the site default — reads as a doorway */
  border-radius: 50% 50% 8px 8px / 40% 40% 8px 8px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: var(--hero-cream);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.doorway:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -34px rgba(43, 55, 39, 0.6);
}
.doorway:focus-visible {
  outline: 3px solid var(--olive);
  outline-offset: 4px;
}
.doorway__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.doorway:hover .doorway__img {
  transform: scale(1.06);
}
.doorway::after {
  /* the door frame — an inset line following the arch */
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 250, 246, 0.4);
  border-radius: 50% 50% 4px 4px / 40% 40% 4px 4px;
  pointer-events: none;
}
.doorway__body {
  display: block;
  position: relative;
}
/* The copy backing. Anchored to the copy rather than to the card,
because the
   headline wraps to two or three lines depending on width — a gradient keyed
   to the card height misses the eyebrow entirely at some sizes. This grows
   with the text,
so the whole block always sits on a dark ground.

   It is not the flat wash that was taken off earlier: everything above the
   fade is the untouched artwork,
so the sky keeps all of its colour. */
.doorway__body::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--door-pad));
  right: calc(-1 * var(--door-pad));
  bottom: calc(-1 * var(--door-pad));
  top: -3.25rem;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(22, 15, 11, 0) 0,
    rgba(22, 15, 11, 0.62) 3.25rem,
    rgba(22, 15, 11, 0.74) 100%
  );
  pointer-events: none;
}
.doorway__eyebrow {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #dbe7d2;
  margin-bottom: 0.7rem;
}
.doorway__head {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin-bottom: 0.6rem;
  text-wrap: balance;
}
.doorway__text {
  display: block;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 250, 246, 0.92);
  max-width: 40ch;
  margin-bottom: 1.75rem;
}
.doorway__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 1.05em 1.9em;
  border-radius: 999px;
  background: var(--hero-cream);
  color: #2b3727;
  border: 1px solid var(--hero-cream);
  font-weight: 700;
  font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.12rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.doorway__btn::after {
  content: "\2192";
  transition: transform 0.25s ease;
}
.doorway:hover .doorway__btn {
  background: var(--hero-sage);
  border-color: var(--hero-sage);
}
.doorway:hover .doorway__btn::after {
  transform: translateX(5px);
}

@media (max-width: 980px) {
  .doorways {
    grid-template-columns: 1fr;
  }
  .doorway {
    /* stacked, the card is wide and the copy short, so 440px left almost no
       artwork showing above the text — the sky is the point of these cards */
    min-height: 520px;
  }
}

/* support copy sitting under a choice */
.support {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.support__col p:last-child {
  margin-bottom: 0;
  color: var(--ink-muted);
  font-size: 0.99rem;
}
@media (max-width: 760px) {
  .support {
    grid-template-columns: 1fr;
  }
}

/* --- 19. Pull quote -------------------------------------------------------- */

.pullquote {
  margin: 0;
  border-left: 2px solid var(--olive);
  padding-left: clamp(1.1rem, 2.5vw, 1.9rem);
}
.pullquote blockquote {
  margin: 0;
}
.pullquote blockquote p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1rem;
  text-wrap: pretty;
}
.pullquote blockquote p::before {
  content: "\201C";
}
.pullquote blockquote p::after {
  content: "\201D";
}
.pullquote figcaption {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive-text);
}
.pullquote figcaption span {
  display: block;
  margin-top: 0.3rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  text-transform: none;
  font-size: 0.9rem;
}

/* --- 20. Compact preview cards --------------------------------------------- */

.preview .card__media img {
  aspect-ratio: 5 / 4;
}
.card--sm .card__title {
  font-size: var(--step-1);
  margin-bottom: 0;
}
.card--sm .card__meta {
  margin-bottom: 0.35rem;
}
.card--sm .card__media {
  margin-bottom: 0.9rem;
}

/* --- 21. Careers / statement block ----------------------------------------- */

.careers__head {
  font-size: var(--step-3);
  max-width: 36ch;
  margin-inline: auto;
  line-height: 1.15;
}
.careers__sub {
  max-width: 62ch;
  margin-inline: auto;
}

/* buttons on the deep peach ground */
.section--peach .btn:not(.btn--ghost) {
  --btn-bg: var(--hero-cream);
  --btn-fg: #8a4038;
  --btn-bd: var(--hero-cream);
}
.section--peach .btn:not(.btn--ghost):hover {
  --btn-bg: var(--hero-sage);
  --btn-fg: #2b3727;
  --btn-bd: var(--hero-sage);
}
/* pure white,
not the cream — at this ground the cream lands at 4.49:1 */
.section--peach .btn--ghost {
  --btn-fg: #ffffff;
  --btn-bd: rgba(255, 255, 255, 0.62);
}
.section--peach .btn--ghost:hover {
  --btn-bg: var(--hero-cream);
  --btn-fg: #8a4038;
  --btn-bd: var(--hero-cream);
}
.section--peach .eyebrow,
.section--peach .lede,
.section--peach p,
.section--peach .arrow-link,
.section--peach .card__meta,
.section--peach .card__text,
.section--peach .panel p,
.section--peach .ticks li,
.section--peach .ticks strong {
  color: #ffffff;
}
.section--peach .panel {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
}
.section--peach .panel__num {
  color: var(--hero-sage);
}
.section--peach .ticks li::before,
.section--peach .manifesto {
  border-left-color: #ffffff;
}
.section--peach .ticks li::before {
  background: var(--hero-sage);
}
.section--peach .manifesto p,
.section--peach .manifesto em {
  color: #ffffff;
}

/* --- 22. Body copy weight ------------------------------------------------
   Nothing that isn't display type sits below normal weight. */

.lede,
.hero__text,
.cta-band p,
.manifesto p,
.doorway__text,
.support__col p {
  font-weight: 400;
}

/* --- 23. Tabs (Let's Chat) -----------------------------------------------
   Two audiences,
one page. The tablist reuses the pill vocabulary of the
   destination filter chips so the site keeps one switching gesture.
   -------------------------------------------------------------------------- */

.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.tab {
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.tab:hover {
  border-color: var(--olive);
  color: var(--olive-text);
}
.tab[aria-selected="true"] {
  background: var(--olive);
  border-color: var(--olive);
  color: #fff;
}

/* --- 24. Mailto card (interim, while the forms are unwired) --------------
   Stands in for the two forms on Let's Chat. Deliberately plain: it should
   read as a direct line to a person, not as a form that might silently fail.
   Restoring the real forms is a revert of the commit that added this.
   -------------------------------------------------------------------------- */

.mailto-card {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.mailto-card__lead {
  margin: 0 0 1.5rem;
  color: var(--ink-soft);
  max-width: 46rem;
}
.mailto-card .btn-row {
  margin: 0;
}
.mailto-card__addr {
  margin: 1.35rem 0 0;
  font-size: 0.95rem;
  color: var(--ink-muted);
}
.mailto-card__addr a {
  color: var(--olive-text);
  text-underline-offset: 3px;
}

/* --- 25. Accordions (FAQ, under-rated destinations, itineraries) ---------
   All three are the same <details> component at different scales. The marker
   is drawn as a rotating plus so no list-style hack is needed.
   -------------------------------------------------------------------------- */

.qa-list {
  border-top: 1px solid var(--line);
}
.qa {
  border-bottom: 1px solid var(--line);
}
.qa > summary {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.3;
  color: var(--ink);
  transition: color 0.25s ease;
}
.qa > summary::-webkit-details-marker {
  display: none;
}
.qa > summary:hover {
  color: var(--olive-text);
}
.qa > summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--olive);
  transition: transform 0.3s ease;
}
.qa[open] > summary::after {
  transform: rotate(45deg);
}
.qa__body {
  padding-bottom: clamp(1.3rem, 3vw, 2rem);
  max-width: 62rem;
}
.qa__body > * {
  margin-block: 0 0.9rem;
}
.qa__body > *:last-child {
  margin-bottom: 0;
}
.qa__meta {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive-text);
  flex: none;
}

/* dark grounds */
.section--olive .qa-list,
.section--olive .qa {
  border-color: var(--line-dark);
}
.section--olive .qa > summary {
  color: var(--hero-cream);
}
.section--olive .qa > summary:hover {
  color: var(--peach);
}
.section--olive .qa > summary::after,
.section--olive .qa__meta {
  color: var(--peach);
}
.section--olive .qa__body {
  color: var(--olive-soft);
}

/* --- 26. Itineraries (Curated journeys) ----------------------------------
   A journey is a card that opens into its day-by-day. Legs group the days so
   a fourteen-day route still reads at a glance when it is expanded.
   -------------------------------------------------------------------------- */

.journeys {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.journey {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  scroll-margin-top: 7rem;
}
.journey > summary {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: 0;
  cursor: pointer;
  list-style: none;
}
.journey > summary::-webkit-details-marker {
  display: none;
}
.journey__img {
  width: 100%;
  height: 100%;
  min-height: 11rem;
  object-fit: cover;
}
.journey__copy {
  display: block;
  padding-block: clamp(1.25rem, 3vw, 1.9rem);
}
.journey__meta {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive-text);
  margin: 0 0 0.4rem;
}
.journey__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.15;
  margin: 0 0 0.6rem;
}
.journey__text {
  display: block;
  color: var(--ink-muted);
  font-size: 0.98rem;
  margin: 0;
}
.journey__open {
  display: block;
  padding-right: clamp(1.25rem, 3vw, 2.25rem);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive-text);
  white-space: nowrap;
}
.journey__open::after {
  content: "+";
  display: inline-block;
  margin-left: 0.45em;
  transition: transform 0.3s ease;
}
.journey[open] .journey__open::after {
  transform: rotate(45deg) translate(2px, -2px);
}
.journey > summary:hover .journey__title {
  color: var(--olive-text);
}

.journey__body {
  padding: 0 clamp(1.25rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
.journey__intro {
  max-width: 58rem;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  color: var(--ink-soft);
}

.leg {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.leg__head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.25;
  margin: 0 0 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.days {
  display: grid;
  gap: 1.4rem;
}
.day {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.4rem clamp(1rem, 2.5vw, 2rem);
}
.day__num {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive-text);
  padding-top: 0.25rem;
}
.day__title {
  font-weight: 600;
  font-size: 1.02rem;
  margin: 0 0 0.35rem;
  color: var(--ink);
}
.day ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}
.day li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--ink-muted);
  font-size: 0.97rem;
  line-height: 1.6;
}
.day li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--peach);
}
.day strong {
  color: var(--ink-soft);
  font-weight: 600;
}
.day em {
  font-style: italic;
}

/* a spot where the client's copy has a gap we did not invent our way past */
.gap-note {
  border-left: 2px solid var(--peach);
  padding: 0.2rem 0 0.2rem 1rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

@media (max-width: 780px) {
  .journey > summary {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .journey__img {
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-radius: 0;
  }
  .journey__copy,
.journey__open {
    padding-inline: 1.25rem;
  }
  .journey__open {
    padding-bottom: 1.25rem;
  }
  .day {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

/* --- 27. Form states ------------------------------------------------------
   The honeypot is positioned off-screen rather than display:none — bots that
   skip hidden inputs still fill this one, and screen readers skip it via the
   aria-hidden on its wrapper.
   -------------------------------------------------------------------------- */

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__note--error {
  border-left-color: var(--peach-deep);
}
.form__note--error a {
  color: var(--olive-text);
}
.form button[type="submit"][disabled] {
  opacity: 0.6;
  cursor: progress;
}