/* ============================================================
   RAT ATTACK & CO. — playful pest-shop
   Warm off-white + black ink. Chunky rounded display. Mascots, stickers, wobble.
   ============================================================ */
:root{
  --paper:#FFFAEF;       /* warm off-white */
  --paper-2:#FFF1D6;     /* sunbleached */
  --paper-3:#F4E8CE;     /* deeper warm */
  --ink:#0A0A0A;
  --ink-2:#222226;
  --ink-3:#3D3D40;
  --mist:#7A7672;
  --rule:rgba(10,10,10,.16);

  --maxw:1280px;
  --pad:clamp(20px,4vw,56px);

  --r:18px;
  --r-lg:28px;
  --r-xl:40px;
  --r-pill:999px;

  --pop:cubic-bezier(.34,1.56,.64,1);
  --bounce:cubic-bezier(.68,-.55,.27,1.55);
  --ease:cubic-bezier(.2,.8,.2,1);

  --display:'Caprasimo', 'Bagel Fat One', 'Fraunces', Georgia, serif; /* chunky rounded display */
  --body:'Outfit', system-ui, -apple-system, sans-serif;             /* modern rounded sans */
  --marker:'Permanent Marker', 'Caveat', cursive;                    /* sticker hand */

  --shadow:0 6px 0 0 var(--ink);
  --shadow-lg:0 10px 0 0 var(--ink);
  --shadow-soft:0 12px 30px -8px rgba(10,10,10,.18);
}

*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  /* `overflow:clip` clips without creating a scroll container, so
     position:sticky inside the page (the hero pin) keeps working —
     unlike `overflow:hidden`, which breaks sticky. */
  overflow-x:clip;
  width:100%;
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  width:100%;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* dotty paper background */
.paper-grain{
  position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px, rgba(10,10,10,.07) 1.2px, transparent 1.2px);
  background-size:14px 14px;
}

/* scroll progress */
.scroll-prog{
  position:fixed;top:0;left:0;height:4px;width:0%;
  background:var(--ink);z-index:200;transition:width .08s linear;
  border-radius:0 4px 4px 0;
}

/* ============ TOPBAR ============ */
.topbar{
  background:var(--ink);color:var(--paper);
  font-family:var(--body);font-weight:600;font-size:13px;
  position:relative;z-index:10;
}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding-top:11px;padding-bottom:11px;gap:18px;flex-wrap:wrap}
.topbar a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.topbar .sep{margin:0 10px;opacity:.5}
.topbar .ticker{display:inline-flex;align-items:center;gap:8px}
.topbar .ticker::before{content:"●";color:var(--paper);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
@media (max-width:560px){.topbar .container>div:first-child{flex:1 1 100%}}

/* ============ HEADER ============ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,250,239,.92);
  backdrop-filter:blur(12px) saturate(140%);
  border-bottom:2px solid var(--ink);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px;gap:18px}
.brand{display:inline-flex;align-items:center}
.brand img{height:50px;width:auto;transition:transform .4s var(--bounce)}
.brand:hover img{transform:rotate(-3deg) scale(1.04)}
.nav{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600}
.nav a:not(.btn):not(.has-sub > *){
  color:var(--ink);padding:10px 16px;border-radius:var(--r-pill);
  transition:background .25s var(--ease),transform .25s var(--bounce);
}
.nav a:not(.btn):not(.has-sub > *):hover{background:var(--ink);color:var(--paper);transform:translateY(-2px) rotate(-1.5deg)}

/* curved sub-menu */
.has-sub{position:relative}
.has-sub > button{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:var(--r-pill);
  font-size:15px;font-weight:600;color:var(--ink);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.has-sub > button .ch{display:inline-block;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .3s var(--ease)}
.has-sub:hover > button,.has-sub.open > button{background:var(--ink);color:var(--paper)}
.has-sub:hover > button .ch,.has-sub.open > button .ch{transform:rotate(225deg) translateY(-3px) translateX(-3px)}
.submenu{
  position:absolute;left:50%;top:calc(100% + 14px);
  transform:translateX(-50%) translateY(8px) scale(.96);
  min-width:380px;
  background:var(--paper);
  border:2.5px solid var(--ink);border-radius:var(--r-lg);
  padding:10px;
  box-shadow:0 14px 0 -4px var(--paper-3),0 18px 40px rgba(10,10,10,.18);
  display:flex;flex-direction:column;gap:4px;
  opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease),transform .35s var(--bounce);
  z-index:60;
}
.has-sub:hover .submenu,.has-sub.open .submenu{opacity:1;transform:translateX(-50%) translateY(0) scale(1);pointer-events:auto}
.submenu::before{
  content:"";position:absolute;left:50%;top:-9px;width:16px;height:16px;
  background:var(--paper);border-left:2.5px solid var(--ink);border-top:2.5px solid var(--ink);
  transform:translateX(-50%) rotate(45deg);
}
.submenu a{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:var(--r);
  color:var(--ink) !important;background:transparent !important;
  transition:background .22s var(--ease) !important,transform .25s var(--bounce) !important;
}
.submenu a:hover{background:var(--paper-2) !important;transform:translateX(4px) rotate(-.5deg)}
.submenu .ico{
  width:48px;height:48px;flex:0 0 48px;border-radius:50%;
  display:grid;place-items:center;background:var(--ink);color:var(--paper);
  font-family:var(--display);font-size:22px;
}
.submenu .s-title{display:block;font-family:var(--display);font-size:18px;color:var(--ink);line-height:1.05}
.submenu .s-sub{display:block;font-size:13px;color:var(--ink-3);line-height:1.4;margin-top:2px}
.submenu .arrow{margin-left:auto;font-weight:700;transition:transform .25s var(--ease)}
.submenu a:hover .arrow{transform:translateX(4px)}

/* fat pill buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--body);font-weight:700;font-size:15px;
  padding:14px 24px;border-radius:var(--r-pill);
  border:2.5px solid var(--ink);
  transition:transform .25s var(--bounce),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
  white-space:nowrap;line-height:1;
}
.btn:hover{transform:translate(-2px,-3px) rotate(-1deg);box-shadow:5px 7px 0 var(--ink)}
.btn:active{transform:translate(0,0);box-shadow:0 0 0 var(--ink)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{box-shadow:5px 7px 0 var(--paper-3),5px 7px 0 5px var(--ink)}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-paper:hover{background:#fff}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:var(--paper-2);transform:translate(-2px,-3px) rotate(-1deg);box-shadow:none}

/* mobile nav */
.menu-toggle{display:none;width:46px;height:46px;align-items:center;justify-content:center;border-radius:50%;border:2.5px solid var(--ink);background:var(--paper)}
.menu-toggle .bars{display:block;width:22px;height:14px;position:relative}
.menu-toggle i{position:absolute;left:0;right:0;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),top .3s var(--ease),opacity .2s}
.menu-toggle i:nth-child(1){top:0}.menu-toggle i:nth-child(2){top:6px}.menu-toggle i:nth-child(3){top:12px}
.menu-toggle[aria-expanded="true"] i:nth-child(1){top:6px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] i:nth-child(3){top:6px;transform:rotate(-45deg)}
@media (max-width:980px){
  .menu-toggle{display:inline-flex}
  .nav{
    position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:2px solid var(--ink);
    flex-direction:column;align-items:stretch;gap:0;padding:14px var(--pad);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:transform .25s var(--ease),opacity .2s;
  }
  .nav.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav a:not(.btn),.has-sub > button{padding:16px 0;font-size:16px;border-bottom:1px solid var(--rule);justify-content:flex-start;border-radius:0;width:100%}
  .nav a:not(.btn):hover{background:transparent;color:var(--ink);transform:none;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
  .nav .btn{justify-content:center;margin-top:14px;width:100%}
  .submenu{position:static;transform:none;min-width:0;box-shadow:none;border:0;display:none;padding:0 0 8px;background:transparent}
  .submenu::before{display:none}
  .has-sub.open .submenu{display:block;opacity:1;pointer-events:auto;transform:none}
}

/* ============ HERO ============ */
.hero{
  position:relative;
  /* Scroll-spacer split into THREE zones by JS:
       1) animation (p ramps 0 → 1)
       2) ~30vh peak-zoom HOLD (over-scroll cushion at p=1)
       3) ~20vh fade — slow enough to feel smooth, fast enough to be done
          before the next section fills viewport.
     Marquee sits flush against .hero's bottom (no empty buffer). */
  height:250vh;
  --p:0;
  background:var(--paper);
  z-index:1;
}
.hero-pin{
  position:fixed;top:0;left:0;
  width:100%;
  height:100vh;
  height:100lvh;
  display:grid;align-items:center;
  overflow:hidden;
  /* Top padding clears the sticky site-header (≈88px) plus a little
     breathing room. The topbar is non-sticky so it scrolls away. */
  padding:140px 0 40px;
  z-index:5;
  /* Solid base so the document scrolling underneath the fixed pin
     can never bleed through during the dim's fade-in transition. */
  background:var(--paper);
  /* Opacity is driven scroll-tightly by --pin-op. NO transition —
     a transition was causing a visible "tail" of opacity continuing
     to animate down even after the user had scrolled past .hero,
     because the .12s lag means opacity is still finishing its ramp
     a frame or two after the scroll has moved on. Scroll-driven
     opacity tracks exactly without that ghost fade. */
  opacity:var(--pin-op, 1);
  will-change:opacity;
}
.hero-pin.is-hidden{
  /* No display:none here — that breaks the opacity transition when
     the pin fades back in on scroll-up. visibility:hidden applies
     INSTANTLY (no transition rule on visibility), so the pin can't
     linger at low opacity over the next section like before. */
  opacity:0 !important;
  visibility:hidden;
  pointer-events:none;
}
.hero-pin::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 90% 0%, var(--paper-2) 0%, transparent 60%),
    radial-gradient(ellipse at 0% 110%, var(--paper-3) 0%, transparent 60%);
  opacity:calc(1 - var(--p));
}
/* No z-index here on purpose — it would create a stacking context that
   traps .hole-card (z:8) below the dim (z:6). Letting the container be
   transparent in stacking order means the hole-card sits properly on
   top of the dim, so the dim only colors the area OUTSIDE the hole. */
