/* ==========================================================================
   ROYAL SILK SHIH TZUS
   royalsilkshihtzus.com · built from scratch, nothing carried over

   THE LAYOUT is the client's reference (mydoodlepuppy.com), and so is the
   LIGHTNESS: white header, white and soft-cream bands, nothing dark anywhere
   but the text and the photographs. The client's instruction on 31 Aug 2026:
   "the white should be white and not black". The first cut had a dark header
   band and dark card covers and read like the bully site. This does not.

   The accent is cocoa, sampled from the puppies' own coats (#C0A080 darkened
   to pass contrast on white). Every button is either cocoa with white text or
   an outlined cocoa on a light ground, so no label can blend into its button.
   On the photo hero the outlined button is white on the dark overlay.

   Poppins body and Abril Fatface display, as on the reference.

   One stylesheet, mobile first, no framework and no build step.
   ========================================================================== */

/* ---- tokens ------------------------------------------------------------- */
:root {
  --ink:        #241C1A;   /* text */
  --ink-soft:   #4A3A35;
  --ink-mute:   #6F5F59;   /* still 4.5:1 on white */
  --paper:      #FFFFFF;   /* body ground, header, cards */
  --shell:      #FAF6F3;   /* the quiet band */
  --cocoa:      #A9784F;   /* the accent, lightened (client, 1 Sep) */
  --cocoa-deep: #7A5233;   /* hover, and text on light ground */
  --cream:      #F2E5D8;   /* the secondary colour (client, 1 Sep) */
  --line:       #E8DCD2;

  --wrap: 1180px;
  --measure: 66ch;

  --sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  --r: 14px;
  --pill: 999px;
  --shadow: 0 1px 2px rgba(36,28,26,.05), 0 12px 32px rgba(36,28,26,.08);
}

/* ---- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
  background: var(--paper);
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--cocoa); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cocoa-deep); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: .005em;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 5.2vw, 3.3rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
h3 { font-size: clamp(1.05rem, 2.2vw, 1.3rem); }
p, ul, ol { margin: 0 0 1.15em; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: .4em; }
strong { font-weight: 600; }
.muted { color: var(--ink-mute); }
.centered { text-align: center; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--cocoa); color: #fff; padding: .7rem 1.1rem; }
.skip-link:focus { left: .5rem; top: .5rem; }
:focus-visible { outline: 3px solid var(--cocoa); outline-offset: 2px; }

/* ==========================================================================
   HEADER — white, logo left, nav centre, CTA right, contact line beneath
   ========================================================================== */
.site-header { background: var(--cream); color: var(--ink); position: sticky; top: 0; z-index: 100; }
.site-header__inner {
  max-width: var(--wrap); margin: 0 auto; padding: .6rem 1.1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.site-logo { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; }
.site-logo img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: none; }
.site-logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.site-logo__name { font-family: var(--display); font-size: clamp(1.1rem, 3.4vw, 1.4rem); letter-spacing: .01em; color: var(--ink); }
.site-logo__sub { font-size: .66rem; text-transform: uppercase; letter-spacing: .22em; color: var(--cocoa); margin-top: .2rem; }
.site-logo:hover .site-logo__name { color: var(--cocoa-deep); }

.nav-desktop { display: none; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.site-header__end { display: none; }

.socials { list-style: none; margin: 0; padding: 0; display: flex; gap: .3rem; }
.socials a { display: inline-flex; padding: .35rem; color: var(--ink); border-radius: 50%; }
.socials a:hover { background: var(--cream); color: var(--cocoa-deep); }

.nav-burger {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; border: 1px solid var(--line); color: var(--ink);
  font: 500 .82rem/1 var(--sans); letter-spacing: .04em;
  padding: .6rem .9rem; border-radius: var(--pill); cursor: pointer;
}
.nav-burger:hover { background: var(--shell); }
.nav-burger__bars { display: block; width: 17px; }
.nav-burger__bars span { display: block; height: 2px; background: currentColor; margin: 3px 0; transition: transform .18s, opacity .18s; }
.nav-burger[aria-expanded="true"] .nav-burger__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger__bars span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .nav-burger__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav-panel { position: fixed; inset: 0; z-index: 150; background: rgba(36,28,26,.35); }
.nav-panel[hidden] { display: none; }
.nav-panel__inner {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88vw);
  background: var(--paper); color: var(--ink); padding: 1.1rem 1.2rem 2rem;
  overflow-y: auto; -webkit-overflow-scrolling: touch; animation: slidein .2s ease;
  box-shadow: -12px 0 40px rgba(36,28,26,.15);
}
@keyframes slidein { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav-panel__inner { animation: none; } html { scroll-behavior: auto; } }

.nav-close { background: none; border: 0; color: var(--ink); font-size: 2rem; line-height: 1; cursor: pointer; padding: .1rem .4rem; margin: 0 0 .5rem auto; display: block; }

