/* ============================================================
   Mariposa Mobile Phlebotomy: shared site styles
   Loaded by every page (index.html and the /pricing/, /therapeutic-phlebotomy/,
   etc. subpages). Tokens, reset, header nav, footer, buttons, subpage layout,
   print. Scene-specific styles for the homepage stay inline in index.html.
   ============================================================ */

:root{
  /* Mariposa brand palette (exact) */
  --plum:#3C2236;      /* primary brand / premium trust */
  --mauve:#A18B97;     /* secondary / empathy */
  --mauve-light:#C9B9C2; /* footer secondary text on plum (>= 7:1) */
  --ivory:#F2EEE8;     /* primary background */
  --charcoal:#2B2B2B;  /* text / clinical clarity */
  --brass:#C8A88E;     /* accent / premium detail */
  --muted:#6E5E66;     /* legible secondary text */
  --white:#FFFFFF;
  --radius:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:60px;        /* fixed header height; anchors offset by this */
  --fab-h:52px;        /* persistent Book button height */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--charcoal);
  background:var(--ivory);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img,svg,video{max-width:100%}
[tabindex="-1"]:focus{outline:none}

/* accessibility: visible keyboard focus (brand-legible on both grounds) */
:focus-visible{outline:3px solid var(--plum);outline-offset:3px}
.site-footer a:focus-visible,.book-fab:focus-visible,.btn--primary:focus-visible,.skip-link:focus-visible,
.site-nav__book:focus-visible{outline-color:var(--brass)}

/* skip link */
.skip-link{position:fixed;left:14px;top:-70px;z-index:220;background:var(--plum);color:var(--ivory);
  font-weight:600;font-size:15px;padding:12px 18px;border-radius:10px;text-decoration:none;
  transition:top .2s var(--ease)}
.skip-link:focus{top:14px}

