@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Marck+Script&display=swap');

:root {
  /* Color Palette based on visual assets */
  --color-pink: #ECABAF;         /* Dominant pink from puppy background */
  --color-pink-light: #F9D7DB;   /* Soft highlight pink */
  --color-accent: #B2535B;       /* Warm rose accent, high contrast */
  --color-accent-light: #FCEEF1; /* Soft rose highlight */
  --color-accent-dark: #6B2329;  /* Deep dark maroon */
  --color-dark: #2C2530;         /* High-contrast dark prune slate for text and primary elements */
  --color-white: #FFFFFF;
  --color-photo-placeholder: #F1F0EE; /* Neutral temporary surface for empty photo containers */
  
  /* Fonts */
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  
  /* Borders & Shadows */
  --radius-soft: 24px;
  --radius-button: 30px;
  --shadow-premium: 0 10px 30px -10px rgba(44, 37, 48, 0.15);
  --border-glass: 1px solid rgba(255, 255, 255, 0.5);
  
  /* Transitions */
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --section-space-y: 8rem;
}

/* One vertical rhythm for every main home-page section except the hero. */
main > .emotional,
main > .puppies-gallery,
main > .puppy-match,
main > .home-breeding,
main > .faq,
main > .new-families,
main > .meet-puppy {
  padding-top: var(--section-space-y);
  padding-bottom: var(--section-space-y);
}

@media (max-width: 1024px) {
  :root {
    --section-space-y: 6.5rem;
  }
}

@media (max-width: 700px) {
  :root {
    --section-space-y: 4.75rem;
  }
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: var(--font-sans);
  background-color: var(--color-pink-light);
  color: var(--color-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Typography styles */
h1 {
  font-family: var(--font-sans);
  font-size: 3.5rem;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-dark);
}

p {
  font-size: 1.1rem;
  line-height: 1.6;
  font-weight: 400;
  color: rgba(44, 37, 48, 0.8);
}

/* Layout Elements */
.container {
  width: calc(100% - 6rem);
  max-width: 1304px;
  margin: 0 auto;
  padding: 0;
}

/* Hero Section */
.hero {
  position: relative;
  min-height: 100dvh;
  width: 100%;
  background: url('фотки/hero.webp?v=3') 75% center/cover no-repeat; /* Shifted puppy to the right for more breathing room */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 5rem; /* Cap hero top padding to prevent floating down */
}

.hero-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

#hero-interactive-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
}

/* Header & Menu Layout */
.header {
  position: fixed; /* Fixed to the viewport to follow scroll */
  top: 1.5rem; /* Float down from the top edge */
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1000;
  display: flex;
  align-items: center;
  border-bottom: none; /* Remove full-width line */
  background: transparent;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 6rem); /* 3rem screen margin on each side to align outer edge with hero buttons */
  max-width: 1304px; /* Mathematically aligns outer capsule edge exactly with hero content grid */
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.82); /* Semi-transparent white */
  backdrop-filter: blur(12px); /* Frosted glass effect */
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(44, 37, 48, 0.12);
  border-radius: 36px; /* Fully rounded capsule shape */
  height: 72px; /* Sleek uniform height */
  padding: 0 1.5rem; /* Clean interior padding for floating items */
  box-shadow: 0 12px 30px -6px rgba(44, 37, 48, 0.08); /* Soft ambient depth shadow */
  box-sizing: border-box;
}

.header-left, .header-right {
  flex: 1 1 0%;
  display: flex;
  align-items: center;
}

.header-left {
  justify-content: flex-start;
}

.header-right {
  justify-content: flex-end;
  gap: 1.25rem; /* Spacious gap between phone link and messenger icons */
}

/* Photo Request Capsule (Simplified, nested inside the main header capsule) */
.request-photos-capsule {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  box-sizing: border-box;
}

.request-photos-label {
  font-size: 0.95rem; /* Matches link font size */
  font-weight: 600;
  color: var(--color-dark);
  white-space: nowrap;
  user-select: none;
}

.request-photos-icons {
  display: flex;
  align-items: center;
  gap: 0.35rem; /* Gap between the two SVGs */
}

.request-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); /* Premium spring curve */
  cursor: pointer;
}

.request-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.request-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Shape-specific border radius to match native brand guidelines */
.request-icon.icon-tg,
.request-icon.icon-tg svg {
  border-radius: 50%; /* Telegram is circular */
}

.request-icon.icon-max,
.request-icon.icon-max svg {
  border-radius: 11px; /* Max logo is a rounded square (25% corner radius) */
}

.request-icon.icon-vk,
.request-icon.icon-vk img {
  border-radius: 11px;
}

/* The SVG has a transparent canvas: use a drop shadow that follows the logo,
   rather than a rectangular shadow around its link area. */
.request-icon.icon-wa:hover {
  box-shadow: none;
}

.request-icon:hover {
  transform: scale(1.15); /* Scales from center, without shifting upward */
  box-shadow: 0 4px 12px rgba(44, 37, 48, 0.15);
}

.request-icon:active {
  transform: scale(0.95);
}

.phone-link {
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-dark);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem; /* Space between icon and number */
  white-space: nowrap;
  transition: var(--transition-fast);
}

.phone-link:hover {
  transform: scale(1.05); /* Same hover scaling as logo, color remains unchanged */
}

/* Keep the header capsule clean on compact desktop widths. The phone remains
   available until the full mobile menu takes over at 1024px. */
@media (max-width: 1200px) and (min-width: 1025px) {
  .request-photos-capsule {
    display: none;
  }
}

.phone-icon-svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.2; /* Thicker strokes for nice visibility */
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  transform-origin: 50% 55%;
  animation: phone-ring 6s ease-in-out infinite;
  transition: var(--transition-fast);
}

@keyframes phone-ring {
  0%, 78%, 100% { transform: rotate(0); filter: none; }
  80% { transform: rotate(-14deg); filter: drop-shadow(0 0 5px rgba(178, 83, 91, 0.35)); }
  83% { transform: rotate(14deg); }
  86% { transform: rotate(-10deg); }
  89% { transform: rotate(10deg); }
  92% { transform: rotate(0); filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .phone-icon-svg { animation: none; }
}

/* Logo Sizing & Hover effect */
.logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem; /* Space between logo image and brand text */
  text-decoration: none;
  height: 100%;
}

.logo-img {
  height: 48px; /* Fits inside the 72px main capsule container with beautiful padding */
  width: auto; /* Scales proportionally */
  object-fit: contain; /* Display the logo naturally without cropping */
  transition: var(--transition-fast);
}

.logo-text {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-dark);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: var(--transition-fast);
}

.logo-link:hover .logo-img {
  transform: scale(1.05); /* Premium hover scaling */
}

.logo-link:hover .logo-text {
  color: var(--color-accent); /* Elegant color transition on hover */
}

.header-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(44, 37, 48, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: var(--color-dark);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.mobile-menu-home,
.mobile-menu-contact {
  display: none;
}

.mobile-menu-connect {
  display: none;
}

/* Unified Navigation (Simplified, nested inside the main header capsule) */
.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 0.25rem;
  transition: var(--transition-smooth);
}

.nav-links li a {
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600; /* Bolder text for excellent contrast */
  color: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: 44px;
  padding: 0 1.4rem;
  border-radius: 22px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-links li a:hover {
  background: var(--color-dark); /* Crisp white-on-dark contrast on hover */
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(44, 37, 48, 0.15);
}

/* Hero Content Card (Asymmetric left alignment with glassmorphism) */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 620px; /* Reduced to leave a wider gap between text and puppy */
  margin-left: 0; /* Aligned exactly with the container grid edge */
  padding: 1rem 0;
  animation: cardFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 1rem;
  display: inline-block;
}

.hero-title {
  font-family: var(--font-sans);
  font-size: clamp(3rem, 4.2vw, 4rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.045em;
  color: var(--color-dark);
  text-wrap: balance;
  margin-bottom: 1.35rem;
  text-shadow: none;
}

.hero-title-line {
  display: block;
  white-space: nowrap;
}

.hero-subtitle {
  max-width: 43ch;
  margin-bottom: 2rem;
  font-family: var(--font-sans);
  font-size: clamp(1.08rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0;
  color: #4A303A;
  text-shadow: none;
}

/* Primary Button with high contrast */
/* General Button (Height matches the navigation menu capsule items) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  min-width: 250px;
  height: 54px;
  padding: 0 2.25rem;
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 600;
  border-radius: 27px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease;
  border: none;
}

.btn:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 12px 24px rgba(44, 37, 48, 0.16), 0 4px 8px rgba(44, 37, 48, 0.08);
}

.btn-primary {
  background-color: var(--color-dark);
  color: var(--color-white);
  box-shadow: 0 4px 15px rgba(44, 37, 48, 0.1);
}

.btn-primary:hover {
  background-color: var(--color-dark); /* Kept black, no lightening */
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

/* Secondary Button (Soft Border style, no black border) */
.btn-secondary {
  background-color: var(--color-white);
  border: 1px solid rgba(44, 37, 48, 0.18); /* Soft faint border instead of black */
  color: var(--color-dark);
  margin-left: 1rem;
  box-shadow: 0 4px 15px rgba(44, 37, 48, 0.1);
}

.btn-secondary:hover {
  background-color: var(--color-white);
  border-color: rgba(44, 37, 48, 0.18);
  color: var(--color-dark);
}

.btn-secondary:active {
  transform: translateY(0) scale(0.98);
}

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

.hero-actions .btn {
  transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); /* Premium spring curve */
}

.hero-actions .btn:hover {
  transform: translateY(-4px) scale(1.03); /* Elevation lift + scale-up */
  box-shadow: 0 12px 24px rgba(44, 37, 48, 0.16), 0 4px 8px rgba(44, 37, 48, 0.08); /* Beautiful dual-layer shadow */
}

.hero-actions .btn:active {
  transform: translateY(-1px) scale(0.98); /* Instant tactile click feedback */
  box-shadow: 0 4px 12px rgba(44, 37, 48, 0.12);
  transition: all 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Emotional Section */
.emotional {
  position: relative;
  overflow: hidden;
  padding: clamp(6.5rem, 10vw, 9rem) 0;
  background: var(--color-white);
}

.emotional-grid {
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(360px, 520px);
  gap: 2rem;
  align-items: center;
  justify-content: center;
}

.emotional-content {
  position: relative;
  z-index: 2;
  max-width: 650px;
}

.emotional-title {
  max-width: 13ch;
  margin-bottom: 2rem;
  font-family: var(--font-sans);
  font-size: clamp(3rem, 4.2vw, 4rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.045em;
  color: var(--color-dark);
  text-wrap: balance;
}

.emotional-text {
  display: grid;
  gap: 1.15rem;
  max-width: 56ch;
}

.emotional-text p {
  font-size: clamp(1.08rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  font-weight: 400;
  color: #4A303A;
}

.emotional-actions {
  margin-top: 2.5rem;
}

.emotional-actions .btn {
  min-width: 250px;
}

.emotional-media {
  position: relative;
  width: 100%;
  max-width: 520px;
  justify-self: end;
}

.emotional-media::before {
  content: '';
  position: absolute;
  inset: 2rem -2rem -2rem 2rem;
  border-radius: 42px;
  background: var(--color-accent-light);
}

.emotional-photo-frame {
  position: relative;
  z-index: 1;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 38px;
  background: var(--color-photo-placeholder);
  box-shadow: 0 28px 70px -32px rgba(44, 37, 48, 0.32);
}

.emotional-photo-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: inherit;
  pointer-events: none;
}

.emotional-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 48%;
}

/* Puppies Gallery */
.puppies-gallery {
  padding: clamp(7rem, 11vw, 10rem) 0;
  background: #FBF4F5;
}

.gallery-heading {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.gallery-title {
  margin-bottom: 1.25rem;
  font-family: var(--font-sans);
  font-size: clamp(3rem, 4.2vw, 4rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.045em;
  color: var(--color-dark);
  text-wrap: balance;
  white-space: nowrap;
}

.gallery-intro {
  max-width: 640px;
  margin: 0 auto;
  font-size: clamp(1.08rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  color: #4A303A;
  text-wrap: balance;
}

.gallery-filters {
  display: flex;
  justify-content: center;
  gap: 0.65rem;
  margin: 2.75rem 0 3.25rem;
}

.gallery-filter {
  min-height: 46px;
  padding: 0.65rem 1.35rem;
  border: 1px solid rgba(44, 37, 48, 0.12);
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.72);
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--color-dark);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.gallery-filter:hover {
  transform: translateY(-2px);
  border-color: rgba(44, 37, 48, 0.24);
}

.gallery-filter.is-active {
  border-color: var(--color-dark);
  background: var(--color-dark);
  color: var(--color-white);
}

.gallery-filter:focus-visible,
.puppy-card-contact:focus-visible {
  outline: 3px solid rgba(178, 83, 91, 0.34);
  outline-offset: 3px;
}

.puppies-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.puppy-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  aspect-ratio: 4 / 3;
  border-radius: 28px;
  background: var(--color-photo-placeholder);
  box-shadow: 0 22px 48px -34px rgba(44, 37, 48, 0.48);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}

.puppy-card.is-hidden {
  display: none;
}

.puppy-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(44, 37, 48, 0.78) 0%, rgba(44, 37, 48, 0.08) 48%, transparent 70%);
  pointer-events: none;
}

.puppy-card:not(:has(.puppy-card-photo))::after {
  display: none;
}

.puppy-card:not(:has(.puppy-card-photo)) .puppy-card-overlay {
  color: var(--color-dark);
}

.puppy-card:not(:has(.puppy-card-photo)) .puppy-card-kicker {
  color: rgba(44, 37, 48, 0.58);
}

.puppy-card:not(:has(.puppy-card-photo)) .puppy-card-contact {
  border-color: rgba(44, 37, 48, 0.16);
}

.puppy-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 58px -34px rgba(44, 37, 48, 0.56);
}

