/* ==========================================================================
   I'm Moving to Florida — Coastal Postcard Theme
   Hand-crafted feel: sun, sea, sand, palms, sunglasses, vintage postcard.
   Fonts: Fraunces (display, retro-editorial) · Nunito (body, warm)
         · Caveat (hand-lettered accents)
   ========================================================================== */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,700;0,9..144,800;1,9..144,700&family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Coastal postcard palette ───────────────────────────────────────── */
  --ocean:        #0A3D62;   /* deep atlantic navy */
  --ocean-2:      #072847;
  --ocean-3:      #1B6FA8;   /* shallows blue */
  --seafoam:      #4FCBB3;   /* gulf seafoam */
  --seafoam-2:    #37B29A;
  --seafoam-3:    #DBF4EC;
  --coral:        #FF6B4A;   /* flamingo coral */
  --coral-2:      #E84E2D;
  --sunset:       #FF9A60;   /* horizon sunset */
  --sunset-2:     #FFC994;
  --mango:        #FFB84D;   /* key lime-mango */
  --sand:         #F0E2BE;   /* warm sand */
  --sand-2:       #F9F1DB;   /* light sand */
  --shell:        #FFF6E5;   /* soft shell cream */
  --palm:         #2F8F5B;   /* palm frond green */
  --palm-2:       #1F6D41;
  --gold:         #FFC857;   /* sunshine gold (ratings) */
  --hibiscus:     #E83E7A;   /* accent pink */
  --sky:          #CDE8F3;

  /* ── Neutrals (warmer than default) ─────────────────────────────────── */
  --bg:           #FDF8ED;   /* cream page bg — feels like parchment */
  --bg-paper:     #FFFBF2;   /* slightly warmer for cards */
  --card:         #FFFFFF;
  --text:         #1F2A3C;   /* deep ink */
  --muted:        #6F7C92;
  --border:       #E7DDC7;   /* warm border */
  --border-soft:  #F3EADA;
  --border-cool:  #DAE6EB;

  --shadow-sm:    0 1px 2px rgba(31,42,60,0.06), 0 2px 6px rgba(31,42,60,0.04);
  --shadow:       0 2px 6px rgba(31,42,60,0.08), 0 8px 24px rgba(31,42,60,0.06);
  --shadow-lg:    0 6px 16px rgba(31,42,60,0.10), 0 18px 44px rgba(31,42,60,0.10);
  --shadow-warm:  0 2px 8px rgba(255,107,74,0.20), 0 14px 32px rgba(255,107,74,0.12);

  --radius:       14px;
  --radius-sm:    9px;
  --radius-pill:  999px;
  --max:          1200px;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-script:  'Caveat', 'Brush Script MT', cursive;
}

/* ── Reset / base ───────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    /* subtle paper grain */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='1' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.82  0 0 0 0 0.68  0 0 0 0 0.40  0 0 0 0.035 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ocean-3); text-decoration: none; transition: color .15s; }
a:hover { color: var(--coral); text-decoration: underline; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 22px; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.4px; }
h1 { font-weight: 800; }

/* Script accent */
.handwritten {
  font-family: var(--font-script);
  font-weight: 700;
  color: var(--coral);
  font-size: 1.4em;
  line-height: 1;
  transform: rotate(-2deg);
  display: inline-block;
}
.handwritten-sub {
  font-family: var(--font-script);
  font-weight: 500;
  color: var(--sunset);
  font-size: 22px;
  display: block;
  margin-bottom: 6px;
  transform: rotate(-1.5deg);
  opacity: 0.95;
}

