/* Fonts: Nerko One & Clash Grotesk */
@font-face {
  font-family: "Nerko One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/NerkoOne.woff2") format("woff2");
}

@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/ClashGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/ClashGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/ClashGrotesk-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/ClashGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

:root {
  --orange:#ff8500;
  --orange-dark:#e66000;
  --yellow:#ffe600;
  --cyan:#00b7d9;
  --cyan-deep:#008fac;
  --ink:#572b13;
  --cream:#fffaf0;
  --lime:#eff7b1;
  --pink:#ffc2ae;
  --white:#fff;
  --line:rgba(87,43,19,.22);
  --display:"Nerko One",cursive;
  --body:"Clash Grotesk",Arial,sans-serif;
  --ui:cubic-bezier(.2,0,0,1);
  --standard:cubic-bezier(.44,0,.56,1);
  --wide:1600px;
  --main:1200px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:auto;
  text-size-adjust:100%
}

section[id] {
  scroll-margin-top:85px
}

body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-weight:500;
  overflow-x:hidden
}

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

button {
  font:inherit
}

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

.site-header {
  position:fixed;
  inset:0 0 auto;
  z-index:50;
  display:flex;
  justify-content:center;
  padding:0 30px;
  pointer-events:none
}

.nav-shell {
  height:64px;
  width:min(1200px,100%);
  display:flex;
  align-items:center;
  gap:25px;
  padding:8px 10px 10px 20px;
  background:var(--cream);
  border:2px solid var(--ink);
  border-top:0;
  border-bottom-width:4px;
  border-radius:0 0 30px 30px;
  pointer-events:auto
}

.brand {
  display:flex;
  align-items:center;
  width:142px;
  height:44px
}

.brand img {
  width:100%;
  height:auto
}

.nav-links {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:28px;
  margin-left:auto;
  font-size:1rem
}

.nav-links a,.footer a {
  transition:color .3s var(--standard)
}

.nav-links a:hover,.footer a:hover {
  color:var(--orange)
}

.nav-phone {
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px 17px 8px;
  border-radius:999px;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--display);
  font-size:1.22rem;
  line-height:1;
  transition:background .3s var(--ui)
}

.nav-phone:hover {
  background:var(--orange)
}

.nav-phone i {
  font-size:1.22rem
}

.menu-toggle {
  display:none;
  position:relative;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--ink);
  cursor:pointer
}

.menu-toggle span {
  position:absolute;
  left:12px;
  width:20px;
  height:2px;
  background:currentColor;
  transform-origin:center;
  transition:transform .35s var(--ui),top .35s var(--ui)
}

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

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

.hero {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:860px;
  padding:160px 50px 86px;
  overflow:hidden
}

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

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0 0 20px;
  padding:5px 14px 3px;
  border-radius:999px;
  background:var(--lime);
  font-size:.81rem;
  letter-spacing:.04em;
  text-transform:uppercase
}

.hero h1,h2,h3 {
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase
}

.hero-title {
  position:relative;
  font-size:clamp(5rem,10.4vw,9.25rem)
}

.hero h1 {
  position:relative;
  z-index:1;
  margin:0;
  color:var(--ink);
  font-size:1em;
  line-height:.7;
  letter-spacing:-.055em
}

.hero h1 em {
  color:var(--orange);
  font-style:normal
}

.hero-bottom {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  max-width:480px;
  margin:58px auto 0
}

.hero-bottom p,.intro {
  margin:0;
  font-size:clamp(1.15rem,1.7vw,1.5rem);
  line-height:1.3
}

.tactile-button {
  display:inline-flex;
  align-items:flex-end;
  height:61px;
  padding-bottom:11px;
  border-bottom:4px solid var(--ink);
  border-radius:20px;
  background:var(--ink);
  overflow:hidden;
  transition:padding-bottom .3s var(--ui)
}

.tactile-button:hover {
  padding-bottom:6px
}

.tactile-button span {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 30px 9px;
  border-radius:18px;
  background:var(--yellow);
  color:var(--ink);
  font-family:var(--display);
  font-size:1.35rem;
  line-height:1;
  text-transform:uppercase
}

.tactile-button.light {
  border-color:var(--cream);
  background:var(--cream)
}

.tactile-button.light span {
  background:var(--yellow)
}

.hero-pet {
  position:absolute;
  z-index:1;
  width:clamp(250px,27vw,415px);
  filter:drop-shadow(0 15px 5px rgba(87,43,19,.08));
  pointer-events:none
}

.hero-pet-left {
  left:-35px;
  bottom:-115px;
  transform:rotate(-9deg)
}

