/* ==========================================================================
   Darjeeling Car Rental Service — Khangri Karpoo

   White page, near-black text, gold as the accent. Deep green is used
   deliberately and sparingly — the plinth under each route card, the primary
   button — where gold type can sit on it at full contrast.

   Contrast rules that keep this readable:
     · gold (#C1A063) is LINE ONLY on white — 2.4:1, never used for text
     · gold text on white is always --gold-deep (#7C643C, 5.7:1)
     · gold text on deep green is --gold-hi (#E2C795, 10.3:1)
   ========================================================================== */

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

:root {
  /* Text — a green-black, so even the "black" comes out of the logo */
  --ink:          #0B1712;
  --ink-soft:     #33463C;
  --ink-mute:     #66766C;

  /* Surfaces */
  --white:        #FFFFFF;
  --paper:        #FAFAF8;
  --forest:       #0C1C14;   /* card plinth, primary button */

  /* Gold, in its three jobs */
  --gold:         #C1A063;   /* hairlines and rules */
  --gold-hi:      #E2C795;   /* gold text on deep green */
  --gold-deep:    #7C643C;   /* gold text on white */

  /* On dark */
  --bone:         #F8F8F0;
  --sage:         #93A395;

  /* Rules */
  --rule:         rgba(11, 23, 18, 0.12);
  --rule-gold:    rgba(193, 160, 99, 0.42);
  --rule-gold-lo: rgba(193, 160, 99, 0.2);
  --rule-on-dark: rgba(193, 160, 99, 0.26);

  /* Softened corners so nothing reads as a hard-edged box */
  --radius:    12px;
  --radius-sm: 7px;

  /* Type — Spectral is elegant but built for screens, so it stays readable
     at text sizes where a Didone goes spindly. Figtree carries the body on a
     tall x-height. */
  --display: "Spectral", Georgia, "Times New Roman", serif;
  --body:    "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --tibetan: "Noto Serif Tibetan", "Kokonor", "Microsoft Himalaya", var(--display);

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 1.0625rem;
  --fs-md:   clamp(1.125rem, 0.25vw + 1.05rem, 1.25rem);
  --fs-lg:   clamp(1.3rem, 0.5vw + 1.15rem, 1.55rem);
  --fs-xl:   clamp(1.55rem, 1vw + 1.25rem, 2rem);
  --fs-3xl:  clamp(2.05rem, 2.4vw + 1.45rem, 3.1rem);
  --fs-hero: clamp(2.4rem, 5vw, 4.4rem);

  /* Space */
  --gap:      1.5rem;
  --gutter:   clamp(1.25rem, 4vw, 3.5rem);
  --section:  clamp(4.5rem, 9vw, 8rem);
  --maxw:     78rem;
  --header-h: 5.75rem;
  --header-h-sm: 4rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --slide-dur: 6s;
}

/* --- 2. Reset & base --------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-sm) + 1rem);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The header is opaque now, so content starts below it rather than under it.
   The +2px is the gold rule along its bottom edge. */
#main { padding-top: calc(var(--header-h) + 2px); }

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

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--forest);
  color: var(--gold-hi);
  font-family: var(--data);
  font-size: var(--fs-sm);
  transform: translate(-50%, -110%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

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

/* --- 3. Type roles ----------------------------------------------------- */

.display {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.012em;
}

/* Mono is the voice of records: codes, distances, altitudes, seat counts */
.data {
  font-family: var(--data);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--data);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.lede {
  font-size: var(--fs-md);
  color: var(--ink-soft);
  max-width: 50ch;
}

/* --- 4. Layout --------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--paper { background: var(--paper); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head__title { font-size: var(--fs-3xl); }

/* --- 5. The Ridgeline -------------------------------------------------- */
/* One gold hairline, threaded through the site, changing job as it goes.   */

/* 5a. Fret band — the meander from the logo's outer ring, at 1px */
.fret {
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6' viewBox='0 0 24 6'%3E%3Cpath d='M0 5h4V1h6v4h4V1h6v4h4' fill='none' stroke='%237C643C' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  opacity: 0.4;
  pointer-events: none;
}
.fret--on-dark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6' viewBox='0 0 24 6'%3E%3Cpath d='M0 5h4V1h6v4h4V1h6v4h4' fill='none' stroke='%23C1A063' stroke-width='1'/%3E%3C/svg%3E");
  opacity: 0.3;
}

