@charset "utf-8";
/* ==========================================================================
   River Road Pharmacy — design system
   Type and section rhythm carry over from the template this site was built
   from; the palette is River Road's own. See the token block below.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */

/* TikTok Sans — the typeface the previous site used, self-hosted as a variable woff2
   (SIL Open Font License 1.1; see assets/fonts/OFL.txt). One file covers weights 300–900,
   replacing the three 200 kB static TTFs the old export shipped. */
@font-face {
  font-family: 'TikTok Sans';
  src: url('/assets/fonts/TikTokSans-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'TikTok Sans';
  src: url('/assets/fonts/TikTokSans-latin-ext.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- tokens */

:root {
  /* Brand — a river teal against a cool off-white, replacing the amber-and-olive palette this
     template arrived with. `--brand` is a *light* colour that carries `--ink` text: it is the
     button fill, the footer ground and the icon-hover fill, so a dark replacement here would
     invert half a dozen contrast pairs. Every pair below is verified at WCAG AA. */
  --brand: #3fbfc4;
  --brand-600: #2aa6ac;      /* button hover — 5.7:1 with --ink */
  --brand-700: #0f6e73;      /* brand as text/border on light grounds — 5.6:1 on cream */
  --brand-100: #cdeff0;
  --brand-050: #e9f8f8;
  --accent: #2e9296;         /* icon and card outlines — 3.5:1 on cream, UI-only */
  --accent-ink: #116b70;     /* eyebrow text — 5.8:1 on cream */
  --ink: #17201f;
  --ink-700: #1c4442;        /* heading colour — 10:1 on cream */
  --ink-900: #0f1817;
  --muted: #5f6b69;
  --muted-2: #616e6c;        /* 5.0:1 on cream; the amber palette's equivalent was 3.8:1 */
  --cream: #f3f8f7;
  --cream-2: #fbfdfd;
  --sand: #edf5f4;
  --white: #fff;
  --teal: #14607f;           /* focus rings and inline links — deliberately bluer than --brand */
  --mint: #b3f796;

  --line: rgb(23 32 31 / 10%);
  --line-soft: rgb(23 32 31 / 6%);
  --line-strong: rgb(23 32 31 / 18%);

  /* type */
  --font: 'TikTok Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --step-2: clamp(1.25rem, 1.13rem + 0.55vw, 1.625rem);
  --step-3: clamp(1.5rem, 1.24rem + 1.15vw, 2.25rem);
  --step-4: clamp(1.9rem, 1.42rem + 2.15vw, 3.35rem);
  --step-5: clamp(2.25rem, 1.62rem + 2.8vw, 4rem);

  /* space */
  --gap: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  --gap-lg: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  --section-y: clamp(3.5rem, 2.4rem + 4.4vw, 7rem);
  --pad-x: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);

  /* structure */
  /* Every section shares one content width — the hero and footer used to be wider (1420px) than
     the rest (1200px), which read as a mismatched margin once the viewport passed ~1420px. */
  --container: 1420px;
  --container-narrow: 880px;
  --header-h: 76px;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(23 32 31 / 5%), 0 2px 8px -2px rgb(23 32 31 / 6%);
  --shadow-md: 0 2px 4px rgb(23 32 31 / 4%), 0 14px 30px -10px rgb(23 32 31 / 14%);
  --shadow-lg: 0 8px 20px -8px rgb(23 32 31 / 12%), 0 36px 64px -24px rgb(23 32 31 / 26%);
  --shadow-brand: 0 12px 28px -12px rgb(15 110 115 / 42%);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.42s;

  --z-header: 60;
  --z-jumpbar: 50;
  --z-drawer: 80;
  --z-modal: 90;

  color-scheme: light;
}

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--cream-2);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--ink-700);
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: rgb(23 32 31 / 30%); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: currentcolor; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--brand); color: var(--ink); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  inset-inline-start: 1rem;
  inset-block-start: -100px;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  transition: inset-block-start 0.2s var(--ease);
}
.skip-link:focus { inset-block-start: 1rem; }

/* ------------------------------------------------------------- structure */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--flush { padding-block: 0 var(--section-y); }
.section--white { background: var(--white); }
.section--cream { background: var(--cream); }
.section--cream-2 { background: var(--cream-2); }
.section--sand { background: var(--sand); }

.eyebrow {
  margin: 0 0 0.85rem;
  color: var(--accent-ink);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}

.section-head { margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem); max-width: 44rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-lg);
  align-items: flex-end;
  justify-content: space-between;
  max-width: none;
}
.section-head--split > div { max-width: 40rem; }
.section-head__title { font-size: var(--step-4); }
.section-head__lede {
  margin-top: 1rem;
  color: var(--muted);
  font-size: var(--step-1);
  line-height: 1.65;
  max-width: 38rem;
}
.section-head--center .section-head__lede { margin-inline: auto; }



/* --------------------------------------------------------------- buttons */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--white);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.24s var(--ease), background-color 0.24s var(--ease),
    color 0.24s var(--ease), border-color 0.24s var(--ease), box-shadow 0.24s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .icon { transition: transform 0.24s var(--ease); flex: none; }
.btn:hover .icon { transform: translateX(3px); }

.btn--primary { --btn-bg: var(--brand); --btn-fg: var(--ink); box-shadow: var(--shadow-brand); }
.btn--primary:hover { --btn-bg: var(--brand-600); }

.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--white); }
.btn--dark:hover { --btn-bg: #000; }

.btn--outline-dark { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: rgb(23 32 31 / 32%); }
.btn--outline-dark:hover { --btn-bg: var(--ink); --btn-fg: var(--white); --btn-bd: var(--ink); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--white); --btn-bd: var(--ink); }

.btn--glass {
  --btn-bg: rgb(255 255 255 / 14%);
  --btn-fg: var(--white);
  --btn-bd: rgb(255 255 255 / 55%);
  backdrop-filter: blur(10px);
}
.btn--glass:hover { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-bd: var(--white); }

.btn--link-dark {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: transparent;
  padding-inline: 0.35rem;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.35em;
}
.btn--link-dark:hover { --btn-bg: rgb(23 32 31 / 8%); }

.btn--xs { padding: 0.55rem 1rem; font-size: 0.8125rem; }
.btn--sm { padding: 0.7rem 1.2rem; font-size: 0.875rem; }
.btn--lg { padding: 1.02rem 1.9rem; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }

.link-btn {
  border: 0; background: none; padding: 0;
  color: var(--teal); font-weight: 600;
  text-decoration: underline; text-underline-offset: 0.2em;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: inherit;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.icon-btn:hover { background: rgb(23 32 31 / 8%); }
.icon-btn--outline { border: 1.5px solid var(--line-strong); background: var(--white); }
.icon-btn--outline:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.icon-btn[disabled] { opacity: 0.35; pointer-events: none; }

.flip { transform: scaleX(-1); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.3;
}
.pill--outline { border: 1px solid rgb(23 32 31 / 22%); color: var(--ink); }

/* ---------------------------------------------------------------- header */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  transition: background-color 0.32s var(--ease), box-shadow 0.32s var(--ease),
    transform 0.32s var(--ease), backdrop-filter 0.32s var(--ease);
}
.header::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity 0.32s var(--ease);
}
.header.is-stuck {
  background: rgb(255 253 245 / 88%);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 28px -18px rgb(23 32 31 / 55%);
}
.header.is-stuck::after { opacity: 1; }
.header.is-hidden { transform: translateY(-102%); }

.header__progress {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: transparent;
  pointer-events: none;
}
.header__progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brand-700), var(--brand));
  transform-origin: left;
  transition: width 0.1s linear;
}

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: var(--header-h);
  padding-block: 0.75rem;
}

.brand { flex: none; display: inline-flex; align-items: center; text-decoration: none; }
.brand__logo {
  width: clamp(104px, 10.5vw, 132px);
  height: auto;
  transition: width 0.32s var(--ease);
}
/* Two real assets — a black wordmark and a white one — rather than one filtered to fake the
   other. Only one of --dark/--light is shown at a time; `display: none` drops the other from the
   accessibility tree too, so both can carry the same alt text with nothing announced twice. */
.brand__logo--light { display: none; }
.page-home .header--over-hero:not(.is-stuck) .brand__logo--dark { display: none; }
.page-home .header--over-hero:not(.is-stuck) .brand__logo--light { display: block; }
.brand--footer .brand__logo { width: clamp(123px, 14vw, 155px); }
.brand--footer .brand__logo--dark { display: none; }
.brand--footer .brand__logo--light { display: block; }
.brand--drawer .brand__logo { width: 112px; }

/* Centred on the header bar itself, not between the logo and the actions — those two columns
   are rarely the same width, so splitting the leftover space between them (margin-inline: auto)
   pulled the nav off true centre. */
@media (width >= 1080px) {
  .nav {
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.nav__list { display: flex; align-items: center; gap: 0.25rem; }
.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.9rem;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease);
}
/* Over a photograph the scrim carries most of the contrast; the shadow covers bright frames. */
.page-home .header--over-hero:not(.is-stuck) .nav__link,
.page-home .header--over-hero:not(.is-stuck) .header__call {
  color: var(--white);
  text-shadow: 0 1px 3px rgb(16 12 10 / 55%);
}
.nav__link:hover { background: rgb(23 32 31 / 8%); }
.page-home .header--over-hero:not(.is-stuck) .nav__link:hover { background: rgb(255 255 255 / 18%); }
.nav__link { position: relative; }
.nav__link::after {
  content: '';
  position: absolute;
  inset: auto 0.9rem 0.3rem;
  height: 2px;
  border-radius: 2px;
  background: currentcolor;
  opacity: 0.8;
  transform: scaleX(0);
  transform-origin: 50%;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover::after, .nav__item--has-menu.is-open > .nav__link::after { transform: scaleX(1); }
.nav__link.is-current { font-weight: 600; }
.nav__link.is-current::after { transform: scaleX(1); }
.nav__chevron { transition: transform 0.24s var(--ease); }
.nav__item--has-menu.is-open .nav__chevron { transform: rotate(180deg); }
.nav__item--has-menu.is-open > .nav__link { background: rgb(23 32 31 / 8%); }

/* mega menu */
.mega {
  position: absolute;
  inset-block-start: calc(100% + 0.65rem);
  inset-inline-start: 50%;
  z-index: 5;
  width: min(920px, calc(100vw - 3rem));
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, -8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
}
.nav__item--has-menu.is-open .mega {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega__inner { display: grid; grid-template-columns: 1fr 300px; gap: 0.5rem; }
.mega__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.15rem; }

.mega__card {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.7rem 0.8rem;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.mega__card:hover { background: var(--cream); transform: translateX(2px); }
.mega__card[aria-current='page'] { background: var(--brand-050); }

.mega__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px; height: 38px;
  border-radius: 25%;
  border: 1px solid var(--brand-700);
  background: var(--white);
  color: var(--brand-700);
}
.mega__icon .icon-glyph { width: 70%; height: 70%; fill: currentcolor; }
.mega__icon--lg { width: 46px; height: 46px; border-radius: 14px; background: rgb(255 255 255 / 55%); color: var(--ink); }
.mega__icon--lg .icon-glyph { width: 26px; height: 26px; }

.mega__text { display: grid; gap: 0.1rem; }
.mega__title { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; color: var(--ink); }
.mega__desc { font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }

.mega__aside {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem;
  border-radius: var(--r-md);
  background: linear-gradient(155deg, var(--brand) 0%, #63cfd2 100%);
}
.mega__aside-eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(23 32 31 / 68%);
}
.mega__feature { display: grid; gap: 0.4rem; text-decoration: none; }
.mega__feature .mega__desc { color: rgb(23 32 31 / 72%); }
.mega__feature .mega__title { font-size: 1.05rem; }
.mega__more { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem; font-weight: 600; }
.mega__all {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgb(23 32 31 / 18%);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

/* The nav is display:none below 1080, so the actions need their own push to the right. */
.header__actions { display: flex; align-items: center; gap: 0.6rem; flex: none; margin-inline-start: auto; }
.header__call {
  display: none;
  align-items: center;
  min-height: 30px;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.page-home .header--over-hero:not(.is-stuck) .header__call { color: var(--white); }

.burger { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; border-radius: var(--r-pill); }
.burger:hover { background: rgb(23 32 31 / 8%); }
.burger__box { position: relative; display: block; width: 22px; height: 14px; }
.burger__bar, .burger__bar::before, .burger__bar::after {
  position: absolute;
  left: 0;
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease), background-color 0.3s var(--ease);
}
.burger__bar { top: 6px; }
.burger__bar::before { content: ''; top: -6px; }
.burger__bar::after { content: ''; top: 6px; }
.page-home .header--over-hero:not(.is-stuck) .burger__bar,
.page-home .header--over-hero:not(.is-stuck) .burger__bar::before,
.page-home .header--over-hero:not(.is-stuck) .burger__bar::after { background: var(--white); }
.burger[aria-expanded='true'] .burger__bar { background: transparent; }
.burger[aria-expanded='true'] .burger__bar::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] .burger__bar::after { transform: translateY(-6px) rotate(-45deg); }

@media (width >= 1080px) {
  .burger { display: none; }
  .header__call { display: inline-flex; }
}
@media (width < 1080px) {
  .nav { display: none; }
  /* The header's own "Transfer my RX" pill was staying visible alongside the logo and the
     burger on every phone and tablet, crowding the bar — the drawer already leads with its own
     full-width version of the same button, so the header only needs logo + burger here. */
  .header__actions .btn--sm { display: none; }
}

/* Below ~400px the logo and the burger stop fitting comfortably side by side. */
@media (width < 420px) {
  .header__inner { gap: 0.5rem; padding-inline: 1rem; }
  .brand__logo { width: 92px; }
  .header__actions { gap: 0.25rem; }
  .burger { width: 40px; }
}

/* ---------------------------------------------------------------- drawer */

.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); }
.drawer[hidden] { display: none; }
.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgb(23 18 15 / 55%);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  width: min(420px, 92vw);
  padding: 1rem var(--pad-x) 1.5rem;
  background: var(--cream-2);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.36s var(--ease-out);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); }
