/* ==========================================================================
   SCOOPEM — Dog Waste Removal | Philadelphia, PA
   Design system + site styles

   Brand: black / neon lime / white.
   Hard edges, condensed type, angled cuts, flat lime slabs. No gradients
   doing brand work, no soft rounded cards, nothing that reads as generic.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand colour — the exact Scoopem green, #61CC05.
     bright = hover lift, deep = the hard offset shadows, ink = text on green.
     Note: white type fails contrast on this green, so anything sitting ON the
     green uses --lime-ink (near-black) instead. */
  --lime: #61cc05;
  --lime-bright: #7ce80a;
  --lime-deep: #3f8a00;
  --lime-ink: #071200;

  /* Neutrals — panels lifted enough to actually read as surfaces */
  --black: #050505;
  --panel: #0e0e0e;
  --panel-2: #161616;
  --panel-3: #1c1c1c;
  --line: #262626;
  --line-strong: #3a3a3a;
  --white: #ffffff;
  --muted: #adadad;
  --muted-dim: #7f7f7f;

  /* Type */
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --condensed: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);

  /* Geometry — deliberately hard. Max 3px radius anywhere. */
  --r: 2px;
  --r-lg: 3px;

  --header-h: 112px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Contain the deliberate bleed (hero wordmark, paint wedge, tilted ticker).
   `clip` rather than `hidden`: hidden turns these into scroll containers and
   silently breaks position:sticky on the form sidebar. hidden is kept first
   as the fallback for anything that doesn't know `clip`. */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}

::selection { background: var(--lime); color: var(--lime-ink); }

/* --------------------------------------------------------------------------
   3. Typography — big, tight, condensed
   -------------------------------------------------------------------------- */
.display, h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  /* Anton is tall-shouldered — anything under ~0.95 and stacked lines touch */
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: -0.008em;
}

h1 { font-size: clamp(3.1rem, 9.5vw, 7rem); line-height: 0.95; }
h2 { font-size: clamp(2.35rem, 6.4vw, 4.5rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); letter-spacing: 0; line-height: 1.06; }

.h-sm { font-size: clamp(1.85rem, 4.4vw, 2.9rem); }

.lime { color: var(--lime); }

/* Outlined word — used against solid ones for scale contrast */
.stroke-word {
  color: transparent;
  -webkit-text-stroke: 2px var(--lime);
  text-stroke: 2px var(--lime);
}

p { color: var(--muted); }
p.lead {
  font-size: clamp(1.0625rem, 2vw, 1.28rem);
  color: #dcdcdc;
  max-width: 56ch;
}

strong { color: var(--white); font-weight: 600; }

/* Eyebrow: "01 — SERVICES" with a skewed lime tick */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: "";
  width: 21px;
  height: 19px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20126%20116%27%3E%3Cg%20fill%3D%27%2523000%27%3E%3Cellipse%20cx%3D%2726%27%20cy%3D%2744%27%20rx%3D%2713%27%20ry%3D%2717%27%20transform%3D%27rotate%28-20%2026%2044%29%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2729%27%20rx%3D%2713.5%27%20ry%3D%2718%27%2F%3E%3Cellipse%20cx%3D%2776%27%20cy%3D%2729%27%20rx%3D%2713.5%27%20ry%3D%2718%27%2F%3E%3Cellipse%20cx%3D%27100%27%20cy%3D%2744%27%20rx%3D%2713%27%20ry%3D%2717%27%20transform%3D%27rotate%2820%20100%2044%29%27%2F%3E%3Cpath%20d%3D%27M63%2060c19%200%2034%2013%2034%2027%200%2011-9%2019-21%2019-7%200-11-3-13-3s-6%203-13%203c-12%200-21-8-21-19%200-14%2015-27%2034-27z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20126%20116%27%3E%3Cg%20fill%3D%27%2523000%27%3E%3Cellipse%20cx%3D%2726%27%20cy%3D%2744%27%20rx%3D%2713%27%20ry%3D%2717%27%20transform%3D%27rotate%28-20%2026%2044%29%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2729%27%20rx%3D%2713.5%27%20ry%3D%2718%27%2F%3E%3Cellipse%20cx%3D%2776%27%20cy%3D%2729%27%20rx%3D%2713.5%27%20ry%3D%2718%27%2F%3E%3Cellipse%20cx%3D%27100%27%20cy%3D%2744%27%20rx%3D%2713%27%20ry%3D%2717%27%20transform%3D%27rotate%2820%20100%2044%29%27%2F%3E%3Cpath%20d%3D%27M63%2060c19%200%2034%2013%2034%2027%200%2011-9%2019-21%2019-7%200-11-3-13-3s-6%203-13%203c-12%200-21-8-21-19%200-14%2015-27%2034-27z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
  isolation: isolate;
}

.section--panel { background: var(--panel); }

/* Angled cut into the top edge — sections slice instead of stacking */
.section--slant {
  clip-path: polygon(0 2.6vw, 100% 0, 100% 100%, 0 100%);
  margin-top: -2.6vw;
  padding-top: calc(var(--section-y) + 2.6vw);
}
.section--slant-r {
  clip-path: polygon(0 0, 100% 2.6vw, 100% 100%, 0 100%);
  margin-top: -2.6vw;
  padding-top: calc(var(--section-y) + 2.6vw);
}

/* Oversized ghost paw print behind a section. Masked rather than drawn so a
   single shape can flip colour between the dark sections and the lime one. */
.section[data-wm]::before {
  content: "";
  position: absolute;
  top: clamp(-3rem, -3vw, -1rem);
  right: clamp(-4rem, -4vw, -1.5rem);
  width: clamp(13rem, 30vw, 27rem);
  aspect-ratio: 126 / 116;
  z-index: -1;
  background-color: #ffffff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20126%20116%27%3E%3Cg%20fill%3D%27%2523000%27%3E%3Cellipse%20cx%3D%2726%27%20cy%3D%2744%27%20rx%3D%2713%27%20ry%3D%2717%27%20transform%3D%27rotate%28-20%2026%2044%29%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2729%27%20rx%3D%2713.5%27%20ry%3D%2718%27%2F%3E%3Cellipse%20cx%3D%2776%27%20cy%3D%2729%27%20rx%3D%2713.5%27%20ry%3D%2718%27%2F%3E%3Cellipse%20cx%3D%27100%27%20cy%3D%2744%27%20rx%3D%2713%27%20ry%3D%2717%27%20transform%3D%27rotate%2820%20100%2044%29%27%2F%3E%3Cpath%20d%3D%27M63%2060c19%200%2034%2013%2034%2027%200%2011-9%2019-21%2019-7%200-11-3-13-3s-6%203-13%203c-12%200-21-8-21-19%200-14%2015-27%2034-27z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20126%20116%27%3E%3Cg%20fill%3D%27%2523000%27%3E%3Cellipse%20cx%3D%2726%27%20cy%3D%2744%27%20rx%3D%2713%27%20ry%3D%2717%27%20transform%3D%27rotate%28-20%2026%2044%29%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2729%27%20rx%3D%2713.5%27%20ry%3D%2718%27%2F%3E%3Cellipse%20cx%3D%2776%27%20cy%3D%2729%27%20rx%3D%2713.5%27%20ry%3D%2718%27%2F%3E%3Cellipse%20cx%3D%27100%27%20cy%3D%2744%27%20rx%3D%2713%27%20ry%3D%2717%27%20transform%3D%27rotate%2820%20100%2044%29%27%2F%3E%3Cpath%20d%3D%27M63%2060c19%200%2034%2013%2034%2027%200%2011-9%2019-21%2019-7%200-11-3-13-3s-6%203-13%203c-12%200-21-8-21-19%200-14%2015-27%2034-27z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
  opacity: 0.035;
  transform: rotate(-14deg);
  pointer-events: none;
}
.section--lime[data-wm]::before { background-color: var(--lime-ink); opacity: 0.08; }

