:root {
  color-scheme: dark;
  --ink-950: #030405;
  --ink-900: #07090c;
  --ink-850: #0b0e12;
  --ink-800: #10141a;
  --ink-700: #171c23;
  --paper: #f5f4ef;
  --white: #fff;
  --text: #f6f7f8;
  --text-soft: #c4c9d0;
  --text-dim: #8c949f;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --ember: #ef913c;
  --ember-light: #ffad62;
  --ember-dark: #c96c1f;
  --blue: #2e9ff5;
  --blue-light: #70c8ff;
  --green: #72c84a;
  --purple: #9654df;
  --danger: #ff756d;
  --success: #82d7a4;
  --container: 1420px;
  --container-narrow: 1040px;
  --gutter: clamp(20px, 4vw, 64px);
  --section-space: clamp(80px, 8vw, 132px);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 30px;
  --radius-pill: 999px;
  --shadow-deep: 0 34px 90px rgba(0, 0, 0, 0.54);
  --font-sans:
    Inter, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display:
    "Arial Narrow", "Helvetica Neue", Helvetica, Arial, ui-sans-serif,
    system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-height: 84px;
}

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

/* Anchor jumps are deliberately instant: a long CSS smooth scroll is canceled
   by any concurrent scroll write (smooth-scroll extensions, mouse-driver
   smoothing), stranding the viewport partway. Instant jumps are atomic and
   still honor the [id] scroll-margin-top offset below. */
html {
  min-width: 320px;
  background: var(--ink-950);
  color: var(--text);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Anchor jumps must land below the fixed header (id selectors may override with larger offsets) */
[id] {
  scroll-margin-top: calc(var(--header-height) + 12px);
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 90% 18%, rgba(28, 103, 158, 0.08), transparent 31rem),
    var(--ink-950);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.55;
}

body.nav-open,
body.age-gate-open {
  overflow: hidden;
}

.js[data-age-gate-state] .site-shell {
  transition: filter 320ms ease;
}

.js[data-age-gate-state="pending"] .site-shell,
.no-js .site-shell {
  visibility: hidden;
}

.js[data-age-gate-state="required"] .site-shell {
  visibility: visible;
  filter: blur(10px);
}

.js[data-age-gate-state="verified"] .site-shell {
  visibility: visible;
  filter: none;
}

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

/* [hidden] must always beat component display rules (grid/flex), or hidden
   elements like the inquiry form's spam honeypot render visibly
   (handling plans, Section 1). */
[hidden] {
  display: none !important;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

p,
h1,
h2,
h3,
h4,
ul,
ol,
dl,
dd,
figure {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

::selection {
  background: rgba(239, 145, 60, 0.95);
  color: var(--ink-950);
}

:focus-visible {
  outline: 2px solid var(--ember-light);
  outline-offset: 4px;
}

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

.skip-link {
  position: fixed;
  z-index: 10000;
  top: 14px;
  left: 14px;
  padding: 11px 16px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink-950);
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

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

.section {
  position: relative;
  padding-block: var(--section-space);
}

.section--tight {
  padding-block: clamp(56px, 6vw, 88px);
}

.section--line {
  border-top: 1px solid var(--line);
}

.section--paper {
  background: var(--paper);
  color: #15171a;
}

.section--slate {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.024), transparent 38%),
    var(--ink-850);
}

.section--blue {
  background:
    radial-gradient(circle at 77% 38%, rgba(46, 159, 245, 0.18), transparent 31rem),
    linear-gradient(180deg, #07111a, var(--ink-950));
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(280px, 0.55fr);
  gap: clamp(32px, 7vw, 110px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.section-heading--stack {
  display: block;
  max-width: 850px;
}

.section-heading--stack .section-copy {
  margin-top: 24px;
}

.section-heading--lineup {
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.55fr);
}

.section-heading--lineup .section-title {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(2.55rem, 4.6vw, 5.2rem);
}

.lineup-family-phrase {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  white-space: nowrap;
}

.lineup-family-word {
  --selector-color: #5a9be8;
  color: var(--selector-color);
  font-weight: 800;
}

.lineup-family-word[data-family="green"] {
  --selector-color: var(--green);
}

.lineup-family-word[data-family="purple"] {
  --selector-color: color-mix(in srgb, var(--purple) 78%, white);
}

.lineup-family-selector {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 390px);
  margin-top: 18px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink-850) 88%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.lineup-family-option {
  --selector-color: var(--text-soft);
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.lineup-family-option[data-family="blue"] {
  --selector-color: #5a9be8;
}

.lineup-family-option[data-family="green"] {
  --selector-color: var(--green);
}

.lineup-family-option[data-family="purple"] {
  --selector-color: color-mix(in srgb, var(--purple) 78%, white);
}

.lineup-family-option:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
}

.lineup-family-option:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--text-soft) 68%, transparent);
  outline-offset: 2px;
}

.lineup-family-option[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--selector-color) 44%, var(--line));
  background: color-mix(in srgb, var(--selector-color) 12%, var(--ink-800));
  color: var(--text);
}

.lineup-family-swatch {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--selector-color);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

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

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--blue-light);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  line-height: 1.2;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 28px;
  height: 1px;
  background: currentColor;
  content: "";
}

.eyebrow--ember {
  color: var(--ember-light);
}

.display {
  max-width: 13ch;
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.5vw, 7.4rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.92;
}

.section-title {
  max-width: 15ch;
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: clamp(2.55rem, 5vw, 5.8rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.96;
  text-wrap: balance;
}

.section-copy,
.lede {
  max-width: 650px;
  margin-bottom: 0;
  color: var(--text-soft);
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  line-height: 1.65;
}

.section--paper .section-copy,
.section--paper .lede {
  color: #555b63;
}

.section--paper .eyebrow {
  color: #146a9f;
}

.microcopy {
  color: var(--text-dim);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  line-height: 1.55;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  align-items: center;
}

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 28px;
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: var(--radius-sm);
  background: var(--ember);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.35);
  color: #111214;
  cursor: pointer;
  font-size: 0.94rem;
  font-weight: 650;
  letter-spacing: 0.012em;
  line-height: 1;
  text-decoration: none;
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.button:hover,
.button:focus-visible {
  border-color: rgba(0, 0, 0, 0.32);
  background: var(--ember-light);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 6px 20px rgba(239, 145, 60, 0.18);
}

.button--small {
  min-height: 43px;
  padding-inline: 21px;
  font-size: 0.83rem;
}

.button--ghost {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(4, 5, 7, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 1px 2px rgba(0, 0, 0, 0.3);
  color: var(--text);
  backdrop-filter: blur(8px);
}

.button--ghost:hover,
.button--ghost:focus-visible {
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 5px 18px rgba(0, 0, 0, 0.22);
}

.button--blue {
  border-color: rgba(0, 0, 0, 0.28);
  background: var(--blue);
  color: #03111a;
}

.button--blue:hover,
.button--blue:focus-visible {
  border-color: rgba(0, 0, 0, 0.32);
  background: var(--blue-light);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 6px 20px rgba(46, 159, 245, 0.18);
}

.button--text {
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--text);
  text-decoration-line: underline;
  text-decoration-color: rgba(255, 255, 255, 0.42);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.button--text:hover,
.button--text:focus-visible {
  background: none;
  box-shadow: none;
  color: var(--ember-light);
  text-decoration-color: currentColor;
}

.button:active {
  border-color: rgba(0, 0, 0, 0.34);
  background: var(--ember-dark);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.32);
}

.button--ghost:active {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.28);
}

