/* Dose Advisory — Primal pages (home, services, about), on the R4 Figma system.
   Loads after brand2.css. Platform Regular headings in one colour, Rig Sans Medium for
   everything else, filled panels instead of rules. Motion follows Molly: ease-out-quart,
   a buoyant spring for hover and press, staggered blur-in reveals, nothing that hijacks scroll. */

:root {
  --panel: #f6f2ee;          /* hero cards, highlights */
  --panel-2: #eeedec;        /* homepage problem card */
  --body-ink: #2e555e;       /* body copy */
  --meta: #57848f;           /* credentials, small labels */
  --soft: #608790;           /* captions */
  --badge: #f6c7a0;          /* number badges */
  --chip-on-teal: #396069;
  --cta-ground: #fffbf7;
  --cta-edge: #edece9;
  --mint: #9eedcf;
  --ease: cubic-bezier(.165, .84, .44, 1);
  --spring: linear(0, .06 2%, .23 5%, .53 10%, .82 16%, .97 21%, 1.03 26%, 1.045 31%, 1.035 38%, 1.01 50%, .998 62%, 1);
  --stick: 96px;             /* where sticky controls sit, under the nav */
}

/* White canvas, so nothing teal flashes between pages; the body's teal shows only past
   the footer, and there's no bounce at either end */
