/* © Copyright 2026 - All Rights Reserved - Canadian Data Solutions */
:root {
  --rev: ehbpeefkcd5kwi9s0ed0vgoyst72a21e8rm674hy;
  --green-950: #0b2318;
  --green-900: #12301f;
  --green-800: #1a452d;
  --green-700: #1f5f3f;
  --green-600: #2d7a4e;
  --green-500: #3f9a5a;
  --leaf: #8fd14f;
  --lime: #c5f24b;
  --amber: #f5a623;
  --amber-700: #c97d12;
  --teal: #2bb3a3;
  --cream: #fbf6ea;
  --paper: #fffdf7;
  --sand: #f3ecd9;
  --ink: #16301f;
  --ink-soft: #3e5a49;
  --line: #e2dccb;
  --bg: var(--paper);
  --bg-alt: var(--sand);
  --card: #ffffff;
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --accent: var(--green-700);
  --accent-ink: #ffffff;
  --hero-ink: var(--cream);
  --shadow: 0 10px 30px rgba(22, 48, 31, 0.10);
  --radius: 22px;
  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1480px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="dusk"] {
  --bg: #0f2620;
  --bg-alt: #13302a;
  --card: #163a31;
  --text: #f1f5ea;
  --text-soft: #b9cbbd;
  --line: #244a3f;
  --accent: var(--leaf);
  --accent-ink: #0f2620;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: clamp(16px, 1.05vw, 20px); line-height: 1.6;
  transition: background .6s, color .6s;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(36px, 3.3vw, 96px); white-space: nowrap; }
h2 { font-size: clamp(34px, 3.6vw, 72px); }
h3 { font-size: clamp(22px, 1.5vw, 30px); }
p { margin: 0; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.eyebrow { font-size: clamp(11px, .75vw, 14px); letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: var(--accent); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.lead { font-size: clamp(17px, 1.2vw, 22px); color: var(--text-soft); max-width: 62ch; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--lime); color: var(--ink); padding: 10px 16px; border-radius: 10px; z-index: 100; }
.skip:focus { left: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; line-height: 1.1; text-align: center; border-radius: 999px; font-weight: 800; font-family: var(--font-body); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s; font-size: 16px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.btn-primary { background: var(--lime); color: var(--ink); }
.btn-primary:hover { background: #0b6a2c; color: #fff; }   /* the logo's dark green, white text (Matthew, Oct 5) */
.btn-ghost { background: transparent; color: var(--hero-ink); border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.14); }
.btn-solid { background: var(--accent); color: var(--accent-ink); }
.btn-solid:hover { filter: brightness(1.08); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--line); }
.btn-outline:hover { border-color: var(--accent); }

/* ------------------------------ header ------------------------------ */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .35s, box-shadow .35s, backdrop-filter .35s; color: var(--cream); }
.site-header.is-solid { background: var(--bg); box-shadow: 0 1px 0 var(--line); color: var(--text); }
/* the bar is as tall as the logo plus a little air, so the logo is never clipped; everything else centres on the logo */
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 100px; padding: 8px 0; gap: 16px; }
.nav-logo-link { display: flex; align-items: center; justify-content: center; }
.nav-side { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 30px); font-weight: 800; font-size: 15px; }
.nav-side.left { justify-content: flex-end; }
.nav-side.right { justify-content: flex-start; }
.nav-side a { text-decoration: none; padding: 8px 2px; position: relative; white-space: nowrap; }
.nav-side a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px; border-radius: 2px; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav-side a:hover::after { transform: scaleX(1); }
.nav-side a.btn::after { display: none; }   /* no hover line under the Explore The Shop button */
.nav-side a.btn { padding: 0 28px; }         /* the nav link padding (8px 2px) was winning over .btn, so the text sat near the edge (Matthew, Oct 5) */
/* Explore The Shop in the nav wears the same outlined pill as the Day/Dusk toggle beside it (Matthew, Oct 6, build 10):
   translucent white fill, light border, inherited text colour; it hovers to the logo's dark green with white text. */