.button--blue:active {
  border-color: rgba(0, 0, 0, 0.34);
  background: color-mix(in srgb, var(--blue) 76%, black);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.32);
}

.button--text:active {
  border-color: transparent;
  background: none;
  box-shadow: none;
  color: var(--ember-dark);
}

.button[aria-disabled="true"],
.button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  box-shadow: none;
}

.proof-chip {
  position: fixed;
  z-index: 850;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  background: rgba(7, 9, 12, 0.78);
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.proof-chip::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 12px var(--ember);
  content: "";
}

/* Header */

.site-header {
  position: fixed;
  z-index: 700;
  top: 0;
  right: 0;
  left: 0;
  color: var(--white);
  transition:
    background 220ms var(--ease),
    box-shadow 220ms var(--ease);
}

.site-header.is-scrolled,
body:not(.page--home) .site-header {
  background: rgba(3, 4, 5, 0.86);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.site-header__inner {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  width: min(calc(100% - (2 * var(--gutter))), var(--container));
  min-height: var(--header-height);
  margin-inline: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.is-scrolled .site-header__inner,
body:not(.page--home) .site-header__inner {
  border-bottom-color: transparent;
}

.site-header__brand {
  display: inline-flex;
  width: min(100%, 184px);
  align-items: center;
  text-decoration: none;
}

.site-header__brand img {
  width: 100%;
  height: auto;
}

.site-header__nav,
.site-header__links {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2vw, 32px);
  align-items: center;
}

.site-header__link {
  position: relative;
  display: inline-flex;
  min-height: var(--header-height);
  align-items: center;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.site-header__link::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--ember);
  content: "";
  opacity: 0;
  transform: scaleX(0.3);
  transition:
    opacity 180ms ease,
    transform 180ms var(--ease);
}

.site-header__link:hover,
.site-header__link:focus-visible,
.site-header__link.is-current {
  color: var(--white);
}

.site-header__link:hover::after,
.site-header__link:focus-visible::after,
.site-header__link.is-current::after {
  opacity: 1;
  transform: scaleX(1);
}

.site-header__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.site-header__nav {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 2vw, 32px);
  align-items: center;
  min-width: 0;
}

.site-header__links {
  flex: 1 1 auto;
  justify-self: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__links li {
  display: flex;
}

.site-header__cta {
  flex: 0 0 auto;
}

.site-header__actions {
  justify-self: end;
}

.site-header__link--carry {
  min-height: var(--header-height);
}

.button--secondary {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(4, 5, 7, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 1px 2px rgba(0, 0, 0, 0.3);
  color: var(--text);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 5px 18px rgba(0, 0, 0, 0.22);
}

.button--secondary:active {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.28);
}

.site-header__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.site-header__toggle span {
  display: block;
  width: 100%;
  height: 1px;
  margin-block: 5px;
  background: var(--white);
  transition:
    transform 180ms ease,
    opacity 180ms ease;
}

.nav-open .site-header__toggle span:first-child {
  transform: translateY(3px) rotate(45deg);
}

.nav-open .site-header__toggle span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-open .site-header__toggle span:last-child {
  transform: translateY(-3px) rotate(-45deg);
}

/* Home hero */

.home-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(740px, 54vw, 920px);
  overflow: hidden;
  background: var(--ink-950);
}

.home-hero__art,
.home-hero__art img,
.home-hero__wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-hero__art {
  z-index: -5;
  background: var(--ink-950);
}

.home-hero__art img {
  object-fit: contain;
  object-position: right center;
}

.home-hero__wash {
  z-index: -4;
  background:
    linear-gradient(
      90deg,
      rgba(3, 4, 6, 0.42) 0%,
      rgba(3, 4, 6, 0.18) 38%,
      rgba(3, 4, 6, 0.02) 60%,
      transparent 76%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 30%, rgba(0, 0, 0, 0.08));
}

.home-hero__content {
  position: relative;
  z-index: 2;
  width: min(calc(100% - (2 * var(--gutter))), var(--container));
  margin-inline: auto;
  padding-top: calc(var(--header-height) + clamp(68px, 6vh, 92px));
}

.home-hero__lockup {
  width: clamp(430px, 39vw, 610px);
  margin: 0;
}

.home-hero__lockup img {
  width: 100%;
  height: auto;
}

.home-hero__intro {
  max-width: 34ch;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1.02rem, 1.35vw, 1.28rem);
  line-height: 1.6;
}

.home-hero__actions {
  margin-top: 23px;
}

@media (min-width: 1200px) and (min-height: 700px) {
  .home-hero {
    min-height: clamp(760px, min(54vw, calc(100svh - 160px)), 1280px);
  }
}

/* Homepage Liquid Dabz drop */

.liquid-drop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(720px, 54vw, 900px);
  background: #020305;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.liquid-drop__backdrop,
.liquid-drop__backdrop img,
.liquid-drop__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.liquid-drop__backdrop {
  z-index: -4;
}

.liquid-drop__backdrop img {
  object-fit: cover;
  object-position: center;
}

.liquid-drop__veil {
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(1, 3, 5, 0.91) 0%, rgba(1, 3, 5, 0.78) 35%, rgba(1, 3, 5, 0.18) 62%, rgba(1, 3, 5, 0.06) 100%),
    linear-gradient(180deg, rgba(1, 3, 5, 0.12), transparent 58%, rgba(1, 3, 5, 0.46));
}

.liquid-drop__inner {
  width: min(calc(100% - (2 * clamp(42px, 6vw, 94px))), 1470px);
  min-height: inherit;
  display: grid;
  grid-template-columns: minmax(470px, 1.05fr) minmax(480px, 0.95fr);
  gap: clamp(20px, 2.5vw, 46px);
}

.liquid-drop__copy {
  display: flex;
  z-index: 3;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-block: clamp(84px, 8vw, 126px) clamp(72px, 7vw, 112px);
}

.liquid-drop__title {
  max-width: none;
  margin: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(4.2rem, 6.25vw, 6rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.86;
  text-wrap: balance;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.46);
}

.liquid-drop__title span {
  display: block;
  white-space: nowrap;
}

.liquid-drop__summary {
  max-width: 55ch;
  margin: clamp(28px, 2.6vw, 40px) 0 0;
  color: rgba(244, 248, 252, 0.78);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.62;
}

.liquid-drop__families {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  margin: clamp(20px, 2vw, 28px) 0 0;
  padding: 0;
  list-style: none;
}

.liquid-drop__family {
  display: grid;
  grid-template-columns: 9px auto;
  gap: 8px;
  align-items: center;
  color: rgba(244, 248, 252, 0.88);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.1;
  text-transform: uppercase;
}

.liquid-drop__family + .liquid-drop__family {
  padding-left: clamp(16px, 2vw, 28px);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.liquid-drop__family small {
  display: block;
  margin-top: 4px;
  color: rgba(244, 248, 252, 0.72);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.1em;
}

.liquid-drop__family-dot {
  width: 9px;
  height: 24px;
  background: var(--blue);
  box-shadow: 0 4px 12px rgba(46, 159, 245, 0.28);
}

.liquid-drop__family--green .liquid-drop__family-dot {
  background: var(--green);
  box-shadow: 0 4px 12px rgba(30, 193, 106, 0.24);
}

.liquid-drop__family--purple .liquid-drop__family-dot {
  background: var(--purple);
  box-shadow: 0 4px 12px rgba(164, 82, 255, 0.24);
}

.liquid-drop__cta {
  min-height: 58px;
  margin-top: clamp(30px, 3vw, 44px);
  padding-inline: 30px;
}

.liquid-drop__stage {
  position: relative;
  z-index: 1;
  align-self: stretch;
  min-width: 0;
  min-height: inherit;
  margin: 0;
  isolation: isolate;
  pointer-events: none;
}

/* Product lineup */

.lineup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.lineup-card {
  position: relative;
  isolation: isolate;
  min-height: clamp(500px, 42vw, 650px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--ink-850);
  text-decoration: none;
}

.lineup-card::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 3, 4, 0.68) 0%, transparent 28%),
    linear-gradient(180deg, transparent 44%, rgba(2, 3, 4, 0.97) 89%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.03), transparent 45%);
  content: "";
}

