/*
Theme Name: DisclosedRx
Theme URI: https://disclosedrx.com
Author: DisclosedRx
Description: Custom theme for DisclosedRx — PHP page templates built from the Figma design, with all content editable via ACF fields in wp-admin.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: disclosedrx
*/

/*
 * Global styles only — tokens, base elements, layout containers, shared
 * components (buttons, tags) and the site header/footer.
 *
 * Everything that belongs to a single page template lives in
 * assets/css/<template-basename>.css and is enqueued only on that template.
 * See drx_enqueue_assets() in functions.php.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  --c-orange: #f1592b;
  --c-blue: #008cc1;
  --c-sky: #73cce8;
  --c-navy: #142a38;
  --c-charcoal: #393939;
  --c-grey: #7b7b7b;
  --c-ice: #e9faff;
  --c-cream: #fff7ee;
  --c-white: #ffffff;

  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "Lora", Georgia, serif;

  /* The scale unit every measurement in this theme is built from.
   *
   * The design canvas is 1920, so a size of N canvas px is written as its share
   * of the canvas — N / 19.2 of this unit — and the page renders as one
   * proportional miniature of the comp at any width. `min()` freezes the unit
   * at 1440 / 100, which is what makes the comp top out at 75% of its canvas
   * size instead of 100%: the whole design reaches full size on a 1440 viewport
   * and simply centres itself on anything wider. That is the browser-zoomed-to-
   * 75% rendering, which is the size this design is meant to be read at.
   *
   * Below 1440 the unit is plain 1vw, so everything from 1439 down — phones and
   * tablets included — is untouched by the cap.
   */
  --vw: min(1vw, 14.4px); /* 1440 / 100 */

  /* The same unit, for every fixed canvas measurement — the caps that inset a
     section's content inside its container, corner radii, icon boxes. Those are
     written min(canvasPx, share) so the canvas number stays readable in the
     source, and below 1440 this unit is deliberately far too large for the
     share to ever win: the raw canvas px stays in charge and the whole
     sub-1440 range renders exactly as it did before. It becomes the real unit
     in the 1440 block below, which is where the design reaches full size and
     the page has to be a faithful miniature. */
  --vw-inset: 100px;

  /* Fluid type scale. Each ramp is designPx / 19.2 of the unit above, and each
   * carries a readability floor. Because the floors are flat they take over at
   * a different width per token — hero below 960, body below 1230, the 20px UI
   * size at 1440 and under. Below those the size stops shrinking and the layout
   * absorbs the difference; that range is the hand-tuned phone and tablet one,
   * which has no comp to be faithful to.
   *
   * The clamp maxima are the raw canvas sizes and no longer bind — the unit
   * caps first. They stay as documentation of what the comp says.
   *
   * Comments read: the 1920 design size.
   */
  --fs-hero: clamp(2.125rem, calc(3.5417 * var(--vw)), 4.25rem); /* 68, ~15% down from 80 per the launch sweep */
  --fs-h2: clamp(2rem, calc(3.125 * var(--vw)), 3.75rem); /* 60 */
  --fs-h3: clamp(1.75rem, calc(2.6042 * var(--vw)), 3.125rem); /* 50 */
  --fs-h4: clamp(1.5rem, calc(2.0833 * var(--vw)), 2.5rem); /* 40 */
  --fs-h5: clamp(1.25rem, calc(1.8229 * var(--vw)), 2.1875rem); /* 35 */
  --fs-h6: clamp(1.125rem, calc(1.5625 * var(--vw)), 1.875rem); /* 30 */
  --fs-body: clamp(1rem, calc(1.3021 * var(--vw)), 1.5625rem); /* 25 */
  --fs-ui: clamp(0.9375rem, calc(1.0417 * var(--vw)), 1.25rem); /* 20 */

  /* Content widths: the 1920 canvas measurement at the 75% the scale unit tops
     out at, so they are flat rather than fluid. Each one is reached the moment
     the viewport can hold it — 1299 for the narrow container, 1437 for the wide
     one — and below that the viewport caps it and the gutter becomes the whole
     side margin, which is the hand-tuned full-bleed behaviour. Flat is what
     makes the two ranges meet without a step. */
  --container: 1143px; /* 1524 of 1920, at 75% — home sections */
  --container-wide: 1264.5px; /* 1686 of 1920, at 75% — header, hero, inner pages */

  /* Side margins. 24px floor is the common phone standard (Material 3 medium,
     Vercel/Linear); the 6vw ramp keeps margins proportional on laptops, where
     the viewport is narrower than the container and the gutter is the whole
     margin. */
  --gutter: clamp(1.5rem, calc(6 * var(--vw)), 6rem);

  /* Motion. The two speeds the theme already moved at, named: --motion-quick
     for a colour or a filter changing under the cursor, --motion for anything
     that travels. Reveals run longer and on an eased-out curve, so a section
     settles into place instead of arriving. Distances are on the --vw scale
     like every other size here, so the movement scales with the design rather
     than staying a fixed number of pixels on a 4K screen. */
  --motion-quick: 0.2s;
  --motion: 0.35s;
  --motion-slide: 0.4s;
  --motion-reveal: 0.7s;
  --motion-stagger: 90ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-shift: clamp(0.75rem, calc(1.4 * var(--vw)), 1.75rem);
  /* The stagger is not a transition-delay. A component that declares its own
     `transition` resets transition-delay to 0s, and nesting the delay inside
     this token does not work either — a custom property that references
     another resolves it where it is declared, so --reveal-index would always
     read as its :root fallback rather than the element's own number. main.js
     staggers by holding the class back instead, which also keeps the delay off
     the hover transitions these same components share. */
  --reveal-transition:
    opacity var(--motion-reveal) var(--ease-out),
    translate var(--motion-reveal) var(--ease-out),
    scale var(--motion-reveal) var(--ease-out);
  --lift: clamp(2px, calc(0.3 * var(--vw)), 6px);
}

