/* Lake Sch-Nepp-A-Ho Family Campground — concept redesign (Oculus Studio)
   Palette + type sampled from their logo + own CSS. Signature: STILLWATER RIPPLE. */

/* ---------- Fonts (self-hosted woff2) ---------- */
@font-face{font-family:'Petrona';src:url('fonts/petrona-var.woff2') format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap;}
@font-face{font-family:'Kaushan Script';src:url('fonts/kaushan-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/hanken-var.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;}

/* ---------- Tokens ---------- */
:root{
  --sage:#789084;          /* logo emblem */
  --sage-deep:#566b5f;     /* AA on cream/white */
  --sage-deeper:#4f6357;   /* CTA / links */
  --pine:#12312e;          /* dark band */
  --petrol:#013b4f;        /* their CSS deep teal */
  --petrol-2:#0e2a2b;      /* deeper dark band */
  --cream:#f6f1e6;         /* their #f1ebe0 family */
  --cream-2:#efe8d8;
  --paper:#fdfbf6;
  --ink:#20261f;           /* warm charcoal text */
  --ink-soft:#4a534624;
  --lake:#3f6f7a;          /* muted lake teal accent */
  --red:#b10000;           /* their real Check-Availability btn-red — reserved */
  --red-2:#8f0000;
  --line:rgba(86,107,95,.22);
  --shadow:0 14px 34px -18px rgba(18,49,46,.45);
  --shadow-sm:0 6px 18px -12px rgba(18,49,46,.5);
  --wrap:1180px;
  --r:16px;
  --disp:'Petrona',Georgia,serif;
  --script:'Kaushan Script',cursive;
  --ui:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
img{max-width:100%;height:auto;display:block}
body{
  margin:0;font-family:var(--ui);color:var(--ink);background:var(--cream);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:1.12;margin:0 0 .4em;color:var(--pine)}
a{color:var(--sage-deeper);text-decoration-thickness:1.5px;text-underline-offset:2px}
p{margin:0 0 1em}
.script{font-family:var(--script);font-weight:400}
:focus-visible{outline:3px solid var(--lake);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--pine);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------- Kicker + hexagon motif ---------- */
.kicker{font-family:var(--ui);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  font-size:.74rem;color:var(--sage-deep);display:inline-flex;align-items:center;gap:.55em;margin:0 0 .5em}
.hex{width:13px;height:14px;flex:0 0 auto;
  background:var(--sage);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:inline-block}
.kicker.on-dark{color:#cfe0d3}.kicker.on-dark .hex{background:#a9c2ac}

/* ---------- Stillwater ripple signature ---------- */
.ripple{position:relative;display:block;height:22px;margin:.2rem 0 1.4rem}
.ripple span{position:absolute;left:0;top:50%;width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--sage);transform:translateY(-50%) scale(.15);opacity:0}
.ripple.on-dark span{border-color:#8fb0a0}
.center .ripple span{left:50%;margin-left:-8px}
@keyframes rippleout{0%{transform:translateY(-50%) scale(.15);opacity:.85}
  70%{opacity:.35}100%{transform:translateY(-50%) scale(1);opacity:0}}
.ripple.go span:nth-child(1){animation:rippleout 2.6s ease-out .0s 1 forwards}
.ripple.go span:nth-child(2){animation:rippleout 2.6s ease-out .5s 1 forwards;width:30px;height:30px;margin-top:0}
.ripple.go span:nth-child(3){animation:rippleout 2.6s ease-out 1s 1 forwards;width:46px;height:46px}
.center .ripple.go span:nth-child(2){margin-left:-15px}
.center .ripple.go span:nth-child(3){margin-left:-23px}
/* static resting rings (reduced-motion / no-js) */
.ripple.static span{opacity:.4;transform:translateY(-50%) scale(1)}
.ripple.static span:nth-child(2){width:30px;height:30px}
.ripple.static span:nth-child(3){width:46px;height:46px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--ui);font-weight:700;
  border:0;cursor:pointer;border-radius:999px;padding:.85em 1.5em;font-size:1rem;line-height:1;
  text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn-book{background:var(--red);color:#fff;box-shadow:0 10px 22px -12px rgba(177,0,0,.7)}
.btn-book:hover{background:var(--red-2)}
.btn-primary{background:var(--sage-deeper);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--pine)}
.btn-ghost{background:transparent;color:var(--pine);border:1.6px solid var(--line)}
.btn-ghost.on-dark{color:#f3efe3;border-color:rgba(255,255,255,.4)}
.btn-lg{padding:1em 1.8em;font-size:1.06rem}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(253,251,246,.92);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:18px;height:72px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;text-decoration:none}
.brand img{height:46px;width:auto}
.brand b{font-family:var(--script);font-size:1.32rem;color:var(--pine);font-weight:400;line-height:1;white-space:nowrap}
.brand small{display:block;font-family:var(--ui);font-weight:700;letter-spacing:.14em;font-size:.56rem;
  text-transform:uppercase;color:var(--sage-deep);margin-top:2px}
.nav{display:flex;align-items:center;gap:24px}
.nav a{font-family:var(--ui);font-weight:600;color:var(--pine);text-decoration:none;font-size:.96rem;white-space:nowrap;position:relative}
.nav a:not(.btn):hover{color:var(--sage-deeper)}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--sage);
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.nav a:not(.btn):hover::after,.nav a.active::after{transform:scaleX(1)}
.navtoggle{display:none;background:none;border:1.6px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer}
.navtoggle span{display:block;width:22px;height:2px;background:var(--pine);margin:4px 0}
.callpill{font-weight:700;color:var(--pine);text-decoration:none;white-space:nowrap}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;overflow:hidden;background:var(--pine)}
.hero-slides{position:absolute;inset:0}
.hero-slides .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;
  transition:opacity 1.4s ease}
.hero-slides .slide.on{opacity:1}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,28,26,.28) 0%,rgba(10,28,26,.06) 34%,rgba(10,28,26,.62) 100%)}
.hero-in{position:relative;z-index:2;padding:0 0 clamp(34px,6vw,72px);color:#fff}
.hero .script-name{font-family:var(--script);font-size:clamp(1.6rem,4.4vw,2.7rem);color:#fdf2c9;margin-bottom:.1em;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.hero h1{color:#fff;font-size:clamp(2.5rem,6.6vw,5rem);letter-spacing:-.01em;text-shadow:0 3px 26px rgba(0,0,0,.42);max-width:16ch}
.hero p.lede{font-size:clamp(1.05rem,2.2vw,1.32rem);max-width:44ch;color:#f2f0e6;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:.55em;background:rgba(253,251,246,.94);color:var(--pine);
  font-family:var(--ui);font-weight:700;font-size:.86rem;border-radius:999px;padding:.5em .95em;margin-bottom:16px}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(177,0,0,.2)}
.chip.closed .dot{background:#9a9a9a;box-shadow:0 0 0 4px rgba(154,154,154,.22)}

/* ---------- Sections ---------- */
section{padding:clamp(48px,7vw,88px) 0}
.section-head{max-width:60ch}
.section-head.center{margin:0 auto;text-align:center}
h2.big{font-size:clamp(2rem,4.4vw,3.1rem)}
.lead{font-size:1.14rem;color:#3c4740}
.band-cream{background:var(--cream)}
.band-paper{background:var(--paper)}
.band-cream2{background:var(--cream-2)}
.band-pine{background:var(--pine);color:#eef1ea}
.band-pine h2,.band-pine h3{color:#fff}
.band-pine .lead{color:#cfd8ce}
.band-petrol{background:var(--petrol);color:#eaf2f2}
.band-petrol h2,.band-petrol h3{color:#fff}

/* welcome */
.welcome-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.welcome-grid .ph{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.welcome-grid .ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.sign{font-family:var(--script);font-size:1.5rem;color:var(--sage-deeper);margin-top:.2em}

/* ---------- Estimator (centerpiece) ---------- */
.est-wrap{max-width:960px;margin:0 auto}
.est{background:var(--paper);border-radius:22px;box-shadow:var(--shadow);border:1px solid var(--line);
  overflow:hidden;display:grid;grid-template-columns:1.25fr .9fr}
.est-form{padding:clamp(22px,3vw,34px)}
.est-side{background:linear-gradient(170deg,var(--pine),var(--petrol-2));color:#eef2ec;padding:clamp(22px,3vw,34px);position:relative;overflow:hidden}
.fld{margin-bottom:18px}
.fld label{display:block;font-weight:700;font-size:.9rem;color:var(--pine);margin-bottom:7px}
.fld .hint{font-weight:500;color:#6a7268;font-size:.8rem}
select,input[type=number]{width:100%;font-family:var(--ui);font-size:1rem;color:var(--ink);
  background:#fff;border:1.6px solid var(--line);border-radius:12px;padding:.72em .8em;appearance:none}
select:focus,input:focus{border-color:var(--sage-deep)}
.selectwrap{position:relative}
.selectwrap::after{content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;border-right:2px solid var(--sage-deep);
  border-bottom:2px solid var(--sage-deep);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.lake-badge{display:inline-flex;align-items:center;gap:.4em;font-size:.72rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--lake);background:rgba(63,111,122,.1);border-radius:999px;padding:.25em .6em;margin-left:.5em}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stepper{display:flex;align-items:center;gap:0;border:1.6px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.stepper button{width:44px;height:46px;border:0;background:var(--cream);color:var(--pine);font-size:1.3rem;cursor:pointer;line-height:1}
.stepper button:hover{background:var(--sage);color:#fff}
.stepper input{border:0;text-align:center;border-radius:0;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
.toggles{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.tg{display:flex;align-items:center;gap:11px;font-weight:600;font-size:.95rem;cursor:pointer;color:var(--pine)}
.tg input{position:absolute;opacity:0;width:0;height:0}
.tg .sw{width:44px;height:25px;border-radius:999px;background:#cfcabc;position:relative;transition:background .18s;flex:0 0 auto}
.tg .sw::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tg input:checked+.sw{background:var(--sage-deeper)}
.tg input:checked+.sw::after{transform:translateX(19px)}
.tg input:disabled+.sw{opacity:.4}
.tg.disabled{opacity:.5;cursor:not-allowed}
.est-note{font-size:.82rem;color:#6a7268;margin-top:2px}

/* estimate side / receipt */
.est-side .kicker{color:#cfe0d3}
.est-side .kicker .hex{background:#a9c2ac}
.est-total{font-family:var(--disp);font-weight:800;font-size:clamp(2.6rem,6vw,3.5rem);line-height:1;margin:.1em 0 .1em;
  transition:transform .3s ease}
.est-total.bump{transform:scale(1.05)}
.est-total .cur{font-size:.5em;vertical-align:.55em;margin-right:.05em}
.est-sub{color:#bcd0c2;font-size:.92rem;margin-bottom:16px}
.est-lines{list-style:none;margin:0 0 8px;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.16);font-size:.9rem}
.est-lines li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;color:#dfe8de}
.est-lines li.free{color:#a9e0b6}
.est-lines li.disc{color:#a9e0b6}
.est-lines li span:last-child{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.est-lines li.grand{border-top:1px solid rgba(255,255,255,.16);margin-top:8px;padding-top:12px;font-weight:800;color:#fff;font-size:1.05rem}
.est-side .btn-book{width:100%;justify-content:center;margin-top:14px}
.est-disclaim{font-size:.76rem;color:#a9b8ab;margin-top:14px;line-height:1.5}
.est-flag{background:rgba(255,255,255,.08);border-left:3px solid #dfb64a;padding:9px 12px;border-radius:8px;font-size:.82rem;color:#f0e6c9;margin-top:12px}
/* ripple layer inside receipt */
.est-side .rip{position:absolute;pointer-events:none;border:1.5px solid rgba(143,176,160,.6);border-radius:50%;
  width:20px;height:20px;left:34px;top:64px;transform:translate(-50%,-50%) scale(.2);opacity:0}
.est-side .rip.go{animation:rippleout 2.4s ease-out forwards}

/* ---------- Rate cards / site types ---------- */
.rate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.rate-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease}
.rate-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.rate-card h3{font-size:1.14rem;margin-bottom:.15em}
.rate-card .price{font-family:var(--disp);font-weight:800;font-size:1.9rem;color:var(--sage-deeper);line-height:1}
.rate-card .price small{font-size:.5em;font-weight:600;color:#6a7268}
.rate-card .meta{font-size:.85rem;color:#5a6358;margin-top:8px}

/* ---------- Amenity / activity chips ---------- */
.amen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.amen{display:flex;align-items:flex-start;gap:11px;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px}
.amen .hex{margin-top:6px}
.taglist{display:flex;flex-wrap:wrap;gap:10px}
.tag{background:rgba(120,144,132,.13);color:var(--sage-deeper);border-radius:999px;padding:.42em .9em;font-weight:600;font-size:.9rem}
.band-pine .tag{background:rgba(255,255,255,.1);color:#dfe8de}

/* feature (camper rental) */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.feature .ph{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.feature .ph img{width:100%;aspect-ratio:3/2;object-fit:cover}
.feature ul{list-style:none;padding:0;margin:.6em 0}
.feature ul li{padding:5px 0 5px 26px;position:relative}
.feature ul li::before{content:"";position:absolute;left:0;top:12px;width:11px;height:12px;background:var(--sage);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* ---------- Gallery ---------- */
.gal{columns:4;column-gap:12px}
.gal img{width:100%;margin-bottom:12px;border-radius:12px;break-inside:avoid;box-shadow:var(--shadow-sm);
  transition:transform .25s ease,box-shadow .25s ease}
.gal img:hover{transform:scale(1.02);box-shadow:var(--shadow)}

/* ---------- Reviews ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.rev{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-sm)}
.rev p{font-family:var(--disp);font-style:italic;font-size:1.06rem;color:#33403a;margin-bottom:.7em}
.rev .who{font-weight:700;color:var(--sage-deeper);font-family:var(--ui);font-style:normal}
.stars{color:#dfb64a;letter-spacing:2px;margin-bottom:.5em}

/* ---------- Location ---------- */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.loc-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-sm)}
.loc-card .li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line)}
.loc-card .li:last-child{border-bottom:0}
.loc-card .li b{display:block;color:var(--pine)}
.nearby{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}

/* ---------- Footer ---------- */
footer{background:var(--petrol-2);color:#cfd8ce;padding:56px 0 30px}
footer a{color:#dfe8de}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;margin-bottom:34px}
.foot-brand img{height:52px;margin-bottom:12px}
.foot h4{color:#fff;font-family:var(--ui);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;margin-bottom:14px}
.foot ul{list-style:none;padding:0;margin:0}
.foot ul li{margin-bottom:9px}
.foot-badges{display:flex;gap:14px;align-items:center;margin-top:14px}
.foot-badges img{height:44px;width:auto;background:#fff;border-radius:8px;padding:5px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:20px;font-size:.85rem;color:#9fb0a3;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

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

/* ---------- Sticky mobile call/book bar ---------- */
.mobilebar{display:none}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .est{grid-template-columns:1fr}
  .welcome-grid,.feature,.loc-grid{grid-template-columns:1fr;gap:26px}
  .gal{columns:3}
}
@media(max-width:820px){
  .nav{position:absolute;top:72px;left:0;right:0;background:var(--paper);flex-direction:column;align-items:stretch;
    gap:0;padding:8px 0;border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none}
  .nav.open{display:flex}
  .nav a:not(.btn){padding:13px 22px}
  .nav a:not(.btn)::after{display:none}
  .nav .btn{margin:10px 22px}
  .navtoggle{display:block;margin-left:auto}
  .callpill{display:none}          /* phone lives in the bottom bar + footer on mobile */
  .brand small{display:none}
  .brand b{font-size:1.12rem}
  .brand img{height:40px}
  .gal{columns:2}
  body{padding-bottom:64px}
  .mobilebar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:120;background:var(--paper);
    border-top:1px solid var(--line);box-shadow:0 -8px 24px -14px rgba(0,0,0,.4)}
  .mobilebar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.5em;padding:15px 8px;
    font-family:var(--ui);font-weight:700;text-decoration:none;font-size:.98rem}
  .mobilebar a.call{color:var(--pine)}
  .mobilebar a.book{background:var(--red);color:#fff}
}
@media(max-width:560px){
  .row2{grid-template-columns:1fr}
  .gal{columns:2}
  .foot-grid{grid-template-columns:1fr;gap:24px}
  .est-total{font-size:2.8rem}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .hero-slides .slide{transition:none}
  .ripple span,.est-side .rip{animation:none!important}
  .ripple span{opacity:.4;transform:translateY(-50%) scale(1)}
  .ripple span:nth-child(2){width:30px;height:30px}.ripple span:nth-child(3){width:46px;height:46px}
}