/* No max-width here — headline line breaks are set explicitly in the markup,
   and p.lead keeps its own measure. */
.section-head { margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.section-head p.lead { margin-top: 1.4rem; }

.grid { display: grid; gap: clamp(1.15rem, 2.2vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   5. Texture + brand graphics
   -------------------------------------------------------------------------- */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Painted slab — irregular edges, flat lime. The flyer's brush-stroke energy
   without a gradient or a stock texture anywhere near it. */
.brush {
  background: var(--lime);
  /* Shallow ragged edges read as a dragged brush. Deeper peaks start to look
     like a mountain range, which is not the idea. */
  clip-path: polygon(
    0 27%, 19% 17%, 39% 25%, 59% 15%, 80% 23%, 100% 14%,
    100% 77%, 81% 87%, 60% 79%, 40% 89%, 18% 81%, 0 90%
  );
}

/* Diagonal lime hatch */
.slash-band {
  height: 14px;
  background: repeating-linear-gradient(115deg, var(--lime) 0 16px, transparent 16px 34px);
}

/* --------------------------------------------------------------------------
   6. Ticker — scrolling brand band
   -------------------------------------------------------------------------- */
.ticker {
  position: relative;
  overflow: hidden;
  background: var(--lime);
  color: var(--lime-ink);
  padding-block: 0.7rem;
  border-block: 3px solid var(--lime-ink);
  transform: rotate(-1.1deg) scaleX(1.04);
  transform-origin: center;
  margin-block: clamp(2rem, 5vw, 3.25rem);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-slide 38s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }

.ticker__group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.ticker__group span {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.4vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  padding-inline: 1.1rem;
  white-space: nowrap;
}
.ticker__group svg {
  width: clamp(17px, 2vw, 23px);
  height: clamp(17px, 2vw, 23px);
  flex: 0 0 auto;
  opacity: 0.85;
}

@keyframes ticker-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--lime);
  --btn-fg: var(--lime-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 54px;
  padding: 0.9rem 1.7rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bg);
  border-radius: var(--r);
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 1.09rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease),
              color 0.18s var(--ease), border-color 0.18s var(--ease),
              box-shadow 0.18s var(--ease);
}

/* Sweep on hover. Over-wide and parked well off to the left so the skew
   can't leave a sliver visible along the leading edge at rest. */
.btn::after {
  content: "";
  position: absolute;
  inset: -1px -12%;
  background: var(--lime-bright);
  transform: translateX(-125%) skewX(-18deg);
  transition: transform 0.34s var(--ease);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }

.btn:hover::after,
.btn:focus-visible::after { transform: translateX(0) skewX(-18deg); }

/* Hard offset shadow instead of a soft glow — reads as print, not SaaS */
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--lime-deep);
}
.btn:active { transform: translate(0, 0); box-shadow: 2px 2px 0 0 var(--lime-deep); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  border-color: var(--white);
}
.btn--ghost::after { background: var(--white); }
.btn--ghost:hover { color: var(--lime-ink); box-shadow: 6px 6px 0 0 rgba(255,255,255,0.28); }

.btn--lime-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--lime);
  border-color: var(--lime);
}
.btn--lime-ghost:hover { color: var(--lime-ink); }

.btn--dark {
  --btn-bg: var(--lime-ink);
  --btn-fg: var(--white);
  border-color: var(--lime-ink);
}
.btn--dark::after { background: #232323; }
.btn--dark:hover { color: var(--lime); box-shadow: 6px 6px 0 0 rgba(0,0,0,0.4); }

.btn--sm { min-height: 44px; padding: 0.55rem 1.1rem; font-size: 0.9375rem; letter-spacing: 0.09em; }
.btn--lg { min-height: 64px; padding: 1.1rem 2.3rem; font-size: 1.25rem; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.link {
  color: var(--lime);
  font-family: var(--condensed);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background-image: linear-gradient(var(--lime), var(--lime));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.25s var(--ease);
  padding-bottom: 2px;
}
.link:hover { background-size: 100% 2px; }

/* --------------------------------------------------------------------------
   8. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(5, 5, 5, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: height 0.28s var(--ease), border-color 0.25s var(--ease),
              background-color 0.25s var(--ease);
}
.site-header.is-stuck {
  background: rgba(5, 5, 5, 0.97);
  border-bottom-color: var(--lime-deep);
}

.site-header .container { display: flex; align-items: center; gap: 1.25rem; }

.brand { display: flex; align-items: center; flex: 0 0 auto; }
/* Sized by height — the logo is a stacked mark, so height is what governs
   whether SCOOPEM and the tagline stay readable. */
.brand img { height: 88px; width: auto; transition: height 0.28s var(--ease), transform 0.25s var(--ease); }

/* Full size at the top of the page where the brand lands, then compact once
   scrolling starts so a tall bar isn't permanently covering the content.
   Only above 1040px, where the mobile drawer (which pins to --header-h) is
   never in play. */
@media (min-width: 1041px) {
  .site-header.is-stuck { height: 78px; }
  .site-header.is-stuck .brand img { height: 60px; }
}
.brand:hover img { transform: scale(1.04); }

.nav { display: flex; align-items: center; gap: 1.55rem; margin-left: auto; }
.nav a {
  font-family: var(--condensed);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #dcdcdc;
  position: relative;
  padding-block: 0.35rem;
  transition: color 0.18s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  background: var(--lime);
  transform: scaleX(0) skewX(-24deg);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.nav a:hover { color: var(--white); }
.nav a:hover::after,
.nav a.is-active::after { transform: scaleX(1) skewX(-24deg); }
.nav a.is-active { color: var(--lime); }

.header-actions { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 48px; height: 48px;
  padding: 0;
  background: transparent;
  border: 2px solid var(--line-strong);
  border-radius: var(--r);
  cursor: pointer;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 50%;
  width: 22px; height: 2px;
  background: var(--white);
  transform: translateX(-50%);
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease), background-color 0.2s;
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle[aria-expanded="true"] { border-color: var(--lime); }
.nav-toggle[aria-expanded="true"] span { background: var(--lime); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: var(--black);
  border-top: 2px solid var(--lime);
  padding: 1.5rem var(--gutter) 2rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
}
.mobile-menu.is-open { opacity: 1; transform: none; visibility: visible; }

.mobile-menu a.m-link {
  font-family: var(--display);
  font-size: clamp(1.75rem, 7vw, 2.25rem);
  text-transform: uppercase;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.18s var(--ease), padding-left 0.18s var(--ease);
}
.mobile-menu a.m-link::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 3px solid var(--lime);
  border-bottom: 3px solid var(--lime);
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}
.mobile-menu a.m-link:hover,
.mobile-menu a.m-link:focus-visible { color: var(--lime); padding-left: 0.4rem; }
.mobile-menu a.m-link:hover::after { opacity: 1; }

.mobile-menu .m-actions { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
.mobile-menu .m-contact {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-family: var(--condensed);
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}

body.nav-open { overflow: hidden; }

@media (max-width: 1040px) {
  .nav, .header-actions { display: none; }
  .nav-toggle { display: block; }
}
@media (max-width: 1040px) { :root { --header-h: 100px; } .brand img { height: 76px; } }
@media (max-width: 640px)  { :root { --header-h: 88px; }  .brand img { height: 66px; } }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem));
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
}

