/* ===========================================================================
   Oloitiko — base, layout and design-system components
   =========================================================================== */

/* ------------------------------------------------------------------ reset */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
p, h1, h2, h3, h4, h5, h6, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-8) 0; }

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: var(--radius-1);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--clay); color: var(--ivory); }

@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;
    scroll-behavior: auto !important;
  }
}

.skip-link {
  position: absolute;
  left: var(--sp-4); top: -6rem;
  z-index: var(--z-modal);
  background: var(--green-800);
  color: var(--ivory);
  padding: var(--sp-3) var(--sp-5);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); }

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

/* ------------------------------------------------------------- typography */

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-wrap: balance;
}

.display-xl { font-size: var(--step-7); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.display-l  { font-size: var(--step-6); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
.display-m  { font-size: var(--step-5); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
.display-s  { font-size: var(--step-4); line-height: var(--lh-heading); }
.heading    { font-size: var(--step-3); line-height: var(--lh-heading); }
.heading-s  { font-size: var(--step-2); line-height: var(--lh-heading); }

.lede {
  font-size: var(--step-1);
  line-height: var(--lh-loose);
  color: var(--text-muted);
  text-wrap: pretty;
}

/* The small caps label used above section headings — a Yellow Zebra habit
   worth keeping: it orients the reader without a heavy heading. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brown-700);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: "";
  width: 2rem; height: 1px;
  background: var(--clay);
  flex: none;
}
.on-dark .eyebrow { color: var(--green-300); }

.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.measure { max-width: var(--wrap-text); }
.measure-narrow { max-width: var(--wrap-narrow); }

a { color: inherit; }

.link {
  color: var(--text);
  text-decoration: none;
  background-image: linear-gradient(var(--clay), var(--clay));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.link:hover { color: var(--clay); background-size: 0% 1px; }

/* "Read more →" style, used at the end of editorial blocks */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--rule);
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.link-arrow svg { transition: transform var(--dur-base) var(--ease-out); flex: none; }
.link-arrow:hover { color: var(--clay); border-color: var(--clay); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------- buttons */

.btn {
  --btn-bg: var(--green-800);
  --btn-fg: var(--ivory);
  --btn-bd: var(--green-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 3.25rem;
  padding: 0 var(--sp-6);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-1);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover { --btn-bg: var(--green-950); --btn-bd: var(--green-950); }
.btn:active { transform: translateY(1px); }

.btn--primary { --btn-bg: var(--clay); --btn-bd: var(--clay); }
.btn--primary:hover { --btn-bg: var(--clay-dark); --btn-bd: var(--clay-dark); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--rule); }
.btn--ghost:hover { --btn-bg: transparent; --btn-fg: var(--clay); --btn-bd: var(--clay); }

.btn--light { --btn-bg: transparent; --btn-fg: var(--ivory); --btn-bd: rgba(250,247,241,.5); }
.btn--light:hover { --btn-bg: var(--ivory); --btn-fg: var(--green-950); --btn-bd: var(--ivory); }

.btn--solid-light { --btn-bg: var(--ivory); --btn-fg: var(--green-950); --btn-bd: var(--ivory); }
.btn--solid-light:hover { --btn-bg: var(--white); --btn-bd: var(--white); }

.btn--sm { min-height: 2.5rem; padding: 0 var(--sp-4); font-size: var(--step--2); }
.btn--lg { min-height: 3.75rem; padding: 0 var(--sp-7); }
.btn--block { width: 100%; }

.btn--whatsapp { --btn-bg: #25623F; --btn-bd: #25623F; }
.btn--whatsapp:hover { --btn-bg: #1C4C31; --btn-bd: #1C4C31; }

/* ---------------------------------------------------------------- layout */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--wrap-wide); }
.wrap--text { max-width: calc(var(--wrap-text) + var(--gutter) * 2); }
.wrap--full { max-width: none; padding-inline: 0; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.bg-ivory    { background: var(--ivory); }
.bg-sand     { background: var(--sand); }
.bg-stone    { background: var(--stone-soft); }
.bg-green    { background: var(--green-950); }
.bg-green-mid{ background: var(--green-800); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}
.section-head__text { max-width: 46rem; }
.section-head__text > .lede { margin-top: var(--sp-4); }

.grid { display: grid; gap: var(--grid-gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

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

/* Asymmetric editorial split — deliberately not 50/50, so the page does not
   read as a template. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.split--reverse { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.split--reverse > *:first-child { order: 2; }
.split--reverse > *:last-child { order: 1; }
@media (max-width: 900px) {
  .split, .split--reverse { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .split--reverse > *:first-child, .split--reverse > *:last-child { order: 0; }
}

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* ----------------------------------------------------------------- media */

.o-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--o-ratio, 16/9);
  background: var(--sand-deep);
}
.o-media > img { width: 100%; height: 100%; object-fit: cover; }
.o-media.is-rounded { border-radius: var(--radius-2); }

/* Placeholder: designed, not broken. Reads as an intentional slot awaiting
   licensed photography, and is listed in the CMS media report. */
.o-media--placeholder {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--sand) 0 12px,
      var(--sand-deep) 12px 24px
    );
  border: 1px solid var(--stone);
}
.o-media__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  max-width: 22rem;
  text-align: center;
  background: var(--ivory);
  border: 1px solid var(--stone);
}
.o-media__ph-mark {
  width: 1.75rem; height: 1.75rem;
  border: 1px solid var(--brown-500);
  border-radius: 50%;
  position: relative;
}
.o-media__ph-mark::after {
  content: "";
  position: absolute; inset: 0;
  margin: auto;
  width: 0.45rem; height: 0.45rem;
  border-radius: 50%;
  background: var(--clay);
}
.o-media__ph-text {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brown-700);
  line-height: 1.4;
}

