/* Family Pet Care: honey yellow on warm cream, with the logo's sage as the
   secondary. Chosen by the client 2026-08-20 from three options (navy, the
   original warm brown, and this). The yellow comes from the dog in her logo,
   taken sunny rather than tan so it does not read brown, which she disliked.

   Only the two token blocks below carry colour. Every component reads through
   --accent / --accent-deep / --accent-soft, so a future recolour is a swap of
   those blocks and nothing else. `palette-preview.py` builds alternatives.

   Two rules the tokens must keep: --accent-deep is used for TEXT on the ground,
   so it has to stay dark enough to read (raw yellow will not); --on-accent is
   text sitting on a filled --accent button. */
:root{
  --paper:#FFFBEA; --surface:#FFFFFF; --surface-2:#FCF6E2;
  --ink:#242018; --ink-2:#5F5A4B; --line:#EFE7D0;
  --brand:#F7B500; --brand-deep:#96690A; --brand-soft:#FEF0BE;
  --sage:#8FBDB7; --sage-soft:#DCEBE8;
  --star:#B67A00;
  --bg:var(--paper); --fg:var(--ink); --muted:var(--ink-2); --card:var(--surface);
  --band:var(--surface-2); --rule:var(--line);
  --accent:var(--brand); --accent-deep:var(--brand-deep); --accent-soft:var(--brand-soft);
  --on-accent:#2A2100;
  --shadow:0 1px 2px rgba(36,32,24,.05), 0 12px 32px -12px rgba(36,32,24,.20);
  --display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1140px; --narrow:760px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1A1813; --fg:#F0EBE0; --muted:#ADA593; --card:#232019;
    --band:#1F1C16; --rule:#38322A;
    --brand:#F7B500; --brand-deep:#FFC93A; --brand-soft:#3B2F12;
    --sage:#A9CFCA; --sage-soft:#22302E;
    --star:#E7B45C;
    --accent:var(--brand); --accent-deep:var(--brand-deep); --accent-soft:var(--brand-soft);
    --on-accent:#2A2100;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -14px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.narrow{max-width:var(--narrow)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;text-wrap:balance;
            letter-spacing:-.01em;margin:0}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem);line-height:1.05}
h2{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.14}
h3{font-size:1.3rem;line-height:1.28}
p{margin:0}
a{color:inherit}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--on-accent);
      padding:12px 18px;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.eyebrow{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
         color:var(--muted)}

/* ---------- header ---------- */
.utility{background:var(--fg);color:var(--bg);font-size:.82rem}
.utility .wrap{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;
               justify-content:space-between;padding-block:9px}
.utility a{text-decoration:none}
.utility a:hover{text-decoration:underline}
header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 90%,transparent);
       backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
header .wrap{display:flex;align-items:center;gap:24px;padding-block:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand img{width:46px;height:auto;display:block}
.brand b{font-family:var(--display);font-size:1.16rem;font-weight:600;letter-spacing:-.01em;
         line-height:1.05;display:block}
.brand>span>span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
header nav{display:flex;gap:22px;font-size:.92rem}
header nav a{text-decoration:none;color:var(--muted);padding-block:4px;
             border-bottom:2px solid transparent;white-space:nowrap}
header nav a:hover{color:var(--fg);border-color:var(--accent)}
header nav a.here{color:var(--fg);border-color:var(--accent)}
.navtoggle,.burger{display:none}

@media (max-width:1040px){
  header .wrap{flex-wrap:wrap}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
          padding:10px;cursor:pointer;border:1px solid var(--rule);border-radius:10px}
  .burger span{display:block;height:2px;background:var(--fg);border-radius:2px}
  header nav{display:none;width:100%;flex-direction:column;gap:0;padding-bottom:8px}
  .navtoggle:checked ~ nav{display:flex}
  header nav a{padding:12px 2px;border-bottom:1px solid var(--rule);border-left:2px solid transparent}
  header nav a.here{border-left-color:var(--accent);padding-left:10px}
  /* specificity beats .btn, which is declared later in this file */
  header .hide-sm{display:none}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.95rem;
     font-weight:600;text-decoration:none;padding:13px 24px;border-radius:999px;
     border:1.5px solid transparent;cursor:pointer;
     transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 8px 20px -10px var(--accent)}
