/* ==========================================================================
   GLM · Hair Loss · Option C — Botanical Science Magazine
   Art-direction-led: warm paper surfaces, refined asymmetry, oversized serif,
   drop caps, botanical textures as composition, editorial "departments".
   Mirrors the homepage C direction. Treatment-specific sections use the -c
   suffix. Tokens come from base.css.
   ========================================================================== */

.opt-c { background: var(--paper); }
.opt-c em { font-style: italic; color: var(--cypress); }
.opt-c ::selection { background: rgba(138,144,101,.22); }

/* ============================================================
   MASTHEAD HERO — asymmetric magazine cover
   ============================================================ */
.tcl-header--c { background: rgba(243, 234, 218, .9); }
.hero-c { padding-top: clamp(40px, 7vw, 84px); position: relative; overflow: hidden; }
.hero-c__grid {
  display: grid; grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(32px, 5vw, 76px); align-items: center;
  padding-bottom: clamp(24px, 4vw, 48px);
}
.hero-c__folio {
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--stucco); margin: 0 0 22px;
}
.hero-c__title {
  font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: 1.02; letter-spacing: -.02em;
  margin: 0;
}
.hero-c__rule { width: 56px; height: 2px; background: var(--cypress); margin: 26px 0; border: 0; }
.hero-c__sub { margin-bottom: 30px; }
.hero-c__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.hero-c__priceline { font-size: 13.5px; color: var(--shiitake); letter-spacing: .02em; }
.hero-c__priceline strong { font-family: var(--serif); font-size: 18px; color: var(--cypress-deep); }
.hero-c__priceline span { text-decoration: line-through; opacity: .6; }

.hero-c__media { position: relative; }
.hero-c__plate {
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow);
  aspect-ratio: 4/5; background: var(--paper-deep);
}
.hero-c__plate img { width: 100%; height: 100%; object-fit: cover; }
.hero-c__chip { position: absolute; top: 18px; left: 18px; background: rgba(250,245,233,.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-c__caption {
  font-size: 13px; color: var(--shiitake); margin-top: 14px; font-family: var(--serif);
  max-width: 38ch;
}

.hero-c__byline {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--stucco);
  padding-top: 22px; border-top: 1px solid var(--rule); margin-bottom: clamp(40px, 6vw, 80px);
}

/* ============================================================
   THE SCIENCE OF EXOSOMES + MICRONEEDLING — editorial spread
   ============================================================ */
.science-c { background: var(--paper); }
.science-c__head { margin-bottom: clamp(32px, 4vw, 52px); }
.science-c__head h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-top: 14px; max-width: 18ch; letter-spacing: -.015em; }

.science-c__body {
  display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.science-c__col p { font-size: clamp(1.02rem, 1.3vw, 1.16rem); line-height: 1.78; color: var(--jet); }
.science-c__col p + p { margin-top: 18px; }
.dropcap::first-letter {
  font-family: var(--serif); font-weight: 600; color: var(--cypress);
  font-size: 3.6em; line-height: .82; float: left;
  padding: 6px 14px 0 0; margin-top: 4px;
}

.science-c__aside { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 92px; }
.science-c__aside-img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-sm); }
.science-c__aside-img img { width: 100%; height: 100%; object-fit: cover; }
.science-c__pull { border-left: 2px solid var(--cypress); padding: 4px 0 4px 20px; margin: 0; }
.science-c__pull p { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--cypress-deep); }

