/* Monoski Estates rebuild – tokens matched to live site (Avada theme) */
:root{
  --teal:#064e5f; --teal-btn:#1d4e5f; --black:#000; --text:#000; --grey:#333;
  --box:#e5e5e5; --line:#c4c4c4; --sand:#e2b68c; --sand-2:#f0d3b6; --sand-3:#f8e8d8;
  --ok:#12b878; --err:#db4b68; --max:1440px;
  --serif:"Playfair Display",Georgia,serif; --sans:"Raleway",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:20px;letter-spacing:.3px;line-height:1.4;color:var(--text);background:#fff}
img{max-width:100%;display:block}
a{color:var(--teal)}
.container{width:min(var(--max),100% - 32px);margin-inline:auto}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--black);line-height:1.2}
h1{font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.015em}
h2{font-size:clamp(2rem,4vw,3rem);letter-spacing:-.015em}
h3{font-size:27px;margin-bottom:.4em}

/* Header: matches live Avada header v1 (absolute over hero, 86% white, not sticky) */
.site-header{position:absolute;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.86);box-shadow:0 10px 50px -2px rgba(0,0,0,.14)}
.nav{display:flex;align-items:flex-start;justify-content:space-between;height:137px;width:100%;max-width:none;padding:0 30px;margin:0}
.logo{display:block;margin-top:5px;margin-bottom:-31px;flex-shrink:0}
.logo img{width:200px;height:auto}
.nav-links{display:flex;list-style:none;height:125px;margin:0}
.nav-links li{padding-right:29px;height:100%}
.nav-links li:last-child{padding-right:0}
.nav-links a{display:flex;align-items:center;height:125px;border-top:4px solid transparent;font-family:var(--serif);font-size:22px;line-height:22px;letter-spacing:.33px;color:var(--teal);text-decoration:none;white-space:nowrap;transition:color .2s,border-color .2s}
.nav-links a:hover,.nav-links a.active{color:#83b39e;border-top-color:#83b39e}
.nav-toggle{display:none;background:none;border:0;font-size:2rem;color:var(--teal);cursor:pointer;margin-top:40px}

/* Hero image band + slider */
.hero{position:relative;height:clamp(360px,54vw,640px);overflow:hidden;background:#cfd8d6}
.hero .slide{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity 1.2s}
.hero .slide.on{opacity:1}
.hero.short{height:clamp(300px,34vw,460px)}

/* Wave dividers (sand, copied from live Avada "waves opacity" separators) */
.wave{display:block;width:100%;height:111px}
.wave+.content{margin-top:-75px;position:relative}
.wave.bottom{height:68px;margin-bottom:-1px}

/* Content */
.content{text-align:center;padding:40px 0 60px}
.content h1{margin-bottom:10px}
.content .sub{font-weight:700;font-size:18px;margin-bottom:12px}
.content p{max-width:1400px;margin:0 auto 14px}
.content em{font-weight:700}
.stack h3{margin-top:18px}
.stack p{margin-bottom:0}
.bullets{list-style:none;margin:10px 0 18px}
.bullets li::before{content:"• "}
.content .btn{margin-top:20px}

/* Grey rounded form/testimonial box */
.box{background:var(--box);border-radius:18px;padding:44px 50px;margin:30px auto;text-align:left}
.box h2{text-align:center;margin-bottom:30px}
.box .intro{text-align:center;margin:-10px 0 30px}
label{display:block;font-size:17px;margin:0 0 8px}
input,textarea{width:100%;padding:12px 14px;border:1px solid #9fc3b5;border-radius:4px;font:inherit;font-size:17px;background:#fff;margin-bottom:22px}
input:focus,textarea:focus{outline:2px solid var(--teal)}
textarea{min-height:120px;resize:vertical}
.cf-turnstile{margin-bottom:22px}
.btn{display:inline-block;background:var(--teal-btn);color:#fff;border:0;border-radius:3px;padding:12px 30px;font-family:system-ui,sans-serif;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--teal)}
.text-link{display:inline-block;margin-top:10px;color:#000;text-decoration:none}
.text-link:hover{color:var(--teal)}
.form-note{display:none;margin-top:10px;padding:12px 16px;border-radius:4px;background:rgba(18,184,120,.1);color:var(--ok);font-size:16px}
.form-note.error{background:rgba(219,75,104,.1);color:var(--err)}

/* Testimonial slider */
.tslider{position:relative}
.tslide{display:none}
.tslide.on{display:block}
.tslide blockquote{background:#dadada;padding:22px 26px;font-style:italic;font-size:18px;position:relative}
.tslide blockquote::after{content:"";position:absolute;left:24px;bottom:-14px;border:14px solid transparent;border-top-color:#dadada;border-bottom:0}
.tslide .who{margin-top:26px;font-size:17px}
.tslide .who strong{font-weight:700}
.dots{display:flex;gap:8px;justify-content:center;margin-top:24px}
.dots button{width:10px;height:10px;border-radius:50%;border:1px solid #333;background:transparent;cursor:pointer}
.dots button.on{background:#000}

/* Contact details */
.contact-list{list-style:none;margin:18px 0}
.contact-list li{margin:6px 0}

/* Footer */
.site-footer{background:#000;color:#fff;font-size:13px;padding:34px 0}
.site-footer .container{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.site-footer a{color:#fff;text-decoration:none;font-weight:700}
.socials{display:flex;gap:18px}
.socials a{font-weight:400;font-size:15px}
.to-top{position:fixed;right:24px;bottom:0;width:36px;height:26px;background:#333;color:#fff;border-radius:4px 4px 0 0;display:grid;place-items:center;text-decoration:none;font-size:14px;z-index:40;opacity:0;pointer-events:none;transition:opacity .2s}
.scrolled .to-top{opacity:1;pointer-events:auto}

@media (max-width:1280px){
  .nav-links li{padding-right:18px} .nav-links a{font-size:18px}
  .logo img{width:160px}
}
@media (max-width:900px){
  body{font-size:17px}
  .nav{height:96px;padding:0 16px;align-items:center}
  .logo{margin:0;min-width:0;flex-shrink:1;overflow:hidden} .logo img{width:auto;height:84px;max-width:60vw}
  .nav-toggle{flex-shrink:0}
  .nav-toggle{display:block;margin:0}
  .nav-links{display:none;position:absolute;top:96px;left:0;right:0;height:auto;background:#fff;flex-direction:column;padding:12px 24px;box-shadow:0 8px 16px rgba(0,0,0,.08)}
  .nav-links.open{display:flex}
  .nav-links li{padding:0;height:auto}
  .nav-links a{height:auto;padding:12px 0;border-top:0;font-size:20px}
  .box{padding:28px 20px}
  .wave{height:70px} .wave+.content{margin-top:-45px} .wave.bottom{height:44px}
}