/* Giant outlined wordmark bleeding off the left edge */
.hero__wm {
  position: absolute;
  left: -3vw;
  bottom: -3.5vw;
  z-index: -2;
  font-family: var(--display);
  font-size: clamp(9rem, 25vw, 24rem);
  line-height: 0.75;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px rgba(97, 204, 5, 0.13);
  text-stroke: 2px rgba(97, 204, 5, 0.13);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* Painted lime wedge behind the photo side */
.hero__paint {
  position: absolute;
  z-index: -2;
  right: -8%;
  top: 8%;
  width: 52vw;
  height: 78%;
  opacity: 0.14;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 4vw, 3.75rem);
  align-items: center;
}

.hero h1 { margin-bottom: 1.65rem; }
.hero h1 .line { display: block; }

.hero__sub {
  line-height: 1.55;
  font-size: clamp(1.09rem, 2.2vw, 1.375rem);
  color: #e2e2e2;
  max-width: 44ch;
  margin-bottom: 2rem;
  border-left: 4px solid var(--lime);
  padding-left: 1.1rem;
}

.hero .btn-row { margin-bottom: 2.4rem; }

/* Benefit indicators — solid blocks, not timid circles */
.benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  padding-top: 1.75rem;
  border-top: 2px solid var(--line);
}
.benefit {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.95rem 0.85rem;
  background: var(--panel-2);
  border-left: 3px solid var(--lime);
  border-radius: var(--r);
  transition: background-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.benefit:hover { background: var(--panel-3); transform: translateY(-3px); }
.benefit__icon { color: var(--lime); display: block; }
.benefit__icon svg { width: 26px; height: 26px; }
.benefit span {
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.32;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #ededed;
}

/* Hero media — angled mask + offset lime slab */
.hero__media { position: relative; }
.hero__media::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  background: var(--lime);
  clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
  z-index: 0;
}
.hero__photo {
  position: relative;
  z-index: 1;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #0b0b0b;
  clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,5,5,0.7) 0%, rgba(5,5,5,0) 46%);
}
.hero__shield {
  position: absolute;
  z-index: 3;
  right: -22px;
  bottom: -22px;
  width: clamp(104px, 13vw, 148px);
  filter: drop-shadow(0 10px 26px rgba(0,0,0,0.9));
}

/* Rotated price tab clipped onto the photo */
.hero__tab {
  position: absolute;
  z-index: 3;
  left: -14px;
  top: 34px;
  background: var(--lime);
  color: var(--lime-ink);
  font-family: var(--display);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.45rem 0.9rem;
  transform: rotate(-4deg);
  box-shadow: 5px 5px 0 0 rgba(0,0,0,0.55);
  white-space: nowrap;
}

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
  /* Copy stays first: someone scanning the flyer's QR code must read what
     Scoopem is and reach a CTA before any decorative photography. */
  .hero__media { max-width: 430px; margin-top: 0.75rem; }
  .hero__photo { aspect-ratio: 1 / 1; }
  .hero__photo img { object-position: 50% 14%; }
  .benefits { margin-bottom: 1.5rem; }
  /* Both bleed graphics come off on narrow screens — at this width they sit
     behind the headline and just make it harder to read. */
  .hero__wm, .hero__paint { display: none; }
}
@media (max-width: 560px) {
  .benefits { grid-template-columns: repeat(2, 1fr); }
  .hero .btn-row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.6rem, 2.5vw, 2rem);
  overflow: hidden;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease),
              background-color 0.22s var(--ease);
}
/* Lime floods up from the bottom on hover, text flips to black */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lime);
  transform: translateY(101%);
  transition: transform 0.34s var(--ease-out);
  z-index: 0;
}
.card > * { position: relative; z-index: 1; }

.card:hover { border-color: var(--lime); transform: translateY(-5px); }
.card:hover::before { transform: translateY(0); }
.card:hover h3,
.card:hover p,
.card:hover .card__num { color: var(--lime-ink); }
.card:hover .card__icon { border-color: var(--lime-ink); color: var(--lime-ink); }

.card__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 2px solid var(--lime);
  border-radius: var(--r);
  color: var(--lime);
  margin-bottom: 1.2rem;
  transition: border-color 0.22s var(--ease), color 0.22s var(--ease);
}
.card__icon svg { width: 28px; height: 28px; }

/* Reserve two lines so body copy stays on one baseline across a row,
   whether the heading wraps ("Sanitized Equipment") or not. */
.card h3 {
  margin-bottom: 0.85rem;
  color: var(--white);
  min-height: 2.12em;
  transition: color 0.22s var(--ease);
}
.card p { font-size: 1rem; line-height: 1.68; transition: color 0.22s var(--ease); }
@media (max-width: 560px) { .card h3 { min-height: 0; } }

/* Descriptive emoji, not numerals — these promises aren't a sequence.
   System emoji font, so no colour is applied (they carry their own). */
