/* ==========================================================================
   BARGAIN VAPE — Design tokens
   Palette is sampled directly from the printed packaging so the site and the
   product on the shelf read as one brand.
   ========================================================================== */

:root {
  /* Neon accents (from packaging) */
  --cyan: #29d8f0;
  --cyan-soft: #7fe9f8;
  --pink: #ff2e88;
  --pink-soft: #ff7fb4;
  --magenta: #c026d3;
  --orange: #ff6a1f;
  --orange-soft: #ffa066;
  --lime: #a6e22e;
  --violet: #8b5cf6;
  --blue: #1f8fe0;

  /* Base surfaces — never pure #000 (OLED smear) */
  --bg-deep: #06060a;
  --bg-base: #0a0a11;
  --bg-elev: #101019;
  --bg-elev-2: #16161f;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-hi: rgba(255, 255, 255, 0.07);

  /* Text */
  --fg: #f2f3f8;
  --fg-muted: #a8adbd;
  /* Lightened from #767c8e: on the raised card surfaces (which sit a little
     above the page background) that value measured 4.03–4.33 against small
     helper text, just under the 4.5 WCAG AA needs. */
  --fg-dim: #8d93a6;

  /* Lines */
  --border: rgba(255, 255, 255, 0.09);
  --border-hi: rgba(255, 255, 255, 0.16);

  /* Type */
  /* Horizontal page inset. Shared by .container and the nav so the brand mark
     lines up with the content below it at every width. */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --font-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing scale (8pt rhythm) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 260ms;

  --container: 1240px;
  --nav-h: 72px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

/* Deliberately no overflow-x on html/body: `hidden` turns them into scroll
   containers (which breaks ScrollTrigger's scroll tracking) and `clip` on the
   root disables vertical scrolling. Wide elements clip themselves instead —
   see .atmos, .marquee and .hero. */

body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  font-stretch: 112%;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ==========================================================================
   Layout helpers
   ========================================================================== */

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

.section {
  padding-block: clamp(4rem, 9vw, 7.5rem);
  position: relative;
}

.section--tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--cyan);
  color: #04040a;
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

/* ==========================================================================
   Typography utilities
   ========================================================================== */

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-2);
}

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

.h-hero {
  font-size: clamp(2.65rem, 8.5vw, 6rem);
  text-transform: uppercase;
  letter-spacing: -0.035em;
}

.h-section {
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

.h-card {
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.lede {
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  color: var(--fg-muted);
  max-width: 60ch;
  line-height: 1.7;
}

.body-muted {
  color: var(--fg-muted);
  max-width: 68ch;
}

.text-cyan { color: var(--cyan); }
.text-pink { color: var(--pink); }
.text-lime { color: var(--lime); }

/* Neon text treatment — used sparingly, on display type only */
.neon {
  color: var(--cyan);
  text-shadow:
    0 0 6px rgba(41, 216, 240, 0.55),
    0 0 22px rgba(41, 216, 240, 0.3);
}

.neon-pink {
  color: var(--pink);
  text-shadow:
    0 0 6px rgba(255, 46, 136, 0.55),
    0 0 22px rgba(255, 46, 136, 0.3);
}

/* Vice gradient — the cyan→pink sunset that runs through the whole brand */
.gradient-text {
  background: linear-gradient(100deg, var(--cyan) 0%, #7bb8ea 38%, var(--pink) 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   Ambient background (the "vice" atmosphere)
   ========================================================================== */

.atmos {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(1100px 700px at 12% -5%, rgba(41, 216, 240, 0.13), transparent 62%),
    radial-gradient(900px 620px at 92% 8%, rgba(255, 46, 136, 0.12), transparent 60%),
    linear-gradient(180deg, var(--bg-base) 0%, var(--bg-deep) 55%);
}

.atmos__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.16;
  will-change: transform;
}

.atmos__blob--1 {
  width: 46vw;
  height: 46vw;
  min-width: 320px;
  min-height: 320px;
  top: -12vw;
  left: -8vw;
  background: var(--cyan);
}

.atmos__blob--2 {
  width: 40vw;
  height: 40vw;
  min-width: 300px;
  min-height: 300px;
  top: 30vh;
  right: -10vw;
  background: var(--pink);
}

.atmos__blob--3 {
  width: 34vw;
  height: 34vw;
  min-width: 260px;
  min-height: 260px;
  bottom: -10vw;
  left: 30%;
  background: var(--violet);
  opacity: 0.1;
}

/* Fine grid — reads as Miami deco tile, not sci-fi HUD */
.atmos__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 650;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
  cursor: pointer;
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background: linear-gradient(96deg, var(--cyan), #4fc3e8 55%, var(--pink));
  color: #05050b;
  box-shadow: 0 6px 26px rgba(41, 216, 240, 0.24), 0 2px 10px rgba(255, 46, 136, 0.18);
}

.btn--primary:hover {
  box-shadow: 0 10px 38px rgba(41, 216, 240, 0.36), 0 4px 16px rgba(255, 46, 136, 0.28);
  transform: translateY(-2px);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border-hi);
  color: var(--fg);
  backdrop-filter: blur(8px);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--cyan);
  color: var(--cyan);
  transform: translateY(-2px);
}

.btn--sm {
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  font-size: 0.8rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: var(--space-4);
}

.btn__icon {
  width: 17px;
  height: 17px;
  flex: none;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    backdrop-filter var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  background: rgba(8, 8, 14, 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--border);
}

.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
  min-height: 44px;
}

