/* ==========================================================================
   eCoasters — Costa da Caparica
   Lime on near-black, per the client's chosen direction. The brand vector's
   brown/gold is kept only in --brand-brown for print and legacy assets.
   Lime is unusable as text on light surfaces (1.45:1) — on the bone/sand bands
   the accent job passes to --lime-dk.
   All 16 fg/bg pairs verified >= 4.5:1 (WCAG AA); graphics >= 3:1.
   ========================================================================== */

:root {
  --ink:        #0D0D0D;   /* page black */
  --coal:       #161616;   /* raised surface */
  --coal-2:     #202020;
  --lime:       #C7D92E;   /* accent + CTA */
  --lime-hi:    #CEDE4A;
  --lime-dk:    #5F6813;   /* lime dark enough to be text/icon on a light surface */
  --sand:       #EDECE6;   /* light band */
  --sand-2:     #DFDDD4;
  --bone:       #F7F6F1;   /* lightest band */
  --white:      #FFFFFF;
  --muted:      #9A9A94;   /* secondary text on dark */
  --muted-lt:   #5C5C55;   /* secondary text on light */
  --line-dk:    #2A2A2A;
  --line-lt:    #DCDAD1;
  --danger:     #E5484D;

  --brand-brown: #512406;  /* the logo's original brown — assets only, not UI */

  --ink-rgb: 13, 13, 13;   /* for scrims and translucent bars */

  /* Raleway is the brand's own body face (it ships in their type folder and is
     free on Google Fonts). Anton carries the display headlines — see README. */
  --font: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --disp: 'Anton', 'Raleway', Impact, sans-serif;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem;
  --s5:3rem;  --s6:4.5rem; --s7:6.5rem;

  --r:   14px;
  --r-lg: 24px;
  --maxw: 1220px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after { box-sizing: border-box; }
/* Flex/grid containers set their own `display`, which outranks the UA `[hidden]`
   rule — so the JS-toggled booking date fields need this to actually hide. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ink); color: var(--sand);
  font-family: var(--font); font-size: 1rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
svg { display: block; }
p { margin: 0; }
ul,ol,dl { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
a { color: inherit; }

h1,h2,h3 { margin: 0; font-family: var(--disp); font-weight: 400; line-height: .95;
           letter-spacing: .01em; text-transform: uppercase; }

.num { font-variant-numeric: tabular-nums; }

/* ── A11y ───────────────────────────────────────────── */
.skip { position: absolute; left: -9999px; top: 0; z-index: 999;
        background: var(--lime); color: var(--ink); padding: var(--s2) var(--s3); text-decoration: none; }
.skip:focus { left: 0; }
:where(a,button,summary,input,select,textarea):focus-visible {
  outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 4px;
}

/* ── Photo layer with graceful fallback ─────────────── */
.media {
  background-image: var(--photo, none),
    linear-gradient(155deg, #2A2A22 0%, #191919 45%, #0D0D0D 100%);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  position: relative;
}

/* ── Layout ─────────────────────────────────────────── */
.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.wrap--narrow { max-width: 1600px; }

.sec { padding-block: var(--s7); position: relative; }
.sec--sand { background: var(--sand); color: var(--ink); }
.sec--dark { background: var(--coal); }

.sec__head { max-width: 100%; margin-bottom: var(--s6); }
.sec__h { font-size: clamp(2.25rem, 5.6vw, 4.25rem); margin-bottom: var(--s2); }

/* The page is dark by default, so the dark-surface colours are the defaults.
   Only the sand sections (and white cards) flip to the light-surface tokens. */
.sec__lede { font-size: 1.0625rem; color: var(--muted); max-width: 90ch; }
.sec--sand .sec__lede { color: var(--muted-lt); }

.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .18em;
           text-transform: uppercase; color: var(--lime); margin-bottom: var(--s2); }
.sec--sand .eyebrow { color: var(--lime-dk); }
.eyebrow--lime { color: var(--lime); }

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 50px; padding: 0 var(--s3);
  border: 1.5px solid transparent; border-radius: 100px;
  font-weight: 700; font-size: .875rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; touch-action: manipulation; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn--sm  { min-height: 42px; padding: 0 var(--s2); font-size: .75rem; }
.btn--lg  { min-height: 58px; padding: 0 var(--s4); font-size: .9375rem; }
.btn--full{ width: 100%; }

.btn--lime  { background: var(--lime); color: var(--ink); }
.btn--lime:hover { background: var(--lime-hi); }
.btn--dark  { background: var(--ink); color: var(--sand); }
.btn--dark:hover { background: var(--coal-2); }
.btn--glass { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.4);
              backdrop-filter: blur(8px); }
.btn--glass:hover { background: rgba(255,255,255,.2); }

.ico-arr { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor;
           stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
           transition: transform .2s var(--ease); }
.btn:hover .ico-arr { transform: translateX(3px); }

.linkish { background: none; border: 0; padding: .6rem .2rem; color: inherit;
           text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ── Header ─────────────────────────────────────────── */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 60;
       transition: background-color .3s var(--ease), border-color .3s var(--ease);
       border-bottom: 1px solid transparent; }
.hdr.is-stuck { background: rgba(var(--ink-rgb),.9); backdrop-filter: blur(12px); border-bottom-color: var(--line-dk); }
/* Menu open: drop the blur so it stops being a containing block for the fixed nav,
   and give the header a solid base so its strip matches the full-screen menu. */
.hdr.nav-open { background: rgba(var(--ink-rgb),.98); backdrop-filter: none; border-bottom-color: transparent; }
.hdr__in { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto;
           display: flex; align-items: center; justify-content: space-between;
           min-height: 76px; gap: var(--s3); }

.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--bone); }
/* The full lockup turns to mush below ~60px, so the header wears the mark alone. */
.brand__mark { height: 40px; width: auto; flex: none; }
/* Tight two-line lockup: name and slogan on line-height 1 so they sit close, in a
   flex column centred against the symbol (was spread ~10px apart and taller than it). */
.brand__txt { display: flex; flex-direction: column; justify-content: center; }
/* Raleway, not Anton: the logo's wordmark is a humanist sans, and a condensed
   display face beside it reads as two different brands. */
.brand__word { font-family: var(--font); font-weight: 700; font-size: 1.1875rem;
               letter-spacing: -.01em; text-transform: none; line-height: 1; }
.brand__sub { font-size: .5625rem; letter-spacing: .18em; text-transform: lowercase;
              color: var(--lime); line-height: 1; margin-top: 3px; }

.nav { display: flex; align-items: center; gap: var(--s3); }
.nav a { color: #fff; text-decoration: none; font-size: .8125rem; font-weight: 600;
         letter-spacing: .1em; text-transform: uppercase; position: relative; padding: .4rem 0; }
.nav a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
         height: 2px; background: var(--lime); transition: right .25s var(--ease); }
.nav a:not(.btn):hover::after { right: 0; }
.nav .btn { color: var(--ink); }

.burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.burger span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0;
               transition: transform .25s var(--ease), opacity .25s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero ───────────────────────────────────────────── */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end;
        padding-block: 8rem var(--s6); overflow: hidden; }
/* Hero background: a muted looping video on desktop, falling back to its own
   poster frame on mobile / reduced-motion / if the file never loads. main.js only
   attaches the source on wide screens without save-data, so phones never fetch it. */
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden;
   background: var(--ink) center / cover no-repeat; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
   transition: opacity .8s linear; }   /* two stacked copies crossfade at the loop seam (see main.js) */
.hero__video--b { opacity: 0; }
@keyframes slowzoom { from { transform: scale(1.09); } to { transform: scale(1); } }

/* Measured against the real hero photo: with these stops, only 2.2% of the headline's
   backdrop falls below 3:1 for the gold line (it was 31% with a lighter scrim). */
/* The lime headline line is the hardest text on the page: lime is mid-luminance,
   so a bright sky behind it kills contrast. Measured on hero.jpg, these stops take
   the failing area from 2.0% to 0.6% — and that figure counts the gaps between
   letters, where the photo legitimately shows through. */
.hero__scrim { position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(var(--ink-rgb),.80) 0%, rgba(var(--ink-rgb),.55) 30%,
                            rgba(var(--ink-rgb),.92) 86%, rgba(var(--ink-rgb),.94) 100%),
    linear-gradient(90deg, rgba(var(--ink-rgb),.80) 0%, transparent 68%); }

.hero__in { position: relative; z-index: 2; max-width: 60rem; }

.kicker { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: var(--s3);
          font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
          color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
          backdrop-filter: blur(8px); padding: .45rem .9rem; border-radius: 100px; }
.kicker__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); flex: none; }

