/* ==========================================================================
   Oleum Extracts — brand tokens (from Brand Guidelines v1.0)
   ========================================================================== */
:root {
  /* Primary palette */
  --blue: #0f3148;          /* PMS 2189 C */
  --gold: #cba434;          /* PMS 7752 C */
  --black: #2b231d;
  --white: #ffffff;
  --off-white: #f1efed;

  /* Product-photo backdrop */
  --ink: #060d17;

  /* Extended palette (available for future pages) */
  --aqua: #86a9bb;
  --cool-light-gray: #bcc8c6;
  --vanilla: #e1dac1;

  /* Typography — Google Fonts stand-ins for the licensed brand faces:
     Greycliff CF            -> Outfit
     TT Rounds Neue Compressed -> Barlow Condensed
     TT Norms Condensed      -> Barlow Semi Condensed
     Swap these for the licensed webfonts when available. */
  --font-head: "Greycliff CF", "Outfit", system-ui, sans-serif;
  --font-accent: "TT Rounds Neue Compressed", "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "TT Norms Condensed", "Barlow Semi Condensed", "Arial Narrow", sans-serif;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --max: 1180px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

.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;
}

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.eyebrow {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.eyebrow--gold { color: var(--gold); }

.rule {
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, .55);
}
.rule--gold { background: var(--gold); }

/* ==========================================================================
   Header — blue band with the downward chevron edge
   ========================================================================== */
.site-header {
  --notch: clamp(2.25rem, 6vw, 4rem);
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: clamp(4.5rem, 14vw, 4.75rem) var(--gutter) calc(var(--notch) + clamp(2.5rem, 8vw, 3.25rem));
  background: var(--blue);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), 75% 100%, 0 calc(100% - var(--notch)));
}

.site-header__logo img {
  width: clamp(200px, 53vw, 300px);
  height: auto;
}

.menu-toggle {
  position: absolute;
  top: clamp(1.75rem, 6vw, 2.25rem);
  right: var(--gutter);
  display: grid;
  gap: 7px;
  width: 44px;
  padding: 8px 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-toggle__bar {
  display: block;
  height: 3px;
  background: var(--gold);
  border-radius: 1px;
  transition: transform .3s ease, opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { transform: translateY(10px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(4) { transform: translateY(-10px) rotate(-45deg); }

/* Full-screen menu */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  background: var(--blue);
  opacity: 0;
  transition: opacity .3s ease;
}
.site-menu.is-open { opacity: 1; }
.site-menu[hidden] { display: none; }
.site-menu ul { margin: 0; padding: 0; list-style: none; text-align: center; }
.site-menu li + li { margin-top: 1.75rem; }
.site-menu a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.5rem, 6vw, 2.25rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
}
.site-menu a:hover { color: var(--gold); }

/* When the menu is open, keep the header bar on top and un-notched */
body.menu-open { overflow: hidden; }
body.menu-open .site-header { position: fixed; inset: 0 0 auto; background: transparent; clip-path: none; pointer-events: none; }
body.menu-open .menu-toggle { pointer-events: auto; } /* only the close button stays clickable over the menu */
body.menu-open .site-header__logo { visibility: hidden; }

/* ==========================================================================
   Product hero
   ========================================================================== */
.product {
  position: relative;
  margin-top: calc(-1 * clamp(2.25rem, 6vw, 4rem)); /* tuck under the header notch */
  background: var(--ink);
  overflow: hidden;
}

.product__inner {
  max-width: var(--max);
  margin: 0 auto;
}

.product__copy {
  position: relative;
  z-index: 2;
  padding: clamp(4.5rem, 16vw, 5.5rem) var(--gutter) 0;
}

.product__icon {
  position: absolute;
  top: clamp(1.25rem, 4vw, 2rem);
  right: var(--gutter);
  width: clamp(28px, 7vw, 40px);
  height: auto;
}

.product__title {
  margin: 0;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(255, 255, 255, .6);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.75rem, 7vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: .28em;
  text-transform: uppercase;
  text-align: center;
}

.product__desc {
  margin: 1.25rem 0 0;
  max-width: 34rem;
  color: var(--gold);
  font-size: clamp(1rem, 4.2vw, 1.25rem);
  line-height: 1.45;
  letter-spacing: .01em;
}

.product__media {
  margin: 0;
  height: clamp(320px, 95vw, 520px);
  /* fade the photo's edges into the backdrop */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 75%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 75%, transparent 100%);
}
.product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 55%;
}