.card__num {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 0.65rem;
  display: block;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* --------------------------------------------------------------------------
   11. Inverted lime section
   -------------------------------------------------------------------------- */
.section--lime {
  background: var(--lime);
  color: var(--lime-ink);
}
.section--lime h2,
.section--lime h3 { color: var(--lime-ink); }
.section--lime p { color: rgba(10, 12, 0, 0.72); }
.section--lime p.lead { color: rgba(10, 12, 0, 0.86); }
.section--lime .eyebrow { color: var(--lime-ink); }
.section--lime .eyebrow::before { background: var(--lime-ink); }

.section--lime .card {
  background: transparent;
  border: 2px solid rgba(10, 12, 0, 0.22);
}
.section--lime .card::before { background: var(--lime-ink); }
.section--lime .card h3 { color: var(--lime-ink); }
.section--lime .card p { color: rgba(10, 12, 0, 0.72); }
.section--lime .card__num { color: rgba(10, 12, 0, 0.45); }
.section--lime .card:hover { border-color: var(--lime-ink); }
.section--lime .card:hover h3 { color: var(--lime); }
.section--lime .card:hover p { color: rgba(255, 255, 255, 0.75); }
.section--lime .card:hover .card__num { color: var(--lime); }

.section--lime .btn { --btn-bg: var(--lime-ink); --btn-fg: var(--white); border-color: var(--lime-ink); }
.section--lime .btn::after { background: #232323; }
.section--lime .btn:hover { color: var(--lime); box-shadow: 6px 6px 0 0 rgba(0,0,0,0.35); }

/* --------------------------------------------------------------------------
   12. Pricing
   -------------------------------------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.15rem);
  align-items: stretch;
}
@media (max-width: 960px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pricing-grid { grid-template-columns: 1fr; } }

.price {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel-2);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: 1.9rem 1.5rem;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease),
              background-color 0.22s var(--ease);
}
.price:hover { border-color: var(--lime); transform: translateY(-5px); background: var(--panel-3); }

.price__dogs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.2rem;
}
.price__paws { display: flex; gap: 3px; color: var(--lime); }
.price__paws svg { width: 18px; height: 18px; }

.price__amount {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--display);
  line-height: 0.85;
  margin-bottom: 0.4rem;
}
.price__amount .num { font-size: clamp(3.25rem, 5.6vw, 4.25rem); color: var(--white); letter-spacing: -0.015em; line-height: 0.95; }
.price__amount .per {
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.price__note { font-size: 0.95rem; line-height: 1.6; color: var(--muted-dim); margin-top: auto; padding-top: 1.35rem; }

/* Featured — the $25 starting price. Lifted, tilted, unmissable. */
.price--featured {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--lime-ink);
  transform: rotate(-1.2deg) scale(1.035);
  box-shadow: 10px 10px 0 0 var(--lime-deep);
  z-index: 2;
}
.price--featured:hover {
  border-color: var(--lime);
  transform: rotate(-1.2deg) scale(1.035) translateY(-5px);
  background: var(--lime);
  box-shadow: 14px 14px 0 0 var(--lime-deep);
}
.price--featured .price__dogs { color: rgba(10, 12, 0, 0.75); }
.price--featured .price__paws { color: var(--lime-ink); }
.price--featured .price__amount .num { color: var(--lime-ink); font-size: clamp(3.6rem, 6.4vw, 5rem); }
.price--featured .price__amount .per { color: rgba(10, 12, 0, 0.75); }
.price--featured .price__note { color: rgba(10, 12, 0, 0.75); }

@media (max-width: 520px) {
  .price--featured,
  .price--featured:hover { transform: none; box-shadow: 8px 8px 0 0 var(--lime-deep); }
}

.price__flag {
  position: absolute;
  top: -2px; right: -2px;
  background: var(--lime-ink);
  color: var(--lime);
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
}

.price--onetime { border-color: var(--line-strong); background: var(--panel); }
.price--onetime .price__amount .num { color: var(--lime); }

.pricing-note {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding: 1.15rem 1.3rem;
  border: 2px solid var(--line);
  border-left: 5px solid var(--lime);
  border-radius: var(--r);
  background: var(--panel-2);
  font-family: var(--condensed);
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  color: #e2e2e2;
}
.pricing-note svg { width: 22px; height: 22px; color: var(--lime); flex: 0 0 auto; margin-top: 3px; }

/* --------------------------------------------------------------------------
   13. How it works
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2rem);
}
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

.step {
  position: relative;
  padding-top: 1.25rem;
  border-top: 3px solid var(--line);
  transition: border-color 0.24s var(--ease);
}
.step:hover { border-top-color: var(--lime); }

/* Huge outlined numeral, ghosted behind the step copy */
.step__num {
  display: block;
  font-family: var(--display);
  font-size: clamp(3.5rem, 6vw, 5rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2px var(--lime-deep);
  text-stroke: 2px var(--lime-deep);
  margin-bottom: 0.5rem;
  transition: -webkit-text-stroke-color 0.24s var(--ease), color 0.24s var(--ease);
}
.step:hover .step__num { color: var(--lime); -webkit-text-stroke-color: var(--lime); }

.step h3 { margin-bottom: 0.7rem; }
.step p { font-size: 1rem; line-height: 1.68; }

/* Statement and photograph sit side by side, never stacked.
   The worker's shirt carries the Scoopem logo, so any text laid over the
   image collides with wording that is already in the picture. */
.how-media {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  overflow: hidden;
  background: #0b0b0b;
  clip-path: polygon(0 0, 100% 2.2%, 100% 100%, 0 97.8%);
}

.how-media__panel {
  background: var(--lime);
  display: flex;
  align-items: center;
  padding: clamp(1.6rem, 3.4vw, 3rem);
}
.how-media__caption {
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.7vw, 2.35rem);
  line-height: 1.18;
  text-transform: uppercase;
  color: rgba(10, 12, 0, 0.62);
  /* keeps "WORK." and "BACK." from orphaning onto their own line */
  text-wrap: balance;
}
.how-media__caption .em { display: block; color: var(--lime-ink); }

/* Definite aspect, so a portrait photograph crops predictably instead of
   dictating the row height. Square on desktop keeps the subject head-to-tools. */
.how-media__img {
  position: relative;
  overflow: hidden;
  /* matches the photograph's own 3:2 framing, so nothing is cropped away */
  aspect-ratio: 3 / 2;
  background: #050505;
}
/* absolutely positioned: height:100% cannot resolve against an auto-height
   parent, which makes the image ignore the crop and set the row height itself */
.how-media__img img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  /* Shown bright. The earlier blackout only existed to hide garbled
     lettering in the placeholder shot; this photo's branding is correct. */
  filter: contrast(1.05) saturate(1.03);
}
/* just enough shading at the base to seat it against the black page */
.how-media__img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(5,5,5,0) 55%, rgba(5,5,5,0.34) 100%);
}

@media (max-width: 760px) {
  .how-media { grid-template-columns: 1fr; }
  /* photo first, statement underneath it; taller crop suits the narrow column */
  .how-media__img { order: -1; aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   14. Split (About / Service area)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.value-list { display: grid; gap: 1.05rem; margin-top: 2.1rem; }
.value-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  font-size: 1.09rem;
  color: #dcdcdc;
}
.value-list li svg { width: 23px; height: 23px; color: var(--lime); flex: 0 0 auto; margin-top: 3px; }
.value-list b {
  font-family: var(--condensed);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--white);
  margin-right: 0.45rem;
}

.area-panel {
  position: relative;
  border: 2px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--panel-2);
  padding: clamp(1.9rem, 3.2vw, 2.75rem);
  overflow: hidden;
}
.area-panel::before {
  content: "";
  position: absolute;
  right: -22%; bottom: -46%;
  width: 340px; height: 340px;
  border: 3px solid rgba(97, 204, 5, 0.14);
  border-radius: 50%;
}
.area-panel::after {
  content: "";
  position: absolute;
  right: -12%; bottom: -30%;
  width: 210px; height: 210px;
  border: 3px solid rgba(97, 204, 5, 0.1);
  border-radius: 50%;
}
.area-panel > * { position: relative; z-index: 1; }

.area-panel__hub {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--lime);
  color: var(--lime-ink);
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 0.95rem;
  border-radius: var(--r);
  margin-bottom: 1.35rem;
}
.area-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }
.area-list li {
  font-family: var(--condensed);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d6d6d6;
  border: 2px solid var(--line-strong);
  border-radius: var(--r);
  padding: 0.4rem 0.85rem;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.area-list li:hover { border-color: var(--lime); background: var(--lime); color: var(--lime-ink); }

/* --------------------------------------------------------------------------
   15. Reputation (no fake reviews)
   -------------------------------------------------------------------------- */
.reputation {
  position: relative;
  border: 2px solid var(--line-strong);
  border-left: 6px solid var(--lime);
  border-radius: var(--r);
  background: var(--panel-2);
  padding: clamp(1.9rem, 4vw, 3.25rem);
}
.reputation blockquote {
  font-family: var(--condensed);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.9vw, 2rem);
  line-height: 1.45;
  color: var(--white);
  margin-bottom: 1.6rem;
}
.reputation cite {
  display: block;
  font-family: var(--condensed);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--lime);
  margin-bottom: 1.9rem;
}
.reputation__mark {
  font-family: var(--display);
  font-size: 5rem;
  line-height: 0.55;
  color: var(--lime);
  display: block;
  margin-bottom: 0.6rem;
}

