:root {
  --ink: #13151a;
  --ink-soft: #34363c;
  --paper: #f3f0e9;
  --cream: #e7e1d5;
  --coral: #f05b46;
  --coral-dark: #a83225;
  --white: #fffdf9;
  --muted: #66655f;
  --line: rgba(19, 21, 26, 0.16);
  --max: 1240px;
  --radius: 0;
  --shadow: 0 30px 80px rgba(19, 21, 26, 0.14);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", "Avenir Next", Avenir, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
body.menu-open .site-header {
  color: var(--white);
  background: var(--ink);
  border-color: rgba(255,255,255,.12);
  backdrop-filter: none;
}
img { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  color: var(--white);
  background: var(--ink);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.12);
  transition: color .35s ease, background .35s ease, border-color .35s ease;
}
.site-header.is-scrolled {
  color: var(--ink);
  background: rgba(243,240,233,.93);
  border-color: var(--line);
  backdrop-filter: blur(16px);
}
.wordmark {
  position: relative;
  z-index: 52;
  font-family: Manrope, "Avenir Next", system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -.05em;
  text-decoration: none;
}
.wordmark span { color: var(--coral); }
.menu-toggle {
  position: relative;
  z-index: 52;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  font-weight: 700;
  cursor: pointer;
}
nav {
  position: fixed;
  inset: 0;
  z-index: 51;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  padding: 88px 8vw;
  color: var(--white);
  background-color: var(--ink);
  isolation: isolate;
  pointer-events: none;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .5s var(--ease);
}
nav.is-open { pointer-events: auto; transform: translateX(0); visibility: visible; }
nav a { font-size: clamp(1.4rem, 7vw, 2.2rem); font-weight: 650; text-decoration: none; }
.nav-cta { margin-top: 12px; padding: 12px 18px; color: var(--ink); background: var(--coral); }

h1, h2, h3 {
  margin-top: 0;
  font-family: Manrope, "Avenir Next", system-ui, sans-serif;
  line-height: 1.03;
  letter-spacing: -.055em;
}
h1 { font-size: clamp(3.2rem, 14vw, 6.8rem); line-height: .92; }
h2 { font-size: clamp(2.35rem, 10vw, 5rem); }
h3 { font-size: clamp(1.35rem, 5vw, 2rem); }
p { margin-top: 0; }
.eyebrow {
  margin-bottom: 18px;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.coral { color: var(--coral-dark); }

.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  align-items: end;
  overflow: hidden;
  padding: 116px 6vw 70px;
  color: var(--white);
  background: var(--ink);
}
.hero-atmosphere {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(240,91,70,.2), transparent 34rem),
    linear-gradient(180deg, rgba(19,21,26,.02), rgba(19,21,26,.46));
  pointer-events: none;
}
.hero-copy { position: relative; z-index: 3; max-width: 780px; }
.hero h1 { max-width: 850px; margin-bottom: 26px; }
.hero h1 em { color: var(--coral); font-style: normal; }
.hero-intro { max-width: 690px; margin-bottom: 28px; color: rgba(255,253,249,.82); font-size: clamp(1.1rem, 4.8vw, 1.45rem); line-height: 1.5; }
.hero-actions, .closing-actions { display: flex; flex-direction: column; gap: 12px; }
.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 13px 19px;
  border: 1px solid transparent;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--ink); background: var(--coral); }
.button-primary:hover { background: #ff705c; }
.button-secondary { color: inherit; background: transparent; border-color: currentColor; }
.microcopy { max-width: 620px; margin: 15px 0 0; color: rgba(255,253,249,.62); font-size: .82rem; }
.hero-portrait {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  opacity: .34;
}
.hero-portrait::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(19,21,26,.96) 0%, rgba(19,21,26,.75) 45%, rgba(19,21,26,.18) 100%); }
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 56% top; filter: saturate(.78) contrast(1.04); }
.hero-portrait figcaption { display: none; }
.scroll-cue { position: absolute; z-index: 4; right: 6vw; bottom: 22px; display: flex; gap: 12px; align-items: center; color: rgba(255,255,255,.68); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }

.reveal { opacity: 0; transform: translateY(24px); animation: cinematic-in 1s var(--ease) forwards; }
.reveal-1 { animation-delay: .15s; }
.reveal-2 { animation-delay: .34s; }
.reveal-3 { animation-delay: .58s; }
.reveal-4 { animation-delay: .82s; }
.reveal-image { opacity: 0; transform: scale(1.03); animation: image-in 1.7s var(--ease) .05s forwards; }
@keyframes cinematic-in { to { opacity: 1; transform: translateY(0); } }
@keyframes image-in { to { opacity: .34; transform: scale(1); } }

