/* ==========================================================================
   Diagno Cure Pharmaceuticals
   Core stylesheet — design tokens, bespoke components, motion
   Tailwind supplies the utility layer (assets/css/tailwind.css); everything
   characteristic to the brand lives here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Typeface — Archivo Variable, self-hosted.
   One family worked across its width axis: expanded for display, normal
   for text. Both the weight and width axes live in a single 90 KB file,
   so no third-party font request is made.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('../fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('../fonts/archivo-latin-ext-wdth-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand, sampled from the logo */
  --blue:        #0066B4;
  --blue-deep:   #004C87;
  --blue-lift:   #2E8BD6;
  --red:         #ED1C24;
  --red-deep:    #C4141B;
  --ink:         #231F20;

  /* Surfaces */
  --navy:        #071C33;   /* dark band — deep brand navy, never near-black */
  --navy-soft:   #0D2A49;
  --paper:       #F5F8FB;   /* clinical white with a cool cast */
  --paper-warm:  #FFFFFF;
  --sky:         #E4F0FA;
  --mist:        #CFE3F3;

  /* Text */
  --text:        #10243A;
  --text-soft:   #44607C;
  --text-faint:  #7E95AC;
  --on-dark:     #EAF2FA;
  --on-dark-soft:#9DB6CE;

  /* Lines */
  --line:        #D9E6F2;
  --line-dark:   rgba(255,255,255,.14);

  /* Type */
  --font: 'Archivo Variable', 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Rhythm */
  --shell: 1240px;
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --sec-y: clamp(3.75rem, 7.5vw, 6.5rem);

  /* Geometry — the lozenge radius of a blister pocket */
  --r-pill: 999px;
  --r-card: 18px;
  --r-lg: 28px;

  /* Elevation — restrained, cool-cast, not the default grey blur */
  --lift-1: 0 1px 2px rgba(7,28,51,.06), 0 4px 14px rgba(7,28,51,.05);
  --lift-2: 0 2px 6px rgba(7,28,51,.07), 0 18px 44px rgba(7,28,51,.09);
  --lift-3: 0 30px 80px rgba(7,28,51,.18);

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

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-stretch: 100%;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  /* `hidden` here would make overflow-y compute to auto, turning body into a
     scroll container and breaking position:sticky. `clip` contains the same
     horizontal overflow without that side effect; the first line is the
     fallback for browsers that do not know `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* Tailwind preflight is switched off in tailwind.config.js so the two sheets
   do not fight over element selectors — which means the reset belongs here. */
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }

/* Anchor targets clear the fixed header */
[id] { scroll-margin-top: 6rem; }

::selection { background: var(--blue); color: #fff; }

/* Focus — visible, branded, never removed */
:focus-visible {
  outline: 3px solid var(--blue-lift);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Type scale — one family, worked across its width axis
   -------------------------------------------------------------------------- */
.display {
  font-stretch: 118%;
  font-weight: 700;
  font-size: clamp(2.05rem, 5.4vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -.026em;
  margin: 0;
}

.h1 {
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(1.85rem, 3.3vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

.h2 {
  font-stretch: 108%;
  font-weight: 650;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1.14;
  letter-spacing: -.016em;
  margin: 0;
}

.h3 {
  font-stretch: 100%;
  font-weight: 650;
  font-size: 1.12rem;
  line-height: 1.3;
  letter-spacing: -.008em;
  margin: 0;
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.27rem);
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 58ch;
  margin: 0;
}

.body-text { max-width: 68ch; color: var(--text-soft); }
.body-text p + p { margin-top: 1.05em; }

/* Section marker — carries the segment colour, so it encodes which
   part of the portfolio you are in rather than decorating the heading. */
.marker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .84rem;
  font-stretch: 100%;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 1.1rem;
}
.marker::before {
  content: '';
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}
.on-navy .marker { color: var(--blue-lift); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.band { position: relative; padding-block: var(--sec-y); }
.band-tight { padding-block: clamp(3rem, 6vw, 4.5rem); }

.on-navy { color: var(--on-dark); }
.on-navy .lede,
.on-navy .body-text { color: var(--on-dark-soft); }

/* --------------------------------------------------------------------------
   5. Background field — the scroll-driven colour transition
   A fixed layer behind everything. JS interpolates --bg-now between the
   data-bg value of the section entering and the one leaving.
   -------------------------------------------------------------------------- */
.bg-field {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--bg-now, var(--paper));
  transition: background-color .65s var(--ease);
  will-change: background-color;
}

/* Drifting gradient orbs inside the field — the "atmosphere" layer */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  will-change: transform;
}
.orb-a { width: 46vw; height: 46vw; left: -12vw; top: -10vw;
         background: radial-gradient(circle, rgba(0,102,180,.42), transparent 68%); }
.orb-b { width: 38vw; height: 38vw; right: -8vw; top: 28vh;
         background: radial-gradient(circle, rgba(237,28,36,.20), transparent 68%); }
.orb-c { width: 50vw; height: 50vw; left: 22vw; bottom: -18vw;
         background: radial-gradient(circle, rgba(46,139,214,.30), transparent 70%); }

/* --------------------------------------------------------------------------
   6. Floating element layer — capsules and tablets drifting at depth
   -------------------------------------------------------------------------- */
.float-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.floater {
  position: absolute;
  display: block;
  will-change: transform;
  animation: drift var(--dur, 15s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}

@keyframes drift {
  from { transform: translate3d(0,0,0) rotate(var(--rot, 0deg)); }
  to   { transform: translate3d(var(--dx, 16px), var(--dy, -26px), 0)
                    rotate(calc(var(--rot, 0deg) + var(--spin, 14deg))); }
}

/* A capsule: two coloured halves, a glass highlight, a soft contact shadow */
.capsule {
  display: block;
  width: var(--w, 68px);
  height: var(--h, 28px);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg,
              var(--c1, #0066B4) 0 49.5%,
              rgba(255,255,255,.92) 50.5% 100%);
  box-shadow: inset 0 -3px 7px rgba(7,28,51,.22),
              inset 0 2px 4px rgba(255,255,255,.65),
              0 10px 26px rgba(7,28,51,.14);
  position: relative;
  overflow: hidden;
}
.capsule::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%; top: 13%;
  height: 26%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.18));
  filter: blur(1px);
}