.review-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
@media (max-width: 800px) { .review-slots { grid-template-columns: 1fr; } }

.review {
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--panel-2);
  padding: 1.5rem;
  transition: border-color 0.2s var(--ease);
}
.review:hover { border-color: var(--lime-deep); }
.review__stars { display: flex; gap: 2px; color: var(--lime); margin-bottom: 0.8rem; }
.review__stars svg { width: 19px; height: 19px; }
.review p { color: #dcdcdc; font-size: 1rem; line-height: 1.68; margin-bottom: 1.05rem; }
.review cite {
  font-family: var(--condensed);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 2px solid var(--line); }
.faq-item { border-bottom: 2px solid var(--line); transition: border-color 0.2s var(--ease); }
.faq-item.is-open { border-bottom-color: var(--lime-deep); }

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.65rem 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--condensed);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.1vw, 1.35rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
  transition: color 0.18s var(--ease), padding-left 0.2s var(--ease);
}
.faq-q:hover { color: var(--lime); padding-left: 0.5rem; }
.faq-icon {
  position: relative;
  width: 26px; height: 26px;
  flex: 0 0 auto;
  border: 2px solid var(--lime);
  border-radius: var(--r);
  transition: background-color 0.25s var(--ease);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  inset: 50% 5px auto 5px;
  height: 2px;
  background: var(--lime);
  transform: translateY(-50%);
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}
.faq-icon::after { transform: translateY(-50%) rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-icon { background: var(--lime); }
.faq-q[aria-expanded="true"] .faq-icon::before,
.faq-q[aria-expanded="true"] .faq-icon::after { background: var(--lime-ink); }
.faq-q[aria-expanded="true"] .faq-icon::after { transform: translateY(-50%) rotate(0deg); }
.faq-q[aria-expanded="true"] { color: var(--lime); }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}
.faq-a > div { overflow: hidden; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a p { padding-bottom: 1.7rem; max-width: 72ch; font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   17. CTA bands
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: var(--lime);
  color: var(--lime-ink);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.09;
  background: repeating-linear-gradient(115deg, var(--lime-ink) 0 14px, transparent 14px 38px);
}
.cta-band .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.9rem;
  padding-block: clamp(2.75rem, 5.5vw, 4.25rem);
}
.cta-band h2 { color: var(--lime-ink); }
.cta-band p { color: rgba(10, 12, 0, 0.8); margin-top: 0.7rem; font-weight: 500; }
.cta-band .btn-row { flex: 0 0 auto; }
@media (max-width: 760px) {
  .cta-band .container { flex-direction: column; align-items: flex-start; }
  .cta-band .btn-row { width: 100%; }
  .cta-band .btn { flex: 1 1 auto; }
}

/* Final dark push */
.cta-dark {
  position: relative;
  border: 2px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--panel-2);
  padding: clamp(2.25rem, 5vw, 4rem);
  text-align: center;
  overflow: hidden;
}
.cta-dark::before {
  content: "";
  position: absolute;
  inset: auto -10% -60% -10%;
  height: 60%;
  background: var(--lime);
  opacity: 0.07;
  clip-path: polygon(0 40%, 30% 8%, 62% 34%, 100% 4%, 100% 100%, 0 100%);
}
.cta-dark > * { position: relative; z-index: 1; }
.cta-dark .btn-row { justify-content: center; margin-top: 2rem; }
.cta-dark .eyebrow { justify-content: center; }
.cta-dark p.lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   18. Contact
   -------------------------------------------------------------------------- */
/* auto-fit, so the row still reads as designed if a contact method is
   not filled in yet and its card is withheld rather than faked */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}
@media (max-width: 520px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--panel-2);
  padding: 1.5rem;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease),
              background-color 0.2s var(--ease);
}
a.contact-card:hover { border-color: var(--lime); transform: translateY(-4px); background: var(--panel-3); }
.contact-card__label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.21em;
  text-transform: uppercase;
  color: var(--lime);
}
.contact-card__label svg { width: 19px; height: 19px; }
.contact-card__value {
  font-family: var(--condensed);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  color: var(--white);
  word-break: break-word;
}
.contact-card__value.is-pending { color: var(--muted-dim); font-style: italic; letter-spacing: 0; font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: #030303;
  border-top: 3px solid var(--lime);
  padding-block: clamp(2.75rem, 5vw, 4.25rem) 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand img { width: 215px; margin-bottom: 1.2rem; }
.footer-tagline {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  text-transform: uppercase;
  line-height: 1.14;
  margin-bottom: 1rem;
}
.footer-loc {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--condensed);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--muted);
}
.footer-loc svg { width: 17px; height: 17px; color: var(--lime); }

.footer-col h4 {
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.21em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 1.15rem;
}
.footer-col ul { display: grid; gap: 0.8rem; }
.footer-col a {
  font-family: var(--condensed);
  font-weight: 500;
  font-size: 1.09rem;
  letter-spacing: 0.06em;
  color: #cbcbcb;
  transition: color 0.18s var(--ease), padding-left 0.18s var(--ease);
}
.footer-col a:hover { color: var(--lime); padding-left: 5px; }

.footer-bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  padding-block: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-family: var(--condensed);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

/* --------------------------------------------------------------------------
   20. Sticky mobile CTA
   -------------------------------------------------------------------------- */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(5, 5, 5, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 3px solid var(--lime);
  transform: translateY(110%);
  transition: transform 0.3s var(--ease);
}
.mobile-cta.is-visible { transform: none; }
.mobile-cta .btn { flex: 1 1 0; min-height: 52px; padding-inline: 0.6rem; font-size: 0.97rem; letter-spacing: 0.07em; }
.mobile-cta .btn:hover { transform: none; box-shadow: none; }

@media (max-width: 860px) {
  .mobile-cta { display: flex; }
  /* room so the bar never covers the last line of the footer.
     Scoped to pages that actually carry the bar — the booking and quote
     pages drop it so it can't sit on top of their submit button. */
  body.has-sticky-cta { padding-bottom: 78px; }
}

/* --------------------------------------------------------------------------
   21. Forms
   -------------------------------------------------------------------------- */
.form-page { padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 3.5rem)); }

.form-shell {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(2rem, 4vw, 3.5rem);
  /* aside stretches to the row height so its inner block has travel to stick
     against — a content-height grid item would pin for barely a scroll */
  align-items: stretch;
}
@media (max-width: 980px) {
  /* Form first on narrow screens — someone who tapped "Book" should land on
     the fields, not on a stack of supporting cards. */
  .form-shell { grid-template-columns: 1fr; }
}

.form-card {
  border: 2px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--panel-2);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
.fieldset:last-of-type { margin-bottom: 1.5rem; }
.fieldset legend {
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.21em;
  text-transform: uppercase;
  color: var(--lime);
  padding: 0 0 1rem;
  margin-bottom: 0.25rem;
  border-bottom: 2px solid var(--line);
  width: 100%;
}

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 640px) { .field-grid { grid-template-columns: 1fr; } }
.field-grid .span-2 { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label {
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 0.97rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e4e4e4;
}
.field label .opt {
  color: var(--muted-dim);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  font-style: italic;
}
.field label .req { color: var(--lime); }

.input, .select, .textarea {
  width: 100%;
  min-height: 54px;
  padding: 0.8rem 1rem;
  background: #0a0a0a;
  border: 2px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--white);
  font-size: 1rem;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease),
              box-shadow 0.18s var(--ease);
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }

.input::placeholder, .textarea::placeholder { color: #6e6e6e; }
.input:hover, .select:hover, .textarea:hover { border-color: #4d4d4d; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--lime);
  background: #0d0f06;
  box-shadow: 0 0 0 3px rgba(97, 204, 5, 0.18);
}

.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2361cc05' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 18px;
  padding-right: 2.7rem;
  cursor: pointer;
}
.select option { background: #0a0a0a; color: var(--white); }

input[type="date"] { min-height: 54px; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) sepia(1) saturate(6) hue-rotate(35deg); cursor: pointer; }

.field-error {
  font-family: var(--condensed);
  font-size: 0.97rem;
  letter-spacing: 0.04em;
  color: #ff6b5e;
}
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: #ff6b5e; }
.field.has-error .input:focus { box-shadow: 0 0 0 3px rgba(255, 107, 94, 0.18); }

.choice-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.choice { position: relative; }
.choice input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.choice span {
  display: grid;
  place-items: center;
  padding: 0.7rem 1.15rem;
  min-height: 50px;
  border: 2px solid var(--line-strong);
  border-radius: var(--r);
  background: #0a0a0a;
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 0.97rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d6d6d6;
  transition: all 0.18s var(--ease);
}
.choice input:hover + span { border-color: #5a5a5a; color: var(--white); }
.choice input:checked + span {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--lime-ink);
  box-shadow: 4px 4px 0 0 var(--lime-deep);
}
.choice input:focus-visible + span { outline: 3px solid var(--lime); outline-offset: 3px; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  cursor: pointer;
  padding: 1.1rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--r);
  background: #0a0a0a;
  transition: border-color 0.18s var(--ease);
}
.check:hover { border-color: #5a5a5a; }
.check input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 26px; height: 26px;
  margin: 0;
  border: 2px solid var(--line-strong);
  border-radius: var(--r);
  background: #0a0a0a;
  cursor: pointer;
  position: relative;
  transition: all 0.18s var(--ease);
}
.check input:checked { background: var(--lime); border-color: var(--lime); }
.check input:checked::after {
  content: "";
  position: absolute;
  left: 8px; top: 2px;
  width: 6px; height: 13px;
  border-right: 3px solid var(--lime-ink);
  border-bottom: 3px solid var(--lime-ink);
  transform: rotate(45deg);
}
.check input:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.check span { font-size: 1rem; color: #d6d6d6; line-height: 1.5; }
.check.has-error { border-color: #ff6b5e; }

.filedrop {
  position: relative;
  border: 2px dashed var(--line-strong);
  border-radius: var(--r);
  background: #0a0a0a;
  padding: 1.6rem 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.filedrop:hover, .filedrop.is-drag { border-color: var(--lime); background: #0d0f06; }
.filedrop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.filedrop svg { width: 32px; height: 32px; color: var(--lime); margin: 0 auto 0.65rem; }
.filedrop__text {
  font-family: var(--condensed);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 1.09rem;
  color: #d6d6d6;
}
.filedrop__hint { font-size: 0.9rem; color: var(--muted-dim); margin-top: 0.3rem; }
.filedrop.has-file { border-style: solid; border-color: var(--lime); }

.form-submit { display: grid; gap: 1rem; }
.form-status {
  font-family: var(--condensed);
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r);
  border: 2px solid;
  display: none;
}
.form-status.is-shown { display: block; }
.form-status--error { color: #ff9b92; border-color: rgba(255,107,94,0.55); background: rgba(255,107,94,0.09); }
.form-status--info  { color: #dcdcdc; border-color: var(--line-strong); background: var(--panel); }

.btn[aria-busy="true"] { pointer-events: none; opacity: 0.75; }
.btn .spinner {
  width: 19px; height: 19px;
  border: 2px solid rgba(10,12,0,0.35);
  border-top-color: var(--lime-ink);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}
.btn[aria-busy="true"] .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.confirm {
  display: none;
  text-align: center;
  padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.25rem, 3vw, 2.5rem);
  border: 3px solid var(--lime);
  border-radius: var(--r);
  background: var(--panel-2);
  box-shadow: 10px 10px 0 0 var(--lime-deep);
}
.confirm.is-shown { display: block; }
.confirm__mark {
  width: 88px; height: 88px;
  margin: 0 auto 1.6rem;
  display: grid; place-items: center;
  background: var(--lime);
  color: var(--lime-ink);
  border-radius: 50%;
  animation: pop 0.45s var(--ease) both;
}
.confirm__mark svg { width: 44px; height: 44px; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confirm h2 { margin-bottom: 1.1rem; }
.confirm p.lead { margin: 0 auto 1.6rem; }
.confirm .btn-row { justify-content: center; }

.form-aside__inner {
  display: grid;
  gap: 1rem;
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}
@media (max-width: 980px) { .form-aside__inner { position: static; } }

.aside-card {
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--panel-2);
  padding: 1.5rem;
}
.aside-card h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.aside-card ul { display: grid; gap: 0.85rem; }
.aside-card li {
  display: flex;
  gap: 0.7rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #d6d6d6;
  align-items: flex-start;
}
.aside-card li svg { width: 20px; height: 20px; color: var(--lime); flex: 0 0 auto; margin-top: 3px; }

.aside-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--line-strong);
  font-family: var(--condensed);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1.05rem;
}
.aside-price:last-of-type { border-bottom: 0; }
.aside-price b { color: var(--lime); font-size: 1.35rem; font-family: var(--display); font-weight: 400; }

/* Owner-only setup notice — localhost / file:// only, never a live customer.
   Pinned above the fixed header, which is offset to sit below it. */
.setup-banner {
  display: none;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 110;
  background: #241f00;
  border-bottom: 2px solid #f0c000;
  color: #ffe680;
  font-family: var(--condensed);
  letter-spacing: 0.04em;
  padding: 0.7rem var(--gutter);
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.setup-banner.is-shown { display: block; }
.setup-banner code { background: rgba(0,0,0,0.4); padding: 0.1rem 0.35rem; border-radius: 2px; color: #fff2b3; }

body.has-setup-banner { padding-top: var(--banner-h, 0px); }
body.has-setup-banner .site-header { top: var(--banner-h, 0px); }
body.has-setup-banner .mobile-menu { top: calc(var(--header-h) + var(--banner-h, 0px)); }

/* --------------------------------------------------------------------------
   22. Scroll reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.62s var(--ease-out), transform 0.62s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

/* Image reveal — lime wipe uncovers the photo */
.img-reveal { position: relative; }
.img-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--lime);
  transform-origin: right;
  transition: transform 0.75s var(--ease-out);
}
.img-reveal.is-in::before { transform: scaleX(0); }

/* No-JS safety: never leave content hidden */
.no-js .reveal { opacity: 1; transform: none; }
.no-js .img-reveal::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .img-reveal::before { display: none; }
  .ticker__track { animation: none; }
}

/* --------------------------------------------------------------------------
   23. Utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--lime);
  color: var(--lime-ink);
  font-family: var(--condensed);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.75rem 1.25rem;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.is-hidden { display: none !important; }

/* --------------------------------------------------------------------------
   24. Entry dialog — both CTAs, shown once per visit
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.modal.is-open { display: flex; }
body.modal-open { overflow: hidden; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.84);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.modal__panel {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  background: var(--panel-2);
  border: 3px solid var(--lime);
  border-radius: var(--r);
  box-shadow: 12px 12px 0 0 var(--lime-deep);
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
  animation: modal-in 0.34s var(--ease-out) both;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.modal__close {
  position: absolute;
  top: 6px; right: 6px;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--r);
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.modal__close:hover { color: var(--lime); background: rgba(255,255,255,0.05); }

.modal__logo { height: 96px; width: auto; margin: 0 auto 1.15rem; }

.modal__panel h2 {
  font-size: clamp(1.85rem, 6vw, 2.5rem);
  margin-bottom: 0.75rem;
}
.modal__panel p {
  font-size: 1.0625rem;
  color: #d2d2d2;
  margin-bottom: 1.6rem;
}

.modal__actions { display: grid; gap: 0.75rem; }
.modal__actions .btn { width: 100%; }
.modal__actions .btn:hover { transform: none; box-shadow: 4px 4px 0 0 var(--lime-deep); }
.modal__actions .btn--ghost:hover { box-shadow: 4px 4px 0 0 rgba(255,255,255,0.28); }

.modal__meta {
  margin-top: 1.35rem;
  font-family: var(--condensed);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.modal__later {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--condensed);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-dim);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.modal__later:hover { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .modal__panel { animation: none; }
}


/* Signed note from the owner — the trust signal a new business leans on
   hardest, so it is set apart from the surrounding body copy. */
.signature {
  margin: 2rem 0 0;
  padding: 1.5rem 1.7rem;
  border: 2px solid var(--line-strong);
  border-left: 5px solid var(--lime);
  border-radius: var(--r);
  background: var(--panel-2);
}
.signature blockquote { margin: 0; }
.signature p {
  font-size: 1.09rem;
  line-height: 1.72;
  color: #e4e4e4;
  margin-bottom: 1rem;
}
.signature figcaption {
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--lime);
}

