/* =====================================================================
   home.css — sections of the home page (measured at 1440px)
   ===================================================================== */

/* 1. hero ------------------------------------------------------------ */
.hero { background: var(--white); padding-top: 220px; padding-bottom: 100px; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.hero > .container { flex: 1 1 auto; }
.hero__inner { position: relative; min-height: 618px; }
.hero__title { position: relative; z-index: 1; display: flex; flex-direction: column; }
.hero__art { position: absolute; left: 50%; bottom: -100px; width: 589px; height: 730px; transform: translateX(-50%); z-index: 2; }
.hero__dog { width: 589px; height: 730px; object-fit: contain; }
/* outline traced 13px outside the cut-out (tools: see git log); the svg box is the image box plus 24px on top/left/right */
.hero__line { position: absolute; left: -4.075%; top: -3.288%; width: 108.149%; height: 103.288%; max-width: none; overflow: visible; }
.hero__line path { stroke-dasharray: 1946; stroke-dashoffset: 1946; transition: stroke-dashoffset 2.2s var(--ease) .3s; }
.hero__line.is-in path { stroke-dashoffset: 0; }
.hero__social { position: absolute; left: 0; bottom: 0; z-index: 3; }
.hero__aside { position: absolute; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 23px; }
.hero__aside .lead { max-width: 330px; text-align: right; }
/* desktop: long Turkish title needs the whole left side, so the dog stands on the right */
@media (min-width: 1360px) {
  .hero__title { font-size: 54px; line-height: 56px; }
  .hero__title span { white-space: nowrap; }
  .hero__art { left: auto; right: 20px; transform: none; }
  .hero__aside { left: 0; right: auto; top: 204px; bottom: auto; align-items: flex-start; }
  .hero__aside .lead { max-width: 520px; text-align: left; }
}
.hero__actions { display: flex; gap: 10px; align-items: center; }

/* 2. clinic / hours ---------------------------------------------------- */
.mission { padding-top: 150px; padding-bottom: 352px; }
.mission::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 67px; background: var(--brown); }
.mission__grid { display: grid; grid-template-columns: 338px 700px 338px; align-items: center; justify-content: center; }
.mission__card { padding: 34px; min-height: 340px; display: flex; flex-direction: column; justify-content: center; gap: 30px; position: relative; z-index: 2; margin-top: 50px; }
.mission__grid > .card:first-child { margin-right: -38px; }
.mission__grid > .card:last-child { margin-left: -38px; }
.mission__photo img { width: 700px; height: 500px; border-radius: 20px; object-fit: cover; }
.mission__list { margin-top: 20px; }
.mission__list li { align-items: flex-start; font-size: 15px; line-height: 22px; }
.mission__list .ico { margin-top: 2px; }
.mission__note { margin-top: 20px; font-size: 14px; line-height: 20px; }
.mission__note a { color: var(--white); font-weight: 600; }
.card__icon--paw { width: 50px; height: 50px; color: var(--red); fill: var(--red); }
.features { margin-top: 32px; display: flex; justify-content: center; gap: 76px; }
.features li { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--brown); line-height: 16px; }
.features .ico { width: 16px; height: 16px; color: var(--orange); }
.mission__peek { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 327px; height: 319px; z-index: 3; }
.mission__peek[data-scrub] { transform: translateX(-50%) translateY(calc(120px * var(--q))); }

/* 3. services orbit -------------------------------------------------- */
.services { background: var(--brown); padding-top: 110px; padding-bottom: 20px; overflow: hidden; }
.services::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 67px; background: var(--cream); }
.services__text { max-width: 560px; }
.orbit { position: relative; width: 780px; height: 780px; margin: 140px auto 0; z-index: 1; }
.orbit__ring { position: absolute; inset: 0; border-radius: 50%; padding: 24px; --p: 1; --q: calc(1 - var(--p)); }
.orbit__ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(var(--orange) 0%, rgba(171,171,171,0) 100%); transform: rotate(calc(-200deg * var(--q))); transition: transform .5s var(--ease-out); }
.orbit__ring[data-scrub] { transform: none; }
.orbit__inner { position: relative; width: 100%; height: 100%; border-radius: 50%; background: var(--brown); }
.orbit__cat { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) translateY(calc(190px * var(--q))) scale(calc(1 - .5 * var(--q))); transform-origin: center bottom; transition: transform .5s var(--ease-out); width: 539px; height: 690px; z-index: 2; object-fit: contain; }
.orbit__node {
  position: absolute; width: 180px; height: 180px; border-radius: 50%; padding: 0 30px;
  background: var(--brown); color: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  font-size: 13px; line-height: 16px; font-weight: 600; text-transform: uppercase; z-index: 3;
  transition: transform .4s var(--ease-out), color .3s;
}
.orbit__node:hover { transform: scale(1.06); color: var(--orange); }
.orbit__icon { width: 52px; height: 52px; }
.orbit__node--1 { left: 293px; top: -80px; }
.orbit__node--2 { left: 640px; top: 161px; }
.orbit__node--3 { left: 640px; top: 486px; }
.orbit__node--4 { left: -40px; top: 486px; }
.orbit__node--5 { left: -40px; top: 161px; }
.services__more { position: relative; z-index: 4; display: flex; justify-content: center; padding: 60px 0 120px; }

