/* ===========================================================================
   Shane Ellis Guide Service — VISUAL UPGRADE LAYER
   Loaded after site.css. All color comes from seasonal --c-* vars (head.php).
   Animations reveal only when <html> has .js-anim (set by animations.js), so
   content is NEVER stuck hidden if JS/kill-switch is off. No reduced-motion
   gating (per Chad). CSP-safe: pure CSS, no @import, no external fonts.
   =========================================================================== */

:root{
  --ease: cubic-bezier(.2,.75,.2,1);
  --shadow-float: 0 24px 60px rgba(12,28,44,.22);
}

/* ---- Scroll-reveal (hidden only when JS is active) ---------------------- */
html.js-anim [data-reveal]{opacity:0;transform:translateY(34px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);will-change:opacity,transform}
html.js-anim [data-reveal="left"]{transform:translateX(-40px)}
html.js-anim [data-reveal="right"]{transform:translateX(40px)}
html.js-anim [data-reveal="zoom"]{transform:scale(.9)}
html.js-anim [data-reveal="fade"]{transform:none}
html.js-anim [data-reveal].rv-in{opacity:1;transform:none}

/* ---- Animated hero band ------------------------------------------------- */
.hero-x{position:relative;min-height:clamp(460px,72vh,720px);display:flex;align-items:center;
  color:#fff;overflow:hidden;isolation:isolate}
.hero-x__bg{position:absolute;inset:-8% 0 0 0;z-index:-2;background-size:cover;background-position:center;
  transform:translateZ(0);will-change:transform}
.hero-x::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--hero-overlay)}
.hero-x .wrap{padding:4rem 20px}
.hero-x__eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:3px;font-weight:800;
  font-size:.82rem;color:#fff;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.28);padding:.45rem .9rem;border-radius:999px;margin-bottom:1rem}
.hero-x h1{color:#fff;font-size:clamp(2.3rem,6vw,4.2rem);line-height:1.05;text-shadow:0 4px 30px rgba(0,0,0,.4);margin-bottom:.5rem}
.hero-x .lede{color:rgba(255,255,255,.94);font-size:clamp(1.05rem,2vw,1.3rem);max-width:42ch;text-shadow:0 2px 16px rgba(0,0,0,.45)}
.hero-x .hero-ctas{margin-top:1.8rem}
.hero-x .scroll-cue{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;opacity:.85;
  font-size:1.6rem;animation:bob 1.8s var(--ease) infinite;z-index:3}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,10px)}}
/* TEMP: blend the home hero's bottom into the shoreline/water panel below by
   fading both edges to one hazy tone. Only the hero that sits above the stats. */
.hero-x:has(+ .stats-strip)::before{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;z-index:1;
  pointer-events:none;background:linear-gradient(180deg,rgba(174,198,207,0),rgba(174,198,207,.45) 55%,rgba(174,198,207,.9))}
/* Hero Ken Burns — slow cinematic zoom/pan, CSS-only (zero extra page weight).
   Gated on .js-anim so the admin animation kill-switch turns it off too. The
   hero bg is excluded from the JS parallax so this transform never conflicts. */
html.js-anim .hero-x__bg{animation:kenburns 34s ease-in-out infinite alternate}
@keyframes kenburns{
  from{transform:scale(1.06) translate3d(0,0,0)}
  to{transform:scale(1.18) translate3d(0,-1.4%,0)}
}
/* Rotating hero slides: cross-fade; only the active slide runs Ken Burns. */
.hero-slide{transition:opacity 1.4s ease}
.hero-x__bg.hero-slide:not(.is-active){opacity:0}
html.js-anim .hero-slide:not(.is-active){animation-play-state:paused}
/* Light-sheen sweep across the hero after each image change. */
.hero-x .wrap{position:relative;z-index:2}
.hero-sheen{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-sheen::before{content:"";position:absolute;top:-25%;left:-70%;width:45%;height:150%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);opacity:0;will-change:left,opacity}
.hero-sheen.go::before{animation:heroSheen 1.15s ease-out}
@keyframes heroSheen{0%{left:-70%;opacity:0}12%{opacity:.95}100%{left:130%;opacity:0}}

/* Floating glass action card on the hero */
.hero-card{margin:1.8rem auto 0;display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;
  width:max-content;max-width:100%;padding:1rem;border-radius:16px;
  background:rgba(255,255,255,.12);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.25);box-shadow:var(--shadow-float)}
/* Mobile: even 2x2 grid of hero buttons, all the same size */
@media (max-width:680px){
  .hero-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.55rem;width:100%;max-width:100%;box-sizing:border-box;padding:.8rem}
  .hero-card .btn{width:100%;min-width:0;box-sizing:border-box;padding:.85em .6em;font-size:.92rem;white-space:normal;line-height:1.2}
  .hero-card .btn-game{grid-column:1 / -1}
  .hero-card .btn-lg{padding:.85em .6em;font-size:.92rem}
}

/* ===========================================================================
   CINEMATIC HERO (Parkway-style intro)
   Photo reads bright + clear first; a light overlay + a center-bright / edge-dark
   vignette settle in; the glass content panel and its rows stagger in; the logo
   fades in LAST on the right (desktop). All motion is gated on html.js-anim, so
   with JS/kill-switch off everything paints fully visible (no hidden content).
   The .hero-x__bg div, parallax exclusion, Ken Burns and rotating-slide JS are
   left untouched — these layers sit around it.
   =========================================================================== */
