/* ═══════════════════════════════════════════════════════════════════════
   HYPHAMED — site styles
   Built on the design-system tokens in
   _ds/hyphamed-design-system-27b5e0e3-.../ (imported by index.html first).
   Every colour, space, radius and easing below comes from a token; the only
   raw values are ones the design canvas itself specified literally.
   ═══════════════════════════════════════════════════════════════════════ */

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

img { max-width: 100%; }

button { font: inherit; color: inherit; }

/* Token base.css underlines every <a>; the site opts out and re-adds it
   where a link should read as one. */
a { border-bottom: none; }

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.u-tnum   { font-variant-numeric: tabular-nums; }
.u-right  { text-align: right; }
.u-muted  { color: var(--text-muted); }


/* ── Layout primitives ─────────────────────────────────────────────── */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 4.5vw, 64px);
}

.section { padding-block: clamp(56px, 7vw, 96px); }
.section--flush-bottom { padding-bottom: 0; }
.section--rule-top {
  margin-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--border-hairline);
}

.section--tint {
  background: var(--color-sand-tint);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}


/* ── Design-system components ──────────────────────────────────────── */

/* Eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.eyebrow--on-dark { color: var(--text-on-dark-muted); }
.eyebrow__num { opacity: .6; font-variant-numeric: tabular-nums; }

/* A bare uppercase label — the eyebrow without the number slot. */
.kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* Hairline rule */
.rule {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--border-hairline-strong);
}
.rule--on-dark { background: var(--border-on-dark); }

/* SectionHeading */
.section-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.section-heading__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-heading);
  color: var(--text-heading);
}
.section-heading__desc {
  max-width: var(--measure);
  font-size: var(--text-body-md);
  line-height: var(--leading-body);
  color: var(--text-muted);
}

/* Wordmark */
.wordmark {
  --wm-size: 28px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--wm-size) * .34);
  border-bottom: none;
}
/* The intrinsic width/height attributes on the <img> reserve space and stop
   layout shift, but the height one would also squash the mark — the CSS only
   drives width, so height has to be handed back to the aspect ratio. */
.wordmark__mark { display: block; width: calc(var(--wm-size) * 6.2); height: auto; opacity: .95; }
.wordmark__text {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--wm-size);
  letter-spacing: var(--tracking-wordmark);
  text-indent: var(--tracking-wordmark);
  line-height: 1;
  color: var(--color-deep-bark);
}
.wordmark--ivory .wordmark__text { color: var(--color-ivory-mist); }

/* StatFigure */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-6);
}
.stats--ruled {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-hairline);
}
.stat { display: flex; flex-direction: column; gap: var(--space-2); }
.stat__value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-thin);
  font-size: var(--text-display);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--text-heading);
}
.stat--accent .stat__value { color: var(--accent); }
.stat__unit { font-size: .42em; margin-left: 6px; letter-spacing: .1em; }
.stat__label { margin: 0; font-size: var(--text-body-sm); color: var(--text-muted); }

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  letter-spacing: .16em;
  text-indent: .16em;
  text-transform: uppercase;
  background: var(--color-sand-tint);
  color: var(--text-muted);
}
.badge--outline {
  background: transparent;
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--border-hairline-strong);
}

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border-radius: var(--radius-xs);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  text-indent: .18em;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.btn:active { transform: scale(var(--press-scale)); }
.btn--full { width: 100%; }

.btn--sm { padding: 9px 18px;  font-size: var(--text-caption); letter-spacing: .20em; }
.btn--md { padding: 13px 26px; font-size: var(--text-body-sm); letter-spacing: .18em; }
.btn--lg { padding: 17px 36px; font-size: var(--text-body-sm); letter-spacing: .22em; }

.btn--primary {
  background: var(--color-deep-bark);
  color: var(--color-ivory-mist);
  border-color: var(--color-deep-bark);
}
.btn--primary:hover {
  background: var(--color-bark-tint);
  border-color: var(--color-bark-tint);
}
.btn--accent {
  background: var(--color-hyphae-gold);
  color: var(--color-deep-bark);
  border-color: var(--color-hyphae-gold);
}
.btn--accent:hover {
  background: var(--color-gold-deep);
  border-color: var(--color-gold-deep);
}
.btn--secondary {
  background: transparent;
  color: var(--text-body);
  border-color: var(--border-hairline-strong);
}
.btn--secondary:hover { border-color: var(--color-deep-bark); }