/* 5b. Terrace contours — nested curves echoing the logo's stepped fields.
       These are the "golden curved lines". They replace every <hr> and draw
       themselves in when scrolled into view. */
.terrace {
  display: block;
  width: 100%;
  height: clamp(52px, 7vw, 88px);
  overflow: hidden;
  background: var(--white);
}
.terrace svg { width: 100%; height: 100%; }
.terrace path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.terrace path:nth-child(1) { opacity: 0.85; }
.terrace path:nth-child(2) { opacity: 0.5; }
.terrace path:nth-child(3) { opacity: 0.28; }

.terrace--paper { background: var(--paper); }
.terrace--dark { background: var(--forest); }
.terrace--dark path { stroke: var(--gold); }

.js .terrace--draw path {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
}
.js .terrace--draw.is-visible path {
  transition: stroke-dashoffset 1.6s var(--ease);
  stroke-dashoffset: 0;
}
.js .terrace--draw.is-visible path:nth-child(2) { transition-delay: 0.14s; }
.js .terrace--draw.is-visible path:nth-child(3) { transition-delay: 0.28s; }

/* 5c. Route chain — the operator's own G3>D2 notation, drawn.
       Filled dots are nights in that town. Data, not decoration. */
.route {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.route__node { color: var(--ink); white-space: nowrap; }
.route__seg { display: flex; align-items: center; gap: 0.3rem; flex: 0 1 auto; }
.route__line {
  display: block;
  width: clamp(0.75rem, 2vw, 1.75rem);
  height: 1px;
  background: var(--gold);
  transition: background-color 0.35s var(--ease);
}
.route__nights { display: flex; gap: 0.2rem; }
.route__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-deep);
  transform: scale(0.6);
  transition: transform 0.4s var(--ease);
}
.route__end { color: var(--gold-deep); }

/* --- 6. Buttons -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  font-family: var(--data);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--rule-gold);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: transparent;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease),
              background-color 0.3s var(--ease);
}
.btn:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

/* Primary: deep green with gold type. The one place both brand colours
   carry real weight instead of decorating. */
.btn--gold {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--gold-hi);
}
.btn--gold:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--gold-hi);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn--wide { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--data);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.link-arrow svg {
  width: 1.1em;
  transition: transform 0.3s var(--ease);
}

/* --- 7. Header — white, opaque, sticky -------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--white);
  /* A single straight gold rule. The fret pattern stays in the footer, where
     it can be decorative without competing with the logo. */
  border-bottom: 2px solid var(--gold);
  transition: box-shadow 0.4s var(--ease);
}
.header.is-scrolled { box-shadow: 0 6px 24px -18px rgba(11, 23, 18, 0.35); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  height: var(--header-h);
  transition: height 0.4s var(--ease);
}
.header.is-scrolled .header__inner { height: var(--header-h-sm); }

.brand { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.brand__mark {
  width: auto;
  height: 4.25rem;
  transition: height 0.4s var(--ease);
}
.header.is-scrolled .brand__mark { height: 2.75rem; }

/* Tibetan needs headroom: its glyphs stack vertically below the baseline.
   Sized fluidly rather than hidden — it only comes off on the narrowest
   phones, where the logo alone fills the row. */
.brand__bo {
  font-family: var(--tibetan);
  font-size: clamp(0.8rem, 1vw + 0.45rem, 1.15rem);
  font-weight: 500;
  line-height: 1.9;
  color: var(--gold-deep);
  white-space: nowrap;
  padding-top: 0.15em;
}

.header__contact { display: flex; align-items: center; gap: 0.6rem; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--rule-gold);
  border-radius: var(--radius-sm);
  font-family: var(--data);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease),
              background-color 0.3s var(--ease);
}
.pill:hover {
  border-color: var(--forest);
  background: var(--forest);
  color: var(--gold-hi);
}
.pill svg { width: 1rem; height: 1rem; flex: none; }
.pill__label { text-transform: none; }

