/**
 * EAS shared page components — LAW 18 self-contained (zero host inheritance).
 * Fonts: Cormorant Garamond, Jost, Playfair Display italic only.
 */

/* ─── IMAGE HERO (homepage scale — luxury magazine editorial) ─── */
.eas-comp-hero-image {
  --eas-hero-display: clamp(64px, 8.5vw, 112px);
  --eas-hero-sub: clamp(16px, 1.8vw, 19px);
  position: relative;
  /* min-height (not a fixed height) so a long real headline (Itineraries/
     Departures titles are AI/human-authored and uncapped in length, unlike
     the short pillar taglines this component was designed against) grows
     the section instead of overflowing it — with height:100vh + overflow:
     hidden, long content used to silently clip below the fold (eyebrow/CTA
     invisible without scrolling past the hero). Photo/scrim/grain layers are
     position:absolute; inset:0, so they still stretch to fill whatever
     height the section ends up at. */
  min-height: max(720px, 100vh);
  overflow: hidden;
  background-color: #14120C;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
}

.eas-comp-hero-image__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #14120C;
  z-index: 1;
  transform: scale(1.05);
  animation: eas-comp-hero-kenburns 22s ease-out forwards;
  will-change: transform;
}

@keyframes eas-comp-hero-kenburns {
  from { transform: scale(1.05); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .eas-comp-hero-image__bg {
    animation: none;
    transform: scale(1);
  }
}

/* Uniform photo mute — tames blown highlights without flattening warmth */
.eas-comp-hero-image__veil {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, 0.28);
  z-index: 2;
  pointer-events: none;
}

/* Editorial scrim: left vignette + bottom lift (Condé Nast stack) */
.eas-comp-hero-image__gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      105deg,
      rgba(6, 5, 4, 0.82) 0%,
      rgba(6, 5, 4, 0.58) 28%,
      rgba(6, 5, 4, 0.22) 52%,
      rgba(6, 5, 4, 0.06) 68%,
      transparent 82%
    ),
    linear-gradient(
      to top,
      rgba(6, 5, 4, 0.92) 0%,
      rgba(6, 5, 4, 0.52) 32%,
      rgba(6, 5, 4, 0.14) 62%,
      transparent 78%
    );
  z-index: 3;
  pointer-events: none;
}

/* Lightweight film grain — editorial print texture */
.eas-comp-hero-image__grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.038;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.eas-comp-hero-image--deep-scrim .eas-comp-hero-image__veil {
  background: rgba(6, 5, 4, 0.38);
}

.eas-comp-hero-image--deep-scrim .eas-comp-hero-image__gradient {
  background:
    linear-gradient(
      105deg,
      rgba(4, 3, 2, 0.9) 0%,
      rgba(4, 3, 2, 0.68) 30%,
      rgba(4, 3, 2, 0.28) 54%,
      rgba(4, 3, 2, 0.08) 70%,
      transparent 84%
    ),
    linear-gradient(
      to top,
      rgba(4, 3, 2, 0.96) 0%,
      rgba(4, 3, 2, 0.62) 36%,
      rgba(4, 3, 2, 0.16) 72%,
      transparent 100%
    );
}

.eas-comp-hero-image__content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 780px;
  padding: 0 80px 120px;
  isolation: isolate;
}

/* Desktop: homepage Pass 7/8 grid — eyebrow below nav, copy anchored bottom-left */
@media (min-width: 769px) {
  .eas-comp-hero-image {
    display: grid;
    grid-template-rows: 220px 1fr auto;
    grid-template-columns: minmax(0, 1fr);
    align-content: stretch;
  }

  .eas-comp-hero-image__label {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    align-self: end;
    justify-self: start;
    padding-left: 80px;
    padding-top: 24px;
    margin-bottom: 0;
    z-index: 5;
  }

  .eas-comp-hero-image__content {
    grid-row: 3;
    grid-column: 1;
    position: relative;
    width: 100%;
    max-width: none;
    margin: 48px 0 0;
    padding: 0 80px 120px;
  }

  .eas-comp-hero-image__headline {
    margin-top: 0;
    max-width: 700px;
    width: fit-content;
  }

  .eas-comp-hero-image__sub {
    max-width: 440px;
  }

  /* No eyebrow: nav spacer row + copy anchored bottom (homepage grid lock) */
  .eas-comp-hero-image--no-eyebrow {
    display: grid;
    grid-template-rows: 118px 1fr auto;
    grid-template-columns: minmax(0, 1fr);
    align-content: stretch;
  }

  .eas-comp-hero-image--no-eyebrow .eas-comp-hero-image__content {
    grid-row: 3;
    grid-column: 1;
    margin: 0;
  }
}

.eas-comp-hero-image__content::before {
  content: '';
  position: absolute;
  inset: -64px -56px -80px -40px;
  background: radial-gradient(
    ellipse 130% 100% at 0% 100%,
    rgba(4, 3, 2, 0.68) 0%,
    rgba(4, 3, 2, 0.32) 44%,
    transparent 70%
  );
  z-index: -1;
  pointer-events: none;
}

.eas-comp-hero-image__headline {
  margin-bottom: 40px;
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.32);
}

/* Real-data hero badge (Departures Final Closeout, Part 1) — a considered,
   pillar-hero-confidence chip, not a bolted-on urgency banner. Generic:
   any real short string, currently used for the departure scarcity signal. */
.eas-comp-hero-image__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #E8C06A;
  background: rgba(20, 18, 12, 0.42);
  border: 1px solid rgba(232, 192, 106, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 20px;
  border-radius: 999px;
  margin-bottom: 26px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.eas-comp-hero-image__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E8C06A;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(232, 192, 106, 0.7);
}

@media (max-width: 640px) {
  .eas-comp-hero-image__badge {
    font-size: 10px;
    padding: 8px 16px;
    margin-bottom: 18px;
  }
}

/* Real-data hero stat row (Workflow D, 2026-08-02) — Duration/Party size/
   Price-from style facts below the subline. Backward-compatible optional
   prop; renders nothing on every existing caller that omits $stats. */
.eas-comp-hero-image__stats {
  display: flex;
  gap: 32px;
  margin-bottom: 34px;
  flex-wrap: wrap;
}

