/* ==========================================================================
   ALBANO AKTIV · style.css
   Single source of truth for all pages (root + subpages).
   --------------------------------------------------------------------------
   Brand palette · Navy #1F4E79 · Brown #8B5A2B · Cream #F5EBD6 · White
   Fonts        · Inter (UI) · Fraunces (display, italic accents) · Caveat (signature)
                · Caveat Brush (alternative signature, brush feel)
                  All fonts are self-hosted from /assets/fonts/. No external
                  dependencies, no requests to Google. See @font-face block below.

   Reference this stylesheet:
   <link rel="stylesheet" href="style.css">          ← root level (index, about, contact, external-tours)
   <link rel="stylesheet" href="../style.css">       ← subpages (mountain-biking/, trekking/, holiday-packages/, legal/)

   Sources:
   - index.html is the canonical reference. Where coming-soon and index differ,
     the index version wins. Coming-soon-only blocks (coming-soon section,
     license footer, nav wordcloud) are added without overriding index defaults.
   - Wordcloud component (wordcloud-component.html) is integrated as a generic,
     reusable component. Word size classes (wc-hero, wc-medium, wc-small, wc-tiny)
     work in any container (.nav-wordcloud, .wordcloud-band, future containers).

   STRUCTURE
   0.  Self-hosted fonts (@font-face)
   1.  Tokens & reset
   2.  Topbar
   3.  Nav · full + mega menu  (index + content subpages)
   4.  Nav · coming-soon variant
   5.  Buttons
   6.  Hero (headline band + cinemascope video)
   7.  Sections · container · eyebrow · section-title
   8.  Wordclouds — generic word styles + container variants
   9.  Activities grid
   10. About section
   11. Tour cards (featured tours)
   12. Coming-soon section
   13. CTA band
   14. Footer
   15. Animations
   16. Responsive
   17. Legal pages
   ========================================================================== */


/* ==========================================================================
   0. SELF-HOSTED FONTS
   --------------------------------------------------------------------------
   All font files live in /assets/fonts/ relative to the site root.
   Format: WOFF2 only. Charsets: latin + latin-ext (covers Portuguese
   characters like ã, ç, õ and other Western/Eastern European accents).

   Filenames follow google-webfonts-helper output exactly. If you re-download
   later and the version numbers change (e.g. inter v20 → v21), update the
   src URLs below — there's no other coupling.

   Available font-families:
     'Inter'         → 400, 500, 600, 700 (normal)
     'Fraunces'      → 400, 500, 600, 700 (normal); 400, 500, 700 (italic)
     'Caveat'        → 400, 700 (normal) — handwritten signature accent
     'Caveat Brush'  → 400 (normal) — alternative signature style, brush feel

   font-display: swap → text renders in fallback font immediately, then
   swaps in the brand font. No "invisible text" flash.
   ========================================================================== */

/* Inter — UI / body */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-v20-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-v20-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-v20-latin_latin-ext-700.woff2') format('woff2');
}

/* Fraunces — display, headlines, italic accents */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin_latin-ext-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin_latin-ext-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin_latin-ext-500italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin_latin-ext-700italic.woff2') format('woff2');
}

/* Caveat — handwritten signature accent */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/caveat-v23-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/caveat-v23-latin_latin-ext-700.woff2') format('woff2');
}

/* Caveat Brush — alternative signature style with a brush feel.
   Use via: font-family: 'Caveat Brush', cursive;
   Good for: alternative team-member signatures, decorative wordcloud accents. */
@font-face {
  font-family: 'Caveat Brush';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/caveat-brush-v12-latin_latin-ext-regular.woff2') format('woff2');
}


/* ==========================================================================
   1. TOKENS & RESET
   ========================================================================== */