/* The scene wraps the bg image + atmosphere layers behind the content. */
.hero-x--cinematic .hero-x__scene{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-x--cinematic .hero-x__bg{z-index:0}            /* re-based inside the scene */
.hero-x--cinematic::after{content:none}              /* drop the old flat overlay */
/* Light atmospheric overlay — far lighter than the old flat gradient so the
   photo stays bright; just enough top/bottom tint for header + base legibility. */
.hero-x--cinematic .hero-x__overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,28,44,.20) 0%, transparent 38%, rgba(8,28,44,.32) 100%)}
/* Cinematic vignette: clear bright center, edges fading to near-black corners. */
.hero-x--cinematic .hero-x__vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,
    transparent 0%, transparent 50%,
    rgba(0,0,0,.38) 72%, rgba(0,0,0,.80) 90%, rgba(0,0,0,.96) 100%)}
/* Soft directional color wash — cool sky from top-right, deep water from low-left. */
.hero-x--cinematic .hero-x__glow{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 85% 12%, rgba(120,190,230,.14), transparent 60%),
    radial-gradient(ellipse 55% 55% at 8% 100%, rgba(10,40,70,.34), transparent 65%)}

/* Content row: glass panel (+ logo on the right at desktop), centered as a pair. */
.hero-x--cinematic .hero-x__content{position:relative;z-index:2}
.hero-x--cinematic .hero-x__inner{position:relative;display:flex;flex-direction:column;gap:1rem;
  padding:clamp(24px,3.5vw,44px) clamp(24px,3.5vw,48px);
  background:linear-gradient(180deg, rgba(10,28,40,.55) 0%, rgba(10,28,40,.72) 100%);
  backdrop-filter:blur(14px) saturate(135%);-webkit-backdrop-filter:blur(14px) saturate(135%);
  border:1px solid rgba(255,255,255,.14);border-radius:clamp(18px,2.4vw,28px);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.14)}
.hero-x--cinematic .hero-x__inner > *{margin:0}      /* gap owns spacing */
.hero-x--cinematic .hero-x__inner .hero-phone-line{text-align:inherit}
/* Buttons sit directly in the glass panel — drop the old nested glass card look. */
.hero-x--cinematic .hero-card{margin:.35rem 0 0;padding:0;width:auto;max-width:100%;
  background:none;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
/* Soft gold accent hairline along the top of the panel. */
.hero-x--cinematic .hero-x__inner::after{content:"";position:absolute;left:clamp(24px,3.5vw,44px);
  right:clamp(24px,3.5vw,44px);top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(232,200,120,.45), transparent)}

/* The store logo — hidden by default; shown to the right of the panel on desktop. */
.hero-x--cinematic .hero-x__logo{display:none}

@media (min-width:901px){
  /* Glass sits in the LEFT section (inset, not flush) and the logo is pushed to
     the right edge, leaving the middle of the photo (the fish) clear. The hero
     content drops the centered container width here so the glass can reach the
     true left section instead of stopping at the centered column's edge. */
  .hero-x--cinematic .hero-x__content{display:flex;align-items:center;justify-content:flex-start;
    max-width:none;width:100%;margin:0;
    /* Left inset grows on very wide (e.g. 32") screens so the glass eases back
       toward center instead of sitting marooned at the far left. Below ~1670px
       it stays at the normal clamp, so laptops/standard desktops are unchanged. */
    padding-left:max(clamp(24px,5vw,96px), calc((100vw - 1480px) / 2));
    padding-right:clamp(24px,5vw,96px)}
  .hero-x--cinematic .hero-x__inner{align-items:flex-start;text-align:left;max-width:600px;margin-left:0}
  /* Smaller, tighter headline inside the panel so it stops wrapping to 6 lines. */
  .hero-x--cinematic .hero-x__inner h1{font-size:clamp(1.9rem,3.2vw,3rem);line-height:1.06}
  .hero-x--cinematic .hero-x__logo{display:block;flex:0 0 auto;margin:auto;
    width:clamp(352px,30vw,496px);height:auto;filter:drop-shadow(0 14px 30px rgba(0,0,0,.55))}
}
@media (max-width:900px){
  .hero-x--cinematic .hero-x__content{display:flex;flex-direction:column}
  .hero-x--cinematic .hero-x__inner{align-items:center;text-align:center;width:100%;max-width:560px;margin:0 auto}
}

/* ---- Intro choreography (only when JS animations are on) ----------------- */
html.js-anim .hero-x--cinematic .hero-x__overlay,
html.js-anim .hero-x--cinematic .hero-x__vignette,
html.js-anim .hero-x--cinematic .hero-x__glow{opacity:0;animation:heroIntroOverlay 2000ms var(--ease) 500ms both}
html.js-anim .hero-x--cinematic .hero-x__inner{animation:heroIntroContent 1000ms var(--ease) 700ms both}
html.js-anim .hero-x--cinematic .hero-x__inner > *{opacity:0;animation:heroIntroContent 850ms var(--ease) both}
html.js-anim .hero-x--cinematic .hero-x__inner > *:nth-child(1){animation-delay:1000ms}
html.js-anim .hero-x--cinematic .hero-x__inner > *:nth-child(2){animation-delay:1150ms}
html.js-anim .hero-x--cinematic .hero-x__inner > *:nth-child(3){animation-delay:1300ms}
html.js-anim .hero-x--cinematic .hero-x__inner > *:nth-child(4){animation-delay:1500ms}
html.js-anim .hero-x--cinematic .hero-x__inner > *:nth-child(n+5){animation-delay:1700ms}
/* Logo floats in mid-stream of the intro: one smooth decelerating drift (a soft
   arc + tilt + scale, no snap or bounce), fading in as it moves, then a gentle
   perpetual float so it feels alive rather than mechanically parked. */
