/* ==========================================================================
   Cityside Pharmacy
   Design system: deep-teal / sage / warm-white with a controlled coral accent.
   Plus Jakarta Sans for headings, Inter for text. Motion is transform/opacity
   only and is switched off under prefers-reduced-motion.

   Contents
   1  Tokens           7  Sections & prose     13 Service cards
   2  Base             8  Page heads          14 Team, contact, licence
   3  Buttons          9  Media & lists       15 FAQ, tables, forms
   4  Header & nav    10  Counters, CTA       16 Footer & floating actions
   5  Hero            11  Reveal motion       17 Responsive
   6  Keyframes       12  (reserved)          18 Reduced motion, print
   ========================================================================== */

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

:root {
  /* brand */
  --teal-deep:   #246B63;
  --teal:        #3B7A70;
  --sage:        #E2EFE9;
  --mist:        #F4F9F7;
  --paper:       #FCFDFC;
  --coral:       #FF7A59;
  --coral-soft:  #FFB5A1;
  --coral-ink:   #B23A1C;    /* coral dark enough to carry text on light grounds */

  /* ink */
  --ink:         #172321;
  --ink-2:       #526360;
  --line:        rgba(23, 35, 33, .10);
  --line-strong: rgba(23, 35, 33, .18);
  --white:       #fff;

  /* type */
  --font:        "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head:   "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* shape & depth */
  --wrap:        1240px;
  --gutter:      clamp(1rem, .5rem + 2vw, 2rem);
  --r-sm:        12px;
  --r:           20px;
  --r-lg:        28px;
  --shadow-1:    0 1px 2px rgba(23, 35, 33, .04), 0 8px 24px rgba(23, 35, 33, .06);
  --shadow-2:    0 2px 4px rgba(23, 35, 33, .04), 0 22px 48px rgba(36, 107, 99, .18);

  /* motion */
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --t-fast:      .18s;
  --t:           .32s;

  /* layout */
  --topbar-h:    40px;
  --mast-h:      84px;
}

/* -------------------------------------------------------------- 2 base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--mast-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, iframe { max-width: 100%; }
img { height: auto; border: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.125rem, 1.3rem + 3vw, 3.5rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.875rem, 1.2rem + 2.3vw, 3rem); }
h3 { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); }
h4 { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

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

a { color: var(--teal-deep); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--coral-ink); }

:focus-visible {
  outline: 3px solid var(--teal-deep);
  outline-offset: 3px;
  border-radius: 6px;
}
.site-foot :focus-visible, .section--media :focus-visible, .section--cta :focus-visible,
.cta-band :focus-visible, .topbar :focus-visible { outline-color: #fff; }

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

hr.rule { height: 1px; margin: 2rem 0; border: 0; background: var(--line); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: .85rem 1.4rem; border-radius: 0 0 var(--r-sm) 0;
  background: var(--teal-deep); color: #fff; font-weight: 600;
}
.skip:focus { left: 0; color: #fff; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; flex: none; }
.icon--sm { width: .75em; height: .75em; }
.icon--lg { width: 2.25rem; height: 2.25rem; }
.icon--xl { width: 3rem; height: 3rem; }

/* page-load entrance: short, CSS-only, ~1s end to end */
@keyframes rise   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes reveal-visual { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes bob    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ring   { 0% { transform: scale(.6); opacity: .55; } 80%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes ecg    { from { stroke-dashoffset: .3; } to { stroke-dashoffset: -1; } }
@keyframes drift  { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(18px, -14px); } }
@keyframes sway   { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(8deg); } }
@keyframes sweep  { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
@keyframes panel  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes pill-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
  50%      { transform: translate3d(14px, -24px, 0) rotate(calc(var(--r, 0deg) + 26deg)); }
}
@keyframes bubble-rise {
  0%   { transform: translate3d(0, 0, 0) scale(.7); opacity: 0; }
  15%  { opacity: .4; }
  100% { transform: translate3d(14px, -78vh, 0) scale(1.15); opacity: 0; }
}
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes atom  { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes link-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* between pages: a quick cross-fade where the browser supports it */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

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

/* Cityside capsule button system. One shape (a pharmaceutical capsule), five
   meanings, set with custom properties so every variant shares the same motion:
     .btn            primary   deep teal, white label
     .btn--secondary secondary sage, deep-teal label
     .btn--outline   tertiary  outlined capsule
     .btn--accent    accent    coral, graphite label (white on coral is 2.6:1)
     .btn--danger    warning   for irreversible actions
   Buttons placed on a dark band (CTA band, media section, footer) flip to the
   white capsule automatically. The label sits above the gloss and shine layers
   (both z-index -1), so effects can never reduce its contrast.
   Contrast: white on teal 5.0, white on deep teal 6.3, deep teal on sage 5.3,
   graphite on coral 6.3, white on warning red 6.0 - all AA. */
.btn {
  --btn-bg: var(--teal-deep); --btn-bg-2: var(--teal); --btn-fg: #fff;
  --btn-line: transparent; --btn-glow: 36, 107, 99; --cap-ease: cubic-bezier(.25, 1, .5, 1);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .8em 1.7em;
  border: 1.5px solid var(--btn-line); border-radius: 999px;
  background: linear-gradient(100deg, var(--btn-bg) 0, var(--btn-bg) 62%, var(--btn-bg-2) 100%);   /* two-part capsule */
  color: var(--btn-fg);
  font-family: var(--font-head); font-size: .9375rem; font-weight: 700; letter-spacing: .005em; line-height: 1.25; text-align: center;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .2), inset 0 -3px 6px rgba(23, 35, 33, .12), 0 6px 14px rgba(var(--btn-glow), .2);
  cursor: pointer;
  transition: transform .45s var(--cap-ease), box-shadow .45s var(--cap-ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn::before {                                         /* capsule gloss, behind the label */
  content: ""; position: absolute; z-index: -1; left: 16px; right: 16px; top: 4px; height: 32%; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); pointer-events: none;
}
.btn::after {                                          /* shine: hover/focus only, behind the label */
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 36%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: translateX(-130%) skewX(-18deg); pointer-events: none;
}
.btn:hover, .btn:focus-visible {
  color: var(--btn-fg); border-radius: 999px; transform: translateY(-2px) scale(1.02);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .2), inset 0 -3px 6px rgba(23, 35, 33, .12), 0 14px 26px rgba(var(--btn-glow), .32);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(380%) skewX(-18deg); transition: transform .9s var(--cap-ease); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: inset 0 2px 5px rgba(23, 35, 33, .2), 0 3px 8px rgba(var(--btn-glow), .22); transition-duration: .12s; }
.btn__arrow { flex: none; transition: transform .45s var(--cap-ease); }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(4px); }

