/* ================================================================
   1ON1 DOG RETREAT, 1on1dogretreat.ch
   Theme: locked dark. "Black and Tan": the resident Dachshund's
   coat as the brand system. Off-black canvas, bone type, one tan
   accent. Single family: Archivo variable (width axis = display).
   Radius system: 2px everywhere.
================================================================ */

:root {
  --canvas:    #0f0d0a;
  --surface:   #16130f;
  --elev:      #1d1914;
  --hairline:  #2b261f;
  --hairline2: #3a332a;
  --bone:      #ece4d6;
  --body:      #c6bcaa;
  --muted:     #9a8f7c;
  --tan:       #cf9455;
  --tan-deep:  #b57a3e;
  --on-tan:    #171007;
  --error:     #d98a74;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(6.5rem, 12vw, 11rem);
  --container: 1240px;
  --radius: 2px;

  --z-header: 40;
  --z-menu: 50;
  --z-modal: 60;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.04rem;
  line-height: 1.68;
  color: var(--body);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* display voice: wide Archivo, controlled weight */
h1, h2, h3 { color: var(--bone); margin: 0 0 1.1rem; text-wrap: balance; }
.display {
  font-weight: 620;
  font-stretch: 118%;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.02;
}
.title {
  font-weight: 560;
  font-stretch: 108%;
  letter-spacing: 0.005em;
  line-height: 1.12;
}

p { margin: 0 0 1.1rem; max-width: 66ch; text-wrap: pretty; }
a { color: var(--tan); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bone); }
strong { color: var(--bone); font-weight: 600; }

:focus-visible { outline: 2px solid var(--tan); outline-offset: 3px; border-radius: var(--radius); }
::selection { background: var(--tan); color: var(--on-tan); }

.container { width: min(var(--container), calc(100% - clamp(2.4rem, 6vw, 5rem))); margin-inline: auto; }
section { scroll-margin-top: 5rem; }

/* photography grade: one treatment site-wide */
.grade { filter: saturate(0.82) contrast(1.06) sepia(0.12) brightness(0.94); }

/* ----------------------------------------------------------------
   Buttons: one intent, one label. Tan = convert. Ghost = explore.
---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 640;
  font-stretch: 110%;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 1.02rem 1.9rem;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.2s var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-tan { background: var(--tan); color: var(--on-tan); }
.btn-tan:hover { background: var(--bone); color: var(--on-tan); }
.btn-ghost { background: transparent; color: var(--bone); border-color: var(--hairline2); }
.btn-ghost:hover { border-color: var(--tan); color: var(--tan); }

/* ----------------------------------------------------------------
   Header: split minimal nav, 68px
---------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.site-header.is-solid {
  background: color-mix(in oklab, var(--canvas) 94%, transparent);
  box-shadow: 0 1px 0 var(--hairline);
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 68px; }
.brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; }
.brand .seal { flex: none; }
.brand .name {
  font-size: 0.92rem;
  font-weight: 640;
  font-stretch: 118%;
  letter-spacing: 0.18em;
  color: var(--bone);
  text-transform: uppercase;
  white-space: nowrap;
}
.main-nav { display: flex; align-items: center; gap: clamp(1.1rem, 1.8vw, 2rem); }
/* Labels must not break mid-phrase when the nav grows; "The Ground" wrapping
   to two lines made the whole header look broken. */
.main-nav a { white-space: nowrap; }
.main-nav a:not(.btn) {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--body);
  text-decoration: none;
  transition: color 0.2s;
}
.main-nav a:not(.btn):hover { color: var(--bone); }
.main-nav .btn { padding: 0.6rem 1.15rem; font-size: 0.78rem; }

.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; color: var(--bone); min-width: 44px; min-height: 44px; }
.menu-toggle svg { display: block; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--canvas);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem clamp(2rem, 8vw, 4rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu a {
  font-weight: 620;
  font-stretch: 116%;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 6.5vw, 2.5rem);
  letter-spacing: 0.02em;
  color: var(--bone);
  text-decoration: none;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hairline);
}
.mobile-menu a:hover { color: var(--tan); }
.menu-close { position: absolute; top: 1.3rem; right: 1.5rem; background: none; border: none; color: var(--bone); cursor: pointer; padding: 0.5rem; }

/* ----------------------------------------------------------------
   THE FILM: A Night in Residence
   One continuous dusk-to-dawn shot, scrubbed by scroll (GSAP+Lenis).
   Without JS, or with reduced motion, the same markup reads as a
   stacked editorial timeline: nothing hidden, nothing broken.
---------------------------------------------------------------- */
:root { --gutter: max(calc((100vw - var(--container)) / 2), clamp(1.2rem, 3vw, 2.5rem)); }
html.film-live { scroll-behavior: auto; } /* Lenis owns scrolling */

