/* ==========================================================================
   Solvik Pharma — stylesheet
   Mobile-first. Breakpoints: base (<640) · 640 · 960 · 1200
   Light-only. Cool clinical neutrals, deep navy as the functional colour,
   Solvik gold reserved as a brand mark.

   Colour rules that drive everything below:
     --c-primary  navy → links, buttons with white text, headings, focus
     --c-accent   gold → logo, rules, icon marks, one CTA fill. NEVER text,
                  never a UI boundary (1.70:1 on white).
     on gold, text is always --c-on-accent charcoal (9.66:1)
     --c-border-interactive is the only border allowed to bound a control (3.40:1)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Neutrals — cool, light only */
  --c-bg:                #ffffff;
  --c-surface:           #ffffff;
  --c-surface-alt:       #f5f7f8;
  --c-surface-sunk:      #eaeef1;
  --c-border:            #e1e6ea;   /* decorative separators only */
  --c-border-strong:     #c0c9d0;   /* decorative separators only */
  --c-border-interactive:#7f8d99;   /* control outlines — 3.40:1 on white */

  --c-text:              #16202b;
  --c-text-muted:        #5b6874;

  /* Brand — navy carries the UI */
  --c-primary:           #0f3f66;
  --c-primary-hover:     #0a2f4d;
  --c-primary-soft:      #e9f0f6;
  --c-on-primary:        #ffffff;

  /* Brand — gold is a mark, not a UI colour */
  --c-accent:            #f0c040;
  --c-accent-hover:      #e0af2c;
  --c-accent-soft:       #fdf4e0;
  --c-on-accent:         #16202b;

  /* Dark ground — footer and the closing CTA band */
  --c-ink:               #0f2233;
  --c-ink-deep:          #0a1826;
  --c-on-ink:            #eef2f5;
  --c-on-ink-muted:      #9fb0bd;
  --c-silver:            #c3ccd4;

  /* Therapeutic-area accents — small marks and labels */
  --c-cat-pain:          #a8390f;
  --c-cat-pain-soft:     #fbeee8;
  --c-cat-gastro:        #0b6076;
  --c-cat-gastro-soft:   #e7f2f5;
  --c-cat-nutri:         #166534;
  --c-cat-nutri-soft:    #e8f3ec;

  --c-danger:            #a32718;
  --c-focus:             #0f3f66;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-xl:   clamp(1.375rem, 1.20rem + 0.80vw, 1.75rem);
  --fs-2xl:  clamp(1.75rem,  1.40rem + 1.60vw, 2.5rem);
  --fs-3xl:  clamp(2.125rem, 1.55rem + 2.60vw, 3.5rem);
  --fs-4xl:  clamp(2.5rem,   1.70rem + 3.60vw, 4.5rem);

  --lh-tight: 1.08;
  --lh-snug:  1.35;
  --lh-base:  1.65;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Spacing */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;   --sp-10: 8rem;

  /* Layout */
  --container:        75rem;
  --container-narrow: 48rem;
  --gutter:           var(--sp-5);
  --header-h:         4.75rem;
  --measure:          64ch;

  /* Shape */
  --r-sm: 0.375rem;  --r-md: 0.625rem;
  --r-lg: 1rem;      --r-xl: 1.5rem;   --r-full: 999px;

  /* Elevation */
  --sh-sm: 0 1px 2px rgba(15, 34, 51, 0.06);
  --sh-md: 0 4px 14px rgba(15, 34, 51, 0.08);
  --sh-lg: 0 16px 40px rgba(15, 34, 51, 0.12);

  /* Motion */
  --t-fast: 150ms;
  --t-med: 260ms;
  --t-slow: 600ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --z-header: 100; --z-nav: 90; --z-overlay: 80;
}

@media (min-width: 960px) {
  :root { --gutter: var(--sp-6); --header-h: 5.5rem; }
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

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

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text);
  background-color: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;          /* decorative art is allowed to bleed */
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p, li { text-wrap: pretty; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: var(--c-primary); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

.display { font-size: var(--fs-4xl); font-weight: var(--fw-black); letter-spacing: -0.035em; }

.lead {
  font-size: var(--fs-lg);
  color: var(--c-text-muted);
  line-height: var(--lh-snug);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-primary);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--c-accent);
}

.text-gold { color: var(--c-primary); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

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

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }
/* Directly after a page hero, the hero's own bottom padding is enough */
.section--flush { padding-top: var(--sp-6); }
.section--alt { background-color: var(--c-surface-alt); }
.section--sunk { background-color: var(--c-surface-sunk); }

@media (min-width: 960px) {
  .section { padding-block: var(--sp-9); }
  .section--tight { padding-block: var(--sp-8); }
}

.section__head { max-width: var(--measure); margin-bottom: var(--sp-6); }
.section__head > * + * { margin-top: var(--sp-4); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }

@media (min-width: 960px) {
  .section__head { margin-bottom: var(--sp-7); }
}

.stack > * + * { margin-top: var(--sp-4); }
.grid { display: grid; gap: var(--sp-5); }