/* --- 8. Hero carousel -------------------------------------------------- */

/* Split hero: type left, carousel right. The headline is dark on white rather
   than fighting a photo through a scrim, and the photos display at roughly
   half the width a full-bleed hero would demand. */
.hero { background: var(--white); }

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  /* Generous column gap: the headline sets large, and it needs air between
     its ragged right edge and the hard edge of the photo. */
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.hero__copy {
  max-width: 34ch;
  /* A little more on top of the gap, so the longest line still breathes */
  padding-right: clamp(0rem, 1.5vw, 1.75rem);
}

.hero__media { position: relative; }
.hero__figure { position: relative; }

/* A gold hairline offset behind the photo — gold as line, one detail only */
.hero__figure::before {
  content: "";
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 1px solid var(--rule-gold);
  border-radius: var(--radius);
  z-index: 0;
  pointer-events: none;
}

.hero__frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
}
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }

/* Slow drift, kept to a 6% range so the reset behind the crossfade is invisible */
.hero__slide img { transform: scale(1); }
.hero__slide.is-active img { animation: drift 15s ease-out forwards; }
@keyframes drift {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

.hero__title {
  font-size: var(--fs-hero);
  color: var(--ink);
  margin-block: 1.25rem 1.5rem;
}
.hero__sub {
  font-size: var(--fs-md);
  color: var(--ink-soft);
  max-width: 42ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* The carousel's caption and controls sit with the carousel, not the copy */
.hero__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  margin-top: 1.15rem;
}
.hero__caption {
  font-family: var(--data);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  min-height: 1.5em;
}

/* Progress rules, not dots — you can see how long until it moves */
.hero__nav { display: flex; gap: 0.5rem; flex: none; }
.hero__bar {
  position: relative;
  width: clamp(1.75rem, 4vw, 3rem);
  height: 2px;
  background: rgba(11, 23, 18, 0.14);
  overflow: hidden;
  padding: 0;
  border-radius: 0;
}
.hero__bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--gold-deep);
}
.hero__bar[aria-current="true"]::after {
  animation: fill var(--slide-dur) linear forwards;
}
.hero__bar[aria-current="true"].is-paused::after { animation-play-state: paused; }
@keyframes fill { from { width: 0; } to { width: 100%; } }

/* --- 9. Route cards --------------------------------------------------- */
/* Photo on top, deep-green plinth below carrying gold type. The plinth is
   where the two brand colours get to do real work. */

.grid-routes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule-gold-lo);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}
.card:hover {
  border-color: var(--rule-gold);
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -30px rgba(11, 23, 18, 0.45);
}
.card:hover .card__img img { transform: scale(1.05); }
.card:hover .route__dot { transform: scale(1); }
.card:hover .link-arrow svg { transform: translateX(4px); }

/* Stretched link. The anchor sits on the card title, and its ::after covers
   the whole card — so the photo, the title and "View route" all navigate,
   while screen readers still get one link named by the title. */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.card:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-deep);
}