/* 4. about ----------------------------------------------------------- */
.about { padding-block: 150px; }
.about__row { display: grid; grid-template-columns: 590px 1fr; gap: 75px; align-items: start; }
.about__row + .about__row { margin-top: 100px; }
.about__row--flip { grid-template-columns: 1fr 590px; }
.about__photo img { width: 590px; height: 660px; border-radius: 20px; object-fit: cover; }
.about__body { padding-top: 55px; max-width: 635px; }
.about__body .h2 { margin-top: 20px; }
.about__intro { margin-top: 20px; max-width: 590px; }
.about__intro + .accent-block { margin-top: 50px; }
.about__btn { margin-top: 50px; }

/* 5. reviews --------------------------------------------------------- */
.reviews { background: var(--cream-2); padding-block: 150px; overflow: hidden; }
.reviews__inner { position: relative; z-index: 1; }
.reviews__blob { position: absolute; right: calc(50% - 650px); top: 150px; width: 605px; height: 605px; border-radius: 50%; background: linear-gradient(213deg, #cfcfbe 0%, rgba(228,228,212,0) 70%); }
.reviews .section-head .h2 { max-width: 686px; }
.reviews__grid { margin-top: 60px; display: grid; grid-template-columns: repeat(2, 410px); gap: 20px; }
.review { background: var(--white); border-radius: var(--radius); padding: 30px; min-height: 250px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.review:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(60,20,2,.06); }
.review__stars { display: flex; gap: 3px; margin-bottom: -10px; }
.review__stars svg { width: 18px; height: 18px; fill: #fbbc05; }
.review__quote { font-size: 18px; line-height: 28px; color: var(--gray); }
.review footer { display: flex; align-items: center; gap: 12px; }
.review__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--cream); color: var(--red); display: grid; place-items: center; }
.review__avatar { font-family: var(--font-display); font-weight: 700; font-size: 15px; background: var(--red); color: var(--white); }
.review__src { margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 14px; color: var(--gray); }
.review__g { width: 14px; height: 14px; }
.review__name { font-size: 16px; line-height: 16px; }
.reviews__art.fade-up { opacity: 1; }
.reviews__art { position: absolute; right: calc(50% - 660px); bottom: 0; width: 440px; height: auto; z-index: 2; }

/* 6. steps ----------------------------------------------------------- */
.steps { padding: 150px var(--gutter) 75px; }
.steps__inner { display: grid; grid-template-columns: 590px 1fr; gap: 120px; align-items: center; }
.steps__art { position: relative; height: 657px; }
.steps__block { position: absolute; left: 0; bottom: 0; width: 590px; height: 350px; background: var(--red); border-radius: var(--radius); }
.steps__art img { position: absolute; left: 46px; bottom: 0; width: 499px; height: 657px; }
.steps__body .h2 { max-width: 590px; }
.steplist { margin-top: 60px; display: grid; gap: 40px; }
.steplist li { display: flex; gap: 24px; align-items: flex-start; }
.steplist__icon { flex: 0 0 80px; width: 80px; height: 80px; border-radius: 50%; background: var(--white); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--red); }
.steplist .text { margin-top: 10px; }