@media (min-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--split { grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
}

/* --------------------------------------------------------------------------
   5. Skip link
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 999;
  transform: translateY(-200%);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--c-primary);
  color: var(--c-on-primary);
  border-radius: var(--r-md);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease);
}

.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t-med) var(--ease),
              transform var(--t-fast) var(--ease);
}

.btn:active { transform: translateY(1px); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* Flat gold + charcoal text (9.66:1) — the only accessible gold combination */
.btn--accent {
  background-color: var(--c-accent);
  color: var(--c-on-accent);
}
.btn--accent:hover { background-color: var(--c-accent-hover); }

.btn--primary { background-color: var(--c-primary); color: var(--c-on-primary); }
.btn--primary:hover { background-color: var(--c-primary-hover); }

.btn--outline {
  background-color: transparent;
  border-color: var(--c-border-interactive);
  color: var(--c-text);
}
.btn--outline:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* For use on the dark hero / footer */
.btn--ghost {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--c-on-ink);
}
.btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent); }

.btn--sm { min-height: 2.375rem; padding: var(--sp-2) var(--sp-4); }
.btn--lg { min-height: 3.25rem; padding: var(--sp-4) var(--sp-6); font-size: var(--fs-base); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   7. Header + navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: color-mix(in srgb, var(--c-surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--c-border);
  box-shadow: var(--sh-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

/* Logo — SVG mark + live text wordmark (no image, recolours for dark mode) */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--c-text);
}

/* The supplied logo is a single stacked lockup — mark above the wordmark — so
   it is used whole rather than split apart. It has no alpha, so it is rendered
   onto each background it sits on: white in the header, ink in the footer. */
.logo__img { display: block; height: 3.25rem; width: auto; }

@media (min-width: 960px) { .logo__img { height: 3.75rem; } }

.logo__word {
  display: block;
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.035em;
  line-height: 1;
}

.logo__v { color: var(--c-primary); }

/* PHARMA sits centred under SOLVIK between two gold rules, matching the
   printed logo. Flex centres it automatically; text-indent cancels the
   trailing letter-space so it is optically centred, not just mathematically. */
.logo__sub {
  display: flex;
  align-items: center;
  gap: 0.42em;
  margin-top: 0.46em;
  font-size: 0.4em;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: var(--c-text-muted);
}

.logo__sub::before,
.logo__sub::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--c-accent-hover);
}

@media (min-width: 960px) {
  .logo__mark { width: 2.375rem; height: 2.375rem; }
  .logo__word { font-size: 1.375rem; }
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: calc(var(--sp-2) * -1);
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--c-text);
  transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding: var(--sp-4) var(--gutter) var(--sp-6);
  background-color: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--sh-lg);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-med) var(--ease),
              transform var(--t-med) var(--ease),
              visibility var(--t-med);
}

.site-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

.site-nav__list { display: flex; flex-direction: column; gap: var(--sp-1); }