/* A round tablet with a score line */
.tablet {
  display: block;
  width: var(--w, 42px);
  height: var(--w, 42px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.95), rgba(255,255,255,0) 54%),
    var(--c1, #E8F1F9);
  box-shadow: inset 0 -4px 8px rgba(7,28,51,.18),
              inset 0 2px 3px rgba(255,255,255,.8),
              0 10px 24px rgba(7,28,51,.14);
  position: relative;
}
.tablet::after {
  content: '';
  position: absolute;
  left: 50%; top: 18%;
  width: 1.5px; height: 64%;
  transform: translateX(-50%);
  background: rgba(7,28,51,.16);
  border-radius: 1px;
}

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  padding-block: .85rem;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease),
              padding .4s var(--ease), backdrop-filter .4s var(--ease);
}
.site-head.is-stuck {
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(170%) blur(14px);
  -webkit-backdrop-filter: saturate(170%) blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(7,28,51,.07);
  padding-block: .5rem;
}

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand-mark { display: flex; align-items: center; }
.brand-mark img {
  height: 46px;
  width: auto;
  transition: height .4s var(--ease);
}
.site-head.is-stuck .brand-mark img { height: 38px; }

.nav { display: flex; align-items: center; gap: .3rem; }

.nav a.partner-btn {
    color: #fff !important;
}

