/* ==========================================================================
   JananTour — design system

   Editorial restraint on light ground: a sage-tinted paper, a high-contrast
   serif set small with wide leading, hairline rules instead of card borders,
   and tall portrait photography carrying the weight.

   Motif: the arch. Three of them receding make the logo — a colonnade seen
   down its length, which is both Arabic architecture and the view down a road.
   The single arch crops the hero and feature images.

   Sequence markers (01, 02…) appear only where order is real: the booking
   steps. Everywhere else the content is a set, not a sequence.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */
:root {
  /* Paper is tinted toward the pine rather than toward cream — the palette
     stays JananTour's own instead of the default "elegant serif" beige. */
  --paper:      #EDEFE9;
  --paper-sunk: #E4E8E1;
  --paper-lift: #F7F8F4;

  --pine:       #0F2E26;
  --muted:      #55665E;

  --amber:      #C08A24;   /* rules, marks, hairlines — decorative */
  --amber-ink:  #85590A;   /* amber as text, on paper */
  --amber-lt:   #E9BE6B;   /* amber on pine */

  --rule:       rgba(15, 46, 38, .16);
  --rule-soft:  rgba(15, 46, 38, .09);
  --rule-dark:  rgba(233, 190, 107, .24);

  --font-display: "Cormorant Garamond", Cormorant, Georgia, serif;
  --font-body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ar:      "Amiri", "Noto Kufi Arabic", Georgia, serif;

  /* The reference sets display type modestly and lets whitespace do the work. */
  --d-xl: clamp(2.6rem, 5.4vw, 4.6rem);
  --d-l:  clamp(2rem, 3.4vw, 3.1rem);
  --d-m:  clamp(1.5rem, 2.1vw, 2rem);
  --d-s:  clamp(1.25rem, 1.6vw, 1.5rem);

  --label: .68rem;

  --shell:  1240px;
  --gutter: clamp(1.35rem, 5vw, 4rem);
  --pad-y:  clamp(5.5rem, 12vw, 11rem);

  --arch: clamp(120px, 22vw, 250px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--pine);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.78;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
/* height:auto lets aspect-ratio win over the width/height attributes, which the
   markup keeps so the browser can reserve space before the image arrives. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  line-height: 1.16; letter-spacing: -.005em;
}
p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

/* The header is sticky, so anything an anchor jumps to has to clear it. */
[id] { scroll-margin-top: 96px; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--pine); color: var(--paper); font-weight: 500;
  padding: .7rem 1.1rem; transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

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

/* --- layout primitives ---------------------------------------------------- */
.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }

.section { position: relative; padding-block: var(--pad-y); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--flush-top { padding-top: 0; }
.section--dark { background: var(--pine); color: rgba(237, 239, 233, .9); }
.section--mist { background: var(--paper-sunk); }

/* The vertical rail: a section's name set on its side in the outer margin,
   the way the reference labels its chapters. Desktop only — below 1200px
   there is no margin to put it in. */
.rail {
  display: none;
  position: absolute; left: max(1rem, calc((100% - var(--shell)) / 2 - 2.6rem));
  top: var(--pad-y);
  writing-mode: vertical-rl;
  font-size: var(--label); font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
}
.rail::before {
  content: ""; display: block; width: 1px; height: 46px;
  background: var(--amber); margin: 0 auto .9rem;
}
.section--dark .rail { color: rgba(237, 239, 233, .55); }
.section--dark .rail::before { background: var(--amber-lt); }
@media (min-width: 1200px) { .rail { display: block; } }

.section__head { max-width: 56ch; margin-bottom: clamp(2.75rem, 5vw, 4.5rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title { font-size: var(--d-l); margin-block: 1rem 1.2rem; text-wrap: balance; }
.section__title--sm { font-size: var(--d-m); }
.section__lede { color: var(--muted); max-width: 52ch; }
.section__head--center .section__lede { margin-inline: auto; }
.section--dark .section__lede { color: rgba(237, 239, 233, .68); }

.prose { color: var(--muted); max-width: 54ch; }
.section--dark .prose { color: rgba(237, 239, 233, .68); }
.section__lede + .prose, .prose + .prose { margin-top: 1.25rem; }
.section__actions { margin-top: 2.75rem; }

.note { font-size: .84rem; color: var(--muted); max-width: 68ch; }
.note--spaced { margin-top: 2.5rem; }

/* --- the bilingual eyebrow ------------------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: var(--label); font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--muted);
}
.eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--amber); flex: none; }
.eyebrow__ar {
  font-family: var(--font-ar); font-size: .8rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--amber-ink); direction: rtl;
}
.section__head--center .eyebrow { justify-content: center; }

/* Four contexts sit on pine; only one of them is a .section--dark. */
.section--dark .eyebrow,
.hero .eyebrow,
.page-head .eyebrow,
.cta-band .eyebrow { color: rgba(237, 239, 233, .66); }
.section--dark .eyebrow__ar,
.hero .eyebrow__ar,
.page-head .eyebrow__ar,
.cta-band .eyebrow__ar { color: var(--amber-lt); }
.section--dark .eyebrow::before,
.hero .eyebrow::before,
.page-head .eyebrow::before,
.cta-band .eyebrow::before { background: var(--amber-lt); }
.page-head .eyebrow { margin-top: 1.25rem; }

/* Narrow screens can't hold both languages on one line without each of them
   wrapping. Give the Arabic its own row instead, still reading right to left. */
@media (max-width: 620px) {
  .eyebrow { flex-wrap: wrap; row-gap: .35rem; }
  .eyebrow__ar { flex-basis: 100%; text-align: left; }
  .section__head--center .eyebrow__ar { text-align: center; }
}

/* --- buttons -------------------------------------------------------------- */
/* Two registers: a solid button for the money actions, and a rule-and-label
   for everything else, which is how the reference treats every link. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 1.05rem 2rem; border: 1px solid transparent;
  font-family: var(--font-body); font-weight: 500;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), opacity .4s var(--ease);
}
.btn--amber { background: var(--amber-ink); color: #FFF8EA; }
.btn--amber:hover { background: var(--pine); }
.btn--ghost { border-color: var(--rule); color: var(--pine); background: transparent; }
.btn--ghost:hover { border-color: var(--pine); background: var(--pine); color: var(--paper); }
.section--dark .btn--ghost,
.hero .btn--ghost,
.page-head .btn--ghost,
.cta-band .btn--ghost { border-color: var(--rule-dark); color: rgba(237, 239, 233, .92); }
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.page-head .btn--ghost:hover,
.cta-band .btn--ghost:hover { border-color: var(--amber-lt); background: var(--amber-lt); color: var(--pine); }
.btn--sm { padding: .72rem 1.25rem; font-size: .7rem; letter-spacing: .12em; }
.btn--block { width: 100%; }

/* Rule-and-label link. The rule grows on hover — the only motion it needs. */
.link-arrow {
  display: inline-flex; align-items: center; gap: .9rem;
  /* min-height, not padding — clears the 24px minimum tap target without
     pushing the card footers open. */
  min-height: 24px;
  font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--pine);
  transition: color .35s var(--ease);
}
.link-arrow::before {
  content: ""; width: 34px; height: 1px; background: var(--amber); flex: none;
  transition: width .45s var(--ease), background-color .35s var(--ease);
}
.link-arrow:hover { color: var(--amber-ink); }
.link-arrow:hover::before { width: 54px; }
.section--dark .link-arrow { color: rgba(237, 239, 233, .92); }
.section--dark .link-arrow::before { background: var(--amber-lt); }
.section--dark .link-arrow:hover { color: var(--amber-lt); }

/* --- header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(237, 239, 233, .86);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--rule-soft);
  transition: background-color .4s var(--ease);
}
.site-header.is-scrolled { background: rgba(237, 239, 233, .97); }
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 84px; }

.brand { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; margin-right: auto; }
.brand__mark { width: 32px; height: 32px; flex: none; display: block; }
.brand__mark svg { width: 100%; height: 100%; display: block; }
.brand__mark svg g { stroke: var(--amber); }
.brand__name {
  font-family: var(--font-display); font-weight: 500; font-size: 1.5rem;
  letter-spacing: .01em; line-height: 1.1; display: block; color: var(--pine);
}
.brand__name b { color: var(--amber-ink); font-weight: 500; }
.brand__tag {
  display: block; font-family: var(--font-ar); font-size: .58rem;
  letter-spacing: .04em; color: var(--muted); direction: rtl; line-height: 1.5;
}
.site-footer .brand__name { color: var(--paper); }
.site-footer .brand__name b { color: var(--amber-lt); }
.site-footer .brand__tag { color: rgba(237, 239, 233, .6); }
.site-footer .brand__mark svg g { stroke: var(--amber-lt); }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav__link {
  position: relative; text-decoration: none; color: var(--muted);
  font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  padding: .6rem .85rem; transition: color .3s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--pine); }
.nav__link::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .3rem;
  height: 1px; background: var(--amber); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.header__cta { margin-left: .75rem; }

.nav-toggle {
  display: none; position: relative;
  width: 44px; height: 44px; border: 1px solid var(--rule);
  background: transparent; cursor: pointer; padding: 0;
}
/* Each bar is centred on the button and offset from there, so the closed X is
   two strokes crossing at the middle whatever size the button becomes. */
.nav-toggle__bar {
  position: absolute; inset: 0; margin: auto;
  width: 18px; height: 1px; background: var(--pine);
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-toggle__bar:nth-child(1) { transform: translateY(-6px); }
.nav-toggle__bar:nth-child(3) { transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: rotate(-45deg); }

.mobile-menu { display: none; background: var(--paper); border-bottom: 1px solid var(--rule-soft); }
.mobile-menu.is-open { display: block; }
.mobile-menu__list { padding: .5rem 0 1.75rem; }
.mobile-menu__list li { position: relative; }
.mobile-menu__list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.05rem .2rem; color: var(--pine); text-decoration: none;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-display); font-size: 1.35rem;
}
.mobile-menu__ar { font-family: var(--font-ar); font-size: .78rem; color: var(--amber-ink); }
.mobile-menu__list a[aria-current="page"]::before {
  content: ""; position: absolute; left: -.85rem; top: 50%;
  width: 2px; height: 1.2rem; margin-top: -.6rem; background: var(--amber);
}
.mobile-menu .btn { margin-top: 1.5rem; }

@media (max-width: 960px) {
  .nav, .header__cta { display: none; }
  .nav-toggle { display: block; }
  .site-header__inner { min-height: 72px; }
}

/* --- hero ----------------------------------------------------------------- */
.hero { position: relative; background: var(--pine); color: rgba(237, 239, 233, .9); overflow: hidden; }
.hero__glow {
  position: absolute; width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 190, 107, .12), transparent 68%);
  top: -220px; right: -180px; pointer-events: none;
}
.hero__inner {
  position: relative; display: grid; gap: clamp(3rem, 6vw, 5.5rem);
  grid-template-columns: 1.02fr .98fr; align-items: center;
  padding-block: clamp(4rem, 9vw, 8rem);
}
.hero__title {
  font-size: var(--d-xl); margin-block: 1.6rem 1.9rem;
  color: #FCFBF7; text-wrap: balance; font-weight: 300; line-height: 1.08;
}
.hero__title em { font-style: italic; color: var(--amber-lt); }
.hero__lede { color: rgba(237, 239, 233, .7); max-width: 42ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.75rem; }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 1.75rem 3rem;
  margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--rule-dark);
}
.hero__stat strong {
  display: block; font-family: var(--font-display); font-size: 2.1rem;
  font-weight: 300; color: var(--amber-lt); line-height: 1;
}
.hero__stat span {
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(237, 239, 233, .55);
}

