/* Hormone Therapy for Women. Uses --apex-pink, the accent already scoped to
   women's content on /womens-optimal-health. No other new colours. */

.hr-sec { max-width: var(--apex-max); margin: 0 auto; padding: 88px var(--apex-gutter); }
.hr-kicker { font: 800 12px/1 var(--apex-font-mono); letter-spacing: .16em;
             text-transform: uppercase; color: var(--apex-pink); }
.hr-kicker-light { color: #f08ab4; }
.hr-head { max-width: 780px; margin-bottom: 44px; }
.hr-head-mid { max-width: 820px; margin-left: auto; margin-right: auto; text-align: center; }
.hr-sec h2 { margin: 18px 0 16px; font-size: clamp(28px, 3.3vw, 42px); font-weight: 900;
             line-height: 1.07; letter-spacing: -.02em; }
.hr-lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--apex-body); }
.hr-sec p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.7; color: var(--apex-body); }
.hr-sec p:last-child { margin-bottom: 0; }
.hr-note { font-size: 14.5px !important; color: var(--apex-muted) !important; }
.hr-center { margin-top: 40px; }
.hr-disclaim { margin-top: 28px !important; font-size: 13.5px !important;
               line-height: 1.6 !important; color: var(--apex-muted) !important;
               max-width: 70ch; }

.btn-pink, a.btn-pink { background: var(--apex-pink); color: #fff; }
.btn-pink:hover, a.btn-pink:hover { background: var(--apex-pink-dark); color: #fff; }
.btn-ghost-light, a.btn-ghost-light { background: transparent; color: #fff;
                      box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.btn-ghost-light:hover, a.btn-ghost-light:hover { color: #fff;
                      background: rgba(255,255,255,.12);
                      box-shadow: inset 0 0 0 1.5px #fff; }

/* ---------------------------------------------------------------- hero */
/* A light hero, built around Blake's photograph ("pretty woman grey
   background", flipped left-to-right so she faces into the page): pale grey
   fabric fills the left of the frame and the copy sits on it in ink.
   --hr-ground is sampled from the photo itself (#f1f1f1) so the section edge
   and the photo meet with no visible seam. */
.hr-hero { --hr-ground: #f1f1f1;
           position: relative; isolation: isolate; background: var(--hr-ground);
           overflow: hidden; min-height: 760px; display: flex; align-items: center; }
/* Placed relative to the COPY, not the screen edge. --hr-col is where the
   content column starts at any width; the photo starts 40px before it. At the
   hero's ~836px height the photo is ~1,545px wide, so her near arm (41% in)
   lands just past the copy block and her face (68% in) stays fully on screen
   from 1,280px up to 2,000px+. Checked at 1280/1440/1680/2000. The photo was mirrored and outpainted with fabric around
   her (Higgsfield, 2026-09-18), so both edges it fades on are fabric. */
.hr-hero { --hr-col: max(var(--apex-gutter), calc((100% - var(--apex-max)) / 2 + var(--apex-gutter))); }
.hr-hero-bg { position: absolute; top: 0; bottom: 0; z-index: -1;
              left: calc(var(--hr-col) - 40px); right: auto;
              height: 100%; width: auto; max-width: none;
              -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 95%, transparent 100%);
                      mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 95%, transparent 100%); }
/* the wash only backs the copy block and stops before her arm begins */
.hr-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
                  background: linear-gradient(90deg, rgba(241,241,241,.94) 0%,
                              rgba(241,241,241,.8) calc(var(--hr-col) + 420px),
                              rgba(241,241,241,0) calc(var(--hr-col) + 600px)); }
.hr-hero-in { max-width: var(--apex-max); margin: 0 auto; width: 100%;
              padding: 72px var(--apex-gutter); }
.hr-hero-copy { max-width: 580px; }
.hr-hero h1 { margin: 18px 0 18px; color: var(--apex-ink); font-weight: 900;
              font-size: clamp(32px, 4vw, 52px); line-height: 1.05;
              letter-spacing: -.025em; max-width: 19ch; }
.hr-hero-sub { margin: 0 !important; color: var(--apex-ink-soft) !important;
               font-size: 17.5px !important; line-height: 1.6 !important; max-width: 44ch; }

.hr-hero-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
                 max-width: 520px; margin: 30px 0 24px; padding: 20px 24px;
                 border-radius: var(--apex-radius); background: rgba(255,255,255,.86);
                 box-shadow: 0 10px 30px rgba(23,20,15,.08), inset 0 0 0 1px rgba(23,20,15,.06); }