/* Brand lockup — the supplied monogram (transparent) paired with the name set
   in type. Cropping the script wordmark out of the packaging art left a visible
   rectangular seam, so it is not used anywhere. */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.brand-lockup--center {
  justify-content: center;
  margin-bottom: var(--space-3);
}

/* The supplied monogram already carries its own neon bloom — adding a CSS glow
   on top of it just reads as blur. */
.brand-lockup img {
  height: 48px;
  width: auto;
}

.brand-lockup__text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--fg);
}

.brand-lockup__text span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.36em;
  color: var(--pink);
  font-weight: 600;
  margin-top: 4px;
}

.nav__brand img {
  height: 38px;
  width: auto;
}

.nav__brand-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
}

.nav__brand-text span {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  color: var(--pink);
  font-weight: 600;
  margin-top: 3px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav__link {
  position: relative;
  padding: 0.6rem 0.9rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 0.86rem;
  font-weight: 550;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border-radius: 8px;
  transition: color var(--dur) var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.35rem;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav__link:hover {
  color: var(--fg);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav__link[aria-current="page"] {
  color: var(--fg);
}

.nav__cta {
  display: none;
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--border-hi);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  flex: none;
}

.nav__toggle svg {
  width: 22px;
  height: 22px;
}

.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }
.nav__toggle[aria-expanded="true"] .icon-menu { display: none; }

@media (min-width: 900px) {
  .nav__toggle { display: none; }
  .nav__cta { display: inline-flex; }
}

@media (max-width: 899px) {
  /* The wholesale enquiry is the only conversion on the site, so it belongs in
     the phone menu too — just presented as a full-width button at the end of
     the list rather than a pill in the bar. */
  .nav__cta {
    display: inline-flex;
    justify-content: center;
    margin: 0.85rem var(--gutter) 0.35rem;
  }

  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(8, 8, 14, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: var(--space-2) clamp(1.25rem, 4vw, 2.5rem) var(--space-4);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
      visibility var(--dur);
  }

  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav__link {
    padding: 1rem 0;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }

  .nav__link::after {
    left: 0;
    right: auto;
    width: 32px;
    bottom: 0.55rem;
  }

  .nav__links .btn {
    margin-top: var(--space-3);
    width: 100%;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--nav-h) + 2rem);
  padding-bottom: clamp(3.5rem, 10vh, 7rem);
  overflow: hidden;
  isolation: isolate;
}

