/*
Theme Name: MewPurr
Theme URI: https://mewpurr.com/
Author: MewPurr
Author URI: https://mewpurr.com/
Description: MewPurr — pet products wholesale and sourcing. A custom block-friendly theme built on a large-radius card system, a sticky wordmark header, canvas wave dividers and an accessible FAQ accordion. Non-food only. Reads its product catalogue from WooCommerce or from its own built-in list, and adapts to ACF, Rank Math and Contact Form 7 when they are present.
Version: 1.1.1
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mewpurr
Tags: business, e-commerce, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   1. Fonts
   Brand layer: Milky Coffee (display only — headline, logo, brand voice)
   Business layer: Kavivanar (everything a buyer has to read), with Inter kept
                   loaded as the fallback for any glyph Kavivanar lacks.
   ========================================================================== */

@font-face {
  font-family: 'Milky Coffee';
  src: url('assets/fonts/MilkyCoffee-Regular.woff2') format('woff2'),
       url('assets/fonts/MilkyCoffee-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face { font-family: 'Inter'; src: url('assets/fonts/inter-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/fonts/inter-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/fonts/inter-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/fonts/inter-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Kavivanar — single weight (400) handwriting face. Subset to Latin + Latin-Ext
   + punctuation/currency (11 KB, down from the 65 KB Tamil-inclusive original).
   It ships ONE weight, so 600/700 UI text is synthesised by the browser unless
   font-synthesis is switched off; see the token comment on --body. */
@font-face {
  font-family: 'Kavivanar';
  src: url('assets/fonts/kavivanar-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. Tokens
   ========================================================================== */

:root {
  /* Surfaces — warmed toward the hero pink. These are backgrounds, so the shift
     is deliberately slight: a pink accent sitting on a yellow-cream page reads
     as a mistake, but a strongly pink page is not what was asked for. */
  --cream:      #FDF5F1;
  --paper:      #FFFBF9;
  --sand:       #F8E7E1;
  --sand-deep:  #EDD4CC;
  --mist:       #F7F0ED;

  /* Ink */
  --ink:        #221D18;
  --ink-2:      #5B5147;
  --ink-3:      #6B5F53;   /* 5.9:1 on the pink-shifted cream */
  --ink-inv:    #FBF6ED;
  --line:       #F0DED8;
  --line-soft:  #F8ECE8;

  /* Accents — one family: the hero pink.
     Every value below is a tint or a shade of #F9A896. Contrast measured
     against --cream, which is what these actually sit on:
       --pink        ink on it        8.81:1   buttons, badges, fills
       --pink-deep   ink on it        5.0:1    hover fill
       --pink-text   on cream         5.37:1   links, labels, small caps
       --pink-btn    white on it      5.27:1   solid buttons
     There is no gold left in the theme. The old token names are kept as
     aliases so every rule that already used them keeps working — and so the
     next person can see what replaced what. */
  --pink:        #F9A896;   /* the hero colour */
  --pink-deep:   #E08A6E;
  --pink-text:   #A8472F;
  --pink-btn:    #B04E35;
  --pink-soft:   #FBE0D8;

  --gold:        var(--pink);
  --gold-deep:   var(--pink-deep);
  --orange:      var(--pink-text);
  --orange-ink:  var(--pink-text);
  --orange-btn:  var(--pink-btn);
  --orange-soft: var(--pink-soft);
  --brass:       var(--pink-text);

  --green:       #6E8264;
  --green-soft:  #DFE6D6;

  /* Type */
  --brand: 'Milky Coffee', 'Trebuchet MS', system-ui, sans-serif;
  /* Kavivanar first, Inter retained as the fallback for glyphs it lacks.
     Single-weight face: 500–700 requests are faux-bolded by the browser, so
     UI hierarchy that used to come from weight now leans on size, colour and
     letter-spacing instead. To disable the fake bolding entirely, uncomment
     the font-synthesis override in section 1. */
  --body: 'Kavivanar', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Radii — the layout language leans hard on large radii */
  --r-xs:  8px;
  --r-sm:  10px;
  --r:     16px;
  --r-md:  20px;
  --r-lg:  24px;
  --r-xl:  34px;
  --r-2xl: 44px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-s: 0 1px 2px rgba(60,44,26,.05), 0 2px 8px rgba(60,44,26,.04);
  --shadow-m: 0 2px 6px rgba(60,44,26,.06), 0 14px 34px rgba(60,44,26,.07);
  --shadow-l: 0 4px 12px rgba(60,44,26,.07), 0 28px 70px rgba(60,44,26,.10);
  --shadow-card: 0 1px 2px rgba(60,44,26,.04), 0 6px 20px rgba(60,44,26,.05);

  /* Layout */
  --maxw: 1240px;
  --nav-h: 74px;
  --gutter: 24px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ==========================================================================
   3. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { border-style: none; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.16; font-weight: 600; letter-spacing: -.012em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--orange-ink); }

button { font: inherit; color: inherit; }

ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .35em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible {
  outline: 2.5px solid var(--orange-btn);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--ink-inv);
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; color: var(--ink-inv); }

/* Paper grain over everything, very light */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ==========================================================================
   4. Layout utilities
   ========================================================================== */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
/* .wrap-wide is used on its own (for the full-bleed slider rail), so it has to
   carry its own padding — without it the slider's negative margin escapes the
   viewport and adds a horizontal scrollbar. */
.wrap-wide {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sec          { padding-block: clamp(56px, 7vw, 104px); }
.sec-lg       { padding-block: clamp(72px, 9vw, 136px); }
.sec-tight    { padding-block: clamp(32px, 4vw, 56px); }

.bg-paper { background: var(--paper); }
.bg-sand  { background: var(--sand); }
.bg-mist  { background: var(--mist); }
.bg-ink   { background: var(--ink); color: var(--ink-inv); }

.center { text-align: center; }
.mx-auto { margin-inline: auto; }

.mt-s { margin-top: 14px; } .mt-m { margin-top: 26px; } .mt-l { margin-top: 44px; }
.mb-s { margin-bottom: 14px; } .mb-m { margin-bottom: 26px; }

.small { font-size: .9rem; line-height: 1.62; }
.tiny  { font-size: .78rem; line-height: 1.55; }
.muted { color: var(--ink-3); }

/* Section heading block ------------------------------------------------- */
.sec-head { max-width: 720px; margin-bottom: clamp(34px, 4vw, 56px); }
.sec-head.center { text-align: center; margin-inline: auto; }
.sec-head.center .lede { margin-inline: auto; }

.sec-title {
  font-family: var(--brand);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.35rem);
  line-height: 1.06;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}
.sec-title em { font-style: normal; color: var(--orange); }

.lede {
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 18px 0 0;
}

/* .tab (small uppercase label with a dot) used to live here. The last use — the
   single-post date — was replaced by .post-meta when single.php was rebuilt, so
   the rules are gone rather than left behind with a comment claiming otherwise.
   Section headings lead with their heading; do not reintroduce an eyebrow. */

/* Hand-drawn marker underline, used under emphasised words --------------- */
.marked { position: relative; white-space: nowrap; }
.marked::after {
  content: '';
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -.34em;
  height: .42em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'%3E%3Cpath d='M3 12.5C38 5.2 96 3.4 143 5.1c34 1.2 66 3.6 94 2.2' fill='none' stroke='%23E9C46A' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ==========================================================================
   5. Buttons & links
   ========================================================================== */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--ink-inv);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--body);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .002em;
  cursor: pointer;
  text-align: center;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), color .22s var(--ease);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow-m); }
.btn:active { transform: translateY(0); }

.btn-primary { --btn-bg: var(--orange-btn); --btn-fg: #fff; }
.btn-primary:hover { --btn-bg: #A34618; }

.btn-accent { --btn-bg: var(--gold); --btn-fg: var(--ink); }
.btn-accent:hover { --btn-bg: var(--gold-deep); }

.btn-ink { --btn-bg: var(--ink); --btn-fg: var(--ink-inv); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: 1.5px solid var(--line);
  box-shadow: none;
}
.btn-ghost:hover { --btn-bg: var(--paper); border-color: var(--sand-deep); }

.btn-sm { padding: 11px 20px; font-size: .875rem; }
.btn-lg { padding: 18px 34px; font-size: 1.02rem; }

/* Button that carries a circular arrow at its right edge (pill-in-pill) --- */
.btn-arrow { padding-right: 8px; }
.btn-arrow .arrow {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--ink); flex: none;
  transition: transform .3s var(--ease-out);
}
.btn-arrow:hover .arrow { transform: translateX(3px) rotate(-2deg); }
.btn-arrow.is-on-gold .arrow { background: var(--ink); color: var(--ink-inv); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--orange-ink);
  border-bottom: 1.5px solid transparent;
  transition: border-color .2s var(--ease), gap .2s var(--ease);
}
.link-arrow:hover { border-bottom-color: var(--orange-ink); gap: 11px; color: var(--orange-ink); }
.link-arrow span { transition: transform .2s var(--ease); }
.link-arrow:hover span { transform: translateX(2px); }

/* Small pill chips (sub-categories, sizes) ------------------------------- */
.chip {
  display: inline-block;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: .78rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }

/* ==========================================================================
   6. Reveal on scroll (scoped to .js so no-JS never hides content)
   ========================================================================== */