.hr-offer-price { font-size: 40px; font-weight: 900; line-height: 1; color: var(--apex-ink);
                  letter-spacing: -.03em; }
.hr-offer-what { margin-top: 6px; font: 800 11px/1.4 var(--apex-font-mono);
                 letter-spacing: .14em; text-transform: uppercase; color: var(--apex-pink); }
.hr-hero-offer .btn { margin-left: auto; }

.hr-hero-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
                 max-width: 540px; margin: 0; padding: 0; list-style: none; }
.hr-hero-trust li { position: relative; padding-left: 20px; font-size: 14.5px;
                    line-height: 1.45; color: var(--apex-ink-soft); font-weight: 600; }
.hr-hero-trust li::before { content: ""; position: absolute; left: 0; top: 6px;
                    width: 8px; height: 8px; border-radius: 50%;
                    background: var(--apex-pink); }

/* ------------------------------------------------------------ symptoms */
.hr-symgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
              margin: 0; padding: 0; list-style: none; }
.hr-symgrid li { border: 1px solid var(--apex-rule); border-radius: var(--apex-radius);
                 overflow: hidden; background: var(--apex-bg); display: flex;
                 flex-direction: column; }
.hr-symgrid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.hr-symgrid span { padding: 14px 16px; font-size: 14.5px; font-weight: 700;
                   line-height: 1.35; color: var(--apex-ink); }
.hr-also { margin: 22px 0 0 !important; font-size: 15px !important;
           color: var(--apex-ink-soft) !important; }

/* --------------------------------------------------------------- cause */
.hr-alt { background: var(--apex-bg-alt); max-width: none; }

