/* ============================================================
   HIPSTER INDIA TOURS — Master Stylesheet
   Style: Clean booking platform (inspired by GetYourGuide/Viator)
   ============================================================ */

/* Free fonts: Cormorant Garamond (Canela fallback), Space Grotesk, General Sans (Söhne fallback) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

/* ── Licensed fonts (Canela + Söhne are commercial) ──────────────────────────
   These are PAID fonts and can't be loaded from a free CDN. Until you license
   and self-host them, the free fallbacks above are used automatically.
   To activate the real fonts: buy a webfont licence, drop the .woff2 files into
   a /fonts/ folder next to /css/, and these rules pick them up — nothing else
   to change. */
@font-face{font-family:'Canela';src:url('../fonts/Canela-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Canela';src:url('../fonts/Canela-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Söhne';src:url('../fonts/Soehne-Buch.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Söhne';src:url('../fonts/Soehne-Kraftig.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Söhne';src:url('../fonts/Soehne-Halbfett.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ── Variables ──────────────────────────────────────────── */
:root {
  --white:      #FFFFFF;
  --bg:         #F8F7F4;
  --bg2:        #F1EDE6;
  --terra:      #C24A1A;
  --terra-dk:   #9A3A12;
  --terra-lt:   #E05A20;
  --gold:       #B8860B;
  --ink:        #1A1410;
  --ink2:       #3D3530;
  --muted:      #7A726C;
  --border:     #E4DDD6;
  --border2:    #CFC8C0;
  --shadow-sm:  0 1px 4px rgba(26,20,16,.07), 0 4px 14px rgba(26,20,16,.05);
  --shadow-md:  0 4px 16px rgba(26,20,16,.1), 0 8px 32px rgba(26,20,16,.06);
  --font-h:     'Canela', 'Cormorant Garamond', Georgia, serif;
  --font-b:     'Söhne', 'General Sans', system-ui, -apple-system, sans-serif;
  --font-label: 'Space Grotesk', 'Söhne', 'General Sans', sans-serif;
  --max-w:      1200px;
  --sp:         clamp(56px,7vw,100px);
}

/* ── Reset ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--ink);font-family:var(--font-b);line-height:1.6;letter-spacing:-.01em;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select,textarea{font-family:inherit}

/* ── Typography ─────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--font-h);font-weight:400;line-height:1.02;letter-spacing:-.03em;color:var(--ink)}
h1{font-size:clamp(2.2rem,5vw,4rem)}
h2{font-size:clamp(1.7rem,3.5vw,2.8rem)}
h3{font-size:clamp(1.2rem,2.5vw,1.8rem)}
h4{font-size:clamp(1rem,1.8vw,1.3rem)}
p{font-size:1rem;color:var(--ink2);max-width:68ch;line-height:1.75}
.tag{display:inline-block;font-family:var(--font-label);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--terra);margin-bottom:8px}

/* ── Layout ─────────────────────────────────────────────── */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 clamp(18px,4vw,56px)}
.section{padding:var(--sp) 0}
.section-alt{background:var(--bg)}
.section-dark{background:var(--ink)}

/* ── Buttons ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;font-family:var(--font-b);font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:4px;transition:all .2s;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--terra);color:#fff;border:2px solid var(--terra)}
.btn-primary:hover{background:var(--terra-dk);border-color:var(--terra-dk);transform:translateY(-2px);box-shadow:0 6px 20px rgba(194,74,26,.35)}
.btn-outline{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-outline-white{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6)}
.btn-outline-white:hover{background:#fff;color:var(--ink)}
.btn-sm{padding:9px 20px;font-size:.75rem}
.btn-ghost{color:var(--terra);font-family:var(--font-b);font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;transition:gap .2s}
.btn-ghost:hover{gap:10px}

/* ── Navigation ─────────────────────────────────────────── */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s;height:66px;display:flex;align-items:center;padding:0 clamp(18px,4vw,56px);justify-content:space-between}
.site-nav.scrolled{border-color:var(--border);box-shadow:0 2px 12px rgba(26,20,16,.06)}
.nav-logo{font-family:var(--font-b);font-size:1.1rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
.nav-logo span{color:var(--terra)}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2vw,30px)}
.nav-links a{font-size:.8rem;font-weight:500;color:var(--muted);transition:color .18s;letter-spacing:.01em}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-book{background:var(--terra)!important;color:#fff!important;padding:9px 20px;border-radius:4px;font-weight:700!important;font-size:.78rem!important;letter-spacing:.05em;transition:background .18s!important}
.nav-book:hover{background:var(--terra-dk)!important}
/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;padding:4px;z-index:201}
.hamburger span{display:block;width:24px;height:2px;background:var(--ink);border-radius:1px;transition:all .28s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Mobile menu */
.mobile-menu{display:none;position:fixed;inset:0;background:var(--white);z-index:200;flex-direction:column;justify-content:center;align-items:center;gap:24px;opacity:0;pointer-events:none;transition:opacity .28s}
.mobile-menu.open{display:flex;opacity:1;pointer-events:all}
.mobile-menu a{font-family:var(--font-b);font-size:2rem;font-weight:600;color:var(--ink);transition:color .2s}
.mobile-menu a:hover{color:var(--terra)}
.mobile-menu .mob-book{background:var(--terra);color:#fff;padding:14px 40px;border-radius:4px}

/* ── Hero (home) ────────────────────────────────────────── */
.home-hero{padding-top:66px;background:var(--bg);overflow:hidden}
.home-hero-inner{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(460px,60vh,680px);align-items:center;gap:clamp(32px,5vw,80px)}
.home-hero-text{padding:var(--sp) 0}
.home-hero-text .tag{font-size:.72rem;margin-bottom:14px}
.home-hero-text h1{margin-bottom:20px;line-height:1.1}
.home-hero-text h1 span{color:var(--terra)}
.home-hero-text p{font-size:1.08rem;margin-bottom:32px;max-width:50ch}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px}
.trust-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--muted);font-weight:500}
.trust-item .dot{width:5px;height:5px;border-radius:50%;background:var(--terra-lt);flex-shrink:0}

/* ================================================================
   📸 HOME HERO PHOTO
   To add your photo: save it as  photos/home-hero.jpg
   then replace the background-color below with:
   background-image: url('../photos/home-hero.jpg');
   ================================================================ */
.home-hero-photo{position:relative;height:100%;min-height:460px;align-self:stretch;background-color:#C4A882;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;border-radius:0 0 0 48px;overflow:hidden}
.hero-photo-caption{padding:24px;background:linear-gradient(to top,rgba(26,20,16,.7) 0%,transparent 100%);color:rgba(255,255,255,.8);font-size:.78rem;font-weight:500;letter-spacing:.06em}

/* ── Page hero (inner pages) ────────────────────────────── */
.page-hero{padding-top:66px;position:relative;height:clamp(560px,60vh,720px);display:flex;align-items:flex-end;padding-bottom:clamp(32px,5vw,60px);overflow:hidden}

/* ================================================================
   📸 PAGE HERO PHOTO — each page has its own photo slot
   Instructions are in the individual page files.
   ================================================================ */
.page-hero-bg{position:absolute;inset:0;background-color:#8B6E5A;background-size:cover;background-position:center}
.page-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(26,20,16,.75) 0%,rgba(26,20,16,.15) 55%,transparent 100%)}
.page-hero-content{position:relative;z-index:2;color:#fff}
.page-hero-content .tag{color:rgba(255,255,255,.65);margin-bottom:10px}
.page-hero-content h1{color:#fff;margin-bottom:10px}
.page-hero-content p{color:rgba(255,255,255,.8);font-size:1.05rem;max-width:56ch}

/* ── Section headers ────────────────────────────────────── */
.sec-head{margin-bottom:clamp(28px,4vw,48px)}
.sec-head.center{text-align:center}
.sec-head.center p{margin:12px auto 0}
.sec-head h2{margin-bottom:10px}
.sec-head p{margin-top:12px;font-size:1.02rem}

/* ── Photo slot system ──────────────────────────────────────────
   HOW TO ADD YOUR PHOTOS:
   1. Put your photo file in the  photos/  folder
   2. Find the matching comment in the HTML (search for 📸)
   3. Change the style="background-color:..." to
      style="background-image:url('../photos/yourfile.jpg')"
   That's it. No code knowledge needed.
   ──────────────────────────────────────────────────────────── */
.photo-slot{background-color:#C4A882;background-size:cover;background-position:center;position:relative}
.photo-slot::after{content:'📷 Add your photo here\A Replace background-color with\A background-image: url(...)';white-space:pre;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-b);font-size:.8rem;color:rgba(255,255,255,.6);text-align:center;background:rgba(26,20,16,.18);pointer-events:none;line-height:1.8}
/* ⬇ Once you add a real background-image, delete the ::after rule above for that element,
      or add the class 'has-photo' to hide the placeholder label */
.photo-slot.has-photo::after{display:none}

/* ── Tour Cards ─────────────────────────────────────────── */
.tours-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.tour-card{background:var(--white);border-radius:10px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:transform .28s,box-shadow .28s;display:flex;flex-direction:column}
.tour-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.tour-card-img{height:220px;overflow:hidden;position:relative;flex-shrink:0}
.tour-card-img .photo-slot{height:100%;width:100%}
.tour-card-img .photo-slot::after{font-size:.72rem}
.tour-card-body{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.tour-card-body .tag{margin-bottom:6px}
.tour-card-body h3{font-size:1.15rem;margin-bottom:8px;line-height:1.2}
.tour-card-body p{font-size:.9rem;flex:1;margin-bottom:18px;max-width:100%;color:var(--muted)}
.tour-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--border)}
.tour-price{font-family:var(--font-b);font-size:1rem;font-weight:700;color:var(--ink)}
.tour-price small{font-family:var(--font-b);font-size:.7rem;color:var(--muted);font-weight:400;display:block;margin-bottom:1px}

/* ── Rating badge ───────────────────────────────────────── */
.rating-badge{display:inline-flex;align-items:center;gap:5px;background:#FFF7ED;border:1px solid #F5CCA0;border-radius:4px;padding:3px 8px;font-size:.78rem;font-weight:600;color:#9A5200}
.rating-badge .star{color:#F59E0B}

/* ── Platform logos ─────────────────────────────────────── */
.platforms-row{display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,36px);flex-wrap:wrap}
.platform-pill{display:flex;align-items:center;gap:8px;padding:10px 20px;border:1.5px solid var(--border);border-radius:6px;font-size:.78rem;font-weight:600;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;transition:all .2s}
.platform-pill:hover{border-color:var(--terra);color:var(--terra);transform:translateY(-2px)}
.platform-pill .star{color:#F59E0B}

/* ── Review cards ───────────────────────────────────────── */
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:40px}
.review-card{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:26px;box-shadow:var(--shadow-sm);position:relative}
.review-card::before{content:'\201C';font-family:Georgia,serif;font-size:4.5rem;line-height:1;color:var(--terra);opacity:.15;position:absolute;top:10px;left:16px;pointer-events:none}
.review-stars{color:#F59E0B;font-size:.85rem;letter-spacing:2px;margin-bottom:10px}
.review-text{font-size:.93rem;color:var(--ink2);line-height:1.65;margin-bottom:16px}
.review-author{font-family:var(--font-b);font-size:.82rem;font-weight:700;color:var(--ink)}
.review-location{font-size:.75rem;color:var(--muted);margin-top:2px}

/* ── Itinerary ──────────────────────────────────────────── */
.itinerary{display:flex;flex-direction:column;gap:14px;margin:24px 0}
.itinerary-item{display:flex;gap:16px}
.itin-dot{width:9px;height:9px;border-radius:50%;background:var(--terra);flex-shrink:0;margin-top:8px}
.itinerary-item p{font-size:.97rem;color:var(--ink2);max-width:100%}
.itinerary-item p strong{color:var(--ink);font-weight:600}

/* ── Inc / Exc ──────────────────────────────────────────── */
.inc-exc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.inc-exc-box{padding:26px;border-radius:10px}
.inc-box{background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.exc-box{background:var(--bg)}
.inc-exc-box h4{font-family:var(--font-h);font-size:1rem;font-weight:700;margin-bottom:14px;color:var(--ink)}
.inc-exc-box ul{display:flex;flex-direction:column;gap:9px}
.inc-exc-box li{font-size:.9rem;color:var(--ink2);display:flex;gap:9px;align-items:flex-start;line-height:1.5}
.inc-exc-box li::before{content:'✓';color:var(--terra);font-weight:700;flex-shrink:0;margin-top:1px}
.exc-box li::before{content:'×';color:var(--muted)}

/* ── Gallery grid ───────────────────────────────────────── */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:32px 0}
.gallery-item{border-radius:8px;overflow:hidden;aspect-ratio:4/3}
.gallery-item.tall{aspect-ratio:3/4;grid-row:span 2}
.gallery-item.wide{grid-column:span 2}

/* ── About strip ────────────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,88px);align-items:center}
.about-photo-wrap{position:relative}
.about-photo{border-radius:12px;overflow:hidden;aspect-ratio:4/5}
.about-badge{position:absolute;bottom:-16px;right:-16px;background:var(--terra);color:#fff;padding:18px 22px;border-radius:8px;text-align:center}
.about-badge .big{font-family:var(--font-h);font-size:2.2rem;font-weight:500;letter-spacing:-.03em;line-height:1}
.about-badge .lbl{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.85;margin-top:2px}
.about-text .tag{margin-bottom:12px}
.about-text h2{margin-bottom:18px}
.about-text p{margin-bottom:14px}

/* ── Stats row ──────────────────────────────────────────── */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border-radius:10px;overflow:hidden}
.stat-cell{background:var(--white);padding:28px 20px;text-align:center}
.stat-num{font-family:var(--font-h);font-size:2.4rem;font-weight:500;letter-spacing:-.03em;color:var(--terra);line-height:1;margin-bottom:4px}
.stat-label{font-size:.8rem;color:var(--muted);font-weight:500;letter-spacing:.04em}

/* ── CTA banner ─────────────────────────────────────────── */
.cta-banner{position:relative;overflow:hidden}

/* ================================================================
   📸 CTA BANNER PHOTO
   Save as photos/cta-banner.jpg then add:
   background-image: url('../photos/cta-banner.jpg');
   to the .cta-banner-bg element in each HTML page.
   ================================================================ */
.cta-banner-bg{position:absolute;inset:0;background-color:#5A3A28;background-size:cover;background-position:center}
.cta-banner-bg::after{content:'';position:absolute;inset:0;background:rgba(26,20,16,.7)}
.cta-inner{position:relative;z-index:2;padding:var(--sp) 0;text-align:center;color:#fff}
.cta-inner .tag{color:rgba(255,255,255,.6);margin-bottom:14px}
.cta-inner h2{color:#fff;margin-bottom:16px}
.cta-inner p{color:rgba(255,255,255,.75);margin:0 auto 32px;font-size:1.05rem}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── Contact ────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,88px);align-items:start}
.contact-info .tag{margin-bottom:14px}
.contact-info h2{margin-bottom:18px}
.contact-info p{margin-bottom:20px}
.contact-block{display:flex;gap:14px;padding:20px;border:1px solid var(--border);border-radius:10px;margin-bottom:14px;align-items:flex-start;box-shadow:var(--shadow-sm);background:var(--white)}
.contact-block-icon{width:42px;height:42px;background:var(--bg2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.contact-block h4{font-size:.88rem;font-weight:700;color:var(--ink);margin-bottom:4px}
.contact-block a,.contact-block p{font-size:.9rem;color:var(--terra);font-weight:500;max-width:100%;margin:0}
.contact-photo{border-radius:12px;overflow:hidden;aspect-ratio:4/5}

/* ── FAQ ────────────────────────────────────────────────── */
.faq-group{margin-bottom:40px}
.faq-group-title{font-family:var(--font-label);font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--terra);padding-bottom:12px;border-bottom:2px solid var(--border);margin-bottom:16px}
.faq-item{border:1px solid var(--border);border-radius:8px;margin-bottom:10px;overflow:hidden;background:var(--white);box-shadow:var(--shadow-sm)}
.faq-question{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;cursor:pointer;font-family:var(--font-b);font-size:.97rem;font-weight:600;color:var(--ink);gap:16px;transition:background .18s}
.faq-question:hover{background:var(--bg)}
.faq-icon{width:22px;height:22px;border-radius:50%;background:var(--bg2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;transition:transform .25s,background .18s;color:var(--terra)}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--terra);color:#fff;border-color:var(--terra)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .25s ease}
.faq-item.open .faq-answer{max-height:600px;padding-bottom:4px}
.faq-answer-inner{padding:0 22px 18px;font-size:.95rem;color:var(--ink2);line-height:1.75}

/* ── Booking form ───────────────────────────────────────── */
.book-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.book-form{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:clamp(24px,4vw,44px);box-shadow:var(--shadow-md)}
.book-form h3{font-size:1.5rem;margin-bottom:6px}
.book-form .sub{font-size:.9rem;color:var(--muted);margin-bottom:28px;max-width:100%}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:.8rem;font-weight:600;color:var(--ink);margin-bottom:7px;letter-spacing:.03em}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:6px;font-size:.95rem;color:var(--ink);background:var(--white);transition:border-color .18s,box-shadow .18s;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--terra);box-shadow:0 0 0 3px rgba(194,74,26,.12)}
.form-group textarea{resize:vertical;min-height:90px}
.price-box{background:var(--bg);border-radius:8px;padding:18px 20px;margin:18px 0;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border2)}
.price-box .lbl{font-size:.83rem;color:var(--muted);font-weight:500}
.price-box .amount{font-family:var(--font-label);font-size:1.6rem;font-weight:700;color:var(--terra)}
.price-box .per{font-size:.75rem;color:var(--muted);font-weight:400}
.form-note{font-size:.8rem;color:var(--muted);margin-top:10px;line-height:1.5;max-width:100%}
.book-aside{}
.book-aside-card{background:var(--bg);border-radius:12px;padding:26px;margin-bottom:20px}
.book-aside-card h4{font-size:1rem;margin-bottom:14px}
.book-aside-card ul{display:flex;flex-direction:column;gap:10px}
.book-aside-card li{display:flex;gap:9px;font-size:.88rem;color:var(--ink2);align-items:flex-start}
.book-aside-card li::before{content:'✓';color:var(--terra);font-weight:700;flex-shrink:0}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer{background:var(--ink);color:rgba(247,242,234,.7);padding:64px 0 36px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:28px}
.footer-brand .nav-logo{color:#fff;font-size:1.2rem;display:block;margin-bottom:14px}
.footer-brand p{font-size:.88rem;color:rgba(247,242,234,.5);max-width:30ch;line-height:1.65}
.footer-col h5{font-family:var(--font-label);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(247,242,234,.35);margin-bottom:14px}
.footer-col ul{display:flex;flex-direction:column;gap:9px}
.footer-col a{font-size:.88rem;color:rgba(247,242,234,.6);transition:color .18s}
.footer-col a:hover{color:var(--terra-lt)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.78rem;color:rgba(247,242,234,.3)}
.footer-bottom a{color:var(--terra-lt)}

/* ── Animations ─────────────────────────────────────────── */
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.fade-up.visible{opacity:1;transform:none}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:960px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .home-hero-inner{grid-template-columns:1fr}
  .home-hero-photo{min-height:300px;border-radius:12px;margin:0 0 var(--sp)}
  .about-grid,.contact-grid,.book-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .stats-row{grid-template-columns:1fr 1fr}
  .inc-exc-grid{grid-template-columns:1fr}
  .about-badge{right:0;bottom:0}
  .page-hero{height:clamp(440px,52vh,560px)}
}
@media(max-width:600px){
  .footer-grid{grid-template-columns:1fr}
  .tours-grid{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
  .hero-btns{flex-direction:column;align-items:flex-start}
  .page-hero{height:clamp(340px,46vh,420px)}
}

/* ── AUTO-PHOTO SYSTEM (img tag based) ──────────────────────
   Photos load automatically when the file exists in photos/
   Placeholder shows when the file is missing.
   ──────────────────────────────────────────────────────── */
.auto-photo { position:relative; overflow:hidden; display:block; }
.auto-photo img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  opacity:0; transition:opacity .4s ease;
}
.auto-photo img.loaded { opacity:1; }
.auto-photo .ph {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  background:var(--bg2); text-align:center; padding:20px;
  font-size:.8rem; color:var(--muted); transition:opacity .3s;
}
.auto-photo .ph::before { content:'📷'; font-size:1.6rem; display:block; }
.auto-photo img.loaded ~ .ph { opacity:0; pointer-events:none; }

/* ── Page hero bg using auto-photo ────── */
.page-hero-bg.auto-photo { position:absolute; inset:0; }
.page-hero-bg.auto-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-hero-bg.auto-photo .ph { position:absolute; inset:0; z-index:0; }

/* ── CTA banner bg ─────────────────────── */
.cta-banner { position:relative; }
.cta-banner-bg.auto-photo { position:absolute; inset:0; z-index:0; }
.cta-banner-bg.auto-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ── Home hero photo ───────────────────── */
.home-hero-photo.auto-photo { position:relative; }
.home-hero-photo.auto-photo .hero-photo-caption { position:absolute; bottom:0; left:0; right:0; z-index:3; padding:20px; background:linear-gradient(to top,rgba(26,20,16,.65),transparent); color:rgba(255,255,255,.8); font-size:.78rem; font-weight:500; letter-spacing:.06em; }

/* ============================================================
   DESIGN REFRESH
   Adds numeric figure fixes, refined nav, larger Canela display,
   redesigned bullets and info cards, and more generous spacing.
   Everything below intentionally overrides the rules above.
   ============================================================ */

/* 1 — NUMBERS ─────────────────────────────────────────────
   The Cormorant Garamond fallback ships with old-style figures
   (1 looks like a Roman I, 0 like an o). We force lining figures
   site-wide as a safety net, AND swap large display numbers to
   Space Grotesk — modern lining figures, tabular widths.        */
body{font-variant-numeric:lining-nums tabular-nums}
h1,h2,h3,h4{font-variant-numeric:lining-nums}
.about-badge .big,
.stat-num,
.price-box .amount{
  font-family:var(--font-label);
  font-feature-settings:"tnum" 1,"lnum" 1;
  letter-spacing:-.025em;
  font-weight:500;
}
.about-badge .big{font-size:2.6rem;line-height:.95}
.stat-num{font-size:2.4rem;font-weight:600}
.price-box .amount{font-size:1.7rem;font-weight:700}

/* 2 — NAVIGATION ──────────────────────────────────────────
   Space Grotesk uppercase echoes the eyebrow tags and gives
   the top bar a clearer editorial voice.                       */
.nav-links a{
  font-family:var(--font-label);
  font-size:.72rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--ink2);
  position:relative;
  padding:6px 0;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--terra)}
