/* ---------------------------------------------------------------------------
   SELF-HOSTED TYPE, added 30 Aug 2026.
   These faces used to be fetched from fonts.googleapis.com and
   fonts.gstatic.com on every visit, which announced every reader of this
   independent business's website to Google before they had read a word. They now
   sit in this build's own fonts/ folder and no font provider is contacted.

   One file per family and style, not one per weight: Google serves a single
   variable font and points every requested weight at it. Verified by
   SHA-256, which is why the weight RANGE below is wide.
   --------------------------------------------------------------------------- */
@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/fraunces-latin-italic-var.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/fraunces-latin-var.woff2') format('woff2');
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/instrument-sans-latin-var.woff2') format('woff2');
}

/* ============================================================
   Pawprint Lane — the east side, Bengaluru
   Built for a friend. Free. All facts on this page are real.

   Design note: warm editorial. The premium feeling here comes from
   typography, space and hairlines — not from blur, gradients or
   emoji. Fraunces (high-contrast serif) carries every headline;
   champagne hairlines do the dividing; the orange is used sparingly
   so that when it appears it means something.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Warm near-black, not blue-black. Lifted on 28 Aug 2026: at #0C0A08
     the page read as a hole rather than a lit room, and a pale 3D object
     on it looked cut out rather than placed. Each step is raised by about
     the same amount so the relationships between the four surfaces are
     unchanged - this is a brightness change, not a re-tint. */
  --ink:       #17120E;
  --ink-2:     #1F1913;
  --ink-3:     #29211A;
  --ink-4:     #342A21;

  --cream:     #F6F1E8;
  --text:      #EFE9DE;
  --text-dim:  rgba(239,233,222,.60);
  /* Raised from .34 on 28 Aug 2026, in two steps, and the second step is
     the instructive one. At .34 the marquee measured 2.7:1 on the page's
     near-black. .44 cleared the 3:1 that LARGE text needs - and then
     failed on mobile, where the same marquee clamps down to 17.6px and is
     therefore SMALL text needing 4.5:1. .52 clears 4.5:1 (4.89:1
     measured), so every use of this token passes at every size. A token
     used at several sizes has to satisfy the strictest of them. */
  --text-faint:rgba(239,233,222,.56);

  /* burnt orange — deeper and richer than a signage orange */
  --brand:     #E2561D;
  --brand-lift:#F26A2E;
  --brand-deep:#A83B12;

  /* champagne: the "metal" that does the quiet luxury work */
  --brass:     #C8A46A;
  --brass-lo:  rgba(200,164,106,.22);
  --brass-mid: rgba(200,164,106,.42);

  --line:      rgba(200,164,106,.20);
  --line-soft: rgba(239,233,222,.09);

  --display: "Fraunces", "Georgia", "Times New Roman", serif;
  --sans:    "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  --wrap: 1220px;
  --narrow: 880px;

  /* slow and weighty — premium motion is never bouncy */
  --ease: cubic-bezier(.16,1,.3,1);
  --slow: 1.25s;

  --shadow: 0 40px 100px -30px rgba(0,0,0,.9);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(15px,.5vw + 13.8px,16.5px);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,iframe{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

h1,h2,h3,h4{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-variation-settings:"opsz" 96, "SOFT" 0;
  letter-spacing:-.022em;
  line-height:1.02;
}

.skip{ position:fixed; top:-100px; left:16px; z-index:999;
  background:var(--brand); color:#fff; padding:12px 18px; }
.skip:focus{ top:16px; }
:focus-visible{ outline:1px solid var(--brass); outline-offset:4px; }

.wrap{ width:min(100% - 3rem, var(--wrap)); margin-inline:auto; }

/* ---------- 3. Editorial primitives ---------- */

/* small-caps label — used everywhere a section starts */
.eyebrow{
  font-family:var(--sans);
  font-size:.66rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--brass);
  margin:0 0 1.6rem;
  display:flex; align-items:center; gap:1rem;
}
.eyebrow::after{
  content:""; height:1px; flex:1; max-width:120px;
  background:linear-gradient(90deg,var(--brass-mid),transparent);
}
.head.center .eyebrow{ justify-content:center; }
.head.center .eyebrow::before{
  content:""; height:1px; flex:1; max-width:120px;
  background:linear-gradient(270deg,var(--brass-mid),transparent);
}

.h2{
  font-size:clamp(2.3rem,5.6vw,4.6rem);
  margin-bottom:1.6rem;
}
.h2 em{
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 20;
  color:var(--brass);
}
.lede{
  font-size:clamp(1rem,1.25vw,1.14rem);
  color:var(--text-dim); max-width:54ch; line-height:1.72;
}
.body{ color:var(--text-dim); margin-bottom:1.5rem; line-height:1.75; }
.muted{ color:var(--text-dim); }

.head{ max-width:800px; margin-bottom:clamp(3.4rem,6vw,5.6rem); }
.head.center{ margin-inline:auto; text-align:center; }
.head.center .lede{ margin-inline:auto; }

.section{ position:relative; z-index:2; padding:clamp(6rem,13vw,12rem) 0; }

/* a hairline that reads as a drawn rule, not a border */
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- 4. Atmosphere: warm light, fine grain ---------- */
.aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.blob{ position:absolute; border-radius:50%; filter:blur(140px); }
.b1{ width:70vw; height:70vw; left:-22vw; top:-26vw;
     background:radial-gradient(circle at 45% 45%, rgba(226,86,29,.20), transparent 66%); }
.b2{ width:60vw; height:60vw; right:-20vw; top:32vh;
     background:radial-gradient(circle at 50% 50%, rgba(200,164,106,.10), transparent 66%); }
.b3{ width:56vw; height:56vw; left:16vw; bottom:-26vw;
     background:radial-gradient(circle at 50% 50%, rgba(168,59,18,.13), transparent 68%); }

.grain{
  position:absolute; inset:-150%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.6'/></svg>");
  opacity:.038; animation:grain 9s steps(9) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0); }   10%{ transform:translate(-3%,-3%); }
  30%{ transform:translate(2%,-2%); }    50%{ transform:translate(-2%,2%); }
  70%{ transform:translate(3%,1%); }     90%{ transform:translate(-2%,1%); }
}

/* a soft vignette gives the page a printed, bound feel */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(0,0,0,.55) 100%);
}

