/* ==========================================================================
   Hausboom — landing page
   Ported from the Claude Design prototype "Hausboom Hero.dc.html".
   Plain CSS, no build step. The prototype carried every rule as an inline
   style plus a `style-hover` attribute; both live here as real rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — self-hosted, and that is the point.

   Via Google these cost a DNS lookup and a TLS handshake to two hosts, then a
   stylesheet round trip before the browser even learns which files it needs.
   The text renders in Helvetica and Georgia meanwhile and jumps to Archivo and
   Newsreader when they land, which is the lurch on first load: not a fade, a
   reflow — the fallback sets different widths, so the headline re-wraps and
   every line shifts under it.

   Served from this origin they are known at parse time and preloaded in the
   head, so they arrive with the page and there is nothing to swap. `swap` is
   kept as the honest fallback for a cold, slow connection: showing the text
   late is worse than showing it in Georgia briefly.

   Both families are variable, so four files cover every cut: Archivo carries
   400 through 800 in one upright file, Newsreader carries its optical-size
   axis. 167 KB total, the same as the Google request, with none of the trips.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/archivo-var.woff2') format('woff2');
}

@font-face {
  font-family: Archivo;
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/archivo-var-italic.woff2') format('woff2');
}

@font-face {
  font-family: Newsreader;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/newsreader-var.woff2') format('woff2');
}

@font-face {
  font-family: Newsreader;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/newsreader-var-italic.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   Tokens
   `--accent` is the prototype's one editable prop (red / yellow / pink / ink).
   It drives the hero ribbon and the mega-menu strip only — every other red
   surface is fixed brand red, exactly as the prototype had it.
   -------------------------------------------------------------------------- */
:root {
  --cream:  #FBF5E2;
  /* Was #E5252B, the comp's red. Cream on it reaches only 4.16:1, so every
     line of small copy on the red field failed WCAG AA and no amount of
     per-rule patching could fix it — the ground was the problem. Six percent
     darker clears 4.6:1 with cream and 5.1:1 with white, and reads as the
     same red. Every other value below is unchanged from the comp. */
  --red:      #D81F26;
  --red-deep: #B81A20;
  --yellow: #F5E32C;
  --pink:   #F2A0C0;
  --ink:    #141414;
  --sky:    #7cb7e4;

  --accent: var(--red);

  /* Ink at reading weights, darkest first. Four unnamed hexes until now. */
  --ink-body: #2f2c28;
  --ink-2:    #413e39;
  --ink-3:    #4b463f;
  --ink-4:    #5a564e;

  /* Rules and dividers on cream, lightest first. */
  --hairline:      rgba(20, 20, 20, .08);
  --hairline-soft: rgba(20, 20, 20, .12);
  --hairline-firm: rgba(20, 20, 20, .16);

  /* Cast shadows, each tinted to the ground it falls on. */
  --shadow-sky: rgba(12, 50, 80, .3);
  --shadow-red: rgba(80, 10, 10, .22);

  /* The nine flavours. The mega swatches read these through --dot; they were
     nine inline hexes with no home. */
  --f-lemonade:     #EDE04A;
  --f-blackcurrant: #6B3FA0;
  --f-strawberry:   #E5252B;
  --f-asam-jawa:    #B5762F;
  --f-roti-bakar:   #D9A05B;
  --f-mango:        #F79A1E;
  --f-lychee:       #F2A0C0;
  --f-guava:        #7FBF4D;
  --f-pineapple:    #F5C93B;

  --gutter: clamp(24px, 3.6vw, 52px);
  --ease:   cubic-bezier(.2, .8, .2, 1);

  /* Height of the docked rail: its logo plus its vertical padding. Anything
     that lands flush against the top of the viewport has to clear this. */
  --rail-h: calc(clamp(34px, 4.4vh, 44px) + clamp(7px, 1.1vh, 12px) * 2);
}

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

html,
body {
  margin: 0;
  padding: 0;
  max-width: 100%;
}

/* The guard lives on `html` alone. On `body` it makes body its own clip
   context, which is how fixed-position bars stop holding station — and the
   page measures clean at 320/390/430/768/1200/1440 with it off entirely, so
   it is a net for a future stray, never a substitute for fitting. */
html { overflow-x: hidden; }

html { scroll-behavior: smooth; }

/* --------------------------------------------------------------------------
   Skip link — the nav, the rail and the mega between them put a lot of
   controls ahead of the page.
   -------------------------------------------------------------------------- */
.hb-skip {
  position: fixed;
  left: 50%;
  top: 10px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: translate(-50%, -180%);
  transition: transform .25s var(--ease);
}

.hb-skip:focus-visible {
  transform: translate(-50%, 0);
  color: var(--yellow);
}

/* Interpolated smooth scrolling and the native kind fight each other, so the
   moment Lenis is driving, hand it the whole job. */
html.js-lenis { scroll-behavior: auto; }

/* --------------------------------------------------------------------------
   Scrollbar — the page is a continuous cream field with red as its one accent,
   so the bar reads as part of that rather than as chrome. The thumb's cream
   border is what insets it; it sits on the cream body throughout.
   -------------------------------------------------------------------------- */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--red) var(--hairline);
}

::-webkit-scrollbar { width: 13px; height: 13px; }

::-webkit-scrollbar-track { background: rgba(20, 20, 20, .07); }