.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js .reveal.d1.in { transition-delay: .07s; }
.js .reveal.d2.in { transition-delay: .14s; }
.js .reveal.d3.in { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   7. Header
   ========================================================================== */

.hdr {
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line);
  position: fixed;
  inset: 0 0 auto;
  z-index: 900;
  padding-block: 18px;
  transition: background-color .32s var(--ease), box-shadow .32s var(--ease), padding .32s var(--ease);
}
.hdr-in {
  /* 3-column grid so the wordmark sits centred between the menu and the tools.
     NOTE: symmetric columns are only safe while BOTH side columns can hold
     their content. Six uppercase items need ~510px; the container gives each
     side column (1192 - 130 - 28) / 2 = 517px. That leaves ~7px of slack, and
     the nav overflows its column the moment it needs more — which reads as the
     wordmark being overlapped, because the overflow lands in the next column.
     Measured: with 11px link padding the nav was 546px and collided by 15px at
     every viewport from 1280 up (the container is capped, so the collision did
     not vary with screen size). The breakpoint below keeps the two states
     honest: wide screens tighten the padding and show the mark, narrower
     screens drop the mark. Do not add a seventh nav item without re-measuring. */
  display: grid;
  /* logo | nav | toolbar — the logo lives left, the nav centres, the CTA
     right. The middle column is the only elastic one, so the mark never
     competes with the menu for width again. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: calc(var(--nav-h) - 36px);
}

.hdr .nav { grid-column: 2; justify-self: center; min-width: 0; display: flex; align-items: center; gap: 1px; }
.hdr .nav a {
  padding: 9px 11px;
  border-radius: var(--r-pill);
  font-size: .79rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  /* The theme colour, not ink. The nav was the last thing still reading as the
     old palette: every link was ink and only the current page was accented, so
     swapping the accent tokens left it looking untouched. */
  color: var(--pink-text);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.hdr .nav a:hover { background: var(--pink-soft); color: var(--pink-text); }
/* Current page: a filled pill, because with every link already accented, colour
   alone no longer says which one you are on. */
.hdr .nav a[aria-current="page"] { background: var(--pink); color: var(--ink); }

/* Centred wordmark — hidden over the hero (the hero carries the giant one) */
.hdr-word {
  grid-column: 1;
  justify-self: start;
  font-family: var(--brand);
  font-size: 1.58rem;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ink);
  /* Always visible now — the site is a brand desk, not a hero-first poster,
     and Cyrus asked for the mark pinned left. The reveal-on-scroll dance is
     gone with it: the mark no longer hides over the hero. */
  transition: opacity .3s var(--ease), transform .38s var(--ease-out);
}
.hdr-word em { font-style: normal; color: var(--orange); }

/* The wordmark shares its row with the nav and the tools, so it can only be
   shown where both side columns genuinely fit. At 11px of link padding the nav
   measured 546px against a 517px column — a 15px overlap that did not move
   with viewport width, because the container is capped. Two states instead of
   one broken one:
     >= 1400px  padding tightens to 8px (nav ~510px), mark shown, ~14px slack
     <  1400px  mark hidden, nav keeps comfortable padding
   Navigation outranks decoration. Re-measure both states if the menu changes. */
@media (min-width: 1400px) {
  .hdr .nav a { padding-inline: 8px; }
}
/* The mark is always shown at every width now; the logo moved into its own
   column so nothing below ever needed to hide it to make room. */
@media (max-width: 1399px) {}

/* Columns are pinned rather than left to auto-placement. Both wordmark
   elements are display:none below 1400px, and a display:none grid item
   generates no box — so auto-placement slid the tools from column 3 into
   column 2 and the nav then overlapped them. Measured at 1366px: the CTA
   landed at 590..776 instead of hard against the right edge, with the search
   icon sitting on top of the word "TRANSLATOR". */
.hdr-cta { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 12px; }

.hdr-tools { display: flex; align-items: center; gap: 2px; }
.hdr-tools a, .hdr-tools button {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; border-radius: 50%;
  cursor: pointer;
  color: var(--pink-text);
  transition: background-color .2s var(--ease);
}
.hdr-tools a:hover, .hdr-tools button:hover { background: var(--pink-soft); color: var(--pink-text); }

/* Header search — a real search field rather than an icon that silently loaded
   a shop listing. B2B desk: the magnifier is the only tool in the bar. */
.hdr-search { display: flex; align-items: center; gap: 8px; margin-left: 4px; }
.hdr-search[hidden] { display: none; }
.hdr-search input {
  width: clamp(160px, 22vw, 260px);
  font-family: var(--body);
  font-size: .9rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  padding: 9px 16px;
}
.hdr-search input:focus { outline: none; border-color: var(--sand-deep); }
.hdr-search-go {
  border: 0;
  background: var(--ink);
  color: var(--ink-inv);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.hdr-search-go:hover { background: var(--orange-btn); }

/* Scrolled state: solid bar, wordmark appears */
.hdr.scrolled {
  background: var(--paper);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line), 0 8px 26px rgba(60,44,26,.05);
  padding-block: 10px;
}
.hdr.scrolled .hdr-word { transform: none; }
.hdr.scrolled .hdr-in { min-height: 54px; }

.burger {
  width: 46px; height: 46px;
  display: none;
  align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  flex: none;
}
.burger span {
  position: relative;
  width: 17px; height: 1.8px;
  background: var(--ink);
  border-radius: 2px;
  display: block;
}
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0;
  width: 17px; height: 1.8px; background: var(--ink); border-radius: 2px;
}
.burger span::before { top: -5.5px; }
.burger span::after  { top: 5.5px; }

/* Drawer ----------------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 92vw);
  z-index: 1000;
  background: var(--paper);
  padding: 26px 26px 34px;
  transform: translateX(101%);
  transition: transform .42s var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-l);
  overflow-y: auto;
}
.drawer.open { transform: none; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.x-btn {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--line); background: transparent;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.x-btn:hover { background: var(--sand); }
.drawer nav { display: flex; flex-direction: column; }
.drawer nav a {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--brand);
  font-size: 1.5rem;
  color: var(--pink-text);
}
.drawer nav a:hover { color: var(--ink); }
.drawer-foot { margin-top: auto; padding-top: 26px; display: grid; gap: 12px; }

.drawer-scrim {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(34,29,24,.42);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.drawer-scrim.open { opacity: 1; visibility: visible; }

/* ==========================================================================
   8. Hero — one large-radius card inset from the page edges
   ========================================================================== */

/* Hero — a full-height rounded card that PINS at the top of the viewport and
   SCALES DOWN as you scroll, with the sections below following it up.

   Two custom properties drive it, both written by the heroShrink module:

     --hero-s     1 -> 0.75, the shrink
     --hero-hold  how far the card is held back against the scroll, in px

   The card is scaled about its top edge and translated down by --hero-hold.
   That means its visual bottom sits at  --hero-base * --hero-s + --hero-hold
   in the document, and the runway is given exactly that height — so whatever
   follows the hero always lands flush against the card, at every scroll
   position. No sticky, no layout thrash, nothing to go out of sync.

   With JS off both properties keep their defaults, so the card renders full
   size and simply scrolls normally. */

.hero {
  --hero-base: clamp(500px, calc(100svh - 24px), 940px);
  --hero-s: 1;
  --hero-hold: 0px;
  padding: 12px 12px 0;
}

.hero-run {
  position: relative;
  height: calc(var(--hero-base) * var(--hero-s) + var(--hero-hold));
}

.hero-card {
  position: relative;
  /* min-height rather than height: the card grows if the content needs the
     room, and heroShrink measures the result and writes it back as
     --hero-base so the runway maths stay exact. A hard height clipped the
     bottom row on shorter viewports. */
  min-height: var(--hero-base);
  border-radius: var(--r-2xl);
  /* Brand pink, flat. Everything on the card is dark ink from here — cream
     text on this pink was under 2:1. */
  background: #F9A896;
  color: var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--nav-h) + 6px);
  isolation: isolate;
  transform: translateY(var(--hero-hold)) scale(var(--hero-s));
  transform-origin: top center;
  will-change: transform;
}

/* soft light bloom, keeps the flat panel from reading as a solid block */
.hero-card::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto -20%;
  height: 90%;
  background: radial-gradient(58% 62% at 32% 22%, rgba(255,252,246,.28), rgba(255,252,246,0) 70%);
  z-index: 0;
  pointer-events: none;
}

.hero-word {
  position: relative;
  z-index: 1;
  font-family: var(--brand);
  font-weight: 400;
  font-size: clamp(3rem, 11.6vw, 9.8rem);
  line-height: .92;
  letter-spacing: -.028em;
  text-align: center;
  color: var(--ink-inv);
  margin: 0;
  padding-inline: clamp(8px, 2vw, 26px);
  /* Milky Coffee's ascenders overshoot the line box, and the card clips with
     overflow:hidden — without this the tops of the M and the P get shaved. */
  padding-top: .17em;
  text-transform: none;
  white-space: nowrap;
}
.hero-word em { font-style: normal; color: var(--gold); }

.hero-fig {
  position: relative;
  z-index: 2;
  margin: clamp(-4rem, -3.8vw, -1.6rem) auto 0;
  width: min(560px, 60%);
  pointer-events: none;
}
.hero-fig img {
  width: 100%;
  height: clamp(200px, 27vw, 380px);
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: var(--r-2xl);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}

/* Four-pet lineup — crayon-illustration scene (1672x941 source). A full
   picture with its own sky and grass, so it reads as a framed illustration
   rather than a cut-out portrait: no bottom fade mask, no negative overlap —
   the wordmark must never be covered by the image top edge.
   Width is viewport-HEIGHT aware on purpose: the whole hero (logo + picture +
   copy) has to fit inside the first screen, so on short viewports the picture
   gives up width first. Derived from --hero-base so the two can never drift:
   everything above and below the picture costs ~450px (card padding 80 + logo
   114 + gap 14 + copy block ~230 + 12 breathing room), and 1.775 is the source
   aspect (1672/941). If the image is replaced, that factor has to change too. */
.hero-fig--pets {
  width: min(820px, 66%, calc((var(--hero-base) - 460px) * 1.775));
  margin-top: clamp(.4rem, 1vw, 1rem);
}
.hero-fig--pets img.hero-pets {
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: var(--r-2xl);
  box-shadow: 0 18px 50px rgba(30, 24, 18, .28);
}