.hero-pin .container{position:relative;width:100%}
/* Cinematic dim: dark navy base that's brighter (still dim) near the hole,
   fading to near-black in the corners — like the inside of a movie theater
   lit by a TV. Two orbiting blue glow blobs add slow movement. */
.hero-dim{
  position:absolute;inset:0;pointer-events:none;z-index:6;
  overflow:hidden;
  background:
    /* primary backdrop: warm-cool navy radial */
    radial-gradient(ellipse at 50% 55%,
      rgba(22,46,96, .92) 0%,
      rgba(10,22,52, .98) 28%,
      rgba(4,8,22, 1)    62%,
      rgba(2,3,10, 1)    100%);
  opacity:calc(var(--p) * 1.05);
  transition:none;
}
.hero-dim::before,
.hero-dim::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  mix-blend-mode:screen;
  pointer-events:none;
  will-change:transform;
}
/* upper-left orbiting blue glow */
.hero-dim::before{
  width:60vmin;height:60vmin;
  top:-18vmin;left:-18vmin;
  background:radial-gradient(circle, rgba(70,140,240,.85), rgba(70,140,240,0) 70%);
  animation:dimGlow1 14s ease-in-out infinite;
}
/* lower-right orbiting cyan-blue glow */
.hero-dim::after{
  width:70vmin;height:70vmin;
  bottom:-22vmin;right:-22vmin;
  background:radial-gradient(circle, rgba(130,200,255,.7), rgba(130,200,255,0) 70%);
  animation:dimGlow2 18s ease-in-out infinite;
}
@keyframes dimGlow1{
  0%,100%{transform:translate(0,0) scale(1);opacity:.85}
  33%   {transform:translate(14vmin, 9vmin) scale(1.12);opacity:1}
  66%   {transform:translate(7vmin, 18vmin) scale(.95);opacity:.9}
}
@keyframes dimGlow2{
  0%,100%{transform:translate(0,0) scale(1);opacity:.75}
  33%   {transform:translate(-12vmin,-10vmin) scale(1.06);opacity:.95}
  66%   {transform:translate(-18vmin, 4vmin) scale(1.15);opacity:.85}
}
.hero-cap{
  position:absolute;inset:0;display:grid;place-items:center;
  pointer-events:none;z-index:10;
  opacity:calc(max(0, var(--p) - .55) * 4);
}
.hero-cap-line{
  position:relative;
  display:inline-block;
  z-index:1;
  font-family:var(--display);
  font-size:clamp(36px,7vw,84px);
  color:var(--paper);
  letter-spacing:-.02em;
  text-shadow:0 4px 0 #0A0A0A, 0 24px 50px rgba(0,0,0,.6);
  text-align:center;
  padding:0 .25em;
  /* Default: hidden. Animation kicks in via the [data-cap="on"]
     attribute on .hero (set by JS once the hole is fully zoomed). */
  opacity:0;
}
.hero-cap-line::before{
  content:"";
  position:absolute;
  left:-.05em;right:-.05em;
  top:.08em;bottom:.08em;
  background:#e63b3b;
  border-radius:.08em;
  z-index:-1;
  transform-origin:left center;
  transform:scaleX(0);
  opacity:0;
  box-shadow:0 0 28px rgba(230,59,59,.6), 0 6px 0 rgba(120,20,20,.6);
}
/* Time-based pop animation: red line sweeps in, title fades in, holds
   ~2.5s, red line softly fades, then title fades — all detached from
   scroll velocity. Triggered by [data-cap="on"] on .hero. */
.hero[data-cap="on"] .hero-cap-line{
  animation:capTitle 1.725s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero[data-cap="on"] .hero-cap-line::before{
  animation:capLine 1.725s cubic-bezier(.2,.7,.2,1) forwards;
}
/* 2.3s total. Title visible (full opacity) ~1.3s (32% → 88%). */
@keyframes capLine{
  0%   {transform:scaleX(0);opacity:1}
  22%  {transform:scaleX(1);opacity:1}    /* line drawn (~510ms) */
  78%  {transform:scaleX(1);opacity:1}    /* hold (~1790ms) */
  90%  {transform:scaleX(1);opacity:0}    /* line softly fades (~2070ms) */
  100% {transform:scaleX(1);opacity:0}
}
@keyframes capTitle{
  0%, 16% {opacity:0;transform:translateY(14px)}
  32%     {opacity:1;transform:translateY(0)}      /* fade in (~735ms) */
  88%     {opacity:1;transform:translateY(0)}      /* hold (~2025ms) */
  100%    {opacity:0;transform:translateY(-6px)}   /* fade out after line is gone */
}
.hero-copy{
  /* Fades out as the hole grows so the dim doesn't ghost over text. */
  opacity:calc(max(0, 1 - var(--p) * 2.4));
  transform:translateY(calc(var(--p) * -20px));
  transition:none;
}
.hero-grid{display:grid;gap:28px;grid-template-columns:1fr;align-items:center}
@media (min-width:920px){.hero-grid{grid-template-columns:1.15fr .85fr;gap:48px}}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--body);font-weight:700;font-size:13px;
  background:var(--ink);color:var(--paper);
  padding:10px 18px;border-radius:var(--r-pill);
  margin-bottom:24px;
  animation:tilt 3s ease-in-out infinite;
}
.hero-badge::before{content:"●";color:var(--paper);font-size:12px;animation:pulse 1.4s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(1deg)}}