.nav a {
  position: relative;
  padding: .55rem .85rem;
  font-size: .95rem;
  font-stretch: 100%;
  font-weight: 550;
  color: var(--text);
  border-radius: 8px;
  transition: color .22s var(--ease);
}
.nav a::after {
  content: '';
  position: absolute;
  left: .85rem; right: .85rem; bottom: .3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav a:hover { color: var(--blue); }
.nav a:hover::after,
.nav a[aria-current='page']::after { transform: scaleX(1); }
.nav a[aria-current='page'] { color: var(--blue); }

/* Burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 12px; right: 12px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .92rem 1.6rem;
  border-radius: var(--r-pill);
  font-size: .97rem;
  font-stretch: 100%;
  font-weight: 600;
  border: 1.5px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              background-color .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease);
}

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0,102,180,.3);
}
.btn-primary:hover {
  background: var(--blue-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,102,180,.38);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--mist);
}
.btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px);
}

.on-navy .btn-ghost { color: var(--on-dark); border-color: var(--line-dark); }
.on-navy .btn-ghost:hover { border-color: var(--blue-lift); color: #fff; background: rgba(255,255,255,.06); }

/* Specular sweep on press-worthy buttons */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.4) 50%, transparent 80%);
  transform: translateX(-130%);
  transition: transform .7s var(--ease-out);
}
.btn-primary:hover::before { transform: translateX(130%); }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(8rem, 15vw, 11rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-copy > * + * { margin-top: 1.5rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* The headline's second line carries the red pulse underline — the one
   place red appears in the hero, echoing the swoosh in the logo. */
.pulse-under {
  position: relative;
  display: inline-block;
}
.pulse-under::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: .06em;
  height: .09em;
  background: var(--red);
  border-radius: 99px;
  transform: scaleX(0);
  transform-origin: left;
  animation: wipe 1.1s .75s var(--ease-out) forwards;
}
@keyframes wipe { to { transform: scaleX(1); } }

/* Hero stat rail */
.rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(.75rem, 2vw, 1.75rem);
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.rail-num {
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1;
  color: var(--blue);
  letter-spacing: -.02em;
  font-feature-settings: 'tnum' 1;
}
.rail-lab {
  font-size: .78rem;
  line-height: 1.3;
  color: var(--text-faint);
  margin-top: .4rem;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   10. The blister pack — the hero object
   -------------------------------------------------------------------------- */
.pack-stage {
  position: relative;
  perspective: 1400px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}

.blister {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  width: min(100%, 420px);
  padding: 26px 22px 30px;
  border-radius: 26px;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform .5s var(--ease-out);
  /* Brushed aluminium foil */
  background:
    linear-gradient(118deg,
      #F4F8FB 0%, #DCE8F2 14%, #FBFDFE 27%, #CEDEEC 41%,
      #F2F7FB 56%, #D4E2EE 72%, #FAFCFE 86%, #DDE9F3 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 0 rgba(7,28,51,.07),
    0 30px 70px rgba(7,28,51,.2),
    0 6px 18px rgba(7,28,51,.1);
  border: 1px solid rgba(255,255,255,.7);
  will-change: transform;
}

/* Perforation marks down the long edges */
.blister::before,
.blister::after {
  content: '';
  position: absolute;
  top: 16px; bottom: 16px;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(7,28,51,.16) 0 4px,
    transparent 4px 9px);
}
.blister::before { left: 10px; }
.blister::after  { right: 10px; }

.blister-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 18px;
  padding-inline: 4px;
}
.blister-brand {
  font-stretch: 112%;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -.015em;
  color: var(--blue);
}
.blister-brand em {
  font-style: normal;
  color: var(--red);
}
.blister-dose {
  font-size: .72rem;
  color: var(--text-faint);
  font-feature-settings: 'tnum' 1;
  letter-spacing: .01em;
}

.pockets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 11px;
}

/* A formed pocket: a shallow dome holding a tablet */
.pocket {
  aspect-ratio: 1 / 1.14;
  border-radius: 46% 46% 46% 46% / 42% 42% 42% 42%;
  background:
    radial-gradient(ellipse at 34% 24%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(160deg, rgba(255,255,255,.55), rgba(174,198,219,.5));
  box-shadow:
    inset 0 -3px 6px rgba(7,28,51,.2),
    inset 0 2px 3px rgba(255,255,255,.9),
    0 2px 5px rgba(7,28,51,.09);
  display: grid;
  place-items: center;
  position: relative;
  transform: translateZ(10px);
}

.pill {
  width: 70%;
  height: 44%;
  border-radius: var(--r-pill);
  background:
    radial-gradient(ellipse at 34% 28%, rgba(255,255,255,.9), rgba(255,255,255,0) 58%),
    var(--pc, #0066B4);
  box-shadow: inset 0 -2px 4px rgba(7,28,51,.3);
  position: relative;
}
.pill::after {
  content: '';
  position: absolute;
  left: 50%; top: 22%;
  width: 1px; height: 56%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.45);
}

/* Empty pocket — the dose already taken; gives the pack a used, real feel */
.pocket.is-empty .pill { opacity: 0; }
.pocket.is-empty {
  background: linear-gradient(160deg, rgba(255,255,255,.3), rgba(174,198,219,.26));
  box-shadow: inset 0 -1px 3px rgba(7,28,51,.1), inset 0 1px 2px rgba(255,255,255,.6);
}

/* Moving specular bar across the foil, driven by pointer or idle loop */
.blister-sheen {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  overflow: hidden;
  pointer-events: none;
}
.blister-sheen::before {
  content: '';
  position: absolute;
  top: -60%; bottom: -60%;
  left: var(--sheen, -30%);
  width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.72), transparent);
  transform: rotate(14deg);
  transition: left .25s linear;
}