/* screen-reader only text (used for "opens in a new tab" notices) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* "opens in a new tab" glyph, shown after external CTAs */
.ext{display:inline-block;width:.85em;height:.85em;margin-left:.15em;vertical-align:-.05em;flex:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-weight:600;font-size:16px;text-decoration:none;border-radius:999px;padding:15px 28px;
  min-height:48px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn--primary{background:var(--plum);color:var(--ivory);box-shadow:0 12px 30px -12px rgba(60,34,54,.6)}
.btn--primary:hover{transform:translateY(-2px);background:var(--brass);color:var(--plum);box-shadow:0 18px 38px -12px rgba(60,34,54,.45)}
.btn--ghost{color:var(--plum);font-weight:600;text-decoration:none;border-bottom:2px solid transparent;
  padding:6px 2px;display:inline-flex;align-items:center;min-height:44px;border-radius:0}
.btn--ghost:hover{border-bottom-color:var(--plum)}
.btn--outline{background:transparent;color:var(--plum);border:2px solid var(--plum);padding:13px 26px}
.btn--outline:hover{background:var(--plum);color:var(--ivory)}
.btn svg{width:16px;height:16px;flex:none}

/* ---------- fixed header nav (visible from 0s on every page, never fades) ---------- */
.site-nav{
  position:fixed;left:0;right:0;top:0;z-index:200;
  height:var(--nav-h);
  display:flex;align-items:center;gap:clamp(12px,2vw,28px);
  padding:0 clamp(14px,3vw,32px);
  background:rgba(242,238,232,.86);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(60,34,54,.10);
}
.site-nav__brand{display:inline-flex;align-items:center;min-height:44px;flex:none}
.site-nav__brand img{height:30px;width:auto;display:block}
.site-nav__links{display:flex;align-items:center;gap:clamp(6px,1.4vw,18px);margin-left:auto}
.site-nav__links a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 10px;
  font-size:15px;font-weight:600;color:var(--plum);text-decoration:none;border-radius:8px;
}
.site-nav__links a:hover{background:rgba(60,34,54,.08)}
.site-nav__links a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.site-nav__actions{display:flex;align-items:center;gap:8px;flex:none}
.site-nav__call,.site-nav__book{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border-radius:999px;
  font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.site-nav__call{color:var(--plum);border:2px solid var(--plum);background:rgba(255,255,255,.55)}
.site-nav__call:hover{background:var(--plum);color:var(--ivory)}
.site-nav__call svg{width:17px;height:17px;flex:none}
.site-nav__call-short{display:none}
.site-nav__book{background:var(--plum);color:var(--ivory)}
.site-nav__book:hover{background:var(--brass);color:var(--plum)}
@media (max-width:760px){
  .site-nav{gap:8px;padding:0 12px}
  .site-nav__brand img{height:24px}
  .site-nav__links{display:none}
  .site-nav__actions{margin-left:auto}
  .site-nav__call{padding:0 13px}
  .site-nav__call-long{display:none}
  .site-nav__call-short{display:inline}
}
@media (max-width:340px){.site-nav__book{display:none}}
/* foldables and small tablets (iPhone Duo unfolded is 626px): room for the section links, short Call label */
@media (min-width:600px) and (max-width:760px){
  .site-nav__links{display:flex;gap:2px;margin-left:auto}
  .site-nav__links a{padding:0 8px;font-size:14px}
  .site-nav__actions{margin-left:0}
}

/* ---------- persistent Book button (fades in past the hero; hidden once the footer is in view) ---------- */
.book-fab{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:110;
  display:inline-flex;align-items:center;gap:8px;min-height:var(--fab-h);padding:0 22px;border-radius:999px;
  background:var(--plum);color:var(--ivory);font-weight:600;font-size:15px;text-decoration:none;
  box-shadow:0 14px 34px -12px rgba(60,34,54,.7);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.book-fab.show{opacity:1;visibility:visible;transform:none}
.book-fab.show.book-fab--hide{opacity:0;visibility:hidden;transform:translateY(14px)}
.book-fab:hover{background:var(--brass);color:var(--plum)}
/* over a plum-colored section, flip to an ivory pill so it stays visible */
.book-fab--onplum{background:var(--ivory);color:var(--plum);box-shadow:0 14px 34px -12px rgba(0,0,0,.55)}
.book-fab--onplum:hover{background:var(--brass);color:var(--plum)}
.book-fab svg{width:18px;height:18px;flex:none}

/* ---------- shared type ---------- */
.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:12px;font-weight:600;color:var(--plum);margin-bottom:14px}
.t-headline{font-family:"GFS Didot",Georgia,serif;font-weight:400;font-size:clamp(32px,5vw,60px);line-height:1.05;
  letter-spacing:-.015em;color:var(--charcoal);max-width:16ch}
.t-headline em{color:var(--plum);font-style:italic}
@media (max-width:760px){.t-headline{font-size:clamp(28px,8.4vw,40px)}}

/* ---------- subpage layout (/pricing/, /therapeutic-phlebotomy/, ...) ---------- */
.page{padding-top:var(--nav-h)}
.page__hero{background:radial-gradient(120% 90% at 70% 40%, #ffffff 0%, #ffffff 45%, var(--ivory) 100%);
  padding:clamp(48px,9vh,104px) clamp(22px,5vw,64px) clamp(36px,6vh,64px)}
.page__hero-inner{max-width:1080px;margin:0 auto}
.page__hero h1{font-family:"GFS Didot",Georgia,serif;font-weight:400;font-size:clamp(34px,5.4vw,64px);line-height:1.04;
  letter-spacing:-.015em;color:var(--charcoal);max-width:18ch;margin:0 0 18px}
.page__hero h1 em{color:var(--plum);font-style:italic}
.page__lead{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--charcoal);max-width:60ch;margin:0 0 22px}
.page__price{display:flex;align-items:baseline;gap:10px;margin:6px 0 22px}
.page__price span{font-size:14px;text-transform:uppercase;letter-spacing:.16em;color:var(--plum);font-weight:600}
.page__price strong{font-family:"GFS Didot",Georgia,serif;font-weight:400;font-size:clamp(40px,6vw,68px);color:var(--plum);line-height:1}
.page__price small{font-size:15px;color:var(--muted)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:clamp(18px,3vh,30px)}
.cta__note{flex-basis:100%;font-size:14px;color:var(--muted);margin-top:4px}
.cta__note b{color:var(--plum);font-weight:600}

.section{padding:clamp(44px,7vh,88px) clamp(22px,5vw,64px)}
.section--tint{background:#fbf7f1}
.section--plum{background:var(--plum);color:var(--ivory)}
.section--plum .eyebrow{color:var(--brass)}
.section--plum h2,.section--plum .t-headline{color:var(--ivory)}
.section--plum .t-headline em{color:var(--brass)}
.section__inner{max-width:1080px;margin:0 auto}
.section h2{font-family:"GFS Didot",Georgia,serif;font-weight:400;font-size:clamp(26px,3.4vw,42px);line-height:1.1;
  letter-spacing:-.015em;color:var(--charcoal);margin:0 0 18px;max-width:22ch}
.section h2 em{color:var(--plum);font-style:italic}
.section h3{font-family:"GFS Didot",Georgia,serif;font-weight:400;font-size:clamp(19px,2vw,24px);color:var(--plum);margin:0 0 8px}
.prose{max-width:66ch}
.prose p,.prose li{font-size:clamp(15px,1.3vw,17px);line-height:1.65;color:var(--charcoal)}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px 1.2em}
.prose li{margin-bottom:8px}
.prose a{color:var(--plum);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.prose h3{margin-top:26px}
.prose h4{font-size:15px;text-transform:uppercase;letter-spacing:.14em;color:var(--plum);margin:22px 0 8px}
.section--plum .prose p,.section--plum .prose li{color:var(--ivory)}
.section--plum .prose a{color:var(--brass)}

/* numbered steps */
.steps__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px)}
.steps__n{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:var(--plum);color:var(--ivory);font-family:"GFS Didot",Georgia,serif;font-size:21px;margin-bottom:15px}
.steps__list h3{font-family:"GFS Didot",Georgia,serif;font-weight:400;color:var(--plum);font-size:clamp(18px,1.8vw,22px);margin:0 0 7px}
.steps__list p{margin:0;font-size:15px;line-height:1.6;color:var(--charcoal)}

