/* ==========================================================================
   Mears Pharmacy & Morgan Drug — site stylesheet · v19
   (v18 added the mobile app shell; v19 adds the phase-2 per-screen mobile
   compositions — see "MOBILE PHASE 2" at the foot of this file. The filename
   is load-bearing: _headers caches this file immutable for a year, so any
   edit must ship under a new version number or returning visitors keep the
   old one. Desktop >900px is unchanged from v17.)
   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.

   v17 changes from v15 (2026-07-11 redesign):
   - Type scale enlarged + documented (see --fs-* tokens).
   - WCAG 2.2 AA contrast fixes: --ds-text-faint darkened; green buttons now
     carry ink text (white-on-#6FAE4E was 2.7:1); --ds-ok-fg darkened for
     "Open now" text; warn/danger token families added (forms, 404).
   - New components: .status-chip (live open/closed), .pillcard v2 (domed
     blisters, day headers, taken state), .timeline2 (rule + nodes),
     .step__tag (WE DO THIS), .notice, .skip-link, .reviewed, .person--photo
     team cards, form error/success states, .err-404.
   - Focus-visible states universal; :active states on buttons.
   - Reveal-on-scroll (opt-in .reveal, requires html.has-js; reduced-motion
     safe; content always visible without JS).
   - Every v15 class kept — drop-in compatible with all 10 production pages.
   ========================================================================== */

: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:#66768A;
  /* Interactive + semantic */
  --ds-accent-soft:#F3F7FB; --ds-accent-border:#C8D6F7;
  --ds-focus-ring:0 0 0 3px rgba(16,96,160,.25);
  --ds-ok-bg:#EAF3E2; --ds-ok-fg:#3F7223; --ds-ok-border:#B6D89C; --ds-ok-dot:#6FAE4E;
  --ds-info-bg:#EEF5FF; --ds-info-fg:#1060A0; --ds-info-border:#C2D8F3; --ds-info-dot:#1A73C7;
  --ds-warn-bg:#FBF3DF; --ds-warn-fg:#7A5A12; --ds-warn-border:#E8D5A4; --ds-warn-dot:#C9971C;
  --ds-danger-bg:#FAEDEA; --ds-danger-fg:#9B3A22; --ds-danger-border:#EBC7BC; --ds-danger-dot:#C05B41;
  /* 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;
  /* Type scale (documented) */
  --fs-display-xl:clamp(40px,5.4vw,66px);  /* home H1 */
  --fs-display:clamp(34px,4.4vw,52px);     /* interior H1 */
  --fs-h2:clamp(28px,3.4vw,42px);
  --fs-h3:19px;
  --fs-lead:clamp(16.5px,1.65vw,19.5px);
  --fs-body:16px;
  --fs-small:14.5px;
  --fs-caption:13.5px;
  --fs-eyebrow:12.5px;
  /* 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:var(--fs-body); 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)}
a:hover{color:var(--ds-blue-bright)}
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-sans); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.01em}
:focus-visible{outline:none; box-shadow:var(--ds-focus-ring); border-radius:var(--ds-r-sm)}

/* Skip link (first focusable element on every page) */
.skip-link{position:absolute; left:16px; top:-48px; z-index:200; background:var(--ds-blue-deep); color:#fff;
  font-weight:600; font-size:14.5px; padding:12px 18px; border-radius:0 0 var(--ds-r-md) var(--ds-r-md);
  text-decoration:none; transition:top .15s ease}