.hero-pet-right {
  right:-90px;
  bottom:-65px;
  transform:rotate(8deg)
}

.hero-arc {
  position:absolute;
  right:4%;
  top:22%;
  width:136px;
  height:136px;
  border-radius:50%;
  background:var(--cyan);
  z-index:0
}

.hero-arc span {
  position:absolute;
  inset:26px;
  border-radius:50%;
  background:var(--cream)
}

.review-badge {
  position:absolute;
  z-index:3;
  bottom:50px;
  left:50px;
  display:flex;
  align-items:center;
  gap:10px
}

.review-avatars {
  position:relative;
  width:150px;
  height:60px;
  overflow:hidden;
  transition:width .4s var(--ui)
}

.review-badge:hover .review-avatars {
  width:211px
}

.review-avatars img {
  position:absolute;
  top:0;
  width:60px;
  height:60px;
  padding:5px;
  border-radius:50%;
  background:var(--lime);
  object-fit:cover;
  transition:left .4s var(--ui)
}

.review-avatars img:nth-child(1) {
  left:0
}

.review-avatars img:nth-child(2) {
  left:30px
}

.review-avatars img:nth-child(3) {
  left:60px
}

.review-avatars img:nth-child(4) {
  left:90px
}

.review-badge:hover .review-avatars img:nth-child(2) {
  left:50px
}

.review-badge:hover .review-avatars img:nth-child(3) {
  left:100px
}

.review-badge:hover .review-avatars img:nth-child(4) {
  left:150px
}

.review-badge strong {
  display:block;
  font-family:var(--display);
  font-size:1.5rem;
  line-height:.9
}

.review-badge strong i {
  color:var(--orange)
}

.review-badge span {
  display:block;
  font-size:.82rem
}

.contact-section {
  padding:180px 50px 50px
}

.contact-card {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
  gap:60px;
  width:min(100%,1200px);
  margin:auto;
  padding:94px 60px 64px;
  border-radius:30px;
  background:var(--lime)
}

.contact-heading h2,.section-heading h2,.about-copy h2,.values-card h2,.gallery-heading h2,.faq-heading h2,.final-card h2 {
  margin:0;
  font-size:clamp(3.7rem,7vw,6.25rem);
  line-height:.7;
  letter-spacing:-.035em
}

.contact-pet {
  position:absolute;
  right:60px;
  top:-306px;
  width:440px;
  filter:drop-shadow(0 18px 5px rgba(87,43,19,.09))
}

.contact-card .eyebrow {
  background:var(--cream)
}

.contact-grid {
  display:grid;
  gap:40px
}

.contact-grid article {
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  column-gap:22px;
  align-items:start
}

.contact-grid article>:not(i) {
  grid-column:2
}

.contact-grid>article>i {
  display:grid;
  grid-row:1/span 3;
  place-items:center;
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--cyan);
  font-size:1.8rem
}

.contact-grid article h3 {
  margin-top:6px
}

.contact-grid h3,.footer h3 {
  margin:0 0 10px;
  font-family:var(--display);
  font-size:1.7rem;
  line-height:.9;
  text-transform:uppercase
}

.contact-grid p {
  margin:0;
  font-size:1.05rem;
  line-height:1.35
}

.contact-grid a {
  display:inline-flex;
  justify-self:start;
  align-items:center;
  gap:4px;
  margin-top:12px;
  color:var(--orange-dark);
  font-family:var(--display);
  font-size:1.25rem;
  text-transform:uppercase
}

.services-section {
  padding:100px 50px;
  background:#f8faf5
}

.centered {
  text-align:center
}

.section-heading {
  max-width:900px
}

.section-heading.centered {
  margin-inline:auto
}

.section-heading .intro {
  max-width:560px;
  margin:28px auto 0
}

.service-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,350px));
  justify-content:center;
  gap:20px;
  margin-top:60px
}

.service-card {
  position:relative;
  height:472px;
  border-radius:30px;
  overflow:hidden;
  cursor:pointer
}

.service-orange {
  background:var(--pink)
}

.service-cyan {
  background:#bceef3
}

.service-yellow {
  background:#fff0a6
}

.service-blob {
  position:absolute;
  z-index:1;
  bottom:118px;
  left:0;
  width:100%;
  height:32%;
  border-radius:50% 50% 0 0;
  background:var(--orange);
  transition:height .4s var(--ui)
}

.service-cyan .service-blob {
  background:var(--cyan)
}

.service-yellow .service-blob {
  background:var(--orange)
}