:root {
  --navy:       #1F4E79;
  --navy-deep:  #16395A;
  --navy-soft:  #3A6FA0;
  --brown:      #8B5A2B;
  --brown-soft: #A86F3D;
  --cream:      #F5EBD6;
  --cream-soft: #FBF6EA;
  --ink:        #1A2332;
  --muted:      #5E6B7A;
  --line:       #E6DFCF;
  --white:      #FFFFFF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--white);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }


/* ==========================================================================
   2. TOPBAR · brown strip — picks up the brown of the logo mountains
   ========================================================================== */

.topbar {
  background: var(--brown);
  color: var(--cream);
  font-size: 13px;
  padding: 9px 0;
  letter-spacing: 0.02em;
}
.topbar-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}
.topbar a { color: var(--cream); opacity: 0.92; }
.topbar a:hover { opacity: 1; }
.topbar-location {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.topbar-pin {
  width: 13px;
  height: 18px;
  flex-shrink: 0;
}
.topbar-right { display: flex; gap: 22px; align-items: center; }
.topbar-right .sep { opacity: 0.4; }


/* ==========================================================================
   3. NAV · full · mega menu
   Used on index.html and all content subpages.
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  z-index: 100;
}
.nav-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 7px 32px;
  display: flex;
  align-items: center;
  gap: 40px;
}

/* Logo · left */
.logo-link {
  flex-shrink: 0;
  display: block;
}
.logo-link img {
  height: 84px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 2px;
  list-style: none;
  align-items: center;
  flex: 1;
  justify-content: center;
}
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  color: var(--navy);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}
.nav-links > li > a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--brown);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}
.nav-links > li > a:hover::after,
.nav-links > li.active > a::after,
.nav-links > li.has-mega:hover > a::after {
  transform: scaleX(1);
}
.nav-links > li > a:hover,
.nav-links > li.has-mega:hover > a {
  color: var(--navy-deep);
}

/* Chevron */
.nav-links > li.has-mega > a .chev {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0.55;
  transition: transform 0.25s ease;
  display: inline-block;
}
.nav-links > li.has-mega:hover > a .chev {
  transform: rotate(225deg) translate(-2px, -2px);
}

/* Mega menu */
.mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: 560px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brown);
  border-radius: 2px;
  padding: 24px;
  box-shadow: 0 24px 60px -24px rgba(22, 57, 90, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  z-index: 120;
}
.mega.wide { width: 760px; }
.has-mega:hover .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.has-mega::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

/* Mega header */
.mega-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--cream);
}
.mega-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
}
.mega-title em { font-style: italic; color: var(--brown); font-weight: 500; }
.mega-viewall {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brown);
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: none !important;
}
.mega-viewall:hover { color: var(--navy-deep); }
.mega-viewall::after {
  content: "→";
  font-size: 14px;
  transition: transform 0.2s ease;
}
.mega-viewall:hover::after { transform: translateX(3px); }

/* Mega items grid */
.mega-grid { display: grid; gap: 6px; }
.mega-grid.two   { grid-template-columns: 1fr 1fr; gap: 16px; }
.mega-grid.three { grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

.mega-item {
  display: flex;
  gap: 14px;
  padding: 12px;
  border-radius: 3px;
  transition: background 0.2s ease;
  align-items: center;
}
.mega-item:hover { background: var(--cream-soft); }
.mega-thumb {
  width: 56px;
  height: 56px;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.mega-item-text { flex: 1; min-width: 0; }
.mega-item-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--navy-deep);
  margin-bottom: 2px;
  line-height: 1.2;
}
.mega-item-desc {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.01em;
  line-height: 1.4;
  text-transform: none;
  font-weight: 400;
}
.mega-item:hover .mega-item-title { color: var(--brown); }

/* Compact mega (fewer items) */
.mega-compact { width: 300px; }
.mega-compact .mega-grid { grid-template-columns: 1fr; }
.mega-compact .mega-item { padding: 10px 12px; }
.mega-compact .mega-thumb { width: 48px; height: 48px; }

