/* ==========================================================================
   Mears Pharmacy & Morgan Drug — site stylesheet
   Built on the Mears Design System (blue #1060A0 / green #6FAE4E) with a
   warm cream editorial layer. Libre Franklin (UI) + Source Serif 4 (display)
   + IBM Plex Mono (numerics). Self-hosted fonts via assets/fonts/fonts.css.
   ========================================================================== */

:root{
  /* Brand */
  --ds-blue:#1060A0; --ds-blue-deep:#0C3F6B; --ds-blue-bright:#1A73C7;
  --ds-green:#6FAE4E; --ds-green-deep:#4E8A30;
  /* Surfaces (DS) */
  --ds-panel:#FFFFFF; --ds-panel-alt:#F3F7FB; --ds-row-alt:#F8FAFC;
  --ds-border:#E6ECF2; --ds-border-strong:#D5DEE7;
  /* Ink */
  --ds-text:#16243A; --ds-text-mute:#5C6B7E; --ds-text-faint:#8A97A6;
  /* Interactive + semantic */
  --ds-accent-soft:#F3F7FB; --ds-accent-border:#C8D6F7;
  --ds-focus-ring:0 0 0 3px rgba(16,96,160,.20);
  --ds-ok-bg:#EAF3E2; --ds-ok-fg:#4E8A30; --ds-ok-border:#B6D89C; --ds-ok-dot:#6FAE4E;
  --ds-info-bg:#EEF5FF; --ds-info-fg:#1060A0; --ds-info-border:#C2D8F3; --ds-info-dot:#1A73C7;
  /* Radii / elevation */
  --ds-r-sm:6px; --ds-r-md:10px; --ds-r-lg:14px; --ds-r-pill:999px;
  --ds-shadow:0 1px 2px rgba(20,40,70,.06), 0 6px 20px rgba(20,40,70,.05);
  --ds-shadow-lg:0 8px 30px rgba(20,40,70,.14);
  /* Type */
  --ds-font-sans:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --ds-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  /* Warm cream layer */
  --cream:#F8F3EA; --cream-soft:#FDFBF7; --cream-line:#EDE5D6; --cream-line-2:#E3D8C2;
  --ghost-border:#DED4C2;
  /* Spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:26px; --sp-7:36px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:#FFFFFF; color:var(--ds-text);
  font-family:var(--ds-font-sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--ds-blue)}
h1,h2,h3,h4{font-family:var(--font-serif); color:var(--ds-text); letter-spacing:-.01em; font-weight:600; margin:0}
p{margin:0}
.mono,[data-mono]{font-family:var(--ds-font-mono); font-variant-numeric:tabular-nums}
:focus-visible{outline:none; box-shadow:var(--ds-focus-ring); border-radius:var(--ds-r-sm)}

/* ---------- Layout ---------- */
.wrap{max-width:1160px; margin:0 auto; padding:0 24px}
.wrap--narrow{max-width:860px}
.wrap--mid{max-width:960px}
.section{padding:clamp(52px,7vw,90px) 0}
.section--sm{padding:clamp(40px,5vw,64px) 0}
.section--cream{background:var(--cream); border-top:1px solid var(--cream-line); border-bottom:1px solid var(--cream-line)}
.section--white{background:#FFFFFF}
.section--navy{background:var(--ds-blue-deep); color:#FFFFFF}
.center{text-align:center}
.mt-1{margin-top:12px} .mt-2{margin-top:20px} .mt-3{margin-top:28px}
.text-muted{color:var(--ds-text-mute)}
.stack > * + *{margin-top:16px}

/* ---------- Eyebrow / headings ---------- */
.eyebrow{display:inline-flex; align-items:center; gap:8px; margin:0 0 12px;
  font-family:var(--ds-font-sans); font-size:12.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ds-blue)}
.eyebrow::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--ds-green); flex-shrink:0}
.eyebrow--center{justify-content:center}
.display{font-family:var(--font-serif); font-weight:600; line-height:1.1; letter-spacing:-.015em;
  font-size:clamp(34px,4.8vw,58px); text-wrap:balance; margin:0}
.display em{font-style:italic; color:var(--ds-blue)}
.h2{font-family:var(--font-serif); font-weight:600; line-height:1.15; letter-spacing:-.01em;
  font-size:clamp(28px,3.4vw,40px); text-wrap:balance; margin:0}