/* Full-bleed cinematic backdrop ------------------------------------------- */

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The video fades in over the poster once it has enough data to play. */
.hero__video {
  opacity: 0;
  transition: opacity 700ms var(--ease);
}

.hero__video.is-playing {
  opacity: 1;
}

/* Darkened toward the copy so the headline always clears contrast, while the
   neon smoke stays visible on the open side of the frame. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--bg-deep) 2%, rgba(6, 6, 10, 0.72) 32%, rgba(6, 6, 10, 0.25) 62%, rgba(6, 6, 10, 0.45) 100%),
    linear-gradient(to right, rgba(6, 6, 10, 0.88) 0%, rgba(6, 6, 10, 0.6) 42%, rgba(6, 6, 10, 0.12) 72%, rgba(6, 6, 10, 0.3) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__copy {
  max-width: 41rem;
}

/* Without this, a grid item's automatic min-content width overrides the fr
   ratios and the text column starves the image column. */
.split > *,
.case-section__head > * {
  min-width: 0;
}

.hero__title {
  margin-bottom: var(--space-3);
}

/* overflow:hidden is what lets each line slide up from behind its own edge.
   It clips horizontally too, though, which shears the last glyph of a line that
   only just fits. The padding widens the clip box; the matching negative margin
   keeps the text visually aligned with everything else. */
.hero__title .line,
.page-head__title .line {
  display: block;
  overflow: hidden;
  padding-inline: 0.09em;
  margin-inline: -0.09em;
}

.hero__title .line > span {
  display: block;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-4);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.9rem;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: rgba(255, 255, 255, 0.03);
}

.chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  flex: none;
}

.chip__dot--pink { background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.chip__dot--lime { background: var(--lime); box-shadow: 0 0 8px var(--lime); }

/* Sits on the open right-hand side of the frame, clear of the headline. */
.scroll-cue {
  position: absolute;
  right: clamp(1.5rem, 4vw, 3rem);
  bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.scroll-cue__bar {
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, var(--cyan), transparent);
}

@media (max-width: 979px) {
  .scroll-cue { display: none; }
}

/* ==========================================================================
   Marquee
   ========================================================================== */

.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--border);
  background: linear-gradient(
    90deg,
    rgba(41, 216, 240, 0.07),
    rgba(255, 46, 136, 0.07)
  );
  padding-block: 0.95rem;
  display: flex;
}

.marquee__track {
  display: flex;
  flex: none;
  gap: 2.5rem;
  padding-right: 2.5rem;
  align-items: center;
  animation: marquee 38s linear infinite;
  will-change: transform;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.8rem, 1.5vw, 1rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}

.marquee__item::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 8px var(--pink);
  flex: none;
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

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

/* ==========================================================================
   Section header
   ========================================================================== */

.section-head {
  max-width: 720px;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .eyebrow {
  justify-content: center;
}

.section-head p {
  margin-top: var(--space-2);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 3vw, 2rem);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

/* top hairline highlight — the "lit edge" that makes dark cards feel premium */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent, var(--cyan)), transparent);
  opacity: 0.55;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hi);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(41, 216, 240, 0.1);
  border: 1px solid rgba(41, 216, 240, 0.24);
  color: var(--cyan);
  margin-bottom: var(--space-2);
}

.card__icon svg {
  width: 21px;
  height: 21px;
}

.card h3 {
  margin-bottom: 0.6rem;
}

.card p {
  color: var(--fg-muted);
  font-size: 0.95rem;
}

/* Flexbox rather than grid so a lone item on the final row centres itself
   instead of stranding against the left edge. */
.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 2.2vw, 1.5rem);
}

.grid > * {
  flex: 1 1 var(--col, 280px);
  min-width: min(100%, var(--col, 280px));
  max-width: var(--col-max, 460px);
}

.grid--2 { --col: 300px; --col-max: 560px; }
.grid--3 { --col: 280px; --col-max: 420px; }
.grid--4 { --col: 230px; --col-max: 340px; }