.nav-links a.active::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;
  height:1px;background:var(--terra);
}
.nav-book,.nav-links a.nav-book{
  font-family:var(--font-label)!important;
  text-transform:uppercase!important;
  letter-spacing:.12em!important;
  font-size:.72rem!important;
  padding:10px 22px!important;
  border-radius:6px!important;
}
.nav-book::after{display:none!important}

/* 3 — SPACING ─────────────────────────────────────────────
   More room around and between sections; section headers get
   more separation from the content below.                      */
:root{--sp:clamp(80px,9vw,128px)}
.sec-head{margin-bottom:clamp(40px,5vw,72px)}

/* 4 — HEADINGS ────────────────────────────────────────────
   Canela wants size — bump the display scale.                  */
h1{font-size:clamp(2.6rem,6.2vw,5rem);line-height:.98;letter-spacing:-.035em}
h2{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.02;letter-spacing:-.03em}
h3{font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:-.02em}
.page-hero-content h1{font-size:clamp(2.8rem,7vw,5.4rem)}
.home-hero-text h1{font-size:clamp(2.6rem,6vw,4.8rem);line-height:1}

/* 5 — EYEBROW TAGS ────────────────────────────────────────
   Small accent rule before each tag for editorial rhythm.      */
.tag{display:inline-flex;align-items:center;gap:10px}
.tag::before{
  content:'';
  width:22px;height:1px;
  background:currentColor;
  opacity:.55;
  display:inline-block;
}
/* Hide the rule on tags inside dark hero overlays for clarity. */
.page-hero-content .tag::before{opacity:.7}