/* ── Utility bar ───────────────────────────────────────────────────── */

.topbar {
  background: #2C231A;
  color: var(--text-on-dark-muted);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.topbar__inner {
  min-height: 38px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.topbar__social {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: var(--space-2);
}
.topbar__social a { display: flex; color: var(--color-ivory-mist); }
.topbar__social a:hover { color: var(--accent); }

/* The lucide icons render at 18px, which is under the 24px minimum tap target.
   Pad the hit area out and cancel it with an equal negative margin, so the
   links get easier to hit without moving anything on screen. */
.topbar__social a,
.footer__social a { padding: 3px; margin: -3px; }

.topbar__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-block: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-ivory-mist);
}
.topbar__links a { color: var(--color-ivory-mist); }
.topbar__links a:hover { color: var(--accent); }
.topbar__sep { width: 1px; height: 11px; background: var(--border-on-dark); }

.cart {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-ivory-mist);
  font: inherit;
}
.cart:hover { color: var(--accent); }
.cart__count { font-variant-numeric: tabular-nums; }

.sound-toggle {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-ivory-mist);
  font: inherit;
  padding: 3px;
  margin: -3px; /* .topbar__social a 와 같은 방식으로 탭 영역만 넓힌다 */
}
.sound-toggle:hover { color: var(--accent); }
.sound-toggle[aria-pressed="false"] { color: var(--text-on-dark-muted); }


/* ── Masthead ──────────────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-deep-bark);
  border-bottom: 1px solid var(--border-hairline);
  box-shadow: 1px 4px 3px rgba(0, 0, 0, .15);
}
.masthead__inner {
  min-height: 78px;
  padding-block: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.masthead__brand { align-items: flex-start; }

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px clamp(16px, 2.4vw, 34px);
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-ivory-mist);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.nav__link i, .nav__link svg { width: 14px; height: 14px; }

.nav__group { position: relative; display: flex; flex-direction: column; align-items: center; }
.nav__menu[hidden] { display: none; }
.nav__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 14px;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  background: var(--color-deep-bark);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
  z-index: 30;
}
.nav__menu-item {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-on-dark);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-ivory-mist);
  text-align: center;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.nav__menu-item:last-child { border-bottom: none; }
.nav__menu-item:hover { background: var(--color-taupe-deep); color: var(--color-ivory-mist); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-xs);
  padding: 8px;
  color: var(--color-ivory-mist);
  cursor: pointer;
}


/* ── Home: hero ────────────────────────────────────────────────────── */

.hero {
  position: relative;
  color: var(--text-on-dark);
  background: var(--color-mycelium-taupe) url('../assets/hero.webp') center top / cover no-repeat;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
/* The photograph carries type, so it needs a scrim to hold contrast. The
   lower-left of the shot is bright, which is where the lede sits — hence the
   floor vignette on top of the left-to-right ramp. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(69, 61, 53, .52), rgba(69, 61, 53, 0) 55%),
    linear-gradient(to right,
      rgba(69, 61, 53, .88) 0%,
      rgba(69, 61, 53, .72) 30%,
      rgba(69, 61, 53, .50) 56%,
      rgba(69, 61, 53, .10) 80%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  /* 42.14vw is the photograph's own aspect ratio (809 / 1920), so between the
     420px floor and the 820px ceiling the hero box matches the image exactly
     and `cover` has nothing to crop vertically. Past the ceiling — ultrawide
     monitors — the box gets relatively wider and cover does trim the height,
     which is why the background is anchored `center top`: the trim comes off
     the bottom of the frame and never off the model's face. */
  min-height: clamp(420px, 42.14vw, 820px);
  padding-block: clamp(48px, 7vw, 128px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-6);
}
.hero__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: clamp(30px, 4.4vw, 60px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-ivory-mist);
  text-wrap: pretty;
}
/* --text-on-dark-muted is calibrated for a flat dark panel; over a photograph
   it drops under 4.5:1. The hero raises the two small text elements toward
   full ivory rather than darkening the photo any further — hierarchy is
   already carried by size and tracking. */
.hero .eyebrow--on-dark { color: rgba(244, 240, 233, .90); }