/* ---------- 5. Panels (replaces glassmorphism) ---------- */
/* Web glassmorphism, deliberately labelled as such: an inner highlight
   along the top edge and a soft outer shadow are what make a panel read as
   a pane of something rather than a slightly paler rectangle. This is an
   approximation of the look, not Apple's Liquid Glass, which Apple
   documents for its own platforms and does not publish as CSS. */
.glass{
  background:
    linear-gradient(168deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
    rgba(255,255,255,.012);
  border:1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 44px -28px rgba(0,0,0,.75);
  position:relative;
}
@media (prefers-reduced-transparency: reduce){
  .glass{background:var(--ink-3);box-shadow:none}
}
/* nav keeps a light blur — it sits over moving content */
.nav.glass{ backdrop-filter:blur(18px) saturate(130%); -webkit-backdrop-filter:blur(18px) saturate(130%); }

/* ---------- 6. Cursor & paw trail (dialled right down) ---------- */
#trail{ position:fixed; inset:0; z-index:1; pointer-events:none; }
#cursor{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:26px; height:26px; margin:-13px 0 0 -13px;
  border:1px solid var(--brass-mid); border-radius:50%;
  transition:width .5s var(--ease), height .5s var(--ease),
             margin .5s var(--ease), background .5s var(--ease), opacity .3s;
  opacity:0;
}
#cursor span{
  position:absolute; inset:50% auto auto 50%;
  width:3px; height:3px; margin:-1.5px 0 0 -1.5px;
  background:var(--brass); border-radius:50%;
}
#cursor.grow{ width:62px; height:62px; margin:-31px 0 0 -31px; background:rgba(200,164,106,.06); }
body.has-cursor #cursor{ opacity:1; }
body.has-cursor a, body.has-cursor button, body.has-cursor .tilt{ cursor:none; }

/* ---------- 7. Offer bar ---------- */
.offerbar{
  position:relative; z-index:101;
  background:var(--ink-2);
  border-bottom:1px solid var(--line);
  overflow:hidden; padding:.62rem 0;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.offerbar-track{
  display:flex; align-items:center; gap:3rem; width:max-content;
  animation:scroll 52s linear infinite;
  font-size:.64rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--text-dim); font-weight:500;
}
.offerbar-track b{ color:var(--brass); font-weight:500; }
.offerbar-track i{ font-style:normal; color:var(--brass-mid); font-size:.5rem; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* ---------- 8. Nav ---------- */
.nav{
  position:fixed; z-index:100; top:38px; left:50%; transform:translateX(-50%);
  width:min(100% - 3rem, var(--wrap));
  display:flex; align-items:center; gap:2rem;
  padding:.85rem .85rem .85rem 1.4rem;
  border-radius:0;
  transition:box-shadow .8s var(--ease), background .8s var(--ease), top .8s var(--ease);
}
.nav.stuck{ top:0; width:100%; background:rgba(12,10,8,.9); box-shadow:0 1px 0 var(--line); padding-inline:2rem; }

.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; }
.brand-mark{ display:block; width:26px; color:var(--brand); }
.brand-mark.big{ width:44px; }
.brand-mark svg{ width:100%; height:auto; }
.brand-word{
  font-family:var(--display); font-weight:400; font-size:1.42rem;
  letter-spacing:-.02em; font-variation-settings:"opsz" 72;
}

.nav-links{ display:flex; gap:2rem; }
.nav-links a{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-dim); position:relative; padding:.3rem 0; font-weight:500;
  transition:color .5s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--brass); transition:width .6s var(--ease);
}
.nav-links a:hover{ color:var(--cream); }
.nav-links a:hover::after{ width:100%; }

