/*
|--------------------------------------------------------------------------
| Parry Health Solutions — brand layer
|--------------------------------------------------------------------------
|
| Loaded AFTER css/site.css. site.css owns the structure (grid, cart drawer,
| checkout, product detail, prose pages); this file owns the look.
|
| Two halves:
|   A. Retheme — override site.css's design tokens and the handful of
|      components that hard-code a value instead of reading one.
|   B. New components — the `br-*` classes that only exist on this brand:
|      the centred header, the display hero, the benefits panel, the
|      marquee, the overview band, the shelf cards, the FAQ accordion and
|      the dark footer.
|
| PALETTE (4 supplied brand colours, plus what they imply)
|
|   #3A86FF  blue       primary action, marks, affirmative ticks
|   #BDB2FF  lavender   chips, tags, soft tints
|   #FFD6E0  pink       card and panel fills
|   #FFF4F4  blush      page paper
|
| Two colours are DERIVED rather than supplied, and both earn their place:
|
|   --ink (#12193F) — the palette has no dark. Every one of the four is a
|     light or mid tone, so text needs a value the set does not contain.
|     This is a deep navy pulled from the blue's own hue, so it reads as
|     part of the family rather than as generic near-black.
|
|   --accent-strong (#2F6FE0) — white on #3A86FF measures 3.48:1, which
|     clears WCAG AA for graphics and large text but FAILS it for a normal
|     button label. So #3A86FF stays the brand blue for fills that carry no
|     text (dots, ticks, icon chips) and this fractionally deeper blue sits
|     behind white labels at 4.65:1. The two are within a few percent of
|     each other; nothing about the identity changes.
|
| Display type is Fraunces (a high-contrast old-style serif); body type is
| Plus Jakarta Sans.
|
*/

/* =========================================================================
   A1. TOKENS
   ====================================================================== */

:root {
  /* Ink — derived deep navy, see the palette note at the top of the file. */
  --ink: #12193f;
  --ink-2: #4a5578;
  --ink-3: #57628a;   /* 4.5:1 on the pink card fill, 5.5:1 on paper */
  --ink-4: #aeb6ce;

  --paper: #ffffff;
  --sand: #fff4f4;    /* palette blush — page paper */
  --sand-2: #ffd6e0;  /* palette pink — card and panel fill */
  --sand-3: #f7b9ca;  /* derived — hairlines and rules sitting on pink */

  --accent: #3a86ff;         /* palette blue — fills that carry no text */
  --accent-strong: #2f6fe0;  /* derived — fills that sit under a white label */
  --accent-dark: #2059c4;    /* hover */
  --accent-soft: #bdb2ff;    /* palette lavender — chips, tags, tints */
  --accent-ink: #ffffff;

  /*
  | The affirmative mark. Kept under the old --forest name because site.css
  | reads it in several places; the value is now the brand blue, since a
  | leaf green has nothing to do with this palette.
  */
  --forest: #2f6fe0;
  --forest-soft: #e6edff;

  /* Ratings and anything that wants to read as warm rather than cool. This
     is the palette pink pushed to a strength that clears 4.5:1 on paper
     (6.8:1) and on the pink card fill it sits on (5.2:1). */
  --star: #b01552;

  --line: #f0dde4;
  --line-strong: #12193f;

  --ok: #2f6fe0;
  --warn: #c2255c;

  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radius: 14px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --shell: 1280px;

  --shadow-sm: 0 1px 2px rgba(18, 25, 63, .06);
  --shadow-md: 0 10px 30px -14px rgba(18, 25, 63, .16);
  --shadow-lg: 0 28px 70px -28px rgba(18, 25, 63, .24);

  --header-h: 78px;

  /* Fraunces ships a `wonk` axis; the swash forms read as decoration here. */
  --fraunces-flat: "SOFT" 0, "WONK" 0;
}

body {
  background: var(--sand);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.ws-card-name, .ws-section-head h2 {
  font-family: var(--display);
  font-variation-settings: var(--fraunces-flat);
  font-weight: 500;
  letter-spacing: -.015em;
}

/* =========================================================================
   A2. RETHEMED SITE.CSS COMPONENTS
   ====================================================================== */

/* Buttons become pills; the accent button carries the circular arrow chip. */
.ws-btn {
  border-radius: var(--radius-pill);
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.ws-btn-accent {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-ink);
}

.ws-btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--accent-ink); }

.ws-btn-ghost,
.ws-btn-light {
  border-radius: var(--radius-pill);
  border-color: var(--line-strong);
  color: var(--ink);
  background: transparent;
}

.ws-btn-ghost:hover,
.ws-btn-light:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.ws-tag,
.ws-chip {
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}

.ws-tag.is-digital { background: var(--accent-soft); color: var(--ink); }