::-webkit-scrollbar-thumb {
  background: var(--red);
  border: 3px solid var(--cream);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover { background: var(--red-deep); }

::-webkit-scrollbar-corner { background: transparent; }

/* --------------------------------------------------------------------------
   Motion entry states
   `--enter` runs 0 to 1. It defaults to 1 everywhere, and only motion.js —
   after it has confirmed GSAP loaded and that motion is wanted — sets the
   starting 0. A blocked CDN or a thrown error leaves the page fully visible.
   Custom properties are used rather than direct transforms so the hover rules
   below keep working: GSAP writes the variable, never the transform.
   -------------------------------------------------------------------------- */
.js-motion .hb-bottle,
.js-motion .hb-clip,
.js-motion .hb-chapter,
.js-motion .hb-road__node { --enter: 0; }

body {
  background: var(--cream);
  font-family: Archivo, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #fff; text-decoration: none; }
a:hover { color: var(--yellow); }

/* Anchored sections clear the docked bar. */
[id] { scroll-margin-top: var(--rail-h); }

@keyframes hb-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

@keyframes hb-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - clamp(9px, 1vw, 17px))); }
}

@keyframes hb-fizz {
  0%   { transform: translateY(6px) scale(.6); opacity: 0; }
  25%  { opacity: .9; }
  100% { transform: translateY(-46px) scale(1); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Navigation — transparent bar over the hero, opaque rail once scrolled.
   State is three classes on <html>: is-docked, is-at-footer, is-mega-open.
   -------------------------------------------------------------------------- */
.hb-nav,
.hb-rail {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(7px, 1.1vh, 12px) var(--gutter);
}

.hb-nav {
  z-index: 81;
  color: #fff;
  transition: opacity .6s ease, color .4s ease, visibility .6s;
}

/* Over the red footer the bar returns, tinted cream and with no glow. */
.is-at-footer .hb-nav { color: var(--cream); }

/* `visibility` alongside every `opacity: 0` below is load-bearing, not
   belt-and-braces. Opacity hides a bar from the eye and `pointer-events` from
   the mouse, but leaves its links in the tab order — the two bars and the mega
   panel between them put 20 invisible tab stops ahead of the page. `visibility`
   is the one property that removes them, and it animates as a step function at
   the end of the transition, so the fade is unchanged. */
.hb-rail {
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(251, 245, 226, .96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
  transition: opacity .6s ease, transform .4s var(--ease), visibility .6s;
}

.hb-nav { visibility: visible; }

.is-docked .hb-nav  { opacity: 0; visibility: hidden;  pointer-events: none; }
.is-docked .hb-rail { opacity: 1; visibility: visible; pointer-events: auto; }

.is-docked.is-at-footer .hb-nav  { opacity: 1; visibility: visible; pointer-events: auto; }
.is-docked.is-at-footer .hb-rail { opacity: 0; visibility: hidden;  pointer-events: none; }

/* The rail slides away while reading downward and comes back the moment the
   scroll reverses. Held open whenever the mega panel is — the panel hangs off
   the rail's bottom edge, so retracting one without the other reads as a bug. */
.is-nav-hidden:not(.is-mega-open) .hb-rail {
  transform: translateY(-102%);
  pointer-events: none;
}

.hb-nav__logo,
.hb-rail__logo { display: block; }

.hb-nav__logo img,
.hb-rail__logo img {
  height: clamp(34px, 4.4vh, 44px);
  width: auto;
  display: block;
}

.hb-nav__logo img { filter: drop-shadow(0 3px 14px var(--shadow-sky)); }

.hb-menu {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 26px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hb-nav .hb-menu {
  color: inherit;
  text-shadow: 0 2px 12px var(--shadow-sky);
}

.is-at-footer .hb-nav .hb-menu { text-shadow: none; }

/* 12px uppercase gives a 14px-tall hit area, under the 24px floor. The
   padding is vertical only so the bar's own height is unchanged — it is set
   by the logo, which is taller than this. */
.hb-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 5px 0;
}

.hb-nav .hb-menu a { color: inherit; }
.hb-rail .hb-menu a { color: var(--ink); }
.hb-rail .hb-menu a:hover { color: var(--red); }

.hb-menu__trigger {
  display: flex;
  align-items: center;
  min-height: 24px;
  gap: 7px;
  padding: 5px 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: inherit;
  cursor: pointer;
}

.hb-nav .hb-menu__trigger  { color: inherit; }
.hb-rail .hb-menu__trigger { color: var(--ink); }
.hb-rail .hb-menu__trigger:hover { color: var(--red); }

.hb-menu__caret {
  display: block;
  font-size: 9px;
  transform: rotate(0deg);
  transition: transform .35s var(--ease);
}

.is-mega-open .hb-menu__caret { transform: rotate(180deg); }

/* Hamburger — desktop shows the worded trigger, phones show this instead.
   Drawn from bars rather than an icon file so it inherits `currentColor` and
   works over both the photo (white) and the rail (ink), and so the open state
   can fold into a cross. */
.hb-burger {
  display: none;
  position: relative;
  width: 22px;
  height: 14px;
}

.hb-burger i {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .2s ease;
}

.hb-burger i:nth-child(1) { top: 0; }
.hb-burger i:nth-child(2) { top: 6px; }
.hb-burger i:nth-child(3) { top: 12px; }

.is-mega-open .hb-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.is-mega-open .hb-burger i:nth-child(2) { opacity: 0; }
.is-mega-open .hb-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Mega menu
   One panel serves both bars; it drops to the rail's offset and slips under
   the rail (z 79 vs 80) once docked, which is what the prototype's two
   duplicate panels achieved.
   -------------------------------------------------------------------------- */
.hb-mega {
  position: fixed;
  left: clamp(16px, 2.4vw, 40px);
  right: clamp(16px, 2.4vw, 40px);
  top: clamp(58px, 7.6vh, 74px);
  z-index: 82;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr);
  gap: clamp(18px, 2vw, 34px);
  padding: clamp(20px, 2vw, 32px);
  background: rgba(251, 245, 226, .97);
  backdrop-filter: blur(16px);
  border-radius: 30px;
  box-shadow: 0 30px 70px rgba(12, 50, 80, .28);
  opacity: 0;
  /* Same reason as the bars — and one more here: a closed panel that is only
     transparent still counts as on-screen, so its nine bottle images defeat
     their own `loading="lazy"` and pull 3 MB before the hero has settled. */
  visibility: hidden;
  transform: translateY(-16px) scale(.97);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity .34s ease, transform .44s cubic-bezier(.2, .85, .2, 1), visibility .34s;
  /* Sized to fit at every breakpoint; this is only a backstop for very short
     windows, and it stays silent — a scrollbar inside a floating overlay reads
     as a rendering mistake. */
  max-height: calc(100svh - clamp(58px, 7.6vh, 74px) - 16px);
  overflow-y: auto;
  scrollbar-width: none;
}

.hb-mega::-webkit-scrollbar { display: none; }

.is-docked .hb-mega { top: clamp(62px, 8vh, 78px); z-index: 79; }

.is-mega-open .hb-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.hb-mega__nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hb-mega__link {
  display: flex;
  align-items: center;
  padding: 18px 22px;
  background: #fff;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  transition: transform .3s var(--ease), box-shadow .3s;
}

.hb-mega__link:hover {
  transform: translateX(6px);
  box-shadow: 0 14px 30px rgba(20, 20, 20, .1);
  color: var(--red);
}

.hb-mega__panel {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
  padding-left: clamp(16px, 1.8vw, 28px);
  border-left: 1.5px solid var(--hairline-soft);
}

.hb-mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
}

.hb-mega__flavour {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 6px 6px;
  border-radius: 16px;
  color: var(--ink);
  transition: background .25s, transform .3s var(--ease);
}

.hb-mega__flavour:hover {
  background: #fff;
  color: var(--ink);
  transform: translateX(4px);
}

.hb-mega__swatch {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 44px;
  background: color-mix(in srgb, var(--dot) 13%, transparent);
  border-radius: 12px;
}

.hb-mega__swatch img {
  height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
}

.hb-mega__name {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.005em;
}

.hb-mega__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: auto;
  padding: 16px 18px;
  background: var(--accent);
  border-radius: 20px;
}