.film { position: relative; background: linear-gradient(180deg, #17130e 0%, var(--canvas) 60%); }
.film-pad { padding-inline: var(--gutter); }

.scene-hero {
  position: relative;
  z-index: 5;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 8rem;
  padding-bottom: clamp(3.2rem, 8vh, 6rem);
}
.scene-hero h1 { font-size: clamp(2.3rem, 6.4vw, 5.4rem); margin: 0 0 1.4rem; }
.scene-hero h1 .l { display: block; }
.scene-hero h1 .accent { color: var(--tan); }
.hero-sub {
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  color: var(--body);
  max-width: 40rem;
  margin-bottom: 0.9rem;
}
.hero-region {
  font-size: clamp(0.82rem, 1.05vw, 0.92rem);
  color: var(--muted);
  max-width: 42rem;
  line-height: 1.5;
  margin: 0 0 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.2rem; }
.hero-assurance {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: 0.4rem 0; margin: 1.7rem 0 0; padding: 0;
  font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--body); font-weight: 640;
}
.hero-assurance li { display: flex; align-items: center; }
.hero-assurance li:not(:last-child)::after { content: "\2022"; color: var(--tan); margin: 0 0.85rem; }

/* ambient hero footage (Higgsfield Seedance): sits under the glows,
   graded to the brand; poster-only without JS or with reduced motion */
.scene-video {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 100vh;
  width: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.55;
  filter: saturate(0.82) contrast(1.06) sepia(0.12) brightness(0.9);
}

/* light story: dusk glow -> night veil -> dawn glow */
.dusk-glow, .night-veil, .dawn-glow {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 100vh;
  pointer-events: none;
}
.dusk-glow { z-index: 1; background: radial-gradient(90% 55% at 50% 100%, rgba(207, 148, 85, 0.20), transparent 70%); }
.dawn-glow {
  z-index: 1;
  opacity: 0;
  background:
    radial-gradient(85% 60% at 50% 100%, rgba(236, 228, 214, 0.12), transparent 72%),
    radial-gradient(55% 38% at 50% 100%, rgba(207, 148, 85, 0.30), transparent 70%);
}
.night-veil { z-index: 3; opacity: 0; background: #060504; }

.film-kicker {
  position: relative;
  z-index: 2;
  margin: 0;
  padding-block: clamp(2.4rem, 6vw, 4rem) 0;
  color: var(--muted);
  font-size: 1rem;
  letter-spacing: 0.06em;
}

.chapter {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 56ch);
  justify-content: center;
  text-align: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.chapter + .chapter { border-top: 1px solid var(--hairline); }
.ch-media { margin: 0; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 10; }
.ch-media img { width: 100%; height: 100%; object-fit: cover; }
.ch-time {
  display: block;
  font-weight: 640;
  font-stretch: 62%;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1;
  color: var(--tan);
  letter-spacing: 0.03em;
  margin-bottom: 0.7rem;
}
.ch-copy h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin-bottom: 0.8rem; }
.ch-copy p { color: var(--body); max-width: 44ch; margin: 0 auto; }
.chapter--menu, .chapter--dark { grid-template-columns: 1fr; text-align: center; }
.chapter--menu .ch-copy p, .chapter--dark .ch-copy p { margin-inline: auto; }
.menu-lines { list-style: none; margin: 1.7rem auto 0; padding: 0; max-width: 30rem; }
.menu-lines li {
  padding: 0.9rem 0;
  border-top: 1px solid var(--hairline2);
  color: var(--bone);
  font-size: 1.04rem;
  letter-spacing: 0.04em;
}
.menu-lines li:last-child { border-bottom: 1px solid var(--hairline2); }
.chapter--dark { z-index: 4; }
.chapter--dark .ch-copy h2 {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  color: color-mix(in oklab, var(--bone) 72%, transparent);
}
.film-clock { display: none; }

/* live film mode (class set by JS only when motion is allowed) */
.film-live .film-track { height: 780vh; }
.film-live .film-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.film-live .scene-hero { position: absolute; inset: 0; padding-top: 0; }
.film-live .film-kicker {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 0;
  opacity: 0;
  text-align: center;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--bone);
}
.film-live .chapter {
  position: absolute; inset: 0;
  padding-block: 0;
  padding-top: 3.5rem;
  border-top: 0;
  opacity: 0;
  visibility: hidden;
  place-items: center;
  will-change: opacity;
}
.film-live .ch-media { aspect-ratio: auto; height: min(58vh, 34rem); }
.film-live .ch-time { display: none; } /* the big clock tells the time */
.film-live .chapter--menu, .film-live .chapter--dark { place-items: center; }
.film-live .film-clock {
  display: block;
  position: absolute;
  z-index: 4;
  top: 4.9rem;
  right: var(--gutter);
  font-weight: 640;
  font-stretch: 62%;
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.4rem, 8vw, 7rem);
  line-height: 1;
  color: var(--tan);
  letter-spacing: 0.02em;
  opacity: 0;
}

@media (max-width: 760px) {
  .chapter { grid-template-columns: 1fr; }
  .film-live .chapter { align-content: center; padding-top: 6.8rem; gap: 1.4rem; }
  .film-live .ch-media { height: 34vh; }
  .film-live .film-clock { top: 4.4rem; font-size: clamp(2.4rem, 12vw, 3.2rem); }
}

@media (prefers-reduced-motion: no-preference) {
  .scene-hero h1 .l { animation: rise 0.95s var(--ease) both; }
  .scene-hero h1 .l:nth-child(2) { animation-delay: 0.1s; }
  .scene-hero .hero-sub { animation: rise 0.95s var(--ease) 0.22s both; }
  .scene-hero .hero-actions { animation: rise 0.95s var(--ease) 0.34s both; }
  @keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
}

