/* ==========================================================================
   pages/tunel-crew.css — tunel-crew.html + tunel-crew-en.html
   --------------------------------------------------------------------------
   Project:   Kali Villas Mentawai
   Layer:     Page (ITCSS)
   Loaded by: tunel-crew.html (PT-BR) and tunel-crew-en.html (EN), LAST
   --------------------------------------------------------------------------
   The partnership page: Kali Villas Mentawai as sponsor of the Tunel Crew
   Shootout Itacoatiara. Replaced the pre-event QR teaser on 30 Aug 2026;
   the URL is unchanged so printed QR codes still land here.

   THE PAGE IS THE DARK THEME OF THE HOUSE (owner direction, 31 Aug 2026)
     This partnership reaches a different audience from the one the main
     site speaks to, so the page keeps its own register: it runs on the
     Tunel Crew's own inks (#1f1f1f and #0b0b0b, lifted from their live
     stylesheet) rather than the house sand. But it is built from the
     house recipes: Cormorant headlines with italic ems, Jost uppercase
     labels, terracotta as the single accent, the first-third hero line.
     Read it as the Kali Villas site with the lights off.

   THE JOURNEY — INK TO NAVY
     An earlier cut of this page travelled from their ink to our sand.
     The owner redirected it on 31 Aug 2026: the whole page stays dark,
     and the arrival at Kali Villas is carried by NAVY (#1c2b4a, the
     house --navy) instead of daylight. The Mentawai first enters as a
     navy glow behind the prize figure, creeps into the grounds from
     there, and owns the page from the "who they are" section through
     the CTA and footer (both already sit on --navy, so the hand-off to
     the shared components is seamless).

     Every section's background is a gradient that STARTS on the exact
     hex the previous section ENDS on, so the page scrolls as one
     continuous pour with no hard cuts. Re-poured three times (owner
     direction): twice on 31 Aug 2026 (film-first, then prize-under-
     hero), and again on 2 Sep 2026 for the impulse lane — the load
     screen is nav + film + engine + price, and the story (intro,
     prize, gallery, partnership) follows. The ledger, top to bottom:

       film      #0b0b0b → #101010   (the theatre opens the page)
       engine    #101010 flat        (placeholder shaped like the module)
       deal      #101010 flat        (the price closes the load screen)
       intro     #101010 → #131313
       gallery   #131313 flat                  (the house tabs)
       prize     #131313 → #141824 → #0e1119   (+ navy radial glow)
       [reserve bar — position:fixed, outside the pour]
       pact      #0e1119 → #1f1f1f → #171b26   (their ink proper)
       heroes    #171b26 → #182238             (swapped before the contest)
       event     #182238 → #1c2b4a             (the navy arrival)
       close     #1c2b4a  (shared cta-section)
       footer    #1c2b4a  (shared component, untouched)

     Touch one stop and its neighbour must move with it.

   FLUID, NOT CAGED (same 31 Aug 2026 direction)
     The hairline grid cages of the first cut (facts strip, coast cards,
     rule cards, mark panels) are gone. Cards carry soft gradient washes
     with a small radius; separating lines that remain are gradients
     that fade out instead of running edge to edge (the rule hairlines,
     the timeline spine, the purse divider). The film player floats on a
     navy ambient glow. Motion stays with js/reveal.js.

     One identity note inside the pact section: the two coast cards wear
     each brand's ground — Itacoatiara washes in their grey-on-ink,
     Kaliet washes in our navy.

   Page sections, in document order (impulse lane, 2 Sep 2026 — the
   load screen is 1-3 plus the price, everything after is the story):
     1. The nav           — fixed, morphs into the reserve bar on scroll
     2. The film          — YouTube, reduced screen, custom controls
     3. The engine        — reservation placeholder shaped like the module
     4. The event rates   — 30% off, closing the load screen
     5. Intro             — the one-line thesis + sponsor line
     6. The house         — Villas/Suítes/Living/Deck/Arredores tab gallery
     7. The prize         — the navy enters here
     8. The partnership   — the co-brand seal + the two coasts
     9. Tunel Heroes      — horizontal timeline on desktop
    10. The Shootout      — how it is run (navy arrival)
    11. The close         — "A Mentawai fica esperando" (shared cta-section)
    12. Footer            — shared component, same navy
   ========================================================================== */


/* ==========================================================================
   Page tokens — the Tunel Crew half of the palette, lifted from their
   live stylesheet so the black here is the black they use. The navy half
   is the house --navy family from base.css.
   ========================================================================== */
.tc-page {
  --tc-ink:       #1f1f1f;   /* their primary near-black — the page ground */
  --tc-ink-deep:  #0b0b0b;   /* their deepest black — the hero and the film */
  --tc-paper:     #e8e6e6;   /* their warm off-white — type on ink */
  --tc-grey:      #c7c7c7;   /* their light grey — secondary type */
  --tc-grey-warm: #6b6964;   /* their warm mid-grey — quiet labels */
  /* Their warm grey lands at 3:1 on ink, under the 4.5:1 needed for small
     text. This is the same hue lifted to ~4.7:1, for the small uppercase
     lines that carry real information (the purse, the credits, the roll
     notes) rather than decoration. */
  --tc-grey-legible: #8d8b86;
  --tc-hair:      rgba(232, 230, 230, 0.14);   /* the few remaining hairlines */
}
.tc-page body { background: var(--tc-ink); }


/* --------------------------------------------------------------------------
   Shared house components, recoloured for the dark grounds. Wrapping a
   section in .tc-dark lets .eyebrow / .section-title / .body-text /
   .terra-rule be reused exactly as they are elsewhere on the site.
   -------------------------------------------------------------------------- */
.tc-dark .eyebrow        { color: var(--terra-light); }
.tc-dark .section-title  { color: var(--tc-paper); }
.tc-dark .section-title em { color: var(--terra-light); }
.tc-dark .body-text      { color: rgba(232, 230, 230, 0.72); }
.tc-dark .terra-rule     { background: var(--terra-light); }
.tc-dark .btn-outline {
  border-color: rgba(232, 230, 230, 0.5);
  color: var(--tc-paper);
}
.tc-dark .btn-outline:hover {
  background: var(--tc-paper);
  border-color: var(--tc-paper);
  color: var(--tc-ink);
}

/* The uppercase label this page uses where the rest of the site would run
   a serif sub-head. */
.tc-label {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tc-grey-warm);
}

/* Full-bleed sections carry the gradient journey; this inner wrapper
   carries the measure. Used by the pact and event sections. */
.tc-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6.5rem 4rem;
}


/* ==========================================================================
   0. Page nav — this page carries its own minimal bar instead of the
      site nav (owner direction, 31 Aug 2026): navy ground, the
      co-signed lockup, one discreet way home. Static, so it scrolls
      away with the film. The fixed PT/EN pill overlays the bar's right
      edge; the home link clears it with margin.
   ========================================================================== */
/* Fixed: the bar rides the scroll (owner direction, 1 Sep 2026) and
   morphs into the prize bar once the prize section passes underneath —
   js/tunel-film.js adds .is-bar. The two states:
     top      — navy ground, lockup centred, home link right
     .is-bar  — ink-blur ground, lockup slides LEFT and shrinks, the
                three prize cards fade in centre, language right
   Every moving part transitions, so the change reads as one gradual
   turn rather than a swap. */
.tc-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  background: var(--navy);
  border-bottom: 1px solid transparent;
  transition: background 0.45s ease, border-color 0.45s ease;
}
.tc-nav.is-bar {
  background: rgba(11, 11, 11, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--tc-hair);
}
/* The page starts below the fixed bar. */
.tc-page body { padding-top: 80px; }
/* Bottoms-aligned, equal text heights (owner direction, 31 Aug 2026).
   Pixel-scan: the "Kali" script fills 63.75% of its artwork height and
   both marks' text bottoms sit on their image bottoms — so their text
   runs the same size when the TC mark renders at 0.6375× the Kali
   height, and flex-end alone puts the two text bottoms on one line. */
