/* Hero-only festive visual layer. Content, controls, and layout remain in their existing layers. */
:root {
  --hero-festive-background: #760b17;
  --hero-festive-red-wash: rgba(91, 6, 20, 0.18);
  --hero-festive-red-shade: rgba(75, 4, 16, 0.2);
  --hero-festive-panel-wash: rgba(101, 5, 19, 0.3);
  --hero-festive-panel-highlight: rgba(181, 12, 28, 0.28);
  --hero-festive-gold-pool: rgba(255, 187, 93, 0.14);
  --hero-festive-gold-glow: rgba(255, 204, 96, 0.72);
  --hero-festive-gold-shadow: rgba(255, 187, 72, 0.24);
  --hero-festive-gold-shadow-soft: rgba(255, 187, 72, 0.2);
}

#home.hero-section {
  position: relative;
  background-color: var(--hero-festive-background);
  background-image:
    linear-gradient(135deg, var(--hero-festive-red-wash), var(--hero-festive-red-shade)),
    url("assets/image 85.png");
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover, cover;
  background-blend-mode: normal;
}

/* Preserve the existing diagonal panel shape while letting the red texture show through. */
#home.hero-section::after {
  z-index: 0;
  background-image:
    radial-gradient(36% 38% at 84% 92%, var(--hero-festive-gold-pool), transparent 74%),
    linear-gradient(145deg, var(--hero-festive-panel-highlight), var(--hero-festive-panel-wash));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* Static edge-cropped rangoli; DOM order keeps it below the hanging ornaments. */
#home.hero-section > .hero-rangoli {
  position: absolute;
  z-index: 1;
  top: 0;
  right: clamp(-150px, -9vw, -72px);
  height: clamp(430px, 94%, 680px);
  width: auto;
  aspect-ratio: 298 / 644;
  background-image: url("assets/rangoli.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: brightness(0.82) saturate(0.68);
  opacity: 0.44;
  pointer-events: none;
}

/* Keep every decoration behind the existing content and form. */
#home.hero-section > .hero-inner {
  z-index: 2;
}

#home.hero-section > .hero-call-icon {
  z-index: 2;
}

#home.hero-section > .hero-hanging-lamp,
#home.hero-section > .hero-hanging-bell,
#home.hero-section > .hero-firework {
  position: absolute;
  z-index: 1;
  display: block;
  pointer-events: none;
}

#home.hero-section > .hero-hanging-lamp,
#home.hero-section > .hero-hanging-bell {
  top: 0;
  height: auto;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 2px 8px var(--hero-festive-gold-shadow));
  transform-origin: top center;
  will-change: transform;
}

#home.hero-section > .hero-hanging-lamp {
  width: clamp(18px, 2vw, 29px);
  aspect-ratio: 50 / 338;
  background-image: url("assets/lamp.png");
  animation: hero-lamp-sway 4s ease-in-out infinite;
}

#home.hero-section > .hero-hanging-lamp--left {
  left: 1.5%;
}

#home.hero-section > .hero-hanging-lamp--right {
  right: 3.5%;
  width: clamp(18px, 2.2vw, 28px);
  animation-delay: -1.7s;
}

#home.hero-section > .hero-hanging-bell {
  width: clamp(14px, 1.55vw, 22px);
  aspect-ratio: 34 / 290;
  background-image: url("assets/bell.png");
  animation: hero-bell-sway 4.6s ease-in-out infinite;
}

#home.hero-section > .hero-hanging-bell--left {
  left: 5.2%;
  animation-delay: -2.4s;
}

#home.hero-section > .hero-hanging-bell--right {
  right: 2.5%;
  width: clamp(18px, 2vw, 24px);
  animation-delay: -0.9s;
}

@keyframes hero-lamp-sway {
  0%,
  100% {
    transform: rotate(-2deg);
  }

  50% {
    transform: rotate(2deg);
  }
}

@keyframes hero-bell-sway {
  0%,
  100% {
    transform: rotate(-1.5deg);
  }

  50% {
    transform: rotate(1.5deg);
  }
}