.service-pet {
  position:absolute;
  z-index:2;
  bottom:84px;
  left:50%;
  width:58%;
  max-height:280px;
  object-fit:contain;
  transform:translateX(-50%);
  filter:grayscale(1);
  transition:filter .4s var(--ui),bottom .4s var(--ui)
}

.service-card:hover .service-pet {
  bottom:112px;
  filter:grayscale(0)
}

.service-card:hover .service-blob {
  height:22%
}

.service-spark {
  position:absolute;
  z-index:3;
  opacity:0;
  font-size:25px;
  transition:all .4s var(--ui)
}

.spark-left {
  top:95px;
  left:25px;
  color:var(--yellow)
}

.spark-right {
  right:15px;
  bottom:130px;
  color:var(--orange)
}

.service-cyan .spark-left,.service-yellow .spark-right {
  color:var(--cyan-deep)
}

.service-card:hover .service-spark {
  opacity:1;
  font-size:50px
}

.service-card:hover .spark-left {
  top:42px;
  left:-8px;
  transform:rotate(-27deg)
}

.service-card:hover .spark-right {
  right:-2px;
  bottom:160px;
  transform:rotate(12deg)
}

.service-copy {
  position:absolute;
  z-index:4;
  bottom:0;
  width:100%;
  min-height:128px;
  padding:27px 20px 22px;
  border-radius:30px 30px 0 0;
  background:var(--ink);
  color:var(--cream);
  text-align:center
}

.service-cyan .service-copy {
  background:var(--cyan-deep)
}

.service-yellow .service-copy {
  background:var(--orange-dark)
}

.service-copy h3 {
  margin:0;
  font-size:2rem;
  line-height:.8
}

.service-copy p {
  margin:10px 0 0;
  font-size:1rem;
  line-height:1.25
}

.about-section {
  padding:100px 50px 110px
}

.about-section h2 em {
  color:var(--orange);
  font-style:normal
}

.about-body {
  --inset:70px;
  --ratio:.5625;
  --media-h:calc((100cqw - var(--inset) * 2) * var(--ratio));
  position:relative;
  width:min(100%,1340px);
  margin:60px auto 0;
  container-type:inline-size
}

.about-backdrop {
  position:absolute;
  z-index:0;
  top:calc(var(--media-h) * .26);
  left:0;
  right:0;
  height:calc(var(--media-h) * .5);
  border-radius:30px;
  background:var(--yellow)
}

.about-media {
  position:relative;
  z-index:2;
  height:var(--media-h);
  margin:0 var(--inset);
  border:10px solid var(--cream);
  border-radius:32px;
  overflow:hidden;
  background:var(--cream)
}

.about-media>img {
  width:100%;
  height:100%;
  object-fit:cover
}

.about-panel {
  --ticker-h:min(39cqw,600px);
  position:relative;
  z-index:1;
  margin-top:calc(var(--media-h) * -.38);
  padding:calc(var(--media-h) * .38 + 90px) var(--inset) 70px;
  border-radius:30px;
  background:var(--ink);
  color:var(--cream)
}

.about-copy {
  position:relative;
  z-index:4;
  max-width:430px;
  margin-left:50px
}

.about-copy .intro {
  margin:0
}

.about-points {
  display:grid;
  gap:13px;
  margin-top:28px;
  font-size:1.12rem
}

.about-points i {
  color:var(--yellow)
}

.about-action {
  margin-top:34px
}

.about-ticker {
  position:relative;
  z-index:3;
  height:var(--ticker-h);
  margin:calc(var(--ticker-h) * -.62) calc(var(--inset) * -1) 0;
  pointer-events:none;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none
}

.about-ticker svg {
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  clip-path:inset(-200px 0 -200px 0)
}

.about-ticker-band {
  fill:none;
  stroke:var(--cyan-deep);
  stroke-width:64;
  stroke-linecap:round;
  pointer-events:stroke;
  cursor:grab
}

.about-ticker-band:active {
  cursor:grabbing
}

.about-ticker-path {
  fill:none;
  stroke:none
}

.about-ticker-type {
  font-family:var(--display);
  font-size:28px;
  letter-spacing:-.5px
}

.about-ticker .tk-0 {
  fill:var(--yellow)
}

.about-ticker .tk-1 {
  fill:var(--cream)
}

.about-ticker .tk-2 {
  fill:var(--pink)
}

.about-ticker .tk-3 {
  fill:var(--lime)
}

.about-photo {
  position:relative;
  z-index:2;
  height:36cqw;
  margin-top:calc(var(--ticker-h) * -.05 - 30px);
  border:10px solid var(--cream);
  border-radius:32px;
  overflow:hidden
}

