/* === SiteHeader === */

/* SiteHeader — .site-header
   Sticky header з nav, логотипом по центру і lang-switcher
*/

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--content-padding);
  position: relative;
  z-index: 100;
}

.site-header__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.site-header__logo-img {
  display: block;
  width: 121px;
  height: 22px;
}

@media (max-width: 768px) {
  .site-header {
    padding: var(--space-base) var(--content-padding);
  }

  .site-header .nav {
    display: none;
  }

  .site-header__logo {
    position: static;
    transform: none;
  }
}

/* === Hero === */

/* Hero — .hero
   Два блоки з -24px overlap: lavender banner + purple tagline
   Cat image і packages overflow назовні своїх контейнерів
*/

.hero {
  padding: 0 var(--content-padding);
  margin-bottom: var(--section-gap);
  position: relative;
}

/* — Banner: lavender top block — */
.hero__banner {
  background: var(--color-bg-lavender);
  border-radius: var(--radius-xl);
  height: clamp(180px, 33.33vw, 480px);
  position: relative;
  overflow: hidden;
  margin-bottom: -24px;
  z-index: 1;
}

.hero__banner-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 3.33vw, 48px);
  width: 100%;
  max-width: 884px;
  pointer-events: none;
}

.hero__banner-inner .btn {
  pointer-events: auto;
}

.hero__logo-wrap {
  position: relative;
  width: 100%;
  max-width: 884px;
}

.hero__logo {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 884 / 161;
}

/* HeroChip — .hero-chip
   Pill label overlaid on banner, positioned inside .hero__logo-wrap
   Each variant sets its own left/top + rotation
*/
.hero-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-xl);
  background: var(--color-bg-page);
  border: 1.5px solid var(--color-purple-brand);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-purple-brand);
  white-space: nowrap;
  pointer-events: none;
}

.hero-chip--two-friends {
  left: 19%;
  top: -20px;
  transform: translateX(-50%) rotate(8deg);
}

.hero-chip--1plus1 {
  left: 84%;
  top: -10px;
  transform: translateX(-50%) rotate(-5deg);
}

.hero-chip--to-friend {
  left: 57%;
  top: 70%;
  transform: translateX(-50%) rotate(-8deg);
}

/* Cat: absolute inside .hero__banner — overflow:hidden on banner contains it */
.hero__cat {
  position: absolute;
  right: 0;
  top: -40px;
  height: 100%;
  width: auto;
  pointer-events: none;
  z-index: 3;
}