.nav-cta { min-height: 42px; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.12); color: inherit; font-size: 14px; }
.nav-cta:hover { background: #0b6a2c; border-color: #0b6a2c; color: #fff; }
.site-header.is-solid .nav-cta { border-color: var(--line); background: transparent; }
.site-header.is-solid .nav-cta:hover { background: #0b6a2c; border-color: #0b6a2c; color: #fff; }
.nav-logo, .footer-logo { height: auto; }
.nav-logo { display: block; width: clamp(150px, 12vw, 230px); margin-inline: 24px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); transition: filter .4s; }
.site-header.is-solid .nav-logo { filter: drop-shadow(0 4px 10px rgba(0,0,0,.12)); }
:root[data-theme="dusk"] .nav-logo, :root[data-theme="dusk"] .footer-logo { filter: drop-shadow(0 0 18px rgba(197,242,75,.35)) drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.nav-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav-side.right .nav-tools { margin-left: clamp(10px, 2vw, 30px); }
.theme-toggle { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 8px; border-radius: 999px; border: 2px solid rgba(255,255,255,.45); background: rgba(255,255,255,.12); color: inherit; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.site-header.is-solid .theme-toggle { border-color: var(--line); background: transparent; }
.theme-toggle [data-theme-label] { display: inline-block; min-width: 2.9em; text-align: left; }   /* Day and Dusk take the same room, so the button beside it never moves */
.theme-toggle .knob { width: 26px; height: 26px; border-radius: 50%; background: var(--amber); display: grid; place-items: center; transition: background .3s; }
.theme-toggle[aria-pressed="true"] .knob { background: #6f86d6; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .ic-moon { display: none; }
.theme-toggle[aria-pressed="true"] .ic-sun { display: none; }
.theme-toggle[aria-pressed="true"] .ic-moon { display: block; }
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 12px; border: 2px solid rgba(255,255,255,.45); background: rgba(255,255,255,.12); color: inherit; cursor: pointer; }
.nav-menu { display: none; }
.menu-btn span { display: block; width: 20px; height: 2px; background: currentColor; margin: 4px auto; border-radius: 2px; }

/* ------------------------------- hero ------------------------------- */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr; background: var(--green-900); color: var(--hero-ink); overflow: clip; isolation: isolate; }
.hero-stage { position: absolute; inset: 0; overflow: hidden; }
.hero.bug-on, .hero.bug-on * { cursor: none; }
.hero.bug-on a, .hero.bug-on button { cursor: pointer; }
.hero-video { position: absolute; inset: 0; }
.hero-video video, .hero-video .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--par-bg, 0px)) scale(1.04); }
.hero-video video { opacity: 0; }
picture { display: contents; }   /* build 12: posters and logos sit in <picture> for WebP; the wrapper must not take part in layout */
.hero-video .poster { z-index: 0; transition: opacity .6s; }
.hero-video video.v-a, .hero-video video.v-b { z-index: 1; }
.hero-video .poster-dusk { opacity: 0; }
.hero-video[data-variant="dusk"] .poster-dusk { opacity: 1; }
.hero-video[data-variant="dusk"] .poster-day { opacity: 0; }
.hero-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background:
  linear-gradient(90deg, rgba(10,30,20,0) 45%, rgba(10,30,20,.28) 70%, rgba(10,30,20,.55) 100%),
  linear-gradient(180deg, rgba(10,30,20,.35) 0, rgba(10,30,20,0) 22%, rgba(10,30,20,0) 70%, rgba(10,30,20,.45) 100%); }
