/* =================================================================
   PURELY MADEIRA — styles.css
   Zero-build. Tokens, typography, layout, cinematic overlays,
   responsive (mobile-first), sticky footer, accessible focus.
   ================================================================= */

/* ---------- Design tokens ---------- */
:root{
  /* Atlantic / volcanic palette */
  --ink:        #070b0d;   /* near-black basalt */
  --ink-2:      #0d1418;
  --basalt:     #141d22;
  --basalt-2:   #1c272e;
  --teal-deep:  #0a2730;
  --teal:       #13535f;
  --teal-mid:   #1b7686;
  --laurel:     #2f5a33;
  --laurel-2:   #4a7a48;
  --levada:     #6fae7a;
  --amber:      #f0a24a;   /* golden-hour amber */
  --amber-2:    #f6c073;
  --sun:        #ffd9a0;
  --cream:      #f3ece0;   /* sun-bleached off-white */
  --cream-2:    #e7dcc9;
  --mist:       #d8d2c4;

  --bg:         var(--ink);
  --fg:         var(--cream);
  --fg-dim:     rgba(243,236,224,0.72);
  --fg-faint:   rgba(243,236,224,0.5);
  --line:       rgba(243,236,224,0.14);
  --line-2:     rgba(243,236,224,0.08);

  --serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw: 1320px;
  --gut: clamp(1.25rem, 4vw, 4rem);
  --radius: 14px;
  --radius-lg: 22px;

  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --header-h: 72px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--fg);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* sticky-footer root wrapper */
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select,fieldset{ font:inherit; color:inherit; }

/* ---------- Focus visibility ---------- */
:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:4px;
}
/* Screen-reader only */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Skip links ---------- */
.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:2000;
  background:var(--amber); color:var(--ink);
  padding:.7rem 1rem; border-radius:8px; font-weight:600;
  transition:top .25s var(--ease);
}
.skip-link:focus{ top:1rem; }

/* ---------- Typographic primitives ---------- */
.display{
  font-family:var(--serif);
  font-weight:400;
  font-optical-sizing:auto;
  font-variation-settings:"opsz" 120;
  line-height:.98;
  letter-spacing:-0.02em;
  margin:0;
  font-size:clamp(2.8rem, 8vw, 6.5rem);
}
.display.sm{ font-size:clamp(2.1rem, 5.2vw, 3.6rem); }
.display .line{ display:block; }
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.72rem;
  font-weight:500;
  color:var(--amber-2);
  margin:0 0 1rem;
}
.lede{
  font-size:clamp(1.05rem, 1.6vw, 1.3rem);
  color:var(--fg-dim);
  max-width:52ch;
  margin:1.2rem 0 0;
  font-weight:300;
}
em{ font-style:italic; color:var(--cream); }
strong{ font-weight:600; color:#fff; }

/* =================================================================
   FIXED LAYERS — canvas, fallback, poi, vignette, grain
   ================================================================= */
#webgl-host{
  position:fixed; inset:0; z-index:0;
  pointer-events:none; /* enabled on hero via .state-hero */
}
#webgl-host canvas{ display:block; width:100%; height:100%; }
#webgl-host.is-hero{ pointer-events:auto; }
#webgl-host.is-hidden{ opacity:0; pointer-events:none; }

#hero-fallback{
  position:fixed; inset:0; z-index:1;
  overflow:hidden;
  opacity:0; pointer-events:none;
  transition:opacity .8s var(--ease);
}
#hero-fallback.is-active{ opacity:1; }
.fb-layer{ position:absolute; inset:-10%; background-size:cover; background-position:center; }
/* Gradient placeholder photos (swap to real Unsplash URLs on handoff) */
.fb-back{ background:radial-gradient(120% 90% at 50% 120%, #2a3f44 0%, #142026 45%, #0a1216 100%); }
.fb-mid{ background:linear-gradient(180deg, rgba(10,18,22,0) 30%, rgba(10,18,22,.5) 100%), radial-gradient(80% 60% at 40% 70%, #33503a 0%, transparent 70%); }
.fb-front{ background:radial-gradient(40% 30% at 70% 30%, rgba(255,217,160,.55) 0%, transparent 60%); }
.fb-vignette{ position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(5,8,10,.75) 100%); }

#poi-layer{
  position:fixed; inset:0; z-index:25;
  pointer-events:none;
}
.poi{
  position:absolute;
  transform:translate(-50%,-50%);
  pointer-events:auto;
  display:flex; align-items:center; gap:.55rem;
  padding:.3rem .7rem .3rem .3rem;
  border-radius:999px;
  background:rgba(13,20,24,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,217,160,.35);
  color:var(--cream);
  font-size:.78rem; font-weight:500;
  white-space:nowrap;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  transition:transform .25s var(--ease-out), background .25s var(--ease), border-color .25s var(--ease);
  will-change:left,top,transform;
}
.poi .poi-dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 10px 2px rgba(240,162,74,.8), 0 0 0 3px rgba(240,162,74,.18);
  flex:none;
  animation:poiPulse 2.4s var(--ease) infinite;
}
.poi .poi-name{ letter-spacing:.02em; }
.poi .poi-hook{
  display:none; color:var(--fg-dim); font-weight:300;
  border-left:1px solid var(--line); padding-left:.6rem; margin-left:.1rem;
}
.poi:hover, .poi:focus-visible, .poi.is-active{
  transform:translate(-50%,-50%) scale(1.06);
  background:rgba(13,20,24,.82);
  border-color:var(--amber);
  z-index:30;
}
.poi:hover .poi-hook, .poi:focus-visible .poi-hook{ display:inline; }
.poi.is-hidden{ opacity:0; pointer-events:none; }
@keyframes poiPulse{
  0%,100%{ box-shadow:0 0 10px 2px rgba(240,162,74,.7), 0 0 0 3px rgba(240,162,74,.16); }
  50%{ box-shadow:0 0 18px 4px rgba(240,162,74,.95), 0 0 0 6px rgba(240,162,74,.08); }
}

#vignette{
  position:fixed; inset:0; z-index:28; pointer-events:none;
  background:radial-gradient(130% 105% at 50% 45%, transparent 62%, rgba(0,0,0,.42) 100%);
  mix-blend-mode:multiply;
  opacity:.5;
}
#grain{
  position:fixed; inset:0; z-index:29; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}

/* =================================================================
   HEADER
   ================================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(7,11,13,.72);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--line-2);
}
.header-inner{
  max-width:var(--maxw); margin:0 auto;
  height:var(--header-h);
  display:flex; align-items:center; gap:1.5rem;
  padding:0 var(--gut);
}
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--serif); font-size:1.15rem; letter-spacing:-.01em; }
.brand-mark{
  width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--sun), var(--amber) 55%, var(--teal) 110%);
  box-shadow:0 0 14px rgba(240,162,74,.55);
}
.brand-text{ font-weight:500; }
.brand-accent{ color:var(--amber-2); }

.primary-nav{ display:flex; gap:1.4rem; margin-left:1rem; }
.primary-nav a{
  font-size:.86rem; color:var(--fg-dim); font-weight:400;
  position:relative; padding:.3rem 0; transition:color .25s var(--ease);
}
.primary-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--amber);
  transition:width .3s var(--ease);
}
.primary-nav a:hover{ color:var(--fg); }
.primary-nav a:hover::after{ width:100%; }

.header-actions{ margin-left:auto; display:flex; align-items:center; gap:.7rem; }

.ghost-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem; border-radius:999px;
  border:1px solid var(--line);
  color:var(--fg-dim); font-size:.84rem; font-weight:500;
  transition:all .25s var(--ease);
}
.ghost-btn:hover{ color:var(--fg); border-color:var(--amber); background:rgba(240,162,74,.06); }
.ghost-btn.lg{ padding:.85rem 1.3rem; font-size:.95rem; }
.skip-ico{
  width:10px; height:10px; border-radius:2px; background:var(--fg-dim);
  display:inline-block; transition:background .25s var(--ease);
}
#skip-anim[aria-pressed="true"] .skip-ico{ background:var(--amber); }
#skip-anim[aria-pressed="true"]{ color:var(--amber); border-color:var(--amber); }

.cta-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.05rem; border-radius:999px;
  background:linear-gradient(180deg, var(--amber-2), var(--amber));
  color:var(--ink); font-weight:600; font-size:.86rem;
  box-shadow:0 8px 24px rgba(240,162,74,.25);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease);
}
.cta-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(240,162,74,.4); }
.cta-btn.lg{ padding:.95rem 1.5rem; font-size:1rem; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; padding:.5rem; }
.nav-toggle span{ width:22px; height:2px; background:var(--fg); border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display:none; flex-direction:column; gap:.2rem;
  background:rgba(7,11,13,.96); backdrop-filter:blur(16px);
  border-top:1px solid var(--line-2);
  padding:1rem var(--gut) 1.4rem;
}
.mobile-nav a{ padding:.8rem 0; border-bottom:1px solid var(--line-2); color:var(--fg-dim); font-family:var(--serif); font-size:1.3rem; }
.mobile-nav a:last-child{ border-bottom:0; }

/* =================================================================
   MAIN
   ================================================================= */
main{ flex:1 0 auto; position:relative; z-index:10; }

/* ---------- Cinematic band ---------- */
.cinema{ position:relative; }
.cinema-section{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding:6rem var(--gut);
  /* let drags fall through to canvas on empty areas */
}
#hero{ pointer-events:none; }
#hero > *{ pointer-events:auto; }

.hero-copy{ max-width:42rem; position:relative; z-index:2; }
.hero-copy .eyebrow{ color:var(--amber-2); }
.hero-copy .lede{ margin-top:1.6rem; }
.hero-cta-row{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem; }
.hero-hint{
  margin-top:2rem; font-size:.8rem; color:var(--fg-faint);
  display:flex; align-items:center; gap:.6rem; letter-spacing:.04em;
  transition:opacity .5s var(--ease);
}
.hero-hint.gone{ opacity:0; }
.dot-pulse{ width:7px; height:7px; border-radius:50%; background:var(--amber); animation:poiPulse 2.4s var(--ease) infinite; }

.hero-scrollcue{
  position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%);
  width:1px; height:60px; background:linear-gradient(var(--amber), transparent);
  pointer-events:none;
}
.hero-scrollcue span{
  position:absolute; top:0; left:-3px; width:7px; height:7px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 12px var(--amber);
  animation:cueDrop 2.6s var(--ease) infinite;
}
@keyframes cueDrop{ 0%{ top:-4px; opacity:0;} 25%{opacity:1;} 100%{ top:64px; opacity:0; } }