.pack-caption {
  margin-top: 1.4rem;
  text-align: center;
  font-size: .82rem;
  color: var(--text-faint);
  max-width: 34ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   10b. The fill — scroll-scrubbed bottle scene
   The track is tall; the stage inside it pins to the viewport, so scrolling
   the track scrubs the animation instead of moving the artwork.
   -------------------------------------------------------------------------- */
/* The scene paints its own background rather than letting the shared colour
   field show through. The field would wash to navy for the portfolio band
   while this section's copy is still on screen, putting dark text on a dark
   ground. Starting at the previous band's colour keeps the join seamless,
   and the fade to navy lands after the stage has released. */
.fill-scene {
  position: relative;
  background: linear-gradient(180deg,
    #EDF4FB 0%,
    #E7F0FA 46%,
    #DEEAF6 72%,
    #9DB8D2 88%,
    #071C33 100%);
}

.fill-track { height: 320vh; }

.fill-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.fill-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  width: 100%;
}

.fill-copy > * + * { margin-top: 1.25rem; }

/* Readout ------------------------------------------------------------------ */
.fill-meter {
  margin-top: 2.25rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  max-width: 24rem;
}

.fill-count { display: flex; align-items: baseline; gap: .6rem; }

.fill-num {
  font-stretch: 118%;
  font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--blue);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}

.fill-of { font-size: .92rem; color: var(--text-faint); }

.fill-seg {
  margin-top: .7rem;
  font-stretch: 104%;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--seg, var(--text-soft));
  transition: color .35s var(--ease);
}

.fill-bar {
  margin-top: 1rem;
  height: 4px;
  border-radius: 99px;
  background: var(--mist);
  overflow: hidden;
}
.fill-bar-on {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue), var(--blue-lift));
  transform: scaleX(var(--fill, 0));
  transform-origin: left;
}

/* Bottle -------------------------------------------------------------------
   Everything is positioned in % of .bottle-wrap, so the whole thing scales
   with one width change. Vertical bands:
     0–20%  open air the tablets fall through
    20–27%  cap          26–34%  neck          34–100%  body
   -------------------------------------------------------------------------- */
.bottle-wrap {
  position: relative;
  width: min(100%, 268px);
  aspect-ratio: 268 / 600;
  margin-inline: auto;
}

/* 1. Back glass — what you see through the contents */
.bottle-back {
  position: absolute;
  left: 0; right: 0;
  top: 34%; bottom: 0;
  border-radius: 20px 20px 26px 26px;
  background:
    linear-gradient(100deg,
      rgba(226,239,250,.92) 0%,
      rgba(198,222,241,.80) 26%,
      rgba(236,245,252,.88) 52%,
      rgba(190,216,238,.80) 78%,
      rgba(222,236,249,.90) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 6px 0 14px rgba(255,255,255,.55),
    inset -10px 0 20px rgba(7,28,51,.14),
    inset 0 -14px 24px rgba(7,28,51,.1),
    0 0 0 1px rgba(125,163,196,.3),
    0 18px 40px rgba(7,28,51,.1);
}

/* Shoulder: a soft taper where the body meets the neck */
.bottle-back::before {
  content: '';
  position: absolute;
  left: 8%; right: 8%;
  top: -5%;
  height: 10%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, rgba(222,236,249,.75), rgba(214,232,247,.9));
}

/* 2. Contents */
.pills-layer { position: absolute; inset: 0; }

.fill-pill {
  position: absolute;
  left: 0; top: 0;
  width: 16%;
  aspect-ratio: 1 / .62;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 34% 28%, rgba(255,255,255,.92), rgba(255,255,255,0) 58%),
    var(--c, #0066B4);
  box-shadow:
    inset 0 -3px 5px rgba(7,28,51,.3),
    inset 0 2px 3px rgba(255,255,255,.45),
    0 3px 7px rgba(7,28,51,.18);
  will-change: transform;
}
/* Score line */
.fill-pill::after {
  content: '';
  position: absolute;
  left: 50%; top: 26%;
  width: 1px; height: 48%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.42);
}

/* 3. Front glass — paints over the contents */
.bottle-front {
  position: absolute;
  left: 0; right: 0;
  top: 34%; bottom: 0;
  border-radius: 20px 20px 26px 26px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}

.bottle-sheen {
  position: absolute;
  left: 9%; top: 4%;
  width: 13%; height: 62%;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.18));
  filter: blur(1.5px);
}

.bottle-rim {
  position: absolute;
  left: 6%; right: 6%; top: 2.5%;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.8);
}