.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(64px,10vw,128px);
  line-height:.92;letter-spacing:-.01em;color:var(--ink);
  margin-bottom:26px;
}
.hero h1 .squiggle{display:inline-block;position:relative}
.hero h1 .squiggle::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:-.04em;height:.18em;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'><path d='M2 8 Q 12 2 22 8 T 42 8 T 62 8 T 82 8 T 102 8' stroke='%230A0A0A' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
}
.hero p.lede{
  font-size:18.5px;line-height:1.55;color:var(--ink-2);
  max-width:48ch;margin-bottom:30px;font-weight:500;
}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:36px}

.hero-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:560px;
}
@media (min-width:560px){.hero-stats{grid-template-columns:repeat(4,1fr)}}
.hero-stats > div{
  background:var(--paper);border:2px solid var(--ink);border-radius:var(--r-lg);
  padding:14px 14px 12px;text-align:center;
  box-shadow:0 4px 0 var(--ink);
  transition:transform .3s var(--bounce);
}
.hero-stats > div:nth-child(2){transform:rotate(.8deg)}
.hero-stats > div:nth-child(3){transform:rotate(-.6deg)}
.hero-stats > div:nth-child(4){transform:rotate(.5deg)}
.hero-stats > div:hover{transform:translateY(-3px) rotate(0deg);box-shadow:0 7px 0 var(--ink)}
.hero-stats b{display:block;font-family:var(--display);font-size:32px;color:var(--ink);line-height:1}
.hero-stats span{display:block;font-size:11px;font-weight:600;color:var(--ink-3);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}

/* hero illustration block */
.hero-art{
  position:relative;display:grid;place-items:center;
  min-height:560px;
}

/* ============================================================
   MOUSE-HOLE PORTAL — 3D cutout that pops out of the page
   ============================================================ */
.hole-card{
  position:relative;
  width:min(420px,92%);
  z-index:8;
  /* As p grows: glide to the pin's vertical center (--oy is the at-rest
     offset, computed by JS) and scale up. Cap at ~1.7 so it roughly fits
     viewport height without cropping. */
  transform:translate3d(0, calc(var(--oy, 0px) * var(--p, 0)), 0) scale(calc(1 + var(--p, 0) * .7));
  transform-origin:50% 50%;
  will-change:transform;
}
.hole-card.idle{animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-10px) rotate(.6deg)}}
.hole-frame{
  position:relative;
  aspect-ratio:5/7;
  border-radius:50% 50% 22px 22px / 38% 38% 6% 6%;
  background:#0A0A0A;
  /* 3D pop: chunky black shadow + soft ambient + subtle highlight */
  box-shadow:
    0 18px 0 -2px #0A0A0A,
    0 26px 38px -10px rgba(10,10,10,.45),
    inset 0 8px 0 rgba(255,255,255,.06),
    inset 0 -22px 30px rgba(0,0,0,.55);
  transform:translateZ(0);
  overflow:hidden;
  isolation:isolate;
}
.hole-frame::before{
  /* outer rim highlight — makes the lip catch light */
  content:'';position:absolute;inset:-3px;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,250,239,.7), rgba(255,250,239,0) 22%, rgba(0,0,0,0) 78%, rgba(255,250,239,.45));
  z-index:5;pointer-events:none;mix-blend-mode:overlay;
  border-radius:inherit;
}
.hole-frame::after{
  /* inner vignette — depth into the hole */
  content:'';position:absolute;inset:0;
  border-radius:inherit;
  background:radial-gradient(120% 80% at 50% 30%, transparent 38%, rgba(0,0,0,.55) 90%);
  z-index:3;pointer-events:none;
}
.hole-inner{
  position:absolute;inset:14px;border-radius:inherit;overflow:hidden;
  background:#000;
  z-index:1;
}
.hole-inner img,
.hole-inner picture,
.hole-inner video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.05);
}
.hole-inner picture{transform:none;z-index:2}
.hole-inner img{transform:scale(1.05);opacity:1}
.hole-inner .hole-video{
  z-index:1;background:#000;pointer-events:none;
  opacity:1; /* always fully opaque — still on top hides it until switch */
}
/* Hard switch driven by JS data-stage attribute. No partial-opacity overlap,
   so no doubled / ghosted frames at the crossover point. */
.hero[data-stage="video"] .hole-inner picture,
.hero[data-stage="video"] .hole-inner img{opacity:0}
.hero[data-stage="video"] .hole-inner .hole-video{z-index:3}
.hole-rim{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:4;pointer-events:none;
  filter:blur(.4px);
}
.hole-tag{
  position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);
  font-family:var(--marker);font-size:14px;
  background:var(--ink);color:var(--paper);
  padding:6px 14px;border-radius:var(--r-pill);
  white-space:nowrap;letter-spacing:.04em;
  box-shadow:0 4px 0 var(--ink);
  z-index:6;
}
.hole-peek{display:none}
.sticker.in-hole{position:absolute;z-index:8}
.sticker.in-hole.guarantee{
  width:150px;height:150px;font-size:19px;padding:0 14px;
  line-height:1.05;font-weight:400;
  top:-30px;right:-26px;
}
.sticker.in-hole.lakeland{
  bottom:18px;right:-30px;top:auto;
  font-size:15px;padding:8px 14px;
}

@media (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .hero-pin{position:relative;height:auto;padding:90px 0 60px}
  .hole-card{transform:none;animation:none}
  .hole-peek{animation:none}
  .hero-copy{opacity:1;transform:none}
  .hero-dim,.hero-cap{display:none}
  .hole-inner .hole-video{display:none}
}

/* ============================================================
   DESKTOP-ONLY: bigger mouse-hole portal so the FULL 1:1 desktop
   hero image fits without cropping (mobile keeps 5/7 portrait
   to match the 781x1400 mobile asset).
   Also: dark-navy aura with animated orbiting glow behind the
   tunnel, visible BEFORE scroll. Mobile is untouched.
   ============================================================ */