.site-nav__link {
  display: block;
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.site-nav__link:hover { background-color: var(--c-surface-alt); color: var(--c-primary); }
.site-nav__link[aria-current="page"] { color: var(--c-primary); font-weight: var(--fw-semibold); }

.site-nav__cta { margin-top: var(--sp-3); }
.site-nav__cta .btn { width: 100%; }

.nav-backdrop {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: var(--z-overlay);
  background-color: rgba(16, 20, 22, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-med) var(--ease), visibility var(--t-med);
}

.nav-backdrop.is-open { opacity: 1; visibility: visible; }

@media (min-width: 960px) {
  .nav-toggle, .nav-backdrop { display: none; }

  .site-nav {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .site-nav__list { flex-direction: row; align-items: center; gap: var(--sp-1); }
  .site-nav__link { position: relative; padding: var(--sp-2) var(--sp-3); }

  .site-nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background-color: var(--c-accent);
  }

  .site-nav__cta { margin-top: 0; margin-left: var(--sp-4); }
  .site-nav__cta .btn { width: auto; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--c-surface);
  color: var(--c-text);
  padding-block: var(--sp-8);
  border-bottom: 1px solid var(--c-border);
}

/* The photograph is always a framed image, never a wash behind body text:
   a band beneath the copy on small screens, beside it from 960px up. */
.hero::after {
  content: "";
  position: absolute;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/hero-reception-sm.jpg");
}

/* Small screens: a band under the copy. The hero reserves room for it so the
   absolutely positioned frame has somewhere to sit. */
@media (max-width: 959px) {
  .hero { padding-bottom: calc(var(--sp-8) + 12rem); }

  .hero::after {
    left: var(--gutter);
    right: var(--gutter);
    bottom: var(--sp-8);
    height: 10rem;
  }
}

@media (min-width: 960px) {
  .hero { --hero-media-w: min(30rem, 36vw); }

  .hero::after {
    top: var(--sp-8);
    bottom: var(--sp-8);
    right: max(var(--gutter), (100vw - var(--container)) / 2);
    width: var(--hero-media-w);
    background-image: url("../img/hero-reception.jpg");
    background-position: 50% center;
  }
}

.hero__inner { position: relative; }
.hero__content { max-width: 40rem; }
.hero__content > * + * { margin-top: var(--sp-5); }

.hero .eyebrow { color: var(--c-primary); }
.hero h1 { color: var(--c-text); }
.hero__lead { font-size: var(--fs-lg); color: var(--c-text-muted); line-height: var(--lh-snug); max-width: 34rem; }

.hero__tagline { display: block; color: var(--c-primary); }

/* Shorter hero for interior pages, with its own backdrop */
.hero--page { padding-block: var(--sp-7) var(--sp-8); }
.hero--page .hero__content { max-width: 44rem; }

/* Interior variants reuse the two rendered images at different crops, so the
   pages feel related without repeating the same picture. Small files below
   960px, full resolution above. */
.hero--page::after    { background-image: url("../img/hero-products-sm.jpg"); }
.hero--about::after   { background-image: url("../img/hero-about-sm.jpg"); }
.hero--quality::after { background-image: url("../img/hero-quality-sm.jpg"); }

@media (max-width: 959px) {
  .hero--page { padding-bottom: calc(var(--sp-8) + 12rem); }
}

@media (min-width: 960px) {
  .hero--page { padding-block: var(--sp-8); }
  .hero--page::after    { background-image: url("../img/hero-products.jpg"); background-position: 30% center; }
  .hero--about::after   { background-image: url("../img/hero-about.jpg");    background-position: 50% center; }
  .hero--quality::after { background-image: url("../img/hero-quality.jpg");  background-position: 45% center; }
}

/* Trust strip under the hero copy */
.hero__trust {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
}

@media (min-width: 640px) { .hero__trust { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }

.hero__trust-item { display: flex; align-items: flex-start; gap: var(--sp-3); }

.hero__trust-item svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  color: var(--c-primary);
}

.hero__trust-item strong { display: block; color: var(--c-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.hero__trust-item span { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); line-height: var(--lh-snug); }

@media (min-width: 960px) {
  .hero { padding-block: var(--sp-9); }
  .hero__inner { padding-right: calc(var(--hero-media-w) + var(--sp-6)); }
}

/* --------------------------------------------------------------------------
   9. Components
   -------------------------------------------------------------------------- */

.card {
  padding: var(--sp-5);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

.card > * + * { margin-top: var(--sp-3); }

/* Pillars */
.pillar { position: relative; overflow: hidden; }

.pillar::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background-color: var(--c-accent);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}

.pillar:hover::after { opacity: 1; }

.pillar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background-color: var(--c-accent-soft);
  color: var(--c-primary);
}

.pillar__icon svg { width: 1.5rem; height: 1.5rem; }
.pillar h3 { font-size: var(--fs-lg); }
.pillar p { color: var(--c-text-muted); }

/* Product card */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  padding-top: calc(var(--sp-5) + 3px);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              transform var(--t-med) var(--ease);
}

.product-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background-color: var(--cat, var(--c-accent));
}

.product-card:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-lg);
  transform: translateY(-3px);
}

.product-card[data-cat="pain"]   { --cat: var(--c-cat-pain);   --cat-soft: var(--c-cat-pain-soft); }
.product-card[data-cat="gastro"] { --cat: var(--c-cat-gastro); --cat-soft: var(--c-cat-gastro-soft); }
.product-card[data-cat="nutri"]  { --cat: var(--c-cat-nutri);  --cat-soft: var(--c-cat-nutri-soft); }

/* Pack shot. Transparent WebP, so it sits on a tinted panel tinted by the
   product's therapeutic-area colour. */
.product-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fixed ratio so every pack shot occupies the same height and the card
     titles below line up across a row, whatever the source aspect. */
  aspect-ratio: 16 / 10;
  padding: var(--sp-4);
  margin-bottom: var(--sp-1);
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    radial-gradient(75% 85% at 50% 45%, var(--cat-soft, var(--c-accent-soft)), transparent 78%),
    var(--c-surface-alt);
}

.product-card__media img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(20, 24, 26, 0.18));
  transition: transform var(--t-med) var(--ease);
}

.product-card:hover .product-card__media img { transform: scale(1.035); }

@media (prefers-reduced-motion: reduce) {
  .product-card:hover .product-card__media img { transform: none; }
}

.product-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.product-card__name { font-size: var(--fs-xl); line-height: 1.1; }
.product-card__tm { font-size: 0.5em; vertical-align: super; font-weight: var(--fw-medium); color: var(--c-text-muted); }

.product-card__composition {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  flex: 1;
}

.product-card__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm);
}

.product-card__meta dt { color: var(--c-text-muted); font-weight: var(--fw-medium); }
.product-card__meta dd { margin: 0; }