#home.hero-section > .hero-firework {
  inset: auto;
  width: clamp(66px, 8vw, 116px);
  height: auto;
  aspect-ratio: 89 / 87;
  clip-path: none;
  background-image: url("assets/burst-cracker.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.84;
  transform: scale(0.82);
  transform-origin: center;
  /* Static peak lighting. The burst used to animate brightness() and a
     drop-shadow radius, both paint-only properties, so all four firework
     re-rastered every frame for the life of the page. The peak frame is now
     baked in here and the animation only moves opacity/transform, so the
     ignition still reads exactly as bright as before - each keyframe opacity is
     scaled by (that keyframe's old brightness / 1.55) so the composited
     brightness of every frame is unchanged. */
  filter: brightness(1.55) drop-shadow(0 0 14px var(--hero-festive-gold-glow));
  will-change: transform, opacity;
  animation: hero-asset-firework 4.4s ease-out infinite;
}

#home.hero-section > .hero-firework--a {
  top: 7%;
  left: 57%;
  animation-duration: 4.1s;
  animation-delay: -2.8s;
}

#home.hero-section > .hero-firework--b {
  bottom: 3%;
  left: -16px;
  animation-duration: 3.7s;
  animation-delay: -1.1s;
}

#home.hero-section > .hero-firework--c {
  right: -16px;
  bottom: 4%;
  animation-duration: 4.8s;
  animation-delay: -3.2s;
}

#home.hero-section > .hero-festive-motif {
  z-index: 1;
  opacity: 0.18;
  filter: saturate(0.9) brightness(1.16);
  animation: none;
}

#home.hero-section > .hero-festive-motif--a {
  top: 24%;
  left: 42%;
  bottom: auto;
  width: clamp(240px, 28vw, 390px);
}

#home.hero-section > .hero-festive-motif--b {
  display: none;
}

#home.hero-section > .hero-firework--d {
  bottom: 12%;
  left: 52%;
  width: clamp(58px, 6.5vw, 92px);
  animation-duration: 4.5s;
  animation-delay: -2s;
}

@keyframes hero-asset-firework {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.2);
  }

  10% {
    opacity: 0.9;
    transform: scale(0.56);
  }

  24% {
    opacity: 0.968;
    transform: scale(1);
  }

  46% {
    opacity: 0.557;
    transform: scale(1.12);
  }

  72% {
    opacity: 0;
    transform: scale(1.28);
  }
}

@media (max-width: 767px) {
  #home.hero-section {
    background-position: center, center;
    background-size: cover, cover;
  }

  #home.hero-section > .hero-rangoli {
    top: 0;
    right: clamp(-118px, -22vw, -78px);
    height: clamp(450px, 68vh, 620px);
    opacity: 0.3;
  }

  #home.hero-section > .hero-hanging-lamp,
  #home.hero-section > .hero-hanging-bell {
    filter: drop-shadow(0 1px 5px var(--hero-festive-gold-shadow-soft));
  }

  #home.hero-section > .hero-hanging-lamp {
    width: clamp(12px, 4vw, 19px);
  }

  #home.hero-section > .hero-hanging-lamp--right {
    width: clamp(11px, 3.4vw, 16px);
  }

  #home.hero-section > .hero-hanging-bell {
    display: none;
  }

  #home.hero-section > .hero-festive-motif--a {
    top: auto;
    left: -54px;
    bottom: -44px;
    width: clamp(130px, 38vw, 168px);
    opacity: 0.12;
  }

  #home.hero-section > .hero-festive-motif--b {
    display: none;
  }

  #home.hero-section > .hero-firework {
    width: clamp(18px, 5.5vw, 38px);
  }

  #home.hero-section > .hero-firework--a,
  #home.hero-section > .hero-firework--d {
    display: none;
  }

  #home.hero-section > .hero-firework--b {
    bottom: 10%;
    left: 0;
  }

  #home.hero-section > .hero-firework--c {
    right: 0;
    bottom: 17%;
  }
}