.ws-eyebrow {
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* The black "brand" stamp site.css prints over every photo fights the calm
   palette — the wordmark already sits above the fold on every page. */
.ws-product-brand { display: none !important; }

/* Retail cards: rounded warm panels, no hard rules. */
.ws-card {
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--sand-2);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.ws-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ws-card-media { background: var(--paper); border: 0; }
.ws-card-body { padding: 1.1rem 1.35rem 1.5rem; }

.ws-card-sku {
  background: rgba(255, 255, 255, .82);
  color: var(--ink-3);
  border-radius: var(--radius-pill);
  font-family: var(--body);
}

.ws-card-name { font-size: 1.28rem; font-weight: 500; }
.ws-card-name a { color: var(--ink); }
.ws-card-foot { border-top: 1px solid var(--line); padding-top: .85rem; }
.ws-price { font-family: var(--display); font-variation-settings: var(--fraunces-flat); font-weight: 500; font-size: 1.25rem; }
.ws-price-was { color: var(--ink-2); }

.ws-quick-add,
.ws-btn-sm {
  border-radius: var(--radius-pill);
}

/* Card add-to-cart carries no colour modifier in the markup, so it would
   otherwise fall back to site.css's near-black base button. */
.ws-card-foot .ws-btn-sm {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-ink);
}

.ws-card-foot .ws-btn-sm:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.ws-quick-add { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-ink); }
.ws-quick-add:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.ws-stars span { color: var(--star); }

/* Section furniture, shop shelves, product detail, prose pages. */
.ws-section-head h2 { font-size: clamp(2.1rem, 3.6vw, 3.4rem); font-weight: 500; }
.ws-section-link { color: var(--ink); font-weight: 600; }
.ws-page-head h1 { font-family: var(--display); font-variation-settings: var(--fraunces-flat); font-weight: 500; }
.ws-filter { border-radius: var(--radius-pill); border-color: var(--line); }
.ws-filter.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.ws-group-head h2 { font-family: var(--display); font-variation-settings: var(--fraunces-flat); font-weight: 500; }

.ws-pdp-media,
.ws-panel,
.ws-callout,
.ws-buybox,
.ws-related {
  border-radius: var(--radius-lg);
}

.ws-buybox-price { font-family: var(--display); font-variation-settings: var(--fraunces-flat); font-weight: 500; }

/* site.css sets the compare-at price to --ink-4, which was a mid grey on its
   warm sand and is 2:1 on this paper. The strikethrough is real information,
   not decoration, so it gets a legible tone. */
.ws-buybox-price s { color: var(--ink-2); }
.ws-qty { border-radius: var(--radius-pill); }
.ws-checklist li::before { color: var(--forest); }

.ws-cart, .ws-cart-foot .ws-btn { border-radius: 0; }
.ws-cart-foot .ws-btn { border-radius: var(--radius-pill); }

/* =========================================================================
   A3. HEADER
   ====================================================================== */

.br-header {
  background: var(--sand);
  border-bottom: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.br-header.is-stuck {
  background: rgba(255, 244, 244, .92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom-color: var(--line);
}

/* Three columns so the wordmark is optically centred regardless of how wide
   the nav or the action cluster grows. */
.br-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  height: var(--header-h);
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter, 1.5rem);
}

.br-nav {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 1.9rem;
  position: static;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  transform: none;
  height: auto;
  width: auto;
}

.br-nav .ws-nav-link {
  font-family: var(--body);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  padding: 0;
  border: 0;
}

.br-nav .ws-nav-link:hover,
.br-nav .ws-nav-link[aria-current="page"] { color: var(--accent-dark); }

/*
| The wordmark is a two-part lockup, not one long line: "Parry" carries the
| display serif and "Health Solutions" sits under it as a tracked-out rule of
| small caps. Set as a single string the name is far too wide for a centred
| header slot at any size that still reads as a logo.
*/
.br-wordmark {
  grid-column: 2;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.br-wordmark-name {
  font-family: var(--display);
  font-variation-settings: var(--fraunces-flat);
  font-weight: 600;
  font-size: clamp(1.45rem, 2.3vw, 1.85rem);
  letter-spacing: -.02em;
}

.br-wordmark-sub {
  font-family: var(--body);
  font-weight: 600;
  font-size: clamp(.52rem, .78vw, .63rem);
  letter-spacing: .28em;
  text-indent: .28em;   /* the tracking adds a trailing gap; recentre it */
  text-transform: uppercase;
  color: var(--ink-2);
}

.br-header-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .7rem;
}

.br-icon-btn {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  color: var(--ink);
  font-size: 1.05rem;
  text-decoration: none;
  transition: background .18s ease;
}

.br-icon-btn:hover { background: var(--sand-2); }

.br-cart-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .35rem .35rem .35rem 1.15rem;
  border-radius: var(--radius-pill);
  background: var(--accent-strong);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: background .18s ease;
}

