/* =========================================================================
   Fix My Hair site skin (2026-10 redesign)
   -------------------------------------------------------------------------
   One stylesheet loaded LAST on every page (tools/apply-skin.mjs injects it),
   so it re-skins the 82 hand-built pages without touching their bodies.
   Brand (2026-10 clay): warm cream canvas, ink text, Sunlight Yellow #ffed00
   surfaces and black clay accents (logo box, nav pill, primary actions).
   Claymorphism = soft outer drop plus inner light and shade on raised parts.
   Page colour literals were migrated to light once; legacy page variables are
   remapped here. Keep this file ASCII: gate D1 bans em and en dashes.
   ========================================================================= */

/* the site's own self-hosted DM Sans (also used by the quiz) */
@font-face{font-family:'DM Sans';src:url('/wp-content/uploads/fonts/DMSans-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/wp-content/uploads/fonts/DMSans-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}

:root{
  --fmh-font:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --fmh-page:#fff8dc;
  --fmh-panel:#fff3c4;
  --fmh-card:#fffdf3;
  --fmh-card-2:#fff3c4;
  --fmh-hair:rgb(26 25 22 / .1);
  --fmh-hair-strong:rgb(26 25 22 / .18);
  --fmh-ink:#1a1916;
  --fmh-muted:#5c574a;
  --fmh-faint:#6f6a5c;
  --fmh-y:#ffed00;
  --fmh-y-300:#fff36b;
  --fmh-y-600:#d9c800;
  --fmh-y-ink:#7a5e00;
  --fmh-on-y:#121210;
  --fmh-black:#121210;
  --fmh-clay:0 14px 30px -10px rgb(26 25 22 / .22),inset 0 -5px 10px rgb(26 25 22 / .07),inset 0 4px 8px rgb(255 255 255 / .75);
  --fmh-clay-sm:0 6px 14px -6px rgb(26 25 22 / .2),inset 0 -3px 6px rgb(26 25 22 / .06),inset 0 2px 4px rgb(255 255 255 / .8);
  --fmh-clay-dark:0 14px 30px -10px rgb(26 25 22 / .4),inset 0 -5px 10px rgb(0 0 0 / .35),inset 0 4px 8px rgb(255 255 255 / .14);
  --fmh-r-lg:26px;
  --fmh-r-md:20px;
  --fmh-r-sm:14px;
  --fmh-ease:cubic-bezier(.22,1,.36,1);
  --fmh-glow:0 14px 30px -12px rgb(160 140 0 / .45);
  --fmh-shadow:var(--fmh-clay);
  --fmh-edge:clamp(20px,4vw,76px);

  /* legacy page variables, remapped */
  --sans:var(--fmh-font);
  --serif:var(--fmh-font);
  --syne:var(--fmh-font);
  --font-d:var(--fmh-font);
  --font-b:var(--fmh-font);
  --black:#fff8dc;
  --black2:#fff3c4;
  --black3:#fffdf3;
  --black4:#fff3c4;
  --gold:#ffed00;
  --gold-lt:#fff36b;
  --grey1:#1a1916;
  --grey2:#5c574a;
  --grey3:#6f6a5c;
  --off:#1a1916;
  --bg-light:#fff8dc;
  --text-dark:#1a1916;
  --text-mid:#5c574a;
  --text-cap:#6f6a5c;
  --gold-on-light:#7a5e00;
}

/* ---- type ------------------------------------------------------------- */
html body,html body :where(*:not(svg):not(svg *):not(code):not(pre):not(kbd)){font-family:var(--fmh-font)!important}
html body{background:var(--fmh-page);color:var(--fmh-ink);-webkit-font-smoothing:antialiased}
html body h1,html body h2{font-weight:600!important;letter-spacing:-.035em}
html body h3{font-weight:600!important;letter-spacing:-.01em}
html body h1 em,html body h2 em,html body h1 .it,html body h2 .it{color:var(--fmh-ink)!important;font-style:normal;background:linear-gradient(transparent 58%,var(--fmh-y) 0 92%,transparent 0);-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* split-text wrappers (fmh-motion.js) */
.fmh-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.fmh-ch{display:inline-block}
/* the first heading rises on load: hidden until fmh-motion.js splits it
   (the inline head script adds a 1.8s failsafe) */
html.fmh-motion:not(.fmh-ready) h1{opacity:0}

/* ---- header ---------------------------------------------------------------
   Transparent over the page top, frosted once scrolled (fmh-motion.js sets
   html.fmh-scrolled). Links sit in one pill group with a travelling yellow
   pill on the current page. */
html body .nav{padding-inline:var(--fmh-edge)!important;background:transparent;border-bottom:1px solid transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background-color .35s,border-color .35s}
html.fmh-scrolled body .nav{background:rgb(255 248 220 / .78);border-bottom-color:var(--fmh-hair);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
html body .nav .logo b,html body .nav .logo i{font-weight:800;letter-spacing:-.02em}
html body .nav .nav-links{position:relative;gap:4px!important;padding:5px;border-radius:999px;background:var(--fmh-black);box-shadow:var(--fmh-clay-dark)}
/* the site wordmark is yellow type: it sits in a black clay box on the light canvas */
html body .nav :is(.logo,.nav-logo){background:var(--fmh-black);padding:6px 8px;border-radius:14px;box-shadow:var(--fmh-clay-dark);line-height:0}
/* text-logo pages show the same SVG wordmark as the rest (name stays on aria-label) */
html body .nav :is(.logo,.nav-logo):not(:has(img)){border-radius:14px;box-shadow:var(--fmh-clay-dark);display:block;width:77px;height:56px;background:var(--fmh-black) url(/assets/fixmyhair-logo.svg) center/61px 44px no-repeat}
html body .nav :is(.logo,.nav-logo):not(:has(img)) > *{display:none!important}
html body .nav .nav-links a{position:relative;z-index:1;padding:9px 16px;border-radius:999px;font-size:14.5px!important;font-weight:500!important;color:#aaa69a!important;transition:color .25s}
html body .nav .nav-links a::after{display:none!important}
html body .nav .nav-links a:hover,html body .nav .nav-links a[aria-current="page"]{color:var(--fmh-y)!important}
/* black text only where yellow sits behind it: the rail's link, or the static
   current-page pill when there is no rail (no motion) */
html body .nav .nav-links a.fmh-on{color:var(--fmh-on-y)!important}
html body .nav .nav-links:not(:has(.fmh-rail)) a[aria-current="page"]{color:var(--fmh-on-y)!important;background:var(--fmh-y);box-shadow:var(--fmh-clay-sm)}
.fmh-rail{position:absolute;z-index:0;top:5px;left:0;height:calc(100% - 10px);width:40px;border-radius:999px;background:var(--fmh-y);box-shadow:0 6px 18px -8px rgb(255 237 0 / .7);opacity:0;pointer-events:none}
html body .nav :is(.hamburger,.burger,.nav-burger){width:46px;height:46px;margin:0;padding:0;border:0;border-radius:50%;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:var(--fmh-black);box-shadow:var(--fmh-clay-dark)}
html body .nav :is(.hamburger,.burger,.nav-burger) span{width:18px;height:1.8px;border-radius:2px;background:var(--fmh-y)!important}

/* Five pill links plus logo and CTA do not fit below ~1060px: use the menu. */
@media (max-width:1060px){
  html body .nav:has(.hamburger,.burger,.nav-burger) .nav-links{display:none!important}
  html body .nav :is(.hamburger,.burger,.nav-burger){display:flex!important}
  /* pages force-hide the menu from 721px; let it open up to 1060px */
  html body #mobile-menu.open{display:flex!important}
}
@media (max-width:370px){
  html body .nav .nav-right .btn{font-size:12.5px!important;padding:10px 14px!important}
  html body .nav .logo img{width:52px;height:auto}
}

/* ---- buttons --------------------------------------------------------------
   Yellow gradient pill; fmh-motion.js adds a rolling label and a black icon
   disc when the button text ends in an arrow. */
html body :is(.btn,.nav-cta){border-radius:999px!important;font-weight:600!important;letter-spacing:-.01em}
html body .btn-gold,html body .nav-right .btn-gold,html body .nav-cta{color:var(--fmh-on-y)!important;background:linear-gradient(180deg,var(--fmh-y-300) 0%,var(--fmh-y) 45%,var(--fmh-y-600) 100%)!important;border-radius:999px!important;box-shadow:var(--fmh-clay-sm),var(--fmh-glow)}
html body .btn-gold:hover{filter:brightness(1.04);box-shadow:inset 0 1px 0 rgb(255 255 255 / .6),inset 0 -1px 0 rgb(0 0 0 / .12),0 22px 50px -16px rgb(255 237 0 / .6)}
html body :is(.btn-fem,.btn-wa,.cf-btn,.cn-submit,.lb-book),html body #mobile-menu .menu-cta :is(a,button){border-radius:999px!important}
html body .btn-fem{color:var(--fmh-on-y)!important;background:linear-gradient(180deg,var(--fmh-y-300) 0%,var(--fmh-y) 45%,var(--fmh-y-600) 100%)!important;box-shadow:inset 0 1px 0 rgb(255 255 255 / .55),inset 0 -1px 0 rgb(0 0 0 / .12),var(--fmh-glow)}
html body .btn-line,html body .btn-ghost{color:var(--fmh-ink)!important;background:var(--fmh-card)!important;border:0!important;box-shadow:var(--fmh-clay-sm)}
html body .btn-line:hover,html body .btn-ghost:hover{box-shadow:var(--fmh-clay-sm),inset 0 0 0 1.5px var(--fmh-y-600)}
.fmh-btn{gap:12px!important}
.fmh-btn.fmh-has-icon{padding-right:6px!important}
.fmh-label{position:relative;display:inline-block;overflow:hidden;height:1.25em;line-height:1.25}
.fmh-label .fmh-l2{position:absolute;left:0;top:0}
.fmh-bc{display:inline-block;white-space:pre}
.fmh-icon{display:grid;place-items:center;flex:none;width:2.4em;height:2.4em;border-radius:50%;background:var(--fmh-on-y);color:var(--fmh-y);font-size:.85em;line-height:1;transition:transform .35s var(--fmh-ease)}
.btn-line .fmh-icon,.btn-ghost .fmh-icon{background:var(--fmh-black);color:var(--fmh-y)}
.fmh-btn:hover .fmh-icon{transform:rotate(-45deg)}

/* ---- mobile menu: dark panel, the desktop pill group stacked ---------- */
html body #mobile-menu{background:rgb(255 248 220 / .97)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
html body #mobile-menu .menu-scroll>div[style*="height:1px"],html body #mobile-menu .menu-group>div[style*="height:1px"]{display:none!important}
html body #mobile-menu .menu-group{padding:6px;margin-top:10px;border-radius:28px;background:var(--fmh-card);box-shadow:var(--fmh-clay)}
html body #mobile-menu .menu-group-label{margin:10px 14px 6px!important;font-size:11px!important;letter-spacing:.14em;color:var(--fmh-faint)!important}
html body #mobile-menu .menu-link{padding:13px 18px!important;margin:0!important;border:0!important;border-radius:999px;font-size:18px!important;font-weight:500!important;color:var(--fmh-ink)!important;transition:background-color .25s,color .25s}
html body #mobile-menu .menu-link:hover,html body #mobile-menu .menu-link:active{background:rgb(26 25 22 / .05)!important}
html body #mobile-menu .menu-link.active-page,html body #mobile-menu .menu-link[aria-current="page"]{color:var(--fmh-on-y)!important;background:var(--fmh-y)!important;box-shadow:0 6px 18px -8px rgb(255 237 0 / .7)}
html body #mobile-menu .menu-link-arrow{font-size:14px!important;opacity:.55;color:inherit!important}
html body #mobile-menu .menu-cta{background:transparent!important;border-top:1px solid var(--fmh-hair)!important}
html body #mobile-menu .menu-scroll-cue{background:linear-gradient(to top,#fff8dc 32%,rgb(255 248 220 / 0))!important}

/* ---- sticky bar, footer, cookie banner -------------------------------- */
html body .sticky-bar{margin:0 12px 12px;border-radius:999px;border:0!important;background:rgb(255 253 243 / .9)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--fmh-clay)}
html body .sticky-bar :is(a,button){border-radius:999px!important}
html body .footer{background:var(--fmh-panel)!important;border-top:1px solid var(--fmh-hair)!important;color:var(--fmh-faint)}
html body .footer .footer-row a{color:var(--fmh-muted);transition:color .2s}
html body .footer .footer-row a:hover{color:var(--fmh-y-ink)}

/* ---- article template (59 guide pages): dark, rounded, yellow accents -- */
html body .art-title{font-weight:600!important;letter-spacing:-.035em;line-height:1.06!important}
html body .art-lead{font-weight:400!important;color:var(--fmh-ink)!important}
html body .art-hero{border-radius:var(--fmh-r-md)!important;box-shadow:inset 0 0 0 1px var(--fmh-hair)}
html body .art-take{background:var(--fmh-card)!important;border:0!important;border-radius:var(--fmh-r-md)!important;box-shadow:var(--fmh-shadow),inset 0 0 0 1px var(--fmh-hair),inset 3px 0 0 var(--fmh-y)}
html body .art-take li{color:var(--fmh-ink)!important}
html body .art a.ilink{color:var(--fmh-ink)!important;border-bottom-color:var(--fmh-y-600)!important}
html body .relcard{background:var(--fmh-card)!important;border:0!important;border-radius:var(--fmh-r-md)!important;box-shadow:var(--fmh-shadow),inset 0 0 0 1px var(--fmh-hair)!important;transition:transform .45s var(--fmh-ease),box-shadow .3s}
html body .relcard:hover{transform:translateY(-4px);box-shadow:var(--fmh-shadow),inset 0 0 0 1.5px var(--fmh-y-600)!important}
html body .relcard .rc-t{color:var(--fmh-ink)!important}
html body .art-pill{border-radius:999px}

/* ---- light legacy components, re-skinned dark ------------------------------
   Found by scanning every page's CSS for white/cream backgrounds. Cards turn
   into the dark rounded card; light sections join the black page; their
   hard-coded dark text is lifted to ink. Modals and the quiz keep their own
   (white) forms on purpose. */
html body :is(.jcard,.loc-day,.path-seq,.lab-card,.cmpx-wrap,.wf-card,.combo-card,.pharm-card,.fact,.look,.vs-yes,.vs-no,.use-c,.col-card,.cmp,.svc-card,.acc-item,.pig-col,.who-yes,.who-no,.smp-pc,.sec-light .faq,.sec-light .acc-item,.sec-light .persona,.sec-light .wf,.sec-light .rev){background:var(--fmh-card)!important;border-color:transparent!important;border-radius:var(--fmh-r-md);box-shadow:var(--fmh-shadow),inset 0 0 0 1px var(--fmh-hair)!important}
html body :is(.jrnl-sec,.sec-light.surf-white){background:var(--fmh-page)!important;border-top:1px solid var(--fmh-hair)!important}
html body .cmpx thead th{background:var(--fmh-card-2)!important;color:var(--fmh-ink)!important}
html body .fpill:not(.on){background:var(--fmh-card)!important;border-color:var(--fmh-hair-strong)!important;color:var(--fmh-muted)!important;box-shadow:none!important}
html body .fpill.on{background:var(--fmh-y)!important;color:var(--fmh-on-y)!important}
html body :is(.jrnl-h,.jcard-t,.path-seq-h,.loc-day-h,.loc-steps b){color:var(--fmh-ink)!important}
html body :is(.jrnl-sub,.jcard-m,.path-seq-s,.loc-steps span){color:var(--fmh-muted)!important}
html body :is(.jrnl-eyebrow,.jrnl-h em,.jrnl-all,.jcard-cat,.path-seq-go,.loc-day-h em){color:var(--fmh-y-ink)!important}
html body .jcard-cat{background:rgb(255 237 0 / .12)!important}
html body .jcard-img{background:var(--fmh-card-2)!important}
html body .path-seq a{color:var(--fmh-ink)!important}
html body .path-seq-go,html body .loc-steps li::before{border-color:var(--fmh-y-600)!important;color:var(--fmh-y-ink)!important}
html body .loc-btn.l{border-color:var(--fmh-hair-strong)!important;color:var(--fmh-ink)!important}
/* frosted cream bars (hub filter, article overlay header) go frosted black */
html body :is(.hub-filter,.ov-top){background:rgb(255 248 220 / .85)!important;border-color:var(--fmh-hair)!important;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
html body :is(.f-bot,.footer-bottom){color:var(--fmh-faint)!important}
html body :is(.jcard,.loc-day,.path-seq){transition:transform .45s var(--fmh-ease),box-shadow .3s}
html body .jcard:hover{transform:translateY(-4px);box-shadow:var(--fmh-shadow),inset 0 0 0 1.5px var(--fmh-y-600)!important}

/* 404: its own light theme, rebuilt on the page tokens */
html body .code{color:var(--fmh-ink)!important;font-weight:600!important;letter-spacing:-.05em}
html body .code em{color:var(--fmh-ink)!important;background:linear-gradient(transparent 58%,var(--fmh-y) 0 92%,transparent 0)}
html body:has(.code) .logo:not(.nav .logo),html body .links a{color:var(--fmh-ink)!important}
html body:has(> .code, .code) p{color:var(--fmh-muted)}

/* the hidden attribute always wins over a component's display rule (e.g. .ev-match showed with no assessment) */
html [hidden]{display:none!important}
/* reduced motion, sitewide safety net: state changes (hover rings, the hero
   arrow turn, card lifts, accordion and progress fills) land instantly instead
   of animating. Scripted motion (loader, 3D, GSAP, quiz fades, autoplay) is
   already skipped at source; this catches every CSS transition/animation. */
@media (prefers-reduced-motion: reduce){
  html *,html *::before,html *::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}
/* clip, not hidden: overflow-x:hidden makes body a scroll container and breaks position:sticky (index already did this) */
html,html body{overflow-x:clip}

/* quiz: answered question fades out before the next fades in (see next()) */
#quizOverlay :is(.quiz-opt,.quiz-gopt,.quiz-scale-btn){transition:background-color .18s ease,box-shadow .18s ease,transform .25s ease}
#quizOverlay .quiz-gopt.sel{box-shadow:0 0 0 3px var(--fmh-y),var(--fmh-clay-sm)!important}
#quizOverlay .quiz-gopt.sel .quiz-glbl{background:var(--fmh-y)!important}
#quizOverlay .quiz-gopt.sel .quiz-gsub{color:#3b3626!important}
#quizOverlay .quiz-body.leaving{opacity:0;transform:translateY(-6px);transition:opacity .14s ease,transform .14s ease}
#quizOverlay .quiz-body{animation-duration:.22s!important}

/* hero gender buttons: one hover for both, each in its own colour. Rest and
   hover shadows share a shape; hover adds a soft ring and a deeper drop, the
   arrow grows and turns, a click presses in. No position change (no drag). */
html body .hero7 .hero-sim-genders .hgender{filter:none!important;transition:box-shadow .3s cubic-bezier(.22,1,.36,1),transform .15s ease!important;box-shadow:var(--fmh-clay-sm),0 10px 22px -12px rgb(160 140 0 / .5)!important}
html body .hero7 .hero-sim-genders .hgender:last-child{box-shadow:var(--fmh-clay-sm),0 10px 22px -12px rgb(18 18 16 / .55)!important}
html body .hero7 .hero-sim-genders .hgender:is(:hover,:focus-visible){box-shadow:var(--fmh-clay-sm),0 0 0 5px rgb(255 237 0 / .38),0 18px 30px -12px rgb(160 140 0 / .6)!important}
html body .hero7 .hero-sim-genders .hgender:last-child:is(:hover,:focus-visible){box-shadow:var(--fmh-clay-sm),0 0 0 5px rgb(18 18 16 / .16),0 18px 30px -12px rgb(18 18 16 / .6)!important}
html body .hero7 .hero-sim-genders .hgender:focus-visible{outline:3px solid var(--fmh-ink);outline-offset:6px}
html body .hero7 .hero-sim-genders .hgender:active{transform:scale(.97)!important;transition-duration:.08s!important}
html body .hero7 .hero-sim-genders .hgender .hgender-go{transition:transform .35s cubic-bezier(.22,1,.36,1)!important}
html body .hero7 .hero-sim-genders .hgender:is(:hover,:focus-visible) .hgender-go{transform:scale(1.1) rotate(-45deg)!important}
@media (hover:none){html body .hero7 .hero-sim-genders .hgender:hover .hgender-go{transform:none!important}}

/* ---- homepage blocks (2026-10 clay redesign) ------------------------------ */
/* 1. trust numbers + what is Fix My Hair */
html body .home-rest .tgrid{grid-template-columns:repeat(4,minmax(0,1fr)) auto!important;gap:16px!important;border-top:0!important;padding-top:0!important}
html body .home-rest .tgrid-cell{border:0!important;padding:22px 20px!important;border-radius:22px;background:var(--fmh-card);box-shadow:var(--fmh-clay)}
html body .home-rest .tgrid-cell b{font-weight:650!important;font-size:clamp(30px,3vw,44px)!important;letter-spacing:-.04em}
html body .home-rest .tgrid-cell span{white-space:normal!important;letter-spacing:.08em!important}
html body .home-rest .tgrid-logos{align-self:stretch;display:flex;align-items:center;justify-content:center;background:var(--fmh-card)!important;border-radius:22px!important;padding:16px 22px!important;box-shadow:var(--fmh-clay)}
/* badge art says "89 reviews 5.0", which contradicts the 4.7/13 stat: show only its G mark */
html body .home-rest .tgrid-logos img{width:36px!important;height:36px!important;max-width:none!important;object-fit:cover;object-position:0 50%;opacity:1!important;filter:none!important}
html body .home-rest .home-what{max-width:900px!important;margin-top:28px!important;padding:clamp(22px,3vw,36px);border-radius:28px;background:var(--fmh-card);box-shadow:var(--fmh-clay)}
html body .home-rest .home-what-h{font-size:clamp(24px,2.6vw,32px)!important;font-weight:650!important;letter-spacing:-.03em}
.home-what-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;margin:16px 0 20px;padding:0}
.home-what-facts li{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:18px;font-size:13px;line-height:1.4;color:var(--fmh-muted);background:var(--fmh-y);box-shadow:var(--fmh-clay-sm)}
.home-what-facts li:nth-child(2){color:#c9c4b4;background:var(--fmh-black);box-shadow:var(--fmh-clay-dark)}
.home-what-facts b{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--fmh-on-y)}
.home-what-facts li:nth-child(2) b{color:var(--fmh-y)}
.home-what-facts li:first-child{color:#3b3626}
@media (max-width:760px){
  html body .home-rest .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body .home-rest .tgrid-logos{grid-column:1/-1;justify-self:stretch!important;justify-content:center}
  .home-what-facts{grid-template-columns:1fr}
}

/* 2. twelve months: the drag compare sits in a black clay device */
html body #transform .cmpr{max-width:680px;padding:14px 14px 18px;border-radius:36px;background:var(--fmh-black);box-shadow:var(--fmh-clay-dark)}
html body #transform .cmpr-stage{border:0!important;border-radius:24px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important}
html body #transform .cmpr-line{width:4px;background:var(--fmh-y);box-shadow:none;transform:translateX(-2px)}
html body #transform .cmpr-knob{width:52px;height:52px;color:var(--fmh-on-y)!important;background:var(--fmh-y)!important;box-shadow:var(--fmh-clay-sm)!important}
html body #transform .cmpr-tag{font-weight:700;color:var(--fmh-ink)!important;background:var(--fmh-card)!important;border:0!important;box-shadow:var(--fmh-clay-sm)}
html body #transform .cmpr-tag.a{color:var(--fmh-on-y)!important;background:var(--fmh-y)!important}
html body #transform .cmpr-meta{margin-top:14px;padding:0 6px}
html body #transform .cmpr-g{font-family:inherit;font-weight:650;letter-spacing:-.02em;color:#f3eedd!important}
html body #transform .cmpr-g #cmprG{color:var(--fmh-y)}
html body #transform .cmpr-g em{font-style:normal;font-weight:500;color:#b9b3a1!important}
html body #transform .cmpr-tab{min-height:40px;font-weight:650;color:#e9e3cf!important;background:#24231f!important;border:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 3px 0 #000}
html body #transform .cmpr-tab:hover{color:var(--fmh-y)!important}
html body #transform .cmpr-tab.on{color:var(--fmh-on-y)!important;background:var(--fmh-y)!important;box-shadow:var(--fmh-clay-sm)}
html body #transform .cmpr-tab:focus-visible{outline:3px solid var(--fmh-y);outline-offset:2px}
@media (max-width:760px){html body #transform .cmpr{padding:10px 10px 16px;border-radius:30px}html body #transform .cmpr-stage{border-radius:20px!important}}

/* 3. diagnosis first: test -> read -> plan track, inclusions on black clay */
.why-track{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;margin:0 0 28px;padding:0;counter-reset:wt}
.why-track::before{content:"";position:absolute;left:16%;right:16%;top:21px;height:6px;border-radius:6px;background:var(--fmh-panel);box-shadow:inset 0 2px 3px rgba(18,18,16,.12)}
.why-track li{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:13px;line-height:1.4;color:var(--fmh-muted);counter-increment:wt}
.why-track li::before{content:counter(wt);width:48px;height:48px;display:grid;place-items:center;margin-bottom:6px;border-radius:50%;font-size:17px;font-weight:700;color:var(--fmh-on-y);background:var(--fmh-y);box-shadow:var(--fmh-clay-sm)}
.why-track li:nth-child(2)::before{color:var(--fmh-y);background:var(--fmh-black);box-shadow:var(--fmh-clay-dark)}
.why-track b{font-size:15px;font-weight:700;color:var(--fmh-ink)}
html body .drnote{padding:16px 20px;border-radius:20px;background:var(--fmh-card);box-shadow:var(--fmh-clay-sm)}
html body .drnote-rule{width:5px;background:var(--fmh-y)}
html body .sec-head[style*="center"] .drnote{max-width:600px;margin:22px auto 0;text-align:left}
html body .sec-head[style*="center"] .drnote cite{display:block;text-align:left}
html body #why .cmpx-wrap{margin:0!important;background:none!important;border:0!important;box-shadow:none!important;overflow:visible!important}
html body #why .inc-own{margin:0;padding:clamp(22px,3vw,34px);border:0;border-radius:30px;color:#e9e3cf;background:var(--fmh-black);box-shadow:var(--fmh-clay-dark)}
html body #why .inc-own-h{color:var(--fmh-y)}
html body #why .inc-own-l{gap:12px}
html body #why .inc-own-l li{padding-left:34px;color:#e9e3cf}
html body #why .inc-own-l li::before{top:1px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;font-size:12px;color:var(--fmh-on-y);background:var(--fmh-y);box-shadow:0 2px 0 #8a7a00}
@media (max-width:420px){.why-track{gap:6px}.why-track li{font-size:12px}}

/* 4. blood panel: clay bento on desktop, swipe rail with an edge fade on phones */
html body #labRail .lab-card{border:0!important;border-radius:24px!important;background:var(--fmh-card)!important;box-shadow:var(--fmh-clay)!important}
html body #labRail .lab-ico{border:0;border-radius:16px;background:var(--fmh-y);box-shadow:var(--fmh-clay-sm)}
html body #labRail .lab-ico svg *{stroke:var(--fmh-on-y)}
html body #labRail .lab-ico svg circle[fill]{fill:var(--fmh-on-y)}
html body #labRail .lab-chip{border:0;color:var(--fmh-on-y);background:var(--fmh-y);box-shadow:0 2px 0 #b8a800}
html body #labRail .lab-med{background:var(--fmh-panel)}
html body #labRail .lab-card:first-child{color:#e9e3cf;background:var(--fmh-black)!important;box-shadow:var(--fmh-clay-dark)!important}
html body #labRail .lab-card:first-child :is(.lab-h,.lab-note){color:#f3eedd!important}
html body #labRail .lab-card:first-child .lab-h .it{color:var(--fmh-y)!important}
html body #labRail .lab-card:first-child .lab-med{color:#e9e3cf;background:#2a2925}
html body #labRail .lab-card:first-child .lab-n{color:var(--fmh-y)}
@media (min-width:900px){
  html body #labRail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;overflow:visible;margin:0;padding:6px 0 10px}
  html body #labRail .lab-card:first-child{grid-row:span 2;justify-content:center;padding:30px 28px}
  html body #labRail .lab-card:first-child .lab-h{font-size:24px}
  html body #labRail .lab-card:first-child .lab-note{flex:0;font-size:15px}
  html body #labDots{display:none}
}
@media (min-width:900px) and (max-width:1179px){
  html body #labRail{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body #labRail .lab-card:first-child{grid-row:auto;grid-column:1/-1}
}
@media (max-width:899px){
  html body #labRail{padding:8px 4px 20px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
}

/* 5. personas: tall clay cards with an icon tile; the second is black clay */
html body #start .personas{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
html body #start .persona{min-height:250px;gap:8px;padding:24px!important;border:0!important;border-radius:28px!important;background:var(--fmh-card)!important;box-shadow:var(--fmh-clay)!important;transition:box-shadow .25s}
html body #start .persona:hover{box-shadow:var(--fmh-clay),0 0 0 3px var(--fmh-y)!important}
html body #start .persona:focus-visible{outline:3px solid var(--fmh-ink);outline-offset:3px}
.persona-ic svg{width:28px!important;height:28px!important}
.persona-ic{width:54px;height:54px;display:grid;place-items:center;margin-bottom:10px;border-radius:18px;color:var(--fmh-on-y);background:var(--fmh-y);box-shadow:var(--fmh-clay-sm)}
html body #start .persona-t{font-family:inherit!important;font-size:clamp(18px,1.5vw,21px)!important;font-weight:650!important;letter-spacing:-.02em;color:var(--fmh-ink)!important}
html body #start .persona-s{font-size:13.5px!important;font-weight:400!important;color:var(--fmh-muted)!important}
html body #start .persona-go{align-self:flex-start;padding:10px 16px!important;border-radius:999px;font-size:13px!important;font-weight:700!important;color:var(--fmh-y)!important;background:var(--fmh-black);box-shadow:0 3px 0 #000}
html body #start .persona:nth-child(2){background:var(--fmh-black)!important;box-shadow:var(--fmh-clay-dark)!important}
html body #start .persona:nth-child(2) .persona-t{color:#f3eedd!important}
html body #start .persona:nth-child(2) .persona-s{color:#b9b3a1!important}
html body #start .persona:nth-child(2) .persona-go{color:var(--fmh-on-y)!important;background:var(--fmh-y);box-shadow:0 3px 0 #8a7a00}
@media (max-width:1000px){html body #start .personas{grid-template-columns:repeat(2,minmax(0,1fr))}html body #start .persona{min-height:0}}
@media (max-width:420px){html body #start .personas{gap:12px}html body #start .persona{padding:18px 16px!important;border-radius:22px!important}.persona-ic{width:46px;height:46px;border-radius:15px}html body #start .persona-t{font-size:16px!important}html body #start .persona-s{font-size:12px!important}html body #start .persona-go{padding:8px 13px!important;font-size:12px!important}}

/* 6. six ways: 3x3 bento, hair transplant as the 2x2 black clay tile */
html body .sol-mesh,html body .sol-grid::after,html body .sol::before,html body .sol-arr i{display:none!important}
html body .sol-grid{max-width:1080px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px}
html body .sol{align-items:flex-start!important;text-align:left!important;padding:26px!important;border:0!important;border-radius:28px;background:var(--fmh-card);box-shadow:var(--fmh-clay);transition:box-shadow .25s}
html body .sol:hover{box-shadow:var(--fmh-clay),0 0 0 3px var(--fmh-y)}
html body .sol:focus-visible{outline:3px solid var(--fmh-ink);outline-offset:3px}
html body .sol-ico{width:64px;height:64px!important;margin-bottom:18px!important;border-radius:20px;background:var(--fmh-y);box-shadow:var(--fmh-clay-sm)}
html body .sol .glyph{width:42px;height:42px;stroke:var(--fmh-on-y)!important;stroke-width:1.6}
html body .sol .glyph g{fill:var(--fmh-on-y)}
html body .sol:hover .glyph{transform:none}
html body .sol-t{font-family:inherit!important;font-size:20px!important;font-weight:650;letter-spacing:-.02em!important;text-transform:none!important;margin-bottom:6px!important}
html body .sol-d{font-size:14px!important;font-weight:400!important;margin-bottom:18px!important}
html body .sol-arr{margin-top:auto;border:0!important;color:var(--fmh-y)!important;background:var(--fmh-black)!important;box-shadow:0 3px 0 #000;transform:none!important}
html body .sol:first-child{grid-row:span 2;grid-column:span 2;justify-content:flex-end;padding:clamp(28px,4vw,48px)!important;background:var(--fmh-black);box-shadow:var(--fmh-clay-dark)}
html body .sol:first-child .sol-ico{width:96px;height:96px!important;border-radius:28px;margin-bottom:auto!important}
html body .sol:first-child .glyph{width:64px;height:64px}
html body .sol:first-child .sol-t{margin-top:40px;font-size:clamp(28px,3.4vw,44px)!important;color:#f3eedd!important}
html body .sol:first-child .sol-d{font-size:17px!important;color:#b9b3a1!important}
html body .sol:first-child .sol-arr{width:58px;height:58px;margin-top:0;color:var(--fmh-on-y)!important;background:var(--fmh-y)!important;box-shadow:var(--fmh-clay-sm)}
@media (max-width:860px){
  html body .sol-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
  html body .sol:first-child{grid-row:auto}
  html body .sol:last-child{grid-column:1/-1}
  html body .sol:first-child .sol-ico{margin-bottom:0!important}
  html body .sol:first-child .sol-t{margin-top:24px}
  html body .sol{padding:18px!important;border-radius:22px}
  html body .sol-ico{width:52px;height:52px!important;border-radius:16px;margin-bottom:12px!important}
  html body .sol .glyph{width:36px;height:36px}
  html body .sol-t{font-size:16px!important}
  html body .sol-d{font-size:12.5px!important}
  html body .sol-arr{width:40px;height:40px}
}

/* 7. journey: chunky clay track and nodes, clay step cards */
html body #how .path-rail{padding:24px 8px;margin-top:14px;margin-bottom:10px}
html body #how .path-line{height:10px;border-radius:10px;background:var(--fmh-panel);box-shadow:inset 0 2px 4px rgba(18,18,16,.14)}
html body #how .path-fill{border-radius:10px;background:var(--fmh-y);box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)}
html body #how .path-nodes{position:relative;z-index:1;margin-top:-33px}
html body #how .path-node{width:56px;height:56px;font-size:15px;border:0;color:var(--fmh-muted);background:var(--fmh-card);box-shadow:var(--fmh-clay-sm)}
html body #how .path-node.on{color:var(--fmh-on-y);background:var(--fmh-y)}
html body #how .path-steps{gap:18px}
html body #how .path-card{border:0!important;border-radius:28px!important;padding:26px 22px 22px!important;background:var(--fmh-card)!important;box-shadow:var(--fmh-clay)!important;display:flex;flex-direction:column}
html body #how .path-ghost{top:-8px;right:12px;font-size:96px;color:rgba(255,237,0,.32);-webkit-text-stroke:0}
html body #how .path-ico{width:56px;height:56px;border:0;border-radius:18px;background:var(--fmh-y);box-shadow:var(--fmh-clay-sm)}
html body #how .path-ico svg{width:30px;height:30px}
html body #how .path-ico svg *{stroke:var(--fmh-on-y)}
html body #how .path-t{font-size:21px;letter-spacing:-.02em}
html body #how .path-meta{align-self:flex-start;margin-top:auto;border:0;color:var(--fmh-y);background:var(--fmh-black);box-shadow:0 3px 0 #000}
html body #how .path-d{margin-bottom:16px}
html body #how .path-card:last-child{background:var(--fmh-black)!important;box-shadow:var(--fmh-clay-dark)!important}
html body #how .path-card:last-child .path-t{color:#f3eedd}
html body #how .path-card:last-child .path-d{color:#b9b3a1}
html body #how .path-card:last-child .path-ghost{color:rgba(255,237,0,.14);-webkit-text-stroke:0}
html body #how .path-card:last-child .path-meta{color:var(--fmh-on-y);background:var(--fmh-y);box-shadow:0 3px 0 #8a7a00}
@media (max-width:760px){html body #how .path-node{width:46px;height:46px;font-size:13px}html body #how .path-nodes{margin-top:-28px}html body #how .path-steps{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding:8px 4px 20px}}

/* 8. year of growth: clay stage; the density bar fills with clay hair strands */
html body #growth .jny-stage{border:0!important;border-radius:34px!important;background:var(--fmh-card)!important;box-shadow:var(--fmh-clay)!important}
html body #growth .jny-num{width:max-content;margin:0 auto 18px;padding:14px 26px 12px;border-radius:28px;background:var(--fmh-y);box-shadow:var(--fmh-clay-sm)}
html body #growth #jnyM{font-family:inherit;font-weight:700;font-size:clamp(64px,12vw,96px);letter-spacing:-.05em;color:var(--fmh-on-y)!important;text-shadow:none}
html body #growth .jny-mlbl{font-weight:700;color:var(--fmh-on-y)!important}
html body #growth .jny-copy{font-weight:400}
html body #growth .jny-density{max-width:480px}
html body #growth .jny-dnum{font-family:inherit;font-style:normal;font-weight:700;color:var(--fmh-ink)!important}
html body #growth .jny-bar{position:relative;height:58px;max-width:480px;border-radius:20px;background:var(--fmh-panel);box-shadow:inset 0 3px 6px rgba(18,18,16,.16),inset 0 -2px 0 rgba(255,255,255,.7)}
html body #growth .jny-fill{border-radius:20px 0 0 20px;background:linear-gradient(180deg,var(--fmh-y) 0%,rgba(255,237,0,.6) 30%,transparent 70%),repeating-linear-gradient(96deg,transparent 0 5px,rgba(18,18,16,.85) 5px 7px,transparent 7px 11px),var(--fmh-y)}
html body #growth .jny-range::-webkit-slider-runnable-track{height:8px;background:var(--fmh-panel);box-shadow:inset 0 2px 3px rgba(18,18,16,.14)}
html body #growth .jny-range::-webkit-slider-thumb{width:32px;height:32px;margin-top:-12px;background:var(--fmh-black);border:4px solid var(--fmh-y);box-shadow:0 4px 0 #000,0 10px 18px rgba(18,18,16,.25)}
html body #growth .jny-range::-moz-range-track{height:8px;background:var(--fmh-panel)}
html body #growth .jny-range::-moz-range-thumb{width:26px;height:26px;background:var(--fmh-black);border:4px solid var(--fmh-y)}
html body #growth .jny-range:focus-visible{outline:3px solid var(--fmh-ink);outline-offset:4px;border-radius:12px}
html body #growth .jny-mark{min-height:36px;padding:8px 14px;border:0;font-weight:650;color:var(--fmh-muted);background:var(--fmh-page);box-shadow:var(--fmh-clay-sm)}
html body #growth .jny-mark.on{color:var(--fmh-on-y)!important;background:var(--fmh-y)}

/* 9. who it is for: clay "yes" cards with a check badge, black clay CTA banner */
html body .whofor{gap:16px}
html body .whofor .wf{position:relative;min-height:96px;align-items:center;padding:20px 22px!important;border:0!important;border-radius:24px!important;font-size:15.5px!important;line-height:1.5;color:var(--fmh-ink)!important;background:var(--fmh-card)!important;box-shadow:var(--fmh-clay)!important}
html body .whofor .wf em{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:14px;font-size:0;background:var(--fmh-y);box-shadow:var(--fmh-clay-sm)}
html body .whofor .wf em::after{content:"\2713";font-size:18px;font-style:normal;font-weight:800;color:var(--fmh-on-y)}
html body .whofor .wf-note{margin-top:6px;padding:22px 26px!important;border:0!important;border-radius:28px!important;background:var(--fmh-black)!important;box-shadow:var(--fmh-clay-dark)}
html body .whofor .wf-note-t{font-family:inherit!important;font-style:normal!important;font-size:18px!important;font-weight:600;color:#f3eedd!important}
@media (max-width:760px){html body .whofor .wf{min-height:0;padding:16px 18px!important;font-size:14px!important;border-radius:20px!important}html body .whofor .wf em{width:34px;height:34px;border-radius:12px}html body .whofor .wf-note{padding:18px 20px!important}html body .whofor .wf-note-t{font-size:16px!important}}

/* 10. pricing: clay tickets with a perforated stub; inclusions as one clean column */
html body #pricing .price-cards{gap:16px}
html body #pricing .pcard{position:relative;overflow:hidden;padding:0!important;border:0!important;border-radius:24px!important;background:var(--fmh-card)!important;box-shadow:var(--fmh-clay)!important;transform:none!important}
html body #pricing .pcard-size{position:relative;display:flex;align-items:center;min-height:64px;margin:0!important;padding:14px 20px!important;font-weight:700!important;color:var(--fmh-on-y)!important;background:var(--fmh-y);border-bottom:3px dashed rgba(18,18,16,.22)}
html body #pricing .pcard-size::before,html body #pricing .pcard-size::after{content:"";position:absolute;bottom:-11px;width:20px;height:20px;border-radius:50%;background:var(--fmh-panel);box-shadow:inset 0 2px 3px rgba(18,18,16,.12)}
html body #pricing .pcard-size::before{left:-10px}
html body #pricing .pcard-size::after{right:-10px}
html body #pricing .pcard-n{padding:20px 20px 0;font-family:inherit!important;font-weight:700!important;letter-spacing:-.04em;font-size:clamp(30px,2.5vw,38px)!important}
html body #pricing .pcard-note{padding:0 20px 22px}
html body #pricing .pcard.hi{background:var(--fmh-black)!important;box-shadow:var(--fmh-clay-dark)!important}
html body #pricing .pcard.hi .pcard-n{color:var(--fmh-y)!important}
html body #pricing .pcard.hi .pcard-note{color:#b9b3a1!important}
html body #pricing .incg-panel{border:0!important;border-radius:32px!important;background:var(--fmh-card)!important;box-shadow:var(--fmh-clay)!important}
html body #pricing .incg-sub,html body #pricing .incg-foot-t{font-family:inherit!important;font-style:normal!important;font-weight:650;color:var(--fmh-ink)!important}
html body #pricing .incg{grid-template-columns:1fr!important;gap:8px}
html body #pricing .incg-card{align-items:center;padding:10px 12px!important;border:0!important;border-radius:16px!important;background:var(--fmh-page)!important;box-shadow:var(--fmh-clay-sm)}
html body #pricing .incg-ic{width:38px;height:38px;border:0;border-radius:12px;color:var(--fmh-on-y)!important;background:var(--fmh-y)}
html body #pricing .incg-foot{border-top:0!important}
@media (max-width:760px){html body #pricing .pcard-size{min-height:0}html body #pricing .pcard-n{font-size:34px!important;padding-top:14px}html body #pricing .pcard-note{padding-bottom:16px}}

/* 11. doctor: clay portrait frame, yellow GMC badge, tick rows, clay counters */
html body #doctor .doc-img{padding:12px;border-radius:38px;background:var(--fmh-card);box-shadow:var(--fmh-clay)}
html body #doctor .doc-img video{display:block;width:100%;border-radius:28px}
html body #doctor .doc-img::after{inset:12px;border-radius:28px}
html body #doctor .vid-sound{top:26px;right:26px;border:0;color:var(--fmh-on-y);background:var(--fmh-y);box-shadow:var(--fmh-clay-sm)}
html body #doctor .doc-tag{left:26px;right:26px;bottom:26px;border:0;border-radius:20px;background:rgba(255,253,243,.92);box-shadow:var(--fmh-clay-sm)}
html body #doctor .gmc-chip{padding:7px 12px;border:0;border-radius:999px;color:var(--fmh-on-y);background:var(--fmh-y);box-shadow:0 2px 0 #b8a800}
html body #doctor .quote{padding:20px 24px 20px 30px;border-radius:24px;font-family:inherit;font-weight:400;font-size:clamp(18px,1.7vw,22px);background:var(--fmh-card);box-shadow:var(--fmh-clay-sm)}
html body #doctor .quote::before{left:14px;top:20px;bottom:20px;width:5px;border-radius:5px;background:var(--fmh-y)}
html body #doctor .cred-line{align-items:center;padding:7px 0;border:0;font-size:14.5px;font-weight:400;color:var(--fmh-ink)}
html body #doctor .cred-line em{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:9px;font-size:0;background:var(--fmh-y);box-shadow:0 2px 0 #b8a800}
html body #doctor .cred-line em::after{content:"\2713";font-size:13px;font-style:normal;font-weight:800;color:var(--fmh-on-y)}
html body #doctor .counters{gap:14px}
html body #doctor .counters>div{flex:1;padding:16px 18px;border-radius:22px;background:var(--fmh-card);box-shadow:var(--fmh-clay)}
html body #doctor .counters>div:first-child{background:var(--fmh-black);box-shadow:var(--fmh-clay-dark)}
html body #doctor .counters>div:first-child .counter-n,html body #doctor .counters>div:first-child .counter-n em{color:var(--fmh-y)}
html body #doctor .counters>div:first-child .counter-l{color:#b9b3a1}
html body #doctor .counter-n{font-family:inherit;font-weight:700;letter-spacing:-.04em;font-size:clamp(28px,2.8vw,40px)}
@media (max-width:760px){html body #doctor .doc-img{padding:8px;border-radius:30px}html body #doctor .doc-img video{border-radius:23px}html body #doctor .doc-img::after{inset:8px;border-radius:23px}html body #doctor .vid-sound{top:18px;right:18px}html body #doctor .doc-tag{left:18px;right:18px;bottom:18px}html body #doctor .counters>div{padding:12px}html body #doctor .counter-n{font-size:26px}}

/* 12. results: clay case cards with a black meta bar, clay arrows */
html body #results .r-vary{text-align:left}
html body #results .hscroll{gap:20px;padding-top:12px;padding-bottom:30px}
html body #results .rcard{overflow:hidden;padding:10px;border:0!important;border-radius:30px!important;background:var(--fmh-card)!important;box-shadow:var(--fmh-clay)!important}
html body #results .rcard .ba{border-radius:22px;overflow:hidden}
html body #results .ba-divider{width:4px;background:var(--fmh-y);box-shadow:none;transform:translateX(-2px)}
html body #results .ba-knob{width:44px;height:44px;color:var(--fmh-on-y);background:var(--fmh-y);box-shadow:var(--fmh-clay-sm)}
html body #results .ba-lbl{font-weight:700;color:var(--fmh-ink);background:var(--fmh-card);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--fmh-clay-sm)}
html body #results .ba-lbl.a{color:var(--fmh-on-y);background:var(--fmh-y)}
html body #results .rcard-meta{align-items:center;margin-top:10px;padding:12px 16px;border-radius:18px;background:var(--fmh-black)}
html body #results .rcard-g{font-family:inherit;font-weight:700;letter-spacing:-.02em;color:var(--fmh-y)!important}
html body #results .rcard-g em{font-style:normal;font-weight:500;color:#b9b3a1!important}
html body #results .rcard-t{font-weight:600;color:#e9e3cf!important}
html body #results .hnav button{border:0;color:var(--fmh-y);background:var(--fmh-black);box-shadow:0 4px 0 #000,0 10px 18px rgba(18,18,16,.18)}
html body #results .hnav button:hover{color:var(--fmh-on-y);background:var(--fmh-y)}
html body #results .hnav button:focus-visible{outline:3px solid var(--fmh-ink);outline-offset:3px}

html body #results .hscroll{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
@media (max-width:760px){html body #results .sec-head>div:last-child{flex-wrap:wrap;width:100%}html body #results .sec-head>div:last-child .btn{flex:1 1 auto;min-width:0;white-space:normal;justify-content:space-between}}

/* 13. reviews: clay quote cards, the second in black clay. The Google badge art
   reads "89 reviews 5.0", which contradicts the 4.7/13 stat: show only its G. */
html body .rev-head-badge{width:56px;height:56px;justify-content:center;border-radius:18px;background:var(--fmh-card);box-shadow:var(--fmh-clay-sm)}
html body .rev-head-badge img,html body .rev-badge{width:28px!important;height:28px!important;object-fit:cover;object-position:0 50%;opacity:1!important}
html body .reviews{gap:20px}
html body .rev{border:0!important;border-radius:30px!important;padding:clamp(24px,3vw,34px)!important;background:var(--fmh-card)!important;box-shadow:var(--fmh-clay)!important}
html body .rev-mark{width:52px;height:52px;display:grid;place-items:center;margin-bottom:16px!important;border-radius:16px;font-family:Georgia,serif!important;font-style:normal!important;font-size:44px!important;line-height:1!important;padding-top:14px;opacity:1!important;color:var(--fmh-on-y)!important;background:var(--fmh-y);box-shadow:var(--fmh-clay-sm)}
html body .rev-stars{color:var(--fmh-y-ink)!important;font-size:15px}
html body .rev-text{font-size:15px!important;font-weight:400!important;color:var(--fmh-ink)!important}
html body .rev-foot{border-top:0!important;padding:12px;border-radius:18px;background:var(--fmh-page)}
html body .rev-av .rev-mono{font-family:inherit!important;font-weight:800;color:var(--fmh-on-y)!important;background:var(--fmh-y)!important}
html body .rev+.rev{background:var(--fmh-black)!important;box-shadow:var(--fmh-clay-dark)!important}
html body .rev+.rev .rev-text{color:#e9e3cf!important}
html body .rev+.rev .rev-stars{color:var(--fmh-y)!important}
html body .rev+.rev .rev-foot{background:#24231f}
html body .rev+.rev .rev-name{color:#f3eedd!important}
html body .rev+.rev .rev-src{color:#b9b3a1!important}
html body .rev+.rev .rev-badge{border-radius:50%;background:#fff;padding:3px}
@media (max-width:760px){html body .reviews{scroll-padding-inline:20px}html body .rev-text{font-size:13.5px!important}html body .rev{padding:22px!important;border-radius:26px!important}}

/* 14. FAQ: clay accordion beside a sticky "still have a question" card */
.faq-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start;max-width:1080px;margin:0 auto}
html body #faq .faq-list{max-width:none;margin:0;display:flex;flex-direction:column;gap:12px}
html body #faq .faq{border:0;border-radius:22px;padding:0 22px;background:var(--fmh-card);box-shadow:var(--fmh-clay-sm)}
html body #faq .faq.open{box-shadow:var(--fmh-clay),0 0 0 3px var(--fmh-y)}
html body #faq .faq-q{justify-content:flex-start;gap:14px;text-align:left;padding:20px 0;font-family:inherit;font-weight:600;font-size:clamp(16px,1.4vw,18px)}
html body #faq .faq-x{margin-left:auto;border:0;color:var(--fmh-y);background:var(--fmh-black)}
html body #faq .faq.open .faq-x{color:var(--fmh-on-y);background:var(--fmh-y)}
html body #faq .faq-a-in{font-weight:400;padding-bottom:20px}
.faq-aside{position:sticky;top:calc(var(--nav-h,64px) + 24px);display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:28px;color:#e9e3cf;background:var(--fmh-black);box-shadow:var(--fmh-clay-dark)}
.faq-aside-h{font-size:22px;font-weight:700;letter-spacing:-.02em;color:#f3eedd}
.faq-aside p{margin:0 0 6px;font-size:14px;line-height:1.55;color:#b9b3a1}
.faq-wa,.faq-quiz{display:flex;align-items:center;justify-content:center;min-height:50px;border:0;border-radius:999px;font:inherit;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer}
.faq-wa{color:#fff;background:#1a8f43;box-shadow:0 4px 0 #0f5c2a}
.faq-quiz{color:var(--fmh-on-y);background:var(--fmh-y);box-shadow:0 4px 0 #8a7a00}
.faq-wa:focus-visible,.faq-quiz:focus-visible{outline:3px solid var(--fmh-y);outline-offset:3px}
@media (max-width:860px){.faq-wrap{grid-template-columns:1fr}.faq-aside{position:static}html body #faq .faq{padding:0 16px;border-radius:18px}html body #faq .faq-q{padding:16px 0;font-size:15.5px}}

/* 15. final CTA: the copy sits in a cream clay card over the surgery photo */
html body #contact{padding:clamp(56px,9vh,96px) 16px!important}
html body #contact .cta6-bg::after{background:rgba(255,248,220,.35)!important}
html body #contact .cta6-inner{max-width:780px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(20px,4vw,48px);border-radius:40px;background:rgba(255,253,243,.96);box-shadow:var(--fmh-clay)}
html body #contact .cta-h{font-family:inherit!important;font-weight:650!important;letter-spacing:-.04em}
html body #contact .cta-sub{font-weight:400!important;color:var(--fmh-muted)!important}
html body #contact .cta-g{min-height:58px;padding:0 30px!important;font-size:17px!important;font-weight:700!important}
html body #contact .cta-g-f{color:var(--fmh-y)!important;background:var(--fmh-black)!important;box-shadow:var(--fmh-clay-dark)!important;border:0!important}
html body #contact .btn-line{border:0!important;background:var(--fmh-page)!important;box-shadow:var(--fmh-clay-sm)!important}
html body #contact .cta-trust span{font-weight:500;color:var(--fmh-ink)}
html body #contact .loc{border:0!important;color:var(--fmh-ink)!important;background:var(--fmh-panel)!important;box-shadow:var(--fmh-clay-sm)}
@media (max-width:760px){html body #contact{min-height:0!important}html body #contact .cta6-inner{border-radius:30px}html body #contact .cta-g{flex:1 1 130px;padding:0 14px!important;font-size:16px!important}}

/* 16. journal: wider rail of clay article cards */
html body .jrnl-sec{background:var(--fmh-page)!important;border-top:0!important}
html body .jrnl-wrap{max-width:1080px!important}
html body .jrnl-h{font-weight:650!important;letter-spacing:-.035em!important}
html body .jrnl-sec .jrnl-h em{color:var(--fmh-ink)!important;font-style:normal!important;background:linear-gradient(transparent 58%,var(--fmh-y) 58% 92%,transparent 92%)}
html body .jrnl{gap:20px!important}
html body .jcard{padding:10px;border:0!important;border-radius:28px!important;background:var(--fmh-card)!important;box-shadow:var(--fmh-clay)!important;transform:none!important}
html body .jcard:hover{box-shadow:var(--fmh-clay),0 0 0 3px var(--fmh-y)!important}
html body .jcard:focus-visible{outline:3px solid var(--fmh-ink);outline-offset:3px}
html body .jcard-img{border-radius:20px}
html body .jcard-b{padding:14px 8px 8px!important}
html body .jrnl-sec .jcard .jcard-cat{color:var(--fmh-on-y)!important;background:var(--fmh-y)!important;box-shadow:0 2px 0 #b8a800}
html body .jcard-t{font-weight:650!important;font-size:17px!important;letter-spacing:-.01em}
html body .jrnl-sec a.jrnl-all{display:inline-block;padding:12px 20px;border-radius:999px;font-weight:700!important;color:var(--fmh-y)!important;background:var(--fmh-black);box-shadow:0 4px 0 #000;text-decoration:none}

@media (max-width:679px){html body .jrnl{display:grid!important;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:18px;margin:22px -18px 0;padding:6px 18px 24px;scrollbar-width:none}html body .jrnl::-webkit-scrollbar{display:none}html body .jcard{scroll-snap-align:start}}

/* ---- article template (66 journal pages) ----------------------------------
   Contents pill (built by fmh-motion.js from the h3s): sticky pill on phones,
   open side rail left of the column from 1180px. Reviewer line as a clay
   card, category pills in brand yellow (the inline tints were low contrast). */
html body article.art{position:relative}
html body .art h2{scroll-margin-top:calc(var(--nav-h,64px) + 76px)}
html body .art h3{scroll-margin-top:calc(var(--nav-h,64px) + 76px);font-family:inherit!important;font-weight:650!important;font-size:21px!important;letter-spacing:-.02em}
html body .art-pill{color:var(--fmh-on-y)!important;background:var(--fmh-y)!important;box-shadow:0 2px 0 #b8a800}
html body .art-review{padding:10px 14px;border-radius:18px;background:var(--fmh-card);box-shadow:var(--fmh-clay-sm)}
html body .art-doc{width:40px!important;height:40px!important;border:2px solid var(--fmh-y)!important}
html body .art-take{border-radius:26px!important;padding:22px 24px!important;box-shadow:var(--fmh-clay)!important}
html body .art-take h4{display:inline-block;padding:6px 12px;border-radius:999px;font-family:inherit!important;font-weight:700!important;font-size:12px!important;color:var(--fmh-on-y)!important;background:var(--fmh-y)}
html body .art-take li::before{border:0!important;background:var(--fmh-y)!important;box-shadow:0 2px 0 #b8a800}
html body .art-take li::after{background:var(--fmh-on-y)!important}
.fmh-toc{position:sticky;top:calc(var(--nav-h,64px) + 10px);z-index:20;margin:0 0 22px}
.fmh-toc summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;list-style:none;font-size:14px;font-weight:700;color:var(--fmh-y);background:var(--fmh-black);box-shadow:0 4px 0 #000,0 10px 20px rgba(18,18,16,.18);cursor:pointer}
.fmh-toc summary::-webkit-details-marker{display:none}
.fmh-toc summary::after{content:"";width:8px;height:8px;margin-top:-4px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.fmh-toc details[open] summary::after{margin-top:4px;transform:rotate(225deg)}
.fmh-toc summary:focus-visible,.fmh-toc a:focus-visible{outline:3px solid var(--fmh-y);outline-offset:2px}
.fmh-toc ol{max-height:60vh;overflow:auto;margin:10px 0 0;padding:10px;list-style:none;border-radius:22px;background:var(--fmh-card);box-shadow:var(--fmh-clay)}
.fmh-toc a{display:block;padding:8px 12px;border-radius:12px;font-size:14px;line-height:1.35;color:var(--fmh-muted);text-decoration:none}
.fmh-toc a:hover{color:var(--fmh-ink);background:var(--fmh-panel)}
.fmh-toc a.on{font-weight:700;color:var(--fmh-on-y);background:var(--fmh-y)}
@media (min-width:1180px){
  .fmh-toc{position:absolute;left:-272px;bottom:0;width:232px;margin:0}
  .fmh-toc summary{display:none}
  .fmh-toc details{position:sticky;top:calc(var(--nav-h,64px) + 32px)}
  .fmh-toc ol{max-height:calc(100vh - var(--nav-h,64px) - 64px);margin:0}
}
@media (min-width:700px){html body .art-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;overflow:visible;margin:0;padding:0}}
html body .art-rel{padding-bottom:16px}
html body .relcard{padding:8px;border-radius:22px!important;box-shadow:var(--fmh-clay)!important}
html body .relcard .hcard-hero{border-radius:16px;overflow:hidden}
html body .relcard .rc-t{font-family:inherit!important;font-weight:650!important;font-size:14px!important;padding:10px 6px 4px!important}

/* ---- location pages: the patient-journey card in black clay ---------------- */
html body .loc-day.loc-day{padding:clamp(22px,3vw,30px)!important;border:0!important;border-radius:30px!important;color:#e9e3cf;background:var(--fmh-black)!important;box-shadow:var(--fmh-clay-dark)!important}
html body .loc-day .loc-day-h{font-family:inherit!important;font-weight:650;font-size:21px;letter-spacing:-.02em;color:#f3eedd!important}
html body .loc-day .loc-day-h em{font-style:normal!important;color:var(--fmh-y)!important}
html body .loc-day .loc-steps li{border-top:0}
html body .loc-day .loc-steps li::before{width:32px;height:32px;display:grid;place-items:center;border:0;font-weight:800;color:var(--fmh-on-y);background:var(--fmh-y);box-shadow:0 3px 0 #8a7a00}
html body .loc-day .loc-steps b{color:#f3eedd!important}
html body .loc-day .loc-steps span{color:#b9b3a1!important}
html body .loc-day .loc-btn{min-height:52px;display:flex;align-items:center;justify-content:center;border-radius:999px;font-weight:700}
html body .loc-day .loc-btn.g{color:var(--fmh-on-y)!important;background:var(--fmh-y)!important;box-shadow:0 4px 0 #8a7a00}
html body .loc-day .loc-btn.l{border:0!important;color:#fff!important;background:#1a8f43!important;box-shadow:0 4px 0 #0f5c2a}
html body .loc-day .loc-btn:focus-visible{outline:3px solid var(--fmh-y);outline-offset:3px}

/* ---- footer (every page): one big black clay panel --------------------------- */
html body footer.footer{margin:0 12px 12px!important;padding:clamp(36px,6vw,64px) max(22px,calc(50% - 600px)) clamp(28px,4vw,40px)!important;border:0!important;border-radius:40px!important;color:#b9b3a1!important;background:var(--fmh-black)!important;box-shadow:var(--fmh-clay-dark)}
html body footer.footer *:not(svg):not(svg *){color:inherit!important;border-color:rgba(255,255,255,.1)!important}
html body footer.footer a{color:#e9e3cf!important;text-decoration-color:rgba(255,237,0,.5)}
html body footer.footer a:hover{color:var(--fmh-y)!important}
html body footer.footer a:focus-visible{outline:3px solid var(--fmh-y);outline-offset:3px;border-radius:6px}
html body footer.footer :is(.f-h,.logo){color:var(--fmh-y)!important}
html body footer.footer .f-soc{border:0!important;color:var(--fmh-y)!important;background:#24231f!important;box-shadow:0 3px 0 #000}
html body footer.footer .f-soc svg{fill:currentColor}
@media (max-width:760px){html body footer.footer{margin:0 8px 8px!important;border-radius:30px!important}}

/* ---- photo heroes: full-colour photo, cream wash behind the copy side ---- */
html body :is(.fue-hero-bg,.smp-hero-bg,.hs-hero-bg,.cn-hero-bg)::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgb(255 248 220 / .82) 0%,rgb(255 248 220 / .55) 38%,rgb(255 248 220 / 0) 68%)}

/* ---- homepage hero (index): clay clinic ----------------------------------
   Copy left, the animated clay clinic right (assets/clinic/fmh-clinic.js).
   The poster is the LCP image and stays until the first WebGL frame. The
   canvas bleeds past its stage and fades at the sides, so zoomed or wide
   scenes never end on a hard box edge. Below 761px the clinic rises behind
   the lower half of the copy. The two gender choices are the only actions,
   and both open the assessment quiz (flowmap: home hero -> quiz). */
.fmh-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html body .hero7{min-height:clamp(620px,100svh,980px)!important;display:grid!important;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center!important;gap:0 clamp(8px,2vw,32px);padding:calc(var(--nav-h,64px) + 40px) var(--fmh-edge) 40px!important;background:var(--fmh-page)!important;overflow:visible!important}
html body .hero7 .hero7-inner{position:relative;z-index:2;width:auto!important;max-width:620px!important;margin:0!important;padding:0!important;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
html body .hero7 .d1{font-size:clamp(42px,5vw,84px)!important;font-weight:600!important;line-height:1!important;letter-spacing:-.045em!important;color:var(--fmh-ink)!important}
html body .hero7 .hero-sub{max-width:34em!important;margin-top:clamp(16px,2vh,24px)!important;font-size:clamp(16px,1.1vw,19px)!important;line-height:1.6;color:var(--fmh-muted)!important}
html body .hero7 .hero-sim{max-width:600px!important;margin-top:clamp(22px,3vh,34px)!important}
html body .hero7 .hero-sim-head{justify-content:flex-start!important;gap:10px!important;margin-bottom:8px!important}
html body .hero7 .hero-sim-q{font-size:12.5px!important;font-weight:700!important;letter-spacing:.08em!important;color:var(--fmh-ink)!important}
html body .hero7 .hero-sim-tag{font-size:11px!important;font-weight:700;letter-spacing:.06em!important;color:var(--fmh-on-y)!important;background:var(--fmh-y)!important;border:0!important;border-radius:999px!important;padding:5px 11px!important;box-shadow:var(--fmh-clay-sm)}
html body .hero7 .hero-sim-lead{font-size:14px!important;letter-spacing:0!important;text-transform:none!important;color:var(--fmh-muted)!important;margin-bottom:18px!important}
html body .hero7 .hero-sim-genders{display:flex;gap:12px!important;flex-wrap:wrap}
html body .hero7 .hero-sim-genders .hgender{flex:0 0 auto!important;display:inline-flex!important;flex-direction:row!important;align-items:center!important;gap:14px!important;min-height:58px;margin:0!important;padding:0 7px 0 26px!important;border:0!important;border-radius:999px!important;clip-path:none!important;overflow:visible!important;color:var(--fmh-on-y)!important;background:linear-gradient(180deg,var(--fmh-y-300) 0%,var(--fmh-y) 45%,var(--fmh-y-600) 100%)!important;box-shadow:var(--fmh-clay-sm),var(--fmh-glow);transition:filter .2s}
html body .hero7 .hero-sim-genders .hgender:last-child{color:var(--fmh-y)!important;background:var(--fmh-black)!important;box-shadow:var(--fmh-clay-dark)}
html body .hero7 .hgender:hover{filter:brightness(1.04);transform:none!important}
html body .hero7 .hgender::before,html body .hero7 .hgender-ic{display:none!important}
html body .hero7 .hgender-t,html body .hero7 .hgender:hover .hgender-t,html body .hero7 .hgender:focus-visible .hgender-t{font-size:17px!important;font-weight:650!important;letter-spacing:-.01em!important;text-transform:none!important;color:inherit!important}
html body .hero7 .hgender-go,html body .hero7 .hgender:hover .hgender-go,html body .hero7 .hgender:focus-visible .hgender-go{flex:none;width:44px;height:44px;display:flex!important;align-items:center;justify-content:center;gap:0!important;border-radius:50%;font-size:0!important;line-height:0!important;color:var(--fmh-y)!important;background:var(--fmh-black);transition:transform .35s var(--fmh-ease)}
html body .hero7 .hgender:last-child .hgender-go,html body .hero7 .hgender:last-child:hover .hgender-go{color:var(--fmh-on-y)!important;background:var(--fmh-y)}
html body .hero7 .hgender-go svg{width:15px;height:15px;display:block}
html body .hero7 .hgender:hover .hgender-go{transform:rotate(-45deg)}

.fmh-clinic{position:relative;z-index:1;margin:0;min-width:0}
.fmh-clinic-stage{position:relative;width:100%;aspect-ratio:1.2}
.fmh-clinic-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .5s}
.fmh-clinic-canvas{position:absolute;inset:-8% -18%;opacity:0;transition:opacity .6s;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12% 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12% 88%,transparent)}
.fmh-clinic-canvas canvas{display:block;width:100%;height:100%}
.fmh-clinic-stage.is-live .fmh-clinic-poster{opacity:0}
.fmh-clinic-stage.is-live .fmh-clinic-canvas{opacity:1}
.fmh-clinic-toggle{position:absolute;right:3%;bottom:2%;z-index:2;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;color:var(--fmh-ink);background:var(--fmh-card);box-shadow:var(--fmh-clay);cursor:pointer}
.fmh-clinic-toggle path{fill:currentColor}
.fmh-clinic-toggle .i-play,.fmh-clinic-toggle.is-paused .i-pause{display:none}
.fmh-clinic-toggle.is-paused .i-play{display:inline}
.fmh-clinic figcaption{margin:6px auto 0;max-width:440px;text-align:center;font-size:11.5px;line-height:1.5;color:var(--fmh-faint)}
html body .hero7 :is(a,button){cursor:pointer}

@media (max-width:760px){
  /* the clinic rises a fixed ~230px behind the CTA area at every phone width */
  html body .hero7{display:block!important;position:relative;isolation:isolate;min-height:0!important;padding:calc(var(--nav-h,64px) + 28px) 20px calc(min(100vw,600px) / 1.2 - 120px)!important}
  html body .hero7 .hero7-inner{max-width:none!important}
  html body .hero7 .d1{font-size:clamp(38px,11vw,52px)!important}
  html body .hero7 .hero-sim-genders{flex-wrap:nowrap;gap:10px!important}
  html body .hero7 .hero-sim-genders .hgender{flex:1 1 0!important;min-width:0;justify-content:space-between;gap:8px!important;padding-left:18px!important;white-space:nowrap}
  html body .hero7 .hgender-t{font-size:16px!important}
  html body .hero7 .hero-sim-genders{flex-wrap:wrap}
  html body .hero7 .hero7-inner,html body .hero7 .hero-sim{position:static!important;transform:none!important}
  html body .hero7 .hero7-inner>:not(.hero-sim),html body .hero7 .hero-sim>:not(.hero-sim-genders){position:relative;z-index:2}
  html body .hero7 .hero-sim-genders{position:absolute!important;left:20px;right:20px;bottom:58px;z-index:3;max-width:560px;margin:0 auto}
  .fmh-clinic-toggle{bottom:84px}
  html body .hero7 .hero-sim-genders .hgender{flex-basis:150px!important}
  /* the copy that overlaps the clinic sits on a frosted cream clay panel */
  /* painted on the two rows, not .hero-sim: a filter or backdrop there would
     capture the absolutely placed gender buttons */
  html body .hero7 :is(.hero-sim-head,.hero-sim-lead){margin-inline:-12px!important;padding-inline:14px;background:rgb(255 248 220 / .92)}
  html body .hero7 .hero-sim-head{margin-bottom:0!important;padding-top:12px;padding-bottom:6px;border-radius:18px 18px 0 0;flex-wrap:wrap}
  html body .hero7 .hero-sim-lead{margin-bottom:0!important;padding-bottom:12px;border-radius:0 0 18px 18px;box-shadow:0 12px 20px -14px rgb(26 25 22 / .35)}
  /* 2026-10-09: phone order is title, subtitle, clinic, the "see your result"
     panel, then the gender buttons; the panel no longer sits on the scene */
  html body .hero7{display:flex!important;flex-direction:column;align-items:stretch!important;padding-bottom:20px!important}
  html body .hero7 :is(.hero7-inner,.hero-sim,.fmh-clinic){display:contents!important}
  html body .hero7 .d1{order:1;align-self:stretch;margin-inline:0!important;text-align:left!important}
  html body .hero7 .hero-sub{order:2;margin-inline:0!important;text-align:left!important}
  html body .hero7 .fmh-clinic-stage{order:3;position:relative;z-index:0;width:calc(100% + 40px);max-width:600px;margin:-56px -20px -8px;align-self:center}
  html body .hero7 .hero-sim-head{order:4;margin-top:0!important}
  html body .hero7 .hero-sim-lead{order:5}
  html body .hero7 .hero-sim-genders{order:6;position:static!important;margin:14px 0 0!important;max-width:none}
  html body .hero7 .fmh-clinic figcaption{order:7;margin:14px auto 0}
  html body .hero7 .fmh-clinic-toggle{bottom:10%}
  .fmh-clinic{position:absolute;left:0;right:0;bottom:0;z-index:0}
  .fmh-clinic-stage{max-width:600px;margin:0 auto;-webkit-mask-image:linear-gradient(transparent 40px,#000 170px);mask-image:linear-gradient(transparent 40px,#000 170px)}
  .fmh-clinic-canvas{inset:0;-webkit-mask-image:none;mask-image:none}
  .fmh-clinic figcaption{margin:2px auto 10px;padding:0 16px}
}

/* very small phones: the two buttons stack, so give them room under the copy */
@media (max-width:370px){
  html body .hero7{padding-bottom:calc(min(100vw,600px) / 1.2 - 40px)!important}
  .fmh-clinic-toggle{bottom:150px}
}

/* ---- scroll morph -----------------------------------------------------------
   Native scroll-driven animations, no JS: cards morph in (blur, scale, rounder
   corners settling to their own radius), media unveils through a rounded
   window, body copy drifts up. Scrubbed by scroll position. Uses the
   individual translate/scale properties so the pages' own hover transforms
   still compose. Skips anything already on a page's own .rv reveal.
   ponytail: browsers without animation-timeline (Firefox today) simply show
   everything at rest; add a JS fallback only if that audience matters. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    html.fmh-motion body :is(.relcard,.jcard,.path-card,.art-take,.acc-item,.loc-day,.svc-card,.col-card,.lab-card,.pharm-card,.combo-card,.wf-card,.tgrid-cell,.cmpr-case,.price-row,.pcard,.fact,.look):not(.rv):not(.rv *){animation:fmh-morph linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
    html.fmh-motion body :is(.art-hero,.art figure,.sec figure,.sec-inner>img):not(.rv):not(.rv *){animation:fmh-unveil linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    html.fmh-motion body :is(.art>p,.art>ul,.art>h3,.art-lead,.sec-inner>p):not(.rv):not(.rv *){animation:fmh-drift linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  }
}
@keyframes fmh-morph{from{opacity:0;translate:0 56px;scale:.92;filter:blur(10px);border-radius:56px}to{opacity:1;translate:0 0;scale:1;filter:blur(0)}}
@keyframes fmh-unveil{from{opacity:.2;clip-path:inset(14% 10% round 48px);scale:1.06}to{opacity:1;clip-path:inset(0 round 0);scale:1}}
@keyframes fmh-drift{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}

/* ---- assessment quiz (#quizOverlay, 12 pages): same clay language -------- */
html body #quizOverlay{background:var(--fmh-page)!important}
html body #quizOverlay :is(.quiz-q,.res-h){font-weight:600!important;letter-spacing:-.035em;line-height:1.08!important;font-size:clamp(28px,4.2vw,40px)!important;color:var(--fmh-ink)!important}
html body #quizOverlay :is(.quiz-sub,.quiz-opt-s,.res-sub){font-weight:400!important;color:var(--fmh-muted)!important}
html body #quizOverlay .quiz-sub{font-size:15px!important}
html body #quizOverlay .quiz-back{padding:9px 16px 9px 12px;border-radius:999px;font-weight:600;color:var(--fmh-ink)!important;background:var(--fmh-card);box-shadow:var(--fmh-clay-sm)}
html body #quizOverlay .quiz-close{width:44px;height:44px;border:0!important;color:var(--fmh-y)!important;background:var(--fmh-black);box-shadow:var(--fmh-clay-dark)}
html body #quizOverlay .quiz-progwrap{height:10px!important;margin:4px clamp(16px,4vw,40px) 0;border-radius:999px;background:var(--fmh-card)!important;box-shadow:inset 0 2px 5px rgb(26 25 22 / .14)}
html body #quizOverlay .quiz-progfill{border-radius:999px;background:var(--fmh-y)!important;box-shadow:inset 0 2px 3px rgb(255 255 255 / .8),inset 0 -2px 4px rgb(26 25 22 / .15)}
html body #quizOverlay :is(.quiz-opt,.quiz-gopt,.quiz-scale-btn){background:var(--fmh-card)!important;border:0!important;border-radius:22px!important;box-shadow:var(--fmh-clay)!important;transform:none!important;transition:background .2s,box-shadow .25s}
html body #quizOverlay .quiz-opt{padding:18px 22px!important;min-height:72px}
html body #quizOverlay :is(.quiz-opt-t,.quiz-glbl){font-size:17px!important;font-weight:600!important;color:var(--fmh-ink)!important}
html body #quizOverlay :is(.quiz-opt,.quiz-gopt,.quiz-scale-btn):hover{box-shadow:var(--fmh-clay),inset 0 0 0 2px var(--fmh-y-600)!important}
html body #quizOverlay :is(.quiz-opt,.quiz-gopt,.quiz-scale-btn).sel{background:var(--fmh-y)!important;box-shadow:var(--fmh-clay-sm),var(--fmh-glow)!important}
html body #quizOverlay :is(.quiz-opt,.quiz-gopt,.quiz-scale-btn).sel :is(.quiz-opt-t,.quiz-glbl,.quiz-opt-s){color:var(--fmh-on-y)!important}
html body #quizOverlay .quiz-gimg{height:150px!important;background:var(--fmh-card-2)!important}
html body #quizOverlay .quiz-gimg img{width:100%!important;height:100%!important;object-fit:cover!important}
html body #quizOverlay .quiz-gcheck{background:var(--fmh-black)!important;color:var(--fmh-y)!important}
html body #quizOverlay :is(.quiz-next,.res-cta){min-height:58px;font-size:16px!important;font-weight:650!important;color:var(--fmh-on-y)!important;background:linear-gradient(180deg,var(--fmh-y-300) 0%,var(--fmh-y) 45%,var(--fmh-y-600) 100%)!important;border-radius:999px!important;box-shadow:var(--fmh-clay-sm),var(--fmh-glow)!important;transform:none!important}
html body #quizOverlay .quiz-next:disabled{opacity:1!important;color:var(--fmh-faint)!important;background:var(--fmh-card)!important;box-shadow:inset 0 2px 6px rgb(26 25 22 / .12)!important}
html body #quizOverlay :is(.qgate-input,.quiz-name-input,.quiz-heard-sel,input[type=text],input[type=email],input[type=tel],textarea,select){border:0!important;border-radius:18px!important;background:var(--fmh-card)!important;color:var(--fmh-ink)!important;font-family:var(--fmh-font)!important;font-weight:500!important;box-shadow:inset 0 3px 8px rgb(26 25 22 / .12),inset 0 -2px 4px rgb(255 255 255 / .9)!important}
html body #quizOverlay :is(.qgate-input,.quiz-name-input,.quiz-heard-sel,input,textarea,select):focus{box-shadow:inset 0 3px 8px rgb(26 25 22 / .12),0 0 0 3px var(--fmh-y)!important}
html body #quizOverlay .quiz-chip{border:0!important;border-radius:999px!important;background:var(--fmh-y)!important;color:var(--fmh-on-y)!important;box-shadow:var(--fmh-clay-sm)!important;animation:none!important}
html body #quizOverlay .quiz-chip::before{background:var(--fmh-black)!important}
html body #quizOverlay .quiz-rail-tag{font-style:normal!important;font-size:12px!important;color:var(--fmh-faint)!important}
html body #quizOverlay :is(.res-why,.res-line,.res-promise,.res-badge){border:0!important;border-radius:20px!important;background:var(--fmh-card)!important;box-shadow:var(--fmh-clay)!important}

/* ---- fallback phone menu (fmh-motion.js builds it where a page had none) ---- */
.fmh-menu{position:fixed;left:12px;right:12px;top:calc(var(--nav-h,72px) + 8px);z-index:2147482000;display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:28px;background:var(--fmh-card);box-shadow:var(--fmh-clay)}
.fmh-menu[hidden]{display:none}
.fmh-menu a{padding:14px 18px;border-radius:999px;font-size:18px;font-weight:500;color:var(--fmh-ink)}
.fmh-menu a:hover,.fmh-menu a[aria-current="page"]{color:var(--fmh-on-y);background:var(--fmh-y)}
.fmh-menu-cta{margin-top:6px;min-height:52px;border:0;border-radius:999px;font:600 16px var(--fmh-font);color:var(--fmh-on-y);background:linear-gradient(180deg,var(--fmh-y-300) 0%,var(--fmh-y) 45%,var(--fmh-y-600) 100%);box-shadow:var(--fmh-clay-sm);cursor:pointer}
/* wide content tables scroll inside their own box on phones, not the page */
@media (max-width:760px){html body table{display:block;max-width:100%;overflow-x:auto}}
/* long URLs and tokens in copy wrap instead of widening the page */
html body :is(p,li,dd,td,th){overflow-wrap:break-word}

/* ---- loading screen (B2): wipe and squish ----------------------------------
   Injected by the skin block on the first page view of a session. The box and
   letters match the nav logo (assets/fixmyhair-logo.svg: Arial Bold, #FFFF3B,
   same proportions), so the last frame is the real wordmark. */
.fmh-loader{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:var(--fmh-page);transition:opacity .5s var(--fmh-ease),visibility .5s}
.fmh-loader.is-done{opacity:0;visibility:hidden}
.fmh-loader-box{position:relative;width:158px;height:118px;border-radius:24px;background:var(--fmh-black);box-shadow:var(--fmh-clay-dark);clip-path:inset(0 100% 0 0 round 24px);animation:fmh-wipe .9s cubic-bezier(.6,0,.2,1) forwards;font:700 36px/1 Arial,Helvetica,sans-serif;color:#ffff3b}
.fmh-ll{position:absolute;left:21px;display:flex;white-space:pre;letter-spacing:-.042em}
.fmh-ll:first-child{top:12px}
.fmh-ll+.fmh-ll{top:52px;letter-spacing:-.028em}
.fmh-ll i{display:inline-block;font-style:normal;opacity:0;transform:translateX(80px) scale(.6);animation:fmh-squish .6s cubic-bezier(.3,1.5,.5,1) forwards;animation-delay:calc(.45s + var(--i) * .09s)}
.fmh-loader-bar{width:190px;height:14px;border-radius:999px;background:var(--fmh-card);box-shadow:inset 0 3px 7px rgb(26 25 22 / .16),inset 0 -2px 4px #fff;overflow:hidden}
.fmh-loader-bar b{display:block;height:100%;width:0;border-radius:999px;background:var(--fmh-y);box-shadow:inset 0 3px 4px rgb(255 255 255 / .8),inset 0 -3px 5px rgb(26 25 22 / .15);animation:fmh-fill 2.4s cubic-bezier(.3,0,.2,1) forwards}
.fmh-loader.is-done .fmh-loader-bar b{width:100%!important;animation:none;transition:width .3s}
@keyframes fmh-wipe{to{clip-path:inset(0 0 0 0 round 24px)}}
@keyframes fmh-squish{70%{opacity:1;transform:translateX(-3px) scale(1.15,.9)}to{opacity:1;transform:none}}
@keyframes fmh-fill{to{width:88%}}

/* ---- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .fmh-icon,html body .relcard{transition:none}
}

/* reduced motion, part 2: these rules carry their own !important timings at a
   higher specificity than the sitewide net above, so they are restated last */
@media (prefers-reduced-motion: reduce){
  #quizOverlay .quiz-body,html body #quizOverlay .quiz-chip,html body .hero7 .hero-sim-genders .hgender,html body .hero7 .hero-sim-genders .hgender .hgender-go{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html body .hero7 .hero-sim-genders .hgender:active{transform:none!important}
}