/* Self-hosted variable fonts (latin). Replaces the Google Fonts request: one fewer origin, no render-blocking CSS hop. */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/fredoka-latin-wght.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("/assets/fonts/nunito-latin-wght.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ============ Fetch Marketing: homepage mockup ============ */
:root {
  --yellow: #FFE14D; --yellow-deep: #F6C90E;
  --ink: #14110F; --ink-soft: #3a3530;
  --cream: #FFF8E7; --paper: #fff;
  --red: #F2483C; --cobalt: #1D4ED8; --mint: #9BE3AE; --pink: #FF3D8B;
  --lilac: #C9B2FF; --orange: #FF9F1C; --teal: #2EC4B6;
  --r-sm: 14px; --r-md: 22px; --r-lg: 34px;
  --shadow-1: 0 1px 2px rgba(20,17,15,.06), 0 8px 22px rgba(20,17,15,.10);
  --shadow-2: 0 2px 4px rgba(20,17,15,.08), 0 24px 60px rgba(20,17,15,.20);
  --ease: cubic-bezier(.22,1,.36,1);
  --display: "Fredoka", "Nunito", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
  --wrap: 1240px;
}
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--cream); line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,p { margin: 0; }
ul,ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.wrap.narrow { width: min(820px, 100% - 48px); }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; transition: top .2s; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 8px; }
.ic { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.xl { width: 44px; height: 44px; }
.paw { width: 1em; height: 1em; fill: currentColor; }

/* ---------- Type ---------- */
h2 { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 5.6vw, 5rem); line-height: .98; letter-spacing: -.02em; }
.eyebrow { font-family: var(--display); font-weight: 600; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; display: inline-block; }

.lede { font-size: clamp(1.05rem, 1.5vw, 1.3rem); max-width: 34em; margin-top: 18px; color: var(--ink-soft); }
.scribble { position: relative; white-space: nowrap; z-index: 0; }
.scribble::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -.12em; height: .3em; z-index: -1; background: var(--red);
  clip-path: polygon(0 55%, 8% 20%, 20% 60%, 35% 25%, 50% 62%, 66% 22%, 82% 58%, 100% 30%, 100% 75%, 84% 100%, 66% 62%, 50% 100%, 34% 66%, 20% 100%, 8% 66%, 0 90%);
  transform-origin: left; transform: scaleX(0); transition: transform .8s var(--ease) .2s; }
.in .scribble::after, .scribble.in::after, [data-reveal].in .scribble::after { transform: scaleX(1); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--display); font-weight: 600; font-size: 1.1rem; box-shadow: var(--shadow-1); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-2); }
.btn:hover .ic { transform: translateX(4px); }
.btn .ic { transition: transform .3s var(--ease); }
.btn-big { padding: 20px 36px; font-size: 1.3rem; }
.btn.dark { background: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }

/* ---------- Ball cursor and trail ---------- */
.ball { position: fixed; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; z-index: 300; pointer-events: none; background: radial-gradient(circle at 35% 30%, #e9ff6a, #b9e22a 60%, #8fb71d); box-shadow: 0 6px 14px rgba(20,17,15,.28); transform: translate(-100px,-100px); display: none; place-items: center; transition: width .25s var(--ease), height .25s var(--ease); }
.ball::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); border-left-color: transparent; border-right-color: transparent; transform: rotate(35deg); }
.ball span { font-family: var(--display); font-weight: 700; font-size: 0; color: var(--ink); position: relative; transition: font-size .2s; }
.ball.hot { width: 64px; height: 64px; }
.ball.hot span { font-size: 15px; }
@media (hover: hover) and (pointer: fine) { .ball { display: grid; } body { cursor: none; } a, button, summary { cursor: none; } }
.trail { display: none !important; position: fixed; right: 14px; top: 90px; bottom: 90px; width: 26px; z-index: 40; pointer-events: none; }
.trail i { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; border-left: 3px dotted rgba(20,17,15,.35); }
.trail-paw { position: absolute; left: 0; top: 0; width: 26px; height: 26px; fill: var(--ink); transform: translateY(0) rotate(180deg); }
@media (max-width: 820px) { .trail { display: none; } }