.br-cart-pill:hover { background: var(--accent-dark); }

.br-cart-pill-icon {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: #fff;
  font-size: .9rem;
}

.br-cart-pill .cart-badge {
  position: absolute;
  top: -.25rem;
  right: -.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .3rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
}

.br-menu-btn { display: none; border-radius: 50%; border-color: var(--line); }

/* =========================================================================
   B1. HERO
   ====================================================================== */

/*
| The hero is a single composition: a display line, a cut-out bottle that
| interrupts it, and two side columns hung off the same optical centre.
| Everything animates in once, then the bottle keeps a small amount of
| pointer and scroll parallax so the scene has depth rather than motion.
*/

.br-hero {
  position: relative;
  padding: 2.25rem 0 1.5rem;
  overflow: hidden;
  /*
  | One source of truth: the product column, the arch behind it and the gap
  | the display line is split around are all sized off this.
  |
  | It is a WIDTH, so it has to be retuned whenever the hero cut-out changes
  | shape. Three so far: the supplement bottle at 1.91:1, the stock steel
  | bottle at 2.54:1, the Parry HydraTrack at 2.76:1. The taller the cut-out,
  | the smaller this has to be, or the product runs down through the stat row
  | underneath it.
  */
  --bottle-w: clamp(130px, 14vw, 202px);
}

/* Ambient wash — lavender over the shoulders of the display line so the
   page does not read as flat blush from edge to edge. */
.br-hero::before {
  content: "";
  position: absolute;
  inset: -14% -12% auto -12%;
  height: 78%;
  pointer-events: none;
  background:
    radial-gradient(58% 52% at 50% 16%, rgba(189, 178, 255, .26), rgba(189, 178, 255, 0) 72%),
    radial-gradient(38% 34% at 84% 4%, rgba(58, 134, 255, .10), rgba(58, 134, 255, 0) 70%),
    radial-gradient(38% 34% at 14% 10%, rgba(255, 214, 224, .55), rgba(255, 214, 224, 0) 70%);
}

.br-hero-shell {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter, 1.5rem);
}

/* Rating pill — the first thing above the fold that is not a claim. */
.br-hero-eyebrow {
  position: relative;
  z-index: 3;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 1.15rem;
  padding: .45rem 1.05rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  backdrop-filter: saturate(150%) blur(8px);
  box-shadow: var(--shadow-sm);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-2);
}

.br-hero-stars {
  display: inline-flex;
  gap: .1rem;
  color: var(--star);
  font-size: .7rem;
}

/* The display line sits behind the bottle, so the product interrupts the
   word rather than sitting beside it — the whole point of the layout. */
/*
| One line, split around a reserved gap. The bottle used to be centred over
| the middle of the string, which put the cap straight through the B of
| Balance — the product interrupted the word so completely that the line
| stopped being readable. The gap is a grid track the same width as the
| bottle column, so the two halves are pushed apart by exactly the amount
| the product occupies and every letter survives.
*/
.br-hero-display {
  position: relative;
  z-index: 1;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  font-family: var(--display);
  font-variation-settings: var(--fraunces-flat);
  font-weight: 400;
  font-size: clamp(2.1rem, 10.4vw, 9.6rem);
  line-height: .9;
  letter-spacing: -.045em;
  color: var(--ink);
  /* The reference sets this as a single full-bleed line. Wrapping it turns
     the hero into two stacked half-lines and the bottle lands in the gap. */
  white-space: nowrap;
}

.br-hero-line { display: inline-block; }

.br-hero-line-lead { justify-self: end; }

.br-hero-line-tail { justify-self: start; }

/* A shade narrower than the bottle, so the product still crosses the two
   inner letters rather than sitting in a clean slot between them. */
.br-hero-gap {
  width: calc(var(--bottle-w) * .78);
  height: 1px;
}

.br-word { display: inline-block; will-change: transform, opacity; }

.br-hero-stage {
  position: relative;
  margin-top: clamp(-4rem, -5.5vw, -2rem);
}

/*
| A drawn arch instead of the one baked into the product photograph. The
| photo ships on a studio backdrop, so compositing it raw left a hard pale
| rectangle across the middle of the word. The bottle is now a cut-out and
| the arch is CSS, which means the type runs behind the product for real.
*/
.br-hero-arch {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: clamp(-5.5rem, -6.5vw, -2.5rem);
  width: calc(var(--bottle-w) * 1.62);
  height: calc(var(--bottle-w) * 3.15);
  transform: translate3d(-50%, var(--arch-y, 0px), 0);
  border-radius: 999px 999px 20px 20px;
  background: linear-gradient(180deg, rgba(196, 223, 216, .95) 0%, rgba(219, 236, 232, .78) 42%, rgba(255, 244, 244, 0) 82%);
  pointer-events: none;
}

