/* ===========================================================================
   PETROPOLE — Design Tokens
   Café · Pet Grooming · Pet Hotel · Pantai Indah Kapuk, Jakarta

   Palette sampled from the shop's own photography (signage, grooming board,
   retail packaging, cups), not invented. Every text/background pair listed as
   "AA" or better has been measured against WCAG 2.1.

   Version 1.0 — 2026-08
   =========================================================================== */

:root {
  /* --- Core neutrals: the warm brown spine of the brand ------------------ */
  --pp-espresso: #1F1209;   /* darkest ground, headline ink                  */
  --pp-cocoa:    #3E2117;   /* grooming price board, dark panels             */
  --pp-bark:     #6B4A35;   /* mid brown, secondary text on light            */
  --pp-caramel:  #B8813C;   /* PRIMARY brand accent — the coat of the "P"    */
  --pp-biscuit:  #C9A87C;   /* light tan, dividers on dark                   */
  --pp-sand:     #D3C3B1;   /* shopfront render, cards and surfaces          */
  --pp-cream:    #F5EFE4;   /* default page ground                           */
  --pp-paper:    #FBF8F2;   /* lifted surfaces, cards on cream               */

  /* --- Service accents: one per revenue line ---------------------------- */
  --pp-clay:     #A9502F;   /* CAFÉ                                          */
  --pp-claret:   #7B2B2B;   /* retail / treats                               */
  --pp-plum:     #4A2C3F;   /* PET HOTEL — rest, night, calm                 */
  --pp-olive:    #6E6B35;   /* fresh / greens / seasonal                     */
  --pp-blush:    #EDADA8;   /* soft highlight, never for text                */

  /* --- Semantic surface + ink ------------------------------------------- */
  --pp-bg:            var(--pp-cream);
  --pp-surface:       var(--pp-paper);
  --pp-surface-sunk:  var(--pp-sand);
  --pp-border:        color-mix(in srgb, var(--pp-bark) 22%, transparent);
  --pp-border-strong: color-mix(in srgb, var(--pp-bark) 40%, transparent);

  --pp-text:        var(--pp-espresso); /* 15.97:1 on cream — AAA            */
  --pp-text-muted:  var(--pp-bark);     /*  6.91:1 on cream — AA             */
  --pp-text-invert: var(--pp-cream);

  /* Caramel is a MARK colour, not a text colour: 2.94:1 on cream fails AA.
     Use --pp-accent-ink for any caramel-coloured wording on a light ground. */
  --pp-accent:      var(--pp-caramel);
  --pp-accent-ink:  var(--pp-clay);     /*  4.73:1 on cream — AA             */
  --pp-on-accent:   var(--pp-espresso); /*  5.44:1 on caramel — AA           */

  --pp-svc-cafe:     var(--pp-clay);
  --pp-svc-grooming: var(--pp-caramel);
  --pp-svc-hotel:    var(--pp-plum);

  /* --- Type ------------------------------------------------------------- */
  /* Type follows the printed PETROPOLE price list (04-Guidelines):
       Cocogoose Pro Bold  → headings        → Montserrat 800 (licensed stand-in)
       Lexend Giga         → labels & prices → Lexend Giga (exact, SIL OFL)
       Minion Italic       → descriptors     → EB Garamond Italic (stand-in)
     Body sits in Lexend, the regular-width sibling of the list's own face, so
     long copy and the price boards read as one family. Swap the two stand-ins
     for the real faces here if the studio licenses them for web. */
  --pp-font-display: "Cocogoose Pro", "Montserrat", system-ui, sans-serif;
  --pp-font-body:    "Lexend", system-ui, -apple-system, sans-serif;
  --pp-font-label:   "Lexend Giga", "Lexend", system-ui, sans-serif;
  --pp-font-accent:  "EB Garamond", Georgia, "Times New Roman", serif;

  --pp-weight-display: 800;     /* Cocogoose/Montserrat heading weight       */

  --pp-track-wordmark: 0.06em;  /* the lockup itself                         */
  --pp-track-display:  0.005em; /* the printed list sets its headings tight  */
  --pp-track-eyebrow:  0.18em;  /* small caps labels, menu headers           */
  --pp-track-label:    0.12em;  /* Lexend Giga caps on the boards            */
  --pp-track-body:     0em;

  /* Fluid display scale — 1.25 minor third, clamped for mobile → desktop */
  --pp-size-display: clamp(2.5rem, 1.6rem + 4.4vw, 5rem);
  --pp-size-h1:      clamp(2rem, 1.4rem + 2.8vw, 3.25rem);
  --pp-size-h2:      clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --pp-size-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --pp-size-body:    1.0625rem;
  --pp-size-small:   0.875rem;
  --pp-size-eyebrow: 0.75rem;

  --pp-leading-tight: 1.05;
  --pp-leading-snug:  1.25;
  --pp-leading-body:  1.65;

  /* --- Space: 4px base -------------------------------------------------- */
  --pp-space-1: 0.25rem;  --pp-space-2: 0.5rem;   --pp-space-3: 0.75rem;
  --pp-space-4: 1rem;     --pp-space-5: 1.5rem;   --pp-space-6: 2rem;
  --pp-space-7: 3rem;     --pp-space-8: 4rem;     --pp-space-9: 6rem;

  /* --- Radius: generous and soft, echoing the rounded bowl of the "P" ---- */
  --pp-radius-sm:   6px;
  --pp-radius-md:   12px;
  --pp-radius-lg:   20px;
  --pp-radius-xl:   32px;
  --pp-radius-full: 999px;

  /* --- Elevation: warm-tinted, never neutral grey ----------------------- */
  --pp-shadow-sm: 0 1px 2px rgba(31, 18, 9, 0.06),
                  0 2px 6px rgba(31, 18, 9, 0.05);
  --pp-shadow-md: 0 2px 4px rgba(31, 18, 9, 0.06),
                  0 8px 20px rgba(31, 18, 9, 0.09);
  --pp-shadow-lg: 0 4px 8px rgba(31, 18, 9, 0.07),
                  0 20px 48px rgba(31, 18, 9, 0.13);

  --pp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pp-dur-fast: 140ms;
  --pp-dur-base: 240ms;
  --pp-dur-slow: 420ms;

  --pp-measure: 68ch;      /* max line length for body copy */
}





@media (prefers-reduced-motion: reduce) {
  :root { --pp-dur-fast: 0ms; --pp-dur-base: 0ms; --pp-dur-slow: 0ms; }
}

/* ============================================================================
   PETROPOLE — site styles. Built on petropole-tokens.css (prepended at build).
   The site commits deliberately to the light/cream theme: the brand's world
   is warm cream ground + espresso panels, with Clay reserved for conversion.
   ========================================================================= */

/* ---- fonts (self-hosted variable latin subsets) -------------------------
   These mirror the printed price list: Montserrat stands in for Cocogoose Pro
   on headings, Lexend Giga is the list's own label face, EB Garamond Italic
   stands in for Minion Italic, and Lexend carries body copy. See
   02-Visual-Identity/typography/typography.md. -------------------------- */
@font-face { font-family: "Montserrat"; font-weight: 600 800; font-display: swap;
  src: url(/assets/fonts/Montserrat-Variable.woff2) format("woff2"); }
@font-face { font-family: "Lexend"; font-weight: 300 700; font-display: swap;
  src: url(/assets/fonts/Lexend-Variable.woff2) format("woff2"); }
@font-face { font-family: "Lexend Giga"; font-weight: 300 700; font-display: swap;
  src: url(/assets/fonts/LexendGiga-Variable.woff2) format("woff2"); }
@font-face { font-family: "EB Garamond"; font-weight: 400 600; font-display: swap;
  src: url(/assets/fonts/EBGaramond-Variable.woff2) format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 500;
  font-display: swap;
  src: url(/assets/fonts/EBGaramond-Italic-Variable.woff2) format("woff2"); }

/* ---- base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* author display rules (e.g. .btn's inline-flex) must never resurrect [hidden] */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--pp-bg); color: var(--pp-text);
  font-family: var(--pp-font-body); font-size: var(--pp-size-body);
  line-height: var(--pp-leading-body); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; max-width: var(--pp-measure); }
h1, h2, h3, h4 { font-family: var(--pp-font-display);
  font-weight: var(--pp-weight-display); line-height: var(--pp-leading-tight);
  letter-spacing: var(--pp-track-display); margin: 0 0 .5em; text-wrap: balance; }
/* A real scale, set as size + leading + tracking together: large type
   tightens, small headings open up. h2 used to fall back to the browser's
   1.5em, which is why section titles read smaller than the cards under them. */
h1 { letter-spacing: -0.02em; }
h2 { font-size: var(--pp-size-h2); line-height: 1.12; letter-spacing: -0.012em;
  margin-bottom: .45em; }
h3 { font-size: 1.2rem; line-height: 1.25; letter-spacing: 0; }
/* heading group: eyebrow hugs the heading, lede sits close under it */
h2 + .lede, h1 + .lede { margin-top: -.1em; }
::selection { background: color-mix(in srgb, var(--pp-caramel) 38%, transparent);
  color: var(--pp-espresso); }
/* Lexend Giga caps — the printed list's label voice, used on price boards,
   menu item names and section markers. */
.label-caps { font-family: var(--pp-font-label); font-weight: 400;
  text-transform: uppercase; letter-spacing: var(--pp-track-label); }
a { color: var(--pp-accent-ink); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 3px; border-radius: 3px; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--pp-espresso); color: var(--pp-cream); padding: .6rem 1rem; }
.skip-link:focus { left: 0; }
main { display: block; }

.eyebrow { font-family: var(--pp-font-label); font-weight: 500;
  font-size: var(--pp-size-eyebrow);
  letter-spacing: var(--pp-track-eyebrow); text-transform: uppercase;
  color: var(--pp-accent-ink); margin: 0 0 .65rem; }
/* district accent rides on the label colour itself, no decorative rule */
.d-grooming { --district: var(--pp-svc-grooming); }
.d-hotel    { --district: var(--pp-svc-hotel); }
.d-cafe     { --district: var(--pp-svc-cafe); }

/* ---- buttons ------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; font-family: var(--pp-font-body); font-weight: 700;
  font-size: .95rem; text-decoration: none; cursor: pointer;
  border-radius: var(--pp-radius-full); padding: .72rem 1.5rem;
  min-height: 44px; border: 1.5px solid transparent;
  transition: background var(--pp-dur-fast) var(--pp-ease),
              color var(--pp-dur-fast) var(--pp-ease),
              border-color var(--pp-dur-fast) var(--pp-ease); }
/* Conversion actions only — Clay is the booking colour, nothing else's */
.btn-solid { background: var(--pp-clay); color: var(--pp-cream); }
.btn-solid:hover { background: #8F4226; }
.btn-line { border-color: var(--pp-border-strong); color: var(--pp-text); background: transparent; }
.btn-line:hover { border-color: var(--pp-text); }
.btn-cream { background: var(--pp-cream); color: var(--pp-espresso); }
.btn-cream:hover { background: var(--pp-paper); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- header ------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--pp-cream) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--pp-border); }
.header-in { max-width: 1200px; margin: 0 auto; padding: .8rem 1.25rem;
  display: flex; align-items: center; gap: 1.5rem; }
.brand { display: inline-flex; }
.logo-h { height: 26px; width: auto; }
.site-nav { display: flex; gap: 1.4rem; margin-left: .5rem; }
.site-nav a { font-weight: 500; font-size: .95rem; text-decoration: none;
  color: var(--pp-text); padding: .3rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--pp-border-strong); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--pp-caramel); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.lang { font-weight: 700; font-size: .8rem; letter-spacing: .08em;
  text-decoration: none; color: var(--pp-text-muted); padding: .4rem .2rem; }
.lang:hover { color: var(--pp-text); }
.btn-book { padding: .55rem 1.25rem; }
.nav-toggle { display: none; }

.mobile-menu { border-top: 1px solid var(--pp-border); background: var(--pp-cream);
  padding: 1.2rem 1.25rem 1.6rem; }
.mobile-menu nav { display: grid; gap: .2rem; }
.mobile-menu nav a { font-family: var(--pp-font-display); font-weight: 700;
  font-size: 1.35rem; text-decoration: none; color: var(--pp-text);
  padding: .55rem 0; border-bottom: 1px solid var(--pp-border); }
.mobile-menu nav a[aria-current="page"] { color: var(--pp-accent-ink); }
.mobile-menu-foot { display: flex; flex-wrap: wrap; align-items: center;
  gap: .8rem; padding-top: 1.2rem; }

@media (max-width: 860px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 44px; height: 44px; padding: 10px; background: none;
    border: 0; cursor: pointer; }
  .nav-toggle span { display: block; height: 2px; background: var(--pp-text);
    border-radius: 2px; transition: transform var(--pp-dur-base) var(--pp-ease),
      opacity var(--pp-dur-base) var(--pp-ease); }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .btn-book { display: none; }            /* booking lives in menu + bottom bar */
}

/* ---- layout primitives -------------------------------------------------- */
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 1.25rem; }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding-inline: 1.25rem; }
/* Section rhythm: generous between sections (two paddings meet), tight inside
   a heading group. Scales with the viewport so wide screens breathe. */
section { padding-block: clamp(3.5rem, 2.4rem + 3.6vw, 6rem); }
.section-tight { padding-block: clamp(2.75rem, 1.9rem + 2.8vw, 4.5rem); }
.lede { font-size: 1.15rem; color: var(--pp-text-muted); max-width: 58ch; }

/* espresso statement panel */
.panel-dark { background: var(--pp-espresso); color: var(--pp-cream); }
.panel-dark .eyebrow { color: var(--pp-biscuit); }
.panel-dark a { color: var(--pp-biscuit); }
.panel-dark p { color: var(--pp-sand); }
.panel-dark h2, .panel-dark h3 { color: var(--pp-cream); }

/* media + text editorial split */
.split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 861px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; }
  .split.flip > .split-media { order: 2; }
}
.split-media img { border-radius: var(--pp-radius-lg); width: 100%;
  box-shadow: var(--pp-shadow-md); }
/* photos are ≤640px wide — never let the layout upscale them */
.split-media { max-width: 560px; }
.split.flip .split-media { justify-self: end; }