.eas-comp-hero-image__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.eas-comp-hero-image__stat-label {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #E8C06A;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.eas-comp-hero-image__stat-value {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: #FEFDFB;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

@media (max-width: 640px) {
  .eas-comp-hero-image__stats {
    gap: 20px;
    margin-bottom: 24px;
  }
  .eas-comp-hero-image__stat-value {
    font-size: 13px;
  }
}

/* Hero eyebrow — page-home.php .eas-hero__eyebrow (dark scrim; not section eas-eyebrow-std) */
.eas-comp-hero-image__label--hero {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.48em;
  text-transform: uppercase;
  color: #E8C06A !important;
  margin-bottom: 32px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.eas-comp-hero-image__label--hero.eas-eyebrow-std {
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.48em;
  color: #E8C06A !important;
}

.eas-comp-hero-image__label-rule {
  width: 40px;
  height: 1px;
  background-color: rgba(232, 192, 106, 0.92);
  flex-shrink: 0;
  display: inline-block;
}

.eas-comp-hero-image__sub {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: var(--eas-hero-sub);
  letter-spacing: 0.04em;
  line-height: 1.72;
  color: rgba(254, 253, 251, 0.82) !important;
  max-width: 420px;
  margin-bottom: 60px;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.32);
}

.eas-comp-hero-image__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #E8C06A !important;
  border-bottom: 1px solid rgba(232, 192, 106, 0.42);
  padding-bottom: 6px;
  text-decoration: none;
  transition: color 0.35s ease, border-color 0.35s ease, gap 0.35s ease, opacity 0.35s ease;
}

.eas-comp-hero-image__cta:hover,
.eas-comp-hero-image__cta:focus-visible {
  color: #F5D078 !important;
  border-color: rgba(245, 208, 120, 0.72);
  gap: 20px;
  opacity: 1;
}

/* ─── PLATINUM ITINERARY CARDS V2 — full-bleed editorial (LAW 18) ─── */
.eas-comp-itinerary {
  background-color: #F1EADA;
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 40px;
}

/* LAW 20 section labels — parity values + self-defense vs style.css [class*="eas-"] p */
.eas-comp-itinerary__label.eas-eyebrow-std,
.eas-comp-experience__label.eas-eyebrow-std,
.eas-comp-reviews__label.eas-eyebrow-std {
  font-family: 'Jost', sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #924F08;
  line-height: 1.55;
  font-style: normal;
}

/* Section label layout only */
.eas-comp-itinerary__label {
  margin-bottom: 14px;
}

.eas-comp-itinerary__head {
  margin-bottom: 16px;
}

.eas-comp-itinerary__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.04;
  color: #1A0F06;
  margin-bottom: 0;
}

.eas-comp-itinerary__title em,
.eas-comp-itinerary__title-em {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 400;
  color: #C9963C;
}

.eas-comp-itinerary__intro {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.8;
  color: rgba(26, 15, 6, 0.72);
  max-width: 52ch;
  margin-bottom: 64px;
}

.eas-comp-itinerary__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.eas-comp-itinerary__card {
  position: relative;
  display: block;
  text-decoration: none;
  aspect-ratio: 3 / 4.3;
  background-color: #14100A;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  color: inherit;
}

.eas-comp-itinerary__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(26, 15, 6, 0.28);
}

.eas-comp-itinerary__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #14100A;
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.eas-comp-itinerary__card:hover .eas-comp-itinerary__img {
  transform: scale(1.05);
}

.eas-comp-itinerary__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 10, 0.2) 0%, rgba(20, 16, 10, 0.08) 30%, rgba(20, 16, 10, 0.58) 55%, rgba(20, 16, 10, 0.96) 82%, #14100A 100%);
}

.eas-comp-itinerary__frame {
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(201, 150, 60, 0.32);
  pointer-events: none;
  transition: border-color 0.6s ease;
}

.eas-comp-itinerary__card:hover .eas-comp-itinerary__frame {
  border-color: rgba(201, 150, 60, 0.5);
}

.eas-comp-itinerary__badge {
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 2;
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: #F7F1E3;
  background-color: rgba(20, 16, 10, 0.44);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(247, 241, 227, 0.38);
  padding: 7px 13px;
}

.eas-comp-itinerary__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 30px 26px;
}

.eas-comp-itinerary__parks {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: #EFCB84;
  margin-bottom: 12px;
  line-height: 1.7;
}

.eas-comp-itinerary__parks span {
  color: rgba(239, 203, 132, 0.6);
  padding: 0 6px;
}

.eas-comp-itinerary__card-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.08;
  color: #F7F1E3;
  margin-bottom: 12px;
}

.eas-comp-itinerary__excerpt {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 300;
  font-size: 17.5px;
  line-height: 1.55;
  color: rgba(247, 241, 227, 0.92);
  margin-bottom: 20px;
  background-color: rgba(20, 16, 10, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 12px 14px;
  border: none;
}

.eas-comp-itinerary__ledger {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  border-top: 1px solid rgba(201, 150, 60, 0.5);
  padding-top: 12px;
  margin-bottom: 10px;
}

.eas-comp-itinerary__ledger dt {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(247, 241, 227, 0.75);
  margin-bottom: 5px;
}

.eas-comp-itinerary__ledger dd {
  font-family: 'Jost', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: #F7F1E3;
  letter-spacing: 0.02em;
  margin: 0;
}

.eas-comp-itinerary__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 0;
}

.eas-comp-itinerary__pricetag {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 6px 7px;
  background-color: rgba(20, 16, 10, 0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(201, 150, 60, 0.44);
  padding: 4px 9px 5px;
  flex-shrink: 0;
}

.eas-comp-itinerary__pricetag-label {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(247, 241, 227, 0.75);
  white-space: nowrap;
}

.eas-comp-itinerary__pricetag-value {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1;
  color: #E8C06A;
  letter-spacing: 0.01em;
}

.eas-comp-itinerary__cta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Jost', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: rgba(247, 241, 227, 0.5);
  padding-bottom: 0;
  flex-shrink: 0;
  white-space: nowrap;
  transition: color 0.35s ease;
}

.eas-comp-itinerary__card:hover .eas-comp-itinerary__cta {
  color: rgba(247, 241, 227, 0.82);
}

.eas-comp-itinerary__arrow {
  display: inline-block;
  transition: transform 0.45s ease;
}

.eas-comp-itinerary__card:hover .eas-comp-itinerary__arrow {
  transform: translateX(7px);
}

/* ─── SIGNATURE ITINERARY CARD — position 1, pillar-wide (LAW 18) ─── */
.eas-comp-itinerary__tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.eas-comp-itinerary__card--signature {
  transform: scale(1.03);
  z-index: 2;
  box-shadow:
    0 18px 40px rgba(26, 15, 6, 0.32),
    0 0 0 1px rgba(201, 150, 60, 0.22),
    0 0 48px rgba(184, 120, 10, 0.18);
}