.hero__lede {
  margin: 0;
  max-width: 46ch;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: rgba(244, 240, 233, .92);
}


/* ── Home: trust row ───────────────────────────────────────────────── */

.trust {
  background: var(--color-ivory-mist);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  padding-block: clamp(40px, 5vw, 72px);
}
.trust__label {
  margin: 0 0 clamp(28px, 3vw, 44px);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.trust__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--color-hyphae-gold);
  border-radius: var(--radius-pill);
  color: var(--color-gold-deep);
  transition: background var(--duration-base) var(--ease-standard);
}
.trust__icon i, .trust__icon svg { width: 24px; height: 24px; }
.trust__item:hover .trust__icon { background: var(--color-gold-tint); }
.trust__name {
  font-family: var(--font-display);
  font-size: var(--text-caption);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-body);
  text-align: center;
}
.trust__note { font-size: 12px; color: var(--text-subtle); text-align: center; }


/* ── Home: products ────────────────────────────────────────────────── */

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(32px, 4vw, 48px);
}
.product {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.product:hover {
  border-color: var(--border-hairline-strong);
  box-shadow: var(--shadow-card);
}
.product__media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--color-sand-tint) center / cover no-repeat;
  overflow: hidden; /* 호버 시 1.03배로 커진 연출 컷이 카드 밖으로 새지 않게 */
}

/* 호버하면 두 번째 연출 컷이 위로 은은하게 디졸브되며 살짝 확대된다.
   커스텀 프로퍼티(--product-alt)에 url()을 담아 ::after로 넘기는 방식은 쓰지 않는다.
   var()를 통과한 상대경로는 선언 위치가 아니라 이 스타일시트(/css/) 기준으로
   풀려서 /css/assets/... 404가 난다. <img src>는 언제나 문서 기준이라 안전하다. */
.product__media-alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.4s ease, transform 0.5s ease;
  pointer-events: none;
}
.product:hover .product__media-alt,
.product:focus-within .product__media-alt {
  opacity: 1;
  transform: scale(1.03);
}

/* 모션을 줄여달라고 한 사용자에게는 확대 없이 디졸브만 남긴다. */
@media (prefers-reduced-motion: reduce) {
  .product:hover .product__media-alt,
  .product:focus-within .product__media-alt { transform: none; }
}

.product__badge { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 1; }

/* 배지와 워터마크는 연한 색이라 어두운 연출 컷 위에서는 읽히지 않는다.
   같은 박자로 함께 빠졌다가 커서가 떠나면 돌아온다. */
.product__badge,
.product__watermark { transition: opacity 0.4s ease; }
.product:hover .product__badge,
.product:hover .product__watermark,
.product:focus-within .product__badge,
.product:focus-within .product__watermark { opacity: 0; }
.product__watermark {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(69, 61, 53, .34);
}
.product__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(22px, 2.2vw, 32px);
}
.product__kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.product__name {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: var(--weight-regular);
  color: var(--text-heading);
}
.product__specs {
  margin: 0;
  padding: var(--space-2) 0 0;
  list-style: none;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--text-muted);
}
.product__price {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--weight-light);
  letter-spacing: .02em;
  color: var(--color-gold-deep);
  font-variant-numeric: tabular-nums;
}
.product__price span { font-size: 13px; letter-spacing: .18em; }
.product__price--b2b {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 22px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.product__price-note {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-subtle);
}
/* The product CTA is an <a> in one card and a <button> in the others. */
.product .btn { margin-top: auto; }


/* ── Home: marks strip ─────────────────────────────────────────────── */

.marks {
  margin-top: clamp(56px, 7vw, 96px);
  background: var(--color-sand-tint);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  padding-block: clamp(36px, 4vw, 64px);
}
.marks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
@media (min-width: 1080px) { .marks__grid { grid-template-columns: repeat(6, 1fr); } }
.marks__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  color: var(--text-muted);
}
.marks__item span {
  font-family: var(--font-display);
  font-size: var(--text-caption);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-body);
}


/* ── Home: measured ────────────────────────────────────────────────── */

.measured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
}
.measured__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-4);
  background: var(--color-sand-tint) center / cover no-repeat;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.measured__watermark {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(69, 61, 53, .34);
}
.measured__body {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 48px);
}