/* 7. giant text + cta ------------------------------------------------ */
.cta-big { padding: 75px var(--gutter) 150px; }
.giant { position: relative; text-align: center; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: min(11.4vw, 164px); line-height: .9; display: flex; flex-direction: column; gap: 20px; }
/* the rise is applied to the two words, not the wrapper: a transformed wrapper would trap the cat behind the card */
.giant[data-fx] { transform: none; will-change: auto; }
.giant__pet, .giant__care { transform: translateY(calc(90px * var(--q, 0))); transition: transform .5s var(--ease-out); }
.giant__pet { color: rgba(60,20,2,.1); }
.giant__care { color: var(--red); }
.giant__cat { position: absolute; left: 50%; top: 230px; transform: translateX(-50%) translateY(calc(-60px * var(--q, 0))); transition: transform .5s var(--ease-out); width: 387px; height: 421px; z-index: 2; }
.cta-card { position: relative; margin-top: 177px; background: var(--brown); border-radius: var(--radius); padding: 160px 80px 104px; display: flex; flex-direction: column; align-items: center; gap: 80px; }
.cta-card__title { max-width: 974px; text-align: center; }
.cta-card__cols { display: flex; gap: 80px; text-align: center; }
.cta-card__cols > div { width: 320px; display: flex; flex-direction: column; align-items: center; }
.cta-card__cols .card__title { color: var(--white); margin-bottom: 17px; }
.cta-card__cols a, .cta-card__cols p { color: var(--tan); }
.cta-card__cols a:hover { color: var(--white); }
.cta-card__follow { position: absolute; left: 0; right: 0; bottom: 46px; text-align: center; font-size: 14px; line-height: 16.8px; font-weight: 600; text-transform: uppercase; color: var(--white); }
.cta-card__social { position: absolute; left: 50%; bottom: -27px; transform: translateX(-50%); }
.cta-card__social a { border: 1.5px solid var(--brown); box-shadow: 0 6px 16px rgba(60,20,2,.12); }
.cta-card__social .ico { width: 24px; height: 24px; }

/* 8. video ----------------------------------------------------------- */
.video { padding: 0; height: 800px; background: var(--brown); }
.video video { width: 100%; height: 100%; object-fit: cover; }
.video.fade-up { transform: none; }


/* 9. contact -------------------------------------------------------- */
.contact { padding: 75px var(--gutter) 75px; }
.contact .section-head .h2 { max-width: 620px; }
.contact__grid { margin-top: 60px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.contact__info { position: relative; overflow: hidden; clip-path: inset(0 round var(--radius)); padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 50px; }
.contact__bgpaw { position: absolute; left: 291px; top: 112px; width: 426px; height: 436px; opacity: .06; }
.contact__info > div { position: relative; }
.info-list { margin-top: 36px; display: grid; gap: 20px; }
.info-list li { display: flex; gap: 16px; align-items: flex-start; }
.info-list img, .info-list__ico { width: 30px; height: 30px; flex: 0 0 30px; color: var(--white); }
.info-list a, .info-list p { font-size: 20px; line-height: 30px; color: var(--tan); }
.info-list a:hover { color: var(--white); }
.info-list__phone { font-size: 30px; line-height: 30px; color: var(--white) !important; }
.social-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.social-grid--one { grid-template-columns: 180px; }
.social-grid a { height: 50px; border-radius: 10px; background: rgba(255,255,255,.08); display: grid; place-items: center; color: var(--white); transition: background .3s; }
.social-grid a:hover { background: var(--orange); }
.social-grid .ico { width: 20px; height: 20px; }

/* 10. wide ----------------------------------------------------------- */
.wide { padding-block: 75px; }
.wide img { width: 100%; height: auto; border-radius: var(--radius); object-fit: cover; }

/* 11. blog ----------------------------------------------------------- */
.blog { padding-block: 150px 75px; }
.blog__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.blog__head .section-head { max-width: 760px; }
.blog__grid { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* 12. faq ------------------------------------------------------------ */
.faq { padding-block: 75px; }
.faq .accordion { margin-top: 60px; border-top: 1px solid var(--line); }
.faq__more { display: flex; justify-content: center; margin-top: 50px; }

/* 13. emergency ------------------------------------------------------ */
.urgent { padding: 75px var(--gutter) 100px; }
.urgent__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; }
.urgent__card { position: relative; padding: 60px; min-height: 600px; display: flex; flex-direction: column; justify-content: center; }
.urgent__card .h2 { margin-top: 20px; max-width: 560px; }
.urgent__list { margin-top: 30px; display: grid; gap: 12px; }
.urgent__list li { display: flex; gap: 10px; align-items: flex-start; color: var(--brown); font-weight: 500; line-height: 24px; }
.urgent__list .ico { width: 18px; height: 18px; color: var(--red); margin-top: 3px; }
.urgent__card .text { margin-top: 24px; max-width: 560px; }
.urgent__actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 20px 30px; align-items: center; }
.urgent__actions .text { margin: 0; }
.urgent__actions .text a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.urgent__paw { position: absolute; right: -90px; bottom: 26px; width: 178px; height: 178px; transform: rotate(-30deg) scale(calc(1 + var(--q, 0))); z-index: 2; }
.urgent__photo img { width: 100%; height: 100%; min-height: 600px; border-radius: var(--radius); object-fit: cover; }