.btn--secondary {
  --btn-bg: var(--sage); --btn-bg-2: var(--mist); --btn-fg: var(--teal-deep); --btn-line: rgba(59, 122, 112, .3);
}
.btn--outline {
  --btn-bg: #fff; --btn-bg-2: var(--mist); --btn-fg: var(--teal-deep); --btn-line: var(--teal-deep);
  box-shadow: 0 4px 10px rgba(36, 107, 99, .08);
}
.btn--outline:hover, .btn--outline:focus-visible {
  --btn-bg: var(--sage); --btn-bg-2: var(--sage);
  box-shadow: 0 14px 26px rgba(36, 107, 99, .22);
}
.btn--accent { --btn-bg: var(--coral); --btn-bg-2: #ff8f72; --btn-fg: var(--ink); --btn-glow: 255, 122, 89; }
.btn--danger { --btn-bg: var(--coral-ink); --btn-bg-2: #c4482a; --btn-fg: #fff; --btn-glow: 178, 58, 28; }
.btn--sm { min-height: 44px; padding: .65em 1.3em; font-size: .875rem; }

/* on a dark ground: the white capsule */
.btn--ghost,
:is(.section--cta, .cta-band, .section--media, .site-foot) .btn:not(.btn--outline, .btn--accent, .btn--danger) {
  --btn-bg: #fff; --btn-bg-2: var(--sage); --btn-fg: var(--teal-deep); --btn-glow: 0, 0, 0;
  box-shadow: inset 0 -3px 6px rgba(23, 35, 33, .06), 0 10px 22px rgba(0, 0, 0, .22);
}
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .6; cursor: progress; transform: none; box-shadow: none; pointer-events: none;
}

.btn-wrap { margin: 1.75rem 0 0; }
.btn-wrap--center { text-align: center; }

/* -------------------------------------------------- 4 header & navigation */

.topbar {
  height: var(--topbar-h);
  background: var(--teal-deep); color: #fff;
  font-size: .8125rem; line-height: 1;
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 1rem; }
.topbar ul { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.topbar a { display: inline-flex; gap: .5rem; align-items: center; color: rgba(255, 255, 255, .92);
            padding-block: .5rem; }
.topbar a:hover, .topbar a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.topbar .icon { color: var(--coral-soft); }
.topbar__social a { padding-inline: .7rem; margin-right: -.7rem; }
.topbar__social .icon { font-size: 1.35rem; color: #fff; transition: transform var(--t) var(--ease), color var(--t) var(--ease); }
.topbar__social a:hover .icon, .topbar__social a:focus-visible .icon { color: var(--coral-soft); transform: scale(1.12); }

/* stand-alone links reach the 24px minimum target size (WCAG 2.2 AA) */
.ticks a, .contact-list a, .colophon a, .hero__assure a, .prose p > a:only-child:not(.btn) { display: inline-block; padding-block: .2rem; }

/* The sticky wrapper keeps a constant layout height; only the bar inside it
   changes size, so scrolling never shifts the page. */
.site-head {
  position: sticky; top: 0; z-index: 60;
  height: var(--mast-h);
  pointer-events: none;
  view-transition-name: site-head;
  animation: settle .6s var(--ease-out) both;
}
.masthead {
  position: relative; pointer-events: auto;
  height: var(--mast-h);
  background: rgba(252, 253, 252, .96);
  border-bottom: 1px solid transparent;
  transition: height var(--t) var(--ease), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease), background var(--t) var(--ease);
}
@supports (backdrop-filter: blur(1px)) {
  .masthead { background: rgba(252, 253, 252, .86); backdrop-filter: saturate(1.5) blur(16px); }
}
.site-head.is-stuck .masthead {
  height: 68px; background: rgba(252, 253, 252, .94);
  border-color: var(--line); box-shadow: 0 10px 30px rgba(23, 35, 33, .08);
}
.masthead__inner { display: flex; align-items: center; gap: 1.25rem; height: 100%; }

.brand { display: inline-flex; flex: none; }
.brand img { width: auto; max-height: 44px; transition: transform var(--t) var(--ease); transform-origin: left center; }
.site-head.is-stuck .brand img { transform: scale(.86); }

.nav { margin-inline: auto; }
.nav__list { display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.nav__list > li { position: relative; }
.nav__list > li.is-hidden { display: none; }       /* matches .Pointy-menu on the original */
.nav__list > li > a {
  display: block; padding: .6rem 1.05rem; border-radius: 999px;
  color: var(--ink); font-family: var(--font-head); font-size: .9375rem; font-weight: 600;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__list > li > a:hover, .nav__list > li > a:focus-visible { background: var(--sage); color: var(--teal-deep); }
.nav__list > li.is-current > a { background: var(--sage); color: var(--teal-deep); }
.nav__list > li.has-sub > a::after {
  content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .55em;
  border: solid currentColor; border-width: 0 2px 2px 0;
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--t) var(--ease);
}
.nav__list > li.has-sub:hover > a::after,
.nav__list > li.has-sub:focus-within > a::after { transform: translateY(0) rotate(225deg); }

.nav__toggle { display: none; }

.nav__sub {
  position: absolute; top: 100%; left: 50%; z-index: 20;
  min-width: 300px; margin: 10px 0 0; padding: .5rem; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
}
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav__list > li:hover > .nav__sub,
.nav__list > li:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav__sub a {
  display: block; padding: .7rem .95rem; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: .9375rem; font-weight: 500; line-height: 1.45;
}
.nav__sub a:hover, .nav__sub a:focus-visible { background: var(--sage); color: var(--teal-deep); }

.search {
  display: flex; align-items: center; flex: 0 0 236px;
  background: var(--mist); border: 1px solid var(--line); border-radius: 999px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.search:focus-within { background: #fff; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(59, 122, 112, .16); }
.search input {
  flex: 1 1 auto; min-width: 0; padding: .7rem 0 .7rem 1.15rem;
  border: 0; background: transparent;
  font: inherit; font-size: .9375rem; color: var(--ink);
}
.search input::placeholder { color: var(--ink-2); opacity: 1; }
.search input:focus { outline: 0; }
.search__btn {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; margin: 2px;
  border: 0; border-radius: 999px; background: linear-gradient(100deg, var(--teal-deep), var(--teal)); color: #fff;
  font-size: 1.05rem; cursor: pointer; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .2), 0 4px 10px rgba(36, 107, 99, .25);
  transition: transform .45s cubic-bezier(.25, 1, .5, 1), box-shadow .45s cubic-bezier(.25, 1, .5, 1);
}
.search__btn:hover, .search__btn:focus-visible { border-radius: 999px; transform: scale(1.08); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .2), 0 8px 16px rgba(36, 107, 99, .32); }
.search--panel { display: none; }

.burger {
  display: none; position: relative; flex: none;
  width: 48px; height: 48px; padding: 0; margin-left: auto;
  border: 0; border-radius: 999px; background: var(--sage); color: var(--teal-deep); cursor: pointer;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .6), 0 3px 8px rgba(36, 107, 99, .14);
}
.burger:focus-visible, .nav__toggle:focus-visible, .to-top:focus-visible, .call-fab:focus-visible { border-radius: 999px; }
.burger__bars, .burger__bars::before, .burger__bars::after {
  display: block; width: 22px; height: 2px; margin-inline: auto; border-radius: 2px;
  background: currentColor;
  transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease), background var(--t-fast);
}
.burger__bars::before, .burger__bars::after { content: ""; position: absolute; left: 13px; }
.burger__bars::before { transform: translateY(-7px); }
.burger__bars::after  { transform: translateY(7px); }
.burger[aria-expanded="true"] .burger__bars { background: transparent; }
.burger[aria-expanded="true"] .burger__bars::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars::after  { transform: rotate(-45deg); }

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

.hero {
  position: relative; overflow: hidden;
  padding: clamp(1.75rem, .5rem + 3vw, 3.5rem) 0 clamp(3rem, 1rem + 5vw, 5.5rem);
  background:
    radial-gradient(900px 520px at 88% 8%, rgba(226, 239, 233, .95), transparent 62%),
    radial-gradient(700px 420px at 0% 100%, rgba(226, 239, 233, .7), transparent 60%),
    linear-gradient(180deg, var(--mist), var(--paper));
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__orb { position: absolute; border-radius: 50%; filter: blur(70px); animation: drift 18s ease-in-out infinite; }
.hero__orb--a { width: 380px; height: 380px; top: -120px; right: 8%; background: rgba(59, 122, 112, .09); }
.hero__orb--b { width: 300px; height: 300px; bottom: -110px; left: 4%; background: rgba(255, 122, 89, .05);
                animation-duration: 24s; animation-direction: reverse; }
/* Pharmacy background layer: capsules, a molecule diagram and rising crosses.
   Transform/opacity only; kept low-contrast and away from the headline. */
.hero__fx { position: absolute; inset: 0; overflow: hidden; }
.pill {
  position: absolute; left: var(--x); top: var(--y);
  width: calc(62px * var(--s, 1)); height: calc(25px * var(--s, 1)); border-radius: 999px;
  opacity: .68; transform: rotate(var(--r, 0deg));
  box-shadow: inset 0 -3px 5px rgba(23, 35, 33, .12), 0 10px 18px rgba(36, 107, 99, .14);
  animation: pill-drift var(--d, 12s) ease-in-out var(--l, 0s) infinite;
}
.pill::after { content: ""; position: absolute; left: 12%; right: 12%; top: 16%; height: 20%; border-radius: 999px; background: rgba(255, 255, 255, .55); }
.pill--a { background: linear-gradient(90deg, var(--teal) 0 50%, #fff 50% 100%); }
.pill--b { background: linear-gradient(90deg, var(--coral) 0 50%, #fff 50% 100%); }
.pill--c { background: linear-gradient(90deg, var(--teal-deep) 0 50%, var(--sage) 50% 100%); }
.fx-cross {
  position: absolute; left: var(--x); bottom: -24px; opacity: 0; color: var(--teal); font-size: 1rem;
  animation: bubble-rise var(--d, 11s) ease-in var(--l, 0s) infinite;
}
.fx-cross:nth-of-type(3n) { color: var(--coral); font-size: .8rem; }
.molecule-wrap { position: absolute; width: 300px; color: var(--teal); opacity: .32; }
.molecule-wrap--a { left: -70px; top: -30px; }
.molecule-wrap--b { right: -60px; bottom: 40px; width: 260px; opacity: .26; }
.molecule { display: block; width: 100%; height: auto; animation: spin 90s linear infinite; }
.molecule-wrap--b .molecule { animation-direction: reverse; animation-duration: 120s; }
.molecule line { stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.molecule .atom { fill: currentColor; transform-box: fill-box; transform-origin: center; animation: atom 5s ease-in-out calc(var(--i, 0) * .6s) infinite; }
.molecule .atom--o { fill: var(--coral); }
.hero__ecg { position: absolute; left: 0; bottom: 10px; width: 100%; height: 52px; color: var(--teal); opacity: .22; }
.hero__ecg path { stroke-dasharray: .3 1; animation: ecg 5.5s linear infinite; }

.hero__grid {
  position: relative; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}
.hero__copy > * { animation: rise .7s var(--ease-out) both; }
.hero__eyebrow { animation-delay: .15s !important; }
.hero__title   { animation-delay: .25s !important; }
.hero__lead    { animation-delay: .35s !important; }
.hero__sub     { animation-delay: .4s !important; }
.hero__cta     { animation-delay: .5s !important; }
.hero__assure  { animation-delay: .6s !important; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 1.15rem;
  padding: .45rem 1rem .45rem .85rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--teal-deep);
  box-shadow: var(--shadow-1);
}
.hero__title {
  margin: 0 0 1.1rem;
  font-size: clamp(2.1rem, 1.1rem + 2.9vw, 3.4rem);
  line-height: 1.08; letter-spacing: -.035em; font-weight: 800;
}
.hero__lead { max-width: 34em; margin: 0 0 1rem; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--ink-2); line-height: 1.65; }
.hero__sub  { max-width: 36em; margin: 0 0 1rem; color: var(--ink-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; margin: 1.6rem 0 0; }

.hero__assure {
  display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; margin: 1.9rem 0 0; padding: 1.25rem 0 0;
  list-style: none; border-top: 1px solid var(--line);
  font-size: .9375rem; font-weight: 500; color: var(--ink);
}
.hero__assure li { display: inline-flex; align-items: center; gap: .6rem; }
.hero__assure .icon { color: var(--teal); font-size: 1.15rem; }
.hero__assure a { font-weight: 600; text-decoration: underline; text-decoration-color: rgba(36, 107, 99, .35); text-underline-offset: 3px; }

.pulse { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--teal);
                animation: ring 2.6s ease-out infinite; }

.hero__visual {
  position: relative; width: 100%; max-width: 620px; margin-inline: auto;
  aspect-ratio: 1 / .9;
  animation: reveal-visual .9s .3s var(--ease-out) both;
}
.hero__blob { position: absolute; inset: 3% 0 0 5%; width: 94%; height: auto; filter: drop-shadow(0 30px 50px rgba(36, 107, 99, .28)); }
.hero__art {
  position: absolute; left: 1%; bottom: 5%; width: 98%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 97%);
          mask-image: linear-gradient(to bottom, #000 78%, transparent 97%);
}

.hero__cross { position: absolute; color: var(--teal); opacity: .28; font-size: 1.25rem; animation: sway 7s ease-in-out infinite; }
.hero__cross--a { top: 6%; left: 24%; }
.hero__cross--b { top: 20%; right: 4%; font-size: .9rem; animation-delay: -2.5s; opacity: .22; }
.hero__cross--c { bottom: 18%; right: 12%; font-size: 1.1rem; animation-delay: -4.5s; color: var(--coral); opacity: .35; }

.float-card {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1rem .7rem .75rem; border-radius: 18px;
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 14px 34px rgba(23, 35, 33, .14);
  font-family: var(--font-head); font-size: .875rem; font-weight: 700; line-height: 1.3; color: var(--ink);
  animation: bob 6s ease-in-out infinite;
}
@supports (backdrop-filter: blur(1px)) { .float-card { background: rgba(255, 255, 255, .78); backdrop-filter: blur(12px); } }
.float-card small { display: block; font-family: var(--font); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.float-card__ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--sage); color: var(--teal-deep); font-size: 1.05rem; }
.float-card--a { top: 10%; left: -3%; }
.float-card--b { top: 46%; right: -4%; animation-delay: -2s; }
.float-card--c { bottom: 4%; left: 4%; animation-delay: -4s; }

/* -------------------------------------------------- 7 sections & prose */

.section { padding: clamp(2.75rem, 1rem + 4.5vw, 5.5rem) 0; }
/* Consecutive plain sections share one gap instead of stacking two paddings. */
.section:not(.section--alt, .section--media, .section--cta) + .section:not(.section--alt, .section--media, .section--cta) { padding-top: 0; }
/* A section that is only a heading sits close to the content it introduces. */
.section:has(> .wrap > .cols > .col > h2:only-child) { padding-bottom: 1.75rem; }
.section--alt { background: linear-gradient(180deg, var(--sage), var(--mist)); }

/* A photographic band floated as a rounded panel, teal-washed for legibility. */
.section--media {
  position: relative; isolation: isolate; overflow: hidden;
  margin-inline: var(--gutter); border-radius: var(--r-lg);
  background-color: var(--teal-deep); background-size: cover; background-position: center; background-repeat: no-repeat;
}
.section--media::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(260deg, rgba(23, 35, 33, .90) 0%, rgba(36, 107, 99, .86) 52%, rgba(36, 107, 99, .18) 100%);
}
.section--media, .section--media :is(h1, h2, h3, h4, h5, h6), .section--media p, .section--media li { color: #fff; }
.section--media p, .section--media li { color: rgba(255, 255, 255, .92); }
.section--media .icon { color: #fff; }
.section--media .prose ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.section--media .prose li { display: flex; align-items: center; gap: .75rem; margin: 0; padding: .8rem 1rem;
                            border-radius: var(--r-sm); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); font-weight: 600; }
.section--media .prose li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }

/* Column model mirrors the original: percentage widths on the columns and a
   fixed inner gutter, rather than a flex gap, so the proportions carry over. */
.cols { display: flex; flex-wrap: wrap; margin-inline: -18px; row-gap: 2rem; }
.col { flex: 0 1 var(--col-w, 100%); min-width: 0; padding-inline: 18px; }
.col:empty { padding-block: 0; }
.cols .cols { margin-inline: -18px; margin-top: 1.5rem; }

.prose > :last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.25em; }
.prose li { margin-bottom: .45em; }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose a:not(.btn) { text-decoration: underline; text-decoration-color: rgba(36, 107, 99, .35); text-underline-offset: 3px; }
.prose a:not(.btn):hover { text-decoration-color: currentColor; }
.section--media .prose a:not(.btn), .section--cta .prose a:not(.btn) { color: #fff; }

.eyebrow {
  display: inline-block; margin: 0 0 .9rem;
  font-family: var(--font); font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--teal-deep);
}
.deco-icon { margin: 0 0 .75rem; color: var(--teal); line-height: 1; }
.doc-link { font-weight: 600; }

/* home: the "How we're different" trio reads as a numbered list */
.page--index .section--alt { counter-reset: diff; }
.page--index .section--alt h4 {
  counter-increment: diff; position: relative; margin: 2rem 0 .5rem; padding-left: 3.4rem;
  font-size: 1.25rem;
}
.page--index .section--alt h4::before {
  content: counter(diff, decimal-leading-zero);
  position: absolute; left: 0; top: -.15rem; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 12px;
  background: var(--teal-deep); color: #fff; font-size: .875rem; font-weight: 700;
}
.page--index .section--alt h2 + h4 { margin-top: 1.5rem; }
.page--index .section--alt h4 + .prose { padding-left: 3.4rem; }

/* --------------------------------------------------------- 8 page heads */

.page-head {
  position: relative; overflow: hidden;
  padding: clamp(2.75rem, 1rem + 5vw, 5rem) 0 0;
}
.page-head::after {
  content: ""; position: absolute; top: 40px; right: clamp(2.25rem, 1rem + 6vw, 7rem); width: 120px; height: 120px; border-radius: 50%;
  border: 1.5px solid rgba(59, 122, 112, .22); box-shadow: 0 0 0 20px rgba(59, 122, 112, .05), 0 0 0 21px rgba(59, 122, 112, .08);
  pointer-events: none;
}
.page-head .wrap { position: relative; z-index: 1; }
.page-head--plain { padding-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.page-head__title { margin: 0 0 clamp(1.5rem, 1rem + 1.5vw, 2.5rem); font-size: clamp(2.125rem, 1.2rem + 3.2vw, 3.6rem); font-weight: 800; letter-spacing: -.035em; }
.page-head--plain .page-head__title { margin-bottom: 0; }
.page-head__media {
  position: relative; z-index: 1; width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter);
}
.page-head__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover;
  border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-2);
}