.skip-link:focus-visible{top:0; color:#fff}

/* ---------- 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,96px) 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:var(--fs-eyebrow); font-weight:700; letter-spacing:.13em;
  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}
.eyebrow--green{color:var(--ds-ok-fg)}
.eyebrow--green::before{background:var(--ds-blue)}
.display{font-family:var(--font-serif); font-weight:600; line-height:1.06; letter-spacing:-.018em;
  font-size:var(--fs-display); text-wrap:balance; margin:0}
.display--xl{font-size:var(--fs-display-xl); line-height:1.04}
.display em{font-style:italic; color:var(--ds-blue)}
.h2{font-family:var(--font-serif); font-weight:600; line-height:1.12; letter-spacing:-.012em;
  font-size:var(--fs-h2); text-wrap:balance; margin:0}
.lead{font-size:var(--fs-lead); line-height:1.65; color:var(--ds-text-mute); text-wrap:pretty}
.section-head{max-width:660px; margin:0 auto 44px; text-align:center}
.section-head .lead{margin-top:12px}
.reviewed{font-size:13px; color:var(--ds-text-mute)}

/* ---------- 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:14px 24px; border-radius:var(--ds-r-md); border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap; min-height:48px;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{box-shadow:var(--ds-focus-ring), var(--ds-shadow)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55; cursor:not-allowed; transform:none}
.btn--primary{background:var(--ds-blue); color:#FFFFFF; box-shadow:var(--ds-shadow)}
.btn--primary:hover{background:var(--ds-blue-bright); color:#FFFFFF}
.btn--green{background:var(--ds-green); color:var(--ds-text)}
.btn--green:hover{background:#61A041; color:var(--ds-text)}
.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:var(--ds-text)}
.btn--onnavy:hover{background:#7FBC5F; color:var(--ds-text)}
.btn--sm{padding:10px 18px; font-size:14.5px; min-height:44px}
.btn-row{display:flex; flex-wrap:wrap; gap:12px}
.btn-row--center{justify-content:center}

/* ---------- Status chip (live open/closed; static hours always sit beside it) ---------- */
.status-chip{display:inline-flex; align-items:center; gap:7px;
  font-family:var(--ds-font-sans); font-variant-numeric:tabular-nums; font-size:12px; font-weight:700;
  letter-spacing:.01em; padding:4px 11px; border-radius:var(--ds-r-pill); white-space:nowrap;
  background:var(--ds-panel-alt); color:var(--ds-text-mute); border:1px solid var(--ds-border-strong)}
.status-chip::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ds-text-faint); flex-shrink:0}
.status-chip--open{background:var(--ds-ok-bg); color:var(--ds-ok-fg); border-color:var(--ds-ok-border)}
.status-chip--open::before{background:var(--ds-ok-dot)}
.status-chip--onnavy{background:rgba(255,255,255,.10); color:#DCE9F4; border-color:rgba(255,255,255,.22)}
.status-chip--onnavy.status-chip--open{color:#C4E3AE}
.status-chip--onnavy.status-chip--open::before{background:var(--ds-green)}
.status-chip:empty{display:none}

/* ---------- 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; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:4px 16px}
.utilbar__tag{font-size:12.5px; letter-spacing:.03em; color:rgba(255,255,255,.88); display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 10px}
.utilbar__phones{display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; font-family:var(--ds-font-sans);
  font-weight:600; font-variant-numeric:tabular-nums; font-size:12.5px}
.utilbar__phones a{color:#fff; text-decoration:none; white-space:nowrap}
.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{display:inline-block; font-size:15px; font-weight:600; text-decoration:none; color:var(--ds-text); white-space:nowrap;
  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:12px 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__cta a[aria-current="page"]{color:#fff; background:var(--ds-blue-bright); border-bottom-color:transparent}
.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)}

/* Locations dropdown */
.nav__dropdown{position:relative}
.nav__dropdown-toggle{position:relative; display:inline-block; white-space:nowrap; padding-right:17px}
.nav__dropdown-toggle::after{content:""; position:absolute; right:1px; top:calc(50% - 9px); width:7px; height:7px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg)}
.nav__submenu{position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(12px);
  background:#fff; border:1px solid var(--ds-border-strong); border-radius:var(--ds-r-md);
  box-shadow:var(--ds-shadow-lg); padding:8px 0; list-style:none !important; min-width:250px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease; z-index:100; margin:0}
.nav__submenu::before{content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  border-width:6px; border-style:solid; border-color:transparent transparent #fff transparent}
.nav__dropdown:hover .nav__submenu,
.nav__dropdown:focus-within .nav__submenu,
.nav__dropdown.open .nav__submenu{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(4px)}
.nav__submenu li{display:block; margin:0; padding:0; list-style:none !important}
.nav__submenu a{display:block; padding:11px 20px; font-size:14.5px; font-weight:600; color:var(--ds-text);
  border-bottom:none !important; text-decoration:none; transition:background .15s ease,color .15s ease; text-align:left}
.nav__submenu a:hover{background:var(--ds-panel-alt); color:var(--ds-blue) !important}
.nav__submenu a[aria-current="page"]{color:var(--ds-blue)}

/* ---------- 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,64px); align-items:center; padding:clamp(48px,6.5vw,96px) 0}
.hero__contacts{display:flex; flex-wrap:wrap; gap:14px 28px; margin-top:34px}
.hero__contact b{display:block; font-family:var(--font-serif); font-weight:600; font-size:16px; margin-bottom:2px}
.hero__contact a{font-family:var(--ds-font-sans); font-weight:600; font-variant-numeric:tabular-nums; font-size:15px;
  color:var(--ds-blue); text-decoration:none}
.hero__contact a:hover{color:var(--ds-blue-bright)}
.hero__contact .status-chip{margin-top:7px}
.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}
.hero__media figcaption{position:absolute; left:14px; bottom:0; z-index:2; background:#FFFFFF;
  border:1px solid var(--cream-line-2); border-radius:var(--ds-r-pill); box-shadow:var(--ds-shadow);
  font-size:12px; font-weight:600; color:var(--ds-text-mute); letter-spacing:.02em;
  padding:7px 14px; display:inline-flex; align-items:center; gap:7px}
.hero__media figcaption::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ds-green)}

/* ---------- 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}
.card__link{font-size:14px; font-weight:600; color:var(--ds-blue); text-decoration:none; display:inline-flex;
  align-items:center; gap:5px; margin-top:12px}
.card__link:hover{color:var(--ds-blue-bright); text-decoration:underline}

/* ---------- 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-ok-fg); 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-weight:600; font-variant-numeric:tabular-nums}
.loc-meta a:hover{color:var(--ds-blue)}
.loc-meta .mono{font-size:14px}
.loc-note{margin:16px 0 0; font-size:13.5px; color:var(--ds-text-mute)}

/* ---------- Dispill 7-day card mockup · v2 ---------- */
.pillcard__head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:14px}
.pillcard__title{font-family:var(--font-serif); font-weight:600; font-size:17px}
.pillcard__tag{font-family:var(--ds-font-mono); font-size:11.5px; color:var(--ds-text-mute);
  text-transform:uppercase; letter-spacing:.06em; white-space:nowrap}
.pillgrid{display:grid; grid-template-columns:84px repeat(7,1fr); gap:6px; align-items:stretch}
.pillgrid__corner{font-family:var(--ds-font-mono); font-size:10px; color:var(--ds-text-faint);
  text-transform:uppercase; letter-spacing:.08em; align-self:end; padding-bottom:2px}
.pillgrid__day{font-family:var(--ds-font-mono); font-size:10.5px; font-weight:600; color:var(--ds-text-mute);
  text-transform:uppercase; letter-spacing:.06em; text-align:center; align-self:end; padding-bottom:2px}
.pillgrid__label{font-family:var(--ds-font-mono); font-size:11px; color:var(--ds-text); font-weight:600;
  line-height:1.35; align-self:center}
.pillgrid__label small{display:block; font-size:10px; font-weight:400; color:var(--ds-text-faint); letter-spacing:.03em}
.pillgrid__rule{grid-column:1 / -1; border-top:1px dashed var(--cream-line-2); height:0; margin:2px 0}
.pillgrid__cell{aspect-ratio:1; border-radius:9px; display:grid; place-items:center; position:relative; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease}
.pillgrid__cell:hover{transform:translateY(-2px); box-shadow:var(--ds-shadow)}
.pillgrid__cell i{width:62%; height:62%; border-radius:50%; display:block; position:relative;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.45) 34%, rgba(255,255,255,0) 62%);
  box-shadow:inset 0 -2px 4px rgba(20,40,70,.10), inset 0 1px 2px rgba(255,255,255,.9), 0 1px 2px rgba(20,40,70,.08)}