/* The fixed canvas measurements switch on at the width the desktop grids do,
   not at 1440. Gating them at 1440 put a cliff right at the edge of the range
   people actually browse: a section inset went from its canvas share to the
   full container the moment the viewport lost a pixel, so everything below
   1440 rendered up to 26% wider than the 1440 layout it should have matched.
   From 992 up the ratio is now identical at every width.

   Below 992 every template is a single-column stack that should fill its
   container, and these caps never bound there before, so the unit stays
   oversized and the phone and tablet range is untouched. */
@media (min-width: 992px) {
  :root {
    --vw-inset: var(--vw);
  }
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--c-charcoal);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

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

/* Wider gutters-to-gutters measure used by the inner page templates
   (115px side margins on the 1920 canvas). */
.container--wide {
  max-width: calc(var(--container-wide) + 2 * var(--gutter));
}

/* Inner-content measures. Inside the wide container the comps set section
   content at one of three widths, and every template draws from the same
   three — so they are tokens rather than a number re-transcribed per section,
   which is what let the same measure drift between 1352 and 1370 across pages.
   Each is its 1920 canvas px held against the share of the scale unit, so the
   canvas number stays readable in the source and the cap takes over at 992. */
:root {
  --measure-narrow: min(1368px, calc(71.25 * var(--vw-inset)));
  --measure-mid: min(1496px, calc(77.9167 * var(--vw-inset)));
  --measure-wide: min(1584px, calc(82.5 * var(--vw-inset)));
}

/* Hero illustration. Every inner page opens with a spot illustration beside the
   headline, and the comp is stricter about them than it first looks: each is
   drawn at its own canvas width, but ten of the eleven hang from the same right
   edge, canvas x=1644. The page sheets had been sizing them four different ways
   — a percentage of the art column, a percentage margin to place it, a raw cap
   on the image, or nothing at all and let it fill the column — so four rendered
   between 15% and 44% off their comp width and hung from three different edges.
   A page sheet now gives only the two numbers the comp states, and the sizing
   itself lives here, which is what keeps the set proportionate to each other.

   --hero-art-w     the illustration's own canvas width
   --hero-art-inset canvas px from this hero's right edge back to 1644; it
                    varies only because the heroes sit in containers of two
                    different widths

   The placement is desktop-only: below the two-column breakpoint each page
   sheet already centres the art in a single-column stack.

   Matched with [class*=…], not [class$=…]: every one of these divs also
   carries data-reveal, and the scroll-reveal script appends "is-revealed"
   to the class attribute the moment it scrolls into view — which, for a
   hero, is essentially on load. An end-anchored match stops matching the
   instant that second class lands, so the div silently reverts to an
   unconstrained block (full column width) and the img to its raw HTML
   width/height — which is exactly the "too big and crowding the copy"
   bug this whole block exists to prevent, and it was hitting every hero
   on the site, not only the ones a page sheet re-tuned. */