.lineup-card__media {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 700ms var(--ease);
}

.lineup-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    opacity 180ms ease,
    filter 260ms ease;
}

.lineup-grid[data-swapping="true"] .lineup-card__media img {
  opacity: 0.24;
  filter: saturate(0.68);
}

.lineup-card--lead {
  grid-column: 1 / -1;
  min-height: clamp(300px, 26vw, 390px);
}

.lineup-card--lead .lineup-card__media {
  background: linear-gradient(120deg, rgba(46, 159, 245, 0.12), transparent 55%);
}

.lineup-card--lead .lineup-card__media img {
  object-fit: contain;
  object-position: 58% 50%;
  padding: 22px 34px;
  transform: translateY(16px) scale(2.7);
}

.lineup-card--lead .lineup-card__title {
  font-size: clamp(2.4rem, 4vw, 4.2rem);
}

.lineup-card--resin .lineup-card__media,
.lineup-card--float .lineup-card__media,
.lineup-card--photo .lineup-card__media {
  background: radial-gradient(ellipse 58% 52% at 50% 38%, rgba(46, 159, 245, 0.17), transparent 72%);
}

.lineup-card--photo .lineup-card__media {
  background: radial-gradient(ellipse 58% 52% at 50% 38%, rgba(145, 72, 255, 0.17), transparent 72%);
}

.lineup-card--resin .lineup-card__media img,
.lineup-card--float .lineup-card__media img,
.lineup-card--photo .lineup-card__media img {
  object-fit: contain;
  object-position: center 36%;
  padding: 52px 32px 150px;
  filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.34));
}

.lineup-card--resin .lineup-card__media img {
  transform: scale(1.55);
  transform-origin: center 36%;
}

.lineup-card--photo .lineup-card__media img {
  transform: scale(1.15);
  transform-origin: center 36%;
}

.lineup-card--float .lineup-card__media img {
  padding: 0;
  object-fit: cover;
  object-position: center;
  filter: none;
}

.lineup-card--vignette .lineup-card__media {
  background: none;
}

.lineup-card--vignette .lineup-card__media img {
  padding: 0;
  object-fit: cover;
  object-position: center;
  filter: none;
  transform: none;
}

/* The approved disposable vignette was authored with a deliberately small,
   right-weighted subject for the previous copy layout. Reframe those pixels
   so the device is centered and carries slightly more visual weight than the
   narrower 510 cartridge. */
.lineup-card--float.lineup-card--vignette .lineup-card__media img {
  transform: translate(-16%, -4%) scale(1.32);
}

/* The portrait Liquid Dabz scene is reserved for the true one-column phone
   layout. The right-shifted wide composition supports every wider grid. */
@media (min-width: 1081px) {
  .lineup-card--lead.lineup-card--vignette .lineup-card__media img {
    transform: none;
  }

  .lineup-card--lead .lineup-card__body p {
    max-width: 34ch;
  }
}

@media (min-width: 981px) {
  .lineup-card--float .lineup-card__media img {
    object-position: center;
  }

  .lineup-card--photo .lineup-card__media img {
    object-position: left center;
  }
}

.lineup-card:hover .lineup-card__media,
.lineup-card:focus-visible .lineup-card__media {
  transform: scale(1.025);
}

.lineup-card__title {
  position: absolute;
  z-index: 2;
  top: 25px;
  right: 28px;
  left: 28px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.6vw, 2.65rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-wrap: balance;
}

.lineup-card__body {
  position: absolute;
  right: 28px;
  bottom: 27px;
  left: 28px;
}

.lineup-card__body p {
  max-width: 34ch;
  margin-bottom: 19px;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(0.94rem, 1vw, 1rem);
}

.lineup-card__new {
  color: var(--ember-light);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.lineup-card__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ember-light);
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lineup-card__link::after {
  content: "→";
  transition: transform 180ms ease;
}

.lineup-card:hover .lineup-card__link::after,
.lineup-card:focus-visible .lineup-card__link::after {
  transform: translateX(5px);
}

/* Product stations */

.high-station {
  --family-color: var(--blue);
  --stage-color: var(--family-color);
  --station-halo: 0.68;
  --station-pool: 0.92;
  --station-product: 1;
  --caption-line: 1;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  min-width: 0;
}

.high-station--green {
  --family-color: var(--green);
}

.high-station--purple {
  --family-color: var(--purple);
}

.high-station__stand {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

.high-station__stand {
  align-items: flex-end;
  gap: 0;
}

.high-station__stand::before {
  position: absolute;
  bottom: -6%;
  left: 50%;
  width: min(118%, 380px);
  aspect-ratio: 1 / 0.82;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--stage-color) 36%, transparent),
    transparent 70%
  );
  content: "";
  filter: blur(24px);
  opacity: var(--station-halo);
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 420ms var(--ease);
}

.high-station__stand::after {
  position: absolute;
  bottom: -16px;
  left: 50%;
  width: min(88%, 310px);
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(
    50% 50% at 50% 50%,
    color-mix(in srgb, var(--stage-color) 78%, transparent),
    color-mix(in srgb, var(--stage-color) 30%, transparent) 55%,
    transparent 78%
  );
  content: "";
  filter: blur(12px);
  opacity: var(--station-pool);
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 420ms var(--ease);
}

.high-station__product {
  position: relative;
  width: auto;
  filter:
    drop-shadow(0 26px 22px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 18px color-mix(in srgb, var(--stage-color) 22%, transparent))
    brightness(var(--station-product));
  transition: filter 420ms var(--ease);
}

.high-station__product--liquid {
  z-index: 2;
  height: clamp(230px, 24vw, 350px);
}

.high-station__color {
  margin-top: 26px;
  color: color-mix(in srgb, var(--family-color) 82%, white);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.17em;
  line-height: 1.2;
  text-transform: uppercase;
  transition: color 420ms var(--ease);
}

.high-station__family {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: 7px;
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.7vw, 2.9rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.94;
  transition: color 420ms var(--ease);
}

.high-station__family::before,
.high-station__family::after {
  width: clamp(22px, 3.4vw, 54px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--stage-color) 75%, transparent)
  );
  content: "";
  opacity: var(--caption-line);
  transition: opacity 420ms var(--ease);
}

.high-station__family::after {
  background: linear-gradient(
    270deg,
    transparent,
    color-mix(in srgb, var(--stage-color) 75%, transparent)
  );
}

/* Liquid Dabz family row (reuses high-station staging outside the selector) */

#liquid-families {
  scroll-margin-top: calc(var(--header-height) + 12px);
}

.ld-families {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 44px);
  margin-top: clamp(38px, 4.5vw, 64px);
}

.ld-families .high-station__product--liquid {
  height: clamp(220px, 22vw, 320px);
}

/* Brand process */