.about-photo>img {
  width:100%;
  height:100%;
  object-fit:cover
}

.values-section {
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(340px,.85fr);
  align-items:stretch;
  gap:20px;
  width:min(100%,1400px);
  margin:auto;
  padding:110px 50px 100px
}

.values-card {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:center;
  gap:40px;
  padding:64px 56px;
  border-radius:30px;
  background:rgba(0,183,217,.17)
}

.values-card ul {
  display:grid;
  gap:28px;
  margin:0;
  padding:0;
  list-style:none;
  font-size:1.18rem;
  line-height:1.3
}

.values-card li {
  display:grid;
  grid-template-columns:56px 1fr;
  align-items:baseline;
  gap:12px
}

.values-card li span {
  font-family:var(--display);
  font-size:1.8rem;
  line-height:1;
  color:var(--orange)
}

.values-aside {
  position:relative;
  min-height:420px;
  border-radius:30px;
  background:var(--orange);
  overflow:hidden
}

.values-aside>img {
  position:absolute;
  top:28px;
  left:20px;
  width:calc(100% - 40px);
  height:calc(100% - 28px);
  object-fit:contain;
  object-position:50% 100%
}

.stat {
  position:absolute;
  z-index:2;
  top:27px;
  right:26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:114px;
  height:114px;
  border-radius:50%;
  background:var(--yellow);
  text-align:center;
  transform:rotate(9deg)
}

.stat strong {
  font-family:var(--display);
  font-size:3rem;
  line-height:.7
}

.stat span {
  font-size:.76rem;
  line-height:1
}

.testimonials-section {
  padding:100px 0;
  overflow:hidden
}

.testimonials-section .section-heading {
  padding:0 50px
}

.testimonial-cards {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:28px 20px;
  width:min(100%,760px);
  margin:52px auto 0;
  padding:16px 50px 28px
}

.testimonial {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:310px;
  height:410px;
  padding:30px;
  border-radius:42px;
  color:var(--cream);
  transform:rotate(-2deg)
}

.testimonial:nth-child(2n) {
  transform:rotate(2deg)
}

.t-orange {
  background:var(--orange)
}

.t-cyan {
  background:var(--cyan-deep)
}

.t-yellow {
  background:var(--yellow);
  color:var(--ink)
}

.stars {
  font-size:1.48rem;
  letter-spacing:2px
}

.testimonial>p {
  margin:26px 0;
  font-size:1.3rem;
  line-height:1.15
}

.testimonial footer {
  display:flex;
  align-items:center;
  gap:13px
}

.testimonial footer img {
  width:52px;
  height:52px;
  border:3px solid var(--cream);
  border-radius:50%;
  object-fit:cover
}

.testimonial footer strong,.testimonial footer small {
  display:block
}

.testimonial footer strong {
  font-size:1rem
}

.testimonial footer small {
  margin-top:3px;
  font-size:.78rem
}

.steps-section {
  padding:110px 50px;
  background:var(--cream)
}

.steps-list {
  position:relative;
  width:min(100%,704px);
  margin:78px auto 0
}

.steps-track {
  position:absolute;
  z-index:0;
  top:29px;
  left:32px;
  width:3px;
  height:0;
  background:var(--line);
  transform:translateX(-50%)
}

.steps-fill {
  position:absolute;
  top:0;
  left:-1px;
  right:-1px;
  height:0;
  border-radius:3px;
  background:var(--orange)
}

.steps-paw {
  position:absolute;
  top:-18px;
  left:50%;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  margin-left:-18px;
  border:2px solid var(--ink);
  border-radius:50%;
  background:var(--orange);
  color:var(--cream);
  font-size:1.1rem
}

.step {
  position:relative;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:40px;
  align-items:start;
  padding:0 0 68px
}

.step:last-child {
  padding-bottom:0
}

.step-number {
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:64px;
  height:58px;
  border:3px solid var(--ink);
  border-radius:20px;
  background:var(--cream);
  font-family:var(--display);
  font-size:2rem;
  line-height:1;
  transition:background-color .3s var(--ui),box-shadow .3s var(--ui)
}

.step.is-active .step-number {
  background:var(--yellow);
  box-shadow:0 4px var(--ink)
}

.step h3 {
  margin:7px 0 14px;
  font-size:2.2rem;
  line-height:.8
}

.step p {
  margin:0;
  font-size:1.15rem;
  line-height:1.35
}

.gallery-section {
  position:relative;
  padding:110px 0 56px;
  border-radius:60px;
  background:var(--orange);
  overflow:hidden
}