.tc-nav-lockup {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: flex-end;
  gap: 0.85rem;
  min-width: 0;
  transition: left 0.45s ease, translate 0.45s ease;
}
.tc-nav.is-bar .tc-nav-lockup { left: 1.5rem; translate: 0 0; }
.tc-nav-kali { display: block; width: auto; height: 45px; transition: height 0.45s ease; }
/* The trimmed marks are phone-only layers (the morph below 900px). */
.tc-nav-kali-mark,
.tc-nav-tc-mark { display: none; }
.tc-nav.is-bar .tc-nav-kali { height: 30px; }
.tc-nav-x {
  align-self: flex-end;
  translate: 0 -0.3em;   /* optically centred on the wordmark */
  font-family: 'Jost', sans-serif;
  font-size: 0.8rem;
  font-weight: 200;
  line-height: 1;
  color: rgba(245, 239, 227, 0.5);
}
/* The Tunel Crew wordmark: two notches under the original 29px pairing
   (owner direction, 3 Sep 2026), and lifted so the letters' bottom sits
   on the BASE OF THE SUN in the Kali mark, not on the artwork's bottom
   edge. Measured from the files: the sun's base is 3.57% above the SVG
   lockup's bottom (3.12% in the phone PNG, 2.5% in the mark cut) and
   the wordmark's solid bottom 2.5% above its own (4% phone PNG, 2%
   mark cut) — the lift is the difference at each rendered height. */
.tc-nav-tc { display: block; width: auto; height: 23px; translate: 0 -1px; transition: height 0.45s ease, translate 0.45s ease; }
.tc-nav.is-bar .tc-nav-tc { height: 15.5px; translate: 0 -0.7px; }
/* The home link was removed on owner direction (1 Sep 2026) — the
   Kali logo itself links out. */

/* The bar's engine — the [check-in | check-out | book] trio, centre
   stage in the bar state (owner direction, 2 Sep 2026): the in-page
   engine docks into the nav the moment it scrolls past. All three
   open the reservation lightbox (js/tunel-reserve.js), and
   js/tunel-film.js flips their disabled state with the morph. */
.tc-nav-engine {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  /* The old prize cards' geometry (owner direction, 2 Sep 2026):
     centred as a group, three equal columns, each control centred in
     its third — the same measured distribution the facts row had. */
  width: min(560px, 52vw);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.tc-nav.is-bar .tc-nav-engine { opacity: 1; pointer-events: auto; }
/* The date pair's wrapper is invisible to the desktop grid (the three
   equal columns stay); on phones it becomes the bar's middle block
   (owner direction, 3 Sep 2026). */
.tc-nav-dates { display: contents; }
/* The date pair wears the prize cards' typography (owner call, 2 Sep
   2026 — that design stays): terra uppercase label over a serif value,
   no chip box. The value line starts as an invitation and becomes the
   chosen date once the lightbox has one (js/tunel-reserve.js keeps it
   in sync). The book button stays the solid terra CTA between them
   and the language toggle. */
.tc-nav-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0.5rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: center;
}
.tc-nav-date-label {
  margin-bottom: 0.45rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.57rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--terra-light);
}
/* Dates run in the sans, like every price and date on the site (owner
   direction, 2 Sep 2026). */