/* ----------------------------------------------------------------
   Manifesto: scrub-revealed statement (GSAP; static without JS)
---------------------------------------------------------------- */
.manifesto { padding: var(--pad) 0; }
.manifesto p {
  font-size: clamp(1.45rem, 3.1vw, 2.5rem);
  font-weight: 480;
  font-stretch: 104%;
  line-height: 1.42;
  color: var(--bone);
  max-width: 21em;
  margin: 0;
}
.manifesto .w { display: inline; }
.manifesto .em { color: var(--tan); }
.paw-trail { display: flex; align-items: center; gap: 0.75rem; color: var(--tan); margin-bottom: 1.8rem; }
.paw-trail svg { width: 1.35rem; height: 1.35rem; opacity: 0.5; transform: rotate(12deg); }
.paw-trail svg:nth-child(even) { transform: rotate(12deg) translateY(0.5rem); }
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .paw-trail svg { opacity: 0; }
  .js-reveal .paw-trail.in svg { animation: paw-step 0.5s var(--ease) forwards; }
  .js-reveal .paw-trail.in svg:nth-child(2) { animation-delay: 0.13s; }
  .js-reveal .paw-trail.in svg:nth-child(3) { animation-delay: 0.26s; }
  .js-reveal .paw-trail.in svg:nth-child(4) { animation-delay: 0.39s; }
  @keyframes paw-step { from { opacity: 0; transform: rotate(12deg) translateY(1rem) scale(0.85); } to { opacity: 0.5; } }
  @keyframes paw-step-even { from { opacity: 0; transform: rotate(12deg) translateY(1.5rem) scale(0.85); } to { opacity: 0.5; transform: rotate(12deg) translateY(0.5rem); } }
  .js-reveal .paw-trail.in svg:nth-child(even) { animation-name: paw-step-even; }
}

/* ----------------------------------------------------------------
   House rules: gapless bento, 6 interlocking cells
---------------------------------------------------------------- */
.rules { padding-bottom: var(--pad); }
.rules h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); margin-bottom: 2.6rem; }
.rules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  gap: 10px;
}
.cell {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.cell-rule {
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.2rem;
  min-height: 15rem;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.cell-rule:hover { border-color: var(--hairline2); background: var(--elev); }
.cell-rule h3 {
  font-weight: 620;
  font-stretch: 114%;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  letter-spacing: 0.02em;
  margin: 0;
}
.cell-rule h3 span { color: var(--tan); }
.cell-rule p { margin: 0; font-size: 0.99rem; color: var(--body); max-width: 46ch; }
.cell-img { min-height: 15rem; }
.cell-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.cell-img:hover img { transform: scale(1.04); }
.cell-tall { grid-row: span 2; }
.cell-wide { grid-column: span 2; min-height: 0; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 2.5rem; flex-wrap: wrap; }
@media (max-width: 640px) { .cell-wide { grid-column: auto; flex-direction: column; align-items: stretch; gap: 2.2rem; } }

/* ----------------------------------------------------------------
   The care: service pillars (USPs)
---------------------------------------------------------------- */
.care { padding-bottom: var(--pad); }
.care-head { max-width: 48rem; margin-bottom: 2.8rem; }
.care h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.care-head p { color: var(--body); margin: 0; }
.care-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pillar {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.pillar:hover { border-color: var(--hairline2); transform: translateY(-3px); }
.pillar-ico { width: 2.15rem; height: 2.15rem; color: var(--tan); margin-bottom: 0.3rem; }
.pillar-ico svg { width: 100%; height: 100%; display: block; }
.pillar h3 {
  font-weight: 620;
  font-stretch: 114%;
  text-transform: uppercase;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  letter-spacing: 0.02em;
  margin: 0;
}
.pillar p { margin: 0; font-size: 0.95rem; color: var(--body); }
@media (max-width: 900px) { .care-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .care-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------
   Who we look after: client personas
---------------------------------------------------------------- */
.clients { padding-bottom: var(--pad); }
.clients-head { max-width: 46rem; margin-bottom: 2.6rem; }
.clients h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.clients-head p { color: var(--body); margin: 0; }
.clients-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.client { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(1.5rem, 2.6vw, 2.1rem); }
.client-n { display:block; font-weight:640; font-stretch:62%; font-variant-numeric:tabular-nums; font-size:1.5rem; color:var(--tan); margin-bottom:0.7rem; }
.client h3 { font-weight:620; font-stretch:114%; text-transform:uppercase; font-size:clamp(1.05rem,1.5vw,1.3rem); letter-spacing:0.02em; margin:0 0 0.5rem; }
.client p { margin:0; font-size:0.95rem; color:var(--body); }
.clients-close { margin: 2.4rem 0 0; max-width: 60rem; font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--bone); line-height:1.5; }
@media (max-width: 820px) { .clients-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------
   Aja + the household
---------------------------------------------------------------- */
.household { padding: var(--pad) 0; }
.household-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.household-lede { color: var(--muted); font-size: 1rem; margin: 0.9rem 0 0; max-width: 22ch; }
.household-figure { position: relative; }
.household-figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 35%; border-radius: var(--radius); }
.household-figure figcaption { margin-top: 0.8rem; font-size: 0.85rem; color: var(--muted); }
.household h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); max-width: 14ch; }
.household-copy p strong { color: var(--bone); }
.vows { margin: 2.1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.vows li { padding: 0.95rem 0; border-top: 1px solid var(--hairline); font-size: 0.98rem; color: var(--body); }
.vows li:last-child { border-bottom: 1px solid var(--hairline); }
.vows strong { color: var(--bone); font-weight: 600; }

/* ----------------------------------------------------------------
   Expeditions: the Jura route atlas
   Seven scouted loops drawn as animated highlighted lines with a
   travelling GPS dot; facts + stylised elevation per route; each
   links out to its pre-drawn live map (Komoot / SchweizMobil /
   Outdooractive).
---------------------------------------------------------------- */
.expeditions { padding: var(--pad) 0; background: var(--surface); border-block: 1px solid var(--hairline); }
.exped-head { max-width: 50rem; margin-bottom: 2.8rem; }
.expeditions h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.exped-head p { color: var(--body); margin: 0; }
.exped-atlas { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.route-list { display: flex; flex-direction: column; border-top: 1px solid var(--hairline2); }
.route-row {
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hairline2);
  border-radius: 0;
  padding: 1.05rem 0.4rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font);
  transition: background-color 0.2s, padding-left 0.25s var(--ease);
}
.route-row .route-name { font-weight: 600; font-stretch: 106%; color: var(--bone); font-size: 1.02rem; letter-spacing: 0.01em; }
.route-row .route-meta { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.route-row:hover { background: var(--elev); padding-left: 0.8rem; }
.route-row.is-active { padding-left: 0.8rem; background: var(--elev); }
.route-row.is-active .route-name { color: var(--tan); }
.route-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
.route-canvas svg { width: 100%; height: auto; display: block; }
.contours ellipse { fill: none; stroke: var(--hairline); stroke-width: 1; }
.route-path {
  fill: none;
  stroke: var(--tan);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}
.route-path.is-active {
  opacity: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: route-draw 2.4s var(--ease) forwards;
}
@keyframes route-draw { to { stroke-dashoffset: 0; } }
.start-ring { fill: none; stroke: var(--tan); stroke-width: 1.5; opacity: 0.9; }
.gps-dot { fill: var(--bone); }
.route-facts h3 { font-weight: 620; font-stretch: 114%; text-transform: uppercase; font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: 0.02em; margin: 0 0 0.6rem; }
.route-line { color: var(--body); font-size: 0.97rem; margin: 0; }
.route-stats { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; margin: 1.3rem 0 0; }
.route-stats div { min-width: 0; }
.route-stats div { display: flex; flex-direction: column; gap: 0.15rem; }
.route-stats dt { font-size: 0.7rem; font-weight: 640; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.route-stats dd { margin: 0; color: var(--bone); font-weight: 600; font-variant-numeric: tabular-nums; }
.route-profile { width: 100%; height: 44px; margin-top: 1.1rem; }
.route-profile polyline { fill: none; stroke: var(--tan); stroke-width: 2; opacity: 0.85; }
.route-profile line { stroke: var(--hairline2); stroke-width: 1; }
.profile-note { font-size: 0.8rem; color: var(--muted); margin: 0.3rem 0 0; }
.route-facts .btn { margin-top: 1.3rem; width: 100%; white-space: normal; text-align: center; }
.exped-notes { color: var(--muted); max-width: 54rem; margin: 2.4rem 0 0; }
.exped-notes strong { color: var(--bone); }

/* ===================== TERRAIN: the ground, photographed ===================== */
.terrain { padding: var(--pad) 0; background: var(--canvas); border-block: 1px solid var(--hairline); }
.terrain-head { max-width: 50rem; margin-bottom: 2.8rem; }
.terrain h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.terrain-head p { color: var(--body); margin: 0; }
.terrain-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.6rem, 1.3vw, 1rem); }
.plate {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.94) contrast(1.02);
  transition: transform 1.4s var(--ease), filter 0.6s;
}
.plate:hover img { transform: scale(1.045); filter: saturate(1.02) contrast(1.05); }
.plate figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.4rem 1.1rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bone);
  background: linear-gradient(to top, rgba(15, 13, 10, 0.86), rgba(15, 13, 10, 0.45) 45%, transparent);
}
.plate--banner { grid-column: span 6; aspect-ratio: 21 / 9; }
.plate--wide   { grid-column: span 4; aspect-ratio: 16 / 10; }
/* The tall plate takes its height from the wide plate beside it. Its image
   is taken out of flow so the portrait frame contributes no intrinsic
   height of its own, otherwise it makes the row taller than the wide
   plate's fixed 16:10 and opens a gap beneath it. */