/* 6 — BULLETS ─────────────────────────────────────────────
   Clean dot for "included", refined dash for "excluded".       */
.inc-exc-box ul,.book-aside-card ul{gap:12px}
.inc-exc-box li,
.book-aside-card li{
  align-items:baseline;
  gap:14px;
  padding-left:0;
  line-height:1.55;
}
.inc-exc-box li::before,
.book-aside-card li::before{
  content:''!important;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--terra);
  flex-shrink:0;
  position:relative;top:-2px;
  margin:0;
}
.exc-box li::before{
  width:12px;height:1px;
  background:var(--muted);
  border-radius:0;
  top:-4px;
}

/* 7 — INFO / CONTACT BOXES ───────────────────────────────
   Bigger, calmer cards. Tinted circular icon, label-style
   field name, prominent value. Subtle lift on hover.           */
.contact-block{
  padding:26px 28px;
  border-radius:14px;
  gap:20px;
  border:1px solid var(--border);
  align-items:center;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.contact-block:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--terra);
}
.contact-block-icon{
  width:52px;height:52px;
  background:#FFF7ED;
  border:1px solid #F5CCA0;
  border-radius:50%;
  font-size:1.35rem;
}
.contact-block h4{
  font-family:var(--font-label);
  font-size:.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
  margin-bottom:6px;
}
.contact-block a{
  font-family:var(--font-b);
  font-size:1.05rem;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--ink);
  transition:color .2s;
}
.contact-block a:hover{color:var(--terra)}
.contact-block > div:last-child p{font-size:.78rem;color:var(--muted);margin-top:4px}

