/* ==========================================================================
   Mears Pharmacy & Morgan Drug — site stylesheet · 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 sticky CTA bar ---------- */
.mobile-cta{display:none}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .nav__links{gap:18px}
  .brand__sub{display:none}
}
@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{display:block; 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}
  body{padding-bottom:80px}
  .mobile-cta{display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:#fff; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--ds-border-strong); box-shadow:0 -6px 20px rgba(20,40,70,.10)}
  .mobile-cta .btn{flex:1 1 0; width:auto; min-height:48px}
  .nav__submenu{position:static; transform:none !important; opacity:1; visibility:visible; pointer-events:auto;
    box-shadow:none; border:none; background:transparent; padding:0 0 0 16px; min-width:0; display:block}
  .nav__submenu::before{display:none}
  .nav__submenu li a{padding:10px 0; font-size:15px; border-bottom:1px solid var(--ds-border) !important}
  .nav__dropdown-toggle::after{display:none}
  .pillgrid{grid-template-columns:64px repeat(7,1fr); gap:4px}
  .pillgrid__label{font-size:9.5px}
  .pillgrid__label small{font-size:8.5px}
  .chapter{padding:20px}
}
@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}
  .mobile-cta .btn{width:auto}
  .hero__media figcaption{display:none}
}

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