/* Category pill */
.cat-pill {
  display: inline-flex;
  align-self: flex-start;   /* stops it stretching inside the column-flex card */
  align-items: center;
  gap: var(--sp-2);
  padding: 0.2rem var(--sp-3);
  border-radius: var(--r-full);
  background-color: var(--cat-soft, var(--c-accent-soft));
  color: var(--cat, var(--c-primary));
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.cat-pill::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: currentColor;
}

/* Rx marker */
.rx-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.2rem var(--sp-2);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  white-space: nowrap;
}

.rx-badge__mark {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: var(--fw-bold);
  color: var(--c-primary);
}

/* Filter chips */
.filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }

.chip {
  min-height: 2.5rem;
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border-interactive);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.chip:hover { border-color: var(--c-primary); color: var(--c-primary); }

.chip[aria-pressed="true"] {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}

.filter-count { margin-bottom: var(--sp-5); font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Stat band */
.stats {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}

@media (min-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .stats { grid-template-columns: repeat(4, 1fr); padding: var(--sp-7); } }

.stat__value {
  display: block;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  font-weight: var(--fw-black);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--c-primary);
}

.stat__label { display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-muted); line-height: var(--lh-snug); }

/* Process timeline */
.process { counter-reset: step; display: grid; gap: var(--sp-5); }

@media (min-width: 640px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .process { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); } }

.process__step { position: relative; padding-top: var(--sp-6); }

.process__step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: 0;
  left: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  letter-spacing: 0.06em;
  color: var(--c-primary);
}

.process__step::after {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 2.25rem;
  right: 0;
  height: 1px;
  background-image: linear-gradient(90deg, var(--c-accent), rgba(240, 192, 64, 0));
}

.process__step h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.process__step p { color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh-snug); }

/* Composition table + disclosure */
.table-wrap { overflow-x: auto; }

.comp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.comp-table caption {
  text-align: left;
  padding-bottom: var(--sp-3);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
}

.comp-table th,
.comp-table td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}

.comp-table thead th {
  color: var(--c-text-muted);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.comp-table tbody th {
  font-weight: var(--fw-normal);
  color: var(--c-text);
}

.comp-table td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.comp-table tbody tr.is-group th {
  padding-top: var(--sp-4);
  font-weight: var(--fw-bold);
  color: var(--c-primary);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.disclosure { border-top: 1px solid var(--c-border); }

.disclosure > summary {
  cursor: pointer;
  padding: var(--sp-4) 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  list-style: none;
}

.disclosure > summary::-webkit-details-marker { display: none; }

.disclosure > summary::before {
  content: "+";
  display: inline-block;
  width: 1.25rem;
  font-weight: var(--fw-bold);
}

.disclosure[open] > summary::before { content: "\2212"; }
.disclosure > *:last-child { padding-bottom: var(--sp-4); }

/* Fact list */
.facts { display: grid; gap: 0; margin: 0; }

.facts > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-1);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}

.facts dt { color: var(--c-text-muted); font-size: var(--fs-sm); }
.facts dd { margin: 0; font-weight: var(--fw-medium); }

@media (min-width: 640px) {
  .facts > div { grid-template-columns: 13rem 1fr; gap: var(--sp-4); align-items: baseline; }
}

/* Forms */
.form { display: grid; gap: var(--sp-5); }

@media (min-width: 640px) {
  .form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
}

.field { display: grid; gap: var(--sp-2); }

.field label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

.field .req { color: var(--c-danger); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 2.875rem;
  padding: var(--sp-3);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  color: var(--c-text);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.field textarea { min-height: 8rem; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--c-text-muted); opacity: 0.75; }

.field__hint { font-size: var(--fs-xs); color: var(--c-text-muted); }

.field__error {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-danger);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--c-danger); }

.form__status {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background-color: var(--c-accent-soft);
  border: 1px solid var(--c-accent);
  font-size: var(--fs-sm);
}

/* Callout */
.callout {
  padding: var(--sp-5);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--c-text-muted);
}

.callout > * + * { margin-top: var(--sp-3); }
.callout strong { color: var(--c-text); }

/* Closing CTA band */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--sp-7) var(--sp-5);
  background-color: var(--c-ink);
  border-radius: var(--r-xl);
  text-align: center;
}

.cta-band > * + * { margin-top: var(--sp-4); }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--c-on-ink-muted); max-width: 46ch; margin-inline: auto; }

@media (min-width: 960px) { .cta-band { padding: var(--sp-8); } }

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: var(--sp-8);
  padding-top: var(--sp-8);
  background-color: var(--c-ink);
  color: var(--c-on-ink);
  font-size: var(--fs-sm);
}

.site-footer .logo { color: #fff; }
.site-footer .logo__sub { color: var(--c-on-ink-muted); }

.footer__grid { display: grid; gap: var(--sp-6); padding-bottom: var(--sp-7); }

@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--sp-7); } }

.footer__brand > * + * { margin-top: var(--sp-4); }
.footer__blurb { color: var(--c-on-ink-muted); max-width: 34ch; }

.footer__title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.footer__list { display: flex; flex-direction: column; gap: var(--sp-2); }

