@font-face {
  font-family: "EB Garamond Local";
  src: url("eb-garamond-variable.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --paper: #f3eada;
  --paper-light: #faf4e9;
  --paper-deep: #e8dcc8;
  --ink: #212322;
  --cypress: #545a3d;
  --cypress-dark: #303624;
  --sage: #8a9065;
  --shiitake: #796856;
  --stucco: #a49382;
  --line: rgba(33, 35, 34, 0.24);
  --line-light: rgba(255, 255, 255, 0.26);
  --serif: "EB Garamond Local", Georgia, serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.58 var(--sans);
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { display: block; width: 100%; height: auto; }
button, input { font: inherit; }
button, a { color: inherit; }
a { text-underline-offset: 0.2em; }
h1, h2, h3, .serif {
  margin-top: 0;
  font-family: var(--serif);
  font-weight: 480;
  line-height: 0.98;
}
h2 { font-size: clamp(2.7rem, 5vw, 4.9rem); }
h3 { font-size: clamp(1.75rem, 3vw, 2.65rem); }
p, li { max-width: 70ch; }
:focus-visible { outline: 3px solid #1c71a8; outline-offset: 3px; }
[hidden] { display: none !important; }
.shell { width: min(1360px, calc(100% - 64px)); margin-inline: auto; }
.eyebrow {
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.skip {
  position: fixed;
  z-index: 100;
  left: 16px;
  top: -80px;
  padding: 12px 16px;
  background: var(--ink);
  color: white;
}
.skip:focus { top: 16px; }
.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 1px solid var(--cypress);
  background: var(--cypress);
  color: white;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--cypress-dark); }
.button.secondary { background: transparent; color: var(--ink); }
.button.secondary:hover { background: var(--paper-deep); }
.button.dark { background: #171b16; border-color: #171b16; }
.button.light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.button.wide { width: 100%; }
.prototype-note {
  margin: 14px 0 0;
  font-size: 0.78rem;
  color: var(--shiitake);
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(243, 234, 218, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.nav {
  min-height: 76px;
  display: grid;
  grid-template-columns: 190px 1fr auto;
  align-items: center;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  width: 145px;
  color: inherit;
  text-decoration: none;
}
.brand img { height: 29px; object-fit: contain; object-position: left center; }
.site-links { display: flex; justify-content: center; gap: 28px; }
.site-links a { text-decoration: none; border-bottom: 1px solid transparent; }
.site-links a:hover, .site-links a:focus-visible, .site-links a[aria-current="page"] { border-color: currentColor; }
.menu-toggle {
  display: none;
  min-width: 52px;
  min-height: 44px;
  background: transparent;
  border: 1px solid currentColor;
}
.nav-shop { min-width: 152px; }
.section { padding: 104px 0; border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 56px; margin-bottom: 52px; }
.section-heading p { align-self: end; margin: 0; font-size: 1.06rem; }
.section-heading h2 { margin: 10px 0 0; }
.compact-heading { max-width: 740px; margin-bottom: 42px; }
.compact-heading h2 { margin: 10px 0 18px; }
.qty {
  display: grid;
  grid-template-columns: 54px 62px 54px;
  width: max-content;
  border: 1px solid var(--line);
}
.qty button, .qty output {
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
}
.qty button { cursor: pointer; }
.qty button:hover { background: rgba(84, 90, 61, 0.1); }
.qty output { border-inline: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.buy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.buy-feedback {
  min-height: 24px;
  margin: 12px 0 0;
  color: var(--cypress-dark);
  font-weight: 700;
}
.product-kicker { margin: 0 0 10px; }
.product-subtitle { margin: 0 0 18px; font-weight: 700; }
.price-row { display: flex; align-items: baseline; gap: 16px; margin: 18px 0; }
.price { font: 500 clamp(2.45rem, 4vw, 3.7rem)/1 var(--serif); }
.pack { color: var(--shiitake); }
.gst { margin: -8px 0 24px; font-size: 0.78rem; color: var(--shiitake); }
.product-summary { font-size: 1.02rem; }
.gallery-main {
  overflow: hidden;
  border: 1px solid var(--line);
  background: #efe7ea;
}
.gallery-main img { aspect-ratio: 1 / 1; object-fit: cover; }
.gallery-main img.detail-ampoule { object-fit: contain; background: #f0e8ed; }
.gallery-main img.detail-copy { object-fit: cover; }
.gallery-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.gallery-controls button {
  min-height: 48px;
  padding: 8px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
}
.gallery-controls button[aria-pressed="true"] { background: var(--cypress); color: white; }
.facts-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.facts-strip div { padding: 26px 28px; border-right: 1px solid var(--line); }
.facts-strip div:last-child { border: 0; }
.facts-strip b { display: block; margin-bottom: 4px; font-family: var(--serif); font-size: 1.45rem; font-weight: 520; }
.content-grid { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 74px; }
.content-grid aside { align-self: start; position: sticky; top: 110px; }
.content-grid h2 { margin: 10px 0 18px; }
.editorial-copy > *:first-child { margin-top: 0; }
.editorial-copy h3 { margin: 46px 0 14px; }
.editorial-copy li { margin: 9px 0; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.benefit-grid article { padding: 30px; border-right: 1px solid var(--line); }
.benefit-grid article:last-child { border: 0; }
.benefit-grid strong { font: 500 2.2rem/1 var(--serif); color: var(--sage); }
.benefit-grid h3 { margin: 18px 0 10px; font-size: 2rem; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.steps li { min-height: 220px; padding: 30px; border-block: 1px solid var(--line); border-right: 1px solid var(--line); }
.steps li:last-child { border-right: 0; }
.step-number { display: block; margin-bottom: 44px; font: 500 2.5rem/1 var(--serif); color: var(--sage); }
.safety {
  background: var(--cypress-dark);
  color: #f5eddf;
  border-top: 0;
}
.safety h2 { max-width: 11ch; }
.safety-grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 70px; }
.safety-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-light); }
.safety-list li { max-width: none; padding: 18px 0; border-bottom: 1px solid var(--line-light); }
.ingredient-list {
  margin: 0;
  padding: 30px;
  border: 1px solid var(--line);
  background: var(--paper-light);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.34;
}
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.related-grid a { min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; border-right: 1px solid var(--line); text-decoration: none; }
.related-grid a:last-child { border: 0; }
.related-grid a:hover { background: var(--paper-deep); }
.related-grid span { color: var(--shiitake); }
.related-grid b { font: 500 2rem/1.04 var(--serif); }
.consultation { background: var(--paper-deep); }
.consult-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: center; }
.consult-grid h2 { margin: 10px 0 16px; }
.footer { padding: 56px 0 30px; background: var(--ink); color: #eee5d7; }
.footer .brand img { filter: brightness(0) invert(1); }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 48px; }
.footer a { display: block; margin: 8px 0; color: inherit; text-decoration: none; }
.footer small { display: block; margin-top: 38px; color: #bfb7aa; }

/* A — Diagnostic Atlas */
.page-a .utility { background: var(--cypress); color: white; }
.page-a .utility .shell { min-height: 34px; display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; }
.page-a .pdp-hero {
  display: grid;
  grid-template-columns: 42% 43% 15%;
  min-height: 680px;
  border-bottom: 1px solid var(--line);
}
.page-a .gallery-column { padding: 38px 34px 38px max(32px, calc((100vw - 1360px) / 2)); background: var(--paper-light); }
.page-a .buy-box { padding: 72px max(42px, 7vw); display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); }
.page-a .buy-box h1 { margin: 14px 0 18px; font-size: clamp(3.7rem, 5.3vw, 6.3rem); }
.page-a .index-rail { padding: 75px 22px; border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.page-a .index-rail a { padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.page-a .index-rail span { display: block; font: 500 1.8rem/1 var(--serif); color: var(--sage); }
.page-a .file-table { border-top: 1px solid var(--line); }
.page-a .file-row { display: grid; grid-template-columns: 170px 1fr; gap: 28px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.page-a .file-row dt { font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; }
.page-a .file-row dd { margin: 0; }
.page-a .ingredient-index { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.page-a .ingredient-index div { min-height: 160px; padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.page-a .ingredient-index div:nth-child(4n) { border-right: 0; }
.page-a .ingredient-index b { display: block; margin-bottom: 28px; color: var(--sage); font: 500 1.8rem/1 var(--serif); }

/* B — Scalp Observatory */
.page-b { background: #171b16; color: #f5eddf; padding-bottom: 0; }
.page-b .site-header { position: absolute; inset: 0 0 auto; background: rgba(23, 27, 22, 0.88); color: #f5eddf; border-color: var(--line-light); }
.page-b .brand img { filter: brightness(0) invert(1); }
.page-b .pdp-hero { min-height: 820px; display: grid; grid-template-columns: 51% 49%; }
.page-b .dark-buy { padding: 150px 7vw 80px max(36px, calc((100vw - 1360px) / 2)); display: flex; flex-direction: column; justify-content: center; }
.page-b .dark-buy h1 { margin: 18px 0; font-size: clamp(4.4rem, 6.8vw, 8rem); }
.page-b .dark-buy .product-summary { color: #cec7bc; }
.page-b .dark-buy .gst, .page-b .dark-buy .pack { color: #aaa995; }
.page-b .dark-buy .buy-feedback { color: #e1dccf; }
.page-b .dark-buy .qty { border-color: var(--line-light); }
.page-b .dark-buy .qty output { border-color: var(--line-light); }
.page-b .dark-buy .qty button:hover { background: rgba(255, 255, 255, 0.08); }
.page-b .hero-gallery { position: relative; min-width: 0; background: #ded2d6; }
.page-b .hero-gallery .gallery-main { height: 820px; border: 0; }
.page-b .hero-gallery .gallery-main img { height: 100%; object-fit: cover; }
.page-b .hero-gallery .gallery-controls { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 24px; }
.page-b .hero-gallery .gallery-controls button { color: white; border-color: rgba(255,255,255,.55); background: rgba(23,27,22,.75); }
.page-b .hero-gallery .gallery-controls button[aria-pressed="true"] { background: var(--sage); }
.page-b .facts-strip { border-color: var(--line-light); background: #303723; }
.page-b .facts-strip div { border-color: var(--line-light); }
.page-b .section { border-color: var(--line-light); }
.page-b .story-light { background: var(--paper); color: var(--ink); }
.page-b .story-light .section { border-color: var(--line); }
.page-b .observatory-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.page-b .observatory-card { min-height: 360px; padding: 46px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.page-b .observatory-card:nth-child(2n) { border-right: 0; }
.page-b .observatory-card h3 { margin: 60px 0 14px; font-size: 3.2rem; }
.page-b .disclosures { border-top: 1px solid var(--line-light); }
.page-b details { border-bottom: 1px solid var(--line-light); }
.page-b summary { padding: 24px 0; cursor: pointer; font: 500 2.25rem/1.1 var(--serif); }
.page-b details > div { padding: 0 0 28px; color: #d4cdbf; }
.page-b .ingredient-list { color: var(--ink); }
.page-b .safety { background: #303723; }
.page-b .related-grid { border-color: var(--line-light); }
.page-b .related-grid a { border-color: var(--line-light); }
.page-b .related-grid a:hover { background: rgba(255,255,255,.07); }
.page-b .consultation { background: #303723; }
.page-b .footer { background: #0b0d0b; }
.mobile-buy { display: none; }

/* C — Living Formula */
.page-c { color: #263024; }
.page-c .pdp-hero {
  min-height: 800px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.page-c .hero-texture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.page-c .monograph-grid { position: relative; z-index: 1; min-height: 800px; display: grid; grid-template-columns: 1fr 0.95fr 0.9fr; gap: 28px; align-items: center; }
.page-c .monograph-copy h1 { margin: 18px 0; font-size: clamp(4.2rem, 6.4vw, 7.5rem); }
.page-c .monograph-image { padding: 44px; }
.page-c .monograph-image img { box-shadow: 0 20px 55px rgba(38,48,36,.12); }
.page-c .monograph-buy { background: rgba(243,234,218,.96); border: 1px solid var(--line); padding: 34px; box-shadow: 0 20px 55px rgba(38,48,36,.12); }
.page-c .monograph-buy h2 { margin: 4px 0 16px; font-size: 2.6rem; }
.page-c .formula-split { display: grid; grid-template-columns: 36% 64%; border-bottom: 1px solid var(--line); }
.page-c .formula-intro { padding: 94px max(36px, 6vw); border-right: 1px solid var(--line); }
.page-c .formula-intro h2 { margin: 10px 0 20px; }
.page-c .formula-notes { display: grid; grid-template-columns: 1fr 1fr; }
.page-c .formula-notes article { padding: 80px 48px; border-right: 1px solid var(--line); }
.page-c .formula-notes article:last-child { border: 0; }
.page-c .formula-notes h3 { margin: 14px 0; }
.page-c .specimens { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.page-c .specimen { min-height: 530px; padding: 32px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.page-c .specimen:last-child { border: 0; }
.page-c .specimen:nth-child(2) { background-image: url("leaf-texture.webp"); background-size: cover; }
.page-c .specimen:nth-child(4) { background-image: url("liquid-texture-close-up.webp"); background-size: cover; }
.page-c .specimen:nth-child(2)::before, .page-c .specimen:nth-child(4)::before { content: ""; position: absolute; inset: 0; background: rgba(243,234,218,.76); }
.page-c .specimen > * { position: relative; z-index: 1; }
.page-c .specimen-letter { font: 500 5.5rem/1 var(--serif); }
.page-c .specimen h3 { margin: 12px 0; }
.page-c .ingredient-controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 34px; }
.page-c .ingredient-controls button { min-height: 44px; padding: 10px 15px; border: 1px solid var(--cypress); background: transparent; cursor: pointer; }
.page-c .ingredient-controls button[aria-pressed="true"] { background: var(--cypress); color: white; }
.page-c .ingredient-index-c { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.page-c .ingredient-index-c div { padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: opacity .18s ease; }
.page-c .ingredient-index-c div:nth-child(3n) { border-right: 0; }
.page-c .ingredient-index-c div.muted { opacity: 0.3; }
.page-c .ingredient-index-c b { display: block; font-family: var(--serif); font-size: 1.55rem; }
.page-c .safety { background: var(--cypress); }

@media (max-width: 980px) {
  .shell { width: min(100% - 36px, 760px); }
  .nav { min-height: 68px; grid-template-columns: 1fr auto; }
  .nav-shop { display: none; }
  .menu-toggle { display: block; }
  .js .site-links { display: none; }
  .js .site-links.open {
    display: flex;
    position: fixed;
    inset: 68px 0 0;
    z-index: 25;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 26px;
    padding: 68px 24px;
    background: var(--paper);
    color: var(--ink);
    font: 500 1.7rem/1.2 var(--serif);
  }
  .page-b .js .site-links.open { background: #171b16; color: #f5eddf; }
  .section { padding: 76px 0; }
  .section-heading, .content-grid, .safety-grid, .consult-grid { grid-template-columns: 1fr; gap: 24px; }
  .content-grid aside { position: static; }
  .benefit-grid, .steps { grid-template-columns: 1fr; }
  .benefit-grid article, .steps li { border-right: 0; border-bottom: 1px solid var(--line); }
  .benefit-grid article:last-child, .steps li:last-child { border-bottom: 0; }
  .related-grid { grid-template-columns: 1fr 1fr; }
  .related-grid a:nth-child(2) { border-right: 0; }
  .related-grid a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .page-a .utility { display: none; }
  .page-a .pdp-hero { grid-template-columns: 1fr; }
  .page-a .gallery-column { padding: 28px 18px; }
  .page-a .buy-box { padding: 52px 24px; border-left: 0; border-top: 1px solid var(--line); }
  .page-a .index-rail { display: none; }
  .page-a .ingredient-index { grid-template-columns: repeat(2, 1fr); }
  .page-a .ingredient-index div:nth-child(4n) { border-right: 1px solid var(--line); }
  .page-a .ingredient-index div:nth-child(2n) { border-right: 0; }
  .page-b .pdp-hero { grid-template-columns: 1fr; min-height: auto; }
  .page-b .dark-buy { padding: 126px 24px 54px; }
  .page-b .hero-gallery .gallery-main { height: min(112vw, 620px); }
  .page-b .observatory-grid { grid-template-columns: 1fr; }
  .page-b .observatory-card { border-right: 0; min-height: 300px; }
  .page-c .monograph-grid { grid-template-columns: 1fr; padding: 54px 0 72px; }
  .page-c .pdp-hero, .page-c .monograph-grid { min-height: auto; }
  .page-c .monograph-image { padding: 0 48px; }
  .page-c .formula-split { grid-template-columns: 1fr; }
  .page-c .formula-intro { border-right: 0; border-bottom: 1px solid var(--line); padding: 70px 24px; }
  .page-c .formula-notes { grid-template-columns: 1fr; }
  .page-c .formula-notes article { padding: 58px 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .page-c .specimens { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .page-c .specimen { min-width: 82vw; min-height: 480px; scroll-snap-align: start; }
  .page-c .ingredient-index-c { grid-template-columns: 1fr 1fr; }
  .page-c .ingredient-index-c div:nth-child(3n) { border-right: 1px solid var(--line); }
  .page-c .ingredient-index-c div:nth-child(2n) { border-right: 0; }
}

@media (max-width: 560px) {
  h2 { font-size: 2.9rem; }
  .shell { width: calc(100% - 32px); }
  .brand { width: 132px; }
  .site-links { flex-wrap: wrap; justify-content: flex-start; }
  .section { padding: 64px 0; }
  .section-heading { margin-bottom: 34px; }
  .buy-actions { grid-template-columns: 1fr; }
  .facts-strip { grid-template-columns: 1fr 1fr; }
  .facts-strip div:nth-child(2) { border-right: 0; }
  .facts-strip div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .facts-strip div { padding: 20px 16px; }
  .gallery-controls { grid-template-columns: 1fr; }
  .page-a .gallery-controls, .page-b .gallery-controls { grid-template-columns: repeat(3, 1fr); }
  .page-a .gallery-controls button, .page-b .gallery-controls button { font-size: 0.7rem; padding: 5px; }
  .related-grid, .footer-grid { grid-template-columns: 1fr; }
  .related-grid a { border-right: 0; border-bottom: 1px solid var(--line); }
  .related-grid a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .footer-grid > div:first-child { grid-column: auto; }
  .page-a .buy-box h1 { font-size: 3.6rem; }
  .page-a .file-row { grid-template-columns: 1fr; gap: 8px; }
  .page-a .ingredient-index { grid-template-columns: 1fr; }
  .page-a .ingredient-index div { border-right: 0 !important; }
  .page-b { padding-bottom: 76px; }
  .page-b .dark-buy h1 { font-size: 4.1rem; }
  .page-b .hero-gallery .gallery-controls { left: 12px; right: 12px; bottom: 12px; }
  .page-b .facts-strip div { border-color: var(--line-light); }
  .page-b summary { font-size: 1.9rem; }
  .mobile-buy {
    position: fixed;
    z-index: 50;
    inset: auto 0 0;
    min-height: 72px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: #f3eada;
    color: var(--ink);
    border-top: 1px solid var(--line);
  }
  .mobile-buy b { display: block; font-family: var(--serif); font-size: 1.35rem; }
  .mobile-buy span { font-size: 0.74rem; }
  .mobile-buy .button { min-height: 48px; }
  .page-c .monograph-copy h1 { font-size: 4rem; }
  .page-c .monograph-image { padding: 0 20px; }
  .page-c .monograph-buy { padding: 26px; }
  .page-c .ingredient-index-c { grid-template-columns: 1fr; }
  .page-c .ingredient-index-c div { border-right: 0 !important; }
}

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