/* =========================================================================
   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: black surfaces, Sunlight Yellow #ffed00 as the only accent, black
   text on yellow. Geometry and motion follow the approved homepage concept
   (Fernly: pills, 26/20/14px radii, glow). Legacy page variables are remapped
   here, so light "article" pages turn dark through the variables they
   already use. 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:#0a0a09;
  --fmh-panel:#121210;
  --fmh-card:#181815;
  --fmh-card-2:#20201c;
  --fmh-hair:rgb(255 255 255 / .08);
  --fmh-hair-strong:rgb(255 255 255 / .14);
  --fmh-ink:#f5f3ea;
  --fmh-muted:#aaa69a;
  --fmh-faint:#8d897e;
  --fmh-y:#ffed00;
  --fmh-y-300:#fff36b;
  --fmh-y-600:#d9c800;
  --fmh-on-y:#0a0a09;
  --fmh-r-lg:26px;
  --fmh-r-md:20px;
  --fmh-r-sm:14px;
  --fmh-ease:cubic-bezier(.22,1,.36,1);
  --fmh-glow:0 18px 44px -18px rgb(255 237 0 / .45);
  --fmh-shadow:0 1px 0 rgb(255 255 255 / .03) inset,0 24px 60px -32px rgb(0 0 0 / .9);
  --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:#0a0a09;
  --black2:#121210;
  --black3:#181815;
  --black4:#20201c;
  --gold:#ffed00;
  --gold-lt:#fff36b;
  --bg-light:#0a0a09;
  --text-dark:#f5f3ea;
  --text-mid:#aaa69a;
  --text-cap:#8d897e;
  --gold-on-light:#ffed00;
}

/* ---- 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-y);font-style:italic}

/* 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(10 10 9 / .74);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-panel);box-shadow:inset 0 0 0 1px var(--fmh-hair)}
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:var(--fmh-muted)!important;transition:color .25s}
html body .nav .nav-links a::after{display:none!important}
html body .nav .nav-links a:hover{color:var(--fmh-ink)!important}
html body .nav .nav-links a[aria-current="page"]{color:var(--fmh-on-y)!important}
.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 .hamburger{width:46px;height:46px;border-radius:50%;background:var(--fmh-panel);box-shadow:inset 0 0 0 1px var(--fmh-hair)}
html body .nav .hamburger span{width:18px;height:1.8px;border-radius:2px}

/* ---- 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:inset 0 1px 0 rgb(255 255 255 / .55),inset 0 -1px 0 rgb(0 0 0 / .12),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:rgb(255 255 255 / .05)!important;border:0!important;box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .26);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html body .btn-line:hover,html body .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--fmh-y)}
.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:rgb(255 255 255 / .1);color:var(--fmh-ink)}
.fmh-btn:hover .fmh-icon{transform:rotate(-45deg)}

/* ---- mobile menu: dark panel, the desktop pill group stacked ---------- */
html body #mobile-menu{background:rgb(10 10 9 / .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-panel);box-shadow:inset 0 0 0 1px var(--fmh-hair)}
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(255 255 255 / .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,#0a0a09 32%,rgb(10 10 9 / 0))!important}

/* ---- sticky bar, footer, cookie banner -------------------------------- */
html body .sticky-bar{margin:0 12px 12px;border-radius:999px;border:0!important;background:rgb(10 10 9 / .82)!important;box-shadow:0 18px 40px -16px rgb(0 0 0 / .9),inset 0 0 0 1px var(--fmh-hair)}
html body .sticky-bar :is(a,button){border-radius:999px!important}
html body .footer{background:#060605!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)}

/* ---- 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-y)!important;border-bottom-color:rgb(255 237 0 / .35)!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 1px rgb(255 237 0 / .4)!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)!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:rgb(255 237 0 / .3)!important;color:var(--fmh-y)!important}
html body .loc-btn.l{border-color:rgb(255 255 255 / .26)!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(10 10 9 / .82)!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 1px rgb(255 237 0 / .4)!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-y)!important}
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)}

/* ---- homepage hero (index): sliding before/after wall ----------------------
   fmh-hero-wall.js paints the canvas. Copy hugs the left edge, the featured
   case card sits bottom-right, arrows bottom-centre. Without motion the
   reception photo shows instead of the wall. */
.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,1080px)!important;align-items:center!important;padding:0!important;background:#000}
html body .hero7-bg{background:#000}
html:not(.fmh-motion) body .hero7-bg{background:#000 url('/wp-content/uploads/2026/06/reception-hero.jpg') center/cover}
html body .hero7-bg canvas.fmh-wall{position:absolute;inset:0;width:100%;height:100%;display:block}
html body .hero7-bg::after{background:linear-gradient(90deg,rgb(10 10 9 / .92) 0%,rgb(10 10 9 / .8) 34%,rgb(10 10 9 / .42) 62%,rgb(10 10 9 / .22) 100%),linear-gradient(0deg,var(--fmh-page) 0%,rgb(10 10 9 / 0) 22%),linear-gradient(180deg,rgb(10 10 9 / .7) 0%,rgb(10 10 9 / 0) 20%)!important}
html body .hero7 .hero-aura{opacity:.5}
html body .hero7 .hero7-inner{width:calc(100% - var(--fmh-edge) * 2)!important;max-width:none!important;margin:0 auto!important;padding:calc(var(--nav-h,64px) + 48px) 0 132px!important;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
html body .hero7 .hero7-inner>*{max-width:min(760px,56vw)}
html body .hero7 .d1{font-size:clamp(42px,5.4vw,104px)!important;font-weight:600!important;line-height:.96!important;letter-spacing:-.05em!important}
html body .hero7 .hero-sub{max-width:34em!important;font-size:clamp(16px,1.1vw,21px)!important;line-height:1.6;color:rgb(245 243 234 / .8)!important}
html body .hero7 .hero-sim{max-width:640px!important;margin-top:clamp(8px,1vw,18px)!important}
html body .hero7 .hero-sim-head{justify-content:flex-start!important;gap:12px!important;margin-bottom:8px!important}
html body .hero7 .hero-sim-q{font-size:clamp(12.5px,.95vw,15px)!important;letter-spacing:.1em!important;color:var(--fmh-ink)!important}
html body .hero7 .hero-sim-tag{font-size:11px!important;font-weight:700;letter-spacing:.1em!important;border-radius:999px!important;padding:4px 11px!important;border-color:rgb(255 237 0 / .5)!important}
html body .hero7 .hero-sim-lead{font-size:clamp(12.5px,.85vw,14px)!important;letter-spacing:0!important;text-transform:none!important;color:var(--fmh-faint)!important;margin-bottom:18px!important}
html body .hero7 .hero-sim-genders{gap:12px!important;flex-wrap:wrap}
html body .hero7 .hero-sim-genders .hgender{flex:0 0 auto!important;flex-direction:row!important;align-items:center!important;gap:14px!important;height:clamp(52px,3.4vw,64px);margin:0!important;padding:0 6px 0 clamp(22px,1.6vw,30px)!important;border:0!important;border-radius:999px!important;clip-path:none!important;color:var(--fmh-on-y);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);transition:filter .2s,box-shadow .25s}
html body .hero7 .hero-sim-genders .hgender:last-child{color:var(--fmh-ink);background:rgb(255 255 255 / .05)!important;box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .26);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html body .hero7 .hgender::before{display:none!important}
html body .hero7 .hgender-ic{display:none!important}
html body .hero7 .hgender-t,html body .hero7 .hgender:hover .hgender-t{font-size:clamp(15px,.95vw,18px)!important;font-weight:600!important;letter-spacing:-.01em!important;text-transform:none!important;color:inherit!important}
html body .hero7 .hgender-go{width:clamp(38px,2.5vw,48px);height:clamp(38px,2.5vw,48px);display:grid!important;place-items:center;border-radius:50%;font-size:0!important;color:var(--fmh-y)!important;background:var(--fmh-on-y);transition:transform .35s var(--fmh-ease)}
html body .hero7 .hgender:last-child .hgender-go{color:var(--fmh-ink)!important;background:rgb(255 255 255 / .1)}
html body .hero7 .hgender-go{line-height:0!important}
html body .hero7 .hgender-go svg{width:15px;height:15px;display:block}
html body .hero7 .hgender:hover .hgender-go{transform:rotate(-45deg)}
html body .hero7 .hgender:last-child:hover{box-shadow:inset 0 0 0 1.5px var(--fmh-y)}
html.fmh-motion body .hero7.fmh-live{cursor:none}
html body .hero7 :is(a,button,.fmh-case){cursor:pointer}
html body .hero7 .fmh-case{cursor:default}

.fmh-case{position:absolute;right:var(--fmh-edge);bottom:48px;z-index:2;width:clamp(260px,21vw,400px);padding:12px;border-radius:var(--fmh-r-lg);background:rgb(255 255 255 / .06);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .14),0 30px 60px -30px rgb(0 0 0 / .8)}
.fmh-case-pics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fmh-case figure{position:relative;margin:0;overflow:hidden;border-radius:var(--fmh-r-sm);aspect-ratio:1;background:var(--fmh-card-2)}
.fmh-case img{width:100%;height:100%;object-fit:cover;display:block}
.fmh-case figcaption{position:absolute;left:8px;bottom:8px;height:24px;padding:0 9px;display:grid;place-items:center;border-radius:999px;font-size:11px;font-weight:600;color:var(--fmh-ink);background:rgb(10 10 9 / .72)}
.fmh-case figure+figure figcaption{color:var(--fmh-on-y);background:var(--fmh-y)}
.fmh-case-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:0;padding:12px 4px 2px;font-size:13px;color:var(--fmh-muted)}
.fmh-case-meta strong{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--fmh-y)}
.fmh-case-meta span{flex-basis:100%;font-size:12px;color:var(--fmh-faint)}
.fmh-arrows{position:absolute;left:50%;bottom:48px;z-index:2;display:flex;gap:10px;transform:translateX(-50%)}
.fmh-arrows button{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;color:var(--fmh-ink);background:rgb(255 255 255 / .05);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .22);transition:background-color .2s,color .2s,box-shadow .2s}
.fmh-arrows button:hover{color:var(--fmh-on-y);background:var(--fmh-y);box-shadow:none}