/* Simple dropdown (no items with images) */
.dropdown-simple {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brown);
  padding: 8px;
  box-shadow: 0 24px 60px -24px rgba(22, 57, 90, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.25s ease;
  z-index: 120;
}
.has-mega:hover .dropdown-simple {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-simple a {
  display: block;
  padding: 10px 14px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  border-radius: 2px;
  transition: all 0.15s ease;
  letter-spacing: 0.01em;
  text-transform: none;
}
.dropdown-simple a:hover {
  background: var(--cream);
  color: var(--brown);
  padding-left: 20px;
}

/* Nav right */
.nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Mobile toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--navy-deep);
}


/* ==========================================================================
   4. NAV · coming-soon variant
   Add `nav-static` to the .nav element to disable the sticky/blur defaults.
   The inline wordcloud uses the generic .wc-* classes from section 8.
   ========================================================================== */

.nav-static {
  position: static;
  background: var(--white);
  backdrop-filter: none;
}

/* Logo-only nav — used on coming-soon legal pages. No menu, no wordcloud,
   logo stays left as usual. Combine with .nav .nav-static .nav-logo-only. */
.nav-logo-only .nav-inner {
  justify-content: flex-start;
}


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.cta-btn {
  background: var(--navy);
  color: var(--white);
  padding: 12px 22px;
  border-radius: 2px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.2s ease;
  border: 2px solid var(--navy);
  cursor: pointer;
  display: inline-block;
}
.cta-btn:hover {
  background: var(--brown);
  border-color: var(--brown);
  transform: translateY(-1px);
}
.cta-btn.outline {
  background: transparent;
  color: var(--navy);
}
.cta-btn.outline:hover {
  background: var(--navy);
  color: var(--white);
}
.cta-btn.brown {
  background: var(--brown);
  border-color: var(--brown);
}
.cta-btn.brown:hover {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
}

/* Brand icons inside buttons (Google Maps, WhatsApp, Phone, Instagram, Facebook) */
.brand-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}


/* ==========================================================================
   6. HERO · headline band + cinemascope video
   ========================================================================== */

.hero {
  position: relative;
  background: var(--white);
}

/* Headline band: full width, with cream mountain silhouette as background */
.hero-headline {
  position: relative;
  width: 100%;
  padding: 18px 32px 36px;
  text-align: right;
  overflow: hidden;
  background: var(--white);
}
.hero-headline-shape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 120 L0 70 L80 50 L160 75 L240 30 L320 60 L400 25 L500 70 L600 35 L720 60 L840 30 L960 55 L1080 25 L1200 55 L1320 35 L1440 60 L1440 120 Z' fill='%23F5EBD6'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: bottom;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.hero-headline h1 {
  position: relative;
  z-index: 1;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  color: var(--navy-deep);
  margin: 0;
  letter-spacing: -0.02em;
}
.hero-headline h1 em {
  font-style: italic;
  color: var(--brown);
  font-weight: 500;
}
.hero-headline h1 .underline-word {
  position: relative;
  display: inline-block;
}
.hero-headline h1 .underline-word::after {
  content: "";
  position: absolute;
  bottom: 4px; left: -3px; right: -3px;
  height: 8px;
  background: var(--cream);
  z-index: -1;
}

/* Cinemascope video band: full width, fixed height */
.hero-video-band {
  width: 100%;
  height: 320px;
  overflow: hidden;
  background: var(--navy-deep);
  position: relative;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 75%;
  display: block;
}


/* ==========================================================================
   7. SECTIONS · container · eyebrow · section-title
   ========================================================================== */

section { padding: 56px 0; position: relative; }
.hero { padding: 0; }
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brown);
  margin-bottom: 14px;
  position: relative;
  padding-left: 40px;
}
.eyebrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 28px; height: 2px;
  background: var(--brown);
}
.section-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  color: var(--navy-deep);
  margin-bottom: 14px;
  max-width: 720px;
}
.section-title em {
  font-style: italic;
  color: var(--brown);
  font-weight: 500;
}
.section-intro {
  font-size: 17px;
  color: var(--muted);
  max-width: 620px;
  margin-bottom: 48px;
}