.plate--tall { grid-column: span 2; }
.plate--tall img { position: absolute; inset: 0; }
.terrain-notes { color: var(--muted); max-width: 54rem; margin: 2.4rem 0 0; }
.terrain-notes strong { color: var(--bone); }

/* ===================== AT A GLANCE =====================
   Answer-first block. Each row is a self-contained statement so a
   retrieval engine can lift one line and still be correct without the
   surrounding page. Deliberately plain: facts, units, place names. */
.glance { padding: var(--pad) 0; background: var(--canvas); border-block: 1px solid var(--hairline); }
.glance-head { max-width: 46rem; margin-bottom: 2.4rem; }
.glance h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.glance-head p { color: var(--body); margin: 0; }
.glance-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--hairline2); }
.glance-list > div { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: 1.2rem; padding: 1rem 1.6rem 1rem 0; border-bottom: 1px solid var(--hairline2); }
.glance-list dt { color: var(--muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; padding-top: 0.15rem; }
.glance-list dd { color: var(--body); margin: 0; font-size: 0.97rem; }
.glance-list dd strong { color: var(--bone); font-weight: 600; }
.glance-updated { color: var(--muted); font-size: 0.82rem; margin: 1.8rem 0 0; }
/* Size policy. Bordered rather than boxed in a warning colour: it is a
   fit note for a premium buyer, not an error message. */
.size-note { margin: 3rem 0 0; padding: clamp(1.5rem, 3vw, 2.4rem); background: var(--elev); border: 1px solid var(--hairline2); border-left: 2px solid var(--tan); border-radius: var(--radius); max-width: 62rem; }
.size-note h3 { color: var(--bone); font-size: 1.15rem; letter-spacing: 0.01em; margin: 0 0 0.9rem; }
.size-note p { color: var(--body); margin: 0 0 0.9rem; }
.size-note p:last-child { margin-bottom: 0; }
.size-note strong { color: var(--bone); }
.size-note .size-note-close { color: var(--muted); }

/* ===================== COMPARISON TABLE =====================
   Tables lift into answer engines almost verbatim, so this one carries
   the buying decision in data rather than adjectives. Wording is hedged
   ("typically") because kennels genuinely vary and a claim we cannot
   stand behind for all of them would be both unfair and unciteable. */
.compare { padding: var(--pad) 0; background: var(--surface); border-block: 1px solid var(--hairline); }
.compare-head { max-width: 48rem; margin-bottom: 2.4rem; }
.compare h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.compare-head p { color: var(--body); margin: 0; }
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--canvas); }
.compare table { width: 100%; border-collapse: collapse; min-width: 44rem; font-size: 0.94rem; }
.compare caption { text-align: left; padding: 1.1rem 1.2rem; color: var(--muted); font-size: 0.85rem; border-bottom: 1px solid var(--hairline); }
.compare th, .compare td { text-align: left; padding: 0.95rem 1.2rem; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.compare thead th { color: var(--bone); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--elev); }
.compare thead th:first-child { color: var(--muted); }
.compare tbody th { color: var(--body); font-weight: 600; width: 12rem; }
.compare td { color: var(--body); }
.compare .mine { color: var(--bone); background: color-mix(in oklab, var(--tan) 7%, transparent); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare-note { color: var(--muted); font-size: 0.85rem; margin: 1.4rem 0 0; max-width: 54rem; }
@media (max-width: 860px) {
  .glance-list { grid-template-columns: minmax(0, 1fr); }
  .glance-list > div { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; padding-right: 0; }
}

/* ========================= CONTACT ========================= */
.contact { padding: var(--pad) 0; background: var(--surface); border-block: 1px solid var(--hairline); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.contact-aside p { color: var(--body); }
.contact-aside .lede { color: var(--body); font-size: 1.05rem; }
.contact-reasons { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--hairline2); }
.contact-reasons li { border-bottom: 1px solid var(--hairline2); padding: 0.85rem 0; color: var(--body); font-size: 0.95rem; display: flex; gap: 0.7rem; }
.contact-reasons li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.55rem; border-radius: 50%; background: var(--tan); }
.contact-panel { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.4rem); }
.contact-consent { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.88rem; color: var(--body); font-weight: 400; letter-spacing: 0; }
/* [type=checkbox] is load-bearing: it outweighs the generic
   ".form-field input { width: 100% }" rule further down the sheet, which
   otherwise stretches the tickbox to the full column and pushes its
   label off the right edge of the page. */