/* ---- hero (inner pages + 404) ------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: var(--pp-space-8) var(--pp-space-8); }
.hero h1 { font-size: var(--pp-size-display); max-width: 19ch; margin-bottom: .35em; }
.hero .lede { margin-bottom: 1.6rem; }
.hero-tagline { font-family: var(--pp-font-accent); font-style: italic;
  color: var(--pp-accent-ink); font-size: clamp(1.05rem, .9rem + .8vw, 1.4rem); }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero .mark-fur { position: absolute; right: -4%; bottom: -12%;
  width: clamp(260px, 32vw, 460px); height: auto; opacity: .16; pointer-events: none; }
@media (max-width: 640px) { .hero .mark-fur { width: 240px; right: -60px; opacity: .12; } }

/* ============== HOME HERO — viewport-height, photo strip base ============= */
/* The text and the strip share one column: the text takes what it needs, the
   strip takes the rest. The strip used to be pinned to the base with
   viewport-derived heights, so on wide-but-short screens it rose into the
   headline and hid the tagline. Now the two cannot meet. */
.hs { position: relative; height: calc(100svh - 65px); min-height: 640px;
  max-height: 1100px; overflow: hidden; display: flex; flex-direction: column;
  padding: 0; }

.hs-text { position: relative; z-index: 5; text-align: center;
  padding: clamp(2.25rem, 6.5vh, 4.75rem) clamp(170px, 15vw, 230px) 0; }
/* never shorter than the side cards, or the strip would rise into them */
.hs-text { min-height: calc(46px + clamp(112px, 9.5vw, 165px) * 1.62 + 4rem); }
.hs-text p { max-width: none; margin-inline: auto; }
.hs-eyebrow { margin-bottom: .7rem; }
/* The accent serif takes the display role here — the editorial statement of
   the template. Everywhere else stays on the heading face. */
.hs-h1 { font-family: var(--pp-font-accent); font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 6.6rem); line-height: .98;
  letter-spacing: -0.015em; color: var(--pp-espresso); margin: 0; }
.hs-line { display: block; }
.hs-word { display: inline-block; }
.hs-tagline { font-family: var(--pp-font-accent); font-style: italic;
  color: var(--pp-accent-ink); font-size: clamp(.98rem, .85rem + .6vw, 1.25rem);
  margin: 1rem auto 0; max-width: none; }
.hs-cta-m { display: none; margin-top: 1.2rem; }

/* --- side cards (desktop/tablet: absolute) --- */
.hs-card { display: block; text-decoration: none; color: var(--pp-text); }
.hs-card-img { position: relative; display: block; border-radius: var(--pp-radius-lg);
  overflow: hidden; box-shadow: var(--pp-shadow-md);
  transition: transform var(--pp-dur-base) var(--pp-ease),
              box-shadow var(--pp-dur-base) var(--pp-ease); }
.hs-card:hover .hs-card-img { transform: translateY(-4px); box-shadow: var(--pp-shadow-lg); }
.hs-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The strip reuses the same three photographs (only three exist — see
   CONTENT-REQUIREMENTS.md #15): cards therefore show tight detail crops so
   they read as different images from the full scenes below. */
.hs-card-shop .hs-card-img img { transform: scale(1.7); transform-origin: 48% 62%; }
.hs-card-ig .hs-card-img img { transform: scale(1.55); transform-origin: 50% 58%; }
.hs-card-arrow { position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px;
  border-radius: 50%; background: var(--pp-espresso); color: var(--pp-cream);
  display: grid; place-items: center; font-size: 1.05rem;
  box-shadow: 0 6px 14px -4px rgba(31,18,9,.4);
  transition: transform var(--pp-dur-fast) var(--pp-ease); }
.hs-card:hover .hs-card-arrow { transform: translate(2px, -2px); }
.hs-play { position: absolute; left: 50%; bottom: 14px; translate: -50% 0;
  width: 44px; height: 44px; border-radius: 50%; background: var(--pp-espresso);
  color: var(--pp-cream); display: grid; place-items: center; font-size: .8rem;
  padding-left: 3px; box-shadow: 0 6px 14px -4px rgba(31,18,9,.45); }
.hs-card-sub { display: block; margin-top: .6rem;
  font-size: clamp(.72rem, .65rem + .3vw, .85rem); color: var(--pp-text-muted); }
.hs-card-title { display: block; font-family: var(--pp-font-display); font-weight: 700;
  font-size: clamp(.9rem, .8rem + .4vw, 1.05rem); color: var(--pp-espresso); }
.hs-abs-l { position: absolute; z-index: 20; top: 46px; left: 3rem;
  width: clamp(150px, 12.5vw, 230px); }
.hs-abs-r { position: absolute; z-index: 20; top: 46px; right: 3rem;
  width: clamp(112px, 9.5vw, 165px); }
.hs-cards-m, .hs-stats-m { display: none; }

/* --- bottom photo strip (anchored to the hero base, template-style) --- */
.hs-strip { position: relative; z-index: 10; flex: 1 1 auto; min-height: 240px;
  margin-top: clamp(1.75rem, 4vh, 3rem); display: flex; align-items: flex-end; }
.hs-panel { flex: 1; margin: 0; position: relative; min-width: 0;
  height: 80%; overflow: hidden; }
.hs-panel-c { flex: 1.265; height: 100%; }
.hs-panel img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
/* scrim so overlays stay readable on any photo */
.hs-panel::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(180deg, transparent, rgba(31,18,9,.55));
  pointer-events: none; }
.hs-ov { position: absolute; z-index: 2; bottom: clamp(18px, 4vh, 48px); margin: 0; }
.hs-ov-l { left: clamp(14px, 2.5vw, 40px); display: flex; align-items: baseline;
  gap: .45rem; color: var(--pp-cream); }
.hs-ov-l strong { font-family: var(--pp-font-display); font-size: clamp(1.5rem, 2.6vw, 2.3rem); }
.hs-ov-l span { font-size: .82rem; opacity: .85; }
.hs-star { font-style: normal; color: var(--pp-caramel); }
.hs-ov-c { left: 50%; translate: -50% 0; display: grid; gap: .8rem;
  justify-items: center; text-align: center; width: max-content; max-width: 92%; }
.hs-ov-h { font-family: var(--pp-font-display); font-weight: 700;
  color: var(--pp-cream); font-size: clamp(1.1rem, 2.2vw, 1.9rem);
  line-height: 1.15; text-wrap: balance;
  text-shadow: 0 2px 14px rgba(31,18,9,.5); }
.hs-ov-r { right: clamp(14px, 2.5vw, 40px); }
.hs-ov-r a { color: var(--pp-cream); text-decoration: none; font-weight: 500;
  font-size: .85rem; border: 1px solid rgba(245,239,228,.5);
  border-radius: var(--pp-radius-full); padding: .45rem 1rem; display: inline-block;
  backdrop-filter: blur(4px); background: rgba(31,18,9,.25); }
.hs-ov-r a:hover { background: rgba(31,18,9,.5); }

/* --- tablet --- */
@media (max-width: 1023px) {
  .hs-abs-l { left: 1rem; width: 150px; top: 80px; }
  .hs-abs-r { right: 1rem; width: 116px; top: 80px; }
  /* reserve the side-card lanes so the headline never clips their captions */
  .hs-text { padding-inline: clamp(130px, 16vw, 175px);
    min-height: calc(80px + 116px * 1.62 + 4rem); }
  .hs-h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
}

/* --- mobile: everything flows, strip returns to normal document flow --- */
@media (max-width: 767px) {
  .hs { height: auto; min-height: 0; max-height: none; }
  .hs-strip { flex: none; min-height: 0; margin-top: 0; }
  .hs-panel, .hs-panel-c { height: auto; }
  .hs-panel img { position: static; height: auto; }
  .hs-abs-l, .hs-abs-r { display: none; }
  .hs-text { padding-inline: 1.25rem; min-height: 0; }   /* cards are hidden — undo tablet lanes */
  .hs-cta-m { display: block; }
  .hs-h1 { font-size: clamp(2.35rem, 10.5vw, 3rem); }
  .hs-cards-m { display: flex; gap: .8rem; padding: 1.6rem 1.25rem 0;
    align-items: flex-start; }
  .hs-cards-m .hs-card { flex: 1; min-width: 0; }
  .hs-cards-m .hs-card-shop .hs-card-img { aspect-ratio: 1 / 1 !important; }
  .hs-cards-m .hs-card-ig .hs-card-img { aspect-ratio: 3 / 4 !important; }
  .hs-stats-m { display: flex; align-items: center; justify-content: center;
    gap: 1.1rem; padding: 1.2rem 1.25rem 1.5rem; font-size: .92rem;
    color: var(--pp-text-muted); }
  .hs-stats-m strong { font-family: var(--pp-font-display); font-size: 1.25rem;
    color: var(--pp-text); }
  .hs-div { width: 1px; height: 22px; background: var(--pp-border-strong); }
  .hs-panel img, .hs-panel-c img { max-height: none; }
  /* overlays fold into the stats row + hero CTA on mobile */
  .hs-ov-l, .hs-ov-r, .hs-ov-c { display: none; }
  .hs-panel::after { display: none; }
}

/* ================= TEMPLATE ANIMATION SYSTEM ============================== */
@media (prefers-reduced-motion: no-preference) {
  .fade-up { animation: hsFadeUp .8s cubic-bezier(.16,1,.3,1) both; }
  .fade-in { animation: hsFadeIn .6s ease-out both; }
  .slide-l { animation: hsSlideL .8s cubic-bezier(.16,1,.3,1) both; }
  .slide-r { animation: hsSlideR .8s cubic-bezier(.16,1,.3,1) both; }
  .scale-in { animation: hsScaleIn .7s cubic-bezier(.16,1,.3,1) both; }
  .photo-r { animation: hsPhotoR 1.1s cubic-bezier(.16,1,.3,1) both; }
  .hs-word { opacity: 0; animation: hsWordPop .9s cubic-bezier(.34,1.56,.64,1) both; }
}
@keyframes hsFadeUp { from { opacity: 0; transform: translateY(30px); } }
@keyframes hsFadeIn { from { opacity: 0; } }
@keyframes hsSlideL { from { opacity: 0; transform: translateX(-40px); } }
@keyframes hsSlideR { from { opacity: 0; transform: translateX(40px); } }
@keyframes hsScaleIn { from { opacity: 0; transform: scale(.85); } }
@keyframes hsPhotoR { from { opacity: 0; transform: translateY(80px) scale(1.02); } }
@keyframes hsWordPop {
  0%   { opacity: 0; transform: translateY(60px) scale(.7) rotate(-4deg); filter: blur(8px); }
  60%  { opacity: 1; transform: translateY(-7px) scale(1.04) rotate(1deg); filter: blur(0); }
  80%  { transform: translateY(3px) scale(.99); }
  100% { opacity: 1; transform: none; }
}
.d1 { animation-delay: .1s; } .d2 { animation-delay: .2s; } .d3 { animation-delay: .3s; }
.d4 { animation-delay: .4s; } .d5 { animation-delay: .5s; } .d6 { animation-delay: .6s; }
.d7 { animation-delay: .7s; } .d8 { animation-delay: .8s; } .d9 { animation-delay: .9s; }
.d10 { animation-delay: 1s; } .d11 { animation-delay: 1.1s; } .d12 { animation-delay: 1.2s; }

/* page hero (inner pages) */
.page-hero { padding-block: var(--pp-space-7) var(--pp-space-6); }
/* headings run the full column: a 16ch cap broke short titles onto two lines */
.page-hero h1 { font-size: var(--pp-size-h1); max-width: none; }
/* The section right under a page hero belongs to it: without this its own
   section padding stacked on the hero's, and content dropped ~110px below the
   title on every inner page. */
.page-hero > :last-child { margin-bottom: 0; }
.page-hero + :is(section, div) { padding-top: clamp(.5rem, .2rem + 1vw, 1.25rem); }

/* ---- home: district bento ---------------------------------------------
   Ported from the 21st.dev FUI bento (big graphic, blurred text panel over its
   base), recoloured to cream/espresso. Outer corners round large, inner ones
   small, so the three cards read as one cut object. ----------------------- */
.db { padding-top: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); }
.db-grid { display: grid; gap: .9rem; }
@media (min-width: 861px) {
  .db-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: repeat(2, minmax(290px, 1fr)); }
  .db-groom { grid-row: 1 / 3; }
}
.db-card { --r-out: 28px; --r-in: 10px; position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 340px; overflow: hidden; text-decoration: none;
  color: var(--pp-cream); background: var(--pp-espresso);
  border-radius: var(--r-in); box-shadow: var(--pp-shadow-md);
  transition: transform var(--pp-dur-fast) var(--pp-ease),
              box-shadow var(--pp-dur-base) var(--pp-ease); }
.db-groom { border-radius: var(--r-out) var(--r-in) var(--r-in) var(--r-out); }
.db-hotel { border-top-right-radius: var(--r-out); }
.db-cafe  { border-bottom-right-radius: var(--r-out); }
@media (max-width: 860px) {
  .db-groom { border-radius: var(--r-out) var(--r-out) var(--r-in) var(--r-in); min-height: 420px; }
  .db-hotel { border-radius: var(--r-in); }
  .db-cafe  { border-radius: var(--r-in) var(--r-in) var(--r-out) var(--r-out); }
}
.db-card:hover { box-shadow: var(--pp-shadow-lg); }
.db-card:active { transform: scale(.99); transition-duration: 80ms; }
.db-media { position: absolute; inset: 0; z-index: -1; }
.db-media img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--pp-ease); }
.db-groom .db-media img { object-position: 50% 40%; }
.db-card:hover .db-media img { transform: scale(1.035); }

/* the frosted caption: a material layer, not a scrim */
.db-panel { position: relative; margin: .75rem; padding: 1.15rem 1.25rem 1.2rem;
  border-radius: calc(var(--r-in) + 6px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1.25rem;
  align-items: end;
  background: color-mix(in srgb, var(--pp-espresso) 58%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(245,239,228,.16), 0 10px 30px -12px rgba(31,18,9,.5); }
.db-name { grid-column: 1; margin: 0; color: var(--pp-cream);
  font-size: clamp(1.55rem, 1.15rem + 1.3vw, 2.15rem); line-height: 1.05;
  letter-spacing: -0.015em; }
.db-role { grid-column: 1; font-size: .95rem; line-height: 1.5;
  color: var(--pp-sand); max-width: 46ch; }
.db-go { grid-column: 2; grid-row: 1 / 3; align-self: end; width: 44px; height: 44px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--pp-cream); color: var(--pp-espresso);
  transition: transform var(--pp-dur-base) var(--pp-ease); }
.db-card:hover .db-go { transform: translateX(3px); }
.db-card:focus-visible { outline: 3px solid var(--pp-caramel); outline-offset: 3px; }

/* hotel has no photograph yet: its graphic is the day itself, from the card */
.db-hotel { background:
  radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--pp-caramel) 30%, transparent), transparent 60%),
  var(--pp-espresso); }