.fmh-lens,.fmh-burst{position:absolute;left:0;top:0;z-index:3;pointer-events:none}
.fmh-lens-ring{position:absolute;left:-36px;top:-36px;width:72px;height:72px;border-radius:50%;border:1.5px solid var(--fmh-y);box-shadow:0 0 0 1px rgb(0 0 0 / .25),0 0 22px rgb(255 237 0 / .45),inset 0 0 14px rgb(255 237 0 / .22);opacity:0;transform:scale(.5);transition:opacity .2s cubic-bezier(.25,.46,.45,.94),transform .25s cubic-bezier(.25,.46,.45,.94),background-color .2s,box-shadow .25s}
.fmh-lens-tag{position:absolute;left:32px;top:26px;height:24px;padding:0 10px;border-radius:999px;display:grid;place-items:center;white-space:nowrap;font-size:11.5px;font-weight:600;color:var(--fmh-on-y);background:var(--fmh-y);opacity:0;transform:translateX(-6px);transition:opacity .2s cubic-bezier(.25,.46,.45,.94),transform .25s cubic-bezier(.25,.46,.45,.94)}
.fmh-lens.is-on .fmh-lens-ring{opacity:1;transform:scale(1.1)}
.fmh-lens.is-on .fmh-lens-tag{opacity:1;transform:none}
.fmh-lens.is-down .fmh-lens-ring{transform:scale(.86);background:rgb(255 237 0 / .22);box-shadow:0 0 0 1px rgb(0 0 0 / .25),0 0 34px rgb(255 237 0 / .7),inset 0 0 18px rgb(255 237 0 / .4)}
/* the site's own dot+ring cursor steps aside while the hero lens is active */
body:has(.fmh-lens.is-on) :is(#cursorDot,#cursorRing){opacity:0!important}
.fmh-burst{width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:2px solid var(--fmh-y);box-shadow:0 0 24px rgb(255 237 0 / .5)}

@media (max-width:720px){
  html body .hero7{flex-direction:column!important;align-items:stretch!important}
  html body .hero7-bg::after{background:linear-gradient(0deg,var(--fmh-page) 0%,rgb(10 10 9 / 0) 14%),rgb(10 10 9 / .78)!important}
  html body .hero7 .hero7-inner{padding:calc(var(--nav-h,64px) + 28px) 0 0!important}
  html body .hero7 .hero7-inner>*{max-width:none}
  html body .hero7 .hero-sim-genders .hgender{flex:1 1 auto!important;justify-content:space-between}
  .fmh-case{position:relative;right:auto;bottom:auto;width:calc(100% - var(--fmh-edge) * 2);max-width:420px;margin:32px var(--fmh-edge) 0}
  .fmh-arrows{position:relative;left:auto;bottom:auto;transform:none;margin:14px var(--fmh-edge) 48px}
}

/* ---- 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}}

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