/* Above-the-fold social proof — links to the reviews section */
.hero__rating { display: flex; width: fit-content; align-items: center; gap: .5rem; margin-bottom: var(--s3);
  padding: .4rem .85rem .4rem .7rem; border-radius: 100px; text-decoration: none;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px); transition: border-color .2s, background .2s; }
.hero__rating:hover { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.14); }
.hero__rating__stars { display: inline-flex; gap: 1px; flex: none; }
.hero__rating__stars svg { width: 15px; height: 15px; fill: #F2B705; display: block; }
.hero__rating__txt { color: #fff; font-size: .8125rem; font-weight: 500; letter-spacing: .01em; white-space: nowrap; }
.hero__rating__txt strong { font-weight: 800; }

.hero__h { font-size: clamp(3rem, 10.5vw, 8.5rem); color: #fff; margin-bottom: var(--s3); }
.hero__h span { display: block; }
.hero__h--lime { color: var(--lime); }

.hero__p { font-size: clamp(1rem, 1.5vw, 1.1875rem); color: #D9D9D3; max-width: 46ch; margin-bottom: var(--s4); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
/* Hero "bike rental" pill — a visible, secondary entry point straight into the
   rental page without competing with the primary adventures CTA. */
.hero__rent { display: inline-flex; align-items: center; gap: .7rem; width: fit-content;
  margin-bottom: var(--s5); padding: .6rem 1.05rem .6rem .85rem; border-radius: 100px;
  background: rgba(199,217,46,.1); border: 1px solid rgba(199,217,46,.42);
  color: #fff; text-decoration: none; font-size: .9375rem; line-height: 1.2;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.hero__rent:hover { background: rgba(199,217,46,.18); border-color: var(--lime); transform: translateY(-2px); }
.hero__rent strong { color: var(--lime); font-weight: 700; }
.hero__rent > svg:first-of-type { width: 24px; height: 24px; flex: none; fill: none;
  stroke: var(--lime); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero__rent .ico-arr { width: 15px; height: 15px; flex: none; opacity: .85; }

.hero__stats { display: flex; flex-wrap: wrap; gap: var(--s4); }
.hero__stats li { display: flex; align-items: center; gap: .7rem; font-size: .8125rem; color: var(--muted); }
.hero__stats strong { color: #fff; font-size: .9375rem; font-weight: 700; }
.hero__stats svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--lime);
                   stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.hero__down { position: absolute; left: 50%; bottom: var(--s3); z-index: 2;
              translate: -50% 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
              border: 1px solid rgba(255,255,255,.3); border-radius: 50%; }
.hero__down svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.6;
                  stroke-linecap: round; stroke-linejoin: round; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* ── Entrances ──────────────────────────────────────────
   Scoped to .js: with scripts off (or animations blocked) the content is simply
   there. Never hide anything the page can't bring back. */
.js .rise { opacity: 0; transform: translateY(20px);
            animation: rise .7s var(--ease) forwards; animation-delay: var(--d, 0ms); }
@keyframes rise { to { opacity: 1; transform: none; } }

.js .reveal { opacity: 0; transform: translateY(22px);
              transition: opacity .6s var(--ease) var(--d,0ms), transform .6s var(--ease) var(--d,0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
.buy.reveal.is-in h2{color:#c7d92e;}

/* ── Why bar ────────────────────────────────────────── */
.why { background: var(--coal); padding-block: var(--s5); border-block: 1px solid var(--line-dk); }
.why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: var(--s4); }
.why__i svg { width: 30px; height: 30px; fill: none; stroke: var(--lime); stroke-width: 1.4;
              stroke-linecap: round; stroke-linejoin: round; margin-bottom: var(--s2); }
.why__i h3 { font-family: var(--font); font-weight: 700; font-size: .875rem; letter-spacing: .1em;
             color: #fff; margin-bottom: .4rem; line-height: 1.3; }
.why__i p { font-size: .875rem; color: var(--muted); }

/* ── Tour cards ─────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px,1fr)); gap: var(--s3); }

.card { background: var(--white); border-radius: var(--r-lg); overflow: hidden;
        display: flex; flex-direction: column;
        transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.card:hover { transform: translateY(-6px); box-shadow: 0 28px 60px -30px rgba(var(--ink-rgb),.5); }
.card--feat { background: var(--ink); color: var(--sand); }

.card__media { aspect-ratio: 4/3; overflow: hidden; display: flex; flex-direction: column;
               justify-content: space-between; padding: var(--s2); }
.card__media::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--ink-rgb),.35) 0%, transparent 40%, rgba(var(--ink-rgb),.55) 100%); }
.card:hover .card__media { background-size: 106% auto, cover; }

.card__price, .card__meta { position: relative; z-index: 1; }
.card__price { position: absolute; top: var(--s2); right: var(--s2);
               background: rgba(var(--ink-rgb),.72); backdrop-filter: blur(6px); color: #fff;
               font-family: var(--disp); font-size: 1.375rem; letter-spacing: .02em;
               padding: .3rem .8rem; border-radius: 100px; }
.card__meta { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: auto; }
.pill { background: rgba(255,255,255,.16); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.28);
        color: #fff; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
        padding: .28rem .65rem; border-radius: 100px; }

.card__body { padding: var(--s3) var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.card__tag { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.card__h { font-size: 1.875rem; color: var(--ink); }
.card--feat .card__h { color: #fff; }
.card__d { font-size: .9375rem; color: var(--muted-lt); flex: 1; }
.card--feat .card__d { color: var(--muted); }
.card__body .btn { margin-top: var(--s1); }

/* ── Included ───────────────────────────────────────── */
.incl__head { margin-bottom: var(--s5); }
.incl__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--s3); }
.incl__grid li { display: flex; align-items: center; gap: var(--s2);
                 background: var(--coal-2); border: 1px solid var(--line-dk);
                 border-radius: var(--r); padding: var(--s2) var(--s3); min-height: 76px;
                 font-size: .9375rem; font-weight: 500; }
.incl__grid svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--lime);
                  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.incl__note { margin-top: var(--s4); font-size: .875rem; color: var(--muted); max-width: 68ch; }

/* ── Rental ─────────────────────────────────────────── */
.rental { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s6); align-items: start; }
.rental__sub { font-family: var(--font); font-size: .75rem; font-weight: 700; letter-spacing: .16em;
               text-transform: uppercase; color: var(--muted); margin: var(--s5) 0 var(--s2); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { border: 1px solid var(--line-dk); border-radius: 100px; padding: .35rem .85rem;
            font-size: .8125rem; color: var(--sand); }

.steps { margin-top: var(--s5); display: grid; gap: var(--s2); }
.steps li { display: flex; align-items: baseline; gap: var(--s2); font-size: .9375rem; color: var(--sand); }
.steps__n { font-family: var(--disp); color: var(--lime); font-size: 1rem; flex: none; }

.rental__card { background: var(--coal); border: 1px solid var(--line-dk);
                border-radius: var(--r-lg); padding: var(--s4); }
.rates { width: 100%; border-collapse: collapse; margin-bottom: var(--s3); }
.rates caption { text-align: left; font-size: .6875rem; font-weight: 700; letter-spacing: .16em;
                 text-transform: uppercase; color: var(--lime); padding-bottom: var(--s2); }
.rates th, .rates td { text-align: left; padding: .85rem 0; border-bottom: 1px solid var(--line-dk);
                       font-weight: 400; color: var(--sand); }
.rates thead th { font-size: .625rem; font-weight: 700; letter-spacing: .14em;
                  text-transform: uppercase; color: var(--muted); }
.rates td { text-align: right; font-size: 1.0625rem; }
.rates__best th, .rates__best td { color: var(--lime); font-weight: 700; border-bottom: 0; }
.rates__badge { display: inline-block; background: var(--lime); color: var(--ink); font-size: .5625rem;
                font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
                padding: .2rem .45rem; border-radius: 4px; margin-left: .5rem; vertical-align: 2px; }
.rental__fine { font-size: .8125rem; color: var(--muted); margin-top: var(--s2); text-align: center; }
.rates__note { font-size: .75rem; color: var(--muted); line-height: 1.6; margin-top: calc(-1 * var(--s2)); margin-bottom: var(--s3); }
.rates__note strong { color: var(--sand); font-weight: 700; }

/* Live rental price estimate in the booking form */
.calc { background: rgba(199, 217, 46, .16); border: 1px solid rgba(199, 217, 46, .55);
  border-radius: var(--r); padding: var(--s3); margin-bottom: var(--s3); }
.calc__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.calc__label { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lime-dk); }
.calc__total { font-size: 1.9rem; font-weight: 800; color: var(--ink); line-height: 1; }
.calc__break { margin: .5rem 0 0; font-size: .875rem; color: var(--muted-lt); }
.calc__note { margin: .35rem 0 0; font-size: .72rem; color: var(--muted-lt); }

/* ── About ──────────────────────────────────────────── */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; }
/* 5/4 matches the source photo's own ratio — no crop through the founders. */
.about__media { aspect-ratio: 5/4; border-radius: var(--r-lg); }
.about__p { color: var(--muted); margin-bottom: var(--s3); max-width: 52ch; }
.about__p strong { color: #fff; font-weight: 700; }
.about__cred { font-size: .75rem; color: var(--muted); margin-top: var(--s4); }

/* ── FAQ ────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line-lt); }
.faq details { border-bottom: 1px solid var(--line-lt); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
               padding: var(--s3) 0; cursor: pointer; font-weight: 700; font-size: 1.0625rem;
               list-style: none; min-height: 46px; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; width: 11px; height: 11px; flex: none;
  border-right: 2.5px solid var(--lime-dk); border-bottom: 2.5px solid var(--lime-dk);
  transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq details p { padding-bottom: var(--s3); color: var(--muted-lt); max-width: 68ch; }
.faq details[open] p { animation: fadeIn .3s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } }

/* ── Booking ────────────────────────────────────────── */
.book { position: relative; overflow: hidden; }
.book__media { position: absolute; inset: 0; z-index: 0; }
.book__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(var(--ink-rgb),.94) 0%, rgba(var(--ink-rgb),.8) 55%, rgba(var(--ink-rgb),.6) 100%); }
.book__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr;
              gap: var(--s6); align-items: start; }
.book__lede { color: var(--muted); max-width: 44ch; }

.direct { display: grid; gap: var(--s2); margin-top: var(--s5); max-width: 24rem; }
.direct__a { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3);
             min-height: 68px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18);
             border-radius: var(--r); text-decoration: none; font-size: .875rem; color: var(--sand);
             transition: border-color .2s var(--ease), transform .2s var(--ease), background-color .2s var(--ease); }