/* ── Benefits ──────────────────────────────────────────────────────── */

.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(28px, 3vw, 48px);
}
.benefit { display: flex; flex-direction: column; gap: var(--space-4); }
.benefit img {
  display: block;
  width: 100%;
  aspect-ratio: 470 / 536;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.benefit__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-h3);
  letter-spacing: 0;
  color: var(--text-heading);
}
.benefit__text {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
  text-wrap: pretty;
}


/* ── Page banners ──────────────────────────────────────────────────── */

.page-banner img {
  display: block;
  width: 100%;
  height: clamp(320px, 52vw, 640px);
  object-fit: cover;
}

.banner { color: var(--text-on-dark); }
.banner--bark  { background: var(--color-deep-bark); }
.banner--taupe { background: var(--color-mycelium-taupe); }
.banner__inner {
  padding-block: clamp(48px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.banner__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-on-dark);
  text-wrap: pretty;
}
.banner__title--sm { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.35; letter-spacing: 0; }
.banner__lede {
  margin: 0;
  max-width: 52ch;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--text-on-dark-muted);
}
.banner__contacts {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  font-size: var(--text-body-sm);
  font-variant-numeric: tabular-nums;
}
.banner__contacts a { color: var(--text-on-dark-muted); }
.banner__contacts a:hover { color: var(--color-ivory-mist); }


/* ── About: intro ──────────────────────────────────────────────────── */

.intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 80px);
}
.intro__body { display: flex; flex-direction: column; gap: var(--space-6); }
.intro__lede {
  margin: 0;
  max-width: 64ch;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--text-body);
  text-wrap: pretty;
}
.intro__note {
  margin: 0;
  max-width: 64ch;
  line-height: var(--leading-body);
  color: var(--text-muted);
  text-wrap: pretty;
}


/* ── Steps (process / programme) ───────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(32px, 4vw, 56px);
}
.steps--textonly { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (min-width: 1080px) {
  .steps, .steps--textonly { grid-template-columns: repeat(4, 1fr); }
}
.step { display: flex; flex-direction: column; gap: var(--space-4); }
.step img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.step__title {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: var(--weight-light);
  color: var(--text-heading);
}
.step__text {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
  text-wrap: pretty;
}


/* ── Document cards ────────────────────────────────────────────────── */

.docs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(32px, 4vw, 48px);
}
.doc-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--duration-base) var(--ease-standard);
}
.doc-card:hover { border-color: var(--border-hairline-strong); }
.doc-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--border-hairline);
}
.doc-card__name { font-size: var(--text-body-sm); color: var(--text-heading); }
.doc-card__meta { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }


/* ── About: next step ──────────────────────────────────────────────── */

.next-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}


/* ── Science: clinical panels ──────────────────────────────────────── */

.clinical {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(32px, 4vw, 56px);
}
.panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: clamp(24px, 2.4vw, 32px);
}
.panel--tint { background: var(--color-sand-tint); }
.panel__figure {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: var(--weight-thin);
  line-height: 1;
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}
.panel__figure--accent { color: var(--color-gold-deep); }
.panel__figure-unit { font-size: 22px; letter-spacing: .1em; margin-left: 8px; }
.panel__note {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}

.gauge { display: flex; flex-direction: column; gap: 10px; }
.gauge__track {
  position: relative;
  height: 6px;
  background: var(--color-sand-beige);
  border-radius: var(--radius-pill);
}
.gauge__mark {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--color-gold-deep);
}
.gauge__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.rows { margin: 0; display: flex; flex-direction: column; }
.rows__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: 10px;
  border-top: 1px solid var(--border-hairline);
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}
.rows__row dt, .rows__row dd { margin: 0; }
.rows__row dd { font-variant-numeric: tabular-nums; }

.rows--stacked .rows__row {
  flex-direction: column;
  gap: 4px;
  padding-block: 12px;
}
.rows--stacked dt { font-size: 12px; color: var(--text-subtle); }
.rows--stacked dd { font-size: var(--text-body-sm); color: var(--text-heading); }


/* ── B2B: pricing table ────────────────────────────────────────────── */

