/* ==========================================================================
   Pet Care by Lindsay — home page
   Hand-authored stylesheet (the Vite/Tailwind build is not runnable on this
   server). Translated from the Links Web Design mockup, "variant 5" (teal)
   palette. The mockup is a fixed 1920px canvas: every token below resolves to
   the mockup's pinned value at 1920px wide and scales down proportionally
   (vw-based clamps) on narrower screens, then stacks on tablet / mobile.
   Enqueued directly from app/setup.php.
   ========================================================================== */

:root {
  /* --- palette (mockup variant 5 / teal) --- */
  --pcl-blossom: #1F6B63;        /* primary brand (teal) */
  --pcl-blossom-deep: #3E9B8F;   /* hover / pressed */
  --pcl-rose: #D9779B;           /* decorative pink */
  --pcl-rose-ink: #D15B86;       /* pink text: 3.5:1 on cream, 3.1:1 on shell (large-text AA) */
  --pcl-rose-pale: #E7B6C6;      /* oversized quote marks */
  --pcl-rose-mist: #FAE6D6;      /* peach wash */
  --pcl-apricot: #FAE6D6;
  --pcl-apricot-soft: #FAE6D6;
  --pcl-taupe: #B4A49E;
  --pcl-taupe-soft: #EBE3DF;
  --pcl-plum: #3A2230;           /* headings / body ink */
  --pcl-mocha: #6E5A63;          /* muted text */
  --pcl-cream: #FDF4EE;          /* page ground */
  --pcl-shell: #F6E2E8;          /* blush band */
  --pcl-white: #FFFBF8;
  --pcl-alt-cta-bg: #FAE6D6;
  --pcl-alt-cta-fg: #3A2230;

  --text-primary: var(--pcl-plum);
  --text-muted: var(--pcl-mocha);
  --border-hairline: rgba(75,58,68,.10);
  --border-soft: rgba(75,58,68,.16);
  --focus-ring: var(--pcl-blossom-deep);

  /* --- type (mockup 1920 values: 92 / 76 / 22) --- */
  --font-display: "Baloo 2","Trebuchet MS",sans-serif;
  --font-body: "Nunito","Segoe UI",sans-serif;

  --fs-display-1: clamp(40px,4.7917vw,92px);
  --fs-display-2: clamp(34px,3.9584vw,76px);
  --fs-lead: clamp(17px,1.1459vw,22px);
  --fs-body: 17px;

  --ls-display: -0.01em;
  --ls-heading: -0.005em;
  --ls-label: 0.14em;
  --lh-heading: 1.14;
  --lh-body: 1.7;

  /* --- layout (mockup 1920 values: 195px gutter, 1920 canvas) --- */
  --gutter: clamp(20px,10.1563vw,195px);
  --content-max: 1920px;
  --grid-gap: 24px;
  --section-y: clamp(64px,8vw,153.6px);
  --section-y-tight: clamp(48px,5vw,96px);

  /* header: 17 + 118 logo + 24 = 159px at 1920 */
  --pcl-logo-h: clamp(64px,6.1459vw,118px);
  --pcl-header-h: calc(var(--pcl-logo-h) + 41px);

  /* decorative paws: 352px / 240px at 1920 */
  --paw-lg: clamp(150px,18.3334vw,352px);
  --paw-sm: clamp(110px,12.5vw,240px);

  /* --- shape / motion --- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --shadow-soft: 0 10px 28px rgba(75,58,68,.09);
  --shadow-card: 0 16px 40px rgba(75,58,68,.10);
  --shadow-lift: 0 22px 48px rgba(75,58,68,.16);
  --ease-out: cubic-bezier(.22,.9,.32,1);
  --ease-soft: cubic-bezier(.45,0,.25,1);
  --dur-fast: 160ms;
  --dur-base: 340ms;
  --dur-slow: 760ms;

  --texture-dots: radial-gradient(circle at center,var(--pcl-rose) 2px,transparent 2.5px);
  --texture-dots-size: 26px 26px;
  --paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Cpath d='M50 42c11 0 20 8 25 16 4 6 11 11 11 19 0 9-8 15-17 15-7 0-12-3-19-3s-12 3-19 3c-9 0-17-6-17-15 0-8 7-13 11-19 5-8 14-16 25-16z'/%3E%3Cellipse cx='31' cy='23' rx='11' ry='15' transform='rotate(-14 31 23)'/%3E%3Cellipse cx='63' cy='21' rx='11' ry='15' transform='rotate(12 63 21)'/%3E%3Cellipse cx='12' cy='49' rx='10' ry='13' transform='rotate(-32 12 49)'/%3E%3Cellipse cx='87' cy='47' rx='10' ry='13' transform='rotate(30 87 47)'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- base ---- */
.pcl *,
.pcl *::before,
.pcl *::after { box-sizing: border-box; }

.pcl {
  background: var(--pcl-cream);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: clip;
}
.pcl h1, .pcl h2, .pcl h3, .pcl h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--pcl-plum);
  margin: 0;
}
.pcl p { margin: 0; }
.pcl a:not(.pcl-btn) { color: var(--pcl-mocha); text-decoration: none; text-underline-offset: 3px; transition: color .2s ease; }
.pcl a:not(.pcl-btn):hover { color: var(--pcl-blossom); text-decoration: underline; }
.pcl img { max-width: 100%; }
.pcl :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.pcl .accent { color: var(--pcl-rose-ink); }

.pcl-container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.pcl-two {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: var(--grid-gap);
}

/* reveal-on-scroll */
.pcl [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.pcl [data-reveal].in { opacity: 1; transform: none; }

/* floating decorative paws */
@keyframes pcl-float { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-64px,0); } }
@keyframes pcl-paw-drift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(0,-26px,0) scale(1.04); } 100% { transform: translate3d(0,0,0) scale(1); } }
.pcl-float {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  animation: pcl-float 9s ease-in-out infinite;
  will-change: transform;
}
.pcl-float-b { animation-duration: 12.5s; animation-delay: -3.5s; }
.pcl-float-c { animation-duration: 15s; animation-delay: -7s; }

.pcl-paw {
  position: absolute;
  width: var(--paw-lg);
  height: var(--paw-lg);
  pointer-events: none;
  z-index: 0;
  background: var(--pcl-rose);
  -webkit-mask: var(--paw) center/contain no-repeat;
  mask: var(--paw) center/contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .pcl [data-reveal] { opacity: 1; transform: none; }
  .pcl-float,
  .pcl-service::before, .pcl-service::after,
  .pcl-testimonials::after, .pcl-faq::after { animation: none !important; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.pcl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .01em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) linear,
              color var(--dur-fast) linear,
              border-color var(--dur-fast) linear;
}
.pcl-btn:hover { text-decoration: none; transform: translateY(-3px); }
.pcl-btn__arrow { transition: transform var(--dur-fast) var(--ease-out); }
.pcl-btn:hover .pcl-btn__arrow { transform: translateX(4px); }

.pcl-btn--sm { padding: 11px 20px; font-size: 14px; }
.pcl-btn--md { padding: 15px 28px; font-size: 16px; }
.pcl-btn--lg { padding: 19px 36px; font-size: 17px; }

.pcl-btn--primary,
.pcl-btn--primary:hover { color: var(--pcl-white); }
.pcl-btn--primary { background: var(--pcl-blossom); }
.pcl-btn--primary:hover { background: var(--pcl-blossom-deep); }

.pcl-btn--secondary,
.pcl-btn--secondary:hover {
  background: var(--pcl-alt-cta-bg);
  color: var(--pcl-alt-cta-fg);
  border-color: var(--pcl-alt-cta-bg);
}

.pcl-btn--onDark { background: var(--pcl-cream); color: var(--pcl-plum); }
.pcl-btn--onDark:hover { background: var(--pcl-white); color: var(--pcl-plum); }

/* ==========================================================================
   Skip link — off-screen until keyboard focus, then a pill over the header
   ========================================================================== */
.pcl-skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--pcl-blossom);
  color: var(--pcl-white);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(58,34,48,.22);
  transform: translateY(calc(-100% - 24px));
  transition: transform .2s ease;
}
.pcl-skip-link:focus,
.pcl-skip-link:focus-visible {
  transform: none;
  color: var(--pcl-white);
  text-decoration: none;
  outline: 2px solid var(--pcl-plum);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .pcl-skip-link { transition: none; }
}
.pcl-skip-target:focus { outline: none; }

/* ==========================================================================
   Alert banner (Options → Alert Banner) — sits above the header
   ========================================================================== */
.pcl-alert-banner, .pcl-alert-banner * { box-sizing: border-box; }
.pcl-alert-banner {
  position: relative;
  z-index: 41;
  background: var(--pcl-blossom);
  color: var(--pcl-white);
  font-family: var(--font-body);
  font-size: clamp(15px,0.9375vw,18px);
  line-height: 1.5;
  text-align: center;
}
.pcl-alert-banner__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 12px var(--gutter);
}
.pcl-alert-banner__inner > * { margin: 0; }
.pcl-alert-banner__inner > * + * { margin-top: .5em; }
.pcl-alert-banner a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pcl-alert-banner a:hover { color: var(--pcl-rose-mist); }
.pcl-alert-banner :focus-visible { outline: 2px solid var(--pcl-white); outline-offset: 3px; }

/* ==========================================================================
   Header (SiteNav) — 159px tall at 1920
   ========================================================================== */
.pcl-header, .pcl-header *,
.pcl-footer, .pcl-footer *,
.pcl-btn, .pcl-btn * { box-sizing: border-box; }
.pcl-header, .pcl-footer { font-family: var(--font-body); color: var(--pcl-plum); line-height: 1.7; }

.pcl-header {
  position: relative;
  z-index: 40;
  background: linear-gradient(rgba(255,255,255,.25),rgba(255,255,255,.25)), var(--pcl-cream);
  backdrop-filter: blur(10px);
}
.pcl-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 17px var(--gutter) 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.pcl-header__logo { display: block; line-height: 0; flex-shrink: 0; }
.pcl-header__logo img { height: var(--pcl-logo-h); width: auto; max-width: none; display: block; }
.pcl-header__right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.pcl-header__row {
  --row-gap: clamp(24px,2.8125vw,54px);
  display: flex; align-items: center; gap: var(--row-gap); justify-content: flex-end;
}
.pcl-header__services { --row-gap: clamp(8px,calc(5.5556vw - 58.667px),48px); flex-wrap: wrap; align-self: stretch; }
.pcl-header__link {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.7;
  color: var(--pcl-plum);
  text-decoration: none;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background var(--dur-fast) linear, color var(--dur-fast) linear;
}
.pcl-header__link:hover { background: var(--pcl-rose-mist); color: var(--pcl-blossom-deep); }
.pcl-header__phone:hover { background: none; color: var(--pcl-plum); }
.pcl-header__link.is-current { color: var(--pcl-blossom); }
/* services row: gap 48 / padding 16 at 1920, tapering to 8 / 6 at 1200 so all 7 links stay on one line */
.pcl-header__services .pcl-header__link { padding-inline: clamp(6px,calc(1.3889vw - 10.667px),16px); }
@media (max-width: 1439px) { .pcl-header__services .pcl-header__link { font-size: 15px; } }
.pcl-header__sep {
  width: 1px; align-self: stretch; min-height: 34px;
  background: rgba(216,145,167,.34);
  margin-inline: calc(var(--row-gap) / -2);
}
.pcl-header__row .pcl-btn { margin-left: 14px; }

/* sub-menus — a parent item with children is a click-to-open disclosure (home.js) */
.pcl-sub { position: relative; }
.pcl-sub__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; margin: 0; cursor: pointer; text-align: left;
}
.pcl-sub__chev {
  width: 7px; height: 7px; flex-shrink: 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast) linear;
}
.pcl-sub[data-open="true"] .pcl-sub__chev { transform: translateY(2px) rotate(-135deg); }
.pcl-sub[data-open="true"] > .pcl-header__link { background: var(--pcl-rose-mist); color: var(--pcl-blossom-deep); }
.pcl-header .pcl-sub__menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 50;
  min-width: 240px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px;
  background: var(--pcl-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) linear, transform var(--dur-fast) ease, visibility 0s linear var(--dur-fast);
}
.pcl-header .pcl-sub[data-open="true"] .pcl-sub__menu {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--dur-fast) linear, transform var(--dur-fast) ease;
}
.pcl-header .pcl-sub__link {
  font-weight: 700; font-size: 16px; line-height: 1.7;
  color: var(--pcl-plum); text-decoration: none; white-space: nowrap;
  padding: 9px 16px; border-radius: var(--radius-pill);
  transition: background var(--dur-fast) linear, color var(--dur-fast) linear;
}
.pcl-header .pcl-sub__link:hover { background: var(--pcl-rose-mist); color: var(--pcl-blossom-deep); }
.pcl-header .pcl-sub__link.is-current { color: var(--pcl-blossom); }