.card__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper);
}
.card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.card__code {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.32rem 0.62rem;
  border-radius: var(--radius-sm);
  background: var(--forest);
  color: var(--gold-hi);
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.4rem 1.4rem 1.5rem;
  flex: 1;
  background: var(--forest);
}
.card__title { font-size: var(--fs-lg); color: var(--gold-hi); }
.card__summary {
  font-size: 0.9375rem;
  color: rgba(248, 248, 240, 0.74);
  flex: 1;
}
.card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule-on-dark);
}
/* With prices hidden, duration is the scannable figure — it gets the weight */
.card__duration {
  font-family: var(--data);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  color: var(--gold);
  font-weight: 500;
}
/* The route chain sits on the plinth, so it flips to its on-dark colours */
.card__body .route { color: var(--sage); }
.card__body .route__node { color: var(--bone); }
.card__body .route__dot { background: var(--gold); }
.card__body .route__end { color: var(--gold); }
.card__body .link-arrow { color: var(--gold); }

/* --- 10. Fleet turntable ---------------------------------------------- */

.fleet__stage {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 2rem);
}

/* The viewport carries the exact aspect of the normalised 900x520 vehicle PNG
   and is centred by margin. The cars then simply fill it, so there is no
   positioning arithmetic to get wrong and nothing can drift off-centre. */
.fleet__viewport {
  position: relative;
  width: min(90%, 40rem);
  margin-inline: auto;
  aspect-ratio: 900 / 520;
  perspective: 1400px;
}
/* The vehicles are white PNGs. On flat white the bodywork disappears, so a
   faint green haze gives it an edge without darkening the section. */
.fleet__viewport::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  background: radial-gradient(56% 50% at 50% 60%,
              rgba(12, 28, 20, 0.1),
              rgba(12, 28, 20, 0.03) 55%,
              rgba(12, 28, 20, 0) 78%);
  pointer-events: none;
}

.fleet__ground,
.fleet__car {
  position: absolute;
  inset: 0;
}
.fleet__ground { pointer-events: none; }

/* The Ridgeline again — now the ellipse the vehicle stands on. The wheels sit
   at 93% of the PNG canvas, so its centre goes at 7% from the bottom. */
.fleet__ellipse {
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: 64%;
  aspect-ratio: 6 / 1;
  transform: translate(-50%, 50%);
  border: 1px solid var(--rule-gold);
  border-radius: 50%;
}
.fleet__ellipse::after {
  content: "";
  position: absolute;
  inset: -8% 5%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
              rgba(193, 160, 99, 0.22), rgba(193, 160, 99, 0) 70%);
}

.fleet__car {
  opacity: 0;
  transform: translateX(12%) rotateY(20deg) scale(0.95);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: transform, opacity;
}
.fleet__car img { width: 100%; height: 100%; object-fit: contain; }
.fleet__car.is-active { opacity: 1; transform: translateX(0) rotateY(0) scale(1); }
.fleet__car.is-leaving { opacity: 0; transform: translateX(-12%) rotateY(-20deg) scale(0.95); }

/* Going backwards turns the other way, or the turntable feels broken */
.fleet--rev .fleet__car { transform: translateX(-12%) rotateY(-20deg) scale(0.95); }
.fleet--rev .fleet__car.is-active { transform: translateX(0) rotateY(0) scale(1); }
.fleet--rev .fleet__car.is-leaving { transform: translateX(12%) rotateY(20deg) scale(0.95); }

.fleet__arrow {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--rule-gold);
  border-radius: 50%;
  color: var(--gold-deep);
  background: var(--white);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease),
              background-color 0.3s var(--ease);
}
.fleet__arrow:hover {
  border-color: var(--forest);
  background: var(--forest);
  color: var(--gold-hi);
}
.fleet__arrow svg { width: 1.1rem; }

.fleet__caption {
  margin-top: 1.1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}
.fleet__name { font-size: var(--fs-xl); color: var(--ink); }
.fleet__specs {
  font-family: var(--data);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.fleet__specs b { color: var(--gold-deep); font-weight: 500; }

.fleet__dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
}
.fleet__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  transition: background-color 0.3s var(--ease);
}
.fleet__dot[aria-current="true"] { background: var(--gold-deep); }

/* --- 11. Enquiry ------------------------------------------------------- */