.hb-mega__cta span {
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(17px, 1.5vw, 23px);
  line-height: 1.15;
  color: #fff;
}

.hb-mega__cta a {
  flex: none;
  padding: 13px 20px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hb-mega__cta a:hover { color: var(--yellow); }

/* Section links folded into the panel for narrow screens only. */
.hb-mega__link--compact { display: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hb-hero {
  position: relative;
  width: 100%;
  /* The comp says a flat 100vh. That holds on a normal desktop, but the hero
     photo is a fixed 2:1 crop, so a tall narrow window makes `cover` slice into
     the bottles. The subject spans 55% of the source width; capping height at
     81vw keeps the visible window at ~62% of it, which always contains the
     subject. At 1699x884 the cap works out to 1376px, far above the viewport,
     so 100svh wins and nothing about the comp changes. */
  height: min(100svh, 81vw);
  min-height: 340px;
  overflow: hidden;
  background: var(--sky);
  border-bottom-left-radius: 50% clamp(30px, 5vh, 70px);
  border-bottom-right-radius: 50% clamp(30px, 5vh, 70px);
  isolation: isolate;
}

.hb-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The 2:1 crop needs almost no cropping at a typical desktop aspect. Where it
     does — an ultrawide — the bias sits below centre so the forearms survive and
     the loss comes out of the sky above, which is only there for the headline. */
  object-position: center 65%;
  z-index: 0;
  display: block;
}

.hb-hero__title {
  position: relative;
  z-index: 3;
  margin: clamp(62px, 8.6vh, 84px) 0 0;
  padding-right: clamp(30px, 5vw, 90px);
  text-align: center;
  animation: hb-rise .9s var(--ease) both;
}

/* The title is an <h1> whose two lines are spans, so they need the block
   behaviour the divs had — and line 2 needs its weight stated, because an h1
   brings `font-weight: bold` with it and Newsreader is only loaded at 400,
   which means the browser fakes the bold. */
.hb-hero__line1,
.hb-hero__line2 { display: block; }

.hb-hero__line2 { font-weight: 400; }

.hb-hero__line1 {
  font-size: min(9.4vw, 10.4vh);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.045em;
  color: #fff;
  text-shadow: 0 4px 26px rgba(14, 52, 84, .28);
}

.hb-hero__line2 {
  font-family: Newsreader, Georgia, serif;
  font-style: italic;
  font-size: min(10.6vw, 11.8vh);
  line-height: .86;
  letter-spacing: -.02em;
  color: #fff;
  margin-top: -.05em;
  padding-left: .1em;
  text-shadow: 0 3px 22px rgba(14, 52, 84, .3);
}

.hb-ribbon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
}

.hb-ribbon svg { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   Flavours
   -------------------------------------------------------------------------- */
.hb-flavours {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* This section is exactly 100vh, so scrolling parks its heading flush with
     the top of the viewport — directly under the rail. The comp's
     clamp(22px,4.5vh,60px) is not enough to clear it at common heights. */
  padding: calc(var(--rail-h) + clamp(10px, 1.5vh, 22px)) 0 0;
  background: var(--cream);
  overflow: hidden;
}

.hb-sectionhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 clamp(24px, 4vw, 60px);
  text-align: center;
}