.eas-comp-itinerary__card--signature:hover {
  transform: scale(1.03) translateY(-8px);
  box-shadow:
    0 32px 72px rgba(26, 15, 6, 0.38),
    0 0 0 1px rgba(201, 150, 60, 0.38),
    0 0 64px rgba(184, 120, 10, 0.28);
}

.eas-comp-itinerary__card--signature .eas-comp-itinerary__frame {
  border-color: rgba(201, 150, 60, 0.55);
}

.eas-comp-itinerary__crown {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

.eas-comp-itinerary__crown-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(250, 247, 240, 0.94);
  border: 1px solid rgba(201, 150, 60, 0.55);
  color: #C9963C;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(26, 15, 6, 0.22);
}

.eas-comp-itinerary__crown-label {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 241, 227, 0.88);
  white-space: nowrap;
}

.eas-comp-itinerary__sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(232, 215, 180, 0.16) 50%, transparent 65%);
  transition: opacity 0.35s ease;
}

.eas-comp-itinerary__card--signature.is-sheen-active .eas-comp-itinerary__sheen {
  opacity: 1;
}

.eas-comp-itinerary__client-quote {
  margin: 0 0 1rem;
  padding: 0;
  border: none;
}

.eas-comp-itinerary__client-quote-text {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(247, 241, 227, 0.92);
  margin: 0 0 0.55rem;
  font-style: normal;
}

.eas-comp-itinerary__client-quote-author {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201, 150, 60, 0.82);
  font-style: normal;
}

.eas-comp-itinerary__ledger--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .eas-comp-itinerary__card--signature {
    order: -1;
    transform: none;
    scale: none;
  }

  .eas-comp-itinerary__card--signature:hover {
    transform: translateY(-6px);
  }

  .eas-comp-itinerary__ledger--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .eas-comp-itinerary__card--signature,
  .eas-comp-itinerary__card--signature:hover,
  .eas-comp-itinerary__tilt {
    transform: none !important;
    transition: none !important;
  }
}

/* ─── EXPERIENCE CARDS V3 — split editorial (LAW 18/19) ─── */
.eas-comp-experience {
  background-color: #FAF7F0;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.5rem 0 3.5rem;
}

/* Section label layout only */
.eas-comp-experience__label {
  margin-bottom: 14px;
}

.eas-comp-experience__head {
  margin-bottom: 16px;
}

.eas-comp-experience__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.04;
  color: #1A0F06;
  margin-bottom: 0;
}

.eas-comp-experience__title-accent {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 300;
  color: #924F08;
}

.eas-comp-experience__intro {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.8;
  color: rgba(26, 15, 6, 0.72);
  max-width: 52ch;
  margin-bottom: 3rem;
}

.eas-comp-experience__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.eas-comp-experience__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background-color: #F2EBD9;
  border: 1px solid rgba(184, 120, 10, 0.22);
  overflow: hidden;
  color: #1A0F06;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.eas-comp-experience__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(26, 15, 6, 0.12);
}

.eas-comp-experience__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #1A0F06;
}

.eas-comp-experience__img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: #1A0F06;
  transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.eas-comp-experience__card:hover .eas-comp-experience__img {
  transform: scale(1.04);
}

.eas-comp-experience__frame {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(232, 192, 106, 0.38);
  pointer-events: none;
  transition: border-color 0.55s ease;
}

.eas-comp-experience__card:hover .eas-comp-experience__frame {
  border-color: rgba(232, 192, 106, 0.58);
}

.eas-comp-experience__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: #F7F1E3;
  background-color: rgba(20, 16, 10, 0.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(247, 241, 227, 0.32);
  padding: 7px 12px;
}

.eas-comp-experience__panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.35rem 1.4rem 1.5rem;
  background-color: #F2EBD9;
}

.eas-comp-experience__eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.26em;
  color: #924F08;
  margin-bottom: 0.55rem;
}

.eas-comp-experience__card-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.12;
  color: #1A0F06;
  margin-bottom: 0.65rem;
}

.eas-comp-experience__desc {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(26, 15, 6, 0.78);
  margin-bottom: 1.15rem;
  flex: 1 1 auto;
}

.eas-comp-experience__foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  border-top: 1px solid rgba(146, 79, 8, 0.28);
  padding-top: 1rem;
  margin-top: auto;
}

.eas-comp-experience__pricetag {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 2px solid #924F08;
  padding-left: 12px;
}

.eas-comp-experience__pricetag-label {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: rgba(26, 15, 6, 0.58);
}

.eas-comp-experience__pricetag-value {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  color: #924F08;
}

.eas-comp-experience__pricetag-value--sm {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

.eas-comp-experience__pricetag-value small {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(26, 15, 6, 0.62);
  margin-left: 6px;
  vertical-align: 2px;
}

.eas-comp-experience__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: #924F08;
  border: 1px solid rgba(146, 79, 8, 0.45);
  padding: 11px 16px;
  min-height: 44px;
  background-color: rgba(250, 247, 240, 0.55);
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.eas-comp-experience__card:hover .eas-comp-experience__cta {
  background-color: #924F08;
  border-color: #924F08;
  color: #FAF7F0;
}

.eas-comp-experience__arrow {
  display: inline-block;
  transition: transform 0.4s ease;
}

.eas-comp-experience__card:hover .eas-comp-experience__arrow {
  transform: translateX(5px);
}

@media (min-width: 600px) {
  .eas-comp-experience__foot {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
  }

  .eas-comp-experience__cta {
    flex-shrink: 0;
    align-self: flex-end;
  }
}

@media (max-width: 1100px) {
  .eas-comp-experience__grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eas-comp-itinerary__card,
  .eas-comp-itinerary__img,
  .eas-comp-itinerary__arrow,
  .eas-comp-experience__card,
  .eas-comp-experience__img,
  .eas-comp-experience__arrow,
  .eas-comp-experience__cta {
    transition: none;
  }

  .eas-comp-itinerary__card:hover,
  .eas-comp-experience__card:hover {
    transform: none;
  }

  .eas-comp-itinerary__card:hover .eas-comp-itinerary__img,
  .eas-comp-experience__card:hover .eas-comp-experience__img {
    transform: none;
  }
}

@media (max-width: 980px) {
  .eas-comp-itinerary__grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }

  .eas-comp-itinerary__card {
    aspect-ratio: 3 / 4;
  }
}