/* ==========================================================================
   8. WORDCLOUDS · generic word styles + container variants
   --------------------------------------------------------------------------
   The wc-* size classes are reusable across any wordcloud container.
   Add new containers (e.g. .wordcloud-band, .nav-wordcloud, .footer-wordcloud)
   and the same word classes will work inside them.

   Per-page customization: change the hierarchy by reassigning size classes
   in the SVG (e.g. on /trekking, swap so trekking gets .wc-hero, biking gets
   .wc-medium). New size tiers — add them as additional modifiers below
   (e.g. .wc-xl, .wc-large) without touching the existing ones.

   Two flavors per word class:
   - SVG flavor (used inside .nav-wordcloud, .wordcloud-band): uses `fill`
   - HTML flavor (used inside .nav-wordcloud-mobile, .wordcloud-band-mobile,
     prefix `wcm-`): uses `color` + explicit `font-size`
   ========================================================================== */

/* --- 8a · Generic SVG word classes (work in any SVG wordcloud container) --- */

.wc-word {
  font-family: 'Fraunces', serif;
  fill: var(--navy);
  transition: fill 0.25s ease, transform 0.25s ease;
  cursor: default;
}
.wc-word:hover { fill: var(--brown); }

.wc-hero {
  font-weight: 700;
  font-style: italic;
  fill: var(--navy-deep);
}
.wc-hero-2 {
  font-weight: 700;
  font-style: italic;
  fill: var(--brown);
}
.wc-medium {
  font-weight: 600;
  fill: var(--navy);
}
.wc-small {
  font-weight: 500;
  fill: var(--navy-soft);
}
.wc-tiny {
  font-weight: 400;
  fill: var(--brown-soft);
  font-style: italic;
}

/* --- 8b · Generic HTML/mobile word classes --- */

.wcm {
  display: inline-block;
  font-family: 'Fraunces', serif;
  margin: 3px 5px;
  vertical-align: middle;
  letter-spacing: -0.01em;
}
.wcm-hero {
  font-size: 26px;
  font-weight: 700;
  font-style: italic;
  color: var(--navy-deep);
}
.wcm-hero-2 {
  font-size: 26px;
  font-weight: 700;
  font-style: italic;
  color: var(--brown);
}
.wcm-medium {
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
}
.wcm-small {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy-soft);
}
.wcm-tiny {
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  color: var(--brown-soft);
}
.wcm-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brown-soft);
  opacity: 0.6;
  margin: 0 4px;
  vertical-align: middle;
}

/* --- 8c · Container variant: wordcloud inside the nav (coming-soon) ------ */

.nav-wordcloud {
  flex: 1;
  margin-left: 32px;
  max-height: 90px;
  overflow: hidden;
  position: relative;
}
.nav-wordcloud svg {
  width: 100%;
  height: 90px;
  display: block;
}

/* Mobile equivalent for the nav variant — sits below the nav */
.nav-wordcloud-mobile {
  display: none;
  padding: 14px 24px 18px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  text-align: center;
  line-height: 1.5;
}
/* In the nav-wordcloud-mobile, separator picks up cream tone */
.nav-wordcloud-mobile .wcm-sep {
  background: var(--cream);
  opacity: 1;
}

/* --- 8d · Container variant: standalone wordcloud band ------------------- */
/*  Full-width section, intended between hero video and "What we offer".
    Optionally place a cream mountain silhouette behind it via
    <div class="wordcloud-band-shape"></div>.                               */

.wordcloud-band {
  position: relative;
  width: 100%;
  background: var(--white);
  overflow: hidden;
}
.wordcloud-band-shape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 120 L0 70 L80 50 L160 75 L240 30 L320 60 L400 25 L500 70 L600 35 L720 60 L840 30 L960 55 L1080 25 L1200 55 L1320 35 L1440 60 L1440 120 Z' fill='%23F5EBD6'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: bottom;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.wordcloud-band-inner {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 32px 22px;
}
.wordcloud-band svg {
  width: 100%;
  height: clamp(80px, 9vw, 110px);
  display: block;
}
.wordcloud-band-mobile {
  display: none;
  position: relative;
  z-index: 1;
  padding: 16px 24px 18px;
  text-align: center;
  line-height: 1.5;
}