/* Life on the lineup. Whole image does a 6s "breathing" cycle (scale + lift),
   so even on a static still it reads as a portrait that is watching you.
   prefers-reduced-motion disables it cleanly. */
@keyframes hero-pets-breathe {
  0%   { transform: translate3d(0, 0, 0) scale(1.000); }
  50%  { transform: translate3d(0, -6px, 0) scale(1.014); }
  100% { transform: translate3d(0, 0, 0) scale(1.000); }
}
.hero-fig--pets img.hero-pets {
  animation: hero-pets-breathe 6s ease-in-out infinite;
  transform-origin: 50% 60%;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero-fig--pets img.hero-pets { animation: none; }
}

.hero-body {
  position: relative;
  z-index: 3;
  margin-top: auto;
  /* Single centred column: heading, paragraph and the one CTA read as one
     poster block instead of text hugging the left edge with a lonely button
     across the card. */
  padding: clamp(12px, 1.6vw, 22px) clamp(20px, 3.4vw, 46px) clamp(16px, 2vw, 26px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(10px, 1.2vw, 16px);
}

.hero-say { max-width: none; }
.hero-say h2 {
  font-family: var(--brand);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
.hero-say p {
  color: rgba(34, 29, 24, .8);
  font-size: .95rem;
  max-width: 58ch;
  margin: 6px auto 0;
  /* keep the centred paragraph from leaving a lone word on its last line */
  text-wrap: pretty;
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; }

/* Back-to-top badge, pinned to the bottom-right of the VIEWPORT on every page
   (rendered from footer.php via template-parts/to-top.php).

   It has to sit outside every transformed ancestor. An element with transform /
   filter / perspective / contain:paint becomes the containing block for a fixed
   descendant, and overflow:hidden clips one — the hero card has both, so while
   the badge lived inside it, position: fixed silently degraded to absolute and
   the badge scrolled away with the page.

   The ring turns continuously; the cat does not, so it never spends half a
   revolution upside down. On hover or keyboard focus the cat gives way to an up
   arrow — the badge is the one place on the site that says "back to top", and
   it has to say it without a word. Pure CSS keyframes; site.js only upgrades
   the click so the URL keeps no hash. */
.to-top {
  --to-top-size: clamp(100px, 10vw, 138px);
  /* invert(--ink). The ring is a baked <img>, so the light state is reached by
     filter: invert(1) — which lands on this exact value. The icons are
     currentColor, so they are pointed at the same value rather than at
     --ink-inv, otherwise the ring would read cool and the cat warm on the dark
     footer. Keep the two in step if --ink ever changes. */
  --to-top-light: #DDE2E7;
  position: fixed;
  right: clamp(18px, 2.6vw, 34px);
  bottom: clamp(18px, 2.6vw, 34px);
  /* Below the header (900) and the drawer (1000), above page content. */
  z-index: 500;
  width: var(--to-top-size);
  height: var(--to-top-size);
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  /* Safari: a focus ring on a circular button reads as a square halo without
     this, because the ring follows the element box, not the visual shape. */
  outline-offset: 4px;
}
.to-top-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: to-top-spin 18s linear infinite;
  transform-origin: 50% 50%;
}
/* Centre stack. The cat and the arrow occupy the same cell so one can cross-fade
   into the other without the badge changing size. */
.to-top-cat,
.to-top-up {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  width: 44%;
  height: 44%;
  display: grid;
  place-items: center;
  transition: opacity .22s var(--ease), transform .28s var(--ease-out);
}
.to-top-cat svg,
.to-top-up svg { width: 100%; height: 100%; display: block; }

.to-top-up {
  width: 34%;
  height: 34%;
  opacity: 0;
  transform: translateY(15%) scale(.7);
}
.to-top:hover .to-top-cat,
.to-top:focus-visible .to-top-cat { opacity: 0; transform: translateY(-15%) scale(.7); }
.to-top:hover .to-top-up,
.to-top:focus-visible .to-top-up { opacity: 1; transform: none; }

/* Over a dark section — the footer is the only one the badge can land on, since
   it is pinned to the bottom of the viewport and .ftr is the last block.

   The ring is drawn in ink and the footer IS ink, so the badge used to vanish
   the moment the page reached the bottom: same colour on same colour. A fixed
   element cannot inherit from whatever is underneath it, so the overlap is
   measured in site.js and handed over as this class. */
.to-top.is-on-dark { color: var(--to-top-light); }
.to-top.is-on-dark .to-top-ring { filter: invert(1); }
/* `a:hover` (0,1,1) outranks `.to-top` (0,1,0), so the arrow would otherwise
   keep the pink link colour on a dark footer, where it measures 2.6:1 — the one
   state where the hover cue is unreadable is the one state that needs it. */
.to-top.is-on-dark:hover .to-top-up,
.to-top.is-on-dark:focus-visible .to-top-up { color: var(--to-top-light); }

@keyframes to-top-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .to-top-ring { animation: none; }
  .to-top-cat, .to-top-up { transition: none; }
}

@media (max-width: 720px) {
  /* It used to be hidden here: the card had no free corner and the seal landed
     on top of the CTA. That reason died when the badge moved out of the card
     and became the back-to-top control — and back-to-top is worth most on the
     small screen with the long scroll. It just has to be smaller, or it eats
     the bottom-right of a phone. */
  .to-top { --to-top-size: 74px; right: 14px; bottom: 14px; }
}

/* The hero-meta row (Non-food only · Specs confirmed · Samples · Founder)
   was removed on request — the four claims still live in the FAQ/marquee
   where they are readable, see marquee.php's comment. Floating line toggle
   was removed the same day; backups in voldog/removed-from-mewpurr/. */

/* ==========================================================================
   9. (removed)
   ==========================================================================
   The "honest strip" — a three-up band of promises that sat directly under the
   hero, plus the credential pills below the hero card. Both were removed on
   request, along with template-parts/strip.php.

   A copy of the template is kept in voldog/removed-from-mewpurr/ if it is ever
   wanted back; the markup and copy are also recorded in the work log. Nothing
   in the CSS should be re-added before that markup is, or the band comes back
   unstyled.
   ========================================================================== */

/* ==========================================================================
   10. (removed)
   ==========================================================================
   The sourcing finder — pill bar of four selects plus a route answer panel —
   was removed on request (2026-09-27), along with template-parts/finder.php.
   A copy of the template lives in voldog/removed-from-mewpurr/finder.php.
   ========================================================================== */

/* ==========================================================================
   11. Categories grid + line toggle
   ========================================================================== */

.grid-cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}

.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--mist);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(232,220,201,.5);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease);
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); }

/* Spotlight — a soft warm glow that follows the pointer, ported from React
   Bits' SpotlightCard. JS only writes --mx/--my and toggles .is-lit; every
   visual is CSS, and pointer:coarse (touch) never gets it. */
.cat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(249, 168, 150, .34), rgba(249, 168, 150, 0) 68%);
  opacity: 0;
  transition: opacity .32s var(--ease);
}
/* The glow must sit UNDER the card's text, not tint it — a 34% gold wash over
   body copy is exactly the kind of thing that quietly breaks contrast. */
.cat-card > * { position: relative; z-index: 1; }
.cat-card.is-lit::after { opacity: 1; }
.cat-card.is-lit { border-color: var(--sand-deep); }

.cat-card .ph {
  padding: 16px 16px 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-md);
  margin: 8px 8px 0;
  background: var(--paper);
}
.cat-card .ph img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); }

/* Product cards on the collection page: the shot stands inside an arched frame.
 *
 * The shape is the point, and it is a specific one: a bordered upright frame
 * (1 : 1.12) with an ARCH filling its lower 62% — the top edge is a half
 * ellipse, not a straight line, which is what makes the product look like it is
 * standing in a doorway rather than sitting on a black bar. The two radii do
 * that: 999px is clamped to half the width, so the arch spans the full frame,
 * and 180px is how far it rises.
 *
 * It only reads as one object when the shot has a transparent background, which
 * is why the card asks for a cut-out PNG and draws the arch BEHIND the product.
 * A normal photograph here would be a white rectangle over a coloured arch.
 *
 * object-fit is contain, not cover: "the whole item" is the point, and cover
 * would crop the product to fill the frame, which is the thing being fixed.
 */
.cat-card .ph--cutout {
  position: relative;
  padding: 0;
  aspect-ratio: 1 / 1.12;
  border: 1.5px solid #8f8f8f;
}
/* The arch. 999px is clamped to half the frame's width, so the top edge spans
   the whole frame; 180px is how far it rises. Two values per corner is the
   horizontal/vertical radius pair — one number would give a circle. */
.cat-card .ph--cutout .ph-arch {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  background: #eca08e;
  border-top-left-radius: 999px 180px;
  border-top-right-radius: 999px 180px;
  z-index: 0;
}
/*
 * The product is inset by 6% on every side rather than centred by a grid.
 * `display: grid; place-items: center` on the frame plus `display: contents` on
 * the <picture> — the obvious way to centre a <picture>-wrapped image — quietly
 * puts TWO items in the grid, because <source> becomes a grid item too. That
 * makes two rows (measured: 77px and 328px), the image lands in the second one,
 * and its height:88% then resolves against the row instead of the frame: 71% of
 * the frame high and visibly off-centre. Insets have no such ambiguity, and the
 * geometry they produce is the same 88%-centred box.
 */
.cat-card .ph--cutout img {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  object-fit: contain;
  /* Must be 0: the drop shadow follows the element's alpha, so a rounded box
     would cast a rounded-rectangle shadow instead of one that hugs the product
     silhouette — the whole reason for the filter. */
  border-radius: 0;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .15));
  z-index: 2;
}

.cat-card .bd { padding: 20px 20px 0; display: flex; flex-direction: column; flex: 1; }
.cat-card h3 {
  font-size: 1.22rem;
  font-weight: 600;
  margin: 0 0 7px;
  letter-spacing: -.008em;
}
.cat-card p { font-size: .9rem; color: var(--ink-2); margin: 0 0 14px; }
.cat-card .chip-row { margin-bottom: 16px; }
.cat-card .f { margin-top: auto; padding-bottom: 16px; }