.direct__a:hover { border-color: var(--lime); transform: translateX(4px); background: rgba(208,132,57,.08); }
.direct__a svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--lime);
                 stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.direct__a strong { color: #fff; font-weight: 700; }

/* Light card so the form lifts off the dark booking section instead of reading
   as dark-on-dark; fields are white with dark text for clear contrast. */
.form { background: var(--bone); border: 1px solid var(--line-lt); border-radius: var(--r-lg);
        padding: var(--s3); display: grid; gap: var(--s2);
        box-shadow: 0 24px 60px -24px rgba(0,0,0,.55); }
.f { display: grid; gap: .3rem; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); align-items: start; }
.f label { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-lt); }
.req { color: var(--lime-dk); }
.opt { font-size: .8em; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted-lt); }

.f input, .f select, .f textarea {
  font: inherit; font-size: 1rem;                    /* 16px stops iOS auto-zoom */
  min-height: 46px; padding: .5rem .8rem;
  border: 1px solid var(--line-lt); border-radius: var(--r);
  background: #fff; color: var(--ink); width: 100%;
  color-scheme: light;                               /* native date/time pickers in light theme */
  accent-color: var(--lime-dk);                      /* calendar day accent on the light field */
  transition: border-color .18s var(--ease); }
/* Text/segment highlight inside the fields — replace the browser blue with lime.
   accent-color recolours the calendar popup + Firefox's segment; Chrome/Safari
   paint the in-field date/time segments blue on focus, which only the sub-field
   backgrounds can override — so the whole field lights up lime while it's active. */
.f input::selection, .f textarea::selection { background: var(--lime); color: var(--ink); }
.f input:focus::-webkit-datetime-edit-year-field,
.f input:focus::-webkit-datetime-edit-month-field,
.f input:focus::-webkit-datetime-edit-day-field,
.f input:focus::-webkit-datetime-edit-hour-field,
.f input:focus::-webkit-datetime-edit-minute-field,
.f input:focus::-webkit-datetime-edit-ampm-field {
  background: var(--lime); color: var(--ink); border-radius: 3px;
}

/* Pick-up / drop-off: a calendar field beside a clock field, one row each */
.dt { display: grid; grid-template-columns: 1.5fr 1fr; gap: .5rem; }
.f textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
.f input:hover, .f select:hover, .f textarea:hover { border-color: #B4B2A8; }
.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--lime-dk); }
.f input::placeholder, .f textarea::placeholder { color: #9A9A94; }
.f input[aria-invalid="true"], .f select[aria-invalid="true"] { border-color: var(--danger); }

.hint { font-size: .75rem; color: var(--muted-lt); }
.err { font-size: .75rem; color: var(--danger); display: flex; align-items: center; gap: .35rem; }
.err[hidden] { display: none; }   /* `display:flex` otherwise beats the hidden attribute */
.err::before { content: '!'; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
  border-radius: 50%; background: var(--danger); color: #fff; font-size: .625rem; font-weight: 700; flex: none; }

.form__alt   { text-align: center; font-size: .875rem; color: var(--muted-lt); }
.form__fine  { font-size: .75rem; color: var(--muted-lt); text-align: center; line-height: 1.6; }
.form__status{ font-size: .875rem; text-align: center; font-weight: 700; }
.form__status[data-state="ok"]  { color: var(--lime-dk); }
.form__status[data-state="bad"] { color: var(--danger); }

/* ── Footer ─────────────────────────────────────────── */
.ft { background: var(--ink); padding-block: var(--s6) var(--s4); border-top: 1px solid var(--line-dk); }
.ft__in { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s4);
          padding-bottom: var(--s5); border-bottom: 1px solid var(--line-dk); }
.ft__logo { height: 84px; width: auto; margin-bottom: var(--s2); }   /* full lockup, room to breathe */
.ft__tag { font-size: .875rem; color: var(--muted); line-height: 1.7; }
.ft__nav { display: flex; flex-direction: column; }
.ft__nav a { text-decoration: none; font-size: .8125rem; font-weight: 600; letter-spacing: .1em;
             text-transform: uppercase; width: fit-content; color: var(--sand);
             min-height: 44px; display: flex; align-items: center; }
.ft__nav a:hover { color: var(--lime); }
.ft__contact { display: flex; flex-direction: column; align-items: flex-start; }
.ft__contact a { text-decoration: none; font-size: .9375rem; color: var(--sand);
                 min-height: 44px; display: flex; align-items: center; }
.ft__contact a:hover { color: var(--lime); }
.ft__social { display: flex; gap: .5rem; margin-top: var(--s2); }
.ft__social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
                border: 1px solid var(--line-dk); border-radius: 50%; transition: border-color .2s var(--ease); }
.ft__social a:hover { border-color: var(--lime); }
.ft__social a:hover svg { fill: var(--lime); }
.ft__social svg { width: 19px; height: 19px; fill: var(--sand); stroke: none;
                  transition: fill .2s var(--ease); }
.ft__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
             gap: var(--s2); padding-top: var(--s3); font-size: .75rem; color: var(--muted); }
.ft__legal a { display: inline-block; padding: .55rem 0; }   /* >= 24px target (WCAG 2.5.8) */

/* ── Sticky mobile CTA ──────────────────────────────── */
.cta-bar { position: fixed; inset: auto 0 0 0; z-index: 55; display: none;
  align-items: center; justify-content: space-between; gap: var(--s2);
  padding: .7rem 1.25rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(var(--ink-rgb),.94); backdrop-filter: blur(12px); border-top: 1px solid var(--line-dk);
  transform: translateY(100%); transition: transform .3s var(--ease); }