.db-hotel { justify-content: space-between; }
.db-stay { position: relative;   /* in flow, so the chips can never slide under the panel */
  padding: 1.5rem 1.75rem; display: grid; gap: .9rem; }
.db-stay-time { font-family: var(--pp-font-display); font-weight: 800;
  font-size: clamp(3rem, 2rem + 3vw, 4.75rem); line-height: .9;
  letter-spacing: -0.03em; color: var(--pp-cream); font-variant-numeric: tabular-nums; }
.db-stay-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.db-stay-list span { font-size: .8rem; color: var(--pp-sand);
  border: 1px solid rgba(245,239,228,.22); border-radius: var(--pp-radius-full);
  padding: .3rem .8rem; }

@media (prefers-reduced-transparency: reduce) {
  .db-panel { background: var(--pp-espresso); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .db-media img, .db-go, .db-card { transition: none; }
  .db-card:hover .db-media img, .db-card:hover .db-go { transform: none; }
}

/* proof bar */
.proof { display: flex; flex-wrap: wrap; gap: 1rem 3rem;
  padding-block: 1.4rem; border-top: 1px solid var(--pp-border);
  color: var(--pp-text-muted); font-size: .92rem; align-items: baseline; }
.proof strong { font-family: var(--pp-font-display); font-weight: 700;
  font-size: 1.5rem; color: var(--pp-text); margin-right: .4rem; }

/* ---- price board (echoes the physical shop board) ----------------------- */
.board { background: var(--pp-cocoa); color: var(--pp-cream);
  border-radius: var(--pp-radius-lg); padding: 2rem clamp(1.2rem, 4vw, 2.6rem);
  box-shadow: var(--pp-shadow-md); }
.board-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--pp-biscuit) 35%, transparent);
  padding-bottom: 1rem; margin-bottom: .4rem; }
.board-head h3 { margin: 0; color: var(--pp-cream); letter-spacing: .04em; }
.board-credit { font-family: var(--pp-font-accent); font-style: italic;
  color: var(--pp-biscuit); font-size: .95rem; }
.board-scroll { overflow-x: auto; }
.board table { border-collapse: collapse; width: 100%; min-width: 430px;
  font-variant-numeric: tabular-nums; }
.board th { font-weight: 700; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pp-biscuit); text-align: left;
  padding: .85rem .8rem .5rem; white-space: nowrap; }
.board th + th, .board td + td { text-align: center; }
.board td { padding: .7rem .8rem; color: var(--pp-cream); font-size: .98rem;
  border-top: 1px solid color-mix(in srgb, var(--pp-biscuit) 18%, transparent); }
.board td.muted, .board .board-foot { color: var(--pp-biscuit); }
.board .board-foot { font-size: .88rem; margin: 1rem 0 0; max-width: none; }
.board .board-foot a { color: var(--pp-cream); }

/* ---- process steps ------------------------------------------------------ */
.steps { display: grid; gap: 1rem; counter-reset: step; padding: 0; margin: 0; list-style: none; }
@media (min-width: 861px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } }
.step { background: var(--pp-surface); border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-md); padding: 1.3rem 1.4rem; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--pp-font-display); font-weight: 700; font-size: .85rem;
  color: var(--district, var(--pp-caramel)); letter-spacing: .1em; }
.step h3 { font-size: 1.15rem; margin: .5rem 0 .35rem; }
.step p { font-size: .93rem; color: var(--pp-text-muted); margin: 0; max-width: none; }

/* ---- trust list (pet hotel) --------------------------------------------- */
.trust { display: grid; gap: 1px; background: var(--pp-border);
  border: 1px solid var(--pp-border); border-radius: var(--pp-radius-md); overflow: hidden; }
.trust-item { background: var(--pp-surface); padding: 1.3rem 1.4rem; }
.trust-item h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.trust-item p { font-size: .93rem; color: var(--pp-text-muted); margin: 0; }

/* ---- product list (shop) ------------------------------------------------ */
.products { list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--pp-border); }
.products li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem;
  padding: 1.05rem .2rem; border-bottom: 1px solid var(--pp-border); }
.products .p-name { font-family: var(--pp-font-display); font-weight: 700;
  font-size: 1.15rem; }
.products .p-note { color: var(--pp-text-muted); font-size: .9rem; }

/* ---- menu highlight (café) ---------------------------------------------- */
.menu-card { border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg);
  background: var(--pp-surface); padding: 1.8rem; }
.menu-card h3 { margin-bottom: .2rem; }
.menu-credit { font-family: var(--pp-font-accent); font-style: italic;
  color: var(--pp-accent-ink); }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.chip { font-size: .82rem; font-weight: 500; color: var(--pp-text-muted);
  border: 1px solid var(--pp-border-strong); border-radius: var(--pp-radius-full);
  padding: .3rem .85rem; }

/* ---- visit -------------------------------------------------------------- */
.visit-body { padding-bottom: clamp(2.75rem, 1.9rem + 2.8vw, 4.5rem); display: grid; gap: 1.2rem; }
.visit-map { position: relative; border-radius: var(--pp-radius-lg); overflow: hidden;
  border: 1px solid var(--pp-border); background: var(--pp-sand); min-height: 460px; }
.visit-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  filter: sepia(.25) saturate(.85); }
.visit-pin { position: relative; z-index: 1; margin: 1rem; width: min(310px, calc(100% - 2rem));
  background: var(--pp-paper); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-md);
  padding: 1.05rem 1.15rem; box-shadow: 0 14px 32px -16px rgba(31,18,9,.45); }
.visit-pin .eyebrow { margin-bottom: .35rem; }
.visit-pin h2 { font-size: 1.05rem; margin: 0 0 .3rem; }
.visit-pin address { font-style: normal; color: var(--pp-text-muted); font-size: .84rem; line-height: 1.5; }
.visit-plus { margin: .5rem 0 0; font-size: .8rem; }
.visit-plus span { font-variant-numeric: tabular-nums; font-weight: 600; }
.visit-pin .contact-strip { margin-top: .85rem; gap: .5rem; }
.visit-pin .btn { min-height: 38px; padding: .5rem 1rem; font-size: .84rem; }
.visit-note { font-size: .9rem; color: var(--pp-text-muted); margin: .8rem 0 0; }
.visit-grid { display: grid; gap: 1.2rem; }
@media (min-width: 861px) { .visit-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .visit-map { min-height: 0; display: flex; flex-direction: column; }
  .visit-map iframe { position: static; height: 300px; order: -1; }
  .visit-pin { margin: 0; width: 100%; border: 0; border-radius: 0; box-shadow: none; }
}
.visit-card { background: var(--pp-surface); border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-md); padding: 1.5rem 1.6rem; }
.visit-card h2 { font-size: 1.05rem; letter-spacing: .04em; }
.visit-card address { font-style: normal; color: var(--pp-text-muted); }
.visit-card ul { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .45rem; }
.contact-strip { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }

/* ---- forms / booking ---------------------------------------------------- */
.booking-shell { max-width: 640px; margin-inline: auto; }
.progress { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.8rem; }
.progress-bar { flex: 1; height: 4px; border-radius: 4px;
  background: var(--pp-sand); overflow: hidden; }
.progress-bar i { display: block; height: 100%; background: var(--pp-clay);
  width: 0; transition: width var(--pp-dur-base) var(--pp-ease); }
.progress-label { font-size: .78rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pp-text-muted); white-space: nowrap; }
.route-note { font-size: .85rem; color: var(--pp-text-muted); }
.route-note code { font-family: var(--pp-font-body); background: var(--pp-surface);
  border: 1px solid var(--pp-border); border-radius: 6px; padding: .1rem .5rem; }

.bstep[hidden] { display: none; }
.bstep h1, .bstep h2 { font-size: var(--pp-size-h2); }
/* programmatic focus target for step changes — keep it, but without a ring */
.bstep h2[tabindex="-1"]:focus { outline: none; }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: .4rem; }
.field .hint { font-weight: 400; color: var(--pp-text-muted); font-size: .85rem; }
input[type="text"], input[type="tel"], input[type="date"], input[type="number"], input[type="email"], input[type="password"],
select, textarea {
  width: 100%; font: inherit; color: var(--pp-text);
  background: var(--pp-paper); border: 1.5px solid var(--pp-border-strong);
  border-radius: var(--pp-radius-sm); padding: .78rem .9rem; min-height: 48px; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--pp-accent);
  outline-offset: 1px; border-color: var(--pp-accent); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: #8E2F2F; }
.err { color: #8E2F2F; font-size: .85rem; margin-top: .35rem; display: none; }
.err.show { display: block; }
.field-row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.svc-cards { display: grid; gap: 1rem; }
@media (min-width: 560px) { .svc-cards { grid-template-columns: 1fr 1fr; } }
.svc-card { text-align: left; font: inherit; cursor: pointer;
  background: var(--pp-surface); border: 1.5px solid var(--pp-border-strong);
  border-radius: var(--pp-radius-md); padding: 1.3rem 1.4rem;
  transition: border-color var(--pp-dur-fast) var(--pp-ease); }
.svc-card:hover { border-color: var(--pp-bark); }
.svc-card[aria-pressed="true"] { border-color: var(--pp-clay);
  box-shadow: 0 0 0 1.5px var(--pp-clay); }
.svc-card .svc-name { font-family: var(--pp-font-display); font-weight: 700;
  font-size: 1.2rem; display: block; margin-bottom: .25rem; }
.svc-card .svc-desc { color: var(--pp-text-muted); font-size: .9rem; }

.bnav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.8rem; }
.review dl { margin: 0; border-top: 1px solid var(--pp-border); }
.review .rev-row { display: grid; grid-template-columns: minmax(96px, auto) 1fr auto;
  gap: .3rem 1.2rem; padding: .8rem 0; border-bottom: 1px solid var(--pp-border);
  align-items: baseline; }
.review dt { font-size: .8rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pp-text-muted); }
.review dd { margin: 0; }
.review .rev-edit { font-size: .85rem; }
.request-note { background: var(--pp-surface); border: 1px solid var(--pp-border);
  border-left: 3px solid var(--pp-caramel); border-radius: var(--pp-radius-sm);
  padding: .9rem 1.1rem; font-size: .9rem; color: var(--pp-text-muted); }

/* ---- mobile bottom action bar (service pages) --------------------------- */
.action-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  display: none; gap: .7rem; padding: .7rem .9rem
    calc(.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--pp-cream) 94%, transparent);
  backdrop-filter: blur(8px); border-top: 1px solid var(--pp-border); }
.action-bar .btn { flex: 1; }
@media (max-width: 860px) {
  .action-bar { display: flex; }
  body[data-has-actionbar] { padding-bottom: 84px; }
}

/* ---- reveal ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px);
    transition: opacity .55s var(--pp-ease), transform .55s var(--pp-ease); }
  .reveal.in { opacity: 1; transform: none; }
}

/* ---- footer ------------------------------------------------------------- */
.site-footer { background: var(--pp-espresso); color: var(--pp-sand);
  margin-top: var(--pp-space-8); }
.footer-in { max-width: 1200px; margin: 0 auto;
  padding: var(--pp-space-8) 1.25rem var(--pp-space-6); }
.footer-brand { display: grid; gap: 1rem; margin-bottom: 2.6rem; }
.logo-s { width: 150px; height: auto; }
.footer-line { font-family: var(--pp-font-accent); font-style: italic;
  color: var(--pp-biscuit); margin: 0; }
.footer-cols { display: grid; gap: 2.2rem; }
@media (min-width: 720px) { .footer-cols { grid-template-columns: 1fr 1.4fr 1.2fr; } }
.footer-h { font-family: var(--pp-font-body); font-weight: 700; font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--pp-biscuit);
  margin: 0 0 .8rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer a { color: var(--pp-cream); text-decoration-color:
  color-mix(in srgb, var(--pp-cream) 40%, transparent); }
/* .site-footer a would win the cascade and sink the button text into its
   own cream background — restate the button ink at equal-or-higher specificity */
.site-footer a.btn-cream { color: var(--pp-espresso); text-decoration: none; }
.site-footer address { font-style: normal; color: var(--pp-sand); margin-bottom: .8rem; }
.footer-note { font-size: .92rem; }
.footer-legal { border-top: 1px solid color-mix(in srgb, var(--pp-biscuit) 25%, transparent);
  margin-top: 2.6rem; padding-top: 1.4rem; font-size: .82rem;
  color: color-mix(in srgb, var(--pp-sand) 75%, transparent); max-width: none; }

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

/* ============================ PREMIUM DEPTH =============================== */
/* Layered, warm-tinted depth. Flat surfaces get a top light edge + soft
   ambient + tighter contact shadow; interactive cards tilt under the pointer
   (JS sets --rx/--ry/--mx/--my; pointer:fine + no-reduced-motion only). */
.card-3d { position: relative; background: var(--pp-paper);
  border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg);
  padding: 1.8rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7),
              0 1px 2px rgba(31,18,9,.06), 0 10px 30px rgba(31,18,9,.09),
              0 24px 60px -20px rgba(31,18,9,.18); }
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--pp-dur-base) var(--pp-ease),
              box-shadow var(--pp-dur-base) var(--pp-ease); will-change: transform; }
.tilt:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.7),
  0 2px 4px rgba(31,18,9,.07), 0 18px 44px rgba(31,18,9,.14),
  0 40px 90px -24px rgba(31,18,9,.24); }
/* specular sheen that follows the pointer */
.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 248, 235, .55), transparent 60%);
  transition: opacity var(--pp-dur-base) var(--pp-ease); mix-blend-mode: soft-light; }
.tilt:hover::after { opacity: 1; }