/* ------------------------------------------------------ 9 media & lists */

.fig { margin: 0 0 1.5rem; }
.fig:last-child { margin-bottom: 0; }
.fig img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.col > .fig img { aspect-ratio: 5 / 4.6; object-fit: cover; }

/* No min-height here: combined with aspect-ratio it would widen the box past
   the viewport on narrow screens instead of making it taller. */
.map {
  position: relative; aspect-ratio: 16 / 7; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.ticks { margin: 0 0 1.2em; padding: 0; list-style: none; }
.ticks li { display: flex; gap: .75rem; align-items: baseline; margin-bottom: .55rem; }
.ticks .icon { color: var(--teal); }
.ticks .icon--bullet { color: var(--coral); font-size: .8em; }

.icon-box {
  position: relative; height: 100%; margin: 0; padding: 1.6rem 1.6rem 1.7rem 1.6rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.icon-box::before {
  content: ""; display: block; width: 42px; height: 42px; margin-bottom: 1rem; border-radius: 13px;
  background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23246B63' d='M9 4h6v5h5v6h-5v5H9v-5H4V9h5z'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.icon-box:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: rgba(59, 122, 112, .3); }
.icon-box__icon { color: var(--teal); line-height: 1; }
.icon-box__body h3 { margin-bottom: .5rem; font-size: 1.1875rem; }
.icon-box__body p { margin: 0; }
.cols .cols > .col:has(.icon-box) { display: flex; }
.cols .cols > .col:has(.icon-box) > .icon-box { flex: 1; }

/* -------------------------------------------------- 10 counters, CTA */

.counters {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
  margin: 0; padding: 0; list-style: none; text-align: left;
}
.counter {
  display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
  padding: 1.6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1);
}
.counter .icon { display: grid; place-items: center; box-sizing: content-box; width: 1.5rem; height: 1.5rem; padding: .7rem;
                 margin-bottom: .6rem; border-radius: 14px; background: var(--sage); color: var(--teal-deep); }
.counter__num {
  font-family: var(--font-head); font-size: clamp(2.25rem, 1.5rem + 2.2vw, 3.25rem);
  font-weight: 800; letter-spacing: -.03em; color: var(--teal-deep); line-height: 1; font-variant-numeric: tabular-nums;
}
.counter__label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

.cta-band {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-lg);
  background: var(--teal-deep) center / cover no-repeat;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .12) 0 2px, transparent 3px) 0 0 / 28px 28px,
    linear-gradient(100deg, rgba(23, 35, 33, .86), rgba(36, 107, 99, .78));
}
.cta-band__inner {
  display: flex; flex-direction: column; gap: 1.75rem; align-items: center; justify-content: center;
  min-height: 300px; padding: clamp(2.25rem, 1.5rem + 3vw, 4rem) var(--gutter); text-align: center;
}
.cta-band__title {
  max-width: 18em; margin: 0; color: #fff;
  font-family: var(--font-head); font-weight: 800; letter-spacing: -.03em; line-height: 1.12;
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.25rem);
}