/* Hover reveal used by cards */
.hover-zoom { overflow: hidden; }
.hover-zoom .o-media > img,
.hover-zoom.o-media > img {
  transition: transform var(--dur-image) var(--ease-out);
}
a:hover .hover-zoom .o-media > img,
a:hover .hover-zoom.o-media > img,
.card:hover .hover-zoom .o-media > img { transform: scale(1.035); }

/* Scroll reveal — opt-in, and inert under reduced motion. */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- cards */
/* No boxes. A card is an image, a hairline, and type. */

.card { display: block; text-decoration: none; color: inherit; }
.card__media { margin-bottom: var(--sp-5); }
.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brown-700);
  margin-bottom: var(--sp-3);
}
.card__meta span + span::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--clay);
  margin-right: var(--sp-3);
  vertical-align: middle;
}
.card__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: var(--lh-heading);
  margin-bottom: var(--sp-3);
  transition: color var(--dur-base) var(--ease-out);
}
.card:hover .card__title { color: var(--clay); }
.card__text { color: var(--text-muted); font-size: var(--step--1); line-height: var(--lh-loose); }
.card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}
.card__price { font-size: var(--step--1); }
.card__price strong { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; }
.card__price small { display: block; font-size: var(--step--2); color: var(--text-muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.card__cue {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--clay);
  white-space: nowrap;
}

/* Destination tile — editorial magazine cover, not an ecommerce card */
.tile {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--ivory);
  overflow: hidden;
  isolation: isolate;
}
.tile .o-media { aspect-ratio: var(--o-ratio, 4/5); }
.tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(18, 33, 26, 0.82) 0%,
    rgba(18, 33, 26, 0.42) 34%,
    rgba(18, 33, 26, 0.06) 66%,
    rgba(18, 33, 26, 0) 100%);
  z-index: 1;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.tile:hover::after { opacity: 0.86; }
.tile__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.tile__kicker {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: rgba(250, 247, 241, 0.82);
  margin-bottom: var(--sp-2);
  display: block;
}
.tile__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: var(--lh-heading);
  color: var(--ivory);
}
.tile__text {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: rgba(250, 247, 241, 0.86);
  max-width: 26rem;
  /* Revealed on hover on pointer devices; always visible on touch. */
}
@media (hover: hover) and (min-width: 900px) {
  /* The excerpt keeps its space at all times and only fades and lifts into
     view. Nothing about the size animates, so there is no layout work per
     frame — and, better than the version this replaces, the title no longer
     jumps upward when the pointer arrives. The tile has a fixed aspect-ratio
     and the body is absolutely positioned, so the reserved space costs
     nothing outside the tile. */
  .tile__text {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
  }
  .tile:hover .tile__text,
  .tile:focus-within .tile__text {
    opacity: 1;
    transform: none;
  }
}

/* Badges / pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.35rem var(--sp-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
}
.pill--accent { border-color: var(--clay); color: var(--clay); }
.pill--solid { background: var(--green-800); border-color: var(--green-800); color: var(--ivory); }
.pill--light { border-color: rgba(250,247,241,.45); color: var(--ivory); }

/* --------------------------------------------------------------- prose */