.burger{ display:none; width:40px; height:40px; border:1px solid var(--line); }
.burger i{ display:block; width:15px; height:1px; background:var(--text); margin:4px auto; transition:.45s var(--ease); }
.burger[aria-expanded="true"] i:first-child{ transform:translateY(2.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child{ transform:translateY(-2.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; z-index:99; top:96px; left:50%; transform:translateX(-50%);
  width:min(100% - 3rem, 420px);
  padding:1.4rem; display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--line);
}
.mobile-menu[hidden]{ display:none; }
@media (min-width:961px){ .mobile-menu{ display:none; } }
.mobile-menu a{
  padding:.95rem .4rem; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  border-bottom:1px solid var(--line-soft); color:var(--text-dim);
}
.mobile-menu a:last-of-type{ border-bottom:0; }
.mm-call{ margin-top:.8rem; background:var(--brand); color:#fff !important; text-align:center; border:0 !important; }

/* ---------- 9. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:1.05rem 2rem; border-radius:0;
  font-size:.71rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  white-space:nowrap; position:relative; overflow:hidden;
  transition:transform .6s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
  will-change:transform;
}
.btn svg{ width:15px; height:15px; position:relative; z-index:2; }
.btn > *{ position:relative; z-index:2; }

/* the fill sweeps in from the bottom on hover — quiet, not flashy */
.btn::before{
  content:""; position:absolute; inset:0; z-index:1;
  transform:translateY(101%); transition:transform .7s var(--ease);
}
.btn:hover::before{ transform:translateY(0); }

.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary::before{ background:var(--brand-deep); }

.btn-wa{ background:transparent; color:var(--cream); border:1px solid var(--brass-mid); }
.btn-wa::before{ background:var(--brass); }
.btn-wa:hover{ color:var(--ink); border-color:var(--brass); }

.btn-ghost{ border:1px solid var(--line); color:var(--text-dim); }
.btn-ghost::before{ background:rgba(255,255,255,.06); }
.btn-ghost:hover{ color:var(--cream); border-color:var(--brass-mid); }

.btn-call{
  border:1px solid var(--line); font-size:.68rem; padding:.8rem 1.3rem; color:var(--text-dim);
}
.btn-call::before{ background:rgba(255,255,255,.05); }
.btn-call:hover{ color:var(--cream); }
.dot{ width:5px; height:5px; border-radius:50%; background:var(--brass); }

/* ---------- 10. Hero ---------- */
.hero{
  position:relative; z-index:2;
  min-height:100svh; display:grid; place-items:center;
  padding:12rem 0 7rem; text-align:center; overflow:hidden;
}
.hero-inner{
  width:min(100% - 3rem, 1120px); margin-inline:auto;
  display:flex; flex-direction:column; align-items:center;
}

.hero-title{
  font-size:clamp(2.9rem,8.8vw,8.4rem);
  line-height:.98; letter-spacing:-.032em;
  margin:0 0 2.4rem; order:1;
  font-variation-settings:"opsz" 144, "SOFT" 0;
}
.hero-title .line{ display:block; overflow:hidden; padding-bottom:.08em; }
.hero-title .w{ display:inline-block; }
.js .hero-title .w{ transform:translateY(108%); opacity:0; }
.hero-title .em{
  font-style:italic; color:var(--brass);
  font-variation-settings:"opsz" 144, "SOFT" 30, "WONK" 1;
}

.hero-sub{
  order:2; font-size:clamp(1rem,1.35vw,1.16rem); color:var(--text-dim);
  max-width:46ch; margin:0 0 3rem; line-height:1.75;
}
.hero-cta{ order:3; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* the rating strip moves below the buttons and becomes a hairline credential */
.badge{
  order:4; margin:4rem 0 0; padding:1.1rem 0 0;
  border:0; border-top:1px solid var(--line); background:none;
  display:flex; align-items:center; gap:.9rem;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--text-faint); width:min(100%,420px); justify-content:center;
}
.badge::before{ display:none; }
.badge strong{ font-family:var(--display); font-size:1.15rem; letter-spacing:0; color:var(--cream); }
.stars{ color:var(--brass); letter-spacing:.14em; font-size:.62rem; }
.stars.big{ font-size:.9rem; }

.scroll-cue{
  position:absolute; bottom:2.6rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--text-faint);
}
.scroll-cue i{ display:block; width:1px; height:54px; background:linear-gradient(var(--brass-mid),transparent); }

/* ---------- 11. Marquee ---------- */
.marquee{
  position:relative; z-index:2;
  border-block:1px solid var(--line);
  padding:1.4rem 0; overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee-track{
  display:flex; align-items:center; gap:2.4rem; width:max-content;
  animation:scroll 60s linear infinite;
}
.marquee-track span{
  font-family:var(--display); font-size:clamp(1.1rem,2.2vw,1.7rem);
  color:var(--text-faint); font-variation-settings:"opsz" 72;
}
.marquee-track b{ color:var(--brass-mid); font-size:.6rem; }

/* ---------- 12. Services — an editorial grid, not floating cards ---------- */
.grid{ display:grid; }
.services{
  grid-template-columns:repeat(auto-fit,minmax(285px,1fr));
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.card{
  position:relative; overflow:hidden;
  padding:3rem 2.2rem 2.6rem;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  background:transparent; color:inherit;
  display:flex; flex-direction:column;
  transition:background .8s var(--ease);
  transform-style:preserve-3d;
}
/* a warm wash rises on hover instead of a border glow */
.card::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(226,86,29,.09), transparent 62%);
  opacity:0; transition:opacity .8s var(--ease);
}
.card:hover::after{ opacity:1; }
.card > *{ position:relative; z-index:1; }
.card.feature{ background:rgba(226,86,29,.05); }

.card h3{
  font-size:1.62rem; margin-bottom:.7rem;
  font-variation-settings:"opsz" 72;
  transition:color .6s var(--ease);
}
.card:hover h3{ color:var(--brass); }
.card p{ font-size:.9rem; color:var(--text-dim); line-height:1.7; }

.card-num{
  position:absolute; top:2rem; right:2.2rem;
  font-family:var(--display); font-size:.8rem; color:var(--brass-mid); letter-spacing:.08em;
}
.card-go{
  margin-top:1.6rem; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass); opacity:0; transform:translateY(8px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.card:hover .card-go{ opacity:1; transform:none; }

/* icon: a hairline square, not a filled plate */
.card-ico{
  width:46px; height:46px; margin-bottom:1.8rem;
  border:1px solid var(--line);
  display:grid; place-items:center; flex-shrink:0;
  transition:border-color .6s var(--ease), background .6s var(--ease);
}
.card:hover .card-ico{ border-color:var(--brass-mid); background:rgba(200,164,106,.06); }
.card-ico::before{
  content:""; width:21px; height:21px; display:block; background:var(--brass);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  transition:background .6s var(--ease);
}
.card:hover .card-ico::before{ background:var(--brand-lift); }

.card-ico[data-ico="shop"]::before{ -webkit-mask-image:var(--i-shop); mask-image:var(--i-shop); }
.card-ico[data-ico="groom"]::before{ -webkit-mask-image:var(--i-groom); mask-image:var(--i-groom); }
.card-ico[data-ico="vet"]::before{ -webkit-mask-image:var(--i-vet); mask-image:var(--i-vet); }
.card-ico[data-ico="board"]::before{ -webkit-mask-image:var(--i-board); mask-image:var(--i-board); }
.card-ico[data-ico="walk"]::before{ -webkit-mask-image:var(--i-walk); mask-image:var(--i-walk); }
.card-ico[data-ico="taxi"]::before{ -webkit-mask-image:var(--i-taxi); mask-image:var(--i-taxi); }
.card-ico[data-ico="play"]::before{ -webkit-mask-image:var(--i-play); mask-image:var(--i-play); }
.card-ico[data-ico="community"]::before{ -webkit-mask-image:var(--i-comm); mask-image:var(--i-comm); }

:root{
  --i-shop:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9h18l-1.5 11H4.5z'/><path d='M8 9V6a4 4 0 0 1 8 0v3'/></svg>");
  --i-groom:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h16v5a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z'/><path d='M8 15v5M16 15v5M12 2v4'/></svg>");
  --i-vet:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.5-7 10-7 10z'/><path d='M12 10v5M9.5 12.5h5'/></svg>");
  --i-board:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11 12 4l9 7'/><path d='M5 10v10h14V10'/><path d='M10 20v-5h4v5'/></svg>");
  --i-walk:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><circle cx='13' cy='4.5' r='2'/><path d='M11 21l1.5-6L9 12l1-5 4 2 3 1'/><path d='M10 15l-3 6'/></svg>");
  --i-taxi:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 17h14M4 17v-4l2-5h12l2 5v4'/><circle cx='7.5' cy='17.5' r='1.6'/><circle cx='16.5' cy='17.5' r='1.6'/></svg>");
  --i-play:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3.5 9h17M3.5 15h17M12 3a14 14 0 0 0 0 18 14 14 0 0 0 0-18z'/></svg>");
  --i-comm:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3'/><circle cx='17' cy='10' r='2.4'/><path d='M3 20a6 6 0 0 1 12 0M15.5 20a5 5 0 0 1 5.5-4.6'/></svg>");

  --i-gift:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 11h16v9H4z'/><path d='M2 7h20v4H2zM12 7v13'/><path d='M12 7S10.5 3 8.5 3a2 2 0 0 0 0 4zM12 7s1.5-4 3.5-4a2 2 0 0 1 0 4z'/></svg>");
  --i-cake:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21h16v-7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3z'/><path d='M4 16.5c1.6 1.4 2.9 1.4 4.5 0s2.9-1.4 4.5 0 2.9 1.4 4.5 0M12 8V5'/><circle cx='12' cy='3.5' r='1'/></svg>");
  --i-tag:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12V4h8l9 9-8 8z'/><circle cx='7.5' cy='7.5' r='1.4'/></svg>");
  --i-truck:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M2 6h11v11H2zM13 10h4l4 4v3h-8z'/><circle cx='6.5' cy='18.5' r='1.6'/><circle cx='17' cy='18.5' r='1.6'/></svg>");
  --i-steth:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 3v6a4 4 0 0 0 8 0V3'/><path d='M9 13v2a5 5 0 0 0 10 0v-2'/><circle cx='19' cy='11' r='2'/></svg>");
  --i-eye:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6z'/><circle cx='12' cy='12' r='2.6'/></svg>");
}

/* ---------- 13. Story ---------- */
.story-grid{
  display:grid; grid-template-columns:1fr 1.08fr;
  gap:clamp(3rem,7vw,7rem); align-items:center;
}
.stack{ position:relative; aspect-ratio:1/1.08; }
.frame{
  position:absolute; overflow:hidden; will-change:transform;
  border:1px solid var(--line); box-shadow:var(--shadow); background:var(--ink-2);
}
.f1{ inset:0 24% 28% 0; z-index:3; }
.f2{ inset:32% 0 6% 36%; z-index:2; }
.f3{ inset:64% 48% 0 4%; z-index:4; }

.ph{
  width:100%; height:100%; position:relative;
  background:
    radial-gradient(110% 80% at 25% 15%, rgba(226,86,29,.16), transparent 62%),
    linear-gradient(160deg, var(--ink-4), var(--ink-2));
  display:grid; place-items:center;
}
.ph::after{
  content:attr(data-ph);
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--text-faint); text-align:center; padding:0 1rem;
}
.frame img{ width:100%; height:100%; object-fit:cover; }

/* pull-quote, set in the serif */
.quote{
  border:0; border-left:1px solid var(--brass-mid); background:none;
  padding:.4rem 0 .4rem 2.2rem; margin:0 0 2.2rem; position:relative;
}
.quote::before{ display:none; }
.quote p{
  font-family:var(--display); font-size:clamp(1.1rem,1.7vw,1.42rem);
  line-height:1.5; color:var(--cream); font-style:italic;
  font-variation-settings:"opsz" 96, "SOFT" 20;
}
.quote footer{
  margin-top:1.4rem; font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--brass); font-style:normal;
}

.stat-row{ display:flex; gap:clamp(2rem,5vw,4.5rem); flex-wrap:wrap; margin-top:3rem;
  padding-top:2.2rem; border-top:1px solid var(--line); }
.stat strong{
  display:block; font-family:var(--display); font-size:clamp(2.6rem,4.5vw,3.6rem);
  line-height:1; color:var(--cream); font-variation-settings:"opsz" 144;
}
.stat span{
  display:block; margin-top:.6rem;
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--text-faint);
}