.nav-list--mobile { border-top: 1px solid var(--line); }
.nav-list--mobile > li { border-bottom: 1px solid var(--line); margin: 0; }
.nav-list--mobile a {
  color: var(--ink); text-decoration: none; display: block; padding: .9rem .2rem;
  font-weight: 500; font-size: .98rem;
}
.nav-list--mobile a:hover, .nav-list--mobile a[aria-current="page"] { color: var(--cocoa-deep); }
.nav-list--mobile .nav-parent { display: flex; align-items: center; justify-content: space-between; }
.nav-list--mobile .nav-parent a { flex: 1; }
.nav-toggle { background: none; border: 0; color: inherit; cursor: pointer; padding: .7rem .5rem; display: inline-flex; align-items: center; }
.nav-toggle svg { transition: transform .18s; }
.nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-list--mobile .nav-sub { list-style: none; margin: 0 0 .5rem; padding: 0 0 0 .9rem; border-left: 2px solid var(--cream); display: none; }
.nav-list--mobile .nav-sub.is-open { display: block; }
.nav-list--mobile .nav-sub a { padding: .55rem .2rem; font-size: .9rem; font-weight: 400; color: var(--ink-soft); }
.nav-panel__cta { margin: 1.3rem 0 .8rem; }
.nav-panel__cta .btn { width: 100%; }
.nav-panel__foot { font-size: .88rem; color: var(--ink-mute); }
.nav-panel__foot a { color: var(--ink); }
body.nav-open { overflow: hidden; }

@media (min-width: 1000px) {
  .nav-burger { display: none; }
  .nav-panel { display: none !important; }
  .site-header__inner { padding: .75rem 1.1rem; }
  .site-logo img { width: 68px; height: 68px; }
  .nav-desktop { display: block; flex: 1; }
  .nav-desktop .nav-list { display: flex; align-items: center; justify-content: center; gap: .15rem; }
  .nav-desktop .nav-item { position: relative; margin: 0; }
  .nav-desktop .nav-item > a, .nav-desktop .nav-parent > a {
    display: block; padding: .6rem .7rem; color: var(--ink); text-decoration: none;
    font-size: .92rem; font-weight: 500; letter-spacing: .01em;
  }
  .nav-desktop .nav-item > a:hover, .nav-desktop .nav-parent > a:hover { color: var(--cocoa-deep); }
  .nav-desktop .is-current > a, .nav-desktop .is-current > .nav-parent > a,
  .nav-desktop .is-ancestor > .nav-parent > a { color: var(--cocoa-deep); text-decoration: underline; text-decoration-color: var(--cocoa); text-decoration-thickness: 2px; text-underline-offset: 7px; }
  .nav-desktop .nav-parent { display: flex; align-items: center; }
  .nav-desktop .nav-toggle { padding: .55rem .3rem .55rem 0; color: var(--ink-mute); }
  .nav-desktop .nav-sub {
    position: absolute; top: 100%; left: 0; min-width: 250px; list-style: none;
    margin: 0; padding: .45rem; background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: 0 18px 40px rgba(36,28,26,.14);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s, transform .16s, visibility .16s;
  }
  .nav-desktop .nav-list > li:last-child > .nav-sub,
  .nav-desktop .nav-list > li:nth-last-child(2) > .nav-sub { left: auto; right: 0; }
  .nav-desktop .nav-sub { max-width: calc(100vw - 2rem); }
  .nav-desktop .has-children:hover > .nav-sub,
  .nav-desktop .has-children:focus-within > .nav-sub { opacity: 1; visibility: visible; transform: none; }
  .nav-desktop .nav-sub li { margin: 0; }
  .nav-desktop .nav-sub a { display: block; padding: .55rem .75rem; color: var(--ink); text-decoration: none; font-size: .88rem; border-radius: 8px; }
  .nav-desktop .nav-sub a:hover { background: var(--shell); color: var(--cocoa-deep); }
  .nav-desktop .nav-sub .is-current a { color: var(--cocoa-deep); font-weight: 500; }

  .site-header__end { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
  .site-header__end .socials { order: -1; }
  .site-header__contact { margin: 0; font-size: .8rem; color: var(--ink-mute); }
  .site-header__contact a { color: var(--ink-mute); text-decoration: none; }
  .site-header__contact a:hover { color: var(--cocoa-deep); }
}
@media (min-width: 1000px) and (max-width: 1180px) {
  .nav-desktop .nav-item > a, .nav-desktop .nav-parent > a { font-size: .84rem; padding: .6rem .5rem; }
}

/* ==========================================================================
   LAYOUT — white page, soft bands, never a dark one
   ========================================================================== */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.1rem; }