.tc-nav-date-value {
  font-family: 'Jost', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--tc-paper);
  transition: color 0.25s ease;
}
.tc-nav-date:hover .tc-nav-date-value,
.tc-nav-date:focus-visible .tc-nav-date-value { color: #fff; }
.tc-nav-book {
  padding: 0.6rem 1.4rem;
  background: var(--terra);
  border: 1px solid var(--terra);
  border-radius: 2px;
  font-family: 'Jost', sans-serif;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.tc-nav-book:hover,
.tc-nav-book:focus-visible { background: var(--terra-light); border-color: var(--terra-light); }

/* The bar's language toggle, right edge — the fixed pill's voice. */
.tc-nav-lang {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  translate: 0 -50%;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.tc-nav.is-bar .tc-nav-lang { opacity: 1; pointer-events: auto; }
.tc-nav-lang a,
.tc-nav-lang span {
  padding: 0.15rem 0.3rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}
.tc-nav-lang .tc-lang-on  { color: #fff; }
.tc-nav-lang a            { color: rgba(255, 255, 255, 0.55); transition: color 0.25s; }
.tc-nav-lang a:hover,
.tc-nav-lang a:focus-visible { color: var(--terra-light); }
.tc-nav-lang .tc-lang-sep { color: rgba(255, 255, 255, 0.3); padding: 0; }

/* While the nav is the bar it carries the toggle, so the fixed pill
   bows out (js/tunel-film.js sets .tc-bar-on on <html>). */
.tc-lang { transition: opacity 0.3s ease; }
.tc-bar-on .tc-lang { opacity: 0; pointer-events: none; }

/* Below ~1200px the bar state trims the lockup to the Kali mark alone,
   so the centre cards never collide with the logos. */
@media (max-width: 1199px) {
  /* Tight widths swap to the stroked mark pair instead of hiding the
     TC logo (owner direction, 1 Sep 2026). */
  .tc-nav.is-bar .tc-nav-kali {
    content: url(../../img/partners/tunel-crew/nav-kali-mark.png);
    height: 26px;
  }
  .tc-nav.is-bar .tc-nav-tc {
    content: url(../../img/partners/tunel-crew/nav-tc-mark.png);
    height: 17px;
    translate: 0 -0.3px;
  }
}


/* ==========================================================================
   1. Language switch — the page exists in full in both languages, so the
      pair stays visible rather than hiding behind a menu.
   ========================================================================== */
.tc-lang {
  position: fixed;
  z-index: 60;
  /* Vertically centred inside the 80px nav bar (owner direction,
     31 Aug 2026): (bar height − pill height) / 2 ≈ 28px. */
  top: 1.75rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.3rem 0.55rem;
  background: rgba(11, 11, 11, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 2px;
}
.tc-lang a,
.tc-lang span {
  padding: 0.15rem 0.4rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}
.tc-lang .tc-lang-on  { color: #fff; }
.tc-lang a            { color: rgba(255, 255, 255, 0.55); transition: color 0.25s; }
.tc-lang a:hover,
.tc-lang a:focus-visible { color: var(--terra-light); }
.tc-lang .tc-lang-sep { color: rgba(255, 255, 255, 0.3); padding: 0; }


/* ==========================================================================
   5. Intro — the one-line thesis, centred, with the sponsor line as
      its signature. Opens the story lane right after the load screen
      (impulse lane, 2 Sep 2026); the film's own styles live with the
      player, further down.
   ========================================================================== */
.tc-intro {
  /* Breathing room over the title, and a short drop into the prize
     right under it (owner spacing calls, 31 Aug 2026). */
  padding: 1.9rem 4rem 2.25rem;
  background: linear-gradient(180deg, #101010, #131313);
  text-align: center;
}
.tc-intro-title {
  margin: 0 auto 1.1rem;
  max-width: 60rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  font-weight: 300;
  line-height: 1.1;
  color: #fff;
}
.tc-intro-title em { font-style: italic; color: var(--terra-light); }
.tc-intro-sub {
  /* Uncapped so the sponsor line runs as ONE line on desktop (owner
     direction, 31 Aug 2026); phones wrap it naturally. */
  max-width: none;
  margin: 0 auto;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

/* The partnership seal — the owner-supplied co-signed art of the two
   symbols (kali-tunel.png, 31 Aug 2026), floating bare in its column:
   no card (same direction). The doubled class beats the base
   .tc-mark-panel rule, which sits later in the file with the pact
   styles. */
.tc-mark-panel.tc-mark-panel--pair {
  padding: 0;
  background: none;
  border-radius: 0;
}
.tc-mark-panel.tc-mark-panel--pair img {
  width: 100%;
  max-width: 360px;
  height: auto;
}


/* The prize cards left the nav on 2 Sep 2026 (owner direction) — the
   bar carries the reserve trio now; see the .tc-nav block above. */


/* ==========================================================================
   4. The partnership — the bridge. Text left, their mark right, then the
      two beaches. Full-bleed so it can carry its leg of the journey;
      .tc-inner holds the measure.
   ========================================================================== */
.tc-pact {
  background: linear-gradient(180deg, #0e1119, #1f1f1f 38%, #1f1f1f 78%, #171b26 100%);
}
.tc-pact-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 5rem;
  align-items: center;
}

/* The partner's mark, floating on a soft wash. Shared by the partnership
   section and the "who they are" section; the --panel-bg custom property
   lets the navy end of the page hand it a different wash, --panel-base a
   different base. The solid base layer under the wash matters: without
   it the section's own pour shows through the translucent wash and the
   panel dissolves unevenly (owner flag, 31 Aug 2026). Same recipe on the
   coast cards below. */
.tc-mark-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  background:
    var(--panel-bg,
      linear-gradient(160deg, rgba(232, 230, 230, 0.07), rgba(232, 230, 230, 0.03))),
    var(--panel-base, var(--tc-ink));
  border-radius: 4px;
}
.tc-mark-panel img { width: 100%; max-width: 260px; height: auto; }

/* The two beaches, side by side — each wearing its brand's ground:
   Itacoatiara in the Tunel Crew grey-on-ink, Kaliet in Kali navy. */
.tc-coasts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 4rem;
}
.tc-coast {
  padding: 2.5rem 2.25rem;
  border-radius: 4px;
}
.tc-coast:first-child {
  background:
    linear-gradient(165deg, rgba(232, 230, 230, 0.06), rgba(232, 230, 230, 0.035)),
    var(--tc-ink);
}
.tc-coast:last-child {
  background:
    linear-gradient(165deg, rgba(28, 43, 74, 0.85), rgba(28, 43, 74, 0.55)),
    var(--tc-ink);
}
.tc-coast-where {
  margin-bottom: 0.9rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terra-light);
}
.tc-coast-name {
  margin-bottom: 0.9rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.15;
  color: var(--tc-paper);
}
.tc-coast-body {
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(232, 230, 230, 0.68);
}


/* ==========================================================================
   5. The prize — the reason a competitor opens this page. Our contribution
      carried at display size, and this is where the Mentawai enters the
      page as colour: a navy glow rises behind the figure while the ground
      dives toward the film. The rest of the purse is one line, without
      itemising it (owner direction, 30 Aug 2026).
   ========================================================================== */
.tc-prize {
  /* Short top (it follows straight from the intro), full bottom. */
  padding: 3.5rem 4rem 7.5rem;
  background:
    radial-gradient(ellipse 55% 46% at 50% 38%, rgba(28, 43, 74, 0.55), transparent 72%),
    linear-gradient(180deg, #131313, #141824 55%, #0e1119 100%);
  text-align: center;
}
.tc-prize-inner { max-width: 780px; margin: 0 auto; }
.tc-prize-figure {
  margin: 0.75rem 0 0.25rem;
  /* Every number on the page is sans (owner direction, 4 Sep 2026) —
     the big figure too: Jost at its lightest, a touch tighter. */
  font-family: 'Jost', sans-serif;
  font-size: clamp(4rem, 12.5vw, 8.5rem);
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: #fff;
}
.tc-prize-unit {
  display: block;
  margin-bottom: 2rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 300;
  font-style: italic;
  color: var(--terra-light);
}
.tc-prize-body {
  max-width: 34rem;
  margin: 0 auto 2.5rem;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(232, 230, 230, 0.75);
}
/* No buttons on the prize (owner direction, 1 Sep 2026): this is a
   pure landing — the reservation happens in-page via the engine slot. */

/* What else is on the line, said once and left alone, under a divider
   that fades out at both ends instead of running edge to edge. */
.tc-prize-also {
  position: relative;
  max-width: 30rem;
  margin: 3.5rem auto 0;
  padding-top: 2.25rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  line-height: 2;
  text-transform: uppercase;
  color: var(--tc-grey-legible);
}
.tc-prize-also::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 230, 230, 0.22), transparent);
}
.tc-prize-also strong {
  display: block;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--tc-paper);
}

/* Desktop: the figure block takes the left third, the text the right
   third; the fading divider and the purse line sit centred under both
   (owner direction, 1 Sep 2026). Phones keep the stacked centre. */
@media (min-width: 901px) {
  .tc-prize-inner {
    max-width: 1150px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 6rem;
    align-items: center;
  }
  .tc-prize-body {
    max-width: none;
    margin: 0;
    text-align: left;
  }
  /* Body, divider and purse line are ONE block (.tc-prize-right),
     centred as a unit against the figure block (owner direction,
     1 Sep 2026). */
  .tc-prize-also {
    max-width: none;
    margin: 2.25rem 0 0;
    text-align: left;
  }
}


/* ==========================================================================
   The house — the tab gallery (owner request, 31 Aug 2026): the
   Villas / Suítes / Living / Deck / Arredores bar loads the matching
   carousel underneath. Moved ABOVE the prize on 2 Sep 2026 (owner
   direction): ground is flat #131313, exactly where the intro ends
   and the prize begins, so the pour holds. The shared carousel
   component ships sand-coloured edge fades and assumes a light page;
   the overrides below repaint them for this ink ground.
   ========================================================================== */
.tc-gallery {
  padding: 1rem 2rem 4.5rem;
  background: #131313;
}
.tc-gallery-inner { max-width: 1200px; margin: 0 auto; }

.tc-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 2.2rem;
  margin-bottom: 2rem;
}
.tc-tab {
  padding: 0.55rem 0.15rem;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  font-family: 'Jost', sans-serif;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--tc-grey-legible);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
@media (hover: hover) {
  .tc-tab:hover { color: var(--tc-paper); }
}
.tc-tab.is-active {
  color: var(--terra-light);
  border-bottom-color: var(--terra-light);
}

.tc-gal[hidden] { display: none; }

/* Edge fades repainted for the ink ground (the gallery's #131313). */
.tc-gallery .gallery-carousel::before {
  background: linear-gradient(to right, #131313 10%, rgba(19, 19, 19, 0) 100%);
}
.tc-gallery .gallery-carousel::after {
  background: linear-gradient(to left, #131313 10%, rgba(19, 19, 19, 0) 100%);
}


/* ==========================================================================
   5. The film — Tunel Crew shot and cut this piece about Kali Villas,
      and since the 31 Aug 2026 reorder it OPENS the page, served from
      YouTube (16:9 on desktop, the 9:16 Short on phones).

      Click-to-play, deliberately: it is a film with a real soundtrack,
      not wallpaper. The player mounts at load (owner direction, 1 Sep
      2026) with YouTube's own thumbnail as the cover; js/tunel-film.js
      builds it and the minimal control bar (play/pause, volume/mute,
      fullscreen).

      REDUCED SCREEN (owner direction, 2 Sep 2026): the film shares the
      load screen with the engine and the price, so the wide cut is
      capped at ~44vh tall and the phone Short is height-cropped to
      38vh (the 9:16 frame overflows a shorter window, centred).
      Fullscreen lifts both caps and restores the whole frame.
   ========================================================================== */
.tc-film {
  /* Flush under the fixed nav (owner direction, 2 Sep 2026): the film
     starts the moment the bar ends, to win back screen. No bottom
     padding either: the engine sits right under the control bar. */
  padding: 0.75rem 2rem 0;   /* a small breath under the nav (owner direction, 2 Sep 2026) */
  background: linear-gradient(180deg, var(--tc-ink-deep), #101010);
}
.tc-film-inner { max-width: 1500px; margin: 0 auto; }
/* Fullscreen takes the whole inner stage (player + bar below it) and
   lifts the reduced-screen caps: the wide frame regrows to the screen
   and the phone Short drops its height crop, whole 9:16 restored. */
.tc-film-inner:is(:fullscreen, .is-popup) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #000;
  padding: 0;
}
/* The pop-up (owner direction, 3 Sep 2026): phones, and any browser
   without an element-fullscreen API, open the film as a fixed overlay
   instead — same look, no API needed. */
.tc-film-inner.is-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  max-width: none;
  margin: 0;
}
html.tc-popup-on { overflow: hidden; }
.tc-film-inner:is(:fullscreen, .is-popup) .tc-player,
.tc-film-inner:is(:fullscreen, .is-popup) .tc-ytbar {
  width: 100%;
  max-width: min(100%, calc((100vh - 4.5rem) * 16 / 9));   /* room for the control bar beneath */
  max-width: min(100%, calc((100dvh - 4.5rem) * 16 / 9));
  border-radius: 0;
}
.tc-film-inner:is(:fullscreen, .is-popup) .tc-player--tall,
.tc-film-inner:is(:fullscreen, .is-popup) .tc-player--tall + .tc-ytbar {
  height: auto;
  aspect-ratio: 9 / 16;
  /* The whole 9:16 frame at the screen's width — slightly under full
     height so the bar fits beneath (owner direction, 2 Sep 2026). */
  width: min(100%, calc((100vh - 4.5rem) * 9 / 16));
  width: min(100%, calc((100dvh - 4.5rem) * 9 / 16));
  max-width: none;
}
.tc-film-inner:is(:fullscreen, .is-popup) .tc-player--tall + .tc-ytbar { aspect-ratio: auto; }
.tc-film-inner:is(:fullscreen, .is-popup) .tc-player--tall .tc-yt {
  inset: 0;
  top: 0;
  translate: none;
  height: auto;
  aspect-ratio: auto;
}
/* The × top-right of the open stage (owner direction, 3 Sep 2026). */
.tc-ytclose {
  display: none;
  position: absolute;
  top: max(0.6rem, env(safe-area-inset-top));
  right: max(0.6rem, env(safe-area-inset-right));
  z-index: 5;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.35);
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.25s ease;
}
.tc-ytclose:hover,
.tc-ytclose:focus-visible { opacity: 1; }
.tc-ytclose svg { width: 22px; height: 22px; display: block; }
.tc-film-inner:is(:fullscreen, .is-popup) .tc-ytclose { display: flex; }

.tc-player {
  position: relative;
  width: 100%;
  /* The reduced screen: width derived from the ~50vh height cap
     (owner direction, 3 Sep 2026: a bit bigger), so nav + film +
     engine + price still land inside one desktop viewport. */
  max-width: min(100%, calc(50vh * 16 / 9));
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000 url(../../img/logo/media-ph-dark.png) center / auto min(46%, 180px) no-repeat;
  overflow: hidden;
  border-radius: 6px;
  /* The screen floats on a navy ambience — the Mentawai backlighting
     the theatre. */
  box-shadow: 0 40px 90px -30px rgba(28, 43, 74, 0.6);
}
/* The 9:16 frame for the Short. Class-gated, not viewport-gated:
   js/tunel-film.js picks the cut once at load and tags the frame, so
   the frame must follow the mounted video even if the window is later
   resized across the breakpoint.

   Height-cropped (owner direction, 2 Sep 2026): the window is a 38vh
   letterbox at full width, and the true 9:16 frame runs taller behind
   it, centred — the crop shows the Short's middle band, where a
   vertical surf edit keeps its subject. Fullscreen restores the whole
   frame below. */
.tc-player--tall {
  aspect-ratio: 4 / 5;   /* the in-page window (owner direction, 3 Sep 2026): the 9:16 frame runs taller behind it, centred */
  height: auto;
  width: 100%;
  max-width: none;
  margin: 0 auto;
}
.tc-player--tall .tc-yt {
  inset: auto 0;
  top: 50%;
  translate: 0 -50%;
  height: auto;
  aspect-ratio: 9 / 16;
}

/* The YouTube player mount — js/tunel-film.js fills it at load; the
   cover is YouTube's own thumbnail (owner's art, 1 Sep 2026 — the
   local facade poster left with the click-to-mount design). */
.tc-yt { position: absolute; inset: 0; }
.tc-yt iframe { width: 100%; height: 100%; display: block; border: 0; }
.tc-yt[hidden] { display: none; }

/* Transparent click layer over the iframe, so a tap anywhere on the
   picture toggles playback through our controls. */
.tc-ytshield {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* The minimal control bar: play/pause, mute + volume, fullscreen —
   and nothing else. It sits BELOW the video frame (owner direction,
   1 Sep 2026), clear of YouTube's own corner links. */
.tc-ytbar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  /* Tracks the reduced player's width so the controls hug the frame. */
  max-width: min(100%, calc(50vh * 16 / 9));
  margin: 0 auto;
  padding: 0.35rem 0.25rem 0;
}
.tc-ytbar[hidden] { display: none; }
.tc-ytbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.25s ease;
}
.tc-ytbtn:hover,
.tc-ytbtn:focus-visible { opacity: 1; }
.tc-ytbtn svg { width: 18px; height: 18px; display: block; fill: currentColor; }
/* The fullscreen button carries its word left of the icon (owner
   direction, 2 Sep 2026). */