.pillgrid__cell i::before,.pillgrid__cell i::after{content:""; position:absolute; border-radius:999px}
.pillgrid__cell i::before{width:38%; height:17%; left:22%; top:42%; transform:rotate(-24deg)}
.pillgrid__cell i::after{width:15%; height:15%; right:22%; bottom:26%}
.cell--m{background:var(--ds-info-bg); border:1px solid var(--ds-info-border)}
.cell--m i{background-color:#DBEAFB} .cell--m i::before{background:var(--ds-blue)} .cell--m i::after{background:var(--ds-green)}
.cell--n{background:var(--ds-ok-bg); border:1px solid var(--ds-ok-border)}
.cell--n i{background-color:#DFEDD2} .cell--n i::before{background:var(--ds-green-deep)} .cell--n i::after{background:#fff; box-shadow:0 0 0 1px rgba(20,40,70,.15)}
.cell--e{background:var(--ds-info-bg); border:1px solid var(--ds-info-border)}
.cell--e i{background-color:#DBEAFB} .cell--e i::before{background:var(--ds-blue-bright)} .cell--e i::after{background:#F0C24B}
.cell--b{background:var(--ds-row-alt); border:1px solid var(--ds-border-strong)}
.cell--b i{background-color:#E4EAF1} .cell--b i::before{background:var(--ds-blue-deep)} .cell--b i::after{display:none}
.cell--taken{background:transparent; border:1px dashed var(--cream-line-2)}
.cell--taken i{background:none; box-shadow:none}
.cell--taken i::before{width:44%; height:26%; left:28%; top:38%; transform:none; border-radius:0;
  background:none; border-left:2.5px solid var(--ds-green-deep); border-bottom:2.5px solid var(--ds-green-deep);
  transform:rotate(-45deg)}
.cell--taken i::after{display:none}
/* CSS tooltips (also keyboard-reachable: cells carry tabindex + aria-label) */
.pillgrid__cell::after{content:attr(data-tooltip); position:absolute; bottom:130%; left:50%;
  transform:translateX(-50%) translateY(4px); background:var(--ds-blue-deep); color:#fff; padding:6px 12px;
  border-radius:var(--ds-r-sm); font-size:12px; font-family:var(--ds-font-sans); font-weight:600; white-space:nowrap;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
  box-shadow:var(--ds-shadow-lg); z-index:10}
.pillgrid__cell::before{content:""; position:absolute; bottom:115%; left:50%; transform:translateX(-50%) translateY(4px);
  border-width:5px; border-style:solid; border-color:var(--ds-blue-deep) transparent transparent transparent;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s ease, transform .15s ease, visibility .15s ease; z-index:10}
.pillgrid__cell:hover::after,.pillgrid__cell:hover::before,
.pillgrid__cell:focus-visible::after,.pillgrid__cell:focus-visible::before{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.pillgrid__cell:focus-visible{box-shadow:var(--ds-focus-ring)}
.pillcard__foot{margin-top:16px; font-size:14px; color:var(--ds-text-mute); line-height:1.55;
  display:flex; align-items:center; gap:8px}
.pillcard__foot::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ds-green); flex-shrink:0}

/* ---------- 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-size:12.5px; font-weight:700; color:#8FB4D4;
  text-transform:uppercase; letter-spacing:.06em}

/* ---------- Timeline (v15 compact, kept) ---------- */
.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)}

/* ---------- Timeline v2 (rule + nodes) ---------- */
.timeline2{display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin:34px 0 30px; text-align:center}
.timeline2 span{position:relative; padding:20px 10px 0; border-top:2px solid var(--cream-line-2);
  font-size:13.5px; color:var(--ds-text-mute); line-height:1.4}
.timeline2 span::before{content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  width:12px; height:12px; border-radius:50%; background:var(--ds-green); border:3px solid var(--cream-soft);
  box-shadow:0 0 0 1px var(--cream-line-2)}
.timeline2 span:first-child::before,.timeline2 span:last-child::before{background:var(--ds-blue)}
.timeline2 b{display:block; font-family:var(--font-serif); font-variant-numeric:tabular-nums; font-weight:600;
  font-size:22px; color:var(--ds-blue-deep); margin-bottom:3px}
@media (max-width:700px){
  .timeline2{grid-template-columns:1fr; text-align:left; gap:0; max-width:340px; margin-left:auto; margin-right:auto}
  .timeline2 span{border-top:none; border-left:2px solid var(--cream-line-2); padding:0 0 22px 24px}
  .timeline2 span:last-child{padding-bottom:0}
  .timeline2 span::before{top:2px; left:-7px; transform:none}
}

/* ---------- Heritage chapters (Morgan page) ---------- */
.chapters{display:grid; gap:14px; margin-top:8px}
.chapter{display:grid; grid-template-columns:110px 1fr; gap:20px; background:var(--cream-soft);
  border:1px solid var(--cream-line); border-radius:var(--ds-r-lg); box-shadow:var(--ds-shadow); padding:24px 26px}
.chapter__year{font-family:var(--font-serif); font-variant-numeric:tabular-nums; font-weight:600;
  font-size:21px; color:var(--ds-blue-deep); line-height:1.25}
.chapter__year small{display:block; font-family:var(--ds-font-sans); font-size:11px; font-weight:600; color:var(--ds-text-faint);
  text-transform:uppercase; letter-spacing:.07em; margin-top:4px}
.chapter h3{font-size:20px; margin:0 0 6px}
.chapter p{color:var(--ds-text-mute); font-size:15.5px; line-height:1.65}
@media (max-width:600px){ .chapter{grid-template-columns:1fr; gap:8px} }

/* ---------- 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)}

/* ---------- Gift shop gallery ---------- */
.giftlead{position:relative; margin:0; padding:0 12px 12px 0}
.giftlead::before{content:""; position:absolute; top:20px; right:0; bottom:0; left:20px;
  border-radius:16px; background:#F0E8D8; border:1px solid var(--cream-line-2)}
.giftlead::after{content:""; position:absolute; top:-8px; right:34px; width:52px; height:3px; background:var(--ds-blue)}
.giftlead .tab{position:absolute; top:-8px; right:34px; width:18px; height:3px; background:var(--ds-green); z-index:2}
.giftlead img{position:relative; display:block; width:100%; height:auto; border-radius:16px; box-shadow:var(--ds-shadow-lg)}
.giftlead figcaption{position:absolute; left:12px; bottom:0; z-index:2; background:#fff;
  border:1px solid var(--cream-line-2); border-radius:var(--ds-r-pill); box-shadow:var(--ds-shadow);
  font-family:var(--ds-font-sans); font-size:12px; font-weight:600; color:var(--ds-blue-deep);
  padding:7px 14px; display:inline-flex; align-items:center; gap:7px}
.giftlead figcaption::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ds-green); flex-shrink:0}
.giftgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px}
.gifttile{position:relative; margin:0; border-radius:var(--ds-r-lg); overflow:hidden;
  border:1px solid var(--cream-line-2); box-shadow:var(--ds-shadow); background:#F0E8D8}
.gifttile img{display:block; width:100%; height:100%; aspect-ratio:4/5; object-fit:cover;
  transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.gifttile:hover img{transform:scale(1.045)}
.gifttile figcaption{position:absolute; left:0; right:0; bottom:0; padding:26px 14px 12px;
  font-family:var(--ds-font-sans); font-size:13px; font-weight:600; color:#fff; letter-spacing:.01em;
  background:linear-gradient(180deg, rgba(12,63,107,0) 0%, rgba(12,63,107,.74) 100%)}
@media (max-width:760px){
  .giftgrid{grid-template-columns:1fr 1fr; gap:12px}
  .gifttile:last-child{grid-column:1 / -1}
  .gifttile:last-child img{aspect-ratio:16/9}
}
.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); position:relative}
.step__num{width:38px; height:38px; border-radius:50%; background:var(--ds-info-bg); color:var(--ds-blue-deep);
  font-family:var(--font-serif); font-weight:600; font-size:17px; 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}