/* — Tagline: purple bottom block — */
.hero__tagline {
  background: var(--color-purple-brand);
  border-radius: var(--radius-xl);
  height: 224px;
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.hero__tagline-text {
  font-family: var(--font-body);
  font-size: var(--text-hero-tagline);
  font-weight: var(--weight-bold);
  color: var(--color-bg-page);
  text-transform: uppercase;
  letter-spacing: 1.56px;
  line-height: 1.1;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Product packages overflow left edge of tagline */
.hero__packages {
  position: absolute;
  left: 0;
  top: -184px;
  width: 426px;
  height: 362px;
  overflow: hidden;
  pointer-events: none;
}

.hero__package--1 {
  position: absolute;
  left: 7px;
  top: 0;
  width: 286px;
  height: auto;
  object-fit: contain;
}

.hero__package--2 {
  position: absolute;
  left: 187px;
  top: 29px;
  width: 231px;
  height: auto;
  object-fit: contain;
}

/* ─── 1270px: scale-down breakpoint ─── */
@media (max-width: 1270px) {
  /* Lavender banner: lock height so it doesn't shrink */
  .hero__banner {
    height: clamp(420px, 33.33vw, 480px);
  }

  /* Cat: shrink a bit while banner stays tall */
  .hero__cat {
    height: clamp(300px, 32vw, 420px);
  }

  /* 2friends logo: scale down fluidly */
  .hero__banner-inner {
    max-width: clamp(540px, 69.5vw, 884px);
  }

  .hero__logo-wrap {
    max-width: clamp(540px, 69.5vw, 884px);
  }

  /* Hero chips: shrink with viewport */
  .hero-chip {
    font-size: clamp(12px, 1.26vw, 16px);
    padding: clamp(5px, 0.63vw, var(--space-sm)) clamp(14px, 1.9vw, var(--space-xl));
  }

  /* Cans: scale proportionally to viewport (1.0 at 1270px → 0.55 at narrow) */
  .hero__packages {
    transform: scale(clamp(0.55, calc(100vw / 1270px), 1));
    transform-origin: bottom left;
  }

  /* Tagline: text shifts right + shrinks — fills empty space beside cans */
  .hero__tagline {
    justify-content: flex-end;
    padding-right: clamp(16px, 4vw, 52px);
  }

  .hero__tagline-text {
    font-size: clamp(28px, 4.09vw, 52px);
    text-align: right;
  }
}

/* ─── 768px: mobile breakpoint ─── */
@media (max-width: 768px) {
  /* Side padding: 8px instead of 24px; extra bottom margin for packages overflow */
  .hero {
    padding: 0 8px;
    margin-bottom: 120px;
  }

  /* Banner */
  .hero__banner {
    border-radius: var(--radius-md);
    height: 425px;
  }

  /* Shift banner content down from center to fixed top position */
  .hero__banner-inner {
    top: 189px;
    transform: translateX(-50%);
    max-width: clamp(240px, 81vw, 380px);
    gap: 56px;
  }

  /* 2friends logo: bigger at 768px, scales down with vw */
  .hero__logo-wrap {
    max-width: clamp(240px, 81vw, 380px);
  }

  /* Cat — snapped to right edge of lavender block */
  .hero__cat {
    display: block;
    right: 0;
    left: auto;
    top: -19px;
    width: 201px;
    height: auto;
  }

  /* Chips — fixed mobile size; left uses % so they scale with logo-wrap width */
  .hero-chip {
    display: inline-flex;
    font-size: 13px;
    padding: 5px 12px;
  }

  .hero-chip--two-friends {
    left: 24%;
    top: -34px;
    transform: translateX(-50%) rotate(6deg);
  }

  .hero-chip--1plus1 {
    left: 62%;
    top: -22px;
    transform: translateX(-50%) rotate(-5deg);
  }

  .hero-chip--to-friend {
    left: 81%;
    top: 52px;
    transform: translateX(-50%) rotate(-8deg);
  }

  /* Tagline — reset 1270px overrides, text pushed to top */
  .hero__tagline {
    height: 160px;
    border-radius: var(--radius-md);
    align-items: flex-start;
    justify-content: center;
    padding-top: 27px;
    padding-right: 0;
  }

  .hero__tagline-text {
    font-size: 24px;
    letter-spacing: 0.72px;
    text-align: center;
  }

  /* Cans: sit below tagline text (text ends ~53px from top), overflow below is fine */
  .hero__packages {
    display: block;
    left: 50%;
    top: 90px;
    width: clamp(90px, 26vw, 200px);
    height: clamp(90px, 26vw, 200px);
    transform: translateX(-50%);
  }

  .hero__package--1 {
    left: -9px;
    top: -1px;
    width: clamp(60px, 19.5vw, 150px);
  }

  .hero__package--2 {
    left: clamp(36px, 7vw, 54px);
    top: clamp(10px, 2vw, 15px);
    width: clamp(48px, 15.6vw, 120px);
  }
}

/* === About === */

/* About — .about + .about__cards
   Текстовий блок + ряд з 4 advantage-card
*/

.about {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-3xl);
}

.about__label {
  margin-bottom: var(--space-sm);
}

.about__heading {
  position: relative;
  margin-bottom: var(--space-2xl);
}

.about__heading .floating-bubble {
  top: 100px;
  right: 170px;
  transform: rotate(-2deg);
  z-index: 2;
}

.about__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  font-size: var(--text-body-md);
  font-weight: var(--weight-medium);
  color: var(--color-purple);
}

.about__cards {
  display: flex;
  justify-content: center;
  gap: var(--space-base);
  padding: 0 var(--content-padding);
  margin-bottom: var(--section-gap);
  flex-wrap: wrap;
}

/* Zone 2: 1025px–1328px — cards scale in one row, no scroll yet */
@media (min-width: 1025px) and (max-width: 1328px) {
  .about__cards {
    flex-wrap: nowrap;
  }
}