/* Spec band — gold, with the angled top edge */
.specs {
  --rise: clamp(2rem, 9vw, 3.5rem);
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 clamp(.75rem, 3vw, 2.5rem);
  margin: calc(-1 * var(--rise) - 1.5rem) 0 0;
  padding: calc(var(--rise) + 1.75rem) var(--gutter) 2.25rem;
  background: var(--gold);
  clip-path: polygon(0 calc(var(--rise) * .55), 30% 0, 100% var(--rise), 100% 100%, 0 100%);
}
.specs__item {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid; /* keeps every label on one line even if a value wraps */
  justify-items: center;
  align-content: start;
  text-align: center;
}
.specs dt {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .85);
  color: var(--blue);
  font-size: clamp(.8rem, 3.2vw, 1rem);
  line-height: 1.2;
}
.specs dd {
  margin: .45rem 0 0;
  color: var(--white);
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: clamp(1.3rem, 5.6vw, 2rem);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Wider screens: copy beside the photo */
@media (min-width: 860px) {
  .product__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    min-height: 620px;
  }
  .product__copy {
    padding: 6rem var(--gutter) 6rem;
  }
  .product__title { text-align: left; }
  .product__icon { position: static; margin-bottom: 1.5rem; }
  .product__media {
    height: 640px;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%);
            mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%);
  }
  .product__media img { object-position: 60% 55%; }

  .specs {
    padding-left: max(var(--gutter), calc((100% - 900px) / 2));
    padding-right: max(var(--gutter), calc((100% - 900px) / 2));
    padding-bottom: 3rem;
  }
}

/* ==========================================================================
   Product carousel (products page)
   ========================================================================== */
.carousel {
  position: relative;
  margin-top: calc(-1 * clamp(2.25rem, 6vw, 4rem)); /* tuck under the header notch */
  background: var(--ink);
  overflow: hidden;
  overflow: clip; /* stops #product links from scrolling the track sideways */
}
.carousel__track {
  display: flex;
  transition: transform .6s cubic-bezier(.65, 0, .35, 1);
}
.carousel .product {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  margin-top: 0;
}
.carousel .product__inner { flex: 1; width: 100%; }
.carousel .specs { margin-top: auto; }

/* Mobile: slides share the tallest slide's height, so let the photo area fill the
   leftover space and center the cut-out shots vertically inside it */
@media (max-width: 859px) {
  .carousel .product__inner { display: flex; flex-direction: column; }
  .carousel .product__media--cutout {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: clamp(280px, 85vw, 460px);
    padding: 1.5rem var(--gutter) 3.5rem;
  }
  .carousel .product__media--cutout img { height: auto; max-height: 460px; }
}

/* Mobile: icon on the left, level with the dots, and more room above the title */
.carousel .product__copy { padding-top: 7.25rem; }
.carousel .product__icon {
  top: 56px;
  left: var(--gutter);
  right: auto;
  width: 32px;
}

