@charset "utf-8";

/* ==========================================================================
   Miavana by Time + Tide — demonstration mock-up by Octoco AI.
   Not affiliated with, endorsed by, or approved by this property.

   Character notes, read off the live site's own stylesheet on 2026-08-16
   rather than guessed (miavana.com/app/themes/miavana-new/.../app.css):
     * Two faces only. `Gotham A, Gotham B` for everything structural, and
       `mrs-eaves-xl-serif` — a Baskerville revival — set ITALIC for lead
       statements (their `.title-3 p`: italic serif, 25px, line-height 36px).
     * Their tracking values are small and deliberate: -.01em, .02em, .03em.
       The wide tracking is reserved for the wordmark and the small caps labels.
     * Their accent for a subheading is #dfa275, a warm sand. Their Tailwind
       `primary` is #9fd4be, a pale sea green. Ground is white; ink is #0b0b0b.
     * The page is LIGHT. Almost everything sits on white with a lot of air
       around it. Restraint is the brand; do not add a second accent.

   No webfonts: static S3, no CDN. Each stack names the real face first, then
   the closest thing a machine already has. Baskerville (macOS) stands in for
   Mrs Eaves; Avenir Next / Futura stand in for Gotham.

   Contrast: computed, not eyeballed. Ratios are in the comments beside the
   tokens. #dfa275 is 2.2:1 on white and #9fd4be is 1.7:1 — both are therefore
   DECORATIVE ONLY here. Where the accent has to carry text it is #96551f.
   ========================================================================== */

@layer reset, base, layout, components;

@layer reset {
  html { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, table, caption {
    margin: 0;
    padding: 0;
  }
  ul, ol { list-style: none; }
  img { display: block; max-inline-size: 100%; block-size: auto; }
  table { border-collapse: collapse; }
  :where(div, section, header, footer, nav, main, article, aside,
         h1, h2, h3, h4, p, ul, li, figure, img, table, td, th, a, span) {
    box-sizing: inherit;
  }
}

@layer base {
  :root {
    color-scheme: light;

    --paper:    #ffffff;
    --shell:    #f7f7f4;
    --ink:      #0b0b0b;   /* 19.7:1 on white, 18.3:1 on shell */
    --body-ink: #313131;   /* 13.0:1 on white, 12.1:1 on shell */
    --muted:    #5a5a5a;   /*  6.9:1 on white,  6.4:1 on shell */
    --sand-ink: #96551f;   /*  5.8:1 on white — the readable cousin of --sand */

    /* decorative only — rules, chips, dividers. Never text on a light ground. */
    --sand:     #dfa275;   /*  2.2:1 on white; 9.0:1 on --ink */
    --sea:      #9fd4be;   /*  1.7:1 on white; carries --ink at 11.8:1 */
    --line:     #e5e5e5;
    --line-2:   #d9d5cd;

    --font-display: "mrs-eaves-xl-serif", "Mrs Eaves XL Serif", Baskerville,
                    "Baskerville Old Face", "Hoefler Text", "Big Caslon",
                    Garamond, "Times New Roman", serif;
    --font-body:    "Gotham A", "Gotham", "Avenir Next", Avenir, Futura,
                    "Century Gothic", "Helvetica Neue", Helvetica, Arial,
                    sans-serif;

    --gutter:  clamp(1.25rem, 6vw, 5rem);
    --wide:    78rem;
    --measure: 36rem;
    --section: clamp(4rem, 10vw, 8.5rem);
  }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--body-ink);
    font-family: var(--font-body);
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.01em;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--ink);
    line-height: 1.2;
    text-wrap: balance;
  }

  p { text-wrap: pretty; overflow-wrap: break-word; }
  p + p { margin-block-start: 1.2em; }

  a { color: inherit; }

  a:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid var(--sand-ink);   /* 5.8:1 on white, 5.4:1 on shell */
    outline-offset: 3px;
  }
  /* On the dark surfaces --sand-ink is only 3.4:1 — over the 3:1 floor but not
     by much. --sand is 9.0:1 there, so swap it rather than squeak past. */
  :is(.plan, .hero) a:focus-visible,
  .skip-link:focus-visible {
    outline-color: var(--sand);
  }

  ::selection { background: var(--sea); color: var(--ink); }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
}