@media (max-width: 640px) {
  .eas-comp-experience__panel {
    padding: 1rem 1.25rem 1.1rem;
  }

  .eas-comp-experience__desc {
    margin-bottom: 0.75rem;
    line-height: 1.62;
  }

  .eas-comp-experience__foot {
    gap: 10px;
    padding-top: 0.75rem;
    margin-top: 0;
  }

  .eas-comp-experience__pricetag {
    padding-left: 10px;
  }

  .eas-comp-experience__pricetag-value {
    font-size: 20px;
  }

  .eas-comp-experience__pricetag-value--sm {
    font-size: 13px;
  }

  .eas-comp-experience__cta {
    align-self: stretch;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    border-radius: 0;
    padding: 12px 14px;
  }
}

@media (max-width: 768px) {
  .eas-comp-experience {
    padding: 2rem 0 2.5rem;
  }

  .eas-comp-experience__panel {
    padding: 1.15rem 1.15rem 1.25rem;
  }

  .eas-comp-experience__eyebrow {
    font-size: 10px;
    margin-bottom: 0.45rem;
  }

  .eas-comp-experience__card-title {
    font-size: clamp(22px, 5.4vw, 26px);
    margin-bottom: 0.5rem;
  }

  .eas-comp-experience__desc {
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 1rem;
  }

  .eas-comp-experience__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 0.85rem;
  }

  .eas-comp-experience__pricetag-value {
    font-size: 22px;
  }

  .eas-comp-experience__pricetag-value--sm {
    font-size: 14px;
  }

  .eas-comp-experience__cta {
    align-self: stretch;
    width: 100%;
    font-size: 10px;
    letter-spacing: 0.16em;
  }

  .eas-comp-itinerary__body {
    padding: 0 22px 18px;
  }

  .eas-comp-itinerary__ledger {
    gap: 10px;
    padding-top: 10px;
    margin-bottom: 8px;
  }

  .eas-comp-itinerary__foot {
    align-items: center;
    gap: 8px;
  }

  .eas-comp-itinerary__pricetag {
    gap: 4px 5px;
    padding: 3px 7px 4px;
    min-width: 0;
    flex: 0 1 auto;
  }

  .eas-comp-itinerary__pricetag-label {
    font-size: 13px;
    letter-spacing: 0.08em;
  }

  .eas-comp-itinerary__pricetag-value {
    font-size: 16px;
  }

  .eas-comp-itinerary__cta {
    font-size: 8px;
    gap: 4px;
    letter-spacing: 0.12em;
  }
}

/* ─── REVIEWS ─── */
.eas-comp-reviews {
  background-color: #FAF7F0;
  padding: 72px 80px 48px;
}

.eas-comp-reviews__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 48px;
}

.eas-comp-reviews__rule {
  width: 40px;
  height: 1px;
  background-color: #B8780A;
  margin-bottom: 20px;
}

/* Section label layout only */
.eas-comp-reviews__label {
  margin-bottom: 0;
}

.eas-comp-reviews__headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(32px, 3.5vw, 48px);
  color: #584738;
  line-height: 1.15;
  margin-top: 16px;
}

.eas-comp-reviews__score-wrap {
  text-align: right;
  flex-shrink: 0;
}

.eas-comp-reviews__score {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(56px, 6vw, 80px);
  color: #584738;
  line-height: 1;
}

.eas-comp-reviews__headline.eas-h2-std {
  color: #584738;
}

.eas-comp-reviews__score-label,
.eas-comp-reviews__count {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: #584738;
  text-transform: uppercase;
}

.eas-comp-reviews__dots {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin: 10px 0;
}

.eas-comp-reviews__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #B8780A;
  display: inline-block;
}

.eas-comp-reviews__pills {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 12px;
}

.eas-comp-reviews__pills span {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #584738;
  border: 1px solid rgba(88, 71, 56, 0.3);
  padding: 7px 16px;
}

/* Reviews Carousel v2 (2026-08-10, same-day founder correction) — single-
   card spotlight with peeking neighbors, replacing the v1 3-per-row grid
   (each card was squeezed to ~1/3 width, reading as a narrow, elongated,
   "technically broken" column rather than a luxurious feature). Prev/next
   buttons sit either side of the masked viewport. */
/* Real mobile bug, caught only by a real screenshot: prev/next as flex
   siblings of the viewport ate ~128px of a 390px-wide screen, so the
   card's own vw-relative width (sized against the FULL window, not its
   now-narrower flex container) overflowed underneath the buttons and
   read as the arrows cutting into the card's own text. Fixed by taking
   the buttons out of flex flow entirely — floated absolutely over the
   track's own peek-inset padding (real empty space there already,
   showing only a faded neighbor card edge), so the viewport always gets
   the full carousel width to size its vw-relative card against. */
.eas-comp-reviews__carousel {
  position: relative;
  margin-bottom: 32px;
}

.eas-comp-reviews__video-card {
  position: relative;
  margin-bottom: 56px;
  border-radius: 4px;
  overflow: hidden;
}

.eas-comp-reviews__video-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 40px;
  width: 48px;
  height: 2px;
  background: linear-gradient(to right, #B8780A, #C9963C);
  z-index: 3;
}

.eas-comp-reviews__video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: #1C1A14;
  overflow: hidden;
}

.eas-comp-reviews__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.eas-comp-reviews__video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 26, 20, 0.85) 0%, rgba(28, 26, 20, 0.3) 50%, rgba(28, 26, 20, 0.15) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.4s ease;
}

.eas-comp-reviews__video-overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.eas-comp-reviews__video-play {
  width: 72px;
  height: 72px;
  border: 2px solid rgba(184, 120, 10, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: border-color 0.3s ease, transform 0.3s ease;
  background-color: rgba(28, 26, 20, 0.4);
  backdrop-filter: blur(4px);
}

.eas-comp-reviews__video-overlay:hover .eas-comp-reviews__video-play {
  border-color: #B8780A;
  transform: scale(1.08);
}

.eas-comp-reviews__video-play-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #F1EADA;
  margin-left: 4px;
}

.eas-comp-reviews__video-caption {
  text-align: center;
}

.eas-comp-reviews__video-label {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(232, 192, 106, 0.95);
  margin-bottom: 8px;
}

.eas-comp-reviews__video-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: normal;
  font-size: 20px;
  color: rgba(254, 253, 251, 0.85);
}

.eas-comp-reviews__video-meta {
  background-color: #FEFDFB;
  padding: 16px 40px;
  border-top: 1px solid rgba(88, 71, 56, 0.08);
}

.eas-comp-reviews__video-verified {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(26, 15, 6, 0.82);
}