.gallery-heading {
  padding:0 50px
}

.gallery-heading .eyebrow {
  background:var(--yellow)
}

.gallery-hint {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:28px 0 0;
  padding:8px 18px 6px;
  border-radius:30px;
  background:var(--yellow);
  font-family:var(--display);
  font-size:1.2rem;
  text-transform:uppercase
}

.gallery-hint i {
  font-size:1.4rem
}

.gallery-window {
  margin-top:56px;
  overflow:hidden;
  touch-action:pan-y;
  outline:none;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none
}

.gallery-window:active {
  cursor:grabbing
}

.gallery-window:focus-visible {
  outline:3px solid var(--yellow);
  outline-offset:-3px
}

.gallery-track {
  --tilt:0deg;
  position:relative;
  display:flex;
  align-items:center;
  gap:24px;
  width:max-content;
  padding:40px 0;
  will-change:transform
}

.gallery-track figure {
  --r:-2.5deg;
  --y:0px;
  flex:0 0 auto;
  width:460px;
  height:340px;
  margin:0;
  border:8px solid var(--cream);
  border-radius:44px;
  overflow:hidden;
  background:var(--cream);
  transform:translateY(var(--y)) rotate(calc(var(--r) + var(--tilt)))
}

.gallery-track figure:nth-child(even) {
  --r:2.5deg;
  --y:18px
}

.gallery-track figure.is-portrait {
  width:300px;
  height:400px
}

.gallery-track img {
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  -webkit-user-drag:none
}

.faq-section {
  display:grid;
  grid-template-columns:.7fr 1fr;
  gap:80px;
  width:min(100%,1400px);
  margin:auto;
  padding:120px 50px
}

.faq-heading {
  position:sticky;
  top:105px;
  align-self:start
}

.faq-heading .intro {
  margin-top:28px
}

.faq-list {
  display:grid;
  gap:25px
}

.faq-item {
  border-radius:48px;
  cursor:pointer
}

.faq-item button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:100%;
  padding:10px 10px 10px 40px;
  border:1px solid var(--line);
  border-radius:48px;
  background:transparent;
  color:var(--ink);
  font-family:var(--display);
  font-size:1.85rem;
  line-height:.9;
  text-align:left;
  cursor:pointer;
  transition:padding .3s var(--ui),background .3s var(--ui),color .3s var(--ui)
}

.faq-item button:hover {
  padding-left:30px
}

.faq-item button i {
  display:grid;
  flex:none;
  place-items:center;
  width:72px;
  height:72px;
  border-radius:50%;
  background:var(--cream);
  font-family:inherit;
  font-size:2rem;
  transition:background .3s var(--ui),transform .3s var(--ui)
}

.faq-item button:hover i {
  background:var(--ink);
  color:var(--cream)
}

.faq-answer {
  display:grid;
  grid-template-rows:0fr;
  padding:0 40px;
  opacity:0;
  transition:grid-template-rows .4s var(--ui),padding .4s var(--ui),opacity .25s var(--ui)
}

.faq-answer p {
  min-height:0;
  margin:0;
  overflow:hidden;
  font-size:1.12rem;
  line-height:1.35
}

.faq-item.is-open button {
  background:var(--ink);
  color:var(--cream);
  border-color:var(--ink)
}

.faq-item.is-open button i {
  background:var(--cream);
  color:var(--ink);
  transform:rotate(180deg)
}

.faq-item.is-open .faq-answer {
  grid-template-rows:1fr;
  padding:20px 40px;
  opacity:1
}

.final-cta {
  padding:110px 50px 220px;
  border-radius:110px 110px 0 0;
  background:var(--cyan)
}

.final-card {
  position:relative;
  z-index:2;
  width:min(100%,1200px);
  margin:auto;
  padding:95px 52px 62px;
  border-radius:35px;
  background:var(--ink);
  color:var(--cream);
  text-align:center
}

.final-card .eyebrow {
  background:var(--yellow);
  color:var(--ink)
}

.final-card>p:not(.eyebrow) {
  max-width:560px;
  margin:30px auto;
  font-size:1.3rem
}

.footer {
  position:relative;
  margin-top:-110px;
  padding:70px 50px 35px;
  background:var(--ink);
  color:var(--cream);
  border-radius:110px 110px 0 0
}

.footer-inner {
  display:grid;
  grid-template-columns:1.7fr repeat(3,1fr);
  gap:45px;
  width:min(100%,1400px);
  margin:auto
}

.footer-brand img {
  width:210px;
  height:auto
}

