/* ==========================================================================
   HerbXMedica — base.css
   Reset, document defaults, typography, container, utility classes and the
   reveal-engine base states. No component styling lives here.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

body {
  margin: 0;
  background: var(--hxm-paper);
  color: var(--hxm-ink);
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-xs);
  font-weight: 400;
  line-height: var(--hxm-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.hxm-no-scroll { overflow: hidden; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; }
p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

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

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

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

table { border-collapse: collapse; width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--hxm-line);
  margin: 0;
}

summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

::selection {
  background: var(--hxm-leaf);
  color: var(--hxm-forest-deep);
}

/* ---------- Focus --------------------------------------------------------- */
:focus { outline: none; }

:focus-visible {
  outline: var(--hxm-focus-ring);
  outline-offset: var(--hxm-focus-offset);
  border-radius: var(--hxm-r-xs);
}

.hxm-skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: var(--hxm-z-preloader);
  padding: 12px 20px;
  background: var(--hxm-leaf);
  color: var(--hxm-forest-deep);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-3xs);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  border-radius: 0 0 var(--hxm-r-xs) var(--hxm-r-xs);
  transition: top var(--hxm-t-base) var(--hxm-ease);
}

.hxm-skip-link:focus { top: 0; }

/* ---------- Typography ---------------------------------------------------- */
.hxm-display,
.hxm-h1, .hxm-h2, .hxm-h3, .hxm-h4 {
  font-family: var(--hxm-font-display);
  font-weight: 700;
  line-height: var(--hxm-lh-tight);
  letter-spacing: var(--hxm-ls-tight);
  color: var(--hxm-ink);
}

.hxm-h1 { font-size: var(--hxm-fs-3xl); }
.hxm-h2 { font-size: var(--hxm-fs-2xl); }
.hxm-h3 { font-size: var(--hxm-fs-lg); line-height: var(--hxm-lh-snug); }
.hxm-h4 { font-size: var(--hxm-fs-md); line-height: var(--hxm-lh-snug); font-weight: 600; }

.hxm-lead {
  font-size: var(--hxm-fs-md);
  line-height: 1.55;
  color: var(--hxm-muted);
}

.hxm-body-lg { font-size: var(--hxm-fs-sm); }

.hxm-label {
  font-family: var(--hxm-font-label);
  font-weight: 600;
  font-size: var(--hxm-fs-3xs);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
}

.hxm-deva { font-family: var(--hxm-font-deva); }

.hxm-muted { color: var(--hxm-muted); }
.hxm-on-dark { color: var(--hxm-on-dark); }
.hxm-on-dark-muted { color: var(--hxm-on-dark-muted); }

/* Eyebrow — the mono "spec label" that recurs across every section */
.hxm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hxm-font-label);
  font-weight: 600;
  font-size: var(--hxm-fs-3xs);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-green);
  line-height: 1;
}

.hxm-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--hxm-leaf);
  flex: none;
}

.hxm-eyebrow--on-dark { color: var(--hxm-leaf); }

.hxm-eyebrow--plain::before { display: none; }

/* ---------- Layout -------------------------------------------------------- */
.hxm-container {
  width: 100%;
  max-width: calc(var(--hxm-container) + var(--hxm-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--hxm-pad-x);
}

.hxm-container--wide { max-width: 1560px; }
.hxm-container--narrow { max-width: 860px; }

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

.hxm-section--tight { padding-block: var(--hxm-section-y-sm); }

/* Visual peaks — the sections that should stop the scroll */
.hxm-section--feature { padding-block: var(--hxm-section-y-lg); }
.hxm-section--flush-top { padding-top: 0; }
.hxm-section--flush { padding-block: 0; }
.hxm-section--mist { background: var(--hxm-mist); }
.hxm-section--forest { background: var(--hxm-forest); color: var(--hxm-on-dark); }

.hxm-section--forest .hxm-h1,
.hxm-section--forest .hxm-h2,
.hxm-section--forest .hxm-h3,
.hxm-section--forest .hxm-h4 { color: var(--hxm-on-dark); }

/* Section head — eyebrow + title + optional link, used by most sections */
.hxm-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.hxm-sec-head__text { max-width: 640px; }

.hxm-sec-head__title {
  font-family: var(--hxm-font-display);
  font-weight: 700;
  font-size: var(--hxm-fs-2xl);
  line-height: var(--hxm-lh-tight);
  letter-spacing: var(--hxm-ls-tight);
  margin-top: 14px;
  text-wrap: balance;
}

.hxm-sec-head__sub {
  margin-top: 12px;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-sm);
  line-height: 1.6;
  max-width: 54ch;
}