/* a section whose job is one call to action (service pages) */
.section--cta > .wrap {
  padding: clamp(2rem, 1rem + 3vw, 3.5rem); border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--teal-deep), var(--teal));
  box-shadow: var(--shadow-2);
}
.section--cta { padding-block: clamp(2rem, 1rem + 3vw, 4rem); padding-inline: var(--gutter); }
.section--cta .cols { align-items: center; }
.section--cta :is(h2, h3, h4), .section--cta p { color: #fff; }
.section--cta .btn-wrap { margin: 0; }

/* Travel Clinic call to action: a two-tone capsule (label half + cap half).
   Colour stays in the teal/sage family; coral appears only as the seam. */
.capsule-cta {
  --cap-ease: cubic-bezier(.25, 1, .5, 1);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: stretch; min-height: 56px; border-radius: 999px;
  background: linear-gradient(180deg, #fff, var(--sage));
  color: var(--teal-deep); font-family: var(--font-head); font-size: 1.0625rem; font-weight: 700; letter-spacing: .005em;
  border: 1px solid rgba(59, 122, 112, .35);
  box-shadow: inset 0 -3px 6px rgba(23, 35, 33, .06), 0 12px 26px rgba(36, 107, 99, .2);
  transition: transform .45s var(--cap-ease), box-shadow .45s var(--cap-ease);
}
.capsule-cta__label { display: flex; align-items: center; padding: 0 1.4rem 0 2rem; line-height: 1.2; }
.capsule-cta__cap {
  position: relative; display: grid; place-items: center; width: 64px;
  background: linear-gradient(180deg, var(--teal), var(--teal-deep));
  color: #fff; border-left: 3px solid var(--coral);
  box-shadow: inset 0 3px 5px rgba(255, 255, 255, .22);
}
.capsule-cta__arrow { width: 22px; height: 22px; transition: transform .45s var(--cap-ease); }
.capsule-cta::before {                                  /* glass highlight along the top edge */
  content: ""; position: absolute; z-index: 1; left: 22px; right: 76px; top: 6px; height: 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .7); pointer-events: none;
}
.capsule-cta::after {                                   /* shine: only on hover/focus */
  content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-130%) skewX(-18deg); pointer-events: none;
}
.capsule-cta:hover, .capsule-cta:focus-visible {
  color: var(--teal-deep); transform: translateY(-2px) scale(1.02);
  box-shadow: inset 0 -3px 6px rgba(23, 35, 33, .06), 0 18px 34px rgba(36, 107, 99, .3);
}
.capsule-cta:hover::after, .capsule-cta:focus-visible::after { transform: translateX(380%) skewX(-18deg); transition: transform .9s var(--cap-ease); }
.capsule-cta:hover .capsule-cta__arrow, .capsule-cta:focus-visible .capsule-cta__arrow { transform: translateX(4px); }
.capsule-cta:active { transform: translateY(0) scale(1); }
/* Travel Clinic CTA section: plain ground, no band */
.section--capsule { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.section--capsule .btn-wrap { margin: 0; }
@media (max-width: 479px) {
  .capsule-cta { min-height: 54px; font-size: 1rem; }
  .capsule-cta__label { padding-left: 1.5rem; }
  .capsule-cta__cap { width: 56px; }
}

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

.cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, .5rem + 2vw, 2rem); margin: 0; padding: 0; list-style: none;
}
.card { min-width: 0; }
.card__link {
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden;
  color: inherit; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.card__link::after {                                  /* soft "healing glow" on hover */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px 220px at 50% 0%, rgba(59, 122, 112, .13), transparent 70%);
  transition: opacity var(--t) var(--ease);
}
.card__media { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--sage); }
.card__img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.card__body { display: flex; flex: 1; flex-direction: column; gap: .65rem; padding: 1.6rem 1.75rem 1.9rem; }
.card__title {
  display: block; color: var(--ink);
  font-family: var(--font-head); font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.25;
  transition: color var(--t-fast) var(--ease);
}
.card__text { display: block; flex: 1; margin-bottom: .5rem; }
.card__more {
  display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; min-height: 44px; margin-top: .25rem;
  padding: .55em 1.15em .55em 1.3em; border: 1.5px solid rgba(59, 122, 112, .3); border-radius: 999px;
  background: linear-gradient(100deg, var(--sage), var(--mist));
  color: var(--teal-deep); font-family: var(--font-head); font-size: .9375rem; font-weight: 700;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.card__more::after { content: "\2192"; transition: transform var(--t) var(--ease); }
.card__link:hover, .card__link:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: rgba(59, 122, 112, .3); }
.card__link:hover::after, .card__link:focus-visible::after { opacity: 1; }
.card__link:hover .card__img, .card__link:focus-visible .card__img { transform: scale(1.06); }
.card__link:hover .card__title, .card__link:focus-visible .card__title { color: var(--teal-deep); }
.card__link:hover .card__more, .card__link:focus-visible .card__more { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.card__link:hover .card__more::after, .card__link:focus-visible .card__more::after { transform: translateX(5px); }

span.card__img { background: var(--sage) center / cover no-repeat; }

/* ------------------------------------------- 14 team, contact, licence */

.team-card {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
.team-card__media { position: relative; overflow: hidden; min-height: 380px; background: var(--sage); }
.team-card__media .fig { height: 100%; margin: 0; }
.team-card__media .fig img { width: 100%; height: 100%; min-height: 380px; aspect-ratio: auto; object-fit: cover; border-radius: 0; box-shadow: none; transition: transform .8s var(--ease); }
.team-card:hover .team-card__media img { transform: scale(1.03); }
.team-card__scan {                                    /* a single light pass across the photo */
  position: absolute; top: 0; bottom: 0; left: 0; width: 38%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: translateX(-120%) skewX(-18deg);
}
.team-card.is-in .team-card__scan { animation: sweep 1.6s .5s var(--ease) 1 both; }
/* generic pharmacist panel (replaces the photograph): pill badge with calm pulse rings */
.team-card__media--mark {
  display: grid; place-items: center;
  background: radial-gradient(520px 320px at 30% 20%, rgba(255, 255, 255, .16), transparent 60%),
              linear-gradient(135deg, var(--teal-deep), var(--teal));
}
.team-card__media--mark::before {
  content: ""; position: absolute; inset: 0; opacity: .6;
  background: radial-gradient(rgba(255, 255, 255, .22) 1.2px, transparent 1.6px) 0 0 / 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 25%, #000 90%); mask-image: radial-gradient(ellipse at center, transparent 25%, #000 90%);
}
.mark__badge {
  position: relative; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%;
  background: #fff; color: var(--teal-deep); font-size: 3rem; box-shadow: 0 18px 40px rgba(23, 35, 33, .28);
}
.mark__ring { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .5); opacity: 0; animation: amb-ring 9s ease-out infinite; }
.mark__ring--b { animation-delay: -4.5s; }
.team-card__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.75rem, 1rem + 3.5vw, 4rem); }
.team-card__title { margin-bottom: 1rem; }
.team-card__names {
  display: flex; align-items: center; gap: .85rem; margin: 1.5rem 0 0; padding: .95rem 1.15rem;
  font-family: var(--font-head); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--r);
}
.team-card__names .icon { display: grid; place-items: center; box-sizing: content-box; width: 1.1rem; height: 1.1rem; padding: .55rem;
                          border-radius: 12px; background: var(--teal-deep); color: #fff; }
.team-card .btn-wrap { margin-top: 1.75rem; }

.section--cards .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-inline: 0; }
.section--cards .col {
  display: flex; flex-direction: column; align-items: flex-start; padding: 1.75rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.section--cards .col:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.section--cards h4 { margin-bottom: .6rem; }
.section--cards .prose p { margin-bottom: .5rem; }
.section--cards .btn-wrap { margin-top: 1.1rem; }
.card-ico {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1.1rem;
  border-radius: 15px; background: var(--sage); color: var(--teal-deep); font-size: 1.2rem;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
}
.section--cards .col:hover .card-ico { background: var(--teal-deep); color: #fff; transform: rotate(-6deg) scale(1.06); }

/* the certificate: framed like a document, never altered */
.fig--doc {
  position: relative; padding: clamp(.75rem, .5rem + 1vw, 1.25rem); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.fig--doc::before {
  content: ""; position: absolute; inset: 8px; border: 1.5px dashed rgba(59, 122, 112, .28);
  border-radius: calc(var(--r-lg) - 8px); pointer-events: none;
}
.fig--doc img { aspect-ratio: auto !important; border-radius: 12px; box-shadow: none; }
.fig--doc:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(23, 35, 33, .04), 0 30px 60px rgba(36, 107, 99, .22); }

/* ------------------------------------------ 15 FAQ, tables and forms */

.faq-list { display: grid; gap: .9rem; }
.faq { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); overflow: hidden;
       transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.faq[open] { border-color: rgba(59, 122, 112, .35); box-shadow: var(--shadow-2); }
.faq summary {
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.5rem; cursor: pointer; list-style: none;
  color: var(--ink); font-family: var(--font-head); font-size: 1.0625rem; font-weight: 700; line-height: 1.4; letter-spacing: -.01em;
  transition: color var(--t-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--teal-deep); }
.faq summary .icon { display: grid; box-sizing: content-box; width: 1rem; height: 1rem; padding: .5rem; border-radius: 50%;
                     background: var(--sage); color: var(--teal-deep); font-size: 1rem; transition: transform var(--t) var(--ease); }
.faq summary .icon--close, .faq[open] summary .icon--open { display: none; }
.faq[open] summary .icon--close { display: grid; }
.faq__body { padding: 0 1.5rem 1.4rem; }

.table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden;
         background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); }
