:root{
    --cream:#FAF4E6;
    --cream-2:#F2E9D4;
    --green-deep:#153A2B;
    --green-mid:#2C6B4A;
    --green-soft:#DCEAE0;
    --gold:#CB9A3B;
    --gold-light:#E9C170;
    --gold-deep:#A9782A;
    --ink:#1C2A20;
    --ink-soft:#5B6A5E;
    --white:#FFFFFF;
    --radius-lg: 32px;
    --radius-md: 20px;
    --radius-sm: 14px;
    --shadow: 0 14px 34px rgba(21,58,43,0.12);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; overflow-x:hidden; -webkit-overflow-scrolling:touch;}  
  body{
    font-family:'Nunito', sans-serif;
    background:var(--cream);
    color:var(--ink);
    line-height:1.5;
  }
  h1,h2,h3,h4,.display{
    font-family:'Baloo 2', sans-serif;
    color:var(--green-deep);
    line-height:1.08;
  }
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}
  img,svg{display:block; max-width:100%;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
  section{position:relative;}

  /* ---------- watermark (fixed background, stays put on scroll) ---------- */
  .site-watermark{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    will-change:transform;
  }
  .site-watermark svg{
    width:min(1500px, 145vw); height:auto; opacity:0.16;
  }
  /* every real section of the page sits above the watermark
     (header is excluded here on purpose — it already sets its own
     position:sticky + z-index below, and this rule would override it) */
  body > section, body > footer{ position:relative; z-index:1; }

  /* ---------- reveal animation ---------- */
  .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
  }

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 28px; border-radius:999px; font-family:'Baloo 2';
    font-weight:600; font-size:1rem; cursor:pointer; border:2px solid transparent;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space:nowrap;
  }
  .btn:hover{transform:translateY(-3px);}
  .btn-primary{background:var(--green-deep); color:var(--white); box-shadow:0 10px 22px rgba(21,58,43,0.28);}
  .btn-primary:hover{background:#1c4a37;}
  .btn-gold{background:linear-gradient(135deg, var(--gold-light), var(--gold-deep)); color:var(--green-deep); box-shadow:0 10px 22px rgba(203,154,59,0.35);}
  .btn-outline{background:transparent; border-color:var(--green-deep); color:var(--green-deep);}
  .btn-outline:hover{background:var(--green-deep); color:var(--white);}
  .btn-sm{padding:11px 20px; font-size:.92rem;}

  /* ---------- nav ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(250,244,230,0.9); backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(21,58,43,0.08);
    will-change:transform;
  }
  nav{display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
  .logo{display:flex; align-items:center; gap:10px; font-family:'Baloo 2'; font-weight:800; font-size:1.5rem; color:var(--green-deep);}
  .logo .blob{width:38px; height:38px;}
  .nav-links{display:flex; align-items:center; gap:34px; font-weight:700; color:var(--ink);}
  .nav-links a{position:relative; padding:4px 0;}
  .nav-links a::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:3px; background:var(--gold); border-radius:3px; transition:width .25s ease;}
  .nav-links a:hover::after{width:100%;}
  .nav-cta{display:flex; align-items:center; gap:14px;}
  .menu-toggle{
    display:none; flex-direction:column; justify-content:center; gap:5px;
    cursor:pointer; background:none; border:none; width:30px; height:24px; padding:0;
  }
  .menu-toggle span{width:26px; height:3px; background:var(--green-deep); border-radius:3px; transition:transform .25s ease, opacity .2s ease;}

  /* ---------- mobile drawer ---------- */
  .drawer-overlay{
    position:fixed; inset:0; background:rgba(21,58,43,0.45);
    opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:150;
  }
  .drawer-overlay.open{opacity:1; pointer-events:auto;}
  .mobile-drawer{
    position:fixed; top:0; right:0; height:100vh; width:min(300px, 80vw);
    background:var(--cream); box-shadow:-14px 0 34px rgba(21,58,43,0.18);
    z-index:200; padding:28px 26px; display:flex; flex-direction:column; gap:26px;
    transform:translateX(100%); transition:transform .3s ease;
  }
  .mobile-drawer.open{transform:translateX(0);}
  .drawer-close{
    align-self:flex-end; background:none; border:none; font-size:1.8rem; line-height:1;
    color:var(--green-deep); cursor:pointer; padding:4px;
  }
  .drawer-links{display:flex; flex-direction:column; gap:6px;}
  .drawer-links a{
    display:block; padding:12px 6px; font-family:'Baloo 2'; font-weight:700;
    font-size:1.1rem; color:var(--green-deep); border-bottom:1px solid var(--cream-2);
  }
  .drawer-whatsapp{justify-content:center; margin-top:auto;}

  /* ---------- hero ---------- */
  .hero{padding:74px 0 90px;}
  .hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--green-soft); color:var(--green-mid);
    font-family:'Baloo 2'; font-weight:700; font-size:.82rem; letter-spacing:.06em;
    padding:8px 16px; border-radius:999px; text-transform:uppercase; margin-bottom:22px;
  }
  .eyebrow::before{content:'✦'; color:var(--gold);}
  .motto{font-size:clamp(2.1rem, 4.4vw, 3.4rem); font-weight:700; margin-bottom:6px;}
  .motto-line{display:flex; align-items:baseline; gap:2px;}
  .motto-line .cap{
    font-size:1.28em; font-weight:800; color:var(--gold-deep);
    -webkit-text-stroke: 0.5px var(--gold-deep);
  }
  .motto-sub{color:var(--ink-soft); font-size:1.08rem; max-width:520px; margin:22px 0 32px;}
  .hero-btns{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px;}
  .hero-note{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--green-mid); font-size:.92rem;}
  .hero-note .dot{width:8px; height:8px; border-radius:50%; background:var(--gold); display:inline-block;}

  /* hero illustration */
  .hero-art{position:relative;}
  .art-card{
    background:var(--green-deep); border-radius:var(--radius-lg);
    padding:26px; box-shadow:var(--shadow); position:relative; overflow:visible;
  }
  .art-card svg{border-radius:var(--radius-md); background:linear-gradient(160deg,#1d5a41,#0e2c20);}
  .img-placeholder {
    aspect-ratio: 480 / 360;
    overflow: hidden;
    border-radius: 16px;
  }

  .img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .badge-float{
    position:absolute; background:var(--white); border-radius:20px; padding:14px 18px;
    box-shadow:0 12px 26px rgba(21,58,43,0.18); display:flex; align-items:center; gap:10px;
    font-family:'Baloo 2'; font-weight:700; font-size:.92rem; color:var(--green-deep);
  }
  .badge-float.b1{ top:-24px; right:-18px;}
  .badge-float.b2{ bottom:-22px; left:-22px;}
  .badge-float .ico{width:30px; height:30px; flex:none;}

  @keyframes floaty{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
  .badge-float{animation:floaty 4.5s ease-in-out infinite;}
  .badge-float.b2{animation-delay:1.2s;}

  /* ---------- feature strip ---------- */
  .features{padding:20px 0 70px;}
  .feature-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
  .feature-item{display:flex; gap:14px; align-items:flex-start;}
  .feature-item .ico-circle{width:52px; height:52px; flex:none;}
  .feature-item h4{font-size:1.02rem; margin-bottom:4px;}
  .feature-item p{font-size:.88rem; color:var(--ink-soft);}

  /* ---------- facilities ---------- */
  .facilities{
    background:rgba(21,58,43,0.93); backdrop-filter: blur(0.5px);
    border-radius:var(--radius-lg);
    margin:0 24px; padding:64px 44px; position:relative; overflow:hidden;
  }
  .facilities::before{
    content:''; position:absolute; width:340px; height:340px; border-radius:50%;
    background:radial-gradient(circle, rgba(203,154,59,0.25), transparent 70%);
    top:-140px; right:-100px;
  }
  .section-head{text-align:center; max-width:640px; margin:0 auto 46px; position:relative; z-index:1;}
  .section-head .eyebrow{background:rgba(255,255,255,0.12); color:var(--gold-light);}
  .section-head h2{color:var(--white); font-size:clamp(1.6rem,3vw,2.3rem);}
  .facilities .section-head p{color:rgba(255,255,255,0.72); margin-top:10px;}
  .facility-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; position:relative; z-index:1;}
  .facility-card{
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
    border-radius:var(--radius-md); padding:26px 16px; text-align:center;
    transition:transform .25s ease, background .25s ease;
  }
  .facility-card:hover{transform:translateY(-6px); background:rgba(255,255,255,0.1);}
  .facility-card .ico-blob{width:66px; height:66px; margin:0 auto 16px;}
  .facility-card h4{color:var(--white); font-size:.98rem; margin-bottom:4px;}
  .facility-card p{color:rgba(255,255,255,0.62); font-size:.82rem;}

  /* ---------- why echo ---------- */
  .why{padding:100px 0;}
  .why-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
  .tag-cloud{display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 26px;}
  .tag{
    background:var(--white); border:1.5px solid var(--green-soft); color:var(--green-mid);
    font-weight:700; font-size:.85rem; padding:8px 16px; border-radius:999px;
  }
  .quote{
    font-family:'Baloo 2'; font-weight:600; font-size:1.2rem; color:var(--green-deep);
    border-left:4px solid var(--gold); padding-left:18px; margin-top:8px;
  }
  .why-art{
    background:linear-gradient(160deg, var(--cream-2), var(--green-soft));
    border-radius:var(--radius-lg); padding:10px; box-shadow:var(--shadow);
  }
  .why-art .img-placeholder {
    overflow: hidden;
    border-radius: 16px;
  }
  .why-art .img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  } 

  /* ---------- plans ---------- */
  .plans{padding:40px 0 100px;}
  .plans-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:10px;}
  .plan-card{
    background:var(--white); border-radius:var(--radius-md); padding:40px 26px;
    border:1.5px solid var(--cream-2); position:relative; display:flex; flex-direction:column;
    align-items:center; text-align:center; gap:16px; justify-content:center;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .plan-card:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
  .plan-card.featured{border-color:var(--gold); box-shadow:0 16px 36px rgba(203,154,59,0.22);}
  .plan-tag{
    display:inline-block; font-family:'Baloo 2'; font-weight:700; font-size:.75rem;
    padding:6px 14px; border-radius:999px; margin-bottom:16px; align-self:flex-start;
    background:var(--green-soft); color:var(--green-mid); text-transform:uppercase; letter-spacing:.04em;
    margin-bottom:0;
  }
  .plan-card.featured .plan-tag{background:linear-gradient(135deg,var(--gold-light),var(--gold-deep)); color:var(--green-deep);}
  .plan-card h3{font-size:1.5rem; margin-bottom:6px;}
  .plan-price{font-family:'Baloo 2'; font-weight:800; font-size:1.5rem; color:var(--gold-deep); margin-bottom:0;}
  .plan-price .strike{
    font-size:.85rem; font-weight:600; color:var(--ink-soft);
    text-decoration:line-through; text-decoration-color:var(--ink-soft); margin-right:6px;
  }
  .plan-card ul{margin-bottom:26px; flex:1;}
  .plan-card li{display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:var(--ink); margin-bottom:10px;}
  .plan-card li::before{content:'✓'; color:var(--green-mid); font-weight:900;}
  .plan-card .btn{width:100%; justify-content:center;}

  /* ---------- visit / contact ---------- */
  .visit{
    background:var(--cream-2); border-radius:var(--radius-lg); margin:0 24px 90px; padding:56px 44px;
  }
  .visit-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:50px;}
  .visit-info h2{font-size:1.7rem; margin-bottom:14px;}
  .visit-info p{color:var(--ink-soft); margin-bottom:22px;}
  .info-row{display:flex; gap:12px; align-items:flex-start; margin-bottom:18px;}
  .info-row .ico-circle{width:38px; height:38px; flex:none;}
  .info-row strong{display:block; font-family:'Baloo 2'; color:var(--green-deep); font-size:.95rem;}
  .info-row span{color:var(--ink-soft); font-size:.88rem;}
  .visit-btns{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px;}

  .form-card{background:var(--white); border-radius:var(--radius-md); padding:30px; box-shadow:var(--shadow);}
  .form-card h3{font-size:1.2rem; margin-bottom:4px;}
  .form-card > p{color:var(--ink-soft); font-size:.88rem; margin-bottom:20px;}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
  input, select{
    width:100%; padding:13px 16px; border-radius:12px; border:1.5px solid var(--cream-2);
    background:var(--cream); font-family:'Nunito'; font-size:.94rem; color:var(--ink);
  }
  input:focus, select:focus{outline:2px solid var(--gold-light); border-color:var(--gold);}
  .form-card .btn{width:100%; justify-content:center; margin-top:6px;}

  /* ---------- footer ---------- */
  footer{padding:25px 0 15px;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:36px;}
  .footer-logo {
    display: flex;
    align-items: center;
  }

  .footer-logo img {
    margin: 15px;
    width: 80px;
    height: auto;
    display: block;
  }
  footer p{color:var(--ink-soft); font-size:.9rem; max-width:320px;}
  footer h4{font-size:.95rem; margin-bottom:14px; color:var(--green-deep);}
  footer li{margin-bottom:10px;}
  footer a{color:var(--ink-soft); font-size:.9rem;}
  footer a:hover{color:var(--gold-deep);}
  .footer-bottom{
    border-top:1px solid var(--cream-2); padding-top:22px; display:flex; justify-content:space-between;
    flex-wrap:wrap; gap:12px; font-size:.85rem; color:var(--ink-soft);
  }

  /* ---------- responsive ---------- */
  @media (min-width: 981px){
    /* belt-and-braces: the drawer/overlay must never be visible on desktop,
       even if a resize happened while it was open on mobile */
    .mobile-drawer, .drawer-overlay{display:none;}
  }
  @media (max-width: 980px){
    .hero-grid, .why-grid, .visit-grid{grid-template-columns:1fr;}
    .why-grid{gap:36px;}
    .feature-grid{grid-template-columns:repeat(2,1fr);}
    .facility-grid{grid-template-columns:repeat(2,1fr);}
    .plans-grid{grid-template-columns:repeat(2,1fr);}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .nav-links{display:none;}
    .nav-whatsapp-desktop{display:none;}
    .menu-toggle{display:flex;}
  }
  @media (max-width: 560px){
    .wrap{padding:0 18px;}
    .form-row{grid-template-columns:1fr;}
    .facilities, .visit{margin:0 12px; padding:44px 22px;}
    .footer-grid{grid-template-columns:1fr;}
    .hero-btns .btn{width:100%; justify-content:center;}
  }