/* LÜP Website Styles — Mobile-first */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
  --parchment: #EDE0CF;
  --ivory: #FAF5ED;
  --cream: #F5EFE3;
  --sage: #7a8c6e;
  --sage-deep: #5C7260;
  --sage-dark: #4E6652;
  --olive: #687D64;
  --terracotta: #C4795D;
  --terracotta-deep: #A66147;
  --terracotta-soft: #C4795D;
  --navy: #3A4968;
  --charcoal: #3A3530;
  --stone: #6B6560;
  --silver: #8A8480;
  --border-cream: #E0D8C8;
  --border-warm: #D8CFC0;

  --font-serif: 'Crimson Pro', Georgia, serif;
  --font-sans: 'DM Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--parchment);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(196,121,93,0.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(122,140,110,0.03) 0%, transparent 50%);
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }
input, textarea, select { font-family: inherit; }

/* ============ MOBILE-FIRST BASE (≤ 640px) ============ */
section { padding: 56px 16px; position: relative; }
.container { max-width: 100%; margin: 0 auto; }

h1, h2, h3, h4, h5 { font-family: var(--font-serif); font-weight: 500; color: var(--charcoal); }
h1 { font-size: clamp(44px, 5.2vw, 76px); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: clamp(36px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.02em; }
h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }

.serif-accent { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--terracotta); }
em.hi { font-style: normal; color: var(--terracotta); font-weight: 600; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--sage-dark);
  padding: 6px 14px;
  background: rgba(122,140,110,0.12);
  border-radius: 100px;
  border: 1px solid rgba(122,140,110,0.25);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 500;
  padding: 12px 20px;
  border: none; border-radius: 12px;
  transition: all 0.2s ease-out;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary { background: var(--charcoal); color: var(--ivory); }
.btn-primary:hover { background: #1e1a18; transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--charcoal); border: 1px solid var(--border-warm); }
.btn-secondary:hover { background: var(--ivory); border-color: var(--charcoal); }
.btn-terracotta { background: var(--terracotta); color: var(--ivory); box-shadow: 0 4px 14px rgba(196,121,93,0.25); }
.btn-terracotta:hover { background: var(--terracotta-deep); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(196,121,93,0.35); }
.btn svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.btn:hover svg { transform: translateX(3px); }

/* Prominent hero CTA — larger pill with a gentle terracotta glow pulse.
   Pause on hover so the existing .btn-terracotta:hover lift takes over cleanly.
   Reduced-motion users get a stationary button via the global media rule below. */
.btn-cta-prominent { font-size: 16px; font-weight: 600; padding: 16px 30px; letter-spacing: 0.02em; animation: cta-glow 2.8s ease-in-out infinite; }
.btn-cta-prominent:hover { animation: none; }
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 4px 18px rgba(196,121,93,0.28); }
  50%      { box-shadow: 0 8px 32px rgba(196,121,93,0.55); }
}

.dashed-divider { border: none; border-top: 1.5px dashed var(--sage); opacity: 0.5; }

.card {
  background: var(--ivory); border: 1px solid var(--border-cream);
  border-radius: 20px; box-shadow: 0 4px 24px rgba(0,0,0,0.04);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease;
}
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,0.08); }

/* Customer hero cards — icon halo + per-icon hover animations.
   `.hero-anim-card` is on the card; the halo + icon are children. The halo
   gets a subtle scale on card hover; each icon class adds its own motion
   that ties to the icon's meaning (return arrows spin a half-turn,
   stopwatch tilts like a tick, $0 just pops a bit). */
.hero-icon-halo {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.3s ease;
  will-change: transform;
}
.hero-customer-icon {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: 50% 50%;
  will-change: transform;
}
.hero-anim-card:hover .hero-icon-halo {
  transform: scale(1.06);
  background: rgba(122,140,110,0.22);
}
.hero-anim-card:hover .hero-customer-icon.icon-zero      { transform: scale(1.18); }
.hero-anim-card:hover .hero-customer-icon.icon-return    { transform: rotate(180deg) scale(1.05); }
.hero-anim-card:hover .hero-customer-icon.icon-stopwatch { transform: rotate(-14deg) scale(1.08); }