.cta-bar.is-up { transform: none; }
.cta-bar__txt { display: flex; flex-direction: column; line-height: 1.25; }
.cta-bar__txt strong { font-family: var(--disp); font-size: 1.125rem; color: #fff; letter-spacing: .02em; }
.cta-bar__txt span { font-size: .6875rem; color: var(--muted); }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 960px) {
  .rental, .about, .book__grid { grid-template-columns: 1fr; gap: var(--s5); }
  .about__media { aspect-ratio: 16/10; }
  .ft__in { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .sec { padding-block: var(--s6); }
  .burger { display: flex; flex-direction: column; align-items: center; justify-content: center;
            width: 44px; height: 44px; padding: 0; border-radius: 12px;
            background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
            backdrop-filter: blur(8px); transition: background .2s var(--ease), border-color .2s var(--ease); }
  .burger span { width: 20px; margin: 3px 0; }
  .burger[aria-expanded="true"] { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .nav { position: fixed; inset: 76px 0 0 0; flex-direction: column; align-items: stretch;
         justify-content: flex-start; gap: 0; overflow-y: auto;
         background: rgba(var(--ink-rgb),.98); backdrop-filter: blur(12px);
         padding: var(--s3) 1.5rem calc(var(--s5) + env(safe-area-inset-bottom, 0px));
         transform: translateY(-8px); opacity: 0; pointer-events: none;
         transition: opacity .22s var(--ease), transform .22s var(--ease); }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: var(--s2) 0; border-bottom: 1px solid var(--line-dk); min-height: 56px;
           display: flex; align-items: center; font-size: .9375rem; letter-spacing: .14em; }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: var(--s3); border-bottom: 0; justify-content: center; min-height: 56px; }
  /* "Adventures" is our specialty — mark it out in the menu with a lime bar,
     a soft lime wash and lime text so it reads as the thing we're known for. */
  .nav a.nav__spec { color: var(--lime); padding-left: 16px; border-left: 3px solid var(--lime);
               background: linear-gradient(90deg, rgba(199,217,46,.18), rgba(199,217,46,0) 72%); }

  .hero { min-height: 92svh; padding-block: 7rem var(--s5); align-items: flex-end; }
  .hero__stats { gap: var(--s3); }
  .hero__stats li { flex: 1 1 130px; }
  .hero__down { display: none; }

  .f-row { grid-template-columns: 1fr; }
  /* Tighter booking/contact form on phones — still tap-friendly (>=44px) */
  .form { padding: var(--s2); gap: .7rem; border-radius: var(--r); }
  .f { gap: .25rem; }
  .f label { font-size: .625rem; }
  .f input, .f select, .f textarea { min-height: 44px; padding: .45rem .7rem; }
  .f textarea { min-height: 60px; line-height: 1.45; }
  .calc { padding: .8rem .9rem; }
  .calc__total { font-size: 1.6rem; }
  .form__fine { font-size: .7rem; line-height: 1.5; }
  .ft__in { grid-template-columns: 1fr; }
  .cta-bar { display: flex; }
  body { padding-bottom: 0; }
}

/* ── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0ms !important;
  }
  .js .rise, .js .reveal { opacity: 1; transform: none; }
  .hero__media { animation: none; transform: none; }
  .btn:active, .card:hover, .direct__a:hover { transform: none; }
  .cta-bar { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   Detail pages — /tour/* and /electric-bike-rental
   ══════════════════════════════════════════════════════════ */

/* Shorter hero: these pages are read, not landed on. */
.phero { position: relative; min-height: 62svh; display: flex; align-items: flex-end;
         padding-block: 9rem var(--s5); overflow: hidden; }
.phero__media { position: absolute; inset: 0; z-index: 0; }
/* Kept deliberately light so the hero photo reads clearly; text stays legible via
   a soft shadow (below) plus the darker gradient behind the copy at the bottom. */
.phero__scrim { position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(var(--ink-rgb),.12) 0%, rgba(var(--ink-rgb),.03) 32%,
                            rgba(var(--ink-rgb),.48) 54%, rgba(var(--ink-rgb),.80) 100%),
    linear-gradient(90deg, rgba(var(--ink-rgb),.50) 0%, rgba(var(--ink-rgb),.08) 100%, transparent 68%) }
/* Tours overview: a touch shorter than a detail-page hero so the first tour card
   peeks above the fold (and reveals on load) instead of leaving an empty band. */
.phero--tours { min-height: 56svh; }
/* Tours overview: darker top so the header logo reads over the bright sky, plus a
   stronger base for the heading. */
.phero--tours .phero__scrim {
  background:
    linear-gradient(180deg, rgba(var(--ink-rgb),.58) 0%, rgba(var(--ink-rgb),.20) 16%,
                            rgba(var(--ink-rgb),.05) 38%, rgba(var(--ink-rgb),.55) 78%,
                            rgba(var(--ink-rgb),.86) 100%),
    linear-gradient(90deg, rgba(var(--ink-rgb),.45) 0%, rgba(var(--ink-rgb),.10) 52%, transparent 74%); }
.phero__in { position: relative; z-index: 2; }   /* .wrap owns the width; don't override it */
.phero__in { text-shadow: 0 2px 16px rgba(0,0,0,.55); }   /* keeps copy legible over the lighter photo */
.phero__in .btn { text-shadow: none; }
.phero__h { font-size: clamp(2.5rem, 6.6vw, 5rem); color: #fff; margin-bottom: var(--s2); max-width: 18ch; }
.phero__tag { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
              color: var(--lime); margin-bottom: var(--s3); }
/* Standout pill in the hero (e.g. "Free delivery included!") */
.phero__badge { display: inline-flex; align-items: center; gap: 5px; background: var(--lime); color: var(--ink);
  font-weight: 800; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .5rem .95rem; border-radius: 999px; margin-bottom: var(--s3); }
.phero__badge svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Product photo inside the "The bikes" intro column */
.rental-shot { width: 100%; height: auto; display: block; margin-top: var(--s4);
  border-radius: var(--r-lg); background: #f4f4f4; border: 1px solid var(--line-lt); }

/* --muted is a secondary tone for flat surfaces; over a photo it drops below 4.5:1. */
.crumbs { display: flex; align-items: center; gap: .5rem; margin-bottom: var(--s3);
          font-size: .75rem; color: var(--sand); }
.crumbs a { color: var(--sand); text-decoration: none;
            display: inline-block; padding: .3rem 0; }   /* >= 24px target (WCAG 2.5.8) */
.crumbs a:hover { color: var(--lime); }
.crumbs span { opacity: .5; }

/* Fact strip under the hero */
.facts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s4); }
.facts div { min-width: 7rem; }
.facts dt { font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
            color: var(--muted); margin-bottom: .25rem; }
.facts dd { font-size: 1.125rem; font-weight: 700; color: #fff; }
.facts .accent { color: var(--lime); }

/* Two-column body: prose left, sticky booking card right */
.detail { display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--s6); align-items: start; }
.prose h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin: var(--s5) 0 var(--s2); }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--muted); margin-bottom: var(--s2); max-width: 62ch; }
.prose strong { color: var(--bone); font-weight: 700; }

.ticks { display: grid; gap: .75rem; margin: var(--s3) 0; }
.ticks li { display: flex; align-items: flex-start; gap: .7rem; font-size: .9375rem; color: var(--sand); }
.ticks svg { width: 20px; height: 20px; flex: none; margin-top: 2px;
             fill: none; stroke: var(--lime); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.note { background: var(--coal); border: 1px solid var(--line-dk); border-left: 3px solid var(--lime);
        border-radius: var(--r); padding: var(--s3); margin: var(--s4) 0; font-size: .9375rem; color: var(--muted); }
.note strong { color: var(--bone); }

/* Gallery */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s2); margin-top: var(--s3); }
.shots img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; border-radius: var(--r); display: block; }

/* Sticky booking card */
.buy { position: sticky; top: 100px; background: var(--coal); border: 1px solid var(--line-dk);
       border-radius: var(--r-lg); padding: var(--s4); }
.buy__price { display: flex; align-items: baseline; gap: .5rem; margin-bottom: var(--s1); }
.buy__n { font-family: var(--disp); font-size: 3rem; color: var(--lime); line-height: 1; }
.buy__u { font-size: .8125rem; color: var(--muted); }
.buy__sub { font-size: .8125rem; color: var(--muted); margin-bottom: var(--s3); }
.buy__list { display: grid; gap: .6rem; margin: var(--s3) 0; padding-top: var(--s3); border-top: 1px solid var(--line-dk); }
.buy__list li { display: flex; justify-content: space-between; gap: var(--s2); font-size: .875rem; color: var(--muted); }
.buy__list b { color: var(--bone); font-weight: 600; text-align: right; }
.buy__fine { font-size: .75rem; color: var(--muted); text-align: center; margin-top: var(--s2); line-height: 1.6; }
.buy .direct { margin-top: var(--s3); max-width: none; }

/* "Other rides" footer strip */
.more { border-top: 1px solid var(--line-lt); }
.more__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--s3); }
.more__c { display: block; text-decoration: none; border-radius: var(--r-lg); overflow: hidden;
           background: #fff; border: 1px solid var(--line-lt);
           transition: transform .3s var(--ease), border-color .3s var(--ease); }
.more__c:hover { transform: translateY(-4px); border-color: var(--lime-dk); }
.more__c img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.more__b { padding: var(--s3); }
.more__b h3 { font-size: 1.375rem; color: var(--lime-dk); margin-bottom: .35rem; }
.more__b p { font-size: .8125rem; color: var(--ink); }
.more__b .num { color: var(--ink); font-weight: 700; }

@media (max-width: 960px) {
  .detail { grid-template-columns: 1fr; gap: var(--s5); }
  .buy { position: static; }
  .phero { min-height: 0; padding-block: 8rem var(--s4); }
}
/* Rental hero on phones: the bright silver bike sat right behind the copy and killed
   its contrast. Shift the frame off the headline and deepen the scrim so it reads. */