/* Masks the track so only the active card + genuine slivers of its
   neighbors show — the real "one and a half" breathing-room effect, not
   a JS-simulated one. Horizontal padding is what reveals the peek: the
   track's own content is wider than the viewport, so the inset creates
   real, visible neighbor edges on both sides at rest. */
.eas-comp-reviews__viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.eas-comp-reviews__viewport::-webkit-scrollbar {
  display: none;
}

.eas-comp-reviews__track {
  display: flex;
  align-items: stretch;
  gap: 28px;
  padding: 4px 14vw;
}

.eas-comp-reviews__card {
  flex: 0 0 min(600px, 74vw);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  background-color: #FEFDFB;
  border: 0.5px solid rgba(88, 71, 56, 0.12);
  padding: 56px 60px;
  position: relative;
  opacity: 0.32;
  transform: scale(0.93);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.eas-comp-reviews__card.is-active {
  opacity: 1;
  transform: scale(1);
}

/* No-JS fallback only — scoped to :not([data-js-ready]) so this can never
   outrank the real, JS-driven `.is-active` state at equal specificity once
   the script has actually run (JS sets data-js-ready on the track before
   calling setActive()). Without this scoping, the fallback and `.is-active`
   would tie in specificity and whichever was later in source order would
   always win, permanently pinning card 1 regardless of navigation. */
.eas-comp-reviews__track:not([data-js-ready]) .eas-comp-reviews__card:first-child {
  opacity: 1;
  transform: scale(1);
}

.eas-comp-reviews__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 60px;
  width: 40px;
  height: 2px;
  background: linear-gradient(to right, #B8780A, #C9963C);
}

.eas-comp-reviews__card p {
  margin-top: 0;
  margin-bottom: 0;
}

.eas-comp-reviews__platform {
  margin-bottom: 22px;
}

.eas-comp-reviews__quote-mark {
  margin-bottom: 8px;
}

.eas-comp-reviews__text {
  margin-bottom: 36px;
  flex: 1;
}

.eas-comp-reviews__card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  border-top: 1px solid rgba(88, 71, 56, 0.1);
  padding-top: 24px;
  margin-top: auto;
}

.eas-comp-reviews__author {
  margin-bottom: 6px;
}

.eas-comp-reviews__rating {
  display: flex;
  gap: 4px;
}

.eas-comp-reviews__pip {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #C9963C;
  display: inline-block;
}

/* Dot pagination — v2: one dot per real review (mockup's own #rv-dots was
   one per page-of-3; the spotlight layout is one card at a time, so the
   1:1 mapping is the correct equivalent). Wraps rather than overflowing
   when the real review count is large (up to 21 today). Touch target
   sized down from the original 44px spec on purpose — with up to 21 dots
   in a row, full 44px hit boxes overlap too heavily for precise tapping;
   32px is still comfortably above the accessibility floor most guidance
   treats as acceptable for a dense, secondary (not primary) control —
   prev/next remain the real 44px+ primary touch targets. */
.eas-comp-reviews__page-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  max-width: 480px;
  margin: 8px auto 0;
}

.eas-comp-reviews__page-dot {
  width: 32px;
  height: 32px;
  padding: 0;
  margin: -13px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eas-comp-reviews__page-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(88, 71, 56, 0.25);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.eas-comp-reviews__page-dot.is-active::before {
  background-color: #B8780A;
  transform: scale(1.35);
}

.eas-comp-reviews__nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #FEFDFB;
  border: 0.5px solid rgba(88, 71, 56, 0.25);
  color: #584738;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
  box-shadow: 0 6px 16px -8px rgba(28, 26, 20, 0.25);
}

.eas-comp-reviews__nav-btn--prev {
  left: 4px;
}

.eas-comp-reviews__nav-btn--next {
  right: 4px;
}

.eas-comp-reviews__nav-btn:hover {
  background-color: #B8780A;
  color: #FEFDFB;
}

.eas-comp-reviews__nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background-color: #FEFDFB;
  color: #584738;
}

.eas-comp-reviews .eas-comp-reviews__trust {
  text-align: center;
  margin-top: 48px;
  margin-bottom: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 400 !important;
  font-size: 13px;
  line-height: 1.5 !important;
  letter-spacing: 0.14em;
  color: #584738;
  text-transform: uppercase;
}

.eas-comp-reviews__tato {
  /* TATO membership license lapsed 2026-08 (renews next month) — hidden until renewed. Wrapper kept, not deleted, so it can come back with one line. */
  display: none !important;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 0;
  background-color: transparent;
  width: 100%;
}

.eas-comp-reviews__tato-img {
  display: block;
  max-height: 56px;
  height: auto;
  width: auto;
  max-width: 100%;
  opacity: 0.65;
  filter: grayscale(20%);
}

/* Smaller peek inset at tablet/mobile — 14vw of side padding on a narrow
   viewport would leave almost nothing for the card itself; tightening the
   inset keeps a real but modest sliver of the neighbor card visible while
   giving the active card most of the available width. */
@media (max-width: 900px) {
  .eas-comp-reviews {
    padding-left: 32px;
    padding-right: 32px;
  }

  .eas-comp-reviews__track {
    padding: 4px 8vw;
  }

  .eas-comp-reviews__card {
    padding: 44px 40px;
  }
}

@media (max-width: 640px) {
  .eas-comp-reviews__track {
    padding: 4px 13vw;
    gap: 16px;
  }

  /* Real, measured fix (not the original 88vw guess): the 44px absolute
     nav buttons need real room in the peek zone, not the active card's own
     area. 74vw card + 13vw padding on each side leaves ~13vw (≈51px on a
     390px screen) of genuine peek space per edge — enough for the button
     plus a small margin, confirmed via a real before/after screenshot. */
  .eas-comp-reviews__card {
    flex-basis: 74vw;
    padding: 36px 24px;
  }

  .eas-comp-reviews__carousel {
    gap: 8px;
  }

  /* 44px minimum touch target on the arrow controls (mobile minimum). */
  .eas-comp-reviews__nav-btn {
    width: 44px;
    height: 44px;
  }
}

/* ─── FINAL CTA (footer-redesign-mockup.html .final-cta — parchment) ─── */
.eas-comp-final {
  background: linear-gradient(180deg, #F2EBD9 0%, #EDE5CE 65%, #EDE5CE 100%) !important;
  padding: 140px 80px;
  position: relative;
  overflow: hidden;
  color: #1C1A14;
}

.eas-comp-final::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 8vw;
  right: 8vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, #B59E7D, transparent);
  opacity: 0.6;
  pointer-events: none;
}

