/* =====================================================================
   site.css: components for the inner pages (services, areas, about,
   reviews, FAQ, policies) + the mobile menu. Loaded after styles.css.
   Uses only the existing design tokens; styles.css is untouched.
   ===================================================================== */

/* ---------- Mobile / tablet menu (hamburger was static before) ---------- */
@media (max-width:980px) and (min-width:761px){
  .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:0;padding:0 8px;cursor:pointer}
  .menu-toggle span{display:block;height:1.5px;background:var(--ink);border-radius:2px}
}
.menu-toggle{cursor:pointer}
.menu-toggle span{transition:transform .25s,opacity .2s}
@media (max-width:980px){
  body.nav-open .main-nav{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:#fff;padding:6px 22px 18px;border-bottom:1px solid rgba(213,153,134,.28);box-shadow:0 26px 40px -30px rgba(58,40,35,.35)}
  body.nav-open .main-nav a{padding:14px 0;font-size:16px;border-bottom:1px solid rgba(213,153,134,.18)}
  body.nav-open .main-nav a:last-child{border-bottom:0}
  body.nav-open .main-nav a.active::after,body.nav-open .main-nav a:hover::after{display:none}
  body.nav-open .main-nav a.active{color:var(--rose-deep)}
  body.nav-open .menu-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  body.nav-open .menu-toggle span:nth-child(2){opacity:0}
  body.nav-open .menu-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}

/* ---------- Inner hero (copy left, framed photo right) ---------- */
.inner-hero{padding:80px 0 104px}
.inner-hero .hero-grid{grid-template-columns:1.05fr 1fr;align-items:center}
.inner-hero h1{font-size:54px;line-height:1.08;margin-bottom:24px}
.inner-hero .lede{max-width:560px}
.inner-hero .cta-row{margin-top:36px}
.breadcrumb.left{justify-content:flex-start}
.page-hero .cta-row{margin-top:34px}

/* Framed photo shown whole (never cropped) */
.photo-natural{text-align:center}
.photo-natural .frame{display:inline-block;max-width:100%;vertical-align:top}
.photo-natural .frame img{width:auto;max-width:100%;max-height:600px;aspect-ratio:auto;object-fit:contain;margin:0 auto}
.hero-photo.photo-natural .frame::before{inset:22px -22px -22px 22px}
.photo-natural.sm .frame img{max-height:480px}
.photo-natural .frame.frame-left::before{inset:-18px 18px 18px -18px}
.frame video{position:relative;z-index:1;display:block;height:auto;border-radius:4px;box-shadow:0 30px 60px -30px rgba(58,40,35,.35);background:#f4ece4}
.photo-natural .frame video{width:auto;max-width:100%;max-height:600px;margin:0 auto}
.photo-natural.sm .frame video{max-height:480px}

/* ---------- Two-column body: prose + sticky aside ---------- */
.svc-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:80px;align-items:start}
.svc-aside{position:sticky;top:124px;display:flex;flex-direction:column;gap:22px}
.prose > *:first-child{margin-top:0!important;padding-top:0!important}
.prose > h2:first-child::before{display:none}
.prose h2{font-size:40px;margin:64px 0 18px;position:relative;padding-top:30px}
.prose h2::before{content:"";position:absolute;top:0;left:0;width:48px;height:1px;background:var(--rose)}
.prose h3{font-size:27px;margin:34px 0 10px}
.prose p{font-size:17.5px;line-height:1.85}
.prose p + p{margin-top:18px}
.prose a:not(.btn),.faq-a a,.policy-body a,.note-card a{color:var(--rose-deep);border-bottom:1px solid rgba(185,122,104,.35)}
.prose a:not(.btn):hover,.faq-a a:hover{border-color:var(--rose-deep)}
.prose strong{color:var(--ink);font-weight:600}

/* Lists */
.check-list{display:flex;flex-direction:column;gap:12px}
.check-list li{position:relative;padding-left:30px;font-size:16px;line-height:1.6;color:var(--ink)}
.check-list li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;background:var(--rose);transform:rotate(45deg)}
.check-list li strong{font-weight:600}
.prose .check-list{margin:22px 0 6px}
.prose .check-list li{font-size:17px;color:#55504D}
.prose .check-list li strong{color:var(--ink)}
.feature-list{display:flex;flex-direction:column;margin:26px 0 8px}
.feature-list li{display:grid;grid-template-columns:48px 1fr;gap:10px;padding:22px 0;border-top:1px solid var(--line)}
.feature-list li:last-child{border-bottom:1px solid var(--line)}
.feature-list .why-num{font-size:24px}
.feature-list h3{font-size:24px;margin:0 0 4px}
.feature-list p{font-size:16.5px!important;line-height:1.75!important}

/* Aside cards */
.side-card{background:var(--cream);border-radius:6px;padding:34px 32px 32px;position:relative;border:1px solid rgba(213,153,134,.3)}
.side-card::before{content:"";position:absolute;top:-1px;left:32px;width:48px;height:2px;background:var(--rose)}
.side-card h3{font-size:27px;margin-bottom:16px}
.side-card p{font-size:15.5px;line-height:1.7}
.side-card .btn{width:100%;margin-top:24px}
.side-card.rose{background:var(--rose);border-color:var(--rose)}
.side-card.rose::before{background:var(--ink)}
.side-card.rose h3,.side-card.rose p{color:var(--ink)}
.side-card.rose a:not(.btn){color:var(--ink);border-bottom:1px solid rgba(58,58,58,.4)}
.side-photo{margin-top:8px}

/* ---------- Link cards (related services / areas) ---------- */
.link-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.link-cards.two{grid-template-columns:1fr 1fr;max-width:900px;margin:0 auto}
.link-cards.four{grid-template-columns:repeat(4,1fr)}
.link-cards .area-card{background:#fff;height:100%}
.bg-white .link-cards .area-card{background:var(--cream)}
.bg-white .link-cards .area-card:hover{background:#fff}
.link-cards .area-label{font-size:24px;line-height:1.2}

/* ---------- Services overview ---------- */
.great-for{font-size:15px!important;color:var(--ink)!important;margin-top:14px!important}
.great-for strong{font-weight:600;color:var(--rose-deep)}
.pick-list{max-width:860px;margin:0 auto;display:flex;flex-direction:column}
.pick-list li{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:22px 4px;border-top:1px solid var(--line);font-size:17px;color:var(--ink-2)}
.pick-list li:last-child{border-bottom:1px solid var(--line)}
.pick-list a{font-family:var(--serif);font-size:25px;font-weight:500;color:var(--ink);white-space:nowrap}
.pick-list a span{color:var(--rose-deep);margin-left:8px;font-size:20px}
.pick-list a:hover{color:var(--rose-deep)}
.center-note{text-align:center;max-width:700px;margin:40px auto 0;font-size:17px}
.center-note a{color:var(--rose-deep);border-bottom:1px solid var(--line)}
.price-note{max-width:760px;margin:0 auto;text-align:center}
.price-note p{font-size:18px}

/* ---------- Reviews ---------- */
.review-wall{column-count:3;column-gap:28px}
.review-wall .review{break-inside:avoid;margin:0 0 28px;background:#fff;box-shadow:0 20px 50px -38px rgba(58,40,35,.4)}
.review-wall .review blockquote{font-size:21px;line-height:1.5}
.bg-white .review-wall .review,.bg-white .review.single{background:var(--cream);box-shadow:none}
.review.single{max-width:820px;margin:0 auto}
.review.single blockquote{font-size:26px}
.reviews-cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:40px;text-align:center}
.reviews-cta p{font-size:15px}

/* ---------- FAQ accordion ---------- */
.faq-list{max-width:900px;margin:0 auto}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 34px;gap:24px;align-items:center;padding:26px 4px;font-family:var(--serif);font-size:26px;font-weight:500;color:var(--ink);line-height:1.25}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--rose);border-radius:50%;font-family:var(--sans);font-size:20px;font-weight:300;color:var(--rose-deep);transition:.2s}
.faq-list details[open] summary::after{content:"\2013"}
.faq-list summary:hover{color:var(--rose-deep)}
.faq-a{padding:0 60px 28px 4px}
.faq-a p{font-size:16.5px;line-height:1.8}
.faq-a p + p{margin-top:14px}
.faq-a .check-list{margin:14px 0}
.faq-a .check-list li{font-size:16px;color:var(--ink-2)}
.faq-a .check-list li strong{color:var(--ink)}

