/* ==========================================================================
   Cure Link — design system
   --------------------------------------------------------------------------
   Palette is derived strictly from the logo: the blue of the arc carries the
   interface, the green of "Cure" drives actions and confirmation, and the red
   of "link" is reserved for small accents only — used sparingly so it keeps
   its emphasis. Everything else is a neutral slate ramp.

   Sections
     01  Tokens
     02  Reset & base
     03  Typography
     04  Buttons & links
     05  Layout primitives
     06  Header, navigation, mega menu
     07  Mobile navigation
     08  Hero
     09  Sections & cards
     10  Products
     11  Comparison, strategy, partners
     12  Forms & contact
     13  Legal pages
     14  Footer
     15  Motion & utilities
     16  Responsive
   ========================================================================== */

/* ------------------------------------------------------------ 01  Tokens */
:root {
  /* brand — sampled from the logo artwork */
  --green-300: #5BDC98;
  --green-400: #22BE6B;
  --green-500: #00A651;  /* the logo green: fills, icons, large display text */
  --green-600: #008C44;
  --green-700: #007038;
  /* Accessible variants. The logo green only reaches 3.19:1 on white, which is
     fine for icons and display type but fails WCAG AA for body-sized text and
     for white-on-green buttons. These two carry the same hue at compliant
     luminance and are used wherever green meets small text. */
  --green-cta: #00823F;       /* white on this = 4.92:1 */
  --green-cta-hover: #007038; /* white on this = 6.22:1 */
  --green-text: #007038;      /* on white = 6.22:1 */
  --red-500: #E02127;
  --red-600: #C4161C;
  --blue-100: #E8F3FB;
  --blue-200: #CDE6F6;
  --blue-300: #7FC4EA;
  --blue-400: #3D9BD5;
  --blue-500: #1B7FC4;
  --blue-600: #0A5B96;
  --blue-700: #084A79;
  --blue-800: #06395D;
  --blue-900: #072B45;

  /* neutrals */
  --n-0: #FFFFFF;
  --n-25: #FBFCFD;
  --n-50: #F4F8FB;
  --n-100: #EBF1F6;
  --n-200: #DCE6ED;
  --n-300: #C3D1DC;
  --n-400: #95A7B5;
  --n-500: #6C8091;
  --n-600: #506474;
  --n-700: #3A4B59;
  --n-800: #253340;
  --n-900: #101E2A;

  /* semantic */
  --bg: var(--n-0);
  --bg-soft: var(--n-50);
  --bg-tint: var(--blue-100);
  --surface: var(--n-0);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --text: var(--n-900);
  --text-body: var(--n-600);
  --text-muted: #5F7183;
  --brand: var(--blue-600);
  --brand-hover: var(--blue-700);
  --accent: var(--green-500);        /* fills, icons, large type */
  --accent-hover: var(--green-600);
  --accent-text: var(--green-text);  /* green used as small text */
  --mark: var(--red-500);

  /* type */
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display: clamp(1.6667rem, 1.0333rem + 2.6vw, 3rem);
  --fs-h1: clamp(1.4104rem, 1.0209rem + 1.6119vw, 2.25rem);
  --fs-h2: clamp(1.1442rem, 0.8885rem + 1.0769vw, 1.75rem);
  --fs-h3: clamp(0.9rem, 0.8175rem + 0.3375vw, 1.125rem);
  --fs-h4: clamp(0.8313rem, 0.7812rem + 0.22vw, 0.9612rem);
  --fs-lead: clamp(0.8313rem, 0.7812rem + 0.3vw, 1.0312rem);
  --fs-body: 0.875rem;
  --fs-sm: 0.75rem;
  --fs-xs: 0.6875rem;

  /* space
     Section padding applies to BOTH edges, so adjacent sections stack two of
     these values between blocks. Kept deliberately moderate — at the previous
     8rem the gap between two sections came to 256px, which read as the page
     having fallen apart rather than as breathing room. */
  --sp-section: clamp(2.75rem, 2rem + 3.2vw, 5rem);
  --sp-section-sm: clamp(2rem, 1.6rem + 1.8vw, 3.25rem);
  --gutter: clamp(1.15rem, 0.6rem + 2vw, 2.5rem);

  /* radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* elevation — a single light source, increasing spread with height */
  --sh-1: 0 1px 2px rgba(16, 30, 42, .05), 0 1px 3px rgba(16, 30, 42, .04);
  --sh-2: 0 2px 4px rgba(16, 30, 42, .04), 0 6px 14px rgba(16, 30, 42, .06);
  --sh-3: 0 4px 8px rgba(16, 30, 42, .05), 0 14px 30px rgba(16, 30, 42, .08);
  --sh-4: 0 8px 16px rgba(16, 30, 42, .06), 0 26px 56px rgba(16, 30, 42, .11);
  --sh-brand: 0 8px 22px rgba(10, 91, 150, .22);
  --sh-accent: 0 8px 22px rgba(0, 166, 81, .24);

  --ease: cubic-bezier(.22, .78, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .38s;

  --header-h: 84px;
  --container: 1240px;
}

/* -------------------------------------------------------- 02  Reset & base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  /* `clip` rather than `hidden`: it contains any stray horizontal overflow
     without creating a scroll container, so the sticky header keeps working. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.68;
  font-feature-settings: 'kern' 1, 'liga' 1, 'cv11' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

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

hr { border: 0; border-top: 1px solid var(--border); margin: 0; opacity: 1; }

::selection { background: var(--blue-200); color: var(--blue-900); }

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

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 2000;
  padding: .7rem 1.15rem;
  background: var(--blue-700);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .25s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.icon { width: 1.25em; height: 1.25em; flex: none; }
.icon--xs { width: 1em; height: 1em; }

/* ---------------------------------------------------------- 03  Typography */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em;
  font-family: var(--font-display);
  color: var(--text);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.021em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.3; }
h4 { font-size: var(--fs-h4); line-height: 1.4; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--text-body);
}

/* Ordinary inline text, not a flex row.
   As `inline-flex` with a gap, anything placed inside became a flex item and
   picked up that gap on both sides — so an inline registered mark floated
   midway between the two words and read as a separator. Inline-block keeps the
   label as one run of text where normal inline spacing applies. */
.eyebrow {
  display: inline-block;
  margin-bottom: 1.05rem;
  padding: .42rem .9rem .42rem .72rem;
  border: 1px solid var(--blue-200);
  border-radius: var(--r-pill);
  background: var(--blue-100);
  color: var(--blue-700);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.35;
  text-transform: uppercase;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: .55rem;
  vertical-align: .08em;
  border-radius: 50%;
  background: var(--mark);
}

/* Registered mark — see icons.mjs for why it is drawn rather than typeset.
   `.eyebrow` is an inline-flex row with a gap, so an SVG placed directly inside
   it becomes a flex item and picks up that gap on BOTH sides — which is what
   made the mark float midway between the two words and read as a separator.
   The label is wrapped in its own span so the mark is plain inline content and
   these margins actually govern it. */
.icon.rmark {
  width: 1.05em;
  height: 1.05em;
  display: inline-block;
  vertical-align: -.02em;
  margin: 0 .52em 0 -.06em;   /* pulled onto the wordmark, clear of the next word */
  letter-spacing: 0;
}

/* On the narrowest phones "CURELINK® PHARMACEUTICALS" is a few pixels too wide
   and breaks onto a second line inside the pill, which looks like a mistake.
   Easing the size and tracking buys back the ~25px needed. */
@media (max-width: 400px) {
  .eyebrow {
    font-size: 0.6875rem;
    letter-spacing: .045em;
    padding: .38rem .72rem .38rem .6rem;
  }
  .eyebrow::before { margin-right: .4rem; }
}

.eyebrow--light {
  border-color: rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  backdrop-filter: blur(6px);
}

/* underline flourish borrowed from the swoosh in the logo */
.u-mark { position: relative; color: var(--brand); white-space: nowrap; }
.u-mark::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.06em;
  height: .34em;
  border-radius: var(--r-pill);
  background: var(--green-500);
  opacity: .18;
  z-index: -1;
}

.text-accent { color: var(--accent); }
.text-brand { color: var(--brand); }

/* ----------------------------------------------------- 04  Buttons & links */
a { color: var(--brand); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--brand-hover); }