.eas-comp-final__rotated {
  position: absolute;
  right: -72px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  font-family: 'Jost', sans-serif;
  font-weight: 200;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(88, 71, 56, 0.28);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

.eas-comp-final__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  align-items: center;
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.eas-comp-final__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.38em;
  color: #B8780A !important;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.eas-comp-final__eyebrow span:not(.eas-comp-final__eyebrow-rule) {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.38em;
  color: #B8780A;
  text-transform: uppercase;
}

.eas-comp-final__eyebrow-rule {
  width: 28px;
  height: 1px;
  background-color: #B8780A;
  flex-shrink: 0;
}

.eas-comp-final__headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(40px, 5vw, 64px);
  color: #1C1A14 !important;
  line-height: 1.15;
  font-style: normal;
  margin: 0;
}

.eas-comp-final__headline em {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal !important;
  font-weight: 300;
  color: #B8780A !important;
}

.eas-comp-final__sub {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 44px);
  color: #B8780A !important;
  margin-top: 8px;
}

.eas-comp-final__action {
  border-left: 1px solid rgba(88, 71, 56, 0.14);
  padding-left: 40px;
}

.eas-comp-final__body {
  font-family: 'Jost', sans-serif !important;
  font-weight: 300;
  font-size: 13px !important;
  letter-spacing: 0.02em;
  line-height: 1.7 !important;
  color: #584738 !important;
  opacity: 0.85;
  margin: 0 0 32px;
}

/* Solid forest fill at rest, gold slide-in on hover — reversed 2026-08-07 per
   direct founder instruction: the resting button color must be the forest
   tone (#2C3424, matches the footer background), not gold — gold is now
   the hover-only accent instead of the other way around. */
.eas-comp-final__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  font-family: 'Jost', sans-serif !important;
  font-weight: 500;
  font-size: 11.5px;
  line-height: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: #2C3424 !important;
  border: 1px solid #2C3424;
  color: #F4F1E9 !important;
  padding: 17px 36px;
  margin-bottom: 20px;
  text-decoration: none;
  transition: color 0.35s ease;
  min-height: 48px;
  width: auto;
  max-width: 100%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.eas-comp-final__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #B8780A;
  transform: translateX(-101%);
  transition: transform 0.35s ease;
  z-index: 0;
}

.eas-comp-final__btn-label {
  position: relative;
  z-index: 1;
  transition: color 0.35s ease;
}

.eas-comp-final__btn:hover::before,
.eas-comp-final__btn:focus-visible::before {
  transform: translateX(0);
}

.eas-comp-final__btn:hover .eas-comp-final__btn-label,
.eas-comp-final__btn:focus-visible .eas-comp-final__btn-label {
  color: #1C1A14;
}

.eas-comp-final__secondary {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(88, 71, 56, 0.55);
  text-transform: uppercase;
  text-decoration: none;
  margin-left: 20px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease;
}

.eas-comp-final__secondary:hover,
.eas-comp-final__secondary:focus-visible {
  color: #584738;
}