/* Side panels over the 3D scene */
.reveal-side{ justify-content:flex-start; }
.reveal-side.right{ justify-content:flex-end; }
.panel{
  position:relative;
  max-width:30rem;
  padding:2.2rem 2.2rem 2.4rem;
  border-radius:var(--radius-lg);
  background:rgba(10,16,20,.42);
  backdrop-filter:blur(10px) saturate(115%);
  -webkit-backdrop-filter:blur(10px) saturate(115%);
  border:1px solid var(--line);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
}
.panel .eyebrow{ margin-bottom:.7rem; }
.panel p{ color:var(--fg-dim); font-weight:300; }
.panel p + p{ margin-top:.9rem; }
.panel-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
.panel-tags span{
  font-size:.72rem; letter-spacing:.04em; color:var(--amber-2);
  padding:.3rem .7rem; border-radius:999px; border:1px solid rgba(240,162,74,.3);
  background:rgba(240,162,74,.06);
}
.panel-link{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.6rem;
  color:var(--amber-2); font-weight:500; font-size:.92rem;
  border-bottom:1px solid transparent; transition:border-color .25s var(--ease);
}
.panel-link:hover{ border-bottom-color:var(--amber); }

/* ---------- Solid sections ---------- */
.solid-section{
  position:relative; z-index:10;
  padding:clamp(4.5rem, 9vw, 8rem) var(--gut);
  background:var(--ink);
  border-top:1px solid var(--line-2);
}
.solid-section.alt{ background:linear-gradient(180deg, var(--ink) 0%, var(--teal-deep) 130%); }
.solid-head{ max-width:var(--maxw); margin:0 auto 3rem; text-align:center; }
.solid-head .lede{ margin-left:auto; margin-right:auto; text-align:center; }

/* Taste grid */
.taste-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.taste-card{
  background:var(--basalt);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .4s var(--ease-out), border-color .4s var(--ease);
}
.taste-card:hover{ transform:translateY(-6px); border-color:rgba(240,162,74,.35); }
.taste-card .photo{ aspect-ratio:4/3; }
.taste-card h3{ font-family:var(--serif); font-weight:500; font-size:1.5rem; margin:1.3rem 1.3rem .5rem; }
.taste-card p{ color:var(--fg-dim); font-weight:300; margin:0 1.3rem 1.5rem; font-size:.95rem; }

