@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --turquoise: #00b5a5;
  --turquoise-dark: #008f82;
  --sunset: #ff7a3d;
  --sunset-dark: #e55d22;
  --sun: #ffc93c;
  --pink: #ff4f8b;
  --lagoon: #d9f5f1;
  --sand: #fff7ea;
  --navy: #0b2545;
  --ink: #14213d;
  --muted: #5a6780;
  --line: #e9e4d8;
  --bg: #ffffff;
  --panel: #fff7ea;
  --accent: #00a093;
  --accent-dark: #008076;
  --radius: 18px;
  --shadow: 0 2px 4px rgba(11,37,69,.06), 0 10px 26px rgba(11,37,69,.10);
}

* { box-sizing: border-box; }
body { margin:0; font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink); background:var(--sand); font-size:16px; line-height:1.6; }
h1, h2, h3, .brand, .btn, nav.main > a { font-family:"Fredoka", "Inter", system-ui, sans-serif; letter-spacing:-.01em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height:1.05; margin:0 0 14px; font-weight:700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin:0 0 14px; font-weight:700; }
h3 { font-size: 1.25rem; margin:6px 0 8px; font-weight:600; }
a { color: var(--accent); font-weight:600; }
p { margin:0 0 14px; }
.wrap { max-width: 1160px; margin:0 auto; padding:0 22px; }
.small { font-size:.85rem; color:var(--muted); }
.note { background:#fff1c7; border-radius:14px; padding:14px 18px; font-size:.92rem; margin:26px 0 0; border-left:6px solid var(--sun); }

/* Header and menu */
header.site { background:#fff; position:sticky; top:0; z-index:20; box-shadow:0 3px 0 var(--sun); }
header.site .bar { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px; flex-wrap:wrap; padding-top:8px; padding-bottom:8px; }
.brand { font-weight:700; font-size:1.6rem; color:var(--navy); text-decoration:none; }
.brand::before { content:"🌴 "; }
nav.main { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
nav.main > a, nav.main .menu > a { color:var(--navy); text-decoration:none; font-weight:600; font-size:1rem; padding:8px 13px; border-radius:999px; display:inline-block; }
nav.main > a:hover, nav.main .menu > a:hover { background:var(--lagoon); color:var(--turquoise-dark); }
nav.main a.cta { background:var(--sunset); color:#fff; }
nav.main a.cta:hover { background:var(--sunset-dark); color:#fff; }
.menu { position:relative; }
.dropdown { display:none; position:absolute; top:100%; left:0; min-width:240px; background:#fff; border-radius:16px; box-shadow:0 14px 34px rgba(11,37,69,.18); padding:10px; margin-top:6px; }
.dropdown a { display:block; padding:9px 14px; color:var(--navy); text-decoration:none; font-size:.95rem; font-weight:500; border-radius:10px; }
.dropdown a:hover { background:var(--lagoon); color:var(--turquoise-dark); }
.menu:hover .dropdown, .menu:focus-within .dropdown { display:block; }

/* Hero */
.hero {
  position:relative; overflow:hidden; color:#fff; padding:96px 0 120px;
  background:
    radial-gradient(circle at 88% 18%, var(--sun) 0 70px, transparent 71px),
    radial-gradient(circle at 8% 85%, var(--pink) 0 46px, transparent 47px),
    linear-gradient(120deg, var(--turquoise) 0%, #0a7fd1 55%, var(--navy) 100%);
}
.hero::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:70px;
  background: var(--sand);
  clip-path: polygon(0 60%, 8% 45%, 16% 62%, 25% 40%, 34% 60%, 43% 42%, 52% 62%, 61% 44%, 70% 60%, 79% 40%, 88% 58%, 96% 46%, 100% 55%, 100% 100%, 0 100%);
}
.hero h1 { color:#fff; max-width:780px; text-shadow:0 3px 14px rgba(0,0,0,.18); }
.hero .eyebrow { display:inline-block; background:var(--sun); color:var(--navy); text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; padding:6px 14px; border-radius:999px; margin:0 0 18px; font-weight:700; }
.lead-hero { font-size:1.15rem; max-width:680px; color:#eaf8ff; margin:0 0 28px; }
.lead-hero.dark { color:var(--muted); }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-block; background:var(--sunset); color:#fff; padding:14px 26px; border-radius:999px; font-weight:600; text-decoration:none; border:0; cursor:pointer; font-size:1.02rem; font-family:"Fredoka", "Inter", sans-serif; box-shadow:0 6px 16px rgba(255,122,61,.35); transition:transform .15s; }
.btn:hover { background:var(--sunset-dark); color:#fff; transform:translateY(-2px); }
.btn-light { background:#fff; color:var(--navy); box-shadow:0 6px 16px rgba(0,0,0,.12); }
.btn-light:hover { background:var(--sun); color:var(--navy); }

/* Sections */
section { padding:64px 0; }
section.alt { background:#fff; }
section.alt-2 { background:var(--lagoon); }
.section-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
.section-head h2 { margin:0; }
.section-head a { font-family:"Fredoka", sans-serif; font-size:1.05rem; }

/* Cards */
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:22px; }
.place, .biz { display:block; background:#fff; border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); color:var(--ink); text-decoration:none; position:relative; overflow:hidden; }
.place { transition:transform .18s, box-shadow .18s; }
.place:nth-child(3n+1) { border-top:6px solid var(--turquoise); }
.place:nth-child(3n+2) { border-top:6px solid var(--sunset); }
.place:nth-child(3n+3) { border-top:6px solid var(--pink); }
a.place:hover { transform:translateY(-5px) rotate(-.4deg); box-shadow:0 18px 36px rgba(11,37,69,.18); }
.place p, .biz p { color:var(--muted); font-size:.95rem; margin:0 0 10px; }
.place .more { font-weight:700; color:var(--sunset-dark); font-size:.92rem; }
.biz { border-top:6px solid var(--sun); }
.biz .city { color:var(--turquoise-dark); font-weight:700; font-size:.88rem; margin:0 0 6px; }
.biz a { font-size:.92rem; }
.contact-line { font-size:.9rem; }
.tag-cat { display:inline-block; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--navy); background:var(--sun); padding:4px 11px; border-radius:999px; margin-bottom:10px; }
.ad-cta { display:flex; justify-content:space-between; align-items:center; gap:22px; flex-wrap:wrap; background:linear-gradient(120deg, var(--sunset), var(--pink)); color:#fff; border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }
.ad-cta h3 { margin-top:0; color:#fff; font-size:1.5rem; }
.ad-cta p { margin:0; color:#ffeef4; }
.ad-cta .btn { background:var(--navy); box-shadow:none; }
.ad-cta .btn:hover { background:#000; }
.ad-note { margin-top:24px; font-weight:700; font-family:"Fredoka", sans-serif; font-size:1.1rem; }

/* Inner pages */
.page-head { background:linear-gradient(120deg, var(--turquoise), var(--navy)); color:#fff; padding:56px 0 52px; }
.page-head h1 { color:#fff; font-size:clamp(2rem, 4.5vw, 3rem); }
.page-head .tag-cat { background:var(--sun); }
.page-head .lead-hero.dark { color:#e7f7ff; }
.crumbs { font-size:.9rem; color:#d6f3ef; margin:0 0 14px; }
.crumbs a { color:#fff; }
.pills { display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.pill { padding:8px 16px; border-radius:999px; text-decoration:none; color:var(--navy); font-size:.92rem; font-weight:600; background:#fff; }
.pill.on, .pill:hover { background:var(--sun); color:var(--navy); }
.article { max-width:780px; }
.article h2 { margin-top:30px; color:var(--navy); }
.body { margin:0 0 16px; font-size:1.05rem; }
.two-col { display:grid; grid-template-columns:1fr 1.1fr; gap:46px; align-items:start; }
.steps { padding-left:22px; }
.steps li { margin-bottom:12px; }
.form label { display:block; font-weight:600; font-size:.92rem; margin-bottom:14px; }
.form input[type=text], .form input[type=email], .form input[type=url], .form select, .form textarea {
  display:block; width:100%; padding:11px 13px; border:2px solid #d8e4ea; border-radius:12px; font:inherit; font-weight:400; margin-top:5px; background:#fff;
}
.form input:focus, .form textarea:focus, .form select:focus { outline:none; border-color:var(--turquoise); }
.form textarea { min-height:100px; }
.form label.check { font-weight:400; }
.form label.check input { margin-right:6px; }
.success { background:var(--lagoon); border-radius:var(--radius); padding:24px; }
.errors { background:#ffe3ea; border-radius:14px; padding:14px 18px; margin-bottom:18px; color:#8a1f3d; }

/* Photos */
.thumb { display:block; width:calc(100% + 44px); max-width:none; height:190px; object-fit:cover; margin:-22px -22px 16px; border-radius:0; }
.hero-img { display:block; width:100%; max-height:460px; object-fit:cover; }

/* Footer */
footer.site { background:var(--navy); color:#b4c4d9; padding:48px 0; font-size:.94rem; border-top:6px solid var(--sun); }
footer.site .foot { display:grid; grid-template-columns:1.4fr 1fr; gap:34px; }
footer.site strong { color:#fff; font-family:"Fredoka", sans-serif; font-size:1.25rem; font-weight:600; }
footer.site p { margin:0 0 8px; }
footer.site a { color:var(--sun); }

@media (max-width: 760px) {
  .two-col, footer.site .foot { grid-template-columns:1fr; }
  .hero { padding:60px 0 100px; }
  nav.main { gap:0; }
  .dropdown { position:static; box-shadow:none; padding:0 0 0 12px; background:transparent; }
  .menu:hover .dropdown { display:block; }
}