/* Transparent cut-out product shots */
.product__media--cutout {
  -webkit-mask-image: none;
          mask-image: none;
  padding: 1rem var(--gutter) 3rem;
}
.product__media--cutout img { object-fit: contain; object-position: center; }
/* For cut-outs whose dab tool blurs out to white toward the bottom-right */
.product__media--cutout img.fade-corner {
  -webkit-mask-image: linear-gradient(135deg, #000 70%, transparent 82%);
          mask-image: linear-gradient(135deg, #000 70%, transparent 82%);
}
/* For cut-outs whose dab tool blurs out to white on the right */
.product__media--cutout img.fade-right {
  -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 80%);
          mask-image: linear-gradient(to right, #000 62%, transparent 80%);
}

.carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(6, 13, 23, .6);
  color: var(--gold);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .2s ease, color .2s ease;
}
.carousel__arrow:hover { background: var(--gold); color: var(--blue); }
.carousel__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.carousel__arrow--prev { left: .5rem; }
.carousel__arrow--next { right: .5rem; }

.carousel__dots {
  position: absolute;
  top: 67px; /* vertically centered on the 32px icon at top: 56px */
  left: 50%;
  z-index: 4;
  display: flex;
  gap: .6rem;
  transform: translateX(-50%);
}
.carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.carousel__dot[aria-current="true"] { background: var(--gold); }

@media (min-width: 860px) {
  .carousel .product__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .carousel .product__copy { padding-left: max(5rem, var(--gutter)); padding-top: 6rem; }
  .carousel .product__icon { width: 40px; }
  .carousel .product__title { font-size: clamp(2rem, 3.4vw, 2.75rem); letter-spacing: .2em; }
  .carousel__arrow { width: 52px; height: 52px; }
  .carousel__arrow--prev { left: 1.25rem; }
  .carousel__arrow--next { right: 1.25rem; }
  .carousel__dots { top: 4.5rem; }
  .product__media--cutout { padding: 3rem 4rem 4rem 0; }
}

/* Full photo on a black set (e.g. vape hardware) — show the whole shot, fade its edges */
.product__media--contain {
  display: flex;
  justify-content: center;
  height: clamp(380px, 115vw, 560px);
  -webkit-mask-image: none;
          mask-image: none;
}
.product__media--contain img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.85);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
}
@media (min-width: 860px) {
  .product__media--contain { height: 680px; padding: 2rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track { transition: none; }
}

/* ==========================================================================
   Home — company hero
   ========================================================================== */
.hero {
  position: relative;
  margin-top: calc(-1 * clamp(2.25rem, 6vw, 4rem)); /* tuck under the header notch */
  padding: clamp(5.5rem, 20vw, 8rem) var(--gutter) 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(15, 49, 72, .55), transparent 70%),
    var(--ink);
  text-align: center;
  overflow: hidden;
}
.hero__inner { max-width: var(--max); margin: 0 auto; }
.hero__copy { position: relative; z-index: 2; max-width: 40rem; margin: 0 auto; }
.hero__title {
  margin: 1rem 0 1.5rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.1rem, 8.5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -.005em;
}
.hero__rule { width: 72px; margin: 0 auto; }
.hero__lede {
  max-width: 34rem;
  margin: 1.5rem auto 0;
  color: var(--gold);
  font-size: clamp(1.05rem, 4.2vw, 1.3rem);
  line-height: 1.5;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 2.5rem;
}

/* Product shot — the dab tool runs off the right edge of the screen */
.hero__media {
  position: relative;
  width: min(78%, 360px);
  margin: 2rem auto 0;
  padding-bottom: clamp(3rem, 12vw, 4rem); /* clear the gold band's angled edge */
}
.hero__media::before { /* warm glow behind the extract */
  content: "";
  position: absolute;
  inset: 0 5% 20%;
  background: radial-gradient(circle, rgba(203, 164, 52, .22), transparent 65%);
}
.hero__media img {
  position: relative;
  width: 100%;
  /* soften the cropped ends of the dab tool */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 85%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 85%, transparent 100%);
}

@media (min-width: 900px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: 720px;
    padding-top: 6rem;
    padding-bottom: 7rem;
    text-align: left;
  }
  .hero__inner { width: 100%; }
  .hero__copy { margin: 0; max-width: 34rem; }
  .hero__rule { margin-left: 0; }
  .hero__lede { margin-left: 0; }
  .hero__actions { justify-content: flex-start; }
  .hero__media {
    position: absolute;
    right: 0;
    top: 50%;
    width: min(41.8vw, 616px);
    margin: 0;
    padding: 0;
    transform: translateY(-45%);
  }
  .hero__media::before { inset: 5% 10% 15% 0; }
  .hero__media img {
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
            mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  }
}