.footer__list a, .footer__contact a {
  color: var(--c-on-ink-muted);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.footer__list a:hover, .footer__contact a:hover { color: var(--c-accent); }

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  color: var(--c-on-ink-muted);
  font-style: normal;
}

.footer__bottom { padding-block: var(--sp-5); border-top: 1px solid rgba(255,255,255,0.12); }
.footer__bottom > * + * { margin-top: var(--sp-4); }

.footer__disclaimer {
  max-width: 80ch;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--c-on-ink-muted);
}

.footer__disclaimer strong { color: #fff; }
.footer__disclaimer a { color: var(--c-accent); }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--c-on-ink-muted);
}

.footer__legal a { color: var(--c-on-ink-muted); text-decoration: none; }
.footer__legal a:hover { color: var(--c-accent); }
.footer__legal .spacer { margin-left: auto; }

/* --------------------------------------------------------------------------
   10a. Preloader
   Shown once per session, hard-capped at 1.6s by JS, and never shown at all
   without JS or under prefers-reduced-motion. It must never be able to trap
   a visitor behind it.
   -------------------------------------------------------------------------- */

/* Hidden by default. Only an inline script turns it on, so a visitor with
   JavaScript disabled can never be left staring at an overlay. */
.preloader { display: none; }

.preloader.is-active {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background-color: var(--c-surface);
  opacity: 1;
  transition: opacity 520ms var(--ease), visibility 520ms;
}

.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader__inner { display: grid; justify-items: center; gap: var(--sp-6); }

.preloader__ring {
  position: relative;
  width: 168px;
  height: 168px;
  display: grid;
  place-items: center;
}

.preloader__ring::before {
  content: "";
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background-color: var(--c-accent-soft);
}

.preloader__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Orbiting molecular ring */
.pl-orbit  { transform-origin: 50% 50%; animation: pl-spin 3.4s linear infinite; }
.pl-orbit2 { transform-origin: 50% 50%; animation: pl-spin 5.2s linear infinite reverse; }

@keyframes pl-spin { to { transform: rotate(360deg); } }

/* Arc that sweeps round to suggest progress.
   r=66, so circumference is 2*PI*66 = 414.7 - dash values must sum to that
   or the gap drifts as it rotates. */
.pl-arc {
  transform-origin: 50% 50%;
  stroke-dasharray: 95 320;
  animation: pl-sweep 1.5s cubic-bezier(.55,.15,.35,.9) infinite;
}

@keyframes pl-sweep {
  0%   { stroke-dashoffset: 0;      transform: rotate(0deg); }
  100% { stroke-dashoffset: -414.7; transform: rotate(360deg); }
}

/* Centre mark breathes */
.pl-mark { transform-origin: 50% 50%; animation: pl-pulse 2.1s ease-in-out infinite; }

@keyframes pl-pulse {
  0%, 100% { transform: scale(1);    opacity: .92; }
  50%      { transform: scale(1.07); opacity: 1; }
}

/* Text is visible by default and animates FROM transparent. If the animation
   never runs, the wordmark is still there - the earlier version started at
   opacity 0 and left "PHARMA" invisible. */
.preloader__word {
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.17em;
  color: var(--c-text);
  opacity: 1;
  animation: pl-fade 700ms var(--ease) 180ms backwards;
}

.preloader__word i { font-style: normal; color: var(--c-primary); }

.preloader__sub {
  margin-top: 0.6rem;
  margin-right: -0.34em;          /* offsets trailing letter-spacing */
  font-size: 0.75rem;
  letter-spacing: 0.34em;
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  opacity: 1;
  animation: pl-fade 700ms var(--ease) 340ms backwards;
}

@keyframes pl-fade { from { opacity: 0; transform: translateY(6px); } }

/* Thin determinate-looking bar */
.preloader__bar {
  width: 148px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--c-surface-sunk);
  overflow: hidden;
}

.preloader__bar::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background-color: var(--c-accent);
  animation: pl-bar 1.25s cubic-bezier(.6,.05,.3,.95) infinite;
}

@keyframes pl-bar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Stop the page scrolling while the overlay is up */
html.is-loading, body.is-loading { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  /* JS also skips the loader entirely in this case; this is the backstop. */
  .preloader { display: none !important; }
}

/* --------------------------------------------------------------------------
   10b. Illustrations & animation
   All hand-drawn SVG — no photography, no licensing, negligible weight.
   Every animation here is switched off by the reduced-motion block at §13.
   -------------------------------------------------------------------------- */

/* --- Science section: illustrated cards --- */
.science-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              transform var(--t-med) var(--ease);
}

.science-card:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-lg);
  transform: translateY(-3px);
}

.science-card h3 { font-size: var(--fs-lg); }
.science-card p { color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh-snug); }

.illus {
  width: 100%;
  height: 8.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background:
    radial-gradient(70% 70% at 50% 40%, var(--c-accent-soft), transparent 70%),
    var(--c-surface-alt);
}

.illus svg { width: auto; height: 100%; overflow: visible; }