.cat-card .cta-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 8px 8px;
  padding: 13px 18px 13px 20px;
  border-radius: var(--r-md);
  background: var(--paper);
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.cat-card .cta-wide::after {
  content: '';
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23221D18' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5.5 18.5 12 12 18.5'/%3E%3C/svg%3E");
  background-size: 13px; background-position: center; background-repeat: no-repeat;
  flex: none;
  transition: transform .26s var(--ease-out);
}
.cat-card:hover .cta-wide { background: var(--gold); }
.cat-card:hover .cta-wide::after { transform: translateX(3px); }

/* Line toggle (Dog / Cat) ------------------------------------------------ */
.line-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: var(--r-pill);
  background: var(--cream);
  border: 1px solid var(--line);
}
.line-toggle button {
  border: 0;
  background: transparent;
  border-radius: var(--r-pill);
  padding: 10px 22px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background-color .24s var(--ease), color .24s var(--ease);
}
.line-toggle button svg { width: 16px; height: 16px; }
.line-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--ink-inv); }

.cats-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3vw, 40px);
}

/* ==========================================================================
   12. Reasons arc — four cards around a centre disc
   ========================================================================== */

.arc {
  position: relative;
  min-height: 560px;
  display: grid;
  place-items: center;
}
.arc-disc {
  width: clamp(280px, 34vw, 430px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-l);
  position: relative;
  z-index: 1;
}
.arc-disc img { width: 100%; height: 100%; object-fit: cover; }
.arc-disc::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 10px rgba(255,252,246,.5);
}

.arc-item {
  position: absolute;
  width: min(290px, 30vw);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
  z-index: 2;
}
.arc-item .ico {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold); color: var(--ink);
  margin-bottom: 10px;
}
.arc-item .ico svg { width: 15px; height: 15px; }
.arc-item h3 { font-size: 1rem; font-weight: 600; margin: 0 0 5px; }
.arc-item p { font-size: .845rem; line-height: 1.55; color: var(--ink-3); margin: 0; }

.arc-item.p1 { left: 0;   top: 4%; }
.arc-item.p2 { right: 0;  top: 14%; }
.arc-item.p3 { left: 3%;  bottom: 8%; }
.arc-item.p4 { right: 2%; bottom: 2%; }

.arc-fade {
  position: absolute;
  width: 74px; height: 74px;
  opacity: .85;
  pointer-events: none;
}
.arc-fade.a1 { left: 4%; top: 33%; }
.arc-fade.a2 { right: 6%; top: 44%; transform: rotate(14deg); }

.arc-cta { text-align: center; margin-top: clamp(30px, 4vw, 50px); }

/* ==========================================================================
   13. Horizontal slider
   ========================================================================== */

.slider-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.slider-nav { display: flex; gap: 8px; }
.slider-nav button {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  display: grid; place-items: center;
  color: var(--ink);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}
.slider-nav button:hover { background: var(--gold); border-color: var(--gold); }
.slider-nav button[disabled] { opacity: .35; cursor: not-allowed; }

.slider {
  display: flex;
  gap: clamp(14px, 1.6vw, 20px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))) 18px;
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
}
.slider::-webkit-scrollbar { display: none; }
.slider > * {
  flex: 0 0 clamp(250px, 27vw, 320px);
  scroll-snap-align: start;
}

.slide-card {
  background: var(--mist);
  border: 1px solid rgba(232,220,201,.5);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.slide-card .ph {
  margin: 8px 8px 0;
  padding: 14px;
  background: var(--paper);
  border-radius: var(--r-md);
  aspect-ratio: 4 / 3;
}
.slide-card .ph img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); }
.slide-card .bd { padding: 18px 18px 0; flex: 1; display: flex; flex-direction: column; }
.slide-card .cat { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); margin-bottom: 7px; }
.slide-card h3 { font-size: 1.06rem; margin: 0 0 6px; }
.slide-card p { font-size: .85rem; color: var(--ink-3); line-height: 1.55; margin: 0 0 14px; }
.slide-card .swatch { font-size: .82rem; font-weight: 600; color: var(--orange-ink); margin-bottom: 14px; }
.slide-card .f { margin-top: auto; padding-bottom: 16px; }
.slide-card .cta-wide {
  display: block;
  margin: 0 8px 8px;
  padding: 13px 18px;
  border-radius: var(--r-md);
  background: var(--paper);
  font-size: .86rem;
  font-weight: 600;
  text-align: center;
  transition: background-color .22s var(--ease);
}
.slide-card .cta-wide:hover { background: var(--gold); color: var(--ink); }

/* ==========================================================================
   14. Marquee
   ========================================================================== */

.marquee {
  background: var(--ink);
  color: var(--ink-inv);
  padding: 22px 0;
  overflow: hidden;
  position: relative;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 34s linear infinite;
  will-change: transform;
}
.marquee-track > span {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  font-family: var(--brand);
  font-size: clamp(1.3rem, 2.4vw, 2.1rem);
  white-space: nowrap;
  color: var(--ink-inv);
}
.marquee-track em {
  font-style: normal;
  color: var(--gold);
}
.marquee-track .star { color: var(--orange); font-size: .7em; }
.marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   15. Reviews
   ========================================================================== */

.reviews-head { text-align: center; max-width: 760px; margin-inline: auto; margin-bottom: clamp(28px, 3.6vw, 44px); }

.grid-rev {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.rev {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.rev-stars { display: flex; gap: 3px; }
.rev-stars svg { width: 15px; height: 15px; color: var(--gold-deep); }
.rev q { font-size: .95rem; line-height: 1.62; color: var(--ink-2); quotes: none; }
.rev .who { margin-top: auto; display: flex; align-items: center; gap: 11px; padding-top: 6px; }
.rev .av {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sand);
  font-size: .82rem; font-weight: 700; color: var(--ink-2);
  flex: none;
}
.rev .who b { display: block; font-size: .875rem; font-weight: 600; }
.rev .who span { display: block; font-size: .76rem; color: var(--ink-3); }

.rev-summary {
  margin-top: clamp(26px, 3.4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  text-align: center;
}
.rev-score {
  display: flex; align-items: center; gap: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 13px 26px;
  box-shadow: var(--shadow-s);
}
.rev-score b { font-family: var(--brand); font-size: 1.9rem; line-height: 1; font-weight: 400; }
.rev-score .meta { text-align: left; font-size: .8rem; color: var(--ink-3); line-height: 1.4; }

/* ==========================================================================
   16. FAQ
   ========================================================================== */

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.faq-list { border-top: 1px solid var(--line); }

.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
  transition: color .2s var(--ease);
}
.faq-q:hover { color: var(--orange-ink); }
.faq-q .pm {
  width: 32px; height: 32px; flex: none;
  border-radius: 50%;
  background: var(--mist);
  display: grid; place-items: center;
  position: relative;
  transition: background-color .24s var(--ease), transform .3s var(--ease-out);
}
.faq-q .pm::before, .faq-q .pm::after {
  content: ''; position: absolute;
  background: var(--ink); border-radius: 2px;
}
.faq-q .pm::before { width: 11px; height: 1.7px; }
.faq-q .pm::after  { width: 1.7px; height: 11px; transition: transform .3s var(--ease-out); }
.faq-item.open .faq-q .pm { background: var(--gold); }
.faq-item.open .faq-q .pm::after { transform: scaleY(0); }

.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .42s var(--ease-out);
}
.faq-a-in { padding: 0 60px 24px 0; }
.faq-a-in p { font-size: .925rem; line-height: 1.68; color: var(--ink-2); margin: 0 0 12px; }
.faq-a-in p:last-child { margin-bottom: 0; }

/* ==========================================================================
   17. CTA band
   ========================================================================== */

.cta-band {
  background: var(--ink);
  color: var(--ink-inv);
  border-radius: var(--r-2xl);
  padding: clamp(34px, 5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  right: -8%; top: -40%;
  width: 46%; height: 180%;
  background: radial-gradient(closest-side, rgba(249,168,150,.22), rgba(249,168,150,0) 72%);
  pointer-events: none;
}
.cta-band h2 {
  font-family: var(--brand);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.85rem);
  line-height: 1.05;
  margin: 0 0 .5em;
  position: relative;
}
.cta-band p { color: rgba(255,252,246,.74); max-width: 52ch; font-size: .95rem; position: relative; margin: 0; }
.cta-band .btn { position: relative; flex: none; }

/* ==========================================================================
   18. Inquiry form
   ========================================================================== */

.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(22px, 3vw, 38px);
  box-shadow: var(--shadow-card);
}
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { position: relative; display: flex; flex-direction: column; gap: 7px; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.field .req { color: var(--orange-ink); }

.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: .95rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 118px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5F53' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 15px; padding-right: 42px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--orange-btn);
  background: var(--paper);
  box-shadow: 0 0 0 3.5px rgba(184,84,32,.12);
}
.field .msg { font-size: .78rem; color: var(--orange-ink); display: none; }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--orange-btn); background: #FDF4EE; }
.field.bad .msg { display: block; }