.br-hero-bottle {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: clamp(-4.25rem, -5vw, -2rem);
  width: var(--bottle-w);
  margin: 0;
  transform: translate3d(-50%, var(--bottle-y, 0px), 0);
  pointer-events: none;
}

.br-hero-bottle img {
  display: block;
  width: 100%;
  height: auto;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  filter: drop-shadow(0 26px 34px rgba(18, 25, 63, .20));
  will-change: transform;
}

/* Contact shadow — without it the cut-out floats off the page. */
.br-hero-bottle::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 74%;
  height: 6%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(18, 25, 63, .30), rgba(18, 25, 63, 0) 72%);
  filter: blur(5px);
}

.br-hero-cols {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--bottle-w) + 4vw) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  padding-top: clamp(3rem, 6.5vw, 5.5rem);
}

.br-hero-side { grid-column: 1; max-width: 21rem; }

.br-hero-pitch { grid-column: 3; max-width: 24rem; justify-self: end; }

/* Both columns open on the same rule so they read as a matched pair. */
.br-hero-label {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.br-hero-label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.br-hero-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
}

.br-chip {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1.15rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--ink);
  font-size: .95rem;
  font-weight: 600;
  cursor: default;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}

.br-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -16px rgba(18, 25, 63, .75);
}

.br-chip i {
  color: var(--accent-dark);
  font-size: .95rem;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.br-chip:hover i { transform: rotate(-12deg) scale(1.14); }

.br-hero-side-note {
  margin: 1.35rem 0 0;
  max-width: 20rem;
  color: var(--ink-3);
  font-size: .86rem;
  line-height: 1.65;
}

.br-hero-pitch h2 {
  margin: 0 0 .8rem;
  font-family: var(--body);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  letter-spacing: -.01em;
}

.br-hero-lede {
  margin: 0 0 1.5rem;
  color: var(--ink-2);
  font-size: .98rem;
  line-height: 1.7;
}

.br-hero-note {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: .95rem 0 0;
  font-size: .82rem;
  color: var(--ink-3);
}

.br-hero-note i { color: var(--ok); }

/* Three counters on one rule, evenly weighted, instead of two medallions
   pushed out to the far edges of the shell. */
.br-hero-stats {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.75rem);
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 0;
  padding-top: 1.6rem;
}

/* Drawn rather than a border so it can wipe in with the rest of the scene. */
.br-hero-stats::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--line);
  transform-origin: 0 50%;
}