.puppy-card-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.puppy-card:hover .puppy-card-photo {
  transform: scale(1.035);
}

.puppy-card-overlay {
  position: absolute;
  z-index: 2;
  right: 1.25rem;
  bottom: 1.2rem;
  left: 1.35rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  color: var(--color-white);
}

.puppy-card-kicker {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
}

.puppy-card-title {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.puppy-card-contact {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-dark);
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.puppy-card-contact svg {
  width: 22px;
  height: 22px;
}

.puppy-card-contact:hover {
  transform: scale(1.08);
  background: var(--color-white);
}

/* Puppy Matching Section */
.puppy-match {
  padding: clamp(7rem, 11vw, 10rem) 0;
  background: var(--color-white);
}

.puppy-match-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 5rem);
  border: 1px solid rgba(107, 35, 41, 0.08);
  border-radius: 42px;
  background: #FCEEF1;
}

.puppy-match-content {
  position: relative;
  z-index: 1;
  max-width: 650px;
}

.puppy-match-title {
  max-width: none;
  margin-bottom: 1.75rem;
  font-family: var(--font-sans);
  font-size: clamp(3rem, 4.2vw, 4rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.045em;
  color: var(--color-dark);
  text-wrap: pretty;
}

.puppy-match-text {
  max-width: 56ch;
  font-size: clamp(1.08rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  font-weight: 400;
  color: #4A303A;
}

.puppy-match-actions {
  margin-top: 2.25rem;
}

.puppy-match-actions .btn {
  min-width: 250px;
}

.puppy-match-media {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: visible;
  aspect-ratio: 4 / 3;
  border-radius: 38px;
  background: var(--color-photo-placeholder);
  box-shadow: 0 26px 58px -32px rgba(44, 37, 48, 0.38);
}

.puppy-match-media::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: inherit;
  pointer-events: none;
}

.puppy-match-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

/* Home Breeding Section */
.home-breeding {
  padding: clamp(7rem, 11vw, 10rem) 0;
  background: #FBF4F5;
}

.home-breeding-layout {
  display: grid;
  grid-template-columns: minmax(400px, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(3.5rem, 7vw, 6.5rem);
  align-items: center;
}

.home-breeding-visual {
  position: relative;
  isolation: isolate;
  overflow: visible;
  width: min(100%, 520px);
  aspect-ratio: 4 / 5;
  min-height: 0;
  margin: 0;
  border-radius: 38px;
  background: var(--color-photo-placeholder);
  box-shadow: 0 30px 70px -42px rgba(44, 37, 48, 0.46);
}

.home-breeding-photo {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.home-breeding-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: inherit;
  pointer-events: none;
}

.home-breeding-content {
  max-width: 560px;
}

.home-breeding-label {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.88rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.home-breeding-title {
  max-width: 14ch;
  margin-bottom: 1.75rem;
  font-family: var(--font-sans);
  font-size: clamp(3rem, 4.2vw, 4rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.045em;
  color: var(--color-dark);
  text-wrap: balance;
}

.home-breeding-text {
  max-width: 52ch;
  font-size: clamp(1.08rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  font-weight: 400;
  color: #4A303A;
}

.home-breeding-actions {
  margin-top: 2.5rem;
}

.home-breeding-actions .btn {
  min-width: 250px;
}

/* Animations */
@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Accessibility: Support prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero-content {
    animation: none !important;
  }
  .btn-primary, .btn-secondary, .nav-links a {
    transition: none !important;
    transform: none !important;
  }
  .btn-primary:hover, .btn-secondary:hover {
    transform: none !important;
  }
}

/* About Us Section */
.about {
  background: var(--color-white); /* Pure white background */
  padding: 8.5rem 0; /* Premium spacious vertical padding */
  position: relative;
  overflow: hidden;
}

.about-grid {
  display: grid;
  grid-template-columns: 380px 1fr; /* Exact photo width + flexible text area */
  gap: 4.5rem; /* Elegant visual gap */
  align-items: center; /* Vertically centered */
}

.about-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 380px; /* Lock maximum width to fit laptop heights perfectly */
  margin: 0; /* Aligned exactly with the grid's left edge */
}

.about-image-outer {
  width: 100%;
  aspect-ratio: 2 / 3; /* Perfectly matches the 667x1000 image ratio (no cropping!) */
  line-height: 0;
  border-radius: 24px; /* Soft rounding matching the buttons style */
  box-shadow: 0 15px 35px -10px rgba(44, 37, 48, 0.08); /* Soft shadow directly on the image */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.about-image-wrapper:hover .about-image-outer {
  transform: translateY(-8px); /* Elevates straight up without tilting */
  box-shadow: 0 25px 50px -15px rgba(44, 37, 48, 0.15);
}

.about-image-inner {
  width: 100%;
  height: 100%;
  border-radius: 24px; /* Matches outer wrapper rounding */
  overflow: hidden;
  line-height: 0;
}

.about-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* No cropping because container aspect ratio matches the image */
  object-position: center;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-image-wrapper:hover .about-img {
  transform: scale(1.04); /* Soft premium zoom */
}

/* Handwritten signature */
.about-image-signature {
  position: absolute;
  bottom: -30px; /* Shifted fully outside the capsule bottom */
  right: -25px; /* Shifted into the whitespace gap between columns */
  font-family: 'Marck Script', cursive;
  font-size: 1.8rem;
  color: var(--color-accent);
  transform: rotate(-4deg);
  text-shadow: 2px 2px 0 var(--color-white), -2px -2px 0 var(--color-white), 2px -2px 0 var(--color-white), -2px 2px 0 var(--color-white);
  z-index: 5;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.about-image-wrapper:hover .about-image-signature {
  transform: translateY(-4px) rotate(0deg) scale(1.05);
}

/* Heart particles */
.heart-particle {
  position: absolute;
  color: var(--color-accent);
  font-size: 1.6rem;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  filter: drop-shadow(0 2px 4px rgba(178, 83, 91, 0.2));
}

.heart-1 { left: 15%; bottom: 15%; }
.heart-2 { left: 75%; bottom: 20%; }
.heart-3 { left: 35%; bottom: 10%; }
.heart-4 { left: 60%; bottom: 25%; }

/* Play animations on wrapper hover - hearts float way up outside the image border */
.about-image-wrapper:hover .heart-1 {
  animation: floatHeart1 2s infinite ease-out;
}
.about-image-wrapper:hover .heart-2 {
  animation: floatHeart2 2.2s infinite ease-out 0.3s;
}
.about-image-wrapper:hover .heart-3 {
  animation: floatHeart3 1.8s infinite ease-out 0.6s;
}
.about-image-wrapper:hover .heart-4 {
  animation: floatHeart4 2.4s infinite ease-out 0.9s;
}

@keyframes floatHeart1 {
  0% {
    transform: translateY(0) scale(0.4) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-480px) translateX(-40px) scale(1.3) rotate(-25deg);
    opacity: 0;
  }
}

@keyframes floatHeart2 {
  0% {
    transform: translateY(0) scale(0.4) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-520px) translateX(50px) scale(1.1) rotate(25deg);
    opacity: 0;
  }
}

@keyframes floatHeart3 {
  0% {
    transform: translateY(0) scale(0.4) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-440px) translateX(-20px) scale(0.95) rotate(-15deg);
    opacity: 0;
  }
}

@keyframes floatHeart4 {
  0% {
    transform: translateY(0) scale(0.4) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-560px) translateX(35px) scale(1.4) rotate(20deg);
    opacity: 0;
  }
}

/* Elegant Section Badge */
.about-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1.1rem;
  background-color: rgba(222, 137, 168, 0.08); /* 8% opacity of accent pink */
  border: 1px solid rgba(222, 137, 168, 0.18);
  border-radius: 30px;
  margin-bottom: 1.5rem;
}

.about-badge-label {
  font-size: 0.95rem; /* Updated to unified size */
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1.2;
}

.about-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 760px; /* Expanded from 680px to close the gap */
  justify-self: end; /* Snaps the content to the right edge of the capsule container */
}

.about-title {
  font-family: var(--font-sans);
  font-size: 2.8rem; /* Updated to 2.8rem */
  line-height: 1.25;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}

.about-text {
  font-family: var(--font-sans);
  font-size: 1.35rem;
  line-height: 1.7;
  color: rgba(44, 37, 48, 0.8);
}

