/* ==========================================================================
   ADA BIOTECH — page-specific layouts
   Composition only. Colours, spacing and motion all come from tokens.css.
   ========================================================================== */

/* ==========================================================================
   Home
   ========================================================================== */

.home-hero {
  align-items: center;
  background-color: var(--green-600);
}

.home-hero__inner {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 62rem) {
  .home-hero__inner {
    grid-template-columns: 1fr 1fr;
  }
}

.home-hero__media img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.32));
}

.eyebrow--on-dark {
  background-color: rgba(255, 255, 255, 0.14);
  color: var(--cream);
}

.eyebrow--on-dark::before {
  background-color: var(--cream);
}

/* Zero trace ------------------------------------------------------------- */

.zero {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 60rem) {
  .zero {
    grid-template-columns: 1.05fr 1fr;
  }
}

.zero__media {
  position: relative;
  display: grid;
  gap: var(--space-5);
}

.zero__media > img {
  width: 100%;
  border-radius: var(--radius-xl);
}

.zero__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zero__features .pill {
  font-size: var(--text-xs);
}

.zero__features .icon {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--color-primary);
}

.zero__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
}

.zero__figure {
  margin-block: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background-color: var(--color-primary);
  color: var(--white);
  text-align: center;
}

.zero__figure-value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  line-height: 1;
}