.science-c__wide { margin-top: clamp(36px, 5vw, 60px); border-radius: var(--r-xl); overflow: hidden; position: relative; box-shadow: var(--shadow-sm); }
.science-c__wide img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 21/9; }
.science-c__wide figcaption {
  position: absolute; left: 18px; bottom: 16px; right: 18px;
  color: #f7efde; font-family: var(--serif); font-style: italic; font-size: 14px;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

/* ============================================================
   IYASHI EXOSOMES — botanical ingredient language
   ============================================================ */
.iyashi-c { background: var(--paper-soft); border-block: 1px solid var(--line); }
.iyashi-c__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.iyashi-c__media { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow); }
.iyashi-c__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.iyashi-c__media figcaption {
  position: absolute; left: 16px; bottom: 16px; color: #f7efde; font-family: var(--serif);
  font-style: italic; font-size: 15px; text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.iyashi-c__body h2 { font-size: clamp(2rem, 3.8vw, 3rem); margin: 14px 0 18px; letter-spacing: -.012em; }
.iyashi-c__body p { color: var(--jet-60); font-size: 15.5px; line-height: 1.7; }
.iyashi-c__body p + p { margin-top: 14px; }
.iyashi-c__body strong { color: var(--cypress-deep); font-weight: 600; }
.iyashi-c__profile { margin: 26px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.iyashi-c__profile dt { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--stucco); margin-bottom: 4px; }
.iyashi-c__profile dd { margin: 0; font-family: var(--serif); font-size: 15px; color: var(--cypress-deep); line-height: 1.35; }
.iyashi-c__aside { font-size: 14px; color: var(--jet-60); line-height: 1.6; }
.iyashi-c__aside em { color: var(--cypress-deep); font-style: italic; }

/* ============================================================
   BENEFITS — editorial index (apothecary style)
   ============================================================ */
.apoth-c__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.apoth-c__head h2 { font-size: clamp(2rem, 3.8vw, 3rem); margin-top: 14px; }
.apoth-c__all { color: var(--cypress); font-weight: 600; font-size: 14.5px; white-space: nowrap; padding-bottom: 4px; }
.apoth-c__all:hover { text-decoration: underline; text-underline-offset: 4px; }
.apoth-c__list { list-style: none; margin: 0; padding: 0; }
.apoth-c__row {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 2.6vw, 36px);
  align-items: start; padding: clamp(20px, 2.4vw, 28px) 0; border-top: 1px solid var(--rule);
  transition: background-color .2s var(--ease);
}
.apoth-c__row:last-child { border-bottom: 1px solid var(--rule); }
.apoth-c__row:hover { background: rgba(138,144,101,.05); }
.apoth-c__no { font-family: var(--serif); font-size: 1.3rem; color: var(--stucco); }
.apoth-c__topline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.apoth-c__topline h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--cypress-deep); }
.apoth-c__badge {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cypress-deep); background: rgba(138,144,101,.18); padding: 5px 10px; border-radius: 999px;
}
.apoth-c__body p { color: var(--jet-60); font-size: 14.5px; max-width: 60ch; }
.apoth-c__note {
  margin-top: 30px; max-width: 72ch; font-size: 14px; color: var(--jet-60);
  padding: 16px 20px; background: var(--paper-card); border-left: 3px solid var(--sage); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.apoth-c__note em { color: var(--cypress-deep); }

/* ============================================================
   PROCEDURE — quiet timeline with images
   ============================================================ */
.proc-c { background: var(--paper-soft); border-block: 1px solid var(--line); }
.proc-c__head { max-width: 62ch; margin-bottom: 40px; }
.proc-c__head h2 { font-size: clamp(2rem, 3.8vw, 3rem); margin: 14px 0 14px; }
.proc-c__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; }
.proc-c__step { display: flex; flex-direction: column; gap: 12px; }
.proc-c__img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-sm); margin: 0; }
.proc-c__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.proc-c__step:hover .proc-c__img img { transform: scale(1.04); }
.proc-c__num { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--sage); }
.proc-c__step h3 { font-size: 1.25rem; color: var(--cypress-deep); line-height: 1.2; }
.proc-c__step p { font-size: 13.5px; color: var(--jet-60); line-height: 1.55; }
.proc-c__step--feature h3 { color: var(--cypress-deep); }
.proc-c__step--feature .proc-c__num { color: var(--cypress); }
.proc-c__substeps { margin-top: 30px; font-size: 13px; color: var(--jet-40); font-style: italic; max-width: 70ch; }

/* ============================================================
   CASE STUDY — single before/after
   ============================================================ */