.about-text p {
  font-family: var(--font-sans);
  font-size: 1.35rem;
  line-height: 1.7;
  font-weight: 400;
  color: rgba(44, 37, 48, 0.8);
  margin-bottom: 1.5rem;
}

.about-text p:last-child {
  margin-bottom: 0;
}

.about-actions {
  margin-top: 2.25rem;
}



/* Responsive adjustments */
@media (max-width: 1024px) {
  .header-container {
    position: relative;
  }
  .header-right {
    display: none;
  }
  .menu-toggle {
    display: flex;
    flex: 0 0 auto;
  }
  .header-nav {
    display: none;
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    left: 0;
    padding: 0.65rem;
    border: 1px solid rgba(44, 37, 48, 0.12);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 32px -12px rgba(44, 37, 48, 0.22);
  }
  .header.menu-open .header-nav {
    display: block;
  }
  .header.menu-open .menu-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .header.menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
  }
  .header.menu-open .menu-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
  }
  .nav-links li,
  .nav-links li a {
    width: 100%;
  }
  .nav-links li a {
    justify-content: center;
    text-align: center;
    min-height: 48px;
    padding: 0 1rem;
  }
  .mobile-menu-home,
  .mobile-menu-contact {
    display: block;
  }

  .mobile-menu-contact {
    margin-top: 0.35rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(44, 37, 48, 0.1);
  }
  .mobile-menu-contact a {
    background: var(--color-dark);
    color: var(--color-white);
  }

  .mobile-menu-connect {
    display: block;
    margin: 0.55rem 0.15rem 0.1rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(44, 37, 48, 0.1);
  }

  .mobile-menu-phone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 72px;
    padding: 0.65rem 3.5rem;
    border-radius: 18px;
    background: rgba(44, 37, 48, 0.045);
    color: var(--color-dark);
    text-decoration: none;
  }

  .mobile-menu-phone-icon {
    position: absolute;
    left: 0.8rem;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(44, 37, 48, 0.07);
  }

  .mobile-menu-phone-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-menu-phone-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    align-items: center;
    width: 100%;
    line-height: 1.2;
    text-align: center;
  }

  .mobile-menu-phone-copy small {
    margin-bottom: 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(44, 37, 48, 0.52);
  }

  .mobile-menu-phone-copy strong {
    font-size: clamp(1rem, 4.4vw, 1.15rem);
    font-weight: 650;
    white-space: nowrap;
    color: var(--color-dark);
  }

  .mobile-menu-social-label {
    display: block;
    margin: 0.9rem 0 0.55rem;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(44, 37, 48, 0.52);
  }

  .mobile-menu-socials {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .mobile-menu-social {
    display: grid;
    place-items: center;
    min-width: 0;
    height: 64px;
    border: 0;
    background: transparent;
    transition: transform 0.2s ease;
  }

  .mobile-menu-social:active {
    transform: scale(0.96);
  }

  .mobile-menu-social:focus-visible,
  .mobile-menu-phone:focus-visible {
    outline: 3px solid rgba(178, 83, 91, 0.32);
    outline-offset: 2px;
  }

  .mobile-menu-social img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
  }

  .hero-content {
    margin-left: 0;
  }
  .container {
    width: calc(100% - 6rem);
    padding: 0;
  }
  .puppies-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-breeding-layout {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
  .home-breeding-content {
    order: 1;
    max-width: 720px;
  }
  .home-breeding-visual {
    order: 2;
    min-height: 0;
  }
}

@media (max-width: 768px) {
  .container {
    width: calc(100% - 3rem); /* Aligns with mobile header capsule margin */
    padding: 0;
  }
  .header {
    top: 1rem; /* Floating on mobile screen */
    height: auto;
  }
  .header-container {
    height: 60px; /* Slim capsule height for mobile */
    padding: 0 1.25rem;
    width: calc(100% - 3rem); /* Matches mobile container padding */
    border-radius: 30px; /* Fully rounded capsule ends */
  }
  .logo-img {
    height: 38px; /* Fits mobile capsule height perfectly */
    width: auto; /* Keep aspect ratio intact */
  }
  .hero {
    align-items: center;
    padding: 6rem 1rem 2rem 1rem;
    background: url('фотки/hero.webp?v=3') 65% center/cover no-repeat;
  }
  .hero-content {
    padding: 1rem 0;
    max-width: 100%;
    margin-left: 0;
    text-align: center;
  }
  .hero-title {
    font-size: clamp(2.35rem, 11vw, 3rem);
    line-height: 1.04;
    letter-spacing: -0.045em;
    margin-bottom: 1.1rem;
  }
  .hero-subtitle {
    font-size: 1.05rem;
    line-height: 1.65;
    font-weight: 400;
    max-width: 34ch;
  }
  .hero-actions {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }
  .btn {
    width: 100%;
  }
  .btn-secondary {
    margin-left: 0;
  }

  .emotional {
    padding: 5.5rem 0 6rem;
  }
  .emotional-grid {
    grid-template-columns: 1fr;
    gap: 3.25rem;
  }
  .emotional-content {
    max-width: 100%;
  }
  .emotional-title {
    max-width: 15ch;
    margin-bottom: 1.5rem;
    font-size: clamp(2.35rem, 11vw, 3rem);
    line-height: 1.04;
  }
  .emotional-text {
    gap: 1rem;
    max-width: 100%;
  }
  .emotional-text p {
    font-size: 1.05rem;
    line-height: 1.65;
  }
  .emotional-actions {
    margin-top: 2rem;
  }
  .emotional-actions .btn {
    min-width: 0;
  }
  .emotional-media {
    max-width: 100%;
    justify-self: stretch;
  }
  .emotional-media::before {
    inset: 1.25rem -0.75rem -1.25rem 1.25rem;
    border-radius: 32px;
  }
  .emotional-photo-frame {
    max-height: 620px;
    border-radius: 28px;
  }
  .puppies-gallery {
    padding: 6rem 0 6.5rem;
  }
  .gallery-heading {
    text-align: left;
  }
  .gallery-title {
    margin-bottom: 1rem;
    font-size: clamp(2.35rem, 11vw, 3rem);
    line-height: 1.04;
    white-space: normal;
  }
  .gallery-intro {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.65;
  }
  .gallery-filters {
    justify-content: flex-start;
    gap: 0.55rem;
    margin: 2.25rem calc(-1 * ((100vw - 100%) / 2)) 2.5rem;
    padding: 0 calc((100vw - 100%) / 2) 0.35rem;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .gallery-filters::-webkit-scrollbar {
    display: none;
  }
  .gallery-filter {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .puppies-grid {
    display: flex;
    gap: 1rem;
    margin-right: calc(-1 * ((100vw - 100%) / 2));
    padding-right: calc((100vw - 100%) / 2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .puppies-grid::-webkit-scrollbar {
    display: none;
  }
  .puppy-card {
    flex: 0 0 calc(100% - 2.75rem);
    scroll-snap-align: start;
    border-radius: 24px;
  }
  .puppy-card-overlay {
    right: 1.1rem;
    bottom: 1.05rem;
    left: 1.15rem;
  }
  .puppy-match {
    padding: 6rem 0 6.5rem;
  }
  .puppy-match-panel {
    grid-template-columns: 1fr;
    gap: 2.75rem;
    padding: 1.5rem;
    border-radius: 30px;
  }
  .puppy-match-title {
    max-width: 15ch;
    margin-bottom: 1.4rem;
    font-size: clamp(2.35rem, 11vw, 3rem);
    line-height: 1.04;
  }
  .puppy-match-text {
    max-width: 100%;
    font-size: 1.05rem;
    line-height: 1.65;
  }
  .puppy-match-actions {
    margin-top: 2rem;
  }
  .puppy-match-actions .btn {
    min-width: 0;
  }
  .puppy-match-media {
    border-radius: 28px;
  }
  .home-breeding {
    padding: 6rem 0 6.5rem;
  }
  .home-breeding-label {
    margin-bottom: 0.85rem;
    font-size: 0.8rem;
  }
  .home-breeding-title {
    max-width: 14ch;
    font-size: clamp(2.35rem, 11vw, 3rem);
    line-height: 1.04;
  }
  .home-breeding-layout {
    gap: 2.75rem;
  }
  .home-breeding-text {
    font-size: 1.05rem;
    line-height: 1.65;
  }
  .home-breeding-actions {
    margin-top: 2rem;
  }
  .home-breeding-actions .btn {
    min-width: 0;
  }
  .home-breeding-visual {
    min-height: 0;
    border-radius: 28px;
  }
  
  /* Mobile About Us styling */
  .about {
    padding: 5rem 0;
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
  .about-image-wrapper {
    max-width: 380px;
    margin: 0 auto;
    height: auto; /* Reset desktop 65vh height */
  }
  .about-image-outer {
    transform: none !important;
    box-shadow: 0 10px 25px -8px rgba(44, 37, 48, 0.08);
    max-width: 100%;
    margin: 0;
    border-radius: 24px; /* Mobile-adapted soft rounding */
    height: auto; /* Reset desktop height */
  }
  .about-image-wrapper:hover .about-image-outer {
    transform: none !important;
    box-shadow: 0 10px 25px -8px rgba(44, 37, 48, 0.08);
  }
  .about-image-inner {
    border-radius: 24px; /* Matches outer mobile rounding */
    height: auto; /* Reset desktop height */
  }
  .about-image-wrapper:hover .about-img {
    transform: none !important; /* Disable zoom on touch devices */
  }
  .about-image-signature {
    bottom: -32px; /* Positioned cleanly on white background under mobile image */
    right: 5px;
    font-size: 1.45rem;
  }
  .about-image-wrapper:hover .about-image-signature {
    transform: none !important;
  }
  .heart-particle {
    display: none !important; /* Disable resource-heavy animations on touch devices */
  }
  .about-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .about-content {
    max-width: 100%;
  }
  .about-title {
    font-size: 2.1rem; /* Updated to 2.1rem */
    margin-bottom: 1.25rem;
  }
  .about-text {
    font-size: 1.2rem;
    line-height: 1.65;
  }
  .about-text p {
    font-size: 1.2rem;
    line-height: 1.65;
  }
}


/* ==========================================================================
   Trust Section Styling (С первых дней — рядом с человеком)
   ========================================================================== */
.trust {
  background: var(--color-white);
  padding: 8.5rem 0;
  position: relative;
  overflow: hidden;
}

.trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: center;
}

.trust-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 580px;
}

.trust-title {
  font-family: var(--font-sans);
  font-size: 2.8rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}

.trust-text p {
  font-family: var(--font-sans);
  font-size: 1.35rem;
  line-height: 1.7;
  font-weight: 400;
  color: rgba(44, 37, 48, 0.8);
  margin-bottom: 1.5rem;
}

.trust-text p:last-child {
  margin-bottom: 0;
}

.trust-actions {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

#btn-trust-learn-more {
  height: 58px;
  padding: 0 2.5rem;
  border-radius: 29px;
  font-size: 0.95rem;
  transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); /* Premium spring curve */
}

#btn-trust-learn-more:hover {
  transform: translateY(-4px) scale(1.02); /* Elevation lift + scale-up */
  box-shadow: 0 12px 24px rgba(44, 37, 48, 0.16), 0 4px 8px rgba(44, 37, 48, 0.08); /* Beautiful dual-layer shadow */
}

#btn-trust-learn-more:active {
  transform: translateY(-1px) scale(0.98); /* Instant tactile click feedback */
  box-shadow: 0 4px 12px rgba(44, 37, 48, 0.12);
  transition: all 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.trust-cta-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.trust-handwritten-note {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%) rotate(-4deg);
  margin-left: 2.75rem;
  width: 250px;
  font-family: 'Marck Script', cursive;
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--color-accent);
  line-height: 1.25;
  pointer-events: none;
  display: block;
}