/* 14. red band ------------------------------------------------------- */
.red { background: var(--red); padding: 345px var(--gutter) 157px; min-height: 738px; overflow: hidden; }
.red__marquee { position: absolute; left: 0; right: 0; top: 0; height: 188px; background: var(--cream); overflow: hidden; }
.red__text { display: flex; gap: .25em; padding-right: .6em; white-space: nowrap; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 140px; line-height: 188px; color: var(--brown); }
.red__text .dim { color: rgba(60,20,2,.1); }
.red__text .is-red { color: var(--red); }
.red__inner { position: relative; display: flex; justify-content: space-between; }
.red__body { max-width: 520px; color: var(--white); }
.red__body .h5 { color: var(--white); }
.red__body .text { margin-top: 20px; }
.red__actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }
.red__art { position: absolute; left: 50%; top: -297px; transform: translateX(-50%); width: 801px; height: 812px; pointer-events: none; margin-left: 273px; }
.red__bgpaw { position: absolute; left: 0; top: 66px; width: 801px; height: 812px; opacity: 1; }
.red__cat { position: absolute; left: 216px; top: 0; width: 434px; height: 650px; }

/* =====================================================================
   RESPONSIVE — tablet (810–1359)
   ===================================================================== */
@media (max-width: 1359px) {
  .hero { padding-top: 160px; min-height: 0; display: block; }
  .hero__inner { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
  .hero__title { font-size: 48px; line-height: 48px; grid-column: 1 / -1; }
  .hero__art { position: relative; left: auto; bottom: auto; transform: none; width: 100%; height: auto; grid-column: 2; grid-row: 2 / 4; margin-bottom: -100px; }
  .hero__dog { width: 100%; height: auto; }
  .hero__line { display: none; }
  .hero__social, .hero__aside { position: static; align-items: flex-start; width: auto; }
  .hero__aside .lead { text-align: left; }

  .mission__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .mission__grid > .card:first-child, .mission__grid > .card:last-child { margin: 0; }
  .mission__photo { grid-column: 1 / -1; grid-row: 1; }
  .mission__photo img { width: 100%; height: auto; }
  .mission__card { min-height: 0; gap: 30px; }
  .mission__card[data-scrub] { transform: none; }
  .about__body[data-scrub] { transform: none; }
  .features { flex-wrap: wrap; gap: 20px 40px; }

  .services { padding-bottom: 0; }
  .orbit { width: 100%; max-width: 780px; height: auto; margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .orbit__ring { position: relative; grid-column: 1 / -1; aspect-ratio: 1; margin-top: 40px; order: 10; }
  .orbit__node { position: static; width: auto; height: auto; padding: 20px 10px; border-radius: 20px; background: transparent; }
  /* phone/tablet: no scroll-linked motion here, the cat simply sits inside the ring */
  .orbit__cat { position: absolute; width: 62%; height: auto; bottom: 0; left: 50%; transform: translateX(-50%); }
  .orbit__ring::before { transform: none; }
  .services::after { position: static; display: block; height: 67px; margin-inline: -30px; }
  .services__more { padding: 40px 0 90px; }

  .about__row, .about__row--flip { grid-template-columns: 1fr; gap: 40px; }
  .about__row--flip .about__photo { order: -1; }
  .about__photo img { width: 100%; height: auto; }
  .about__body { padding-top: 0; }

  .reviews { padding-block: 100px; }
  .reviews__grid { grid-template-columns: 1fr 1fr; }
  .reviews__art, .reviews__blob { display: none; }
  .video { height: 533px; }
  .steps { padding-top: 100px; }

  .steps__inner { grid-template-columns: 1fr; gap: 60px; }
  .steps__art { height: 520px; }
  .steps__block { width: 100%; }
  .steps__art img { width: auto; height: 520px; left: 30px; }

  .giant__cat { top: 150px; width: 260px; height: auto; }
  .cta-card { padding: 120px 40px 80px; margin-top: 120px; }
  .cta-card__cols { gap: 40px; flex-wrap: wrap; justify-content: center; }
  .cta-card__cols > div { width: auto; flex: 1 1 200px; }


  .contact__grid { grid-template-columns: 1fr; }
  .contact__bgpaw { left: auto; right: -60px; }

  .blog__grid { grid-template-columns: repeat(2, 1fr); }
  .blog__grid .post:nth-child(3) { display: none; }

  .urgent__grid { grid-template-columns: 1fr; }
  .urgent__card { min-height: 0; padding: 60px; }
  .urgent__paw { right: 20px; bottom: -80px; }
  .urgent__photo img { min-height: 0; aspect-ratio: 3 / 2; }

  .red { min-height: 0; padding: 260px var(--gutter) 100px; }
  .red__inner { flex-direction: column; gap: 40px; }
  .red__art { position: relative; left: auto; top: auto; transform: none; margin: 0; width: 100%; height: 520px; }
  .red__bgpaw { left: 50%; top: 0; transform: translateX(-50%); width: 100%; height: 100%; object-fit: contain; }
  .red__cat { left: 50%; top: auto; bottom: -100px; transform: translateX(-50%); width: 320px; height: auto; }
}

/* =====================================================================
   RESPONSIVE — phone (≤809)
   ===================================================================== */
@media (max-width: 809px) {
  .hero { padding-top: 140px; padding-bottom: 0; }
  .hero__inner { grid-template-columns: 1fr; gap: 30px; }
  .hero__title { font-size: min(7.3vw, 42px); line-height: 1.06; overflow-wrap: normal; }
  .hero__art { grid-column: 1; grid-row: auto; margin-bottom: 0; width: 84%; margin-inline: auto; margin-top: 6%; overflow: visible; }
  .hero__line { display: block; }
  .hero__actions { flex-wrap: wrap; }

  .mission { padding-top: 80px; padding-bottom: 310px; }
  .mission__grid { grid-template-columns: 1fr; }
  .features { flex-direction: column; align-items: flex-start; }

  .services { padding-top: 60px; }
  .orbit { grid-template-columns: 1fr 1fr; }
  .orbit__node { font-size: 12px; }
  .orbit__node:nth-child(6) { grid-column: 1 / -1; }
  .orbit__icon { width: 40px; height: 40px; }
  .services::after { margin-inline: -20px; }

  .about { padding-block: 60px 80px; }
  .reviews { padding-block: 80px; }
  .reviews__grid { grid-template-columns: 1fr; margin-top: 40px; }
  .video { height: 253px; }

  .steps { padding: 80px var(--gutter) 40px; }
  .steps__art { height: 420px; }
  .steps__art img { height: 420px; left: 10px; }
  .steplist li { gap: 16px; }
  .steplist__icon { flex-basis: 56px; width: 56px; height: 56px; font-size: 18px; }

  .cta-big { padding: 40px var(--gutter) 80px; }
  .giant { font-size: clamp(56px, 19vw, 90px); line-height: 1; gap: 10px; }
  .giant__cat { top: 100px; width: 180px; }
  .cta-card { padding: 90px 24px 60px; margin-top: 80px; gap: 40px; }
  .cta-card__cols { flex-direction: column; gap: 30px; }
  .cta-card__follow { position: static; }
  .cta-card__social { bottom: -27px; }

  .contact { padding: 40px var(--gutter) 40px; }
  .contact__info { padding: 24px; }
  .social-grid--one { grid-template-columns: 1fr; }

  .wide { padding-block: 40px; }
  .blog { padding-block: 80px 40px; }
  .blog__head { flex-direction: column; align-items: flex-start; gap: 30px; }
  .blog__grid { grid-template-columns: 1fr; margin-top: 40px; }

  .faq { padding-block: 40px; }
  .faq .accordion { margin-top: 40px; }

  .urgent { padding: 40px var(--gutter) 80px; }
  .urgent__card { padding: 40px 24px; }
  .urgent__paw { display: none; }

  .red { padding: 220px var(--gutter) 80px; }
  .red__marquee { height: 140px; }
  .red__text { font-size: 90px; line-height: 140px; }
  .red__art { height: 460px; }
}