@layer layout {
  .skip-link {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 50;
    padding: 0.9rem 1.25rem;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    translate: 0 -120%;
  }
  .skip-link:focus-visible { translate: 0 0; }

  .eyebrow {
    margin-block-end: 1rem;
    color: var(--sand-ink);
    font-size: 0.6875rem;
    letter-spacing: 0.28em;
    line-height: 1.6;
    text-transform: uppercase;
  }
  .eyebrow--light { color: var(--sand); }   /* 9.0:1 over the hero scrim */

  /* Their signature: the lead statement is an italic Baskerville, and it is
     the largest thing in the section — bigger than the heading above it. */
  .serif-lede {
    margin-block-start: 1.1rem;
    color: var(--ink);
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.875rem);
    line-height: 1.44;
    letter-spacing: -0.01em;
  }

  .section-head {
    max-inline-size: var(--measure);
    margin-block-end: clamp(2.25rem, 6vw, 4rem);
  }
  .section-head--center { margin-inline: auto; text-align: center; }
  .section-head h2 {
    font-size: clamp(1rem, 0.94rem + 0.5vw, 1.25rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .fine {
    margin-block-start: 1.1rem;
    color: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.75;
  }
}

@layer components {

  /* ========================================================================
     Masthead
     ==================================================================== */
  .masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 1rem;
    padding: 1.6rem var(--gutter) 1.2rem;
    background: var(--paper);
    border-block-end: 1px solid var(--line);
    text-align: center;
  }

  .wordmark { display: grid; gap: 0.4rem; justify-items: center; text-decoration: none; grid-template-columns: minmax(0, 1fr); }
  /* The property's own lockup, as an <img>. Black artwork on transparency over --paper. The
     accessible name is the alt attribute; there is no sibling span to duplicate it. */
  .wordmark__img {
    inline-size: clamp(8.5rem, 28vw, 11.5rem);
    block-size: auto;
  }
  .wordmark__name {
    color: var(--ink);
    font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.35rem);
    letter-spacing: 0.42em;
    text-indent: 0.42em;   /* re-centre against the trailing tracking gap */
    text-transform: uppercase;
  }
  .wordmark__sub {
    color: var(--muted);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
  }

  .masthead__nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.25rem;
  }
  .masthead__nav a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;      /* 44px touch target */
    padding-inline: 0.65rem;
    color: var(--body-ink);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    border-block-end: 1px solid transparent;
  }
  .masthead__nav a:hover {
    color: var(--sand-ink);
    border-block-end-color: var(--sand);
  }

  /* ========================================================================
     Hero
     ==================================================================== */
  .hero { position: relative; isolation: isolate; background: var(--shell); }
  .hero__img {
    inline-size: 100%;
    block-size: min(74svh, 42rem);
    object-fit: cover;
  }
  .hero__body {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: 4.5rem var(--gutter) clamp(2rem, 5vw, 3.5rem);
    /* No text sits above the 72% alpha stop. Over a worst-case pure-white
       photograph that ground is #4f4f4f and white text on it is 8.1:1. */
    background: linear-gradient(to top,
                  rgb(11 11 11 / 0.88) 0%,
                  rgb(11 11 11 / 0.72) 68%,
                  rgb(11 11 11 / 0) 100%);
    color: var(--paper);
    text-align: center;
  }
  .hero__title {
    color: var(--paper);
    font-size: clamp(2.1rem, 1.4rem + 3.2vw, 4rem);
    font-weight: 400;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    text-transform: uppercase;
    /*
     * 1.4.4 Resize Text. Same defect as Londolozi's wordmark and worse here, because 0.34em of
     * tracking is more than twice as much: at a 200% default font size "Miavana" is one word with
     * no wrap opportunity in it, sized off `rem` while the `rem`-based media queries below stay
     * pinned to the initial 16px, so it overflows the viewport and scrolls the page sideways.
     * Inert at every normal font size — `break-word` engages only when the word cannot otherwise
     * fit. See the fuller note in the Londolozi sheet.
     */
    overflow-wrap: break-word;
  }
  .hero__lede {
    margin-block-start: 1.1rem;
    color: var(--paper);
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.0625rem, 0.95rem + 0.7vw, 1.5rem);
    letter-spacing: 0.01em;
  }

  /* ========================================================================
     The Island
     ==================================================================== */
  .island {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.25rem, 6vw, 4rem);
    max-inline-size: var(--wide);
    margin-inline: auto;
    padding: var(--section) var(--gutter);
  }
  .island__text { max-inline-size: var(--measure); }
  .island__text h2 {
    font-size: clamp(1rem, 0.94rem + 0.5vw, 1.25rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .island__text .serif-lede { margin-block-end: 1.6rem; }
  .island__figure img {
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--shell);
  }
  /* The staged frame is a near-vertical drone shot (1499x2000). Cropping it to 3:2 would throw
     away the subject, so the slot follows the picture — capped so it cannot run away with the
     column at wide widths or swallow the fold on a phone. */
  .island__figure--portrait {
    max-inline-size: 24rem;
    margin-inline: auto;
  }
  .island__figure--portrait img { aspect-ratio: 4 / 5; }
  @media (min-width: 58rem) {
    .island {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      align-items: center;
      gap: clamp(3rem, 7vw, 6rem);
    }
  }

  /* ========================================================================
     Access
     ==================================================================== */
  .access { background: var(--shell); }
  .access__inner {
    max-inline-size: 52rem;
    margin-inline: auto;
    padding: var(--section) var(--gutter);
  }
  .access h2 {
    font-size: clamp(1rem, 0.94rem + 0.5vw, 1.25rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .access__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-block-start: 2rem;
    padding-block: 1.6rem;
    border-block: 1px solid var(--line-2);
  }
  .access__list li { font-size: 0.9375rem; line-height: 1.7; }
  .access__leg {
    display: block;
    color: var(--ink);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  @media (min-width: 42rem) {
    .access__list li {
      display: grid;
      grid-template-columns: 16rem minmax(0, 1fr);
      gap: 1.5rem;
      align-items: baseline;
    }
  }

  /* ========================================================================
     Villas
     ==================================================================== */
  .villas {
    max-inline-size: var(--wide);
    margin-inline: auto;
    padding: var(--section) var(--gutter);
  }

  .villa-grid { display: grid; gap: clamp(2.5rem, 5vw, 3rem); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 46rem) { .villa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .villa__figure { margin-block-end: 1.25rem; }
  .villa__figure img {
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--shell);
  }
  .villa h3 {
    font-size: 0.875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .villa__meta {
    margin-block-start: 0.5rem;
    color: var(--muted);
    font-size: 0.8125rem;
  }
  .villa__rate {
    margin-block-start: 0.9rem;
    padding-block-start: 0.9rem;
    border-block-start: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-variant-numeric: lining-nums tabular-nums;
    line-height: 1.3;
  }
  .villa__rate span {
    display: block;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .villa__rate--lg { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }

  .villa__amenities {
    max-inline-size: 52rem;
    margin-block-start: clamp(2.5rem, 6vw, 4rem);
    padding-block-start: clamp(2rem, 5vw, 3rem);
    border-block-start: 1px solid var(--line);
    color: var(--body-ink);
    font-size: 0.9375rem;
  }
  .villa__amenities + .fine { max-inline-size: 52rem; }

  .exclusive {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3rem);
    margin-block-start: clamp(3rem, 7vw, 5rem);
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--shell);
  }
  .exclusive__figure img {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--line);
  }
  .exclusive h3 {
    font-size: clamp(1rem, 0.94rem + 0.5vw, 1.25rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  @media (min-width: 58rem) {
    .exclusive { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
  }

  /* ========================================================================
     Experiences
     ==================================================================== */
  .experiences {
    max-inline-size: var(--wide);
    margin-inline: auto;
    padding: var(--section) var(--gutter);
    border-block-start: 1px solid var(--line);
  }

  /* One lead frame for the whole section — see the note in index.html for why the cards below
     carry none. Sits between the section head and the grid. */
  .exp-lead { margin-block-end: clamp(2.5rem, 6vw, 4rem); }
  .exp-lead img {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--shell);
  }

  .exp-grid { display: grid; gap: clamp(2.25rem, 5vw, 3.25rem); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 40rem) { .exp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 66rem) { .exp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .exp__figure { margin-block-end: 1.1rem; }
  .exp__figure img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--shell);
  }
  .exp h3 {
    margin-block: 0.55rem 0.75rem;
    font-size: 0.875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .exp p { font-size: 0.9375rem; line-height: 1.75; }
  .exp__fine {
    margin-block-start: 0.9rem;
    color: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.7;
  }

  .tag {
    display: inline-block;
    color: var(--muted);
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .tag--in, .tag--part { color: var(--sand-ink); }
  .tag::before {
    content: "";
    display: inline-block;
    inline-size: 1.4rem;
    block-size: 1px;
    margin-inline-end: 0.55rem;
    background: currentcolor;
    vertical-align: 0.3em;
  }

  /* --- helicopter adventures ---------------------------------------- */
  .heli {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    margin-block-start: clamp(3rem, 7vw, 5.5rem);
    padding-block-start: clamp(2.5rem, 6vw, 4rem);
    border-block-start: 1px solid var(--line);
  }
  .heli__figure img {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--shell);
  }
  .heli__body { container-type: inline-size; }
  .heli__body h3 {
    font-size: clamp(1rem, 0.94rem + 0.5vw, 1.25rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .quote {
    margin-block-start: 1.1rem;
    color: var(--ink);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.0625rem;
    line-height: 1.55;
  }
  .heli__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin-block-start: 2rem;
  }
  /* Responds to the column it lands in, not to the viewport — at 58rem the
     body becomes a half-width column and must not keep the 2-up inner grid. */
  @container (min-width: 34rem) {
    .heli__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; }
  }
  .heli__list li {
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--line);
  }
  .heli__list h4 {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .heli__list p { margin-block-start: 0.55rem; font-size: 0.875rem; line-height: 1.7; }

  .por {
    color: var(--sand-ink);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .por--lg {
    margin-block-start: 1.2rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-style: italic;
    letter-spacing: 0.01em;
    text-transform: none;
  }

  @media (min-width: 58rem) {
    .heli { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
  }

  /* ========================================================================
     Rates
     ==================================================================== */
  .rates {
    background: var(--shell);
    padding: var(--section) var(--gutter);
  }
  .rates > * { max-inline-size: 52rem; margin-inline: auto; }

  /* Sits above the two verbatim inclusion paragraphs. `.rates > *` already holds it to the
     52rem measure and centres it, so only the frame itself needs declaring. */
  .incl__figure { margin-block-end: clamp(2rem, 5vw, 3rem); }
  .incl__figure img {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--paper);
  }

  .incl__head {
    margin-block-start: 2.25rem;
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .incl__head:first-child { margin-block-start: 0; }
  .incl__verbatim {
    margin-block-start: 0.85rem;
    padding-inline-start: 1.1rem;
    border-inline-start: 2px solid var(--sand);
    color: var(--body-ink);
    font-size: 0.875rem;
    line-height: 1.8;
  }

  .table-wrap { overflow-x: auto; margin-block-start: clamp(2.5rem, 6vw, 3.5rem); }
  .table-wrap:focus-visible { outline: 2px solid var(--sand-ink); outline-offset: 4px; }

  .rate-table { inline-size: 100%; font-variant-numeric: tabular-nums; }
  .rate-table caption {
    margin-block-end: 1.1rem;
    color: var(--muted);
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-align: start;
    text-transform: uppercase;
  }
  .rate-table th, .rate-table td {
    padding: 0.8rem 0.5rem;
    font-weight: 400;
    text-align: start;
  }
  .rate-table th:first-child, .rate-table td:first-child { padding-inline-start: 0; }
  .rate-table th:last-child,  .rate-table td:last-child  { padding-inline-end: 0; }
  .rate-table thead th {
    color: var(--muted);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-block-end: 1px solid var(--ink);
  }
  .rate-table .num { text-align: end; }
  .rate-table tbody th, .rate-table tbody td {
    border-block-start: 1px solid var(--line-2);
    font-size: 0.9375rem;
  }
  .rate-table tbody td { color: var(--ink); }

  .policy {
    margin-block-start: clamp(2.5rem, 6vw, 3.5rem);
    padding-block-start: clamp(2rem, 5vw, 3rem);
    border-block-start: 1px solid var(--line-2);
  }
  .policy__head {
    margin-block-start: 1.8rem;
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .policy__head:first-child { margin-block-start: 0; }
  .policy p { margin-block-start: 0.75rem; font-size: 0.875rem; line-height: 1.8; }

  /* ========================================================================
     Offers
     ==================================================================== */
  .offers {
    max-inline-size: var(--wide);
    margin-inline: auto;
    padding: var(--section) var(--gutter);
  }
  .offer-list { display: grid; gap: clamp(2rem, 4vw, 2.75rem); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 48rem) { .offer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 72rem) { .offer-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .offer {
    display: flex;
    flex-direction: column;
    padding-block-start: 1.25rem;
    border-block-start: 2px solid var(--ink);
  }
  .offer h3 {
    font-size: 0.875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .offer p { margin-block-start: 0.85rem; font-size: 0.9375rem; line-height: 1.75; }
  .offer__strap {
    color: var(--sand-ink);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.0625rem;
  }
  .offer__price {
    margin-block-start: 1.2rem;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-variant-numeric: lining-nums tabular-nums;
    line-height: 1.3;
  }
  .offer__price span {
    display: block;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .offer__terms {
    margin-block-start: auto;
    padding-block-start: 1.2rem;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.7;
  }
  .offer--por { border-block-start-color: var(--sand); }

  /* ========================================================================
     Conservation
     ==================================================================== */
  .conservation {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    max-inline-size: var(--wide);
    margin-inline: auto;
    padding: 0 var(--gutter) var(--section);
  }
  .conservation__figure img {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--shell);
  }
  .conservation h2 {
    font-size: clamp(1rem, 0.94rem + 0.5vw, 1.25rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .conservation p { margin-block-start: 1.1rem; font-size: 0.9375rem; }
  @media (min-width: 58rem) {
    .conservation { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
  }

  /* ========================================================================
     Plan — where the Honeyguide takeover begins
     ==================================================================== */
  .plan {
    padding: var(--section) var(--gutter);
    background: var(--ink);
    color: var(--paper);
    text-align: center;
  }
  .plan .eyebrow { color: var(--sand); }   /* 9.0:1 on --ink */
  .plan h2 {
    max-inline-size: 26ch;
    margin-inline: auto;
    color: var(--paper);
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.375rem, 1.1rem + 1.5vw, 2.25rem);
    letter-spacing: -0.01em;
    line-height: 1.35;
    text-transform: none;
  }
  .plan__slot:not(:empty) { margin-block-start: clamp(2rem, 5vw, 3rem); }

  /* ------------------------------------------------------------------------
     The Honeyguide call to action, inside .plan__slot — the launcher task's
     `data-hg-launcher` anchor.

     The property's own words, in the property's own design language: this is
     the inline CTA the floating launcher is being trialled AGAINST, so it is
     styled as a first-class control rather than as a vendor's badge. It is
     also the no-JS path — a plain link to /plan — so it has to look finished
     whether or not the script ever runs.

     --sand on --ink is 9.0:1 and the border is the same value, which clears
     3:1 for a non-text boundary (1.4.11). `inline-flex` + `min-block-size`
     keeps the target well over 2.5.8's floor without pinning the height.
     -------------------------------------------------------------------- */
  .plan__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 3rem;             /* 2.5.8 Target Size (Minimum) with room */
    padding: 0.85rem 2.25rem;
    border: 1px solid var(--sand);
    color: var(--sand);
    font-size: 0.6875rem;
    letter-spacing: 0.24em;
    text-indent: 0.24em;              /* re-centre against the trailing tracking gap */
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
  }
  .plan__cta:hover {
    background: var(--sand);
    color: var(--ink);                /* 9.0:1, the same pair inverted */
  }

  /* ========================================================================
     Colophon
     ==================================================================== */
  .colophon {
    padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
    background: var(--paper);
    text-align: center;
  }
  .colophon__mark {
    color: var(--ink);
    font-size: 0.9375rem;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    text-transform: uppercase;
  }
  .colophon__sub {
    margin-block-start: 0.35rem;
    color: var(--muted);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.875rem;
  }
  .colophon__line {
    margin-block-start: 0.9rem;
    color: var(--muted);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
  }
  .colophon__disclaimer {
    max-inline-size: 44rem;
    margin: 1.75rem auto 0;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--line);
    color: var(--body-ink);   /* 13.0:1 on white */
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    line-height: 1.9;
    text-transform: uppercase;
  }
}

/* ==========================================================================
   Forced colours: the hero scrim, the sand rules and the hairline borders all
   disappear, so restore the boundaries they were carrying with system colours.
   ========================================================================== */
@media (forced-colors: active) {
  .hero__body { background: Canvas; color: CanvasText; }
  .hero__title, .hero__lede, .eyebrow--light { color: CanvasText; }
  .incl__verbatim { border-inline-start: 2px solid CanvasText; }
  .offer, .access__list, .heli, .experiences, .heli__list li { border-color: CanvasText; }
  .tag::before { background: CanvasText; }
  a:focus-visible { outline: 2px solid Highlight; }
}