html.js-anim .hero-x--cinematic .hero-x__logo{
  opacity:0;
  animation:
    heroLogoIn 1700ms cubic-bezier(.16,1,.3,1) 1300ms both,
    heroLogoFloat 7s ease-in-out 3000ms infinite;
}
@keyframes heroIntroOverlay{from{opacity:0}to{opacity:1}}
@keyframes heroIntroContent{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes heroLogoIn{
  0%   {opacity:0;transform:translate(70px,18px) scale(.9) rotate(2.5deg)}
  60%  {opacity:1}
  100% {opacity:1;transform:translate(0,0) scale(1) rotate(0deg)}
}
@keyframes heroLogoFloat{
  0%,100% {transform:translateY(0) rotate(0deg)}
  50%     {transform:translateY(-9px) rotate(-1.2deg)}
}

/* ---- Stats strip: trophy rail + odometer gauges -------------------------- */
.stats-strip{position:relative;background:var(--c-primary-deep);color:#fff;padding:2.8rem 0;overflow:hidden}
/* faint instrument-panel texture so the dials feel mounted on a dash */
.stats-strip::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:radial-gradient(120% 80% at 50% -10%,rgba(255,255,255,.10),transparent 60%),
            radial-gradient(80% 60% at 100% 120%,rgba(0,0,0,.35),transparent 60%)}
/* Half-submerged "lake water": an elastic spring surface (JS-driven) that
   sloshes with momentum and ripples under the cursor — like the oil-and-water
   in a ship-in-a-bottle toy. Desktop + fine-pointer only; off on mobile/touch. */
/* Water + shoreline now run on phones too (tilt-driven there). */
.ss-water{display:block;position:absolute;left:-16%;right:-16%;top:28%;bottom:-60px;z-index:1;pointer-events:none}
/* overflow visible so a rising crest is never clipped flat at the layer top */
.ss-water__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* TEMP: Guntersville shoreline behind the panel — the water rises over its
   lower half so it reads like looking at the shore from half-underwater. */
.ss-shore{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/assets/guntersvilleshore.webp') center 38%/cover no-repeat}
.ss-shore::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(174,198,207,.9) 0%,rgba(174,198,207,0) 18%,rgba(8,28,22,0) 52%,rgba(5,26,38,.55) 100%)}

/* Instrument housing: a slightly transparent recessed panel holding the dials */
.gauge-panel{position:relative;z-index:1;border-radius:20px;
  padding:clamp(1.4rem,3vw,2.2rem) clamp(1rem,3vw,2rem) clamp(1.2rem,3vw,1.8rem);
  background:linear-gradient(180deg,rgba(10,32,54,.40),rgba(6,20,36,.55));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.10);
  /* reverse-emboss: light top edge, dark base, sunken interior + lift shadow */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 0 rgba(0,0,0,.50),
    inset 0 0 46px rgba(0,0,0,.40),
    0 20px 44px rgba(0,0,0,.42)}
/* hairline groove just inside the rim, for a machined edge */
.gauge-panel::before{content:"";position:absolute;inset:7px;border-radius:14px;pointer-events:none;
  border:1px solid rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(0,0,0,.30)}

/* Corner screws */
.gauge-panel__screw{position:absolute;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#aebecd,#5a6b7c 55%,#2c3a47);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -2px 3px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.5)}
.gauge-panel__screw::after{content:"";position:absolute;inset:0;margin:auto;width:8px;height:1.6px;border-radius:1px;
  background:rgba(0,0,0,.55);transform:rotate(42deg)}
.gauge-panel__screw--tl{top:11px;left:11px}.gauge-panel__screw--tr{top:11px;right:11px}
.gauge-panel__screw--bl{bottom:11px;left:11px}.gauge-panel__screw--br{bottom:11px;right:11px}

/* Engraved brass maker's nameplate, centred on the rim */
.gauge-panel__plate{position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:.7rem;letter-spacing:3.5px;text-transform:uppercase;font-weight:800;white-space:nowrap;
  padding:3px 16px;border-radius:5px;
  color:#f2dca0;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.26));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 2px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.06);
  text-shadow:0 1px 1px rgba(0,0,0,.7),0 0 8px rgba(242,220,160,.25)}

/* Gauge cluster */
.gauge-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(.7rem,1.8vw,1.3rem);min-width:0}