/* Label sits high on the body so the contents stack below it, as on a real
   pharmacy bottle — it never hides the pills. */
.bottle-label {
  position: absolute;
  left: 6%; right: 6%;
  top: 11%;
  padding: .7rem .5rem .75rem;
  border-radius: 8px;
  background: linear-gradient(180deg, #FFFFFF, #F4F8FC);
  box-shadow: 0 1px 0 rgba(255,255,255,.9), 0 4px 10px rgba(7,28,51,.1);
  text-align: center;
  display: block;
}
.label-brand {
  display: block;
  font-stretch: 112%;
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: -.015em;
  color: var(--blue);
  line-height: 1;
}
.label-brand em { font-style: normal; color: var(--red); }
.label-rule {
  display: block;
  width: 34%;
  height: 2px;
  margin: .42rem auto;
  border-radius: 2px;
  background: var(--mist);
}
.label-sub {
  display: block;
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--text-faint);
  line-height: 1;
}

/* Neck and cap — above the body, painting over anything falling past them */
.bottle-neck {
  position: absolute;
  left: 32%; right: 32%;
  top: 26%; height: 10%;
  background: linear-gradient(100deg,
    rgba(232,243,252,.95), rgba(196,220,240,.85) 45%, rgba(238,247,253,.95));
  box-shadow:
    inset 2px 0 5px rgba(255,255,255,.8),
    inset -4px 0 8px rgba(7,28,51,.14);
}

.bottle-cap {
  position: absolute;
  left: 27%; right: 27%;
  top: 20%; height: 7.5%;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(100deg, var(--blue-deep), var(--blue) 42%, #2E8BD6 70%, var(--blue-deep));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -3px 6px rgba(0,0,0,.22),
    0 4px 10px rgba(7,28,51,.22);
  transform-origin: 12% 100%;
  will-change: transform;
}
/* Knurled grip on the cap */
.bottle-cap span {
  position: absolute;
  inset: 22% 6%;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.22) 0 1.5px,
    transparent 1.5px 5px);
  border-radius: 2px;
}

.bottle-shadow {
  position: absolute;
  left: 4%; right: 4%;
  bottom: -5%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(7,28,51,.26), transparent 72%);
  filter: blur(7px);
}

/* --------------------------------------------------------------------------
   11. Segment cards — the dark portfolio band
   -------------------------------------------------------------------------- */
.navy-band {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
/* A faint grid, like a shelf — reads as pharmacy racking, not decoration */
.navy-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 35%, transparent 100%);
}

.seg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1rem;
  position: relative;
  z-index: 2;
}

.seg-card {
  --c: var(--blue-lift);
  position: relative;
  padding: 1.6rem 1.45rem 1.5rem;
  border-radius: var(--r-card);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line-dark);
  overflow: hidden;
  transition: transform .4s var(--ease), background-color .4s var(--ease),
              border-color .4s var(--ease);
}
.seg-card:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,.08);
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
}
/* The segment's colour as a glow that rises on hover — the colour is the
   information, matched to the brochure's own coding */
.seg-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--c);
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.seg-card:hover::before { transform: scaleX(1); }
.seg-card::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -40%;
  width: 150%; height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, color-mix(in srgb, var(--c) 40%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.seg-card:hover::after { opacity: .5; }

.seg-count {
  font-stretch: 118%;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: .9;
  color: var(--c);
  font-feature-settings: 'tnum' 1;
}
.seg-name {
  margin-top: .85rem;
  font-stretch: 104%;
  font-weight: 650;
  font-size: 1.08rem;
  color: #fff;
}
.seg-desc {
  margin-top: .3rem;
  font-size: .89rem;
  color: var(--on-dark-soft);
}

/* --------------------------------------------------------------------------
   12. Product catalogue
   -------------------------------------------------------------------------- */
.cat-controls { display: grid; gap: 1.1rem; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.chip {
  --c: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.05rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  background: #fff;
  font-size: .9rem;
  font-stretch: 100%;
  font-weight: 550;
  color: var(--text-soft);
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease),
              background-color .25s var(--ease), transform .25s var(--ease);
}
.chip:hover { transform: translateY(-2px); border-color: var(--c); color: var(--c); }
.chip .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c);
  flex: none;
}
.chip[aria-pressed='true'] {
  background: var(--c);
  border-color: var(--c);
  color: #fff;
}
.chip[aria-pressed='true'] .dot { background: #fff; }

.search-wrap { position: relative; max-width: 26rem; }
.search-wrap input {
  width: 100%;
  padding: .66rem 1rem .66rem 2.5rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: #fff;
  font: inherit;
  font-size: .92rem;
  color: var(--text);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.search-wrap input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0,102,180,.12);
}
.search-wrap svg {
  position: absolute;
  left: .9rem; top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

/* Each product card is a single blister lozenge — the geometry carries
   straight through from the hero object and from the client's brochure */
.prod {
  --c: var(--blue);
  position: relative;
  padding: 1.3rem 1.35rem 1.25rem 1.6rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--lift-1);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
}
.prod:hover {
  transform: translateY(-4px);
  box-shadow: var(--lift-2);
  border-color: color-mix(in srgb, var(--c) 40%, var(--line));
}
/* Segment colour as a spine down the left edge */
.prod::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--c);
}

