/* ============================================
   CHUPITOS — Global Stylesheet v3
   CSS-only foliage. No SVG files, no JS for visuals.
   Update colours in :root to cascade everywhere.
   ============================================ */
:root {
  --green-dark:  #033B14;
  --green-deep:  #011a09;
  --green-mid:   #005C4A;
  --green-light: #C6D87C;
  --orange:      #F2664F;
  --pink:        #F0609F;
  --purple:      #4F4D9E;
  --cream:       #FAEDD1;
  --teal:        #0DB8AB;
  --sand:        #E5B587;
  --olive:       #797825;

  --font-display:'Clash Display','DM Sans',sans-serif;
  --font-body:   'DM Sans',Arial,sans-serif;
  --section-pad: clamp(4rem,8vw,8rem);
  --container:   1200px;
  --radius:      1.5rem;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--green-dark);color:var(--cream);overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.05}
h1{font-size:clamp(3.5rem,9vw,9rem);font-weight:700}
h2{font-size:clamp(2.4rem,5.5vw,4rem);font-weight:700}
h3{font-size:clamp(1.4rem,3vw,2rem);font-weight:700}
p{line-height:1.8;font-size:clamp(1.1rem,1.6vw,1.25rem)}
.container{max-width:var(--container);margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem)}
.btn{display:inline-block;padding:.85rem 2rem;border-radius:3rem;font-family:var(--font-display);font-weight:600;font-size:1rem;cursor:pointer;border:none;transition:transform .2s,box-shadow .2s,background .2s;letter-spacing:.02em}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.btn-orange{background:var(--orange);color:var(--cream)}
.btn-orange:hover{background:#e0553e}
.btn-cream{background:var(--cream);color:var(--green-dark)}
.btn-outline{background:transparent;border:2px solid var(--cream);color:var(--cream)}
.btn-outline:hover{background:var(--cream);color:var(--green-dark)}
.btn-purple{background:var(--purple);color:var(--cream)}
.section-label{font-family:var(--font-display);font-size:1.1rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;display:block;margin-bottom:.75rem}

/* ============================================
   CSS FOLIAGE SYSTEM
   All leaves, blobs, and organic shapes are pure CSS.
   Each .leaf variant replicates a different foliage type
   from the Chupitos brand pattern artwork.
   ============================================ */

/* Base leaf element */
.leaf {
  position: absolute;
  pointer-events: none;
  will-change: transform;
}

/* Leaf shape variants — all based on real tropical foliage silhouettes */
/* Monstera deliciosa — split leaf with holes suggested by notch cutouts */
.lf-monstera {
  clip-path: polygon(50% 0%, 80% 8%, 100% 38%, 88% 55%, 96% 82%, 72% 100%, 50% 88%, 52% 68%, 32% 80%, 12% 66%, 4% 38%, 22% 12%);
}
/* Long narrow banana/heliconia leaf */
.lf-banana {
  border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
  transform-origin: bottom center;
}
/* Classic tropical heart-leaf */
.lf-tropical {
  border-radius: 50% 0% 50% 0% / 0% 50% 0% 50%;
}
/* Soft organic alocasia form */
.lf-organic {
  border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
}
/* Rounded blob leaf — calathea-like */
.lf-blob {
  border-radius: 55% 45% 45% 55% / 55% 55% 45% 45%;
}
/* Pointed spear leaf — snake plant / sanseveria */
.lf-petal {
  clip-path: polygon(50% 0%, 95% 40%, 75% 100%, 25% 100%, 5% 40%);
}
/* Curved asymmetric leaf — anthurium */
.lf-wave {
  border-radius: 80% 20% 55% 45% / 40% 60% 40% 60%;
}
/* Wide base tapering to point — alocasia/caladium */
.lf-alocasia {
  clip-path: polygon(50% 0%, 85% 30%, 95% 65%, 75% 100%, 25% 100%, 5% 65%, 15% 30%);
}
/* Oval rounded — pothos leaf */
.lf-round {
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
/* Teardrop — single large leaf */
.lf-teardrop {
  clip-path: polygon(50% 0%, 90% 35%, 85% 70%, 65% 95%, 35% 95%, 15% 70%, 10% 35%);
}
/* Narrow elongated — palm frond segment */
.lf-palm {
  border-radius: 50% 50% 30% 30% / 80% 80% 20% 20%;
  transform: scaleX(0.35);
}
/* Ruffled edge — philodendron */
.lf-ruffled {
  border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
}
/* Broad flat — elephant ear */
.lf-fern {
  border-radius: 50% 50% 40% 40% / 55% 55% 45% 45%;
}

/* ============================================
   CHARACTER ILLUSTRATIONS
   Placed as decorative accents throughout page.
   All have transparent backgrounds.
   ============================================ */
.chupi {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,.25));
}
/* Hero characters — larger, anchored to bottom edges */
.chupi-hero-l {
  width: clamp(180px,22vw,380px);
  bottom: 0;
  left: 0;
  animation: charFloat 6s ease-in-out infinite;
}
.chupi-hero-r {
  width: clamp(160px,18vw,300px);
  bottom: 0;
  right: 0;
  animation: charFloat 7s ease-in-out infinite 1s;
}
/* About section character — visible watermark */
.chupi-about {
  width: clamp(160px,18vw,300px);
  bottom: 0;
  right: 0;
  opacity: .2;
  z-index: 0;
}
/* CTA band characters */
.chupi-cta {
  width: clamp(120px,14vw,240px);
  bottom: 0;
  left: 5%;
  animation: charFloat 5s ease-in-out infinite 0.5s;
}
.chupi-cta-r {
  width: clamp(110px,13vw,220px);
  bottom: 0;
  right: 5%;
  animation: charFloat 6s ease-in-out infinite 1.5s;
}
/* Footer character — height-capped so head always shows */
.chupi-footer {
  width: auto;
  height: clamp(140px,18vh,260px);
  bottom: 0;
  right: 10%;
  opacity: .55;
}
/* Contact section */
.chupi-contact {
  width: clamp(120px,14vw,220px);
  bottom: 0;
  right: 0;
  opacity: .22;
  z-index: 0;
}

@keyframes charFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(1.5deg); }
}

/* Mobile — shrink all characters, push to edges, keep behind content */
@media(max-width:768px){
  /* Named class characters */
  .chupi-hero-l  { width: 18vw; opacity: .7; }
  .chupi-hero-r  { width: 16vw; opacity: .7; }
  .chupi-about   { width: 18vw; opacity: .12; }
  .chupi-cta     { width: 16vw; left: 1%; }
  .chupi-cta-r   { width: 15vw; right: 1%; }
  .chupi-footer  { height: clamp(90px,14vh,140px); width:auto; right:3%; opacity:.4; }
  .chupi-contact { width: 16vw; opacity: .15; }

  /* Section-specific inline characters — override via class */
  /* Dance in menu section: tiny, hugs left edge */
  .chupi-menu {
    width: 16vw !important;
    left: 0 !important;
    opacity: .35;
    z-index: 1;
  }
  /* Lion in What's On: small, bottom-right corner */
  .chupi-whatson {
    width: 18vw !important;
    right: 0 !important;
    opacity: .4;
    z-index: 1;
  }
  /* Ricky in Gallery: small, bottom-left corner */
  .chupi-gallery {
    width: 18vw !important;
    left: 0 !important;
    opacity: .4;
    z-index: 1;
  }
}