.btn {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .82rem 1.5rem;
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.btn .icon { transition: transform .28s var(--ease-out); }
.btn:hover .icon { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn-brand { --btn-bg: var(--green-cta); box-shadow: var(--sh-accent); }
.btn-brand:hover { --btn-bg: var(--green-cta-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 166, 81, .3); }

.btn-deep { --btn-bg: var(--blue-600); box-shadow: var(--sh-brand); }
.btn-deep:hover { --btn-bg: var(--blue-700); color: #fff; transform: translateY(-2px); }

.btn-outline {
  --btn-bg: transparent;
  --btn-fg: var(--blue-700);
  --btn-bd: var(--border-strong);
}
.btn-outline:hover { --btn-bg: var(--blue-100); --btn-bd: var(--blue-300); --btn-fg: var(--blue-800); transform: translateY(-2px); }

.btn-ghost-light {
  --btn-bg: rgba(255, 255, 255, .1);
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .32);
  backdrop-filter: blur(8px);
}
.btn-ghost-light:hover { --btn-bg: rgba(255, 255, 255, .2); --btn-bd: rgba(255, 255, 255, .5); color: #fff; transform: translateY(-2px); }

/* WhatsApp keeps its own recognisable green rather than the brand green —
   people scan for that colour, and borrowing it would misrepresent the brand. */
.btn-wa {
  --btn-bg: #25D366;
  --btn-fg: #05341a;
  box-shadow: 0 8px 22px rgba(37, 211, 102, .26);
}
.btn-wa:hover { --btn-bg: #1FBC5A; --btn-fg: #05341a; transform: translateY(-2px); }
.infocard--wa .infocard__icon { background: rgba(37, 211, 102, .14); color: #128C4A; }

.btn-sm { padding: .58rem 1.1rem; font-size: var(--fs-xs); }
.btn-lg { padding: 1rem 1.9rem; font-size: 0.8125rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.link-arrow .icon { transition: transform .28s var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* -------------------------------------------------- 05  Layout primitives */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--sp-section); position: relative; }
.section--sm { padding-block: var(--sp-section-sm); }
.section--soft { background: var(--bg-soft); }
.section--tint { background: linear-gradient(180deg, var(--blue-100) 0%, #fff 100%); }
.section--deep { background: var(--blue-800); color: rgba(255, 255, 255, .82); }
.section--deep h2, .section--deep h3 { color: #fff; }

.grid { display: grid; gap: clamp(1.1rem, .6rem + 1.4vw, 1.9rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.sec-head { max-width: 46rem; margin-bottom: clamp(1.6rem, 1.25rem + 1.4vw, 2.4rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--left { max-width: 40rem; }
.sec-head__title { margin-bottom: .7rem; }
.sec-head__lead { font-size: var(--fs-lead); color: var(--text-body); margin: 0; }
/* second intro paragraph, sitting outside .sec-head so it keeps the same
   measure and left alignment without being pulled into the heading block */
.sec-head__lead--follow {
  max-width: 40rem;
  margin: -.9rem 0 clamp(1.6rem, 1.25rem + 1.4vw, 2.4rem);
}

/* decorative soft field behind hero / deep sections */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

/* -------------------------------- 06  Header, navigation, mega menu */
.topbar {
  background: var(--blue-800);
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-xs);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 40px;
}
.topbar__tag {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .9);
}
.topbar__links { display: flex; gap: 1.5rem; }
.topbar__links a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: rgba(255, 255, 255, .78);
  font-weight: 500;
}
.topbar__links a:hover { color: #fff; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: var(--sh-2);
  background: rgba(255, 255, 255, .95);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img {
  width: auto;
  height: clamp(46px, 4.4vw, 64px);
  transition: transform .3s var(--ease);
}
.brand:hover img { transform: scale(1.03); }

.mainnav { display: none; }
.mainnav__list {
  display: flex;
  align-items: center;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .62rem .82rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--n-700);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav-link:hover { color: var(--blue-700); background: var(--blue-100); }
.nav-link.active { color: var(--blue-700); }
.nav-link.active::after {
  content: '';
  position: absolute;
  left: .82rem;
  right: .82rem;
  bottom: .1rem;
  height: 2.5px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.nav-link--toggle .icon { transition: transform .28s var(--ease); }
.nav-link--toggle[aria-expanded='true'] .icon { transform: rotate(180deg); }

.mega {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 950;
  width: min(1080px, calc(100vw - 3rem));
  padding: 1.6rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-4);
  transform: translate(-50%, -8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
}
.mega[hidden] { display: block; }
.mega.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
}
.mega__inner { display: grid; grid-template-columns: repeat(3, 1fr) .9fr; gap: 1.4rem; }
@media (max-width: 1199.98px) {
  .mega__inner { grid-template-columns: repeat(3, 1fr); }
  .mega__promo { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}
.mega__col { min-width: 0; }
.mega__colhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
}
.mega__colhead:hover { color: var(--brand); }
.mega__colhead .icon { width: 1rem; height: 1rem; color: var(--accent); transition: transform .26s var(--ease-out); }
.mega__colhead:hover .icon { transform: translateX(3px); }
.mega__blurb { margin: .6rem 0 .8rem; font-size: var(--fs-xs); color: var(--text-muted); }
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.mega__list a {
  display: block;
  padding: .44rem .6rem;
  border-radius: var(--r-sm);
  color: var(--n-600);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: color .18s var(--ease), background-color .18s var(--ease), padding-left .18s var(--ease);
}
.mega__list a:hover { color: var(--blue-700); background: var(--blue-100); padding-left: .85rem; }
.mega__promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .7rem;
  padding: 1.35rem;
  border-radius: var(--r-md);
  background: linear-gradient(155deg, var(--blue-700), var(--blue-900));
  color: rgba(255, 255, 255, .84);
}
.mega__promo-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green-300);
}
.mega__promo-text { margin: 0; font-size: var(--fs-sm); line-height: 1.5; }

.site-header__actions { display: flex; align-items: center; gap: .75rem; }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff;
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.burger:hover { border-color: var(--blue-300); background: var(--blue-100); }
.burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--n-800);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------- 07  Mobile navigation */
.mnav { position: fixed; inset: 0; z-index: 1100; }
.mnav[hidden] { display: none; }
.mnav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(7, 43, 69, .5);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.mnav.is-open::before { opacity: 1; }
.mnav__panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(400px, 88vw);
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -20px 0 60px rgba(7, 43, 69, .22);
  transform: translateX(100%);
  transition: transform .38s var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mnav.is-open .mnav__panel { transform: translateX(0); }
.mnav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--gutter);
  border-bottom: 1px solid var(--border);
}
.mnav__head img { width: auto; height: 40px; }
.mnav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--n-700);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.mnav__close:hover { background: var(--blue-100); color: var(--blue-700); }
.mnav__list { list-style: none; margin: 0; padding: .75rem var(--gutter); flex: 1; }
.mnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  padding: .82rem .25rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--n-800);
  font-family: var(--font-display);
  font-size: 0.8325rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.mnav__link:hover, .mnav__link.active { color: var(--brand); }
.mnav__toggle .icon { transition: transform .28s var(--ease); color: var(--n-400); }
.mnav__toggle[aria-expanded='true'] .icon { transform: rotate(180deg); color: var(--brand); }
.mnav__sub { list-style: none; margin: 0; padding: .35rem 0 .6rem .8rem; }
.mnav__sub[hidden] { display: none; }
.mnav__sub a {
  display: block;
  padding: .5rem .25rem;
  color: var(--text-body);
  font-size: var(--fs-sm);
  border-left: 2px solid var(--border);
  padding-left: .85rem;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.mnav__sub a:hover { color: var(--brand); border-color: var(--accent); }
.mnav__foot { padding: 1.1rem var(--gutter) 1.6rem; border-top: 1px solid var(--border); display: grid; gap: .7rem; }
.mnav__contact {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--text-body);
  font-size: var(--fs-sm);
}
.mnav__contact .icon { color: var(--brand); }

/* ------------------------------------------------------------- 08  Hero */
/* Full-bleed background slider. The photographs are all composed with their
   subject on the right and open space on the left, so the copy sits over a
   scrim that is heavy on the left and clears away before it reaches anyone's
   face. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 74vh, 46rem);
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  background: var(--blue-900);
  color: rgba(255, 255, 255, .84);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s var(--ease), visibility 1.1s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
/* <picture> is a plain inline/block wrapper: without this it sizes to the
   image's own aspect ratio and the `height: 100%` on the <img> resolves
   against that instead of the slide, leaving a gap under the photograph. */
.hero__slide picture { display: block; width: 100%; height: 100%; }
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* hold the subject in frame as the viewport narrows and the crop tightens */
  object-position: 76% center;
}
/* A slow drift keeps a static photograph from feeling like a dead panel, but it
   has to finish inside the slide's own dwell time (main.js: INTERVAL = 6000ms)
   — at the old 14s it never reached scale(1) before the next slide loaded, so
   every slide sat permanently semi-zoomed instead of settling into a sharp,
   fully-framed shot. 5s completes with a beat to spare before the crossfade. */
.hero__slide.is-active img { animation: heroDrift 5s var(--ease) forwards; }
@keyframes heroDrift {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}



.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(96deg,
      rgba(5, 28, 46, .95) 0%,
      rgba(5, 28, 46, .9) 26%,
      rgba(5, 28, 46, .66) 44%,
      rgba(5, 28, 46, .24) 64%,
      rgba(5, 28, 46, .04) 80%,
      rgba(5, 28, 46, 0) 92%),
    linear-gradient(180deg, rgba(5, 28, 46, .34) 0%, rgba(5, 28, 46, 0) 30%);
}