/* ==========================================================================
   9. ACTIVITIES grid
   ========================================================================== */

.activities {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.activity {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  color: var(--white);
  background-size: cover;
  background-position: center;
  transition: all 0.4s ease;
  cursor: pointer;
}
.activity::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 57, 90, 0) 30%, rgba(22, 57, 90, 0.85) 100%);
  transition: all 0.4s ease;
}
.activity:hover::before {
  background: linear-gradient(180deg, rgba(22, 57, 90, 0.3) 0%, rgba(22, 57, 90, 0.92) 100%);
}
.activity > * { position: relative; z-index: 2; }
.activity-number {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  color: var(--white);
}
.activity h3 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 12px;
  letter-spacing: 0;
  color: var(--cream);
  opacity: 0.9;
}
.activity ul {
  list-style: none;
  font-size: 14px;
  opacity: 0.9;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
}
.activity:hover ul {
  max-height: 200px;
  margin-top: 4px;
}
.activity ul li {
  padding: 5px 0;
  border-bottom: 1px solid rgba(245, 235, 214, 0.2);
}
.activity-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 14px;
  color: var(--cream);
}
.activity-cta::after {
  content: "→";
  transition: transform 0.3s ease;
}
.activity:hover .activity-cta::after { transform: translateX(6px); }
.activity.big   { grid-column: span 7; min-height: 420px; }
.activity.small { grid-column: span 5; }
.activity.third { grid-column: span 4; }

/* 4-card grid: all equal, square, side by side */
.activities.four-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.activity.square {
  grid-column: span 1;
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 22px;
}
.activity.square h3 { font-size: 15px; }


/* ==========================================================================
   10. ABOUT section
   ========================================================================== */

.about {
  background: var(--cream-soft);
  position: relative;
  overflow: hidden;
}
.about::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, var(--white), transparent);
}
.about-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 50px;
  align-items: center;
}
.about-img {
  position: relative;
  aspect-ratio: 4/5;
  background-image: url('img/02.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 2px;
}
.about-img::before {
  content: "";
  position: absolute;
  inset: -18px -18px 18px 18px;
  border: 2px solid var(--brown);
  z-index: -1;
}
.about-img::after {
  content: "Madeira · Since 2010";
  position: absolute;
  bottom: -24px; left: 24px;
  background: var(--brown);
  color: var(--cream);
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.about h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(30px, 3.2vw, 44px);
  color: var(--navy-deep);
  line-height: 1.08;
  margin-bottom: 20px;
}
.about h2 em { font-style: italic; color: var(--brown); font-weight: 500; }
.about p {
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 20px;
  line-height: 1.7;
}
.about-signature { margin-top: 36px; display: flex; align-items: center; gap: 20px; }
.about-signature .sig {
  font-family: 'Caveat', cursive;
  font-size: 32px;
  color: var(--navy);
  line-height: 1;
}
.about-signature .role {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ==========================================================================
   11. TOUR cards (featured tours)
   ========================================================================== */

.tours-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.tour-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}
.tour-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(22, 57, 90, 0.25);
  border-color: var(--brown-soft);
}
.tour-img {
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  position: relative;
}
.tour-img .tag {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--cream);
  color: var(--brown);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tour-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.tour-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.tour-meta span { display: flex; align-items: center; gap: 6px; }
