/* The Foxhound Group — site styles.
   Direction: Alpha-style color blocks in the logo's own pastels, deep-teal banner and footer,
   chunky sans headlines, black-and-white photos with hand-drawn doodles, logo-leaf shapes,
   and the logo's pup walking visitors through their benefits experience. */
:root {
  --ink: #185160;
  --ink-deep: #0f3a45;
  --mint: #c0ffed;
  --lime: #bbd64b;
  --coral: #f87b54;
  --peach: #fdc9ae;
  --aqua: #a8ddd9;
  /* Soft section blocks */
  --cream: #f7f4ee;
  --mint-soft: #e8f3ef;
  --peach-soft: #fde3d4;
  --aqua-soft: #e4eff0;
  --white: #ffffff;
  --text: #1f3d45;
  --muted: #4f6067;
  --line: rgba(24, 81, 96, .14);
  --radius: 14px;
  /* The logo is built from leaf shapes: two round corners, two square. Photos echo that. */
  --leaf: 24px;   /* photos: simple soft corners */
  --max: 1180px;
  --display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Base size 11pt (14.67px); every rem size scales with it. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 91.67%; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--text); font: 300 1rem/1.65 var(--body); }
strong, b { font-weight: 600; }
::selection { background: var(--lime); color: var(--ink-deep); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--ink-deep); }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); margin: 0 0 .5em; }
h1 { font-weight: 700; font-size: clamp(2.5rem, 5.8vw, 4.7rem); line-height: 1.05; letter-spacing: -.028em; }
h2 { font-weight: 700; font-size: clamp(1.8rem, 3.3vw, 2.65rem); line-height: 1.1; letter-spacing: -.022em; }
h3 { font-weight: 700; font-size: 1.15rem; line-height: 1.3; letter-spacing: -.01em; }
h4 { font-weight: 700; font-size: 1rem; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
li { margin: .25em 0; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; border-radius: 4px; }
.nav, .btn, .nav-toggle, label, summary, cite, th, .breadcrumbs, .tag, .more, .eyebrow, .site-footer h2, .vlabel { font-family: var(--sans); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 22px; position: relative; }
.skip { position: absolute; left: -999px; top: 0; background: var(--white); padding: 10px 16px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }

/* Header: same deep teal as the banner, one continuous field */
.site-header { background: var(--ink); color: var(--white); position: sticky; top: 0; z-index: 50; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 78px; }
.brand img { height: 40px; width: auto; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { color: #d7e7e2; text-decoration: none; font-size: .92rem; font-weight: 600; padding: 8px 11px; white-space: nowrap; position: relative; }
.nav a:hover { color: var(--mint); }
.nav a[aria-current="page"] { color: #fff; }
.nav .nav-phone { color: var(--mint); margin-left: 10px; }
.nav .btn { margin-left: 10px; padding: 9px 20px; }
.sub-toggle { display: none; }
.nav-toggle { display: none; background: none; border: 1.5px solid rgba(255, 255, 255, .45); color: var(--white); border-radius: 999px; padding: 8px 16px; font-weight: 600; cursor: pointer; }
@media (max-width: 1100px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--ink); border-top: 1px solid rgba(255, 255, 255, .08); flex-direction: column; align-items: stretch; padding: 8px 22px 22px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 4px; }
  .nav .nav-phone { margin-left: 0; }
  .nav .btn { margin: 10px 0 0; text-align: center; }
}

/* Buttons: pills, like Alpha */
.btn { display: inline-block; background: var(--mint); color: var(--ink) !important; font-weight: 700; font-size: .95rem; text-decoration: none; padding: 13px 26px; border-radius: 999px; border: 2px solid var(--mint); transition: background .15s, color .15s, border-color .15s; cursor: pointer; }
.btn-ghost { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .45); }
.btn-dark { background: var(--ink); border-color: var(--ink); color: var(--white) !important; }
.btn-lime { background: var(--lime); border-color: var(--lime); }
/* Hover: every button turns deep teal with light-blue (mint) text and outline. */
.btn:hover, .nav .btn:hover { background: var(--ink-deep); border-color: var(--mint); color: var(--mint) !important; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* Banner: one big centered statement on deep teal, logo leaves peeking in from the edges */
.hero { background: var(--ink); color: var(--white); padding: 90px 0 130px; position: relative; overflow: hidden; text-align: center; }
.hero-sub { padding: 64px 0 96px; }
.hero .wrap { z-index: 2; }
.hero h1 { color: var(--white); max-width: 13ch; margin-left: auto; margin-right: auto; }
.hero-sub h1 { font-size: clamp(2.3rem, 5vw, 4rem); max-width: 16ch; }
.hero .lede { font-size: 1.15rem; line-height: 1.6; max-width: 36em; margin: 0 auto; color: #d7e7e2; }
.hero .btn-row { justify-content: center; }
.hero .eyebrow { color: var(--mint); }
.eyebrow { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--coral); margin-bottom: 18px; }
.breadcrumbs { font-size: .8rem; font-weight: 600; margin-bottom: 18px; color: #8fb4ab; }
.breadcrumbs a { color: #8fb4ab; text-decoration: none; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }

/* Same shape as the blog tails: about twice as tall as wide, chunky with two soft round corners. */
@media (max-width: 760px) {
  .hero { padding: 64px 0 112px; }
}

/* The pup: trots and bounces along a lime bar at the bottom of the home banner. */
.pup-track { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 3; pointer-events: none; overflow: hidden; }
.pup-track::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--lime); }
.pup-track .pup { position: absolute; bottom: 4px; left: 0; animation: pup-walk 22s linear infinite; }
.pup svg { width: 62px; height: auto; display: block; overflow: visible; }
.pup.moving svg, .pup-track .pup svg { animation: pup-bounce .6s ease-in-out infinite alternate; }
.pup .leg-a, .pup .leg-b, .pup .head { transform-box: fill-box; }
.pup .leg-a, .pup .leg-b { transform-origin: 50% 0; }
.pup .head { transform-origin: 0% 100%; animation: head-bob .6s ease-in-out infinite alternate; }
.pup.moving .leg-a, .pup-track .pup .leg-a { animation: leg-swing .6s ease-in-out infinite alternate; }
.pup.moving .leg-b, .pup-track .pup .leg-b { animation: leg-swing .6s ease-in-out infinite alternate-reverse; }
.pup.facing-left svg { transform: scaleX(-1); }
@keyframes pup-walk { from { transform: translateX(-90px); } to { transform: translateX(calc(100vw + 20px)); } }
@keyframes pup-bounce { from { translate: 0 0; } to { translate: 0 -5px; } }
@keyframes leg-swing { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes head-bob { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }

/* "Let's go on a walk through your benefits experience": the pup walks the path as you scroll. */
.walk-head { text-align: center; max-width: 40em; margin: 0 auto 56px; }
.walk-head h2 { color: #fff; }
.walk-head p { color: #d7e7e2; font-size: 1.08rem; }
.walk { position: relative; padding-top: 96px; }
.walk-path { position: absolute; left: 0; right: 0; top: 80px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
.walk-path i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--walked, 0%); border-radius: 8px; background: var(--lime); }
.walk .pup { position: absolute; top: 6px; left: var(--walked, 0%); margin-left: -31px; transition: left .45s ease-out; z-index: 2; }
.walk-stops { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; counter-reset: stop; }
.walk-stops li { position: relative; padding-top: 28px; margin: 0; opacity: .5; transition: opacity .3s; }
.walk-stops li::before { counter-increment: stop; content: counter(stop); position: absolute; top: -32px; left: 0; width: 34px; height: 34px; border-radius: 14px 3px 14px 3px; background: rgba(255, 255, 255, .18); color: var(--ink); font: 800 .95rem/34px var(--display); text-align: center; transition: background .3s; }
.walk-stops li.reached { opacity: 1; }
.walk-stops li.reached::before { background: var(--lime); }
.walk-stops .kicker { display: block; font: 700 .72rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mint); margin-bottom: 8px; }
.walk-stops h3 { color: #fff; margin-bottom: 6px; }
.walk-stops p { color: #d7e7e2; font-size: .95rem; margin: 0; }
@media (max-width: 900px) {
  .walk { padding-top: 0; padding-left: 70px; }
  .walk-path { left: 22px; right: auto; top: 0; bottom: 0; width: 8px; height: auto; }
  .walk-path i { width: auto; right: 0; height: var(--walked, 0%); bottom: auto; }
  .walk .pup { top: var(--walked, 0%); left: -10px; margin: -30px 0 0; transition: top .45s ease-out; }
  .walk .pup svg { width: 50px; }
  .walk-stops { grid-template-columns: 1fr; gap: 34px; }
  .walk-stops li { padding-top: 0; }
  .walk-stops li::before { top: 0; left: -58px; display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pup-track .pup, .pup svg, .pup .leg-a, .pup .leg-b, .pup .head { animation: none !important; }
  .pup-track .pup { left: 12%; }
  .walk-stops li { opacity: 1; }
}

/* Sections: full-width color blocks */
section { padding: 92px 0; }
section.b-cream { background: var(--cream); }
section.b-mint { background: var(--mint-soft); }
/* The light-pink slot in the rotation is plain white; white cards there get a thin outline. */
section.b-peach { background: var(--white); }
.b-peach .card, .b-peach .contact-card, .b-peach .faq details, .b-peach .carriers li { box-shadow: inset 0 0 0 1px var(--line); }
section.b-aqua { background: var(--aqua-soft); }
section.dark { background: var(--ink); color: #d7e7e2; }
.section-head { max-width: 44em; margin-bottom: 44px; }
.section-head p { color: var(--muted); font-size: 1.08rem; }

/* Split block under the banner: B&W photo with doodles + big statement + coral-dot note */
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 860px) { .intro { grid-template-columns: 1fr; gap: 28px; } .intro .photo img { aspect-ratio: 16 / 10; } }
.statement { font: 700 clamp(1.5rem, 2.7vw, 2.15rem)/1.2 var(--display); letter-spacing: -.018em; color: var(--ink); margin: 0 0 28px; }

.photo { position: relative; }
.photo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--leaf); }

/* Portrait service cards (Alpha "things we do") */
.svc-wrap { display: grid; grid-template-columns: 48px 1fr; gap: 24px; }
.vlabel { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700; font-size: 1.35rem; letter-spacing: -.01em; color: var(--ink); align-self: start; margin: 0; }
.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc a { display: block; text-decoration: none; color: inherit; border-radius: var(--radius); overflow: hidden; background: var(--ink); }
.svc img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; }
.svc .cap { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 16px 18px 18px; color: #fff; }
.svc .cap h3 { color: #fff; margin: 0 0 4px; font-size: 1.12rem; }
.svc .cap p { margin: 0; font-size: .88rem; color: #cfe0dc; line-height: 1.45; }
.svc .plus { font: 400 1.7rem/1 var(--sans); color: var(--coral); }
@media (max-width: 900px) { .svc { grid-template-columns: repeat(2, 1fr); } .svc-wrap { grid-template-columns: 1fr; } .vlabel { writing-mode: horizontal-tb; transform: none; } }
@media (max-width: 560px) { .svc { grid-template-columns: 1fr; } }

/* Giant photo-filled number */
.bignum-row { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center; }
/* Padding keeps the photo fill from clipping the digits' edges (it only paints inside the box). */
.bignum { font: 800 clamp(8rem, 19vw, 17rem)/.9 var(--display); letter-spacing: -.04em; white-space: nowrap; padding: .04em .08em .06em .06em; margin: 0 0 0 -.06em; color: var(--ink); background: url(/images/photos/office-meeting.jpg) 40% 50% / cover; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bignum-copy .statement { font-size: clamp(1.5rem, 2.6vw, 2rem); }
@media (max-width: 760px) { .bignum-row { grid-template-columns: 1fr; gap: 20px; } }

/* Grids and cards */
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
.card { background: var(--white); border-radius: var(--radius); padding: 28px 30px; height: 100%; }
.card p:last-child { margin-bottom: 0; }
.card p { color: var(--muted); }
.card.link { text-decoration: none; color: inherit; display: block; transition: transform .2s; }
.card.link:hover { transform: translateY(-3px); color: inherit; }
.card.link h3::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--lime); margin-bottom: 14px; }
.card.link:nth-child(even) h3::before { background: var(--coral); }
.card .more { font-weight: 700; font-size: .9rem; color: var(--ink); }
.tick { list-style: none; padding: 0; }
.tick li { position: relative; padding-left: 28px; }
.tick li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 14px; height: 8px; border-left: 3px solid var(--coral); border-bottom: 3px solid var(--coral); transform: rotate(-45deg); }
.cols-2 { columns: 2; column-gap: 32px; }
@media (max-width: 620px) { .cols-2 { columns: 1; } }

/* Process steps (inner pages): leaf-shaped numbers joined by a thin line */
.steps { counter-reset: step; }
.step { position: relative; padding-top: 64px; }
.step::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 18px 4px 18px 4px; background: var(--mint); color: var(--ink); font: 800 1.1rem/44px var(--display); text-align: center; }
.step:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 56px; right: -10px; height: 1px; background: var(--line); }
@media (max-width: 900px) { .step::after { display: none; } }

.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 30px; } }
.inline-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--leaf); margin-top: 30px; }

