/* ========================================
   CLEARVIEW KENNELS
   styles.css
   ======================================== */

:root {
  --cream: #f4efe5;
  --cream-deep: #e8dfd0;
  --paper: #faf7f0;
  --ink: #29291f;
  --ink-soft: #454538;
  --muted: #747265;
  --forest: #354735;
  --forest-deep: #243226;
  --forest-soft: #66715d;
  --gold: #a47b45;
  --line: rgba(41, 41, 31, .14);
  --line-light: rgba(255, 255, 255, .25);
  --wash: rgba(250, 247, 240, .48);
  --wash-strong: rgba(250, 247, 240, .68);
  --forest-wash: rgba(53, 71, 53, .07);
  --white: #fffdf8;
  --serif: "Libre Baskerville", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --max: 1180px;
  --header-height: 88px;
}

/* ========================================
   RESET + GLOBAL TYPE
   ======================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: var(--cream);
}

body {
  position: relative;
  z-index: 0;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: transparent;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body.nav-open,
body.puppy-modal-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

h1,
h2,
h3,
p,
dl,
dd {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
}

h2 {
  margin-bottom: 24px;
  font-size: clamp(2.25rem, 4vw, 4rem);
  letter-spacing: -.04em;
}

h3 {
  margin-bottom: 13px;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  letter-spacing: -.025em;
}

p {
  margin-bottom: 19px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.72;
}

::selection {
  color: var(--white);
  background: var(--forest);
}

/* ========================================
   FIXED PAPER + DAPPLED LIGHT
   ======================================== */

body::before {
  position: fixed;
  z-index: -3;
  inset: 0;
  width: 100%;
  height: 100%;
  content: "";
  pointer-events: none;
  background: var(--cream) url("ck-assets/ck-paper-web.webp") center / cover no-repeat;
  transform: translateZ(0);
  will-change: transform;
}

body::after {
  position: fixed;
  z-index: -2;
  inset: -18%;
  width: 136%;
  height: 136%;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse 22% 16% at 13% 17%, rgba(255,249,217,.36) 0%, rgba(255,244,197,.23) 28%, rgba(255,239,181,.09) 55%, transparent 74%),
    radial-gradient(ellipse 15% 24% at 35% 8%, rgba(255,250,220,.27) 0%, rgba(255,243,192,.13) 38%, transparent 72%),
    radial-gradient(ellipse 25% 14% at 67% 22%, rgba(255,250,221,.31) 0%, rgba(255,242,191,.15) 36%, transparent 70%),
    radial-gradient(ellipse 17% 26% at 89% 35%, rgba(255,247,209,.24) 0%, rgba(255,240,183,.11) 39%, transparent 72%),
    radial-gradient(ellipse 27% 18% at 19% 61%, rgba(255,250,220,.28) 0%, rgba(255,242,191,.14) 36%, transparent 71%),
    radial-gradient(ellipse 18% 14% at 51% 53%, rgba(255,250,222,.33) 0%, rgba(255,243,195,.15) 38%, transparent 70%),
    radial-gradient(ellipse 24% 19% at 76% 72%, rgba(255,248,214,.29) 0%, rgba(255,241,188,.13) 38%, transparent 72%),
    radial-gradient(ellipse 18% 25% at 29% 91%, rgba(255,249,217,.25) 0%, rgba(255,241,187,.11) 40%, transparent 72%);
  filter: blur(22px);
  opacity: .78;
  transform: translate3d(-1.5%, -1%, 0) rotate(-1deg) scale(1.02);
  animation: clearview-dapple-primary 28s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

main {
  position: relative;
  z-index: 0;
  background: transparent;
}

main::before {
  position: fixed;
  z-index: -1;
  inset: -20%;
  width: 140%;
  height: 140%;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse 13% 21% at 23% 29%, rgba(255,252,231,.18) 0%, rgba(255,247,211,.08) 45%, transparent 72%),
    radial-gradient(ellipse 20% 12% at 48% 16%, rgba(255,251,226,.17) 0%, rgba(255,244,201,.07) 45%, transparent 73%),
    radial-gradient(ellipse 15% 23% at 73% 43%, rgba(255,251,227,.17) 0%, rgba(255,245,205,.07) 43%, transparent 72%),
    radial-gradient(ellipse 22% 13% at 42% 71%, rgba(255,251,228,.16) 0%, rgba(255,245,205,.07) 44%, transparent 73%),
    radial-gradient(ellipse 14% 20% at 84% 84%, rgba(255,251,227,.15) 0%, rgba(255,244,201,.06) 45%, transparent 73%);
  filter: blur(34px);
  opacity: .68;
  transform: translate3d(1%, 1%, 0) rotate(.7deg);
  animation: clearview-dapple-secondary 37s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes clearview-dapple-primary {
  0% {
    transform: translate3d(-2%, -1%, 0) rotate(-1.2deg) scale(1.01);
    opacity: .67;
  }

  23% {
    transform: translate3d(.5%, 1.4%, 0) rotate(-.25deg) scale(1.035);
    opacity: .82;
  }

  48% {
    transform: translate3d(2.2%, -.6%, 0) rotate(.8deg) scale(1.015);
    opacity: .72;
  }

  71% {
    transform: translate3d(.7%, 2%, 0) rotate(.2deg) scale(1.045);
    opacity: .88;
  }

  100% {
    transform: translate3d(-1.7%, .4%, 0) rotate(-.8deg) scale(1.025);
    opacity: .74;
  }
}

@keyframes clearview-dapple-secondary {
  0% {
    transform: translate3d(2%, .5%, 0) rotate(.8deg) scale(1);
  }

  31% {
    transform: translate3d(-.8%, 1.8%, 0) rotate(-.5deg) scale(1.035);
    opacity: .62;
  }

  63% {
    transform: translate3d(-2%, -.8%, 0) rotate(-.9deg) scale(1.015);
    opacity: .78;
  }

  100% {
    transform: translate3d(1.5%, -1.5%, 0) rotate(.5deg) scale(1.045);
    opacity: .68;
  }
}

/* ========================================
   SHARED LAYOUT
   ======================================== */

.section {
  position: relative;
  width: min(calc(100% - 64px), var(--max));
  margin: 0 auto;
  padding: clamp(72px, 8vw, 105px) 0;
  background: transparent;
}

.eyebrow {
  margin-bottom: 15px;
  color: var(--gold);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.lead {
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.7;
}

.section-heading {
  max-width: 680px;
  margin-bottom: clamp(36px, 5vw, 58px);
}

.section-heading > p:last-child {
  max-width: 560px;
}

.split-heading {
  display: flex;
  max-width: none;
  align-items: flex-end;
  justify-content: space-between;
  gap: 55px;
}

.split-heading > div:first-child {
  max-width: 680px;
}

.section-heading-side {
  max-width: 340px;
  padding-bottom: 6px;
}

.section-heading-side p {
  font-size: .9rem;
}

/* ========================================
   STANDARD BUTTONS + TEXT LINKS
   ======================================== */

.button {
  display: inline-flex;
  min-height: 50px;
  padding: 13px 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-align: center;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(41,41,31,.16);
}

.button-light {
  color: var(--forest-deep);
  background: var(--white);
  border-color: rgba(255,255,255,.4);
}

.button-light:hover {
  background: #fff;
}

.button-dark {
  color: var(--white);
  background: var(--forest);
  border-color: var(--forest);
}

.button-dark:hover {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
}

.text-link,
.hero-text-link,
.final-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  transition: gap .2s ease, opacity .2s ease;
}

.text-link {
  color: var(--forest);
}

.text-link:hover,
.hero-text-link:hover,
.final-cta-link:hover {
  gap: 14px;
}

/* ========================================
   STICKER BUTTONS
   ======================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sticker-button {
  position: relative;
  display: inline-flex;
  width: auto;
  max-width: 100%;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  line-height: 0;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, filter .18s ease;
}

.sticker-button img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 4px 5px rgba(31,36,26,.12));
  transition: filter .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .sticker-button:hover {
    transform: translateY(-3px) rotate(-.35deg);
  }

  .sticker-button:hover img {
    filter: drop-shadow(0 7px 8px rgba(31,36,26,.17));
  }
}

.sticker-button:active {
  transform: translateY(1px) scale(.975);
}

.sticker-button:active img {
  filter: drop-shadow(0 2px 2px rgba(31,36,26,.12));
}

.sticker-button:focus {
  outline: none;
}

.sticker-button:focus-visible img {
  filter:
    drop-shadow(0 0 3px rgba(255,253,248,.95))
    drop-shadow(0 0 7px rgba(53,71,53,.72));
}

.sticker-button-large {
  width: clamp(155px, 15vw, 215px);
}

.sticker-button-large img,
.sticker-button-inline img {
  width: 100%;
}

.sticker-button-inline {
  width: clamp(128px, 12vw, 178px);
  margin-top: 5px;
}

.sticker-button-wide {
  width: clamp(180px, 18vw, 245px);
}

.sticker-actions {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 25px);
}

/* ========================================
   STICKER NAVIGATION
   ======================================== */

.site-nav.sticker-nav {
  gap: clamp(8px, 1.1vw, 17px);
}

.site-nav.sticker-nav > a:not(.nav-cta) {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.site-nav.sticker-nav > a:not(.nav-cta)::after {
  display: none;
}

.sticker-nav-button {
  flex: 0 0 auto;
  width: auto;
  height: clamp(34px, 3.3vw, 45px);
  margin: 0;
}

.sticker-nav-button img {
  width: auto;
  max-width: none;
  height: 100%;
}

.sticker-nav-cta {
  height: clamp(39px, 3.7vw, 50px);
}

.sticker-nav .nav-cta,
.sticker-nav .sticker-nav-cta {
  padding: 0;
  border: 0;
  background: transparent;
}

/* ========================================
   SECTION-SPECIFIC STICKERS
   ======================================== */

.section-heading-side .sticker-button-inline {
  margin-top: 3px;
}

.story-copy .sticker-button-inline,
.location-content .sticker-button-inline,
.faq-teaser-content .sticker-button-inline {
  margin-top: 7px;
}

.breed-copy .sticker-button-inline {
  margin-top: 5px;
}
.process-action .sticker-button-large {
  width: clamp(165px, 16vw, 220px);
}

.hero .sticker-button img {
  filter: drop-shadow(0 5px 7px rgba(8,12,8,.25));
}

.final-cta .sticker-button img {
  filter: drop-shadow(0 5px 8px rgba(7,10,7,.25));
}

.final-cta .sticker-actions {
  margin-top: 18px;
  justify-content: center;
}

@media (hover: hover) and (pointer: fine) {
  .hero .sticker-button:hover img {
    filter: drop-shadow(0 8px 10px rgba(8,12,8,.32));
  }
}

/* ========================================
   HEADER
   ======================================== */

.site-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: var(--header-height);
  padding: 0 clamp(24px, 4vw, 60px);
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  background: var(--cream) url("ck-assets/ck-paper-web.webp") center / cover no-repeat;
  border-bottom: 1px solid rgba(41,41,31,.13);
  box-shadow: 0 6px 20px rgba(41,41,31,.08);
  transition: color .3s ease, height .3s ease, box-shadow .3s ease;
}