.hb-flavours__title {
  margin: 0;
  max-width: 1200px;
  font-size: min(6.2vw, 9vh);
  font-weight: 800;
  font-style: italic;
  line-height: .9;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.hb-flavours__sub {
  font-family: Newsreader, Georgia, serif;
  font-size: min(1.9vw, 3.2vh);
  line-height: 1.2;
  color: var(--ink-2);
}

.hb-flavours__grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  align-items: center;
  align-content: center;
  gap: 0 clamp(4px, 1vw, 20px);
  max-width: 1900px;
  width: 100%;
  margin: clamp(8px, 1.6vh, 22px) auto 0;
  padding: 0 6vw clamp(102px, 17vh, 240px);
}

.hb-bottle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.4vh, 16px);
  min-width: 0;
  padding: 0;
  text-align: center;
  opacity: var(--enter, 1);
  transform: translateY(calc((1 - var(--enter, 1)) * 34px));
  transition: transform .35s var(--ease);
}

.hb-bottle:hover { transform: translateY(-14px); z-index: 2; }

.hb-bottle img {
  width: 186%;
  max-width: none;
  height: auto;
  margin: 0 -43%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 24px 26px rgba(20, 20, 20, .18));
}

.hb-bottle__name {
  font-size: clamp(10px, .8vw, 13px);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Story
   -------------------------------------------------------------------------- */
.hb-story {
  position: relative;
  width: 100%;
  padding: clamp(56px, 9vh, 120px) clamp(20px, 3.2vw, 52px) clamp(130px, 20vh, 250px);
  background: var(--cream);
  overflow: hidden;
}

.hb-story__ghost {
  position: absolute;
  left: 50%;
  top: clamp(30px, 6vh, 90px);
  transform: translateX(-50%);
  font-size: min(17vw, 230px);
  font-weight: 800;
  font-style: italic;
  line-height: .8;
  letter-spacing: -.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--hairline-soft);
  pointer-events: none;
  user-select: none;
}

.hb-story__inner {
  position: relative;
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4.5vh, 64px);
}

.hb-story__lede {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 22px);
  max-width: 900px;
}

.hb-story__title {
  margin: 0;
  font-size: clamp(40px, 6vw, 96px);
  font-weight: 800;
  font-style: italic;
  line-height: .85;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.hb-fizzword {
  position: relative;
  display: inline-block;
  color: var(--red);
}

.hb-fizzword b {
  position: absolute;
  border-radius: 50%;
  animation: hb-fizz 3.4s ease-in-out infinite;
}

/* Same rule as the ribbon and the export band: an idle loop nobody can see
   is wasted work. */
.hb-fizzword--paused b { animation-play-state: paused; }

.hb-fizzword b:nth-of-type(1) { left: 12%; top: -4%; width: .13em; height: .13em; background: var(--red);    animation-duration: 3.4s; }
.hb-fizzword b:nth-of-type(2) { left: 44%; top:  2%; width: .09em; height: .09em; background: var(--yellow); animation-duration: 4.1s; animation-delay: .6s; }
.hb-fizzword b:nth-of-type(3) { left: 74%; top: -2%; width: .11em; height: .11em; background: var(--red);    animation-duration: 3.8s; animation-delay: 1.4s; }

.hb-story__body {
  margin: 0;
  max-width: 700px;
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(21px, 1.75vw, 30px);
  line-height: 1.26;
  color: var(--ink-body);
  text-wrap: pretty;
}

/* --- the road --- */
.hb-roadwrap {
  position: relative;
  width: 100%;
  margin: clamp(4px, 1vh, 14px) 0 clamp(90px, 11vh, 150px);
}

.hb-road { position: relative; width: 100%; }

.hb-road > svg {
  width: 100%;
  height: clamp(300px, 30vw, 420px);
  display: block;
}

.hb-road__node {
  position: absolute;
  left: var(--x);
  top: var(--node-y);
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(28px, 2.4vw, 38px);
  height: clamp(28px, 2.4vw, 38px);
  background: var(--ink);
  border-radius: 50%;
  box-shadow: 0 10px 22px rgba(20, 20, 20, .28);
  opacity: var(--enter, 1);
  transform: translate(-50%, -50%) scale(var(--enter, 1));
}

.hb-chapter {
  position: absolute;
  left: var(--x);
  top: var(--cap-top);
  opacity: var(--enter, 1);
  transform: translateX(-50%) translateY(calc((1 - var(--enter, 1)) * 24px));
  z-index: 2;
  width: clamp(230px, 24vw, 330px);
}

.hb-chapter:hover { z-index: 6; }

.hb-chapter__shot {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  width: clamp(220px, 22vw, 300px);
  height: clamp(120px, 12vw, 168px);
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 22px 46px rgba(20, 20, 20, .24);
  opacity: 0;
  transform: translateX(-50%) translateY(14px) rotate(0deg);
  pointer-events: none;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .85, .2, 1);
}

.hb-chapter:hover .hb-chapter__shot,
.hb-chapter:focus-within .hb-chapter__shot {
  opacity: 1;
  transform: translateX(-50%) translateY(0) rotate(var(--tilt));
}

/* The reveal used to be reachable by keyboard through a tabindex on a div
   that announced nothing and did nothing. Content should not hide behind an
   interaction a device cannot perform, so where there is no hover the photos
   simply show — the same call the ≤900px rules already make. */
@media (hover: none) {
  .hb-chapter__shot {
    opacity: 1;
    transform: translateX(-50%) translateY(0) rotate(var(--tilt));
  }
}

.hb-chapter__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.hb-chapter__year {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
}

.hb-chapter__title {
  font-size: clamp(18px, 1.5vw, 26px);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.03em;
  line-height: .98;
  text-transform: uppercase;
  color: var(--ink);
}

.hb-chapter__body {
  font-size: clamp(13px, .92vw, 15px);
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
}

.hb-chapter__stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}