/* The four section illustrations animate.

   Motion starts only once the card has scrolled into view (.is-visible comes
   from the reveal observer), so nothing is spinning away above or below the
   fold. Everything here is slow and small — the point is that the drawings
   feel alive, not that they demand attention. Hover lifts the tempo.

   The global prefers-reduced-motion block neutralises all of it. */

@keyframes illus-spin   { to { transform: rotate(360deg); } }
@keyframes illus-pulse  { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.14); opacity: 1; } }
@keyframes illus-wave   { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
@keyframes illus-rise   { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: .8; } 100% { transform: translateY(-42px); opacity: 0; } }
@keyframes illus-scan   { 0% { transform: translateY(-3px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(44px); opacity: 0; } }
@keyframes illus-float  { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-3deg); } }

/* Molecule — orbits turn, nuclei breathe */
.illus--molecule .ring,
.illus--molecule .atom { transform-box: fill-box; transform-origin: center; }

.is-visible .illus--molecule .ring   { animation: illus-spin 30s linear infinite; }
.is-visible .illus--molecule .ring--b { animation-duration: 42s; animation-direction: reverse; }
.is-visible .illus--molecule .atom   { animation: illus-pulse 4.5s ease-in-out infinite; }
.is-visible .illus--molecule .atom:nth-of-type(2) { animation-delay: -1.5s; }
.is-visible .illus--molecule .atom:nth-of-type(3) { animation-delay: -3s; }

/* Flask — the liquid shifts, bubbles climb */
.is-visible .illus--flask .liquid { animation: illus-wave 7s ease-in-out infinite; }
.is-visible .illus--flask .bubble { animation: illus-rise 4s ease-in infinite; }
.is-visible .illus--flask .bubble:nth-of-type(2) { animation-delay: -1.3s; }
.is-visible .illus--flask .bubble:nth-of-type(3) { animation-delay: -2.6s; }

/* Microscope — a slide passes under the lens */
.illus--scope .scan { opacity: 0; }
.is-visible .illus--scope .scan { animation: illus-scan 4.2s ease-in-out infinite; }

/* Capsules — a slow drift */
.illus--capsule .cap { transform-box: fill-box; transform-origin: center; }
.is-visible .illus--capsule .cap { animation: illus-float 6.5s ease-in-out infinite; }
.is-visible .illus--capsule .cap--b { animation-delay: -2.4s; }

/* Hovering a card quickens its illustration. */
.science-card:hover .illus--molecule .ring    { animation-duration: 9s; }
.science-card:hover .illus--molecule .ring--b { animation-duration: 13s; }
.science-card:hover .illus--flask .bubble     { animation-duration: 1.8s; }
.science-card:hover .illus--scope .scan       { animation-duration: 1.8s; }
.science-card:hover .illus--capsule .cap      { animation-duration: 2.8s; }

.illus svg { overflow: visible; }

/* --- Therapeutic-area icons (home page) --- */
/* Therapeutic-area cards carry a photograph. The claim panels baked into the
   supplied artwork were cropped off before use — see CONTENT.md 6.2. */
.area-media {
  aspect-ratio: 16 / 10;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  overflow: hidden;
  background-color: var(--c-surface-alt);
}

.area-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.area-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 6rem;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-md);
  overflow: hidden;
  color: var(--cat, var(--c-primary));
  background:
    radial-gradient(70% 80% at 50% 45%, var(--cat-soft, var(--c-accent-soft)), transparent 76%),
    var(--c-surface-alt);
}

/* Explicit box: `width:auto` on a viewBox-only SVG collapsed to a few pixels
   here, so both dimensions are stated. */
.area-icon svg { width: 5rem; height: 5rem; overflow: visible; }

/* The area-icon SVGs were replaced by photography (see .area-media). The
   class itself is kept as the fallback ground for any card without an image. */

/* --- Section divider: a run of capsules --- */
.capsule-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding-block: var(--sp-6);
  color: var(--c-accent);
  opacity: 0.55;
}

.capsule-rule::before,
.capsule-rule::after {
  content: "";
  flex: 1;
  max-width: 9rem;
  height: 1px;
  background-image: linear-gradient(90deg, transparent, var(--c-border-strong), transparent);
}

.capsule-rule svg { width: 1.5rem; height: 1.5rem; }

/* --------------------------------------------------------------------------
   11. Utilities
   -------------------------------------------------------------------------- */

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

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.no-scroll { overflow: hidden; }
.mt-6 { margin-top: var(--sp-6); }

/* --------------------------------------------------------------------------
   12. Scroll reveal
   The hiding class is added by JS, so content is always visible without it.
   -------------------------------------------------------------------------- */