.zero__figure-label {
  font-size: var(--text-sm);
  color: var(--color-text-on-dark-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.zero__note {
  max-width: var(--measure);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

/* Video ------------------------------------------------------------------- */

.video-block__caption {
  margin-block-start: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* Comparison -------------------------------------------------------------- */

.compare__col-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-align: center;
}

/* Testimonials ------------------------------------------------------------ */

.testimonials__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.testimonials__kicker {
  max-width: 22ch;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.testimonials__lead {
  max-width: var(--measure);
  margin-block: var(--space-4) var(--space-7);
  color: var(--color-text-muted);
}

/* ==========================================================================
   Partner directory — "Redefining the future of sustainable living"
   ========================================================================== */

.partners__panel {
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface-sunken);
}

.partners__panel + .partners__panel,
.partners__pair + .partners__panel {
  margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
}

.partners__title {
  margin-block-end: clamp(1.5rem, 4vw, 2.5rem);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--color-primary);
}

.partners__subtitle {
  margin-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  text-align: center;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Marine Conservation and University sit side by side */
.partners__pair {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 62rem) {
  .partners__pair {
    grid-template-columns: 1fr 1fr;
  }
}

.partners__pair > .partners__panel {
  margin-block-start: 0;
}

/* Group ------------------------------------------------------------------- */

.pgroup + .pgroup {
  margin-block-start: clamp(2rem, 5vw, 3.5rem);
}

.pgroup__title {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto clamp(1.25rem, 3vw, 2rem);
  padding: 0.55em 1.6em;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--white);
  font-size: clamp(1rem, 1.9vw, 1.5rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-normal);
  text-align: center;
  text-wrap: balance;
}

.pgroup__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.5rem, 1.4vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pgroup__item {
  display: grid;
  place-items: center;
  transition: transform var(--duration-micro) var(--ease-out);
}

.pgroup__item:hover {
  transform: translateY(-4px);
}

.pgroup__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*
  Three badge treatments, matching the reference:
  ring — the crop already carries its green ring, so it is shown as-is
  disc — artwork only, on a cream disc drawn here
  bare — wordmark with no badge behind it
*/
.pgroup__grid--ring .pgroup__item {
  width: clamp(3.25rem, 6.2vw, 5.4rem);
  aspect-ratio: 1;
}

/*
  The artwork is inset by sizing the image, not by padding the item:
  percentage padding resolves against the flex container's width, not the
  item's, which would blow the disc out and collapse the image to zero.
*/
.pgroup__grid--disc .pgroup__item {
  width: clamp(4rem, 7.5vw, 6.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #fffdf0;
}

.pgroup__grid--disc .pgroup__logo {
  width: 72%;
  height: 72%;
}

.pgroup__grid--bare {
  gap: clamp(1.5rem, 5vw, 4rem);
}

.pgroup__grid--bare .pgroup__item {
  width: clamp(7rem, 16vw, 12rem);
  height: auto;
}

.pgroup__grid--bare .pgroup__logo {
  height: auto;
}

/* ==========================================================================
   About
   ========================================================================== */

.about-lead {
  max-width: 24ch;
  margin-block: var(--space-5) var(--space-9);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
}

@media (min-width: 60rem) {
  .about-lead {
    max-width: 34ch;
  }
}

.about-grid {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 62rem) {
  .about-grid {
    grid-template-columns: 1fr 0.9fr 1fr;
  }
}

.about-grid__note {
  margin-block-start: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.about-grid__media {
  border-radius: var(--radius-xl);
}

.about-grid__media img {
  aspect-ratio: 4 / 3;
}

.about-grid__copy {
  display: grid;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.about-grid__copy strong {
  color: var(--color-text);
}

.link-underline {
  justify-self: start;
  margin-block-start: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.link-underline:hover {
  opacity: 0.75;
}

/* Vision / mission -------------------------------------------------------- */

.vm-card {
  padding: var(--space-8) var(--space-7);
  border-radius: var(--radius-2xl);
  text-align: center;
}

.vm-card__title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  text-transform: uppercase;
  color: var(--cream);
}

.vm-card__list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-on-dark-muted);
}

/* Team -------------------------------------------------------------------- */

.team {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 62rem) {
  .team {
    grid-template-columns: 1.6fr 1fr;
  }
}

.team__list {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.team-card {
  position: relative;
  border-radius: var(--radius-2xl);
  background-color: var(--color-primary);
  overflow: hidden;
  transition: transform var(--duration-micro) var(--ease-out);
}

.team-card:hover {
  transform: translateY(-4px);
}

.team-card__media img {
  width: 100%;
  aspect-ratio: 3 / 4.4;
  object-fit: cover;
  object-position: top center;
}

.team-card__caption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--space-6) var(--space-4) var(--space-5);
  /* Gradient scrim so the caption stays legible over any portrait */
  background: linear-gradient(180deg, transparent, rgba(22, 38, 12, 0.85) 55%);
  color: var(--white);
  text-align: center;
}

.team-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.team-card__role {
  font-size: var(--text-xs);
  color: var(--color-text-on-dark-muted);
}

.team__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
  text-align: end;
}

/* ==========================================================================
   Products
   ========================================================================== */

.products-hero {
  padding-block: 9rem var(--space-8);
  text-align: center;
  background-color: var(--color-bg);
  color: var(--color-text);
}

.products-hero__title {
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  text-transform: uppercase;
  color: var(--color-primary);
}

.products-hero__lead {
  margin-block: var(--space-3) var(--space-5);
  color: var(--color-text-muted);
}

/* Full-bleed collage banner (1920x546, ~3.5:1) --------------------------- */

.products-banner {
  margin-block-start: clamp(1.5rem, 4vw, 3rem);
}

.products-banner__scroll {
  width: 100%;
}

.products-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/*
  At 3.5:1 the banner collapses to roughly 105px tall on a phone, which makes
  the five photographs unreadable. Below 48rem it is held at a legible width
  and allowed to scroll sideways inside its own box — the page itself never
  scrolls horizontally, and overscroll-behavior stops the gesture leaking out
  to the document.
*/
@media (max-width: 47.99rem) {
  .products-banner__scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .products-banner__scroll::-webkit-scrollbar {
    display: none;
  }

  /* min-width, not width: the banner still fills viewports wider than 44rem
     and only overflows (and scrolls) on the narrow ones that need it. */
  .products-banner img {
    width: 100%;
    min-width: 44rem;
    max-width: none;
  }
}

/* Raw materials ----------------------------------------------------------- */

.materials {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 62rem) {
  .materials {
    grid-template-columns: 2fr 1fr;
  }
}

.materials__list {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.material-card {
  position: relative;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform var(--duration-micro) var(--ease-out),
              box-shadow var(--duration-micro) var(--ease-out);
}

.material-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.material-card__name {
  margin-block-end: var(--space-3);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
  color: var(--color-primary);
}

.material-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.material-card__check {
  position: absolute;
  inset-block-end: var(--space-3);
  inset-inline-end: var(--space-3);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--white);
}

.material-card__check .icon {
  width: 0.9rem;
  height: 0.9rem;
}

.materials__copy {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.materials__copy strong {
  color: var(--color-text);
}

/* Product grid ------------------------------------------------------------ */

.products-layout {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 62rem) {
  .products-layout {
    grid-template-columns: 14rem 1fr;
  }
}

.products-filters {
  display: grid;
  gap: var(--space-3);
}

.products-filters__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
}

.filter-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: start;
  transition:
    background-color var(--duration-micro) var(--ease-out),
    border-color var(--duration-micro) var(--ease-out),
    color var(--duration-micro) var(--ease-out);
}

.filter-btn:hover {
  border-color: var(--color-primary);
}

.filter-btn[aria-pressed="true"] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.products-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}

.product-card {
  gap: var(--space-3);
  padding: 0;
  overflow: hidden;
}

.product-card__media {
  position: relative;
  padding: var(--space-5) var(--space-4) var(--space-4);
  background-color: var(--color-surface-sunken);
  text-align: center;
}