/* Owner portrait alongside the signature quote. If the photo file is missing
   the img removes itself and the modifier class with it, so the block falls
   back to the plain quote rather than showing a broken image. */
.signature--portrait {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 1.5rem;
  align-items: center;
}
.signature__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 50%;
  border: 3px solid var(--lime);
  background: var(--panel);
}
.signature__body { min-width: 0; }
.signature--portrait p { margin-bottom: 0.8rem; }

/* ---- Business hours (contact section) -------------------------------- */
.hours {
  margin-top: 1.6rem;
  padding: 1.6rem 1.8rem;
  border: 2px solid var(--line-strong);
  border-left: 5px solid var(--lime);
  border-radius: var(--r);
  background: var(--panel-2);
}
.hours__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--condensed);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 1rem;
  color: var(--lime);
  margin-bottom: 1.1rem;
}
.hours__title svg { width: 20px; height: 20px; flex: none; }
.hours__list { margin: 0; }
.hours__list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--line);
}
.hours__list > div:last-child { border-bottom: 0; }
.hours__list dt {
  font-family: var(--condensed);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.92rem;
  color: #e8e8e8;
}
.hours__list dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: #cfcfcf;
  white-space: nowrap;
}
.hours__list dd.is-closed { color: var(--muted, #8a8a8a); }
.hours__note {
  margin: 1.05rem 0 0;
  font-size: 0.93rem;
  line-height: 1.62;
  color: #a9a9a9;
}

/* ---- Service area map ------------------------------------------------
   Third-party embed, so it is lazy-loaded: it sits far down the page and
   must not cost anything on first paint. */
.map { margin: 1.6rem 0 0; }
.map__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 2px solid var(--line-strong);
  border-left: 5px solid var(--lime);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--panel-2);
}
.map__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.map__caption {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 0.95rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #b4b4b4;
}
.map__caption b { color: #e8e8e8; }
.map__pin { flex: none; color: var(--lime); line-height: 0; margin-top: 2px; }
.map__pin svg { width: 18px; height: 18px; }

@media (max-width: 560px) { .map__frame { aspect-ratio: 4 / 3; } }

@media (max-width: 460px) {
  .hours { padding: 1.3rem 1.25rem; }
  .hours__list > div { flex-direction: column; gap: 0.18rem; }
  .hours__list dd { white-space: normal; }
}

@media (max-width: 560px) {
  .signature--portrait { grid-template-columns: 1fr; justify-items: start; gap: 1.15rem; }
  .signature__photo { width: 118px; }
}

.mobile-menu .m-contact a { color: var(--lime); font-weight: 700; letter-spacing: 0.12em; }
.mobile-menu .m-contact a:hover { text-decoration: underline; text-underline-offset: 4px; }


/* --------------------------------------------------------------------------
   25. Quote calculator
   -------------------------------------------------------------------------- */
.calc {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

.calc__form {
  display: grid;
  gap: clamp(1.4rem, 2.4vw, 1.9rem);
  border: 2px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--panel-2);
  padding: clamp(1.4rem, 3vw, 2.1rem);
}
.calc__group { border: 0; padding: 0; margin: 0; }
.calc__group legend {
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 0.9rem;
  padding: 0;
}
.calc .choice-row { gap: 0.5rem; }
.calc .choice span { min-width: 4.2rem; padding-inline: 0.85rem; }

.calc__extra { margin-top: 0.9rem; display: none; }
.calc__extra.is-shown { display: block; }
.calc__extra label {
  display: block;
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #e4e4e4;
  margin-bottom: 0.45rem;
}
.calc__extra input { max-width: 9rem; }

/* result panel */
.calc__result {
  border: 3px solid var(--lime);
  border-radius: var(--r);
  background: var(--panel-2);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  box-shadow: 10px 10px 0 0 var(--lime-deep);
}
.calc__label {
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 0.5rem;
}
.calc__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.4rem;
}
.calc__amount {
  font-family: var(--display);
  font-size: clamp(3.4rem, 8vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.015em;
  color: var(--white);
}
.calc__unit {
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.calc__summary { display: grid; gap: 0; margin-bottom: 1.5rem; }
.calc__summary > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--line-strong);
}
.calc__summary > div:last-child { border-bottom: 0; }
.calc__summary dt {
  font-family: var(--condensed);
  font-weight: 600;
  font-size: 0.97rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.calc__summary dd {
  margin: 0;
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 1.09rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  text-align: right;
}
.calc__summary > div:last-child dd { color: var(--lime); font-size: 1.35rem; }

.calc__note {
  margin-top: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted-dim);
}

/* Estimate carried across from the homepage calculator */
.calc-carry {
  border: 3px solid var(--lime);
  border-radius: var(--r);
  background: var(--panel-2);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 8px 8px 0 0 var(--lime-deep);
}
.calc-carry__price {
  font-family: var(--display);
  font-size: clamp(2.6rem, 7vw, 3.6rem);
  line-height: 1;
  color: var(--white);
  margin-bottom: 0.75rem;
}
.calc-carry__note { font-size: 0.9rem; line-height: 1.6; color: var(--muted-dim); }

/* Monthly equivalent under the per-visit price — recurring value made plain */
.calc__monthly {
  font-family: var(--condensed);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime);
  margin: -0.9rem 0 1.4rem;
}
.calc__monthly.is-hidden { display: none; }

/* One-time initial fee, called out under the headline price */
.calc__fee {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
  border-left: 3px solid var(--lime);
  padding-left: 0.85rem;
  margin: -0.5rem 0 1.4rem;
}
.calc__fee.is-hidden { display: none; }