.btn-ghost{border-color:var(--rule);color:var(--fg)}
.btn-ghost:hover{border-color:var(--accent)}
.btn:hover{transform:translateY(-2px)}
.btn-sm{padding:9px 18px;font-size:.88rem}
.more{font-size:.94rem;font-weight:600;text-decoration:none;border-bottom:2px solid var(--accent);
      padding-bottom:2px;align-self:flex-start;display:inline-block}
.more:hover{color:var(--accent-deep)}

/* ---------- sections ---------- */
section{padding-block:80px}
section.tight{padding-block:0 80px}
.sec-head{max-width:62ch;display:flex;flex-direction:column;gap:14px;margin-bottom:42px}
.sec-head p{color:var(--muted)}
.band{background:var(--band);border-block:1px solid var(--rule)}
.prose{display:flex;flex-direction:column;gap:18px}
.prose p,.prose li{color:var(--muted)}
.prose h2,.prose h3{margin-top:18px}
.prose ul,.prose ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.prose strong{color:var(--fg)}

/* ---------- page hero ---------- */
.phero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.phero::before{content:"";position:absolute;inset:-40% 50% 30% -20%;
  background:radial-gradient(closest-side,var(--accent-soft),transparent 70%);opacity:.7;
  pointer-events:none}
.phero .wrap{position:relative;padding-block:62px;display:flex;flex-direction:column;
             gap:16px;align-items:flex-start;max-width:min(var(--wrap),100%)}
.phero p.lede{font-size:1.12rem;color:var(--muted);max-width:60ch}

/* ---------- home hero ---------- */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% 55% 40% -20%;
  background:radial-gradient(closest-side,var(--accent-soft),transparent 70%);opacity:.75;
  pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;
            align-items:center;padding-block:72px 80px}
.hero h1 em{font-style:normal;color:var(--accent-deep)}
.hero p.lede{font-size:1.14rem;color:var(--muted);max-width:52ch;margin-top:20px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:32px;padding-top:22px;
           border-top:1px solid var(--rule);font-size:.9rem;color:var(--muted)}
.hero-meta b{color:var(--fg);font-family:var(--display);font-size:1.05rem}
.collage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.collage img{width:100%;height:100%;object-fit:cover;border-radius:14px;display:block;
             box-shadow:var(--shadow)}
.collage .tall{grid-row:span 2;aspect-ratio:3/4.4}
.collage .sq{aspect-ratio:1/1}
.collage figure{margin:0}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:40px;padding-block:44px 56px}}

/* ---------- credential strip ---------- */
.creds .wrap{display:flex;flex-wrap:wrap;gap:12px 36px;justify-content:space-between;
             align-items:center;padding-block:18px;font-size:.86rem;color:var(--muted)}
.creds .item{display:flex;align-items:center;gap:10px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.dot.sage{background:var(--sage)}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center}
.split.rev{grid-template-columns:1.05fr .95fr}
.split img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px;box-shadow:var(--shadow)}
.split .body{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.split .body p{color:var(--muted)}
@media (max-width:900px){.split,.split.rev{grid-template-columns:1fr;gap:30px}}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid var(--rule);border-radius:20px;overflow:hidden;
      display:flex;flex-direction:column;box-shadow:var(--shadow);
      transition:transform .2s ease}
.card:hover{transform:translateY(-4px)}
/* Client feedback 2026-08-20: 16:10 cropped the dogs through the head. 4:3 is
   closer to the source photos, and the crop is anchored high so faces survive. */
.card>img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 30%;
          display:block}