.form-foot {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.form-note { font-size: .82rem; color: var(--ink-3); max-width: 44ch; margin: 0; }

.pending-note {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--sand);
  border-radius: var(--r-md);
  padding: 16px 18px;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.pending-note svg { flex: none; margin-top: 2px; }

.sent { display: none; text-align: center; padding: 40px 20px; }
.sent.show { display: block; }

/* ==========================================================================
   19. Wave divider (canvas)
   ========================================================================== */

.wave {
  height: clamp(150px, 18vw, 260px);
  position: relative;
  overflow: hidden;
  background: var(--wave-bg, var(--cream));
}
.wave canvas { display: block; width: 100%; height: 100%; }

/* ==========================================================================
   20. Footer
   ========================================================================== */

.ftr { background: var(--ink); color: var(--ink-inv); padding-block: clamp(48px, 6vw, 78px) 26px; }
.ftr a { color: rgba(255,252,246,.72); }
.ftr a:hover { color: var(--gold); }

.ftr-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(24px, 3.4vw, 52px);
  padding-bottom: clamp(32px, 4vw, 54px);
  border-bottom: 1px solid rgba(255,252,246,.14);
}
.ftr-brand { font-family: var(--brand); font-size: 1.7rem; line-height: 1; color: var(--ink-inv); }
.ftr-brand em { font-style: normal; color: var(--gold); }
.ftr-tagline { margin: 16px 0 0; font-size: .88rem; color: rgba(255,252,246,.62); max-width: 34ch; }
.ftr h4 {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,252,246,.5);
  margin: 0 0 15px;
}
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ftr li { margin: 0; }
.ftr ul a { font-size: .9rem; }

.ftr-social { display: flex; gap: 9px; margin-top: 20px; }
.ftr-social a {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,252,246,.1);
  transition: background-color .22s var(--ease);
}
.ftr-social a:hover { background: var(--gold); color: var(--ink); }

.ftr-bottom {
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .8rem;
  color: rgba(255,252,246,.5);
}
.ftr-mew { font-family: var(--brand); color: var(--gold); font-size: 1rem; }

/* ==========================================================================
   20c. Brand logo
   ==========================================================================
   The supplied wordmark is a flat two-colour mark (chocolate #3E1E0B body,
   salmon #FBA997 ears) on a transparent canvas. It reads at 13.98:1 on the
   cream page but only 1.26:1 on the hero's dark green gradient, so a second
   file ships with the body recoloured to --ink-inv (6.38:1 on the mid stop,
   11.10:1 on the darkest). Both files are 700px and 1400px wide respectively —
   2x their largest render — and weigh 4.8 KB and 11.6 KB.

   The asset's own aspect ratio (4.565:1) drives every size here, so each rule
   sets a width and lets the height follow. Never set both.
   -------------------------------------------------------------------------- */

:root {
  /* The brand's actual inks, for reference and for anyone matching UI to them.
     Note these are NOT the theme's --ink or --orange: the logo's brown is a
     deeper chocolate and its pink is a soft salmon, and neither appears
     elsewhere in the palette yet. */
  --logo-brown: #3E1E0B;
  --logo-pink:  #FBA997;
}

.logo-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* The mark is a wordmark: it must never be stretched or recoloured by a
     parent's filter, so opt out of both. */
  object-fit: contain;
}

/* Header — hidden over the hero, revealed once the bar goes solid, exactly like
   the text wordmark it replaces. */
.hdr-word--mark { display: inline-flex; align-items: center; }
.hdr-logo img,
.hdr-word .logo-img { width: clamp(96px, 11vw, 130px); }
/* The custom-logo branch had no styles at all, so a site that set one in the
   Customizer got an unstyled full-size image. */
.hdr-logo { display: inline-flex; align-items: center; }
.hdr-logo img { max-height: 40px; width: auto; }

/* Hero — the oversized brand mark the founder portrait breaks through. */
.hero-word--mark {
  /* The .17em top padding on .hero-word exists to stop Milky Coffee's
     ascenders being shaved by the card's overflow:hidden. An image has no
     ascenders, so the compensation becomes a gap. */
  padding-top: 0;
  line-height: 0;
}
.hero-word .logo-img { width: min(52%, 520px); margin-inline: auto; }

/* Footer and drawer. */
.ftr-brand--mark { display: inline-flex; align-items: center; }
.ftr-brand .logo-img { width: clamp(130px, 14vw, 164px); }
.drawer-brand { display: inline-flex; align-items: center; }
.drawer-brand .logo-img { width: 116px; }

/* Sizes at the narrow breakpoints live in section 21, with every other
   responsive rule, rather than here — one breakpoint list, not two. */

/* ==========================================================================
   20b. Post content
   ========================================================================== */

.entry { font-size: 1.02rem; line-height: 1.72; color: var(--ink-2); }
.entry > * + * { margin-top: 1.15em; }
.entry h2 { font-size: 1.6rem; color: var(--ink); margin-top: 1.9em; }
.entry h3 { font-size: 1.24rem; color: var(--ink); margin-top: 1.7em; }
.entry h4 { font-size: 1.06rem; color: var(--ink); margin-top: 1.5em; }
.entry a { color: var(--orange-ink); border-bottom: 1.5px solid var(--sand-deep); }
.entry a:hover { border-bottom-color: var(--orange-ink); }
.entry ul, .entry ol { padding-left: 1.3em; }
.entry li { margin-bottom: .5em; }
.entry blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--gold);
  font-family: var(--brand);
  font-size: 1.32rem;
  line-height: 1.35;
  color: var(--ink);
}
.entry blockquote p { margin: 0; }
.entry code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--sand);
  border-radius: 5px;
  padding: .12em .4em;
}
.entry pre {
  background: var(--ink);
  color: var(--ink-inv);
  border-radius: var(--r-md);
  padding: 20px 22px;
  overflow-x: auto;
}
.entry pre code { background: none; color: inherit; padding: 0; }
.entry img, .entry video, .entry iframe { border-radius: var(--r-md); }
.entry iframe { width: 100%; }
.entry hr { margin: 2.4em 0; }
.entry table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.entry th, .entry td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.entry th { font-weight: 600; color: var(--ink); }
.entry figcaption { font-size: .84rem; color: var(--ink-3); margin-top: .6em; }

.pagination, .nav-links {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 40px;
}
.pagination .page-numbers,
.nav-links .page-numbers {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: .9rem;
  font-weight: 600;
}
.pagination .page-numbers.current,
.nav-links .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--ink-inv); }
.pagination .page-numbers:hover,
.nav-links .page-numbers:hover { border-color: var(--sand-deep); color: var(--ink); }

/* Comment form */
.comment-form label { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%;
  font-family: var(--body);
  font-size: .95rem;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 15px;
}
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--orange-btn); background: var(--paper); }
.comment-form .form-submit { margin-top: 18px; }