.contact-consent input[type="checkbox"] { width: 1.05rem; height: 1.05rem; flex: none; margin-top: 0.15rem; accent-color: var(--tan); }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 1.6rem; }
.contact-privacy { color: var(--muted); font-size: 0.82rem; margin: 0.9rem 0 0; }
/* Off-screen, not display:none — bots fill what they can parse. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 1.2rem 0 0; font-size: 0.92rem; line-height: 1.5; }
.form-status:empty { margin: 0; }
.form-status.is-error { color: var(--error); }
.form-status.is-ok { color: var(--tan); }
.contact-sent { text-align: center; padding: 1.5rem 0; }
.contact-sent h3 { color: var(--bone); font-size: 1.3rem; margin: 0 0 0.7rem; }
.contact-sent p { color: var(--body); margin: 0; }
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact .form-grid { grid-template-columns: 1fr; }
  .contact .form-field.span-2 { grid-column: span 1; }
}
@media (max-width: 860px) {
  .terrain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plate--banner, .plate--wide { grid-column: span 2; aspect-ratio: 16 / 10; }
  .plate--tall { grid-column: span 2; aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) {
  .plate img, .plate:hover img { transition: none; transform: none; }
}
@media (max-width: 960px) {
  .exped-atlas, .route-panel { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .route-path.is-active { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .gps-dot { display: none; }
}

/* ----------------------------------------------------------------
   Territory: marquee + region
---------------------------------------------------------------- */
.territory { padding: 0 0 var(--pad); overflow: hidden; }
.marquee {
  border-block: 1px solid var(--hairline);
  padding: 1.5rem 0;
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track { display: inline-flex; will-change: transform; }
.marquee-seq {
  display: inline-flex;
  align-items: center;
  font-weight: 620;
  font-stretch: 120%;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  letter-spacing: 0.04em;
  color: var(--bone);
}
.marquee-seq span { padding-right: 1.6rem; }
.marquee-seq .sep { color: var(--tan); padding-right: 1.6rem; font-weight: 480; }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: slide 36s linear infinite; }
  @keyframes slide { to { transform: translateX(-50%); } }
}
.territory-copy { max-width: 46rem; }
.territory-copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.territory-copy p { color: var(--body); }

/* ----------------------------------------------------------------
   Availability calendar
---------------------------------------------------------------- */
.availability { padding: var(--pad) 0; background: var(--surface); border-block: 1px solid var(--hairline); }
.availability-head { max-width: 46rem; margin-bottom: 2.8rem; }
.availability h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.availability-head p { color: var(--body); margin: 0 0 1rem; }
.rate-note { color: var(--muted); font-size: 0.95rem; }
.rate-note strong { color: var(--bone); }

