:root{
  --bg: #fff7dc;
  --panel: rgba(255,255,255,.88);
  --panel-2: rgba(255,255,255,.76);

  --ink: #1e1e1e;
  --muted: rgba(30,30,30,.72);

  --honey: #ffc533;
  --honey-2: #ffb000;
  --honey-3: #ffdf7a;

  --purple: #6a2bbf;
  --purple-2: #8f4cf0;

  --shadow: 0 18px 50px rgba(0,0,0,.12);
  --shadow-soft: 0 12px 30px rgba(0,0,0,.10);

  --radius: 22px;

  /* wider container helps 5 cards fit better */
  --container: 1250px;

  --font: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* ✅ Bees shift right by ~20% of screen */
  --bee-shift-x: 20vw;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--ink);
  background: radial-gradient(1200px 700px at 20% 10%, #fff2b3 0%, var(--bg) 55%, #fff 120%);
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding-left: 1.1rem; }

.container{
  width: min(var(--container), calc(100% - 2.2rem));
  margin: 0 auto;
}
.center{ display:flex; justify-content:center; }

/* =========================================================
   Typography
   ========================================================= */
h1,h2,h3{ letter-spacing:-0.5px; }
h1{ font-weight:900; }
h2{ font-weight:800; }
h3{ font-weight:800; }

p{
  line-height:1.65;
  font-weight:700;
  color: rgba(30,30,30,.78);
}
.hero-lead,
.logo-tagline{
  font-size:1.1rem;
  color: rgba(30,30,30,.72);
}

/* =========================================================
   Background scene (blobs + honeycomb + bees)
   ========================================================= */
.bg-scene{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow:hidden;
}

.bg-blob{
  position:absolute;
  width: 560px;
  height: 560px;
  filter: blur(42px);
  opacity: .36;
  animation: floatBlob 16s ease-in-out infinite;
  border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
  background: radial-gradient(circle at 30% 30%, var(--honey-3), var(--honey), var(--honey-2));
}
.blob-a{ top: -220px; left: -160px; }
.blob-b{ bottom: -260px; right: -240px; animation-duration: 18s; opacity:.28; }
.blob-c{ top: 10%; right: -240px; animation-duration: 20s; opacity:.22; }

@keyframes floatBlob{
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(40px,-30px) scale(1.06); }
}

.honeycomb-overlay{
  position:absolute;
  inset:-40px;
  opacity:.18;
  background-image:
    linear-gradient(30deg, rgba(0,0,0,.08) 12%, transparent 12.5%, transparent 87%, rgba(0,0,0,.08) 87.5%, rgba(0,0,0,.08)),
    linear-gradient(150deg, rgba(0,0,0,.08) 12%, transparent 12.5%, transparent 87%, rgba(0,0,0,.08) 87.5%, rgba(0,0,0,.08)),
    linear-gradient(90deg, rgba(0,0,0,.06) 2%, transparent 2.5%, transparent 97.5%, rgba(0,0,0,.06) 98%, rgba(0,0,0,.06));
  background-size: 56px 32px;
  mask-image: radial-gradient(closest-side at 50% 30%, rgba(0,0,0,1) 0%, rgba(0,0,0,.75) 55%, rgba(0,0,0,0) 92%);
}