/* Generic photo placeholder (swap to real img on handoff) */
.photo{
  position:relative;
  background-size:cover; background-position:center;
  background-color:var(--basalt-2);
  overflow:hidden;
}
.photo::after{
  content:attr(data-slot);
  position:absolute; inset:0;
  display:flex; align-items:flex-end;
  padding:.8rem; font-size:.68rem; line-height:1.3;
  color:rgba(243,236,224,.5);
  background:linear-gradient(0deg, rgba(7,11,13,.85), transparent 60%);
  letter-spacing:.02em;
}
.ph-poncha{ background-image:linear-gradient(135deg,#3a2a16,#7a4a1e 60%,#caa14a); }
.ph-espetada{ background-image:linear-gradient(135deg,#2a1410,#5a2418 55%,#8a3a1a); }
.ph-bolo{ background-image:linear-gradient(135deg,#3a2a18,#6a4828 60%,#b48a4a); }
.ph-espada{ background-image:linear-gradient(135deg,#10202a,#244a3a 60%,#caa24a); }
.ph-wine{ background-image:linear-gradient(135deg,#1a0e08,#5a2a14 55%,#a85a1e); }
.ph-passion{ background-image:linear-gradient(135deg,#2a1018,#6a2820 55%,#c8721a); }
.ph-whale{ background-image:linear-gradient(160deg,#06222c,#0e4a56 50%,#1a7a86); min-height:340px; }

/* Water */
.water-wrap{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.water-stats{ display:flex; flex-wrap:wrap; gap:2rem; margin-top:2rem; }
.water-stats > div{ display:flex; flex-direction:column; }
.stat-n{ font-family:var(--serif); font-size:2.2rem; color:var(--amber-2); line-height:1; }
.stat-l{ font-size:.78rem; color:var(--fg-faint); margin-top:.3rem; letter-spacing:.02em; }

/* When */
.when-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.when-card{
  background:var(--basalt); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:1.8rem; transition:border-color .35s var(--ease), transform .35s var(--ease-out);
}
.when-card:hover{ transform:translateY(-5px); border-color:rgba(240,162,74,.3); }
.when-card.highlight{ background:linear-gradient(160deg, rgba(240,162,74,.12), var(--basalt) 60%); border-color:rgba(240,162,74,.4); }
.when-month{ font-family:var(--serif); color:var(--amber-2); font-size:.95rem; letter-spacing:.04em; }
.when-card h3{ font-family:var(--serif); font-weight:500; font-size:1.5rem; margin:.5rem 0 .6rem; }
.when-card p{ color:var(--fg-dim); font-weight:300; font-size:.92rem; margin:0; }

/* Plan / form */
.plan-section{ background:linear-gradient(180deg, var(--ink) 0%, #0a1014 100%); }
.plan-wrap{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2.5rem,6vw,5rem); align-items:start;
}
.plan-bullets{ list-style:none; padding:0; margin:2rem 0 0; display:flex; flex-direction:column; gap:.7rem; }
.plan-bullets li{ color:var(--fg-dim); font-weight:300; display:flex; gap:.6rem; align-items:center; }
.plan-bullets li span{ color:var(--amber); font-weight:700; }

.trip-form{
  background:rgba(13,20,24,.6); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.6rem,3vw,2.4rem);
  display:flex; flex-direction:column; gap:1.1rem;
}
.field{ display:flex; flex-direction:column; gap:.4rem; margin:0; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field label, .field legend{ font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-dim); font-weight:500; }
.req{ color:var(--amber); }
.field input, .field textarea, .field select{
  background:rgba(7,11,13,.7);
  border:1px solid var(--line);
  border-radius:10px;
  padding:.8rem .9rem;
  color:var(--fg);
  font-size:1rem;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus, .field textarea:focus{ border-color:var(--amber); box-shadow:0 0 0 3px rgba(240,162,74,.15); outline:none; }
.field textarea{ resize:vertical; min-height:90px; }
.err{ display:none; color:#ff8d6b; font-size:.78rem; }
.field.invalid input, .field.invalid .checks{ border-color:#ff8d6b; }
.field.invalid .err{ display:block; }

.checks{ display:flex; flex-wrap:wrap; gap:.6rem; border:1px solid var(--line); border-radius:10px; padding:.7rem; background:rgba(7,11,13,.5); }
.check{ display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; font-size:.92rem; color:var(--fg-dim); padding:.35rem .7rem; border-radius:999px; border:1px solid var(--line-2); transition:all .2s var(--ease); text-transform:none; letter-spacing:0; }
.check input{ accent-color:var(--amber); width:16px; height:16px; }
.check:has(input:checked){ color:var(--ink); background:var(--amber-2); border-color:var(--amber); font-weight:500; }

.form-actions{ display:flex; flex-direction:column; gap:.6rem; margin-top:.4rem; }
.form-fine{ font-size:.78rem; color:var(--fg-faint); margin:0; }

.form-success{
  margin-top:.4rem; padding:1.6rem; border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(111,174,122,.16), rgba(13,20,24,.6));
  border:1px solid rgba(111,174,122,.4);
}
.form-success h3{ font-family:var(--serif); font-weight:500; font-size:1.6rem; margin:0 0 .5rem; color:var(--levada); }
.form-success p{ margin:0 0 1rem; color:var(--fg-dim); font-weight:300; }

/* =================================================================
   FOOTER (sticky to bottom — body is flex column, footer mt-auto)
   ================================================================= */
.site-footer{
  position:relative; z-index:10;
  margin-top:auto;
  background:var(--ink-2);
  border-top:1px solid var(--line-2);
  padding:clamp(3rem,6vw,4.5rem) var(--gut) 1.5rem;
}
.footer-inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem;
}
.footer-brand .brand-mark{ width:22px; height:22px; }
.footer-title{ font-family:var(--serif); font-size:1.4rem; margin:.6rem 0 .8rem; }
.footer-disclaim{ font-size:.82rem; color:var(--fg-faint); font-weight:300; max-width:38ch; }
.footer-nav, .footer-sister{ display:flex; flex-direction:column; gap:.5rem; }
.footer-nav h4, .footer-sister h4{ font-size:.74rem; text-transform:uppercase; letter-spacing:.2em; color:var(--amber-2); margin:0 0 .6rem; font-weight:500; }
.footer-nav a, .footer-sister a{ color:var(--fg-dim); font-size:.9rem; font-weight:300; transition:color .2s var(--ease); }
.footer-nav a:hover, .footer-sister a:hover{ color:var(--fg); }
.footer-sister ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.footer-base{
  max-width:var(--maxw); margin:2.5rem auto 0; padding-top:1.4rem;
  border-top:1px solid var(--line-2);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.78rem; color:var(--fg-faint);
}

/* =================================================================
   SCROLL REVEAL (JS toggles .is-in)
   ================================================================= */
[data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
[data-reveal].is-in{ opacity:1; transform:none; }
.reveal-side .panel{ opacity:0; transform:translateY(40px) translateX(var(--rx,0)); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal-side.right .panel{ --rx:40px; }
.reveal-side.left .panel{ --rx:-40px; }
.reveal-side.is-in .panel{ opacity:1; transform:none; }

/* =================================================================
   REDUCED MOTION
   ================================================================= */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .hero-scrollcue, .dot-pulse, .poi .poi-dot{ animation:none !important; }
  [data-reveal], .reveal-side .panel{ opacity:1 !important; transform:none !important; }
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 980px){
  .primary-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-nav.open{ display:flex; }
  .header-actions .cta-btn{ display:none; }
  .plan-wrap{ grid-template-columns:1fr; }
  .water-wrap{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width: 640px){
  :root{ --header-h:64px; }
  .header-inner{ gap:.8rem; }
  .ghost-btn .skip-label{ display:none; }
  .ghost-btn{ padding:.6rem; }
  .cinema-section{ padding:5rem var(--gut); min-height:100vh; }
  .panel{ padding:1.6rem 1.5rem; }
  .field-row{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; }
  .footer-base{ flex-direction:column; }
  .hero-cta-row{ flex-direction:column; align-items:stretch; }
  .hero-cta-row .cta-btn, .hero-cta-row .ghost-btn{ justify-content:center; }
  .poi .poi-hook{ display:none !important; }
  .poi{ font-size:.7rem; padding:.25rem .55rem .25rem .25rem; }
  .solid-head{ text-align:left; }
  .solid-head .lede{ text-align:left; }
}
@media (max-width: 375px){
  .display{ font-size:2.5rem; }
}

/* =================================================================
   ROUND 2 ADDITIONS — features + styling detail
   ================================================================= */

/* ---------- Real photo <img> inside .photo ---------- */
.photo img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .9s var(--ease-out);
}
.photo::after{
  content:attr(data-slot);
  position:absolute; inset:auto 0 0 0; height:auto; padding:.6rem .8rem;
  display:block; font-size:.6rem; line-height:1.3;
  color:rgba(243,236,224,.0); /* hidden until we want watermark */
  background:transparent;
  pointer-events:none; opacity:0;
}
/* keep gradient placeholders only as a fallback bg behind img */

/* ---------- Image hover zoom (taste cards + whale) ---------- */
.taste-card .photo, .ph-whale{ overflow:hidden; }
.taste-card:hover .photo img,
.taste-card:focus-within .photo img{ transform:scale(1.07); }

/* ---------- Scroll progress bar ---------- */
#scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:70;
  background:rgba(243,236,224,.06);
  pointer-events:none;
}
#scroll-progress span{
  display:block; height:100%; width:100%;
  transform-origin:left center; transform:scaleX(0);
  background:linear-gradient(90deg, var(--amber), var(--amber-2) 60%, var(--sun));
  box-shadow:0 0 12px rgba(240,162,74,.6);
  transition:transform .1s linear;
}

/* ---------- Back to top ---------- */
#to-top{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:55;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,20,24,.8); color:var(--cream);
  border:1px solid var(--line);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
#to-top.show{ opacity:1; transform:none; pointer-events:auto; }
#to-top:hover{ background:var(--amber); color:var(--ink); border-color:var(--amber); transform:translateY(-2px); }
@media (max-width:640px){ #to-top{ right:.8rem; bottom:.8rem; width:42px; height:42px; } }

/* ---------- "Island Now" live strip ---------- */
.island-now{
  display:flex; align-items:center; gap:.45rem;
  padding:.4rem .7rem; border-radius:999px;
  border:1px solid var(--line); background:rgba(13,20,24,.5);
  font-size:.76rem; color:var(--fg-dim); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.island-now .in-dot{
  width:7px; height:7px; border-radius:50%; background:var(--levada);
  box-shadow:0 0 8px var(--levada);
  animation:livePulse 2s var(--ease) infinite;
}
.island-now .in-time{ color:var(--cream); font-weight:500; letter-spacing:.02em; }
.island-now .in-sep{ color:var(--fg-faint); }
.island-now .in-cond{ font-size:.72rem; color:var(--amber-2); }
.island-now .in-cond[data-kind="dawn"],
.island-now .in-cond[data-kind="dusk"]{ color:var(--amber); }
@keyframes livePulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* ---------- Panel links row ---------- */
.panel-links{ display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem; margin-top:1.6rem; }
.panel-link{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--amber-2); font-weight:500; font-size:.92rem;
  background:none; border:0; padding:0; cursor:pointer;
  border-bottom:1px solid transparent; transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease-out);
  font-family:var(--sans);
}
.panel-link:hover{ border-bottom-color:var(--amber); color:var(--amber); }
.panel-link:hover span[aria-hidden]{ transform:translateX(3px); }
.panel-link span[aria-hidden]{ transition:transform .25s var(--ease-out); }
.panel-link.alt{ color:var(--fg-dim); font-weight:400; font-size:.82rem; }
.panel-link.alt:hover{ color:var(--fg); border-bottom-color:var(--fg-dim); }

/* =================================================================
   POI DETAIL DRAWER
   ================================================================= */
.poi-drawer{
  position:fixed; top:0; right:0; z-index:100;
  width:min(440px, 92vw); height:100vh; height:100dvh;
  background:linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
  border-left:1px solid var(--line);
  box-shadow:-30px 0 80px -20px rgba(0,0,0,.7);
  transform:translateX(105%);
  transition:transform .5s var(--ease-out);
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
}
.poi-drawer.open{ transform:translateX(0); }
.poi-drawer::-webkit-scrollbar{ width:8px; }
.poi-drawer::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
.drawer-close{
  position:absolute; top:1rem; right:1rem; z-index:2;
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,20,24,.7); border:1px solid var(--line);
  color:var(--cream); font-size:1.6rem; line-height:1;
  transition:all .25s var(--ease);
}
.drawer-close:hover{ background:var(--amber); color:var(--ink); border-color:var(--amber); transform:rotate(90deg); }
.drawer-body{ padding:2.4rem 1.8rem 2.2rem; }
.drawer-title{ font-family:var(--serif); font-weight:400; font-size:2rem; line-height:1.05; margin:.4rem 0 1rem; letter-spacing:-.01em; }
.drawer-photo{ position:relative; aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden; margin-bottom:1.2rem; background:var(--basalt-2); }
.drawer-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.drawer-hook{ color:var(--amber-2); font-size:1rem; margin:0 0 1.2rem; font-style:italic; }
.drawer-meta{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.6rem; margin-bottom:1.4rem; }
.drawer-meta .dm{ background:rgba(7,11,13,.5); border:1px solid var(--line-2); border-radius:10px; padding:.6rem .5rem; text-align:center; }
.dm-k{ display:block; font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; color:var(--fg-faint); margin-bottom:.25rem; }
.dm-v{ display:block; font-family:var(--serif); font-size:.95rem; color:var(--cream); }
.drawer-desc{ color:var(--fg-dim); font-weight:300; line-height:1.7; margin:0 0 1.4rem; }
.drawer-tips h4{ font-size:.7rem; text-transform:uppercase; letter-spacing:.18em; color:var(--amber-2); margin:0 0 .6rem; font-weight:500; }
.drawer-tips ul{ list-style:none; padding:0; margin:0 0 1.6rem; display:flex; flex-direction:column; gap:.5rem; }
.drawer-tips li{ color:var(--fg-dim); font-weight:300; font-size:.9rem; padding-left:1.2rem; position:relative; line-height:1.5; }
.drawer-tips li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--amber); }
.drawer-cta{ width:100%; justify-content:center; margin-top:.4rem; }

#drawer-scrim{
  position:fixed; inset:0; z-index:99;
  background:rgba(5,8,10,.65);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease);
}
#drawer-scrim.show{ opacity:1; pointer-events:auto; }

@media (max-width:480px){
  .drawer-meta{ grid-template-columns:1fr 1fr; }
  .drawer-body{ padding:2rem 1.3rem 1.6rem; }
}

/* =================================================================
   STYLING DETAIL — dividers, refined cards, micro-interactions
   ================================================================= */

/* Chapter divider with coordinate ticks */
.solid-section{ position:relative; }
.solid-section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(680px, 80%); height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}

/* Refined taste cards: top accent line + stagger */
.taste-card{ position:relative; }
.taste-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--amber), transparent);
  opacity:0; transition:opacity .4s var(--ease);
  z-index:2;
}
.taste-card:hover::before, .taste-card:focus-within::before{ opacity:1; }
.taste-card h3{ position:relative; }
.taste-card h3::after{
  content:""; display:block; width:28px; height:1px; background:var(--amber);
  margin-top:.6rem; opacity:.7;
}

/* Refined "when" cards: numbered month tag */
.when-card{ position:relative; overflow:hidden; }
.when-card::after{
  content:""; position:absolute; right:-30px; bottom:-30px; width:120px; height:120px;
  border-radius:50%; background:radial-gradient(circle, rgba(240,162,74,.08), transparent 70%);
  pointer-events:none;
}
.when-card.highlight::after{ background:radial-gradient(circle, rgba(240,162,74,.16), transparent 70%); }

/* Hero eyebrow refined with rule line */
.hero-copy .eyebrow{ display:inline-flex; align-items:center; gap:.8rem; }
.hero-copy .eyebrow::before{ content:""; width:32px; height:1px; background:var(--amber-2); }

/* Panel refined: subtle top glow on reveal */
.panel::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(240,162,74,.5), transparent);
}

/* Primary nav active-section underline state (added by JS) */
.primary-nav a.is-active{ color:var(--cream); }
.primary-nav a.is-active::after{ width:100%; background:var(--amber); }

/* Form field focus glow refined */
.trip-form:focus-within{ border-color:rgba(240,162,74,.25); }

/* Footer brand mark animation */
.footer-brand .brand-mark{ animation:footerGlow 4s var(--ease) infinite; }
@keyframes footerGlow{
  0%,100%{ box-shadow:0 0 14px rgba(240,162,74,.45); }
  50%{ box-shadow:0 0 22px rgba(240,162,74,.7); }
}

/* Whale photo refined overlay (overrides the hidden generic ::after watermark) */
.ph-whale{ border-radius:var(--radius-lg); position:relative; }
.ph-whale::after{
  content:"Atlantic · 28 cetacean species"; position:absolute; left:1.2rem; bottom:1rem;
  color:var(--cream); font-size:.78rem; letter-spacing:.04em;
  background:rgba(7,11,13,.55); padding:.35rem .7rem; border-radius:999px;
  backdrop-filter:blur(6px); z-index:2; opacity:1;
}
.ph-whale img{ z-index:1; }

/* Reduced motion: kill the new animations too */
@media (prefers-reduced-motion: reduce){
  #scroll-progress span{ transition:none; }
  .island-now .in-dot{ animation:none; }
  .footer-brand .brand-mark{ animation:none; }
  .photo img{ transition:none; }
  .poi-drawer{ transition:none; }
}

/* =================================================================
   ROUND 3 — Trails map, Budget estimator, Voices carousel
   ================================================================= */

/* ---------- TRAILS & REGIONS ---------- */
.trails-section{ background:linear-gradient(180deg, var(--ink) 0%, #0a1014 100%); }
.trails-wrap{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.6rem,4vw,3rem);
  align-items:start;
}
.trails-map{
  position:relative; aspect-ratio:400/220;
  background:radial-gradient(120% 90% at 50% 60%, #0e2530 0%, #06121a 100%);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:inset 0 0 60px rgba(0,0,0,.5);
}
.island-svg{ position:absolute; inset:0; width:100%; height:100%; }
.island-svg .rg-label{ fill:rgba(243,236,224,.55); font-size:9px; font-family:var(--sans); letter-spacing:.08em; text-transform:uppercase; }
.rg-spot{ fill:rgba(240,162,74,.15); stroke:rgba(240,162,74,.5); stroke-width:1; transition:all .3s var(--ease); }
.rg-spot.is-active{ fill:rgba(240,162,74,.5); stroke:var(--amber); r:20; }
.region-pins{ position:absolute; inset:0; }
.rg-pin{
  position:absolute; transform:translate(-50%,-50%);
  padding:.35rem .7rem; border-radius:999px;
  background:rgba(13,20,24,.7); border:1px solid var(--line);
  color:var(--fg-dim); font-size:.72rem; font-weight:500; letter-spacing:.02em;
  backdrop-filter:blur(6px); cursor:pointer;
  transition:all .25s var(--ease);
  white-space:nowrap;
}
.rg-pin::before{
  content:""; position:absolute; left:50%; top:50%;
  width:8px; height:8px; border-radius:50%; background:var(--amber);
  transform:translate(-50%,-50%); box-shadow:0 0 8px var(--amber);
  opacity:0; transition:opacity .25s var(--ease);
}
.rg-pin:hover, .rg-pin.is-active{
  background:var(--amber); color:var(--ink); border-color:var(--amber);
  transform:translate(-50%,-50%) scale(1.05);
}
.rg-pin.is-active::before{ opacity:1; background:var(--ink); box-shadow:none; }

.trails-panel{ display:flex; flex-direction:column; gap:1rem; }
.trails-filters{ display:flex; gap:.4rem; flex-wrap:wrap; }
.tf-btn{
  padding:.5rem .9rem; border-radius:999px;
  border:1px solid var(--line); color:var(--fg-dim);
  font-size:.8rem; font-weight:500; cursor:pointer;
  transition:all .2s var(--ease);
}
.tf-btn:hover{ color:var(--fg); border-color:var(--fg-faint); }
.tf-btn.is-active{ background:var(--amber); color:var(--ink); border-color:var(--amber); }
.trails-list{ display:flex; flex-direction:column; gap:.6rem; max-height:440px; overflow-y:auto; padding-right:.4rem; }
.trails-list::-webkit-scrollbar{ width:6px; }
.trails-list::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px; }
.trail-card{
  background:var(--basalt); border:1px solid var(--line-2);
  border-left:3px solid var(--laurel-2); border-radius:10px;
  padding:.9rem 1rem; transition:all .3s var(--ease);
  animation:trailFade .4s var(--ease-out) both;
}
@keyframes trailFade{ from{opacity:0; transform:translateX(-10px);} to{opacity:1; transform:none;} }
.trail-card:hover{ border-color:rgba(240,162,74,.35); border-left-color:var(--amber); transform:translateX(2px); }
.trail-card.diff-hard{ border-left-color:#d97757; }
.trail-card.diff-moderate{ border-left-color:var(--amber); }
.trail-card.diff-easy{ border-left-color:var(--levada); }
.trail-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.3rem; }
.trail-code{ font-family:var(--serif); color:var(--amber-2); font-size:.85rem; font-weight:600; letter-spacing:.04em; }
.trail-diff{ font-size:.62rem; text-transform:uppercase; letter-spacing:.14em; color:var(--fg-faint); padding:.15rem .5rem; border:1px solid var(--line-2); border-radius:999px; }
.trail-card h4{ font-family:var(--serif); font-weight:500; font-size:1.1rem; margin:0 0 .35rem; line-height:1.2; }
.trail-card p{ color:var(--fg-dim); font-weight:300; font-size:.85rem; margin:0 0 .5rem; line-height:1.45; }
.trail-meta{ display:flex; justify-content:space-between; font-size:.74rem; color:var(--fg-faint); }
.trail-meta strong{ color:var(--cream); font-weight:500; }
.trail-region{ font-style:italic; }
.trails-empty{ color:var(--fg-faint); font-style:italic; padding:1rem; text-align:center; }

/* ---------- BUDGET ESTIMATOR ---------- */
.budget-wrap{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.6rem,4vw,3rem);
  align-items:start;
}
.budget-controls{ display:flex; flex-direction:column; gap:1.4rem; background:rgba(13,20,24,.4); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.8rem; }
.budget-field{ display:flex; flex-direction:column; gap:.6rem; }
.budget-field label, .bf-label{ font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--fg-dim); font-weight:500; display:flex; justify-content:space-between; align-items:center; }
.bv{ font-family:var(--serif); font-size:1.3rem; color:var(--amber); text-transform:none; letter-spacing:0; }
.budget-field input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:4px;
  background:linear-gradient(90deg, var(--amber), var(--line));
  border-radius:4px; outline:none;
}
.budget-field input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%;
  background:var(--amber); cursor:pointer; border:3px solid var(--ink);
  box-shadow:0 0 0 1px var(--amber), 0 4px 12px rgba(240,162,74,.4);
  transition:transform .2s var(--ease);
}
.budget-field input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.15); }
.budget-field input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:var(--amber); cursor:pointer; border:3px solid var(--ink);
}
.style-toggle{ display:flex; gap:.3rem; background:rgba(7,11,13,.5); padding:.3rem; border-radius:999px; border:1px solid var(--line-2); }
.st-btn{ flex:1; padding:.5rem .7rem; border-radius:999px; color:var(--fg-dim); font-size:.82rem; font-weight:500; cursor:pointer; transition:all .2s var(--ease); }
.st-btn:hover{ color:var(--fg); }
.st-btn.is-active{ background:var(--amber); color:var(--ink); }
.budget-field .check{ padding:.4rem .7rem; }