/* Trust row — small "Solo-female friendly" pills get same lift. */
.trust-item{
  font-family:var(--font-label);
  font-size:.7rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--ink2);
}

/* 8 — CARDS ───────────────────────────────────────────────
   Softer corners, more lift, a touch more padding.             */
.tour-card,.review-card,.faq-item,.book-form,
.book-aside-card,.inc-box{border-radius:14px}
.tour-card{transition:transform .3s ease,box-shadow .3s ease}
.tour-card:hover{transform:translateY(-6px)}
.tour-card-body{padding:24px 24px 26px}
.tour-card-body h3{font-size:1.3rem}
.book-aside-card{padding:30px}

/* 9 — BUTTONS ─────────────────────────────────────────────
   Unified Space Grotesk label voice; a little more presence.   */
.btn{
  font-family:var(--font-label);
  letter-spacing:.12em;
  padding:14px 30px;
  border-radius:6px;
}
.btn-sm{padding:10px 22px;letter-spacing:.1em}
.btn-ghost{font-family:var(--font-label);letter-spacing:.1em}

/* 10 — INLINE-STYLE CONSISTENCY FIX ───────────────────────
   The contact-info "Groups, institutes…" card uses Canela for
   small text via inline style — readable but stylistically off.
   This rule swaps it back to Söhne medium without touching HTML. */