.product-card__media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.product-card__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
  color: var(--color-primary);
}

.product-card__wrap {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.product-card__meta {
  display: inline;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding-inline: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.product-card__suitable {
  padding: 0 var(--space-4) var(--space-5);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Supply segments --------------------------------------------------------- */

.segments {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.segment {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.segment img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--duration-section) var(--ease-out);
}

.segment:hover img {
  transform: scale(1.05);
}

.segment__label {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--space-8) var(--space-4) var(--space-5);
  background: linear-gradient(180deg, transparent, rgba(22, 38, 12, 0.8));
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  text-align: center;
  text-transform: uppercase;
}

/* ==========================================================================
   Impact
   ========================================================================== */

.impact-intro {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 62rem) {
  .impact-intro {
    grid-template-columns: 1fr 1fr;
  }
}

.impact-intro__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.impact-intro__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Global footprint -------------------------------------------------------- */

.footprint {
  position: relative;
  text-align: center;
}

.footprint__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  text-transform: uppercase;
}

.footprint__lead {
  max-width: 44ch;
  margin: var(--space-3) auto 0;
  color: var(--color-text-muted);
}

.footprint__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  margin-block-start: var(--space-8);
  padding: 0;
  list-style: none;
}

.footprint__item {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  width: 7rem;
}

.footprint__flag {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--duration-micro) var(--ease-out);
}

.footprint__item:hover .footprint__flag {
  transform: translateY(-4px);
}

.footprint__flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footprint__flag--text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

.footprint__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

/* Environmental impact ---------------------------------------------------- */

.env {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 62rem) {
  .env {
    grid-template-columns: 1.1fr 1fr;
  }
}

.env__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.env__item {
  display: grid;
  gap: var(--space-2);
}

.env__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.env__caption {
  font-size: var(--text-xs);
  color: var(--color-text-on-dark-muted);
}

/* Awards ------------------------------------------------------------------ */

.awards__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(13rem, 1fr);
  gap: var(--space-4);
  overflow-x: auto;
  padding-block-end: var(--space-3);
  scrollbar-width: none;
}

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

.award-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-micro) var(--ease-out),
              box-shadow var(--duration-micro) var(--ease-out);
}

.award-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.award-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.award-card__caption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

/* Collaborations ---------------------------------------------------------- */

.mou-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.mou-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-primary);
  color: var(--white);
}

.mou-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.mou-card__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.mou-card__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.mou-card__text {
  margin-block-start: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-on-dark-muted);
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-top {
  display: grid;
  gap: var(--space-6);
  justify-content: space-between;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), auto));
  padding-block-start: 8rem;
}

.contact-block__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
  color: var(--color-primary);
}

.contact-block__body {
  margin-block-start: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: normal;
}

.contact-block__body a {
  text-decoration: none;
}

.contact-block__body a:hover {
  text-decoration: underline;
}

.contact-title {
  margin-block: var(--space-8);
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  text-align: center;
  text-transform: uppercase;
  color: var(--color-primary);
}

.contact-form {
  display: grid;
  gap: var(--space-4);
}

.contact-form__row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

.contact-form__actions {
  display: flex;
  justify-content: flex-end;
}

.contact-map {
  margin-block-start: var(--space-9);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: clamp(18rem, 40vw, 26rem);
  border: 0;
}

/* ==========================================================================
   ADA Pet Care
   Layout mirrors assets/mockups/6_Ada Cat Litter.png, including the
   decorative paw prints and dashed arcs that sit behind the content.
   ========================================================================== */

.pc-section {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 7rem);
  overflow: hidden;
}

/* Shared headings ---------------------------------------------------------- */

.pc-heading {
  font-family: var(--font-playful);
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  text-align: center;
}

/* The orange is a decorative display colour. It clears 3:1 against the cream
   page at these sizes; body copy never uses it. */
.pc-heading--orange { color: var(--orange-700); }
.pc-heading--green  { color: var(--green-600); }

.pc-pink   { color: var(--pink-650); }
.pc-orange { color: var(--orange-700); }
.pc-orange--heavy { font-weight: var(--weight-bold); }

/* Paw used as a letterform inside a heading -------------------------------- */