[class*="-hero__art"] {
  --hero-art-inset: 108;
  width: 100%;
  max-width: min(
    calc(var(--hero-art-w) * 1px),
    calc(var(--hero-art-w) / 19.2 * var(--vw-inset))
  );
}
[class*="-hero__art"] img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 992px) {
  /* Anchored to the art column's right edge and then shifted back off it. The
     shift is relative rather than a margin because on three of these pages the
     comp's illustration plus its inset is a little wider than the column the
     page draws for it — in the comp the art simply overhangs into the gutter
     between the two columns, and a margin cannot express that without
     reflowing the column. Every illustration is narrower than its own column,
     so nothing reaches the copy beside it. */
  [class*="-hero__art"] {
    justify-self: end;
    position: relative;
    inset-inline-end: min(
      calc(var(--hero-art-inset) * 1px),
      calc(var(--hero-art-inset) / 19.2 * var(--vw-inset))
    );
  }
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* Scroll reveal — a section fades and rises the first time it is scrolled to.
   The starting state is gated on the .drx-reveal class, which the snippet in
   the head only sets when the browser can actually finish the job: no
   IntersectionObserver, no JavaScript at all, or a reduced-motion preference
   and the class never lands, so every element renders plainly and nothing can
   be left stranded invisible. Only opacity and movement change, so a reveal
   costs no layout.

   Two things keep this system from fighting the components it is applied to:

   1. It moves with `translate` and `scale`, the independent properties, never
      `transform`. A card can therefore reveal and lift on hover at the same
      time — the two compose instead of overwriting each other. Written as
      `transform`, the revealed state's `transform: none` simply cancelled the
      hover lift.
   2. Every selector sits in :where(), so the system carries no specificity and
      a component's own rules always win.

   The cost of (2) is that a component declaring its own `transition` replaces
   this one outright and would reveal with a snap. Any component that does so
   opens its transition list with var(--reveal-transition) to put these
   properties back. */
:where(.drx-reveal [data-reveal]) {
  opacity: 0;
  translate: 0 var(--reveal-shift);
  transition: var(--reveal-transition);
}
/* Sideways and scale variants, for artwork that sits beside its copy. */
:where(.drx-reveal [data-reveal="left"]) {
  translate: calc(var(--reveal-shift) * -1.6) 0;
}
:where(.drx-reveal [data-reveal="right"]) {
  translate: calc(var(--reveal-shift) * 1.6) 0;
}
:where(.drx-reveal [data-reveal="zoom"]) {
  translate: none;
  scale: 0.965;
}
:where(.drx-reveal [data-reveal="fade"]) {
  translate: none;
}
:where(.drx-reveal [data-reveal].is-revealed) {
  opacity: 1;
  translate: none;
  scale: none;
}

/* Every button takes a press. The filter hover is already on .btn; this is the
   1px push that says the click landed — dropped, like every other movement,
   for a visitor who has asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .btn:active {
    transform: translateY(1px);
  }
}

/* Stat count-up — the number main.js runs from 0 on scroll. Tabular figures
   hold every digit to the same width, so a number does not shiver as it
   counts. The wrapper inherits its type from the stat it sits in, so this is
   the whole of the styling it needs. */
.stat-count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Buttons — the comp draws exactly two pill heights on the 1920 canvas: 59px
   for the standard button (header actions, inline CTAs) and 73px for the large
   one. Both are the 20px UI size at 1.3 line-height, so 26px of text, and the
   block padding is the whole of the rest of the height. Every variant carries
   the same 1px border — transparent on the filled ones — so an outline button
   is not 2px taller than the filled button standing next to it. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: min(50px, calc(2.6042 * var(--vw-inset)));
  padding: 0.775em 2.2em; /* 59 tall */
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    filter var(--motion-quick) ease,
    background-color var(--motion-quick) ease,
    transform var(--motion-quick) ease;
  white-space: nowrap;
}
.btn:hover {
  filter: brightness(1.08);
}
.btn--orange {
  background: var(--c-orange);
  color: var(--c-white);
}
.btn--blue {
  background: var(--c-blue);
  color: var(--c-white);
}
.btn--outline {
  background: var(--c-white);
  color: var(--c-charcoal);
  border-color: #000;
}
.btn--outline:hover {
  background: var(--c-orange);
  color: var(--c-white);
  border-color: var(--c-orange);
  filter: none;
}
.btn--lg {
  font-weight: 600;
  padding-block: 1.125em; /* 73 tall */
}
/* Labels are nowrap so the header row never breaks mid-label, but on a phone a
   long CTA label then runs past the gutter and takes the page into horizontal
   scroll. Below the tablet breakpoint the header is a burger anyway, so let
   long labels wrap and keep every button inside its column. */
