/* ==================================================
   THE PINK POODLE · Bubblegum Blvd. design system
   Tokens, type, layout, nav, footer, shared cmpts.
   ================================================== */

:root{
  /* Palette */
  --paper:        #FFF0F5;   /* marshmallow paper */
  --paper-warm:   #FFF6F2;   /* slightly creamier paper */
  --bubble-lt:    #FFD6E3;   /* light bubblegum */
  --bubble:       #FF8DBA;   /* the walls */
  --sign:         #FF5EA0;   /* the sign / primary pink */
  --berry:        #C4255F;   /* deeper pink */
  --oxblood:      #3A0A1F;   /* nearly-black wine */
  --ink:          #1A0510;   /* body type */
  --star:         #FFD60A;   /* sparkle accents */
  --shadow-strong: 4px 4px 0 var(--oxblood);
  --shadow-soft:  2px 2px 0 rgba(58,10,31,.18);

  /* Type */
  --f-display:    "Lobster", "Brush Script MT", cursive;
  --f-script:     "Caveat", cursive;
  --f-italic:     "DM Serif Display", "Times New Roman", serif;
  --f-body:       "Outfit", "Helvetica Neue", system-ui, sans-serif;
  --f-mono:       "JetBrains Mono", ui-monospace, monospace;

  /* Layout */
  --maxw:         1200px;
  --pad-x:        clamp(24px, 5vw, 80px);
  --section-py:   clamp(64px, 8vw, 120px);
  --radius:       4px;
  --radius-pill:  999px;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body{
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- TYPOGRAPHY ---------- */
.h-display{
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--sign);
  -webkit-text-stroke: 2px var(--oxblood);
  text-shadow: 4px 4px 0 var(--bubble-lt);
  letter-spacing: .005em;
  line-height: .98;
}
.h-display--lg{ font-size: clamp(36px, 9vw, 148px); }
.h-display--md{ font-size: clamp(28px, 6vw, 92px); }
.h-display--sm{ font-size: clamp(24px, 4vw, 60px); -webkit-text-stroke: 1.5px var(--oxblood); text-shadow: 3px 3px 0 var(--bubble-lt); }

.h-script{
  font-family: var(--f-script);
  font-weight: 700;
  color: var(--berry);
  line-height: 1;
  letter-spacing: .02em;
}

.h-italic{
  font-family: var(--f-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--oxblood);
  letter-spacing: -.01em;
  line-height: 1.05;
}

.kicker, .eyebrow{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--berry);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.kicker::before{
  content:"✦";
  color: var(--sign);
  font-size: 12px;
}

.lead{
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 56ch;
}

.body-fine{
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}

.mono-line{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oxblood);
}

/* ---------- BUTTONS ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  border: 2px solid var(--oxblood);
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  color: var(--oxblood);
  white-space: nowrap;
}
.btn:hover{ transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--oxblood); }
.btn:active{ transform: translate(2px, 2px); box-shadow: none; }
.btn--primary{ background: var(--sign); color: var(--paper); box-shadow: var(--shadow-strong); }
.btn--primary:hover{ box-shadow: 6px 6px 0 var(--oxblood); }
.btn--dark{ background: var(--oxblood); color: var(--paper); border-color: var(--oxblood); }
.btn--ghost{ background: var(--paper); color: var(--oxblood); }
.btn--sm{ padding: 9px 16px; font-size: 12px; }

/* ---------- NAVIGATION ---------- */
.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 2px solid var(--oxblood);
}
.nav-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px var(--pad-x);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
.nav-mark{
  font-family: var(--f-display);
  font-size: 32px;
  color: var(--sign);
  -webkit-text-stroke: 1.5px var(--oxblood);
  text-shadow: 2px 2px 0 var(--bubble-lt);
  line-height: 1;
  white-space: nowrap;
}
.nav-mark small{
  display: block;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--berry);
  -webkit-text-stroke: 0;
  text-shadow: none;
  margin-top: 2px;
}
.nav-links{
  display: flex;
  gap: 28px;
  justify-content: center;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a{
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  position: relative;
  padding: 4px 0;
}
.nav-links a:hover{ color: var(--sign); }
.nav-links a.is-active::after{
  content:"";
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--sign);
  border-radius: 3px;
}
.nav-cta{ display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.nav-phone{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--oxblood);
  display: none;
}
.nav-burger{ display: none; }