.table th, .table td { padding: .95rem 1.25rem; text-align: left; font-size: .9375rem; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.table th { font-weight: 600; color: var(--ink); }
.table tr:last-child :is(th, td) { border-bottom: 0; }
.table tr:nth-child(even) { background: var(--mist); }
.table tr.is-today { background: var(--sage); }
.table tr.is-today th { position: relative; padding-left: 2.1rem; }
.table tr.is-today th::before { content: ""; position: absolute; left: 1.05rem; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--teal-deep); }

.form { display: grid; gap: 1.15rem; max-width: 680px; }
.form__row { display: grid; gap: .45rem; }
.form label { font-size: .9375rem; font-weight: 600; color: var(--ink); }
.form input, .form textarea {
  width: 100%; padding: .95rem 1.15rem;
  border: 1.5px solid var(--line-strong); border-radius: 14px;
  font: inherit; font-size: 1rem; color: var(--ink); background: #fff;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form textarea { resize: vertical; min-height: 9rem; }
.form input:hover, .form textarea:hover { border-color: rgba(59, 122, 112, .5); }
.form input:focus, .form textarea:focus { outline: 0; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(59, 122, 112, .18); }
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: var(--coral-ink); }
.form__hp { position: absolute; left: -9999px; }
.form__consent { font-size: .8125rem; color: var(--ink-2); }
.form__actions { margin: 0; }
.form__status { margin: 0; min-height: 1.5em; font-size: .9375rem; font-weight: 500; }
.form__status.is-ok  { color: var(--teal-deep); }
.form__status.is-err { color: var(--coral-ink); }
.form__err { margin: .15rem 0 0; font-size: .8125rem; font-weight: 500; color: var(--coral-ink); }

.search--page { max-width: 600px; margin-top: 1.5rem; flex: none; }
.search--page input { padding-left: 1.4rem; font-size: 1rem; }
.search--page .btn--search { margin: 4px; min-height: 44px; padding: .6em 1.5em; }