:root[data-theme="dusk"] .hero-scrim { background: linear-gradient(90deg, rgba(5,15,25,0) 45%, rgba(5,15,25,.35) 70%, rgba(5,15,25,.6) 100%), linear-gradient(180deg, rgba(5,15,25,.4) 0, rgba(5,15,25,0) 22%, rgba(5,15,25,0) 70%, rgba(5,15,25,.5) 100%); }
.hero-gecko { position: absolute; z-index: 4; pointer-events: none; filter: drop-shadow(0 18px 22px rgba(10,30,15,.35)); }
:root[data-theme="dusk"] .hero-gecko { filter: brightness(.82) contrast(1.05) drop-shadow(0 18px 22px rgba(0,0,10,.5)); }
.hero-gecko { transition: filter .6s; }
.hero-plate { position: absolute; z-index: 6; pointer-events: none; transform: translateY(var(--par, 0px)); }
/* The plate is set back from the screen edges: scaled 3 percent about its centre it reaches 1.5 percent past
   every edge (29 px at 1920 wide, 58 px at 4K), so the sway can never show the cut edge of the image (Matthew, Oct 5). */
.hero-plate .plate-inner { width: 100%; height: 100%; transform: scale(1.03); transform-origin: 50% 50%; }
.hero-plate img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; animation: sway 9s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-.2deg) translate(0,0); } to { transform: rotate(.2deg) translate(3px,-2px); } }
.hero-fx { position: absolute; z-index: 3; pointer-events: none; }   /* below the gecko (z 4): a ring on the water behind him is hidden by his body and feet, never drawn over them (build 9) */
/* the tongue's own layer: above the copy (7) and the sound button (8), below the bug (60). RULE: nothing but the bug is ever in front of the tongue. */
.hero-tongue { position: absolute; z-index: 9; pointer-events: none; transition: filter .6s; }
:root[data-theme="dusk"] .hero-tongue { filter: brightness(.82) contrast(1.05); }
.gk-tongue-wrap { position: relative; transform-origin: 0 0; }
/* Water ripple where the tongue lands: three soft rings spreading slowly in perspective, 2.6 s, staggered
   (Matthew, Oct 5: slower, more like water, and never onto the land). The layer is clipped to the pool outline
   traced point by point from the film's first frame: the far bank under the falls, the bushes bottom right,
   the mossy ledge and the ferns on the left), so a ring stops at the real shoreline. The same outline decides
   in app.js whether a catch makes a ripple at all. */
.hero-fx { clip-path: polygon(43.3% 50.6%, 44.3% 49.6%, 48% 48.6%, 50% 48.1%, 53% 47.7%, 57% 47.3%, 60% 47%, 64% 47.8%, 69% 48.5%, 74% 49.5%, 79% 50.4%, 84% 51.2%, 88% 51.3%, 91% 52.5%, 95% 53.6%, 100% 54.8%, 100% 100%, 53% 100%, 53% 88%, 52.3% 84%, 51.3% 80%, 50.2% 76%, 49.3% 73%, 46.7% 70.8%, 44% 68.8%, 41.7% 66%, 40.8% 63.5%, 40.3% 60%, 40.3% 56%, 41% 53%, 42.1% 51.2%); }   /* the pool outline Matthew drew over the hero (Oct 6), left bank 1 percent toward the water (build 9), then back 0.5 percent toward the land (build 12, his final micro adjustment): the border hugs the shoreline, water is right of and below it */
.ripple { position: absolute; width: 2.6%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.ripple i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); box-shadow: 0 0 8px rgba(255,255,255,.35), inset 0 0 8px rgba(255,255,255,.3); opacity: 0; transform: scale(.3) scaleY(.42); animation: ripple 2.6s cubic-bezier(.15,.55,.35,1) forwards; }
.ripple i:nth-child(2) { animation-delay: .4s; }
.ripple i:nth-child(3) { animation-delay: .8s; border-width: 1.5px; }
@keyframes ripple { 0% { opacity: 0; transform: scale(.3) scaleY(.42); } 12% { opacity: .85; } 100% { opacity: 0; transform: scale(6.5) scaleY(.42); } }