@media (max-width: 768px) {
  /* Keep the bike centred (recognisable), but deepen the scrim behind the copy so
     the headline reads over the bright silver frame — without hiding the bike. */
  .phero--rental .phero__scrim {
    background:
      linear-gradient(180deg, rgba(var(--ink-rgb),.4) 0%, rgba(var(--ink-rgb),.26) 44%,
                              rgba(var(--ink-rgb),.5) 100%, rgba(var(--ink-rgb),.82) 100%),
      linear-gradient(90deg, rgba(var(--ink-rgb),.58) 0%, rgba(var(--ink-rgb),.24) 100%,
                             rgba(var(--ink-rgb),.04) 100%); }
}

/* ── Light bands on the detail pages ──────────────────────
   Long-form text reads better on a light surface. Gold dies on cream (1.67:1),
   so on light bands the accent job passes to --lime-dk (6.71:1). */
.sec--bone { background: var(--bone); color: var(--ink); }

.sec--bone .eyebrow,
.sec--sand   .eyebrow   { color: var(--lime-dk); }
.sec--bone .sec__lede,
.sec--sand   .sec__lede { color: var(--muted-lt); }
.sec--bone .prose p,
.sec--sand   .prose p   { color: var(--muted-lt); }
.sec--bone .prose strong,
.sec--sand   .prose strong { color: var(--ink); }
.sec--bone .ticks li,
.sec--sand   .ticks li  { color: var(--ink); }
.sec--bone .ticks svg,
.sec--sand   .ticks svg { stroke: var(--lime-dk); }
.sec--bone .chips li,
.sec--sand   .chips li  { border-color: var(--line-lt); color: var(--ink); background: var(--bone); }
.sec--sand .note    { background: var(--bone); border-color: var(--line-lt);
                     border-left-color: var(--lime-dk); color: var(--muted-lt); }
.sec--sand .note strong { color: var(--ink); }

/* ── Sticky in-page nav ─────────────────────────────────── */
.subnav { position: sticky; top: 76px; z-index: 40;
          background: rgba(var(--ink-rgb),.94); backdrop-filter: blur(12px);
          border-bottom: 1px solid var(--line-dk); }
.subnav__in { display: flex; align-items: center; gap: var(--s3);
              overflow-x: auto; scrollbar-width: none; min-height: 56px; }
.subnav__in::-webkit-scrollbar { display: none; }
.subnav a { flex: none; text-decoration: none; color: var(--muted);
            font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
            min-height: 44px; display: inline-flex; align-items: center;
            border-bottom: 2px solid transparent;
            transition: color .2s var(--ease), border-color .2s var(--ease); }
.subnav a:hover { color: var(--bone); }
.subnav a.is-here { color: var(--lime); border-bottom-color: var(--lime); }
.subnav__cta { margin-left: auto; }
.subnav__cta.btn { color: var(--ink); border-bottom: 0; }

/* Anchors must clear the header + subnav. */
/* #book sits on the form itself, so "Book"/"Contact" jump straight to the fields. */
[id="ride"], [id="terrain"], [id="tour-details"], [id="meeting-point"], [id="included"], [id="delivery"], [id="know"], [id="gallery"], [id="book"], [id="contact"], [id="tours"], [id="reviews"], [id="faq"] { scroll-margin-top: 140px; }

@media (max-width: 768px) {
  .subnav { top: 76px; }
  .subnav__in { gap: var(--s2); }
  .subnav__cta { margin-left: var(--s2); }
}

/* Two-column checklist band on the detail pages */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }
.cols .prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 0; }
@media (max-width: 768px) { .cols { grid-template-columns: 1fr; gap: var(--s5); } }

/* ── Legal pages ──────────────────────────────────────────
   No photo, no CTA. Numbering carries meaning in a legal document, so the
   list-style reset that .prose relies on has to be undone here. */
.legal-head { background: var(--coal); padding-block: 8rem var(--s4);
              border-bottom: 1px solid var(--line-dk); }
.legal-h { font-size: clamp(2rem, 5vw, 3.5rem); color: var(--bone); margin-bottom: var(--s2); }
.legal-date { font-size: .8125rem; color: var(--muted); }

.legal h2 { font-size: clamp(1.25rem, 2.2vw, 1.625rem); margin: var(--s5) 0 var(--s2); }
.legal ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: var(--s2); }
.legal ul.bullets { list-style: disc; padding-left: 1.5rem; margin-bottom: var(--s2); }
.legal li { display: list-item; color: var(--muted-lt); margin-bottom: .5rem; padding-left: .25rem; }
.legal li::marker { color: var(--lime-dk); font-weight: 700; }
.legal a { color: var(--lime-dk); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--brand); }
.legal > p:first-child { font-size: 1.0625rem; color: var(--ink); }

/* ══════════════════════════════════════════════════════════
   Tour page — layout after the client's mockup
   ══════════════════════════════════════════════════════════ */

/* Fact strip pinned to the bottom of the hero */
.hstrip { position: relative; z-index: 2; margin-top: var(--s5);
          border-top: 1px solid rgba(255,255,255,.18); padding-top: var(--s3);
          display: flex; flex-wrap: wrap; gap: 15px; }
.hstrip li { display: flex; align-items: center; gap: .75rem; }
.hstrip svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--lime);
              stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hstrip b { display: block; color: #fff; font-size: .875rem; font-weight: 700;
            letter-spacing: .08em; text-transform: uppercase; }
.hstrip span { font-size: .75rem; color: #C9C9C3; }

/* "This is not a tour" split */
.split { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--s6); align-items: center; }
.split__h { font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1; }
.split__h em { font-style: normal; color: var(--lime-dk); display: block; }
.sec--dark .split__h em, .sec:not(.sec--bone):not(.sec--sand) .split__h em { color: var(--lime); }
.split__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; }
.split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Our meeting point — 3-photo grid */
/* Meeting-point slideshow: the three photos cross-fade within one frame. */
.meet-slider { position: relative; aspect-ratio: 16/9; border-radius: var(--r-lg);
  overflow: hidden; border: 1px solid var(--line-lt); background: var(--sand);
  max-width: 760px; margin-inline: auto; }
.meet-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.1s var(--ease); }
.meet-slide.is-active { opacity: 1; }
@media (max-width: 680px) { .meet-slider { aspect-ratio: 4/3; } }

.marks { display: grid; gap: .6rem; margin: var(--s3) 0; }
.marks li { display: flex; align-items: flex-start; gap: .7rem; font-size: .9375rem; font-weight: 600; }
.marks svg { width: 18px; height: 18px; flex: none; margin-top: 3px; fill: none;
             stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.marks .no  svg { stroke: var(--muted-lt); }
.marks .yes svg { stroke: var(--lime-dk); }
.sec--dark .marks .no svg { stroke: var(--muted); }
.sec--dark .marks .yes svg { stroke: var(--lime); }

/* Highlights band */
.hl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 0; }
.hl__i { padding: var(--s3) var(--s4); border-left: 1px solid var(--line-dk); }
.hl__i:first-child { border-left: 0; padding-left: 0; }
.hl__i svg { width: 30px; height: 30px; fill: none; stroke: var(--lime); stroke-width: 1.5;
             stroke-linecap: round; stroke-linejoin: round; margin-bottom: var(--s2); }
.hl__i h3 { font-family: var(--font); font-size: .8125rem; font-weight: 800; letter-spacing: .1em;
            color: #fff; margin-bottom: .35rem; text-transform: uppercase; }
.hl__i p { font-size: .8125rem; color: var(--muted); }

/* The details — stat strip */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); }
.stats__i { display: flex; align-items: center; gap: .75rem; padding: var(--s3) var(--s2);
            border-left: 1px solid var(--line-lt); }
.stats__i:first-child { border-left: 0; }
.stats__i svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--lime-dk);
                stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.stats__n { font-family: var(--disp); font-size: 1.75rem; line-height: 1; color: var(--ink); display: block; }
.stats__l { font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
            color: var(--muted-lt); }

/* Included + transfers */
.incl2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }
.incl2 h3 { font-size: 1.125rem; margin-bottom: var(--s3); }

/* Gallery — single row, auto-scrolls when it overflows the screen */
/* The intro and the gallery are both light bands; without this their stacked
   padding leaves a big empty gap. Trim the intro's bottom padding when it's
   directly followed by the marquee gallery. */
.sec:has(+ .sec .galrow) { padding-bottom: var(--s3); }
/* Scrolls on its own (main.js), but stays a real scroll container so the visitor
   can drag / swipe / wheel across to any photo, even one that's off-screen. */
.galrow { margin-top: var(--s1); overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); }
.galrow::-webkit-scrollbar { display: none; }
.galrow__track { display: flex; gap: var(--s1); width: max-content; }
.galrow a { flex: 0 0 auto; display: block; overflow: hidden; border-radius: var(--r); cursor: zoom-in; }
.galrow img { height: 11rem; width: auto; aspect-ratio: 4/3; object-fit: cover; display: block;
  transition: transform .35s var(--ease); }