.site-header.scrolled {
  height: 76px;
  color: var(--ink);
  background:
    linear-gradient(rgba(244,239,229,.70), rgba(244,239,229,.70)),
    url("ck-assets/ck-paper-web.webp") center 42% / cover no-repeat;
  border-bottom-color: rgba(75,61,42,.18);
  box-shadow: 0 7px 24px rgba(41,41,31,.1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.brand {
  position: relative;
  z-index: 1002;
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-name {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -.015em;
}

.brand-location {
  margin-top: 4px;
  opacity: .72;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.brand-with-home {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.brand-home-icon {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  place-items: center;
  color: var(--forest-deep);
  border: 1px solid rgba(53,71,53,.34);
  border-radius: 46% 54% 49% 51% / 51% 45% 55% 49%;
  background: rgba(250,247,240,.58);
  box-shadow:
    inset 0 0 0 1px rgba(164,123,69,.08),
    0 2px 5px rgba(41,41,31,.08);
  transform: rotate(-1.5deg);
}

.brand-home-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ========================================
   NAVIGATION
   ======================================== */

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.5vw, 38px);
}

.site-nav > a:not(.nav-cta) {
  position: relative;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.site-nav > a:not(.nav-cta)::after {
  position: absolute;
  right: 0;
  bottom: -6px;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .25s ease;
}

.site-nav > a:not(.nav-cta):hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.nav-cta {
  padding: 10px 18px;
  border: 1px solid currentColor;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.menu-toggle {
  position: relative;
  z-index: 1002;
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-toggle span {
  position: absolute;
  left: 8px;
  display: block;
  width: 26px;
  height: 1px;
  background: currentColor;
  transition: top .25s ease, transform .25s ease;
}

.menu-toggle span:first-child {
  top: 16px;
}

.menu-toggle span:last-child {
  top: 25px;
}

/* ========================================
   HERO
   ======================================== */

.hero {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: max(700px, 100svh);
  padding:
    calc(var(--header-height) + 60px)
    clamp(28px, 7vw, 110px)
    72px;
  align-items: center;
  overflow: hidden;
  color: var(--white);
  background-color: #263326;
  background-image:
    linear-gradient(90deg, rgba(18,23,17,.67) 0%, rgba(18,23,17,.42) 43%, rgba(18,23,17,.13) 75%, rgba(18,23,17,.08) 100%),
    linear-gradient(180deg, rgba(15,19,14,.25) 0%, transparent 40%, rgba(15,19,14,.25) 100%),
    url("ck-assets/ck-web-bg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 130px;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(20,24,17,.16));
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(100%, 720px);
}

.hero-eyebrow {
  margin-bottom: 22px;
  color: rgba(255,253,248,.82);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.hero h1 {
  margin-bottom: 18px;
  color: var(--white);
  font-size: clamp(4rem, 8.7vw, 7.7rem);
  letter-spacing: -.065em;
  line-height: .89;
}

.hero h1 span {
  display: block;
  margin-left: clamp(0px, 4vw, 55px);
  font-size: .61em;
  font-style: italic;
  letter-spacing: -.045em;
}

.hero-breeds {
  display: flex;
  margin: 28px 0 17px;
  align-items: center;
  gap: 12px;
  color: rgba(255,253,248,.88);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hero-breeds span {
  opacity: .55;
}

.hero-copy {
  max-width: 500px;
  margin-bottom: 30px;
  color: rgba(255,253,248,.86);
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
}

.hero-text-link {
  color: var(--white);
}

.hero-scroll {
  position: absolute;
  z-index: 2;
  right: clamp(24px, 4vw, 60px);
  bottom: 36px;
  display: flex;
  align-items: center;
  gap: 15px;
  color: rgba(255,255,255,.72);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.hero-scroll-line {
  display: block;
  width: 60px;
  height: 1px;
  background: rgba(255,255,255,.55);
}

/* ========================================
   HOME INTRO
   ======================================== */

.home-intro {
  position: relative;
  isolation: isolate;
  width: min(calc(100% - 64px), 1120px);
  margin: clamp(20px, 3vw, 36px) auto;
  padding:
    clamp(46px, 5vw, 64px)
    clamp(28px, 4.5vw, 58px);
  overflow: hidden;
  border-radius: 30px;
  background: var(--paper);
  box-shadow: 0 18px 40px rgba(41,41,31,.10);
}

.home-intro::before {
  position: absolute;
  z-index: 0;
  inset: -1.5%;
  border-radius: inherit;
  background: url("ck-assets/clearview-story-bg.webp") center / cover no-repeat;
  content: "";
  pointer-events: none;
  transform: scaleX(-1) scale(1.02);
}

.home-intro::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  border: 1px solid rgba(67,84,60,.15);
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      rgba(249,246,239,.46) 0%,
      rgba(249,246,239,.34) 42%,
      rgba(249,246,239,.62) 100%
    );
  content: "";
  pointer-events: none;
}

.home-intro-grid {
  display: grid;
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, .92fr) minmax(300px, 1.08fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.home-intro h2 {
  max-width: 540px;
  margin-bottom: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}

.home-intro .eyebrow,
.home-intro-copy p {
  text-shadow:
    0 1px 0 rgba(255,255,255,.46),
    0 0 1px rgba(41,41,31,.16);
}

.home-intro-copy {
  max-width: 520px;
  margin: -10px -12px;
  padding: 10px 12px;
  justify-self: end;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(249,246,239,.18);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  clip-path: inset(0 round 18px);
  transform: translateZ(0);
}

.home-intro-copy p {
  margin-bottom: 13px;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.62;
}

.home-intro-copy .lead {
  color: var(--ink);
  font-weight: 600;
}

.home-intro-copy p:last-child {
  margin-bottom: 0;
}

.home-intro-copy p,
.story-copy p,
.breed-copy p,
.process-step p {
  font-size: 1rem;
  line-height: 1.72;
}

/* ========================================
   FEATURED PUPPIES
   ======================================== */

.featured-puppies-section {
  width: 100%;
  max-width: none;
  padding:
    clamp(72px, 8vw, 105px)
    max(32px, calc((100vw - var(--max)) / 2));
  background: transparent;
}

.featured-puppies-section .split-heading,
.featured-puppies-section .puppy-grid {
  width: 100%;
  max-width: var(--max);
  margin-right: auto;
  margin-left: auto;
}

.puppy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3.5vw, 44px);
}

/* ========================================
   PUPPY CARDS
   ======================================== */

.puppy-card {
  min-width: 0;
}

.puppy-card-photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  margin-bottom: 20px;
  overflow: hidden;
  background: var(--cream-deep);
  box-shadow: 0 12px 34px rgba(41,41,31,.08);
}

.puppy-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.puppy-card:hover .puppy-card-image {
  transform: scale(1.025);
}

.puppy-photo-placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: rgba(41,41,31,.42);
  background: linear-gradient(145deg, #eee7da, #ded4c3);
}

.placeholder-mark {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 1px solid rgba(41,41,31,.2);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1.8rem;
}

.placeholder-copy {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.puppy-status {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 10px;
  color: var(--white);
  background: rgba(53,71,53,.92);
  font-size: .57rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.puppy-status-reserved {
  background: rgba(128,99,61,.92);
}

.puppy-status-adopted {
  background: rgba(41,41,31,.82);
}

.puppy-card-copy {
  padding: 0 4px;
}

.puppy-card-copy p {
  font-size: 1rem;
  line-height: 1.72;
}

.puppy-breed {
  margin-bottom: 6px;
  color: var(--forest);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.puppy-card h3 {
  margin-bottom: 8px;
}

.puppy-card h3 a {
  transition: color .2s ease;
}

.puppy-card h3 a:hover {
  color: var(--forest);
}

.puppy-meta {
  display: flex;
  margin-bottom: 9px;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
}

.puppy-price {
  margin-bottom: 14px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 900;
}

.puppy-card-status,
.puppy-card-breed {
  font-weight: 900;
}

.puppy-card-link {
  display: inline-flex;
  padding-bottom: 3px;
  align-items: center;
  gap: 8px;
  color: var(--forest);
  border-bottom: 1px solid rgba(53,71,53,.24);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.puppy-card-link span {
  transition: transform .2s ease;
}

.puppy-card-link:hover span {
  transform: translateX(4px);
}

.puppy-empty {
  grid-column: 1 / -1;
  max-width: 520px;
  padding: 15px 0 20px;
}

.puppy-empty h3 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

/* ========================================
   STORY
   ======================================== */

.story-section {
  display: grid;
  width: min(calc(100% - 64px), 1060px);
  padding-top: clamp(85px, 9vw, 120px);
  padding-bottom: clamp(85px, 9vw, 120px);
  grid-template-columns: minmax(0, .9fr) minmax(300px, 1fr);
  gap: clamp(45px, 8vw, 100px);
  align-items: center;
}

.story-heading h2 {
  max-width: 560px;
}

.story-copy {
  padding-top: 0;
}

.story-copy .text-link {
  margin-top: 7px;
}

/* ========================================
   BREEDS
   ======================================== */

.breeds-section {
  width: 100%;
  max-width: none;
  padding:
    clamp(72px, 8vw, 105px)
    max(32px, calc((100vw - var(--max)) / 2));
  background: var(--forest-wash);
}

.breeds-section .section-heading,
.breed-list {
  width: 100%;
  max-width: var(--max);
  margin-right: auto;
  margin-left: auto;
}

.breed-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 70px);
}

.breed-row {
  display: block;
  min-height: 0;
  padding: 34px 0 8px;
  border-top: 2px solid rgba(53,71,53,.22);
}

.breed-number,
.breed-link {
  display: none;
}

.breed-copy {
  max-width: 500px;
}

.breed-kicker {
  margin-bottom: 16px;
  color: var(--gold);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.breed-copy h3 {
  margin-bottom: 17px;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1.16;
}

.breed-copy p {
  max-width: 460px;
}

.breed-copy .text-link {
  margin-top: 5px;
}

/* ========================================
   PROCESS
   ======================================== */

.process-section {
  width: min(calc(100% - 64px), 1100px);
  padding-top: clamp(85px, 9vw, 120px);
  padding-bottom: clamp(85px, 9vw, 120px);
}

.process-intro,
.process-heading {
  max-width: 660px;
  margin-bottom: 52px;
}

.process-intro > p:last-child,
.process-heading > p:last-child {
  max-width: 540px;
}

.process-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
}

.process-list::before {
  position: absolute;
  top: 4px;
  right: 0;
  left: 0;
  height: 1px;
  content: "";
  background: rgba(53,71,53,.18);
}

.process-step,
.process-step:first-child,
.process-step:last-child {
  position: relative;
  min-height: 0;
  padding: 38px 0 0;
  border: 0;
}

.process-number {
  display: none;
}

.process-mark {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  width: 23px;
  height: 9px;
  margin: 0;
  border: 0;
  border-radius: 100% 0 100% 0;
  background: var(--gold);
  box-shadow: none;
  opacity: .72;
  transform: rotate(-13deg);
}

.process-step h3 {
  margin-bottom: 11px;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.process-step p {
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.72;
}

.process-action {
  margin-top: 42px;
}

/* ========================================
   PAYMENT METHODS
   ======================================== */

.payment-section {
  text-align: center;
}

.payment-content {
  max-width: 720px;
  margin: 0 auto;
}

.payment-content h2 {
  max-width: 620px;
  margin-right: auto;
  margin-left: auto;
}

.payment-content .lead {
  max-width: 590px;
  margin-right: auto;
  margin-left: auto;
}

.payment-note {
  max-width: 540px;
  margin: 18px auto 0;
  color: var(--ink-soft);
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.65;
}

.payment-methods {
  display: flex;
  margin-top: 34px;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(30px, 6vw, 58px);
}

.payment-method {
  display: flex;
  width: 112px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  transition: transform .2s ease;
}

.payment-method img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 7px 8px rgba(41,41,31,.16));
  transition: filter .2s ease;
}

.payment-method span {
  font-size: .75rem;
  font-weight: 900;
}
.payment-method span {
  letter-spacing: .04em;
}

.payment-method:hover {
  transform: translateY(-3px);
}

.payment-method:hover img {
  filter: drop-shadow(0 10px 12px rgba(41,41,31,.22));
}

.payment-method:active {
  transform: translateY(1px) scale(.98);
}

.payment-method:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 6px;
  border-radius: 8px;
}

/* ========================================
   LOCATION
   ======================================== */

.location-section {
  display: grid;
  width: 100%;
  max-width: none;
  padding:
    clamp(72px, 8vw, 100px)
    max(32px, calc((100vw - 1040px) / 2));
  grid-template-columns: minmax(0, .85fr) minmax(300px, 1fr);
  gap: clamp(45px, 8vw, 100px);
  align-items: center;
  background: rgba(250,247,240,.4);
}

.location-heading,
.location-content {
  width: 100%;
  max-width: 520px;
}

.location-heading h2 {
  max-width: 520px;
}

.location-content {
  padding-top: 0;
}

.location-content p {
  font-size: 1rem;
  line-height: 1.72;
}

/* ========================================
   FAQ TEASER
   ======================================== */

.faq-teaser {
  display: grid;
  width: min(calc(100% - 64px), 1000px);
  grid-template-columns: minmax(0, .9fr) minmax(300px, 1fr);
  gap: clamp(45px, 8vw, 90px);
  align-items: center;
}

.faq-teaser-heading h2 {
  max-width: 500px;
}

.faq-teaser-content {
  padding-top: 0;
}

.faq-teaser-content p {
  font-size: 1rem;
  line-height: 1.72;
}

/* ========================================
   FINAL CTA
   ======================================== */

.final-cta {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: clamp(430px, 50vw, 590px);
  padding:
    clamp(70px, 8vw, 105px)
    clamp(30px, 8vw, 120px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: var(--forest-deep);
  text-align: center;
}

.final-cta .eyebrow {
  color: rgba(255,253,248,.6);
}

.final-cta h2 {
  max-width: 780px;
  margin-bottom: 20px;
  color: var(--white);
  font-size: clamp(2.5rem, 5vw, 4.8rem);
}

.final-cta > p:not(.eyebrow) {
  max-width: 520px;
  color: rgba(255,253,248,.7);
}

.final-cta-actions {
  display: flex;
  margin-top: 18px;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.final-cta-link {
  color: var(--white);
}

/* ========================================
   FOOTER
   ======================================== */

.site-footer {
  position: relative;
  z-index: 2;
  padding: 62px clamp(28px, 6vw, 90px) 28px;
  color: rgba(255,253,248,.78);
  background: #1d271e;
  font-weight: 800;
}

.footer-top {
  display: flex;
  max-width: var(--max);
  margin: 0 auto 58px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
}

.footer-brand {
  display: flex;
  max-width: 350px;
  flex-direction: column;
}

.footer-brand strong {
  margin-bottom: 5px;
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
}

.footer-brand span {
  margin-bottom: 14px;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.footer-brand p {
  margin-bottom: 0;
  color: rgba(255,253,248,.5);
  font-size: .8rem;
  font-weight: 800;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
}

.footer-nav a {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.footer-nav a:hover {
  color: var(--white);
}

.footer-bottom {
  display: flex;
  max-width: var(--max);
  margin: 0 auto;
  padding-top: 23px;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,253,248,.45);
  font-size: .62rem;
  font-weight: 800;
}

.footer-bottom a {
  font-weight: 800;
}

.footer-bottom a:hover {
  color: rgba(255,253,248,.8);
}

/* ========================================
   INTERIOR PAGES
   ======================================== */

.interior-page {
  padding-top: 76px;
}

.interior-page .site-header {
  color: var(--ink);
  background:
    linear-gradient(rgba(244,239,229,.70), rgba(244,239,229,.70)),
    url("ck-assets/ck-paper-web.webp") center 42% / cover no-repeat;
  border-bottom: 1px solid rgba(75,61,42,.18);
  box-shadow: 0 7px 24px rgba(41,41,31,.1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ========================================
   INVENTORY PAGE
   ======================================== */

.inventory-hero {
  width: min(calc(100% - 64px), 1000px);
  margin: 0 auto;
  padding:
    clamp(80px, 9vw, 120px)
    0
    clamp(55px, 7vw, 80px);
}

.inventory-hero h1 {
  max-width: 760px;
  margin-bottom: 24px;
  color: var(--ink);
  font-size: clamp(3.3rem, 6vw, 5.8rem);
  letter-spacing: -.055em;
}

.inventory-hero > p:last-child {
  max-width: 590px;
  font-size: clamp(1rem, 1.7vw, 1.15rem);
}

.inventory-section {
  padding-top: 55px;
}

.inventory-heading {
  display: flex;
  margin-bottom: 48px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 50px;
}

.inventory-heading h2 {
  margin-bottom: 0;
}

.inventory-heading > p {
  max-width: 420px;
  margin-bottom: 5px;
  font-size: 1rem;
  line-height: 1.72;
}

.inventory-group {
  margin-bottom: clamp(90px, 12vw, 150px);
}

.inventory-group:last-child {
  margin-bottom: 0;
}

.inventory-group-heading {
  display: flex;
  margin-bottom: clamp(38px, 5vw, 58px);
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  border-bottom: 1px solid var(--line);
}

.inventory-group-heading > div {
  width: 100%;
}

.inventory-group-heading .eyebrow {
  margin-bottom: 13px;
}

.inventory-group-heading h2 {
  max-width: 760px;
  margin-bottom: clamp(25px, 3vw, 36px);
  font-size: clamp(2.4rem, 4.5vw, 4.2rem);
}

.inventory-empty {
  max-width: 700px;
  padding: 20px 0 clamp(50px, 7vw, 90px);
}

.inventory-empty h2 {
  max-width: 650px;
}

.inventory-empty > p:not(.eyebrow) {
  max-width: 540px;
  margin-bottom: 30px;
}

/* ========================================
   INVENTORY FILTERS
   ======================================== */

.inventory-filters {
  display: flex;
  margin-top: 30px;
  flex-wrap: wrap;
  gap: 9px;
}

.inventory-filter,
[data-breed-filter] {
  display: inline-flex;
  min-height: 42px;
  padding: 9px 16px;
  align-items: center;
  justify-content: center;
  color: var(--forest);
  background: rgba(250,247,240,.4);
  border: 1px solid rgba(53,71,53,.2);
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.inventory-filter:hover,
[data-breed-filter]:hover,
.inventory-filter.active,
[data-breed-filter].active {
  color: var(--white);
  background: var(--forest);
  border-color: var(--forest);
}

/* ========================================
   PUPPY FILTERS
   ======================================== */

.puppy-filters {
  display: flex;
  margin: -18px 0 clamp(70px, 9vw, 110px);
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.puppy-filter {
  display: inline-flex;
  min-height: 42px;
  padding: 10px 17px;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,253,248,.2);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .055em;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

.puppy-filter:hover {
  color: var(--forest);
  border-color: rgba(53,71,53,.38);
  transform: translateY(-1px);
}

.puppy-filter.active,
.puppy-filter[aria-current="page"] {
  color: var(--white);
  background: var(--forest);
  border-color: var(--forest);
}

/* Sticker-filter version */

.puppy-filters.puppy-filter-stickers {
  margin: -10px 0 clamp(70px, 9vw, 110px);
  gap: clamp(12px, 1.8vw, 22px);
}

.puppy-filter-stickers .puppy-filter {
  width: auto;
  min-height: 0;
  padding: 0;
  color: inherit;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
  transform: none;
  transition: transform .18s ease, filter .18s ease;
}

.puppy-filter-sticker {
  flex: 0 0 auto;
  width: auto;
  height: clamp(46px, 5vw, 62px);
}

.puppy-filter-sticker img {
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
  object-fit: contain;
}

.puppy-filter-stickers .puppy-filter:hover,
.puppy-filter-stickers .puppy-filter.active,
.puppy-filter-stickers .puppy-filter[aria-current="page"] {
  color: inherit;
  border: 0;
  background: transparent;
}

.puppy-filter-stickers .puppy-filter.active img,
.puppy-filter-stickers .puppy-filter[aria-current="page"] img {
  filter: drop-shadow(0 7px 8px rgba(31,36,26,.22));
}

.puppy-inventory {
  width: 100%;
}

/* ========================================
   INVENTORY CONTACT
   ======================================== */

.inventory-contact {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.inventory-contact,
.inventory-contact p {
  font-weight: 700;
}

.inventory-contact p {
  font-size: 1rem;
  line-height: 1.72;
}

.inventory-contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr);
  gap: clamp(60px, 10vw, 150px);
  align-items: start;
}

.inventory-contact-inner h2 {
  max-width: 650px;
  margin-bottom: 0;
}

.inventory-contact-inner > div:last-child {
  padding-top: 34px;
}

.inventory-contact-inner .button {
  margin-top: 10px;
}

/* ========================================
   INVENTORY PROCESS + CARDS
   ======================================== */

.inventory-process {
  border-bottom: 1px solid var(--line);
}

.inventory-process .process-step h3 {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
}

.inventory-page .puppy-card {
  position: relative;
}

.inventory-page .puppy-card-photo {
  box-shadow: 0 16px 40px rgba(48,43,32,.055);
}

.inventory-page .puppy-card-copy {
  padding: 0 7px;
}

.inventory-page .puppy-card h3 {
  margin-bottom: 8px;
}

.inventory-page .puppy-price {
  margin-top: 4px;
}

.inventory-page .puppy-card-link {
  border-bottom-color: rgba(53,71,53,.22);
}

.puppy-inventory .puppy-loading {
  width: 100%;
  min-height: 320px;
  padding: 70px 0;
}
/* ========================================
   PUPPY DETAIL
   ======================================== */

.puppy-loading {
  display: flex;
  width: min(calc(100% - 64px), var(--max));
  min-height: 70vh;
  margin: 0 auto;
  padding: 120px 0;
  flex-direction: column;
  justify-content: center;
}

.puppy-detail-top {
  display: grid;
  width: min(calc(100% - 64px), 1120px);
  margin: 0 auto;
  padding:
    clamp(55px, 7vw, 85px)
    0
    clamp(75px, 9vw, 110px);
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}

.puppy-detail-media {
  width: 100%;
  max-width: 500px;
  min-width: 0;
  justify-self: end;
}

.puppy-detail-primary {
  width: 100%;
  aspect-ratio: 1 / 1.05;
  overflow: hidden;
  background: var(--cream-deep);
  box-shadow: 0 14px 40px rgba(41,41,31,.08);
}

.puppy-detail-primary-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.puppy-detail-placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: rgba(41,41,31,.42);
  background: linear-gradient(145deg, #eee7da, #ded4c3);
}

.puppy-detail-gallery {
  display: grid;
  margin-top: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.puppy-gallery-button {
  display: block;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--cream-deep);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.puppy-gallery-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease, opacity .3s ease;
}

.puppy-gallery-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(41,41,31,.15);
}

.puppy-gallery-button:hover img {
  transform: scale(1.025);
  opacity: .9;
}

.puppy-detail-summary {
  position: sticky;
  top: 105px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-top: 5px;
}

.puppy-back-link {
  display: inline-flex;
  margin-bottom: 38px;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .05em;
}

.puppy-detail-status {
  display: inline-block;
  margin-bottom: 15px;
  color: var(--forest);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.puppy-detail-status::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  content: "";
  background: currentColor;
  vertical-align: 1px;
}

.puppy-detail-status-reserved {
  color: #80633d;
}

.puppy-detail-status-adopted {
  color: var(--muted);
}

.puppy-detail-breed {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.puppy-detail-summary h1 {
  margin-bottom: 30px;
  color: var(--ink);
  font-size: clamp(3rem, 5.5vw, 5.2rem);
  letter-spacing: -.05em;
}

.puppy-facts {
  margin: 0 0 27px;
  padding: 0;
  border-top: 1px solid var(--line);
}

.puppy-facts div {
  display: flex;
  width: 100%;
  min-width: 0;
  padding: 12px 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}

.puppy-facts dt {
  min-width: 0;
  flex: 0 1 auto;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.puppy-facts dd {
  max-width: 62%;
  min-width: 0;
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-align: right;
  font-family: var(--serif);
  font-size: .92rem;
}

.puppy-detail-price {
  display: flex;
  margin-bottom: 26px;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}

.puppy-detail-price span {
  color: var(--muted);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.puppy-detail-price strong {
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 400;
}

.puppy-detail-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 17px;
}

.puppy-detail-actions .button {
  width: 100%;
}

.puppy-deposit-note {
  margin-top: 20px;
  font-size: .75rem;
  line-height: 1.6;
}

/* ========================================
   PUPPY STORY
   ======================================== */

.puppy-story {
  display: grid;
  width: min(calc(100% - 64px), 1000px);
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 7vw, 90px);
  align-items: center;
}

.puppy-story-heading h2 {
  max-width: 470px;
}

.puppy-story-copy {
  padding-top: 0;
}

.puppy-story-copy p {
  font-size: 1rem;
  line-height: 1.72;
}

.puppy-story-copy .lead {
  max-width: 620px;
  margin-bottom: 0;
}

/* ========================================
   PUPPY PARENTS
   ======================================== */

.puppy-parents-section {
  width: 100%;
  max-width: none;
  padding:
    clamp(72px, 8vw, 100px)
    max(32px, calc((100vw - 1050px) / 2));
  background: var(--forest-wash);
}

.puppy-parents-section .section-heading,
.puppy-parents {
  width: 100%;
  max-width: 1050px;
  margin-right: auto;
  margin-left: auto;
}

.puppy-parents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 70px);
}

.puppy-parent {
  min-height: 0;
  padding: 28px 0 0;
  border-top: 2px solid rgba(53,71,53,.2);
}

.puppy-parent:first-child {
  padding-left: 0;
  border-right: 0;
}

.puppy-parent:last-child {
  padding-right: 0;
}

.parent-label {
  margin-bottom: 15px;
  color: var(--gold);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.puppy-parent h3 {
  font-size: clamp(1.65rem, 2.7vw, 2.35rem);
}

.parent-coming-soon {
  font-size: .82rem;
  font-weight: 900;
}

/* ========================================
   TESTIMONIALS
   ======================================== */

.testimonials-section {
  overflow: visible;
}

.testimonials-heading {
  max-width: 680px;
  margin: 0 auto 42px;
  text-align: center;
}

.testimonials-heading h2 {
  margin-bottom: 18px;
}

.testimonials-heading > p:last-child {
  max-width: 560px;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.72;
}

/* ========================================
   TESTIMONIAL CAROUSEL
   ======================================== */

.testimonials-carousel {
  position: relative;
  width: 100%;
}

.testimonials-track {

  display: flex;

  gap: 22px;

  padding:

    10px

    max(88px, calc((100vw - var(--max)) / 2 + 24px))

    28px;

  overflow-x: auto;

  overflow-y: hidden;

  scroll-snap-type: x mandatory;

  scroll-behavior: smooth;

  scrollbar-width: none;

  -ms-overflow-style: none;
  
  -webkit-overflow-scrolling: touch;

touch-action: pan-x;

}

.testimonials-track::-webkit-scrollbar,
.testimonial-text::-webkit-scrollbar {
  display: none;
}

/* ========================================
TESTIMONIAL CARD
======================================== */

.testimonial-card {
  position: relative;
  display: flex;
  flex: 0 0 min(25vw, 310px);
  width: min(25vw, 310px);
  aspect-ratio: 3 / 4;
  padding: 40px 28px 27px;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
  background:
    #eee5d4
    url("ck-assets/testimony-card.webp")
    center / 100% 100%
    no-repeat;
  border-radius: 28px;
  box-shadow: 0 14px 34px rgba(41,41,31,.1);
  scroll-snap-align: start;
}

.testimonial-card::before {
display: none;
content: none;
}

.testimonial-card::after {
position: absolute;
z-index: 2;
right: 30px;
bottom: 76px;
left: 30px;
height: 28px;
content: "";
pointer-events: none;
background:
linear-gradient(
to bottom,
rgba(238,229,212,0),
rgba(238,229,212,.88)
);
}

.testimonial-quote-mark {
position: relative;
z-index: 3;
display: block;
flex: 0 0 auto;
height: 55px;
color: rgba(53,71,53,.34);
font-family: var(--serif);
font-size: 4.7rem;
font-weight: 700;
line-height: .8;
user-select: none;
}

.testimonial-text {
position: relative;
z-index: 3;
flex: 1 1 auto;
min-height: 0;
margin-top: 9px;
padding: 0 6px 29px 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
touch-action: pan-x pan-y;
}

.testimonial-text::-webkit-scrollbar {
display: none;
}

.testimonial-text p {
margin: 0 0 1.12em;
color: var(--ink);
font-family: var(--serif);
font-size: 1rem;
font-weight: 400;
line-height: 1.72;
}

.testimonial-text p:last-child {
margin-bottom: 8px;
}

.testimonial-author {
position: relative;
z-index: 4;
flex: 0 0 auto;
margin-top: 15px;
padding-top: 17px;
border-top: 1px solid rgba(41,41,31,.18);
color: var(--forest-deep);
font-family: var(--sans);
font-size: .78rem;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
}

.testimonials-swipe-hint {
display: none;
margin: 12px auto 0;
color: var(--muted);
font-family: var(--sans);
font-size: .74rem;
font-weight: 800;
letter-spacing: .08em;
text-align: center;
text-transform: uppercase;
}

/* ========================================
   TESTIMONIAL DESKTOP STICKER ARROWS
   ======================================== */

.testimonial-scroll-button {
  position: absolute;
  z-index: 20;
  top: 50%;
  display: flex;
  width: 72px;
  height: 72px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transform: translateY(-50%);
  transition: transform .2s ease, opacity .2s ease;
}

.testimonial-scroll-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 5px 8px rgba(41,41,31,.16));
  transition: filter .2s ease;
}

.testimonial-scroll-button:hover:not(:disabled) {
  transform: translateY(-53%) scale(1.05);
}

.testimonial-scroll-button:hover:not(:disabled) img {
  filter: drop-shadow(0 9px 12px rgba(41,41,31,.22));
}

.testimonial-scroll-button:focus-visible {
  outline: 3px solid rgba(53,71,53,.32);
  outline-offset: 4px;
  border-radius: 50%;
}

.testimonial-scroll-button:disabled {
  opacity: .32;
  cursor: default;
}

.testimonial-scroll-prev {
  left: -28px;
}

.testimonial-scroll-next {
  right: -28px;
}
/* ========================================
   TESTIMONIAL RESPONSIVE
   ======================================== */

@media (max-width: 900px) {
  .testimonial-card {
    flex-basis: min(68vw, 365px);
    width: min(68vw, 365px);
  }
}

@media (max-width: 760px) {
  .testimonials-section {
    width: 100%;
    text-align: center;
  }

  .testimonials-heading {
    width: calc(100% - 40px);
    margin: 0 auto 30px;
    padding: 0;
  }

  .testimonials-track {
    gap: 16px;
    padding: 8px 7vw 25px;
  }

  .testimonial-card {
    flex: 0 0 86vw;
    width: 86vw;
    max-width: 390px;
    padding: 42px 30px 29px;
    border-radius: 30px;
    text-align: left;
  }

  .testimonial-card::after {
    right: 25px;
    bottom: 71px;
    left: 25px;
    height: 27px;
  }

  .testimonial-quote-mark {
    height: 52px;
    font-size: 4.5rem;
  }

  .testimonial-text {
    margin-top: 7px;
    padding: 0 4px 28px 0;
  }

  .testimonial-text p {
    font-size: 1rem;
    line-height: 1.7;
  }

  .testimonial-author {
    margin-top: 14px;
    padding-top: 15px;
    font-size: .77rem;
  }

  .testimonials-swipe-hint {
    display: block;
    width: calc(100% - 40px);
  }

  .testimonial-scroll-button {
    display: none;
  }
}

@media (max-width: 480px) {
  .testimonials-track {
    padding-right: 6vw;
    padding-left: 6vw;
  }

  .testimonial-card {
    flex-basis: 86vw;
    width: 86vw;
    max-width: none;
    padding: 40px 27px 27px;
    border-radius: 28px;
  }

  .testimonial-card::after {
    right: 22px;
    bottom: 68px;
    left: 22px;
    height: 26px;
  }

  .testimonial-quote-mark {
    height: 50px;
    font-size: 4.35rem;
  }

  .testimonial-text {
    margin-top: 6px;
    padding: 0 3px 27px 0;
  }

  .testimonial-text p {
    font-size: .98rem;
    line-height: 1.68;
  }

  .testimonial-author {
    margin-top: 13px;
    padding-top: 14px;
    font-size: .75rem;
  }
}

@media (max-width: 360px) {
  .testimonial-card {
    flex-basis: 87vw;
    width: 87vw;
    padding: 36px 24px 24px;
    border-radius: 26px;
  }

  .testimonial-quote-mark {
    height: 47px;
    font-size: 4.05rem;
  }

  .testimonial-text p {
    font-size: .94rem;
    line-height: 1.65;
  }
}

/* ========================================
   TRANSPORT
   ======================================== */

.puppy-going-home {
  width: min(calc(100% - 64px), 1050px);
}

.transport-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 50px);
}

.transport-option {
  position: relative;
  min-height: 0;
  padding: 30px 0 0;
  border-top: 1px solid rgba(53,71,53,.2);
}

.transport-mark {
  display: block;
  width: 23px;
  height: 9px;
  margin-bottom: 44px;
  border-radius: 100% 0 100% 0;
  background: var(--gold);
  opacity: .72;
  transform: rotate(-13deg);
}

.transport-option h3 {
  margin-bottom: 12px;
}

.transport-option p {
  max-width: 300px;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.72;
}

.transport-number,
.process-number,
.breed-number {
  display: none;
}

/* ========================================
   NOT FOUND
   ======================================== */

.puppy-not-found {
  display: flex;
  width: min(calc(100% - 64px), 900px);
  min-height: 70vh;
  margin: 0 auto;
  padding: 120px 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.puppy-not-found h1 {
  max-width: 680px;
  margin-bottom: 22px;
  color: var(--ink);
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  letter-spacing: -.05em;
}

.puppy-not-found > p:last-of-type {
  max-width: 520px;
  margin-bottom: 30px;
}

/* ========================================
PUPPY WELCOME MODAL
======================================== */

.puppy-welcome-modal {
position: fixed;
z-index: 5000;
inset: 0;

display: grid;
padding: clamp(18px, 3vw, 42px);
place-items: center;

visibility: hidden;
opacity: 0;
pointer-events: none;

transition:
visibility .35s ease,
opacity .35s ease;
}

.puppy-welcome-modal.open {
visibility: visible;
opacity: 1;
pointer-events: auto;
}

.puppy-welcome-backdrop {
position: absolute;
inset: 0;

background: rgba(24,29,22,.74);

-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}

/* ========================================
CARD
======================================== */

.puppy-welcome-dialog {
position: relative;
z-index: 1;

display: grid;
place-items: center;

width: min(92vw, 820px);
max-height: calc(100svh - 36px);

aspect-ratio: 1.48 / 1;

/*
Slightly more breathing room on the
right keeps the text away from the
botanical artwork.
*/
padding:
clamp(54px, 6vw, 72px)
clamp(100px, 13vw, 150px)
clamp(48px, 5.5vw, 66px)
clamp(58px, 7vw, 86px);

align-items: center;
justify-content: center;

overflow: visible;

color: var(--ink);

background:
transparent
url("ck-assets/ck-modal-card.webp")
center / 100% 100%
no-repeat;

box-shadow: none;

filter:
drop-shadow(
0 26px 30px
rgba(14,17,13,.34)
);

opacity: 0;

transform:
translateY(22px)
scale(.985);

transition:
opacity .38s ease,
transform .38s ease;
}

.puppy-welcome-modal.open
.puppy-welcome-dialog {
opacity: 1;

transform:
translateY(0)
scale(1);
}

/* ========================================
CONTENT
======================================== */

.puppy-welcome-content {
position: relative;
z-index: 1;

width: 100%;
max-width: 500px;

margin: 0;

text-align: center;
}

.puppy-welcome-eyebrow {
margin-bottom: 12px;

color: var(--gold);

font-size: .61rem;
font-weight: 900;
letter-spacing: .18em;
text-transform: uppercase;
}

/* ========================================
HEADLINE
======================================== */

.puppy-welcome-content h2 {
max-width: 490px;

margin:
0
auto
19px;

color: var(--ink);

font-size:
clamp(
2rem,
3.4vw,
3rem
);

letter-spacing: -.045em;
line-height: 1.06;
}

/* ========================================
BODY COPY
======================================== */

.puppy-welcome-copy {
width: 100%;
max-width: 455px;

margin:
0
auto;
}

.puppy-welcome-copy p {
margin-bottom: 11px;

color: var(--ink);

font-size: .84rem;
font-weight: 700;

line-height: 1.58;
}

.puppy-welcome-copy p:last-child {
margin-bottom: 0;
}

/* ========================================
CLOSING NOTE
======================================== */

.puppy-welcome-note {
position: relative;

width: 100%;
max-width: 410px;

margin:
22px
auto
0;

padding-top: 18px;

color: var(--ink-soft);

font-family: var(--serif);
font-size: .72rem;
font-weight: 700;
font-style: italic;

line-height: 1.5;
}

/*
Tiny field-journal divider.
Keeps the note connected to the copy
without turning it into another section.
*/

.puppy-welcome-note::before {
display: block;

width: 62px;
height: 1px;

margin:
0
auto
15px;

content: "";

background:
rgba(53,71,53,.28);
}

/* ========================================
CLOSE BUTTON
======================================== */

.puppy-welcome-close {
position: absolute;
z-index: 3;

top: 20px;
right: 22px;

display: grid;

width: 38px;
height: 38px;
padding: 0;

place-items: center;

color: var(--ink-soft);

border:
1px solid
rgba(41,41,31,.2);

border-radius: 50%;

background:
rgba(250,247,240,.5);

cursor: pointer;

transition:
color .2s ease,
background .2s ease,
border-color .2s ease,
transform .2s ease,
box-shadow .2s ease;
}

.puppy-welcome-close span {
display: block;

margin-top: -3px;

font-family: Georgia, serif;
font-size: 1.55rem;
font-weight: 400;

line-height: 1;
}

.puppy-welcome-close:hover {
color: var(--forest-deep);

background:
rgba(255,253,248,.8);

border-color:
rgba(53,71,53,.35);

transform: translateY(-2px) rotate(4deg);
box-shadow: 0 7px 15px rgba(41,41,31,.14);
}

.puppy-welcome-close:focus-visible {
outline:
2px solid
var(--forest);

outline-offset: 4px;
}

/* ========================================
MOBILE WELCOME MODAL
======================================== */

@media (max-width: 760px) {

.puppy-welcome-modal {
padding:
max(10px, env(safe-area-inset-top))
10px
max(10px, env(safe-area-inset-bottom));
}

.puppy-welcome-dialog {
width:
min(
95vw,
410px
);

max-height:
calc(
100svh - 20px
);

aspect-ratio: auto;

min-height:
min(
620px,
calc(100svh - 20px)
);

padding:
58px
37px
48px;

align-items: center;
justify-content: center;

background:
transparent
url("ck-assets/ck-modal-card-mobile.webp")
center / 100% 100%
no-repeat;
}

.puppy-welcome-content {
width: 100%;
max-width: 300px;

margin:
0
auto;

text-align: center;
}

.puppy-welcome-eyebrow {
margin-bottom: 10px;

font-size: .53rem;
}

.puppy-welcome-content h2 {
max-width: 290px;

margin:
0
auto
16px;

font-size:
clamp(
1.55rem,
7vw,
2.05rem
);

line-height: 1.08;
}

.puppy-welcome-copy {
max-width: 285px;
}

.puppy-welcome-copy p {
margin-bottom: 10px;

font-size:
clamp(
.7rem,
3.1vw,
.8rem
);

line-height: 1.52;
}

.puppy-welcome-note {
max-width: 270px;

margin-top: 20px;
padding-top: 15px;

font-size: .64rem;
line-height: 1.45;
}

.puppy-welcome-note::before {
width: 52px;

margin-bottom: 13px;
}

.puppy-welcome-close {
top: 17px;
right: 17px;
}

}

/* ========================================
SHORT MOBILE SCREENS
======================================== */

@media (max-width: 760px) and (max-height: 720px) {

.puppy-welcome-dialog {
width:
min(
86vw,
365px
);

max-height:
calc(
100svh - 16px
);

min-height: 0;

padding:
46px
32px
37px;
}

.puppy-welcome-content {
max-width: 280px;
}

.puppy-welcome-eyebrow {
margin-bottom: 7px;

font-size: .49rem;
}

.puppy-welcome-content h2 {
margin-bottom: 11px;

font-size:
clamp(
1.3rem,
5.8vw,
1.8rem
);
}

.puppy-welcome-copy p {
margin-bottom: 6px;

font-size:
clamp(
.65rem,
2.8vw,
.76rem
);

line-height: 1.4;
}

.puppy-welcome-note {
margin-top: 13px;
padding-top: 11px;

font-size: .58rem;
line-height: 1.35;
}

.puppy-welcome-note::before {
width: 44px;

margin-bottom: 9px;
}

.puppy-welcome-close {
top: 18px;
right: 18px;

width: 32px;
height: 32px;
}

}

/* ========================================
   APPLICATION / FAQ / CONTACT
   ======================================== */

.application-hero {
  width: min(calc(100% - 64px), var(--max));
  margin: 0 auto;
  padding:
    clamp(105px, 14vw, 185px)
    0
    clamp(80px, 10vw, 125px);
  border-bottom: 1px solid var(--line);
}

.application-hero-inner {
  max-width: 900px;
}

.application-hero h1 {
  max-width: 850px;
  margin-bottom: 34px;
  color: var(--ink);
  font-size: clamp(4rem, 8vw, 7.5rem);
  letter-spacing: -.06em;
}

.application-hero .lead {
  max-width: 650px;
  margin-bottom: 0;
}

.application-section {
  border-bottom: 1px solid var(--line);
}

.application-layout {
  display: grid;
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
  gap: clamp(65px, 10vw, 145px);
  align-items: start;
}

.application-intro {
  position: sticky;
  top: 120px;
}

.application-intro h2 {
  max-width: 540px;
}

.application-intro > p:not(.eyebrow) {
  max-width: 430px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.72;
}

/* ========================================
   FORM
   ======================================== */

.clearview-form {
  width: 100%;
}

.form-section {
  margin-bottom: clamp(65px, 8vw, 90px);
  padding: 0 0 clamp(65px, 8vw, 90px);
  border-bottom: 1px solid var(--line);
}

.form-section:last-of-type {
  margin-bottom: 0;
}

.form-section-heading {
  margin-bottom: clamp(35px, 5vw, 50px);
}

.form-kicker {
  margin-bottom: 11px;
  color: var(--gold);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.form-section-heading h3 {
  max-width: 600px;
  margin-bottom: 0;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 30px;
}

.form-field {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.form-field-full {
  margin-top: 34px;
}

.form-field label {
  margin-bottom: 10px;
  color: var(--ink);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .055em;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  margin: 0;
  padding: 13px 0 14px;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid rgba(41,41,31,.28);
  border-radius: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.55;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(41,41,31,.68);
  font-weight: 700;
  opacity: 1;
}

.form-field textarea {
  min-height: 130px;
  padding-top: 15px;
  resize: vertical;
}

.form-field select {
  min-height: 52px;
  padding-right: 30px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 8px) calc(50% - 2px),
    calc(100% - 3px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
/* ========================================
   FORM STATES
   ======================================== */

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-bottom-color: rgba(53,71,53,.55);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-bottom-color: var(--forest);
  box-shadow: 0 1px 0 var(--forest);
}

.form-field input:-webkit-autofill,
.form-field input:-webkit-autofill:hover,
.form-field input:-webkit-autofill:focus,
.form-field textarea:-webkit-autofill,
.form-field select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 9999s ease-in-out 0s;
}

.selected-puppy-note {
  position: relative;
  margin: -8px 0 38px;
  padding: 18px 0 18px 22px;
  border-left: 2px solid var(--gold);
}

.selected-puppy-note[hidden] {
  display: none;
}

.selected-puppy-note span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.selected-puppy-note strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
}

.form-submit {
  display: flex;
  padding-top: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
}

.form-submit p {
  max-width: 390px;
  margin-bottom: 0;
  font-size: .8rem;
  font-weight: 700;
}

.form-submit .button {
  flex: 0 0 auto;
}

/* ========================================
   FAQ
   ======================================== */

.faq-section {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: clamp(65px, 10vw, 145px);
  border-bottom: 1px solid var(--line);
}

.faq-heading {
  align-self: start;
}

.faq-heading h2 {
  max-width: 520px;
}

.faq-heading > p:last-child {
  max-width: 420px;
  font-weight: 700;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  position: relative;
  padding: 28px 46px 28px 0;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.45;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  position: absolute;
  top: 50%;
  right: 3px;
  width: 17px;
  height: 17px;
  content: "";
  background:
    linear-gradient(var(--forest), var(--forest)) center / 17px 1px no-repeat,
    linear-gradient(var(--forest), var(--forest)) center / 1px 17px no-repeat;
  opacity: .72;
  transform: translateY(-50%);
  transition: transform .25s ease, opacity .25s ease;
}

.faq-item[open] summary::after {
  opacity: 1;
  transform: translateY(-50%) rotate(45deg);
}

.faq-answer {
  max-width: 650px;
  padding: 0 45px 27px 0;
}

.faq-answer p {
  margin-bottom: 0;
  font-weight: 700;
}

/* ========================================
   CONTACT
   ======================================== */

.contact-section {
  border-bottom: 1px solid var(--line);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  gap: clamp(65px, 10vw, 145px);
  align-items: start;
}

.contact-heading h2 {
  max-width: 600px;
}

.contact-heading .lead {
  margin-bottom: 13px;
}

.contact-heading > p:last-child {
  max-width: 430px;
  font-weight: 700;
}

.contact-form {
  max-width: 680px;
}

.contact-form .form-field {
  margin-bottom: 31px;
}

.contact-form .form-field:last-of-type {
  margin-bottom: 0;
}

.contact-submit {
  padding-top: 12px;
  justify-content: flex-end;
}

/* ========================================
   TABLET
   ======================================== */

@media (max-width: 980px) {
  .site-nav {
    gap: 18px;
  }

  .site-nav > a:not(.nav-cta) {
    font-size: .61rem;
  }

  .puppy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 50px;
  }

  .process-list::before {
    display: none;
  }

  .process-step,
  .process-step:first-child,
  .process-step:last-child {
    padding-top: 25px;
    border-top: 1px solid rgba(53,71,53,.18);
  }

  .process-mark {
    top: -5px;
  }

  .puppy-detail-top {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
    gap: 32px;
  }
}

/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 760px) {
  :root {
    --header-height: 72px;
  }

  body {
    font-size: 17px;
  }

  body::before {
    background-image: url("ck-assets/ck-paper-mobile.webp");
    background-position: center;
    background-size: cover;
  }

  body::after {
    inset: -25%;
    width: 150%;
    height: 150%;
    filter: blur(28px);
    opacity: .64;
  }

  main::before {
    inset: -28%;
    width: 156%;
    height: 156%;
    filter: blur(38px);
    opacity: .54;
  }

  p {
    font-size: 1.02rem;
  }

  /* ========================================
     SHARED MOBILE LAYOUT
     ======================================== */

  .section {
    width: calc(100% - 40px);
    padding: 65px 0;
  }

  h2 {
    font-size: clamp(2.15rem, 9.5vw, 3.15rem);
    line-height: 1.12;
  }

  h3 {
    line-height: 1.18;
  }

  .split-heading {
    margin-bottom: 34px;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  .split-heading > div:first-child,
  .section-heading-side {
    width: 100%;
  }

  .section-heading {
    margin: 0 auto 36px;
    text-align: center;
  }

  .section-heading > p:last-child {
    margin-right: auto;
    margin-left: auto;
  }

  .section-heading-side {
    max-width: 100%;
    padding-bottom: 0;
    text-align: center;
  }

  .home-intro-copy p,
  .story-copy p,
  .breed-copy p,
  .process-step p,
  .location-content p,
  .faq-teaser-content p,
  .inventory-heading > p,
  .inventory-contact p,
  .puppy-story-copy p,
  .transport-option p,
  .application-intro > p:not(.eyebrow),
  .faq-heading > p:last-child,
  .faq-answer p,
  .contact-heading > p:last-child {
    font-size: 1.02rem;
  }

  /* ========================================
     MOBILE STICKER BUTTONS
     ======================================== */

  .sticker-button-large {
    width: min(78vw, 310px);
  }

  .sticker-button-inline {
    width: min(69vw, 265px);
    margin-right: auto;
    margin-left: auto;
  }

  .sticker-button-wide {
    width: min(80vw, 320px);
  }

  .sticker-button-large img,
  .sticker-button-inline img,
  .sticker-button-wide img {
    width: 100%;
    height: auto;
  }

  .sticker-actions {
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }

  .button {
    min-height: 52px;
    padding: 14px 24px;
  }

  /* ========================================
     MOBILE HEADER
     ======================================== */

  .site-header {
    height: 72px;
    padding: 0 20px;
    background: var(--cream) url("ck-assets/ck-paper-mobile.webp") center top / cover no-repeat;
  }

  .site-header.scrolled,
  .interior-page .site-header,
  body.nav-open .site-header {
    height: 68px;
    color: var(--ink);
    background: var(--cream) url("ck-assets/ck-paper-mobile.webp") center top / cover no-repeat;
    border-bottom: 1px solid rgba(41,41,31,.13);
    box-shadow: 0 7px 24px rgba(41,41,31,.1);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .brand-name {
    font-size: 1.12rem;
  }

  .brand-location {
    margin-top: 4px;
    font-size: .54rem;
  }

  .brand-with-home {
    gap: 8px;
  }

  .brand-home-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .brand-home-icon svg {
    width: 18px;
    height: 18px;
  }

  .menu-toggle {
    display: block;
  }

  /* ========================================
     MOBILE NAVIGATION
     ======================================== */

  .site-nav {
    position: fixed;
    z-index: 1001;
    inset: 0;
    display: flex;
    padding: 105px 24px max(40px, env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    color: var(--ink);
    background: var(--cream) url("ck-assets/ck-paper-mobile.webp") center / cover no-repeat;
    text-align: center;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    visibility: hidden;
    opacity: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-15px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  }

  .site-nav.open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .site-nav:not(.sticker-nav) > a:not(.nav-cta) {
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--serif);
    font-size: clamp(1.45rem, 7vw, 2rem);
    font-weight: 400;
    letter-spacing: -.03em;
    text-transform: none;
  }

  .site-nav:not(.sticker-nav) > a:not(.nav-cta)::after {
    display: none;
  }

  .site-nav:not(.sticker-nav) .nav-cta {
    margin-top: 14px;
    padding: 13px 24px;
    color: var(--white);
    background: var(--forest);
    border-color: var(--forest);
  }

  /* Sticker navigation */

  .site-nav.sticker-nav {
    gap: 8px;
  }

  .site-nav.sticker-nav > .sticker-nav-button,
  .site-nav.sticker-nav > a:not(.nav-cta) {
    display: inline-flex;
    width: min(74vw, 300px);
    max-width: min(74vw, 300px);
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    font-size: inherit;
    line-height: 0;
  }

  .site-nav.sticker-nav > .sticker-nav-button img,
  .site-nav.sticker-nav > a:not(.nav-cta) img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  .site-nav.sticker-nav > .sticker-nav-cta {
    width: min(80vw, 320px);
    max-width: min(80vw, 320px);
    height: auto;
    margin-top: 5px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .site-nav.sticker-nav > .sticker-nav-cta img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .site-nav.sticker-nav > a {
    border-bottom: 0 !important;
  }

  .site-nav.sticker-nav > a::after {
    display: none !important;
  }

  body.nav-open .site-header {
    color: var(--ink);
  }

  body.nav-open .menu-toggle span:first-child {
    top: 21px;
    transform: rotate(45deg);
  }

  body.nav-open .menu-toggle span:last-child {
    top: 21px;
    transform: rotate(-45deg);
  }
    /* ========================================
     MOBILE HERO
     ======================================== */

  .hero {
    min-height: max(650px, 100svh);
    padding: 115px 22px 52px;
    align-items: flex-end;
    background-image:
      linear-gradient(
        180deg,
        rgba(15,20,14,.18) 0%,
        rgba(15,20,14,.1) 32%,
        rgba(15,20,14,.52) 68%,
        rgba(15,20,14,.72) 100%
      ),
      url("ck-assets/ck-mobile-bg.webp");
    background-position: center;
    background-size: cover;
  }

  .hero-content {
    width: 100%;
    padding-bottom: 15px;
    text-align: center;
  }

  .hero-eyebrow {
    margin-bottom: 15px;
    font-size: .59rem;
  }

  .hero h1 {
    margin: 0 auto 16px;
    font-size: clamp(3.6rem, 17vw, 5.5rem);
    line-height: .9;
  }

  .hero h1 span {
    margin-left: 0;
    font-size: .59em;
  }

  .hero-breeds {
    margin: 22px auto 14px;
    justify-content: center;
    font-size: .58rem;
  }

  .hero-copy {
    max-width: 390px;
    margin: 0 auto 24px;
    font-size: .97rem;
  }

  .hero-actions {
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }

  .hero-scroll {
    display: none;
  }

  /* ========================================
     HOME INTRO
     ======================================== */

  .home-intro {
    width: calc(100% - 28px);
    margin: 18px auto;
    padding: 42px 22px;
    text-align: center;
  }

  .home-intro::before {
    background-image: url("ck-assets/clearview-story-bg-mobile.webp");
    background-position: center;
  }

  .home-intro::after {
    background:
      linear-gradient(
        rgba(249,246,239,.68),
        rgba(249,246,239,.72)
      );
  }

  .home-intro-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }

  .home-intro h2,
  .home-intro-copy p {
    margin-right: auto;
    margin-left: auto;
  }

  .home-intro-copy {
    max-width: 620px;
    padding-top: 0;
    justify-self: stretch;
  }

  .home-intro-copy p {
    font-size: .98rem;
    line-height: 1.58;
  }

  /* ========================================
     FEATURED PUPPIES
     ======================================== */

  .featured-puppies-section {
  width: 100%;
  padding: 65px 20px;
  text-align: center;
}

  .featured-puppies-section .split-heading {
    align-items: center;
  }

  .puppy-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .puppy-card-photo {
    margin-bottom: 18px;
  }

  .puppy-card-copy {
    text-align: center;
  }

  .puppy-meta,
  .puppy-card-link {
    justify-content: center;
  }

  /* ========================================
     STORY
     ======================================== */

  .story-section {
    width: calc(100% - 40px);
    padding: 68px 0;
    grid-template-columns: 1fr;
    gap: 5px;
    text-align: center;
  }

  .story-heading h2,
  .story-copy p {
    margin-right: auto;
    margin-left: auto;
  }

  .story-copy {
    padding-top: 0;
  }

  .story-copy .sticker-button-inline {
    margin-right: auto;
    margin-left: auto;
  }

  /* ========================================
     BREEDS
     ======================================== */

  .breeds-section {
    width: 100%;
    padding: 65px 20px;
    text-align: center;
  }

  .breed-list {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .breed-row {
    padding: 25px 0 0;
    text-align: center;
  }

  .breed-copy {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .breed-copy h3 {
    font-size: clamp(1.65rem, 7vw, 2.25rem);
  }

  .breed-copy p {
    margin-right: auto;
    margin-left: auto;
  }

  .breed-copy .sticker-button-inline {
    margin-right: auto;
    margin-left: auto;
  }

  /* ========================================
     PROCESS
     ======================================== */

  .process-section {
    width: calc(100% - 40px);
    padding: 68px 0;
    text-align: center;
  }

  .process-intro,
  .process-heading {
    margin: 0 auto 40px;
    text-align: center;
  }

  .process-list {
    grid-template-columns: 1fr;
    gap: 29px;
  }

  .process-step,
  .process-step:first-child,
  .process-step:last-child {
    min-height: 0;
    padding: 24px 0 0;
    border-top: 1px solid rgba(53,71,53,.18);
    border-right: 0;
    border-bottom: 0;
    text-align: center;
  }

  .process-mark {
    top: -5px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
  }

  .process-step p {
    max-width: 430px;
    margin-right: auto;
    margin-left: auto;
  }

  .process-action {
    display: flex;
    margin-top: 34px;
    justify-content: center;
  }

  /* ========================================
     PAYMENT
     ======================================== */

  .payment-methods {
    margin-top: 30px;
    gap: 28px;
  }

  .payment-method {
    width: 105px;
  }

  /* ========================================
     LOCATION + FAQ TEASER
     ======================================== */

  .location-section {
    width: 100%;
    padding: 65px 20px;
    grid-template-columns: 1fr;
    gap: 4px;
    text-align: center;
  }

  .location-heading,
  .location-content {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .location-content {
    padding-top: 0;
  }

  .location-content .sticker-button-inline {
    margin-right: auto;
    margin-left: auto;
  }

  .faq-teaser {
    width: calc(100% - 40px);
    grid-template-columns: 1fr;
    gap: 4px;
    text-align: center;
  }

  .faq-teaser-heading,
  .faq-teaser-content {
    text-align: center;
  }

  .faq-teaser-content {
    padding-top: 0;
  }

  .faq-teaser-content .sticker-button-inline {
    margin-right: auto;
    margin-left: auto;
  }

  /* ========================================
     FINAL CTA
     ======================================== */

  .final-cta {
    min-height: 500px;
    padding: 70px 24px;
    text-align: center;
  }

  .final-cta h2 {
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(2.35rem, 10.5vw, 3.5rem);
  }

  .final-cta > p:not(.eyebrow) {
    margin-right: auto;
    margin-left: auto;
  }

  .final-cta-actions,
  .final-cta .sticker-actions {
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }

  /* ========================================
     FOOTER
     ======================================== */

  .site-footer {
    padding: 50px 22px 24px;
    text-align: center;
  }

  .footer-top {
    margin-bottom: 42px;
    flex-direction: column;
    align-items: center;
    gap: 34px;
  }

  .footer-brand {
    align-items: center;
  }

  .footer-nav {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
  }

  /* ========================================
     INVENTORY
     ======================================== */

  .interior-page {
    padding-top: 68px;
  }

  .inventory-hero {
    display: flex;
    width: calc(100% - 40px);
    padding: 65px 0 48px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .inventory-hero h1 {
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(3rem, 14vw, 4.5rem);
  }

  .inventory-hero > p:last-child {
    margin-right: auto;
    margin-left: auto;
  }

  .inventory-section {
    padding-top: 42px;
  }

  .inventory-heading {
    margin-bottom: 36px;
    flex-direction: column;
    align-items: center;
    gap: 17px;
    text-align: center;
  }

  .inventory-heading > div,
  .inventory-heading > p {
    margin-right: auto;
    margin-left: auto;
  }

  /* ========================================
     PUPPY FILTER STICKERS
     ======================================== */

  .puppy-filters.puppy-filter-stickers {
    display: flex;
    width: 100%;
    margin: -5px auto 65px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .puppy-filter-stickers .puppy-filter-sticker {
    width: min(74vw, 300px);
    max-width: min(74vw, 300px);
    height: auto;
    min-height: 0;
    padding: 0;
    flex: 0 0 auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    transform: none;
  }

  .puppy-filter-stickers .puppy-filter-sticker img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  .puppy-filter-stickers .puppy-filter-sticker.active,
  .puppy-filter-stickers .puppy-filter-sticker[aria-current="page"] {
    color: inherit;
    background: transparent;
    border: 0;
  }

  .inventory-group {
    margin-bottom: 90px;
  }

  .inventory-group-heading {
    margin-bottom: 35px;
    text-align: center;
  }

  .inventory-group-heading h2 {
    margin: 0 auto 25px;
    font-size: clamp(2.25rem, 11vw, 3.3rem);
  }

  .inventory-contact-inner {
    grid-template-columns: 1fr;
    gap: 25px;
    text-align: center;
  }

  .inventory-contact-inner h2,
  .inventory-contact-inner p {
    margin-right: auto;
    margin-left: auto;
  }

  .inventory-contact-inner > div:last-child {
    padding-top: 0;
  }

  .inventory-contact-inner .sticker-button-inline {
    margin-right: auto;
    margin-left: auto;
  }

  .inventory-process .section-heading {
    margin-bottom: 35px;
    text-align: center;
  }

  .inventory-page .puppy-card-copy {
    padding: 0 3px;
    text-align: center;
  }

  /* ========================================
     PUPPY DETAIL
     ======================================== */

  .puppy-loading {
    width: calc(100% - 40px);
  }

  .puppy-detail-top {
    width: 100%;
    padding: 28px 0 65px;
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .puppy-detail-media {
    width: calc(100% - 40px);
    max-width: 520px;
    margin: 0 auto;
    justify-self: center;
  }

  .puppy-detail-primary {
    aspect-ratio: 1 / 1;
    box-shadow: none;
  }

  .puppy-detail-gallery {
    padding: 0;
    gap: 8px;
  }

  .puppy-detail-summary {
    position: static;
    width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 0;
  }

  .puppy-back-link {
    margin-bottom: 28px;
  }

  .puppy-detail-summary h1 {
    margin-bottom: 26px;
    font-size: clamp(3rem, 14vw, 4.4rem);
  }

  .puppy-story {
    width: calc(100% - 40px);
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .puppy-story-copy {
    padding-top: 0;
  }

  /* ========================================
     PARENTS + TRANSPORT
     ======================================== */

  .puppy-parents-section {
    width: 100%;
    padding: 65px 20px;
  }

  .puppy-parents {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .puppy-parent {
    min-height: 0;
    padding: 24px 0 0;
  }

  .puppy-parent:first-child {
    border-right: 0;
    border-bottom: 0;
  }

  .puppy-going-home {
    width: calc(100% - 40px);
  }

  .transport-list {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  .transport-option {
    min-height: 0;
    padding: 24px 0 0;
    text-align: center;
  }

  .transport-mark {
    margin: 0 auto 20px;
  }

  .transport-option p {
    max-width: 430px;
    margin-right: auto;
    margin-left: auto;
  }

  /* ========================================
     APPLICATION + FORMS
     ======================================== */

  .application-hero {
    width: calc(100% - 40px);
    padding: 80px 0 75px;
    text-align: center;
  }

  .application-hero-inner {
    margin-right: auto;
    margin-left: auto;
  }

  .application-hero h1 {
    margin: 0 auto 27px;
    font-size: clamp(3.35rem, 16vw, 5rem);
  }

  .application-hero .lead {
    margin-right: auto;
    margin-left: auto;
  }

  .application-layout {
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .application-intro {
    position: static;
    text-align: center;
  }

  .application-intro h2,
  .application-intro > p:not(.eyebrow) {
    margin-right: auto;
    margin-left: auto;
  }

  .application-intro h2 {
    margin-bottom: 25px;
  }

  .clearview-form,
  .form-section,
  .form-section-heading,
  .form-field {
    text-align: left;
  }

  .form-section {
    margin-bottom: 58px;
    padding-bottom: 58px;
  }

  .form-section-heading {
    margin-bottom: 34px;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 29px;
  }

  .form-field-full {
    margin-top: 29px;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    font-size: 16px;
  }

  .selected-puppy-note {
    margin-bottom: 32px;
  }

  .form-submit {
    padding-top: 34px;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
  }

  .form-submit .button {
    width: 100%;
  }

  /* ========================================
     FAQ + CONTACT
     ======================================== */

  .faq-section {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .faq-heading {
    text-align: center;
  }

  .faq-heading h2,
  .faq-heading > p:last-child {
    margin-right: auto;
    margin-left: auto;
  }

  .faq-heading h2 {
    margin-bottom: 24px;
  }

  .faq-list {
    text-align: left;
  }

  .faq-item summary {
    padding: 24px 38px 24px 0;
  }

  .faq-answer {
    padding: 0 32px 24px 0;
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .contact-heading {
    text-align: center;
  }

  .contact-heading h2,
  .contact-heading .lead,
  .contact-heading > p:last-child {
    margin-right: auto;
    margin-left: auto;
  }

  .contact-form {
    max-width: none;
    text-align: left;
  }

  .contact-submit {
    padding-top: 10px;
  }

  /* ========================================
     NOT FOUND
     ======================================== */

  .puppy-not-found {
    width: calc(100% - 40px);
    min-height: 65vh;
    padding: 85px 0;
    align-items: center;
    text-align: center;
  }

  .puppy-not-found h1,
  .puppy-not-found > p:last-of-type {
    margin-right: auto;
    margin-left: auto;
  }

  /* ========================================
     MOBILE WELCOME MODAL
     ======================================== */

  .puppy-welcome-modal {
    padding:
      max(10px, env(safe-area-inset-top))
      10px
      max(10px, env(safe-area-inset-bottom));
  }

  .puppy-welcome-dialog {
    width: min(95vw, 410px);
    max-height: calc(100svh - 20px);
    aspect-ratio: auto;
    min-height: min(620px, calc(100svh - 20px));
    padding: 52px 28px 44px;
    background-image: url("ck-assets/ck-modal-card-mobile.webp");
    background-position: center;
    background-size: 100% 100%;
  }

  .puppy-welcome-content {
    max-width: 300px;
  }

  .puppy-welcome-eyebrow {
    margin-bottom: 9px;
    font-size: .53rem;
  }

  .puppy-welcome-content h2 {
    max-width: 290px;
    margin-bottom: 14px;
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  .puppy-welcome-copy {
    max-width: 285px;
  }

  .puppy-welcome-copy p {
    font-size: clamp(.7rem, 3.1vw, .8rem);
  }


  .puppy-welcome-note {
    margin-top: 13px;
    font-size: .63rem;
  }

  .puppy-welcome-close {
    top: 17px;
    right: 17px;
  }
}
/* ========================================
   SHORT MOBILE SCREENS
   ======================================== */

@media (max-width: 760px) and (max-height: 720px) {
  .site-nav.sticker-nav {
    padding: 82px 20px max(22px, env(safe-area-inset-bottom));
    gap: 5px;
  }

  .site-nav.sticker-nav > .sticker-nav-button,
  .site-nav.sticker-nav > a:not(.nav-cta) {
    width: min(62vw, 245px);
    max-width: min(62vw, 245px);
  }

  .site-nav.sticker-nav > .sticker-nav-cta {
    width: min(68vw, 265px);
    max-width: min(68vw, 265px);
    margin-top: 2px;
  }

  .puppy-welcome-dialog {
    width: min(86vw, 365px);
    max-height: calc(100svh - 16px);
    min-height: 0;
    padding: 46px 27px 37px;
  }

  .puppy-welcome-eyebrow {
    margin-bottom: 7px;
    font-size: .49rem;
  }

  .puppy-welcome-content h2 {
    margin-bottom: 10px;
    font-size: clamp(1.3rem, 5.8vw, 1.8rem);
  }

  .puppy-welcome-copy p {
    margin-bottom: 6px;
    font-size: clamp(.65rem, 2.8vw, .76rem);
    line-height: 1.4;
  }


  .puppy-welcome-note {
    margin-top: 9px;
    font-size: .58rem;
    line-height: 1.35;
  }

  .puppy-welcome-close {
    top: 18px;
    right: 18px;
    width: 32px;
    height: 32px;
  }
}

/* ========================================
   SMALL MOBILE
   ======================================== */

@media (max-width: 480px) {
  .brand-name {
    font-size: 1.08rem;
  }

  .brand-location {
    font-size: .52rem;
  }
}

/* ========================================
   VERY SMALL MOBILE
   ======================================== */

@media (max-width: 360px) {
  .site-nav.sticker-nav > .sticker-nav-button,
  .site-nav.sticker-nav > a:not(.nav-cta) {
    width: min(78vw, 270px);
    max-width: min(78vw, 270px);
  }

  .site-nav.sticker-nav > .sticker-nav-cta {
    width: min(84vw, 290px);
    max-width: min(84vw, 290px);
  }

  .sticker-button-large {
    width: min(84vw, 290px);
  }

  .sticker-button-inline {
    width: min(76vw, 250px);
  }

  .sticker-button-wide {
    width: min(86vw, 300px);
  }

  .puppy-filter-stickers .puppy-filter-sticker {
    width: min(78vw, 270px);
    max-width: min(78vw, 270px);
  }
}

/* ========================================
   GLOBAL SMALL-TEXT SAFETY NET
   ======================================== */

small,
.small,
.meta,
.label {
  font-weight: 800;
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  html,
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  body::after,
  main::before {
    animation: none !important;
    transform: none !important;
  }

  .sticker-button:hover,
  .sticker-button:active,
  .puppy-welcome-dialog,
  .puppy-welcome-modal.open .puppy-welcome-dialog {
    transform: none;
  }

  .testimonials-track {
    scroll-behavior: auto;
  }
}
/* Soft pastel payment icons */
.payment-method img {
  filter:
    saturate(.50)
    brightness(1.13)
    contrast(.80)
    sepia(.08)
    opacity(.92)
    drop-shadow(0 6px 7px rgba(41,41,31,.11));
}
/* ========================================
   UNIVERSAL PUPPY IMAGE CORNERS
   ======================================== */

.puppy-card-photo,
.puppy-card-image,
.puppy-detail-primary,
.puppy-detail-primary-image,
.puppy-gallery-button,
.puppy-gallery-button img,
.puppy-photo-placeholder,
.puppy-detail-placeholder {
  border-radius: 18px;
}
/* ========================================
   FORM STICKER SUBMIT BUTTONS
   ======================================== */

.form-sticker-submit {
  display: inline-flex;
  width: min(100%, 285px);
  margin: 0;
  padding: 0;

  align-items: center;
  justify-content: center;

  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  transition:
    transform .2s ease,
    filter .2s ease;
}

.form-sticker-submit img {
  display: block;
  width: 100%;
  height: auto;

  pointer-events: none;

  /*
    Tight brown drop-shadows create an
    outline around the transparent sticker
    silhouette.

    Final shadow gives the sticker depth.
  */

  filter:
    drop-shadow(2px 0 0 #594333)
    drop-shadow(-2px 0 0 #594333)
    drop-shadow(0 2px 0 #594333)
    drop-shadow(0 -2px 0 #594333)
    drop-shadow(0 9px 9px rgba(41, 32, 24, .24));

  transition:
    transform .2s ease,
    filter .2s ease;
}

/* ========================================
   PRESS
   ======================================== */

.form-sticker-submit:active {
  transform:
    translateY(1px)
    scale(.975);
}

.form-sticker-submit:active img {
  transform:
    scale(.99);

  filter:
    drop-shadow(2px 0 0 #4d392b)
    drop-shadow(-2px 0 0 #4d392b)
    drop-shadow(0 2px 0 #4d392b)
    drop-shadow(0 -2px 0 #4d392b)
    drop-shadow(0 4px 4px rgba(41, 32, 24, .20));
}

/* ========================================
   KEYBOARD FOCUS
   ======================================== */

.form-sticker-submit:focus-visible {
  outline:
    3px solid
    rgba(89, 67, 51, .42);

  outline-offset: 7px;

  border-radius: 20px;
}

/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 760px) {

  .form-sticker-submit {
    width: min(100%, 245px);
  }

}

/* ========================================
   STICKER HOVER
   ======================================== */

.form-sticker-submit:hover {
  transform:
    translateY(-6px)
    rotate(-1deg);
}

.form-sticker-submit:hover img {
  transform:
    scale(1.035);

  filter:
    brightness(1.04)
    saturate(1.04)
    drop-shadow(2px 0 0 #4d392b)
    drop-shadow(-2px 0 0 #4d392b)
    drop-shadow(0 2px 0 #4d392b)
    drop-shadow(0 -2px 0 #4d392b)
    drop-shadow(0 16px 14px rgba(41, 32, 24, .32));
}

/* Send Message tilts the opposite direction */

.contact-submit
.form-sticker-submit:hover {
  transform:
    translateY(-6px)
    rotate(1deg);
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {

  .form-sticker-submit,
  .form-sticker-submit img {
    transition: none;
  }

  .form-sticker-submit:hover,
  .contact-submit
  .form-sticker-submit:hover,
  .form-sticker-submit:active {
    transform: none;
  }

  .form-sticker-submit:hover img,
  .form-sticker-submit:active img {
    transform: none;
  }

}
/* ========================================
   CALL CLEARVIEW STICKER HOVER
   Matches Application + Send Message
   ======================================== */

.faq-teaser-content .sticker-button {
  transition:
    transform .2s ease,
    filter .2s ease;
}

.faq-teaser-content .sticker-button img {
  transition:
    transform .2s ease,
    filter .2s ease;
}

/* Hover */

@media (hover: hover) and (pointer: fine) {

  .faq-teaser-content .sticker-button:hover {
    transform:
      translateY(-6px)
      rotate(1deg);
  }

  .faq-teaser-content .sticker-button:hover img {
    transform:
      scale(1.035);

    filter:
      brightness(1.04)
      saturate(1.04)
      drop-shadow(0 16px 14px rgba(41, 32, 24, .32));
  }

}

/* Press / tap */

.faq-teaser-content .sticker-button:active {
  transform:
    translateY(1px)
    scale(.975);
}

.faq-teaser-content .sticker-button:active img {
  transform:
    scale(.99);

  filter:
    drop-shadow(0 4px 4px rgba(41, 32, 24, .20));
}

/* Keyboard focus */

.faq-teaser-content .sticker-button:focus-visible {
  outline:
    3px solid
    rgba(89, 67, 51, .42);

  outline-offset: 7px;
  border-radius: 20px;
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

  .faq-teaser-content .sticker-button,
  .faq-teaser-content .sticker-button img {
    transition: none;
  }

  .faq-teaser-content .sticker-button:hover,
  .faq-teaser-content .sticker-button:active,
  .faq-teaser-content .sticker-button:hover img,
  .faq-teaser-content .sticker-button:active img {
    transform: none;
  }

}
/* ========================================
   FEATURED CTA STICKER TREATMENT
   Call Clearview + Meet All Puppies
   ======================================== */

.faq-teaser .sticker-button,
.final-cta .sticker-button {
  transition:
    transform .2s ease,
    filter .2s ease;
}

.faq-teaser .sticker-button img,
.final-cta .sticker-button img {
  filter:
    drop-shadow(2px 0 0 #594333)
    drop-shadow(-2px 0 0 #594333)
    drop-shadow(0 2px 0 #594333)
    drop-shadow(0 -2px 0 #594333)
    drop-shadow(0 9px 9px rgba(41, 32, 24, .24));

  transition:
    transform .2s ease,
    filter .2s ease;
}


/* ========================================
   HOVER
   ======================================== */

@media (hover: hover) and (pointer: fine) {

  .faq-teaser .sticker-button:hover,
  .final-cta .sticker-button:hover {
    transform:
      translateY(-6px)
      rotate(-1deg);
  }

  .faq-teaser .sticker-button:hover img,
  .final-cta .sticker-button:hover img {
    transform: scale(1.035);

    filter:
      brightness(1.04)
      saturate(1.04)
      drop-shadow(2px 0 0 #4d392b)
      drop-shadow(-2px 0 0 #4d392b)
      drop-shadow(0 2px 0 #4d392b)
      drop-shadow(0 -2px 0 #4d392b)
      drop-shadow(0 16px 14px rgba(41, 32, 24, .32));
  }

  /* Give Meet All Puppies the opposite tilt */
  .final-cta .sticker-button:hover {
    transform:
      translateY(-6px)
      rotate(1deg);
  }

}


/* ========================================
   PRESS / TAP
   ======================================== */

.faq-teaser .sticker-button:active,
.final-cta .sticker-button:active {
  transform:
    translateY(1px)
    scale(.975);
}

.faq-teaser .sticker-button:active img,
.final-cta .sticker-button:active img {
  transform: scale(.99);

  filter:
    drop-shadow(2px 0 0 #4d392b)
    drop-shadow(-2px 0 0 #4d392b)
    drop-shadow(0 2px 0 #4d392b)
    drop-shadow(0 -2px 0 #4d392b)
    drop-shadow(0 4px 4px rgba(41, 32, 24, .20));
}


/* ========================================
   KEYBOARD FOCUS
   ======================================== */

.faq-teaser .sticker-button:focus-visible,
.final-cta .sticker-button:focus-visible {
  outline:
    3px solid
    rgba(89, 67, 51, .42);

  outline-offset: 7px;
  border-radius: 20px;
}


/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {

  .faq-teaser .sticker-button,
  .faq-teaser .sticker-button img,
  .final-cta .sticker-button,
  .final-cta .sticker-button img {
    transition: none;
  }

  .faq-teaser .sticker-button:hover,
  .faq-teaser .sticker-button:active,
  .final-cta .sticker-button:hover,
  .final-cta .sticker-button:active,
  .faq-teaser .sticker-button:hover img,
  .faq-teaser .sticker-button:active img,
  .final-cta .sticker-button:hover img,
  .final-cta .sticker-button:active img {
    transform: none;
  }

}
/* ========================================
   HEALTH & GENETIC TESTING
   ======================================== */

.health-section {
  position: relative;
  width: 100%;
  padding:
    clamp(85px, 9vw, 125px)
    max(32px, calc((100vw - var(--max)) / 2));

  background:
    linear-gradient(
      135deg,
      rgba(53, 71, 53, .10),
      rgba(53, 71, 53, .045)
    );

  border-top: 1px solid rgba(53, 71, 53, .12);
  border-bottom: 1px solid rgba(53, 71, 53, .12);
}

.health-inner {
  display: grid;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;

  grid-template-columns:
    minmax(280px, .8fr)
    minmax(0, 1.2fr);

  gap: clamp(60px, 9vw, 125px);
  align-items: start;
}


/* ========================================
   HEALTH HEADING
   ======================================== */

.health-heading {
  position: sticky;
  top: 120px;
}

.health-heading h2 {
  max-width: 520px;
  margin-bottom: 24px;
}

.health-intro {
  max-width: 400px;

  color: var(--ink-soft);

  font-family: var(--serif);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
}


/* ========================================
   HEALTH POINTS
   ======================================== */

.health-points {
  display: grid;
  grid-template-columns: 1fr;
}

.health-point {
  position: relative;
  padding: 34px 0 36px;
  border-top: 1px solid rgba(53, 71, 53, .22);
}

.health-point:first-child {
  padding-top: 8px;
  border-top: 0;
}

.health-point:last-child {
  padding-bottom: 0;
}

.health-mark {
  display: block;

  width: 25px;
  height: 9px;

  margin-bottom: 18px;

  border-radius: 100% 0 100% 0;

  background: var(--gold);

  opacity: .75;

  transform: rotate(-13deg);
}

.health-point-label {
  margin-bottom: 9px;

  color: var(--gold);

  font-size: .63rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.health-point h3 {
  margin-bottom: 12px;

  color: var(--ink);

  font-size: clamp(1.45rem, 2.3vw, 2rem);
}

.health-point p:last-child {
  max-width: 540px;
  margin-bottom: 0;

  color: var(--muted);

  font-size: 1rem;
  line-height: 1.72;
}


/* ========================================
   HEALTH MOBILE
   ======================================== */

@media (max-width: 760px) {

  .health-section {
    padding: 70px 20px;
  }

  .health-inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .health-heading {
    position: static;
    text-align: center;
  }

  .health-heading h2,
  .health-intro {
    margin-right: auto;
    margin-left: auto;
  }

  .health-heading h2 {
    margin-bottom: 20px;
  }

  .health-points {
    width: 100%;
    max-width: 470px;
    margin: 0 auto;
  }

  .health-point {
    padding: 32px 0;
    text-align: center;
  }

  .health-point:first-child {
    padding-top: 28px;
    border-top: 1px solid rgba(53, 71, 53, .22);
  }

  .health-mark {
    margin-right: auto;
    margin-left: auto;
  }

  .health-point p:last-child {
    margin-right: auto;
    margin-left: auto;
  }

}
/* ========================================
   PUPPY PARENT PHOTOS
   ======================================== */

.puppy-parent {
  overflow: hidden;
}

.puppy-parent-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 1.25rem;
  border-radius: 18px;
  background: var(--cream-deep);
}

.puppy-parent-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.puppy-parent-copy {
  min-width: 0;
}

/* ========================================
   BUTTON MOTION ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .button,
  .payment-method,
  .puppy-gallery-button,
  .testimonial-scroll-button,
  .puppy-welcome-close {
    transition: none;
  }

  .button:hover,
  .payment-method:hover,
  .puppy-gallery-button:hover,
  .testimonial-scroll-button:hover:not(:disabled),
  .puppy-welcome-close:hover {
    transform: none;
  }
}


/* ========================================
   CLEARVIEW APP INSTALL
   ======================================== */

.footer-install-button {
  padding: 0;
  color: inherit;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease;
}

.footer-install-button:hover,
.footer-install-button:focus-visible {
  color: var(--white);
}

.footer-install-button:focus-visible {
  outline: 2px solid rgba(255,253,248,.7);
  outline-offset: 5px;
  border-radius: 2px;
}

.footer-install-button[hidden] {
  display: none !important;
}

.clearview-install-overlay {
  position: fixed;
  z-index: 5000;
  inset: 0;
  display: grid;
  padding:
    max(24px, env(safe-area-inset-top))
    22px
    max(24px, env(safe-area-inset-bottom));
  place-items: center;
  background: rgba(13,18,13,.72);
}

.clearview-install-dialog {
  width: min(100%, 430px);
  padding: clamp(28px, 6vw, 42px);
  color: var(--ink);
  border: 1px solid rgba(75,61,42,.25);
  border-radius: 4px;
  background:
    linear-gradient(
      rgba(244,239,229,.88),
      rgba(244,239,229,.88)
    ),
    url("ck-assets/ck-paper-web.webp")
      center / cover no-repeat;
  box-shadow:
    0 24px 70px rgba(8,12,8,.35);
}

.clearview-install-dialog h2 {
  margin: 0 0 14px;
  color: var(--forest-deep);
  font-family: var(--serif);
  font-size: clamp(1.55rem, 6vw, 2.15rem);
  font-weight: 400;
  line-height: 1.18;
}

.clearview-install-intro,
.clearview-install-note {
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.65;
}

.clearview-install-intro {
  margin: 0 0 14px;
  font-weight: 800;
}

.clearview-install-steps {
  margin: 0 0 20px;
  padding-left: 22px;
  color: var(--ink);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.55;
}

.clearview-install-steps li + li {
  margin-top: 8px;
}

.clearview-install-note {
  margin: 0 0 24px;
}

.clearview-install-close {
  display: inline-flex;
  min-height: 46px;
  padding: 11px 20px;
  align-items: center;
  justify-content: center;
  color: var(--white);
  border: 1px solid var(--forest);
  background: var(--forest);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.clearview-install-close:hover {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
  transform: translateY(-2px);
  box-shadow:
    0 8px 18px rgba(41,41,31,.16);
}

.clearview-install-close:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .clearview-install-dialog {
    background:
      linear-gradient(
        rgba(244,239,229,.88),
        rgba(244,239,229,.88)
      ),
      url("ck-assets/ck-paper-mobile.webp")
        center / cover no-repeat;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-install-button,
  .clearview-install-close {
    transition: none;
  }

  .clearview-install-close:hover {
    transform: none;
  }
}


/* ========================================
   SIMPLE MOBILE INSTALL BANNER
   ======================================== */

.clearview-install-banner {
  position: fixed;
  z-index: 4500;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: 14px;
  display: grid;
  max-width: 560px;
  margin: 0 auto;
  padding: 18px;
  gap: 14px;
  color: var(--ink);
  border: 1px solid rgba(92, 72, 46, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(
      rgba(247, 242, 232, 0.94),
      rgba(247, 242, 232, 0.94)
    ),
    url("ck-assets/ck-paper-mobile.webp")
      center / cover no-repeat;
  box-shadow:
    0 16px 36px rgba(25, 26, 20, 0.18);
  opacity: 0;
  transform:
    translateY(calc(100% + 32px));
  transition:
    transform .22s ease,
    opacity .22s ease;
}

.clearview-install-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.clearview-install-banner-copy {
  display: grid;
  gap: 4px;
}

.clearview-install-banner-copy strong {
  color: var(--forest-deep);
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.15;
}

.clearview-install-banner-copy span {
  color: var(--ink-soft);
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.45;
}

.clearview-install-banner-action {
  min-height: 46px;
  padding: 11px 18px;
  color: var(--white);
  border: 1px solid var(--forest);
  border-radius: 10px;
  background: var(--forest);
  font: inherit;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.clearview-install-banner-action:hover {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
  transform: translateY(-1px);
  box-shadow:
    0 8px 18px rgba(41,41,31,.16);
}

.clearview-install-banner-action:focus-visible,
.clearview-install-banner-dismiss:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
}

.clearview-install-banner-dismiss {
  position: absolute;
  top: 8px;
  right: 10px;
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  color: rgba(77, 67, 52, 0.68);
  border: 0;
  border-radius: 50%;
  background: transparent;
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.clearview-install-banner-dismiss:hover {
  color: var(--ink);
  background:
    rgba(53, 71, 53, 0.08);
}

@media (min-width: 901px) {
  .clearview-install-banner {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clearview-install-banner,
  .clearview-install-banner-action {
    transition: none;
  }

  .clearview-install-banner-action:hover {
    transform: none;
  }
}