/* Gold band of brand pillars — same angled edge as the product spec band */
.pillars {
  --rise: clamp(2rem, 9vw, 3.5rem);
  position: relative;
  z-index: 3;
  margin-top: calc(-1 * var(--rise));
  padding: calc(var(--rise) + 2rem) var(--gutter) 2.75rem;
  background: var(--gold);
  clip-path: polygon(0 calc(var(--rise) * .55), 30% 0, 100% var(--rise), 100% 100%, 0 100%);
}
.pillars__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.pillar img { width: 40px; height: 40px; }
.pillar span {
  width: 100%;
  padding-top: .75rem;
  border-top: 1px solid rgba(255, 255, 255, .85);
  color: var(--white);
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: clamp(1.3rem, 5.4vw, 1.9rem);
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
}
@media (min-width: 760px) {
  .pillars__list { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
}

/* ==========================================================================
   Home — our story
   ========================================================================== */
.story {
  background: var(--off-white);
  color: var(--blue);
  padding: clamp(4.5rem, 13vw, 7.5rem) var(--gutter);
  text-align: center;
}
.story__inner { max-width: 44rem; margin: 0 auto; }
.story__title {
  margin: .9rem 0 1.5rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  line-height: 1.15;
}
.story .rule { width: 64px; margin: 0 auto; }
.story__body { margin-top: 2rem; }
.story__body p {
  margin: 0 0 1.1rem;
  color: var(--black);
  font-size: clamp(1.05rem, 4vw, 1.25rem);
  line-height: 1.6;
}

/* ==========================================================================
   Home — extracts teaser
   ========================================================================== */
.teaser {
  background: var(--ink);
  overflow: hidden;
}
.teaser__inner { max-width: var(--max); margin: 0 auto; }
.teaser__media {
  width: min(80%, 380px);
  margin: 0 auto;
  padding: 3rem 0 1.5rem;
}
.teaser__media img { width: 100%; }
.teaser__media img.fade-corner { /* dab tool blurs to white at the bottom-right */
  -webkit-mask-image: linear-gradient(135deg, #000 70%, transparent 82%);
          mask-image: linear-gradient(135deg, #000 70%, transparent 82%);
}
.teaser__copy {
  padding: 0 var(--gutter) clamp(4rem, 12vw, 6rem);
  text-align: center;
}
.teaser__title {
  margin: .9rem auto 1.5rem;
  max-width: 28rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  line-height: 1.15;
}
.teaser .rule { width: 64px; margin: 0 auto; }
.teaser__desc {
  max-width: 30rem;
  margin: 1.5rem auto 2.25rem;
  color: var(--gold);
  font-size: clamp(1.05rem, 4vw, 1.2rem);
}

@media (min-width: 860px) {
  .teaser__inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }
  .teaser__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .teaser__media {
    width: 80%;
    margin: 0 auto;
    padding: 3rem 0;
    /* soften the edge where the dab tool is cropped */
    -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 100%);
            mask-image: linear-gradient(to right, #000 80%, transparent 100%);
  }
  .teaser__copy { padding: 4rem var(--gutter); text-align: left; }
  .teaser__title { margin-left: 0; }
  .teaser .rule { margin: 0; }
  .teaser__desc { margin-left: 0; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--blue);
  padding: clamp(3.5rem, 10vw, 5rem) var(--gutter) 2.5rem;
  text-align: center;
}
.site-footer__inner { max-width: 640px; margin: 0 auto; }
.site-footer__logo { width: 180px; margin: 0 auto 1.25rem; }
.site-footer__contact {
  margin: 0 0 2rem;
  font-family: var(--font-head);
  font-weight: 500;
  letter-spacing: .12em;
}
.site-footer__contact a { color: var(--gold); text-decoration: none; }
.site-footer__contact a:hover { text-decoration: underline; }
.site-footer .rule { background: rgba(255, 255, 255, .2); margin-bottom: 1.5rem; }
.site-footer__legal,
.site-footer__copy {
  margin: 0 0 .5rem;
  color: rgba(255, 255, 255, .7);
  font-size: .9rem;
}

/* ==========================================================================
   Buttons + age gate
   ========================================================================== */
.btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  min-width: 8.5rem;
  padding: .85rem 1.5rem;
  border: 1px solid var(--gold);
  border-radius: 2px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.btn--gold { background: var(--gold); color: var(--blue); }
.btn--gold:hover { background: #d9b649; }
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .5); }
.btn--ghost:hover { border-color: var(--white); }

.age-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: var(--blue);
}
.age-gate[hidden] { display: none; }
.age-gate__panel { max-width: 26rem; text-align: center; }
.age-gate__logo { width: min(260px, 70vw); margin: 0 auto 2.5rem; }
.age-gate__note { margin: .75rem 0 2rem; color: rgba(255, 255, 255, .75); }
.age-gate__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.age-gate__denied { margin-top: 1.5rem; color: var(--gold); }

body.gated { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}