@media (max-width: 767px) {
  #home.hero-section > .hero-hanging-lamp--left {
    left: 0;
  }

  #home.hero-section > .hero-hanging-lamp--right {
    right: clamp(48px, 17.5vw, 72px);
    width: clamp(17px, 4.8vw, 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #home.hero-section > .hero-hanging-lamp,
  #home.hero-section > .hero-hanging-bell {
    animation: none;
  }

  #home.hero-section > .hero-firework {
    animation: none;
    opacity: 0.78;
    transform: scale(0.82);
  }
}

/* Mobile-only Hero composition. The desktop and tablet grid remains untouched. */
@media (max-width: 767px) {
  #home.hero-section {
    min-height: 0;
    height: auto;
  }

  #home.hero-section > .hero-inner.container {
    display: flex;
    width: min(85%, 440px);
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 20px 0 18px;
  }

  #home.hero-section .hero-copy {
    z-index: 2;
    width: 100%;
    align-self: stretch;
    margin: 0;
    padding: 0 40px 0 0;
  }

  #home.hero-section .hero-title {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: clamp(22px, 6vw, 26px);
    line-height: 1.2;
    letter-spacing: 0;
    white-space: normal;
    text-wrap: balance;
  }

  #home.hero-section .hero-title .hero-kicker {
    display: inline;
    width: auto;
    max-width: none;
    margin: 0 4px 0 0;
    padding: 1px 5px 2px;
    border-radius: 5px;
    font-size: inherit;
    line-height: inherit;
    white-space: nowrap;
    vertical-align: baseline;
  }

  #home.hero-section .hero-title > span:not(.hero-kicker),
  #home.hero-section .hero-title > strong {
    display: inline;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
  }

  #home.hero-section .hero-title > strong {
    padding: 0;
    white-space: normal;
  }

  #home.hero-section .hero-title em {
    white-space: nowrap;
  }

  #home.hero-section .hero-description {
    max-width: 100%;
    margin: 14px 0 0;
    color: rgba(255, 244, 239, 0.92);
    font-size: 10px;
    line-height: 1.5;
  }

  #home.hero-section .hero-duration {
    margin: 12px 0 0;
    font-size: 10px;
    line-height: 1.35;
  }

  #home.hero-section > .hero-call-icon {
    top: 76px;
    right: max(18px, calc((100% - 440px) / 2));
    width: 34px;
    height: 34px;
  }

  #home.hero-section .hero-form-card {
    width: 100%;
    max-width: 440px;
    min-height: 0;
    align-self: center;
    padding: 22px 18px 24px;
    color: var(--color-black);
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-form);
  }

  #home.hero-section .hero-form-card h2 {
    margin: 0 0 22px;
    font-size: 17px;
    line-height: 1.3;
  }

  #home.hero-section .lead-form {
    gap: 18px;
  }

  #home.hero-section .field-group {
    gap: 8px;
  }

  #home.hero-section .field-group label {
    min-height: 15px;
    font-size: 11px;
    line-height: 1.25;
  }

  #home.hero-section .field-group input {
    height: 32px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 10px;
  }

  #home.hero-section .phone-input {
    height: 32px;
    padding-inline: 10px;
    border-radius: 6px;
  }

  #home.hero-section .lead-submit {
    min-height: 34px;
    margin-top: 18px;
    padding: 8px 12px;
    border-radius: 6px;
  }

}

@media (max-width: 360px) {
  #home.hero-section > .hero-inner.container {
    width: calc(100% - 32px);
  }
}