.tour-meta span::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--brown);
  border-radius: 50%;
}
.tour-body h3 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--navy-deep);
  margin-bottom: 10px;
  line-height: 1.2;
}
.tour-body p {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 20px;
  flex: 1;
}
.tour-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.tour-price {
  font-family: 'Fraunces', serif;
  color: var(--navy);
  font-size: 22px;
}
.tour-price .from {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  display: block;
  margin-bottom: 2px;
}
.tour-link {
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tour-link:hover { color: var(--brown); }


/* ==========================================================================
   12. COMING-SOON section (used only on comingsoon.html)
   ========================================================================== */

.coming-soon {
  position: relative;
  padding: 110px 0;
  text-align: center;
  background: var(--cream-soft);
  overflow: hidden;
}
.coming-soon::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, var(--white), transparent);
  pointer-events: none;
}
.coming-soon-inner {
  position: relative;
  z-index: 2;
}
.coming-soon .dots-left,
.coming-soon .dots-right {
  display: inline-block;
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 56px);
  color: var(--brown);
  letter-spacing: 0.15em;
  vertical-align: middle;
  opacity: 0.7;
}
.coming-soon h2 {
  display: inline-block;
  vertical-align: middle;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(48px, 8vw, 110px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy-deep);
  margin: 0 28px;
  position: relative;
}
.coming-soon h2 .underline-word {
  position: relative;
  display: inline-block;
}
.coming-soon h2 .underline-word::after {
  content: "";
  position: absolute;
  bottom: 6px; left: -6px; right: -6px;
  height: 14px;
  background: var(--cream);
  z-index: -1;
}
.coming-soon-sub {
  margin-top: 28px;
  font-family: 'Caveat', cursive;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--navy);
  line-height: 1.3;
}
.coming-soon-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}
.coming-soon-divider .line {
  width: 60px;
  height: 2px;
  background: var(--brown);
  opacity: 0.55;
}
.coming-soon-divider .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brown);
}


/* ==========================================================================
   13. CTA band
   ========================================================================== */

.cta-band {
  background: var(--navy-deep);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  left: -60px; bottom: -60px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--brown) 0%, transparent 70%);
  opacity: 0.25;
  pointer-events: none;
}
.cta-band::after {
  content: "";
  position: absolute;
  right: -80px; top: -60px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, var(--white) 0%, transparent 70%);
  opacity: 0.18;
  pointer-events: none;
}
.cta-band-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
.cta-band h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 2.8vw, 42px);
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 22px;
}
.cta-band h2 em { font-style: italic; color: var(--cream); font-weight: 500; }
.cta-band .cta-address {
  color: rgba(255,255,255,0.95);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 14px;
}
.cta-band .cta-licenses {
  color: rgba(245, 235, 214, 0.7);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(245, 235, 214, 0.18);
}
.cta-band .cta-hint {
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  font-style: italic;
  max-width: 460px;
}

/* Logo + address side-by-side inside the Ready block */
.cta-shop {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 4px;
}
.cta-shop-logo {
  background: var(--white);
  padding: 10px 16px;
  border-radius: 4px;
  display: inline-block;
  flex-shrink: 0;
}
.cta-shop-logo img {
  display: block;
  height: 64px;
  width: auto;
}
.cta-band .actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.cta-band .cta-btn {
  background: var(--cream);
  color: var(--navy-deep);
  border-color: var(--cream);
  text-align: center;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cta-band .cta-btn:hover { background: var(--white); border-color: var(--white); }
.cta-band .cta-btn.outline {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}
.cta-band .cta-btn.outline:hover { background: var(--cream); color: var(--navy-deep); }

/* Social buttons row (Instagram + Facebook side by side) */
.cta-band .social-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cta-band .social-btn { padding-left: 12px; padding-right: 12px; }


/* ==========================================================================
   14. FOOTER
   ========================================================================== */

footer {
  background: var(--navy-deep);
  color: var(--white);
  padding: 24px 0;
}
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  flex-wrap: wrap;
  gap: 16px;
}
.foot-bottom a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.25);
  text-underline-offset: 3px;
}
.foot-legal a { text-decoration: none; }
.foot-bottom a:hover { color: var(--cream); text-decoration-color: var(--cream); }
.foot-legal { display: flex; gap: 22px; }


/* ==========================================================================
   15. ANIMATIONS
   ========================================================================== */

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-headline h1,
.coming-soon h2 {
  animation: rise 0.8s ease backwards;
  animation-delay: 0.1s;
}
.coming-soon-sub {
  animation: rise 0.8s ease backwards;
  animation-delay: 0.35s;
}