.pcl-burger {
  display: none;
  background: var(--pcl-rose-mist);
  border: none;
  width: 52px; height: 52px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pcl-burger span { width: 20px; height: 2px; border-radius: 2px; background: var(--pcl-plum); }

/* below 1200: phone number stacked above the burger */
.pcl-header__mobile { display: none; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.pcl-header__mobile-phone {
  font-family: var(--font-body); font-weight: 700; font-size: 15px; line-height: 1.2;
  color: var(--pcl-plum); text-decoration: none; white-space: nowrap;
}
.pcl-header__mobile-phone:hover { color: var(--pcl-plum); } /* phone numbers have no hover */

/* mobile drawer — slide-in sidebar from the right */
.pcl-drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; pointer-events: none; transition: visibility 0s linear .32s; }
.pcl-drawer[hidden] { display: none; }
.pcl-drawer[data-open="true"] { visibility: visible; pointer-events: auto; transition: none; }
.pcl-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(58,32,48,.45);
  opacity: 0; transition: opacity .32s ease;
}
.pcl-drawer[data-open="true"] .pcl-drawer__backdrop { opacity: 1; }
.pcl-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(400px, 86vw);
  display: flex; flex-direction: column;
  background: var(--pcl-cream);
  color: var(--pcl-plum);
  font-family: var(--font-body);
  padding: 20px;
  box-shadow: -12px 0 40px rgba(58,32,48,.18);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pcl-drawer[data-open="true"] .pcl-drawer__panel { transform: none; }
.pcl-drawer__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.pcl-drawer__logo { display: block; flex-shrink: 1; min-width: 0; }
.pcl-drawer__top img { display: block; height: 64px; width: auto; max-width: 100%; object-fit: contain; border-radius: var(--radius-sm); }
.pcl-drawer__close {
  background: var(--pcl-white); border: none; width: 48px; height: 48px; flex-shrink: 0; color: var(--pcl-plum);
  border-radius: var(--radius-pill); font-size: 22px; line-height: 1; box-shadow: var(--shadow-soft); cursor: pointer;
}
.pcl-drawer__nav { display: flex; flex-direction: column; gap: 2px; margin-top: 24px; }
.pcl-drawer__nav a {
  border-radius: var(--radius-pill);
  padding: 9px 16px; color: var(--pcl-plum); font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 1.7;
  text-decoration: none;
  transition: background var(--dur-fast) linear, color var(--dur-fast) linear;
}
.pcl-drawer__nav a:hover { background: var(--pcl-rose-mist); color: var(--pcl-blossom-deep); }
.pcl-drawer__nav a.is-current { color: var(--pcl-blossom); }
.pcl-drawer__nav .pcl-sub__toggle {
  width: 100%; justify-content: space-between;
  border-radius: var(--radius-pill);
  padding: 9px 16px; color: var(--pcl-plum); font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 1.7;
  transition: background var(--dur-fast) linear, color var(--dur-fast) linear;
}
.pcl-drawer__nav .pcl-sub__toggle:hover { background: var(--pcl-rose-mist); color: var(--pcl-blossom-deep); }
.pcl-drawer__nav .pcl-sub__toggle.is-current { color: var(--pcl-blossom); }
.pcl-drawer__nav .pcl-sub__menu { display: none; flex-direction: column; gap: 2px; padding: 2px 0 4px 16px; }
.pcl-drawer__nav .pcl-sub[data-open="true"] .pcl-sub__menu { display: flex; }
.pcl-drawer__nav .pcl-sub__link { font-weight: 600; }
.pcl-drawer__foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 24px; }
.pcl-drawer__foot .pcl-btn {
  width: 100%; justify-content: space-between; padding: 14px 22px;
  font-size: 16px; line-height: 1.35; text-align: left; white-space: normal;
}
.pcl-drawer__foot .pcl-btn__arrow { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  .pcl-drawer, .pcl-drawer__backdrop, .pcl-drawer__panel { transition: none; }
}
@media (max-width: 1199px) {
  .pcl-header__right { display: none; }
  .pcl-header__mobile { display: flex; }
  .pcl-burger { display: flex; }
}
@media (min-width: 1200px) {
  .pcl-drawer { display: none; }
}

/* ==========================================================================
   Shared section helpers
   ========================================================================== */
.pcl-section { position: relative; }
.pcl-section__body { max-width: var(--content-max); margin: 0 auto; padding: var(--section-y) var(--gutter); position: relative; z-index: 2; }
.pcl-dots { position: absolute; inset: 0; background: var(--texture-dots); background-size: var(--texture-dots-size); opacity: .22; pointer-events: none; z-index: 0; }

.pcl-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--pcl-rose-mist); color: var(--pcl-blossom); /* brand teal: 5.4:1 on the peach wash (blossom-deep was 2.75:1) */
  border-radius: var(--radius-pill); padding: 9px 18px;
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.pcl-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--pcl-blossom); }

/* Stamp badge — 216px (hero) / 200px (contact) at 1920 */
.pcl-stamp {
  --stamp: clamp(136px,11.25vw,216px);
  position: absolute; z-index: 2;
  width: var(--stamp); height: var(--stamp);
  display: grid; place-items: center; text-align: center;
  border-radius: var(--radius-pill);
  background: var(--pcl-alt-cta-bg); color: var(--pcl-alt-cta-fg);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-display); font-weight: 700; line-height: 1.2;
  /* 18px at full size (mockup), easing to 11px as the stamp shrinks so the text keeps fitting */
  padding: clamp(11px, calc(11px + (var(--stamp) - 136px) * .1094), 18px); transform: rotate(-8deg);
}
.pcl-stamp__title { font-size: clamp(17px,1.4584vw,28px); }
.pcl-stamp__sub {
  font-family: var(--font-body); font-weight: 700; font-size: clamp(9.5px,.625vw,12px);
  opacity: .72; margin-top: 8px; letter-spacing: .14em; text-transform: uppercase;
}

/* Arch-topped photo */
.pcl-photo-rounded {
  display: block; width: 100%; object-fit: cover;
  border-radius: 260px 260px var(--radius-xl) var(--radius-xl);
  box-shadow: var(--shadow-lift); position: relative; z-index: 1;
}

/* Big 3-line headline shared by the hero h1 and the contact h2 */
.pcl-hero h1,
.pcl-cta h2 {
  font-size: var(--fs-display-1); font-weight: 900; letter-spacing: var(--ls-display);
  line-height: .92; white-space: nowrap; margin: 0;
}
.pcl-hero h1 .accent,
.pcl-cta h2 .accent { color: var(--pcl-rose-ink); }
.pcl-hero h1 .accent:last-child,
.pcl-cta h2 .accent:last-child { display: inline-block; margin-top: -9px; }

/* ==========================================================================
   Hero — header + hero = 1080px at 1920
   ========================================================================== */
.pcl-hero { background: var(--pcl-cream); color: var(--pcl-plum); overflow-x: clip; z-index: 1; }
.pcl-hero__body {
  max-width: var(--content-max); margin: 0 auto;
  padding: 48px var(--gutter);
  height: calc(56.25vw - var(--pcl-header-h));   /* 1080 - 159 = 921px at 1920 */
  max-height: 921px;
  min-height: 560px;
  position: relative; z-index: 2;
}
.pcl-hero__grid {
  display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--grid-gap);
  align-items: stretch; height: 100%;
}
.pcl-hero__text { grid-column: 1 / span 6; align-self: center; }
.pcl-hero__media { grid-column: 8 / span 5; display: flex; justify-content: center; min-width: 0; min-height: 0; height: 100%; }
.pcl-hero__frame { position: relative; width: 100%; height: 100%; }
.pcl .pcl-hero__lead { font-size: var(--fs-lead); line-height: 1.6; max-width: 39ch; margin-top: 26px; color: var(--text-muted); }
.pcl-hero__actions, .pcl-cta__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; align-items: center; }
.pcl-hero__eyebrow { margin-bottom: 22px; }
.pcl-hero__media .pcl-photo-rounded { height: 100%; }
.pcl-hero__media .pcl-stamp { left: clamp(-122px,-6.3542vw,-40px); bottom: 68px; }

/* hero paws (mockup: 352px, top 330px from page top / left 62px; second bottom 70px / left 470px).
   Anchored to the hero body (921px tall at 1920) with proportional offsets so they keep
   the same spot relative to the headline at every width: 171/921 top, 70/921 bottom. */
.pcl-hero__grid { position: relative; z-index: 1; }
.pcl-hero__paw-a {
  top: 18.5668%; left: min(3.2292vw, 62px);
  background: var(--pcl-rose-mist); opacity: .45; rotate: -18deg;
}
.pcl-hero__paw-b {
  bottom: 7.6004%; left: min(24.4792vw, 470px);
  background: var(--pcl-apricot-soft); opacity: .3; rotate: 24deg;
}

/* ==========================================================================
   Strapline
   ========================================================================== */
.pcl-strapline { background: var(--pcl-cream); color: var(--pcl-plum); position: relative; z-index: 2; }
.pcl-strapline__body { max-width: var(--content-max); margin: 0 auto; padding: calc(var(--section-y) * .58) var(--gutter); }
.pcl-strapline .pcl-two { align-items: center; }
.pcl-strapline__media { grid-column: 1 / span 5; }
.pcl-strapline__media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-card); display: block; }
.pcl-strapline__text { grid-column: 7 / span 6; font-family: var(--font-display); font-weight: 700; font-size: clamp(19px,1.2917vw,24.8px); line-height: 1.42; }
.pcl-strapline__text .accent { color: var(--pcl-blossom); }

/* ==========================================================================
   Features (Why choose us)
   ========================================================================== */
.pcl-features { background: var(--pcl-shell); color: var(--pcl-plum); position: relative; overflow: hidden; }
.pcl-features__paw { bottom: 170px; right: 56px; background: var(--pcl-rose); opacity: .3; rotate: -40deg; }
.pcl-features__head {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 40px; align-items: end; margin-bottom: 52px;
}
.pcl-features__head h2 { font-size: var(--fs-display-2); margin: 0; line-height: 1.02; }
.pcl-features__intro { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.pcl-features__intro p { font-size: var(--fs-lead); line-height: 1.7; color: var(--text-muted); margin: 0; max-width: 34ch; }
.pcl-features__grid {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; align-items: stretch; padding-top: 52px;
}
.pcl-feature {
  background: var(--pcl-white); border-radius: var(--radius-lg);
  padding: 74px 24px 30px; display: flex; flex-direction: column; gap: 14px;
  text-align: center; position: relative;
}
.pcl-feature:nth-child(n+5) { margin-top: 52px; }
.pcl-feature__icon {
  width: 104px; height: 104px; border-radius: var(--radius-pill);
  background: var(--pcl-apricot-soft); color: var(--pcl-blossom-deep);
  display: grid; place-content: center; position: absolute; top: -52px; left: 50%;
  transform: translateX(-50%); border: 6px solid var(--pcl-white);
}
.pcl-feature__icon svg { width: 54px; height: 54px; display: block; }
.pcl-feature h3 { font-size: 19px; margin: 0; line-height: 1.18; min-height: 2.36em; }
.pcl-feature p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--text-muted); }
.pcl-feature p + p { margin-top: 10px; }
.pcl-feature p a:not(.pcl-btn) { text-decoration: underline; }

@media (max-width: 1100px) { .pcl-features__grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .pcl-feature:nth-child(n+3) { margin-top: 52px; } }
@media (max-width: 820px)  { .pcl-features__head { grid-template-columns: 1fr; align-items: start; gap: 20px; } }
@media (max-width: 620px)  { .pcl-features__grid { grid-template-columns: 1fr; } .pcl-feature:nth-child(n+2) { margin-top: 52px; } }

/* ==========================================================================
   Services (alternating panels)
   ========================================================================== */
.pcl-services > .pcl-service:nth-child(odd)  { background: var(--pcl-cream); }
.pcl-services > .pcl-service:nth-child(even) { background: var(--pcl-shell); }
.pcl-service { color: var(--pcl-plum); overflow: hidden; position: relative; }
.pcl-service__body { max-width: var(--content-max); margin: 0 auto; padding: var(--section-y) var(--gutter); position: relative; z-index: 1; }
.pcl-service__grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--grid-gap); align-items: center; }
.pcl-service__media { grid-column: 1 / span 6; order: 1; }
.pcl-service__content { grid-column: 8 / span 5; order: 2; }
.pcl-service--flip .pcl-service__media { grid-column: 7 / span 6; order: 2; }
.pcl-service--flip .pcl-service__content { grid-column: 1 / span 5; order: 1; }
.pcl-service__photo {
  display: block; width: 100%; height: auto; object-fit: cover;
  border-radius: 999px 999px 72px 72px; box-shadow: var(--shadow-card); position: relative; z-index: 1;
}
.pcl-service h2 { font-size: var(--fs-display-2); font-weight: 900; margin-bottom: 18px; }
.pcl-service__text { font-size: var(--fs-lead); line-height: 1.66; opacity: .85; display: flex; flex-direction: column; gap: 14px; }
.pcl-service__text p { margin: 0; }
.pcl-service__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 36px; }