.calendar { border: 1px solid var(--hairline2); border-radius: var(--radius); background: var(--canvas); }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--hairline); }
.calendar-title { font-weight: 620; font-stretch: 114%; text-transform: uppercase; font-size: 1.1rem; letter-spacing: 0.06em; color: var(--bone); }
.calendar-nav { display: flex; gap: 0.5rem; }
.calendar-nav button {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  background: none;
  border: 1px solid var(--hairline2);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--bone);
  transition: border-color 0.2s, background-color 0.2s, opacity 0.2s;
}
.calendar-nav button:hover:not(:disabled) { border-color: var(--tan); background: var(--surface); }
.calendar-nav button:disabled { opacity: 0.3; cursor: default; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 1rem 1.3rem 1.4rem; gap: 4px; }
.calendar-dow { text-align: center; font-size: 0.7rem; font-weight: 640; letter-spacing: 0.14em; color: var(--muted); padding: 0.7rem 0 0.5rem; text-transform: uppercase; }
.calendar-day {
  position: relative;
  aspect-ratio: 1.15 / 1;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  font-size: 0.95rem;
  font-family: var(--font);
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: none;
  color: var(--body);
  padding: 0;
}
.calendar-day .dot { width: 0.42rem; height: 0.42rem; border-radius: 50%; }
.calendar-day.is-open { cursor: pointer; border-color: var(--hairline); color: var(--bone); transition: border-color 0.2s, background-color 0.2s; }
.calendar-day.is-open .dot { background: var(--tan); }
.calendar-day.is-open:hover { border-color: var(--tan); background: var(--surface); }
.calendar-day.is-reserved { color: #5c554a; background: var(--surface); }
.calendar-day.is-reserved .dot { background: #453f35; }
.calendar-day.is-reserved span.date-num { text-decoration: line-through; text-decoration-thickness: 1px; }
.calendar-day.is-past { color: #4a4439; }
.calendar-day.is-past .dot { background: transparent; }
.calendar-day.is-empty { visibility: hidden; }
.calendar-day.is-today::after {
  content: "";
  position: absolute;
  top: 0.32rem;
  right: 0.32rem;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--bone);
}
.calendar-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.05rem 1.3rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.88rem;
  color: var(--muted);
}
.calendar-legend { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.calendar-legend li { display: flex; align-items: center; gap: 0.5rem; }
.calendar-legend .dot { width: 0.42rem; height: 0.42rem; border-radius: 50%; }
.calendar-legend .dot-open { background: var(--tan); }
.calendar-legend .dot-reserved { background: #453f35; }

/* ----------------------------------------------------------------
   The journey: 4 connected moves
---------------------------------------------------------------- */
.journey { padding: var(--pad) 0; }
.journey h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); margin-bottom: 0.9rem; }
.journey-intro { color: var(--muted); max-width: 42rem; margin-bottom: 3rem; }
.journey-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.move {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.7rem 1.5rem 1.9rem;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.move:hover { border-color: var(--tan); transform: translateY(-3px); }
.move h3 {
  font-weight: 640;
  font-stretch: 116%;
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  margin: 0 0 0.7rem;
  color: var(--tan);
}
.move p { margin: 0; font-size: 0.93rem; color: var(--body); }

/* ----------------------------------------------------------------
   FAQ
---------------------------------------------------------------- */
.faq { padding: 0 0 var(--pad); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.faq h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); max-width: 12ch; }
.faq-aside p { color: var(--muted); }
.faq-list { border-top: 1px solid var(--hairline); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.35rem 0;
  font-weight: 560;
  font-stretch: 106%;
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--bone);
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--tan); }
.faq-item summary .faq-mark { flex: none; font-size: 1.3rem; font-weight: 400; color: var(--tan); transition: transform 0.3s var(--ease); line-height: 1; transform: translateY(2px); }
.faq-item[open] summary .faq-mark { transform: translateY(2px) rotate(45deg); }
.faq-item .faq-body { padding: 0 2.5rem 1.5rem 0; }
.faq-item .faq-body p { color: var(--body); font-size: 0.98rem; margin: 0; }

/* ----------------------------------------------------------------
   Closing: massive high-contrast action
---------------------------------------------------------------- */
.closing {
  padding: var(--pad) 0;
  background: var(--tan);
  color: var(--on-tan);
  text-align: center;
}
.closing h2 {
  color: var(--on-tan);
  font-size: clamp(2.4rem, 6.4vw, 5.4rem);
  margin: 0 auto 1.4rem;
  max-width: 16ch;
}
.closing p { color: color-mix(in oklab, var(--on-tan) 78%, var(--tan)); max-width: 36rem; margin: 0 auto 2.4rem; }
.closing .btn { background: var(--canvas); color: var(--bone); margin-bottom: 1.4rem; }
.closing .btn:hover { background: #000; color: #fff; }
.closing-alt { font-size: 0.94rem; color: var(--on-tan); }
.closing-alt a { color: var(--on-tan); font-weight: 600; }
.closing-alt a:hover { color: #000; }

/* ----------------------------------------------------------------
   Footer
---------------------------------------------------------------- */
.site-footer { background: var(--canvas); color: var(--muted); padding: 3.4rem 0 2.6rem; font-size: 0.9rem; }
.footer-grid {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem 3rem; align-items: flex-start;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 1.8rem;
}
.footer-brand p { margin: 0.9rem 0 0; max-width: 30ch; }
.footer-col h3 { font-size: 0.76rem; font-weight: 640; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone); margin: 0 0 0.9rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.footer-col a { color: var(--muted); text-decoration: none; }
.footer-col a:hover { color: var(--tan); }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem 2rem; }
.footer-legal p { margin: 0; }

/* ----------------------------------------------------------------
   Reveal (JS-gated) + GSAP image reveal targets
---------------------------------------------------------------- */
.js-reveal .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js-reveal .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
}