/* ==========================================================================
   21. Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .hdr .nav { display: none; }
  .burger { display: inline-flex; }
  .hdr-word { position: static; transform: none; opacity: 1; margin-right: auto; }
  .hdr.scrolled .hdr-word { transform: none; }
  .hdr-tools { display: none; }

  .arc {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    place-items: stretch;
  }
  .arc-disc { grid-column: 1 / -1; margin: 0 auto clamp(22px, 3.4vw, 34px); }
  .arc-item { position: static; width: auto; margin-bottom: 0; }
  .arc-fade { display: none; }
}

@media (max-width: 980px) {
  .hero-word .logo-img { width: min(86%, 620px); }
  /* Below this the hero content stacks, so there is no fixed card height to
     shrink from. Turn the pin-and-shrink effect off and let the card size
     itself instead of clipping the stacked content. */
  .hero { --hero-base: auto; }
  .hero-run { height: auto; }
  .hero-card {
    height: auto;
    /* Content defines the height now — the old 88svh floor left a large hole
       between the picture and the centred copy block. */
    min-height: 0;
    transform: none;
    will-change: auto;
  }

  .grid-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-rev { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-grid { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .hero-fig { width: min(440px, 84%); }
  /* Stacked layout below here: the card grows instead of being pinned, so the
     svh-aware shrink on the base rule is wrong — give the picture room back.
     The hero body keeps the base centred column (it already stacks). */
  .hero-fig--pets { width: min(460px, 88%); }
}

@media (max-width: 720px) {
  .hero-word .logo-img { width: 88%; }
  .ftr-brand .logo-img { width: 140px; }
  :root { --gutter: 18px; }
  body { font-size: 16px; }
  .hero { padding: 8px 8px 0; }
  .hero-card { border-radius: var(--r-xl); }
  .grid-cats { grid-template-columns: 1fr; }
  .grid-rev { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr; gap: 30px; }
  .fgrid { grid-template-columns: 1fr; }
  .cta-band { flex-direction: column; align-items: flex-start; border-radius: var(--r-xl); }
  .arc-list { grid-template-columns: 1fr; }
  .form-foot { flex-direction: column; align-items: flex-start; }
  .faq-a-in { padding-right: 0; }
  .rev-summary { flex-direction: column; gap: 14px; }
  .cat-card .ph { aspect-ratio: 3 / 2; }
  .hdr-cta .btn { display: none; }
}

@media (max-width: 420px) {
  .hdr-word .logo-img { width: 102px; }
  .ftr-brand .logo-img { width: 124px; }
  .drawer-brand .logo-img { width: 104px; }
  .finder-bar { grid-template-columns: 1fr; }
  .line-toggle { width: 100%; }
  .line-toggle button { flex: 1; justify-content: center; }
}

/* ==========================================================================
   23. Motion accents — ports of React Bits components, rewritten as plain
       CSS/JS (WordPress + vanilla JS, no React in this theme).
       Each one is decoration: nothing here carries information that is not
       also in readable text, and the global prefers-reduced-motion rule in
       section 4 already freezes all of it.
   ========================================================================== */

/* --- ShinyText: a slow gold sheen across the accent word of a heading.
       The sweep stays inside the brand gold range (gold-deep → gold → gold-deep)
       on purpose: a white-hot highlight would drop the word's contrast against
       cream every time it passed. */
.sec-title em {
  background: linear-gradient(100deg, var(--gold-deep) 34%, var(--gold) 50%, var(--gold-deep) 66%);
  background-size: 260% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shiny-sweep 7s ease-in-out infinite;
}
@keyframes shiny-sweep {
  0%, 55% { background-position: 130% 0; }
  100%    { background-position: -60% 0; }
}

/* --- GradientText: duotone headline. The closing band is ink-on-dark, so the
       gradient runs cream → gold → cream (15:1 and ~7:1 on ink) instead of the
       ink-to-orange version, which would have been near-invisible on it. */
.cta-band h2 {
  background: linear-gradient(94deg, var(--ink-inv) 16%, var(--gold) 52%, var(--ink-inv) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* --- Squish press: buttons and segmented controls give a little on press.
       Overrides the flat .btn:active translate below it in the file. */
.btn:active { transform: translateY(1px) scale(.972); }
.line-toggle button { transition: background-color .24s var(--ease), color .24s var(--ease), transform .16s var(--ease-out); }
.line-toggle button:active { transform: scale(.94); }

/* --- Magnet: JS writes the `translate` property (NOT transform) so it composes
       with the button's own hover lift instead of fighting it. */
.magnet { will-change: translate; }

/* --- WarmTooltip: the "?" affordance next to a label. Panel shows on hover and
       on keyboard focus; the trigger is a real button with aria-describedby. */
.hint {
  display: inline-grid;
  place-items: center;
  width: 17px; height: 17px;
  margin-left: 5px;
  border: 0;
  border-radius: 50%;
  background: var(--sand-deep);
  color: var(--ink);
  font-size: .62rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: 2px;
  transition: background-color .2s var(--ease);
}
.hint:hover, .hint:focus-visible { background: var(--gold); }
.hint-wrap { display: inline; }
/* The panel is positioned against the FIELD (via .field's position: relative),
   not centred on the "?" button. Centred, a 260px panel hanging off a label
   that sits mid-column pushed the document 41px wide at 1024px. Anchored to the
   field's left edge with max-width: 100%, it cannot escape the column. */
.hint-pop {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  transform: translate(0, 6px);
  width: max-content;
  max-width: min(260px, 100%);
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--ink-inv);
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease-out);
  z-index: 8;
}
.hint-pop::after {
  content: '';
  position: absolute;
  top: 100%;
  /* JS writes --arrow-x so the arrow lands under the "?" button even though the
     panel itself is anchored to the field's left edge. */
  left: var(--arrow-x, 22px);
  border: 6px solid transparent;
  border-top-color: var(--ink);
}
.hint-wrap:hover .hint-pop,
.hint-wrap:focus-within .hint-pop { opacity: 1; transform: translate(0, 0); }

/* --- SpringCheck: the sent state pops in instead of just appearing. */
.sent.is-in .sent-mark { animation: spring-pop .62s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes spring-pop {
  0%   { transform: scale(.55) rotate(-9deg); opacity: 0; }
  62%  { transform: scale(1.08) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* --- PeekRating: the stars lean in one after another on hover. Reads as the
       row reacting, not as five separate spinners. */
.rev-stars { display: flex; gap: 2px; }
.rev-stars svg { transition: transform .22s var(--ease-out); }
.rev:hover .rev-stars svg { transform: translateY(-2px); }
.rev-stars svg:nth-child(1) { transition-delay: 0ms; }
.rev-stars svg:nth-child(2) { transition-delay: 45ms; }
.rev-stars svg:nth-child(3) { transition-delay: 90ms; }
.rev-stars svg:nth-child(4) { transition-delay: 135ms; }
.rev-stars svg:nth-child(5) { transition-delay: 180ms; }

/* --- RotatingText: one word inside a heading cycles. The static word stays in
       the DOM for anyone without JS — JS only swaps it when it is running. */
.rot-word {
  display: inline-block;
  min-width: 6.5em;
  color: var(--orange-ink);
  border-bottom: 2px solid var(--sand-deep);
}
.rot-word.is-out { opacity: 0; transform: translateY(-6px); }
.rot-word { transition: opacity .24s var(--ease), transform .24s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  /* JS keeps swapping words, so freeze the motion, not the meaning */
  .rot-word { transition: none; }
}

/* --- Aurora-style band: the CTA card gets a slowly drifting wash of brand
       colour behind its text. Ported from React Bits' shader backgrounds as a
       light 2D canvas — a WebGL port would cost ~150 KB of three.js for a
       background nobody looks at directly. */
.cta-band { position: relative; overflow: hidden; }
/* Everything except the canvas rides above it. `> *` alone would also lift the
   canvas and paint it over the text. */
.cta-band > *:not(.cta-canvas) { position: relative; z-index: 1; }
.cta-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .85;
}

/* --- HoldButton (opt-in, see functions.php `mewpurr_hold_to_send`): a ring
       fills while the button is held. Off by default because adding friction to
       the only conversion path costs enquiries. */
.btn-hold { position: relative; overflow: hidden; }
.btn-hold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(rgba(34,29,24,.30) calc(var(--hold, 0) * 1turn), transparent 0);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s linear;
}
.btn-hold.is-holding::after { opacity: 1; }

/* ==========================================================================
   24. Interior pages — shared furniture
       Used by the legal pages now, and by products / journal / editorial
       pages as they are built. One set of rules so the pages cannot drift
       apart visually.
   ========================================================================== */

.page-head {
  background: var(--paper);
  padding-bottom: clamp(18px, 2.4vw, 30px);
  /* Clear the fixed header. Nothing was doing this: each interior page relied on
     its own section padding, and at 56px the breadcrumb ended up sitting under
     the bar — the header is 74px. The homepage gets away with it because the
     hero card pads itself by --nav-h; .page-head pages had no such thing. */
  padding-top: calc(var(--nav-h) + clamp(16px, 2.4vw, 34px));
}
/* The section right under a page title does not need a full section's top
   padding — the title block already provides the breathing room, and the two
   together left ~120px of dead paper. */
.page-head + .sec,
.page-head + .sec-tight { padding-top: clamp(22px, 3vw, 42px); }
.page-head .page-title {
  font-family: var(--brand);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 0 .34em;
  text-wrap: balance;
}
.crumb {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--orange-ink); }

/* --- Legal pages */
.legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}
.legal-aside { position: sticky; top: calc(var(--nav-h) + 22px); display: grid; gap: 24px; }
.doc-toc, .doc-aside-note {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--cream);
  padding: 20px 22px;
}
.doc-toc h2, .doc-aside-note h2 {
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
}
.doc-toc ol { margin: 0; padding-left: 1.1em; display: grid; gap: 7px; }
.doc-toc a { font-size: .85rem; color: var(--ink-2); }
.doc-toc a:hover { color: var(--orange-ink); }
.doc-aside-note ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.doc-aside-note li a { font-size: .9rem; font-weight: 600; border-bottom: 1.5px solid var(--sand-deep); }
.doc-aside-note li a:hover { color: var(--orange-ink); border-bottom-color: var(--orange-ink); }
.doc-aside-note .btn { width: 100%; justify-content: center; margin-top: 6px; }

.legal-main { max-width: 74ch; }
.legal-sec + .legal-sec { margin-top: clamp(28px, 3.4vw, 44px); }
.legal-sec h2 {
  font-family: var(--body);
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.legal-sec p { margin: 0 0 12px; color: var(--ink-2); font-size: .95rem; line-height: 1.72; }
.legal-sec p:last-child { margin-bottom: 0; }

/* Unfilled placeholder — loud on purpose. A [[PLACEHOLDER]] that renders as
   quiet body text is how one goes live by accident. */
.legal-todo {
  background: #FBD9CE;
  color: var(--ink);
  border-bottom: 2px solid var(--gold-deep);
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 600;
}
.legal-notice {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 15px 18px;
  border: 1.5px dashed var(--sand-deep);
  border-radius: var(--r-md);
  background: var(--cream);
  margin-bottom: clamp(26px, 3.2vw, 38px);
}
.legal-notice span { font-size: .87rem; color: var(--ink-2); }

@media (max-width: 980px) {
  .legal-grid { grid-template-columns: 1fr; }
  .legal-aside { position: static; }
  .doc-toc { order: -1; }
}

@media print {
  .hdr, .drawer, .drawer-scrim, .marquee, .wave, .hero-toggle, .cta-canvas,
  .legal-aside, .legal-notice, .hdr-search { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   25. Interior pages — products
   ========================================================================== */

.wrap-narrow { max-width: 780px; margin-inline: auto; }
.grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.line-head { max-width: 62ch; margin-bottom: clamp(24px, 3vw, 38px); }
.line-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--ink-inv);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.line-badge svg { width: 15px; height: 15px; }

/* Whole card is the link on the collection pages, so the pointer target is the
   card rather than two words at the bottom of it. */
.cat-card-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.cat-card-link:focus-visible { outline: 2px solid var(--orange-btn); outline-offset: 3px; border-radius: var(--r-lg); }
.cat-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin-bottom: 7px;
}
.cat-card h3 { margin-top: 0; }

/* "What this page does not tell you" — the honesty panel, and the same shape
   reused wherever a page has to state a limit. */
.honest-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--cream);
  padding: clamp(24px, 3.4vw, 42px);
}
.plain-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.plain-list li {
  position: relative;
  padding-left: 20px;
  font-size: .93rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.plain-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-deep);
}
.honest-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 26px; }

/* --- Product detail */
.detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
/* A page title that is data rather than voice.
   The display face is right for a short editorial title — "About", "Sourcing",
   "Refund & Claims" — where it reads as the brand speaking. It is wrong for a
   catalogue: category names wrap to two lines ("Rope, chew and puzzle toys",
   "Bowls, slow feeders, stands") and two lines of handwriting above a spec
   table reads as a greeting card. Used on /products/ and every category page,
   so the two cannot drift apart. */
.page-title--plain {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.9vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: -.015em;
  margin-bottom: .3em;
  text-wrap: pretty;
}
.page-title--plain em { font-style: normal; color: var(--ink-3); }
.detail-fig { margin: 0; }
.detail-fig img {
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-m);
}
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 320px);
  gap: clamp(26px, 4vw, 62px);
  align-items: start;
}
.block-title {
  font-family: var(--body);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--ink);
}
/* Spacing between stacked blocks in the main column.
   NOTE: this cannot be done with the `.mt-l` helper. `.block-title` sets
   `margin: 0 0 16px` and appears LATER in this file than `.mt-l`, so at equal
   specificity the margin-top of 0 wins and `class="block-title mt-l"` does
   nothing — which is why the second heading sat on top of the callout box.
   Two classes deep beats it regardless of order. */