/* ── Header — deep ocean, palm silhouette, postcard pennant ───────────── */
.site-header {
  background:
    linear-gradient(180deg, rgba(7,40,71,0.92) 0%, rgba(10,61,98,0.92) 100%),
    linear-gradient(135deg, var(--ocean-2) 0%, var(--ocean) 100%);
  color: #fff;
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(10,61,98,0.22);
  border-bottom: 3px solid var(--seafoam);
}
.site-header .container { display: flex; align-items: center; gap: 24px; }
.logo {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-style: italic;
}
.logo:hover { text-decoration: none; color: #fff; }
.logo::before {
  content: "";
  display: inline-block;
  width: 34px; height: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><defs><radialGradient id='s' cx='35%25' cy='35%25'><stop offset='0%25' stop-color='%23FFE59A'/><stop offset='60%25' stop-color='%23FFC857'/><stop offset='100%25' stop-color='%23FF9A60'/></radialGradient></defs><circle cx='20' cy='20' r='15' fill='url(%23s)'/><g stroke='%23FFC857' stroke-width='1.5' stroke-linecap='round'><line x1='20' y1='3' x2='20' y2='7'/><line x1='20' y1='33' x2='20' y2='37'/><line x1='3' y1='20' x2='7' y2='20'/><line x1='33' y1='20' x2='37' y2='20'/><line x1='7' y1='7' x2='10' y2='10'/><line x1='30' y1='30' x2='33' y2='33'/><line x1='7' y1='33' x2='10' y2='30'/><line x1='30' y1='10' x2='33' y2='7'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 6px rgba(255,200,87,0.45));
}
.logo .accent { color: var(--sunset); font-style: normal; font-weight: 700; }
.nav { margin-left: auto; display: flex; gap: 20px; align-items: center; }
.nav a { color: rgba(255,255,255,0.88); font-size: 14.5px; font-weight: 600; letter-spacing: 0.1px; }
.nav a:hover { color: var(--sunset); text-decoration: none; }
.nav .btn { padding: 9px 18px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 13px 24px;
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s, background .15s, color .15s;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--coral-2), 0 6px 18px rgba(255,107,74,0.22);
}
.btn:hover {
  background: var(--coral-2);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--coral-2), 0 10px 22px rgba(255,107,74,0.28);
}
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--coral-2), 0 4px 12px rgba(255,107,74,0.18); }
.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.45);
  box-shadow: none;
}
.btn-ghost:hover { background: rgba(255,255,255,0.10); color: #fff; border-color: var(--sunset); }
.btn-ocean { background: var(--ocean); color: #fff; box-shadow: 0 3px 0 var(--ocean-2), 0 6px 18px rgba(10,61,98,0.22); }
.btn-ocean:hover { background: var(--ocean-2); color: #fff; box-shadow: 0 4px 0 var(--ocean-2), 0 10px 22px rgba(10,61,98,0.28); }
.btn-outline {
  background: #fff;
  color: var(--ocean);
  border: 1.5px solid var(--border);
  box-shadow: none;
}
.btn-outline:hover { border-color: var(--coral); color: var(--coral); background: var(--shell); }
.btn-seafoam { background: var(--seafoam); color: var(--ocean); box-shadow: 0 3px 0 var(--seafoam-2), 0 6px 18px rgba(79,203,179,0.25); }
.btn-seafoam:hover { background: var(--seafoam-2); color: var(--ocean); }
.btn-large { padding: 16px 32px; font-size: 16.5px; }
.btn-sm { padding: 8px 14px; font-size: 13px; }

/* ── Hero — Florida postcard scene ──────────────────────────────────────── */
.hero {
  position: relative;
  color: #fff;
  padding: 90px 0 150px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background:
    /* gentle vignette */
    radial-gradient(ellipse at center top, transparent 30%, rgba(0,0,0,0.22) 100%),
    /* sun glow */
    radial-gradient(circle at 78% 22%, rgba(255,200,120,0.55) 0%, rgba(255,160,90,0.25) 25%, transparent 45%),
    /* sky gradient: night-dawn → sunset → water teal at horizon */
    linear-gradient(180deg,
      #1B3B6F 0%,
      #2E5A8D 20%,
      #4A7DA5 35%,
      #8FB8C4 48%,
      #FFA87A 58%,
      #FFC08A 63%,
      #4FCBB3 68%,
      #2F9C99 85%,
      #0A3D62 100%);
}
/* Sun disc */
.hero::before {
  content: "";
  position: absolute;
  top: 70px; right: 14%;
  width: 130px; height: 130px;
  background: radial-gradient(circle at 45% 45%, #FFF0BF 0%, #FFD37A 35%, #FF9A60 70%, rgba(255,154,96,0) 100%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  box-shadow: 0 0 80px 40px rgba(255,180,100,0.35);
}
/* Palm silhouettes + pelican + beach + water ripples */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    /* pelican flying, small */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'><path d='M2 8 Q8 2 14 7 Q18 3 22 6 Q26 3 30 6 Q34 2 38 8' stroke='%231F2A3C' stroke-width='1.4' fill='none' stroke-linecap='round' opacity='0.55'/></svg>"),
    /* right palm tree */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 360' preserveAspectRatio='xMaxYMax meet'><g fill='%23081A2B'><path d='M150 360 Q142 240 156 120 Q160 70 152 40 L158 35 Q166 80 162 130 Q148 250 160 360 Z'/><path d='M155 40 Q110 20 60 35 Q100 25 152 46 Z'/><path d='M155 40 Q200 15 250 30 Q205 20 158 48 Z'/><path d='M155 40 Q120 5 90 0 Q135 15 155 44 Z'/><path d='M155 40 Q190 5 220 0 Q175 15 158 44 Z'/><path d='M155 40 Q95 35 40 75 Q110 50 152 48 Z'/><path d='M155 40 Q215 35 260 70 Q195 50 158 48 Z'/><ellipse cx='150' cy='43' rx='11' ry='5.5'/><circle cx='145' cy='50' r='4'/><circle cx='160' cy='50' r='4'/><circle cx='152' cy='58' r='4'/></g></svg>"),
    /* left palm tree, smaller, further back */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 360' preserveAspectRatio='xMinYMax meet'><g fill='%23081A2B' opacity='0.78'><path d='M70 360 Q62 240 76 120 Q80 70 72 45 L78 40 Q86 85 82 135 Q68 250 80 360 Z'/><path d='M75 45 Q30 25 0 40 Q40 30 72 51 Z'/><path d='M75 45 Q120 20 170 30 Q125 25 78 53 Z'/><path d='M75 45 Q45 10 25 5 Q60 20 75 49 Z'/><path d='M75 45 Q110 15 145 10 Q100 20 78 49 Z'/><path d='M75 45 Q20 40 0 75 Q50 55 72 53 Z'/><path d='M75 45 Q135 40 175 75 Q120 55 78 53 Z'/></g></svg>"),
    /* water ripples */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><g fill='none' stroke='%23FFFFFF' stroke-width='1.2' opacity='0.35'><path d='M0 30 Q120 22 240 30 T480 30 T720 30 T960 30 T1200 30 T1440 30'/><path d='M0 50 Q120 44 240 50 T480 50 T720 50 T960 50 T1200 50 T1440 50' opacity='0.6'/><path d='M0 70 Q120 66 240 70 T480 70 T720 70 T960 70 T1200 70 T1440 70' opacity='0.4'/></g></svg>");
  background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
  background-size: 60px 22px, 260px 360px, 220px 340px, 1440px 90px;
  background-position:
    18% 26%,
    100% 100%,
    0% 100%,
    center calc(100% - 70px);
}
/* Wave divider at very bottom */
.hero .wave-divider {
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 70px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,45 C120,65 240,18 360,28 C480,38 600,62 720,50 C840,38 960,10 1080,18 C1200,26 1320,52 1440,40 L1440,70 L0,70 Z' fill='%23FDF8ED'/></svg>");
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 2;
}
.hero .container { position: relative; z-index: 1; }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5.8vw, 58px);
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 18px;
  line-height: 1.05;
  text-shadow: 0 3px 28px rgba(0,0,0,0.32);
}
.hero h1 .accent {
  color: var(--sunset);
  font-style: italic;
  font-family: var(--font-display);
  display: inline-block;
  position: relative;
}
.hero h1 .accent::after {
  content: "";
  position: absolute;
  bottom: -8px; left: 6%; right: 6%;
  height: 6px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 Q50 1 100 6 T198 6' stroke='%23FF6B4A' stroke-width='3' fill='none' stroke-linecap='round'/></svg>");
  background-size: 100% 100%;
}
.hero p {
  font-size: clamp(15.5px, 1.9vw, 19px);
  color: rgba(255,255,255,0.94);
  max-width: 720px;
  margin: 0 auto 36px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.22);
  line-height: 1.55;
}
.hero .handwritten-sub { color: var(--sunset-2); text-shadow: 0 2px 8px rgba(0,0,0,0.3); font-size: 28px; }
.search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: #fff;
  padding: 9px;
  border-radius: 16px;
  max-width: 760px;
  margin: 0 auto;
  box-shadow: 0 14px 40px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.25);
}
.search-bar input,
.search-bar select {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border: none;
  background: transparent;
  font-size: 15.5px;
  color: var(--text);
  font-family: inherit;
  outline: none;
}
.search-bar input::placeholder { color: var(--muted); }
.search-bar select { cursor: pointer; max-width: 210px; border-left: 1px solid var(--border-soft); }
.search-bar .btn { flex: 0 0 auto; }