/* Zone 3: 769px–1024px — desktop horizontal scroll */
@media (min-width: 769px) and (max-width: 1024px) {
  .about__cards {
    flex-wrap: nowrap;
    width: 100%;
    overflow: visible; /* re-establishes scroll context blocked by body overflow-x:hidden */
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .about__cards::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 768px) {
  .about {
    padding: 0 var(--space-base);
  }

  /* Anchor bubble to bottom of heading so it stays close when title is one row */
  .about__heading .floating-bubble {
    top: auto;
    bottom: -14px;
  }

  /* Horizontal scroll — cards stay in one row */
  .about__cards {
    flex-wrap: nowrap;
    width: 100%;
    overflow: visible;
    overflow-x: auto;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0 var(--space-base);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .about__cards::-webkit-scrollbar {
    display: none;
  }
}

/* === Values === */

/* Values — .values
   Два рівних блоки: orange (left) + photo (right)
   gap: 16px, same padding as Hero
*/

.values {
  display: flex;
  gap: var(--space-base);
  padding: 0 var(--content-padding);
  margin-bottom: var(--section-gap);
}

/* — Left panel: orange bg with tags — */
.values__left {
  flex: 0 0 calc(50% - var(--space-base) / 2);
  min-width: 0;
  min-height: 600px;
  background: var(--color-orange);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  padding: 64px var(--space-3xl);
  display: flex;
  flex-direction: column;
}

.values__label,
.values__heading,
.values__tags,
.values__footer-text {
  position: relative;
  z-index: 1;
}

.values__label {
  color: var(--color-white);
  margin-bottom: var(--space-sm);
  text-align: center;
}

.values__heading {
  color: var(--color-white);
  margin-bottom: 64px;
  text-align: center;
}

.values__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-base);
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 560px;
  margin: 0 auto var(--space-3xl);
  overflow: visible;
}

/* Override position: absolute from .value-tag atom — tags flow in flex */
.values__tags .value-tag {
  position: static;
}

/* Rotations + vertical scatter for organic look — adapts to any text length */
.values__tags .value-tag:nth-child(1)  { transform: rotate(-15deg) translateY(-6px);  z-index: 3; }
.values__tags .value-tag:nth-child(2)  { transform: rotate(-2deg)  translateY(4px);   z-index: 4; }
.values__tags .value-tag:nth-child(3)  { transform: rotate(-5deg)  translateY(-6px);  z-index: 2; }
.values__tags .value-tag:nth-child(4)  { transform: rotate(-10deg) translateY(6px);   z-index: 5; }
.values__tags .value-tag:nth-child(5)  { transform: rotate(-5deg)  translateY(-4px);  z-index: 6; }
.values__tags .value-tag:nth-child(6)  { transform: rotate(5deg)   translateY(8px);   z-index: 5; }
.values__tags .value-tag:nth-child(7)  { transform: rotate(10deg)  translateY(-4px);  z-index: 4; }
.values__tags .value-tag:nth-child(8)  { transform: rotate(0deg)   translateY(5px);   z-index: 3; }
.values__tags .value-tag:nth-child(9)  { transform: rotate(-3deg)  translateY(-4px);  z-index: 7; }
.values__tags .value-tag:nth-child(10) { transform: rotate(2deg)   translateY(3px);   z-index: 3; }

.values__footer-text {
  margin-top: auto;
  color: var(--color-white);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  text-align: center;
}

/* 1+1 decoration — scales proportionally with block, overflows both edges */
.values__decoration {
  position: absolute;
  top: 14%;
  left: -15.5%;
  width: 126%;
  max-width: none;
  aspect-ratio: 878 / 496;
  height: auto;
  pointer-events: none;
}

/* — Right panel: photo with value tag chips — */
.values__right {
  flex: 0 0 calc(50% - var(--space-base) / 2);
  min-width: 0;
  min-height: 600px;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}

.values__right-photo,
.values__right-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Value tag chips on the photo */
.values__right .value-tag {
  position: absolute;
  z-index: 2;
}

.values__right .value-tag:nth-child(3) {
  top: 110px;
  right: 60px;
  transform: rotate(6deg);
}

.values__right .value-tag:nth-child(4) {
  top: 345px;
  left: 60px;
  transform: rotate(-5deg);
}

.values__right .value-tag:nth-child(5) {
  bottom: 110px;
  right: 50px;
  transform: rotate(15deg);
}