.hero-copy { position: relative; z-index: 7; width: min(var(--wrap), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 150px 0 120px; display: grid; grid-template-columns: 1fr minmax(0, 54%); align-items: center; min-height: 100svh; pointer-events: none; }
.hero-copy > * { pointer-events: auto; }
.hero-text { grid-column: 2; display: grid; gap: clamp(16px, 1.6vw, 26px); justify-items: start; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero-text .lead { color: rgba(251,246,234,.92); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* bottom left: the sound icon alone (Matthew, Oct 5: no control panel, no counter, no caption text) */
.hero-foot { position: absolute; z-index: 8; left: var(--gutter); right: var(--gutter); bottom: 26px; display: flex; align-items: center; justify-content: flex-start; gap: 16px; pointer-events: none; }
.hero-foot > * { pointer-events: auto; }
.hero-foot .sound { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #0b6a2c; color: #fff; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: background .2s, transform .2s var(--ease); }
.hero-foot .sound:hover { background: #0e8236; transform: translateY(-2px); }
.hero-foot .sound svg { width: 22px; height: 22px; }
.hero-foot .sound .ic-off { display: none; }
.hero-foot .sound.is-muted { background: rgba(255,253,245,.86); color: var(--ink); }
.hero-foot .sound.is-muted .ic-on { display: none; }
.hero-foot .sound.is-muted .ic-off { display: block; }

/* bug cursor */
.bug { position: fixed; left: 0; top: 0; width: 47px; height: 47px; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .2s; will-change: transform; filter: drop-shadow(0 3px 2px rgba(20,40,20,.25)); }
.bug.is-on { opacity: 1; }
.bug.is-caught { transition: opacity .1s; }
.bug.is-gone { opacity: 0; transform-origin: center; }
.bug svg { width: 100%; height: 100%; overflow: visible; }
.bug .wing { transform-origin: 18px 17px; animation: flutter 70ms linear infinite alternate; }
.bug .wing.r { transform-origin: 18px 17px; animation-delay: 35ms; }
@keyframes flutter { from { transform: scaleY(.55) rotate(-8deg); } to { transform: scaleY(1) rotate(10deg); } }
.bug-trail { position: fixed; inset: 0; z-index: 59; pointer-events: none; opacity: 0; transition: opacity .3s; }
.bug-trail.is-on { opacity: 1; }
.bug-trail i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: rgba(251,246,234,.8); opacity: 0; }
.bug-trail i.live { animation: trail 1s linear forwards; }
@keyframes trail { from { opacity: .7; } to { opacity: 0; } }

/* puppet */
.gk { position: relative; transform-origin: 0 0; pointer-events: none; user-select: none; }
.gk-pivot { position: absolute; inset: 0; will-change: transform; }
.gk-body { position: absolute; inset: 0; width: 100%; height: 100%; }
.gk-shadow { position: absolute; left: 6%; right: 6%; bottom: 3.5%; height: 9%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(10,30,15,.55) 0, rgba(10,30,15,.25) 45%, rgba(10,30,15,0) 72%); filter: blur(6px); }
.gk-eye { position: absolute; overflow: hidden; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.gk-sclera { position: absolute; inset: 0; width: 100%; height: 100%; }
.gk-iris { position: absolute; will-change: transform; }
.gk-patch { position: absolute; opacity: 0; }
.gk-tongue { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gk-tongue-set { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.gk-tongue-tex { mix-blend-mode: normal; }   /* papillae pattern band on the shooting tongue (build 8) */
.gk-tongue-body { stroke: rgba(110,25,45,.4); stroke-width: 1.5; }
.gk-tongue-tip { stroke: rgba(110,25,45,.35); stroke-width: 1.2; }
.gk-puff { position: absolute; left: 1000px; top: 380px; width: 120px; height: 120px; pointer-events: none; }
.gk-puff i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.75) 0, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 70%); opacity: 0; transform: translate(-50%,-50%) scale(.3); }
.gk-puff.go i { animation: puff 1.1s var(--ease) forwards; }
.gk-puff.go i:nth-child(2) { animation-delay: .08s; left: 35%; }
.gk-puff.go i:nth-child(3) { animation-delay: .16s; left: 65%; }
@keyframes puff { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.3); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%,-260%) scale(1.6); } }
.gk.is-paused .gk-pivot { transform: none !important; }