/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
  .nav-links { gap: 0; }
  .nav-links > li > a { padding: 10px 10px; font-size: 12px; }
}

@media (max-width: 960px) {
  /* Nav */
  .nav-toggle { display: block; margin-left: auto; }
  .nav-right > .cta-btn { display: none; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px -20px rgba(22, 57, 90, 0.25);
  }
  .nav-links.open { display: flex; }
  .nav-links > li { width: 100%; }
  .nav-links > li > a { width: 100%; }
  .has-mega::after { display: none; }
  .mega, .dropdown-simple {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--cream);
    margin-left: 14px;
    padding: 8px;
    width: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .has-mega.open .mega,
  .has-mega.open .dropdown-simple { max-height: 800px; }
  .mega-grid.two,
  .mega-grid.three { grid-template-columns: 1fr; }
  .mega.wide { width: auto; }

  /* Coming-soon nav: hide inline SVG wordcloud, show stacked tag version */
  .nav-wordcloud { display: none; }
  .nav-wordcloud-mobile { display: block; }
  .logo-link img { /* kept at 84px on index per spec; coming-soon may slim down */ }

  /* Standalone wordcloud band: SVG → stacked tags */
  .wordcloud-band-inner { display: none; }
  .wordcloud-band-mobile { display: block; }

  /* Activities */
  .activity.big,
  .activity.small,
  .activity.third { grid-column: span 12; }
  .activities.four-grid { grid-template-columns: repeat(2, 1fr); }

  /* About / tours */
  .about-grid { grid-template-columns: 1fr; gap: 60px; }
  .tours-grid { grid-template-columns: 1fr; }

  /* CTA band */
  .cta-band-inner { grid-template-columns: 1fr; }
  .cta-band .actions { justify-content: flex-start; }
  .cta-shop { grid-template-columns: 1fr; gap: 18px; justify-items: start; }
  .cta-band .cta-address { font-size: 15px; }
  .cta-band .cta-licenses { font-size: 11px; line-height: 1.95; }

  /* Hero */
  .hero-video-band { height: 220px; }
  .hero-headline { padding: 12px 24px 26px; }

  /* Section spacing */
  section { padding: 48px 0; }
  .coming-soon { padding: 70px 0; }

  /* Containers */
  .container, .nav-inner, .topbar-inner { padding-left: 24px; padding-right: 24px; }
  .topbar-inner { font-size: 12px; }
}

@media (max-width: 560px) {
  .activities.four-grid { grid-template-columns: 1fr; }

  /* Coming-soon: hide ornamental dots, let h2 breathe */
  .coming-soon .dots-left,
  .coming-soon .dots-right { display: none; }
  .coming-soon h2 { margin: 0; }
}


/* ==========================================================================
   17. LEGAL pages · plain content area
   Used on imprint.html, privacy.html and their coming-soon counterparts.
   Wrap the body of the page in <section class="legal-content">.
   No decorations, no hero, no images. Just readable text on white.
   ========================================================================== */

.legal-content {
  background: var(--white);
}
.legal-content .container {
  max-width: 760px;
}
.legal-content h1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1.1;
  color: var(--navy-deep);
  margin-bottom: 8px;
}
.legal-content .legal-sub {
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 36px;
}
.legal-content h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--navy-deep);
  line-height: 1.25;
  margin-top: 36px;
  margin-bottom: 12px;
}
.legal-content h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-top: 22px;
  margin-bottom: 8px;
}
.legal-content p,
.legal-content li {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 14px;
}
.legal-content ul,
.legal-content ol {
  padding-left: 22px;
  margin-bottom: 14px;
}
.legal-content a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--cream);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.legal-content a:hover {
  text-decoration-color: var(--brown);
  color: var(--brown);
}
.legal-content strong { font-weight: 600; color: var(--navy-deep); }
.legal-content hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 32px 0;
}