/* =========================================================
   Moka's Doggy Daycare — Design tokens
   Palette: warm linen + deep pine + mustard gold + brick
   Display: Fraunces / Body: Work Sans / Utility: Space Grotesk
   ========================================================= */

:root{
  --cream:      #F8F1E1;
  --paper:      #FFFDF7;
  --sand:       #F0E4C9;
  --ink:        #2B2318;
  --ink-soft:   #5B5142;
  --pine:       #2F4A3E;
  --pine-dark:  #223A30;
  --pine-tint:  #E4ECE6;
  --gold:       #D9A441;
  --gold-dark:  #B98526;
  --brick:      #B0522D;
  --brick-dark: #8F3F20;
  --line:       #E3D8BE;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Work Sans", -apple-system, Segoe UI, sans-serif;
  --font-utility: "Space Grotesk", var(--font-body);

  --radius: 18px;
  --radius-sm: 10px;
  --shadow-soft: 0 12px 30px -14px rgba(43,35,24,0.28);
  --shadow-lift: 0 20px 44px -18px rgba(43,35,24,0.34);
  --maxw: 1180px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; line-height:1.12; margin:0 0 .5em; color: var(--pine-dark); }
p{ margin:0 0 1em; }
em{ font-style: italic; }

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--pine); color:#fff;
  padding: .75em 1.25em; z-index: 200; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline: 3px solid var(--gold); outline-offset: 3px; }

.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap--narrow{ max-width: 820px; }
.center{ text-align:center; }
.light{ color: var(--paper) !important; }

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  font-family: var(--font-utility);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brick);
  display:flex; align-items:center; gap:.5em;
  margin: 0 0 .9em;
}
.eyebrow--center{ justify-content:center; }
.eyebrow--light{ color: var(--gold); }
.eyebrow__dot{ width:7px; height:7px; border-radius:50%; background: var(--brick); display:inline-block; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family: var(--font-utility); font-weight:600; font-size: .96rem;
  padding: .95em 1.7em; border-radius: 999px; border: 2px solid transparent;
  cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn--brick{ background: var(--brick); color:#fff; box-shadow: var(--shadow-soft); }
.btn--brick:hover{ background: var(--brick-dark); }
.btn--pine{ background: var(--pine); color:#fff; }
.btn--pine:hover{ background: var(--pine-dark); }
.btn--outline{ background:transparent; border-color: var(--pine); color: var(--pine); }
.btn--outline:hover{ background: var(--pine); color:#fff; }
.btn--outline-light{ background:transparent; border-color: rgba(255,255,255,.6); color:#fff; }
.btn--outline-light:hover{ background: rgba(255,255,255,.15); }
.btn--sm{ padding:.6em 1.2em; font-size:.85rem; }
.btn--block{ width:100%; }

/* ---------- Leash scroll indicator (signature element) ---------- */
.leash{
  position: fixed; top: 0; left: 18px; height: 100vh; width: 24px; z-index: 40;
  display:none;
  pointer-events:none;
}
@media (min-width: 1150px){ .leash{ display:block; } }
.leash__track{ position:absolute; left:9px; top:0; height:100%; }
.leash__track line{ stroke: var(--line); stroke-width: 3; stroke-dasharray: 1 10; stroke-linecap: round; }
.leash__paw{
  position:absolute; left:-6px; top: 120px; font-size: 1.3rem;
  transform: translateY(0);
  filter: drop-shadow(0 3px 4px rgba(43,35,24,.25));
  transition: top .05s linear;
}

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(248,241,225,.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap: 20px; padding: 14px 24px; }
.logo{ display:flex; align-items:center; gap:.5em; }
.logo__mark{ font-size:1.6rem; }
.logo__word{ font-family: var(--font-display); font-weight:600; font-size:1.15rem; color: var(--pine-dark); line-height:1.1; display:flex; flex-direction:column; }
.logo__word em{ font-style:normal; font-family: var(--font-utility); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color: var(--brick); font-weight:600; }

.nav{ display:flex; gap: 28px; }
.nav a{ font-family: var(--font-utility); font-size:.92rem; font-weight:500; color: var(--ink); position:relative; padding: 4px 0; }
.nav a:hover{ color: var(--brick); }

.header__actions{ display:flex; align-items:center; gap: 14px; }
.header__phone{ font-family: var(--font-utility); font-weight:600; font-size:.92rem; display:none; }
@media(min-width:640px){ .header__phone{ display:inline-flex; } }

.nav-toggle{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; border-radius:8px; border:1px solid var(--line);
  background: var(--paper); cursor:pointer; padding:0; margin:0;
}
.nav-toggle span{ height:2px; width:18px; background: var(--pine-dark); margin:0 auto; transition: transform .2s ease, opacity .2s ease; }
@media(min-width: 900px){ .nav-toggle{ display:none; } }
@media(max-width: 899px){
  .nav{
    position:absolute; top:100%; left:0; right:0; background: var(--paper);
    flex-direction:column; gap:0; padding: 8px 24px 18px; border-bottom:1px solid var(--line);
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding: 12px 0; border-bottom:1px solid var(--line); }
}
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; padding: 84px 0 60px; overflow:hidden; text-align:center; }
.hero__paws{ position:absolute; top: 22px; left:0; right:0; text-align:center; font-size:1.1rem; opacity:.5; letter-spacing:.4em; }
.hero__inner{ position:relative; max-width: 780px; }
.hero__title{ font-size: clamp(2.4rem, 5.4vw, 4rem); margin-bottom:.4em; }
.hero__title em{ color: var(--brick); font-style: italic; }
.hero__lede{ font-size: 1.15rem; color: var(--ink-soft); max-width: 560px; margin-left:auto; margin-right:auto; }
.hero__cta{ display:flex; gap: 14px; justify-content:center; flex-wrap:wrap; margin: 28px 0 44px; }
.hero__cta.center{ justify-content:center; }

.stat-bar{ display:flex; justify-content:center; gap: 46px; flex-wrap:wrap; margin:0; padding-top: 30px; border-top:1px solid var(--line); }
.stat-bar__item{ text-align:center; }
.stat-bar dt{ font-family: var(--font-display); font-size:1.8rem; font-weight:700; color: var(--pine); }
.stat-bar dd{ margin:0; font-family: var(--font-utility); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-soft); }

.scroll-cue{ display:inline-flex; flex-direction:column; align-items:center; gap:4px; margin-top: 20px; font-family: var(--font-utility); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); }
.scroll-cue span{ animation: bob 1.6s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(5px);} }

/* ---------- Sections ---------- */
.section{ padding: 88px 0; }
.section--sand{ background: var(--sand); }
.section--pine{ background: var(--pine); }
.section__title{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); max-width: 720px; }
.section__title.center{ margin-left:auto; margin-right:auto; }
.section__lede{ color: var(--ink-soft); max-width: 620px; margin: 0 auto 3em; font-size:1.05rem; }
.section__lede.light{ color: rgba(255,255,255,.78); }