/* ------------------------------ ticker ------------------------------ */
.ticker { background: var(--green-900); color: var(--lime); overflow: hidden; padding: 16px 0; border-block: 1px solid rgba(255,255,255,.06); }
:root[data-theme="dusk"] .ticker { background: #0a1d17; }
.ticker-track { display: inline-flex; white-space: nowrap; gap: 0; animation: ticker 70s linear infinite; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.3vw, 26px); letter-spacing: .02em; }
.ticker-track span { padding: 0 28px; display: inline-flex; align-items: center; gap: 28px; }
.ticker-track span::after { content: "✳"; color: var(--amber); font-size: .9em; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track, .hero-plate img, .bug .wing { animation: none !important; } }

/* ----------------------------- sections ----------------------------- */
.section { padding: clamp(72px, 8vw, 140px) 0; }
.section-alt { background: var(--bg-alt); }
.section-head { display: grid; gap: 18px; max-width: 70ch; margin-bottom: clamp(36px, 4vw, 64px); }
.section-head.center { text-align: center; margin-inline: auto; justify-items: center; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* shop grid */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 32px); }
.card { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit; transition: transform .35s var(--ease), box-shadow .35s var(--ease); transform-style: preserve-3d; }
.card:hover { transform: translateY(-6px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); box-shadow: 0 24px 50px rgba(22,48,31,.18); }
.card-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card-img img { transform: scale(1.04); }
.card-body { padding: clamp(18px, 1.6vw, 28px); display: grid; gap: 10px; align-content: start; }
.card-body h3 { white-space: nowrap; }
.card-body p { color: var(--text-soft); }
.card-link { margin-top: 6px; font-weight: 800; color: var(--accent); display: inline-flex; gap: 8px; align-items: center; }
.card-link::after { content: "↗"; }

/* habitat */
.habitat-frame { position: relative; border-radius: calc(var(--radius) + 6px); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16 / 9; background: #000; }
.habitat-video { position: absolute; inset: 0; }   /* the film holds still when a spot is chosen; no lean, no zoom (Matthew, Oct 5) */
/* Build 11: the habitat film is re rendered framed inside the glass (no rail, base or glass edge), so it fills the frame
   as is; the build 5 crop (112.5 percent, 5 percent left, 3.5 percent up) is gone. Markers and spot geckos are placed in
   frame percent on this film's first frame. */
.habitat-video video, .habitat-video .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.habitat-video video { opacity: 0; }
.spots { position: absolute; inset: 0; }
/* The gecko appears in the chosen spot (Matthew, Oct 5): the marker fades out and a cutout of him doing what the
   panel describes fades in at that place over the living film. No gecko shows until the first click: the reveal is
   the payoff. The layer sits inside .habitat-video so he leans with the film and stays locked to the scene. */
.spot-geckos { position: absolute; inset: 0; pointer-events: none; }
.spot-gecko { position: absolute; height: auto; transform: translate(-50%, 0) rotate(var(--rot, 0deg)) scale(.94); transform-origin: 50% 50%; opacity: 0; transition: opacity .75s var(--ease), transform .75s var(--ease); filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); }
.spot-gecko.is-on { opacity: 1; transform: translate(-50%, 0) rotate(var(--rot, 0deg)) scale(1); }
.spot-gecko[data-spot-gecko="warm"] { filter: drop-shadow(0 8px 12px rgba(0,0,0,.4)) brightness(1.06) sepia(.14) saturate(1.08); }
.spot-gecko[data-spot-gecko="hide"] { filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)) brightness(.94); }
.habitat.has-pick .spot[aria-pressed="true"] { opacity: 0; transform: scale(.5); pointer-events: none; }
.spot { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 0; background: rgba(255,253,245,.92); color: var(--green-800); font: 800 18px/1 var(--font-display); cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.3); transition: transform .45s var(--ease), background .25s, opacity .45s var(--ease); }
.spot::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255,253,245,.6); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.spot:hover { transform: scale(1.08); }
.spot[aria-pressed="true"] { background: var(--lime); color: var(--ink); }
.spot[aria-pressed="true"]::before { animation: none; opacity: 0; }
.habitat-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.spot-panel { background: var(--card); border-radius: var(--radius); padding: clamp(22px, 2vw, 34px); box-shadow: var(--shadow); display: grid; gap: 14px; }
.spot-panel[hidden] { display: none; }
.spot-panel .num { font-family: var(--font-display); color: var(--amber); font-weight: 700; font-size: 14px; letter-spacing: .1em; }
.spot-panel ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.spot-panel li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--bg-alt); font-weight: 700; }
.spot-panel li span { color: var(--text-soft); font-weight: 600; }
.spot-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.spot-list button { border: 2px solid var(--line); background: transparent; color: var(--text); border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.spot-list button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* split sections */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: center; }
.split.flip > .split-media { order: 2; }
.split-media { border-radius: calc(var(--radius) + 6px); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; }
.split-media.wide { aspect-ratio: 16 / 10; }
.split-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .6s; }
.split-copy { display: grid; gap: 18px; justify-items: start; }
.split-copy h2 { font-size: clamp(30px, 2.6vw, 56px); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: grid; gap: 2px; padding: 12px 16px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); min-width: 140px; }
.chip b { font-family: var(--font-display); font-size: 18px; }
.chip span { color: var(--text-soft); font-size: 14px; }