.enquiry__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field__label {
  font-family: var(--data);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-base);
  transition: border-color 0.25s var(--ease);
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--rule-gold); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--gold-deep); outline-offset: 1px; }
.field textarea { resize: vertical; min-height: 5.5rem; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237C643C' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
}
.field--error input,
.field--error select { border-color: #A8442A; }
.field__error {
  font-family: var(--data);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: #A8442A;
  min-height: 1.2em;
}

.form__rows { display: grid; gap: 1.1rem; }
.form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form__note {
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  margin-top: 0.25rem;
}

.contact-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--rule-gold-lo);
  background: var(--paper);
  overflow: hidden;
}
/* The endless knot from the logo, as a watermark and nothing more */
.contact-rail__knot {
  position: absolute;
  right: -2.5rem;
  bottom: -2.5rem;
  width: 13rem;
  color: var(--gold-deep);
  opacity: 0.1;
  pointer-events: none;
}
.contact-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--rule);
}
.contact-row:last-of-type { border-bottom: 0; }
.contact-row svg { width: 1.15rem; flex: none; color: var(--gold-deep); }
.contact-row__label {
  font-family: var(--data);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: block;
}
.contact-row__value { font-size: var(--fs-base); color: var(--ink); }
a.contact-row:hover .contact-row__value { color: var(--gold-deep); }

/* --- 12. Footer -------------------------------------------------------- */

/* Deep green anchors the bottom of an otherwise white page, and gives the
   gold type somewhere to sit at full strength. */
.footer { background: var(--forest); }
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-block: 2.75rem;
}
.footer__mark { height: clamp(5rem, 9vw, 7.5rem); width: auto; }
.footer__nav {
  display: flex;
  gap: 1.75rem;
  font-family: var(--data);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer__nav a { color: var(--gold-hi); transition: color 0.25s var(--ease); }
.footer__nav a:hover { color: var(--bone); }
.footer__legal {
  font-family: var(--data);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-align: right;
  line-height: 1.9;
}
/* Build credit — quiet, but a real link */
.footer__credit a {
  color: var(--gold-hi);
  text-decoration: underline;
  text-decoration-color: var(--rule-on-dark);
  text-underline-offset: 0.25em;
  transition: color 0.25s var(--ease), text-decoration-color 0.25s var(--ease);
}
.footer__credit a:hover {
  color: var(--bone);
  text-decoration-color: var(--bone);
}

/* --- 13. Mobile contact bar ------------------------------------------- */
/* For a taxi business this is the highest-value element on the site.      */

.mobile-bar {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 100;
  grid-template-columns: 1fr 1fr;
  background: var(--forest);
  border-top: 1px solid var(--rule-on-dark);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem 0.5rem;
  font-family: var(--data);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mobile-bar svg { width: 1.1rem; flex: none; }
.mobile-bar__wa { background: var(--gold); color: var(--ink); font-weight: 500; }
.mobile-bar__call { color: var(--gold-hi); }

/* --- 14. Itinerary page ----------------------------------------------- */

.it-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(64svh, 30rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--forest);
}
.it-hero__img { position: absolute; inset: 0; z-index: -2; }
.it-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.it-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(11, 23, 18, 0.95) 3%, rgba(11, 23, 18, 0.62) 45%, rgba(11, 23, 18, 0.28) 100%),
    linear-gradient(to right, rgba(11, 23, 18, 0.68) 0%, rgba(11, 23, 18, 0.08) 60%);
}
.it-hero__body { width: 100%; padding-block: 3.5rem 2.75rem; }
.it-hero__title {
  font-size: var(--fs-3xl);
  color: var(--bone);
  max-width: 24ch;
  margin-block: 0.85rem 1rem;
}
.it-hero__code {
  font-family: var(--data);
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  color: var(--gold-hi);
}
.it-hero__duration {
  font-family: var(--data);
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.86;
}
.it-hero__route { margin-block: 1.35rem 1.85rem; color: var(--sage); }
.it-hero__route .route__node { color: var(--bone); }
.it-hero__route .route__dot { background: var(--gold); transform: scale(1); }
.it-hero__route .route__end { color: var(--gold); }
.it-hero .btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 500;
}
.it-hero .btn--gold:hover { background: var(--gold-hi); border-color: var(--gold-hi); }