/* Trust row */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 36px;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
}
.trust-row .trust-item { display: inline-flex; align-items: center; gap: 9px; }
.trust-row .check {
  display: inline-flex;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--seafoam);
  color: var(--ocean);
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* ── Page heading (non-hero pages) ──────────────────────────────────────── */
.page-head {
  background:
    linear-gradient(180deg, var(--sky) 0%, var(--sand-2) 70%, var(--bg) 100%);
  padding: 48px 0 44px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  top: -20px; right: -60px;
  width: 220px; height: 220px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'><circle cx='110' cy='110' r='60' fill='%23FFC857' opacity='0.35'/><circle cx='110' cy='110' r='42' fill='%23FF9A60' opacity='0.35'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
.page-head::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 26px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 26' preserveAspectRatio='none'><path d='M0 14 Q180 26 360 14 T720 14 T1080 14 T1440 14 L1440 26 L0 26 Z' fill='%23FDF8ED'/></svg>");
  background-size: 100% 100%;
}
.crumbs {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
  font-weight: 500;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--coral); }
.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.2vw, 42px);
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--ocean);
  margin-bottom: 10px;
  line-height: 1.15;
}
.page-head .subtitle {
  color: var(--muted);
  font-size: 16px;
  max-width: 760px;
  font-weight: 500;
}

/* ── Sections ──────────────────────────────────────────────────────────── */
.section { padding: 64px 0; position: relative; }
.section.tight { padding: 40px 0; }
.section.sand-bg {
  background: var(--sand-2);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.73  0 0 0 0 0.48  0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23g)'/></svg>");
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.section.seafoam-bg {
  background: linear-gradient(180deg, var(--seafoam-3) 0%, #C8EDE3 100%);
  border-top: 1px solid rgba(79,203,179,0.22);
  border-bottom: 1px solid rgba(79,203,179,0.22);
}
.section.shell-bg {
  background: var(--shell);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.section h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  color: var(--ocean);
  margin-bottom: 20px;
  letter-spacing: -0.6px;
}
.section h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ocean);
  margin-bottom: 12px;
  letter-spacing: -0.3px;
}
.section .lead {
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 32px;
  max-width: 760px;
  font-weight: 500;
  line-height: 1.6;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.section-head h2 { margin-bottom: 0; }
.section-head .view-all {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--coral);
  font-family: var(--font-body);
}
.section-head .view-all:hover { color: var(--coral-2); }

/* Decorative section title with hand-drawn underline */
.section h2.pop::after {
  content: "";
  display: block;
  margin-top: 8px;
  height: 10px;
  width: 86px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 Q50 1 100 6 T198 6' stroke='%23FF6B4A' stroke-width='3' fill='none' stroke-linecap='round'/></svg>");
  background-size: 100% 100%;
}

/* Section dividers */
.divider-wave {
  height: 70px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0 28 C120 50 240 8 360 20 C480 32 600 58 720 46 C840 34 960 8 1080 16 C1200 24 1320 50 1440 36 L1440 70 L0 70 Z' fill='%23F9F1DB'/></svg>");
  background-size: 100% 100%;
  margin: 0;
}

/* ── Category tiles — postcard cards ───────────────────────────────────── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.cat-tile {
  background: var(--bg-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 16px 20px;
  text-align: center;
  transition: transform .15s, border-color .15s, box-shadow .18s;
  color: var(--text);
  position: relative;
  overflow: hidden;
}
.cat-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--coral) 0%, var(--sunset) 50%, var(--seafoam) 100%);
  opacity: 0;
  transition: opacity .15s;
}
.cat-tile:hover {
  text-decoration: none;
  transform: translateY(-4px) rotate(-0.5deg);
  border-color: var(--coral);
  box-shadow: 0 10px 26px rgba(31,42,60,0.10);
}
.cat-tile:hover::before { opacity: 1; }
.cat-tile .icon {
  font-size: 36px;
  display: block;
  margin-bottom: 12px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(31,42,60,0.15));
}
.cat-tile .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ocean);
  letter-spacing: -0.2px;
}
.cat-tile .count {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 600;
}

/* ── City pills ────────────────────────────────────────────────────────── */
.city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.city-pill {
  background: var(--bg-paper);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
  font-weight: 600;
  font-size: 14.5px;
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
}
.city-pill:hover {
  text-decoration: none;
  border-color: var(--coral);
  background: var(--shell);
  transform: translateY(-2px);
  color: var(--ocean);
  box-shadow: var(--shadow-sm);
}
.city-pill .pill-count {
  background: var(--sand);
  color: var(--ocean);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 800;
}