/* The nav used to be flex:1, stretching to fill the full-height panel and leaving a large empty
   gap between the links and the footer block below them — the actual source of the drawer
   feeling oversized. The links now sit close to the header; any leftover room falls below the
   footer instead, at the bottom edge where it reads as normal overlay padding, not empty menu. */
.drawer__nav { margin-top: 0.25rem; }
.drawer__list { display: grid; gap: 0.1rem; }
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.9rem 0.75rem;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
}
.drawer__link:hover { background: var(--cream); }
.drawer__link.is-current { color: var(--brand-700); font-weight: 600; }
.drawer__chevron { transition: transform 0.28s var(--ease); }
.drawer__link--toggle[aria-expanded='true'] .drawer__chevron { transform: rotate(180deg); }
.drawer__sublist {
  display: grid;
  gap: 0.1rem;
  margin: 0.2rem 0 0.5rem 0.75rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--line);
  overflow: hidden;
}
.drawer__sublist[hidden] { display: none; }
.drawer__sublink {
  display: block;
  padding: 0.62rem 0.6rem;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 0.9375rem;
  text-decoration: none;
}
.drawer__sublink:hover { background: var(--cream); color: var(--ink); }
.drawer__sublink.is-current { color: var(--brand-700); font-weight: 600; }
.drawer__foot { display: grid; gap: 0.65rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.drawer__meta { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.875rem; text-align: center; }

/* ------------------------------------------------------------------ hero */

.hero { position: relative; isolation: isolate; }
.hero__inner { position: relative; z-index: 2; }

/* home — full-bleed photograph with a scrim */
.hero--home {
  display: grid;
  align-items: end;
  min-height: min(94svh, 900px);
  padding-block: calc(var(--header-h) + clamp(3rem, 8vh, 6rem)) clamp(3rem, 8vh, 5.5rem);
  color: var(--white);
}
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media picture { height: 100%; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgb(16 12 10 / 84%) 0%, rgb(16 12 10 / 62%) 36%, rgb(16 12 10 / 10%) 68%, rgb(16 12 10 / 26%) 100%),
    linear-gradient(180deg, rgb(16 12 10 / 64%) 0%, rgb(16 12 10 / 22%) 22%, transparent 42%, transparent 58%, rgb(16 12 10 / 62%) 100%);
}
.hero--home .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: var(--gap-lg);
}
@media (width < 1024px) {
  /* The address/hours card repeats content that the hero meta row and "How to reach us" already
     carry, so it is dropped rather than stretching the mobile hero. */
  .hero__card { display: none; }
  .hero--home { min-height: auto; }
}
@media (width >= 1024px) {
  .hero--home .hero__inner { grid-template-columns: minmax(0, 1fr) auto; }
  /* Exactly the height of the viewport on desktop. Two declarations: the plain 100vh first as a
     fallback, then 100svh (small viewport height) so browser chrome that shows and hides — an
     address bar, in particular — can't leave a stale gap under the hero. */
  .hero--home { min-height: 100vh; min-height: 100svh; }
}
.hero__copy { max-width: 40rem; }
.hero--home .hero__copy { max-width: min(58rem, 100%); }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.15rem;
  padding: 0.45rem 1rem 0.45rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 14%);
  backdrop-filter: blur(8px);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.01em;
}
/* .hero__badge is inline-flex, so it sits inline like text — text-align and auto margins can't
   centre it. --center switches it to a block-level flex box sized to its content, then centres
   that box the ordinary way. */
.hero__badge--center { display: flex; width: fit-content; margin-inline: auto; }
.hero__badge-mark { color: var(--brand); flex: none; display: inline-flex; }
.hero__badge-mark .icon-glyph { width: 22px; height: 22px; fill: currentcolor; }

.hero__title { font-size: var(--step-5); color: inherit; }
.hero__title .line { display: block; }
.hero__title--center { text-align: center; }

.hero__lede {
  margin: 1.35rem 0 0;
  max-width: 34rem;
  font-size: var(--step-1);
  line-height: 1.6;
  color: rgb(255 255 255 / 88%);
}
/* The home lede runs wider than the 34rem default. From 1024px up the address card claims its own
   grid column and the type reaches full size, which broke the blurb onto a fourth line at ~43
   characters — narrow enough to read as a stack. 40rem settles it at three lines and ~57
   characters. Below 600px the viewport is the constraint, so this has no effect there. */
.hero--home .hero__lede { max-width: 40rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero__actions--center { justify-content: center; }
.hero__lede--center { margin-inline: auto; text-align: center; }

.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 1.6rem 0 0; font-size: 0.9375rem; }
.hero__phone { display: inline-flex; align-items: center; min-height: 28px; gap: 0.4rem; font-weight: 600; text-decoration: none; }
.hero__phone:hover { text-decoration: underline; }