.footer-brand p {
  max-width:290px;
  margin:20px 0 0;
  color:rgba(255,250,240,.75);
  font-size:1.05rem;
  line-height:1.3
}

.footer h3 {
  color:var(--yellow)
}

.footer-inner>div:not(.footer-brand) {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:11px
}

.footer a {
  font-size:1.02rem
}

.footer a i {
  font-size:1.3rem;
  vertical-align:middle
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  width:min(100%,1400px);
  margin:48px auto 0;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.15);
  color:rgba(255,250,240,.68);
  font-size:.9rem
}

.footer-bottom a {
  color:var(--yellow)
}

@media(max-width:809px) {
  .site-header {
  padding:0 15px
}

.nav-shell {
  position:relative;
  padding-left:15px;
  gap:8px
}

.brand {
  width:124px
}

.nav-links {
  position:absolute;
  top:60px;
  left:-2px;
  right:-2px;
  display:flex;
  visibility:hidden;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  max-height:0;
  padding:0 20px;
  overflow:auto;
  border:2px solid var(--ink);
  border-top:0;
  border-radius:0 0 30px 30px;
  background:var(--cream);
  opacity:0;
  transition:max-height .4s var(--ui),padding .4s var(--ui),opacity .2s var(--ui),visibility .4s
}

.nav-links a {
  padding:17px 0;
  font-family:var(--display);
  font-size:1.7rem;
  text-transform:uppercase
}

.nav-shell.is-open .nav-links {
  visibility:visible;
  max-height:440px;
  padding:25px 20px 34px;
  opacity:1
}

.nav-phone {
  margin-left:auto
}

.menu-toggle {
  display:block
}

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

.nav-shell.is-open .menu-toggle span:last-child {
  top:22px;
  transform:rotate(-45deg)
}

.hero {
  min-height:0;
  padding:145px 20px 70px
}

.hero-title {
  font-size:clamp(4.5rem,19vw,6.6rem)
}

.hero-bottom {
  gap:20px;
  margin-top:38px
}

.hero-pet {
  width:200px
}

.hero-pet-left {
  left:-77px;
  bottom:-15px
}

.hero-pet-right {
  right:-65px;
  bottom:-15px
}

.hero-arc {
  top:20%;
  right:-73px;
  width:125px;
  height:125px
}

.review-badge {
  bottom:22px;
  left:20px
}

.review-avatars {
  width:92px;
  height:48px
}

.review-avatars img {
  width:48px;
  height:48px
}

.review-avatars img:nth-child(2) {
  left:22px
}

.review-avatars img:nth-child(3) {
  left:44px
}

.review-avatars img:nth-child(4) {
  left:66px
}

.review-badge:hover .review-avatars {
  width:155px
}

.review-badge strong {
  font-size:1.3rem
}

.review-badge span {
  font-size:.72rem
}

.contact-section {
  padding:250px 20px 50px
}

.contact-card {
  padding:95px 20px 45px
}

.contact-pet {
  top:-206px;
  right:50%;
  width:300px;
  transform:translateX(50%)
}

.contact-grid {
  gap:32px
}

.contact-grid article {
  grid-template-columns:52px minmax(0,1fr);
  column-gap:16px
}

.contact-grid>article>i {
  width:52px;
  height:52px;
  font-size:1.5rem
}

.contact-grid article h3 {
  margin-top:2px
}

.services-section,.about-section,.steps-section {
  padding:70px 20px
}

.service-grid {
  grid-template-columns:1fr;
  margin-top:46px
}

.service-card {
  max-width:350px;
  width:100%;
  margin:auto
}

.values-section {
  grid-template-columns:1fr;
  padding:70px 20px
}

.values-card {
  grid-template-columns:1fr;
  gap:34px;
  padding:55px 22px
}

.values-aside {
  min-height:325px
}

.testimonials-section {
  padding:70px 0
}

.testimonials-section .section-heading {
  padding:0 20px
}

.testimonial-cards {
  margin-top:35px;
  padding:16px 20px 28px
}

.testimonial {
  width:300px;
  height:380px;
  padding:25px
}

.testimonial>p {
  font-size:1.23rem
}

.steps-list {
  margin-top:55px
}

.step {
  grid-template-columns:54px minmax(0,1fr);
  gap:20px;
  padding-bottom:50px
}

.steps-track {
  top:25px;
  left:27px
}

.steps-paw {
  top:-15px;
  width:30px;
  height:30px;
  margin-left:-15px;
  font-size:.95rem
}

.step-number {
  width:54px;
  height:50px;
  font-size:1.7rem
}

.step h3 {
  font-size:1.9rem
}

.gallery-section {
  padding:70px 0 36px;
  border-radius:36px
}

.gallery-heading {
  padding:0 20px
}

.gallery-window {
  margin-top:36px
}

.gallery-track {
  gap:14px;
  padding:28px 0
}

.gallery-track figure {
  width:280px;
  height:220px;
  border-width:6px;
  border-radius:32px
}

.gallery-track figure:nth-child(even) {
  --y:10px
}

.gallery-track figure.is-portrait {
  width:210px;
  height:280px
}

.faq-section {
  grid-template-columns:1fr;
  gap:50px;
  padding:70px 20px
}

.faq-heading {
  position:static
}

.faq-item button {
  gap:7px;
  padding:20px 10px 20px 20px;
  font-size:1.5rem
}

.faq-item button:hover {
  padding-left:20px
}

.faq-item button i {
  width:44px;
  height:44px;
  font-size:1.4rem
}

.faq-answer {
  padding:0 20px
}

.faq-item.is-open .faq-answer {
  padding:17px 20px
}

.final-cta {
  padding:70px 20px 132px;
  border-radius:62px 62px 0 0
}

.final-card {
  padding:75px 20px 45px
}

.footer {
  margin-top:-62px;
  padding:55px 20px 27px;
  border-radius:62px 62px 0 0
}

.footer-inner {
  grid-template-columns:1fr 1fr;
  gap:42px 25px
}

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

.footer-bottom {
  flex-direction:column;
  margin-top:40px
}

.contact-heading h2,.section-heading h2,.about-copy h2,.values-card h2,.gallery-heading h2,.faq-heading h2,.final-card h2 {
  font-size:clamp(3.5rem,14vw,5rem)
}

}