/* The arch, from the logo, cropping the picture. */
.arch { border-radius: var(--arch) var(--arch) 0 0; overflow: hidden; }
.hero__media { position: relative; }
.hero__media img { width: 100%; aspect-ratio: 4 / 5.1; object-fit: cover; }
.hero__badge {
  position: absolute; left: -2rem; bottom: 2.5rem;
  background: var(--paper); color: var(--pine);
  padding: 1.35rem 1.6rem; max-width: 16rem;
}
.hero__badge strong { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; }
.hero__badge span { font-size: .82rem; color: var(--muted); line-height: 1.6; display: block; margin-top: .3rem; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .hero__media img { aspect-ratio: 4 / 4.2; }
  /* Floating over a phone-sized photo just hides the car. Let the badge do
     what it already is in the markup — a caption under the picture. */
  .hero__badge {
    position: static; max-width: none; margin-top: 1rem; padding: 1.25rem 0 0;
    background: transparent; border-top: 1px solid var(--rule-dark);
    color: rgba(237, 239, 233, .9);
  }
  .hero__badge span { color: rgba(237, 239, 233, .6); }
}
@media (max-width: 620px) { .hero__actions { display: grid; gap: .85rem; } }

/* --- trust strip ---------------------------------------------------------- */
.trust { background: var(--paper-sunk); padding-block: 1.9rem; border-bottom: 1px solid var(--rule-soft); }
.trust__track {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 1rem 2.75rem;
  font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
}
.trust__item { display: inline-flex; align-items: center; gap: .6rem; color: var(--muted); }
.trust__item svg { flex: none; color: var(--amber); }
@media (max-width: 640px) {
  .trust__track { justify-content: flex-start; gap: .75rem 1.75rem; font-size: .68rem; }
}