.hero__inner { position: relative; width: 100%; }
.hero__content { max-width: 40rem; }

/* brand lockup — now the headline */
.hero__brand {
  margin: 0 0 1rem;
  color: #fff;
  /* PHARMACEUTICALS is one unbreakable 15-character word, so the floor has to
     be low enough for it to fit a 320px screen rather than run off the edge. */
  font-size: clamp(1.3696rem, 0.6468rem + 3.1957vw, 3.5rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(3, 20, 34, .45);
}
.hero__brand-2 { display: block; color: var(--green-400); }
/* the mark rides on the shoulder of the K, not on the baseline */
/* The mark rides on the shoulder of the K, not on the baseline.
   `vertical-align: super` is dropped deliberately: it adds its own shift on
   top of `top`, so the two fight each other and the position stops being
   predictable. Aligning to the baseline and lifting purely with `top` keeps
   it controllable — and because every value is in em it holds its position
   as the heading scales down on smaller screens. */
.hero__r {
  font-size: .42em;
  font-weight: 700;
  vertical-align: baseline;
  line-height: 0;
  letter-spacing: 0;
  position: relative;
  top: -1.32em;
  left: .06em;
}

/* Registered mark for headings outside the hero (currently the founder
   heading on About). Every value is in em so it scales with whatever heading
   it sits in. New class — nothing existing uses it. */
.reg {
  font-size: .6em;
  font-weight: 700;
  vertical-align: baseline;
  position: relative;
  top: -.78em;
  left: .05em;
  letter-spacing: 0;
}

.hero__tagline {
  max-width: 34rem;
  margin: 0 0 2rem;
  color: rgba(255, 255, 255, .9);
  font-family: var(--font-display);
  font-size: clamp(0.799rem, 0.7229rem + 0.4185vw, 1.1033rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.008em;
  text-shadow: 0 1px 14px rgba(3, 20, 34, .5);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.9rem; }

.hero__points { display: flex; flex-wrap: wrap; gap: .55rem 1.6rem; list-style: none; margin: 0; padding: 0; }
.hero__point { position: relative; }
/* The pill is a real <a href="#section">, styled to read exactly like the old
   plain <li> text — the only visible sign it's interactive is the hover/focus
   state below. Function first, decoration second. */
.hero__point-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  border-radius: 3px;
  transition: color .2s var(--ease);
}
.hero__point-link:hover,
.hero__point-link:focus-visible { color: #fff; }
.hero__point-link:focus-visible { outline: 2px solid var(--green-400); outline-offset: 4px; }
.hero__points .icon { width: 1.05rem; height: 1.05rem; color: var(--green-400); flex: none; }

/* Hover/focus preview card. CSS-only — no JS — so the pill works identically
   whether or not this loads: the <a> underneath always navigates and scrolls
   on its own. */
.hero__tip {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 15px);
  left: 50%;
  width: max-content;
  max-width: min(260px, calc(100vw - 2.6rem));
  padding: .95rem 1.1rem;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-3);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility .2s;
  pointer-events: none;
}
.hero__tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 13px;
  height: 13px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 3px;
}
.hero__point--tip:hover .hero__tip,
.hero__point--tip:focus-within .hero__tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.hero__tip-title {
  margin: 0 0 .55rem;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand);
}
.hero__tip-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.hero__tip-list li { display: flex; align-items: baseline; gap: .4rem; font-size: var(--fs-xs); line-height: 1.3; color: var(--text-body); }
.hero__tip-list strong { font-family: var(--font-display); font-weight: 800; color: var(--text); white-space: nowrap; }
.hero__tip-list--plain li { align-items: center; }
.hero__tip-list--plain .icon { width: .9rem; height: .9rem; color: var(--accent-text); flex: none; }
/* Partner-strip preview: brand name plus its own logo, not an SVG icon — wider
   panel and a two-column grid, since five image+name rows in a single column
   read too tall. */
.hero__tip--wide { max-width: min(300px, calc(100vw - 2.6rem)); }
.hero__tip-list--logos { grid-template-columns: 1fr 1fr; gap: .55rem .8rem; }
.hero__tip-list--logos li { align-items: center; }
.hero__tip-list--logos img { width: 34px; height: 24px; object-fit: contain; flex: none; }
.hero__tip-list--logos span { font-size: 0.6875rem; line-height: 1.25; }
/* first pill sits near the left edge of the viewport on mobile; a centred
   popup would clip, so it opens flush-left there instead */
@media (max-width: 480px) {
  .hero__point:first-child .hero__tip { left: 0; transform: translate(0, 8px); }
  .hero__point:first-child .hero__tip::after { left: 22px; transform: translate(-50%, -50%) rotate(45deg); }
  .hero__point:first-child.hero__point--tip:hover .hero__tip,
  .hero__point:first-child.hero__point--tip:focus-within .hero__tip { transform: translate(0, 0); }
}

/* slide selector */
.hero__dots { display: flex; gap: .5rem; margin-top: 2.4rem; }
.hero__dot {
  position: relative;
  width: 44px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .28);
  cursor: pointer;
  overflow: hidden;
  transition: background-color .25s var(--ease), width .35s var(--ease);
}
.hero__dot:hover { background: rgba(255, 255, 255, .5); }
.hero__dot.is-active { width: 68px; background: rgba(255, 255, 255, .3); }
.hero__dot-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--green-400);
  transform: scaleX(0);
  transform-origin: left;
}
/* the fill doubles as a progress bar for the autoplay timer */
.hero__dot.is-active .hero__dot-fill { animation: heroProgress var(--hero-interval, 6s) linear forwards; }
.hero--paused .hero__dot.is-active .hero__dot-fill { animation-play-state: paused; }
@keyframes heroProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 720px) {
  .hero { min-height: clamp(28rem, 82vh, 38rem); text-align: left; }
  /* stacked pills of different widths read as ragged; full-width also gives a
     bigger tap target on a phone */
  .hero__actions { flex-direction: column; align-items: stretch; gap: .65rem; }
  .hero__actions .btn { width: 100%; }
  /* the wide crop leaves almost nothing but the subject on a phone, so the
     scrim switches from a side wash to a full veil to keep text readable */
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(5, 28, 46, .82) 0%,
        rgba(5, 28, 46, .74) 40%,
        rgba(5, 28, 46, .88) 100%),
      linear-gradient(90deg, rgba(5, 28, 46, .55) 0%, rgba(5, 28, 46, .15) 100%);
  }
  .hero__slide img { object-position: 72% center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
  .hero__slide.is-active img { animation: none; }
  .hero__dot.is-active .hero__dot-fill { animation: none; transform: scaleX(1); }
}

