@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700;800;900&display=swap');
:root{--ink:#163b4a;--pink:#ff2fae;--sea:#51cbd4;--sand:#fff3de;--coral:#ff9272;--white:#fffdf8}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--white);color:var(--ink);font-family:'DM Sans',sans-serif;line-height:1.6}a{color:inherit}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px max(5%,calc((100vw - 1120px)/2));background:rgba(255,253,248,.96);box-shadow:0 2px 15px #163b4a12}.brand{text-decoration:none;font-family:Outfit,sans-serif;font-weight:900;font-size:1.5rem;letter-spacing:-1px}.brand span{color:var(--pink)}nav{display:flex;gap:24px}nav a{text-decoration:none;font-size:.92rem;font-weight:700}nav a:hover,nav a:focus-visible{color:var(--pink)}.menu-toggle{display:none;background:none;border:0;color:var(--ink);font-size:1.7rem;cursor:pointer}.hero{position:relative;min-height:520px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(180deg,#8be5ec 0%,#c7f3ec 62%,#ffe2ad 62%,#f6c78d 100%);text-align:center;padding:85px 20px 110px}.sun{position:absolute;top:50px;right:14%;width:135px;height:135px;border-radius:50%;background:#fff4bb;box-shadow:0 0 80px #fff4bb80}.hero-inner{position:relative;z-index:1}.eyebrow{font-size:.76rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#bb5a64}.hero h1{margin:10px 0 0;font:900 clamp(3.8rem,11vw,8.5rem)/.95 Outfit,sans-serif;letter-spacing:-.075em;color:#fff;text-shadow:3px 4px 0 var(--pink),0 0 20px #ff2fae80}.hero h1 span{color:#fff}.tagline{font-size:clamp(1rem,2.5vw,1.4rem);font-weight:700;margin:25px 0}.button{display:inline-block;padding:13px 26px;border-radius:50px;background:var(--pink);color:white;text-decoration:none;font-weight:800;box-shadow:0 7px 0 #c72483;transition:transform .2s}.button:hover{transform:translateY(-3px)}.wave{position:absolute;bottom:-1px;width:100%;height:45px;background:var(--white);clip-path:polygon(0 55%,10% 35%,20% 55%,30% 35%,40% 55%,50% 35%,60% 55%,70% 35%,80% 55%,90% 35%,100% 55%,100% 100%,0 100%)}.section{padding:95px 20px}.section.alt{background:var(--sand)}.container{max-width:1000px;margin:auto}.section h2{font:800 clamp(2.3rem,5vw,3.5rem)/1.1 Outfit,sans-serif;letter-spacing:-.04em;margin:8px 0 20px}.intro{margin-top:-5px;color:#56717b}.placeholder{margin-top:30px;padding:45px 28px;border:2px dashed #e6b8a2;border-radius:20px;background:#ffffffa8;text-align:center;color:#6d7478}.contact{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.contact>div{padding:26px;background:#fff;border-radius:18px}.contact h3{margin-top:0}footer{text-align:center;padding:30px 20px;background:var(--ink);color:white;font-size:.85rem}@media(max-width:720px){.topbar{padding:12px 20px;flex-wrap:wrap}.menu-toggle{display:block}nav{display:none;flex-basis:100%;flex-direction:column;gap:0;padding:8px 0}nav.open{display:flex}nav a{padding:12px 0;border-top:1px solid #163b4a15}.hero{min-height:460px}.sun{width:85px;height:85px;right:7%}.section{padding:65px 20px}.contact{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Menu cards and uploaded brand logo */
.hero-logo{display:block;width:min(680px,90vw);height:auto;max-height:260px;object-fit:contain;margin:12px auto;filter:drop-shadow(0 8px 15px #ff2fae40)}.hero-fallback{font:900 clamp(3.5rem,10vw,8rem)/1 Outfit,sans-serif;color:white;text-shadow:3px 4px var(--pink)}.hero-fallback span{color:var(--pink)}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:30px}.menu-card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 5px 24px #163b4a12;border:1px solid #163b4a0b}.menu-card-photo{height:110px;background:linear-gradient(125deg,#a4edf0,#ffe7b4);display:flex;align-items:center;justify-content:center;color:#f69b73;font-size:2rem}.menu-card-body{padding:22px}.menu-card h3{font:800 1.28rem/1.2 Outfit,sans-serif;margin:0 0 10px}.menu-card p{margin:0;color:#56717b;font-size:.95rem}.menu-card-photo span{opacity:.55}@media(max-width:620px){.menu-grid{grid-template-columns:1fr;gap:15px}.menu-card-photo{height:70px}.menu-card-body{padding:19px}}

.menu-price{display:inline-block;margin-top:16px;padding:6px 13px;border-radius:999px;background:#ffe1f1;color:#b71876;font-family:Outfit,sans-serif;font-size:.95rem;font-weight:800}

/* Dero: left side of the beach hero */
.hero .dero-sidebar{position:absolute;left:max(0px,calc((100vw - 1500px)/2));bottom:12px;z-index:2;width:clamp(180px,24vw,390px);max-height:96%;object-fit:contain;object-position:bottom left;pointer-events:none;filter:drop-shadow(0 12px 14px rgba(22,59,74,.22))}.hero .hero-inner{z-index:3}@media(max-width:1000px){.hero .dero-sidebar{width:clamp(145px,25vw,250px);opacity:.95}.hero .hero-inner{padding-left:80px}}@media(max-width:620px){.hero .dero-sidebar{width:130px;max-height:220px;bottom:5px;left:-22px;opacity:.95}.hero .hero-inner{padding-left:0;padding-bottom:100px}.hero .hero-logo{width:min(90vw,520px)}}

/* Dero positioning refinement: slightly larger, closer to logo, and overlapping the next section */
.hero{overflow:visible;isolation:isolate}.hero .dero-sidebar{width:clamp(205px,27vw,440px);left:max(18px,calc((100vw - 1440px)/2 + 36px));bottom:-36px;max-height:none;z-index:4}.hero .wave{z-index:1}.hero .hero-inner{z-index:3}@media(max-width:1000px){.hero .dero-sidebar{width:clamp(160px,28vw,285px);left:12px;bottom:-25px}}@media(max-width:620px){.hero .dero-sidebar{width:145px;left:-10px;bottom:-20px;max-height:245px}.hero .hero-inner{padding-bottom:100px}}

/* Breeze: mirrored counterpart to Dero on the right */
.hero .breeze-sidebar{position:absolute;right:max(18px,calc((100vw - 1440px)/2 + 36px));bottom:-36px;z-index:4;width:clamp(205px,27vw,440px);max-height:none;height:auto;object-fit:contain;object-position:bottom right;pointer-events:none;filter:drop-shadow(0 12px 14px rgba(22,59,74,.22))}@media(max-width:1000px){.hero .breeze-sidebar{width:clamp(160px,28vw,285px);right:12px;bottom:-25px}}@media(max-width:620px){.hero .breeze-sidebar{width:145px;right:-10px;bottom:-20px;max-height:245px}}

/* Balanced character spacing and clean white foreground mask */
.hero .dero-sidebar{left:max(12px,calc(50% - 530px));bottom:-34px;z-index:2}.hero .breeze-sidebar{right:max(12px,calc(50% - 530px));bottom:-34px;z-index:2}.hero .wave{z-index:5}.hero::after{content:"";position:absolute;z-index:5;left:0;right:0;bottom:-85px;height:85px;background:var(--white);pointer-events:none}.hero .hero-inner{z-index:3}@media(max-width:1000px){.hero .dero-sidebar{left:0}.hero .breeze-sidebar{right:0}}@media(max-width:620px){.hero .dero-sidebar{left:-10px;bottom:-20px}.hero .breeze-sidebar{right:-10px;bottom:-20px}.hero::after{bottom:-45px;height:45px}}

/* Responsive character placement: symmetric outer gutters, clear of center logo */
.hero .dero-sidebar{left:max(0px,calc(50% - 750px));right:auto}.hero .breeze-sidebar{right:max(0px,calc(50% - 750px));left:auto}
@media(max-width:1200px){.hero .dero-sidebar{left:0;width:clamp(135px,22vw,265px)}.hero .breeze-sidebar{right:0;width:clamp(135px,22vw,265px)}}
@media(max-width:720px){.hero .dero-sidebar{left:-14px;width:clamp(85px,24vw,160px);bottom:-20px}.hero .breeze-sidebar{right:-14px;width:clamp(85px,24vw,160px);bottom:-20px}.hero .hero-inner{padding:0 0 100px}.hero .hero-logo{width:min(84vw,520px)}.hero .tagline{position:relative;z-index:6}}
@media(max-width:420px){.hero .dero-sidebar{left:-25px;width:29vw;bottom:-15px}.hero .breeze-sidebar{right:-25px;width:29vw;bottom:-15px}.hero .hero-inner{padding-bottom:95px}.hero .hero-logo{width:88vw}}

/* Small symmetrical inward adjustment */
.hero .dero-sidebar{left:max(20px,calc(50% - 730px))}.hero .breeze-sidebar{right:max(20px,calc(50% - 730px))}
@media(max-width:1200px){.hero .dero-sidebar{left:18px}.hero .breeze-sidebar{right:18px}}
@media(max-width:720px){.hero .dero-sidebar{left:0}.hero .breeze-sidebar{right:0}}
@media(max-width:420px){.hero .dero-sidebar{left:-15px}.hero .breeze-sidebar{right:-15px}}

/* Final subtle inward nudge (12px per character) */
.hero .dero-sidebar{left:max(32px,calc(50% - 718px))}.hero .breeze-sidebar{right:max(32px,calc(50% - 718px))}
@media(max-width:1200px){.hero .dero-sidebar{left:30px}.hero .breeze-sidebar{right:30px}}
@media(max-width:720px){.hero .dero-sidebar{left:12px}.hero .breeze-sidebar{right:12px}}
@media(max-width:420px){.hero .dero-sidebar{left:-3px}.hero .breeze-sidebar{right:-3px}}

/* Dero only: tiny move right; Breeze unchanged */
.hero .dero-sidebar{left:max(44px,calc(50% - 706px))}
@media(max-width:1200px){.hero .dero-sidebar{left:42px}}
@media(max-width:720px){.hero .dero-sidebar{left:24px}}
@media(max-width:420px){.hero .dero-sidebar{left:9px}}

/* Authentic neon logo in top navigation */
.topbar .brand{display:inline-flex;align-items:center;flex-shrink:0;line-height:1}.topbar .nav-logo{display:block;width:auto;height:30px;max-width:min(180px,42vw);object-fit:contain}.topbar{min-height:64px}@media(max-width:720px){.topbar .nav-logo{height:27px;max-width:150px}}

/* Centered five-item navigation without header logo */
.topbar{justify-content:center}.topbar nav{justify-content:center;align-items:center;gap:clamp(16px,2.2vw,32px)}@media(max-width:720px){.topbar{justify-content:flex-end}.topbar nav{align-items:stretch;gap:0}.topbar .menu-toggle{margin-left:auto}}

/* Event announcement */
.event-card{display:flex;justify-content:space-between;align-items:center;gap:22px;background:#fff;border:1px solid #163b4a0d;border-radius:18px;padding:28px;box-shadow:0 5px 24px #163b4a12}.event-card h3{font:800 1.45rem/1.2 Outfit,sans-serif;margin:0 0 9px}.event-card p{margin:0;color:#56717b}.event-badge{display:inline-block;white-space:nowrap;padding:8px 14px;border-radius:999px;background:#ffe1f1;color:#b71876;font-weight:800;font-size:.85rem}@media(max-width:620px){.event-card{align-items:flex-start;flex-direction:column;padding:22px}}

.events-list{display:grid;gap:18px;margin-top:28px}

/* Food thumbnails: transparent illustrated menu images */
.menu-card-photo{height:180px;overflow:hidden}.menu-card-photo img{display:block;width:100%;height:100%;object-fit:contain;padding:8px 12px}@media(max-width:620px){.menu-card-photo{height:160px}}

/* Beach Bites visual refresh — tropical atmosphere & illustrated menu */
.hero{background:
 radial-gradient(ellipse at 20% 20%,rgba(255,255,255,.28),transparent 33%),
 linear-gradient(180deg,#8be5ec 0%,#c7f3ec 62%,#ffe2ad 62%,#f6c78d 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.32;background:
 radial-gradient(ellipse at 7% 52%,rgba(255,255,255,.75) 0 2px,transparent 3px),
 radial-gradient(ellipse at 93% 42%,rgba(255,255,255,.75) 0 2px,transparent 3px),
 repeating-radial-gradient(ellipse 145px 34px at 50% 63%,transparent 0 21px,rgba(255,255,255,.32) 22px 24px,transparent 25px 48px);
 mask-image:linear-gradient(to bottom,transparent 30%,black 65%,transparent 87%)}
.sun{box-shadow:0 0 0 15px rgba(255,244,187,.12),0 0 0 36px rgba(255,244,187,.09),0 0 80px #fff4bb80}
.section:not(.alt){background:linear-gradient(180deg,#fffdf8,#fffaf0)}
.menu-grid{align-items:stretch;gap:24px}
.menu-card{display:flex;flex-direction:column;border:1px solid rgba(22,59,74,.055);border-radius:22px;box-shadow:0 7px 26px rgba(22,59,74,.075);transition:transform .24s ease,box-shadow .24s ease}
.menu-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(22,59,74,.14)}
.menu-card-photo{height:205px;position:relative;isolation:isolate;background:linear-gradient(125deg,#a4edf0,#ffe7b4)}
.menu-card-photo::after{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.34);border-radius:13px;pointer-events:none;z-index:-1}
.menu-card-photo img{height:100%;width:100%;padding:5px 16px;object-fit:contain;filter:drop-shadow(0 8px 7px rgba(42,70,56,.12));transition:transform .3s ease}
.menu-card:hover .menu-card-photo img{transform:scale(1.065)}
.menu-card-body{display:flex;flex-direction:column;flex:1;padding:23px 24px 24px}
.menu-card h3{font-size:1.34rem;letter-spacing:-.02em}
.menu-card p{flex:1;line-height:1.65}
.menu-price{align-self:flex-start;margin-top:20px;padding:7px 15px;box-shadow:inset 0 0 0 1px rgba(183,24,118,.06)}
@media(max-width:620px){
 .menu-grid{gap:18px}
 .menu-card-photo{height:180px}
 .menu-card-body{padding:20px}
 .menu-card:hover{transform:none}
 .menu-card:hover .menu-card-photo img{transform:none}
}
@media(prefers-reduced-motion:reduce){.menu-card,.menu-card-photo img{transition:none}}

/* Beach Bites: sun-weathered wooden beach signs, CSS only */
.hero .button,.menu-price{
  position:relative;
  color:#442b19;
  background:
    repeating-linear-gradient(0deg,transparent 0 9px,rgba(92,48,19,.065) 10px,transparent 12px),
    linear-gradient(95deg,#c88b4c 0%,#e9ba76 24%,#d7a05f 54%,#eac184 78%,#bd7d41 100%);
  border:2px solid #a96e38;
  border-radius:7px 12px 8px 11px;
  box-shadow:inset 0 2px 1px rgba(255,246,205,.48),inset 0 -3px 2px rgba(101,54,21,.16),0 4px 0 #8e592f,0 8px 15px rgba(65,42,25,.16);
  text-shadow:0 1px rgba(255,239,193,.45);
  font-family:Outfit,sans-serif;
  font-weight:800;
  transform:rotate(-1deg);
}
.hero .button{padding:12px 25px;letter-spacing:.01em;transition:transform .2s ease,box-shadow .2s ease}
.hero .button:hover{transform:translateY(-3px) rotate(0deg);box-shadow:inset 0 2px 1px rgba(255,246,205,.48),0 6px 0 #8e592f,0 12px 18px rgba(65,42,25,.18)}
.hero .button:focus-visible{outline:3px solid #163b4a;outline-offset:5px}
.menu-price{margin-top:20px;padding:6px 15px;font-size:.96rem;transform:rotate(-2deg);align-self:flex-start}
.menu-card:nth-child(even) .menu-price{transform:rotate(1.5deg)}
@media(prefers-reduced-motion:reduce){.hero .button{transition:none}}

/* Keep all wooden signs perfectly horizontal */
.hero .button,.menu-price,.menu-card:nth-child(even) .menu-price{transform:none}
.hero .button:hover{transform:translateY(-3px)}

/* Vespucci beach scenery — airy clouds, palms and fine sand */
.hero{overflow:hidden}
.hero .beach-cloud{position:absolute;z-index:1;pointer-events:none;width:155px;height:45px;opacity:.65;background:radial-gradient(ellipse at 25% 75%,white 0 27%,transparent 29%),radial-gradient(ellipse at 49% 42%,white 0 35%,transparent 37%),radial-gradient(ellipse at 76% 75%,white 0 26%,transparent 28%);filter:blur(1px)}
.hero .cloud-one{top:16%;left:13%}
.hero .cloud-two{top:25%;right:22%;transform:scale(.75);opacity:.48}
.hero .beach-palm{position:absolute;z-index:1;bottom:0;width:clamp(130px,18vw,290px);height:clamp(220px,33vw,420px);background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20250%20390%22%3E%3Cpath%20d%3D%22M130%20390%20Q145%20270%20115%20128%22%20fill%3D%22none%22%20stroke%3D%22%2391613d%22%20stroke-width%3D%2220%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M130%20390%20Q145%20270%20115%20128%22%20fill%3D%22none%22%20stroke%3D%22%23c18a51%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%2211%2013%22%2F%3E%3Cg%20fill%3D%22%23397d67%22%20stroke%3D%22%23286753%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M115%20125%20Q40%2048%204%20122%20Q55%2097%20115%20139Z%22%2F%3E%3Cpath%20d%3D%22M115%20125%20Q49%2010%2021%2048%20Q80%2056%20121%20138Z%22%2F%3E%3Cpath%20d%3D%22M115%20125%20Q109%2013%20160%209%20Q132%2068%20125%20137Z%22%2F%3E%3Cpath%20d%3D%22M115%20125%20Q199%2036%20243%2077%20Q176%2083%20123%20139Z%22%2F%3E%3Cpath%20d%3D%22M115%20125%20Q212%20110%20227%20174%20Q177%20134%20120%20139Z%22%2F%3E%3Cpath%20d%3D%22M115%20125%20Q66%20105%2044%20193%20Q83%20150%20119%20139Z%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%22122%22%20cy%3D%22142%22%20r%3D%2210%22%20fill%3D%22%23a86b37%22%2F%3E%3Ccircle%20cx%3D%22108%22%20cy%3D%22145%22%20r%3D%228%22%20fill%3D%22%239a6131%22%2F%3E%3C%2Fsvg%3E") center bottom/contain no-repeat;opacity:.67;pointer-events:none}
.hero .palm-left{left:-35px;transform:rotate(-8deg);transform-origin:bottom}
.hero .palm-right{right:-48px;transform:scaleX(-1) rotate(-7deg);transform-origin:bottom}
.hero::before{opacity:.65;background:
 radial-gradient(circle at 10% 80%,rgba(150,99,49,.25) 0 1px,transparent 2px),
 radial-gradient(circle at 67% 90%,rgba(150,99,49,.22) 0 1px,transparent 2px),
 radial-gradient(circle at 85% 75%,rgba(255,255,255,.55) 0 1px,transparent 2px),
 repeating-radial-gradient(ellipse 145px 34px at 50% 63%,transparent 0 21px,rgba(255,255,255,.23) 22px 24px,transparent 25px 48px);
 background-size:37px 31px,53px 43px,29px 27px,auto;
 mask-image:linear-gradient(to bottom,transparent 45%,black 67%,black 100%)}
#jidlo{position:relative;background:radial-gradient(ellipse at -10% 16%,rgba(113,206,196,.095),transparent 32%),radial-gradient(ellipse at 110% 58%,rgba(231,185,111,.13),transparent 35%),linear-gradient(180deg,#fffdf8,#fffaf0)}
@media(max-width:900px){.hero .beach-palm{width:150px;height:240px;opacity:.45}.hero .palm-left{left:-75px}.hero .palm-right{right:-75px}}
@media(max-width:620px){.hero .beach-palm{width:115px;height:190px;opacity:.32}.hero .palm-left{left:-75px}.hero .palm-right{right:-75px}.hero .cloud-one{left:4%;top:11%;transform:scale(.55)}.hero .cloud-two{right:3%;top:19%;transform:scale(.45)}}

/* Spacious beachside details without distracting from the menu */
#jidlo{background:
 radial-gradient(ellipse 230px 470px at 0% 30%,rgba(74,179,164,.12),transparent 95%),
 radial-gradient(ellipse 230px 470px at 100% 68%,rgba(238,180,98,.17),transparent 95%),
 linear-gradient(180deg,#fffdf8,#fffaf0)}
#jidlo::before,#jidlo::after{content:"";position:absolute;top:115px;bottom:80px;width:min(19vw,280px);pointer-events:none;opacity:.33;background:
 repeating-radial-gradient(ellipse 130px 200px at 0% 45%,transparent 0 38px,rgba(72,169,155,.12) 39px 41px,transparent 42px 72px);
 mask-image:linear-gradient(to bottom,transparent,black 20%,black 78%,transparent)}
#jidlo::before{left:0}
#jidlo::after{right:0;transform:scaleX(-1)}
#jidlo>.container{position:relative;z-index:1}
/* Drop the slogan and wooden CTA together, keeping the logo and characters fixed */
.hero .tagline{position:relative;top:20px}
.hero .hero-inner>.button{position:relative;top:20px}
@media(max-width:720px){
 #jidlo::before,#jidlo::after{width:12vw;opacity:.17}
 .hero .tagline,.hero .hero-inner>.button{top:12px}
}

/* Soft shoreline gradient across the menu: seafoam at edges, warm sand at center */
#jidlo,#jidlo.section:not(.alt){
 background:
 radial-gradient(ellipse 38% 70% at -5% 42%,rgba(110,211,206,.32),transparent 100%),
 radial-gradient(ellipse 38% 70% at 105% 58%,rgba(111,211,204,.28),transparent 100%),
 linear-gradient(115deg,#e4f7ef 0%,#f6f1df 22%,#fff0d3 50%,#f6f1df 78%,#dff5ee 100%);
}
#jidlo::before,#jidlo::after{opacity:.24}
@media(max-width:620px){
 #jidlo,#jidlo.section:not(.alt){background:linear-gradient(145deg,#e7f8f1 0%,#fff1d8 55%,#e7f7ef 100%)}
}

/* Restore original light food-section background */
#jidlo,#jidlo.section:not(.alt){background:#fffdf8}
#jidlo::before,#jidlo::after{display:none}
/* Replace CSS palm artwork with uploaded coconut-tree PNG */
.hero .beach-palm{position:absolute;z-index:1;bottom:0;width:clamp(155px,20vw,320px);height:clamp(245px,34vw,440px);object-fit:contain;object-position:center bottom;background:none;opacity:1;pointer-events:none}
.hero .palm-left{left:-35px;transform:none}
.hero .palm-right{right:-35px;transform:scaleX(-1)}
@media(max-width:900px){.hero .beach-palm{width:165px;height:260px;opacity:1}.hero .palm-left{left:-65px}.hero .palm-right{right:-65px}}
@media(max-width:620px){.hero .beach-palm{width:115px;height:190px;opacity:.85}.hero .palm-left{left:-65px}.hero .palm-right{right:-65px}}

/* Fine-tune coconut trees: slightly higher and closer to center */
.hero .beach-palm{bottom:14px}
.hero .palm-left{left:-17px}
.hero .palm-right{right:-17px}
@media(max-width:900px){.hero .palm-left{left:-50px}.hero .palm-right{right:-50px}}
@media(max-width:620px){.hero .beach-palm{bottom:9px}.hero .palm-left{left:-55px}.hero .palm-right{right:-55px}}


/* Mobile-first hero polish: compact header, balanced logo and visible characters.
   Desktop layout remains unchanged. */
@media (max-width:720px){
  html{scroll-padding-top:64px}
  .topbar{min-height:56px;padding:8px 18px;flex-wrap:wrap}
  .topbar .menu-toggle{font-size:1.45rem;line-height:1;padding:8px 10px}
  .topbar nav{width:100%;flex-basis:100%;padding:4px 0 8px}
  .topbar nav a{padding:10px 4px}
  .hero{
    min-height:0;
    height:auto;
    padding:36px 14px 0;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    overflow:hidden;
  }
  .hero .hero-inner{
    width:100%;
    padding:0 0 168px;
    position:relative;
    z-index:3;
  }
  .hero .eyebrow{font-size:.66rem;letter-spacing:.16em;margin:0 0 14px}
  .hero .hero-logo{width:min(84vw,460px);max-height:none;margin:0 auto 8px}
  .hero .tagline{
    top:0;
    margin:14px auto 20px;
    max-width:340px;
    font-size:clamp(.99rem,4.2vw,1.16rem);
    line-height:1.4;
  }
  .hero .hero-inner>.button{
    top:0;
    font-size:.98rem;
    padding:10px 18px;
    max-width:calc(100vw - 50px);
  }
  .hero .sun{top:32px;right:5%;width:76px;height:76px}
  .hero .cloud-one{top:10%;left:1%}
  .hero .cloud-two{top:20%;right:1%}
  .hero .dero-sidebar,.hero .breeze-sidebar{
    bottom:-12px;
    width:clamp(130px,38vw,205px);
    max-height:none;
    height:auto;
    z-index:4;
    opacity:1;
  }
  .hero .dero-sidebar{left:-10px}
  .hero .breeze-sidebar{right:-10px}
  .hero .beach-palm{
    bottom:5px;
    width:clamp(120px,32vw,170px);
    height:auto;
    max-height:215px;
    opacity:.9;
    z-index:1;
  }
  .hero .palm-left{left:-58px}
  .hero .palm-right{right:-58px}
  .hero .wave{height:30px;z-index:5}
  .hero::after{display:none}
  #jidlo{padding-top:50px}
}
@media(max-width:390px){
  .hero{padding-top:30px}
  .hero .hero-inner{padding-bottom:145px}
  .hero .dero-sidebar,.hero .breeze-sidebar{width:38vw}
  .hero .tagline{margin-top:10px;margin-bottom:17px}
}

/* Mobile composition v2: characters are the foreground, palms frame the scene. */
@media(max-width:720px){
 .topbar{height:54px;min-height:54px;padding:6px 16px;align-items:center;justify-content:flex-end}
 .topbar .menu-toggle{margin-left:auto}
 .hero{padding:24px 12px 0;min-height:620px;background:linear-gradient(180deg,#93e6ea 0%,#c7f3ec 58%,#ffe2ad 58%,#f5c58c 100%)}
 .hero .hero-inner{padding:0 0 255px!important;width:100%}
 .hero .eyebrow{margin:0 auto 8px;font-size:.65rem;letter-spacing:.13em}
 .hero .hero-logo{width:min(88vw,480px);margin:0 auto 2px}
 .hero .tagline{margin:12px auto 16px;top:0;font-size:clamp(1rem,4.2vw,1.25rem)}
 .hero .hero-inner>.button{top:0;padding:11px 20px;font-size:1rem}
 .hero .dero-sidebar,.hero .breeze-sidebar{width:clamp(205px,58vw,300px)!important;max-height:none!important;height:auto;bottom:-8px!important;opacity:1;z-index:4}
 .hero .dero-sidebar{left:-45px!important;right:auto}
 .hero .breeze-sidebar{right:-45px!important;left:auto}
 .hero .beach-palm{width:clamp(170px,46vw,235px)!important;height:260px!important;max-height:none!important;bottom:80px!important;opacity:.85;z-index:2}
 .hero .palm-left{left:-105px!important}
 .hero .palm-right{right:-105px!important}
 .hero .wave{z-index:6;height:25px}
 .hero::after{display:none}
}
@media(max-width:390px){
 .hero{min-height:590px;padding-top:24px}
 .hero .hero-inner{padding-bottom:245px!important}
 .hero .dero-sidebar,.hero .breeze-sidebar{width:58vw!important}
}

/* Mobile navigation: keep expanded menu in its own solid layer, never overlay page content. */
@media(max-width:720px){
 .topbar{position:sticky;top:0;z-index:1000;display:flex;flex-wrap:nowrap;height:56px;min-height:56px;overflow:visible;background:#fffdf8;isolation:isolate}
 .topbar .menu-toggle{display:block;position:relative;z-index:1002;flex-shrink:0}
 .topbar nav{display:none;position:absolute;top:100%;left:0;right:0;width:100%;max-height:calc(100dvh - 56px);overflow-y:auto;flex-basis:auto;flex-direction:column;gap:0;margin:0;padding:10px 20px 18px;background:#fffdf8;box-shadow:0 14px 22px rgba(22,59,74,.16);border-top:1px solid rgba(22,59,74,.1);z-index:1001}
 .topbar nav.open{display:flex}
 .topbar nav a{display:block;width:100%;padding:12px 8px;font-size:1rem;line-height:1.5;border-top:0;border-bottom:1px solid rgba(22,59,74,.1)}
 .topbar nav a:last-child{border-bottom:0}
}