.results { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.result { padding: 1.5rem 1.75rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1);
          transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.result:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.result h2 { margin-bottom: .3rem; font-size: 1.25rem; }
.result__url { margin-bottom: .6rem; font-size: .8125rem; color: var(--ink-2); }
.result mark { padding: 0 .15em; border-radius: 4px; background: rgba(255, 122, 89, .28); color: inherit; }

/* Full-page third-party embed (the Pointy product listing). */
.embed { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.embed--shop { height: clamp(620px, 78vh, 1000px); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* -------------------------------------------- 16 footer & floating bits */

.site-foot {
  position: relative; margin-top: 0; overflow: hidden;
  background:
    radial-gradient(700px 360px at 100% 0%, rgba(59, 122, 112, .35), transparent 65%),
    var(--ink);
  color: rgba(255, 255, 255, .78);
  font-size: .9688rem;
}
.site-foot::before {                                   /* faint pharmacy-cross pattern */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1.5' d='M25 20h6v5h5v6h-5v5h-6v-5h-5v-6h5z'/%3E%3C/svg%3E");
}
.site-foot .wrap { position: relative; }
.foot-grid {
  display: grid; grid-template-columns: 1.5fr .8fr 1.2fr 1fr; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  padding: clamp(3rem, 1.5rem + 4vw, 5rem) 0 clamp(2.25rem, 1.5rem + 2vw, 3.5rem);
}
.foot-logo { max-width: 230px; height: auto; margin-bottom: 1.2rem; filter: brightness(0) invert(1); }
.foot-col__title { margin-bottom: 1.1rem; color: #fff; font-size: 1.0625rem; letter-spacing: -.01em; }
.foot-licence {
  display: inline-flex; align-items: flex-start; gap: .65rem; margin-top: 1.25rem; padding: .8rem 1rem;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-sm); background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .9); font-size: .875rem; line-height: 1.45;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.foot-licence .icon { margin-top: .15em; color: var(--coral-soft); font-size: 1.1rem; }
.foot-licence:hover, .foot-licence:focus-visible { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); color: #fff; }

.foot-nav ul { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.foot-nav li.is-hidden { display: none; }
.foot-nav a {
  display: inline-block; padding: .3rem 0; color: rgba(255, 255, 255, .78); font-weight: 500;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size var(--t) var(--ease), color var(--t-fast);
}
.foot-nav a:hover, .foot-nav a:focus-visible, .foot-nav [aria-current] { color: #fff; background-size: 100% 1.5px; }

.contact-list { margin: 0; padding: 0; list-style: none; }
.contact-list li { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: .75rem; }
.contact-list .icon { margin-top: .4em; color: var(--coral-soft); }
.contact-list a { color: rgba(255, 255, 255, .88); }
.contact-list a:hover, .contact-list a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.colophon { position: relative; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .875rem; }
.colophon__inner { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; padding-block: 1.4rem; }
.colophon p { margin: 0; }
.colophon a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.colophon a:hover { text-decoration-color: currentColor; }

/* Footer motion: the hero's pharmacy layer (capsules, rising crosses, molecules,
   ECG trace) on the dark footer, plus a staggered entrance for its columns.
   Animation pauses while the footer is off screen (.is-live set from main.js). */
.foot-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.foot-orb { position: absolute; border-radius: 50%; filter: blur(80px); animation: drift 20s ease-in-out infinite; }
.foot-orb--a { width: 340px; height: 340px; left: -80px; bottom: -120px; background: rgba(59, 122, 112, .32); }
.foot-orb--b { width: 260px; height: 260px; right: 18%; top: -110px; background: rgba(255, 122, 89, .14);
               animation-duration: 26s; animation-direction: reverse; }
.foot-fx .pill { opacity: .3; box-shadow: none; }
.foot-fx .fx-cross { color: var(--coral-soft); animation-name: foot-rise; }
.foot-fx .fx-cross:nth-of-type(3n) { color: #fff; }
.foot-fx .molecule-wrap { color: #fff; opacity: .1; }
.foot-fx .molecule-wrap--a { left: -90px; top: auto; bottom: -70px; }
.foot-fx .molecule-wrap--b { right: -70px; top: -40px; bottom: auto; opacity: .08; }
.foot-fx .molecule .atom--o { fill: var(--coral-soft); }
.foot-ecg { position: absolute; left: 0; bottom: 56px; width: 100%; height: 52px; color: var(--coral-soft); opacity: .2; }
.foot-ecg path { stroke-dasharray: .3 1; animation: ecg 6s linear infinite; }
@keyframes foot-rise {
  0%   { transform: translate3d(0, 0, 0) scale(.7); opacity: 0; }
  15%  { opacity: .45; }
  100% { transform: translate3d(14px, -380px, 0) scale(1.15); opacity: 0; }
}
.js .site-foot:not(.is-live) .foot-fx * { animation-play-state: paused; }
.site-foot .foot-licence .icon { animation: bob 5s ease-in-out infinite; }
.site-foot .contact-list li { transition: transform var(--t) var(--ease); }
.site-foot .contact-list li:hover { transform: translateX(4px); }
.colophon.is-in { animation: rise .7s var(--ease-out) both; }

.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 55;
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 50%; background: var(--teal-deep); color: #fff; font-size: 1.1rem; cursor: pointer;
  box-shadow: 0 10px 24px rgba(36, 107, 99, .35);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t), background var(--t) var(--ease);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover, .to-top:focus-visible { background: var(--ink); transform: translateY(-3px); }

.call-fab {                                            /* phones only: one-tap call */
  position: fixed; left: 14px; bottom: 14px; z-index: 55; display: none; align-items: center; gap: .55rem;
  padding: .85rem 1.25rem; border-radius: 999px; background: var(--coral); color: var(--ink);
  font-family: var(--font-head); font-size: .9375rem; font-weight: 700; min-height: 48px;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .35), inset 0 -3px 6px rgba(23, 35, 33, .1), 0 12px 28px rgba(23, 35, 33, .28);
}
.call-fab:hover, .call-fab:focus-visible { color: var(--ink); }

/* ------------------------------------------------ ambient page backgrounds */

/* A fixed decorative layer behind every page (markup: build.py ambient_html).
   Two parallax wrappers: .amb__px--1 holds the shared orbs, .amb__px--2 the
   page's own art. Only transform/opacity animate; nothing here takes pointer
   events or sits above content. */
.amb { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.amb__px { position: absolute; inset: 0; will-change: transform; }
.amb__orb { position: absolute; border-radius: 50%; animation: drift 26s ease-in-out infinite; }
.amb__orb--a { width: 62vmax; height: 62vmax; left: -22vmax; top: -18vmax;
               background: radial-gradient(closest-side, rgba(59, 122, 112, .13), transparent); }
.amb__orb--b { width: 52vmax; height: 52vmax; right: -20vmax; bottom: -22vmax; animation-duration: 34s; animation-direction: reverse;
               background: radial-gradient(closest-side, rgba(255, 122, 89, .08), transparent); }
.amb__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* services / 404: capsules over a dot grid */
.amb__dots { position: absolute; inset: 0; opacity: .5;
  background: radial-gradient(rgba(59, 122, 112, .22) 1.2px, transparent 1.6px) 0 0 / 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, transparent 30%, #000 85%); mask-image: radial-gradient(ellipse at 50% 40%, transparent 30%, #000 85%); }
.amb .pill { opacity: .2; box-shadow: none; }

/* prescribing pharmacist: verification rings and a slow scan */
.amb__ring { position: absolute; right: 8vw; top: 38vh; width: 38vmin; height: 38vmin; margin: -19vmin -19vmin 0 0;
  border: 1.5px solid rgba(59, 122, 112, .3); border-radius: 50%; opacity: 0; animation: amb-ring 18s ease-out var(--l, 0s) infinite; }
.amb__ring--corner { right: auto; left: 50%; top: auto; bottom: -10vmin; margin: 0 0 0 -19vmin; }
@keyframes amb-ring { 0% { transform: scale(.35); opacity: 0; } 15% { opacity: .55; } 100% { transform: scale(2.6); opacity: 0; } }
.amb__scan { position: absolute; left: 0; right: 0; top: 0; height: 28vh;
  background: linear-gradient(180deg, transparent, rgba(59, 122, 112, .07), transparent); animation: amb-scan 16s ease-in-out infinite; }
@keyframes amb-scan { 0%, 100% { transform: translateY(-30vh); } 50% { transform: translateY(105vh); } }

/* travel clinic: routes with travelling points */
.amb__route { fill: none; stroke: rgba(59, 122, 112, .32); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 3 14; animation: amb-flow 40s linear infinite; }
.amb__route:nth-of-type(2) { animation-duration: 55s; stroke: rgba(255, 122, 89, .3); }
.amb__route:nth-of-type(3) { animation-duration: 48s; animation-direction: reverse; }
@keyframes amb-flow { to { stroke-dashoffset: -340; } }
.amb__mov { fill: var(--teal); opacity: .5; }

/* licence: lattice, light sweep and slow dashed rings */
.amb__lattice { position: absolute; inset: 0; opacity: .55;
  background: linear-gradient(rgba(59, 122, 112, .09) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(59, 122, 112, .09) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 50% 30%, #000, transparent 75%); }
.amb__sweep { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent); animation: amb-sweep 22s ease-in-out infinite; }
@keyframes amb-sweep { 0%, 35% { transform: translateX(0); } 100% { transform: translateX(350%); } }
.amb__orbit { fill: none; stroke: rgba(59, 122, 112, .28); stroke-width: 1.4; stroke-dasharray: 4 12; transform-box: fill-box; transform-origin: center; animation: spin 140s linear infinite; }
.amb__orbit--b { animation-direction: reverse; animation-duration: 190s; stroke: rgba(59, 122, 112, .2); }

/* contact: connection nodes at the edges, calm pulse */
.amb__net line { stroke: rgba(59, 122, 112, .22); stroke-width: 1.2; }
.amb__node { fill: var(--teal); opacity: .3; animation: amb-node 7s ease-in-out var(--l, 0s) infinite; }
@keyframes amb-node { 0%, 100% { opacity: .22; } 50% { opacity: .65; } }

/* pages with a coloured header ground: let the layer show through the header block */
.page-head { background:
    radial-gradient(700px 360px at 92% 0%, rgba(226, 239, 233, .85), transparent 65%),
    linear-gradient(180deg, rgba(244, 249, 247, .75), rgba(252, 253, 252, 0)); }

@media (max-width: 767px) {
  .hero .pill:nth-child(-n+2), .foot-fx .pill { display: none; }              /* keep capsules off the headline and footer text */
  .amb__route:nth-of-type(n+2) { display: none; }
  .amb__svg { opacity: .7; }
  .page-head::after { top: 28px; width: 64px; height: 64px; right: 1.75rem; box-shadow: 0 0 0 14px rgba(59, 122, 112, .05); }
  .amb__orb--b, .amb .pill:nth-child(n+4), .amb__ring:nth-of-type(n+3), .amb__net, .amb__node, .amb__orbit--b { display: none; }
  .amb__dots, .amb__lattice { opacity: .35; }
  .amb__px { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .amb *, .amb *::before, .mark__ring { animation: none !important; }
  .mark__ring { display: none; }
  .amb__mov, .amb__sweep, .amb__scan, .amb__ring { display: none; }
}
@media print { .amb { display: none !important; } }

/* ------------------------------------------------------ 11 reveal motion */

.js .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .reveal--scale { transform: scale(.97); }
.js .reveal--mask { transform: scale(1.03); clip-path: inset(7% 7% 7% 7% round var(--r-lg)); transition-property: opacity, transform, clip-path; transition-duration: .9s; }
.js .reveal.is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round var(--r-lg)); }
.js .reveal--mask.is-in { clip-path: inset(0 0 0 0 round 0); }

/* ----------------------------------------------------------- 17 responsive */

@media (max-width: 1100px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .search { flex-basis: 200px; }
}

@media (max-width: 1023px) {
  :root { --mast-h: 68px; }
  .site-head.is-stuck .masthead { height: 60px; }
  .burger { display: grid; place-items: center; }
  .masthead__inner > .search { display: none; }
  .search--panel { display: flex; flex: none; margin: .5rem 0 1rem; }

  /* The panel is shown/hidden with display rather than animating height: an
     interrupted height transition can leave the menu unreachable. */
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
         max-height: calc(100vh - var(--mast-h) - var(--topbar-h)); overflow-y: auto;
         padding: .5rem var(--gutter) 1rem; background: var(--paper);
         border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px rgba(23, 35, 33, .12); }
  .nav.is-open { display: block; animation: panel .26s var(--ease-out) both; }
  .nav__list { display: block; }
  .nav__list > li { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line); }
  .nav.is-open .nav__list > li { animation: link-in .4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }
  .nav__list > li > a { flex: 1 1 auto; padding: 1rem .25rem; border-radius: 0; font-size: 1.0625rem; background: transparent !important; }
  .nav__list > li.is-current > a { color: var(--teal-deep); }
  .nav__list > li.has-sub > a::after { display: none; }

  .nav__toggle {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 999px; background: var(--sage); color: var(--teal-deep); cursor: pointer;
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .6), 0 3px 8px rgba(36, 107, 99, .14);
    transition: transform var(--t) var(--ease);
  }
  .nav__toggle[aria-expanded="true"] { transform: rotate(180deg); }

  .nav__sub {
    position: static; flex-basis: 100%; display: none; min-width: 0; margin: 0; padding: 0 0 .75rem;
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
    opacity: 1; visibility: visible; transform: none;
  }
  .nav__sub::before { display: none; }
  .nav__sub.is-open { display: block; }
  .nav__sub a { padding: .7rem .25rem .7rem 1rem; }
  .nav__list > li:hover > .nav__sub, .nav__list > li:focus-within > .nav__sub { transform: none; }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 520px; }
  .counters { grid-template-columns: repeat(2, 1fr); }
  .team-card { grid-template-columns: 1fr; }
  .team-card__media, .team-card__media .fig img { min-height: 280px; max-height: 360px; }
  .team-card__media--mark { min-height: 220px; max-height: 240px; }
  .section--cards .cols { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .topbar__mail { display: none; }
  .topbar ul { gap: 1.1rem; }
  .cols { margin-inline: 0; row-gap: 1.75rem; }
  .col { flex-basis: 100% !important; padding-inline: 0; }
  .col:empty { display: none; }
  .cols .cols { margin-inline: 0; }
  .cards { grid-template-columns: 1fr; }
  .map { aspect-ratio: 4 / 3; }
  .page-head__media img { aspect-ratio: 16 / 9; }
  .section--media { margin-inline: .5rem; border-radius: var(--r); }
  .section--media::before { background: linear-gradient(180deg, rgba(23, 35, 33, .86), rgba(36, 107, 99, .88)); }
  .foot-grid { grid-template-columns: 1fr; }
  .colophon__inner { justify-content: center; text-align: center; padding-bottom: 5rem; }
  .call-fab { display: inline-flex; }
  .to-top { right: 12px; bottom: 12px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .pill:nth-child(n+5), .fx-cross:nth-of-type(n+5), .molecule-wrap--b { display: none; }
  .molecule-wrap--a { width: 220px; left: -60px; }
  .hero__assure { flex-direction: column; gap: .6rem; }
  .float-card { padding: .5rem .8rem .5rem .55rem; font-size: .8125rem; }
  .float-card--a { left: 0; } .float-card--b { right: 0; }
  .float-card__ico { width: 32px; height: 32px; }
  .page--index .section--alt h4 + .prose { padding-left: 0; }
}

@media (max-width: 479px) {
  .counters { gap: .75rem; }
  .counter { padding: 1.15rem; }
  .counter__label { font-size: .6875rem; }
  .float-card--b { display: none; }
  .btn { padding: .85em 1.4em; }
  .table th, .table td { padding: .8rem 1rem; }
}

/* ------------------------------------------------ 18 reduced motion, print */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  @view-transition { navigation: none; }
  .hero__orb, .hero__cross, .float-card, .hero__ecg path, .pill, .fx-cross, .molecule, .molecule .atom,
  .foot-orb, .foot-ecg path, .site-foot .foot-licence .icon { animation: none !important; }
  .js .reveal { opacity: 1; transform: none; clip-path: none; }
  .card__link:hover, .card__link:hover .card__img, .icon-box:hover, .team-card:hover .team-card__media img,
  .section--cards .col:hover, .fig--doc:hover, .btn:hover { transform: none; }
  .capsule-cta, .capsule-cta:hover, .capsule-cta:focus-visible, .capsule-cta:hover .capsule-cta__arrow { transform: none; }
  .capsule-cta::after, .btn::after { display: none; }
  .btn:hover, .btn:focus-visible, .btn:active, .btn:hover .btn__arrow, .btn:focus-visible .btn__arrow, .search__btn:hover { transform: none; }
}

@media print {
  .site-head, .topbar, .site-foot, .to-top, .call-fab, .search, .burger, .hero__bg, .hero__visual { display: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  body { color: #000; background: #fff; }
}

/* Contact page: with the enquiry form withdrawn, the hours table keeps a readable width */
.page--contacts-2 .table { max-width: 640px; }

/* Licence page: breathing room between the Proprietor block and the Contacts list */
.page--license .col > .prose + h6.h { margin-top: 1.6rem; }

/* ------------------------------------------------ pharmaceutical shimmer */

/* One small system, three ideas:
   .sheen     a soft light pass over a card surface, on hover/focus only. It is a
              background layer, so it always sits UNDER the text and cannot dim it.
   .glint     a capsule highlight that crosses primary buttons now and then (every
              ~8s) and again on hover; it sits behind the label.
   .amb / hero / footer lights are slow transform-only passes (pointer-events none).
   Hierarchy: hero and main cards noticeable, secondary cards restrained, text and
   forms untouched. Everything stops under prefers-reduced-motion. */
.card__link, .icon-box, .section--cards .col, .result, .counter, .team-card, .fig--doc, .float-card {
  background-image: linear-gradient(105deg, transparent 36%, rgba(59, 122, 112, .11) 50%, transparent 64%);
  background-repeat: no-repeat; background-size: 260% 100%; background-position: 140% 0;
}
.card__link:hover, .card__link:focus-visible, .icon-box:hover, .section--cards .col:hover, .result:hover,
.counter:hover, .team-card:hover, .fig--doc:hover {
  background-position: -140% 0; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease), background-position 1.2s cubic-bezier(.25, 1, .5, 1);
}
/* the card icon wakes up with the light */
.section--cards .col:hover .card-ico, .icon-box:hover::before { box-shadow: 0 0 0 6px rgba(59, 122, 112, .12); }
.card-ico, .icon-box::before { transition: box-shadow .5s var(--ease), background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }

/* capsule glint on primary buttons */
@keyframes glint-idle  { 0%, 84% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(380%) skewX(-18deg); } }
@keyframes glint-hover { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(380%) skewX(-18deg); } }
.btn:not(.btn--outline, .btn--sm, [disabled])::after { animation: glint-idle 8s ease-in-out 2.5s infinite; }
.capsule-cta::after { animation: glint-idle 8.5s ease-in-out 1s infinite; }
.btn:not([disabled]):hover::after, .btn:not([disabled]):focus-visible::after,
.capsule-cta:hover::after, .capsule-cta:focus-visible::after { animation: glint-hover .9s cubic-bezier(.25, 1, .5, 1) 1 both; }
.capsule-cta::after { z-index: 1; }                       /* behind the label and the cap */
.capsule-cta__label, .capsule-cta__cap { z-index: 3; }
.capsule-cta__label { position: relative; }
.capsule-cta { box-shadow: inset 0 -3px 6px rgba(23, 35, 33, .06), 0 12px 26px rgba(36, 107, 99, .2), 0 0 0 0 rgba(59, 122, 112, 0); }

/* home hero: a slow, faint pass of morning light */
.hero__bg::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -45%; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), rgba(226, 239, 233, .35), transparent);
  transform: translateX(0) skewX(-16deg); animation: light-pass 22s ease-in-out 3s infinite;
}
@keyframes light-pass { 0%, 40% { transform: translateX(0) skewX(-16deg); } 100% { transform: translateX(480%) skewX(-16deg); } }