.tc-ytfs-label {
  margin-right: 0.45rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  color: currentColor;
}
/* Volume: a vertical bar that pops above the speaker on hover (owner
   direction, 31 Aug 2026). Hover-capable pointers only — on touch the
   speaker button alone toggles mute. The input stays horizontal in the
   DOM and is rotated, which keeps arrow-key and screen-reader
   behaviour intact. */
.tc-ytvolwrap { position: relative; display: flex; }
.tc-ytvolpop {
  position: absolute;
  bottom: 100%;
  left: 50%;
  translate: -50% 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 110px;
  background: rgba(11, 11, 11, 0.92);
  border-radius: 3px;
}
@media (hover: hover) {
  .tc-ytvolwrap:hover .tc-ytvolpop,
  .tc-ytvolwrap:focus-within .tc-ytvolpop { display: flex; }
}
.tc-ytvol {
  width: 86px;
  rotate: -90deg;
  accent-color: var(--terra);
  cursor: pointer;
}
.tc-ytgrow { flex: 1; }

/* No-JS escape hatch — a plain link to the film on YouTube. */
.tc-yt-link {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 4;
  padding: 0.6rem 1.2rem;
  background: rgba(11, 11, 11, 0.75);
  font-family: 'Jost', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
}

/* No poster overlay and no big play disc: the player shows YouTube's
   own thumbnail and our slim bar is the only chrome (owner direction,
   1 Sep 2026). No credit line either — it is our own production. */


/* ==========================================================================
   7. The Shootout — how it is run, for anyone arriving cold. The three
      rules sit in open space under terracotta hairlines that fade out,
      instead of the earlier boxed grid.
   ========================================================================== */
.tc-event {
  /* The navy arrival — after the 1 Sep 2026 swap the contest closes
     the pour onto the house --navy, handing off to the closing
     section and the footer. */
  background: linear-gradient(180deg, #182238, var(--navy));
}
.tc-event-head { max-width: 46rem; margin-bottom: 3.5rem; }

/* Desktop: header left third, text right third (owner direction,
   1 Sep 2026). */
@media (min-width: 901px) {
  .tc-event-head {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 6rem;
    align-items: center;
  }
  .tc-event-head .body-text { margin: 0; }
}
.tc-rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 3rem;
}
.tc-rule {
  position: relative;
  padding-top: 2rem;
}
.tc-rule::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--terra-light), transparent 78%);
  opacity: 0.55;
}
.tc-rule-num {
  display: block;
  margin-bottom: 1.1rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: var(--terra-light);
}
.tc-rule-title {
  margin-bottom: 0.85rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--tc-paper);
}
.tc-rule-body {
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(232, 230, 230, 0.68);
}


/* ==========================================================================
   8. Tunel Heroes — the champions roll, and the page's navy arrival.
      Base recipe: the vertical timeline spine they use on their own
      site, fading at its ends. Desktop flips it HORIZONTAL (owner
      direction, 31 Aug 2026) to save screen space — see the min-width
      block after the roll rules.
   ========================================================================== */
.tc-heroes {
  padding: 6.5rem 4rem;
  /* Now between the pact and the contest (1 Sep 2026 swap) — the
     navy arrival moved to the contest section after it. */
  background: linear-gradient(180deg, #171b26, #182238);
}
.tc-heroes-inner { max-width: 900px; margin: 0 auto; }
.tc-heroes-head { margin-bottom: 3.5rem; }
.tc-heroes-title {
  margin-top: 1.25rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 300;
  line-height: 1.15;
  color: #fff;
}
.tc-heroes-title em { font-style: italic; color: var(--tc-grey); }

.tc-roll {
  position: relative;
  padding-left: 2.5rem;
}
.tc-roll::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(232, 230, 230, 0.28) 12%,
    rgba(232, 230, 230, 0.28) 88%,
    transparent
  );
}
.tc-roll-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.35rem 0;
  border-bottom: 1px solid rgba(232, 230, 230, 0.08);
}
.tc-roll-row:last-child { border-bottom: 0; }
.tc-roll-year {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--tc-grey-legible);
}
.tc-roll-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.2;
  color: #fff;
}
.tc-roll-note {
  font-size: 0.72rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  text-align: right;
  color: var(--tc-grey-legible);
}
/* The open year leads in terra; the paused-years slot was omitted
   entirely (owner direction, 31 Aug 2026). */