/* ---------- 14. Membership ---------- */
.benefits{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.benefit{
  padding:2.8rem 2rem; text-align:left; position:relative;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background .8s var(--ease);
}
.benefit:hover{ background:rgba(255,255,255,.02); }
.b-ico{ display:block; width:22px; height:22px; margin-bottom:1.5rem; background:var(--brass);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain; }
.b-ico[data-ico="gift"]{ -webkit-mask-image:var(--i-gift); mask-image:var(--i-gift); }
.b-ico[data-ico="cake"]{ -webkit-mask-image:var(--i-cake); mask-image:var(--i-cake); }
.b-ico[data-ico="tag"]{ -webkit-mask-image:var(--i-tag); mask-image:var(--i-tag); }
.b-ico[data-ico="truck"]{ -webkit-mask-image:var(--i-truck); mask-image:var(--i-truck); }
.b-ico[data-ico="steth"]{ -webkit-mask-image:var(--i-steth); mask-image:var(--i-steth); }
.b-ico[data-ico="eye"]{ -webkit-mask-image:var(--i-eye); mask-image:var(--i-eye); }

.b-num{
  position:absolute; top:2.8rem; right:2rem;
  font-family:var(--display); font-size:.72rem; letter-spacing:.14em;
  color:var(--brass-mid); text-transform:uppercase;
}
.benefit h3{ font-size:1.18rem; margin-bottom:.5rem; font-variation-settings:"opsz" 48; }
.benefit p{ font-size:.85rem; color:var(--text-dim); line-height:1.7; }

.member-cta{
  margin-top:3.5rem; padding:3rem;
  display:flex; align-items:center; justify-content:space-between; gap:2.5rem; flex-wrap:wrap;
  border:1px solid var(--line); background:linear-gradient(140deg, rgba(226,86,29,.07), transparent 70%);
}
.member-cta h3{ font-size:1.55rem; margin-bottom:.7rem; }
.member-cta p{ color:var(--text-dim); font-size:.92rem; max-width:58ch; line-height:1.75; }
.fineprint{
  margin-top:2rem; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-faint); text-align:center;
}
.fineprint a{ color:var(--brass); }