/* ----------------------------------------------------------------
   Modal: screening questionnaire + discovery call scheduler
---------------------------------------------------------------- */
dialog.booking-modal {
  z-index: var(--z-modal);
  width: min(680px, calc(100vw - 2rem));
  max-height: calc(100dvh - 3rem);
  border: 1px solid var(--hairline2);
  border-radius: var(--radius);
  padding: 0;
  background: var(--surface);
  color: var(--body);
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.7);
}
dialog.booking-modal::backdrop { background: rgba(8, 7, 5, 0.72); backdrop-filter: blur(3px); }
.modal-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.6rem 2rem 1.2rem;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
.modal-head h2 { font-weight: 620; font-stretch: 112%; text-transform: uppercase; font-size: 1.3rem; letter-spacing: 0.03em; margin: 0 0 0.35rem; }
.modal-steps { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.modal-steps strong { color: var(--tan); font-weight: 640; }
.modal-close {
  flex: none; width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border: 1px solid var(--hairline2);
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  color: var(--bone);
  transition: border-color 0.2s, background-color 0.2s;
}
.modal-close:hover { border-color: var(--tan); background: var(--elev); }
.modal-body { padding: 1.6rem 2rem 2.2rem; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem 1.3rem; }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field.span-2 { grid-column: span 2; }
.form-field label { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em; color: var(--bone); }
.form-field label .optional { font-weight: 400; color: var(--muted); }
.form-field input, .form-field select, .form-field textarea {
  font-family: var(--font);
  font-size: 0.98rem;
  color: var(--bone);
  background: var(--canvas);
  border: 1px solid var(--hairline2);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  transition: border-color 0.2s;
  width: 100%;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: #877d6b; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--tan);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--tan) 22%, transparent);
}
.form-field textarea { resize: vertical; min-height: 6rem; }
.form-field .field-error { display: none; font-size: 0.82rem; color: var(--error); }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: var(--error); }
.form-field.has-error .field-error { display: block; }