.detail-main > .block-title:not(:first-child) { margin-top: clamp(30px, 3.6vw, 46px); }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.check-list li { display: flex; gap: 11px; font-size: .94rem; line-height: 1.6; color: var(--ink-2); }
.check-list svg { flex: none; margin-top: 4px; }
.callout {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--cream);
  border: 1px solid var(--line);
}
.callout span { font-size: .88rem; color: var(--ink-2); }

/* Spec table. Five full-width rules with a short label and a ragged row of
   pills read as an unfinished table: the pills gave every row a different right
   edge, and the label column was 45% for two-to-four-word labels. Now the label
   column is sized to the labels, the value column takes the rest, and the pills
   become a dot plus plain text — which is what they were always saying. */
.spec-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.spec-table th, .spec-table td {
  text-align: left;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}
.spec-table th {
  font-weight: 600;
  color: var(--ink);
  width: 34%;
  padding-right: clamp(18px, 2.6vw, 40px);
}
.spec-table td { color: var(--ink-2); }
.spec-table tr:first-child th, .spec-table tr:first-child td { padding-top: 0; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

.tag-on, .tag-quote {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: .87rem;
}
.tag-on::before, .tag-quote::before {
  content: '';
  flex: none;
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.tag-on { color: var(--ink); }
.tag-on::before { background: #6E8264; }
.tag-quote { color: var(--ink-2); }
.tag-quote::before { background: var(--gold-deep); }

.detail-aside .aside-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--cream);
  padding: 24px;
  position: sticky;
  top: calc(var(--nav-h) + 22px);
}
.detail-aside h2 {
  font-family: var(--body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 4px;
}
.detail-aside .plain-list { margin-top: 12px; }
.detail-aside .btn { width: 100%; justify-content: center; margin-top: 18px; }
.aside-link {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
}

@media (max-width: 980px) {
  .detail-head { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-aside .aside-card { position: static; }
  .grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .grid-three { grid-template-columns: 1fr; }
}


/* ==========================================================================
   26. Interior pages — journal
   ========================================================================== */

.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}
.jcard {
  display: flex;
  background: var(--mist);
  border: 1px solid rgba(232,220,201,.5);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.jcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); }
.jcard--lead { grid-column: 1 / -1; }
.jcard-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.jcard--lead .jcard-link { flex-direction: row; align-items: stretch; }
.jcard-link:focus-visible { outline: 2px solid var(--orange-btn); outline-offset: 3px; border-radius: var(--r-lg); }

.jcard-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper); }
.jcard--lead .jcard-media { flex: 0 0 46%; aspect-ratio: auto; min-height: 260px; }
.jcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* No featured image: the brand plate, not a stock photo pretending to be one. */
.jcard-plate {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  min-height: 150px;
  background:
    radial-gradient(60% 70% at 30% 25%, rgba(249,168,150,.45), rgba(249,168,150,0) 70%),
    radial-gradient(50% 60% at 78% 72%, rgba(249,168,150,.5), rgba(249,168,150,0) 72%),
    var(--sand);
  color: var(--ink);
}
.jcard-plate svg { width: 34px; height: 34px; opacity: .78; }

.jcard-body { display: flex; flex-direction: column; flex: 1; padding: clamp(18px, 2vw, 26px); }
.jcard--lead .jcard-body { justify-content: center; }
.jcard-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.jcard-cat { color: var(--orange-ink); }
.jcard h2 {
  font-family: var(--brand);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.14;
  margin: 0 0 10px;
  color: var(--ink);
}
.jcard--lead h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.jcard-excerpt { font-size: .9rem; color: var(--ink-2); line-height: 1.6; }
.jcard-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--orange-ink);
}
.jcard:hover .jcard-more svg { transform: translateX(3px); }
.jcard-more svg { transition: transform .2s var(--ease-out); }

.pager ul { list-style: none; display: flex; gap: 8px; padding: 0; margin: clamp(28px, 3.4vw, 44px) 0 0; }
.pager a, .pager span.current {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--cream);
  font-weight: 600;
  font-size: .88rem;
}
.pager span.current { background: var(--ink); color: var(--ink-inv); border-color: var(--ink); }
.pager a:hover { border-color: var(--sand-deep); }

/* --- Single post */
.post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--ink-3);
  margin: 18px 0 0;
}
.post-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--sand-deep); }
.post-fig { margin: 0 0 clamp(24px, 3vw, 38px); border-radius: var(--r-xl); overflow: hidden; }
.post-fig img { width: 100%; height: auto; display: block; }

.author-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: clamp(20px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--paper);
}
.author-av {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold);
  color: var(--ink);
}
.author-card h2 { font-family: var(--body); font-size: 1rem; font-weight: 700; margin: 0 0 2px; }
.author-card p { font-size: .92rem; color: var(--ink-2); margin: 10px 0 14px; }

.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: .9rem;
}

@media (max-width: 980px) {
  .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jcard--lead .jcard-link { flex-direction: column; }
  .jcard--lead .jcard-media { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 720px) {
  .journal-grid { grid-template-columns: 1fr; }
  .author-card { flex-direction: column; }
}

/* ==========================================================================
   27. Interior pages — sourcing / for business / about
   ========================================================================== */

/* Numbered process. The order is the information, so it is a list, and the
   number is large enough to scan down the left edge. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 2.6vw, 34px); counter-reset: none; }
.step {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 34px);
  padding-bottom: clamp(20px, 2.6vw, 32px);
  border-bottom: 1px solid var(--line);
}
.step:last-child { border-bottom: 0; padding-bottom: 0; }
.step-n {
  font-family: var(--brand);
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: .9;
  color: var(--gold-deep);
}
.step-body { max-width: 68ch; }
.step-body h2 {
  font-family: var(--body);
  font-size: clamp(1.05rem, 1.6vw, 1.24rem);
  font-weight: 700;
  margin: 0 0 9px;
  color: var(--ink);
}
.step-body p { font-size: .95rem; line-height: 1.7; color: var(--ink-2); margin: 0 0 10px; }
.step-note {
  font-size: .85rem !important;
  color: var(--ink-3) !important;
  border-left: 3px solid var(--gold);
  padding-left: 12px;
  font-style: normal;
}

.split-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
}
.split-two .sec-title { font-size: clamp(1.3rem, 2vw, 1.7rem); }

.grid-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); margin-top: clamp(20px, 2.6vw, 32px); }
.mini-card {
  background: var(--mist);
  border: 1px solid rgba(232,220,201,.5);
  border-radius: var(--r-lg);
  padding: 24px;
}
.mini-ico {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold);
  color: var(--ink);
  margin-bottom: 14px;
}
.mini-card h3 { font-size: 1.02rem; font-weight: 700; margin: 0 0 8px; }
.mini-card p { font-size: .89rem; line-height: 1.6; color: var(--ink-2); margin: 0; }

.terms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px); margin-top: clamp(20px, 2.6vw, 32px); }
.terms-row { border-top: 2px solid var(--sand-deep); padding-top: 16px; }
.terms-row h3 { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 9px; }
.terms-row p { font-size: .92rem; line-height: 1.65; color: var(--ink-2); margin: 0; }

.doc-links {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  padding: 26px;
}
.doc-links h2 { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; }
.doc-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.doc-links a { font-weight: 600; border-bottom: 1.5px solid var(--sand-deep); }
.doc-links a:hover { color: var(--orange-ink); border-bottom-color: var(--orange-ink); }
.doc-links li span { display: block; font-size: .85rem; color: var(--ink-3); margin-top: 4px; }

.about-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.about-fig { margin: 0; }
.about-fig img { width: 100%; height: auto; border-radius: var(--r-xl); box-shadow: var(--shadow-m); }

.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); margin-top: clamp(18px, 2.4vw, 28px); }
.principles article { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.principles h3 { font-size: 1rem; font-weight: 700; margin: 0 0 7px; }
.principles p { font-size: .9rem; line-height: 1.62; color: var(--ink-2); margin: 0; }

.founder {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--paper);
}
.founder h2 { font-family: var(--body); font-size: 1.05rem; font-weight: 700; margin: 0 0 10px; }
.founder p { font-size: .93rem; line-height: 1.66; color: var(--ink-2); margin: 0 0 12px; }

@media (max-width: 980px) {
  .grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-head { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .split-two, .terms-grid, .principles { grid-template-columns: 1fr; }
  .grid-four { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 8px; }
  .step-n { font-size: 1.7rem; }
  .founder { flex-direction: column; }
}

/* ==========================================================================
   28. Contact page — form first, details beside it

   Deliberately NOT the legal-document layout. The legal pages put a sticky
   table of contents down the left and run numbered articles in one column,
   because a policy is read top to bottom. A contact page is not read — it is
   used. The form is the page; everything else is there to answer the two
   questions a buyer has while filling it in ("who are these people" and
   "what am I supposed to write"), so those sit in a column next to it.
   ========================================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: start;
}

.contact-form-h { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.contact-main .form-card { margin-top: clamp(18px, 2.4vw, 28px); }

/* --- The details column ------------------------------------------------- */

.contact-aside { display: grid; gap: clamp(16px, 1.8vw, 22px); }

.contact-block {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2vw, 24px);
}
.contact-block h2 {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
}
.contact-block p { font-size: .89rem; line-height: 1.62; color: var(--ink-2); margin: 0; }
.contact-block p + p { margin-top: 10px; }

/* The address is the second way in, so it gets the brand face and enough size
   to be read at a glance — not hidden as the last line of a paragraph. */