/* =========================================================
   Header / Nav
   ========================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.70);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.header-inner{
  display:grid;
  grid-template-columns: 1fr auto auto;
  align-items:center;
  gap: 1rem;
  padding: .75rem 0;
}

.brand.brand-textonly{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  gap:.15rem;
}
.brand-name{ font-weight: 900; letter-spacing:.2px; font-size:1.05rem; }
.brand-sub{ font-weight:800; font-size:.9rem; color: rgba(0,0,0,.62); }

.nav-check{ position:absolute; opacity:0; pointer-events:none; }

.nav{
  display:flex;
  align-items:center;
  gap: .35rem;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 999px;
  padding: .35rem;
}

.nav-link{
  padding: .55rem .9rem;
  border-radius: 999px;
  font-weight: 800;
  color: rgba(0,0,0,.72);
  transition: background .2s ease, transform .2s ease;
}
.nav-link:hover{
  background: rgba(255,197,51,.22);
  transform: translateY(-1px);
}
.nav-cta{ margin-left:.35rem; }

.nav-toggle{
  display:none;
  width:46px;
  height:46px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.75);
  border-radius: 14px;
  box-shadow: 0 12px 22px rgba(0,0,0,.10);
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  height:2px;
  width:22px;
  background: rgba(0,0,0,.75);
  margin: 6px auto;
  border-radius:99px;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .85rem 1.1rem;
  border-radius: 999px;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:active{ transform: translateY(0); }

.btn-primary{
  background: linear-gradient(180deg, var(--purple-2), var(--purple));
  color: #fff;
  border-color: rgba(106,43,191,.45);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(106,43,191,.22);
}

.btn-secondary{
  background: linear-gradient(180deg, rgba(255,197,51,.95), rgba(255,176,0,.95));
  color: rgba(0,0,0,.82);
}
.btn-secondary:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 46px rgba(255,176,0,.20);
}

.btn-ghost{
  background: rgba(255,255,255,.65);
  color: rgba(0,0,0,.78);
}
.btn-ghost:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.9);
}

/* =========================================================
   Big logo section
   ========================================================= */
.logo-hero{
  padding: 2.1rem 0 1.2rem;
}
.logo-hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.75rem;
}
.big-logo{
  width:min(520px, 92%);
  height:auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.18));
}
.logo-tagline{
  margin:0;
  font-weight:800;
}
.logo-actions{
  display:flex;
  gap:.75rem;
  flex-wrap: wrap;
  justify-content:center;
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  padding: 1.8rem 0 2.4rem;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2.2rem;
  align-items: start;
}

.hero-copy{
  background: var(--panel);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding: 2.1rem 2rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow:hidden;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.45rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
  font-weight: 800;
  color: rgba(0,0,0,.70);
}
.badge-dot{
  width:10px;height:10px;border-radius:50%;
  background: linear-gradient(180deg, var(--purple-2), var(--purple));
  box-shadow: 0 0 0 5px rgba(106,43,191,.12);
}

.hero-title{
  margin: .9rem 0 .6rem;
  font-size: clamp(2rem, 3.2vw, 3.05rem);
  line-height: 1.05;
}
.text-honey{
  background: linear-gradient(180deg, #ffcb3d, #ff9f00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lead{
  margin: 0 0 1.25rem;
  font-weight: 700;
}

.hero-cta{
  display:flex;
  gap:.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.hero-points{
  color: rgba(0,0,0,.66);
  font-weight: 800;
  line-height: 1.7;
  margin: 0;
  padding-left: 1.2rem;
}

/* =========================================================
   Hex frames (hero right)
   ========================================================= */
.hero-frames{ position:relative; padding: 0; }

.hex-grid{
  position: relative;
  width: 100%;
  min-height: 440px;
  border-radius: var(--radius);
  padding: 1.2rem;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.hero-copy, .hex-grid{ height: 100%; }

.hex-card{
  position:absolute;
  width: 200px;
  aspect-ratio: 1 / 1;
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
  overflow:hidden;
  border: 2px solid rgba(255,255,255,.75);
  box-shadow: 0 22px 55px rgba(0,0,0,.16);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hex-card img{
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.04);
}
.hex-card:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 28px 70px rgba(0,0,0,.22);
}

@keyframes floatHex{
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-10px) scale(1.01); }
}

.sparkle{
  position:absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 0 6px rgba(255,255,255,.18), 0 0 28px rgba(255,255,255,.35);
  opacity:.85;
  animation: twinkle 2.6s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100% { transform: scale(1); opacity:.75; }
  50%     { transform: scale(1.35); opacity:1; }
}

/* =========================================================
   Honey divider
   ========================================================= */
.honey-divider{
  width: 100%;
  line-height: 0;
  margin: 1.2rem 0;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.12));
}
.honey-divider svg{ width:100%; height: 140px; display:block; }
.honey-divider.thick svg{ height: 170px; }
.honey-divider.flip{ transform: rotate(180deg); }
.honey-main{ fill: rgba(255,176,0,.92); }
.honey-highlight{
  fill: rgba(255,255,255,.18);
  animation: honeyShine 4.8s ease-in-out infinite;
}
@keyframes honeyShine{
  0%,100%{ opacity:.12; transform: translateX(0); }
  50%{ opacity:.22; transform: translateX(12px); }
}