@media (max-width: 1200px) {
  .values {
    flex-direction: column;
    align-items: stretch;
  }

  .values__left,
  .values__right {
    flex: 1 1 auto;
    min-height: 500px;
  }
}

@media (max-width: 768px) {
  .values__left {
    min-height: 400px;
    padding: 48px var(--space-xl);
  }

  .values__tags .value-tag {
    transform: none;
  }

  .values__right {
    min-height: 400px;
  }

  .values__right .value-tag:nth-child(4) {
    display: none;
  }
}

/* === Products === */

/* Products — .products
   Light lavender container. Carousel bleeds to edges (no h-padding on container).
   Header, filter, nav — have their own h-padding.
*/

.products {
  padding: 0 var(--content-padding);
  margin-bottom: var(--section-gap);
}

.products__container {
  background: var(--color-bg-lavender);
  border-radius: var(--radius-lg);
  padding: var(--space-4xl) 0 var(--space-3xl); /* 64px top (Figma), 0 h (carousel bleeds), 48px bottom */
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* ── Header ── */
.products__header {
  max-width: 680px;
  margin: 0 auto var(--space-2xl);
  padding: 0 var(--space-xl);
}

.products__label {
  color: var(--color-purple-brand);
  margin-bottom: var(--space-sm);
}

.products__heading {
  position: relative;
  margin-bottom: var(--space-2xl);
}

.products__heading .display-xl {
  color: var(--color-purple-brand);
}

/* Bubble: between 1st and 2nd line of the heading */
.products__heading .floating-bubble {
  top: 90px;
  left: 16%;
  transform: rotate(2deg);
  z-index: 2;
}

.products__desc {
  font-size: var(--text-body-md);
  font-weight: var(--weight-regular);
  color: var(--color-purple-brand);
}

/* ── Filter ── */
.products__filter {
  display: flex;
  justify-content: center;
  padding: 0 var(--space-xl);
  margin-bottom: var(--space-2xl); /* ~32px gap before product images */
}

/* ── Carousel ── */
.products__grid {
  display: flex;
  gap: var(--space-base);
  padding-left: var(--space-2xl);  /* leading space before first card */
  padding-right: var(--space-xl);
  padding-bottom: var(--space-base); /* clearance for flavor tag overflow */
  transition: transform var(--transition-base);
  will-change: transform;
}

/* ── Navigation ── */
.products__nav {
  display: flex;
  justify-content: center;
  padding: 0 var(--space-xl);
  margin-top: var(--space-2xl);
}

/* Override disabled next button for lavender bg (default blends in) */
.products .carousel-nav__btn--next:disabled,
.products .carousel-nav__btn--next[aria-disabled="true"] {
  background: var(--color-white);
  color: var(--color-purple-brand);
  opacity: 0.45;
}

.products .carousel-nav__btn--next:disabled::before,
.products .carousel-nav__btn--next[aria-disabled="true"]::before {
  background: var(--color-white);
}

/* ── Paw prints decoration ── */
.products__paws {
  position: absolute;
  top: 0;
  left: 0;
  width: 201px;
  height: 310px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.products__header {
  position: relative;
  z-index: 1;
}

.products__paws img {
  width: 100%;
  height: 100%;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .products {
    padding: 0 8px;
  }

  .products__container {
    padding: var(--space-3xl) var(--space-xl); /* 48px 24px */
  }

  /* Header and filter already get h-padding from the container */
  .products__header {
    padding: 0;
    max-width: none;
  }

  .products__heading .floating-bubble {
    left: 39%;
    top: 40px; /* line 1 ends at ~53px; 40px centers bubble across the line break */
  }

  .products__filter {
    padding: 0;
    margin-bottom: 136px; /* space for card image overflow above white card */
  }

  .products__grid {
    padding-left: 0;
    padding-right: 0;
    gap: 8px;
  }

  .products__nav {
    padding: 0;
  }
}

/* === Contact === */

/* Contact — .contact
   Заголовок + 2 фото по боках + форма по центру
   Layout: повна ширина через flex, фото фіксовані, форма росте
*/

.contact {
  text-align: center;
  margin-bottom: var(--section-gap);
}

.contact__header {
  max-width: 680px;
  margin: 0 auto var(--space-2xl);
  position: relative;
}

.contact__heading {
  position: relative;
  margin-bottom: var(--space-lg);
}

.contact__heading .floating-bubble {
  top: 110px;
  right: 130px;
  transform: rotate(-2deg);
  z-index: 2;
}

/* Full-width flex row — фото фіксовані, форма flex: 1 */
.contact__body {
  display: flex;
  align-items: stretch;
  gap: var(--space-base);
  padding: 0 var(--content-padding);
  width: 100%;
  box-sizing: border-box;
  max-width: 1600px;
  margin-inline: auto;
}

.contact__photo {
  flex: 0 0 clamp(160px, 24%, 400px);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.contact__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.contact__form-container {
  flex: 1;
  min-width: 0;
  background: var(--color-bg-green-form);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) calc(var(--space-4xl) + var(--space-xl));
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: center;
  justify-content: center;
}

/* "Get in touch" — було var(--font-sans) якого немає, і 28px без токена */
.contact__form-title {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-heading-xl);
  line-height: var(--lh-body);
  color: var(--color-purple-dark);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0;
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
  width: 100%;
}

.contact__submit {
  display: flex;
  justify-content: center;
}

/* — CF7 adapter — maps Contact Form 7 output to design-system styles —
   CF7 wraps each field in a <p>, inputs get .wpcf7-form-control,
   submit gets .wpcf7-submit. None of these match .form-field__* so we
   remap them here, scoped to .contact__form-container to avoid leaking.
   Success state is handled by main.js (wpcf7mailsent event).
*/

.contact__form-container .wpcf7 {
  width: 100%;
}

/* Form layout — mirrors .contact__form */
.contact__form-container .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
  width: 100%;
}