/* pharmacist panel: the badge's halo plus a slow highlight across the surface */
.team-card__media--mark::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: -50%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .14), transparent);
  transform: skewX(-16deg); animation: light-pass 15s ease-in-out 1s infinite;
}
.mark__badge { animation: badge-breathe 7s ease-in-out infinite; }
@keyframes badge-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* licence page: clinical cross pattern, a soft halo on the certificate frame */
.amb__crosses {
  position: absolute; inset: 0; opacity: .5; animation: amb-fade 14s ease-in-out infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath fill='none' stroke='%233B7A70' stroke-opacity='.16' stroke-width='1.4' d='M43 36h10v7h7v10h-7v7H43v-7h-7V43h7z'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000, transparent 78%); mask-image: radial-gradient(ellipse at 50% 35%, #000, transparent 78%);
}
@keyframes amb-fade { 0%, 100% { opacity: .25; } 50% { opacity: .6; } }
.page--license .fig--doc { box-shadow: 0 2px 4px rgba(23, 35, 33, .04), 0 24px 56px rgba(59, 122, 112, .16), 0 0 0 7px rgba(59, 122, 112, .05); }

/* page lights: services, travel clinic and contact each breathe a little differently */
@keyframes amb-breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.14); opacity: 1; } }
.amb--travel .amb__orb--a { animation: amb-breathe 13s ease-in-out infinite; background: radial-gradient(closest-side, rgba(59, 122, 112, .17), transparent); }
.amb--contact .amb__orb--a { animation: amb-breathe 17s ease-in-out infinite; }
.amb--services .amb__orb--b { animation: amb-breathe 19s ease-in-out infinite; }