.pc-paw-glyph {
  display: inline-block;
  width: 0.82em;
  height: 0.82em;
  margin-inline: -0.04em;
  vertical-align: -0.08em;
  background-image: url("../images/site/petcare/paw-pink.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.pc-paw-glyph--pink   { background-image: url("../images/site/petcare/paw-pink.png"); }
.pc-paw-glyph--orange { background-image: url("../images/site/petcare/paw-orange.png"); }

.pc-paw-inline {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-inline-start: 0.25em;
  background-image: url("../images/site/petcare/paw-pink.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Decorative background paws ---------------------------------------------- */

.pc-paw {
  position: absolute;
  z-index: 0;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.pc-paw--hero-left {
  width: clamp(4rem, 8vw, 7rem);
  aspect-ratio: 1;
  inset-block-start: 26%;
  inset-inline-start: 3%;
  background-image: url("../images/site/petcare/paw-orange.png");
  transform: rotate(-16deg);
}

.pc-paw--hero-right {
  width: clamp(4rem, 8vw, 7rem);
  aspect-ratio: 1;
  inset-block-start: 12%;
  inset-inline-end: 4%;
  background-image: url("../images/site/petcare/paw-orange.png");
  transform: rotate(12deg);
}

.pc-paw--planet-left {
  width: clamp(6rem, 14vw, 13rem);
  aspect-ratio: 1;
  inset-block-start: 18%;
  inset-inline-start: -3%;
  background-image: url("../images/site/petcare/paw-pink.png");
  transform: rotate(-24deg);
}

.pc-paw--materials-left {
  width: clamp(5rem, 11vw, 10rem);
  aspect-ratio: 1;
  inset-block-start: 8%;
  inset-inline-start: -2%;
  background-image: url("../images/site/petcare/paw-orange.png");
  transform: rotate(18deg);
}

.pc-paw--materials-right {
  width: clamp(5rem, 10vw, 9rem);
  aspect-ratio: 1;
  inset-block-start: 2%;
  inset-inline-end: -2%;
  background-image: url("../images/site/petcare/paw-orange.png");
  transform: rotate(-10deg);
}

.pc-paw--beach {
  width: clamp(5rem, 12vw, 11rem);
  aspect-ratio: 1;
  inset-block-start: 30%;
  inset-inline-start: -3%;
  background-image: url("../images/site/petcare/paw-orange.png");
  transform: rotate(-14deg);
}

.pc-paw--testimonials {
  width: clamp(6rem, 13vw, 12rem);
  aspect-ratio: 1;
  inset-block-start: -4%;
  inset-inline-end: -2%;
  background-image: url("../images/site/petcare/paw-pink.png");
  transform: rotate(14deg);
}

.pc-paw--faq-left {
  width: clamp(5rem, 11vw, 10rem);
  aspect-ratio: 1;
  inset-block-end: 6%;
  inset-inline-start: -3%;
  background-image: url("../images/site/petcare/paw-orange.png");
  transform: rotate(-18deg);
}

.pc-paw--faq-right {
  width: clamp(5rem, 11vw, 10rem);
  aspect-ratio: 1;
  inset-block-start: 20%;
  inset-inline-end: -3%;
  background-image: url("../images/site/petcare/paw-orange.png");
  transform: rotate(16deg);
}

.pc-blob--planet {
  position: absolute;
  z-index: 0;
  width: clamp(6rem, 13vw, 12rem);
  aspect-ratio: 1 / 1.4;
  inset-block-start: 4%;
  inset-inline-end: -4%;
  border-radius: 50%;
  background-color: var(--pink-300);
  pointer-events: none;
}

/* Dashed arcs -------------------------------------------------------------- */

.pc-dash {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.pc-dash--why {
  width: clamp(7rem, 14vw, 13rem);
  inset-block-end: -1rem;
  inset-inline-start: 0;
  color: var(--orange-500);
}

.pc-dash--env {
  width: clamp(4rem, 7vw, 6.5rem);
  inset-block-start: 6%;
  inset-inline-start: -1.5rem;
  color: var(--pink-500);
}

.pc-dash--materials {
  width: clamp(8rem, 15vw, 14rem);
  inset-block-end: 2rem;
  inset-inline-end: 0;
  color: var(--orange-500);
}

.pc-dash--shop {
  width: clamp(6rem, 11vw, 10rem);
  inset-block-start: 22%;
  inset-inline-start: -2rem;
  color: var(--orange-500);
}

@media (max-width: 47.99rem) {
  .pc-dash,
  .pc-blob--planet {
    display: none;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.pc-hero {
  position: relative;
  padding-block: 8.5rem clamp(2rem, 5vw, 4rem);
  background-color: var(--petcare-bg);
  overflow: hidden;
}

.pc-hero__eyebrow {
  position: relative;
  z-index: 2;
  font-family: var(--font-playful);
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  color: var(--green-600);
  text-align: center;
}

/* The wordmark and the cat are layered: the cat sits in front, and the
   second line reads either side of it, as in the reference. */
.pc-hero__stage {
  position: relative;
  display: grid;
  justify-items: center;
  margin-block-start: clamp(0.5rem, 1.5vw, 1.5rem);
  /* Room for the cat to hang below the second line, as in the reference */
  padding-block-end: clamp(1rem, 5vw, 4.5rem);
}

.pc-hero__title {
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  gap: 0.06em;
  margin: 0;
  font-family: var(--font-playful);
  /* Cap matches the reference, where the wordmark is ~200px on a 1920 canvas.
     A lower cap let the cat outgrow the type on wide screens. */
  font-size: clamp(3.25rem, 11.5vw, 13rem);
  font-weight: var(--weight-semibold);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--pink-650);
  text-align: center;
  text-transform: none;
}

/* Measured off the reference: the visible cat is 724px of the 1920px canvas,
   i.e. ~38% of the page width. The supplied artwork is trimmed to the cat
   itself, so this value is the cat, not a padded frame. */
.pc-hero__cat {
  grid-area: 1 / 1;
  z-index: 2;
  width: clamp(9rem, 38vw, 44rem);
  align-self: end;
  margin-block-end: clamp(-2.5rem, -3.5vw, -0.75rem);
}

.pc-hero__cat img {
  width: 100%;
  height: auto;
}

.pc-hero__tagline {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: clamp(0.5rem, 2vw, 1.5rem);
  font-family: var(--font-playful);
  font-size: clamp(0.95rem, 1.5vw, 1.3rem);
  color: var(--green-600);
}

@media (max-width: 47.99rem) {
  .pc-hero__tagline {
    justify-content: center;
    text-align: center;
  }
}

/* ==========================================================================
   Brand video
   ========================================================================== */

/* A vertical Short in a 16:9 panel: shown whole over a blurred copy of itself,
   the same treatment as the testimonial cards, rather than cropped to fit. */
.pc-video__frame {
  position: relative;
  display: grid;
  place-items: center;
  margin-block-start: clamp(1.5rem, 4vw, 3rem);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-2xl);
  background-color: #fff4f7;
  overflow: hidden;
  cursor: pointer;
}

.no-js .pc-video__frame {
  cursor: default;
}

.pc-video__backdrop,
.pc-video__poster {
  position: absolute;
  inset: 0;
  margin: auto;
}

.pc-video__backdrop {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Scaled up so the blur's soft edge never shows against the panel. */
  transform: scale(1.1);
  filter: blur(1.5rem) brightness(0.78) saturate(1.1);
}

.pc-video__poster {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.pc-video__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--pink-700);
  box-shadow: var(--shadow-md);
  transform: translate(-50%, -50%);
  transition:
    transform var(--duration-micro) var(--ease-out),
    background-color var(--duration-micro) var(--ease-out);
}

.pc-video__play .icon {
  width: 1.35rem;
  height: 1.35rem;
  /* The glyph's visual mass sits left of centre; nudge it back. */
  margin-inline-start: 0.15rem;
  fill: currentColor;
  stroke: none;
}

.pc-video__frame:hover .pc-video__play {
  background-color: var(--white);
  transform: translate(-50%, -50%) scale(1.08);
}

@media (min-width: 48rem) {
  .pc-video__play {
    width: 4.5rem;
    height: 4.5rem;
  }

  .pc-video__play .icon {
    width: 1.75rem;
    height: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-video__play {
    transition: none;
  }

  .pc-video__frame:hover .pc-video__play {
    transform: translate(-50%, -50%);
  }
}

/* ==========================================================================
   Protect our planet
   ========================================================================== */

.pc-planet__title {
  position: relative;
  z-index: 1;
  text-align: end;
}

@media (max-width: 61.99rem) {
  .pc-planet__title {
    text-align: center;
  }
}

.pc-planet__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  margin-block-start: clamp(1rem, 3vw, 2rem);
}

@media (min-width: 62rem) {
  .pc-planet__grid {
    grid-template-columns: 1fr auto 1fr;
  }
}

.pc-planet__media {
  width: clamp(14rem, 32vw, 26rem);
  margin-inline: auto;
}

.pc-planet__copy {
  max-width: 26ch;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--green-600);
}

.pc-planet__copy strong {
  font-weight: var(--weight-bold);
}

.pc-planet__copy--left  { justify-self: start; }
.pc-planet__copy--right { justify-self: end; text-align: end; }

@media (max-width: 61.99rem) {
  .pc-planet__copy {
    max-width: 42ch;
    margin-inline: auto;
    text-align: center;
  }
  .pc-planet__copy--left,
  .pc-planet__copy--right {
    justify-self: center;
    text-align: center;
  }
}

/* ==========================================================================
   Why ADA Cat Litter
   ========================================================================== */

.pc-why__head {
  position: relative;
  display: grid;
  gap: var(--space-5);
  align-items: end;
}

@media (min-width: 62rem) {
  .pc-why__head {
    grid-template-columns: 1fr 0.85fr;
  }
}

.pc-why__title {
  display: grid;
  justify-items: start;
  gap: 0.02em;
  margin: 0;
  font-family: var(--font-playful);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-transform: none;
}

/* Stepped indents as a share of the heading width, matching the reference:
   "Why" sits in ~7%, "Litter?" in ~48%. An em-based indent was far too small
   and let the dashed loop collide with "Litter?". */
.pc-why__word-1 { color: var(--orange-700); margin-inline-start: 7%; }
.pc-why__word-2 { color: var(--pink-650); }
.pc-why__word-3 { color: var(--orange-700); margin-inline-start: 48%; }

.pc-why__cat {
  justify-self: end;
  /* 9rem floor: a 12rem minimum left the cat at ~51% of a 375px screen */
  width: clamp(9rem, 30vw, 24rem);
}

/*
  Desktop: the magnifier cat is large and runs off the right edge of the page.
  Measured on the reference it is ~40% of the canvas wide *after* being cut by
  the page edge, so it is drawn at 50vw and pushed 9vw past the edge, where
  .pc-section's overflow:hidden clips it.

  The margin carries it from the container's right edge out to the viewport's:
  (100vw - container max-width) / 2 is the gap on one side, plus the gutter.
  min(0px, …) keeps it correct once the viewport is narrower than the container.
*/
@media (min-width: 62rem) {
  .pc-why__cat {
    /*
      Sized by HEIGHT, not visible width. The reference cat is 866px tall on a
      1920 canvas (45%); its visible width is only 766px because the page edge
      crops it. Our asset is a different shape (0.955 w/h), so matching the
      visible width alone made it ~16% too tall. 43vw gives the right height,
      and a 3vw bleed trims it back to the reference's visible width.
    */
    width: 43vw;
    max-width: none;
    margin-inline-end: calc(
      min(0px, (100vw - var(--container-wide)) / -2) - var(--gutter) - 3vw
    );
    /* Laps the pink panel, as the fur does in the reference. -1vw still left
       a 5-11px sliver of page background above the panel at ≥1280. */
    /* margin-block-end: -2.5vw; */
    margin-block-end: -0.0vw;
    z-index: 2;
  }
}

@media (max-width: 61.99rem) {
  .pc-why__title { justify-items: center; text-align: center; }
  .pc-why__word-3 { margin-inline-start: 0; }
  .pc-why__cat { justify-self: center; }
}

/*
  The pink panels are near full-bleed in the reference — 98.1% of the canvas,
  inset ~2vw on the left and running to the right edge — not boxed inside the
  1400px container. This breaks them out of it.
*/
.pc-why__panel,
.pc-materials__panel {
  --bleed-inset: 2vw;
}

@media (min-width: 48rem) {
  .pc-why__panel,
  .pc-materials__panel {
    width: calc(100vw - var(--bleed-inset));
    margin-inline-start: calc(50% - 50vw + var(--bleed-inset));
    margin-inline-end: 0;
  }
}

.pc-why__panel {
  position: relative;
  z-index: 1;
  margin-block: clamp(1.5rem, 4vw, 3rem) 0;
}

/*
  On desktop the cat should meet the pink panel. The top margin here was
  leaving a band of page background between the two — the "white gap" — so it
  is removed and the cat's negative bottom margin laps it slightly instead,
  matching the reference where the fur overlaps the panel by ~20px.
*/
@media (min-width: 62rem) {
  .pc-why__panel {
    margin-block-start: 0;
  }
}

.pc-why__panel img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-2xl);
}

.pc-why__caption {
  margin-block-start: var(--space-4);
  font-size: clamp(0.9rem, 1.3vw, 1.05rem);
  color: var(--green-600);
  text-align: center;
}

/* ==========================================================================
   Feature cards
   ========================================================================== */

/* Product slider — finished artwork panels in the shared carousel */

.pc-slide {
  margin: 0;
}

.pc-slide img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
}

/* The pink theme makes the default carousel buttons low-contrast */
.theme-petcare .carousel__btn {
  border-color: var(--pink-300);
  background-color: var(--white);
  color: var(--color-primary);
}

.theme-petcare .carousel__btn:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}