.brand-story {
  display: grid;
  grid-template-columns: minmax(420px, 1.1fr) minmax(320px, 0.9fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
}

.brand-story__media {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #1b222a;
}

.brand-story__media::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 55%, rgba(2, 3, 4, 0.82)),
    linear-gradient(120deg, rgba(46, 159, 245, 0.1), transparent 42%);
  content: "";
}

.brand-story__media img {
  width: 100%;
  height: 100%;
  min-height: 620px;
  object-fit: cover;
}

.brand-story__caption {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 22px;
  left: 24px;
  color: var(--text-soft);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.brand-story__copy .section-title {
  margin-bottom: 28px;
}

.brand-story__copy .section-copy {
  margin-bottom: 34px;
}

.brand-points {
  display: grid;
  gap: 0;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}

.brand-points li {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 18px;
  padding-block: 22px;
  border-top: 1px solid var(--line);
}

.brand-points strong {
  color: var(--ember-light);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.brand-points span {
  color: var(--text-soft);
}

/* Find and Carry */

.find-fire {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(94px, 10vw, 160px);
  background:
    radial-gradient(circle at 83% 44%, rgba(239, 145, 60, 0.2), transparent 25rem),
    radial-gradient(circle at 67% 40%, rgba(46, 159, 245, 0.16), transparent 34rem),
    var(--ink-900);
}

.find-fire::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(4, 5, 7, 0.98) 15%, rgba(4, 5, 7, 0.62) 58%, transparent),
    repeating-linear-gradient(
      120deg,
      transparent 0,
      transparent 46px,
      rgba(255, 255, 255, 0.012) 47px
    );
  content: "";
}

.find-fire__grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.84fr) minmax(420px, 1.16fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: end;
}

.find-fire__copy .section-title {
  margin-bottom: 26px;
}

.find-fire__copy .section-copy {
  margin-bottom: 34px;
}

.find-fire__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.audience-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(12, 15, 19, 0.66);
  backdrop-filter: blur(14px);
}

/* .find-fire__cards is side-by-side above 780px (it collapses to a single
   column at max-width: 780px); only reserve the fixed height there so
   single-column mobile cards can size to their own content. */
@media (min-width: 781px) {
  .audience-card {
    min-height: 300px;
  }
}

a.audience-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

a.audience-card:hover,
a.audience-card:focus-visible {
  border-color: var(--ember-light);
  transform: translateY(-3px);
}

.audience-card__number {
  display: block;
  margin-bottom: 90px;
  color: var(--ember-light);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.audience-card h3 {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.7vw, 2.7rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.audience-card p {
  margin-bottom: 0;
  color: var(--text-dim);
  font-size: 0.86rem;
}

.audience-card__cue {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  color: var(--ember-light);
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 180ms ease;
}

a.audience-card:hover .audience-card__cue,
a.audience-card:focus-visible .audience-card__cue {
  transform: translateX(5px);
}

.find-fire__retailers {
  margin-top: 34px;
}

.retailer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
}

/* 4 columns keeps 8 retailer cards forming two complete rows instead of
   the 5-column auto-fit leaving 2 orphans on the final row. Must follow the
   base rule: equal specificity, source order decides. */
@media (min-width: 981px) {
  .retailer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.retailer-card {
  display: grid;
  grid-template-rows: minmax(3rem, auto) auto auto;
  align-content: start;
  gap: 6px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(12, 15, 19, 0.55);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.retailer-card:hover,
.retailer-card:focus-visible {
  border-color: var(--ember-light);
  transform: translateY(-3px);
}

.retailer-card__name {
  font-size: 0.98rem;
  font-weight: 700;
}

.retailer-card__meta {
  color: var(--ember-light);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.retailer-card__cities {
  color: var(--text-dim);
  font-size: 0.8rem;
}

.carry-band {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(46, 159, 245, 0.08), transparent 40%),
    var(--ink-850);
}

.carry-band__inner {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  min-height: 210px;
}

.carry-band__mark {
  width: 56px;
  opacity: 0.88;
}

.carry-band h2 {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 4.4rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1;
}

.carry-band p {
  margin-bottom: 0;
  color: var(--text-dim);
}

/* Product page */

.product-hero {
  position: relative;
  isolation: isolate;
  min-height: min(900px, 92svh);
  overflow: hidden;
  padding-top: var(--header-height);
  background:
    radial-gradient(circle at 78% 48%, var(--page-glow, rgba(46, 159, 245, 0.17)), transparent 31rem),
    linear-gradient(120deg, #040507, #0a0e13);
}

.product-hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 3, 4, 0.95), rgba(2, 3, 4, 0.62) 48%, transparent 72%),
    repeating-linear-gradient(
      115deg,
      transparent 0,
      transparent 56px,
      rgba(255, 255, 255, 0.012) 57px
    );
  content: "";
}

.product-hero--liquid {
  --page-glow: rgba(46, 159, 245, 0.2);
}

.product-hero--resin {
  --page-glow: rgba(150, 84, 223, 0.19);
}

.product-hero--disposable {
  --page-glow: rgba(46, 159, 245, 0.14);
}

.product-hero--cart {
  --page-glow: rgba(239, 145, 60, 0.14);
}

.product-hero--vapes {
  --page-glow: rgba(46, 159, 245, 0.16);
}

.product-hero__inner {
  display: grid;
  grid-template-columns: minmax(350px, 0.82fr) minmax(480px, 1.18fr);
  gap: clamp(38px, 7vw, 110px);
  align-items: center;
  min-height: calc(min(900px, 92svh) - var(--header-height));
  padding-block: clamp(70px, 8vw, 124px);
}

.product-hero__copy {
  position: relative;
  z-index: 2;
}

.product-hero__copy .display {
  margin-bottom: 30px;
}

.product-hero__copy .lede {
  max-width: 570px;
  margin-bottom: 34px;
}

.product-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 34px;
}

.meta-pill {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text-soft);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.product-hero__visual {
  position: relative;
  min-height: clamp(520px, 49vw, 710px);
}

.product-hero__visual::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(46vw, 640px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  box-shadow:
    0 0 0 72px rgba(255, 255, 255, 0.012),
    0 0 90px var(--page-glow, rgba(46, 159, 245, 0.12));
  content: "";
  transform: translate(-50%, -50%);
}

.product-hero__image {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(100%, 760px);
  max-height: 690px;
  object-fit: contain;
  filter: drop-shadow(0 34px 30px rgba(0, 0, 0, 0.68));
  transform: translate(-50%, -50%);
}

.product-hero__image--liquid {
  width: min(115%, 900px);
  transform: translate(-48%, -50%) rotate(-17deg);
}

.product-hero__image--resin {
  width: min(90%, 660px);
}

.product-hero__image--scene {
  width: 100%;
  height: 100%;
  max-height: 710px;
  border-radius: var(--radius-md);
  object-fit: contain;
  filter: drop-shadow(0 34px 50px rgba(0, 0, 0, 0.48));
}

.product-hero__caption {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 8px;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 7px;
  background: rgba(3, 4, 5, 0.7);
  color: var(--text-soft);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
}