.hb-chapter__num {
  font-size: clamp(19px, 1.7vw, 29px);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--red);
}

.hb-chapter__unit {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* --- the red claim card --- */
.hb-claim {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vh, 26px);
  padding: clamp(26px, 3.4vw, 52px) clamp(24px, 3vw, 48px) clamp(18px, 2.4vh, 26px);
  background: var(--red);
  border-radius: 34px;
}

.hb-claim__top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
}

.hb-claim__headline {
  display: flex;
  align-items: center;
  padding-right: clamp(20px, 2.4vw, 44px);
}

.hb-claim__headline div {
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(28px, 3vw, 52px);
  line-height: 1.06;
  color: var(--cream);
  text-wrap: pretty;
}

.hb-claim__facts {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vh, 18px);
  padding-left: clamp(20px, 2.4vw, 44px);
  border-left: 2px solid rgba(251, 245, 226, .45);
}

.hb-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);
}

.hb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hb-tag {
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hb-tag--yellow { background: var(--yellow); color: var(--ink); }
.hb-tag--cream  { background: var(--cream);  color: var(--ink); }
.hb-tag--pink   { background: var(--pink);   color: var(--ink); }
.hb-tag--ink    { background: var(--ink);    color: var(--yellow); }

.hb-retailers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 16px;
}

/* Yellow reads 3.4:1 on red at any weight. It keeps its place on the ink
   grounds — the "Real fruit juice" tag, the export band — and gives up the
   red ones, which makes it a rule rather than an exception: yellow lives on
   ink, cream lives on red. */
.hb-retailers span {
  font-size: clamp(12.5px, 1vw, 16px);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cream);
}

/* The export list reads as its own band rather than loose text on the red.
   Ink ground with the yellow type echoes the "Real fruit juice" tag above it.
   The negative side and bottom margins cancel the card's own padding so the
   band runs full-bleed into its corners; `.hb-claim` clips the radius. The top
   margin is what drops it toward the foot of the card and grows the card with
   it — it stacks on top of the card's existing flex gap. */
.hb-marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin: clamp(26px, 5vh, 60px)
          calc(-1 * clamp(24px, 3vw, 48px))
          calc(-1 * clamp(18px, 2.4vh, 26px));
  padding: clamp(13px, 1.7vh, 20px) clamp(24px, 3vw, 48px);
  background: var(--ink);
}

.hb-marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(18px, 2vw, 34px);
  animation: hb-slide 34s linear infinite;
}

/* An idle loop nobody can see is wasted work. */
.hb-marquee--paused .hb-marquee__track { animation-play-state: paused; }

.hb-marquee__set {
  display: flex;
  flex: none;
  gap: clamp(18px, 2vw, 34px);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--yellow);
  white-space: nowrap;
}

.hb-story__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(58px, 7vh, 104px);
  display: block;
  z-index: 2;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Press + awards (one red field)
   -------------------------------------------------------------------------- */
.hb-red {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--red);
  overflow: hidden;
}

/* No `overflow: hidden` here even though the comp had it. The press cards cast
   `0 20px 44px rgba(80,10,10,.22)`; clipping at this box cuts those shadows off
   mid-falloff and leaves a hard horizontal seam across the red — measurably
   rgb(226,35,42) above it against rgb(230,36,44) below. The outer `.hb-red`
   still clips, which is all the oversized quote glyph needs. */
.hb-press {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 4vh, 72px) clamp(20px, 3.2vw, 52px) clamp(22px, 4.4vh, 80px);
}

/* Joins the two halves of the red field: reviews & awards. */
.hb-amp {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 0 0 clamp(6px, 1.4vh, 18px);
  font-family: Newsreader, Georgia, serif;
  font-style: italic;
  font-size: clamp(52px, 5.4vw, 104px);
  line-height: .8;
  color: rgba(251, 245, 226, .55);
  user-select: none;
  pointer-events: none;
}

.hb-press__quotemark {
  position: absolute;
  left: -6vw;
  top: clamp(-40px, -3vh, -20px);
  font-family: Newsreader, Georgia, serif;
  font-size: min(46vw, 620px);
  line-height: .7;
  color: rgba(255, 255, 255, .13);
  pointer-events: none;
  user-select: none;
}

.hb-sectionhead--onred { position: relative; }

.hb-press__title {
  margin: 0;
  font-size: min(4.4vw, 6vh);
  font-weight: 800;
  font-style: italic;
  line-height: .88;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--cream);
}

.hb-press__sub,
.hb-awards__sub {
  font-family: Newsreader, Georgia, serif;
  line-height: 1.2;
  color: var(--cream);
}

.hb-press__sub  { font-size: min(1.6vw, 2.6vh); }
.hb-awards__sub { font-size: min(1.4vw, 2.2vh); }

.hb-press__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 26px);
  max-width: 1560px;
  width: 100%;
  margin: clamp(14px, 2.8vh, 44px) auto 0;
}

.hb-clip {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 2vh, 20px);
  padding: clamp(15px, 2.8vh, 32px) clamp(16px, 1.6vw, 28px) clamp(13px, 2.2vh, 24px);
  border-radius: 30px;
  opacity: var(--enter, 1);
  /* Arrives flat and lands askew — they are dressed as clippings. */
  transform: translateY(calc((1 - var(--enter, 1)) * 30px))
             rotate(calc(var(--tilt) * var(--enter, 1)));
  box-shadow: 0 20px 44px var(--shadow-red);
  transition: transform .35s var(--ease), box-shadow .35s;
}

.hb-clip:hover {
  transform: rotate(0deg) translateY(-12px) scale(1.02);
  box-shadow: 0 30px 60px rgba(80, 10, 10, .3);
  color: var(--ink);
}