/* conversion buttons: subtle gloss + lift */
.btn-solid { background: linear-gradient(180deg, #B85A35 0%, var(--pp-clay) 55%, #93441F 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(31,18,9,.18),
              0 10px 24px -8px rgba(169,80,47,.55);
  transition: transform var(--pp-dur-fast) var(--pp-ease),
              box-shadow var(--pp-dur-fast) var(--pp-ease),
              filter var(--pp-dur-fast) var(--pp-ease); }
.btn-solid:hover { filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 10px rgba(31,18,9,.2),
              0 16px 32px -8px rgba(169,80,47,.6); }
.btn-solid:active { transform: translateY(0); }
.btn-line:hover { transform: translateY(-1px); }
.btn { transition: transform var(--pp-dur-fast) var(--pp-ease),
  background var(--pp-dur-fast) var(--pp-ease), color var(--pp-dur-fast) var(--pp-ease),
  border-color var(--pp-dur-fast) var(--pp-ease), filter var(--pp-dur-fast) var(--pp-ease),
  box-shadow var(--pp-dur-fast) var(--pp-ease); }

/* hero mark gets gentle scroll parallax (JS sets --par) */
.hero .mark-fur { transform: translateY(calc(var(--par, 0) * 1px));
  filter: drop-shadow(0 24px 40px rgba(107,74,53,.25)); }

/* image cards: depth + slow zoom */
.split-media img { transition: transform .8s var(--pp-ease), box-shadow .8s var(--pp-ease); }
.split-media:hover img { transform: scale(1.025) translateY(-3px);
  box-shadow: var(--pp-shadow-lg); }

/* panels get a faint top light edge so dark sections read as material */
.panel-dark { box-shadow: inset 0 1px 0 rgba(245,239,228,.08); }
.board { box-shadow: inset 0 1px 0 rgba(245,239,228,.09), var(--pp-shadow-md); }

@media (prefers-reduced-motion: reduce) {
  .tilt, .split-media img, .hero .mark-fur { transform: none !important; transition: none !important; }
  .tilt::after { display: none; }
}

/* ============================ BOOKING v2 ================================== */
.demo-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  background: var(--pp-surface); border: 1px dashed var(--pp-border-strong);
  border-radius: var(--pp-radius-md); padding: .8rem 1.1rem;
  font-size: .88rem; color: var(--pp-text-muted); margin-bottom: 1.6rem; }
.demo-banner.is-offline { border-style: solid; color: var(--pp-text); }
.demo-banner a { color: inherit; font-weight: 600; }
.cal-error { display: grid; justify-items: start; gap: .8rem; padding: 1.4rem;
  border: 1px solid var(--pp-border); border-radius: var(--pp-radius-md);
  color: var(--pp-text-muted); }
.cal-error p { margin: 0; }
.ph-chip { display: inline-block; font-size: .64rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  background: color-mix(in srgb, var(--pp-caramel) 24%, transparent);
  color: var(--pp-clay); border-radius: 5px; padding: .2em .55em; }

.auth-gate { display: grid; gap: .6rem; justify-items: start; max-width: 560px; }
.btn-google { background: var(--pp-espresso); color: var(--pp-cream);
  border-radius: var(--pp-radius-full); font-weight: 700; font-size: .95rem;
  display: inline-flex; align-items: center; gap: .7rem; padding: .8rem 1.6rem;
  border: 0; cursor: pointer; min-height: 48px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px -8px rgba(31,18,9,.5);
  transition: transform var(--pp-dur-fast) var(--pp-ease), filter var(--pp-dur-fast) var(--pp-ease); }
.btn-google:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn-google svg { background: #fff; border-radius: 50%; padding: 2px; }

.signed-in { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; font-size: .9rem; color: var(--pp-text-muted);
  border-bottom: 1px solid var(--pp-border); padding-bottom: .9rem; margin-bottom: 1.4rem; }
.signed-in .avatar { width: 26px; height: 26px; border-radius: 50%;
  vertical-align: middle; margin-right: .4rem; display: inline-block; }
.linklike { background: none; border: 0; cursor: pointer; font: inherit;
  color: var(--pp-accent-ink); text-decoration: underline; text-underline-offset: 3px; padding: .2rem; }

/* calendar */
.cal { padding: 1.1rem 1.2rem; }
.cal-head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .7rem; font-family: var(--pp-font-display); }
.cal-nav { background: var(--pp-surface); border: 1px solid var(--pp-border-strong);
  border-radius: 50%; width: 36px; height: 36px; cursor: pointer; font-size: 1.1rem;
  color: var(--pp-text); display: grid; place-items: center; }
.cal-nav:hover { border-color: var(--pp-text); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pp-text-muted); text-align: center;
  padding: .3rem 0; }
.cal-cell { aspect-ratio: 1; border: 0; border-radius: 10px; font: inherit;
  font-size: .92rem; font-variant-numeric: tabular-nums; cursor: pointer;
  background: var(--pp-surface); color: var(--pp-text); position: relative;
  transition: transform var(--pp-dur-fast) var(--pp-ease),
              box-shadow var(--pp-dur-fast) var(--pp-ease); }
.cal-cell:not(:disabled):hover { transform: translateY(-2px);
  box-shadow: 0 6px 14px -4px rgba(31,18,9,.25); }
.cal-pad { background: transparent; cursor: default; }
.cal-cell:disabled { color: color-mix(in srgb, var(--pp-text-muted) 45%, transparent);
  background: transparent; cursor: not-allowed; }
.cal-cell.is-ok::after, .cal-cell.is-few::after, .cal-cell.is-full::after {
  content: ""; position: absolute; left: 50%; bottom: 5px; translate: -50% 0;
  width: 5px; height: 5px; border-radius: 50%; }