.prod-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.prod-name {
  font-stretch: 110%;
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1.1;
  letter-spacing: -.016em;
  color: var(--text);
}
.prod-var {
  color: var(--c);
  font-stretch: 104%;
  font-weight: 600;
  font-feature-settings: 'tnum' 1;
}
.prod-form {
  flex: none;
  font-size: .68rem;
  padding: .22rem .58rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c) 10%, #fff);
  color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  font-stretch: 100%;
  font-weight: 600;
  white-space: nowrap;
}

.prod-comp {
  margin: .7rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .865rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.prod-comp li + li {
  margin-top: .35rem;
  padding-top: .35rem;
  border-top: 1px dashed var(--line);
}

.prod-launch {
  position: absolute;
  top: .85rem; right: .85rem;
  font-size: .62rem;
  padding: .2rem .5rem;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-stretch: 100%;
  font-weight: 650;
  letter-spacing: .02em;
}

.cat-empty {
  grid-column: 1 / -1;
  padding: 3.5rem 1rem;
  text-align: center;
  color: var(--text-faint);
  border: 1px dashed var(--line);
  border-radius: var(--r-card);
}
.cat-count {
  font-size: .88rem;
  color: var(--text-faint);
  margin-top: 1rem;
  font-feature-settings: 'tnum' 1;
}

/* --------------------------------------------------------------------------
   13. New launch spotlight
   -------------------------------------------------------------------------- */
.launch-band {
  background: linear-gradient(135deg, var(--blue-deep), var(--blue) 45%, #1E7FC4);
  color: #fff;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
}
.launch-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 18%, rgba(255,255,255,.2), transparent 45%),
    radial-gradient(circle at 12% 88%, rgba(237,28,36,.3), transparent 48%);
}
.launch-inner { position: relative; z-index: 2; padding: clamp(2.2rem, 5vw, 3.4rem); }

.launch-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .9rem;
  margin-top: 2rem;
}
.launch-item {
  padding: 1.15rem 1.25rem;
  border-radius: var(--r-card);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .35s var(--ease), background-color .35s var(--ease);
}
.launch-item:hover { transform: translateY(-4px); background: rgba(255,255,255,.18); }
.launch-name {
  font-stretch: 110%;
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: -.014em;
}
.launch-comp { font-size: .855rem; color: rgba(255,255,255,.84); margin-top: .35rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   14. Values — a genuine numbered sequence, so numbering is honest here
   -------------------------------------------------------------------------- */
.value-list { display: grid; gap: 1px; background: var(--line); border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); }

.value {
  display: grid;
  grid-template-columns: 4.5rem minmax(0,1fr);
  gap: clamp(1rem, 3vw, 2.2rem);
  padding: clamp(1.5rem, 3.2vw, 2.2rem);
  background: #fff;
  position: relative;
  transition: background-color .35s var(--ease);
}
.value:hover { background: var(--sky); }

.value-n {
  font-stretch: 118%;
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: .85;
  color: var(--mist);
  font-feature-settings: 'tnum' 1;
  transition: color .35s var(--ease);
}
.value:hover .value-n { color: var(--blue); }

.value-body > * + * { margin-top: .7rem; }
.value-body p,
.value-body ul { max-width: 74ch; }
.value-body ul { margin: .7rem 0 0; padding-left: 1.1rem; color: var(--text-soft); }
.value-body li + li { margin-top: .45rem; }

/* --------------------------------------------------------------------------
   15. Vision / mission plates
   -------------------------------------------------------------------------- */
.plate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.1rem;
}
.plate {
  position: relative;
  padding: clamp(1.7rem, 3.6vw, 2.4rem);
  border-radius: var(--r-card);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--lift-1);
  overflow: hidden;
}
/* The arc, taken from the sweep of the "d" in the logo. Kept in the corner
   and low-contrast so it never competes with the sentence it sits behind. */