/* ---------- About ---------- */
.signoff{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--ink);text-align:center;line-height:1.4}
.signoff span{display:block;font-size:22px;color:var(--rose-deep);margin-top:6px}
.value-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1040px;margin:0 auto}
.value-grid .addon{padding:40px 40px 36px}
.value-grid .addon h3{font-size:27px}

/* ---------- Simple centered pages (thank you, 404) ---------- */
.simple-page{padding:120px 0 130px;text-align:center}
.simple-page .cta-mark{width:96px;height:96px;margin:0 auto 26px}
.simple-page h1{font-size:60px;margin-bottom:22px}
.simple-page p{max-width:640px;margin:0 auto;font-size:18px}
.simple-page p + p{margin-top:16px}
.simple-page p a{color:var(--rose-deep);border-bottom:1px solid var(--line)}
.text-links{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 28px;margin-top:34px}
.text-links a{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-deep)}

/* ---------- Policy text ---------- */
.policy-body{max-width:780px;margin:0 auto}
.policy-body h2{font-size:34px;margin:52px 0 14px}
.policy-body h2:first-child{margin-top:0}
.policy-body p,.policy-body li{font-size:16.5px;line-height:1.8}
.policy-body p + p{margin-top:14px}
.policy-body .check-list{margin:14px 0}
.policy-body .check-list li{color:var(--ink-2)}
.updated{font-size:13px!important;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--rose-deep)!important;margin-top:18px!important}