.cal-cell.is-ok::after { background: #3F6B45; }
.cal-cell.is-few::after { background: var(--pp-caramel); }
.cal-cell.is-full { text-decoration: line-through; }
.cal-cell.is-full::after { background: #B8B0A4; }
.cal-cell.is-sel { background: var(--pp-clay); color: var(--pp-cream); font-weight: 700;
  box-shadow: 0 6px 16px -6px rgba(169,80,47,.6); }
.cal-cell.is-sel::after { background: var(--pp-cream); }
.cal-legend { display: flex; gap: 1.4rem; font-size: .8rem;
  color: var(--pp-text-muted); margin-top: .9rem; }
.cal-legend .dot { display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: .4rem; }
.dot-ok { background: #3F6B45; } .dot-few { background: var(--pp-caramel); }
.dot-full { background: #B8B0A4; }

.slot-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }
.slot-chip { display: grid; gap: .1rem; justify-items: center; font: inherit;
  font-weight: 700; font-size: .92rem; cursor: pointer;
  background: var(--pp-surface); color: var(--pp-text);
  border: 1.5px solid var(--pp-border-strong); border-radius: var(--pp-radius-md);
  padding: .7rem 1.3rem; min-width: 106px;
  transition: border-color var(--pp-dur-fast) var(--pp-ease),
              transform var(--pp-dur-fast) var(--pp-ease); }
.slot-chip small { font-weight: 500; font-size: .72rem; color: var(--pp-text-muted); }
.slot-chip:not(:disabled):hover { border-color: var(--pp-bark); transform: translateY(-2px); }
.slot-chip[aria-pressed="true"] { border-color: var(--pp-clay);
  box-shadow: 0 0 0 1.5px var(--pp-clay); }
.slot-chip:disabled { opacity: .45; cursor: not-allowed; }
.range-note { margin-top: 1rem; font-size: .95rem; color: var(--pp-text-muted); }
.chip-btn { cursor: pointer; font: inherit; background: var(--pp-surface); }
.chip-btn.sel, .chip-btn:hover { border-color: var(--pp-clay); color: var(--pp-text); }
/* service tier / room size chips carry their choice on aria-pressed, so the
   selected ring has to key off that, not a class */
.chip-btn[aria-pressed="true"] { border-color: var(--pp-clay); color: var(--pp-text);
  box-shadow: 0 0 0 1.5px var(--pp-clay); }
.saved-pets { margin-bottom: 1.2rem; }

.price-card { display: grid; gap: 0; padding: 1.4rem 1.6rem; }
.price-row { display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--pp-border); font-size: .95rem; }
.price-row span { color: var(--pp-text-muted); }
.price-total { display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding-top: .9rem; }
.price-total strong { font-family: var(--pp-font-display); font-size: 1.5rem; }
.bdone { text-align: left; }

/* ============================ ACCOUNT ===================================== */
.pet-cards { display: grid; gap: 1rem; }
@media (min-width: 640px) { .pet-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.pet-card { text-align: left; font: inherit; cursor: pointer; display: grid; gap: .3rem;
  padding: 1.2rem 1.3rem; border: 1.5px solid var(--pp-border); }
.pet-card.sel { border-color: var(--pp-clay); box-shadow: 0 0 0 1.5px var(--pp-clay),
  inset 0 1px 0 rgba(255,255,255,.7), 0 10px 30px rgba(31,18,9,.09); }
.pet-card .pet-name { font-family: var(--pp-font-display); font-weight: 700; font-size: 1.2rem; }
.pet-card .pet-meta { font-size: .85rem; color: var(--pp-text-muted); }
.pet-card .pet-notes { font-size: .82rem; color: var(--pp-text-muted);
  border-top: 1px solid var(--pp-border); padding-top: .5rem; margin-top: .3rem; }

.timeline { display: grid; gap: 1.6rem; position: relative; }
.tl-group { display: grid; gap: .8rem; }
.tl-date { font-family: var(--pp-font-display); font-weight: 700; font-size: .95rem;
  display: flex; align-items: center; gap: .8rem; }
.tl-date::after { content: ""; flex: 1; height: 1px; background: var(--pp-border); }
.tl-item { padding: 1.1rem 1.3rem; display: grid; gap: .3rem; }
.tl-item h3 { font-size: 1.02rem; margin: 0; }
.tl-item p { font-size: .9rem; color: var(--pp-text-muted); margin: 0; max-width: none; }
.tl-kind { justify-self: start; font-size: .64rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; border-radius: 5px; padding: .2em .55em; }
.k-grooming_report { background: color-mix(in srgb, var(--pp-caramel) 22%, transparent); color: var(--pp-clay); }
.k-vaccine  { background: color-mix(in srgb, #3F6B45 18%, transparent); color: #3F6B45; }
.k-photo    { background: color-mix(in srgb, var(--pp-plum) 16%, transparent); color: var(--pp-plum); }
.k-note     { background: var(--pp-sunk); color: var(--pp-text-muted); }
.k-external { background: color-mix(in srgb, var(--pp-claret) 14%, transparent); color: var(--pp-claret); }
.tl-open { font-size: .88rem; }

.bk-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.2rem;
  padding: .8rem .2rem; border-bottom: 1px solid var(--pp-border); font-size: .93rem; }
.bk-svc { font-family: var(--pp-font-display); font-weight: 700; }
.bk-status { margin-left: auto; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; border-radius: 5px; padding: .2em .6em; }
.s-requested { background: color-mix(in srgb, var(--pp-caramel) 22%, transparent); color: var(--pp-clay); }
.s-confirmed { background: color-mix(in srgb, #3F6B45 18%, transparent); color: #3F6B45; }
.s-cancelled { background: var(--pp-sunk); color: var(--pp-text-muted); }
.s-done      { background: color-mix(in srgb, var(--pp-plum) 16%, transparent); color: var(--pp-plum); }

/* ============================ MENU PAGE =================================== */
.menu-grid { display: grid; gap: 2.2rem; }
@media (min-width: 861px) { .menu-grid { grid-template-columns: 1fr 1fr; gap: 2.6rem 4rem; } }
.menu-section { border-top: 1px solid var(--pp-border); padding-top: 1.4rem; }
.menu-sec-head { display: flex; align-items: baseline; gap: .9rem; margin-bottom: .6rem; }
.menu-sec-num { font-family: var(--pp-font-body); font-weight: 500; font-size: .78rem;
  letter-spacing: .14em; color: var(--pp-accent-ink); }
.menu-sec-head h2 { font-size: 1.35rem; margin: 0; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-item { padding: .85rem 0; border-bottom: 1px dotted var(--pp-border-strong); }
.menu-item:last-child { border-bottom: 0; }
.menu-item-line { display: flex; align-items: baseline; gap: .6rem; }
.menu-item-name { font-weight: 700; }
.menu-item-credit { font-family: var(--pp-font-accent); font-style: italic;
  font-size: .88rem; color: var(--pp-accent-ink); }
.menu-dots { flex: 1; border-bottom: 1px dotted var(--pp-border-strong);
  translate: 0 -4px; min-width: 1.5rem; }
.menu-price { font-variant-numeric: tabular-nums; color: var(--pp-text-muted); font-size: .92rem; }
.menu-item-desc { font-size: .88rem; color: var(--pp-text-muted); margin: .25rem 0 0; max-width: none; }
.menu-item.is-placeholder .menu-item-name { color: var(--pp-text-muted); }

/* ============================ BEFORE / AFTER ============================== */
.ba-track { display: grid; gap: 1.2rem; margin-top: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.ba-card { display: grid; gap: .6rem; }
.ba-frame { position: relative; border-radius: var(--pp-radius-lg); overflow: hidden;
  aspect-ratio: 4 / 5; box-shadow: var(--pp-shadow-md); background: var(--pp-sand);
  touch-action: none; }
.ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.ba-before { position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ba-before img { filter: saturate(.35) contrast(.92) sepia(.18); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0; z-index: 3; }
.ba-range:focus-visible ~ .ba-handle { outline: 3px solid var(--pp-caramel); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 3px; background: var(--pp-cream); z-index: 2; translate: -50% 0;
  box-shadow: 0 0 0 1px rgba(31,18,9,.25); pointer-events: none; }
.ba-handle span { position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 40px; height: 40px; border-radius: 50%; background: var(--pp-caramel);
  color: var(--pp-espresso); display: grid; place-items: center;
  font-weight: 700; box-shadow: 0 6px 16px -4px rgba(31,18,9,.45); }
.ba-tag { position: absolute; bottom: 10px; z-index: 2; font-size: .68rem;
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--pp-cream); background: rgba(31,18,9,.55);
  border-radius: 6px; padding: .2em .6em; pointer-events: none; }
.ba-tag-b { left: 10px; } .ba-tag-a { right: 10px; }
.ba-demo { position: absolute; top: 10px; left: 10px; z-index: 2; }
.ba-cap { font-size: .88rem; color: var(--pp-text-muted); margin: 0; max-width: none; }
.ba-slot .ba-slotbox { aspect-ratio: 4 / 5; border: 2px dashed var(--pp-border-strong);
  border-radius: var(--pp-radius-lg); display: grid; place-items: center;
  color: var(--pp-text-muted); font-size: .88rem; text-align: center; padding: 1rem; }

/* menu price cell keeps its dots aligned when hydrated */
.menu-price { min-width: 4.5rem; text-align: right; }
.menu-note { font-size: .85rem; color: var(--pp-text-muted); }

/* account: phone completion card */
.phone-card { border: 1.5px solid var(--pp-caramel); background: var(--pp-surface);
  border-radius: var(--pp-radius-md); padding: 1.1rem 1.3rem; margin-bottom: 1.6rem;
  display: grid; gap: .6rem; }
.phone-card p { margin: 0; font-size: .92rem; color: var(--pp-text-muted); max-width: none; }
.phone-card form { display: flex; flex-wrap: wrap; gap: .6rem; }
.phone-card input { flex: 1; min-width: 180px; font: inherit; padding: .6rem .8rem;
  border: 1.5px solid var(--pp-border-strong); border-radius: var(--pp-radius-sm);
  background: var(--pp-paper); }

/* account: photo thumbnails in the timeline */
.tl-thumb { width: 100%; max-width: 260px; border-radius: var(--pp-radius-sm);
  margin-top: .5rem; box-shadow: var(--pp-shadow-sm); display: block; }

/* header account link */
.acct-link { font-weight: 500; font-size: .9rem; text-decoration: none;
  color: var(--pp-text-muted); padding: .3rem .1rem; }
.acct-link:hover { color: var(--pp-text); }
@media (max-width: 860px) { .acct-link { display: none; } }

/* ============================ GOOGLE REVIEWS ============================== */
/* Landing marquee: one lane, two identical sets, CSS keyframe loop. */
.rv { padding-block: var(--pp-space-7); overflow: hidden; }
.rv-head { display: flex; flex-wrap: wrap; align-items: end;
  justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.6rem; }
.rv-head h2 { margin-bottom: 0; }
.rv-score { display: flex; align-items: baseline; gap: .55rem; }
.rv-score strong { font-family: var(--pp-font-display); font-size: 2rem; }
.rv-stars { color: var(--pp-caramel); letter-spacing: .1em; }
.rv-count { font-size: .9rem; color: var(--pp-text-muted); }
.rv-marquee { display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rv-lane { display: flex; gap: 1.1rem; width: max-content; }
.rv-set { display: flex; gap: 1.1rem; list-style: none; margin: 0;
  padding: .3rem 0 1.1rem; padding-inline-end: 1.1rem; }
.rv-card { width: clamp(260px, 30vw, 330px); flex: none; display: grid;
  align-content: start; gap: .55rem; background: var(--pp-surface);
  border: 1px solid var(--pp-border); border-radius: var(--pp-radius-md);
  padding: 1.1rem 1.2rem; box-shadow: var(--pp-shadow-sm); }
.rv-rating { margin: 0; color: var(--pp-caramel); letter-spacing: .12em; }
.rv-rating i { font-style: normal; color: var(--pp-border-strong); }
.rv-card blockquote { margin: 0; font-size: .95rem; line-height: 1.55; }
.rv-card footer { display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-top: .2rem; }
.rv-card cite { font-style: normal; font-weight: 700; font-size: .85rem; }
.rv-src { font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pp-text-muted);
  border: 1px solid var(--pp-border-strong); border-radius: 5px; padding: .15em .5em; }
.rv-foot { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .6rem; }
@media (prefers-reduced-motion: no-preference) {
  .rv-lane { animation: rv-scroll 55s linear infinite; }
  .rv-marquee:hover .rv-lane, .rv-lane:focus-within { animation-play-state: paused; }
  @keyframes rv-scroll { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .rv-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .rv-set[aria-hidden="true"] { display: none; }
}

/* ============================ INSTAGRAM / REELS =========================== */
.ig-head { display: flex; flex-wrap: wrap; align-items: end;
  justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.6rem; }
.ig-head .lede { margin-bottom: 0; }
.ig-follow { flex: none; }
.ig-row { display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ig-reel { position: relative; display: block; aspect-ratio: 9 / 16;
  border-radius: var(--pp-radius-lg); overflow: hidden; text-decoration: none;
  background: var(--pp-espresso); box-shadow: var(--pp-shadow-md); }
.ig-reel img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .5s var(--pp-ease); }
.ig-reel:hover img { transform: scale(1.045); }
.ig-reel::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31,18,9,.34), transparent 32%,
    transparent 55%, rgba(31,18,9,.78)); }
.ig-chip { position: absolute; z-index: 2; top: 12px; left: 12px;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pp-cream); background: rgba(31,18,9,.55); backdrop-filter: blur(3px);
  border-radius: 6px; padding: .3em .7em; }
.ig-cap { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 38px;
  color: var(--pp-cream); font-weight: 500; font-size: .95rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }
.ig-handle { position: absolute; z-index: 2; left: 14px; bottom: 12px;
  color: var(--pp-biscuit); font-size: .78rem; font-weight: 500; }
.ig-more { display: grid; align-content: center; justify-items: center;
  gap: .4rem; text-align: center; color: var(--pp-cream); padding: 1.2rem; }
.ig-more-num { font-family: var(--pp-font-display); font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.6rem); }
.ig-more span { color: var(--pp-sand); }
.ig-more-cta { margin-top: .8rem; font-weight: 700; color: var(--pp-biscuit); }

/* ============================ REVIEW FUNNEL (/ulasan/) ==================== */
.rvf { background: var(--pp-surface); border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg); box-shadow: var(--pp-shadow-sm);
  padding: 1.8rem 1.6rem; display: grid; gap: 1rem; justify-items: center;
  text-align: center; }
.rvf-q { margin: 0; font-weight: 700; }
.rvf-stars { display: flex; gap: .35rem; }
.rvf-star { font-size: 2.4rem; line-height: 1; background: none; border: 0;
  cursor: pointer; color: var(--pp-border-strong); padding: .1em .12em;
  border-radius: var(--pp-radius-sm);
  transition: color .15s var(--pp-ease), transform .15s var(--pp-ease); }
.rvf-star:hover { transform: scale(1.12); }
.rvf-star.on { color: var(--pp-caramel); }
.rvf-star:focus-visible { outline: 3px solid var(--pp-caramel); }
.rvf-panel { display: grid; gap: .7rem; justify-items: center; max-width: 40ch;
  padding-top: .4rem; }
.rvf-panel h2 { font-size: 1.35rem; margin: 0; }
.rvf-panel p { margin: 0; color: var(--pp-text-muted); }
.rvf-note { font-size: .85rem; color: var(--pp-text-muted); text-align: center;
  margin-top: 1.2rem; max-width: none; }
.bdone-review { margin: .9rem 0 0; font-size: .88rem; color: var(--pp-text-muted);
  text-align: center; }

/* ============================ PIK OFFER PAGE ============================== */
.pik-proof { margin-top: 1.1rem; font-weight: 700; }
.pik-proof .hs-star { color: var(--pp-caramel); }
.pik-grid { display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pik-card { position: relative; display: grid; align-content: start; gap: .5rem;
  text-decoration: none; color: var(--pp-text); background: var(--pp-surface);
  border: 1px solid var(--pp-border); border-left: 4px solid var(--district, var(--pp-caramel));
  border-radius: var(--pp-radius-md); padding: 1.3rem 1.4rem;
  box-shadow: var(--pp-shadow-sm); transition: box-shadow .2s var(--pp-ease); }
.pik-card:hover { box-shadow: var(--pp-shadow-md); }
.pik-card h2 { font-size: 1.15rem; margin: 0; }
.pik-card p { margin: 0; font-size: .92rem; color: var(--pp-text-muted); max-width: none; }
.pik-card > span { position: absolute; top: 1.1rem; right: 1.2rem;
  color: var(--pp-accent-ink); font-size: 1.2rem; }
.pik-quotes { display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.pik-quote { margin: 0; display: grid; align-content: start; gap: .5rem;
  background: var(--pp-surface); border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-md); padding: 1.1rem 1.2rem; }
.pik-quote blockquote { margin: 0; font-size: .95rem; }
.pik-quote figcaption { font-size: .82rem; color: var(--pp-text-muted); }
.pik-faq { display: grid; gap: 1rem; margin: 1.2rem 0 0; max-width: 760px; }
.pik-faq div { border-bottom: 1px solid var(--pp-border); padding-bottom: 1rem; }
.pik-faq dt { font-weight: 700; margin-bottom: .3rem; }
.pik-faq dd { margin: 0; color: var(--pp-text-muted); }

/* ---- misc --------------------------------------------------------------- */
.center { text-align: center; }
.center p, .center .lede { margin-inline: auto; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack-links { display: flex; flex-wrap: wrap; gap: .8rem; }
hr.rule { border: 0; border-top: 1px solid var(--pp-border); margin: 0; }

/* ==========================================================================
   PRICE LISTS (2026-08) — the printed PETROPOLE cards, on screen.
   Boards stack; the label face and tabular figures carry the printed look.
   ========================================================================= */
.board-stack { display: grid; gap: 1.4rem; }
@media (min-width: 900px) {
  .board-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* an odd first board spans the row, so a lone tier never looks stranded */
  .board-stack > .board:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}
.board-blurb { color: var(--pp-biscuit); font-family: var(--pp-font-accent);
  font-style: italic; font-size: .95rem; margin: .1rem 0 1rem; max-width: none; }
.board th { font-family: var(--pp-font-label); font-weight: 500;
  letter-spacing: var(--pp-track-label); }
.board td.band { text-align: left; white-space: nowrap;
  font-family: var(--pp-font-label); font-size: .84rem;
  letter-spacing: .04em; color: var(--pp-biscuit); }
.board td.na { color: color-mix(in srgb, var(--pp-biscuit) 45%, transparent); }
.board td.agree { text-align: center; font-family: var(--pp-font-accent);
  font-style: italic; font-size: .95rem; }
.board td .unit { color: var(--pp-biscuit); font-size: .82rem; }

.board-notes { list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: grid; gap: .5rem; color: var(--pp-text-muted); font-size: .9rem; }
.board-notes li { padding-left: 1.1rem; position: relative; max-width: 68ch; }
.board-notes li::before { content: "*"; position: absolute; left: 0;
  color: var(--pp-accent-ink); }

/* ---- pet hotel: house rules + add-ons ---------------------------------- */
.rules-split { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 860px) { .rules-split { grid-template-columns: 1.15fr .85fr; gap: 3rem; } }
.rule-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .7rem; }
.rule-list li { position: relative; padding-left: 1.7rem; font-size: .97rem; }
.rule-list li::before { content: ""; position: absolute; left: 0; top: .55em;
  width: .7rem; height: .7rem; border-radius: 50%;
  border: 2px solid var(--pp-svc-hotel); }

.addon-card { background: var(--pp-surface); border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg); padding: 1.6rem clamp(1.2rem, 3vw, 1.8rem);
  box-shadow: var(--pp-shadow-md); }
.addon-card h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.addon-list { list-style: none; margin: 0; padding: 0; }
.addon-list li { display: flex; align-items: baseline; gap: .5rem;
  padding: .7rem 0; border-bottom: 1px dotted var(--pp-border-strong); }
.addon-list li:last-child { border-bottom: 0; }
.ao-name { font-size: .82rem; }
.ao-dots { flex: 1; border-bottom: 1px dotted var(--pp-border-strong);
  transform: translateY(-.25em); }
.ao-val { font-variant-numeric: tabular-nums; font-weight: 500;
  color: var(--pp-text); white-space: nowrap; font-size: .93rem; }
.addon-foot { margin: 1.1rem 0 0; font-size: .86rem; color: var(--pp-text-muted); }

/* ==========================================================================
   MENU PHOTOGRAPHY — dark studio stills, shown as a horizontal rail.
   ========================================================================= */
.shot-strip { margin: 0 0 var(--pp-space-8); }
.shot-rail { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 max(1.25rem, calc((100% - 1200px) / 2)) 1rem;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.shot { flex: 0 0 clamp(200px, 40vw, 268px); margin: 0; scroll-snap-align: start; }
.shot img { width: 100%; height: auto; border-radius: var(--pp-radius-lg);
  background: var(--pp-espresso); box-shadow: var(--pp-shadow-md); }
.shot figcaption { display: grid; gap: .15rem; margin-top: .7rem; }
.shot-name { font-size: .74rem; color: var(--pp-text); }
.shot-cap { font-family: var(--pp-font-accent); font-style: italic;
  font-size: .9rem; color: var(--pp-text-muted); }

.menu-sec-note { font-family: var(--pp-font-accent); font-style: italic;
  color: var(--pp-text-muted); font-size: .9rem; margin: -.2rem 0 .6rem; }
.menu-item-name { font-size: .82rem; font-weight: 400; }
.menu-price { font-weight: 500; color: var(--pp-text); }
.menu-price-alt { color: var(--pp-text-muted); font-weight: 400; }
.menu-legal { font-size: .88rem; color: var(--pp-text-muted); max-width: 72ch; }

/* café page: the three most-asked-about items */
.pick-grid { display: grid; gap: 1.6rem; margin-top: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pick img { width: 100%; height: auto; border-radius: var(--pp-radius-lg);
  background: var(--pp-espresso); box-shadow: var(--pp-shadow-md); }
.pick h3 { font-size: .8rem; margin: .9rem 0 .3rem; }
.pick-price { font-variant-numeric: tabular-nums; font-weight: 500; margin: 0 0 .2rem; }
.pick-price span { color: var(--pp-text-muted); font-weight: 400; }
.pick-note { font-family: var(--pp-font-accent); font-style: italic;
  font-size: .9rem; color: var(--pp-text-muted); margin: 0; }
.menu-card-price { margin: .9rem 0 0; font-variant-numeric: tabular-nums;
  font-weight: 500; color: var(--pp-accent-ink); }

/* ==========================================================================
   REFINEMENT (2026-10) — inner-page heroes, tabbed price board, closing
   CTA, hotel trust grid, café coverflow.
   ========================================================================= */

/* ---- split hero: copy left, one image (or the stay card) right --------- */
.hero-split { display: grid; gap: 2.5rem; align-items: center;
  padding-block: clamp(2.5rem, 1.6rem + 3vw, 4.5rem) clamp(2.5rem, 1.4rem + 3.2vw, 4.75rem); }
@media (min-width: 861px) {
  .hero-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(2.5rem, 6vw, 6rem); }
}
.hero-split h1 { max-width: 18ch; }
.hero-split .lede { margin-bottom: 1.8rem; }
.hero-media { margin: 0; width: 100%; max-width: 460px; justify-self: end; }
.hero-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--pp-radius-xl); box-shadow: var(--pp-shadow-lg); }
@media (max-width: 860px) {
  .hero-media { max-width: none; justify-self: stretch; order: -1; }
  .hero-media img { aspect-ratio: 5 / 4; border-radius: var(--pp-radius-lg); }
}

/* pet hotel: no photograph yet, so the right column is the stay itself,
   set like the printed price board */
.hero-facts { justify-self: end; width: 100%; max-width: 420px;
  background: var(--pp-cocoa); color: var(--pp-cream);
  border-radius: var(--pp-radius-xl); padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  box-shadow: inset 0 1px 0 rgba(245,239,228,.09), var(--pp-shadow-lg); }
.hf-from { margin: 0; font-family: var(--pp-font-label); text-transform: uppercase;
  letter-spacing: var(--pp-track-label); font-size: .72rem; color: var(--pp-biscuit); }
.hf-price { margin: .35rem 0 1.3rem; font-family: var(--pp-font-display); font-weight: 800;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--pp-cream); }
.hf-price span { font-family: var(--pp-font-body); font-weight: 400; font-size: .95rem;
  letter-spacing: 0; color: var(--pp-biscuit); }
.hf-list { list-style: none; margin: 0; padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--pp-biscuit) 30%, transparent); }
.hf-list li { padding: .7rem 0; font-size: .93rem; color: var(--pp-sand);
  border-bottom: 1px solid color-mix(in srgb, var(--pp-biscuit) 18%, transparent); }