.pricing {
  margin-top: clamp(32px, 4vw, 48px);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  background: var(--surface-card);
}
.pricing__table {
  min-width: 720px;
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.pricing__table th,
.pricing__table td { padding: 22px 24px; font-weight: var(--weight-regular); }

.pricing__table thead th {
  padding: 20px 24px;
  background: var(--color-sand-beige);
  border-bottom: 1px solid var(--border-hairline-strong);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-heading);
  vertical-align: bottom;
}
.tier {
  display: block;
  font-variant-numeric: tabular-nums;
  letter-spacing: .16em;
}
.tier__rate {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
.pricing__table thead th.pricing__best .tier { color: var(--color-gold-deep); }

.pricing__table tbody tr { border-bottom: 1px solid var(--border-hairline); }
.pricing__table tbody tr:last-child { border-bottom: none; }
.pricing__table tbody th,
.pricing__table tbody td { font-size: var(--text-body-sm); color: var(--text-heading); }

.pricing__table tbody td.pricing__best {
  background: var(--color-sand-tint);
  color: var(--color-gold-deep);
}
.pricing__only {
  font-family: var(--font-display);
  font-size: var(--text-caption);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.pricing__note {
  margin: var(--space-4) 0 0;
  font-size: 12px;
  color: var(--text-subtle);
}


/* ── Footer ────────────────────────────────────────────────────────── */

.footer {
  margin-top: clamp(56px, 7vw, 96px);
  background: var(--color-deep-bark);
  color: var(--text-on-dark);
}
.footer__cols {
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(32px, 4vw, 64px);
}
.footer__col { display: flex; flex-direction: column; gap: var(--space-4); }
.footer__head {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}
.footer__col a {
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--text-on-dark-muted);
}
.footer__col a:hover { color: var(--color-ivory-mist); }
.footer__social { display: flex; align-items: center; gap: 16px; }
.footer__address,
.footer__tel {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: 1.7;
  color: var(--text-on-dark-muted);
}

.footer__base {
  padding-top: clamp(24px, 3vw, 32px);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--border-on-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
/* The MYCELRIX pictogram links out to the parent company. Block display so the
   anchor hugs the image with no inline baseline gap under it. */
.footer__mark-link {
  display: block;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.footer__mark-link:hover { opacity: .78; }
.footer__mark { width: 100px; height: 92px; object-fit: contain; }
.footer__legal {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: 8px 24px;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}
.footer__certs {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  opacity: .55;
}
.footer__certs button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}
.footer__certs button i, .footer__certs button svg { width: 16px; height: 16px; }
.footer__certs button:hover { color: var(--color-ivory-mist); }
.footer__certs-sep { width: 1px; height: 12px; background: var(--border-on-dark); }


/* ── Document lightbox ─────────────────────────────────────────────── */

.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 48px);
}
.lightbox__scrim {
  position: absolute;
  inset: 0;
  background: var(--surface-overlay);
  backdrop-filter: var(--blur-veil);
  -webkit-backdrop-filter: var(--blur-veil);
}
.lightbox__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--color-ivory-mist);
  border-radius: var(--radius-md);
  padding: clamp(20px, 2.4vw, 32px);
  max-width: 820px;
  width: 100%;
  max-height: 100%;
  overflow: auto;
  box-shadow: var(--shadow-raised);
}
.lightbox__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}
.lightbox__title {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: var(--weight-light);
  color: var(--text-heading);
}
.lightbox__meta { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }
.lightbox__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-body);
}
.lightbox__close:hover { border-color: var(--border-hairline-strong); }
.lightbox__figure {
  border: 1px solid var(--border-hairline);
  background: #fff;
}
.lightbox__figure img { display: block; width: 100%; height: auto; }
.lightbox__file {
  align-self: flex-start;
  padding-bottom: 2px;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  border-bottom: 1px solid var(--color-hyphae-gold);
}

body.is-locked { overflow: hidden; }


/* ── Narrow viewports ──────────────────────────────────────────────── */

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-on-dark);
  }
  .nav.is-open { display: flex; }

  .nav__link {
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-on-dark);
  }
  .nav__group { align-items: stretch; }
  .nav__menu {
    position: static;
    transform: none;
    margin-top: 0;
    min-width: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: rgba(244, 240, 233, .06);
  }
  .nav__menu-item { text-align: left; }

  .topbar__inner { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto !important; }
}