/* ============================================
   PATTERN TILE ACCENTS
   Used as band/border image at section edges
   ============================================ */
.pattern-band {
  width: 100%;
  height: 120px;
  background-image: url('assets/pattern.jpg');
  background-size: auto 120px;
  background-repeat: repeat-x;
  background-position: center;
  opacity: .35;
  pointer-events: none;
}
.pattern-band-top    { margin-bottom: -4px; }
.pattern-band-bottom { margin-top: -4px; }
.menu-word {
  text-decoration: none;
  display: inline-block;
  position: relative;
}
.menu-word::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 0;
  height: 4px;
  background: currentColor;
  transition: width 0.3s ease;
  border-radius: 2px;
}
.menu-word:hover::after { width: 100%; }

/* Leaf animations */
@keyframes leafDrift1 {
  0%,100%{transform:rotate(var(--r,0deg)) scale(1) translate(0,0)}
  33%{transform:rotate(calc(var(--r,0deg) + 4deg)) scale(1.03) translate(4px,-6px)}
  66%{transform:rotate(calc(var(--r,0deg) - 3deg)) scale(.98) translate(-3px,4px)}
}
@keyframes leafDrift2 {
  0%,100%{transform:rotate(var(--r,0deg)) scale(1) translate(0,0)}
  40%{transform:rotate(calc(var(--r,0deg) - 5deg)) scale(1.04) translate(-5px,3px)}
  70%{transform:rotate(calc(var(--r,0deg) + 3deg)) scale(.97) translate(6px,-4px)}
}
@keyframes leafDrift3 {
  0%,100%{transform:rotate(var(--r,0deg)) scale(1)}
  50%{transform:rotate(calc(var(--r,0deg) + 6deg)) scale(1.05)}
}
@keyframes leafSway {
  0%,100%{transform:rotate(var(--r,0deg)) skewY(0deg)}
  50%{transform:rotate(calc(var(--r,0deg) + 3deg)) skewY(2deg)}
}

/* ============================================
   NAV
   ============================================ */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1.25rem 0;transition:background .4s,padding .3s}