.problem-section, .dose-section, .solutions-section, .fractional-section, .proof-section, .guide-section, .faq-section, .closing {
  padding: 84px 6vw;
}
.problem-section, .dose-section, .fractional-section, .proof-section, .faq-section { max-width: var(--max); margin: auto; }
.section-kicker { display: flex; gap: 16px; align-items: center; margin-bottom: 34px; }
.section-kicker span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: .7rem; font-weight: 750; }
.section-kicker p { margin: 0; color: var(--muted); font-size: .76rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.section-kicker.light span { border-color: rgba(255,255,255,.22); }
.section-kicker.light p { color: rgba(255,255,255,.62); }
.problem-intro { max-width: 900px; }
.problem-intro h2 { margin-bottom: 24px; }
.problem-intro > p { max-width: 700px; color: var(--muted); font-size: 1.1rem; }
.signal-grid { display: grid; gap: 1px; margin-top: 48px; background: var(--line); }
.signal-grid article { padding: 28px 24px; background: var(--paper); }
.signal-grid article > span { display: block; margin-bottom: 42px; color: var(--coral-dark); font-size: .75rem; font-weight: 750; }
.signal-grid h3 { margin-bottom: 16px; }
.signal-grid p { margin: 0; color: var(--muted); }
.stakes { margin: 34px 0 0; padding-left: 18px; border-left: 3px solid var(--coral); color: var(--ink-soft); font-weight: 650; }

.motion-ready .observe .section-kicker, .motion-ready .observe h2, .motion-ready .observe .stagger > *, .motion-ready .observe .dose-grid > *, .motion-ready .observe .solution-grid > *, .motion-ready .observe .case-grid > * { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.motion-ready .observe.is-visible .section-kicker, .motion-ready .observe.is-visible h2, .motion-ready .observe.is-visible .stagger > *, .motion-ready .observe.is-visible .dose-grid > *, .motion-ready .observe.is-visible .solution-grid > *, .motion-ready .observe.is-visible .case-grid > * { opacity: 1; transform: translateY(0); }
.observe.is-visible .stagger > *:nth-child(2), .observe.is-visible .dose-grid > *:nth-child(2), .observe.is-visible .solution-grid > *:nth-child(2), .observe.is-visible .case-grid > *:nth-child(2) { transition-delay: .08s; }
.observe.is-visible .stagger > *:nth-child(3), .observe.is-visible .dose-grid > *:nth-child(3), .observe.is-visible .solution-grid > *:nth-child(3), .observe.is-visible .case-grid > *:nth-child(3) { transition-delay: .16s; }
.observe.is-visible .stagger > *:nth-child(4), .observe.is-visible .dose-grid > *:nth-child(4), .observe.is-visible .solution-grid > *:nth-child(4), .observe.is-visible .case-grid > *:nth-child(4) { transition-delay: .24s; }
.observe.is-visible .case-grid > *:nth-child(5) { transition-delay: .32s; }
.observe.is-visible .case-grid > *:nth-child(6) { transition-delay: .4s; }

.dose-section { border-top: 1px solid var(--line); }
.dose-heading { display: grid; gap: 24px; }
.dose-heading > div:last-child { color: var(--muted); font-size: 1.05rem; }
.dose-grid { display: grid; gap: 1px; margin: 50px 0 30px; background: var(--line); }
.dose-grid article { display: grid; grid-template-columns: 54px 1fr; gap: 14px; padding: 24px; background: var(--white); }
.dose-grid strong { color: var(--coral); font-family: Manrope, system-ui, sans-serif; font-size: 2.2rem; line-height: 1; }
.dose-grid h3 { margin-bottom: 8px; font-size: 1.35rem; }
.dose-grid p { margin: 0; color: var(--muted); }
.method-actions { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.text-link { font-weight: 750; text-underline-offset: 5px; }
.method-note, .proof-note { margin: 24px 0 0; color: var(--muted); font-size: .78rem; }

.solutions-section { max-width: none; color: var(--white); background: var(--ink); }
.solutions-section > * { max-width: var(--max); margin-right: auto; margin-left: auto; }
.solution-heading p { max-width: 640px; color: rgba(255,255,255,.66); font-size: 1.05rem; }
.solution-grid { display: grid; gap: 1px; margin-top: 44px; background: rgba(255,255,255,.15); }
.solution-grid article { display: flex; min-height: 310px; flex-direction: column; padding: 28px 24px; background: var(--ink); }
.solution-grid article.featured { background: #202329; }
.solution-level, .case-type { color: var(--coral); font-size: .7rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.solution-grid h3 { margin: auto 0 14px; }
.solution-grid article > p:not(.solution-level) { color: rgba(255,255,255,.66); }
.solution-grid a { font-weight: 750; text-underline-offset: 5px; }
.availability { color: rgba(255,255,255,.52); font-size: .8rem; }
.specialist-paths { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 34px; }
.specialist-paths p { width: 100%; margin: 0; color: rgba(255,255,255,.55); }
.specialist-paths a { font-weight: 750; text-underline-offset: 5px; }

.fractional-grid { display: grid; gap: 40px; }
.three-step-plan article { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.three-step-plan span { display: grid; width: 34px; height: 34px; place-items: center; color: var(--white); background: var(--ink); font-weight: 750; }
.three-step-plan h3 { margin-bottom: 8px; font-size: 1.3rem; }
.three-step-plan p { margin: 0; color: var(--muted); }

.proof-section { border-top: 1px solid var(--line); }
.proof-heading p { max-width: 650px; color: var(--muted); }
.case-grid { display: grid; gap: 1px; margin-top: 42px; background: var(--line); }
.case-grid article { min-height: 250px; padding: 26px 22px; background: var(--paper); }
.case-grid h3 { margin-top: 56px; margin-bottom: 12px; }
.case-grid article > p:last-child { margin: 0; color: var(--muted); }

.guide-section { display: grid; max-width: none; gap: 34px; color: var(--white); background: var(--ink); }
.guide-section > * { max-width: 760px; }
.guide-image { overflow: hidden; background: #23252a; }
.guide-image img { display: block; width: 100%; height: 420px; object-fit: cover; object-position: center top; filter: saturate(.6); }
.guide-section p:not(.eyebrow) { color: rgba(255,255,255,.68); font-size: 1.05rem; }
.guide-section .coral { color: #ff7663; }
.guide-links { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.guide-links a { font-weight: 750; text-underline-offset: 5px; }

.faq-section { border-top: 1px solid var(--line); }
.faq-section > h2 { max-width: 760px; }
.faq-list { margin-top: 38px; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 22px 42px 22px 0; font-family: Manrope, system-ui, sans-serif; font-size: 1.08rem; font-weight: 700; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; right: 4px; content: "+"; font-size: 1.5rem; font-weight: 400; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 760px; padding: 0 34px 24px 0; color: var(--muted); }

.closing { max-width: none; text-align: center; background: var(--cream); }
.closing > * { max-width: 980px; margin-right: auto; margin-left: auto; }
.closing h2 { margin-bottom: 32px; }
.closing-actions { justify-content: center; }
.closing .button-secondary { color: var(--ink); }

footer { padding: 48px 6vw 28px; color: rgba(255,255,255,.72); background: var(--ink); }
.footer-primary p { margin-top: 10px; }
.footer-links { display: flex; flex-direction: column; gap: 12px; margin: 28px 0; }
.footer-links a { min-height: 32px; text-underline-offset: 4px; }
.footer-preferences { min-height: 32px; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
footer small { display: block; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.5); }

.consent-banner {
  position: fixed;
  z-index: 1000;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: grid;
  max-width: 760px;
  gap: 18px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.16);
  color: var(--white);
  background: var(--ink);
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}
.consent-banner strong { font-family: Manrope, system-ui, sans-serif; }
.consent-banner p { margin: 6px 0 0; color: rgba(255,255,255,.72); font-size: .86rem; }
.consent-banner a { color: inherit; text-underline-offset: 3px; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent-actions button { min-height: 44px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.42); font: inherit; font-size: .82rem; font-weight: 750; cursor: pointer; }
.consent-decline { color: var(--white); background: transparent; }
.consent-accept { border-color: var(--coral) !important; color: var(--ink); background: var(--coral); }

.content-page { min-height: 100vh; padding: 120px 6vw 80px; }
.content-page .page-shell { max-width: 860px; margin: auto; }
.content-page .eyebrow { color: var(--coral-dark); }
.content-page h1 { max-width: 900px; margin-bottom: 32px; font-size: clamp(3rem, 12vw, 6rem); }
.content-page .lede { max-width: 760px; color: var(--muted); font-size: 1.2rem; }
.content-page section { padding: 38px 0; border-top: 1px solid var(--line); }
.content-page section:first-of-type { margin-top: 48px; }
.content-page h2 { font-size: clamp(2rem, 8vw, 3.5rem); }
.content-page h3 { margin-top: 30px; font-size: 1.35rem; letter-spacing: -.03em; }
.content-page li { margin-bottom: 10px; }
.page-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.content-page .button-secondary { color: var(--ink); }
.legal-page h1 { font-size: clamp(2.6rem, 10vw, 4.8rem); }
.legal-page h2 { margin-top: 44px; font-size: 1.65rem; letter-spacing: -.035em; }
.legal-page p, .legal-page li { color: var(--ink-soft); }

.media-hero { max-width: var(--max); margin: auto; padding: 140px 6vw 72px; }
.media-hero h1 { max-width: 980px; margin-bottom: 28px; }
.media-hero > p:last-child { max-width: 720px; color: var(--muted); font-size: 1.15rem; }
.media-shell { max-width: var(--max); margin: auto; padding: 0 6vw 90px; }
.media-block { display: grid; gap: 30px; padding: 58px 0; border-top: 1px solid var(--line); }
.media-block-heading > p:last-child { color: var(--muted); }
.bio-option, .link-row, .download-row { padding: 24px 0; border-top: 1px solid var(--line); }
.bio-option:first-child, .link-row:first-child, .download-row:first-child { border-top: 0; padding-top: 0; }
.bio-option header, .link-row, .download-row { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; }
.bio-option h3, .link-row h3, .download-row h3 { margin-bottom: 10px; font-size: 1.25rem; letter-spacing: -.03em; }
.copy-button { min-height: 40px; flex: 0 0 auto; padding: 0 13px; border: 1px solid var(--line); color: var(--ink); background: transparent; cursor: pointer; }
.bio-option > p { color: var(--muted); }
.photo-placeholder { display: grid; gap: 26px; align-items: center; }
.media-portrait { display: block; overflow: hidden; background: var(--cream); }
.media-portrait img { display: block; width: 100%; max-height: 580px; object-fit: cover; object-position: center top; }
.status-badge { display: inline-block; margin-bottom: 10px; color: var(--coral-dark); font-size: .7rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.asset-action { font-weight: 750; text-underline-offset: 5px; }
.asset-action.pending { color: var(--muted); font-size: .82rem; }
.link-row > div, .download-row > div { min-width: 0; }
.media-contact { padding: 58px clamp(24px, 5vw, 64px); color: var(--white); background: var(--ink); }
.media-contact h2 { max-width: 900px; }
.media-contact > p:not(.eyebrow) { max-width: 700px; color: rgba(255,255,255,.68); }
.media-contact .button-primary { margin-top: 15px; }

@media (min-width: 720px) {
  body { font-size: 17px; }
  .hero { min-height: 760px; padding: 150px 5vw 82px; }
  .hero-actions, .closing-actions, .page-actions { flex-direction: row; }
  .hero-portrait { inset: 0 0 0 44%; opacity: .72; }
  .hero-portrait::after { background: linear-gradient(90deg, var(--ink) 0%, rgba(19,21,26,.82) 30%, rgba(19,21,26,.08) 82%); }
  @keyframes image-in { to { opacity: .72; transform: scale(1); } }
  .signal-grid, .dose-grid, .solution-grid, .case-grid { grid-template-columns: repeat(2, 1fr); }
  .dose-heading, .fractional-grid { grid-template-columns: 1.1fr .9fr; gap: 7vw; }
  .guide-section { grid-template-columns: minmax(260px, .7fr) minmax(380px, 1.3fr); align-items: center; padding-right: max(6vw, calc((100vw - var(--max)) / 2)); padding-left: max(6vw, calc((100vw - var(--max)) / 2)); }
  .guide-image img { height: 560px; }
  .footer-links { flex-direction: row; flex-wrap: wrap; }
  .media-block { grid-template-columns: .7fr 1.3fr; gap: 7vw; }
  .photo-placeholder { grid-template-columns: .8fr 1.2fr; }
  .consent-banner { right: 24px; bottom: 24px; left: 24px; grid-template-columns: 1fr auto; align-items: center; padding: 22px 24px; }
}

@media (min-width: 1020px) {
  .site-header { min-height: 78px; }
  .menu-toggle { display: none; }
  nav { position: static; flex-direction: row; gap: 26px; padding: 0; color: inherit; background: transparent; pointer-events: auto; transform: none; visibility: visible; transition: none; }
  nav a { font-size: .78rem; }
  .nav-cta { margin-top: 0; color: var(--ink); }
  .problem-section, .dose-section, .solutions-section, .fractional-section, .proof-section, .faq-section, .closing { padding-top: 120px; padding-bottom: 120px; }
  .signal-grid { grid-template-columns: repeat(4, 1fr); }
  .dose-grid { grid-template-columns: repeat(4, 1fr); }
  .solution-grid { grid-template-columns: repeat(4, 1fr); }
  .case-grid { grid-template-columns: repeat(3, 1fr); }
  .specialist-paths p { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  .reveal, .reveal-image, .observe .section-kicker, .observe h2, .observe .stagger > *, .observe .dose-grid > *, .observe .solution-grid > *, .observe .case-grid > * { opacity: 1; transform: none; }
}
