/* ============================================================
   Lomas de Tzununá — rebuilt to the legacy brand system
   Brand green #008149 · top bar #365067 · Raleway / Roboto / Pacifico
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Pacifico&display=swap');

:root{
  /* brand */
  --green:#008149; --green-dark:#006b3d; --topbar:#365067;
  /* aliases kept so existing markup keeps working */
  --clay:#008149; --clay-dark:#006b3d;
  --lake:#008149; --lake-deep:#006b3d; --volcano:#365067;
  /* neutrals */
  --ink:#333333; --body:#777777; --muted:#777777; --soft:#999999;
  --bg:#ffffff; --alt:#fafafa; --sand:#fafafa; --cream:#ffffff; --paper:#ffffff;
  --line:#ededed;
  /* effects */
  --shadow:0 14px 38px -20px rgba(54,80,103,.42);
  --shadow-sm:0 6px 18px -12px rgba(54,80,103,.4);
  /* type */
  --serif:'Raleway',system-ui,sans-serif;     /* display / headings */
  --sans:'Roboto',system-ui,sans-serif;        /* body / labels */
  --logo:'Pacifico',cursive;
  --wrap:1170px; --radius:5px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--sans); color:var(--body);
  background:var(--bg); line-height:1.73; font-weight:400; font-size:15px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}

h1,h2,h3,h4{font-family:var(--serif); color:var(--ink); line-height:1.2; margin:0 0 .45em; font-weight:600}
h1{font-size:clamp(1.9rem,4vw,2.7rem); font-weight:700}
h2{font-size:clamp(1.45rem,2.8vw,1.95rem); font-weight:600; letter-spacing:.01em}
h3{font-size:1.2rem; font-weight:600}
p{margin:0 0 1.1em}
em{font-style:italic; color:inherit}