/* Breadcrumb — wayfinding, and it backs the BreadcrumbList schema that
   Google renders beneath the search result. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-family: var(--data);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
}
.crumbs a { transition: color 0.25s var(--ease); }
.crumbs a:hover { color: var(--gold-hi); }
.crumbs span[aria-hidden] { color: var(--gold); opacity: 0.65; }
.crumbs [aria-current="page"] { color: var(--gold-hi); }

.notfound { padding-block: clamp(5rem, 12vw, 9rem); }
.notfound__title {
  font-size: var(--fs-3xl);
  margin-block: 1rem 1.25rem;
  max-width: 18ch;
}
.notfound .hero__actions { margin-top: 2rem; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--data);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 1.25rem;
  transition: color 0.25s var(--ease);
}
.back-link:hover { color: var(--gold-hi); }
.back-link svg { width: 1rem; }

/* 14a. The day accordion — the Ridgeline turned vertical.
        Left: days. Right: the image for whichever day is open. */
.days {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.days__list { position: relative; }

.day { position: relative; padding-left: 2.75rem; }
/* The spine: one continuous gold rail, one node per day */
.day::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule-gold);
}
.day:first-child::before { top: 1.9rem; }
.day:last-child::before { bottom: auto; height: 1.9rem; }

.day__node {
  position: absolute;
  left: 0;
  top: 1.6rem;
  width: 13px;
  height: 13px;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  background: var(--white);
  transition: background-color 0.35s var(--ease);
}
.day.is-open .day__node { background: var(--gold-deep); }

.day__toggle {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  padding-block: 1.4rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}
.day__num {
  font-family: var(--data);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--gold-deep);
  flex: none;
  padding-top: 0.35em;
}
.day__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: 1.24;
  color: var(--ink-mute);
  flex: 1;
  transition: color 0.3s var(--ease);
}
.day.is-open .day__title,
.day__toggle:hover .day__title { color: var(--ink); }

.day__chev {
  flex: none;
  width: 0.9rem;
  color: var(--gold-deep);
  transition: transform 0.35s var(--ease);
  align-self: center;
}
.day.is-open .day__chev { transform: rotate(180deg); }

.day__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
  overflow: hidden;
}
.day.is-open .day__panel { grid-template-rows: 1fr; }
.day__panel > div { overflow: hidden; min-height: 0; }

.day__copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block: 1.5rem 1.75rem;
}
.day__copy p { color: var(--ink-soft); max-width: 62ch; }

/* Facts sit apart from the prose — they are records, not sales copy */
.day__facts {
  font-family: var(--data);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule-gold-lo);
}

.day__inline-img { display: none; }