.pcl-price { display: inline-flex; flex-direction: column; gap: 2px; color: var(--pcl-plum); line-height: 1.7; }
.pcl-price__prefix { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: var(--ls-label); text-transform: uppercase; opacity: .7; /* 5.3:1 on cream, 4.9:1 on shell */ }
.pcl-price__row { display: flex; align-items: baseline; gap: 8px; }
.pcl-price__amount { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1.1; color: var(--pcl-blossom); }
.pcl-price__unit { font-family: var(--font-body); font-weight: 600; font-size: 15px; opacity: .7; }

/* two paws per panel, on the text side (large) and the opposite diagonal (small) */
.pcl-service::after,
.pcl-service::before {
  content: ""; position: absolute; pointer-events: none; z-index: 5;
  background: var(--pcl-rose);
  -webkit-mask: var(--paw) center/contain no-repeat; mask: var(--paw) center/contain no-repeat;
  animation: pcl-paw-drift 18s ease-in-out infinite;
}
.pcl-service::after  { width: var(--paw-lg); height: var(--paw-lg); top: 120px; opacity: .16; }
.pcl-service::before { width: var(--paw-sm); height: var(--paw-sm); bottom: 90px; opacity: .11; animation-duration: 26s; animation-delay: -11s; }
.pcl-services > .pcl-service:nth-child(odd)::after   { right: 8px; rotate: 18deg; }
.pcl-services > .pcl-service:nth-child(even)::after  { left: 8px; rotate: -14deg; animation-duration: 22s; animation-delay: -6s; }
.pcl-services > .pcl-service:nth-child(odd)::before  { right: 21.875vw; rotate: 26deg; }
.pcl-services > .pcl-service:nth-child(even)::before { left: 21.875vw; rotate: -30deg; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.pcl-testimonials { background: var(--pcl-shell); color: var(--pcl-plum); overflow-x: clip; }
.pcl-testimonials::after {
  content: ""; position: absolute; left: 8px; top: 480px; width: var(--paw-lg); height: var(--paw-lg);
  background: var(--pcl-rose); opacity: .16; rotate: 44deg; pointer-events: none; z-index: 0;
  -webkit-mask: var(--paw) center/contain no-repeat; mask: var(--paw) center/contain no-repeat;
  animation: pcl-paw-drift 18s ease-in-out infinite;
}
.pcl-testimonials .pcl-section__body { z-index: 1; }
.pcl-testimonials__head { margin-bottom: 48px; align-items: end; }
.pcl-testimonials__head h2 { grid-column: 1 / span 6; font-size: var(--fs-display-2); margin: 0; }
.pcl-testimonials__head p { grid-column: 8 / span 5; font-size: 17px; line-height: 1.7; color: var(--text-muted); }
.pcl-carousel__viewport { overflow: hidden; padding: 6px 0; touch-action: pan-y; cursor: grab; }
.pcl-carousel__viewport.is-dragging { cursor: grabbing; user-select: none; }
.pcl-carousel__viewport.is-dragging .pcl-carousel__track { transition: none; }
.pcl-carousel__track { display: flex; transition: transform var(--dur-slow) var(--ease-soft); }
.pcl-carousel__item { flex: 0 0 50%; padding-right: var(--grid-gap); box-sizing: border-box; display: flex; }
.pcl-carousel__item .pcl-quote { flex: 1; } /* cards in a row share the tallest height (e.g. an expanded review) */
.pcl-quote {
  margin: 0; background: var(--pcl-white); color: var(--pcl-plum);
  border-radius: var(--radius-lg); box-shadow: 0 1px 0 rgba(120,70,90,.06);
  border: 1px solid var(--border-hairline); padding: 36px 36px 30px;
  display: flex; flex-direction: column; gap: 20px; min-height: 310px;
}
.pcl-quote__mark { font-family: var(--font-display); font-weight: 700; font-size: 46px; line-height: .7; color: var(--pcl-rose-pale); }
.pcl-quote p { font-size: 17px; line-height: 1.68; flex: 1; }
.pcl-quote__body { flex: 1; }
.pcl-quote__more {
  margin-top: 10px; padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--pcl-blossom-deep); text-decoration: underline; text-underline-offset: 3px;
}
.pcl-quote__more:hover { color: var(--pcl-blossom); }
.pcl-quote__foot { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--border-hairline); line-height: 1.7; }
.pcl-quote__avatar {
  width: 42px; height: 42px; border-radius: var(--radius-pill); background: var(--pcl-rose-mist);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--pcl-blossom-deep);
}
.pcl-quote__name { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.pcl-carousel__controls { display: flex; align-items: center; gap: 16px; margin-top: 36px; }
.pcl-carousel__arrow {
  width: 52px; height: 52px; border-radius: var(--radius-pill); border: none;
  background: var(--pcl-white); color: var(--pcl-plum); cursor: pointer; font-size: 18px;
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) linear, color var(--dur-fast) linear;
}
.pcl-carousel__arrow:hover { background: var(--pcl-blossom); color: var(--pcl-white); transform: translateY(-2px); }
.pcl-carousel__dots { display: flex; gap: 12px; margin-left: 14px; }
.pcl-carousel__dot {
  width: 28px; height: 28px; border-radius: var(--radius-pill); border: none; padding: 0; cursor: pointer;
  background: var(--pcl-white); box-shadow: inset 0 0 0 2px var(--pcl-taupe-soft);
  transition: width var(--dur-base) var(--ease-out), background var(--dur-fast) linear;
}
.pcl-carousel__dot[aria-current="true"] { width: 72px; background: var(--pcl-blossom); box-shadow: none; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.pcl-faq { background: var(--pcl-cream); color: var(--pcl-plum); overflow-x: clip; }
.pcl-faq::after {
  content: ""; position: absolute; right: 8px; bottom: 280px; width: var(--paw-lg); height: var(--paw-lg);
  background: var(--pcl-rose); opacity: .16; rotate: -16deg; pointer-events: none; z-index: 5;
  -webkit-mask: var(--paw) center/contain no-repeat; mask: var(--paw) center/contain no-repeat;
  animation: pcl-paw-drift 22s ease-in-out infinite; animation-delay: -6s;
}
.pcl-faq__head { align-items: end; }
.pcl-faq__head h2 { grid-column: 1 / span 7; font-size: var(--fs-display-2); margin: 0; }
.pcl-faq__intro { grid-column: 8 / span 5; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.pcl-faq__intro p { font-size: 16px; line-height: 1.7; color: var(--text-muted); margin: 0; flex: 1 1 220px; }
.pcl-faq__foot { display: none; }
.pcl-faq__list { margin-top: 56px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: calc(var(--grid-gap) * 3); align-content: start; }
.pcl-faq__item { border-top: 1px solid var(--pcl-taupe-soft); align-self: start; transition: border-color var(--dur-fast) linear; }
.pcl-faq__item:hover { border-top-color: var(--pcl-blossom); }
.pcl-faq__item[data-open="true"] { border-top-color: var(--pcl-taupe-soft); }
.pcl-faq__q {
  width: 100%; background: none; border: none; text-align: left; cursor: pointer;
  padding: 30px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  color: inherit; font: inherit;
}
.pcl-faq__item > .pcl-faq__h { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px,1.125vw,21.6px); line-height: 1.28; margin: 0; }
.pcl-faq__q-text { transition: color var(--dur-fast) linear; }
.pcl-faq__item:not([data-open="true"]):hover .pcl-faq__q-text { color: var(--pcl-blossom-deep); }
.pcl-faq__sign {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-pill);
  background: var(--pcl-rose-mist); color: var(--pcl-plum);
  display: grid; place-items: center; font-size: 19px; line-height: 1;
  transition: background var(--dur-fast) linear, color var(--dur-fast) linear, transform var(--dur-base) var(--ease-out);
}
.pcl-faq__item:hover .pcl-faq__sign { background: var(--pcl-blossom); color: #fff; transform: scale(1.08); }
.pcl-faq__item[data-open="true"] .pcl-faq__sign { background: var(--pcl-blossom); transform: rotate(45deg); }
.pcl-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.pcl-faq__item[data-open="true"] .pcl-faq__a { grid-template-rows: 1fr; }
.pcl-faq__a-inner { overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--dur-base); }
/* 2026-10-31 (a11y scan): collapsed answers were still read by screen readers and their links reachable by Tab */
.pcl-faq__item[data-open="true"] .pcl-faq__a-inner { visibility: visible; transition-delay: 0s; }
.pcl-faq__a-inner > div { padding-bottom: 30px; max-width: 66ch; }
.pcl-faq__a p { font-size: 16px; line-height: 1.75; color: var(--text-muted); margin: 14px 0 0; white-space: pre-line; }
.pcl-faq__a p:first-child { margin-top: 0; }
.pcl-faq__a strong { font-weight: 700; color: var(--pcl-plum); }

/* ==========================================================================
   Contact CTA
   ========================================================================== */
.pcl-cta { position: relative; background: var(--pcl-cream); color: var(--pcl-plum); overflow: hidden; }
.pcl-cta__paw { top: 200px; left: 56px; background: var(--pcl-rose-mist); opacity: .45; rotate: -22deg; }
.pcl-cta__body { max-width: var(--content-max); margin: 0 auto; padding: var(--section-y) var(--gutter); position: relative; z-index: 2; }
.pcl-cta .pcl-two { align-items: center; }
.pcl-cta__text { grid-column: 1 / span 6; }
.pcl-cta__media { grid-column: 8 / span 5; position: relative; }
.pcl-cta h2 { margin: 0 0 20px; }
.pcl-cta__lead { font-size: var(--fs-lead); line-height: 1.65; max-width: 39ch; color: var(--text-muted); }
.pcl-cta__media img {
  display: inline-block; vertical-align: baseline; /* inline like the mockup (keeps its line-box gap) */ width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 260px 260px var(--radius-xl) var(--radius-xl); box-shadow: var(--shadow-lift); position: relative; z-index: 1;
}
.pcl-cta__media .pcl-stamp { --stamp: clamp(132px,10.4167vw,200px); left: clamp(-96px,-5vw,-30px); bottom: 56px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.pcl-footer { background: var(--pcl-cream); color: var(--pcl-plum); position: relative; }
.pcl-footer__inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.pcl-footer__top { display: flex; flex-direction: column; align-items: center; gap: 30px; padding-top: var(--section-y-tight); padding-bottom: 44px; text-align: center; }
.pcl-footer__logo { width: 216px; max-width: none; height: auto; border-radius: var(--radius-md); display: block; margin-top: -31px; margin-bottom: 14px; position: relative; z-index: 2; }
.pcl-footer__contact { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 26px; font-size: 17px; }
.pcl-footer__contact a { color: var(--pcl-plum); font-weight: 700; text-decoration: none; }
.pcl-footer__phone { transition: color .2s ease; }
.pcl-footer__phone:hover { color: var(--pcl-plum); text-decoration: none; } /* phone numbers have no hover */
.pcl-footer__phone:focus-visible { color: var(--pcl-blossom); text-decoration: none; }
.pcl a[href^="tel:"]:not([class]):hover { color: var(--pcl-mocha); text-decoration: none; }
.pcl-footer__contact > span:not(.pcl-footer__sep):not(.pcl-footer__socials) { opacity: .9; }
.pcl-footer__contact .pcl-footer__sep { width: 1px; height: 20px; background: rgba(216,145,167,.5); }
.pcl-footer__socials { display: flex; gap: 12px; }
.pcl-footer__socials a {
  width: 38px; height: 38px; border-radius: var(--radius-pill); background: var(--pcl-rose-mist);
  display: inline-flex; align-items: center; justify-content: center; color: var(--pcl-plum); transition: background .2s ease, color .2s ease;
}
.pcl-footer__socials a:hover, .pcl-footer__socials a:focus-visible { background: var(--pcl-blossom); color: var(--pcl-white); }
.pcl-footer__socials svg { width: 19px; height: 19px; }
.pcl-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; max-width: 1000px; }
.pcl-footer__nav a { color: var(--pcl-plum); font-size: 16px; line-height: 1.6; white-space: nowrap; text-decoration: none; transition: color .2s ease; }
.pcl-footer__nav a:hover, .pcl-footer__nav a:focus-visible { color: var(--pcl-blossom); text-decoration: none; }
.pcl-footer__legal { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; padding: 22px 0; border-top: 1px solid rgba(216,145,167,.4); font-size: 13px; opacity: .75; }
.pcl-footer__legal a, .pcl-footer__legal a:hover, .pcl-footer__legal a:focus-visible { color: inherit; text-decoration: none; }