/* --------------------------------------------------- 09  Sections & cards */
.fcard {
  position: relative;
  padding: clamp(1.25rem, 1.05rem + .6vw, 1.7rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}
.fcard:hover { transform: translateY(-5px); border-color: var(--blue-200); box-shadow: var(--sh-3); }
.fcard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: .9rem;
  border-radius: 14px;
  background: var(--blue-100);
  color: var(--brand);
  transition: background-color .32s var(--ease), color .32s var(--ease), transform .32s var(--ease);
}
.fcard__icon .icon { width: 1.55rem; height: 1.55rem; }
.fcard:hover .fcard__icon { background: var(--brand); color: #fff; transform: scale(1.06); }
.fcard--accent .fcard__icon { background: rgba(0, 166, 81, .1); color: var(--accent-text); }
.fcard--accent:hover .fcard__icon { background: var(--accent); color: #fff; }
.fcard__title { margin-bottom: .45rem; font-size: var(--fs-h4); }
.fcard__text { margin: 0; font-size: var(--fs-sm); color: var(--text-body); }

/* pillar cards (vision / mission / goal) */
.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 1.15rem + .75vw, 1.9rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease);
}
.pillar::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s var(--ease-out);
}
.pillar:nth-child(2)::before { background: var(--accent); }
.pillar:nth-child(3)::before { background: var(--mark); }
.pillar:hover { transform: translateY(-5px); box-shadow: var(--sh-3); }
.pillar:hover::before { transform: scaleX(1); }
.pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: .95rem;
  border-radius: 15px;
  background: var(--blue-100);
  color: var(--brand);
}
.pillar:nth-child(2) .pillar__icon { background: rgba(0, 166, 81, .1); color: var(--accent-text); }
.pillar:nth-child(3) .pillar__icon { background: rgba(224, 33, 39, .08); color: var(--red-500); }
.pillar__icon .icon { width: 1.7rem; height: 1.7rem; }
.pillar__text { margin: 0; color: var(--text-body); }
/* mission and goal each carry two paragraphs; without this they run together */
.pillar__text + .pillar__text { margin-top: .8rem; }

/* Row layout for the vision / mission / goal set.
   Three narrow columns only work while the three texts are a similar length.
   They are not: vision is roughly 25 words against the goal's 130, so as
   columns the vision card stretched to match its tallest neighbour and sat
   two-thirds empty. Full-width rows give the long text far more characters per
   line, which collapses the height difference to something a stacked list
   carries comfortably. */
.pillars { display: grid; gap: clamp(1rem, .8rem + .6vw, 1.4rem); }
.pillar__title { margin-bottom: 0; }
.pillar__head { margin-bottom: .9rem; }
@media (min-width: 768px) {
  .pillars .pillar {
    display: grid;
    grid-template-columns: minmax(10rem, 15rem) 1fr;
    gap: clamp(1.25rem, 1rem + 1.4vw, 3rem);
    align-items: start;
  }
  .pillar__head { margin-bottom: 0; }
}

/* about split */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.9rem, 1.3rem + 2.6vw, 3.5rem);
  align-items: center;
}
.split__media { position: relative; }
/* Natural proportions rather than a forced square. The About photograph is
   portrait and the subject's face sits high in the frame, so a centre square
   crop cut her head off. Correct width/height come from the build. */
.split__media img {
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-4);
}
.split__badge {
  position: absolute;
  right: clamp(-.5rem, -1vw, 1rem);
  bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: 15rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--sh-4);
}
.split__badge .icon { width: 1.6rem; height: 1.6rem; color: var(--accent-text); flex: none; }
.split__badge strong { display: block; font-family: var(--font-display); font-size: 0.7625rem; color: var(--text); line-height: 1.25; }
.split__badge span { font-size: 0.6875rem; color: var(--text-muted); }

/* product-family panel (stands in for photography we do not have) */
.ppanel {
  position: relative;
  isolation: isolate;
  overflow: hidden; /* contains the blurred glow so it cannot widen the page */
  padding: clamp(1.2rem, .9rem + 1.2vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, var(--blue-100) 0%, #fff 70%);
  box-shadow: var(--sh-3);
}
.ppanel__glow {
  position: absolute;
  z-index: -1;
  inset: auto -10% -12% -10%;
  height: 55%;
  border-radius: 50%;
  background: rgba(0, 166, 81, .14);
  filter: blur(48px);
}
.ppanel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.7rem, .5rem + .7vw, 1.1rem); }
.ppanel__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1rem .8rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--sh-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.ppanel__item:hover { transform: translateY(-5px); border-color: var(--blue-200); box-shadow: var(--sh-3); }
/* light packaging (Relox-S, Fasto-B) would vanish on a white card, so the
   thumbnail sits on a faint neutral to give the carton an edge to read against */
.ppanel__thumb {
  display: block;
  width: 100%;
  padding: .55rem;
  border-radius: 10px;
  background: linear-gradient(170deg, var(--n-100) 0%, var(--n-50) 100%);
}
.ppanel__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: transform .42s var(--ease-out);
}
.ppanel__item:hover img { transform: scale(1.07); }
.ppanel__name {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--n-700);
  text-align: center;
  line-height: 1.3;
}
.ppanel__item:hover .ppanel__name { color: var(--brand); }
/* Compact variant for the homepage About block. The panel shares a 1:1 split
   with the copy beside it, so at full width the tiles outweighed a column that
   is now a short heading and one paragraph. Capping the panel shrinks the tiles
   proportionally rather than squashing the packshots. */
/* Homepage About heading, sized to match the vision/mission/goal titles.
   `text-wrap: balance` is switched off here: evening the two lines out is what
   dragged "2010 —" onto the second line, away from the clause it belongs to.
   Filling the first line normally keeps the lead-in whole and drops the
   highlighted phrase onto its own line, which is also where the emphasis wants
   it. The phrase is a step smaller so it clears the first line at every width
   the column takes. */
.about-h { font-size: var(--fs-h3); line-height: 1.3; text-wrap: wrap; }
.about-h .u-mark { font-size: .88em; }

/* Justified body copy for the About paragraph. `hyphens: auto` comes with it
   deliberately: justifying without it stretches word spacing to fill the line,
   and in a column this narrow that opens visible rivers of white down the
   paragraph. Hyphenation gives the browser somewhere else to take up the slack.
   Below 576px the column is too narrow for either to look right, so it reverts
   to a normal ragged edge. */
.about-p { text-align: justify; hyphens: auto; }
@media (max-width: 575.98px) {
  .about-p { text-align: left; hyphens: manual; }
}

.ppanel--compact { max-width: 27rem; margin-inline: auto; }
.ppanel--compact .ppanel__item { padding: .8rem .65rem .75rem; }
.ppanel--compact .ppanel__thumb { padding: .45rem; }
.ppanel__caption {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1rem;
  padding: .95rem 1.1rem;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--sh-1);
}
.ppanel__caption .icon { width: 1.6rem; height: 1.6rem; color: var(--accent-text); flex: none; }
.ppanel__caption strong { display: block; font-family: var(--font-display); font-size: 0.7625rem; color: var(--text); line-height: 1.3; }
.ppanel__caption span span { font-size: var(--fs-xs); color: var(--text-muted); }

/* tick lists */
.ticks { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .7rem; }
.ticks li { display: flex; align-items: flex-start; gap: .7rem; font-size: var(--fs-sm); color: var(--text-body); }
.ticks .icon { width: 1.15rem; height: 1.15rem; margin-top: .2rem; color: var(--accent-text); flex: none; }
.ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.5rem; }

/* --------------------------------------------------------- 10  Products */
.pcard {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: transform .34s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease);
}
.pcard:hover { transform: translateY(-6px); border-color: var(--blue-200); box-shadow: var(--sh-4); }
.pcard__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.pcard__media {
  position: relative;
  padding: 1.1rem 1.1rem .2rem;
  /* stops short of pure white so near-white cartons keep a readable edge */
  background: linear-gradient(170deg, var(--n-100) 0%, var(--n-50) 100%);
  overflow: hidden;
}
.pcard__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: transform .5s var(--ease-out);
}
.pcard:hover .pcard__media img { transform: scale(1.06) translateY(-4px); }
.pcard__cat {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--border);
  color: var(--blue-700);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.pcard__body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.25rem 1.3rem; }