.trust-sketchy-arrow {
  position: absolute;
  left: -42px;
  top: 8px;
  width: 38px;
  height: 28px;
  transform: rotate(5deg);
}

@media (max-width: 1024px) {
  .trust-cta-wrapper {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  
  .trust-handwritten-note {
    position: relative;
    left: auto;
    top: auto;
    transform: rotate(-2deg);
    margin-left: 3.25rem;
    margin-top: 1rem;
    width: auto;
    max-width: 320px;
  }
  
  .trust-sketchy-arrow {
    left: -40px;
    top: -18px;
    width: 36px;
    height: 24px;
    transform: rotate(-15deg);
  }
}

/* Bento Cards Grid */
.trust-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.trust-card {
  padding: 2rem 1.75rem;
  border-radius: var(--radius-soft);
  box-shadow: 0 10px 25px -5px rgba(44, 37, 48, 0.04);
  border: 1px solid rgba(44, 37, 48, 0.08);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}

/* Color variations to prevent white-on-white monotony */
.trust-card.card-pink {
  background-color: #FDF4F6;
  border-color: rgba(236, 171, 175, 0.25);
}

.trust-card.card-white {
  background-color: var(--color-white);
}

.trust-card.card-rose {
  background-color: #F9EBEE;
  border-color: rgba(178, 83, 91, 0.2);
}

/* Hover effects */
.trust-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-premium);
}

/* Icon style */
.trust-card-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: rgba(44, 37, 48, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--color-accent);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.trust-card.card-pink .trust-card-icon-wrapper {
  background-color: rgba(236, 171, 175, 0.15);
}

.trust-card.card-rose .trust-card-icon-wrapper {
  background-color: rgba(178, 83, 91, 0.1);
}

.trust-card-icon {
  width: 24px;
  height: 24px;
}

.trust-card:hover .trust-card-icon-wrapper {
  transform: scale(1.1);
}

.trust-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.trust-card-description {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(44, 37, 48, 0.75);
}

/* Responsive adjustments for Trust Section */
@media (max-width: 1024px) {
  .trust {
    padding: 6.5rem 0;
  }
  .trust-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
  .trust-content {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .trust {
    padding: 5rem 0;
  }
  .trust-grid {
    gap: 3rem;
  }
  .trust-title {
    font-size: 2.1rem;
    margin-bottom: 1.25rem;
  }
  .trust-text p {
    font-size: 1.2rem;
    line-height: 1.65;
  }
  .trust-cards-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .trust-card {
    padding: 1.75rem 1.5rem;
  }
  .trust-card:hover {
    transform: none; /* Disable transform on mobile touch */
  }
}

/* ==========================================================================
   Puppies Showcase Section & Carousel Styling (Centered REDESIGN)
   ========================================================================== */

.puppies-showcase {
  background: var(--color-pink-light);
  padding: 8.5rem 0;
  overflow: hidden;
  position: relative;
}

.showcase-header {
  margin-bottom: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Horizontal Carousel Wrapper - aligned exactly to other blocks' width */
.showcase-carousel-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto 4.5rem auto;
  box-sizing: border-box;
  border-radius: var(--radius-soft);
  overflow: hidden;
  box-shadow: var(--shadow-premium);
}

.showcase-carousel {
  display: flex;
  height: 480px; /* Equal height for all photos */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  gap: 0; /* Flush against each other (no gaps) */
  scrollbar-width: none; /* Firefox */
  padding: 0;
}

.showcase-carousel::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.showcase-slide {
  height: 100%;
  flex: 0 0 auto; /* Dynamic width based on aspect-ratio */
  scroll-snap-align: start;
  overflow: hidden;
  position: relative;
}

.showcase-slide.horizontal {
  aspect-ratio: 3 / 2; /* 3:2 landscape photos */
}

.showcase-slide.vertical {
  aspect-ratio: 2 / 3; /* 2:3 portrait photos */
}

.showcase-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Since aspect-ratio matches the image exactly, cover is uncropped */
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.showcase-slide:hover .showcase-img {
  transform: scale(1.05); /* Soft, luxurious zoom on hover */
}

/* Navigation buttons floating inside/on edges of the wrapper */
.showcase-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(44, 37, 48, 0.12);
  color: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.showcase-nav-btn.prev {
  left: 1.5rem;
}

.showcase-nav-btn.next {
  right: 1.5rem;
}

.showcase-nav-btn:hover {
  background: var(--color-dark);
  color: var(--color-white);
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 8px 24px rgba(44, 37, 48, 0.18);
}

.showcase-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.showcase-nav-btn svg {
  width: 24px;
  height: 24px;
}

/* Content centered style */
.showcase-content-centered {
  max-width: 100%;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.showcase-highlight-text {
  font-weight: 600;
  color: var(--color-accent) !important;
  font-size: 1.45rem !important;
  line-height: 1.6 !important;
}

/* Action button trigger */
.btn-showcase-trigger {
  height: 58px;
  padding: 0 2.5rem;
  font-size: 0.95rem; /* Updated to user specified size */
  border-radius: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-dark);
  color: var(--color-white);
  cursor: pointer;
  border: none;
  transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 24px rgba(44, 37, 48, 0.12);
}

.btn-showcase-trigger:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 28px rgba(44, 37, 48, 0.18);
}

.btn-showcase-trigger:active {
  transform: translateY(-1px) scale(0.98);
}

/* ==========================================================================
   Modal Pop-up window for Messengers
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(44, 37, 48, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  background: var(--color-white);
  width: 90%;
  max-width: 480px;
  padding: 2.75rem 2.25rem;
  border-radius: var(--radius-soft);
  box-shadow: 0 25px 60px -15px rgba(44, 37, 48, 0.25);
  position: relative;
  transform: translateY(30px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.modal-overlay.open .modal-card {
  transform: translateY(0) scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(44, 37, 48, 0.05);
  color: var(--color-dark);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-close-btn:hover {
  background: var(--color-dark);
  color: var(--color-white);
  transform: rotate(90deg);
}

.modal-close-btn svg {
  width: 20px;
  height: 20px;
}

.modal-title {
  font-family: var(--font-sans);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-dark);
  text-align: center;
  margin-bottom: 0.75rem;
}

.modal-subtitle {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(44, 37, 48, 0.7);
  text-align: center;
  margin-bottom: 2.25rem;
}

.modal-messengers-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
}

.modal-messenger-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.1rem;
  padding: 0 1.75rem;
  height: 58px;
  border-radius: 16px;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.modal-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  transition: filter 0.3s ease;
}

/* Brand Button States */
.modal-messenger-item.btn-tg {
  background-color: rgba(30, 150, 200, 0.08);
  border: 1px solid rgba(30, 150, 200, 0.15);
  color: #1c85b3;
}
.modal-messenger-item.btn-tg:hover {
  background-color: rgba(30, 150, 200, 0.16);
  border-color: rgba(30, 150, 200, 0.35);
  color: #126388;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(30, 150, 200, 0.12);
}

.modal-messenger-item.btn-max {
  background-color: rgba(147, 53, 222, 0.08);
  border: 1px solid rgba(147, 53, 222, 0.15);
  color: #7a2ab8;
}
.modal-messenger-item.btn-max:hover {
  background-color: rgba(147, 53, 222, 0.16);
  border-color: rgba(147, 53, 222, 0.35);
  color: #5d1c92;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(147, 53, 222, 0.12);
}

.modal-messenger-item.btn-wa {
  background-color: rgba(37, 211, 102, 0.08);
  border: 1px solid rgba(37, 211, 102, 0.15);
  color: #1fa64f;
}
.modal-messenger-item.btn-wa:hover {
  background-color: rgba(37, 211, 102, 0.16);
  border-color: rgba(37, 211, 102, 0.35);
  color: #167a39;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.12);
}

.modal-messenger-item.btn-vk {
  background-color: rgba(0, 119, 255, 0.08);
  border: 1px solid rgba(0, 119, 255, 0.15);
  color: #0066dd;
}
.modal-messenger-item.btn-vk:hover {
  background-color: rgba(0, 119, 255, 0.16);
  border-color: rgba(0, 119, 255, 0.35);
  color: #0055bb;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 119, 255, 0.12);
}