/* pricing card + table (shared with the homepage FAQ section) */
.pricing{background:var(--panel,#fff);border:1px solid color-mix(in srgb,var(--brass) 55%,transparent);border-radius:18px;
  padding:clamp(22px,3vw,32px);margin-bottom:clamp(28px,4vh,44px);box-shadow:0 26px 50px -34px rgba(60,34,54,.4)}
.pricing h3{font-family:"GFS Didot",Georgia,serif;font-weight:400;color:var(--plum);font-size:clamp(20px,2.2vw,26px);margin:0 0 4px}
.pricing__sub{font-size:14px;color:var(--charcoal);opacity:.8;margin:0 0 18px}
.pricing__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:2px 32px}
.pricing__list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;
  border-bottom:1px solid color-mix(in srgb,var(--charcoal) 10%,transparent)}
.pricing__list span{font-size:15px;color:var(--charcoal)}
.pricing__list span small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.pricing__list a{color:var(--plum);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.pricing__list b{font-family:"GFS Didot",Georgia,serif;font-weight:400;font-size:20px;color:var(--plum);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pricing__note{margin:16px 0 0;font-size:14px;color:var(--charcoal);opacity:.82}
.pricing__note a{color:var(--plum);font-weight:600}

/* tier cards (athlete packages) */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px);margin:22px 0 8px}
.tier{background:#fff;border:1px solid color-mix(in srgb,var(--brass) 55%,transparent);border-radius:18px;padding:24px 24px 22px;
  display:flex;flex-direction:column;box-shadow:0 26px 50px -34px rgba(60,34,54,.35)}