/* ==========================================================================
   Case line cards (home teaser)
   ========================================================================== */

.case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.case-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Inset on all four sides so the tile never touches the card edge, and left
   un-clipped so the tile's drop shadow can actually render — `overflow: hidden`
   here was slicing it off flush with the image. The hover zoom stays inside the
   padding, so nothing needs clipping. */
.case-card__media {
  position: relative;
  padding: clamp(0.9rem, 3.5vw, 1.25rem);
  padding-bottom: 0.5rem;
}

.case-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
  transition: transform 480ms var(--ease);
}

.case-card:hover .case-card__media img {
  transform: scale(1.05);
}

.case-card__body {
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.case-card__flavors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.flavor-tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  color: color-mix(in srgb, var(--accent) 82%, white);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.case-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  min-height: 44px;
}

.case-card__link svg {
  width: 15px;
  height: 15px;
  transition: transform var(--dur) var(--ease);
}

.case-card:hover .case-card__link svg {
  transform: translateX(4px);
}

/* stretched link keeps the whole card tappable without nesting interactive elements */
.stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ==========================================================================
   Products page — case sections
   ========================================================================== */

.case-section {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-top: 1px solid var(--border);
}

.case-section__head {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

@media (min-width: 900px) {
  .case-section__head {
    grid-template-columns: 0.95fr 1.05fr;
  }
}

/* On phones the name and number come first, then the packaging shots — leading
   with two large photos pushed the heading off the screen entirely. */
.case-section__head > .case-section__media {
  order: 2;
}

.case-section__head > :not(.case-section__media) {
  order: 1;
}

@media (min-width: 900px) {
  .case-section__head > .case-section__media,
  .case-section__head > :not(.case-section__media) {
    order: 0;
  }
}

/* Front and back sit side by side at every width so the pair reads as one
   object and the section stays short enough to scroll past on a phone. */
.case-section__media {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.6rem, 2.5vw, 1rem);
  align-items: start;
}

.case-section__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55),
    0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);
}

.case-section__media figure {
  margin: 0;
}

.case-section__media figcaption {
  margin-top: 0.55rem;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-align: center;
}

.case-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 5.5rem);
  font-weight: 900;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent) 60%, transparent);
  margin-bottom: 0.5rem;
  display: block;
}

.spec-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: var(--space-3);
}

.spec-strip__item {
  background: var(--bg-elev);
  padding: 0.9rem 1rem;
}

.spec-strip__label {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: block;
  margin-bottom: 0.2rem;
}

.spec-strip__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}

/* Flavor cards */
.flavor-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 2.4vw, 1.5rem);
}

.flavor-grid > * {
  flex: 1 1 260px;
  min-width: min(100%, 260px);
  max-width: 400px;
}

.flavor-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.flavor-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--fc) 50%, transparent);
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.5);
}

/* Matches .case-card__media: inset on all sides so the photo tile never runs
   into the card edge on a narrow screen. */
.flavor-card__media {
  position: relative;
  padding: clamp(0.9rem, 3.5vw, 1.25rem);
  padding-bottom: 0.5rem;
}

/* The whole tile is the control: tap anywhere on the photo to flip it.
   Front and back are stacked; only opacity animates between them. */
.flavor-card__stack {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #fff;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5),
    0 0 0 1px color-mix(in srgb, var(--fc) 30%, transparent);
}

.flavor-card__stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 320ms var(--ease), transform 480ms var(--ease);
}

/* Three views share the tile; only the active one is opaque, so switching is a
   crossfade in place rather than a layout change. */
.flavor-card__stack img[data-face] {
  opacity: 0;
}

.flavor-card.show-front .flavor-card__stack img[data-face="front"],
.flavor-card.show-back .flavor-card__stack img[data-face="back"],
.flavor-card.show-box .flavor-card__stack img[data-face="box"] {
  opacity: 1;
}

/* Before JS runs, the sleeve front is the one that shows. */
.flavor-card:not(.show-front):not(.show-back):not(.show-box)
  .flavor-card__stack img[data-face="front"] {
  opacity: 1;
}