.pcard__brand {
  margin: 0 0 .4rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pcard__title { margin-bottom: .45rem; font-size: 0.9112rem; transition: color .24s var(--ease); }
.pcard:hover .pcard__title { color: var(--brand); }
.pcard__text { flex: 1; margin: 0 0 .9rem; font-size: var(--fs-sm); color: var(--text-body); }
.pcard__more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.pcard__more .icon { transition: transform .3s var(--ease-out); }
.pcard:hover .pcard__more .icon { transform: translateX(4px); }

/* category banner cards */
.catcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 15rem;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.2rem);
  border-radius: var(--r-xl);
  overflow: hidden;
  color: rgba(255, 255, 255, .85);
  isolation: isolate;
  transition: transform .34s var(--ease), box-shadow .34s var(--ease);
}
.catcard:hover { transform: translateY(-5px); box-shadow: var(--sh-4); color: rgba(255, 255, 255, .95); }
.catcard--dental { background: linear-gradient(150deg, var(--blue-600), var(--blue-800)); }
.catcard--pharma { background: linear-gradient(150deg, var(--green-600), #04553a); }
.catcard--consumer { background: linear-gradient(150deg, #3f5a70, #1d2f3f); }
.catcard__icon {
  position: absolute;
  top: -1.5rem;
  right: -1.5rem;
  z-index: -1;
  color: rgba(255, 255, 255, .1);
}
.catcard__icon .icon { width: 11rem; height: 11rem; }
.catcard__count {
  align-self: flex-start;
  margin-bottom: auto;
  padding: .32rem .75rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #fff;
}
.catcard h3 { margin-bottom: .5rem; color: #fff; }
.catcard p { margin-bottom: 1.1rem; font-size: var(--fs-sm); }

/* product detail page */
.pdetail { display: grid; grid-template-columns: 1fr; gap: clamp(1.9rem, 1.3rem + 2.4vw, 3.25rem); align-items: start; }
/* Static by default — sticky is applied only at the desktop breakpoint. In the
   single-column phone layout a sticky image pins itself to the top of the
   viewport while the copy scrolls underneath, so the badges and heading ended
   up rendering over the packshot. */
.pdetail__media {
  position: static;
  padding: clamp(1.1rem, .9rem + 1vw, 1.9rem);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: linear-gradient(170deg, var(--blue-100) 0%, var(--n-50) 100%);
}
.pdetail__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
/* ---- product gallery ---- */
.pgal__stage {
  position: relative;
  display: grid;
  border-radius: var(--r-lg);
  overflow: hidden;
}
/* every slide occupies the same grid cell so switching does not reflow */
.pgal__slide {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.pgal__slide.is-active { opacity: 1; visibility: visible; }
.pgal__slide img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: transform .5s var(--ease-out);
}
/* the in-use photograph fills its frame rather than floating in it */
.pgal__slide:nth-child(2) img { object-fit: cover; border-radius: var(--r-md); }
.pgal__slide:hover img { transform: scale(1.03); }
.pgal__zoom {
  position: absolute;
  right: .7rem;
  bottom: .7rem;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--border);
  color: var(--brand);
  box-shadow: var(--sh-2);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.pgal__slide:hover .pgal__zoom,
.pgal__slide:focus-visible .pgal__zoom { opacity: 1; transform: translateY(0); }

.pgal__thumbs { display: flex; gap: .6rem; margin-top: .8rem; }
.pgal__thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  flex: 1 1 0;
  min-width: 0;
  padding: .45rem .45rem .5rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: #fff;
  cursor: pointer;
  transition: border-color .24s var(--ease), background-color .24s var(--ease), transform .24s var(--ease);
}
.pgal__thumb:hover { border-color: var(--blue-300); transform: translateY(-2px); }
.pgal__thumb.is-active { border-color: var(--accent); background: rgba(0, 166, 81, .05); }
.pgal__thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: var(--n-50);
}
.pgal__thumb:first-child img { object-fit: contain; }
.pgal__thumb span {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pgal__thumb.is-active span { color: var(--green-text); }

/* ---- lightbox ---- */
.lbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, .5rem + 2vw, 3rem);
  background: rgba(7, 27, 43, .88);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.lbox[hidden] { display: none; }
.lbox.is-open { opacity: 1; }
.lbox__figure {
  margin: 0;
  max-width: min(1000px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  transform: scale(.96);
  transition: transform .32s var(--ease-out);
}
.lbox.is-open .lbox__figure { transform: scale(1); }
.lbox__figure img {
  max-width: 100%;
  max-height: calc(100vh - 11rem);
  width: auto;
  margin-inline: auto;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.lbox__cap {
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-sm);
  text-align: center;
}
.lbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background-color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.lbox__btn:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .5); }
.lbox__close { top: clamp(.8rem, 2vw, 1.6rem); right: clamp(.8rem, 2vw, 1.6rem); }
.lbox__prev { left: clamp(.5rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); }
.lbox__next { right: clamp(.5rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); }
.lbox__prev:hover, .lbox__next:hover { transform: translateY(-50%) scale(1.06); }
.lbox__prev .icon { transform: rotate(180deg); }
.lbox__btn[hidden] { display: none; }

/* ---- modal dialog (per-product enquiry) ---- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1150;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(7, 27, 43, .62);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; }
.modal__panel {
  position: relative;
  width: min(640px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -20px 60px rgba(7, 27, 43, .3);
  /* rises from the bottom on phones, where it reads as a sheet */
  transform: translateY(3%);
  transition: transform .38s var(--ease-out);
  overflow: hidden;
}
.modal.is-open .modal__panel { transform: translateY(0); }
.modal__close {
  position: absolute;
  top: .9rem;
  right: .9rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--n-700);
  cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.modal__close:hover { background: var(--blue-100); color: var(--blue-700); }
.modal__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.3rem 1.4rem;
  padding-right: 3.6rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(150deg, var(--blue-100), #fff 70%);
}
.modal__thumb {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: .35rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #fff;
  flex: none;
}
.modal__thumb img { width: 100%; height: 100%; object-fit: contain; }
.modal__headtext { min-width: 0; }
.modal__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--green-text);
}
.modal__title { margin: .15rem 0 .1rem; font-size: 0.9312rem; line-height: 1.25; }
.modal__meta { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.modal__body { padding: 1.4rem; overflow-y: auto; overscroll-behavior: contain; }
.modal__intro { margin-bottom: 1.2rem; font-size: var(--fs-sm); color: var(--text-body); }
.modal__intro strong { color: var(--text); }

@media (min-width: 576px) {
  .modal { align-items: center; padding: 1.5rem; }
  .modal__panel { border-radius: var(--r-xl); transform: translateY(0) scale(.97); }
  .modal.is-open .modal__panel { transform: translateY(0) scale(1); }
}

/* ---- sticky product action bar (narrow screens only) ---- */
.pbar {
  position: fixed;
  z-index: 880;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem var(--gutter);
  padding-bottom: max(.6rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 -6px 22px rgba(16, 30, 42, .1);
  transform: translateY(105%);
  transition: transform .34s var(--ease-out);
}
.pbar[hidden] { display: none; }
.pbar.is-visible { transform: translateY(0); }
.pbar__thumb {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: .2rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--n-50);
  flex: none;
}
.pbar__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pbar__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pbar__text strong {
  font-family: var(--font-display);
  font-size: 0.7125rem;
  color: var(--text);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pbar__text span { font-size: var(--fs-xs); color: var(--text-muted); }
.pbar__cta { flex: none; padding: .7rem 1.15rem; }

/* the bar sits where the back-to-top button lives, so lift it out of the way */
body:has(.pbar.is-visible) .to-top,
body.has-pbar .to-top { bottom: 5.2rem; }

@media (min-width: 992px) {
  .pbar { display: none; }
}

/* ---- lifestyle strip ---- */
/* auto-fit so a 3-item strip stretches to fill the row instead of leaving a
   fourth column empty */
.lstrip { display: grid; grid-template-columns: 1fr; gap: clamp(.8rem, .5rem + 1vw, 1.4rem); }
.lstrip__item {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--sh-2);
  transition: transform .34s var(--ease), box-shadow .34s var(--ease);
}
.lstrip__item:hover { transform: translateY(-5px); box-shadow: var(--sh-4); }
.lstrip__item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.lstrip__item:hover img { transform: scale(1.05); }
/* Scrim behind the caption. It has to be deep and tall: the lower half of these
   photographs is usually a light-coloured carton, and white text over white
   packaging is unreadable without it. */
.lstrip__item::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 70%;
  background: linear-gradient(to top,
    rgba(6, 34, 55, .96) 0%,
    rgba(6, 34, 55, .82) 32%,
    rgba(6, 34, 55, .42) 62%,
    rgba(6, 34, 55, 0) 100%);
}
.lstrip__label {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  padding: 1rem 1.1rem;
  color: #fff;
}
.lstrip__label strong {
  display: block;
  margin-bottom: .15rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.lstrip__label span {
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.pdetail__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .85rem;
  border: 1px solid var(--blue-200);
  border-radius: var(--r-pill);
  background: var(--blue-100);
  color: var(--blue-700);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.badge-pill--accent { border-color: rgba(0, 166, 81, .22); background: rgba(0, 166, 81, .08); color: var(--green-700); }
.pdetail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 1.4rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-soft);
}
.pdetail__meta dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.pdetail__meta dd { margin: .15rem 0 0; font-family: var(--font-display); font-weight: 700; color: var(--text); }
.pdetail__note {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--blue-300);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--blue-100);
  font-size: var(--fs-sm);
  color: var(--blue-800);
}
/* ---- variant picker (paper weight) ---- */
.vpick {
  margin: 1.6rem 0 0;
  padding: 1.15rem 1.25rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-soft);
}
.vpick__legend {
  padding: 0 .4rem;
  margin-left: -.4rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}