.contact-info > div[style*="background:var(--bg)"] > div[style*="font-family:var(--font-h)"]{
  font-family:var(--font-b)!important;
  font-size:.78rem!important;
  font-weight:600!important;
  text-transform:uppercase!important;
  letter-spacing:.1em!important;
  color:var(--terra)!important;
}

/* 11 — REVIEW CARD QUOTE GLYPH — use Canela for the “. ───── */
.review-card::before{font-family:var(--font-h)}

/* 12 — MOBILE TUNING ──────────────────────────────────────
   Headings stay big but don't blow out narrow viewports.       */
@media(max-width:600px){
  .nav-links a{font-size:.68rem;letter-spacing:.1em}
  .contact-block{padding:20px 22px;gap:16px}
  .contact-block-icon{width:46px;height:46px}
  .tag::before{width:16px}
}

/* ============================================================
   DESIGN REFRESH II — WOW pass
   Substantial polish: refined bullets, editorial numbering,
   bigger typographic moves, smaller star, platform-link tag,
   sticky elements, animated micro-interactions and texture.
   ============================================================ */

/* 13 — Force Space Grotesk on nav with strong specificity — some
        browsers were resolving an earlier inheritance.            */
.site-nav .nav-links a,
.site-nav .nav-links a:link,
.site-nav .nav-links a:visited{
  font-family:'Space Grotesk',sans-serif!important;
  font-weight:500!important;
  text-transform:uppercase!important;
  letter-spacing:.14em!important;
  font-size:.72rem!important;
}

/* 14 — INLINE NUMBERS in body prose — force lining figures so
        "11 years" doesn't render as "II yers" in Cormorant.       */
p, li, td, .about-text p, .home-hero-text p,
.faq-answer-inner, .contact-block,
.book-aside-card, .inc-exc-box{
  font-variant-numeric:lining-nums!important;
  font-feature-settings:"lnum" 1!important;
}

/* 15 — BULLETS — smaller, classier; offset feels more deliberate. */
.inc-exc-box li::before,
.book-aside-card li::before{
  width:4px!important;height:4px!important;
  background:var(--terra);
  border-radius:50%;
  margin-right:4px;
  top:-3px!important;
}
.exc-box li::before{
  width:10px!important;height:1px!important;
  background:var(--border2);
  top:-5px!important;
}
.inc-exc-box li,.book-aside-card li{gap:16px!important}

/* 16 — STAT 5★ refinement — small stylised gold star, not a giant
        glyph that overpowers the number.                         */
.stat-num .star-mark{
  font-size:.42em;
  color:#E0A924;
  vertical-align:.35em;
  margin-left:.12em;
  font-weight:400;
  letter-spacing:0;
  display:inline-block;
  transform:rotate(-8deg);
}

/* 17 — TAG WITH LINKS — for the new hero tag containing platform
        hyperlinks. Reset the ::before rule for this variant.     */
.tag-links{flex-wrap:wrap}
.tag-links a{
  color:inherit;
  border-bottom:1px solid transparent;
  transition:border-color .2s, color .2s;
}
.tag-links a:hover{
  color:var(--terra);
  border-bottom-color:var(--terra);
}