.flavor-card:hover .flavor-card__stack img {
  transform: scale(1.03);
}

/* Persistent "flip" affordance sitting on the photo, so the back view is
   discoverable without scrolling past the description. */
.flip-hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  min-height: 40px;
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 17, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  pointer-events: none; /* the whole tile is the button */
}

.flip-hint svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.flavor-card__stack:hover .flip-hint {
  background: color-mix(in srgb, var(--fc) 60%, rgba(10, 10, 17, 0.9));
  border-color: color-mix(in srgb, var(--fc) 70%, transparent);
  transform: translateX(-50%) translateY(-2px);
}

.flavor-card__stack:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

.flavor-card__body {
  padding: 1.15rem 1.25rem 1.4rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}

.flavor-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.flavor-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.strain-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid;
  white-space: nowrap;
}

.strain-badge--sativa {
  color: var(--lime);
  border-color: rgba(166, 226, 46, 0.42);
  background: rgba(166, 226, 46, 0.09);
}

.strain-badge--hybrid {
  color: var(--cyan);
  border-color: rgba(41, 216, 240, 0.42);
  background: rgba(41, 216, 240, 0.09);
}

.strain-badge--indica {
  color: var(--pink-soft);
  border-color: rgba(255, 46, 136, 0.42);
  background: rgba(255, 46, 136, 0.09);
}

.flavor-card__notes {
  font-size: 0.9rem;
  color: var(--fg-muted);
  line-height: 1.6;
}

/* ==========================================================================
   Split feature (product anatomy / about)
   ========================================================================== */

.split {
  display: grid;
  gap: clamp(2.25rem, 6vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
}

.split__media {
  position: relative;
  display: grid;
  place-items: center;
}

.split__media img {
  width: 100%;
  max-width: 440px;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 50px rgba(41, 216, 240, 0.12);
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: var(--space-3);
}

.feature-list li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.feature-list__mark {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(41, 216, 240, 0.12);
  border: 1px solid rgba(41, 216, 240, 0.3);
  color: var(--cyan);
  margin-top: 2px;
}

.feature-list__mark svg {
  width: 14px;
  height: 14px;
}

.feature-list strong {
  display: block;
  font-weight: 650;
  margin-bottom: 0.15rem;
}

.feature-list p {
  color: var(--fg-muted);
  font-size: 0.93rem;
}

/* ==========================================================================
   Stats
   ========================================================================== */

/* Fixed 2-up then 4-up — never 3, which would strand a single stat on its own
   row in a strip that is meant to read as one continuous band. */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 860px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat {
  background: rgba(12, 12, 19, 0.86);
  padding: clamp(1.35rem, 3vw, 2.1rem);
  text-align: center;
}

.stat__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.4rem;
}

.stat__label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-hi);
  padding: clamp(2.25rem, 6vw, 4.5rem);
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(700px 320px at 20% 0%, rgba(41, 216, 240, 0.2), transparent 65%),
    radial-gradient(700px 320px at 82% 100%, rgba(255, 46, 136, 0.2), transparent 65%),
    rgba(255, 255, 255, 0.025);
}

.cta-band .btn-row {
  justify-content: center;
}

.cta-band .lede {
  margin-inline: auto;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.form-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

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

.field label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.field .req {
  color: var(--pink);
  margin-left: 2px;
}

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-hi);
  border-radius: 12px;
  padding: 0.8rem 0.95rem;
  min-height: 48px;
  width: 100%;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.field textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.6;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8adbd' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 18px;
  padding-right: 2.6rem;
}

.field select option {
  background: var(--bg-elev);
  color: var(--fg);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--fg-dim);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(41, 216, 240, 0.16);
}

.field__help {
  font-size: 0.8rem;
  color: var(--fg-dim);
}

