/* Grooming page: one customer visit, shown in chronological order. */
.salon-needs{padding:70px 0 74px;background:#f8fafd;border-top:1px solid #edf1f6}
.needs-grid{display:grid;grid-template-columns:.84fr 1.16fr;gap:88px;align-items:start}
.needs-intro h2,.journey-head h2,.stage-copy h2,.stage-top h2{letter-spacing:-.055em;line-height:1.08}
.needs-intro h2{max-width:450px;margin:18px 0;font-size:clamp(32px,3.8vw,48px)}
.needs-intro p{max-width:430px;color:var(--body);font-size:14px;line-height:1.7}
.needs-list{border-top:1px solid #d7e2ee}
.needs-list>div{display:grid;grid-template-columns:72px 1fr;gap:18px;padding:21px 0;border-bottom:1px solid #d7e2ee}
.needs-list>div>span{padding-top:2px;color:var(--rose-deep);font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.needs-list p{margin:0;color:var(--body);font-size:13px;line-height:1.65}
.needs-list strong{display:block;margin-bottom:5px;color:var(--ink);font-size:18px;line-height:1.35;letter-spacing:-.025em}
.grooming-journey{padding:76px 0 68px;background:#fff}
.journey-head{max-width:760px;margin-bottom:30px}
.journey-head h2{margin:16px 0 12px;font-size:clamp(34px,4.1vw,50px)}
.journey-head p{max-width:650px;margin:0;color:var(--body);font-size:14px;line-height:1.7}
.journey-track{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none}
.journey-track:before{position:absolute;top:19px;right:10%;left:10%;height:1px;background:#cbd9ea;content:''}
.journey-track li{position:relative;min-width:0}
.journey-track .journey-item{display:flex;align-items:center;flex-direction:column;min-height:112px;padding:0 12px;text-align:center}
.journey-track .journey-index{z-index:1;display:grid;place-items:center;width:40px;height:40px;border:1px solid #b8cce5;border-radius:50%;background:#fff;color:var(--blue);font-size:11px;font-weight:850;letter-spacing:.04em}
.journey-track small{display:block;margin:19px 0 5px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.journey-track strong{color:var(--ink);font-size:18px;line-height:1.3;letter-spacing:-.025em}
.salon-stage{padding:96px 0;scroll-margin-top:28px}
.salon-stage:nth-of-type(odd){background:#f8fafd}
.stage-layout{display:grid;grid-template-columns:.79fr 1.21fr;align-items:center;gap:68px}
.stage-copy{max-width:465px}
.stage-number{display:block;margin-bottom:24px;color:#9aabc0;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.stage-copy h2,.stage-top h2{margin:15px 0 17px;font-size:clamp(36px,4.1vw,51px)}
.stage-copy>p,.stage-top>p{color:var(--body);font-size:14px;line-height:1.75}
.stage-copy .text-link{margin-top:24px}
.stage-detail{margin-top:28px;padding:18px 0;border-top:1px solid #d7e2ee;border-bottom:1px solid #d7e2ee}
.stage-detail strong{display:block;margin-bottom:7px;color:var(--ink);font-size:12px}
.stage-detail span{display:block;color:var(--body);font-size:12px;line-height:1.6}
.stage-small{margin-top:20px;color:var(--muted)!important;font-size:11px!important}
.stage-media{min-width:0;padding:18px;border:1px solid #e0e8f2;border-radius:18px;background:#eaf2fc}
.mockup-label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 4px 16px;color:var(--blue);font-size:11px;font-weight:750}
.mockup-label span:last-child{color:#718198;font-size:10px;font-weight:600}
.setup-window,.booking-site-preview,.team-window,.report-window{overflow:hidden;border:1px solid #dce6f1;border-radius:12px;background:#fff;box-shadow:0 12px 26px rgba(23,38,61,.045)}
.setup-window{display:grid;grid-template-columns:38% 62%;min-height:405px}
.setup-image{background:#e4edf5 url('../../../assets/pet-grooming-salon/generic-service-schnauzer.jpg') center/cover}
.setup-form{padding:33px 27px}
.setup-form>small,.site-preview-summary>small,.team-heading small,.team-columns small,.report-header small,.report-message small,.phone-body>small{color:var(--blue);font-size:10px;font-weight:850;letter-spacing:.07em}
.setup-form h3,.site-preview-summary h3,.team-heading h3,.report-header h3{margin:8px 0 5px;font-size:24px;letter-spacing:-.04em}
.setup-form p,.site-preview-summary p{color:var(--body);font-size:11px;line-height:1.55}
.setup-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0 12px}
.setup-metrics div{padding:13px;border:1px solid #e0e8f1;border-radius:8px;background:#fbfcfe}
.setup-metrics span{display:block;margin-bottom:8px;color:var(--muted);font-size:9px}
.setup-metrics strong{font-size:15px}
.mock-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #e7edf4;font-size:10px}
.mock-row>span{color:var(--muted)}
.mock-row strong{color:var(--ink);font-weight:750;text-align:right}
.mock-caption{margin:12px 3px 0;color:var(--muted);font-size:10px;line-height:1.5}
.stage-booking{background:#fff}
.stage-top{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:30px}
.stage-top>div{max-width:610px}
.stage-top>p{max-width:450px;margin:0}
.heading-identity{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;vertical-align:baseline}
.heading-avatar{display:inline-block;width:38px;height:38px;flex:none;overflow:hidden;border:1px solid #dbe5ef;border-radius:50%;background:#f1f5fa}
.heading-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.heading-avatar-customer img{object-position:center}
.customer-flow-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:5px 0 17px}
.customer-flow-head>strong{color:var(--ink);font-size:15px;letter-spacing:-.02em}
.customer-flow-head>span{color:var(--muted);font-size:11px}
.customer-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:0 0 31px;padding:0;list-style:none}
.customer-steps li{min-width:0;padding:15px 0 0;border-top:1px solid #cfdbea}
.customer-steps .step-index{display:block;margin-bottom:9px;color:var(--blue);font-size:11px;font-weight:850;letter-spacing:.08em}
.customer-steps strong{display:block;color:var(--ink);font-size:16px;line-height:1.3;letter-spacing:-.025em}
.customer-steps small{display:block;margin-top:6px;color:var(--muted);font-size:12px}
.booking-site-preview{max-width:100%;border-radius:14px}
.booking-site-preview .mockup-label{padding:16px 22px;border-bottom:1px solid #e2e9f2}
.site-preview-body{display:grid;grid-template-columns:44% 56%;min-height:330px}
.site-preview-photo{background:#e4edf5 url('../../../assets/pet-grooming-salon/generic-public-service-retriever.jpg') center/cover}
.site-preview-summary{padding:28px 40px}
.site-preview-summary .mock-row{font-size:12px}
.mock-primary{display:inline-flex;align-items:center;justify-content:center;min-height:35px;margin-top:18px;padding:0 14px;border-radius:6px;background:var(--blue);color:#fff;font-size:11px;font-weight:750}
.policy-note{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:30px}
.policy-note>div{padding-top:16px;border-top:1px solid #dce6f1}
.policy-note strong{font-size:12px}
.policy-note p{max-width:550px;margin:7px 0 0;color:var(--muted);font-size:11px;line-height:1.65}
.stage-team{background:#f8fafd}
.stage-team .stage-media{background:#f3f6fb}
.team-window{padding:24px}
.team-heading{display:flex;align-items:center;gap:15px;padding-bottom:20px;border-bottom:1px solid #e2e9f1}
.team-heading img{width:66px;height:66px;flex:none;border-radius:9px;object-fit:cover}
.team-heading h3{font-size:19px}
.team-heading span{color:var(--muted);font-size:10px}
.team-heading b,.report-header b{margin-left:auto;padding:7px 9px;border-radius:5px;background:#e8f6f1;color:#27846c;font-size:10px;white-space:nowrap}
.team-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:22px}
.team-columns>div{min-width:0}
.team-columns .mock-row{font-size:10px}
.stage-during{background:#fff}
.phone-stage{display:flex;align-items:center;justify-content:space-around;gap:35px;min-height:570px;overflow:hidden;background:#f4f6fa}
.phone-context{max-width:185px}
.phone-context span{display:block;margin-bottom:14px;color:var(--blue);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.07em}
.phone-context strong{display:block;color:var(--ink);font-size:22px;line-height:1.2;letter-spacing:-.04em}
.phone-context p{color:var(--body);font-size:11px;line-height:1.6}
.phone-frame{width:270px;min-height:535px;flex:none;overflow:hidden;border:7px solid #1b2a3d;border-radius:31px;background:#fff;box-shadow:0 22px 38px rgba(23,38,61,.13)}
.phone-top{display:flex;justify-content:space-between;padding:13px 18px 4px;color:#1b2a3d;font-size:10px;font-weight:850}
.phone-brand{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid #e6edf5}
.phone-brand img{width:63px;height:auto}
.phone-brand span{color:var(--muted);font-size:8px}
.phone-body{padding:19px 15px}
.phone-body h3{margin:7px 0 17px;font-size:20px;letter-spacing:-.04em}
.phone-note{display:grid;gap:5px;margin-bottom:14px;padding:11px;border:1px solid #e2e9f2;border-radius:7px;background:#fbfcfe}
.phone-note span{color:var(--muted);font-size:9px}
.phone-note strong{font-size:10px;line-height:1.45}
.phone-progress{display:flex;gap:5px;margin:0 0 12px}
.phone-progress span{padding:6px 8px;border-radius:4px;background:#e5effd;color:var(--blue);font-size:8px;font-weight:800}
.phone-photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px}
.phone-photo-grid img{width:100%;height:87px;object-fit:cover;border-radius:5px}
.phone-body .mock-primary{width:100%;margin-top:0}
.stage-after{background:#f8fafd}
.stage-after .stage-media{background:#f2f5fa}
.report-window{padding:24px}
.report-header{display:flex;align-items:start;justify-content:space-between;gap:10px;padding-bottom:17px;border-bottom:1px solid #e2e9f1}
.report-header h3{font-size:20px}
.report-header span{color:var(--muted);font-size:10px}
.report-header b{margin-left:0;background:#e5effd;color:var(--blue)}
.report-photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 8px}
.report-photo-grid figure{position:relative;height:155px;overflow:hidden;margin:0;border-radius:7px}
.report-photo-grid img{width:100%;height:100%;object-fit:cover}
.report-photo-grid figcaption{position:absolute;left:8px;bottom:8px;padding:5px 7px;border-radius:4px;background:rgba(255,255,255,.94);font-size:9px;font-weight:800}
.report-message{margin:12px 0;padding:13px;border:1px solid #e3eaf2;border-radius:7px;background:#f8fafd}
.report-message p{margin:7px 0 0;color:var(--body);font-size:10px;line-height:1.5}
@media(max-width:900px){.needs-grid,.stage-layout{gap:35px}.stage-layout{grid-template-columns:.9fr 1.1fr}.journey-track strong{font-size:16px}.phone-context{display:none}}
@media(max-width:700px){.salon-needs,.grooming-journey,.salon-stage{padding:65px 0}.needs-grid,.stage-layout,.stage-top{display:block}.needs-list{margin-top:30px}.journey-track{grid-template-columns:1fr;gap:15px}.journey-track:before{top:20px;bottom:20px;left:19px;width:1px;height:auto}.journey-track .journey-item{display:grid;grid-template-columns:40px 1fr;column-gap:17px;min-height:55px;padding:0;text-align:left}.journey-track .journey-index{grid-row:1/3}.journey-track small{align-self:end;margin:0 0 3px}.journey-track strong{align-self:start}.stage-copy{max-width:none;margin-bottom:30px}.stage-top>p{max-width:none;margin-top:0}.customer-steps{grid-template-columns:1fr 1fr}.policy-note{grid-template-columns:1fr}.phone-context{display:block}}
@media(max-width:480px){.setup-window,.site-preview-body,.team-columns{grid-template-columns:1fr}.setup-image,.site-preview-photo{height:175px}.setup-form,.site-preview-summary{padding:20px}.team-window,.report-window{padding:17px}.team-heading{flex-wrap:wrap}.team-heading b{margin-left:0}.customer-flow-head{align-items:flex-start;flex-direction:column;gap:10px}.customer-steps{gap:16px}.customer-steps strong{font-size:14px}.phone-stage{min-height:550px;padding:13px}.phone-context{display:none}.report-photo-grid figure{height:115px}}

/* Paw & Co. color lives inside its public-page mockups. Surrounding sections stay neutral. */
.hero-ui .booking-site-head strong{color:var(--rose-deep)}
.hero-ui .booking-site-head b,.hero-ui .booking-slots span:nth-child(2),.hero-ui .booking-next b{border-color:var(--rose-deep);background:var(--rose-deep)}
.hero-ui .booking-site-body>small{color:var(--rose-deep)}
.hero-ui .booking-choice div:first-child{border-color:#efbbd4;background:#fff6fa}
.hero-ui .booking-slots span{color:var(--rose-deep)}
.hero-ui .booking-slots span:nth-child(2){color:#fff}
.booking-site-preview .mockup-label span:first-child,.booking-site-preview .site-preview-summary>small{color:var(--rose-deep)}
.booking-site-preview .mock-primary{background:var(--rose-deep)}
@media(max-width:480px){.heading-identity{gap:5px}.heading-avatar{width:30px;height:30px}}

/* Service listing imagery is generic; the booking and report photos identify Coco. */
.setup-image,.site-preview-photo{position:relative}
.service-photo-label{position:absolute;right:12px;bottom:12px;padding:6px 9px;border:1px solid rgba(255,255,255,.8);border-radius:5px;background:rgba(255,255,255,.94);color:#43536b;font-size:10px;font-weight:700;line-height:1}

/* Photo-led hero: the scene carries the visual weight; booking UI is a small proof point. */
.hero{padding-bottom:100px}
.hero-stage{min-height:570px;padding:0}
.hero-stage:before{display:none}
.hero-photo{top:22px;right:0;width:93%;height:500px;border-radius:23px;background-position:61% center;box-shadow:none}
.hero-ui{left:0;bottom:0;width:min(360px,57%);border-color:#e2e8ef;border-radius:14px;box-shadow:0 17px 43px rgba(23,38,61,.16)}
.hero-ui-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 18px;border-bottom:1px solid #e9edf3;background:#fff}
.hero-ui-head strong{color:var(--rose-deep);font-size:12px;letter-spacing:-.02em}
.hero-ui-head span{color:var(--muted);font-size:9px}
.hero-ui-body{padding:19px 19px 17px}
.hero-ui-body>small{color:var(--rose-deep);font-size:9px;font-weight:850;letter-spacing:.09em}
.hero-ui-body h3{margin:7px 0 3px;font-size:23px;letter-spacing:-.045em}
.hero-ui-body p{margin:0;color:var(--body);font-size:11px;line-height:1.45}
.hero-ui-details{display:flex;gap:7px;margin:13px 0}
.hero-ui-details span{padding:6px 8px;border:1px solid #e4e9f1;border-radius:5px;color:var(--body);font-size:11px;font-weight:700}
.hero-ui-time{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:10px 0;border-top:1px solid #e9edf3;color:var(--muted);font-size:11px}
.hero-ui-time strong{color:var(--ink);font-size:12px}
.hero-ui-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:10px;border-top:1px solid #e9edf3}
.hero-ui-footer>span{color:var(--muted);font-size:9px;line-height:1.3}
.hero-ui-footer b{flex:none;padding:8px 10px;border-radius:5px;background:var(--rose-deep);color:#fff;font-size:11px;font-weight:750}
@media(max-width:1000px){.hero-stage{min-height:530px}.hero-photo{height:465px}.hero-ui{width:min(335px,63%)}}
@media(max-width:700px){.hero-stage{min-height:525px;margin-top:28px}.hero-photo{top:0;height:465px}.hero-ui{width:min(340px,62%)}}
@media(max-width:460px){.hero-stage{min-height:500px}.hero-photo{top:0;right:0;width:100%;height:380px;background-position:62% center}.hero-ui{left:0;bottom:0;width:min(320px,83%)}.hero-ui-body{padding:16px}.hero-ui-body h3{font-size:20px}}