nav.scrolled{background:rgba(3,59,20,.96);backdrop-filter:blur(12px);padding:.85rem 0;box-shadow:0 2px 32px rgba(0,0,0,.4)}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center}
.nav-logo img{height:32px;width:auto;display:block;transition:opacity .2s}
.nav-logo img:hover{opacity:.85}
.nav-links{display:flex;gap:2rem;align-items:center}
.nav-links a{color:var(--cream);font-family:var(--font-display);font-weight:500;font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase;transition:color .2s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:2px;background:var(--orange);transform:scaleX(0);transition:transform .25s}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a:hover{color:var(--green-light)}
.nav-reserve{background:var(--orange)!important;color:var(--cream)!important;padding:.5rem 1.4rem;border-radius:3rem}
.nav-reserve::after{display:none!important}
.nav-reserve:hover{background:var(--pink)!important;transform:translateY(-2px);box-shadow:0 6px 20px rgba(242,102,79,.4)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.hamburger span{display:block;width:26px;height:2px;background:var(--cream);border-radius:2px;transition:all .3s}
.mobile-menu{display:none;position:fixed;inset:0;background:var(--green-deep);z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:2rem;cursor:pointer}
.mobile-menu.open{display:flex}
.mobile-menu a{font-family:var(--font-display);font-size:2.2rem;font-weight:700;color:var(--cream);transition:color .2s;cursor:pointer}
.mobile-menu a:hover{color:var(--orange)}
.mobile-close{position:absolute;top:1.5rem;right:1.5rem;background:none;border:none;color:var(--cream);font-size:2rem;cursor:pointer;z-index:1001;padding:.5rem;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}

/* ============================================
   HERO
   ============================================ */
#hero{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#1a0850}

/* Real pattern artwork as hero background */
#hero::before{content:'';position:absolute;inset:0;background-image:url('assets/pattern_dark.jpg');background-size:cover;background-position:center;z-index:0;pointer-events:none}

/* Dark vignette for text legibility over pattern */
#hero::after{content:'';position:absolute;inset:0;background:rgba(3,26,9,.52);z-index:1;pointer-events:none}

/* Hero foliage layer — hidden now that we use real pattern image */
.hero-foliage{display:none}

/* Individual hero leaves — brand colours, true foliage silhouettes */
/* Left side — tall narrow leaves sprouting from left edge */
.hl1{width:clamp(80px,9vw,150px);height:clamp(260px,28vw,440px);background:#033B14;left:-2%;top:-5%;--r:-12deg;animation:leafDrift1 11s ease-in-out infinite;border-radius:50% 50% 40% 40%/80% 80% 20% 20%;transform-origin:bottom center}
.hl2{width:clamp(60px,7vw,110px);height:clamp(200px,22vw,350px);background:#C6D87C;left:4%;top:-2%;--r:8deg;animation:leafDrift2 9s ease-in-out infinite;border-radius:50% 50% 35% 35%/75% 75% 25% 25%;transform-origin:bottom center}
.hl3{width:clamp(90px,10vw,165px);height:clamp(220px,24vw,380px);background:#4F4D9E;left:-3%;top:45%;--r:20deg;animation:leafDrift3 13s ease-in-out infinite;clip-path:polygon(50% 0%, 90% 30%, 85% 70%, 65% 100%, 35% 100%, 15% 70%, 10% 30%)}
.hl4{width:clamp(70px,8vw,130px);height:clamp(300px,32vw,500px);background:#005C4A;left:8%;top:50%;--r:-6deg;animation:leafDrift1 10s ease-in-out infinite 1s;border-radius:40% 60% 30% 30%/85% 85% 15% 15%;transform-origin:bottom center}
.hl5{width:clamp(55px,6vw,100px);height:clamp(180px,20vw,300px);background:#F0609F;left:14%;top:8%;--r:15deg;animation:leafDrift2 8s ease-in-out infinite 0.5s;clip-path:polygon(50% 0%, 88% 35%, 80% 72%, 62% 100%, 38% 100%, 20% 72%, 12% 35%)}

/* Right side — leaves from right edge */
.hl6{width:clamp(85px,10vw,160px);height:clamp(280px,30vw,460px);background:#4F4D9E;right:-2%;top:-4%;--r:10deg;animation:leafDrift2 12s ease-in-out infinite;border-radius:50% 50% 40% 40%/80% 80% 20% 20%;transform-origin:bottom center}
.hl7{width:clamp(65px,7vw,120px);height:clamp(220px,24vw,380px);background:#033B14;right:7%;top:0%;--r:-18deg;animation:leafDrift1 10s ease-in-out infinite 2s;clip-path:polygon(50% 0%, 92% 28%, 88% 65%, 70% 100%, 30% 100%, 12% 65%, 8% 28%)}
.hl8{width:clamp(75px,9vw,145px);height:clamp(240px,26vw,400px);background:#F2664F;right:2%;top:38%;--r:-8deg;animation:leafDrift3 9s ease-in-out infinite 1s;border-radius:45% 55% 35% 35%/78% 78% 22% 22%;transform-origin:bottom center}
.hl9{width:clamp(60px,7vw,115px);height:clamp(200px,22vw,340px);background:#C6D87C;right:14%;top:45%;--r:14deg;animation:leafDrift2 11s ease-in-out infinite 0.3s;clip-path:polygon(50% 0%, 90% 32%, 82% 68%, 64% 100%, 36% 100%, 18% 68%, 10% 32%)}
.hl10{width:clamp(80px,9vw,150px);height:clamp(260px,28vw,440px);background:#0DB8AB;right:-2%;top:58%;--r:-25deg;animation:leafDrift1 14s ease-in-out infinite;border-radius:50% 50% 40% 40%/82% 82% 18% 18%;transform-origin:bottom center}

/* Bottom — leaves growing up from bottom edge */
.hl11{width:clamp(120px,14vw,220px);height:clamp(180px,20vw,300px);background:#005C4A;left:18%;bottom:-5%;--r:5deg;animation:leafDrift3 12s ease-in-out infinite 0.8s;clip-path:polygon(50% 0%, 88% 30%, 82% 70%, 64% 100%, 36% 100%, 18% 70%, 12% 30%)}
.hl12{width:clamp(100px,11vw,180px);height:clamp(200px,22vw,340px);background:#F9C2E8;left:35%;bottom:-8%;--r:-6deg;animation:leafDrift1 9s ease-in-out infinite 1.5s;border-radius:45% 55% 30% 30%/80% 80% 20% 20%;opacity:.75;transform-origin:bottom center}
.hl13{width:clamp(90px,10vw,165px);height:clamp(220px,24vw,360px);background:#797825;right:20%;bottom:-10%;--r:12deg;animation:leafDrift2 11s ease-in-out infinite 0.6s;clip-path:polygon(50% 0%, 90% 30%, 84% 68%, 66% 100%, 34% 100%, 16% 68%, 10% 30%);opacity:.8}

/* Scattered mid accents — smaller botanical details */
.hl14{width:clamp(45px,5vw,85px);height:clamp(130px,14vw,220px);background:#F2664F;left:26%;top:12%;--r:35deg;animation:leafDrift3 7s ease-in-out infinite;border-radius:50% 50% 35% 35%/78% 78% 22% 22%;opacity:.75}
.hl15{width:clamp(40px,4.5vw,75px);height:clamp(120px,13vw,200px);background:#C6D87C;right:26%;top:8%;--r:-30deg;animation:leafDrift1 8s ease-in-out infinite 1.2s;clip-path:polygon(50% 0%, 88% 32%, 80% 70%, 62% 100%, 38% 100%, 20% 70%, 12% 32%);opacity:.7}
.hl16{width:clamp(35px,4vw,65px);height:clamp(100px,11vw,175px);background:#F0609F;left:42%;top:65%;--r:18deg;animation:leafDrift2 9s ease-in-out infinite 2s;border-radius:50% 50% 40% 40%/80% 80% 20% 20%;opacity:.6}

/* Hero content */
.hero-content{position:relative;z-index:10;text-align:center;padding:8rem 1rem 5rem;max-width:960px;margin:0 auto}
.hero-eyebrow{display:inline-flex;align-items:center;justify-content:center;background:var(--orange);color:var(--cream);font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:.65rem 1.75rem;border-radius:2rem;margin-bottom:1.5rem;line-height:1;animation:fadeDown .8s ease .2s both}
.hero-title{color:var(--green-light);text-shadow:0 4px 40px rgba(0,0,0,.7);animation:fadeDown .9s ease .4s both;margin-bottom:.25rem}
.hero-title .line2{color:var(--cream)}
.hero-sub{font-family:var(--font-display);font-size:clamp(1.2rem,2.8vw,1.8rem);color:var(--cream);opacity:.85;font-weight:500;margin-bottom:2.5rem;animation:fadeDown 1s ease .6s both}
.hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;animation:fadeDown 1.1s ease .8s both}
.hero-scroll{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;color:var(--cream);opacity:.6;font-family:var(--font-display);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;animation:bounce 2.5s ease-in-out infinite;z-index:10}
.hero-scroll svg{width:18px;height:18px}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}

/* ============================================
   SECTION FOLIAGE DIVIDERS
   Organic leaf shapes that frame sections
   ============================================ */
.foliage-divider{position:relative;height:80px;overflow:visible;pointer-events:none;z-index:2}
.foliage-divider .fd-leaf{position:absolute;bottom:0}
/* Left cluster */
.fd-l1{width:90px;height:140px;background:var(--orange);left:-20px;border-radius:0% 100% 0% 100%/100% 0% 100% 0%;transform:rotate(-10deg);opacity:.9}
.fd-l2{width:70px;height:120px;background:var(--green-light);left:40px;border-radius:60% 40% 70% 30%/40% 70% 30% 60%;transform:rotate(15deg);opacity:.8}
.fd-l3{width:60px;height:100px;background:var(--pink);left:80px;border-radius:40% 60% 50% 50%/60% 40% 60% 40%;transform:rotate(-5deg)}
/* Right cluster */
.fd-r1{width:100px;height:150px;background:var(--purple);right:-15px;border-radius:100% 0% 100% 0%/0% 100% 0% 100%;transform:rotate(8deg);opacity:.9}
.fd-r2{width:75px;height:125px;background:var(--teal);right:55px;border-radius:50% 50% 30% 70%/60% 40% 60% 40%;transform:rotate(-12deg);opacity:.85}
.fd-r3{width:55px;height:95px;background:var(--green-light);right:100px;border-radius:70% 30% 60% 40%/40% 60% 50% 50%;transform:rotate(20deg);opacity:.75}

/* Corner accent leaves — peek into sections */
.corner-leaves{position:absolute;pointer-events:none;overflow:hidden;inset:0;z-index:0}
.cl{position:absolute}
/* Left peeks */
.cl-tl1{width:80px;height:130px;background:var(--orange);top:10%;left:-20px;border-radius:0 100% 100% 0;opacity:.5;transform:rotate(-5deg)}
.cl-tl2{width:60px;height:110px;background:var(--green-light);top:25%;left:-10px;border-radius:0 80% 80% 0;opacity:.4;transform:rotate(8deg)}
.cl-bl1{width:90px;height:140px;background:var(--pink);bottom:5%;left:-25px;border-radius:0 100% 100% 0;opacity:.45;transform:rotate(-12deg)}
/* Right peeks */
.cl-tr1{width:80px;height:130px;background:var(--purple);top:8%;right:-20px;border-radius:100% 0 0 100%;opacity:.5;transform:rotate(5deg)}
.cl-tr2{width:65px;height:115px;background:var(--teal);top:30%;right:-15px;border-radius:100% 0 0 100%;opacity:.4;transform:rotate(-8deg)}
.cl-br1{width:85px;height:135px;background:var(--orange);bottom:8%;right:-20px;border-radius:100% 0 0 100%;opacity:.45;transform:rotate(10deg)}

/* ============================================
   MARQUEE — Brunch / Dinner / Drinks / Cocktails
   ============================================ */
#marquee-section{background:var(--green-deep);padding:2.5rem 0;overflow:hidden;border-top:1px solid rgba(198,216,124,.1);border-bottom:1px solid rgba(198,216,124,.1)}
.marquee-track{display:flex;width:max-content;animation:marqueeScroll 22s linear infinite}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{font-family:var(--font-display);font-weight:700;color:var(--orange);white-space:nowrap;padding:0 3vw;line-height:1;font-size:clamp(1.8rem,4.5vw,3.5rem)}
.marquee-item.alt{color:var(--green-light)}
.marquee-sep{color:var(--cream);opacity:.25;font-family:var(--font-display);font-weight:700;padding:0 1vw;line-height:1;white-space:nowrap;align-self:center;font-size:clamp(1rem,2vw,1.8rem)}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================
   STACKED MENU SECTION — "Brunch / Dinner / Drinks / Cocktails"
   Large vertically stacked words with foliage framing
   ============================================ */
#menu-showcase{position:relative;background:var(--green-dark);padding:var(--section-pad) 0;overflow:hidden}
.menu-showcase-inner{position:relative;z-index:2}
.menu-showcase-label{text-align:center;margin-bottom:2rem}
.menu-showcase-label .section-label{color:var(--green-light)}
.menu-words{display:flex;flex-direction:column;align-items:center;padding:0 clamp(1.5rem,6vw,6rem);text-align:center}
.menu-word-row{display:flex;align-items:center;gap:1.5rem;line-height:1;margin-bottom:-.1em;cursor:default;transition:transform .3s}
.menu-word-row:hover{transform:translateX(8px)}
.menu-word{font-family:var(--font-display);font-weight:700;font-size:clamp(3.5rem,10vw,10rem);color:var(--orange);line-height:.95;letter-spacing:-.02em;transition:color .3s}
.menu-word-row:hover .menu-word{color:var(--green-light)}
.menu-word-row:nth-child(2) .menu-word{color:var(--cream)}
.menu-word-row:nth-child(2):hover .menu-word{color:var(--pink)}
.menu-word-row:nth-child(3) .menu-word{color:var(--green-light)}
.menu-word-row:nth-child(3):hover .menu-word{color:var(--teal)}
.menu-word-row:nth-child(4) .menu-word{color:var(--pink)}
.menu-word-row:nth-child(4):hover .menu-word{color:var(--orange)}
/* Foliage accent next to menu words */
.menu-word-leaf{width:clamp(30px,4vw,70px);height:clamp(50px,7vw,120px);flex-shrink:0;border-radius:40% 60% 70% 30%/60% 30% 70% 40%;opacity:.7;transition:opacity .3s}
.menu-word-row:hover .menu-word-leaf{opacity:1}
.mwl1{background:var(--teal)}
.mwl2{background:var(--purple)}
.mwl3{background:var(--orange)}
.mwl4{background:var(--green-light)}

/* Showcase foliage — left and right large decorative leaves */
.ms-foliage{position:absolute;pointer-events:none;inset:0;overflow:hidden}
.ms-l1{position:absolute;width:clamp(140px,17vw,280px);height:clamp(140px,17vw,280px);background:#4F4D9E;left:-6%;top:8%;border-radius:71% 29% 55% 45%/35% 64% 36% 65%;opacity:.55;animation:leafDrift1 14s ease-in-out infinite}
.ms-l2{position:absolute;width:clamp(100px,12vw,200px);height:clamp(100px,12vw,200px);background:#F0609F;left:3%;top:55%;border-radius:55% 45% 65% 35%/45% 55% 45% 55%;opacity:.45;animation:leafDrift2 11s ease-in-out infinite 1s}
.ms-l3{position:absolute;width:clamp(80px,10vw,160px);height:clamp(80px,10vw,160px);background:#C6D87C;left:10%;top:22%;border-radius:60% 40% 60% 40%/40% 60% 40% 60%;opacity:.5;animation:leafDrift3 9s ease-in-out infinite}
.ms-r1{position:absolute;width:clamp(150px,18vw,300px);height:clamp(150px,18vw,300px);background:#033B14;right:-5%;top:5%;border-radius:45% 55% 60% 40%/60% 40% 55% 45%;opacity:.65;animation:leafDrift2 13s ease-in-out infinite}
.ms-r2{position:absolute;width:clamp(110px,14vw,220px);height:clamp(110px,14vw,220px);background:#F2664F;right:4%;top:45%;border-radius:65% 35% 45% 55%/40% 60% 40% 60%;opacity:.5;animation:leafDrift1 10s ease-in-out infinite 2s}
.ms-r3{position:absolute;width:clamp(80px,10vw,160px);height:clamp(80px,10vw,160px);background:#0DB8AB;right:14%;top:12%;border-radius:50% 50% 65% 35%/55% 45% 55% 45%;opacity:.45;animation:leafDrift3 8s ease-in-out infinite 0.5s}
.ms-bot{position:absolute;width:clamp(160px,20vw,300px);height:clamp(160px,20vw,300px);background:#797825;bottom:-60px;left:38%;border-radius:55% 45% 50% 50%/45% 55% 45% 55%;opacity:.35;animation:leafDrift1 16s ease-in-out infinite}

/* Menu CTA buttons below words */
.menu-ctas{display:flex;flex-wrap:wrap;gap:1rem;padding:2.5rem clamp(1.5rem,6vw,6rem) 0;position:relative;z-index:2}

/* ============================================
   SECTION BACKGROUND BLOBS
   Scattered organic shapes behind about, gallery & contact.
   All use z-index:0 so content sits above.
   ============================================ */

/* About section blobs — cream bg, so use subtle tinted colours */
.about-blobs{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.ab1{position:absolute;width:clamp(180px,22vw,360px);height:clamp(180px,22vw,360px);background:#F2664F;top:-80px;left:-60px;border-radius:55% 45% 60% 40%/45% 55% 45% 55%;opacity:.08;animation:leafDrift1 18s ease-in-out infinite}
.ab2{position:absolute;width:clamp(140px,18vw,280px);height:clamp(140px,18vw,280px);background:#4F4D9E;top:20%;right:-40px;border-radius:40% 60% 55% 45%/60% 40% 60% 40%;opacity:.07;animation:leafDrift2 15s ease-in-out infinite 2s}
.ab3{position:absolute;width:clamp(200px,26vw,400px);height:clamp(200px,26vw,400px);background:#0DB8AB;bottom:-60px;left:30%;border-radius:60% 40% 50% 50%/40% 60% 40% 60%;opacity:.08;animation:leafDrift3 20s ease-in-out infinite 1s}
.ab4{position:absolute;width:clamp(120px,15vw,240px);height:clamp(120px,15vw,240px);background:#C6D87C;bottom:10%;left:-30px;border-radius:45% 55% 65% 35%/55% 45% 55% 45%;opacity:.12;animation:leafDrift1 13s ease-in-out infinite 3s}
.ab5{position:absolute;width:clamp(100px,12vw,200px);height:clamp(100px,12vw,200px);background:#F0609F;top:40%;right:15%;border-radius:65% 35% 45% 55%/35% 65% 35% 65%;opacity:.06;animation:leafDrift2 16s ease-in-out infinite}

/* Gallery/vibe blobs — on orange bg, use dark and contrasting tones */
.gallery-blobs{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.gb1{position:absolute;width:clamp(200px,25vw,400px);height:clamp(200px,25vw,400px);background:#033B14;top:-60px;left:-40px;border-radius:50% 50% 65% 35%/40% 60% 40% 60%;opacity:.15;animation:leafDrift2 20s ease-in-out infinite}
.gb2{position:absolute;width:clamp(160px,20vw,320px);height:clamp(160px,20vw,320px);background:#4F4D9E;top:15%;right:-50px;border-radius:60% 40% 50% 50%/55% 45% 55% 45%;opacity:.18;animation:leafDrift1 17s ease-in-out infinite 1s}
.gb3{position:absolute;width:clamp(240px,30vw,480px);height:clamp(240px,30vw,480px);background:#005C4A;bottom:-80px;left:20%;border-radius:45% 55% 60% 40%/60% 40% 60% 40%;opacity:.14;animation:leafDrift3 22s ease-in-out infinite 2s}
.gb4{position:absolute;width:clamp(140px,17vw,280px);height:clamp(140px,17vw,280px);background:#033B14;bottom:20%;right:10%;border-radius:55% 45% 40% 60%/45% 55% 45% 55%;opacity:.12;animation:leafDrift2 14s ease-in-out infinite 3s}
.gb5{position:absolute;width:clamp(120px,14vw,240px);height:clamp(120px,14vw,240px);background:#F9C2E8;top:50%;left:40%;border-radius:40% 60% 55% 45%/60% 40% 60% 40%;opacity:.1;animation:leafDrift1 19s ease-in-out infinite 0.5s}

/* Contact blobs — on dark green bg */
.contact-blobs{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.cb1{position:absolute;width:clamp(200px,24vw,380px);height:clamp(200px,24vw,380px);background:#4F4D9E;top:-50px;right:-40px;border-radius:55% 45% 60% 40%/40% 60% 40% 60%;opacity:.18;animation:leafDrift1 19s ease-in-out infinite}
.cb2{position:absolute;width:clamp(160px,20vw,320px);height:clamp(160px,20vw,320px);background:#F2664F;top:30%;left:-50px;border-radius:40% 60% 50% 50%/55% 45% 55% 45%;opacity:.12;animation:leafDrift2 16s ease-in-out infinite 2s}
.cb3{position:absolute;width:clamp(220px,28vw,440px);height:clamp(220px,28vw,440px);background:#0DB8AB;bottom:-70px;right:20%;border-radius:60% 40% 45% 55%/45% 55% 45% 55%;opacity:.14;animation:leafDrift3 21s ease-in-out infinite 1s}
.cb4{position:absolute;width:clamp(130px,16vw,260px);height:clamp(130px,16vw,260px);background:#C6D87C;bottom:15%;left:10%;border-radius:45% 55% 65% 35%/60% 40% 60% 40%;opacity:.1;animation:leafDrift1 14s ease-in-out infinite 3s}
.cb5{position:absolute;width:clamp(100px,12vw,200px);height:clamp(100px,12vw,200px);background:#F0609F;top:55%;right:35%;border-radius:65% 35% 45% 55%/35% 65% 35% 65%;opacity:.09;animation:leafDrift2 17s ease-in-out infinite 0.5s}

/* ============================================
   ABOUT
   ============================================ */
#about{padding:var(--section-pad) 0;background:var(--cream);color:var(--green-dark);position:relative;overflow:hidden}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center;position:relative;z-index:2}
.about-label{color:var(--orange)}
.about-title{color:var(--green-dark);margin-bottom:1.5rem}
.about-title .wild{color:var(--orange)}
.about-body{color:var(--green-dark);opacity:.8;margin-bottom:1rem}
.about-pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.pill{background:var(--green-dark);color:var(--green-light);font-family:var(--font-display);font-size:.9rem;font-weight:600;letter-spacing:.06em;padding:.4rem 1rem;border-radius:2rem}
.about-visual{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.about-card{background:var(--green-dark);border-radius:var(--radius);padding:2rem 1.5rem;color:var(--cream);transition:transform .3s}
.about-card:hover{transform:translateY(-4px)}
.about-card:nth-child(2){background:var(--orange);margin-top:1.5rem}
.about-card:nth-child(3){background:var(--purple)}
.about-card:nth-child(4){background:var(--green-mid);margin-top:-1.5rem}
.about-card-icon{font-size:2rem;margin-bottom:.75rem}
.about-card h4{font-size:1.05rem;margin-bottom:.4rem;color:var(--cream);font-weight:500;opacity:.95}
.about-card p{font-size:1rem;opacity:.7;line-height:1.6;font-weight:400}

/* ============================================
   PDF MENUS SECTION — removed from page, CSS kept minimal
   ============================================ */
#menus{display:none}
.menus-header h2{color:var(--cream)}
.menus-header h2 .accent{color:var(--orange)}
.menus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;position:relative;z-index:2}
.menu-card{background:rgba(198,216,124,.06);border:1px solid rgba(198,216,124,.15);border-radius:var(--radius);padding:2.5rem 2rem;text-align:center;transition:transform .3s,background .3s;position:relative;overflow:hidden}
.menu-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px}
.menu-card:nth-child(1)::before{background:var(--orange)}
.menu-card:nth-child(2)::before{background:var(--pink)}
.menu-card:nth-child(3)::before{background:var(--green-light)}
.menu-card:hover{transform:translateY(-6px);background:rgba(198,216,124,.1)}
.menu-icon{font-size:3rem;margin-bottom:1.25rem}
.menu-card h3{color:var(--cream);margin-bottom:.75rem}
.menu-card p{color:var(--cream);opacity:.65;font-size:.9rem;margin-bottom:2rem;line-height:1.6}

/* ============================================
   WHAT'S ON
   ============================================ */
#whatson{padding:var(--section-pad) 0;background:var(--purple);position:relative;overflow:hidden}
/* Purple section corner leaves */
.whatson-leaves .cl-tl1{background:var(--pink);opacity:.4}
.whatson-leaves .cl-br1{background:var(--green-light);opacity:.35}
.whatson-header{text-align:center;margin-bottom:3rem;position:relative;z-index:2}
.whatson-header .section-label{color:rgba(250,237,209,.6)}
.whatson-header h2{color:var(--cream)}
.promo-slider{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:1rem;position:relative;z-index:2;align-items:flex-start}
.promo-slider::-webkit-scrollbar{display:none}
.promo-slide{flex:0 0 clamp(260px,30vw,380px);scroll-snap-align:start;border-radius:var(--radius);overflow:hidden;position:relative;background:rgba(255,255,255,.08);cursor:pointer}
.promo-slide img{width:100%;height:auto;display:block;transition:transform .4s}
.promo-video{width:100%;height:auto;display:block;transition:transform .4s}
.promo-slide:hover img,.promo-slide:hover .promo-video{transform:scale(1.04)}
.promo-slide-label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(3,26,9,.9));padding:2rem 1.25rem 1.25rem;color:var(--cream);font-family:var(--font-display);font-size:1.05rem;font-weight:600}
.promo-slide.placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.75rem;background:rgba(255,255,255,.06);border:2px dashed rgba(250,237,209,.2);color:rgba(250,237,209,.4)}
.promo-slide.placeholder span{font-family:var(--font-display);font-size:.8rem;text-align:center}
.slider-controls{display:flex;justify-content:center;gap:.75rem;margin-top:2rem;position:relative;z-index:2}
.slider-btn{width:44px;height:44px;border-radius:50%;border:2px solid rgba(250,237,209,.4);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:var(--cream)}
.slider-btn:hover{background:var(--cream);color:var(--purple);border-color:var(--cream)}
.slider-btn svg{width:18px;height:18px}

/* ============================================
   GALLERY / INSTAGRAM — adaptive masonry
   Handles portrait, landscape & square naturally.
   Number of images is unlimited — no fixed slots.
   ============================================ */
#gallery{padding:var(--section-pad) 0;background:var(--orange);position:relative;overflow:hidden}
.gallery-header{text-align:center;margin-bottom:3rem;position:relative;z-index:2}
.gallery-header .section-label{color:rgba(250,237,209,.7)}
.gallery-header h2{color:var(--cream)}
.gallery-header p{color:var(--cream);opacity:.8;margin-top:.5rem;font-size:.95rem}
/* CSS columns masonry — images keep their natural aspect ratio */
.ig-masonry{columns:3;column-gap:.75rem;position:relative;z-index:2}
.ig-masonry-item{break-inside:avoid;margin-bottom:.75rem;border-radius:1rem;overflow:hidden;position:relative;display:block;cursor:pointer}
.ig-masonry-item img,.ig-video{width:100%;display:block;border-radius:1rem;transition:transform .5s}
.ig-video{object-fit:cover}
.ig-masonry-item:hover img,.ig-masonry-item:hover .ig-video{transform:scale(1.04)}
.ig-masonry-item:hover .ig-overlay{opacity:1}
.ig-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);opacity:0;transition:opacity .3s;border-radius:1rem}
.ig-overlay svg{width:28px;height:28px;fill:white}.ig-overlay{position:absolute;inset:0;background:rgba(3,26,9,.5);opacity:0;transition:opacity .3s;display:flex;align-items:center;justify-content:center;border-radius:1rem}
.ig-masonry-item:hover .ig-overlay{opacity:1}
.ig-overlay svg{width:32px;height:32px;color:white}
.ig-empty{text-align:center;padding:4rem 2rem;color:rgba(250,237,209,.6);font-family:var(--font-display);font-size:.9rem}
.ig-empty svg{width:40px;height:40px;margin:0 auto 1rem;opacity:.4;display:block}
.gallery-cta{text-align:center;margin-top:2.5rem;position:relative;z-index:2}
.gallery-corner-l{position:absolute;left:0;bottom:0;width:120px;height:200px;background:var(--green-dark);border-radius:0 100% 0 0;opacity:.3;pointer-events:none}
.gallery-corner-r{position:absolute;right:0;top:0;width:100px;height:170px;background:var(--purple);border-radius:0 0 0 100%;opacity:.3;pointer-events:none}
@media(max-width:600px){.ig-masonry{columns:2}}
@media(max-width:380px){.ig-masonry{columns:1}}

/* ============================================
   CONTACT
   ============================================ */
#contact{padding:var(--section-pad) 0;background:var(--green-dark);position:relative;overflow:hidden}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start;position:relative;z-index:2}
.contact-info .section-label{color:var(--green-light)}
.contact-info h2{color:var(--cream);margin-bottom:1.5rem}
.contact-info h2 .accent{color:var(--orange)}
/* Contact quick-access buttons — horizontal scroll slider on all sizes, grid on desktop */
.contact-3btns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
  margin-top:1.5rem;
  margin-bottom:2rem;
}
/* Third button spans full width and centres via justify-self */
.contact-3btns .c-btn:last-child{
  grid-column:1/-1;
  justify-self:center;
  width:calc(50% - .375rem);
}
.c-btn{
  background:rgba(198,216,124,.08);
  border:1px solid rgba(198,216,124,.15);
  border-radius:1rem;
  padding:1.25rem 1rem;
  text-align:center;
  transition:all .2s;
  display:block;
}
.c-btn:hover{background:rgba(198,216,124,.15);transform:translateY(-2px)}
.c-btn-icon{font-size:1.5rem;margin-bottom:.5rem}
.c-btn h4{color:var(--green-light);font-family:var(--font-display);font-size:.88rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.3rem}
.c-btn p,.c-btn a{color:var(--cream);opacity:.8;font-size:.95rem}
.contact-details{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:2rem}
.contact-item{display:flex;gap:1rem;align-items:flex-start}
.ci-icon{width:40px;height:40px;background:rgba(198,216,124,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--green-light)}
.ci-icon svg{width:18px;height:18px}
.ci-text h4{color:var(--green-light);font-size:.88rem;font-family:var(--font-display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.3rem}
.ci-text p,.ci-text a{color:var(--cream);opacity:.82;font-size:1.05rem;line-height:1.5}
.ci-text a:hover{color:var(--orange);opacity:1}
.map-area{border-radius:var(--radius);overflow:hidden;margin-top:1.5rem}
.map-area iframe{border-radius:var(--radius);display:block;width:100%;height:clamp(200px,50vw,300px)}
.contact-form-wrap{background:rgba(198,216,124,.06);border:1px solid rgba(198,216,124,.15);border-radius:var(--radius);padding:clamp(1rem,5vw,2.5rem);overflow:hidden}
.contact-form-wrap h3{color:var(--cream);margin-bottom:.5rem}
.contact-form-wrap p{color:var(--cream);opacity:.6;font-size:1.1rem;margin-bottom:2rem}
.form-group{margin-bottom:1.25rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label{display:block;color:var(--green-light);font-family:var(--font-display);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem}
input,select,textarea{width:100%;background:rgba(250,237,209,.07);border:1px solid rgba(198,216,124,.2);border-radius:.75rem;padding:.85rem 1rem;color:var(--cream);font-family:var(--font-body);font-size:.95rem;outline:none;transition:border-color .2s}
input::placeholder,textarea::placeholder{color:rgba(250,237,209,.3)}
input:focus,select:focus,textarea:focus{border-color:var(--green-light)}
select option{background:var(--green-dark);color:var(--cream)}
textarea{resize:vertical;min-height:110px}
.form-submit{width:100%;padding:1rem;font-size:1rem;margin-top:.5rem}
.form-success{display:none;background:rgba(13,184,171,.15);border:1px solid var(--teal);border-radius:.75rem;padding:1rem 1.25rem;color:var(--teal);font-family:var(--font-display);font-weight:600;margin-top:1rem;text-align:center}

/* ============================================
   CTA BAND
   ============================================ */
#cta-band{padding:5rem 0;background:var(--orange);text-align:center;position:relative;overflow:hidden}
#cta-band::before,#cta-band::after{content:'';position:absolute;border-radius:50%;opacity:.15}
#cta-band::before{width:400px;height:400px;background:white;top:-150px;left:-100px}
#cta-band::after{width:300px;height:300px;background:white;bottom:-100px;right:-80px}
/* Foliage accents on CTA band */
.cta-fl1{position:absolute;width:100px;height:160px;background:var(--green-dark);left:5%;top:50%;transform:translateY(-50%);border-radius:0 100% 100% 0;opacity:.2;pointer-events:none}
.cta-fl2{position:absolute;width:90px;height:150px;background:var(--green-dark);right:6%;top:50%;transform:translateY(-50%);border-radius:100% 0 0 100%;opacity:.2;pointer-events:none}
.cta-content{position:relative;z-index:2}
.cta-content h2{color:var(--cream);font-size:clamp(2.5rem,6vw,5rem);margin-bottom:1.5rem}
.cta-content h2 .green{color:var(--green-light)}

/* ============================================
   WHATSAPP FLOAT
   ============================================ */
.whatsapp-float{position:fixed;bottom:2rem;right:2rem;z-index:998;display:flex;align-items:center;gap:.75rem;background:#25D366;color:white;padding:.9rem 1.5rem .9rem 1.1rem;border-radius:3rem;font-family:var(--font-display);font-weight:600;font-size:.9rem;box-shadow:0 6px 24px rgba(37,211,102,.4);transition:transform .2s,box-shadow .2s;animation:waPulse 3s ease-in-out infinite}
.whatsapp-float:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 10px 32px rgba(37,211,102,.55);color:white}
.whatsapp-float svg{width:22px;height:22px}
@keyframes waPulse{0%,100%{box-shadow:0 6px 24px rgba(37,211,102,.4)}50%{box-shadow:0 6px 36px rgba(37,211,102,.7)}}

/* ============================================
   FOOTER
   ============================================ */
footer{background:#011a09;padding:3.5rem 0 2rem;color:var(--cream);position:relative;overflow:visible}
/* Footer foliage */
.footer-foliage{position:absolute;pointer-events:none;bottom:0;left:0;right:0;height:100%;overflow:hidden;z-index:0}
.ff1{position:absolute;width:180px;height:280px;background:var(--orange);bottom:-60px;left:-40px;border-radius:0% 100% 100% 0%;opacity:.08;transform:rotate(-5deg)}
.ff2{position:absolute;width:140px;height:240px;background:var(--pink);bottom:-40px;left:80px;border-radius:60% 40% 70% 30%/40% 70% 30% 60%;opacity:.06;transform:rotate(15deg)}
.ff3{position:absolute;width:200px;height:300px;background:var(--purple);bottom:-80px;right:-50px;border-radius:100% 0% 0% 100%;opacity:.09;transform:rotate(8deg)}
.ff4{position:absolute;width:150px;height:250px;background:var(--green-light);bottom:-50px;right:100px;border-radius:60% 40% 0% 0%;opacity:.06;transform:rotate(-10deg)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem;position:relative;z-index:1}
.footer-brand-name img{height:44px;width:auto;display:block;margin-bottom:1rem}
.footer-tagline{opacity:.6;font-size:1rem;line-height:1.7;max-width:300px}
.footer-social{display:flex;gap:.75rem;margin-top:1.5rem}
.social-icon{width:42px;height:42px;border-radius:50%;border:1px solid rgba(250,237,209,.2);display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;color:var(--cream)}
.social-icon:hover{background:var(--orange);border-color:var(--orange)}
.social-icon svg{width:18px;height:18px}
.footer-col h4{font-family:var(--font-display);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-light);margin-bottom:1.25rem}
.footer-col ul{display:flex;flex-direction:column;gap:.7rem}
.footer-col ul li a{opacity:.6;font-size:1rem;transition:opacity .2s,color .2s}
.footer-col ul li a:hover{opacity:1;color:var(--orange)}
.footer-bottom{border-top:1px solid rgba(250,237,209,.1);padding-top:2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;position:relative;z-index:1}
.footer-bottom p{opacity:.35;font-size:.8rem}
.footer-bottom a{opacity:.35;font-size:.8rem;transition:opacity .2s}
.footer-bottom a:hover{opacity:.8;color:var(--orange)}

/* ============================================
   FAQ PAGE
   ============================================ */
.faq-hero{background:var(--green-dark);padding:10rem 0 6rem;text-align:center;position:relative;overflow:hidden}
.faq-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(198,216,124,.06) 1px,transparent 1px);background-size:28px 28px}
/* Foliage peeking into FAQ hero */
.faq-fl-l{position:absolute;width:120px;height:200px;background:var(--orange);left:-30px;top:30%;border-radius:0 100% 100% 0;opacity:.25;pointer-events:none}
.faq-fl-r{position:absolute;width:100px;height:170px;background:var(--purple);right:-20px;top:20%;border-radius:100% 0 0 100%;opacity:.25;pointer-events:none}
.faq-hero h1{color:var(--green-light);position:relative;z-index:1;margin-bottom:1rem;font-size:clamp(2.5rem,7vw,5rem)}
.faq-hero p{color:var(--cream);opacity:.7;position:relative;z-index:1;max-width:560px;margin:0 auto;font-size:1.05rem}
.faq-body{padding:var(--section-pad) 0;background:var(--cream)}
.back-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--green-dark);font-family:var(--font-display);font-weight:600;font-size:.9rem;margin-bottom:2rem;transition:color .2s}
.back-link:hover{color:var(--orange)}
.back-link svg{width:18px;height:18px}
.faq-categories{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:3rem}
.faq-cat-btn{padding:.5rem 1.25rem;border-radius:2rem;border:2px solid var(--green-dark);background:transparent;font-family:var(--font-display);font-weight:600;font-size:.85rem;cursor:pointer;color:var(--green-dark);transition:all .2s;letter-spacing:.04em}
.faq-cat-btn.active,.faq-cat-btn:hover{background:var(--green-dark);color:var(--green-light)}
.faq-section{margin-bottom:3.5rem}
.faq-section-title{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--orange);margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid var(--orange);display:inline-block}
.faq-item{border:1px solid rgba(3,59,20,.12);border-radius:1rem;margin-bottom:.75rem;overflow:hidden;background:white;transition:box-shadow .2s}
.faq-item:hover{box-shadow:0 4px 16px rgba(3,59,20,.08)}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:1.25rem 1.5rem;font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--green-dark);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;line-height:1.4}
.faq-q:hover{color:var(--orange)}
.faq-icon{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--green-light);display:flex;align-items:center;justify-content:center;transition:background .2s,transform .3s}
.faq-item.open .faq-icon{background:var(--orange);transform:rotate(45deg)}
.faq-icon svg{width:12px;height:12px;color:var(--green-dark)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-item.open .faq-a{max-height:800px}
.faq-a-inner{padding:0 1.5rem 1.5rem;color:var(--green-dark);opacity:.8;line-height:1.8;font-size:1.05rem}
.faq-a-inner a{color:var(--orange);font-weight:600}
.faq-a-inner a:hover{text-decoration:underline}

/* ============================================
   ADMIN
   ============================================ */
.admin-body{background:#f4f4f4;min-height:100vh}
.admin-header{background:var(--green-dark);padding:1.25rem 2rem;display:flex;align-items:center;justify-content:space-between}
.admin-header-title{font-family:var(--font-display);color:var(--green-light);font-size:1.3rem;font-weight:700}
.admin-header-sub{color:var(--cream);opacity:.6;font-size:.85rem}
.admin-content{max-width:980px;margin:0 auto;padding:3rem 1.5rem}
.admin-section{background:white;border-radius:1rem;padding:2rem;margin-bottom:2rem;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.admin-section h2{font-family:var(--font-display);font-size:1.25rem;color:var(--green-dark);margin-bottom:.4rem}
.admin-section>p{font-size:.9rem;color:#666;margin-bottom:1.5rem}
.admin-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.admin-slot{border:2px dashed #ddd;border-radius:.75rem;padding:1.25rem;text-align:center;cursor:pointer;transition:border-color .2s;position:relative;background:#fafafa}
.admin-slot:hover{border-color:var(--orange)}
.admin-slot-preview{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:.5rem;margin-bottom:.75rem;display:none}
.admin-slot-preview.loaded{display:block}
.admin-slot-icon{font-size:2.5rem;margin-bottom:.5rem;display:block}
.admin-slot-label{font-family:var(--font-display);font-size:.85rem;font-weight:600;color:var(--green-dark);margin-bottom:.25rem}
.admin-slot-sublabel{font-size:.75rem;color:#999}
.admin-slot input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.admin-ig-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.admin-ig-slot{border:2px dashed #ddd;border-radius:.75rem;padding:1rem;text-align:center;cursor:pointer;transition:border-color .2s;position:relative;background:#fafafa}
.admin-ig-slot:hover{border-color:var(--orange)}
.admin-ig-preview{width:100%;aspect-ratio:1;object-fit:cover;border-radius:.5rem;margin-bottom:.5rem;display:none}
.admin-ig-preview.loaded{display:block}
.admin-ig-slot input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.admin-ig-label{font-family:var(--font-display);font-size:.8rem;font-weight:600;color:var(--green-dark)}
.admin-marquee-list{display:flex;flex-direction:column;gap:.75rem}
.admin-mq-row{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center}
.admin-mq-row input{background:#f4f4f4;border:1px solid #e0e0e0;border-radius:.5rem;padding:.65rem 1rem;color:var(--green-dark);font-family:var(--font-display);font-size:.95rem;width:100%}
.admin-mq-del{width:36px;height:36px;border-radius:.5rem;background:#fff0f0;border:1px solid #fcc;color:#c33;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.admin-btn{background:var(--orange);color:white;border:none;padding:.75rem 1.75rem;border-radius:.5rem;font-family:var(--font-display);font-weight:700;font-size:.95rem;cursor:pointer;transition:background .2s}
.admin-btn:hover{background:var(--pink)}
.admin-btn-sec{background:transparent;border:2px solid var(--green-dark);color:var(--green-dark);padding:.65rem 1.5rem;border-radius:.5rem;font-family:var(--font-display);font-weight:600;font-size:.9rem;cursor:pointer;margin-left:.75rem;transition:all .2s}
.admin-btn-sec:hover{background:var(--green-dark);color:white}
.admin-btn-add{background:var(--green-dark);color:var(--green-light);border:none;padding:.5rem 1.1rem;border-radius:.5rem;font-family:var(--font-display);font-weight:600;font-size:.85rem;cursor:pointer;margin-top:.75rem;display:inline-block}
.admin-login{max-width:400px;margin:8rem auto;background:white;border-radius:1.25rem;padding:2.5rem;box-shadow:0 4px 32px rgba(0,0,0,.1);text-align:center}
.admin-login h1{font-family:var(--font-display);color:var(--green-dark);font-size:1.75rem;margin-bottom:.5rem}
.admin-login p{color:#888;font-size:.9rem;margin-bottom:2rem}
.admin-login input{background:#f4f4f4;border:1px solid #e0e0e0;border-radius:.6rem;padding:.85rem 1rem;color:var(--green-dark);font-family:var(--font-body);margin-bottom:1rem;width:100%}
.admin-login input:focus{border-color:var(--orange);outline:none}
.admin-notice{background:#fff8f0;border:1px solid var(--orange);border-radius:.6rem;padding:.75rem 1rem;font-size:.85rem;color:var(--orange);margin-bottom:1rem;display:none}
.save-msg{font-family:var(--font-display);font-size:.85rem;color:#25D366;display:none;margin-left:.75rem}

/* ============================================
   ANIMATIONS
   ============================================ */
.fade-up{opacity:0;transform:translateY(30px);transition:opacity .65s ease,transform .65s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:900px){
  .hero-content{padding:7rem 1rem 5rem}
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .about-visual{order:-1}
  .menus-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>.footer-brand{grid-column:1/-1}
  .nav-links{display:none}
  .hamburger{display:flex}
  .menu-words{padding:0 clamp(1rem,4vw,3rem)}
  .menu-word{font-size:clamp(3.5rem,12vw,7rem)}
  .nav-logo img{height:26px}
  .footer-brand-name img{height:36px}
  /* Form row stacks at tablet too */
  .form-row{grid-template-columns:1fr}
  /* Map shorter on mobile */
  .map-area iframe{height:220px}
  /* Contact form full width on mobile */
  .contact-form-wrap{border-radius:var(--radius);width:100%}
}
@media(max-width:600px){
  .footer-grid{grid-template-columns:1fr}
  .about-visual{grid-template-columns:1fr 1fr}
  .admin-slots,.admin-ig-slots{grid-template-columns:1fr 1fr}
  .whatsapp-float span{display:none}
  .whatsapp-float{padding:.9rem;border-radius:50%}
  .nav-logo img{height:22px}
  .footer-brand-name img{height:30px}
  /* Menu words — big and bold on mobile */
  .menu-word{font-size:clamp(2.8rem,13vw,5rem)}
  .section-label{font-size:.95rem}
  p{font-size:1.15rem}
  h2{font-size:clamp(2rem,7vw,3rem)}
  .hl5,.hl14,.hl15,.hl16,.ms-l3,.ms-r3{display:none}
  /* Contact 3 buttons — full width each on very small screens */
  .contact-3btns{grid-template-columns:1fr}
  .contact-3btns .c-btn:last-child{grid-column:auto;justify-self:stretch;width:100%}
  /* Map on small mobile */
  .map-area iframe{height:200px;border-radius:1rem}
}