/* ✅ FULL-BLEED FIX */
.honey-divider.fullbleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.honey-divider svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* =========================================================
   Sections / Cards
   ========================================================= */
.section{ padding: 3.2rem 0; position:relative; }
.section-alt{ background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.72)); }

.section::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(800px 200px at center top, rgba(255,255,255,.6), transparent 70%);
  pointer-events:none;
}

.section-head{ text-align:center; margin-bottom: 1.6rem; position:relative; z-index:1; }
.section-head h2{ margin:0 0 .4rem; font-size: clamp(1.6rem, 2.3vw, 2.2rem); }
.section-head p{ margin:0; color: var(--muted); font-weight: 800; }

/* ✅ Services: 5 wide desktop */
.cards{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  position:relative;
  z-index:1;
}

.card{
  background: var(--panel-2);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding: 1.3rem 1.2rem;
  box-shadow: 0 16px 38px rgba(0,0,0,.10);
  transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 55px rgba(0,0,0,.16);
}
.card h3{ margin:0 0 .45rem; font-weight: 900; }
.card p{ margin:0 0 .9rem; }
.card-link{ font-weight: 900; color: rgba(106,43,191,.92); }

/* =========================================================
   Gallery Preview — Honeycomb Frames
   ========================================================= */
.gallery-preview{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1.6rem 0 1.2rem;
  justify-items:center;
  position:relative;
  z-index:1;
}

.preview-hex{
  position:relative;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  display:block;
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
  background: linear-gradient(180deg, rgba(255,223,122,1), rgba(255,176,0,1));
  padding: 10px;
  box-shadow: 0 18px 44px rgba(0,0,0,.14);
  transition: transform .25s ease, box-shadow .25s ease;
}

.preview-hex::before{
  content:"";
  position:absolute;
  inset: 10px;
  clip-path: inherit;
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(0,0,0,.06);
  pointer-events:none;
}

.preview-hex img{
  width:100%;
  height:100%;
  object-fit: cover;
  clip-path: inherit;
  transform: scale(1.02);
  transition: transform .35s ease;
}

.preview-hex:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(0,0,0,.20);
}
.preview-hex:hover img{
  transform: scale(1.09);
}

/* =========================================================
   Gallery Carousel (gallery.html)
   ========================================================= */
.carousel-wrapper{
  position: relative;
  z-index: 1;
  margin-top: 1.2rem;
  padding: 1.2rem 0;
}

.carousel-track{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 48px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-soft);

  /* nice scrolling */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.carousel-track::-webkit-scrollbar{ height: 10px; }
.carousel-track::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}
.carousel-track::-webkit-scrollbar-track{
  background: rgba(0,0,0,.06);
  border-radius: 999px;
}

.carousel-item{
  flex: 0 0 auto;
  width: 260px;
  aspect-ratio: 1 / 1;
  scroll-snap-align: start;

  /* ✅ honeycomb shape */
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);

  /* ✅ honey border */
  background: linear-gradient(180deg, rgba(255,223,122,1), rgba(255,176,0,1));
  padding: 10px;

  box-shadow: 0 18px 44px rgba(0,0,0,.14);
  transition: transform .25s ease, box-shadow .25s ease;

  /* keep it clickable */
  display: block;
  position: relative;
}

/* inner glass layer like your preview hex */
.carousel-item::before{
  content:"";
  position:absolute;
  inset: 10px;
  clip-path: inherit;
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(0,0,0,.06);
  pointer-events:none;
}

/* image fills the hex */
.carousel-item img{
  width:100%;
  height:100%;
  object-fit: cover;
  clip-path: inherit;
  transform: scale(1.02);
  transition: transform .35s ease;
}

/* hover */
.carousel-item:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(0,0,0,.20);
}
.carousel-item:hover img{
  transform: scale(1.09);
}
}
.carousel-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .35s ease;
}
.carousel-item:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(0,0,0,.20);
}
.carousel-item:hover img{ transform: scale(1.08); }

.carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.82);
  box-shadow: 0 16px 34px rgba(0,0,0,.14);
  cursor: pointer;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: transform .2s ease, background .2s ease;
  z-index: 2;
}
.carousel-btn:hover{
  transform: translateY(-50%) scale(1.05);
  background: rgba(255,255,255,.95);
}
.carousel-btn.left{ left: 10px; }
.carousel-btn.right{ right: 10px; }

/* =========================================================
   Contact Form Styling
   ========================================================= */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:1.4rem;
}

.form-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:1.2rem;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}

.form-group label{
  font-weight:800;
  font-size:.9rem;
  color: rgba(0,0,0,.75);
}

.form-group input,
.form-group select,
.form-group textarea{
  appearance:none;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  padding:.75rem .85rem;
  font-family:inherit;
  font-size:.95rem;
  font-weight:700;
  background: rgba(255,255,255,.85);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(106,43,191,.18);
  background:#fff;
}

textarea{
  resize:vertical;
  min-height:120px;
}

.form-actions{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
}

.form-note{
  font-size:.85rem;
  color: rgba(0,0,0,.6);
  font-weight:700;
}

/* =========================================================
   CTA
   ========================================================= */
.cta{ padding: 3.2rem 0 3.6rem; }
.cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.62));
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.8rem 2rem;
}
.cta-copy h2{ margin:0 0 .35rem; font-size: 1.9rem; }
.cta-copy p{ margin:0; color: var(--muted); font-weight:800; }
.cta-actions{ display:flex; gap:.75rem; flex-wrap:wrap; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  padding: 2rem 0 1.2rem;
  background: rgba(255,255,255,.55);
  border-top: 1px solid rgba(0,0,0,.06);
}
.footer-inner{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items:center;
}
.footer-brand{ margin:0; font-weight: 900; }
.footer-note{ margin:.2rem 0 0; color: var(--muted); font-weight:800; }
.footer-links{ display:flex; gap:1rem; font-weight:900; color: rgba(0,0,0,.70); }
.footer-right{ display:flex; gap:.6rem; }
.social{
  width:44px;height:44px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
  font-weight: 900;
  transition: transform .2s ease;
}
.social:hover{ transform: translateY(-3px); }
.footer-bottom{
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,.06);
  color: rgba(0,0,0,.60);
  font-weight: 800;
}

/* =========================================================
   BEES — CLEAN WORKING SYSTEM (SHIFT RIGHT 20%)
   ========================================================= */
.qb-bee{
  position:absolute;
  width:46px;
  height:46px;
  opacity:.6;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.10));
  transform: translateX(var(--bee-shift-x, 20vw));
}

/* subtle variations */
.b2{
  width:52px;
  height:52px;
  opacity:.5;
}

/* optional extras smaller */
.pointer{
  width:40px;
  height:40px;
  opacity:.35;
}

/* Bee body */
.qb-bee::before{
  content:"";
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='62' r='34' fill='%23FFD54A'/%3E%3Cpath d='M38 62c8-10 36-10 44 0' stroke='%231b1b1b' stroke-width='10' stroke-linecap='round'/%3E%3Cpath d='M40 76c10-10 34-10 42 0' stroke='%231b1b1b' stroke-width='10' stroke-linecap='round'/%3E%3Ccircle cx='52' cy='54' r='3.5' fill='%231b1b1b'/%3E%3Ccircle cx='68' cy='54' r='3.5' fill='%231b1b1b'/%3E%3Cpath d='M54 68c6 6 10 6 16 0' stroke='%231b1b1b' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M60 32c10-16 20-18 28-14' stroke='%231b1b1b' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3Cpath d='M60 32c-10-16-20-18-28-14' stroke='%231b1b1b' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='89' cy='18' r='4' fill='%236a2bbf'/%3E%3Ccircle cx='31' cy='18' r='4' fill='%236a2bbf'/%3E%3C/svg%3E");
}

/* Bee wings */
.qb-bee::after{
  content:"";
  position:absolute;
  inset:-6px;
  background-repeat:no-repeat;
  background-size:contain;
  opacity:.8;
  transform-origin: 60% 45%;
  animation: wingFlap .18s ease-in-out infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M36 52c-18-8-30 8-22 20 8 12 26 10 38-2' fill='%23ffffff' opacity='.55'/%3E%3Cpath d='M84 52c18-8 30 8 22 20-8 12-26 10-38-2' fill='%23ffffff' opacity='.55'/%3E%3C/svg%3E");
}