.hf-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.2rem;
  color: var(--pp-cream); font-weight: 700; font-size: .92rem; text-decoration: none; }
.hf-link svg { transition: transform var(--pp-dur-fast) var(--pp-ease); }
.hf-link:hover svg { transform: translateX(3px); }
@media (max-width: 860px) { .hero-facts { justify-self: stretch; max-width: none; } }

/* grooming: heading left, the two paragraphs right */
.prose-split { display: grid; gap: .5rem 3rem; align-items: start; }
@media (min-width: 861px) { .prose-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.prose-split p:last-child { margin-bottom: 0; }

/* ---- tabbed price board -------------------------------------------------- */
.price-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem 3rem;
  margin-top: 2rem; align-items: start; }
/* a lone grid track sizes to the table's min-content and pushes the page wide */
@media (max-width: 899px) { .board-stack { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1000px) {
  .price-layout { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
  .price-layout .board-notes { margin-top: .4rem; }
}
.tabbar { display: flex; gap: .3rem; padding: .3rem; margin-bottom: 1.4rem;
  background: color-mix(in srgb, var(--pp-espresso) 55%, transparent);
  border-radius: var(--pp-radius-full); overflow-x: auto; scrollbar-width: none; }
.tabbar::-webkit-scrollbar { display: none; }
.tabbar[hidden] { display: none; }
.tabbar [role="tab"] { flex: 1 0 auto; font: inherit; font-weight: 700; font-size: .88rem;
  white-space: nowrap; cursor: pointer; border: 0; border-radius: var(--pp-radius-full);
  padding: .6rem 1.1rem; min-height: 40px; background: transparent; color: var(--pp-biscuit);
  transition: background var(--pp-dur-fast) var(--pp-ease), color var(--pp-dur-fast) var(--pp-ease),
              transform 80ms var(--pp-ease); }
.tabbar [role="tab"]:hover { color: var(--pp-cream); }
.tabbar [role="tab"]:active { transform: scale(.97); }
.tabbar [role="tab"][aria-selected="true"] { background: var(--pp-cream); color: var(--pp-espresso);
  box-shadow: 0 2px 8px -2px rgba(31,18,9,.45); }
@media (max-width: 560px) {            /* three tabs never hide behind a scroll */
  .tabbar { flex-wrap: wrap; border-radius: 20px; }
  .tabbar [role="tab"] { flex: 1 1 auto; }
}
.tier + .tier { margin-top: 2rem; }            /* stacked fallback, before JS */
.board-tabs.is-tabbed .tier + .tier { margin-top: 0; }
.board-tabs.is-tabbed .tier .board-head { display: none; }   /* the tab names it */
@media (prefers-reduced-motion: no-preference) {
  .board-tabs.is-tabbed .tier:not([hidden]) { animation: tierIn .24s var(--pp-ease) both; }
  @keyframes tierIn { from { opacity: 0; transform: translateY(4px); } }
}

/* ---- pet hotel: the six answers read as a two-column sheet --------------- */
@media (min-width: 861px) { .trust { grid-template-columns: 1fr 1fr; } }
.trust-item { padding: 1.5rem 1.6rem; }

/* ---- statement panels breathe; closing CTA is an object, not a stripe ---- */
.panel-dark.section-tight { padding-block: clamp(3.5rem, 2.4rem + 3.6vw, 6rem); }
.panel-dark h2 { margin-bottom: .6em; }
.cta-end { width: calc(100% - 2.5rem); max-width: calc(1200px - 2.5rem);
  margin: clamp(3rem, 2rem + 3vw, 5rem) auto 0;
  padding: clamp(2.5rem, 1.8rem + 2.6vw, 4rem) clamp(1.25rem, 4vw, 3rem);
  background: var(--pp-paper); border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-xl);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 18px 50px -24px rgba(31,18,9,.22); }
.cta-end h2 { margin-bottom: .35em; }

/* ---- café: coverflow (ported from the 21st.dev coverflow carousel) -------
   Before JS it is a plain scroll-snap rail; JS adds .cf-on and paints each
   card's transform from one fractional position. --------------------------- */
.cf { --cf-w: clamp(190px, 24vw, 270px); margin-top: 2rem; }
.cf-stage { outline: none; border-radius: var(--pp-radius-lg); }
.cf-stage:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 6px; }
.cf-track { list-style: none; margin: 0; padding: 0 0 1rem; display: flex; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; }
.cf-card { flex: 0 0 var(--cf-w); scroll-snap-align: start; }
.cf-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  border-radius: var(--pp-radius-lg); background: var(--pp-espresso);
  box-shadow: var(--pp-shadow-md); user-select: none; -webkit-user-drag: none; }
.cf-cap { margin-top: .8rem; display: grid; gap: .2rem; justify-items: start; }
.cf-name { margin: 0; font-size: .8rem; letter-spacing: var(--pp-track-label); }
.cf-price { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.cf-price span { color: var(--pp-text-muted); font-weight: 400; }
.cf-note { margin: 0; font-family: var(--pp-font-accent); font-style: italic;
  font-size: .95rem; color: var(--pp-text-muted); }
.cf-pick { margin-top: .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pp-clay); border-radius: 5px; padding: .2em .55em;
  background: color-mix(in srgb, var(--pp-caramel) 22%, transparent); }

.cf.cf-on .cf-stage { position: relative; height: calc(var(--cf-w) * 1.25 + 2rem);
  perspective: calc(var(--cf-w) * 3); touch-action: pan-y; cursor: grab; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.cf.cf-on .cf-stage.is-drag { cursor: grabbing; }
.cf.cf-on .cf-track { position: absolute; inset: 1rem 0; overflow: visible; display: block;
  padding: 0; transform-style: preserve-3d; }
.cf.cf-on .cf-card { position: absolute; top: 0; left: 50%; width: var(--cf-w);
  will-change: transform, opacity; }
.cf.cf-on .cf-card .cf-cap { display: none; }
.cf-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 1.2rem; max-width: 560px; margin: 1.1rem auto 0; }
.cf-bar[hidden] { display: none; }
.cf-live { text-align: center; min-height: 4.5rem; }
.cf-live .cf-cap { justify-items: center; margin: 0; }
.cf-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; color: var(--pp-text); background: var(--pp-surface);
  border: 1px solid var(--pp-border-strong);
  transition: border-color var(--pp-dur-fast) var(--pp-ease), transform 80ms var(--pp-ease); }
.cf-btn:hover { border-color: var(--pp-text); }
.cf-btn:active { transform: scale(.94); }

/* ============================ 21ST PARTS ================================== */
/* Ported from 21st.dev: pricing-section (.pc), color-change-card (.cc),
   animated-hero (.fin). One radius (lg), one shadow family, one spring. */
:root { --pp-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* ---- price cards -------------------------------------------------------- */
.pc-group { font-family: var(--pp-font-label); font-weight: 500; font-size: .74rem;
  letter-spacing: var(--pp-track-eyebrow); text-transform: uppercase;
  color: var(--pp-text-muted); margin: 2.2rem 0 1rem; }
.pc-grid { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .pc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pc { position: relative; display: flex; flex-direction: column; gap: 1rem;
  padding: 1.5rem 1.5rem 1.4rem; background: var(--pp-paper);
  border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), var(--pp-shadow-sm);
  transition: transform .55s var(--pp-spring), box-shadow .45s var(--pp-ease),
    border-color .3s var(--pp-ease); }
.pc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.pc-head { min-width: 0; }
.pc-title { font-size: 1.25rem; margin: 0; }
.pc-sub { margin: .2rem 0 0; font-size: .84rem; color: var(--pp-text-muted); }
.pc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; margin: .9rem 0 0; }
.pc-from { font-size: .8rem; color: var(--pp-text-muted); }
.pc-price strong { font-family: var(--pp-font-display); font-weight: 800;
  font-size: clamp(1.65rem, 1.35rem + 1vw, 2.1rem); line-height: 1.05;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pc-unit { margin: .2rem 0 0; font-size: .85rem; color: var(--pp-text-muted); }
.pc-art { flex: none; width: 104px; height: 104px; margin: -.4rem -.5rem 0 0;
  transition: transform .6s var(--pp-spring); }
.pc-art .il, .pc-art img { width: 100%; height: 100%; }
.pc-art img { object-fit: cover; border-radius: 50%; }
.pc-desc { margin: 0; font-size: .93rem; color: var(--pp-text-muted); }
.pc-rows { margin: 0; border-top: 1px dashed var(--pp-border-strong); }
.pc-rows div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .6rem 0; border-bottom: 1px dashed var(--pp-border); }
.pc-rows dt { font-size: .86rem; color: var(--pp-text-muted); }
.pc-rows dd { margin: 0; font-weight: 600; font-size: .92rem; text-align: right;
  font-variant-numeric: tabular-nums; }
.pc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pc-list li { display: flex; align-items: baseline; gap: .5rem; font-size: .92rem; }
.pc-list i { flex: 1; border-bottom: 1px dotted var(--pp-border-strong); transform: translateY(-.25em); }
.pc-list li span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-feat { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pc-feat li { display: flex; gap: .55rem; align-items: center; font-size: .9rem; }
.pc-dia { width: 14px; height: 14px; flex: none; color: var(--pp-caramel); }
.pc-foot { margin: 0; font-size: .84rem; color: var(--pp-text-muted); }
.pc-cta { margin-top: auto; width: 100%; }
.pc.is-off .pc-price strong { font-size: 1.15rem; color: var(--pp-text-muted); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pc:hover { transform: translateY(-5px) scale(1.02); border-color: var(--pp-border-strong);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 20px 36px -12px rgba(31,18,9,.22); }
  .pc:hover .pc-art { transform: scale(1.1) rotate(-5deg); }
}

/* ---- photo cards (colour change) ---------------------------------------- */
.cc-grid { display: grid; gap: 1rem; margin-top: 1.8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cc { position: relative; isolation: isolate; display: block; overflow: hidden;
  min-height: 360px; border-radius: var(--pp-radius-lg); background: var(--pp-cocoa);
  color: var(--pp-cream); text-decoration: none; }
.cc-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--pp-ease), filter .7s var(--pp-ease); }
.cc::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(31,18,9,.92) 0%, rgba(31,18,9,.66) 38%, rgba(31,18,9,0) 72%); }
.cc-body { position: absolute; inset: auto 0 0 0; padding: 1.3rem 1.35rem 1.4rem; }
.cc-title { margin: 0 0 .45rem; font-size: 1.4rem; line-height: 1.15; color: var(--pp-cream); }
.cc-w { display: inline-block; white-space: nowrap; }
.cc-l { display: inline-block; height: 1.15em; overflow: hidden; vertical-align: top; }
.cc-l > span { display: block; height: 1.15em;
  transition: transform .5s var(--pp-ease); transition-delay: calc(var(--i) * 35ms); }
.cc-text { margin: 0; font-size: .9rem; line-height: 1.5; color: rgba(245,239,228,.8);
  transition: color .5s var(--pp-ease); }
.cc-arrow { position: absolute; top: 1rem; right: 1rem; width: 30px; height: 30px; color: var(--pp-cream);
  transition: transform .5s var(--pp-ease); }
.cc-arrow svg { width: 100%; height: 100%; }
.cc:focus-visible { outline: 3px solid var(--pp-caramel); outline-offset: 3px; }
@media (hover: hover) and (min-width: 768px) {
  .cc-img { filter: saturate(0) brightness(.92); }
  .cc:hover .cc-img, .cc:focus-visible .cc-img { filter: none; transform: scale(1.1); }
  .cc:hover .cc-text { color: var(--pp-cream); }
  .cc:hover .cc-arrow { transform: rotate(-45deg); }
  .cc:hover .cc-l > span, .cc:focus-visible .cc-l > span { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .cc-img, .cc-l > span, .cc-arrow { transition: none; }
  .cc:hover .cc-img { transform: none; }
}

/* ---- finale (closing statement + CTA, every page) ------------------------ */
.fin { position: relative; overflow: hidden; background: var(--pp-espresso); color: var(--pp-cream);
  padding-block: clamp(3rem, 2.2rem + 2.6vw, 4.75rem);
  box-shadow: inset 0 1px 0 rgba(245,239,228,.08); }
.fin::before { content: ""; position: absolute; inset: auto -10% -55% -10%; height: 90%;
  background: radial-gradient(closest-side, rgba(184,129,60,.22), transparent); pointer-events: none; }
.fin > .wrap-narrow { position: relative; }
.fin-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .95rem;
  border-radius: var(--pp-radius-full); font-size: .85rem; font-weight: 500; text-decoration: none;
  color: var(--pp-biscuit); background: rgba(245,239,228,.06);
  border: 1px solid color-mix(in srgb, var(--pp-biscuit) 35%, transparent);
  transition: background var(--pp-dur-fast) var(--pp-ease), color var(--pp-dur-fast) var(--pp-ease); }