@media(max-width:450px) {
  .nav-phone {
  padding:9px 12px 8px
}

.nav-phone span {
  display:none
}

.hero-title {
  font-size:4.55rem
}

.footer-inner {
  grid-template-columns:1fr
}

.footer-brand {
  grid-column:auto
}

}

/* Hero button structure from the supplied reference. */
.tactile-button {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  height:auto;
  padding:0;
  overflow:visible;
  border:1.5px solid var(--ink);
  border-radius:20px;
  background:var(--yellow);
  box-shadow:0 4px var(--cyan-deep);
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
  transform:translateY(0);
  transition:transform .15s ease-out,box-shadow .15s ease-out;
  will-change:transform
}

.tactile-button:hover {
  transform:translateY(-3px);
  box-shadow:0 7px var(--cyan-deep)
}

.tactile-button:active {
  transform:translateY(1px);
  box-shadow:0 1px var(--cyan-deep);
  transition:transform .05s ease-out,box-shadow .05s ease-out
}

.tactile-button span {
  display:flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  padding:10px 34px;
  border-radius:inherit;
  background:transparent;
  overflow:hidden;
  font-family:var(--display);
  font-size:22px;
  font-weight:400;
  line-height:1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  white-space:nowrap;
  user-select:none;
  -webkit-user-select:none
}

.tactile-button.light {
  background:var(--yellow);
  border-color:var(--cream);
  box-shadow:0 4px var(--cyan-deep)
}

.tactile-button.light:hover {
  box-shadow:0 7px var(--cyan-deep)
}

.tactile-button.light:active {
  box-shadow:0 1px var(--cyan-deep)
}

.tactile-button:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:4px
}

/* Press interaction replicated from the supplied Dentzo reference. */
.press-btn {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 34px;
  border-radius:20px;
  font-family:var(--display);
  font-size:22px;
  font-weight:400;
  line-height:1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  outline:none;
  transform:translateY(0);
  box-shadow:0 3px var(--cyan-deep);
  transition:transform .15s ease-out,box-shadow .15s ease-out
}

.press-btn:hover {
  transform:translateY(-3px);
  box-shadow:0 6px var(--cyan-deep)
}

.press-btn:active {
  transform:translateY(1px);
  box-shadow:0 1px var(--cyan-deep);
  transition:transform .05s ease-out,box-shadow .05s ease-out
}

.press-btn-primary {
  border:1.5px solid var(--ink);
  background-color:var(--yellow);
  color:var(--ink)
}

.press-btn-light {
  border-color:var(--cream)
}

.press-btn:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:4px
}

/* Header intro: starts above the viewport until script.js slides it in. */
.header-intro .site-header {
  transform:translateY(-100%)
}

/* Contact card below desktop: heading stacks above the info blocks. */