/* ==========================================================================
   Interior pages (default page template)
   Title band + editor content share one centred reading column (--read-max),
   so the h1 and the body copy start on the same left edge. Content headings reuse the home
   section heading style (Baloo 2 / plum) at a reading-scale size.
   ========================================================================== */
.pcl-page-header { background: var(--pcl-cream); color: var(--pcl-plum); }
.pcl-page { --read-max: 960px; }
.pcl-page-header__body {
  max-width: calc(var(--read-max) + 2 * var(--gutter)); margin: 0 auto;
  padding: var(--section-y-tight) var(--gutter) 0;
}
.pcl .pcl-page-header h1 {
  font-size: var(--fs-display-2); font-weight: 900; letter-spacing: var(--ls-display);
  line-height: 1.02;
  padding-bottom: clamp(24px,2.0834vw,40px);
  border-bottom: 1px solid rgba(216,145,167,.4);
}

.pcl-page__main { background: var(--pcl-cream); color: var(--pcl-plum); }
.pcl-page__body {
  max-width: calc(var(--read-max) + 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(32px,2.9167vw,56px) var(--gutter) var(--section-y);
}

/* Thank You template: everything centred, with the envelope illustration above the copy */
.pcl-page--thank-you .pcl-page-header__body,
.pcl-page--thank-you .pcl-page__body { text-align: center; }
.pcl-thank-you__image {
  display: block; width: clamp(200px,15.7813vw,303px); height: auto;
  margin: 0 auto clamp(24px,2.0834vw,40px);
}
.pcl-thank-you__socials {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-top: clamp(28px,2.5vw,48px);
}
.pcl .pcl-thank-you__socials p { margin: 0; font-weight: 700; color: var(--pcl-plum); }
.pcl-thank-you__socials .pcl-footer__socials a { width: 46px; height: 46px; }
.pcl-thank-you__socials .pcl-footer__socials a:hover { color: var(--pcl-white); }

/* editor content */
.pcl-prose { font-size: var(--fs-lead); line-height: 1.7; color: var(--text-muted); }
.pcl-prose > * + * { margin-top: 1.1em; }
.pcl .pcl-prose h2,
.pcl .pcl-prose h3,
.pcl .pcl-prose h4 { color: var(--pcl-plum); }
.pcl .pcl-prose h2 { font-size: clamp(28px,2.5vw,48px); line-height: 1.08; margin-top: 1.6em; }
.pcl .pcl-prose h3 { font-size: clamp(22px,1.5625vw,30px); line-height: 1.2; margin-top: 1.5em; }
.pcl .pcl-prose h4 { font-size: clamp(19px,1.1459vw,22px); line-height: 1.3; margin-top: 1.4em; }
.pcl .pcl-prose > :first-child { margin-top: 0; }
.pcl .pcl-prose h2 + *,
.pcl .pcl-prose h3 + *,
.pcl .pcl-prose h4 + * { margin-top: .55em; }
.pcl .pcl-prose p { margin: 0; }
.pcl .pcl-prose > * + p { margin-top: 1.1em; }
.pcl-prose strong { color: var(--pcl-plum); font-weight: 700; }
.pcl .pcl-prose a:not(.pcl-btn):not(.wp-block-button__link) { color: var(--pcl-blossom); text-decoration: underline; text-decoration-thickness: 1px; }
.pcl .pcl-prose a:not(.pcl-btn):not(.wp-block-button__link):hover { color: var(--pcl-blossom-deep); }
.pcl-prose ul, .pcl-prose ol { padding-left: 1.3em; margin-bottom: 0; }
.pcl-prose ul { list-style: disc; }
.pcl-prose ol { list-style: decimal; }
.pcl-prose li + li { margin-top: .4em; }
.pcl-prose li::marker { color: var(--pcl-rose); }
.pcl-prose blockquote {
  margin-inline: 0; padding: 28px 32px; border-radius: var(--radius-lg);
  background: var(--pcl-white); border: 1px solid var(--border-hairline);
  font-family: var(--font-display); font-weight: 700; color: var(--pcl-plum); line-height: 1.5;
}
.pcl-prose blockquote > * + * { margin-top: .8em; }
.pcl-prose img { height: auto; border-radius: var(--radius-lg); }
.pcl-prose figure { margin-inline: 0; }
.pcl-prose figcaption { font-size: 14px; margin-top: 10px; }
.pcl-prose hr { border: 0; border-top: 1px solid rgba(216,145,167,.4); margin-block: 2em; }
.pcl-prose table { width: 100%; border-collapse: collapse; font-size: .85em; }
.pcl-prose th, .pcl-prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--pcl-taupe-soft); }
.pcl-prose th { color: var(--pcl-plum); font-weight: 700; }
.pcl-prose .wp-block-button__link {
  display: inline-flex; padding: 15px 28px; border-radius: var(--radius-pill);
  background: var(--pcl-blossom); color: var(--pcl-white); font-weight: 700; font-size: 16px; text-decoration: none;
}
.pcl-prose .wp-block-button__link:hover { background: var(--pcl-blossom-deep); color: var(--pcl-white); }
/* WP alignment classes (classic <img class="alignleft"> and block figures) */
.pcl-prose { display: flow-root; }
.pcl-prose .alignleft { float: left; margin: .35em 1.5em 1em 0; max-width: 50%; }
.pcl-prose .alignright { float: right; margin: .35em 0 1em 1.5em; max-width: 50%; }
.pcl-prose h2, .pcl-prose h3 { clear: both; }
.pcl-prose .aligncenter { display: block; margin-inline: auto; }
.pcl-prose figure.aligncenter { display: table; }
.pcl-prose > * + .alignleft,
.pcl-prose > * + .alignright { margin-top: .35em; }
@media (max-width: 600px) {
  .pcl-prose .alignleft,
  .pcl-prose .alignright { float: none; display: block; max-width: 100%; margin: 0 auto 1em; }
}
.pcl-prose .alignwide, .pcl-prose .alignfull { position: relative; left: 50%; transform: translateX(-50%); width: min(100vw - 2 * var(--gutter), var(--content-max) - 2 * var(--gutter)); max-width: none; }

/* Service page hero (partials/interior-header.blade.php): the home hero, compacted —
   640px tall at 1920 (vs 921), display-2 title, one short lead, price + one button,
   and the linked Services panel photo at the panel's 6:7 ratio. */
.pcl-hero--interior .pcl-hero__body {
  height: 33.3333vw; max-height: 640px; min-height: 470px;
}
.pcl .pcl-hero--interior h1 {
  font-size: var(--fs-display-2); line-height: 1.02; white-space: normal;
}
.pcl .pcl-hero--interior .pcl-hero__lead { margin-top: 18px; max-width: 34ch; }
.pcl-hero--interior .pcl-hero__actions { margin-top: 32px; gap: 28px; }
.pcl-hero--interior .pcl-hero__frame { width: auto; aspect-ratio: 6 / 7; }
.pcl-hero--interior .pcl-hero__media .pcl-photo-rounded { border-radius: 999px 999px 72px 72px; }
.pcl-hero--interior .pcl-hero__paw-a { top: 12%; }
/* The 6:7 photo is narrower than its centred 5-col cell, leaving a gap on its right.
   Indent the text by that same gap so both sides sit equally inset from the container.
   cq units resolve against the grid (definite height while side-by-side). */
@media (min-width: 961px) {
  .pcl-hero--interior .pcl-hero__grid { container-type: size; }
  .pcl-hero--interior .pcl-hero__text {
    padding-left: max(0px, ((100cqw - 11 * var(--grid-gap)) * 5 / 12 + 4 * var(--grid-gap) - 100cqh * 6 / 7) / 2);
  }
}
.pcl-hero--interior + .pcl-page__main .pcl-page__body { padding-top: var(--section-y-tight); }
.pcl-hero--interior + .pcl-page__main { border-top: 1px solid rgba(216,145,167,.4); }

/* ==========================================================================
   Responsive stacking (fixed-canvas mockup → fluid)
   ========================================================================== */
@media (max-width: 1100px) {
  :root { --gutter: 40px; }
}
@media (max-width: 960px) {
  .pcl-hero h1, .pcl-cta h2 { white-space: normal; line-height: 1; }

  .pcl-hero__body { height: auto; max-height: none; min-height: 0; padding-bottom: var(--section-y); }
  .pcl-hero__grid { grid-template-columns: 1fr; }
  .pcl-hero__text, .pcl-hero__media { grid-column: auto; }
  .pcl-hero__media { order: -1; margin-bottom: 40px; height: auto; }
  .pcl-hero__frame { max-width: 520px; }
  .pcl-hero__media .pcl-photo-rounded { height: auto; aspect-ratio: 600 / 715; }
  .pcl-hero__media .pcl-stamp, .pcl-cta__media .pcl-stamp { left: -12px; }
  .pcl-hero--interior .pcl-hero__body { height: auto; max-height: none; min-height: 0; }
  .pcl-hero--interior .pcl-hero__frame { width: 100%; max-width: 400px; }
  .pcl-hero--interior .pcl-hero__media .pcl-photo-rounded { aspect-ratio: 6 / 7; }

  .pcl-two > * { grid-column: auto !important; }
  .pcl-strapline .pcl-two, .pcl-cta .pcl-two { grid-template-columns: 1fr; }
  .pcl-cta__media { margin-top: 32px; max-width: 520px; }

  .pcl-service__grid { grid-template-columns: 1fr; }
  .pcl-service__media, .pcl-service__content,
  .pcl-service--flip .pcl-service__media, .pcl-service--flip .pcl-service__content { grid-column: auto; order: initial; }
  .pcl-service__content { margin-top: 32px; }

  .pcl-testimonials__head h2, .pcl-testimonials__head p,
  .pcl-faq__head h2, .pcl-faq__intro { grid-column: auto; }
  .pcl-carousel__item { flex-basis: 100% !important; }
  /* one card per view: each card fits its own text; JS sizes the viewport to the active slide */
  .pcl-carousel__track { align-items: flex-start; }
  .pcl-carousel__item .pcl-quote { min-height: 0; }
  .pcl-carousel__viewport { box-sizing: border-box; transition: height var(--dur-slow) var(--ease-soft);
    margin-inline: calc(var(--grid-gap) / -2); }
  .pcl-carousel__item { padding-inline: calc(var(--grid-gap) / 2); } /* card spans the column, gap stays between slides */
  .pcl-carousel__controls { margin-top: 20px; }
  .pcl-faq__list { grid-template-columns: 1fr; column-gap: 0; }
  .pcl-two { grid-template-columns: 1fr; }

  /* stacked panels: centre the content (FAQ: header only, questions stay left-aligned) */
  .pcl-hero__text, .pcl-strapline__text, .pcl-features__head, .pcl-service__content,
  .pcl-testimonials__head, .pcl-faq__head, .pcl-cta__text { text-align: center; }
  .pcl .pcl-hero__lead, .pcl-cta__lead, .pcl-features__intro p { margin-inline: auto; }
  .pcl-hero__actions, .pcl-cta__actions, .pcl-features__intro,
  .pcl-service__foot, .pcl-carousel__controls, .pcl-faq__intro { justify-content: center; }
  .pcl-features__head { grid-template-columns: 1fr; align-items: start; gap: 20px; }
  .pcl-features__intro { flex-direction: column; }
  /* FAQ: once stacked, the button moves from the header to below the questions */
  .pcl-faq__intro .pcl-btn { display: none; }
  .pcl-faq__foot { display: flex; justify-content: center; margin-top: 40px; }
  .pcl-price { align-items: center; }
  .pcl-carousel__dots { display: none; }
  .pcl-hero__frame, .pcl-cta__media { margin-inline: auto; }
}
@media (max-width: 600px) {
  :root { --gutter: 20px; }
  .pcl-btn { display: flex; width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .pcl-hero__actions, .pcl-cta__actions, .pcl-service__foot { flex-direction: column; align-items: stretch; }
  .pcl-footer__legal { justify-content: center; text-align: center; }
  .pcl-footer__contact { flex-direction: column; gap: 14px; }
  .pcl-footer__contact .pcl-footer__sep { display: none; }
  .pcl-footer__nav { flex-direction: column; align-items: center; gap: 10px; width: 100%; }
  .pcl-footer__nav a { white-space: normal; text-align: center; }
}

/* FAQs page template: every question, single column at prose width */
.pcl-faq__list--page { grid-template-columns: 1fr; column-gap: 0; margin-top: 0; }
.pcl-prose + .pcl-faq__list--page { margin-top: clamp(32px,2.9167vw,56px); }
.pcl-faq__list--page .pcl-faq__item:last-child { border-bottom: 1px solid var(--pcl-taupe-soft); }
.pcl-faq__list--page .pcl-faq__a-inner > div { max-width: none; }

/* ==========================================================================
   Page Layouts → Form (partials/layouts/forms.blade.php)
   Gravity Form card + optional text / business info / map aside. Orbital
   colours come from the gform_default_styles filter (app/filters.php).
   ========================================================================== */
/* Pages with a form widen the whole column (title band too, so edges stay aligned);
   standalone prose above the form keeps its reading measure. */
.pcl-page:has(.pcl-form-layout) { --read-max: 1320px; }
.pcl-page:has(.pcl-form-layout) .pcl-page__body > .pcl-prose { max-width: 960px; }
.pcl-form-layout { display: grid; gap: clamp(32px,2.5vw,48px); align-items: start; }
.pcl-page__body > * + .pcl-form-layout,
.pcl-form-layout + * { margin-top: clamp(32px,2.9167vw,56px); }
@media (min-width: 961px) {
  .pcl-form-layout--two { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
}

.pcl-form-card {
  background: var(--pcl-white); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  padding: clamp(24px,2.0834vw,40px);
}

.pcl-form-layout__aside { display: flex; flex-direction: column; gap: clamp(24px,1.6667vw,32px); }
.pcl-form-layout__info { color: var(--text-muted); font-size: var(--fs-lead); line-height: 1.6; }
.pcl .pcl-form-layout__info h2 { color: var(--pcl-plum); font-size: clamp(22px,1.5625vw,30px); line-height: 1.2; margin-bottom: .5em; }
.pcl-form-layout__info p { margin: 0; }
.pcl-form-layout__info p + p { margin-top: .6em; }
.pcl-form-layout__info span { color: var(--pcl-plum); font-weight: 700; }
.pcl .pcl-form-layout__info a { color: var(--pcl-blossom); }
.pcl .pcl-form-layout__info .pcl-form-layout__phone:hover { color: var(--pcl-blossom); text-decoration: none; }
.pcl-form-layout__socials { display: flex; gap: 10px; }
.pcl .pcl-form-layout__socials a {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--pcl-shell); color: var(--pcl-plum);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pcl .pcl-form-layout__socials a:hover { background: var(--pcl-blossom); color: var(--pcl-white); text-decoration: none; }

.pcl-form-layout__map {
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-soft);
}
.pcl-coverage-map { height: clamp(320px,22.9167vw,440px); z-index: 0; background: var(--pcl-taupe-soft); font-family: var(--font-body); }
.pcl-map-pin span {
  display: block; width: 22px; height: 22px; border-radius: 50%;
  background: var(--pcl-rose); border: 4px solid var(--pcl-white); box-shadow: 0 2px 8px rgba(58,34,48,.35);
}
.pcl .leaflet-tooltip.pcl-map-label {
  font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--pcl-plum);
  background: var(--pcl-white); border: 0; border-radius: var(--radius-pill);
  padding: 4px 12px; box-shadow: 0 4px 14px rgba(58,34,48,.15);
}
.pcl .leaflet-tooltip.pcl-map-label::before { display: none; }
.pcl .leaflet-control-attribution a { color: var(--pcl-blossom); }