.step__tag{position:absolute; top:22px; right:22px; font-size:10.5px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px;
  border-radius:var(--ds-r-pill); background:var(--ds-panel-alt); color:var(--ds-text-mute);
  border:1px solid var(--ds-border-strong)}
.step__tag--us{background:var(--ds-ok-bg); color:var(--ds-ok-fg); border-color:var(--ds-ok-border)}
.step--us{border-color:var(--ds-ok-border); background:#FBFDF8}

/* ---------- 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;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%236FAE4E'/%3E%3Cpath d='M5.6 10.4l2.9 2.9 5.9-6.3' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}

/* ---------- 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); border-radius:50%}
.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}
/* v17: portrait-led team card (About) */
.person--photo{padding:0; overflow:hidden}
.person--photo .person__portrait{width:100%; aspect-ratio:1; object-fit:cover; border-radius:0}
.person--photo .person__body{padding:22px 24px 24px}
.person__loc{display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
  font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ds-text-mute); margin-top:6px}
.person__loc::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--ds-blue)}
.person__loc--green::before{background:var(--ds-green)}

/* ---------- 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)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--ds-danger-dot)}
.field__error{font-size:12.5px; color:var(--ds-danger-fg); display:flex; align-items:center; gap:6px}
.form-note{font-size:13px; color:var(--ds-text-mute); line-height:1.5; margin:2px 0 0}
.form-success{background:var(--ds-ok-bg); border:1px solid var(--ds-ok-border); color:var(--ds-ok-fg);
  border-radius:var(--ds-r-md); padding:14px 16px; font-size:14.5px; line-height:1.5}

/* ---------- Notice banner ---------- */
.notice{display:flex; gap:12px; align-items:flex-start; background:var(--ds-panel-alt);
  border:1px solid var(--ds-border-strong); border-left:3px solid var(--ds-blue);
  border-radius:var(--ds-r-md); padding:14px 16px; font-size:14px; line-height:1.55; color:var(--ds-text-mute)}
.notice strong{color:var(--ds-text)}
.notice--warn{background:var(--ds-warn-bg); border-color:var(--ds-warn-border); border-left-color:var(--ds-warn-dot); color:var(--ds-warn-fg)}
.notice--ok{background:var(--ds-ok-bg); border-color:var(--ds-ok-border); border-left-color:var(--ds-green); color:var(--ds-ok-fg)}

/* ---------- 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,76px); padding-bottom:clamp(40px,5vw,64px)}
.page-hero .lead{max-width:60ch; margin-top:6px}
.page-hero--green .eyebrow{color:var(--ds-ok-fg)}
.page-hero--green .eyebrow::before{background:var(--ds-blue)}

/* ---------- 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-sans); font-weight:600; font-size:14.5px}
.footer__col .hours{font-family:var(--ds-font-sans); 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:#A9BFD2}
.footer__bottom span:last-child{max-width:62ch}

/* ---------- FAQ accordion ---------- */
.faq-list{display:grid; gap:12px; max-width:760px; margin:0 auto}
.faq-item{background:var(--cream-soft); border:1px solid var(--cream-line); border-radius:var(--ds-r-lg); padding:2px 24px}
.faq-item summary{cursor:pointer; list-style:none; padding:18px 30px 18px 0; position:relative;
  font-family:var(--font-serif); font-weight:600; font-size:17px; color:var(--ds-text)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; position:absolute; right:2px; top:15px; font-size:22px; line-height:1;
  color:var(--ds-blue); font-family:var(--ds-font-sans); font-weight:400}
.faq-item[open] summary::after{content:"\2212"}
.faq-item summary:focus-visible{box-shadow:var(--ds-focus-ring); border-radius:var(--ds-r-sm)}
.faq-item p{margin:0; padding:0 0 20px; color:var(--ds-text-mute); font-size:15.5px; line-height:1.6}

/* ---------- 404 ---------- */
.err-404{font-family:var(--font-serif); font-variant-numeric:tabular-nums; font-weight:600;
  font-size:clamp(72px,12vw,140px); line-height:1; color:var(--ds-blue-deep); letter-spacing:-.02em}
.err-404 span{color:var(--ds-green)}

/* ---------- Reveal on scroll (progressive enhancement; no-JS = visible) ---------- */
html.has-js .reveal{opacity:0; transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.2,.6,.2,1), transform .55s cubic-bezier(.2,.6,.2,1)}
html.has-js .reveal.in-view{opacity:1; transform:none}

/* ==========================================================================
   MOBILE APP SHELL · v18
   A phone-first shell that replaces the old two-button .mobile-cta bar:
   a header "my store" chip with live open/closed status, a five-slot bottom
   action dock with the Call button always under the thumb, and two bottom
   sheets (menu + store picker). Everything here is scoped to the ≤900px
   breakpoint — desktop is byte-for-byte the v17 design.

   Progressive enhancement: the dock is five real links, and the menu sheet
   renders as an ordinary link list when JavaScript is unavailable (the dock's
   Menu slot is then just an in-page anchor to it). Only the store chip and
   store-picker sheet are html.has-js gated, because remembering a store is
   the one thing that genuinely needs script.
   ========================================================================== */