/* ---------- Services ---------- */
.service-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 28px; margin-top: 20px; }
.service-card{
  background: var(--paper); border-radius: var(--radius); padding: 34px 32px;
  box-shadow: var(--shadow-soft); border: 1px solid var(--line);
  display:flex; flex-direction:column;
}
.service-card__kicker{ font-family: var(--font-utility); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color: var(--brick); margin-bottom:.6em; }
.service-card h3{ font-size:1.5rem; }
.check-list{ margin: 1.2em 0; display:grid; gap:.55em; }
.check-list li{ position:relative; padding-left: 1.6em; color: var(--ink-soft); font-size:.96rem; }
.check-list li::before{ content:"🦴"; position:absolute; left:0; top:0; font-size:.85em; }
.service-card__price{ font-family: var(--font-utility); font-size:1.05rem; margin-bottom:1em; }
.service-card__price strong{ font-size:1.3rem; color: var(--pine); }
.services-note{ text-align:center; margin-top: 34px; color: var(--ink-soft); }
.services-note a{ color: var(--brick); font-weight:600; }

/* ---------- Feature grid ---------- */
.feature-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 26px; margin-top: 20px; }
.feature-card{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 30px; color: var(--paper); }
.feature-card__icon{ font-size:1.8rem; display:block; margin-bottom:.5em; }
.feature-card h3{ color: var(--paper); font-size:1.15rem; }
.feature-card p{ color: rgba(255,255,255,.78); margin:0; font-size:.96rem; }

/* ---------- About ---------- */
.about__grid{ display:grid; grid-template-columns: 1.5fr 1fr; gap: 50px; align-items:start; }
@media(max-width: 860px){ .about__grid{ grid-template-columns: 1fr; } }
.about__card p{ color: var(--ink-soft); }
.about__panel{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-soft); }
.hours-list{ margin: 0 0 1em; display:grid; gap:.7em; }
.hours-list div{ display:flex; justify-content:space-between; gap: 12px; border-bottom:1px dashed var(--line); padding-bottom:.5em; font-size:.95rem; }
.hours-list dt{ color: var(--ink-soft); }
.hours-list dd{ margin:0; font-weight:600; }
.about__panel-note{ color: var(--ink-soft); font-size:.92rem; margin:0; }
.about__panel hr{ border:none; border-top:1px solid var(--line); margin: 22px 0; }

/* ---------- Steps ---------- */
.steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 30px 0 44px; counter-reset: none; }
@media(max-width: 860px){ .steps{ grid-template-columns: 1fr; } }
.steps__item{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: 34px 28px; position:relative; }
.steps__num{ font-family: var(--font-display); font-weight:700; font-size:1.1rem; width: 40px; height:40px; border-radius:50%; background: var(--pine); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom: 18px; }
.steps__item h3{ font-size:1.15rem; }
.steps__item p{ color: var(--ink-soft); font-size:.95rem; margin:0; }