.budget-output{
  background:linear-gradient(160deg, rgba(240,162,74,.08), rgba(13,20,24,.6));
  border:1px solid rgba(240,162,74,.25); border-radius:var(--radius-lg);
  padding:2rem; position:sticky; top:90px;
}
.bo-eyebrow{ font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:var(--amber-2); margin:0 0 .4rem; }
.bo-total{ font-family:var(--serif); font-size:clamp(2.6rem,5vw,3.8rem); font-weight:400; line-height:1; margin:0; color:var(--cream); letter-spacing:-.02em; }
.bo-total span:first-child{ color:var(--amber); margin-right:.1em; }
.bo-per{ color:var(--fg-dim); font-size:.95rem; margin:.5rem 0 1.2rem; }
.bo-break{ list-style:none; padding:0; margin:0 0 1rem; border-top:1px solid var(--line-2); }
.bo-break li{ display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid var(--line-2); font-size:.85rem; color:var(--fg-dim); }
.bo-break li span:last-child{ color:var(--cream); font-weight:500; font-variant-numeric:tabular-nums; }
.bo-note{ font-size:.74rem; color:var(--fg-faint); line-height:1.5; margin:0; }

/* ---------- VOICES CAROUSEL ---------- */
.voices-carousel{ max-width:880px; margin:0 auto; position:relative; }
.voices-track{ position:relative; min-height:200px; }
.voice-card{
  position:absolute; inset:0; opacity:0; transform:translateY(20px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
  pointer-events:none; text-align:center; padding:2rem 1rem;
}
.voice-card.is-active{ opacity:1; transform:none; pointer-events:auto; position:relative; }
.voice-mark{ font-family:var(--serif); font-size:4rem; line-height:.5; color:var(--amber); display:block; margin-bottom:.5rem; }
.voice-card blockquote{ font-family:var(--serif); font-size:clamp(1.2rem,2.2vw,1.6rem); font-weight:400; line-height:1.4; color:var(--cream); margin:0 0 1.4rem; font-style:italic; letter-spacing:-.01em; }
.voice-card figcaption{ display:flex; flex-direction:column; gap:.2rem; align-items:center; }
.v-name{ font-weight:600; color:var(--amber-2); font-size:1rem; }
.v-from{ color:var(--fg-dim); font-size:.85rem; }
.v-trip{ color:var(--fg-faint); font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; margin-top:.3rem; }
.voices-controls{ display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-top:1.5rem; }
.vc-btn{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(13,20,24,.6); border:1px solid var(--line); color:var(--cream); cursor:pointer; transition:all .25s var(--ease); }
.vc-btn:hover{ background:var(--amber); color:var(--ink); border-color:var(--amber); transform:scale(1.08); }
.vc-dots{ display:flex; gap:.5rem; }
.vc-dot{ width:8px; height:8px; border-radius:50%; background:var(--line); border:0; cursor:pointer; padding:0; transition:all .3s var(--ease); }
.vc-dot.is-active{ background:var(--amber); width:24px; border-radius:4px; }

/* ---------- Responsive: new sections ---------- */
@media (max-width:860px){
  .trails-wrap, .budget-wrap{ grid-template-columns:1fr; }
  .budget-output{ position:static; }
  .trails-map{ aspect-ratio:400/240; }
}
@media (max-width:640px){
  .budget-controls, .budget-output{ padding:1.3rem; }
  .voice-card{ padding:1.5rem .5rem; }
  .rg-pin{ font-size:.62rem; padding:.25rem .5rem; }
}
@media (prefers-reduced-motion: reduce){
  .trail-card{ animation:none; }
  .voice-card{ transition:none; }
  .vc-dot{ transition:none; }
}

/* =================================================================
   ROUND 4 — Climate dashboard, Gallery lightbox, Currency selector
   ================================================================= */

/* ---------- CLIMATE DASHBOARD ---------- */
.climate-wrap{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(1.6rem,4vw,3rem);
  align-items:start;
}
.climate-chart{
  background:rgba(13,20,24,.4); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:1rem;
  overflow:hidden;
}
.climate-svg{ width:100%; height:auto; display:block; }
.climate-svg .cl-grid{ stroke:var(--line-2); stroke-width:1; }
.climate-svg .cl-axis{ fill:var(--fg-faint); font-size:10px; font-family:var(--sans); }
.climate-svg .cl-month{ fill:var(--fg-dim); font-size:11px; font-family:var(--sans); letter-spacing:.04em; }
.climate-svg .cl-bar{ fill:rgba(91,154,214,.18); cursor:pointer; transition:fill .25s var(--ease); }
.climate-svg .cl-bar:hover, .climate-svg .cl-bar.is-active{ fill:rgba(91,154,214,.5); }
.climate-svg .cl-area-hi{ fill:url(#cl-grad); opacity:.18; }
.climate-svg .cl-line-hi{ fill:none; stroke:var(--amber); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.climate-svg .cl-line-lo{ fill:none; stroke:var(--teal-mid); stroke-width:1.5; stroke-dasharray:4 3; stroke-linejoin:round; }
.climate-svg .cl-pt{ fill:var(--amber); stroke:var(--ink); stroke-width:2; cursor:pointer; transition:r .2s var(--ease); }
.climate-svg .cl-pt:hover, .climate-svg .cl-pt.is-active{ r:6; }
.climate-svg .cl-legend text{ fill:var(--fg-dim); font-size:9px; font-family:var(--sans); }
.climate-svg .cl-leg-hi{ fill:var(--amber); }
.climate-svg .cl-leg-lo{ stroke:var(--teal-mid); stroke-width:2; stroke-dasharray:3 2; }
.climate-svg .cl-leg-rain{ fill:rgba(91,154,214,.4); }

.climate-detail{
  background:linear-gradient(160deg, rgba(240,162,74,.06), rgba(13,20,24,.5));
  border:1px solid rgba(240,162,74,.2); border-radius:var(--radius-lg);
  padding:1.8rem; position:sticky; top:90px;
}
.cd-eyebrow{ font-family:var(--serif); font-size:1.4rem; color:var(--cream); margin:0 0 1.2rem; letter-spacing:-.01em; }
.cd-stats{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-bottom:1.2rem; }
.cd-stat{ background:rgba(7,11,13,.5); border:1px solid var(--line-2); border-radius:10px; padding:.7rem .6rem; text-align:center; }
.cd-k{ display:block; font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; color:var(--fg-faint); margin-bottom:.3rem; }
.cd-v{ display:block; font-family:var(--serif); font-size:1.4rem; color:var(--amber-2); }
.cd-note{ font-size:.85rem; color:var(--fg-dim); font-weight:300; line-height:1.6; margin:0; }

/* ---------- GALLERY + LIGHTBOX ---------- */
.gallery-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem;
}
.gal-item{
  position:relative; aspect-ratio:4/3; border-radius:var(--radius);
  overflow:hidden; border:0; padding:0; cursor:pointer; background:var(--basalt-2);
  display:block;
}
.gal-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.gal-item:hover img, .gal-item:focus-visible img{ transform:scale(1.08); }
.gal-cap{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem .9rem .7rem;
  font-size:.78rem; color:var(--cream); line-height:1.3;
  background:linear-gradient(0deg, rgba(7,11,13,.92), transparent);
  opacity:0; transform:translateY(8px); transition:all .4s var(--ease-out);
}
.gal-item:hover .gal-cap, .gal-item:focus-visible .gal-cap{ opacity:1; transform:none; }
.gal-zoom{
  position:absolute; top:.7rem; right:.7rem;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(7,11,13,.6); color:var(--cream);
  backdrop-filter:blur(6px);
  opacity:0; transform:scale(.8); transition:all .3s var(--ease-out);
}
.gal-item:hover .gal-zoom, .gal-item:focus-visible .gal-zoom{ opacity:1; transform:scale(1); }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(5,8,10,.94); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
  padding:2rem;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lb-figure{ margin:0; max-width:90vw; max-height:85vh; display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.lb-figure img{ max-width:90vw; max-height:75vh; object-fit:contain; border-radius:8px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lb-figure figcaption{ color:var(--cream); font-size:.95rem; text-align:center; max-width:600px; font-style:italic; font-family:var(--serif); }
.lb-close{
  position:absolute; top:1.2rem; right:1.2rem;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,20,24,.7); border:1px solid var(--line);
  color:var(--cream); font-size:1.8rem; line-height:1; cursor:pointer;
  transition:all .25s var(--ease);
}
.lb-close:hover{ background:var(--amber); color:var(--ink); border-color:var(--amber); transform:rotate(90deg); }
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,20,24,.7); border:1px solid var(--line);
  color:var(--cream); cursor:pointer; transition:all .25s var(--ease);
}
.lb-nav:hover{ background:var(--amber); color:var(--ink); border-color:var(--amber); }
.lb-prev{ left:1.2rem; }
.lb-next{ right:1.2rem; }
.lb-counter{
  position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%);
  color:var(--fg-dim); font-size:.82rem; font-variant-numeric:tabular-nums;
  background:rgba(13,20,24,.6); padding:.35rem .8rem; border-radius:999px;
  border:1px solid var(--line);
}

/* ---------- BUDGET: currency selector + header ---------- */
.bo-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.3rem; }
.bo-currency-select select{
  background:rgba(7,11,13,.6); color:var(--cream);
  border:1px solid var(--line-2); border-radius:8px;
  padding:.35rem .6rem; font-size:.8rem; cursor:pointer;
  font-family:var(--sans);
}
.bo-currency-select select:focus-visible{ border-color:var(--amber); outline:none; }
.bo-currency-select select option{ background:var(--basalt); }