/* ---------- 15. Shop rail ---------- */
.rail{
  margin-top:1rem; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab; padding-block:1rem;
}
.rail::-webkit-scrollbar{ display:none; }
.rail.dragging{ cursor:grabbing; scroll-snap-type:none; }
.rail-inner{
  display:flex; gap:1px; width:max-content; background:var(--line);
  padding-inline:max(1.5rem, calc((100vw - var(--wrap))/2));
}
.tile{
  scroll-snap-align:center; flex:0 0 auto; background:var(--ink);
  width:clamp(250px,25vw,330px); min-height:330px;
  padding:2.4rem 2rem; display:flex; flex-direction:column; justify-content:flex-end;
  position:relative; overflow:hidden; color:inherit;
  transition:background .8s var(--ease);
}
.tile::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(226,86,29,.13), transparent 55%);
  opacity:0; transition:opacity .8s var(--ease);
}
.tile:hover::before{ opacity:1; }
.tile > *{ position:relative; z-index:1; }
.tile-k{
  font-family:var(--display); font-size:.75rem; color:var(--brass-mid);
  margin-bottom:auto; letter-spacing:.1em;
}
.tile h3{ font-size:1.75rem; margin-bottom:.5rem; font-variation-settings:"opsz" 72; }
.tile p{ font-size:.86rem; color:var(--text-dim); }

/* ---------- 16. App ---------- */
.app-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(3rem,7vw,6rem); align-items:center; }
.ticks{ list-style:none; margin:0 0 2.6rem; padding:0; display:grid; }
.ticks li{
  position:relative; padding:.85rem 0 .85rem 2.2rem;
  color:var(--text-dim); font-size:.92rem; border-bottom:1px solid var(--line-soft);
}
.ticks li::before{
  content:""; position:absolute; left:.1rem; top:1.32em; width:.42rem; height:.2rem;
  border-left:1px solid var(--brass); border-bottom:1px solid var(--brass);
  transform:rotate(-45deg);
}

.stores{ display:flex; gap:1rem; flex-wrap:wrap; }
.store{
  display:inline-flex; align-items:center; gap:.85rem;
  padding:.85rem 1.4rem; border:1px solid var(--line);
  transition:border-color .6s var(--ease), background .6s var(--ease);
  will-change:transform;
}
.store:hover{ border-color:var(--brass-mid); background:rgba(200,164,106,.05); }
.store svg{ width:22px; height:22px; flex-shrink:0; }
.store span{ display:flex; flex-direction:column; line-height:1.2; }
/* .62rem and its own colour: at .55rem this rendered 8.8px, and small
   text needs 4.5:1 where large needs 3:1, so --text-faint measured
   3.78:1 here. It is the "Get it on" line above "Google Play". */
.store small{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(239,233,222,.58); }
.store strong{ font-size:.92rem; font-weight:500; font-family:var(--display); }
.stores.small{ flex-direction:column; align-items:flex-start; }

.app-visual{ display:grid; place-items:center; }
.phone{
  width:min(100%,270px); aspect-ratio:9/18.5; padding:8px;
  border:1px solid var(--line); background:var(--ink-2);
  box-shadow:var(--shadow); position:relative;
}
.phone-notch{
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  width:70px; height:16px; border-radius:100px; background:rgba(0,0,0,.6); z-index:2;
}
.phone-screen{
  width:100%; height:100%; padding:2.6rem .8rem .8rem;
  background:linear-gradient(170deg, var(--ink-3), var(--ink));
  display:flex; flex-direction:column; gap:.6rem; overflow:hidden;
}
.ps-top{ display:flex; align-items:center; gap:.5rem; padding:.3rem .4rem .7rem; }
.ps-logo{ width:17px; color:var(--brand); display:block; }
.ps-top b{ font-family:var(--display); font-size:.95rem; font-weight:400; }
.ps-card{
  display:flex; align-items:center; gap:.75rem; padding:.75rem;
  border:1px solid var(--line-soft);
}
.ps-ico{
  width:17px; height:17px; flex-shrink:0; background:var(--brass);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-position:center; mask-position:center;
}
.ps-ico[data-ico="vet"]{ -webkit-mask-image:var(--i-vet); mask-image:var(--i-vet); }
.ps-ico[data-ico="groom"]{ -webkit-mask-image:var(--i-groom); mask-image:var(--i-groom); }
.ps-ico[data-ico="board"]{ -webkit-mask-image:var(--i-board); mask-image:var(--i-board); }
.ps-card b{ display:block; font-size:.74rem; font-weight:500; }
.ps-card i{ font-style:normal; font-size:.62rem; color:var(--text-faint); }
.ps-points{
  margin-top:auto; padding:.9rem; text-align:center;
  background:var(--brand); color:#fff;
}
.ps-points b{ display:block; font-family:var(--display); font-size:.92rem; font-weight:400; }
.ps-points i{ font-style:normal; font-size:.6rem; opacity:.85; }

/* ---------- 17. Instagram ---------- */
.ig-reels{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-bottom:1.5rem; }
.ig-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.ig-embed{ overflow:hidden; background:var(--ink-2); border:1px solid var(--line); }
.ig-embed iframe{ width:100%; height:540px; border:0; display:block; }
.ig-embed.reel iframe{ height:660px; }
.ig-follow{ text-align:center; margin-top:3rem; }

/* ---------- 18. Reviews ---------- */
.rev-hero{
  padding:clamp(2.6rem,5vw,4.5rem); border:1px solid var(--line);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:center;
  background:linear-gradient(150deg, rgba(200,164,106,.06), transparent 65%);
}
.rev-score{ text-align:center; padding-right:clamp(1rem,4vw,3rem); border-right:1px solid var(--line); }
.rev-score strong{
  display:block; font-family:var(--display); font-size:clamp(4.5rem,10vw,7rem);
  line-height:.85; color:var(--cream); font-variation-settings:"opsz" 144;
}
.rev-score .stars{ display:block; margin:1.1rem 0 .6rem; }
.rev-score .muted{ font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; }
.rev-copy .h2{ margin-bottom:1.2rem; }

.chips{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.6rem; }
.chips span{
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.5rem 1rem; border:1px solid var(--line); color:var(--text-faint);
}

.rev-grid{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); margin-top:1.5rem;
  border-left:1px solid var(--line); border-top:1px solid var(--line); }