.reveal-init {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

.reveal-init.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   13. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal-init { opacity: 1 !important; transform: none !important; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   14. Product detail pages

   One page per product, reached at /products/<slug>. Content is deliberately
   descriptive only — brand name, composition, dosage form, presentation and
   therapeutic category. See CONTENT.md 6.2: indications, efficacy claims and
   campaign straplines are excluded from the site by decision.
   -------------------------------------------------------------------------- */

.breadcrumb { margin-bottom: var(--sp-5); font-size: var(--fs-sm); }

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
}

.breadcrumb li { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-text-muted); }
.breadcrumb li + li::before { content: "/"; color: var(--c-border-strong); }
.breadcrumb a { color: var(--c-text-muted); }
.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb [aria-current="page"] { color: var(--c-text); font-weight: var(--fw-medium); }

.product-hero {
  padding-block: var(--sp-6) var(--sp-7);
  border-bottom: 1px solid var(--c-border);
}

.product-hero__grid { display: grid; gap: var(--sp-6); }

@media (min-width: 960px) {
  .product-hero__grid { grid-template-columns: 1fr 24rem; align-items: start; gap: var(--sp-8); }
}

.product-hero__body > * + * { margin-top: var(--sp-4); }
.product-hero h1 { font-size: var(--fs-3xl); }
.product-hero__tm { font-size: 0.4em; vertical-align: super; font-weight: var(--fw-semibold); }

.product-hero__composition {
  font-size: var(--fs-lg);
  color: var(--c-text-muted);
  line-height: var(--lh-snug);
  max-width: 34rem;
}

.product-hero__marks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

.product-hero__media {
  padding: var(--sp-4);
  background-color: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

/* Packs vary from wide cartons (720x367) to a tall bottle (282x760).
   Cap both axes and centre, so a portrait pack does not tower over the copy. */
.product-hero__media img {
  display: block;
  margin-inline: auto;
  width: auto;
  max-width: 100%;
  max-height: 28rem;
  border-radius: var(--r-md);
}

/* At-a-glance specification list */
/* Left-aligned reading column, so the section lines up with the hero copy
   instead of floating centred. */
.product-body > * { max-width: 48rem; }

.spec { border-top: 1px solid var(--c-border); }

.spec__row {
  display: grid;
  gap: var(--sp-1);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}

@media (min-width: 640px) {
  .spec__row { grid-template-columns: 13rem 1fr; gap: var(--sp-5); align-items: baseline; }
}

.spec__row dt { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-text-muted); }
.spec__row dd { margin: 0; color: var(--c-text); }

/* Regulatory notice — present on every product page */
.notice {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background-color: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-primary);
  border-radius: var(--r-md);
}

.notice svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; color: var(--c-primary); }
.notice p { font-size: var(--fs-sm); color: var(--c-text-muted); max-width: 68ch; line-height: var(--lh-snug); }
.notice strong { color: var(--c-text); font-weight: var(--fw-semibold); }

/* Other products in the same therapeutic area */
.related { display: grid; gap: var(--sp-4); }

@media (min-width: 640px) { .related { grid-template-columns: repeat(2, 1fr); } }

.related__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-med) var(--ease);
}

.related__item:hover { border-color: var(--c-border-interactive); box-shadow: var(--sh-md); }
.related__name { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-text); letter-spacing: -0.02em; }
.related__comp { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: var(--lh-snug); }

/* Catalogue cards link through to their detail page. The name carries the
   link so the heading stays the accessible name; ::after stretches the hit
   area over the whole card, which holds no other link. */
.product-card__name a { color: inherit; text-decoration: none; }
.product-card__name a::after { content: ""; position: absolute; inset: 0; }
.product-card:hover .product-card__name a { color: var(--c-primary); }

.notice--spaced { margin-top: var(--sp-6); }
.related--spaced { margin-top: var(--sp-5); }

/* --------------------------------------------------------------------------
   15. Founder message & partners

   Named individuals appear here with their consent (CONTENT.md 6.6, given
   5 Sep 2026). The portrait slot is a monogram until a photograph is supplied.
   -------------------------------------------------------------------------- */

.founder__grid { display: grid; gap: var(--sp-6); margin-top: var(--sp-6); }

@media (min-width: 640px) {
  .founder__grid { grid-template-columns: 12rem 1fr; gap: var(--sp-6); align-items: start; }
  .founder__portrait { margin-inline: 0; }
}

@media (min-width: 960px) {
  .founder__grid { grid-template-columns: 15rem 1fr; gap: var(--sp-8); }
}

/* No forced ratio. The three photographs were shot differently — two
   portrait, one landscape — so cropping them all to one shape either cut the
   subject or cut the branding off the wall behind them. Each is shown at its
   own proportions instead: nothing cropped, nothing stretched. */
.founder__portrait {
  max-width: 15rem;
  margin-inline: auto;
  background-color: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.founder__portrait img { display: block; width: 100%; height: auto; }

/* The second founder message, separated but weighted identically. */
.founder__grid--next {
  margin-top: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--c-border);
}

.founder__body > * + * { margin-top: var(--sp-4); }

.founder__lead {
  font-size: var(--fs-lg);
  color: var(--c-text);
  line-height: var(--lh-snug);
}

.founder__body p { max-width: 62ch; color: var(--c-text-muted); }