@media (max-width: 767px) {
  .btn {
    max-width: 100%;
    white-space: normal;
  }
}

/* Audience switcher — the For Employers / Members / Brokers / Prescribers pill
   rail that opens each audience page. The current page is a raised white chip.
   Shared by more than one template, so it lives here rather than in a page sheet. */
.audience-switcher__list {
  margin: 0;
  padding: clamp(0.375rem, calc(0.52 * var(--vw)), 0.625rem);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: clamp(0.25rem, calc(0.63 * var(--vw)), 0.75rem);
  max-width: 100%;
  background: var(--c-ice);
  border-radius: min(31px, calc(1.6146 * var(--vw-inset)));
}
.audience-switcher__link {
  display: block;
  padding: clamp(0.5rem, calc(0.65 * var(--vw)), 0.78125rem) clamp(0.9rem, calc(1.25 * var(--vw)), 1.5rem);
  border-radius: min(31px, calc(1.6146 * var(--vw-inset)));
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.283;
  color: var(--c-charcoal);
  white-space: nowrap;
}
.audience-switcher__link:not(.is-current):hover {
  color: var(--c-blue);
}
.audience-switcher__link.is-current {
  background: var(--c-white);
  box-shadow: 3px 4px 4.8px rgba(0, 0, 0, 0.25);
}
/* The rail is four pills of unshrinkable text, so its width is near enough
   fixed while the hero copy column keeps narrowing. Capping it at the column
   left the last pill hanging outside the ice — worst on the pages whose copy
   column is the narrower half — so from the two-column hero up the rail keeps
   its natural width and overhangs into the empty space beside the headline.
   Below that the hero is one column, and the rail scrolls if the phone or
   tablet cannot hold it. */
@media (min-width: 992px) {
  .audience-switcher__list {
    max-width: none;
  }
}
@media (max-width: 991px) {
  .audience-switcher__list {
    overflow-x: auto;
    scrollbar-width: none;
    /* Fades the last pill toward transparent instead of a hard crop, so a
       rail that overflows reads as "swipe for more" rather than cut off
       text. Right edge only: the rail always starts scrolled to the left,
       where nothing is hidden that direction, so a matching left fade would
       just dim the fully-visible first pill for no reason. Renders against
       the rail's own box, not the scroll content, so the fade stays pinned
       to the visible edge at any scroll position. */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 14px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 14px), transparent);
  }
  .audience-switcher__list::-webkit-scrollbar {
    display: none;
  }
}
@media (max-width: 575px) {
  .audience-switcher__list {
    display: flex;
  }
}

/* Numbered step — a big Lora numeral, a title, body copy and an optional link
   beside its artwork; --reverse puts the art on the leading side. Shared by the
   For Members and For Brokers templates, so it lives here, not in a page sheet.
   Page sheets own only the row gap between steps. */