.tc-roll-row--open .tc-roll-name { color: var(--terra-light); }

/* Desktop: one column per year over a horizontal spine that fades at
   both ends — the same record, a fraction of the height. */
@media (min-width: 901px) {
  .tc-heroes-inner { max-width: 1200px; }
  .tc-roll {
    display: grid;
    grid-template-columns: repeat(7, 1fr);   /* seven entries, 2018-2026 minus the pause */
    gap: 1.25rem;
    padding-left: 0;
    padding-top: 2rem;
  }
  .tc-roll::before {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(232, 230, 230, 0.28) 8%,
      rgba(232, 230, 230, 0.28) 92%,
      transparent
    );
  }
  .tc-roll-row {
    display: block;
    padding: 0;
    border-bottom: 0;
  }
  .tc-roll-year { display: block; margin-bottom: 0.7rem; }
  .tc-roll-name {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 1.15rem;
    line-height: 1.25;
  }
  .tc-roll-note { display: block; text-align: left; font-size: 0.66rem; }
  .tc-roll-row--quiet .tc-roll-name { font-size: 0.95rem; }
}

/* ==========================================================================
   4. The event rates — closing the load screen right under the engine
      (owner direction, 2 Sep 2026), flat on the #101010 the film pours
      into and the intro picks up, so the pour is untouched. Original
      rates struck terra, the 30% cut leading. Padding stays lean: the
      price must land inside the first viewport.
   ========================================================================== */
.tc-deal-section {
  padding: 1.6rem 2rem 3.5rem;   /* the prices open the section now (the exclusive line moved onto the box, 4 Sep 2026) */
  background: #101010;
  text-align: center;
}
.tc-deal {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1.25rem 4rem;
}
.tc-deal-name {
  display: block;
  margin-bottom: 0.45rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(232, 230, 230, 0.55);
}
.tc-deal-price {
  font-family: 'Jost', sans-serif;   /* prices: the sans, site-wide */
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--tc-paper);
}
.tc-deal-was {
  margin-right: 0.4rem;
  font-size: 0.95rem;
  color: rgba(232, 230, 230, 0.45);
  text-decoration-thickness: 1px;
  text-decoration-color: var(--terra-light);
}
/* Capacity under each rate and one beds line under both (owner
   direction, 2 Sep 2026): quiet, one line each, nothing cramped. */
.tc-deal-cap {
  display: block;
  margin-top: 0.55rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 230, 230, 0.5);
}
.tc-cap-s { display: none; }   /* "Villa · até 4 pax": phones only */
.tc-deal-beds {
  margin: 1.5rem auto 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.66rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: rgba(232, 230, 230, 0.5);
}
.tc-deal-per {
  font-family: 'Jost', sans-serif;
  font-size: 0.8rem;
  color: rgba(232, 230, 230, 0.5);
}

/* ==========================================================================
   3. The reservation engine — on the load screen, right under the film
      (owner direction, 2 Sep 2026): the dates are chosen HERE, in the
      fixed bar's own look, with the per-unit savings underneath; Book
      opens the lightbox with the dates already in it. Flat on the
      film's closing #101010; padding lean so the price fits the
      viewport.
   ========================================================================== */
.tc-engine-section {
  padding: 1.6rem 2rem 2.2rem;
  background: #101010;
  text-align: center;
}
/* The engine's cue, straight above it. Desktop: always ONE line at
   full size. Phones wrap naturally at a proper size instead of
   shrinking (owner direction, 1 Sep 2026). */
/* The cue line now lives under the closing title (owner direction,
   2 Sep 2026). */
.tc-close-lead {
  max-width: 40rem;
  margin: 0 auto 2.25rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.55;
  text-align: center;
  color: rgba(245, 239, 227, 0.75);
}

/* The engine on the page body wears the fixed bar's own look (owner
   direction, 2 Sep 2026): three centred columns — two date components
   and the terra Book button — over the note or, once both dates
   exist, the per-unit savings. */
.tc-engine {
  /* A quiet frame around the in-page reservation trio (owner direction,
     3 Sep 2026): a low-opacity paper stroke, softly rounded. The bar's
     own trio stays frameless. */
  max-width: 620px;
  margin: 0 auto;
  position: relative;
  padding: 1.4rem 1.5rem 1rem;   /* room for the label straddling the top edge */
  border: 1px solid rgba(245, 239, 227, 0.16);
  border-radius: 8px;
}
/* The box's label (owner direction, 4 Sep 2026): the exclusive
   invitation sits ON the frame's top edge — the section ink behind it
   masks the stroke — in the tracked uppercase voice. */
.tc-engine-label {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  padding: 0 0.7rem;
  background: #101010;
  font-family: 'Jost', sans-serif;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--terra-light);
}
/* The savings for this stay, under the box (owner direction, 4 Sep
   2026): js/tunel-reserve.js fills it for the chosen nights, or the
   3-night minimum until dates exist. */
.tc-engine-saving[hidden] { display: none; }
.tc-engine-saving {
  margin: 0.9rem auto 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: rgba(232, 230, 230, 0.82);
}
.tc-engine-row {
  width: min(560px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}

/* The shared field language of body, lightbox and bar: a terra
   uppercase label over a serif value. */
.tc-field-label {
  display: block;
  margin-bottom: 0.45rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.57rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--terra-light);
}
.tc-field-value {
  display: block;
  font-family: 'Jost', sans-serif;   /* dates and counts: the sans, site-wide */
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--tc-paper);
  transition: color 0.25s ease;
}

/* The date component: a transparent native date input covers the
   stack, so a tap anywhere opens the calendar — natively on phones,
   through showPicker on desktops (js/tunel-reserve.js). The visible
   words are ours, the same in every surface. Typing is blocked. */