/* ==========================================================================
   Benefits to the environment
   ========================================================================== */

.pc-env__head {
  position: relative;
  display: grid;
  justify-items: center;
}

/*
  The cat deliberately overlaps this heading, so the heading has to be wider
  and larger than the cat or it disappears behind it. In the reference the
  first line runs to ~73% of the canvas at roughly 6.3vw; a 14ch / 4.6vw cap
  made it narrower than the cat, which hid the text completely.
*/
.pc-env__title {
  grid-area: 1 / 1;
  max-width: 20ch;
  font-size: clamp(2rem, 6.3vw, 7.5rem);
  margin: 0;
}

/* The cat overlaps the wordmark, exactly as in the reference, where it is
   ~37% of the canvas wide (712x726 measured) — not the 14% it was before. */
.pc-env__cat {
  grid-area: 1 / 1;
  z-index: 2;
  width: clamp(9rem, 37vw, 46rem);
  align-self: center;
}

/*
  Without this the image stops at its intrinsic width while the container
  keeps growing, so the cat shrank relative to the page above ~1440.
*/
.pc-env__cat img,
.pc-why__cat img {
  width: 70%;
  height: auto;
}

.pc-env .carousel {
  margin-block-start: clamp(2rem, 5vw, 4rem);
}

/* Four benefits: two per view on tablet, four across on desktop */
@media (min-width: 48rem) {
  .pc-env .carousel__viewport {
    grid-auto-columns: calc((100% - var(--space-5)) / 2);
  }
}