.br-stat {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.br-stat-num {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: var(--fraunces-flat);
  font-weight: 600;
  font-size: clamp(2.1rem, 3.9vw, 3.1rem);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.br-stat-copy {
  margin: 0;
  max-width: 22rem;
  color: var(--ink-2);
  font-size: .92rem;
  line-height: 1.65;
}

.br-stat-copy b { color: var(--ink); }

/* -------------------------------------------------------------------------
   B1a. Hero entrance
   ----------------------------------------------------------------------
   js-anim is set by script, so a no-JS page paints the finished state and
   nothing is ever stuck at opacity 0.
   --------------------------------------------------------------------- */

.br-hero.js-anim .br-hero-eyebrow,
.br-hero.js-anim .br-word,
.br-hero.js-anim .br-hero-arch,
.br-hero.js-anim .br-hero-bottle img,
.br-hero.js-anim .br-hero-label,
.br-hero.js-anim .br-hero-chips li,
.br-hero.js-anim .br-hero-pitch h2,
.br-hero.js-anim .br-hero-lede,
.br-hero.js-anim .br-hero-pitch .br-btn,
.br-hero.js-anim .br-hero-note,
.br-hero.js-anim .br-hero-side-note,
.br-hero.js-anim .br-stat { opacity: 0; }

.br-hero.js-anim .br-hero-stats::before { transform: scaleX(0); }

.br-hero.js-anim .br-hero-eyebrow,
.br-hero.js-anim .br-hero-label,
.br-hero.js-anim .br-hero-chips li,
.br-hero.js-anim .br-hero-pitch h2,
.br-hero.js-anim .br-hero-lede,
.br-hero.js-anim .br-hero-pitch .br-btn,
.br-hero.js-anim .br-hero-note,
.br-hero.js-anim .br-hero-side-note,
.br-hero.js-anim .br-stat {
  transform: translateY(16px);
  transition:
    opacity .75s cubic-bezier(.22, .68, .16, 1) var(--d, 0s),
    transform .75s cubic-bezier(.22, .68, .16, 1) var(--d, 0s);
}

.br-hero.js-anim .br-word {
  transform: translateY(.2em);
  filter: blur(12px);
  transition:
    opacity .85s cubic-bezier(.22, .68, .16, 1) var(--d, 0s),
    transform .85s cubic-bezier(.22, .68, .16, 1) var(--d, 0s),
    filter .85s cubic-bezier(.22, .68, .16, 1) var(--d, 0s);
}

.br-hero.js-anim .br-hero-arch {
  transform: translate3d(-50%, 26px, 0) scaleY(.9);
  transform-origin: 50% 100%;
  transition: opacity 1s ease .1s, transform 1.1s cubic-bezier(.22, .68, .16, 1) .1s;
}

.br-hero.js-anim .br-hero-bottle img {
  transform: translate3d(0, 60px, 0) scale(.94);
  transition:
    opacity .9s cubic-bezier(.22, .68, .16, 1) .28s,
    transform 1.15s cubic-bezier(.22, .68, .16, 1) .28s;
}

.br-hero.js-anim .br-hero-stats::before {
  transition: transform .9s cubic-bezier(.22, .68, .16, 1) .5s;
}

.br-hero.js-anim .br-hero-line-lead .br-word:nth-child(1) { --d: .04s; }
.br-hero.js-anim .br-hero-line-lead .br-word:nth-child(2) { --d: .12s; }
.br-hero.js-anim .br-hero-line-tail .br-word { --d: .2s; }

.br-hero.js-anim .br-hero-side .br-hero-label { --d: .42s; }
.br-hero.js-anim .br-hero-chips li:nth-child(1) { --d: .5s; }
.br-hero.js-anim .br-hero-chips li:nth-child(2) { --d: .58s; }
.br-hero.js-anim .br-hero-chips li:nth-child(3) { --d: .66s; }
.br-hero.js-anim .br-hero-side-note { --d: .74s; }

.br-hero.js-anim .br-hero-pitch .br-hero-label { --d: .46s; }
.br-hero.js-anim .br-hero-side-note {
  margin: 1.35rem 0 0;
  max-width: 20rem;
  color: var(--ink-3);
  font-size: .86rem;
  line-height: 1.65;
}

.br-hero-pitch h2 { --d: .54s; }
.br-hero.js-anim .br-hero-lede { --d: .6s; }
.br-hero.js-anim .br-hero-pitch .br-btn { --d: .66s; }
.br-hero.js-anim .br-hero-note { --d: .74s; }

.br-hero.js-anim .br-stat:nth-child(1) { --d: .62s; }
.br-hero.js-anim .br-stat:nth-child(2) { --d: .7s; }
.br-hero.js-anim .br-stat:nth-child(3) { --d: .78s; }

.br-hero.js-anim.is-in .br-hero-eyebrow,
.br-hero.js-anim.is-in .br-word,
.br-hero.js-anim.is-in .br-hero-label,
.br-hero.js-anim.is-in .br-hero-chips li,
.br-hero.js-anim.is-in .br-hero-pitch h2,
.br-hero.js-anim.is-in .br-hero-lede,
.br-hero.js-anim.is-in .br-hero-pitch .br-btn,
.br-hero.js-anim.is-in .br-hero-note,
.br-hero.js-anim.is-in .br-hero-side-note,
.br-hero.js-anim.is-in .br-stat {
  opacity: 1;
  transform: none;
  filter: none;
}

.br-hero.js-anim.is-in .br-hero-arch {
  opacity: 1;
  transform: translate3d(-50%, var(--arch-y, 0px), 0) scaleY(1);
}

.br-hero.js-anim.is-in .br-hero-bottle img {
  opacity: 1;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1);
}

.br-hero.js-anim.is-in .br-hero-stats::before { transform: scaleX(1); }

/* Once the entrance has played, the bottle follows the pointer on a much
   shorter, springier curve. */
.br-hero.is-settled .br-hero-bottle img {
  transition: transform .55s cubic-bezier(.18, .9, .24, 1);
}

/* =========================================================================
   B2. BUTTONS
   ====================================================================== */

.br-btn {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .5rem .5rem .5rem 1.5rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-strong);
  color: var(--accent-ink);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.br-btn:hover { background: var(--accent-dark); color: var(--accent-ink); }

.br-btn-arrow {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: .85rem;
  transition: transform .18s ease;
}

.br-btn:hover .br-btn-arrow { transform: translateX(2px); }

.br-btn-light { background: #fff; color: var(--ink); }
.br-btn-light:hover { background: #fff; color: var(--ink); }
.br-btn-light .br-btn-arrow { background: var(--accent); }

.br-btn-outline { background: transparent; border: 1px solid var(--ink); padding-right: 1.5rem; }
.br-btn-outline:hover { background: var(--ink); color: #fff; }

/* =========================================================================
   B3. BENEFITS
   ====================================================================== */

.br-benefits { padding: clamp(3rem, 6vw, 6rem) 0 0; }

.br-benefits-head {
  max-width: var(--shell);
  margin: 0 auto 2.5rem;
  padding: 0 var(--gutter, 1.5rem);
}

.br-benefits-head h2 {
  margin: 0;
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 400;
  letter-spacing: -.04em;
}

.br-benefits-grid {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter, 1.5rem);
  display: grid;
  grid-template-columns: 1fr clamp(280px, 32vw, 480px) 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

.br-benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.4rem;
  max-width: 24rem;
}

.br-benefit-list:first-of-type { justify-self: start; }
.br-benefit-list:last-of-type { justify-self: end; }

.br-benefit-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .85rem;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
}

/* A twelve-point rosette rather than a plain disc: the reference marks read
   as a seal of approval, and the shape carries that at small sizes. */
.br-benefit-list li::before {
  content: "\2713";
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  background: var(--forest);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  clip-path: polygon(
    50% 0%, 61% 9%, 75% 5%, 82% 17%, 96% 19%, 97% 33%, 108% 50%, 97% 67%,
    96% 81%, 82% 83%, 75% 95%, 61% 91%, 50% 100%, 39% 91%, 25% 95%, 18% 83%,
    4% 81%, 3% 67%, -8% 50%, 3% 33%, 4% 19%, 18% 17%, 25% 5%, 39% 9%
  );
}

.br-benefits-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #e6e1ff 0%, #f4eefc 52%, rgba(244, 238, 252, 0) 72%);
}

.br-benefits-media img {
  width: 74%;
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
}

.br-benefits-cta { margin-top: 1.25rem; }

/* =========================================================================
   B4. MARQUEE
   ====================================================================== */

.br-marquee {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
}

.br-marquee-track {
  display: flex;
  gap: 3.2rem;
  width: max-content;
  animation: br-marquee 34s linear infinite;
}

.br-marquee:hover .br-marquee-track { animation-play-state: paused; }

.br-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}