.numbered-step {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, calc(3 * var(--vw)), 3.5rem);
  align-items: center;
}
.numbered-step--reverse .numbered-step__copy {
  order: 2;
}
.numbered-step__number {
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(3rem, calc(5.2083 * var(--vw)), 6.25rem); /* 100 */
  line-height: 1.3;
  color: var(--c-orange);
}
.numbered-step__title {
  margin-top: clamp(0.5rem, calc(0.83 * var(--vw)), 1rem);
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-charcoal);
}
.numbered-step__body {
  margin-top: clamp(0.75rem, calc(0.94 * var(--vw)), 1.125rem);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
.numbered-step__body p + p {
  margin-top: clamp(1rem, calc(1.25 * var(--vw)), 1.5rem);
}
.numbered-step__body a {
  font-weight: 700;
  color: var(--c-blue);
}
.numbered-step__link {
  display: inline-block;
  margin-top: clamp(0.75rem, calc(1.15 * var(--vw)), 1.375rem);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.8;
  color: var(--c-orange);
}
.numbered-step__link:hover {
  text-decoration: underline;
}
.numbered-step__art {
  justify-self: center;
}
.numbered-step__art img {
  width: 100%;
  height: auto;
}
@media (max-width: 991px) {
  .numbered-step {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.5rem;
  }
  /* Art always follows the copy once the step is a single column */
  .numbered-step--reverse .numbered-step__copy {
    order: 0;
  }
  .numbered-step__art {
    width: min(100%, 420px);
  }
}

/* FAQ accordion — a list of native <details>, so every answer is reachable with
   JavaScript off, and the browser owns the open state, the keyboard and the
   screen-reader announcement. The rows of one list share a `name`, which is
   what keeps only one answer open at a time; browsers without exclusive
   <details> simply let several stand open. Page sheets set --faq-line and
   --faq-pad to their own comp; everything else is the same wherever an FAQ
   appears. */
.faq-list {
  --faq-line: rgba(57, 57, 57, 0.5);
  --faq-motion: 0.3s;
  --faq-pad: clamp(1.25rem, calc(2.86 * var(--vw)), 3.4375rem);
  --faq-gap: clamp(1rem, calc(1.88 * var(--vw)), 2.25rem);
  --faq-icon: min(22px, calc(1.1458 * var(--vw-inset)));
  margin: 0;
}
.faq {
  border-top: 1px solid var(--faq-line);
}
.faq:last-child {
  border-bottom: 1px solid var(--faq-line);
}
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--faq-gap);
  padding-block: var(--faq-pad);
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-charcoal);
  cursor: pointer;
  list-style: none; /* the default disclosure triangle, Firefox and the rest */
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__q:hover {
  color: var(--c-blue);
}
.faq__q:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 4px;
}
/* Open, the question sits closer to its own answer than to the next question */
.faq[open] > .faq__q {
  padding-bottom: clamp(0.5rem, calc(0.83 * var(--vw)), 1rem);
}
.faq__icon {
  position: relative;
  flex: none;
  width: var(--faq-icon);
  height: var(--faq-icon);
  margin-top: 0.3em;
  color: var(--c-orange);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform var(--faq-motion) ease;
}
/* The upright bar folds flat, turning the plus into a minus */
.faq__icon::after {
  transform: translateY(-50%) rotate(90deg);
}
.faq[open] .faq__icon::after {
  transform: translateY(-50%) rotate(0deg);
}
.faq__a {
  margin: 0;
  padding-bottom: var(--faq-pad);
  padding-right: calc(var(--faq-icon) + var(--faq-gap));
  /* The comps set the answers in a column roughly two thirds of the row; full
     width would run past a comfortable measure on a wide screen */
  max-width: min(100%, 72ch);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-charcoal);
}
.faq__a p {
  margin: 0;
}
.faq__a p + p {
  /* Figma builds the paragraph gap out of extra leading, not a blank line */
  margin-top: 0.8em;
}
.faq__a a {
  color: var(--c-blue);
  text-decoration: underline;
}
.faq__a a:hover {
  filter: brightness(1.2);
}
/* Slide the answer rather than snapping it. Everything here is progressive:
   without ::details-content the row still opens, it just opens instantly. */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .faq-list {
      interpolate-size: allow-keywords;
    }
    /* The open question sits closer to its own answer, and that padding has to
       travel on the same clock as the answer. Left to snap, it adds its whole
       difference back the instant a row closes — the row jumps ~30px taller
       before the collapse has moved at all, which reads as the close stuttering. */
    .faq__q {
      transition: padding-block-end var(--faq-motion) ease;
    }
    .faq::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size var(--faq-motion) ease,
        content-visibility var(--faq-motion) allow-discrete;
    }
    .faq[open]::details-content {
      block-size: auto;
    }
  }
}