.vape-hero-pair {
  position: absolute;
  z-index: 2;
  inset: clamp(40px, 7vw, 80px) 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.vape-hero-pair__panel {
  /* Flex column, not grid rows: iOS Safari fails to resolve a percentage
     image height against a minmax(0, 1fr) grid track and falls back to the
     aspect-ratio height from the width/height attributes, overflowing the
     packshot over the caption. Flex sizing sets the box height directly. */
  display: flex;
  overflow: hidden;
  min-width: 0;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #f3f0ec;
  color: #17191c;
  text-decoration: none;
}

.vape-hero-pair__panel:hover,
.vape-hero-pair__panel:focus-visible {
  border-color: rgba(46, 159, 245, 0.62);
}

.vape-hero-pair__panel img {
  width: 100%;
  height: 0;
  min-height: 0;
  flex: 1 1 0;
  padding: clamp(16px, 2.5vw, 34px);
  object-fit: contain;
}

.vape-hero-pair__panel--disposable img {
  object-fit: cover;
}

.vape-hero-pair__panel span {
  padding: 16px 18px;
  border-top: 1px solid rgba(20, 22, 25, 0.13);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.feature-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink-850);
}

.feature-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-strip__item {
  min-height: 150px;
  padding: 28px;
  border-right: 1px solid var(--line);
}

.feature-strip__item:last-child {
  border-right: 0;
}

.feature-strip__index {
  display: block;
  margin-bottom: 26px;
  color: var(--blue-light);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.feature-strip__item h2,
.feature-strip__item h3 {
  margin-bottom: 6px;
  font-size: 1.08rem;
  font-weight: 700;
}

.feature-strip__item p {
  margin-bottom: 0;
  color: var(--text-dim);
  font-size: 0.82rem;
}

.format-story {
  display: grid;
  grid-template-columns: minmax(410px, 1.1fr) minmax(340px, 0.9fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
}

.format-story--reverse .format-story__media {
  order: 2;
}

.format-story__media {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 50% 48%, rgba(46, 159, 245, 0.13), transparent 20rem),
    var(--ink-850);
}

.format-story__media img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.6));
  transform: translate(-50%, -50%);
}

.format-story__media--cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.format-story__media--paper {
  background: #f3f0ec;
}

.format-story__copy .section-title {
  margin-bottom: 28px;
}

.format-story__copy .section-copy {
  margin-bottom: 34px;
}

.detail-list {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--line);
}

.detail-list > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
  padding-block: 21px;
  border-bottom: 1px solid var(--line);
}

.detail-list dt {
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.detail-list dd {
  color: var(--text-soft);
}

.variant-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.variant-card {
  position: relative;
  overflow: hidden;
  min-height: 590px;
  border-radius: var(--radius-md);
  background: #f3f0eb;
  color: #17191c;
}

.variant-card__badge {
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 22px;
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(20, 22, 25, 0.13);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.78);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.variant-card__badge::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--variant-color);
  box-shadow: 0 0 10px var(--variant-color);
  content: "";
}

.variant-card--blue {
  --variant-color: var(--blue);
}

.variant-card--green {
  --variant-color: var(--green);
}

.variant-card--purple {
  --variant-color: var(--purple);
}

.variant-card__media {
  height: 470px;
  padding: 38px 22px 0;
}

.variant-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.variant-card__media--pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding-inline: 10px;
}

.variant-card__media--pair img {
  min-width: 0;
}

.variant-card__body {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  padding-top: 18px;
  border-top: 1px solid rgba(20, 22, 25, 0.13);
}

.variant-card__body h3 {
  margin-bottom: 3px;
  font-size: 1.24rem;
}

.variant-card__body p {
  margin-bottom: 0;
  /* Darkened from #777b81 (3.74:1, AA fail at 12px on the cream card) to hold
     comfortably above 4.5:1, matching the __code treatment below. */
  color: #565f6b;
  font-size: 0.8rem;
}

.variant-card__code {
  /* Family hue darkened toward card ink so 12px text holds AA on the cream card */
  color: color-mix(in srgb, var(--variant-color) 50%, #17191c);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.cross-sell {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.cross-sell--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cross-sell a {
  position: relative;
  min-height: 250px;
  padding: 30px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background 180ms ease;
}

.cross-sell a:hover,
.cross-sell a:focus-visible {
  background: rgba(255, 255, 255, 0.035);
}

.cross-sell__index {
  display: block;
  margin-bottom: 92px;
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.cross-sell h3 {
  margin-bottom: 7px;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.7vw, 2.8rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.cross-sell p {
  margin-bottom: 0;
  color: var(--text-dim);
  font-size: 0.8rem;
}

/* Carry form */

.carry-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-height) + clamp(84px, 9vw, 144px)) 0
    clamp(78px, 8vw, 124px);
  background:
    radial-gradient(circle at 82% 22%, rgba(239, 145, 60, 0.2), transparent 28rem),
    radial-gradient(circle at 63% 54%, rgba(46, 159, 245, 0.16), transparent 38rem),
    var(--ink-950);
}

.carry-hero::after {
  position: absolute;
  right: -4vw;
  bottom: -24vw;
  width: 62vw;
  height: 62vw;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  box-shadow:
    0 0 0 90px rgba(255, 255, 255, 0.012),
    0 0 0 180px rgba(255, 255, 255, 0.008);
  content: "";
}

.carry-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(370px, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(50px, 9vw, 140px);
  align-items: end;
}

.carry-hero__copy .display {
  margin-bottom: 30px;
}

.carry-hero__copy .lede {
  margin-bottom: 34px;
}

.carry-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.carry-fact {
  min-height: 170px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(14, 18, 23, 0.65);
  backdrop-filter: blur(10px);
}

.carry-fact span {
  display: block;
  margin-bottom: 58px;
  color: var(--ember-light);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.11em;
}

.carry-fact p {
  margin-bottom: 0;
  color: var(--text-soft);
  font-size: 0.86rem;
}

.inquiry-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.44fr) minmax(520px, 1.06fr);
  gap: clamp(50px, 9vw, 140px);
  align-items: start;
}

.inquiry-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 36px);
}

.inquiry-sidebar .section-title {
  margin-bottom: 25px;
}

.inquiry-sidebar .section-copy {
  margin-bottom: 30px;
}

.proof-notice {
  padding: 17px 18px;
  border: 1px solid rgba(239, 145, 60, 0.38);
  border-radius: var(--radius-sm);
  background: rgba(239, 145, 60, 0.08);
  color: #e9c7a8;
  font-size: 0.8rem;
}

.inquiry-form {
  display: grid;
  gap: 22px;
  padding: clamp(26px, 4vw, 58px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.025), transparent 38%),
    var(--ink-850);
}

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

.form-field {
  display: grid;
  gap: 8px;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field label,
.form-legend {
  color: var(--text-soft);
  font-size: 0.77rem;
  font-weight: 750;
  letter-spacing: 0.03em;
}

.form-field .required {
  color: var(--ember-light);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 50px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(3, 4, 6, 0.74);
  color: var(--text);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.form-field textarea {
  min-height: 145px;
  resize: vertical;
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: rgba(255, 255, 255, 0.34);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(46, 159, 245, 0.14);
  outline: 0;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #646b74;
}

.form-field select {
  color-scheme: dark;
}

.checkbox-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  border: 0;
}

.checkbox {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  min-height: 48px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(3, 4, 6, 0.45);
  color: var(--text-soft);
  cursor: pointer;
  font-size: 0.78rem;
}

.checkbox input {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--ember);
}

.checkbox--confirmation {
  grid-column: 1 / -1;
  min-height: auto;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  padding-top: 8px;
}

.form-status {
  min-height: 1.4em;
  margin: 0;
  color: var(--success);
  font-size: 0.8rem;
}

/* Legal and 404 */

.legal-hero {
  padding: calc(var(--header-height) + clamp(60px, 6vw, 88px)) 0
    clamp(48px, 5vw, 76px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 82% 25%, rgba(46, 159, 245, 0.12), transparent 25rem),
    var(--ink-950);
}