/* ── Rating stars ──────────────────────────────────────────────────────── */
.rating { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); font-weight: 500; }
.rating .stars { display: inline-flex; gap: 1px; color: var(--gold); font-size: 15px; letter-spacing: 0; }
.rating .stars .empty-star { color: #E6DDC7; }
.rating .score { font-weight: 800; color: var(--ocean); margin-left: 3px; }
.rating .count { color: var(--muted); }
.rating.new-listing { color: var(--ocean-3); font-weight: 600; font-size: 12.5px; }

/* ── Badges ────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
}
.badge-verified {
  background: var(--seafoam-3);
  color: var(--palm-2);
  border: 1px solid rgba(47,143,91,0.28);
}
.badge-claim {
  background: #FFF0E8;
  color: var(--coral-2);
  border: 1px solid rgba(255,107,74,0.30);
}
.badge-featured {
  background: linear-gradient(90deg, var(--gold) 0%, var(--sunset) 100%);
  color: var(--ocean);
  border: none;
}
.badge-new {
  background: var(--sand);
  color: var(--ocean);
  border: 1px solid rgba(10,61,98,0.14);
}
/* Postcard-style stamp */
.stamp {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--coral);
  padding: 6px 14px;
  border: 2px dashed var(--coral);
  border-radius: 6px;
  transform: rotate(-3deg);
  background: #fff;
}

/* ── Business listing card ─────────────────────────────────────────────── */
.list { display: grid; grid-template-columns: 1fr; gap: 14px; }
.biz-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  transition: border-color .15s, box-shadow .18s, transform .12s;
  position: relative;
}
.biz-card:hover {
  border-color: var(--seafoam);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.biz-card.unclaimed::before,
.biz-card.claimed::before {
  content: "";
  position: absolute;
  left: 0; top: 20px; bottom: 20px;
  width: 4px;
  border-radius: 3px;
}
.biz-card.unclaimed::before { background: var(--coral); }
.biz-card.claimed::before { background: var(--seafoam); }
.biz-card .biz-info { min-width: 0; }
.biz-card .biz-info h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--ocean);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.biz-card .biz-info h3 a { color: var(--ocean); }
.biz-card .biz-info h3 a:hover { color: var(--coral); }
.biz-card .biz-meta {
  font-size: 13.5px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 6px;
  align-items: center;
  font-weight: 500;
}
.biz-card .biz-meta a { color: var(--ocean-3); }
.biz-card .biz-meta .sep { color: var(--border); }
.biz-card .biz-services {
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.biz-card .biz-services strong { color: var(--ocean); font-weight: 700; }
.biz-card .biz-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  min-width: 140px;
}
.biz-card .biz-actions .btn { padding: 10px 16px; font-size: 13px; }
.biz-card .biz-actions .phone-btn { background: var(--ocean); color: #fff; box-shadow: 0 2px 0 var(--ocean-2); }
.biz-card .biz-actions .phone-btn:hover { background: var(--ocean-2); color: #fff; }

@media (max-width: 640px) {
  .biz-card { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .biz-card .biz-actions { flex-direction: row; }
  .biz-card .biz-actions .btn { flex: 1; }
}

/* ── Business detail ───────────────────────────────────────────────────── */
.biz-detail {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 40px;
  margin-bottom: 28px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.biz-detail::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--coral) 0%, var(--sunset) 35%, var(--seafoam) 70%, var(--ocean-3) 100%);
}
.biz-detail .biz-header-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; align-items: center; }
.biz-detail h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  color: var(--ocean);
  letter-spacing: -0.7px;
  line-height: 1.12;
  margin-bottom: 12px;
}
.biz-detail .biz-subhead {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 24px;
  align-items: center;
  font-weight: 500;
}
.biz-detail .biz-subhead .sep { color: var(--border); }
.biz-detail .biz-desc {
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 26px;
  max-width: 820px;
}
.biz-detail .biz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.biz-detail .info-block {
  background: var(--sand-2);
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
}
.biz-detail .info-block .label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.9px;
  margin-bottom: 6px;
}
.biz-detail .info-block .value {
  font-size: 15.5px;
  color: var(--ocean);
  font-weight: 700;
  word-break: break-word;
}
.biz-detail .info-block a { color: var(--ocean-3); }
.biz-detail .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

.services-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 22px;
  margin-bottom: 6px;
}
.services-list li {
  list-style: none;
  padding: 8px 0 8px 30px;
  position: relative;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 500;
  border-bottom: 1px dashed var(--border-soft);
}
.services-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 20px; height: 20px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9' fill='%23DBF4EC'/><path d='M5 10.5 L8.5 14 L15 7' stroke='%232F8F5B' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: contain;
}

/* ── Reviews ───────────────────────────────────────────────────────────── */
.review-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  background: var(--sand-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.powered-by-google {
  font-size: 12.5px;
  color: var(--muted);
  margin-left: auto;
  font-style: italic;
  font-weight: 500;
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.review-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.review-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--gold) 0%, var(--sunset) 100%);
  border-radius: 3px 0 0 3px;
}
.review-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; gap: 10px; flex-wrap: wrap; }
.review-author { font-family: var(--font-display); font-weight: 700; color: var(--ocean); font-size: 15px; }
.review-time { font-size: 12px; color: var(--muted); }
.review-text { color: var(--text); font-size: 14.5px; line-height: 1.65; word-wrap: break-word; overflow-wrap: break-word; }

