:root {
  --dusty-rose: #C88785;
  --dusty-rose-light: #E6C8C7;
  --dusty-rose-pale: #F7EEEE;
  --warm-yellow: #E8CC73;
  --warm-yellow-light: #F1DEA0;
  --warm-yellow-pale: #FFF8E6;
  --sage: #9DBD91;
  --sage-light: #C9DCBF;
  --sage-pale: #EFF6EC;
  --navy: #48594F;
  --navy-light: #6C7F74;
  --mauve: #B9A7AA;
  --mauve-pale: #F1EBEC;
  --cream: #FCFAF6;
  --warm-white: #FFFDF9;
  --charcoal: #343632;
  --mid-gray: #726F69;
  --light-border: #ECE9E2;
  --brand-gradient: #E8CC73;
}

html { scroll-padding-top: 86px; }
body { background-image: radial-gradient(circle at 10% 15%, rgba(232,204,115,.08), transparent 24rem), radial-gradient(circle at 92% 42%, rgba(157,189,145,.09), transparent 26rem); }

/* Branded selection and focus */
::selection { background: rgba(232,204,115,.55); color: #343632; }
:focus-visible { outline: 3px solid rgba(200,135,133,.55); outline-offset: 4px; border-radius: 8px; }

/* Premium nav */
nav { border-bottom-color: rgba(72,89,79,.09); }
nav.scrolled { padding-top: 10px; padding-bottom: 10px; background: rgba(255,253,249,.86); box-shadow: 0 14px 42px rgba(72,89,79,.10); }
.nav-logo-img, .footer-logo-img { filter: saturate(.9) contrast(1.02); }
.nav-links a { position: relative; }
.nav-links a:not(.nav-cta)::after { content:""; position:absolute; left:0; right:100%; bottom:-7px; height:2px; background:var(--brand-gradient); border-radius:999px; transition:right .28s ease; }
.nav-links a:not(.nav-cta):hover::after, .nav-links a.active:not(.nav-cta)::after { right:0; }
.nav-links a.active:not(.nav-cta) { color: var(--navy); font-weight: 700; }
.nav-cta, .btn-primary, .fsubmit { background: var(--brand-gradient) !important; color:#343632 !important; box-shadow: 0 12px 30px rgba(200,135,133,.18); }
.nav-cta:hover, .btn-primary:hover, .fsubmit:hover { transform: translateY(-3px) scale(1.01); box-shadow:0 18px 38px rgba(72,89,79,.20); }

/* Scroll progress */
.brand-progress { position:fixed; z-index:500; top:0; left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:left; background:var(--brand-gradient); pointer-events:none; }

/* Hero art direction */
.hero { isolation:isolate; }
.hero::after { content:""; position:absolute; inset:auto -100px -160px auto; width:420px; height:420px; border-radius:50%; background:rgba(232,204,115,.14); filter:blur(2px); z-index:-1; }
.hero-left { background:linear-gradient(145deg, rgba(255,253,249,.98), rgba(255,248,230,.52)); }
.hero-main-title { letter-spacing:-.025em; text-wrap:balance; }
.hero-italic { background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-tagline-wrap { box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 10px 28px rgba(157,189,145,.10); }
.hero-right { background: linear-gradient(155deg, #F7EEEE 0%, #FFF8E6 52%, #EFF6EC 100%); }
.hero-graphic-container::before, .hero-graphic-container::after { content:""; position:absolute; border:1px solid rgba(72,89,79,.11); border-radius:50%; animation:orbitFloat 8s ease-in-out infinite; }
.hero-graphic-container::before { width:74%; aspect-ratio:1; }
.hero-graphic-container::after { width:54%; aspect-ratio:1; animation-delay:-3s; }
.hero-services-img { position:relative; z-index:2; transform-origin:center; animation:heroFloat 5.2s ease-in-out infinite; }
.hero-rating-badge { border:1px solid rgba(72,89,79,.10); backdrop-filter:blur(18px); background:rgba(255,255,255,.86); }

/* Section atmosphere */
.about, .process, .contact { position:relative; }
.about::before, .process::after { content:""; position:absolute; width:120px; height:120px; opacity:.18; pointer-events:none; background-image: radial-gradient(circle, var(--sage) 2px, transparent 2.5px); background-size:16px 16px; }
.about::before { top:38px; right:38px; }
.process::after { bottom:26px; left:28px; background-image: radial-gradient(circle, var(--warm-yellow) 2px, transparent 2.5px); }
.section-h2 { letter-spacing:-.018em; text-wrap:balance; }
.section-eyebrow { letter-spacing:.18em; }

/* Cards: tactile but elegant */
.svc-card, .testimonial-card, .step, .contact-card, .about-floating-card { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; }
.svc-card:hover, .testimonial-card:hover, .contact-card:hover { transform:translateY(-8px); border-color:rgba(157,189,145,.48); box-shadow:0 24px 65px rgba(72,89,79,.11); }
.svc-icon-wrap { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.svc-card:hover .svc-icon-wrap { transform: rotate(-6deg) scale(1.09); }
.value-pill { box-shadow:0 8px 20px rgba(157,189,145,.08); }

/* Branded CTA strip before footer */
.brand-cta { margin: 0 80px 80px; padding:44px 48px; border-radius:30px; position:relative; overflow:hidden; background:linear-gradient(120deg, rgba(200,135,133,.94), rgba(232,204,115,.92) 50%, rgba(157,189,145,.96)); color:#343632; display:flex; align-items:center; justify-content:space-between; gap:28px; box-shadow:0 24px 70px rgba(72,89,79,.14); }
.brand-cta::after { content:""; position:absolute; width:220px; height:220px; right:-90px; top:-110px; border:2px solid rgba(255,255,255,.55); border-radius:50%; box-shadow:0 0 0 24px rgba(255,255,255,.10), 0 0 0 48px rgba(255,255,255,.07); }
.brand-cta-copy { position:relative; z-index:2; }
.brand-cta-kicker { text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:800; opacity:.74; margin-bottom:7px; }
.brand-cta-title { font-family:'Cormorant Garamond',serif; font-size:clamp(1.7rem,3vw,2.7rem); font-weight:700; line-height:1.05; max-width:700px; }
.brand-cta .brand-cta-btn { position:relative; z-index:2; flex:0 0 auto; text-decoration:none; background:#343632; color:white; padding:14px 26px; border-radius:999px; font-weight:800; box-shadow:0 14px 34px rgba(52,54,50,.16); transition:transform .25s ease, background .25s ease; }
.brand-cta .brand-cta-btn:hover { transform:translateY(-3px); background:#48594F; }

/* Footer */
footer { background:linear-gradient(155deg,#3F5148,#2F3C35); }
.footer-brand { color:#F4E5DD !important; }

/* Reliable bee cursor: native browser cursor with visible system fallback.
   No cursor:none and no JS overlay, so the pointer can never disappear. */
@media (pointer:fine) {
  html, body { cursor: url("/assets/bee-cursor-32.png") 8 8, auto; }
  a, button, label, select, .svc-card, .testimonial-card, .btn-primary, .btn-outline, .nav-cta {
    cursor: url("/assets/bee-cursor-32.png") 8 8, pointer;
  }
  input, textarea { cursor: text; }
}

/* Enhanced reveal */
.reveal { transform:translateY(22px); opacity:0; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { transform:none; opacity:1; }

@keyframes heroFloat { 0%,100%{transform:translateY(0) rotate(-.4deg)} 50%{transform:translateY(-12px) rotate(.4deg)} }
@keyframes orbitFloat { 0%,100%{transform:scale(1) rotate(0deg)} 50%{transform:scale(1.035) rotate(5deg)} }
@keyframes sparkOut { to { transform:translateY(14px) scale(.2); opacity:0; } }

@media (max-width:900px) {
  .brand-cta { margin:0 24px 54px; padding:34px 28px; flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}


/* ── Refined brand direction: no multicolour / rainbow gradients ── */
.nav-links a:not(.nav-cta)::after { background: var(--dusty-rose); }
.brand-progress { background: var(--sage); }
.hero-left { background: var(--warm-white); }
.hero-right { background: #F6F1EB; }
.hero-italic { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--dusty-rose); }
.nav-cta, .btn-primary, .fsubmit { background: var(--warm-yellow) !important; color: var(--charcoal) !important; box-shadow: 0 12px 30px rgba(72,89,79,.12); }
.nav-cta:hover, .btn-primary:hover, .fsubmit:hover { background: #F0D98C !important; color: var(--charcoal) !important; }
.brand-cta {
  background: var(--navy);
  color: #FFFDF9;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 26px 72px rgba(47,60,53,.20);
}
.brand-cta::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:8px;
  background:var(--dusty-rose);
}
.brand-cta::after {
  width:190px; height:190px; right:-70px; top:-80px;
  border:2px solid rgba(232,204,115,.34);
  box-shadow:0 0 0 28px rgba(232,204,115,.06), 0 0 0 56px rgba(200,135,133,.04);
}
.brand-cta-kicker { color: var(--warm-yellow-light); opacity: 1; }
.brand-cta .brand-cta-btn { background:var(--warm-yellow); color:var(--charcoal); }
.brand-cta .brand-cta-btn:hover { background:#F0D98C; color:var(--charcoal); }

/* ── Higgsfield-generated 3D hero artwork + real-time web 3D motion ── */
.hero-graphic-container::before,
.hero-graphic-container::after { display:none; }
.hero-graphic-container {
  perspective: 1500px;
  overflow: visible;
  isolation: isolate;
}
.hero-3d-scene {
  --rx: 0deg;
  --ry: 0deg;
  width: min(680px, 100%);
  aspect-ratio: 16 / 10;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .18s ease-out;
  will-change: transform;
}
.hero-3d-card {
  position:absolute;
  inset:8% 4%;
  border-radius: 34px;
  transform-style: preserve-3d;
  transform: translateZ(48px);
  overflow:hidden;
  background:#FAF7F2;
  border:1px solid rgba(72,89,79,.10);
  box-shadow: 0 45px 90px rgba(47,60,53,.18), 0 12px 26px rgba(72,89,79,.10), inset 0 1px 0 rgba(255,255,255,.92);
  animation: heroCardFloat 7.2s cubic-bezier(.45,0,.55,1) infinite;
}
.hero-3d-art {
  position:absolute;
  inset:-2%;
  background-image: url("/assets/hero-bee-3d.webp"), url("/assets/logo-brand.jpeg");
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
  background-size:cover, 62% auto;
  background-color:#FAF7F2;
  transform: translateZ(70px) scale(1.035);
  filter: saturate(.92) contrast(1.015);
  animation: heroBeeDepth 7.2s cubic-bezier(.45,0,.55,1) infinite;
}
.hero-3d-shine {
  position:absolute;
  inset:-40%;
  transform:translateZ(86px) rotate(18deg) translateX(-55%);
  background:linear-gradient(90deg, transparent 42%, rgba(255,255,255,.34) 50%, transparent 58%);
  animation: heroShine 7.2s ease-in-out infinite;
  pointer-events:none;
}
.hero-3d-orbit {
  position:absolute;
  left:50%; top:50%;
  width:88%; height:46%;
  margin-left:-44%; margin-top:-23%;
  border-radius:50%;
  border:2px solid rgba(157,189,145,.42);
  transform-style:preserve-3d;
  pointer-events:none;
}
.hero-3d-orbit-sage { transform: rotateX(68deg) rotateZ(-9deg) translateZ(18px); animation: orbit3dSage 9s linear infinite; }
.hero-3d-orbit-rose { width:70%; height:38%; margin-left:-35%; margin-top:-19%; border-color:rgba(200,135,133,.34); transform: rotateX(74deg) rotateZ(58deg) translateZ(92px); animation: orbit3dRose 12s linear infinite reverse; }
.hero-3d-dot { position:absolute; border-radius:50%; pointer-events:none; box-shadow:0 12px 28px rgba(47,60,53,.12); }
.hero-3d-dot-one { width:18px; height:18px; right:8%; top:20%; background:var(--warm-yellow); transform:translateZ(135px); animation: dotFloatOne 5.4s ease-in-out infinite; }
.hero-3d-dot-two { width:12px; height:12px; left:9%; bottom:18%; background:var(--sage); transform:translateZ(110px); animation: dotFloatTwo 6.3s ease-in-out infinite; }
.hero-3d-shadow { position:absolute; left:18%; right:18%; bottom:1%; height:9%; border-radius:50%; background:rgba(47,60,53,.16); filter:blur(18px); transform:translateZ(-80px) rotateX(72deg); animation: shadowPulse 7.2s ease-in-out infinite; }
.hero-rating-badge { z-index:7; }

@keyframes heroCardFloat { 0%,100% { transform:translateZ(48px) translateY(0) rotateZ(-.35deg); } 48% { transform:translateZ(82px) translateY(-12px) rotateZ(.5deg); } }
@keyframes heroBeeDepth { 0%,100% { transform:translateZ(70px) scale(1.035) rotateY(-1deg); } 25% { transform:translateZ(104px) scale(1.06) rotateY(2.2deg); } 52% { transform:translateZ(132px) scale(1.085) rotateY(-2deg) rotateX(1deg); } 76% { transform:translateZ(92px) scale(1.055) rotateY(1deg); } }
@keyframes heroShine { 0%,22% { transform:translateZ(86px) rotate(18deg) translateX(-62%); opacity:0; } 38% { opacity:.8; } 58% { transform:translateZ(86px) rotate(18deg) translateX(58%); opacity:0; } 100% { transform:translateZ(86px) rotate(18deg) translateX(58%); opacity:0; } }
@keyframes orbit3dSage { from { transform:rotateX(68deg) rotateZ(-9deg) translateZ(18px) rotate(0deg); } to { transform:rotateX(68deg) rotateZ(-9deg) translateZ(18px) rotate(360deg); } }
@keyframes orbit3dRose { from { transform:rotateX(74deg) rotateZ(58deg) translateZ(92px) rotate(0deg); } to { transform:rotateX(74deg) rotateZ(58deg) translateZ(92px) rotate(360deg); } }
@keyframes dotFloatOne { 0%,100%{transform:translateZ(135px) translateY(0)} 50%{transform:translateZ(160px) translateY(-18px)} }
@keyframes dotFloatTwo { 0%,100%{transform:translateZ(110px) translateY(0)} 50%{transform:translateZ(145px) translateY(14px)} }
@keyframes shadowPulse { 0%,100%{transform:translateZ(-80px) rotateX(72deg) scale(.92);opacity:.13} 50%{transform:translateZ(-80px) rotateX(72deg) scale(1.08);opacity:.20} }

@media (max-width:900px) {
  .hero-3d-scene { width:100%; aspect-ratio: 1 / 1; }
  .hero-3d-card { inset:8% 0; border-radius:26px; }
  .hero-3d-orbit { width:94%; margin-left:-47%; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-3d-scene { transform:none !important; }
  .hero-3d-card,.hero-3d-art,.hero-3d-shine,.hero-3d-orbit,.hero-3d-dot,.hero-3d-shadow { animation:none !important; }
}
.steps::before { background: var(--sage-light) !important; opacity: .75; }