.vpick__help { margin: .15rem 0 .85rem; font-size: var(--fs-xs); color: var(--text-muted); }
.vpick__options { display: grid; gap: .6rem; }
.vpick__opt { display: block; cursor: pointer; }
/* the native radio stays in the accessibility tree and keeps keyboard
   behaviour; it is simply not painted */
.vpick__opt input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.vpick__pill {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .7rem .95rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.vpick__opt:hover .vpick__pill { border-color: var(--blue-300); transform: translateY(-1px); }
.vpick__opt input:focus-visible + .vpick__pill { outline: 3px solid var(--blue-400); outline-offset: 2px; }
.vpick__opt input:checked + .vpick__pill {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 166, 81, .13);
}
.vpick__value {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.vpick__opt input:checked + .vpick__pill .vpick__value { color: var(--green-text); }
.vpick__note { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }

@media (min-width: 480px) {
  .vpick__options { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .vpick__pill { flex-direction: column; align-items: flex-start; gap: .2rem; height: 100%; }
}

/* Composition / dosage / precautions blocks on nutraceutical pages */
.pdetail__details {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.6rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-soft);
}
.pdetail__detail-title {
  margin: 0 0 .5rem;
  font-size: var(--fs-h4);
}
.pdetail__detail p { margin: 0; font-size: var(--fs-sm); color: var(--text-body); }
.pdetail__detail .ticks { margin-top: .3rem; }
.pdetail__detail + .pdetail__detail { padding-top: 1.1rem; border-top: 1px solid var(--border); }

.pdetail__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* Feature section with the in-use photograph alongside.
   The lifestyle shot lives here rather than in the header gallery: it gives the
   feature list something to sit against, and it fills the column that a short
   feature list would otherwise leave half empty. */
.featsplit {
  display: grid;
  gap: clamp(1.7rem, 1.2rem + 2.2vw, 3rem);
  align-items: center;
}
/* No forced aspect ratio: the lifestyle shots are mostly portrait but at least
   one is landscape, and cropping a landscape frame to 3:4 cut the product out
   of shot. Natural proportions, with correct width/height attributes from the
   build, so nothing shifts as it loads. */
.featsplit__media img {
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
}
.featsplit__body .eyebrow { margin-bottom: .9rem; }
.featsplit__body h2 { margin-bottom: 1.4rem; }
@media (min-width: 992px) {
  /* features left, photograph right */
  .featsplit { grid-template-columns: 1.22fr .78fr; }
}

.featlist { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.featlist li {
  display: flex;
  gap: .9rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color .26s var(--ease), transform .26s var(--ease), box-shadow .26s var(--ease);
}
.featlist li:hover { border-color: var(--blue-200); transform: translateX(4px); box-shadow: var(--sh-2); }
.featlist .icon { width: 1.2rem; height: 1.2rem; margin-top: .22rem; color: var(--accent-text); flex: none; }
.featlist strong { display: block; font-family: var(--font-display); color: var(--text); font-size: var(--fs-body); margin-bottom: .1rem; }
.featlist span { font-size: var(--fs-sm); color: var(--text-body); }

/* --------------------------------- 11  Comparison, strategy, partners */
.compare { display: grid; grid-template-columns: 1fr; gap: 1.4rem; align-items: stretch; }
.compare__card {
  position: relative;
  padding: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.compare__card--good {
  border-color: rgba(0, 166, 81, .3);
  background: linear-gradient(165deg, rgba(0, 166, 81, .05), #fff 62%);
  box-shadow: var(--sh-3);
}
.compare__label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.2rem;
  padding: .4rem .9rem;
  border-radius: var(--r-pill);
  background: var(--n-100);
  color: var(--n-600);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.compare__card--good .compare__label { background: var(--green-cta); color: #fff; }
.compare__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .95rem; }
.compare__list li { display: flex; gap: .7rem; font-size: var(--fs-sm); }
.compare__list .icon { width: 1.15rem; height: 1.15rem; margin-top: .22rem; flex: none; }
.compare__card--bad .icon { color: var(--n-400); }
.compare__card--good .icon { color: var(--accent-text); }
/* citation for the comparison — a comparative claim should show its source */
.compare__source {
  margin: 1.1rem 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
}
.compare__vs {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: -1.7rem auto;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--n-500);
  position: relative;
  z-index: 2;
}

/* strategy roadmap */
.roadmap { display: grid; gap: 1.2rem; counter-reset: step; }
.roadstep {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .04);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.roadstep:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); transform: translateX(5px); }
.roadstep__num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: rgba(0, 166, 81, .18);
  color: var(--green-300);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 800;
}
.roadstep h3 { margin-bottom: .3rem; font-size: var(--fs-h4); }
.roadstep p { margin: 0; font-size: var(--fs-sm); color: rgba(255, 255, 255, .72); }

/* partner cards */
.partner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.35rem;
  padding: clamp(1.4rem, 1.15rem + 1vw, 2.1rem);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  transition: box-shadow .32s var(--ease), border-color .32s var(--ease), transform .32s var(--ease);
}
.partner:hover { border-color: var(--blue-200); box-shadow: var(--sh-3); transform: translateY(-4px); }
/* wraps on narrow screens: the region badge is `flex: none`, so without this it
   squeezes the name column below its longest word and pushes past the card */
.partner__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem 1rem; }
.partner__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 15px;
  background: var(--blue-100);
  color: var(--brand);
  flex: none;
}
.partner__icon .icon { width: 1.6rem; height: 1.6rem; }
.partner__name { margin-bottom: .2rem; font-size: var(--fs-h3); overflow-wrap: anywhere; }
.partner__role { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.partner__head > div { flex: 1 1 12rem; }
.partner__region {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
  padding: .32rem .8rem;
  border-radius: var(--r-pill);
  background: var(--n-100);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--n-600);
  flex: none;
}
.partner__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; list-style: none; padding: 0; }
.partner__tags a {
  display: inline-block;
  padding: .35rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--n-600);
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.partner__tags a:hover { border-color: var(--blue-300); background: var(--blue-100); color: var(--blue-700); }

/* stat / marker strip */
.markers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--border);
  overflow: hidden;
}
.marker {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1.25rem 1.3rem;
  background: var(--surface);
  transition: background-color .28s var(--ease);
}
.marker:hover { background: var(--blue-100); }
.marker__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--blue-100);
  color: var(--brand);
  flex: none;
  transition: background-color .28s var(--ease), color .28s var(--ease);
}
.marker:hover .marker__icon { background: var(--brand); color: #fff; }
.marker h3 { margin-bottom: .2rem; font-size: 0.8125rem; }
.marker p { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.55; }

/* ---- About: founder, strategic partners, sign-off ---- */
.founder {
  display: grid;
  gap: clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem);
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-2);
}
.founder__badge {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 1rem;
  border-radius: 15px;
  background: var(--blue-100);
  color: var(--brand);
}
.founder__badge .icon { width: 1.6rem; height: 1.6rem; }
.founder__role {
  margin: 0 0 .2rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--green-text);
}
.founder__name { margin: 0 0 1.1rem; font-size: var(--fs-h2); }
.founder__quals { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.founder__quals li { display: flex; gap: .65rem; font-size: var(--fs-sm); color: var(--text-body); }
.founder__quals .icon { width: 1.1rem; height: 1.1rem; margin-top: .2rem; color: var(--accent-text); flex: none; }
.founder__body p { font-size: var(--fs-lead); line-height: 1.6; color: var(--text-body); }
.founder__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.founder__stat {
  padding: 1.1rem 1.2rem;
  border-radius: var(--r-md);
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
}
.founder__stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.2116rem, 0.9424rem + 0.9424vw, 1.6155rem);
  font-weight: 800;
  line-height: 1;
  color: var(--brand);
}
.founder__stat span { display: block; margin-top: .3rem; font-size: var(--fs-xs); color: var(--text-muted); }