/* Hamburger button */
.hamburger{
  display: none;
  background: none;
  border: 2px solid var(--oxblood);
  border-radius: var(--radius);
  width: 44px; height: 44px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.hamburger span,
.hamburger span::before,
.hamburger span::after{
  display: block;
  width: 20px; height: 2px;
  background: var(--oxblood);
  position: absolute;
  left: 50%; transform: translateX(-50%);
  transition: .2s;
}
.hamburger span{ top: 50%; margin-top: -1px; }
.hamburger span::before{ content:""; top: -7px; left: 0; width: 20px; }
.hamburger span::after{ content:""; top: 7px; left: 0; width: 20px; }
.hamburger.is-open span{ background: transparent; }
.hamburger.is-open span::before{ top: 0; transform: rotate(45deg); }
.hamburger.is-open span::after{ top: 0; transform: rotate(-45deg); }

/* Mobile nav overlay */
.mobile-nav{
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--paper);
  z-index: 99;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 80px 32px;
}
.mobile-nav.is-open{ display: flex; }
.mobile-nav a{
  font-family: var(--f-display);
  font-size: 36px;
  color: var(--sign);
  -webkit-text-stroke: 1.5px var(--oxblood);
  text-shadow: 3px 3px 0 var(--bubble-lt);
  text-decoration: none;
  line-height: 1.3;
}
.mobile-nav .mobile-nav-cta{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.mobile-nav-close{
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: 2px solid var(--oxblood);
  border-radius: var(--radius);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 28px;
  color: var(--oxblood);
  font-weight: 700;
  line-height: 1;
  padding: 0;
  transition: background .15s, color .15s;
}
.mobile-nav-close:hover{
  background: var(--sign);
  color: var(--paper);
}

@media (max-width: 880px){
  .nav-inner{
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    padding: 12px var(--pad-x);
  }
  .nav-links{ display: none; }
  .nav-cta .btn--ghost, .nav-cta .btn--sm:not(.btn--primary){ display: none; }
  .nav-cta .btn--primary{ font-size: 12px; padding: 10px 16px; }
  .hamburger{ display: flex; align-items: center; justify-content: center; }
}

/* ---------- FOOTER ---------- */
.footer{
  background: var(--oxblood);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.footer::before{
  content:"";
  position: absolute;
  left:0; right:0; top:0;
  height: 14px;
  background: radial-gradient(circle at 14px 14px, var(--paper) 14px, transparent 15px) repeat-x;
  background-size: 28px 14px;
  transform: translateY(-1px);
}
.footer-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 80px var(--pad-x) 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.footer-mark{
  font-family: var(--f-display);
  font-size: 56px;
  color: var(--sign);
  -webkit-text-stroke: 2px var(--paper);
  text-shadow: 3px 3px 0 var(--berry);
  line-height: 1;
  margin-bottom: 16px;
}
.footer-mark small{
  display: block;
  font-family: var(--f-script);
  font-weight: 700;
  font-size: 22px;
  color: var(--bubble-lt);
  -webkit-text-stroke: 0;
  text-shadow: none;
  margin-top: 4px;
  transform: rotate(-2deg);
}
.footer-block h4{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bubble-lt);
  margin: 0 0 14px;
  font-weight: 700;
}
.footer-block ul{ list-style: none; margin: 0; padding: 0; }
.footer-block li{ margin-bottom: 8px; font-size: 14px; }
.footer-block a:hover{ color: var(--bubble-lt); }
.footer-bottom{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px var(--pad-x) 36px;
  border-top: 1px solid rgba(255,240,245,.18);
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bubble-lt);
}