.hero__card {
  width: min(340px, 100%);
  padding: 1.4rem;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: var(--r-lg);
  background: rgb(23 18 15 / 52%);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: var(--shadow-lg);
}
.hero__card-eyebrow {
  display: flex; align-items: center; gap: 0.4rem;
  margin: 0 0 0.6rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand);
}
.hero__card-address { margin: 0 0 1rem; font-size: 0.9375rem; line-height: 1.5; }
.hero__card-hours { display: grid; gap: 0.35rem; margin: 0 0 1.1rem; padding-top: 0.9rem; border-top: 1px solid rgb(255 255 255 / 18%); }
.hero__card-hours > div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; }
.hero__card-hours dt { color: rgb(255 255 255 / 72%); }
.hero__card-hours dd { margin: 0; font-weight: 600; }
.hero__card-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; font-weight: 600; color: var(--brand); text-decoration: none; }
.hero__card-link:hover { text-decoration: underline; }

.hero__scroll {
  position: absolute;
  z-index: 3;
  inset: auto 50% 1.25rem auto;
  transform: translateX(50%);
  display: grid;
  place-items: center;
  width: 30px; height: 48px;
  border: 1.5px solid rgb(255 255 255 / 45%);
  border-radius: var(--r-pill);
}
.hero__scroll span { display: block; width: 4px; height: 8px; border-radius: 2px; background: var(--white); animation: scroll-cue 1.9s var(--ease) infinite; }
@keyframes scroll-cue {
  0% { transform: translateY(-7px); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(9px); opacity: 0; }
}

/* service / about / contact — amber ground with ink type (9.9:1) */
.hero--service, .hero--about {
  padding-block: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem)) clamp(3.5rem, 6vw, 6rem);
  background: linear-gradient(168deg, #5ecbcf 0%, var(--brand) 42%, #2fadb3 100%);
  color: var(--ink);
  overflow: hidden;
}
.hero--compact { padding-block: calc(var(--header-h) + clamp(2.25rem, 5vw, 4rem)) clamp(2.5rem, 5vw, 4.5rem); }
.hero--service .hero__title, .hero--about .hero__title { color: var(--ink); }
.hero--service .hero__lede, .hero--about .hero__lede { color: rgb(23 32 31 / 78%); }
.hero--service .hero__badge, .hero--about .hero__badge {
  border-color: rgb(23 32 31 / 16%);
  background: rgb(255 255 255 / 62%);
  color: var(--ink);
}
.hero--service .hero__badge-mark, .hero--about .hero__badge-mark { color: var(--brand-700); }
.hero--service .hero__inner { max-width: 60rem; margin-inline: auto; }
.hero--about .hero__inner--split {
  display: grid;
  gap: var(--gap-lg);
  align-items: center;
  max-width: none;
}
@media (width >= 900px) {
  .hero--about .hero__inner--split { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); }
}
.hero--about .hero__copy { max-width: 34rem; }

.hero__glow {
  position: absolute;
  inset: -30% -10% auto;
  height: 140%;
  background:
    radial-gradient(48% 42% at 18% 22%, rgb(255 255 255 / 45%) 0%, transparent 62%),
    radial-gradient(38% 36% at 84% 76%, rgb(255 255 255 / 30%) 0%, transparent 60%);
  pointer-events: none;
}

.hero__figure { position: relative; margin: 0; }
.hero__figure-img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.hero__figure-caption {
  position: absolute;
  inset: auto auto 1rem 1rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--r-pill);
  background: rgb(255 253 245 / 92%);
  backdrop-filter: blur(6px);
  font-size: 0.8125rem;
  font-weight: 600;
}

.breadcrumb { margin-bottom: 1.15rem; font-size: 0.8125rem; }
.hero--service .breadcrumb ol { justify-content: center; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.breadcrumb li { display: flex; align-items: center; gap: 0.4rem; color: rgb(23 32 31 / 62%); }
.breadcrumb li + li::before { content: '/'; opacity: 0.45; }
.breadcrumb a { display: inline-block; padding-block: 0.3rem; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current] { font-weight: 600; color: var(--ink); }

/* ------------------------------------------------------------ trust strip */

.trust { padding-block: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); background: var(--ink); color: var(--white); }
.trust__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem var(--gap); }
.trust__item { display: grid; gap: 0.1rem; }
.trust__value { font-size: var(--step-2); font-weight: 600; letter-spacing: -0.03em; color: var(--brand); line-height: 1.15; }
.trust__label { font-size: 0.8125rem; line-height: 1.4; color: rgb(255 255 255 / 72%); }
@media (width >= 720px) { .trust__list { grid-template-columns: repeat(4, 1fr); } }

/* ------------------------------------------------------------- statement */

.statement { text-align: center; }
.statement__text {
  margin: 0;
  /* Its own size rather than the shared --step-3 (also used by the "why" heading and the modal
     title) — bumped about a fifth larger, at every viewport width, not just on desktop. */
  font-size: clamp(1.75rem, 1.45rem + 1.4vw, 2.75rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--ink-700);
  text-wrap: balance;
}
.statement__text .word { display: inline-block; }
/* Brand teal carries the connective phrases, deep ink the ones being emphasised. */
.statement__soft { color: var(--brand-700); }
.statement__strong { color: var(--ink-700); }

/* ---------------------------------------------------------- service cards */