.prose { max-width: var(--wrap-text); font-size: var(--step-0); line-height: var(--lh-loose); }
.prose > * + * { margin-top: var(--sp-5); }
.prose h2 { font-size: var(--step-3); margin-top: var(--sp-9); }
.prose h3 { font-size: var(--step-2); margin-top: var(--sp-8); }
.prose h4 { font-size: var(--step-1); margin-top: var(--sp-7); font-family: var(--font-sans); font-weight: 600; }
.prose p { text-wrap: pretty; }
.prose a { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--clay-dark); }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li + li { margin-top: var(--sp-2); }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li {
  position: relative;
  padding-left: 1.6rem;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--clay);
}
.prose ol { padding-left: 1.4rem; }
.prose blockquote {
  border-left: 2px solid var(--clay);
  padding-left: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: var(--lh-heading);
  color: var(--text);
}
.prose img { margin-block: var(--sp-7); }
.prose figcaption { font-size: var(--step--2); color: var(--text-muted); margin-top: var(--sp-3); }
.prose table { font-size: var(--step--1); margin-block: var(--sp-6); }
.prose th, .prose td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--rule); text-align: left; }
.prose th { font-family: var(--font-sans); font-weight: 600; font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }

/* Wide content must scroll inside itself, never the page body. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ----------------------------------------------------------- breadcrumbs */

.breadcrumbs { font-size: var(--step--2); color: var(--text-muted); letter-spacing: 0.03em; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; }
.breadcrumbs li { display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumbs li + li::before { content: "/"; color: var(--stone); }
.breadcrumbs a { text-decoration: none; color: inherit; transition: color var(--dur-fast); }
.breadcrumbs a:hover { color: var(--clay); }
.breadcrumbs [aria-current] { color: var(--text); }

/* ---------------------------------------------------------------- forms */

.field { display: block; margin-bottom: var(--sp-5); }
.field__label {
  display: block;
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.field__hint { display: block; font-size: var(--step--2); color: var(--text-muted); margin-top: var(--sp-2); }

.input, .select, .textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: var(--sp-3) var(--sp-4);
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: var(--radius-1);
  color: var(--text);
  font-size: var(--step-0);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.textarea { min-height: 8rem; padding-top: var(--sp-3); resize: vertical; line-height: var(--lh-body); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--brown-500); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px var(--clay-wash);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }

.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 1.5 6 6.5l5-5' stroke='%236B5A47' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: var(--sp-8);
}

.field__error { display: block; font-size: var(--step--2); color: var(--danger); margin-top: var(--sp-2); }