.br-marquee-item i { color: var(--accent-dark); }

@keyframes br-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =========================================================================
   B5. PRODUCT OVERVIEW
   ====================================================================== */

.br-overview { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }

.br-overview-shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter, 1.5rem);
}

.br-overview-lede {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.br-overview-label {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: .28em;
}

.br-overview-lede p {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: var(--fraunces-flat);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.1vw, 2.8rem);
  line-height: 1.22;
  letter-spacing: -.025em;
  color: var(--ink);
}

.br-overview-body {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* The picture is a link, so it gets a link's affordances: it lifts on hover
   and shows a focus ring for anyone arriving by keyboard. */
.br-overview-media { margin: 0; }

.br-overview-media a {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}

.br-overview-media a:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.br-overview-media a:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

.br-overview-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.br-overview-media a:hover img { transform: scale(1.03); }

.br-overview-aside {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  min-width: 0;
}

/* Named target under the points — the picture alone is not a label, and a
   pointer-only affordance leaves keyboard and screen-reader users with
   nothing to read. */
.br-overview-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .25rem 1.25rem;
  width: max-content;
  max-width: 100%;
  padding: 1rem 1.15rem 1rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease;
}

.br-overview-cta:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.br-overview-cta:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

.br-overview-cta-name {
  grid-column: 1;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.01em;
}

.br-overview-cta-meta {
  grid-column: 1;
  color: var(--ink-3);
  font-size: .86rem;
}

.br-overview-cta .br-btn-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.br-overview-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 2.5rem;
}

.br-overview-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: center;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.4;
}

.br-overview-points i {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 1.15rem;
  box-shadow: var(--shadow-sm);
}

/* =========================================================================
   B6. SHELF (product grid)
   ====================================================================== */

.br-shelf { padding: clamp(3rem, 6vw, 5.5rem) 0; }

.br-shelf-shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter, 1.5rem);
}

.br-shelf-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: 2.75rem;
}

.br-pill-label {
  display: inline-block;
  margin-bottom: 1.1rem;
  padding: .45rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.br-shelf-head h2 {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: 14ch;
}

.br-shelf-aside { justify-self: end; text-align: left; max-width: 20rem; }
.br-shelf-aside p { margin: 0 0 1.4rem; color: var(--ink-2); line-height: 1.6; }

.br-shelf-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

.br-shelf-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--sand-2);
  padding: 1.6rem 1.5rem 1.4rem;
  transition: transform .2s ease, box-shadow .2s ease;
}

.br-shelf-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.br-shelf-media {
  display: block;
  margin-bottom: 1.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
  overflow: hidden;
}

.br-shelf-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.br-shelf-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
}

.br-shelf-title a {
  font-family: var(--display);
  font-variation-settings: var(--fraunces-flat);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
}

.br-shelf-title a:hover { text-decoration: underline; text-underline-offset: .2em; }

.br-shelf-add {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: .8rem;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.br-shelf-add:hover { background: var(--accent); transform: translateX(2px); }

.br-shelf-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: .95rem;
  border-top: 1px solid var(--sand-3);
  font-size: .92rem;
  color: var(--ink-2);
}

.br-shelf-foot b {
  font-family: var(--display);
  font-variation-settings: var(--fraunces-flat);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--ink);
}