.days__panel { position: sticky; top: calc(var(--header-h-sm) + 2rem); }
.days__figure { margin: 0; }
.days__frame {
  position: relative;
  /* 4:3 rather than portrait: the photography is landscape, and a portrait
     crop cut the sides off wide shots like Tsomgo (16:9). */
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rule-gold-lo);
  background: var(--paper);
}
.days__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.days__frame img.is-active { opacity: 1; }
.days__caption {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--data);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* 14b. Places, inclusions, vehicle */
.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.chip {
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--rule-gold);
  border-radius: 999px;
  font-family: var(--data);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.incl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.incl__title {
  font-family: var(--data);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.1rem;
}
.incl ul { display: flex; flex-direction: column; gap: 0.7rem; }
.incl li {
  display: flex;
  gap: 0.7rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.incl li::before { content: "✓"; color: var(--gold-deep); flex: none; font-size: 0.9em; }
.incl__list--no li::before { content: "—"; opacity: 0.6; }

.vehicle-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.vehicle-note__label {
  font-family: var(--data);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.vehicle-note__value { color: var(--ink-soft); }

.it-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.it-cta__text { color: var(--ink-soft); font-size: var(--fs-md); }

/* --- 15. Reveal on scroll --------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal:nth-child(2) { transition-delay: 0.07s; }
.js .reveal:nth-child(3) { transition-delay: 0.14s; }

/* --- 16. Responsive --------------------------------------------------- */

@media (max-width: 1020px) {
  .grid-routes { grid-template-columns: repeat(2, 1fr); }
  .enquiry__grid { grid-template-columns: 1fr; }
}

/* The phone number label goes first — it frees the most width and the icon
   still reads as "call". */
@media (max-width: 1080px) {
  .pill__label { display: none; }
  .pill { padding: 0.55rem; }
}

@media (max-width: 900px) {
  :root { --header-h: 4.75rem; }
  .brand__mark { height: 3.25rem; }
  .header.is-scrolled .brand__mark { height: 2.5rem; }

  /* Copy above the carousel — the headline should land first on a phone */
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__copy { max-width: 46ch; }
  .hero__frame { aspect-ratio: 3 / 2; }
}

/* Two columns collapse and the image moves inside the open day.
   No side panel, no cramming — the accordion works exactly the same way. */
@media (max-width: 820px) {
  .days { grid-template-columns: 1fr; }
  .days__panel { display: none; }
  .day__inline-img { display: block; }
  .day__inline-img img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border: 1px solid var(--rule-gold-lo);
    border-radius: var(--radius);
  }
  .day__inline-caption {
    display: block;
    margin-top: 0.7rem;
    font-family: var(--data);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-deep);
  }
}

@media (max-width: 720px) {
  .mobile-bar { display: grid; }
  body { padding-bottom: 3.75rem; }
  .header__contact { display: none; }
  /* The offset hairline hangs past the right edge — drop it on narrow screens */
  .hero__figure::before { display: none; }
  .hero__foot { flex-wrap: wrap; gap: 0.75rem 1.25rem; }
  .incl { grid-template-columns: 1fr; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__legal { text-align: left; }
  .fleet__stage { grid-template-columns: 1fr; }
  .fleet__arrow { position: absolute; top: 40%; z-index: 2; }
  .fleet__arrow--prev { left: 0; }
  .fleet__arrow--next { right: 0; }
}

@media (max-width: 600px) {
  .grid-routes { grid-template-columns: 1fr; }
  .form__pair { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
}

/* On a phone the contact pills are gone, so the row is just logo + name and
   there is room. It wraps at the tsheg marks rather than overflowing, and the
   header grows to fit instead of clipping. */
@media (max-width: 560px) {
  .header__inner {
    height: auto;
    min-height: var(--header-h);
    padding-block: 0.5rem;
  }
  .header.is-scrolled .header__inner {
    height: auto;
    min-height: var(--header-h-sm);
  }
  .brand__bo {
    font-size: 0.78rem;
    line-height: 1.75;
    white-space: normal;
  }
}

@media (max-width: 380px) {
  .day { padding-left: 2.25rem; }
}

/* --- 17. Reduced motion ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero__slide.is-active img { animation: none; transform: none; }
  .js .reveal { opacity: 1; transform: none; }
  .js .terrace--draw path { stroke-dashoffset: 0; }
}

@media print {
  .header, .mobile-bar, .hero__nav, .fleet__arrow { display: none; }
  body { background: #fff; color: #000; }
  .day__panel { grid-template-rows: 1fr; }
  .card__body { background: #fff; }
  .card__title, .card__summary { color: #000; }
  .footer { background: #fff; }
  .footer__nav a, .footer__legal, .footer__credit a { color: #000; }
}