fieldset.form-field { border: none; margin: 0; padding: 0; }
fieldset.form-field legend { font-size: 0.86rem; font-weight: 600; color: var(--bone); padding: 0; margin-bottom: 0.55rem; }
.radio-stack { display: grid; gap: 0.5rem; }
.radio-stack label {
  display: flex; gap: 0.7rem; align-items: flex-start;
  font-size: 0.95rem; font-weight: 400; color: var(--body);
  border: 1px solid var(--hairline2);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.radio-stack label:hover { border-color: var(--tan); }
.radio-stack input { accent-color: var(--tan); margin-top: 0.2rem; width: auto; flex: none; }
.radio-stack input:checked + span { color: var(--bone); font-weight: 600; }

.form-note { font-size: 0.85rem; color: var(--muted); margin: 1.2rem 0 0; }
.modal-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.7rem; }
.btn-back {
  background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: 0.92rem; font-weight: 500;
  color: var(--muted);
  padding: 0.6rem 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-back:hover { color: var(--bone); }

.slot-day { margin-bottom: 1.3rem; }
.slot-day h3 { font-weight: 640; font-stretch: 110%; font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 0.6rem; color: var(--bone); }
.slot-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.slot {
  font-family: var(--font); font-size: 0.92rem;
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--hairline2);
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  color: var(--bone);
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.slot:hover { border-color: var(--tan); }
.slot.is-selected { background: var(--tan); border-color: var(--tan); color: var(--on-tan); font-weight: 640; }
.slot-error { display: none; color: var(--error); font-size: 0.88rem; margin-top: 0.6rem; }
.slot-error.show { display: block; }

.review-list { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.review-list li {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.95rem;
}
.review-list .k { color: var(--muted); }
.review-list .v { color: var(--bone); font-weight: 500; overflow-wrap: anywhere; }

.confirm-panel { text-align: center; padding: 1.2rem 0 0.6rem; }
.confirm-panel .confirm-seal {
  width: 3.4rem; height: 3.4rem;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  border: 1px solid var(--tan);
  display: grid; place-items: center;
  color: var(--tan);
}
.confirm-panel h3 { font-weight: 620; font-stretch: 112%; text-transform: uppercase; font-size: 1.4rem; letter-spacing: 0.03em; margin-bottom: 0.8rem; }
.confirm-panel p { margin-inline: auto; color: var(--body); font-size: 0.98rem; }

/* ----------------------------------------------------------------
   Responsive
---------------------------------------------------------------- */
@media (max-width: 960px) {
  .main-nav { display: none; }
  .menu-toggle { display: block; }
  .household-grid, .faq-grid { grid-template-columns: 1fr; }
  .household-figure { max-width: 26rem; }
  .journey-track { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .rules-grid { grid-template-columns: 1fr; }
  .cell-tall { grid-row: auto; }
  .cell-img { min-height: 13rem; }
  .journey-track { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field.span-2 { grid-column: auto; }
  .modal-head, .modal-body { padding-inline: 1.3rem; }
  .review-list li { grid-template-columns: 1fr; gap: 0.15rem; }
  .calendar-grid { padding: 0.7rem 0.7rem 1rem; gap: 2px; }
  .calendar-day { font-size: 0.85rem; }
  .calendar-toolbar, .calendar-footer { padding: 0.9rem 1rem; }
}

/* ----------------------------------------------------------------
   Optional light theme. Dark is the default and stays untouched;
   this is applied only when a visitor asks for it, via
   <html data-theme="light">. Every pair below was contrast-checked
   to WCAG AA (headings 14.2:1, body 8.2:1, muted 5.9:1).
---------------------------------------------------------------- */
:root[data-theme="light"] {
  --canvas:    #fbf7f0;
  --surface:   #f3ebdd;
  --elev:      #fffdf9;
  --hairline:  #e4d8c6;
  --hairline2: #d2c1a8;
  --bone:      #2e2419;
  --body:      #57483a;
  --muted:     #6e5d4a;
  --tan:       #d9922f;
  --tan-deep:  #b87519;
  --on-tan:    #241804;
  --error:     #a83f28;
  color-scheme: light;
}
:root { color-scheme: dark; }

/* the handful of colours that are not tokens, given a light counterpart */
:root[data-theme="light"] .film { background: linear-gradient(180deg, #f6efe2 0%, var(--canvas) 60%); }
:root[data-theme="light"] .scene-video { opacity: 0.42; filter: saturate(0.9) contrast(0.98) brightness(1.12); }
:root[data-theme="light"] .dusk-glow {
  background: linear-gradient(180deg, rgba(251,247,240,0.82) 0%, rgba(251,247,240,0.55) 45%, rgba(251,247,240,0.88) 100%);
}
:root[data-theme="light"] .dawn-glow {
  background:
    radial-gradient(85% 60% at 50% 100%, rgba(255, 250, 240, 0.45), transparent 72%),
    radial-gradient(55% 38% at 50% 100%, rgba(217, 146, 47, 0.22), transparent 70%);
}
:root[data-theme="light"] .night-veil { background: #2e2419; }
:root[data-theme="light"] .calendar-day.is-reserved { color: var(--muted); }
:root[data-theme="light"] .calendar-day.is-reserved .dot,
:root[data-theme="light"] .calendar-legend .dot-reserved { background: var(--hairline2); }
:root[data-theme="light"] .calendar-day.is-past { color: #a8987f; }
:root[data-theme="light"] .closing .btn:hover { background: var(--bone); color: var(--canvas); }
:root[data-theme="light"] dialog.booking-modal { box-shadow: 0 40px 90px -20px rgba(120, 90, 50, 0.28); }
:root[data-theme="light"] dialog.booking-modal::backdrop { background: rgba(46, 36, 25, 0.55); }
:root[data-theme="light"] .form-field input::placeholder,
:root[data-theme="light"] .form-field textarea::placeholder { color: #8d7c66; }

/* theme switch */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex: none;
  background: none; border: 1px solid var(--hairline2);
  border-radius: 999px; cursor: pointer; color: var(--bone);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.theme-toggle:hover { border-color: var(--tan); color: var(--tan); }
.theme-toggle svg { display: block; width: 1.05rem; height: 1.05rem; }
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
.mobile-menu .theme-toggle { width: auto; height: auto; gap: 0.7rem; padding: 0.6rem 1.1rem; border-radius: 999px; font-family: var(--font); font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; color: var(--body); align-self: flex-start; margin-top: 1.2rem; }
.mobile-menu .theme-toggle .label-light { display: inline; }
.mobile-menu .theme-toggle .label-dark { display: none; }
:root[data-theme="light"] .mobile-menu .theme-toggle .label-light { display: none; }
:root[data-theme="light"] .mobile-menu .theme-toggle .label-dark { display: inline; }

/* ================================================================
   About page. Lives here rather than inline so every page shares one
   stylesheet; the two inline copies had already drifted apart.
================================================================ */
/* ---- About page ---- */
.about-hero { padding: clamp(8.5rem, 15vh, 11rem) 0 clamp(2.4rem, 5vh, 3.6rem); }
.about-eyebrow { display:inline-block; font-size:0.78rem; font-weight:640; letter-spacing:0.16em; text-transform:uppercase; color:var(--tan); margin-bottom:1.1rem; }
.about-hero h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); margin:0 0 1.4rem; }
.about-lede { font-size: clamp(1.14rem, 1.8vw, 1.5rem); color: var(--bone); max-width: 42ch; line-height:1.4; margin:0; }
.about-block { border-top: 1px solid var(--hairline); }
.about-grid { display:grid; grid-template-columns: minmax(0,4fr) minmax(0,7fr); gap: clamp(1.4rem,5vw,5rem); align-items:start; padding-block: clamp(2.6rem,5vw,4.2rem); }
.about-head h2 { font-size: clamp(1.55rem, 3vw, 2.35rem); margin:0; }
.about-body p { color: var(--body); max-width: 62ch; }
.about-body p:last-child { margin-bottom:0; }
.about-body strong { color: var(--bone); }
.about-sub { color: var(--bone); font-weight:600; margin-bottom:0.55rem; }
.about-bring { margin-top:0.2rem; }
.about-quote { font-size: clamp(1.35rem, 2.6vw, 2rem); color: var(--bone); max-width: 24ch; margin: 1.9rem 0 0; line-height:1.28; letter-spacing:-0.01em; }
.facts-strip { display:grid; grid-template-columns: repeat(4,1fr); gap:10px; margin-top:1.9rem; }
.fact { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius); padding:1.2rem 1.1rem; display:flex; flex-direction:column; gap:0.25rem; }
.fact-n { font-weight:640; font-stretch:114%; font-size:1.18rem; color:var(--bone); }
.fact-l { font-size:0.8rem; color:var(--muted); letter-spacing:0.03em; }
.main-nav a[aria-current="page"] { color: var(--bone); }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; gap:0.9rem; } .facts-strip{ grid-template-columns:1fr 1fr; } }

/* ---- About: photographs of the household ---- */
.about-figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.about-figure img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.7s var(--ease); }
.about-figure:hover img { transform: scale(1.035); }
.about-caption { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--muted); }
.about-portrait { aspect-ratio: 4 / 5; }
.about-wide { aspect-ratio: 16 / 10; }
.about-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.about-figure-block { margin-top: 1.8rem; }
.about-figure-block.is-portrait { max-width: 23rem; }
@media (max-width: 860px) {
  .about-hero-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .about-hero-media { max-width: 26rem; }
}