/* footer: a very slow light pass over the dark teal, only while the footer is on screen */
.foot-fx::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(226, 239, 233, .07), transparent);
  transform: skewX(-16deg); animation: light-pass 26s ease-in-out infinite;
}
.js .site-foot:not(.is-live) .foot-fx::after { animation-play-state: paused; }

@media (max-width: 1023px) {
  .hero__bg::after { opacity: .6; }
}
@media (max-width: 767px) {
  .hero__bg::after, .foot-fx::after, .amb__crosses { display: none; }
  .btn:not(.btn--outline, .btn--sm, [disabled])::after, .capsule-cta::after { animation-duration: 10s; }
  .card__link, .icon-box, .section--cards .col, .result, .counter, .team-card, .fig--doc, .float-card { background-image: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg::after, .foot-fx::after, .team-card__media--mark::after, .amb__crosses, .mark__badge,
  .btn::after, .capsule-cta::after { animation: none !important; }
  .hero__bg::after, .foot-fx::after, .team-card__media--mark::after { display: none; }
  .card__link, .icon-box, .section--cards .col, .result, .counter, .team-card, .fig--doc, .float-card { background-image: none; }
  .amb--travel .amb__orb--a, .amb--contact .amb__orb--a, .amb--services .amb__orb--b { animation: none !important; }
}
@media print { .hero__bg::after, .foot-fx::after { display: none !important; } }

/* service cards: hovering the link must not recolour the description (a:hover is coral) */
.card__link:hover, .card__link:focus-visible { color: var(--ink-2); }

/* medicines drifting around the pharmacist badge (decorative, transform/opacity only) */
.team-card__media--mark .med, .team-card__media--mark .med-cross { position: absolute; left: var(--x); top: var(--y); pointer-events: none; }
.med { opacity: .9; transform: rotate(var(--r, 0deg)); animation: pill-drift var(--d, 14s) ease-in-out var(--l, 0s) infinite; }
.med--cap-a, .med--cap-b, .med--cap-c {
  width: calc(58px * var(--s, 1)); height: calc(24px * var(--s, 1)); border-radius: 999px;
  box-shadow: inset 0 -3px 5px rgba(23, 35, 33, .16), 0 10px 18px rgba(12, 40, 36, .28);
}
.med--cap-a { background: linear-gradient(90deg, #fff 0 50%, #bcd9cf 50% 100%); }              /* white + mint */
.med--cap-b { background: linear-gradient(90deg, var(--sage) 0 50%, #fff 50% 100%); }              /* sage + white */
.med--cap-c { background: linear-gradient(90deg, var(--coral-soft) 0 50%, #fff 50% 100%); }        /* the one touch of coral */
.med--cap-a::after, .med--cap-b::after, .med--cap-c::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: 16%; height: 20%; border-radius: 999px; background: rgba(255, 255, 255, .6);
}
.med--tab {
  width: calc(30px * var(--s, 1)); height: calc(30px * var(--s, 1)); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--sage) 75%);
  box-shadow: inset 0 -3px 5px rgba(23, 35, 33, .14), 0 8px 16px rgba(12, 40, 36, .26);
}
.med--tab::after { content: ""; position: absolute; left: 18%; right: 18%; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: rgba(36, 107, 99, .35); }
.med-cross { color: #fff; font-size: 1rem; opacity: 0; animation: med-rise 11s ease-in var(--l, 0s) infinite; }
@keyframes med-rise { 0% { transform: translateY(18px) scale(.7); opacity: 0; } 20% { opacity: .55; } 100% { transform: translateY(-120px) scale(1.15); opacity: 0; } }
@media (max-width: 767px) {
  .team-card__media--mark .med:nth-of-type(n+6), .team-card__media--mark .med-cross:nth-of-type(n+3) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .med, .med-cross { animation: none !important; } .med-cross { display: none; } }

/* ---------------------------------------- page corner Rx emblem (original SVG) */

/* Replaces the plain ring on Services, Licence and Contact: same size and place, now a
   pharmacy emblem. Cycle (~7s): the Rx draws once on load, then a soft mint light travels
   along its strokes, the cross lights up, and it rests. The symbol itself never moves. */
.page-head--mark::after { display: none; }
.page-mark {
  --mk-cycle: 7s; --mk-halo: rgba(59, 122, 112, .22); --mk-spin: 120s;
  position: absolute; z-index: 0; top: 40px; right: clamp(2.25rem, 1rem + 6vw, 7rem); width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff, var(--mist) 62%, var(--sage));
  border: 1.5px solid rgba(59, 122, 112, .3);
  box-shadow: 0 0 0 14px rgba(59, 122, 112, .05), 0 0 0 15px rgba(59, 122, 112, .09), 0 14px 30px rgba(36, 107, 99, .16), inset 0 -6px 12px rgba(36, 107, 99, .08);
  pointer-events: none;
}
.page-mark--services { --mk-cycle: 5.5s; }
.page-mark--licence  { --mk-cycle: 9s; --mk-spin: 200s; }
.page-mark--contact  { --mk-halo: rgba(255, 122, 89, .26); --mk-cycle: 7s; }
.page-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mk__ring { fill: none; stroke: rgba(59, 122, 112, .35); stroke-width: 1; stroke-dasharray: 2 7; stroke-linecap: round;
            transform-box: fill-box; transform-origin: center; animation: spin var(--mk-spin) linear infinite; }
.mk__base path, .mk__spark path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mk__base path { stroke: var(--teal-deep); stroke-width: 7; stroke-dasharray: 1; stroke-dashoffset: 0; animation: mk-draw 1.6s cubic-bezier(.25, 1, .5, 1) .3s both; }
.mk__base .mk__plus { stroke: var(--teal); stroke-width: 5.5; animation-delay: 1.2s; }
.mk__base path:nth-child(2) { animation-delay: .55s; }
.mk__base path:nth-child(3) { animation-delay: .9s; }
@keyframes mk-draw { from { stroke-dashoffset: 1; opacity: 0; } 8% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
/* the travelling light (capsule sweep) */
.mk__spark path { stroke: #cfeee4; stroke-width: 3.2; stroke-dasharray: .13 1.3; stroke-dashoffset: .13; opacity: 0;
                  animation: mk-light var(--mk-cycle) ease-in-out 2.4s infinite; }
.mk__spark path:nth-child(2) { animation-delay: calc(2.4s + var(--mk-cycle) * .04); }
.mk__spark path:nth-child(3) { animation-delay: calc(2.4s + var(--mk-cycle) * .08); }
.mk__spark .mk__plus { animation: none; opacity: 0; }
@keyframes mk-light { 0% { stroke-dashoffset: .13; opacity: 0; } 8% { opacity: .95; } 55% { stroke-dashoffset: -1.15; opacity: .95; } 62%, 100% { stroke-dashoffset: -1.15; opacity: 0; } }
/* cross glow: lights once per cycle, then rests */
.mk__halo { fill: var(--mk-halo); opacity: 0; transform-box: fill-box; transform-origin: center; animation: mk-pulse var(--mk-cycle) ease-in-out 3.2s infinite; }
@keyframes mk-pulse { 0%, 100% { opacity: 0; transform: scale(.6); } 22% { opacity: 1; transform: scale(1.15); } 46% { opacity: 0; transform: scale(1.5); } }
.page-mark { animation: mk-breathe var(--mk-cycle) ease-in-out 3s infinite; }
@keyframes mk-breathe { 0%, 100% { box-shadow: 0 0 0 14px rgba(59, 122, 112, .05), 0 0 0 15px rgba(59, 122, 112, .09), 0 14px 30px rgba(36, 107, 99, .16), inset 0 -6px 12px rgba(36, 107, 99, .08); }
                         30% { box-shadow: 0 0 0 18px rgba(59, 122, 112, .07), 0 0 0 19px rgba(59, 122, 112, .12), 0 14px 34px rgba(36, 107, 99, .26), inset 0 -6px 12px rgba(36, 107, 99, .08); } }
@media (max-width: 767px) {
  .page-mark { top: 28px; right: 1.75rem; width: 72px; height: 72px; box-shadow: 0 0 0 9px rgba(59, 122, 112, .05), 0 8px 18px rgba(36, 107, 99, .14); animation: none; }
  .mk__ring { display: none; }
  .mk__base path { stroke-width: 8.5; }
}
@media (prefers-reduced-motion: reduce) {
  .page-mark, .mk__ring, .mk__base path, .mk__spark path, .mk__halo { animation: none !important; }
  .mk__base path { stroke-dashoffset: 0; opacity: 1; }
  .mk__spark, .mk__halo { display: none; }
}
@media print { .page-mark { display: none !important; } }

/* keep long page titles clear of the corner emblem */
@media (max-width: 1279px) { .page-head--mark .page-head__title { padding-right: 180px; } }
@media (max-width: 767px)  { .page-head--mark .page-head__title { padding-right: 92px; } }