@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --cream:#f8f3e9;
  --paper:#fffaf2;
  --navy:#052744;
  --green:#195b28;
  --river:#2487bd;
  --gold:#c8a05a;
  --ink:#142b3a;
  --muted:#61707a;
  --line:#d8cbb7;
}

*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,Arial,sans-serif;line-height:1.55}
a{color:inherit}

.site-header{
  position:sticky;top:0;z-index:50;background:rgba(248,243,233,.96);
  box-shadow:0 8px 30px rgba(5,39,68,.08);
}
.topline{
  display:flex;justify-content:center;gap:28px;padding:8px 20px;background:var(--navy);color:white;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
}
.topline a{text-decoration:none}
.navrow{
  display:flex;align-items:center;justify-content:space-between;padding:18px 5vw;position:relative;
}
.navrow.single{border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-icon{
  width:50px;height:50px;border-radius:50%;border:2px solid var(--green);position:relative;display:block;background:white;
}
.brand-icon .peak{position:absolute;left:12px;top:11px;width:26px;height:18px;background:var(--navy);clip-path:polygon(0 100%,35% 30%,48% 55%,70% 0,100% 100%)}
.brand-icon .water{position:absolute;left:14px;top:30px;width:24px;height:9px;background:var(--river);clip-path:polygon(0 40%,100% 0,70% 50%,100% 100%,0 70%)}
.brand-text b{font-family:Cinzel,serif;text-transform:uppercase;letter-spacing:.18em;font-size:22px;color:var(--navy);display:block;line-height:1}
.brand-text small{font-family:Cinzel,serif;text-transform:uppercase;letter-spacing:.22em;color:var(--green);font-weight:700}
nav{display:flex;gap:28px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--navy);align-items:center}
nav a{text-decoration:none}
nav a.nav-book{background:var(--green);color:white;padding:10px 18px;border-radius:999px;letter-spacing:.1em}
nav a.nav-book:hover{background:#0f4520}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--navy);transition:transform .2s, opacity .2s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.hero{height:78vh;min-height:640px;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;color:white;overflow:hidden}
.hero-image{position:absolute;inset:0;background:url('assets/patio_home.jpg') center/cover no-repeat;filter:saturate(1.05) contrast(1.05)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,39,68,.35),rgba(5,39,68,.68))}
.hero-content{position:relative;z-index:2;width:min(960px,90%);padding-top:40px}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-weight:800;font-size:12px;margin:0 0 14px}
.green{color:var(--green)}
.hero h1{font-family:Cinzel,serif;font-size:clamp(46px,7vw,92px);line-height:1.04;margin:0 0 18px;letter-spacing:.04em}
.hero p{font-size:20px;max-width:780px;margin:0 auto 30px;color:#f5f1e9}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;padding:13px 22px;border-radius:999px;text-decoration:none;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.btn.primary{background:var(--green);color:white}
.btn.secondary{border:1px solid rgba(255,255,255,.7);color:white;background:rgba(255,255,255,.08)}

.section{padding:82px 6vw}
.welcome{text-align:center;max-width:980px;margin:0 auto}
.script-title{font-family:Cormorant Garamond,serif;font-style:italic;font-size:34px;color:var(--green)}
h2{font-family:Cinzel,serif;font-size:clamp(34px,4vw,58px);line-height:1.08;margin:0;color:var(--navy)}
.welcome p{font-family:Cormorant Garamond,serif;font-size:27px;color:#445763;margin:20px auto 0;max-width:790px}
.divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:20px auto;color:var(--green)}
.divider span{width:120px;height:1px;background:var(--green)}
.divider.light span{background:white}.divider.light{color:white}

.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:20px 6vw 88px}
.feature-cards.two-col{grid-template-columns:repeat(2,1fr);padding-top:0}
.feature-cards article{background:white;box-shadow:0 18px 45px rgba(5,39,68,.12)}
.feature-cards img{width:100%;height:290px;object-fit:cover;display:block}
.feature-cards div{padding:25px}
h3{font-family:Cinzel,serif;color:var(--navy);font-size:24px;margin:0 0 10px}
.feature-cards p,.split-copy p,.activity-grid p,.local-grid p,.guide-callout p,.contact p{color:var(--muted);margin:0}