/* ---------- Blog article extras (posts 02-05 use lists/h3) ---------- */
.article-col h3{font-size:28px;margin:40px 0 12px}
.article-col ul{margin:22px 0 6px;display:flex;flex-direction:column;gap:12px}
.article-col ul li{position:relative;padding-left:28px;font-size:18px;line-height:1.75;color:#55504D}
.article-col ul li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;background:var(--rose);transform:rotate(45deg)}
.article-col strong{color:var(--ink);font-weight:600}
.article-figure.mat-figure .fig-mat{background:#F6E9DF;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;padding:26px;border-radius:4px;position:relative;z-index:1;box-shadow:0 30px 60px -30px rgba(58,40,35,.35)}
.article-figure.mat-figure .fig-mat img{width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:auto;object-fit:contain;box-shadow:0 12px 26px -14px rgba(58,40,35,.5);border-radius:3px}
.cat-empty{text-align:center;padding:20px 0 0;font-style:italic}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .svc-layout{grid-template-columns:minmax(0,1fr) 330px;gap:52px}
  .link-cards,.link-cards.four{grid-template-columns:1fr 1fr}
  .review-wall{column-count:2}
}
@media (max-width:980px){
  .inner-hero .hero-grid{grid-template-columns:1fr}
  .svc-layout{grid-template-columns:minmax(0,1fr)}
  .svc-aside{position:static}
}
@media (max-width:760px){
  .inner-hero{padding:44px 0 72px}
  .inner-hero h1{font-size:38px}
  .photo-natural .frame img{max-height:520px}
  .photo-natural .frame video{max-height:520px}
  .hero-photo.photo-natural .frame::before{inset:14px -12px -14px 12px}
  .photo-natural .frame.frame-left::before{inset:-12px 12px 12px -12px}
  .prose h2{font-size:31px;margin-top:48px}
  .prose p{font-size:16.5px}
  .side-card{padding:30px 24px 26px}
  .link-cards,.link-cards.two,.link-cards.four{grid-template-columns:1fr}
  .pick-list li{grid-template-columns:1fr;gap:6px}
  .review-wall{column-count:1}
  .review.single blockquote{font-size:22px}
  .faq-list summary{font-size:22px;gap:14px;padding:22px 0}
  .faq-a{padding:0 0 24px}
  .value-grid{grid-template-columns:1fr;gap:20px}
  .value-grid .addon{padding:32px 26px 28px}
  .simple-page{padding:72px 0 88px}
  .simple-page h1{font-size:40px}
  .policy-body h2{font-size:28px}
  .article-figure.mat-figure .fig-mat{padding:14px}
}
.page-lede + .page-lede{margin-top:14px}
.inner-hero .lede + .lede{margin-top:14px}
.prose .check-list + p,.prose ul + p{margin-top:16px}
.side-card.rose .check-list li::before{background:var(--cream)}
.svc-layout > *{min-width:0}
.prose{overflow-wrap:break-word}

/* ---------- Compact "Request" pill in the header (mobile + tablet) ---------- */
.hdr-pill{display:none}
@media (max-width:980px){
  .header-actions .btn{display:none}
  .hdr-pill{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border-radius:999px;background:var(--rose);color:#fff;
    font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;line-height:1;transition:background .2s}
  .hdr-pill:hover,.hdr-pill:focus-visible{background:var(--rose-hover)}
}
@media (max-width:430px){
  .brand{gap:8px;min-width:0}
  .brand img{width:40px;height:40px}
  .brand-name{font-size:17px;white-space:nowrap}
  .brand-sub{font-size:7.5px;letter-spacing:.22em;margin-top:4px;white-space:nowrap}
  .header-actions{gap:8px;flex-shrink:0}
  .phone-link{width:36px;height:36px}
  .phone-link svg{width:15px;height:15px}
  .menu-toggle{width:34px;height:36px;padding:0 6px}
  .hdr-pill{height:32px;padding:0 13px;font-size:11px;letter-spacing:.12em}
}
@media (max-width:380px){
  .brand{gap:7px}
  .brand img{width:34px;height:34px}
  .brand-name{font-size:15.5px}
  .brand-sub{font-size:7px;letter-spacing:.17em}
  .hdr-pill{padding:0 11px;letter-spacing:.1em}
  .header-actions{gap:6px}
}
@media (max-width:340px){
  .brand img{width:30px;height:30px}
  .brand-name{font-size:14px}
  .brand-sub{font-size:6.5px;letter-spacing:.12em}
  .hdr-pill{padding:0 10px;font-size:10.5px}
  .phone-link{width:34px;height:34px}
  .menu-toggle{width:32px}
}