.band { padding: 3rem 0; background: var(--paper); }
.band--shell { background: var(--shell); }
.band--cream { background: var(--cream); }
.band--ink { background: var(--cream); }   /* legacy name; nothing is dark */
@media (min-width: 760px) { .band { padding: 4rem 0; } }

.prose { max-width: var(--measure); }
.prose h2:not(:first-child) { margin-top: 1.6em; }
.prose--center { margin-left: auto; margin-right: auto; text-align: center; }
.prose--center ul, .prose--center ol { text-align: left; display: inline-block; }
.prose--wide { max-width: 82ch; }

.note { font-size: .94rem; color: var(--ink-mute); padding: .2rem 0; }

/* ---- the collage hero, full bleed ---------------------------------------- */
.hero {
  position: relative; color: #fff; text-align: center;
  padding: clamp(3.4rem, 9vw, 7rem) 0; overflow: hidden; background: var(--cream);
}
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(36,28,26,.42), rgba(36,28,26,.5) 55%, rgba(36,28,26,.6));
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: #fff; font-size: clamp(2.3rem, 6.4vw, 4.2rem); text-shadow: 0 2px 24px rgba(0,0,0,.45); margin-bottom: .45rem; }
.hero .eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; font-weight: 600; color: #fff; margin: 0 0 1rem; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.hero .lede { font-size: clamp(1rem, 2.2vw, 1.2rem); color: #fff; max-width: 62ch; margin: 0 auto 1.4rem; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.hero .cta-line { justify-content: center; }
.hero .cta-line .btn { min-width: 220px; }

/* Inner-page hero: soft, centred, no collage. */
.hero--plain { background: var(--shell); color: var(--ink); padding: clamp(2.4rem, 6vw, 4rem) 0; }
.hero--plain::after { display: none; }
.hero--plain h1 { color: var(--ink); text-shadow: none; font-size: clamp(2rem, 5.2vw, 3.3rem); }
.hero--plain .lede { color: var(--ink-soft); text-shadow: none; }
.hero--plain .eyebrow { color: var(--cocoa); text-shadow: none; }