.rev{
  padding:2.6rem 2.2rem; display:flex; flex-direction:column; position:relative;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background .8s var(--ease); background:transparent;
}
.rev:hover{ background:rgba(255,255,255,.02); }
/* the opening quote mark, set large in the serif */
.rev::before{
  content:"\201C"; position:absolute; top:1rem; right:1.8rem;
  font-family:var(--display); font-size:5rem; line-height:1;
  color:var(--brass); opacity:.16;
}
.rev > p{
  font-family:var(--display); font-size:1.06rem; line-height:1.6;
  color:var(--cream); margin:1rem 0 1.6rem; font-variation-settings:"opsz" 72;
}
.rev-by{ margin-top:auto; padding-top:1.2rem; border-top:1px solid var(--line-soft); }
.rev-by b{ display:block; font-size:.88rem; font-weight:500; }
.rev-by i{ font-style:normal; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); }
.rev-reply{ margin-top:1.3rem; padding-left:1.2rem; border-left:1px solid var(--brass-lo); }
.rev-reply b{ font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); }
.rev-reply p{ font-size:.82rem; color:var(--text-dim); margin-top:.5rem; line-height:1.7; }

.rev-strip{ display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center; margin-top:3rem; }
.rev-strip span{
  padding:1.1rem 1.6rem; font-family:var(--display); font-size:.95rem;
  color:var(--text-dim); font-style:italic; border:0; border-top:1px solid var(--line);
  background:none; max-width:340px;
}
.rev-more{ text-align:center; margin-top:3rem; }

/* ---------- 19. FAQ ---------- */
.faq-list{ max-width:var(--narrow); margin-inline:auto; border-top:1px solid var(--line); }
.faq-item{
  border:0; border-bottom:1px solid var(--line); background:none;
  transition:background .6s var(--ease);
}
.faq-item::before{ display:none; }
.faq-item[open]{ background:rgba(255,255,255,.015); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:1.9rem .5rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  font-family:var(--display); font-size:1.22rem; font-weight:400;
  transition:color .5s var(--ease); font-variation-settings:"opsz" 72;
}
.faq-item summary:hover{ color:var(--brass); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary i{ width:14px; height:14px; position:relative; flex-shrink:0; }
.faq-item summary i::before, .faq-item summary i::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:1px;
  background:var(--brass); transition:transform .6s var(--ease);
}
.faq-item summary i::after{ transform:rotate(90deg); }
.faq-item[open] summary i::after{ transform:rotate(0); }
.faq-a{ padding:0 .5rem 2rem; max-width:62ch; }
.faq-a p{ color:var(--text-dim); font-size:.95rem; line-height:1.8; }
.faq-a a{ color:var(--brass); border-bottom:1px solid var(--brass-lo); }

/* ---------- 20. Visit ---------- */
.visit-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(3rem,7vw,6rem); align-items:center; }
.info{ margin:0 0 2.8rem; display:grid; border-top:1px solid var(--line); }
.info div{ padding:1.5rem 0; border-bottom:1px solid var(--line); display:grid;
  grid-template-columns:130px 1fr; gap:1.5rem; align-items:baseline; }
.info dt{ font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--brass); }
.info dd{ margin:0; font-size:.98rem; line-height:1.65; color:var(--text-dim); }
.info a{ color:var(--cream); border-bottom:1px solid var(--brass-lo); }
.info a:hover{ color:var(--brass); }
.visit-cta{ display:flex; gap:1rem; flex-wrap:wrap; }

.map-frame{ border:1px solid var(--line); padding:10px; background:var(--ink-2); }
.map-frame iframe{
  width:100%; height:clamp(320px,45vh,480px); border:0;
  filter:invert(92%) hue-rotate(180deg) saturate(.6) contrast(.88) sepia(.12);
}

/* ---------- 21. Closing band ---------- */
.cta-band{
  position:relative; z-index:2; text-align:center;
  padding:clamp(6rem,12vw,10rem) 0;
  border-top:1px solid var(--line);
  background:radial-gradient(70% 120% at 50% 0%, rgba(226,86,29,.10), transparent 62%);
}
.cta-title{ font-size:clamp(2.4rem,7vw,5.6rem); margin-bottom:1.6rem; letter-spacing:-.03em; }
.cta-title em{ font-style:italic; color:var(--brass); font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 1; }
.cta-band p{ color:var(--text-dim); margin-bottom:2.8rem; }
.cta-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ---------- 22. Footer ---------- */
.footer{ position:relative; z-index:2; border-top:1px solid var(--line); padding-top:clamp(4rem,7vw,6rem); }
.foot-top{ padding-bottom:3.5rem; }
.foot-tag{ color:var(--text-dim); margin-top:1.4rem; font-size:.95rem; line-height:1.7; }
.foot-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:3rem; padding-bottom:4rem; }
/* h3, not h4: the footer used to jump from the band's h2 straight to
   h4, which skips a level and fails heading-order. The look is unchanged. */
.foot-col h3{
  font-family:var(--sans); font-size:.6rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--brass); margin-bottom:1.6rem;
}
.foot-col h3.mt{ margin-top:2.4rem; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.foot-col ul a{ color:var(--text-dim); font-size:.88rem; transition:color .5s var(--ease); }
.foot-col ul a:hover{ color:var(--brass); }
.foot-col p{ color:var(--text-dim); font-size:.9rem; line-height:1.7; }
.foot-contact a{ color:var(--text-dim); }
.foot-contact a:hover{ color:var(--brass); }

.socials{ display:flex; gap:.9rem; margin-top:1.2rem; }
.socials a{
  width:38px; height:38px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--text-faint);
  transition:.5s var(--ease);
}
.socials a svg{ width:17px; height:17px; }
.socials a:hover{ color:var(--brass); border-color:var(--brass-mid); }

.foot-base{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:2rem 0 2.5rem; border-top:1px solid var(--line);
  /* .68rem, not .62, and its own colour rather than --text-faint. At the
     old size this line rendered at 8.8px, and small text needs 4.5:1
     where large text needs 3:1, so the dim token that is fine everywhere
     else measured 3.78:1 here. Bigger and brighter fixes both, and 8.8px
     was below comfortable reading size regardless. */
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(239,233,222,.58);
}
/* Underlined, not merely a different colour. Colouring it alone left it
   1.47:1 against the text beside it and failed link-in-text-block - a
   fault introduced while fixing the contrast above, which is the argument
   for re-running the check after every change rather than at the end. */
.foot-base a{ color:rgba(239,233,222,.72); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px; }
.foot-base a:hover{ color:var(--brass); }

/* Site credit, added 29 Aug 2026 at his request. A full-width flex item
   inside .foot-base rather than a separate block, so it wraps onto its own
   row without negative margins and inherits the footer's own uppercase,
   letter-spaced idiom instead of introducing a second footer style.
   It reuses .foot-base's exact colour, rgba(239,233,222,.58), rather than
   a dimmer one: that value is the one documented above as clearing 4.5:1
   at this size, and this build has already had two contrast failures. */