.tier--featured{border-color:var(--plum);box-shadow:0 30px 56px -30px rgba(60,34,54,.55)}
.tier__name{font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--plum);font-weight:600;margin-bottom:8px}
.tier__price{font-family:"GFS Didot",Georgia,serif;font-size:clamp(34px,4vw,46px);color:var(--plum);line-height:1;margin-bottom:6px}
.tier__for{font-size:14px;color:var(--muted);margin-bottom:14px}
.tier ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px}
.tier li{display:flex;gap:9px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--charcoal)}
.tier li svg{width:17px;height:17px;flex:none;color:var(--plum);margin-top:3px}
.tier .btn{margin-top:auto;align-self:flex-start}

/* checklist / "what it looks like" block */
.checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px}
.checklist li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--charcoal)}
.checklist li svg{width:20px;height:20px;flex:none;color:var(--plum);margin-top:2px}
.checklist li b{color:var(--plum);font-weight:600}

/* FAQ grid (shared with the homepage) */
.faq__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px) clamp(28px,4vw,56px)}
.faq__item{border-top:2px solid color-mix(in srgb,var(--brass) 60%,transparent);padding-top:16px}
.faq__item h3{font-family:"GFS Didot",Georgia,serif;font-weight:400;color:var(--plum);font-size:clamp(17px,1.7vw,21px);line-height:1.25;margin:0 0 8px}
.faq__item p{margin:0 0 8px;font-size:15px;line-height:1.6;color:var(--charcoal)}
.faq__item p:last-child{margin-bottom:0}
.faq__item a{color:var(--plum);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* callout (policy / notice) */
.callout{border-left:3px solid var(--brass);background:#fff;border-radius:0 14px 14px 0;padding:16px 20px;margin:18px 0;max-width:66ch}
.callout p{margin:0;font-size:15px;line-height:1.6;color:var(--charcoal)}
.callout p + p{margin-top:8px}
.callout a{color:var(--plum);font-weight:600}

/* closing CTA band */
.cta-band{background:var(--plum);color:var(--ivory);text-align:center;padding:clamp(48px,8vh,96px) clamp(22px,5vw,64px)}
.cta-band .eyebrow{color:var(--brass)}
.cta-band h2{font-family:"GFS Didot",Georgia,serif;font-weight:400;font-size:clamp(28px,4vw,48px);color:var(--ivory);margin:0 auto 14px;max-width:20ch}
.cta-band h2 em{color:var(--brass);font-style:italic}
.cta-band p{font-size:clamp(15px,1.3vw,17px);max-width:52ch;margin:0 auto 22px;color:var(--ivory)}
.cta-band .cta{justify-content:center}
.cta-band .btn--primary{background:var(--ivory);color:var(--plum)}
.cta-band .btn--primary:hover{background:var(--brass);color:var(--plum)}
.cta-band .btn--ghost{color:var(--ivory)}
.cta-band .btn--ghost:hover{border-bottom-color:var(--brass)}

/* breadcrumb */
.crumbs{font-size:14px;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--plum);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.crumbs a:hover{text-decoration:underline}
.crumbs span{margin:0 8px}

/* ---------- footer (shared) ---------- */
.site-footer{background:var(--plum);color:var(--ivory);
  padding:clamp(48px,7vh,80px) clamp(22px,5vw,64px) calc(32px + var(--fab-h))}
.foot__inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(24px,4vw,56px);align-items:start}
.foot__brand-chip{display:inline-block;background:var(--ivory);border-radius:14px;padding:14px 18px;margin-bottom:16px}
.foot__logo{height:40px;width:auto;display:block}
.foot__brand{font-size:14px;line-height:1.7}
.foot__tag{color:var(--mauve-light);display:block;margin-bottom:12px}
.foot__clinics{font-size:14px;line-height:1.6;color:var(--ivory);max-width:34ch}
.foot__clinics a{color:var(--brass);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.foot__col h4{font-size:14px;text-transform:uppercase;letter-spacing:.14em;color:var(--brass);margin-bottom:10px;font-weight:600}
.foot__col h4 + h4,.foot__col p + h4{margin-top:18px}
.foot__col a,.foot__col p{font-size:14px;line-height:1.6;color:var(--ivory);text-decoration:none;display:block}
.foot__col a{min-height:44px;display:flex;align-items:center;padding:2px 0}
/* the contact email is one 34-character word; let it wrap instead of widening the grid at phone widths */
.foot__col{min-width:0}
.foot__col a[href^="mailto:"]{display:block;padding:11px 0;overflow-wrap:anywhere}
.foot__col a:hover{color:var(--brass);text-decoration:underline}
.foot__legal{max-width:1120px;margin:clamp(36px,5vh,56px) auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);
  font-size:14px;color:var(--mauve-light);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;align-items:center}
.foot__legal-links{display:flex;flex-wrap:wrap;gap:0 18px;flex-basis:100%}
.foot__legal-links a{color:var(--ivory);text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center;font-size:14px}
.foot__legal-links a:hover{color:var(--brass)}

@media (max-width:760px){
  .steps__list,.tiers,.checklist,.faq__grid,.pricing__list{grid-template-columns:1fr}
  .faq__grid{gap:22px}
  .pricing__list{gap:0}
  .foot__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 24px}
  .foot__brand{grid-column:1 / -1}
  .foot__legal{flex-direction:column;align-items:flex-start}
}