.galrow a:hover img { transform: scale(1.05); }
@media (max-width: 640px) { .galrow img { height: 8rem; } }

/* Lightbox — opens on click, arrows to move sideways, click-outside / Esc to close */
.lbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(13,13,13,.93); padding: clamp(1rem, 5vw, 4rem);
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s; }
.lbox.is-open { opacity: 1; visibility: visible; }
.lbox__img { max-width: min(92vw, 1200px); max-height: 86vh; width: auto; height: auto; display: block;
  border-radius: var(--r); box-shadow: 0 24px 70px rgba(0,0,0,.55); cursor: default; }
.lbox__btn { position: absolute; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.12); transition: background .2s, color .2s; }
.lbox__btn:hover { background: var(--lime); color: var(--ink); }
.lbox__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.lbox__close { top: max(1rem, 3vh); right: max(1rem, 3vw); }
.lbox__nav { top: 50%; transform: translateY(-50%); }
.lbox__prev { left: max(.5rem, 2vw); }
.lbox__next { right: max(.5rem, 2vw); }
.lbox__count { position: absolute; bottom: max(1rem, 3vh); left: 0; right: 0; text-align: center;
  color: rgba(255,255,255,.75); font-size: .8125rem; letter-spacing: .08em; pointer-events: none; margin: 0; }
@media (max-width: 640px) { .lbox__btn { width: 42px; height: 42px; } }

/* Testimonials + FAQ */
.say { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }
.quote { background: var(--bone); border: 1px solid var(--line-lt); border-left: 3px solid var(--lime-dk);
         border-radius: var(--r); padding: var(--s3); margin-bottom: var(--s2); }
.sec--dark .quote { background: var(--coal-2); border-color: var(--line-dk); border-left-color: var(--lime); }
.quote p { font-size: .9375rem; color: var(--muted-lt); margin-bottom: var(--s2); font-style: italic; }
.sec--dark .quote p { color: var(--muted); }
.quote cite { font-style: normal; font-size: .75rem; font-weight: 700; letter-spacing: .1em;
              text-transform: uppercase; color: var(--lime-dk); }
.sec--dark .quote cite { color: var(--lime); }

/* Final CTA band */
.final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
  background: var(--ink);
  color: var(--bone);
}
.final__media {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
}
.final__scrim {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--ink-rgb),.94) 0%, rgba(var(--ink-rgb),.78) 52%, rgba(var(--ink-rgb),.45) 100%);
  pointer-events: none;
}
.final__in {
  position: relative;
  z-index: 1;
  width: min(100% - 2.5rem, var(--maxw));
  max-width: 52rem;
  padding-block: var(--s7);
  text-align: center;
}
.final .eyebrow { color: var(--lime); }
.final__h {
  max-width: 16ch;
  font-size: clamp(2.75rem, 6vw, 6rem);
  color: var(--bone);
  margin: 0 auto var(--s2);
}
.final__p {
  max-width: 52ch;
  color: rgba(247,246,241,.82);
  margin: 0 auto var(--s4);
}
.final__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }

@media (max-width: 680px) {
  .final { min-height: 480px; }
  .final__scrim { background: rgba(var(--ink-rgb),.80); }
  .final__in { padding-block: 5rem; text-align: center; }
  .final__h, .final__p { margin-inline: auto; }
  .final__cta { flex-direction: column; }
  .final__cta .btn { width: 100%; }
}

/* WhatsApp float — the one thing that follows you everywhere */
.wa { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 45;
      width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
      background: #25D366; box-shadow: 0 8px 24px -8px rgba(0,0,0,.6);
      transition: transform .2s var(--ease); }
.wa:hover { transform: scale(1.06); }
.wa svg { width: 28px; height: 28px; fill: #fff; }

@media (max-width: 960px) {
  .split, .incl2, .say { grid-template-columns: 1fr; gap: var(--s5); }
  .hl__i { border-left: 0; border-top: 1px solid var(--line-dk); padding-inline: 0; }
  .hl__i:first-child { border-top: 0; }
  .stats__i { border-left: 0; border-top: 1px solid var(--line-lt); }
  .stats__i:first-child { border-top: 0; }
}
@media (max-width: 768px) {
  .wa { bottom: 5.5rem; }   /* clear the sticky booking bar */
  .hstrip { gap: var(--s2) var(--s3); }
}

/* ── Band-aware fixes ─────────────────────────────────────
   `.note` sits inside `.prose`, and the light-band prose override
   (`.sec--bone .prose strong`) out-specifies `.note strong`. So the note has to
   become a light card on light bands rather than fight the cascade. */
.sec--bone .note, .sec--sand .note {
  background: var(--white); border-color: var(--line-lt);
  border-left-color: var(--lime-dk); color: var(--muted-lt);
}
.sec--bone .note strong, .sec--sand .note strong { color: var(--ink); }

/* The FAQ was written for a light section. On the tour pages it lives on a dark
   one, where `--ink` text on `--coal` is invisible (1.07:1). */
.sec--dark .faq { border-top-color: var(--line-dk); }
.sec--dark .faq details { border-bottom-color: var(--line-dk); }
.sec--dark .faq summary { color: var(--bone); }
.sec--dark .faq summary::after { border-right-color: var(--lime); border-bottom-color: var(--lime); }
.sec--dark .faq details p { color: var(--muted); }

/* The stat tiles hold text of very different widths ("2 h" vs "PT · EN · ES").
   Grid children default to min-width:auto, so a long value pushes the page wider. */
.stats__i { min-width: 0; }
.stats__i > span:last-child { min-width: 0; }
.stats__n { font-size: clamp(1.125rem, 3.4vw, 1.75rem); overflow-wrap: anywhere; }
@media (max-width: 768px) {
  .stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ══════════════════════════════════════════════════════════
   Home page — layout after the client's second mockup
   ══════════════════════════════════════════════════════════ */

/* Section head with a lede sitting to the right of the title */
.head2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: end;
         margin-bottom: var(--s5); }
.head2 .sec__lede { margin: 0; }

/* Adventure cards — photo fills the card, copy sits on a scrim */
.adv { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: var(--s2); }
.adv__c { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
          min-height: 460px; border-radius: var(--r-lg); overflow: hidden; text-decoration: none;
          padding: var(--s3); isolation: isolate;
          transition: transform .35s var(--ease); }
.adv__c:hover { transform: translateY(-6px); }
/* Scrim kept clear over the top third so the photo reads, then ramps to dark
   where the copy sits. Text also carries a soft shadow so it stays legible over
   bright areas (e.g. sky) without darkening the whole photo. */
.adv__c::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--ink-rgb),0) 0%, rgba(var(--ink-rgb),.04) 34%,
                                      rgba(var(--ink-rgb),.42) 54%, rgba(var(--ink-rgb),.8) 76%,
                                      rgba(var(--ink-rgb),.93) 100%); }
.adv__media { position: absolute; inset: 0; z-index: -2; transition: transform .5s var(--ease); }
.adv__c:hover .adv__media { transform: scale(1.05); }
/* Lift a flat/overcast card photo so it reads as bright and inviting as the others.
   Only touches the photo layer (z-index -2) — the text scrim (::before) is untouched. */