/* Gravity Forms type + button in the site style */
.pcl-form-card .gform_wrapper.gform-theme {
  --gf-font-family-base: var(--font-body);
  --gf-ctrl-label-font-family-primary: var(--font-body);
  --gf-ctrl-label-font-weight-primary: 700;
  --gf-ctrl-btn-font-family: var(--font-body);
  --gf-ctrl-btn-font-weight: 700;
  --gf-ctrl-btn-font-size: 16px;
  --gf-ctrl-btn-radius: var(--radius-pill);
  --gf-ctrl-btn-padding-x: 28px;
  --gf-ctrl-font-family: var(--font-body);
  --gf-ctrl-font-size: 17px;
}
.pcl-form-card .gform_title { font-family: var(--font-display); color: var(--pcl-plum); font-size: clamp(24px,1.875vw,36px); }
.pcl-form-card .gform_description { color: var(--text-muted); }
.pcl-form-card .gform_wrapper.gform-theme .gform_footer .gform_button {
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pcl-form-card .gform_wrapper.gform-theme .gform_footer .gform_button:hover {
  background-color: var(--pcl-blossom-deep); transform: translateY(-3px);
}
/* Checkbox groups (Meet & Greet "Services you're interested in") as selectable tiles:
   the whole label is the hit area, the native checkbox sits inside it as the tick. */
.pcl-form-card .gform-theme .gfield--type-checkbox .gfield_checkbox {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.pcl-form-card .gform-theme .gfield--type-checkbox .gchoice { position: relative; display: block; margin: 0; }
.pcl-form-card .gform-theme .gfield--type-checkbox .gchoice .gfield-choice-input {
  position: absolute; left: 16px; top: 50%; translate: 0 -50%; margin: 0; z-index: 1;
  pointer-events: none;
}
.pcl-form-card .gform-theme .gfield--type-checkbox .gchoice label {
  display: flex; align-items: center; width: 100%; min-height: 56px; margin: 0;
  padding: 12px 16px 12px 52px; cursor: pointer;
  background: var(--pcl-white); border: 1.5px solid var(--pcl-taupe-soft); border-radius: var(--radius-sm);
  font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--pcl-plum);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pcl-form-card .gform-theme .gfield--type-checkbox .gchoice:hover label {
  border-color: var(--pcl-taupe); transform: translateY(-1px); box-shadow: var(--shadow-soft);
}
.pcl-form-card .gform-theme .gfield--type-checkbox .gchoice:has(:checked) label {
  border-color: var(--pcl-blossom); background: color-mix(in srgb, var(--pcl-blossom) 8%, var(--pcl-white));
  color: var(--pcl-blossom);
}
.pcl-form-card .gform-theme .gfield--type-checkbox .gchoice:has(:focus-visible) label {
  outline: 2px solid var(--pcl-blossom); outline-offset: 2px;
}
.pcl-form-card .gform-theme .gfield--type-checkbox .gchoice .gfield-choice-input:focus { outline: 0; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .pcl-form-card .gform-theme .gfield--type-checkbox .gchoice:hover label { transform: none; }
}
@media (max-width: 600px) {
  .pcl-form-card .gform-theme .gfield--type-checkbox .gchoice .gfield-choice-input { left: 12px; }
  .pcl-form-card .gform-theme .gfield--type-checkbox .gchoice label { padding: 10px 12px 10px 44px; font-size: 15px; }
}
@media (max-width: 360px) {
  .pcl-form-card .gform-theme .gfield--type-checkbox .gfield_checkbox { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* GF's button has no vertical padding (height comes from min-height only) — match .pcl-btn--md */
  .pcl-form-card .gform_wrapper.gform-theme { --gf-ctrl-btn-padding-y: 15px; }
}

/* ==========================================================================
   Review Us template (template-review-us.blade.php)
   Stars + question + happy/unhappy face tabs (home.js), straight on the page
   ground (no card); happy → review-site logos / buttons, unhappy → feedback
   form card.
   ========================================================================== */
.pcl-page:has(.pcl-review-us__form) { --read-max: 1100px; }
.pcl-page:has(.pcl-review-us__form) .pcl-page__body > .pcl-prose { max-width: 960px; }
.pcl-review-us { text-align: center; }
.pcl-page:has(.pcl-review-us) .pcl-page-header h1 { text-align: center; }
.pcl-page__body > * + .pcl-review-us,
.pcl-review-us + * { margin-top: clamp(32px,2.9167vw,56px); }

.pcl-review-us__stars { display: flex; justify-content: center; gap: 6px; color: var(--pcl-rose); }
.pcl-review-us__stars svg { width: clamp(28px,2.0834vw,40px); height: auto; }
.pcl .pcl-review-us__intro { font-size: var(--fs-lead); line-height: 1.6; color: var(--text-muted); margin: 18px 0 0; }

.pcl-review-us__tabs { display: flex; justify-content: center; gap: clamp(8px,1.25vw,24px); margin-top: clamp(12px,1.0417vw,20px); }
.pcl-review-us__tab {
  display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--pcl-taupe); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pcl-review-us__tab svg { width: clamp(128px,8.3334vw,160px); height: auto; }
.pcl-review-us__tab:hover { color: var(--pcl-blossom-deep); transform: translateY(-3px); }
.pcl-review-us__tab.is-active { color: var(--pcl-blossom); }
.pcl-review-us__tab:focus-visible,
.pcl-review-us__panel:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.pcl-review-us__panel { margin-top: 12px; }
.pcl-review-us__panel[hidden] { display: none; }
.pcl .pcl-review-us__message {
  display: inline-block; margin: 0 0 16px; padding: 16px 32px;
  border-radius: var(--radius-md); background: var(--pcl-blossom); color: var(--pcl-white);
  font-size: var(--fs-lead); font-weight: 700; line-height: 1.4;
}
.pcl-review-us__text { font-size: var(--fs-lead); line-height: 1.7; color: var(--text-muted); max-width: 46em; margin: 0 auto; }
.pcl-review-us__text p { margin: 0; }
.pcl-review-us__text p + p { margin-top: .8em; }
.pcl-review-us__text strong { color: var(--pcl-plum); }

.pcl-review-us__sites {
  list-style: none; margin: clamp(24px,2.0834vw,40px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px;
}
.pcl-review-us__sites li { flex: 0 1 calc((100% - 48px) / 3); }
.pcl-review-us__logo {
  display: grid; place-items: center; width: 100%; height: 150px; padding: 16px;
  background: var(--pcl-white); border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.pcl-review-us__logo:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.pcl-review-us__logo img { display: block; max-width: 100%; max-height: 118px; width: auto; height: auto; object-fit: contain; }

.pcl-review-us__form { text-align: left; max-width: 760px; margin: clamp(24px,2.0834vw,40px) auto 0; }

@media (max-width: 600px) {
  .pcl-review-us__tab svg { width: 112px; }
  .pcl-review-us__message { padding: 14px 20px; }
  .pcl-review-us__sites { gap: 16px; }
  .pcl-review-us__sites li { flex-basis: calc((100% - 16px) / 2); }
  .pcl-review-us__logo { height: 120px; }
  .pcl-review-us__logo img { max-height: 88px; }
}

/* ==========================================================================
   Search + 404 (search.blade.php, 404.blade.php, forms/search.blade.php,
   partials/content-search + helpful-links). Both sit in the interior-page
   reading column; the 404 is centred like the Thank You page.
   ========================================================================== */
.pcl-page--center .pcl-page-header__body,
.pcl-page--center .pcl-page__body { text-align: center; }

/* search form: pill input + button */
.pcl-search { display: flex; gap: 12px; max-width: 640px; }
.pcl-page--center .pcl-search { margin-inline: auto; }
.pcl-search__input {
  flex: 1 1 auto; min-width: 0; height: 58px; padding: 0 24px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-pill);
  background: var(--pcl-white); color: var(--pcl-plum);
  font-family: var(--font-body); font-size: 17px;
  transition: border-color var(--dur-fast) linear, box-shadow var(--dur-fast) linear;
}
.pcl-search__input::placeholder { color: var(--pcl-taupe); opacity: 1; }
.pcl-search__input:focus { outline: none; border-color: var(--pcl-blossom); box-shadow: 0 0 0 3px rgba(31,107,99,.18); }
.pcl-search__submit { flex: none; }
.pcl-search__icon { flex: none; }
.pcl-page__body > * + .pcl-search,
.pcl-page__body > .pcl-search + * { margin-top: clamp(28px,2.5vw,48px); }

.pcl .pcl-search__status { color: var(--text-muted); font-size: var(--fs-lead); }

/* results */
.pcl-results { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid rgba(216,145,167,.4); }
.pcl-result { padding: clamp(22px,1.6667vw,32px) 0; border-bottom: 1px solid rgba(216,145,167,.4); }
.pcl .pcl-result__title { font-size: clamp(22px,1.5625vw,30px); line-height: 1.2; }
.pcl .pcl-result__title a { color: var(--pcl-plum); }
.pcl .pcl-result__title a:hover { color: var(--pcl-blossom); }
.pcl .pcl-result__url { margin-top: 4px; font-size: 14px; color: var(--pcl-blossom-deep); overflow-wrap: anywhere; }
.pcl .pcl-result__snippet { margin-top: 10px; color: var(--text-muted); font-size: 17px; line-height: 1.7; max-width: 60em; }

.pcl-pagination { margin-top: clamp(32px,2.9167vw,56px); }
.pcl-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pcl .pcl-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  min-width: 46px; height: 46px; padding: 0 16px;
  border-radius: var(--radius-pill); background: var(--pcl-white); border: 1px solid var(--border-hairline);
  color: var(--pcl-plum); font-weight: 700; text-decoration: none;
}
.pcl .pcl-pagination a.page-numbers:hover { background: var(--pcl-rose-mist); color: var(--pcl-plum); }
.pcl .pcl-pagination .page-numbers.current { background: var(--pcl-blossom); border-color: var(--pcl-blossom); color: var(--pcl-white); }
.pcl .pcl-pagination .page-numbers.dots { background: none; border: 0; }

/* 404 numerals, the paw standing in for the 0 */
.pcl .pcl-404__code {
  display: flex; justify-content: center; align-items: center; gap: .06em;
  font-family: var(--font-display); font-weight: 900; line-height: 1;
  font-size: clamp(120px,12.5vw,240px); color: var(--pcl-blossom);
  margin-bottom: clamp(20px,1.6667vw,32px);
}
.pcl-404__paw {
  display: inline-block; width: .78em; height: .78em; background: var(--pcl-rose);
  -webkit-mask: var(--paw) center/contain no-repeat; mask: var(--paw) center/contain no-repeat;
  transform: rotate(-12deg) translateY(-.04em);
}
.pcl-page--404 .pcl-prose { max-width: 40em; margin-inline: auto; }
/* in-place search results (?q=): centred heading, left-aligned list */
.pcl-404__results { margin-top: clamp(40px,3.3334vw,64px); scroll-margin-top: 24px; }
.pcl .pcl-404__none { margin-top: clamp(24px,2.0834vw,40px); scroll-margin-top: 24px; }
.pcl .pcl-404__results h2 { font-size: clamp(26px,2.0834vw,40px); line-height: 1.15; }
.pcl .pcl-404__results .pcl-search__status { margin-top: 6px; }
.pcl-404__results .pcl-results { text-align: left; }

/* dead-end links: buttons + Services chips */
.pcl-helpful { margin-top: clamp(32px,2.9167vw,56px); }
.pcl-helpful__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.pcl-page--center .pcl-helpful__actions { justify-content: center; }
.pcl-helpful__services { margin-top: clamp(40px,3.3334vw,64px); }
.pcl .pcl-helpful__services h2 { font-size: clamp(22px,1.5625vw,30px); line-height: 1.2; }
.pcl-helpful__services ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pcl-page--center .pcl-helpful__services ul { justify-content: center; }
.pcl .pcl-helpful__services a {
  display: inline-block; padding: 9px 20px; border-radius: var(--radius-pill);
  background: var(--pcl-white); border: 1px solid var(--border-hairline);
  color: var(--pcl-plum); font-weight: 700; font-size: 16px;
  transition: background var(--dur-fast) linear, color var(--dur-fast) linear;
}
.pcl .pcl-helpful__services a:hover { background: var(--pcl-blossom); color: var(--pcl-white); text-decoration: none; }

@media (max-width: 600px) {
  .pcl-search { flex-direction: column; }
  .pcl-search__input { flex: none; height: 54px; }
}

/* ==========================================================================
   Alert popup (Options → Alert Popup) — modal <dialog>, opened by home.js
   ========================================================================== */
.pcl-alert-popup, .pcl-alert-popup * { box-sizing: border-box; }
.pcl-alert-popup {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--pcl-white);
  color: var(--pcl-mocha);
  box-shadow: var(--shadow-lift);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}
.pcl-alert-popup::backdrop { background: rgba(58,34,48,.55); }
.pcl-alert-popup__card { position: relative; padding: 40px 40px 36px; }
.pcl-alert-popup__title,
.pcl-alert-popup__body h2,
.pcl-alert-popup__body h3 { font-family: var(--font-display); color: var(--pcl-plum); font-weight: 700; line-height: 1.15; margin: 0; }
.pcl-alert-popup__title { font-size: 32px; padding-right: 40px; margin-bottom: 16px; color: var(--pcl-blossom); }
.pcl-alert-popup__body h2 { font-size: 21px; margin-top: 1.1em; }
.pcl-alert-popup__body h3 { font-size: 19px; margin-top: 1em; }
.pcl-alert-popup__body > :first-child { margin-top: 0; }
.pcl-alert-popup__body p { margin: .4em 0 0; }
.pcl-alert-popup__body a { color: var(--pcl-blossom); font-weight: 700; }
.pcl-alert-popup__ok { margin-top: 28px; }
.pcl-alert-popup__close {
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: var(--pcl-taupe-soft); color: var(--pcl-plum);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.pcl-alert-popup__close:hover { background: var(--pcl-rose-mist); }
.pcl-alert-popup :focus-visible { outline: 2px solid var(--pcl-blossom); outline-offset: 3px; }
@media (max-width: 600px) {
  .pcl-alert-popup__card { padding: 28px 22px 24px; }
  .pcl-alert-popup__title { font-size: 26px; }
}

/* ==========================================================================
   Scroll-up button (sections/footer.blade.php) — revealed by home.js
   ========================================================================== */
.pcl-scrollup {
  position: fixed; right: 16px; bottom: 16px; z-index: 50; /* under the mobile drawer (60) */
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--pcl-blossom); color: #fff;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility 0s linear .2s;
}
.pcl-scrollup.is-visible { opacity: .8; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
.pcl-scrollup.is-visible:hover,
.pcl-scrollup:focus-visible { opacity: 1; }
.pcl-scrollup:focus-visible { outline: 2px solid var(--pcl-blossom); outline-offset: 3px; }
.pcl-scrollup svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .pcl-scrollup { transition: none; } }

/* ---- new-tab link icon (added by home.js) ---- */
.pcl-newtab { display: inline-block; width: 1em; height: 1em; margin: 0 .25rem; vertical-align: -.125em; }
.pcl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   2026-10-20 dev-review fixes (Kristy / audit)
   ========================================================================== */
/* Service heroes ~20% larger: 40vw tall (was 33.33vw), max 760px (was 640) */
@media (min-width: 961px) {
  /* Height grows with the content (value-prop text is taller); photo is sized by its column, 6:7 */
  .pcl-hero--interior .pcl-hero__body { height: auto; max-height: none; min-height: clamp(520px,36vw,700px); display: flex; }
  .pcl-hero--interior .pcl-hero__grid { container-type: normal; height: auto; flex: 1 1 auto; min-width: 0; align-items: center; }
  .pcl-hero--interior .pcl-hero__media { height: auto; align-self: center; }
  .pcl-hero--interior .pcl-hero__frame { width: 100%; height: auto; aspect-ratio: 6 / 7; }
  .pcl-hero--interior .pcl-hero__media .pcl-photo-rounded { height: 100%; }
}

/* One left edge for logo, hero h1 and body copy: no text indent; photo hugs the right edge
   so it lines up with the header's button instead. */
@media (min-width: 961px) {
  .pcl-hero--interior .pcl-hero__text { padding-left: 0; }
  .pcl-hero--interior .pcl-hero__media { justify-content: flex-end; }
}

/* "Fully insured" stamp: off the animal. Desktop = the arch's empty top-right corner (clear of the
   hero text); mobile (below) = the photo's lower-left corner. */
@media (min-width: 961px) {
  .pcl-hero--interior .pcl-hero__media .pcl-stamp { left: auto; bottom: auto; right: calc(var(--stamp) * -.3); top: calc(var(--stamp) * -.08); }
}
@media (min-width: 961px) and (max-width: 1100px) {
  .pcl-hero--interior .pcl-hero__media .pcl-stamp { right: calc(var(--stamp) * -.1); }
}
@media (max-width: 960px) {
  .pcl-hero--interior .pcl-hero__media { margin-bottom: 80px; }
  .pcl-hero--interior .pcl-hero__media .pcl-stamp { --stamp: 136px; left: -10px; bottom: -66px; padding: 10px; }
  .pcl-hero--interior .pcl-stamp__title { font-size: 14px; }
  .pcl-hero--interior .pcl-stamp__sub { font-size: 12px; margin-top: 5px; letter-spacing: 0; }
}

/* Interior column starts at the header's left edge (gutter) instead of a centred 960px box;
   children keep the --read-max measure. Centred templates stay centred. */
.pcl-page-header__body, .pcl-page__body { max-width: var(--content-max); }
.pcl-page-header__body > *, .pcl-page__body > * { max-width: var(--read-max); }
.pcl-page--center .pcl-page-header__body > *, .pcl-page--center .pcl-page__body > *,
.pcl-page--thank-you .pcl-page-header__body > *, .pcl-page--thank-you .pcl-page__body > *,
.pcl-page:has(.pcl-review-us) .pcl-page-header__body > *, .pcl-page:has(.pcl-review-us) .pcl-page__body > * { margin-inline: auto; }

/* Floated photo: room before the next heading (About "How we work") */
.pcl-prose .alignleft, .pcl-prose .alignright { margin-bottom: clamp(24px,2.0834vw,40px); }

/* Testimonial "Read more": brand teal for AA contrast (was 3.24:1) */
.pcl-quote__more { color: #1F6B63; }

/* Mobile footer links: ~44px tap targets */
@media (max-width: 600px) {
  .pcl-footer__nav { gap: 0; }
  .pcl-footer__nav a { display: block; padding-block: .6rem; }
}

/* Service hero value proposition (eyebrow + heading + text + check points), 2026-10-20 */
@media (min-width: 961px) { .pcl-hero--interior .pcl-hero__text { grid-column: 1 / span 7; } }
.pcl .pcl-hero--interior .pcl-hero__lead { max-width: 46ch; margin-top: 20px; }
.pcl-hero--interior .pcl-hero__eyebrow { margin-bottom: 18px; }
.pcl-hero__points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.pcl-hero__points li { position: relative; padding-left: 34px; font-weight: 600; color: var(--pcl-plum); font-size: clamp(15px,1vw,18px); line-height: 1.5; }
.pcl-hero__points li::before {
  content: ""; position: absolute; left: 0; top: .05em; width: 22px; height: 22px; border-radius: 50%;
  background: #1F6B63 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.pcl-hero--interior .pcl-hero__points + .pcl-hero__actions { margin-top: 28px; }
@media (max-width: 960px) {
  .pcl-hero__points { justify-items: start; max-width: 340px; margin-inline: auto; text-align: left; }
}

/* In-text photos on service pages + About (Lindsay's own photos, 2026-10-20) */
.pcl-prose figure.pcl-inline-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); }
@media (min-width: 601px) {
  .pcl-prose figure.pcl-inline-photo { width: min(36%, 340px); max-width: none; margin: .35em 0 1.25em clamp(24px,2.5vw,48px); }
}
@media (max-width: 600px) {
  .pcl-prose figure.pcl-inline-photo { margin: .5em 0 1.25em; }
}

/* ==========================================================================
   2026-10-20 interior bodies: bands, icon cards, photo rows, booking card
   (markup from pcl_content_bands() — service pages + About)
   ========================================================================== */
.pcl-page { overflow-x: clip; }
.pcl-page__bands { border-top: 1px solid rgba(216,145,167,.4); }
.pcl-band { background: var(--pcl-cream); color: var(--pcl-plum); }
.pcl-band--shell { background: var(--pcl-shell); }
.pcl-band__inner { max-width: var(--content-max); margin: 0 auto; padding: clamp(48px,4.1667vw,80px) var(--gutter); }
.pcl-band__inner > .pcl-prose { max-width: var(--read-max); }
.pcl-band .pcl-prose > h2:first-child { margin-top: 0; }
.pcl-band--intro .pcl-band__inner { padding-bottom: clamp(20px,1.6667vw,32px); }
.pcl-band--intro + .pcl-band:not(.pcl-band--shell) .pcl-band__inner { padding-top: clamp(28px,2.5vw,48px); }
.pcl .pcl-band--intro .pcl-prose p { font-size: clamp(18px,1.25vw,22px); line-height: 1.65; color: var(--pcl-plum); max-width: 48ch; }

/* Icon cards (lists) */
.pcl-prose ul.pcl-cards { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.pcl-band__inner > .pcl-prose:has(.pcl-cards) { max-width: min(100%, 1240px); }
.pcl-band__inner > .pcl-prose:has(.pcl-cards) > :not(.pcl-cards) { max-width: var(--read-max); }
.pcl-prose ul.pcl-cards > li { margin: 0; padding: 26px 22px 24px; background: var(--pcl-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 14px; font-weight: 600; line-height: 1.45; color: var(--pcl-plum); }
.pcl-prose ul.pcl-cards > li::before { content: none; display: none; }
.pcl-cards__icon { width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--pcl-apricot-soft); color: var(--pcl-blossom-deep); display: grid; place-content: center; flex-shrink: 0; }
.pcl-cards__icon svg { width: 30px; height: 30px; display: block; }
.pcl-band--shell .pcl-prose ul.pcl-cards > li { box-shadow: none; }

/* Text + photo row: photo is a 4:3 crop, text centred against it */
.pcl-media { display: grid; grid-template-columns: minmax(0,1.38fr) minmax(0,1fr); gap: clamp(28px,4vw,72px); align-items: center; max-width: min(100%, 1240px); }
.pcl-media__text > :last-child { margin-bottom: 0; }
.pcl-media__photo { margin: 0; }
.pcl-media__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 360px; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); }

/* Pricing + booking card */
.pcl-booking {
  display: grid; grid-template-columns: minmax(220px, 300px) minmax(0,1fr); gap: clamp(24px,3vw,56px); align-items: center;
  max-width: min(100%, 1100px); padding: clamp(26px,2.6vw,48px);
  background: var(--pcl-white); border: 2px solid #1F6B63; border-radius: var(--radius-xl); box-shadow: var(--shadow-soft);
}
.pcl-booking__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.pcl-booking__text h2 { margin-top: 0; font-size: clamp(24px,1.8vw,34px); }
.pcl-booking__text > :last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .pcl-media { grid-template-columns: 1fr; gap: 24px; }
  .pcl-media__photo { order: -1; }
  .pcl-booking { grid-template-columns: 1fr; }
  .pcl-booking__cta { order: 2; align-items: stretch; }
}
/* Card grid: no orphan card — 5 items sit in one row on desktop; 2 columns on mobile with an odd last card full width */
@media (min-width: 1100px) { .pcl-prose ul.pcl-cards:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (min-width: 761px) and (max-width: 1099px) { .pcl-prose ul.pcl-cards:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0,1fr)); } .pcl-prose ul.pcl-cards:has(> li:nth-child(5):last-child) > li { grid-column: span 2; } .pcl-prose ul.pcl-cards:has(> li:nth-child(5):last-child) > li:nth-child(n+4) { grid-column: span 3; } }
@media (max-width: 760px) {
  .pcl-prose ul.pcl-cards { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .pcl-prose ul.pcl-cards > li { padding: 18px 16px; gap: 10px; font-size: 15px; }
  .pcl-prose ul.pcl-cards > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pcl-cards__icon { width: 44px; height: 44px; } .pcl-cards__icon svg { width: 24px; height: 24px; }
}
/* Photo on the left (e.g. About intro portrait) */
@media (min-width: 761px) {
  .pcl-band--media-left .pcl-media { grid-template-columns: minmax(0,1fr) minmax(0,1.38fr); }
  .pcl-band--media-left .pcl-media__photo { order: -1; }
}
@media (min-width: 761px) and (max-width: 1099px) { .pcl-prose ul.pcl-cards:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* Portrait-orientation photos in a 4:3 row: keep faces in frame */
.pcl-band--media-left .pcl-media__img { object-position: 50% 28%; }

/* ==========================================================================
   2026-10-21 gallery page + home photo strip + lightbox
   ========================================================================== */
.pcl-page:has(.pcl-gallery) { --read-max: 1320px; }
.pcl-page:has(.pcl-gallery) .pcl-page__body > .pcl-prose { max-width: 960px; }
.pcl-page__body > * + .pcl-gallery { margin-top: clamp(28px,2.5vw,48px); }
.pcl-gallery { columns: 4 220px; column-gap: 16px; }
.pcl-gallery__item {
  display: block; width: 100%; margin: 0 0 16px; padding: 0; border: 0; background: none; cursor: zoom-in;
  break-inside: avoid; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pcl-gallery__item img { display: block; width: 100%; height: auto; }
.pcl-gallery__item:hover, .pcl-gallery__item:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(75,58,68,.16); }
.pcl-gallery__item:focus-visible { outline: 3px solid #1F6B63; outline-offset: 3px; }
@media (max-width: 600px) { .pcl-gallery { columns: 2; column-gap: 10px; } .pcl-gallery__item { margin-bottom: 10px; border-radius: var(--radius-md); } }

.pcl-gallery-strip { background: var(--pcl-cream); color: var(--pcl-plum); }
.pcl-gallery-strip__head { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(24px,2.5vw,44px); }
.pcl-gallery-strip__head h2 { font-size: var(--fs-display-2); margin: 0; line-height: 1.02; }
.pcl-gallery-strip__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 14px; }
.pcl-gallery-strip__row a { display: block; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.pcl-gallery-strip__row img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .3s ease; }
.pcl-gallery-strip__row a:hover img { transform: scale(1.05); }
@media (max-width: 960px) {
  .pcl-gallery-strip__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .pcl-gallery-strip__row li { flex: 0 0 42%; scroll-snap-align: start; }
}

.pcl-lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; }
.pcl-lightbox::backdrop { background: rgba(28,20,26,.9); }
.pcl-lightbox[open] { display: grid; place-items: center; }
.pcl-lightbox__fig { margin: 0; display: grid; justify-items: center; gap: 12px; max-width: 92vw; }
.pcl-lightbox__fig img { max-width: 92vw; max-height: 82vh; width: auto; height: auto; border-radius: var(--radius-lg); }
.pcl-lightbox__fig figcaption { color: #fff; font-size: 15px; text-align: center; opacity: .9; }
.pcl-lightbox__btn { position: fixed; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--pcl-plum); font-size: 30px; line-height: 1; cursor: pointer; display: grid; place-content: center; }
.pcl-lightbox__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.pcl-lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.pcl-lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
.pcl-lightbox__close { right: 16px; top: 16px; }
/* Floating paws on the home photo strip (same motif as the hero / CTA) */
.pcl-gallery-strip { position: relative; overflow: hidden; }
.pcl-gallery-strip .pcl-section__body { position: relative; z-index: 2; }
.pcl-gallery-strip__paw-a { top: 28px; right: 6%; background: var(--pcl-rose); opacity: .14; rotate: 24deg; }
.pcl-gallery-strip__paw-b { bottom: -40px; left: 2%; width: var(--paw-sm, 120px); height: var(--paw-sm, 120px); background: var(--pcl-rose-mist); opacity: .4; rotate: -28deg; }

/* 2026-10-21: tighter home service panels (Kristy) — square arch photo capped at 500px, wider text,
   less padding. aspect-ratio needs !important to beat the inline 6/7 set in partials/home/services. */
@media (min-width: 961px) {
  .pcl-service__body { padding-top: calc(var(--section-y) * .6); padding-bottom: calc(var(--section-y) * .6); }
  .pcl-service__media { grid-column: 1 / span 5; display: flex; justify-content: center; }
  .pcl-service__content { grid-column: 7 / span 6; }
  .pcl-service--flip .pcl-service__media { grid-column: 8 / span 5; }
  .pcl-service--flip .pcl-service__content { grid-column: 1 / span 6; }
  .pcl-service__photo { width: 100%; max-width: 500px; aspect-ratio: 1 / 1 !important; height: auto; object-fit: cover; border-radius: 999px 999px 56px 56px; }
}
/* Photo strip: white band so it separates from the cream panel above */
.pcl-gallery-strip { background: #fff; border-top: 1px solid rgba(216,145,167,.35); }
/* Strip paws: keep the whole paw (toes included) inside the band, allowing for the 26px float lift */
.pcl-gallery-strip__paw-a { top: auto; bottom: 18%; right: 3%; width: var(--paw-sm); height: var(--paw-sm); rotate: 20deg; }
.pcl-gallery-strip__paw-b { bottom: 12%; left: 1.5%; width: clamp(80px, 8vw, 150px); height: clamp(80px, 8vw, 150px); }
.pcl-gallery-strip__paw-a { top: 64px; bottom: auto; right: 4%; }
@media (max-width: 600px) { .pcl-gallery-strip__paw-a { top: 40px; right: 2%; width: 110px; height: 110px; } }

/* 2026-10-21: closing CTA band mirrors the header hero's sizing (Kristy).
   Home: same height formula + padding as the home hero. Interior (service pages, About, Gallery): same as the
   compact interior hero — display-2 heading, 6:7 photo sized by its column, same min-height. */
@media (min-width: 961px) {
  .pcl-cta__body { padding-top: 48px; padding-bottom: 48px; min-height: min(921px, max(560px, calc(56.25vw - var(--pcl-header-h)))); display: flex; align-items: center; }
  .pcl-cta__body > .pcl-two { width: 100%; }
  .pcl-closing-cta .pcl-cta__body { min-height: clamp(520px, 36vw, 700px); }
  .pcl-closing-cta .pcl-cta h2 { font-size: var(--fs-display-2); line-height: 1.02; }
  .pcl-closing-cta .pcl-cta__media img { aspect-ratio: 6 / 7; width: 100%; height: auto; object-fit: cover; }
}
@media (max-width: 600px) { .pcl-gallery-strip__paw-a { right: 5%; width: 96px; height: 96px; } }
.pcl .pcl-gallery-strip__lead { margin: 14px 0 0; max-width: 52ch; font-size: var(--fs-lead); line-height: 1.6; color: var(--text-muted); }
/* 2026-10-21: testimonials, FAQ and photo strip use the same tighter vertical padding as the service panels */
.pcl-testimonials .pcl-section__body,
.pcl-faq .pcl-section__body,
.pcl-gallery-strip .pcl-section__body { padding-top: calc(var(--section-y) * .6); padding-bottom: calc(var(--section-y) * .6); }
/* FAQ on white so it separates from the cream closing band below it (2026-10-21) */
.pcl-faq { background: #fff; }
/* 2026-10-21: photo strip + FAQ on a light tint of the logo cat's gray (#BCB0AD at 18%) instead of white — Kristy */
.pcl-gallery-strip, .pcl-faq { background: #F3F1F0; }
/* 2026-10-21: warmer, browner tint of the logo cat colour for the strip + FAQ (Kristy chose over the gray #F3F1F0) */
.pcl-gallery-strip, .pcl-faq { background: #F3E9E0; }
/* FAQ on the warm beige band: teal + circles (white sign) so they read, paw behind the questions, firmer dividers */
.pcl-faq__sign { background: #1F6B63; color: #fff; }
.pcl-faq__item:hover .pcl-faq__sign, .pcl-faq__item[data-open="true"] .pcl-faq__sign { background: var(--pcl-blossom-deep, #B8577A); color: #fff; }
.pcl-faq::after { z-index: 0; }
.pcl-faq .pcl-section__body { position: relative; z-index: 2; }
.pcl-faq__item, .pcl-faq__item[data-open="true"] { border-top-color: rgba(58,34,48,.14); }
/* FAQ + circles in the solid logo-cat colour (Kristy); dark plum sign for contrast; teal on hover/open */
.pcl-faq__sign { background: #BCAEAC; color: var(--pcl-plum); }
.pcl-faq__item:hover .pcl-faq__sign, .pcl-faq__item[data-open="true"] .pcl-faq__sign { background: #1F6B63; color: #fff; }
/* 2026-10-21: one shared column for every band (text, cards, photo rows, booking card) so right edges line up —
   the intro was capped at 48ch and cards/photo rows/booking ran wider than the text (Kristy) */
.pcl .pcl-band--intro .pcl-prose p { max-width: none; }
.pcl-band__inner > .pcl-prose:has(.pcl-cards),
.pcl-media, .pcl-booking { max-width: var(--read-max); }
.pcl-band__inner > .pcl-prose:has(.pcl-cards) > :not(.pcl-cards) { max-width: none; }
@media (min-width: 761px) {
  .pcl-prose ul.pcl-cards:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .pcl-prose ul.pcl-cards:has(> li:nth-child(5):last-child) > li { grid-column: span 2; }
  .pcl-prose ul.pcl-cards:has(> li:nth-child(5):last-child) > li:nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 761px) and (max-width: 1099px) { .pcl-prose ul.pcl-cards:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* 2026-10-21 (rev): the shared band column runs the full container width (logo edge to the header button /
   hero photo edge), capped at 1240px — the 960px column left the right side empty (Kristy) */
.pcl-page__bands { --band-max: 1240px; }
.pcl-band__inner > .pcl-prose,
.pcl-band__inner > .pcl-prose:has(.pcl-cards),
.pcl-media, .pcl-booking { max-width: min(100%, var(--band-max)); }
.pcl-band__inner > .pcl-prose > *, .pcl-band__inner > .pcl-prose:has(.pcl-cards) > :not(.pcl-cards) { max-width: none; }
.pcl-booking { grid-template-columns: minmax(240px, 320px) minmax(0,1fr); }
@media (min-width: 1100px) {
  .pcl-prose ul.pcl-cards:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .pcl-prose ul.pcl-cards:has(> li:nth-child(5):last-child) > li, .pcl-prose ul.pcl-cards:has(> li:nth-child(5):last-child) > li:nth-child(n+4) { grid-column: auto; }
}
/* 2026-10-21 (rev 2): every interior page uses the full container width — logo edge to the header button
   edge — instead of a narrow left column (Kristy: "crammed to the left … on all pages").
   Centred templates (Review Us, Thank You, 404/search) keep their own centred measure. */
.pcl-page { --read-max: 100%; }
.pcl-page__bands { --band-max: 100%; }
.pcl-page:has(.pcl-form-layout) .pcl-page__body > .pcl-prose,
.pcl-page:has(.pcl-gallery) .pcl-page__body > .pcl-prose { max-width: none; }
.pcl-page--thank-you { --read-max: 960px; }
.pcl-page:has(.pcl-review-us) { --read-max: 1100px; }
.pcl-page:has(.pcl-form-layout), .pcl-page:has(.pcl-gallery) { --read-max: 100%; }
/* Intro paragraph → first same-colour band: close the double padding (Kristy) */
.pcl-band--intro .pcl-band__inner { padding-bottom: 6px; }
.pcl-band--intro + .pcl-band:not(.pcl-band--shell) .pcl-band__inner { padding-top: clamp(18px,1.6667vw,32px); }
/* Fix: tight intro spacing ONLY when the next band is the same cream; before a blush band keep full padding */
.pcl-band--intro .pcl-band__inner { padding-bottom: clamp(48px,4.1667vw,80px); }
.pcl-band--intro:has(+ .pcl-band:not(.pcl-band--shell)) .pcl-band__inner { padding-bottom: 6px; }
/* ==========================================================================
   2026-10-21 spacing normalisation (read-only audit of the dev site, 18 pages x 4 widths)
   Append at the END of home.css. One section rhythm, one text rhythm, one card gap.
   Everything below overrides an earlier rule of the same specificity (later wins).
   ========================================================================== */
:root { --pcl-sy: clamp(48px, 4.1667vw, 80px); }   /* the band rhythm, the most common section padding today: 48 / 56@1350 / 80 */

/* 1. Section padding: bands, home panels, strapline, features, photo strip, testimonials and FAQ all use --pcl-sy
      (was 37 / 38 / 48 / 56 / 62.6 / 64.8 / 108 at 1350 and 37 / 38 / 48 / 64 at 375) */
.pcl-strapline__body,
.pcl-features .pcl-section__body,
.pcl-service__body,
.pcl-gallery-strip .pcl-section__body,
.pcl-testimonials .pcl-section__body,
.pcl-faq .pcl-section__body { padding-top: var(--pcl-sy); padding-bottom: var(--pcl-sy); }

/* 2. Title band + plain interior pages: top = --pcl-sy (was 5vw = 68 vs 29 below the title);
      bottom of the body = --pcl-sy (was 108 under 39 on top, doubling the gap to the footer / closing CTA / testimonials) */
.pcl-page-header__body { padding-top: var(--pcl-sy); }
.pcl-page__body { padding-bottom: var(--pcl-sy); }

/* 3. Stacked (<=960) hero + closing CTA: bottom padding matches the top (was 64 under 48; CTA 64 / 74) */
@media (max-width: 960px) {
  .pcl-hero__body { padding-bottom: var(--pcl-sy); }
  .pcl-cta__body { padding-top: var(--pcl-sy); padding-bottom: var(--pcl-sy); }
}
/* CTA photo was an inline image: its baseline gap added ~10px under the photo (top 48 / bottom 58 at every width) */
.pcl-cta__media img { display: block; }

/* 4. Paragraph gap: service-panel paragraphs use the same 1.1em as every .pcl-prose paragraph (was 14px) */
.pcl-service__text { gap: 1.1em; }

/* 5. Heading -> text: photo-strip lead 14 -> 20 (service h2 18, interior hero 20, closing CTA 20);
      Contact / Meet & Greet / Accessibility aside h2 11 -> 19 (same as every band h2 -> p) */
.pcl .pcl-gallery-strip__lead { margin-top: 20px; }
.pcl .pcl-form-layout__info h2 { margin-bottom: .85em; }

/* 6. Section head -> content: photo strip 34 -> 56 (testimonials 54, FAQ 57) */
.pcl-gallery-strip__head { margin-bottom: 56px; }

/* 7. Card / tile gap: 18px desktop, 12px mobile (the .pcl-cards value). Was features 20, gallery 16, strip 14 */
.pcl-features__grid { gap: 18px; }
.pcl-gallery-strip__row { gap: 18px; }
.pcl-gallery { column-gap: 18px; }
.pcl-gallery__item { margin-bottom: 18px; }
@media (max-width: 600px) {
  .pcl-gallery { column-gap: 12px; }
  .pcl-gallery__item { margin-bottom: 12px; }
}
@media (max-width: 960px) { .pcl-gallery-strip__row { gap: 12px; } }

/* 8. Stacked photo -> text: service panel (56) and closing CTA (56) drop to the 24px grid gap that band photo rows
      and the strapline already use. (Hero photos keep their larger gap: the stamp hangs below the photo.) */
@media (max-width: 960px) {
  .pcl-service__content { margin-top: 0; }
  .pcl-cta__media { margin-top: 0; }
}

/* 9. FAQ header: h2 -> intro 24 -> 20 once stacked (features / CTA use 20) */
@media (max-width: 960px) { .pcl-faq__head { row-gap: 20px; } }

/* 10. Testimonial cards stopped 24px short of the container's right edge (slide padding-right = grid gap).
       Pull the viewport out by that gap so the second card ends on the same edge as everything else (>=961 only;
       below that the existing negative margin already handles it). */
@media (min-width: 961px) { .pcl-carousel__viewport { margin-right: calc(var(--grid-gap) * -1); } }

/* 11. About: the title band's underline (h1 border-bottom) and the bands' top rule sat flush = a 2px line.
       Service pages keep the rule (it follows the hero, which has no underline). */
.pcl-page-header ~ .pcl-page__bands { border-top: 0; }
/* 2026-10-21: header nav fits inside the content edges from 1200px (was overshooting by up to 121px at 1200–1439
   after "Gallery" joined the top row). Spacing scales linearly from tight at 1200 to the original values at 1440. */
@media (min-width: 1200px) and (max-width: 1439px) {
  .pcl-header__inner { gap: calc(20px + (100vw - 1200px) * .05); }
  .pcl-header__services { --row-gap: calc(2px + (100vw - 1200px) * .0804); }
  .pcl-header__services .pcl-header__link { font-size: calc(14px + (100vw - 1200px) * .00417); padding-inline: calc(5px + (100vw - 1200px) * .0179); }
  /* 2026-10-29: after "Areas We Serve" joined, the top row only fits with smaller text too (chosen over
     switching to the burger). 14px / 8 / 6 / 4 at 1200 → 16px / 14 / 10 / 8 at 1440, meeting the band below. */
  .pcl-header__row:not(.pcl-header__services) { --row-gap: calc(8px + (100vw - 1200px) / 40); }
  .pcl-header__row:not(.pcl-header__services) .pcl-header__link { font-size: calc(14px + (100vw - 1200px) / 120); padding-inline: calc(6px + (100vw - 1200px) / 60); }
  .pcl-header__row .pcl-btn { margin-left: calc(4px + (100vw - 1200px) / 60); }
}
/* 2026-10-29: "Areas We Serve" (with dropdown) pushed the top row past the right edge up to ~1800px (1178px row vs
   981px free at 1440). Top-row spacing now tapers from tight at 1440 to the mockup's 54 / 16 / 14 at 1920. */
@media (min-width: 1440px) and (max-width: 1919.98px) {
  .pcl-header__row:not(.pcl-header__services) { --row-gap: calc(14px + (100vw - 1440px) / 12); }
  .pcl-header__row:not(.pcl-header__services) .pcl-header__link { padding-inline: calc(10px + (100vw - 1440px) / 80); }
  .pcl-header__row .pcl-btn { margin-left: calc(8px + (100vw - 1440px) / 80); }
}
/* FAQs page: question list on the same warm beige as the FAQ panels (Kristy) */
.pcl-page:has(.pcl-faq__list--page) .pcl-page__main { background: #F3E9E0; }
.pcl-faq__list--page .pcl-faq__item:last-child { border-bottom-color: rgba(58,34,48,.14); }
/* Gallery page: photo grid on the same warm beige (Kristy) */
.pcl-page:has(.pcl-gallery) .pcl-page__main { background: #F3E9E0; }
/* 2026-10-29: the services row (main nav) is the widest row and reaches further left than the top row (About …
   Book button), which sits right-aligned inside it. The top row no longer sizes the header column (width:0 /
   min-width:100%), so the services row sets the width. Main-nav lead over the top row: 68 @1200, 94 @1280,
   74 @1366, 82 @1440, 104 @1600, 150 @1920. The services gap is capped by the room beside the logo, tightest at
   1440 (16px spare). 1200–1439 also tapers the top-row text 13→16px and the button padding 14→20px. */
@media (min-width: 1200px) {
  .pcl-header__row:not(.pcl-header__services) { width: 0; min-width: 100%; justify-content: flex-end; }
  .pcl-header__row .pcl-btn { margin-left: 0; }
  .pcl-header__sep { margin-inline: 4px; }
}
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .pcl-header__services { --row-gap: calc(18px + (100vw - 1200px) * .0667); }
  .pcl-header__row:not(.pcl-header__services) { --row-gap: calc(2px + (100vw - 1200px) * .0125); }
  .pcl-header__row:not(.pcl-header__services) .pcl-header__link { font-size: calc(13px + (100vw - 1200px) / 80); padding-inline: calc(4px + (100vw - 1200px) / 40); }
  .pcl-header__row .pcl-btn { padding-inline: calc(14px + (100vw - 1200px) * .025); }
}
@media (min-width: 1440px) and (max-width: 1919.98px) {
  .pcl-header__services { --row-gap: calc(28px + (100vw - 1440px) * .075); }
  .pcl-header__row:not(.pcl-header__services) { --row-gap: calc(5px + (100vw - 1440px) * .05); }
}
@media (min-width: 1920px) {
  .pcl-header__services { --row-gap: 64px; }
  .pcl-header__row:not(.pcl-header__services) { --row-gap: 29px; }
}

/* 2026-10-30 Lindsay's feedback round */
/* About intro photo: square frame so her whole head and the dog's face both show (crop "B") */
.page-id-78 .pcl-band--intro .pcl-media__img { aspect-ratio: 1 / 1; object-position: 50% 55%; }
/* Home strapline: same photo, same crop B (Kristy 2026-10-31: the dog's face was cut off at 16:10) */
.pcl-strapline__media img { aspect-ratio: 1 / 1; object-position: 50% 55%; }
/* Six icon cards: 3 + 3 instead of 5 + an orphan */
@media (min-width: 761px) { .pcl-prose ul.pcl-cards:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* Coverage map: 380px minimum on tablet/desktop so the 15-town outline fits at whole-number zoom 7 (was 320) */
@media (min-width: 761px) { .pcl-coverage-map { height: clamp(380px, 22.9167vw, 440px); } }

/* 2026-10-31 launch review */
/* Gravity Forms prints a form with conditional logic as display:none and shows it once its rules
   have run, which pushed the info column down on phones (Contact CLS 0.58). Keep the form's space
   and hide only its content until then; GF's show() replaces the inline style. */
.pcl-form-layout .gform_wrapper[style*="display:none"],
.pcl-form-layout .gform_wrapper[style*="display: none"] { display: block !important; visibility: hidden; }
/* Turnstile's iframe arrives after load: reserve its 65px row. */
.ginput_container_turnstile { min-height: 65px; }

/* Inline SVG icons that replaced the text arrows and close glyphs. */
.pcl-icon { display: inline-block; flex-shrink: 0; vertical-align: -0.125em; }
/* External (off-site) text links that open a new tab get a small external-link icon (icon-only and logo links are left alone). */
a[target="_blank"]:not([href*="petcarebylindsay.com"]):not([href^="/"]):not(:has(img, svg, .pcl-btn__arrow))::after {
  content: ""; display: inline-block; width: .75em; height: .75em; margin-left: .3em; vertical-align: -.02em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 2026-10-31: the 10-21 full-width rule above set the booking card to two columns at every width,
   overriding the phone rule that stacks it; on phones the price overlapped the text and the button
   was squeezed into a strip (LambdaTest, Galaxy/iPhone). Stack it again below 761px. */
@media (max-width: 760px) {
  .pcl-booking { grid-template-columns: 1fr; }
}