.fin-pill:hover { background: rgba(245,239,228,.12); color: var(--pp-cream); }
.fin-pill svg { width: 15px; height: 15px; }
.fin-h { margin: 1.1rem auto .9rem; font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem);
  line-height: 1.04; letter-spacing: -.025em; color: var(--pp-cream); }
.fin-lead { display: block; }
.fin-rot { position: relative; display: block; overflow: hidden; padding-block: 0 .12em;
  font-family: var(--pp-font-accent); font-style: italic; font-weight: 500;
  letter-spacing: -.01em; color: var(--pp-caramel); }
.fin-word { position: absolute; inset: .06em 0 auto; opacity: 0; transform: translateY(130%);
  transition: transform .9s var(--pp-spring), opacity .45s var(--pp-ease); }
.fin-word.is-up { transform: translateY(-130%); }
.fin-word.is-on { opacity: 1; transform: none; }
.fin-p { color: var(--pp-sand); max-width: 58ch; font-size: 1.02rem; margin-bottom: .6em; }
.fin-tag { color: var(--pp-biscuit); margin: .8rem auto 0; max-width: 46ch; }
.fin-cta { justify-content: center; margin-top: 1.4rem; }
.fin-cta .btn svg { width: 16px; height: 16px; margin-left: .45rem; }
.btn-ghost { color: var(--pp-cream); border-color: color-mix(in srgb, var(--pp-cream) 32%, transparent);
  background: transparent; }
.btn-ghost:hover { border-color: var(--pp-cream); transform: translateY(-1px); }
.fin-note { margin-top: 1rem; margin-bottom: 0; font-size: .85rem; color: color-mix(in srgb, var(--pp-sand) 75%, transparent); }
@media (prefers-reduced-motion: reduce) { .fin-word { transition: opacity .3s linear; transform: none; } }

/* ---- grooming price picker ---------------------------------------------- */
.gp { margin-top: 1.8rem; }
.gp-ctl { display: grid; gap: 1.1rem; margin-bottom: 1.6rem; padding: 1.2rem 1.3rem;
  background: var(--pp-surface); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); }
@media (min-width: 980px) { .gp-ctl { grid-template-columns: 1.7fr 1fr; gap: 2rem; } }
.gp-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.gp-set legend { padding: 0; margin-bottom: .6rem; font-weight: 700; font-size: .9rem; }
.gp-opts { display: flex; flex-wrap: wrap; gap: .45rem; }
.gp-opt { position: relative; cursor: pointer; }
.gp-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.gp-opt span { display: inline-block; padding: .5rem .85rem; border-radius: var(--pp-radius-full);
  border: 1px solid var(--pp-border-strong); background: var(--pp-paper);
  font-size: .86rem; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: background var(--pp-dur-fast) var(--pp-ease), color var(--pp-dur-fast) var(--pp-ease),
    border-color var(--pp-dur-fast) var(--pp-ease); }
.gp-opt:hover span { border-color: var(--pp-text); }
.gp-opt input:checked + span { background: var(--pp-espresso); color: var(--pp-cream); border-color: var(--pp-espresso); }
.gp-opt input:focus-visible + span { outline: 2px solid var(--pp-accent); outline-offset: 2px; }
.gp [data-pc-price] { transition: opacity .2s var(--pp-ease); }
.gp-full { margin-top: 1.6rem; }
.gp-full summary { cursor: pointer; font-weight: 700; color: var(--pp-accent-ink);
  list-style: none; display: inline-flex; align-items: center; gap: .5rem; }
.gp-full summary::-webkit-details-marker { display: none; }
.gp-full summary::after { content: "+"; font-size: 1.2rem; line-height: 1; }
.gp-full[open] summary::after { content: "−"; }
.gp-full .board { margin-top: 1rem; }

/* ---- grooming workflow (scroll-driven) ----------------------------------- */
.gw-head { margin-bottom: 1.6rem; }
.gw-head h2 { margin-bottom: 0; }
.gw--live { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.gw--live .gw-head { margin-bottom: 1.4rem; }
.gw--live .gw-steps { gap: 1.4rem; }
.gw-media { display: none; }
.gw-steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 2rem; }
.gw-rail { position: absolute; left: 1.05rem; top: .4rem; bottom: .4rem; width: 2px;
  background: var(--pp-border); }
.gw-rail i { display: block; width: 100%; height: calc(var(--p, 1) * 100%);
  background: var(--pp-caramel); border-radius: 2px; }
.gw-step { position: relative; padding-left: 3.3rem; }
.gw-num { position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; display: grid;
  place-items: center; border-radius: 50%; background: var(--pp-espresso); color: var(--pp-cream);
  font-family: var(--pp-font-display); font-weight: 800; font-size: .78rem; }
.gw-step h3 { font-size: 1.3rem; margin: .25rem 0 .4rem; }
.gw-step p { margin: 0; color: var(--pp-text-muted); }
.gw-thumb { width: 100%; max-width: 520px; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--pp-radius-lg); margin: .9rem 0 0; order: 3; }
.gw-step { display: flex; flex-direction: column; }
@media (min-width: 861px) {
  .gw:not(.gw--live) .gw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 3rem; }
  .gw:not(.gw--live) .gw-rail { display: none; }
}
/* live: sticky stage, photo wipes, rail fills with scroll */
.gw--live { padding-bottom: 0; }
.gw--live .gw-track { height: calc(var(--n) * 70vh + 40vh); }
.gw--live .gw-stage { position: sticky; top: 65px; height: calc(100vh - 65px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center; }
.gw--live .gw-media { display: block; position: relative; justify-self: center;
  height: min(72vh, 660px); aspect-ratio: 4 / 5; border-radius: var(--pp-radius-xl);
  overflow: hidden; background: var(--pp-cocoa); box-shadow: var(--pp-shadow-lg); }
.gw-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(100% 0 0 0); transform: scale(1.12);
  transition: clip-path 1s cubic-bezier(.7, 0, .2, 1), transform 1.4s var(--pp-ease); }
.gw-shot.is-on { clip-path: inset(0 0 0 0); transform: scale(1); }
.gw--live .gw-thumb { display: none; }

.gw--live .gw-step { cursor: pointer; opacity: .32; transition: opacity .45s var(--pp-ease), transform .6s var(--pp-spring); }
.gw--live .gw-step.is-past { opacity: .55; }
.gw--live .gw-step.is-on { opacity: 1; transform: translateX(6px); }
.gw--live .gw-num { background: var(--pp-paper); color: var(--pp-text-muted);
  border: 1.5px solid var(--pp-border-strong); transition: background .4s, color .4s, border-color .4s; }
.gw--live .gw-step.is-past .gw-num { background: var(--pp-caramel); border-color: var(--pp-caramel); color: var(--pp-espresso); }
.gw--live .gw-step.is-on .gw-num { background: var(--pp-espresso); border-color: var(--pp-espresso); color: var(--pp-cream); }
.gw--live .gw-step h3 { font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); }
.gw--live .gw-rail i { height: calc(var(--p, 0) * 100%); }

.pc-art:empty { display: none; }

/* ---- café menu book ------------------------------------------------------ */
.bk { --pw: min(450px, calc((100vw - 3rem) / 2)); --ph: calc(var(--pw) * 1.52);
  margin-top: 2.2rem; outline: none; }
.bk:focus-visible .bk-view { outline: 2px solid var(--pp-accent); outline-offset: 8px; border-radius: 12px; }
/* without JS: the pages simply sit in a grid */
.bk-src { display: grid; gap: 1.4rem; }
@media (min-width: 861px) { .bk-src { grid-template-columns: 1fr 1fr; } }
.bk-src > .bk-page { background: var(--pp-paper); border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg); padding: 1.5rem 1.6rem; }
.bk.is-book .bk-src { display: none; }

.bk-view { position: relative; width: calc(var(--pw) * 2); height: var(--ph); margin: 0 auto;
  perspective: 2600px; }
.bk-view::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -26px; height: 30px;
  background: radial-gradient(closest-side, rgba(31,18,9,.22), transparent); z-index: -1; }
.bk-book { position: absolute; left: 0; top: 0; width: calc(var(--pw) * 2); height: 100%;
  transform-style: preserve-3d; transform: translateX(calc(var(--shift, 0) * 100%));
  transition: transform .9s cubic-bezier(.645, .045, .355, 1); }
.bk-leaf { position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform 1.05s cubic-bezier(.645, .045, .355, 1), z-index 0s .52s; }
.bk-leaf.is-turned { transform: rotateY(-180deg); }
.bk.no-anim .bk-leaf, .bk.no-anim .bk-book { transition: none; }
.bk-face { position: absolute; inset: 0; overflow: hidden; cursor: pointer;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(90deg, #F3EBDD, var(--pp-paper) 9%, var(--pp-paper)); }
.bk-front { border-radius: 4px 14px 14px 4px;
  box-shadow: inset 22px 0 26px -20px rgba(31,18,9,.32), 0 14px 32px -14px rgba(31,18,9,.35); }
.bk-back { transform: rotateY(180deg); border-radius: 14px 4px 4px 14px;
  background: linear-gradient(270deg, #F3EBDD, var(--pp-paper) 9%, var(--pp-paper));
  box-shadow: inset -22px 0 26px -20px rgba(31,18,9,.32), 0 14px 32px -14px rgba(31,18,9,.35); }
.bk-face > .bk-page { position: relative; height: 100%; overflow-y: auto; scrollbar-width: thin;
  padding: 1.5rem 1.7rem 2.4rem; }
.bk-page.menu-section { border-top: 0; }
.bk-page .menu-sec-head h3 { font-size: 1.4rem; margin: 0; }
.bk-page .menu-item { padding: .52rem 0; }
.bk-page .menu-item-name { font-size: .78rem; }
.bk-page .menu-price { font-size: .84rem; }
.bk-page .menu-item-desc { font-size: .8rem; }
.bk-photo { display: block; width: calc(100% + 3.4rem); max-width: none; height: 118px;
  object-fit: cover; margin: -1.5rem -1.7rem 1.1rem; }
.bk-folio { position: absolute; bottom: .9rem; right: 1.4rem; font-size: .72rem;
  color: var(--pp-text-muted); font-variant-numeric: tabular-nums; }
.bk-back .bk-folio { right: auto; left: 1.4rem; }
.bk-src .bk-folio, .bk-src .bk-cover-hint { display: none; }

.bk-page.bk-cover, .bk-page.bk-backcover { color: var(--pp-sand); text-align: center;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .7rem;
  background: radial-gradient(120% 90% at 30% 15%, #5B3524, var(--pp-cocoa) 55%, #26140B); }
.bk-src > .bk-cover, .bk-src > .bk-backcover { min-height: 340px; }
.bk-cover::after, .bk-backcover::after { content: ""; position: absolute; inset: 14px; pointer-events: none;
  border: 1px dashed color-mix(in srgb, var(--pp-biscuit) 40%, transparent); border-radius: 8px; }
.bk-cover-mark svg { width: 84px; height: auto; display: block; }
.bk-cover-brand { color: var(--pp-biscuit); font-size: .78rem; letter-spacing: .3em; margin: 0; }
.bk-cover-title { margin: 0; font-family: var(--pp-font-display); font-weight: 800; color: var(--pp-cream);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); line-height: 1; }
.bk-cover-title span { display: block; font-family: var(--pp-font-accent); font-style: italic;
  font-weight: 500; color: var(--pp-caramel); font-size: 1.25em; }
.bk-cover-sub { margin: 0; font-size: .88rem; max-width: 26ch; }
.bk-cover-hint { position: absolute; bottom: 2rem; font-size: .78rem; color: var(--pp-biscuit); }
.bk-backcover p { margin: 0; font-size: .92rem; max-width: 30ch; }
.bk-backcover .btn { margin-top: .6rem; position: relative; z-index: 1; }
.bk-bar { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.2rem; }
.bk-live { min-width: 9rem; text-align: center; font-size: .85rem; color: var(--pp-text-muted);
  font-variant-numeric: tabular-nums; }
.bk-bar .cf-btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 760px) {
  .bk { --pw: min(calc(100vw - 2.5rem), 420px); --ph: calc(var(--pw) * 1.5); }
  .bk-view { width: var(--pw); overflow: hidden; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) { .bk-leaf, .bk-book { transition: none; } }

/* ---- booking: pick cards (tier / room size) ------------------------------ */
.pick-row { display: grid; gap: .7rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pick-card { position: relative; display: grid; justify-items: center; gap: .15rem; text-align: center;
  font: inherit; cursor: pointer; padding: .7rem .6rem .9rem; border-radius: var(--pp-radius-lg);
  background: var(--pp-paper); border: 1.5px solid var(--pp-border);
  transition: transform .5s var(--pp-spring), border-color var(--pp-dur-fast) var(--pp-ease),
    box-shadow var(--pp-dur-base) var(--pp-ease); }
.pick-art { width: 72px; height: 72px; transition: transform .55s var(--pp-spring); }
.pick-art .il { width: 100%; height: 100%; }
.pick-name { font-family: var(--pp-font-display); font-weight: 700; font-size: .95rem; line-height: 1.2; }
.pick-from { font-size: .75rem; color: var(--pp-text-muted); font-variant-numeric: tabular-nums; }
.pick-card[aria-pressed="true"] { border-color: var(--pp-clay);
  box-shadow: 0 0 0 1.5px var(--pp-clay), 0 12px 24px -14px rgba(169,80,47,.55); }
.pick-card[aria-pressed="true"]::after { content: "✓"; position: absolute; top: .45rem; right: .55rem;
  width: 1.3rem; height: 1.3rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--pp-clay); color: var(--pp-cream); font-size: .72rem; font-weight: 700; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pick-card:hover { transform: translateY(-3px); border-color: var(--pp-bark); }
  .pick-card:hover .pick-art { transform: scale(1.08) rotate(-5deg); }
}
@media (max-width: 420px) { .pick-art { width: 56px; height: 56px; } .pick-name { font-size: .85rem; } }

/* ---- booking: calendar (port of 21st.dev visualize-booking) --------------- */
.cal { padding: 0; background: none; border: 0; box-shadow: none; }
.cal-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1rem; }
.cal-title { margin: 0; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.4rem); letter-spacing: -.02em; line-height: 1; }
.cal-title span { color: var(--pp-text-muted); opacity: .55; }
.cal-navs { display: flex; gap: .4rem; }
.cal-nav { width: 2.4rem; height: 2.4rem; border-radius: 12px; font-size: 1.2rem; line-height: 1; cursor: pointer;
  background: var(--pp-paper); border: 1px solid var(--pp-border-strong); color: var(--pp-text); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { display: block; padding: .3rem 0; border-radius: 10px; text-align: center;
  background: var(--pp-espresso); color: var(--pp-cream); font-size: .66rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; }
.cal-dow.is-we { background: var(--pp-cocoa); color: var(--pp-biscuit); }
.cal-cell { position: relative; container-type: size; aspect-ratio: 1 / 1.05; border-radius: 16px;
  border: 1px solid var(--pp-border); background: var(--pp-paper); color: var(--pp-text);
  font: inherit; cursor: pointer; padding: 0; overflow: hidden;
  transition: transform .35s var(--pp-spring), border-color var(--pp-dur-fast) var(--pp-ease),
    background var(--pp-dur-fast) var(--pp-ease); }
.cal-cell::after { display: none !important; }
.cal-cell.is-we:not(:disabled) { background: color-mix(in srgb, var(--pp-sand) 45%, var(--pp-paper)); }
.cal-pad { background: transparent; border-color: transparent; cursor: default; }
.cal-cell:disabled { background: color-mix(in srgb, var(--pp-sand) 22%, transparent); border-color: transparent;
  color: color-mix(in srgb, var(--pp-text-muted) 50%, transparent); cursor: not-allowed; }
.cal-cell.is-full:disabled { text-decoration: line-through;
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--pp-sand) 45%, transparent) 6px 7px); }
.cal-d { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-weight: 600; font-size: .95rem;
  transition: opacity .25s var(--pp-ease); }