/* 18 — TOUR PRICE — refined card-footer price typography. */
.tour-price{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.45rem;
  font-weight:600;
  letter-spacing:-.025em;
  color:var(--ink);
  line-height:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.tour-price small{
  font-family:'Space Grotesk',sans-serif;
  font-size:.62rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
}
.tour-price .per{
  font-family:'Space Grotesk',sans-serif;
  font-size:.62rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
  margin-top:4px;
}

/* 19 — CONTACT BLOCK ICONS — style the new inline SVG glyphs to
        sit beautifully inside the tinted circular wrapper.       */
.contact-block-icon{
  background:#FFF4EA;
  border-color:#F0C9A8;
  color:var(--terra);
}
.contact-block-icon svg{
  width:22px;height:22px;
  display:block;
}

/* 20 — EDITORIAL SECTION NUMBERING — small "01 / 02 / 03 ..." mark
        before each section's heading. Counter resets per page.    */
body{counter-reset:section-counter}
.section .sec-head{counter-increment:section-counter}
.section .sec-head .tag{position:relative}
.section .sec-head .tag::after{
  content:counter(section-counter,decimal-leading-zero);
  font-family:'Space Grotesk',sans-serif;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--muted);
  opacity:.6;
  margin-left:14px;
  padding-left:14px;
  border-left:1px solid var(--border2);
}

/* 21 — HERO DRAMA — push display scale further on home & inner
        hero so Canela's character lands.                         */
.home-hero-text h1{
  font-size:clamp(2.8rem,7vw,5.6rem)!important;
  letter-spacing:-.045em;
  line-height:.96;
}
.home-hero-text h1 span{
  font-style:italic;
  font-weight:400;
  color:var(--terra);
}
.home-hero-text .tag{
  font-size:.72rem;
  letter-spacing:.14em;
}

/* 22 — PAGE HERO H1 — italic flourish for editorial feel. */
.page-hero-content h1 em,
.page-hero-content h1 i,
h1 em, h2 em{
  font-style:italic;
  font-weight:400;
  color:var(--terra);
}

/* 23 — PLATFORM PILLS — refined: smaller star, slight tilt on
        hover, more refined border colour.                        */
.platform-pill{
  font-family:'Space Grotesk',sans-serif;
  font-size:.72rem;
  letter-spacing:.12em;
  padding:11px 22px;
  border-radius:999px;
  border-color:var(--border2);
  transition:transform .25s ease, border-color .2s, color .2s;
}
.platform-pill .star{
  font-size:.85em;
  color:#E0A924;
  margin-right:2px;
  display:inline-block;
  transform:rotate(-6deg) translateY(-1px);
}
.platform-pill:hover{
  transform:translateY(-3px) rotate(-.5deg);
  border-color:var(--terra);
}

/* 24 — TOUR CARDS — bigger lift, image zooms gently on hover. */
.tour-card-img{overflow:hidden}
.tour-card-img img,
.tour-card-img .auto-photo,
.tour-card-img .photo-slot{
  transition:transform .55s cubic-bezier(.2,.6,.2,1);
}
.tour-card:hover .tour-card-img img,
.tour-card:hover .tour-card-img .photo-slot{
  transform:scale(1.06);
}
.tour-card{transition:transform .35s ease, box-shadow .35s ease}
.tour-card:hover{
  transform:translateY(-8px);
  box-shadow:0 14px 40px rgba(26,20,16,.12), 0 6px 18px rgba(26,20,16,.06);
}

/* 25 — BTN-GHOST — arrow slides on hover. */
.btn-ghost{transition:gap .25s ease, color .2s ease}
.btn-ghost:hover{gap:14px;color:var(--terra-dk)}

/* 26 — PAGE-HERO OVERLAY — slightly darker gradient for legibility. */
.page-hero::after{
  background:linear-gradient(to top,
    rgba(26,20,16,.82) 0%,
    rgba(26,20,16,.30) 50%,
    rgba(26,20,16,.08) 100%)!important;
}