@media (min-width:920px){
  .hero-art{min-height:760px}
  .hole-card{width:min(680px,100%)}
  .hole-frame{aspect-ratio:1/1}
  .hole-inner img,
  .hole-inner video{transform:scale(1)}

  /* Dark, amorphous gas-cloud backdrop — dense base ellipse
     fills the area so there are no see-through gaps; small
     blobs on top add subtle texture variation only. */
  .hero-art::before{
    content:'';
    position:absolute;
    width:718px;height:705px;
    top:50%;left:50%;
    margin:-352px 0 0 -359px;
    z-index:0;
    pointer-events:none;
    background:
      /* texture variation (low alpha, subtle) */
      radial-gradient(ellipse 28% 32% at 30% 38%, rgba(2,5,15,.40)   0%, rgba(2,5,15,0)   75%),
      radial-gradient(ellipse 26% 30% at 70% 42%, rgba(5,10,28,.36)  0%, rgba(5,10,28,0)  75%),
      radial-gradient(ellipse 30% 32% at 50% 70%, rgba(10,20,48,.38) 0%, rgba(10,20,48,0) 75%),
      radial-gradient(ellipse 24% 28% at 25% 78%, rgba(6,12,32,.34)  0%, rgba(6,12,32,0)  75%),
      radial-gradient(ellipse 24% 28% at 78% 75%, rgba(8,16,42,.36)  0%, rgba(8,16,42,0)  75%),
      /* dense base — heavy taper to translucent at the edges */
      radial-gradient(ellipse 58% 62% at 50% 50%,
        rgba(2,5,15,.96)  0%,
        rgba(4,9,24,.90)  22%,
        rgba(6,12,32,.74) 45%,
        rgba(8,16,42,.46) 65%,
        rgba(8,16,42,.22) 82%,
        rgba(8,16,42,.08) 92%,
        rgba(8,16,42,0)  100%);
    filter:blur(32px);
    will-change:transform;
    animation:smokeDrift 28s ease-in-out infinite alternate;
  }
  /* Bright TV-blue glow weaving through the cloud. */
  .hero-art::after{
    content:'';
    position:absolute;
    width:380px;height:380px;
    top:50%;left:50%;
    margin:-190px 0 0 -190px;
    z-index:0;
    pointer-events:none;
    border-radius:50%;
    background:radial-gradient(circle,
      rgba(150,205,255,.95) 0%,
      rgba(90,160,250,.55) 30%,
      rgba(60,130,240,0)   65%);
    filter:blur(70px);
    mix-blend-mode:screen;
    will-change:transform;
    animation:tvGlow 13s ease-in-out infinite;
  }
}
@keyframes smokeDrift{
  0%   {transform:translate(0,0)        scale(1)    rotate(0deg)}
  100% {transform:translate(22px,-16px) scale(1.04) rotate(2deg)}
}
@keyframes tvGlow{
  0%   {transform:translate(-260px,-290px) scale(1)}
  20%  {transform:translate( 250px,-300px) scale(1.15)}
  40%  {transform:translate( 320px,-30px)  scale(.95)}
  60%  {transform:translate( 220px, 280px) scale(1.10)}
  80%  {transform:translate(-280px, 200px) scale(1.05)}
  100% {transform:translate(-260px,-290px) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .hero-art::before,
  .hero-art::after{animation:none}
}
/* Pause hero aura + idle floaty when hero is scrolled off-screen.
   The existing scroll handler toggles .is-hidden on .hero-pin —
   piggyback on it to suspend the desktop pseudo-element animations
   so they don't burn GPU/CPU while invisible. */
.hero-pin.is-hidden .hero-art::before,
.hero-pin.is-hidden .hero-art::after,
.hero-pin.is-hidden .hero-dim::before,
.hero-pin.is-hidden .hero-dim::after,
.hero-pin.is-hidden .hole-card.idle{animation-play-state:paused}

/* sticker badges */
.sticker{
  position:absolute;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--marker);
  background:var(--paper);color:var(--ink);
  border:2.5px solid var(--ink);border-radius:50%;
  text-align:center;line-height:1;
  box-shadow:0 5px 0 var(--ink);
  z-index:3;
}
.sticker.guarantee{
  width:140px;height:140px;font-size:18px;padding:0 14px;
  top:-30px;right:-10px;
  /* gentle, fixed tilt — no more constant spin */
  transform:rotate(-8deg);
}
.sticker.god{
  background:var(--ink);color:var(--paper);
  font-family:var(--marker);font-size:14px;padding:14px 18px;border-radius:var(--r-pill);
  bottom:30px;left:-20px;transform:rotate(-8deg);
  animation:wobble 4s ease-in-out infinite;
  height:auto;width:auto;
}
@keyframes wobble{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-2deg) scale(1.04)}}
.sticker.lakeland{
  background:var(--paper-2);
  font-family:var(--display);font-size:18px;padding:12px 22px;border-radius:var(--r-pill);
  top:30%;right:-18px;transform:rotate(6deg);
  height:auto;width:auto;
}

/* hero scurry rat */
.scurry{
  position:absolute;left:-220px;bottom:0;width:80px;
  z-index:5;pointer-events:none;
  animation:scurry 14s linear infinite;
}
@keyframes scurry{
  0%{transform:translateX(0) scaleX(1)}
  48%{transform:translateX(120vw) scaleX(1)}
  50%{transform:translateX(120vw) scaleX(-1)}
  98%{transform:translateX(0) scaleX(-1)}
  100%{transform:translateX(0) scaleX(1)}
}

/* ============ MARQUEE ============ */
.marquee{
  background:var(--ink);color:var(--paper);
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  overflow:hidden;padding:18px 0;
}
.marquee-track{
  display:flex;gap:32px;white-space:nowrap;
  animation:slide 28s linear infinite;
  font-family:var(--display);font-size:34px;letter-spacing:0;color:var(--paper);
}
.marquee-track > span{display:inline-flex;align-items:center;gap:32px}
.marquee-track .star{display:inline-block;width:18px;height:18px;background:var(--paper);border-radius:50%;flex-shrink:0}
@keyframes slide{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ============ SECTIONS ============ */
.section{padding:90px 0;position:relative}
.section.warm{background:var(--paper-2)}
.section.warm-er{background:var(--paper-3)}
.section.dark{background:var(--ink);color:var(--paper)}
.section.dark .kicker{color:var(--paper-3)}
.section.dark h2.section-title{color:var(--paper)}
.section.dark .section-sub{color:#dcd5c0}
.section-head{margin-bottom:48px;text-align:center}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--marker);font-size:20px;color:var(--ink);
  margin-bottom:14px;
  transform:rotate(-2deg);
}
.kicker::before,.kicker::after{content:"〰";color:var(--ink);font-weight:700;font-family:var(--body)}
h2.section-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(44px,7vw,88px);line-height:.95;letter-spacing:-.01em;color:var(--ink);
}
h2.section-title em{font-style:italic;font-weight:400}
.section-sub{font-size:18px;line-height:1.55;color:var(--ink-2);margin-top:18px;max-width:60ch;margin-inline:auto;font-weight:500}

/* curved divider */
.curve-divider{display:block;width:100%;height:60px}
.curve-divider svg{width:100%;height:100%;display:block}

/* ============ STORIES ============ */
.stories-wrap{position:relative}
.stories{
  display:flex;gap:22px;overflow-x:auto;padding:14px 4px 24px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  /* Inline-end padding leaves room for the next-card peek to be obvious. */
  scroll-padding-left:4px;
}
.stories::-webkit-scrollbar{display:none}
.story{
  /* Mobile: 78% so ~20% of the next card peeks in. */
  flex:0 0 78%;max-width:480px;scroll-snap-align:start;
  background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--r-lg);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 6px 0 var(--ink);
  transition:transform .35s var(--bounce),box-shadow .35s var(--ease);
}
@media (min-width:760px){.story{flex:0 0 calc(54% - 11px)}}
@media (min-width:1080px){.story{flex:0 0 calc(36% - 15px)}}