.modal-messenger-item .modal-icon {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-messenger-item:hover .modal-icon {
  transform: scale(1.08);
}

.modal-hint {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: rgba(44, 37, 48, 0.5);
  text-align: center;
  margin-top: 1.75rem;
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */

/* FAQ */
.faq {
  padding: clamp(7rem, 11vw, 10rem) 0;
  background: #fff;
}

/* ==========================================================================
   Consolidated responsive refinement
   Keeps the desktop composition intact while giving tablets and phones one
   consistent spacing, typography and media system.
   ========================================================================== */

@media (max-width: 1024px) {
  .container,
  .header-container {
    width: calc(100% - 3rem);
  }

  .header {
    top: 1rem;
  }

  .header-container {
    height: 64px;
    padding: 0 1rem 0 1.15rem;
    border-radius: 32px;
  }

  .header-left,
  .logo-link,
  .hero-content,
  .emotional-content,
  .puppy-match-content,
  .home-breeding-content,
  .faq-intro,
  .meet-puppy-content {
    min-width: 0;
  }

  .logo-img {
    height: 42px;
  }

  .logo-text {
    overflow: hidden;
    font-size: 1.08rem;
    text-overflow: ellipsis;
  }

  .menu-toggle {
    display: flex;
    flex: 0 0 44px;
    background: rgba(255, 255, 255, 0.88);
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .menu-toggle:active {
    transform: scale(0.96);
  }

  .menu-toggle:focus-visible {
    outline: 3px solid rgba(178, 83, 91, 0.32);
    outline-offset: 3px;
  }

  .header-nav {
    display: block;
    top: calc(100% + 0.55rem);
    max-height: calc(100dvh - 7rem);
    padding: 0.55rem;
    overflow-y: auto;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 22px 50px -24px rgba(44, 37, 48, 0.38);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.985);
    transform-origin: top center;
    pointer-events: none;
    /* Do not animate while crossing the responsive breakpoint. */
    transition: none;
  }

  .header.menu-open .header-nav {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }

  .nav-links {
    gap: 0.15rem;
  }

  .nav-links li a {
    min-height: 50px;
    padding: 0 1rem;
    border-radius: 18px;
    font-size: 1rem;
  }

  .mobile-menu-contact {
    margin-top: 0.45rem;
    padding-top: 0.55rem;
  }

  .mobile-menu-contact a {
    justify-content: center !important;
    border-radius: 18px !important;
  }

  .puppies-grid {
    display: flex;
    gap: 1rem;
    margin-right: calc(-1 * ((100vw - 100%) / 2));
    padding-right: calc((100vw - 100%) / 2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .puppies-grid::-webkit-scrollbar {
    display: none;
  }

  .puppy-card {
    flex: 0 0 min(72vw, 34rem);
    scroll-snap-align: start;
  }

  .emotional,
  .puppies-gallery,
  .puppy-match,
  .home-breeding,
  .faq,
  .meet-puppy {
    padding-top: clamp(5.5rem, 9vw, 6.5rem);
    padding-bottom: clamp(5.5rem, 9vw, 6.5rem);
  }

  .hero-title,
  .emotional-title,
  .gallery-title,
  .puppy-match-title,
  .home-breeding-title,
  .faq-title,
  .meet-puppy-title {
    font-size: clamp(2.6rem, 5.2vw, 3.5rem);
    line-height: 1.04;
  }

  .emotional-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
    gap: clamp(2.25rem, 4.5vw, 3.5rem);
    justify-content: stretch;
  }

  .emotional-title,
  .home-breeding-title,
  .meet-puppy-title {
    max-width: 16ch;
  }

  .emotional-media {
    justify-self: end;
  }

  .puppy-match-panel {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr);
    gap: clamp(2.25rem, 4vw, 3.25rem);
    padding: clamp(2rem, 4vw, 3rem);
    border-radius: 34px;
  }

  .home-breeding-layout,
  .faq-layout,
  .meet-puppy-panel {
    gap: clamp(3rem, 6vw, 4.5rem);
  }

  .home-breeding-visual,
  .meet-puppy-media {
    width: min(100%, 480px);
  }

  .faq-intro {
    max-width: 720px;
  }

  .footer-main {
    gap: 3rem;
  }
}

@media (max-width: 960px) {
  .emotional-grid,
  .puppy-match-panel {
    grid-template-columns: 1fr;
  }

  .emotional-content,
  .puppy-match-content {
    max-width: 720px;
  }

  .emotional-media {
    width: min(100%, 480px);
    justify-self: start;
  }

  .puppy-match-media {
    width: min(100%, 640px);
  }
}

@media (max-width: 900px) {
  .home-breeding-content,
  .meet-puppy-content {
    order: 1;
    max-width: 720px;
  }

  .home-breeding-visual,
  .meet-puppy-media {
    order: 2;
    justify-self: start;
  }

  .faq-layout {
    gap: 3rem;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: max(100dvh, 760px);
    justify-content: flex-start;
    align-items: stretch;
    padding: calc(5.4rem + env(safe-area-inset-top)) 0 0;
    overflow: hidden;
    background: #ECABAF;
  }

  .hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 47%;
    background:
      linear-gradient(to bottom, #ECABAF 0%, rgba(236, 171, 175, 0.82) 14%, rgba(236, 171, 175, 0) 42%),
      url('фотки/hero.webp?v=3') 72% center / cover no-repeat;
    pointer-events: none;
  }

  .hero-content {
    max-width: 36rem;
    padding: 1.2rem 0 0;
    text-align: left;
  }

  .hero-title {
    max-width: 11ch;
    margin-bottom: 1rem;
    font-size: clamp(2.6rem, 6.25vw, 3rem);
    line-height: 1.07;
  }

  .hero-subtitle {
    max-width: 34ch;
    margin-bottom: 1.4rem;
    font-size: 1.05rem;
    line-height: 1.58;
  }

  .hero-subtitle br {
    display: none;
  }

  .hero .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    width: 100%;
    max-width: 32rem;
  }

  .hero .hero-actions .btn {
    min-width: 0;
    height: 52px;
    padding: 0 0.75rem;
    font-size: 0.94rem;
    white-space: nowrap;
  }
}

@media (max-width: 700px) {
  html.menu-active,
  html.menu-active body {
    overflow: hidden;
  }

  .container,
  .header-container {
    width: calc(100% - 2rem);
  }

  .header {
    top: max(0.75rem, env(safe-area-inset-top));
  }

  .header-container {
    height: 58px;
    padding: 0 0.55rem 0 0.85rem;
    border-radius: 29px;
  }

  .logo-link {
    gap: 0.55rem;
  }

  .logo-img {
    height: 38px;
  }

  .logo-text {
    font-size: 1rem;
  }

  .menu-toggle {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  .header-nav {
    top: calc(100% + 0.45rem);
    max-height: calc(100dvh - 5.5rem - env(safe-area-inset-top));
    padding: 0.45rem;
    border-radius: 22px;
  }

  .nav-links li a {
    min-height: 48px;
    padding: 0 0.9rem;
    border-radius: 16px;
    font-size: 0.98rem;
  }

  .hero {
    min-height: max(100dvh, 760px);
    justify-content: flex-start;
    align-items: stretch;
    padding: calc(5.4rem + env(safe-area-inset-top)) 0 0;
    overflow: hidden;
    background: #ECABAF;
  }

  .hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 47%;
    background:
      linear-gradient(to bottom, #ECABAF 0%, rgba(236, 171, 175, 0.82) 14%, rgba(236, 171, 175, 0) 42%),
      url('фотки/hero.webp?v=3') 72% center / cover no-repeat;
    pointer-events: none;
  }

  .hero-content {
    max-width: 36rem;
    padding: 1.2rem 0 0;
    text-align: left;
  }

  .hero-title,
  .emotional-title,
  .gallery-title,
  .puppy-match-title,
  .home-breeding-title,
  .faq-title,
  .meet-puppy-title {
    max-width: 100%;
    font-size: clamp(2.15rem, 9.2vw, 2.75rem);
    line-height: 1.07;
    letter-spacing: -0.04em;
    text-wrap: pretty;
  }

  .hero-title {
    max-width: 11ch;
    margin-bottom: 1rem;
    font-size: clamp(2.35rem, 10vw, 2.9rem);
  }

  .hero-subtitle {
    max-width: 34ch;
    margin-bottom: 1.4rem;
    font-size: 1rem;
    line-height: 1.55;
  }

  .hero-subtitle br {
    display: none;
  }

  .hero .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    width: 100%;
    max-width: 32rem;
  }

  .hero .hero-actions .btn {
    min-width: 0;
    height: 52px;
    padding: 0 0.75rem;
    font-size: 0.94rem;
    white-space: nowrap;
  }

  .emotional,
  .puppies-gallery,
  .puppy-match,
  .home-breeding,
  .faq,
  .meet-puppy {
    padding-top: 4.75rem;
    padding-bottom: 4.75rem;
  }

  .emotional-grid,
  .home-breeding-layout,
  .faq-layout,
  .meet-puppy-panel {
    gap: 2.5rem;
  }

  .emotional-title,
  .gallery-title,
  .puppy-match-title,
  .home-breeding-title,
  .faq-title,
  .meet-puppy-title {
    margin-bottom: 1.2rem;
  }

  .hero-subtitle,
  .emotional-text p,
  .gallery-intro,
  .puppy-match-text,
  .home-breeding-text,
  .faq-lead,
  .meet-puppy-text {
    font-size: 1rem;
    line-height: 1.62;
  }

  .emotional-actions,
  .puppy-match-actions,
  .home-breeding-actions,
  .faq-button,
  .meet-puppy-actions {
    margin-top: 1.75rem;
  }

  .emotional-actions .btn,
  .puppy-match-actions .btn,
  .home-breeding-actions .btn,
  .faq-button,
  .meet-puppy-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .emotional-media,
  .home-breeding-visual,
  .meet-puppy-media {
    width: 100%;
    max-width: none;
  }

  .emotional-media::before {
    inset: 0.85rem -0.3rem -0.85rem 0.85rem;
    border-radius: 28px;
  }

  .emotional-photo-frame,
  .home-breeding-visual,
  .meet-puppy-media {
    border-radius: 26px;
  }

  .gallery-heading {
    text-align: left;
  }

  .gallery-title {
    white-space: normal;
  }

  .gallery-filters {
    margin-top: 1.85rem;
    margin-bottom: 2rem;
  }

  .gallery-filter {
    min-height: 44px;
    padding: 0.55rem 1.05rem;
    font-size: 0.92rem;
  }

  .puppy-card {
    flex-basis: calc(100% - 1.75rem);
    border-radius: 22px;
  }

  .puppy-card-contact {
    width: 44px;
    height: 44px;
  }

  .puppy-match-panel {
    gap: 2rem;
    padding: 1.25rem;
    border-radius: 26px;
  }

  .puppy-match-media {
    width: 100%;
    border-radius: 22px;
  }

  .home-breeding-label,
  .faq-label,
  .meet-puppy-label {
    margin-bottom: 0.85rem;
  }

  .faq-lead {
    margin-top: 1.1rem;
  }

  .faq-list {
    border-top-color: rgba(44, 37, 48, 0.13);
  }

  .faq-item {
    border-bottom-color: rgba(44, 37, 48, 0.13);
  }

  .faq-item summary {
    padding: 1.2rem 2.4rem 1.2rem 0;
    font-size: 1rem;
    line-height: 1.4;
  }

  .faq-item p {
    margin: -0.1rem 0 1.35rem;
    font-size: 0.94rem;
    line-height: 1.65;
  }

  .meet-puppy-actions {
    gap: 0.75rem;
  }

  .site-footer {
    padding-top: 4rem;
  }

  .footer-main {
    gap: 2.5rem;
    padding-bottom: 3rem;
  }
}

/* Keep story captions typographically identical to FAQ items. */
.new-families .new-family-caption h3 {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
}

@media (max-width: 700px) {
  .new-families .new-family-caption h3 {
    font-size: 1rem;
    line-height: 1.4;
  }

}

/* New families stories carousel */
.new-families {
  padding: clamp(5.5rem, 9vw, 7.5rem) 0;
  background: #FBF4F5;
  overflow: hidden;
}

.new-families-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.45rem;
}

.new-families-copy {
  max-width: 590px;
}

.new-families-title {
  margin: 0 0 1.15rem;
  font-family: var(--font-sans);
  font-size: clamp(2.7rem, 4.25vw, 4rem);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.045em;
  color: var(--color-dark);
  text-wrap: balance;
}

.new-families-text {
  max-width: 51ch;
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.03rem, 1.35vw, 1.16rem);
  line-height: 1.68;
  color: #4A303A;
}

.new-family-play:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 4px;
}

.new-families-carousel {
  position: relative;
}

.new-families-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 4.75rem;
  background: linear-gradient(90deg, rgba(251, 244, 245, 0), #FBF4F5 88%);
  pointer-events: none;
}

.new-families-rail {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  margin: 0;
  padding: 0.2rem 4.75rem 0.75rem 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  scroll-padding-right: 4.75rem;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.new-families-rail::-webkit-scrollbar {
  display: none;
}

.new-families-navigation {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1.15rem;
}

.new-families-scrubber {
  --progress: 0%;
  position: relative;
  display: flex;
  align-items: center;
  width: clamp(11.5rem, 20vw, 14rem);
  height: 36px;
}

.new-families-scrubber::before,
.new-families-scrubber::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  border-radius: 999px;
  transform: translateY(-50%);
  pointer-events: none;
}