/* Each <p> acts as .form-field */
.contact__form-container .wpcf7-form > p {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: 0;
}

/* Label — mirrors .form-field__label */
.contact__form-container .wpcf7-form label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--color-purple);
  line-height: var(--lh-body);
}

/* CF7 wraps each input in a <span> for validation — make it block */
.contact__form-container .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* Input / textarea — mirrors .form-field__input */
.contact__form-container .wpcf7-form-control:not(.wpcf7-submit) {
  padding: var(--space-md) 0;
  border: none;
  border-bottom: 1px solid var(--color-purple);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-purple);
  background: transparent;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
}

.contact__form-container .wpcf7-form-control:not(.wpcf7-submit)::placeholder {
  color: var(--color-purple);
  opacity: 0.4;
}

.contact__form-container textarea.wpcf7-form-control {
  resize: vertical;
  min-height: 40px;
}

.contact__form-container .wpcf7-form-control:not(.wpcf7-submit):focus {
  border-bottom-color: var(--color-purple-brand);
  border-bottom-width: 2px;
}

/* Submit <p> — center the button */
.contact__form-container .wpcf7-form > p:has(.wpcf7-submit) {
  align-items: center;
}

/* CF7 submit input is hidden by JS; our .btn--dark is inserted next to it.
   Hide it via CSS too as a fallback for slow JS. */
.contact__form-container input.wpcf7-submit {
  display: none;
}

/* Validation error on field */
.contact__form-container .wpcf7-not-valid {
  border-bottom-color: var(--color-orange) !important;
  border-bottom-width: 2px !important;
}

.contact__form-container .wpcf7-not-valid-tip {
  font-family: var(--font-body);
  font-size: var(--text-label);
  color: var(--color-orange);
  margin-top: var(--space-2xs);
  display: block;
}

/* Response output — hidden by default; shown only on error/spam/fail.
   On success, main.js injects .contact__success and this stays hidden. */
.contact__form-container .wpcf7-response-output {
  display: none;
}

/* CF7 puts state classes on .wpcf7-form, not on the .wpcf7 wrapper */
.contact__form-container .wpcf7-form.failed .wpcf7-response-output,
.contact__form-container .wpcf7-form.aborted .wpcf7-response-output,
.contact__form-container .wpcf7-form.spam .wpcf7-response-output,
.contact__form-container .wpcf7-form.invalid .wpcf7-response-output {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  text-align: center;
  margin-top: var(--space-sm);
  border: 1px solid var(--color-orange);
  color: var(--color-orange);
}