.lead{font-size:clamp(16px,1.6vw,19px); line-height:1.65; color:var(--ds-text-mute)}
.section-head{max-width:640px; margin:0 auto 40px; text-align:center}
.section-head .lead{margin-top:12px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--ds-font-sans); font-size:15.5px; font-weight:600; line-height:1;
  padding:13px 24px; border-radius:var(--ds-r-md); border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
.btn--primary{background:var(--ds-blue); color:#FFFFFF; box-shadow:var(--ds-shadow)}
.btn--primary:hover{background:var(--ds-blue-bright)}
.btn--green{background:var(--ds-green); color:#FFFFFF}
.btn--green:hover{background:var(--ds-green-deep)}
.btn--ghost{background:#FFFFFF; color:var(--ds-blue-deep); border-color:var(--ghost-border)}
.btn--ghost:hover{border-color:var(--ds-blue); color:var(--ds-blue)}
.btn--onnavy{background:var(--ds-green); color:#FFFFFF}
.btn--onnavy:hover{background:var(--ds-green-deep)}
.btn--sm{padding:10px 18px; font-size:14.5px}
.btn-row{display:flex; flex-wrap:wrap; gap:12px}
.btn-row--center{justify-content:center}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:60; background:#FFFFFF; font-family:var(--ds-font-sans)}
.utilbar{background:var(--ds-blue-deep); color:#fff}
.utilbar__inner{max-width:1160px; margin:0 auto; padding:7px 24px; display:flex; align-items:center;
  justify-content:space-between; gap:16px}
.utilbar__tag{font-size:12.5px; letter-spacing:.03em; color:rgba(255,255,255,.85)}
.utilbar__phones{display:flex; align-items:center; gap:16px; font-family:var(--ds-font-mono);
  font-variant-numeric:tabular-nums; font-size:12.5px}
.utilbar__phones a{color:#fff; text-decoration:none}
.utilbar__phones a:hover{color:#BFD9F0}
.utilbar__sep{opacity:.4}
.nav{max-width:1160px; margin:0 auto; padding:13px 24px; display:flex; align-items:center;
  justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none}
.brand img{height:42px; width:auto}
.brand__sub{display:block; border-left:1px solid var(--ds-border-strong); padding-left:14px}
.brand__name{display:block; font-family:var(--ds-font-sans); font-size:12.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ds-blue-deep)}
.brand__loc{display:block; font-size:11.5px; color:var(--ds-text-mute); margin-top:1px}
.nav__links{display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0}
.nav__links a{font-size:15px; font-weight:600; text-decoration:none; color:var(--ds-text);
  padding-bottom:5px; border-bottom:3px solid transparent; transition:color .15s ease}
.nav__links a:hover{color:var(--ds-blue)}
.nav__links a[aria-current="page"]{color:var(--ds-blue); border-bottom-color:var(--ds-green)}
.nav__cta a{background:var(--ds-blue); color:#fff; padding:10px 20px; border-radius:var(--ds-r-md);
  border-bottom:none !important; box-shadow:var(--ds-shadow)}
.nav__cta a:hover{background:var(--ds-blue-bright); color:#fff}
.nav__toggle{display:none; width:44px; height:44px; align-items:center; justify-content:center;
  border:1px solid var(--ds-border-strong); border-radius:var(--ds-r-md); background:#fff;
  color:var(--ds-blue-deep); font-size:20px; cursor:pointer}
.tabrule{height:3px; background:var(--ds-blue)}
.tabrule > i{display:block; width:72px; height:3px; background:var(--ds-green)}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg,#F8F3EA 0%,#FDFBF7 70%,#FFFFFF 100%)}
.hero__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:clamp(28px,5vw,60px); align-items:center; padding:clamp(48px,6.5vw,92px) 0}
.hero__contacts{display:flex; flex-wrap:wrap; gap:28px; margin-top:32px}
.hero__contact b{display:block; font-family:var(--font-serif); font-weight:600; font-size:16px}
.hero__contact a{font-family:var(--ds-font-mono); font-size:14px; color:var(--ds-blue); text-decoration:none}
.hero__media{position:relative; padding:0 14px 14px 0}
.hero__media::before{content:""; position:absolute; top:22px; right:0; bottom:0; left:22px;
  border-radius:16px; background:#F0E8D8; border:1px solid var(--cream-line-2)}
.hero__media::after{content:""; position:absolute; top:-8px; right:36px; width:56px; height:3px; background:var(--ds-blue)}
.hero__media img{position:relative; display:block; width:100%; height:auto;
  border-radius:16px; box-shadow:var(--ds-shadow-lg)}
.hero__media .tab{position:absolute; top:-8px; right:36px; width:20px; height:3px; background:var(--ds-green); z-index:2}

/* ---------- Trust strip ---------- */
.trust{border-top:1px solid var(--cream-line); border-bottom:1px solid var(--cream-line); background:#fff}
.trust__inner{display:flex; flex-wrap:wrap; gap:14px 40px; align-items:center; justify-content:center; padding:18px 0}
.trust__item{display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600}
.trust__item svg{flex-shrink:0}

/* ---------- Cards / service grid ---------- */
.grid{display:grid; gap:18px}
.grid--services{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--cream-soft); border:1px solid var(--cream-line); border-radius:var(--ds-r-lg);
  padding:24px; box-shadow:var(--ds-shadow); transition:transform .18s ease,box-shadow .18s ease}
.card--lift:hover{transform:translateY(-3px); box-shadow:var(--ds-shadow-lg)}
.card__icon{width:44px; height:44px; display:grid; place-items:center; border-radius:var(--ds-r-md);
  background:var(--ds-info-bg); color:var(--ds-blue); margin-bottom:14px}
.card h3{font-size:19px; margin:0 0 6px}
.card p{font-size:15px; color:var(--ds-text-mute); line-height:1.55}
.card--plain{background:#fff}

/* ---------- Split (text + panel) ---------- */
.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:clamp(28px,5vw,60px); align-items:center}
.panel{background:#FFFFFF; border:1px solid var(--cream-line-2); border-radius:var(--ds-r-lg);
  box-shadow:var(--ds-shadow); padding:26px}
.panel--lg{box-shadow:var(--ds-shadow-lg); padding:30px}
.panel__quote{font-family:var(--font-serif); font-style:italic; color:var(--ds-blue-deep);
  font-size:clamp(20px,2.2vw,26px); line-height:1.35; margin:0}
.panel__lede{font-family:var(--font-serif); font-weight:600; color:var(--ds-blue-deep);
  font-size:clamp(24px,2.6vw,30px); letter-spacing:-.01em; margin:0 0 8px}

/* ---------- Location cards ---------- */
.loc-card{background:var(--cream-soft); border:1px solid var(--cream-line); border-radius:var(--ds-r-lg);
  box-shadow:var(--ds-shadow); padding:28px; transition:transform .18s ease,box-shadow .18s ease}
.loc-card:hover{transform:translateY(-3px); box-shadow:var(--ds-shadow-lg)}
.loc-badge{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 12px; border-radius:var(--ds-r-pill); margin-bottom:14px}
.loc-badge::before{content:""; width:7px; height:7px; border-radius:50%}
.loc-badge--blue{background:var(--ds-info-bg); color:var(--ds-blue); border:1px solid var(--ds-info-border)}
.loc-badge--blue::before{background:var(--ds-info-dot)}
.loc-badge--green{background:var(--ds-ok-bg); color:var(--ds-green-deep); border:1px solid var(--ds-ok-border)}
.loc-badge--green::before{background:var(--ds-ok-dot)}
.loc-card h3{font-size:26px; margin:0 0 14px}
.loc-meta{display:grid; gap:9px; font-size:15px; color:var(--ds-text-mute); margin:0 0 20px; padding:0; list-style:none}
.loc-meta li{display:flex; gap:10px; align-items:flex-start}
.loc-meta svg{color:var(--ds-blue); flex-shrink:0; margin-top:2px}
.loc-meta a{color:var(--ds-text); text-decoration:none; font-family:var(--ds-font-mono)}
.loc-meta .mono{font-size:13.5px}
.loc-note{margin:16px 0 0; font-size:13.5px; color:var(--ds-text-faint)}

/* ---------- Dispill 7-day card mockup ---------- */
.pillcard__head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px}
.pillcard__title{font-family:var(--font-serif); font-weight:600; font-size:17px}
.pillcard__tag{font-family:var(--ds-font-mono); font-size:12px; color:var(--ds-text-faint);
  text-transform:uppercase; letter-spacing:.06em}
.pillgrid{display:grid; grid-template-columns:76px repeat(7,1fr); gap:6px; align-items:center}
.pillgrid__label{font-family:var(--ds-font-mono); font-size:11px; color:var(--ds-text-mute)}
.pillgrid__cell{aspect-ratio:1; border-radius:8px; display:grid; place-items:center}
.pillgrid__cell i{width:9px; height:9px; border-radius:50%; display:block}
.cell--m{background:var(--ds-info-bg); border:1px solid var(--ds-info-border)} .cell--m i{background:var(--ds-blue)}
.cell--n{background:var(--ds-ok-bg);   border:1px solid var(--ds-ok-border)}   .cell--n i{background:var(--ds-green)}
.cell--e{background:var(--ds-info-bg); border:1px solid var(--ds-info-border)} .cell--e i{background:var(--ds-blue-bright)}
.cell--b{background:var(--ds-row-alt); border:1px solid var(--ds-border-strong)} .cell--b i{background:var(--ds-blue-deep)}

/* ---------- Reviews (navy) ---------- */
.stars{display:flex; justify-content:center; gap:4px; margin-bottom:16px}
.stars svg{color:var(--ds-green)}
.review{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--ds-r-lg); padding:26px; display:flex; flex-direction:column; gap:14px; margin:0}
.review blockquote{margin:0; font-family:var(--font-serif); font-style:italic; font-size:17px;
  line-height:1.6; color:#E8F0F7}
.review figcaption{font-family:var(--ds-font-mono); font-size:12.5px; color:#8FB4D4;
  text-transform:uppercase; letter-spacing:.06em}

/* ---------- Timeline ---------- */
.timeline{display:flex; flex-wrap:wrap; justify-content:center; gap:12px 36px; margin:0 0 30px;
  font-family:var(--ds-font-mono); font-variant-numeric:tabular-nums}
.timeline span{font-size:14px; color:var(--ds-text-mute)}
.timeline b{display:block; font-size:22px; color:var(--ds-blue-deep)}

/* ---------- Brand pills / chips ---------- */
.brandpills{display:flex; flex-wrap:wrap; gap:8px}
.brandpill{background:var(--cream); border:1px solid var(--cream-line-2); border-radius:var(--ds-r-pill);
  padding:6px 14px; font-size:13.5px; font-weight:600; color:var(--ds-blue-deep)}
.chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:14px 0 0; padding:0}
.chip{background:var(--ds-panel-alt); border:1px solid var(--ds-border-strong); border-radius:var(--ds-r-pill);
  padding:5px 13px; font-size:13.5px; font-weight:600; color:var(--ds-blue-deep)}

/* ---------- Steps (transfer) ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
.step{background:var(--cream-soft); border:1px solid var(--cream-line); border-radius:var(--ds-r-lg);
  padding:26px; box-shadow:var(--ds-shadow)}
.step__num{width:38px; height:38px; border-radius:50%; background:var(--ds-info-bg); color:var(--ds-blue-deep);
  font-family:var(--ds-font-mono); font-weight:600; font-size:16px; display:grid; place-items:center; margin-bottom:14px}
.step h3{font-size:19px; margin:0 0 6px}
.step p{color:var(--ds-text-mute); font-size:15px}

/* ---------- List-check ---------- */
.list-check{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.list-check li{position:relative; padding-left:30px; color:var(--ds-text-mute); font-size:15.5px; line-height:1.55}
.list-check li strong{color:var(--ds-text)}
.list-check li::before{content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%;
  background:var(--ds-ok-bg); border:1px solid var(--ds-ok-border)}
.list-check li::after{content:""; position:absolute; left:6px; top:8px; width:6px; height:3px;
  border-left:2px solid var(--ds-green-deep); border-bottom:2px solid var(--ds-green-deep); transform:rotate(-45deg)}

/* ---------- Team ---------- */
.team{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px}
.person{background:#fff; border:1px solid var(--cream-line); border-radius:var(--ds-r-lg); padding:24px; box-shadow:var(--ds-shadow)}
.person__head{display:flex; align-items:center; gap:14px; margin-bottom:12px}
.avatar{width:52px; height:52px; border-radius:50%; background:#E2ECF6; color:var(--ds-blue-deep);
  font-weight:700; display:grid; place-items:center; flex-shrink:0; font-family:var(--ds-font-sans)}
.avatar--photo{width:72px; height:72px; object-fit:cover; border:2px solid #fff;
  box-shadow:0 1px 4px rgba(16,42,67,.18)}
.person__name{font-family:var(--font-serif); font-size:20px; font-weight:600}
.person__title{font-size:13px; color:var(--ds-text-mute); font-weight:600}
.person p{color:var(--ds-text-mute); font-size:15px; line-height:1.6}

/* ---------- Forms ---------- */
.form{display:grid; gap:16px}
.field{display:grid; gap:6px}
.field label{font-size:13px; font-weight:600; color:var(--ds-text)}
.field input,.field select,.field textarea{width:100%; padding:12px 13px; font-size:15px;
  font-family:var(--ds-font-sans); color:var(--ds-text); background:#fff; border:1px solid var(--ds-border-strong);
  border-radius:8px; outline:none; transition:border-color .12s,box-shadow .12s}
.field textarea{min-height:120px; resize:vertical; line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ds-blue); box-shadow:var(--ds-focus-ring)}
.form-note{font-size:13px; color:var(--ds-text-mute); line-height:1.5; margin:2px 0 0}

/* ---------- Page hero (interior) ---------- */
.page-hero{background:linear-gradient(180deg,#F8F3EA 0%,#FDFBF7 100%); border-bottom:1px solid var(--cream-line)}
.page-hero .wrap{padding-top:clamp(44px,5.5vw,72px); padding-bottom:clamp(40px,5vw,60px)}
.page-hero .lead{max-width:60ch; margin-top:4px}

/* ---------- Footer ---------- */
.site-footer{background:var(--ds-blue-deep); color:#C9D8E6; font-size:15px; line-height:1.6}
.site-footer .tabrule > i{width:72px}
.footer__inner{max-width:1160px; margin:0 auto; padding:56px 24px 28px}
.footer__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:36px}
.footer__logos{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.footer__logos span{background:#fff; border-radius:var(--ds-r-md); padding:8px 12px; display:inline-flex}
.footer__logos img{height:34px; width:auto}
.footer__blurb{margin:16px 0 0; max-width:34ch; color:#A9BFD2}
.site-footer h4{color:#fff; font-family:var(--ds-font-sans); font-size:13px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; margin:0 0 14px}
.footer__col{display:grid; gap:6px}
.footer__col a{color:#fff; text-decoration:none}
.footer__col a:hover{color:var(--ds-green)}
.footer__col .mono{font-family:var(--ds-font-mono); font-size:14px}
.footer__col .hours{font-family:var(--ds-font-mono); font-size:13px; color:#A9BFD2}
.footer__links{display:grid; gap:8px}
.footer__links a{color:#C9D8E6; text-decoration:none}
.footer__links a:hover{color:#fff}
.footer__bottom{border-top:1px solid rgba(255,255,255,.14); margin-top:40px; padding-top:20px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:13px; color:#8FA9C0}
.footer__bottom span:last-child{max-width:62ch}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav__toggle{display:inline-flex}
  .utilbar__tag,.brand__sub{display:none}
  .nav__links{position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch;
    gap:0; background:#fff; border-top:1px solid var(--ds-border); box-shadow:var(--ds-shadow-lg);
    padding:8px 24px 20px; display:none}
  .nav__links.open{display:flex}
  .nav{position:relative}
  .nav__links a{padding:13px 2px; border-bottom:1px solid var(--ds-border)}
  .nav__links a[aria-current="page"]{border-bottom-color:var(--ds-border)}
  .nav__cta{margin-top:12px}
  .nav__cta a{display:block; text-align:center; padding:13px}
}
@media (max-width:560px){
  .utilbar__phones{font-size:11.5px; gap:10px}
  .footer__bottom{flex-direction:column}
  .btn{width:100%}
  .btn-row .btn{flex:1 1