@media (min-width: 64rem) {
  .pc-env .carousel__viewport {
    grid-auto-columns: calc((100% - var(--space-5) * 3) / 4);
  }
}

.pc-env-card {
  height: 100%;
  display: grid;
  justify-items: center;
  /* labels sit on a common baseline even when one wraps to two lines */
  align-content: space-between;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-2xl);
  background-color: var(--pink-500);
  transition: transform var(--duration-micro) var(--ease-out),
              box-shadow var(--duration-micro) var(--ease-out);
}

.pc-env-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/*
  No disc is drawn here: the supplied icon IS an orange disc, with its line art
  knocked out and refilled white. Putting it on another orange circle was what
  made the lines invisible.
*/
.pc-env-card__icon {
  display: grid;
  place-items: center;
  width: clamp(7rem, 15vw, 10rem);
  aspect-ratio: 1;
}

.pc-env-card__icon img {
  width: 100%;
  height: auto;
}

/* Keeps the mockup's bright orange pill; the label takes the deep plum ink
   instead of white, which lifts it from 2.1:1 to 6.5:1. */
.pc-env-card__label {
  padding: 0.6em 1.4em;
  border-radius: var(--radius-lg);
  background-color: var(--orange-500);
  color: var(--color-text);
  font-family: var(--font-playful);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: var(--weight-semibold);
  text-align: center;
}