.spartner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.3rem, 1.1rem + .9vw, 1.9rem);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.spartner:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--blue-200); border-left-color: var(--accent); }
/* The partner's own logo, not a generic icon — shown at its natural aspect
   ratio inside a fixed-height tile so Fittydent's wide wordmark and a taller
   mark both sit the same visual size against each other. */
.spartner__icon {
  display: grid;
  place-items: center;
  width: 92px;
  height: 58px;
  padding: .5rem .6rem;
  border-radius: 14px;
  background: var(--blue-100);
  flex: none;
}
.spartner__icon img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.spartner__text { flex: 1 1 12rem; min-width: 0; }
.spartner__name { margin: 0 0 .25rem; font-size: var(--fs-h4); overflow-wrap: anywhere; }
.spartner__country {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin: 0 0 .2rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.spartner__role { margin: 0; font-size: var(--fs-sm); color: var(--text-body); }
.spartner__since {
  flex: none;
  padding: .6rem .95rem;
  border-radius: var(--r-md);
  background: var(--bg-soft);
  text-align: center;
}
.spartner__since-label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.spartner__since strong {
  font-family: var(--font-display);
  font-size: 1.1118rem;
  font-weight: 800;
  color: var(--green-text);
}

/* The marker strip runs as a single column when it sits beside body copy.
   Doubled selector so it outranks the later .markers breakpoint rules, which
   otherwise force it back to two and four columns. */
.markers.markers--stack { grid-template-columns: 1fr; }
.marker__note {
  margin: .3rem 0 0;
  padding-left: .2rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.55;
}

/* ------------------------------------------- coverage band + partner logos */
/* Reach figures, replacing the compliance markers. The number leads and the
   label follows, because the number is the part worth scanning. */
.cband {
  padding: clamp(1.3rem, 1rem + 1.2vw, 2rem) clamp(1.1rem, .9rem + 1vw, 1.9rem);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.cband__label {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
}
.cband__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.cstat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 .7rem; align-items: center; }
.cstat__icon {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--blue-100);
  color: var(--brand);
}
.cstat__icon .icon { width: 1.25rem; height: 1.25rem; }
.cstat__figure {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
}
.cstat__label { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.35; }
.cband__note {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 1.1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.cband__note .icon { color: var(--accent-text); margin-top: .1rem; flex: none; }

.plogos { margin-top: clamp(1rem, .8rem + .6vw, 1.4rem); text-align: center; }
.plogos__title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.plogos__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.4rem, 1rem + 2.4vw, 3.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The monograms are supplied at their own optical sizes, so the row is set by
   height and lets each mark keep its natural width. */
.plogos__item img {
  display: block;
  width: auto;
  height: clamp(40px, 3.4vw, 60px);
  /* shown in full brand colour at rest, per client request — a light lift on
     hover is enough to signal interactivity without muting the marks */
  transition: transform .3s var(--ease);
}
.plogos__item:hover img { transform: translateY(-2px); }
/* Some marks link through to their own section on the Global Partners page.
   `display:block` keeps the anchor from adding inline leading around the
   logo, so wrapping a mark in a link does not shift the row. */
.plogos__link { display: block; }
.plogos__link:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 4px; border-radius: 6px; }
/* A white-only mark, same fix as .ppanel__thumb for light packaging that would
   vanish on the page's white background — a dark chip behind it, the logo's
   own pixels untouched. */
.plogos__item--chip {
  padding: .5rem .8rem;
  border-radius: 10px;
  background: var(--blue-900);
}
.plogos__item--chip img { height: clamp(32px, 2.7vw, 44px); }
/* Full-tile logos: the source render's own background is shown as supplied,
   just cropped to the mark and rounded — no keying, nothing removed. Taller
   than the trimmed transparent marks since there's a background border to
   read within, not just glyph strokes. */
.plogos__item--tile {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--border);
}
.plogos__item--tile img { height: clamp(46px, 3.9vw, 66px); }
@media (min-width: 768px) {
  .cband__grid { grid-template-columns: repeat(4, 1fr); }
}

.signoff {
  padding: clamp(1.8rem, 1.4rem + 2vw, 3rem);
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, var(--blue-700), var(--blue-900) 70%);
  color: rgba(255, 255, 255, .84);
  text-align: center;
}
.signoff__mark {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--green-400);
}
.signoff__name {
  margin: 0 0 .4rem;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
}
.signoff__line {
  margin: 0;
  font-size: var(--fs-lead);
  color: var(--green-300);
  letter-spacing: .01em;
}

@media (min-width: 768px) {
  .founder { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* -------------------------------------------------- 12  Forms & contact */
.pagehero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.25rem, 1.8rem + 2.2vw, 3.75rem);
  background: linear-gradient(160deg, var(--blue-900), var(--blue-700));
  color: rgba(255, 255, 255, .8);
  overflow: hidden;
}
.pagehero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 70% 100% at 75% 20%, #000 10%, transparent 75%);
}
.pagehero__title { margin-bottom: .5rem; color: #fff; letter-spacing: -.028em; }
.pagehero__lead { max-width: 46rem; margin: 0; font-size: var(--fs-lead); color: rgba(255, 255, 255, .76); }

.crumbs { margin-bottom: 1.1rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); }
.crumbs li { display: flex; align-items: center; gap: .4rem; color: rgba(255, 255, 255, .6); }
.crumbs li:not(:last-child)::after { content: '/'; color: rgba(255, 255, 255, .3); }
.crumbs a { color: rgba(255, 255, 255, .78); font-weight: 500; }
.crumbs a:hover { color: #fff; }

.cform { display: grid; gap: 1.1rem; }
.cform__row { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; }
.field label {
  margin-bottom: .42rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.field label span { color: var(--mark); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .82rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 7.5rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--n-400); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--border-strong); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--blue-400);
  box-shadow: 0 0 0 4px rgba(61, 155, 213, .16);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C8091' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
.field__error { display: none; margin: .35rem 0 0; font-size: var(--fs-xs); color: var(--red-600); }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: var(--red-500); }
.field.is-invalid .field__error { display: block; }
/* Honeypot. Hidden from people without display:none, which some bots detect
   and skip; anything that fills it in is treated as spam by mail/send.php. */
.cform__trap {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.cform__note { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.cform__status { margin: 0; font-size: var(--fs-sm); font-weight: 600; }
.cform__status.is-ok { color: var(--green-text); }
.cform__status.is-error { color: var(--red-600); }

.infocard {
  display: flex;
  gap: 1rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color .28s var(--ease), box-shadow .28s var(--ease), transform .28s var(--ease);
}
.infocard:hover { border-color: var(--blue-200); box-shadow: var(--sh-2); transform: translateY(-3px); }
.infocard__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--blue-100);
  color: var(--brand);
  flex: none;
}
.infocard h3 { margin-bottom: .25rem; font-size: 0.8125rem; }
.infocard p, .infocard a { margin: 0; font-size: var(--fs-sm); color: var(--text-body); display: block; }
.infocard a:hover { color: var(--brand); }

.callout__head {
  margin: 1.6rem 0 .1rem;
  font-size: var(--fs-h4);
}
.callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1rem;
  margin-top: 1.6rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-lg);
  background: var(--bg-soft);
}
.callout__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--brand);
  flex: none;
}
.callout__body { flex: 1 1 12rem; min-width: 0; }
.callout__body strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.35;
}
.callout__body span { font-size: var(--fs-xs); line-height: 1.5; color: var(--text-muted); }
.callout .btn { flex: none; }

.formwrap {
  padding: clamp(1.6rem, 1.1rem + 2vw, 3rem);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-3);
}

/* ----------------------------------------------------- 13  Legal pages */
.legal { max-width: 54rem; }
.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.9rem;
  padding: 1.1rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  font-size: var(--fs-sm);
}
.legal__meta strong { font-family: var(--font-display); color: var(--text); }
.legal__section { margin-bottom: 1.9rem; }
.legal__section:last-child { margin-bottom: 0; }
.legal__h2 { font-size: var(--fs-h3); margin-bottom: .8rem; }
.legal__section p { color: var(--text-body); }
.legal__toc {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-soft);
}
.legal__toc h2 { font-size: var(--fs-h4); margin-bottom: .8rem; }
.legal__toc ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; font-size: var(--fs-sm); }
.legal__toc a { color: var(--text-body); }
.legal__toc a:hover { color: var(--brand); }