.cta-line { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.cta-line--center { justify-content: center; }

/* ---- buttons -----------------------------------------------------------------
   Primary: cocoa with white text, everywhere. Secondary: outlined cocoa on a
   light ground. On the photo hero: cream pill with ink text, or outlined
   white. There is no combination where the label matches the fill. */
.btn {
  display: inline-block; background: var(--cocoa); color: #fff;
  font: 500 .92rem/1 var(--sans); letter-spacing: .01em;
  padding: 1rem 1.7rem; border: 2px solid var(--cocoa); border-radius: var(--pill);
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.btn:hover { background: var(--cocoa-deep); border-color: var(--cocoa-deep); color: #fff; transform: translateY(-1px); }
.btn--pill { padding: .8rem 1.4rem; font-size: .86rem; }
.btn--ghost { background: transparent; color: var(--cocoa-deep); border-color: var(--cocoa); }
.btn--ghost:hover { background: var(--cocoa); color: #fff; border-color: var(--cocoa); }
.hero:not(.hero--plain) .btn--ghost { color: #fff; border-color: #fff; background: rgba(36,28,26,.25); }
.hero:not(.hero--plain) .btn--ghost:hover { background: #fff; color: var(--ink); }
.btn--cream { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.btn--cream:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn--ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--ink:hover { background: #000; border-color: #000; color: #fff; }
.btn--small { font-size: .8rem; padding: .7rem 1rem; width: 100%; }
.btn--disabled { background: var(--line); border-color: var(--line); color: var(--ink-mute); pointer-events: none; }

/* ---- the answer box, and the four-step strip ----------------------------- */
.answer { max-width: 72ch; margin: 0 auto; text-align: center; font-size: clamp(1.02rem, 1.8vw, 1.15rem); line-height: 1.75; color: var(--ink-soft); }
.answer p:last-child { margin-bottom: 0; }
.answer strong { color: var(--ink); font-weight: 500; }
.answer--center { margin: 0 auto; }

.steps { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.steps li { margin: 0; padding: .4rem .2rem; counter-increment: step; position: relative; }
.steps li::before { content: counter(step); display: block; font-family: var(--display); font-size: 1.9rem; color: var(--cocoa); line-height: 1; margin-bottom: .5rem; }
.steps li strong { display: block; font-weight: 600; font-size: 1rem; margin-bottom: .2rem; color: var(--ink); }
.steps li span { font-size: .9rem; color: var(--ink-soft); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem 1.6rem; margin: 1.6rem auto 0; max-width: 900px; text-align: center; }
.stat { padding: .2rem 0; }
.stat__k { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-mute); margin-bottom: .2rem; }
.stat__v { display: block; font-weight: 600; font-size: 1rem; color: var(--ink); }

.crumbs { max-width: var(--wrap); margin: 0 auto; padding: .85rem 1.1rem 0; font-size: .78rem; color: var(--ink-mute); letter-spacing: .02em; }
.crumbs a { color: var(--ink-mute); }
.crumbs span { margin: 0 .3rem; }

/* ==========================================================================
   THE THREE-UP CHOOSE ROW and PUPPY CARDS — all white
   ========================================================================== */
.choose { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 1.8rem auto 0; max-width: 940px; }
@media (min-width: 700px) { .choose { gap: 1rem; } }
.choose__item { display: block; text-decoration: none; color: var(--ink); text-align: center; }
.choose__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 30%; border-radius: var(--r); background: var(--shell); transition: transform .18s, box-shadow .18s; }
.choose__item:hover img { transform: translateY(-3px); box-shadow: var(--shadow); }
.choose__label { display: block; margin-top: .7rem; font-weight: 600; font-size: clamp(.85rem, 2.2vw, 1.02rem); }
.choose__item:hover .choose__label { color: var(--cocoa-deep); }

.pups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1.7rem; }
@media (min-width: 700px)  { .pups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } }
@media (min-width: 1000px) { .pups { gap: 1.4rem; } }
@media (min-width: 1000px) { .pups--six { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; } }

/* Like the reference's "Choose your breed" row: a photograph, the name in
   bold beneath, one quiet line, a text link. No box, no border, no cover. */
.pup { background: transparent; display: flex; flex-direction: column; text-align: center; }
.pup__media { display: block; position: relative; border-radius: var(--r); overflow: hidden; background: var(--shell); transition: transform .18s, box-shadow .18s; }
.pup__media:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pup__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; }
.pup__body { padding: .8rem .2rem 0; display: flex; flex-direction: column; flex: 1; align-items: center; }
.pup__name { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; color: var(--ink); margin: 0 0 .15rem; }
.pup__color { font-size: .82rem; color: var(--ink-soft); text-transform: none; letter-spacing: 0; margin: 0; }
.pup__spec { font-size: .82rem; color: var(--ink-mute); margin: 0; }
.pup__ready { font-size: .78rem; color: var(--cocoa-deep); font-weight: 500; margin: .2rem 0 .4rem; }
.pup__price { font-weight: 600; font-size: 1rem; color: var(--ink); margin: 0 0 .3rem; }
.pup__cta { margin: auto 0 0; }
.pup__link { font-size: .88rem; font-weight: 500; color: var(--cocoa-deep); text-decoration: underline; text-underline-offset: 4px; }
.pup__link:hover { color: var(--cocoa); }
.pups--six .pup__name { font-size: .95rem; }
.pups--six .pup__color, .pups--six .pup__spec { font-size: .76rem; }

.pup__reserved { position: absolute; inset: auto 0 0 0; background: rgba(36,28,26,.85); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: .4rem 0; }
.pup.is-reserved .pup__media img { filter: grayscale(1) brightness(.95); }
.pup.is-reserved .pup__link { color: var(--ink-mute); text-decoration: none; pointer-events: none; }

.viewall { margin-top: 1.4rem; font-weight: 500; font-size: .92rem; }

/* ---- the puppy profile: one puppy, photo beside its paragraph ----------- */
.profile { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: start; padding: 1.6rem 0; border-top: 1px solid var(--line); }
.profile:first-of-type { border-top: 0; }
@media (min-width: 700px) { .profile { grid-template-columns: 240px 1fr; gap: 2rem; } .profile--flip { grid-template-columns: 1fr 240px; } .profile--flip .profile__media { order: 2; } }
.profile__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: var(--shell); border-radius: var(--r); border: 1px solid var(--line); }
.profile h3 { margin-bottom: .2rem; font-size: 1.5rem; }
.profile .pup__color { color: var(--cocoa-deep); }

/* ---- text and photo split, on a soft band -------------------------------- */
.split { display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: center; }
@media (min-width: 820px) { .split { grid-template-columns: 1fr 1fr; gap: 3.5rem; } .split--flip .split__media { order: -1; } }
.split__text { text-align: center; }
.split__text h2 { margin-bottom: .6rem; }
.split__text .cta-line { justify-content: center; }
.split__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 35%; border-radius: var(--r); background: var(--shell); }
@media (min-width: 820px) { .split__text { text-align: left; } .split__text .cta-line { justify-content: flex-start; } }

/* ---- two photographs side by side, offset like the reference ------------- */
.pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2rem; align-items: start; }
.pair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; border-radius: var(--r); background: var(--shell); }
.pair img:nth-child(2) { margin-top: 2.5rem; }
@media (min-width: 820px) { .pair { gap: 1.6rem; max-width: 980px; margin-left: auto; margin-right: auto; } }