/* ---------- Responsive: round 4 ---------- */
@media (max-width:860px){
  .climate-wrap{ grid-template-columns:1fr; }
  .climate-detail{ position:static; }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .climate-detail{ padding:1.3rem; }
  .cd-stats{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:1fr; }
  .lb-prev{ left:.5rem; }
  .lb-next{ right:.5rem; }
  .lb-nav{ width:44px; height:44px; }
  .lb-close{ top:.8rem; right:.8rem; }
}
@media (prefers-reduced-motion: reduce){
  .gal-item img, .gal-cap, .gal-zoom{ transition:none; }
  .lightbox{ transition:none; }
  .climate-svg .cl-pt{ transition:none; }
}

/* =================================================================
   ROUND 5 — FAQ, Itinerary builder, Ambient audio, Scroll-spy
   ================================================================= */

/* ---------- FAQ ACCORDION ---------- */
.faq-wrap{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(1.6rem,4vw,3rem);
  align-items:start;
}
.faq-list{ display:flex; flex-direction:column; gap:.6rem; }
.faq-item{
  background:var(--basalt); border:1px solid var(--line-2);
  border-radius:12px; overflow:hidden;
  transition:border-color .3s var(--ease);
}
.faq-item[open]{ border-color:rgba(240,162,74,.3); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:1.1rem 1.3rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:var(--serif); font-size:1.1rem; color:var(--cream); font-weight:500;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--amber-2); }
.faq-q{ flex:1; line-height:1.3; }
.faq-ico{
  width:22px; height:22px; flex:none; position:relative; border-radius:50%;
  border:1px solid var(--line); transition:all .3s var(--ease);
}
.faq-ico::before, .faq-ico::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--amber-2);
  transform:translate(-50%,-50%); transition:all .3s var(--ease);
}
.faq-ico::before{ width:10px; height:1.5px; }
.faq-ico::after{ width:1.5px; height:10px; }
.faq-item[open] .faq-ico{ background:var(--amber); border-color:var(--amber); }
.faq-item[open] .faq-ico::before{ background:var(--ink); }
.faq-item[open] .faq-ico::after{ transform:translate(-50%,-50%) rotate(90deg); background:var(--ink); }
.faq-a{
  padding:0 1.3rem 1.2rem; color:var(--fg-dim); font-weight:300; line-height:1.65;
  animation:faqOpen .4s var(--ease-out);
}
.faq-a p{ margin:0; }
@keyframes faqOpen{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }
.faq-aside{
  background:linear-gradient(160deg, rgba(240,162,74,.08), rgba(13,20,24,.5));
  border:1px solid rgba(240,162,74,.2); border-radius:var(--radius-lg);
  padding:1.8rem; position:sticky; top:90px;
}
.faq-aside h3{ font-family:var(--serif); font-weight:400; font-size:1.5rem; margin:0 0 .7rem; color:var(--cream); }
.faq-aside p{ color:var(--fg-dim); font-weight:300; font-size:.92rem; line-height:1.6; margin:0 0 1.3rem; }

/* ---------- ITINERARY BUILDER ---------- */
.itin-toggle{
  position:fixed; right:1.2rem; bottom:5rem; z-index:55;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,20,24,.8); color:var(--cream);
  border:1px solid var(--line);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:all .3s var(--ease);
}
.itin-toggle.show{ opacity:1; transform:none; pointer-events:auto; }
.itin-toggle:hover{ background:var(--amber); color:var(--ink); border-color:var(--amber); transform:translateY(-2px); }
.itin-toggle.has-items{ background:var(--amber); color:var(--ink); border-color:var(--amber); }
.itin-count{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px;
  padding:0 4px; border-radius:9px; font-size:.65rem; font-weight:700;
  background:var(--ink); color:var(--amber-2);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--amber);
}
.itin-toggle.has-items .itin-count{ background:var(--ink); color:var(--amber); }

.itin-panel{
  position:fixed; right:1.2rem; bottom:9rem; z-index:56;
  width:min(340px, 90vw);
  background:linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  padding:1.3rem; max-height:70vh; overflow-y:auto;
  transform:translateY(20px) scale(.96); opacity:0; pointer-events:none;
  transform-origin:bottom right;
  transition:all .35s var(--ease-out);
}
.itin-panel.open{ transform:none; opacity:1; pointer-events:auto; }
.itin-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.itin-head h3{ font-family:var(--serif); font-weight:500; font-size:1.3rem; margin:0; color:var(--cream); }
.itin-close{ width:32px; height:32px; border-radius:50%; font-size:1.4rem; line-height:1; color:var(--fg-dim); cursor:pointer; transition:all .2s var(--ease); }
.itin-close:hover{ background:var(--amber); color:var(--ink); transform:rotate(90deg); }
.itin-sub{ font-size:.78rem; color:var(--fg-faint); line-height:1.4; margin:0 0 .9rem; }
.itin-items{ list-style:none; padding:0; margin:0 0 .8rem; display:flex; flex-direction:column; gap:.4rem; }
.itin-item{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  background:rgba(7,11,13,.5); border:1px solid var(--line-2); border-radius:8px;
  padding:.6rem .7rem; animation:itinPop .3s var(--ease-out);
}
@keyframes itinPop{ from{opacity:0; transform:translateX(8px);} to{opacity:1; transform:none;} }
.ii-info{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.ii-type{ font-size:.6rem; text-transform:uppercase; letter-spacing:.12em; color:var(--amber-2); }
.ii-name{ font-size:.85rem; color:var(--cream); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ii-remove{ width:24px; height:24px; border-radius:50%; font-size:1.1rem; line-height:1; color:var(--fg-faint); cursor:pointer; flex:none; transition:all .2s var(--ease); }
.ii-remove:hover{ background:#d97757; color:#fff; }
.itin-empty{ font-size:.82rem; color:var(--fg-faint); font-style:italic; padding:.6rem 0; line-height:1.5; }
.itin-hint{ color:var(--amber-2); font-style:normal; font-weight:600; }
.itin-actions{ display:flex; gap:.5rem; margin-top:.4rem; }
.itin-actions .ghost-btn{ flex:1; justify-content:center; font-size:.8rem; padding:.55rem; }
.itin-actions .cta-btn{ flex:1.4; justify-content:center; font-size:.8rem; padding:.55rem; }

/* ---------- Trail "+ Trip" button ---------- */
.trail-add{
  margin-top:.7rem; padding:.35rem .8rem; border-radius:999px;
  border:1px solid var(--line); color:var(--amber-2);
  font-size:.74rem; font-weight:500; cursor:pointer; align-self:flex-start;
  transition:all .25s var(--ease); background:transparent;
}
.trail-add:hover{ border-color:var(--amber); background:rgba(240,162,74,.08); color:var(--amber); }
.trail-add.is-added{ background:var(--levada); color:var(--ink); border-color:var(--levada); }

/* ---------- POI drawer actions ---------- */
.drawer-actions{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-top:.4rem; }
.drawer-actions .drawer-cta{ flex:1; min-width:180px; }
.drawer-actions .ghost-btn{ font-size:.82rem; }
.drawer-actions .ghost-btn.is-added{ background:var(--levada); color:var(--ink); border-color:var(--levada); }

/* ---------- AMBIENT AUDIO TOGGLE ---------- */
.audio-toggle{
  position:fixed; right:1.2rem; bottom:8.8rem; z-index:55;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,20,24,.8); color:var(--cream);
  border:1px solid var(--line);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:all .3s var(--ease);
}
.audio-toggle.show{ opacity:1; transform:none; pointer-events:auto; }
.audio-toggle:hover{ background:var(--teal-mid); color:var(--cream); border-color:var(--teal-mid); }
.audio-toggle .audio-on{ display:none; }
.audio-toggle.is-on{ background:var(--teal-mid); border-color:var(--teal-mid); }
.audio-toggle.is-on .audio-off{ display:none; }
.audio-toggle.is-on .audio-on{ display:block; }
.audio-toggle.is-on::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--teal-mid); opacity:.5;
  animation:audioPulse 2s var(--ease) infinite;
}
@keyframes audioPulse{ 0%{transform:scale(1); opacity:.5;} 100%{transform:scale(1.4); opacity:0;} }