/* --------------------------------------------------------- 14  Footer */
.site-footer {
  padding-top: clamp(2.5rem, 1.9rem + 2.4vw, 4rem);
  background: var(--blue-900);
  color: rgba(255, 255, 255, .68);
  font-size: var(--fs-sm);
}
.footer-cta {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.8rem, 1.3rem + 2vw, 3rem);
  margin-bottom: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, var(--blue-600), var(--blue-800) 70%);
  border: 1px solid rgba(255, 255, 255, .1);
}
.footer-cta__title { margin-bottom: .5rem; color: #fff; font-size: var(--fs-h2); }
.footer-cta p { margin: 0; color: rgba(255, 255, 255, .76); }

.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.25rem; padding-bottom: 2rem; }
.footer-logo {
  width: auto;
  height: 56px;
  margin-bottom: 1.2rem;
  padding: .6rem .8rem;
  border-radius: var(--r-md);
  background: #fff;
}
.footer-col p { color: rgba(255, 255, 255, .62); line-height: 1.65; }
.footer-head {
  margin-bottom: 1.1rem;
  color: #fff;
  font-size: 0.8125rem;
  letter-spacing: .01em;
}
.footer-links, .footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-links a { color: rgba(255, 255, 255, .66); transition: color .2s var(--ease), padding-left .2s var(--ease); }
.footer-links a:hover { color: #fff; padding-left: .3rem; }
.footer-contact li { display: flex; gap: .7rem; align-items: flex-start; color: rgba(255, 255, 255, .66); }
.footer-office {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--green-400);
}
.footer-contact .icon { width: 1.1rem; height: 1.1rem; margin-top: .28rem; color: var(--green-400); flex: none; }
.footer-contact a { color: rgba(255, 255, 255, .66); }
.footer-contact a:hover { color: #fff; }

.social { display: flex; gap: .55rem; list-style: none; margin: 1.3rem 0 0; padding: 0; }
.social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 11px;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .74);
  transition: background-color .24s var(--ease), color .24s var(--ease), transform .24s var(--ease), border-color .24s var(--ease);
}
.social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-3px); }
.social .icon { width: 1.1rem; height: 1.1rem; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding-block: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .55);
}
.footer-bottom p { margin: 0; }
.footer-bottom__links { display: flex; gap: 1.3rem; list-style: none; margin: 0; padding: 0; }
.footer-bottom__links a { color: rgba(255, 255, 255, .6); }
.footer-bottom__links a:hover { color: #fff; }

.to-top {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 850;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--sh-brand);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background-color .24s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--blue-700); }

/* Floating WhatsApp contact button. Unlike .to-top it is not scroll-gated —
   visitors expect this one to be reachable the moment the page loads, not
   only after they scroll. It stacks directly above .to-top with a fixed gap
   computed from .to-top's own height, so the two never collide; that offset
   is duplicated (not shared via a variable) for the .has-pbar state below so
   it keeps clearing the mobile product enquiry bar the same way .to-top does. */
.wa-float {
  position: fixed;
  right: 1.1rem;
  bottom: 4.7rem;
  z-index: 850;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: var(--sh-3);
  transition: transform .24s var(--ease), background-color .24s var(--ease), bottom .3s var(--ease);
}
.wa-float:hover { background: #1FBC5A; transform: translateY(-2px); color: #fff; }
.wa-float:focus-visible { outline: 2px solid #128C4A; outline-offset: 3px; }
.wa-float .icon { width: 28px; height: 28px; }
body:has(.pbar.is-visible) .wa-float,
body.has-pbar .wa-float { bottom: 8.8rem; }
@media (max-width: 400px) {
  .wa-float { width: 50px; height: 50px; right: .85rem; bottom: 4.35rem; }
  .wa-float .icon { width: 26px; height: 26px; }
  body:has(.pbar.is-visible) .wa-float,
  body.has-pbar .wa-float { bottom: 8.45rem; }
}

/* --------------------------------------------- 15  Motion & utilities */
/* Reveal-on-scroll.
   Scoped to `html.js`, which an inline head script sets before first paint.
   Without JavaScript the rule never applies, so every section renders visible
   rather than staying stuck at opacity 0 — the content is never held hostage
   by the animation. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out) var(--d, 0ms), transform .7s var(--ease-out) var(--d, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Horizontal slide-ins are reserved for wide screens. Below the split
   breakpoint these blocks span the full container, so an X offset would push
   past the viewport and create a horizontal scrollbar — there they fade up. */
.js .reveal--scale { transform: scale(.96); }

@media (min-width: 992px) {
  .js .reveal--left { transform: translateX(-26px); }
  .js .reveal--right { transform: translateX(26px); }
}
.js .reveal--left.is-in,
.js .reveal--right.is-in,
.js .reveal--scale.is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__chip { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; }
  .site-header, .topbar, .to-top, .wa-float, .mnav, .footer-cta { display: none !important; }
  body { color: #000; }
}

/* cross-link band — deliberately lighter than the footer CTA so the two do not
   read as the same component stacked twice */
.crosslink {
  display: grid;
  gap: 1.2rem;
  align-items: center;
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-2);
}
.crosslink h2 { margin-bottom: .35rem; font-size: var(--fs-h3); }
.crosslink p { margin: 0; font-size: var(--fs-sm); color: var(--text-body); }
@media (min-width: 768px) { .crosslink { grid-template-columns: 1fr auto; } }

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

/* The handful of utilities the markup needs. The site previously pulled in all
   of Bootstrap for exactly these three rules — 306 KB of CSS+JS for utilities
   that cost a few lines here, which is the opposite of a fast page. */
.w-100 { width: 100% !important; }

/* Block spacing utilities.
   These live here rather than as inline `style="margin-bottom:clamp(...)"`
   because CSS math requires whitespace around `+` and `-`: written inline as
   `clamp(1.75rem,1.4rem+1.4vw,2.5rem)` the declaration is invalid and the
   browser drops it silently, so the margin simply never applied. */
.mb-block { margin-bottom: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.mb-block-sm { margin-bottom: clamp(1.25rem, 1rem + 1.2vw, 1.9rem); }

/* centred variant of the hero, used by the 404 page */
.hero--center { text-align: center; }
.hero--center .hero__lead { margin-inline: auto; }
.hero--center .hero__actions { justify-content: center; }
.hero--center .hero__title { font-size: clamp(1.5111rem, 1.1417rem + 1.6119vw, 2.3506rem); }
.hide-below-lg { display: none !important; }
@media (min-width: 992px) {
  .hide-below-lg { display: inline-flex !important; }
}

/* ----------------------------------------------------- 16  Responsive */
@media (min-width: 576px) {
  .lstrip { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .cform__row { grid-template-columns: 1fr 1fr; }
  .markers { grid-template-columns: 1fr 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .ticks--2 { grid-template-columns: 1fr; }
  .topbar__links a span { display: none; }
  .topbar__links { gap: .9rem; }
  .hero__chip--a { left: 0; bottom: -1.5rem; }
  .hero__chip--b { right: 0; top: -1.5rem; }
  .footer-cta { text-align: center; justify-items: center; }
}

@media (min-width: 768px) {
  .partner { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr auto 1fr; align-items: stretch; }
  .compare__vs { margin: auto 0; }
}

@media (min-width: 992px) {
  /* the logo grows with the viewport, so the bar has to grow with it or the
     artwork ends up sitting on the border */
  :root { --header-h: 96px; }
  .lstrip { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .mainnav { display: block; }
  .burger { display: none; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .markers { grid-template-columns: repeat(4, 1fr); }
  .hero__inner { grid-template-columns: 1.08fr .92fr; }
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
  .pdetail { grid-template-columns: .9fr 1.1fr; }
  .pdetail__media { position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 3rem; }
  .footer-cta { grid-template-columns: 1fr auto; }
  .partner { grid-template-columns: 1.15fr .85fr; align-items: center; }
  .roadmap { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1200px) {
  .grid--4 { gap: 1.75rem; }
}


/* Prevents the top padding of a full section from stacking on top of
   the bottom padding of a preceding compact (--sm) section */
.section--sm + .section {
  padding-top: var(--sp-section-sm);
}