/* Stopwatch PNG canvas is asymmetric — motion lines on the left mean the
   stopwatch face sits visually right of centre. Nudge left so the watch
   face lines up with the halo's centre. Margin (not transform) so it
   layers cleanly with the hover transforms above. */
.hero-customer-icon.icon-stopwatch { margin-left: -8px; }

/* Smiley Ü watermark decorative layer */
.smiley-watermark { position: absolute; pointer-events: none; z-index: 0; }

/* Mobile-first defaults: stacked grids */
.hero-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
.hero-headline { font-size: clamp(28px, 7.5vw, 42px) !important; }
/* Mobile: hero right grid goes 1 col so stats don't squish */
.hero-right-grid { grid-template-columns: 1fr !important; grid-template-rows: auto !important; }
.hero-right-grid > * { min-height: 180px !important; }
.hero-stat-big { font-size: 56px !important; }
.hero-stat-med { font-size: 50px !important; }
.bowls-feature-grid { grid-template-columns: repeat(2, 1fr) !important; }
.stack-md { grid-template-columns: 1fr !important; gap: 20px !important; }
.grid-3-md-1 { grid-template-columns: 1fr !important; gap: 14px !important; }
.grid-4-md-2 { grid-template-columns: 1fr !important; gap: 14px !important; }
.split { grid-template-columns: 1fr !important; gap: 16px !important; }
.problem-grid { grid-template-columns: 1fr !important; }
.problem-grid > div { border-right: none !important; border-bottom: 1.5px dashed rgba(122,140,110,0.45) !important; padding: 24px 16px !important; }
.problem-grid > div:last-child { border-bottom: none !important; }
.footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

/* Mobile: hide desktop nav, show hamburger */
.nav-links-desktop { display: none !important; }
.nav-cta-desktop { display: none !important; }
.nav-hamburger { display: flex !important; }
.nav-inner { padding: 0 !important; }

/* Audience ribbon — slim sticky bar with the venue/customer toggle.
   Stays visible at all sizes so visitors can switch view at any scroll position. */
.audience-ribbon { font-family: var(--font-sans); }

/* How It Works step images — smaller on mobile */
.howit-step-img { width: 54px; height: 54px; }

/* ============ TABLET (≥ 720px) ============ */
@media (min-width: 720px) {
  .howit-step-img { width: 72px; height: 72px; }
  section { padding: 72px 24px; }
  .container { max-width: 760px; }
  .grid-4-md-2 { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .split { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
  .hero-right-grid { grid-template-columns: 1fr 1fr !important; grid-template-rows: 1fr 1fr !important; }
  .hero-stat-big { font-size: 58px !important; }
  .hero-stat-med { font-size: 48px !important; }
  .bowls-feature-grid { grid-template-columns: repeat(2, 1fr) !important; }
  h1 { font-size: clamp(48px, 7vw, 68px); }
  h2 { font-size: clamp(32px, 5vw, 42px); }
}

/* ============ DESKTOP (≥ 980px) ============ */
@media (min-width: 980px) {
  section { padding: 90px 40px; }
  .container { max-width: 1180px; }

  .hero-grid { grid-template-columns: 1.05fr 1fr !important; gap: 20px !important; }
  .stack-md { grid-template-columns: unset; gap: 28px !important; }
  .grid-3-md-1 { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
  .grid-4-md-2 { grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; }
  .problem-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .problem-grid > div { border-right: 1.5px dashed rgba(122,140,110,0.45) !important; border-bottom: none !important; padding: 8px 28px !important; }
  .problem-grid > div:last-child { border-right: none !important; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr !important; gap: 40px !important; }
  .footer-brand { grid-column: auto !important; }

  /* Desktop nav: show pill, hide hamburger */
  .nav-links-desktop { display: flex !important; }
  .nav-cta-desktop { display: inline-flex !important; }
  .nav-hamburger { display: none !important; }
  .nav-inner { padding: 0 16px !important; }

  h1 { font-size: clamp(58px, 5.5vw, 92px); }
  h2 { font-size: clamp(36px, 3.8vw, 52px); }
  h3 { font-size: clamp(24px, 2vw, 32px); }
}

/* ============ ANIMATIONS ============ */

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(.2,.8,.2,1), transform 0.8s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.4s; }

/* Gentle float for hero smiley / decorative glyphs */
@keyframes gentleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(-1deg); }
}
.float-gentle { animation: gentleFloat 6s ease-in-out infinite; }