.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center;background:var(--paper)}
.split-copy ul{margin:24px 0 0;padding-left:18px}
.split-copy li{padding:7px 0}
.image-stack{position:relative;min-height:520px}
.image-stack .main{width:78%;height:455px;object-fit:cover;box-shadow:0 18px 45px rgba(5,39,68,.22)}
.image-stack .small{position:absolute;right:0;bottom:0;width:48%;height:245px;object-fit:cover;border:10px solid var(--paper);box-shadow:0 18px 35px rgba(5,39,68,.18)}

.dark-section{background:var(--navy);color:white;padding:86px 6vw}
.section-head{text-align:center;max-width:850px;margin:0 auto 36px}
.section-head.light h2,.section-head.light .eyebrow{color:white}
.activity-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.activity-grid article{border:1px solid rgba(255,255,255,.22);padding:26px;background:rgba(255,255,255,.06)}
.activity-grid h3{color:white}
.activity-grid p{color:#d9e4ea}

.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}
.gallery img{width:100%;height:260px;object-fit:cover}
.gallery img:first-child{grid-row:span 2;height:534px}

.guide-callout{margin:20px 6vw 70px;padding:42px;background:var(--navy);color:white;display:flex;align-items:center;justify-content:space-between;gap:30px}
.guide-callout h2,.guide-callout .eyebrow{color:white}
.guide-callout p{color:#d9e4ea;max-width:680px}

.contact{text-align:center;background:var(--paper)}
.contact a{font-weight:800;color:var(--green)}

footer{position:relative;background:var(--navy);min-height:340px;overflow:hidden;color:white;display:flex;align-items:flex-end;justify-content:center;text-align:center}
.footer-art{position:absolute;inset:0}
.mountains{position:absolute;left:0;right:0;bottom:94px;height:130px;background:linear-gradient(180deg,#7393aa,#dde9f0);clip-path:polygon(0 100%,7% 55%,13% 82%,20% 35%,31% 78%,39% 42%,50% 84%,62% 24%,73% 80%,84% 36%,92% 78%,100% 50%,100% 100%);opacity:.85}
.trees{position:absolute;left:0;right:0;bottom:76px;height:145px;background:linear-gradient(90deg,var(--green),#103c1b,var(--green));clip-path:polygon(0 100%,0 50%,4% 78%,7% 42%,11% 88%,15% 48%,19% 82%,23% 44%,28% 90%,33% 54%,38% 86%,44% 45%,50% 88%,56% 58%,62% 84%,68% 38%,74% 89%,80% 50%,86% 86%,92% 42%,97% 74%,100% 60%,100% 100%)}
.river-shape{position:absolute;left:0;right:0;bottom:0;height:105px;background:linear-gradient(180deg,#0d456f,#041b31)}
.river-shape:after{content:"";position:absolute;left:45%;top:-28px;width:210px;height:90px;background:var(--river);clip-path:polygon(10% 0,100% 0,60% 24%,86% 49%,44% 72%,68% 100%,0 100%,34% 70%,12% 42%,48% 20%)}
.footer-content{position:relative;z-index:2;padding:0 20px 30px}
.footer-content h2{color:white}
.footer-content p{margin:6px 0}

/* Guide */
.guide-body{background:var(--paper)}
.guide-hero{text-align:center;padding:86px 6vw 40px}
.guide-hero h1{font-family:Cinzel,serif;font-size:64px;color:var(--navy);margin:0}
.guide-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:30px 6vw 90px}
.guide-list article{background:white;padding:28px;border-left:6px solid var(--green);box-shadow:0 14px 34px rgba(5,39,68,.10)}
.compact-footer{min-height:auto;padding:35px;display:block}.compact-footer h2{color:white;font-size:28px}

.lightbox{position:fixed;inset:0;background:rgba(5,15,25,.94);display:none;align-items:center;justify-content:center;z-index:9999;padding:40px}
.lightbox.open{display:flex}
.lightbox .lb-image{max-width:95vw;max-height:90vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox button{position:absolute;background:rgba(0,0,0,.45);color:white;border:none;border-radius:50%;width:54px;height:54px;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.lightbox button:hover{background:rgba(0,0,0,.75)}
.lightbox .lb-close{top:20px;right:20px;font-size:34px;line-height:1}
.lightbox .lb-prev{left:20px;top:50%;transform:translateY(-50%)}
.lightbox .lb-next{right:20px;top:50%;transform:translateY(-50%)}
.lightbox .lb-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.8);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
@media(max-width:600px){
  .lightbox{padding:10px}
  .lightbox button{width:44px;height:44px;font-size:20px}
  .lightbox .lb-prev{left:8px}.lightbox .lb-next{right:8px}
}

@media(max-width:900px){
  .topline{display:none}
  .navrow{padding:14px 18px}
  .nav-toggle{display:flex}
  nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);flex-direction:column;gap:0;padding:8px 0;box-shadow:0 12px 30px rgba(5,39,68,.12);border-top:1px solid var(--line)}
  nav.open{display:flex}
  nav a{padding:14px 24px;font-size:14px;border-bottom:1px solid rgba(5,39,68,.06)}
  nav a:last-child{border-bottom:none}
  .brand-text b{font-size:18px}
  .brand-text small{font-size:11px}
  .brand-icon{width:42px;height:42px}
  .brand-icon .peak{left:9px;top:9px;width:22px;height:15px}
  .brand-icon .water{left:11px;top:25px;width:20px;height:8px}

  .hero{min-height:520px;height:auto;padding:60px 0}
  .hero h1{font-size:clamp(34px,8vw,52px)}
  .hero p{font-size:17px;padding:0 20px}
  .hero-content{padding-top:0}

  .section{padding:56px 5vw}
  .dark-section{padding:60px 5vw}
  .welcome p{font-size:21px}

  .feature-cards,.feature-cards.two-col{grid-template-columns:1fr;padding:16px 5vw 56px;gap:18px}
  .feature-cards img{height:240px}

  .split{grid-template-columns:1fr;gap:28px;padding:56px 5vw}
  .image-stack{min-height:auto}
  .image-stack .main,.image-stack .small{position:static;width:100%;height:260px;margin-bottom:14px}

  .activity-grid{grid-template-columns:1fr;gap:14px}

  .gallery{grid-template-columns:1fr 1fr;gap:8px}
  .gallery img,.gallery img:first-child{height:180px;grid-row:auto}

  .guide-callout{display:block;margin:16px 5vw 50px;padding:28px}
  .guide-callout .btn{margin-top:18px}

  .guide-hero{padding:60px 5vw 24px}
  .guide-hero h1{font-size:42px}
  .guide-list,.recommendation-grid{grid-template-columns:1fr;padding:20px 5vw 60px;gap:16px}
  .guide-list article,.recommendation-grid article{padding:22px}

  footer{min-height:280px}
  .footer-content h2{font-size:28px}
}

@media(max-width:480px){
  .hero h1{font-size:34px}
  .hero p{font-size:16px}
  h2{font-size:28px}
  .gallery{grid-template-columns:1fr;gap:10px}
  .gallery img,.gallery img:first-child{height:240px}
  .feature-cards img{height:220px}
}


.guide-recommendations{
  padding:30px 6vw 95px;
  background:var(--paper);
}
.recommendation-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.recommendation-grid article{
  background:white;
  padding:28px;
  border-left:6px solid var(--green);
  box-shadow:0 14px 34px rgba(5,39,68,.10);
}
.recommendation-grid h3{
  margin-bottom:18px;
}
.recommendation-grid p{
  color:var(--muted);
  margin:0 0 16px;
}
@media(max-width:900px){
  .recommendation-grid{grid-template-columns:1fr}
}