html { background: #fff; overscroll-behavior-y: none; }
body { background: var(--teal); font-weight: 500; color: var(--ink); }

/* Page-to-page transitions (cross-document view transitions): the old page fades out, a
   short pause, then the new page shows and its own entrance plays once. The page layer
   only fades (no movement), so it never doubles the hero's rise; the nav is its own layer
   and holds still. Browsers without support navigate as normal. */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
::view-transition-old(root) { animation: page-out .26s var(--ease) both; }
::view-transition-new(root) { animation: page-in .2s linear .38s both; }
::view-transition-group(site-nav) { animation-duration: .58s; animation-timing-function: var(--ease); }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; } }
/* While the transition runs, entrances wait (primal-vt.js sets .vt-hold), then play */
html.vt-hold [data-reveal] { opacity: 0 !important; transform: translateY(18px) !important; filter: blur(8px) !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
main { position: relative; z-index: 1; background: #fff; border-radius: 0 0 24px 24px; }
.wrap { width: min(1204px, 100% - 64px); margin-inline: auto; }
p { color: var(--body-ink); line-height: 1.5; }
h1, h2 { font-weight: 400; color: var(--ink); text-wrap: balance; }

/* Type, from Figma */
.t-h1 { font-size: clamp(42px, 4.8vw, 72px); line-height: 1.23; letter-spacing: -.5px; }
.t-h2 { font-size: clamp(40px, 4.3vw, 64px); line-height: 1.06; letter-spacing: -1px; }
.t-h3 { font-size: clamp(32px, 3.05vw, 46.08px); line-height: 1.08; letter-spacing: -.2px; }
.t-cta { font-size: clamp(38px, 3.9vw, 58.88px); line-height: 1.04; letter-spacing: -.5px; }
.t-lead { font-size: 17px; line-height: 1.55; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.sec-head > p { max-width: 420px; font-size: 17px; }

/* Buttons: spring on press, as Molly */
.btn { font-size: 15px; letter-spacing: .005em; transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .5s var(--spring); }
.btn:active { transform: scale(.96); }
.btn.primary { background: var(--ink); color: #fff; } .btn.primary:hover { background: var(--teal); }
.btn.quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .btn.quiet:hover { background: var(--panel); }
.btn.light { background: #fffdfb; color: var(--teal); } .btn.light:hover { background: #fff; }
.btn.ghost-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.9); } .btn.ghost-light:hover { background: rgba(255,255,255,.1); }
.btn.sm { min-height: 40px; padding: 0 19px; font-size: 13.5px; }
.link { background: none; border: 0; padding: 0; cursor: pointer; font-weight: 500; font-size: 15px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(26,65,74,.35); transition: text-decoration-color .2s; }
.link:hover { text-decoration-color: currentColor; }

/* Reveal: rise, unblur, stagger by --i */
[data-reveal] { opacity: 0; transform: translateY(18px); filter: blur(8px); transition: opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
[data-reveal].in { opacity: 1; transform: none; filter: none; }

.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: var(--teal); }

/* Nav: sits inside the hero card at the top, settles to a bar once scrolled */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--ink); transition: background .4s var(--ease), color .4s var(--ease); }
.nav .wrap { width: min(1204px, 100% - 128px); display: flex; align-items: center; justify-content: space-between; height: 84px; transform: translateY(26px); transition: transform .6s var(--ease); }
.nav.solid { background: rgba(255,255,255,.9); backdrop-filter: blur(14px); color: var(--ink); }
.nav.solid .wrap { transform: none; }
.nav .dose-logo { height: 34px; color: currentColor; }
.nav ul { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; font-size: 14.3px; }
.nav ul a { text-decoration: none; opacity: .7; transition: opacity .2s; } .nav ul a:hover, .nav ul a[aria-current] { opacity: 1; }
.nav .btn { min-height: 40px; padding: 0 19px; font-size: 13.3px; }
.nav-light .nav:not(.solid) { color: #fff; }
.nav-light .nav:not(.solid) .btn.primary { background: #fff; color: var(--teal); }
.nav-end { display: flex; align-items: center; gap: 8px; }

/* Mobile menu: a rounded panel that morphs down from the top */
.menu-btn { display: none; position: relative; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--panel); color: var(--ink); cursor: pointer; transition: background .3s var(--ease), transform .5s var(--spring); }
.menu-btn:active { transform: scale(.92); }
.menu-btn span { position: absolute; left: 13px; width: 18px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .5s var(--spring), top .3s var(--ease); }
.menu-btn span:first-child { top: 18px; } .menu-btn span:last-child { top: 25px; }
.menu-open .menu-btn span:first-child { top: 21.25px; transform: rotate(45deg); }
.menu-open .menu-btn span:last-child { top: 21.25px; transform: rotate(-45deg); }
.nav-light .nav:not(.solid) .menu-btn { background: rgba(255,255,255,.16); color: #fff; }
.menu { position: fixed; z-index: 49; top: 8px; left: 8px; right: 8px; display: grid; gap: 40px; padding: 108px 24px 24px; border-radius: 20px; background: var(--panel); clip-path: inset(0 0 calc(100% - 76px) 0 round 20px); opacity: 0; transition: clip-path .6s var(--ease), opacity .3s var(--ease); }
.menu-open .menu { clip-path: inset(0 0 0 0 round 20px); opacity: 1; }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.menu li { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity .5s var(--ease), transform .6s var(--ease), filter .5s var(--ease); }
.menu-open .menu li { opacity: 1; transform: none; filter: none; }
.menu-open .menu li:nth-child(1) { transition-delay: .12s; } .menu-open .menu li:nth-child(2) { transition-delay: .18s; }
.menu-open .menu li:nth-child(3) { transition-delay: .24s; } .menu-open .menu li:nth-child(4) { transition-delay: .30s; }
.menu ul a { display: block; padding: 6px 0; font-family: var(--display); font-size: 40px; line-height: 1.1; letter-spacing: -.5px; color: var(--ink); text-decoration: none; }
.menu ul a[aria-current] { color: var(--teal); }
.menu-foot { display: grid; gap: 20px; opacity: 0; transition: opacity .5s var(--ease) .32s; }
.menu-open .menu-foot { opacity: 1; }
.menu-foot p { font-size: 15px; line-height: 1.7; }
.menu-foot a { color: var(--body-ink); text-decoration: none; }
.menu-foot .btn { width: 100%; min-height: 52px; }
html.menu-open { overflow: hidden; }
/* While open, the bar sits on the panel: dark ink, no white strip */
html.menu-open .nav, html.menu-open .nav-light .nav:not(.solid) { background: transparent; backdrop-filter: none; color: var(--ink); }
html.menu-open .nav .btn.primary, html.menu-open .nav-light .nav:not(.solid) .btn.primary { background: var(--ink); color: #fff; }
html.menu-open .nav .menu-btn, html.menu-open .nav-light .nav:not(.solid) .menu-btn { background: #fff; color: var(--ink); }

/* Hero card */
.hero { padding: 24px 32px 0; }
.hero-card { position: relative; overflow: hidden; border-radius: 24px; background: var(--panel); }
.hero-card .g-band { left: -17%; width: 128%; top: 46%; height: 84%; opacity: .95; animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { 0% { transform: translateX(-3%) scaleY(1); } 50% { transform: translateX(2%) scaleY(1.08); } 100% { transform: translateX(4%) scaleY(.95); } }
.hero-card.centered { height: clamp(560px, 76svh, 700px); display: grid; place-items: center; padding: 110px 24px 0; text-align: center; }
.hero-card.centered > div:not(.g-band) { position: relative; margin-top: -30px; }
.hero-card.centered p { max-width: 540px; margin: 22px auto 0; color: var(--ink); }

/* Number badge, from the homepage service card */
.badge { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--badge); color: var(--body-ink); font-size: 17px; }

/* Pills */
.pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pills b { font-weight: 500; font-size: 14px; color: var(--meta); margin-right: 4px; }
.pills span { padding: 7px 14px; border-radius: 999px; background: #fff; font-size: 13px; line-height: 20px; color: var(--ink); }
.on-teal .pills span, .pills.on-teal span { background: var(--chip-on-teal); color: #fff; }

/* Teal panel (homepage "Healthcare systems demand precision") */
.panel-teal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 423px); gap: 48px; align-items: center; padding: 44px 44px 44px clamp(32px, 7vw, 103px); border-radius: 16px; background: var(--teal); }
.panel-teal h2, .panel-teal p { color: #fffdfb; }
.panel-teal p.sub { margin-top: 22px; max-width: 520px; }
.stats { display: flex; gap: 72px; margin-top: 40px; }
.stats b { display: block; font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -.8px; color: #fffdfb; }
.stats span { display: block; margin-top: 6px; font-size: 14px; color: #fffdfb; }
.panel-teal .btn { margin-top: 40px; }
.panel-teal .ph { position: relative; aspect-ratio: 423/474; border-radius: 16px; overflow: hidden; background: var(--teal-deep); }
/* Nana's profile (img/nana-efa-profile.png) is exported from Figma at this frame's exact
   ratio with its glow and rounded corners built in, so it's shown as-is */
.panel-teal .ph { background: transparent; }
.panel-teal .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }

/* Closing call: a rounded card that scrolls up off the footer */
.cta { margin-top: 0; border-radius: 24px; background: var(--cta-ground); box-shadow: inset 0 0 0 1px var(--cta-edge); padding: clamp(110px, 12.7vw, 192px) 24px clamp(120px, 13vw, 200px); text-align: center; }
.cta.white { background: #fff; box-shadow: none; }
.cta h2 { max-width: 740px; margin: 0 auto; color: var(--body-ink); }
.cta p { max-width: 430px; margin: 36px auto 0; line-height: 1.6; color: var(--ink); }
.cta .ctas { display: flex; justify-content: center; gap: 10px; margin-top: 36px; flex-wrap: wrap; }

footer { position: sticky; bottom: 0; z-index: 0; border-radius: 0; background: var(--teal); color: #fff; padding: 128px 0 40px; }
.fgrid { display: grid; grid-template-columns: 1fr 220px 220px 285px; gap: 40px; }
footer .dose-logo { height: 40px; color: #fff; }
footer p, footer li { color: #fff; }
footer .tag-line { margin-top: 18px; font-size: 15px; }
footer h4 { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.62); margin: 0 0 14px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
footer a { color: #fff; text-decoration: none; } footer a:hover { color: var(--peach); }
.legal { margin-top: 88px; display: flex; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.62); flex-wrap: wrap; gap: 12px; }

/* Dialogs: detail sheets and booking */
html:has(dialog[open]) { overflow: hidden; }
/* Service sheets, after Collins' story view: a tall sheet with the photo inset at full
   landscape, metadata on the left, the reading column on the right */
dialog.sheet { width: min(1180px, 100% - 48px); max-width: none; max-height: calc(100svh - 24px); margin: auto auto 0; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: #fff; color: var(--ink); box-shadow: 0 -30px 100px -40px rgba(22,53,56,.5); overflow: hidden; }
.sheet .s-scroll { position: relative; }
.x-close { position: sticky; top: 36px; z-index: 3; float: right; display: grid; place-items: center; width: 44px; height: 44px; margin: 36px 36px -80px 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink); cursor: pointer; backdrop-filter: blur(8px); box-shadow: 0 6px 20px -10px rgba(8,24,27,.4); transition: background .3s var(--ease), transform .5s var(--spring); }
.x-close:hover { background: #fff; } .x-close:active { transform: scale(.92); }
.x-close svg { width: 16px; height: 16px; }
.s-media { margin: 0; padding: 20px 20px 0; }
.s-media img { display: block; width: 100%; aspect-ratio: 3 / 2; max-height: 64svh; object-fit: cover; border-radius: 16px; background: var(--panel); }
.sheet .s-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr); gap: 56px; padding: 64px 56px 72px; }
.s-meta { position: sticky; top: 40px; align-self: start; display: grid; align-content: start; gap: 28px; padding-top: 6px; }
.s-meta b { display: block; margin-bottom: 10px; font-weight: 500; font-size: 14px; color: var(--meta); }
.s-meta .pills span { background: var(--panel); }
.sheet .s-main h2 { font-family: var(--body); font-weight: 500; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.12; letter-spacing: -.8px; color: var(--ink); max-width: 640px; }
.sheet .s-main .lead { margin-top: 20px; max-width: 640px; font-size: 18px; line-height: 1.55; color: var(--body-ink); }
.sheet .s-main h3 { margin: 48px 0 16px; font-family: var(--body); font-weight: 500; font-size: 14px; letter-spacing: 0; color: var(--meta); }
/* What's included: each item is its own highlight; title clearly above its description */
.sheet .inc { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sheet .inc div { padding: 22px 24px 24px; border-radius: 16px; background: var(--panel); }
.sheet .inc dt { font-size: 19px; line-height: 1.3; letter-spacing: -.3px; color: var(--ink); }
.sheet .inc dd { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--body-ink); opacity: .82; }
.sheet .leave { margin-top: 8px; padding: 26px 28px 28px; border-radius: 16px; background: var(--teal); }
.sheet .leave b { display: block; font-weight: 500; font-size: 14px; color: rgba(255,255,255,.66); }
.sheet .leave p { margin-top: 8px; font-size: 20px; line-height: 1.45; color: #fff; }
dialog.sheet[open] { display: flex; animation: sheet .55s var(--ease); }
dialog::backdrop { background: rgba(22,53,56,.42); backdrop-filter: blur(4px); }
dialog[open]::backdrop { animation: fade .3s var(--ease); }
@keyframes sheet { from { transform: translateY(60px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.985); } }
.s-in { display: flex; flex-direction: column; width: 100%; max-height: inherit; }
.s-scroll { overflow-y: auto; overscroll-behavior: contain; }
.s-head { position: relative; height: 200px; overflow: hidden; }
.s-head img { width: 100%; height: 100%; object-fit: cover; }
.s-head .grip { position: absolute; top: 10px; left: 50%; translate: -50% 0; width: 40px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.85); }
.s-body { position: relative; padding: clamp(28px, 3.6vw, 44px) clamp(24px, 4.4vw, 56px) clamp(28px, 4vw, 48px); }
.s-close { position: absolute; top: 16px; right: clamp(16px, 3vw, 24px); z-index: 2; min-height: 38px; padding: 0 16px; font-size: 14px; background: rgba(255,255,255,.92); color: var(--ink); backdrop-filter: blur(8px); }
.s-close:hover { background: #fff; }
.s-body h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; max-width: 640px; }
.s-body .lead { margin-top: 16px; max-width: 640px; font-size: 17px; }
.s-body h3 { margin: 36px 0 18px; font-family: var(--body); font-size: 14px; font-weight: 500; color: var(--meta); letter-spacing: 0; }
.s-foot { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px clamp(20px, 4.4vw, 56px); background: var(--cta-ground); }
.s-foot p { font-size: 15px; color: var(--ink); }
.s-foot .b { display: flex; gap: 8px; flex-wrap: wrap; }

dialog.book { width: min(640px, 100% - 48px); max-height: min(880px, 100svh - 48px); padding: 0; border: 0; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 40px 120px -40px rgba(22,53,56,.6); overflow: hidden; }
dialog.book[open] { display: flex; animation: rise .5s var(--ease); }
.book .s-close { background: var(--panel); }
.book .s-body h2 { padding-right: 90px; }
.book .s-body > form > p { margin-top: 10px; font-size: 15px; }
.mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; margin-top: 26px; border-radius: 999px; background: var(--panel); }
.mode label { position: relative; cursor: pointer; }
.mode input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.mode span { display: grid; place-items: center; min-height: 40px; border-radius: 999px; font-size: 14px; color: var(--ink); transition: background .3s var(--ease), color .3s var(--ease); }
.mode input:checked + span { background: var(--ink); color: #fff; }
.mode input:focus-visible + span { outline: 2px solid var(--aqua); outline-offset: 2px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.fields .full { grid-column: 1 / -1; }
.fields label { display: grid; gap: 6px; font-size: 13px; color: var(--meta); }
.fields input, .fields select, .fields textarea { font: inherit; width: 100%; min-height: 46px; padding: 11px 14px; border: 0; border-radius: 12px; background: var(--panel); font-size: 15px; color: var(--ink); outline: none; transition: box-shadow .2s; }
.fields select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--meta) 50%), linear-gradient(135deg, var(--meta) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.fields textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.fields input:focus, .fields select:focus, .fields textarea:focus { box-shadow: inset 0 0 0 1.5px var(--teal); }
.book .s-foot small { font-size: 13px; color: var(--meta); max-width: 260px; line-height: 1.4; }
.book .s-foot small a { color: var(--ink); }
.done { display: none; padding: 8px 0 12px; }
.book.sent .done { display: block; }
.book.sent form, .book.sent .s-foot { display: none; }
.done p { margin-top: 12px; max-width: 460px; }
.done .btn { margin-top: 24px; }

/* Blossom carousel: slides sit side by side, gap via margin */
blossom-carousel { display: block; }
blossom-carousel > * + * { margin-inline-start: 20px; }

@media (max-width: 960px) {
  :root { --stick: 92px; }
  .wrap { width: calc(100% - 40px); }
  .nav .wrap { width: calc(100% - 56px); transform: translateY(12px); }
  .nav ul { display: none; }
  .menu-btn { display: block; }
  .hero { padding: 8px 8px 0; }
  .sec-head { display: block; }
  .sec-head > p { margin-top: 16px; }
  .panel-teal, .fgrid { grid-template-columns: 1fr; }
  .panel-teal { padding: 32px; }
  .fgrid { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .fgrid > :first-child { grid-column: 1 / -1; }
  footer { padding-top: 96px; }
  .legal { margin-top: 56px; }
  .sheet .s-body { grid-template-columns: 1fr; gap: 32px; padding: 48px 32px 56px; }
  .s-meta { position: static; order: 2; grid-auto-flow: column; justify-content: start; gap: 40px; }
}
@media (max-width: 640px) {
  /* Book button stays visible: 44px tall to match the menu button's tap target */
  .nav .btn { min-height: 44px; padding: 0 16px; font-size: 13.5px; }
  .hero-card { border-radius: 20px; }
  .hero-card.centered { height: auto; min-height: 560px; padding: 120px 20px 160px; }
  .hero-card.centered > div:not(.g-band) { margin-top: 0; }
  .stats { gap: 40px; }
  .cta { border-radius: 20px; }
  main { border-radius: 0 0 20px 20px; }
  dialog.sheet, dialog.book { width: 100%; max-width: 100%; max-height: 92svh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  dialog.book[open] { animation: sheet .45s var(--ease); }
  .s-head { height: 140px; }
  dialog.sheet { max-height: calc(100svh - 12px); }
  .x-close { top: 24px; margin: 24px 24px -68px 0; }
  .s-media { padding: 12px 12px 0; }
  .sheet .s-body { grid-template-columns: 1fr; gap: 28px; padding: 32px 20px 40px; }
  .s-meta { order: 2; }
  .sheet .inc { grid-template-columns: 1fr; }
  .s-foot { flex-direction: column; align-items: stretch; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .s-foot p { display: none; }
  .s-foot .b { display: grid; grid-template-columns: 1fr 1fr; }
  .fields { grid-template-columns: 1fr; }
  .book .s-foot small { max-width: none; text-align: center; }
  .book .s-foot .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
}