/* the count badge: parked in the corner, grows into the centre on hover */
.cal-badge { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  display: grid; place-items: center; border-radius: 999px; font-size: .64rem; font-weight: 700;
  color: var(--pp-cream); background: #3F6B45;
  transform: translate(calc(50cqw - 14px), calc(50cqh - 14px));
  transition: transform .5s var(--pp-spring); }
.cal-cell.is-few .cal-badge { background: var(--pp-caramel); color: var(--pp-espresso); }
.cal-cell:not(:disabled):hover, .cal-cell:not(:disabled):focus-visible { transform: translateY(-2px);
  border-color: var(--pp-bark); }
.cal-cell:not(:disabled):hover .cal-badge, .cal-cell:not(:disabled):focus-visible .cal-badge {
  transform: translate(0, 0) scale(1.9); }
.cal-cell:not(:disabled):hover .cal-d, .cal-cell:not(:disabled):focus-visible .cal-d { opacity: 0; }
.cal-cell.is-range:not(:disabled) { background: color-mix(in srgb, var(--pp-clay) 16%, var(--pp-paper)); border-color: transparent; }
.cal-cell.is-sel { background: var(--pp-clay); border-color: var(--pp-clay); color: var(--pp-cream); }
.cal-cell.is-sel .cal-badge { background: var(--pp-cream); color: var(--pp-clay); }
.cal-panel { margin-top: 1.1rem; padding: 1rem 1.15rem; border-radius: var(--pp-radius-lg);
  background: var(--pp-surface); border: 1px solid var(--pp-border); }
.cal-peek { margin: 0; font-size: .92rem; color: var(--pp-text-muted); }
.cal-peek strong { color: var(--pp-text); }
.cal-panel .slot-row { margin-top: .9rem; }
.cal-panel .range-note { margin-top: .6rem; }
.dot-we { background: color-mix(in srgb, var(--pp-sand) 80%, var(--pp-bark)); }
.cal-legend { flex-wrap: wrap; row-gap: .4rem; }
.cal-legend-n { flex-basis: 100%; color: var(--pp-text-muted); }
@media (max-width: 480px) { .cal-grid { gap: 4px; } .cal-cell { border-radius: 11px; } .cal-d { font-size: .82rem; }
  .cal-badge { width: 16px; height: 16px; margin: -8px 0 0 -8px; font-size: .56rem;
    transform: translate(calc(50cqw - 11px), calc(50cqh - 11px)); } }
@media (prefers-reduced-motion: reduce) { .cal-cell, .cal-badge, .pick-card, .pick-art { transition: none; } }

/* ---- booking: estimate card ---------------------------------------------- */
.pc-est { transform: none !important; }
.pc-est .pc-price strong { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
/* the finale is espresso too: let it run straight into the footer */
main:has(.fin) + .site-footer { margin-top: 0; border-top: 1px solid color-mix(in srgb, var(--pp-biscuit) 18%, transparent); }
@media (max-width: 760px) { .bk-folio { display: none; } }
.nowrap { white-space: nowrap; }
.cf-hero { padding-block: var(--pp-space-7) var(--pp-space-6); }
.cf-hero h1 { font-size: var(--pp-size-h1); }

/* ---- pet hotel hero: layered photo stage --------------------------------- */
.hh { display: grid; gap: 2.5rem; align-items: center;
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem); }
@media (min-width: 900px) { .hh { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); } }
.hh h1 { font-size: var(--pp-size-display); line-height: 1.02; max-width: 12ch; margin-bottom: .4em; }
.hh .lede { margin-bottom: 1.6rem; }
.hh-facts { list-style: none; margin: 1.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.hh-facts li { font-size: .84rem; padding: .45rem .8rem; border-radius: var(--pp-radius-full);
  background: var(--pp-paper); border: 1px solid var(--pp-border); color: var(--pp-text-muted); }
.hh-stage { position: relative; justify-self: center; width: min(100%, 520px); aspect-ratio: 4 / 4.6; }
.hh-main { position: absolute; right: 0; top: 0; width: 82%; height: 100%; object-fit: cover;
  object-position: 50% 30%; border-radius: var(--pp-radius-xl); box-shadow: var(--pp-shadow-lg); }
.hh-inset { position: absolute; left: 0; bottom: 6%; width: 40%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--pp-radius-lg); border: 6px solid var(--pp-cream);
  box-shadow: 0 24px 40px -18px rgba(31,18,9,.45); rotate: -4deg; }
.hh-chip { position: absolute; left: 4%; top: 10%; margin: 0; display: grid; gap: .1rem;
  padding: .85rem 1.1rem; border-radius: 18px; background: var(--pp-espresso); color: var(--pp-sand);
  box-shadow: 0 20px 36px -16px rgba(31,18,9,.55); font-size: .78rem; }
.hh-chip strong { font-family: var(--pp-font-display); font-weight: 800; font-size: 1.5rem;
  color: var(--pp-cream); letter-spacing: -.02em; line-height: 1.1; }
.hh-badge { position: absolute; right: 5%; bottom: 4%; margin: 0; display: inline-flex; align-items: center;
  gap: .5rem; padding: .5rem .9rem; border-radius: var(--pp-radius-full); background: var(--pp-paper);
  font-size: .82rem; font-weight: 600; box-shadow: var(--pp-shadow-md); }
.hh-badge i { width: 8px; height: 8px; border-radius: 50%; background: #C0392B;
  box-shadow: 0 0 0 0 rgba(192,57,43,.5); animation: hhRec 1.8s infinite; }
@keyframes hhRec { 70% { box-shadow: 0 0 0 8px rgba(192,57,43,0); } 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0); } }
[data-par] { transform: translateY(calc(var(--py, 0) * 1px)); will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .hh-main { animation: hsFadeIn .9s var(--pp-ease) backwards; }
  .hh-inset { animation: hsSlideL .9s .25s var(--pp-ease) backwards; }
  .hh-chip { animation: hsScaleIn .7s .45s var(--pp-spring) backwards; }
  .hh-badge { animation: hsFadeUp .7s .6s var(--pp-ease) backwards; }
}
@media (prefers-reduced-motion: reduce) { .hh-badge i { animation: none; } }
@media (max-width: 899px) { .hh { gap: 1.6rem; padding-top: 1.4rem; } .hh-stage { order: -1; width: min(100%, 400px); aspect-ratio: 4 / 3.7; } .hh h1 { font-size: var(--pp-size-h1); } }

/* ============================ AUTH SPLIT ==================================
   auth-section-1 (21st.dev) ported: form panel left, a living picture right.
   Breaks out of the 640px booking column so both panels get real width.
   The GrainGradient shader becomes three drifting blurred blobs in brand
   colours under an SVG grain, with our own dogs sitting on top.
   ========================================================================= */
.booking-shell { --as-w: min(1160px, 100vw - 2.5rem); }
/* while the gate shows, the status banners line up with its wider edge */
.booking-shell:has(> .auth-split:not([hidden])) > .demo-banner {
  width: var(--as-w); margin-inline: calc((100% - var(--as-w)) / 2); }
.auth-split {
  width: var(--as-w); margin-inline: calc((100% - var(--as-w)) / 2);
  display: grid; grid-template-columns: .94fr 1.06fr; gap: 1rem;
  min-height: min(600px, calc(100svh - 12rem)); }
.as-form { background: var(--pp-paper); border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg, 20px); padding: clamp(1.8rem, 1rem + 2.4vw, 3.25rem);
  display: flex; flex-direction: column; justify-content: center; }
.as-form > * { max-width: 440px; }
.as-title { font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); line-height: 1.04;
  letter-spacing: -0.03em; margin: 0 0 .7rem; }
.as-lede { color: var(--pp-text-muted); margin: 0 0 1.4rem; font-size: 1.02rem; }
.as-google { width: 100%; justify-content: center; min-height: 52px; font-size: 1rem; }
.as-perks { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; gap: .55rem; }
.as-perks li { display: flex; gap: .65rem; align-items: flex-start; font-size: .94rem; }
.as-perks svg { flex: none; width: 20px; height: 20px; padding: 3px; margin-top: 1px;
  border-radius: 50%; color: var(--pp-clay);
  background: color-mix(in srgb, var(--pp-caramel) 22%, transparent); }
.as-or { display: flex; align-items: center; gap: .9rem; margin: 1.4rem 0 .8rem;
  color: var(--pp-text-muted); font-size: .85rem; }
.as-or::before, .as-or::after { content: ""; flex: 1; height: 1px; background: var(--pp-border); }
/* email sign-in / sign-up: two-way switch, then the fields */
.as-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 1rem;
  background: color-mix(in srgb, var(--pp-sand) 45%, transparent); border-radius: var(--pp-radius-full); }
.as-tabs button { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: .86rem;
  font-weight: 600; color: var(--pp-text-muted); padding: .55rem .6rem; border-radius: var(--pp-radius-full);
  transition: background var(--pp-dur-fast) var(--pp-ease), color var(--pp-dur-fast) var(--pp-ease); }
.as-tabs button[aria-selected="true"] { background: var(--pp-paper); color: var(--pp-text);
  box-shadow: 0 1px 2px rgba(31,18,9,.12), 0 4px 10px -6px rgba(31,18,9,.3); }
.as-email .field { margin-bottom: .85rem; }
.as-email-btn { width: 100%; margin-top: .3rem; }
.as-forgot { display: block; margin: .7rem auto 0; font-size: .85rem; color: var(--pp-text-muted); }
.as-note { margin: .2rem 0 .8rem; padding: .75rem .9rem; font-size: .88rem; line-height: 1.5;
  border-radius: var(--pp-radius-md); background: color-mix(in srgb, var(--pp-caramel) 16%, transparent); }
.reset-card { margin-bottom: 1.4rem; }
.reset-card h2 { margin-bottom: .8rem; }
.as-wa-copy { font-size: .92rem; margin: 0 0 .8rem; }
.as-wa-btn { width: 100%; }
.as-fine { margin: 1.4rem 0 0; font-size: .8rem; color: var(--pp-text-muted); }

.as-art { position: relative; overflow: hidden; margin: 0; isolation: isolate;
  border-radius: var(--pp-radius-lg); background: var(--pp-espresso); min-height: 420px; }
.as-slide { position: absolute; inset: 0; opacity: 0; }
.as-slide:first-child { opacity: 1; }
.as-slide img { width: 100%; height: 100%; object-fit: cover; }
/* bottom scrim so the caption reads on any photo */
.as-slide::after { content: ""; position: absolute; inset: 55% 0 0;
  background: linear-gradient(to top, rgba(31,18,9,.72), rgba(31,18,9,0)); }
.as-slide figcaption { position: absolute; z-index: 1; left: 1.6rem; right: 1.6rem; bottom: 2.6rem;
  color: var(--pp-cream); font-family: var(--pp-font-display); font-weight: var(--pp-weight-display);
  font-size: clamp(1.15rem, .9rem + .8vw, 1.55rem); line-height: 1.15; letter-spacing: -0.01em; }
.as-ticks { position: absolute; z-index: 2; left: 1.6rem; right: 1.6rem; bottom: 1.4rem;
  display: flex; gap: 6px; }
.as-ticks i { flex: 1; height: 3px; border-radius: 3px; overflow: hidden;
  background: rgba(245,239,228,.3); position: relative; }
.as-ticks i::after { content: ""; position: absolute; inset: 0; background: var(--pp-cream);
  transform: scaleX(0); transform-origin: left; }
.as-ticks i:first-child::after { transform: scaleX(1); }

/* one 30s timeline for 5 slides: each holds ~5.4s and crossfades ~0.6s */
@media (prefers-reduced-motion: no-preference) {
  .as-art { --slot: 6s; }
  .as-slide, .as-slide:first-child { opacity: 0;
    animation: as-fade calc(var(--slot) * var(--n)) linear infinite;
    animation-delay: calc(var(--slot) * var(--i) - .6s); }
  .as-slide img { animation: as-zoom calc(var(--slot) * var(--n)) linear infinite;
    animation-delay: calc(var(--slot) * var(--i) - .6s); }
  .as-ticks i::after, .as-ticks i:first-child::after { transform: scaleX(0);
    animation: as-tick calc(var(--slot) * var(--n)) linear infinite;
    animation-delay: calc(var(--slot) * var(--i)); }
}
/* percentages are of the 5-slot cycle: 1 slot = 20% */
/* outgoing photo stays up until the incoming one is fully in, so no dark dip */
@keyframes as-fade { 0% { opacity: 0; } 2% { opacity: 1; } 22% { opacity: 1; } 24% { opacity: 0; } 100% { opacity: 0; } }
@keyframes as-zoom { 0% { transform: scale(1.08); } 22% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes as-tick { 0% { transform: scaleX(0); } 20% { transform: scaleX(1); } 20.01%, 100% { transform: scaleX(0); } }

@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; min-height: 0; }
  .as-form { padding: 1.8rem 1.4rem; }
  .as-art { min-height: 0; aspect-ratio: 4 / 3; }
}