.hxm-sec-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hxm-sec-head--center .hxm-sec-head__sub { margin-inline: auto; }

.hxm-sec-head--on-dark .hxm-sec-head__title { color: var(--hxm-on-dark); }
.hxm-sec-head--on-dark .hxm-sec-head__sub { color: var(--hxm-on-dark-muted); }

/* Grid helpers */
.hxm-grid { display: grid; gap: 24px; }
.hxm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hxm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hxm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hxm-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ---------- Utilities ----------------------------------------------------- */
.hxm-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;
}

.hxm-hairline {
  height: 1px;
  background: var(--hxm-line);
  border: 0;
}

.hxm-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hxm-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hxm-is-hidden { display: none; }

/* Media frames — the one organic device, applied deliberately */
.hxm-media {
  position: relative;
  overflow: hidden;
  background: var(--hxm-mist);
  border-radius: var(--hxm-r-md);
}

.hxm-media--arc { border-radius: var(--hxm-leaf-arc); }
.hxm-media--arc-sm { border-radius: var(--hxm-leaf-arc-sm); }

.hxm-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hxm-ratio-1x1 { aspect-ratio: 1 / 1; }
.hxm-ratio-4x3 { aspect-ratio: 4 / 3; }
.hxm-ratio-3x4 { aspect-ratio: 3 / 4; }
.hxm-ratio-16x9 { aspect-ratio: 16 / 9; }

/* Fine lab grid used on dark panels — the "science" texture */
.hxm-labgrid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--hxm-on-dark-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--hxm-on-dark-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 0%, black 0%, transparent 72%);
  opacity: 0.5;
}

/* ---------- Reveal engine (driven by animations.js) ----------------------- */
[data-animate] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: var(--hxm-reveal-duration, 600ms);
  transition-timing-function: var(--hxm-ease);
  transition-delay: var(--hxm-reveal-delay, 0ms);
}

[data-animate="fade-up"]     { transform: translate3d(0, 24px, 0); }
[data-animate="fade-in"]     { transform: none; }
[data-animate="zoom-in"]     { transform: scale(0.94); }
[data-animate="slide-left"]  { transform: translate3d(32px, 0, 0); }
[data-animate="slide-right"] { transform: translate3d(-32px, 0, 0); }

[data-animate="mask-up"] {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 12px, 0);
  transition-property: clip-path, transform;
}

[data-animate].hxm-revealed {
  opacity: 1;
  transform: none;
}

[data-animate="mask-up"].hxm-revealed { clip-path: inset(0 0 -14% 0); }

/* Headline word masks — spans are injected by animations.js */
.hxm-words { display: block; }

.hxm-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.hxm-word > span {
  display: inline-block;
  transform: translate3d(0, 115%, 0);
  transition: transform 760ms var(--hxm-ease-out);
  transition-delay: var(--hxm-word-delay, 0ms);
}

.hxm-words.hxm-revealed .hxm-word > span { transform: none; }

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

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

  [data-animate],
  [data-animate="mask-up"] {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .hxm-word > span { transform: none; }
}

/* ---------- Inline icon sprite (hidden, referenced via <use>) -------------- */
.hxm-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}