/* Ribbon tag ("THE DRX WAY" / "IN WRITING" / "OUR STORY") */
.tag {
  display: inline-block;
  border-radius: min(9px, calc(0.4688 * var(--vw-inset)));
  padding: 0.6em 1.9em;
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-white);
  text-transform: uppercase;
}
.tag--blue {
  background: var(--c-blue);
}
.tag--orange {
  background: var(--c-orange);
}

/* ==========================================================================
   Header
   ========================================================================== */
/* The header row has almost no slack: measured on the comp it is 1682px of
   content inside a 1686px container, and the labels are nowrap over a body that
   hides overflow, so any type size above the comp ramp clips rather than wraps. */
.site-header {
  background: var(--c-white);
  position: relative;
  z-index: 100;
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, calc(2.5 * var(--vw)), 3rem);
  min-height: clamp(72px, calc(6.1458 * var(--vw)), 7.375rem); /* 118 */
  width: 100%;
  max-width: calc(var(--container-wide) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Separates the row from the locator strip above it and from whatever the
     page opens with below — without these the row sits flush on both edges. */
  padding-top: clamp(0.5rem, calc(1.8229 * var(--vw)), 2.1875rem); /* 35 */
  padding-bottom: clamp(0.75rem, calc(1.25 * var(--vw)), 1.5rem); /* 24 */
}

/* "Locate a Pharmacy Near You" — a slim strip in the flow above the header row,
   sharing the inner container's box so it lines up with the buttons below. */
.site-header__locator-bar {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: calc(var(--container-wide) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-top: clamp(0.1875rem, calc(0.2604 * var(--vw)), 0.3125rem); /* 5 */
}
.site-header__locator {
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, calc(0.31 * var(--vw)), 6px);
  font-size: clamp(0.6875rem, calc(0.625 * var(--vw)), 0.75rem); /* 12 */
  font-weight: 600;
  line-height: 1;
  color: var(--c-orange);
  transition: filter 0.2s ease;
}
.site-header__locator:hover {
  filter: brightness(1.15);
}
.site-header__locator-icon {
  flex: 0 0 auto;
  width: clamp(11px, calc(0.78 * var(--vw)), 15px);
  height: auto;
  aspect-ratio: 15 / 24;
  object-fit: contain;
}
.site-header__drawer {
  display: contents;
}
.site-header__logo {
  flex-shrink: 0;
}
.site-header__logo img {
  width: clamp(180px, calc(13.6 * var(--vw)), 262px);
  height: auto;
}
.site-header__nav {
  margin-inline: auto;
}
.site-header__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Only the top level lays out as a row — the child list is the dropdown. */
.site-header__nav > ul {
  display: flex;
  gap: clamp(1rem, calc(2.4 * var(--vw)), 2.9rem);
}
/* A parent whose only job is to open its dropdown renders as a button
   (.menu-item__label) instead of a link — it has to look identical to the
   links beside it, so it is styled with them and stripped of button chrome. */
.site-header__nav a,
.site-header__nav .menu-item__label {
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--c-charcoal);
  transition: color 0.2s ease;
  /* Menu labels are single-line by design; without this a squeezed row breaks
     them over two lines instead of visibly overflowing. */
  white-space: nowrap;
}
.site-header__nav .menu-item__label {
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  line-height: inherit;
  /* Nothing to click through to — the pointer is only here to open the list. */
  cursor: default;
}
.site-header__nav a:hover {
  color: var(--c-blue);
}

/* Submenus
   -------------------------------------------------------------------------
   Closed by default and opened by pointer or keyboard alone — there is no
   caret and no JS behind it. The drawer rules further down print the children
   outright instead, since a collapsed list there would have no opener. */
.site-header__nav .sub-menu {
  display: none;
}
.site-header__nav .menu-item-has-children {
  position: relative;
}
/* Row labels are single-line by design; a squeezed row would otherwise break
   them over two lines rather than visibly overflow. */