@keyframes wingFlap{
  0%,100%{ transform: rotate(-7deg) scale(1); }
  50%{ transform: rotate(10deg) scale(1.03); }
}

/* Modern path animation */
@supports (offset-path: path("M0 0 L1 1")){
  .qb-bee.fly,
  .qb-bee.pointer{
    offset-rotate: auto;
    animation: beePath 24s linear infinite;
  }

  /* Left → Right (upper-mid lane) */
  .b1{
    offset-path: path("M 60 150 C 260 90 480 200 680 135 C 880 85 1040 170 1180 125");
    animation-delay: 0s;
  }

  /* Right → Left (alternating) */
  .b2{
    offset-path: path("M 1180 215 C 940 130 760 250 600 180 C 420 120 240 180 60 150");
    animation-delay: -12s;
  }

  /* Extra subtle passes (p1/p2) */
  .p1{
    offset-path: path("M 120 110 C 340 70 520 150 720 115 C 880 95 1040 120 1100 105");
    animation-duration: 34s;
    animation-delay: -6s;
  }

  .p2{
    offset-path: path("M 1100 175 C 900 115 720 220 520 165 C 340 125 220 175 120 150");
    animation-duration: 36s;
    animation-delay: -18s;
  }

  @keyframes beePath{
    0%   { offset-distance: 0%; }
    100% { offset-distance: 100%; }
  }
}

/* Fallback if offset-path unsupported */
@supports not (offset-path: path("M0 0 L1 1")){
  .qb-bee.fly,
  .qb-bee.pointer{
    animation: beeFloat 14s ease-in-out infinite;
  }

  @keyframes beeFloat{
    0%,100%{
      transform: translateX(var(--bee-shift-x, 20vw)) translate(0,0) rotate(0deg);
    }
    25%{
      transform: translateX(var(--bee-shift-x, 20vw)) translate(24px,-14px) rotate(5deg);
    }
    50%{
      transform: translateX(var(--bee-shift-x, 20vw)) translate(-18px,12px) rotate(-5deg);
    }
    75%{
      transform: translateX(var(--bee-shift-x, 20vw)) translate(16px,18px) rotate(4deg);
    }
  }
}

/* =========================================================
   Responsive
   ========================================================= */

/* 5 → 3 sooner */
@media (max-width: 1200px){
  .cards{ grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 980px){
  .header-inner{ grid-template-columns: 1fr auto; }
  .nav-toggle{ display:block; }

  .nav{
    display:none;
    grid-column: 1 / -1;
    margin-top:.7rem;
    padding: .8rem;
    border-radius: 18px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 18px 44px rgba(0,0,0,.14);
    flex-direction:column;
    align-items:stretch;
  }
  .nav .nav-link{
    display:block;
    padding:.9rem 1rem;
    border-radius: 14px;
    background: rgba(255,197,51,.12);
  }
  .nav .nav-cta{ width:100%; margin-top:.3rem; }
  #nav-check:checked ~ .nav{ display:flex; }

  .hero-grid{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: repeat(2,1fr); }

  .gallery-preview{ grid-template-columns: repeat(2, 1fr); }

  .cta-inner{ flex-direction:column; align-items:flex-start; }

  /* Carousel padding smaller */
  .carousel-track{ padding: 10px 46px; }
  .carousel-item{ width: 240px; }
}

@media (max-width: 560px){
  h1{ font-size: 1.9rem; }
  h2{ font-size: 1.45rem; }

  .btn{ width: 100%; }
  .cards{ grid-template-columns: 1fr; }
  .gallery-preview{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }

  .footer-inner{ grid-template-columns: 1fr; text-align:center; }
  .footer-links{ justify-content:center; flex-wrap:wrap; }
  .footer-right{ justify-content:center; }

  .carousel-track{ padding: 10px 14px; }
  .carousel-btn{ display:none; } /* hide arrows on tiny screens */
  .carousel-item{ width: 82vw; }
}

/* =========================================================
   Reduce Motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .bg-blob, .sparkle, .honey-highlight{
    animation: none !important;
  }
}