/* ------------------------------------------------------------------
   Burst cracker above the mobile call icon.

   The phone/call button itself is untouched - this is one extra
   decorative-only span that reuses the existing assets/burst-cracker.png
   artwork, so nothing new is drawn and no other Hero element, string or
   spacing value changes. It is display:none everywhere except the mobile
   breakpoint, which keeps the desktop and tablet Hero byte-for-byte as
   they were.

   The burst asset already *is* a complete radial firework (core plus
   rays all the way to its edges), so the burst is simulated the way the
   artwork allows: a single centred scale ramp from a small dim core to
   full width, with the brightness and the warm halo peaking together
   with the expansion and then falling away. There is no rotation, no
   travel, no bounce and no looping pulse - the element never leaves the
   slot it is anchored to, and transform-origin stays at 50% 50% so the
   centre of the burst is pinned above the call icon.

   Geometry: on mobile the call icon sits at top:76px, right:
   max(18px, (100% - 440px) / 2) and is 34x34, so its horizontal centre
   is 17px in from that right offset. The burst's right edge is derived
   from exactly those two numbers, which keeps the two centres aligned at
   every mobile width without hard-coding a second breakpoint. The box is
   sized to clamp(48px, 13.5vw, 64px) and anchored with
   top: calc(70px - size), so its bottom edge always stops 6px above the
   icon - the burst never touches the button. Because the widest size
   (64px) still leaves at least 3px of slack on the right at the narrow
   R=18px case, the growing box stays inside the section and the existing
   overflow:hidden on .hero-section never has to clip it, so no horizontal
   scrollbar can appear.
   ------------------------------------------------------------------ */
#home.hero-section > .hero-mobile-burst {
  display: none;
}

@media (max-width: 767px) {
  #home.hero-section > .hero-mobile-burst {
    --hero-mobile-burst-size: clamp(48px, 13.5vw, 64px);
    position: absolute;
    z-index: 1;
    top: calc(70px - var(--hero-mobile-burst-size));
    right: calc(max(18px, (100% - 440px) / 2) + 17px - var(--hero-mobile-burst-size) / 2);
    display: block;
    width: var(--hero-mobile-burst-size);
    height: var(--hero-mobile-burst-size);
    background: url("assets/burst-cracker.png") center / contain no-repeat;
    opacity: 0;
    pointer-events: none;
    transform-origin: 50% 50%;
    /* Same treatment as the desktop firework: peak lighting is static so the
       burst can composite on opacity/transform instead of re-rastering an
       animated filter every frame. */
    filter: brightness(1.65) drop-shadow(0 0 14px rgba(255, 204, 96, 0.78));
    will-change: transform, opacity;
    animation: hero-mobile-cracker-burst 3.2s ease-out infinite;
  }
}

/* One burst per cycle: dim core -> ignition -> peak expansion and halo ->
   sparks thinning out -> gone, then straight back to the dim core. The
   peak scale is only 1.05 so the outermost rays keep their full length
   while fading instead of being cut off by the box. */
@keyframes hero-mobile-cracker-burst {
  0% {
    opacity: 0.044;
    transform: scale(0.3);
  }

  25% {
    opacity: 0.73;
    transform: scale(0.66);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }

  75% {
    opacity: 0.14;
    transform: scale(1.05);
  }

  100% {
    opacity: 0;
    transform: scale(1.07);
  }
}

@media (prefers-reduced-motion: reduce) {
  #home.hero-section > .hero-mobile-burst {
    animation: none !important;
    opacity: 0.8;
  }
}

/* ------------------------------------------------------------------
   Festive serial lights along the top edge of the Hero.

   Added decoration only. The lamps, bells, fireworks, rangoli, backdrop,
   content, form and call button keep their own rules and their own
   stacking; this element sits in the existing decorative layer
   (z-index:1) behind the content layer (z-index:2), so the heading,
   paragraph, form and phone button stay on top and fully readable.

   Structure: one absolutely positioned strip pinned to the top-left of
   the Hero at width:100%, holding a 1.5px golden wire drawn once as a
   ::before, plus 32 LED bulbs laid out with space-between so they stay
   evenly spaced at every width without a single hard-coded position.
   The wire has no animation at all - it is the fixed reference line.

   The travelling light is done by phase, not by movement: every bulb
   runs the same opacity/box-shadow animation, but its start is offset
   by exactly one 32nd of the cycle (--i * cycle / 32). Nothing is
   translated, rotated or re-laid-out, so the bulbs cannot shift along
   the wire - only their brightness changes. Because the offset grows
   with the index and the index grows with the x position, the lit group
   always walks left to right, and because the last bulb's offset is
   exactly one step short of the full cycle the hand-off from the last
   bulb back to the first is the same 75ms step as every other pair, so
   the loop never stutters.

   The profile is a fast 96ms rise and a slower ~430ms fall, which
   leaves roughly three or four bulbs reading as clearly bright with a
   short spark tail while the other twenty-eight stay softly lit - a
   running light, not a flash. Colours stay inside warm gold; the base
   (unanimated) state is the dim glow, so reduced motion simply leaves a
   static softly glowing string.

   Each breakpoint hides the surplus bulbs and lowers --led-count to
   match, so the phase step widens as the strip gets shorter and the lit
   group still sweeps the whole visible length every cycle instead of
   spending part of the loop in bulbs that are no longer on screen.
   ------------------------------------------------------------------ */