/* ---------- Responsive: round 5 ---------- */
@media (max-width:860px){
  .faq-wrap{ grid-template-columns:1fr; }
  .faq-aside{ position:static; }
}
@media (max-width:640px){
  .audio-toggle, .itin-toggle{ right:.8rem; }
  .audio-toggle{ bottom:7.6rem; }
  .itin-toggle{ bottom:4.2rem; }
  .audio-toggle, .itin-toggle{ width:42px; height:42px; }
  .itin-panel{ right:.8rem; bottom:8.5rem; left:.8rem; width:auto; }
  .faq-aside{ padding:1.3rem; }
}
@media (prefers-reduced-motion: reduce){
  .faq-a, .itin-item, .audio-toggle::after{ animation:none; }
  .faq-ico::before, .faq-ico::after, .faq-ico{ transition:none; }
  .itin-panel{ transition:none; }
}

/* =================================================================
   ROUND 6 — 7-day itinerary, Packing checklist, Phrase guide
   ================================================================= */

/* ---------- 7-DAY ITINERARY TIMELINE ---------- */
.it7-wrap{
  max-width:880px; margin:0 auto; position:relative;
  padding-left:0;
}
.it7-rail{
  position:absolute; left:28px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg, var(--amber) 0%, var(--line) 100%);
  border-radius:2px;
}
.it7-list{ list-style:none; padding:0; margin:0; position:relative; }
.it7-item{
  position:relative; margin-bottom:.7rem; padding-left:60px;
}
.it7-item::before{
  content:""; position:absolute; left:22px; top:1.4rem;
  width:14px; height:14px; border-radius:50%;
  background:var(--ink); border:2px solid var(--amber);
  z-index:2; transition:all .3s var(--ease);
}
.it7-item.open::before{ background:var(--amber); box-shadow:0 0 0 4px rgba(240,162,74,.2); }
.it7-head{
  width:100%; text-align:left; cursor:pointer; padding:1rem 1.2rem;
  background:var(--basalt); border:1px solid var(--line-2); border-radius:12px;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  transition:all .3s var(--ease);
}
.it7-head:hover{ border-color:rgba(240,162,74,.35); }
.it7-item.open .it7-head{ border-color:rgba(240,162,74,.4); background:rgba(13,20,24,.7); }
.it7-day{ font-family:var(--serif); color:var(--amber-2); font-size:.9rem; font-weight:600; letter-spacing:.04em; min-width:60px; }
.it7-title{ font-family:var(--serif); font-size:1.15rem; color:var(--cream); font-weight:500; flex:1; }
.it7-tag{ font-size:.66rem; text-transform:uppercase; letter-spacing:.12em; color:var(--fg-faint); padding:.25rem .6rem; border:1px solid var(--line-2); border-radius:999px; }
.it7-ico{
  width:18px; height:18px; position:relative; flex:none;
}
.it7-ico::before, .it7-ico::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--amber-2);
  transform:translate(-50%,-50%); transition:all .3s var(--ease);
}
.it7-ico::before{ width:10px; height:1.5px; }
.it7-ico::after{ width:1.5px; height:10px; }
.it7-item.open .it7-ico::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.it7-body{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .4s var(--ease), opacity .4s var(--ease), padding .4s var(--ease);
  padding:0 1.2rem;
}
.it7-item.open .it7-body{ max-height:340px; opacity:1; padding:.8rem 1.2rem 1.2rem; }
.it7-slot{ margin-bottom:.7rem; }
.it7-slot:last-child{ margin-bottom:0; }
.it7-slot-k{ font-size:.66rem; text-transform:uppercase; letter-spacing:.14em; color:var(--amber-2); display:block; margin-bottom:.2rem; }
.it7-slot p{ margin:0; color:var(--fg-dim); font-weight:300; line-height:1.55; font-size:.92rem; }

/* ---------- PACKING CHECKLIST ---------- */
.pack-wrap{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 320px; gap:clamp(1.6rem,4vw,3rem);
  align-items:start;
}
.pack-cols{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.pack-col{ background:rgba(13,20,24,.4); border:1px solid var(--line-2); border-radius:var(--radius); padding:1.3rem; }
.pack-col h4{ font-family:var(--serif); font-weight:500; font-size:1.15rem; margin:0 0 .8rem; color:var(--cream); }
.pack-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.4rem; }
.pack-check{
  display:flex; align-items:center; gap:.6rem; cursor:pointer; padding:.4rem .2rem;
  border-radius:6px; transition:background .2s var(--ease);
}
.pack-check:hover{ background:rgba(243,236,224,.03); }
.pack-check input{ position:absolute; opacity:0; width:0; height:0; }
.pc-box{
  width:20px; height:20px; border-radius:5px; flex:none;
  border:1.5px solid var(--line); position:relative;
  transition:all .2s var(--ease);
}
.pc-box::after{
  content:""; position:absolute; left:5px; top:1px; width:6px; height:11px;
  border:solid var(--ink); border-width:0 2px 2px 0; transform:rotate(45deg) scale(0);
  transition:transform .2s var(--ease-out);
}
.pack-check.is-checked .pc-box{ background:var(--levada); border-color:var(--levada); }
.pack-check.is-checked .pc-box::after{ transform:rotate(45deg) scale(1); }
.pc-label{ font-size:.9rem; color:var(--fg-dim); font-weight:300; transition:all .2s var(--ease); }
.pack-check.is-checked .pc-label{ color:var(--fg-faint); text-decoration:line-through; }

.pack-summary{
  background:linear-gradient(160deg, rgba(111,174,122,.1), rgba(13,20,24,.6));
  border:1px solid rgba(111,174,122,.25); border-radius:var(--radius-lg);
  padding:1.8rem; position:sticky; top:90px; text-align:center;
}
.ps-eyebrow{ font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:var(--levada); margin:0 0 .4rem; }
.ps-count{ font-family:var(--serif); font-size:3rem; font-weight:400; color:var(--cream); margin:0; line-height:1; }
.ps-sep{ color:var(--fg-faint); margin:0 .2em; }
.ps-bar{ height:6px; background:var(--line-2); border-radius:3px; overflow:hidden; margin:1rem 0 .8rem; }
.ps-bar span{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--levada), var(--amber-2)); border-radius:3px; transition:width .5s var(--ease-out); }
.ps-note{ font-size:.84rem; color:var(--fg-dim); font-weight:300; margin:0 0 1.2rem; min-height:1.4em; }
.pack-summary .ghost-btn{ font-size:.8rem; }

/* ---------- PORTUGUESE PHRASE GUIDE ---------- */
.ph-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:.8rem;
}
.ph-card{
  position:relative; text-align:left; cursor:pointer;
  background:var(--basalt); border:1px solid var(--line-2); border-radius:12px;
  padding:1rem 1.1rem; transition:all .3s var(--ease);
  display:flex; flex-direction:column; gap:.25rem;
}
.ph-card:hover, .ph-card:focus-visible{ border-color:var(--amber); transform:translateY(-3px); }
.ph-card.is-speaking{ border-color:var(--amber); background:rgba(240,162,74,.08); }
.ph-cat{ font-size:.6rem; text-transform:uppercase; letter-spacing:.14em; color:var(--amber-2); margin-bottom:.2rem; }
.ph-pt{ font-family:var(--serif); font-size:1.2rem; color:var(--cream); font-weight:500; line-height:1.15; }
.ph-ip{ font-size:.78rem; color:var(--fg-faint); font-style:italic; }
.ph-en{ font-size:.85rem; color:var(--fg-dim); margin-top:.3rem; }
.ph-speak{
  position:absolute; top:.8rem; right:.8rem;
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(240,162,74,.12); color:var(--amber-2);
  opacity:0; transform:scale(.8); transition:all .25s var(--ease-out);
}
.ph-card:hover .ph-speak, .ph-card:focus-visible .ph-speak{ opacity:1; transform:scale(1); }
.ph-card.is-speaking .ph-speak{ opacity:1; transform:scale(1); background:var(--amber); color:var(--ink); animation:phPulse 1s var(--ease) infinite; }
@keyframes phPulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.15);} }
.ph-foot{ max-width:var(--maxw); margin:1.6rem auto 0; text-align:center; font-size:.8rem; color:var(--fg-faint); font-style:italic; }

/* ---------- Responsive: round 6 ---------- */
@media (max-width:860px){
  .pack-wrap{ grid-template-columns:1fr; }
  .pack-summary{ position:static; }
}
@media (max-width:640px){
  .pack-cols{ grid-template-columns:1fr; }
  .it7-title{ font-size:1rem; }
  .it7-tag{ display:none; }
  .it7-body{ padding:0; }
  .it7-item.open .it7-body{ padding:.6rem 1rem 1rem; }
}
@media (prefers-reduced-motion: reduce){
  .it7-body{ transition:none; }
  .it7-ico::before, .it7-ico::after{ transition:none; }
  .ph-speak, .ph-card.is-speaking .ph-speak{ animation:none; transition:none; }
  .ps-bar span{ transition:none; }
}

/* =================================================================
   ROUND 7 — Sun & Tide widget, Accessibility panel, Print
   ================================================================= */

/* ---------- SUN & TIDE ---------- */
.sun-wrap{ max-width:var(--maxw); margin:0 auto; display:grid; gap:1.4rem; }
.sun-cards{ display:grid; grid-template-columns:repeat(4, 1fr); gap:.8rem; }
.sun-card{
  background:rgba(13,20,24,.5); border:1px solid var(--line-2); border-radius:12px;
  padding:1rem; display:flex; flex-direction:column; gap:.3rem; align-items:center;
  transition:border-color .3s var(--ease);
}
.sun-card:hover{ border-color:rgba(240,162,74,.3); }
.sc-k{ font-size:.64rem; text-transform:uppercase; letter-spacing:.14em; color:var(--fg-faint); }
.sc-v{ font-family:var(--serif); font-size:1.5rem; color:var(--amber-2); font-weight:500; }

.sun-arc{ width:100%; }
.sun-arc-svg{ width:100%; height:auto; }
.sun-arc-svg .sa-horizon{ stroke:var(--line-2); stroke-width:1; }
.sun-arc-svg .sa-arc{ fill:none; stroke:var(--amber); stroke-width:2; stroke-dasharray:3 3; opacity:.5; }
.sun-arc-svg .sa-end{ fill:var(--amber); opacity:.7; }
.sun-arc-svg .sa-label{ fill:var(--fg-dim); font-size:11px; font-family:var(--sans); }
.sun-arc-svg .sun-now{ fill:var(--amber); filter:drop-shadow(0 0 6px rgba(240,162,74,.8)); }
.sun-arc-svg .sun-now-t{ fill:var(--amber-2); font-size:10px; font-family:var(--sans); text-transform:uppercase; letter-spacing:.1em; }