/* --- grids ---------------------------------------------------------------- */
.grid { display: grid; gap: clamp(2.5rem, 4.5vw, 4rem); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* --- benefits ------------------------------------------------------------- */
/* No box. A hairline above, the mark, then the text — the card dissolved. */
.benefit { padding-top: 1.75rem; border-top: 1px solid var(--rule); }
.benefit__icon { color: var(--amber-ink); margin-bottom: 1.75rem; display: block; }
.benefit__title { font-size: var(--d-s); margin-bottom: .9rem; }
.benefit__title small {
  display: block; font-family: var(--font-ar); font-size: .76rem; font-weight: 400;
  color: var(--amber-ink); direction: rtl; letter-spacing: 0; margin-top: .5rem;
}
.benefit p { color: var(--muted); font-size: .95rem; }

/* --- service / listing entries -------------------------------------------- */
.svc { display: flex; flex-direction: column; }
.svc__media { position: relative; overflow: hidden; }
.svc__media img {
  width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover;
  transition: transform 1.1s var(--ease), filter .8s var(--ease);
  filter: saturate(.86);
}
.svc:hover .svc__media img { transform: scale(1.035); filter: saturate(1); }
.svc__tag {
  position: absolute; top: 1rem; left: 1rem;
  background: rgba(10, 32, 26, .9); color: var(--amber-lt);
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  padding: .45rem .8rem; backdrop-filter: blur(6px);
}
.svc__body { padding-top: 1.5rem; display: flex; flex-direction: column; flex: 1; gap: .85rem; }
.svc__title { font-size: var(--d-s); }
.svc__title small {
  display: block; font-family: var(--font-ar); font-size: .76rem; font-weight: 400;
  color: var(--amber-ink); direction: rtl; margin-top: .45rem; letter-spacing: 0;
}
.svc__body p { color: var(--muted); font-size: .93rem; }
.svc__meta {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.svc__meta li { display: inline-flex; align-items: center; gap: .45rem; }
.svc__meta li::before { content: ""; width: 4px; height: 4px; background: var(--amber); flex: none; }
/* Stacked, not side by side. Long labels ("Discuss your group") wrap at card
   width while short ones ("See routes") don't, which put the divider rule at
   two different heights across one row. A column is the same height every time. */
.svc__foot {
  margin-top: auto; padding-top: 1.35rem; border-top: 1px solid var(--rule-soft);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem;
}
.svc__price { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; line-height: 1.2; }
.svc__price span {
  display: block; font-family: var(--font-body); font-size: .62rem; font-weight: 400;
  color: var(--muted); text-transform: uppercase; letter-spacing: .16em; margin-top: .2rem;
}

/* A stacked list of rule-and-label links. Distinct from .ticks, whose own
   dash would double up against the one .link-arrow already draws. */
.link-list { display: grid; gap: 1.1rem; justify-items: start; }

/* --- tick lists ----------------------------------------------------------- */
.ticks { display: grid; gap: .75rem; margin-top: 1.75rem; }
.ticks li { display: flex; gap: .85rem; align-items: flex-start; font-size: .92rem; color: var(--muted); }
.ticks li::before { content: ""; flex: none; width: 14px; height: 1px; margin-top: .85rem; background: var(--amber); }
.section--dark .ticks li { color: rgba(237, 239, 233, .72); }

/* --- testimonials & mission pillars --------------------------------------- */
.quote, .pillar { padding-top: 1.75rem; border-top: 1px solid var(--rule-dark); }
.quote { display: flex; flex-direction: column; gap: 1.5rem; }
.quote__stars { color: var(--amber-lt); letter-spacing: .3em; font-size: .78rem; }
.quote__text {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 300;
  line-height: 1.5; color: #FCFBF7; font-style: italic;
}
.quote__who { display: flex; align-items: center; gap: 1rem; margin-top: auto; }
.quote__mono {
  width: 40px; height: 40px; flex: none; border: 1px solid var(--rule-dark);
  display: grid; place-items: center; color: var(--amber-lt);
  font-family: var(--font-display); font-weight: 500; font-size: .9rem;
}
.quote__who strong { display: block; font-size: .9rem; color: #FCFBF7; font-weight: 500; }
.quote__who span { font-size: .74rem; letter-spacing: .06em; color: rgba(237, 239, 233, .55); }
.pillar__title { font-size: var(--d-s); margin-bottom: .9rem; color: #FCFBF7; }
.pillar p { color: rgba(237, 239, 233, .68); font-size: .95rem; }

/* --- split ---------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media img { width: 100%; aspect-ratio: 4 / 3.6; object-fit: cover; filter: saturate(.86); }
.split__media--arch img { aspect-ratio: 4 / 5; border-radius: var(--arch) var(--arch) 0 0; }
@media (min-width: 861px) {
  /* The picture holds while the words move past it. */
  .split { align-items: start; }
  .split__media { position: sticky; top: 120px; }
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

.stat-row { display: flex; flex-wrap: wrap; gap: 2rem 3.25rem; margin-top: 2.75rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.stat-row div strong { display: block; font-family: var(--font-display); font-size: 2.2rem; font-weight: 300; line-height: 1; color: var(--pine); }
.stat-row div span { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.section--dark .stat-row { border-color: var(--rule-dark); }
.section--dark .stat-row div strong { color: var(--amber-lt); }
.section--dark .stat-row div span { color: rgba(237, 239, 233, .55); }

/* --- the route: only where sequence is real -------------------------------- */
.route { position: relative; display: grid; gap: 0; }
.route:not(:first-child) { margin-top: 2.75rem; }
.route::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 1px; background: linear-gradient(180deg, var(--amber), rgba(192, 138, 36, .12));
}
.route__stop { position: relative; padding: 0 0 2.75rem 3.25rem; }
.route__stop:last-child { padding-bottom: 0; }
.route__stop::before {
  content: ""; position: absolute; left: -3px; top: 9px;
  width: 7px; height: 7px; background: var(--amber);
}
.route__num {
  font-family: var(--font-display); font-size: 1.05rem; font-style: italic;
  color: var(--amber-ink); display: block; margin-bottom: .45rem; letter-spacing: .04em;
}
.section--dark .route__num { color: var(--amber-lt); }
.route__title { font-size: var(--d-s); margin-bottom: .6rem; }
.route__stop p { color: var(--muted); max-width: 50ch; font-size: .93rem; }
.section--dark .route__stop p { color: rgba(237, 239, 233, .68); }

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--rule); max-width: 64rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem;
  padding: 1.75rem .25rem; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 400;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 13px; height: 13px; margin-top: .65rem;
  background:
    linear-gradient(var(--amber-ink), var(--amber-ink)) center/13px 1px no-repeat,
    linear-gradient(var(--amber-ink), var(--amber-ink)) center/1px 13px no-repeat;
  transition: transform .4s var(--ease);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq__answer { padding: 0 4rem 2rem .25rem; color: var(--muted); max-width: 66ch; }

/* --- filter bar + listings ------------------------------------------------ */
.filterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 2rem;
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule);
}
.filterbar__btn {
  border: 0; background: transparent; cursor: pointer; padding: .4rem 0;
  font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); position: relative;
  transition: color .3s var(--ease);
}
.filterbar__btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1.5rem; height: 1px;
  background: var(--amber); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.filterbar__btn:hover { color: var(--pine); }
.filterbar__btn[aria-pressed="true"] { color: var(--pine); }
.filterbar__btn[aria-pressed="true"]::after { transform: scaleX(1); }
.filter-count { margin-top: 1.25rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.listing-grid { margin-top: clamp(2.5rem, 4.5vw, 4rem); }
.card--hidden { display: none; }
.no-results { padding: 4rem 0; color: var(--muted); }

/* --- CTA band ------------------------------------------------------------- */
.cta-band {
  position: relative; background: var(--pine); color: rgba(237, 239, 233, .9); overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6rem) clamp(2rem, 6vw, 5rem);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 88% 8%, rgba(233, 190, 107, .16), transparent 58%);
}
.cta-band__inner { position: relative; display: grid; grid-template-columns: 1.4fr .6fr; gap: 2.5rem; align-items: center; }
.cta-band__title { font-size: var(--d-l); color: #FCFBF7; text-wrap: balance; font-weight: 300; margin-top: 1rem; }
.cta-band p { color: rgba(237, 239, 233, .68); margin-top: 1.1rem; max-width: 44ch; }
.cta-band__actions { display: flex; flex-direction: column; gap: .85rem; }
@media (max-width: 800px) { .cta-band__inner { grid-template-columns: 1fr; } }

/* --- interior page head --------------------------------------------------- */
.page-head {
  background: var(--pine); color: rgba(237, 239, 233, .9);
  position: relative; overflow: hidden;
  padding-block: clamp(4rem, 9vw, 7.5rem);
}
.page-head__inner { position: relative; max-width: 56ch; }
.page-head__title { font-size: var(--d-xl); color: #FCFBF7; margin-block: 1.5rem 1.4rem; text-wrap: balance; font-weight: 300; line-height: 1.1; }
.page-head__lede { color: rgba(237, 239, 233, .7); }
.breadcrumb { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(237, 239, 233, .64); }
.breadcrumb a { display: inline-block; padding-block: .35rem; color: var(--amber-lt); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* --- contact -------------------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

.form-card { background: var(--paper-lift); padding: clamp(1.85rem, 3.5vw, 3rem); border: 1px solid var(--rule-soft); }
/* Both contact columns open with an eyebrow and a heading at the same size. */
.contact-layout .section__title { font-size: var(--d-m); margin-bottom: 2rem; }
@media (min-width: 901px) { .contact-aside { padding-top: clamp(1.85rem, 3.5vw, 3rem); } }

.field { display: block; margin-bottom: 1.4rem; }
.field__label {
  display: block; font-size: .66rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .55rem;
}
.field__label span { color: var(--amber-ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: .95rem 0; background: transparent;
  border: 0; border-bottom: 1px solid var(--rule); font-size: .98rem;
  transition: border-color .3s var(--ease);
}
.field select { padding-inline-end: 1rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--amber-ink); outline: none;
}
.field textarea { min-height: 130px; resize: vertical; }
/* The browser default placeholder grey misses contrast on paper. */
.field ::placeholder { color: var(--muted); opacity: 1; }
.field__error { display: none; font-size: .8rem; color: #A6371F; margin-top: .4rem; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #A6371F; }
.field.has-error .field__error { display: block; color: #A6371F; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: .8rem; color: var(--muted); margin-top: 1.25rem; }
.form-success {
  display: none; margin-top: 1.5rem; padding: 1.25rem 1.4rem;
  background: var(--paper-sunk); font-size: .93rem;
}
.form-success.is-visible { display: block; }
.form-success strong { display: block; font-family: var(--font-display); font-size: 1.1rem; margin-bottom: .3rem; }

.info-list { display: grid; gap: 1.75rem; }
.info-item { display: flex; gap: 1.15rem; align-items: flex-start; padding-bottom: 1.75rem; border-bottom: 1px solid var(--rule-soft); }
.info-item:last-child { border-bottom: 0; padding-bottom: 0; }
.info-item__icon { color: var(--amber-ink); flex: none; margin-top: .3rem; }
.info-item strong { display: block; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: .25rem; }
.info-item a, .info-item p { text-decoration: none; font-size: 1.02rem; }
.info-item a { display: block; }
.info-item a:hover { color: var(--amber-ink); }

.map-frame { border: 1px solid var(--rule-soft); line-height: 0; }
.map-frame iframe { width: 100%; height: 440px; border: 0; filter: saturate(.82); }

.socials { display: flex; gap: .5rem; flex-wrap: wrap; }
.social {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--rule); text-decoration: none; color: var(--pine);
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.social:hover { background: var(--pine); color: var(--amber-lt); border-color: var(--pine); }
.site-footer .social { border-color: var(--rule-dark); color: rgba(237, 239, 233, .8); }
.site-footer .social:hover { background: var(--amber-lt); color: var(--pine); border-color: var(--amber-lt); }

/* --- footer --------------------------------------------------------------- */
.site-footer { background: var(--pine); color: rgba(237, 239, 233, .68); padding-block: clamp(4rem, 8vw, 6.5rem) 0; }
.site-footer .brand { margin-right: 0; }
.site-footer .socials { margin-top: 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: 3rem 2.5rem; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__about { max-width: 32ch; font-size: .9rem; margin-top: 1.5rem; }
.footer__title, .block-title {
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 500; font-family: var(--font-body);
}
.footer__title { color: var(--amber-lt); margin-bottom: 1.4rem; }
.block-title { color: var(--muted); margin-block: 3rem 1.25rem; }
/* display:block makes each link's own line-height the target (25.6px, clearing
   the 24px minimum); the gap is trimmed to hold the column's original pitch. */
.footer__list { display: grid; gap: .3rem; font-size: .9rem; }
.footer__list a { display: block; text-decoration: none; transition: color .3s var(--ease); }
.footer__list a:hover { color: var(--amber-lt); }
.footer__bottom {
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-block: 1.75rem;
  border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .74rem; letter-spacing: .1em; color: rgba(237, 239, 233, .64);
}

/* --- floating WhatsApp ---------------------------------------------------- */
.whatsapp-fab {
  position: fixed; right: clamp(1rem, 3vw, 2.25rem); bottom: clamp(1rem, 3vw, 2.25rem); z-index: 90;
  display: inline-flex; align-items: center; gap: .65rem;
  background: var(--pine); color: var(--amber-lt); text-decoration: none;
  padding: .95rem 1.35rem; font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 12px 34px rgba(15, 46, 38, .22);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.whatsapp-fab:hover { background: var(--amber-lt); color: var(--pine); }
@media (max-width: 560px) { .whatsapp-fab span { display: none; } .whatsapp-fab { padding: 1rem; } }

/* --- scroll reveal -------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .split__media { position: static; }
}