@media (prefers-reduced-motion: reduce) {
  .eas-comp-final__btn,
  .eas-comp-final__btn::before,
  .eas-comp-final__btn-label {
    transition: none !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .eas-comp-final__headline {
    font-size: clamp(36px, 5vw, 52px) !important;
  }
}

@media (max-width: 768px) {
  .eas-comp-hero-image {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* min-height, not a fixed height — see the desktop rule's comment above;
       a long real headline wrapping to several lines at mobile width must
       grow the section, not get clipped below the fold. */
    min-height: 85vh;
    box-sizing: border-box;
  }

  /* Override inline background-position; ken-burns scale clips portrait crop */
  .eas-comp-hero-image__bg {
    background-size: cover !important;
    background-position: 68% 40% !important;
    transform: none !important;
    animation: none !important;
  }

  .eas-comp-hero-image__label {
    position: relative;
    padding: 0 24px;
    margin-bottom: 24px;
    z-index: 5;
    box-sizing: border-box;
    width: 100%;
  }

  .eas-comp-hero-image__content {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 24px 4rem;
    box-sizing: border-box;
    z-index: 5;
  }

  .eas-comp-hero-image__headline,
  .eas-comp-hero-image__sub {
    max-width: 100%;
  }

  /* No eyebrow: transparent nav clearance without compressing bottom copy */
  .eas-comp-hero-image--no-eyebrow {
    padding-top: 118px;
    justify-content: flex-end;
  }

  .eas-comp-hero-image--no-eyebrow .eas-comp-hero-image__content {
    padding: 0 24px 4rem;
    margin: 0;
  }

  .eas-comp-hero-image__headline {
    margin-bottom: 28px;
  }

  .eas-comp-hero-image__sub {
    font-size: 17px;
    font-weight: 300;
    color: rgba(254, 253, 251, 0.82) !important;
    margin-bottom: 44px;
    line-height: 1.68;
  }

  .eas-comp-hero-image__label {
    font-size: 9px;
    letter-spacing: 0.4em;
    margin-bottom: 24px;
    gap: 14px;
  }

  .eas-comp-hero-image__label-rule {
    width: 28px;
  }

  .eas-comp-hero-image__cta {
    font-size: 10px;
    letter-spacing: 0.32em;
    min-height: 44px;
    align-items: center;
  }

  .eas-comp-itinerary,
  .eas-comp-experience,
  .eas-comp-reviews,
  .eas-comp-final {
    padding-left: 24px;
    padding-right: 24px;
  }

  .eas-comp-reviews__header {
    flex-direction: column;
  }

  .eas-comp-reviews__score-wrap {
    text-align: left;
  }

  .eas-comp-reviews__dots,
  .eas-comp-reviews__pills {
    justify-content: flex-start;
  }

  .eas-comp-reviews__score {
    font-size: 64px;
  }

  .eas-comp-reviews__headline {
    font-size: clamp(26px, 7vw, 36px);
  }

  .eas-comp-reviews .eas-comp-reviews__trust {
    font-size: 12px !important;
    letter-spacing: 0.12em;
    line-height: 1.6 !important;
    padding-left: 16px;
    padding-right: 16px;
  }

  .eas-comp-reviews__tato {
    margin-top: 20px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .eas-comp-reviews__tato-img {
    max-height: 48px;
  }

  .eas-comp-reviews__video-meta {
    padding: 12px 24px;
  }

  .eas-comp-reviews__video-verified {
    font-size: 11px;
    letter-spacing: 0.22em;
  }

  .eas-comp-itinerary__excerpt {
    font-size: 15px;
  }

  .eas-comp-final__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .eas-comp-final__action {
    border-left: none;
    padding-left: 0;
  }

  .eas-comp-final__rotated {
    display: none;
  }

  .eas-comp-final {
    padding: 80px 24px;
  }

  .eas-comp-final__headline {
    font-size: clamp(34px, 8vw, 52px) !important;
  }

  .eas-comp-final__body {
    font-size: 16px !important;
  }

  .eas-comp-final__secondary {
    display: block;
    margin-left: 0;
    margin-top: 16px;
    min-height: 44px;
    line-height: 44px;
  }

  .eas-comp-final__btn {
    font-size: 13px;
    padding: 20px 32px;
    min-height: 56px;
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }
}

/* Tablet no-eyebrow: reserve nav row — flex-end lets tall copy grow into header */
@media (min-width: 641px) and (max-width: 1024px) {
  .eas-comp-hero-image--no-eyebrow {
    display: grid;
    grid-template-rows: 118px 1fr auto;
    grid-template-columns: minmax(0, 1fr);
    align-content: stretch;
    padding-top: 0;
    min-height: max(640px, 100vh);
    box-sizing: border-box;
  }

  .eas-comp-hero-image--no-eyebrow .eas-comp-hero-image__content {
    grid-row: 3;
    grid-column: 1;
    margin: 0;
    padding: 0 40px 100px;
    max-width: none;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .eas-comp-itinerary__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* LAW 18b — hero cascade sovereignty (parity kit owns .eas-h1-hero) */
h1.eas-comp-hero-image__headline.eas-h1-hero {
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.32) !important;
}

/* ─────────────────────────────────────────────────────────────
   OFFER SEAL — shared component (Offers Component System, 2026-08-01)
   Extracted verbatim from offer-badge-spotlight-mockup-v3.html's `.seal`
   block. LAW 18 self-contained: literal hex values, no reliance on any
   host page's :root tokens. Absolutely positioned — the host card element
   only needs position:relative (already true on every card this renders
   inside: .acc-arc-card, .eas-itin-day-card-photo, .eas-dep-day-card-photo).
   ───────────────────────────────────────────────────────────── */
.eas-comp-offerseal {
  position: absolute;
  top: 18px;
  left: -1px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px 9px 14px;
  background: linear-gradient(120deg, #C9963C 0%, #B8780A 55%, #924F08 100%);
  box-shadow: 0 6px 16px -4px rgba(146, 79, 8, 0.55), 0 2px 4px rgba(28, 26, 20, 0.2);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
}
.eas-comp-offerseal::before {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 0;
  height: 0;
  border-left: 6px solid #924F08;
  border-bottom: 6px solid transparent;
  filter: brightness(0.55);
}
.eas-comp-offerseal__icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: #FEFDFB;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.eas-comp-offerseal__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.eas-comp-offerseal__eyebrow {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 8.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 250, 238, 0.82);
}
.eas-comp-offerseal__label {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: 0.3px;
  color: #FEFDFB;
  text-shadow: 0 1px 2px rgba(28, 26, 20, 0.25);
}

/* ─────────────────────────────────────────────────────────────
   THE OFFER SPOTLIGHT — shared component (Offers Component System,
   2026-08-01; repositioned + restyled as a card, Offers Refinement v1,
   same day). Was a full-width parchment banner sitting in a locked
   Pricing → Offer → FAQ → Final CTA sequence, disconnected from the
   reservation form. Now a cream card with a 2px gold top rule — the same
   visual language as single-eas_departure.php's `.eas-dep-reserve-card`
   — so the two read as one connected unit wherever the host template
   places this render call directly above its reservation form / booking
   CTA. See CANONICAL-SITE-ARCHITECTURE.md §1.8 for the ratified rule.
   LAW 18 unchanged: every value below is still a literal hex, no reliance
   on any host page's :root tokens.
   ───────────────────────────────────────────────────────────── */
.eas-comp-offerspot {
  background: linear-gradient(180deg, #F2EBD9 0%, #EDE5CE 100%);
  padding: 90px 24px 40px;
}
.eas-comp-offerspot__inner {
  max-width: 680px;
  margin: 0 auto;
}
.eas-comp-offerspot__card {
  background: #FEFDFB;
  border-top: 2px solid #B8780A;
  padding: 56px 56px 52px;
  box-shadow: 0 24px 60px -34px rgba(28, 26, 20, 0.22);
}
.eas-comp-offerspot__head {
  text-align: center;
  margin-bottom: 20px;
}
.eas-comp-offerspot__tag {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: #924F08;
  margin-bottom: 10px;
}
.eas-comp-offerspot__h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 29px;
  color: #2C3424;
  margin: 0;
}
.eas-comp-offerspot__intro {
  max-width: 46ch;
  margin: 12px auto 0;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: rgba(88, 71, 56, 0.72);
}
.eas-comp-offerspot__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 22px auto 34px;
  max-width: 160px;
}
.eas-comp-offerspot__line {
  flex: 1;
  height: 1px;
  background: rgba(184, 120, 10, 0.5);
}
.eas-comp-offerspot__ornament svg {
  width: 9px;
  height: 9px;
  color: #B8780A;
  flex-shrink: 0;
}
.eas-comp-offerspot__stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.eas-comp-offerspot__block {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 22px;
  padding: 28px 0;
}
.eas-comp-offerspot__block + .eas-comp-offerspot__block {
  border-top: 1px solid rgba(184, 120, 10, 0.5);
}
.eas-comp-offerspot__camp {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #B59E7D;
  padding-top: 5px;
}
.eas-comp-offerspot__camp span {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 18px;
  color: #2C3424;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 7px;
}
.eas-comp-offerspot__headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 25px;
  color: #924F08;
  margin-bottom: 12px;
  line-height: 1.28;
}
.eas-comp-offerspot__body {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: rgba(88, 71, 56, 0.72);
  margin-bottom: 14px;
  line-height: 1.75;
}
.eas-comp-offerspot__avail {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 12.5px;
  color: #584738;
  display: flex;
  align-items: center;
  gap: 8px;
}
.eas-comp-offerspot__avail svg {
  width: 13px;
  height: 13px;
  color: #B8780A;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .eas-comp-offerspot__block {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .eas-comp-offerspot {
    padding: 56px 16px 28px;
  }
  .eas-comp-offerspot__card {
    padding: 40px 24px 36px;
  }
}