.svc-grid { display: grid; gap: var(--gap); }
@media (width >= 620px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (width >= 960px) {
  .svc-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .svc-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.svc-card { display: flex; }
.svc-card__link {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  width: 100%;
  padding: 1.6rem 1.4rem 1.4rem;
  /* The original cards were outlined in the olive heading colour with a 15px radius. */
  border: 1px solid rgb(58 57 1 / 38%);
  border-radius: var(--r-md);
  background: var(--white);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.svc-card__link:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgb(15 110 115 / 45%); }
.svc-card__icon {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  margin-bottom: 0.5rem;
  /* 25% radius on a 49px tile is the original's icon chip. */
  border-radius: 25%;
  border: 1px solid var(--brand-700);
  background: var(--white);
  color: var(--brand-700);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.35s var(--ease);
}
.svc-card__link:hover .svc-card__icon { background: var(--brand); color: var(--ink); border-color: var(--ink); transform: rotate(-6deg) scale(1.06); }
.svc-card__icon .icon-glyph { width: 75%; height: 75%; fill: currentcolor; }
.svc-card__title { font-size: var(--step-1); font-weight: 600; line-height: 1.25; letter-spacing: -0.03em; color: var(--ink-700); }
.svc-card__body { color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
.svc-card__more {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: 0.5rem;
  color: var(--accent-ink);
  font-size: 0.875rem; font-weight: 600;
}
.svc-card__more .icon { transition: transform 0.24s var(--ease); }
.svc-card__link:hover .svc-card__more .icon { transform: translateX(4px); }
.svc-card--feature .svc-card__link {
  background: linear-gradient(160deg, var(--brand) 0%, #6fd3d6 100%);
  border-color: transparent;
}
.svc-card--feature .svc-card__icon { background: rgb(255 255 255 / 55%); color: var(--ink); }
.svc-card--feature .svc-card__body { color: rgb(23 32 31 / 76%); }
.svc-card--feature .svc-card__more { color: var(--ink); }

/* --------------------------------------------------------- signature/story */

.signature__grid, .story__grid, .explain__grid, .contact__grid {
  display: grid;
  gap: var(--gap-lg);
  align-items: start;
}
@media (width >= 960px) {
  .signature__grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .story__grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .explain__grid { grid-template-columns: 1.1fr 0.9fr; }
  .contact__grid { grid-template-columns: 1.05fr 0.95fr; }
}
.signature__body { color: var(--muted); font-size: var(--step-1); line-height: 1.65; }
.signature__figure { position: relative; margin: 0; }
.signature__img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.signature__mark {
  position: absolute;
  inset: auto -14px -18px auto;
  display: grid; place-items: center;
  width: clamp(76px, 9vw, 104px); aspect-ratio: 1;
  border-radius: 26px;
  background: var(--brand);
  color: var(--ink);
  box-shadow: var(--shadow-md);
}
.signature__mark .icon-glyph { width: 52%; height: 52%; fill: currentcolor; }

.check-list { display: grid; gap: 0.7rem; margin: 1.5rem 0; }
.check-list li { display: flex; gap: 0.65rem; align-items: flex-start; line-height: 1.55; }
.check-list__mark {
  flex: none;
  margin-top: 0.22em;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--ink);
  stroke-width: 2.4;
}
.check-list--panel { margin: 1.25rem 0 1.75rem; }
.check-list--panel li { font-size: 0.9375rem; }

.story__copy p { color: var(--muted); }
.story__copy .btn { margin-top: 0.75rem; }
.story__figure { margin: 0; }
.story__img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }

.timeline { position: relative; display: grid; gap: 1.75rem; padding-left: 2rem; }
.timeline::before {
  content: '';
  position: absolute;
  inset: 0.6rem auto 0.6rem 7px;
  width: 2px;
  background: linear-gradient(var(--brand), rgb(63 191 196 / 18%));
}
.timeline__item { position: relative; display: grid; gap: 0.25rem; }
.timeline__item::before {
  content: '';
  position: absolute;
  inset: 0.42rem auto auto -2rem;
  width: 16px; height: 16px;
  border: 3px solid var(--cream-2);
  border-radius: var(--r-pill);
  background: var(--brand-700);
}
.timeline__item--now::before { background: var(--ink); box-shadow: 0 0 0 4px rgb(63 191 196 / 45%); }
.timeline__year { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); }
.timeline__text { color: var(--muted); line-height: 1.6; }

/* ------------------------------------------------------------- jump bar */

.jumpbar {
  position: sticky;
  inset-block-start: var(--header-h);
  transition: inset-block-start 0.32s var(--ease);
  z-index: var(--z-jumpbar);
  border-block: 1px solid var(--line);
  background: rgb(255 253 245 / 92%);
  backdrop-filter: blur(12px);
}
body.header-hidden .jumpbar { inset-block-start: 0; }
.jumpbar__inner { display: flex; align-items: center; gap: var(--gap); min-height: 58px; }
.jumpbar__label { font-weight: 600; font-size: 0.9375rem; white-space: nowrap; }
.jumpbar__list {
  display: flex;
  gap: 0.25rem;
  margin-inline: auto;
  overflow-x: auto;
  scrollbar-width: none;
  /* Fade the trailing edge so it is obvious the row scrolls when it does not fit. */
  mask-image: linear-gradient(90deg, #000 0 88%, transparent 100%);
  padding-inline-end: 1.5rem;
}
.jumpbar__list::-webkit-scrollbar { display: none; }
@media (width >= 860px) {
  .jumpbar__list { mask-image: none; padding-inline-end: 0; }
}
.jumpbar__list a {
  display: block;
  padding: 0.45rem 0.85rem;
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.jumpbar__list a:hover { background: var(--cream); color: var(--ink); }
.jumpbar__list a.is-active { background: var(--ink); color: var(--white); }
@media (width < 860px) {
  .jumpbar__label, .jumpbar__cta { display: none; }
  .jumpbar__list { margin-inline: 0; }
}

/* --------------------------------------------------------------- explain */

.explain__body { color: var(--muted); font-size: var(--step-1); line-height: 1.7; }
.explain__panel {
  position: sticky;
  top: calc(var(--header-h) + 5rem);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow-md);
}
@media (width < 960px) { .explain__panel { position: static; } }
.explain__panel-title { font-size: var(--step-2); }

/* --------------------------------------------------------- feature cards */

.feature-grid { display: grid; gap: var(--gap); }
@media (width >= 700px) { .feature-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (width >= 860px) { .feature-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.feature-card {
  position: relative;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  border: 1px solid rgb(58 57 1 / 32%);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent-ink); }
.feature-card__icon {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  margin-bottom: 1.15rem;
  border-radius: 25%;
  border: 1px solid var(--accent);
  background: var(--white);
  color: var(--ink-700);
}
.feature-card__icon .icon-glyph { width: 75%; height: 75%; fill: currentcolor; }
.feature-card__title { margin-bottom: 0.6rem; font-size: var(--step-2); font-weight: 600; }
.feature-card__body { margin: 0; color: var(--muted); line-height: 1.65; }

/* why grid */
.why .section-head__title { font-size: var(--step-3); max-width: 30rem; margin-inline: auto; }
.why-grid { display: grid; gap: var(--gap); }
@media (width >= 700px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (width >= 1000px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }

.why-card {
  position: relative;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--cream);
  overflow: hidden;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.why-card:hover { transform: translateY(-4px); background: var(--cream-2); box-shadow: var(--shadow-md); }
.why-card__num {
  position: absolute;
  inset: 1.15rem 1.25rem auto auto;
  /* A solid index label rather than a tinted watermark — a tint at any readable size fails AA. */
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent-ink);
  line-height: 1;
}
.why-card__icon { display: block; width: 42px; height: 42px; margin-bottom: 1rem; color: var(--brand-700); }
.why-card__icon .icon-glyph { width: 100%; height: 100%; fill: currentcolor; }
.why-card__title { position: relative; margin-bottom: 0.55rem; font-size: var(--step-1); font-weight: 600; }
.why-card__body { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.65; }

/* ----------------------------------------------------------- testimonials */

.carousel { position: relative; }
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}
.carousel__track::-webkit-scrollbar { display: none; }
@media (width >= 760px) { .carousel__track { grid-auto-columns: calc((100% - var(--gap)) / 2); } }
@media (width >= 1080px) { .carousel__track { grid-auto-columns: calc((100% - var(--gap) * 2) / 3); } }

.quote-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  border: 1px solid rgb(58 57 1 / 30%);
  border-radius: var(--r-md);
  background: var(--cream-2);
}
.quote-card__mark { color: var(--ink); flex: none; }
.quote-card__body { margin: 0; flex: 1; }
.quote-card__body p { margin: 0; color: var(--ink); line-height: 1.6; font-size: 1.0625rem; }

.carousel__controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.75rem; }
.carousel.is-static .carousel__controls { display: none; }
.carousel__dots { display: flex; gap: 0.1rem; }
.carousel__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px; height: 28px;
  padding: 0;
  border: 0;
  background: none;
}
.carousel__dot::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: var(--r-pill);
  background: rgb(23 32 31 / 22%);
  transition: width 0.28s var(--ease), background-color 0.28s var(--ease);
}
.carousel__dot[aria-selected='true']::before { width: 22px; background: var(--brand-700); }