.tide-wrap{
  background:rgba(13,20,24,.5); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:1.2rem 1.4rem .9rem;
}
.tide-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem; }
.tide-label{ font-family:var(--serif); font-size:1.1rem; color:var(--cream); }
.tide-time{ font-size:.84rem; color:var(--amber-2); font-variant-numeric:tabular-nums; }
.tide-svg{ width:100%; height:140px; cursor:ew-resize; touch-action:none; }
.tide-svg .tide-curve{ fill:none; stroke:var(--teal-mid); stroke-width:2; }
.tide-svg .tide-high{ fill:var(--amber); }
.tide-svg .tide-low{ fill:var(--teal-mid); }
.tide-svg .tide-now-line{ stroke:var(--cream); stroke-width:1; stroke-dasharray:3 3; opacity:.5; }
.tide-svg .tide-now-pt{ fill:var(--cream); stroke:var(--ink); stroke-width:2; }
.tide-legend{ display:flex; gap:1.2rem; align-items:center; margin-top:.6rem; font-size:.74rem; color:var(--fg-faint); }
.tl-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:.35rem; vertical-align:middle; }
.tl-dot.high{ background:var(--amber); }
.tl-dot.low{ background:var(--teal-mid); }
.tide-now{ margin-left:auto; color:var(--cream); font-variant-numeric:tabular-nums; }

/* ---------- ACCESSIBILITY PANEL ---------- */
.icon-only{ padding:.6rem; display:flex; align-items:center; justify-content:center; }
.a11y-panel{
  position:absolute; top:calc(var(--header-h)); right:var(--gut); z-index:70;
  width:300px; max-width:calc(100vw - 2rem);
  background:rgba(7,11,13,.96); backdrop-filter:blur(16px);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1.2rem; box-shadow:0 20px 50px -10px rgba(0,0,0,.6);
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:all .3s var(--ease-out);
}
.a11y-panel.open{ opacity:1; transform:none; pointer-events:auto; }
.a11y-panel h4{ font-family:var(--serif); font-size:1.1rem; margin:0 0 .9rem; color:var(--cream); font-weight:500; }
.a11y-panel hr{ border:0; border-top:1px solid var(--line-2); margin:.9rem 0; }
.a11y-row{ display:flex; justify-content:space-between; align-items:center; padding:.55rem 0; font-size:.86rem; color:var(--fg-dim); }
.a11y-seg{ display:flex; background:rgba(7,11,13,.5); border:1px solid var(--line-2); border-radius:8px; padding:2px; gap:2px; }
.as-btn{ padding:.35rem .6rem; border-radius:6px; color:var(--fg-faint); font-size:.78rem; cursor:pointer; transition:all .2s var(--ease); min-width:34px; }
.as-btn:hover{ color:var(--fg); }
.as-btn.is-active{ background:var(--amber); color:var(--ink); font-weight:600; }
.a11y-switch{ position:relative; display:inline-block; width:42px; height:24px; cursor:pointer; }
.a11y-switch input{ position:absolute; opacity:0; width:0; height:0; }
.as-track{
  position:absolute; inset:0; border-radius:12px; background:var(--line);
  transition:background .25s var(--ease);
}
.as-track::before{
  content:""; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%;
  background:var(--cream); transition:transform .25s var(--ease-out);
}
.a11y-switch input:checked + .as-track{ background:var(--amber); }
.a11y-switch input:checked + .as-track::before{ transform:translateX(18px); background:var(--ink); }
.a11y-print{ width:100%; justify-content:center; margin-top:.4rem; font-size:.82rem; }

/* ---------- HIGH CONTRAST MODE ---------- */
body.high-contrast{
  --fg: #ffffff;
  --fg-dim: rgba(255,255,255,0.92);
  --fg-faint: rgba(255,255,255,0.75);
  --line: rgba(255,255,255,0.4);
  --line-2: rgba(255,255,255,0.25);
  --amber: #ffcc33;
  --amber-2: #ffdd66;
}
body.high-contrast .panel,
body.high-contrast .trip-form,
body.high-contrast .a11y-panel,
body.high-contrast .poi-drawer,
body.high-contrast .itin-panel{
  background:rgba(0,0,0,.85);
  border-color:rgba(255,255,255,.5);
}
body.high-contrast .taste-card,
body.high-contrast .when-card,
body.high-contrast .trail-card,
body.high-contrast .faq-item,
body.high-contrast .sun-card,
body.high-contrast .pack-col,
body.high-contrast .ph-card,
body.high-contrast .voice-card{
  background:#000; border-color:rgba(255,255,255,.4);
}
body.high-contrast a:focus-visible,
body.high-contrast button:focus-visible{
  outline:3px solid #ffff00; outline-offset:3px;
}

/* ---------- Responsive: round 7 ---------- */
@media (max-width:640px){
  .sun-cards{ grid-template-columns:1fr 1fr; }
  .a11y-panel{ right:.8rem; width:calc(100vw - 1.6rem); }
  .tide-legend{ flex-wrap:wrap; gap:.6rem; }
  .tide-now{ margin-left:0; width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .a11y-panel{ transition:none; }
  .as-track, .as-track::before{ transition:none; }
}

/* =================================================================
   ROUND 8 — Festivals calendar, Transport guide, mobile btn stack
   ================================================================= */

/* ---------- FESTIVALS & EVENTS ---------- */
.ev-wrap{ max-width:var(--maxw); margin:0 auto; }
.ev-filters{ display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; margin-bottom:1.6rem; }
.ev-btn{
  padding:.5rem 1rem; border-radius:999px;
  border:1px solid var(--line); color:var(--fg-dim);
  font-size:.82rem; font-weight:500; cursor:pointer;
  transition:all .2s var(--ease);
}
.ev-btn:hover{ color:var(--fg); border-color:var(--fg-faint); }
.ev-btn.is-active{ background:var(--amber); color:var(--ink); border-color:var(--amber); }
.ev-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1rem;
}
.ev-card{
  position:relative; display:flex; gap:1rem; align-items:stretch;
  background:var(--basalt); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:1.1rem; overflow:hidden;
  transition:all .35s var(--ease);
  animation:evIn .4s var(--ease-out) both;
}
@keyframes evIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
.ev-card:hover{ border-color:rgba(240,162,74,.35); transform:translateY(-3px); }
.ev-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
}
.ev-card.season-spring::before{ background:var(--levada); }
.ev-card.season-summer::before{ background:var(--amber); }
.ev-card.season-autumn::before{ background:#d97757; }
.ev-card.season-winter::before{ background:var(--teal-mid); }
.ev-month{
  font-family:var(--serif); font-size:1.6rem; color:var(--amber-2); font-weight:500;
  min-width:48px; text-align:center; line-height:1; padding-top:.2rem;
}
.ev-body{ flex:1; min-width:0; }
.ev-body h4{ font-family:var(--serif); font-size:1.1rem; margin:0 0 .2rem; color:var(--cream); font-weight:500; line-height:1.2; }
.ev-where{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-faint); margin:0 0 .5rem; }
.ev-desc{ font-size:.85rem; color:var(--fg-dim); font-weight:300; line-height:1.5; margin:0; }
.ev-season{
  position:absolute; top:.7rem; right:.8rem;
  font-size:.58rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--fg-faint); opacity:.6;
}

/* ---------- TRANSPORT GUIDE ---------- */
.tr-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.2rem;
}
.tr-card{
  background:var(--basalt); border:1px solid var(--line-2); border-radius:var(--radius-lg);
  padding:1.6rem; transition:all .35s var(--ease); position:relative; overflow:hidden;
}
.tr-card:hover{ border-color:rgba(240,162,74,.35); transform:translateY(-4px); }
.tr-card::after{
  content:""; position:absolute; right:-40px; bottom:-40px; width:140px; height:140px;
  border-radius:50%; background:radial-gradient(circle, rgba(240,162,74,.06), transparent 70%);
  pointer-events:none;
}
.tr-icon{
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(240,162,74,.1); color:var(--amber-2); margin-bottom:1rem;
}
.tr-card h4{ font-family:var(--serif); font-size:1.3rem; margin:0 0 .3rem; color:var(--cream); font-weight:500; }
.tr-cost{ font-family:var(--serif); color:var(--amber-2); font-size:1rem; margin:0 0 .8rem; }
.tr-best{ font-size:.82rem; color:var(--fg-dim); margin:0 0 .6rem; }
.tr-best strong{ color:var(--cream); font-weight:500; }
.tr-desc{ font-size:.88rem; color:var(--fg-dim); font-weight:300; line-height:1.55; margin:0 0 .8rem; }
.tr-tip{ font-size:.78rem; color:var(--fg-faint); line-height:1.5; margin:0; padding-top:.7rem; border-top:1px solid var(--line-2); }
.tr-tip span{ color:var(--amber-2); font-weight:600; }

/* ---------- Mobile floating button stack refinement ---------- */
/* Clear vertical stack: to-top (bottom) → itinerary → audio, 2.1rem gaps */
@media (max-width:640px){
  #to-top{ bottom:5.5rem; }
  #audio-toggle{ bottom:9.7rem; }
  #itin-toggle{ bottom:7.6rem; }
}

/* ---------- Responsive: round 8 ---------- */
@media (max-width:640px){
  .ev-card{ padding:.9rem; }
  .ev-month{ font-size:1.3rem; min-width:40px; }
  .ev-desc{ font-size:.8rem; }
  .tr-card{ padding:1.3rem; }
}
@media (prefers-reduced-motion: reduce){
  .ev-card{ animation:none; transition:none; }
  .tr-card{ transition:none; }
}

/* =================================================================
   ROUND 9 — Newsletter, Resume banner, Hero number badges
   ================================================================= */

/* ---------- NEWSLETTER ---------- */
.newsletter-section{
  background:linear-gradient(160deg, var(--teal-deep), var(--ink) 80%);
  border-top:1px solid rgba(240,162,74,.15);
}
.nl-wrap{
  max-width:900px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3rem);
  align-items:center;
}
.nl-copy .eyebrow{ color:var(--amber-2); }
.nl-copy h2{ margin:.3rem 0; }
.nl-copy .lede{ margin:0; }
.nl-form{ display:flex; flex-direction:column; gap:.5rem; }
.nl-field{ display:flex; gap:.5rem; }
.nl-field.invalid input{ border-color:#ff8d6b; }
.nl-field input{
  flex:1; background:rgba(7,11,13,.6); border:1px solid var(--line);
  border-radius:999px; padding:.8rem 1.2rem; color:var(--cream); font-size:.95rem;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.nl-field input::placeholder{ color:var(--fg-faint); }
.nl-field input:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(240,162,74,.15); }
.nl-field .cta-btn{ border-radius:999px; white-space:nowrap; }
.nl-err{ color:#ff8d6b; font-size:.78rem; min-height:1em; }
.nl-success{
  background:linear-gradient(160deg, rgba(111,174,122,.16), rgba(13,20,24,.5));
  border:1px solid rgba(111,174,122,.4); border-radius:12px;
  padding:1rem 1.2rem; color:var(--levada); font-size:.95rem; font-weight:500;
}

/* ---------- RESUME-READING BANNER ---------- */
.resume-banner{
  position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%) translateY(120%);
  z-index:65; width:min(540px, calc(100vw - 2.4rem));
  background:rgba(13,20,24,.95); backdrop-filter:blur(14px);
  border:1px solid rgba(240,162,74,.3); border-radius:var(--radius);
  padding:1rem 1.2rem; display:flex; align-items:center; gap:1rem;
  box-shadow:0 20px 50px -10px rgba(0,0,0,.6);
  opacity:0; pointer-events:none;
  transition:transform .5s var(--ease-out), opacity .4s var(--ease);
}
.resume-banner.show{ transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto; }
.rb-text{ flex:1; font-size:.85rem; color:var(--fg-dim); line-height:1.4; }
.rb-text strong{ color:var(--amber-2); font-weight:600; }
.rb-actions{ display:flex; gap:.4rem; flex-shrink:0; }
.rb-actions .cta-btn, .rb-actions .ghost-btn{ padding:.5rem .8rem; font-size:.78rem; }
.rb-close{
  position:absolute; top:.3rem; right:.5rem;
  width:24px; height:24px; border-radius:50%; font-size:1.1rem; line-height:1;
  color:var(--fg-faint); cursor:pointer; transition:all .2s var(--ease);
}
.rb-close:hover{ color:var(--cream); background:rgba(243,236,224,.1); }
.cta-btn.sm, .ghost-btn.sm{ padding:.5rem .9rem; font-size:.78rem; }

/* ---------- HERO SECTION NUMBER BADGES ---------- */
.cinema-section{ counter-increment: chapter; }
.cinema{ counter-reset: chapter; }
.cinema-section .panel .eyebrow::before{
  content: counter(chapter, decimal-leading-zero);
  display:inline-block; margin-right:.6rem;
  font-family:var(--serif); font-size:.85rem; color:var(--amber);
  border:1px solid var(--amber); border-radius:50%;
  width:22px; height:22px; line-height:20px; text-align:center;
  vertical-align:middle;
}
.solid-section .solid-head .eyebrow{
  position:relative; padding-left:1.8rem;
}
.solid-section .solid-head .eyebrow::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-12px; width:40px; height:1px;
  background:linear-gradient(90deg, transparent, var(--amber), transparent);
}