/* Selectable option cards used by the quote flow */
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--stone);
  background: var(--white);
  border-radius: var(--radius-1);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.choice:hover { border-color: var(--brown-500); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__box {
  flex: none;
  width: 1.15rem; height: 1.15rem;
  border: 1px solid var(--brown-500);
  border-radius: var(--radius-1);
  display: grid; place-items: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.choice input[type="radio"] ~ .choice__box { border-radius: 50%; }
.choice__box::after {
  content: "";
  width: 0.5rem; height: 0.5rem;
  background: var(--ivory);
  border-radius: inherit;
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.choice input:checked ~ .choice__box { background: var(--clay); border-color: var(--clay); }
.choice input:checked ~ .choice__box::after { transform: scale(1); }
.choice:has(input:checked) { border-color: var(--clay); background: var(--clay-wash); }
.choice input:focus-visible ~ .choice__box { outline: 2px solid var(--clay); outline-offset: 2px; }
.choice__label { font-size: var(--step--1); }
.choice__label strong { display: block; font-size: var(--step-0); font-weight: 500; }
.choice__label span { color: var(--text-muted); }

/* Number stepper */
.stepper { display: flex; align-items: center; border: 1px solid var(--stone); border-radius: var(--radius-1); background: var(--white); width: fit-content; }
.stepper button {
  width: 3rem; height: 3.25rem;
  display: grid; place-items: center;
  color: var(--brown-700);
  font-size: var(--step-1);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.stepper button:hover:not(:disabled) { color: var(--clay); background: var(--ivory); }
.stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper input {
  width: 3.25rem; height: 3.25rem;
  border: 0; border-inline: 1px solid var(--stone);
  text-align: center;
  background: transparent;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Alerts.
   A hairline on all four sides rather than a thick bar down one — the tinted
   ground already carries the meaning, and the whole system speaks in 1px rules. */
.alert {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--clay);
  background: var(--clay-wash);
  font-size: var(--step--1);
  margin-bottom: var(--sp-5);
}
.alert--ok { border-color: rgba(47, 107, 79, .45); background: #ECF4EF; }
.alert--error { border-color: rgba(163, 59, 42, .45); background: #F9EDEA; }

/* Owner-action marker: anything needing verified data from the client. */
.admin-note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.3rem var(--sp-3);
  background: repeating-linear-gradient(-45deg, #FFF6E0 0 8px, #FDEFD2 8px 16px);
  border: 1px dashed #B8912F;
  color: #6B520F;
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  border-radius: var(--radius-1);
}

/* ------------------------------------------------------------ pagination */

.pagination { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-9); }
.pagination a, .pagination span {
  min-width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  padding-inline: var(--sp-3);
  border: 1px solid var(--rule);
  text-decoration: none;
  font-size: var(--step--1);
  transition: all var(--dur-fast) var(--ease-out);
}
.pagination a:hover { border-color: var(--clay); color: var(--clay); }
.pagination [aria-current="page"] { background: var(--green-800); border-color: var(--green-800); color: var(--ivory); }
.pagination .is-gap { border: 0; }

/* ------------------------------------------------------------- accordion */

.accordion { border-top: 1px solid var(--rule); }
.accordion__item { border-bottom: 1px solid var(--rule); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: var(--lh-heading);
  color: var(--text);
  transition: color var(--dur-fast) var(--ease-out);
}
.accordion__trigger:hover { color: var(--clay); }
.accordion__icon {
  flex: none;
  width: 1.5rem; height: 1.5rem;
  margin-top: 0.2rem;
  position: relative;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  background: var(--clay);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.accordion__icon::before { width: 100%; height: 1px; }
.accordion__icon::after { width: 1px; height: 100%; }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(90deg); opacity: 0; }
.accordion__panel { overflow: hidden; }
.accordion__panel[hidden] { display: none; }
.accordion__inner { padding-bottom: var(--sp-6); color: var(--text-muted); max-width: 52rem; }

/* --------------------------------------------------------------- tables */

.table-price { font-size: var(--step--1); min-width: 40rem; }
.table-price th, .table-price td { padding: var(--sp-4); text-align: left; border-bottom: 1px solid var(--rule); }
.table-price thead th {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--brown-500);
  white-space: nowrap;
}
.table-price tbody th { font-family: var(--font-sans); font-weight: 500; }
.table-price tbody th small { display: block; font-weight: 400; color: var(--text-muted); font-size: var(--step--2); margin-top: 2px; }
.table-price td { font-family: var(--font-display); font-size: var(--step-1); }
.table-price tr:hover td, .table-price tr:hover th { background: var(--ivory-deep); }
.table-price .is-peak th { color: var(--clay); }
.table-price .is-best { color: var(--clay); }
.table-price .is-empty { color: var(--stone); font-family: var(--font-sans); font-size: var(--step--1); }

/* --------------------------------------------------------------- utility */

.mt-0 { margin-top: 0 !important; }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }
.flow > * + * { margin-top: var(--sp-5); }
.hide-mobile { }
@media (max-width: 768px) { .hide-mobile { display: none !important; } }
@media (min-width: 769px) { .show-mobile { display: none !important; } }

/* ------------------------------------------------------------ package card
   A contained card: photograph flush to the top with the length and a Featured
   flag on it, then category, title, route, facts and summary, and a footer that
   pairs the "from" price with a solid call to action. Flex column, so footers
   line up across a row however long the copy above them runs. */
.pcard {
  /* The card is always a white sheet, so it carries its own light tokens. The
     homepage sets a row of these inside a dark section, whose theme turns
     --text ivory — without this the title would be ivory on white. */
  --text: var(--ink);
  --text-muted: var(--brown-700);
  --rule: var(--stone);
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(18, 33, 26, .04), 0 10px 26px -18px rgba(18, 33, 26, .22);
  transition: box-shadow .25s ease, transform .25s ease;
}
.pcard:hover {
  box-shadow: 0 2px 4px rgba(18, 33, 26, .05), 0 20px 40px -20px rgba(18, 33, 26, .32);
  transform: translateY(-2px);
}
.pcard:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pcard, .pcard:hover { transform: none; } }

.pcard__media { position: relative; }
.pcard:hover .hover-zoom .o-media > img { transform: scale(1.035); }

.pcard__badge {
  position: absolute;
  top: 14px;
  z-index: 1;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .81rem;
  font-weight: 600;
  line-height: 1.2;
}
.pcard__badge--days {
  left: 14px;
  background: rgba(18, 33, 26, .78);
  color: #fff;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pcard__badge--flag { right: 14px; background: #fff; color: var(--text); letter-spacing: .01em; }

.pcard__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 20px; }
.pcard__main { margin-bottom: 20px; }

.pcard__eyebrow {
  font-size: .81rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clay);
}
.pcard__title {
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--text);
  transition: color .2s ease;
}
.pcard:hover .pcard__title { color: var(--clay); }
.pcard__route {
  margin-top: 10px;
  font-size: .81rem;
  letter-spacing: .1em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard__facts { margin-top: 12px; font-size: .923rem; color: var(--text-muted); }
.pcard__text {
  margin-top: 6px;
  font-size: 1.069rem;
  line-height: 1.65;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pcard__foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.pcard__price small {
  display: block;
  font-size: .743rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pcard__price strong {
  display: block;
  margin-top: 2px;
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}
.pcard__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--clay);
  color: #fff;
  font-size: .855rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.pcard:hover .pcard__cta { background: var(--clay-dark); }

/* On a narrow card (a phone, or two columns beside the filter rail on a tablet)
   the price and the button no longer fit side by side and the button wraps
   under the price at half width, which looks accidental. Measured against the
   card itself rather than the viewport, since the same card sits in one, two and
   three-column grids. The query measures the body's CONTENT box (inside its
   22px padding): the price and button need about 301px side by side, so a 405px
   card (359px inside) keeps them on one line and a phone card (289px) stacks. */
.pcard__body { container-type: inline-size; }
@container (max-width: 305px) {
  .pcard__cta { flex: 1 0 100%; justify-content: center; }
}

/* ================================================================== SWASH
   Borrowed from RedSoil Safaris: a marker stroke behind the operative words of
   a display heading. A background gradient rather than an image, so it scales
   with the type and costs nothing; it sits low across the letters so the words
   keep their own ink colour and contrast. Written in content as *words* and
   rendered by View::marked(). */
.mark {
  --mark-ink: rgba(217, 138, 99, .4);
  background-image: linear-gradient(var(--mark-ink), var(--mark-ink));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% .36em;
  padding-inline: .06em;
  margin-inline: -.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.on-dark .mark,
.hero .mark { --mark-ink: rgba(180, 86, 43, .78); }

/* =================================================================== BAND
   Borrowed from Lappet Faced Safaris: a full-bleed photograph darkened from
   the left, so the words sit in shadow and the picture opens to the right.
   Oloitiko's forest green, not Lappet's teal-black. */
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(28rem, 64vh, 42rem);
  padding-block: var(--section-y);
  background: var(--green-950);
  color: var(--ivory);
}
.band > .wrap { width: 100%; }
.band__media { position: absolute; inset: 0; z-index: -2; }
.band__media .o-media { aspect-ratio: auto; width: 100%; height: 100%; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(18, 33, 26, .94) 0%, rgba(18, 33, 26, .74) 42%, rgba(18, 33, 26, .2) 100%);
}
.band__content { max-width: 40rem; }
.band__title { color: var(--ivory); text-wrap: balance; }
.band__lede { margin-top: var(--sp-5); color: rgba(250, 247, 241, .9); }
@media (max-width: 760px) {
  /* A phone has no room for the picture to open out beside the words, so the
     shadow comes up from the bottom instead of in from the left. */
  .band { align-items: flex-end; min-height: clamp(34rem, 88vh, 44rem); }
  .band::before { background: linear-gradient(180deg, rgba(18, 33, 26, .35) 0%, rgba(18, 33, 26, .8) 46%, rgba(18, 33, 26, .96) 100%); }
}

/* ================================================================== STORY
   Borrowed from Lappet Faced Safaris: a tall photograph with a dark badge set
   off its corner, beside the words and a short list of plain commitments. */
.story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.story__media { position: relative; }
.story__media .o-media {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(18, 33, 26, .06), 0 28px 56px -28px rgba(18, 33, 26, .4);
}
.story__badge {
  position: absolute;
  right: -1.5rem;
  bottom: 2.5rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.4rem 1rem 1.1rem;
  background: var(--green-950);
  color: var(--ivory);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(18, 33, 26, .12), 0 26px 50px -18px rgba(18, 33, 26, .5);
}
.story__badge .logo-mark { width: 2.5rem; flex: none; }
.story__badge strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.15;
}
.story__badge span {
  display: block;
  margin-top: 3px;
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--green-300);
}

.checks {
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-6);
}
.checks li { position: relative; padding-left: 2.25rem; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--clay-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E4322' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / .85rem no-repeat;
}
.checks strong { display: block; font-weight: 600; color: var(--text); line-height: 1.35; }
.checks span { display: block; margin-top: 4px; font-size: var(--step--1); line-height: var(--lh-body); color: var(--text-muted); }

@media (max-width: 900px) {
  .story { grid-template-columns: minmax(0, 1fr); }
  .story__badge { right: .9rem; bottom: .9rem; }
}
@media (max-width: 560px) {
  .checks { grid-template-columns: minmax(0, 1fr); }
}