/* ==========================================================================
   Natural materials
   ========================================================================== */

.pc-materials__copy {
  max-width: 54ch;
  margin: clamp(1rem, 2.5vw, 1.75rem) auto 0;
  color: var(--green-600);
  text-align: center;
}

.pc-materials__panel {
  position: relative;
  z-index: 1;
  margin-block-start: clamp(1.5rem, 4vw, 3rem);
}

.pc-materials__panel img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-2xl);
}

/* ==========================================================================
   Cat Beach Sanctuary
   ========================================================================== */

.pc-beach__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .pc-beach__grid {
    grid-template-columns: 0.8fr 1fr;
  }
}

.pc-beach__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
}

.pc-beach__title {
  margin: 0;
  font-family: var(--font-playful);
  font-size: clamp(2.25rem, 5.5vw, 4.25rem);
  font-weight: var(--weight-semibold);
  line-height: 1.02;
  color: var(--pink-650);
  text-align: end;
  text-transform: none;
}

.pc-beach__copy {
  margin-block-start: var(--space-5);
  color: var(--green-600);
  text-align: end;
}

@media (max-width: 61.99rem) {
  .pc-beach__title,
  .pc-beach__copy {
    text-align: center;
  }
}

/* ==========================================================================
   Where to buy
   ========================================================================== */

.pc-shop__head {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

@media (min-width: 62rem) {
  .pc-shop__head {
    grid-template-columns: 1fr 0.8fr;
  }
}

.pc-shop__title {
  display: grid;
  justify-items: start;
  gap: 0.04em;
  margin: 0;
  font-family: var(--font-playful);
  font-size: clamp(2rem, 5.2vw, 4rem);
  font-weight: var(--weight-semibold);
  line-height: 1.05;
  text-transform: none;
}

.pc-shop__title > span:nth-child(2) { margin-inline-start: 1.2em; }

.pc-shop__cat {
  justify-self: end;
  width: clamp(12rem, 28vw, 22rem);
}

@media (max-width: 61.99rem) {
  .pc-shop__title { justify-items: center; text-align: center; }
  .pc-shop__title > span:nth-child(2) { margin-inline-start: 0; }
  .pc-shop__cat { justify-self: center; }
}

.pc-shop__label {
  margin-block: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 3vw, 2rem);
  font-family: var(--font-playful);
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
  font-weight: var(--weight-regular);
  color: var(--green-600);
  text-align: center;
}