.byline{ flex:1 0 100%; text-align:center; margin-top:.4rem;
  color:rgba(239,233,222,.58); }
.to-top:hover{ color:var(--brass); }

/* ---------- 23. Floating WhatsApp ---------- */
.fab{
  position:fixed; right:26px; bottom:26px; z-index:150;
  width:52px; height:52px; border-radius:50%;
  background:var(--ink-2); border:1px solid var(--brass-mid); color:var(--brass);
  display:grid; place-items:center;
  transition:transform .6s var(--ease), background .6s var(--ease), color .6s var(--ease);
}
.fab svg{ width:24px; height:24px; }
.fab:hover{ background:var(--brass); color:var(--ink); transform:scale(1.06); }

/* ---------- 24. Scroll progress, dots, preloader ---------- */
.progress{
  position:fixed; top:0; left:0; height:1px; width:0; z-index:200;
  background:var(--brass);
}

.dots{ position:fixed; right:26px; top:50%; transform:translateY(-50%);
  z-index:120; display:flex; flex-direction:column; gap:1rem; }
.dots a{ display:block; position:relative; padding:3px; }
.dots i{ display:block; width:5px; height:5px; border-radius:50%;
  background:rgba(239,233,222,.2); transition:.6s var(--ease); }
.dots a:hover i{ background:var(--brass); }
.dots a.on i{ background:var(--brass); transform:scale(1.5); }
.dots a::after{
  content:attr(data-label); position:absolute; right:22px; top:50%;
  transform:translateY(-50%) translateX(6px);
  font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
  color:var(--brass); background:var(--ink-2); padding:.35rem .7rem;
  border:1px solid var(--line); opacity:0; pointer-events:none; transition:.5s var(--ease);
}
.dots a:hover::after{ opacity:1; transform:translateY(-50%) translateX(0); }

.preload{
  position:fixed; inset:0; z-index:9998; background:var(--ink);
  display:grid; place-items:center;
  transition:opacity 1s var(--ease), visibility 1s;
}
.preload.done{ opacity:0; visibility:hidden; }
.preload-in{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.preload-paw{ width:44px; color:var(--brand); animation:pawPulse 2s var(--ease) infinite; }
.preload-paw svg{ width:100%; height:auto; }
@keyframes pawPulse{
  0%,100%{ transform:scale(1); opacity:.7; }
  50%{ transform:scale(1.08); opacity:1; }
}
.preload-word{
  font-family:var(--display); font-size:1.05rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--text-faint);
}
.preload-bar{ width:120px; height:1px; background:rgba(239,233,222,.12); overflow:hidden; }
.preload-bar i{ display:block; height:100%; width:0; background:var(--brass); animation:preFill 1.7s var(--ease) forwards; }
@keyframes preFill{ to{ width:100%; } }

/* ---------- 25. Reveals ---------- */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.1s; }
.reveal[data-d="2"]{ transition-delay:.2s; }
.reveal[data-d="3"]{ transition-delay:.3s; }
.reveal[data-d="4"]{ transition-delay:.4s; }
.reveal[data-d="5"]{ transition-delay:.5s; }
.reveal[data-d="6"]{ transition-delay:.6s; }
.reveal[data-d="7"]{ transition-delay:.7s; }

.js .split .sw{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.js .split .sw > span{ display:inline-block; transform:translateY(106%); transition:transform 1.4s var(--ease); }
.js .split.in .sw > span{ transform:translateY(0); }

/* ---------- 26. Scrollbar ---------- */
html{ scrollbar-color:var(--brass-mid) var(--ink); scrollbar-width:thin; }
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--brass-lo); border:3px solid var(--ink); }
::-webkit-scrollbar-thumb:hover{ background:var(--brass-mid); }