/* ---------- reduced motion (shared) ---------- */
@media (prefers-reduced-motion:reduce){
  .btn,.book-fab,.site-nav__call,.site-nav__book{transition:none}
  .btn--primary:hover{transform:none}
}

/* ---------- print / save as PDF ----------
   Every pinned scene becomes static, every reveal is fully visible, and the
   videos, nav chrome and Book button are dropped. ---------- */
@media print{
  html{scroll-padding-top:0}
  body{background:#fff;color:#000}
  .site-nav,.book-fab,.skip-link,.scrollcue,video,.hero__scrim,.closing__scrim,.window-slot,.video-pause{display:none !important}
  .page{padding-top:0}
  .hero,.services,.trust,.closing{height:auto !important;min-height:0 !important;background:none !important}
  .hero__sticky,.services__sticky,.trust__sticky,.closing__sticky{position:static !important;height:auto !important;overflow:visible !important;display:block !important}
  .services__inner,.window,.trust__beat,.closing__inner{position:static !important;inset:auto !important;height:auto !important;width:auto !important;display:block !important;transform:none !important}
  .window{display:none !important}
  .hero__inner,.services__copy,.closing__copy{max-width:none;padding:0}
  .js .headline .w,.js .subhero,.js .cta,.js .wordmark,
  .js .window figcaption,.js .eyebrow,.js .s2-headline,.js .svc,
  .js .beat1 .eyebrow,.js .beat1 .t-headline,.js .badge,.js .beat2 > *,
  .js .closing__copy .eyebrow,.js .closing__copy .t-headline,.js .closing__bio,.js .closing__copy .cta,
  .js .reveal,#tbeat1,#tbeat2{opacity:1 !important;transform:none !important;filter:none !important;visibility:visible !important}
  .hero,.services,.trust,.closing,.steps,.reviews,.faq,.section,.cta-band{padding:18pt 0;break-inside:avoid-page}
  .reviews,.cta-band,.section--plum{background:#fff !important;color:#000 !important}
  .reviews *,.cta-band *,.section--plum *{color:#000 !important}
  .site-footer{background:#fff !important;color:#000 !important;padding:12pt 0}
  .site-footer *{color:#000 !important}
  .foot__brand-chip{background:none;padding:0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#444}
  a[href^="tel:"]::after,a[href^="mailto:"]::after,.site-nav a::after{content:none}
  .t-headline,.section h2,.page__hero h1{max-width:none}
  .cta,.beat2 .cta,.cta-band .cta{display:block}
  .cta .btn,.tier .btn{display:inline-block;width:auto;min-height:0;padding:5pt 12pt;margin:4pt 8pt 4pt 0;border:1px solid #000;border-radius:999px;box-shadow:none;background:none !important;color:#000 !important;transform:none}
  .cta__note{display:block}
  .reassure li,.checklist li{justify-content:flex-start}
  .badges{justify-content:flex-start}
}