.new-families-scrubber::before {
  right: 0;
  background: rgba(74, 48, 58, 0.16);
}

.new-families-scrubber::after {
  width: var(--progress);
  background: var(--color-accent-dark);
}

.new-families-scrubber:has(.new-families-progress:disabled) {
  opacity: 0.45;
}

.new-families-progress {
  position: relative;
  z-index: 1;
  min-width: 0;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.new-families-progress:disabled {
  cursor: default;
}

.new-families-progress::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 999px;
  background: transparent;
}

.new-families-progress::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -5px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #FBF4F5;
  border-radius: 999px;
  background: var(--color-accent-dark);
  box-shadow: 0 0 0 1px rgba(107, 35, 41, 0.14);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.new-families-progress::-moz-range-track {
  height: 2px;
  border-radius: 999px;
  background: transparent;
}

.new-families-progress::-moz-range-progress {
  background: transparent;
}

.new-families-progress::-moz-range-thumb {
  width: 8px;
  height: 8px;
  border: 2px solid #FBF4F5;
  border-radius: 999px;
  background: var(--color-accent-dark);
  box-shadow: 0 0 0 1px rgba(107, 35, 41, 0.14);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.new-families-progress:hover::-webkit-slider-thumb,
.new-families-progress:active::-webkit-slider-thumb {
  transform: scale(1.16);
}

.new-families-progress:hover::-moz-range-thumb,
.new-families-progress:active::-moz-range-thumb {
  transform: scale(1.16);
}

.new-families-progress:focus-visible {
  outline: none;
}

.new-families-progress:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px rgba(107, 35, 41, 0.14), 0 0 0 5px rgba(107, 35, 41, 0.14);
}

.new-families-progress:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 1px rgba(107, 35, 41, 0.14), 0 0 0 5px rgba(107, 35, 41, 0.14);
}

.new-family-card {
  flex: 0 0 var(--video-card-width, 172px);
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
}

.new-family-card--video {
  --video-card-height: 20rem;
  --video-card-width: 172px;
}

.new-family-card--landscape {
  --video-card-width: 35.56rem;
}

.new-family-card--square {
  --video-card-width: 20rem;
}

.new-family-video-wrap {
  position: relative;
  display: block;
  isolation: isolate;
  overflow: hidden;
  border: 2px solid #D7BEC5;
  background: #2C2530;
  height: var(--video-card-height, 20rem);
  aspect-ratio: var(--video-aspect-ratio, 29 / 53);
  border-radius: 24px;
}

.new-family-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  touch-action: pan-x pan-y;
  cursor: pointer;
  transform: scale(1.008);
}

.new-family-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid rgba(44, 37, 48, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-dark);
  box-shadow: 0 14px 30px -14px rgba(44, 37, 48, 0.46);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}

.new-family-play span {
  margin-left: 3px;
  font-size: 1.1rem;
  line-height: 1;
}

.new-family-play:hover {
  background: rgba(255, 255, 255, 0.98);
  transform: translate(-50%, -50%) scale(1.05);
}

.new-family-play:active {
  transform: translate(-50%, -50%) scale(0.98);
}

.new-family-video-wrap.is-playing .new-family-play {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.92);
}

@media (max-width: 700px) {
  .new-families {
    padding: 4.75rem 0;
  }

  .new-families-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .new-families-title {
    margin-bottom: 1rem;
    font-size: clamp(2.15rem, 9.2vw, 2.75rem);
    line-height: 1.07;
  }

  .new-families-text {
    font-size: 1rem;
    line-height: 1.62;
  }

  .new-families-rail {
    gap: 0.75rem;
    padding: 0.15rem 3.25rem 0.15rem 0;
    scroll-padding-right: 3.25rem;
  }

  .new-families-carousel::after {
    width: 3.25rem;
  }

  .new-family-card {
    flex-basis: var(--video-card-width, 148px);
  }

  .new-family-card--video {
    --video-card-height: 17rem;
    --video-card-width: 148px;
  }

  .new-family-card--landscape {
    --video-card-width: 30.22rem;
  }

  .new-family-card--square {
    --video-card-width: 17rem;
  }

  .new-family-video-wrap {
    border-radius: 21px;
  }

  .new-families-navigation {
    margin-top: 0.95rem;
  }

  .new-families-scrubber {
    width: min(54vw, 11.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .new-family-play,
  .new-families-progress::-webkit-slider-thumb,
  .new-families-progress::-moz-range-thumb {
    transition: none;
  }
}

/* Editorial stories redesign */
.new-families {
  padding: clamp(6rem, 10vw, 8.75rem) 0 clamp(6.25rem, 10vw, 9rem);
  background: #fbf5f5;
}

.new-families-header {
  align-items: flex-end;
  margin-bottom: clamp(2.5rem, 4.5vw, 4rem);
}

.new-families-copy {
  max-width: 680px;
}

.new-families-label {
  display: block;
  margin-bottom: 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.73rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}

.new-families-title {
  margin-bottom: 1.35rem;
  font-size: clamp(3.1rem, 5.2vw, 5.25rem);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.new-families-text {
  max-width: 58ch;
  color: #60464f;
}

.new-families-carousel::after {
  display: none;
}

.new-families-rail {
  gap: 1rem;
  padding: 0.25rem calc(100% - 15.25rem) 1rem 0;
  scroll-padding: 0 calc(100% - 15.25rem) 0 0;
  scroll-snap-type: x mandatory;
}

.new-family-card,
.new-family-card--video,
.new-family-card--landscape,
.new-family-card--portrait {
  --video-card-height: 27rem;
  flex: 0 0 15.25rem;
  width: 15.25rem;
}

.new-family-card--landscape {
  flex-basis: clamp(38rem, 62vw, 47.5rem);
  width: clamp(38rem, 62vw, 47.5rem);
}

.new-family-video-wrap {
  width: 100%;
  height: var(--video-card-height);
  aspect-ratio: auto;
  border: 1px solid rgba(107, 35, 41, 0.18);
  border-radius: 30px;
  background: #241f22;
  box-shadow: none;
}

.new-family-card--landscape .new-family-video-wrap {
  aspect-ratio: 16 / 9;
}

.new-family-card--portrait .new-family-video-wrap {
  aspect-ratio: 9 / 16;
}

.new-family-video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(44, 37, 48, 0.82) 0%, rgba(44, 37, 48, 0.1) 48%, transparent 70%);
  pointer-events: none;
}

.new-family-video {
  transform: none;
}

.new-family-caption {
  position: absolute;
  right: 1.4rem;
  bottom: 1.3rem;
  left: 1.4rem;
  z-index: 2;
  display: grid;
  gap: 0.34rem;
  padding: 0;
  pointer-events: none;
}

.new-family-caption h3 {
  margin: 0;
  font-family: var(--font-sans);
}

.new-family-caption h3 {
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.018em;
  color: var(--color-dark);
}

.new-family-play {
  width: 62px;
  height: 62px;
  border-color: rgba(107, 35, 41, 0.1);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px -22px rgba(44, 37, 48, 0.7);
}

.new-families-navigation {
  justify-content: flex-end;
  align-items: center;
  gap: 1.25rem;
  width: auto;
  margin: 0 0 0 auto;
  padding-bottom: 0.25rem;
}

.new-families-counter {
  display: flex;
  align-items: baseline;
  gap: 0.42rem;
  min-width: 4.75rem;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
  color: #9c858d;
}

.new-families-counter strong {
  font-size: inherit;
  font-weight: inherit;
  color: var(--color-dark);
}

.new-families-arrows {
  display: flex;
  gap: 0.6rem;
}

.new-families-arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(107, 35, 41, 0.2);
  border-radius: 50%;
  background: transparent;
  color: var(--color-dark);
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.new-families-arrow svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.new-families-arrow:hover:not(:disabled) {
  border-color: var(--color-accent-dark);
  background: var(--color-accent-dark);
  color: #fff;
  transform: translateY(-2px);
}

.new-families-arrow:focus-visible {
  outline: 3px solid rgba(107, 35, 41, 0.2);
  outline-offset: 3px;
}

.new-families-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.new-families-carousel > .new-families-arrows {
  position: absolute;
  top: 13.75rem;
  right: 0;
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  pointer-events: none;
  transform: translateY(-50%);
}

.new-families-carousel > .new-families-arrows .new-families-arrow {
  width: 52px;
  height: 52px;
  border-color: rgba(107, 35, 41, 0.16);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px -20px rgba(44, 37, 48, 0.6);
  pointer-events: auto;
  backdrop-filter: blur(8px);
}

@media (max-width: 900px) {
  .new-families-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .new-families-navigation {
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    margin-left: 0;
  }

  .new-family-card,
  .new-family-card--video,
  .new-family-card--portrait {
    --video-card-height: 24rem;
    flex-basis: 13.5rem;
    width: 13.5rem;
  }

  .new-family-card--landscape {
    flex-basis: min(78vw, 42.5rem);
    width: min(78vw, 42.5rem);
  }

  .new-families-rail {
    padding-right: calc(100% - 13.5rem);
    scroll-padding-right: calc(100% - 13.5rem);
  }

  .new-families-carousel > .new-families-arrows {
    top: 12.25rem;
  }
}

@media (max-width: 700px) {
  .new-families {
    padding: 5rem 0 5.75rem;
  }

  .new-families-header {
    gap: 1.75rem;
    margin-bottom: 2.25rem;
  }

  .new-families-label {
    margin-bottom: 0.9rem;
    font-size: 0.68rem;
  }

  .new-families-title {
    margin-bottom: 1.1rem;
    font-size: clamp(2.7rem, 13.2vw, 3.8rem);
  }

  .new-families-rail {
    gap: 1rem;
    padding: 0.15rem calc(100% - min(68vw, 17rem)) 0.75rem 0;
    scroll-padding-right: calc(100% - min(68vw, 17rem));
  }

  .new-family-card,
  .new-family-card--video,
  .new-family-card--portrait {
    --video-card-height: auto;
    flex-basis: min(68vw, 17rem);
    width: min(68vw, 17rem);
  }

  .new-family-card--landscape {
    flex-basis: min(80vw, 34rem);
    width: min(80vw, 34rem);
  }

  .new-family-video-wrap {
    height: auto;
    border-radius: 24px;
  }

  .new-family-card--landscape .new-family-video-wrap {
    aspect-ratio: 16 / 10;
  }

  .new-family-caption {
    right: 1.05rem;
    bottom: 1.05rem;
    left: 1.05rem;
    padding: 0;
  }

  .new-family-caption h3 {
    font-size: 1rem;
  }

  .new-family-play {
    width: 54px;
    height: 54px;
  }

  .new-families-arrow {
    width: 44px;
    height: 44px;
  }

  .new-families-carousel > .new-families-arrows {
    display: none;
  }

  .new-families-navigation {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .new-families-counter {
    justify-self: end;
  }

}

@media (prefers-reduced-motion: reduce) {
  .new-families-arrow,
  .gallery-carousel-arrow {
    transition: none;
  }
}

@media (max-width: 360px) {
  .logo-text {
    font-size: 0.92rem;
  }

  .hero {
    min-height: max(100dvh, 820px);
  }

  .hero::after {
    height: 41%;
  }

  .hero-title {
    max-width: 100%;
    font-size: 2.15rem;
  }

  .hero .hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .hero .hero-actions .btn {
    padding-right: 0.4rem;
    padding-left: 0.4rem;
    font-size: 0.86rem;
  }
}

@media (hover: none) {
  .request-icon:hover,
  .phone-link:hover,
  .logo-link:hover .logo-img,
  .hero-actions .btn:hover,
  .btn:hover,
  .new-families-next-story:hover,
  .new-families-next-story:hover svg,
  .puppy-card:hover,
  .puppy-card:hover .puppy-card-photo,
  .puppy-card:hover .puppy-card-overlay > div,
  .puppy-card:hover .puppy-card-contact {
    transform: none;
  }
}

/* Unified section typography */
.eyebrow,
.home-breeding-label,
.faq-label,
.new-families-label,
.meet-puppy-label {
  display: inline-block;
  margin-bottom: 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.hero-title,
.emotional-title,
.gallery-title,
.puppy-match-title,
.home-breeding-title,
.faq-title,
.new-families-title,
.meet-puppy-title {
  font-family: var(--font-sans);
  font-size: clamp(3rem, 4.2vw, 4rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.045em;
  color: var(--color-dark);
}

.hero-subtitle,
.emotional-text p,
.gallery-intro,
.puppy-match-text,
.home-breeding-text,
.faq-lead,
.new-families-text,
.meet-puppy-text {
  font-family: var(--font-sans);
  font-size: clamp(1.08rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0;
  color: #4A303A;
}

@media (max-width: 600px) {
  .eyebrow,
  .home-breeding-label,
  .faq-label,
  .new-families-label,
  .meet-puppy-label {
    margin-bottom: 1rem;
    font-size: 0.78rem;
  }

  .hero-title,
  .emotional-title,
  .gallery-title,
  .puppy-match-title,
  .home-breeding-title,
  .faq-title,
  .new-families-title,
  .meet-puppy-title {
    font-size: clamp(2.35rem, 11vw, 3rem);
    line-height: 1.04;
  }

  .hero-subtitle,
  .emotional-text p,
  .gallery-intro,
  .puppy-match-text,
  .home-breeding-text,
  .faq-lead,
  .new-families-text,
  .meet-puppy-text {
    font-size: 1.05rem;
    line-height: 1.65;
  }
}

/* Personal introduction */
.meet-puppy {
  padding: clamp(7rem, 11vw, 10rem) 0;
  background: #FFFFFF;
}

.meet-puppy-panel {
  display: grid;
  grid-template-columns: minmax(380px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(3.5rem, 8vw, 7rem);
  align-items: center;
}

.meet-puppy-media {
  position: relative;
  isolation: isolate;
  overflow: visible;
  width: min(100%, 520px);
  aspect-ratio: 4 / 5;
  border-radius: 38px;
  background: var(--color-photo-placeholder);
  box-shadow: 0 30px 70px -42px rgba(44, 37, 48, 0.46);
}

.meet-puppy-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

.meet-puppy-media::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: inherit;
  pointer-events: none;
}

.meet-puppy-content { max-width: 650px; }
.meet-puppy-title { max-width: 14ch; margin-bottom: 1.75rem; }
.meet-puppy-text { max-width: 52ch; }

.meet-puppy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

.meet-puppy-actions .btn-secondary { margin-left: 0; }

@media (max-width: 900px) {
  .meet-puppy-panel { grid-template-columns: 1fr; gap: 3.5rem; }
  .meet-puppy-content { order: -1; }
  .meet-puppy-media { width: min(100%, 520px); }
}

@media (max-width: 600px) {
  .meet-puppy { padding: 5.5rem 0; }
  .meet-puppy-title { margin-bottom: 1.4rem; }
  .meet-puppy-actions { flex-direction: column; margin-top: 2rem; }
  .meet-puppy-actions .btn { width: 100%; min-width: 0; }
  .meet-puppy-media { border-radius: 28px; }
}

/* Footer */
.site-footer {
  padding: 5rem 0 1.75rem;
  background: var(--color-dark);
  color: var(--color-white);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) minmax(160px, 0.65fr) minmax(230px, 0.85fr);
  gap: clamp(3rem, 7vw, 7rem);
  padding-bottom: 4rem;
}

.footer-home .footer-main {
  grid-template-columns: minmax(250px, 1.25fr) minmax(145px, 0.55fr) minmax(145px, 0.55fr) minmax(210px, 0.75fr);
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--color-white);
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 600;
  text-decoration: none;
}

.footer-logo-img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.96;
}

.footer-brand p {
  max-width: 390px;
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.66);
}

.footer-nav,
.footer-contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}