/* ---- feature grid, 3x3 on the cream band --------------------------------- */
.features { display: grid; grid-template-columns: 1fr; gap: 1.6rem 2.5rem; margin-top: 2rem; }
@media (min-width: 640px)  { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .features { grid-template-columns: repeat(3, 1fr); } }
.feature h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.feature p { margin: 0 0 .5rem; font-size: .95rem; color: var(--ink-soft); }
.feature a { font-weight: 500; }

/* ---- documentary photographs, captioned; contain, never crop ------------- */
.shots { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.6rem; }
@media (min-width: 620px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; } }
.shots--2 { max-width: 820px; }
@media (min-width: 900px) { .shots--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shots--4 { }
@media (min-width: 900px) { .shots--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.shot { margin: 0; }
.shot img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; background: var(--shell); border-radius: var(--r); }
.shot--contain img { object-fit: contain; }
.shot figcaption { padding: .7rem .2rem 0; font-size: .88rem; line-height: 1.5; color: var(--ink-soft); }

/* ---- the who-we-are block: photo left, text right ------------------------ */
.who { display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: center; }
@media (min-width: 820px) { .who { grid-template-columns: 5fr 6fr; gap: 3rem; } }
.who__media { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.who__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); background: var(--shell); }
.who__media img:nth-child(2) { margin-top: 2rem; }

/* ==========================================================================
   FOOTER — soft cream band with the long tail in columns
   ========================================================================== */
.site-footer { background: var(--cream); color: var(--ink-soft); }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--cocoa-deep); text-decoration: underline; }
.site-footer__inner { max-width: var(--wrap); margin: 0 auto; padding: 3rem 1.1rem 2rem; display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 620px)  { .site-footer__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .site-footer__inner { grid-template-columns: 1.6fr repeat(3, 1fr); } }
.foot-about { font-size: .92rem; }
.foot-logo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: .8rem; }
.foot-name { font-family: var(--display); font-size: 1.3rem; color: var(--ink); margin: 0 0 .5rem; }
.foot-col h3 { font-family: var(--sans); font-size: .7rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink); margin: 0 0 .8rem; font-weight: 600; }
.foot-col ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.foot-col li { margin-bottom: .4rem; }
.site-footer__legal { border-top: 1px solid rgba(36,28,26,.12); padding: 1rem 1.1rem; text-align: center; font-size: .78rem; color: var(--ink-mute); }
.site-footer__legal p { margin: 0; }

/* ==========================================================================
   FORMS, TABLES, Q AND A
   ========================================================================== */
.form { max-width: 36rem; }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-weight: 500; font-size: .88rem; margin-bottom: .4rem; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"], .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: .8rem .95rem;
  border: 1px solid #C9B8AC; border-radius: 10px; background: #fff; color: var(--ink);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cocoa); outline: 2px solid var(--cocoa); outline-offset: 1px; }
.field input[type="radio"], .field input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; width: auto; margin-right: .45rem; }
.field .hint { font-size: .84rem; color: var(--ink-mute); margin: .35rem 0 0; }
.field--hp { position: absolute; left: -9999px; }
.form-error, .form-ok { padding: .9rem 1.05rem; margin-bottom: 1.2rem; font-size: .93rem; border-left: 4px solid var(--cocoa); background: var(--shell); border-radius: 0 var(--r) var(--r) 0; }
.form fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.1rem .4rem; margin: 0 0 1.4rem; }
.form legend { font-family: var(--display); font-size: 1.15rem; padding: 0 .5rem; }
.form .hint { display: block; font-size: .84rem; color: var(--ink-mute); line-height: 1.5; margin: .35rem 0 0; }
.form fieldset > .hint { margin: 0 0 .9rem; }
.form .field label input[type="radio"] { margin-right: .5rem; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.4rem; }
table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .93rem; }
th, td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--line); }
thead th { background: var(--cream); color: var(--ink); font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 500; }

/* Questions and answers, written out to be read. No accordions. */
.qa { max-width: var(--measure); margin: 0 auto; }
.qa__item { padding: 1.4rem 0; border-top: 1px solid var(--line); }
.qa__item:first-child { border-top: 0; padding-top: .4rem; }
.qa__item h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.qa__item p:last-child { margin-bottom: 0; }

.linkgrid { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem .9rem; font-size: .93rem; }
.linkgrid li { margin: 0; }