.plate::after {
  content: '';
  position: absolute;
  right: -62px; bottom: -62px;
  width: 150px; height: 150px;
  border-radius: 50%;
  border: 18px solid var(--sky);
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-30deg);
  opacity: .75;
  pointer-events: none;
}
.plate.is-red::after { border-top-color: #FBE3E4; border-left-color: #FBE3E4; }
.plate-q {
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  line-height: 1.5;
  color: var(--text);
  margin: 1rem 0 0;
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   16. Quality / certification strip
   -------------------------------------------------------------------------- */
.cert-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.cert {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 1.25rem 1.3rem;
  border-radius: var(--r-card);
  background: #fff;
  border: 1px solid var(--line);
}
.cert-ico {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--sky);
  color: var(--blue);
}

/* --------------------------------------------------------------------------
   17. Contact form
   -------------------------------------------------------------------------- */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: var(--lift-2);
}

.field { display: block; margin-bottom: 1.1rem; }
.field > span {
  display: block;
  font-size: .86rem;
  font-stretch: 100%;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .42rem;
}
.field .req { color: var(--red); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .82rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font: inherit;
  font-size: .95rem;
  color: var(--text);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0,102,180,.12);
}
.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'],
.field select[aria-invalid='true'] {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(237,28,36,.1);
}

.field-err {
  display: none;
  font-size: .8rem;
  color: var(--red-deep);
  margin-top: .35rem;
}
.field-err.is-on { display: block; }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 1.1rem;
}

/* Honeypot — kept out of sight and out of the tab order */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-note {
  display: none;
  padding: .95rem 1.15rem;
  border-radius: 12px;
  font-size: .92rem;
  margin-bottom: 1.2rem;
  border: 1px solid transparent;
}
.form-note.is-on { display: block; }
.form-note.is-ok  { background: #E3F4EC; color: #0A5C3E; border-color: #B6E2CE; }
.form-note.is-bad { background: #FDE9EA; color: #9C1118; border-color: #F6C4C7; }

.btn[aria-busy='true'] { pointer-events: none; opacity: .72; }
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: none;
}
.btn[aria-busy='true'] .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Form beside the contact panel */
.contact-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.touch-panel {
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
}

/* Contact detail list */
.touch { display: grid; gap: .85rem; }
.touch-item {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 1.1rem 1.2rem;
  border-radius: var(--r-card);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-dark);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.touch-item:hover { background: rgba(255,255,255,.09); transform: translateX(4px); }
.touch-ico {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(46,139,214,.2);
  color: var(--blue-lift);
}
.touch-lab { display: block; font-size: .78rem; color: var(--on-dark-soft); }
.touch-val {
  display: block;
  font-stretch: 100%;
  font-weight: 600;
  color: #fff;
  margin-top: .1rem;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   18. Marquee — the brand names running as a ticker
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  position: relative;
  padding-block: 1.1rem;
  border-block: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 2.6rem;
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-item {
  font-stretch: 112%;
  font-weight: 650;
  font-size: 1.12rem;
  color: var(--text-faint);
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.marquee-item:hover { color: var(--blue); }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.site-foot {
  background: var(--navy);
  color: var(--on-dark-soft);
  padding-top: clamp(3rem, 7vw, 4.5rem);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: 2.2rem;
  padding-bottom: 2.8rem;
}
.foot-logo {
  background: #fff;
  border-radius: 12px;
  padding: .7rem .9rem;
  display: inline-block;
}
.foot-logo img { height: 42px; width: auto; }
.foot-h {
  font-stretch: 104%;
  font-weight: 650;
  font-size: .95rem;
  color: #fff;
  margin: 0 0 .9rem;
}
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.foot-links a { font-size: .92rem; transition: color .22s var(--ease), padding-left .22s var(--ease); }
.foot-links a:hover { color: #fff; padding-left: 5px; }

.foot-bar {
  border-top: 1px solid var(--line-dark);
  padding-block: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  font-size: .83rem;
}

.disclaimer {
  font-size: .78rem;
  line-height: 1.6;
  color: #7A93AC;
  border-top: 1px solid var(--line-dark);
  padding-block: 1.3rem;
  max-width: 92ch;
}

/* --------------------------------------------------------------------------
   20. Scroll progress + back to top
   -------------------------------------------------------------------------- */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--blue), var(--red));
  z-index: 70;
  will-change: transform;
}

.to-top {
  position: fixed;
  right: 1.25rem; bottom: 1.25rem;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--blue);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,102,180,.36);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease);
  z-index: 55;
}
.to-top.is-on { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--blue-deep); }