/* ---------- iPhone safe areas (viewport-fit=cover) ---------- */
.wrap{padding-left:max(40px, env(safe-area-inset-left, 0px));padding-right:max(40px, env(safe-area-inset-right, 0px))}
@media (max-width:760px){
  .wrap{padding-left:max(22px, env(safe-area-inset-left, 0px));padding-right:max(22px, env(safe-area-inset-right, 0px))}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px))}
  .mobile-bar{height:calc(64px + env(safe-area-inset-bottom, 0px));padding-bottom:env(safe-area-inset-bottom, 0px);
    padding-left:env(safe-area-inset-left, 0px);grid-template-columns:1fr 1fr 1.5fr}
  /* keep "Request" clear of anything floating in the bottom-right corner (badges, the home indicator) */
  .mobile-bar a.primary{padding-right:max(40px, calc(env(safe-area-inset-right, 0px) + 24px))}
}
@media (max-width:430px){
  .site-header .wrap{padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
}

/* ---------- Bigger header logo on phones/tablets (Oct 2026) ----------
   The logo PNGs have ~10% transparent padding around the ring, so small negative
   side margins let the ring sit at the normal edge/gap while the image is bigger. */
@media (max-width:760px){
  .brand img{width:72px;height:72px;margin:0 -6px 0 -7px}
}
@media (max-width:430px){
  .brand img{width:66px;height:66px;margin:0 -5px 0 -6px}
  .brand-name{font-size:16px}
  .brand-sub{font-size:7.2px;letter-spacing:.2em}
  .hdr-pill{padding:0 11px}
}
@media (max-width:380px){
  .brand img{width:64px;height:64px}
  .brand-name{font-size:14.5px}
  .brand-sub{font-size:6.6px;letter-spacing:.16em}
  .hdr-pill{padding:0 9px}
  .header-actions{gap:5px}
  .menu-toggle{width:32px}
}
@media (max-width:340px){
  .brand img{width:50px;height:50px;margin:0 -4px 0 -5px}
  .brand-name{font-size:13.5px}
  .brand-sub{font-size:6.2px;letter-spacing:.1em}
  .hdr-pill{padding:0 8px}
  .header-actions{gap:4px}
  .menu-toggle{width:30px}
}
/* 431-520px: the old header already wrapped "Pawsh Pup Parlor" onto two lines here
   (431-449px); use the compact phone header so the bigger logo still fits on one row. */
@media (min-width:431px) and (max-width:520px){
  .brand{gap:8px;min-width:0}
  .brand img{width:68px;height:68px;margin:0 -5px 0 -6px}
  .brand-name{font-size:17px;white-space:nowrap}
  .brand-sub{font-size:7.5px;letter-spacing:.22em;white-space:nowrap}
  .header-actions{gap:8px;flex-shrink:0}
  .phone-link{width:36px;height:36px}
  .phone-link svg{width:15px;height:15px}
  .menu-toggle{width:34px;height:36px;padding:0 6px}
  .hdr-pill{height:32px;padding:0 13px;font-size:11px;letter-spacing:.12em}
}

/* ---------- Bigger header logo on tablet/desktop (Oct 2026) ----------
   82px logo (was 64px); header row grows 92px -> 100px. Same transparent-padding trick as mobile. */
@media (min-width:761px){
  .header-inner{height:100px}
  .brand img{width:82px;height:82px;margin:0 -6px 0 -7px}
}
/* keep the bigger-logo header on one tidy row on narrower desktops (the old header already wrapped the brand name at 981-1099px) */
@media (min-width:981px) and (max-width:1280px){
  .brand-name,.brand-sub{white-space:nowrap}
  .header-actions{gap:18px}
}
@media (min-width:1181px) and (max-width:1280px){ .main-nav{gap:20px} }
@media (min-width:981px) and (max-width:1180px){
  .brand{gap:12px}
  .brand-name{font-size:22px}
  .brand-sub{font-size:9px;letter-spacing:.26em}
  .main-nav{gap:16px}
  .main-nav a{font-size:13.5px;letter-spacing:.02em}
}
@media (min-width:981px) and (max-width:1060px){
  .main-nav{gap:14px}
  .header-actions{gap:14px}
  .header-actions .btn-sm{padding:13px 16px;letter-spacing:.1em}
}
@media (min-width:1181px) and (max-width:1240px){ .main-nav{gap:16px} }