.pc-shop__or {
  margin-block-start: clamp(2rem, 5vw, 3.5rem);
  font-family: var(--font-playful);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--weight-semibold);
  color: var(--green-600);
  text-align: center;
}

.pc-shop__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pc-tile {
  display: grid;
  place-items: center;
  gap: var(--space-3);
  width: clamp(7rem, 15vw, 12.5rem);
  aspect-ratio: 1;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  border-radius: var(--radius-xl);
  transition: transform var(--duration-micro) var(--ease-out),
              box-shadow var(--duration-micro) var(--ease-out);
}

.pc-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.pc-tile--orange { background-color: var(--orange-500); }
.pc-tile--pink   { background-color: var(--pink-500); }

.pc-tile img {
  width: auto;
  max-width: 78%;
  max-height: 55%;
  object-fit: contain;
}

.pc-tile--pink img {
  max-width: 88%;
  max-height: 78%;
}

/* Same reasoning as the env-card label: bright orange tile retained, ink
   darkened from white (2.1:1) to the deep plum (6.5:1). */
.pc-tile__label {
  font-family: var(--font-playful);
  font-size: clamp(0.85rem, 1.3vw, 1.05rem);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-align: center;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.pc-testimonials__grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

/* Each card keeps the portrait shape of the original layout, but the videos
   are a mix of vertical Shorts and one landscape upload. Rather than crop them
   to match, each frame is shown whole over a blurred copy of itself, so the
   letterboxing reads as deliberate and nothing is cut out of shot. */
.pc-testimonial__link {
  position: relative;
  display: block;
  aspect-ratio: 545 / 760;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--color-surface-sunken);
  transition: transform var(--duration-micro) var(--ease-out);
}

.pc-testimonial__link:hover {
  transform: translateY(-4px);
}

.pc-testimonial__backdrop,
.pc-testimonial__poster {
  position: absolute;
  inset: 0;
  margin: auto;
}

.pc-testimonial__backdrop {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Scaled up so the blur's soft edge never shows against the card. */
  transform: scale(1.1);
  filter: blur(1.25rem) brightness(0.8) saturate(1.1);
}

.pc-testimonial__poster {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.pc-testimonial__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translate(-50%, -50%);
  transition:
    transform var(--duration-micro) var(--ease-out),
    background-color var(--duration-micro) var(--ease-out);
}

.pc-testimonial__play .icon {
  width: 1.35rem;
  height: 1.35rem;
  /* The glyph's visual mass sits left of centre; nudge it back. */
  margin-inline-start: 0.15rem;
  fill: currentColor;
  stroke: none;
}

.pc-testimonial__link:hover .pc-testimonial__play {
  background-color: var(--white);
  transform: translate(-50%, -50%) scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .pc-testimonial__link,
  .pc-testimonial__play {
    transition: none;
  }

  .pc-testimonial__link:hover {
    transform: none;
  }

  .pc-testimonial__link:hover .pc-testimonial__play {
    transform: translate(-50%, -50%);
  }
}

/* ==========================================================================
   Meowny questions
   ========================================================================== */

.pc-faq .accordion {
  position: relative;
  z-index: 1;
  margin-block-start: clamp(2rem, 5vw, 3.5rem);
}

/* Petcare accordion inherits the shared component but takes the pink skin */
.theme-petcare .accordion__item {
  background-color: var(--pink-500);
  color: var(--color-text);
}

.theme-petcare .accordion__trigger:hover {
  background-color: var(--pink-400);
}

.theme-petcare .accordion__content {
  color: #4a2830;
}

.theme-petcare .cta-banner,
.theme-petcare .site-footer {
  background-color: var(--pink-500);
}

/* White on --pink-500 is only 2.0:1. The soft pink panel is kept and the type
   switches to the deep plum ink instead, which measures 6.9:1. */
.theme-petcare .cta-banner__title,
.theme-petcare .footer-wordmark {
  color: var(--color-text);
}

.theme-petcare .footer-nav a {
  color: var(--color-text);
}

.theme-petcare .social-link {
  color: var(--color-primary);
}

.theme-petcare .site-footer__legal {
  color: #5a333d;
}

/* ==========================================================================
   404
   ========================================================================== */

.error-page {
  display: grid;
  place-items: center;
  gap: var(--space-5);
  min-height: 70dvh;
  padding-block: 9rem var(--space-9);
  text-align: center;
}

.error-page__code {
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  color: var(--color-primary);
}