/* guides */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.8vw, 28px); }
.guide { background: var(--card); border-radius: var(--radius); padding: clamp(22px, 2vw, 32px); box-shadow: var(--shadow); display: grid; gap: 12px; align-content: start; text-decoration: none; color: inherit; transition: transform .3s var(--ease); }
.guide:hover { transform: translateY(-5px); }
.guide .ic { width: 52px; height: 52px; border-radius: 16px; background: var(--bg-alt); display: grid; place-items: center; color: var(--accent); }
.guide .ic svg { width: 26px; height: 26px; }
.guide h3 { font-size: clamp(20px, 1.3vw, 26px); white-space: nowrap; }
.guide p { color: var(--text-soft); }
.hours { display: grid; gap: 6px; padding: 18px 22px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); font-weight: 700; }
.hours div { display: flex; justify-content: space-between; gap: 20px; }
.hours span { color: var(--text-soft); font-weight: 600; }

/* ------------------------------ footer ------------------------------ */
.site-footer { position: relative; background: var(--green-950); color: var(--cream); padding: clamp(40px, 3.5vw, 56px) 0 40px; }   /* less air above the logo (Matthew, Oct 5); the peeking gecko is gone */
:root[data-theme="dusk"] .site-footer { background: #07160f; }
.footer-logo { width: clamp(220px, 20vw, 360px); margin: 0 auto 36px; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1100px; margin: 0 auto; text-align: center; }
.footer-cols h4 { margin: 0 0 12px; font-family: var(--font-display); font-size: 18px; color: var(--lime); }
.footer-cols a { display: block; text-decoration: none; opacity: .85; padding: 4px 0; font-weight: 700; }
.footer-cols a:hover { opacity: 1; color: var(--lime); }
.footer-bottom { margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); text-align: center; display: grid; gap: 8px; font-size: 15px; opacity: .85; }
.footer-bottom .note { font-size: 12px; opacity: .65; }