.hb-clip--yellow { background: var(--yellow); }
.hb-clip--cream  { background: var(--cream); }
.hb-clip--pink   { background: var(--pink); }

.hb-clip__badge {
  position: absolute;
  right: clamp(-10px, -.6vw, -6px);
  top: clamp(-20px, -2.4vh, -14px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(104px, 9.4vw, 142px);
  height: clamp(52px, 4.8vw, 70px);
  transform: rotate(-7deg);
}

.hb-clip__badge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hb-clip__badge span {
  position: relative;
  padding: 0 14px;
  font-size: clamp(9px, .72vw, 11px);
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  color: var(--cream);
}

.hb-clip__logo {
  display: flex;
  align-items: center;
  height: min(60px, 6.6vh);
}

.hb-clip__logo img {
  max-height: 100%;
  height: var(--logo-h, min(60px, 6.6vh));
  width: auto;
  max-width: 80%;
  object-fit: contain;
  object-position: left center;
  display: block;
  filter: brightness(0);
  opacity: .9;
  mix-blend-mode: multiply;
}

.hb-clip blockquote {
  margin: 0;
  font-family: Newsreader, Georgia, serif;
  font-size: min(1.75vw, 3.4vh);
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: pretty;
}

.hb-clip__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: clamp(12px, 2vh, 18px);
  border-top: 1.5px solid var(--hairline-firm);
}

.hb-clip__more span:first-child {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}

.hb-clip__arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 50%;
  font-size: 14px;
}

/* --- awards --- */
.hb-awards {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(18px, 3.6vh, 58px) clamp(20px, 3.2vw, 52px) clamp(20px, 4vh, 66px);
}

.hb-awards__title {
  margin: 0;
  font-size: min(3.2vw, 4.4vh);
  font-weight: 800;
  font-style: italic;
  line-height: .88;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--cream);
}

.hb-awards__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 24px);
  max-width: 1380px;
  width: 100%;
  margin: clamp(11px, 2.4vh, 34px) auto 0;
}

.hb-award {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.7vh, 16px);
  padding: clamp(12px, 2.2vh, 26px) clamp(12px, 1.2vw, 22px) clamp(11px, 2vh, 22px);
  background: #fff;
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(20, 20, 20, .08);
  transition: transform .35s var(--ease), box-shadow .35s;
}

.hb-award:hover {
  transform: translateY(-12px) rotate(-1.5deg);
  box-shadow: 0 28px 56px rgba(20, 20, 20, .14);
}

.hb-award__num {
  position: absolute;
  left: clamp(16px, 1.4vw, 24px);
  top: clamp(-13px, -1vw, -9px);
  width: 32px;
  height: 32px;
  background: var(--tint);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
}

.hb-award__art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: min(6vw, 9.5vh);
}

.hb-award__art img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.hb-award__name {
  max-width: 250px;
  /* `min()` with no floor bottomed out at 9.4px between 1100px and 1400px —
     the one band with no breakpoint under it to catch the fall. */
  font-size: max(12px, min(.85vw, 1.8vh));
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Stockists
   -------------------------------------------------------------------------- */
.hb-stockists {
  position: relative;
  width: 100%;
  padding: clamp(56px, 9vh, 118px) clamp(20px, 3.2vw, 52px) clamp(60px, 10vh, 130px);
  background: var(--cream);
  overflow: hidden;
}

.hb-stockists__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 52px);
}

.hb-stockists__title {
  margin: 0;
  font-size: clamp(38px, 5.6vw, 84px);
  font-weight: 800;
  font-style: italic;
  line-height: .88;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.hb-stockists__sub {
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(20px, 1.8vw, 29px);
  line-height: 1.24;
  color: var(--ink-2);
}

.hb-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(12px, 1.4vw, 24px);
}

.hb-channel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(12px, 1.2vw, 18px);
  background: #fff;
  border-radius: 26px;
  color: var(--ink);
  box-shadow: 0 16px 38px rgba(20, 20, 20, .08);
  transition: transform .35s var(--ease), box-shadow .35s;
}

.hb-channel:hover {
  transform: translateY(-10px);
  box-shadow: 0 26px 54px rgba(20, 20, 20, .14);
  color: var(--ink);
}

.hb-channel img {
  width: 100%;
  height: auto;
  aspect-ratio: 868 / 1086;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}

.hb-channel span {
  padding: 0 6px 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
  text-wrap: pretty;
}

.hb-reps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
  align-items: stretch;
}

.hb-rep {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
  padding: clamp(22px, 2.2vw, 34px);
  background: var(--red);
  border-radius: 26px;
}

.hb-rep__glyph {
  position: absolute;
  right: -14px;
  bottom: -22px;
  width: clamp(120px, 11vw, 164px);
  height: auto;
  fill: rgba(251, 245, 226, .13);
  pointer-events: none;
}

.hb-rep__regions {
  position: relative;
  z-index: 2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream);
  text-wrap: pretty;
}

.hb-rep__who {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}

.hb-rep__name {
  font-size: clamp(22px, 1.9vw, 30px);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.03em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--cream);
}

/* The page's conversion target. It was yellow at 3.4:1 and 21px tall — the
   smallest, lowest-contrast thing on the page was the thing to tap. Cream
   carries it now, underlined so it still reads as a link without the colour,
   and padded to a real target. */
.hb-rep__tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(19px, 1.6vw, 26px);
  line-height: 1.1;
  color: var(--cream);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .16em;
  text-decoration-color: rgba(251, 245, 226, .45);
  transition: color .25s, text-decoration-color .25s;
}