/* ---------- THE BONE ---------- */
.bone-wrap { position: fixed; z-index: 100; top: 18px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
.bone { position: relative; pointer-events: auto; display: flex; align-items: center; gap: 26px; height: 56px; padding: 0 44px; background: #fff; border-radius: 999px;
  filter: drop-shadow(0 8px 14px rgba(20,17,15,.18)) drop-shadow(0 2px 2px rgba(20,17,15,.08));
  animation: boneIn .9s var(--ease) both .15s; transition: transform .4s var(--ease); }
.bone:hover { transform: rotate(-1deg) scale(1.01); }
.bone .k { position: absolute; width: 38px; height: 38px; background: #fff; border-radius: 50%; }
.bone .tl { left: -14px; top: -11px; } .bone .bl { left: -14px; bottom: -11px; }
.bone .tr { right: -14px; top: -11px; } .bone .br { right: -14px; bottom: -11px; }
@keyframes boneIn { from { opacity: 0; transform: translateY(-40px) rotate(-6deg) scale(.9); } to { opacity: 1; transform: none; } }
.logo { font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 6px; position: relative; }
.logo .paw { width: 22px; height: 22px; transition: transform .4s var(--ease); }
.logo:hover .paw { transform: rotate(-18deg) scale(1.15); }
.links { display: flex; gap: 4px; }
.links a { font-weight: 800; font-size: .95rem; padding: 8px 14px; border-radius: 999px; transition: background .25s, color .25s; }
.links a:hover { background: var(--cream); }
.links a.on { background: var(--yellow); }
.bone-cta { background: var(--ink); color: #fff; font-family: var(--display); font-weight: 600; padding: 9px 20px; border-radius: 999px; font-size: .98rem; transition: transform .3s var(--ease); }
.bone-cta:hover { transform: scale(1.06) rotate(-2deg); }
.menu-btn { display: none; background: var(--ink); color: #fff; border: 0; border-radius: 999px; padding: 9px 18px; font-family: var(--display); font-weight: 600; }
@media (max-width: 820px) {
  .bone { gap: 14px; padding: 0 30px; height: 52px; }
  .bone .k { width: 34px; height: 34px; }
  .links, .bone-cta { display: none; }
  .menu-btn { display: block; }
}
.menu { position: fixed; inset: 0; z-index: 90; background: var(--yellow); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.menu.open { opacity: 1; visibility: visible; }
.menu ul { display: grid; gap: 10px; text-align: center; }
.menu a { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 9vw, 4rem); display: inline-block; transform: translateY(20px); opacity: 0; transition: transform .5s var(--ease), opacity .5s; }
.menu.open a { transform: none; opacity: 1; }
.menu.open li:nth-child(2) a { transition-delay: .05s } .menu.open li:nth-child(3) a { transition-delay: .1s } .menu.open li:nth-child(4) a { transition-delay: .15s } .menu.open li:nth-child(5) a { transition-delay: .2s }
.menu-cta { display: inline-flex !important; align-items: center; gap: 10px; background: var(--ink); color: #fff; padding: 12px 28px; border-radius: 999px; font-size: 1.6rem !important; margin-top: 12px; }

/* ---------- HERO ---------- */
.hero { position: relative; height: 520vh; background: var(--yellow); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--yellow); }
.doodles .d { position: absolute; fill: var(--ink); opacity: .9; }
.doodles .d1 { width: 70px; left: 7%; top: 28%; transform: rotate(-20deg); }
.doodles .d2 { width: 48px; right: 9%; top: 58%; transform: rotate(18deg); fill: var(--red); }
.doodles .d3 { width: 56px; left: 14%; bottom: 14%; transform: rotate(10deg); }
.doodles .star { font-style: normal; font-size: 38px; color: var(--ink); }
.doodles .s1 { left: 22%; top: 18%; color: var(--red); } .doodles .s2 { right: 18%; top: 24%; } .doodles .s3 { right: 28%; bottom: 20%; color: var(--red); }
.doodles .squig { width: 130px; right: 8%; top: 40%; fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round; }
.headline { position: absolute; left: 0; right: 0; top: 11vh; z-index: 1; font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: .86; letter-spacing: -.035em; pointer-events: none; text-align: center; }
.ln { display: block; font-size: clamp(2.8rem, min(8.6vw, 17vh), 11rem); padding: 0 2vw; }
.ln em { font-style: normal; color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--ink); }
.dogwrap { position: absolute; z-index: 3; left: 50%; bottom: -13vh; width: min(70vh, 92vw); transform: translateX(-50%); }
.dog { position: relative; aspect-ratio: 1; } /* white sticker outline and soft shadow are baked into the WebPs (12% padding each side) */
.pose { position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; max-width: none; object-fit: contain; }
.p-tilt, .p-shades { opacity: 0; }
.badge { position: absolute; right: 2%; top: 4%; width: clamp(84px, 10vw, 138px); aspect-ratio: 1; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; text-align: center; font-family: var(--display); font-weight: 700; line-height: .95; font-size: clamp(1rem, 1.7vw, 1.6rem); box-shadow: 0 0 0 5px #fff, var(--shadow-2); animation: wob 4s ease-in-out infinite; }
@keyframes wob { 0%,100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(10deg) scale(1.06); } }
.ring { position: absolute; z-index: 6; right: clamp(16px, 7vw, 130px); top: 50vh; background: #fff; border-radius: var(--r-md); padding: 16px 20px; text-align: center; box-shadow: var(--shadow-2); display: grid; gap: 2px; justify-items: center; animation: shake 1.2s infinite; }
.ring .ic { width: 38px; height: 38px; color: var(--red); }
.ring b { font-family: var(--display); font-size: 1.3rem; } .ring small { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .68rem; color: var(--ink-soft); }
@keyframes shake { 0%,100% { transform: rotate(0) } 10% { transform: rotate(-8deg) } 20% { transform: rotate(8deg) } 30% { transform: rotate(-6deg) } 40% { transform: rotate(6deg) } 50% { transform: rotate(0) } }
.bubble { position: absolute; z-index: 7; max-width: min(340px, 78vw); padding: 16px 20px 18px; border-radius: 26px; font-family: var(--display); font-weight: 600; font-size: clamp(1.05rem, 1.7vw, 1.5rem); line-height: 1.15; box-shadow: var(--shadow-2); opacity: 0; transform: scale(.6); transform-origin: bottom left; }
.bubble b { display: block; font-family: var(--body); font-weight: 800; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin-bottom: 4px; }
.bubble::after { content: ""; position: absolute; bottom: -14px; width: 28px; height: 28px; background: inherit; transform: rotate(45deg); border-radius: 0 0 8px 0; z-index: -1; }
.b-dog { background: var(--ink); color: #fff; } .b-dog::after { left: 36px; }
.b-you { background: #fff; color: var(--ink); transform-origin: bottom right; } .b-you::after { right: 36px; }
.b1 { left: clamp(14px, 6vw, 110px); top: 30vh; }
.b2 { right: clamp(14px, 6vw, 110px); top: 26vh; }
.b3 { left: clamp(14px, 6vw, 110px); top: 24vh; }
.hero-cta { position: absolute; z-index: 8; left: 0; right: 0; bottom: 6vh; display: grid; justify-items: center; gap: 12px; opacity: 0; pointer-events: none; }
.hero-cta.on { pointer-events: auto; }
.hero-cta .link { font-weight: 800; background: rgba(255,255,255,.8); padding: 6px 14px; border-radius: 999px; backdrop-filter: blur(6px); }
.stamp-fetched { position: absolute; z-index: 8; right: clamp(16px, 7vw, 140px); bottom: 24vh; font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 4vw, 3.4rem); color: var(--red); border: 6px solid var(--red); padding: 4px 18px; border-radius: 12px; transform: rotate(-9deg) scale(2.2); opacity: 0; letter-spacing: .03em; background: rgba(255,255,255,.55); }
.hint { position: absolute; z-index: 8; left: 50%; bottom: 3vh; transform: translateX(-50%); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; font-size: .72rem; display: grid; gap: 8px; justify-items: center; }
.hint i { width: 3px; height: 38px; background: var(--ink); border-radius: 3px; transform-origin: top; animation: drip 1.6s var(--ease) infinite; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 820px) {
  .headline { top: 13vh; } .ln { font-size: clamp(2.6rem, 15.5vw, 6rem); line-height: .88; }
  .dogwrap { width: 118vw; bottom: -2vh; }
  .ring { top: 44vh; right: 10px; transform: scale(.8); } .b1 { top: 24vh; } .b2 { top: 20vh; } .b3 { top: 18vh; }
  .bubble { font-size: 1.05rem; }
}

/* ---------- MARQUEE ---------- */
.marquee { background: var(--ink); color: var(--cream); overflow: hidden; padding: 18px 0; position: relative; z-index: 2; }
.marquee .track { display: flex; align-items: center; gap: 36px; width: max-content; font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3.6vw, 3rem); white-space: nowrap; will-change: transform; }
.marquee svg { width: 34px; height: 34px; fill: var(--yellow); flex: none; }

/* ---------- SERVICES WATERFALL ---------- */
.falls { position: relative; height: 1180vh; background: var(--cobalt); color: #fff; }
.falls-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; align-items: center; gap: 24px; padding: 90px clamp(20px, 5vw, 80px) 40px; }
.water { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.water i { position: absolute; top: -60%; width: 3px; height: 60%; background: linear-gradient(to bottom, transparent, rgba(255,255,255,.55), transparent); animation: fall 3.4s linear infinite; }
.water i:nth-child(1) { left: 8%; animation-delay: 0s } .water i:nth-child(2) { left: 21%; animation-delay: .9s; height: 40% } .water i:nth-child(3) { left: 36%; animation-delay: 1.8s } .water i:nth-child(4) { left: 52%; animation-delay: .4s; height: 50% } .water i:nth-child(5) { left: 66%; animation-delay: 2.2s } .water i:nth-child(6) { left: 79%; animation-delay: 1.3s; height: 45% } .water i:nth-child(7) { left: 92%; animation-delay: 2.7s }
@keyframes fall { to { transform: translateY(260%); } }
.falls-left { position: relative; z-index: 2; align-self: center; }
.falls-left h2 { color: #fff; }
.falls-left .lede { color: rgba(255,255,255,.82); }
.falls-left .eyebrow { color: var(--yellow); }
.falls-left .scribble::after { background: var(--yellow); }
.counter { margin-top: 26px; font-family: var(--display); font-weight: 600; font-size: 1.4rem; color: rgba(255,255,255,.7); } .counter b { font-size: 3.4rem; color: var(--yellow); letter-spacing: -.03em; }
.falls-dog { position: absolute; left: -2vw; bottom: -40px; width: clamp(140px, 17vw, 240px); display: none; }
.falls-right { position: relative; height: min(72vh, 600px); z-index: 2; }
.card { position: absolute; left: 50%; top: 50%; width: min(520px, 100%); min-height: 330px; margin-left: calc(min(520px, 100%) / -2); margin-top: -165px; border-radius: var(--r-lg); padding: 30px 32px; color: var(--ink); box-shadow: var(--shadow-2); display: grid; align-content: space-between; gap: 18px; }
.card .top { display: flex; align-items: center; justify-content: space-between; }
.card .no { font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: .08em; }
.card .ico { width: 58px; height: 58px; border-radius: 18px; background: rgba(20,17,15,.1); display: grid; place-items: center; } .card .ico .ic { width: 30px; height: 30px; }
.card h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: .98; letter-spacing: -.02em; }
.card p { font-weight: 600; font-size: 1.05rem; opacity: .85; margin-top: 8px; }
.card .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.card .chips span { font-weight: 800; font-size: .8rem; padding: 6px 12px; border-radius: 999px; background: rgba(20,17,15,.1); }
.card .ask { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; margin-top: 4px; } .card .ask .ic { transition: transform .3s var(--ease); } .card:hover .ask .ic { transform: translateX(5px); }
.c-yellow { background: var(--yellow); } .c-mint { background: var(--mint); } .c-pink { background: var(--pink); color: #fff; } .c-cream { background: var(--cream); } .c-red { background: var(--red); color: #fff; }
.c-orange { background: var(--orange); } .c-lilac { background: var(--lilac); } .c-ink { background: var(--ink); color: var(--yellow); } .c-teal { background: var(--teal); } .c-white { background: #fff; }
.c-pink .chips span, .c-red .chips span, .c-ink .chips span { background: rgba(255,255,255,.22); } .c-pink .ico, .c-red .ico, .c-ink .ico { background: rgba(255,255,255,.2); }
.ns-list { padding: 20px; display: grid; gap: 6px; }
@media (max-width: 820px) {
  .falls { height: 1000vh; }
  .falls-stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 84px 18px 20px; align-items: start; gap: 10px; }
  .falls-left h2 { font-size: clamp(2rem, 9vw, 2.8rem); } .falls-left .lede { display: none; } .counter { margin-top: 10px; font-size: 1rem; } .counter b { font-size: 2rem; }
  .falls-right { height: 100%; min-height: 380px; } .card { width: 100%; margin-left: 0; left: 0; min-height: 300px; padding: 22px; margin-top: -150px; }
}

/* ---------- MOT ---------- */
.mot { background: var(--yellow); padding: clamp(80px, 12vw, 160px) 0; position: relative; overflow: hidden; }
.mot-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.mot .eyebrow { color: var(--ink); }
.steps { margin: 30px 0 34px; display: grid; gap: 14px; counter-reset: s; }
.steps li { display: flex; gap: 16px; align-items: center; background: #fff; border-radius: var(--r-md); padding: 14px 18px; box-shadow: var(--shadow-1); transition: transform .4s var(--ease); }
.steps li:hover { transform: translateX(8px) rotate(-.6deg); }
.steps b { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--yellow); display: grid; place-items: center; font-family: var(--display); font-size: 1.3rem; flex: none; }
.steps span { font-family: var(--display); font-weight: 600; font-size: 1.2rem; } .steps small { display: block; font-family: var(--body); font-weight: 600; font-size: .9rem; color: var(--ink-soft); }
.cert-wrap { position: relative; perspective: 900px; }
.cert { background: #fffdf5; border-radius: 22px; padding: 28px 28px 34px; box-shadow: var(--shadow-2); position: relative; border: 3px dashed rgba(20,17,15,.25); transform: rotate(2deg); transition: transform .25s ease-out; transform-style: preserve-3d; }
.cert header { display: flex; align-items: center; justify-content: space-between; border-bottom: 3px solid var(--ink); padding-bottom: 12px; } .cert header span { font-weight: 800; letter-spacing: .14em; font-size: .72rem; text-transform: uppercase; } .cert header b { font-family: var(--display); font-size: 1.5rem; } .cert header .paw { width: 28px; height: 28px; }
.who { margin: 16px 0 10px; font-weight: 700; } .who u { text-decoration-style: wavy; text-decoration-color: var(--red); }
.checks li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dotted rgba(20,17,15,.3); font-family: var(--display); font-weight: 600; font-size: 1.15rem; }
.tick { width: 28px; height: 28px; padding: 4px; border-radius: 8px; background: var(--mint); fill: none; stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 28; stroke-dashoffset: 28; transition: stroke-dashoffset .6s var(--ease); }
.checks li.on .tick { stroke-dashoffset: 0; }
.checks li:nth-child(2) .tick, .checks li:nth-child(4) .tick { background: #ffd0cc; }
.score { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; } .score span { display: flex; gap: 4px; } .score svg { width: 26px; height: 26px; fill: var(--ink); } .score svg.off { fill: rgba(20,17,15,.18); }
.pass { position: absolute; right: -14px; bottom: 30px; font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: .95; color: var(--red); border: 5px solid var(--red); border-radius: 12px; padding: 8px 14px; text-align: center; transform: rotate(-12deg) scale(2); opacity: 0; transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .2s; background: rgba(255,255,255,.7); }
.pass.on { transform: rotate(-12deg) scale(1); opacity: 1; }
.cert-dog { position: absolute; width: 57.04%; max-width: none; right: -13.52%; top: -16%; margin-top: -5.52%; z-index: 2; transform: rotate(8deg); }
@media (max-width: 900px) { .mot-grid { grid-template-columns: 1fr; } .cert-dog { right: -6.5%; top: -12%; margin-top: -4.5%; width: 47.12%; } }

/* ---------- PATHS ---------- */
.paths { background: var(--cream); padding: clamp(80px, 12vw, 160px) 0; }
.paths h2 { margin-bottom: 44px; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.tile { position: relative; border-radius: var(--r-lg); padding: 32px; min-height: 300px; display: grid; align-content: space-between; gap: 18px; box-shadow: var(--shadow-1); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease); transform-style: preserve-3d; }
.tile:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: var(--shadow-2); }
.tile .num { font-family: var(--display); font-weight: 700; opacity: .5; }
.tile h3 { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 4vw, 3.4rem); line-height: .95; letter-spacing: -.02em; }
.tile p { font-weight: 600; font-size: 1.1rem; max-width: 24em; margin-top: 8px; }
.tile .go { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 1.15rem; } .tile .go .ic { transition: transform .3s var(--ease); } .tile:hover .go .ic { transform: translateX(6px); }
.tile .ic.xl { position: absolute; right: 26px; top: 26px; width: 74px; height: 74px; opacity: .25; transition: transform .6s var(--ease); } .tile:hover .ic.xl { transform: rotate(14deg) scale(1.2); opacity: .45; }
.t-yellow { background: var(--yellow); } .t-mint { background: var(--mint); } .t-pink { background: var(--pink); color: #fff; } .t-cobalt { background: var(--cobalt); color: #fff; }
.go.soon { background: rgba(255,255,255,.2); padding: 6px 14px; border-radius: 999px; }
@media (max-width: 760px) { .tiles { grid-template-columns: 1fr; } .tile { min-height: 240px; } }

/* ---------- WALK ---------- */
.walk { position: relative; height: 340vh; background: #bfe8ff; }
.walk-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: linear-gradient(#8fd3ff, #d8f2ff 70%); }
.sun { position: absolute; width: 120px; height: 120px; border-radius: 50%; background: var(--yellow); right: 12%; top: 14%; box-shadow: 0 0 0 18px rgba(255,225,77,.35), 0 0 0 40px rgba(255,225,77,.18); will-change: transform; }
.cloud { position: absolute; height: 40px; width: 120px; background: #fff; border-radius: 40px; box-shadow: 40px -14px 0 -4px #fff, 76px 2px 0 -2px #fff; opacity: .95; will-change: transform; } .c1 { top: 22%; left: 8%; } .c2 { top: 12%; left: 52%; transform: scale(.7); }
.hill { position: absolute; left: -60%; width: 220%; will-change: transform; } .hill path { stroke: none; }
.h-far { bottom: 34%; height: 34vh; fill: #86d49a; } .h-mid { bottom: 22%; height: 34vh; fill: #5cc07c; } .h-near { bottom: -1px; height: 34vh; fill: #3da863; z-index: 5; }
.lake { position: absolute; left: -10%; width: 120%; bottom: 20%; height: 14vh; overflow: hidden; z-index: 2; background: #4aa8ff; } .lake svg { position: absolute; left: 0; top: -10px; width: 200%; height: 40px; fill: #4aa8ff; animation: wave 6s linear infinite; } @keyframes wave { to { transform: translateX(-50%); } }
.lake::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,.22) 22px 25px); mask-image: repeating-linear-gradient(90deg, #000 0 90px, transparent 90px 140px); -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 90px, transparent 90px 140px); animation: wave2 9s linear infinite; } @keyframes wave2 { to { -webkit-mask-position: -280px 0; mask-position: -280px 0; } }
.walk-copy { position: absolute; z-index: 8; left: clamp(20px, 6vw, 100px); top: 16vh; max-width: min(560px, 88vw); }
.walk-copy .lede { color: var(--ink); } .walk-copy .eyebrow { color: var(--ink); } .walk-copy .btn { margin-top: 22px; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s var(--ease); } .walk-copy .btn.on { opacity: 1; transform: none; }
.walker { position: absolute; z-index: 6; bottom: 8vh; left: 0; width: clamp(220px, 28vw, 420px); } .walker img { width: 124%; max-width: none; margin: -12%; }
.b4 { z-index: 9; bottom: calc(8vh + 24vw); left: 0; }
@media (max-width: 820px) { .h-near { height: 26vh; } .walker { width: 62vw; bottom: 6vh; } .b4 { bottom: calc(6vh + 52vw); } .walk-copy { top: 13vh; } }

/* ---------- FAQ ---------- */
.faq { background: var(--cream); padding: clamp(80px, 11vw, 150px) 0; }
.faq h2 { margin-bottom: 34px; }
.qa details { background: #fff; border-radius: var(--r-md); margin-bottom: 12px; box-shadow: var(--shadow-1); overflow: hidden; transition: transform .3s var(--ease); }
.qa details:hover { transform: translateX(4px); }
.qa summary { list-style: none; padding: 22px 26px; font-family: var(--display); font-weight: 600; font-size: 1.3rem; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; width: 38px; height: 38px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; font-size: 1.6rem; transition: transform .4s var(--ease), background .3s; flex: none; line-height: 1; }
.qa details[open] summary::after { transform: rotate(135deg); background: var(--pink); color: #fff; }
.qa p { padding: 0 26px 24px; font-weight: 600; font-size: 1.08rem; color: var(--ink-soft); max-width: 40em; }

/* ---------- FINALE ---------- */
.finale { min-height: calc(100vh - 120px); display: grid; align-content: center; background: var(--pink); color: #fff; text-align: center; padding: clamp(90px, 13vw, 180px) 0 clamp(70px, 9vw, 120px); overflow: hidden; position: relative; }
.bigword { display: flex; justify-content: center; gap: .02em; font-size: clamp(5rem, 25vw, 22rem); line-height: .85; letter-spacing: -.04em; color: #fff; text-shadow: 8px 8px 0 var(--ink); }
.bigword span { display: inline-block; transform: translateY(40px) rotate(8deg); opacity: 0; transition: transform .8s cubic-bezier(.34,1.56,.64,1), opacity .4s; }
.bigword.in span { transform: none; opacity: 1; }
.bigword span:nth-child(2) { transition-delay: .08s } .bigword span:nth-child(3) { transition-delay: .16s } .bigword span:nth-child(4) { transition-delay: .24s } .bigword span:nth-child(5) { transition-delay: .32s } .bigword span:nth-child(6) { transition-delay: .4s; color: var(--yellow); }
.ballfall { position: absolute; left: 12%; top: 0; width: 70px; height: 100%; pointer-events: none; } .ballfall i { position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e9ff6a, #b9e22a 60%, #8fb71d); box-shadow: 0 10px 18px rgba(20,17,15,.3); transform: translateY(-120px); }
.finale.in .ballfall i { animation: bounce 2.4s cubic-bezier(.33,0,.67,1) forwards; }
@keyframes bounce { 0% { transform: translateY(-120px); animation-timing-function: cubic-bezier(.55,0,1,.45); } 30% { transform: translateY(calc(100% + 40px)); animation-timing-function: cubic-bezier(0,.55,.45,1); } 45% { transform: translateY(calc(100% - 90px)); animation-timing-function: cubic-bezier(.55,0,1,.45); } 58% { transform: translateY(calc(100% + 40px)); animation-timing-function: cubic-bezier(0,.55,.45,1); } 70% { transform: translateY(calc(100% - 30px)); animation-timing-function: cubic-bezier(.55,0,1,.45); } 80% { transform: translateY(calc(100% + 40px)); } 100% { transform: translateY(calc(100% + 40px)); } }
.finale .lede { color: #fff; margin-inline: auto; font-family: var(--display); font-weight: 600; margin-top: 26px; }
.cta-row { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .finale .btn-ghost { color: #fff; box-shadow: inset 0 0 0 3px #fff; } .finale .btn-ghost:hover { background: #fff; color: var(--pink); }
.foot { background: var(--ink); color: var(--cream); padding: 40px 0 60px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.flogo { font-family: var(--display); font-weight: 700; font-size: 2rem; display: inline-flex; gap: 8px; align-items: center; } .flogo .paw { width: 26px; height: 26px; fill: var(--yellow); }
.foot nav { display: flex; gap: 22px; font-weight: 800; } .foot nav a:hover { color: var(--yellow); } .foot small { opacity: .6; width: 100%; }

/* ---------- Reveal and reduced motion ---------- */
[data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
.tile[data-reveal].in:hover { transform: translateY(-8px) rotate(-1deg); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .hero, .falls, .walk { height: auto; }
  .stage, .falls-stage, .walk-stage { position: relative; height: auto; min-height: 100vh; }
  .bubble, .hero-cta, .stamp-fetched { position: relative; opacity: 1 !important; transform: none !important; }
}


/* =================== v2 overrides =================== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Real ball cursor ---------- */
.ball { width: 40px; height: 40px; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 8px 8px rgba(20,17,15,.3)); transition: width .25s var(--ease), height .25s var(--ease); }
.ball::before { display: none; }
.ball.hot { width: 78px; height: 78px; }
.ball.hot { filter: drop-shadow(0 12px 12px rgba(20,17,15,.3)); }

/* ---------- Smooth cartoon bone nav ---------- */
.bone-wrap { top: 20px; }
.bone { height: 48px; padding: 0 56px 0 52px; gap: 20px; background: none; border-radius: 0; filter: drop-shadow(0 10px 14px rgba(20,17,15,.2)) drop-shadow(0 2px 2px rgba(20,17,15,.1)); }
.bone:hover { transform: rotate(-.8deg) scale(1.01); }
.bone-shape { position: absolute; left: 0; right: 0; top: -18px; bottom: -18px; filter: url(#goo); pointer-events: none; }
.bone-shape i { position: absolute; background: #fff; display: block; }
.bone-shape .body { left: 26px; right: 26px; top: 18px; bottom: 18px; border-radius: 999px; }
.bone-shape .k { width: 50px; height: 50px; border-radius: 50%; }
.bone-shape .tl { left: 0; top: 0; } .bone-shape .bl { left: 0; bottom: 0; } .bone-shape .tr { right: 0; top: 0; } .bone-shape .br { right: 0; bottom: 0; }
.bone > *:not(.bone-shape) { position: relative; z-index: 1; }
.logo { width: 84px; height: 38px; display: block; transition: width .55s var(--ease); }
.logo img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 38px; width: auto; transition: opacity .35s ease, transform .55s var(--ease); }
.logo .mk { opacity: 0; transform: translateY(-50%) scale(.5) rotate(-20deg); height: 36px; border-radius: 10px; }
.bone.compact .logo { width: 38px; }
.bone.compact .wm { opacity: 0; transform: translateY(-50%) translateX(-14px) scale(.7); }
.bone.compact .mk { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }
.logo:hover .mk { transform: translateY(-50%) scale(1.08) rotate(-8deg); }
.logo .paw { display: none; }
@media (max-width: 820px) {
  .bone { height: 44px; padding: 0 44px 0 40px; gap: 12px; }
  .bone-shape { top: -15px; bottom: -15px; } .bone-shape .body { left: 22px; right: 22px; top: 15px; bottom: 15px; } .bone-shape .k { width: 42px; height: 42px; }
  .logo { width: 76px; } .logo img { height: 34px; } .bone.compact .logo { width: 34px; }
}

/* ---------- Hero doodles from the posters ---------- */
.doodles .d { position: absolute; fill: none; opacity: 1; filter: drop-shadow(0 6px 6px rgba(20,17,15,.12)); }
.doodles .dd1 { width: clamp(60px, 7vw, 110px); left: 24%; bottom: 7%; transform: rotate(-24deg); }
.doodles .dd2 { width: clamp(50px, 6vw, 90px); right: 6%; bottom: 20%; transform: rotate(18deg); }
.doodles .dd3 { width: clamp(80px, 9vw, 140px); left: 15%; top: 64%; transform: rotate(-10deg); }
.doodles .dd4 { width: clamp(90px, 10vw, 150px); right: 26%; top: 60%; transform: rotate(14deg); }
.doodles .dd5 { width: clamp(100px, 12vw, 190px); left: 4%; bottom: 20%; transform: rotate(-4deg); }
.doodles .dd6 { width: clamp(44px, 5vw, 80px); right: 22%; bottom: 6%; transform: rotate(40deg); }
@media (max-width: 820px) { .doodles .dd3 { top: 40%; left: -2%; } .doodles .dd4 { top: 38%; right: -3%; } .doodles .dd5 { display: none; } }

/* ---------- Incoming call notification ---------- */
.ring { position: absolute; z-index: 9; left: 50%; top: 35vh; width: min(420px, calc(100vw - 28px)); margin-left: calc(min(420px, calc(100vw - 28px)) / -2); background: none; border: 0; padding: 0; cursor: pointer; display: grid; justify-items: center; gap: 10px; text-align: left; font: inherit; color: var(--ink); }
.notif { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 14px; border-radius: 26px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 2px 4px rgba(20,17,15,.08), 0 22px 50px rgba(20,17,15,.28), inset 0 0 0 1.5px rgba(255,255,255,.9); animation: notifIn .9s cubic-bezier(.34,1.56,.64,1) both .5s, buzz 2.6s ease-in-out 1.6s infinite; transform-origin: 50% 0; }
@keyframes notifIn { from { transform: translateY(-140px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes buzz { 0%, 62%, 100% { transform: translate(0,0) rotate(0); } 66% { transform: translate(-7px,0) rotate(-1.6deg); } 70% { transform: translate(7px,0) rotate(1.6deg); } 74% { transform: translate(-6px,0) rotate(-1.2deg); } 78% { transform: translate(6px,0) rotate(1.2deg); } 82% { transform: translate(-3px,0); } 86% { transform: translate(3px,0); } }
.n-icon { flex: none; width: 52px; height: 52px; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 10px rgba(20,17,15,.2); } .n-icon img { width: 100%; height: 100%; }
.n-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.n-top { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); } .n-top b { font-weight: 800; color: var(--red); } .n-top em { font-style: normal; font-weight: 700; opacity: .7; }
.n-name { font-family: var(--display); font-weight: 600; font-size: 1.12rem; line-height: 1.12; }
.n-sub { font-size: .82rem; color: var(--ink-soft); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-btns { display: flex; gap: 10px; flex: none; }
.n-btns i { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.n-btns .ic { width: 22px; height: 22px; fill: #fff; stroke: #fff; stroke-width: 1.4; }
.n-no { background: var(--red); } .n-no .ic { transform: rotate(135deg); }
.n-yes { background: #22c55e; animation: yesPulse 1.1s ease-in-out infinite; }
.n-yes::before, .n-yes::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid #22c55e; animation: ripple 1.6s ease-out infinite; } .n-yes::after { animation-delay: .8s; }
@keyframes ripple { from { transform: scale(1); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
@keyframes yesPulse { 50% { transform: scale(1.12) rotate(-12deg); } }
.ring-pill { font-family: var(--display); font-weight: 600; font-size: 1rem; background: var(--ink); color: #fff; padding: 9px 18px; border-radius: 999px; display: inline-flex; gap: 8px; align-items: center; box-shadow: var(--shadow-1); animation: notifIn .6s var(--ease) both 1.2s; } .ring-pill b { animation: nudge 1s ease-in-out infinite; display: inline-block; } @keyframes nudge { 50% { transform: translateY(4px); } }
.ring.answered .n-yes, .ring.answered .n-yes::before, .ring.answered .n-yes::after { animation: none; } .ring.answered .n-yes::before, .ring.answered .n-yes::after { display: none; }
.ring.answered .notif { animation: none; } .ring.answered .n-no { opacity: .35; } .ring.answered .n-top b { color: #16a34a; }
.hint, .hint i { display: none; }
@media (max-width: 820px) { .ring { top: 46vh; } .n-name { font-size: 1.05rem; } .n-btns i { width: 44px; height: 44px; } }

/* ---------- Eyebrows, counters, tags ---------- */
.card .chips span { border-radius: 999px; padding: 7px 13px; background: rgba(20,17,15,.12); font-weight: 800; }
.card .chips span:nth-child(even) { clip-path: polygon(3% 0, 100% 9%, 100% 94%, 0 100%); transform: rotate(1.2deg) translateY(1px); }
.card .chips span:nth-child(3n) { clip-path: polygon(0 0, 96% 6%, 100% 100%, 4% 96%); transform: rotate(-.6deg); }
.c-pink .chips span, .c-red .chips span, .c-ink .chips span { background: rgba(255,255,255,.24); }
.ico { position: relative; overflow: visible; }
.scr { position: absolute; inset: -17px; width: calc(100% + 34px); height: calc(100% + 34px); fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; opacity: .85; stroke-dasharray: 1; stroke-dashoffset: 1; }
.scr.static, .tile.in .scr { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease) .3s; }
.tile .xl-wrap { position: absolute; right: 30px; top: 28px; width: 74px; height: 74px; }
.tile .xl-wrap .ic.xl { position: static; width: 100%; height: 100%; opacity: .5; }
.tile .scr { stroke-width: 3; opacity: .55; }
.tile:hover .xl-wrap { transform: rotate(10deg) scale(1.08); } .xl-wrap { transition: transform .6s var(--ease); }

/* ---------- Bowl section ---------- */
.bowl { position: relative; height: 380vh; background: var(--cream); }
.bowl-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; padding: 90px clamp(20px, 6vw, 100px) 30px; }
.bowl-copy { position: relative; z-index: 3; }
.bowl-copy .eyebrow { color: var(--red); }
.bowl-meter { margin-top: 24px; font-family: var(--display); font-weight: 700; font-size: clamp(3.6rem, 9vw, 8rem); line-height: 1; color: var(--ink); letter-spacing: -.04em; } .bowl-meter span { display: inline-block; min-width: 1.2ch; }
.bowl-btn { margin-top: 20px; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .5s, transform .5s var(--ease); } .bowl-btn.on { opacity: 1; transform: none; pointer-events: auto; }
.bowl-art { position: relative; justify-self: center; width: min(620px, 90%); aspect-ratio: 1; }
.bowl-img { position: absolute; inset: 0; }
.bowl-img img { position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; max-width: none; object-fit: contain; }
.b-clip { position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; overflow: hidden; transform: translateY(100%); }
.b-clip .b-full { left: 0; top: 0; width: 100%; height: 100%; transform: translateY(-100%); }
/* top fade is baked into bowl-full.webp; reveal is a transform on .b-clip */
.kibbles { position: absolute; inset: -60vh 0 0 0; z-index: 4; pointer-events: none; }
.kib { position: absolute; left: 50%; top: 0; padding: 8px 14px; border-radius: 14px; background: #8a5a35; color: #fff; font-family: var(--display); font-weight: 600; font-size: clamp(.85rem, 1.4vw, 1.1rem); box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), 0 6px 8px rgba(20,17,15,.2); white-space: nowrap; }
.full-sticker { position: absolute; right: -2%; top: 8%; z-index: 5; font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 4vw, 3.4rem); color: #fff; background: var(--pink); padding: 8px 22px; border-radius: 16px; border: 5px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); transform: rotate(10deg) scale(0); opacity: 0; transition: transform .6s cubic-bezier(.34,1.56,.64,1), opacity .2s; } .full-sticker.on { transform: rotate(10deg) scale(1); opacity: 1; }
@media (max-width: 820px) { .bowl { height: 320vh; } .bowl-stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 84px 18px 20px; align-items: start; gap: 4px; } .bowl-copy .lede { display: none; } .bowl-meter { font-size: 3.2rem; margin-top: 8px; } .bowl-art { width: min(86vw, 420px); align-self: end; } }

/* ---------- Walk (real imagery) ---------- */
.walk { background: #9fd8ff; }
.walk-stage { background: #9fd8ff; }
.plate { position: absolute; left: 0; top: 0; height: 100%; width: auto; min-width: 135%; max-width: none; object-fit: cover; }
.verge { position: absolute; left: 0; bottom: -2vh; height: 30vh; width: auto; min-width: 190%; max-width: none; object-fit: cover; object-position: left bottom; z-index: 4; pointer-events: none; }
.walker { z-index: 5; bottom: 3vh; }
.b4 { bottom: calc(3vh + 24vw); }
.sky, .hill, .lake, .sun, .cloud { display: none; }
@media (max-width: 820px) { .verge { height: 24vh; } .walker { bottom: 2vh; } .b4 { bottom: calc(2vh + 54vw); } .plate { min-width: 260%; } }

/* ---------- Finale and footer ---------- */
.fin-logo { display: grid; place-items: center; }
.fin-logo img { width: min(760px, 86vw); height: auto; filter: drop-shadow(0 24px 30px rgba(20,17,15,.28)); transform: scale(.7) rotate(-6deg); opacity: 0; transition: transform 1s cubic-bezier(.34,1.56,.64,1), opacity .4s; }
.finale.in .fin-logo img { transform: none; opacity: 1; animation: logoWob 5s ease-in-out 1.2s infinite; }
@keyframes logoWob { 0%,100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
.ballfall { left: clamp(6%, 12vw, 16%); width: 110px; } .ballfall img { position: absolute; left: 0; top: 0; width: clamp(70px, 9vw, 120px); height: auto; transform: translateY(-160px); filter: drop-shadow(0 14px 14px rgba(20,17,15,.3)); }
.finale.in .ballfall img { animation: ballBounce 2.6s linear forwards; }
@keyframes ballBounce { 0% { transform: translateY(-200px); animation-timing-function: cubic-bezier(.55,0,1,.45); } 30% { transform: translateY(400px); animation-timing-function: cubic-bezier(0,.55,.45,1); } 46% { transform: translateY(240px); animation-timing-function: cubic-bezier(.55,0,1,.45); } 60% { transform: translateY(400px); animation-timing-function: cubic-bezier(0,.55,.45,1); } 72% { transform: translateY(330px); animation-timing-function: cubic-bezier(.55,0,1,.45); } 82%,100% { transform: translateY(400px); } }
.ballfall i { display: none; }
.flogo img { width: 150px; height: auto; }
@media (max-width: 820px) { .ballfall { display: none; } }
@media (prefers-reduced-motion: reduce) { .ring img, .ring-pop, .ring-pill b { animation: none !important; } .b-clip, .b-clip .b-full { transform: none !important; } .water { display: none; } .bowl, .walk { height: auto; } .kibbles { display: none; } }
@media (max-width: 820px) { .notif { gap: 10px; padding: 12px; } .n-icon { width: 46px; height: 46px; } .n-btns { gap: 8px; } .n-btns i { width: 40px; height: 40px; } .n-name { font-size: 1rem; } }


/* =================== v3 tweaks =================== */
/* calmer hero */
.doodles .d { opacity: .5; filter: none; }
.doodles .dd1 { width: clamp(46px, 5vw, 76px); left: 6%; bottom: 9%; } .doodles .dd2 { width: clamp(40px, 4.4vw, 64px); right: 7%; bottom: 14%; } .doodles .dd6 { width: clamp(34px, 3.6vw, 52px); right: 20%; bottom: 5%; }

/* thicker bone */
.bone { height: 58px; padding: 0 70px 0 62px; gap: 22px; }
.bone-shape { top: -22px; bottom: -22px; }
.bone-shape .body { left: 32px; right: 32px; top: 22px; bottom: 22px; }
.bone-shape .k { width: 62px; height: 62px; }
.logo { height: 44px; width: 96px; } .logo img { height: 44px; } .logo .mk { height: 42px; } .bone.compact .logo { width: 44px; }
.links a { font-size: 1rem; padding: 9px 15px; }
.bone-cta { padding: 11px 22px; font-size: 1.02rem; }
@media (max-width: 820px) {
  .bone { height: 50px; padding: 0 54px 0 48px; gap: 12px; }
  .bone-shape { top: -18px; bottom: -18px; } .bone-shape .body { left: 26px; right: 26px; top: 18px; bottom: 18px; } .bone-shape .k { width: 52px; height: 52px; }
  .logo { width: 86px; height: 38px; } .logo img { height: 38px; } .logo .mk { height: 36px; } .bone.compact .logo { width: 38px; }
}

/* call: no box, just the call */
.ring { top: 33vh; width: min(380px, calc(100vw - 28px)); margin-left: calc(min(380px, calc(100vw - 28px)) / -2); gap: 12px; }
.call { display: flex; align-items: center; gap: 16px; animation: notifIn .9s cubic-bezier(.34,1.56,.64,1) both .5s, buzz 2.6s ease-in-out 1.6s infinite; transform-origin: 50% 50%; }
.n-icon { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 8px 18px rgba(20,17,15,.28); }
.n-text { display: grid; gap: 2px; text-align: left; min-width: 0; } .n-text b { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1; letter-spacing: -.01em; white-space: nowrap; } .n-text em { font-style: normal; font-weight: 800; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.n-btns i { width: 52px; height: 52px; box-shadow: 0 6px 14px rgba(20,17,15,.25); }
.ring.answered .call { animation: none; } .ring.answered .n-text b { color: #15803d; }
.n-top, .n-name, .n-sub, .notif { display: none; }
@media (max-width: 820px) { .ring { top: 45vh; } .n-icon { width: 56px; height: 56px; } .n-btns i { width: 46px; height: 46px; } .n-text b { font-size: 1.45rem; } .call { gap: 12px; } }

/* right-hand progress rail */
.rail { position: fixed; z-index: 60; right: 14px; top: 50%; transform: translateY(-50%); height: min(58vh, 460px); width: 40px; }
.rail-track { position: absolute; left: 50%; top: 0; bottom: 0; width: 8px; margin-left: -4px; background: rgba(255,255,255,.7); border-radius: 99px; box-shadow: 0 6px 16px rgba(20,17,15,.18), inset 0 0 0 1.5px rgba(20,17,15,.12); overflow: hidden; }
.rail-fill { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--cobalt); border-radius: 99px; transform: translateY(-100%); }
.rail ul { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.rail li { position: absolute; left: 50%; width: 0; height: 0; }
.rail li a { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--ink); transition: transform .3s var(--ease), background .3s; }
.rail li a:hover { transform: scale(1.3); }
.rail li.on a { background: var(--yellow); transform: scale(1.25); }
.rail li a span { position: absolute; right: 30px; top: 50%; transform: translateY(-50%) translateX(8px); background: var(--ink); color: #fff; font-family: var(--display); font-weight: 600; font-size: .85rem; padding: 5px 12px; border-radius: 999px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s, transform .3s var(--ease); }
.rail li a:hover span, .rail li.on a span { opacity: 1; transform: translateY(-50%); }
.rail-ball { position: absolute; left: 50%; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; z-index: 2; filter: drop-shadow(0 6px 6px rgba(20,17,15,.3)); pointer-events: none; }
@media (max-width: 820px) { .rail { display: none; } }

/* bowl statement */
.bowl-state { margin-top: 26px; } .bs-label { font-weight: 800; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.bowl-state p { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 5.2vw, 4.6rem); line-height: 1; letter-spacing: -.03em; min-height: 2.1em; margin-top: 6px; transition: opacity .25s, transform .35s var(--ease); } .bowl-state p.swap { opacity: 0; transform: translateY(10px); }
.bowl-note { margin-top: 10px; font-weight: 700; color: var(--ink-soft); max-width: 28em; }
@media (max-width: 820px) { .bowl-state { margin-top: 10px; } .bowl-state p { font-size: 2rem; min-height: 2.1em; } .bowl-note { display: none; } }
.ring { box-shadow: none; border-radius: 0; outline-offset: 6px; }
.headline { top: 13vh; }
@media (max-width: 820px) { .headline { top: 14vh; } }


/* =================== performance layer =================== */
/* will-change only while a scene is on screen (.vis is set by IntersectionObserver in main.js) */
.hero.vis :is(.ln, .dogwrap, .bubble, .ring, .doodles .d) { will-change: transform, opacity; }
.falls.vis .card { will-change: transform, opacity; }
.bowl.vis :is(.kib, .b-clip, .b-clip .b-full, .bowl-img) { will-change: transform, opacity; }
.walk.vis :is(.plate, .verge, .walker, .b4) { will-change: transform, opacity; }
.rail-fill, .rail-ball { will-change: transform; }
/* pause looping animations while their scene is off screen */
.hero:not(.vis) :is(.call, .n-yes, .n-yes::before, .n-yes::after, .ring-pill b) { animation-play-state: paused; }
.falls:not(.vis) .water i { animation-play-state: paused; }
.finale:not(.vis) .fin-logo img { animation-play-state: paused; }
.stage, .falls-stage, .bowl-stage, .walk-stage { contain: layout paint; }
a, button, summary { touch-action: manipulation; }
@media (max-width: 820px) {
  .water i:nth-child(n+5) { display: none; }
  .hero-cta .link { backdrop-filter: none; background: rgba(255,255,255,.88); }
}
.lite .water, .lite .n-yes::before, .lite .n-yes::after { display: none; }
.lite .hero-cta .link { backdrop-filter: none; }

/* =================== mobile fixes (tap targets 44px, text at least 14px) =================== */
.logo::after { content: ""; position: absolute; inset: -8px -6px; }
@media (max-width: 820px) {
  .menu-btn { min-height: 44px; }
  .eyebrow { font-size: .875rem; }
  .card .chips span { font-size: .875rem; }
  .n-text em { font-size: .875rem; }
  .bs-label { font-size: .875rem; }
  .bubble b { font-size: .875rem; }
  .cert header span { font-size: .875rem; }
  .score { font-size: .875rem; }
  .foot nav { gap: 6px 12px; flex-wrap: wrap; }
  .foot nav a { display: inline-block; padding: 10px 8px; min-height: 44px; }
  .foot small { font-size: .875rem; }
}
@media (max-width: 900px) { .mot-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .cert { padding: 22px 18px 28px; } .cert header { flex-wrap: wrap; gap: 4px 10px; } .checks li { font-size: 1.05rem; } .pass { right: -6px; } }

/* touch targets, small text, short landscape screens */
.hero-cta .link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 20px; }
.logo::after { content: ""; position: absolute; inset: -4px -6px; }
.rail li a::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
.n-text em, .bs-label { font-size: .8rem; }
@media (max-height: 520px) and (orientation: landscape) { .headline { top: 92px; } .ln { font-size: clamp(2rem, 7vw, 5rem); } .dogwrap { width: min(60vh, 50vw); bottom: -20vh; } .ring { top: 40vh; } }

.ring { top: 38vh; }
@media (max-width: 820px) { .ring { top: 46vh; } }

/* =================== v4: bone proportions, tag-shaped boxes, call container =================== */
:root {
  --shape-a: polygon(0 3px, 100% 0, calc(100% - 2px) 100%, 3px calc(100% - 2px));
  --shape-b: polygon(3px 0, 100% 4px, 100% calc(100% - 3px), 0 100%);
  --shape-c: polygon(0 0, calc(100% - 3px) 3px, 100% 100%, 2px calc(100% - 3px));
}

/* nav bone: shaft about 46% of total height, big end knobs, smooth neck */
.bone { height: 46px; padding: 0 70px 0 74px; gap: 18px; }
.bone-shape { top: -27px; bottom: -27px; }
.bone-shape .body { left: 30px; right: 30px; top: 27px; bottom: 27px; border-radius: 0; }
.bone-shape .k { width: 60px; height: 60px; }
.logo { height: 40px; width: 88px; } .logo img { height: 40px; } .logo .mk { height: 38px; } .bone.compact .logo { width: 40px; }
.links a { font-size: .98rem; padding: 7px 14px; } .bone-cta { padding: 9px 20px; font-size: 1rem; }
@media (max-width: 820px) {
  .bone { height: 40px; padding: 0 58px 0 62px; gap: 12px; }
  .bone-shape { top: -24px; bottom: -24px; } .bone-shape .body { left: 26px; right: 26px; top: 24px; bottom: 24px; } .bone-shape .k { width: 54px; height: 54px; }
  .logo { height: 34px; width: 78px; } .logo img { height: 34px; } .logo .mk { height: 32px; } .bone.compact .logo { width: 34px; }
  .menu-btn { padding: 7px 16px; }
}

/* tag-shaped boxes (square-ish, edges slightly out of line), shadows moved to the container so they follow the shape */
.tiles, .steps, .qa, .cert-wrap { filter: drop-shadow(0 10px 14px rgba(20,17,15,.16)) drop-shadow(0 2px 2px rgba(20,17,15,.08)); }
.tile, .steps li, .cert, .qa details { border-radius: 4px; box-shadow: none; overflow: visible; clip-path: var(--shape-a); }
.tile:nth-child(even), .steps li:nth-child(even), .qa details:nth-child(even) { clip-path: var(--shape-b); }
.tile:nth-child(3n), .steps li:nth-child(3n), .qa details:nth-child(3n) { clip-path: var(--shape-c); }
.tile { padding: 32px 34px; } .tile .xl-wrap { overflow: visible; }
.cert { transform: rotate(1.6deg); border-width: 3px; } .cert .pass { right: 16px; }
.qa details { margin-bottom: 14px; } .qa summary::after { border-radius: 4px; clip-path: var(--shape-b); }
.rail li a span { border-radius: 2px; clip-path: var(--shape-a); padding: 6px 13px; }
.rail ul { filter: drop-shadow(0 3px 4px rgba(20,17,15,.28)); }

/* incoming call: one clean white container, one shadow */
.call { background: #fff; padding: 12px 18px 12px 12px; border-radius: 4px; clip-path: var(--shape-b); }
.ring { filter: drop-shadow(0 16px 20px rgba(20,17,15,.3)) drop-shadow(0 2px 3px rgba(20,17,15,.12)); box-shadow: none; background: none; border-radius: 0; padding: 0; }
.n-icon { border-radius: 12px; box-shadow: none; } .n-icon img { border-radius: 12px; }
.n-text b { color: var(--ink); } .n-text em { color: var(--ink-soft); }
.n-btns i { box-shadow: none; }

/* service cards: mini retriever icons with the scribble ring */
.card .ico { width: 78px; height: 78px; background: none !important; border-radius: 0; margin: 4px 6px 0 0; }
.card .ico img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 3px 3px rgba(20,17,15,.2)); }
.card .ico .scr { inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); stroke-width: 3.2; opacity: .8; z-index: 2; }
@media (max-width: 820px) { .card .ico { width: 66px; height: 66px; } }
.bone-wrap { top: 32px; }
.call { padding-right: 26px; }
@media (max-width: 820px) { .bone-wrap { top: 28px; } .call { padding-right: 20px; } }
@media (max-width: 820px) { .ring { top: 48vh; } }

/* v5: thicker bone shaft, roomier rounded call card, new hero copy */
.bone { height: 56px; padding: 0 72px 0 78px; gap: 18px; }
.bone-shape { top: -24px; bottom: -24px; }
.bone-shape .body { left: 32px; right: 32px; top: 24px; bottom: 24px; }
.bone-shape .k { width: 66px; height: 66px; }
.logo { height: 46px; width: 92px; } .logo img { height: 46px; } .logo .mk { height: 42px; } .bone.compact .logo { width: 44px; }
.links a { font-size: 1rem; padding: 9px 15px; } .bone-cta { padding: 11px 22px; }
.bone-wrap { top: 34px; }
@media (max-width: 820px) {
  .bone { height: 48px; padding: 0 60px 0 64px; gap: 12px; }
  .bone-shape { top: -22px; bottom: -22px; } .bone-shape .body { left: 28px; right: 28px; top: 22px; bottom: 22px; } .bone-shape .k { width: 58px; height: 58px; }
  .logo { height: 38px; width: 80px; } .logo img { height: 38px; } .logo .mk { height: 36px; } .bone.compact .logo { width: 38px; }
  .bone-wrap { top: 30px; } .menu-btn { padding: 9px 18px; }
}
.call { border-radius: 24px; clip-path: none; padding: 18px 24px 18px 18px; gap: 18px; }
.call .n-icon { border-radius: 14px; }
.ring { width: min(430px, calc(100vw - 28px)); margin-left: calc(min(430px, calc(100vw - 28px)) / -2); }
.ln { font-size: clamp(2.8rem, min(10vw, 17vh), 12rem); }
.hero-sub { text-transform: none; letter-spacing: 0; line-height: 1.35; font-family: var(--body); font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.4rem); color: var(--ink-soft); max-width: 31em; margin: 18px auto 0; padding: 0 20px; }
.ring { top: 45vh; }
@media (max-width: 820px) { .ln { font-size: clamp(2.6rem, 15vw, 6rem); } .hero-sub { font-size: .98rem; margin-top: 12px; max-width: 24em; } .ring { top: 54vh; } }
@media (max-height: 520px) and (orientation: landscape) { .hero-sub { display: none; } }
.ln { font-size: clamp(2.8rem, min(8.6vw, 15vh), 11rem); }
.ring { top: 50vh; }
.rail li:first-child.on a span { opacity: 0; }
.n-text em { white-space: nowrap; letter-spacing: .08em; }
@media (max-width: 820px) { .ln { font-size: clamp(2.6rem, 15vw, 6rem); } .ring { top: 54vh; } .n-text em { font-size: .7rem; letter-spacing: .05em; } }
@media (min-width: 821px) { .dogwrap { bottom: -18vh; width: min(66vh, 92vw); } .ring { top: 45vh; } }

/* v6: three-line headline, footer tagline */
.ln { font-size: clamp(2.4rem, min(6.9vw, 12.4vh), 9rem); }
.headline { top: 14vh; }
.hero-sub { margin-top: 14px; font-size: clamp(1.05rem, 1.7vw, 1.5rem); }
.ring { top: 47vh; }
@media (min-width: 821px) { .dogwrap { bottom: -20vh; width: min(64vh, 92vw); } }
@media (max-width: 820px) { .ln { font-size: clamp(2.2rem, 11.6vw, 4.6rem); } .headline { top: 15vh; } .hero-sub { font-size: 1.05rem; } .ring { top: 49vh; } }
.fin-tag { font-size: clamp(1.4rem, 3vw, 2.4rem); margin-top: 22px; }
.fin-small { margin-top: 8px; color: rgba(255,255,255,.85); font-weight: 700; }
.ftag { display: block; font-style: normal; font-family: var(--display); font-weight: 600; color: var(--yellow); margin-top: 8px; }
.flogo { display: inline-flex; flex-direction: column; align-items: flex-start; }
@media (max-height: 520px) and (orientation: landscape) { .ln { font-size: clamp(1.8rem, 6vw, 3.4rem); } }
.hero-sub { text-wrap: balance; }
@media (min-width: 821px) { .ring { top: 51vh; } .dogwrap { bottom: -23vh; width: min(64vh, 92vw); } }
@media (max-width: 820px) { .ring { top: 50vh; } }

/* v7: chunkier bone nav, deeper knob indents */
.bone { height: 70px; padding: 0 92px 0 96px; gap: 20px; }
.bone-shape { top: -34px; bottom: -34px; }
.bone-shape .body { left: 46px; right: 46px; top: 30px; bottom: 30px; border-radius: 999px; }
.bone-shape .k { width: 84px; height: 84px; }
.logo { height: 50px; width: 102px; } .logo img { height: 50px; } .logo .mk { height: 46px; } .bone.compact .logo { width: 50px; }
.links a { font-size: 1.05rem; padding: 11px 16px; }
.bone-cta { padding: 13px 26px; font-size: 1.05rem; }
.bone-wrap { top: 28px; }
@media (max-width: 820px) {
  .bone { height: 58px; padding: 0 72px 0 76px; gap: 12px; }
  .bone-shape { top: -28px; bottom: -28px; }
  .bone-shape .body { left: 38px; right: 38px; top: 26px; bottom: 26px; }
  .bone-shape .k { width: 70px; height: 70px; }
  .logo { height: 40px; width: 86px; } .logo img { height: 40px; } .logo .mk { height: 38px; } .bone.compact .logo { width: 40px; }
  .bone-wrap { top: 22px; } .menu-btn { padding: 11px 20px; }
}

/* =================== v8: crisp bone, scroll cue, phone layout (bone at the bottom, call at the top) =================== */
.bone-shape { filter: none; }
.bone-shape i { visibility: hidden; }
.bone-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }

/* scroll cue: shown on every screen size, fades with the first scroll (JS sets its opacity) */
.hint, .hint i { display: block; }
.hint { display: inline-flex; align-items: center; gap: 8px; bottom: 4vh; padding: 9px 16px 9px 18px; background: #fff; color: var(--ink); border-radius: 999px; box-shadow: var(--shadow-1); font-family: var(--display); font-weight: 600; font-size: .95rem; letter-spacing: .04em; text-transform: none; }
.hint i { width: 9px; height: 9px; background: none; border-radius: 0; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg) translate(-2px, -2px); animation: cue 1.4s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: rotate(45deg) translate(-3px, -3px); } 50% { transform: rotate(45deg) translate(2px, 2px); } }
@media (prefers-reduced-motion: reduce) { .hint i { animation: none; } }

@media (max-width: 820px) {
  :root { --nav-safe: calc(142px + env(safe-area-inset-bottom)); }
  /* nav bone floats at the foot of the screen */
  .bone-wrap { top: auto; bottom: calc(52px + env(safe-area-inset-bottom)); }
  .bone { height: 40px; padding: 0 64px 0 68px; gap: 12px; }
  .bone-shape { top: -24px; bottom: -24px; }
  .bone-shape .body { left: 34px; right: 34px; top: 24px; bottom: 24px; }
  .bone-shape .k { width: 52px; height: 52px; }
  .bone { animation-name: boneInM; }
  @keyframes boneInM { from { opacity: 0; transform: translateY(40px) rotate(6deg) scale(.9); } to { opacity: 1; transform: none; } }
  /* incoming call banner at the top */
  .ring { top: calc(14px + env(safe-area-inset-top)); }
  .ring-pill { display: none; }
  /* headline: three lines that always fit, below the call banner */
  .headline { top: calc(14px + env(safe-area-inset-top) + 112px); }
  .ln { font-size: clamp(2rem, 10.2vw, 4.2rem); white-space: nowrap; padding: 0; }
  .ln em { text-shadow: 4px 4px 0 var(--ink); }
  .hero-sub { font-size: 1rem; margin-top: 14px; }
  .hero-cta { bottom: calc(var(--nav-safe) + 14px); }
  .hint { bottom: calc(var(--nav-safe) + 10px); }
  .b1 { top: 22vh; } .b2 { top: 18vh; } .b3 { top: 16vh; }
  /* services: cards anchor from the top so tall ones never run into the screen edge */
  .falls-stage { padding: 36px 18px var(--nav-safe); }
  .falls-right { min-height: 0; }
  .card { top: 70px; margin-top: 0; min-height: 340px; }
  /* bowl keeps clear of the bone */
  .bowl-stage { padding-bottom: var(--nav-safe); }
  /* walk: dog lifts above the bone, copy moves up now the top is free */
  .walk-copy { top: 9vh; }
  .walker { bottom: calc(var(--nav-safe) - 18px); }
  .b4 { bottom: calc(var(--nav-safe) - 18px + 54vw); }
  /* footer: room for the bone, and the bouncy ball is back */
  .foot { padding-bottom: calc(var(--nav-safe) + 20px); }
  .ballfall { display: block; left: auto; right: 7%; width: 64px; }
  .ballfall img { width: 64px; }
  .finale.in .ballfall img { animation-name: ballBounceM; }
}
@keyframes ballBounceM { 0% { transform: translateY(-120px); animation-timing-function: cubic-bezier(.55,0,1,.45); } 30% { transform: translateY(300px); animation-timing-function: cubic-bezier(0,.55,.45,1); } 46% { transform: translateY(170px); animation-timing-function: cubic-bezier(.55,0,1,.45); } 60% { transform: translateY(300px); animation-timing-function: cubic-bezier(0,.55,.45,1); } 72% { transform: translateY(240px); animation-timing-function: cubic-bezier(.55,0,1,.45); } 82%, 100% { transform: translateY(300px); } }

/* =================== v9: phone hero that fits any screen height, chunkier bone, scroll guides, pen-scribble loaders =================== */
/* quiet guide while the chat plays */
.hint { opacity: 0; background: rgba(255,255,255,.82); box-shadow: none; font-size: .82rem; padding: 7px 13px 7px 15px; color: var(--ink); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hint i { width: 8px; height: 8px; border-width: 2.5px; }

@media (max-width: 820px) {
  /* call banner at the top with its "Scroll to answer" pill back underneath */
  .ring { top: calc(12px + env(safe-area-inset-top)); gap: 8px; }
  .ring-pill { display: inline-flex; font-size: .92rem; padding: 7px 14px; margin-top: 8px; }
  .headline { top: calc(12px + env(safe-area-inset-top) + 150px); }
  /* dog: a little smaller, and never taller than the room under the headline on short screens */
  .dogwrap { width: min(104vw, max(300px, calc(100svh - 330px))); bottom: -1svh; }
  /* the chat uses the whole height above the dog */
  .b1 { top: 9svh; } .b2 { top: 21svh; } .b3 { top: 33svh; }
  .hint { bottom: calc(var(--nav-safe) + 6px); }

  /* bone: chunkier shaft, smaller and quieter contents, more room from the edge */
  .bone-wrap { bottom: calc(60px + env(safe-area-inset-bottom)); }
  :root { --nav-safe: calc(150px + env(safe-area-inset-bottom)); }
  .bone { height: 50px; padding: 0 66px 0 70px; gap: 16px; }
  .bone-shape { top: -22px; bottom: -22px; }
  .bone-shape .body { left: 32px; right: 32px; top: 22px; bottom: 22px; }
  .bone-shape .k { width: 56px; height: 56px; }
  .logo { height: 28px; width: 62px; } .logo img { height: 28px; } .logo .mk { height: 26px; } .bone.compact .logo { width: 28px; }
  .menu-btn { padding: 7px 15px; font-size: .84rem; min-height: 36px; }

  /* services: header trimmed, cards sized to fit the room left on any phone */
  .falls-left .eyebrow { display: none; }
  .falls-stage { padding-top: 30px; }
  .card { top: 40px; min-height: 0; padding: 18px 20px; gap: 12px; }
  .card h3 { font-size: 1.7rem; } .card p { font-size: .95rem; margin-top: 6px; } .card .ico { width: 54px; height: 54px; }
  .card .chips span { padding: 5px 10px; font-size: .78rem; }

  /* legible hero word: solid white letters with a thick ink outline */
  .ln em { -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: none; }
}

/* pen-scribble placeholder: a looping squiggle that draws itself, then rubs out */
img.sk { background: rgba(20,17,15,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cstyle%3Epath%7Bfill:none;stroke:%2314110F;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:d 1.8s ease-in-out .15s infinite%7D@keyframes d%7B0%25%7Bstroke-dashoffset:1;opacity:1%7D55%25%7Bstroke-dashoffset:0;opacity:1%7D85%25%7Bstroke-dashoffset:0;opacity:1%7D100%25%7Bstroke-dashoffset:0;opacity:0%7D%7D%3C/style%3E%3Cpath pathLength='1' d='M18 62C10 30 46 14 58 30C70 46 34 66 36 46C38 28 70 22 82 40C90 52 80 70 62 78C50 83 36 80 28 72'/%3E%3C/svg%3E") center / min(46%, 90px) no-repeat; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { img.sk { background-image: none; } }

/* =================== v10: subtle scroll cues, red scribble under FETCH, stamp out of the CTAs' way =================== */
.ring-pill { background: rgba(255,255,255,.62); color: var(--ink); box-shadow: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1.5px solid rgba(20,17,15,.14); }
.ring-pill b { color: var(--ink); }

/* hand-drawn red underline under the headline word */
.ln em { position: relative; display: inline-block; }
.ln em::after { content: ""; position: absolute; left: -4%; right: -6%; bottom: -.16em; height: .3em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15C30 6 56 19 88 11S150 5 196 12' fill='none' stroke='%23F2483C' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M20 21C60 15 110 22 176 17' fill='none' stroke='%23F2483C' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0); animation: penUnder .9s var(--ease) .9s forwards; }
@keyframes penUnder { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .ln em::after { animation: none; clip-path: none; } }

/* "keep scrolling": plain text above the nav, no pill */
.hint { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; box-shadow: none; font-size: .9rem; letter-spacing: .06em; -webkit-text-stroke: 4px #fff; paint-order: stroke fill; }
.hint i { border-color: var(--ink); }

/* FETCHED! stamp: top of the screen, clear of the CTAs */
.stamp-fetched { bottom: auto; top: 24vh; }
@media (max-width: 820px) { .stamp-fetched { top: 10svh; right: 6vw; font-size: 1.5rem; } .hint { bottom: calc(var(--nav-safe) - 10px); } }

/* =================== v11: nav with logo and burger in the bone's ends, View more, CTAs clear of the dog =================== */
.burger { display: none; }
@media (max-width: 820px) {
  .bone { width: min(80vw, 316px); padding: 0 16px 0 22px; justify-content: space-between; gap: 0; transition: transform .4s var(--ease); }
  .logo { flex: none; }
  .menu-btn { background: none; color: var(--ink); width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; flex: none; transition: background .25s, color .25s; }
  .menu-btn:hover, .menu-btn:focus-visible, .menu-btn.open { background: var(--ink); }
  .menu-btn .burger { display: grid; gap: 5px; width: 20px; }
  .burger i { display: block; height: 2.5px; border-radius: 3px; background: var(--ink); transition: transform .35s var(--ease), opacity .25s, background .25s; }
  .menu-btn:hover .burger i, .menu-btn:focus-visible .burger i, .menu-btn.open .burger i { background: #fff; }
  .menu-btn.open .burger i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-btn.open .burger i:nth-child(2) { opacity: 0; }
  .menu-btn.open .burger i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .menu .menu-spot { font-size: clamp(1.6rem, 6vw, 2.4rem); }

  /* hero finale: buttons move up to the clear space under the bubble, so the dog stays visible */
  .hero-cta { bottom: auto; top: 31svh; }
  .b3 { top: 11svh; }
  .stamp-fetched { top: 4svh; right: 6vw; font-size: 1.3rem; border-width: 4px; }
  .hint { bottom: calc(var(--nav-safe) - 14px); font-size: .84rem; }
}
@media (min-width: 821px) {
  .hero-cta { left: auto; right: 6vw; bottom: 12vh; justify-items: end; }
  .stamp-fetched { top: 13vh; right: 7vw; }
}
.hint { -webkit-text-stroke: 3.5px #fff; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .bone { transition: none; } }

/* =================== v12: robust hero lettering on iOS, grey scroll cue, cards that fit, NOAM strip =================== */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-serif.woff2") format("woff2"); }
/* if the web font is slow or blocked, fall back to a rounded bold face iOS already has */
:root { --display: "Fredoka", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; }

/* FETCH.: outline built from shadows. Text-stroke on a variable font draws inner overlaps in Safari. */
.ln em { -webkit-text-stroke: 0; paint-order: normal; color: #fff;
  text-shadow: -3px -3px 0 var(--ink), 0 -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), -3px 3px 0 var(--ink), 0 3px 0 var(--ink), 3px 3px 0 var(--ink), 5px 6px 0 var(--ink); }
@media (max-width: 820px) { .ln em { text-shadow: -2.5px -2.5px 0 var(--ink), 0 -2.5px 0 var(--ink), 2.5px -2.5px 0 var(--ink), -2.5px 0 0 var(--ink), 2.5px 0 0 var(--ink), -2.5px 2.5px 0 var(--ink), 0 2.5px 0 var(--ink), 2.5px 2.5px 0 var(--ink), 4px 5px 0 var(--ink); } }

/* scroll cue: quiet, greyed, slow bounce, just above the nav */
.hint { -webkit-text-stroke: 0; paint-order: normal; color: rgba(20,17,15,.5); text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 12px rgba(255,255,255,.95); font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; gap: 6px; flex-direction: column; align-items: center; }
.hint i { width: 9px; height: 9px; border-color: rgba(20,17,15,.5); animation: cue 2.4s ease-in-out infinite; }
@media (min-width: 821px) { .hint { bottom: 3.5vh; } }

@media (max-width: 820px) {
  .bone { width: min(76vw, 300px); }
  /* services: on short screens drop the chips (then the description) so a card never outgrows the room */
  .card { min-height: 0; }
}
@media (max-width: 820px) and (max-height: 760px) {
  .falls-left .counter { display: none; }
  .card { padding: 16px 18px; gap: 8px; } .card h3 { font-size: 1.5rem; } .card .ico { width: 46px; height: 46px; }
  .card .chips { display: none; }
}
@media (max-width: 820px) and (max-height: 600px) { .card p { display: none; } .falls-left h2 { font-size: 1.7rem; } }

/* NOAM strip */
.noam { background: #070605; color: rgba(255,248,231,.62); display: flex; justify-content: center; align-items: center; gap: 10px; padding: 12px 20px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; border-top: 1px solid rgba(255,248,231,.08); }
.noam-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 25%; box-shadow: inset 0 0 0 1.2px currentColor; font-family: "Instrument Serif", Georgia, serif; font-size: 10.6px; letter-spacing: -.06em; line-height: 1; color: rgba(255,248,231,.85); }
@media (max-width: 820px) { .noam { padding-bottom: calc(12px + var(--nav-safe) - 20px); } }

@media (max-width: 820px) { .foot { padding-bottom: 40px; } }

/* =================== v13: wonky buttons, pen scribbles, bowl state, menu =================== */

/* pen scribble and highlighter sweep */
.scribble::after { clip-path: inset(0 100% 0 0) !important; transform: none !important; height: .36em; bottom: -.16em; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15C22 5 42 21 66 11S116 6 146 14 184 9 197 13' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M14 21C64 15 112 23 186 17' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15C22 5 42 21 66 11S116 6 146 14 184 9 197 13' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M14 21C64 15 112 23 186 17' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transition: clip-path .9s cubic-bezier(.65,0,.35,1) .45s !important; }
.scribble::before { content: ""; position: absolute; left: -3%; right: -3%; top: .12em; bottom: .02em; z-index: -2; background: var(--hl, rgba(255,225,77,.7)); border-radius: .08em .3em .12em .26em; transform: scaleX(0) rotate(-.8deg); transform-origin: left center; transition: transform .6s cubic-bezier(.65,0,.35,1); }
.in .scribble::before, [data-reveal].in .scribble::before, .scribble.in::before { transform: scaleX(1) rotate(-.8deg) !important; }
.in .scribble::after, [data-reveal].in .scribble::after, .scribble.in::after { clip-path: inset(0 0 0 0) !important; }
@media (prefers-reduced-motion: reduce) { .scribble::after { clip-path: none !important; transition: none !important; } .scribble::before { transform: scaleX(1) rotate(-.8deg) !important; transition: none; } }

:root { --hl: rgba(255,225,77,.7); }
.falls-left, .finale, .hero { --hl: rgba(20,17,15,.28); }
.btn { --wonk: polygon(0 9%, 100% 0, 97% 100%, 3% 91%); --btn-bg: var(--ink); --btn-fg: #fff; position: relative; isolation: isolate; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 8px 10px rgba(20,17,15,.28)); color: var(--btn-fg) !important; padding: 18px 34px; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-bg); clip-path: var(--wonk); transition: transform .35s var(--ease), background .25s; }
.btn:hover { transform: none; } .btn:hover::before { transform: rotate(-1.6deg) scale(1.04); }
.btn-big { padding: 22px 40px; }
.btn-ghost { --btn-bg: #fff; --btn-fg: var(--ink); } .btn-ghost:hover { --btn-bg: var(--ink); --btn-fg: #fff; background: transparent !important; color: var(--btn-fg) !important; }
.finale .btn-ghost { --btn-bg: transparent; --btn-fg: #fff; } .finale .btn-ghost::before { outline: 3px solid #fff; outline-offset: -3px; } .finale .btn-ghost:hover { --btn-bg: #fff; --btn-fg: var(--pink); }
.cta-row .btn:nth-child(2), .hero-cta .btn + .btn { --wonk: polygon(3% 0, 100% 8%, 100% 94%, 0 100%); }

/* "Right now" status: a small label and a quieter line, so it never competes with the section title */
.bowl-state { margin-top: 22px; display: inline-flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bs-label { display: inline-block; background: var(--ink); color: #fff; padding: 5px 12px; font-size: .72rem; clip-path: polygon(0 10%, 100% 0, 97% 100%, 2% 90%); transform: rotate(-2deg); }
.bowl-state p { font-size: clamp(1.25rem, 2.2vw, 1.9rem); min-height: 1.5em; margin-top: 0; font-weight: 600; letter-spacing: -.01em; color: var(--ink); padding: 2px 10px; background: linear-gradient(104deg, transparent 0 1%, rgba(255,225,77,.85) 1% 99%, transparent 99%) no-repeat; background-size: 100% 62%; background-position: 0 85%; }
.bowl-copy { z-index: 6; } .kibbles { z-index: 5; }
@media (max-width: 820px) { .bowl-state p { font-size: 1.3rem; min-height: 1.5em; } }

/* mobile menu: calmer type, grouped */
.menu-sub { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 360px; margin-top: 4px; }
.menu .menu-sub a { font-size: .95rem; font-weight: 700; padding: 8px 14px; background: rgba(20,17,15,.1); clip-path: polygon(0 8%, 100% 0, 97% 100%, 3% 92%); }
.menu ul { gap: 4px; }
.menu a { font-size: clamp(1.7rem, 7vw, 2.4rem); }
.menu-cta { font-size: 1.2rem !important; margin-top: 16px; }
@media (min-width: 821px) { .bone-wrap { top: 48px; } }

/* contrast: white text on pink needs a deeper pink; red text on cream needs a deeper red */
.finale { --pink: #e11d70; background: #e11d70; }
.finale .btn-ghost:hover { --btn-fg: #e11d70; }
.bowl-copy .eyebrow, .eyebrow { --eyebrow-red: #cc3326; }
.bowl-copy .eyebrow { color: #cc3326; }
.counter span, #fcTotal { color: #fff; }
@media (min-width: 821px) {
  .headline { top: 17.5vh; }
  .ln { font-size: clamp(2.4rem, min(6.6vw, 11.4vh), 8.5rem); }
  .hint { left: 5vw; bottom: 5vh; transform: none; }
}

/* =================== v14: wonky service cards, desktop call from the bottom, status colours, scorecard stamp =================== */
.card { padding: 34px 36px; }

.bowl-state { --st: #1d4ed8; --stt: #fff; --sth: rgba(29,78,216,.16); }
.bowl-state[data-i="1"] { --st: #e11d70; --stt: #fff; --sth: rgba(225,29,112,.16); }
.bowl-state[data-i="2"] { --st: #ff9f1c; --stt: #14110f; --sth: rgba(255,159,28,.3); }
.bowl-state[data-i="3"] { --st: #2ec4b6; --stt: #14110f; --sth: rgba(46,196,182,.3); }
.bowl-state[data-i="4"] { --st: #15803d; --stt: #fff; --sth: rgba(21,128,61,.2); }
.bs-label { background: var(--st); color: var(--stt); transition: background .45s, color .45s; }
.bowl-state p { background-image: linear-gradient(104deg, transparent 0 1%, var(--sth) 1% 99%, transparent 99%); transition: background-image .45s; }

@media (min-width: 821px) {
  .ring { top: auto; bottom: calc(6vh + 46px); animation: ringUpD .9s var(--ease) .35s backwards; }
  .ring-pill { display: none; }
  .hint { left: 50%; transform: translateX(-50%); bottom: 2.6vh; }
}
@keyframes ringUpD { from { translate: 0 90px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ring { animation: none; } }

.fc-score { clip-path: none; border: 0; background: none; box-shadow: none; filter: drop-shadow(0 22px 30px rgba(20,17,15,.24)); isolation: isolate; }
.fc-score::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; clip-path: polygon(0 3%, 100% 0, 99% 100%, 1% 97%); }
.fc-stamp { right: -18px; z-index: 2; }

/* =================== v15: rounded cards back, smaller services heading, Fetched marker, SEO tag, desktop nav collapse =================== */
.card { border-radius: var(--r-lg); }
.falls-left h2 { font-size: clamp(2rem, 3.6vw, 3.4rem) !important; line-height: 1.02; }
.falls-left h2 .scribble::before { transform: scaleX(1) rotate(-.8deg) !important; --hl: rgba(255,225,77,.5); background: rgba(255,225,77,.5); transition: none; }
.falls-left h2 .scribble::after { clip-path: inset(0 0 0 0) !important; background: var(--yellow); }
.seo-tag { display: inline-block; margin-top: 10px; background: var(--ink); color: #fff; font: 800 .74rem var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; transform: rotate(-1.5deg); }
@media (min-width: 821px) {
  .bone { transition: transform .4s var(--ease), gap .35s var(--ease), padding .35s var(--ease); }
  .bone .links { transition: opacity .25s, max-width .4s var(--ease); overflow: hidden; max-width: 520px; white-space: nowrap; }
  .bone.compact { transform: scale(.88); gap: 14px; }
  .bone.compact .links { opacity: 0; max-width: 0; pointer-events: none; }
  .bone.compact .menu-btn { display: block; }
  .bone .menu-btn { padding: 9px 16px; }
  .bone:hover { transform: rotate(-.8deg) scale(1.01); } .bone.compact:hover { transform: rotate(-.8deg) scale(.9); }
}
@media (min-width: 821px) {
  .bone .menu-btn { background: transparent; padding: 9px 8px; min-height: 44px; }
  .bone .menu-btn .burger { display: grid; gap: 5px; width: 22px; }
  .bone .menu-btn .burger i { display: block; height: 2.5px; border-radius: 3px; background: var(--ink); transition: transform .35s var(--ease), opacity .25s; }
  .bone .menu-btn.open .burger i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .bone .menu-btn.open .burger i:nth-child(2) { opacity: 0; }
  .bone .menu-btn.open .burger i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .bone:not(.compact) .menu-btn { display: none; }
  .bone-cta { order: 2; } .bone .menu-btn { order: 3; }
}

/* structured footer */
.foot .wrap { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 28px 32px; align-items: start; }
.foot .flogo { display: grid; gap: 12px; justify-items: start; }
.foot .fcol { display: grid; gap: 2px; align-content: start; }
.foot .fcol h2 { font: 700 .8rem var(--body, inherit); letter-spacing: .14em; text-transform: uppercase; opacity: .55; margin-bottom: 6px; }
.foot .fcol a { padding: 8px 0; min-height: 44px; display: flex; align-items: center; font-weight: 700; }
.foot small { grid-column: 1 / -1; }
@media (max-width: 900px) { .foot .wrap { grid-template-columns: 1fr 1fr; } .foot .flogo { grid-column: 1 / -1; } }

/* =================== v16: crisp compact mark, chunkier burger, wonky tags, hint follows the nav, heading wrap =================== */
.logo .mk { height: 44px; width: 44px; border-radius: 0; image-rendering: auto; transform: translateY(-50%) !important; transition: opacity .3s ease; }
.bone.compact .logo { width: 46px; }
.logo:hover .mk { transform: translateY(-50%) !important; }
.bone .menu-btn .burger { width: 28px !important; gap: 6px !important; }
.bone .menu-btn .burger i, .menu-btn .burger i { height: 3.5px !important; border-radius: 4px; }
.bone .menu-btn { min-width: 48px; min-height: 48px; }
.card .chips span, .seo-tag { border-radius: 3px; clip-path: polygon(0 8%, 100% 0, 97% 100%, 3% 92%); transform: rotate(-1.4deg); }
.card .chips span:nth-child(even) { clip-path: polygon(3% 0, 100% 9%, 100% 94%, 0 100%); transform: rotate(1.2deg); }
.hint { transition: bottom .5s var(--ease), opacity .3s; }
.scrolled .hint { bottom: 1.4vh; }
@media (max-width: 820px) {
  .scrolled .hint { bottom: calc(var(--nav-safe) - 30px); }
  .falls-left h2 .dbr { display: none; }
  .falls-left h2 { font-size: clamp(1.7rem, 7.4vw, 2.2rem) !important; }
}

/* WhatsApp / contact strip above the footer */
.wa-strip { background: #25d366; color: var(--ink); border-top: 3px solid var(--ink); }
.wa-in { max-width: 1100px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.wa-dog { width: 72px; height: 72px; object-fit: contain; flex: none; margin: -26px 0 -6px; filter: drop-shadow(0 6px 8px rgba(20,17,15,.25)); }
.wa-copy { display: grid; flex: 1 1 220px; } .wa-copy b { font-family: var(--display); font-size: 1.35rem; } .wa-copy span { font-weight: 700; opacity: .8; }
.wa-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wa-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; font-family: var(--display); font-weight: 600; font-size: 1.1rem; padding: 14px 24px; min-height: 52px; border-radius: 16px; border: 3px solid var(--ink); border-bottom-width: 6px; transition: transform .25s var(--ease); }
.wa-btn:hover { transform: translateY(-2px) rotate(-1deg); }
.wa-alt { font-weight: 800; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 700px) { .wa-in { padding: 22px 20px 18px; } .wa-btn { width: 100%; justify-content: center; } .wa-actions { width: 100%; } .wa-dog { margin: -40px 0 -10px; } }
.wa-strip .wa-btn { color: #fff; } .wa-strip .wa-alt, .wa-strip .wa-copy { color: var(--ink); }

/* v17: tap targets and small text on phones, funnel steps keep readable widths */
.bs-label { font-size: .76rem; } .fcap span, figcaption span { font-size: .76rem; }
.logo { min-height: 44px; }
.foot .fcol a, .foot nav a { min-height: 44px; }
@media (max-width: 820px) { .logo { min-height: 44px; } }

/* =================== v18: section backgrounds alternate (colour, dark, deep pink, paper, mint, cream, lilac, sky, yellow, cream, mint, pink) =================== */
.fb { background: #e11d70; }
.fb .fs.f3 { background: #fff; color: var(--ink); }
.fcheck { background: var(--mint, #9be3ae); }
.paths { background: var(--lilac, #c9b6ff); }
.sniff { background: var(--mint, #9be3ae); }
/* keep content clear of the progress rail on mid-width desktops */
@media (min-width: 821px) and (max-width: 1480px) { .wrap { padding-right: 68px; } }
.sniff.sniff { background: var(--mint, #9be3ae); }
.fcheck.fcheck { background: var(--mint, #9be3ae); }

/* =================== v19: bowl on mint now the homepage Fetch Check block has gone; "everything we do" strip =================== */
.bowl { background: var(--mint, #9be3ae); }

/* v20: small text link under the funnel cards */
.fb-more { flex-basis: 100%; margin: 6px 0 0; font: 700 .95rem/1.2 var(--body, Nunito, sans-serif); }
.fb-more a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }