/* =========================================================
   Simba's Dog Grooming
   Warm, calm, small-studio. The opposite of a clinical chain:
   cream paper, plum ink, one apricot accent, rounded forms.

   Every colour pair carrying text was measured against its own
   ground. Ratios are written beside the tokens so the next person
   does not have to re-derive them.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Nunito+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Ground */
  --cream:    #FDF8F4;
  --sand:     #F3E9DE;
  --sand-2:   #EADCCB;
  --white:    #FFFFFF;

  /* Ink — measured on --cream */
  --ink:      #2A1F33;   /* 13.9:1 */
  --ink-soft: #5D5166;   /* 6.2:1  */

  /* Brand */
  --plum:      #5B3A8E;  /* 7.6:1 on cream — safe for text */
  --plum-deep: #3B2560;
  --plum-tint: #EFE8F7;
  --lilac:     #DBCDEC;  /* closing-CTA band -- its own tone, so the CTA
                            never repeats whatever band sits above it */
  --apricot:   #E08A55;  /* 2.9:1 on cream — FILLS ONLY, never text */
  --apricot-ink: #A85520; /* 4.9:1 on cream — the readable variant */

  --line:     rgba(42, 31, 51, 0.10);
  --line-2:   rgba(42, 31, 51, 0.16);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Nunito Sans', system-ui, sans-serif;

  --r:      14px;
  --r-lg:   24px;
  --r-pill: 999px;

  --shadow:    0 10px 30px rgba(59, 37, 96, 0.08);
  --shadow-lg: 0 24px 60px rgba(59, 37, 96, 0.16);

  --wrap: 1140px;
  --gut:  22px;

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

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}