.hb-rep__tel:hover {
  color: #fff;
  text-decoration-color: #fff;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.hb-footer {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: clamp(76px, 13vh, 150px) clamp(20px, 3.2vw, 52px) 0;
  background: var(--red);
  overflow: hidden;
}

.hb-footer__watermark {
  position: absolute;
  right: clamp(-10px, 1vw, 32px);
  top: 42%;
  width: min(34vw, 420px);
  height: auto;
  transform: translateY(-50%);
  opacity: .1;
  pointer-events: none;
  z-index: 0;
}

.hb-footer__cols {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.5fr) auto;
  gap: clamp(28px, 4vw, 80px);
  align-items: start;
}

.hb-footer__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hb-footer__col--socials { justify-self: end; }

.hb-footer__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);
}

.hb-footer__contact {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: clamp(17px, 1.5vw, 23px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--cream);
}

/* The secondary line was muted by alpha, which cost it 1.1 points of contrast
   to say something weight says for free. */
.hb-footer__contact--muted { font-weight: 600; }
.hb-footer__contact:hover  { color: #fff; }

.hb-footer address {
  max-width: 52ch;
  font-style: normal;
  font-size: clamp(13.5px, 1.05vw, 16px);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: .005em;
  color: var(--cream);
  text-wrap: pretty;
}

.hb-socials { display: flex; gap: 12px; }

.hb-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid rgba(251, 245, 226, .55);
  border-radius: 50%;
  color: var(--cream);
  transition: background .25s, color .25s, border-color .25s;
}

.hb-socials a:hover {
  background: var(--cream);
  color: var(--red);
  border-color: var(--cream);
}

.hb-socials svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

.hb-footer__legal {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  max-width: 1500px;
  margin: auto auto 0;
  padding-top: clamp(20px, 4vh, 54px);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cream);
}

.hb-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 0;
  color: var(--cream);
}

.hb-footer__legal a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Provenance notice — the last thing on the page, sitting under the footer as
   a plinth. Ink rather than red or cream: it belongs to no section, and
   reading as a colophon rather than as part of the page is the honest signal.
   In flow, not fixed — it has no business following the reader around.
   -------------------------------------------------------------------------- */
.hb-notice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px clamp(44px, 9vw, 58px);
  background: var(--ink);
  border-top: 1px solid rgba(251, 245, 226, .16);
}

.hb-notice[data-closed] { display: none; }

/* The side padding is symmetric so the centring stays true, and wide enough on
   the right that the close button never sits on top of the text. */
.hb-notice__text {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 1100px;
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cream);
  text-align: center;
  text-wrap: pretty;
}

.hb-notice__text a {
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: .16em;
}

.hb-notice__text a:hover { color: #fff; }

/* Taken out of flow so the bar's height is set by its one line of type and
   nothing else — a 44px button in the row would have been the whole bar. 30px
   still clears the 24px target floor comfortably. */
.hb-notice__close {
  position: absolute;
  right: clamp(7px, 2vw, 16px);
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--cream);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .25s, color .25s;
}

.hb-notice__close:hover {
  background: rgba(251, 245, 226, .14);
  color: #fff;
}

.hb-notice__close svg { width: 14px; height: 14px; display: block; }

.hb-footer__wordmark {
  position: relative;
  z-index: 1;
  flex: none;
  margin-top: clamp(10px, 1.8vh, 24px);
  padding: 0 clamp(10px, 1.6vw, 26px) clamp(6px, 1vh, 14px);
}

.hb-footer__wordmark div {
  display: flex;
  justify-content: center;
  font-size: min(15.6vw, 26vh);
  font-weight: 800;
  font-style: italic;
  line-height: 1.04;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Responsive
   The prototype carried no breakpoints — it is a desktop comp built entirely
   on vw/vh clamps. Everything below is an addition so the page survives a
   phone; the desktop rendering above 1100px is untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hb-flavours { height: auto; padding-bottom: clamp(40px, 8vh, 80px); }

  .hb-flavours__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(10px, 2vh, 26px) clamp(4px, 1vw, 20px);
    padding: 0 6vw;
  }

  .hb-flavours__title { font-size: clamp(34px, 8vw, 74px); }
  .hb-flavours__sub   { font-size: clamp(16px, 2.6vw, 22px); }

  .hb-press__grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-press__title { font-size: clamp(30px, 7vw, 60px); }
  .hb-press__sub   { font-size: clamp(15px, 2.4vw, 20px); }
  .hb-clip blockquote { font-size: clamp(19px, 3vw, 26px); }

  .hb-awards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-awards__title { font-size: clamp(24px, 5vw, 40px); }
  .hb-awards__sub   { font-size: clamp(14px, 2.2vw, 18px); }
  .hb-award__art  { height: clamp(58px, 12vw, 92px); }
  .hb-award__name { font-size: clamp(12px, 1.6vw, 14px); }

  .hb-red { min-height: 0; }
}

/* The road only reads as a road when it is wide. Below this it becomes a
   plain stack with the chapter photos always visible. */