/* Wiggle smile on hover (for the Ü glyph) */
@keyframes smileWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}
.smiley-interactive:hover svg { animation: smileWiggle 0.6s ease-in-out; }

/* Marquee — partner strip */
.marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 64px;
  animation: marquee 30s linear infinite;
  flex-shrink: 0;
  padding-right: 64px;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* Pulse dot */
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(196,121,93,0.6); }
  70% { box-shadow: 0 0 0 10px rgba(196,121,93,0); }
  100% { box-shadow: 0 0 0 0 rgba(196,121,93,0); }
}
.live-pulse { animation: livePulse 2s infinite; }

/* Card hover lift on images */
.img-hover { overflow: hidden; }
.img-hover img, .img-hover .bg-img { transition: transform 0.6s cubic-bezier(.2,.8,.2,1); }
.img-hover:hover img, .img-hover:hover .bg-img { transform: scale(1.04); }

/* Button ripple-less press */
.btn:active { transform: translateY(0) scale(0.98); }

/* Link underline grow */
.link-grow {
  position: relative;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.link-grow::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
.link-grow:hover::after { transform: scaleX(1); }

/* Mobile nav drawer */
.mobile-menu {
  position: fixed; inset: 0; z-index: 200;
  background: var(--parchment);
  padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
  animation: slideIn 0.25s ease-out;
  overflow-y: auto;
}
@keyframes slideIn { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.nav-hamburger { display: none; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============ LEAFLET MAP — on-brand styling ============ */
.lup-map { z-index: 0; }
.lup-map .leaflet-container { font-family: var(--font-sans); background: var(--parchment); }

/* On phones, make the map non-interactive so vertical page scroll isn't
   captured by Leaflet's touch handlers. Visually unchanged. */
@media (max-width: 768px) {
  .lup-map, .lup-map * { pointer-events: none !important; touch-action: pan-y !important; }
  .lup-map .leaflet-control-container { display: none !important; }
}

/* Custom terracotta dot marker */
.lup-marker { background: transparent; border: 0; }
.lup-marker span {
  display: block;
  width: 14px; height: 14px;
  background: var(--terracotta);
  border: 2px solid var(--ivory);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.15s ease;
}
.lup-marker:hover span { transform: scale(1.25); }

/* Popup styling — match parchment/charcoal theme */
.leaflet-popup-content-wrapper {
  background: var(--ivory);
  color: var(--charcoal);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.10);
  border: 1px solid var(--border-cream);
}
.leaflet-popup-content {
  margin: 12px 16px;
  font-size: 13.5px;
  line-height: 1.5;
}
.leaflet-popup-content strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.leaflet-popup-content .lup-popup-suburb { color: var(--stone); }
.leaflet-popup-content .lup-popup-type {
  color: var(--sage-dark);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.leaflet-popup-tip { background: var(--ivory); border: 1px solid var(--border-cream); }
.leaflet-popup-close-button { color: var(--silver) !important; padding: 6px 8px 0 0 !important; }
.leaflet-popup-close-button:hover { color: var(--charcoal) !important; }

/* Zoom controls — tone down to match warm palette */
.leaflet-control-zoom a {
  background: var(--ivory) !important;
  color: var(--charcoal) !important;
  border-color: var(--border-warm) !important;
}
.leaflet-control-zoom a:hover { background: var(--parchment) !important; }
.leaflet-control-attribution {
  background: rgba(250,245,237,0.85) !important;
  font-size: 10px !important;
  color: var(--stone) !important;
}
.leaflet-control-attribution a { color: var(--terracotta) !important; }