/* ----------------------------- responsive --------------------------- */
@media (max-width: 1100px) {
  .nav-side { gap: 14px; font-size: 14px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .hero-copy { grid-template-columns: 1fr minmax(0, 58%); }
  h1 { white-space: normal; }
  .hero-text h1 { text-wrap: balance; }
}
@media (max-width: 860px) {
  .site-header { position: sticky; top: 0; background: var(--bg); color: var(--text); box-shadow: 0 1px 0 var(--line); }
  .site-header .theme-toggle, .site-header .menu-btn { border-color: var(--line); background: transparent; }
  .nav { display: flex; justify-content: flex-end; align-items: center; position: relative; min-height: 84px; padding: 0; }
  .nav-logo { width: 116px; }
  .nav-side.left { display: none; }
  .nav-side a { display: none; }
  .nav-logo-link { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .nav-logo { margin-inline: 0; }
  .nav-side.right .nav-tools { margin-left: 0; }
  .theme-toggle [data-theme-label] { display: none; }
  .theme-toggle { padding: 0 6px; }
  .menu-btn { display: block; }
  .site-header.menu-open .nav-menu { display: grid; }
  .nav-menu { display: none; position: absolute; left: 0; right: 0; top: 84px; background: var(--bg); color: var(--text); padding: 16px var(--gutter) 24px; gap: 4px; box-shadow: var(--shadow); }
  .nav-menu a { text-decoration: none; font-weight: 800; padding: 12px 4px; border-bottom: 1px solid var(--line); }
  .grid-3 { grid-template-columns: 1fr; }
  .habitat-grid, .split, .split.flip { grid-template-columns: 1fr; }
  .split.flip > .split-media { order: 0; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); text-align: left; }
  /* hero stacks: video band on top with the gecko, copy below */
  .hero { min-height: 0; display: block; }
  .hero-stage { position: relative; aspect-ratio: 4 / 3; }
  .hero-copy { display: block; min-height: 0; padding: 28px 0 40px; }
  .hero-text { text-shadow: none; color: var(--text); }
  .hero-text .lead { color: var(--text-soft); }
  .btn-ghost { color: var(--text); border-color: var(--line); }
  .hero { background: var(--bg); color: var(--text); }
  .hero-scrim { background: linear-gradient(180deg, rgba(10,30,20,.4) 0, rgba(10,30,20,0) 30%); }
  /* phones: the sound button sits in the top bar, top left corner, outlined like the Day/Dusk toggle beside the logo
     (Matthew, Oct 6, build 11; it used to sit under the hero stage with no room beneath it) */
  .nav .hero-foot { position: static; padding: 0; margin-right: auto; display: flex; align-items: center; }   /* app.js moves it into the nav on phones */
  .hero-foot .sound { width: 42px; height: 42px; border: 2px solid var(--line); background: transparent; color: var(--text); box-shadow: none; }
  .hero-foot .sound:hover { background: transparent; transform: none; }
  .hero-foot .sound.is-muted { background: transparent; color: var(--text-soft); }
  .hero-foot .sound svg { width: 20px; height: 20px; }
  }
@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .nav-logo { width: 116px; }
}
@media (min-width: 2200px) {
  :root { --wrap: 2400px; }
  body { font-size: 24px; }
  .lead { font-size: 28px; }
  .eyebrow { font-size: 16px; }
  h2 { font-size: clamp(34px, 3.6vw, 84px); }
  h3 { font-size: clamp(22px, 1.5vw, 36px); }
  .nav { min-height: 132px; padding: 10px 0; }
  .nav-logo { width: 300px; }
  .nav-side { font-size: 19px; }
  .btn { font-size: 20px; min-height: 60px; padding: 0 34px; }
  .nav-side a.btn { padding: 0 38px; }
  .theme-toggle { height: 48px; font-size: 16px; }
  .nav-cta { min-height: 48px; font-size: 16px; }
  .hero-copy { grid-template-columns: 1fr minmax(0, 52%); }
    .hero-foot .sound { width: 60px; height: 60px; }
  .ticker-track { font-size: 30px; }
  .card-body h3, .guide h3 { font-size: 30px; }
  .spot { width: 72px; height: 72px; margin: -36px 0 0 -36px; font-size: 24px; }
  .spot-panel li { font-size: 22px; }
  .chip b { font-size: 24px; }
  .chip span { font-size: 18px; }
  .footer-cols a, .footer-bottom { font-size: 18px; }
  .footer-cols h4 { font-size: 22px; }
}
/* © Copyright 2026 - All Rights Reserved - Canadian Data Solutions */