.field__error {
  font-size: 0.82rem;
  color: #ff8095;
  display: none;
  align-items: center;
  gap: 0.35rem;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #ff5c7a;
  box-shadow: 0 0 0 3px rgba(255, 92, 122, 0.14);
}

.field.has-error .field__error {
  display: flex;
}

/* Case quantity selector */
.qty-list {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-hi);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

/* min-width:0 lets the flavour list wrap instead of being clipped by the flex
   row; without it long names like "Slurricane" run past the edge. */
.qty-row__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.qty-row__swatch {
  width: 8px;
  align-self: stretch;
  min-height: 32px;
  border-radius: 3px;
  flex: none;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: 0 0 10px color-mix(in srgb, var(--c1) 55%, transparent);
}

.qty-row input {
  width: 76px;
  min-height: 44px;
  text-align: center;
  flex: none;
  padding-inline: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.form-note {
  font-size: 0.86rem;
  color: var(--fg-dim);
  margin-top: var(--space-3);
  line-height: 1.6;
}

.form-status {
  display: none;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: var(--space-3);
  padding: 0.95rem 1.1rem;
  border-radius: 12px;
  font-size: 0.93rem;
  border: 1px solid;
}

.form-status.is-visible { display: flex; }

.form-status--ok {
  border-color: rgba(166, 226, 46, 0.4);
  background: rgba(166, 226, 46, 0.09);
  color: #d5f58c;
}

.form-status--err {
  border-color: rgba(255, 92, 122, 0.42);
  background: rgba(255, 92, 122, 0.09);
  color: #ffb3c0;
}

.form-status svg {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 1px;
}

/* Contact detail cards */
.contact-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
}

.contact-item__icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(41, 216, 240, 0.1);
  border: 1px solid rgba(41, 216, 240, 0.26);
  color: var(--cyan);
}

.contact-item__icon svg { width: 18px; height: 18px; }

.contact-item strong {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.contact-item a,
.contact-item span {
  color: var(--fg);
  font-size: 0.98rem;
  word-break: break-word;
}

.contact-item a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.contact-item a:hover { color: var(--cyan); }

/* ==========================================================================
   Page header (inner pages)
   ========================================================================== */

.page-head {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(3rem, 8vw, 5.5rem));
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.page-head__title {
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  text-transform: uppercase;
  letter-spacing: -0.035em;
}

/* ==========================================================================
   Timeline (about)
   ========================================================================== */

.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-left: 1.75rem;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--cyan), var(--pink), transparent);
}

.timeline__item {
  position: relative;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 7px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 10px rgba(41, 216, 240, 0.6);
}

.timeline__item h3 {
  font-size: 1.08rem;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.timeline__item p {
  color: var(--fg-muted);
  font-size: 0.95rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  border-top: 1px solid var(--border);
  background: rgba(6, 6, 10, 0.7);
  padding-block: clamp(2.75rem, 6vw, 4rem) var(--space-4);
  margin-top: var(--space-5);
}

.footer__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-5);
}

/* Brand block, then Site / Wholesale / Legal. Two-up on tablet so the three
   link columns do not get squeezed to a couple of words wide. */
@media (min-width: 620px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 940px) {
  .footer__grid {
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
  }

  .footer__brand {
    grid-column: auto;
  }
}

.footer__brand .brand-lockup {
  margin-bottom: var(--space-2);
}

.footer__brand p {
  color: var(--fg-muted);
  font-size: 0.92rem;
  max-width: 42ch;
}