p { margin: 0 0 1.1rem; }
a { color: var(--plum); }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: 760px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--plum);
  margin: 0 0 14px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: var(--apricot);
}
.eyebrow--light { color: #F0E4F7; }
.eyebrow--light::before { background: var(--apricot); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: 16px;
  padding: 15px 28px; min-height: 54px;
  border-radius: var(--r-pill); border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}
.btn--primary { background: var(--plum); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--plum-deep); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--outline { border-color: var(--plum); color: var(--plum); background: transparent; }
.btn--outline:hover { background: var(--plum-tint); transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--plum-deep); }
.btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--ghost-light { border-color: rgba(255,255,255,.55); color: #fff; }
.btn--ghost-light:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(253, 248, 244, 0.94);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.site-head.is-stuck { box-shadow: 0 2px 20px rgba(42,31,51,.08); border-bottom-color: var(--line); }
.head__in { display: flex; align-items: center; gap: 24px; height: 78px; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.brand__mark { width: 40px; height: 40px; flex-shrink: 0; }
.brand__name {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  color: var(--ink); line-height: 1.05; letter-spacing: -0.01em;
}
.brand__name span { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--plum); }

.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a {
  position: relative; text-decoration: none; color: var(--ink-soft);
  font-weight: 600; font-size: 15.5px; padding: 6px 0;
  transition: color .2s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--apricot); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a.is-current::after { transform: scaleX(1); }
.nav a.is-current { color: var(--plum); }

.head__cta { display: flex; align-items: center; gap: 12px; }

.burger {
  display: none; margin-left: auto; width: 46px; height: 46px;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: transparent; cursor: pointer;
  align-items: center; justify-content: center;
}
.burger span, .burger span::before, .burger span::after {
  display: block; width: 19px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.burger span { position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.drawer { display: none; border-top: 1px solid var(--line); padding: 8px var(--gut) 22px; background: var(--cream); }
.drawer.is-open { display: block; }
.drawer a {
  display: block; padding: 15px 0; text-decoration: none;
  color: var(--ink); font-weight: 700; font-size: 17px;
  border-bottom: 1px solid var(--line);
}
.drawer .btn { margin-top: 18px; width: 100%; }

/* ---------- Open / closed pill ---------- */
.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700;
  padding: 8px 15px; border-radius: var(--r-pill);
  background: var(--plum-tint); color: var(--plum-deep);
  border: 1px solid rgba(91,58,142,.18);
}
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--apricot-ink); flex-shrink: 0; }
.status--open .status__dot { background: #2E7D4F; }
.status--open { background: #E6F4EC; color: #1B5E36; border-color: rgba(27,94,54,.18); }
.status em { font-style: normal; font-weight: 500; opacity: .85; }
.status--light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }
.status--light em { opacity: .9; }

/* Only the live pill pulses, and only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .status--open .status__dot { animation: pulse 2.4s ease-in-out infinite; }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46,125,79,.45); }
  50%      { box-shadow: 0 0 0 6px rgba(46,125,79,0); }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; background: var(--plum-deep); }
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0;
}
.hero__media video { opacity: 0; transition: opacity .9s var(--ease); }
.hero__media video.is-ready { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(36,27,46,.55) 0%, rgba(36,27,46,.12) 34%, rgba(36,27,46,.78) 82%, rgba(36,27,46,.92) 100%),
    linear-gradient(90deg, rgba(59,37,96,.62) 0%, rgba(59,37,96,.10) 58%);
}
.hero__in { position: relative; z-index: 2; padding: 150px 0 68px; color: #fff; width: 100%; }
.hero h1 {
  color: #fff; font-size: clamp(38px, 6.2vw, 76px); font-weight: 600;
  max-width: 15ch; margin-bottom: 20px;
}
.hero h1 em { font-style: italic; color: #F6D9BD; }
.hero__sub { font-size: clamp(17px, 2vw, 21px); color: rgba(255,255,255,.92); max-width: 46ch; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 22px; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 22px; z-index: 3;
  transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.5);
  border-radius: 14px; display: grid; place-items: start center; padding-top: 7px;
}
.scroll-cue span { width: 3px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.9); display: block; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue span { animation: cue 1.9s var(--ease) infinite; }
}
@keyframes cue {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(13px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}

/* ---------- Sections ---------- */
.band { padding: clamp(60px, 8vw, 110px) 0; }
.band--sand { background: var(--sand); }
.band--plum { background: var(--plum-deep); color: #F3EDF9; }
.band--plum h2, .band--plum h3 { color: #fff; }
.band--plum p { color: rgba(243,237,249,.86); }
.band--lilac { background: var(--lilac); }
.band--tight { padding: clamp(44px, 5vw, 70px) 0; }
/* The paw divider is apricot, which goes flat at 55% on a light band. */
.band--lilac .paws { opacity: .85; }

.head-block { max-width: 640px; margin-bottom: 44px; }
.head-block--center { margin-left: auto; margin-right: auto; text-align: center; }
.head-block h2 { font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 14px; }
.head-block p { font-size: 18.5px; color: var(--ink-soft); margin: 0; }
.band--plum .head-block p { color: rgba(243,237,249,.82); }

/* ---------- Difference cards ---------- */
.diffs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.diff {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 32px 28px; box-shadow: var(--shadow);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.diff:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.diff__n {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--plum-tint); color: var(--plum); margin-bottom: 18px;
}
.diff h3 { font-size: 21px; margin-bottom: 9px; }
.diff p { margin: 0; color: var(--ink-soft); font-size: 16px; }

/* ---------- Services ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.svc:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.svc__media { flex: 0 0 auto; overflow: hidden; }
/* Explicit height, not aspect-ratio — a fixed height keeps the card titles on
   a shared baseline regardless of the source photograph's proportions. */
.svc__media img {
  width: 100%; height: 196px; object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.svc:hover .svc__media img { transform: scale(1.05); }
.svc__body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1 1 auto; }
.svc h3 { font-size: 22px; margin-bottom: 8px; }
.svc__lede { color: var(--ink-soft); font-size: 16px; margin-bottom: 14px; }
.svc__list { list-style: none; margin: 0 0 18px; padding: 0; }
.svc__list li {
  position: relative; padding-left: 24px; font-size: 15.5px;
  color: var(--ink-soft); margin-bottom: 7px;
}
.svc__list li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--apricot);
}
.svc__note {
  margin: 0; font-size: 14.5px; color: var(--apricot-ink);
  background: #FCF1E8; border-radius: 12px; padding: 12px 15px;
  border: 1px solid rgba(168,85,32,.16);
}
.svc__foot { margin-top: auto; padding-top: 18px; }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 62px); align-items: center; }
.split--flip .split__media { order: -1; }
.split__media img {
  width: 100%; height: 430px; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.split h2 { margin-bottom: 16px; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.step { position: relative; padding-top: 8px; }
.step__n {
  counter-increment: step; font-family: var(--font-display);
  font-size: 52px; font-weight: 700; color: var(--apricot);
  line-height: 1; margin-bottom: 10px; display: block;
}
.step__n::before { content: "0" counter(step); }
.step h3 { font-size: 21px; margin-bottom: 8px; }
.step p { margin: 0; color: var(--ink-soft); font-size: 16px; }
.band--plum .step p { color: rgba(243,237,249,.82); }

/* ---------- Hours table ---------- */
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { text-align: left; padding: 14px 6px; border-bottom: 1px solid var(--line); font-size: 16.5px; }
.hours th { font-family: var(--font-body); font-weight: 700; }
.hours td { text-align: right; color: var(--ink-soft); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--plum); font-weight: 700; }
.hours tr.is-closed td { color: var(--ink-soft); opacity: .7; }
.hours tr.is-today th::after {
  content: "Today"; margin-left: 10px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; background: var(--plum-tint); color: var(--plum);
  padding: 3px 8px; border-radius: var(--r-pill); font-weight: 700;
}

/* ---------- Contact cards ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ccard {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px 26px; box-shadow: var(--shadow);
}
.ccard h3 { font-size: 18px; margin-bottom: 8px; }
.ccard p { margin: 0; color: var(--ink-soft); font-size: 16px; }
.ccard a { font-weight: 700; word-break: break-word; }

/* ---------- Callout ---------- */
.callout {
  background: var(--plum-tint); border: 1px solid rgba(91,58,142,.16);
  border-radius: var(--r-lg); padding: 28px 30px;
}
.callout p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-foot { background: var(--plum-deep); color: rgba(243,237,249,.8); padding: 60px 0 28px; }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.site-foot h4 {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #C9B3E6; margin-bottom: 14px;
}
.site-foot a { color: rgba(243,237,249,.85); text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.foot__links a { display: block; padding: 5px 0; }
.foot__brand .brand__name { color: #fff; }
.foot__brand .brand__name span { color: #C9B3E6; }
.foot__bar {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 14px; color: rgba(243,237,249,.6);
}

/* ---------- Paw divider ---------- */
.paws { display: flex; gap: 14px; justify-content: center; align-items: center; margin: 0 0 18px; opacity: .55; }
.paws svg { width: 20px; height: 20px; }

/* ---------- Scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(22px); }
  [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
  [data-reveal-group] > * { opacity: 0; transform: translateY(22px); }
  [data-reveal-group].is-in > * { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
  [data-reveal-group].is-in > *:nth-child(2) { transition-delay: .09s; }
  [data-reveal-group].is-in > *:nth-child(3) { transition-delay: .18s; }
  [data-reveal-group].is-in > *:nth-child(4) { transition-delay: .27s; }
  [data-reveal-group].is-in > *:nth-child(5) { transition-delay: .36s; }
  [data-reveal-group].is-in > *:nth-child(6) { transition-delay: .45s; }
}

/* ---------- Sticky call bar, phones only ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(253,248,244,.97); border-top: 1px solid var(--line-2);
}
.callbar .btn { flex: 1 1 0; min-height: 50px; font-size: 15px; padding: 12px 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .nav, .head__cta { display: none; }
  .burger { display: flex; }
  .diffs, .svc-grid, .steps, .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .split__media img { height: 320px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  :root { --gut: 18px; }
  body { font-size: 16.5px; }
  .diffs, .svc-grid, .steps, .contact-grid, .foot__grid { grid-template-columns: 1fr; }
  .hero { min-height: 560px; }
  .hero__in { padding: 110px 0 96px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .callbar { display: flex; }
  .callbar .btn { width: auto; }
  body { padding-bottom: 74px; }   /* clear the fixed call bar */
  .scroll-cue { display: none; }
}