.legal-hero .display {
  max-width: 16ch;
  margin-bottom: 24px;
}

.legal-hero h1 {
  max-width: 16ch;
  margin-bottom: 24px;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.5vw, 7rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.94;
}

.legal-hero .container > p:not(.eyebrow) {
  max-width: 690px;
  margin-bottom: 0;
  color: var(--text-soft);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}

.legal-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 750px);
  gap: clamp(50px, 9vw, 140px);
  align-items: start;
  padding-block: clamp(68px, 8vw, 120px);
}

.legal-nav {
  position: sticky;
  top: calc(var(--header-height) + 38px);
  display: grid;
  gap: 7px;
}

.legal-nav > .eyebrow {
  margin-bottom: 13px;
}

.legal-nav ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-nav a {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 0.76rem;
  text-decoration: none;
}

.legal-nav a:hover,
.legal-nav a:focus-visible {
  color: var(--text);
}

.legal-content {
  min-width: 0;
}

.legal-content > aside {
  margin-bottom: 48px;
  padding: 18px 20px;
  border: 1px solid rgba(239, 145, 60, 0.36);
  border-radius: var(--radius-sm);
  background: rgba(239, 145, 60, 0.07);
  color: #d8bea6;
  font-size: 0.8rem;
  line-height: 1.65;
}

.legal-content section {
  padding: 0 0 50px;
  scroll-margin-top: calc(var(--header-height) + 30px);
}

.legal-content h2 {
  margin-bottom: 17px;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  font-weight: 400;
  letter-spacing: -0.035em;
}

.legal-content h3 {
  margin: 26px 0 10px;
  font-size: 1rem;
}

.legal-content p,
.legal-content li {
  color: var(--text-soft);
  line-height: 1.75;
}

.legal-content li + li {
  margin-top: 8px;
}

.page-not-found .legal-hero {
  min-height: 66svh;
}

.page-not-found .legal-hero .container > p:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 31px;
}

/* Footer */

.site-footer {
  padding: clamp(64px, 8vw, 110px) 0 28px;
  border-top: 1px solid var(--line);
  background: var(--ink-950);
}

.site-footer__inner {
  width: min(calc(100% - (2 * var(--gutter))), var(--container));
  margin-inline: auto;
}

.site-footer__main {
  display: grid;
  grid-template-columns: minmax(250px, 0.9fr) minmax(380px, 1.1fr);
  gap: clamp(50px, 9vw, 140px);
  padding-bottom: clamp(54px, 7vw, 92px);
}

.site-footer__brand {
  max-width: 340px;
}

.site-footer__brand img {
  width: 180px;
  margin-bottom: 24px;
}

.site-footer__brand p {
  color: var(--text-dim);
  font-size: 0.86rem;
}

.site-footer__navigation {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.site-footer__heading {
  margin-bottom: 18px;
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer__navigation ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__navigation a {
  /* Padding grows the tap target past the 24px floor; the negative margin
     cancels it visually so the list rhythm is unchanged. */
  display: inline-block;
  margin-block: -8px;
  padding-block: 8px;
  color: var(--text-soft);
  font-size: 0.84rem;
  text-decoration: none;
}

.site-footer__navigation a:hover,
.site-footer__navigation a:focus-visible {
  color: var(--ember-light);
}

.site-footer__compliance {
  width: min(calc(100% - (2 * var(--gutter))), var(--container));
  margin-inline: auto;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.site-footer__compliance p {
  max-width: 1160px;
  margin-bottom: 0;
  color: var(--text-dim);
  font-size: 0.75rem;
  line-height: 1.7;
}

.site-footer__compliance strong {
  color: #c4c8cd;
}

.site-footer__legal {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: min(calc(100% - (2 * var(--gutter))), var(--container));
  margin-inline: auto;
  padding-top: 25px;
  color: var(--text-dim);
  font-size: 0.75rem;
}

.site-footer__legal p {
  margin-bottom: 0;
}

/* Age gate */

/* While the gate holds body { overflow: hidden }, the closed off-canvas
   drawer's translateX(105%) bounds make mobile Chrome expand the layout
   viewport past the device width (390 -> 750), rendering the gate dialog
   desktop-size and cut off. The drawer is unusable under the gate anyway
   (site shell is inert), so remove it from layout until the gate releases. */
body.age-gate-open .site-header__nav {
  display: none;
}

.age-gate {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 74% 42%, rgba(46, 159, 245, 0.17), transparent 28rem),
    radial-gradient(circle at 27% 70%, rgba(239, 145, 60, 0.13), transparent 24rem),
    rgba(2, 3, 4, 1);
  opacity: 1;
  transition:
    opacity 320ms ease,
    visibility 320ms ease;
}

.age-gate__backdrop {
  position: absolute;
  inset: 0;
}

.age-gate[hidden] {
  display: none;
}

.age-gate.is-closing {
  visibility: hidden;
  opacity: 0;
}

.age-gate__panel {
  position: relative;
  width: min(100%, 590px);
  overflow: hidden;
  padding: clamp(34px, 6vw, 66px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.036), transparent 42%),
    rgba(8, 11, 14, 0.96);
  box-shadow: 0 45px 120px rgba(0, 0, 0, 0.72);
  text-align: center;
}

.age-gate__panel::after {
  position: absolute;
  top: -120px;
  right: -90px;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(46, 159, 245, 0.17);
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(46, 159, 245, 0.1);
  content: "";
}

.age-gate__logo {
  position: relative;
  z-index: 2;
  width: min(73%, 300px);
  margin: 0 auto 42px;
}

.age-gate h2 {
  position: relative;
  z-index: 2;
  margin-bottom: 17px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1;
}

.age-gate p {
  position: relative;
  z-index: 2;
  max-width: 46ch;
  margin: 0 auto 29px;
  color: var(--text-soft);
  font-size: 0.94rem;
}

.age-gate__actions {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* Reveal behavior */

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 650ms var(--ease),
    transform 650ms var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* An anchor-targeted reveal must not be translated: the browser latches the
   scroll endpoint onto the translated position, so the entrance slide leaves
   the target sitting under the header. Fade still runs. */
.js .reveal:target {
  transform: none;
  transition-property: opacity;
}

/* Ultra-wide: photo-led shells step up to a wider stage while text sections
   hold at --container (copy is capped by its own measure). Raster art in the
   tier stays contain/cover-bound below natural width at this size; nothing
   here may upscale an asset past its source pixels. */
@media (min-width: 112.5em) {
  :root {
    --container-wide: 1560px;
  }

  .container.product-hero__inner,
  .container.format-story,
  .container:has(> .lineup-grid),
  .container:has(> .variant-grid),
  .container:has(> .cross-sell),
  .container:has(> .ld-families) {
    width: min(calc(100% - (2 * var(--gutter))), var(--container-wide));
  }

  .liquid-drop__inner {
    width: min(calc(100% - (2 * clamp(42px, 6vw, 94px))), 1600px);
  }
}

/* Responsive */

@media (max-width: 1180px) {
  :root {
    --header-height: 76px;
  }

  .site-header__inner {
    grid-template-columns: 170px minmax(0, 1fr) auto;
    gap: 18px;
  }

  .site-header__brand {
    width: 158px;
  }

  .site-header__nav {
    gap: 16px;
  }

  .site-header__link {
    min-height: var(--header-height);
    font-size: 0.77rem;
  }

  .brand-story,
  .format-story {
    gap: 60px;
  }

  .lineup-card {
    min-height: 540px;
  }

  .lineup-card.lineup-card--lead {
    min-height: clamp(300px, 26vw, 390px);
  }

  .product-hero__inner {
    grid-template-columns: minmax(320px, 0.88fr) minmax(390px, 1.12fr);
  }
}

@media (max-width: 1080px) {
  .liquid-drop {
    min-height: clamp(680px, 68vw, 760px);
  }

  .liquid-drop__inner {
    width: min(calc(100% - 64px), 1000px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 12px;
  }

  .liquid-drop__copy {
    padding-block: 68px 58px;
  }

  .liquid-drop__title {
    font-size: clamp(3.8rem, 6.7vw, 5.35rem);
  }

  .liquid-drop__summary {
    font-size: clamp(0.96rem, 1.5vw, 1.08rem);
  }
}

@media (min-width: 981px) {
  .liquid-drop__title {
    font-size: clamp(3.8rem, 5vw, 5rem);
  }
}

@media (min-width: 781px) and (max-width: 980px) {
  .liquid-drop__title {
    font-size: clamp(3.1rem, 6vw, 3.8rem);
  }
}

@media (max-width: 980px) {
  .site-header__inner {
    grid-template-columns: 1fr auto auto;
  }

  .site-header__toggle {
    display: block;
  }

  .site-header__nav {
    grid-column: auto;
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    width: min(88vw, 430px);
    height: 100svh;
    padding: calc(var(--header-height) + 52px) 34px 40px;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    background:
      radial-gradient(circle at 100% 0, rgba(46, 159, 245, 0.14), transparent 22rem),
      rgba(6, 8, 11, 0.98);
    box-shadow: -30px 0 80px rgba(0, 0, 0, 0.55);
    transform: translateX(105%);
    /* Hidden while closed so the off-canvas links are not keyboard tab stops;
       the visibility flip is delayed until the slide-out finishes. */
    visibility: hidden;
    transition:
      transform 350ms var(--ease),
      visibility 0s 350ms;
  }

  .site-header__links {
    width: 100%;
    flex: 0 0 auto;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    justify-self: stretch;
  }

  .site-header__links li {
    width: 100%;
  }

  .site-header__actions {
    width: 100%;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    justify-self: stretch;
  }

  .site-header__actions .button,
  .site-header__link--carry {
    width: 100%;
    justify-content: center;
  }

  .site-header__link--carry {
    min-height: 54px;
    border: 1px solid var(--line);
    border-radius: 999px;
  }

  .nav-open .site-header__nav {
    visibility: visible;
    transform: translateX(0);
    transition:
      transform 350ms var(--ease),
      visibility 0s 0s;
  }

  .site-header__link {
    min-height: 63px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: -0.03em;
  }

  .lineup-grid {
    grid-template-columns: 1fr;
  }

  .lineup-card {
    min-height: 560px;
  }

  .lineup-card.lineup-card--lead {
    min-height: 400px;
  }

  .lineup-card--lead .lineup-card__media img {
    object-position: center;
    padding: 0;
    transform: none;
  }

  .brand-story {
    grid-template-columns: 1fr;
  }

  .brand-story__media {
    min-height: 520px;
  }

  .brand-story__media img {
    min-height: 520px;
  }

  .find-fire__grid {
    grid-template-columns: 1fr;
  }

  .find-fire__copy {
    max-width: 700px;
  }

  .product-hero {
    min-height: auto;
  }

  .product-hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .product-hero__copy {
    max-width: 720px;
  }

  .product-hero__visual {
    min-height: 580px;
  }

  .product-hero__visual::before {
    width: min(72vw, 640px);
  }

  .format-story {
    grid-template-columns: 1fr;
  }

  .format-story--reverse .format-story__media {
    order: 0;
  }

  .format-story__copy {
    max-width: 720px;
  }

  .carry-hero__inner {
    grid-template-columns: 1fr;
  }

  .carry-hero__copy {
    max-width: 760px;
  }

  .inquiry-layout {
    grid-template-columns: 1fr;
  }

  .inquiry-sidebar {
    position: static;
    max-width: 720px;
  }
}

@media (max-width: 780px) {
  :root {
    --header-height: 66px;
    --gutter: 20px;
  }

  .site-header__inner {
    grid-template-columns: 1fr auto;
    gap: 12px;
  }

  .site-header__brand {
    width: 136px;
  }

  .section-heading {
    grid-template-columns: 1fr;
    gap: 23px;
    align-items: start;
  }

  .section-heading--lineup .section-title {
    white-space: normal;
  }

  .home-hero {
    min-height: max(840px, 100svh);
  }

  .home-hero__art img {
    object-fit: cover;
    object-position: center bottom;
  }

  .home-hero__wash {
    background:
      linear-gradient(
        180deg,
        rgba(3, 4, 6, 0.97) 0%,
        rgba(3, 4, 6, 0.72) 29%,
        rgba(3, 4, 6, 0.58) 48%,
        rgba(3, 4, 6, 0.55) 62%,
        transparent 78%
      ),
      linear-gradient(90deg, rgba(3, 4, 6, 0.3), transparent 76%);
  }

  .home-hero__content {
    padding-top: calc(var(--header-height) + 44px);
  }

  .home-hero__lockup {
    width: min(90vw, 380px);
  }

  .home-hero__intro {
    max-width: 330px;
    margin-top: 22px;
    font-size: 0.9rem;
    line-height: 1.48;
  }

  .home-hero__actions {
    margin-top: 21px;
  }

  .liquid-drop {
    min-height: 0;
  }

  /* The device trio spans ~730 of the mobile master's 1003px width; the tall
     cover window at phone widths can only show 617px, so cover always cuts
     the subject. Contain shows the full master width, bottom-anchored, with
     a top fade so the image edge dissolves into the ink behind the copy. */
  .liquid-drop__backdrop img {
    object-fit: contain;
    object-position: center bottom;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px);
    mask-image: linear-gradient(180deg, transparent 0, #000 70px);
  }

  .liquid-drop__veil {
    background:
      linear-gradient(180deg, rgba(1, 3, 5, 0.86) 0%, rgba(1, 3, 5, 0.66) 32%, rgba(1, 3, 5, 0.08) 60%, rgba(1, 3, 5, 0.18) 100%),
      linear-gradient(90deg, rgba(1, 3, 5, 0.22), transparent 72%);
  }

  .liquid-drop__inner {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(604px, 64svh);
    gap: 0;
  }

  .liquid-drop__copy {
    align-items: center;
    justify-content: flex-start;
    padding: clamp(78px, 18vw, 108px) 22px 0;
    text-align: center;
  }

  .liquid-drop__title {
    position: relative;
    z-index: 2;
    margin-inline: auto;
    font-size: clamp(1.55rem, 7.8vw, 3.8rem);
  }

  .liquid-drop__summary {
    position: relative;
    z-index: 4;
    max-width: 36ch;
    margin-top: 24px;
    margin-inline: auto;
    font-size: clamp(0.94rem, 3.6vw, 1.05rem);
    line-height: 1.55;
  }

  .liquid-drop__families {
    justify-content: center;
    gap: clamp(10px, 3vw, 18px);
    margin-top: 20px;
  }

  .liquid-drop__family + .liquid-drop__family {
    padding-left: clamp(10px, 3vw, 18px);
  }

  .liquid-drop__cta {
    position: relative;
    z-index: 4;
    width: min(100%, 360px);
    min-height: 58px;
    margin-top: 28px;
    font-size: 0.84rem;
  }

  .liquid-drop__stage {
    position: relative;
    z-index: 3;
    min-height: 560px;
    margin-top: 44px;
    overflow: hidden;
  }

  .high-station {
    flex: 0 0 min(66vw, 300px);
    scroll-snap-align: center;
  }

  .high-station__product--liquid {
    height: clamp(230px, 52vw, 300px);
  }

  .ld-families {
    gap: 10px;
  }

  .ld-families .high-station__product--liquid {
    height: clamp(120px, 32vw, 180px);
  }

  .ld-families .high-station__color {
    margin-top: 14px;
  }

  .ld-families .high-station__family {
    gap: 7px;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
  }

  .ld-families .high-station__family::before,
  .ld-families .high-station__family::after {
    width: clamp(10px, 2.4vw, 18px);
  }

  .brand-story__media {
    min-height: 430px;
  }

  .brand-story__media img {
    min-height: 430px;
  }

  .find-fire__cards {
    grid-template-columns: 1fr;
  }

  .audience-card__number {
    margin-bottom: 52px;
  }

  .carry-band__inner {
    grid-template-columns: 48px 1fr;
    padding-block: 36px;
  }

  .carry-band__mark {
    width: 42px;
  }

  .carry-band__inner .button {
    grid-column: 2;
    justify-self: start;
  }

  .feature-strip__grid {
    grid-template-columns: 1fr;
  }

  .feature-strip__item {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .feature-strip__item:last-child {
    border-bottom: 0;
  }

  .feature-strip__index {
    margin-bottom: 22px;
  }

  .product-hero__visual {
    min-height: 500px;
  }

  .product-hero__image--liquid {
    width: 115%;
  }

  .format-story__media {
    min-height: 520px;
  }

  .variant-grid {
    grid-template-columns: 1fr;
  }

  .variant-card {
    min-height: 540px;
  }

  .variant-card__media {
    height: 430px;
  }

  .cross-sell {
    grid-template-columns: 1fr;
  }

  .cross-sell a {
    min-height: 210px;
  }

  .cross-sell__index {
    margin-bottom: 60px;
  }

  .form-grid,
  .checkbox-group {
    grid-template-columns: 1fr;
  }

  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-nav {
    position: static;
  }

  .legal-nav ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__main {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 480px) {
  .high-station {
    flex-basis: min(74vw, 280px);
  }

  .high-station__product--liquid {
    height: clamp(220px, 58vw, 280px);
  }

  .high-station__family {
    font-size: clamp(1.7rem, 8vw, 2.2rem);
  }

  .button-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .button-row .button {
    width: 100%;
  }

  .home-hero__actions {
    width: auto;
  }

  .home-hero__actions .button {
    width: auto;
  }

  .home-hero__actions .button:not(.button--text) {
    padding-inline: 42px;
  }

  .liquid-drop {
    min-height: 0;
  }

  .liquid-drop__copy {
    padding-top: clamp(72px, 18vw, 88px);
  }

  .liquid-drop__stage {
    min-height: 560px;
  }

  .liquid-drop__families {
    width: 100%;
    justify-content: space-between;
    gap: 6px;
  }

  .liquid-drop__family {
    grid-template-columns: 7px auto;
    gap: 6px;
  }

  .liquid-drop__family + .liquid-drop__family {
    padding-left: 8px;
  }

  .liquid-drop__family-dot {
    width: 7px;
    height: 20px;
  }

  .liquid-drop__cta {
    width: 100%;
  }

  .lineup-card {
    min-height: 490px;
  }

  .lineup-card__body {
    right: 21px;
    left: 21px;
  }

  .lineup-card__title {
    top: 22px;
    right: 21px;
    left: 21px;
  }

  .product-hero__visual {
    min-height: 420px;
  }

  .product-hero__caption {
    display: none;
  }

  .format-story__media {
    min-height: 430px;
  }

  .detail-list > div {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .carry-hero__facts {
    grid-template-columns: 1fr;
  }

  .carry-fact {
    min-height: 130px;
  }

  .carry-fact span {
    margin-bottom: 32px;
  }

  .inquiry-form {
    padding: 22px 18px;
    border-radius: var(--radius-md);
  }

  .form-actions .button {
    width: 100%;
  }

  .site-footer__navigation {
    grid-template-columns: 1fr;
  }

  .legal-nav ul {
    grid-template-columns: 1fr;
  }

  .age-gate__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .age-gate__actions .button {
    width: 100%;
  }

  .proof-chip {
    right: 10px;
    bottom: 10px;
  }
}

/* The supporting imagery is portrait-oriented. Tablets keep that geometry in
   a two-column composition instead of stretching each card into a landscape
   row. The final card is centered so the four-product hierarchy remains 1+2+1. */
@media (min-width: 561px) and (max-width: 1080px) {
  .lineup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lineup-card {
    min-height: 0;
    aspect-ratio: 3 / 4;
  }

  .lineup-card.lineup-card--lead {
    grid-column: 1 / -1;
    width: auto;
    min-height: 0;
    height: clamp(280px, 30vw, 330px);
    aspect-ratio: auto;
  }

  .lineup-card--lead .lineup-card__media img {
    padding: 0;
    object-position: center;
  }

  .lineup-card--closing {
    grid-column: 1 / -1;
    width: calc((100% - 18px) / 2);
    justify-self: center;
  }
}

@media (min-width: 561px) and (max-width: 760px) {
  .lineup-card--lead .lineup-card__body p {
    max-width: 22ch;
  }

  .lineup-card:not(.lineup-card--lead) {
    aspect-ratio: 2 / 3;
  }
}

@media (max-width: 560px) {
  .lineup-family-selector {
    width: 100%;
    margin-top: 16px;
  }

  .lineup-family-option {
    min-height: 44px;
    gap: 6px;
    padding-inline: 8px;
    font-size: 0.72rem;
  }

  .lineup-grid {
    grid-template-columns: 1fr;
  }

  .lineup-card {
    width: auto;
    height: clamp(420px, 124vw, 500px);
    min-height: 0;
    aspect-ratio: auto;
  }

  .lineup-card.lineup-card--lead {
    height: clamp(390px, 110vw, 480px);
    min-height: 0;
    aspect-ratio: auto;
  }

  .lineup-card--closing {
    grid-column: auto;
    width: auto;
  }
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Short viewports: width-driven vertical spacing overshoots when the screen is
   short (laptop displays at high scaling). Trim the vertical budget and pin
   hero copy to the top of its row so page tops don't read as empty. */
@media (max-height: 640px) {
  :root {
    --section-space: clamp(48px, 10vh, 80px);
  }

  .section--tight {
    padding-block: clamp(40px, 8vh, 60px);
  }

  /* Anchor target with bespoke padding; keep its landing consistent with the
     trimmed .section budget. */
  .find-fire {
    padding-block: clamp(48px, 10vh, 80px);
  }

  .product-hero__inner {
    padding-block: clamp(28px, 6vh, 48px);
  }

  .product-hero__copy {
    align-self: start;
  }

  .home-hero__content {
    padding-top: calc(var(--header-height) + clamp(32px, 6vh, 68px));
  }

  .carry-hero {
    padding-top: calc(var(--header-height) + clamp(36px, 7vh, 64px));
    padding-bottom: clamp(48px, 8vh, 78px);
  }
}

/* Landscape phones (drawer-nav widths at short heights): the bottom-anchored
   hero tableau rises into the text zone, so the intro keeps a narrower measure
   than its 545px desktop width. Wider short viewports (1016x504 and up) keep
   the approved look untouched. */
@media (max-height: 640px) and (min-width: 781px) and (max-width: 980px) {
  .home-hero__intro {
    max-width: 400px;
  }
}