/* ---- contract signature pad ----------------------------------------------- */
.sigwrap { position: relative; border: 1px dashed #C9B8AC; border-radius: var(--r); background: #fff; overflow: hidden; }
.sigpad { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; background: #fff; }
.sigpad__hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .95rem; color: var(--ink-mute); pointer-events: none; }
@media (max-width: 620px) { .sigpad { height: 160px; } }

@media print { .site-header, .site-footer, .nav-panel, .cta-line { display: none; } body { font-size: 12pt; } }

/* ---- the one video: never autoplays, poster frame, portrait --------------- */
.video { margin: 1.4rem auto 0; max-width: 420px; }
.video video { width: 100%; height: auto; border-radius: var(--r); background: var(--shell); border: 1px solid var(--line); }
.video figcaption { font-size: .86rem; color: var(--ink-soft); text-align: center; margin-top: .6rem; }

/* ---- the families row, like the reference's testimonials ----------------- */
.reviews { display: grid; grid-template-columns: 1fr; gap: 2rem 1.4rem; margin-top: 2.2rem; }
@media (min-width: 560px) { .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .reviews { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.review img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 28%; border-radius: var(--r); background: var(--shell); margin-bottom: .9rem; }
.review h3 { font-family: var(--sans); font-weight: 600; font-size: 1.02rem; margin-bottom: .35rem; color: var(--ink); }
.review p { font-size: .92rem; color: var(--ink-soft); margin: 0 0 .5rem; }
.review__who { font-weight: 600; color: var(--ink); font-size: .9rem; }

/* ==========================================================================
   SOLID WHITE AND BROWN (client, 31 Aug 2026). Every band is pure white; the
   footer is brown with white text so the page has a bottom; the only other
   colour on the page is the photographs.
   ========================================================================== */
.band { background: #FFFFFF; }
.band--shell { background: var(--shell); }
.band--cream, .band--ink { background: var(--cream); }
.hero--plain { background: var(--cream); }
.band + .band { border-top: 1px solid var(--line); }
.btn--cream { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.btn--cream:hover { background: var(--cocoa); border-color: var(--cocoa); color: #FFFFFF; }
.form-error, .form-ok { background: #FFFFFF; border: 1px solid var(--line); border-left: 4px solid var(--cocoa); }
thead th { background: #FFFFFF; border-bottom: 2px solid var(--cocoa); color: var(--ink); }
.nav-list--mobile .nav-sub { border-left-color: var(--line); }
.socials a:hover { background: #FFFFFF; }
.nav-desktop .nav-sub a:hover { background: #FFFFFF; }
.nav-burger:hover { background: #FFFFFF; }

.site-footer { background: var(--cocoa-deep); color: #F3E9E0; }
.site-footer a { color: #FFFFFF; }
.site-footer a:hover { color: #FFFFFF; text-decoration: underline; }
.foot-name, .foot-col h3 { color: #FFFFFF; }
.site-footer .socials a { color: #FFFFFF; }
.site-footer .socials a:hover { background: rgba(255,255,255,.12); color: #FFFFFF; }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,.18); color: #E6D8CC; }


/* ==========================================================================
   REFERENCE MATCH PASS (mydoodlepuppy.com screenshots, side by side)

   Type: 18px near-black Poppins, line-height 1.8, centred in the marketing
   sections; Abril headings around 34px. Photos: square corners. Header:
   tall, big logo, roomy nav. Buttons: large pills. Sections breathe at
   80 to 100px with no rules between them. Testimonials: landscape photo,
   regular-weight heading, text, bold family name.
   ========================================================================== */
:root { --r: 0px; --text: #1F1A19; }
body { font-size: 18px; line-height: 1.8; color: var(--text); }
h1, h2, h3 { color: #111; }
h1 { font-size: clamp(2.2rem, 5vw, 3.3rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.15rem); margin-bottom: .7em; }
h3 { font-size: 1.35rem; }
a { color: var(--cocoa-deep); }

.band { padding: 4rem 0; }
@media (min-width: 760px) { .band { padding: 5.5rem 0; } }
.band + .band { border-top: 0; }
.prose { max-width: 60rem; }
.prose--center p { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.8; }
.prose--wide { max-width: 62rem; }
.answer { font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 60rem; }

/* header: tall, big logo, roomy nav, no rule */
.site-header { border-bottom: 0; }
.site-header__inner { padding: 1rem 1.1rem; }
.site-logo img { width: 64px; height: 64px; }
@media (min-width: 1000px) {
  .site-header__inner { padding: 1.5rem 1.1rem; }
  .site-logo img { width: 100px; height: 100px; }
  .site-logo__name { font-size: 1.55rem; }
  .nav-desktop .nav-list { gap: .6rem; }
  .nav-desktop .nav-item > a { font-size: 1.05rem; font-weight: 400; padding: .5rem .6rem; }
  .nav-desktop .is-current > a { text-decoration: none; color: var(--cocoa-deep); }
  .site-header__end { gap: .7rem; }
  .site-header__contact { font-size: 1rem; color: var(--text); }
  .site-header__contact a { color: var(--text); }
}

/* buttons: big pills */
.btn { font-size: 1.05rem; font-weight: 500; padding: 1.15rem 2.4rem; }
.btn--pill { font-size: 1rem; padding: .9rem 1.8rem; }
.hero .cta-line .btn { min-width: 300px; }
.hero .cta-line { gap: 1.6rem; }

/* hero: taller, bigger type */
.hero { padding: clamp(4rem, 12vw, 8rem) 0; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.hero .lede { font-size: clamp(1.1rem, 2.2vw, 1.45rem); max-width: 54ch; margin-bottom: 2.2rem; }
.hero .eyebrow { margin-bottom: 1.4rem; }

/* photos: square corners everywhere */
.choose__item img, .split__media img, .pair img, .shot img, .review img,
.who__media img, .pup__media, .pup__media img, .profile__media img, .video video,
.choose__item:hover img { border-radius: 0; }
.choose { max-width: 900px; gap: .6rem; }
.choose__label { font-size: 1.1rem; margin-top: 1rem; }
.split__media img { aspect-ratio: 1 / 1; }
.split__text { text-align: center; }
.split__text .cta-line { justify-content: center; margin-top: 2rem; }
.split__text h2 { margin-bottom: 1rem; }
@media (min-width: 820px) { .split__text { text-align: center; } .split__text .cta-line { justify-content: center; } }

/* the families row: landscape photo, light heading, text, bold name */
.reviews { gap: 2.5rem 1.6rem; margin-top: 2.6rem; }
.review img { aspect-ratio: 3 / 2; object-position: center 35%; margin-bottom: 1rem; }
.review h3 { font-family: var(--sans); font-weight: 400; font-size: 1.45rem; line-height: 1.25; color: #111; margin-bottom: .6rem; }
.review p { font-size: 1rem; color: var(--text); }
.review__who { font-weight: 600; text-align: center; margin-top: .6rem; }

/* puppy cards: square corners, roomy */
.pups { gap: 1.2rem; }
.pup__name { font-size: 1.12rem; }
.pup__color, .pup__spec { font-size: .9rem; }
.pup__link { font-size: .95rem; }

/* feature grid: Abril headings, dark body, underlined link */
.features { gap: 2.4rem 3rem; margin-top: 2.6rem; }
.feature h3 { font-family: var(--display); font-size: 1.4rem; margin-bottom: .5rem; }
.feature p { font-size: 1rem; color: var(--text); }
.feature a { color: #111; text-decoration: underline; text-underline-offset: 4px; font-weight: 400; }

/* q and a, steps, shots captions */
.qa__item h3 { font-size: 1.45rem; }
.qa__item p { font-size: 1.05rem; }
.steps li strong { font-size: 1.05rem; }
.steps li span { font-size: .98rem; }
.shot figcaption { font-size: .95rem; color: var(--text); }
.who__media img { border-radius: 0; }

/* footer: brown, roomy */
.site-footer__inner { padding: 4rem 1.1rem 2.5rem; }
.hero__img { object-position: center 58%; }
.hero::after { background: linear-gradient(180deg, rgba(36,28,26,.38), rgba(36,28,26,.46) 55%, rgba(36,28,26,.55)); }
.shots { gap: 1.2rem; }

.hero__img { object-position: center 30%; }

/* ---- blog cards ----------------------------------------------------------- */
.posts { display: grid; grid-template-columns: 1fr; gap: 2.2rem 1.6rem; max-width: 980px; margin: 0 auto; }
@media (min-width: 700px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.post { display: block; text-decoration: none; color: var(--text); }
.post img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 30%; background: var(--shell); margin-bottom: 1rem; }
.post h3 { font-family: var(--display); font-size: 1.6rem; margin-bottom: .4rem; color: #111; }
.post p { font-size: 1rem; color: var(--text); margin-bottom: .5rem; }
.post__more { color: var(--cocoa-deep); text-decoration: underline; text-underline-offset: 4px; font-weight: 500; }
.post:hover h3 { color: var(--cocoa-deep); }

/* ==========================================================================
   1 SEP PASS: stacked hero (image first, words under it), cream nav, nine
   menu items, and the phone-size fixes.
   ========================================================================== */

/* the hero: full-width photograph at a sensible height, then the words on
   the page itself. Nothing overlaid, nothing cropped into a face. */
.hero--stack { padding: 0; background: var(--paper); color: var(--ink); text-align: center; }
.hero--stack::after { display: none; }
.hero--stack .hero__banner { display: block; width: 100%; height: clamp(300px, 48vw, 560px); object-fit: cover; object-position: center 30%; }
.hero--stack .wrap { position: static; padding-top: 2.8rem; padding-bottom: 3.4rem; }
.hero--stack .eyebrow { color: var(--cocoa-deep); text-shadow: none; }
.hero--stack h1 { color: var(--ink); text-shadow: none; }
.hero--stack .lede { color: var(--ink-soft); text-shadow: none; }
.hero--stack .cta-line .btn { min-width: min(280px, 100%); }

/* nine items in the bar: tighten between 1000 and 1280 */
@media (min-width: 1000px) and (max-width: 1280px) {
  .nav-desktop .nav-item > a { font-size: .78rem; padding: .5rem .38rem; }
  .site-header__cta { font-size: .82rem; padding: .75rem 1.1rem; }
  .site-header__contact { font-size: .8rem; }
}
.nav-desktop .nav-list { flex-wrap: wrap; row-gap: 0; }

/* phones */
.hero .cta-line .btn, .hero--plain .cta-line .btn { min-width: min(280px, 100%); max-width: 100%; }
.btn { max-width: 100%; }
@media (max-width: 560px) {
  .band { padding: 3rem 0; }
  .choose { gap: .5rem; }
  .choose__label { font-size: .82rem; }
  .pups { gap: .7rem; }
  .pups--six .pup__name { font-size: .9rem; }
  .steps li strong { font-size: .98rem; }
  .qa__item h3 { font-size: 1.25rem; }
  .review h3 { font-size: 1.25rem; }
  .who__media img:nth-child(2), .pair img:nth-child(2) { margin-top: 1.2rem; }
  .site-header__inner { padding: .55rem .9rem; }
  .profile { padding: 1.2rem 0; }
  .table-wrap { margin-left: -1.1rem; margin-right: -1.1rem; padding: 0 1.1rem; }
}
@media (max-width: 380px) {
  h1 { font-size: 1.9rem; }
  .hero--stack .hero__banner { height: 260px; }
}

/* a touch more of the secondary colour inside sections */
.steps li::before { background: var(--cocoa); }
.steps li { border-color: var(--cream); background: var(--shell); }
.answer { border-left-color: var(--cocoa); background: var(--shell); border-color: var(--cream); }
.stat { background: var(--shell); border-color: var(--cream); }
thead th { background: var(--cream); border-bottom: 0; }
.form fieldset { border-color: var(--cream); background: var(--shell); }
.qa__item { border-top-color: var(--cream); }
.shot { border-color: var(--cream); }
.profile__media img, .pup__media { background: var(--shell); }
.site-footer { background: var(--cocoa-deep); }

/* The hero photograph, whole and uncropped (client, 1 Sep): the full portrait
   centred on the cream band, the words beneath it. */
.hero--stack { background: var(--cream); }
.hero--stack .hero__banner { width: auto; max-width: min(92vw, 540px); height: auto; max-height: 66vh; object-fit: contain; margin: 2.2rem auto 0; border-radius: var(--r); }
.hero--stack .wrap { padding-top: 2.2rem; padding-bottom: 3rem; }
@media (max-width: 380px) { .hero--stack .hero__banner { height: auto; } }

/* Hero, third pass (client, 1 Sep): no slab. White ground, the FULL photo
   framed and uncropped, the headline ON the photo over a soft scrim, the
   line and buttons below it. Display font is now Playfair Display. */
.hero--stack { background: var(--paper); }
.hero__frame { position: relative; width: min(92vw, 560px); margin: 2.4rem auto 0; }
.hero__frame .hero__banner { width: 100%; max-width: none; height: auto; max-height: none; margin: 0; display: block; border-radius: var(--r); }
.hero__frame::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 45%; border-radius: 0 0 var(--r) var(--r); background: linear-gradient(180deg, rgba(36,28,26,0), rgba(36,28,26,.58)); }
.hero__title { position: absolute; left: 0; right: 0; bottom: 1.6rem; z-index: 1; text-align: center; padding: 0 1rem; }
.hero__title .eyebrow { color: #fff; margin-bottom: .6rem; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.hero__title h1 { color: #fff; margin: 0; text-shadow: 0 2px 20px rgba(0,0,0,.5); font-size: clamp(1.9rem, 4.6vw, 3rem); }
.hero--stack .wrap { padding-top: 1.8rem; padding-bottom: 2.8rem; }
h1, h2, h3, h4 { font-weight: 600; }
.site-logo__name { font-weight: 600; }

/* hero with the photo by the side of the words (client, 1 Sep) */
.hero--side .wrap { display: grid; grid-template-columns: 1fr; gap: 1.8rem; align-items: center; }
.hero--side .hero__sidetext { text-align: center; }
.hero--side .lede { margin-left: auto; margin-right: auto; }
.hero__sideimg { width: 100%; max-width: 420px; height: auto; border-radius: var(--r); margin: 0 auto; }
@media (min-width: 860px) {
  .hero--side .wrap { grid-template-columns: 7fr 5fr; gap: 3rem; }
  .hero--side .hero__sidetext { text-align: left; }
  .hero--side .lede { margin-left: 0; }
  .hero__sideimg { margin: 0; justify-self: end; }
}