.reviews-empty {
  background: var(--seafoam-3);
  border: 1.5px dashed rgba(79,203,179,0.55);
  border-radius: var(--radius);
  padding: 30px 24px;
  text-align: center;
  color: var(--ocean);
  margin-bottom: 24px;
}
.reviews-empty h3 { font-size: 20px; color: var(--ocean); margin-bottom: 6px; }
.reviews-empty p { color: var(--muted); font-size: 14.5px; max-width: 500px; margin: 0 auto 16px; }

/* ── Claim CTA — postcard with palm silhouette ────────────────────────── */
.claim-cta {
  background:
    linear-gradient(135deg, var(--coral) 0%, var(--sunset) 60%, var(--mango) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 34px 36px;
  margin-bottom: 26px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  align-items: center;
  box-shadow: 0 10px 32px rgba(255,107,74,0.22);
  position: relative;
  overflow: hidden;
}
.claim-cta::before {
  /* sun */
  content: "";
  position: absolute;
  top: -50px; right: -50px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 65%);
  border-radius: 50%;
  pointer-events: none;
}
.claim-cta::after {
  /* palm silhouette bottom-right */
  content: "";
  position: absolute;
  right: -30px; bottom: -40px;
  width: 220px; height: 260px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 260'><g fill='%23FFFFFF' opacity='0.22'><path d='M120 260 Q114 200 122 140 Q124 110 118 88 L122 85 Q128 112 126 142 Q116 210 124 260 Z'/><path d='M120 88 Q80 70 40 78 Q75 70 120 94 Z'/><path d='M120 88 Q160 68 200 75 Q165 70 124 94 Z'/><path d='M120 88 Q95 55 75 50 Q110 65 122 92 Z'/><path d='M120 88 Q145 55 170 50 Q135 65 124 92 Z'/><path d='M120 88 Q70 85 40 115 Q90 92 122 94 Z'/><path d='M120 88 Q170 85 195 115 Q150 92 124 94 Z'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
.claim-cta h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin-bottom: 8px;
  color: #fff;
  position: relative;
  z-index: 1;
}
.claim-cta p {
  font-size: 15px;
  color: rgba(255,255,255,0.95);
  max-width: 680px;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}
.claim-cta p em { font-style: italic; font-weight: 700; color: #FFF3A8; }
.claim-cta .btn {
  background: #fff;
  color: var(--coral-2);
  box-shadow: 0 4px 0 rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.18);
  position: relative;
  z-index: 1;
}
.claim-cta .btn:hover { background: var(--shell); color: var(--coral-2); }
@media (max-width: 640px) {
  .claim-cta { grid-template-columns: 1fr; text-align: center; padding: 26px 22px; }
  .claim-cta p { margin: 0 auto; }
}

/* ── Filter & sort bar ─────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
  padding: 14px;
  background: var(--bg-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  align-items: center;
}
.filter-bar input,
.filter-bar select {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.filter-bar input:focus,
.filter-bar select:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(255,107,74,0.18);
}
.filter-bar input { flex: 1; min-width: 200px; }
.filter-bar select { min-width: 150px; cursor: pointer; }
.filter-bar .result-count {
  color: var(--muted);
  font-size: 13px;
  margin-left: auto;
  white-space: nowrap;
  font-weight: 600;
}
.empty {
  text-align: center;
  padding: 52px 20px;
  color: var(--muted);
  font-size: 15px;
  background: var(--bg-paper);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
}

/* ── How-it-works cards — postcards ───────────────────────────────────── */
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.how-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px 26px;
  text-align: left;
  position: relative;
  transition: transform .15s, box-shadow .18s;
  box-shadow: var(--shadow-sm);
}
.how-card:hover {
  transform: translateY(-3px) rotate(-0.4deg);
  box-shadow: var(--shadow);
  text-decoration: none;
}
.how-card .step-num {
  display: inline-flex;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coral) 0%, var(--sunset) 100%);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 16px;
  box-shadow: 0 3px 10px rgba(255,107,74,0.30);
  position: relative;
}
.how-card .step-num::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255,107,74,0.45);
}
.how-card h4 {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ocean);
  margin-bottom: 8px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.how-card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; font-weight: 500; }