.site-header__nav > ul > li {
  white-space: nowrap;
}
.site-header__nav .menu-item-has-children:hover > a,
.site-header__nav .menu-item-has-children:hover > .menu-item__label,
.site-header__nav .menu-item-has-children:focus-within > a,
.site-header__nav .menu-item-has-children:focus-within > .menu-item__label {
  color: var(--c-blue);
}
.site-header__actions {
  display: flex;
  gap: clamp(0.75rem, calc(1.5 * var(--vw)), 1.75rem);
  flex-shrink: 0;
}
.site-header__toggle {
  display: none;
  background: none;
  border: 0;
  padding: min(8px, calc(0.4167 * var(--vw-inset)));
  cursor: pointer;
}
.site-header__toggle span {
  display: block;
  width: min(28px, calc(1.4583 * var(--vw-inset)));
  height: 3px;
  background: var(--c-charcoal);
  margin: min(6px, calc(0.3125 * var(--vw-inset))) 0;
  border-radius: 2px;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--c-charcoal);
  color: var(--c-white);
  padding-block: clamp(3rem, calc(6.1458 * var(--vw)), 7.375rem) /* 118 */
    clamp(2rem, calc(4.2708 * var(--vw)), 5.125rem); /* 82 */
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, calc(4 * var(--vw)), 5rem);
}
.site-footer__logo img {
  width: clamp(260px, calc(21.9 * var(--vw)), 420px);
  height: auto;
}
.site-footer__tagline {
  margin-top: clamp(1.25rem, calc(1.75 * var(--vw)), 2.1rem);
  font-weight: 700;
}
.site-footer__address {
  margin-top: clamp(1.25rem, calc(1.75 * var(--vw)), 2.1rem);
  font-style: normal;
  line-height: 1.5;
}
.site-footer__address a:hover {
  color: var(--c-sky);
}
.site-footer__col-title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin-bottom: clamp(1rem, calc(1.5 * var(--vw)), 1.8rem);
}
.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__col li {
  margin-bottom: 0.9em;
}
.site-footer__col a {
  transition: color 0.2s ease;
}
.site-footer__col a:hover {
  color: var(--c-sky);
}
.site-footer__bottom {
  margin-top: clamp(2.5rem, calc(4.5 * var(--vw)), 5.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  padding-top: clamp(1.25rem, calc(1.7 * var(--vw)), 2rem);
  line-height: 2;
}
.site-footer__bottom a:hover {
  color: var(--c-sky);
}

/* ==========================================================================
   Video modal
   Built by assets/js/main.js on the first open, so nothing renders here until
   a video is asked for. Used by every gallery: a video plays in the overlay
   everywhere except its own page, where it plays inline.
   ========================================================================== */
.has-modal,
.has-modal body {
  overflow: hidden;
}

.drx-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(1rem, calc(4 * var(--vw)), 3rem);
}
.drx-modal[hidden] {
  display: none;
}
.drx-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 42, 56, 0.82);
}
.drx-modal__dialog {
  position: relative;
  width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, calc(1.2 * var(--vw)), 1.25rem);
}
.drx-modal__video,
.drx-modal__embed {
  width: 100%;
  max-height: 78vh;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: min(20px, calc(1.0417 * var(--vw-inset)));
  outline: none;
  overflow: hidden;
}
.drx-modal__video[hidden],
.drx-modal__embed[hidden] {
  display: none;
}
.drx-modal__embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.drx-modal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  color: var(--c-white);
}
.drx-modal__foot[hidden] {
  display: none;
}
.drx-modal__title {
  margin: 0;
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.5;
}
.drx-modal__link {
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--c-sky);
}
.drx-modal__link:hover {
  text-decoration: underline;
}
.drx-modal__link[hidden] {
  display: none;
}
/* Inside the frame's top corner, so it never lands on the page behind it no
   matter how short the viewport is. */
.drx-modal__close {
  position: absolute;
  top: clamp(0.5rem, calc(1 * var(--vw)), 0.875rem);
  right: clamp(0.5rem, calc(1 * var(--vw)), 0.875rem);
  z-index: 1;
  width: min(44px, calc(2.2917 * var(--vw-inset)));
  height: min(44px, calc(2.2917 * var(--vw-inset)));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 42, 56, 0.65);
  color: var(--c-white);
  font-size: min(28px, calc(1.4583 * var(--vw-inset)));
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.drx-modal__close:hover,
.drx-modal__close:focus-visible {
  background: rgba(20, 42, 56, 0.9);
}

/* A gallery tile is a link that opens the overlay, so it wants a pointer. The
   still inside it is decoration — every click belongs to the link. */