#home.hero-section > .hero-serial-lights {
  --led-count: 32;
  --led-cycle: 2.4s;
  --led-size: clamp(4px, 0.42vw, 6px);
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  max-width: 100%;
  height: clamp(24px, 2.6vw, 32px);
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(10px, 1.4vw, 18px);
  pointer-events: none;
}

/* the wire: fixed, straight, and the only element that never animates */
#home.hero-section > .hero-serial-lights::before {
  position: absolute;
  z-index: 0;
  top: calc((100% - var(--led-size)) / 2);
  right: 0;
  left: 0;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(197, 148, 66, 0.3) 0%, rgba(240, 200, 118, 0.8) 8%, rgba(240, 200, 118, 0.8) 92%, rgba(197, 148, 66, 0.3) 100%);
  box-shadow: 0 0 5px rgba(255, 194, 100, 0.3);
  content: "";
}

/* one warm LED; only its light changes, never its position */
#home.hero-section > .hero-serial-lights > i {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--led-size);
  height: var(--led-size);
  flex: 0 0 var(--led-size);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff6de 0 16%, #ffd68c 44%, #f0a63c 76%, #c0761c 100%);
  box-shadow: 0 0 4px rgba(255, 190, 96, 0.4);
  opacity: 0.62;
  animation: hero-led-travel var(--led-cycle) linear infinite;
  animation-delay: calc(var(--i) * var(--led-cycle) / var(--led-count));
}

/* The travelling light used to animate box-shadow, which is a paint-only
   property: 32 bulbs re-rastered every frame for the life of the page. The lit
   halo is now a static ::after layer that stays exactly as bright as the old
   4% peak keyframe, and the animation only moves opacity on the parent. A bulb
   at opacity x therefore composites as
     dim  = 0.62/0.62 = 1.0  of (bulb + halo)      -> identical to before
     peak = 1.00/0.62 = 1.613 of (bulb + halo)      -> the 4% peak frame
   so the same core brightness and the same peak glow are both preserved, and
   the peak halo (0 0 9px .95, 0 0 17px .5) is now rastered once instead of on
   every frame of the cycle. */
#home.hero-section > .hero-serial-lights > i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--led-size);
  height: var(--led-size);
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(255, 216, 136, 0.95), 0 0 17px rgba(255, 178, 76, 0.5);
  content: "";
  opacity: 1;
  transform: translate(-50%, -50%);
}

@keyframes hero-led-travel {
  0% {
    opacity: 0.62;
  }

  4% {
    opacity: 1;
  }

  22% {
    opacity: 0.62;
  }

  100% {
    opacity: 0.62;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  #home.hero-section > .hero-serial-lights {
    --led-count: 24;
    --led-size: 5px;
    height: 28px;
  }

  #home.hero-section > .hero-serial-lights > i:nth-child(n + 25) {
    display: none;
  }
}

@media (max-width: 767px) {
  #home.hero-section > .hero-serial-lights {
    --led-count: 18;
    --led-size: 4.5px;
    height: 22px;
  }

  #home.hero-section > .hero-serial-lights > i:nth-child(n + 19) {
    display: none;
  }
}

@media (max-width: 420px) {
  #home.hero-section > .hero-serial-lights {
    --led-count: 14;
  }

  #home.hero-section > .hero-serial-lights > i:nth-child(n + 15) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #home.hero-section > .hero-serial-lights,
  #home.hero-section > .hero-serial-lights * {
    animation: none !important;
  }
}