.footer__title {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: var(--space-2);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.footer__links a {
  color: var(--fg-muted);
  font-size: 0.94rem;
  padding: 0.45rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color var(--dur) var(--ease);
  overflow-wrap: anywhere; /* long email addresses on narrow phones */
}

.footer__links a:hover { color: var(--cyan); }

.footer__legal {
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  align-items: flex-start;
}

.footer__disclaimer {
  font-size: 0.78rem;
  color: var(--fg-dim);
  line-height: 1.65;
  max-width: 76ch;
}

.footer__copyright {
  font-size: 0.78rem;
  color: var(--fg-dim);
  white-space: nowrap;
}

/* ==========================================================================
   Age gate
   ========================================================================== */

.age-gate {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  background: rgba(4, 4, 8, 0.86);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.age-gate.is-open {
  display: flex;
}

.age-gate__card {
  width: min(480px, 100%);
  max-height: 90svh;
  overflow-y: auto;
  text-align: center;
  padding: clamp(1.75rem, 5vw, 2.75rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-hi);
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(41, 216, 240, 0.16), transparent 70%),
    var(--bg-elev);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
}

/* Sizing for the brand mark lives on .brand-lockup — see the lockup rules. */

.age-gate__card h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.age-gate__card p {
  color: var(--fg-muted);
  font-size: 0.95rem;
  margin-bottom: var(--space-3);
}

.age-gate__actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

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

.age-gate__fine {
  font-size: 0.76rem;
  color: var(--fg-dim);
  margin-top: var(--space-3);
  line-height: 1.6;
}

.age-gate__denied {
  display: none;
}

.age-gate.is-denied .age-gate__prompt { display: none; }
.age-gate.is-denied .age-gate__denied { display: block; }

body.is-locked {
  overflow: hidden;
}

/* ==========================================================================
   Scroll reveal — content is visible by default; JS opts in to animation so a
   GSAP/CDN failure can never leave the page blank.
   ========================================================================== */

.js .reveal,
.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}

/* Per-child transition-delay is set inline by the script to stagger a grid. */
.js .reveal.is-in,
.js .reveal-stagger.is-in > * {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   COAs — certificate index
   A document list, so it is built for scanning: name, strain, link, repeat.
   ========================================================================== */

/* Visible only to screen readers — carries the "opens in a new tab" warning
   without cluttering the button for sighted users. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.coa-group {
  margin-bottom: var(--space-5);
}

.coa-group__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  padding-bottom: 0.7rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
}

.coa-group__box {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.coa-list {
  display: grid;
}

.coa-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
}

.coa-row__name {
  font-weight: 650;
  font-size: 1.02rem;
  color: var(--fg);
  flex: 1 1 auto;
  min-width: 0;
}

/* Pushed to the end of the row so every link lines up in one column. */
.coa-row__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--fg);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.coa-row__link:hover {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  transform: translateY(-1px);
}

.coa-row__ext {
  width: 14px;
  height: 14px;
  flex: none;
  opacity: 0.75;
}

@media (max-width: 480px) {
  .coa-row {
    align-items: flex-start;
  }

  /* Name and badge on one line, link full width beneath — at this width the
     three-across row squeezes the flavour name to a couple of characters. */
  .coa-row__link {
    margin-left: 0;
    width: 100%;
    justify-content: center;
    margin-top: 0.15rem;
  }
}

/* ==========================================================================
   Legal pages (Terms, Privacy)
   Long-form reading: a narrow measure, generous leading, and headings that
   step down clearly so the document can be scanned.
   ========================================================================== */

.legal {
  max-width: 68ch;
}

.legal h2 {
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  color: var(--fg);
}

.legal h2:first-of-type {
  margin-top: var(--space-3);
}

.legal h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  margin-top: var(--space-3);
  margin-bottom: 0.5rem;
  color: var(--fg);
}

.legal p,
.legal li {
  color: var(--fg-muted);
  line-height: 1.75;
}

.legal p + p {
  margin-top: var(--space-2);
}

.legal ul {
  list-style: disc;
  padding-left: 1.35rem;
  margin: var(--space-2) 0;
  display: grid;
  gap: 0.45rem;
}

.legal li::marker {
  color: var(--cyan);
}

.legal a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal a:hover {
  color: var(--fg);
}

.legal strong {
  color: var(--fg);
}

.nowrap {
  white-space: nowrap;
}

/* Flags the pages as unreviewed drafts — remove once counsel has signed off. */
.legal__note {
  border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent);
  background: color-mix(in srgb, var(--orange) 10%, transparent);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin-bottom: var(--space-4);
  font-size: 0.92rem;
}

