/* Pharmacy adaptation, 2026-11-02. Unslop audit methodology:
Damir Sokolovsky / @heydamir, https://github.com/heydamir/unslop, CC BY 4.0.
Design/content changes documented in ../QA.md. */
:root{--page:#f8faf6;--ink:#223326;--secondary:#596458;--muted:#64705f;--green:#356521;--line:#dbe1d5;--tint:#edf2e7}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;scroll-padding-bottom:100px}
body{margin:0;background:var(--page);color:var(--ink);font-family:"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:color 160ms ease-out,background-color 160ms ease-out}
a:hover{color:var(--green)}
a:focus-visible{outline:3px solid var(--green);outline-offset:5px}
img{display:block;max-width:100%;object-fit:cover}
figure,p,h1,h2,h3{margin:0}
h1,h2,h3{font-weight:500}
.container{width:calc(100% - 96px);max-width:1280px;margin:0 auto}
.topline{font-size:13px;background:var(--tint);color:var(--secondary)}
.topline .container{display:flex;align-items:center;justify-content:space-between;min-height:36px}
#navtop{min-height:104px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:500;white-space:nowrap}
.logo img{width:44px;height:44px;object-fit:contain}
.number{color:var(--secondary);font-size:16px}
nav{display:flex;gap:28px;font-size:14px}
nav a{padding:12px 0}
.header-phone{font-size:16px;font-weight:500;white-space:nowrap}
.hero{display:flex;align-items:center;margin-top:40px;margin-bottom:80px}
.hero-copy{padding-right:40px}
.eyebrow{font-size:14px;color:var(--green);margin-bottom:24px}
h1{font-size:clamp(40px,4.2vw,60px);line-height:1.06;letter-spacing:-.035em;margin-bottom:28px}
h1 span{color:var(--green)}
.lead{font-size:18px;line-height:1.6;color:var(--secondary);max-width:460px;margin-bottom:24px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:52px;padding:12px 20px;border-radius:8px;font-size:15px;font-weight:500;white-space:nowrap;border:1px solid transparent}
.primary{background:var(--green);color:#fff}
.primary:hover{background:#284e18;color:#fff}
.secondary{border-color:#bec9b6;background:transparent}
.secondary:hover{background:var(--tint)}
.hero-hours{display:flex;align-items:flex-start;gap:32px;border-top:1px solid var(--line);margin-top:0;margin-bottom:24px;padding-top:20px;font-size:16px;color:var(--secondary)}
.hero-hours strong{font-weight:500;color:var(--ink);margin-left:16px;font-variant-numeric:tabular-nums}
.hero-photo img{width:100%;height:552px;object-position:center 30%;border-radius:12px}
.hero-photo figcaption{display:flex;justify-content:space-between;gap:16px;color:var(--secondary);font-size:14px;padding-top:12px}
.hero-photo img{object-position:center top}
h2{font-size:44px;line-height:1.14;letter-spacing:-.025em}
h3{font-size:22px;line-height:1.3}
.services{margin-bottom:80px}
.section-heading{margin-bottom:40px}
.service-layout{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.pressure-photo img{height:432px;width:100%;object-position:50% 48%;border-radius:12px}
.service-list article{padding:24px 0;border-top:1px solid var(--line);display:flex;align-items:flex-start;gap:20px;position:relative}
.service-number{font-size:13px;color:var(--muted);padding-top:4px;font-variant-numeric:tabular-nums}
.service-list article p{font-size:16px;color:var(--secondary);margin-top:12px;max-width:480px}
.service-list article h3{padding-right:0}

.text-link{display:inline-flex;gap:32px;color:var(--green);padding:16px 0;margin-top:8px;border-bottom:1px solid var(--green)}
.works{margin-bottom:80px}
.about-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-bottom:40px}
.about-heading>p{max-width:440px;color:var(--secondary);font-size:18px}
.gallery img{width:100%;height:352px;border-radius:12px}
.gallery figure:first-child img{object-position:50% 43%}
.gallery figure:nth-child(2) img{object-position:40% 38%}
.gallery figcaption{padding-top:20px}
.gallery h3{font-size:19px;margin-bottom:8px}
.gallery p{font-size:14px;color:var(--secondary)}
.contacts{background:var(--tint);border-radius:16px;padding:56px;display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-bottom:64px}
.contact-intro>p:not(.eyebrow){color:var(--secondary);margin:24px 0}
.map-link{display:block;text-decoration:underline;text-underline-offset:4px;font-size:14px;margin-top:16px;min-height:44px;display:flex;align-items:center}
.contact-details h3{font-size:18px;margin-bottom:20px}
dl{margin:0}
dl>div{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px;font-size:15px}
dt{color:var(--secondary)}
dd{margin:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.small{font-size:14px;color:var(--secondary)}
.contact-phone{border-top:1px solid #ced8c5;margin-top:28px;padding-top:28px}
.contact-phone>a{font-size:28px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.contact-phone>p{font-size:14px;color:var(--secondary);margin-top:8px}
.contact-online{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:14px;margin-top:28px}
.contact-online a{text-decoration:underline;text-underline-offset:4px}
footer{border-top:1px solid var(--line);padding:28px 0 40px;display:flex;justify-content:space-between;font-size:13px;color:var(--secondary)}
.mobile-actions{display:none}
.skip-link{position:absolute;top:-100px;left:20px;background:#fff;padding:16px;z-index:10}
.skip-link:focus{top:8px}
@media(max-width:1100px){
.container{width:calc(100% - 64px)}nav{gap:16px}.header-phone{font-size:14px}.logo{font-size:18px}
.hero-copy{padding-right:16px}.hero-photo img{height:520px}.actions{gap:8px}.button{padding:12px 16px}
.service-layout{gap:40px}.contacts{padding:40px;gap:40px}
}
@media(max-width:900px){.header-phone{display:none}.hero-hours{gap:20px}.gallery img{height:300px}.contact-phone>a{font-size:24px}}
@media(max-width:48em){
.container{width:calc(100% - 40px)}.topline{font-size:12px}#navtop{min-height:88px;flex-wrap:wrap;padding:20px 0;gap:16px}.logo{font-size:19px}.logo img{width:40px;height:40px}
nav{width:100%;justify-content:space-between;font-size:14px;gap:8px}nav a{padding:12px 0;min-height:48px;display:flex;align-items:center}
.hero{display:block;margin-top:24px;margin-bottom:48px}.hero-copy{padding-right:0}.eyebrow{margin-bottom:16px}h1{font-size:36px;letter-spacing:-.03em;margin-bottom:16px}.lead{font-size:17px;max-width:520px;margin-bottom:24px}.actions .button{flex:1;font-size:14px;gap:8px}
.hero-hours{margin-top:0;margin-bottom:20px;padding-top:16px;justify-content:space-between;max-width:520px;font-size:15px}
.hero-photo{margin-top:24px}.hero-photo img{height:320px;object-position:center top}.hero-photo figcaption{font-size:14px;gap:8px;flex-wrap:wrap}
h2{font-size:36px}.services,.works{margin-bottom:48px}.section-heading{margin-bottom:28px}
.service-layout{grid-template-columns:1fr;gap:28px}.pressure-photo img{height:240px;object-position:50% 44%}.service-list article{padding:24px 0}.service-list article h3{padding-right:0}.service-list article:first-child h3{padding-right:0;font-size:20px}.service-list article p{font-size:15px}.service-number{font-size:12px}.service-list h3{font-size:20px}
.about-heading{display:block;margin-bottom:32px}.about-heading>p{font-size:16px;margin-top:24px}
.gallery figure{margin-bottom:28px}.gallery figure:first-child img{height:220px}.gallery img{height:220px}.gallery h3{font-size:18px}.gallery p{font-size:14px}
.contacts{padding:28px 24px;grid-template-columns:1fr;gap:40px;margin-bottom:40px}.contact-details h3{margin-bottom:16px}dl>div{font-size:14px}.contact-phone>a{font-size:28px}.contact-intro .button{width:100%}
footer{padding-bottom:112px;font-size:12px;gap:24px}.mobile-actions{position:fixed;bottom:0;left:0;right:0;display:flex;gap:8px;background:#fff;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);z-index:5}.mobile-actions .button{flex:1;min-height:48px;font-size:14px}
}
@media(max-width:360px){.actions{flex-direction:column}.hero-photo img{height:320px}.gallery .grid{width:100%}.gallery img{height:200px}.service-list article:first-child h3{padding-right:0}.service-list article:first-child{flex-wrap:wrap}.contact-phone>a{font-size:24px}dl>div{font-size:14px;flex-wrap:wrap;gap:4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}a{transition:none}}
@media(max-width:48em){.hero-photo img{object-position:center top}}
@media print{.mobile-actions,.topline,nav{display:none}body{background:#fff}section{break-inside:avoid}footer{padding-bottom:0}}


/* UX pass, 2026-11-03: visible contact, compact visit information and conditional mobile actions. */
.hero-contact{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;margin-top:12px}
.hero-contact a{font-size:20px;font-variant-numeric:tabular-nums;min-height:44px;display:inline-flex;align-items:center}
.hero-contact span{font-size:14px;color:var(--secondary)}
.visit-summary{font-size:14px;line-height:1.55;color:var(--secondary);margin-top:16px}
.pickup-steps{margin:12px 0 0;padding-left:20px;color:var(--secondary);font-size:16px}
.pickup-steps li{padding-left:4px;margin-bottom:8px}
.service-list article .pickup-note{font-size:14px;color:var(--green);margin-top:12px}
.arrival-info{margin:0 0 24px;padding-left:20px;color:var(--secondary);font-size:16px}
.arrival-info li{margin-bottom:12px;padding-left:4px}
.arrival-photo{width:100%;height:200px;margin-top:16px;border-radius:8px;object-position:50% 50%}
.contact-online a{display:inline-flex;align-items:center;min-height:44px}
.mobile-actions[hidden]{display:none}
@media(max-width:768px){
 #navtop{padding:16px 0;gap:8px}
 .hero-hours>span{display:none}
 .hero-hours>div{display:flex;flex-wrap:wrap;gap:4px 20px}
 .hero-hours strong{margin-left:8px}
 .hero-contact{gap:0 12px}
 .hero-contact a{font-size:19px}
 .visit-summary{margin-top:12px}
 .hero-photo img{height:320px}
 .service-layout{gap:20px}
 .service-list article{padding:20px 0}
 .pickup-steps{font-size:16px}
 .about-heading{margin-bottom:24px}
 .about-heading>p{margin-top:16px}
 .gallery figure{margin-bottom:16px}
 .gallery figcaption{padding-top:12px}
 .contacts{gap:28px;padding:24px}
 .arrival-info{font-size:15px;margin-bottom:20px}
 .arrival-photo{height:160px}
 footer{font-size:14px}
}
@media(max-width:360px){.hero-hours>div{display:block}.hero-photo img{height:300px}.hero-photo figcaption{display:block}.hero-photo figcaption span{display:block}.gallery figure:first-child img{height:200px}}