.adv__media--boost { filter: brightness(1.12) contrast(1.05) saturate(1.1); }
.adv__h { font-size: 1.5rem; color: #fff; margin-bottom: .5rem; text-shadow: 0 2px 8px rgba(0,0,0,.55); }
.adv__d { font-size: .875rem; color: #EDECE6; margin-bottom: var(--s2); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.adv__meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s2);
             padding-top: var(--s2); border-top: 1px solid rgba(255,255,255,.2); }
.adv__meta li { display: flex; align-items: center; gap: .4rem; font-size: .75rem; color: #D9D9D3; }
.adv__meta svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--lime);
                 stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.adv__go { display: inline-flex; align-items: center; gap: .5rem; color: var(--lime);
           font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.adv__c:hover .adv__go .ico-arr { transform: translateX(3px); }

/* Locality suffix on a tour card title — smaller, lime, still uppercase with the name. */
.adv__loc { font-size: .62em; color: var(--lime); white-space: nowrap; }

/* Tours page (/tours/) only: stacked cards — photo 16:10 on top, copy on a solid
   card below, matching the "Other ways to ride" cards so the full scene shows
   instead of a cropped portrait slice. Scoped so the homepage grid is untouched. */
.adv--stacked { grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--s3); }
.adv--stacked .adv__c { justify-content: flex-start; min-height: 0; padding: 0; isolation: auto;
                        background: #fff; border: 1px solid var(--line-lt); }
.adv--stacked .adv__c:hover { transform: translateY(-6px); border-color: var(--lime-dk); }
.adv--stacked .adv__c::before { display: none; }
.adv--stacked .adv__media { position: relative; z-index: 1; inset: auto; width: 100%; aspect-ratio: 16/10; }
.adv--stacked .adv__c:hover .adv__media { transform: none; }
.adv--stacked .adv__b { display: flex; flex-direction: column; flex: 1; padding: var(--s3); }
.adv--stacked .adv__h { color: var(--lime-dk); text-shadow: none; font-size: 1.375rem; }
.adv--stacked .adv__loc { color: var(--lime-dk); }
.adv--stacked .adv__d { color: rgba(var(--ink-rgb),.72); text-shadow: none; }
.adv--stacked .adv__meta { border-top-color: var(--line-lt); }
.adv--stacked .adv__meta li { color: rgba(var(--ink-rgb),.7); }
.adv--stacked .adv__meta svg { stroke: var(--lime-dk); }
.adv--stacked .adv__go { color: var(--lime-dk); margin-top: auto; }
/* Adventure / Tour tag on a stacked card. */
.adv__badge { align-self: flex-start; font-size: .62rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; padding: .3rem .62rem; border-radius: 100px; margin-bottom: .55rem; }
.adv__badge--adv  { background: var(--lime); color: var(--ink); }
.adv__badge--tour { background: transparent; color: var(--muted-lt); border: 1px solid var(--line-lt); }
/* Featured Adventure card: a wider banner so it reads as the headline of the page. */
.adv--feature .adv__media { aspect-ratio: 21 / 9; }
@media (max-width: 700px) { .adv--feature .adv__media { aspect-ratio: 16 / 10; } }

/* "The eCoasters experience" band */
.exp { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s6); align-items: center; }
.exp__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/10; }
.exp__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp__h { font-size: clamp(1.75rem, 3.6vw, 2.75rem); color: #fff; margin-bottom: var(--s2); }
.exp__feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
              gap: var(--s3); margin-top: var(--s4); }
.exp__feats svg { width: 24px; height: 24px; fill: none; stroke: var(--lime); stroke-width: 1.5;
                  stroke-linecap: round; stroke-linejoin: round; margin-bottom: .5rem; }
.exp__feats h3 { font-family: var(--font); font-size: .6875rem; font-weight: 800; letter-spacing: .12em;
                 color: var(--lime); text-transform: uppercase; margin-bottom: .25rem; }
.exp__feats p { font-size: .8125rem; color: var(--muted); }

/* Reviews row */
.revs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--s2); }

/* Footer: four link columns + delivery areas */
.ft4 { display: grid; grid-template-columns: 1.3fr repeat(3, .8fr) 1.2fr; gap: var(--s4);
       padding-bottom: var(--s5); border-bottom: 1px solid var(--line-dk); }
.ft4 h3 { font-family: var(--font); font-size: .6875rem; font-weight: 800; letter-spacing: .14em;
          color: var(--muted); text-transform: uppercase; margin-bottom: var(--s2); }
.ft4 a { color: var(--sand); text-decoration: none; font-size: .875rem;
         display: flex; align-items: center; min-height: 32px; }
.ft4 a:hover { color: var(--lime); }
.ft__areas { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--s2); }
.ft__areas li { font-size: .75rem; color: var(--sand); border: 1px solid var(--line-dk);
                border-radius: 100px; padding: .25rem .6rem; }
.ft__pick { display: flex; align-items: flex-start; gap: .75rem; }
.ft__pick svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--lime);
                stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ft__pick b { display: block; color: #fff; font-size: .8125rem; font-weight: 800;
              letter-spacing: .1em; text-transform: uppercase; }
.ft__pick span { font-size: .8125rem; color: var(--muted); }

@media (max-width: 1080px) { .ft4 { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 960px) {
  .head2, .exp { grid-template-columns: 1fr; gap: var(--s3); }
  .exp__media { order: -1; }
}
@media (max-width: 700px) {
  /* Single, tidy column instead of a ragged 2-col — sections stack with clear rhythm. */
  .ft { padding-block: var(--s5) var(--s4); }
  .ft4 { grid-template-columns: 1fr; gap: var(--s4); }
  .ft4 > * { padding-bottom: var(--s3); border-bottom: 1px solid var(--line-dk); }
  .ft4 > *:last-child { border-bottom: 0; padding-bottom: 0; }
  .ft__logo { height: 62px; }
  .ft__areas { margin-top: var(--s2); }
  .ft__legal { flex-direction: column; align-items: flex-start; gap: .4rem; text-align: left; }
}

/* ── Reviews — compact Google style (homepage) ───────────
   Real Google Business Profile data (5.0 · 45). The Google "G" colours and gold
   #FBBC04 stars are the convention for a reviews badge; the numeric 5.0 + count
   carry the meaning as dark text on light, so the gold stars are supplementary. */
.rev2 { display: grid; grid-template-columns: 250px 1fr; gap: var(--s5); align-items: center; }
.rev2__score { display: flex; align-items: center; gap: .6rem; }
.rev2__n { font-family: var(--disp); font-size: 2.75rem; line-height: 1; color: var(--ink); }
.gstars { display: inline-flex; gap: 1px; }
.gstars svg { width: 15px; height: 15px; fill: #FBBC04; }
.gstars--lg { display: flex; margin: .5rem 0; }
.gstars--lg svg { width: 20px; height: 20px; }
.rev2__cap { font-size: .8125rem; color: var(--muted-lt); margin-bottom: var(--s3); }
/* Same Google rating summary, reused on the dark tour reviews section */
.say .rev2__n { color: #fff; }
.say .rev2__cap { color: var(--muted); }
.rev2__cars { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.rev2__track { display: flex; gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory;
               min-width: 0; scrollbar-width: none; padding: 4px; margin: -4px; }
.rev2__track::-webkit-scrollbar { display: none; }
.gcard { flex: 0 0 clamp(240px, 31%, 300px); scroll-snap-align: start; margin: 0;
         background: var(--white); border: 1px solid var(--line-lt); border-radius: var(--r);
         padding: var(--s3); display: flex; flex-direction: column; gap: .75rem; }
.gcard__top { display: flex; align-items: center; justify-content: space-between; }
.gcard__g { width: 22px; height: 22px; flex: none; }
.gcard__q { font-size: .875rem; color: var(--muted-lt); line-height: 1.55; margin: 0; flex: 1; font-style: normal; }
.gcard__who { display: flex; align-items: center; gap: .6rem; }
.gcard__ava { width: 34px; height: 34px; border-radius: 50%; background: var(--coal); color: var(--bone);
              display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .875rem; flex: none; }
.gcard__name { font-size: .8125rem; font-weight: 700; color: var(--ink); }
/* Vertical stack of Google-review cards (e.g. a tour page's "What people say"). */
.gcards-stack { display: flex; flex-direction: column; gap: var(--s2); }
.gcards-stack .gcard { flex: initial; }
.rev2__arrow { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-lt);
               background: var(--white); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer;
               transition: border-color .2s var(--ease); }
.rev2__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; }
.rev2__arrow:hover { border-color: var(--ink); }
.btn--wire { background: transparent; color: var(--ink); border-color: var(--line-lt); }
.btn--wire:hover { background: var(--white); border-color: var(--ink); }
@media (max-width: 860px) {
  .rev2 { grid-template-columns: 1fr; gap: var(--s4); }
  .rev2__arrow { display: none; }
  /* Leave the next card peeking (~20%) so it's clear the reviews slide. */
  .gcard { flex-basis: 80%; }
}

/* Booking form: when "Bike rental" hides the single date, let the select fill the row */
.f-row.one-col { grid-template-columns: 1fr; }

.ride-ideas.reveal.is-in { display: flex; gap:30px;flex-wrap: wrap;padding: 20px;}

/* =========================================================
   RENTAL FAQ
========================================================= */

#rental-faq {
   width: 100%;
  padding: clamp(72px, 9vw, 140px) 20px;
  background: #0d0d0d;
  color: #f7f5ee;
  box-sizing: border-box;
}
#rental-faq .rental-faq__inner {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}

#rental-faq .rental-faq__header {
  width: 100%;
  margin-bottom: 55px;
  text-align: left;
}

#rental-faq .rental-faq__list {
  width: 100%;
}

#rental-faq details {
  width: 100%;
}


#rental-faq .section-kicker,
#rental-faq h2 {
  text-align: center;
}

/* Pequeno título superior */
#rental-faq > p:first-child {
  margin-bottom: 10px;
  color: #dfff00;
  font-family: "Raleway", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
#rental-faq p {
    text-align: center;
}

/* Título principal */
#rental-faq > h2 {
  margin: 0 0 clamp(32px, 5vw, 60px);
  color: #f7f5ee;
  font-family: "Anton", sans-serif;
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Cada pergunta */
#rental-faq details {
  position: relative;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease;
   text-align:left;
}