:root{ --ds-panel-green:#F2F7EE }

@keyframes mears-fade{from{opacity:0} to{opacity:1}}
@keyframes mears-sheet-up{from{transform:translateY(100%)} to{transform:translateY(0)}}
@keyframes mears-toast{from{opacity:0; transform:translate(-50%,8px)} to{opacity:1; transform:translate(-50%,0)}}
@keyframes mears-pulse{
  0%{box-shadow:0 0 0 0 rgba(111,174,78,.5)}
  70%{box-shadow:0 0 0 6px rgba(111,174,78,0)}
  100%{box-shadow:0 0 0 0 rgba(111,174,78,0)}
}

/* The shell is mobile-only: nothing below renders above 900px. */
.storechip,.dock,.sheet,.toast{display:none}

/* Tabular numerals for phone numbers, hours and years inside the shell.
   (.mono is the site's existing sans-with-tabular-figures treatment; the
   mobile shell uses the real mono face, per the design system.) */
.numeral{font-family:var(--ds-font-mono); font-variant-numeric:tabular-nums}

/* Live status dot, shared by the header chip and the store-picker rows.
   Neutral until the clock has been read, so it can never flash a wrong colour. */
.storedot{width:7px; height:7px; border-radius:50%; background:var(--ds-border-strong); flex-shrink:0}
.storedot.is-open{background:var(--ds-ok-dot); animation:mears-pulse 2s ease-out infinite}
.storedot.is-closed{background:var(--ds-danger-dot)}
.storedot--lg{width:10px; height:10px}

/* Screen-reader-only label text (used by the store chip) */
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .nav__links{gap:18px}
  .brand__sub{display:none}
}
@media (max-width:900px){
  /* ---- Header: logo + store chip. The old utility bar and hamburger are
     retired on mobile — every link they held lives in the menu sheet, which
     the dock opens (and which is a plain list without JS). ---- */
  .utilbar,.nav__toggle,.nav__links{display:none}
  .nav{position:relative; padding:8px 14px; gap:10px}
  .brand{gap:8px}
  .brand img{height:26px !important; width:auto}
  .brand__sub{display:block; border-left:none; padding-left:0}
  .brand__name{font-size:10.5px; letter-spacing:.02em; text-transform:none; color:var(--ds-text)}
  .brand__loc{font-size:9.5px; color:var(--ds-text-faint)}
  .tabrule > i{width:34px}

  html.has-js .storechip{position:relative; display:inline-flex; align-items:center; gap:6px;
    background:var(--ds-panel-alt); border:1px solid var(--ds-accent-border); border-radius:var(--ds-r-pill);
    padding:7px 11px; cursor:pointer; font-family:var(--ds-font-sans); flex-shrink:0;
    transition:transform .12s ease}
  .storechip:active{transform:scale(.97)}
  /* The pill is 32px by design; this keeps the *tap* target at 44px. */
  .storechip::after{content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%)}
  .storechip__town{font-size:11.5px; font-weight:700; color:var(--ds-text); white-space:nowrap}
  .storechip__status{font-family:var(--ds-font-mono); font-size:11px; color:var(--ds-text-mute); white-space:nowrap}
  .storechip svg{flex-shrink:0}

  /* ---- Bottom action dock ---- */
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  .dock{display:flex; align-items:stretch; position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-top:1px solid var(--ds-border-strong);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  .dock__item{flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:6px 0; min-height:44px; background:none; border:none; cursor:pointer; text-decoration:none;
    font-family:var(--ds-font-sans); font-size:10px; font-weight:700; line-height:1.2;
    color:var(--ds-text-mute); transition:transform .12s ease, color .15s ease}
  .dock__item:active{transform:scale(.97)}
  .dock__item:hover{color:var(--ds-blue)}
  .dock__item[aria-current="page"]{color:var(--ds-blue)}
  .dock__item svg{flex-shrink:0}
  .dock__item--call{color:var(--ds-green-deep)}
  .dock__item--call:hover{color:var(--ds-green-deep)}
  .dock__fab{width:34px; height:34px; margin-top:-14px; flex-shrink:0; border-radius:50%;
    background:var(--ds-green); color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:var(--ds-shadow-lg)}

  /* ---- Bottom sheets ---- */
  html.sheet-open,html.sheet-open body{overflow:hidden}
  .sheet{position:fixed; inset:0; z-index:90; flex-direction:column; justify-content:flex-end}
  html.has-js .sheet.sheet--open{display:flex}
  .sheet__scrim{position:absolute; inset:0; background:rgba(9,38,60,.5); animation:mears-fade .18s ease;
    border:none; padding:0; cursor:pointer}
  .sheet__panel{position:relative; background:#fff; border-radius:20px 20px 0 0; outline:none;
    padding:14px 18px calc(30px + env(safe-area-inset-bottom)); max-height:82vh; overflow-y:auto;
    animation:mears-sheet-up .24s cubic-bezier(.32,.72,.35,1)}
  .sheet--menu .sheet__panel{max-height:78vh}
  .sheet__grab{width:36px; height:4px; border-radius:99px; background:var(--ds-border-strong); margin:0 auto 14px}
  .sheet__head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
  .sheet__title{font-family:var(--ds-font-sans); font-size:15px; font-weight:800; color:var(--ds-text)}
  .sheet__close{width:30px; height:30px; flex-shrink:0; border:none; border-radius:50%; cursor:pointer;
    background:var(--ds-row-alt); color:var(--ds-text-mute); font-size:14px; line-height:1}
  .sheet__lede{margin:0 0 14px; font-size:12.5px; line-height:1.5; color:var(--ds-text-mute)}
  .sheet h2{font-family:var(--ds-font-sans); font-size:16px; font-weight:800; letter-spacing:0; margin:0 0 4px}
  .sheet__foot{margin:12px 0 0; text-align:center; font-family:var(--ds-font-mono); font-size:11.5px;
    color:var(--ds-text-faint)}

  .sheetnav{display:flex; flex-direction:column}
  .sheetnav a{display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:48px;
    padding:12px 2px; border-bottom:1px solid var(--ds-border); text-decoration:none;
    font-family:var(--ds-font-sans); font-size:15px; font-weight:600; color:var(--ds-text)}
  .sheetnav a:last-child{border-bottom:none}
  .sheetnav a:hover{color:var(--ds-blue)}
  .sheetnav small{display:block; font-size:11.5px; font-weight:400; color:var(--ds-text-faint); margin-top:1px}
  .sheetnav i{font-style:normal; color:var(--ds-text-faint); flex-shrink:0}

  .sheetcalls{display:flex; gap:8px; margin-top:8px}
  .sheetcalls a{flex:1 1 0; min-height:48px; text-align:center; border-radius:11px; padding:12px 6px;
    text-decoration:none; font-family:var(--ds-font-sans); font-size:12px; font-weight:700; line-height:1.4}
  .sheetcalls a .numeral{display:block; font-weight:600}
  .sheetcalls .is-farmington{background:var(--ds-accent-soft); color:var(--ds-blue)}
  .sheetcalls .is-morgan{background:var(--ds-panel-green); color:var(--ds-green-deep)}

  .storepick{width:100%; display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer;
    background:#fff; border:2px solid var(--ds-border); border-radius:14px; padding:14px; margin-bottom:10px;
    font-family:var(--ds-font-sans); transition:transform .12s ease, border-color .15s ease}
  .storepick:last-of-type{margin-bottom:0}
  .storepick:active{transform:scale(.97)}
  .storepick.is-mystore{border-color:var(--ds-blue)}
  .storepick__body{flex:1}
  .storepick__name{display:block; font-size:14.5px; font-weight:700; color:var(--ds-text)}
  .storepick__meta{display:block; font-size:12px; color:var(--ds-text-mute)}

  /* ---- Toast ---- */
  html.has-js .toast:not([hidden]){display:block; position:fixed; left:50%;
    bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:95;
    background:var(--ds-blue-deep); color:#fff; border-radius:var(--ds-r-pill); padding:10px 18px;
    font-family:var(--ds-font-sans); font-size:12.5px; font-weight:600; white-space:nowrap;
    box-shadow:var(--ds-shadow-lg); animation:mears-toast .22s ease}

  /* ---- No-JS: the menu sheet becomes a plain navigation block ---- */
  html:not(.has-js) .storechip,html:not(.has-js) .sheet--store{display:none}
  html:not(.has-js) .sheet--menu{display:block; position:static; background:var(--ds-panel-alt);
    border-top:1px solid var(--ds-border)}
  html:not(.has-js) .sheet--menu .sheet__scrim,
  html:not(.has-js) .sheet--menu .sheet__grab,
  html:not(.has-js) .sheet--menu .sheet__close{display:none}
  html:not(.has-js) .sheet--menu .sheet__panel{max-height:none; overflow:visible; animation:none;
    border-radius:0; padding:24px}

  /* ---- Page-level mobile treatment ---- */
  .btn:active{transform:scale(.97)}
  .section{padding:28px 0}
  .section--sm{padding:24px 0}
  .wrap{padding:0 18px}
  .page-hero .wrap{padding-top:26px; padding-bottom:24px}
  .hero__grid{padding:26px 0; gap:24px}
  /* The selected store's card/button leads on mobile. The picker's own two
     rows are excluded — reordering the list you are choosing from is
     disorienting, and their selected state is already the blue border. */
  .is-mystore:not(.storepick){order:-1}
  .loc-card.is-mystore{border-color:var(--ds-accent-border); box-shadow:var(--ds-shadow-lg)}

  .pillgrid{grid-template-columns:64px repeat(7,1fr); gap:4px}
  .pillgrid__label{font-size:9.5px}
  .pillgrid__label small{font-size:8.5px}
  /* Pre-existing mobile defect, fixed here: the Dispill cells' hover tooltips
     are absolutely-positioned white-space:nowrap pseudo-elements. Hidden with
     visibility they still take part in layout, which let the home and services
     pages scroll 47px sideways on a phone. Hover tooltips are meaningless on
     touch anyway, and each cell keeps its own aria-label for screen readers. */
  .pillgrid__cell::after,.pillgrid__cell::before{content:none}
  .chapter{padding:20px}
}
/* ---------- Phone widths (320–430px is the design target) ---------- */
@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 auto}

  /* Type: the desktop scale bottoms out too large on a phone. */
  .display{font-size:27px; line-height:1.12}
  .display--xl{font-size:31px; line-height:1.1}
  .h2{font-size:21px; line-height:1.2}
  .lead{font-size:15px; line-height:1.55}
  .eyebrow{font-size:10.5px; letter-spacing:.11em; margin-bottom:10px}
  .section-head{margin-bottom:24px}

  /* The caption pill is part of the hero composition on mobile, not clutter. */
  .hero__media figcaption{display:inline-flex; font-size:11px; padding:6px 12px}

  /* Cards and panels tighten up */
  .card,.loc-card,.step,.person{padding:18px}
  .panel,.panel--lg{padding:20px}
  .loc-card h3{font-size:22px}
  .card h3{font-size:17px}
  .grid,.grid--2,.steps,.team{gap:14px}

  /* "What we do" reads as a 2-up icon grid, the way a phone app would show it. */
  .grid--services{grid-template-columns:1fr 1fr; gap:12px}
  .grid--services .card{padding:16px 14px}
  .grid--services .card__icon{width:36px; height:36px; margin-bottom:10px}
  .grid--services .card h3{font-size:15px; line-height:1.25}
  .grid--services .card p{font-size:13px; line-height:1.45}

  /* Horizontal rails: trust marks and the gift-shop photos scroll sideways
     instead of stacking into a very long column.
     NOTE: .trust__inner IS the .wrap element (not a child of one), so it gets
     padding only — adding the usual negative bleed margins here pushed it
     36px wider than the viewport and scrolled the whole page sideways. */
  .trust__inner{flex-wrap:nowrap; justify-content:flex-start; gap:10px; padding:18px;
    overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none}
  .trust__inner::-webkit-scrollbar,.giftgrid::-webkit-scrollbar{display:none}
  .trust__item{flex-shrink:0; gap:7px; font-size:13px; background:var(--ds-panel-alt);
    border:1px solid var(--ds-border-strong); border-radius:var(--ds-r-pill); padding:8px 13px}

  /* .giftgrid is a child of .wrap, so it bleeds to the screen edges. */
  .giftgrid{display:flex; grid-template-columns:none; gap:12px; overflow-x:auto; scrollbar-width:none;
    -ms-overflow-style:none; padding:0 18px; margin:26px -18px 0}
  .gifttile{flex:0 0 150px}
  .gifttile:last-child{grid-column:auto}
  .gifttile img,.gifttile:last-child img{aspect-ratio:3/4; height:200px; width:150px}

  /* Phone numbers, hours and years get real tabular mono figures. */
  .loc-meta .mono,.footer__col .mono,.pillcard__tag{font-family:var(--ds-font-mono)}
  .timeline2 b,.chapter__year{font-family:var(--ds-font-mono); font-size:19px; letter-spacing:-.02em}
}