/* Standalone dog portraits (the About page pair) get a taller frame again. */
.card.portrait>img{aspect-ratio:4/5}
.card .pad{padding:26px 28px 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.card p{color:var(--muted)}
.card ul{margin:0;padding-left:20px;color:var(--muted);display:flex;flex-direction:column;gap:7px}
.price{margin-top:auto;padding-top:18px;border-top:1px solid var(--rule);display:flex;
       flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.price b{font-family:var(--display);font-size:1.7rem;font-weight:600}
.price span{font-size:.82rem;color:var(--muted)}
.price .alt{width:100%;font-size:.9rem;color:var(--muted)}
.price .alt b{font-size:1.05rem;color:var(--fg)}
@media (max-width:860px){.cards,.cards.three{grid-template-columns:1fr}}

/* ---------- pricing table ---------- */
.ptable{border:1px solid var(--rule);border-radius:18px;overflow:hidden;background:var(--card)}
.ptable .row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
             padding:15px 24px;border-top:1px solid var(--rule)}
.ptable .row:first-child{border-top:0}
.ptable .row span{color:var(--muted)}
.ptable .row b{font-family:var(--display);font-size:1.2rem;font-variant-numeric:tabular-nums;
               white-space:nowrap}
.ptable .row.total{background:var(--accent-soft);border-top:2px solid var(--accent)}
.ptable .row.total span,.ptable .row.total b{color:var(--fg)}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.member{display:flex;flex-direction:column;gap:14px}
.member img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;box-shadow:var(--shadow)}
.member p{color:var(--muted);font-size:.96rem}
@media (max-width:860px){.team{grid-template-columns:1fr}}

/* ---------- awards ---------- */
.awards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.award{border:1px solid var(--rule);border-radius:16px;padding:22px;background:var(--card);
       display:flex;flex-direction:column;gap:6px}
.award b{font-family:var(--display);font-size:1.1rem}
.award span{font-size:.85rem;color:var(--muted)}
@media (max-width:860px){.awards{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.awards{grid-template-columns:1fr}}

/* ---------- quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.quote{background:var(--card);border:1px solid var(--rule);border-radius:18px;padding:28px;
       display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.quote p.q{font-family:var(--display);font-size:1.12rem;line-height:1.45}
.quote footer{font-size:.84rem;color:var(--muted);margin-top:auto}
.stars{color:var(--star);letter-spacing:.15em;font-size:.9rem}
.quote.wide{grid-column:1/-1}
@media (max-width:860px){.quotes{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;gap:12px;max-width:var(--narrow)}
.faq details{border:1px solid var(--rule);border-radius:14px;background:var(--card);
             overflow:hidden}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:600;list-style:none;
             display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.4rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding:0 22px 20px;color:var(--muted);margin:0}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:26px;counter-reset:step}
.step{border:1px solid var(--rule);border-radius:18px;padding:28px;background:var(--card);
      display:flex;flex-direction:column;gap:12px;align-items:flex-start;counter-increment:step}
.step::before{content:counter(step);font-family:var(--display);font-size:1.1rem;width:38px;
  height:38px;border-radius:50%;background:var(--accent-soft);color:var(--accent-deep);
  display:grid;place-items:center;font-weight:600}
.step p{color:var(--muted)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.infobox{border:1px solid var(--rule);border-radius:18px;padding:28px;background:var(--card);
         display:flex;flex-direction:column;gap:16px}
.infobox h3{font-size:1.15rem}
.infobox address{font-style:normal;color:var(--muted);line-height:1.7}
.infobox a{color:var(--fg)}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;gap:30px}}

/* ---------- cta ---------- */
.cta{background:var(--fg);color:var(--bg);border-radius:24px;padding:60px 44px;text-align:center;
     display:flex;flex-direction:column;align-items:center;gap:16px}
.cta p{max-width:52ch;opacity:.8}
.cta .btn-ghost{border-color:color-mix(in srgb,var(--bg) 40%,transparent);color:var(--bg)}
.cta .eyebrow{color:inherit;opacity:.7}

/* ---------- blog ---------- */
.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.post-card{background:var(--card);border:1px solid var(--rule);border-radius:18px;padding:28px;
           display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.post-card h3 a{text-decoration:none}
.post-card h3 a:hover{color:var(--accent-deep)}
.post-date{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.post-excerpt{color:var(--muted);font-size:.96rem}
.post-card .more{margin-top:auto}
@media (max-width:860px){.posts{grid-template-columns:1fr}}
article.post{max-width:var(--narrow);margin-inline:auto}
article.post .body{display:flex;flex-direction:column;gap:18px;margin-top:28px}
article.post .body p,article.post .body li{color:var(--muted)}
article.post .body h2{font-size:1.7rem;margin-top:20px}
article.post .body h3{font-size:1.25rem;margin-top:14px}
article.post .body ul,article.post .body ol{margin:0;padding-left:22px;display:flex;
  flex-direction:column;gap:8px}
article.post .body strong{color:var(--fg)}
.post-foot{margin-top:44px;padding-top:24px;border-top:1px solid var(--rule);
           display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:space-between}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--rule);margin-top:80px;padding-block:52px 32px;
            background:var(--band)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.fgrid .brand{margin-bottom:16px}
.fgrid h4{font-family:var(--sans);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
          color:var(--muted);margin:0 0 14px;font-weight:600}
.fgrid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;
          font-size:.95rem}
.fgrid a{text-decoration:none;color:var(--muted)}
.fgrid a:hover{color:var(--fg)}
.fgrid address{font-style:normal;color:var(--muted);font-size:.95rem;line-height:1.7;
               margin-bottom:12px}
.legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--rule);font-size:.8rem;
       color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