/* --------------------------------------------------------------------------
   26. Back to top
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 95;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 0;
  background: var(--lime);
  color: var(--lime-ink);
  border: 2px solid var(--lime);
  border-radius: var(--r);
  box-shadow: 5px 5px 0 0 var(--lime-deep);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease),
              visibility 0.28s, box-shadow 0.18s var(--ease),
              background-color 0.18s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

.to-top:hover {
  background: var(--lime-bright);
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 0 var(--lime-deep);
}
.to-top:active { transform: none; box-shadow: 3px 3px 0 0 var(--lime-deep); }

.to-top svg { width: 22px; height: 22px; display: block; }
.to-top span {
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}

/* Sit above the sticky booking bar on the pages that carry one */
@media (max-width: 860px) {
  .to-top { width: 50px; height: 50px; right: 0.85rem; }
  .to-top svg { width: 20px; height: 20px; }
  .to-top span { font-size: 0.55rem; }
  body.has-sticky-cta .to-top {
    bottom: calc(86px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .to-top { transform: none; }
  .to-top.is-visible { transform: none; }
  .to-top:hover { transform: none; }
}

/* ---- Paw cursor ------------------------------------------------------
   Desktop only. Gated behind a fine pointer so touch devices — which have
   no cursor at all — are untouched. Every rule keeps a real keyword
   fallback after the image, so if the SVG cursor is refused the pointer
   still behaves correctly. Text fields deliberately keep the I-beam:
   losing it makes forms feel broken. */
@media (hover: hover) and (pointer: fine) {
  body,
  .section, .container, main, footer, header { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2728%27%20viewBox%3D%27-6%20-6%20138%20128%27%3E%3Cg%20fill%3D%27%2361cc05%27%20stroke%3D%27%230a0a0a%27%20stroke-width%3D%278%27%20stroke-linejoin%3D%27round%27%20paint-order%3D%27stroke%27%3E%3Cellipse%20cx%3D%2726%27%20cy%3D%2744%27%20rx%3D%2713%27%20ry%3D%2717%27%20transform%3D%27rotate%28-20%2026%2044%29%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2729%27%20rx%3D%2713.5%27%20ry%3D%2718%27%2F%3E%3Cellipse%20cx%3D%2776%27%20cy%3D%2729%27%20rx%3D%2713.5%27%20ry%3D%2718%27%2F%3E%3Cellipse%20cx%3D%27100%27%20cy%3D%2744%27%20rx%3D%2713%27%20ry%3D%2717%27%20transform%3D%27rotate%2820%20100%2044%29%27%2F%3E%3Cpath%20d%3D%27M63%2060c19%200%2034%2013%2034%2027%200%2011-9%2019-21%2019-7%200-11-3-13-3s-6%203-13%203c-12%200-21-8-21-19%200-14%2015-27%2034-27z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 15 14, auto; }

  a, button, summary, label, [role="button"],
  .btn, .faq-q, .choice, .contact-card, .to-top,
  input[type="radio"], input[type="checkbox"], select {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2734%27%20height%3D%2732%27%20viewBox%3D%27-6%20-6%20138%20128%27%3E%3Cg%20fill%3D%27%237ce80a%27%20stroke%3D%27%230a0a0a%27%20stroke-width%3D%278%27%20stroke-linejoin%3D%27round%27%20paint-order%3D%27stroke%27%3E%3Cellipse%20cx%3D%2726%27%20cy%3D%2744%27%20rx%3D%2713%27%20ry%3D%2717%27%20transform%3D%27rotate%28-20%2026%2044%29%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2729%27%20rx%3D%2713.5%27%20ry%3D%2718%27%2F%3E%3Cellipse%20cx%3D%2776%27%20cy%3D%2729%27%20rx%3D%2713.5%27%20ry%3D%2718%27%2F%3E%3Cellipse%20cx%3D%27100%27%20cy%3D%2744%27%20rx%3D%2713%27%20ry%3D%2717%27%20transform%3D%27rotate%2820%20100%2044%29%27%2F%3E%3Cpath%20d%3D%27M63%2060c19%200%2034%2013%2034%2027%200%2011-9%2019-21%2019-7%200-11-3-13-3s-6%203-13%203c-12%200-21-8-21-19%200-14%2015-27%2034-27z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 17 16, pointer;
  }

  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], textarea {
    cursor: text;
  }

  :disabled, [aria-disabled="true"] { cursor: not-allowed; }
}

/* ---- Paw tap feedback (touch devices) -------------------------------- */
.paw-tap {
  position: fixed;
  width: 42px; height: 39px;
  margin: -20px 0 0 -21px;
  pointer-events: none;
  z-index: 9999;
  background: var(--lime);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2728%27%20viewBox%3D%27-6%20-6%20138%20128%27%3E%3Cg%20fill%3D%27%2361cc05%27%20stroke%3D%27%230a0a0a%27%20stroke-width%3D%278%27%20stroke-linejoin%3D%27round%27%20paint-order%3D%27stroke%27%3E%3Cellipse%20cx%3D%2726%27%20cy%3D%2744%27%20rx%3D%2713%27%20ry%3D%2717%27%20transform%3D%27rotate%28-20%2026%2044%29%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2729%27%20rx%3D%2713.5%27%20ry%3D%2718%27%2F%3E%3Cellipse%20cx%3D%2776%27%20cy%3D%2729%27%20rx%3D%2713.5%27%20ry%3D%2718%27%2F%3E%3Cellipse%20cx%3D%27100%27%20cy%3D%2744%27%20rx%3D%2713%27%20ry%3D%2717%27%20transform%3D%27rotate%2820%20100%2044%29%27%2F%3E%3Cpath%20d%3D%27M63%2060c19%200%2034%2013%2034%2027%200%2011-9%2019-21%2019-7%200-11-3-13-3s-6%203-13%203c-12%200-21-8-21-19%200-14%2015-27%2034-27z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2728%27%20viewBox%3D%27-6%20-6%20138%20128%27%3E%3Cg%20fill%3D%27%2361cc05%27%20stroke%3D%27%230a0a0a%27%20stroke-width%3D%278%27%20stroke-linejoin%3D%27round%27%20paint-order%3D%27stroke%27%3E%3Cellipse%20cx%3D%2726%27%20cy%3D%2744%27%20rx%3D%2713%27%20ry%3D%2717%27%20transform%3D%27rotate%28-20%2026%2044%29%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2729%27%20rx%3D%2713.5%27%20ry%3D%2718%27%2F%3E%3Cellipse%20cx%3D%2776%27%20cy%3D%2729%27%20rx%3D%2713.5%27%20ry%3D%2718%27%2F%3E%3Cellipse%20cx%3D%27100%27%20cy%3D%2744%27%20rx%3D%2713%27%20ry%3D%2717%27%20transform%3D%27rotate%2820%20100%2044%29%27%2F%3E%3Cpath%20d%3D%27M63%2060c19%200%2034%2013%2034%2027%200%2011-9%2019-21%2019-7%200-11-3-13-3s-6%203-13%203c-12%200-21-8-21-19%200-14%2015-27%2034-27z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
  opacity: 0.55;
  animation: paw-fade 520ms ease-out forwards;
}
@keyframes paw-fade {
  from { opacity: 0.55; transform: scale(0.55); }
  to   { opacity: 0;    transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) { .paw-tap { display: none; } }