.case-c__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 4vw, 60px); align-items: center; }
.case-c__copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: 16px 0 16px; letter-spacing: -.012em; }
.case-c__copy .lede { margin-bottom: 16px; }
.case-c__note { font-size: 13px; color: var(--jet-40); font-style: italic; margin-bottom: 22px; }
.case-c__media .ba-slider { border-radius: var(--r-xl); }

/* ============================================================
   PULL QUOTE
   ============================================================ */
.quote-c { background: var(--cypress-deep); color: #f3eada; }
.quote-c blockquote { max-width: 32ch; margin: 0 auto; text-align: center; padding: clamp(48px, 7vw, 88px) 0; }
.quote-c__mark { font-family: var(--serif); font-size: 96px; line-height: .2; color: var(--sage); display: block; margin-bottom: 14px; }
.quote-c__body { font-family: var(--serif); font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.34; font-style: italic; }
.quote-c__body em { color: #cdd9a8; }
.quote-c footer { margin-top: 26px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.quote-c__who { font-weight: 600; font-size: 15px; }
.quote-c__src { font-size: 12.5px; color: rgba(243,234,218,.6); }

/* ============================================================
   FAQ accordion (CSS-only via <details>)
   ============================================================ */
.faq-c { background: var(--paper); }
.faq-c__head { max-width: 60ch; margin-bottom: 34px; }
.faq-c__head h2 { font-size: clamp(2rem, 3.8vw, 2.8rem); margin-top: 12px; }
.faq-c__list { display: flex; flex-direction: column; max-width: 920px; }
.faq-c__item { border-bottom: 1px solid var(--rule); }
.faq-c__item:first-child { border-top: 1px solid var(--rule); }
.faq-c__item summary {
  list-style: none; cursor: pointer; padding: 20px 0;
  font-family: var(--serif); font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--cypress-deep);
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  transition: color .15s var(--ease);
}
.faq-c__item summary::-webkit-details-marker { display: none; }
.faq-c__item summary:hover { color: var(--cypress); }
.faq-c__item[open] summary { color: var(--cypress); }
.faq-c__icon {
  flex: none; width: 22px; height: 22px; position: relative; border-radius: 999px; border: 1.5px solid var(--sage);
}
.faq-c__icon::before, .faq-c__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--cypress); transition: transform .2s var(--ease);
}
.faq-c__icon::before { width: 10px; height: 1.5px; }
.faq-c__icon::after { width: 1.5px; height: 10px; }
.faq-c__item[open] .faq-c__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-c__item summary:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.faq-c__answer { padding: 0 0 22px; color: var(--jet-60); font-size: 14.5px; line-height: 1.7; max-width: 70ch; }

/* ============================================================
   FORM (lighter enquiry)
   ============================================================ */
.form-c { background: var(--paper-soft); border-top: 1px solid var(--line); }
.form-c__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
.form-c__copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin: 16px 0 18px; }
.form-c__points { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.form-c__points li { padding-left: 26px; position: relative; font-size: 14.5px; color: var(--jet-60); list-style: none; }
.form-c__points li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--sage); font-size: 13px; }
.form-c__form { background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-sm); }
.form-c__ok { color: var(--cypress); font-size: 14px; background: rgba(138,144,101,.1); padding: 12px 14px; border-radius: var(--r-sm); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .hero-c__grid { grid-template-columns: 1fr; }
  .hero-c__media { max-width: 480px; order: -1; }
  .science-c__body { grid-template-columns: 1fr; }
  .science-c__aside { position: static; flex-direction: row; flex-wrap: wrap; }
  .science-c__aside-img { flex: 1 1 240px; }
  .science-c__pull { flex: 1 1 240px; }
  .iyashi-c__grid { grid-template-columns: 1fr; }
  .apoth-c__row { grid-template-columns: auto 1fr; }
  .proc-c__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-c__grid { grid-template-columns: 1fr; }
  .form-c__grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .hero-c__title { font-size: clamp(2.2rem, 10vw, 3rem); }
  .science-c__wide img { aspect-ratio: 16/9; }
  .iyashi-c__profile { grid-template-columns: 1fr; }
  .proc-c__grid { grid-template-columns: 1fr; }
  .form-c__form { padding: 22px; }
}