/* ── Stat strip ────────────────────────────────────────────────────────── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 0;
  overflow: hidden;
  margin-top: 32px;
  box-shadow: var(--shadow-sm);
}
.stat {
  padding: 24px 18px;
  text-align: center;
  border-right: 1px solid var(--border-soft);
  transition: background .15s;
}
.stat:hover { background: var(--sand-2); }
.stat:last-child { border-right: none; }
.stat .num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  color: var(--ocean);
  line-height: 1;
  letter-spacing: -0.7px;
}
.stat .lbl {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.9px;
  margin-top: 8px;
  font-weight: 700;
}
@media (max-width: 640px) {
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .stat { border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer {
  background: linear-gradient(180deg, var(--ocean) 0%, var(--ocean-2) 100%);
  color: rgba(255,255,255,0.78);
  padding: 56px 0 28px;
  margin-top: 80px;
  font-size: 14px;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 34' preserveAspectRatio='none'><path d='M0 18 C180 8 360 26 540 20 C720 14 900 4 1080 14 C1260 24 1440 10 1440 10 L1440 0 L0 0 Z' fill='%230A3D62'/></svg>");
  background-size: 100% 100%;
  transform: translateY(-100%);
  pointer-events: none;
}
.site-footer::after {
  /* Tiny pelicans flying in the footer top-right */
  content: "";
  position: absolute;
  top: 16px; right: 26px;
  width: 120px; height: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'><g stroke='%235AC8B8' stroke-width='1.4' fill='none' stroke-linecap='round' opacity='0.6'><path d='M2 14 Q7 8 12 13 Q15 10 18 12'/><path d='M32 10 Q37 4 42 9 Q45 6 48 8'/><path d='M62 16 Q67 10 72 15 Q75 12 78 14'/><path d='M92 12 Q97 6 102 11 Q105 8 108 10'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.75;
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 34px;
  margin-bottom: 34px;
}
.site-footer h4 {
  font-family: var(--font-display);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.site-footer a { color: rgba(255,255,255,0.78); display: block; padding: 5px 0; font-size: 14px; font-weight: 500; }
.site-footer a:hover { color: var(--sunset); text-decoration: none; }
.site-footer .copy {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 20px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  text-align: center;
  font-weight: 500;
}
.site-footer .copy a { display: inline; color: var(--sunset); }
@media (max-width: 800px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .site-footer::after { display: none; }
}

/* ── Chips & utilities ─────────────────────────────────────────────────── */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 24px; }
.chip {
  display: inline-block;
  background: var(--bg-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition: all .15s;
}
.chip:hover { border-color: var(--coral); color: var(--coral); text-decoration: none; background: var(--shell); }

.text-center { text-align: center; }
.mt-2 { margin-top: 16px; }
.mt-4 { margin-top: 32px; }
.mb-2 { margin-bottom: 16px; }
.muted { color: var(--muted); }
.hide-mobile { display: initial; }
@media (max-width: 640px) { .hide-mobile { display: none; } }

/* ── Postcard / polaroid ───────────────────────────────────────────────── */
.postcard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  position: relative;
  transition: transform .2s;
}
.postcard::before {
  /* little tape at top */
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 70px; height: 16px;
  background: rgba(255,200,87,0.55);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.postcard:hover { transform: translateY(-3px) rotate(-0.3deg); }

.polaroid {
  background: #fff;
  padding: 12px 12px 36px;
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(31,42,60,0.18);
  transform: rotate(-1.5deg);
  transition: transform .2s;
}
.polaroid:hover { transform: rotate(0.5deg) scale(1.02); }

/* Small "Powered by locals" or stamp marker */
.flourish-hand {
  font-family: var(--font-script);
  color: var(--coral);
  font-size: 22px;
  font-weight: 700;
  transform: rotate(-3deg);
  display: inline-block;
}

/* ── Hero wave-divider support ─────────────────────────────────────────── */
.hero { padding-bottom: 150px; } /* ensure space for wave */


/* ════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — everything below overrides for small screens.
   Break points:
     ≤960px  — tablet-sized adjustments
     ≤768px  — main mobile breakpoint (phones + small tablets)
     ≤480px  — small phones
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tablet ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .container { padding: 0 18px; }
  .section { padding: 48px 0; }
  .section.tight { padding: 28px 0; }
  .hero { padding: 64px 0 130px; }
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .how-grid { grid-template-columns: 1fr 1fr; }
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .biz-detail { padding: 28px 24px; }
}

/* ── Mobile (phones + small tablets) ─────────────────────────────────── */
@media (max-width: 768px) {

  /* Global sizing */
  html { font-size: 15px; }
  .container { padding: 0 16px; }
  .section { padding: 38px 0; }
  .section.tight { padding: 24px 0; }

  /* ── Header: logo left, nav wraps below as a scrollable strip ──── */
  .site-header { padding: 10px 0; }
  .site-header .container {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }
  .logo { font-size: 17px; gap: 8px; }
  .logo::before { width: 28px; height: 28px; }

  .nav {
    margin-left: 0;
    width: 100%;
    order: 3;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    justify-content: flex-start;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    font-size: 13.5px;
    padding: 8px 12px;
    white-space: nowrap;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    flex-shrink: 0;
  }
  .nav a:hover { background: rgba(255,255,255,0.16); color: #fff; }
  .nav .btn {
    padding: 8px 14px;
    font-size: 13px;
    flex-shrink: 0;
    background: var(--sunset);
    color: var(--ocean);
    border: none;
  }
  .nav .btn-ghost {
    background: var(--sunset);
    color: var(--ocean);
    border: none;
  }

  /* ── Hero: simplify on mobile ─────────────────────────────────── */
  .hero {
    padding: 54px 0 120px;
  }
  /* Shrink the sun disc, tuck it into corner */
  .hero::before {
    width: 90px; height: 90px;
    top: 30px; right: 8%;
    box-shadow: 0 0 50px 24px rgba(255,180,100,0.32);
  }
  /* Shrink palm trees, drop the pelican entirely for cleanness */
  .hero::after {
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 360' preserveAspectRatio='xMaxYMax meet'><g fill='%23081A2B'><path d='M150 360 Q142 240 156 120 Q160 70 152 40 L158 35 Q166 80 162 130 Q148 250 160 360 Z'/><path d='M155 40 Q110 20 60 35 Q100 25 152 46 Z'/><path d='M155 40 Q200 15 250 30 Q205 20 158 48 Z'/><path d='M155 40 Q120 5 90 0 Q135 15 155 44 Z'/><path d='M155 40 Q190 5 220 0 Q175 15 158 44 Z'/><path d='M155 40 Q95 35 40 75 Q110 50 152 48 Z'/><path d='M155 40 Q215 35 260 70 Q195 50 158 48 Z'/><ellipse cx='150' cy='43' rx='11' ry='5.5'/><circle cx='145' cy='50' r='4'/><circle cx='160' cy='50' r='4'/><circle cx='152' cy='58' r='4'/></g></svg>"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><g fill='none' stroke='%23FFFFFF' stroke-width='1.2' opacity='0.35'><path d='M0 30 Q120 22 240 30 T480 30 T720 30 T960 30 T1200 30 T1440 30'/><path d='M0 50 Q120 44 240 50 T480 50 T720 50 T960 50 T1200 50 T1440 50' opacity='0.6'/></g></svg>");
    background-repeat: no-repeat, repeat-x;
    background-size: 140px 220px, 1440px 70px;
    background-position: 100% 100%, center calc(100% - 55px);
  }
  .hero .wave-divider { height: 50px; }

  /* Hero typography */
  .hero h1 {
    font-size: clamp(32px, 8vw, 44px) !important;
    line-height: 1.08;
    letter-spacing: -0.5px;
    margin-bottom: 14px;
  }
  .hero h1 .accent::after {
    bottom: -5px; height: 4px;
  }
  .hero p {
    font-size: 15.5px;
    line-height: 1.55;
    margin: 0 14px 28px;
  }
  .hero .handwritten-sub { font-size: 22px; }

  /* ── Search bar: stack vertically ─────────────────────────────── */
  .search-bar {
    flex-direction: column;
    padding: 10px;
    border-radius: 14px;
    max-width: 100%;
    margin: 0 8px;
  }
  .search-bar input,
  .search-bar select {
    width: 100%;
    max-width: 100%;
    padding: 13px 12px;
    font-size: 15px;
    min-height: 46px;
  }
  .search-bar select {
    max-width: 100%;
    border-left: none;
    border-top: 1px solid var(--border-soft);
  }
  .search-bar .btn {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    min-height: 48px;
  }

  /* Trust row — compact 3-line layout */
  .trust-row {
    gap: 10px 18px;
    margin-top: 22px;
    font-size: 13px;
    padding: 0 10px;
  }
  .trust-row .trust-item { gap: 6px; }
  .trust-row .check { width: 20px; height: 20px; font-size: 11px; }

  /* ── Page heads ───────────────────────────────────────────────── */
  .page-head { padding: 32px 0 28px; }
  .page-head::before {
    width: 140px; height: 140px;
    top: -30px; right: -40px;
  }
  .page-head h1 { font-size: clamp(24px, 6.5vw, 32px); }
  .page-head .subtitle { font-size: 15px; }
  .crumbs { font-size: 12.5px; }

  /* ── Sections ─────────────────────────────────────────────────── */
  .section h2 { font-size: clamp(22px, 5.8vw, 28px); margin-bottom: 14px; }
  .section h3 { font-size: 18px; }
  .section .lead { font-size: 15.5px; margin-bottom: 24px; }
  .section-head { margin-bottom: 18px; gap: 10px; }
  .section-head .view-all { font-size: 13.5px; }

  /* ── Stat strip: 2x2 grid with smaller numbers ───────────────── */
  .stat-strip {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px;
    padding: 18px;
  }
  .stat-strip .stat .num { font-size: clamp(24px, 7vw, 32px) !important; }
  .stat-strip .stat .lbl { font-size: 12px !important; }

  /* ── How grid: single column ──────────────────────────────────── */
  .how-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .how-card { padding: 22px 20px; }
  .how-card h4 { font-size: 17px; }

  /* ── Category tiles: snug 2-col grid ──────────────────────────── */
  .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .cat-tile { padding: 18px 10px 14px; }
  .cat-tile .cat-icon { font-size: 28px; }
  .cat-tile .cat-name { font-size: 13.5px; }

  /* ── City pills: allow wrapping more ──────────────────────────── */
  .city-grid { gap: 8px; }
  .city-pill { padding: 10px 14px; font-size: 13.5px; }

  /* ── Biz cards: single column, larger tap targets ─────────────── */
  .biz-card {
    grid-template-columns: 1fr !important;
    gap: 14px;
    padding: 18px;
  }
  .biz-card .biz-actions { flex-direction: column; gap: 8px; }
  .biz-card .biz-actions .btn {
    width: 100%;
    padding: 12px 16px;
    min-height: 46px;
    font-size: 14px;
  }

  /* ── Biz detail page: tighter padding, stacked action bar ─────── */
  .biz-detail {
    padding: 22px 18px;
    border-radius: 14px;
  }
  .biz-detail h1 { font-size: clamp(22px, 6.5vw, 30px); }
  .biz-detail .biz-grid { grid-template-columns: 1fr; gap: 14px; }
  .biz-detail .action-bar { flex-direction: column; gap: 10px; }
  .biz-detail .action-bar .btn,
  .biz-detail .action-bar .btn-large {
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
    min-height: 48px;
  }

  /* ── Claim CTA: stack ─────────────────────────────────────────── */
  .claim-cta {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 26px 20px;
  }
  .claim-cta h3 { font-size: 20px; }
  .claim-cta p { font-size: 14.5px; }
  .claim-cta .btn,
  .claim-cta .btn-large {
    width: 100%;
    min-height: 48px;
  }

  /* ── Footer: single column, centered ──────────────────────────── */
  .site-footer { padding: 40px 0 24px; }
  .site-footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 26px;
    text-align: left;
  }
  .site-footer h4 { font-size: 14px; margin-bottom: 8px; }
  .site-footer a { font-size: 14px; padding: 4px 0; display: block; }
  .site-footer .copy { font-size: 12.5px; padding: 18px 12px 0; }
  .site-footer::after { display: none; }  /* hide decorative pelicans */

  /* ── General button touch-targets ─────────────────────────────── */
  .btn { min-height: 44px; }
  .btn-large { padding: 14px 22px; font-size: 15px; min-height: 48px; }
  .btn-sm { min-height: 36px; }

  /* ── Chips wrap comfortably ───────────────────────────────────── */
  .chip { padding: 7px 13px; font-size: 12.5px; }

  /* ── Utility ──────────────────────────────────────────────────── */
  .hide-mobile { display: none !important; }
  .show-mobile { display: initial; }

  /* Don't let long URLs break layout */
  body { overflow-x: hidden; }
  a { word-wrap: break-word; overflow-wrap: break-word; }
}

/* ── Small phones (iPhone SE, etc.) ─────────────────────────────────── */
@media (max-width: 480px) {
  .container { padding: 0 14px; }
  .hero { padding: 48px 0 110px; }
  .hero h1 { font-size: clamp(28px, 8.5vw, 38px) !important; }
  .hero p { font-size: 15px; margin: 0 6px 24px; }
  .hero .handwritten-sub { font-size: 20px; }
  .hero::before { width: 70px; height: 70px; top: 24px; right: 6%; }
  .hero::after {
    background-size: 100px 170px, 1440px 60px;
    background-position: 100% 100%, center calc(100% - 45px);
  }

  /* Cat grid: single column to avoid feeling cramped */
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cat-tile { padding: 16px 8px 12px; }

  /* Stat strip stays 2x2 but tighter */
  .stat-strip { gap: 10px; padding: 14px; }
  .stat-strip .stat .num { font-size: 24px !important; }

  /* Page head decorative sun hidden on tiny screens */
  .page-head::before { opacity: 0.4; width: 100px; height: 100px; }

  /* Postcards: less tilt on tiny screens */
  .postcard:hover,
  .polaroid:hover { transform: none; }
  .polaroid { transform: rotate(-0.5deg); }

  /* Logo shrink once more */
  .logo { font-size: 16px; }
  .nav a { font-size: 13px; padding: 7px 10px; }

  /* Prevent large numbers from forcing overflow */
  .stat .num, .biz-card .rating, .biz-detail .rating { word-break: keep-all; }
}

/* ── Touch-device polish ─────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover-tilt on touch — it "sticks" after tap */
  .cat-tile:hover,
  .postcard:hover,
  .polaroid:hover,
  .how-card:hover { transform: none !important; }
  /* Remove rotation flourishes that look weird on touch */
  .biz-card:hover { transform: none; }
}