.tc-date {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.35rem 0.5rem;
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
}
.tc-date-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;   /* keeps iOS from zooming on focus */
  cursor: pointer;
}
.tc-date:hover .tc-field-value,
.tc-date:focus-within .tc-field-value { color: #fff; }
.tc-date:focus-within { outline: 1px solid rgba(232, 230, 230, 0.35); outline-offset: 2px; }

.tc-engine-book {
  padding: 0.85rem 2rem;
  background: var(--terra);
  border: 0;
  border-radius: 2px;
  font-family: 'Jost', sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.tc-engine-book:hover,
.tc-engine-book:focus-visible { background: var(--terra-light); }

/* The prize and promotion fine print, bottom of the page. */
.tc-legal {
  max-width: 60rem;
  margin: 4rem auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(245, 239, 227, 0.14);
  text-align: left;
}
.tc-legal p {
  font-size: 0.62rem;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: rgba(245, 239, 227, 0.42);
}

/* The "Who they are" section was removed on owner direction
   (31 Aug 2026) — its styles left with it; see git/history. */


/* ==========================================================================
   The reservation lightbox — opened by every [data-tc-reserve] control
   (owner direction, 2 Sep 2026): the in-page engine and the nav trio.
   Ink panel over a blurred veil; the native date pickers run dark via
   color-scheme. js/tunel-reserve.js drives open/close, the Turnstile
   render and the submit to /api/reserve.
   ========================================================================== */
html.tc-modal-open { overflow: hidden; }
.tc-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
/* display:flex above would defeat the [hidden] attribute — restate it. */
.tc-modal[hidden] { display: none; }
.tc-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 10, 0.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.tc-modal-panel {
  position: relative;
  width: min(460px, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 2.75rem 1.75rem 1.75rem;   /* the × clears the first row: no title above it now (owner direction, 3 Sep 2026) */
  background: #131313;
  border: 1px solid rgba(232, 230, 230, 0.14);
  border-radius: 6px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
  outline: none;
}
.tc-modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  padding: 0.3rem 0.5rem;
  background: none;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: rgba(232, 230, 230, 0.55);
  cursor: pointer;
  transition: color 0.25s ease;
}
.tc-modal-close:hover,
.tc-modal-close:focus-visible { color: #fff; }
.tc-modal-title {
  margin: 0 0 0.35rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem;
  font-weight: 300;
  line-height: 1.2;
  color: #fff;
}
.tc-modal-sub {
  margin: 0 0 1.25rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(232, 230, 230, 0.65);
}
/* The lightbox speaks the same field language as the body and the
   bar (owner direction, 2 Sep 2026): the two date components, the two
   unit steppers, then serif answers over hairlines — no boxes. */
.tc-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1rem;
}
.tc-modal-date,
.tc-units,
.tc-field { min-width: 0; }
.tc-field { display: block; }
.tc-field--full { grid-column: 1 / -1; }
.tc-modal-date .tc-field-value { font-size: 0.95rem; }
.tc-field-input {
  width: 100%;
  padding: 0.35rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(232, 230, 230, 0.22);
  border-radius: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 300;
  color: var(--tc-paper);
  transition: border-color 0.25s ease;
}
.tc-field-input::placeholder { color: rgba(232, 230, 230, 0.35); }
/* A tiny hint under a stepper: the capacity of the unit. */
.tc-field-hint {
  display: block;
  margin-top: 0.45rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.5rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 230, 230, 0.42);
}
/* Selects wear the same hairline; a small chevron drawn in CSS. */
.tc-field-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 1.4rem;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(232, 230, 230, 0.6) 50%),
    linear-gradient(135deg, rgba(232, 230, 230, 0.6) 50%, transparent 50%);
  background-position: calc(100% - 11px) 55%, calc(100% - 6px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.tc-field-textarea {
  resize: vertical;
  min-height: 2.4rem;
  line-height: 1.5;
}
/* Phone in two parts: the country (flag, name, code) and the local
   number — the selector is pre-picked from where the visitor is. */
.tc-phone-row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: end;
}
.tc-phone-dial {
  font-family: 'Jost', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.tc-field-input:focus { outline: none; border-bottom-color: var(--terra-light); }
/* Units: label, then − number + ; the plus stops at the house's
   seven villas (a suite counts half). */
.tc-units {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tc-units-ctl { display: flex; align-items: center; gap: 0.75rem; }
.tc-units-n { min-width: 1.6rem; font-size: 1rem; }
.tc-units-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;   /* no outline — the glyph alone, colour on hover/press (owner direction, 2 Sep 2026) */
  border-radius: 50%;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--tc-paper);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.tc-units-btn:hover,
.tc-units-btn:focus-visible { border-color: var(--terra-light); color: var(--terra-light); }
.tc-units-btn:disabled { opacity: 0.3; cursor: default; }
/* Villas, suites and guests share ONE line (owner direction, 2 Sep 2026). */
.tc-units-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  align-items: start;
}
/* The bot trap lives far off-screen; tabindex/aria keep it out of the
   way of real people. */
.tc-modal-hp {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
/* Turnstile runs invisibly (appearance: interaction-only — owner
   direction, 2 Sep 2026): no reserved height, no margin. The rare
   visible challenge brings its own height and simply pushes the
   button down for that visitor. */
.tc-modal-verify { margin: 0; }
.tc-modal-status {
  margin: 0.6rem 0 0;
  min-height: 1rem;
  font-size: 0.72rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--terra-light);
}
.tc-modal-submit {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--terra);
  border: 0;
  border-radius: 2px;
  font-family: 'Jost', sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  transition: background-color 0.25s ease, opacity 0.25s ease;
}
.tc-modal-submit:hover,
.tc-modal-submit:focus-visible { background: var(--terra-light); }
.tc-modal-form.is-sending .tc-modal-submit { opacity: 0.55; cursor: progress; }
.tc-modal-fine {
  margin: 0.8rem 0 0;
  font-size: 0.6rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(232, 230, 230, 0.4);
}
/* The booking total (owner direction, 4 Sep 2026): the amount in the
   sans, a tracked breakdown beneath, right above the savings line. */
.tc-modal-total {
  margin: 0.9rem 0 0.1rem;
  font-family: 'Jost', sans-serif;
  text-align: center;
}
.tc-modal-total-value {
  display: block;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  color: #f5efe3;
}
.tc-modal-total-note {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(232, 230, 230, 0.5);
}
/* The savings line takes the fine print's place under the button once
   both dates are chosen (owner direction, 2 Sep 2026): the reward for
   picking dates, in event dollars. */