/* Status text formatting (v15 compat) */
.status-indicator{font-weight:700; font-size:12px; transition:color .2s ease}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important}
  html.has-js .reveal{opacity:1; transform:none}
}

/* ==========================================================================
   MOBILE PHASE 2 · per-screen compositions (Refill / Transfer / About)
   Phase 1 gave every page the app shell (chip + dock + sheets). Phase 2
   rebuilds the three highest-value screens *inside* that shell:
     Refill   — a Farmington/Morgan segmented control + three option cards
     Transfer — three horizontal numbered step cards + one store-aware CTA
     About    — four pharmacist accordions instead of four tall photo cards
   Desktop (>900px) is untouched. Two mechanisms guarantee that:
     1. every rule that *changes* an existing element lives inside a
        max-width media query;
     2. every rule outside one only either (a) sets display:none on markup
        that exists solely for the phone, or (b) restates, as a class, a
        value that was previously an inline style on the same element —
        so the computed desktop value is unchanged but a media query can
        now reach it (inline styles beat media queries; that is why the
        inline styles had to go).
   ORDERING NOTE: this section is appended after the existing ≤560 block, so
   at 390px an equal-specificity rule here beats one up there. Rules that
   must win are still written with the specificity to win on their own.
   ========================================================================== */

/* (a) Phone-only markup — invisible until the ≤900px block turns it on.
   Same pattern as the v18 shell's `.storechip,.dock,.sheet,.toast`. */