.br-shelf-foot .br-shelf-rating i { color: var(--star); margin-right: .35rem; }

/* =========================================================================
   B7. REVIEWS BAND
   ====================================================================== */

.br-reviews { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }

.br-reviews-shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter, 1.5rem); }

.br-reviews-head { margin-bottom: 2.25rem; }
.br-reviews-head h2 { margin: .5rem 0 0; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 400; letter-spacing: -.03em; }

.br-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }

.br-review {
  margin: 0;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.br-review-stars { color: var(--star); letter-spacing: .12em; margin-bottom: .9rem; }

.br-review blockquote {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-variation-settings: var(--fraunces-flat);
  font-weight: 400;
  font-size: 1.12rem;
  line-height: 1.5;
  letter-spacing: -.015em;
}

.br-review figcaption { font-size: .88rem; color: var(--ink-2); }
.br-review figcaption b { display: block; color: var(--ink); font-weight: 600; }
.br-review-verified { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; color: var(--forest); font-weight: 600; }

/* =========================================================================
   B8. FAQ ACCORDION
   ====================================================================== */

.br-faq { padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(4rem, 7vw, 6.5rem); }

.br-faq-shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter, 1.5rem);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 2.5rem;
  align-items: start;
}

.br-faq-title {
  grid-column: 1;
  position: sticky;
  top: 2rem;
  margin: 0;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -.035em;
}

.br-faq-list {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}

.br-faq-item {
  border-radius: var(--radius);
  background: var(--paper);
  padding: 0 1.5rem;
  box-shadow: var(--shadow-sm);
}

.br-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-variation-settings: var(--fraunces-flat);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  letter-spacing: -.015em;
  color: var(--ink);
}

.br-faq-item summary::-webkit-details-marker { display: none; }

.br-faq-item summary::after {
  content: "\f078";
  flex: 0 0 auto;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .8rem;
  color: var(--ink-2);
  transition: transform .2s ease;
}

.br-faq-item[open] summary::after { transform: rotate(180deg); }

.br-faq-answer {
  margin: 0;
  padding: 0 0 1.4rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  color: var(--ink-2);
  font-size: .95rem;
  line-height: 1.7;
}

/* =========================================================================
   B9. FOOTER
   ====================================================================== */

.br-footer {
  margin-top: 0;
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  background: var(--ink);
  color: #e8ecfa;
  border: 0;
}

.br-footer a { color: #e8ecfa; text-decoration: none; }
.br-footer a:hover { color: var(--accent); }

/* `.br-footer a` outranks `.br-btn-light`, which would leave the footer CTA
   painting cream text on a white pill. Restate it at matching specificity. */
.br-footer a.br-btn-light,
.br-footer a.br-btn-light:hover { color: var(--ink); }

.br-footer-top {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.75rem;
}

.br-footer-wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: .15em;
  line-height: 1;
  color: #fff;
  text-decoration: none;
}

.br-footer-wordmark-name {
  font-family: var(--display);
  font-variation-settings: var(--fraunces-flat);
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  letter-spacing: -.025em;
}

.br-footer-wordmark-sub {
  font-family: var(--body);
  font-weight: 600;
  font-size: clamp(.68rem, 1vw, .82rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #a8b2d4;
}

.br-footer-tagline { margin: .9rem 0 1.8rem; color: #a8b2d4; font-size: .95rem; line-height: 1.6; }

.br-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }

.br-footer-cols h3 {
  margin: 0 0 1rem;
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #98a3c8;
}

.br-footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; font-size: .93rem; }

.br-footer-contact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  padding: 2.25rem 0;
  border-top: 1px solid rgba(232, 236, 250, .16);
  border-bottom: 1px solid rgba(232, 236, 250, .16);
}

.br-footer-contact h4 {
  margin: 0 0 .6rem;
  font-family: var(--display);
  font-variation-settings: var(--fraunces-flat);
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  letter-spacing: -.02em;
  color: #fff;
}