.tc-modal-saving {
  margin: 0.35rem 0 0.9rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-align: center;
  color: var(--terra-light);
}
.tc-modal-fine a {
  color: var(--terra-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tc-modal-thanks { padding: 1rem 0 0.5rem; text-align: center; }
.tc-modal-thanks h3 {
  margin: 0 0 0.6rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 300;
  color: #fff;
}
.tc-modal-thanks-body .tc-code { font-weight: 500; letter-spacing: 0.08em; color: #fff; }   /* the request code (9 Sep 2026) */
.tc-modal-thanks-body {
  margin: 0;
  font-family: 'Jost', sans-serif;   /* carries the deposit and the savings */
  font-size: 0.82rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.65;
  color: rgba(232, 230, 230, 0.75);
}


/* ==========================================================================
   Tablet and phone
   ========================================================================== */
@media (max-width: 900px) {
  /* The language pill lives just below the fixed bar, over the film's
     dark ground, in BOTH states (owner direction, 1 Sep 2026): the
     in-bar toggle is a desktop device, and the pill stays put here. */
  .tc-lang { top: 4.35rem; right: 1.25rem; }
  .tc-bar-on .tc-lang { opacity: 1; pointer-events: auto; }
  .tc-nav-lang { display: none; }

  .tc-nav { height: 60px; padding: 0 1.25rem; }
  .tc-page body { padding-top: 60px; }

  /* Fixed state-1 sizes (the pair fits 375px at 30/19), so the morph
     below can animate plain widths. */
  /* Crisp purpose-made marks with the strokes BAKED IN (owner
     direction, 1 Sep 2026): the full pair (pinang-sun-kali x the white
     Tunel Crew wordmark) swaps to the mark pair (pinang-sun x the
     mountain) as the bar turns. Derivatives in img/partners/tunel-crew/
     are plain trimmed 3x-resolution mirrors of the owner art — the
     outer strokes are already IN the source PNGs (owner note,
     1 Sep 2026), so nothing is filtered, baked, or cropped. */
  /* THE MORPH (owner direction, 4 Sep 2026): the long logos must be
     seen turning into their marks and back. Each logo sits in a frame
     that clips; the frame's width eases from the full art to the mark's
     width while the full art fades out and the trimmed mark fades in
     over the very same pixels (the marks are plain crops of the same
     owner art) — the Kali wordmark folds away to the right of its
     pinang-and-sun, the Tunel Crew letters fold away to the left of
     their mountain. Nothing changes height, so the baseline holds.
     js/tunel-film.js glides the whole block between the centre and its
     bar slot (a FLIP animation over the same 0.45s). */
  .tc-nav-lockup { transition: gap 0.45s ease; }
  .tc-nav-lockup a {
    position: relative;
    display: block;
    overflow: hidden;
    transition: width 0.45s ease;
  }
  .tc-nav-lockup a:first-child { height: min(32px, 8.3vw); width: min(124px, 32.16vw); }   /* the full Kali art, 496:128 */
  .tc-nav-lockup a:last-child  { height: min(16.5px, 4.35vw); width: min(140.25px, 36.98vw); translate: 0 -0.4px; }   /* the full Tunel Crew art, 748:88; the letters' bottom on the sun's base */
  .tc-nav-kali,
  .tc-nav-kali-mark,
  .tc-nav-tc,
  .tc-nav-tc-mark {
    display: block;
    position: absolute;
    top: 0;
    width: auto;
    max-width: none;
    translate: none;
    transition: opacity 0.35s ease;
  }
  .tc-nav-kali      { content: url(../../img/partners/tunel-crew/nav-kali-full-2.png); left: 0; height: 100%; }
  .tc-nav-kali-mark { left: 0; height: 100%; opacity: 0; }                       /* the mark spans the art's full height */
  .tc-nav-tc        { content: url(../../img/partners/tunel-crew/nav-tc-full-2.png); right: 0; height: 100%; }
  .tc-nav-tc-mark   { right: 0.4%; top: 4.5%; height: 92%; opacity: 0; }         /* where the mountain sits inside the art */
  .tc-nav.is-bar .tc-nav-lockup a:first-child { width: min(30px, 7.78vw); }      /* the mark: 75:80 of the frame */
  .tc-nav.is-bar .tc-nav-lockup a:last-child  { width: min(20px, 5.25vw); }      /* the mountain: 104:80 of 92% */
  .tc-nav.is-bar .tc-nav-kali { content: url(../../img/partners/tunel-crew/nav-kali-full-2.png); height: 100%; opacity: 0; }
  .tc-nav.is-bar .tc-nav-tc   { content: url(../../img/partners/tunel-crew/nav-tc-full-2.png); height: 100%; opacity: 0; translate: none; }
  .tc-nav.is-bar .tc-nav-kali-mark,
  .tc-nav.is-bar .tc-nav-tc-mark { opacity: 1; }
  .tc-nav.is-bar .tc-nav-x { display: inline; }
  /* The collapsed pair huddles (owner direction, 3 Sep 2026): a
     tighter gap keeps the marks clear of the check-in card. */
  .tc-nav.is-bar .tc-nav-lockup { gap: 0.4rem; }
  .tc-nav-x { transition: font-size 0.45s ease; }
  .tc-nav.is-bar .tc-nav-x { font-size: 0.7rem; }
  /* The date pair and the book button fade into their slots. */
  @keyframes tc-bar-in { from { opacity: 0; } to { opacity: 1; } }
  .tc-nav.is-bar-ready .tc-nav-dates,
  .tc-nav.is-bar-ready .tc-nav-book { animation: tc-bar-in 0.35s ease both; }   /* beat two: they fade in as the marks glide left */

  /* Bar state on phones (owner direction, 3 Sep 2026): THREE blocks —
     the collapsed marks, the check-in/check-out pair, the book button —
     spread evenly across the strip. The lockup leaves its absolute
     centring, the engine dissolves into the flex row (display:
     contents) so its wrapper and button become blocks of their own. */
  .tc-nav.is-bar { justify-content: space-evenly; padding: 0 0.35rem; }
  .tc-nav.is-bar .tc-nav-lockup { position: static; left: auto; translate: none; flex: none; }
  /* Two beats (owner direction, 4 Sep 2026): first the logos fold into
     their marks in the centre of the strip (the lockup is the row's
     only item, so space-evenly keeps it centred as it narrows); only
     then — js/tunel-film.js adds .is-bar-ready after the fold — do the
     date pair and the book button join the row, fading in while the
     marks glide left into their slot. The trio waits out of flow and
     invisible, so the strip never overflows while the logos are wide. */
  .tc-nav.is-bar:not(.is-bar-ready) .tc-nav-engine { opacity: 0; pointer-events: none; }
  .tc-nav.is-bar-ready .tc-nav-engine { display: contents; }
  .tc-nav.is-bar .tc-nav-dates { display: flex; align-items: center; gap: 0.35rem; }

  /* Bar state: the marks left, the reserve trio filling the rest of
     the strip in three equal centred columns (owner direction,
     2 Sep 2026 — same distribution as desktop). */
  .tc-nav-engine {
    left: 7rem;
    right: 1.25rem;
    translate: 0 0;
    width: auto;
  }
  .tc-nav-date { padding: 0 0.15rem; }
  .tc-nav-date-label { margin-bottom: 0.3rem; font-size: 0.48rem; letter-spacing: 0.16em; }
  .tc-nav-date-value { font-size: 0.62rem; }
  .tc-nav-book { padding: 0.5rem 0.7rem; font-size: 0.5rem; letter-spacing: 0.16em; }

  .tc-close-lead { font-size: 1.15rem; }

  /* The film opens the page tight under the nav; the Short is
     height-cropped by .tc-player--tall (see the player block). The
     engine and the deal tighten so the price lands inside the first
     phone screen. */
  .tc-film  { padding: 0.5rem 0.75rem 0; }
  .tc-engine-section { padding: 1.3rem 1.25rem 1.8rem; }

  /* The engine holds ONE line on phones (owner direction, 2 Sep 2026):
     the two date components and the button share the row, in the
     bar's own look. */
  .tc-engine-row { width: 100%; }
  .tc-engine { padding: 1.15rem 0.5rem 0.8rem; border-radius: 6px; }
  .tc-engine-label { font-size: 0.48rem; letter-spacing: 0.1em; padding: 0 0.5rem; }
  .tc-engine-saving { margin-top: 0.8rem; font-size: 0.74rem; }
  .tc-field-value { font-size: 0.85rem; }
  .tc-engine-book { padding: 0.75rem 1rem; }
  .tc-deal-section   { padding: 1.2rem 1.25rem 3rem; }

  /* The two rates sit side by side on phones (owner direction, 3 Sep
     2026): a two-column grid, short captions beneath each price. */
  .tc-deal       { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: start; }
  .tc-cap-l      { display: none; }
  .tc-cap-s      { display: inline; }
  .tc-deal-cap   { margin-top: 0.45rem; letter-spacing: 0.1em; }
  .tc-deal-price { font-size: 1.15rem; }
  .tc-deal-was   { font-size: 0.75rem; margin-right: 0.3rem; }
  .tc-deal-per   { font-size: 0.68rem; }
  .tc-deal-name  { margin-bottom: 0.3rem; }
  .tc-intro { padding: 1.5rem 1.75rem 1.5rem; }
  .tc-prize { padding: 2.25rem 1.75rem 4.5rem; }

  /* 1.75rem sides: the carousel component's negative track margins
     assume the page gutter, so the gallery keeps the same gutter. */
  .tc-gallery { padding: 0 1.75rem 4rem; }

  /* The tab list slides horizontally on phones (owner direction,
     1 Sep 2026). The 16vw tail padding means the LAST option, scrolled
     all the way, STARTS on the right-third line of the screen (its
     first letter on the line; calibrated on the EN "Around"). */
  .tc-tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0.3rem 1.4rem;
    overflow-x: auto;
    margin: 0 -1.75rem 1.5rem;
    padding: 0 16vw 0 1.75rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tc-tabs::-webkit-scrollbar { display: none; }
  .tc-tab { flex: none; white-space: nowrap; }

  .tc-mark-panel.tc-mark-panel--pair img { max-width: 280px; }

  .tc-inner,
  .tc-heroes { padding: 4.5rem 1.75rem; }

  .tc-pact-grid { grid-template-columns: 1fr; gap: 2.75rem; }

  /* The mark leads on phones: it is the partner's signature, and it reads
     better above the copy than orphaned beneath it. */
  .tc-mark-panel { order: -1; padding: 2.25rem; }
  .tc-mark-panel img { max-width: 200px; }

  .tc-coasts { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 3rem; }
  .tc-rules  { grid-template-columns: 1fr; gap: 2.25rem; }

  /* .tc-player--tall now lives at base level (class-gated by the cut
     the player actually mounted) — see the player block above. */

  /* The lightbox on phones: tighter panel, and 16px inputs so iOS
     never zooms the page on focus. */
  .tc-modal { padding: 0.75rem; }
  .tc-modal-panel { padding: 2.6rem 1.15rem 1.25rem; }   /* the × clears the date row (no title now) */
  .tc-field-input { font-size: 1.05rem; }
  .tc-phone-row { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); }
  .tc-phone-dial { font-size: 0.95rem; }
  /* Three steppers on one phone line: tighter gaps, smaller discs. */
  .tc-units-row { gap: 0.4rem; }
  .tc-units-ctl { gap: 0.45rem; }
  .tc-units-btn { width: 26px; height: 26px; }
  .tc-units-n { min-width: 1.3rem; }

  .tc-roll { padding-left: 1.5rem; }
  .tc-roll-row {
    grid-template-columns: 4rem 1fr;
    gap: 0.4rem 1rem;
    padding: 1.15rem 0;
  }
  .tc-roll-name { font-size: 1.3rem; }
  .tc-roll-note { grid-column: 2; text-align: left; margin-top: 0.15rem; }
}

@media (max-width: 480px) {
  /* The bar stays one slim strip: the trio tightens further so marks,
     buttons and breathing room share 375px. The in-page engine row
     shrinks its type so one line survives the narrowest phones. */
  .tc-engine-book { font-size: 0.56rem; letter-spacing: 0.14em; }
  .tc-field-value { font-size: 0.78rem; }
  .tc-nav-date-label { font-size: 0.45rem; letter-spacing: 0.12em; }
  .tc-nav-date-value { font-size: 0.58rem; }
  .tc-nav-book { padding: 0.45rem 0.65rem; font-size: 0.48rem; }
  .tc-nav-lang a,
  .tc-nav-lang span { font-size: 0.56rem; padding: 0.15rem 0.15rem; }
}

/* ==========================================================================
   The calendar (owner direction, 4 Sep 2026) — flatpickr, in the page's
   own ink. The pop-over lives on <body>, so it is centred on the screen
   over a dim backdrop on every viewport, from the body box and from the
   lightbox alike (js/tunel-reserve.js adds .tc-cal on ready; the
   backdrop is the calendar's own spread shadow). Selectors mirror
   flatpickr 4.6's class names.
   ========================================================================== */
/* flatpickr's static wrapper stretches over the date box, so the
   invisible input keeps covering it (tap anywhere opens the calendar). */
.tc-date .flatpickr-wrapper { position: absolute; inset: 0; display: block; }
/* Anchored to its date box (owner direction, 4 Sep 2026): js sets top
   and left inline — above or below the box, whichever has the room,
   and shifted toward the roomier side of the screen, clamped inside
   the viewport. Fixed, so it escapes the lightbox panel's scroll. */
.flatpickr-calendar.tc-cal {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  translate: none;
  z-index: 1500 !important;
  width: auto !important;
  padding: 0.8rem 0.9rem 1rem;
  background: #131313 !important;
  border: 1px solid rgba(245, 239, 227, 0.16) !important;
  border-radius: 8px !important;
  /* The second shadow IS the backdrop: a 100vmax spread dims the whole
     screen from inside the calendar's own stacking context, so it sits
     under the pop-over and over the lightbox alike. */
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 0 100vmax rgba(0, 0, 0, 0.5) !important;
  font-family: 'Jost', sans-serif !important;
  color: #f5efe3 !important;
}
.flatpickr-calendar.tc-cal:not(.open) { display: none !important; }
.flatpickr-calendar.tc-cal::before { display: none !important; }
/* The pointer: a small ink diamond on the edge that faces the box,
   placed under the box's centre (--tc-cal-arrow, set by js). */
.flatpickr-calendar.tc-cal::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  width: 10px !important;
  height: 10px !important;
  left: var(--tc-cal-arrow, 24px) !important;
  background: #131313;
  border: 1px solid rgba(245, 239, 227, 0.16) !important;
  rotate: 45deg;
  pointer-events: none;
}
/* Months slide in from the side they come from (swipe, drag, trackpad
   or the arrows — js/tunel-reserve.js). */
@keyframes tc-slide-from-right { from { opacity: 0; translate: 18px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes tc-slide-from-left  { from { opacity: 0; translate: -18px 0; } to { opacity: 1; translate: 0 0; } }
.tc-cal .flatpickr-days.tc-slide-next { animation: tc-slide-from-right 0.3s ease; }
.tc-cal .flatpickr-days.tc-slide-prev { animation: tc-slide-from-left 0.3s ease; }
.flatpickr-calendar.tc-cal { user-select: none; -webkit-user-select: none; touch-action: pan-y; }
/* Phones: centred on the screen, no pointer (owner direction, 4 Sep 2026). */
.flatpickr-calendar.tc-cal.tc-cal--centre {
  top: 50% !important;
  left: 50% !important;
  translate: -50% -50%;
}
.flatpickr-calendar.tc-cal.tc-cal--centre::after { display: none !important; }
.flatpickr-calendar.tc-cal.tc-cal--below::after {
  top: -6px !important;
  bottom: auto !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
}
.flatpickr-calendar.tc-cal.tc-cal--above::after {
  top: auto !important;
  bottom: -6px !important;
  border-left-color: transparent !important;
  border-top-color: transparent !important;
}
.tc-cal .flatpickr-months { padding: 0 0 0.45rem; }
.tc-cal .flatpickr-months .flatpickr-month {
  background: transparent !important;
  color: #f5efe3 !important;
  fill: #f5efe3 !important;
  height: 36px;
}
.tc-cal .flatpickr-current-month {
  padding-top: 8px !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.66rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: #f5efe3 !important;
}
.tc-cal .flatpickr-current-month .cur-month { font-weight: 400 !important; }
.tc-cal .flatpickr-current-month .cur-month:hover { background: transparent !important; }
.tc-cal .flatpickr-current-month { white-space: nowrap; }
.tc-cal .flatpickr-current-month .numInputWrapper { width: 6.5ch; }
.tc-cal .flatpickr-current-month .numInputWrapper:hover { background: rgba(245, 239, 227, 0.06) !important; }
.tc-cal .flatpickr-current-month input.cur-year {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.66rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  padding-left: 0.4ch !important;
  color: #f5efe3 !important;
  background: transparent !important;
}
.tc-cal .numInputWrapper span { border-color: rgba(245, 239, 227, 0.18) !important; }
.tc-cal .numInputWrapper span:hover { background: rgba(245, 239, 227, 0.1) !important; }
.tc-cal .numInputWrapper span.arrowUp::after   { border-bottom-color: rgba(245, 239, 227, 0.7) !important; }
.tc-cal .numInputWrapper span.arrowDown::after { border-top-color: rgba(245, 239, 227, 0.7) !important; }
.tc-cal .flatpickr-prev-month,
.tc-cal .flatpickr-next-month {
  padding: 8px 10px !important;
  color: rgba(245, 239, 227, 0.55) !important;
  fill: rgba(245, 239, 227, 0.55) !important;
}
.tc-cal .flatpickr-prev-month:hover,
.tc-cal .flatpickr-next-month:hover,
.tc-cal .flatpickr-prev-month:hover svg,
.tc-cal .flatpickr-next-month:hover svg {
  color: var(--terra-light) !important;
  fill: var(--terra-light) !important;
}
.tc-cal .flatpickr-innerContainer,
.tc-cal .flatpickr-rContainer,
.tc-cal .flatpickr-days,
.tc-cal .flatpickr-weekdays { background: transparent !important; }
.tc-cal span.flatpickr-weekday {
  background: transparent !important;
  color: rgba(245, 239, 227, 0.42) !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.5rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
}
.tc-cal .flatpickr-day {
  background: transparent !important;
  border: 0 !important;
  border-radius: 2px !important;
  color: rgba(232, 230, 230, 0.85) !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 300 !important;
  max-width: 40px;
  height: 38px;
  line-height: 38px;
  transition: background 0.15s, color 0.15s;
}
.tc-cal .flatpickr-day:hover,
.tc-cal .flatpickr-day:focus {
  background: rgba(245, 239, 227, 0.08) !important;
  color: #fff !important;
}
.tc-cal .flatpickr-day.today {
  color: var(--terra-light) !important;
  font-weight: 400 !important;
}
.tc-cal .flatpickr-day.selected,
.tc-cal .flatpickr-day.selected:hover,
.tc-cal .flatpickr-day.startRange,
.tc-cal .flatpickr-day.endRange {
  background: var(--terra) !important;
  color: #f5efe3 !important;
}
.tc-cal .flatpickr-day.flatpickr-disabled,
.tc-cal .flatpickr-day.flatpickr-disabled:hover,
.tc-cal .flatpickr-day.prevMonthDay,
.tc-cal .flatpickr-day.nextMonthDay {
  background: transparent !important;
  color: rgba(232, 230, 230, 0.2) !important;
  opacity: 1;
  cursor: not-allowed;
}
.tc-cal .flatpickr-day.prevMonthDay:not(.flatpickr-disabled),
.tc-cal .flatpickr-day.nextMonthDay:not(.flatpickr-disabled) { cursor: pointer; color: rgba(232, 230, 230, 0.35) !important; }
@media (max-width: 360px) {
  .flatpickr-calendar.tc-cal { padding: 0.7rem 0.6rem 0.8rem; }
  .tc-cal .flatpickr-days,
  .tc-cal .dayContainer { width: 280px !important; min-width: 280px !important; max-width: 280px !important; }
  .tc-cal .flatpickr-day { max-width: 36px; height: 34px; line-height: 34px; }
}

/* Pure funnel (owner direction, 1 Sep 2026): the footer keeps brand
   and copyright only — no links off the page. The only ways out are
   the two logos in the nav. */
.tc-page .footer-links { display: none; }

/* No reduced-motion block: the old hero's looping scroll cue left with
   the 31 Aug 2026 reorder, and nothing here loops any more. */