/* --------------------------------------------------------------------------
   21. Reveal — one depth-based entrance, not a fade on everything
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay: var(--rd, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Parallax depth layers, driven by JS */
.par { will-change: transform; }

/* --------------------------------------------------------------------------
   21b. Small semantic text helpers
   These exist so colour never gets hard-coded into the markup — change the
   token once and every page follows.
   -------------------------------------------------------------------------- */
.t-soft  { color: var(--text-soft); }
.t-faint { color: var(--text-faint); }
.t-white { color: #fff; }
.t-sm    { font-size: .88rem; line-height: 1.55; }

.t-link {
  color: var(--blue);
  font-stretch: 100%;
  font-weight: 600;
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
  transition: border-color .22s var(--ease);
}
.t-link:hover { border-bottom-color: var(--blue); }
.on-navy .t-link { color: var(--blue-lift); }

/* --------------------------------------------------------------------------
   22. Responsive
   -------------------------------------------------------------------------- */
/* The fill scene has to live inside one viewport height, so it sheds the
   supporting line and shrinks the bottle rather than overflowing. */
@media (max-width: 760px) {
  .fill-track { height: 280vh; }
  .fill-stage { min-height: 0; }
  .fill-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .fill-copy .lede { display: none; }
  .fill-meter { margin-top: 1.2rem; padding-top: 1rem; }
  .bottle-wrap { width: min(62%, 190px); }
}

/* Landscape phones and short windows */
@media (max-height: 640px) and (min-width: 761px) {
  .fill-stage { min-height: 0; }
  .bottle-wrap { width: min(100%, 230px); }
  .fill-copy .lede { display: none; }
}

@media (max-width: 960px) {
  .contact-split { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .pack-stage { min-height: 320px; }
  .blister { width: min(100%, 360px); }
  .foot-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* On a narrow screen the hero column is tall and text-dense, so drifting
   pills land on the headline wherever they are placed. The depth cue stays
   in the background orbs and the blister pack instead. */
@media (max-width: 760px) {
  .float-field { display: none; }
  .hero { padding-top: clamp(6.5rem, 22vw, 9rem); }
}

@media (max-width: 860px) {
  .burger { display: block; }
  .nav {
    position: fixed;
    inset: 0 0 auto 0;
    top: 0;
    padding: 5.5rem 1.5rem 2rem;
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    background: #fff;
    box-shadow: 0 20px 50px rgba(7,28,51,.16);
    border-bottom: 1px solid var(--line);
    transform: translateY(-102%);
    transition: transform .45s var(--ease-out);
    z-index: -1;
  }
  .nav.is-open { transform: none; }
  .nav a { padding: .9rem 1rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 1rem; }
}

@media (max-width: 680px) {
  .rail { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .value { grid-template-columns: 1fr; gap: .6rem; }
  .value-n { font-size: 2rem; }
  .pockets { gap: 9px; }
  .cat-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .site-head { padding-block: .6rem; }
}

@media (max-width: 420px) {
  .blister { padding: 18px 16px 22px; }
  .pockets { grid-template-columns: repeat(4, 1fr); }
  .pockets .pocket:nth-child(n+13) { display: none; }
}

/* --------------------------------------------------------------------------
   23. Reduced motion — everything still works, nothing moves on its own
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .floater { animation: none; }
  .marquee-track { animation: none; }
  .pulse-under::after { transform: scaleX(1); }
  .par { transform: none !important; }

  /* The fill scene drops its scrub and simply shows the full bottle, so the
     page keeps the content without three viewports of dead scroll. */
  .fill-scene .fill-track { height: auto; }
  .fill-scene .fill-stage {
    position: static;
    height: auto;
    min-height: 0;
    padding-block: var(--sec-y);
  }
}

/* Same treatment, applied by main.js when it detects reduced motion. */
.fill-scene.is-static .fill-track { height: auto; }
.fill-scene.is-static .fill-stage {
  position: static;
  height: auto;
  min-height: 0;
  padding-block: var(--sec-y);
}

/* --------------------------------------------------------------------------
   24. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-head, .to-top, .progress, .float-field, .bg-field, .marquee { display: none !important; }
  body { background: #fff; }
  .prod, .plate, .value { break-inside: avoid; box-shadow: none; }
}