.footer-heading {
  margin-bottom: 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.footer-nav a,
.footer-socials a,
.footer-phone {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.98rem;
  line-height: 1.45;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-phone {
  color: var(--color-white);
  font-size: 1.2rem;
  font-weight: 600;
}

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

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.15rem;
  margin-top: 0.6rem;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.42);
}

@media (max-width: 800px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .site-footer { padding-top: 4rem; }
  .footer-main { grid-template-columns: 1fr; gap: 2.75rem; padding-bottom: 3rem; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 0.5rem; }
}

/* Emotional photo pause */
.one-look {
  padding: clamp(2rem, 4vw, 4rem) 0;
  background: #FBF4F5;
}

.one-look-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(560px, 68vw, 820px);
  border-radius: 42px;
  background: var(--color-photo-placeholder);
  box-shadow: 0 34px 84px -48px rgba(44, 37, 48, 0.5);
}

.one-look-photo {
  position: absolute;
  z-index: -2;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  object-position: center 42%;
  transform: translate3d(0, var(--look-shift, 0), 0) scale(1.025);
  transition: transform 0.2s linear;
}

.one-look-quote {
  position: absolute;
  left: clamp(2rem, 6vw, 6rem);
  top: clamp(3.5rem, 7vw, 6.5rem);
  max-width: 10.5ch;
  font-family: var(--font-sans);
  font-size: clamp(3rem, 5.2vw, 5.25rem);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--color-dark);
  text-shadow: 0 2px 18px rgba(255, 255, 255, 0.32);
}

.one-look-quote span { display: block; }

/* Motion system */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.motion-ready [data-reveal-media] {
  transform: translate3d(0, 34px, 0) scale(0.985);
}

.motion-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-ready .puppy-card.is-revealed:hover {
  transform: translate3d(0, -6px, 0) scale(1);
}

.one-look-frame.is-revealed .one-look-quote span {
  animation: oneLookLine 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.one-look-frame.is-revealed .one-look-quote span:nth-child(2) { animation-delay: 90ms; }
.one-look-frame.is-revealed .one-look-quote span:nth-child(3) { animation-delay: 180ms; }
.one-look-frame.is-revealed .one-look-quote span:nth-child(4) { animation-delay: 270ms; }

@keyframes oneLookLine {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.puppies-grid {
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.puppies-grid.is-updating {
  opacity: 0.25;
  transform: translateY(6px);
}

.puppy-card.filter-enter {
  animation: filterCardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--filter-order, 0) * 60ms);
}

@keyframes filterCardIn {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.puppy-card-overlay > div,
.puppy-card-contact {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.puppy-card:hover .puppy-card-overlay > div { transform: translateY(-3px); }
.puppy-card:hover .puppy-card-contact { transform: translateX(3px) scale(1.08); }

/* Discoverable horizontal puppy gallery */
.puppies-gallery .gallery-heading {
  max-width: none;
  margin: 0 0 clamp(2.5rem, 5vw, 4.25rem);
  text-align: center;
}

.puppies-gallery .gallery-title {
  max-width: none;
  margin: 0;
  white-space: normal;
  text-wrap: balance;
}

.puppies-gallery .gallery-intro {
  margin: 1.25rem auto 0;
  text-align: center;
}

.gallery-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin: 1.35rem 0 0;
}

.puppies-gallery .gallery-filters {
  justify-content: flex-start;
  min-width: 0;
  margin: 0;
}

.gallery-carousel-controls {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.5rem;
}

.gallery-carousel-counter {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 4.75rem;
  margin-right: 0.5rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1;
  font-weight: 600;
  color: #9c858d;
}

.gallery-carousel-counter strong {
  font: inherit;
  color: var(--color-dark);
}

.gallery-carousel-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-dark);
  color: #fff;
  cursor: pointer;
  transition: transform 180ms ease, opacity 180ms ease;
}

.gallery-carousel-arrow svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gallery-carousel-arrow:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.04);
}

.gallery-carousel-arrow:active:not(:disabled) {
  transform: scale(0.96);
}

.gallery-carousel-arrow:focus-visible {
  outline: 3px solid rgba(44, 37, 48, 0.18);
  outline-offset: 3px;
}

.gallery-carousel-arrow:disabled {
  opacity: 0.24;
  cursor: default;
}

.puppies-gallery .puppies-grid {
  --gallery-column-width: calc((100% - 2rem) / 3);
  display: grid;
  grid-template-columns: none;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: var(--gallery-column-width);
  gap: 1rem;
  margin-right: 0;
  padding: 0.5rem 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-padding-right: 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
}

.puppies-gallery .puppies-grid::-webkit-scrollbar {
  display: none;
}

.puppies-gallery .puppies-grid.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
}

.puppies-gallery .puppy-card {
  width: 100%;
  min-width: 0;
  scroll-snap-align: start;
  box-shadow: none;
}

.puppies-gallery .puppy-card:hover {
  box-shadow: none;
}

.puppies-gallery .puppy-card-photo {
  -webkit-user-drag: none;
  user-select: none;
}

@media (max-width: 700px) {
  .gallery-navigation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.9rem;
    margin: 1rem 0 0;
  }

  .puppies-gallery .gallery-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: 1 / -1;
    gap: 0.6rem;
    width: 100%;
    margin: 0;
    padding: 0.2rem 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .puppies-gallery .gallery-filter {
    width: 100%;
    min-width: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    text-align: center;
  }

  .gallery-carousel-controls {
    grid-column: 2;
    gap: 0.45rem;
  }

  .gallery-carousel-counter {
    min-width: 4.25rem;
    margin-right: 0.25rem;
    font-size: 0.94rem;
  }

  .gallery-carousel-arrow {
    width: 40px;
    height: 40px;
  }

  .gallery-carousel-arrow svg {
    width: 17px;
    height: 17px;
  }

  .puppies-gallery .puppies-grid {
    --gallery-column-width: calc(100% - 5rem);
    padding-top: 0.35rem;
    padding-bottom: 0.55rem;
    scrollbar-width: none;
  }

  .puppies-gallery .puppies-grid::-webkit-scrollbar {
    display: none;
  }
}

/* Mobile content flow: explanation, visual proof, then the action. */
.mobile-block-cta {
  display: none;
}