/* 27 — FOOTER — more presence; brand bigger, columns more refined. */
.site-footer{padding:80px 0 40px}
.footer-brand .nav-logo{font-size:1.5rem;letter-spacing:-.02em}
.footer-brand p{font-size:.92rem;max-width:32ch;line-height:1.7}
.footer-col h5{font-size:.7rem;letter-spacing:.14em}
.footer-col a{font-size:.9rem;font-weight:400}
.footer-bottom{padding-top:18px;border-top:1px solid rgba(255,255,255,.06);font-family:'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem}

/* 28 — SUBTLE GRAIN — very low-opacity SVG noise across body. Gives
        the page a paper-like depth on flat backgrounds.          */
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.025;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 29 — SECTION RHYTHM — first paragraph after a heading gets a
        slight lead-in lift; long form text feels more editorial. */
.sec-head h2 + p,
.about-text h2 + p,
.page-hero-content h1 + p{
  font-size:1.1rem;
  line-height:1.7;
  color:var(--ink2);
}

/* 30 — REVIEW QUOTE GLYPH — bigger, more sculptural. */
.review-card::before{
  font-size:5.5rem;
  top:14px;
  left:22px;
  opacity:.12;
  font-style:italic;
}

/* 31 — ABOUT BADGE — make sure the "11" doesn't look like Roman. */
.about-badge .big{
  font-family:'Space Grotesk',sans-serif!important;
  font-feature-settings:"tnum" 1,"lnum" 1!important;
  font-variant-numeric:tabular-nums lining-nums!important;
}

/* 32 — SECTION-ALT BACKGROUND — slightly warmer to add depth. */
.section-alt{background:#F5F1EA}

/* 33 — PAGE-HERO TAG — bigger, more presence on dark overlay. */
.page-hero-content .tag{
  font-size:.78rem;
  letter-spacing:.16em;
  color:rgba(255,255,255,.78);
}

/* 34 — MOBILE — keep hero numbering rule subtle on small screens. */
@media(max-width:600px){
  .section .sec-head .tag::after{display:none}
  .body::before{opacity:.02}
}

/* ============================================================
   DESIGN REFRESH III — HERO LEGIBILITY + CUSTOM CURSOR
   Critical: hero text was unreadable on bright photos. Forces
   white text + protective text-shadows + stronger gradient so
   titles and subtitles stay legible on ANY photo.
   ============================================================ */

/* 35 — HERO TEXT LEGIBILITY ──────────────────────────────────
   White text + soft drop-shadow halo guarantees readability on
   every photo, even bright skies and golden domes.            */
.page-hero-content h1,
.page-hero .container h1{
  color:#fff!important;
  text-shadow:
    0 2px 28px rgba(0,0,0,.55),
    0 1px 6px rgba(0,0,0,.45);
}
.page-hero-content > p,
.page-hero-content p,
.page-hero .container p{
  color:rgba(255,255,255,.95)!important;
  text-shadow:
    0 1px 18px rgba(0,0,0,.65),
    0 1px 4px rgba(0,0,0,.5);
}
.page-hero-content .tag,
.page-hero .container .tag{
  color:rgba(255,255,255,.92)!important;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.page-hero-content .tag::before{
  background:rgba(255,255,255,.65);
}
.page-hero-content .tag::after{
  color:rgba(255,255,255,.7)!important;
  border-left-color:rgba(255,255,255,.3)!important;
}

/* 36 — HERO GRADIENT — much stronger, covers the bottom 65%
        of the frame so text always sits on a dark backdrop.   */
.page-hero::after,
.page-hero .page-hero-bg > div:last-child{
  background:linear-gradient(to top,
    rgba(18,12,8,.88) 0%,
    rgba(18,12,8,.62) 30%,
    rgba(18,12,8,.30) 60%,
    rgba(18,12,8,.10) 85%,
    transparent 100%)!important;
}

/* 37 — HOME HERO PHOTO CAPTION readability. */
.home-hero-photo .hero-photo-caption{
  text-shadow:0 1px 8px rgba(0,0,0,.6);
  font-family:'Space Grotesk',sans-serif;
}

/* ============================================================
   38 — PREMIUM CUSTOM CURSOR
   A small burnt-orange dot + a soft trailing ring with a gentle
   radar pulse. Disabled automatically on touch and reduced-motion.
   ============================================================ */

/* Hide the cursor on every interactive element when active. */
html.cursor-active,
html.cursor-active *{cursor:none!important;}

/* The dot is sized 8px; positioning translate is set in JS to
   exact mouse coordinates minus half-width for true centering. */
.cursor-dot{
  position:fixed;
  top:0; left:0;
  width:8px; height:8px;
  background:#D8652C;
  border-radius:50%;
  pointer-events:none;
  z-index:99999;
  will-change:transform;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
  opacity:1;
}
.cursor-dot.hide{opacity:0}
.cursor-dot.scale-up{transform-origin:center; --scale:1.4}

/* The ring is a sibling. The wrapper handles position (smoothed
   in JS via lerp), and a child handles size & hover scaling — so
   border stays crisp 1.5px and the EXPLORE label stays 10px.   */
.cursor-ring-pos{
  position:fixed;
  top:0; left:0;
  width:0; height:0;
  pointer-events:none;
  z-index:99998;
  will-change:transform;
}
.cursor-ring{
  position:relative;
  width:32px; height:32px;
  margin-left:-16px;
  margin-top:-16px;
  border:1.5px solid rgba(216,101,44,.35);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:
    width .25s cubic-bezier(.2,.7,.2,1),
    height .25s cubic-bezier(.2,.7,.2,1),
    margin .25s cubic-bezier(.2,.7,.2,1),
    border-color .2s ease,
    background .2s ease,
    opacity .25s ease;
}

/* Pulse — a pseudo-element ring that gently expands & fades. */
.cursor-ring::after{
  content:'';
  position:absolute;
  inset:-1.5px;
  border:1.5px solid rgba(216,101,44,.35);
  border-radius:50%;
  animation:cursor-pulse 2.5s cubic-bezier(.32,.65,.4,1) infinite;
  pointer-events:none;
}
@keyframes cursor-pulse{
  0%   {transform:scale(1);    opacity:.35}
  40%  {transform:scale(1.31); opacity:0}
  100% {transform:scale(1.31); opacity:0}
}

/* Pause pulse during hover states; restart cleanly on un-hover. */
.cursor-ring.hover-link::after,
.cursor-ring.hover-button::after,
.cursor-ring.hover-image::after{
  opacity:0;
  animation:none;
}

/* Hover: LINK — ring grows to 50px. */
.cursor-ring.hover-link{
  width:50px; height:50px;
  margin-left:-25px; margin-top:-25px;
  border-color:rgba(216,101,44,.55);
}

/* Hover: BUTTON — ring grows to 60px, dot scales 1.4x. */
.cursor-ring.hover-button{
  width:60px; height:60px;
  margin-left:-30px; margin-top:-30px;
  border-color:rgba(216,101,44,.65);
  background:rgba(216,101,44,.02);
}
html.cursor-active.dot-scaled .cursor-dot{
  transform:var(--dot-tf,translate3d(0,0,0)) scale(1.4);
}

/* Hover: IMAGE — ring grows to 70px and reveals EXPLORE label. */
.cursor-ring.hover-image{
  width:70px; height:70px;
  margin-left:-35px; margin-top:-35px;
  border-color:rgba(216,101,44,.7);
  background:rgba(216,101,44,.04);
}
.cursor-label{
  font-family:'Space Grotesk',sans-serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:2px;
  color:#D8652C;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(2px);
  transition:opacity .22s ease .05s, transform .22s ease .05s;
  pointer-events:none;
}
.cursor-ring.hover-image .cursor-label{
  opacity:1;
  transform:translateY(0);
}

/* Click ripple — an expanding shadow on the ring. */
.cursor-ring.clicking{
  animation:cursor-ripple 300ms ease-out;
}
@keyframes cursor-ripple{
  0%   {box-shadow:0 0 0 0 rgba(216,101,44,.5)}
  100% {box-shadow:0 0 0 24px rgba(216,101,44,0)}
}

/* Disable entirely on touch & reduced-motion. */
@media (pointer:coarse){
  .cursor-dot,.cursor-ring-pos{display:none!important}
  html.cursor-active,html.cursor-active *{cursor:auto!important}
}
@media (prefers-reduced-motion:reduce){
  .cursor-dot,.cursor-ring-pos{display:none!important}
  html.cursor-active,html.cursor-active *{cursor:auto!important}
  .cursor-ring::after{animation:none}
}

/* ============================================================
   DESIGN REFRESH IV — IMMERSIVE MASTHEAD + EDITORIAL LAYOUT
   Tall hero, vertically centered content, narrow text column,
   metadata mark in bottom-right corner. Cursor system removed.
   ============================================================ */

/* 39 — IMMERSIVE HEIGHT — meaningfully taller than before. */
.page-hero{
  height:clamp(640px,82vh,900px);
  align-items:center;            /* CHANGED — was flex-end */
  padding-bottom:0;              /* no longer needed when centered */
}
@media(max-width:960px){
  .page-hero{height:clamp(540px,72vh,720px)}
}
@media(max-width:600px){
  .page-hero{height:clamp(440px,62vh,560px)}
}

/* 40 — NARROW TEXT COLUMN by default — left side, photo right side. */
.page-hero-content{
  max-width:38rem;
  position:relative;
}
.page-hero-content .tag{margin-bottom:1.6em}
.page-hero-content h1{margin-bottom:.9em}
.page-hero-content > p{max-width:34rem}

/* 41 — On phone, drop the column constraint — narrow viewport
        already provides the constraint, photo is near-square.   */
@media(max-width:600px){
  .page-hero-content{max-width:100%}
  .page-hero-content > p{max-width:100%}
}

/* 42 — EDITORIAL METADATA MARK in the bottom-right corner.
        Pulled in via CSS attr() — page-hero gets a data-coords
        attribute and the corner mark reads from it. Falls back
        gracefully when not set. The thin rule before the text
        echoes the eyebrow tag's accent rule for visual rhyme.   */
.page-hero .container{position:relative; height:100%; display:flex; align-items:center}
.page-hero[data-coords]::before{
  content:attr(data-coords);
  position:absolute;
  bottom:clamp(24px,4vh,52px);
  right:clamp(20px,4vw,40px);
  font-family:'Space Grotesk',sans-serif;
  font-size:.7rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:rgba(255,255,255,.78);
  text-shadow:0 1px 8px rgba(0,0,0,.5);
  padding-left:34px;
  z-index:5;
  white-space:nowrap;
  background:linear-gradient(to right,
    rgba(255,255,255,.55) 0,
    rgba(255,255,255,.55) 24px,
    transparent 24px,
    transparent 34px) no-repeat;
  background-position:left center;
  background-size:34px 1px;
}

/* 43 — REMOVE CURSOR SYSTEM — restore OS-default cursors.
        The cursor.js script tags will also be removed from each
        HTML page. These rules disable any leftover cursor styles. */
html.cursor-active,html.cursor-active *{cursor:auto}
.cursor-dot,.cursor-ring-pos{display:none!important}

/* 44 — MODERN POINTER ON CLICKABLE CONTAINERS — make sure that
        every interactive element (cards, pills, FAQ items) shows
        the hand cursor, not just the default arrow.            */
.tour-card,
.platform-pill,
.faq-question,
.faq-item,
.tour-option,
.contact-block,
.tour-card-img,
[onclick]{
  cursor:pointer;
}
input,textarea,select{cursor:text}
input[type="number"],input[type="checkbox"],input[type="radio"],
input[type="submit"],button,select{cursor:pointer}

/* 45 — SECTION NUMBERING — quietly remove on mobile to avoid clutter
        and slightly reduce its visual weight at all sizes.       */
.section .sec-head .tag::after{opacity:.45}

/* 46 — REVIEW PLATFORM ATTRIBUTION — small uppercase pill of
        the platform name shown after the location.            */
.review-platform{
  font-family:'Space Grotesk',sans-serif;
  font-size:.66rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--terra);
  white-space:nowrap;
}
.review-location{
  display:inline-flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px;
}

/* ============================================================
   47 — FEATURED PULL QUOTE
   A bold editorial endorsement, sitting alone between stats and
   the tour-cards section. Sets the tone before the offer.
   ============================================================ */
.featured-quote{
  padding:clamp(80px,12vw,160px) 0;
  text-align:center;
}
.featured-quote figure{
  margin:0 auto;
  max-width:64rem;
}
.featured-quote blockquote{
  margin:0;
  padding:0;
}
.featured-quote blockquote p{
  font-family:var(--font-h);
  font-size:clamp(2rem,4.6vw,3.8rem);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.028em;
  color:var(--ink);
  margin:0;
  max-width:none;
}
.featured-quote .lead{
  display:inline;
  font-style:italic;
  color:var(--terra);
}
.featured-quote figcaption{
  margin-top:clamp(32px,4vw,52px);
  font-family:'Space Grotesk',sans-serif;
  font-size:.78rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.featured-quote figcaption .rule{
  display:inline-block;
  width:38px;
  height:1px;
  background:var(--terra);
  opacity:.7;
}
.featured-quote figcaption .dot{
  opacity:.5;
  margin:0 4px;
}

/* Mobile — keep the quote dramatic but pull margins inward. */
@media(max-width:600px){
  .featured-quote{padding:64px 0}
  .featured-quote blockquote p{font-size:clamp(1.6rem,7vw,2.4rem)}
  .featured-quote figcaption{font-size:.7rem;letter-spacing:.14em}
  .featured-quote figcaption .rule{width:28px}
}

/* 48 — REMOVE THE WATERMARKED QUOTE GLYPH behind the stars on review cards.
        The earlier ::before rule was meant as a decorative " mark, but it
        sits behind the stars and reads as visual noise. Disable it.       */
.review-card::before{
  content:none!important;
  display:none!important;
}

/* 49 — REVIEW-PLATFORM LINK STATES — when the "via X" tag is a link,
        give it a clear interactive treatment without making it look
        like body-link blue. Subtle underline appears on hover.       */
a.review-platform{
  color:var(--terra);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s, color .2s;
}
a.review-platform:hover,
a.review-platform:focus{
  color:var(--terra-dk);
  border-bottom-color:var(--terra-dk);
}
.featured-quote figcaption a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.featured-quote figcaption a:hover{
  border-bottom-color:var(--terra);
  color:var(--terra);
}

/* 50 — TOUR-CARD AS ANCHOR — the whole card is now an <a>, so kill
        default link styling but keep all the card hover behaviours
        already defined above (lift, image zoom, etc).             */
a.tour-card{
  text-decoration:none;
  color:inherit;
  display:block;
}
a.tour-card:hover,a.tour-card:focus{
  text-decoration:none;
  color:inherit;
}
a.tour-card h3{color:inherit}
/* The inner "Know more →" used to be a link; now it's a span styled
   to look like a link. Hover state lives on the parent card so the
   arrow slides when the WHOLE card is hovered, not just this span. */
a.tour-card .btn-ghost{
  transition:gap .25s ease, color .2s ease;
}
a.tour-card:hover .btn-ghost{
  gap:14px;
  color:var(--terra-dk);
}