/* ---------- Testimonials ---------- */
.testimonial-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 26px; margin-top: 20px; }
.testimonial-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-soft); margin:0; }
.stars{ color: var(--gold-dark); letter-spacing:.15em; margin-bottom:.6em; }
.testimonial-card blockquote{ margin:0 0 1.2em; color: var(--ink-soft); font-size:.98rem; }
.testimonial-card figcaption{ font-weight:600; font-size:.92rem; }
.testimonial-card figcaption span{ display:block; font-weight:400; color: var(--ink-soft); font-size:.85rem; }
.testimonial-footer{ margin-top: 40px; }
.testimonial-footer > p{ font-family: var(--font-utility); color: var(--brick); font-weight:600; margin-bottom: 18px; }

/* ---------- FAQ / Accordion ---------- */
.accordion{ display:grid; gap: 12px; margin-top: 30px; }
.accordion__item{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-sm); overflow:hidden; }
.accordion__trigger{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family: var(--font-body); font-weight:600; font-size:1rem; color: var(--pine-dark);
  padding: 18px 22px; display:flex; align-items:center; justify-content:space-between; gap: 14px;
}
.accordion__icon{ font-family: var(--font-utility); color: var(--brick); font-size:1.3rem; transition: transform .2s ease; flex-shrink:0; }
.accordion__trigger[aria-expanded="true"] .accordion__icon{ transform: rotate(45deg); }
.accordion__panel{ max-height:0; overflow:hidden; transition: max-height .28s ease; }
.accordion__panel p{ padding: 0 22px 20px; color: var(--ink-soft); margin:0; }

/* ---------- CTA banner ---------- */
.cta-banner{ background: var(--pine-dark); color:#fff; padding: 76px 0; text-align:center; }
.cta-banner h2{ color:#fff; font-size: clamp(1.8rem,3.2vw,2.4rem); }
.cta-banner p{ color: rgba(255,255,255,.78); max-width: 560px; margin: 0 auto 1.6em; }

/* ---------- Contact ---------- */
.contact__grid{ display:grid; grid-template-columns: 1fr 1.3fr; gap: 54px; }
@media(max-width: 900px){ .contact__grid{ grid-template-columns: 1fr; } }
.contact__info p{ color: var(--ink-soft); }
.info-list{ display:grid; gap: 22px; margin-top: 28px; }
.info-list li{ display:flex; gap: 14px; align-items:flex-start; }
.info-list li span{ font-size:1.3rem; }
.info-list a{ color: var(--brick); font-weight:600; }

.contact__form-wrap{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow-lift); }
.contact__form-note{ color: var(--ink-soft); font-size:.95rem; }
.hp-field{ position:absolute; left:-9999px; }
.form__row{ margin-bottom: 18px; }
.form__row--split{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media(max-width:520px){ .form__row--split{ grid-template-columns: 1fr; } }
.form label{ display:block; font-family: var(--font-utility); font-size:.85rem; font-weight:600; margin-bottom: 6px; color: var(--ink); }
.form input, .form select, .form textarea{
  width:100%; padding: 12px 14px; border:1px solid var(--line); border-radius: 10px;
  font-family: var(--font-body); font-size:.98rem; background: #fff; color: var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus{ border-color: var(--pine); }
.form__success{ text-align:center; padding: 20px 0; }
.form__success-icon{ font-size:2.2rem; margin-bottom:.2em; }

/* ---------- Reveal animation ---------- */
.reveal{ opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible{ opacity:1; transform: none; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: rgba(255,255,255,.72); padding-top: 64px; }
.footer__grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 46px; }
@media(max-width: 900px){ .footer__grid{ grid-template-columns: 1fr 1fr; } }
@media(max-width: 560px){ .footer__grid{ grid-template-columns: 1fr; } }
.footer__brand p{ margin-top: 16px; font-size:.92rem; color: rgba(255,255,255,.6); }
.footer__social{ display:flex; gap: 12px; margin-top: 20px; }
.footer__social a{
  position:relative; display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:#fff; transition: background-color .18s ease, transform .18s ease, color .18s ease;
}
.footer__social a:hover{ background: var(--gold); color: var(--ink); transform: translateY(-2px); }
.footer__social a span{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.logo--footer .logo__word{ color:#fff; }
.footer__col h4{ color:#fff; font-family: var(--font-utility); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom: 1em; }
.footer__col li{ margin-bottom: .7em; font-size:.92rem; }
.footer__col a:hover{ color: var(--gold); }
.footer__contact li{ color: rgba(255,255,255,.6); }
.footer__contact a{ color: rgba(255,255,255,.85); }

.footer__bottom{ border-top:1px solid rgba(255,255,255,.12); padding: 22px 24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap: 10px; font-size:.85rem; }
.footer__legal{ display:flex; gap: 18px; }
.footer__legal a:hover{ color: var(--gold); }

.back-to-top{
  position: fixed; right: 22px; bottom: 22px; width: 46px; height:46px; border-radius:50%;
  background: var(--brick); color:#fff; border:none; font-size:1.2rem; cursor:pointer;
  box-shadow: var(--shadow-lift); opacity:0; pointer-events:none; transition: opacity .25s ease, transform .18s ease;
  z-index: 90;
}
.back-to-top.is-visible{ opacity:1; pointer-events:auto; }
.back-to-top:hover{ transform: translateY(-3px); }