/* ---------- Responsive: round 9 ---------- */
@media (max-width:760px){
  .nl-wrap{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .nl-field{ flex-direction:column; }
  .nl-field .cta-btn{ justify-content:center; }
  .resume-banner{ flex-direction:column; align-items:stretch; gap:.6rem; padding:1rem; }
  .rb-actions{ justify-content:flex-end; }
}
@media (prefers-reduced-motion: reduce){
  .resume-banner{ transition:none; }
}

/* =================================================================
   GUIDE PAGES + cross-page nav (added in restructure)
   ================================================================= */

/* Guide hero — static, image-backed (no 3D on guide pages) */
.guide-hero{
  position:relative;
  min-height:clamp(420px, 68vh, 760px);
  display:flex; align-items:flex-end;
  padding:calc(var(--header-h) + 3rem) var(--gut) clamp(2.5rem,5vw,4.5rem);
  background:
    linear-gradient(180deg, rgba(7,11,13,.46) 0%, rgba(7,11,13,.2) 42%, rgba(7,11,13,.86) 100%),
    var(--hero-img, none) center/cover no-repeat;
  border-bottom:1px solid var(--line-2);
}
.guide-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(125% 100% at 50% 28%, transparent 55%, rgba(0,0,0,.42));
}
.guide-hero-inner{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; width:100%; }
.guide-hero h1.display{ margin:.4rem 0 1rem; }
.guide-hero .lede{ max-width:60ch; }
.crumbs{ font-size:.75rem; letter-spacing:.06em; color:var(--fg-faint); margin-bottom:1rem; text-transform:uppercase; }
.crumbs a{ color:var(--fg-dim); text-decoration:none; }
.crumbs a:hover{ color:var(--amber); }
.crumbs span{ margin:0 .5rem; opacity:.5; }

/* Guide CTA band */
.guide-cta-band{ text-align:center; background:linear-gradient(180deg, var(--ink), var(--teal-deep)); }
.gcb-inner{ max-width:720px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.gcb-inner .lede{ text-align:center; margin:0; }

/* Homepage: guides grid */
.guides-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1.2rem;
}
.guide-card{
  position:relative; display:flex; flex-direction:column; gap:.5rem;
  padding:1.6rem 1.5rem 3.3rem; border:1px solid var(--line);
  border-radius:var(--radius-lg); background:rgba(243,236,224,.02);
  text-decoration:none; color:var(--fg);
  transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.guide-card:hover,.guide-card:focus-visible{ transform:translateY(-4px); border-color:var(--amber); background:rgba(240,162,74,.05); outline:none; }
.guide-card .gc-eyebrow{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); }
.guide-card h3{ font-family:var(--serif); font-size:1.35rem; font-weight:500; }
.guide-card p{ font-size:.92rem; color:var(--fg-dim); line-height:1.55; margin:0; }
.guide-card .gc-go{ position:absolute; right:1.5rem; bottom:1.4rem; font-size:1.3rem; color:var(--amber); transition:transform .3s var(--ease); }
.guide-card:hover .gc-go{ transform:translateX(5px); }

/* "Read the full guide" link under an overview section */
.section-more{ max-width:var(--maxw); margin:2.6rem auto 0; text-align:center; }

/* Ghost variant of the primary CTA button */
.cta-btn.ghost{ background:transparent; color:var(--fg); border:1px solid var(--line); box-shadow:none; }
.cta-btn.ghost:hover{ border-color:var(--amber); color:var(--amber); background:rgba(240,162,74,.06); box-shadow:none; }

/* Mobile-nav divider + CTA emphasis */
.mn-divider{ display:block; height:1px; background:var(--line-2); margin:.7rem 0; }
.mobile-nav .mn-cta{ color:var(--amber); font-weight:500; }

/* Active nav item */
.primary-nav a[aria-current="page"]{ color:var(--amber); }

/* Subtle footer VPC-family credit link */
.footer-base a{ color:var(--fg-dim); text-decoration:none; border-bottom:1px solid var(--line); transition:color .2s var(--ease), border-color .2s var(--ease); }
.footer-base a:hover{ color:var(--amber); border-bottom-color:var(--amber); }

/* Long-form prose block (guide pages) */
.prose-wrap{ max-width:64ch; margin:0 auto; }
.prose-wrap p{ font-size:1.02rem; line-height:1.75; color:var(--fg-dim); margin:0 0 1.2rem; }
.prose-wrap p strong{ color:var(--fg); }
.prose-wrap p:last-child{ margin-bottom:0; }

/* =================================================================
   REAL-IMAGE CINEMATIC PIVOT  (replaces the WebGL scene)
   Real photo backdrops + parallax + mist + light + glowing pins.
   ================================================================= */
.cinema{ position:relative; z-index:1; }
.cinema-section{ position:relative; overflow:hidden; }
#hero{ pointer-events:auto; }          /* was pointer-events:none for canvas drag */
#hero > *{ pointer-events:auto; }

/* ---- HERO ---- */
.hero{ min-height:100vh; min-height:100svh; align-items:flex-end; padding-bottom:clamp(3rem,8vh,6rem); }
.hero-stage{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--ink); }
.hero-photo{
  position:absolute; inset:-6%;
  background-image:url('img/img-hero-clouds.jpg');
  background-size:cover; background-position:center 42%;
  transform:scale(1.06);
  filter:brightness(1.12) saturate(1.08) contrast(1.02);
  animation:heroKen 28s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroKen{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to{   transform:scale(1.15) translate3d(-1.5%,-1.5%,0); }
}
.hero-rays{
  position:absolute; inset:-25%; z-index:1; pointer-events:none;
  background:conic-gradient(from 205deg at 60% -8%,
    rgba(255,231,180,0) 0deg, rgba(255,231,180,.20) 10deg, rgba(255,231,180,0) 24deg,
    rgba(255,231,180,.14) 38deg, rgba(255,231,180,0) 52deg, rgba(255,231,180,.10) 66deg, rgba(255,231,180,0) 80deg);
  mix-blend-mode:screen; opacity:.55;
  animation:rayDrift 20s ease-in-out infinite alternate;
}
@keyframes rayDrift{ from{ transform:translateX(-2%) rotate(-1deg);} to{ transform:translateX(2%) rotate(1.2deg);} }
.hero-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,10,12,.8) 0%, rgba(6,10,12,.38) 32%, rgba(6,10,12,0) 58%, rgba(6,10,12,.16) 100%),
    linear-gradient(0deg,  rgba(6,10,12,.7) 0%, rgba(6,10,12,.04) 46%, rgba(6,10,12,.16) 100%);
}
.hero-mist{ position:absolute; inset:0; z-index:3; width:100%; height:100%; pointer-events:none; }
.hero-copy{ z-index:5; }

/* Glowing location pins over the hero photo */
.hero-pins{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.hero-pin{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:.5rem; pointer-events:auto;
  padding:.32rem .8rem .32rem .4rem; border-radius:999px;
  background:rgba(9,14,17,.5); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(255,217,160,.4); color:var(--cream);
  font-size:.82rem; text-decoration:none; white-space:nowrap;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.hero-pin:hover{ border-color:var(--amber); background:rgba(240,162,74,.16); }
.pin-dot{
  width:11px; height:11px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 40% 35%, #fff, var(--amber) 62%);
  box-shadow:0 0 0 4px rgba(240,162,74,.16), 0 0 14px 2px rgba(240,162,74,.6);
  animation:pinPulse 2.6s var(--ease) infinite;
}
@keyframes pinPulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(240,162,74,.16), 0 0 12px 2px rgba(240,162,74,.55); }
  50%{     box-shadow:0 0 0 8px rgba(240,162,74,.04), 0 0 22px 5px rgba(240,162,74,.9); }
}

/* ---- CHAPTER PHOTO SECTIONS ---- */
.photo-section{ min-height:100vh; min-height:100svh; }
.photo-section .sec-bg{
  position:absolute; left:0; right:0; top:-12%; height:124%; z-index:0;
  background-size:cover; background-position:center; will-change:transform;
  filter:brightness(1.08) saturate(1.06);
}
.photo-section .sec-bg::after{ content:""; position:absolute; inset:0; }
.photo-section.reveal-side.right .sec-bg::after{
  background:linear-gradient(90deg, rgba(6,10,12,0) 0%, rgba(6,10,12,.28) 48%, rgba(6,10,12,.72) 100%),
             linear-gradient(0deg, rgba(6,10,12,.34), transparent 60%);
}
.photo-section.reveal-side.left .sec-bg::after{
  background:linear-gradient(90deg, rgba(6,10,12,.72) 0%, rgba(6,10,12,.28) 52%, rgba(6,10,12,0) 100%),
             linear-gradient(0deg, rgba(6,10,12,.34), transparent 60%);
}
.photo-section .panel{ z-index:3; }

@media (max-width:760px){
  .photo-section.reveal-side.left, .photo-section.reveal-side.right{ justify-content:center; }
  .photo-section .sec-bg::after{ background:linear-gradient(0deg, rgba(6,10,12,.8), rgba(6,10,12,.38)) !important; }
  .hero-pins{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .hero-photo{ animation:none; transform:scale(1.04); }
  .hero-rays{ animation:none; }
  .pin-dot{ animation:none; }
  .hero-pin{ animation:none; opacity:1; }
}