/* ─────────────────────────────────────────────────────────────
   EXPERIENCE CARD — shared component (Workflow D, 2026-08-02).
   Renders identically on the standalone /experiences/ archive grid and
   wherever an experience is attached (Itinerary day, Departure page,
   Accommodation page) — one component, every host. LAW 18 self-contained:
   literal hex, no reliance on any host page's :root tokens. The offer seal
   (.eas-comp-offerseal, above) attaches inside .eas-exp-card__img, which is
   position:relative for exactly that reason — same convention as every
   other card this seal renders on.
   ───────────────────────────────────────────────────────────── */
.eas-exp-card {
  display: flex;
  flex-direction: column;
  background: #FEFDFB;
  border: 1px solid rgba(88, 71, 56, 0.12);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.eas-exp-card:hover {
  box-shadow: 0 20px 40px -24px rgba(28, 26, 20, 0.28);
  transform: translateY(-2px);
}
.eas-exp-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* Fix Addendum v1.1 (Fix 1, 2026-08-02) — "+ Add to Itinerary" replaces the
   old standalone "Reserve" affordance; Experiences attach to a client's
   itinerary via the cart (js/eas-cart.js), never booked on their own. */
.eas-exp-card__add {
  display: block;
  width: 100%;
  padding: 13px 22px;
  background: #B8780A;
  color: #FEFDFB;
  border: none;
  border-top: 1px solid rgba(88, 71, 56, 0.12);
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.eas-exp-card__add:hover {
  background: #2C3424;
}
.eas-exp-card__add.is-added {
  background: #4B6B3C;
}
.eas-exp-card__img {
  position: relative;
  height: 190px;
  background-size: cover;
  background-position: center;
  background-color: #2C3424;
  background-image: linear-gradient(120deg, #8a6a3f, #3f4a2e);
}
.eas-exp-card__body {
  padding: 22px;
}
.eas-exp-card__tag {
  display: block;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #924F08;
  margin-bottom: 8px;
}
.eas-exp-card__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.25;
  color: #1C1A14;
  margin: 0 0 10px;
}
.eas-exp-card__context {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.6;
  color: #924F08;
  margin: 0 0 10px;
}
.eas-exp-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 12.5px;
  color: rgba(88, 71, 56, 0.72);
  border-top: 1px solid rgba(88, 71, 56, 0.12);
  padding-top: 12px;
  margin-top: 12px;
}
.eas-exp-card__meta-price {
  color: #924F08;
  font-weight: 500;
}

/* Grid wrapper for the archive + any host page's card row — 3-up desktop,
   1-up mobile, same breakpoint convention used throughout this file. */
.eas-exp-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .eas-exp-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .eas-exp-card-grid { grid-template-columns: 1fr; }
}

/* Cart line items — shared shape wherever the real Experience cart renders
   as a list (currently the Departure reservation form). Own namespace,
   LAW 18 self-contained hex, hooked via js/eas-cart.js's
   [data-eas-cart-*] attribute contract, not classes, so a host template's
   own CSS scope (e.g. .eas-dep-page) can still theme the wrapper card. */
.eas-cart-panel {
  background: #F2EBD9;
  border: 1px solid rgba(88, 71, 56, 0.16);
  padding: 20px 22px;
}
.eas-cart-panel__label {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #924F08;
  margin: 0 0 12px;
}
.eas-cart-panel__empty {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 13.5px;
  color: rgba(88, 71, 56, 0.65);
  margin: 0;
}
.eas-cart-line-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eas-cart-line {
  /* Pre-promotion QA fix — was a single-row flex (name/price/remove all on
     one line). name had flex:1 with no white-space/overflow handling at
     all, so a real title ("Balloon Safari Over the Serengeti") wrapped
     freely inside that row and collided with the fixed-width price/remove
     siblings mid-word. Now: name gets its own row (clamped to 2 lines with
     ellipsis for anything longer), price sits on its own row underneath,
     remove spans both rows on the right — nothing can collide regardless
     of title length or panel width. */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 2px 10px;
  background: #FEFDFB;
  border: 1px solid rgba(88, 71, 56, 0.12);
  padding: 10px 14px;
}
.eas-cart-line__name {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.25;
  color: #1C1A14;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eas-cart-line__price {
  grid-column: 1;
  grid-row: 2;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  color: #924F08;
  white-space: nowrap;
}
.eas-cart-line__remove {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  background: none;
  border: none;
  color: rgba(88, 71, 56, 0.55);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.eas-cart-line__remove:hover {
  color: #B8780A;
}

/* ─── FILTER BAR (ARCHIVES-RENOVATION v1.0 Phase 2, 2026-08-07) ───
   Pill filter, one real implementation shared by Departures and
   Itineraries archives (see partials/components/filter-bar.php docblock).
   NON-STICKY BY DESIGN (2026-08-07 follow-up) — the site's fixed nav
   (LAW 15) already occupies permanent screen height; stacking a second
   sticky element under it compounded to eat too much viewport on every
   scroll. The bar now sits in normal document flow, same as every other
   section on these pages — it scrolls away with the rest of the page
   content instead of pinning under the nav. Do not re-add
   position:sticky here without an explicit request — this was a direct
   founder correction to the Phase 2 (2026-08-07) sticky build. */
.eas-comp-filterbar {
  background: #FEFDFB;
  border-bottom: 1px solid rgba(184, 120, 10, 0.15);
  padding: 1rem 2rem;
  z-index: 40;
}
.eas-comp-filterbar__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.eas-comp-filterbar__label {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #584738;
  white-space: nowrap;
}
.eas-comp-filterbar__sep {
  width: 1px;
  height: 24px;
  background: rgba(88, 71, 56, 0.14);
  margin: 0 0.3rem;
}
.eas-comp-filterbar__pills {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.eas-comp-filterbar__pill {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  padding: 0.38rem 0.85rem;
  border-radius: 100px;
  border: 1px solid rgba(184, 120, 10, 0.5);
  background: transparent;
  color: #1C1A14;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  line-height: 1;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.eas-comp-filterbar__pill:hover {
  border-color: #B8780A;
  color: #924F08;
}
.eas-comp-filterbar__pill--active {
  background: #2C3424;
  color: #C9963C;
  border-color: #2C3424;
}
.eas-comp-filterbar__count {
  margin-left: auto;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  color: rgba(88, 71, 56, 0.72);
}
.eas-comp-filterbar-hidden {
  display: none !important;
}
@media (max-width: 768px) {
  .eas-comp-filterbar__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .eas-comp-filterbar,
  .eas-comp-filterbar__pill {
    transition: none !important;
  }
}