::selection{ background:var(--brand); color:#fff; }

/* ---------- 27. Responsive ---------- */
@media (max-width:1200px){ .dots{ display:none; } }
@media (max-width:1100px){ .foot-grid{ grid-template-columns:repeat(2,1fr); gap:3rem; } }
@media (max-width:960px){
  .nav-links{ display:none; }
  .burger{ display:block; }
  .btn-call{ display:none; }
  .story-grid, .visit-grid, .app-grid{ grid-template-columns:1fr; }
  .story-visual{ order:-1; max-width:440px; }
  .app-visual{ order:-1; }
  .ig-grid{ grid-template-columns:repeat(2,1fr); }
  .rev-hero{ grid-template-columns:1fr; text-align:center; }
  .rev-score{ border-right:0; border-bottom:1px solid var(--line); padding:0 0 2.5rem; }
  .rev-copy .h2, .rev-copy .lede{ margin-inline:auto; }
  .chips{ justify-content:center; }
  .member-cta{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:620px){
  .hero{ padding-top:9rem; }
  .ig-reels, .ig-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .rev-strip{ flex-direction:column; align-items:center; }
  .info div{ grid-template-columns:1fr; gap:.5rem; }
  .fab{ right:16px; bottom:16px; }
  .card, .benefit{ padding:2.2rem 1.5rem; }
  .faq-item summary{ font-size:1.05rem; padding:1.5rem .2rem; }
}

/* ---------- 28. Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js .reveal{ opacity:1; transform:none; }
  .js .hero-title .w{ opacity:1; transform:none; }
  .js .split .sw > span{ transform:none; }
  #trail,#cursor,.preload{ display:none; }
}


/* ---------- the bone: a real 3D model, always turning ----------------

   Added 28 Aug 2026. Same engine and the same rules as an earlier build's
   molar - the two sites share the craft and deliberately not the
   colours, because DECISIONS.md requires each build in this folder to
   keep its own palette family. Here the light is warm and the rims are
   orange and brass, taken from this shop's own palette.

   It stands where a "Scroll" cue used to be. A wide band suits a
   horizontal subject, and it cannot sit under text, which is what keeps
   it out of the contrast trouble a 3D object behind a headline invites. */
.bone-stage{
  /* Standing, and beside the headline rather than above it. Absolutely
     placed because this hero is a centred stack, not a grid - putting the
     object in the flow would push the headline down the page. */
  position:absolute;
  right:clamp(12px,5vw,110px);
  /* Positioned against the VIEWPORT, not the hero's midpoint. The hero is
     taller than a laptop screen, so centring on it put the object's middle
     below the fold and the bone was cut off at the bottom of the window.
     svh keeps it stable when mobile browser chrome slides. */
  top:clamp(150px,30svh,300px);
  width:clamp(110px,12vw,180px);
  aspect-ratio:1/2.1;
  z-index:1;pointer-events:none;
}
.bone-still,.bone-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bone-still{object-fit:contain}
/* The still is what ships and paints first; the canvas fades over it only
   once WebGL is running and the model has arrived, so any failure leaves a
   complete hero rather than a hole in it. */
.bone-canvas{opacity:0;transition:opacity .6s var(--ease)}
.bone-stage.ready .bone-canvas{opacity:1}
.bone-stage.ready .bone-still{opacity:0;transition:opacity .6s var(--ease)}

/* NO PLINTH, NO PANEL, NO GLOW. The slab it used to sit on read as a
   lozenge stuck onto the page. With the canvas transparent the object
   floats directly on the hero and the page reads as one surface with
   something alive on it, which is what was actually wanted. The rim
   lighting in bone.js is what separates it from the ground now, rather
   than a box drawn behind it. */

@media (max-width:1100px){
  /* This rule was .bone-stage{display:none}, which is why he reported the
     bone as "not even visible in mobile ... completely gone in mobile
     view" on 29 Aug 2026. It was deliberate, not a bug - three.js is never
     fetched below 1100px - but the effect was that Pawprint Lane's own mark, the
     thing named in its share-card alt text, disappeared on the device most
     of its customers use.

     It comes back below 1100px as the still render, MOVING: a slow hover
     with a small tilt. Transforms only, so it is GPU-composited and costs
     nothing beyond the 38KB PNG that was already being shipped. No
     three.js, no .glb, no WebGL on a phone - the 750KB library stays
     desktop-only.

     It is deliberately NOT a motionless image. A big static object sitting
     in a hero doing nothing is the exact defect that got another build's
     capsule scrapped on the same day, and repeating it here would just
     move the complaint from one site to another. */
  /* Centred in the empty band between the floating nav and the headline,
     turned on its side so a long thin object fits a short wide gap. The
     first attempt put it top-right at 80px wide; measured against the live
     layout it ran straight through the headline's right edge (bone
     300-380px, h1 60-331px), which is the crowding the note above always
     warned about. Measured, not eyeballed: nav ends 107px, h1 starts
     182px, so the band is 75px tall and the mark is sized to sit inside
     it with clearance on both sides and NO change to the hero's layout. */
  .bone-stage{
    display:block;
    right:auto; left:50%;
    /* Relative to .hero, which itself starts 38px down the viewport under
       the announcement bar - measured, because getting that offset wrong
       is what put the first attempt back over the headline. */
    top:clamp(72px,9svh,84px);
    width:clamp(32px,9.5vw,42px);
    animation:bone-hover 5.4s ease-in-out infinite;
    will-change:transform;
  }
  /* Nothing ever renders into the canvas at this width, so it is not just
     transparent - it is not there. */
  .bone-canvas{display:none}
  .bone-still{opacity:1}
}
/* translateX(-50%) is part of every frame, not a separate rule: a transform
   in an animation replaces the element's transform outright, so centring it
   in a rule of its own would be thrown away the moment the animation ran. */
@keyframes bone-hover{
  0%,100%{transform:translateX(-50%) translateY(0)    rotate(83deg)}
  50%    {transform:translateX(-50%) translateY(-9px) rotate(97deg)}
}

@media (prefers-reduced-motion:reduce){
  .bone-canvas{display:none}
  .bone-stage.ready .bone-still{opacity:1}
  /* With the hover switched off, the mobile bone would be exactly the
     motionless object this change exists to avoid - so below 1100px it
     goes entirely rather than sitting there dead. */
  .bone-stage{animation:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:1100px){
  .bone-stage{display:none}
}

/* ===========================================================================
   COOKIE NOTICE, added 30 Aug 2026. Built by main.js so the wording cannot
   drift between index.html and legal.html. This site sets nothing of its own,
   so the notice states that rather than inventing a choice.
   This build is dark throughout, so the bar is a raised dark surface rather
   than a white card that would punch a hole in the page. The button carries
   dark text on the brand orange, which is the pairing that actually passes:
   white on #E2561D does not.
   =========================================================================== */
.cookiebar{
  position:fixed; z-index:70;
  left:clamp(.5rem,2vw,1.25rem); right:clamp(.5rem,2vw,1.25rem);
  bottom:clamp(.5rem,2vw,1.25rem);
  max-width:46rem; margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:.85rem 1.15rem;
  padding:1rem 1.15rem;
  background:#29211A; color:#D8CDBE;
  border:1px solid rgba(200,164,106,.28); border-left:3px solid #E2561D;
  border-radius:14px;
  box-shadow:0 34px 70px -30px rgba(0,0,0,.7);
  transform:translateY(130%); opacity:0;
  transition:transform .42s cubic-bezier(.16,1,.3,1), opacity .42s cubic-bezier(.16,1,.3,1);
}
.cookiebar--in{transform:none; opacity:1}
.cookiebar--out{transform:translateY(130%); opacity:0}
.cookiebar__text{flex:1 1 20rem; margin:0; font-family:var(--sans); font-size:.88rem; line-height:1.55}
.cookiebar__text strong{color:#F6F1E8; font-weight:700}
.cookiebar__text a{color:#F58C55; font-weight:600}
.cookiebar__btn{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding:.6rem 1.4rem;
  border:0; border-radius:999px; cursor:pointer;
  background:#E2561D; color:#17120E;
  font-family:var(--sans); font-size:.82rem; font-weight:700;
  transition:transform .16s ease-out, filter .2s ease-out;
}
.cookiebar__btn:hover{filter:brightness(1.08)}
.cookiebar__btn:active{transform:scale(.97)}
.cookiebar__btn:focus-visible{outline:2px solid #F6F1E8; outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .cookiebar{transition:none; transform:none; opacity:1}
  .cookiebar--out{display:none}
}

/* Concept-site additions. */
.map-stub{padding:28px 24px;border:1px solid currentColor;opacity:.75;font-size:.95em}