@media (max-width: 700px) {
  .emotional-actions,
  .puppy-match-actions,
  .home-breeding-actions,
  .faq-button-wrap,
  .meet-puppy-actions {
    display: none;
  }

  .mobile-block-cta {
    display: flex;
    grid-column: 1 / -1;
    order: 3;
    align-self: end;
    justify-content: flex-start;
    width: 100%;
    margin-top: 0.5rem;
  }

  .mobile-block-cta .btn {
    width: 100%;
  }
}

@media (max-width: 800px) {
  .footer-home .footer-main {
    grid-template-columns: 1fr 1fr;
  }

  .footer-home .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .footer-home .footer-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-home .footer-brand {
    grid-column: auto;
  }
}

@media (hover: none) {
  .gallery-carousel-arrow:hover:not(:disabled) {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-carousel-arrow {
    transition: none;
  }
}

/* The stories carousel uses the same navigation language as the puppy gallery. */
.new-families .new-families-navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 1.15rem 0 0;
  padding: 0;
}

.new-families .new-family-card--landscape .new-family-video-wrap {
  height: 100%;
  aspect-ratio: 16 / 9;
}

.new-families .new-family-card--portrait .new-family-video-wrap {
  height: 100%;
  aspect-ratio: 9 / 16;
}

.new-families .new-family-card--portrait-tall .new-family-video-wrap {
  aspect-ratio: 28 / 53;
}

@media (min-width: 701px) {
  .new-families .new-families-rail {
    align-items: center;
    gap: 1rem;
    padding: 0.25rem calc(100% - clamp(18rem, 26.44vw, 21.375rem)) 1rem 0;
    scroll-padding-right: calc(100% - clamp(18rem, 26.44vw, 21.375rem));
    scroll-snap-type: x mandatory;
  }

  .new-families .new-family-page {
    display: contents;
  }

  .new-families .new-family-page .new-family-card {
    height: clamp(13.75rem, calc(35.285vw - 3.154rem), 25.08rem);
    flex: 0 0 auto;
    min-width: 0;
    scroll-snap-align: start;
  }

  .new-families .new-family-page .new-family-card--landscape {
    width: clamp(24.44rem, calc(62.729vw - 5.607rem), 44.59rem);
  }

  .new-families .new-family-page .new-family-card--portrait {
    width: clamp(7.73rem, calc(19.848vw - 1.774rem), 14.11rem);
  }

  .new-families .new-family-page .new-family-card--portrait-tall {
    width: clamp(7.26rem, calc(18.64vw - 1.666rem), 13.25rem);
  }

  .new-families .new-family-page .new-family-video-wrap {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 700px) {
  .new-families .new-families-rail {
    --story-height: clamp(18rem, 82vw, 22rem);
    align-items: center;
    padding-right: calc(100% - clamp(12.94rem, 59.63vw, 15.75rem));
    scroll-padding-right: calc(100% - clamp(12.94rem, 59.63vw, 15.75rem));
  }

  .new-families .new-family-page {
    display: contents;
  }

  .new-families .new-family-card,
  .new-families .new-family-card--video,
  .new-families .new-family-card--landscape,
  .new-families .new-family-card--portrait {
    height: var(--story-height);
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .new-families .new-family-card--landscape {
    width: clamp(32rem, 145.78vw, 39.11rem);
  }

  .new-families .new-family-card--portrait {
    width: clamp(10.125rem, 46.125vw, 12.375rem);
  }

  .new-families .new-family-card--portrait-tall {
    width: clamp(9.509rem, 43.322vw, 11.623rem);
  }

  .new-families .new-family-video-wrap {
    width: 100%;
    height: 100%;
  }

  .new-families .new-families-navigation {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
  }
}

.faq-item summary { transition: color 0.25s ease; }
.faq-item[open] summary { color: var(--color-accent); }

@media (max-width: 700px) {
  .one-look { padding: 1.5rem 0; }
  .one-look-frame { min-height: 620px; border-radius: 30px; }
  .one-look-photo { object-position: 60% center; }
  .one-look-quote { top: 2.25rem; right: 1.5rem; bottom: auto; left: 1.5rem; max-width: 11ch; font-size: clamp(2.65rem, 12vw, 3.8rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .one-look-photo { transform: none; }
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(3.5rem, 8vw, 8rem);
  align-items: start;
}

.faq-intro {
  position: sticky;
  top: 7rem;
}

.faq-label {
  display: inline-block;
  margin-bottom: 1.25rem;
  color: var(--color-accent);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.faq-title {
  max-width: 520px;
  font-family: var(--font-sans);
  font-size: clamp(3rem, 4.2vw, 4rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.045em;
  color: var(--color-dark);
}

.faq-lead {
  max-width: 440px;
  margin-top: 1.5rem;
  font-size: clamp(1.08rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  font-weight: 400;
  color: #4A303A;
}

.faq-button {
  margin-top: 2.25rem;
}

.faq-list {
  border-top: 1px solid rgba(44, 37, 48, 0.16);
}

.faq-item {
  border-bottom: 1px solid rgba(44, 37, 48, 0.16);
}

.faq-item summary {
  position: relative;
  padding: 1.55rem 3.5rem 1.55rem 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-dark);
}

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

.faq-item summary::before,
.faq-item summary::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.25rem;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: #BE5869;
  transition: transform 0.25s ease;
}

.faq-item summary::after { transform: rotate(90deg); }
.faq-item[open] summary::after { transform: rotate(0); }

.faq-item p {
  max-width: 700px;
  margin: -0.25rem 3rem 1.65rem 0;
  font-size: 1rem;
  line-height: 1.72;
  color: #604A53;
}

@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; gap: 3.5rem; }
  .faq-intro { position: static; }
}

@media (max-width: 600px) {
  .faq { padding: 5.5rem 0; }
  .faq-title { font-size: clamp(2.35rem, 11vw, 3rem); }
  .faq-item summary { padding: 1.35rem 2.5rem 1.35rem 0; }
  .faq-item p { margin-right: 0; font-size: 0.96rem; }
  .faq-button { width: 100%; }
}

@media (max-width: 1024px) {
  .showcase-carousel {
    height: 380px; /* Scaled height on tablet */
  }
}

@media (max-width: 768px) {
  .puppies-showcase {
    padding: 5rem 0;
  }
  
  .showcase-carousel-wrapper {
    margin-bottom: 3rem;
  }
  
  .showcase-carousel {
    height: 280px; /* Scaled height on mobile */
    gap: 0; /* Maintain seamless strip */
  }
  
  .showcase-slide {
    scroll-snap-align: center; /* Center-snap is better on mobile screens */
  }
  
  .showcase-nav-btn {
    display: none; /* Hide navigation buttons on mobile touch */
  }
  
  .showcase-highlight-text {
    font-size: 1.25rem !important;
  }
  
  .modal-card {
    padding: 2.25rem 1.5rem;
    border-radius: 20px;
  }
  
  .modal-title {
    font-size: 1.5rem;
  }
  
  .modal-subtitle {
    font-size: 0.95rem;
    margin-bottom: 1.75rem;
  }
  
  .modal-messenger-item {
    height: 54px;
    padding: 0 1.25rem;
    font-size: 0.95rem;
    border-radius: 12px;
  }
  
  .modal-icon {
    width: 24px;
    height: 24px;
  }
}

/* Late responsive overrides for sections declared near the end of this file. */
@media (max-width: 1024px) {
  html.menu-active,
  html.menu-active body {
    overflow: hidden;
  }

  .faq-title,
  .meet-puppy-title {
    font-size: clamp(2.6rem, 5.2vw, 3.5rem);
    line-height: 1.04;
  }

  .meet-puppy-panel,
  .faq-layout {
    gap: clamp(3rem, 6vw, 4.5rem);
  }
}

@media (max-width: 900px) {
  .meet-puppy-content {
    order: 1;
    max-width: 720px;
  }

  .meet-puppy-media {
    order: 2;
    width: min(100%, 480px);
    justify-self: start;
  }

  .faq-layout {
    gap: 3rem;
  }
}

@media (max-width: 700px) {
  .faq,
  .meet-puppy {
    padding-top: 4.75rem;
    padding-bottom: 4.75rem;
  }

  .faq-layout,
  .meet-puppy-panel {
    gap: 2.5rem;
  }

  .faq-title,
  .meet-puppy-title {
    max-width: 100%;
    margin-bottom: 1.2rem;
    font-size: clamp(2.15rem, 9.2vw, 2.75rem);
    line-height: 1.07;
    letter-spacing: -0.04em;
    text-wrap: pretty;
  }

  .faq-lead,
  .meet-puppy-text {
    font-size: 1rem;
    line-height: 1.62;
  }

  .faq-lead {
    margin-top: 1.1rem;
  }

  .faq-button,
  .meet-puppy-actions {
    margin-top: 1.75rem;
  }

  .faq-button,
  .meet-puppy-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .meet-puppy-actions {
    gap: 0.75rem;
  }

  .meet-puppy-media {
    width: 100%;
    max-width: none;
    border-radius: 26px;
  }

  .faq-item summary {
    padding: 1.2rem 2.4rem 1.2rem 0;
    font-size: 1rem;
    line-height: 1.4;
  }

  .faq-item p {
    margin: -0.1rem 0 1.35rem;
    font-size: 0.94rem;
    line-height: 1.65;
  }

  .site-footer {
    padding-top: 4rem;
  }

  .footer-main {
    gap: 2.5rem;
    padding-bottom: 3rem;
  }
}

/* Compact display scale keeps mobile headings purposeful without wasting vertical space. */
@media (max-width: 700px) {
  .hero-title,
  .emotional-title,
  .gallery-title,
  .puppy-match-title,
  .home-breeding-title,
  .faq-title,
  .new-families-title,
  .meet-puppy-title {
    font-size: clamp(2rem, 8.3vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
    text-wrap: balance;
  }

  .hero-title {
    max-width: none;
    margin-bottom: 1.4rem;
    font-size: clamp(1.8rem, 8.2vw, 2.65rem);
    line-height: 1.05;
  }
}

/* Keep the mobile hero steady as iOS browser chrome expands and collapses. */
@media (max-width: 700px) {
  .hero {
    min-height: max(100svh, 760px);
  }

  .hero::after {
    bottom: 6%;
    height: 58%;
    background:
      linear-gradient(to bottom, #ECABAF 0%, rgba(236, 171, 175, 0.82) 11%, rgba(236, 171, 175, 0) 34%),
      url('фотки/hero.webp?v=3') 72% center / cover no-repeat;
  }
}

/* Mobile hero: centre the puppy and keep one calm, clear action. */
@media (max-width: 700px) {
  .hero::after {
    background:
      linear-gradient(to bottom, #ECABAF 0%, rgba(236, 171, 175, 0.82) 11%, rgba(236, 171, 175, 0) 34%),
      url('фотки/hero.webp?v=3') 80% center / cover no-repeat;
  }

  .hero .hero-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero .btn-primary {
    border: 1px solid rgba(44, 37, 48, 0.16);
    background: var(--color-white);
    color: var(--color-dark);
    box-shadow: 0 4px 15px rgba(44, 37, 48, 0.1);
  }

  .hero .btn-secondary {
    display: none;
  }
}

@media (max-width: 360px) {
  .hero {
    min-height: max(100svh, 820px);
  }
}