/* Services-specific layout, after the shared brand theme. */
#main .services-hero { display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; padding:4rem max(5%,calc((100% - 1200px)/2)); background:var(--cream); color:var(--primary); text-align:left; }
.services-eyebrow,.services-location { display:block; font:500 .68rem/1.7 var(--font-sans); letter-spacing:1.6px; }
.services-eyebrow { color:var(--link); text-transform:uppercase; margin-bottom:1.8rem; }
#main .services-hero h1 { font:500 clamp(2.6rem,4.8vw,4.8rem)/1.06 var(--font-serif); text-transform:none; letter-spacing:-1px; color:var(--primary); margin-bottom:1.7rem; }
#main .services-hero h1 em { color:var(--link); font-weight:400; }
#main .services-hero p { margin:0 0 2rem; max-width:32rem; font-size:1.3rem; line-height:1.55; color:var(--secondary); font-style:normal; }
/* Buttons wear the brand greens rather than near-black: solid sage with ink
   text for the primary action, deep-sage outlines for the card actions. */
.services-primary { display:inline-flex; align-items:center; gap:2rem; padding:1rem 1.4rem; background:var(--sage); color:var(--primary); text-decoration:none; font:500 .75rem/1.5 var(--font-sans); }
.services-primary:hover { background:var(--dark-sage); color:white; }
.services-location { margin-top:1.5rem; letter-spacing:.3px; color:var(--secondary); }
.services-portrait { margin:0; }
.services-portrait img { display:block; width:100%; height:clamp(390px,43vw,580px); object-fit:cover; object-position:center 66%; }
.services-portrait figcaption { padding-top:.6rem; color:var(--secondary); font-style:italic; }
#main .service-nav { justify-content:flex-start; align-items:center; gap:.5rem 1.8rem; padding:1.4rem max(5%,calc((100% - 1200px)/2)); border-block:1px solid var(--border); background:white; }
#main .service-nav span { font-style:italic; color:var(--secondary); margin-right:auto; }
#main .service-nav a { display:inline-flex; align-items:center; min-height:44px; padding:.4rem 0; font-size:.68rem; letter-spacing:.5px; color:var(--primary); border:0; background:none; backdrop-filter:none; text-transform:none; text-decoration:underline; text-underline-offset:5px; }
#main .service-nav a:hover { color:var(--link); }
#main .service-section { padding:4.5rem max(5%,calc((100% - 1200px)/2)); scroll-margin-top:100px; }
#main .section-header { text-align:left; margin:0 0 2rem; }
#main .section-header h2 { font:500 clamp(2.1rem,3.5vw,3.2rem)/1.15 var(--font-serif); letter-spacing:0; text-transform:none; margin-bottom:1rem; }
#main .section-header .subtitle { max-width:45rem; margin:0; font-size:1.2rem; font-style:normal; }
#main .pill-badge { border:0; padding:0; margin-bottom:1rem; font-size:.68rem; color:var(--link); }
.care-comparison-note { max-width:52rem; margin-bottom:1.8rem; padding-left:1rem; border-left:2px solid var(--sage); line-height:1.6; }
.care-comparison-note a { color:var(--link); text-underline-offset:3px; }
#main .cards-grid { max-width:none; gap:0; grid-template-columns:1fr; border-top:1px solid var(--border); }
#main .service-card { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto; gap:1.25rem 2.5rem; align-items:start; padding:2rem 0; background:transparent; border:0; border-bottom:1px solid var(--border); box-shadow:none; height:auto; }
#main .service-card:hover { transform:none; box-shadow:none; }
#main .card-label { font:500 .65rem/1.6 var(--font-sans); color:var(--link); letter-spacing:1px; margin-bottom:.5rem; }
#main .card-title { font:500 1.6rem/1.2 var(--font-serif); text-transform:none; letter-spacing:0; margin-bottom:.7rem; }
#main .card-desc { font-size:1.1rem; line-height:1.5; margin-bottom:.6rem; }
#main .best-for { font-size:1rem; line-height:1.5; margin:0; }
#main .card-features { margin:0; padding:0; border:0; }
#main .feature { font-size:1rem; line-height:1.5; margin-bottom:.5rem; }
#main .card-features .feature:first-child { color:var(--primary); font-weight:600; }
#main .card-btn { margin:0; min-width:108px; padding:.8rem 1.2rem; background:transparent; color:var(--deep-sage); border:1px solid var(--dark-sage); font-size:.68rem; align-self:start; }
#main .card-btn:hover,#main .card-btn:focus-visible { background:var(--dark-sage); border-color:var(--dark-sage); color:white; }
#main .card-btn.featured { background:var(--sage); border-color:var(--sage); color:var(--primary); }
#main .card-btn.featured:hover,#main .card-btn.featured:focus-visible { background:var(--dark-sage); border-color:var(--dark-sage); color:white; }
#main .card-note { grid-column:1/3; margin:0; }
#main .card-note + .card-btn { grid-column:3; grid-row:1; }
#main .includes-strip { max-width:none; justify-content:flex-start; padding:1.5rem 0 0; border:0; background:none; gap:.5rem 1.5rem; }
#main .includes-strip-title { color:var(--link); }
#main .bridge-note { text-align:left; max-width:none; margin-top:1.5rem; }
#main #social-boarding .section-header,#main #private-boarding .section-header,#main #in-home-sitting .section-header,#main #pop-in-play .section-header,#main #dog-walking .section-header { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:3rem; align-content:center; }
#main .boarding-photo { grid-column:2; grid-row:1/4; width:100%; height:300px; object-fit:cover; object-position:center 57%; }
#main #private-boarding .boarding-photo { object-position:25% center; }
#main #social-boarding .section-header > :not(img),#main #private-boarding .section-header > :not(img),#main #in-home-sitting .section-header > :not(img),#main #pop-in-play .section-header > :not(img),#main #dog-walking .section-header > :not(img) { grid-column:1; }
/* Paragraph links pick up the brand link green instead of browser blue */
#main p a { color:var(--link); text-underline-offset:3px; }
#main p a:hover { color:var(--deep-sage); }
#main #private-boarding { background:white; }
#main #pop-in-play .cards-grid,#main #dog-walking .cards-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; }
#main #dog-walking .cards-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
#main #pop-in-play .service-card,#main #dog-walking .service-card { display:flex; gap:1rem; }
#main #pop-in-play .card-btn,#main #dog-walking .card-btn { margin-top:auto; }
@media (max-width:800px) {
 #main .services-hero { gap:2rem; padding-block:3rem; }
 #main .services-hero h1 { font-size:2.8rem; }
 #main .service-card { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.2rem; }
 #main .card-btn { grid-column:1/-1; justify-self:start; }
 #main .card-note + .card-btn { grid-column:1/-1; grid-row:auto; }
 #main #pop-in-play .cards-grid { gap:1rem; }
}
@media (max-width:600px) {
 #main .services-hero { grid-template-columns:1fr; padding-block:2.5rem; }
 #main .services-hero h1 { font-size:3rem; }
 .services-portrait img { height:350px; object-position:center 65%; }
 #main .service-nav { gap:.2rem 1.3rem; padding-block:1rem; }
 #main .service-nav span { flex-basis:100%; }
 #main .service-section { padding-block:3rem; }
 #main .service-card { grid-template-columns:1fr; gap:1rem; padding:1.6rem 0; }
 #main .card-note { grid-column:auto; }
 #main .card-btn { width:100%; text-align:center; }
 #main #social-boarding .section-header,#main #private-boarding .section-header,#main #in-home-sitting .section-header,#main #pop-in-play .section-header,#main #dog-walking .section-header { display:flex; flex-direction:column; }
 #main .boarding-photo { order:4; height:260px; margin-top:1.5rem; }
 #main #pop-in-play .cards-grid,#main #dog-walking .cards-grid { grid-template-columns:1fr; gap:0; }
 #main .includes-strip { flex-direction:column; align-items:flex-start; }
}