/* ── Reduce motion for users who request it ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Monetization: ad slots, feature CTA, Vantage AI biz CTA ─────────── */
.ad-slot{
  display:block;
  max-width:970px;
  margin:28px auto;
  padding:12px 16px 16px;
  background:rgba(255,255,255,0.04);
  border:1px dashed rgba(255,255,255,0.12);
  border-radius:12px;
  text-align:center;
  min-height:90px;
  position:relative;
}
.ad-slot .ad-label{
  display:block;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.45);
  margin-bottom:6px;
}
.ad-slot ins.adsbygoogle{ display:block; min-height:60px; }
.section-alt .ad-slot{ background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.08); }
.section-alt .ad-slot .ad-label{ color:rgba(0,0,0,0.42); }

.feature-cta{
  margin:24px auto;
  max-width:980px;
  padding:28px 32px;
  background:linear-gradient(135deg, #0B1D3A 0%, #1A5FBF 100%);
  color:#fff;
  border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,0.18);
}
.feature-cta__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
}
.feature-cta h3{
  font-size:22px;
  margin:0 0 6px;
  color:#fff;
  line-height:1.25;
}
.feature-cta p{
  margin:0;
  color:rgba(255,255,255,0.88);
  max-width:640px;
  line-height:1.6;
  font-size:15px;
}
.feature-cta .btn{
  background:#00C4DE;
  color:#0B1D3A;
  border:none;
  font-weight:700;
  white-space:nowrap;
}
.feature-cta .btn:hover{ background:#fff; }

.vantage-cta{
  margin:24px auto;
  max-width:820px;
  padding:28px 32px;
  background:linear-gradient(135deg, #FFD54A 0%, #FFA726 100%);
  color:#0B1D3A;
  border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,0.14);
  text-align:center;
}
.vantage-cta h3{
  font-size:22px;
  margin:0 0 10px;
  color:#0B1D3A;
  line-height:1.3;
}
.vantage-cta p{
  margin:0 auto 18px;
  color:#1a3a66;
  max-width:620px;
  line-height:1.6;
  font-size:15.5px;
}
.vantage-cta .btn{
  background:#0B1D3A;
  color:#fff;
  border:none;
  font-weight:700;
}
.vantage-cta .btn:hover{ background:#1A5FBF; }

@media (max-width:640px){
  .feature-cta,
  .vantage-cta{ padding:22px 20px; border-radius:14px; }
  .feature-cta__inner{ flex-direction:column; align-items:flex-start; }
  .feature-cta h3,
  .vantage-cta h3{ font-size:19px; }
  .feature-cta .btn,
  .vantage-cta .btn{ width:100%; }
}

/* Advertise page */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
  margin:36px 0;
}
.price-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:16px;
  padding:28px 26px;
  color:#fff;
}
.price-card.featured{
  border-color:#00C4DE;
  background:linear-gradient(180deg, rgba(0,196,222,0.12), rgba(0,196,222,0.02));
  transform:translateY(-6px);
}
.price-card h3{
  margin:0 0 6px;
  font-size:20px;
}
.price-card .price{
  font-size:36px;
  font-weight:800;
  margin:8px 0 4px;
  color:#00C4DE;
}
.price-card .price small{
  font-size:14px;
  font-weight:500;
  color:rgba(255,255,255,0.6);
}
.price-card ul{
  list-style:none;
  padding:0;
  margin:16px 0 24px;
}
.price-card ul li{
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.92);
  font-size:14.5px;
}
.price-card ul li::before{
  content:"✓ ";
  color:#00C4DE;
  font-weight:700;
  margin-right:6px;
}
.price-card .btn{ width:100%; text-align:center; }