/* Success state — shown after form send (in Storybook; CF7 uses .wpcf7.sent) */
.contact__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  gap: var(--space-xl);
  text-align: center;
  width: 100%;
}

.contact__success-title {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  line-height: var(--lh-display);
  color: var(--color-purple-dark);
  margin: 0;
}

.contact__success-message {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--color-purple-dark);
  margin: 0;
}

@media (max-width: 1280px) {
  .contact__form-container {
    padding: var(--space-2xl) var(--space-3xl);
  }
}

/* 768–1280px: only right photo, 1/3 — form 2/3 */
@media (min-width: 769px) and (max-width: 1280px) {
  .contact__photo--left {
    display: none;
  }

  .contact__photo--right {
    flex: 1;
  }

  .contact__form-container {
    flex: 2;
  }
}

@media (max-width: 768px) {
  .contact__body {
    flex-direction: column;
    align-items: stretch;
    padding: 0 8px;
    gap: 8px;
  }

  .contact__photo--left {
    display: none;
  }

  /* Height scales with viewport width (proportional), bounded between 280px–420px */
  .contact__photo--right {
    flex: none;
    width: 100%;
    height: clamp(280px, 80vw, 420px);
  }

  .contact__form-container {
    width: 100%;
    padding: var(--space-2xl) var(--space-xl);
  }
}

/* === SiteFooter === */

/* SiteFooter — .site-footer
   Two-layer stacked footer: orange content card (z:2) + peach bottom bar (z:1)
*/

.site-footer {
  padding: var(--space-base) var(--space-base) var(--space-xl);
}

/* ─── Orange content card ─── */

.site-footer__card {
  background: var(--color-orange);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-3xl) var(--space-xl);
  color: var(--color-bg-page);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  align-items: center;
  z-index: 2;
  margin-bottom: calc(-1 * var(--space-sm));
}

/* Decorative paw print trail — single composite SVG */

.site-footer__paws {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}

.site-footer__paws-img {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
  display: block;
}

/* Top row: nav links (left) + office address (right) */

.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.site-footer__link {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-bold);
  line-height: var(--lh-body);
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.site-footer__link:hover {
  opacity: 0.8;
}

.site-footer__office {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: right;
}

.site-footer__office-title {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-bold);
  line-height: var(--lh-body);
  text-transform: uppercase;
}

.site-footer__office-address {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
  font-style: normal;
  line-height: var(--lh-tight);
}

.site-footer__office-address a {
  text-decoration: underline;
  font-style: normal;
}

/* Bottom center: logo + tagline */

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  width: 632px;
  max-width: 100%;
}

.site-footer__logo {
  width: 100%;
  display: flex;
  justify-content: center;
}

.site-footer__logo img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

.site-footer__tagline {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-bold);
  line-height: var(--lh-body);
  text-transform: uppercase;
  text-align: center;
}

/* ─── Bottom bar ─── */

.site-footer__bar {
  background: var(--color-orange-50);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-3xl) var(--space-md);
  color: var(--color-orange-500);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  line-height: var(--lh-body);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

/* Social links row — lives inside the bar */

.site-footer__social {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-orange-100);
  border-radius: var(--radius-xl);
  color: var(--color-orange-500);
  transition: opacity var(--transition-fast);
}

.site-footer__social-link:hover {
  opacity: 0.7;
}

.site-footer__bar-contact {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  text-align: right;
}

.site-footer__bar-contact-details {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  white-space: nowrap;
}

.site-footer__bar-contact a {
  text-decoration: underline;
}

/* reCAPTCHA notice below the bar */
.site-footer__recaptcha {
  color: var(--color-orange);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  text-align: center;
  padding: var(--space-sm) var(--space-base) var(--space-base);
}

.site-footer__recaptcha a {
  color: inherit;
  text-decoration: underline;
}

/* ─── Responsive ─── */

@media (max-width: 1200px) {
  .site-footer__bottom {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .site-footer__bar {
    flex-wrap: wrap;
  }

  /* Social icons go to the very bottom — full row, centered */
  .site-footer__social {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .site-footer__top {
    flex-direction: column;
    gap: var(--space-2xl);
  }

  .site-footer__office {
    text-align: left;
  }

  .site-footer__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-base);
  }

  .site-footer__bar-contact {
    text-align: left;
  }
}