@media (max-width:820px){.fgrid{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ---------- time-limited event (open day) ----------
   Added 2026-08-20 for the move to Summerhouse Farm. Both the strip and the
   section carry data-expires and are removed automatically. When the date has
   passed, build.py stops emitting this markup entirely and these rules become
   dead code, so delete them then. */
.eventbar{background:var(--accent);color:var(--on-accent)}
.eventbar .wrap{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;
                justify-content:center;text-align:center;padding-block:11px;font-size:.92rem}
.eventbar p{margin:0}
.eventbar a{color:inherit;font-weight:600;text-underline-offset:3px}
.eventbar a:hover{text-decoration-thickness:2px}

.event{padding-block:0;margin-block:56px;
       /* the header is sticky, so anchoring here must clear it */
       scroll-margin-top:104px}
.event-card{display:grid;grid-template-columns:1.55fr 1fr;gap:0;overflow:hidden;
            border:1px solid var(--rule);border-radius:22px;background:var(--card);
            box-shadow:var(--shadow)}
.event-main{padding:40px 42px;display:flex;flex-direction:column;gap:16px}
.event-main .lede{color:var(--muted);font-size:1.06rem;max-width:52ch}
.event-facts{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.event-facts li{display:flex;flex-wrap:wrap;gap:2px 16px;align-items:baseline;
                padding-top:12px;border-top:1px solid var(--rule)}
.event-facts li:first-child{padding-top:0;border-top:0}
.event-facts span{flex:0 0 92px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
                  color:var(--muted)}
.event-facts b{font-family:var(--display);font-size:1.22rem;font-weight:600}
.event-note{margin-top:4px;padding:14px 18px;border-radius:12px;background:var(--sage-soft);
            color:var(--fg);font-size:.93rem}
.event-side{padding:40px 34px;background:var(--accent-soft);display:flex;flex-direction:column;
            gap:14px;align-items:flex-start;justify-content:flex-start}
.event-chips{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.event-chips li{background:var(--card);border:1px solid var(--rule);border-radius:999px;
                padding:7px 15px;font-size:.9rem;font-weight:600}
.event-small{font-size:.85rem;color:var(--muted)}
@media (max-width:860px){
  .event-card{grid-template-columns:1fr}
  .event-main{padding:30px 24px}
  .event-side{padding:26px 24px}
  .event{margin-block:36px}
}