/* ==========================================================================
   SEASONAL — AUTUMN GUTTER PROMOTION (homepage only)
   To remove after autumn: in index.html delete (1) the <link> to css/autumn.css,
   (2) the block between "SEASONAL BANNER START/END", (3) the block between
   "SEASONAL LEAVES START/END" inside the hero. Then delete this file.
   ========================================================================== */
.autumn-banner { background: #02306D; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.autumn-banner__inner { max-width: 80rem; margin: 0 auto; padding: .5rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.autumn-banner__main { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.autumn-banner__icon { flex: none; width: 2rem; height: 2rem; }
.autumn-banner__title { margin: 0; font-weight: 800; font-size: 1rem; line-height: 1.2; }
.autumn-banner__title span { color: #FFA726; }
.autumn-banner__copy { margin: .125rem 0 0; font-size: .8125rem; line-height: 1.35; font-weight: 400; color: rgba(255,255,255,.78); }
.autumn-banner__cta { display: block; text-align: center; background: #F59E0B; color: #02306D; font-weight: 800; padding: .5rem 1rem; border-radius: .5rem; font-size: .875rem; line-height: 1.2; transition: background-color .15s; }
.autumn-banner__cta:hover { background: #FBBF24; }
.autumn-banner :focus-visible { outline-color: #fff; }
@media (min-width: 640px) {
  .autumn-banner__inner { padding: .5rem 1.5rem; }
  .autumn-banner__title { font-size: 1.125rem; }
  .autumn-banner__copy { font-size: .875rem; }
}
@media (min-width: 1024px) {
  .autumn-banner__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .5rem 2rem; }
  .autumn-banner__icon { width: 2.25rem; height: 2.25rem; }
  .autumn-banner__cta { flex: none; padding: .5rem 1.125rem; }
}

/* Falling leaves: real-shaped maple / oak / beech leaves, drifting past at different depths (decorative; above the photo, below the hero text) */
.autumn-leaves { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.autumn-leaf { position: absolute; top: -64px; left: var(--x); width: var(--s); height: var(--s); opacity: 0; background: var(--c) center / contain no-repeat; filter: blur(var(--b, 0px)); animation: autumn-fall var(--t) linear var(--d) infinite; will-change: transform, opacity; }
@keyframes autumn-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--r0)); opacity: 0; }
  8%   { opacity: var(--o); }
  30%  { transform: translate3d(var(--dx), 30vh, 0) rotate(calc(var(--r0) + var(--rr) * .3)); }
  60%  { transform: translate3d(calc(var(--dx) * -.7), 62vh, 0) rotate(calc(var(--r0) + var(--rr) * .6)); }
  92%  { opacity: var(--o); }
  100% { transform: translate3d(calc(var(--dx) * .6), 100vh, 0) rotate(calc(var(--r0) + var(--rr))); opacity: 0; }
}
.autumn-leaf--a { --c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23F08A24'/%3E%3Cstop offset='1' stop-color='%23C8501A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M24 3l3.4 8 5.2-2.6-1.4 9.2 6.6-4.4-1.2 6.4 6.6-.8-4.8 6.4 2.8 2.4-10.4 3.2.4 4.8-7.6-1.6V45h-1.2v-9.6l-7.6 1.6.4-4.8-10.4-3.2 2.8-2.4-4.8-6.4 6.6.8-1.2-6.4 6.6 4.4-1.4-9.2 5.2 2.6z' fill='url(%23g)'/%3E%3Cpath d='M24 44V18M24 30l-8-6M24 30l8-6M24 22l-4-8M24 22l4-8' stroke='%23000' stroke-opacity='.22' stroke-width='.9' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.autumn-leaf--b { --c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23F5B03F'/%3E%3Cstop offset='1' stop-color='%23D9822B'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M24 3c3 2 3 5 2.5 7 3-1 6 0 6.500 3-1 1.500-2 2-3.500 2.500 3 .5 6 2.500 5 5.500-1 1.500-3 2-4.500 2 3 1.500 4 4.500 2 7-2 2-4 1.500-5.500 1 .5 3-1 5.500-3 6.500V45h-1v-6c-2-1-3.500-3.500-3-6.500-1.500.5-3.500 1-5.500-1-2-2.500-1-5.500 2-7-1.500 0-3.500-.5-4.500-2-1-3 2-5 5-5.500-1.500-.5-2.500-1-3.500-2.500.5-3 3.500-4 6.500-3C21 8 21 5 24 3z' fill='url(%23g)'/%3E%3Cpath d='M24 44V8M24 34l-6-5M24 34l6-5M24 25l-6-5M24 25l6-5M24 16l-4-4M24 16l4-4' stroke='%23000' stroke-opacity='.22' stroke-width='.9' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.autumn-leaf--c { --c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23A8713A'/%3E%3Cstop offset='1' stop-color='%236B4423'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M24 3C13 10 10 24 17 36c2 3.500 5 6 7 8 2-2 5-4.500 7-8 7-12 4-26-7-33z' fill='url(%23g)'/%3E%3Cpath d='M24 46V9M24 36l-7-7M24 36l7-7M24 27l-6-6M24 27l6-6M24 19l-4-4M24 19l4-4' stroke='%23000' stroke-opacity='.22' stroke-width='.9' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* Six leaves at varied depth: large + blurred = near the camera, small + faint = far away. Placed right/edge of hero, clear of headline and buttons */
.autumn-leaf:nth-child(1) { --x: 66%; --s: 30px; --t: 22s; --d: -4s;  --o: .7;  --dx: 30px;  --r0: 15deg;  --rr: 150deg; }
.autumn-leaf:nth-child(2) { --x: 91%; --s: 62px; --t: 16s; --d: -9s;  --o: .5;  --dx: -40px; --r0: -30deg; --rr: -120deg; --b: 3px; }
.autumn-leaf:nth-child(3) { --x: 78%; --s: 20px; --t: 28s; --d: -14s; --o: .45; --dx: 22px;  --r0: 60deg;  --rr: 110deg; }
.autumn-leaf:nth-child(4) { --x: 97%; --s: 26px; --t: 25s; --d: -19s; --o: .6;  --dx: -26px; --r0: 100deg; --rr: -160deg; }
.autumn-leaf:nth-child(5) { --x: 2%;  --s: 24px; --t: 30s; --d: -11s; --o: .4;  --dx: 24px;  --r0: -10deg; --rr: 130deg; }
.autumn-leaf:nth-child(6) { --x: 84%; --s: 54px; --t: 19s; --d: -1s;  --o: .4;  --dx: 36px;  --r0: 40deg;  --rr: -140deg; --b: 2.5px; }
@media (max-width: 767px) {
  .autumn-leaf:nth-child(n+4) { display: none; }   /* three leaves on phones */
  .autumn-leaf { --s: 22px !important; --o: .45 !important; --b: 0px !important; }
  .autumn-leaf:nth-child(1) { --x: 80%; } .autumn-leaf:nth-child(2) { --x: 92%; } .autumn-leaf:nth-child(3) { --x: 3%; }
}
@media (prefers-reduced-motion: reduce) { .autumn-leaves { display: none; } }