.founder__pullquote {
  margin-top: var(--sp-5);
  padding-left: var(--sp-5);
  border-left: 3px solid var(--c-accent);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  line-height: var(--lh-snug);
}

.founder__sig {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
}

.founder__sig strong { display: block; font-size: var(--fs-lg); letter-spacing: -0.02em; }
.founder__sig span { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: var(--sp-1); }

/* Partners */
.partners { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); }

/* A single partner reads better as one wide card than a lone tile in a
   two-column grid. */
.partner {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

@media (min-width: 640px) {
  .partner { grid-template-columns: 11rem 1fr; gap: var(--sp-6); }
  .partner__photo { margin-inline: 0; }
}

.partner__photo {
  aspect-ratio: 4 / 5;
  max-width: 11rem;
  margin-inline: auto;
  background-color: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.partner__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.partner__body { max-width: 52ch; }
.partner__body > * + * { margin-top: var(--sp-2); }

.partner__name { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.partner__role {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-primary);
}

.partner__note { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: var(--lh-snug); }

.founder__closing {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background-color: var(--c-surface-alt);
  border-radius: var(--r-lg);
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  line-height: var(--lh-snug);
}


/* --------------------------------------------------------------------------
   16. Floating WhatsApp button

   Sits above everything, clear of the viewport edges, and out of the way of
   the footer links. Uses WhatsApp's own green so it reads as what it is.
   -------------------------------------------------------------------------- */

.wa-fab {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background-color: #1da851;
  color: #ffffff;
  border-radius: var(--r-full);
  box-shadow: 0 6px 20px rgba(15, 34, 51, 0.28);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.wa-fab:hover { background-color: #179145; transform: translateY(-2px); }
.wa-fab:active { transform: translateY(0); }
.wa-fab svg { width: 1.375rem; height: 1.375rem; flex: none; }

/* On narrow screens show the icon alone, so it never covers content. */
@media (max-width: 639px) {
  .wa-fab { padding: var(--sp-3); }
  .wa-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

@media print { .wa-fab { display: none; } }


/* --------------------------------------------------------------------------
   17. Hero gallery

   A horizontally scrollable strip of photographs in place of the single hero
   image. Built on CSS scroll-snap, so it scrolls by touch, trackpad, arrow key
   or dot with no JavaScript at all; the script only adds auto-advance and
   keeps the dots in step. Auto-advance stops on hover, on focus, and entirely
   under prefers-reduced-motion.
   -------------------------------------------------------------------------- */

.hero--gallery::after { content: none; }        /* the strip replaces it */

.hero__gallery { position: relative; margin-top: var(--sp-6); }

.hero__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background-color: var(--c-surface-alt);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hero__track::-webkit-scrollbar { display: none; }
.hero__track:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }

.hero__slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 16 / 10; }
.hero__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Dots */
.hero__dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.hero__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background-color: var(--c-border-interactive);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), width var(--t-fast) var(--ease);
}

.hero__dot[aria-selected="true"] { width: 1.5rem; background-color: var(--c-primary); }
.hero__dot:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }

/* Beside the copy from 960px, matching the frame the single image used. */
@media (min-width: 960px) {
  .hero--gallery .hero__inner { padding-right: calc(var(--hero-media-w) + var(--sp-6)); }

  /* Fill the frame the single image used, so the strip matches the height of
     the copy beside it rather than dictating its own. */
  .hero__gallery {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: var(--hero-media-w);
    margin-top: 0;
  }

  .hero__track { height: 100%; }
  .hero__slide { aspect-ratio: auto; height: 100%; }

  /* Dots sit over the photograph, since there is no room beneath it. */
  .hero__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--sp-4);
    margin-top: 0;
  }

  .hero__dot { background-color: rgba(255, 255, 255, 0.55); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
  .hero__dot[aria-selected="true"] { background-color: #ffffff; }
}

/* Below 960px the hero reserves space for the ::after image; the gallery is in
   normal flow, so that reservation has to come back off. */
@media (max-width: 959px) {
  .hero--gallery { padding-bottom: var(--sp-8); }
}


/* --------------------------------------------------------------------------
   18. Image motion

   A slow scale on hover, so photographs feel live without anything moving on
   its own. The global prefers-reduced-motion block already neutralises these
   transitions, so there is no separate guard here.
   -------------------------------------------------------------------------- */

.area-media img,
.product-card__media img,
.product-hero__media img,
.founder__portrait img,
.partner__photo img {
  transition: transform 600ms var(--ease);
  will-change: transform;
}

.product-card:hover .area-media img,
.product-card:hover .product-card__media img,
.product-hero__media:hover img,
.founder__portrait:hover img,
.partner__photo:hover img {
  transform: scale(1.045);
}

/* Media wrappers must clip, or the scaled image escapes its rounded corner. */
.product-card__media, .product-hero__media, .founder__portrait, .partner__photo { overflow: hidden; }


/* Spam trap on the contact form. Hidden several ways over: a single technique
   can be undone by translation tools, reader modes and some extensions, and a
   stray text input in the middle of a contact form looks broken. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}