/* ==========================================================================
   Szzan Kennel — public site stylesheet
   --------------------------------------------------------------------------
   OWNED BY THE BUSINESS, same as every Kadenza client's public site
   (docs/site-composition-model.md) — this is Szzan's own design, not a
   shared Kadenza look, and nothing here restyles or is restyled by another
   client's site.

   Brief from the client: bright, girly, lots of colour — like a butterfly.
   Papillon literally means "butterfly" in French (the breed is named for
   its ears), so the butterfly motif carries the whole site: the wordmark,
   the confetti-dot backdrops, the card gradients. Otterhounds get the same
   warmth but lean into paw prints and their water-loving, shaggy nature
   rather than being squeezed into a butterfly theme that isn't theirs.

   This palette is the future source for platforms/szzan/theme.css, once a
   workspace round happens — see platform.json openItems.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Quicksand:wght@400;500;600;700&display=swap");

:root{
  --paper:#FFF6FB; --bone:#FCEAF4; --card:#FFFFFF;
  --ink:#33184A; --ink-soft:#6E5A7E; --grey:#8A7797;
  --pink:#FF2E93; --pink-deep:#D6157A;
  --violet:#8A3FFB; --teal:#16C6B0; --sunshine:#FFC429; --coral:#FF7A59;
  --line:rgba(51,24,74,.14);
  --radius:26px; --radius-lg:34px;
  --shadow:0 22px 50px -26px rgba(138,63,251,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Quicksand,Arial,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;cursor:zoom-in}
a img,.sticker img,.logo-lockup img,.footer-social img{cursor:pointer}
h1,h2,h3{margin:0;font-family:Fredoka,"Trebuchet MS",sans-serif;font-weight:600}
.section{padding:96px 7vw}

/* -------------------------------------------------------------- stickers */
/* Painterly "watercolor sticker" accents — a butterfly for the Papillon
   half of the kennel, an otter for the Otterhound half (Otterhound ~ otter,
   too good a pun not to draw). Gradient-filled with a white spatter texture,
   inspired by a watercolor reference the client shared. Purely decorative:
   aria-hidden, inert, never the only carrier of information. Positioned
   per-instance with an inline style on each use rather than a grid of
   position classes, since every placement is a one-off. Gradients used by
   sticker shapes (wingA, wingB, otterBody, lavender) are defined once, in a
   hidden <svg> block near the top of <body> — see the HTML. */
.sticker{position:absolute;width:64px;height:64px;pointer-events:none;filter:drop-shadow(0 8px 14px rgba(51,24,74,.22));z-index:3}
.sticker svg{display:block;width:100%;height:100%}
.sticker img{display:block;width:100%;height:100%;object-fit:contain}
.sticker.sticker-sm{width:44px;height:44px}
.sticker.sticker-md{width:56px;height:56px}
.sticker.sticker-lg{width:84px;height:84px}
.sticker.sticker-xl{width:110px;height:110px}
.sticker.spin-slow{animation:sticker-drift 7s ease-in-out infinite}
/* Real photo/illustration stickers (otters) are much wider than tall —
   sticker-wide keeps the box's height from its size class but lets width
   follow the image's own aspect ratio instead of squashing into a square. */