.br-footer-contact address { font-style: normal; color: #a8b2d4; font-size: .95rem; line-height: 1.6; }
.br-footer-hours { display: block; margin-top: .35rem; color: #98a3c8; font-size: .85rem; }

.br-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.75rem 0 1rem;
  font-size: .85rem;
  color: #98a3c8;
}

.br-footer-legal { display: inline-flex; gap: 1.75rem; }
.br-footer-pay { display: inline-flex; align-items: center; gap: .75rem; font-size: 1.35rem; color: #a8b2d4; }
.br-footer-secure { font-size: .8rem; }

.br-footer-disclaimer {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(232, 236, 250, .16);
  color: #7e89b0;
  font-size: .78rem;
  line-height: 1.6;
  max-width: 62rem;
}

/* =========================================================================
   B10. RESPONSIVE
   ====================================================================== */

@media (max-width: 1080px) {
  .br-overview-points { grid-template-columns: 1fr; }
  .br-shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-review-grid { grid-template-columns: 1fr; }
}

@media (max-width: 920px) {
  .br-menu-btn { display: grid; grid-column: 1; justify-self: start; }

  /* Below the breakpoint the nav returns to site.css's off-canvas panel. */
  .br-nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(320px, 84vw);
    height: 100dvh;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 5.5rem 1.75rem 2rem;
    background: var(--sand);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform .25s ease;
  }

  .br-nav.is-open { transform: translateX(0); }
  .br-nav .ws-nav-link { font-size: 1.2rem; }

  .br-hero-cols { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 1.5rem; }
  .br-hero-side,
  .br-hero-pitch { grid-column: 1; justify-self: start; max-width: none; }
  .br-hero-bottle {
    position: relative;
    left: auto;
    top: auto;
    /* Sized for the 2.54:1 cut-out — 62vw made the bottle taller than the
       phone viewport. */
    width: min(190px, 46vw);
    transform: none;
    margin: 0 auto 1.5rem;
  }
  .br-hero-arch { top: -2rem; width: min(300px, 64vw); height: min(430px, 118vw); }
  .br-hero-stage { margin-top: 0; min-height: 0; }
  .br-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
  .br-stat:nth-child(3) { grid-column: 1 / -1; }

  .br-benefits-grid { grid-template-columns: 1fr; }
  .br-benefits-media { order: -1; max-width: 22rem; margin: 0 auto; }
  .br-benefit-list:first-of-type,
  .br-benefit-list:last-of-type { justify-self: start; max-width: none; }

  .br-overview-lede { grid-template-columns: 1fr; }
  .br-overview-body { grid-template-columns: 1fr; }
  .br-overview-cta { width: 100%; }

  .br-shelf-head { grid-template-columns: 1fr; align-items: start; }
  .br-shelf-aside { justify-self: start; }

  .br-faq-shell { grid-template-columns: 1fr; gap: 1.5rem; }
  .br-faq-title { grid-column: 1; position: static; top: auto; }
  .br-faq-list { grid-column: 1; }

  .br-footer-top { grid-template-columns: 1fr; }
  .br-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-footer-contact { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .br-header-inner { grid-template-columns: auto 1fr auto; }
  .br-wordmark { justify-self: center; }
  .br-wordmark-name { font-size: 1.28rem; }
  .br-wordmark-sub { font-size: .5rem; letter-spacing: .22em; text-indent: .22em; }
  .br-cart-pill-label { display: none; }
  .br-cart-pill { padding: .3rem; }

  .br-shelf-grid { grid-template-columns: 1fr; }

  /* A single nowrap line does not survive a phone. Let it wrap here — the
     bottle sits above the copy at this width anyway, so nothing depends on
     the line staying intact. */
  .br-hero-display {
    display: block;
    text-align: center;
    white-space: normal;
    font-size: clamp(2.6rem, 13.5vw, 4.4rem);
  }

  .br-hero-gap { display: none; }
  .br-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   B11. REDUCED MOTION
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  .br-marquee-track { animation: none; }
  .br-card, .br-shelf-card, .ws-card { transition: none; }
  .br-btn .br-btn-arrow { transition: none; }
  .br-chip, .br-chip i { transition: none; }

  /* The hero paints its finished state directly: no entrance, no parallax. */
  .br-hero.js-anim .br-hero-eyebrow,
  .br-hero.js-anim .br-word,
  .br-hero.js-anim .br-hero-arch,
  .br-hero.js-anim .br-hero-bottle img,
  .br-hero.js-anim .br-hero-label,
  .br-hero.js-anim .br-hero-chips li,
  .br-hero.js-anim .br-hero-pitch h2,
  .br-hero.js-anim .br-hero-lede,
  .br-hero.js-anim .br-hero-pitch .br-btn,
  .br-hero.js-anim .br-hero-note,
  .br-hero.js-anim .br-hero-side-note,
  .br-hero.js-anim .br-stat {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .br-hero.js-anim .br-hero-arch { transform: translateX(-50%); }
  .br-hero.js-anim .br-hero-stats::before { transform: none; transition: none; }
}

/* =========================================================================
   B12. CHECKOUT
   ====================================================================== */

/*
| site.css paints the place-order button white-on-accent. Against a rust
| accent that cleared contrast; against this amber it lands near 1.9:1, so
| the label is restated in ink and the pill radius applied.
*/
.place-order-btn {
  border-radius: var(--radius-pill);
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-ink);
  font-family: var(--body);
  letter-spacing: .04em;
}

.place-order-btn:hover { color: var(--accent-ink); }

.checkout-card,
.order-summary,
.shipping-option,
.payment-option { border-radius: var(--radius); }

.shipping-option.selected,
.payment-option.selected { border-color: var(--ink); }