@media (max-width: 880px){
  .footer-inner{ grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-bottom{ flex-direction: column; gap: 12px; }
}

/* ---------- CONTAINER & SECTION SHELLS ---------- */
.section{ padding: clamp(60px, 8vw, 110px) var(--pad-x); }
.section--paper{ background: var(--paper); }
.section--cream{ background: var(--paper-warm); }
.section--bubble{ background: var(--bubble); color: var(--oxblood); }
.section--bubble-lt{ background: var(--bubble-lt); }
.section--ink{ background: var(--oxblood); color: var(--paper); }
.container{ max-width: var(--maxw); margin: 0 auto; }

/* ---------- SECTION HEAD ---------- */
.section-head{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  margin-bottom: 48px;
  padding-bottom: 22px;
  border-bottom: 2px solid currentColor;
}
.section-head h2{
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(40px, 5.2vw, 76px);
  color: var(--sign);
  -webkit-text-stroke: 2px currentColor;
  text-shadow: 4px 4px 0 var(--bubble-lt);
  line-height: 1;
}
.section--ink .section-head h2{ text-shadow: 4px 4px 0 var(--berry); }
.section--bubble .section-head h2{ text-shadow: 4px 4px 0 var(--bubble-lt); }
.section-head .meta-right{
  text-align: right;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .75;
  max-width: 36ch;
  line-height: 1.55;
}

/* ---------- CARDS (general) ---------- */
.card{
  background: var(--paper);
  border: 2px solid var(--oxblood);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-strong);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--oxblood); }

/* ---------- IMAGE PLACEHOLDERS ---------- */
.ph{
  position: relative;
  background:
    repeating-linear-gradient(45deg,
      rgba(58,10,31,.06) 0 2px,
      transparent 2px 14px),
    var(--bubble-lt);
  border: 2px solid var(--oxblood);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--oxblood);
}
.ph::after{
  content: attr(data-label);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--paper);
  padding: 5px 10px;
  border: 1px solid var(--oxblood);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.ph--bubble{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 2px, transparent 2px 12px),
    var(--bubble);
}
.ph--sign{
  background:
    repeating-linear-gradient(45deg, rgba(255,240,245,.14) 0 2px, transparent 2px 12px),
    var(--sign);
}
.ph--ink{
  background:
    repeating-linear-gradient(45deg, rgba(255,240,245,.06) 0 2px, transparent 2px 14px),
    var(--oxblood);
  color: var(--paper);
}
.ph--ink::after{ background: var(--oxblood); color: var(--paper); border-color: var(--paper); }

/* image-slot integration: tame its default look to our card */
image-slot{
  --is-bg: var(--bubble-lt);
  --is-fg: var(--oxblood);
  --is-border: var(--oxblood);
  border: 2px solid var(--oxblood) !important;
  border-radius: var(--radius) !important;
  background:
    repeating-linear-gradient(45deg,
      rgba(58,10,31,.06) 0 2px,
      transparent 2px 14px),
    var(--bubble-lt) !important;
}

/* ---------- HAND-PAINTED FLOURISH ---------- */
.scribble-under{
  position: relative;
  display: inline-block;
}
.scribble-under::after{
  content: "";
  position: absolute;
  left: -4%; right: -4%;
  bottom: -8px;
  height: 8px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, var(--sign) 60%, transparent 62%);
  opacity: .85;
}

.ribbon-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  background: var(--oxblood);
  color: var(--paper);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
}
.ribbon-pill .star{ color: var(--star); }