@media (max-width: 900px) {
  .hb-road > svg,
  .hb-road__node { display: none; }

  .hb-road {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 5vh, 48px);
  }

  .hb-roadwrap { margin-bottom: clamp(30px, 5vh, 56px); }

  .hb-chapter {
    position: static;
    transform: translateY(calc((1 - var(--enter, 1)) * 24px));
    width: 100%;
    padding-top: 0;
  }

  .hb-chapter__shot {
    position: static;
    width: 100%;
    height: clamp(150px, 34vw, 230px);
    margin-bottom: 14px;
    opacity: 1;
    transform: none;
  }

  .hb-chapter:hover .hb-chapter__shot,
  .hb-chapter:focus-within .hb-chapter__shot { transform: none; }

  .hb-chapter__title { font-size: clamp(20px, 4vw, 26px); }
  .hb-chapter__body  { font-size: clamp(14px, 2.2vw, 16px); }
  .hb-chapter__num   { font-size: clamp(22px, 4.4vw, 29px); }

  .hb-claim__facts {
    padding-left: 0;
    padding-top: clamp(16px, 3vh, 24px);
    border-left: 0;
    border-top: 2px solid rgba(251, 245, 226, .45);
  }

  .hb-claim__headline { padding-right: 0; padding-bottom: clamp(16px, 3vh, 24px); }

  .hb-footer__cols { grid-template-columns: 1fr; gap: clamp(26px, 5vh, 40px); }
  .hb-footer__col--socials { justify-self: start; }

  /* The footer stays a full screen of its own once stacked. */
  .hb-footer { min-height: 100svh; }

  /* Bigger mark, anchored top-right with a fifth of the footer above it,
     instead of the desktop treatment that centres it on the middle. */
  .hb-footer__watermark {
    top: 20%;
    right: -8%;
    width: min(80vw, 460px);
    transform: none;
    opacity: .12;
  }
}

@media (max-width: 760px) {
  /* The bar collapses to logo + hamburger; the mega panel becomes the menu.
     The word stays in the DOM, clipped rather than removed, so the button keeps
     an accessible name once its label is no longer painted. */
  .hb-menu a { display: none; }
  .hb-menu__caret { display: none; }
  .hb-burger { display: block; }

  .hb-menu__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .hb-menu__trigger {
    justify-content: flex-end;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
  }

  /* The panel carries the whole menu here, so it is sized to fit a phone
     outright rather than scroll inside a fixed overlay — a nested scroller
     inside an overlay is awkward on touch and invisible until you try it.
     Flavours become a 3x3 block with the name under the bottle, which echoes
     the flavour section and costs two fewer rows than the 2-column list. */
  .hb-mega {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }

  .hb-mega__panel { padding-left: 0; border-left: 0; gap: 14px; }
  .hb-mega__link--compact { display: flex; }

  /* Five stacked full-width rows ate half the panel to carry five short words.
     Six columns so the row of three and the row of two both come out flush:
     three spans of two, then two spans of three. */
  .hb-mega__nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }

  .hb-mega__link {
    grid-column: span 2;
    justify-content: center;
    padding: 11px 8px;
    border-radius: 14px;
    font-size: 10.5px;
    letter-spacing: .06em;
    line-height: 1.2;
    text-align: center;
  }

  .hb-mega__link--compact { grid-column: span 3; }

  /* The tiles set their own width now, so a translate on hover shifts them out
     of their column. Lift instead, which is what the flavour tiles do. */
  .hb-mega__link:hover { transform: translateY(-2px); }

  .hb-mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }

  .hb-mega__flavour {
    flex-direction: column;
    gap: 6px;
    padding: 8px 4px;
    text-align: center;
  }

  .hb-mega__flavour:hover { transform: translateY(-3px); }

  .hb-mega__name { font-size: 11px; letter-spacing: .02em; }

  .hb-mega__cta { gap: 10px; padding: 12px 14px; }
  .hb-mega__cta span { font-size: 15px; }
  .hb-mega__cta a { padding: 10px 14px; font-size: 10px; }

  /* Below this width the <picture> swaps to the 3:4 crop, so the hero follows
     that aspect exactly: 133.33vw means cover fits it with zero cropping at any
     phone width, and what the photo contains is what shows. */
  /* A 90svh hero was tried and reverted (2026-08-01). The photo cannot fill
     that box without cropping the hands, so the extra height was given to a
     flat sky gradient behind the headline — but the photo's sky is a
     photographed one with cloud in it, and no flat colour meets that without a
     visible band. The aspect lock below is the constraint, not a default. */
  .hb-hero {
    height: min(100svh, 133.33vw);
    min-height: 340px;
  }

  .hb-hero__photo { object-position: center; }

  /* At 390px the ribbon's 1440-unit viewBox renders its text at ~7px. Oversizing
     the SVG past the viewport keeps the band legible; the arc just reads
     flatter, which is fine across a narrow frame. */
  .hb-ribbon svg {
    width: 165%;
    margin-left: -32.5%;
  }

  /* With the shorter hero the whole photo height is in frame, which puts the
     bottle labels at roughly 44%-70% down. The title has to land in the strip of
     sky above them rather than across them. */
  .hb-hero__line1 { font-size: 13.5vw; }
  .hb-hero__line2 { font-size: 14.5vw; }
  .hb-hero__title {
    padding: 0 clamp(14px, 5vw, 28px);
    margin-top: clamp(56px, 7.5vh, 72px);
  }

  .hb-flavours__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hb-bottle img { width: 128%; margin: 0 -14%; }
  .hb-bottle__name { font-size: 11px; }

  .hb-story__ghost { font-size: 21vw; }
  .hb-story__body  { font-size: clamp(18px, 4.4vw, 22px); }

  .hb-press__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hb-clip { transform: none; }
  .hb-clip:hover { transform: translateY(-8px); }

  .hb-retailers { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hb-footer__wordmark div { font-size: 19vw; }
  .hb-footer__legal { font-size: 11.5px; }
}

@media (max-width: 520px) {
  /* Nine flavours stay a 3x3 block — the point of the section is the range. */
  .hb-bottle__name { font-size: 10px; letter-spacing: .02em; }
  .hb-awards__grid { grid-template-columns: minmax(0, 1fr); }
  .hb-award__name { font-size: 13px; }
  .hb-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-press__quotemark { display: none; }
}

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

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .hb-hero__title { animation: none; }
  .hb-marquee__track { animation: none; }
  .hb-fizzword b { display: none; }
}