@media(max-width:1023px) {
  .contact-card {
  grid-template-columns:minmax(0,1fr);
  gap:50px
}

}

/* Gallery drag cursor: shown only for mouse/trackpad pointers;
   script.js adds .has-drag-cursor and drives scale/position. */
.drag-cursor {
  position:fixed;
  z-index:60;
  top:0;
  left:0;
  display:flex;
  align-items:center;
  gap:16px;
  height:74px;
  padding:0 26px;
  border-radius:999px;
  background:var(--yellow);
  color:var(--ink);
  font-family:var(--display);
  font-size:1.75rem;
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
  visibility:hidden;
  opacity:0
}

.drag-cursor span {
  padding-top:3px
}

.drag-cursor svg {
  width:36px;
  height:36px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .3s var(--ui)
}

.drag-cursor.is-pressed svg:first-child {
  transform:translateX(-5px)
}

.drag-cursor.is-pressed svg:last-child {
  transform:translateX(5px)
}

.gallery-window.has-drag-cursor,.gallery-window.has-drag-cursor:active {
  cursor:none
}

@media(hover:hover) and (pointer:fine) {
  .gallery-hint {
  display:none
}

}

/* Character reveal (fluid pop reference). */
.split-word {
  display:inline-block;
  white-space:nowrap
}

.split-char {
  display:inline-block;
  transform-origin:50% 62%;
  backface-visibility:hidden
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0
}

/* Magnetic testimonial cards (references/hover-effect). Must match the gsap.matchMedia query in script.js. */

@media(min-width:1024px) and (hover:hover) {
  .testimonials-stage {
  position:relative;
  height:calc(520px * var(--stage-scale,1));
  margin-top:40px
}

.testimonial-cards {
  position:absolute;
  top:50%;
  left:50%;
  display:block;
  width:0;
  height:0;
  margin:0;
  padding:0;
  transform:scale(var(--stage-scale,1))
}

.testimonial-cards .testimonial {
  position:absolute;
  top:0;
  left:0;
  will-change:transform
}

}

/* Hero composition (Pawfect reference): rotating seal over the title and social proof under the CTA. */
.hero-seal {
  position:absolute;
  z-index:0;
  top:-.34em;
  left:calc(50% + 1.05em);
  width:1.1em;
  height:1.1em;
  pointer-events:none
}

.hero-seal svg {
  display:block;
  width:100%;
  height:100%;
  overflow:visible
}

.hero-seal circle {
  fill:none;
  stroke:var(--cyan);
  stroke-width:40
}

.hero-seal text {
  fill:var(--ink);
  font-family:var(--display);
  font-size:22px;
  text-transform:uppercase
}

.hero-proof {
  display:inline-flex;
  align-items:center;
  gap:14px;
  text-align:left
}

.hero-avatars {
  display:flex
}

.hero-avatars img {
  width:60px;
  height:60px;
  border:4px solid var(--lime);
  border-radius:50%;
  object-fit:cover;
  transition:margin .4s var(--ui)
}

.hero-avatars img+img {
  margin-left:-24px
}

.hero-proof:hover .hero-avatars img+img {
  margin-left:-6px
}

.hero-proof-text strong {
  display:flex;
  align-items:center;
  gap:4px;
  font-family:var(--display);
  font-size:1.7rem;
  font-weight:400;
  line-height:.9
}

.hero-proof-text strong i {
  color:var(--orange);
  font-size:1.3rem
}

.hero-proof-text small {
  display:block;
  margin-top:2px;
  font-size:.88rem
}

@media(max-width:809px) {
  .hero-avatars img {
  width:50px;
  height:50px;
  border-width:3px
}

.hero-avatars img+img {
  margin-left:-20px
}

.hero-proof-text strong {
  font-size:1.45rem
}

.hero-proof-text small {
  font-size:.8rem
}

}

/* About section on small screens: full-width media, ticker flows between the copy and the photo. */

@media(max-width:809px) {
  .about-body {
  --inset:14px;
  --ratio:.75;
  margin-top:40px
}

.about-media {
  border-width:7px;
  border-radius:26px
}

.about-panel {
  padding:calc(var(--media-h) * .38 + 45px) 20px 30px;
  border-radius:26px
}

.about-copy {
  max-width:none;
  margin-left:0
}

.about-ticker {
  height:250px;
  margin:20px -20px 0
}

.about-ticker-type {
  font-size:22px
}

.about-ticker-band {
  stroke-width:50
}

.about-photo {
  height:260px;
  margin-top:-70px;
  border-width:7px;
  border-radius:26px
}

}