/* ---------- helpers ---------- */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 15px}
.section{padding:clamp(48px,7vw,84px) 0}
.section--tight{padding:clamp(36px,5vw,60px) 0}
.bg-sand{background:var(--alt)}                       /* light alternating */
.bg-lake{background:var(--green); color:#fff}          /* green section */
.bg-ink{background:var(--topbar); color:#fff}
.bg-lake h1,.bg-lake h2,.bg-lake h3,.bg-lake h4,.bg-ink h2,.bg-ink h3,.banner h2{color:#fff}
.bg-lake p,.bg-ink p{color:rgba(255,255,255,.92)}
.center{text-align:center}
.lead{font-size:1.05rem; color:var(--body); max-width:64ch; font-weight:400}
.center .lead{margin-left:auto;margin-right:auto}
.bg-lake .lead,.bg-ink .lead{color:rgba(255,255,255,.92)}
.eyebrow{font-family:var(--serif); font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  font-size:.72rem; color:var(--green); margin:0 0 1rem; display:block}
.bg-lake .eyebrow,.bg-ink .eyebrow,.hero .eyebrow,.pagehero .eyebrow,.banner .eyebrow{color:rgba(255,255,255,.85)}
.divider{width:48px; height:3px; background:var(--green); border:0; margin:1.2rem 0}
.bg-lake .divider,.banner .divider{background:#fff}
.center .divider{margin-left:auto;margin-right:auto}
.tina{font-size:.84rem; color:var(--soft)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.5em; font-family:var(--serif); font-weight:600; font-size:.82rem;
  letter-spacing:.05em; text-transform:uppercase; padding:.85em 1.7em; border-radius:3px;
  border:2px solid transparent; transition:.25s var(--ease); white-space:nowrap}
.btn--primary{background:var(--green); color:#fff}
.btn--primary:hover{background:var(--green-dark); transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.btn--ghost{border-color:var(--green); color:var(--green); background:transparent}
.btn--ghost:hover{background:var(--green); color:#fff}
/* ghost on dark imagery */
.hero .btn--ghost,.pagehero .btn--ghost,.banner .btn--ghost{border-color:#fff; color:#fff}
.hero .btn--ghost:hover,.pagehero .btn--ghost:hover,.banner .btn--ghost:hover{background:#fff; color:var(--green-dark)}
.bg-lake .btn--primary{background:#fff; color:var(--green-dark)}
.bg-lake .btn--primary:hover{background:rgba(255,255,255,.9)}
.btn--lg{padding:1em 2.1em; font-size:.86rem}

/* ============================================================
   HEADER — top utility bar + sticky nav
   ============================================================ */
.site-header{position:relative; z-index:200; background:#fff}

.topbar{background:var(--topbar); color:rgba(255,255,255,.82); font-size:.8rem}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; height:42px; gap:16px}
.topbar__contact{display:flex; gap:20px; align-items:center; flex-wrap:wrap}
.topbar__contact a{display:inline-flex; align-items:center; gap:.4em}
.topbar a:hover{color:#fff}
.topbar__social{display:flex; gap:8px}
.topbar__social a{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.3); font-size:.7rem; font-weight:600; transition:.25s}
.topbar__social a:hover{background:var(--green); border-color:var(--green); color:#fff}

.bar{position:sticky; top:0; z-index:200; background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--wrap); margin:0 auto; padding:0 15px; height:79px}
/* full-bleed white behind the sticky bar */
.site-header .bar{box-shadow:0 1px 0 var(--line)}

.brand{display:flex; align-items:center; gap:12px}
.brand img{height:46px; width:auto}
.brand-logo{font-family:var(--logo); font-size:1.7rem; color:var(--green); line-height:1; padding-top:6px}

.nav{display:flex; align-items:center; gap:2px}
.nav a,.nav .navlink{position:relative; font-family:var(--serif); color:var(--ink); font-size:.93rem; font-weight:500;
  letter-spacing:.01em; padding:.6em .85em; border-radius:4px; transition:.2s; background:none; border:0}
.nav a:not(.btn):hover,.nav .navlink:hover,.nav a.active:not(.btn){color:var(--green)}
.nav a:not(.btn)::after,.nav .navlink::after{content:""; position:absolute; left:.85em; right:.85em; bottom:.45em;
  height:2px; background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease)}
.nav a:not(.btn):hover::after,.nav .navlink:hover::after,.nav a.active:not(.btn)::after{transform:scaleX(1)}
.nav .btn--book{margin-left:10px; color:#fff; font-size:.74rem; padding:.7em 1.3em}

.has-drop{position:relative}
.dropdown{position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(8px);
  background:#fff; border-radius:4px; box-shadow:var(--shadow); padding:8px; min-width:225px;
  opacity:0; visibility:hidden; transition:.25s var(--ease); border:1px solid var(--line)}
.has-drop:hover .dropdown,.has-drop.open .dropdown{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.dropdown a{display:block; color:var(--ink); padding:.55em .85em; border-radius:4px; font-size:.9rem}
.dropdown a::after{display:none}
.dropdown a:hover{background:var(--alt); color:var(--green)}

.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; z-index:220}
.nav-toggle span{width:26px; height:2px; background:var(--ink); transition:.3s}
.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)}

@media(max-width:980px){
  .topbar__contact a:not(:first-child){display:none}
  .nav-toggle{display:flex}
  .nav{position:fixed; inset:0 0 0 auto; width:min(86vw,360px); background:#fff;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:2px;
    padding:90px 22px 32px; transform:translateX(100%); transition:.4s var(--ease);
    box-shadow:var(--shadow); overflow-y:auto}
  .nav.open{transform:translateX(0)}
  .nav a,.nav .navlink{font-size:1rem; padding:.85em .6em; text-align:left}
  .nav a:not(.btn)::after,.nav .navlink::after{display:none}
  .dropdown{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; border-left:2px solid var(--green); border-radius:0; margin:0 0 6px 8px; padding:0 0 0 8px; display:none}
  .has-drop.open .dropdown{display:block}
  .nav .btn--book{margin:14px 0 0; justify-content:center}
}

/* ============================================================
   HERO (home) — panoramic slider; the image carries the wordmark
   ============================================================ */
.hero{position:relative; height:clamp(500px,76vh,800px); color:#fff; display:flex; align-items:flex-end; overflow:hidden}
.hero__slides{position:absolute; inset:0}
.hero__slide{position:absolute; inset:0; background-size:cover; background-position:center 38%;
  opacity:0; transition:opacity 1.4s var(--ease)}
.hero__slide.active{opacity:1}
.hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,.66) 100%)}
.hero__inner{position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; padding:0 15px 8vh; width:100%}
.hero__tag{font-family:var(--serif); font-weight:300; font-size:clamp(1.25rem,2.6vw,1.9rem); line-height:1.3;
  color:#fff; max-width:24ch; margin:0 0 1.4em; text-shadow:0 2px 20px rgba(0,0,0,.4)}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap}
.hero__dots{position:absolute; bottom:26px; right:26px; z-index:3; display:flex; gap:9px}
.hero__dots button{width:10px; height:10px; border-radius:50%; border:1.5px solid #fff; background:transparent; padding:0; transition:.3s}
.hero__dots button.active{background:#fff; transform:scale(1.25)}
@media(max-width:980px){.hero__dots{right:16px}}

/* ============================================================
   PAGE BANNER (interior) — full-width image, centered white H1
   ============================================================ */
.pagehero{position:relative; min-height:46vh; display:flex; align-items:center; color:#fff; overflow:hidden; background:var(--green-dark)}
.pagehero__bg{position:absolute; inset:0; background-size:cover; background-position:center}
.pagehero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.6))}
.pagehero__inner{position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; padding:90px 15px 70px; width:100%; text-align:center}
.pagehero h1{color:#fff; text-transform:uppercase; letter-spacing:.04em}
.pagehero .crumbs{font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; opacity:.85; margin-bottom:1rem}
.pagehero .crumbs a:hover{color:#fff; text-decoration:underline}
.pagehero p{max-width:62ch; margin:.4em auto 0; opacity:.95; font-size:1.02rem}

/* ============================================================
   QUICK LINKS (home) — 164px icon circles, 5 across
   ============================================================ */
.quicklinks{display:grid; grid-template-columns:repeat(5,1fr); gap:18px}
.qlink{display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px}
.qlink__circle{width:164px; height:164px; max-width:100%; aspect-ratio:1; border-radius:50%;
  background-size:cover; background-position:center; box-shadow:var(--shadow-sm);
  border:4px solid #fff; outline:1px solid var(--line); transition:transform .3s var(--ease)}
.qlink:hover .qlink__circle{transform:scale(1.1)}
.qlink__label{font-family:var(--serif); font-weight:600; font-size:.98rem; color:var(--ink);
  text-transform:uppercase; letter-spacing:.04em; transition:color .25s}
.qlink:hover .qlink__label{color:var(--green)}
@media(max-width:980px){.quicklinks{grid-template-columns:repeat(3,1fr); gap:26px}}
@media(max-width:560px){.quicklinks{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   SPLIT
   ============================================================ */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,70px); align-items:center}
.split--reverse .split__media{order:2}
.split__media{position:relative}
.split__media img{width:100%; height:100%; min-height:320px; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow)}
.split__media .tag{position:absolute; bottom:-18px; left:-18px; background:var(--green); color:#fff;
  font-family:var(--serif); font-weight:600; font-size:.9rem; text-transform:uppercase; letter-spacing:.05em;
  padding:12px 20px; border-radius:3px; box-shadow:var(--shadow-sm)}
@media(max-width:820px){.split{grid-template-columns:1fr} .split--reverse .split__media{order:0} .split__media .tag{left:0}}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.review{background:#fff; border-radius:var(--radius); padding:32px 28px; box-shadow:var(--shadow-sm); border:1px solid var(--line)}
.bg-lake .review{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#fff}
.review .stars{color:#f0a836; letter-spacing:2px; font-size:.95rem; margin-bottom:12px}
.review h4{font-size:1.18rem; font-weight:600; margin-bottom:.5em; color:var(--ink)}
.bg-lake .review h4{color:#fff}
.review p{font-size:.95rem; color:var(--body); margin:0}
.bg-lake .review p{color:rgba(255,255,255,.9)}
.review .src{margin-top:14px; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--green); font-weight:600}
.bg-lake .review .src{color:rgba(255,255,255,.85)}
@media(max-width:880px){.reviews{grid-template-columns:1fr}}

/* ============================================================
   FEATURES / AMENITIES (icon circles)
   ============================================================ */
.features{display:grid; grid-template-columns:repeat(2,1fr); gap:28px 46px}
.feature{display:flex; gap:20px; align-items:flex-start}
.feature__ico{flex:0 0 64px; width:64px; height:64px; border-radius:50%; background:var(--green); overflow:hidden;
  display:grid; place-items:center; transition:transform .3s var(--ease)}
.feature__ico img{width:100%; height:100%; object-fit:cover; display:block}
.feature:hover .feature__ico{transform:scale(1.1)}
.feature h3{font-size:1.2rem; margin-bottom:.25em}
.feature p{font-size:.95rem; color:var(--body); margin:0}
.feature a{color:var(--green); font-weight:600}
@media(max-width:760px){.features{grid-template-columns:1fr; gap:24px}}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:10px}
.gallery a{overflow:hidden; border-radius:var(--radius); position:relative}
.gallery img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.gallery a::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.5); opacity:0; transition:opacity .3s}
.gallery a:hover img{transform:scale(1.08)}
.gallery a:hover::after{opacity:1}
.gallery .tall{grid-row:span 2}
.gallery .wide{grid-column:span 2}
@media(max-width:880px){.gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:160px}}

/* ============================================================
   BANNER (parallax CTA / dive-in)
   ============================================================ */
.banner{position:relative; color:#fff; text-align:center; overflow:hidden}
.banner__bg{position:absolute; inset:0; background-size:cover; background-position:center; background-attachment:fixed}
.banner::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.55)}
.banner__inner{position:relative; z-index:2; max-width:760px; margin:0 auto; padding:clamp(64px,10vw,130px) 24px}
.banner h2{color:#fff}
.banner p{font-size:1.08rem; opacity:.95}
@media(max-width:820px){.banner__bg{background-attachment:scroll}}

/* ============================================================
   PRICING TABLE
   ============================================================ */
.pricing{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line)}
.pricing th,.pricing td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--line)}
.pricing thead th{background:var(--green); color:#fff; font-family:var(--serif); font-weight:600; letter-spacing:.06em; font-size:.78rem; text-transform:uppercase}
.pricing tbody tr:last-child td{border-bottom:0}
.pricing tbody tr:hover{background:var(--alt)}
.pricing .room{font-family:var(--serif); font-weight:600; font-size:1.05rem; color:var(--ink)}
.pricing .usd{font-weight:700; color:var(--green-dark); font-size:1.05rem; font-family:var(--serif)}
.pricing .gtq{color:var(--soft); font-size:.9rem}
.includes{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0}
.includes li{background:#fff; border:1px solid var(--line); border-radius:50px; padding:.5em 1.1em; font-size:.84rem; display:flex; align-items:center; gap:.5em; color:var(--ink)}
.includes li::before{content:"✓"; color:var(--green); font-weight:700}
.bg-lake .includes li{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); color:#fff}
.bg-lake .includes li::before{color:#fff}

/* ============================================================
   MENU
   ============================================================ */
.menu-grid{columns:2; column-gap:54px}
.menu-cat{break-inside:avoid; margin-bottom:34px}
.menu-cat h3{color:var(--green-dark); text-transform:uppercase; letter-spacing:.05em; border-bottom:2px solid var(--line); padding-bottom:.35em; margin-bottom:.7em}
.menu-item{display:flex; justify-content:space-between; gap:12px; padding:.4em 0; align-items:baseline}
.menu-item .nm{font-weight:500; color:var(--ink)}
.menu-item .ds{display:block; font-size:.84rem; color:var(--soft); font-weight:400}
.menu-item .pr{font-family:var(--serif); font-weight:700; font-size:1rem; color:var(--green-dark); white-space:nowrap}
.menu-dots{flex:1; border-bottom:1px dotted var(--line); transform:translateY(-4px); margin:0 4px}
.hours{display:flex; gap:28px; flex-wrap:wrap; justify-content:center; margin:10px 0 0}
.hours div{text-align:center}
.hours .h-lbl{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--green); font-family:var(--serif); font-weight:600}
.hours .h-val{font-family:var(--serif); font-weight:600; font-size:1.2rem; color:var(--ink)}
@media(max-width:760px){.menu-grid{columns:1}}

/* ============================================================
   CARDS (events / safety)
   ============================================================ */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.cards--3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); display:flex; flex-direction:column; transition:.3s var(--ease)}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.card__img{height:200px; background-size:cover; background-position:center; background-color:var(--green); position:relative}
.card__img::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,0); transition:.3s}
.card:hover .card__img::after{background:rgba(0,0,0,.18)}
.card__body{padding:24px 24px 26px}
.card__body h3{margin-bottom:.35em}
.card__body p{font-size:.94rem; color:var(--body)}
.capacity{display:inline-flex; align-items:center; gap:.5em; background:var(--alt); border:1px solid var(--line); border-radius:50px; padding:.4em 1em; font-size:.8rem; font-weight:500; margin-top:6px; color:var(--green-dark)}
.capacity::before{content:""; width:14px; height:14px; margin-right:.15em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23006b3d'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E") center/contain no-repeat; display:inline-block}
@media(max-width:860px){.cards,.cards--3{grid-template-columns:1fr}}

/* ============================================================
   ACTIVITIES (filter grid)
   ============================================================ */
.filterbar{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:40px}
.filterbar button{background:#fff; border:1px solid var(--line); color:var(--ink); padding:.6em 1.4em; border-radius:50px; font-family:var(--serif); font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; transition:.2s}
.filterbar button:hover{border-color:var(--green); color:var(--green)}
.filterbar button.active{background:var(--green); color:#fff; border-color:var(--green)}
.activities{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.act{background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); transition:.3s var(--ease); display:flex; flex-direction:column}
.act:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.act__img{height:150px; background-size:cover; background-position:center; background-image:linear-gradient(135deg,var(--green),var(--topbar)); position:relative}
.act__img .cat{position:absolute; top:12px; left:12px; background:#fff; color:var(--green-dark); font-family:var(--serif); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; padding:.4em .9em; border-radius:50px}
.act__body{padding:18px 20px 22px}
.act__body h3{font-size:1.12rem; margin-bottom:.3em}
.act__body p{font-size:.9rem; color:var(--body); margin:0}
.act.hide{display:none}
@media(max-width:920px){.activities{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.activities{grid-template-columns:1fr}}

/* ============================================================
   STEPS / NOTE / RATES
   ============================================================ */
.steps{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-sm)}
.step .num{font-family:var(--serif); font-weight:700; font-size:2.4rem; color:var(--green); line-height:1; margin-bottom:.2em}
.note-box{background:var(--alt); border-left:4px solid var(--green); border-radius:4px; padding:20px 24px; margin-top:28px}
.note-box strong{color:var(--green-dark)}
.rates{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; max-width:760px; margin:0 auto}
.rate{display:flex; justify-content:space-between; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 24px; box-shadow:var(--shadow-sm)}
.rate .rate__n{font-family:var(--serif); font-weight:600; font-size:1.1rem; color:var(--ink)}
.rate .rate__p{font-family:var(--serif); font-weight:700; color:var(--green-dark); white-space:nowrap}
.rate small{display:block; color:var(--soft); font-size:.8rem; font-weight:400; font-family:var(--sans)}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
@media(max-width:620px){.rates{grid-template-columns:1fr}}

/* ============================================================
   FORMS
   ============================================================ */
.form{display:grid; gap:14px}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form input,.form textarea{width:100%; font-family:inherit; font-size:.95rem; padding:13px 15px; border-radius:4px; border:1px solid var(--line); background:#fff; color:var(--ink); transition:.2s}
.bg-lake .form input,.bg-lake .form textarea{background:rgba(0,0,0,.18); border:1px solid #1f9123; color:#fff}
.bg-lake .form ::placeholder{color:rgba(255,255,255,.7)}
.form input:focus,.form textarea:focus{outline:0; border-color:var(--green); box-shadow:0 0 0 3px rgba(0,129,73,.16)}
.bg-lake .form input:focus,.bg-lake .form textarea:focus{border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.form textarea{min-height:130px; resize:vertical}
.mapframe{border:0; width:100%; height:100%; min-height:340px; border-radius:var(--radius)}

/* ============================================================
   FOOTER (green)
   ============================================================ */
.site-footer{background:var(--green); color:rgba(255,255,255,.82); padding:64px 0 26px; font-size:.92rem}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:46px}
.site-footer h4{color:#fff; font-family:var(--logo); font-size:1.5rem; font-weight:400; margin-bottom:.4em}
.site-footer .ft-h{font-family:var(--serif)!important; font-size:.92rem!important; font-weight:600!important; letter-spacing:.16em; text-transform:uppercase; color:#fff!important}
.site-footer .ft-lede{max-width:34ch; color:rgba(255,255,255,.8)}
.site-footer a:hover{color:#fff}
.ft-links,.ft-contact{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.ft-contact li{display:flex; gap:10px; align-items:flex-start}
.ft-contact .ico{opacity:.9}
.ft-social{display:flex; gap:10px; margin-top:20px}
.ft-social a{width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.35); display:grid; place-items:center; transition:.25s; font-size:.85rem; font-weight:600}
.ft-social a:hover{background:#fff; border-color:#fff; color:var(--green-dark); transform:translateY(-3px)}
.ft-bottom{margin-top:48px; padding-top:22px; border-top:1px solid rgba(255,255,255,.2); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:rgba(255,255,255,.7); font-size:.82rem}
.ft-foot-title{font-family:var(--logo)}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr; gap:32px}}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* ---------- misc ---------- */
.prose p{max-width:70ch; color:var(--body)}
.prose.center p{margin-left:auto; margin-right:auto}
.pill-list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.pill-list li{display:flex; gap:12px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:13px 18px; font-size:.93rem; color:var(--ink)}
.pill-list li::before{content:""; flex:0 0 auto; width:18px; height:18px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23008149'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75C7 8 17 8 17 8z'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:620px){.pill-list,.split--reverse .pill-list{grid-template-columns:1fr}}