/* Each meter sits in its own sunken bezel well */
.gauge{--g-accent:var(--c-accent);margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:.9rem .5rem .8rem;border-radius:14px;background:rgba(0,0,0,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.04),inset 0 9px 22px rgba(0,0,0,.34)}
.gauge--g1{--g-accent:#f2b733}   /* sun gold   */
.gauge--g2{--g-accent:#5bb3e6}   /* lake blue  */
.gauge--g3{--g-accent:#f7cf6b}   /* warm gold  */
.gauge--g4{--g-accent:#9fe0c0}   /* spray mint */

.gauge__dial{position:relative;width:100%;max-width:172px;aspect-ratio:1/1}
.gauge__dial svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}

.gauge__face{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.10);stroke-width:1.5}
.gauge__bezel{fill:none;stroke:rgba(255,255,255,.22);stroke-width:3}
.gauge__track{fill:none;stroke:rgba(255,255,255,.14);stroke-width:9;stroke-linecap:round}
.gauge__progress{fill:none;stroke:var(--g-accent);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:1000;filter:drop-shadow(0 0 4px rgba(255,255,255,.18));
  transition:stroke-dashoffset 1.7s var(--ease)}
.gauge__tick{stroke:rgba(255,255,255,.30);stroke-width:1.6;stroke-linecap:round}
.gauge__tick.is-major{stroke:rgba(255,255,255,.62);stroke-width:2.6}
/* Fine graduation ring of small notches, just inside the bezel ring */
.gauge__notch{stroke:rgba(255,255,255,.20);stroke-width:.8;stroke-linecap:round}
.gauge__notch.is-big{stroke:rgba(255,255,255,.42);stroke-width:1.3}
/* Alabama Lakes: quadrant dividers + per-section lake labels */
.gauge__divider{stroke:rgba(255,255,255,.28);stroke-width:1.4;stroke-linecap:round}
.gauge__lake{fill:rgba(255,255,255,.82);font-size:8.2px;font-weight:800;letter-spacing:.4px;
  font-family:inherit;text-shadow:0 1px 1px rgba(0,0,0,.6)}
/* Fish / clock badge, upper-left inside the ring */
.gauge__badge path,.gauge__badge .gauge__badge-dot{fill:var(--g-accent)}
.gauge__badge-ring{fill:none;stroke:var(--g-accent);stroke-width:1.6}
.gauge__badge-hand{stroke:var(--g-accent);stroke-width:1.4;stroke-linecap:round}
.gauge__badge{opacity:.85}
.gauge__needle{fill:var(--g-accent);transform-box:view-box;transform-origin:100px 100px;
  transition:transform 1.7s var(--ease);filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.gauge__needle-tail{fill:rgba(255,255,255,.55)}
.gauge__hub{fill:#13324f;stroke:rgba(255,255,255,.45);stroke-width:2}
.gauge__hub-dot{fill:var(--g-accent)}

/* Odometer-style readout: a recessed digit window low-centre in the dial */
.gauge__readout{position:absolute;left:0;right:0;bottom:12%;display:flex;justify-content:center;pointer-events:none}
.gauge .stat__num.odo{display:inline-flex;align-items:baseline;gap:.06em;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:clamp(.85rem,1.9vw,1.18rem);font-weight:800;line-height:1;color:#fff;letter-spacing:1px;
  padding:.2em .42em;border-radius:4px;
  /* cylinder sheen + sunken window */
  background:linear-gradient(180deg,#091420 0%,#16283a 46%,#0e1d2b 56%,#050c14 100%);
  box-shadow:inset 0 1.5px 3px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.07),0 1px 0 rgba(255,255,255,.05);
  text-shadow:0 1px 2px rgba(0,0,0,.8)}
.gauge .stat__num.odo .suffix{color:var(--g-accent);font-size:.82em}
.stat__label{margin-top:.55rem;font-size:.82rem;letter-spacing:.6px;color:rgba(255,255,255,.82);text-transform:uppercase}

/* Before the gauge animates in, hold needle + arc at the zero position */
html.js-anim .gauge[data-gauge]:not(.is-live) .gauge__needle{transform:rotate(-135deg)!important}
html.js-anim .gauge[data-gauge]:not(.is-live) .gauge__progress{stroke-dashoffset:1000!important}

/* ---- Stats strip responsive tuning ---- */
@media (max-width:680px){
  .stats-strip{padding:2rem 0}
  /* drop the GPU-heavy blur on phones; use a more opaque panel instead */
  .gauge-panel{-webkit-backdrop-filter:none;backdrop-filter:none;
    background:linear-gradient(180deg,rgba(10,32,54,.64),rgba(6,20,36,.74))}
  .gauge-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .gauge{padding:.7rem .35rem .65rem}
  .gauge__dial{max-width:148px}
  .gauge-panel{padding:1.6rem .8rem 1rem}
  .gauge-panel__screw{width:11px;height:11px}
}
@media (max-width:380px){
  .gauge-panel__plate{font-size:.55rem;letter-spacing:2px}
}

/* ---- Section headers + wave dividers ------------------------------------ */
.section{padding:3.5rem 0}
.section--tint{background:linear-gradient(180deg,var(--c-surface),var(--c-bg))}
.sec-head{text-align:center;max-width:60ch;margin:0 auto 2.2rem}
.sec-head .eyebrow{text-transform:uppercase;letter-spacing:3px;font-weight:800;font-size:.82rem;color:var(--c-section-accent)}
.sec-head h2{margin:.4rem 0 .5rem}
.sec-head p{color:var(--c-ink-soft)}
.wave{display:block;width:100%;height:60px;color:var(--c-surface)}
.wave svg{display:block;width:100%;height:100%}

/* ---- Feature/trust cards with icon + hover lift ------------------------- */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem}
.feature{background:var(--c-surface);border:1px solid var(--c-line);border-radius:16px;padding:1.6rem;
  box-shadow:var(--shadow);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.feature:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.feature__icon{width:54px;height:54px;display:grid;place-items:center;border-radius:14px;font-size:1.6rem;margin-bottom:.9rem;
  background:linear-gradient(135deg,var(--c-primary),var(--c-section-accent));color:#fff}
.feature h3{margin:0 0 .35rem;font-size:1.15rem}
.feature p{color:var(--c-ink-soft);margin:0}

/* ---- Image trip cards --------------------------------------------------- */
.trip-card{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:var(--c-surface);
  display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.trip-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.trip-card__media{position:relative;height:200px;overflow:hidden}
.trip-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.trip-card:hover .trip-card__media img{transform:scale(1.08)}
.trip-card__price{position:absolute;top:12px;right:12px;background:var(--c-accent);color:#16261d;font-weight:900;
  padding:.35rem .8rem;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.trip-card__body{padding:1.3rem;display:flex;flex-direction:column;flex:1}

/* ---- Alternating image/text feature rows -------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;padding:2.5rem 0}
.split--rev .split__media{order:2}
.split__media img{width:100%;border-radius:18px;box-shadow:var(--shadow-lg)}
.split__body h2{margin-top:0}
.split__body p{color:var(--c-ink-soft);font-size:1.05rem}
@media(max-width:820px){.split{grid-template-columns:1fr}.split--rev .split__media{order:0}}

/* ---- Lake cards with photo + overlay ------------------------------------ */
.lake-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.lake-card{position:relative;border-radius:18px;overflow:hidden;min-height:260px;display:flex;align-items:flex-end;
  color:#fff;box-shadow:var(--shadow);isolation:isolate}
.lake-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s var(--ease)}
.lake-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,30,50,.1),rgba(10,30,50,.85))}
.lake-card:hover img{transform:scale(1.08)}
.lake-card__body{padding:1.3rem}
.lake-card__body h3{color:#fff;margin:0 0 .3rem}
.lake-card__body p{color:rgba(255,255,255,.9);font-size:.92rem;margin:0}

/* ---- Masonry gallery + lightbox ----------------------------------------- */
.masonry{columns:4 240px;column-gap:14px}
.masonry .ph{break-inside:avoid;margin:0 0 14px;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);
  cursor:zoom-in;position:relative;display:block;background:var(--c-surface)}
.masonry .ph img{width:100%;display:block;transition:transform .5s var(--ease),filter .3s}
.masonry .ph:hover img{transform:scale(1.06)}
.masonry .ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:.7rem;color:#fff;font-size:.85rem;font-weight:600;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));opacity:0;transition:opacity .3s}
.masonry .ph:hover figcaption{opacity:1}

.lbx{position:fixed;inset:0;z-index:1000;background:rgba(8,16,26,.92);display:none;align-items:center;justify-content:center}
.lbx.open{display:flex}
.lbx img{max-width:92vw;max-height:84vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lbx__cap{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:#fff;font-weight:600}
.lbx__btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);color:#fff;border:0;
  width:52px;height:52px;border-radius:50%;font-size:1.6rem;cursor:pointer;backdrop-filter:blur(6px)}
.lbx__btn:hover{background:rgba(255,255,255,.28)}
.lbx__prev{left:18px}.lbx__next{right:18px}
.lbx__close{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;font-size:2.2rem;cursor:pointer;line-height:1}
@media(max-width:600px){.masonry{columns:2 140px}.lbx__btn{width:42px;height:42px}}

/* ---- Buttons: shimmer on primary ---------------------------------------- */
.btn-primary, .btn-pay{position:relative;overflow:hidden}
.btn-primary::after, .btn-pay::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg)}
.btn-primary:hover::after, .btn-pay:hover::after{left:130%;transition:left .7s var(--ease)}

/* ---- Header scroll state ------------------------------------------------- */
.site-header{transition:box-shadow .25s, background .25s}
.site-header.scrolled{box-shadow:0 6px 24px rgba(16,32,44,.12)}

/* ---- CTA band with image -------------------------------------------------*/
.cta-x{position:relative;color:#fff;text-align:center;padding:4rem 0;overflow:hidden;isolation:isolate}
.cta-x__bg{position:absolute;inset:-24% 0;z-index:-2;background-size:cover;background-position:center;will-change:transform}
.cta-x::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--hero-overlay)}
.cta-x h2{color:#fff;font-size:clamp(1.8rem,4vw,2.8rem)}
.cta-x p{color:rgba(255,255,255,.9)}

/* ---- FAQ two-column layout ---------------------------------------------- */
.faq-layout{display:grid;grid-template-columns:2fr 1fr;gap:2rem;align-items:start}
@media(max-width:760px){.faq-layout{grid-template-columns:1fr}}

/* ---- Review feature block ----------------------------------------------- */
.review-x{background:var(--c-surface);border:1px solid var(--c-line);border-left:5px solid var(--c-section-accent);
  border-radius:16px;padding:2rem;box-shadow:var(--shadow);max-width:760px;margin:0 auto}
.review-x blockquote{font-size:1.3rem;font-style:italic;line-height:1.5;margin:.5rem 0 1rem;color:var(--c-ink)}
.review-x .stars{color:var(--c-accent);font-size:1.3rem;letter-spacing:3px}

/* ---- Hero phone line + trust line (under the hero action card) ----------- */
.hero-x .hero-phone-line{margin:1rem auto 0;text-align:center;color:rgba(255,255,255,.95);
  font-weight:600;text-shadow:0 2px 12px rgba(0,0,0,.5);max-width:52ch}
.hero-x .hero-phone-line a{color:#fff;font-weight:800;text-decoration:none}
.hero-x .hero-phone-line a:hover{text-decoration:underline}
.hero-x .hero-trustline{font-weight:600;opacity:.95}

/* ---- How Booking Works (numbered steps) --------------------------------- */
.booking-steps{list-style:none;counter-reset:none;margin:2rem auto 0;padding:0;max-width:880px;
  display:grid;gap:.9rem}
.booking-step{display:flex;align-items:flex-start;gap:1rem;background:var(--c-surface);
  border:1px solid var(--c-line);border-left:4px solid var(--c-section-accent);border-radius:14px;
  padding:1.1rem 1.25rem;box-shadow:var(--shadow)}
.booking-step__num{flex:0 0 auto;width:2.4rem;height:2.4rem;border-radius:50%;
  background:var(--c-primary);color:#fff;font-weight:800;font-size:1.15rem;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.booking-step__body h3{margin:.15rem 0 .3rem;color:var(--c-primary-deep);font-size:1.12rem}
.booking-step__body p{margin:0;color:var(--c-ink-soft);line-height:1.5}
.booking-how .btn-ghost{border-color:var(--c-primary)}

/* ---- Drop caps: long-form intro & story paragraphs only ------------------
   Applied to city/lake/service intros (.lead-para), blog post bodies, and the
   About story. NOT on hero ledes, forms, FAQ, buttons, or short blurbs. */
.lead-para::first-letter,
.blog-post__body > p:first-of-type::first-letter,
.about-body > p:first-of-type::first-letter{
  float:left;
  font-family:Georgia,'Times New Roman',serif;
  font-weight:800;
  font-size:3.3rem;
  line-height:.78;
  padding:.04em .1em 0 0;
  margin:.04em .08em 0 0;
  color:var(--page-accent);
}
@media (max-width:560px){
  .lead-para::first-letter,
  .blog-post__body > p:first-of-type::first-letter,
  .about-body > p:first-of-type::first-letter{ font-size:2.7rem }
}

/* ---- Per-page accent identity -------------------------------------------
   Each top-level page gets its own ACCENT color (eyebrows, section rules,
   card accent borders, dividers). The brand stays consistent: header, buttons,
   and the seasonal --c-primary are untouched. Krell's palette. */
body{--page-accent:var(--c-section-accent)}
body.page-trips        {--page-accent:#d2521f;--c-section-accent:#d2521f} /* warm red/orange */
body.page-rates        {--page-accent:#2f9e57;--c-section-accent:#2f9e57} /* green/gold */
body.page-reviews      {--page-accent:#2f9e57;--c-section-accent:#2f9e57} /* green/gold */
body.page-service-areas,
body.page-service-area,
body.page-city,
body.page-lake         {--page-accent:#2f7fb5;--c-section-accent:#2f7fb5} /* blue */
body.page-about        {--page-accent:#b07a2e;--c-section-accent:#b07a2e} /* warm brown/gold */
body.page-gallery      {--page-accent:#cf7a2a;--c-section-accent:#cf7a2a} /* sunset orange */
body.page-contact      {--page-accent:#1f8a82;--c-section-accent:#1f8a82} /* teal/green */
body.page-faq          {--page-accent:#5d7a91;--c-section-accent:#5d7a91} /* muted blue/gray */

/* Make every section eyebrow pick up the page accent (covers plain, tinted,
   photo, and video sections, which otherwise use different accent vars). The
   leading `body` raises specificity above seo-pages.css without clobbering the
   intentional cyan "mission control" eyebrows on the water-temp/best-times
   widgets (those carry an extra class, so they keep higher specificity). */
body .sec-head .eyebrow,
body .section--tint .sec-head .eyebrow,
body .section--photo .sec-head .eyebrow,
body .section--video .sec-head .eyebrow{color:var(--page-accent)}
/* Section-header underline rule follows the page accent. */
body .sec-head .eyebrow::after{background:var(--page-accent)}

/* ---- Hot Spot Maps feature band (homepage) + buy card (service page) ----- */
.hotspot-feature__grid{display:grid;grid-template-columns:1.7fr 1fr;gap:1.6rem;align-items:center}
.hotspot-feature__copy h2{margin:.2rem 0 .5rem}
.hotspot-feature__pts{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.5rem}
.hotspot-feature__pts li{font-weight:600;color:var(--c-ink)}
.hotspot-feature__buy{background:var(--c-surface);border:1px solid var(--c-line);border-top:4px solid var(--c-section-accent);
  border-radius:14px;padding:1.4rem;text-align:center;box-shadow:var(--shadow)}
.hotspot-feature__price{font-size:2.6rem;font-weight:800;color:var(--c-primary);line-height:1}
.hotspot-feature__note{color:var(--c-ink-soft);font-size:.9rem;margin:.3rem 0 1rem}
.hotspot-feature__buy .btn{width:100%;margin-top:.5rem}

.buy-card{display:grid;grid-template-columns:1.7fr 1fr;gap:1.6rem;align-items:center;
  background:var(--c-surface);border:1px solid var(--c-line);border-left:5px solid var(--c-section-accent);
  border-radius:16px;padding:1.6rem;box-shadow:var(--shadow);max-width:980px;margin:0 auto}
.buy-card__title{margin:.1rem 0 .5rem}
.buy-card__desc{color:var(--c-ink-soft)}
.buy-card__included{list-style:none;padding:0;margin:.8rem 0 0;display:grid;gap:.4rem}
.buy-card__included li{padding-left:1.4rem;position:relative}
.buy-card__included li::before{content:"\2713";position:absolute;left:0;color:var(--c-primary);font-weight:800}
.buy-card__buy{text-align:center}
.buy-card__price{font-size:2.6rem;font-weight:800;color:var(--c-primary);line-height:1}
.buy-card__note{color:var(--c-ink-soft);font-size:.9rem;margin:.3rem 0 1rem}
.buy-card__buy .btn{width:100%;margin-top:.5rem}
@media(max-width:720px){.hotspot-feature__grid,.buy-card{grid-template-columns:1fr}}

/* ---- First-line indent on long-form body paragraphs ---------------------
   A ~2-character first-line indent makes wrapped/narrow text easier to read.
   Applied to article/prose body copy only (not heroes, buttons, captions, or
   short blurbs). Drop-cap paragraphs are exempted so the indent doesn't fight
   the floated capital. */
.prose p,
.about-body > p,
.blog-post__body > p,
.buy-card__desc{ text-indent: 1.6em; }
.prose p.lead-para,
.lead-para,
.about-body > p:first-of-type,
.blog-post__body > p:first-of-type{ text-indent: 0; }

/* (Interactive EQ moved to the radio/jingle player's EQ, where it belongs.) */

/* ---- Visual-Editor drop-cap toggle (any element flagged in the editor) --- */
[data-ve-dropcap]::first-letter{
  float:left;font-family:Georgia,'Times New Roman',serif;font-weight:800;
  font-size:3.3rem;line-height:.78;padding:.04em .1em 0 0;margin:.04em .08em 0 0;
  color:var(--page-accent);
}
[data-ve-dropcap]{text-indent:0}
@media (max-width:560px){ [data-ve-dropcap]::first-letter{font-size:2.7rem} }

/* ===========================================================================
   HOMEPAGE ENGAGEMENT SECTIONS
   Five distinct-background blocks added to the home page: (#1) latest fishing
   report, (#2) live lake conditions, (#3) reviews + rating badge, (#4) trip
   video, (#5) what's included / what to bring. All use the seasonal --c-* vars
   so they track the active theme, and lean on the existing data-reveal hooks.
   =========================================================================== */

/* ---- #1 Latest report: "What's biting now" (light, split media card) ----- */
.nowbite{background:radial-gradient(120% 80% at 100% 0,rgba(91,179,230,.10),transparent 60%),var(--c-bg)}
.nowbite__card{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr);
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow);text-decoration:none;color:var(--c-ink);max-width:980px;margin:0 auto;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.nowbite__card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.nowbite__media{position:relative;overflow:hidden;min-height:230px}
.nowbite__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.nowbite__card:hover .nowbite__media img{transform:scale(1.07)}
.nowbite__live{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:.5em;
  background:rgba(8,22,34,.7);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:.4em .8em;border-radius:999px;backdrop-filter:blur(6px)}
.nowbite__pulse{width:9px;height:9px;border-radius:50%;background:#37d67a;animation:nb-pulse 1.8s ease-out infinite}
@keyframes nb-pulse{0%{box-shadow:0 0 0 0 rgba(55,214,122,.6)}70%{box-shadow:0 0 0 10px rgba(55,214,122,0)}100%{box-shadow:0 0 0 0 rgba(55,214,122,0)}}
.nowbite__body{padding:1.6rem 1.7rem;display:flex;flex-direction:column;gap:.55rem;justify-content:center}
.nowbite__meta{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center}
.nowbite__date{font-weight:700;color:var(--c-ink-soft);font-size:.9rem}
.nowbite__temp{background:var(--c-bg);border:1px solid var(--c-line);border-radius:999px;padding:.15em .7em;
  font-weight:800;font-size:.85rem;color:var(--c-primary)}
.nowbite__title{font-size:1.45rem;font-weight:800;line-height:1.2;color:var(--c-ink)}
.nowbite__excerpt{color:var(--c-ink-soft);font-size:1rem;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nowbite__more{margin-top:.3rem;font-weight:800;color:var(--c-primary)}
.nowbite__card:hover .nowbite__more{text-decoration:underline}
.nowbite__foot{text-align:center;margin-top:1.5rem}
@media(max-width:720px){.nowbite__card{grid-template-columns:1fr}.nowbite__media{min-height:200px}}

/* ---- #2 Live conditions: dark "sonar" instrument band ------------------- */
.conditions{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:linear-gradient(160deg,#06243a 0%,#0a3b58 55%,#06283f 100%)}
.conditions__glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(40% 60% at 18% 20%,rgba(91,179,230,.22),transparent 60%),
  radial-gradient(45% 65% at 85% 90%,rgba(45,200,160,.18),transparent 65%)}
.conditions .sec-head h2{color:#fff}
.conditions .sec-head .eyebrow{color:#7fd4ff}
.conditions__live{display:inline-flex;align-items:center;gap:.5em;justify-content:center;
  color:#8fe3c9;font-weight:700;font-size:.85rem;letter-spacing:.06em;margin-top:.5rem}
.conditions__eq{display:inline-flex;gap:2px;align-items:flex-end;height:14px}
.conditions__eq i{width:3px;height:100%;background:#37d67a;border-radius:2px;transform-origin:bottom;
  animation:cond-eq 1s ease-in-out infinite}
.conditions__eq i:nth-child(2){animation-delay:.15s}.conditions__eq i:nth-child(3){animation-delay:.3s}
.conditions__eq i:nth-child(4){animation-delay:.45s}.conditions__eq i:nth-child(5){animation-delay:.6s}
@keyframes cond-eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.conditions__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;
  max-width:960px;margin:0 auto}
.cond-tile{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:18px;
  padding:1.5rem 1.3rem;text-align:center;backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 40px -22px rgba(0,0,0,.7)}
.cond-tile__label{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:800;color:rgba(255,255,255,.62)}
.cond-tile__big{font-size:3.4rem;font-weight:900;line-height:1;margin:.5rem 0 .3rem;text-shadow:0 0 22px rgba(91,179,230,.45)}
.cond-tile__unit{font-size:1.4rem;font-weight:800;vertical-align:super;opacity:.8}
.cond-tile__note{color:rgba(255,255,255,.82);font-size:.92rem;line-height:1.45}
.cond-ring{--pct:0;position:relative;display:grid;place-items:center;width:120px;height:120px;border-radius:50%;
  margin:.6rem auto .5rem;background:conic-gradient(var(--ring) calc(var(--pct)*1%),rgba(255,255,255,.10) 0);
  box-shadow:0 0 26px -6px var(--ring)}
.cond-ring::before{content:"";position:absolute;inset:14px;border-radius:50%;background:#0b2e46}
.cond-ring__num{position:relative;z-index:1;font-size:1.9rem;font-weight:900;line-height:1}
.cond-ring__num small{font-size:.8rem;font-weight:700;opacity:.6}
.cond-windows{list-style:none;padding:0;margin:.6rem 0 .9rem;display:grid;gap:.5rem;text-align:left}
.cond-windows li{display:flex;align-items:center;gap:.6em;background:rgba(255,255,255,.06);border-radius:10px;padding:.5rem .7rem}
.cond-windows__dot{color:#ffd24a}
.cond-windows__time{font-weight:800}
.cond-windows__lab{color:rgba(255,255,255,.6);font-size:.82rem;margin-left:auto}
.cond-tile__cta{display:inline-block;color:#7fd4ff;font-weight:800;text-decoration:none}
.cond-tile__cta:hover{text-decoration:underline}

/* ---- #3 Reviews + rating badge (soft light) ----------------------------- */
.proof{background:linear-gradient(180deg,#fff 0%,var(--c-bg) 100%)}
.proof__badge{display:flex;flex-direction:column;align-items:center;gap:.1rem;margin:0 auto 2rem;
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:18px;padding:1rem 1.6rem;width:max-content;box-shadow:var(--shadow)}
.proof__stars{color:#f5a623;font-size:1.5rem;letter-spacing:3px;line-height:1}
.proof__rating{font-size:2.2rem;font-weight:900;color:var(--c-ink);line-height:1.1}
.proof__src{color:var(--c-ink-soft);font-size:.85rem;font-weight:600}
.proof__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem}
.proof-card{position:relative;background:var(--c-surface);border:1px solid var(--c-line);border-radius:16px;
  padding:1.6rem 1.4rem 1.4rem;box-shadow:var(--shadow);overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.proof-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--c-primary),var(--c-accent))}
.proof-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.proof-card__mark{position:absolute;top:.1rem;right:1rem;font-family:Georgia,serif;font-size:4rem;line-height:1;color:var(--c-accent);opacity:.18}
.proof-card__stars{color:#f5a623;letter-spacing:2px;font-size:1.05rem}
.proof-card__quote{margin:.5rem 0 1rem;font-size:1rem;line-height:1.6;color:var(--c-ink);font-style:italic}
.proof-card__by{display:flex;flex-direction:column}
.proof-card__by strong{color:var(--c-ink);font-size:1rem}
.proof-card__by span{color:var(--c-ink-soft);font-size:.85rem}
.proof__foot{text-align:center;margin-top:1.6rem;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}

/* ---- #4 Trip video (deep brand band via .section--video) ----------------- */
.videohome__frame{position:relative;max-width:900px;margin:0 auto;aspect-ratio:16/9;border-radius:20px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.14);background:#06223a}
.videohome__player{width:100%;height:100%;object-fit:cover;display:block}
.videohome__facade{position:absolute;inset:0;display:grid;place-items:center;background-size:cover;background-position:center;text-decoration:none}
.videohome__facade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,30,50,.25),rgba(6,30,50,.55))}
.videohome__play{position:relative;z-index:1;width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.92);
  display:grid;place-items:center;box-shadow:0 12px 36px rgba(0,0,0,.5);
  transition:transform .2s var(--ease),background .2s;animation:vh-pulse 2.6s ease-out infinite}
.videohome__play::before{content:"";margin-left:6px;border-style:solid;border-width:15px 0 15px 26px;
  border-color:transparent transparent transparent var(--c-primary-deep)}
.videohome__facade:hover .videohome__play{transform:scale(1.08);background:#fff}
@keyframes vh-pulse{0%{box-shadow:0 12px 36px rgba(0,0,0,.5),0 0 0 0 rgba(255,255,255,.5)}70%{box-shadow:0 12px 36px rgba(0,0,0,.5),0 0 0 22px rgba(255,255,255,0)}100%{box-shadow:0 12px 36px rgba(0,0,0,.5),0 0 0 0 rgba(255,255,255,0)}}
.videohome__soon{position:absolute;z-index:1;bottom:18px;left:0;right:0;text-align:center;color:#fff;font-weight:700;
  letter-spacing:.04em;text-shadow:0 2px 8px rgba(0,0,0,.6)}
@media(max-width:560px){.videohome__play{width:64px;height:64px}.videohome__play::before{border-width:12px 0 12px 20px}}

/* ---- #5 What's included / what to bring (warm light, two cards) ---------- */
.included{background:radial-gradient(120% 80% at 0 0,rgba(242,183,51,.10),transparent 55%),linear-gradient(180deg,#fff,#f7f3ea)}
.included__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;max-width:920px;margin:0 auto}
.included__card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:18px;padding:1.6rem;
  box-shadow:var(--shadow);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.included__card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.included__card--in{border-top:4px solid #2f9e57}
.included__card--bring{border-top:4px solid var(--c-accent)}
.included__head{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.included__head h3{margin:0;font-size:1.25rem}
.included__ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem;
  background:rgba(47,158,87,.14);color:#2f9e57;font-weight:900}
.included__ico--bring{background:rgba(242,183,51,.18);color:#b07a2e}
.included__list{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.included__list li{position:relative;padding-left:1.8rem;color:var(--c-ink);line-height:1.45}
.included__list--check li::before{content:"\2713";position:absolute;left:0;top:0;color:#2f9e57;font-weight:900}
.included__list--bring li::before{content:"";position:absolute;left:.3rem;top:.55rem;width:8px;height:8px;border-radius:50%;background:var(--c-accent)}
@media(max-width:720px){.included__grid{grid-template-columns:1fr}}