.hr-dark { background: var(--apex-ink); max-width: none; color: #fff; }
/* Full-bleed sections: the background runs edge to edge, the content sits in
   the same column as every other section. Done with padding on the section,
   not auto margins on its children, because any child that sets margin: 0
   (lists, grids, paragraphs) silently cancelled the centering and drifted
   left on screens wider than --apex-max. */
.hr-alt, .hr-dark {
  padding-left:  max(var(--apex-gutter), calc((100% - var(--apex-max)) / 2 + var(--apex-gutter)));
  padding-right: max(var(--apex-gutter), calc((100% - var(--apex-max)) / 2 + var(--apex-gutter)));
}

.hr-dark h2 { color: #fff; }
.hr-dark p { color: #d9d2ca; }

.hr-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.hr-split-wide { grid-template-columns: 1.1fr .9fr; align-items: center; }
.hr-split-photo { grid-template-columns: .8fr 1.2fr; align-items: center; }
.hr-fig { margin: 0; }
.hr-fig img { width: 100%; height: auto; display: block; border-radius: var(--apex-radius); }
.hr-portrait { margin: 0; }
.hr-portrait img { width: 100%; max-width: 420px; height: auto; display: block;
                   border-radius: var(--apex-radius); }

.hr-causes { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; padding: 0;
             list-style: none; }
.hr-causes li { padding: 8px 14px; border-radius: 999px; background: var(--apex-bg);
                border: 1px solid var(--apex-rule); font: 600 13.5px/1 var(--apex-font-ui);
                color: var(--apex-ink-soft); }
.hr-cause-cards { display: flex; flex-direction: column; gap: 18px; }
.hr-card { border: 1px solid var(--apex-rule); border-left: 3px solid var(--apex-pink);
           border-radius: var(--apex-radius); padding: 24px; background: var(--apex-bg); }
.hr-card h3 { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
.hr-card p { font-size: 15.5px !important; }
.hr-card-note { color: var(--apex-ink-soft) !important; font-weight: 600; }

/* ------------------------------------------------------------ timeline */
.hr-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
               margin: 0 0 26px; padding: 0; list-style: none; }
.hr-timeline li { padding-top: 20px; border-top: 3px solid var(--apex-pink); }
.hr-decade { font-size: 30px; font-weight: 900; letter-spacing: -.02em;
             color: var(--apex-ink); line-height: 1; margin-bottom: 12px; }
.hr-timeline p { font-size: 15.5px !important; }

/* ------------------------------------------- why it happens (to mockup) */
/* --illus is the cream the cropped illustrations sit on; the causes side
   uses exactly that, so the crops have no visible edge */
.hr-why { --plum: #2f1122; --cream: #f9f4ec; --illus: #f7f1ea;
          --rail: max(var(--apex-gutter), calc((100vw - var(--apex-max)) / 2));
          display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
          column-gap: clamp(28px, 3.4vw, 64px);
          padding-left: var(--rail); padding-right: var(--rail);
          background: var(--illus); overflow: hidden; }
.hr-why-panel { position: relative; background: var(--plum); color: #fff;
                border-radius: 0 44% 44% 0 / 0 52% 52% 0;
                /* bleed back out to the viewport edge on the left only */
                margin-left: calc(-1 * var(--rail));
                padding: clamp(56px, 5vw, 78px) clamp(40px, 3.6vw, 68px)
                         clamp(56px, 5vw, 78px)
                         calc(var(--rail) + clamp(28px, 3vw, 60px));
                display: flex; align-items: center; }
.hr-why-botanical { position: absolute; left: 0; top: 0; height: 100%; width: auto;
                    object-fit: cover; object-position: left center; pointer-events: none; }
.hr-why-panel-in { position: relative; z-index: 1; max-width: 52ch; }
.hr-why-panel h2 { margin: 18px 0 22px; color: #fff; font-size: clamp(28px, 3vw, 44px);
                   font-weight: 900; line-height: 1.08; letter-spacing: -.02em; }
.hr-why-panel p { margin: 0 0 24px; font-size: 16.5px; line-height: 1.7; color: #e3d5dd; }
.hr-why-panel .hr-causes li { background: transparent; border-color: rgba(255,255,255,.4);
                              color: #f3e9ee; }
.hr-why-foot { margin: 28px 0 0 !important; padding-top: 26px;
               border-top: 1px solid rgba(255,255,255,.22); }

.hr-why-causes { background: var(--illus); display: flex; flex-direction: column; justify-content: center;
                 padding: clamp(44px, 4vw, 64px) 0; }
.hr-cause { display: grid; grid-template-columns: minmax(0, 1fr) clamp(160px, 16vw, 240px);
            gap: clamp(16px, 2vw, 32px); align-items: center;
            padding: clamp(24px, 2.4vw, 34px) 0; }
.hr-cause + .hr-cause { border-top: 1px solid #e6dcd0; }
.hr-why-panel-in h2 { max-width: 24ch; }
.hr-cause-n { font: 700 24px/1 var(--apex-font-ui); color: var(--apex-pink);
              letter-spacing: -.01em; }
.hr-cause-copy > h3 { margin: 14px 0 14px; font-size: clamp(26px, 2.6vw, 38px);
                      font-weight: 900; letter-spacing: -.02em; line-height: 1.05;
                      color: var(--apex-ink); }
.hr-cause-copy p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.65;
                   color: var(--apex-ink-soft); }
.hr-cause-copy p:last-child { margin-bottom: 0; }
.hr-cause > img { width: 100%; height: auto; display: block; }

/* ------------------------------------------- perimenopause (to mockup) */
.hr-shift { position: relative; overflow: hidden;
  padding: 96px max(var(--apex-gutter), calc((100% - var(--apex-max)) / 2 + var(--apex-gutter))) 0;
  background:
    radial-gradient(38% 70% at 84% 42%, rgba(240,168,198,.55) 0%, rgba(247,208,224,.35) 45%, rgba(255,255,255,0) 100%),
    linear-gradient(90deg, #fffdfc 0%, #fff7f9 60%, #fdeef3 100%); }
.hr-shift-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .9fr);
                 gap: 32px; align-items: end; }
.hr-shift-copy { padding-bottom: 96px; }
.hr-shift h2 { margin: 18px 0 40px; font-size: clamp(30px, 3.6vw, 48px); font-weight: 900;
               line-height: 1.05; letter-spacing: -.025em; max-width: 24ch; }
.hr-shift-fig { margin: 0; align-self: end; }
.hr-shift-fig img { display: block; width: 100%; max-width: 520px; height: auto;
                    margin-left: auto; }

/* ------------------------------------------------------------ benefits */
.hr-benefit-figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
                   margin-bottom: 44px; }
.hr-benefit-figs figure { margin: 0; }
/* the handoff art carries a bright orb along the bottom edge that reads as a
   white blob on the dark ground — crop it out rather than repaint the art */
.hr-benefit-figs img { width: 100%; height: auto; display: block;
                       aspect-ratio: 5 / 2; object-fit: cover;
                       object-position: center 34%;
                       border-radius: var(--apex-radius); }
.hr-benefit-figs figcaption { margin-top: 14px; font-size: 14.5px; line-height: 1.5;
                              color: #b9b2a9; }
.hr-benefit-figs strong { display: block; font: 800 11px/1.6 var(--apex-font-mono);
                          letter-spacing: .14em; text-transform: uppercase;
                          color: #f08ab4; }
.hr-benefits { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 24px;
               margin: 0; padding: 0; list-style: none; }
.hr-benefits li { position: relative; padding-left: 20px; font-size: 15px;
                  line-height: 1.45; color: #efe9e2; }
.hr-benefits li::before { content: ""; position: absolute; left: 0; top: 6px;
                  width: 8px; height: 8px; border-radius: 50%; background: var(--apex-pink); }

/* --------------------------------------------------------------- steps */
.hr-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
            margin: 0; padding: 0; list-style: none; }
.hr-steps > li { background: var(--apex-bg); border: 1px solid var(--apex-rule);
                 border-radius: var(--apex-radius); overflow: hidden; }
.hr-steps img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.hr-step-n { margin: 22px 24px 0; font: 800 11px/1 var(--apex-font-mono);
             letter-spacing: .16em; text-transform: uppercase; color: var(--apex-pink); }
.hr-steps h3 { margin: 12px 24px 10px; font-size: 19px; font-weight: 800; line-height: 1.25; }
.hr-steps p { margin: 0 24px 24px !important; font-size: 15.5px !important; }

/* ------------------------------------------------------------- methods */
.hr-methods { border-top: 1px solid var(--apex-rule); }
.hr-methods details { border-bottom: 1px solid var(--apex-rule); background: var(--apex-bg); }
.hr-methods summary { list-style: none; cursor: pointer; position: relative;
                      display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
                      padding: 22px 48px 22px 0; }
.hr-methods summary::-webkit-details-marker { display: none; }
.hr-methods summary::after { content: "+"; position: absolute; right: 10px; top: 18px;
                      font: 700 24px/1 var(--apex-font-ui); color: var(--apex-pink); }
.hr-methods details[open] summary::after { content: "\2013"; }
.hr-method-t { font: 800 12px/1 var(--apex-font-mono); letter-spacing: .16em;
               text-transform: uppercase; color: var(--apex-pink); }
.hr-method-s { font-size: 18px; font-weight: 800; letter-spacing: -.01em;
               color: var(--apex-ink); }
.hr-methods summary:hover .hr-method-s { color: var(--apex-pink); }
.hr-methods summary:focus-visible { outline: 3px solid var(--apex-pink); outline-offset: 2px; }
.hr-methods details > div { padding: 0 48px 24px 0; max-width: 80ch; }
.hr-methods details > div p { font-size: 16px !important; }

/* -------------------------------------------------------------- videos */
.hr-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hr-videos figure { margin: 0; }
.hr-videos video { width: 100%; height: auto; display: block; background: #000;
                   border-radius: var(--apex-radius); aspect-ratio: 16 / 9; }
.hr-videos figcaption { margin-top: 12px; font-size: 14.5px; line-height: 1.55;
                        color: var(--apex-body); }
.hr-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
             margin-top: 44px; }
.hr-quotes blockquote { margin: 0; padding: 24px; border-radius: var(--apex-radius);
                        background: var(--apex-pink-tint, #fdf0f6);
                        border: 1px solid #f6dbe7; }
.hr-quotes p { margin: 0 0 14px !important; font-size: 16px !important;
               line-height: 1.6 !important; color: var(--apex-ink) !important;
               font-weight: 600; }
.hr-quotes cite { font: 800 11px/1 var(--apex-font-mono); letter-spacing: .14em;
                  text-transform: uppercase; color: var(--apex-pink); font-style: normal; }

/* ----------------------------------------------------------------- end */
.hr-end { background: var(--apex-ink); padding: 84px var(--apex-gutter); }
.hr-end-in { max-width: 720px; margin: 0 auto; text-align: center; }
.hr-end h2 { margin: 0 0 14px; color: #fff; font-size: clamp(28px, 3.4vw, 44px);
             font-weight: 900; letter-spacing: -.02em; line-height: 1.06; }
.hr-end p { margin: 0 0 30px; color: #d9d2ca; font-size: 17px; line-height: 1.6; }
.hr-end-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Laptop widths: the photo's shoulder reaches ~45% across, so keep the copy
   column narrower than that until the layout stacks. */
@media (min-width: 1101px) and (max-width: 1360px) {
  .hr-hero-copy { max-width: 500px; }
  .hr-hero-trust li { font-size: 13.5px; }
}

@media (max-width: 1100px) {
  .hr-symgrid { grid-template-columns: repeat(3, 1fr); }
  .hr-benefits { grid-template-columns: repeat(3, 1fr); }
  .hr-benefit-figs { grid-template-columns: repeat(2, 1fr); }
  .hr-timeline { grid-template-columns: 1fr 1fr; }
  .hr-why { grid-template-columns: 1fr; padding-left: 0; padding-right: 0; }
  .hr-why-panel { border-radius: 0; margin-left: 0;
                  padding: 64px var(--apex-gutter); }
  .hr-why-botanical { opacity: .8; }
  .hr-why-causes { padding: 8px var(--apex-gutter) 56px; }
  .hr-shift-grid { grid-template-columns: 1fr; gap: 0; }
  .hr-shift-copy { padding-bottom: 40px; }
  .hr-shift-fig img { max-width: 420px; margin: 0 auto; }
  .hr-steps { grid-template-columns: 1fr; }
  .hr-split, .hr-split-wide, .hr-split-photo { grid-template-columns: 1fr; gap: 36px; }
  /* Below 1100px the copy would run across her face. Stack instead: the photo
     is its own band (cropped in on her), the copy follows on the same ground. */
  .hr-hero { display: block; min-height: 0; }
  .hr-hero-bg { position: relative; inset: auto; left: auto; z-index: 0; display: block;
                width: 100%; height: auto; max-width: 100%;
                aspect-ratio: 2 / 1; object-position: 76% top;
                -webkit-mask-image: none; mask-image: none; }
  .hr-hero::after { display: none; }
  .hr-hero-in { padding: 36px var(--apex-gutter) 64px; }
  .hr-hero-copy { max-width: 680px; }
  .hr-hero h1 { max-width: none; }
  .hr-videos, .hr-quotes { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* the mono labels sit at 11-12px on desktop; a notch up on phones,
     where they are read at arm's length on a smaller screen */
  .hr-kicker, .hr-kicker-light { font-size: 12.5px; }
  [class*="hr-"] cite, .hr-offer-what, .hr-tier-tag, .hr-tier-kind,
  .hr-metric-t, .hr-method-t, .hr-step-n, .hr-card-k, .hr-formula-mix,
  .hr-product-meta span, .hr-flip-hint { font-size: 12px; }

  .hr-sec { padding: 56px var(--apex-gutter); }
  .hr-head { margin-bottom: 28px; }
  .hr-symgrid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hr-symgrid span { padding: 12px; font-size: 13.5px; }
  .hr-benefits, .hr-timeline { grid-template-columns: 1fr; }
  .hr-cause { grid-template-columns: 1fr; gap: 12px; }
  .hr-cause > img { max-width: 240px; margin-left: auto; }
  .hr-shift { padding-top: 56px; }
  .hr-shift-fig img { max-width: 300px; }
  .hr-benefit-figs { grid-template-columns: 1fr; }
  /* phone: a squarer crop so her face fills the band */
  .hr-hero-bg { aspect-ratio: 1 / 1; object-position: 70% top; }
  .hr-hero-in { padding: 28px var(--apex-gutter) 52px; }
  .hr-hero-trust { grid-template-columns: 1fr; }
  .hr-hero-offer { padding: 18px; }
  .hr-hero-offer .btn { margin-left: 0; width: 100%; text-align: center;
                        white-space: normal; line-height: 1.35; }
  .hr-center .btn, .hr-end-cta .btn { display: block; width: 100%; text-align: center;
                        white-space: normal; line-height: 1.35; }
  .hr-end { padding: 56px var(--apex-gutter); }
}