/* ---------------------------------------------------------------- Rx band */

.rx__panel {
  position: relative;
  display: grid;
  gap: var(--gap-lg);
  align-items: center;
  padding: clamp(2rem, 1.4rem + 2.6vw, 3.75rem);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 130% at 88% 8%, rgb(255 255 255 / 30%) 0%, transparent 55%),
    linear-gradient(140deg, #5ecbcf 0%, var(--brand) 46%, #28a3a9 100%);
  color: var(--ink);
  overflow: hidden;
}
@media (width >= 880px) { .rx__panel { grid-template-columns: 1.15fr 0.85fr; } }
.rx__title { font-size: var(--step-4); color: var(--ink); }
.rx__body { margin: 1.15rem 0 0; max-width: 38rem; color: rgb(23 32 31 / 82%); line-height: 1.65; }
.rx__note { margin: 0.85rem 0 0; font-size: 0.9375rem; font-weight: 600; }
.rx__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.9rem; }

.rx__art { position: relative; display: grid; place-items: center; min-height: 220px; }
.rx__disc {
  display: grid; place-items: center;
  width: clamp(150px, 20vw, 210px); aspect-ratio: 1;
  border-radius: var(--r-xl);
  background: rgb(255 255 255 / 30%);
  /* Solid ink, not a 55%-alpha wash — the translucent arrows read as faded/broken against the
     amber card. */
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%);
}
.rx__cycle { animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rx__badge {
  position: absolute;
  padding: 0.55rem 1.05rem;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: var(--shadow-md);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  animation: float 6s ease-in-out infinite;
}
.rx__badge--1 { inset: 8% 2% auto auto; }
.rx__badge--2 { inset: auto auto 10% 0; animation-delay: -3s; }
@keyframes float {
  0%, 100% { transform: translateY(-6px); }
  50% { transform: translateY(6px); }
}

/* ------------------------------------------------------------------ reach */

.reach__grid { display: grid; gap: var(--gap-lg); }
@media (width >= 1180px) {
  .reach__grid { grid-template-columns: 0.88fr 1.12fr; align-items: stretch; }
  /* The intro (eyebrow/title/lede) spans both columns on its own row, so the stack and the
     location card — the next row — start at the same y instead of lining up with the intro's
     top. Stretch (rather than start) makes the two columns match each other's rendered height. */
  .reach__intro { grid-column: 1 / -1; }
  /* Without a map to grow into (map:false), stretching just leaves dead space below the button —
     size the card to its own content instead. */
  .info-card--map-compact { align-self: start; }
}
.reach__lede { margin: 1rem 0 2rem; max-width: 34rem; color: var(--muted); font-size: var(--step-1); }

/* Phone / Email / Hours stack in one column, each a compact card; Location merges with the map in
   its own card alongside — see .info-card--map below. */
.info-cards__stack { display: grid; gap: 0.85rem; align-content: start; }
.info-card--hours .hours-list__row { padding-block: 0.15rem; }

/* Location + map card: icon-left header like the stacked cards, then address, embed and a
   directions button stacked in __main. .info-card is already a flex row (icon | main), which
   stretches __main to the card's full height by default; the map itself grows to fill whatever
   height grid stretch gives the card, so it matches the stack column's rendered height. */
.info-card--map .info-card__main { display: flex; flex-direction: column; }
.info-card--map .info-card__lines { margin-bottom: 1rem; }
.info-card--map .info-card__map {
  position: relative;
  flex: 1;
  min-height: 280px;
  margin-bottom: 1.1rem;
  border-radius: var(--r-md);
  overflow: hidden;
  /* Shown if the embed is blocked (privacy extensions, offline preview). */
  background: repeating-linear-gradient(45deg, var(--cream) 0 12px, var(--cream-2) 12px 24px);
}
.info-card--map .info-card__map::before {
  content: 'Map';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.info-card--map .info-card__map iframe { position: relative; width: 100%; height: 100%; border: 0; filter: saturate(0.9); }

.info-card {
  position: relative;
  display: flex;
  gap: 1rem;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.info-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.info-card__icon {
  display: grid; place-items: center;
  flex: none;
  width: 52px; height: 52px;
  border-radius: 25%;
  background: var(--brand);
  color: var(--ink);
}
.info-card__icon .icon-glyph { width: 70%; height: 70%; fill: currentcolor; }
.info-card__main { flex: 1; min-width: 0; }
.info-card__title { margin-bottom: 0.35rem; font-size: 1.0625rem; font-weight: 600; }
.info-card__lines { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
.info-card__action {
  display: inline-flex; align-items: center; gap: 0.3rem;
  min-height: 28px;
  margin-top: 0.5rem;
  padding-block: 0.2rem;
  color: var(--teal);
  font-size: 0.875rem; font-weight: 600;
  text-decoration: none;
}
.info-card__action:hover { text-decoration: underline; }
.info-card__copy {
  /* Last in the DOM, so it sits last visually too — otherwise tab order jumps backwards. */
  position: absolute; inset: auto 0.85rem 0.85rem auto;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--cream-2);
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.info-card:hover .info-card__copy, .info-card__copy:focus-visible { opacity: 1; }
.info-card__copy:hover { background: var(--brand); color: var(--ink); }
.info-card__copy.is-copied { background: var(--ink); color: var(--white); border-color: var(--ink); opacity: 1; }
@media (hover: none) { .info-card__copy { opacity: 1; } }

.hours-list { display: grid; gap: 0.4rem; margin: 0; }
.hours-list__row { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.9375rem; }
.hours-list__row dt { flex: none; color: var(--muted); white-space: nowrap; }
.hours-list__row dd { margin: 0; font-weight: 600; text-align: right; }
.hours-list__note { display: block; font-size: 0.75rem; font-weight: 400; color: var(--muted); }
.hours-list--lg .hours-list__row { padding-block: 0.55rem; border-bottom: 1px solid var(--line-soft); }
.hours-list--lg .hours-list__row:last-child { border-bottom: 0; }
.hours-list__row.is-today dt { color: var(--ink); font-weight: 600; }
.hours-list__row.is-today { background: var(--brand-050); border-radius: var(--r-xs); padding-inline: 0.5rem; }

.hours-now {
  display: inline-flex; align-items: center; gap: 0.45rem;
  text-wrap: balance;
  margin: 0 0 0.75rem;
  padding: 0.32rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--cream);
  font-size: 0.8125rem;
  font-weight: 600;
}
.hours-now__dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--muted); flex: none; }
.hours-now.is-open .hours-now__dot { background: #17803d; box-shadow: 0 0 0 3px rgb(23 128 61 / 20%); }
.hours-now.is-closed .hours-now__dot { background: #b42318; box-shadow: 0 0 0 3px rgb(180 35 24 / 18%); }
.hours-now--hero { background: rgb(255 255 255 / 16%); border: 1px solid rgb(255 255 255 / 32%); color: var(--white); }

/* ------------------------------------------------------------------ forms */

.form-section .form-card { margin-inline: auto; }
.form-card {
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.form-card .section-head { margin-bottom: 2rem; }
.form-card__lede { margin: 0.75rem 0 1.75rem; color: var(--muted); }

.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.35rem; }
.field-row { display: grid; gap: 1.1rem; }
@media (width >= 560px) { .field-row { grid-template-columns: repeat(2, 1fr); } }

.field label, .field__label { font-size: 0.875rem; font-weight: 600; }
.field label span { color: var(--brand-700); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--cream-2);
  font-size: 0.9375rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--brand-700);
  box-shadow: 0 0 0 4px rgb(63 191 196 / 36%);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}
iframe:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: #b42318; background: #fff6f5; }
.field.is-invalid input:focus, .field.is-invalid textarea:focus { box-shadow: 0 0 0 4px rgb(180 35 24 / 18%); }
.field__error { margin: 0; min-height: 0; color: #b42318; font-size: 0.8125rem; font-weight: 500; }
.field__error:empty { display: none; }

.choice-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.65rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.choice:has(input:checked) { border-color: var(--brand-700); background: var(--brand-050); font-weight: 600; }
.choice input { accent-color: var(--brand-700); }
.choice--check { border: 0; padding: 0; align-items: flex-start; font-size: 0.875rem; line-height: 1.5; }
.choice--check:has(input:checked) { background: none; font-weight: 400; }
.choice--check input { margin-top: 0.22em; }

.form__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: flex-end; margin-top: 0.5rem; }
.form__actions .btn:first-child { margin-inline-end: auto; }
.form__fineprint { margin: 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
/* FormSubmit's `_honey` spam trap. Parked off-screen rather than display:none, which simple bots
   skip; it is also aria-hidden and tabindex -1 in the markup, so no real user reaches it. */
.form__honey { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__status { margin: 0; min-height: 1.2em; font-size: 0.875rem; font-weight: 600; color: #b42318; }
.form__status:empty { display: none; }

.form__success { text-align: center; padding-block: 1rem; }
.form__success-mark {
  display: grid; place-items: center;
  width: 60px; height: 60px;
  margin: 0 auto 1.15rem;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--ink);
  stroke-width: 2.4;
  animation: pop 0.5s var(--ease-out);
}
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.form__success h3 { margin-bottom: 0.6rem; font-size: var(--step-2); }
.form__success p { color: var(--muted); max-width: 30rem; margin-inline: auto; }
.form__success .btn { margin-top: 1.25rem; }

.steps { display: flex; gap: 0.4rem; margin-bottom: 1.75rem; counter-reset: step; }
.steps__item {
  flex: 1;
  position: relative;
  padding-top: 0.75rem;
  border-top: 3px solid var(--line);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.steps__item.is-active, .steps__item.is-done { border-top-color: var(--brand); color: var(--ink); }

.form__step { border: 0; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.form__step[hidden] { display: none; }

/* ----------------------------------------------------------------- modal */

.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--pad-x); }
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: rgb(23 18 15 / 62%); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.3s var(--ease); }
.modal.is-open .modal__scrim { opacity: 1; }
.modal__dialog {
  position: relative;
  width: min(640px, 100%);
  max-height: min(88svh, 900px);
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  border-radius: var(--r-xl);
  background: var(--cream-2);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transition: transform 0.34s var(--ease-out), opacity 0.28s var(--ease);
}
.modal.is-open .modal__dialog { transform: none; opacity: 1; }
.modal__close { position: absolute; inset: 0.75rem 0.75rem auto auto; background: var(--cream); }
.modal__head { margin-bottom: 1.75rem; padding-right: 2.5rem; }
.modal__title { font-size: var(--step-3); }
.modal__lede { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.9375rem; }

/* ---------------------------------------------------------------- footer */

.footer { padding-block: clamp(3rem, 2.2rem + 3vw, 4.5rem) 0; background: var(--brand); color: var(--ink); }
.footer__inner { display: grid; gap: var(--gap-lg); }
@media (width >= 760px) { .footer__inner { grid-template-columns: 1.2fr 1fr 1fr; } }
@media (width >= 1080px) { .footer__inner { grid-template-columns: 1.3fr 1.1fr 1fr; gap: clamp(2rem, 4vw, 5rem); } }

.footer__blurb { margin: 1.25rem 0 1.5rem; max-width: 30rem; color: rgb(23 32 31 / 82%); font-size: 0.9375rem; line-height: 1.6; }
.footer__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.footer__heading { margin-bottom: 1.1rem; font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.footer__links { display: grid; gap: 0.5rem; }
.footer__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding-block: 0.2rem;
  font-size: 0.9375rem;
  color: rgb(23 32 31 / 82%);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.footer__links a::after {
  content: '';
  position: absolute;
  inset: auto 0 0.15rem 0;
  height: 1.5px;
  background: currentcolor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.footer__links a:hover { color: var(--ink); }
.footer__links a:hover::after, .footer__links a:focus-visible::after { transform: scaleX(1); }

/* The nine service pages nest under a native <details> disclosure instead of sitting flat in the
   list — a native element degrades to open-and-readable with no CSS or JS at all. */
.footer__disclosure-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 26px;
  padding-block: 0.2rem;
  color: rgb(23 32 31 / 82%);
  font-size: 0.9375rem;
  list-style: none;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.footer__disclosure-summary::-webkit-details-marker { display: none; }
.footer__disclosure-summary:hover, .footer__disclosure[open] > .footer__disclosure-summary { color: var(--ink); }
.footer__disclosure-chevron { transition: transform 0.24s var(--ease); }
.footer__disclosure[open] > .footer__disclosure-summary .footer__disclosure-chevron { transform: rotate(180deg); }
.footer__sublinks {
  display: grid;
  gap: 0.4rem;
  margin: 0.4rem 0 0 0.2rem;
  padding-left: 0.9rem;
  border-left: 1.5px solid rgb(23 32 31 / 18%);
}
.footer__sublinks a {
  display: inline-block;
  min-height: 24px;
  padding-block: 0.15rem;
  color: rgb(23 32 31 / 70%);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.footer__sublinks a:hover, .footer__sublinks a:focus-visible { color: var(--ink); text-decoration: underline; }
.footer__sublinks a[aria-current] { color: var(--ink); font-weight: 600; }
.footer__contact-list { display: grid; gap: 0.95rem; }
.footer__contact-list li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.9375rem; line-height: 1.5; }
.footer__contact-list svg { flex: none; margin-top: 0.15em; opacity: 0.75; }
.footer__contact-list a { display: inline-block; min-height: 26px; padding-block: 0.15rem; text-decoration: none; font-weight: 500; }
.footer__contact-list a:hover { text-decoration: underline; }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-block: 1.35rem;
  border-top: 1px solid rgb(23 32 31 / 18%);
  font-size: 0.8125rem;
  color: rgb(23 32 31 / 78%);
}
.footer__legal p { margin: 0; }
.to-top {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgb(23 32 31 / 22%);
  border-radius: var(--r-pill);
  background: none;
  font-size: 0.8125rem; font-weight: 600;
  transition: background-color 0.2s var(--ease);
}
.to-top:hover { background: rgb(23 32 31 / 10%); }

/* ------------------------------------------------------------------ panel */

.panel {
  padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.panel + .panel { margin-top: var(--gap); }
.panel__title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; font-size: 1.125rem; font-weight: 600; }
.panel__text { margin: 0 0 0.75rem; line-height: 1.55; }
.panel__text--muted { color: var(--muted); font-size: 0.9375rem; }
.panel__map {
  position: relative;
  margin: 1rem 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: repeating-linear-gradient(45deg, var(--cream) 0 12px, var(--cream-2) 12px 24px);
}
.panel__map::before {
  content: 'Map';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.panel__map iframe { position: relative; width: 100%; height: 220px; border: 0; }
.panel__list { display: grid; gap: 0.85rem; }
.panel__list li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9375rem; }
.panel__list a { font-weight: 600; text-decoration: none; }
.panel__list a:hover { text-decoration: underline; }
.panel__list .info-card__copy { position: static; opacity: 1; width: 28px; height: 28px; margin-left: auto; }
.panel--accent { background: linear-gradient(160deg, var(--brand-050), var(--cream)); border-color: rgb(15 110 115 / 28%); }

.contact__aside { display: grid; align-content: start; }

/* ------------------------------------------------------------------ misc */

.related .svc-card__link { background: var(--cream-2); }

/* ---------------------------------------------------------------- motion */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out) var(--d, 0ms), transform 0.7s var(--ease-out) var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

.hero__title .line {
  display: block;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 0.75s var(--ease-out) var(--d, 0ms), transform 0.75s var(--ease-out) var(--d, 0ms);
}
[data-reveal].is-revealed .line { opacity: 1; transform: none; }

.statement__text .word {
  opacity: 0.34;
  transition: opacity 0.55s var(--ease);
}
.statement__text .word.is-lit { opacity: 1; }

/* JS-off fallback: everything is visible. */
.no-js [data-reveal],
.no-js .hero__title .line,
.no-js .statement__text .word { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], .hero__title .line { opacity: 1 !important; transform: none !important; }
  .statement__text .word { opacity: 1 !important; }
  .carousel__track { scroll-behavior: auto; }
}

/* ----------------------------------------------------------------- print */

@media print {
  .header, .drawer, .modal, .jumpbar, .hero__scroll, .to-top, .carousel__controls,
  .info-card--map .info-card__map, .panel__map { display: none !important; }
  body { background: #fff; color: #000; }
  .hero--service, .hero--about, .footer, .rx__panel { background: #fff !important; color: #000 !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}

/* The header sits on an amber hero everywhere but home, so its CTA switches to ink there. */
body:not(.page-home) .header:not(.is-stuck) .header__actions .btn--primary {
  background: var(--ink);
  color: var(--white);
  box-shadow: none;
}
body:not(.page-home) .header:not(.is-stuck) .header__actions .btn--primary:hover { background: #000; }

/* --------------------------------------------------------- forced colours */

@media (forced-colors: active) {
  /* Windows High Contrast drops box-shadows and background images, so restate the affordances. */
  .btn, .icon-btn, .svc-card__link, .feature-card, .why-card, .info-card, .quote-card,
  .form-card, .panel, .explain__panel, .mega, .drawer__panel, .modal__dialog {
    border: 1px solid CanvasText;
  }
  :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
  .hero__scrim, .hero__glow { display: none; }
  .header.is-stuck { background: Canvas; }
  .carousel__dot::before { background: CanvasText; }
  .carousel__dot[aria-selected='true']::before { background: Highlight; }
}