.seg,.optcard__tag,.optcard__hint,.infobanner,.mcta,.person__toggle{display:none}

/* (b) De-inlined values. Each of these replaces an identical inline style on
   the same element, so desktop computes exactly what it did before. */
.hours-line{font-size:14px}                 /* was inline on refill.html */
.card.optcard h3{font-size:20px}            /* was inline on both option cards */
.optcard__note{font-size:14.5px}            /* was inline under the Rx365 buttons */

@media (max-width:900px){
  /* ---------- Utility ---------- */
  /* Desktop-only markup that the phone composition replaces. */
  .hide-mobile{display:none}

  /* ---------- Store segmented control (Refill hero) ----------
     No second store mechanism: the buttons carry data-store-pick (site.js
     sets the store) and data-store-for (site.js reflects it via .is-mystore
     and aria-pressed). */
  /* html.has-store, NOT html.has-js: has-js is set on the first line of the
     script, so it would still be there if a later line threw — leaving a
     visible switch that does nothing. has-store is added only after the store
     data is applied AND the pick handlers are bound. An inert switch is worse
     than no switch; without it the page falls back to showing both stores. */
  html.has-store .seg{display:flex; margin-top:16px; padding:4px; background:var(--ds-panel);
    border:1px solid var(--ds-border-strong); border-radius:12px}
  .seg__btn{flex:1 1 0; min-height:44px; padding:10px 8px; border:none; border-radius:9px;
    background:transparent; color:var(--ds-text); cursor:pointer;
    font-family:var(--ds-font-sans); font-size:13px; font-weight:700; line-height:1.2;
    transition:background .15s ease, color .15s ease, transform .12s ease}
  /* `.is-mystore:not(.storepick){order:-1}` (the ≤900 rule that floats the
     selected store's card to the top of a list) must not reach a fixed
     Farmington|Morgan pair — picking Morgan would swap the two buttons under
     the user's thumb. 0-2-0 beats it without editing that rule. */
  .seg .seg__btn{order:0}
  .seg .seg__btn.is-mystore{background:var(--ds-blue); color:#FFFFFF}
  .seg__btn:active{transform:scale(.97)}

  /* ---------- Phone-only store CTA (Transfer hero, Refill directions) ----------
     Exists because the design's copy is store-aware ("Call Mears Pharmacy to
     start", "Directions to Morgan Drug") and the desktop buttons are not. */
  .mcta{display:inline-flex; align-items:center; justify-content:center; gap:8px;
    width:100%; min-height:48px; margin-top:16px; padding:14px; border-radius:11px;
    background:var(--ds-blue); color:#FFFFFF; border:1px solid transparent;
    box-shadow:var(--ds-shadow); text-decoration:none;
    font-family:var(--ds-font-sans); font-size:14.5px; font-weight:700; line-height:1.2;
    transition:transform .12s ease}
  .mcta:hover{color:#FFFFFF}
  .mcta:active{transform:scale(.97)}
  .mcta svg{flex-shrink:0}
  /* The base :focus-visible rule (line 77) is a single pseudo-class, so any
     later single-class box-shadow silently replaces the focus ring. .btn
     already works around this at line 125; .mcta needs the same. */
  .mcta:focus-visible{box-shadow:var(--ds-focus-ring), var(--ds-shadow)}
  .mcta--ghost{background:var(--ds-panel); color:var(--ds-blue); border-color:var(--ds-accent-border);
    box-shadow:none; padding:13px; font-size:14px}
  .mcta--ghost:hover{color:var(--ds-blue)}
  /* Green call button. Ink text, not the prototype's white: white on
     --ds-green is 2.7:1, which v17 deliberately fixed site-wide. */
  .mcta--green{background:var(--ds-green); color:var(--ds-text); box-shadow:none; padding:13px;
    font-size:14px}
  .mcta--green:hover{color:var(--ds-text)}
  /* Declared after both variants so their box-shadow:none cannot win the tie. */
  .mcta--ghost:focus-visible,.mcta--green:focus-visible{box-shadow:var(--ds-focus-ring)}

  /* ---------- REFILL ----------
     The page reads as one continuous stack of option cards, so the section
     bands that separate them on desktop are flattened here. Scoped to
     `.page-refill` (a class on <main>, which has no CSS of its own). */
  .page-refill .optstack{padding:0}
  .page-refill .optstack > .wrap{padding-top:6px; padding-bottom:6px}
  .page-refill .optstack--top > .wrap{padding-top:22px}
  .page-refill .optstack.section--cream{background:var(--ds-panel);
    border-top-color:transparent; border-bottom-color:transparent}
  .page-refill .grid--2{gap:12px}

  .optcard{padding:18px; background:var(--ds-panel); border:1px solid var(--ds-border);
    border-radius:var(--ds-r-lg); box-shadow:var(--ds-shadow); position:relative}
  .optcard--lead{border:2px solid var(--ds-blue); box-shadow:var(--ds-shadow-lg)}
  /* Floating "OPTION 1 · FASTEST" tag; replaces the desktop eyebrow. */
  .optcard__tag{display:inline-block; position:absolute; top:-10px; left:14px;
    padding:4px 10px; border-radius:var(--ds-r-pill);
    background:var(--ds-blue); color:#FFFFFF; font-family:var(--ds-font-sans);
    font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    white-space:nowrap}
  .optcard--lead .eyebrow{display:none}
  /* margin-top clears the floating tag, which overlaps the card's top edge by
     10px. Without it the heading sits 4px under the pill instead of ~13. */
  .optcard--lead .h2{margin-top:8px; font-size:18px}
  .optcard .lead{font-size:13.5px; line-height:1.55}
  .optcard .list-check{gap:8px; margin-top:12px}
  .optcard .list-check li{font-size:13.5px; line-height:1.5; padding-left:26px}
  .optcard .list-check li::before{width:16px; height:16px; top:2px}
  .card.optcard h3{font-size:16px}
  .optcard p{font-size:13.5px; line-height:1.55}
  /* 0-2-0: `.optcard p` above is 0-1-1 and would otherwise win on the note. */
  .optcard .optcard__note{margin-top:10px; font-size:11.5px; line-height:1.5; color:var(--ds-text-faint)}
  .optcard .optcard__hint{display:block; margin-top:8px; font-size:11.5px; line-height:1.5;
    color:var(--ds-text-faint)}
  .optcard .mcta{margin-top:12px}

  /* One store, not two. The remembered store's button is the only one shown;
     the other stays in the markup for desktop and for no-JS.
     The gate is load-bearing: .is-mystore is applied BY the script, so without
     it neither button would match and Option 1 would lose its only call to
     action. Ungated, this rule hides both — and html.has-js would not be
     enough, because it is set before the code that applies .is-mystore runs. */
  .btn-row--store{margin-top:12px}
  html.has-store .btn-row--store .btn:not(.is-mystore){display:none}
  /* 14.5px/700 is the prototype's value, and it also stops the lead CTA
     sitting in a different type family from the two .mcta buttons below it on
     the same screen. 0-2-0, so it beats .btn (0-1-0) without touching it. */
  .btn-row--store .btn{width:100%; border-radius:11px; min-height:48px;
    font-size:14.5px; font-weight:700}
  /* Phone number in tabular mono. `.numeral` is deliberately NOT reused here:
     it is declared at base level and would go mono on desktop too. */
  .optnum{font-family:var(--ds-font-mono); font-variant-numeric:tabular-nums; font-weight:600}

  .infobanner{display:block; margin-top:12px; padding:13px 14px; border-radius:12px;
    background:var(--ds-info-bg); border:1px solid var(--ds-info-border);
    color:var(--ds-info-fg); font-size:12.5px; line-height:1.55}
  .hours-line{margin-top:14px; font-family:var(--ds-font-mono); font-variant-numeric:tabular-nums;
    font-size:12px; color:var(--ds-text-faint)}

  /* ---------- TRANSFER ----------
     .step / .step__num / .step__tag / .step__tag--us already exist; only the
     phone layout differs, so this restyles them rather than rebuilding. */
  .wrap .steps{gap:10px}
  .steps .step{display:flex; align-items:flex-start; gap:12px; padding:14px;
    background:var(--ds-panel); border-color:var(--ds-border)}
  .steps .step__num{flex:none; width:34px; height:34px; margin-bottom:0;
    font-family:var(--ds-font-mono); font-size:15px; font-weight:700;
    background:var(--ds-accent-soft); color:var(--ds-blue)}
  /* --ds-ok-fg, not the prototype's --ds-green-deep: #4E8A30 on --ds-panel-green
     is 3.86:1 and this is 15px/700 (not WCAG "large"). --ds-ok-fg is 5.30:1. */
  .steps .step--us .step__num{background:var(--ds-panel-green); color:var(--ds-ok-fg)}
  .step__body{flex:1; min-width:0}
  /* The tag stops being a corner badge and becomes an inline pill above the
     heading — blue for "You do this", green for "We do this". */
  .steps .step__tag{position:static; display:inline-block; margin-bottom:4px;
    padding:2px 8px; font-size:9.5px; letter-spacing:.07em;
    background:var(--ds-accent-soft); color:var(--ds-blue); border-color:transparent}
  .steps .step__tag--us{background:var(--ds-panel-green); color:var(--ds-ok-fg);
    border-color:transparent}
  .steps .step h3{font-size:14.5px; margin-bottom:3px}
  .steps .step p{font-size:13px; line-height:1.5}

  /* ---------- ABOUT · pharmacist accordions ----------
     The card keeps its markup; only the phone turns it into a disclosure.
     `.person__body` becomes display:contents so its three <p> children join
     the card's own grid — that is what lets the bio span the full width
     underneath the portrait instead of being indented beside it. */
  .person--acc{display:grid; grid-template-columns:52px 1fr 22px;
    align-items:center; column-gap:12px; padding:13px 14px; position:relative;
    background:var(--ds-panel); border-color:var(--ds-border); border-radius:var(--ds-r-lg)}
  .person--acc .person__portrait{grid-column:1; grid-row:1 / 3;
    width:52px; height:52px; border-radius:50%; object-fit:cover}
  .person--acc .person__body{display:contents}
  /* 0-2-0 — it has to outrank `.person p{font-size:15px;color:…}` (0-1-1),
     which is what actually renders these names on desktop today.
     Serif/600 is inherited from `.person__name`, NOT the prototype's sans/700:
     this is a card row title, and the phone renders every other one — the
     Transfer step headings, the Refill option headings — in the site's serif.
     Only the size and ink are overridden. */
  .person--acc .person__name{grid-column:2; grid-row:1; font-size:14.5px; color:var(--ds-text)}
  .person--acc .person__title{grid-column:2; grid-row:2; font-size:12px}
  /* The bio is collapsed by the script setting hidden="until-found", not by a
     CSS rule — that keeps the text findable by find-in-page. Its top spacing
     therefore has to be applied only while open, or the hidden row would still
     take up 10px. */
  .person--acc .person__bio{grid-column:1 / -1; grid-row:3;
    margin-top:0; font-size:13px; line-height:1.55}
  .person--acc.is-open .person__bio{padding-top:10px}
  /* The whole header row is the button: it spans both header rows and sits
     above them, so a tap anywhere on the row toggles.
     `.is-acc` is added by the script AT THE MOMENT it binds the click handler
     (not `html.has-js`, which is set on line 1 of the script and would still
     be there if a later line threw — that would hide every bio with nothing
     left to reopen it). Both the button and the collapse therefore fail OPEN:
     no script, no handler, no disclosure — just the bios, as today. */
  .person--acc.is-acc .person__toggle{display:flex; align-items:center; justify-content:flex-end;
    grid-column:1 / -1; grid-row:1 / 3; z-index:1; min-height:52px;
    margin:0; padding:0; border:none; background:none; cursor:pointer; color:var(--ds-blue)}
  .person--acc .person__chev{flex:none; transition:transform .2s ease}
  .person--acc.is-open .person__chev{transform:rotate(180deg)}
}

/* Above the phone breakpoint these are ordinary team cards, and no bio may be
   hidden — not even by the hidden="until-found" attribute the phone accordion
   sets on it. CSS owns the breakpoint; the script only owns open/closed.
   Without this the desktop layout depends on a matchMedia "change" event
   firing, and a missed event silently blanks four pharmacist bios. Matches
   nothing on a normal desktop load, where no bio carries the attribute. */
@media (min-width:901px){
  .person--acc .person__bio[hidden]{display:block; content-visibility:visible}
}

@media (max-width:560px){
  /* Phone widths. Nothing here may restate a value the ≤900px block above
     already sets at equal specificity — this block is LATER, so it would win
     and silently defeat it (that is how the option stack lost its 22px top
     padding, and with it the clearance for the floating OPTION 1 tag). */
  .optcard--lead .h2{font-size:18px}
  /* The two card stacks this release builds — Transfer's steps and About's
     accordions — read as one rhythm rather than 10px and 14px. Must live in
     the ≤560 block: `.grid,.grid--2,.steps,.team{gap:14px}` is up there too,
     and above 560px .team is still a multi-column grid that wants its 20px. */
  .steps,.team{gap:10px}
}