/* Team */
.team { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 30px 20px; }
.person { text-align: center; }
.person img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 70px 12px 70px 12px; margin-bottom: 14px; }
.person h3 { font-size: 1.12rem; margin-bottom: 2px; }
.person p { font-size: .9rem; color: var(--muted); margin: 0; }

/* Agencies */
.agency { display: flex; flex-direction: column; gap: 10px; }
.agency-mark { width: 56px; height: 56px; border-radius: 12px; margin-bottom: 6px; }
.agency .tag { align-self: flex-start; background: var(--mint); color: var(--ink); font-size: .78rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; }

/* Testimonials: editorial, a small coral leaf instead of big quote marks */
blockquote { margin: 0; }
.quote { padding: 26px 0 0; border-top: 1.5px solid var(--line); }
.quote::before { content: ""; display: block; width: 16px; height: 16px; margin-bottom: 18px; background: var(--coral); border-radius: 16px 3px 16px 3px; }
.quote p { font-size: 1.04rem; line-height: 1.7; }
.quote cite { font-style: normal; font-weight: 700; color: var(--ink); }

/* Carriers */
.carriers { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.carriers li { background: var(--white); border-radius: 999px; padding: 9px 18px; font-size: .92rem; margin: 0; }

/* FAQ */
.faq details { background: var(--white); border-radius: 12px; margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 20px 56px 20px 24px; font-weight: 700; color: var(--ink); list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 400; color: var(--coral); transition: transform .15s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .a { padding: 0 24px 20px; }
.faq .a p:last-child { margin: 0; }

/* Table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--ink); color: var(--white); font-weight: 600; }

/* Meeting band: leaf-shaped */
.cta { background: var(--ink); color: var(--white); border-radius: 24px; padding: 56px 60px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; position: relative; overflow: hidden; }
.cta h2 { color: var(--white); margin-bottom: 8px; }
.cta p { color: #d7e7e2; margin: 0; }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; padding: 40px 28px; border-radius: 20px; } }

/* Contact */
.contact-card { background: var(--white); border-radius: var(--radius); padding: 30px; }
.contact-card h3 { margin-top: 0; }
form .field { margin-bottom: 16px; }
label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .95rem; color: var(--ink); }
input, select, textarea { width: 100%; font: inherit; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--white); color: var(--text); }
textarea { min-height: 140px; resize: vertical; }
.hp { position: absolute; left: -5000px; }
.form-note { font-size: .85rem; color: var(--muted); }
.form-error { background: #fdece6; color: #7a2e17; border-radius: 10px; padding: 10px 14px; font-size: .9rem; }

/* Prose pages */
.prose { max-width: 46em; }
.prose h2 { margin-top: 1.6em; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.prose h3 { margin-top: 1.4em; }

/* Dark sections */
section.dark h2, .dark .step h3, .dark .person h3 { color: #fff; }
.dark .section-head p, .dark .split p, .dark .step p, .dark .person p, .dark .prose p { color: #d7e7e2; }
.dark .statement { color: #fff; }
.dark .dot-note h2 { color: var(--mint); }
.dark a:not(.btn):not(.card) { color: var(--mint); }
.dark .svc a { color: inherit; }
.dark .card h3 { color: var(--ink); }
.dark .card a:not(.btn) { color: var(--ink); }
.dark .tick li { color: #e6f0ee; }
.dark .tick li::before { border-color: var(--mint); }
.dark .btn-dark { background: var(--mint); border-color: var(--mint); color: var(--ink) !important; }
.dark .quote { border-top-color: rgba(255, 255, 255, .2); }
.dark .quote p { color: #e6f0ee; }
.dark .quote cite { color: #fff; }
.dark .carriers li { background: transparent; border: 1px solid rgba(255, 255, 255, .25); color: #fff; }
.dark .faq details { background: rgba(255, 255, 255, .06); }
.dark .faq summary { color: #fff; }
.dark .faq .a p { color: #d7e7e2; }
.dark .cta { background: var(--mint); color: var(--ink); }
.dark .cta h2 { color: var(--ink); }
.dark .cta p { color: var(--text); }
.dark .cta .btn-lime { background: var(--ink); border-color: var(--ink); color: #fff !important; }
.dark .cta .btn-ghost { color: var(--ink) !important; border-color: rgba(24, 81, 96, .35); }
.dark .cta .btn-ghost:hover, .dark .cta .btn-lime:hover { color: var(--mint) !important; }
.dark .step::before { background: var(--lime); }
.dark .step:not(:last-child)::after { background: rgba(255, 255, 255, .2); }
.dark .vlabel { color: #fff; }

/* Footer */
.site-footer { background: var(--ink-deep); color: #8fb4ab; padding: 64px 0 28px; font-size: .95rem; }
.site-footer a { color: #d7e7e2; text-decoration: none; }
.site-footer a:hover { color: var(--mint); }
.site-footer h2 { color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand img { height: 44px; width: auto; margin-bottom: 16px; }
.updated { font-size: .82rem; color: #a7b0b3; border-top: 1px solid rgba(255, 255, 255, .12); margin: 40px 0 0; padding-top: 20px; }
.legal { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 40px; padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem; }
.updated + .legal { margin-top: 0; border-top: 0; padding-top: 8px; }

/* ---- Motion. Everything here is off for visitors who ask their device to reduce motion. ---- */
/* Content fades up into place as it scrolls into view (only once the script has loaded). */
.js .reveal { opacity: 0; translate: 0 26px; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.in { opacity: 1; translate: 0 0; }
/* Banner headline and buttons rise in on load */
.hero h1, .hero .lede, .hero .btn-row, .hero .eyebrow { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.hero .lede { animation-delay: .12s; }
.hero .btn-row { animation-delay: .22s; }
@keyframes rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
/* Doodles draw themselves */
/* The pup hops when he reaches a stop on the walk */
.pup.hop svg { animation: hop .45s ease-out; }
@keyframes hop { 0% { translate: 0 0; } 40% { translate: 0 -18px; } 100% { translate: 0 0; } }
/* Service cards lift, photos zoom a touch */
.svc a { transition: translate .25s ease; }
.svc a:hover { translate: 0 -4px; }
.svc img { transition: filter .6s ease, scale .5s ease; }
.svc a:hover img { scale: 1.03; }
.btn { transition: background .15s, color .15s, border-color .15s, scale .15s; }
/* Carrier names scroll by */
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee .carriers { flex: none; flex-wrap: nowrap; margin: 0; padding-right: 10px; animation: marquee 45s linear infinite; }
.marquee:hover .carriers { animation-play-state: paused; }
@keyframes marquee { to { translate: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; translate: none; transition: none; }
  .svc a:hover { translate: none; }
  .svc a:hover img { scale: none; }
  .marquee .carriers { animation: none; flex-wrap: wrap; }
  .marquee .carriers[aria-hidden] { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; display: block; overflow: visible; }
  .marquee .carriers { flex: 1 1 auto; }
}

/* Every photo is black and white until you hover it, then fades to full color.
   On touch screens (no hover) a photo turns to color while it sits in the middle of the screen. */
.photo img, .inline-photo, .svc img, .person img { filter: grayscale(1) brightness(1.06) contrast(1.04); transition: filter .6s ease, scale .5s ease; }
.photo:hover img, .inline-photo:hover, .svc a:hover img, .svc a:focus-visible img, .person:hover img,
.photo img.in-color, .inline-photo.in-color, .svc img.in-color, .person img.in-color { filter: none; }

/* By the numbers */
.stats-title { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--coral); margin-bottom: 26px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px 32px; }
.stat { border-top: 1.5px solid var(--line); padding-top: 18px; }
.stat-num { font: 800 clamp(2.4rem, 4.4vw, 3.6rem)/1 var(--display); letter-spacing: -.035em; color: var(--ink); margin: 0 0 10px; white-space: nowrap; }
.stat-label { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.5; max-width: 22em; }
.dark .stat { border-top-color: rgba(255, 255, 255, .2); }
.dark .stat-num { color: var(--mint); }
.dark .stat-label { color: #d7e7e2; }
.dark .stats-title { color: var(--lime); }

/* Team: photo cards with a teal caption bar, like the service cards */
.team .person { text-align: left; background: var(--ink); border-radius: var(--radius); overflow: hidden; }
.team .person img { border-radius: 0; margin: 0; aspect-ratio: 1; }
.team .person .cap { padding: 14px 16px 16px; }
.team .person h3 { color: #fff; font-size: 1.05rem; margin: 0 0 3px; }
.team .person p { color: #cfe0dc; font-size: .84rem; line-height: 1.45; }
@media (max-width: 620px) { .grid.team { grid-template-columns: 1fr 1fr; gap: 14px; } .team .person .cap { padding: 10px 12px 12px; } .team .person h3 { font-size: .95rem; } .team .person p { font-size: .78rem; } }

/* The dog follows you through the site: he walks a slim lime bar pinned to the bottom of the
   screen as you scroll (it doubles as a reading-progress bar), and trots back to the start when
   you switch pages. */
.trail { position: fixed; left: 0; right: 0; bottom: 0; height: 54px; z-index: 40; pointer-events: none; transition: opacity .3s; }
.trail.hidden { opacity: 0; }
.trail-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(24, 81, 96, .12); }
.trail-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: var(--lime); }
.trail-pup { position: absolute; bottom: 3px; left: calc(var(--p, 0) * (100% - 44px)); view-transition-name: trail-pup; }
.trail-pup svg { width: 40px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
.trail-pup .body path[fill="#0f2f39"] { fill: #21434f; }
@media (max-width: 760px) { .trail { height: 44px; } .trail-pup svg { width: 32px; } .trail-pup { left: calc(var(--p, 0) * (100% - 36px)); } }

/* Page switches: a soft cross-fade, and the dog trots to his new spot */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
::view-transition-group(trail-pup) { animation-duration: .7s; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .trail-pup .leg-a, .trail-pup .leg-b, .trail-pup .head, .trail-pup svg { animation: none !important; }
}

/* Headings stay readable on dark sections */
.dark h3, .dark .prose h3, .dark .prose h2 { color: #fff; }

/* ---------- Blog ---------- */
/* Post art: a dog's back end, the logo's leaf as a wagging tail, until a real photo is added. */
.post-art { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #cfe9e6; }
.post-art.tone-aqua { background: #cfe9e6; }
.post-art.tone-peach { background: #fbe0d0; }
.post-art.tone-mint { background: #d9f3ea; }
.post-art.tone-cream { background: #efe8dc; }
.post-art.tone-lime { background: #e9f1c8; }
.post-art.tone-dark { background: #244c5c; }   /* the dark blue of the logo dog's leaves */
.pa-fig { position: absolute; inset: 0; }
.side-l .pa-fig { transform: scaleX(-1); }
/* Squared off like the logo dog's haunch: flat top and side, one big rounded corner. */
.pa-butt { position: absolute; right: 0; bottom: 0; width: 52%; height: 60%; background: var(--ink); border-radius: 46% 6% 0 0 / 50% 6% 0 0; }
/* Shaped like the logo dog's leaves: taller than wide, two round corners, two nearly square. */
.pa-tail { position: absolute; width: 21%; height: 54%; right: 27%; bottom: 44%; border-radius: 8% 62% 8% 62% / 5% 34% 5% 34%; background: var(--lime); transform: rotate(-24deg); transform-origin: 85% 100%; }
.tail-coral .pa-tail { background: var(--coral); }
.tail-mint .pa-tail { background: var(--mint); }
.tone-dark .pa-butt { background: #fff; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .post-grid { grid-template-columns: 1fr; } }
.post-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; border-radius: var(--radius); overflow: hidden; background: var(--ink); transition: translate .25s ease; }
.post-card:hover { translate: 0 -4px; color: inherit; }
.post-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) brightness(1.06) contrast(1.04); transition: filter .6s ease; }
.post-card:hover img { filter: none; }
.post-card .cap { flex: 1; display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 16px 18px 18px; }
.post-card .kicker { display: block; font: 700 .68rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mint); margin-bottom: 6px; }
.post-card h3 { color: #fff; font-size: 1.05rem; line-height: 1.32; margin: 0 0 8px; }
.post-card p { margin: 0; color: #cfe0dc; font-size: .82rem; }
.post-card .plus { font: 400 1.6rem/1 var(--sans); color: var(--coral); }

.featured { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; text-decoration: none; color: inherit; }
.featured:hover { color: inherit; }
.featured .featured-art { border-radius: var(--leaf); aspect-ratio: 5 / 4; }
.featured img.featured-art { width: 100%; object-fit: cover; }
.featured h2 { margin-bottom: 14px; }
.featured .meta { font-size: .9rem; color: var(--muted); }
.featured .btn { margin-top: 10px; }
@media (max-width: 860px) { .featured { grid-template-columns: 1fr; gap: 28px; } }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.chips a { font: 600 .9rem/1 var(--sans); color: var(--ink); text-decoration: none; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); }
.chips a span { color: var(--muted); font-weight: 500; margin-left: 4px; }
.chips a:hover { border-color: var(--ink); }
.chips a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chips a[aria-current="page"] span { color: var(--mint); }

.pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 44px; }
.pager a { font: 600 .9rem/1 var(--sans); color: var(--ink); text-decoration: none; padding: 11px 15px; border-radius: 999px; background: var(--white); border: 1.5px solid var(--line); }
.pager a:hover { border-color: var(--ink); }
.pager a[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Post page */
.article-wrap { max-width: 780px; margin: 0 auto; }
.post-hero-art { border-radius: var(--leaf); aspect-ratio: 16 / 7; margin-bottom: 44px; }
img.post-hero-art { width: 100%; object-fit: cover; }
.article { font-size: 1.07rem; line-height: 1.8; }
.article .dot-note { max-width: none; margin-bottom: 36px; }
.article h2 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); margin: 1.7em 0 .6em; }
.article h3 { font-size: 1.2rem; margin: 1.5em 0 .5em; }
.article h4 { font-size: 1.05rem; margin: 1.3em 0 .4em; }
.article ul, .article ol { padding-left: 1.3em; }
.article li { margin: .4em 0; }
.article a { color: var(--ink); text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
.article blockquote { margin: 1.5em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--lime); font-size: 1.1rem; }
.article table { font-size: .95rem; margin: 1.5em 0; display: block; overflow-x: auto; }
.article img { border-radius: var(--radius); margin: 1.5em 0; }
.archived-note { background: var(--peach-soft); border-left: 4px solid var(--coral); border-radius: 0 12px 12px 0; padding: 14px 18px; font-size: .95rem; margin-bottom: 28px; }
.byline { margin-top: 40px; padding-top: 18px; border-top: 1.5px solid var(--line); font-size: .9rem; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.byline img { flex: none; width: 28px; height: 28px; }

/* Glossary */
.term-search { display: block; max-width: 520px; margin-bottom: 22px; }
.term-search span { display: block; font: 700 .74rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--coral); margin-bottom: 8px; }
.az { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 40px; }
.az a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px 3px 12px 3px; background: var(--white); color: var(--ink); text-decoration: none; font: 700 .95rem/1 var(--display); }
.az a:hover { background: var(--ink); color: var(--mint); }
.glossary { display: grid; gap: 36px; }
.az-group { display: grid; grid-template-columns: 70px 1fr; gap: 24px; border-top: 1.5px solid var(--line); padding-top: 22px; }
.az-group > h2 { margin: 0; font-size: 2.6rem; color: var(--coral); }
.az-group dl { margin: 0; display: grid; gap: 18px; }
.term { background: var(--white); border-radius: var(--radius); padding: 20px 24px; scroll-margin-top: 100px; }
.term:target { box-shadow: 0 0 0 3px var(--lime); }
.term dt { font: 700 1.12rem/1.3 var(--display); color: var(--ink); margin-bottom: 6px; }
.term dd { margin: 0; color: var(--text); }
.term dd p:last-child { margin-bottom: 0; }
.term[hidden], .az-group[hidden] { display: none; }
@media (max-width: 620px) { .az-group { grid-template-columns: 1fr; gap: 10px; } }
.article .dot-note h2 { font: 700 .74rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin: 2px 0 8px; }
.article .dot-note p { font-size: 1rem; }

/* The scroll-bar dog glides to his spot rather than snapping. */
.trail-pup { transition: left .5s ease-out; }
.trail-bar i { transition: width .5s ease-out; }

/* The leash: the green line behind him is his leash, rising to his collar. The floor from where
   it touches down (under his feet and ahead of him) is light blue. The leash lands 1320 of his
   1260 viewBox units (1380 now) behind his left edge, level with his feet, so the green stops exactly there. */
.pup .leash { display: none; }
.walk .pup .leash, .trail-pup .leash { display: inline; }
.walk-path { background: var(--mint); opacity: 1; }
.walk-path i { width: max(0px, calc(var(--walked, 0%) - 97px)); transition: width .45s ease-out; }
.trail-bar { background: var(--aqua); }
.trail-bar { height: 4px; }
.trail-pup { bottom: 2px; }
.trail-bar i { width: max(0px, calc(var(--p, 0) * (100% - 44px) - 43px)); }
@media (max-width: 760px) { .trail-bar i { width: max(0px, calc(var(--p, 0) * (100% - 36px) - 34px)); } }
/* On phones the walk runs down the page, where a sideways leash doesn't fit. */
@media (max-width: 900px) {
  .walk .pup .leash { display: none; }
  .walk-path i { width: auto; height: var(--walked, 0%); }
}

/* The bottom dog walks on just his lines, no strip behind him. */
.trail-bar { background: #8fd3cd; }
.walk-path { top: 79.6px; }   /* measured: centers the line exactly where the leash lands */

.dark .dot-note { --panel: var(--ink-deep); }
.bignum-copy .dot-note { margin-bottom: 4px; }

/* Keep the logo at its true proportions: never let the menu squeeze it. */
.brand { flex: none; display: block; line-height: 0; }
.brand img { height: 40px; width: auto; max-width: none; object-fit: contain; }

/* ======================= Simplified (2026-10-27) =======================
   Clean shapes: no tile frames, no banner leaves, no doodles. The personality lives in
   a few easter eggs instead (see "Easter eggs" below). */
.hero { margin: 0; border: 0; border-radius: 0; background: var(--ink); }
.dot-note { border: 0; border-radius: 16px; background: var(--white); padding: 24px 28px; }
.b-white .dot-note { background: var(--cream); }
.dark .dot-note { background: rgba(255, 255, 255, .07); }
.article .dot-note { background: var(--white); }
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; align-items: start; border: 0; padding: 0; background: none; border-radius: 0; }
.faq-col { display: grid; gap: 12px; align-content: start; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }
.faq-col details, .faq-col details:not(:last-child), .faq-col details:last-child { border: 0; border-radius: 14px; background: var(--white); margin: 0; }
.b-white .faq-col details { background: var(--cream); }
.dark .faq-col details { background: rgba(255, 255, 255, .07); }
.card { border: 0; border-radius: var(--radius); background: var(--white); }
.b-white .card { background: var(--cream); }
section.b-white { background: var(--white); }

/* Wagging blog tails: wag from the base now and then, and right away when you hover. */
@keyframes wag { 0%, 100% { rotate: 0deg; } 20% { rotate: 9deg; } 40% { rotate: -6deg; } 60% { rotate: 7deg; } 80% { rotate: -3deg; } }
@keyframes wag-now-and-then { 0%, 16%, 100% { rotate: 0deg; } 3% { rotate: 8deg; } 6% { rotate: -5deg; } 9% { rotate: 7deg; } 12% { rotate: -3deg; } }
.pa-tail { animation: wag-now-and-then 6s ease-in-out var(--d, 0s) infinite; }
@media (prefers-reduced-motion: reduce) { .pa-tail { animation: none; } }
/* A short wag you trigger by hovering stays on for everyone (small, brief and user-started). */
.post-card:hover .pa-tail, .featured:hover .pa-tail, .post-card:focus-visible .pa-tail { animation: wag .7s ease-in-out 2; }
.dot-note h2 { font: 700 .74rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin: 0 0 8px; }
.dot-note p { margin: 0; font-size: 1rem; line-height: 1.7; }
.dark .dot-note h2 { color: var(--mint); }
@media (prefers-reduced-motion: reduce) { .hero h1, .hero .lede, .hero .btn-row, .hero .eyebrow, .pup.hop svg { animation: none; } }

/* ======================= Easter eggs ======================= */
/* Sitting: legs fold under him and his body (and leash) drop down; his head keeps bobbing. */
.pup .leash-sit { display: none !important; }
.pup.sitting .leash:not(.leash-sit) { display: none !important; }
.walk .pup.sitting .leash-sit, .trail-pup.sitting .leash-sit { display: inline !important; }
.pup .leg-a, .pup .leg-b, .pup .body { transition: transform .35s ease, translate .35s ease, scale .35s ease; }
.pup.sitting .leg-a, .pup.sitting .leg-b { animation: none !important; transform-origin: 50% 100%; scale: 1 .45; }
.pup.sitting .body { translate: 0 180px; }
.pup.sitting .head { animation: head-bob .5s ease-in-out infinite alternate; }

/* Pet the dog: he's clickable; each pat makes him hop and pops a little heart. */
.trail { pointer-events: none; }
.trail-pup { pointer-events: auto; cursor: pointer; }
.trail-pup:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; border-radius: 6px; }
.pup.petted svg { animation: hop .45s ease-out !important; }
.heart { position: fixed; z-index: 41; width: 14px; height: 14px; pointer-events: none; color: var(--coral); animation: heart-up 1.1s ease-out forwards; }
.heart svg { width: 100%; height: 100%; display: block; }
@keyframes heart-up { from { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; transform: translateY(-8px) scale(1); } to { opacity: 0; transform: translateY(-44px) scale(1.1); } }

/* Logo wag: hover the logo and it gives a quick happy wag. */
@keyframes logo-wag { 0%, 100% { rotate: 0deg; } 20% { rotate: -4deg; } 40% { rotate: 3deg; } 60% { rotate: -2deg; } 80% { rotate: 1deg; } }
.brand img { transform-origin: 12% 90%; }
.brand:hover img, .brand:focus-visible img { animation: logo-wag .6s ease-in-out; }

/* Easter egg: fetch on the 404 page. */
.fetch-wrap { text-align: center; }
.fetch { position: relative; height: 150px; max-width: 860px; margin: 0 auto 10px; }
.fetch-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 4px; background: var(--aqua); }
.fetch-pup { position: absolute; bottom: 2px; left: 4%; transition: left .9s ease-in-out; }
.fetch-pup svg { width: 72px; }
.ball { position: absolute; left: calc(4% + 78px); bottom: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--lime); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .12); }
.fetch-score { margin-top: 14px; color: var(--muted); font-size: .95rem; min-height: 1.6em; }

/* Carrier tags: deep teal (the logo's blue) pills with white text. */
.carriers li { background: var(--ink); color: #fff; }
.dark .carriers li { background: rgba(255, 255, 255, .12); border-color: transparent; color: #fff; }

/* Top of the page: a dark blue menu bar (the logo dog's leaf blue) over a white banner. */
.site-header, .nav { background: #244c5c; }
@media (max-width: 1100px) { .nav { background: #244c5c; } }
.hero, .hero-sub { background: var(--white); color: var(--text); border-bottom: 1px solid var(--line); }
.hero h1 { color: var(--ink); }
.hero .lede { color: var(--muted); }
.hero .eyebrow { color: var(--coral); }
.hero .breadcrumbs, .hero .breadcrumbs a { color: var(--muted); }
.hero .breadcrumbs a:hover { color: var(--ink); }
.hero .lede a { color: var(--ink) !important; text-decoration-color: var(--coral); }
.hero .btn:not(.btn-ghost) { background: var(--ink); border-color: var(--ink); color: #fff !important; }
.hero .btn-ghost { color: var(--ink) !important; border-color: rgba(24, 81, 96, .35); }
.hero .btn:hover { background: var(--ink-deep); border-color: var(--ink-deep); color: var(--mint) !important; }

/* A little wagging dog in the banner, in a fresh set of logo colors. */
.hero { position: relative; }
.hero-pup { position: absolute; right: 7%; bottom: 0; z-index: 1; pointer-events: none; }
.hero-pup svg { width: 92px; height: auto; display: block; overflow: visible; }
.hero-pup .tail { transform-box: fill-box; transform-origin: 30% 95%; animation: hero-wag 1.1s ease-in-out infinite; }
.hero-pup .head { transform-box: fill-box; transform-origin: 0% 100%; animation: head-bob 1.4s ease-in-out infinite alternate; }
@keyframes hero-wag { 0%, 100% { rotate: -6deg; } 50% { rotate: 10deg; } }
.hero-sub .hero-pup svg { width: 70px; }
@media (max-width: 760px) { .hero-pup { right: 4%; } .hero-pup svg, .hero-sub .hero-pup svg { width: 52px; } }
@media (prefers-reduced-motion: reduce) { .hero-pup .tail, .hero-pup .head { animation: none; } }
/* On the white banner, the white parts of the banner dog get a soft outline so he reads. */
.hero-pup svg { filter: drop-shadow(0 0 1px rgba(24, 81, 96, .55)) drop-shadow(0 2px 3px rgba(24, 81, 96, .12)); }
/* A soft, blurred light-blue glow behind the banner dog. */
.hero-pup::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 8%; width: 190%; aspect-ratio: 1.15; translate: -50% 18%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(168, 221, 217, .85), rgba(168, 221, 217, .45) 55%, rgba(168, 221, 217, 0)); filter: blur(10px); }
/* His butt wiggles along with the tail, swinging from where it meets his body. */
.hero-pup .butt { transform-box: fill-box; transform-origin: 100% 60%; animation: butt-wiggle 1.1s ease-in-out infinite; }
@keyframes butt-wiggle { 0%, 100% { rotate: 4deg; } 50% { rotate: -5deg; } }
@media (prefers-reduced-motion: reduce) { .hero-pup .butt { animation: none; } }

/* The light blue now washes across the whole banner: white on the left, fading to soft light blue
   on the right, strongest around the dog. */
.hero, .hero-sub { background:
  radial-gradient(ellipse 55% 85% at 90% 100%, rgba(168, 221, 217, .75), rgba(168, 221, 217, 0) 70%),
  linear-gradient(100deg, #ffffff 0%, #ffffff 30%, #e9f6f4 65%, #d6efed 100%); }
.hero-pup::before { display: none; }

/* Banner: a big waggy butt peeking up from the bottom-right corner (like the blog cards). */
.hero-pup { display: none; }
.hero-butt { position: absolute; right: 0; bottom: 0; width: 300px; height: 230px; z-index: 1; pointer-events: none; overflow: hidden; }
.hb-butt { position: absolute; right: 0; bottom: 0; width: 64%; height: 62%; background: #244c5c;
  border-radius: 46% 6% 0 0 / 50% 6% 0 0; transform-origin: 100% 100%; animation: hb-wiggle 1.2s ease-in-out infinite; }
.hb-tail { position: absolute; width: 22%; height: 52%; right: 30%; bottom: 46%; background: var(--mint);
  border-radius: 8% 62% 8% 62% / 5% 34% 5% 34%; transform: rotate(-24deg); transform-origin: 85% 100%;
  animation: hb-wag .6s ease-in-out infinite alternate; }
@keyframes hb-wag { from { rotate: -10deg; } to { rotate: 14deg; } }
@keyframes hb-wiggle { 0%, 100% { rotate: 0deg; } 50% { rotate: -2.5deg; } }
.hero-sub .hero-butt { width: 220px; height: 170px; }
@media (max-width: 760px) { .hero-butt, .hero-sub .hero-butt { width: 140px; height: 110px; } }
@media (prefers-reduced-motion: reduce) { .hb-tail, .hb-butt { animation: none; } }
/* Banner back to plain white (no gradient), so the waggy butt pops. */
.hero, .hero-sub { background: var(--white); }
/* Bigger butt wiggle, and hovering the banner makes it wag for everyone (user-started, brief). */
@keyframes hb-wiggle { 0%, 100% { rotate: 2deg; } 50% { rotate: -6deg; } }
.hb-butt { transform-origin: 70% 100%; }
.hero:hover .hb-butt { animation: hb-wiggle .45s ease-in-out 4 !important; }
.hero:hover .hb-tail { animation: hb-wag .25s ease-in-out 8 alternate !important; }
/* Only the tail wags; the butt stays still. */
.hb-butt, .hero:hover .hb-butt { animation: none !important; rotate: 0deg; }
/* A mirror-image butt in the bottom-left corner; its tail wags in step with the right one. */
.hero-butt-left { right: auto; left: 0; transform: scaleX(-1); }
/* Banner tails keep wagging the whole time, for everyone (Ginnie's call: it's a small, gentle motion). */
.hb-tail, .hero:hover .hb-tail { animation: hb-wag .6s ease-in-out infinite alternate !important; }

/* Process step numbers: dark blue leaves (the tail shape) with white numbers. */
.step::before { background: #244c5c; color: #fff; border-radius: 8% 62% 8% 62% / 6% 40% 6% 40%; width: 40px; height: 52px; line-height: 52px; }
.dark .step::before { background: var(--mint); color: var(--ink); }
.step { padding-top: 70px; }
.step:not(:last-child)::after { top: 26px; }

/* Dropdown menus under the main links. */
.has-sub { position: relative; display: flex; align-items: center; }
.has-sub > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -3px; opacity: .7; }
.sub { position: absolute; top: 100%; left: -8px; min-width: 250px; padding: 10px; background: #fff; border-radius: 14px;
  box-shadow: 0 12px 34px rgba(15, 58, 69, .18); display: none; z-index: 60; }
.sub-wide { min-width: 480px; display: none; grid-template-columns: 1fr 1fr; column-gap: 6px; }
.has-sub:hover .sub, .has-sub:focus-within .sub { display: block; }
.has-sub:hover .sub-wide, .has-sub:focus-within .sub-wide { display: grid; }
.sub a { display: block; color: var(--ink) !important; font-size: .9rem; font-weight: 600; padding: 9px 12px; border-radius: 9px; white-space: nowrap; }
.sub a:hover, .sub a[aria-current="page"] { background: var(--cream); color: var(--ink-deep) !important; }
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }   /* hover bridge */
@media (max-width: 1100px) {
  .has-sub { display: block; }
  .has-sub > a::after { display: none; }
  .sub, .sub-wide, .has-sub:hover .sub, .has-sub:hover .sub-wide, .has-sub:focus-within .sub { position: static; display: block; min-width: 0; padding: 0 0 6px 14px; background: none; box-shadow: none; }
  .sub a { color: #cfe0dc !important; font-weight: 500; padding: 7px 4px; }
  .sub a:hover, .sub a[aria-current="page"] { background: none; color: #fff !important; }
  /* Phone menu: sections fold away behind an arrow (site.js adds it); without scripts every page stays listed. */
  .js .has-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .js .has-sub > .sub, .js .has-sub > .sub-wide { grid-column: 1 / -1; min-width: 0; }
  .js .has-sub:not(.expanded) > .sub { display: none; }
  .sub-toggle { width: 44px; height: 44px; background: none; border: 0; color: #d7e7e2; cursor: pointer; display: grid; place-items: center; }
  .sub-toggle::before { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate .2s; }
  .has-sub.expanded > .sub-toggle::before { rotate: 225deg; translate: 0 2px; }
  .nav.open { max-height: calc(100vh - 78px); overflow-y: auto; overscroll-behavior: contain; }
}
section > .wrap > .dot-note { max-width: 52em; }

/* Photos rest muted (soft, low-saturation color) and come to full color on hover / mid-screen. */
.photo img, .inline-photo, .svc img, .person img, .post-card img {
  filter: saturate(.35) brightness(1.04) contrast(.94);
}
.sub-wide { min-width: 460px; }
.fetch-pup svg, .trail-pup svg { filter: drop-shadow(0 0 1px rgba(24, 81, 96, .6)) drop-shadow(0 1px 2px rgba(24, 81, 96, .12)); }
/* The main photo under each banner shows in full color right away. */
.intro .photo img { filter: none; }
.intro .photo img { transition: none; }
/* Calendly booking widget on the Contact page */
/* Booking page (/schedule/): Calendly's form on the page itself, given a fixed height a little taller than the form and the
   calendar that follows it, so the page scrolls and the form never does. (Calendly's routing forms don't report their height,
   so it can't size itself.) Phones stack the form into one column, which is taller. */
.booking { max-width: 1060px; margin: 0 auto; }
.calendly-inline-widget { min-width: 320px; height: 940px; border-radius: var(--radius); overflow: hidden; }
@media (max-width: 760px) { .calendly-inline-widget { height: 1150px; } }
.booking-alt { text-align: center; color: var(--muted); margin-top: 18px; }
/* The floating "Schedule a free meeting" link on every other page, sitting above the walking dog's path. */
.book-badge { position: fixed; right: 20px; bottom: 64px; z-index: 45; background: var(--ink); color: #fff; font: 700 .92rem/1 var(--sans);
  text-decoration: none; padding: 13px 20px; border-radius: 999px; box-shadow: 0 8px 24px rgba(15, 58, 69, .25); }
.book-badge:hover, .book-badge:focus-visible { background: var(--ink-deep); color: var(--mint); }
@media (max-width: 760px) { .book-badge { right: 12px; bottom: 54px; font-size: .82rem; padding: 10px 15px; } }

/* Events page: one card per upcoming event, a date tile on the left. */
.events-list { display: grid; gap: 18px; }
.event-card { display: grid; grid-template-columns: 84px 1fr; gap: 22px; background: #fff; border: 1px solid rgba(24,81,96,.12); border-radius: 18px; padding: 24px; }
.event-date { background: var(--ink); color: #fff; border-radius: 14px; text-align: center; padding: 12px 0; align-self: start; }
.event-month { display: block; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.event-day { display: block; font-size: 2rem; font-weight: 700; line-height: 1.1; }
.event-body h3 { margin: 0 0 6px; }
.event-when { color: var(--muted); margin: 0 0 10px; font-size: .95rem; }
.event-desc { margin: 0 0 14px; white-space: pre-line; }
.event-spots { color: var(--coral); font-weight: 600; margin: 0 0 12px; font-size: .9rem; }
.event-form { margin-top: 8px; border-top: 1px solid rgba(24,81,96,.12); padding-top: 18px; }
.event-form .field label { display: block; }
.event-form .field input { display: block; width: 100%; margin-top: 6px; }
.event-done { margin-top: 8px; background: #eefbe9; border-radius: 12px; padding: 14px 18px; }
.event-done p { margin: 4px 0 0; }
@media (max-width: 600px) { .event-card { grid-template-columns: 1fr; gap: 14px; padding: 20px; } .event-date { display: flex; gap: 8px; justify-content: center; align-items: baseline; padding: 8px; } .event-day { font-size: 1.3rem; } }
.form-error[hidden], .events-status[hidden] { display: none; }
/* Past events: the same cards, quieter (a grey date tile), under the upcoming ones. */
.events-past { margin-top: 56px; }
.events-past[hidden] { display: none; }
.events-past-list { display: grid; gap: 14px; margin-top: 18px; }
.event-card-past { background: transparent; padding: 18px 22px; }
.event-card-past .event-date { background: #e9eeef; color: var(--ink); }
.event-card-past .event-month { color: var(--muted); }
.event-card-past .event-desc { margin-bottom: 0; }
.event-card-past .event-desc + .event-recording { margin-top: 14px; }
.event-recording { display: inline-block; font-family: var(--sans); font-weight: 700; font-size: .95rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.event-recording::after { content: " \2192"; }
.event-recording:hover { color: var(--ink-deep); }

/* About us: the mission line and the grouped services list. */
.statement.mission { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.35; max-width: 46rem; }
.svc-groups .card h3 a { color: inherit; text-decoration: none; }
.svc-links { list-style: none; padding: 0; margin: 10px 0 0; }
.svc-links li { padding: 6px 0; border-top: 1px solid rgba(24,81,96,.1); }
.svc-links a { text-decoration: none; }
.svc-links a:hover { text-decoration: underline; }
/* With About Us and Events in the menu, mid-size screens tighten the links and drop the phone pill (it's in every banner). */
@media (min-width: 1101px) and (max-width: 1440px) {
  .nav a { padding: 8px 7px; font-size: .86rem; }
  .nav .btn { display: none; }
}

/* Our mission: the six core values as plain cards. One happy pup perches on the card you're scrolling over and jumps. */
.values-intro { max-width: 40em; margin: 0 auto 64px; text-align: center; }
.values-intro .statement { margin-bottom: 14px; }
.values-intro p:last-child { color: #d7e7e2; font-size: 1.08rem; margin: 0; }
.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 28px; max-width: 880px; margin: 0 auto; }
.value-tile { position: relative; perspective: 1200px; }
.value-flip { display: block; width: 100%; aspect-ratio: 1.4 / 1; min-height: 300px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; }
.value-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.3, 1.25, .4, 1); }
.value-flip[aria-pressed="true"] .value-inner { transform: rotateY(180deg); }
.value-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 26px; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.value-front { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 2px rgba(168, 221, 217, .28); transition: background .25s, translate .25s; }
.value-flip:hover .value-front { background: rgba(255, 255, 255, .15); translate: 0 -3px; }
.value-flip:focus-visible { outline: 3px solid var(--aqua); outline-offset: 4px; border-radius: 24px; }
.value-word { color: #fff; font: 800 clamp(1.5rem, 3.2vw, 2.1rem)/1.1 var(--sans); letter-spacing: -.01em; }
.value-hint { color: var(--aqua); font: 700 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.value-back { background: #e6eaeb; transform: rotateY(180deg); }
.value-back { gap: 10px; padding: 22px 26px; }
.value-back .value-word { color: var(--ink); font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.value-desc { color: var(--ink-deep); font-size: 1.05rem; line-height: 1.5; font-weight: 500; }
.value-perch { position: absolute; top: -34px; width: 56px; height: 56px; pointer-events: none; }
.value-perch[data-side="right"] { right: 24px; }
.value-perch[data-side="left"] { left: 24px; }
.values-pup { position: absolute; left: 0; bottom: 0; }
.values-pup svg { width: 52px; display: block; overflow: visible; transform-origin: 50% 90%; }
.value-perch[data-side="right"] .values-pup svg { transform: scaleX(-1); }
.values-pup { animation: pup-idle 2.6s ease-in-out infinite; }
@keyframes pup-idle { 50% { translate: 0 -2px; } }
.values-pup.hop-two svg { animation: hop-two 1s ease-out; }
.values-pup.hop-spin svg { animation: hop-spin .95s ease-in-out; }
.values-pup.hop-wiggle svg { animation: hop-wiggle 1s ease-in-out; }
.values-pup.hop-skip svg { animation: hop-skip 1s ease-in-out; }
@keyframes hop-two {
  0% { translate: 0 0; scale: .3 .3; }
  14% { translate: 0 0; scale: 1.08 .9; }
  32% { translate: 0 -26px; scale: .96 1.06; }
  50% { translate: 0 0; scale: 1.08 .9; }
  68% { translate: 0 -16px; scale: 1 1; }
  86% { translate: 0 0; scale: 1.05 .95; }
  100% { translate: 0 0; scale: 1 1; }
}
@keyframes hop-spin {
  0% { translate: 0 0; scale: .3 .3; rotate: 0deg; }
  18% { translate: 0 0; scale: 1.1 .88; rotate: 0deg; }
  55% { translate: 0 -42px; scale: 1 1; rotate: 360deg; }
  82% { translate: 0 0; scale: 1.1 .9; rotate: 360deg; }
  100% { translate: 0 0; scale: 1 1; rotate: 360deg; }
}
@keyframes hop-wiggle {
  0% { translate: 0 0; scale: .3 .3; rotate: 0deg; }
  15% { translate: 0 -12px; scale: 1 1; rotate: -14deg; }
  30% { translate: 0 0; rotate: 12deg; }
  45% { translate: 0 -14px; rotate: -12deg; }
  60% { translate: 0 0; rotate: 10deg; }
  75% { translate: 0 -8px; rotate: -6deg; }
  100% { translate: 0 0; scale: 1 1; rotate: 0deg; }
}
@keyframes hop-skip {
  0% { translate: 0 0; scale: .3 .3; }
  20% { translate: 12px -18px; scale: 1 1; }
  40% { translate: 20px 0; }
  60% { translate: 6px -18px; }
  80% { translate: -10px 0; }
  100% { translate: 0 0; scale: 1 1; }
}
.values-heart { position: absolute; top: -6px; left: 50%; margin-left: -8px; font-size: 1.1rem; line-height: 1; color: var(--coral); pointer-events: none; animation: heart-float 1s ease-out forwards; }
@keyframes heart-float { 0% { opacity: 0; translate: 0 6px; scale: .4; } 25% { opacity: 1; } 100% { opacity: 0; translate: var(--drift, 8px) -34px; scale: 1.1; } }
@media (max-width: 700px) {
  .values-grid { grid-template-columns: 1fr; gap: 48px; }
  .value-flip { aspect-ratio: auto; height: 280px; }
  .value-flip { height: 300px; }
  .value-desc { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .values-pup, .values-pup svg { animation: none !important; }
  .values-heart { display: none; }
  /* No turning over: the word simply gives way to its meaning. */
  .value-inner { transition: none; transform: none !important; }
  .value-front, .value-back { transform: none; transition: opacity .2s; }
  .value-back { opacity: 0; }
  .value-flip[aria-pressed="true"] .value-front { opacity: 0; }
  .value-flip[aria-pressed="true"] .value-back { opacity: 1; }
  .value-flip:hover .value-front { translate: none; }
}

/* The mission page's "What would a Foxhound do?" title (centered). */
.values-title { color: var(--aqua); }
.section-head:has(.values-title) { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 20px; }

.values-pup { z-index: 1; }
/* What he says: a short happy line that pops up beside him when you flip a value. */
.values-says { position: absolute; bottom: calc(100% + 10px); z-index: 3; white-space: nowrap; background: #fff; color: var(--ink-deep); font: 700 .85rem/1 var(--sans); padding: 9px 13px; border-radius: 14px; box-shadow: 0 0 0 2px var(--aqua), 0 8px 18px rgba(24, 81, 96, .14); pointer-events: none; animation: says-pop 2.4s ease-out forwards; }
.value-perch[data-side="right"] .values-says { right: 0; transform-origin: 85% 100%; }
.value-perch[data-side="left"] .values-says { left: 0; transform-origin: 15% 100%; }
.values-says::after { content: ""; position: absolute; top: 100%; width: 10px; height: 10px; background: #fff; box-shadow: 2px 2px 0 0 var(--aqua); transform: translateY(-5px) rotate(45deg); }
.value-perch[data-side="right"] .values-says::after { right: 22px; }
.value-perch[data-side="left"] .values-says::after { left: 22px; }
@keyframes says-pop {
  0% { opacity: 0; scale: .5; translate: 0 8px; }
  10% { opacity: 1; scale: 1.06; translate: 0 0; }
  16% { scale: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; translate: 0 -4px; }
}
@media (max-width: 700px) { .values-says { white-space: normal; width: max-content; max-width: 70vw; } }
@media (prefers-reduced-motion: reduce) { .values-says { animation: says-fade 2.4s linear forwards; } @keyframes says-fade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } } }

/* With an odd number of values, the last square sits centered under the rest. */
.value-tile:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 14px); }
@media (max-width: 700px) { .value-tile:last-child:nth-child(odd) { width: 100%; } }

/* Phones: less empty space between sections, service photos as wide strips instead of a screen each, the number stats two
   across, and a smaller floating "Schedule a free meeting" button so it covers less of the page. */
@media (max-width: 620px) {
  section { padding: 60px 0; }
  .section-head { margin-bottom: 28px; }
  .svc img { aspect-ratio: 16 / 9; }
  .stats { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .stat-num { font-size: 2.2rem; }
  .stat-label { font-size: .88rem; }
}
/* iPhones zoom the page in when you tap a form box whose text is under 16px; keep form text at 16px on phones and tablets. */
@media (max-width: 1100px) { input, select, textarea { font-size: 16px !important; } }
/* Phones: links big enough to tap without hitting the one next to them (about 40px tall). */
@media (max-width: 760px) {
  .site-footer li a { display: inline-block; padding: 10px 0; }
  .site-footer li { margin: 0; }
  .breadcrumbs a { display: inline-block; padding: 8px 2px; }
}
.term-none { margin: 18px 0; color: var(--muted); }

/* The last dropdown in the menu (Business insurance) sits near the right edge, so it opens toward the left to stay on screen. */
@media (min-width: 1101px) { .nav > .has-sub:last-of-type > .sub { left: auto; right: -8px; } }