/* Stories nav — chunky black-ink arrows matching the site theme. */
.stories-nav{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin-top:10px;
}
.stories-arrow{
  width:54px;height:54px;flex:0 0 auto;
  background:var(--paper);color:var(--ink);
  border:2.5px solid var(--ink);border-radius:50%;
  box-shadow:0 5px 0 var(--ink);
  display:grid;place-items:center;
  cursor:pointer;
  transition:transform .18s var(--bounce),box-shadow .18s var(--ease),background .18s var(--ease);
}
.stories-arrow:hover{
  background:var(--ink);color:var(--paper);
  transform:translateY(-2px);box-shadow:0 7px 0 var(--ink);
}
.stories-arrow:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.stories-arrow:disabled{opacity:.35;cursor:default;transform:none;box-shadow:0 5px 0 var(--ink);background:var(--paper);color:var(--ink)}
.stories-arrow svg{width:22px;height:22px;display:block}
.stories-hint{
  font-family:var(--marker);font-size:15px;color:var(--ink-3);
  letter-spacing:.04em;transform:rotate(-1.5deg);
}
.story:nth-child(odd){transform:rotate(-.6deg)}
.story:nth-child(even){transform:rotate(.5deg)}
.story:hover{transform:translate(-3px,-5px) rotate(0);box-shadow:0 11px 0 var(--ink)}
.story .ph{aspect-ratio:5/4;background:#222 center/cover no-repeat;border-bottom:2.5px solid var(--ink)}
.story .meta{padding:18px 22px}
.story .num{font-family:var(--marker);font-size:16px;color:var(--ink-3);transform:rotate(-1deg);display:inline-block;margin-bottom:4px}
.story h3{font-family:var(--display);font-size:28px;line-height:1;color:var(--ink)}
.story .where{font-size:13px;font-weight:600;color:var(--ink-3);margin-top:6px;display:flex;align-items:center;gap:8px}
.story .where::before{content:"📍"}

/* ============ FIELD GUIDE — flip cards ============ */
.guide-grid{
  display:grid;gap:22px;margin-top:30px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.guide-card{
  perspective:1200px;cursor:pointer;outline:none;height:380px;
}
.guide-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .8s var(--bounce);
}
.guide-card.flipped .guide-inner{transform:rotateY(180deg)}
.guide-front,.guide-back{
  position:absolute;inset:0;backface-visibility:hidden;
  border:2.5px solid var(--ink);border-radius:var(--r-lg);
  padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  box-shadow:0 6px 0 var(--ink);
}
.guide-front{background:var(--paper);text-align:center;gap:8px}
.guide-front .num{font-family:var(--marker);font-size:14px;color:var(--ink-3);transform:rotate(-3deg)}
.guide-front .silhouette{flex:1;width:100%;max-height:180px;object-fit:cover;border-radius:var(--r-card,12px);transition:transform .4s var(--bounce)}
.guide-card:hover .silhouette{transform:scale(1.08) rotate(-3deg)}
.guide-front h3{font-family:var(--display);font-size:28px;color:var(--ink);line-height:1}
.guide-front .sci{font-family:var(--body);font-style:italic;font-size:13px;color:var(--ink-3);margin-top:2px}
.guide-front .flip{font-family:var(--marker);font-size:14px;color:var(--ink);background:var(--paper-2);padding:6px 14px;border-radius:var(--r-pill);border:2px solid var(--ink);margin-top:8px}
.guide-back{transform:rotateY(180deg);background:var(--ink);color:var(--paper);align-items:flex-start;text-align:left}
.guide-back .row{display:flex;justify-content:space-between;width:100%;font-size:12px;color:#dcd5c0;border-bottom:1px solid rgba(255,250,239,.18);padding:6px 0}
.guide-back .row b{color:var(--paper);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.guide-back h4{font-family:var(--display);font-size:20px;color:var(--paper);margin:14px 0 4px}
.guide-back p{font-size:13.5px;line-height:1.5;color:#e8e1c8}
.guide-back .flip{font-family:var(--marker);font-size:14px;color:var(--paper);background:transparent;border:2px solid var(--paper);padding:6px 14px;border-radius:var(--r-pill);align-self:flex-end;margin-top:8px}

/* ============ ANATOMY ============ */
.anatomy{margin-top:30px;display:grid;gap:24px;grid-template-columns:1fr;align-items:start}
@media (min-width:960px){.anatomy{grid-template-columns:1.3fr .7fr;gap:30px}}
.anatomy-frame{
  position:relative;border:2.5px solid var(--ink);border-radius:var(--r-lg);
  background:var(--paper);overflow:hidden;
  box-shadow:0 8px 0 var(--ink);
}
.anatomy-frame svg{display:block;width:100%;height:auto}
/* transform-box+origin keep scale anchored to the dot's center —
   without these, scaling a <g> in SVG warps from the SVG origin and
   the dot appears to teleport across the diagram on click. */
.anatomy-hot{
  cursor:pointer;
  transition:transform .25s var(--bounce);
  transform-box:fill-box;
  transform-origin:center;
  outline:none;
}
.anatomy-hot:focus{outline:none}
.anatomy-hot:focus-visible{outline:2px dashed var(--ink);outline-offset:4px;border-radius:4px}
.anatomy-hot:hover{transform:scale(1.12)}
.anatomy-hot.active{transform:scale(1.08)}
.anatomy-hot circle:nth-of-type(2){
  /* Slightly translucent so the feature underneath is still visible
     at rest (user sees the vent / pipe / weep holes through the dot). */
  fill:rgba(255,250,239,.85);
  stroke:var(--ink);stroke-width:3.5;
  transition:fill .3s var(--ease);
}
.anatomy-hot.active circle:nth-of-type(2){fill:var(--ink)}
/* The plus sign lines */
.anatomy-hot line{
  stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;
  transition:stroke .3s var(--ease);
}
.anatomy-hot.active line{stroke:var(--paper)}
.anatomy-pulse{
  fill:none;stroke:var(--ink);stroke-width:2;
  transform-origin:center;transform-box:fill-box;
  animation:hotpulse 2s ease-out infinite;
  pointer-events:none;
}
@keyframes hotpulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
.anatomy-info{
  position:relative;
  background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--r-lg);
  padding:26px 26px 22px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 8px 0 var(--ink);min-height:300px;
}
.anatomy-info .point-hint{
  position:absolute;top:-22px;right:18px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  pointer-events:none;
  opacity:1;transition:opacity .5s ease, transform .5s ease;
  animation:pointHintBounce 1.6s ease-in-out infinite;
  will-change:transform,opacity;
}
.anatomy-info .point-hint-emoji{
  font-size:36px;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  filter:drop-shadow(0 2px 0 var(--paper-2));
}
.anatomy-info .point-hint-label{
  font-family:var(--marker);font-size:13px;color:var(--ink);
  background:var(--paper);border:2px solid var(--ink);border-radius:var(--r-pill);
  padding:2px 8px;transform:rotate(-3deg);white-space:nowrap;
}
.anatomy-info.point-hint-dismissed .point-hint{
  opacity:0;transform:translateY(-6px) scale(.92);
  animation:none;pointer-events:none;
}

/* ============================================================
   DESKTOP-ONLY: anatomy section is 2-col (house diagram on left,
   info card on right). Reposition pointing-finger to the left
   edge of the card and rotate it so it points LEFT toward the
   house diagram. Bounce becomes horizontal.
   ============================================================ */
@keyframes pointHintBounceX{
  0%,100%{transform:translate(-100%,-50%)}
  50%    {transform:translate(calc(-100% - 8px),-50%)}
}
@media (min-width:960px){
  .anatomy-info .point-hint{
    top:50%;right:auto;left:-8px;
    flex-direction:row;align-items:center;gap:6px;
    transform:translate(-100%,-50%);
    animation:pointHintBounceX 1.6s ease-in-out infinite;
  }
  .anatomy-info .point-hint-emoji{transform:rotate(-90deg)}
  .anatomy-info.point-hint-dismissed .point-hint{
    transform:translate(calc(-100% + 6px),-50%) scale(.92);
    animation:none;
  }
}
@keyframes pointHintBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@media (prefers-reduced-motion:reduce){
  .anatomy-info .point-hint{animation:none}
}
.anatomy-info .stamp{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--body);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.12em;
  background:var(--ink);color:var(--paper);padding:6px 14px;border-radius:var(--r-pill);
}
.anatomy-info h3{font-family:var(--display);font-size:32px;line-height:1;color:var(--ink);transition:opacity .25s}
.anatomy-info p{font-size:15px;line-height:1.55;color:var(--ink-2);transition:opacity .25s}
.anatomy-info .method{font-size:13px;line-height:1.5;color:var(--ink);background:var(--paper-2);padding:14px 16px;border:2px solid var(--ink);border-radius:var(--r);transition:opacity .25s}
.anatomy-info .method b{display:block;font-family:var(--marker);font-size:14px;margin-bottom:6px;transform:rotate(-1deg)}
.anatomy-info .hint{margin-top:auto;font-family:var(--marker);color:var(--ink-3);font-size:16px;align-self:flex-end;transform:rotate(-2deg)}

/* ============ BEFORE / AFTER ============ */
.ba-wrap{margin:30px auto 0;max-width:980px}
.ba{
  position:relative;border:3px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;
  user-select:none;cursor:ew-resize;aspect-ratio:16/10;background:var(--ink);
  box-shadow:0 10px 0 var(--ink);
}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after-wrap{position:absolute;inset:0;width:50%;overflow:hidden}
.ba .after-wrap img{width:200%}
.ba .handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--paper);box-shadow:0 0 0 1px var(--ink)}
.ba .knob{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;background:var(--paper);
  border:3px solid var(--ink);display:grid;place-items:center;
  color:var(--ink);box-shadow:0 6px 0 var(--ink);
  transition:transform .25s var(--bounce);
}
.ba .knob:hover{transform:translate(-50%,-52%) scale(1.05)}
.ba .knob svg{width:24px;height:24px}
.ba .tag{
  position:absolute;top:14px;font-family:var(--display);font-size:18px;
  background:var(--paper);color:var(--ink);padding:4px 14px;border:2px solid var(--ink);border-radius:var(--r-pill);
  box-shadow:0 3px 0 var(--ink);
}
.ba .tag.b{left:14px;transform:rotate(-3deg)}
.ba .tag.a{right:14px;background:var(--ink);color:var(--paper);transform:rotate(3deg)}
.ba-cap{margin-top:20px;display:grid;grid-template-columns:1fr;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
@media (min-width:600px){.ba-cap{grid-template-columns:1fr auto 1fr;gap:18px;text-align:center}.ba-cap > :first-child{text-align:left}.ba-cap > :last-child{text-align:right}}
.ba-cap em{font-family:var(--marker);font-size:22px;color:var(--ink);font-style:normal;transform:rotate(-2deg);display:inline-block}

/* ============ SOUND TEST ============ */
.sounds{
  display:grid;gap:14px;margin:30px auto 0;max-width:1100px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.sound-btn{
  display:flex;align-items:center;gap:14px;
  padding:20px 22px;background:var(--paper);text-align:left;
  border:2.5px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:0 5px 0 var(--ink);
  transition:transform .25s var(--bounce),background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);
}
.sound-btn:hover{transform:translate(-2px,-3px) rotate(-1deg);box-shadow:0 8px 0 var(--ink)}
.sound-btn.active{background:var(--ink);color:var(--paper);transform:translate(-2px,-3px) rotate(-1deg);box-shadow:0 8px 0 var(--paper-3),0 8px 0 5px var(--ink)}
.sound-btn .wave{flex:0 0 60px;height:36px;display:flex;align-items:center;gap:3px;justify-content:center}
.sound-btn .wave i{display:block;width:4px;height:10px;background:var(--ink);border-radius:2px;transition:height .15s ease}
.sound-btn.active .wave i{background:var(--paper);animation:wave .8s ease-in-out infinite}
.sound-btn.active .wave i:nth-child(2){animation-delay:.08s}
.sound-btn.active .wave i:nth-child(3){animation-delay:.16s}
.sound-btn.active .wave i:nth-child(4){animation-delay:.24s}
.sound-btn.active .wave i:nth-child(5){animation-delay:.32s}
@keyframes wave{0%,100%{height:7px}50%{height:30px}}
.sound-btn .label{display:flex;flex-direction:column;gap:2px}
.sound-btn .label b{font-family:var(--display);font-size:20px;line-height:1;color:inherit}
.sound-btn .label span{font-size:12px;font-weight:600;color:var(--ink-3)}
.sound-btn.active .label span{color:#dcd5c0}
.sound-verdict{
  margin:26px auto 0;max-width:1100px;padding:22px 26px;
  background:var(--paper);border:2.5px dashed var(--ink);border-radius:var(--r-lg);
  font-family:var(--display);font-size:clamp(22px,3vw,30px);line-height:1.05;color:var(--ink);
  display:none;text-align:center;
}
.sound-verdict.show{display:block;animation:popin .5s var(--bounce)}
.sound-verdict span{display:block;font-family:var(--body);font-size:14px;font-weight:600;color:var(--ink-2);margin-top:8px}
@keyframes popin{0%{transform:scale(.9) rotate(-2deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}

/* ============ ANATOMY MICRO-ANIMATION — CAGE & CHEESE ============ */
.anim-row{
  position:relative;
  max-width:420px;margin:18px auto 32px;
  height:96px;
  pointer-events:none;
  --rat-shift:-310px;  /* how far the rat travels into the cage */
}
.anim-row .floor{
  position:absolute;left:14px;right:14px;bottom:10px;height:3px;background:var(--ink);border-radius:2px;
}
.anim-row .cage{
  position:absolute;left:14px;bottom:14px;width:300px;height:auto;
  filter:drop-shadow(0 4px 0 rgba(10,10,10,.14));
}
/* Door swings down from open (90deg, lying right) to closed (0deg, vertical) */
.anim-row .cage-door{
  transform-origin:312px 6px;
  transform:rotate(90deg);
  transition:transform .3s cubic-bezier(.6,-.4,.4,1.6);
}
.anim-row.caught .cage-door{transform:rotate(0deg)}
/* Glowing yellow cheese — pulses softly */
.anim-row .cheese{
  filter:drop-shadow(0 0 4px #FFD93D) drop-shadow(0 0 12px rgba(255,217,61,.55));
  animation:cheeseGlow 1.6s ease-in-out infinite;
  transform-box:fill-box;transform-origin:center;
}
@keyframes cheeseGlow{
  0%,100% {filter:drop-shadow(0 0 3px #FFD93D) drop-shadow(0 0 9px rgba(255,217,61,.5))}
  50%     {filter:drop-shadow(0 0 7px #FFD93D) drop-shadow(0 0 22px rgba(255,217,61,.85))}
}
/* Rat: starts off the right edge, runs into the cage, gets stuck */
.anim-row .rat{
  position:absolute;right:-86px;bottom:18px;width:72px;
  will-change:transform;
}
.anim-row.go .rat{
  animation:ratIntoCage 1.7s cubic-bezier(.45,.05,.55,.95) forwards;
}
@keyframes ratIntoCage{
  0%   {transform:translateX(0)}
  100% {transform:translateX(var(--rat-shift))}
}
.anim-row.caught .rat{
  animation:ratStuck .35s cubic-bezier(.45,.05,.55,.95) forwards;
}
@keyframes ratStuck{
  0%   {transform:translateX(var(--rat-shift)) translateY(0)}
  50%  {transform:translateX(var(--rat-shift)) translateY(-3px) rotate(-3deg)}
  100% {transform:translateX(var(--rat-shift)) translateY(0) rotate(0)}
}
.anim-row .badge{
  position:absolute;right:30px;top:0;
  font-family:var(--marker);font-size:18px;color:var(--ink);
  background:var(--paper);padding:6px 16px;
  border:2.5px solid var(--ink);border-radius:var(--r-pill);
  box-shadow:0 4px 0 var(--ink);
  opacity:0;transform:translateY(10px) rotate(-3deg) scale(.85);
  transition:opacity .35s var(--ease),transform .45s var(--bounce);
  white-space:nowrap;
}
.anim-row.caught .badge{opacity:1;transform:translateY(0) rotate(-3deg) scale(1)}
.anim-row .badge::before{content:"✓ ";color:var(--ink);font-weight:700}
.anim-row .replay{
  position:absolute;left:6px;top:6px;
  font-family:var(--marker);font-size:13px;color:var(--ink-3);
  pointer-events:auto;cursor:pointer;
  background:transparent;padding:6px 10px;border-radius:var(--r-pill);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.anim-row .replay:hover{background:var(--ink);color:var(--paper)}
.anim-row .replay::before{content:"↺ "}

/* ============ REVIEWS — speech-bubble cards ============ */
.review-grid{
  display:grid;gap:24px;margin-top:30px;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
.review{
  position:relative;background:var(--paper);
  border:2.5px solid var(--ink);border-radius:var(--r-lg);
  padding:26px 24px 20px;
  box-shadow:0 6px 0 var(--ink);
  transition:transform .35s var(--bounce),box-shadow .35s var(--ease);
}
.review:nth-child(3n+1){transform:rotate(-.7deg)}
.review:nth-child(3n+2){transform:rotate(.5deg)}
.review:nth-child(3n){transform:rotate(.3deg)}
.review:hover{transform:translate(-3px,-4px) rotate(0);box-shadow:0 10px 0 var(--ink)}
.review::after{
  content:"";position:absolute;left:36px;bottom:-22px;
  width:0;height:0;border:11px solid transparent;border-top-color:var(--ink);
}
.review::before{
  content:"";position:absolute;left:38px;bottom:-17px;
  width:0;height:0;border:9px solid transparent;border-top-color:var(--paper);z-index:1;
}
.review .stars{font-size:18px;color:var(--ink);letter-spacing:2px;margin-bottom:10px}
.review .stars span{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.12em;color:var(--ink-3);margin-left:8px;text-transform:uppercase}
.review p{font-size:15.5px;line-height:1.55;color:var(--ink);margin-bottom:18px}
.review .by{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1.5px dashed var(--rule)}
.review .av{
  width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-family:var(--display);font-size:16px;
}
.review .who{display:flex;flex-direction:column;gap:1px}
.review .who b{font-family:var(--display);font-size:17px;color:var(--ink);line-height:1}
.review .who span{font-size:11.5px;font-weight:600;color:var(--ink-3);letter-spacing:.04em}

/* ============ MAP ============ */
.map-grid{display:grid;gap:24px;grid-template-columns:1fr;margin-top:30px;align-items:start}
@media (min-width:960px){.map-grid{grid-template-columns:1.3fr .7fr;gap:30px}}
.map-frame{
  position:relative;border:2.5px solid var(--ink);border-radius:var(--r-lg);
  background:var(--paper);overflow:hidden;aspect-ratio:4/3;
  box-shadow:0 8px 0 var(--ink);
}
.map-frame .map{position:absolute;inset:0;background:url('assets/service-area.webp') center/contain no-repeat var(--paper);filter:contrast(1.05) brightness(.95)}
.map-frame .corner-tag{
  position:absolute;top:16px;left:16px;
  font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:var(--r-pill);
}
.map-frame .corner-stat{
  position:absolute;top:16px;right:16px;
  font-family:var(--display);font-size:14px;
  background:var(--paper);color:var(--ink);padding:8px 14px;border-radius:var(--r-pill);border:2px solid var(--ink);
}
.map-frame .hq-pin{
  /* Lakeland sits east of Tampa along I-4, ~1/3 of the way to Orlando.
     The DOT (not the whole pin) needs to land at Lakeland's coordinates.
     Translating by -9px (half the 18px dot width) and -50% Y centers
     the dot at left:47%/top:57%, with the label extending to the right. */
  position:absolute;left:47%;top:57%;
  transform:translate(-9px,-50%);
  display:flex;align-items:center;gap:10px;z-index:2;
  pointer-events:none;
}
.map-frame .hq-dot{
  position:relative;width:18px;height:18px;border-radius:50%;background:var(--ink);
  border:3px solid var(--paper);
  box-shadow:0 0 0 0 rgba(10,10,10,.45);
  animation:ping 2.2s ease-out infinite;
  flex-shrink:0;
}
.map-frame .hq-label{
  font-family:var(--display);font-size:15px;color:var(--ink);
  background:var(--paper);padding:6px 12px;border-radius:var(--r-pill);
  border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);
  white-space:nowrap;
}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(10,10,10,.55)}100%{box-shadow:0 0 0 18px rgba(10,10,10,0)}}
.map-info{padding:0;display:flex;flex-direction:column;gap:18px}
.map-info h3{font-family:var(--display);font-size:30px;line-height:1;color:var(--ink)}
.cities-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
  list-style:none;
}
.cities-list li{
  font-size:13.5px;font-weight:600;color:var(--ink);padding:10px 14px;
  background:var(--paper);border:2px solid var(--ink);border-radius:var(--r-pill);
  transition:transform .25s var(--bounce),background .25s var(--ease),color .25s var(--ease);
}
.cities-list li:hover{transform:translateY(-2px) rotate(-1deg);background:var(--ink);color:var(--paper)}
.cities-list li::before{content:"📍 "}
.counties{
  margin-top:8px;padding:16px 18px;border:2.5px dashed var(--ink);border-radius:var(--r-lg);
  background:var(--paper-2);
  font-size:13px;line-height:1.55;color:var(--ink);
}
.counties b{display:block;font-family:var(--display);font-size:18px;margin-bottom:6px}

/* ============ FAQ ============ */
.faq{max-width:880px;margin:32px auto 0;display:flex;flex-direction:column;gap:14px}
.faq details{
  background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--r-lg);
  padding:0;overflow:hidden;
  box-shadow:0 5px 0 var(--ink);
  transition:box-shadow .3s var(--ease),transform .3s var(--bounce);
}
.faq details:nth-child(odd){transform:rotate(-.4deg)}
.faq details:nth-child(even){transform:rotate(.4deg)}
.faq details:hover{transform:translateY(-2px) rotate(0)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:18px;
  font-family:var(--display);font-size:22px;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--display);font-size:32px;color:var(--ink);
  width:36px;height:36px;border:2.5px solid var(--ink);border-radius:50%;
  display:grid;place-items:center;line-height:1;flex-shrink:0;
  transition:transform .3s var(--bounce);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 24px 22px;color:var(--ink-2);font-size:15px;line-height:1.6}

/* ============ FORM ============ */
.section.form-sec{background:var(--paper-2)}
.form-grid{display:grid;gap:32px;grid-template-columns:1fr;align-items:start;margin-top:24px}
@media (min-width:960px){.form-grid{grid-template-columns:.85fr 1.15fr;gap:42px}}
.form-grid.form-grid-solo{grid-template-columns:1fr;max-width:680px;margin-left:auto;margin-right:auto;margin-top:0}
@media (min-width:960px){.form-grid.form-grid-solo{grid-template-columns:1fr}}
.form-meta h3{font-family:var(--display);font-size:36px;line-height:.98;color:var(--ink);margin-bottom:14px}
.form-meta p{color:var(--ink-2);font-size:16px;margin-bottom:24px;max-width:42ch;line-height:1.55}
.form-meta ul{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:15px;font-weight:600}
.form-meta ul li{display:flex;align-items:center;gap:10px}
.form-meta a{border-bottom:2px solid var(--ink)}
.form{
  background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--r-lg);
  padding:32px 30px;
  box-shadow:0 10px 0 var(--ink);
}
.form .stamp{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--marker);font-size:16px;color:var(--ink);
  background:var(--paper-2);padding:6px 14px;border:2px solid var(--ink);border-radius:var(--r-pill);
  margin-bottom:18px;transform:rotate(-2deg);
}
.form h3{font-family:var(--display);font-size:30px;color:var(--ink);margin-bottom:6px;line-height:1.05}
.form-sub{font-size:14px;color:var(--ink-3);margin-bottom:22px}
.field-row{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px}
@media (min-width:560px){.field-row{grid-template-columns:1fr 1fr}}
.form label{display:block;font-family:var(--body);font-weight:700;font-size:13px;color:var(--ink);margin-bottom:6px}
.form input,.form textarea,.form select{
  width:100%;font:inherit;color:var(--ink);background:var(--paper);
  border:2px solid var(--ink);padding:14px 16px;font-size:15px;border-radius:var(--r);
  transition:transform .25s var(--bounce),box-shadow .25s var(--ease);
}
.form input:focus,.form textarea:focus{outline:none;transform:translateY(-1px);box-shadow:0 4px 0 var(--ink)}
.form textarea{min-height:110px;resize:vertical;font-family:var(--body)}
.form-submit{
  width:100%;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-weight:700;font-size:16px;
  padding:18px;border:2.5px solid var(--ink);border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;gap:12px;
  transition:transform .25s var(--bounce),background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);
  box-shadow:0 5px 0 var(--paper-3),0 5px 0 4px var(--ink);
  margin-top:8px;
}
.form-submit:hover{transform:translate(-2px,-3px) rotate(-1deg);box-shadow:0 8px 0 var(--paper-3),0 8px 0 4px var(--ink)}
.form .fine{font-size:12px;color:var(--ink-3);margin-top:12px;text-align:center}

/* ============ FOOTER ============ */
.foot{
  background:var(--ink);color:#dcd5c0;
  padding:60px 0 30px;
  position:relative;overflow:hidden;
}
.foot-mark{
  font-family:var(--display);font-weight:400;font-size:clamp(64px,14vw,180px);
  line-height:.85;color:var(--paper);
  margin-bottom:36px;letter-spacing:-.02em;
  text-align:center;
}
.foot-mark em{font-style:italic;font-weight:400;color:var(--paper-3)}
.foot-grid{display:grid;gap:30px;grid-template-columns:1fr;margin-bottom:30px}
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}}
.foot-brand img{height:60px;width:auto;margin-bottom:16px;background:var(--paper);padding:8px 12px;border-radius:10px;box-sizing:content-box}
.foot-brand p{font-size:14px;color:#bdb6a8;max-width:36ch;line-height:1.55}
.foot h4{font-family:var(--display);font-size:18px;color:var(--paper);margin-bottom:14px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.foot a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:24px;border-top:1px solid rgba(255,250,239,.14);font-size:11px;color:#8c857a;text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.foot-credit{margin-top:18px;text-align:center;font-size:11px;color:#6f6a60;text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.foot-credit a{color:inherit;border-bottom:1px solid rgba(255,250,239,.18);padding-bottom:1px;transition:color .2s ease,border-color .2s ease}
.foot-credit a:hover{color:var(--paper);border-bottom-color:var(--paper);text-decoration:none}
.foot-scurry{position:absolute;bottom:6px;left:-200px;width:60px;animation:scurry 18s linear infinite;animation-delay:2s;opacity:.55}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(28px) scale(.98);transition:opacity .7s var(--ease),transform .7s var(--bounce)}
.reveal.in{opacity:1;transform:translateY(0) scale(1)}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* perf */
.section.warm,.section.warm-er,.foot,.experiment{content-visibility:auto;contain-intrinsic-size:auto 800px}
.scurry,.foot-scurry,.exp-rat,.mascot-wrap{transform:translateZ(0);backface-visibility:hidden}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .scurry,.foot-scurry{display:none}
}

/* ============================================================
   MOBILE-SPECIFIC OVERRIDES (designed apart from desktop)
   ============================================================ */
@media (max-width:760px){
  .section{padding:60px 0}
  .section-head{margin-bottom:34px}
  h2.section-title{font-size:clamp(36px,9vw,56px)}
  .section-sub{font-size:15.5px}
  .kicker{font-size:18px}

  /* Hero — mobile: tight natural stack. Copy on top, hole right below
     it (no gap), most of the hole visible at rest. As --p grows the
     copy fades out and the hole zooms in place + glides to viewport
     center via --oy. */
  /* Topbar hidden on mobile so the pin can sit tight under the
     header — no swelling padding or empty cream stripe. */
  .topbar{display:none}
  .hero{height:190vh}
  .hero-pin{padding:100px 0 0;display:grid;align-items:start}
  /* gap clears the hole's floaty animation (translateY -10px at apex)
     so it can't overlap the CTAs on its way up. */
  .hero-grid{grid-template-columns:1fr;gap:18px;align-items:start}
  .hero-copy{padding:0}
  .hero h1{font-size:clamp(38px,9.5vw,56px);margin-bottom:10px;line-height:.96}
  .hero-badge{font-size:11px;padding:6px 12px;margin-bottom:10px}
  .hero p.lede{font-size:13.5px;line-height:1.45;margin-bottom:12px;max-width:36ch}
  .cta-row{gap:8px;flex-wrap:wrap;margin-bottom:0}
  .cta-row .btn{padding:9px 14px;font-size:13px}
  .hero-art{
    margin:0;padding:0;min-height:0;overflow:visible;
    display:grid;place-items:start center;
  }
  .hero h1{font-size:clamp(54px,13vw,80px);margin-bottom:18px}
  .hero p.lede{font-size:16.5px;margin-bottom:22px}
  .hero-badge{font-size:11.5px;padding:8px 14px;margin-bottom:18px}

  /* Mobile portrait portal: tighter, glides to center, single sticker */
  .hole-card{
    width:min(260px,72%);margin:0;
    transform:translate3d(0, calc(var(--oy, 0px) * var(--p, 0)), 0) scale(calc(1 + var(--p, 0) * .9));
  }
  .hole-tag{font-size:12px;bottom:-20px}
  .hole-peek{width:54px;left:-10px;bottom:46px}
  .sticker.in-hole.guarantee{display:flex;width:108px;height:108px;font-size:15px;line-height:1.05;top:-18px;right:-12px;padding:0 10px}
  .sticker.in-hole.lakeland{display:none}

  /* Hero stats hidden on mobile to keep the copy block compact and
     reveal more of the hole at rest. */
  .hero-stats{display:none}

  /* Marquee a touch smaller on mobile */
  .marquee-track{font-size:24px;gap:22px}
  .marquee-track > span{gap:22px}
  .marquee-track .star{width:12px;height:12px}

  /* Mobile stories: smaller cards so the next card visibly peeks (~22%) */
  .story{flex:0 0 76%}
  .stories-arrow{width:48px;height:48px;box-shadow:0 4px 0 var(--ink)}
  .stories-arrow svg{width:20px;height:20px}
  .stories-hint{font-size:13px}

  /* Field guide: 1 column at smallest, 2 at 480+ */
  .guide-grid{grid-template-columns:1fr;gap:16px}
  .guide-card{height:340px}

  /* Anatomy stacks tightly */
  .anatomy{gap:18px}
  .anatomy-info{padding:22px 22px 18px;min-height:0}
  .anatomy-info h3{font-size:26px}

  /* Sound test: full-width single column */
  .sounds{grid-template-columns:1fr;gap:10px;margin-top:22px}
  .sound-btn{padding:16px 18px}

  /* Reviews: single col stack */
  .review-grid{grid-template-columns:1fr;gap:18px}

  /* Map info readability */
  .map-info h3{font-size:24px}
  .cities-list{grid-template-columns:1fr 1fr;gap:6px}
  .cities-list li{font-size:12.5px;padding:9px 12px}
  .map-frame .hq-label{font-size:13px;padding:5px 10px}
  .map-frame .corner-tag,.map-frame .corner-stat{font-size:10px;padding:6px 10px}

  /* FAQ: lighter rotations so they don't overlap */
  .faq details{transform:none !important}
  .faq summary{padding:18px 18px;font-size:18px;gap:14px}
  .faq summary::after{width:30px;height:30px;font-size:24px}
  .faq .a{padding:0 18px 18px;font-size:14.5px}

  /* Form: single column tight */
  .form{padding:24px 22px}
  .form h3{font-size:24px}
  .form-meta h3{font-size:30px}

  /* Footer: smaller masthead so it doesn't dominate */
  .foot-mark{font-size:clamp(48px,14vw,90px);margin-bottom:26px}
  .foot{padding:48px 0 26px}

  /* Anatomy micro-anim shrinks a touch */
  .anim-row{height:80px;margin:12px auto 22px;max-width:340px;--rat-shift:-258px}
  .anim-row .rat{width:58px;right:-72px;bottom:14px}
  .anim-row .cage{width:248px;left:8px;bottom:10px}
  .anim-row .badge{font-size:14px;padding:5px 12px;right:18px}
}

/* Tablet refinement */
@media (min-width:761px) and (max-width:1080px){
  .sticker.guarantee{width:118px;height:118px;font-size:15px;top:-22px;right:-2px}
  .sticker.god,.sticker.lakeland{font-size:13px;padding:10px 16px}
}

/* Desktop-only — extra polish on big screens */
@media (min-width:1200px){
  .hero{padding-top:90px}
  .mascot-wrap{width:min(480px,95%)}
}