/* Service pages: /service and /service/haircut. Builds on pincode-page.css (the .pc-* classes). */
.sv-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .6rem; margin: 0 0 1rem; font-size: 1.05rem; color: rgba(255, 255, 255, .95); }
.sv-price i { color: #ffb347; }
.sv-price strong { font-size: 1.25rem; color: #fff; }
.sv-price small { flex: 1 1 100%; font-size: .82rem; color: rgba(255, 255, 255, .75); }
.sv-offer { display: block; margin-top: .25rem; font-size: .9rem; font-weight: 600; color: var(--pc-ink, #14213d); }
.sv-offer i { color: #0f8a4f; }
.sv-offer b { color: #0f8a4f; margin-left: .25rem; }
.pc-chips a.is-active { background: var(--pc-brand, #004aad); border-color: var(--pc-brand, #004aad); color: #fff; }
.pc-chips a.is-active small { color: rgba(255, 255, 255, .85); }
.sv-none { color: var(--pc-muted, #5b667a); }

/* service photo: the page header uses it as its background, under a dark fade so the words stay readable */
.pc-head.sv-hero-img { background: linear-gradient(180deg, rgba(8, 15, 40, .62) 0%, rgba(8, 15, 40, .5) 45%, rgba(8, 15, 40, .86) 100%), var(--sv-img) center / cover no-repeat, #0a2a6b; min-height: 300px; }
.pc-head.sv-hero-img h1, .pc-head.sv-hero-img .pc-stats, .pc-head.sv-hero-img .sv-price { text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.sv-credit { margin: 1rem 0 0; font-size: .75rem; color: rgba(255, 255, 255, .78); }
.sv-credit a { color: rgba(255, 255, 255, .95); text-decoration: underline; }

/* the service list with a photo for each service */
.sv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.sv-tile { display: flex; flex-direction: column; gap: .15rem; background: #fff; border: 1px solid var(--pc-line, #e3eaf5); border-radius: 16px; padding: 0 0 .85rem; text-decoration: none; color: var(--pc-ink, #14213d); overflow: hidden; transition: box-shadow .15s, transform .15s, border-color .15s; }
.sv-tile:hover { box-shadow: 0 10px 26px rgba(20, 33, 61, .12); transform: translateY(-2px); border-color: #cfdcf3; color: var(--pc-ink, #14213d); }
.sv-tile-media { display: block; aspect-ratio: 1200 / 627; background: linear-gradient(135deg, #0a2a6b, #3b7de0); overflow: hidden; }
.sv-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.sv-tile:hover .sv-tile-media img { transform: scale(1.05); }
.sv-tile-letter { display: grid; place-items: center; width: 100%; height: 100%; color: rgba(255, 255, 255, .85); font-size: 2.6rem; font-weight: 800; }
.sv-tile strong { padding: .65rem .95rem 0; font-size: 1.02rem; line-height: 1.25; }
.sv-tile small { padding: 0 .95rem; color: var(--pc-muted, #5b667a); }
.sv-photos-note { margin: 1rem 0 0; font-size: .78rem; color: var(--pc-muted, #5b667a); }
@media (max-width: 575.98px) { .sv-tiles { grid-template-columns: repeat(2, 1fr); gap: .7rem; } .sv-tile strong { font-size: .95rem; padding: .55rem .75rem 0; } .sv-tile small { padding: 0 .75rem; } }