.contact-block--email { background: var(--sand); border-color: var(--sand-deep); }
.contact-mail { margin: 0 0 12px !important; }
.contact-addr {
  font-family: var(--brand);
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  line-height: 1.25;
  color: var(--orange-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
  border-bottom: 2px solid rgba(163,74,32,.3);
  transition: color .22s var(--ease), border-color .22s var(--ease);
}
.contact-addr:hover, .contact-addr:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }
.contact-addr:focus-visible { outline: 2px solid var(--orange-btn); outline-offset: 4px; border-radius: 4px; }
.contact-addr-todo {
  font-family: var(--brand);
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  line-height: 1.25;
  padding: 0 6px;
  display: inline-block;
}

/* Bulleted advice. Two columns would read as a spec sheet; one column of short
   lines reads as a person telling you what to include. */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.contact-list li {
  position: relative;
  padding-left: 22px;
  font-size: .89rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.contact-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .52em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
/* The "what we do not do" list is a set of negatives, so it gets a bar rather
   than a dot — it should not look like a feature list. */
.contact-list--plain li::before {
  top: .35em;
  width: 2px;
  height: 1em;
  border-radius: 1px;
  background: var(--sand-deep);
}

/* Compact label/value rows. A grid so the two columns line up down the card
   without a table, and it collapses to stacked on narrow screens. */
.contact-rows { margin: 0; padding: 0; display: grid; gap: 0; }
.contact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.contact-row:first-child { padding-top: 0; }
.contact-row:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-row dt {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.contact-row dd { margin: 0; font-size: .88rem; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.contact-rows-note { margin-top: 14px !important; font-size: .78rem !important; }

.contact-block--after p { color: var(--ink-2); }

@media (max-width: 980px) {
  .contact-layout { grid-template-columns: 1fr; }
  /* Form first when stacked: on a phone the aside would otherwise push the
     only thing that actually does something below two screens of reading. */
  .contact-main { order: -1; }
}

/* The two blocks that are read rather than used while filling the form. They sit
   across the full width under both columns; see the note in inc/contact.php for
   the measurement that put them here. */
.contact-below {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 22px);
  margin-top: clamp(26px, 3.2vw, 44px);
}

@media (max-width: 980px) {
  .contact-below { grid-template-columns: 1fr; }
}

/* The two blocks that are read rather than used while filling the form. They sit
   across the full width under both columns; see the note in inc/contact.php for
   the measurement that put them here. */
.contact-below {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 22px);
  margin-top: clamp(26px, 3.2vw, 44px);
}

@media (max-width: 980px) {
  .contact-below { grid-template-columns: 1fr; }
}

/* ==========================================================================
   29. Products — conventional catalogue layout

   Image and specification side by side at the top, description underneath.
   The earlier version put the title and picture in one row and buried the
   specification in a two-column body, which read as a document rather than as
   a product.
   ========================================================================== */

.product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: start;
}
.product-fig { margin: 0; }
.product-fig img {
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-m);
  background: var(--cream);
}
.product-info { display: flex; flex-direction: column; align-items: flex-start; }
.product-info .lede { margin-top: 0; }
.product-info .chip-row { margin-top: 16px; }
.product-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: clamp(20px, 2.6vw, 30px);
}

/* Specification at the top of the page, so it aligns with the image rather than
   stretching the full column width of the description below. */
.spec-table--top {
  margin-top: clamp(20px, 2.6vw, 28px);
  font-size: .88rem;
}
.spec-table--top th { width: 32%; }
.spec-table--top th, .spec-table--top td { padding: 9px 0; }
.spec-table--top th {
  font-weight: 600;
  letter-spacing: .01em;
}
.spec-table--top td { color: var(--ink-2); }

.body-p { font-size: .95rem; line-height: 1.72; color: var(--ink-2); margin: 0 0 14px; max-width: 68ch; }
.body-p:last-child { margin-bottom: 0; }

/* --- Catalogue filter bar ---------------------------------------------- */

.filter-bar {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 22px);
  flex-wrap: wrap;
  padding-bottom: clamp(16px, 2vw, 22px);
  margin-bottom: clamp(20px, 2.6vw, 30px);
  border-bottom: 1px solid var(--line);
}
.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-pill {
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--ink-2);
  border-radius: var(--r-pill);
  padding: 8px 18px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.filter-pill:hover { border-color: var(--sand-deep); }
.filter-pill.is-on { background: var(--ink); color: var(--ink-inv); border-color: var(--ink); }
.filter-pill:focus-visible { outline: 2px solid var(--orange-btn); outline-offset: 2px; }

.filter-select { margin-left: auto; }
.filter-select select {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: var(--r-pill);
  padding: 9px 38px 9px 18px;
  font-family: var(--body);
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  /* The caret is a background image rather than a wrapper pseudo-element, so
     the label can stay a plain <label> and the control keeps its native menu. */
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.filter-select select:focus-visible { outline: 2px solid var(--orange-btn); outline-offset: 2px; }

.filter-count { font-size: .82rem; font-weight: 600; color: var(--ink-3); margin: 0; }
.grid-empty { margin-top: 40px; font-size: .95rem; color: var(--ink-3); }

@media (max-width: 980px) {
  .product-hero { grid-template-columns: 1fr; }
  .filter-select { margin-left: 0; }
}

/* ==========================================================================
   30. Pink theme — the two places the swap needed a decision

   Everything else moved by changing the tokens in :root. These two could not:
   both sit ON the hero, and the hero is now the same pink as the accent.
   ========================================================================== */

/* The badge's centre disc is gone entirely — the mark is now a ring of text
   with 猫 in the middle, both drawn as outlined ink, so there is nothing left
   to recolour against the pink card. See .to-top-ring in section 7. */

/* Same problem, worse: the hero CTA was .btn-accent, which is pink — a pink
   button on a pink card. Ink-filled instead. This is the one button in the
   theme that is not in the accent colour, and it should stay that way. */
.hero .btn-accent {
  --btn-bg: var(--ink);
  --btn-fg: var(--ink-inv);
}
.hero .btn-accent:hover {
  --btn-bg: #3A322A;
  --btn-fg: var(--ink-inv);
}

/* Keep testimonial country codes centered; override the generic who span rule. */
.rev .who .av{display:flex;align-items:center;justify-content:center;line-height:1;padding:0;margin:0;letter-spacing:0;transform:none;font-family:Inter,Arial,sans-serif;font-size:12px;width:38px;height:38px;flex:0 0 38px;text-align:center}
/* 2026-10-04: readable business content and a portrait of the owner's pets. */
:root { --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.hero-refreshed { padding:calc(var(--nav-h) + 16px) 16px 0; --hero-hold:0px; --hero-s:1; }
.hero-refreshed .hero-run { height:auto; }
.hero-refreshed .hero-card { display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center;min-height:540px;padding:55px 48px;transform:none;will-change:auto;background:#F9B3A2; }
.hero-refreshed .hero-body { padding:0;align-items:flex-start;text-align:left;margin:0;gap:20px; }
.hero-refreshed .hero-word { padding:0;line-height:1;margin:0;text-align:left;font-size:24px; }
.hero-refreshed .hero-word .logo-img { width:155px;max-width:100%;margin:0; }
.hero-kicker { font:600 10px/1.6 var(--body);letter-spacing:.12em; }
.hero-refreshed .hero-say h1 { font:400 clamp(36px,3.8vw,58px)/1.08 var(--brand);margin:0;max-width:18ch;color:var(--ink); }
.hero-refreshed .hero-say p { font:400 16px/1.75 var(--body);max-width:42ch;margin:20px 0 0;color:#44332c; }
.hero-refreshed .hero-actions { justify-content:flex-start;gap:12px; }
.hero-refreshed .btn { font-family:var(--body);font-size:13px;min-height:48px; }
.hero-refreshed .btn-ghost { border-color:rgba(34,29,24,.4);color:var(--ink); }
.hero-refreshed .hero-note { font:400 12px/1.6 var(--body);margin:0;color:#58433a; }
.hero-refreshed .hero-fig--pets { width:100%;margin:0;pointer-events:auto; }
.hero-refreshed .hero-fig--pets img.hero-pets { display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain;border-radius:26px;mask-image:none;-webkit-mask-image:none;animation:none;box-shadow:0 18px 40px rgba(83,48,32,.13); }
.hero-refreshed figcaption { margin:16px 0 0;text-align:center;font:400 17px/1.4 var(--brand);color:#513c32; }
@media(max-width:980px){
 .hero-refreshed{padding:calc(var(--nav-h) + 10px) 10px 0}
 .hero-refreshed .hero-card{grid-template-columns:1fr;gap:24px;padding:28px 24px;min-height:0;border-radius:30px}
 .hero-refreshed .hero-body{display:contents}
 .hero-refreshed .hero-word{display:none}
 .hero-refreshed .hero-kicker{grid-row:1;text-align:center}
 .hero-refreshed .hero-fig--pets{grid-row:2;max-width:720px;margin-inline:auto}
 .hero-refreshed .hero-say{grid-row:3;text-align:center}
 .hero-refreshed .hero-say h1{font-size:clamp(34px,6vw,48px);max-width:18ch;margin-inline:auto}
 .hero-refreshed .hero-say p{font-size:15px;margin:14px auto 0;max-width:45ch}
 .hero-refreshed .hero-actions{grid-row:4;justify-content:center}
 .hero-refreshed .hero-note{grid-row:5;text-align:center}
 .hero-refreshed figcaption{margin-top:10px;font-size:15px}
}
@media(max-width:540px){.hero-refreshed .hero-card{padding:23px 17px;gap:19px}.hero-refreshed .hero-say h1{font-size:34px}.hero-refreshed .hero-fig--pets img.hero-pets{border-radius:18px}.hero-refreshed .hero-actions{gap:9px}.hero-refreshed .btn{padding:13px 15px;font-size:12px}.hero-kicker{font-size:9px;letter-spacing:.09em}}