.sticker.sticker-wide{width:auto}
.sticker.sticker-wide img{width:auto;height:100%}
@keyframes sticker-drift{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-10px) rotate(var(--r,0deg))}}
@media(prefers-reduced-motion:reduce){.sticker.spin-slow{animation:none}}
.eyebrow{margin:0 0 18px;display:inline-block;color:var(--pink-deep);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.eyebrow.light{color:#FDE3F2}

/* ------------------------------------------------------------- wordmark */
.mark{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;overflow:hidden;background:transparent}
.mark svg{width:100%;height:100%}
.mark img{width:100%;height:100%;object-fit:cover;display:block}
.logo-lockup{display:flex;align-items:center;gap:9px;font-family:Fredoka,sans-serif;font-weight:700;font-size:1.15rem;color:var(--ink);letter-spacing:.01em}
.logo-lockup .mark{width:34px;height:34px;color:var(--pink)}
.footer-logo .mark{width:30px;height:30px;color:var(--pink-deep)}

/* -------------------------------------------------------------- header */
.site-header{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:84px;padding:0 4vw;background:rgba(255,246,251,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.site-header nav{display:flex;gap:30px;font-size:13px;font-weight:700}
.site-header nav a{padding-bottom:5px;border-bottom:2px solid transparent;color:var(--ink-soft)}
.site-header nav a:hover,.site-header nav a.active{color:var(--pink-deep);border-color:var(--pink)}
.header-button{justify-self:end;padding:12px 22px;border-radius:999px;color:#fff;font-size:12px;font-weight:700;background:linear-gradient(120deg,var(--pink),var(--violet))}
.header-button:hover{filter:brightness(1.06)}
.profile-header{position:absolute;width:100%;background:transparent;border-bottom:0}
.profile-header .logo-lockup,.profile-header nav a{color:#fff}
.profile-header{background:rgba(51,24,74,.28)}

/* ---------------------------------------------------------------- buttons */
.button{display:inline-block;padding:15px 26px;border-radius:999px;font-size:13px;font-weight:700}
.button-light{color:var(--ink);background:#fff}
.button-dark{color:#fff;background:linear-gradient(120deg,var(--pink),var(--violet))}
.button-dark:hover,.button-light:hover{filter:brightness(1.05)}
.text-link{display:inline-block;padding-bottom:3px;border-bottom:2px solid var(--sunshine);font-size:13px;font-weight:700;color:var(--pink-deep)}
.text-link:hover{border-color:var(--pink)}

/* confetti-dot backdrop, used on every "dark" panel */
.confetti{background-color:var(--ink);background-image:
  radial-gradient(circle at 12% 22%, rgba(255,255,255,.16) 0 5px, transparent 6px),
  radial-gradient(circle at 78% 14%, rgba(255,196,41,.28) 0 6px, transparent 7px),
  radial-gradient(circle at 32% 78%, rgba(22,198,176,.26) 0 6px, transparent 7px),
  radial-gradient(circle at 88% 68%, rgba(255,46,147,.28) 0 6px, transparent 7px),
  radial-gradient(circle at 58% 40%, rgba(255,255,255,.12) 0 4px, transparent 5px),
  radial-gradient(circle at 8% 88%, rgba(138,63,251,.3) 0 6px, transparent 7px);
  background-size:520px 520px;background-repeat:repeat}

/* ----------------------------------------------------------------- hero */
/* All butterfly up here — no teal in this gradient at all, so the page
   visibly separates into a butterfly top and a river bottom (see
   .meadow-zone / .river-zone below), not just in content but in colour.
   The wash of overlapping soft-edged radial gradients is the same trick a
   watercolor painting uses: colour bleeding into colour rather than a hard
   edge, after a reference image the client shared. */
.hero{position:relative;display:flex;align-items:center;min-height:calc(100vh - 84px);overflow:hidden;color:#fff;background:
  radial-gradient(circle at 12% 20%, rgba(255,196,41,.5), transparent 42%),
  radial-gradient(circle at 84% 16%, rgba(255,122,89,.42), transparent 48%),
  radial-gradient(circle at 68% 78%, rgba(255,46,147,.42), transparent 52%),
  radial-gradient(circle at 18% 80%, rgba(138,63,251,.55), transparent 52%),
  linear-gradient(160deg,#6A3FD9 0%,#B23FD9 45%,#FF2E93 78%,#FF7A59 100%)}
.hero::before{content:"";position:absolute;inset:0;background-image:
  radial-gradient(circle at 10% 15%, rgba(255,255,255,.3) 0 55px, transparent 58px),
  radial-gradient(circle at 86% 62%, rgba(255,255,255,.2) 0 75px, transparent 78px),
  radial-gradient(circle at 54% 88%, rgba(255,255,255,.18) 0 42px, transparent 45px),
  radial-gradient(circle at 30% 45%, rgba(255,255,255,.14) 0 5px, transparent 6px),
  radial-gradient(circle at 74% 30%, rgba(255,255,255,.16) 0 4px, transparent 5px)}
.hero-copy{position:relative;z-index:2;max-width:720px;margin:0 auto;padding:90px 8vw 70px;text-align:center}
.hero h1{margin:0 0 26px;font-size:clamp(46px,6.4vw,84px);line-height:1.02;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:#FFE985}
.hero-copy>p:not(.eyebrow){max-width:560px;margin:0 auto;color:rgba(255,255,255,.92);font-size:17px;line-height:1.75}
.actions{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:34px;flex-wrap:wrap}

/* Real hero photographs, floating like framed snapshots among the sticker
   illustrations — deliberately not a full-bleed hero image, so the
   hand-drawn butterfly/otter motif and the gradient wash stay the star and
   the photos read as a scattered, playful accent rather than a swap to a
   conventional photo hero. Hidden below 1000px alongside .sticker, for the
   same reason: absolute positions tuned for a wide layout collide with
   text once the hero narrows to a single column. */
.hero-photo{position:absolute;z-index:2;width:280px;padding:10px 10px 26px;background:#fff;border-radius:16px;box-shadow:0 22px 40px -18px rgba(24,10,30,.55);transform:rotate(var(--r,0deg))}
.hero-photo img{border-radius:6px;aspect-ratio:4/5;object-fit:cover}

/* ------------------------------------------------------------------ intro */
.intro{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8vw;background:var(--bone)}
.intro h2,.section-heading h2,.gallery h2{font-size:clamp(38px,4.6vw,58px);line-height:1.05}
.intro-copy{max-width:560px;padding-top:20px;color:var(--ink-soft);font-size:15px;line-height:1.85}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:46px;flex-wrap:wrap}
.section-heading>p{max-width:360px;color:var(--grey);font-size:13px;line-height:1.7}

/* --------------------------------------------------------------- meadow */
/* The top of the home page: pure butterfly-meadow territory for the
   Papillons. Warm blush-lavender wash (no teal, same rule as .hero),
   generous whitespace for stickers to float in, then straight into the
   Papillon grid — no card/section seam between "here's the breed" and
   "here are the dogs," unlike the old .breed-split treatment. */
.meadow-zone{position:relative;overflow:hidden;padding:100px 7vw 120px;background:
  radial-gradient(circle at 88% 8%, rgba(255,196,41,.28), transparent 46%),
  radial-gradient(circle at 6% 70%, rgba(255,46,147,.16), transparent 50%),
  linear-gradient(180deg,var(--bone) 0%,var(--paper) 100%)}
.meadow-zone .zone-heading{position:relative;z-index:2;max-width:640px;margin:0 0 48px}
.meadow-zone .zone-heading h2{font-size:clamp(36px,4.6vw,56px);line-height:1.05}
.meadow-zone .zone-heading p{margin:16px 0 0;max-width:480px;color:var(--ink-soft);font-size:15px;line-height:1.8}
.zone-grid{position:relative;z-index:2}

/* -------------------------------------------------------------- wave divider */
/* The seam between meadow and river — an actual drawn wave, not just a
   colour change, so the page reads as one continuous landscape (meadow
   up top, water below) rather than two stacked sections. */
.wave-divider{display:block;width:100%;height:clamp(60px,9vw,120px);background:var(--paper)}
.wave-divider path{fill:var(--ink)}

/* --------------------------------------------------------------- river */
/* The bottom of the home page: Otterhound territory. Deep ink-plum "water"
   with the confetti-dot treatment retuned toward teal/violet ripples, an
   otter/paw sticker cluster, the Otterhound grid, then the closing
   enquiry CTA lives right in the river rather than a separate section —
   one continuous scene from breed intro to "get in touch." */
.river-zone{position:relative;overflow:hidden;padding:56px 7vw 110px;color:#fff;background:var(--ink)}
.river-zone::before{content:"";position:absolute;inset:0;background-image:
  radial-gradient(circle at 14% 18%, rgba(22,198,176,.22) 0 90px, transparent 92px),
  radial-gradient(circle at 82% 55%, rgba(138,63,251,.28) 0 110px, transparent 112px),
  radial-gradient(circle at 46% 92%, rgba(22,198,176,.16) 0 70px, transparent 72px),
  radial-gradient(circle at 90% 12%, rgba(255,255,255,.08) 0 3px, transparent 4px),
  radial-gradient(circle at 30% 60%, rgba(255,255,255,.08) 0 3px, transparent 4px)}
.river-zone .zone-heading{position:relative;z-index:2;max-width:640px;margin:0 0 48px}
.river-zone .zone-heading p.eyebrow{color:#8CF0DE}
.river-zone .zone-heading h2{font-size:clamp(36px,4.6vw,56px);line-height:1.05}
.river-zone .zone-heading p:not(.eyebrow){margin:16px 0 0;max-width:480px;color:rgba(255,255,255,.82);font-size:15px;line-height:1.8}
.river-contact{position:relative;z-index:2;margin:80px auto 0;max-width:640px;padding:54px 6vw;text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);backdrop-filter:blur(2px)}
.river-contact h3{margin:0 0 14px;font-size:clamp(28px,3.4vw,40px);color:#fff}
.river-contact p{margin:0 auto 26px;max-width:460px;color:rgba(255,255,255,.85);font-size:14px;line-height:1.7}
/* Dog cards default to an ink background, same colour as .river-zone itself
   — without a border they'd vanish into the backdrop, unlike on .paper /
   .bone sections where the card's own shadow does the separating. */
.river-zone .dog-card{border:1px solid rgba(255,255,255,.14);box-shadow:0 22px 50px -20px rgba(0,0,0,.6)}

/* -------------------------------------------------------------- dog grid */
.dog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.dog-grid.featured{grid-template-columns:repeat(3,1fr)}
.dog-card{position:relative;min-height:420px;border-radius:var(--radius);overflow:hidden;color:#fff;background:var(--ink);box-shadow:var(--shadow);transition:transform .25s ease}
.dog-card:hover{transform:translateY(-4px)}
.dog-card>img{position:absolute;inset:0;height:100%;object-fit:cover;transition:transform .6s}
.dog-card:hover>img{transform:scale(1.045)}
.card-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(24,10,30,.82),transparent 58%)}
.card-copy{position:absolute;right:20px;bottom:22px;left:20px}
.card-copy small{display:inline-block;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.22);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.card-copy h3{margin:10px 0 14px;font-size:26px}
.card-copy span{display:flex;justify-content:space-between;padding-top:10px;border-top:1px solid rgba(255,255,255,.4);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.section-cta{position:relative;z-index:2;margin:36px 0 0;text-align:center}
.empty-dogs{grid-column:1/-1;padding:70px 8vw;text-align:center;background:var(--bone);border:1px dashed var(--line);border-radius:var(--radius-lg)}
.empty-dogs h3{margin:14px 0}
.empty-dogs p:last-child{color:var(--grey);font-size:13px}

/* -------------------------------------------------------------- values */
.values{display:grid;grid-template-columns:1fr 1fr;min-height:640px}
.values-art{position:relative;background:linear-gradient(160deg,var(--teal),var(--pink))}
.values-art::before{content:"";position:absolute;inset:0;background-image:
  radial-gradient(circle at 20% 30%, rgba(255,255,255,.24) 0 40px, transparent 42px),
  radial-gradient(circle at 70% 65%, rgba(255,255,255,.18) 0 60px, transparent 62px),
  radial-gradient(circle at 60% 15%, rgba(255,255,255,.2) 0 26px, transparent 28px)}
.values-copy{display:flex;flex-direction:column;justify-content:center;padding:90px 7vw;color:#fff;background:var(--ink)}
.values-copy h2{margin:0 0 26px;font-size:clamp(36px,4.4vw,54px)}
.values-copy>p:not(.eyebrow){color:rgba(255,255,255,.85);font-size:15px;line-height:1.8}
.value{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:20px 0;border-top:1px solid rgba(255,255,255,.18)}
.value span{color:var(--sunshine);font-family:Fredoka,sans-serif;font-size:22px;font-weight:700}
.value p{margin:0;color:rgba(255,255,255,.82);font-size:13px;line-height:1.6}
.value strong{display:block;margin-bottom:5px;color:#fff;font-size:15px}

/* -------------------------------------------------------------- contact */
.contact{position:relative;color:#fff;text-align:center;overflow:hidden}
.contact h2{margin:0;font-size:clamp(44px,5.6vw,72px);line-height:1.05;position:relative}
.contact>p:not(.eyebrow){position:relative;max-width:520px;margin:22px auto 28px;color:rgba(255,255,255,.9)}
.contact .eyebrow{position:relative}
.contact .button{position:relative}

/* Flat and centred: logo, tagline and copyright sit on one wrapping row,
   centred as a group (not spread edge to edge with justify-content:
   space-between, which read off-centre) — the longer registration
   sentence gets its own centred line underneath so it never forces the
   main row to wrap awkwardly. */
footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 28px;padding:28px 6vw;color:var(--ink-soft);background:var(--bone);font-size:12px;font-weight:600;text-align:center}
.footer-reg{flex-basis:100%;margin:0;color:var(--grey);font-size:11px;font-weight:500}
.footer-credit{flex-basis:100%;margin:0;color:var(--grey);font-size:11px;font-weight:500}
.footer-credit a{color:var(--pink-deep);font-weight:700;border-bottom:1px solid transparent}
.footer-credit a:hover{border-color:currentColor}
.footer-social{display:flex;gap:16px;justify-content:center}
.footer-social-link{padding-bottom:3px;border-bottom:1px solid transparent;color:var(--pink-deep);font-weight:700}
.footer-social-link:hover{border-color:currentColor}

/* ----------------------------------------------------------- profile hero */
.profile-hero{position:relative;height:min(78vh,760px);min-height:520px;color:#fff}
.profile-hero>img{height:100%;object-fit:cover}
.profile-hero .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(24,10,30,.78),transparent 60%)}
.back-link{position:absolute;z-index:3;top:110px;left:5vw;font-weight:700;font-size:13px}
.profile-title{position:absolute;bottom:6vw;left:6vw}
.profile-title h1{margin:14px 0 10px;font-size:clamp(48px,7vw,88px);line-height:1}
.profile-title>p:last-child{font-size:13px;font-weight:600;color:rgba(255,255,255,.85)}
.profile-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:8vw;align-items:end;background:var(--paper)}
.profile-intro blockquote{margin:0;font-family:Fredoka,sans-serif;font-weight:600;font-size:clamp(28px,3.4vw,42px);line-height:1.2;color:var(--pink-deep)}
.facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.fact{padding:16px 0;border-bottom:1px solid var(--line)}
.fact small{display:block;color:var(--grey);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.fact span{font-family:Fredoka,sans-serif;font-weight:600;font-size:20px}
.profile-enquire{grid-column:1/-1;margin:30px 0 0}

/* --------------------------------------------------------------- story */
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:7vw;align-items:center}
.story>img{height:520px;border-radius:var(--radius-lg);object-fit:cover;box-shadow:var(--shadow)}
.story h2{margin:0 0 26px;font-size:clamp(34px,4.4vw,52px)}
.story-copy>p:not(.eyebrow){color:var(--ink-soft);font-size:15px;line-height:1.9}
.story-hero{position:relative;max-width:820px;padding-bottom:10px;background:var(--paper)}
.story-hero h1{margin:6px 0 0;font-size:clamp(38px,5.4vw,68px);line-height:1.02;color:var(--ink)}

/* ------------------------------------------------------------ story-feature
   A photo + extended narrative, two columns — same grid mechanics as the
   old .values section it replaced, but with a real photo instead of a
   decorative gradient, and its own copy styling (light, not the dark ink
   panel .values used) so it doesn't read as a "why choose us" feature
   list. */
.story-feature{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:600px}
.story-feature-photo{position:relative;overflow:hidden}
.story-feature-photo img{display:block;width:100%;height:100%;object-fit:cover}
.story-feature-copy{position:relative;display:flex;flex-direction:column;justify-content:center;padding:90px 7vw;background:var(--bone)}
.story-feature-copy h2{margin:0 0 22px;font-size:clamp(34px,4.2vw,50px);color:var(--ink)}
.story-feature-copy p{margin:0 0 18px;max-width:520px;color:var(--ink-soft);font-size:15px;line-height:1.85}
.story-feature-copy p:last-child{margin-bottom:0}
@media(max-width:900px){.story-feature{grid-template-columns:1fr}.story-feature-photo{min-height:340px}}

/* --------------------------------------------------------- verified badge */
/* Replaces the old story-close CTA section: real, sourced facts (Dogs
   Victoria registration, Dogz Online membership) rather than illustration,
   so this card is deliberately calmer than the rest of the page — a white
   certificate-style card instead of another gradient panel. Badge icons are
   Szzan's own (wingA/wingB gradients, same defs as index.html's stickers),
   not a reproduction of Dogz Online's own badge artwork. */
.verified-section{display:flex;justify-content:center;background:var(--paper)}
.verified-card{max-width:640px;width:100%;padding:52px 6vw;text-align:center;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.verified-badges{display:flex;justify-content:center;gap:22px;margin-bottom:22px}
.verified-badges svg{width:64px;height:auto;filter:drop-shadow(0 8px 14px rgba(51,24,74,.18))}
.verified-card h2{font-size:clamp(30px,3.6vw,42px);margin-bottom:14px}
.verified-intro{max-width:460px;margin:0 auto 26px;color:var(--ink-soft);font-size:14px;line-height:1.75}
.verified-checks{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.verified-checks span{padding:9px 18px;border-radius:999px;color:var(--pink-deep);background:var(--bone);font-size:12px;font-weight:700}
.verified-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left}
.verified-facts small{display:block;margin-bottom:6px;color:var(--grey);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.verified-facts span{font-family:Fredoka,sans-serif;font-weight:600;font-size:15px;color:var(--ink);line-height:1.3}
.verified-note{max-width:460px;margin:26px auto 0;color:var(--grey);font-size:12px;line-height:1.8}

/* -------------------------------------------------------------- gallery */
.gallery{background:var(--bone)}
.gallery h2{margin-bottom:12px}
.gallery-note{margin:0 0 34px;max-width:540px;color:var(--grey);font-size:13px;line-height:1.7}

/* A non-interactive mosaic of real photographs — used on the breed pages
   (papillons.html / otterhounds.html) instead of the single-dog slideshow,
   since this gallery isn't tied to one profile. Uniform 3x2 grid — six
   photos divide evenly, so there's no spanning row to leave a gap. */
.photo-mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:180px;gap:14px}
.photo-mosaic img{width:100%;height:100%;border-radius:var(--radius);object-fit:cover;box-shadow:var(--shadow)}

/* Small photographer/source attribution under a photo, distinct from the
   Kellie Jayne credit line in the footer — used where a specific image
   carries its own separate photographer (e.g. an archival show-win photo). */
.photo-credit{display:block;margin-top:14px;color:var(--grey);font-size:11px}
.slideshow{position:relative}
.slides{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.slide{flex:0 0 78%;margin:0;scroll-snap-align:center}
.slide img{width:100%;height:480px;border-radius:var(--radius-lg);object-fit:cover}
.slide-nav,.slide-dots,.slide-count{display:none}
.slideshow.is-live .slides{display:block;overflow:visible}
.slideshow.is-live .slide{display:none}
.slideshow.is-live .slide.is-current{display:block}
.slideshow.is-live .slide-nav{display:grid}
.slideshow.is-live .slide-dots{display:flex}
.slideshow.is-live .slide-count{display:block}
.slide-nav{position:absolute;top:50%;transform:translateY(-50%);place-items:center;width:52px;height:52px;border:0;border-radius:50%;background:linear-gradient(120deg,var(--pink),var(--violet));color:#fff;font-size:26px;line-height:1;cursor:pointer;box-shadow:var(--shadow)}
.slide-nav:hover{filter:brightness(1.08)}
.slide-nav.prev{left:18px}
.slide-nav.next{right:18px}
.slide-dots{gap:9px;justify-content:center;margin-top:20px}
.slide-dot{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer}
.slide-dot[aria-selected="true"]{background:var(--pink)}
.slide-count{margin:14px 0 0;color:var(--grey);font-family:Fredoka,sans-serif;font-weight:600;font-size:16px;text-align:center}

/* ---------------------------------------------------------------- video */
.video{display:grid;grid-template-columns:.8fr 1.2fr;gap:7vw;align-items:center;padding:90px 7vw;color:#fff;background:var(--ink)}
.video h2{margin:0;font-size:clamp(34px,4.4vw,52px)}
.video-box{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:16/9;text-align:center;border-radius:var(--radius-lg);background:linear-gradient(150deg,rgba(255,46,147,.5),rgba(138,63,251,.75))}
.play{display:grid;place-items:center;width:60px;height:60px;padding-left:4px;border:2px solid #fff;border-radius:50%}
.video-box p{margin:15px 0 5px;font-family:Fredoka,sans-serif;font-weight:600;font-size:22px}
.video-box small{color:rgba(255,255,255,.8)}

/* ------------------------------------------------------------ more dogs */
.more-dogs{background:var(--bone)}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.more-card{position:relative;height:250px;border-radius:var(--radius);overflow:hidden;color:#fff}
.more-card img{height:100%;object-fit:cover;filter:brightness(.78);transition:transform .5s}
.more-card:hover img{transform:scale(1.05)}
.more-card span{position:absolute;right:18px;bottom:16px;left:18px;display:flex;justify-content:space-between;font-family:Fredoka,sans-serif;font-weight:600;font-size:22px}
.missing{min-height:70vh;padding-top:170px;text-align:center}
.missing h1{font-size:clamp(42px,6vw,72px)}

/* ------------------------------------------------------------ enquiries */
.enquiries-hero{position:relative;max-width:760px;padding-bottom:10px;background:var(--paper)}
.enquiries-hero h1{margin:14px 0 18px;font-size:clamp(38px,5.4vw,64px);line-height:1.05}
.enquiries-hero h1 em{font-style:normal;color:var(--pink-deep)}
.enquiry-context:not([hidden]){display:inline-block;margin-top:6px;padding:9px 18px;border-radius:999px;color:#fff;background:linear-gradient(120deg,var(--pink),var(--violet));font-size:12px;font-weight:700}
.enquiries-layout{padding-top:30px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.6fr);gap:6vw;align-items:start;background:var(--paper)}
.dog-form{padding:40px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.form-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px;flex-wrap:wrap}
.form-heading h2{font-size:32px}
.form-heading>p{color:var(--grey);font-size:12px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.form-grid label{display:flex;flex-direction:column;gap:8px;color:var(--ink-soft);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:13px 15px;color:var(--ink);background:var(--bone);border:1px solid transparent;border-radius:14px;font:14px Quicksand,Arial,sans-serif}
.form-grid textarea{resize:vertical}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:none;border-color:var(--pink)}
.form-grid small{color:var(--grey);font-weight:500;letter-spacing:0;text-transform:none}
.full-field{grid-column:1/-1}
.form-actions{display:flex;align-items:center;gap:22px;margin-top:32px;flex-wrap:wrap}
.dog-form button{border:0;cursor:pointer;font-family:inherit}
.form-message{margin:0;color:var(--grey);font-size:12px}
.form-message[data-tone="error"]{color:#B23A5E}
.form-message[data-tone="success"]{color:#1F9E86;font-weight:700}
.enquiry-aside{display:grid;gap:18px;position:sticky;top:104px}
.enquiry-aside-card{padding:26px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}
.reg-callout{display:flex;flex-direction:column;gap:3px;margin:0 0 14px;padding:14px 16px;color:var(--ink-soft);background:var(--bone);border-radius:14px;font-size:12px}
.reg-callout strong{color:var(--pink-deep);font-family:Fredoka,sans-serif;font-size:14px;font-weight:600}
.enquiry-steps{display:grid;gap:2px;margin:14px 0 0;padding:0;list-style:none;counter-reset:step}
.enquiry-steps li{display:grid;grid-template-columns:26px 1fr;gap:11px;padding:12px 0;border-top:1px solid var(--line);color:var(--grey);font-size:12px;line-height:1.6}
.enquiry-steps li:first-child{border-top:0}
.enquiry-steps li::before{counter-increment:step;content:counter(step);grid-row:span 2;display:grid;place-items:center;align-self:start;width:24px;height:24px;border-radius:50%;color:#fff;background:linear-gradient(120deg,var(--pink),var(--violet));font-size:11px;font-weight:700}
.enquiry-steps strong{display:block;color:var(--ink);font-weight:700}
/* Without an explicit grid-row on the ::before number, CSS Grid's default
   row-major auto-placement puts the description text (the bare text node
   after <strong>) into the NEXT row's column 1 — the 24px number column —
   instead of continuing in column 2 under the heading. That collapses the
   description to one word per line. Spanning the number down both rows
   frees column 2 for both <strong> and the text that follows it. */

/* ------------------------------------------------------------ responsive */
@media(max-width:1000px){
  .site-header{grid-template-columns:1fr auto;height:70px}
  .site-header nav{display:none}
  /* Decorative sticker positions are tuned for the wide desktop layout;
     below this width sections narrow to single-column and stickers start
     colliding with heading text (e.g. an otter sticker over the river CTA
     heading), so they're simplest to hide rather than reposition one by
     one for every breakpoint. */
  .sticker,.hero-photo{display:none}
  .hero{min-height:calc(100svh - 70px)}
  .section{padding:70px 6vw}
  .intro,.profile-intro,.story,.video{grid-template-columns:1fr;gap:44px}
  .dog-grid,.dog-grid.featured{grid-template-columns:1fr 1fr}
  .meadow-zone,.river-zone{padding-left:6vw;padding-right:6vw}
  .river-contact{padding:40px 6vw}
  .values{grid-template-columns:1fr}
  .values-art{min-height:280px}
  .story>img{height:420px}
  .slide img{height:400px}
  .enquiries-layout{grid-template-columns:1fr}
  .enquiry-aside{position:static}
  .photo-mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:220px}
}
@media(max-width:620px){
  .hero-copy{padding:70px 6vw 50px}
  .actions{flex-direction:column}
  .dog-grid,.dog-grid.featured,.more-grid{grid-template-columns:1fr}
  .dog-card{min-height:380px}
  .facts{grid-template-columns:1fr}
  .verified-facts{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .full-field{grid-column:auto}
  .photo-mosaic{grid-template-columns:1fr;grid-auto-rows:220px}
  .form-heading,.form-actions{flex-direction:column;align-items:flex-start}
  .profile-title{left:6vw;right:6vw}
}

/* -------------------------------------------------------------- lightbox
   Click-to-expand for real photography site-wide (wired from site.js via
   event delegation, so it covers both static <img> tags and dog cards
   rendered later from Animals data). Deliberately skips anything that's
   already a link/button (dog cards navigate instead — see site.js) or
   decorative (stickers, the logo mark, footer social icons). */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:6vh 6vw;background:rgba(12,6,18,0);opacity:0;pointer-events:none;transition:opacity .25s ease,background .25s ease}
.lightbox.is-open{background:rgba(12,6,18,.92);opacity:1;pointer-events:auto}
.lightbox-img{display:block;width:auto;max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 30px 70px -20px rgba(0,0,0,.6);transform:scale(.96);transition:transform .25s ease;cursor:default}
.lightbox.is-open .lightbox-img{transform:scale(1)}
.lightbox-close{position:absolute;top:20px;right:22px;width:44px;height:44px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.lightbox-close:hover{background:rgba(255,255,255,.26)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}