/* ==========================================================================
   Notch / rounded-display safety
   On phones with a notch, Dynamic Island or gesture bar, keep content out of
   the inset areas — in landscape especially, edge-to-edge text runs under the
   sensor housing.
   ========================================================================== */

.container {
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.nav__inner {
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.hero {
  padding-bottom: max(clamp(3.5rem, 10vh, 7rem), env(safe-area-inset-bottom));
}

.footer {
  padding-bottom: max(var(--space-4), calc(env(safe-area-inset-bottom) + 1rem));
}

.nav__links.is-open {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* Removes the grey flash Safari/Chrome paint over tapped elements, which reads
   as cheap on an otherwise dark, deliberate surface. */
a,
button,
[role="button"],
input,
select,
textarea,
label {
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   Phone refinements
   The site is designed dark-and-cinematic; on a small screen that only holds up
   if the type tightens, the sections breathe less, and nothing is left dangling
   at an awkward size. Everything below is phone-only.
   ========================================================================== */

@media (max-width: 599px) {
  /* Headlines: tighter tracking and leading so big display type still feels
     deliberate rather than merely large.

     The size is bounded by the longest single word in the hero — "Disposables".
     It cannot wrap (each line is its own animated block) and the block clips
     horizontal overflow, so type that is even slightly too wide shears the last
     letter off. Dropping the width axis to 100% buys roughly 10% for free,
     before any reduction in size. */
  .h-hero {
    font-size: clamp(2.15rem, 11.2vw, 3.4rem);
    font-stretch: 100%;
    letter-spacing: -0.045em;
    line-height: 0.96;
  }

  .h-section {
    font-size: clamp(1.75rem, 8.5vw, 2.35rem);
    letter-spacing: -0.035em;
    line-height: 1.02;
  }

  .page-head__title {
    font-size: clamp(1.95rem, 10.4vw, 3rem);
    font-stretch: 100%;
    letter-spacing: -0.04em;
    line-height: 0.98;
  }

  .lede {
    font-size: 1rem;
    line-height: 1.62;
  }

  /* Hero sits bottom-aligned; give the copy room above the fold edge. */
  .hero {
    min-height: 92svh;
    padding-bottom: 3rem;
  }

  .hero__meta {
    gap: 0.4rem;
  }

  .chip {
    font-size: 0.66rem;
    padding: 0.36rem 0.7rem;
    letter-spacing: 0.09em;
  }

  /* Full-width buttons read as deliberate on a phone; half-width ones look
     like a desktop layout that was squeezed. */
  .btn-row .btn {
    width: 100%;
  }

  .section {
    padding-block: 3.25rem;
  }

  .case-section {
    padding-block: 2.75rem;
  }

  .case-num {
    font-size: 2.75rem;
  }

  /* Two specs per row rather than one long column. */
  .spec-strip {
    grid-template-columns: 1fr 1fr;
  }

  .spec-strip__value {
    font-size: 0.95rem;
  }

  .card {
    padding: 1.35rem 1.25rem;
  }

  .cta-band {
    padding: 2rem 1.35rem;
  }

  .stat__value {
    font-size: 2.1rem;
  }

  .stat__label {
    font-size: 0.64rem;
    letter-spacing: 0.13em;
  }

  .brand-lockup img {
    height: 42px;
  }

  .footer {
    padding-bottom: 2rem;
  }

  .footer__disclaimer {
    font-size: 0.74rem;
  }

  /* One flavour per row, at a size where the packaging is actually legible. */
  .flavor-grid > * {
    max-width: 100%;
  }

  .flip-hint {
    bottom: 10px;
    font-size: 0.65rem;
    padding: 0.45rem 0.8rem;
  }

  .form-card {
    padding: 1.35rem 1.15rem;
  }

  .age-gate__card {
    padding: 1.6rem 1.25rem;
  }
}

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

  .js .reveal,
  .js .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .marquee__track { animation: none; }

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