/* ---------- STAR BADGE ("51 YEARS" sticker) ---------- */
.seal{
  width: 110px; height: 110px;
  background: var(--sign);
  color: var(--paper);
  border: 2px solid var(--oxblood);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--f-display);
  line-height: 1.05;
  padding: 14px;
  box-shadow: var(--shadow-strong);
  transform: rotate(-8deg);
  flex-shrink: 0;
}
.seal .big{
  display: block;
  font-size: 34px;
  line-height: .9;
  -webkit-text-stroke: 1.5px var(--oxblood);
  text-shadow: 2px 2px 0 var(--bubble-lt);
}
.seal .small{
  display: block;
  font-family: var(--f-mono);
  font-size: 8px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* ---------- POLAROID FRAME ---------- */
.polaroid{
  background: var(--paper);
  border: 2px solid var(--oxblood);
  padding: 12px 12px 56px;
  box-shadow: var(--shadow-strong);
  position: relative;
  display: flex;
  flex-direction: column;
}
.polaroid .ph{ aspect-ratio: 4/5; }
.polaroid .cap{
  position: absolute;
  left: 0; right: 0;
  bottom: 14px;
  text-align: center;
  font-family: var(--f-script);
  font-weight: 700;
  font-size: 22px;
  color: var(--berry);
  line-height: 1;
}

/* ---------- TICKET (service cards) ---------- */
.ticket{
  background: var(--paper);
  border: 2px solid var(--oxblood);
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ticket:hover{
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--oxblood);
}
.ticket-head{
  background: var(--bubble-lt);
  padding: 16px 20px;
  border-bottom: 2px dashed var(--oxblood);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.ticket-head .num{ font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; }
.ticket-head .price{ font-family: var(--f-script); font-size: 22px; color: var(--berry); font-weight: 700; }
.ticket-body{ padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.ticket-body h3{
  font-family: var(--f-display);
  font-size: 32px;
  margin: 0;
  color: var(--sign);
  -webkit-text-stroke: 1px var(--oxblood);
  text-shadow: 2px 2px 0 var(--bubble-lt);
  line-height: 1;
}
.ticket-body .ticket-sub{
  font-family: var(--f-script);
  font-weight: 700;
  color: var(--berry);
  font-size: 18px;
  line-height: 1.1;
  margin-top: -8px;
  transform: rotate(-1deg);
}
.ticket-body p{ margin: 0; font-size: 14.5px; line-height: 1.5; }
.ticket-body ul{ margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.55; }

/* ---------- AWNING STRIPE ---------- */
.awning-stripe{
  height: 14px;
  background: repeating-linear-gradient(
    90deg,
    var(--sign) 0 24px,
    var(--paper) 24px 48px
  );
  border-top: 2px solid var(--oxblood);
  border-bottom: 2px solid var(--oxblood);
}

/* ---------- SPARKLE FIELD (decorative) ---------- */
.sparkles{
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--star);
  font-family: var(--f-script);
  font-size: 24px;
  opacity: .9;
}
.sparkles .sp{ position: absolute; }

/* ---------- FAQ ---------- */
.faq details{
  border-top: 2px solid var(--oxblood);
  padding: 22px 0;
}
.faq details:last-of-type{ border-bottom: 2px solid var(--oxblood); }
.faq summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--f-display);
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--sign);
  -webkit-text-stroke: 1px var(--oxblood);
  text-shadow: 2px 2px 0 var(--bubble-lt);
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "+";
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 28px;
  color: var(--oxblood);
  -webkit-text-stroke: 0;
  text-shadow: none;
  transition: transform .2s;
}
.faq details[open] summary::after{ content: "×"; }
.faq .answer{
  padding-top: 14px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- UTILITIES ---------- */
.flex{ display: flex; }
.grid{ display: grid; }
.gap-12{ gap: 12px; }
.gap-16{ gap: 16px; }
.gap-24{ gap: 24px; }
.gap-32{ gap: 32px; }
.center{ align-items: center; justify-content: center; }
.between{ justify-content: space-between; }
.wrap{ flex-wrap: wrap; }
.hide-mobile{ }
@media (max-width: 720px){
  .hide-mobile{ display: none !important; }
}

/* ---------- SECTION BREATHING ROOM ---------- */
.section{ padding: var(--section-py) 0; }

/* ---------- SCROLL REVEAL ANIMATIONS ---------- */
.reveal{
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1{ transition-delay: .1s; }
.reveal-delay-2{ transition-delay: .2s; }
.reveal-delay-3{ transition-delay: .3s; }

/* ---------- HERO WINDOW PHOTOS ---------- */
.storefront .window{
  position: relative;
  overflow: hidden;
}
.storefront .window .win-photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  z-index: 0;
}
.storefront .window .stars,
.storefront .window .glass-text,
.storefront .window .addr{ position: relative; z-index: 1; }
.storefront .door{
  position: relative;
  overflow: hidden;
}
.storefront .door .win-photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ---------- MOBILE FOUNDATION (safety) ---------- */
html, body{ max-width: 100vw; }
body{ overflow-wrap: break-word; word-wrap: break-word; }
h1, h2, h3, h4, h5, h6{ overflow-wrap: break-word; }
img, video, iframe{ max-width: 100%; height: auto; }

/* ---------- RESPONSIVE — tablet ---------- */
@media (max-width: 960px){
  .section-head{ flex-direction: column; gap: 12px; }
  .meta-right{ text-align: left; }
  .footer-cols{ grid-template-columns: 1fr 1fr !important; gap: 32px; }
  .pillars{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- RESPONSIVE — mobile ---------- */
@media (max-width: 720px){
  :root{
    --pad-x: 18px;
    --section-py: 48px;
  }

  /* ── GLOBAL — use clip not hidden (hidden breaks sticky nav) ── */
  html{ overflow-x: clip !important; }
  body{ overflow-x: clip !important; max-width: 100vw !important; }
  .container{ padding: 0 var(--pad-x); }
  .section{ padding: var(--section-py) 0; }

  /* ── NAV (clean: logo left, book center-right, hamburger right) ── */
  .nav-mark{ font-size: 24px; }
  .nav-mark small{ font-size: 8px; }

  /* ── HERO ── */
  .hero-inner{ grid-template-columns: 1fr !important; gap: 24px !important; padding: 0 var(--pad-x) 32px !important; }
  .hero h1{ font-size: clamp(48px, 13vw, 68px) !important; -webkit-text-stroke: 2px var(--oxblood) !important; text-shadow: 4px 4px 0 var(--bubble-lt) !important; }
  .hero-promise{ font-size: clamp(22px, 5vw, 28px); }
  .hero-sub{ font-size: 15px; }
  .hero-cta .btn{ padding: 12px 20px; font-size: 14px; }
  /* Stats: 2x2 grid, sits BELOW the storefront */
  .hero-trust{ grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 100%; order: 3; }
  .hero-trust .item .num{ font-size: 28px; }
  /* Storefront: smaller, centered, ORDER before stats */
  .storefront{ max-width: 300px; margin: 0 auto; aspect-ratio: 3/4; order: 2; }
  .storefront .floating-seal{ right: 4px; bottom: 60px; top: auto; }
  .seal{ width: 80px !important; height: 80px !important; }
  .seal .big{ font-size: 26px !important; }
  .seal .small{ font-size: 7px !important; }
  .storefront .awning .name{ font-size: 28px !important; }
  .storefront .awning .sub{ font-size: 14px; }

  /* ── SECTION HEADS — switch to body font on mobile, BIGGER per Tim audit ── */
  /* FIX 5/31: .section-head is display:grid — flex-direction was a no-op, leaving
     the headline crammed in a narrow left column. Force single-column grid so the
     headline gets full width and the meta-right note drops below it. */
  .section-head{ gap: 12px !important; grid-template-columns: 1fr !important; }
  .section-head h2,
  .h-display--lg,
  .h-display--md,
  .h-display--sm{
    font-family: var(--f-body) !important;
    font-weight: 900 !important;
    font-size: clamp(32px, 8vw, 44px) !important;
    /* FIX 5/31: restore thin oxblood stroke — was 0, which dropped every mobile
       headline below 3.0 contrast (testimonials hit 1.33) and lost the brand's
       outlined-pink look. The dark stroke reads against ANY background. */
    -webkit-text-stroke: 1px var(--oxblood) !important;
    text-shadow: 2.5px 2.5px 0 var(--bubble-lt) !important;
    color: var(--sign) !important;
    line-height: 1.1 !important;
  }
  /* FIX 5/31: on the bright bubble-pink section, pink fill failed (1.33) — switch to
     paper fill so the dark-stroked headline pops cleanly (high contrast + premium). */
  .section--bubble .section-head h2{ color: var(--paper) !important; }
  .meta-right{ font-size: 10px; text-align: left !important; }

  /* ── PILLARS (value prop cards) → 2-up compact ── */
  .pillars{ grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .pillar{ padding: 18px 16px 20px; }
  .pillar .pillar-num{ font-size: 40px; margin-bottom: 8px; }
  .pillar h3{ font-size: 17px; }
  .pillar p{ font-size: 13px; }

  /* ── SERVICE TICKETS (home preview) → 2x2 compact ── */
  .services-grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .ticket-head{ padding: 10px 14px; }
  .ticket-head .price{ font-size: 18px; }
  .ticket-body{ padding: 14px 14px 16px; gap: 10px; }
  .ticket-body h3{ font-size: 22px; -webkit-text-stroke: .8px var(--oxblood); }
  .ticket-body .ticket-sub{ font-size: 15px; }
  .ticket-body p{ font-size: 13px; }
  .ticket-body ul{ font-size: 12px; }

  /* ── TEAM POLAROIDS → 2-up compact, NO rotation ── */
  .team-grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 10px; overflow: hidden; }
  .team-card{ transform: none !important; --rot: 0deg !important; }
  .team-card .polaroid{ padding: 4px 4px 32px; }
  .polaroid .cap{ font-size: 15px; bottom: 8px; }
  .team-card .specialty{ font-size: 8px; letter-spacing: .12em; }
  .team-card .ask{ font-size: 13px; }
  .team-card .blurb{ font-size: 11px; line-height: 1.4; }

  /* ── GALLERY PREVIEW → 2-up ── */
  .gallery-grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .gallery-grid image-slot{ border-radius: 2px !important; }

  /* ── TESTIMONIALS → stack ── */
  .testimonials-grid{ grid-template-columns: 1fr !important; gap: 14px; }
  .testimonial{ padding: 20px; }
  .testimonial .quote{ font-size: 16px; }

  /* ── CTA BAND ── */
  .cta-section h2{ font-size: clamp(36px, 10vw, 52px) !important; }

  /* ── FOOTER → 2-col then stack ── */
  .footer-cols{ grid-template-columns: 1fr 1fr !important; gap: 20px; }
  .footer-bottom{ flex-direction: column; gap: 8px; text-align: center; font-size: 9px; }
  .footer-mark{ font-size: 28px; }

  /* ── PAGE HEROES (inner pages) ── */
  .page-hero-inner{ grid-template-columns: 1fr !important; }
  .page-hero h1{ font-size: clamp(44px, 11vw, 64px) !important; }

  /* ── SERVICES PAGE — featured cards stack ── */
  .features-grid{ grid-template-columns: 1fr !important; gap: 16px; }
  .feature .body{ padding: 20px 18px; }
  .feature h3{ font-size: 30px; }

  /* ── SERVICES PAGE — special care grid → 2-up compact ── */
  .care-grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .care-card{ padding: 14px 12px; }
  .care-card svg, .care-card .icon{ width: 28px; height: 28px; }
  .care-card h4{ font-size: 14px !important; -webkit-text-stroke: 0.8px var(--oxblood) !important; }
  .care-card p{ font-size: 11px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .care-card .mono-line{ font-size: 8px; }

  /* ── SERVICES PAGE — add-ons → 2-up ── */
  .addons-grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }

  /* ── GALLERY PAGE ── */
  .feature-row-inner{ grid-template-columns: 1fr !important; gap: 14px; }
  .feature-tile image-slot{ height: 220px; }

  /* ── ABOUT PAGE — timeline fix ── */
  .t-step{ padding-left: 0 !important; }
  .t-step .dot{ position: static !important; margin: 0 0 8px !important; }
  .t-step .dot::after{ position: static !important; display: inline-block !important; margin-left: 12px; font-size: 22px !important; }
  .t-step h4{ font-size: 17px; }
  .t-step p{ font-size: 13px; }
  .timeline::before{ display: none; }

  /* ── ABOUT PAGE — team deep cards → horizontal swipe carousel ── */
  .team-deep-inner .section-head + div,
  .team-deep-inner{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .team-card-deep{
    grid-template-columns: 1fr !important;
    min-width: 85vw;
    max-width: 85vw;
    scroll-snap-align: start;
    margin-bottom: 16px;
  }
  /* Make team cards into a horizontal scroll row */
  .team-deep-inner > article.team-card-deep{
    display: inline-grid !important;
    vertical-align: top;
  }
  .team-card-deep .photo{ max-height: 180px; overflow: hidden; }
  .team-card-deep .photo image-slot{ width: 100% !important; height: 100% !important; }
  .team-card-deep .info{ padding: 16px 14px !important; gap: 8px !important; }
  .team-card-deep .info h3{ font-size: 24px !important; -webkit-text-stroke: 1px var(--oxblood) !important; }
  .team-card-deep .info .role{ font-size: 16px; }
  .team-card-deep .info p{ font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .team-card-deep .stats{ flex-wrap: wrap; gap: 6px; }
  .team-card-deep .stat{ font-size: 8px; padding: 5px 8px; }
  .team-card-deep .ask-btn{ font-size: 13px; padding: 10px 18px; }

  /* ── CONTACT PAGE ── */
  .visit-hero-inner{ grid-template-columns: 1fr !important; }
  .book-grid{ grid-template-columns: 1fr !important; }
  .book-card h3{ font-size: clamp(30px, 8vw, 44px); }
  .map-grid{ grid-template-columns: 1fr !important; }
  .map-frame{ aspect-ratio: 4/3; }

  /* ── TAP TARGETS ── */
  .btn{ min-height: 44px; padding: 12px 22px; font-size: 14px; }

  /* ── HORIZONTAL OVERFLOW — clip not hidden (preserves sticky) ── */
  section, footer, .hero, .storefront, .awning-stripe{
    max-width: 100vw;
    overflow-x: clip;
  }

  /* ═══ FIX: Mobile headlines BIGGER (Tim audit: all headlines too small) ═══ */
  .section-head h2,
  .h-display--lg,
  .h-display--md,
  .h-display--sm{
    font-size: clamp(32px, 8vw, 44px) !important;
    line-height: 1.1 !important;
  }

  /* ═══ FIX: "Pink Poodle" nav-mark title bigger on mobile ═══ */
  .nav-mark{
    font-size: 28px !important;
  }

  /* ═══ FIX: Hero h1 "The Pink Poodle" DOMINATES on mobile (Tim priority 5/31) ═══ */
  /* NOTE: index.html inline @880px rule is the cascade winner — kept in sync there too. */
  .hero h1{
    font-size: clamp(70px, 21vw, 90px) !important;
    -webkit-text-stroke: 3px var(--oxblood) !important;
    text-shadow: 5px 5px 0 var(--bubble-lt) !important;
    line-height: .86 !important;
  }

  /* ═══ FIX: Page hero h1 bigger on mobile (inner pages) ═══ */
  .page-hero h1{
    font-size: clamp(42px, 11vw, 60px) !important;
  }

  /* ═══ FIX: Gallery filter bar compact + sticky on mobile ═══ */
  .filter-bar{
    position: sticky !important;
    top: 60px;
    padding: 8px var(--pad-x);
    gap: 6px;
    z-index: 30;
  }
  .filter-inner{ gap: 8px; }
  .filter-label{ font-size: 9px; display: none; }
  .filter-pills{ gap: 6px; }
  .filter-pill{ padding: 5px 10px; font-size: 10px; }
  .filter-count{ font-size: 9px; margin-left: 0; }

  /* ═══ FIX: Before/after horizontal overflow ═══ */
  .ba-pair{ overflow: hidden; max-width: 100%; }
  .ba-pair .pair-grid{ grid-template-columns: 1fr 1fr !important; gap: 8px; overflow: hidden; }
  .ba-pair .pair-grid > div{ overflow: hidden; min-width: 0; }
  .ba-pair image-slot{ max-width: 100% !important; width: 100% !important; overflow: hidden; }
  .ba-grid{ overflow: hidden; }
  .ba-section{ overflow-x: clip; }

  /* ═══ FIX: Hero address overlay — hide on mobile ═══ */
  .storefront .floating-seal{ display: none; }

  /* ═══ FIX: About page timeline dots on mobile ═══ */
  .t-step .dot{ width: 28px; height: 28px; }
  .t-step .dot::after{ font-size: 18px !important; font-weight: 700; }

  /* ═══ FIX: Contact headlines bigger ═══ */
  .visit-hero h1{ font-size: clamp(36px, 9vw, 52px) !important; }
  .book-card h3{ font-size: clamp(28px, 7vw, 40px) !important; }
}

/* ═══ FIX: Mobile nav — hamburger opens, close button closes ═══ */
header.nav{ z-index: 100 !important; }
.mobile-nav{ z-index: 99 !important; }
.mobile-nav-close{
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: 2px solid var(--oxblood);
  border-radius: var(--radius);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 28px;
  color: var(--oxblood);
  font-weight: 700;
  line-height: 1;
  padding: 0;
  z-index: 100;
  transition: background .15s, color .15s;
}
.mobile-nav-close:hover{
  background: var(--sign);
  color: var(--paper);
}

/* ═══ FIX: Service card hover lift (desktop — Tim audit: shadow but no lift) ═══ */
.ticket{
  transition: transform .25s cubic-bezier(.2,1,.3,1), box-shadow .25s cubic-bezier(.2,1,.3,1);
}
.ticket:hover{
  transform: translateY(-8px) !important;
  box-shadow: 0 12px 24px rgba(58, 10, 31, 0.18), 6px 6px 0 var(--oxblood) !important;
}

/* ═══ FIX: Special Care card hover animations (lift + shadow) ═══ */
.care-card{
  transition: transform .25s cubic-bezier(.2,1,.3,1), box-shadow .25s cubic-bezier(.2,1,.3,1);
  cursor: default;
}
.care-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 14px 32px rgba(58, 10, 31, 0.18), 6px 6px 0 var(--oxblood);
}

/* ═══ FIX: Service boxes clickable cursor ═══ */
.ticket{ cursor: pointer; }

/* ═══ FIX: About page exterior photo sizing ═══ */
.page-hero .page-hero-side image-slot,
.page-hero image-slot{
  min-height: 200px;
  width: 100%;
}

/* ═══ FIX: About page timeline — dots over line, clean appearance ═══ */
.timeline .t-step .dot{
  position: relative;
  z-index: 2;
  background: var(--paper);
  border: 3px solid var(--sign);
  box-shadow: 0 0 0 4px var(--paper);
}
.timeline .t-step .dot::after{
  position: relative;
  z-index: 3;
}
.timeline::before{
  z-index: 1;
}