[data-video-modal] {
  cursor: pointer;
}
[data-video-modal] video,
[data-video-modal] img {
  pointer-events: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* The burger only owns phone + tablet — from 992px up the row shows in full,
   squeezed by the tier below since the logo + 4 nav labels + both buttons
   don't fit at any sensible spacing below ~1400px. */
@media (max-width: 991px) {
  .site-header__drawer {
    display: none;
  }
  .site-header__toggle {
    display: block;
    margin-left: auto;
  }
  .site-header.is-open .site-header__drawer {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--c-white);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    padding: 1.5rem var(--gutter) 2rem;
  }
  .site-header.is-open .site-header__nav > ul {
    flex-direction: column;
    gap: 1.1rem;
  }
  .site-header.is-open .site-header__nav a,
  .site-header.is-open .site-header__nav .menu-item__label {
    font-size: 1.05rem;
  }
  /* Nothing to hover in the drawer, so the children are simply listed under
     their parent — indented, in the flow, no opener needed. */
  .site-header.is-open .site-header__nav .sub-menu {
    display: block;
    margin: 0.75rem 0 0 1rem;
    border-left: 2px solid var(--c-ice);
  }
  .site-header.is-open .site-header__nav .sub-menu li + li {
    margin-top: 0.75rem;
  }
  .site-header.is-open .site-header__nav .sub-menu a {
    display: block;
    padding-left: 1rem;
    font-size: 0.95rem;
    white-space: normal;
  }
  .site-header.is-open .site-header__actions {
    margin-top: 1.5rem;
    flex-wrap: wrap;
  }
  .site-header__toggle.is-open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .site-header__toggle.is-open span:nth-child(2) {
    opacity: 0;
  }
  .site-header__toggle.is-open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
}

/* Where the nav is visible it only just clears the gutter, so tighten the row's
   own spacing to keep every label on one line. */
@media (min-width: 992px) {
  .site-header__inner {
    gap: clamp(1rem, calc(1.9 * var(--vw)), 3rem);
  }
  .site-header__nav > ul {
    gap: clamp(1rem, calc(1.9 * var(--vw)), 2.9rem);
  }
  .site-header__actions .btn {
    padding-inline: 1.8em;
  }

  /* Dropdown: a card hung off the bottom edge of its parent item. It starts at
     the parent's own bottom (no gap) so the pointer can travel into it without
     crossing dead space and closing the menu on the way. */
  .site-header__nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    min-width: max(100%, 260px);
    padding-block: 0.6rem;
    background: var(--c-white);
    border-radius: min(14px, calc(0.7292 * var(--vw-inset)));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
  }
  .site-header__nav .menu-item-has-children:hover > .sub-menu,
  .site-header__nav .menu-item-has-children:focus-within > .sub-menu {
    display: block;
  }
  .site-header__nav .sub-menu a {
    display: block;
    padding: 0.55rem 1.4rem;
    font-size: clamp(0.875rem, calc(0.94 * var(--vw)), 1.125rem);
    line-height: 1.4;
  }
  .site-header__nav .sub-menu a:hover,
  .site-header__nav .sub-menu a:focus-visible {
    background: var(--c-ice);
  }
  /* Sitemap labels run long ("Founder's Story (incl. Executive Team)"); the row
     above keeps its single line, these are free to wrap. */
  .site-header__nav .sub-menu a {
    white-space: normal;
  }
}

/* The row is visible from 992px but the 4 labels alone run ~540px, so this
   band squeezes every gap to its floor and shrinks the buttons to a compact
   pill — the only way the row holds one line short of 1400px. Below roughly
   1050px the row can still run out of room; that's the one place in the
   theme that isn't a faithful comp miniature, traded for keeping the burger
   off tablet. */
@media (min-width: 992px) and (max-width: 1399px) {
  .site-header__inner {
    gap: 0.5rem;
  }
  .site-header__nav > ul {
    gap: 1rem;
  }
  .site-header__actions {
    gap: 0.5rem;
  }
  .site-header__actions .btn {
    padding: 0.5em 0.9em;
    font-size: 0.8125rem; /* 13 — below the shared --fs-ui floor, buttons only */
  }
}

@media (max-width: 991px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}