#rental-faq .rental-faq__list {
  width: calc(100% - 48px);
  max-width: 1600px;
  margin-inline: auto;
}

#rental-faq details:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* Pergunta clicável */
#rental-faq summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 25px 58px 25px 0;
  color: #f7f5ee;
  font-family: "Raleway", sans-serif;
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  transition:
    color 0.25s ease,
    padding-left 0.25s ease;
}

/* Remover triângulo nativo */
#rental-faq summary::-webkit-details-marker {
  display: none;
}

#rental-faq summary::marker {
  display: none;
  content: "";
}

/* Ícone circular */
#rental-faq summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 0;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #dfff00;
  font-family: Arial, sans-serif;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-50%);
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease,
    transform 0.3s ease;
}

/* Hover */
#rental-faq summary:hover {
  padding-left: 10px;
  color: #dfff00;
}

#rental-faq summary:hover::after {
  border-color: #dfff00;
  background: #dfff00;
  color: #0d0d0d;
}

/* Estado aberto */
#rental-faq details[open] {
  border-color: rgba(223, 255, 0, 0.55);
}

#rental-faq details[open] summary {
  color: #dfff00;
}

#rental-faq details[open] summary::after {
  content: "−";
  border-color: #dfff00;
  background: #dfff00;
  color: #0d0d0d;
  transform: translateY(-50%) rotate(180deg);
}

/* Resposta */
#rental-faq details > p {
  max-width: 820px;
  margin: 0;
  padding: 0 60px 28px 0;
  color: rgba(247, 245, 238, 0.72);
  font-family: "Raleway", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
}

/* Animação simples da resposta */
#rental-faq details[open] > p {
  animation: rentalFaqReveal 0.3s ease both;
   text-align:left;
}


@keyframes rentalFaqReveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Acessibilidade de teclado */
#rental-faq summary:focus-visible {
  outline: 2px solid #dfff00;
  outline-offset: 5px;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  #rental-faq {
    padding: 72px 0;
  }

  #rental-faq > * {
    width: min(100% - 32px, 1120px);
  }

  #rental-faq > h2 {
    margin-bottom: 32px;
    font-size: clamp(38px, 12vw, 56px);
  }

  #rental-faq summary {
    gap: 20px;
    padding: 22px 48px 22px 0;
    font-size: 16px;
  }

  #rental-faq summary::after {
    width: 32px;
    height: 32px;
    font-size: 21px;
  }

  #rental-faq summary:hover {
    padding-left: 0;
  }

  #rental-faq details > p {
    padding: 0 0 24px;
    font-size: 15px;
    line-height: 1.7;
  }
}

/* Respeitar utilizadores que reduzem animações */
@media (prefers-reduced-motion: reduce) {
  #rental-faq details,
  #rental-faq summary,
  #rental-faq summary::after,
  #rental-faq details[open] > p {
    animation: none;
    transition: none;
  }
}

/* ══ INTRO / WHAT WE OFFER ════════════════════════════ */

.intro-offer {
  overflow: hidden;
}

.intro-offer__head {
  align-items: start;
}

.intro-offer__copy {
  max-width: 620px;
}

.intro-offer__copy p {
  margin: 0;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.7;
  color: rgba(13, 13, 13, 0.72);
}

.intro-offer__copy p + p {
  margin-top: 18px;
}

/* Two centred options */

.intro-offer__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1120px;
  margin: clamp(48px, 6vw, 88px) auto 0;
  border-top: 1px solid rgba(13, 13, 13, 0.22);
  border-bottom: 1px solid rgba(13, 13, 13, 0.22);
}

.intro-offer__card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(22px, 3vw, 42px);
  padding: clamp(38px, 5vw, 68px);
}

.intro-offer__card + .intro-offer__card {
  border-left: 1px solid rgba(13, 13, 13, 0.22);
}

.intro-offer__number {
  padding-top: 5px;
  color: #8ba600;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.intro-offer__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.intro-offer__label {
  margin: 0 0 14px;
  color: #6d8300;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.intro-offer__title {
  max-width: 450px;
  margin: 0;
  font-family: "Anton", sans-serif;
  font-size: clamp(2rem, 3.2vw, 3.75rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #0d0d0d;
}

.intro-offer__description {
  max-width: 500px;
  margin: 26px 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(13, 13, 13, 0.72);
}

.intro-offer__features {
  display: grid;
  gap: 12px;
  width: 100%;
  margin: 30px 0 34px;
  padding: 0;
  list-style: none;
}

.intro-offer__features li {
  position: relative;
  padding-left: 24px;
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.45;
  color: #0d0d0d;
}

.intro-offer__features li::before {
  position: absolute;
  top: 0.52em;
  left: 0;
  width: 8px;
  height: 8px;
  background: #dfff00;
  border-radius: 50%;
  content: "";
}

.intro-offer__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-bottom: 7px;
  border-bottom: 2px solid #0d0d0d;
  color: #0d0d0d;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    color 180ms ease,
    border-color 180ms ease;
}

.intro-offer__link .ico-arr {
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform 180ms ease;
}

.intro-offer__link:hover {
  color: #6d8300;
  border-color: #6d8300;
}

.intro-offer__link:hover .ico-arr {
  transform: translateX(4px);
}

/* Bottom assistance text */

.intro-offer__note {
  margin: 34px auto 0;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(13, 13, 13, 0.68);
}

.intro-offer__note a {
  color: #0d0d0d;
  font-weight: 750;
  text-underline-offset: 4px;
}

/* Responsive */

@media (max-width: 820px) {
  .intro-offer__options {
    grid-template-columns: 1fr;
  }

  .intro-offer__card + .intro-offer__card {
    border-top: 1px solid rgba(13, 13, 13, 0.22);
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .intro-offer__card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 38px 0;
  }

  .intro-offer__title {
    font-size: clamp(2.35rem, 12vw, 3.4rem);
  }

  .intro-offer__number {
    padding-top: 0;
  }
}
#tours {
  scroll-margin-top: 110px;
}
@media (max-width: 768px) {
  #tours {
    scroll-margin-top: 88px;
  }
}
a.btn.btn--lime.btn--sm {
    padding-left: 15px;
    padding-right: 15px;
}

/* Where can you ride — grelha responsiva */
.ride-ideas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.ride-ideas article {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Tablet */
@media (max-width: 900px) {
  .ride-ideas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .ride-ideas {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
#where-to-ride,
#where-to-ride .wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.phero__media--itw {
  --photo: url('/assets/img/IMG_0926.webp');
  background-position: center 55%;
}

@media (max-width: 700px) {
  .phero__media--itw {
    --photo: url('/assets/img/IMG_0899.webp');
    background-position: 58% center;
  }
}

#ride .split__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 48% center;
}
/* ═══════════════════════════════════════════
   INTO THE WOODS — TERRAIN
═══════════════════════════════════════════ */

#terrain {
  padding-block: 64px;
}

/* Mesma largura máxima dos blocos superiores */
#terrain .terrain-wrap {
   width: calc(100% - 64px);
  max-width: 1600px;
  margin-inline: auto;
}

/* Cabeçalho */
.terrain-head {
  max-width: none;
  margin: 0 0 40px;
  text-align: center;
}

.terrain-head .sec__h {
  max-width: none;
  margin-inline: auto;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
}

/* Blocos de características */
#terrain .hl {
  width: 100%;
  max-width: none;
}

/* Galeria */
.terrain-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 100%;
  margin-top: 40px;
}

.terrain-gallery__item {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4 / 3;
}

.terrain-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

/* Enquadramentos individuais */
.terrain-gallery__item:first-child img {
  object-position: center 42%;
}

.terrain-gallery__item:nth-child(2) img {
  object-position: center 55%;
}

.terrain-gallery__item:nth-child(3) img {
  object-position: center;
}

/* Gradiente para legibilidade das legendas */
.terrain-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78),
    transparent 55%
  );
}

.terrain-gallery__item figcaption {
  position: absolute;
  right: 18px;
  bottom: 16px;
  left: 18px;
  z-index: 2;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.terrain-gallery__item:hover img {
  transform: scale(1.035);
}

/* Tablet */
@media (max-width: 900px) {
  #terrain .terrain-wrap {
    width: calc(100% - 40px);
  }

  .terrain-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .terrain-gallery__item:last-child {
    grid-column: 1 / -1;
  }
}

/* Mobile */
@media (max-width: 600px) {
  #terrain {
    padding-block: 48px;
  }

  #terrain .terrain-wrap {
    width: calc(100% - 32px);
  }

  .terrain-head {
    margin-bottom: 32px;
  }

  .terrain-gallery {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }

  .terrain-gallery__item,
  .terrain-gallery__item:last-child {
    grid-column: auto;
    aspect-ratio: 4 / 3;
  }
}