/* Site modernizer layer — sits on top of the generator CSS. Theme vars come from <style id="m-theme">. */
body.m { background: var(--m-bg); color: var(--m-body-ink, #3c4350); font-family: var(--m-body); }
body.m h1, body.m h2, body.m h3, body.m h4 { font-family: var(--m-head); color: var(--m-ink); letter-spacing: -.02em; }
body.m h1 { font-weight: 800; } body.m h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; }
body.m a { color: var(--m-accent); }
body.m section { padding: 72px 0; } body.m section + section { padding-top: 8px; }
body.m .wrap { max-width: 1240px; }
body.m img { outline: 0; }

/* header */
body.m header.site { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--m-bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--m-ink) 8%, transparent); transition: box-shadow .3s; }
body.m header.site.scrolled { box-shadow: 0 10px 30px rgba(0,0,0,.08); }
body.m header.site .wrap { min-height: 78px; max-width: none; padding-left: clamp(18px, 4vw, 72px); padding-right: clamp(18px, 4vw, 72px); }
body.m header.site nav a { font: 650 15.5px/1 var(--m-body); color: var(--m-ink); padding: 11px 14px; border-radius: 999px; transition: background .2s, color .2s; }
body.m header.site nav a:hover { background: color-mix(in srgb, var(--m-accent) 12%, transparent); color: var(--m-ink); }
body.m header.site nav > a[aria-current] { background: var(--m-ink); color: #fff; }
body.m header.site nav a.m-blog { color: var(--m-accent); }
body.m header.site nav a.m-blog::before { content: "✦ "; }

/* buttons */
body.m .btn { position: relative; overflow: hidden; font: 700 15px/1 var(--m-body); padding: 15px 24px; border: 2px solid transparent; transition: transform .2s var(--m-ease), box-shadow .2s, background .2s, color .2s; isolation: isolate; }
body.m .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--m-ease); z-index: -1; }
body.m .btn:hover { transform: translateY(-3px); } body.m .btn:hover::after { transform: translateX(120%); } body.m .btn:active { transform: translateY(0) scale(.98); }
body.m .btn.accent, body.m .pcard .btn, body.m .m-btn-main { background: var(--m-accent); color: #fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--m-accent) 35%, transparent); }
body.m .btn.accent:hover, body.m .pcard .btn:hover, body.m .m-btn-main:hover { background: var(--m-accent-2); color: #fff; box-shadow: 0 16px 34px color-mix(in srgb, var(--m-accent) 45%, transparent); }
body.m .btn.ghost, body.m .btn.secondary, body.m .m-btn-ghost { background: transparent; color: var(--m-ink); border-color: var(--m-ink); }
body.m .btn.ghost:hover, body.m .m-btn-ghost:hover { background: var(--m-ink); color: #fff; }
body.m .btn .arr { display: inline-block; transition: transform .25s; margin-left: 6px; } body.m .btn:hover .arr { transform: translateX(4px); }
body.bv-pill .btn { border-radius: 999px; } body.bv-soft .btn { border-radius: 14px; } body.bv-sharp .btn { border-radius: 4px; letter-spacing: .02em; text-transform: uppercase; font-size: 13.5px; }

/* hero (home) */
.m-hero { position: relative; overflow: hidden; padding: 0 !important; min-height: calc(100vh - 78px); display: flex; align-items: center; color: #fff; }
.m-hero .m-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.06); animation: m-kenburns 22s ease-in-out infinite alternate; }
.m-hero .m-shade { position: absolute; inset: 0; background: linear-gradient(100deg, var(--m-hero-a) 0%, color-mix(in srgb, var(--m-hero-a) 80%, transparent) 42%, color-mix(in srgb, var(--m-hero-b) 30%, transparent) 100%); }
.m-hero .m-inner { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 90px); align-items: center; padding: clamp(48px, 8vh, 110px) clamp(18px, 4vw, 72px); }
.m-hero .eyebrow { color: color-mix(in srgb, #fff 80%, var(--m-accent)); font-size: 12px; letter-spacing: .16em; }
.m-hero h1 { color: #fff !important; font-size: clamp(38px, 5.6vw, 76px) !important; line-height: 1.02 !important; max-width: 14ch; margin-bottom: .35em; }
.m-hero .sub { font-size: clamp(17px, 1.4vw, 21px); color: rgba(255,255,255,.88); max-width: 56ch; }
.m-hero .m-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin: 30px 0 26px; }
.m-hero .m-btn-ghost { color: #fff !important; border-color: rgba(255,255,255,.75) !important; } .m-hero .m-btn-ghost:hover { background: #fff !important; color: var(--m-ink) !important; }
.m-hero .m-chips { display: flex; flex-wrap: wrap; gap: 10px; } .m-hero .m-chips span { font: 600 13px/1 var(--m-body); padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(6px); }
.m-hero .bgcredit { position: absolute; right: 14px; bottom: 10px; z-index: 3; color: rgba(255,255,255,.7); font-size: 11px; margin: 0; } .m-hero .bgcredit a { color: rgba(255,255,255,.85); }
.m-collage { position: relative; height: min(560px, 62vh); }
.m-collage .m-card { position: absolute; background: #fff; border-radius: 22px; box-shadow: 0 30px 60px rgba(0,0,0,.28); padding: 14px; display: block; transition: transform .4s var(--m-ease); }
.m-collage .m-card img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.m-collage .m-card span { position: absolute; left: 14px; bottom: -14px; background: var(--m-accent); color: #fff; font: 700 12px/1 var(--m-body); padding: 8px 12px; border-radius: 999px; box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.m-collage .c1 { width: 58%; height: 64%; left: 4%; top: 6%; animation: m-float 7s ease-in-out infinite; }
.m-collage .c2 { width: 44%; height: 46%; right: 0; top: 0; animation: m-float 8s ease-in-out -2s infinite; }
.m-collage .c3 { width: 46%; height: 46%; right: 8%; bottom: 0; animation: m-float 9s ease-in-out -4s infinite; }
.m-collage .m-card:hover { transform: translateY(-8px) rotate(-1deg); z-index: 3; }
/* hero variant: glass */
body.hv-glass .m-hero .m-shade { background: linear-gradient(180deg, rgba(0,0,0,.15), color-mix(in srgb, var(--m-hero-a) 70%, transparent)); }
body.hv-glass .m-hero .m-copy { background: color-mix(in srgb, var(--m-hero-a) 42%, transparent); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(16px); border-radius: 28px; padding: clamp(26px, 3vw, 46px); }
/* hero variant: mosaic (light) */
body.hv-mosaic .m-hero { color: var(--m-ink); background: var(--m-soft); }
body.hv-mosaic .m-hero .m-bg { inset: auto 0 0 auto; width: 46%; height: 100%; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
body.hv-mosaic .m-hero .m-shade { background: radial-gradient(900px 500px at 10% 10%, color-mix(in srgb, var(--m-accent) 18%, transparent), transparent 60%); }
body.hv-mosaic .m-hero h1 { color: var(--m-ink) !important; } body.hv-mosaic .m-hero .sub { color: var(--m-body-ink, #444); } body.hv-mosaic .m-hero .eyebrow { color: var(--m-accent); }
body.hv-mosaic .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: var(--m-ink) !important; } body.hv-mosaic .m-hero .m-chips span { background: #fff; border-color: color-mix(in srgb, var(--m-ink) 10%, transparent); color: var(--m-ink); }
body.hv-mosaic .m-hero .bgcredit, body.hv-mosaic .m-hero .bgcredit a { color: rgba(255,255,255,.85); }
@keyframes m-kenburns { from { transform: scale(1.06) translate(0, 0); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
@keyframes m-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 900px) { .m-hero { min-height: 0; } .m-hero .m-inner { grid-template-columns: 1fr; } .m-collage { height: 360px; } body.hv-mosaic .m-hero .m-bg { width: 100%; height: 40%; top: auto; clip-path: none; opacity: .25; } }

/* page hero (category, about, blog) */
.m-page-hero { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--m-hero-a), var(--m-hero-b)); color: #fff; padding: 0 !important; }
.m-page-hero .m-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .22; mix-blend-mode: luminosity; }
.m-page-hero .m-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; padding: clamp(40px, 7vh, 90px) clamp(18px, 4vw, 72px); }
.m-page-hero h1 { color: #fff !important; font-size: clamp(34px, 4.6vw, 62px) !important; max-width: 18ch; }
.m-page-hero p { color: rgba(255,255,255,.88); max-width: 62ch; font-size: 17.5px; } .m-page-hero .eyebrow { color: rgba(255,255,255,.75); }
.m-page-hero .m-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; } .m-page-hero .m-btn-ghost { color: #fff !important; border-color: rgba(255,255,255,.7) !important; } .m-page-hero .m-btn-ghost:hover { background: #fff !important; color: var(--m-ink) !important; }
.m-page-hero .m-collage { height: 340px; }
@media (max-width: 900px) { .m-page-hero .m-inner { grid-template-columns: 1fr; } .m-page-hero .m-collage { height: 280px; } }

/* product cards */
body.m .pcard { background: #fff; border: 1px solid color-mix(in srgb, var(--m-ink) 7%, transparent); border-radius: var(--m-radius); box-shadow: 0 8px 26px rgba(20,24,40,.06); transition: transform .3s var(--m-ease), box-shadow .3s; }
body.m .pcard:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(20,24,40,.13); }
body.m .pcard .shot { background: #fff; border-radius: calc(var(--m-radius) - 6px); }
body.m .pcard h3 { font-family: var(--m-head); }

/* CTA band */
.m-cta { padding: 40px 0 72px !important; }
.m-cta .m-band { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: calc(var(--m-radius) + 10px); color: #fff; background: linear-gradient(120deg, var(--m-accent), var(--m-hero-b)); box-shadow: 0 30px 70px color-mix(in srgb, var(--m-accent) 30%, transparent); }
.m-cta .m-band::before { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%; background: rgba(255,255,255,.12); }
.m-cta h2 { color: #fff !important; margin: 0 0 8px; } .m-cta p { color: rgba(255,255,255,.88); margin: 0; max-width: 60ch; }
.m-cta .m-ctas { display: flex; gap: 12px; flex-wrap: wrap; position: relative; }
.m-cta .btn.m-white { background: #fff; color: var(--m-ink); } .m-cta .btn.m-white:hover { color: var(--m-accent); }
.m-cta .m-btn-ghost { color: #fff !important; border-color: rgba(255,255,255,.7) !important; } .m-cta .m-btn-ghost:hover { background: #fff !important; color: var(--m-ink) !important; }
@media (max-width: 760px) { .m-cta .m-band { grid-template-columns: 1fr; } }

/* blog */
.m-cards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.m-acard { display: flex; flex-direction: column; background: #fff; border-radius: var(--m-radius); overflow: hidden; text-decoration: none; color: var(--m-ink); box-shadow: 0 8px 26px rgba(20,24,40,.06); border: 1px solid color-mix(in srgb, var(--m-ink) 6%, transparent); transition: transform .3s var(--m-ease), box-shadow .3s; }
.m-acard:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(20,24,40,.14); color: var(--m-ink); }
.m-acard .m-art { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--m-soft), #fff); display: grid; place-items: center; padding: 18px; }
.m-acard .m-art img { max-height: 100%; width: auto; object-fit: contain; border-radius: 10px; transition: transform .4s; } .m-acard:hover .m-art img { transform: scale(1.05); }
.m-acard .m-txt { padding: 20px 22px 24px; } .m-acard .m-kind { font: 800 11px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: var(--m-accent); }
.m-acard h3 { margin: 10px 0 8px; font-size: 19px; } .m-acard p { color: #5b6270; font-size: 14.5px; margin: 0; }
.m-article { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; padding: 48px clamp(18px, 4vw, 72px) 64px !important; max-width: 1340px; margin: 0 auto; }
.m-article > * { min-width: 0; }
.m-prose { font-size: 17px; line-height: 1.75; overflow-wrap: break-word; } .m-prose h2 { margin-top: 1.8em; scroll-margin-top: 110px; } .m-prose h3 { margin-top: 1.3em; }
.m-prose ul, .m-prose ol { padding-left: 1.3em; } .m-prose li { margin-bottom: .4em; }
.m-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: rgba(255,255,255,.8); margin-top: 14px; }
.m-disc { font-size: 13px; color: rgba(255,255,255,.75); margin-top: 8px; }
.m-tldr { background: #fff; border-radius: var(--m-radius); padding: 20px 24px; border-left: 5px solid var(--m-accent); box-shadow: 0 8px 26px rgba(20,24,40,.06); margin-bottom: 26px; }
.m-tldr b { font: 800 12px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: var(--m-accent); }
.m-callout { background: color-mix(in srgb, var(--m-accent) 9%, #fff); border-radius: 14px; padding: 16px 20px; margin: 1.3em 0; } .m-callout b { display: block; color: var(--m-ink); }
.m-qp { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 0 0 26px; }
.m-qp a { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; background: #fff; border-radius: 14px; padding: 10px; text-decoration: none; color: var(--m-ink); border: 1.5px solid color-mix(in srgb, var(--m-ink) 7%, transparent); transition: border-color .2s, transform .2s; }
.m-qp a:hover { border-color: var(--m-accent); transform: translateY(-2px); } .m-qp img { width: 64px; height: 64px; object-fit: contain; } .m-qp small { display: block; font: 800 10.5px/1.2 var(--m-body); letter-spacing: .1em; text-transform: uppercase; color: var(--m-accent); } .m-qp b { font-size: 14px; line-height: 1.3; display: block; }
.m-rank { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; background: #fff; border-radius: var(--m-radius); padding: 24px; margin: 24px 0; box-shadow: 0 8px 26px rgba(20,24,40,.06); border: 1px solid color-mix(in srgb, var(--m-ink) 6%, transparent); scroll-margin-top: 110px; }
.m-rank > * { min-width: 0; } .m-rank .m-num { position: absolute; top: -14px; left: -14px; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--m-accent); color: #fff; font: 800 18px/1 var(--m-head); box-shadow: 0 0 0 4px var(--m-bg); }
.m-rank .m-shot { display: block; background: #fff; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--m-ink) 7%, transparent); padding: 10px; align-self: start; } .m-rank .m-shot img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.m-award { display: inline-block; font: 800 11px/1 var(--m-body); letter-spacing: .1em; text-transform: uppercase; color: var(--m-accent); background: color-mix(in srgb, var(--m-accent) 10%, #fff); padding: 7px 10px; border-radius: 8px; }
.m-rank h3 { margin: 10px 0 6px; font-size: 21px; } .m-rank h3 a { color: var(--m-ink); text-decoration: none; }
.m-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; font-size: 15px; } .m-pc > div { border-radius: 12px; padding: 12px 14px; } .m-pc .p { background: #ecf8f0; } .m-pc .c { background: #fdeeea; }
.m-pc b { font: 800 11px/1 var(--m-body); letter-spacing: .1em; text-transform: uppercase; } .m-pc .p b { color: #15803d; } .m-pc .c b { color: #c2410c; } .m-pc ul { margin: 8px 0 0; padding-left: 18px; }
.m-who { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 14.5px; margin-bottom: 12px; } .m-who div { border: 1px dashed color-mix(in srgb, var(--m-ink) 18%, transparent); border-radius: 10px; padding: 10px 12px; } .m-who b { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #6b7280; }
.m-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.m-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; margin: 1.4em 0; } .m-vs > * { min-width: 0; }
.m-vs .side { background: #fff; border-radius: var(--m-radius); padding: 20px; text-align: center; box-shadow: 0 8px 26px rgba(20,24,40,.06); } .m-vs .side img { max-height: 220px; margin: 0 auto 12px; object-fit: contain; }
.m-vs .mid { align-self: center; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--m-accent); color: #fff; font: 800 18px/1 var(--m-head); }
.m-vs .choose { text-align: left; font-size: 14.5px; background: var(--m-soft); border-radius: 10px; padding: 10px 12px; margin: 10px 0 12px; }
.m-verdict { background: var(--m-ink); color: rgba(255,255,255,.9); border-radius: var(--m-radius); padding: 24px 26px; margin: 1.6em 0; } .m-verdict b { display: block; font: 800 12px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--m-accent) 60%, #fff); margin-bottom: 8px; } .m-verdict a { color: #fff; }
.m-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 1.2em 0; }
.m-tablewrap { overflow-x: auto; border-radius: 14px; box-shadow: 0 8px 26px rgba(20,24,40,.06); background: #fff; margin: 1.3em 0; }
.m-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; } .m-table th, .m-table td { padding: 12px 14px; border-bottom: 1px solid color-mix(in srgb, var(--m-ink) 8%, transparent); text-align: left; vertical-align: top; }
.m-table thead th { background: var(--m-ink); color: #fff; font: 700 13px/1.3 var(--m-body); } .m-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--m-soft) 60%, #fff); }
.m-table .yes { color: #15803d; font-weight: 800; } .m-table .no { color: #c2410c; font-weight: 800; }
.m-aside { display: flex; flex-direction: column; gap: 16px; } .m-aside .box { background: #fff; border-radius: var(--m-radius); padding: 18px; box-shadow: 0 8px 26px rgba(20,24,40,.06); } .m-aside .box.sticky { position: sticky; top: 100px; }
.m-aside h3 { font-size: 16px; margin-bottom: 10px; } .m-aside ul { list-style: none; margin: 0; padding: 0; } .m-aside li { border-bottom: 1px solid color-mix(in srgb, var(--m-ink) 7%, transparent); } .m-aside li:last-child { border: 0; } .m-aside li a { display: block; padding: 8px 0; text-decoration: none; color: #4b5260; font-size: 14.5px; } .m-aside li a:hover { color: var(--m-accent); }
.m-faq details { background: #fff; border-radius: 14px; padding: 4px 18px; margin-bottom: 10px; box-shadow: 0 4px 14px rgba(20,24,40,.05); } .m-faq summary { font: 700 16.5px/1.4 var(--m-head); color: var(--m-ink); cursor: pointer; padding: 12px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; } .m-faq summary::after { content: "+"; color: var(--m-accent); font-size: 22px; line-height: 1; transition: transform .2s; } .m-faq details[open] summary::after { transform: rotate(45deg); } .m-faq summary::-webkit-details-marker { display: none; }
/* charts (charts.mjs) */
.chart { background: #fff; border-radius: var(--m-radius); padding: 22px; margin: 1.3em 0; box-shadow: 0 8px 26px rgba(20,24,40,.06); } .chart h4 { margin: 0 0 4px; } .chart .sub { font-size: 14px; color: #6b7280; margin: 0 0 12px; } .chart svg { width: 100%; height: auto; overflow: visible; } .chart .legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; font: 600 13px var(--m-body); } .chart .legend span { display: inline-flex; gap: 6px; align-items: center; } .chart .legend i { width: 11px; height: 11px; border-radius: 4px; } .chart .src { font-size: 12px; color: #6b7280; }
.bar-anim rect.bar { transform-box: fill-box; transform-origin: left; transform: scaleX(0); transition: transform 1s var(--m-ease); } .bar-anim.in rect.bar { transform: scaleX(1); }
.vbar-anim rect.bar { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform 1s var(--m-ease); } .vbar-anim.in rect.bar { transform: scaleY(1); }
.donut-anim .seg { transition: stroke-dasharray 1.2s var(--m-ease); }
@media (max-width: 980px) { .m-article { grid-template-columns: 1fr; } .m-aside .box.sticky { position: static; } }
@media (max-width: 720px) { .m-rank { grid-template-columns: 1fr; } .m-rank .m-shot { max-width: 240px; } .m-pc, .m-who { grid-template-columns: 1fr; } .m-vs { grid-template-columns: 1fr; } .m-vs .mid { justify-self: center; } }
/* reveal */
.m-js .m-rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--m-ease), transform .7s var(--m-ease); } .m-js .m-rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .m-js .m-rv { opacity: 1; transform: none; } }
body.m header.site .langs a { border-radius: 999px; } body.m header.site .langs a[aria-current] { background: var(--m-ink) !important; color: #fff !important; }
body.m .m-hero .eyebrow, body.m .m-page-hero .eyebrow { font-family: var(--m-body); font-weight: 700; }

/* buttons variant: spray (cursor-follow mist, fill sweep, arrow chip, pulse) */
body.bv-spray .btn { border-radius: 12px; padding: 15px 22px; letter-spacing: .01em; }
body.bv-spray .btn::after { display: none; }
body.bv-spray .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.38), transparent 62%); opacity: 0; transition: opacity .3s; }
body.bv-spray .btn:hover::before { opacity: 1; }
body.bv-spray .btn.accent, body.bv-spray .pcard .btn, body.bv-spray .m-btn-main { background: linear-gradient(135deg, var(--m-accent), var(--m-accent-2)); }
body.bv-spray .btn .arr { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -6px -6px -6px 10px; border-radius: 50%; background: rgba(255,255,255,.2); font-size: 13px; transition: transform .3s var(--m-ease), background .3s; }
body.bv-spray .btn:hover .arr { transform: translateX(3px) rotate(-45deg); background: rgba(255,255,255,.34); }
body.bv-spray .m-btn-ghost, body.bv-spray .btn.ghost, body.bv-spray .btn.secondary { background: linear-gradient(var(--m-ink), var(--m-ink)) no-repeat left / 0% 100%; transition: background-size .45s var(--m-ease), color .3s, transform .2s var(--m-ease); }
body.bv-spray .m-btn-ghost:hover, body.bv-spray .btn.ghost:hover { background-size: 100% 100%; color: #fff; }
body.bv-spray .m-hero .m-btn-ghost { background-image: linear-gradient(#fff, #fff); } body.bv-spray .m-hero .m-btn-ghost:hover { color: var(--m-ink) !important; background-color: transparent !important; }
body.bv-spray .m-hero .m-btn-main { animation: m-pulse 3.2s ease-out infinite; }
@keyframes m-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--m-accent) 55%, transparent), 0 12px 28px color-mix(in srgb, var(--m-accent) 35%, transparent); } 70%, 100% { box-shadow: 0 0 0 16px transparent, 0 12px 28px color-mix(in srgb, var(--m-accent) 35%, transparent); } }

/* hero variant: studio (sprayed photo reveal, mist, quick category rail) */
body.hv-studio .m-hero { background: var(--m-hero-a); flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); }
body.hv-studio .m-hero .m-photo { position: absolute; inset: 0 0 0 30%; margin: 0; -webkit-mask-image: radial-gradient(120% 95% at 72% 42%, #000 38%, transparent 78%); mask-image: radial-gradient(120% 95% at 72% 42%, #000 38%, transparent 78%); animation: m-spray-in 1.6s var(--m-ease) both; }
body.hv-studio .m-hero .m-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; filter: saturate(.9) contrast(1.05); animation: m-kenburns 24s ease-in-out infinite alternate; }
body.hv-studio .m-hero .m-mist { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px 380px at 18% 78%, color-mix(in srgb, var(--m-accent) 34%, transparent), transparent 70%), radial-gradient(420px 300px at 62% 12%, color-mix(in srgb, var(--m-hero-b) 70%, transparent), transparent 70%); filter: blur(10px); animation: m-drift 14s ease-in-out infinite alternate; }
body.hv-studio .m-hero .m-mist::after { content: ""; position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1.4px); background-size: 7px 7px; -webkit-mask-image: radial-gradient(40% 50% at 20% 70%, #000, transparent); mask-image: radial-gradient(40% 50% at 20% 70%, #000, transparent); }
body.hv-studio .m-hero .m-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); padding-bottom: 28px; }
body.hv-studio .m-hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; }
body.hv-studio .m-hero .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--m-accent); box-shadow: 0 0 0 0 var(--m-accent); animation: m-dot 2s ease-out infinite; }
body.hv-studio .m-hero h1 { max-width: 15ch; text-wrap: balance; background: linear-gradient(100deg, #fff 55%, color-mix(in srgb, #fff 55%, var(--m-accent))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body.hv-studio .m-hero .m-copy > * { animation: m-rise .9s var(--m-ease) both; } body.hv-studio .m-hero .m-copy > :nth-child(2) { animation-delay: .08s; } body.hv-studio .m-hero .m-copy > :nth-child(3) { animation-delay: .16s; } body.hv-studio .m-hero .m-copy > :nth-child(4) { animation-delay: .24s; }
body.hv-studio .m-collage .m-card { border-radius: 18px; background: rgba(255,255,255,.96); }
body.hv-studio .m-collage .c1 { transform: rotate(-3deg); } body.hv-studio .m-collage .c3 { transform: rotate(2.5deg); }
.m-quick { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 12px; padding: 0 clamp(18px, 4vw, 72px) clamp(26px, 4vh, 44px); }
.m-quick a { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); color: #fff !important; text-decoration: none; transition: transform .3s var(--m-ease), background .3s, border-color .3s; animation: m-rise .9s var(--m-ease) both; }
.m-quick a:nth-child(2) { animation-delay: .06s; } .m-quick a:nth-child(3) { animation-delay: .12s; } .m-quick a:nth-child(4) { animation-delay: .18s; } .m-quick a:nth-child(5) { animation-delay: .24s; }
.m-quick a:hover { transform: translateY(-4px); background: rgba(255,255,255,.14); border-color: color-mix(in srgb, var(--m-accent) 70%, #fff); }
.m-quick img { width: 52px; height: 52px; flex: none; object-fit: contain; border-radius: 10px; background: #fff; padding: 4px; }
.m-quick b { display: block; font: 700 14.5px/1.2 var(--m-head); } .m-quick small { display: block; font-size: 12px; opacity: .72; margin-top: 3px; }
.m-quick i { margin-left: auto; font-style: normal; opacity: .6; transition: transform .3s, opacity .3s; } .m-quick a:hover i { transform: translateX(4px); opacity: 1; }
@keyframes m-spray-in { from { -webkit-mask-size: 30% 30%; mask-size: 30% 30%; opacity: 0; } to { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; opacity: 1; } }
@keyframes m-drift { from { transform: translate(0, 0); } to { transform: translate(3%, -4%); } }
@keyframes m-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes m-dot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--m-accent) 70%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@media (max-width: 1100px) { .m-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { body.hv-studio .m-hero .m-photo { inset: 0; opacity: .45; } body.hv-studio .m-hero .m-collage { display: none; } .m-quick { grid-template-columns: 1fr 1fr; } .m-quick img { width: 42px; height: 42px; } }
@media (max-width: 480px) { .m-quick { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { body.hv-studio .m-hero *, .m-quick a, body.bv-spray .m-hero .m-btn-main { animation: none !important; } }
@media (max-width: 900px) { body.hv-studio .m-hero .m-inner { grid-template-columns: 1fr; } body.hv-studio .m-hero .m-photo { opacity: .38; } body.hv-studio .m-hero h1 { font-size: clamp(36px, 10vw, 52px) !important; } }
/* header: keep long category menus on one line */
@media (min-width: 1025px) { body.m header.site nav { flex-wrap: nowrap; gap: 2px; } body.m header.site nav a { white-space: nowrap; padding: 10px 11px; font-size: 14.5px; } }
@media (max-width: 900px) { body.hv-studio .m-hero .m-photo { opacity: .55; } body.hv-studio .m-hero .m-photo img { filter: brightness(.42) saturate(.8); } }

/* buttons variant: silk (ink pill, accent bloom from cursor, link-style ghost) */
body.bv-silk .btn { border-radius: 999px; padding: 16px 26px; font-weight: 650; letter-spacing: .01em; }
body.bv-silk .btn::after { display: none; }
body.bv-silk .btn.accent, body.bv-silk .pcard .btn, body.bv-silk .m-btn-main { background: var(--m-ink); color: #fff; box-shadow: 0 14px 30px color-mix(in srgb, var(--m-ink) 22%, transparent); }
body.bv-silk .btn.accent::before, body.bv-silk .pcard .btn::before, body.bv-silk .m-btn-main::before, body.bv-silk .m-white::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--m-accent); clip-path: circle(0% at var(--mx, 50%) var(--my, 50%)); transition: clip-path .55s var(--m-ease); }
body.bv-silk .btn.accent:hover::before, body.bv-silk .pcard .btn:hover::before, body.bv-silk .m-btn-main:hover::before, body.bv-silk .m-white:hover::before { clip-path: circle(150% at var(--mx, 50%) var(--my, 50%)); }
body.bv-silk .btn.accent:hover, body.bv-silk .pcard .btn:hover, body.bv-silk .m-btn-main:hover { background: var(--m-ink); }
body.bv-silk .btn .arr { display: inline-grid; place-items: center; width: 26px; height: 26px; margin: -7px -10px -7px 12px; border-radius: 50%; background: #fff; color: var(--m-ink); font-size: 13px; transition: transform .4s var(--m-ease); }
body.bv-silk .btn:hover .arr { transform: rotate(-45deg) scale(1.08); }
body.bv-silk .m-btn-ghost, body.bv-silk .btn.ghost { border: 0 !important; border-radius: 0; padding: 16px 4px; background: linear-gradient(currentColor, currentColor) no-repeat left calc(100% - 10px) / 100% 1.5px !important; transition: background-size .45s var(--m-ease), color .3s; }
body.bv-silk .m-btn-ghost:hover, body.bv-silk .btn.ghost:hover { background-size: 35% 1.5px !important; transform: none; color: var(--m-accent) !important; }
body.bv-silk .m-hero .m-btn-ghost { color: var(--m-ink) !important; }

/* hero variant: arch (light editorial, arched photo, rotating badge, ingredient ticker) */
body.hv-arch .m-hero { color: var(--m-ink); background: radial-gradient(900px 600px at 85% 20%, color-mix(in srgb, var(--m-accent) 16%, transparent), transparent 65%), radial-gradient(700px 500px at 0% 100%, var(--m-soft), transparent 70%), var(--m-bg); flex-direction: column; align-items: stretch; min-height: calc(100svh - 78px); }
body.hv-arch .m-hero .m-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); padding-bottom: 26px; }
body.hv-arch .m-hero .eyebrow { color: var(--m-accent); letter-spacing: .22em; }
body.hv-arch .m-hero h1 { color: var(--m-ink) !important; font-weight: 600; letter-spacing: -.03em; max-width: 13ch; }
body.hv-arch .m-hero h1 em, body.hv-arch .m-hero h1 .m-it { font-style: italic; color: var(--m-accent); }
body.hv-arch .m-hero .sub { color: var(--m-body-ink); }
body.hv-arch .m-hero .m-copy > * { animation: m-rise .9s var(--m-ease) both; } body.hv-arch .m-hero .m-copy > :nth-child(2) { animation-delay: .08s; } body.hv-arch .m-hero .m-copy > :nth-child(3) { animation-delay: .16s; } body.hv-arch .m-hero .m-copy > :nth-child(4) { animation-delay: .24s; }
.m-archwrap { position: relative; justify-self: center; width: min(440px, 100%); aspect-ratio: 4 / 5; }
.m-archwrap .m-arch-photo { position: absolute; inset: 0; margin: 0; border-radius: 999px 999px 28px 28px; overflow: hidden; box-shadow: 0 40px 80px color-mix(in srgb, var(--m-ink) 22%, transparent); animation: m-arch-in 1.3s var(--m-ease) both; }
.m-archwrap .m-arch-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; animation: m-kenburns 26s ease-in-out infinite alternate; }
.m-archwrap::before { content: ""; position: absolute; inset: -14px; border: 1.5px solid color-mix(in srgb, var(--m-accent) 45%, transparent); border-radius: 999px 999px 36px 36px; }
.m-archwrap .m-badge { position: absolute; left: -46px; top: 18%; width: 120px; height: 120px; border-radius: 50%; background: var(--m-ink); color: #fff; display: grid; place-items: center; box-shadow: 0 18px 40px color-mix(in srgb, var(--m-ink) 30%, transparent); }
.m-archwrap .m-badge svg { position: absolute; inset: 0; animation: m-spin 18s linear infinite; } .m-archwrap .m-badge b { font: 600 28px/1 var(--m-head); color: var(--m-accent); }
.m-archwrap .m-float { position: absolute; width: 132px; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 22px 46px color-mix(in srgb, var(--m-ink) 18%, transparent); display: block; transition: transform .4s var(--m-ease); }
.m-archwrap .m-float img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; } .m-archwrap .m-float span { display: block; font: 600 11.5px/1.25 var(--m-body); color: var(--m-ink); margin-top: 6px; }
.m-archwrap .f1 { right: -40px; bottom: 9%; animation: m-float 7s ease-in-out infinite; } .m-archwrap .f2 { left: -26px; bottom: -18px; animation: m-float 8s ease-in-out -3s infinite; }
.m-archwrap .m-float:hover { transform: translateY(-6px) rotate(-2deg); }
.m-ticker { position: relative; z-index: 2; overflow: hidden; border-block: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); background: color-mix(in srgb, #fff 55%, transparent); margin-bottom: 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.m-ticker div { display: flex; gap: 42px; width: max-content; padding: 13px 0; animation: m-marquee 32s linear infinite; font: 600 13px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: var(--m-ink); }
.m-ticker span::before { content: "✦"; color: var(--m-accent); margin-right: 42px; }
body.hv-arch .m-quick a { background: #fff; border-color: color-mix(in srgb, var(--m-ink) 9%, transparent); color: var(--m-ink) !important; backdrop-filter: none; box-shadow: 0 10px 26px color-mix(in srgb, var(--m-ink) 7%, transparent); }
body.hv-arch .m-quick a:hover { background: #fff; border-color: var(--m-accent); }
body.hv-arch .m-quick img { background: var(--m-soft); }
body.hv-arch .m-hero .bgcredit, body.hv-arch .m-hero .bgcredit a { color: color-mix(in srgb, var(--m-ink) 55%, transparent); }
@keyframes m-arch-in { from { clip-path: inset(100% 0 0 0 round 999px 999px 28px 28px); } to { clip-path: inset(0 0 0 0 round 999px 999px 28px 28px); } }
@keyframes m-spin { to { transform: rotate(360deg); } }
@keyframes m-marquee { to { transform: translateX(-50%); } }
@media (max-width: 900px) { body.hv-arch .m-hero .m-inner { grid-template-columns: 1fr; } .m-archwrap { width: min(320px, 78%); margin-top: 10px; } .m-archwrap .m-badge { left: -24px; width: 92px; height: 92px; } .m-archwrap .f1 { right: -22px; width: 104px; } .m-archwrap .f2 { left: -18px; width: 104px; } }
@media (prefers-reduced-motion: reduce) { body.hv-arch .m-hero *, .m-ticker div { animation: none !important; } }
.m-archwrap .m-badge b { font-size: 44px; font-weight: 400; } .m-archwrap .m-float, .m-archwrap .m-float span { text-decoration: none; }
body.bv-silk .m-btn-ghost, body.bv-silk .btn.ghost { box-shadow: none !important; }

/* buttons variant: tile (3D pressable tile, arrow swap) */
body.bv-tile .btn { border-radius: 10px; padding: 15px 24px 14px; }
body.bv-tile .btn::after { display: none; }
body.bv-tile .btn.accent, body.bv-tile .pcard .btn, body.bv-tile .m-btn-main { box-shadow: 0 4px 0 var(--m-accent-2), 0 12px 24px color-mix(in srgb, var(--m-accent) 28%, transparent); }
body.bv-tile .btn.accent:hover, body.bv-tile .pcard .btn:hover, body.bv-tile .m-btn-main:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--m-accent-2), 0 18px 30px color-mix(in srgb, var(--m-accent) 32%, transparent); }
body.bv-tile .btn.accent:active, body.bv-tile .pcard .btn:active, body.bv-tile .m-btn-main:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--m-accent-2), 0 4px 10px color-mix(in srgb, var(--m-accent) 25%, transparent); }
body.bv-tile .btn .arr { position: relative; display: inline-block; width: 1em; overflow: hidden; vertical-align: -1px; margin-left: 8px; color: transparent; }
body.bv-tile .btn .arr::before, body.bv-tile .btn .arr::after { content: "→"; position: absolute; left: 0; top: 0; color: currentColor; transition: transform .35s var(--m-ease); }
body.bv-tile .btn .arr::before { color: inherit; } body.bv-tile .btn .arr::after { transform: translateX(-130%); }
body.bv-tile .btn .arr { color: inherit; } body.bv-tile .btn .arr { -webkit-text-fill-color: transparent; }
body.bv-tile .btn .arr::before, body.bv-tile .btn .arr::after { -webkit-text-fill-color: currentColor; }
body.bv-tile .btn:hover .arr { transform: none; } body.bv-tile .btn:hover .arr::before { transform: translateX(130%); } body.bv-tile .btn:hover .arr::after { transform: translateX(0); }
body.bv-tile .m-btn-ghost, body.bv-tile .btn.ghost { border: 1.5px solid color-mix(in srgb, var(--m-ink) 30%, transparent) !important; background: #fff; color: var(--m-ink) !important; box-shadow: 0 4px 0 color-mix(in srgb, var(--m-ink) 14%, transparent); }
body.bv-tile .m-btn-ghost:hover, body.bv-tile .btn.ghost:hover { background: var(--m-soft) !important; color: var(--m-ink) !important; border-color: var(--m-accent) !important; transform: translateY(-3px); box-shadow: 0 7px 0 color-mix(in srgb, var(--m-accent) 35%, transparent); }

/* hero variant: frame (inset rounded photo, overlapping spec card, dimension lines, width chips) */
body.hv-frame .m-hero { background: var(--m-bg); color: var(--m-ink); flex-direction: column; align-items: stretch; min-height: 0; padding: 14px clamp(10px, 1.6vw, 22px) 0 !important; }
.m-frame { position: relative; border-radius: 28px; overflow: hidden; min-height: min(78svh, 760px); display: flex; align-items: flex-end; }
.m-frame .m-fphoto { position: absolute; inset: 0; margin: 0; } .m-frame .m-fphoto img { width: 100%; height: 100%; object-fit: cover; animation: m-kenburns 26s ease-in-out infinite alternate; }
.m-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--m-ink) 35%, transparent)); pointer-events: none; }
.m-frame .m-inner { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: clamp(18px, 3vw, 40px); grid-template-columns: none; }
.m-frame .m-copy { background: color-mix(in srgb, #fff 94%, transparent); backdrop-filter: blur(10px); border-radius: 22px; padding: clamp(24px, 3vw, 42px); max-width: 640px; box-shadow: 0 30px 60px color-mix(in srgb, var(--m-ink) 22%, transparent); animation: m-rise 1s var(--m-ease) both; }
body.hv-frame .m-hero .eyebrow { color: var(--m-accent); letter-spacing: .2em; }
body.hv-frame .m-hero h1 { color: var(--m-ink) !important; font-size: clamp(34px, 4.4vw, 60px) !important; max-width: 16ch; }
body.hv-frame .m-hero .sub { color: var(--m-body-ink); font-size: 17px; } body.hv-frame .m-hero .m-ctas { margin: 22px 0 18px; }
.m-widths { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 12.5px/1 var(--m-body); color: var(--m-body-ink); }
.m-widths a { display: inline-grid; place-items: center; min-width: 52px; padding: 10px 12px; border-radius: 10px; border: 1.5px dashed color-mix(in srgb, var(--m-ink) 25%, transparent); color: var(--m-ink) !important; text-decoration: none; font-weight: 700; transition: border-color .25s, background .25s, transform .25s var(--m-ease); }
.m-widths a:hover { border-style: solid; border-color: var(--m-accent); background: var(--m-soft); transform: translateY(-2px); }
.m-spec { position: relative; width: 250px; flex: none; background: #fff; border-radius: 20px; padding: 18px 18px 14px; box-shadow: 0 26px 50px color-mix(in srgb, var(--m-ink) 25%, transparent); text-decoration: none; color: var(--m-ink) !important; animation: m-rise 1s .2s var(--m-ease) both; transition: transform .35s var(--m-ease); }
.m-spec:hover { transform: translateY(-6px); }
.m-spec img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.m-spec .m-dim { position: relative; height: 18px; margin: 8px 6px 4px; border-left: 1.5px solid var(--m-accent); border-right: 1.5px solid var(--m-accent); }
.m-spec .m-dim::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed var(--m-accent); }
.m-spec .m-dim b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; padding: 0 8px; font: 700 12.5px/1 var(--m-body); color: var(--m-accent); }
.m-spec small { display: block; font: 600 12.5px/1.3 var(--m-body); text-align: center; color: var(--m-body-ink); }
body.hv-frame .m-quick { padding-top: 18px; }
body.hv-frame .m-quick a { background: #fff; border-color: color-mix(in srgb, var(--m-ink) 10%, transparent); color: var(--m-ink) !important; backdrop-filter: none; box-shadow: 0 8px 22px color-mix(in srgb, var(--m-ink) 7%, transparent); }
body.hv-frame .m-quick a:hover { border-color: var(--m-accent); background: #fff; }
body.hv-frame .m-quick img { background: var(--m-soft); }
body.hv-frame .m-hero .bgcredit { position: absolute; right: 26px; top: 22px; bottom: auto; color: rgba(255,255,255,.85); } body.hv-frame .m-hero .bgcredit a { color: #fff; }
@media (max-width: 900px) { .m-frame { min-height: 0; flex-direction: column; } .m-frame .m-fphoto { position: relative; height: 260px; } .m-frame::after { display: none; } .m-frame .m-inner { flex-direction: column; align-items: stretch; margin-top: -60px; padding: 0 12px 12px; } .m-spec { display: none; } .m-frame .m-copy { padding: 22px 18px; } }
@media (prefers-reduced-motion: reduce) { .m-frame *, .m-spec { animation: none !important; } }
.m-spec .m-dim { display: block; } .m-frame .m-fphoto img { object-position: 50% 78%; }
body.hv-frame .m-hero .bgcredit { text-shadow: 0 1px 6px rgba(0,0,0,.65); }

/* buttons variant: wave (liquid fill rises with a moving wave edge) */
body.bv-wave .btn { border-radius: 999px; padding: 15px 26px; }
body.bv-wave .btn::after { display: none; }
body.bv-wave .btn::before { content: ""; position: absolute; left: -10%; width: 220%; height: 160%; top: 100%; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q25 0 50 10 T100 10 T150 10 T200 10 V20 H0Z' fill='white' fill-opacity='.28'/%3E%3C/svg%3E") repeat-x 0 0 / 50% 14px, linear-gradient(transparent 13px, rgba(255,255,255,.28) 13px); transition: top .6s var(--m-ease); animation: m-wavex 2.4s linear infinite; }
body.bv-wave .btn:hover::before { top: -20%; }
body.bv-wave .m-btn-ghost::before, body.bv-wave .btn.ghost::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q25 0 50 10 T100 10 T150 10 T200 10 V20 H0Z' fill='%2300a6c8'/%3E%3C/svg%3E") repeat-x 0 0 / 50% 14px, linear-gradient(transparent 13px, #00a6c8 13px); }
body.bv-wave .m-btn-ghost:hover, body.bv-wave .btn.ghost:hover { background: transparent; color: #fff !important; border-color: #00a6c8 !important; }
body.bv-wave .btn .arr { transition: transform .3s; } body.bv-wave .btn:hover .arr { transform: translateX(5px); }
@keyframes m-wavex { to { background-position: 100% 0, 0 0; } }

/* hero variant: duo (two expanding season panels) */
body.hv-duo .m-hero { flex-direction: column; align-items: stretch; background: var(--m-hero-a); min-height: 0; padding-bottom: 6px !important; }
.m-duo-head { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(20px, 4vw, 70px); align-items: end; padding: clamp(36px, 6vh, 70px) clamp(18px, 4vw, 72px) 30px; }
body.hv-duo .m-hero h1 { font-size: clamp(36px, 5vw, 68px) !important; max-width: 16ch; margin: 0; }
body.hv-duo .m-hero .eyebrow { color: #7fe3f5; } body.hv-duo .m-hero .m-ctas { margin: 22px 0 0; }
.m-duo { display: flex; gap: 12px; height: clamp(360px, 58vh, 620px); padding: 0 clamp(10px, 1.6vw, 22px); }
.m-panel { position: relative; flex: 1 1 0; overflow: hidden; border-radius: 26px; color: #fff !important; text-decoration: none; transition: flex-grow .7s var(--m-ease); isolation: isolate; }
.m-duo:hover .m-panel { flex-grow: .75; } .m-duo .m-panel:hover { flex-grow: 1.6; }
.m-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--m-ease); } .m-panel:hover img { transform: scale(1.06); }
.m-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(5,20,40,.82)); }
.m-panel.p1::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; z-index: -1; opacity: .55; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 15 Q25 0 50 15 T100 15 T150 15 T200 15 V30 H0Z' fill='%2300a6c8'/%3E%3C/svg%3E") repeat-x 0 100% / 400px 70px; animation: m-wavepan 6s linear infinite; }
.m-panel.p2::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(2.5px 2.5px at 90px 80px, #fff, transparent), radial-gradient(1.5px 1.5px at 150px 20px, #fff, transparent), radial-gradient(2px 2px at 60px 140px, #fff, transparent), radial-gradient(1.5px 1.5px at 130px 160px, #fff, transparent); background-size: 180px 180px; opacity: .8; animation: m-snow 9s linear infinite; }
.m-pcopy { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 2.6vw, 36px); display: grid; gap: 8px; }
.m-pcopy small { font: 700 12px/1 var(--m-body); letter-spacing: .18em; text-transform: uppercase; color: #7fe3f5; }
.m-pcopy b { font: 800 clamp(26px, 3vw, 42px)/1.05 var(--m-head); letter-spacing: -.02em; }
.m-pcopy em { font-style: normal; color: rgba(255,255,255,.85); max-width: 46ch; }
.m-pcopy .btn { justify-self: start; margin-top: 8px; }
body.hv-duo .m-quick { padding-top: 16px; }
body.hv-duo .m-hero .bgcredit { position: static; text-align: right; padding: 6px clamp(18px, 4vw, 72px) 0; }
@keyframes m-wavepan { to { background-position: 400px 100%; } }
@keyframes m-snow { from { background-position: 0 -180px; } to { background-position: 40px 180px; } }
@media (max-width: 900px) { .m-duo-head { grid-template-columns: 1fr; } .m-duo { flex-direction: column; height: auto; } .m-panel { min-height: 300px; flex: none; } .m-duo:hover .m-panel, .m-duo .m-panel:hover { flex-grow: 0; } }
@media (prefers-reduced-motion: reduce) { .m-panel::after, body.bv-wave .btn::before { animation: none !important; } .m-panel { transition: none; } }

/* buttons variant: cut (notched corners, skewed slide fill, uppercase) */
body.bv-cut .btn { border-radius: 0; padding: 16px 28px; text-transform: uppercase; letter-spacing: .08em; font-size: 13.5px; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
body.bv-cut .btn::after { display: none; }
body.bv-cut .btn::before { content: ""; position: absolute; inset: 0 -20%; z-index: -1; background: var(--m-ink); transform: translateX(-105%) skewX(-20deg); transition: transform .45s var(--m-ease); }
body.bv-cut .btn:hover::before { transform: translateX(0) skewX(-20deg); }
body.bv-cut .btn.accent:hover, body.bv-cut .pcard .btn:hover, body.bv-cut .m-btn-main:hover { background: var(--m-accent); color: #fff; }
body.bv-cut .m-btn-main::before, body.bv-cut .pcard .btn::before, body.bv-cut .btn.accent::before { background: #0d0d0d; }
body.bv-cut .m-btn-ghost::before { background: var(--m-accent); } body.bv-cut .m-btn-ghost:hover { color: #fff !important; background: transparent !important; border-color: var(--m-accent) !important; }
body.bv-cut .btn .arr { transition: transform .3s; } body.bv-cut .btn:hover .arr { transform: translateX(6px); }

/* buttons variant: glint (spinning light ring on hover) */
body.bv-glint .btn { border-radius: 14px; }
body.bv-glint .btn::after { display: none; }
body.bv-glint .btn::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--m-ang, 0deg), transparent 0 70%, #fff 80%, color-mix(in srgb, var(--m-accent) 40%, #7fe0e8) 88%, transparent 96%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; animation: m-ang 1.8s linear infinite; }
body.bv-glint .btn:hover::before { opacity: 1; }
body.bv-glint .m-btn-ghost::before { background: conic-gradient(from var(--m-ang, 0deg), transparent 0 70%, var(--m-accent) 82%, transparent 96%); }
body.bv-glint .btn .arr { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 8px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 11px; transition: transform .3s; } body.bv-glint .btn:hover .arr { transform: translateX(3px); }
@property --m-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes m-ang { to { --m-ang: 360deg; } }

/* buttons variant: blob (shifting gradient, glow) */
body.bv-blob .btn { border-radius: 999px; padding: 16px 28px; }
body.bv-blob .btn::after { display: none; }
body.bv-blob .btn.accent, body.bv-blob .pcard .btn, body.bv-blob .m-btn-main { background: linear-gradient(120deg, var(--m-accent), #e0607a, var(--m-accent-2), var(--m-accent)) 0 50% / 300% 100%; transition: background-position .8s var(--m-ease), transform .3s var(--m-ease), box-shadow .3s; }
body.bv-blob .btn.accent:hover, body.bv-blob .pcard .btn:hover, body.bv-blob .m-btn-main:hover { background-position: 100% 50%; box-shadow: 0 0 0 6px color-mix(in srgb, var(--m-accent) 18%, transparent), 0 18px 36px color-mix(in srgb, var(--m-accent) 40%, transparent); transform: translateY(-3px) scale(1.03); }
body.bv-blob .m-btn-ghost { border: 2px solid transparent !important; background: linear-gradient(var(--m-bg), var(--m-bg)) padding-box, linear-gradient(120deg, var(--m-accent), #e0607a) border-box !important; color: var(--m-ink) !important; }
body.bv-blob .m-btn-ghost:hover { background: linear-gradient(var(--m-soft), var(--m-soft)) padding-box, linear-gradient(120deg, #e0607a, var(--m-accent)) border-box !important; }
body.bv-blob .btn .arr { transition: transform .35s var(--m-ease); } body.bv-blob .btn:hover .arr { transform: translateX(5px) rotate(-10deg); }

/* hero variant: edge (dark, diagonal photo, spec stats) */
body.hv-edge .m-hero { background: radial-gradient(800px 500px at 15% 80%, color-mix(in srgb, var(--m-accent) 22%, transparent), transparent 70%), linear-gradient(160deg, #141414, #0a0a0a); flex-direction: column; align-items: stretch; min-height: calc(100svh - 78px); }
.m-ephoto { position: absolute; inset: 0 0 0 34%; margin: 0; clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
.m-ephoto img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.1); animation: m-kenburns 24s ease-in-out infinite alternate; }
.m-ephoto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0a0a0a 0%, transparent 35%, transparent 70%, rgba(10,10,10,.5)); }
.m-ephoto::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; z-index: 2; background: var(--m-accent); transform: skewX(-10.2deg); transform-origin: top left; margin-left: 18%; }
body.hv-edge .m-hero .m-inner { padding-bottom: 24px; }
body.hv-edge .m-hero h1 { text-transform: uppercase; letter-spacing: .01em; font-size: clamp(38px, 5.4vw, 74px) !important; line-height: .98 !important; }
body.hv-edge .m-hero .eyebrow { display: inline-flex; gap: 10px; align-items: center; color: #fff; } body.hv-edge .m-hero .eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--m-accent); transform: skewX(-30deg); }
.m-stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 22px; font: 700 12.5px/1 var(--m-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.m-stats span { padding: 8px 14px 8px 0; } .m-stats span + span::before { content: "/"; color: var(--m-accent); margin-right: 14px; font-weight: 900; }
body.hv-edge .m-collage .m-card { border-radius: 4px; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
body.hv-edge .m-collage .m-card span { border-radius: 0; text-transform: uppercase; letter-spacing: .06em; }
body.hv-edge .m-quick a { border-radius: 4px; background: rgba(20,20,20,.75); }
@media (max-width: 900px) { .m-ephoto { inset: 0; clip-path: none; opacity: .4; } .m-ephoto::before { display: none; } body.hv-edge .m-hero .m-inner { grid-template-columns: 1fr; } body.hv-edge .m-collage { display: none; } }

/* hero variant: orbit (clinical light, round photo, spinning ring, orbiting chips) */
body.hv-orbit .m-hero { color: var(--m-ink); background: radial-gradient(700px 500px at 80% 40%, color-mix(in srgb, var(--m-accent) 12%, transparent), transparent 70%), linear-gradient(180deg, #fff, var(--m-bg)); flex-direction: column; align-items: stretch; min-height: calc(100svh - 78px); }
body.hv-orbit .m-hero h1 { color: var(--m-ink) !important; } body.hv-orbit .m-hero .sub { color: var(--m-body-ink); } body.hv-orbit .m-hero .eyebrow { color: var(--m-accent); }
body.hv-orbit .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: color-mix(in srgb, var(--m-ink) 25%, transparent) !important; }
.m-orbit { position: relative; justify-self: center; width: min(460px, 100%); aspect-ratio: 1; }
.m-ophoto { position: absolute; inset: 9%; margin: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 30px 70px color-mix(in srgb, var(--m-accent) 25%, transparent); animation: m-pop 1s var(--m-ease) both; }
.m-ophoto img { width: 100%; height: 100%; object-fit: cover; }
.m-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--m-accent) 45%, transparent); animation: m-spin 40s linear infinite; }
.m-ring::after { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--m-accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--m-accent) 20%, transparent); }
.m-oprod { position: absolute; right: -6%; bottom: 4%; width: 150px; background: #fff; border-radius: 18px; padding: 10px; box-shadow: 0 20px 44px color-mix(in srgb, var(--m-ink) 16%, transparent); text-decoration: none; animation: m-float 7s ease-in-out infinite; }
.m-oprod img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; } .m-oprod span { display: block; font: 600 11.5px/1.25 var(--m-body); color: var(--m-ink); margin-top: 6px; }
.m-oc { position: absolute; padding: 9px 14px; border-radius: 999px; background: #fff; color: var(--m-ink) !important; text-decoration: none; font: 700 12.5px/1 var(--m-body); box-shadow: 0 10px 24px color-mix(in srgb, var(--m-ink) 12%, transparent); border: 1px solid color-mix(in srgb, var(--m-accent) 25%, transparent); transition: transform .3s var(--m-ease), border-color .3s; white-space: nowrap; }
.m-oc:hover { transform: translateY(-4px); border-color: var(--m-accent); }
.m-oc.o1 { left: -8%; top: 12%; animation: m-float 8s ease-in-out infinite; } .m-oc.o2 { right: -4%; top: 4%; animation: m-float 9s ease-in-out -3s infinite; } .m-oc.o3 { left: -12%; bottom: 18%; animation: m-float 7s ease-in-out -5s infinite; }
body.hv-orbit .m-quick a { background: #fff; color: var(--m-ink) !important; border-color: color-mix(in srgb, var(--m-ink) 10%, transparent); backdrop-filter: none; } body.hv-orbit .m-quick img { background: var(--m-soft); }
body.hv-orbit .m-hero .bgcredit, body.hv-orbit .m-hero .bgcredit a { color: color-mix(in srgb, var(--m-ink) 55%, transparent); }
@keyframes m-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 900px) { body.hv-orbit .m-hero .m-inner { grid-template-columns: 1fr; } .m-orbit { width: min(320px, 82%); } .m-oc { display: none; } .m-oprod { width: 110px; right: -4%; } }

/* hero variant: swatch (lipstick bars as category links) */
body.hv-swatch .m-hero { background: linear-gradient(135deg, var(--m-hero-a), color-mix(in srgb, var(--m-hero-b) 70%, var(--m-hero-a))); min-height: calc(100svh - 78px); }
.m-sphoto { position: absolute; inset: 0; margin: 0; opacity: .22; } .m-sphoto img { width: 100%; height: 100%; object-fit: cover; filter: blur(2px) saturate(1.2); }
body.hv-swatch .m-hero .eyebrow { color: #f6b8c4; } body.hv-swatch .m-hero h1 { font-style: italic; }
.m-swatches { display: flex; align-items: flex-end; gap: clamp(8px, 1.2vw, 16px); height: min(520px, 60vh); }
.m-sw { position: relative; flex: 1; height: var(--h); min-width: 0; border-radius: 999px 999px 18px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c) 40%, color-mix(in srgb, var(--c) 70%, #000)); color: #fff !important; text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 14px 6px; text-align: center; box-shadow: inset 0 -30px 40px rgba(0,0,0,.18), 0 20px 40px rgba(0,0,0,.25); transition: transform .5s var(--m-ease), height .5s var(--m-ease); animation: m-rise .9s var(--m-ease) both; }
.m-sw:nth-child(2) { animation-delay: .07s; } .m-sw:nth-child(3) { animation-delay: .14s; } .m-sw:nth-child(4) { animation-delay: .21s; } .m-sw:nth-child(5) { animation-delay: .28s; }
.m-sw .m-cap { position: absolute; top: 10px; left: 50%; width: 38%; height: 30px; border-radius: 999px; background: rgba(255,255,255,.35); transform: translateX(-50%); }
.m-sw img { width: 72%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 50%; padding: 6px; margin-bottom: 10px; opacity: 0; transform: translateY(10px) scale(.9); transition: opacity .35s, transform .45s var(--m-ease); }
.m-sw b { font: 700 13px/1.15 var(--m-head); } .m-sw small { font-size: 11px; opacity: .8; margin-top: 4px; }
.m-sw:hover { transform: translateY(-14px); } .m-sw:hover img { opacity: 1; transform: none; }
@media (max-width: 900px) { body.hv-swatch .m-hero .m-inner { grid-template-columns: 1fr; } .m-swatches { height: 300px; } .m-sw img { display: none; } .m-sw b { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .m-ring, .m-oc, .m-oprod, .m-sw, .m-ophoto, body.bv-glint .btn::before { animation: none !important; } }
@media (max-width: 900px) { .m-panel::before { background: linear-gradient(180deg, rgba(5,20,40,.25) 0%, rgba(5,20,40,.88) 45%); } .m-panel { min-height: 340px; } }
body.hv-edge .m-collage .m-card { padding-bottom: 40px; } body.hv-edge .m-collage .m-card span { bottom: 10px; left: 14px; }

/* buttons variant: roll (text rolls up to a duplicate on hover) */
body.bv-roll .btn { border-radius: 2px; padding: 16px 28px; letter-spacing: .14em; text-transform: uppercase; font-size: 12.5px; }
body.bv-roll .btn::after { display: none; }
body.bv-roll .btn.accent, body.bv-roll .pcard .btn, body.bv-roll .m-btn-main { color: transparent !important; text-shadow: 0 0 0 #fff, 0 2.6em 0 #fff; transition: text-shadow .45s var(--m-ease), background .3s, transform .2s; }
body.bv-roll .btn.accent:hover, body.bv-roll .pcard .btn:hover, body.bv-roll .m-btn-main:hover { text-shadow: 0 -2.6em 0 #fff, 0 0 0 #fff; background: var(--m-ink); transform: none; }
body.bv-roll .m-btn-ghost { color: transparent !important; text-shadow: 0 0 0 var(--m-ink), 0 2.6em 0 var(--m-accent); border: 1px solid var(--m-ink) !important; background: transparent !important; transition: text-shadow .45s var(--m-ease), border-color .3s; }
body.bv-roll .m-btn-ghost:hover { text-shadow: 0 -2.6em 0 var(--m-ink), 0 0 0 var(--m-accent); border-color: var(--m-accent) !important; transform: none; }
body.bv-roll .btn .arr { color: transparent; }

/* buttons variant: stitch (inner dashed stitching that runs on hover) */
body.bv-stitch .btn { border-radius: 14px; padding: 17px 28px; }
body.bv-stitch .btn::after { content: ""; position: absolute; inset: 5px; border-radius: 10px; transform: none; z-index: 0; pointer-events: none; background: linear-gradient(90deg, currentColor 50%, transparent 0) repeat-x 0 0 / 10px 1.5px, linear-gradient(90deg, currentColor 50%, transparent 0) repeat-x 0 100% / 10px 1.5px, linear-gradient(0deg, currentColor 50%, transparent 0) repeat-y 0 0 / 1.5px 10px, linear-gradient(0deg, currentColor 50%, transparent 0) repeat-y 100% 0 / 1.5px 10px; opacity: .55; transition: opacity .3s; }
body.bv-stitch .btn:hover::after { opacity: .95; animation: m-stitch .6s linear infinite; }
body.bv-stitch .btn:hover { transform: translateY(-2px) rotate(-1deg); }
body.bv-stitch .m-btn-ghost { background: #fff !important; color: var(--m-ink) !important; border-color: transparent !important; box-shadow: 0 6px 18px color-mix(in srgb, var(--m-ink) 10%, transparent); }
@keyframes m-stitch { to { background-position: 10px 0, -10px 100%, 0 -10px, 100% 10px; } }

/* buttons variant: squish (jelly bounce) */
body.bv-squish .btn { border-radius: 999px; padding: 17px 30px; font-weight: 800; box-shadow: 0 6px 0 color-mix(in srgb, var(--m-accent) 60%, #000) !important; }
body.bv-squish .btn::after { display: none; }
body.bv-squish .btn:hover { animation: m-squish .6s var(--m-ease); transform: none; }
body.bv-squish .btn:active { transform: translateY(4px) scale(1.03, .94); box-shadow: 0 2px 0 color-mix(in srgb, var(--m-accent) 60%, #000) !important; }
body.bv-squish .m-btn-ghost { background: #fff !important; color: var(--m-ink) !important; border-color: #fff !important; box-shadow: 0 6px 0 #c9b8f5 !important; }
@keyframes m-squish { 0% { transform: scale(1, 1); } 30% { transform: scale(1.12, .88); } 45% { transform: scale(.94, 1.08); } 60% { transform: scale(1.04, .97); } 75% { transform: scale(.99, 1.02); } 100% { transform: scale(1, 1); } }

/* hero variant: lookbook (editorial masthead, portrait photo, season tabs) */
body.hv-lookbook .m-hero { color: var(--m-ink); background: var(--m-bg); flex-direction: column; align-items: stretch; min-height: calc(100svh - 78px); }
.m-mast { position: absolute; left: 0; right: 0; top: 2%; text-align: center; font: 400 clamp(90px, 17vw, 300px)/0.9 var(--m-head); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.2px color-mix(in srgb, var(--m-ink) 22%, transparent); white-space: nowrap; pointer-events: none; animation: m-rise 1.2s var(--m-ease) both; }
body.hv-lookbook .m-hero .m-inner { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); position: relative; z-index: 2; }
body.hv-lookbook .m-hero h1 { color: var(--m-ink) !important; font-weight: 400; font-size: clamp(38px, 5vw, 70px) !important; } body.hv-lookbook .m-hero .sub { color: var(--m-body-ink); } body.hv-lookbook .m-hero .eyebrow { color: var(--m-accent); letter-spacing: .3em; }
.m-seasons { display: flex; gap: 0; margin-top: 8px; border-top: 1px solid color-mix(in srgb, var(--m-ink) 18%, transparent); }
.m-seasons a { flex: 1; padding: 14px 4px 0; font: 600 12px/1.2 var(--m-body); letter-spacing: .16em; text-transform: uppercase; color: var(--m-ink) !important; text-decoration: none; position: relative; }
.m-seasons a::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--m-accent); transition: width .4s var(--m-ease); } .m-seasons a:hover::before { width: 100%; }
.m-lookwrap { position: relative; justify-self: center; width: min(420px, 100%); aspect-ratio: 3 / 4; }
.m-look { position: absolute; inset: 0; margin: 0; overflow: hidden; box-shadow: 0 40px 80px color-mix(in srgb, var(--m-ink) 25%, transparent); animation: m-arch-in 1.2s var(--m-ease) both; }
.m-look img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.2s var(--m-ease); } .m-lookwrap:hover .m-look img { transform: scale(1.05); }
.m-look figcaption { position: absolute; left: 14px; bottom: 14px; padding: 7px 12px; background: #fff; font: 600 11px/1 var(--m-body); letter-spacing: .2em; text-transform: uppercase; color: var(--m-ink); }
.m-lk { position: absolute; width: 132px; aspect-ratio: 3 / 4; background: #fff; padding: 6px; box-shadow: 0 22px 44px color-mix(in srgb, var(--m-ink) 22%, transparent); transition: transform .4s var(--m-ease); }
.m-lk img { width: 100%; height: 100%; object-fit: cover; display: block; } .m-lk.c1 { left: -60px; top: 14%; transform: rotate(-5deg); } .m-lk.c2 { right: -48px; bottom: 10%; transform: rotate(4deg); } .m-lk:hover { transform: rotate(0) translateY(-6px); }
body.hv-lookbook .m-quick a { background: #fff; color: var(--m-ink) !important; border-radius: 2px; border-color: color-mix(in srgb, var(--m-ink) 12%, transparent); backdrop-filter: none; } body.hv-lookbook .m-quick img { border-radius: 2px; background: var(--m-soft); }
body.hv-lookbook .m-hero .bgcredit, body.hv-lookbook .m-hero .bgcredit a { color: color-mix(in srgb, var(--m-ink) 55%, transparent); }
@media (max-width: 900px) { body.hv-lookbook .m-hero .m-inner { grid-template-columns: 1fr; } .m-lookwrap { width: min(300px, 72%); } .m-lk { width: 92px; } .m-lk.c1 { left: -30px; } .m-lk.c2 { right: -26px; } .m-mast { font-size: 26vw; } }

/* hero variant: patchwork (quilt grid: photo, dot tiles, product squares) */
body.hv-patchwork .m-hero { color: var(--m-ink); background: radial-gradient(circle, color-mix(in srgb, var(--m-accent) 12%, transparent) 2px, transparent 2.5px) 0 0 / 22px 22px, var(--m-bg); min-height: calc(100svh - 78px); }
body.hv-patchwork .m-hero h1 { color: var(--m-ink) !important; } body.hv-patchwork .m-hero .sub { color: var(--m-body-ink); } body.hv-patchwork .m-hero .eyebrow { color: var(--m-accent); }
.m-patch { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(120px, 1fr); gap: 10px; height: min(560px, 66vh); }
.m-pt { position: relative; overflow: hidden; border-radius: 18px; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; text-decoration: none; color: var(--m-ink) !important; animation: m-pop .8s var(--m-ease) both; transition: transform .35s var(--m-ease), box-shadow .35s; box-shadow: 0 10px 24px color-mix(in srgb, var(--m-ink) 8%, transparent); }
.m-pt:nth-child(2) { animation-delay: .06s; } .m-pt:nth-child(3) { animation-delay: .12s; } .m-pt:nth-child(4) { animation-delay: .18s; } .m-pt:nth-child(5) { animation-delay: .24s; } .m-pt:nth-child(6) { animation-delay: .3s; } .m-pt:nth-child(7) { animation-delay: .36s; }
.m-pt:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 18px 34px color-mix(in srgb, var(--m-ink) 14%, transparent); }
.m-pt.photo { grid-column: span 2; grid-row: span 2; margin: 0; padding: 0; } .m-pt.photo img { width: 100%; height: 100%; object-fit: cover; }
.m-pt.cat { background: radial-gradient(circle, var(--d) 5px, transparent 5.5px) 0 0 / 26px 26px, #fff; outline: 2px dashed color-mix(in srgb, var(--d) 55%, transparent); outline-offset: -8px; }
.m-pt.cat b { font: 700 17px/1.15 var(--m-head); background: #fff; padding: 4px 8px; border-radius: 8px; align-self: flex-start; } .m-pt.cat small { background: #fff; padding: 3px 8px; border-radius: 8px; align-self: flex-start; margin-top: 4px; font-weight: 600; }
.m-pt.prod { background: #fff; padding: 10px; } .m-pt.prod img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 900px) { body.hv-patchwork .m-hero .m-inner { grid-template-columns: 1fr; } .m-patch { height: auto; grid-auto-rows: 120px; } }

/* hero variant: goo (vivid slime blobs, bouncing jars) */
body.hv-goo .m-hero { background: radial-gradient(900px 600px at 80% 30%, #9b5cff, transparent 60%), linear-gradient(135deg, var(--m-hero-a), var(--m-hero-b)); min-height: calc(100svh - 78px); }
.m-blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; filter: blur(2px); }
.m-blobs i { position: absolute; display: block; width: 300px; height: 300px; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 35%), var(--b); opacity: .55; animation: m-morph 9s ease-in-out infinite alternate, m-drift 12s ease-in-out infinite alternate; }
.m-blobs i:nth-child(1) { --b: #7cf2c4; left: -60px; bottom: -80px; } .m-blobs i:nth-child(2) { --b: #ffd84d; right: 8%; top: -90px; width: 220px; height: 220px; animation-delay: -3s; } .m-blobs i:nth-child(3) { --b: #ff7ac6; left: 38%; bottom: -120px; width: 260px; height: 260px; animation-delay: -6s; } .m-blobs i:nth-child(4) { --b: #6fd3ff; right: -70px; bottom: 18%; width: 180px; height: 180px; animation-delay: -1s; }
body.hv-goo .m-hero h1 { font-weight: 900; text-shadow: 0 6px 0 rgba(0,0,0,.18); } body.hv-goo .m-hero .eyebrow { color: #ffd84d; }
body.hv-goo .m-hero .m-chips span { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); }
.m-jars { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; justify-self: center; width: min(460px, 100%); }
.m-jar { display: block; aspect-ratio: 1; border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; background: #fff; padding: 14%; box-shadow: 0 20px 40px rgba(0,0,0,.25), inset 0 -10px 0 rgba(0,0,0,.06); animation: m-bounce 2.6s ease-in-out infinite, m-morph 10s ease-in-out infinite alternate; transition: transform .3s; }
.m-jar img { width: 100%; height: 100%; object-fit: contain; } .m-jar.j2 { animation-delay: -.6s, -2s; margin-top: 40px; } .m-jar.j3 { animation-delay: -1.2s, -4s; margin-top: -40px; } .m-jar.j4 { animation-delay: -1.8s, -6s; }
.m-jar:hover { animation-play-state: paused; transform: scale(1.06) rotate(-4deg); }
@keyframes m-morph { 0% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; } 50% { border-radius: 63% 37% 41% 59% / 55% 62% 38% 45%; } 100% { border-radius: 38% 62% 55% 45% / 60% 38% 62% 40%; } }
@keyframes m-bounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-14px) scale(.97, 1.03); } 55% { transform: translateY(-14px) scale(.97, 1.03); } 90% { transform: translateY(0) scale(1.04, .96); } }
@media (max-width: 900px) { body.hv-goo .m-hero .m-inner { grid-template-columns: 1fr; } .m-jars { width: min(320px, 86%); } }
@media (prefers-reduced-motion: reduce) { .m-blobs i, .m-jar, .m-mast, .m-pt, .m-look, body.bv-squish .btn, body.bv-stitch .btn::after { animation: none !important; } }
@media (max-width: 900px) { .m-patch { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; } .m-pt.photo { grid-column: span 2; grid-row: span 2; } .m-pt.cat b { font-size: 15px; } }
@media (max-width: 900px) { .m-patch > .m-pt:last-child:nth-child(even) { grid-column: span 2; } }

/* buttons variant: ring (expanding halo ring on hover) */
body.bv-ring .btn { border-radius: 999px; overflow: visible; }
body.bv-ring .btn::after { display: none; }
body.bv-ring .btn::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--m-accent); opacity: 0; pointer-events: none; }
body.bv-ring .btn:hover::before { animation: m-halo .9s var(--m-ease) infinite; }
body.bv-ring .btn .arr { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -6px -8px -6px 10px; border-radius: 50%; background: rgba(255,255,255,.22); transition: transform .45s var(--m-ease); }
body.bv-ring .btn:hover .arr { transform: rotateY(180deg) translateX(-2px); }
body.bv-ring .m-btn-ghost .arr, body.bv-ring .btn.ghost .arr { background: color-mix(in srgb, var(--m-accent) 14%, transparent); }
@keyframes m-halo { 0% { inset: -2px; opacity: .7; } 100% { inset: -12px; opacity: 0; } }

/* hero variant: lab (hex grid, hexagon photo, molecule dots, hex tags) */
body.hv-lab .m-hero { color: var(--m-ink); min-height: calc(100svh - 78px); flex-direction: column; align-items: stretch; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 32L0 82V66l28 16 28-16v16L28 98z' fill='none' stroke='%23000' stroke-opacity='.05'/%3E%3C/svg%3E") 0 0 / 56px 98px, radial-gradient(700px 500px at 80% 40%, color-mix(in srgb, var(--m-accent) 12%, transparent), transparent 70%), var(--m-bg); animation: m-hexdrift 60s linear infinite; }
body.hv-lab .m-hero h1 { color: var(--m-ink) !important; } body.hv-lab .m-hero .sub { color: var(--m-body-ink); } body.hv-lab .m-hero .eyebrow { color: var(--m-accent); }
body.hv-lab .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: color-mix(in srgb, var(--m-ink) 25%, transparent) !important; }
.m-hex { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.m-hex span { position: relative; padding: 10px 18px; font: 700 12.5px/1 var(--m-body); color: var(--m-ink); background: #fff; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--m-accent) 40%, transparent); }
.m-labwrap { position: relative; justify-self: center; width: min(480px, 100%); aspect-ratio: 1; }
.m-labphoto { position: absolute; inset: 4%; margin: 0; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); animation: m-pop 1s var(--m-ease) both; }
.m-labphoto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--m-ease); } .m-labwrap:hover .m-labphoto img { transform: scale(1.06); }
.m-labcard { position: absolute; right: -4%; bottom: 6%; width: 150px; background: #fff; border-radius: 18px; padding: 10px; box-shadow: 0 22px 44px color-mix(in srgb, var(--m-ink) 18%, transparent); text-decoration: none; animation: m-float 7s ease-in-out infinite; }
.m-labcard img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; } .m-labcard span { display: block; font: 600 11.5px/1.25 var(--m-body); color: var(--m-ink); margin-top: 6px; }
.m-mol { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--m-accent); box-shadow: 22px 10px 0 -3px color-mix(in srgb, var(--m-accent) 60%, #fff), -16px 18px 0 -4px color-mix(in srgb, var(--m-accent) 40%, #fff); animation: m-float 6s ease-in-out infinite; }
.m-mol.a { left: 2%; top: 14%; } .m-mol.b { right: 6%; top: 6%; animation-delay: -2s; } .m-mol.c { left: 10%; bottom: 8%; animation-delay: -4s; }
body.hv-lab .m-quick a { background: #fff; color: var(--m-ink) !important; border-color: color-mix(in srgb, var(--m-ink) 10%, transparent); backdrop-filter: none; } body.hv-lab .m-quick img { background: var(--m-soft); }
body.hv-lab .m-hero .bgcredit, body.hv-lab .m-hero .bgcredit a { color: color-mix(in srgb, var(--m-ink) 55%, transparent); }
@keyframes m-hexdrift { to { background-position: 56px 98px, 0 0, 0 0; } }
@media (max-width: 900px) { body.hv-lab .m-hero .m-inner { grid-template-columns: 1fr; } .m-labwrap { width: min(320px, 84%); } .m-labcard { width: 110px; } }
@media (prefers-reduced-motion: reduce) { body.hv-lab .m-hero, .m-mol, .m-labcard, body.bv-ring .btn::before { animation: none !important; } }

/* buttons variant: drill (arrow spins like a bit, hatch fill) */
body.bv-drill .btn { border-radius: 6px; }
body.bv-drill .btn::after { display: none; }
body.bv-drill .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 6px, transparent 6px 12px); opacity: 0; transition: opacity .3s; }
body.bv-drill .btn:hover::before { opacity: 1; animation: m-hatch .6s linear infinite; }
body.bv-drill .btn .arr { display: inline-block; transition: transform .6s var(--m-ease); } body.bv-drill .btn:hover .arr { transform: translateX(4px) rotate(720deg); }
@keyframes m-hatch { to { background-position: 17px 0; } }

/* buttons variant: stamp (press like a rubber stamp) */
body.bv-stamp .btn { border-radius: 4px; border: 2px dashed transparent; letter-spacing: .04em; }
body.bv-stamp .btn::after { display: none; }
body.bv-stamp .btn:hover { transform: rotate(-2deg) scale(1.03); box-shadow: 4px 4px 0 var(--m-ink) !important; }
body.bv-stamp .btn:active { transform: rotate(-2deg) scale(.96); box-shadow: 1px 1px 0 var(--m-ink) !important; }
body.bv-stamp .m-btn-ghost { border: 2px dashed var(--m-ink) !important; background: transparent !important; color: var(--m-ink) !important; }

/* buttons variant: chrome (metallic sheen) */
body.bv-chrome .btn { border-radius: 10px; }
body.bv-chrome .btn::after { background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.65) 45%, rgba(255,255,255,.15) 55%, transparent 80%); }
body.bv-chrome .btn.accent, body.bv-chrome .pcard .btn, body.bv-chrome .m-btn-main { background: linear-gradient(180deg, color-mix(in srgb, var(--m-accent) 80%, #fff), var(--m-accent) 45%, var(--m-accent-2)); border: 1px solid color-mix(in srgb, var(--m-accent-2) 70%, #000); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px color-mix(in srgb, var(--m-accent) 35%, transparent); }
body.bv-chrome .m-btn-ghost { background: linear-gradient(180deg, #f6f6f6, #cfcfcf) !important; color: #1b1b1b !important; border: 1px solid #9a9a9a !important; }

/* hero variant: blueprint (tech drawing grid, spec sheets, dimension lines) */
body.hv-blueprint .m-hero { background: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(160deg, var(--m-hero-a), var(--m-hero-b)); min-height: calc(100svh - 78px); }
body.hv-blueprint .m-hero h1 { font-family: var(--m-head); letter-spacing: -.01em; } body.hv-blueprint .m-hero .eyebrow { color: #ffcf8a; font-family: ui-monospace, Menlo, monospace; }
.m-specs { display: grid; grid-template-columns: repeat(3, auto); gap: 0; margin-top: 18px; border: 1px solid rgba(255,255,255,.35); width: fit-content; font: 600 12px/1.2 ui-monospace, Menlo, monospace; color: #fff; }
.m-specs span { padding: 10px 14px; border-right: 1px solid rgba(255,255,255,.35); } .m-specs span:last-child { border-right: 0; }
.m-sheets { position: relative; height: min(520px, 62vh); }
.m-sheet { position: absolute; width: 52%; background: #f5f8ff; border: 2px solid #fff; padding: 26px 14px 12px; box-shadow: 0 24px 50px rgba(0,0,0,.35); text-decoration: none; color: #13304f !important; transition: transform .4s var(--m-ease); animation: m-rise .9s var(--m-ease) both; }
.m-sheet i { position: absolute; left: 10px; top: 6px; font: 700 10px/1 ui-monospace, Menlo, monospace; font-style: normal; letter-spacing: .14em; color: #e06a1a; }
.m-sheet img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block; } .m-sheet span { display: block; margin-top: 8px; border-top: 1px dashed #9db0cc; padding-top: 6px; font: 600 11.5px/1.25 ui-monospace, Menlo, monospace; }
.m-sheet.s1 { left: 0; top: 4%; transform: rotate(-3deg); } .m-sheet.s2 { right: 0; top: 0; transform: rotate(2deg); animation-delay: .1s; } .m-sheet.s3 { left: 24%; bottom: 0; transform: rotate(-1deg); animation-delay: .2s; }
.m-sheet:hover { transform: rotate(0) translateY(-6px); z-index: 3; }
.m-dimh, .m-dimv { position: absolute; border-color: #ffcf8a; pointer-events: none; } .m-dimh { left: 0; right: 0; bottom: -18px; height: 12px; border-left: 1.5px solid; border-right: 1.5px solid; } .m-dimh::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed #ffcf8a; }
.m-dimv { top: 0; bottom: 0; right: -18px; width: 12px; border-top: 1.5px solid; border-bottom: 1.5px solid; } .m-dimv::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1.5px dashed #ffcf8a; }
@media (max-width: 900px) { body.hv-blueprint .m-hero .m-inner { grid-template-columns: 1fr; } .m-sheets { height: 360px; } .m-specs { grid-template-columns: 1fr; } .m-specs span { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.35); } .m-dimv { display: none; } }

/* hero variant: tag (polaroid photo, swinging luggage tags for categories) */
body.hv-tag .m-hero { color: var(--m-ink); background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--m-accent) 10%, transparent), transparent 60%), repeating-linear-gradient(45deg, rgba(0,0,0,.025) 0 2px, transparent 2px 6px), var(--m-bg); min-height: calc(100svh - 78px); flex-direction: column; align-items: stretch; }
body.hv-tag .m-hero h1 { color: var(--m-ink) !important; } body.hv-tag .m-hero .sub { color: var(--m-body-ink); } body.hv-tag .m-hero .eyebrow { color: var(--m-accent); }
.m-polaroid { justify-self: center; width: min(440px, 100%); background: #fff; padding: 16px 16px 54px; box-shadow: 0 30px 60px rgba(60,40,20,.25); rotate: 2.5deg; position: relative; animation: m-rise 1s var(--m-ease) both; }
.m-polaroid figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; } .m-polaroid img { width: 100%; height: 100%; object-fit: cover; }
.m-polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font: italic 600 18px/1 var(--m-head); color: var(--m-ink); }
.m-polaroid::before { content: ""; position: absolute; top: -14px; left: 50%; width: 110px; height: 30px; transform: translateX(-50%) rotate(-4deg); background: color-mix(in srgb, var(--m-accent) 35%, #f4e6c8); opacity: .85; }
.m-tags { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; padding: 10px clamp(18px, 4vw, 72px) clamp(26px, 4vh, 40px); }
.m-tag { position: relative; display: block; min-width: 170px; padding: 14px 18px 14px 34px; background: #f3e3c3; color: var(--m-ink) !important; text-decoration: none; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); transform-origin: 0 50%; box-shadow: 0 8px 18px rgba(60,40,20,.15); animation: m-swing 4s ease-in-out infinite; }
.m-tag::before { content: ""; position: absolute; left: 12px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--m-bg); box-shadow: inset 0 0 0 2px #b08a52; }
.m-tag:nth-child(2) { animation-delay: -1s; } .m-tag:nth-child(3) { animation-delay: -2s; } .m-tag:nth-child(4) { animation-delay: -3s; }
.m-tag b { display: block; font: 700 15px/1.2 var(--m-head); } .m-tag small { font-size: 12px; opacity: .75; }
.m-tag:hover { animation-play-state: paused; background: #ecd3a5; }
@keyframes m-swing { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@media (max-width: 900px) { body.hv-tag .m-hero .m-inner { grid-template-columns: 1fr; } .m-polaroid { width: min(300px, 80%); } .m-tag { min-width: 0; flex: 1 1 140px; } }

/* hero variant: showroom (dark leather cabin, light sweep, quilted copy panel, make chips) */
body.hv-showroom .m-hero { background: #120d0a; min-height: calc(100svh - 78px); flex-direction: column; align-items: stretch; }
.m-sphoto2 { position: absolute; inset: 0; margin: 0; overflow: hidden; } .m-sphoto2 img { width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(1.1) contrast(1.05); }
.m-sphoto2::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,13,10,.92) 0%, rgba(18,13,10,.55) 45%, rgba(18,13,10,.2)); }
.m-sweep { position: absolute; top: -20%; bottom: -20%; width: 30%; left: -40%; z-index: 1; background: linear-gradient(100deg, transparent, rgba(255,240,220,.18), transparent); animation: m-sweep 7s ease-in-out infinite; }
.m-quilt { position: relative; padding: clamp(24px, 3vw, 40px); border-radius: 20px; background: linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25% 75%, rgba(255,255,255,.035) 75%) 0 0 / 34px 34px, linear-gradient(-45deg, rgba(255,255,255,.035) 25%, transparent 25% 75%, rgba(255,255,255,.035) 75%) 0 0 / 34px 34px, rgba(40,26,18,.55); border: 1.5px dashed color-mix(in srgb, var(--m-accent) 60%, #d8b48a); outline: 6px solid rgba(40,26,18,.55); backdrop-filter: blur(6px); }
body.hv-showroom .m-hero .eyebrow { color: #d8b48a; }
.m-makes { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; padding: 0 clamp(18px, 4vw, 72px) clamp(24px, 4vh, 40px); }
.m-makes a { padding: 12px 18px; border-radius: 999px; background: linear-gradient(180deg, #3a2a20, #1f1611); border: 1px solid #5b4434; color: #f3e6d8 !important; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); transition: transform .3s var(--m-ease), border-color .3s; }
.m-makes a:hover { transform: translateY(-3px); border-color: #d8b48a; } .m-makes b { font: 700 14px/1 var(--m-head); } .m-makes small { margin-left: 8px; opacity: .7; font-size: 12px; }
@keyframes m-sweep { 0% { left: -40%; } 60%, 100% { left: 120%; } }
@media (max-width: 900px) { body.hv-showroom .m-hero .m-inner { grid-template-columns: 1fr; } body.hv-showroom .m-collage { display: none; } }
@media (prefers-reduced-motion: reduce) { .m-tag, .m-sweep, .m-sheet, .m-polaroid, body.bv-drill .btn::before { animation: none !important; } }

/* ===== shared: product-driven heroes with a category strip ===== */
:is(body.hv-gauge, body.hv-blocks, body.hv-thermo, body.hv-diorama, body.hv-bricks, body.hv-molecule, body.hv-molle, body.hv-palette) .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); }
.m-hcats { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; padding: 0 clamp(18px, 4vw, 72px) clamp(24px, 4vh, 40px); }
.m-hcats a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; text-decoration: none; transition: transform .3s var(--m-ease), background .3s, box-shadow .3s; }
.m-hcats a:hover { transform: translateY(-3px); } .m-hcats b { font: 700 14px/1.1 var(--m-head); } .m-hcats small { font: 700 11px/1 var(--m-body); padding: 4px 7px; border-radius: 99px; background: rgba(0,0,0,.08); }
.m-hcats a img { display: none; }
:is(body.hv-blocks, body.hv-thermo, body.hv-diorama, body.hv-molecule, body.hv-palette) .m-hero { color: var(--m-ink); }
:is(body.hv-blocks, body.hv-thermo, body.hv-diorama, body.hv-molecule, body.hv-palette) .m-hero h1 { color: var(--m-ink) !important; }
:is(body.hv-blocks, body.hv-thermo, body.hv-diorama, body.hv-molecule, body.hv-palette) .m-hero .sub { color: var(--m-body-ink); }
:is(body.hv-blocks, body.hv-thermo, body.hv-diorama, body.hv-molecule, body.hv-palette) .m-hero .eyebrow { color: var(--m-accent); }
:is(body.hv-blocks, body.hv-thermo, body.hv-diorama, body.hv-molecule, body.hv-palette) .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: color-mix(in srgb, var(--m-ink) 35%, transparent) !important; background: rgba(255,255,255,.6) !important; }
:is(body.hv-blocks, body.hv-thermo, body.hv-diorama, body.hv-molecule, body.hv-palette) .m-hero .m-chips span { background: #fff; border-color: color-mix(in srgb, var(--m-ink) 12%, transparent); color: var(--m-ink); }
.m-hero :is(.m-pack, .m-block, .m-dimg, .m-tmini, .m-hwin, .m-neon, .m-atom, .m-pouch, .m-bottle) img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 900px) { :is(body.hv-gauge, body.hv-blocks, body.hv-thermo, body.hv-diorama, body.hv-bricks, body.hv-molecule, body.hv-molle, body.hv-palette) .m-hero .m-inner { grid-template-columns: 1fr; } }

/* hero: gauge (charging battery meter + packs) */
body.hv-gauge .m-hero { background: radial-gradient(circle at 75% 40%, color-mix(in srgb, var(--m-accent) 22%, transparent), transparent 55%), linear-gradient(160deg, var(--m-hero-a), var(--m-hero-b)); }
body.hv-gauge .m-hero .eyebrow { color: var(--m-accent); font-family: ui-monospace, Menlo, monospace; }
.m-gauge { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 26px; align-items: center; }
.m-battery { position: relative; height: 300px; border: 4px solid rgba(255,255,255,.85); border-radius: 18px; padding: 10px; display: flex; flex-direction: column-reverse; gap: 8px; }
.m-battery b { position: absolute; top: -18px; left: 50%; width: 44px; height: 12px; margin-left: -22px; border-radius: 6px 6px 0 0; background: rgba(255,255,255,.85); }
.m-battery i { flex: 1; border-radius: 8px; background: var(--m-accent); box-shadow: 0 0 18px color-mix(in srgb, var(--m-accent) 70%, transparent); opacity: .15; animation: m-charge 3.2s infinite; }
.m-battery i:nth-child(2) { animation-delay: .35s; } .m-battery i:nth-child(3) { animation-delay: .7s; } .m-battery i:nth-child(4) { animation-delay: 1.05s; } .m-battery i:nth-child(5) { animation-delay: 1.4s; }
@keyframes m-charge { 0% { opacity: .15; } 12%, 80% { opacity: 1; } 100% { opacity: .15; } }
.m-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.m-pack { display: block; aspect-ratio: 1; background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 20px 40px rgba(0,0,0,.35); transition: transform .35s var(--m-ease); animation: m-rise .8s var(--m-ease) both; }
.m-pack.p1 { grid-row: span 2; aspect-ratio: auto; } .m-pack.p2 { animation-delay: .1s; } .m-pack.p3 { animation-delay: .2s; } .m-pack:hover { transform: translateY(-6px); }
.m-volts a { border: 1px solid rgba(255,255,255,.25); border-radius: 10px; background: rgba(255,255,255,.06); color: #fff !important; } .m-volts a:hover { background: color-mix(in srgb, var(--m-accent) 25%, transparent); border-color: var(--m-accent); } .m-volts small { background: var(--m-accent); color: #111; }
@media (max-width: 900px) { .m-gauge { grid-template-columns: 70px 1fr; } .m-battery { height: 220px; } }

/* hero: blocks (stacking toy blocks) */
body.hv-blocks .m-hero { background: radial-gradient(circle at 15% 85%, #ffe3a3 0 12%, transparent 12.2%), radial-gradient(circle at 92% 12%, #c9e8ff 0 10%, transparent 10.2%), var(--m-bg); }
.m-blocks { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 120px; gap: 12px; }
.m-block { display: block; background: #fff; border-radius: 26px; padding: 12px; border: 4px solid var(--c, var(--m-accent)); box-shadow: 0 8px 0 var(--c, var(--m-accent)); animation: m-drop .7s cubic-bezier(.3,1.6,.5,1) both; transition: transform .3s var(--m-ease); }
.m-block:hover { transform: translateY(-6px) rotate(-1.5deg); }
.m-block.b1 { --c: #f25c54; grid-column: 1 / 4; grid-row: 1 / 3; } .m-block.b2 { --c: #2f9bd6; grid-column: 4 / 7; animation-delay: .1s; } .m-block.b3 { --c: #f7b32b; grid-column: 4 / 6; animation-delay: .2s; } .m-block.b4 { --c: #45b36b; grid-column: 6 / 7; animation-delay: .3s; } .m-block.b5 { --c: #8e6bd8; grid-column: 1 / 7; grid-row: 3; animation-delay: .4s; }
@keyframes m-drop { from { opacity: 0; transform: translateY(-60px); } to { opacity: 1; transform: none; } }
.m-bchips a { border-radius: 16px; background: #fff; color: var(--m-ink) !important; box-shadow: 0 4px 0 color-mix(in srgb, var(--m-ink) 15%, transparent); } .m-bchips a:nth-child(5n+1) { box-shadow: 0 4px 0 #f25c54; } .m-bchips a:nth-child(5n+2) { box-shadow: 0 4px 0 #2f9bd6; } .m-bchips a:nth-child(5n+3) { box-shadow: 0 4px 0 #f7b32b; } .m-bchips a:nth-child(5n+4) { box-shadow: 0 4px 0 #45b36b; } .m-bchips a:nth-child(5n) { box-shadow: 0 4px 0 #8e6bd8; }
@media (max-width: 900px) { .m-blocks { grid-auto-rows: 84px; } .m-block.b5 { display: none; } }

/* hero: thermo (warm/cool split with dial) */
body.hv-thermo .m-hero { background: linear-gradient(100deg, #fff3ea 0%, #fff8f3 45%, #eef6ff 55%, #e6f1ff 100%); }
.m-thermo { position: relative; height: min(500px, 60vh); }
.m-dial { position: absolute; left: 50%; top: 50%; width: min(400px, 80%); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 40px 80px rgba(40,60,90,.18), inset 0 0 0 14px #f6f7fa; display: grid; place-items: center; }
.m-ring { position: absolute; inset: -14px; border-radius: 50%; background: conic-gradient(from 200deg, #ff7a3d, #ffb35c 25%, #ffe1a8 40%, #9fd0ff 60%, #3e8ff0 80%, #ff7a3d); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px)); mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px)); animation: m-spin 14s linear infinite; }
.m-dimg { display: block; width: 62%; aspect-ratio: 1; }
.m-tmini { position: absolute; width: 130px; aspect-ratio: 1; background: #fff; border-radius: 22px; padding: 10px; box-shadow: 0 18px 40px rgba(40,60,90,.18); animation: m-rise .8s var(--m-ease) both; }
.m-tmini.t1 { left: 0; bottom: 4%; border-bottom: 4px solid #ff7a3d; } .m-tmini.t2 { right: 0; top: 4%; border-bottom: 4px solid #3e8ff0; animation-delay: .15s; }
@keyframes m-spin { to { transform: rotate(360deg); } }
.m-tchips a { border-radius: 999px; background: #fff; color: var(--m-ink) !important; border: 1px solid #e5e8ef; } .m-tchips a:nth-child(-n+2) { border-color: #ffc6a6; } .m-tchips a:nth-child(n+3) { border-color: #b9d7ff; }
@media (max-width: 900px) { .m-thermo { height: 360px; } .m-tmini { width: 90px; } }

/* hero: diorama (little street of lit houses) */
body.hv-diorama .m-hero { background: linear-gradient(180deg, #fde9ef 0%, #fff4ec 70%, var(--m-bg) 100%); }
.m-street { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 14px; height: min(480px, 58vh); padding-bottom: 26px; }
.m-house { position: relative; flex: 1; max-width: 220px; background: #fffdf9; border: 3px solid var(--m-ink); border-top: 0; border-radius: 0 0 8px 8px; padding: 14px; animation: m-rise .9s var(--m-ease) both; }
.m-house.h1 { height: 62%; } .m-house.h2 { height: 82%; animation-delay: .12s; } .m-house.h3 { height: 54%; animation-delay: .24s; }
.m-roof { position: absolute; left: -12px; right: -12px; bottom: 100%; height: 70px; background: var(--m-accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.m-house.h2 .m-roof { background: var(--m-accent-2); height: 86px; }
.m-hwin { display: block; height: 100%; border-radius: 6px; background: radial-gradient(circle at 50% 40%, #fff6d8, #ffe7a8); box-shadow: inset 0 0 0 3px #fff, 0 0 24px rgba(255,200,90,.55); animation: m-glow 3s ease-in-out infinite alternate; }
.m-hwin img { mix-blend-mode: multiply; }
@keyframes m-glow { to { box-shadow: inset 0 0 0 3px #fff, 0 0 44px rgba(255,190,70,.85); } }
.m-ground { position: absolute; left: 0; right: 0; bottom: 14px; height: 12px; border-radius: 8px; background: color-mix(in srgb, var(--m-ink) 80%, transparent); }
.m-signs a { background: #fff; color: var(--m-ink) !important; border: 2px solid var(--m-ink); border-radius: 10px 10px 10px 2px; box-shadow: 3px 3px 0 var(--m-accent); }
@media (max-width: 900px) { .m-street { height: 320px; } .m-roof { height: 44px; } .m-house.h2 .m-roof { height: 54px; } }

/* hero: bricks (studded night baseplate + neon frames) */
body.hv-bricks .m-hero { background: radial-gradient(circle at 12px 12px, rgba(255,255,255,.09) 0 6px, transparent 7px) 0 0 / 24px 24px, linear-gradient(160deg, var(--m-hero-a), var(--m-hero-b)); }
body.hv-bricks .m-hero .eyebrow { color: #7ff7ff; text-shadow: 0 0 12px #2ee6ff; }
.m-neons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.m-neon { display: block; aspect-ratio: 1; background: rgba(10,8,30,.6); border-radius: 18px; padding: 16px; border: 2px solid var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 26px var(--c), inset 0 0 22px color-mix(in srgb, var(--c) 40%, transparent); animation: m-flicker 5s infinite; transition: transform .35s var(--m-ease); }
.m-neon.n1 { --c: #ff3fd1; } .m-neon.n2 { --c: #2ee6ff; animation-delay: -1.3s; transform: translateY(26px); } .m-neon.n3 { --c: #ffd23f; animation-delay: -2.6s; } .m-neon.n4 { --c: #7cff6b; animation-delay: -3.9s; transform: translateY(26px); }
.m-neon:hover { transform: translateY(-6px) !important; }
@keyframes m-flicker { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .55; } }
.m-ncat a { border-radius: 8px; color: #fff !important; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.2); } .m-ncat a:hover { border-color: #ff3fd1; box-shadow: 0 0 16px #ff3fd1; } .m-ncat small { background: rgba(255,255,255,.15); }

/* hero: molecule (products as atoms linked by bonds) */
body.hv-molecule .m-hero { background: radial-gradient(circle at 80% 30%, color-mix(in srgb, var(--m-accent) 14%, transparent), transparent 50%), radial-gradient(circle at 10% 90%, #e9fbf3, transparent 50%), var(--m-bg); }
.m-molg { position: relative; height: min(500px, 60vh); }
.m-bonds { position: absolute; inset: 0; width: 100%; height: 100%; } .m-bonds line { stroke: color-mix(in srgb, var(--m-accent) 55%, transparent); stroke-width: .6; stroke-dasharray: 2 1.5; vector-effect: non-scaling-stroke; stroke-width: 2.5px; }
.m-atom { position: absolute; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; padding: 6%; box-shadow: 0 24px 50px rgba(30,80,70,.16), 0 0 0 10px color-mix(in srgb, var(--m-accent) 12%, transparent); animation: m-float 6s ease-in-out infinite; }
.m-atom.a1 { left: 30%; top: 28%; width: 40%; } .m-atom.a2 { left: 72%; top: 22%; animation-delay: -1.5s; } .m-atom.a3 { left: 40%; top: 74%; animation-delay: -3s; } .m-atom.a4 { left: 78%; top: 68%; width: 28%; animation-delay: -4.5s; }
@keyframes m-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -12px; } }
.m-mcat a { border-radius: 999px; background: #fff; color: var(--m-ink) !important; border: 1.5px solid color-mix(in srgb, var(--m-accent) 35%, transparent); } .m-mcat a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--m-accent); }
@media (max-width: 900px) { .m-molg { height: 340px; } }

/* hero: molle (webbing straps with mounted pouches) */
body.hv-molle .m-hero { background: repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 7px), linear-gradient(160deg, var(--m-hero-a), var(--m-hero-b)); }
body.hv-molle .m-hero .eyebrow { color: #d8c690; letter-spacing: .2em; }
.m-webbing { position: relative; height: min(500px, 60vh); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-content: center; }
.m-strap { position: absolute; left: -6%; right: -6%; height: 26px; background: repeating-linear-gradient(90deg, #3c3f2a 0 34px, #2c2e1e 34px 38px); box-shadow: 0 2px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); }
.m-strap.s1 { top: 18%; } .m-strap.s2 { top: 50%; } .m-strap.s3 { top: 82%; }
.m-pouch { position: relative; z-index: 1; display: block; aspect-ratio: 1; background: #f4f1e6; border-radius: 10px; padding: 14px; outline: 2px dashed rgba(70,70,40,.45); outline-offset: -8px; box-shadow: 0 18px 36px rgba(0,0,0,.4); transition: transform .35s var(--m-ease); animation: m-rise .8s var(--m-ease) both; }
.m-pouch.q2 { animation-delay: .1s; transform: translateY(18px); } .m-pouch.q3 { animation-delay: .2s; } .m-pouch.q4 { animation-delay: .3s; transform: translateY(18px); }
.m-pouch:hover { transform: translateY(-6px) !important; }
.m-patches a { background: #3a3d28; color: #ece3c2 !important; border-radius: 8px; outline: 1.5px dashed rgba(236,227,194,.5); outline-offset: -5px; padding: 13px 18px; } .m-patches a:hover { background: #4a4e33; } .m-patches small { background: rgba(236,227,194,.18); }
@media (max-width: 900px) { .m-webbing { height: auto; } .m-pouch.q3, .m-pouch.q4 { display: none; } }

/* hero: palette (fan of nail swatches + bottles) */
body.hv-palette .m-hero { background: radial-gradient(circle at 75% 45%, #fff 0 18%, transparent 50%), linear-gradient(135deg, #fde7ee, #f6eefe 60%, var(--m-bg)); }
.m-palette { position: relative; height: min(500px, 60vh); }
.m-fan { position: absolute; left: 50%; bottom: 8%; width: 0; height: 0; }
.m-fan i { position: absolute; left: -22px; bottom: 0; width: 44px; height: min(300px, 36vh); border-radius: 22px 22px 8px 8px; background: linear-gradient(90deg, rgba(255,255,255,.45), transparent 35%), var(--c); transform-origin: 50% 100%; transform: rotate(calc((var(--i) - 4.5) * 11deg)); box-shadow: 0 6px 16px rgba(80,30,60,.18); animation: m-fanin 1s var(--m-ease) both; animation-delay: calc(var(--i) * 50ms); }
@keyframes m-fanin { from { transform: rotate(0deg); opacity: 0; } }
.m-bottle { position: absolute; z-index: 2; width: 34%; aspect-ratio: 1; background: #fff; border-radius: 26px; padding: 12px; box-shadow: 0 24px 50px rgba(80,30,60,.2); animation: m-rise .9s var(--m-ease) both; transition: transform .35s var(--m-ease); }
.m-bottle.k1 { left: 2%; top: 4%; } .m-bottle.k2 { right: 2%; top: 14%; animation-delay: .12s; } .m-bottle.k3 { left: 33%; bottom: 0; animation-delay: .24s; }
.m-bottle:hover { transform: translateY(-6px); }
.m-pcat a { border-radius: 999px 999px 999px 6px; background: #fff; color: var(--m-ink) !important; border: 1px solid #f1d3df; } .m-pcat a:hover { background: color-mix(in srgb, var(--m-accent) 10%, #fff); }
@media (max-width: 900px) { .m-palette { height: 360px; } .m-fan i { width: 30px; left: -15px; } }

/* ===== buttons ===== */
/* charge: fill bar sweeps like a charging meter */
body.bv-charge .btn { border-radius: 8px; } body.bv-charge .btn::after { display: none; }
body.bv-charge .btn::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; z-index: -1; background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.28)); transition: width .6s var(--m-ease); }
body.bv-charge .btn:hover::before { width: 100%; } body.bv-charge .btn .arr { display: inline-block; } body.bv-charge .btn:hover .arr { animation: m-zap .5s steps(2) 2; }
@keyframes m-zap { 50% { opacity: .2; } }
/* bounce: chunky toy button */
body.bv-bounce .btn { border-radius: 18px; box-shadow: 0 5px 0 color-mix(in srgb, var(--m-accent) 60%, #000) !important; } body.bv-bounce .btn::after { display: none; }
body.bv-bounce .btn:hover { animation: m-bounce .55s cubic-bezier(.3,1.8,.5,1); } body.bv-bounce .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--m-accent) 60%, #000) !important; }
body.bv-bounce .m-btn-ghost { box-shadow: 0 5px 0 color-mix(in srgb, var(--m-ink) 25%, transparent) !important; }
@keyframes m-bounce { 30% { transform: translateY(-6px) scale(1.03, .97); } 60% { transform: translateY(0) scale(.98, 1.02); } }
/* dial: rotating warm-to-cool ring */
body.bv-dial .btn { border-radius: 999px; } body.bv-dial .btn::after { display: none; }
body.bv-dial .btn::before { content: ""; position: absolute; inset: -3px; z-index: -2; border-radius: inherit; background: conic-gradient(from var(--a, 0deg), #ff7a3d, #ffd08a, #9fd0ff, #3e8ff0, #ff7a3d); opacity: 0; transition: opacity .3s; animation: m-spin 3s linear infinite; }
body.bv-dial .btn:hover::before { opacity: 1; }
/* window: warm glow with pane cross */
body.bv-window .btn { border-radius: 10px 10px 4px 4px; } body.bv-window .btn::after { background: linear-gradient(currentColor, currentColor) 50% 0 / 1px 100% no-repeat, linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat; opacity: 0; transform: none; transition: opacity .3s; mix-blend-mode: overlay; }
body.bv-window .btn:hover::after { opacity: .35; } body.bv-window .btn:hover { box-shadow: 0 0 0 4px #ffe7a8, 0 0 28px rgba(255,190,70,.7) !important; }
/* neon: glowing outline flicker */
body.bv-neon .btn { border-radius: 10px; } body.bv-neon .btn::after { display: none; }
body.bv-neon .btn:hover { box-shadow: 0 0 0 2px #fff, 0 0 18px var(--m-accent), 0 0 42px var(--m-accent) !important; animation: m-flicker 1.4s 1; }
body.bv-neon .m-btn-ghost:hover { box-shadow: 0 0 0 2px #2ee6ff, 0 0 22px #2ee6ff !important; }
/* drop: liquid fills from the bottom */
body.bv-drop .btn { border-radius: 999px; } body.bv-drop .btn::after { display: none; }
body.bv-drop .btn::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -120%; height: 120%; z-index: -1; background: rgba(255,255,255,.25); border-radius: 45% 45% 0 0; transition: bottom .55s var(--m-ease); }
body.bv-drop .btn:hover::before { bottom: -20%; } body.bv-drop .m-btn-ghost::before { background: color-mix(in srgb, var(--m-accent) 18%, transparent); }
/* strap: stitched webbing patch */
body.bv-strap .btn { border-radius: 6px; outline: 1.5px dashed rgba(255,255,255,.55); outline-offset: -6px; letter-spacing: .03em; } body.bv-strap .btn::after { display: none; }
body.bv-strap .btn:hover { transform: translateY(-2px); outline-color: #fff; background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 5px) !important; }
body.bv-strap .m-btn-ghost { outline-color: color-mix(in srgb, currentColor 50%, transparent); }
/* gloss: lacquer highlight */
body.bv-gloss .btn { border-radius: 999px; } body.bv-gloss .btn.accent, body.bv-gloss .pcard .btn, body.bv-gloss .m-btn-main { background-image: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 52%) !important; box-shadow: inset 0 -3px 6px rgba(0,0,0,.12), 0 10px 22px color-mix(in srgb, var(--m-accent) 35%, transparent) !important; }
body.bv-gloss .btn::after { background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%); }
@media (prefers-reduced-motion: reduce) { .m-battery i, .m-block, .m-ring, .m-hwin, .m-neon, .m-atom, .m-pouch, .m-fan i, .m-bottle, .m-tmini, body.bv-dial .btn::before { animation: none !important; } }
:is(.m-gauge, .m-blocks, .m-thermo, .m-street, .m-neons, .m-molg, .m-webbing, .m-palette, .m-sheets) { width: 100%; justify-self: stretch; }

/* ===== batch E heroes: stage, pegboard, plates, dew, room ===== */
:is(body.hv-stage, body.hv-pegboard, body.hv-plates, body.hv-dew, body.hv-room) .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); }
:is(body.hv-pegboard, body.hv-dew, body.hv-room) .m-hero { color: var(--m-ink); }
:is(body.hv-pegboard, body.hv-dew, body.hv-room) .m-hero h1 { color: var(--m-ink) !important; }
:is(body.hv-pegboard, body.hv-dew, body.hv-room) .m-hero .sub { color: var(--m-body-ink); }
:is(body.hv-pegboard, body.hv-dew, body.hv-room) .m-hero .eyebrow { color: var(--m-accent); }
:is(body.hv-pegboard, body.hv-dew, body.hv-room) .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: color-mix(in srgb, var(--m-ink) 35%, transparent) !important; background: rgba(255,255,255,.6) !important; }
:is(body.hv-pegboard, body.hv-dew, body.hv-room) .m-hero .m-chips span { background: #fff; border-color: color-mix(in srgb, var(--m-ink) 12%, transparent); color: var(--m-ink); }
.m-hero :is(.m-artc, .m-tagcard, .m-plate, .m-pebble, .m-furn) img { width: 100%; height: 100%; object-fit: contain; display: block; }
:is(.m-stage, .m-pegwall, .m-plates, .m-dew, .m-room) { position: relative; width: 100%; justify-self: stretch; height: min(500px, 60vh); }
@media (max-width: 900px) { :is(body.hv-stage, body.hv-pegboard, body.hv-plates, body.hv-dew, body.hv-room) .m-hero .m-inner { grid-template-columns: 1fr; } :is(.m-stage, .m-pegwall, .m-plates, .m-dew, .m-room) { height: 360px; } }

/* stage: spotlight on a black backdrop, artwork cards on a floor */
body.hv-stage .m-hero { background: radial-gradient(ellipse at 70% 0%, rgba(255,255,255,.08), transparent 55%), #0b0b0c; }
body.hv-stage .m-hero .eyebrow { color: var(--m-accent); letter-spacing: .3em; }
.m-spot { position: absolute; left: 20%; right: 0; top: -15%; bottom: 10%; background: conic-gradient(from 160deg at 60% 0%, transparent 0deg, rgba(255,240,230,.16) 12deg, rgba(255,240,230,.05) 28deg, transparent 40deg); filter: blur(6px); animation: m-spotsw 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes m-spotsw { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.m-floor { position: absolute; left: 0; right: 0; bottom: 4%; height: 26%; background: radial-gradient(ellipse at 60% 0%, rgba(255,255,255,.12), transparent 70%); pointer-events: none; }
.m-artc { position: absolute; bottom: 14%; width: 30%; aspect-ratio: 3 / 4; background: #fff; padding: 10px; box-shadow: 0 30px 60px rgba(0,0,0,.6); transition: transform .45s var(--m-ease), box-shadow .45s; animation: m-rise .9s var(--m-ease) both; }
.m-artc.r1 { left: 2%; transform: rotate(-6deg); } .m-artc.r2 { left: 24%; bottom: 22%; z-index: 2; animation-delay: .1s; } .m-artc.r3 { left: 47%; bottom: 18%; transform: rotate(4deg); animation-delay: .2s; } .m-artc.r4 { left: 69%; transform: rotate(-2deg); animation-delay: .3s; }
.m-artc:hover { transform: translateY(-10px) rotate(0); box-shadow: 0 30px 70px rgba(0,0,0,.7), 0 0 0 2px var(--m-accent); z-index: 3; }
.m-scat a { border-radius: 2px; color: #f4f1ee !important; border: 1px solid rgba(255,255,255,.25); text-transform: uppercase; letter-spacing: .08em; } .m-scat a:hover { border-color: var(--m-accent); color: #fff !important; } .m-scat small { background: rgba(255,255,255,.12); }

/* pegboard: wall pegs with hanging product tags */
body.hv-pegboard .m-hero { background: radial-gradient(circle at 18px 18px, rgba(90,70,50,.14) 0 3px, transparent 4px) 0 0 / 36px 36px, linear-gradient(180deg, var(--m-bg), var(--m-soft)); }
.m-hang { position: absolute; top: 0; width: 22%; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; animation: m-sway 5s ease-in-out infinite; }
.m-hang.g1 { left: 2%; } .m-hang.g2 { left: 27%; animation-delay: -1.2s; } .m-hang.g3 { left: 52%; animation-delay: -2.4s; } .m-hang.g4 { left: 77%; animation-delay: -3.6s; }
.m-peg { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d9b98c, #9a7448); box-shadow: 0 6px 10px rgba(60,40,20,.3); }
.m-cord { width: 2px; height: calc(var(--d, 60px)); background: #6b5038; } .m-hang.g2 .m-cord { --d: 110px; } .m-hang.g3 .m-cord { --d: 40px; } .m-hang.g4 .m-cord { --d: 90px; }
.m-tagcard { display: block; width: 100%; aspect-ratio: 4 / 5; background: #fff; border-radius: 14px; padding: 10px; box-shadow: 0 20px 40px rgba(60,40,20,.18); transition: transform .35s var(--m-ease); }
.m-tagcard:hover { transform: scale(1.04); }
@keyframes m-sway { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
.m-kcat a { background: #fff; color: var(--m-ink) !important; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--m-ink) 14%, transparent); } .m-kcat a::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d9b98c, #9a7448); }

/* plates: bumper plates on a bar, hazard stripe */
body.hv-plates .m-hero { background: radial-gradient(circle at 75% 45%, color-mix(in srgb, var(--m-accent) 18%, transparent), transparent 55%), repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px), linear-gradient(160deg, var(--m-hero-a), var(--m-hero-b)); }
body.hv-plates .m-hero h1 { text-transform: uppercase; letter-spacing: -.01em; } body.hv-plates .m-hero .eyebrow { color: var(--m-accent); letter-spacing: .25em; }
.m-bar { position: absolute; left: -4%; right: -4%; top: 50%; height: 14px; margin-top: -7px; border-radius: 7px; background: linear-gradient(180deg, #e6e6e6, #8d8d8d 60%, #c9c9c9); box-shadow: 0 6px 14px rgba(0,0,0,.5); z-index: 0; }
.m-plate { position: absolute; top: 50%; z-index: 1; aspect-ratio: 1; border-radius: 50%; padding: 9%; background: #fff; border: 16px solid var(--c); box-shadow: inset 0 0 0 4px rgba(0,0,0,.25), 0 24px 40px rgba(0,0,0,.5); transform: translateY(-50%); animation: m-plateroll 1s var(--m-ease) both; transition: transform .4s var(--m-ease); }
.m-plate.p1 { --c: #c0262d; left: 0; width: 44%; } .m-plate.p2 { --c: #1f5fbf; left: 38%; width: 36%; animation-delay: .12s; } .m-plate.p3 { --c: #f2b705; left: 68%; width: 30%; animation-delay: .24s; }
.m-plate:hover { transform: translateY(-50%) rotate(-8deg) scale(1.03); }
@keyframes m-plateroll { from { opacity: 0; transform: translateY(-50%) translateX(60px) rotate(90deg); } }
.m-hazard { position: relative; z-index: 2; height: 14px; margin: 0 clamp(18px, 4vw, 72px) 18px; background: repeating-linear-gradient(-45deg, var(--m-accent) 0 18px, #111 18px 36px); border-radius: 3px; opacity: .9; }
.m-gcat a { background: rgba(255,255,255,.06); color: #fff !important; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; } .m-gcat a:hover { background: var(--m-accent); border-color: var(--m-accent); color: #111 !important; } .m-gcat small { background: rgba(255,255,255,.15); }

/* dew: water droplets and frosted pebbles */
body.hv-dew .m-hero { background: radial-gradient(circle at 80% 30%, color-mix(in srgb, var(--m-accent) 16%, #fff) 0, transparent 45%), radial-gradient(circle at 10% 85%, #e8f6ff, transparent 50%), var(--m-bg); }
.m-drops i { position: absolute; width: var(--s, 22px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff 0 18%, rgba(255,255,255,.35) 22%, rgba(190,220,240,.25) 60%, rgba(150,190,220,.45) 100%); box-shadow: inset -3px -4px 6px rgba(120,160,200,.25), 0 6px 12px rgba(120,160,200,.18); animation: m-float 7s ease-in-out infinite; }
.m-drops i:nth-child(1) { left: 6%; top: 10%; --s: 30px; } .m-drops i:nth-child(2) { left: 44%; top: 4%; --s: 16px; animation-delay: -1s; } .m-drops i:nth-child(3) { left: 90%; top: 8%; --s: 24px; animation-delay: -2s; } .m-drops i:nth-child(4) { left: 2%; top: 70%; --s: 18px; animation-delay: -3s; } .m-drops i:nth-child(5) { left: 58%; top: 92%; --s: 28px; animation-delay: -4s; } .m-drops i:nth-child(6) { left: 95%; top: 60%; --s: 14px; animation-delay: -5s; } .m-drops i:nth-child(7) { left: 30%; top: 50%; --s: 12px; animation-delay: -2.5s; } .m-drops i:nth-child(8) { left: 74%; top: 44%; --s: 20px; animation-delay: -3.5s; } .m-drops i:nth-child(9) { left: 18%; top: 34%; --s: 10px; animation-delay: -1.5s; }
.m-pebble { position: absolute; width: 36%; aspect-ratio: 1; padding: 6%; border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%; background: rgba(255,255,255,.62); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 24px 50px rgba(120,90,110,.16), inset 0 1px 0 #fff; animation: m-rise .9s var(--m-ease) both; transition: transform .4s var(--m-ease), border-radius .8s; }
.m-pebble.e1 { left: 4%; top: 6%; width: 42%; } .m-pebble.e2 { right: 4%; top: 0; animation-delay: .1s; } .m-pebble.e3 { left: 30%; bottom: 0; animation-delay: .2s; } .m-pebble.e4 { right: 0; bottom: 10%; width: 28%; animation-delay: .3s; }
.m-pebble:hover { transform: translateY(-6px); border-radius: 50%; }
.m-dcat a { background: rgba(255,255,255,.75); color: var(--m-ink) !important; border-radius: 999px; border: 1px solid #fff; box-shadow: 0 6px 16px rgba(120,90,110,.1); } .m-dcat a:hover { background: #fff; }

/* room: wall, window light, floor and furniture */
body.hv-room .m-hero { background: linear-gradient(180deg, var(--m-soft) 0 70%, color-mix(in srgb, var(--m-accent) 18%, var(--m-soft)) 70% 100%); }
.m-window { position: absolute; right: 6%; top: 2%; width: 30%; height: 46%; border: 8px solid #fff; border-radius: 8px; background: linear-gradient(160deg, #dcefff, #fdf6e8); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.04); }
.m-window::before, .m-window::after { content: ""; position: absolute; background: #fff; } .m-window::before { left: 50%; top: 0; bottom: 0; width: 6px; margin-left: -3px; } .m-window::after { top: 50%; left: 0; right: 0; height: 6px; margin-top: -3px; }
.m-lamp { position: absolute; left: 8%; top: 0; width: 70px; height: 40px; border-radius: 0 0 35px 35px; background: color-mix(in srgb, var(--m-accent) 70%, #fff); box-shadow: 0 30px 80px 30px rgba(255,210,140,.45); }
.m-lamp::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 200px; background: rgba(0,0,0,.25); }
.m-floorline { position: absolute; left: -10%; right: -10%; bottom: 18%; height: 2px; background: rgba(0,0,0,.08); }
.m-furn { position: absolute; bottom: 12%; aspect-ratio: 1; background: #fff; border-radius: 18px; padding: 12px; box-shadow: 0 30px 30px -18px rgba(60,40,20,.35); transition: transform .35s var(--m-ease); animation: m-rise .9s var(--m-ease) both; }
.m-furn.f1 { left: 0; width: 40%; } .m-furn.f2 { left: 38%; width: 30%; bottom: 20%; animation-delay: .12s; } .m-furn.f3 { right: 0; width: 34%; animation-delay: .24s; }
.m-furn:hover { transform: translateY(-6px); }
.m-rcat a { background: #fff; color: var(--m-ink) !important; border-radius: 10px; border-bottom: 3px solid color-mix(in srgb, var(--m-accent) 60%, #fff); } .m-rcat a:hover { border-bottom-color: var(--m-accent); }

/* ===== batch E buttons ===== */
/* smudge: lipstick swipe */
body.bv-smudge .btn { border-radius: 3px; text-transform: uppercase; letter-spacing: .1em; } body.bv-smudge .btn::after { display: none; }
body.bv-smudge .btn::before { content: ""; position: absolute; left: -8%; top: 55%; width: 0; height: 40%; z-index: -1; background: color-mix(in srgb, #fff 30%, transparent); border-radius: 40% 60% 50% 50%; transform: skewX(-18deg) rotate(-3deg); transition: width .5s var(--m-ease); }
body.bv-smudge .btn:hover::before { width: 116%; } body.bv-smudge .m-btn-ghost::before { background: color-mix(in srgb, var(--m-accent) 45%, transparent); }
/* peg: wooden dot slides across */
body.bv-peg .btn { border-radius: 999px; padding-left: 2.6em !important; } body.bv-peg .btn::after { display: none; }
body.bv-peg .btn::before { content: ""; position: absolute; left: .9em; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e8cfa6, #9a7448); transition: left .45s var(--m-ease); }
body.bv-peg .btn:hover::before { left: calc(100% - 1.6em); } body.bv-peg .btn:hover { padding-left: 1.6em !important; padding-right: 2.6em !important; }
/* lift: heavy press */
body.bv-lift .btn { border-radius: 6px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; box-shadow: 0 6px 0 rgba(0,0,0,.45) !important; } body.bv-lift .btn::after { display: none; }
body.bv-lift .btn:hover { animation: m-lift .5s var(--m-ease); } body.bv-lift .btn:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0,0,0,.45) !important; }
@keyframes m-lift { 35% { transform: translateY(4px) scaleY(.96); box-shadow: 0 2px 0 rgba(0,0,0,.45); } 70% { transform: translateY(-4px); } }
/* jelly: translucent wobble */
body.bv-jelly .btn { border-radius: 999px; } body.bv-jelly .btn::after { display: none; }
body.bv-jelly .btn.accent, body.bv-jelly .pcard .btn, body.bv-jelly .m-btn-main { background-image: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.55), transparent 45%) !important; box-shadow: inset 0 -4px 10px rgba(0,0,0,.12), 0 12px 24px color-mix(in srgb, var(--m-accent) 30%, transparent) !important; }
body.bv-jelly .btn:hover { animation: m-jelly .6s; }
@keyframes m-jelly { 25% { transform: scale(1.06, .94); } 50% { transform: scale(.96, 1.04); } 75% { transform: scale(1.02, .98); } }
/* drawer: inner panel slides out with a handle */
body.bv-drawer .btn { border-radius: 8px; } body.bv-drawer .btn::after { display: none; }
body.bv-drawer .btn::before { content: ""; position: absolute; inset: 4px; z-index: -1; border-radius: 5px; border: 1px solid rgba(255,255,255,.35); transition: transform .4s var(--m-ease); }
body.bv-drawer .btn:hover::before { transform: translateY(5px); } body.bv-drawer .btn:hover { box-shadow: 0 14px 24px rgba(0,0,0,.12), inset 0 -3px 0 rgba(0,0,0,.12) !important; }
body.bv-drawer .m-btn-ghost::before { border-color: color-mix(in srgb, currentColor 30%, transparent); }
@media (prefers-reduced-motion: reduce) { .m-spot, .m-hang, .m-plate, .m-drops i, .m-pebble, .m-furn, .m-artc { animation: none !important; } }
@media (max-width: 900px) { .m-room { clip-path: inset(0 -100vw -100vh -100vw); } }

/* ===== dropdown menus (theme.menus) ===== */
.m-dd { position: relative; display: inline-flex; }
body.m header.site nav .m-ddb { font: 650 14.5px/1 var(--m-body); color: var(--m-ink); background: none; border: 0; padding: 10px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .2s; }
.m-ddb::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
body.m header.site nav .m-ddb:hover, .m-dd:focus-within .m-ddb { background: color-mix(in srgb, var(--m-accent) 14%, transparent); }
.m-ddp { position: absolute; left: 0; top: 100%; z-index: 40; min-width: 250px; max-height: 70vh; overflow: auto; padding: 8px; display: grid; gap: 1px; background: #fff; border-radius: 14px; box-shadow: 0 24px 50px rgba(20,10,30,.22), 0 0 0 1px rgba(0,0,0,.05); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; }
.m-dd:hover .m-ddp, .m-dd:focus-within .m-ddp { opacity: 1; visibility: visible; transform: none; }
.m-dd:hover .m-ddb::after { transform: translateY(1px) rotate(225deg); }
body.m header.site nav .m-ddp a { display: block; border-radius: 9px; padding: 10px 12px; white-space: nowrap; }
body.m header.site nav .m-ddp a[aria-current] { background: var(--m-ink); color: #fff; }
.m-ddall { font-weight: 800 !important; color: var(--m-accent) !important; }
@media (max-width: 1024px) { .m-dd { display: block; width: 100%; } body.m header.site nav .m-ddb { padding: 12px 0 6px; opacity: .6; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; cursor: default; } .m-ddb::after { display: none; } .m-ddp { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0; min-width: 0; max-height: none; background: none; } }

/* ===== brand tiles ===== */
.m-brands { padding: clamp(40px, 6vw, 80px) 0; }
.m-brands h2 { margin: 0 0 8px; } .m-brands > .wrap > p { max-width: 62ch; }
.m-brandgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 24px; }
.m-btile { display: grid; gap: 4px; padding: 14px; background: #fff; color: var(--m-ink) !important; border-radius: var(--m-radius); box-shadow: 0 0 0 1px color-mix(in srgb, var(--m-ink) 10%, transparent); text-decoration: none; transition: transform .25s var(--m-ease), box-shadow .25s; }
.m-btile img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; margin-bottom: 8px; }
.m-btile b { font: 800 17px/1.2 var(--m-head); } .m-btile small { color: var(--m-body-ink); line-height: 1.35; }
.m-btile:hover { transform: translateY(-4px); box-shadow: 0 18px 34px color-mix(in srgb, var(--m-accent) 22%, transparent), 0 0 0 2px var(--m-accent); }
.m-brandsall { margin-top: 20px; font-weight: 700; }
@media (max-width: 560px) { .m-brandgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ===== hero rail: wardrobe pole with swinging hangers ===== */
body.hv-rail .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); background: radial-gradient(90% 90% at 80% 10%, color-mix(in srgb, var(--m-accent) 24%, transparent), transparent 60%), linear-gradient(150deg, var(--m-hero-a), var(--m-hero-b)); }
@media (max-width: 900px) { body.hv-rail .m-hero .m-inner { grid-template-columns: 1fr; } }
.m-wardrobe { position: relative; width: 100%; justify-self: stretch; height: min(500px, 62vh); }
.m-pole { position: absolute; left: -4%; right: -4%; top: 4%; height: 12px; border-radius: 6px; background: linear-gradient(180deg, #ffe6a8, var(--m-accent) 55%, #8a5a10); box-shadow: 0 8px 14px rgba(0,0,0,.4); z-index: 2; }
.m-gar { position: absolute; top: 4%; width: 25%; color: #f4e9d2; transform-origin: 50% 5px; animation: m-swing 5.5s ease-in-out infinite; transition: filter .25s; }
.m-hook { display: block; width: 62%; margin: -2px auto -6px; position: relative; z-index: 3; }
.m-garb { display: block; aspect-ratio: 3 / 4.4; padding: 8px; background: #fff; border-radius: 10px 10px 16px 16px; box-shadow: 0 26px 40px rgba(0,0,0,.45); overflow: hidden; }
.m-garb img { width: 100%; height: 100%; object-fit: contain; }
.m-gar.g1 { left: 0; animation-delay: -.4s; } .m-gar.g2 { left: 19%; width: 27%; top: 4%; animation-delay: -1.6s; z-index: 1; } .m-gar.g3 { left: 40%; animation-delay: -3s; } .m-gar.g4 { left: 59%; width: 27%; animation-delay: -2.2s; z-index: 1; } .m-gar.g5 { left: 77%; width: 23%; animation-delay: -4s; }
.m-gar:hover { animation-play-state: paused; filter: brightness(1.05); z-index: 4; }
@keyframes m-swing { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
.m-wcat a { background: color-mix(in srgb, #fff 9%, transparent); color: #fff !important; border: 1px solid color-mix(in srgb, #fff 22%, transparent); border-radius: 999px; backdrop-filter: blur(6px); } .m-wcat a:hover { background: var(--m-accent); color: var(--m-hero-a) !important; border-color: var(--m-accent); }
@media (max-width: 900px) { .m-wardrobe { height: 300px; } .m-gar { width: 30%; } .m-gar.g2 { left: 22%; width: 30%; } .m-gar.g3 { left: 46%; width: 30%; } .m-gar.g4 { left: 68%; width: 32%; } .m-gar.g5 { display: none; } }
@media (prefers-reduced-motion: reduce) { .m-gar { animation: none !important; } }

/* curtain: two stage curtains part on hover */
body.bv-curtain .btn { position: relative; overflow: hidden; isolation: isolate; border-radius: 10px; font-weight: 800; letter-spacing: .01em; } body.bv-curtain .btn::after { display: none; }
body.bv-curtain .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 6px, rgba(255,255,255,.08) 6px 12px); clip-path: inset(0 0 0 0); transition: clip-path .45s var(--m-ease); }
body.bv-curtain .btn:hover::before { clip-path: inset(0 50% 0 50%); }
body.bv-curtain .btn:hover { transform: translateY(-2px); }
.m-more { padding: clamp(28px, 4vw, 56px) 0; } .m-more h2 { margin: 0 0 18px; }

/* rail/curtain readability: amber accent is for fills, links on light backgrounds use accent2 */
body.bv-curtain .m-btn-main { color: var(--m-ink) !important; }
body.bv-curtain .btn::before { background: repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 6px, rgba(255,255,255,.05) 6px 12px); }
body.hv-rail .m-prose a:not(.btn), body.hv-rail .crumbs a, body.hv-rail main section:not(.m-hero):not(.m-page-hero):not(.m-cta) p a:not(.btn), body.hv-rail .m-brandsall a { color: var(--m-accent2); }
body.hv-rail header.site nav a.m-blog { color: var(--m-accent2); }
body.hv-rail .pcard .btn, body.hv-rail .m-cta .btn { color: var(--m-ink) !important; }
.m-wcat small { display: none; }
.m-ddp { max-height: 84vh; }

/* easel (Artist's Loft): canvas on an easel, paint dabs, brush stroke drawn in */
.m-easel { position: relative; width: 100%; justify-self: stretch; height: min(500px, 60vh); color: color-mix(in srgb, var(--m-accent2) 55%, #3a2a1c); }
.m-legs { position: absolute; left: 50%; top: 2%; width: 56%; height: 94%; transform: translateX(-50%); opacity: .5; }
.m-canvas { position: absolute; left: 50%; top: 5%; width: 54%; aspect-ratio: 4 / 5; transform: translateX(-50%) rotate(-1.5deg); background: #fff; padding: 14px; border-radius: 3px; box-shadow: 0 0 0 7px #efe6d6, 0 0 0 9px rgba(0,0,0,.08), 0 34px 40px -22px rgba(0,0,0,.5); animation: m-rise .9s var(--m-ease) both; transition: transform .35s var(--m-ease); z-index: 2; }
.m-canvas::after { content: ""; position: absolute; left: -14%; right: -14%; bottom: -26px; height: 13px; border-radius: 4px; background: currentColor; opacity: .8; }
.m-canvas:hover { transform: translateX(-50%) rotate(0deg) translateY(-5px); }
.m-dab { position: absolute; width: 23%; aspect-ratio: 1; background: #fff; padding: 10px; border-radius: 48% 52% 44% 56% / 55% 45% 55% 45%; box-shadow: 0 0 0 5px color-mix(in srgb, var(--m-accent) 55%, #fff), 0 22px 26px -16px rgba(0,0,0,.4); animation: m-rise .9s var(--m-ease) both; transition: transform .35s var(--m-ease); z-index: 3; }
.m-dab.d1 { left: 0; top: 12%; animation-delay: .15s; } .m-dab.d2 { right: 0; top: 34%; animation-delay: .3s; box-shadow: 0 0 0 5px color-mix(in srgb, var(--m-accent2) 50%, #fff), 0 22px 26px -16px rgba(0,0,0,.4); } .m-dab.d3 { left: 5%; bottom: 8%; width: 20%; animation-delay: .45s; box-shadow: 0 0 0 5px #e9c46a, 0 22px 26px -16px rgba(0,0,0,.4); }
.m-dab:hover { transform: scale(1.06) rotate(-4deg); }
.m-hero :is(.m-canvas, .m-dab, .m-tool) img { width: 100%; height: 100%; object-fit: contain; display: block; }
.m-stroke { position: absolute; left: 4%; right: 4%; bottom: 0; width: 92%; height: 46px; color: var(--m-accent); z-index: 1; }
.m-stroke path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: m-paint 1.5s .5s var(--m-ease) forwards; }
@keyframes m-paint { to { stroke-dashoffset: 0; } }
.m-ecat a { background: #fff; color: var(--m-ink) !important; border-radius: 14px 18px 12px 20px; box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--m-accent) 45%, #fff); } .m-ecat a:hover { box-shadow: inset 0 -40px 0 color-mix(in srgb, var(--m-accent) 22%, #fff); }

/* workbench (Saker): spinning saw blade, tool cards, tape measure */
.m-bench { position: relative; width: 100%; justify-self: stretch; height: min(500px, 60vh); }
.m-blade { position: absolute; right: -4%; top: -2%; width: 64%; color: color-mix(in srgb, var(--m-accent) 80%, #fff); opacity: .9; animation: m-spin 18s linear infinite; }
.m-tool { position: absolute; aspect-ratio: 1; background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 28px 30px -18px rgba(0,0,0,.55); animation: m-rise .9s var(--m-ease) both; transition: transform .35s var(--m-ease); }
.m-tool.t1 { left: 0; top: 10%; width: 44%; z-index: 2; } .m-tool.t2 { left: 38%; top: 40%; width: 34%; z-index: 3; animation-delay: .15s; } .m-tool.t3 { right: 2%; top: 8%; width: 28%; z-index: 2; animation-delay: .3s; }
.m-tool:hover { transform: translateY(-6px) rotate(-1deg); }
.m-tape { position: absolute; left: 0; right: 0; bottom: 2%; height: 40px; display: flex; justify-content: space-between; align-items: flex-start; padding: 0 12px; background: #ffc61a; border-radius: 4px 4px 4px 14px; box-shadow: 0 10px 18px -10px rgba(0,0,0,.5), inset 0 -3px 0 rgba(0,0,0,.12); transform-origin: left; animation: m-tape 1.1s .2s var(--m-ease) both; z-index: 4; }
.m-tape i { width: 2px; height: 11px; background: #1b1b1b; } .m-tape i.l { height: 20px; }
@keyframes m-tape { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.m-tcat a { background: #fff; color: var(--m-ink) !important; border-radius: 6px; border-left: 4px solid var(--m-accent); } .m-tcat a:hover { background: #fff7e0; }
@media (max-width: 900px) { :is(body.hv-easel, body.hv-workbench) .m-hero .m-inner { grid-template-columns: 1fr; } :is(.m-easel, .m-bench) { height: 360px; } .m-tape { height: 32px; } }
@media (prefers-reduced-motion: reduce) { .m-canvas, .m-dab, .m-stroke path, .m-blade, .m-tool, .m-tape { animation: none !important; stroke-dashoffset: 0; } }

/* brush: a paint stroke with a ragged edge sweeps across the button */
body.bv-brush .btn { position: relative; overflow: hidden; isolation: isolate; border-radius: 6px 14px 8px 16px; font-weight: 700; } body.bv-brush .btn::after { display: none; }
body.bv-brush .btn::before { content: ""; position: absolute; inset: -2px -12px -2px -2px; z-index: -1; background: color-mix(in srgb, var(--m-accent2) 70%, #000); clip-path: polygon(0 0, 92% 0, 96% 14%, 92% 30%, 98% 46%, 93% 62%, 97% 80%, 91% 100%, 0 100%); transform: translateX(-104%); transition: transform .45s var(--m-ease); }
body.bv-brush .btn:hover::before { transform: translateX(0); }
body.bv-brush .m-btn-ghost::before { background: color-mix(in srgb, var(--m-accent) 20%, transparent); }
body.bv-brush .m-btn-main:hover { color: #fff !important; }

/* tape: tape-measure ticks along the bottom slide on hover */
body.bv-tape .btn { position: relative; overflow: hidden; isolation: isolate; border-radius: 4px; font-weight: 800; letter-spacing: .02em; text-transform: none; } body.bv-tape .btn::after { display: none; }
body.bv-tape .btn::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; z-index: -1; background: repeating-linear-gradient(90deg, currentColor 0 1.5px, transparent 1.5px 7px), repeating-linear-gradient(90deg, currentColor 0 1.5px, transparent 1.5px 35px); background-size: 100% 5px, 100% 9px; background-repeat: repeat-x; background-position: 0 100%, 0 100%; opacity: .45; transition: background-position .6s var(--m-ease), height .3s var(--m-ease); }
body.bv-tape .btn:hover::before { background-position: 35px 100%, 35px 100%; height: 11px; }
body.bv-tape .btn:hover { transform: translateY(-2px); }
/* easel = light studio wall, workbench = dark shop; both stack categories under the hero */
:is(body.hv-easel, body.hv-workbench) .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); }
body.hv-easel .m-hero { color: var(--m-ink); background: radial-gradient(70% 80% at 78% 30%, #fff 0, transparent 70%), linear-gradient(180deg, var(--m-bg) 0 74%, color-mix(in srgb, var(--m-accent2) 14%, var(--m-soft)) 74% 100%); }
body.hv-easel .m-hero h1 { color: var(--m-ink) !important; } body.hv-easel .m-hero .sub { color: var(--m-body-ink); } body.hv-easel .m-hero .eyebrow { color: var(--m-accent2); }
body.hv-easel .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: color-mix(in srgb, var(--m-ink) 35%, transparent) !important; background: rgba(255,255,255,.6) !important; }
body.hv-easel .m-hero .m-chips span { background: #fff; border-color: color-mix(in srgb, var(--m-ink) 12%, transparent); color: var(--m-ink); }
body.hv-workbench .m-hero { background: radial-gradient(80% 90% at 85% 15%, color-mix(in srgb, var(--m-accent) 26%, transparent), transparent 60%), repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 22px), linear-gradient(160deg, var(--m-hero-a), var(--m-hero-b)); }
body.hv-workbench .m-hero .eyebrow { color: #ffc61a; }
/* easel fix: the entry animation resets transform, so center and tilt the canvas without it */
.m-canvas { left: 23%; transform: none; rotate: -1.5deg; } .m-canvas:hover { transform: translateY(-5px); rotate: 0deg; }

/* pool (Wet): deep water, expanding ripples, bottles bobbing on the surface */
body.hv-pool .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); background: radial-gradient(60% 70% at 72% 40%, color-mix(in srgb, var(--m-accent) 45%, transparent), transparent 70%), linear-gradient(170deg, var(--m-hero-a), var(--m-hero-b)); }
body.hv-pool .m-hero .eyebrow { color: #9fd8ff; }
@media (max-width: 900px) { body.hv-pool .m-hero .m-inner { grid-template-columns: 1fr; } }
.m-lagoon { position: relative; width: 100%; justify-self: stretch; height: min(500px, 60vh); }
.m-ripples { position: absolute; left: 50%; top: 52%; width: 0; height: 0; }
.m-ripples i { position: absolute; left: 0; top: 0; width: 520px; height: 200px; margin: -100px 0 0 -260px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); transform: scale(.1); opacity: 0; animation: m-ripple 6s ease-out infinite; }
.m-ripples i:nth-child(2) { animation-delay: 1.5s; } .m-ripples i:nth-child(3) { animation-delay: 3s; } .m-ripples i:nth-child(4) { animation-delay: 4.5s; }
@keyframes m-ripple { 0% { transform: scale(.1); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
.m-bubbles i { position: absolute; bottom: 8%; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.15) 60%); animation: m-bubble 7s linear infinite; opacity: 0; }
.m-bubbles i:nth-child(1) { left: 12%; } .m-bubbles i:nth-child(2) { left: 26%; width: 6px; height: 6px; animation-delay: 1s; } .m-bubbles i:nth-child(3) { left: 40%; animation-delay: 2.4s; } .m-bubbles i:nth-child(4) { left: 55%; width: 14px; height: 14px; animation-delay: 3.1s; } .m-bubbles i:nth-child(5) { left: 68%; animation-delay: .6s; } .m-bubbles i:nth-child(6) { left: 80%; width: 7px; height: 7px; animation-delay: 4.2s; } .m-bubbles i:nth-child(7) { left: 90%; animation-delay: 5s; } .m-bubbles i:nth-child(8) { left: 33%; width: 5px; height: 5px; animation-delay: 5.6s; }
@keyframes m-bubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-380px); opacity: 0; } }
.m-buoy { position: absolute; aspect-ratio: 3 / 4; background: #fff; border-radius: 22px; padding: 12px; box-shadow: 0 0 0 6px rgba(255,255,255,.18), 0 30px 34px -20px rgba(0,20,50,.6); animation: m-rise .9s var(--m-ease) both, m-bob 5s ease-in-out 1s infinite; transition: box-shadow .3s; }
.m-buoy.b1 { left: 4%; top: 12%; width: 30%; } .m-buoy.b2 { left: 36%; top: 22%; width: 32%; z-index: 2; animation-delay: .15s, 1.8s; } .m-buoy.b3 { right: 2%; top: 8%; width: 27%; animation-delay: .3s, 2.6s; }
.m-buoy:hover { box-shadow: 0 0 0 10px rgba(255,255,255,.3), 0 30px 34px -20px rgba(0,20,50,.6); }
@keyframes m-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.m-hero .m-buoy img { width: 100%; height: 100%; object-fit: contain; display: block; }
.m-wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 44px; color: rgba(255,255,255,.12); }
.m-lcat a { background: rgba(255,255,255,.92); color: var(--m-ink) !important; border-radius: 999px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--m-accent) 40%, transparent); } .m-lcat a:hover { background: #fff; box-shadow: inset 0 0 0 2px var(--m-accent); }
@media (max-width: 900px) { .m-lagoon { height: 360px; } .m-ripples i { width: 340px; height: 140px; margin: -70px 0 0 -170px; } }
@media (prefers-reduced-motion: reduce) { .m-ripples i, .m-bubbles i, .m-buoy { animation: none !important; } .m-ripples i:first-child { opacity: .5; transform: scale(.7); } }

/* ripple: a soft wave expands from the center of the button on hover */
body.bv-ripple .btn { position: relative; overflow: hidden; isolation: isolate; border-radius: 999px; font-weight: 700; } body.bv-ripple .btn::after { display: none; }
body.bv-ripple .btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.28) 0 30%, transparent 31% 42%, rgba(255,255,255,.18) 43% 52%, transparent 53%); transform: translate(-50%, -50%) scale(0); transition: transform .7s var(--m-ease); }
body.bv-ripple .btn:hover::before { transform: translate(-50%, -50%) scale(1); }
body.bv-ripple .m-btn-ghost::before { background: radial-gradient(circle, color-mix(in srgb, var(--m-accent) 22%, transparent) 0 30%, transparent 31% 42%, color-mix(in srgb, var(--m-accent) 14%, transparent) 43% 52%, transparent 53%); }
body.bv-ripple .btn:hover { transform: translateY(-2px); }

/* skein (Bernat): a yarn ball unwinds a strand across product cards */
body.hv-skein .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); color: var(--m-ink); background: radial-gradient(55% 60% at 75% 45%, color-mix(in srgb, var(--m-accent) 16%, #fff), transparent 70%), repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--m-accent) 5%, transparent) 14px 16px), var(--m-bg); }
body.hv-skein .m-hero h1 { color: var(--m-ink) !important; } body.hv-skein .m-hero .sub { color: var(--m-body-ink); } body.hv-skein .m-hero .eyebrow { color: var(--m-accent2); }
body.hv-skein .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: color-mix(in srgb, var(--m-ink) 35%, transparent) !important; background: rgba(255,255,255,.6) !important; }
body.hv-skein .m-hero .m-chips span { background: #fff; border-color: color-mix(in srgb, var(--m-ink) 12%, transparent); color: var(--m-ink); }
.m-skein { position: relative; width: 100%; justify-self: stretch; height: min(500px, 60vh); }
.m-strand { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-strand path { fill: none; stroke: var(--m-accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: m-unwind 2.2s .3s var(--m-ease) forwards; }
@keyframes m-unwind { to { stroke-dashoffset: 0; } }
.m-ball { position: absolute; left: 0; bottom: 4%; width: 26%; color: var(--m-accent); filter: drop-shadow(0 18px 18px rgba(0,0,0,.18)); animation: m-roll 2.2s .3s var(--m-ease) both; }
@keyframes m-roll { from { transform: translateX(40%) rotate(220deg); } to { transform: none; } }
.m-yarn { position: absolute; aspect-ratio: 1; background: #fff; border-radius: 50%; padding: 18px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--m-accent) 25%, #fff), 0 26px 30px -18px rgba(60,20,40,.45); animation: m-rise .9s var(--m-ease) both; transition: transform .35s var(--m-ease); }
.m-yarn.y1 { left: 26%; top: 14%; width: 30%; animation-delay: .5s; } .m-yarn.y2 { left: 58%; top: 40%; width: 26%; animation-delay: .9s; } .m-yarn.y3 { right: 0; top: 0; width: 22%; animation-delay: 1.3s; }
.m-yarn:hover { transform: rotate(-6deg) scale(1.04); }
.m-hero :is(.m-yarn, .m-noteimg) img { width: 100%; height: 100%; object-fit: contain; display: block; }
.m-ycat a { background: #fff; color: var(--m-ink) !important; border-radius: 999px; border: 2px dashed color-mix(in srgb, var(--m-accent) 55%, #fff); } .m-ycat a:hover { border-style: solid; border-color: var(--m-accent); }

/* notebook (Madisi): lined paper, taped product cards, pencil scribble */
body.hv-notebook .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); color: var(--m-ink); background: linear-gradient(90deg, transparent 0 56px, rgba(220,38,38,.35) 56px 58px, transparent 58px), repeating-linear-gradient(180deg, #fffdf6 0 31px, rgba(43,89,195,.18) 31px 32px); }
body.hv-notebook .m-hero h1 { color: var(--m-ink) !important; } body.hv-notebook .m-hero .sub { color: var(--m-body-ink); } body.hv-notebook .m-hero .eyebrow { color: var(--m-accent2); }
body.hv-notebook .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: color-mix(in srgb, var(--m-ink) 35%, transparent) !important; background: rgba(255,255,255,.7) !important; }
body.hv-notebook .m-hero .m-chips span { background: #fff; border-color: color-mix(in srgb, var(--m-ink) 12%, transparent); color: var(--m-ink); }
.m-paper { position: relative; width: 100%; justify-self: stretch; height: min(500px, 60vh); }
.m-note { position: absolute; background: #fff; padding: 14px; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 24px 26px -18px rgba(0,0,0,.35); animation: m-rise .9s var(--m-ease) both; transition: rotate .35s var(--m-ease); }
.m-note.n1 { left: 2%; top: 8%; width: 40%; rotate: -3deg; } .m-note.n2 { left: 40%; top: 30%; width: 34%; rotate: 2.5deg; z-index: 2; animation-delay: .15s; } .m-note.n3 { right: 0; top: 2%; width: 28%; rotate: -1.5deg; animation-delay: .3s; }
.m-note:hover { rotate: 0deg; }
.m-noteimg { display: block; aspect-ratio: 1; }
.m-washi { position: absolute; left: 50%; top: -12px; width: 46%; height: 22px; translate: -50% 0; rotate: -4deg; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--m-accent) 55%, #fff) 0 8px, color-mix(in srgb, var(--m-accent) 35%, #fff) 8px 16px); opacity: .85; z-index: 1; }
.m-note.n2 .m-washi { background: repeating-linear-gradient(45deg, #ffd43b 0 8px, #ffe58a 8px 16px); rotate: 5deg; }
.m-scribble { position: absolute; left: 6%; bottom: 2%; width: 60%; height: 60px; }
.m-scribble path { fill: none; stroke: #3b3b3b; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: m-unwind 1.6s .6s ease forwards; }
.m-pncat a { background: #fff; color: var(--m-ink) !important; border-radius: 4px; box-shadow: 3px 3px 0 color-mix(in srgb, var(--m-accent) 70%, #000); } .m-pncat a:hover { box-shadow: 1px 1px 0 color-mix(in srgb, var(--m-accent) 70%, #000); translate: 2px 2px; }
@media (max-width: 900px) { :is(body.hv-skein, body.hv-notebook) .m-hero .m-inner { grid-template-columns: 1fr; } :is(.m-skein, .m-paper) { height: 360px; } body.hv-notebook .m-hero { background: repeating-linear-gradient(180deg, #fffdf6 0 31px, rgba(43,89,195,.18) 31px 32px); } }
@media (prefers-reduced-motion: reduce) { .m-strand path, .m-scribble path { animation: none !important; stroke-dashoffset: 0; } .m-ball, .m-yarn, .m-note { animation: none !important; } }

/* knit: a chevron knit-stitch pattern fills the button on hover */
body.bv-knit .btn { position: relative; overflow: hidden; isolation: isolate; border-radius: 14px; font-weight: 700; } body.bv-knit .btn::after { display: none; }
body.bv-knit .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, rgba(255,255,255,.22) 25%, transparent 25%) -8px 0 / 16px 16px, linear-gradient(225deg, rgba(255,255,255,.22) 25%, transparent 25%) -8px 0 / 16px 16px; opacity: 0; transform: translateY(100%); transition: transform .45s var(--m-ease), opacity .3s; }
body.bv-knit .btn:hover::before { opacity: 1; transform: none; }
body.bv-knit .m-btn-ghost::before { background: linear-gradient(135deg, color-mix(in srgb, var(--m-accent) 18%, transparent) 25%, transparent 25%) -8px 0 / 16px 16px, linear-gradient(225deg, color-mix(in srgb, var(--m-accent) 18%, transparent) 25%, transparent 25%) -8px 0 / 16px 16px; }

/* pencil: sharpened tip on the right, graphite line draws underneath on hover */
body.bv-pencil .btn { position: relative; isolation: isolate; border-radius: 4px 0 0 4px; padding-right: 2.4em !important; clip-path: polygon(0 0, calc(100% - 1.4em) 0, 100% 50%, calc(100% - 1.4em) 100%, 0 100%); font-weight: 800; } body.bv-pencil .btn::after { display: none; }
body.bv-pencil .btn::before { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(100% - 1.4em); background: rgba(0,0,0,.35); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--m-ease); }
body.bv-pencil .btn:hover::before { transform: scaleX(1); } body.bv-pencil .btn:hover { transform: translateX(3px); }
body.bv-pencil .m-btn-ghost { clip-path: none; border-radius: 4px; padding-right: 1.4em !important; }

/* ===== batch 09.11.2026: floorplan/hinge (FDW), atelier/ribbon (Agnes Orinda), pipeline/valve (Duda Energy), nightdrive/beam (FieryRed) ===== */
:is(body.hv-floorplan, body.hv-atelier, body.hv-pipeline, body.hv-nightdrive) .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); }
:is(body.hv-floorplan, body.hv-atelier, body.hv-pipeline, body.hv-nightdrive) .m-hero .m-copy > * { animation: m-rise .8s var(--m-ease) both; }
:is(body.hv-floorplan, body.hv-atelier, body.hv-pipeline, body.hv-nightdrive) .m-hero .m-copy > :nth-child(3) { animation-delay: .08s; }
:is(body.hv-floorplan, body.hv-atelier, body.hv-pipeline, body.hv-nightdrive) .m-hero .m-copy > :nth-child(4) { animation-delay: .16s; }
:is(body.hv-floorplan, body.hv-atelier, body.hv-pipeline, body.hv-nightdrive) .m-hero .m-copy > :nth-child(5) { animation-delay: .24s; }
:is(body.hv-floorplan, body.hv-atelier, body.hv-pipeline, body.hv-nightdrive) .m-hero h1 { text-wrap: balance; max-width: 19ch; }
:is(body.hv-floorplan, body.hv-atelier) .m-hero h1 { color: var(--m-ink) !important; } :is(body.hv-floorplan, body.hv-atelier) .m-hero .sub { color: var(--m-body-ink); } :is(body.hv-floorplan, body.hv-atelier) .m-hero .eyebrow { color: var(--m-accent-2); }
:is(body.hv-floorplan, body.hv-atelier) .m-hero .m-chips span { background: #fff; border-color: color-mix(in srgb, var(--m-ink) 14%, transparent); color: var(--m-ink); backdrop-filter: none; }
:is(body.hv-floorplan, body.hv-atelier) .m-hero .bgcredit, :is(body.hv-floorplan, body.hv-atelier) .m-hero .bgcredit a { color: var(--m-body-ink); }
.m-guides .m-guidesall { margin: 20px 0 0; font-weight: 700; }
@media (max-width: 900px) { :is(body.hv-floorplan, body.hv-atelier, body.hv-pipeline, body.hv-nightdrive) .m-hero { min-height: 0; } :is(body.hv-floorplan, body.hv-atelier, body.hv-pipeline, body.hv-nightdrive) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr); } }

/* floorplan (FDW): pencil-drawn top-down plan on graph paper, each room is a category with a real photo inside */
body.hv-floorplan .m-hero { color: var(--m-ink); background: linear-gradient(color-mix(in srgb, var(--m-accent) 7%, transparent) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, color-mix(in srgb, var(--m-accent) 7%, transparent) 1px, transparent 1px) 0 0 / 28px 28px, var(--m-bg); }
body.hv-floorplan .m-hero .m-inner { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4vw, 64px); }
body.hv-floorplan .m-hero h1 { font-size: clamp(36px, 4.4vw, 64px) !important; font-weight: 800; }
.m-plan { position: relative; display: block; width: 100%; aspect-ratio: 112 / 100; margin: 26px 0 8px; }
.m-pdim { position: absolute; left: 0; right: 0; top: -24px; display: flex; align-items: center; gap: 10px; font: 700 11px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: var(--m-accent-2); white-space: nowrap; }
.m-pdim::before, .m-pdim::after { content: ""; flex: 1; height: 7px; border-inline: 1.5px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; }
.m-rm { position: absolute; display: block; text-decoration: none; color: var(--m-ink) !important; padding: 1.3%; --fl: #e7d7c1; background: repeating-linear-gradient(90deg, var(--fl) 0 9%, color-mix(in srgb, var(--fl) 86%, #7a5a33) 9% 9.4%); animation: m-roomin .7s var(--m-ease) both; transition: background .3s; }
.rm-bed { left: 0; top: 0; width: 58.93%; height: 40%; } .rm-office { left: 58.93%; top: 0; width: 41.07%; height: 40%; animation-delay: .12s; }
.rm-living { left: 0; top: 40%; width: 62.5%; height: 34%; animation-delay: .24s; } .rm-pets { left: 62.5%; top: 40%; width: 37.5%; height: 34%; animation-delay: .36s; --fl: #d7dfe3; }
.rm-patio { left: 0; top: 74%; width: 100%; height: 26%; animation-delay: .48s; --fl: #dfe3d6; }
.m-rmph { position: absolute; inset: 5% 3.5%; overflow: hidden; border-radius: 3px; background: #fff; }
.m-rmph img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .7s var(--m-ease); }
.rm-pets .m-rmph img { object-position: 60% 80%; } .rm-patio .m-rmph img { object-position: 50% 62%; } .rm-office .m-rmph img { object-position: 50% 70%; }
.m-rm:hover .m-rmph img, .m-rm:focus-visible .m-rmph img { transform: scale(1.07); }
.m-rmtag { position: absolute; left: 7%; bottom: 8%; max-width: 86%; padding: 8px 11px; background: rgba(255,255,255,.96); border-left: 3px solid var(--m-accent-2); box-shadow: 0 6px 18px rgba(27,47,63,.2); transition: transform .35s var(--m-ease), background .3s; }
.rm-patio .m-rmtag { left: 4%; bottom: 12%; }
.m-rmtag small { display: block; font: 800 10px/1 var(--m-body); letter-spacing: .13em; text-transform: uppercase; color: #7f4b1f; }
.m-rmtag b { display: block; margin-top: 4px; font: 800 14.5px/1.15 var(--m-head); color: var(--m-ink); } .m-rmtag em { display: block; margin-top: 3px; font: 600 11.5px/1 var(--m-body); font-style: normal; color: var(--m-body-ink); }
.m-rm:hover .m-rmtag { transform: translateY(-4px); }
.m-rm:focus-visible { outline: 3px solid var(--m-accent-2); outline-offset: -3px; }
.m-pwalls { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; }
.m-pwalls .w { stroke: var(--m-ink); stroke-width: 1.1; stroke-linecap: square; stroke-dasharray: 100; stroke-dashoffset: 100; animation: m-unwind 1.9s .1s ease-out forwards; }
.m-pwalls .d { stroke: var(--m-ink); stroke-width: .3; stroke-dasharray: 1 .8; opacity: 0; animation: m-plfade .6s 1.5s forwards; }
.m-pwalls .p { stroke: var(--m-accent-2); stroke-width: .55; stroke-dasharray: 1.6 1.2; }
@keyframes m-plfade { to { opacity: 1; } } @keyframes m-roomin { from { opacity: 0; } to { opacity: 1; } }
.m-pnorth { position: absolute; right: 8px; bottom: 8px; width: 36px; height: 36px; fill: none; stroke: var(--m-ink); stroke-width: 1.6; background: rgba(255,255,255,.85); border-radius: 50%; } .m-pnorth path { fill: var(--m-accent-2); stroke: none; transform-origin: 20px 20px; animation: m-compass 7s ease-in-out infinite; }
@keyframes m-compass { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
body.hv-floorplan .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: var(--m-ink) !important; }
body.hv-floorplan header.site { background: color-mix(in srgb, #fff 90%, transparent); }
body.hv-floorplan main section > .wrap > h2::after { content: ""; display: block; width: min(220px, 60%); height: 9px; margin-top: 10px; border-inline: 2px solid var(--m-accent-2); background: linear-gradient(var(--m-accent-2), var(--m-accent-2)) center / 100% 2px no-repeat; }
body.hv-floorplan .pcard { border-radius: 4px; border: 1.5px solid color-mix(in srgb, var(--m-ink) 16%, transparent); box-shadow: none; } body.hv-floorplan .pcard:hover { border-color: var(--m-accent-2); box-shadow: 8px 8px 0 color-mix(in srgb, var(--m-accent-2) 18%, transparent); }
body.hv-floorplan .m-acard { border-radius: 4px; box-shadow: none; border: 1.5px solid color-mix(in srgb, var(--m-ink) 16%, transparent); } body.hv-floorplan .m-acard:hover { border-color: var(--m-accent-2); box-shadow: 8px 8px 0 color-mix(in srgb, var(--m-accent-2) 18%, transparent); }
body.hv-floorplan .m-cta .m-band { background: linear-gradient(120deg, var(--m-hero-a), var(--m-hero-b)); border-radius: 6px; }
body.hv-floorplan .m-page-hero .eyebrow { color: #f0cfa5; }
body.hv-floorplan footer.site { background: var(--m-hero-a); color: #c8d4dc; border: 0; } body.hv-floorplan footer.site nav a { color: #fff; }
@media (max-width: 900px) { .m-plan { aspect-ratio: 112 / 128; margin-top: 34px; } .m-rmtag { padding: 5px 7px; } .m-rmtag b { font-size: 12.5px; } .m-rmtag em { display: none; } .m-rmtag small { font-size: 9px; } .m-pnorth { width: 28px; height: 28px; } }
@media (prefers-reduced-motion: reduce) { .m-pwalls .w { stroke-dashoffset: 0; } .m-pwalls .d { opacity: 1; } }

/* hinge: two divider panels fold open on their hinges, the wood behind shows through */
body.bv-hinge .btn { --p: transparent; --r: transparent; border-radius: 3px; background: var(--r) !important; box-shadow: none !important; font-weight: 700; color: var(--bt, inherit); }
body.bv-hinge :is(.btn.accent, .pcard .btn, .m-btn-main) { --p: var(--m-accent); --r: var(--m-accent-2); --bt: #fff; }
body.bv-hinge .btn::before, body.bv-hinge .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: auto; right: auto; width: 50%; inset-block: 0; z-index: -1; background: var(--p); transition: transform .5s var(--m-ease); }
body.bv-hinge .btn::before { left: 0; transform-origin: left center; box-shadow: inset -1px 0 0 rgba(255,255,255,.12); }
body.bv-hinge .btn::after { right: 0; transform: none; transform-origin: right center; box-shadow: inset 1px 0 0 rgba(0,0,0,.1); }
body.bv-hinge .btn:hover { transform: translateY(-2px); color: var(--bt, inherit); }
body.bv-hinge .btn:hover::before { transform: perspective(260px) rotateY(-96deg); } body.bv-hinge .btn:hover::after { transform: perspective(260px) rotateY(96deg); }
body.bv-hinge :is(.m-btn-ghost, .btn.ghost, .btn.secondary) { --p: var(--m-ink); --r: transparent; }
body.bv-hinge :is(.m-btn-ghost, .btn.ghost, .btn.secondary)::before { transform: perspective(260px) rotateY(-96deg); } body.bv-hinge :is(.m-btn-ghost, .btn.ghost, .btn.secondary)::after { transform: perspective(260px) rotateY(96deg); }
body.bv-hinge :is(.m-btn-ghost, .btn.ghost, .btn.secondary):hover { background: transparent !important; color: #fff !important; }
body.bv-hinge :is(.m-btn-ghost, .btn.ghost, .btn.secondary):hover::before, body.bv-hinge :is(.m-btn-ghost, .btn.ghost, .btn.secondary):hover::after { transform: none; }
body.bv-hinge :is(.m-page-hero, .m-cta) .m-btn-ghost { --p: #fff; } body.bv-hinge :is(.m-page-hero, .m-cta) .m-btn-ghost:hover { color: var(--m-ink) !important; }
body.bv-hinge .m-cta .btn.m-white { --p: #fff; --r: #f0d8b8; --bt: var(--m-ink); } body.bv-hinge .m-cta .btn.m-white:hover { color: var(--m-ink); }

/* atelier (Agnes Orinda): editorial spread on cream, tape measure along the model, pinking-shear fabric swatches, contents-style index */
body.hv-atelier .m-hero { color: var(--m-ink); background: radial-gradient(60% 80% at 82% 30%, var(--m-soft), transparent 70%), var(--m-bg); }
body.hv-atelier .m-hero .m-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: 28px; }
body.hv-atelier .m-hero h1 { font-size: clamp(42px, 5.6vw, 84px) !important; line-height: 1 !important; letter-spacing: -.01em; }
body.hv-atelier .m-hero .eyebrow { letter-spacing: .24em; font-size: 11.5px; }
.m-sprd { position: relative; justify-self: center; width: min(600px, 100%); height: min(620px, 76vh); }
.m-issue { position: absolute; left: 0; top: 2%; writing-mode: vertical-rl; rotate: 180deg; font: 400 italic 15px/1 Georgia, serif; letter-spacing: .08em; color: var(--m-accent); }
.m-amodel { position: absolute; left: 11%; top: 0; bottom: 0; width: 60%; margin: 0; overflow: hidden; background: #fff; box-shadow: 0 34px 70px rgba(51,22,42,.2); animation: m-curtainup 1.1s var(--m-ease) both; }
.m-amodel img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border-radius: 0; animation: m-kenburns 26s ease-in-out infinite alternate; }
@keyframes m-curtainup { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.m-mtape { position: absolute; left: 3.6%; top: -4%; bottom: -4%; width: 34px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(51,22,42,.55) 9px 10px), repeating-linear-gradient(180deg, transparent 0 49px, var(--m-ink) 49px 51px), #f3d27a; background-size: 40% 100%, 70% 100%, 100% 100%; background-repeat: no-repeat; box-shadow: 0 8px 18px rgba(51,22,42,.28); rotate: 1.4deg; transform-origin: top; animation: m-tapedrop 1.5s .25s var(--m-ease) both; }
.m-mtape b { font: 800 11px/1 var(--m-body); padding: 3px 2px; background: var(--m-accent); color: #fff; border-radius: 2px; margin-left: 8px; }
@keyframes m-tapedrop { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(-20px); } }
.m-alook { position: absolute; display: block; right: 0; width: 32%; aspect-ratio: 3 / 4; padding: 7px; background: #fff; box-shadow: 0 22px 44px rgba(51,22,42,.2); animation: m-rise .9s .3s var(--m-ease) both; transition: rotate .4s var(--m-ease), translate .4s var(--m-ease); }
.m-alook img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border-radius: 0; }
.m-alook.l1 { top: 4%; rotate: 2.5deg; } .m-alook.l2 { top: 38%; right: 3%; rotate: -2deg; animation-delay: .45s; }
.m-alook:hover { rotate: 0deg; translate: 0 -5px; }
.m-fabs { position: absolute; right: 2%; bottom: 0; width: 42%; height: 26%; }
.m-fab { position: absolute; display: block; width: 44%; aspect-ratio: 1; animation: m-rise .9s .55s var(--m-ease) both; filter: drop-shadow(0 8px 12px rgba(51,22,42,.28)); --z: conic-gradient(from -45deg at 50% 8px, #000 90deg, transparent 0) 0 0 / 16px 8px; }
.m-fab img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; clip-path: polygon(0 3%, 6% 0, 12% 3%, 18% 0, 24% 3%, 30% 0, 36% 3%, 42% 0, 48% 3%, 54% 0, 60% 3%, 66% 0, 72% 3%, 78% 0, 84% 3%, 90% 0, 96% 3%, 100% 0, 97% 6%, 100% 12%, 97% 18%, 100% 24%, 97% 30%, 100% 36%, 97% 42%, 100% 48%, 97% 54%, 100% 60%, 97% 66%, 100% 72%, 97% 78%, 100% 84%, 97% 90%, 100% 96%, 96% 97%, 90% 100%, 84% 97%, 78% 100%, 72% 97%, 66% 100%, 60% 97%, 54% 100%, 48% 97%, 42% 100%, 36% 97%, 30% 100%, 24% 97%, 18% 100%, 12% 97%, 6% 100%, 0 97%, 3% 90%, 0 84%, 3% 78%, 0 72%, 3% 66%, 0 60%, 3% 54%, 0 48%, 3% 42%, 0 36%, 3% 30%, 0 24%, 3% 18%, 0 12%, 3% 6%); }
.m-fab.f1 { left: 0; top: 10%; rotate: -8deg; } .m-fab.f2 { left: 30%; top: 26%; rotate: 5deg; z-index: 1; animation-delay: .65s; } .m-fab.f3 { right: 0; top: 2%; rotate: 11deg; animation-delay: .75s; }
.m-aidx { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: ai; border-top: 1px solid color-mix(in srgb, var(--m-ink) 22%, transparent); margin-inline: clamp(18px, 4vw, 72px); padding: 0 0 22px; }
.m-aidx a { counter-increment: ai; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 12px 6px 0; color: var(--m-ink) !important; position: relative; } .m-aidx a:hover { transform: none; }
.m-aidx a::before { content: "0" counter(ai); font: 700 11px/1 var(--m-body); letter-spacing: .12em; color: var(--m-accent); }
.m-aidx a::after { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--m-accent); transition: width .45s var(--m-ease); } .m-aidx a:hover::after { width: 100%; }
.m-aidx b { font: 400 21px/1.1 var(--m-head); } .m-aidx small { background: none; padding: 0; font-weight: 600; color: var(--m-body-ink); }
body.hv-atelier .m-hero .m-btn-ghost { color: var(--m-ink) !important; }
body.hv-atelier .pcard h3, body.hv-atelier .m-acard h3 { font-size: 20px; line-height: 1.2; letter-spacing: 0; }
body.hv-atelier .pcard { border-radius: 2px; box-shadow: none; border: 1px solid color-mix(in srgb, var(--m-ink) 12%, transparent); } body.hv-atelier .pcard:hover { box-shadow: 0 20px 44px rgba(51,22,42,.14); }
body.hv-atelier .m-acard { border-radius: 2px; box-shadow: none; }
body.hv-atelier :is(.m-rank .m-num, .m-vs .mid, .m-faq summary, .m-qp b) { font-weight: 400; } body.hv-atelier .m-faq summary { font-size: 19px; } body.hv-atelier .m-acard .m-art, body.hv-atelier .m-rank { border-radius: 2px; }
body.hv-atelier main section > .wrap > h2 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -.005em; }
body.hv-atelier main section > .wrap > h2::after { content: ""; display: block; width: 120px; height: 12px; margin-top: 8px; background: repeating-linear-gradient(90deg, var(--m-ink) 0 1px, transparent 1px 10px) 0 0 / 100% 6px no-repeat, #f3d27a; }
body.hv-atelier .m-page-hero .eyebrow { color: #f3d9c9; } body.hv-atelier .m-page-hero .m-bg { opacity: .3; }
body.hv-atelier footer.site { background: var(--m-hero-a); color: #e3cfd9; border: 0; } body.hv-atelier footer.site nav a { color: #fff; }
@media (max-width: 900px) { .m-sprd { width: min(460px, 100%); height: 500px; margin-top: 6px; } .m-aidx { grid-template-columns: repeat(2, minmax(0, 1fr)); } .m-aidx b { font-size: 19px; } .m-mtape { width: 28px; left: 1%; } .m-issue { display: none; } .m-amodel { left: 8%; width: 62%; } .m-alook { width: 34%; } .m-fabs { width: 46%; height: 22%; } }
@media (prefers-reduced-motion: reduce) { .m-mtape, .m-amodel, .m-alook, .m-fab { clip-path: none; } }

/* ribbon: swallow-tail end, rose satin slides across, the notch deepens */
body.bv-ribbon .btn { border-radius: 0; padding: 15px 34px 15px 24px; letter-spacing: .02em; box-shadow: none !important; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); transition: clip-path .4s var(--m-ease), transform .25s var(--m-ease), color .2s; }
body.bv-ribbon .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, #A63D6C 0, #C4587F 55%, #A63D6C 100%); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--m-ease); }
body.bv-ribbon .btn:hover::before { transform: scaleX(1); }
body.bv-ribbon .btn::after { background: linear-gradient(110deg, transparent 36%, rgba(255,255,255,.28) 50%, transparent 64%); }
body.bv-ribbon .btn:hover { clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 50%, 100% 100%, 0 100%); transform: translateX(3px); }
body.bv-ribbon :is(.m-btn-ghost, .btn.ghost, .btn.secondary) { background: color-mix(in srgb, var(--m-accent) 11%, transparent) !important; border-color: transparent !important; color: var(--m-ink) !important; }
body.bv-ribbon :is(.m-btn-ghost, .btn.ghost, .btn.secondary):hover { color: #fff !important; }
body.bv-ribbon :is(.m-page-hero, .m-cta) .m-btn-ghost { background: rgba(255,255,255,.16) !important; color: #fff !important; }
body.bv-ribbon .m-cta .btn.m-white:hover { color: #fff; } body.bv-ribbon .m-cta .btn.m-white { background: #fff; color: var(--m-ink); }

/* pipeline (Duda Energy): SVG line, tubing, cam lock, strainer, real product cut-outs, pail filling up */
body.hv-pipeline .m-hero { background: radial-gradient(70% 90% at 80% 40%, color-mix(in srgb, var(--m-accent-2) 42%, transparent), transparent 70%), repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px), linear-gradient(160deg, var(--m-hero-a), var(--m-hero-b)); }
body.hv-pipeline .m-hero .m-inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); padding-bottom: 24px; gap: clamp(20px, 3vw, 56px); }
body.hv-pipeline .m-hero h1 { font-size: clamp(38px, 5vw, 72px) !important; line-height: 1.04 !important; letter-spacing: 0; text-transform: uppercase; font-weight: 600; }
body.hv-pipeline .m-hero .eyebrow { font-family: "IBM Plex Mono", ui-monospace, monospace; color: #f0b869; letter-spacing: .1em; font-weight: 400; }
body.hv-pipeline .m-hero .m-chips span { border-radius: 2px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 400; font-size: 12px; background: rgba(255,255,255,.07); }
.m-line { position: relative; width: 100%; max-width: 700px; justify-self: end; aspect-ratio: 640 / 520; }
.m-lsvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.m-hose { stroke: rgba(226,242,246,.28); stroke-width: 22; stroke-linecap: round; }
.m-steel { stroke-linecap: butt; } .m-steel.a { stroke: #38474e; stroke-width: 32; } .m-steel.b { stroke: #87959c; stroke-width: 26; } .m-steel.c { stroke: #0c2329; stroke-width: 16; }
.m-flow { stroke: #2fc0d1; stroke-width: 11; stroke-linecap: round; stroke-dasharray: 22 15; animation: m-flow 1.5s linear infinite; }
.m-flow.f2 { stroke: #a9eef6; stroke-width: 3; stroke-dasharray: 8 29; }
@keyframes m-flow { to { stroke-dashoffset: -37; } }
.m-flange rect { fill: #a7b4ba; stroke: #38474e; stroke-width: 1.5; }
.m-gaugep rect { fill: #87959c; } .m-gaugep circle { fill: #e9eff1; stroke: #38474e; stroke-width: 4; }
.m-needle { stroke: #c9382b; stroke-width: 3; stroke-linecap: round; transform-origin: 420px 42px; animation: m-needle 3.4s ease-in-out infinite; }
@keyframes m-needle { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(52deg); } 70% { transform: rotate(38deg); } }
.m-stem { fill: #87959c; }
.m-wheel { transform-origin: 138px 44px; animation: m-wheel 9s ease-in-out infinite; } .m-wheel circle { stroke: #e39a2d; stroke-width: 7; } .m-wheel path { stroke: #e39a2d; stroke-width: 4; }
@keyframes m-wheel { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(150deg); } }
.m-rim { stroke: #c9d4d9; stroke-width: 9; stroke-linecap: round; } .m-cone { fill: url(#m-mesh); stroke: #c9d4d9; stroke-width: 3; stroke-linejoin: round; }
.m-stream { stroke: #2fc0d1; stroke-width: 9; stroke-linecap: round; opacity: .85; stroke-dasharray: 12 5; animation: m-flow2 .6s linear infinite; }
@keyframes m-flow2 { to { stroke-dashoffset: -17; } }
.m-drop { fill: #5fd6e4; animation: m-drip 1.1s cubic-bezier(.5,0,1,.6) infinite; opacity: 0; } .m-drop.d2 { animation-delay: .35s; } .m-drop.d3 { animation-delay: .7s; }
@keyframes m-drip { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(60px); opacity: 0; } }
.m-lvl { animation: m-level 14s ease-in-out infinite alternate; } @keyframes m-level { from { transform: translateY(120px); } to { transform: translateY(26px); } }
.m-lvl { transform: translateY(40px); }
.m-wave { fill: #1aa5b6; opacity: .92; animation: m-waver 2.6s linear infinite; } @keyframes m-waver { to { transform: translateX(80px); } }
.m-pail { stroke: #d6dfe3; stroke-width: 5; stroke-linejoin: round; fill: rgba(214,223,227,.07); } .m-band { stroke: rgba(214,223,227,.5); stroke-width: 3; } .m-handle { stroke: #9aa8ae; stroke-width: 4; }
.m-lp { position: absolute; display: block; transition: scale .4s var(--m-ease), filter .3s; filter: drop-shadow(0 16px 18px rgba(0,0,0,.45)); animation: m-rise .9s .2s var(--m-ease) both; }
.m-lp:hover { scale: 1.06; filter: drop-shadow(0 18px 22px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(47,192,209,.55)); } .m-lp img { display: block; width: 100%; height: auto; border-radius: 0; }
.p-tube { left: 0; top: 60%; width: 31%; } .p-cam { left: 34.5%; top: 7.5%; width: 21%; animation-delay: .1s; } .p-strain { left: 35%; top: 54%; width: 25%; animation-delay: .3s; } .p-pouch { right: 0; top: 40%; width: 11.5%; animation-delay: .4s; }
.m-lt { position: absolute; display: inline-flex; gap: 6px; font: 400 12.5px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .03em; padding: 7px 10px; color: var(--m-ink) !important; background: #d9e2e6; border-radius: 2px; text-decoration: none; box-shadow: 0 4px 0 #6e7e86, 0 10px 18px rgba(0,0,0,.35); transition: transform .2s, background .2s, box-shadow .2s; white-space: nowrap; z-index: 2; }
.m-lt:hover { transform: translateY(2px); background: #f0b869; box-shadow: 0 2px 0 #8d6a33, 0 6px 12px rgba(0,0,0,.35); } .m-lt span { transition: transform .2s; } .m-lt:hover span { transform: translateX(3px); }
.at-tube { left: 4%; top: 90%; } .at-cam { left: 38%; top: 31%; } .at-strain { left: 38%; top: 92%; }
.m-dtag { gap: 8px; } .m-dtag a { border-radius: 2px; color: var(--m-ink) !important; padding: 11px 16px; background: radial-gradient(circle at 6px 6px, #6e7e86 1.6px, transparent 2px), radial-gradient(circle at calc(100% - 6px) 6px, #6e7e86 1.6px, transparent 2px), radial-gradient(circle at 6px calc(100% - 6px), #6e7e86 1.6px, transparent 2px), radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #6e7e86 1.6px, transparent 2px), linear-gradient(180deg, #e4eaed, #c3ced3); }
.m-dtag a:hover { background: radial-gradient(circle at 6px 6px, #6e7e86 1.6px, transparent 2px), radial-gradient(circle at calc(100% - 6px) 6px, #6e7e86 1.6px, transparent 2px), radial-gradient(circle at 6px calc(100% - 6px), #6e7e86 1.6px, transparent 2px), radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #6e7e86 1.6px, transparent 2px), linear-gradient(180deg, #f6d29c, #f0b869); }
.m-dtag b { font-family: var(--m-body); font-weight: 700; font-size: 13.5px; } .m-dtag small { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 400; background: var(--m-ink); color: #fff; border-radius: 2px; }
body.hv-pipeline main section > .wrap > h2 { text-transform: uppercase; letter-spacing: .005em; font-weight: 600; }
body.hv-pipeline main section > .wrap > h2::after { content: ""; display: block; width: min(240px, 60%); height: 6px; margin-top: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--m-accent) 0 60%, #2fc0d1 60% 100%) 0 0 / 50px 100%; animation: m-pipeflow 1.8s linear infinite; }
@keyframes m-pipeflow { to { background-position: 50px 0; } }
body.hv-pipeline .pcard { border-radius: 4px; background-image: radial-gradient(circle at 9px 9px, #aab6bb 1.8px, transparent 2.2px), radial-gradient(circle at calc(100% - 9px) 9px, #aab6bb 1.8px, transparent 2.2px); } body.hv-pipeline .pcard:hover { box-shadow: 0 0 0 2px var(--m-accent-2), 0 18px 40px rgba(11,93,107,.2); }
body.hv-pipeline .m-acard { border-radius: 4px; } body.hv-pipeline .m-cta .m-band { border-radius: 6px; background: linear-gradient(120deg, var(--m-hero-a), var(--m-accent)); }
body.hv-pipeline .m-kind, body.hv-pipeline .m-award { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; }
body.hv-pipeline .m-page-hero { background: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px), linear-gradient(120deg, var(--m-hero-a), var(--m-hero-b)); }
body.hv-pipeline .m-page-hero h1 { text-transform: uppercase; line-height: 1.06; letter-spacing: 0; font-weight: 600; }
body.hv-pipeline footer.site { background: var(--m-hero-a); color: #b4c0c5; border: 0; } body.hv-pipeline footer.site nav a { color: #fff; }
@media (max-width: 900px) { .m-line { justify-self: stretch; margin-top: 4px; } .m-lt { font-size: 11px; padding: 5px 7px; } .at-tube { left: 2%; } }
@media (prefers-reduced-motion: reduce) { .m-lvl { transform: translateY(60px); } .m-drop { opacity: 1; } }

/* valve: a quarter-turn handle swings and liquid rises through the button */
body.bv-valve .btn { border-radius: 4px; padding: 15px 22px 15px 48px; font-weight: 700; box-shadow: none !important; }
body.bv-valve .btn::before { content: ""; position: absolute; left: 16px; top: calc(50% - 10px); width: 20px; height: 20px; background: radial-gradient(circle, currentColor 0 3.5px, transparent 4px), linear-gradient(currentColor, currentColor) center / 100% 4px no-repeat; border-radius: 2px; transition: transform .45s cubic-bezier(.3,1.5,.6,1); }
body.bv-valve .btn:hover::before { transform: rotate(90deg); }
body.bv-valve .btn::after { inset: 0; background: var(--m-accent-2); border-radius: 46% 54% 0 0 / 9px 6px 0 0; transform: translateY(104%); transition: transform .6s var(--m-ease); z-index: -1; }
body.bv-valve .btn:hover::after { transform: translateY(-4%); } body.bv-valve .btn:hover { transform: translateY(-2px); }
body.bv-valve :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: var(--m-accent); }
body.bv-valve :is(.m-btn-ghost, .btn.ghost, .btn.secondary):hover { background: transparent !important; color: #fff !important; }
body.bv-valve .m-cta .btn.m-white::after { background: #bfe6ec; } body.bv-valve .m-cta .btn.m-white:hover { color: var(--m-ink); }
body.bv-valve .m-hero .m-btn-main { color: #fff; }

/* nightdrive (FieryRed): night scene from a listing photo, beams sweeping from cut-out lights, dust in the beam, 12V rocker switch panel */
body.hv-nightdrive .m-hero { background: radial-gradient(70% 60% at 76% 100%, rgba(194,31,26,.2), transparent 70%), linear-gradient(180deg, #040405, var(--m-hero-a) 60%, #0d0707); }
.m-nscene { position: absolute; inset: 0 0 0 36%; margin: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%); mask-image: linear-gradient(90deg, transparent 0, #000 42%); }
.m-nscene img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; border-radius: 0; filter: saturate(1.08); }
.m-nscene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,4,5,.72) 0, transparent 26%, transparent 62%, var(--m-hero-a) 100%); }
body.hv-nightdrive .m-hero .m-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: 12px; }
body.hv-nightdrive .m-hero h1 { font-size: clamp(48px, 5.3vw, 86px) !important; line-height: .94 !important; letter-spacing: .005em; text-transform: uppercase; font-weight: 600; max-width: 21ch; text-shadow: 0 2px 24px rgba(0,0,0,.6); }
body.hv-nightdrive .m-hero .eyebrow { color: #f2b63c; letter-spacing: .2em; } body.hv-nightdrive .m-hero .sub { color: #dcdce2; text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.m-nrig { position: relative; height: min(500px, 58vh); }
.m-nbeam { position: absolute; right: 31%; bottom: 3%; width: 104%; height: 62%; transform-origin: 100% 50%; filter: blur(6px); mix-blend-mode: screen; pointer-events: none; opacity: .92; animation: m-sweep 7s ease-in-out infinite alternate; }
.m-nbeam::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 46%, 100% 54%, 0 100%); background: linear-gradient(270deg, #fff7de, rgba(255,236,186,.55) 45%, transparent 96%); }
.m-nbeam.b2 { right: 13%; bottom: 8%; height: 44%; opacity: .55; animation-duration: 9s; animation-delay: -3s; }
@keyframes m-sweep { from { rotate: -7deg; } to { rotate: 19deg; } }
.m-nglow { position: absolute; left: 6%; bottom: 2%; width: 46%; height: 42%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,40,30,.6), transparent); mix-blend-mode: screen; animation: m-brake 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes m-brake { 0%, 42%, 100% { opacity: .35; } 50%, 70% { opacity: 1; } }
.m-ndust { position: absolute; inset: 0 0 12% 0; pointer-events: none; }
.m-ndust i { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #ffe9b8; opacity: 0; animation: m-dust var(--t) linear var(--d) infinite; }
.m-ndust i:nth-child(3n) { width: 2px; height: 2px; } .m-ndust i:nth-child(4n) { width: 4px; height: 4px; filter: blur(1px); }
@keyframes m-dust { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .85; } 80% { opacity: .5; } 100% { opacity: 0; transform: translate(-46px, -34px); } }
.m-nlamp { position: absolute; display: block; filter: drop-shadow(0 14px 16px rgba(0,0,0,.7)); animation: m-rise .9s var(--m-ease) both; transition: scale .35s var(--m-ease), filter .35s; }
.m-nlamp img { display: block; width: 100%; height: auto; border-radius: 0; } .m-nlamp:hover { scale: 1.06; }
.m-nlamp.l1 { right: 0; bottom: 8%; width: 44%; z-index: 2; } .m-nlamp.l1:hover { filter: drop-shadow(0 0 22px rgba(255,236,186,.7)); }
.m-nlamp.l2 { left: 10%; bottom: 3%; width: 34%; z-index: 2; animation-delay: .15s; } .m-nlamp.l2:hover { filter: drop-shadow(0 0 22px rgba(255,50,40,.8)); }
.m-nlamp.l3 { display: none; }
.m-nroad { position: relative; z-index: 2; display: block; height: 4px; margin: 0 clamp(18px, 4vw, 72px) 14px; background: repeating-linear-gradient(90deg, #f2b63c 0 34px, transparent 34px 62px); background-size: 62px 100%; animation: m-road 1.1s linear infinite; opacity: .85; }
@keyframes m-road { to { background-position: -62px 0; } }
.m-nsw { gap: 10px; flex-wrap: wrap; }
.m-nsw a { position: relative; flex: 1 1 170px; justify-content: flex-start; padding: 13px 14px 13px 34px; border-radius: 6px; color: #f4f4f6 !important; background: linear-gradient(180deg, #26262b, #121215 62%, #0a0a0c); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px rgba(0,0,0,.5); }
.m-nsw a::before { content: ""; position: absolute; left: 14px; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: #5f4a1a; transition: background .25s, box-shadow .25s; }
.m-nsw a:hover { transform: translateY(1px); background: linear-gradient(180deg, #16161a, #1d1d22); } .m-nsw a:hover::before { background: #f2b63c; box-shadow: 0 0 12px 3px rgba(242,182,60,.8); }
.m-nsw b { font: 700 13.5px/1.15 var(--m-body); } .m-nsw small { margin-left: auto; background: rgba(255,255,255,.1); color: #d9d9de; }
body.hv-nightdrive header.site { background: rgba(8,8,10,.94); border-bottom-color: rgba(255,255,255,.08); }
body.hv-nightdrive header.site .logo img { mix-blend-mode: normal; filter: brightness(0) invert(1); }
body.hv-nightdrive header.site nav a { color: #eeeef1; } body.hv-nightdrive header.site nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
body.hv-nightdrive header.site nav > a[aria-current] { background: var(--m-accent); color: #fff; } body.hv-nightdrive header.site nav a.m-blog { color: #f2b63c; }
body.hv-nightdrive header.site .langs a { color: #eeeef1; background: transparent !important; } body.hv-nightdrive header.site .langs a[aria-current] { background: #fff !important; color: #111 !important; }
@media (max-width: 860px) { body.hv-nightdrive header.site nav { background: #101013 !important; border-color: rgba(255,255,255,.14) !important; } body.hv-nightdrive header.site nav > a[aria-current] { background: var(--m-accent); } body.hv-nightdrive .burger { background: #1a1a1e; border-color: rgba(255,255,255,.2); } body.hv-nightdrive .burger span { background: #fff; } }
body.hv-nightdrive :is(h3, h4, .m-faq summary, .pcard h3, .m-acard h3, .m-rank h3, .m-aside h3) { font-family: var(--m-body); letter-spacing: -.01em; font-weight: 700; }
body.hv-nightdrive main h2, body.hv-nightdrive .m-prose h2 { text-transform: uppercase; font-size: clamp(36px, 4.6vw, 56px); line-height: 1; letter-spacing: .005em; font-weight: 600; }
body.hv-nightdrive main section > .wrap > h2::before { content: ""; display: block; width: 58px; height: 5px; margin-bottom: 12px; background: linear-gradient(90deg, var(--m-accent) 60%, #f2b63c); box-shadow: 0 0 14px rgba(194,31,26,.55); }
body.hv-nightdrive .pcard { border-radius: 6px; } body.hv-nightdrive .pcard:hover, body.hv-nightdrive .m-acard:hover { box-shadow: 0 0 0 1.5px var(--m-accent), 0 18px 44px rgba(194,31,26,.24); }
body.hv-nightdrive .m-page-hero { background: radial-gradient(70% 120% at 90% 0, rgba(194,31,26,.34), transparent 60%), linear-gradient(120deg, #060607, #18100f); }
body.hv-nightdrive .m-page-hero .m-bg { opacity: .32; mix-blend-mode: normal; background-position: 20% 60%; -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 80%); mask-image: linear-gradient(90deg, transparent 20%, #000 80%); }
body.hv-nightdrive .m-page-hero h1 { text-transform: uppercase; font-size: clamp(42px, 5.6vw, 76px) !important; line-height: .96; letter-spacing: .005em; font-weight: 600; } body.hv-nightdrive .m-page-hero .eyebrow { color: #f2b63c; }
body.hv-nightdrive .m-cta .m-band { border-radius: 8px; background: radial-gradient(60% 140% at 100% 0, rgba(194,31,26,.8), transparent 70%), #0b0b0d; box-shadow: 0 26px 60px rgba(0,0,0,.3); }
body.hv-nightdrive .m-cta .m-band::before { width: 110%; height: 180%; right: -30%; top: -40%; border-radius: 0; clip-path: polygon(100% 44%, 100% 56%, 0 100%, 0 0); background: linear-gradient(270deg, rgba(255,240,200,.22), transparent 80%); transform-origin: 100% 50%; animation: m-sweep 8s ease-in-out infinite alternate; pointer-events: none; }
body.hv-nightdrive footer.site { background: #08080a; color: #b5b5bc; border: 0; } body.hv-nightdrive footer.site nav a { color: #fff; }
@media (max-width: 900px) { .m-nscene { inset: auto 0 215px 0; height: 400px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 26%, #000 72%, transparent); mask-image: linear-gradient(180deg, transparent, #000 26%, #000 72%, transparent); } .m-nscene img { object-position: 22% 50%; } .m-nscene::after { display: none; } .m-nrig { height: 300px; margin-top: 6px; } body.hv-nightdrive .m-hero h1 { font-size: clamp(44px, 12.6vw, 72px) !important; } .m-nsw a { flex: 1 1 44%; } }
@media (prefers-reduced-motion: reduce) { .m-nbeam { rotate: -4deg; } .m-ndust i { opacity: .5; } .m-nglow { opacity: .7; } }

/* beam: a headlight sweep crosses the button, the LED lights and the button throws glow */
body.bv-beam .btn { border-radius: 4px; padding: 15px 24px 15px 34px; text-transform: uppercase; letter-spacing: .05em; font: 800 13.5px/1 var(--m-body); transition: transform .2s var(--m-ease), box-shadow .3s, background .2s, color .2s; }
body.bv-beam .btn::before { content: ""; position: absolute; left: 14px; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: #ffd27a; opacity: .55; transition: opacity .2s, box-shadow .3s; }
body.bv-beam .btn:hover::before { opacity: 1; box-shadow: 0 0 10px 3px rgba(255,210,122,.9); }
body.bv-beam .btn::after { inset: -20% auto -20% 0; width: 70%; background: linear-gradient(90deg, transparent, rgba(255,240,205,.55) 60%, rgba(255,255,255,.95) 80%, transparent); transform: translateX(-160%) skewX(-18deg); z-index: 0; pointer-events: none; mix-blend-mode: screen; }
body.bv-beam .btn:hover::after { transform: translateX(260%) skewX(-18deg); }
body.bv-beam :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: var(--m-accent); box-shadow: 0 0 0 1px rgba(255,210,122,.65), 0 10px 34px rgba(255,120,60,.55); }
body.bv-beam :is(.m-btn-ghost, .btn.ghost, .btn.secondary)::before { background: var(--m-accent); }
body.bv-beam .m-hero .m-btn-ghost { background: rgba(10,10,12,.5); } body.bv-beam .m-hero .m-btn-ghost:hover { background: #fff !important; }

body.hv-nightdrive .m-collage .m-card { border-radius: 8px; } body.hv-floorplan .m-collage .m-card { border-radius: 4px; } body.hv-atelier .m-collage .m-card { border-radius: 0; } body.hv-pipeline .m-collage .m-card { border-radius: 4px; }
body.m header.site nav a.m-blog[aria-current] { color: #fff; }
body.hv-atelier .m-aside h3 { font-size: 20px; }
/* new heroes stack in one column on phones (kept last: variant rules above set two columns) */
@media (max-width: 900px) { :is(body.hv-floorplan, body.hv-atelier, body.hv-pipeline, body.hv-nightdrive) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr); } }

/* ===== batch 11.11.2026: granny/loop (Katech), inkline/click (Pentonic) ===== */
:is(body.hv-granny, body.hv-inkline) .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); }
:is(body.hv-granny, body.hv-inkline) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:is(body.hv-granny, body.hv-inkline) .m-hero .m-copy > * { animation: m-rise .8s var(--m-ease) both; }
:is(body.hv-granny, body.hv-inkline) .m-hero .m-copy > :nth-child(3) { animation-delay: .08s; } :is(body.hv-granny, body.hv-inkline) .m-hero .m-copy > :nth-child(4) { animation-delay: .16s; } :is(body.hv-granny, body.hv-inkline) .m-hero .m-copy > :nth-child(n+5) { animation-delay: .24s; }
:is(body.hv-granny, body.hv-inkline) .m-hero h1 { text-wrap: balance; max-width: 18ch; }

/* granny (Katech): granny squares stitch themselves into a joined 3×3 blanket; a photo square, one square per category, a hook pair crosses it */
body.hv-granny .m-hero { color: var(--m-ink); background: radial-gradient(circle at 2px 2px, color-mix(in srgb, var(--m-accent) 14%, transparent) 1.3px, transparent 1.8px) 0 0 / 16px 16px, radial-gradient(55% 70% at 80% 45%, #f5dcc0, transparent 72%), var(--m-bg); }
body.hv-granny .m-hero h1 { color: var(--m-ink) !important; font-size: clamp(38px, 4.8vw, 68px) !important; line-height: 1.06 !important; letter-spacing: -.01em; }
body.hv-granny .m-hero .sub { color: var(--m-body-ink); } body.hv-granny .m-hero .eyebrow { color: var(--m-accent-2); }
body.hv-granny .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: var(--m-ink) !important; background: rgba(255,255,255,.6) !important; }
body.hv-granny .m-hero .m-btn-ghost:hover { background: var(--m-ink) !important; color: #fff !important; }
body.hv-granny .m-hero .m-chips span { background: #fff; color: var(--m-ink); border: 1.5px dashed color-mix(in srgb, var(--m-accent) 50%, transparent); backdrop-filter: none; }
.m-gygrid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); aspect-ratio: 1; width: min(100%, 580px); justify-self: center; padding: 10px; background: #3a2a22; border-radius: 6px; rotate: -1.5deg; box-shadow: 0 34px 64px rgba(58,42,34,.24); }
.m-gyq { --w: 5px; --r1: #3a2a22; --r2: #d9a33b; --r3: #7e9470; --cr: #fff8ec; --rings: inset 0 0 0 var(--w) var(--r1), inset 0 0 0 calc(var(--w) * 2) var(--cr), inset 0 0 0 calc(var(--w) * 3) var(--r2), inset 0 0 0 calc(var(--w) * 4) var(--cr), inset 0 0 0 calc(var(--w) * 5) var(--r3);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: calc(var(--w) * 5 + 6px) calc(var(--w) * 5 + 3px); text-align: center; text-decoration: none; color: var(--m-ink) !important; background: var(--cr); box-shadow: var(--rings); animation: m-gyin .8s var(--m-ease) backwards; animation-delay: calc(.25s + var(--i, 0) * .12s); transition: transform .4s var(--m-ease), box-shadow .4s; }
.m-gyq::before { content: ""; position: absolute; inset: 0; padding: calc(var(--w) * 5); pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.4) 1px, transparent 1.6px) 0 0 / 5px 5px; -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.m-gyq.q2 { --r2: #d69a87; --r3: #b5523b; } .m-gyq.q3 { --r2: #7e9470; --r3: #d9a33b; } .m-gyq.q4 { --r2: #b5523b; --r3: #d69a87; } .m-gyq.q5 { --r2: #d9a33b; --r3: #b5523b; }
.m-gyimg { display: grid; place-items: center; width: 54%; aspect-ratio: 1; flex: none; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 3px var(--r2), 0 0 0 6px var(--cr), 0 0 0 7.5px var(--r3); }
.m-gyimg img { width: 100%; height: 100%; object-fit: contain; padding: 9%; border-radius: 0; transition: transform .5s var(--m-ease); }
.m-gycat b { display: block; margin-top: 12px; font: 700 14px/1.15 var(--m-body); color: var(--m-ink); overflow-wrap: anywhere; } .m-gycat small { display: block; margin-top: 4px; font: 600 11.5px/1.2 var(--m-body); color: #7a3b27; }
.m-gycat:hover, .m-gycat:focus-visible { z-index: 3; transform: translateY(-5px) rotate(-1.5deg) scale(1.04); box-shadow: var(--rings), 0 18px 32px rgba(58,42,34,.4); }
.m-gycat:hover .m-gyimg img, .m-gycat:focus-visible .m-gyimg img { transform: scale(1.1) rotate(-4deg); }
.m-gycat:focus-visible { outline: 3px solid var(--m-accent); outline-offset: -3px; }
.m-gyphoto { grid-column: 1 / 3; grid-row: 1 / 3; padding: calc(var(--w) * 2); --rings: inset 0 0 0 var(--w) var(--r1), inset 0 0 0 calc(var(--w) * 2) var(--cr); animation: none; overflow: hidden; }
.m-gyphoto::before { display: none; }
.m-gydeco { background: radial-gradient(circle, #d9a33b 0 11%, var(--cr) 11.5% 16%, #b5523b 16.5% 26%, var(--cr) 26.5% 31%, #7e9470 31.5% 40%, var(--cr) 40.5%); }
.m-gyphoto img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.m-gyseam { position: absolute; left: 10px; top: 10px; width: calc(100% - 20px); height: calc(100% - 20px); overflow: visible; pointer-events: none; z-index: 2; }
.m-gyseam path { fill: none; stroke: #e2b04a; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .5 6; }
.m-gyseam.h { animation: m-gyh 1.2s .95s cubic-bezier(.5,0,.3,1) backwards; } .m-gyseam.v { animation: m-gyv 1.2s 1.25s cubic-bezier(.5,0,.3,1) backwards; }
.m-gyhook { position: absolute; left: -13%; top: 5%; width: 44%; z-index: 4; pointer-events: none; filter: drop-shadow(0 14px 14px rgba(58,42,34,.32)); animation: m-gyhk 1s .9s var(--m-ease) backwards, m-gywob 7s 2s ease-in-out infinite; }
.m-gyhook img { display: block; width: 100%; height: auto; border-radius: 0; }
@keyframes m-gyin { from { clip-path: circle(0 at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
@keyframes m-gyh { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes m-gyv { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes m-gyhk { from { opacity: 0; translate: -16% -16%; } } @keyframes m-gywob { 0%, 100% { rotate: 0deg; } 50% { rotate: 3deg; } }
body.hv-granny main section > .wrap > h2::after { content: ""; display: block; width: 132px; height: 8px; margin-top: 12px; background: radial-gradient(closest-side, transparent 45%, var(--m-accent) 55% 85%, transparent 95%) 0 50% / 12px 8px repeat-x; }
body.hv-granny .pcard, body.hv-granny .m-acard { border-radius: 8px; } body.hv-granny .pcard:hover, body.hv-granny .m-acard:hover { outline: 2px dashed var(--m-accent); outline-offset: 5px; }
body.hv-granny .m-acard .m-art { background: radial-gradient(circle at 2px 2px, color-mix(in srgb, var(--m-accent) 12%, transparent) 1.2px, transparent 1.7px) 0 0 / 14px 14px, #fff8ec; }
body.hv-granny .m-cta .m-band { border-radius: 8px; background: linear-gradient(120deg, var(--m-accent-2), var(--m-accent)); }
body.hv-granny .m-cta .m-band::before { width: 360px; height: 360px; right: -120px; top: -140px; border-radius: 0; rotate: 12deg; background: repeating-radial-gradient(circle, rgba(255,255,255,.16) 0 9px, transparent 9px 18px), repeating-linear-gradient(0deg, transparent 0 9px, rgba(217,163,59,.18) 9px 18px); -webkit-mask: radial-gradient(closest-side, #000 70%, transparent 71%); mask: radial-gradient(closest-side, #000 70%, transparent 71%); }
body.hv-granny .m-page-hero .eyebrow { color: #f3c98a; }
body.hv-granny footer.site { background: var(--m-hero-a); color: #e9dccb; border: 0; } body.hv-granny footer.site nav a { color: #fff; }
body.hv-granny .m-collage .m-card { border-radius: 6px; box-shadow: inset 0 0 0 5px #3a2a22, 0 24px 48px rgba(0,0,0,.25); }

/* inkline (Pentonic): navy ink hero, ruled sheet with a signature that writes itself, a snapshot from a listing, real pens fanned from one pivot, ink-colour dots */
body.hv-inkline .m-hero { background: radial-gradient(55% 65% at 82% 30%, rgba(47,111,222,.4), transparent 70%), radial-gradient(40% 50% at 4% 100%, rgba(215,38,61,.22), transparent 70%), linear-gradient(160deg, #0a1330, var(--m-hero-a) 45%, #16296a); }
body.hv-inkline .m-hero h1 { font-size: clamp(40px, 5vw, 72px) !important; letter-spacing: -.035em; margin-bottom: 0; }
body.hv-inkline .m-hero .eyebrow { color: #a9c1ff; } body.hv-inkline .m-hero .sub { color: rgba(255,255,255,.86); margin-top: .9em; }
body.hv-inkline .m-hero .m-btn-main { background: #d7263d; box-shadow: 0 12px 28px rgba(215,38,61,.38); } body.hv-inkline .m-hero .m-btn-main:hover { background: #b81d31; }
.m-ikline { display: block; width: min(440px, 82%); height: 18px; margin-top: 6px; overflow: visible; }
.m-ikline path { fill: none; stroke: #ff5a6e; stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; animation: m-ikwrite 1.1s .6s cubic-bezier(.6,.1,.3,1) backwards; }
.m-ikpad { position: relative; height: min(540px, 64vh); min-height: 430px; }
.m-ikpaper { position: absolute; inset: 3% 3% 5% 1%; border-radius: 4px 4px 10px 10px; rotate: -2.5deg; background: linear-gradient(90deg, transparent 0 46px, rgba(215,38,61,.5) 46px 47px, transparent 47px 50px, rgba(215,38,61,.5) 50px 51px, transparent 51px), repeating-linear-gradient(180deg, transparent 0 29px, rgba(47,111,222,.26) 29px 30px) 0 64px / 100% calc(100% - 64px) no-repeat, #fdfdfb; box-shadow: 0 3px 0 #e4e4dc, 0 6px 0 #cfd0c6, 0 40px 70px rgba(0,0,0,.45); }
.m-ikpaper::before { content: ""; position: absolute; left: 14px; right: 14px; top: 10px; height: 10px; background: radial-gradient(circle, #0e1838 3.2px, transparent 3.8px) 0 50% / 22px 10px repeat-x; }
.m-ikmeta { position: absolute; top: 36px; left: 64px; right: 18px; display: flex; gap: 22px; font: 700 10px/1 var(--m-body); letter-spacing: .16em; text-transform: uppercase; color: rgba(31,58,138,.6); }
.m-ikmeta i { flex: 1; font-style: normal; padding-bottom: 4px; border-bottom: 1px solid rgba(31,58,138,.35); } .m-ikmeta i:first-child { flex: .45; }
.m-iksig { position: absolute; left: 60px; top: 70px; width: 36%; max-width: 250px; overflow: visible; }
.m-iksig path { fill: none; stroke: #1f3a8a; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; animation: m-ikwrite 2.2s .5s cubic-bezier(.5,.1,.4,1) backwards; }
.m-iksig .u { stroke: #d7263d; stroke-width: 2.6; animation-duration: .7s; animation-delay: 2.5s; }
.m-iksnap { position: absolute; right: 1%; top: 8%; width: 50%; z-index: 2; display: block; padding: 8px 8px 26px; background: #fff; rotate: 4deg; box-shadow: 0 18px 34px rgba(0,0,0,.38); animation: m-iksnap .9s .15s var(--m-ease) backwards; transition: rotate .4s var(--m-ease); }
.m-iksnap::before { content: ""; position: absolute; top: -11px; left: 50%; width: 76px; height: 22px; translate: -50% 0; rotate: -4deg; background: rgba(236,220,170,.8); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.m-iksnap img { display: block; width: 100%; height: auto; border-radius: 1px; } .m-iksnap:hover { rotate: 1deg; }
.m-ikfan { position: absolute; right: 7%; bottom: 11%; width: 84%; height: 0; z-index: 3; }
.m-ikpen { position: absolute; right: 0; bottom: 0; width: 100%; display: block; translate: 0 50%; transform-origin: 97% 50%; rotate: var(--a); filter: drop-shadow(0 9px 8px rgba(0,0,0,.3)); animation: m-ikfan 1s calc(.55s + var(--i) * .1s) var(--m-ease) backwards; transition: transform .35s var(--m-ease); }
.m-ikpen img { display: block; width: 100%; height: auto; border-radius: 0; } .m-ikpen:hover { transform: translateX(-6%); }
@keyframes m-ikwrite { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes m-iksnap { from { translate: 0 26px; rotate: 10deg; } } @keyframes m-ikfan { from { rotate: 0deg; } }
.m-ikinks { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 10px; padding: 6px clamp(18px, 4vw, 72px) clamp(24px, 4vh, 40px); }
.m-ikinks a { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #fff !important; text-decoration: none; transition: background .3s, transform .3s var(--m-ease); }
.m-ikinks a:hover, .m-ikinks a:focus-visible { background: rgba(255,255,255,.13); transform: translateY(-2px); }
.m-ikinks i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgba(255,255,255,.88); transition: transform .45s var(--m-ease), border-radius .45s, box-shadow .45s; }
.m-ikinks a:hover i, .m-ikinks a:focus-visible i { transform: scale(1.14); border-radius: 46% 54% 41% 59% / 55% 43% 57% 45%; box-shadow: 0 0 0 2px #fff, 0 0 0 9px rgba(255,255,255,.1); }
.m-ikinks span { min-width: 0; } .m-ikinks b { display: inline; font: 700 14px/1.2 var(--m-body); background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1.5px; transition: background-size .45s cubic-bezier(.6,.1,.3,1); }
.m-ikinks a:hover b, .m-ikinks a:focus-visible b { background-size: 100% 1.5px; } .m-ikinks small { display: block; margin-top: 4px; font: 600 11.5px/1.25 var(--m-body); color: rgba(255,255,255,.74); }
body.hv-inkline main section > .wrap > h2::after { content: ""; display: block; width: 110px; height: 12px; margin-top: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 12'%3E%3Cpath d='M2 8C26 3 52 2 76 5s24 4 32-1' fill='none' stroke='%23d7263d' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; }
body.hv-inkline .pcard:hover, body.hv-inkline .m-acard:hover { box-shadow: 0 0 0 1.5px var(--m-accent), 0 18px 40px rgba(31,58,138,.18); }
body.hv-inkline .m-acard .m-art { background: repeating-linear-gradient(180deg, #fff 0 23px, rgba(47,111,222,.13) 23px 24px); }
body.hv-inkline .m-cta .m-band { border-radius: 12px; background: radial-gradient(60% 120% at 100% 0, rgba(47,111,222,.55), transparent 70%), linear-gradient(120deg, #0a1330, var(--m-accent)); }
body.hv-inkline .m-cta .m-band::before { inset: 0; width: auto; height: auto; right: 0; top: 0; border-radius: 0; background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(255,255,255,.06) 27px 28px); }
body.hv-inkline .m-page-hero { background: radial-gradient(60% 120% at 100% 0, rgba(47,111,222,.45), transparent 70%), linear-gradient(120deg, #0a1330, var(--m-accent)); } body.hv-inkline .m-page-hero .eyebrow { color: #a9c1ff; }
body.hv-inkline footer.site { background: #0a1330; color: #c5cde3; border: 0; } body.hv-inkline footer.site nav a { color: #fff; }
body.hv-inkline .m-collage .m-card { border-radius: 4px; }

/* loop (Katech): a chain-stitch loop runs once around the border on hover */
@property --m-lp { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
body.bv-loop .btn { border-radius: 12px; padding: 16px 26px; font-weight: 700; }
body.bv-loop .btn::after { inset: 4px; border-radius: 9px; transform: none; z-index: 0; pointer-events: none; opacity: .9; --m-ch: radial-gradient(closest-side, transparent 50%, currentColor 58% 82%, transparent 92%); background: var(--m-ch) 0 0 / 11px 7px repeat-x, var(--m-ch) 0 100% / 11px 7px repeat-x, var(--m-ch) 0 0 / 7px 11px repeat-y, var(--m-ch) 100% 0 / 7px 11px repeat-y; -webkit-mask: conic-gradient(from 270deg, #000 var(--m-lp), transparent 0); mask: conic-gradient(from 270deg, #000 var(--m-lp), transparent 0); transition: --m-lp .75s cubic-bezier(.45,.05,.3,1); }
body.bv-loop .btn:is(:hover, :focus-visible)::after { --m-lp: 360deg; transform: none; }
body.bv-loop .btn:hover { transform: translateY(-2px); }
body.bv-loop .btn .arr { transition: transform .4s var(--m-ease); } body.bv-loop .btn:hover .arr { transform: translateX(4px) rotate(-8deg); }

/* click (Pentonic): a pen barrel — the clicker presses, the tip extends on hover and retracts on press, an ink line writes under the label */
body.bv-click .btn { border-radius: 999px; padding: 15px 26px 15px 30px; font-weight: 700; letter-spacing: .01em; }
body.bv-click .btn:has(.arr) { padding-right: 50px; }
body.bv-click .btn::before { content: ""; position: absolute; left: 11px; top: calc(50% - 7px); width: 6px; height: 14px; border-radius: 3px; background: currentColor; opacity: .35; transition: transform .12s, opacity .2s; z-index: 0; }
body.bv-click .btn:active::before { transform: scaleX(.35); opacity: .65; }
body.bv-click .btn::after { inset: auto 38px 10px 30px; height: 2px; border-radius: 2px; background: currentColor; opacity: .8; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.6,.1,.3,1); z-index: 0; }
body.bv-click .btn:not(:has(.arr))::after { right: 26px; }
body.bv-click .btn:is(:hover, :focus-visible)::after { transform: scaleX(1); }
body.bv-click .btn .arr { position: absolute; right: 15px; top: 50%; width: 22px; height: 12px; margin: -6px 0 0; font-size: 0; opacity: .55; transform: translateX(-9px); transition: transform .22s cubic-bezier(.3,1.7,.5,1), opacity .2s; }
body.bv-click .btn .arr::before { content: ""; position: absolute; inset: 0; background: currentColor; clip-path: polygon(0 10%, 55% 28%, 92% 46%, 100% 50%, 92% 54%, 55% 72%, 0 90%); }
body.bv-click .btn .arr::after { content: ""; position: absolute; right: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: currentColor; }
body.bv-click .btn:is(:hover, :focus-visible) .arr { transform: translateX(0); opacity: 1; }
body.bv-click .btn:active .arr { transform: translateX(-12px); transition-duration: .08s; }
body.bv-click .btn:active { transform: translateY(1px) scale(.985); }

@media (max-width: 900px) {
  :is(body.hv-granny, body.hv-inkline) .m-hero { min-height: 0; } :is(body.hv-granny, body.hv-inkline) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr); }
  .m-gygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; aspect-ratio: auto; width: 100%; rotate: 0deg; padding: 6px; gap: 0; }
  .m-gyq { --w: 4px; outline: 2px dashed #e2b04a; outline-offset: -2px; }
  .m-gyphoto { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 1.25; outline: 0; }
  .m-gycat { min-height: 156px; } .m-gycat b { margin-top: 9px; font-size: 13px; } .m-gydeco { display: none; }
  .m-gycat.m-gylast { grid-column: 1 / -1; aspect-ratio: auto; flex-direction: row; justify-content: flex-start; gap: 16px; text-align: left; padding-block: 30px; }
  .m-gylast .m-gyimg { width: 82px; } .m-gylast b { margin-top: 0; }
  .m-gyseam { display: none; } .m-gyhook { left: -5%; top: 1%; width: 40%; }
  .m-ikpad { height: 390px; min-height: 0; margin-top: 4px; } .m-ikpaper { inset: 2% 1% 4% 1%; } .m-ikpaper { background-size: auto, 100% calc(100% - 64px), auto; }
  .m-iksig { left: 56px; top: 66px; width: 34%; } .m-iksnap { width: 52%; padding: 6px 6px 18px; } .m-ikfan { right: 5%; bottom: 9%; width: 90%; }
  .m-ikinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .m-ikinks a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 420px) { .m-ikmeta { left: 58px; gap: 12px; } .m-ikinks a { padding: 11px 10px; gap: 10px; } .m-ikinks i { width: 24px; height: 24px; } }

/* ===== batch 11.11.2026 (2): heartstring/unwind (Red Heart), gameboard/dice (Pressman), bakery/frosting (Caron), plugin/plug (SCOVEE) ===== */
:is(body.hv-heartstring, body.hv-gameboard, body.hv-bakery, body.hv-plugin) .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); }
:is(body.hv-heartstring, body.hv-gameboard, body.hv-bakery, body.hv-plugin) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:is(body.hv-heartstring, body.hv-gameboard, body.hv-bakery, body.hv-plugin) .m-hero .m-copy > * { animation: m-rise .8s var(--m-ease) both; }
:is(body.hv-heartstring, body.hv-gameboard, body.hv-bakery, body.hv-plugin) .m-hero .m-copy > :nth-child(3) { animation-delay: .08s; } :is(body.hv-heartstring, body.hv-gameboard, body.hv-bakery, body.hv-plugin) .m-hero .m-copy > :nth-child(4) { animation-delay: .16s; } :is(body.hv-heartstring, body.hv-gameboard, body.hv-bakery, body.hv-plugin) .m-hero .m-copy > :nth-child(n+5) { animation-delay: .24s; }
:is(body.hv-heartstring, body.hv-gameboard, body.hv-bakery, body.hv-plugin) .m-hero h1 { text-wrap: balance; max-width: 17ch; }
:is(body.hv-heartstring, body.hv-gameboard, body.hv-bakery) .m-hero { color: var(--m-ink); }
:is(body.hv-heartstring, body.hv-gameboard, body.hv-bakery) .m-hero h1 { color: var(--m-ink) !important; }
:is(body.hv-heartstring, body.hv-gameboard, body.hv-bakery) .m-hero .sub { color: var(--m-body-ink); } :is(body.hv-heartstring, body.hv-gameboard, body.hv-bakery) .m-hero .eyebrow { color: var(--m-accent-2); }
:is(body.hv-heartstring, body.hv-gameboard, body.hv-bakery) .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: var(--m-ink) !important; background: rgba(255,255,255,.65) !important; }
:is(body.hv-heartstring, body.hv-gameboard, body.hv-bakery) .m-hero .m-btn-ghost:hover { background: var(--m-ink) !important; color: #fff !important; }
:is(body.hv-heartstring, body.hv-gameboard, body.hv-bakery) .m-hero .m-chips span { background: #fff; color: var(--m-ink); border: 1.5px solid color-mix(in srgb, var(--m-accent) 28%, transparent); backdrop-filter: none; }
:is(body.hv-heartstring, body.hv-gameboard, body.hv-bakery, body.hv-plugin) .m-hero .bgcredit { display: none; }

/* heartstring (Red Heart): one red strand rolls out of a yarn ball, draws a heart around a listing photo and runs on to the next ball; tags hang from a garland */
body.hv-heartstring .m-hero { background: radial-gradient(48% 58% at 77% 42%, #f8dcd5, transparent 70%), radial-gradient(circle at 1px 1px, rgba(198,47,59,.11) 1px, transparent 1.6px) 0 0 / 18px 18px, var(--m-bg); }
body.hv-heartstring .m-hero h1 { font-size: clamp(40px, 5vw, 70px) !important; line-height: 1.05 !important; letter-spacing: -.025em; }
.m-hs { --m-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 94C20 72 0 52 0 30 0 13 13 0 29 0c10 0 17 5 21 13C54 5 61 0 71 0c16 0 29 13 29 30 0 22-20 42-50 64Z'/%3E%3C/svg%3E");
  position: relative; width: min(100%, 560px); aspect-ratio: 600 / 552; justify-self: center; }
.m-hs::before { content: ""; position: absolute; left: 20%; top: 14%; width: 63.33%; aspect-ratio: 1; background: rgba(154,31,42,.2); -webkit-mask: var(--m-heart) center / 100% 100% no-repeat; mask: var(--m-heart) center / 100% 100% no-repeat; filter: blur(12px); }
.m-hsheart { position: absolute; left: 18.33%; top: 10.87%; width: 63.33%; aspect-ratio: 1; z-index: 1; display: block; background: #f3e6d6; -webkit-mask: var(--m-heart) center / 100% 100% no-repeat; mask: var(--m-heart) center / 100% 100% no-repeat; animation: m-hsin 1s .15s var(--m-ease) backwards, m-hsbeat 1.2s 3.1s ease-in-out 2; }
.m-hsheart img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.m-hsline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; pointer-events: none; }
.m-hsline path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-hsline .a { stroke: var(--m-accent); stroke-width: 7; } .m-hsline .b { stroke: #7d1420; stroke-width: 2.2; stroke-dasharray: 5 6; opacity: .5; }
.m-hsdraw { stroke: #fff; stroke-width: 18; stroke-dasharray: 100; animation: m-hsdraw 2.6s .35s cubic-bezier(.55,.1,.35,1) backwards; }
.m-hsball, .m-hsskein { position: absolute; z-index: 3; display: block; filter: drop-shadow(0 12px 12px rgba(43,36,38,.24)); transition: transform .45s var(--m-ease); }
.m-hsball img, .m-hsskein img { display: block; width: 100%; height: auto; border-radius: 0; }
.m-hsball { animation: m-hsroll 1.4s var(--m-ease) backwards; }
.m-hsball.b1 { left: 1%; top: 77%; width: 21%; --fx: -190%; --fr: -420deg; animation-delay: .05s; }
.m-hsball.b2 { left: 77%; top: 74%; width: 19%; --fx: 190%; --fr: 420deg; animation-delay: .25s; }
.m-hsball.b3 { left: 82%; top: 0; width: 16%; --fx: 140%; --fr: 300deg; animation-delay: .45s; }
.m-hsskein { left: -2%; top: 2%; width: 30%; rotate: -14deg; animation: m-hsdrop .9s .8s cubic-bezier(.3,1.4,.5,1) backwards; }
.m-hsball:hover { transform: rotate(-24deg) scale(1.06); } .m-hsskein:hover { transform: translateY(-6px) rotate(4deg); }
@keyframes m-hsdraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes m-hsin { from { transform: scale(.82); } } @keyframes m-hsbeat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.045); } 50% { transform: scale(.99); } 70% { transform: scale(1.025); } }
@keyframes m-hsroll { from { transform: translateX(var(--fx)) rotate(var(--fr)); } } @keyframes m-hsdrop { from { transform: translateY(-40px) rotate(-18deg); opacity: 0; } }
.m-hsgar { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 14px; padding: 26px clamp(18px, 4vw, 72px) clamp(26px, 4vh, 44px); }
.m-hsgline { position: absolute; left: 0; top: 6px; width: 100%; height: 24px; overflow: visible; pointer-events: none; }
.m-hsgline { animation: m-hswipe 1.5s 1.2s cubic-bezier(.6,.1,.3,1) backwards; } .m-hsgline path { fill: none; stroke: var(--m-accent); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@keyframes m-hswipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.m-hstag { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; margin-top: calc(10px + var(--dy, 0px)); padding: 12px 14px 12px 12px; border-radius: 14px; background: #fff; border: 1.5px solid color-mix(in srgb, var(--m-accent) 22%, transparent); box-shadow: 0 10px 24px rgba(43,36,38,.08); color: var(--m-ink) !important; text-decoration: none; transform-origin: 50% -22px; animation: m-hshang .9s calc(1.5s + var(--i) * .1s) var(--m-ease) backwards; transition: transform .5s cubic-bezier(.3,1.6,.5,1), box-shadow .3s, border-color .3s; }
.m-hstag::before { content: ""; position: absolute; left: 50%; top: -22px; width: 2px; height: 22px; margin-left: -1px; background: var(--m-accent); }
.m-hstag::after { content: ""; position: absolute; left: 50%; top: -9px; width: 12px; height: 11px; margin-left: -6px; background: var(--m-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 94C20 72 0 52 0 30 0 13 13 0 29 0c10 0 17 5 21 13C54 5 61 0 71 0c16 0 29 13 29 30 0 22-20 42-50 64Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 94C20 72 0 52 0 30 0 13 13 0 29 0c10 0 17 5 21 13C54 5 61 0 71 0c16 0 29 13 29 30 0 22-20 42-50 64Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.m-hstag:hover, .m-hstag:focus-visible { transform: rotate(-3deg); border-color: var(--m-accent); box-shadow: 0 16px 30px rgba(198,47,59,.18); }
.m-hstag:focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; }
.m-hsimg { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--m-soft); box-shadow: 0 0 0 3px #fff, 0 0 0 5px color-mix(in srgb, var(--m-accent) 35%, transparent); }
.m-hsimg img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 4px; border-radius: 0; transition: transform .45s var(--m-ease); } .m-hstag:hover .m-hsimg img { transform: rotate(-10deg) scale(1.08); }
.m-hstx { min-width: 0; } .m-hstx b { display: block; font: 700 14px/1.2 var(--m-body); color: var(--m-ink); overflow-wrap: anywhere; } .m-hstx small { display: block; margin-top: 4px; font: 600 12px/1.2 var(--m-body); color: var(--m-accent-2); }
@keyframes m-hshang { from { transform: rotate(9deg) translateY(-10px); opacity: 0; } }
body.hv-heartstring main section > .wrap > h2::after { content: ""; display: block; width: 128px; height: 14px; margin-top: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 14'%3E%3Cpath d='M2 8C20 2 34 13 52 8S82 2 100 7' fill='none' stroke='%23C62F3B' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M114 13C107 8 103 5 103 2.8 103 1.2 104.3 0 106 0c1.2 0 2.4.6 3 1.6.6-1 1.8-1.6 3-1.6 1.7 0 3 1.2 3 2.8 0 2.2-4 5.2-11 10.2Z' transform='translate(4 0)' fill='%23C62F3B'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; }
body.hv-heartstring .pcard:hover, body.hv-heartstring .m-acard:hover { box-shadow: 0 0 0 2px var(--m-accent), 0 18px 40px rgba(198,47,59,.16); }
body.hv-heartstring .m-acard .m-art { background: radial-gradient(circle at 1px 1px, rgba(198,47,59,.12) 1px, transparent 1.6px) 0 0 / 14px 14px, #fff8f0; }
body.hv-heartstring .m-cta .m-band { border-radius: 22px; background: radial-gradient(60% 120% at 100% 0, rgba(255,255,255,.12), transparent 70%), linear-gradient(120deg, var(--m-accent-2), var(--m-accent)); }
body.hv-heartstring .m-cta .m-band::before { width: 340px; height: 320px; right: -60px; top: -60px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 92C21 71 3 52 3 31 3 15 15 4 30 4c9 0 16 5 20 12C54 9 61 4 70 4c15 0 27 11 27 27 0 21-18 40-47 61Z' fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='3' stroke-dasharray='5 4'/%3E%3C/svg%3E") no-repeat center / contain; rotate: 12deg; }
body.hv-heartstring .m-page-hero { background: radial-gradient(60% 120% at 100% 0, rgba(198,47,59,.45), transparent 70%), linear-gradient(120deg, var(--m-hero-a), #4a2328); } body.hv-heartstring .m-page-hero .eyebrow { color: #f5b8b2; }
body.hv-heartstring footer.site { background: var(--m-hero-a); color: #e8dcd6; border: 0; } body.hv-heartstring footer.site nav a { color: #fff; }
body.hv-heartstring .m-collage .m-card { border-radius: 18px; }

/* unwind (Red Heart): a yarn ball rolls along the bottom edge on hover, shrinking as it leaves a plied strand behind */
body.bv-unwind .btn { border-radius: 999px; padding: 15px 26px; font-weight: 700; }
body.bv-unwind .btn::before { content: ""; position: absolute; left: 13px; bottom: 3px; width: 12px; height: 12px; border-radius: 50%; z-index: 0; pointer-events: none; background: repeating-linear-gradient(58deg, currentColor 0 1.5px, transparent 1.5px 3px), radial-gradient(circle, transparent 52%, currentColor 56%); opacity: 0; transition: left .75s cubic-bezier(.45,.05,.3,1), transform .75s cubic-bezier(.45,.05,.3,1), opacity .18s; }
body.bv-unwind .btn::after { inset: auto 19px 7.5px 19px; height: 2.5px; border-radius: 2px; background: repeating-linear-gradient(115deg, currentColor 0 2.4px, transparent 2.4px 4px); opacity: .85; transform: scaleX(0); transform-origin: left; transition: transform .75s cubic-bezier(.45,.05,.3,1); z-index: 0; }
body.bv-unwind .btn:is(:hover, :focus-visible)::before { left: calc(100% - 25px); opacity: 1; transform: rotate(600deg) scale(.45); }
body.bv-unwind .btn:is(:hover, :focus-visible)::after { transform: scaleX(1); }
body.bv-unwind .btn .arr { transition: transform .45s var(--m-ease); } body.bv-unwind .btn:hover .arr { transform: translateX(5px); }

/* gameboard (Pressman): a board-game track rings a listing photo, game boxes land on the corners, a pawn hops, two dice roll; categories are numbered spaces */
body.hv-gameboard .m-hero { background: radial-gradient(45% 55% at 78% 45%, rgba(242,181,49,.22), transparent 70%), radial-gradient(35% 45% at 4% 96%, rgba(46,157,91,.14), transparent 70%), repeating-conic-gradient(rgba(29,78,158,.045) 0 25%, transparent 0 50%) 0 0 / 56px 56px, var(--m-bg); }
body.hv-gameboard .m-hero h1 { font-size: clamp(40px, 5vw, 70px) !important; line-height: 1.04 !important; letter-spacing: -.015em; }
.m-gb { position: relative; width: min(100%, 540px); justify-self: center; padding: 5%; }
.m-gbboard { position: relative; aspect-ratio: 1; border-radius: 16px; background: #fffaf0; box-shadow: 0 0 0 9px #1d4e9e, 0 0 0 13px #f2b531, 0 36px 60px rgba(20,33,61,.3); rotate: -2deg; animation: m-gbin 1s var(--m-ease) backwards; }
.m-gbtrack { position: absolute; inset: 4%; display: grid; grid-template: repeat(7, minmax(0, 1fr)) / repeat(7, minmax(0, 1fr)); gap: 3px; }
.m-gbtrack i { border-radius: 5px; background: #1d4e9e; box-shadow: inset 0 -3px 0 rgba(0,0,0,.16), inset 0 2px 0 rgba(255,255,255,.25); animation: m-gbsq .35s calc(.15s + var(--j, 0) * .03s) cubic-bezier(.3,1.6,.5,1) backwards; }
.m-gbtrack i.k1 { background: #d63a2f; } .m-gbtrack i.k2 { background: #f2b531; } .m-gbtrack i.k3 { background: #2e9d5b; }
.m-gbgo { grid-area: 7 / 1; z-index: 1; display: grid; place-items: center; border-radius: 5px; background: #14213d; color: #f2b531; font: 800 clamp(7px, 1.2vw, 10px)/1 var(--m-body); letter-spacing: .04em; }
.m-gbphoto { position: absolute; inset: calc(17.15% + 5px); z-index: 1; display: block; border-radius: 10px; overflow: hidden; background: #e9e2d2; box-shadow: 0 0 0 4px #fff, 0 12px 24px rgba(20,33,61,.22); }
.m-gbphoto img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.m-gbpawn { position: absolute; left: 56.6%; top: 4%; width: 13.1%; height: 13.1%; z-index: 2; translate: 0 -34%; filter: drop-shadow(0 6px 4px rgba(20,33,61,.35)); animation: m-gbhop 2s 1.5s ease-in-out backwards; }
.m-gbpawn::before { content: ""; position: absolute; left: 34%; top: 6%; width: 32%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a7a, #c22a20 70%); }
.m-gbpawn::after { content: ""; position: absolute; left: 22%; top: 34%; width: 56%; height: 58%; background: linear-gradient(90deg, #a82219, #e2493c 45%, #b5261c); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); border-radius: 0 0 6px 6px; }
.m-gbdice { position: absolute; left: 50%; bottom: 21%; z-index: 3; display: flex; gap: 16px; translate: -50% 0; perspective: 700px; }
.m-die { --s: clamp(34px, 7.6vw, 50px); position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; transform: translate(0, 0) rotateX(-24deg) rotateY(32deg) rotateZ(0deg); animation: m-gbroll 1.5s .85s cubic-bezier(.2,.75,.3,1) backwards; }
.m-die.d2 { transform: translate(0, 0) rotateX(-20deg) rotateY(-122deg) rotateZ(4deg); animation-name: m-gbroll2; animation-delay: .95s; }
.m-die i { --d: radial-gradient(circle closest-side, #14213d 72%, transparent 80%); --z: calc(var(--s) / 2); position: absolute; inset: 0; border-radius: 18%; backface-visibility: hidden; box-shadow: inset 0 0 0 1.5px rgba(20,33,61,.14), inset 0 -5px 9px rgba(20,33,61,.12); }
.m-die .f1 { transform: translateZ(var(--z)); background: var(--d) 15% 15% / 22% 22% no-repeat, var(--d) 85% 15% / 22% 22% no-repeat, var(--d) 50% 50% / 22% 22% no-repeat, var(--d) 15% 85% / 22% 22% no-repeat, var(--d) 85% 85% / 22% 22% no-repeat, #fff; }
.m-die .f6 { transform: rotateY(180deg) translateZ(var(--z)); background: var(--d) 15% 15% / 22% 22% no-repeat, var(--d) 85% 85% / 22% 22% no-repeat, #fff; }
.m-die .f2 { transform: rotateY(90deg) translateZ(var(--z)); background: var(--d) 15% 15% / 22% 22% no-repeat, var(--d) 50% 50% / 22% 22% no-repeat, var(--d) 85% 85% / 22% 22% no-repeat, #fff; }
.m-die .f5 { transform: rotateY(-90deg) translateZ(var(--z)); background: var(--d) 15% 15% / 22% 22% no-repeat, var(--d) 85% 15% / 22% 22% no-repeat, var(--d) 15% 85% / 22% 22% no-repeat, var(--d) 85% 85% / 22% 22% no-repeat, #fff; }
.m-die .f3 { transform: rotateX(90deg) translateZ(var(--z)); background: radial-gradient(circle closest-side, #d63a2f 72%, transparent 80%) 50% 50% / 26% 26% no-repeat, #fff; }
.m-die .f4 { transform: rotateX(-90deg) translateZ(var(--z)); background: var(--d) 15% 15% / 22% 22% no-repeat, var(--d) 85% 15% / 22% 22% no-repeat, var(--d) 15% 50% / 22% 22% no-repeat, var(--d) 85% 50% / 22% 22% no-repeat, var(--d) 15% 85% / 22% 22% no-repeat, var(--d) 85% 85% / 22% 22% no-repeat, #fff; }
.m-gbpc { position: absolute; z-index: 4; display: block; filter: drop-shadow(0 14px 12px rgba(20,33,61,.3)); animation: m-gbdrop .8s calc(.55s + var(--i, 0) * .14s) cubic-bezier(.3,1.5,.5,1) backwards; transition: transform .4s var(--m-ease); }
.m-gbpc img { display: block; width: 100%; height: auto; border-radius: 0; }
.m-gbpc.q1 { left: -3%; top: -4%; width: 25%; rotate: -8deg; } .m-gbpc.q2 { right: -3%; top: -5%; width: 26%; rotate: 9deg; }
.m-gbpc.q3 { left: -5%; bottom: 3%; width: 33%; rotate: 6deg; } .m-gbpc.q4 { right: -5%; bottom: 0; width: 35%; rotate: -5deg; }
.m-gbpc:hover { transform: translateY(-8px) scale(1.04); }
@keyframes m-gbin { from { transform: translateY(24px) scale(.96); } } @keyframes m-gbsq { from { transform: scale(0); } }
@keyframes m-gbdrop { from { transform: translateY(-70px) scale(1.15); opacity: 0; } }
@keyframes m-gbroll { 0% { transform: translate(-160px, -150px) rotateX(420deg) rotateY(-330deg) rotateZ(120deg); } 55% { transform: translate(8px, 6px) rotateX(-50deg) rotateY(60deg) rotateZ(-10deg); } 78% { transform: translate(0, -8px) rotateX(-16deg) rotateY(24deg) rotateZ(3deg); } 100% { transform: translate(0, 0) rotateX(-24deg) rotateY(32deg) rotateZ(0deg); } }
@keyframes m-gbroll2 { 0% { transform: translate(-120px, -190px) rotateX(-380deg) rotateY(260deg) rotateZ(-140deg); } 55% { transform: translate(10px, 4px) rotateX(-40deg) rotateY(-150deg) rotateZ(14deg); } 78% { transform: translate(0, -7px) rotateX(-14deg) rotateY(-114deg) rotateZ(0deg); } 100% { transform: translate(0, 0) rotateX(-20deg) rotateY(-122deg) rotateZ(4deg); } }
@keyframes m-gbhop { 0% { translate: -300% -34%; } 11% { translate: -250% -80%; } 22% { translate: -200% -34%; } 33% { translate: -200% -34%; } 44% { translate: -150% -80%; } 55% { translate: -100% -34%; } 66% { translate: -100% -34%; } 77% { translate: -50% -80%; } 88%, 100% { translate: 0 -34%; } }
.m-gbpath { position: relative; z-index: 2; display: grid; grid-template-columns: auto repeat(var(--n, 5), minmax(0, 1fr)); gap: 14px; align-items: stretch; padding: 18px clamp(18px, 4vw, 72px) clamp(26px, 4vh, 44px); }
.m-gbpath::before { content: ""; position: absolute; left: clamp(18px, 4vw, 72px); right: clamp(18px, 4vw, 72px); top: calc(50% + 4px); border-top: 4px dashed rgba(20,33,61,.22); z-index: -1; }
.m-gbstart { display: grid; place-items: center; padding: 0 16px; border-radius: 12px; background: #14213d; color: #f2b531; font: 800 13px/1 var(--m-head); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 5px 0 #0a1224; animation: m-rise .7s .8s var(--m-ease) backwards; }
.m-gbsp { --c: #1d4e9e; --e: #fff; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; min-width: 0; padding: 18px 12px 12px; border-radius: 12px; background: #fff; border: 3px solid var(--c); box-shadow: 0 5px 0 var(--c); color: var(--m-ink) !important; text-decoration: none; animation: m-rise .7s calc(.9s + var(--i) * .08s) var(--m-ease) backwards; transition: transform .35s cubic-bezier(.3,1.6,.5,1), box-shadow .35s; }
.m-gbsp.k1 { --c: #d63a2f; } .m-gbsp.k2 { --c: #e0a21c; --e: #14213d; } .m-gbsp.k3 { --c: #2e9d5b; }
.m-gbsp em { position: absolute; top: -13px; left: 12px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: var(--e); font: 800 13px/1 var(--m-head); font-style: normal; box-shadow: 0 0 0 3px #fff; transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.m-gbimg { grid-row: span 2; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--c) 10%, #fff); }
.m-gbimg img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 3px; border-radius: 0; }
.m-gbsp b { display: block; font: 700 14px/1.2 var(--m-body); color: var(--m-ink); overflow-wrap: anywhere; } .m-gbsp small { display: block; margin-top: 4px; font: 600 12px/1.2 var(--m-body); color: var(--m-body-ink); }
.m-gbsp:hover, .m-gbsp:focus-visible { transform: translateY(-6px); box-shadow: 0 11px 0 var(--c); } .m-gbsp:hover em, .m-gbsp:focus-visible em { transform: rotate(360deg) scale(1.15); }
.m-gbsp:focus-visible { outline: 3px solid var(--m-ink); outline-offset: 3px; }
body.hv-gameboard main section > .wrap > h2::after { content: ""; display: block; width: 120px; height: 12px; margin-top: 10px; border-radius: 3px; background: linear-gradient(90deg, #1d4e9e 0 25%, #d63a2f 0 50%, #f2b531 0 75%, #2e9d5b 0); -webkit-mask: linear-gradient(90deg, #000 0 calc(25% - 3px), transparent 0 25%) 0 0 / 25% 100% repeat-x; mask: linear-gradient(90deg, #000 0 calc(100% - 3px), transparent 0) 0 0 / 25% 100% repeat-x; }
body.hv-gameboard .pcard:hover, body.hv-gameboard .m-acard:hover { box-shadow: 0 0 0 3px var(--m-accent), 0 8px 0 var(--m-accent); }
body.hv-gameboard .m-acard .m-art { background: repeating-conic-gradient(rgba(29,78,158,.06) 0 25%, #fffaf0 0 50%) 0 0 / 28px 28px; }
body.hv-gameboard .m-cta .m-band { border-radius: 18px; background: linear-gradient(120deg, #14213d, var(--m-accent)); box-shadow: 0 0 0 6px #f2b531, 0 30px 60px rgba(20,33,61,.25); }
body.hv-gameboard .m-cta .m-band::before { width: 300px; height: 300px; right: -70px; top: -90px; border-radius: 0; rotate: 14deg; background: repeating-conic-gradient(rgba(255,255,255,.12) 0 25%, transparent 0 50%) 0 0 / 60px 60px; -webkit-mask: radial-gradient(closest-side, #000 60%, transparent); mask: radial-gradient(closest-side, #000 60%, transparent); }
body.hv-gameboard .m-page-hero { background: radial-gradient(60% 120% at 100% 0, rgba(242,181,49,.3), transparent 70%), linear-gradient(120deg, #14213d, var(--m-accent)); } body.hv-gameboard .m-page-hero .eyebrow { color: #f8d27a; }
body.hv-gameboard footer.site { background: #14213d; color: #d3dbea; border: 0; } body.hv-gameboard footer.site nav a { color: #fff; }

/* dice (Pressman): a raised game-piece button; pips pop into the corners and the face tumbles on hover */
body.bv-dice .btn { border-radius: 14px; padding: 15px 26px; font-weight: 700; }
body.bv-dice :is(.btn.accent, .pcard .btn, .m-btn-main) { box-shadow: 0 5px 0 #0f2f63; } body.bv-dice :is(.btn.accent, .pcard .btn, .m-btn-main):hover { box-shadow: 0 8px 0 #0f2f63; }
body.bv-dice .btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #0f2f63; }
body.bv-dice .btn::after { --pd: radial-gradient(circle closest-side, currentColor 70%, transparent 90%); inset: 0; transform: scale(.4); opacity: 0; background: var(--pd) 7px 7px / 7px 7px no-repeat, var(--pd) calc(100% - 7px) 7px / 7px 7px no-repeat, var(--pd) 7px calc(100% - 7px) / 7px 7px no-repeat, var(--pd) calc(100% - 7px) calc(100% - 7px) / 7px 7px no-repeat; transition: transform .4s cubic-bezier(.3,1.6,.5,1), opacity .25s; z-index: 0; pointer-events: none; }
body.bv-dice .btn:is(:hover, :focus-visible)::after { transform: scale(1); opacity: .6; }
body.bv-dice .btn:is(:hover, :focus-visible) { animation: m-dctumble .55s cubic-bezier(.3,1.3,.5,1); }
@keyframes m-dctumble { 0% { rotate: 0deg; } 35% { rotate: -6deg; } 70% { rotate: 3deg; } 100% { rotate: 0deg; } }

/* bakery (Caron): a pastel bakery case — the lead yarn cake under a glass dome on a cake stand, a striped sunburst turning behind it, more cakes on doilies, bakery tags on a string */
body.hv-bakery .m-hero { background: radial-gradient(44% 56% at 76% 48%, #fde2ee, transparent 70%), radial-gradient(34% 44% at 6% 94%, #d6f1e6, transparent 70%), var(--m-bg); }
body.hv-bakery .m-hero .m-inner { padding-top: clamp(66px, 10vh, 120px); }
body.hv-bakery .m-hero h1 { font-size: clamp(40px, 5vw, 70px) !important; line-height: 1.08 !important; letter-spacing: -.01em; }
.m-bkawn { position: absolute; left: 0; right: 0; top: 0; height: 40px; z-index: 1; background: repeating-linear-gradient(90deg, #8e3b8f 0 36px, #fbe3ee 36px 72px, #e7799e 72px 108px, #fbe3ee 108px 144px, #4fb394 144px 180px, #fbe3ee 180px 216px); -webkit-mask: radial-gradient(18px at 18px 22px, #000 98%, transparent) 0 0 / 36px 100% repeat-x, linear-gradient(#000 0 0) 0 0 / 100% 22px no-repeat; mask: radial-gradient(18px at 18px 22px, #000 98%, transparent) 0 0 / 36px 100% repeat-x, linear-gradient(#000 0 0) 0 0 / 100% 22px no-repeat; animation: m-bkawn .9s var(--m-ease) backwards; }
.m-bkcase { position: relative; width: min(100%, 560px); aspect-ratio: 1 / .95; justify-self: center; overflow: hidden; border-radius: 28px 28px 16px 16px; background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.3)), #fbeaf2; border: 2px solid rgba(142,59,143,.16); box-shadow: inset 0 0 0 8px rgba(255,255,255,.65), 0 34px 60px rgba(58,35,64,.16); }
.m-bkcase::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,.4) 28%, transparent 34%); }
.m-bkburst { position: absolute; left: 50%; top: 36%; width: 82%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: repeating-conic-gradient(#f5c8da 0 7.5deg, #fff 0 15deg, #cdeee1 0 22.5deg, #fff 0 30deg, #e3d2f2 0 37.5deg, #fff 0 45deg); -webkit-mask: radial-gradient(closest-side, #000 96%, transparent); mask: radial-gradient(closest-side, #000 96%, transparent); opacity: .75; animation: m-bkspin 60s linear infinite; }
.m-bkstand { position: absolute; left: 50%; top: 3%; width: 56%; height: 62%; translate: -50% 0; }
.m-bkcake { position: absolute; left: 12%; right: 12%; bottom: 23%; z-index: 2; display: block; filter: drop-shadow(0 8px 8px rgba(58,35,64,.18)); animation: m-bkcake .9s .25s cubic-bezier(.3,1.3,.5,1) backwards; }
.m-bkcake img { display: block; width: 100%; height: auto; border-radius: 0; }
.m-bkplate { position: absolute; left: 4%; right: 4%; bottom: 17%; height: 10%; z-index: 1; border-radius: 50%; background: linear-gradient(#fff 30%, #efd6e4); box-shadow: 0 5px 0 #dcb6cc, 0 14px 22px rgba(58,35,64,.15); }
.m-bkplate::before { content: ""; position: absolute; left: 50%; top: 92%; width: 13%; height: 120%; translate: -50% 0; background: linear-gradient(90deg, #e3c3d6, #fff 45%, #dcbad0); }
.m-bkplate::after { content: ""; position: absolute; left: 27%; right: 27%; top: 196%; height: 62%; border-radius: 50%; background: linear-gradient(#fff 30%, #e6c8da); box-shadow: 0 6px 12px rgba(58,35,64,.15); }
.m-bkrib { position: absolute; left: -4%; bottom: 12%; width: 108%; height: auto; z-index: 0; overflow: visible; pointer-events: none; }
.m-bkrib ellipse { fill: none; stroke-width: 7; stroke-linecap: round; stroke: #8e3b8f; stroke-dasharray: 4 8; animation: m-bkrib 2.4s linear infinite; }
.m-bkdome { position: absolute; left: 5%; right: 5%; top: 1%; bottom: 22.5%; z-index: 3; pointer-events: none; border-radius: 50% 50% 10px 10px / 64% 64% 10px 10px; background: linear-gradient(100deg, transparent 18%, rgba(255,255,255,.6) 25%, transparent 33%), radial-gradient(120% 90% at 50% 100%, rgba(255,255,255,.06), rgba(255,255,255,.3)); border: 2px solid rgba(255,255,255,.9); box-shadow: inset 0 0 0 1px rgba(142,59,143,.18), inset -12px -8px 26px rgba(255,255,255,.45), 0 0 0 1px rgba(142,59,143,.08); animation: m-bkdome 1s .75s var(--m-ease) backwards; transition: translate .5s var(--m-ease); }
.m-bkdome::before { content: ""; position: absolute; left: 50%; top: -14px; width: 26px; height: 16px; margin-left: -13px; border-radius: 50% 50% 4px 4px; background: linear-gradient(#fff, #e9cfe0); box-shadow: 0 0 0 2px rgba(142,59,143,.18); }
.m-bkstand:hover .m-bkdome { translate: 0 -16px; }
.m-bkshelf { position: absolute; left: 4%; right: 4%; bottom: 4%; height: 26%; z-index: 4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4%; align-items: end; padding: 0 3% 12px; border-bottom: 9px solid #f2c9dc; box-shadow: 0 6px 0 #dfa3bf; background: linear-gradient(180deg, transparent 72%, rgba(255,255,255,.7) 72% 76%, transparent 76%); }
.m-bkc { position: relative; display: block; animation: m-bkpop .7s calc(1.05s + var(--i, 0) * .1s) cubic-bezier(.3,1.5,.5,1) backwards; transition: transform .4s var(--m-ease); }
.m-bkc::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -9px; height: 16px; z-index: -1; border-radius: 50%; background: #fff; border: 2px dotted #e7a3c1; }
.m-bkc img { display: block; width: 100%; height: auto; border-radius: 0; filter: drop-shadow(0 6px 5px rgba(58,35,64,.15)); }
.m-bkc:hover { transform: translateY(-8px) rotate(-4deg); }
@keyframes m-bkawn { from { transform: translateY(-100%); } } @keyframes m-bkspin { to { rotate: 360deg; } }
@keyframes m-bkcake { from { transform: translateY(-36px) scale(.94); } } @keyframes m-bkdome { from { translate: 0 -60px; opacity: 0; } }
@keyframes m-bkpop { from { transform: scale(.4) translateY(20px); opacity: 0; } } @keyframes m-bkrib { to { stroke-dashoffset: -24; } }
.m-bktags { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 18px; padding: 34px clamp(18px, 4vw, 72px) clamp(26px, 4vh, 44px); }
.m-bktags::before { content: ""; position: absolute; left: clamp(18px, 4vw, 72px); right: clamp(18px, 4vw, 72px); top: 14px; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, #8e3b8f 0 7px, #fff 7px 9px, #e7799e 9px 16px, #fff 16px 18px); }
.m-bktag { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px 14px 34px; color: var(--m-ink) !important; text-decoration: none; filter: drop-shadow(0 8px 12px rgba(58,35,64,.12)); transform-origin: 20px -20px; animation: m-bkswing 1s calc(1.2s + var(--i, 0) * .1s) var(--m-ease) backwards; transition: transform .6s cubic-bezier(.3,1.6,.5,1); }
.m-bktag::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--t); clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%); -webkit-mask: radial-gradient(circle 5px at 17px 50%, transparent 96%, #000); mask: radial-gradient(circle 5px at 17px 50%, transparent 96%, #000); }
.m-bktag::before { content: ""; position: absolute; left: 16px; top: -20px; width: 2px; height: calc(50% + 17px); background: #8e3b8f; border-radius: 2px; }
.m-bktag:hover, .m-bktag:focus-visible { transform: rotate(-5deg); } .m-bktag:focus-visible { outline: 3px solid var(--m-accent); outline-offset: 4px; }
.m-bkimg { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(142,59,143,.28); }
.m-bkimg img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 4px; border-radius: 0; }
.m-bktx { min-width: 0; } .m-bktx b { display: block; font: 700 14.5px/1.15 var(--m-body); color: var(--m-ink); overflow-wrap: anywhere; } .m-bktx small { display: block; margin-top: 4px; font: 700 12px/1.2 var(--m-body); color: #6c2a6e; }
@keyframes m-bkswing { 0% { transform: rotate(14deg); opacity: 0; } 45% { transform: rotate(-6deg); opacity: 1; } 75% { transform: rotate(3deg); } 100% { transform: rotate(0deg); } }
body.hv-bakery main section > .wrap > h2::after { content: ""; display: block; width: 132px; height: 12px; margin-top: 10px; background: radial-gradient(circle at 6px 0, #e7799e 5.5px, transparent 6px) 0 0 / 12px 12px repeat-x, linear-gradient(#8e3b8f 0 0) 0 0 / 100% 4px no-repeat; }
body.hv-bakery .pcard, body.hv-bakery .m-acard { border-radius: 20px; } body.hv-bakery :is(.pcard, .m-acard, .m-rank, .m-vs) h3 { font-family: var(--m-body); font-weight: 700; letter-spacing: 0; } body.hv-bakery .pcard:hover, body.hv-bakery .m-acard:hover { box-shadow: 0 0 0 2px #e7799e, 0 18px 40px rgba(142,59,143,.16); }
body.hv-bakery .m-acard .m-art { background: repeating-linear-gradient(90deg, #fbe7f0 0 18px, #fff 18px 36px, #dff3eb 36px 54px, #fff 54px 72px); }
body.hv-bakery .m-cta .m-band { border-radius: 28px; background: linear-gradient(120deg, #5a2160, var(--m-accent) 60%, #b4508f); }
body.hv-bakery .m-cta .m-band::before { width: 380px; height: 380px; right: -120px; top: -150px; background: repeating-conic-gradient(rgba(255,255,255,.14) 0 7.5deg, transparent 0 15deg); }
body.hv-bakery .m-page-hero { background: radial-gradient(60% 120% at 100% 0, rgba(231,121,158,.4), transparent 70%), linear-gradient(120deg, var(--m-hero-a), var(--m-accent)); } body.hv-bakery .m-page-hero .eyebrow { color: #f7c6da; }
body.hv-bakery footer.site { background: var(--m-hero-a); color: #eadcef; border: 0; } body.hv-bakery footer.site nav a { color: #fff; }
body.hv-bakery .m-collage .m-card { border-radius: 24px; }

/* frosting (Caron): a piped, scalloped frosting wave with sprinkles rises to fill the button on hover */
body.bv-frosting .btn { border-radius: 999px; padding: 15px 26px; font-weight: 700; --m-fr: var(--m-accent-2); }
body.bv-frosting .btn::after { inset: -2px; transform: translateY(106%); transition: transform .55s cubic-bezier(.3,1.15,.4,1); z-index: -1; background: radial-gradient(circle, #fff 0 1.3px, transparent 1.9px) 4px 18px / 17px 13px, radial-gradient(circle, #f7c948 0 1.3px, transparent 1.9px) 11px 25px / 19px 15px, radial-gradient(circle, #a8e0cc 0 1.3px, transparent 1.9px) 2px 31px / 15px 12px, var(--m-fr); -webkit-mask: radial-gradient(circle 7px at 7px 9px, #000 97%, transparent) 0 0 / 14px 16px repeat-x, linear-gradient(#000 0 0) 0 9px / 100% 100% no-repeat; mask: radial-gradient(circle 7px at 7px 9px, #000 97%, transparent) 0 0 / 14px 16px repeat-x, linear-gradient(#000 0 0) 0 9px / 100% 100% no-repeat; }
body.bv-frosting .btn:is(:hover, :focus-visible)::after { transform: translateY(0); }
body.bv-frosting :is(.btn.ghost, .m-btn-ghost) { --m-fr: var(--m-accent); }
body.bv-frosting .btn.m-btn-ghost:is(:hover, :focus-visible), body.bv-frosting .btn.ghost:is(:hover, :focus-visible) { background: transparent !important; color: #fff !important; border-color: var(--m-accent) !important; }
body.bv-frosting :is(.m-cta, .m-page-hero) .btn.m-btn-ghost { --m-fr: #fff; } body.bv-frosting :is(.m-cta, .m-page-hero) .btn.m-btn-ghost:is(:hover, :focus-visible) { color: var(--m-ink) !important; border-color: #fff !important; }
body.bv-frosting .btn.m-white { --m-fr: #f7d4e2; } body.bv-frosting .btn.m-white:hover { color: var(--m-ink); }
body.bv-frosting .btn .arr { transition: transform .45s cubic-bezier(.3,1.6,.5,1); } body.bv-frosting .btn:hover .arr { transform: translateX(4px) rotate(-12deg); }

/* plugin (SCOVEE): a graphite charging dock — a listing photo, a real USB C plug slides into its port, the LED turns green, a pulse runs down the cable into a battery that fills */
body.hv-plugin .m-hero { background: radial-gradient(48% 60% at 78% 40%, rgba(47,140,255,.26), transparent 70%), radial-gradient(40% 50% at 0 100%, rgba(61,220,132,.13), transparent 70%), linear-gradient(160deg, #0a0d12, var(--m-hero-a) 40%, #18212d); }
body.hv-plugin .m-hero h1 { font-size: clamp(40px, 5vw, 72px) !important; line-height: 1.02 !important; letter-spacing: -.01em; }
body.hv-plugin .m-hero .eyebrow { color: #84bcff; } body.hv-plugin .m-hero .sub { color: rgba(255,255,255,.86); }
body.hv-plugin .m-hero .m-chips span { background: rgba(127,184,255,.08); border-color: rgba(127,184,255,.28); }
.m-pidev { position: relative; width: min(100%, 560px); aspect-ratio: 600 / 552; justify-self: center; border-radius: 28px; background: linear-gradient(150deg, #1d2530, #0e1319); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06), 0 40px 80px rgba(0,0,0,.5); }
.m-pigrid { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(rgba(127,184,255,.07) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(127,184,255,.07) 1px, transparent 1px) 0 0 / 24px 24px; -webkit-mask: radial-gradient(80% 80% at 40% 40%, #000, transparent); mask: radial-gradient(80% 80% at 40% 40%, #000, transparent); }
.m-piphoto { position: absolute; left: 4%; top: 31%; width: 51%; z-index: 2; display: block; padding: 8px; border-radius: 18px; background: #fff; rotate: -3deg; box-shadow: 0 24px 40px rgba(0,0,0,.45); animation: m-picard .9s .1s var(--m-ease) backwards; transition: rotate .4s var(--m-ease); }
.m-piphoto img { display: block; width: 100%; height: auto; border-radius: 12px; } .m-piphoto:hover { rotate: 0deg; }
.m-pidock { position: absolute; left: 64%; top: 6%; width: 30%; height: 62%; z-index: 4; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); padding: 10px 12px; border-radius: 16px; background: linear-gradient(90deg, #2b3542, #1a222c 40%, #232c37); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.05), -10px 18px 30px rgba(0,0,0,.4); }
.m-piport { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 10px; row-gap: 5px; border-bottom: 1px solid rgba(255,255,255,.06); }
.m-piport:last-child { border-bottom: 0; }
.m-piport .s { grid-row: span 2; align-self: center; width: 46px; height: 18px; background: linear-gradient(#5d6878 0 0) 50% 50% / 58% 3px no-repeat, #04060a; border: 2px solid #8b97a8; border-radius: 9px; }
.m-piport.p-micro .s { width: 40px; height: 13px; border: 0; border-radius: 2px; background: linear-gradient(#8b97a8 0 0) 50% 32% / 70% 2px no-repeat, #04060a; clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%); box-shadow: inset 0 0 0 2px #8b97a8; }
.m-piport.p-mini .s { width: 38px; height: 17px; border: 0; border-radius: 2px; background: linear-gradient(#8b97a8 0 0) 50% 40% / 64% 3px no-repeat, #04060a; clip-path: polygon(0 0, 100% 0, 100% 58%, 84% 100%, 16% 100%, 0 58%); box-shadow: inset 0 0 0 2px #8b97a8; }
.m-piport.p-dc .s { width: 24px; height: 24px; margin-inline: 11px; border-radius: 50%; border: 3px solid #8b97a8; background: radial-gradient(circle, #c9d2de 0 2.5px, #04060a 3px); }
.m-piport .led { width: 7px; height: 7px; border-radius: 50%; background: #3a4655; align-self: end; }
.m-piport.p-c .led { background: #3ddc84; box-shadow: 0 0 10px #3ddc84, 0 0 2px #3ddc84; animation: m-piled .4s 1.55s steps(1) backwards; }
.m-piport b { align-self: start; font: 700 11px/1 var(--m-head); letter-spacing: .1em; text-transform: uppercase; color: #9fb0c4; }
.m-piplug { position: absolute; left: 36%; top: 3%; width: 30%; rotate: -16deg; z-index: 3; pointer-events: none; filter: drop-shadow(0 12px 12px rgba(0,0,0,.55)); animation: m-piplug 1.3s .45s cubic-bezier(.5,0,.2,1) backwards; }
.m-piplug img { display: block; width: 100%; height: auto; border-radius: 0; }
.m-picable { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.m-picable path { fill: none; stroke-linecap: round; stroke-linejoin: round; } .m-picable .w { stroke: #05070a; stroke-width: 11; } .m-picable .p { stroke: #3ddc84; stroke-width: 4; stroke-dasharray: 10 90; filter: drop-shadow(0 0 4px #3ddc84); animation: m-pipulse 1.6s 1.8s linear infinite; }
.m-pibat { position: absolute; left: 66%; top: 81%; width: 25%; height: 10%; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 5px; border: 3px solid #9fb0c4; border-radius: 10px; }
.m-pibat::after { content: ""; position: absolute; right: -9px; top: 30%; width: 6px; height: 40%; border-radius: 0 3px 3px 0; background: #9fb0c4; }
.m-pibat i { border-radius: 3px; background: #3ddc84; box-shadow: 0 0 8px rgba(61,220,132,.6); animation: m-pibar 3.2s linear infinite backwards; }
.m-pibat i:nth-child(1) { animation-delay: 2s; } .m-pibat i:nth-child(2) { animation-delay: 2.35s; } .m-pibat i:nth-child(3) { animation-delay: 2.7s; } .m-pibat i:nth-child(4) { animation-delay: 3.05s; }
.m-pibat b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 18px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 0 6px rgba(0,0,0,.7); }
@keyframes m-picard { from { transform: translateY(30px); } } @keyframes m-piled { from { background: #3a4655; box-shadow: none; } }
@keyframes m-piplug { 0% { transform: translateX(-80%); opacity: 0; } 15% { opacity: 1; } 72% { transform: translateX(-7%); } 86% { transform: translateX(1.5%); } 100% { transform: translateX(0); } }
@keyframes m-pipulse { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @keyframes m-pibar { 0% { opacity: .12; } 10%, 82% { opacity: 1; } 100% { opacity: .12; } }
.m-pichips { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 10px; padding: 8px clamp(18px, 4vw, 72px) clamp(24px, 4vh, 40px); }
.m-pichip { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 14px 10px 10px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(127,184,255,.22); color: #fff !important; text-decoration: none; animation: m-rise .7s calc(.8s + var(--i, 0) * .08s) var(--m-ease) backwards; transition: border-color .3s, background .3s, transform .3s var(--m-ease); }
.m-pichip::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: repeating-linear-gradient(90deg, #3ddc84 0 calc(25% - 3px), transparent 0 25%); transform: scaleX(0); transform-origin: left; transition: transform .6s steps(4, end); }
.m-pichip:hover, .m-pichip:focus-visible { border-color: rgba(61,220,132,.6); background: rgba(255,255,255,.09); transform: translateY(-2px); } .m-pichip:hover::after, .m-pichip:focus-visible::after { transform: scaleX(1); }
.m-pichip:focus-visible { outline: 3px solid #84bcff; outline-offset: 3px; }
.m-pilens { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px #0e1319, 0 0 0 4px rgba(127,184,255,.5); }
.m-pilens img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .45s var(--m-ease); } .m-pichip:hover .m-pilens img { transform: scale(1.14); }
.m-pitx { min-width: 0; } .m-pitx small { display: block; font: 700 10.5px/1.2 var(--m-head); letter-spacing: .07em; text-transform: uppercase; color: #84bcff; }
.m-pitx b { display: block; margin-top: 3px; font: 700 14px/1.2 var(--m-body); color: #fff; overflow-wrap: anywhere; } .m-pitx em { display: block; margin-top: 3px; font: 600 11.5px/1.2 var(--m-body); font-style: normal; color: rgba(255,255,255,.72); }
body.hv-plugin main section > .wrap > h2::after { content: ""; display: block; width: 120px; height: 10px; margin-top: 10px; background: linear-gradient(#1366c2 0 0) 0 50% / 92px 4px no-repeat, linear-gradient(#12161c 0 0) 92px 0 / 16px 10px no-repeat, linear-gradient(#9aa6b5 0 0) 108px 2px / 10px 6px no-repeat; border-radius: 2px; }
body.hv-plugin .pcard:hover, body.hv-plugin .m-acard:hover { box-shadow: 0 0 0 1.5px var(--m-accent), 0 18px 40px rgba(19,102,194,.18); }
body.hv-plugin .m-acard .m-art { background: linear-gradient(rgba(19,102,194,.07) 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, rgba(19,102,194,.07) 1px, transparent 1px) 0 0 / 18px 18px, #fff; }
body.hv-plugin .m-cta .m-band { border-radius: 18px; background: radial-gradient(60% 120% at 100% 0, rgba(47,140,255,.4), transparent 70%), linear-gradient(120deg, #0e1116, #1b2532); }
body.hv-plugin .m-cta .m-band::before { inset: 0; width: auto; height: auto; right: 0; top: 0; border-radius: 0; background: linear-gradient(rgba(127,184,255,.06) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(127,184,255,.06) 1px, transparent 1px) 0 0 / 22px 22px; }
body.hv-plugin .m-page-hero { background: radial-gradient(60% 120% at 100% 0, rgba(47,140,255,.35), transparent 70%), linear-gradient(120deg, #0e1116, #1b2532); } body.hv-plugin .m-page-hero .eyebrow { color: #84bcff; }
body.hv-plugin footer.site { background: #0e1116; color: #c3ccd8; border: 0; } body.hv-plugin footer.site nav a { color: #fff; }
body.hv-plugin .m-collage .m-card { border-radius: 12px; }

/* plug (SCOVEE): a connector icon snaps in on hover and a four-cell charge bar fills along the bottom */
body.bv-plug .btn { border-radius: 10px; padding: 15px 26px; font-weight: 700; letter-spacing: .01em; }
body.bv-plug .btn:has(.arr) { padding-right: 48px; }
body.bv-plug .btn .arr { position: absolute; right: 15px; top: 50%; width: 19px; height: 10px; margin: -5px 0 0; font-size: 0; opacity: .7; transform: translateX(6px); transition: transform .3s cubic-bezier(.3,1.8,.5,1), opacity .2s; }
body.bv-plug .btn .arr::before { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 10px; border-radius: 2px 1px 1px 2px; background: currentColor; }
body.bv-plug .btn .arr::after { content: ""; position: absolute; left: 11px; top: 2px; width: 8px; height: 6px; box-sizing: border-box; border: 1.5px solid currentColor; border-left: 0; border-radius: 0 2px 2px 0; }
body.bv-plug .btn:is(:hover, :focus-visible) .arr { transform: translateX(-2px); opacity: 1; }
body.bv-plug .btn::after { inset: auto 12px 6px 12px; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, #3ddc84 0 calc(25% - 3px), transparent 0 25%); transform: scaleX(0); transform-origin: left; transition: transform .5s steps(4, end); z-index: 0; }
body.bv-plug .btn:is(:hover, :focus-visible)::after { transform: scaleX(1); }

/* phones: new heroes stack */
@media (max-width: 900px) {
  :is(body.hv-heartstring, body.hv-gameboard, body.hv-bakery, body.hv-plugin) .m-hero { min-height: 0; } :is(body.hv-heartstring, body.hv-gameboard, body.hv-bakery, body.hv-plugin) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr); }
  .m-hsgar, .m-gbpath, .m-bktags, .m-pichips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-hsgar, .m-bktags, .m-pichips, .m-gbpath) > a:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
  .m-hsgline, .m-hstag::before, .m-hstag::after, .m-gbpath::before, .m-gbstart, .m-bktags::before { display: none; }
  .m-hstag { margin-top: 0; } .m-gbpath { row-gap: 22px; padding-top: 14px; }
  .m-bktag::before { height: 0; } .m-bktags { padding-top: 16px; }
  .m-gb { padding: 6% 5%; } .m-gbboard { rotate: 0deg; }
}
@media (max-width: 420px) {
  .m-hstag, .m-pichip { gap: 9px; padding: 10px; } .m-hsimg, .m-pilens { width: 42px; height: 42px; } .m-bktag { padding: 12px 10px 12px 30px; gap: 9px; } .m-bkimg { width: 40px; height: 40px; }
  .m-gbsp { padding: 16px 10px 10px; } .m-gbimg { width: 40px; height: 40px; } .m-gbdice { gap: 10px; bottom: 19%; }
  .m-piport .s { width: 34px; height: 14px; } .m-piport.p-micro .s { width: 30px; height: 11px; } .m-piport.p-mini .s { width: 30px; height: 14px; } .m-piport.p-dc .s { width: 18px; height: 18px; margin-inline: 8px; } .m-piport b { font-size: 9px; } .m-pidock { padding: 6px 8px; }
}

/* ===== batch 11.11.2026 (3): rockart/inkcap (Betem), carport/tarp (Advance Outdoor), glow/pulse (NEWKEY), classroom/crayon (Sprogs), terrarium/droplet (Sustee) ===== */
:is(body.hv-rockart, body.hv-carport, body.hv-glow, body.hv-classroom, body.hv-terrarium) .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); }
:is(body.hv-rockart, body.hv-carport, body.hv-glow, body.hv-classroom, body.hv-terrarium) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:is(body.hv-rockart, body.hv-carport, body.hv-glow, body.hv-classroom, body.hv-terrarium) .m-hero .m-copy > * { animation: m-rise .8s var(--m-ease) both; }
:is(body.hv-rockart, body.hv-carport, body.hv-glow, body.hv-classroom, body.hv-terrarium) .m-hero .m-copy > :nth-child(3) { animation-delay: .08s; } :is(body.hv-rockart, body.hv-carport, body.hv-glow, body.hv-classroom, body.hv-terrarium) .m-hero .m-copy > :nth-child(4) { animation-delay: .16s; } :is(body.hv-rockart, body.hv-carport, body.hv-glow, body.hv-classroom, body.hv-terrarium) .m-hero .m-copy > :nth-child(n+5) { animation-delay: .24s; }
:is(body.hv-rockart, body.hv-carport, body.hv-glow, body.hv-classroom, body.hv-terrarium) .m-hero h1 { text-wrap: balance; max-width: 17ch; }
:is(body.hv-rockart, body.hv-carport, body.hv-glow, body.hv-classroom, body.hv-terrarium) .m-hero .bgcredit { display: none; }
:is(body.hv-rockart, body.hv-carport, body.hv-classroom, body.hv-terrarium) .m-hero { color: var(--m-ink); }
:is(body.hv-rockart, body.hv-carport, body.hv-classroom, body.hv-terrarium) .m-hero h1 { color: var(--m-ink) !important; }
:is(body.hv-rockart, body.hv-carport, body.hv-classroom, body.hv-terrarium) .m-hero .sub { color: var(--m-body-ink); } :is(body.hv-rockart, body.hv-carport, body.hv-classroom, body.hv-terrarium) .m-hero .eyebrow { color: var(--m-accent-2); }
:is(body.hv-rockart, body.hv-carport, body.hv-classroom, body.hv-terrarium) .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: var(--m-ink) !important; background: rgba(255,255,255,.65) !important; }
:is(body.hv-rockart, body.hv-carport, body.hv-classroom, body.hv-terrarium) .m-hero .m-btn-ghost:hover { background: var(--m-ink) !important; color: #fff !important; }
:is(body.hv-rockart, body.hv-carport, body.hv-classroom, body.hv-terrarium) .m-hero .m-chips span { background: #fff; color: var(--m-ink); border: 1.5px solid color-mix(in srgb, var(--m-accent) 26%, transparent); backdrop-filter: none; }
:is(.m-ra, .m-cp, .m-gw, .m-cr, .m-tr) a { -webkit-tap-highlight-color: transparent; }
:is(.m-ra, .m-cp, .m-gw, .m-cr, .m-tr) img { display: block; width: 100%; height: auto; border-radius: 0; }
/* shared category strip: a row of tiles under the hero */
:is(.m-rablobs, .m-cpbays, .m-crcubs, .m-trtags) { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; padding: 10px clamp(18px, 4vw, 72px) clamp(26px, 4vh, 44px); }
:is(.m-rablob, .m-cpbay, .m-crcub, .m-trtag) { min-width: 0; text-decoration: none; animation: m-rise .7s calc(.8s + var(--i, 0) * .08s) var(--m-ease) backwards; }
:is(.m-ratx, .m-cptx, .m-crtx, .m-trtx) { min-width: 0; } :is(.m-ratx, .m-cptx, .m-crtx, .m-trtx) b { display: block; font: 700 14px/1.2 var(--m-body); overflow-wrap: anywhere; } :is(.m-ratx, .m-cptx, .m-crtx, .m-trtx) small { display: block; margin-top: 4px; font: 600 12px/1.2 var(--m-body); }
:is(.m-raimg, .m-cpimg, .m-crimg, .m-trimg) { flex: none; display: block; overflow: hidden; } :is(.m-raimg, .m-cpimg, .m-crimg, .m-trimg) img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; transition: transform .45s var(--m-ease); }
:is(.m-rablob, .m-cpbay, .m-crcub, .m-trtag):hover :is(.m-raimg, .m-cpimg, .m-crimg, .m-trimg) img { transform: scale(1.08) rotate(-4deg); }
:is(.m-rablob, .m-cpbay, .m-crcub, .m-trtag):focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; }
@keyframes m-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* rockart (Betem): painted pebbles and a mug as the canvas — marker strokes draw themselves around real listing photos, a dual-tip marker's cap pops off */
body.hv-rockart .m-hero { background: radial-gradient(40% 52% at 80% 42%, #ffe0ee, transparent 70%), radial-gradient(30% 40% at 4% 96%, #fff0c4, transparent 70%), radial-gradient(26% 34% at 58% 100%, #d5f2fb, transparent 70%), var(--m-bg); }
body.hv-rockart .m-hero h1 { font-size: clamp(38px, 4.8vw, 68px) !important; line-height: 1.06 !important; letter-spacing: -.02em; }
.m-ra { position: relative; width: min(100%, 580px); aspect-ratio: 600 / 540; justify-self: center; }
.m-rarocks { position: absolute; left: 15%; top: 8%; width: 53%; aspect-ratio: 948 / 1200; z-index: 1; display: block; overflow: hidden; background: #fff; border-radius: 46% 54% 44% 56% / 50% 42% 58% 50%; box-shadow: 0 0 0 8px #fff, 0 30px 60px rgba(42,23,48,.22); animation: m-rain .9s var(--m-ease) backwards; }
.m-rarocks img { height: 100%; object-fit: cover; }
.m-rafish { position: absolute; right: 1%; top: 1%; width: 30%; aspect-ratio: 990 / 900; z-index: 2; display: block; overflow: hidden; border-radius: 52% 48% 56% 44% / 46% 56% 44% 54%; box-shadow: 0 0 0 6px #fff, 0 18px 34px rgba(42,23,48,.22); rotate: 7deg; animation: m-rapop .8s .35s cubic-bezier(.3,1.5,.5,1) backwards; transition: transform .45s var(--m-ease); }
.m-rafish img { height: 100%; object-fit: cover; } .m-rafish:hover { transform: rotate(-6deg) scale(1.05); }
.m-ramug { position: absolute; right: -1%; top: 41%; width: 33%; height: auto; z-index: 3; overflow: visible; filter: drop-shadow(0 16px 18px rgba(42,23,48,.2)); animation: m-rapop .8s .55s cubic-bezier(.3,1.4,.5,1) backwards; }
.m-rabody { fill: #fff; stroke: var(--m-ink); stroke-width: 4; } .m-rahdl { fill: none; stroke: var(--m-ink); stroke-width: 10; stroke-linecap: round; } .m-rarim { fill: none; stroke: var(--m-ink); stroke-width: 2; opacity: .35; }
:is(.m-ramug, .m-rapeb) .m-rad { fill: none; stroke: var(--c); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; animation: m-draw 1s calc(1s + var(--i, 0) * .32s) cubic-bezier(.5,0,.3,1) backwards; }
.m-rapeb { position: absolute; left: -2%; bottom: 3%; width: 34%; height: auto; z-index: 3; overflow: visible; filter: drop-shadow(0 14px 14px rgba(42,23,48,.25)); animation: m-rapop .8s .7s cubic-bezier(.3,1.4,.5,1) backwards; }
.m-rastone { fill: #8d8780; } .m-rapeb .m-rad { stroke-width: 5; }
.m-raset { position: absolute; left: 39%; bottom: -3%; width: 30%; z-index: 4; display: block; rotate: -8deg; filter: drop-shadow(0 16px 16px rgba(42,23,48,.25)); animation: m-raslide .9s .45s var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-raset:hover { transform: translateY(-8px) rotate(3deg); }
.m-rascrib { position: absolute; left: -6%; top: -5%; width: 58%; height: auto; z-index: 2; overflow: visible; pointer-events: none; }
.m-rascrib path { fill: none; stroke: url(#m-rag); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; animation: m-draw 1.5s 1.25s cubic-bezier(.5,0,.3,1) backwards; }
.m-rapen { position: absolute; left: 44%; top: 1%; width: 30%; height: 22px; z-index: 5; rotate: -32deg; transform-origin: 0 50%; filter: drop-shadow(0 8px 8px rgba(42,23,48,.25)); animation: m-rapen .8s .3s var(--m-ease) backwards; }
.m-rapen i { position: absolute; display: block; }
.m-ratip { left: 0; top: 30%; width: 8%; height: 40%; background: #e6007e; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.m-rabar { left: 7%; right: 0; top: 0; bottom: 0; border-radius: 3px 11px 11px 3px; background: linear-gradient(90deg, transparent 72%, #e6007e 72% 78%, transparent 78%), linear-gradient(#fff, #efe6ec); box-shadow: inset 0 0 0 2px rgba(42,23,48,.14); }
.m-racap { left: 3%; top: -8%; width: 27%; height: 116%; border-radius: 10px 3px 3px 10px; background: linear-gradient(#ff3c9e, #c0156a); box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); transform: translate(-30%, -230%) rotate(-40deg); animation: m-racap .7s 1s cubic-bezier(.3,1.5,.5,1) backwards; }
@keyframes m-racap { 0% { transform: none; } 30% { transform: translate(-6%, 0) rotate(-4deg); } }
@keyframes m-rapen { from { transform: translate(30px, -30px); opacity: 0; } }
@keyframes m-rain { from { transform: scale(.88) rotate(-4deg); opacity: 0; } } @keyframes m-rapop { from { transform: scale(.5); opacity: 0; } } @keyframes m-raslide { from { transform: translateY(50px) rotate(10deg); opacity: 0; } }
.m-rablobs { padding-top: 6px; }
.m-rablob { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 18px; background: #fff; border: 2px solid color-mix(in srgb, var(--c) 34%, transparent); box-shadow: 0 10px 24px rgba(42,23,48,.07); color: var(--m-ink) !important; transition: transform .45s cubic-bezier(.3,1.6,.5,1), border-color .3s, box-shadow .3s; }
.m-raimg { position: relative; width: 56px; height: 56px; padding: 6px; }
.m-raimg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--c) 22%, #fff); border-radius: 46% 54% 40% 60% / 56% 40% 60% 44%; transition: transform .5s var(--m-ease), background .3s; }
.m-rablob { isolation: isolate; } .m-raimg { isolation: isolate; overflow: visible; } .m-raimg img { position: relative; }
.m-ratx b { color: var(--m-ink); } .m-ratx small { color: var(--m-accent-2); }
.m-rablob::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: -2px; height: 4px; border-radius: 4px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--m-ease); }
.m-rablob:hover, .m-rablob:focus-visible { transform: translateY(-4px) rotate(-1deg); border-color: var(--c); box-shadow: 0 16px 30px color-mix(in srgb, var(--c) 22%, transparent); }
.m-rablob:hover::after { transform: scaleX(1); } .m-rablob:hover .m-raimg::before { transform: rotate(40deg) scale(1.12); background: color-mix(in srgb, var(--c) 40%, #fff); }
body.hv-rockart main section > .wrap > h2::after { content: ""; display: block; width: 140px; height: 14px; margin-top: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 14'%3E%3Cpath d='M3 9C20 2 34 13 52 7S84 2 104 8 128 11 137 5' fill='none' stroke='%23C0266A' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; }
body.hv-rockart .pcard:hover, body.hv-rockart .m-acard:hover { box-shadow: 0 0 0 2px var(--m-accent), 0 18px 40px rgba(192,38,106,.16); }
body.hv-rockart .m-acard .m-art { background: radial-gradient(circle at 12% 20%, #ffe0ee 0 14%, transparent 15%), radial-gradient(circle at 88% 80%, #d5f2fb 0 16%, transparent 17%), radial-gradient(circle at 80% 14%, #fff0c4 0 10%, transparent 11%), #fff; }
body.hv-rockart .m-cta .m-band { border-radius: 26px; background: radial-gradient(50% 120% at 100% 0, rgba(255,180,0,.28), transparent 70%), radial-gradient(40% 100% at 0 100%, rgba(0,166,214,.28), transparent 70%), linear-gradient(120deg, var(--m-accent-2), var(--m-accent)); }
body.hv-rockart .m-cta .m-band::before { width: 320px; height: 120px; right: -30px; top: 16px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120'%3E%3Cpath d='M290 14C250 30 262 64 226 62S188 22 160 40 150 96 112 92 82 52 56 64 30 104 8 104' fill='none' stroke='%23fff' stroke-opacity='.25' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
body.hv-rockart .m-page-hero { background: radial-gradient(60% 120% at 100% 0, rgba(230,0,126,.45), transparent 70%), linear-gradient(120deg, var(--m-hero-a), #4a1d44); } body.hv-rockart .m-page-hero .eyebrow { color: #ffb3d4; }
body.hv-rockart footer.site { background: var(--m-hero-a); color: #eadbe6; border: 0; } body.hv-rockart footer.site nav a { color: #fff; }
body.hv-rockart .m-collage .m-card { border-radius: 26px; }

/* inkcap (Betem): the cap slides off the right end and ink floods the button from the left with a rainbow leading edge */
body.bv-inkcap .btn { border-radius: 999px; padding: 15px 32px 15px 26px; font-weight: 700; }
body.bv-inkcap .btn::after { inset: -2px; z-index: -1; transform: translateX(-102%); transition: transform .6s cubic-bezier(.65,0,.25,1); background: linear-gradient(90deg, var(--m-if, var(--m-accent-2)) calc(100% - 9px), #ffb400 0 calc(100% - 6px), #00a6d6 0 calc(100% - 3px), #2bb36b 0); }
body.bv-inkcap .btn:is(:hover, :focus-visible)::after { transform: translateX(0); }
body.bv-inkcap .btn::before { content: ""; position: absolute; right: 11px; top: 50%; width: 9px; height: 16px; margin-top: -8px; border-radius: 2px 5px 5px 2px; background: currentColor; opacity: .2; pointer-events: none; transition: transform .5s cubic-bezier(.3,1.5,.5,1), opacity .45s; }
body.bv-inkcap .btn:is(:hover, :focus-visible)::before { transform: translate(20px, -16px) rotate(38deg); opacity: 0; }
body.bv-inkcap :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: var(--m-accent); }
body.bv-inkcap :is(.btn.ghost, .m-btn-ghost) { --m-if: var(--m-ink); } body.bv-inkcap .btn.m-white { --m-if: #fbe1ec; } body.bv-inkcap .m-cta .btn.m-white:hover { color: var(--m-ink); }

/* carport (Advance Outdoor): a driveway under open sky — the carport photo rises from the ground legs-first under a frame sketch, the canopy sheen slides on, a rain cloud and the sun pass over */
body.hv-carport .m-hero { background: linear-gradient(180deg, #d8ebf6 0%, #eef5f8 55%, var(--m-bg) 100%); }
body.hv-carport .m-hero h1 { font-size: clamp(42px, 5.4vw, 80px) !important; line-height: 1 !important; letter-spacing: .005em; text-transform: uppercase; }
.m-cp { position: relative; width: min(100%, 600px); aspect-ratio: 600 / 500; justify-self: center; overflow: hidden; border-radius: 26px; background: linear-gradient(180deg, #8fc3e6 0%, #cfe6f4 56%, #9fc58e 56.2%, #6f9f62 100%); box-shadow: 0 0 0 8px #fff, 0 34px 70px rgba(23,37,30,.22); }
.m-cpsun { position: absolute; right: 9%; top: 7%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff6c8 0 38%, #ffd35a 40% 62%, rgba(255,211,90,0) 64%); box-shadow: 0 0 40px 10px rgba(255,214,102,.5); animation: m-cpsun 14s ease-in-out infinite; }
.m-cpcloud { position: absolute; left: 0; top: 8%; width: 30%; aspect-ratio: 2.4; z-index: 3; animation: m-cpcloud 14s linear infinite; }
.m-cpcloud svg { position: absolute; left: 0; top: 0; width: 100%; height: auto; fill: #f4f7fa; filter: drop-shadow(0 6px 8px rgba(40,60,80,.2)); }
.m-cprain { position: absolute; left: 14%; right: 14%; top: 78%; height: 200%; overflow: hidden; }
.m-cprain i { position: absolute; left: var(--x); top: 0; width: 2px; height: 22%; border-radius: 2px; background: linear-gradient(rgba(60,110,160,0), rgba(60,110,160,.75)); animation: m-cpdrop .8s var(--d) linear infinite; }
.m-cphill { position: absolute; left: -10%; right: -10%; top: 50%; height: 16%; border-radius: 50% 50% 0 0; background: #8bb87c; }
.m-cpdrive { position: absolute; left: 22%; right: 6%; bottom: 0; height: 34%; background: repeating-linear-gradient(90deg, transparent 0 calc(33% - 2px), rgba(0,0,0,.08) 0 33%), linear-gradient(#d9dcde, #b9bec2); clip-path: polygon(26% 0, 74% 0, 100% 100%, 0 100%); }
.m-cppost { position: absolute; left: 3%; bottom: 4%; width: 27%; z-index: 4; display: block; padding: 6px 6px 18px; background: #fff; border-radius: 6px; rotate: -5deg; box-shadow: 0 14px 26px rgba(23,37,30,.25); animation: m-cppost .8s .2s cubic-bezier(.3,1.4,.5,1) backwards; transition: transform .4s var(--m-ease); }
.m-cppost img { border-radius: 3px; } .m-cppost:hover { transform: rotate(4deg) scale(1.04); }
.m-cpbuild { position: absolute; left: 11%; bottom: 5%; width: 80%; z-index: 2; }
.m-cpcar { display: block; filter: drop-shadow(0 18px 14px rgba(23,37,30,.3)); animation: m-cprise 1.4s .55s cubic-bezier(.6,0,.2,1) backwards; }
.m-cpframe { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; animation: m-cpframe 2.4s .05s ease backwards; }
.m-cpframe path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; animation: m-draw .8s .1s ease-out backwards; } .m-cpframe .r { animation-delay: .6s; stroke: #e7f3ec; }
.m-cpsheen { position: absolute; inset: 0 0 52% 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%) no-repeat; background-size: 60% 100%; background-position: 260% 0; opacity: 0; animation: m-cpsheen 1.1s 1.8s ease-in-out backwards; }
.m-cpmetal { position: absolute; left: -2%; top: 33%; width: 25%; z-index: 1; display: block; opacity: .95; animation: m-cppost .8s .4s var(--m-ease) backwards; }
@keyframes m-cprise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes m-cpframe { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes m-cpsheen { 0% { opacity: 1; background-position: -160% 0; } 100% { opacity: 1; background-position: 260% 0; } }
@keyframes m-cppost { from { transform: translateY(-30px) scale(.9); opacity: 0; } }
@keyframes m-cpcloud { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
@keyframes m-cpsun { 0%, 30%, 80%, 100% { opacity: 1; } 45%, 62% { opacity: .55; } }
@keyframes m-cpdrop { from { transform: translateY(0); opacity: 1; } to { transform: translateY(420%); opacity: 0; } }
.m-cpsizes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 22px; }
.m-cpsizes span { margin-right: 4px; font: 700 12px/1 var(--m-body); letter-spacing: .12em; text-transform: uppercase; color: var(--m-accent-2); }
.m-cpsizes a { display: inline-flex; align-items: baseline; gap: 5px; padding: 9px 13px 8px; border-radius: 8px; background: #fff; border: 2px solid var(--m-ink); color: var(--m-ink) !important; text-decoration: none; background-image: repeating-linear-gradient(90deg, var(--m-ink) 0 1px, transparent 1px 6px); background-size: 100% 5px; background-repeat: no-repeat; background-position: 0 0; transition: background-color .25s, color .25s, transform .3s var(--m-ease); }
.m-cpsizes b { font: 700 18px/1 var(--m-head); letter-spacing: .02em; } .m-cpsizes small { font: 600 12px/1 var(--m-body); }
.m-cpsizes a:hover, .m-cpsizes a:focus-visible { background-color: var(--m-accent); border-color: var(--m-accent); color: #fff !important; transform: translateY(-2px); }
.m-cpbay { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 14px 14px; border-radius: 10px; background: #26302b; border-left: 4px solid #f4f1e8; border-right: 4px solid #f4f1e8; color: #fff !important; box-shadow: 0 12px 24px rgba(23,37,30,.16); transition: transform .35s var(--m-ease), background .3s; }
.m-cpbay em { position: absolute; top: -11px; left: 12px; padding: 3px 8px; border-radius: 4px; background: #f2c94c; color: #17251e; font: 700 13px/1 var(--m-head); font-style: normal; letter-spacing: .04em; }
.m-cpimg { width: 54px; height: 54px; border-radius: 8px; background: #fff; padding: 3px; }
.m-cptx b { color: #fff; } .m-cptx small { color: #cfe3d6; }
.m-cpbay:hover, .m-cpbay:focus-visible { transform: translateY(-4px); background: var(--m-accent); }
body.hv-carport main section > .wrap > h2::after { content: ""; display: block; width: 130px; height: 8px; margin-top: 10px; background: repeating-linear-gradient(90deg, var(--m-accent) 0 24px, transparent 24px 34px); border-radius: 2px; }
body.hv-carport .pcard:hover, body.hv-carport .m-acard:hover { box-shadow: 0 0 0 2px var(--m-accent), 0 18px 40px rgba(47,107,79,.16); }
body.hv-carport .m-acard .m-art { background: linear-gradient(180deg, #e3f0f8 0 60%, #e9efe6 60%); }
body.hv-carport .m-cta .m-band { border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%), linear-gradient(120deg, #17251e, var(--m-accent)); }
body.hv-carport .m-cta .m-band::before { width: 360px; height: 160px; right: -40px; top: -20px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 54'%3E%3Cpath d='M4 30 30 6h60l26 24M10 30v22M110 30v22M30 6v24M90 6v24M4 30h112' fill='none' stroke='%23fff' stroke-opacity='.2' stroke-width='2.500' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
body.hv-carport .m-page-hero { background: radial-gradient(60% 120% at 100% 0, rgba(127,184,218,.35), transparent 70%), linear-gradient(120deg, #17251e, var(--m-accent)); } body.hv-carport .m-page-hero .eyebrow { color: #bfe0cd; }
body.hv-carport footer.site { background: #17251e; color: #cfdcd4; border: 0; } body.hv-carport footer.site nav a { color: #fff; }
body.hv-carport .m-collage .m-card { border-radius: 14px; }

/* tarp (Advance Outdoor): grommets sit in the corners; on hover the canopy fabric is pulled across the button and snaps tight */
body.bv-tarp .btn { border-radius: 8px; padding: 15px 28px; font-weight: 700; letter-spacing: .02em; }
body.bv-tarp .btn::before { content: ""; position: absolute; inset: 5px; z-index: 1; pointer-events: none; --g: radial-gradient(circle, transparent 1.4px, currentColor 1.7px 2.9px, transparent 3.2px); background: var(--g) 0 0 / 7px 7px no-repeat, var(--g) 100% 0 / 7px 7px no-repeat, var(--g) 0 100% / 7px 7px no-repeat, var(--g) 100% 100% / 7px 7px no-repeat; opacity: .5; transition: opacity .3s; }
body.bv-tarp .btn::after { inset: -2px; z-index: -1; transform-origin: 0 50%; transform: scaleX(0) skewX(-16deg); transition: transform .6s cubic-bezier(.3,1.35,.45,1); background: repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(0,0,0,.06) 0 2px, transparent 2px 5px), var(--m-tf, var(--m-accent-2)); }
body.bv-tarp .btn:is(:hover, :focus-visible)::after { transform: scaleX(1) skewX(0); } body.bv-tarp .btn:is(:hover, :focus-visible)::before { opacity: .9; }
body.bv-tarp :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: var(--m-accent); }
body.bv-tarp :is(.btn.ghost, .m-btn-ghost) { --m-tf: var(--m-ink); } body.bv-tarp .btn.m-white { --m-tf: #dcebe2; } body.bv-tarp .m-cta .btn.m-white:hover { color: var(--m-ink); }

/* glow (NEWKEY): a dark spa scene — the mask photo under an LED dot grid cycling red → blue → amber, a halo following the colour, wavelength chips light up with their mode */
body.hv-glow .m-hero { background: radial-gradient(46% 60% at 74% 44%, rgba(199,53,79,.3), transparent 70%), radial-gradient(40% 50% at 0 100%, rgba(76,155,255,.12), transparent 70%), linear-gradient(160deg, #0b050c, var(--m-hero-a) 45%, #2a1026); }
body.hv-glow .m-hero h1 { font-size: clamp(40px, 5vw, 74px) !important; line-height: 1.04 !important; letter-spacing: -.015em; font-weight: 500 !important; }
body.hv-glow .m-hero .eyebrow { color: #f6aab9; } body.hv-glow .m-hero .sub { color: rgba(255,255,255,.86); }
body.hv-glow .m-hero .m-chips span { background: rgba(255,255,255,.06); border-color: rgba(246,170,185,.3); }
.m-gw { position: relative; width: min(100%, 520px); aspect-ratio: 520 / 560; justify-self: center; }
.m-gwhalo { position: absolute; left: 50%; top: 46%; width: 92%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background-color: #ff3b55; -webkit-mask: radial-gradient(closest-side, #000, transparent 75%); mask: radial-gradient(closest-side, #000, transparent 75%); opacity: .5; animation: m-gwcol 9s ease-in-out infinite; }
.m-gwface { position: absolute; left: 24%; top: 3%; width: 52%; aspect-ratio: 704 / 1215; z-index: 1; isolation: isolate; overflow: hidden; border-radius: 999px 999px 40px 40px; background: #1d0f1c; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 0 10px rgba(255,255,255,.04), 0 40px 80px rgba(0,0,0,.55); animation: m-gwin 1.1s var(--m-ease) backwards; }
.m-gwphoto { display: block; height: 100%; } .m-gwphoto img { height: 100%; object-fit: cover; object-position: 50% 0; }
.m-gwleds { position: absolute; left: 14%; top: 16%; width: 72%; height: 42%; mix-blend-mode: screen; -webkit-mask: radial-gradient(closest-side, #000 62%, transparent); mask: radial-gradient(closest-side, #000 62%, transparent); pointer-events: none; }
.m-gwleds i { position: absolute; inset: 0; background-color: #ff3b55; -webkit-mask: radial-gradient(circle, #000 1.5px, transparent 2.3px) 0 0 / 9px 9px; mask: radial-gradient(circle, #000 1.5px, transparent 2.3px) 0 0 / 9px 9px; opacity: .85; animation: m-gwcol 9s ease-in-out infinite, m-gwblink 1.8s ease-in-out infinite; }
.m-gwmini { position: absolute; z-index: 2; display: block; width: 25%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 3px #2a1026, 0 0 0 5px rgba(255,255,255,.18), 0 18px 34px rgba(0,0,0,.5); animation: m-gwpop .8s cubic-bezier(.3,1.4,.5,1) backwards; transition: transform .45s var(--m-ease); }
.m-gwmini img { height: 100%; object-fit: cover; } .m-gwmini.a { left: 1%; bottom: 13%; animation-delay: .45s; } .m-gwmini.b { right: 1%; top: 10%; animation-delay: .6s; }
.m-gwmini:hover { transform: scale(1.07); }
.m-gwmode { position: absolute; left: 50%; bottom: 2%; z-index: 2; display: flex; gap: 10px; translate: -50% 0; padding: 9px 13px; border-radius: 999px; background: rgba(20,10,21,.7); border: 1px solid rgba(255,255,255,.12); }
.m-gwmode i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); opacity: .3; animation: m-gwpill 9s calc(var(--m) * 3s) ease-in-out infinite backwards; }
@keyframes m-gwcol { 0%, 28% { background-color: #ff3b55; } 34%, 61% { background-color: #4c9bff; } 67%, 94% { background-color: #ffab2e; } 100% { background-color: #ff3b55; } }
@keyframes m-gwblink { 0%, 100% { opacity: .85; } 50% { opacity: .5; } }
@keyframes m-gwpill { 0%, 30% { opacity: 1; transform: scale(1.35); box-shadow: 0 0 10px var(--c); } 34%, 100% { opacity: .3; transform: none; box-shadow: none; } }
@keyframes m-gwin { from { transform: translateY(26px); opacity: 0; } } @keyframes m-gwpop { from { transform: scale(.4); opacity: 0; } }
.m-gwspec { position: relative; z-index: 2; padding: 6px clamp(18px, 4vw, 72px) clamp(26px, 4vh, 44px); }
.m-gwspec p { margin: 0 0 10px; font: 600 12px/1.3 var(--m-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.m-gwspec ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.m-gwspec li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 13px 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); animation: m-rise .7s calc(.8s + var(--i) * .08s) var(--m-ease) backwards, m-gwli 9s calc(var(--m) * 3s) ease-in-out infinite; }
.m-gwspec li i { grid-row: span 2; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); }
.m-gwspec li b { font: 700 17px/1.1 var(--m-body); color: #fff; font-variant-numeric: tabular-nums; } .m-gwspec li small { margin-top: 3px; font: 500 12.5px/1.2 var(--m-body); color: rgba(255,255,255,.72); }
@keyframes m-gwli { 0%, 30% { border-color: color-mix(in srgb, var(--c) 70%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); } 34%, 100% { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); } }
body.hv-glow main section > .wrap > h2::after { content: ""; display: block; width: 120px; height: 8px; margin-top: 10px; background: radial-gradient(circle, #ff3b55 0 2.5px, transparent 3px) 0 50% / 12px 8px repeat-x; -webkit-mask: linear-gradient(90deg, #000 60%, transparent); mask: linear-gradient(90deg, #000 60%, transparent); }
body.hv-glow .pcard:hover, body.hv-glow .m-acard:hover { box-shadow: 0 0 0 1.5px var(--m-accent), 0 18px 40px rgba(199,53,79,.2); }
body.hv-glow .m-acard .m-art { background: radial-gradient(60% 60% at 50% 50%, #fde7ec, #fff); }
body.hv-glow .m-cta .m-band { border-radius: 26px; background: radial-gradient(50% 120% at 100% 0, rgba(255,59,85,.45), transparent 70%), radial-gradient(40% 100% at 0 100%, rgba(76,155,255,.22), transparent 70%), linear-gradient(120deg, #140a15, #3a1631); }
body.hv-glow .m-cta .m-band::before { inset: 0; width: auto; height: auto; border-radius: 0; background: radial-gradient(circle, rgba(255,255,255,.08) 0 1.5px, transparent 2px) 0 0 / 14px 14px; -webkit-mask: radial-gradient(60% 100% at 100% 50%, #000, transparent); mask: radial-gradient(60% 100% at 100% 50%, #000, transparent); }
body.hv-glow .m-page-hero { background: radial-gradient(60% 120% at 100% 0, rgba(199,53,79,.45), transparent 70%), linear-gradient(120deg, #140a15, #3a1631); } body.hv-glow .m-page-hero .eyebrow { color: #f6aab9; }
body.hv-glow footer.site { background: #140a15; color: #dccfd9; border: 0; } body.hv-glow footer.site nav a { color: #fff; }
body.hv-glow .m-collage .m-card { border-radius: 24px; }

/* pulse (NEWKEY): a soft light follows the pointer inside the button and a light ring pulses out while hovered */
body.bv-pulse .btn { border-radius: 999px; padding: 15px 28px; overflow: visible; }
body.bv-pulse .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(90px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.3), transparent 65%); opacity: 0; transition: opacity .3s; }
body.bv-pulse .btn::after { inset: -2px; z-index: -2; border-radius: inherit; transform: none; transition: none; background: none; --pc: 255, 70, 100; box-shadow: 0 0 0 0 rgba(var(--pc), .5); }
body.bv-pulse .btn:is(:hover, :focus-visible)::before { opacity: 1; } body.bv-pulse .btn:is(:hover, :focus-visible)::after { animation: m-pls 1.6s ease-out infinite; }
body.bv-pulse :is(.btn.ghost, .m-btn-ghost)::after { --pc: 110, 170, 255; } body.bv-pulse .btn.m-white::after { --pc: 255, 255, 255; }
@keyframes m-pls { 0% { box-shadow: 0 0 0 0 rgba(var(--pc), .55); } 100% { box-shadow: 0 0 0 16px rgba(var(--pc), 0); } }

/* classroom (Sprogs): a top-down classroom floor plan — cots stack up, a table and wobble stools are dragged into place by a pointer, the class photo pinned to the board; categories are crayon-colour cubbies */
body.hv-classroom .m-hero { background: radial-gradient(40% 52% at 78% 44%, #e1eefb, transparent 70%), radial-gradient(28% 36% at 4% 96%, #fff1c2, transparent 70%), radial-gradient(circle at 1px 1px, rgba(31,108,184,.1) 1px, transparent 1.6px) 0 0 / 22px 22px, var(--m-bg); }
body.hv-classroom .m-hero h1 { font-size: clamp(40px, 5vw, 72px) !important; line-height: 1.04 !important; letter-spacing: .005em; }
.m-cr { position: relative; width: min(100%, 600px); aspect-ratio: 600 / 540; justify-self: center; }
.m-crfloor { position: absolute; inset: 0; border-radius: 26px; background: linear-gradient(rgba(31,108,184,.07) 1px, transparent 1px) 0 0 / 30px 30px, linear-gradient(90deg, rgba(31,108,184,.07) 1px, transparent 1px) 0 0 / 30px 30px, #fdf5e6; box-shadow: inset 0 0 0 10px #fff, inset 0 0 0 12px #e9dcc2, 0 30px 60px rgba(27,36,51,.14); }
.m-crrug { position: absolute; left: 44%; top: 42%; width: 50%; height: 50%; border-radius: 18px; background: #2364b8; box-shadow: inset 0 0 0 6px #2c74cc, inset 0 0 0 8px rgba(255,255,255,.35); animation: m-crrug .7s .2s var(--m-ease) backwards; }
.m-crboard { position: absolute; left: 4%; top: 5%; width: 44%; z-index: 2; padding: 8px; background: #fff; border-radius: 10px; rotate: -3deg; box-shadow: 0 0 0 3px #e9dcc2, 0 18px 30px rgba(27,36,51,.18); animation: m-crpin .8s .1s cubic-bezier(.3,1.4,.5,1) backwards; }
.m-crphoto { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 5px; } .m-crphoto img { height: 100%; object-fit: cover; }
.m-crpin { position: absolute; left: 50%; top: -9px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a7a, #e5483b 60%, #b2281e); box-shadow: 0 3px 4px rgba(0,0,0,.3); }
.m-crcots { position: absolute; left: 4%; bottom: 5%; width: 40%; height: 30%; z-index: 2; }
.m-crcot { position: absolute; left: 0; right: 0; bottom: calc(var(--i) * 17%); display: block; filter: drop-shadow(0 6px 5px rgba(27,36,51,.22)); animation: m-crcot .55s calc(.55s + var(--i) * .3s) cubic-bezier(.3,1.5,.5,1) backwards; }
.m-crtable { position: absolute; right: 9%; bottom: 17%; width: 36%; z-index: 3; display: block; filter: drop-shadow(0 12px 10px rgba(27,36,51,.25)); animation: m-crdrag 1.1s 1.05s cubic-bezier(.6,0,.25,1) backwards; }
.m-crstool { position: absolute; width: 8.5%; z-index: 4; display: block; filter: drop-shadow(0 6px 5px rgba(27,36,51,.25)); transform-origin: 50% 95%; animation: m-crdrag2 .8s calc(2.05s + var(--i) * .22s) cubic-bezier(.6,0,.25,1) backwards, m-crwob 2.6s calc(3.4s + var(--i) * .4s) ease-in-out infinite; }
.m-crstool.s1 { right: 44%; bottom: 10%; } .m-crstool.s2 { right: 4%; bottom: 26%; } .m-crstool.s3 { right: 24%; bottom: 4%; }
.m-crchairs { position: absolute; right: 3%; top: 4%; width: 34%; z-index: 2; display: block; filter: drop-shadow(0 10px 8px rgba(27,36,51,.2)); animation: m-crpop .8s .7s cubic-bezier(.3,1.5,.5,1) backwards; transition: transform .45s var(--m-ease); }
.m-crchairs:hover, .m-crtable:hover { transform: translateY(-6px); }
.m-crtrail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; overflow: visible; pointer-events: none; opacity: 0; animation: m-crtrail 2.6s 1s ease backwards; }
.m-crtrail path { fill: none; stroke: #1f6cb8; stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; }
.m-crhand { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 6; opacity: 0; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.3)); animation: m-crhand 2.9s .9s ease-in-out backwards; }
.m-crhand path { fill: #1b2433; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
@keyframes m-crrug { from { transform: scale(.85); opacity: 0; } } @keyframes m-crpin { from { transform: translateY(-40px) rotate(-8deg); opacity: 0; } }
@keyframes m-crcot { from { transform: translateY(-220%); opacity: 0; } 60% { opacity: 1; } }
@keyframes m-crdrag { 0% { transform: translate(80%, 60%) rotate(8deg) scale(1.08); opacity: 0; } 15% { opacity: 1; } 85% { transform: translate(0, -4%) rotate(0) scale(1.06); } 100% { transform: none; } }
@keyframes m-crdrag2 { 0% { transform: translate(300%, -120%) scale(1.1); opacity: 0; } 20% { opacity: 1; } 100% { transform: none; } }
@keyframes m-crwob { 0%, 100% { rotate: 0deg; } 25% { rotate: 4deg; } 75% { rotate: -4deg; } }
@keyframes m-crpop { from { transform: scale(.6) translateY(-20px); opacity: 0; } }
@keyframes m-crtrail { 0% { opacity: .9; } 75% { opacity: .9; } 100% { opacity: 0; } }
@keyframes m-crhand { 0% { left: 96%; top: 94%; opacity: 0; } 8% { opacity: 1; } 36%, 42% { left: 70%; top: 70%; } 56% { left: 96%; top: 44%; } 82% { left: 80%; top: 64%; opacity: 1; } 100% { left: 80%; top: 64%; opacity: 0; } }
.m-crcubs { gap: 12px; }
.m-crcub { display: flex; flex-direction: column; align-items: stretch; padding: 10px 10px 12px; border-radius: 14px; background: #f3e4c8; box-shadow: inset 0 -5px 0 #e2cca4, 0 10px 20px rgba(27,36,51,.08); color: var(--m-ink) !important; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.m-crbin { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 96px; padding-top: 6px; border-radius: 10px; background: linear-gradient(180deg, rgba(0,0,0,.22), transparent 30%), #fff8ea; overflow: hidden; }
.m-crbin::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: var(--c); border-radius: 6px 6px 8px 8px; box-shadow: inset 0 3px 0 rgba(255,255,255,.3); -webkit-mask: radial-gradient(14px 6px at 50% 40%, transparent 96%, #000); mask: radial-gradient(14px 6px at 50% 40%, transparent 96%, #000); transition: transform .4s var(--m-ease); }
.m-crimg { position: relative; z-index: 1; width: 78px; height: 78px; margin-bottom: 8px; border-radius: 10px; background: #fff; padding: 4px; box-shadow: 0 6px 12px rgba(27,36,51,.12); transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.m-crtx { margin-top: 10px; padding: 0 4px; } .m-crtx b { color: var(--m-ink); } .m-crtx small { color: var(--m-accent-2); }
.m-crcub:hover, .m-crcub:focus-visible { transform: translateY(-5px) rotate(-1deg); } .m-crcub:hover .m-crimg { transform: translateY(-10px); } .m-crcub:hover .m-crbin::after { transform: translateY(6px); }
body.hv-classroom main section > .wrap > h2::after { content: ""; display: block; width: 132px; height: 10px; margin-top: 10px; border-radius: 5px; background: linear-gradient(90deg, #1f6cb8 0 25%, #ffc93c 0 50%, #e5483b 0 75%, #3ba55c 0); }
body.hv-classroom .pcard:hover, body.hv-classroom .m-acard:hover { box-shadow: 0 0 0 2.5px var(--m-accent), 0 18px 40px rgba(31,108,184,.16); }
body.hv-classroom .m-acard .m-art { background: linear-gradient(rgba(31,108,184,.06) 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, rgba(31,108,184,.06) 1px, transparent 1px) 0 0 / 18px 18px, #fdf8ee; }
body.hv-classroom .m-cta .m-band { border-radius: 24px; background: linear-gradient(120deg, #16528d, var(--m-accent)); box-shadow: 0 0 0 6px #ffc93c, 0 30px 60px rgba(27,36,51,.2); }
body.hv-classroom .m-cta .m-band::before { width: 280px; height: 90px; right: -20px; top: 20px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M-5 8 20 52 40 6 60 54 80 6 100 54 120 6 140 54 160 6 180 54 205 10' fill='none' stroke='%23fff' stroke-opacity='.16' stroke-width='9' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
body.hv-classroom .m-page-hero { background: radial-gradient(60% 120% at 100% 0, rgba(255,201,60,.3), transparent 70%), linear-gradient(120deg, #1b2433, var(--m-accent)); } body.hv-classroom .m-page-hero .eyebrow { color: #ffd76a; }
body.hv-classroom footer.site { background: #1b2433; color: #d3dbe8; border: 0; } body.hv-classroom footer.site nav a { color: #fff; }
body.hv-classroom .m-collage .m-card { border-radius: 18px; }

/* crayon (Sprogs): a crayon scribble zig-zags across the button on hover, colouring it in */
body.bv-crayon .btn { border-radius: 14px; padding: 15px 26px; font-weight: 700; }
body.bv-crayon .btn::after { inset: -2px; z-index: -1; transform: none; background: var(--m-cf, var(--m-accent-2)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M-5 6 18 56 36 2 56 58 74 2 94 58 112 2 132 58 150 2 170 58 188 2 206 50' fill='none' stroke='%23000' stroke-width='24' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M-5 6 18 56 36 2 56 58 74 2 94 58 112 2 132 58 150 2 170 58 188 2 206 50' fill='none' stroke='%23000' stroke-width='24' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; clip-path: inset(0 100% 0 0); transition: clip-path .55s steps(7, end); }
body.bv-crayon .btn:is(:hover, :focus-visible)::after { clip-path: inset(0 0 0 0); }
body.bv-crayon :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: var(--m-accent); }
body.bv-crayon :is(.btn.ghost, .m-btn-ghost) { --m-cf: #ffc93c; } body.bv-crayon .btn.m-white { --m-cf: #ffe08a; } body.bv-crayon .m-cta .btn.m-white:hover { color: var(--m-ink); }
body.bv-crayon .btn .arr { transition: transform .4s cubic-bezier(.3,1.6,.5,1); } body.bv-crayon .btn:hover .arr { transform: translateX(4px) rotate(-14deg); }

/* terrarium (Sustee): a terracotta pot in cross-section — drops fall, the soil darkens and dries from the top, the Aquameter window turns blue then back to white */
body.hv-terrarium .m-hero { background: radial-gradient(44% 56% at 78% 46%, #e2eed3, transparent 70%), radial-gradient(30% 40% at 4% 96%, #f6e2cc, transparent 70%), var(--m-bg); }
body.hv-terrarium .m-hero h1 { font-size: clamp(42px, 5.2vw, 76px) !important; line-height: 1.02 !important; letter-spacing: -.01em; }
.m-tr { position: relative; width: min(100%, 580px); aspect-ratio: 600 / 540; justify-self: center; }
.m-trsun { position: absolute; right: 4%; top: 2%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,236,190,.9), rgba(255,236,190,0)); }
.m-trphoto { position: absolute; left: 0; top: 3%; width: 50%; aspect-ratio: 1; z-index: 1; display: block; overflow: hidden; border-radius: 999px 999px 26px 26px; box-shadow: 0 0 0 8px #fff, 0 30px 60px rgba(31,42,31,.2); animation: m-trin .9s var(--m-ease) backwards; }
.m-trphoto img { height: 100%; object-fit: cover; }
.m-trcut { position: absolute; right: 1%; bottom: 0; width: 55%; aspect-ratio: 300 / 330; z-index: 2; animation: m-trin .9s .2s var(--m-ease) backwards; }
.m-trpot { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 22px 24px rgba(31,42,31,.22)); }
.m-trwall { fill: url(#m-trtc); } .m-trrim { fill: #c4603a; stroke: #9c4626; stroke-width: 2; }
.m-trdry { fill: #b9895a; } .m-trwet rect { fill: #4d3220; } .m-trwet { animation: m-trwet 9s .8s ease-in-out infinite; }
.m-trroot { fill: none; stroke: #f1dfbf; stroke-width: 3; stroke-linecap: round; opacity: .75; } .m-trgrit circle { fill: #d9c3a0; opacity: .85; }
.m-trstem { fill: none; stroke: #3d8b43; stroke-width: 6; stroke-linecap: round; }
.m-trleaves path { fill: #4c9a4f; stroke: #2f7a35; stroke-width: 2; } .m-trleaves { transform-box: view-box; transform-origin: 150px 124px; animation: m-trsway 6s ease-in-out infinite; }
.m-trdrops path { fill: #3b8fd0; opacity: 0; animation: m-trdrop 9s .8s ease-in infinite; } .m-trdrops .d2 { animation-delay: .95s; } .m-trdrops .d3 { animation-delay: 1.1s; }
.m-trmeter { position: absolute; left: 63%; top: 8%; height: 76%; aspect-ratio: 64 / 668; z-index: 3; filter: drop-shadow(2px 4px 4px rgba(31,42,31,.3)); }
.m-trmeter img { height: 100%; width: 100%; }
.m-trind { position: absolute; left: 24%; width: 52%; top: 15.2%; height: 24.6%; border-radius: 4px; background: #f6f8fa; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); animation: m-trind 9s .8s ease-in-out infinite; }
.m-trkey { position: absolute; left: 1%; bottom: 3%; z-index: 4; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 7px; row-gap: 6px; padding: 10px 13px; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px rgba(31,42,31,.14); font: 600 12px/1.2 var(--m-body); color: var(--m-ink); }
.m-trkey i { width: 12px; height: 18px; border-radius: 3px; } .m-trkey .w { background: #3b8fd0; } .m-trkey .d { background: #f6f8fa; box-shadow: inset 0 0 0 1.5px #b9c3cc; }
@keyframes m-trwet { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; transform: translateY(0); } 25% { transform: translateY(0); } 85% { opacity: 1; transform: translateY(176px); } 100% { opacity: 0; transform: translateY(176px); } }
@keyframes m-trdrop { 0% { opacity: 0; transform: translateY(0); } 2% { opacity: 1; } 10% { opacity: 1; transform: translateY(140px); } 11%, 100% { opacity: 0; transform: translateY(140px); } }
@keyframes m-trind { 0%, 8% { background: #f6f8fa; } 14%, 55% { background: #3b8fd0; } 78%, 100% { background: #f6f8fa; } }
@keyframes m-trsway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes m-trin { from { transform: translateY(26px); opacity: 0; } }
.m-trsizes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 22px; }
.m-trsizes span { margin-right: 4px; font: 700 12px/1 var(--m-body); letter-spacing: .12em; text-transform: uppercase; color: var(--m-accent-2); }
.m-trsizes a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; border: 1.5px solid color-mix(in srgb, var(--m-accent) 30%, transparent); color: var(--m-ink) !important; text-decoration: none; transition: border-color .25s, transform .3s var(--m-ease), box-shadow .3s; }
.m-trsizes b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--m-accent); color: #fff; font: 700 14px/1 var(--m-body); }
.m-trsizes small { font: 600 13px/1 var(--m-body); }
.m-trsizes a:hover, .m-trsizes a:focus-visible { border-color: #3b8fd0; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(59,143,208,.2); } .m-trsizes a:hover b { background: #3b8fd0; }
.m-trtag { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 22px; border-radius: 6px 18px 18px 6px; background: #fff; border: 1.5px solid #dbe6cf; box-shadow: 0 10px 22px rgba(31,42,31,.07); color: var(--m-ink) !important; transition: transform .4s cubic-bezier(.3,1.6,.5,1), border-color .3s; }
.m-trtag::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; border-radius: 6px 0 0 6px; background: linear-gradient(var(--m-accent), #6fae5f); }
.m-trtag::after { content: ""; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #c7d6b6; }
.m-trimg { width: 52px; height: 52px; border-radius: 50%; background: #f2f6ea; padding: 4px; }
.m-trtx b { color: var(--m-ink); } .m-trtx small { color: var(--m-accent-2); }
.m-trtag:hover, .m-trtag:focus-visible { transform: translateY(-4px) rotate(-1.5deg); border-color: var(--m-accent); }
body.hv-terrarium main section > .wrap > h2::after { content: ""; display: block; width: 120px; height: 14px; margin-top: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M2 8H96' stroke='%232F7A35' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M110 1c-4 6-6 8-6 10.500a6 6 0 0 0 12 0c0-2.500-2-4.500-6-10.500Z' fill='%233B8FD0'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; }
body.hv-terrarium .pcard:hover, body.hv-terrarium .m-acard:hover { box-shadow: 0 0 0 2px var(--m-accent), 0 18px 40px rgba(47,122,53,.16); }
body.hv-terrarium .m-acard .m-art { background: radial-gradient(70% 60% at 50% 100%, #efe3d2, transparent 70%), #fbf9f3; }
body.hv-terrarium .m-cta .m-band { border-radius: 26px; background: radial-gradient(50% 120% at 100% 0, rgba(59,143,208,.4), transparent 70%), linear-gradient(120deg, #1f3a22, var(--m-accent)); }
body.hv-terrarium .m-cta .m-band::before { width: 220px; height: 260px; right: -20px; top: -40px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath d='M50 6C34 34 22 52 22 72a28 28 0 0 0 56 0C78 52 66 34 50 6Z' fill='none' stroke='%23fff' stroke-opacity='.2' stroke-width='3'/%3E%3C/svg%3E") no-repeat center / contain; }
body.hv-terrarium .m-page-hero { background: radial-gradient(60% 120% at 100% 0, rgba(59,143,208,.35), transparent 70%), linear-gradient(120deg, #1f2a1f, var(--m-accent)); } body.hv-terrarium .m-page-hero .eyebrow { color: #cfe5b9; }
body.hv-terrarium footer.site { background: #1f2a1f; color: #d6dfcf; border: 0; } body.hv-terrarium footer.site nav a { color: #fff; }
body.hv-terrarium .m-collage .m-card { border-radius: 22px; }

/* droplet (Sustee): water rises inside the button with a moving wave on top */
body.bv-droplet .btn { border-radius: 999px; padding: 15px 26px; font-weight: 700; }
body.bv-droplet .btn::after { inset: -2px; z-index: -1; transform: translateY(102%); transition: transform .7s cubic-bezier(.3,1.1,.4,1); background: var(--m-wf, #2a6fa8); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M0 6Q10 0 20 6T40 6V10H0Z'/%3E%3C/svg%3E") 0 0 / 40px 10px repeat-x, linear-gradient(#000 0 0) 0 9px / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M0 6Q10 0 20 6T40 6V10H0Z'/%3E%3C/svg%3E") 0 0 / 40px 10px repeat-x, linear-gradient(#000 0 0) 0 9px / 100% 100% no-repeat; }
body.bv-droplet .btn:is(:hover, :focus-visible)::after { transform: translateY(0); animation: m-dwave 1.1s linear infinite; }
@keyframes m-dwave { to { -webkit-mask-position: 40px 0, 0 9px; mask-position: 40px 0, 0 9px; } }
body.bv-droplet :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: var(--m-accent); }
body.bv-droplet :is(.btn.ghost, .m-btn-ghost) { --m-wf: #2a6fa8; } body.bv-droplet .btn.m-white { --m-wf: #d6eaf8; } body.bv-droplet .m-cta .btn.m-white:hover { color: var(--m-ink); }
body.bv-droplet .btn .arr { transition: transform .45s var(--m-ease); } body.bv-droplet .btn:hover .arr { transform: translate(4px, 2px); }

@media (prefers-reduced-motion: reduce) { .m-trwet, .m-trdrops path, .m-cpframe, .m-cpsheen, .m-crtrail, .m-crhand { opacity: 0 !important; } .m-gwmode i:first-child { opacity: 1; } .m-cpcloud { transform: translateX(150%); } }
/* phones: batch (3) heroes stack */
@media (max-width: 900px) {
  :is(body.hv-rockart, body.hv-carport, body.hv-glow, body.hv-classroom, body.hv-terrarium) .m-hero { min-height: 0; } :is(body.hv-rockart, body.hv-carport, body.hv-glow, body.hv-classroom, body.hv-terrarium) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr); }
  .m-rablobs, .m-cpbays, .m-crcubs, .m-trtags, .m-gwspec ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-rablobs, .m-cpbays, .m-crcubs, .m-trtags) > a:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
  .m-cpbays { row-gap: 22px; padding-top: 18px; }
  .m-ra { margin-top: 34px; }
}
@media (max-width: 420px) {
  .m-rablob, .m-trtag { gap: 9px; padding: 10px; } .m-trtag { padding-left: 18px; } .m-raimg { width: 46px; height: 46px; } .m-trimg, .m-cpimg { width: 42px; height: 42px; }
  .m-cpbay { gap: 9px; padding: 14px 10px 10px; } .m-crbin { height: 80px; } .m-crimg { width: 62px; height: 62px; }
  .m-gwspec li { padding: 11px 12px; column-gap: 9px; } .m-gwspec li b { font-size: 15px; }
  .m-rapen { height: 16px; } .m-trkey { font-size: 10.5px; padding: 7px 9px; column-gap: 5px; } .m-trkey i { width: 9px; height: 14px; }
  .m-cpsizes a { padding: 8px 10px 7px; } .m-cpsizes b { font-size: 16px; }
}

/* ===== batch 11.11.2026 (4): piston/gear (TECHING), petshop/wag (Pets Alive), hatch/sequin (Rainbocorns), manicure/glossy (GAOY) ===== */
:is(body.hv-piston, body.hv-petshop, body.hv-hatch, body.hv-manicure) .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); }
:is(body.hv-piston, body.hv-petshop, body.hv-hatch, body.hv-manicure) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:is(body.hv-piston, body.hv-petshop, body.hv-hatch, body.hv-manicure) .m-hero .m-copy > * { animation: m-rise .8s var(--m-ease) both; }
:is(body.hv-piston, body.hv-petshop, body.hv-hatch, body.hv-manicure) .m-hero .m-copy > :nth-child(3) { animation-delay: .08s; } :is(body.hv-piston, body.hv-petshop, body.hv-hatch, body.hv-manicure) .m-hero .m-copy > :nth-child(4) { animation-delay: .16s; } :is(body.hv-piston, body.hv-petshop, body.hv-hatch, body.hv-manicure) .m-hero .m-copy > :nth-child(n+5) { animation-delay: .24s; }
:is(body.hv-piston, body.hv-petshop, body.hv-hatch, body.hv-manicure) .m-hero h1 { text-wrap: balance; max-width: 17ch; }
:is(body.hv-piston, body.hv-petshop, body.hv-hatch, body.hv-manicure) .m-hero .bgcredit { display: none; }
:is(body.hv-petshop, body.hv-hatch, body.hv-manicure) .m-hero { color: var(--m-ink); }
:is(body.hv-petshop, body.hv-hatch, body.hv-manicure) .m-hero h1 { color: var(--m-ink) !important; }
:is(body.hv-petshop, body.hv-hatch, body.hv-manicure) .m-hero .sub { color: var(--m-body-ink); } :is(body.hv-petshop, body.hv-hatch, body.hv-manicure) .m-hero .eyebrow { color: var(--m-accent-2); }
:is(body.hv-petshop, body.hv-hatch, body.hv-manicure) .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: var(--m-ink) !important; background: rgba(255,255,255,.65) !important; }
:is(body.hv-petshop, body.hv-hatch, body.hv-manicure) .m-hero .m-btn-ghost:hover { background: var(--m-ink) !important; color: #fff !important; }
:is(body.hv-petshop, body.hv-hatch, body.hv-manicure) .m-hero .m-chips span { background: #fff; color: var(--m-ink); border: 1.5px solid color-mix(in srgb, var(--m-accent) 26%, transparent); backdrop-filter: none; }
:is(.m-ps, .m-pv, .m-hc, .m-mn) a { -webkit-tap-highlight-color: transparent; }
:is(.m-ps, .m-pv, .m-hc, .m-mn) img { display: block; width: 100%; height: auto; border-radius: 0; }
:is(.m-pscats, .m-pvtags, .m-hceggs, .m-mntips) { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; padding: 10px clamp(18px, 4vw, 72px) clamp(26px, 4vh, 44px); }
:is(.m-pscat, .m-pvtag, .m-hcegg2, .m-mntip) { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; animation: m-rise .7s calc(.8s + var(--i, 0) * .08s) var(--m-ease) backwards; }
:is(.m-pstx, .m-pvtx, .m-hctx, .m-mntx) { min-width: 0; } :is(.m-pstx, .m-pvtx, .m-hctx, .m-mntx) b { display: block; font: 700 14px/1.2 var(--m-body); overflow-wrap: anywhere; } :is(.m-pstx, .m-pvtx, .m-hctx, .m-mntx) small { display: block; margin-top: 4px; font: 600 12px/1.2 var(--m-body); }
:is(.m-psimg, .m-pvimg, .m-hcimg, .m-mnimg) { flex: none; display: block; overflow: hidden; } :is(.m-psimg, .m-pvimg, .m-hcimg, .m-mnimg) img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; transition: transform .45s var(--m-ease); }
:is(.m-pscat, .m-pvtag, .m-hcegg2, .m-mntip):hover :is(.m-psimg, .m-pvimg, .m-hcimg, .m-mnimg) img { transform: scale(1.08) rotate(-4deg); }
:is(.m-pscat, .m-pvtag, .m-hcegg2, .m-mntip):focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; }

/* piston (TECHING): a dark blueprint sheet — cylinders with pumping pistons, a crank, meshing gears and a fan stage fly in and assemble around real kit cut-outs; part-count chips */
body.hv-piston .m-hero { background: radial-gradient(46% 56% at 78% 46%, rgba(181,96,43,.24), transparent 70%), linear-gradient(160deg, #161a1f, #0e1114); color: #fff; }
body.hv-piston .m-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(120,170,215,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(120,170,215,.06) 1px, transparent 1px), linear-gradient(rgba(120,170,215,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(120,170,215,.11) 1px, transparent 1px); background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px; }
body.hv-piston .m-hero h1 { font-size: clamp(30px, 3.5vw, 50px) !important; line-height: 1.08 !important; letter-spacing: -.01em; max-width: 16ch; }
body.hv-piston .m-hero .eyebrow { color: #f0b183; } body.hv-piston .m-hero .sub { color: rgba(255,255,255,.84); }
.m-ps { position: relative; width: min(100%, 600px); aspect-ratio: 600 / 540; justify-self: center; }
.m-psgrid { position: absolute; inset: 3% 1%; border: 1.5px solid rgba(150,200,240,.32); border-radius: 6px; background: rgba(40,80,120,.14); box-shadow: inset 0 0 0 6px rgba(150,200,240,.05); }
.m-psdim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.m-psdim path { fill: none; stroke: rgba(150,200,240,.55); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 100; animation: m-draw 1.2s .3s ease-out backwards; } .m-psdim .l { stroke: #d98a55; stroke-dasharray: 100; animation-delay: 1.2s; }
.m-psv8 { position: absolute; left: 17%; top: 16%; width: 60%; z-index: 3; display: block; filter: drop-shadow(0 26px 26px rgba(0,0,0,.55)); animation: m-psland 1s .1s cubic-bezier(.2,.9,.25,1) backwards; transition: transform .45s var(--m-ease); }
.m-psv8:hover { transform: scale(1.03); }
.m-psjet { position: absolute; right: -1%; top: 3%; width: 42%; z-index: 2; display: block; filter: drop-shadow(0 18px 18px rgba(0,0,0,.5)); animation: m-psasm 1s .45s cubic-bezier(.2,.9,.25,1) backwards; --dx: 70px; --dy: -40px; }
.m-psrad { position: absolute; left: 0; bottom: 6%; width: 29%; z-index: 4; display: block; filter: drop-shadow(0 16px 16px rgba(0,0,0,.5)); animation: m-psasm 1s .6s cubic-bezier(.2,.9,.25,1) backwards; --dx: -60px; --dy: 50px; }
.m-psv12 { position: absolute; right: 1%; bottom: 6%; width: 29%; z-index: 4; display: block; filter: drop-shadow(0 16px 16px rgba(0,0,0,.5)); animation: m-psasm 1s .75s cubic-bezier(.2,.9,.25,1) backwards; --dx: 60px; --dy: 60px; }
:is(.m-psjet, .m-psrad, .m-psv12) { transition: transform .45s var(--m-ease); } :is(.m-psjet, .m-psrad, .m-psv12):hover { transform: translateY(-6px) rotate(-2deg); }
:is(.m-psv8, .m-psrad, .m-psjet)::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -3%; height: 18%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, #eef1f4 0 62%, #b9c1c9 80%, rgba(185,193,201,0) 100%); box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.m-psjet::before { left: 18%; right: 4%; bottom: 2%; height: 16%; } .m-psrad::before { left: 4%; right: 4%; bottom: -2%; height: 14%; }
.m-psx { animation: m-psasm 1.1s calc(.35s + var(--i, 0) * .15s) cubic-bezier(.2,.9,.25,1) backwards; }
.m-psblock { position: absolute; left: 3%; top: 6%; width: 16%; height: auto; z-index: 2; overflow: visible; }
.m-pscyl rect:first-child { fill: rgba(20,32,44,.7); stroke: #9cc6e8; stroke-width: 2; }
.m-pspist rect { fill: #b5602b; stroke: #f0b183; stroke-width: 1.5; } .m-pspist path { stroke: #f0b183; stroke-width: 1.5; } .m-pspist .rod { stroke: #c9d3dc; stroke-width: 5; stroke-linecap: round; }
.m-pspist { animation: m-pspump 1.1s ease-in-out infinite; } .m-pspist.p2 { animation-delay: -.55s; }
.m-pscrank { transform-box: view-box; transform-origin: 60px 122px; animation: m-psspin 1.1s linear infinite; }
.m-pscrank circle { fill: rgba(20,32,44,.85); stroke: #9cc6e8; stroke-width: 2; } .m-pscrank .pin { fill: #f0b183; stroke: none; } .m-pscrank path { stroke: #9cc6e8; stroke-width: 4; }
.m-psfan { position: absolute; right: 37%; top: 2%; width: 16%; height: auto; z-index: 1; overflow: visible; }
.m-psfan .o { fill: rgba(20,32,44,.75); stroke: #9cc6e8; stroke-width: 2; } .m-psfan .c { fill: #b5602b; }
.m-psrot { transform-box: view-box; transform-origin: 50px 50px; animation: m-psspin 1.4s linear infinite; } .m-psrot path { fill: rgba(156,198,232,.45); stroke: #9cc6e8; stroke-width: .8; }
.m-psgears { position: absolute; left: 35%; bottom: 1%; width: 31%; height: auto; z-index: 2; overflow: visible; }
.m-psga, .m-psgb { transform-box: fill-box; transform-origin: center; } .m-psga { animation: m-psspin 9s linear infinite; } .m-psgb { animation: m-psspin 5.5s linear infinite reverse; }
.m-psga path { fill: #b5602b; } .m-psgb path { fill: #8a939c; } :is(.m-psga, .m-psgb) .h { fill: rgba(0,0,0,.28); } :is(.m-psga, .m-psgb) .c { fill: #16181b; }
.m-pstag { position: absolute; z-index: 5; padding: 4px 7px; border: 1px dashed rgba(156,198,232,.55); border-radius: 3px; background: rgba(14,17,20,.7); color: #9cc6e8; font: 600 10px/1 var(--m-body); letter-spacing: .14em; white-space: nowrap; animation: m-rise .6s 1.4s var(--m-ease) backwards; }
.m-pstag.t1 { left: 3%; top: 36%; } .m-pstag.t2 { right: 4%; top: 41%; } .m-pstag.t3 { left: 2%; bottom: 1%; }
@keyframes m-psasm { from { transform: translate(var(--dx, 0), var(--dy, 0)) rotate(-8deg); opacity: 0; } }
@keyframes m-psland { from { transform: translateY(24px) scale(.94); } }
@keyframes m-pspump { 0%, 100% { transform: translateY(-20px); } 50% { transform: translateY(14px); } }
@keyframes m-psspin { to { transform: rotate(360deg); } }
.m-psparts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 22px; }
.m-psparts span { flex-basis: 100%; margin: 0 0 2px; font: 700 12px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #9cc6e8; }
.m-psparts a { display: inline-flex; flex-direction: column; gap: 3px; padding: 7px 10px 6px; border-radius: 6px; background: rgba(255,255,255,.05); border: 1px solid rgba(156,198,232,.38); color: #fff !important; text-decoration: none; transition: background .25s, border-color .25s, transform .3s var(--m-ease); }
.m-psparts b { font: 700 14px/1 var(--m-head); color: #f0b183; } .m-psparts small { font: 600 11px/1 var(--m-body); white-space: nowrap; color: rgba(255,255,255,.78); }
.m-psparts a:hover, .m-psparts a:focus-visible { background: rgba(181,96,43,.28); border-color: #d98a55; transform: translateY(-2px); }
.m-pscat { padding: 18px 16px 14px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1.5px solid rgba(156,198,232,.3); color: #fff !important; transition: transform .35s var(--m-ease), border-color .3s, background .3s; }
.m-pscat em { position: absolute; top: -10px; left: 14px; padding: 3px 8px; border-radius: 3px; background: #b5602b; color: #fff; font: 700 10.5px/1 var(--m-body); font-style: normal; letter-spacing: .14em; }
.m-psimg { width: 64px; height: 64px; border-radius: 6px; background: #f3f1ec; padding: 4px; }
.m-pstx b { color: #fff; font-size: 15px; } .m-pstx small { color: #f0b183; }
.m-pscat:hover, .m-pscat:focus-visible { transform: translateY(-4px); border-color: #d98a55; background: rgba(181,96,43,.16); }
body.hv-piston main section > .wrap > h2::after { content: ""; display: block; width: 120px; height: 10px; margin-top: 10px; background: repeating-linear-gradient(90deg, var(--m-accent) 0 6px, transparent 6px 10px) 0 0 / 100% 5px no-repeat, linear-gradient(var(--m-accent), var(--m-accent)) 0 100% / 100% 3px no-repeat; }
body.hv-piston .pcard:hover, body.hv-piston .m-acard:hover { box-shadow: 0 0 0 2px var(--m-accent), 0 18px 40px rgba(181,96,43,.16); }
body.hv-piston .m-acard .m-art { background: linear-gradient(rgba(47,111,159,.07) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(47,111,159,.07) 1px, transparent 1px) 0 0 / 16px 16px, #f7f6f2; }
body.hv-piston .m-cta .m-band { border-radius: 8px; background: linear-gradient(rgba(120,170,215,.08) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(120,170,215,.08) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(120deg, #121519, #2a2018 60%, var(--m-accent-2)); }
body.hv-piston .m-cta .m-band::before { width: 260px; height: 260px; right: -60px; top: -80px; border-radius: 50%; background: none; border: 26px dashed rgba(255,255,255,.08); }
body.hv-piston .m-page-hero h1 { font-size: clamp(30px, 3.4vw, 48px) !important; line-height: 1.1 !important; }
body.hv-piston .m-page-hero { background: linear-gradient(rgba(120,170,215,.07) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(120,170,215,.07) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(120deg, #121519, #1f2a35); } body.hv-piston .m-page-hero .eyebrow { color: #f0b183; }
body.hv-piston footer.site { background: #121519; color: #c9cfd5; border: 0; } body.hv-piston footer.site nav a { color: #fff; }
body.hv-piston .m-collage .m-card { border-radius: 8px; }

/* gear (TECHING): a gear turns into place at the right end and a row of teeth meshes along the bottom edge on hover */
body.bv-gear .btn { border-radius: 6px; padding: 15px 46px 15px 24px; letter-spacing: .01em; }
body.bv-gear .btn .arr { display: none; }
body.bv-gear .btn::before { content: ""; position: absolute; right: 15px; top: 50%; width: 19px; height: 19px; margin-top: -9.5px; pointer-events: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.500' fill='none' stroke='%23000' stroke-width='5' stroke-dasharray='2.900 2.440'/%3E%3Ccircle cx='12' cy='12' r='5.500' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.500' fill='none' stroke='%23000' stroke-width='5' stroke-dasharray='2.900 2.440'/%3E%3Ccircle cx='12' cy='12' r='5.500' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .6; transform: rotate(-120deg) scale(.72); transition: transform .7s cubic-bezier(.3,1.4,.5,1), opacity .3s; }
body.bv-gear .btn:is(:hover, :focus-visible)::before { transform: rotate(120deg) scale(1); opacity: 1; }
body.bv-gear .btn::after { inset: auto 8px 0 8px; height: 4px; z-index: 1; transform: none; background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px); opacity: .25; transition: opacity .3s; }
body.bv-gear .btn:is(:hover, :focus-visible)::after { transform: none; opacity: .65; animation: m-gearmesh .45s linear infinite; }
@keyframes m-gearmesh { to { background-position: 8px 0; } }
body.bv-gear :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: var(--m-accent-2); }

/* petshop (Pets Alive): a pet-shop window under a striped awning — pets in round beds wiggle and bounce, a hamster peeks over the sill, a penguin swims in a bowl, paw prints walk, a squirrel scurries past */
body.hv-petshop .m-hero { background: radial-gradient(44% 54% at 78% 44%, #ffe2c4, transparent 70%), radial-gradient(28% 36% at 4% 96%, #dcf1fd, transparent 70%), radial-gradient(20% 26% at 46% 6%, #ffe3ee, transparent 70%), var(--m-bg); }
body.hv-petshop .m-hero h1 { font-size: clamp(34px, 4.1vw, 58px) !important; line-height: 1.04 !important; max-width: 19ch; letter-spacing: -.01em; }
.m-pv { position: relative; width: min(100%, 580px); aspect-ratio: 600 / 560; justify-self: center; }
.m-pvawn { position: absolute; left: 1%; right: 1%; top: 0; height: 15%; z-index: 5; border-radius: 16px 16px 0 0; background: linear-gradient(rgba(255,255,255,.18), transparent 40%), repeating-linear-gradient(90deg, var(--m-accent) 0 12.5%, #fff3e2 12.5% 25%); -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 14px) no-repeat, radial-gradient(circle 14px at 50% 0, #000 97%, transparent) bottom / 6.25% 14px repeat-x; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 14px) no-repeat, radial-gradient(circle 14px at 50% 0, #000 97%, transparent) bottom / 6.25% 14px repeat-x; transform-origin: 50% 0; animation: m-pvroll .8s .1s cubic-bezier(.3,1.3,.5,1) backwards; }
.m-pvwin { position: absolute; left: 4%; right: 4%; top: 9%; height: 62%; z-index: 1; overflow: hidden; border: 9px solid #fff; border-top: 0; border-radius: 0 0 26px 26px; background: linear-gradient(180deg, #bfe6fb, #eaf7ff 72%, #f6d3ad 72%, #efc392); box-shadow: 0 26px 50px rgba(43,29,20,.16); }
.m-pvglare { position: absolute; inset: 0; pointer-events: none; z-index: 3; background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.4) 20% 26%, transparent 28% 32%, rgba(255,255,255,.28) 33% 35%, transparent 37%) no-repeat; background-size: 200% 100%; background-position: 100% 0; animation: m-pvshine 7s 1.2s ease-in-out infinite; }
.m-pvbed { position: absolute; bottom: 4%; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; --bc: #9fd8f5; }
.m-pvbed.b1 { left: 2%; width: 31%; } .m-pvbed.b2 { left: 32%; width: 36%; z-index: 2; --bc: #f7b6cf; } .m-pvbed.b3 { right: 2%; width: 30%; --bc: #ffd27a; }
.m-pvcush { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--bc) 55%, #fff), var(--bc) 70%); box-shadow: inset 0 -6px 0 rgba(0,0,0,.07), 0 10px 14px rgba(43,29,20,.16); }
.m-pvbed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 17%; z-index: 2; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(color-mix(in srgb, var(--bc) 85%, #000 4%), color-mix(in srgb, var(--bc) 70%, #000 12%)); box-shadow: inset 0 3px 0 rgba(255,255,255,.45); }
.m-pvpet { position: relative; z-index: 1; display: block; width: 86%; margin-bottom: 9%; transform-origin: 50% 100%; filter: drop-shadow(0 8px 8px rgba(43,29,20,.18)); }
.b1 .m-pvpet { animation: m-pvwig 2.6s ease-in-out infinite; } .b2 .m-pvpet { width: 78%; animation: m-pvhop 3.2s ease-in-out infinite; } .b3 .m-pvpet { animation: m-pvshake 1.6s ease-in-out infinite; }
.m-pvbed:hover .m-pvpet { animation-duration: .7s; }
.m-pvpk { position: absolute; left: 6%; top: 57%; width: 15%; height: 14%; z-index: 3; overflow: hidden; }
.m-pvham { display: block; width: 100%; transform: translateY(100%); animation: m-pvpeek 6s 1.4s ease-in-out infinite; }
.m-pvsill { position: absolute; left: 1%; right: 1%; top: 70.5%; height: 4%; z-index: 4; border-radius: 6px; background: linear-gradient(#f0c08a, #dda266); box-shadow: 0 6px 0 #c08850, 0 14px 18px rgba(43,29,20,.16); }
.m-pvbowl { position: absolute; right: 2%; bottom: 1%; width: 27%; aspect-ratio: 1; z-index: 5; overflow: hidden; border-radius: 50%; background: rgba(225,244,255,.55); border: 4px solid rgba(255,255,255,.95); box-shadow: inset 0 -10px 18px rgba(58,155,213,.25), 0 14px 26px rgba(43,29,20,.18); clip-path: inset(9% -10px -10px -10px round 0); }
.m-pvwater { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; background: linear-gradient(#8fd6f7, #3a9bd5); }
.m-pvwater::before { content: ""; position: absolute; left: -50%; right: -50%; top: -6px; height: 12px; background: radial-gradient(circle 9px at 50% 100%, #8fd6f7 96%, transparent) 0 0 / 22px 12px repeat-x; animation: m-pvwave 2.4s linear infinite; }
.m-pvpen { position: absolute; left: 14%; bottom: 20%; width: 72%; display: block; animation: m-pvswim 3.4s ease-in-out infinite; }
.m-pvbub i { position: absolute; left: var(--x); bottom: 12%; width: var(--s); height: var(--s); border-radius: 50%; border: 1.5px solid rgba(255,255,255,.95); opacity: 0; animation: m-pvbub 3.2s calc(var(--i) * .55s) ease-in infinite; }
.m-pvpaws { position: absolute; left: 2%; right: 31%; bottom: 3%; height: 18%; z-index: 4; pointer-events: none; }
.m-pvpaws i { position: absolute; left: var(--x); bottom: var(--y); width: 36px; opacity: 0; rotate: var(--r); animation: m-pvpaw 7s calc(1.2s + var(--i) * .38s) ease-out infinite; }
.m-pvpaws svg { display: block; width: 100%; fill: var(--m-accent); }
.m-pvsq { position: absolute; left: 0; bottom: 1%; width: 15%; z-index: 6; display: block; animation: m-pvrun 10s 1.5s linear infinite; translate: 360% 0; }
.m-pvsq img { clip-path: inset(15% 0 0 0); }
@keyframes m-pvroll { from { transform: scaleY(.15); } }
@keyframes m-pvshine { 0%, 60% { background-position: 100% 0; } 85%, 100% { background-position: -100% 0; } }
@keyframes m-pvwig { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes m-pvhop { 0%, 55%, 100% { transform: translateY(0) scale(1, 1); } 62% { transform: translateY(2px) scale(1.04, .95); } 72% { transform: translateY(-14px) scale(.98, 1.03); } 82% { transform: translateY(0) scale(1.02, .98); } }
@keyframes m-pvshake { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-4px) rotate(-3deg); } 75% { transform: translateX(4px) rotate(3deg); } }
@keyframes m-pvpeek { 0%, 12%, 100% { transform: translateY(100%); } 22%, 52% { transform: translateY(8%); } 30% { transform: translateY(14%) rotate(-6deg); } 40% { transform: translateY(8%) rotate(5deg); } 62% { transform: translateY(100%); } }
@keyframes m-pvwave { to { transform: translateX(22px); } }
@keyframes m-pvswim { 0%, 100% { transform: translateX(-10%) rotate(-6deg); } 50% { transform: translateX(10%) translateY(-6%) rotate(5deg); } }
@keyframes m-pvbub { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 80% { opacity: .9; } 100% { opacity: 0; transform: translateY(-150px); } }
@keyframes m-pvpaw { 0% { opacity: 0; transform: scale(.4); } 4% { opacity: .5; transform: scale(1.08); } 7% { transform: scale(1); } 52% { opacity: .5; } 64%, 100% { opacity: 0; } }
@keyframes m-pvrun { 0% { translate: 380% 0; opacity: 0; } 4% { opacity: 1; } 36% { translate: 170% 0; } 38% { translate: 170% -6px; } 40% { translate: 170% 0; } 48% { translate: 170% 0; } 84% { translate: -40% 0; opacity: 1; } 88%, 100% { translate: -40% 0; opacity: 0; } }
.m-pvtag { padding: 10px 14px 10px 10px; border-radius: 999px; background: #fff; border: 2px dashed color-mix(in srgb, var(--c) 80%, #fff); box-shadow: 0 10px 22px rgba(43,29,20,.07); color: var(--m-ink) !important; transition: transform .45s cubic-bezier(.3,1.6,.5,1), border-color .3s, box-shadow .3s; }
.m-pvdisc { position: relative; flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 40%, #fff), var(--c)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.08), 0 0 0 3px #fff, 0 0 0 5px color-mix(in srgb, var(--c) 70%, #fff); transform-origin: 50% -6px; transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.m-pvdisc::before { content: ""; position: absolute; top: -9px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 3px solid #c9b8a8; background: transparent; }
.m-pvimg { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.7); padding: 3px; }
.m-pvtx b { color: var(--m-ink); } .m-pvtx small { color: var(--m-accent-2); }
.m-pvtag:hover, .m-pvtag:focus-visible { transform: translateY(-4px); border-style: solid; border-color: var(--c); box-shadow: 0 16px 30px color-mix(in srgb, var(--c) 40%, transparent); } .m-pvtag:hover .m-pvdisc { transform: rotate(-14deg); }
body.hv-petshop main section > .wrap > h2::after { content: ""; display: block; width: 132px; height: 18px; margin-top: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23C2540E'%3E%3Cellipse cx='20' cy='27' rx='9' ry='8'/%3E%3Cellipse cx='9' cy='15' rx='4' ry='5'/%3E%3Cellipse cx='17' cy='9' rx='4' ry='5'/%3E%3Cellipse cx='25' cy='9' rx='4' ry='5'/%3E%3Cellipse cx='32' cy='15' rx='4' ry='5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 18px 18px repeat-x; opacity: .7; }
body.hv-petshop .pcard:hover, body.hv-petshop .m-acard:hover { box-shadow: 0 0 0 2px var(--m-accent), 0 18px 40px rgba(194,84,14,.16); }
body.hv-petshop .m-acard .m-art { background: radial-gradient(60% 50% at 50% 100%, #fde0c4, transparent 70%), linear-gradient(#e9f6fe, #fffaf3); }
body.hv-petshop .m-cta .m-band { border-radius: 30px; background: radial-gradient(50% 120% at 100% 0, rgba(110,198,240,.4), transparent 70%), linear-gradient(120deg, var(--m-accent-2), var(--m-accent)); }
body.hv-petshop .m-cta .m-band::before { width: 240px; height: 240px; right: -30px; top: -40px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23fff' fill-opacity='.14'%3E%3Cellipse cx='20' cy='27' rx='9' ry='8'/%3E%3Cellipse cx='9' cy='15' rx='4' ry='5'/%3E%3Cellipse cx='17' cy='9' rx='4' ry='5'/%3E%3Cellipse cx='25' cy='9' rx='4' ry='5'/%3E%3Cellipse cx='32' cy='15' rx='4' ry='5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; transform: rotate(18deg); }
body.hv-petshop .m-page-hero { background: radial-gradient(60% 120% at 100% 0, rgba(110,198,240,.35), transparent 70%), linear-gradient(120deg, #3a2618, var(--m-accent-2)); } body.hv-petshop .m-page-hero .eyebrow { color: #ffd2a8; }
body.hv-petshop footer.site { background: #2b1d14; color: #ecdccd; border: 0; } body.hv-petshop footer.site nav a { color: #fff; }
body.hv-petshop .m-collage .m-card { border-radius: 30px; }

/* wag (Pets Alive): the button wags like a tail and a paw print stamps behind the label */
body.bv-wag .btn { border-radius: 999px; padding: 15px 28px; }
body.bv-wag .btn:is(:hover, :focus-visible) { animation: m-wag .5s ease-in-out 2; }
@keyframes m-wag { 0%, 100% { transform: translateY(-3px) rotate(0); } 25% { transform: translateY(-3px) rotate(-3deg); } 75% { transform: translateY(-3px) rotate(3deg); } }
body.bv-wag .btn::after { inset: auto; right: 8px; top: 50%; width: 24px; height: 24px; margin-top: -12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cellipse cx='20' cy='27' rx='9' ry='8'/%3E%3Cellipse cx='9' cy='15' rx='4' ry='5'/%3E%3Cellipse cx='17' cy='9' rx='4' ry='5'/%3E%3Cellipse cx='25' cy='9' rx='4' ry='5'/%3E%3Cellipse cx='32' cy='15' rx='4' ry='5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cellipse cx='20' cy='27' rx='9' ry='8'/%3E%3Cellipse cx='9' cy='15' rx='4' ry='5'/%3E%3Cellipse cx='17' cy='9' rx='4' ry='5'/%3E%3Cellipse cx='25' cy='9' rx='4' ry='5'/%3E%3Cellipse cx='32' cy='15' rx='4' ry='5'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; transform: scale(2.4) rotate(-20deg); transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .25s; }
body.bv-wag .btn:is(:hover, :focus-visible)::after { transform: scale(1) rotate(-20deg); opacity: .24; }
body.bv-wag :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: var(--m-accent-2); }

/* hatch (Rainbocorns): a giant sequin egg wobbles, a crack draws across it, the shell splits and a real plush rises out under a rainbow; sparkles twinkle and a sequin patch flips colours */
body.hv-hatch .m-hero { background: radial-gradient(46% 56% at 76% 46%, #fbe2ff, transparent 70%), radial-gradient(30% 40% at 6% 92%, #dcf2ff, transparent 70%), radial-gradient(24% 30% at 48% 4%, #fff2cc, transparent 70%), var(--m-bg); }
body.hv-hatch .m-hero h1 { font-size: clamp(36px, 4.6vw, 64px) !important; line-height: 1.06 !important; letter-spacing: 0; }
body.hv-hatch .m-hero h1::after { content: ""; display: block; width: 150px; height: 10px; margin-top: 14px; border-radius: 10px; background: linear-gradient(90deg, #ff5a7a, #ff9f43, #ffc23d, #5ed39b, #3cc0e8, #9b6bff); }
.m-hc { position: relative; width: min(100%, 580px); aspect-ratio: 600 / 560; justify-self: center; }
.m-hcbow { position: absolute; left: 0; top: 5%; width: 100%; height: auto; overflow: visible; }
.m-hcbow path { fill: none; stroke: var(--c); stroke-width: 15; stroke-linecap: round; opacity: .8; stroke-dasharray: 100; animation: m-draw 1s calc(.15s + var(--i) * .08s) cubic-bezier(.5,0,.3,1) backwards; }
.m-hcegg { position: absolute; left: 26%; top: 17%; width: 48%; aspect-ratio: 200 / 252; z-index: 3; animation: m-hcwob .7s .1s ease-in-out 2; transform-origin: 50% 90%; }
:is(.m-hcback, .m-hcbot, .m-hctop, .m-hccrack) { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.m-hcback { z-index: 0; }
.m-hcpet { position: absolute; left: 3%; width: 94%; bottom: 9%; z-index: 1; display: block; filter: drop-shadow(0 14px 16px rgba(42,24,56,.25)); animation: m-hcrise .9s 1.25s cubic-bezier(.3,1.45,.5,1) backwards; }
.m-hcbot { z-index: 2; transform: translateY(5%); animation: m-hcdrop .5s 1.1s ease-out backwards; filter: drop-shadow(0 18px 22px rgba(42,24,56,.22)); }
.m-hctop { z-index: 3; transform: translate(56%, -36%) rotate(30deg); animation: m-hcfly 1s 1.05s cubic-bezier(.3,1.25,.5,1) backwards; filter: drop-shadow(0 12px 16px rgba(42,24,56,.2)); }
.m-hccrack { z-index: 4; opacity: 0; animation: m-hccr 1.1s .1s linear backwards; }
.m-hccrack path { fill: none; stroke: #6a2a9c; stroke-width: 3.500; stroke-linejoin: round; stroke-dasharray: 100; animation: m-draw .45s .55s ease-in backwards; }
.m-hcf { position: absolute; z-index: 4; display: block; filter: drop-shadow(0 12px 14px rgba(42,24,56,.22)); animation: m-hcpop .7s calc(1.7s + var(--d, 0s)) cubic-bezier(.3,1.6,.5,1) backwards, m-hcbob 4.5s calc(2.4s + var(--d, 0s)) ease-in-out infinite; transition: scale .4s cubic-bezier(.3,1.6,.5,1); }
.m-hcf:hover { scale: 1.08; }
.m-hcf.f1 { left: 0; top: 18%; width: 25%; padding: 4%; border-radius: 50%; background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.95) 0 8%, rgba(255,255,255,.35) 22%, rgba(214,196,255,.28) 62%, rgba(150,110,230,.32)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.8); }
.m-hcf.f2 { left: 2%; bottom: 2%; width: 24%; --d: .15s; } .m-hcf.f3 { right: 1%; bottom: 3%; width: 20%; --d: .3s; }
.m-hcsp i { position: absolute; left: var(--x); top: var(--y); z-index: 5; width: 22px; animation: m-hctw 2.6s calc(var(--i) * .43s) ease-in-out infinite; }
.m-hcsp svg { display: block; width: 100%; fill: #ffc23d; } .m-hcsp i:nth-child(3n+2) svg { fill: #ff5a9d; } .m-hcsp i:nth-child(3n) svg { fill: #3cc0e8; }
.m-hcsq { position: absolute; right: 1%; top: 41%; z-index: 5; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; width: 19%; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 12px 24px rgba(42,24,56,.16); rotate: 8deg; perspective: 200px; }
.m-hcsq i { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.85) 0 14%, transparent 34%), #ff7fb0; transition: transform .45s calc(var(--i) * 22ms) ease, background-color 0s calc(var(--i) * 22ms + .22s); animation: m-hcflip 1.2s calc(2.2s + var(--i) * .04s) ease-in-out; }
.m-hc:hover .m-hcsq i, .m-hcsq:hover i { transform: rotateY(180deg); background-color: #47c9e8; }
@keyframes m-hcwob { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes m-hcrise { from { transform: translateY(40%) scale(.8); } }
@keyframes m-hcdrop { from { transform: none; } }
@keyframes m-hcfly { from { transform: none; } }
@keyframes m-hccr { 0%, 98% { opacity: 1; } 100% { opacity: 0; } }
@keyframes m-hcpop { from { scale: 0; } }
@keyframes m-hcbob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes m-hctw { 0%, 100% { transform: scale(.2) rotate(0); opacity: .2; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }
@keyframes m-hcflip { 0% { transform: rotateY(0); background-color: #ff7fb0; } 49% { background-color: #ff7fb0; } 50% { transform: rotateY(180deg); background-color: #47c9e8; } 99% { background-color: #47c9e8; } 100% { transform: rotateY(360deg); background-color: #ff7fb0; } }
.m-hcegg2 { padding: 12px 14px 12px 12px; border-radius: 22px; background: #fff; border: 2px solid color-mix(in srgb, var(--c) 70%, #d9c8f2); box-shadow: 0 10px 24px rgba(42,24,56,.07); color: var(--m-ink) !important; transition: transform .45s cubic-bezier(.3,1.6,.5,1), border-color .3s, box-shadow .3s; }
.m-hcegg2::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -2px; height: 5px; border-radius: 5px; background: radial-gradient(circle, #ff7fb0 0 2px, transparent 2.500px) 0 0 / 7px 5px repeat-x, radial-gradient(circle, #47c9e8 0 2px, transparent 2.500px) 3.500px 0 / 7px 5px repeat-x; transform: scaleX(0); transition: transform .5s var(--m-ease); }
.m-hcimg { width: 58px; height: 70px; padding: 6px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 25%, #fff 0 10%, transparent 30%), var(--c); }
.m-hctx b { color: var(--m-ink); } .m-hctx small { color: var(--m-accent-2); }
.m-hcegg2:hover, .m-hcegg2:focus-visible { transform: translateY(-4px) rotate(-1deg); border-color: var(--m-accent); box-shadow: 0 16px 30px rgba(142,60,200,.16); } .m-hcegg2:hover::after { transform: scaleX(1); } .m-hcegg2:hover .m-hcimg { animation: m-hcwob .6s ease-in-out; }
body.hv-hatch main section > .wrap > h2::after { content: ""; display: block; width: 120px; height: 8px; margin-top: 10px; border-radius: 8px; background: linear-gradient(90deg, #ff5a7a, #ffc23d, #5ed39b, #3cc0e8, #9b6bff); }
body.hv-hatch .pcard:hover, body.hv-hatch .m-acard:hover { box-shadow: 0 0 0 2px var(--m-accent), 0 18px 40px rgba(142,60,200,.16); }
body.hv-hatch .m-acard .m-art { background: radial-gradient(circle at 14% 22%, #ffd9e6 0 12%, transparent 13%), radial-gradient(circle at 86% 78%, #d9f1ff 0 14%, transparent 15%), radial-gradient(circle at 82% 16%, #fff1c7 0 9%, transparent 10%), #fcf9ff; }
body.hv-hatch .m-cta .m-band { border-radius: 32px; background: radial-gradient(50% 120% at 100% 0, rgba(255,90,157,.4), transparent 70%), radial-gradient(40% 100% at 0 100%, rgba(60,192,232,.35), transparent 70%), linear-gradient(120deg, var(--m-accent-2), var(--m-accent)); }
body.hv-hatch .m-cta .m-band::before { width: 320px; height: 160px; right: -40px; top: -10px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%23fff' stroke-opacity='.18' stroke-width='9' stroke-linecap='round'%3E%3Cpath d='M10 96a90 90 0 0 1 180 0M30 96a70 70 0 0 1 140 0M50 96a50 50 0 0 1 100 0'/%3E%3C/svg%3E") no-repeat center / contain; }
body.hv-hatch .m-page-hero { background: radial-gradient(60% 120% at 100% 0, rgba(255,90,157,.4), transparent 70%), linear-gradient(120deg, var(--m-hero-a), #4b2470); } body.hv-hatch .m-page-hero .eyebrow { color: #ffc2e0; }
body.hv-hatch footer.site { background: #2a1838; color: #e4d8ef; border: 0; } body.hv-hatch footer.site nav a { color: #fff; }
body.hv-hatch .m-collage .m-card { border-radius: 32px; }

/* sequin (Rainbocorns): a sequin field sweeps across the button, flipping it from one colour to another */
body.bv-sequin .btn { border-radius: 999px; padding: 15px 28px; }
body.bv-sequin .btn::after { inset: -2px; z-index: -1; transform: none; clip-path: inset(0 100% 0 0 round 999px); transition: clip-path .6s cubic-bezier(.6,0,.3,1); background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.55) 0 1px, transparent 1.500px) 0 0 / 8px 8px, radial-gradient(circle, var(--m-sq2, #b261ea) 0 3px, transparent 3.300px) 0 0 / 8px 8px, radial-gradient(circle, var(--m-sq2, #b261ea) 0 3px, transparent 3.300px) 4px 4px / 8px 8px, var(--m-sq1, var(--m-accent-2)); }
body.bv-sequin .btn:is(:hover, :focus-visible)::after { transform: none; clip-path: inset(0 0 0 0 round 999px); }
body.bv-sequin :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: var(--m-accent-2); }
body.bv-sequin :is(.btn.ghost, .m-btn-ghost) { --m-sq1: var(--m-ink); --m-sq2: #4e3566; } body.bv-sequin .btn.m-white { --m-sq1: #f3e8ff; --m-sq2: #e4cffb; } body.bv-sequin .m-cta .btn.m-white:hover { color: var(--m-ink); }

/* manicure (GAOY): a nail-shaped frame holds a manicure photo, a cat-eye shimmer sweeps a fan of nail swatches, chrome bottles on a mirror shelf, a nail lamp glows while its timer counts down */
@property --m-mnt { syntax: "<integer>"; inherits: false; initial-value: 60; }
body.hv-manicure .m-hero { background: radial-gradient(46% 56% at 74% 44%, #f6d9d2, transparent 70%), radial-gradient(30% 40% at 4% 96%, #f1dfe6, transparent 70%), var(--m-bg); }
body.hv-manicure .m-hero h1 { font-size: clamp(34px, 4.4vw, 62px) !important; line-height: 1.04 !important; letter-spacing: -.025em; }
.m-mn { position: relative; width: min(100%, 580px); aspect-ratio: 600 / 560; justify-self: center; }
.m-mnglow { position: absolute; left: 22%; top: 4%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(163,41,79,.2), rgba(163,41,79,0)); }
.m-mnnail { position: absolute; left: 32%; top: 0; width: 38%; aspect-ratio: .64; z-index: 2; overflow: hidden; border-radius: 50% 50% 24% 24% / 56% 56% 15% 15%; box-shadow: 0 0 0 7px #fff, 0 0 0 9px #dcc3be, 0 34px 60px rgba(34,18,26,.25); animation: m-mnin .9s .05s var(--m-ease) backwards; }
.m-mnphoto, .m-mnphoto img { display: block; width: 100%; height: 100%; } .m-mnphoto img { object-fit: cover; object-position: 26% 50%; }
.m-mngloss { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 18% at 34% 12%, rgba(255,255,255,.55), transparent 70%), linear-gradient(115deg, transparent 38%, rgba(255,255,255,.42) 46%, rgba(255,255,255,.08) 52%, transparent 60%) no-repeat; background-size: 100% 100%, 260% 100%; background-position: 0 0, 130% 0; animation: m-mngl 5.5s 1s ease-in-out infinite; }
.m-mnfan { position: absolute; left: 0; bottom: 5%; width: 34%; aspect-ratio: 1; z-index: 3; }
.m-mnfan i { position: absolute; left: 50%; bottom: 4%; width: 21%; height: 54%; margin-left: -10.5%; transform-origin: 50% 100%; rotate: var(--a); border-radius: 50% 50% 44% 44% / 62% 62% 38% 38%; background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.6) 46%, rgba(255,255,255,.1) 54%, transparent 64%) 130% 0 / 300% 100% no-repeat, var(--c); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 6px 12px rgba(34,18,26,.22); animation: m-mnspread .9s calc(.3s + var(--i) * .06s) var(--m-ease) backwards, m-mncat 3.8s calc(1.2s + var(--i) * .16s) ease-in-out infinite; }
.m-mnfan::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 14%; aspect-ratio: 1; margin-left: -7%; border-radius: 50%; background: linear-gradient(135deg, #f4f4f6, #a9a9b2); box-shadow: 0 3px 6px rgba(0,0,0,.25); }
.m-mnlamp { position: absolute; right: 0; top: 35%; width: 33%; z-index: 3; padding: 6px; border-radius: 20px; background: #fff; box-shadow: 0 18px 34px rgba(34,18,26,.18); animation: m-mnin .8s .4s var(--m-ease) backwards; }
.m-mnlph { display: block; overflow: hidden; border-radius: 14px; }
.m-mnuv { position: absolute; left: 12%; right: 12%; top: 36%; height: 30%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(176,120,255,.75), rgba(176,120,255,0)); mix-blend-mode: multiply; animation: m-mnuv 2.6s ease-in-out infinite; }
.m-mnlcd { position: absolute; right: -4%; top: -9%; padding: 7px 10px; border-radius: 8px; background: #22121a; color: #ffb3d6; font: 700 15px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .04em; box-shadow: 0 8px 16px rgba(34,18,26,.3), inset 0 0 0 1px rgba(255,255,255,.12); }
.m-mnlcd i { font-style: normal; counter-reset: m-mnt var(--m-mnt); animation: m-mntimer 12s 1s linear infinite; }
.m-mnlcd i::after { content: counter(m-mnt) "s"; }
.m-mnshelf { position: absolute; left: 34%; right: 1%; bottom: 1%; z-index: 4; display: flex; justify-content: space-around; align-items: flex-end; padding: 0 3% 12px; }
.m-mnshelf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 13px; border-radius: 7px; background: linear-gradient(90deg, #cfcfd6, #fff 22%, #bdbdc6 48%, #fff 72%, #cfcfd6); box-shadow: 0 10px 18px rgba(34,18,26,.18); }
.m-mnbot { position: relative; z-index: 1; display: block; width: 15%; filter: drop-shadow(0 10px 8px rgba(34,18,26,.22)); animation: m-mnup .7s calc(.6s + var(--i) * .1s) cubic-bezier(.3,1.4,.5,1) backwards; transition: transform .4s var(--m-ease); }
.m-mnbot::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 70%; height: 8px; margin-left: -35%; border-radius: 50%; background: rgba(34,18,26,.18); filter: blur(3px); }
.m-mnbot.k1 { --nc: #f2d2cc; } .m-mnbot.k2 { --nc: #d9c9d8; } .m-mnbot.k3 { --nc: #b3243c; } .m-mnbot.k4 { --nc: #f3a9c4; }
.m-mnbot::after { content: ""; position: absolute; right: -24%; bottom: 6%; width: 36%; aspect-ratio: .7; border-radius: 50% 50% 44% 44% / 62% 62% 38% 38%; background: linear-gradient(115deg, rgba(255,255,255,.55), transparent 50%), var(--nc); box-shadow: 0 3px 6px rgba(34,18,26,.2); }
.m-mnbot:hover { transform: translateY(-8px) rotate(-4deg); }
@keyframes m-mnin { from { transform: translateY(26px); } }
@keyframes m-mnup { from { transform: translateY(40px); opacity: 0; } }
@keyframes m-mnspread { from { rotate: 0deg; } }
@keyframes m-mncat { 0%, 30% { background-position: 130% 0, 0 0; } 70%, 100% { background-position: -30% 0, 0 0; } }
@keyframes m-mngl { 0%, 35% { background-position: 0 0, 130% 0; } 75%, 100% { background-position: 0 0, -30% 0; } }
@keyframes m-mnuv { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes m-mntimer { from { --m-mnt: 60; } to { --m-mnt: 0; } }
.m-mntip { padding: 12px 14px 12px 14px; border-radius: 18px; background: #fff; border: 1.5px solid #ecd8d3; box-shadow: 0 10px 22px rgba(34,18,26,.06); color: var(--m-ink) !important; transition: transform .4s cubic-bezier(.3,1.6,.5,1), border-color .3s, box-shadow .3s; }
.m-mnnailc { flex: none; width: 24px; height: 38px; border-radius: 50% 50% 44% 44% / 62% 62% 38% 38%; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.7) 46%, transparent 62%) 130% 0 / 300% 100% no-repeat, var(--c); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5), 0 4px 8px rgba(34,18,26,.18); transition: background-position .8s ease; }
.m-mnimg { width: 52px; height: 52px; border-radius: 14px; background: #fbf4f2; padding: 4px; }
.m-mntx b { color: var(--m-ink); } .m-mntx small { color: var(--m-accent); }
.m-mntip:hover, .m-mntip:focus-visible { transform: translateY(-4px); border-color: var(--m-accent); box-shadow: 0 16px 30px rgba(163,41,79,.14); } .m-mntip:hover .m-mnnailc { background-position: -30% 0, 0 0; }
body.hv-manicure main section > .wrap > h2::after { content: ""; display: block; width: 130px; height: 6px; margin-top: 12px; border-radius: 6px; background: linear-gradient(90deg, #7e1c3c, #a3294f 30%, #e9c2ba 60%, #cfcfd6 80%, #fff); }
body.hv-manicure .pcard:hover, body.hv-manicure .m-acard:hover { box-shadow: 0 0 0 2px var(--m-accent), 0 18px 40px rgba(163,41,79,.14); }
body.hv-manicure .m-acard .m-art { background: radial-gradient(60% 60% at 50% 100%, #f6dcd6, transparent 70%), linear-gradient(#fff, #fbf4f2); }
body.hv-manicure .m-cta .m-band { border-radius: 28px; background: linear-gradient(115deg, transparent 50%, rgba(255,255,255,.08) 56%, transparent 62%), radial-gradient(50% 120% at 100% 0, rgba(233,194,186,.35), transparent 70%), linear-gradient(120deg, #22121a, var(--m-accent-2) 55%, var(--m-accent)); }
body.hv-manicure .m-cta .m-band::before { width: 150px; height: 210px; right: 30px; top: -50px; border-radius: 50% 50% 44% 44% / 62% 62% 38% 38%; background: rgba(255,255,255,.08); transform: rotate(16deg); }
body.hv-manicure .m-page-hero { background: radial-gradient(60% 120% at 100% 0, rgba(233,194,186,.3), transparent 70%), linear-gradient(120deg, #22121a, var(--m-accent-2)); } body.hv-manicure .m-page-hero .eyebrow { color: #f3c4d2; }
body.hv-manicure footer.site { background: #22121a; color: #e6d6da; border: 0; } body.hv-manicure footer.site nav a { color: #fff; }
body.hv-manicure .m-collage .m-card { border-radius: 26px; }

/* glossy (GAOY): a cured-gel bevel with a top-coat highlight; on hover a specular streak sweeps across and the highlight slides */
body.bv-glossy .btn { border-radius: 999px; padding: 15px 28px; }
body.bv-glossy :is(.btn.accent, .pcard .btn, .m-btn-main) { box-shadow: inset 0 -3px 6px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px color-mix(in srgb, var(--m-accent) 32%, transparent); }
body.bv-glossy .btn::before { content: ""; position: absolute; left: 14%; right: 14%; top: 4px; height: 36%; z-index: -1; border-radius: 999px; pointer-events: none; background: linear-gradient(rgba(255,255,255,.26), rgba(255,255,255,0)); transition: transform .55s var(--m-ease); }
body.bv-glossy .btn:is(:hover, :focus-visible)::before { transform: translateX(7%) scaleX(1.06); }
body.bv-glossy .btn::after { inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.75) 47%, rgba(255,255,255,.18) 52%, transparent 60%); transform: translateX(-110%); transition: transform .85s cubic-bezier(.4,0,.2,1); }
body.bv-glossy .btn:is(:hover, :focus-visible)::after { transform: translateX(110%); }
body.bv-glossy :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: var(--m-accent-2); border-color: rgba(255,255,255,.55); }
body.bv-glossy :is(.btn.ghost, .m-btn-ghost)::before { display: none; }
body.bv-glossy .m-cta .btn.m-white:hover { color: var(--m-ink); }

@media (prefers-reduced-motion: reduce) { .m-hccrack, .m-pvpaws i, .m-pvbub i, .m-pvsq { opacity: 0 !important; } .m-pvham { transform: translateY(8%); } .m-pvsq { translate: 0 0; } }
/* phones: batch (4) heroes stack */
@media (max-width: 900px) {
  :is(body.hv-piston, body.hv-petshop, body.hv-hatch, body.hv-manicure) .m-hero { min-height: 0; } :is(body.hv-piston, body.hv-petshop, body.hv-hatch, body.hv-manicure) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr); }
  .m-pvtags, .m-hceggs, .m-mntips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-pvtags, .m-hceggs, .m-mntips) > a:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
  .m-pscats { row-gap: 22px; padding-top: 18px; }
}
@media (max-width: 560px) { .m-pscats { grid-template-columns: minmax(0, 1fr); } .m-pstag { font-size: 8.5px; letter-spacing: .08em; padding: 3px 5px; } .m-mnlcd { font-size: 12px; padding: 5px 7px; } }
@media (max-width: 420px) {
  .m-pvtag, .m-hcegg2, .m-mntip { gap: 9px; padding: 10px; } .m-pvdisc { width: 50px; height: 50px; } .m-pvimg { width: 38px; height: 38px; } .m-hcimg { width: 46px; height: 56px; } .m-mnimg { width: 42px; height: 42px; } .m-mnnailc { width: 18px; height: 30px; }
  .m-psparts a { padding: 7px 9px 6px; } .m-psparts b { font-size: 14px; } .m-pvpaws i { width: 20px; } .m-hcsp i { width: 15px; }
}

/* ===== batch 12.11.2026: goldlink/clasp (Nuragold), oche/bullseye (TURNART), aquarium/bubble (Top Fin), tidy/zip (VERONLY) ===== */
:is(body.hv-goldlink, body.hv-oche, body.hv-aquarium, body.hv-tidy) .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); }
:is(body.hv-goldlink, body.hv-oche, body.hv-aquarium, body.hv-tidy) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:is(body.hv-goldlink, body.hv-oche, body.hv-aquarium, body.hv-tidy) .m-hero .m-copy > * { animation: m-rise .8s var(--m-ease) both; }
:is(body.hv-goldlink, body.hv-oche, body.hv-aquarium, body.hv-tidy) .m-hero .m-copy > :nth-child(3) { animation-delay: .08s; } :is(body.hv-goldlink, body.hv-oche, body.hv-aquarium, body.hv-tidy) .m-hero .m-copy > :nth-child(4) { animation-delay: .16s; } :is(body.hv-goldlink, body.hv-oche, body.hv-aquarium, body.hv-tidy) .m-hero .m-copy > :nth-child(n+5) { animation-delay: .24s; }
:is(body.hv-goldlink, body.hv-oche, body.hv-aquarium, body.hv-tidy) .m-hero h1 { text-wrap: balance; max-width: 17ch; }
:is(body.hv-goldlink, body.hv-oche, body.hv-aquarium, body.hv-tidy) .m-hero .bgcredit { display: none; }
:is(body.hv-aquarium, body.hv-tidy) .m-hero { color: var(--m-ink); }
:is(body.hv-aquarium, body.hv-tidy) .m-hero h1 { color: var(--m-ink) !important; }
:is(body.hv-aquarium, body.hv-tidy) .m-hero .sub { color: var(--m-body-ink); } :is(body.hv-aquarium, body.hv-tidy) .m-hero .eyebrow { color: var(--m-accent-2); }
:is(body.hv-aquarium, body.hv-tidy) .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: var(--m-ink) !important; background: rgba(255,255,255,.65) !important; }
:is(body.hv-aquarium, body.hv-tidy) .m-hero .m-btn-ghost:hover { background: var(--m-ink) !important; color: #fff !important; }
:is(body.hv-aquarium, body.hv-tidy) .m-hero .m-chips span { background: #fff; color: var(--m-ink); border: 1.5px solid color-mix(in srgb, var(--m-hero-b) 24%, transparent); backdrop-filter: none; }
:is(.m-gl, .m-ocv, .m-aq, .m-td) a { -webkit-tap-highlight-color: transparent; }
:is(.m-gl, .m-ocv, .m-aq, .m-td) img { display: block; width: 100%; height: auto; border-radius: 0; }
:is(.m-glcats, .m-occats, .m-aqcats, .m-tdcats) { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; padding: 10px clamp(18px, 4vw, 72px) clamp(26px, 4vh, 44px); }
:is(.m-gltag, .m-octile, .m-aqtile, .m-tdtile) { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; animation: m-rise .7s calc(.8s + var(--i, 0) * .08s) var(--m-ease) backwards; }
.m-q8tx { position: relative; z-index: 1; min-width: 0; } .m-q8tx b { display: block; font: 700 14px/1.2 var(--m-body); overflow-wrap: anywhere; } .m-q8tx :is(small, em) { display: block; margin-top: 4px; font: 600 12px/1.2 var(--m-body); font-style: normal; }
:is(.m-glimg, .m-ocimg, .m-aqimg, .m-tdimg) { flex: none; display: block; overflow: hidden; } :is(.m-glimg, .m-ocimg, .m-aqimg, .m-tdimg) img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; transition: transform .45s var(--m-ease); }
:is(.m-gltag, .m-octile, .m-aqtile, .m-tdtile):hover :is(.m-glimg, .m-ocimg, .m-aqimg, .m-tdimg) img { transform: scale(1.08) rotate(-4deg); }
:is(.m-gltag, .m-octile, .m-aqtile, .m-tdtile, .m-oclock):focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; }
:is(.m-glkarat, .m-aqgal, .m-tdholds) { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -6px 0 22px; }
:is(.m-glkarat, .m-aqgal, .m-tdholds) > span { flex-basis: 100%; margin: 0 0 2px; font: 700 12px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; }
:is(.m-glkarat, .m-aqgal, .m-tdholds) a { display: inline-flex; text-decoration: none; transition: background .25s, border-color .25s, transform .3s var(--m-ease), box-shadow .3s; animation: m-rise .6s calc(.45s + var(--i, 0) * .06s) var(--m-ease) backwards; }
:is(.m-glkarat, .m-aqgal, .m-tdholds) a:is(:hover, :focus-visible) { transform: translateY(-2px); }

/* goldlink (Nuragold): a black velvet jeweler's tray — an SVG gold chain draws itself link by link and swings on its pins, a glint runs along the links, real chains rest on the velvet; karat hallmarks and a mm width gauge */
body.hv-goldlink .m-hero { background: radial-gradient(50% 60% at 76% 46%, rgba(184,135,46,.17), transparent 70%), radial-gradient(40% 50% at 0 100%, rgba(120,60,30,.18), transparent 70%), linear-gradient(160deg, #15110d, #0b0908); color: #fff; }
body.hv-goldlink .m-hero h1 { font-size: clamp(28px, 3.3vw, 48px) !important; line-height: 1.14 !important; letter-spacing: .01em; max-width: 18ch; }
body.hv-goldlink .m-hero .eyebrow { color: #e2bf68; letter-spacing: .24em; } body.hv-goldlink .m-hero .sub { color: rgba(255,248,232,.84); }
body.hv-goldlink .m-hero .m-chips span { background: rgba(226,191,104,.08); border-color: rgba(226,191,104,.35); color: #f3e3bd; }
body.hv-goldlink .m-hero .m-btn-ghost { border-color: rgba(226,191,104,.7) !important; color: #f3e3bd !important; } body.hv-goldlink .m-hero .m-btn-ghost:hover { background: #f3e3bd !important; color: #17130d !important; }
.m-gl { position: relative; width: min(100%, 600px); aspect-ratio: 600 / 560; justify-self: center; }
.m-gltray { position: absolute; inset: 0; border-radius: 26px; background: radial-gradient(70% 60% at 50% 38%, #2b2421, #141110 72%), #141110; box-shadow: inset 0 0 0 10px #1e1813, inset 0 0 0 11px rgba(226,191,104,.45), inset 0 0 0 13px #1e1813, inset 0 26px 50px rgba(0,0,0,.55), 0 40px 80px rgba(0,0,0,.5); }
.m-gltray::before { content: ""; position: absolute; inset: 13px; border-radius: 16px; background: repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px), repeating-linear-gradient(25deg, rgba(0,0,0,.1) 0 1px, transparent 1px 4px); }
.m-gltray::after { content: ""; position: absolute; left: 24px; right: 24px; top: 80%; height: 2px; background: linear-gradient(90deg, transparent, rgba(226,191,104,.4), transparent); box-shadow: 0 1px 0 rgba(0,0,0,.6); }
.m-glchain { position: absolute; left: 3%; top: 4%; width: 94%; height: auto; z-index: 4; overflow: visible; transform-origin: 50% 22.7%; filter: drop-shadow(0 6px 5px rgba(0,0,0,.65)); animation: m-glswing 6s 2.4s ease-in-out infinite; }
.m-gllinks ellipse { fill: none; stroke: url(#m-glg); stroke-width: 3.6; transform-box: fill-box; transform-origin: center; animation: m-gllink .35s calc(.3s + var(--i) * .055s) cubic-bezier(.3,1.5,.5,1) backwards; }
.m-gllinks ellipse.e { fill: url(#m-glg); stroke: #8c6418; stroke-width: 1; }
.m-glglint { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 3 197; stroke-dashoffset: 3; opacity: .9; filter: blur(2.5px); animation: m-glglint 4.2s 2.3s ease-in-out infinite; }
.m-glpin { fill: #e2bf68; stroke: #6e4e12; stroke-width: 1.5; }
.m-glneck { position: absolute; left: 21%; top: 24%; width: 58%; z-index: 2; display: block; filter: drop-shadow(0 18px 18px rgba(0,0,0,.65)); animation: m-gldrop 1s .1s var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-glneck { -webkit-mask: linear-gradient(transparent, #000 16%); mask: linear-gradient(transparent, #000 16%); }
.m-glneck:hover { transform: scale(1.02); }
.m-glbr { position: absolute; z-index: 3; display: block; filter: drop-shadow(0 12px 12px rgba(0,0,0,.6)); animation: m-gldrop .9s calc(.4s + var(--i, 0) * .12s) var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-glbr.b1 { left: 2%; top: 47%; width: 27%; rotate: -10deg; } .m-glbr.b2 { right: 2%; top: 43%; width: 27%; rotate: 9deg; --i: 1; } .m-glbr.b3 { left: 7%; bottom: 3.5%; width: 23%; --i: 2; }
.m-glbr:hover { transform: translateY(-6px) scale(1.04); }
.m-glgauge { position: absolute; right: 5%; bottom: 4%; z-index: 5; width: 50%; padding: 7px 10px 6px; border-radius: 8px; background: linear-gradient(180deg, #edd58f, #c99a3c 55%, #8c6418); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 3px rgba(60,40,8,.4), 0 10px 20px rgba(0,0,0,.5); color: #17130d; animation: m-rise .7s 1.1s var(--m-ease) backwards; }
.m-glgauge > span:first-child { display: block; margin-bottom: 5px; font: 700 9.5px/1 var(--m-body); letter-spacing: .18em; text-transform: uppercase; color: #2a1f12; }
.m-glslots { display: flex; justify-content: space-between; align-items: flex-end; gap: 4px; }
.m-glslots a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: #17130d !important; }
.m-glslots i { display: block; width: calc(var(--w) * 2.1px); height: 16px; border-radius: 2px; background: #2a1f12; box-shadow: inset 0 2px 3px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.5); transition: background .25s, box-shadow .25s; }
.m-glslots b { font: 700 11px/1 var(--m-body); }
.m-glslots a:is(:hover, :focus-visible) i { background: #0b0908; box-shadow: inset 0 0 0 2px #fff1bf, 0 0 10px rgba(255,241,191,.7); }
@keyframes m-gllink { from { scale: 0; opacity: 0; } }
@keyframes m-glglint { 0% { stroke-dashoffset: 3; } 55%, 100% { stroke-dashoffset: -100; } }
@keyframes m-glswing { 0%, 100% { transform: perspective(700px) rotateX(0deg); } 30% { transform: perspective(700px) rotateX(24deg); } 65% { transform: perspective(700px) rotateX(-14deg); } }
@keyframes m-gldrop { from { transform: translateY(-22px) scale(.96); } }
.m-glkarat > span { color: #e2bf68; }
.m-glkarat a { align-items: center; gap: 9px; padding: 5px 13px 5px 5px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(226,191,104,.4); color: #fff !important; }
.m-glkarat b { display: grid; place-items: center; width: 42px; height: 26px; border-radius: 50%; border: 1.5px solid #e2bf68; box-shadow: inset 0 0 0 2px rgba(0,0,0,.45), inset 0 0 0 3px rgba(226,191,104,.35); font: 700 11.5px/1 var(--m-head); letter-spacing: .04em; color: #f3d98c; }
.m-glkarat small { font: 600 12.5px/1 var(--m-body); white-space: nowrap; color: rgba(255,248,232,.82); }
.m-glkarat a:is(:hover, :focus-visible) { background: rgba(226,191,104,.14); border-color: #e2bf68; }
.m-gltag { padding: 12px 14px 12px 28px; border-radius: 6px 14px 14px 6px; background: linear-gradient(#f8f1e1, #ecdfc2); color: var(--m-ink) !important; clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); transition: transform .4s var(--m-ease), background .3s; }
.m-glhole { position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #0b0908; box-shadow: 0 0 0 1.5px #b8872e; }
.m-glimg { width: 56px; height: 56px; border-radius: 50%; background: #fff; padding: 5px; box-shadow: 0 0 0 2px #b8872e; }
.m-gltag .m-q8tx b { font: 700 13.5px/1.25 var(--m-head); letter-spacing: .02em; color: var(--m-ink); } .m-gltag .m-q8tx small { color: #6e4e12; }
.m-gltag:is(:hover, :focus-visible) { transform: translateY(-4px) rotate(-1deg); background: linear-gradient(#fffaf0, #f3e6c8); }
body.hv-goldlink main section > .wrap > h2::after { content: ""; display: block; width: 140px; height: 9px; margin-top: 12px; background: radial-gradient(circle, #b8872e 0 3px, transparent 3.5px) 50% 50% / 9px 9px no-repeat, linear-gradient(90deg, transparent, #b8872e 30%, #b8872e 70%, transparent) 0 50% / 100% 1.5px no-repeat; }
body.hv-goldlink main h2 { letter-spacing: .01em; }
body.hv-goldlink .pcard:hover, body.hv-goldlink .m-acard:hover { box-shadow: 0 0 0 1.5px #b8872e, 0 18px 40px rgba(140,100,24,.16); }
body.hv-goldlink .m-acard .m-art { background: radial-gradient(60% 60% at 50% 45%, #fff, #f3ead8); }
body.hv-goldlink .m-cta .m-band { border-radius: 22px; background: radial-gradient(50% 120% at 100% 0, rgba(184,135,46,.3), transparent 70%), repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px), linear-gradient(120deg, #0e0c0a, #2a1f12); box-shadow: inset 0 0 0 1px rgba(226,191,104,.4); }
body.hv-goldlink .m-cta .m-band::before { width: 220px; height: 120px; right: -30px; top: -40px; border-radius: 50%; background: none; border: 10px dotted rgba(226,191,104,.18); }
body.hv-goldlink .m-page-hero { background: radial-gradient(60% 120% at 100% 0, rgba(184,135,46,.25), transparent 70%), linear-gradient(120deg, #0e0c0a, #2a1f12); } body.hv-goldlink .m-page-hero .eyebrow { color: #e2bf68; }
body.hv-goldlink .m-page-hero h1 { font-size: clamp(28px, 3.4vw, 48px) !important; line-height: 1.14 !important; }
body.hv-goldlink footer.site { background: #0e0c0a; color: #d9cdb4; border: 0; } body.hv-goldlink footer.site nav a { color: #f3e3bd; }
body.hv-goldlink .m-collage .m-card { border-radius: 18px; box-shadow: 0 0 0 1px rgba(226,191,104,.5), 0 30px 60px rgba(0,0,0,.35); }

/* clasp (Nuragold): polished gold; on hover a lobster clasp at the right end opens and a warm sheen sweeps across */
body.bv-clasp .btn { border-radius: 999px; padding: 15px 50px 15px 26px; letter-spacing: .03em; }
body.bv-clasp .btn .arr { display: none; }
body.bv-clasp :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #f3d98c, #d4a94a 46%, #b8872e 56%, #e2bf68); color: #17130d; border-color: rgba(255,240,200,.65); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 4px rgba(110,78,18,.35), 0 10px 24px rgba(140,100,24,.3); }
body.bv-clasp :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #fae6a6, #e0b65a 46%, #c4922f 56%, #ecc977); color: #17130d; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 4px rgba(110,78,18,.35), 0 16px 32px rgba(140,100,24,.38); }
body.bv-clasp .btn::before { content: ""; position: absolute; right: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; pointer-events: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='20.400' r='2.400'/%3E%3Cpath d='M12 18C7.400 17.600 5.200 13.400 6.200 9.200 7.200 5 11 2.800 14.600 3.800S19 8.600 17.600 11.400'/%3E%3Cpath d='M17.600 11.400 13.200 15.600M6.400 13H3.600'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='20.400' r='2.400'/%3E%3Cpath d='M12 18C7.400 17.600 5.200 13.400 6.200 9.200 7.200 5 11 2.800 14.600 3.800S19 8.600 17.600 11.400'/%3E%3Cpath d='M17.600 11.400 13.200 15.600M6.400 13H3.600'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .45s cubic-bezier(.3,1.5,.5,1); }
body.bv-clasp .btn:is(:hover, :focus-visible)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='20.400' r='2.400'/%3E%3Cpath d='M12 18C7.400 17.600 5.200 13.400 6.200 9.200 7.200 5 11 2.800 14.600 3.800S19 8.600 17.600 11.400'/%3E%3Cpath d='M17.600 11.400 15.800 6.800M6.400 13H2.400'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='20.400' r='2.400'/%3E%3Cpath d='M12 18C7.400 17.600 5.200 13.400 6.200 9.200 7.200 5 11 2.800 14.600 3.800S19 8.600 17.600 11.400'/%3E%3Cpath d='M17.600 11.400 15.800 6.800M6.400 13H2.400'/%3E%3C/svg%3E"); transform: rotate(-16deg) translateY(-1px); }
body.bv-clasp .btn::after { inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 34%, rgba(255,250,230,.8) 47%, rgba(255,230,160,.2) 53%, transparent 62%); transform: translateX(-120%); transition: transform .9s cubic-bezier(.4,0,.2,1); }
body.bv-clasp .btn:is(:hover, :focus-visible)::after { transform: translateX(120%); }
body.bv-clasp :is(.btn.ghost, .m-btn-ghost)::after { background: linear-gradient(105deg, transparent 34%, rgba(226,191,104,.35) 48%, transparent 62%); }
body.bv-clasp .m-cta .btn.m-white { color: #17130d; }

/* oche (TURNART): a pub wall — the real dartboard spins in, three darts fly into the treble 20 and wobble, the LED scoreboard counts up to 180, the oche mat leads to the throw line; locks get their own small strip */
@property --m-ocs { syntax: "<integer>"; inherits: false; initial-value: 180; }
body.hv-oche .m-hero { background: radial-gradient(46% 56% at 74% 40%, rgba(14,107,58,.36), transparent 70%), linear-gradient(160deg, #11211a, #0a120e); color: #fff; }
body.hv-oche .m-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 140px); }
body.hv-oche .m-hero h1 { font-size: clamp(32px, 3.9vw, 56px) !important; line-height: 1.02 !important; letter-spacing: -.01em; }
body.hv-oche .m-hero .eyebrow { color: #f4c64e; } body.hv-oche .m-hero .sub { color: rgba(255,255,255,.86); }
.m-ocv { position: relative; width: min(100%, 600px); aspect-ratio: 600 / 580; justify-self: center; }
.m-ocwall { position: absolute; left: 10%; right: 10%; top: -4%; height: 80%; border-radius: 50%; background: radial-gradient(closest-side, rgba(244,198,78,.17), transparent 75%); }
.m-ocring { position: absolute; left: 50%; top: 1.5%; width: 66%; aspect-ratio: 1; margin-left: -33%; border-radius: 50%; background: radial-gradient(closest-side, #1b1b1b 84%, #0b0b0b 92%, transparent 93%); box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.m-ocbrd { position: absolute; left: 50%; top: 4.5%; width: 58%; margin-left: -29%; z-index: 2; display: block; filter: drop-shadow(0 16px 20px rgba(0,0,0,.55)); animation: m-ocspin 1.1s .05s cubic-bezier(.2,.8,.25,1) backwards; }
.m-ocmat { position: absolute; left: 50%; bottom: 0; width: 40%; margin-left: -20%; z-index: 1; display: block; filter: drop-shadow(0 18px 24px rgba(0,0,0,.5)); animation: m-rise .8s .2s var(--m-ease) backwards; }
.m-ocdart { position: absolute; z-index: 3; width: 22%; height: auto; overflow: visible; margin-top: -2.36%; transform-origin: 0 50%; rotate: var(--a); filter: drop-shadow(0 6px 4px rgba(0,0,0,.45)); animation: m-ocfly .45s calc(1.15s + var(--i) * .42s) cubic-bezier(.25,.7,.35,1) backwards, m-ocwob .8s calc(1.6s + var(--i) * .42s) ease-out; }
.m-ocdart.d1 { left: 48.4%; top: 12.8%; --a: -11deg; } .m-ocdart.d2 { left: 50.2%; top: 11.9%; --a: -3deg; } .m-ocdart.d3 { left: 52%; top: 12.9%; --a: 6deg; }
.m-ocdart .tip { fill: #d3d9de; } .m-ocdart .bar { fill: #2b2f33; } .m-ocdart .knurl { stroke: #9aa4ad; stroke-width: 1.4; } .m-ocdart .sh { fill: #ececec; } .m-ocdart .fl { fill: var(--c); stroke: rgba(0,0,0,.4); stroke-width: 1; }
.m-ocscore { position: absolute; right: 0; top: 2%; z-index: 5; width: 26%; padding: 8px 9px 9px; border-radius: 10px; background: linear-gradient(#1b1d1f, #0b0c0d); border: 2px solid #2e3236; box-shadow: 0 14px 28px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06); text-align: center; animation: m-rise .6s .5s var(--m-ease) backwards; }
.m-ocscore small { display: block; font: 700 9.5px/1 var(--m-body); letter-spacing: .2em; color: #9aa4ad; }
.m-ocscore b { display: block; margin: 6px 0 7px; padding: 5px 0 4px; border-radius: 4px; background: #160607; font: 700 clamp(22px, 3vw, 38px)/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #ff4141; text-shadow: 0 0 10px rgba(255,65,65,.75); letter-spacing: .06em; }
.m-ocscore b i { font-style: normal; counter-reset: m-ocs var(--m-ocs); animation: m-occount 1.2s 2.4s steps(30) backwards; } .m-ocscore b i::after { content: counter(m-ocs); }
.m-ocscore span { display: flex; gap: 4px; } .m-ocscore em { flex: 1; padding: 4px 0; border-radius: 3px; background: #0f1a14; font: 700 10px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-style: normal; color: #3dd68c; opacity: .22; animation: m-ocled .2s 1.6s forwards; }
.m-ocscore em:nth-child(2) { animation-delay: 2.02s; } .m-ocscore em:nth-child(3) { animation-delay: 2.44s; }
.m-octhrow { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.m-ocbar { position: absolute; left: 29%; width: 42%; bottom: 8%; height: 8px; border-radius: 3px; background: linear-gradient(#ee4359, #9e0c24); box-shadow: 0 3px 0 #5b0715, 0 8px 14px rgba(0,0,0,.5); transform-origin: 0 50%; animation: m-ocline .7s 2.8s var(--m-ease) backwards; }
.m-octhrow span { position: absolute; left: 0; bottom: 4%; width: 26%; padding: 8px 10px; border-radius: 8px; background: #f4ebd9; color: #141414; font: 700 10.5px/1.2 var(--m-body); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 10px 20px rgba(0,0,0,.4); animation: m-rise .6s 3s var(--m-ease) backwards; }
.m-octhrow span::after { content: ""; position: absolute; right: -9px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left: 9px solid #f4ebd9; border-right: 0; }
.m-octhrow b { display: block; margin: 3px 0 2px; font: 700 clamp(15px, 1.7vw, 21px)/1 var(--m-head); letter-spacing: 0; text-transform: none; color: #c8102e; }
.m-octhrow small { display: block; font: 600 10.5px/1.2 var(--m-body); letter-spacing: 0; text-transform: none; color: #3f3a33; }
@keyframes m-ocspin { from { rotate: -300deg; scale: .35; } }
@keyframes m-ocfly { from { translate: 160% -120%; opacity: 0; } 40% { opacity: 1; } }
@keyframes m-ocwob { 0% { rotate: calc(var(--a) - 7deg); } 22% { rotate: calc(var(--a) + 5deg); } 45% { rotate: calc(var(--a) - 3deg); } 70% { rotate: calc(var(--a) + 1.5deg); } 100% { rotate: var(--a); } }
@keyframes m-occount { from { --m-ocs: 0; } to { --m-ocs: 180; } }
@keyframes m-ocled { to { opacity: 1; box-shadow: 0 0 8px rgba(61,214,140,.6); } }
@keyframes m-ocline { from { transform: scaleX(0); } }
.m-octile { padding: 18px 30px 14px 16px; border-radius: 10px; background: #121614; border: 1.5px solid rgba(255,255,255,.13); color: #fff !important; overflow: hidden; transition: transform .35s var(--m-ease), border-color .3s; }
.m-octile em { position: absolute; top: 8px; right: 10px; z-index: 1; font: 700 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-style: normal; color: #ff4141; text-shadow: 0 0 8px rgba(255,65,65,.6); }
.m-ocimg { position: relative; z-index: 1; width: 62px; height: 62px; border-radius: 50%; background: #f4ebd9; padding: 6px; box-shadow: 0 0 0 3px #0e6b3a, 0 0 0 5px #f4ebd9, 0 0 0 7px #c8102e; margin: 7px; }
.m-octile .m-q8tx b { color: #fff; font: 700 16px/1.15 var(--m-head); } .m-octile .m-q8tx small { color: #f4c64e; }
.m-ocrings { position: absolute; right: -46px; bottom: -46px; width: 130px; height: 130px; border-radius: 50%; pointer-events: none; background: repeating-radial-gradient(circle, rgba(200,16,46,.26) 0 9px, rgba(14,107,58,.26) 9px 18px); transition: transform .6s var(--m-ease); }
.m-octile:is(:hover, :focus-visible) { transform: translateY(-4px); border-color: #c8102e; } .m-octile:is(:hover, :focus-visible) .m-ocrings { transform: scale(1.35); }
.m-oclocks { position: relative; z-index: 2; padding: 0 clamp(18px, 4vw, 72px) clamp(24px, 3.5vh, 40px); margin-top: -8px; }
.m-oclock { display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 100%; padding: 6px 18px 6px 8px; border: 4px solid transparent; border-radius: 14px; background: linear-gradient(#f4ebd9, #f4ebd9) padding-box, repeating-linear-gradient(-45deg, #f4c64e 0 8px, #141414 8px 16px) border-box; color: #141414 !important; text-decoration: none; animation: m-rise .7s 1.1s var(--m-ease) backwards; transition: transform .35s var(--m-ease); }
.m-oclimg { display: flex; gap: 2px; } .m-oclimg img { width: 46px; height: 46px; object-fit: contain; }
.m-oclock small { font: 700 10.5px/1 var(--m-body) !important; letter-spacing: .14em; text-transform: uppercase; color: #9e0c24; margin: 0 0 4px !important; } .m-oclock .m-q8tx b { font: 700 16px/1.1 var(--m-head); } .m-oclock .m-q8tx em { color: #0e6b3a; }
.m-oclock:is(:hover, :focus-visible) { transform: translateY(-3px); }
body.hv-oche main section > .wrap > h2::after { content: ""; display: block; width: 120px; height: 8px; margin-top: 12px; border-radius: 2px; background: linear-gradient(90deg, #c8102e 0 33%, #141414 33% 38%, #0e6b3a 38% 71%, #141414 71% 76%, #c8102e 76%); }
body.hv-oche .pcard:hover, body.hv-oche .m-acard:hover { box-shadow: 0 0 0 2px var(--m-accent), 0 18px 40px rgba(200,16,46,.14); }
body.hv-oche .m-acard .m-art { background: radial-gradient(circle at 50% 50%, #fff 0 52%, #f4ebd9 53% 60%, #fff 61%); }
body.hv-oche .m-cta .m-band { border-radius: 14px; background: radial-gradient(circle at 100% 0, transparent 0 60px, rgba(255,255,255,.06) 61px 90px, transparent 91px 120px, rgba(255,255,255,.06) 121px 150px, transparent 151px), linear-gradient(120deg, #0f1a14, #0e6b3a 60%, #9e0c24); }
body.hv-oche .m-cta .m-band::before { display: none; }
body.hv-oche .m-page-hero { background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 140px), linear-gradient(120deg, #0f1a14, #0e6b3a); } body.hv-oche .m-page-hero .eyebrow { color: #f4c64e; }
body.hv-oche footer.site { background: #0f1a14; color: #cfd8d2; border: 0; } body.hv-oche footer.site nav a { color: #fff; }
body.hv-oche .m-collage .m-card { border-radius: 12px; }

/* bullseye (TURNART): concentric board rings pulse out from the pointer inside the button */
body.bv-bullseye .btn { border-radius: 8px; letter-spacing: .01em; }
body.bv-bullseye .btn::after { display: none; }
body.bv-bullseye .btn::before { content: ""; position: absolute; left: var(--mx, 50%); top: var(--my, 50%); width: 12px; height: 12px; margin: -6px 0 0 -6px; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff 0 30%, #0e6b3a 32%); box-shadow: 0 0 0 4px rgba(255,255,255,.4), 0 0 0 9px rgba(14,107,58,.5), 0 0 0 14px rgba(255,255,255,.28), 0 0 0 19px rgba(14,107,58,.32); opacity: 0; transform: scale(.2); }
body.bv-bullseye .btn:is(:hover, :focus-visible)::before { animation: m-bull 1.1s ease-out infinite; }
body.bv-bullseye :is(.btn.ghost, .m-btn-ghost)::before { background: radial-gradient(circle, #fff 0 30%, #c8102e 32%); box-shadow: 0 0 0 4px rgba(255,255,255,.35), 0 0 0 9px rgba(200,16,46,.45), 0 0 0 14px rgba(255,255,255,.25), 0 0 0 19px rgba(200,16,46,.3); }
@keyframes m-bull { 0% { transform: scale(.2); opacity: .95; } 100% { transform: scale(5.5); opacity: 0; } }

/* aquarium (Top Fin): a glass tank — bubbles rise from an air stone, plants sway, fish glide, caustic light ripples over real decor on the gravel; supplies on the shelf below; gallon chips */
body.hv-aquarium .m-hero { background: radial-gradient(50% 60% at 78% 40%, #c9eef3, transparent 70%), linear-gradient(180deg, #f3fafb, #e1f3f5); }
body.hv-aquarium .m-hero h1 { font-size: clamp(28px, 3.3vw, 48px) !important; line-height: 1.12 !important; letter-spacing: -.025em; max-width: 19ch; }
.m-aq { position: relative; width: min(100%, 600px); aspect-ratio: 600 / 560; justify-self: center; }
.m-aqtank { position: absolute; left: 1.5%; right: 1.5%; top: 1%; height: 73%; overflow: hidden; border-radius: 14px 14px 8px 8px; background: #0a6f95; box-shadow: 0 0 0 4px rgba(255,255,255,.95), 0 0 0 6px #9ccfd8, 0 30px 50px rgba(6,48,73,.28); animation: m-rise .7s var(--m-ease) backwards; }
.m-aqwater { position: absolute; inset: 0; background: linear-gradient(180deg, #23b2d1 0%, #0d89ae 38%, #075b7e 100%); }
.m-aqcaus { position: absolute; inset: 0; opacity: .5; background: radial-gradient(closest-side, rgba(255,255,255,.55), transparent) 0 0 / 90px 56px, radial-gradient(closest-side, rgba(255,255,255,.4), transparent) 45px 28px / 90px 56px, radial-gradient(closest-side, rgba(255,255,255,.3), transparent) 20px 10px / 130px 80px; mix-blend-mode: soft-light; -webkit-mask: linear-gradient(#000, rgba(0,0,0,.2) 75%); mask: linear-gradient(#000, rgba(0,0,0,.2) 75%); animation: m-aqcaus 12s linear infinite; }
.m-aqsurf { position: absolute; left: 0; top: 0; width: 200%; height: 5%; z-index: 2; fill: #e3f5f8; animation: m-aqsurf 7s linear infinite; }
.m-aqweed { position: absolute; bottom: 9%; z-index: 1; height: 58%; width: 8%; transform-origin: 50% 100%; animation: m-aqsway 5s ease-in-out infinite alternate; }
.m-aqweed path { fill: #2f9e6a; } .m-aqweed.w1 { left: 2%; } .m-aqweed.w2 { left: 8%; height: 46%; animation-duration: 6.2s; animation-delay: -2s; } .m-aqweed.w2 path { fill: #45b97c; } .m-aqweed.w3 { right: 25%; height: 50%; animation-duration: 5.6s; animation-delay: -3.4s; } .m-aqweed.w3 path { fill: #2a8a5d; }
.m-aqfish { position: absolute; z-index: 2; left: 104%; width: 13%; height: auto; overflow: visible; filter: drop-shadow(0 4px 4px rgba(4,40,60,.3)); animation: m-aqswim 16s linear infinite; }
.m-aqfish.f1 { top: 14%; animation-delay: -3s; } .m-aqfish.f2 { top: 30%; width: 10%; animation-duration: 12s; animation-delay: -9s; } .m-aqfish.f3 { top: 44%; width: 8.5%; animation-duration: 19s; animation-delay: -13s; }
.m-aqfish .t { transform-box: fill-box; transform-origin: 0 50%; animation: m-aqtail .45s ease-in-out infinite alternate; }
.m-aqgravel { position: absolute; left: 0; right: 0; bottom: 0; height: 13%; z-index: 2; background: radial-gradient(circle, #e9dcbf 0 3px, transparent 3.5px) 0 0 / 14px 11px, radial-gradient(circle, #b59b74 0 3px, transparent 3.5px) 7px 5px / 14px 11px, radial-gradient(circle, #f6eedc 0 2px, transparent 2.5px) 3px 8px / 11px 9px, linear-gradient(#b19873, #8a7254); -webkit-mask: radial-gradient(12px 8px at 50% 0, transparent 96%, #000) -12px -2px / 24px 100% repeat-x; mask: radial-gradient(12px 8px at 50% 0, transparent 96%, #000) -12px -2px / 24px 100% repeat-x; }
.m-aqreef { position: absolute; left: 5%; bottom: 5%; width: 54%; z-index: 3; display: block; filter: drop-shadow(0 12px 12px rgba(4,40,60,.35)); animation: m-aqsettle 1s .15s var(--m-ease) backwards; }
.m-aqcave { position: absolute; right: 21%; bottom: 6%; width: 25%; z-index: 3; display: block; filter: drop-shadow(0 10px 10px rgba(4,40,60,.35)); animation: m-aqsettle 1s .35s var(--m-ease) backwards; }
.m-aqplant { position: absolute; right: 2%; bottom: 7%; width: 21%; z-index: 3; display: block; transform-origin: 50% 100%; animation: m-aqsettle 1s .5s var(--m-ease) backwards, m-aqsway 6s 1.5s ease-in-out infinite alternate; }
:is(.m-aqreef, .m-aqcave) { transition: transform .45s var(--m-ease); } :is(.m-aqreef, .m-aqcave):hover { transform: translateY(-5px); }
.m-aqstone { position: absolute; left: 60%; bottom: 8%; z-index: 3; width: 6%; height: 3%; border-radius: 8px; background: linear-gradient(#a7b0b7, #6e7880); box-shadow: inset 0 2px 0 rgba(255,255,255,.35); }
.m-aqbub { position: absolute; left: 62.5%; bottom: 10.5%; z-index: 4; width: 0; height: 0; }
.m-aqbub i { position: absolute; bottom: 0; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; border: 1.5px solid rgba(255,255,255,.8); background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.85) 0 18%, rgba(255,255,255,.12) 42%); animation: m-aqrise var(--t) calc(var(--d) * -1) linear infinite; }
.m-aqglass { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; background: linear-gradient(105deg, rgba(255,255,255,.22) 0 5%, transparent 13%, transparent 82%, rgba(255,255,255,.12) 89%, transparent 95%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), inset 0 -10px 20px rgba(0,0,0,.15); }
.m-aqshelf { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; z-index: 3; display: flex; justify-content: space-around; align-items: flex-end; padding: 0 6% 13px; }
.m-aqshelf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-radius: 7px; background: linear-gradient(#fbf6ec, #d8ccb4); box-shadow: 0 10px 20px rgba(6,48,73,.16); }
.m-aqprod { position: relative; z-index: 1; display: block; width: 14%; filter: drop-shadow(0 8px 8px rgba(6,48,73,.2)); animation: m-aqup .7s calc(.7s + var(--i) * .1s) cubic-bezier(.3,1.4,.5,1) backwards; transition: transform .4s var(--m-ease); }
.m-aqprod.p3 { width: 13%; } .m-aqprod.p3 img { border-radius: 8px; } .m-aqprod.p4 { width: 8%; }
.m-aqprod:hover { transform: translateY(-8px) rotate(-3deg); }
@keyframes m-aqcaus { to { background-position: 90px 56px, -45px 84px, 150px 90px; } }
@keyframes m-aqsurf { to { transform: translateX(-50%); } }
@keyframes m-aqsway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes m-aqswim { from { left: 104%; } to { left: -14%; } }
@keyframes m-aqtail { from { transform: scaleY(1); } to { transform: scaleY(.6); } }
@keyframes m-aqrise { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 50% { transform: translate(7px, -170px); } 90% { opacity: .9; } 100% { transform: translate(-4px, -340px); opacity: 0; } }
@keyframes m-aqsettle { from { transform: translateY(-30px); } }
@keyframes m-aqup { from { transform: translateY(30px); opacity: 0; } }
.m-aqgal > span { color: #0a7fa8; }
.m-aqgal a { flex-direction: column; gap: 3px; padding: 8px 13px 7px; border-radius: 16px; background: #fff; border: 1.5px solid #a9dbe2; color: var(--m-ink) !important; }
.m-aqgal b { font: 700 14px/1 var(--m-head); white-space: nowrap; } .m-aqgal small { font: 600 11.5px/1 var(--m-body); white-space: nowrap; color: #3e5866; }
.m-aqgal a:is(:hover, :focus-visible) { border-color: var(--m-accent); box-shadow: 0 8px 18px rgba(201,72,31,.14); }
.m-aqtile { padding: 14px 14px 18px; border-radius: 18px; background: #fff; border: 1.5px solid #cfe9ee; color: var(--m-ink) !important; overflow: hidden; box-shadow: 0 10px 22px rgba(6,48,73,.06); transition: transform .4s cubic-bezier(.3,1.5,.5,1), border-color .3s, box-shadow .3s; }
.m-aqimg { width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d5eff3); padding: 5px; }
.m-aqtile .m-q8tx b { font: 700 14px/1.2 var(--m-head); color: var(--m-ink); } .m-aqtile .m-q8tx small { color: var(--m-accent); }
.m-aqwave { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: linear-gradient(90deg, #0a7fa8, #4fc1c9, #0a7fa8) 0 0 / 200% 100%; transition: height .35s var(--m-ease); }
.m-aqtile:is(:hover, :focus-visible) { transform: translateY(-4px); border-color: #4fc1c9; box-shadow: 0 16px 30px rgba(10,127,168,.16); } .m-aqtile:is(:hover, :focus-visible) .m-aqwave { height: 10px; animation: m-aqflow 1.6s linear infinite; }
@keyframes m-aqflow { to { background-position: -200% 0; } }
body.hv-aquarium main section > .wrap > h2::after { content: ""; display: block; width: 130px; height: 10px; margin-top: 10px; background: radial-gradient(10px 7px at 50% 100%, transparent 92%, #0a7fa8 96% 99%, transparent) 0 0 / 20px 10px repeat-x; }
body.hv-aquarium .pcard:hover, body.hv-aquarium .m-acard:hover { box-shadow: 0 0 0 2px #4fc1c9, 0 18px 40px rgba(10,127,168,.14); }
body.hv-aquarium .m-acard .m-art { background: radial-gradient(60% 60% at 50% 100%, #d5eff3, transparent 70%), linear-gradient(#fff, #f3fafb); }
body.hv-aquarium .m-cta .m-band { border-radius: 28px; background: radial-gradient(circle at 88% 30%, rgba(255,255,255,.18) 0 6px, transparent 7px), radial-gradient(circle at 92% 60%, rgba(255,255,255,.14) 0 10px, transparent 11px), radial-gradient(circle at 84% 80%, rgba(255,255,255,.12) 0 4px, transparent 5px), linear-gradient(160deg, #0a7fa8, #063049); }
body.hv-aquarium .m-cta .m-band::before { width: 240px; height: 240px; right: -70px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.1), transparent 70%); }
body.hv-aquarium .m-page-hero { background: linear-gradient(160deg, #0a7fa8, #063049); } body.hv-aquarium .m-page-hero .eyebrow { color: #bfe9ef; }
body.hv-aquarium .m-page-hero h1 { font-size: clamp(28px, 3.4vw, 48px) !important; line-height: 1.14 !important; }
body.hv-aquarium footer.site { background: #063049; color: #cfe6ec; border: 0; } body.hv-aquarium footer.site nav a { color: #fff; }
body.hv-aquarium .m-collage .m-card { border-radius: 24px; }

/* bubble (Top Fin): air bubbles rise through the button on hover */
body.bv-bubble .btn { border-radius: 999px; }
body.bv-bubble .btn::after { display: none; }
body.bv-bubble .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(circle, rgba(255,255,255,.85) 0 1.5px, rgba(255,255,255,.3) 2.5px, rgba(255,255,255,.55) 3.5px, transparent 4.5px) 10% 130% / 10px 10px no-repeat, radial-gradient(circle, rgba(255,255,255,.85) 0 2px, rgba(255,255,255,.3) 3.5px, rgba(255,255,255,.55) 5px, transparent 6px) 28% 170% / 13px 13px no-repeat, radial-gradient(circle, rgba(255,255,255,.85) 0 1.5px, rgba(255,255,255,.3) 2.5px, rgba(255,255,255,.55) 3.5px, transparent 4.5px) 47% 150% / 10px 10px no-repeat, radial-gradient(circle, rgba(255,255,255,.85) 0 2.5px, rgba(255,255,255,.3) 4px, rgba(255,255,255,.55) 6px, transparent 7px) 66% 190% / 15px 15px no-repeat, radial-gradient(circle, rgba(255,255,255,.85) 0 1.5px, rgba(255,255,255,.3) 2.5px, rgba(255,255,255,.55) 3.5px, transparent 4.5px) 82% 140% / 10px 10px no-repeat, radial-gradient(circle, rgba(255,255,255,.85) 0 1px, rgba(255,255,255,.55) 2.5px, transparent 3.5px) 93% 200% / 8px 8px no-repeat; }
body.bv-bubble .btn:is(:hover, :focus-visible)::before { opacity: 1; animation: m-bubrise 1.7s linear infinite; }
body.bv-bubble :is(.btn.ghost, .m-btn-ghost):is(:hover, :focus-visible)::before { opacity: .8; }
@keyframes m-bubrise { from { background-position: 10% 130%, 28% 170%, 47% 150%, 66% 190%, 82% 140%, 93% 200%; } to { background-position: 14% -60%, 24% -20%, 50% -50%, 62% 0%, 85% -40%, 90% -10%; } }

/* tidy (VERONLY): a top-down open case on a quilted mat — dividers slide into a 4×3 grid, glass and mug outlines drop into the compartments one by one, the quilted lid closes and lifts again; real cases unfold and stack; capacity chips */
body.hv-tidy .m-hero { background: radial-gradient(46% 56% at 76% 44%, #fffdf9, transparent 70%), #f3ece1; }
body.hv-tidy .m-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(45deg, transparent 0 27px, rgba(79,109,122,.07) 27px 28px), repeating-linear-gradient(-45deg, transparent 0 27px, rgba(79,109,122,.07) 27px 28px); }
body.hv-tidy .m-hero h1 { font-size: clamp(30px, 3.6vw, 52px) !important; line-height: 1.06 !important; letter-spacing: -.03em; }
.m-td { position: relative; width: min(100%, 600px); aspect-ratio: 600 / 540; justify-self: center; }
.m-tdquilt { position: absolute; left: 0; top: 1%; width: 60%; height: 56%; border-radius: 24px; background: repeating-linear-gradient(45deg, transparent 0 17px, rgba(255,255,255,.55) 17px 18.5px), repeating-linear-gradient(-45deg, transparent 0 17px, rgba(255,255,255,.55) 17px 18.5px), #e3d6c1; outline: 2px dashed rgba(79,109,122,.32); outline-offset: -9px; box-shadow: 0 16px 34px rgba(31,43,51,.08); animation: m-rise .6s var(--m-ease) backwards; }
.m-tdbox { position: absolute; left: 4%; top: 5.5%; width: 52%; z-index: 3; perspective: 900px; }
.m-tdsvg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 16px 20px rgba(31,43,51,.22)); }
.m-tdwall { fill: #4f6d7a; } .m-tdfloor { fill: #edf1f3; stroke: #3d5663; stroke-width: 1.5; }
.m-tddiv path { fill: none; stroke: #c3cfd6; stroke-width: 5; stroke-linecap: round; animation: m-tdslidev .6s calc(.45s + var(--i) * .12s) var(--m-ease) backwards; }
.m-tddiv.h path { animation-name: m-tdslideh; }
.m-tdit circle, .m-tdit path { fill: none; stroke: #4f6d7a; stroke-width: 2.4; stroke-linecap: round; } .m-tdit circle.in { stroke: #9db4c0; stroke-width: 1.6; } .m-tdit circle.st { fill: #4f6d7a; stroke: none; }
.m-tdit { transform-box: fill-box; transform-origin: center; animation: m-tddrop .45s calc(1.3s + var(--i) * .16s) cubic-bezier(.3,1.5,.5,1) backwards; }
.m-tdlid { position: absolute; left: 2.14%; top: 2.73%; width: 95.72%; height: 94.54%; border-radius: 12px; transform-origin: 50% 0; transform: rotateX(100deg); background: repeating-linear-gradient(45deg, transparent 0 13px, rgba(255,255,255,.16) 13px 14px), repeating-linear-gradient(-45deg, transparent 0 13px, rgba(255,255,255,.16) 13px 14px), linear-gradient(160deg, #5f7f8c, #3d5663); box-shadow: inset 0 0 0 3px rgba(255,255,255,.2), 0 14px 24px rgba(31,43,51,.3); animation: m-tdlid 9s 3.9s ease-in-out infinite; }
.m-tdlid { transform-style: preserve-3d; } .m-tdlabel, .m-tdzip { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.m-tdzip { position: absolute; inset: 7px; border: 2px dashed rgba(255,255,255,.45); border-radius: 8px; }
.m-tdlabel { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; align-items: baseline; gap: 5px; padding: 6px 12px; border: 3px solid #1f2b33; border-radius: 4px; background: #fff; color: #1f2b33; font: 600 12px/1 var(--m-body); white-space: nowrap; }
.m-tdlabel b { font: 700 20px/1 var(--m-head); }
.m-tdph { position: absolute; display: block; filter: drop-shadow(0 16px 18px rgba(31,43,51,.2)); transform-origin: 50% 100%; animation: m-tdunfold .8s calc(.25s + var(--i, 0) * .16s) cubic-bezier(.3,1.3,.5,1) backwards; transition: transform .45s var(--m-ease); }
.m-tdph.c1 { right: 0; top: 0; width: 46%; z-index: 2; } .m-tdph.c2 { left: 1%; bottom: 0; width: 40%; z-index: 4; --i: 1; } .m-tdph.c3 { left: 43%; bottom: 4%; width: 10%; z-index: 3; --i: 2; } .m-tdph.c4 { right: 0; bottom: 0; width: 40%; z-index: 4; --i: 3; }
.m-tdph:hover { transform: translateY(-6px); }
@keyframes m-tdslidev { from { transform: translateY(-230px); opacity: 0; } }
@keyframes m-tdslideh { from { transform: translateX(-290px); opacity: 0; } }
@keyframes m-tddrop { from { transform: scale(1.8); opacity: 0; } }
@keyframes m-tdlid { 0%, 30% { transform: rotateX(100deg); } 42%, 78% { transform: rotateX(0deg); } 90%, 100% { transform: rotateX(100deg); } }
@keyframes m-tdunfold { from { transform: scaleY(.06) translateY(-30px); } 70% { transform: scaleY(1.04); } }
.m-tdholds > span { color: #3d5663; }
.m-tdholds a { align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border-radius: 10px; background: #fff; border: 1.5px solid #d8cdbb; color: var(--m-ink) !important; }
.m-tdholds b { display: grid; place-items: center; min-width: 32px; height: 28px; padding: 0 6px; border-radius: 6px; background: #4f6d7a; color: #fff; font: 700 14px/1 var(--m-head); }
.m-tdholds small { font: 600 12.5px/1 var(--m-body); white-space: nowrap; }
.m-tdholds a:is(:hover, :focus-visible) { border-color: #4f6d7a; box-shadow: 0 8px 18px rgba(31,43,51,.12); }
.m-tdtile { padding: 12px 14px; border-radius: 14px; background: #fff; border: 1.5px solid #e2d8c8; color: var(--m-ink) !important; box-shadow: 0 10px 22px rgba(31,43,51,.05); transition: transform .4s var(--m-ease), border-color .3s, box-shadow .3s; }
.m-tdwin { flex: none; padding: 4px; border-radius: 6px; background: #1f2b33; } .m-tdimg { width: 56px; height: 46px; border-radius: 3px; background: #fff; padding: 3px; }
.m-tdtile .m-q8tx b { font: 700 14px/1.2 var(--m-head); color: var(--m-ink); } .m-tdtile .m-q8tx small { color: var(--m-accent); }
.m-tdtile:is(:hover, :focus-visible) { transform: translateY(-4px); border-color: #4f6d7a; box-shadow: 0 16px 30px rgba(31,43,51,.12); }
body.hv-tidy main section > .wrap > h2::after { content: ""; display: block; width: 120px; height: 8px; margin-top: 12px; border-radius: 4px; background: repeating-linear-gradient(90deg, #4f6d7a 0 3px, transparent 3px 6px) 0 50% / 100% 4px no-repeat, linear-gradient(90deg, #d2b48c, #d2b48c) 0 50% / 100% 8px no-repeat; }
body.hv-tidy .pcard:hover, body.hv-tidy .m-acard:hover { box-shadow: 0 0 0 2px var(--m-accent), 0 18px 40px rgba(31,43,51,.12); }
body.hv-tidy .m-acard .m-art { background: repeating-linear-gradient(45deg, transparent 0 17px, rgba(79,109,122,.06) 17px 18px), repeating-linear-gradient(-45deg, transparent 0 17px, rgba(79,109,122,.06) 17px 18px), #faf6ef; }
body.hv-tidy .m-cta .m-band { border-radius: 20px; background: repeating-linear-gradient(45deg, transparent 0 22px, rgba(255,255,255,.07) 22px 23px), repeating-linear-gradient(-45deg, transparent 0 22px, rgba(255,255,255,.07) 22px 23px), linear-gradient(120deg, #1f2b33, #4f6d7a); }
body.hv-tidy .m-cta .m-band::before { width: 180px; height: 120px; right: 40px; top: -30px; border-radius: 10px; background: none; border: 3px dashed rgba(255,255,255,.18); }
body.hv-tidy .m-page-hero { background: repeating-linear-gradient(45deg, transparent 0 22px, rgba(255,255,255,.06) 22px 23px), repeating-linear-gradient(-45deg, transparent 0 22px, rgba(255,255,255,.06) 22px 23px), linear-gradient(120deg, #1f2b33, #4f6d7a); } body.hv-tidy .m-page-hero .eyebrow { color: #e8d9bf; }
body.hv-tidy footer.site { background: #1f2b33; color: #d8dfe3; border: 0; } body.hv-tidy footer.site nav a { color: #fff; }
body.hv-tidy .m-collage .m-card { border-radius: 16px; }

/* zip (VERONLY): a zipper pull slides along the bottom edge and the fill follows it across the button */
body.bv-zip .btn { border-radius: 12px; padding: 15px 26px 18px; }
body.bv-zip :is(.btn.accent, .pcard .btn, .m-btn-main) { background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 3px, transparent 3px 6px) 0 calc(100% - 5px) / 100% 3px no-repeat, var(--m-accent); }
body.bv-zip :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 3px, transparent 3px 6px) 0 calc(100% - 5px) / 100% 3px no-repeat, var(--m-accent); }
body.bv-zip .btn::after { inset: 0; z-index: -1; background: var(--m-accent-2); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.6,0,.2,1); }
body.bv-zip .btn:is(:hover, :focus-visible)::after { transform: scaleX(1); }
body.bv-zip :is(.btn.ghost, .m-btn-ghost)::after { background: var(--m-ink); }
body.bv-zip .btn::before { content: ""; position: absolute; left: 8px; bottom: 1px; z-index: 1; width: 10px; height: 15px; border-radius: 3px 3px 5px 5px; pointer-events: none; background: radial-gradient(circle at 50% 68%, #3d5663 0 1.6px, transparent 2px), linear-gradient(#f4f6f7, #a9b5bc); box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: left .6s cubic-bezier(.6,0,.2,1); }
body.bv-zip .btn:is(:hover, :focus-visible)::before { left: calc(100% - 18px); }
body.bv-zip .m-cta .btn.m-white::after { background: #e8dcc8; } body.bv-zip .m-cta .btn.m-white:hover { color: var(--m-ink); }

@media (min-width: 901px) and (max-width: 1100px) { body.hv-goldlink header.site nav a { padding: 8px 5px; font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) { .m-ocscore em { opacity: 1 !important; } .m-aqbub i { opacity: 0 !important; } .m-aqfish.f1 { left: 30%; } .m-aqfish.f2 { left: 66%; } .m-aqfish.f3 { left: 14%; } .m-tdlid { transform: rotateX(100deg) !important; } .m-glglint { opacity: 0 !important; } }
/* phones: batch 12.11 heroes stack */
@media (max-width: 900px) {
  :is(body.hv-goldlink, body.hv-oche, body.hv-aquarium, body.hv-tidy) .m-hero { min-height: 0; } :is(body.hv-goldlink, body.hv-oche, body.hv-aquarium, body.hv-tidy) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr); }
  .m-glcats, .m-aqcats, .m-tdcats, .m-occats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-glcats, .m-aqcats, .m-tdcats, .m-occats) > a:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .m-ocscore { padding: 6px 6px 7px; } .m-ocscore small { font-size: 8px; letter-spacing: .12em; } .m-ocscore em { font-size: 8px; } .m-octhrow span { padding: 6px 7px; font-size: 8.5px; } .m-octhrow small { font-size: 9px; } .m-glgauge { width: 56%; padding: 6px 7px 5px; } .m-glslots b { font-size: 9.5px; } .m-glslots i { height: 12px; } .m-tdlabel { padding: 4px 8px; font-size: 10px; } .m-tdlabel b { font-size: 15px; } .m-aqshelf { padding-bottom: 11px; } }
@media (max-width: 420px) {
  .m-gltag, .m-octile, .m-aqtile, .m-tdtile { gap: 9px; padding: 10px; } .m-gltag { padding-left: 24px; } .m-octile { padding-right: 28px; } .m-glimg, .m-aqimg { width: 44px; height: 44px; } .m-ocimg { width: 46px; height: 46px; margin: 6px; } .m-tdimg { width: 44px; height: 38px; }
  .m-q8tx b, .m-octile .m-q8tx b { font-size: 13px; } .m-oclock { padding-right: 12px; } .m-oclimg img { width: 38px; height: 38px; }
}

/* ===== batch 12.11.2026 (2): showcase/latch (TJ.MOREE), craftbox/sticker (Klutz), whetstone/whet (Hammer Stahl), kennelplan/snap (Cove Products) ===== */
:is(body.hv-showcase, body.hv-craftbox, body.hv-whetstone, body.hv-kennelplan) .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); }
:is(body.hv-showcase, body.hv-craftbox, body.hv-whetstone, body.hv-kennelplan) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:is(body.hv-showcase, body.hv-craftbox, body.hv-whetstone, body.hv-kennelplan) .m-hero .m-copy > * { animation: m-rise .8s var(--m-ease) both; }
:is(body.hv-showcase, body.hv-craftbox, body.hv-whetstone, body.hv-kennelplan) .m-hero .m-copy > :nth-child(3) { animation-delay: .08s; } :is(body.hv-showcase, body.hv-craftbox, body.hv-whetstone, body.hv-kennelplan) .m-hero .m-copy > :nth-child(4) { animation-delay: .16s; } :is(body.hv-showcase, body.hv-craftbox, body.hv-whetstone, body.hv-kennelplan) .m-hero .m-copy > :nth-child(n+5) { animation-delay: .24s; }
:is(body.hv-showcase, body.hv-craftbox, body.hv-whetstone, body.hv-kennelplan) .m-hero h1 { text-wrap: balance; max-width: 18ch; }
:is(body.hv-showcase, body.hv-craftbox, body.hv-whetstone, body.hv-kennelplan) .m-hero .bgcredit { display: none; }
:is(body.hv-showcase, body.hv-craftbox, body.hv-kennelplan) .m-hero { color: var(--m-ink); }
:is(body.hv-showcase, body.hv-craftbox, body.hv-kennelplan) .m-hero h1 { color: var(--m-ink) !important; }
:is(body.hv-showcase, body.hv-craftbox, body.hv-kennelplan) .m-hero .sub { color: var(--m-body-ink); } :is(body.hv-showcase, body.hv-craftbox, body.hv-kennelplan) .m-hero .eyebrow { color: var(--m-accent-2); }
:is(body.hv-showcase, body.hv-craftbox, body.hv-kennelplan) .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: var(--m-ink) !important; background: rgba(255,255,255,.7) !important; }
:is(body.hv-showcase, body.hv-craftbox, body.hv-kennelplan) .m-hero .m-btn-ghost:hover { background: var(--m-ink) !important; color: #fff !important; }
:is(body.hv-showcase, body.hv-craftbox, body.hv-kennelplan) .m-hero .m-chips span { background: #fff; color: var(--m-ink); border: 1.5px solid color-mix(in srgb, var(--m-ink) 14%, transparent); backdrop-filter: none; }
:is(.m-shw, .m-cx, .m-ws, .m-kp) { position: relative; width: min(100%, 600px); justify-self: center; }
:is(.m-shw, .m-cx, .m-ws, .m-kp) a { -webkit-tap-highlight-color: transparent; }
:is(.m-shw, .m-cx, .m-ws, .m-kp) img { display: block; width: 100%; height: auto; border-radius: 0; }
:is(.m-shwcats, .m-cxcats, .m-wscats, .m-kpcats) { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; padding: 10px clamp(18px, 4vw, 72px) clamp(26px, 4vh, 44px); }
:is(.m-shwtile, .m-cxtile, .m-wstile, .m-kptile2) { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; animation: m-rise .7s calc(.8s + var(--i, 0) * .08s) var(--m-ease) backwards; }
:is(.m-shwimg, .m-cximg, .m-wsimg, .m-kpimg) { flex: none; display: block; overflow: hidden; } :is(.m-shwimg, .m-cximg, .m-wsimg, .m-kpimg) img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; transition: transform .45s var(--m-ease); }
:is(.m-shwtile, .m-cxtile, .m-wstile, .m-kptile2):hover :is(.m-shwimg, .m-cximg, .m-wsimg, .m-kpimg) img { transform: scale(1.08) rotate(-4deg); }
:is(.m-shwtile, .m-cxtile, .m-wstile, .m-kptile2):focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; }
:is(.m-shwholds, .m-cxages, .m-wsblades, .m-kpsizes) { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -6px 0 22px; }
:is(.m-shwholds, .m-cxages, .m-wsblades, .m-kpsizes) > span { flex-basis: 100%; margin: 0 0 2px; font: 700 12px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; }
:is(.m-shwholds, .m-cxages, .m-wsblades, .m-kpsizes) a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: background .25s, border-color .25s, transform .3s var(--m-ease), box-shadow .3s; animation: m-rise .6s calc(.45s + var(--i, 0) * .06s) var(--m-ease) backwards; }
:is(.m-shwholds, .m-cxages, .m-wsblades, .m-kpsizes) a:is(:hover, :focus-visible) { transform: translateY(-2px); }
:is(.m-shwholds, .m-cxages, .m-wsblades, .m-kpsizes) small { font: 600 12.5px/1 var(--m-body); white-space: nowrap; }

/* showcase (TJ.MOREE): a warm walnut wall — the ring case's acrylic door swings open under an LED glow, more cases hang gallery-style on brass nails along a dashed "center at 57–60 in" line next to a tape rule */
body.hv-showcase .m-hero { background: radial-gradient(46% 60% at 80% 40%, #fffaf0, transparent 70%), #f3e9d8; }
body.hv-showcase .m-hero h1 { font-size: clamp(30px, 3.5vw, 50px) !important; line-height: 1.1 !important; letter-spacing: -.01em; }
.m-shw { aspect-ratio: 600 / 500; }
.m-shwwall { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; background: repeating-linear-gradient(90deg, transparent 0 148px, rgba(0,0,0,.3) 148px 150px), repeating-linear-gradient(88deg, rgba(255,215,160,.05) 0 2px, transparent 2px 9px, rgba(0,0,0,.06) 9px 10px, transparent 10px 17px), radial-gradient(55% 50% at 50% 40%, #8d5d36, transparent 75%), linear-gradient(180deg, #6e4628, #472c18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -50px 70px rgba(0,0,0,.28), 0 30px 60px rgba(43,36,32,.25); }
.m-shwwall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9%; background: linear-gradient(#f4ead8, #d8c4a2); box-shadow: 0 -3px 0 rgba(0,0,0,.25), 0 -1px 0 #fff8ea inset; }
.m-shwrule { position: absolute; left: 1.4%; top: 5%; bottom: 13%; z-index: 1; width: 16px; display: flex; flex-direction: column; justify-content: space-between; padding: 4px 0; border-radius: 3px; background: linear-gradient(90deg, #f1d36f, #e3bd4b); box-shadow: 0 4px 10px rgba(0,0,0,.35); transform-origin: 50% 0; animation: m-shwrule .9s .2s var(--m-ease) backwards; }
.m-shwrule i { display: block; width: 5px; height: 1.5px; background: #3a2a10; } .m-shwrule i.l { width: 10px; }
.m-shwguide { position: absolute; left: 4.5%; right: 2%; top: 41%; z-index: 6; height: 0; border-top: 2px dashed rgba(255,236,196,.8); transform-origin: 0 50%; animation: m-shwguide 1s .6s var(--m-ease) backwards; pointer-events: none; }
.m-shwguide span { position: absolute; right: 2%; top: 0; translate: 0 -50%; padding: 5px 10px; border-radius: 999px; background: #c19a4b; color: #1e150c; font: 700 11px/1 var(--m-body); letter-spacing: .05em; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,.3); }
.m-shwhang { position: absolute; z-index: 3; display: block; transform-origin: 50% -14px; animation: m-shwhang .9s calc(.35s + var(--i, 0) * .12s) cubic-bezier(.3,1.4,.5,1) backwards; }
.m-shwhang.h1 { left: 6%; top: 7%; width: 20%; } .m-shwhang.h2 { left: 5.5%; top: 47%; width: 21%; --i: 1; } .m-shwhang.h3 { right: 6%; top: 6%; width: 20%; --i: 2; } .m-shwhang.h4 { right: 6.5%; top: 47%; width: 20%; --i: 3; }
.m-shwhang::before { content: ""; position: absolute; left: 20%; right: 20%; top: -12px; height: 15px; background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(25,16,8,.75) 50%, transparent calc(50% + 1px)) 0 0 / 50% 100% no-repeat, linear-gradient(to top left, transparent calc(50% - 1px), rgba(25,16,8,.75) 50%, transparent calc(50% + 1px)) 100% 0 / 50% 100% no-repeat; }
.m-shwnail { position: absolute; left: 50%; top: -17px; z-index: 2; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3c4, #c19a4b 55%, #7a5a1f); box-shadow: 0 2px 3px rgba(0,0,0,.5); }
.m-shwph { display: block; filter: drop-shadow(0 14px 12px rgba(0,0,0,.45)); transition: transform .45s var(--m-ease); }
.m-shwph:hover { transform: translateY(-4px); }
.m-shwmain { position: absolute; left: 30%; top: 12%; width: 40%; z-index: 4; perspective: 900px; animation: m-shwhang 1s .15s cubic-bezier(.3,1.3,.5,1) backwards; transform-origin: 50% 0; }
.m-shwmain::before { content: ""; position: absolute; inset: -18% -30%; z-index: -1; background: radial-gradient(50% 50% at 50% 45%, rgba(255,214,140,.45), transparent 70%); animation: m-shwled 4s ease-in-out infinite alternate; }
.m-shwring { display: block; filter: drop-shadow(0 20px 18px rgba(0,0,0,.5)); }
.m-shwled { position: absolute; left: 8%; right: 22%; top: 3%; height: 55%; z-index: 2; pointer-events: none; background: radial-gradient(70% 45% at 50% 0, rgba(255,232,170,.6), transparent 72%); mix-blend-mode: screen; animation: m-shwled 4s ease-in-out infinite alternate; }
.m-shwdoor { position: absolute; left: 4%; top: 2.5%; width: 80%; height: 94%; z-index: 3; border: 3px solid rgba(20,14,10,.9); border-radius: 3px; background: linear-gradient(115deg, rgba(255,255,255,.3), rgba(255,255,255,.04) 38%, rgba(255,255,255,.14) 56%, rgba(255,255,255,.02) 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); transform-origin: 0 50%; animation: m-shwdoor 9s 1.6s ease-in-out infinite; }
.m-shwdoor b { position: absolute; right: -7px; top: 44%; width: 9px; height: 22px; border-radius: 2px; background: linear-gradient(90deg, #f3d98c, #c19a4b 60%, #8a6a2a); box-shadow: 0 2px 4px rgba(0,0,0,.4); }
@keyframes m-shwrule { from { transform: scaleY(0); } }
@keyframes m-shwguide { from { transform: scaleX(0); opacity: 0; } }
@keyframes m-shwhang { from { transform: rotate(-7deg) translateY(-18px); opacity: 0; } 60% { transform: rotate(2.5deg); } }
@keyframes m-shwled { from { opacity: .55; } to { opacity: 1; } }
@keyframes m-shwdoor { 0%, 18% { transform: rotateY(0deg); } 32%, 66% { transform: rotateY(-68deg); } 80%, 100% { transform: rotateY(0deg); } }
.m-shwholds > span { color: #5c3d22; }
.m-shwholds a { padding: 4px 12px 4px 4px; border-radius: 999px; background: #fff; border: 1.5px solid #dcc9a8; color: var(--m-ink) !important; }
.m-shwholds b { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 5px; border-radius: 999px; background: radial-gradient(circle at 35% 30%, #f6e2a4, #c19a4b 60%, #94712c); color: #1e150c; font: 700 13px/1 var(--m-head); box-shadow: inset 0 0 0 1.5px rgba(80,55,15,.45); }
.m-shwholds a:is(:hover, :focus-visible) { border-color: #7a5230; box-shadow: 0 8px 18px rgba(74,46,25,.14); }
.m-shwtile { padding: 11px 26px 11px 12px; border-radius: 6px; background: linear-gradient(180deg, #f4dc96, #d2ab5a 52%, #b48b3c); color: #1e150c !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 3px rgba(80,55,15,.35), 0 10px 20px rgba(74,46,25,.18); transition: transform .4s var(--m-ease), box-shadow .3s; }
.m-shwtile::before, .m-shwtile::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6d6, #8a6a2a 70%); box-shadow: 0 1px 1px rgba(0,0,0,.35); }
.m-shwtile::before { display: none; } .m-shwtile::after { right: 10px; }
.m-shwimg { width: 56px; height: 56px; padding: 4px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 4px #4a2e19; margin: 4px; }
.m-shwtile .m-q8tx b { font: 700 14px/1.2 var(--m-head); color: #1e150c; } .m-shwtile .m-q8tx small { color: #4a2e19; }
.m-shwtile:is(:hover, :focus-visible) { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 3px rgba(80,55,15,.35), 0 16px 30px rgba(74,46,25,.26); }
body.hv-showcase main section > .wrap > h2::after { content: ""; display: block; width: 130px; height: 10px; margin-top: 12px; border-top: 2px dashed #7a5230; background: radial-gradient(circle, #c19a4b 0 3.5px, transparent 4px) 50% 100% / 10px 8px no-repeat; }
body.hv-showcase .pcard:hover, body.hv-showcase .m-acard:hover { box-shadow: 0 0 0 2px #c19a4b, 0 18px 40px rgba(74,46,25,.14); }
body.hv-showcase .m-acard .m-art { background: radial-gradient(60% 60% at 50% 45%, #fffaf0, #efe4d2); }
body.hv-showcase .m-cta .m-band { border-radius: 18px; background: repeating-linear-gradient(90deg, transparent 0 148px, rgba(0,0,0,.22) 148px 150px), repeating-linear-gradient(88deg, rgba(255,215,160,.05) 0 2px, transparent 2px 9px), linear-gradient(120deg, #472c18, #7a5230); box-shadow: inset 0 0 0 1px rgba(193,154,75,.5); }
body.hv-showcase .m-cta .m-band::before { width: 160px; height: 120px; right: 40px; top: -40px; border-radius: 4px; background: none; border: 3px solid rgba(193,154,75,.35); }
body.hv-showcase .m-page-hero { background: repeating-linear-gradient(90deg, transparent 0 148px, rgba(0,0,0,.22) 148px 150px), linear-gradient(120deg, #3a2414, #7a5230); } body.hv-showcase .m-page-hero .eyebrow { color: #f1d36f; }
body.hv-showcase footer.site { background: #2b2420; color: #e5d9c6; border: 0; } body.hv-showcase footer.site nav a { color: #f4dc96; }
body.hv-showcase .m-collage .m-card { border-radius: 8px; box-shadow: 0 0 0 5px #4a2e19, 0 30px 60px rgba(0,0,0,.3); }

/* latch (TJ.MOREE): walnut with a brass hasp at the right end that flips open on hover */
body.bv-latch .btn { border-radius: 8px; padding: 15px 48px 15px 24px; }
body.bv-latch .btn .arr { display: none; }
body.bv-latch :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #8c5e37, #7a5230 50%, #6a4528); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px rgba(74,46,25,.3); }
body.bv-latch :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #74492a, #5c3d22 50%, #4f331c); color: #fff; }
body.bv-latch .btn::after { inset: auto; right: 13px; top: 50%; z-index: 1; width: 8px; height: 14px; margin-top: -7px; border-radius: 3px; background: linear-gradient(#f3d98c, #c19a4b 55%, #8a6a2a); box-shadow: inset 0 0 0 1px rgba(60,40,10,.45); transform: none; transition: none; }
body.bv-latch .btn::before { content: ""; position: absolute; right: 17px; top: 50%; z-index: 2; width: 18px; height: 7px; margin-top: -3.5px; border-radius: 4px 2px 2px 4px; pointer-events: none; background: linear-gradient(#f7e2a0, #c9a24f 60%, #8a6a2a); box-shadow: 0 1px 2px rgba(0,0,0,.35); transform-origin: 100% 50%; transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
body.bv-latch .btn:is(:hover, :focus-visible)::before { transform: rotate(-80deg); }
body.bv-latch .btn:hover::after { transform: none; }
body.bv-latch .m-cta .btn.m-white:hover { color: var(--m-ink); }

/* craftbox (Klutz): a kit box on a sunny table — the lid lifts, pom-poms bounce out, clay charms pop up, a paper airplane loops across, a sticker peels at a cover corner; real kit covers fanned like books */
body.hv-craftbox .m-hero { background: radial-gradient(circle at 12px 12px, rgba(212,42,32,.10) 0 2.5px, transparent 3px) 0 0 / 46px 46px, radial-gradient(circle at 35px 30px, rgba(42,143,214,.12) 0 2.5px, transparent 3px) 0 0 / 46px 46px, radial-gradient(50% 60% at 80% 35%, #fff6d8, transparent 70%), #fffaf0; }
body.hv-craftbox .m-hero h1 { font-size: clamp(30px, 3.6vw, 52px) !important; line-height: 1.08 !important; letter-spacing: 0; }
body.hv-craftbox .m-hero .eyebrow { color: #b3201a; }
.m-cx { aspect-ratio: 600 / 560; container-type: inline-size; }
.m-cxsun { position: absolute; right: 2%; top: 0; width: 48%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffd650 0 36%, transparent 37%), repeating-conic-gradient(rgba(255,199,44,.5) 0 10deg, transparent 10deg 20deg); -webkit-mask: radial-gradient(circle, #000 50%, transparent 71%); mask: radial-gradient(circle, #000 50%, transparent 71%); animation: m-cxspin 40s linear infinite; }
.m-cxtable { position: absolute; left: 0; right: 0; bottom: 0; height: 15%; border-radius: 18px; background: repeating-linear-gradient(90deg, #3fa9f5 0 30px, #6cc0fa 30px 60px); box-shadow: inset 0 6px 0 rgba(255,255,255,.35), 0 16px 30px rgba(29,42,74,.15); }
.m-cxfan { position: absolute; left: 0; top: 0; width: 56%; height: 45%; z-index: 2; }
.m-cxcov { position: absolute; left: 32%; bottom: 0; width: 35%; display: block; transform-origin: 50% 135%; filter: drop-shadow(0 12px 14px rgba(29,42,74,.25)); animation: m-cxfan .9s calc(.3s + var(--i, 0) * .1s) cubic-bezier(.3,1.3,.5,1) backwards; transition: translate .4s var(--m-ease); }
.m-cxcov.k1 { rotate: -32deg; } .m-cxcov.k2 { rotate: -11deg; } .m-cxcov.k3 { rotate: 10deg; } .m-cxcov.k4 { rotate: 31deg; }
.m-cxcov:hover { translate: 0 -12px; }
.m-cxlead { position: absolute; right: 3%; top: 7%; width: 38%; z-index: 3; rotate: 4deg; animation: m-cxdrop 1s .1s cubic-bezier(.3,1.3,.5,1) backwards; }
.m-cxcafe { display: block; filter: drop-shadow(0 22px 22px rgba(29,42,74,.3)); }
.m-cxstk { position: absolute; left: -16%; bottom: 8%; z-index: 2; display: grid; place-items: center; width: 42%; aspect-ratio: 1; border-radius: 20px; background: #ffc72c; border: 4px solid #fff; box-shadow: 0 8px 16px rgba(29,42,74,.22); rotate: -12deg; clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 0 100%); animation: m-cxpeel 6s 2s ease-in-out infinite; }
.m-cxstk b { font: 700 clamp(12px, 1.4vw, 16px)/1.05 var(--m-head); color: #1d2a4a; text-align: center; }
.m-cxstk::after { content: ""; position: absolute; top: -4px; right: -4px; width: 0; height: 0; background: linear-gradient(to bottom left, transparent 50%, #efe9da 50%, #fff); box-shadow: -2px 2px 4px rgba(0,0,0,.15); animation: m-cxflap 6s 2s ease-in-out infinite; }
.m-cxbox { position: absolute; left: 9%; bottom: 7%; width: 40%; height: 27%; z-index: 4; }
.m-cxbase { position: absolute; left: 0; right: 0; top: 22%; bottom: 0; z-index: 2; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(#d42a20 0 58%, #ffc72c 58% 74%, #d42a20 74%); box-shadow: inset 0 -8px 0 rgba(0,0,0,.12), 0 14px 26px rgba(29,42,74,.25); }
.m-cxbase b { font: 700 clamp(13px, 1.6vw, 19px)/1 var(--m-head); color: #fff; translate: 0 -40%; letter-spacing: .02em; }
.m-cxlid { position: absolute; left: -3%; right: -3%; top: 8%; height: 22%; z-index: 3; border-radius: 9px; background: linear-gradient(#e2463b, #b3201a); box-shadow: inset 0 3px 0 rgba(255,255,255,.25), 0 6px 10px rgba(0,0,0,.18); transform-origin: 50% 50%; transform: translate(60%, -60%) rotate(26deg); animation: m-cxlid 7s -3.1s ease-in-out infinite; }
.m-cxpop { position: absolute; left: 40%; top: 30%; z-index: 1; width: 0; height: 0; }
.m-cxpom { position: absolute; left: var(--x); top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.6) 0 12%, transparent 40%), var(--c); outline: 3px dotted color-mix(in srgb, var(--c) 60%, #fff); outline-offset: -2px; box-shadow: inset 0 -4px 6px rgba(0,0,0,.18); transform: translateY(calc(-13.3cqw - var(--i) * 1.5cqw)); animation: m-cxbounce 7s calc(-3.1s + var(--i) * .07s) ease-in-out infinite; }
.m-cxch { position: absolute; width: 5.7cqw; height: 5.7cqw; margin: -2.85cqw 0 0 -2.85cqw; filter: drop-shadow(0 4px 4px rgba(0,0,0,.18)); transform: translateY(-16cqw) rotate(-10deg); animation: m-cxcharm 7s -3s ease-in-out infinite; }
.m-cxch.c1 { left: -16.7cqw; } .m-cxch.c2 { left: 7.7cqw; transform: translateY(-18.3cqw) rotate(12deg); animation-delay: -2.9s; } .m-cxch.c3 { left: -5cqw; transform: translateY(-21.3cqw); animation-delay: -2.8s; }
.m-cxtrail { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.m-cxtrail > path { fill: none; stroke: rgba(29,42,74,.32); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1.2 1.8; animation: m-cxdash 3s linear infinite; }
@keyframes m-cxspin { to { rotate: 360deg; } }
@keyframes m-cxfan { from { rotate: 0deg; translate: 0 30px; opacity: 0; } }
@keyframes m-cxdrop { from { transform: translateY(-30px) rotate(-6deg); opacity: 0; } }
@keyframes m-cxlid { 0%, 8% { transform: none; } 20%, 72% { transform: translate(60%, -60%) rotate(26deg); } 86%, 100% { transform: none; } }
@keyframes m-cxbounce { 0%, 12% { transform: translateY(5cqw) scale(.6); } 26% { transform: translateY(calc(-17.3cqw - var(--i) * 1.5cqw)); } 34% { transform: translateY(calc(-11cqw - var(--i) * 1.5cqw)) scale(1.05, .92); } 42%, 66% { transform: translateY(calc(-13.3cqw - var(--i) * 1.5cqw)); } 80%, 100% { transform: translateY(5cqw) scale(.6); } }
@keyframes m-cxcharm { 0%, 16% { transform: translateY(5cqw) scale(.4) rotate(0deg); } 30% { transform: translateY(-20cqw) rotate(-20deg); } 40%, 66% { transform: translateY(-16cqw) rotate(-10deg); } 82%, 100% { transform: translateY(5cqw) scale(.4) rotate(0deg); } }
@keyframes m-cxpeel { 0%, 40%, 100% { clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 0 100%); } 55%, 85% { clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%); } }
@keyframes m-cxflap { 0%, 40%, 100% { width: 0; height: 0; } 55%, 85% { width: 38px; height: 38px; } }
@keyframes m-cxdash { to { stroke-dashoffset: -6; } }
.m-cxages > span { color: #b3201a; }
.m-cxages a { padding: 4px 12px 4px 4px; border-radius: 999px; background: #fff; border: 2px solid #1d2a4a; color: var(--m-ink) !important; box-shadow: 0 3px 0 #1d2a4a; }
.m-cxages a:nth-of-type(4n+1) b { background: #3bb273; } .m-cxages a:nth-of-type(4n+2) b { background: #2a8fd6; } .m-cxages a:nth-of-type(4n+3) b { background: #d42a20; } .m-cxages a:nth-of-type(4n) b { background: #ffc72c; color: #1d2a4a; }
.m-cxages b { display: grid; place-items: center; min-width: 32px; height: 28px; padding: 0 7px; border-radius: 999px; color: #fff; font: 700 13px/1 var(--m-head); }
.m-cxages a:is(:hover, :focus-visible) { box-shadow: 0 5px 0 #1d2a4a; }
.m-cxtile { padding: 10px 14px 10px 10px; border-radius: 18px; background: var(--t); border: 3px solid #fff; color: var(--m-ink) !important; box-shadow: 0 3px 0 rgba(29,42,74,.18), 0 12px 24px rgba(29,42,74,.08); rotate: calc((var(--i) - 1.5) * 1.2deg); transition: transform .4s cubic-bezier(.3,1.6,.5,1), box-shadow .3s; }
.m-cximg { width: 58px; height: 58px; padding: 3px; border-radius: 12px; background: #fff; }
.m-cxtile .m-q8tx b { font: 700 14.5px/1.2 var(--m-head); color: var(--m-ink); } .m-cxtile .m-q8tx small { color: #b3201a; }
.m-cxtile:is(:hover, :focus-visible) { transform: translateY(-5px) rotate(-2deg) scale(1.02); }
body.hv-craftbox main section > .wrap > h2::after { content: ""; display: block; width: 120px; height: 10px; margin-top: 12px; border-radius: 5px; background: linear-gradient(90deg, #d42a20 0 25%, #ffc72c 25% 50%, #2a8fd6 50% 75%, #3bb273 75%); }
body.hv-craftbox .pcard:hover, body.hv-craftbox .m-acard:hover { box-shadow: 0 0 0 3px #ffc72c, 0 18px 40px rgba(29,42,74,.12); }
body.hv-craftbox .m-acard .m-art { background: radial-gradient(circle at 12px 12px, rgba(212,42,32,.10) 0 2.5px, transparent 3px) 0 0 / 36px 36px, #fffaf0; }
body.hv-craftbox .m-cta .m-band { border-radius: 26px; background: radial-gradient(circle at 12px 12px, rgba(255,255,255,.12) 0 3px, transparent 3.5px) 0 0 / 40px 40px, linear-gradient(120deg, #1d2a4a, #2a8fd6); }
body.hv-craftbox .m-cta .m-band::before { width: 150px; height: 150px; right: 30px; top: -50px; border-radius: 50%; background: #ffc72c; opacity: .9; outline: 6px dotted rgba(255,255,255,.4); outline-offset: -3px; }
body.hv-craftbox .m-page-hero { background: radial-gradient(circle at 12px 12px, rgba(255,255,255,.1) 0 3px, transparent 3.5px) 0 0 / 40px 40px, linear-gradient(120deg, #1d2a4a, #2a8fd6); } body.hv-craftbox .m-page-hero .eyebrow { color: #ffd650; }
body.hv-craftbox footer.site { background: #1d2a4a; color: #dbe3f2; border: 0; } body.hv-craftbox footer.site nav a { color: #ffd650; }
body.hv-craftbox .m-collage .m-card { border-radius: 20px; border: 4px solid #fff; }

/* sticker (Klutz): a white-bordered sticker; on hover its top-right corner peels back and the button tilts */
body.bv-sticker .btn { border-radius: 14px; padding: 15px 24px; border: 3px solid #fff; clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 0 100%); transition: transform .35s cubic-bezier(.3,1.6,.5,1), clip-path .3s var(--m-ease), background .2s, color .2s; }
body.bv-sticker :is(.btn.accent, .pcard .btn, .m-btn-main) { box-shadow: none; filter: drop-shadow(0 4px 0 rgba(29,42,74,.22)); }
body.bv-sticker :is(.btn.ghost, .m-btn-ghost) { border-color: var(--m-ink); }
body.bv-sticker .btn:is(:hover, :focus-visible) { transform: translateY(-3px) rotate(-1.5deg); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
body.bv-sticker .btn::after { inset: 0 0 auto auto; z-index: 1; width: 0; height: 0; background: linear-gradient(to bottom left, transparent 50%, #efe9da 50%, #fff); transform: none; border-radius: 0 0 0 6px; transition: width .3s var(--m-ease), height .3s var(--m-ease); }
body.bv-sticker .btn:is(:hover, :focus-visible)::after { width: 18px; height: 18px; transform: none; }

/* whetstone (Hammer Stahl): a dark walnut board over a Damascus wave pattern — real knives fan out from the handle end, a glint runs along the blades, a honing steel strokes above them, a whetstone rests at the corner */
body.hv-whetstone .m-hero { background: radial-gradient(45% 60% at 76% 46%, rgba(140,47,27,.22), transparent 70%), radial-gradient(60% 80% at 0 100%, rgba(58,63,69,.5), transparent 70%), linear-gradient(160deg, #1a1d20, #0e1012); color: #fff; }
body.hv-whetstone .m-hero h1 { font-size: clamp(34px, 4.2vw, 60px) !important; line-height: 1.02 !important; letter-spacing: .01em; text-transform: uppercase; }
body.hv-whetstone .m-hero .eyebrow { color: #e3b7a8; letter-spacing: .22em; } body.hv-whetstone .m-hero .sub { color: rgba(236,238,240,.86); }
body.hv-whetstone .m-hero .m-chips span { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border-color: rgba(201,208,214,.35); color: #e9ecef; border-radius: 4px; letter-spacing: .04em; }
body.hv-whetstone .m-hero .m-btn-ghost { border-color: rgba(201,208,214,.7) !important; color: #e9ecef !important; } body.hv-whetstone .m-hero .m-btn-ghost:hover { background: #e9ecef !important; color: #16181b !important; }
.m-ws { aspect-ratio: 600 / 520; }
.m-wsdam { position: absolute; inset: -6% -8%; width: 116%; height: 112%; fill: none; stroke: rgba(201,208,214,.09); stroke-width: 1.2; -webkit-mask: radial-gradient(60% 60% at 50% 50%, #000 40%, transparent 75%); mask: radial-gradient(60% 60% at 50% 50%, #000 40%, transparent 75%); animation: m-wsdam 14s ease-in-out infinite alternate; }
.m-wsboard { position: absolute; left: 3%; right: 3%; top: 7%; bottom: 7%; border-radius: 24px; rotate: -3deg; background: repeating-linear-gradient(7deg, rgba(0,0,0,.13) 0 2px, transparent 2px 9px, rgba(255,210,170,.04) 9px 10px, transparent 10px 15px), radial-gradient(70% 60% at 40% 40%, #6b4630, transparent 80%), linear-gradient(135deg, #5a3a26, #3b2416 60%, #2a190e); box-shadow: inset 0 2px 0 rgba(255,255,255,.12), inset 0 -7px 0 rgba(0,0,0,.35), 0 40px 70px rgba(0,0,0,.6); animation: m-wsboard 1s var(--m-ease) backwards; }
.m-wsgroove { position: absolute; inset: 5%; border-radius: 16px; border: 2px solid rgba(0,0,0,.35); box-shadow: 0 1px 0 rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.06); }
.m-wsfan { position: absolute; inset: 0; }
.m-wsk { position: absolute; right: 9%; display: block; overflow: hidden; border-radius: 3px; mix-blend-mode: screen; filter: brightness(.94) contrast(1.12); transform-origin: 97% 50%; -webkit-mask: linear-gradient(90deg, transparent, #000 3%, #000 96%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 3%, #000 96%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-composite: intersect; animation: m-wsfan 1.1s calc(.4s + var(--i, 0) * .12s) cubic-bezier(.3,1.2,.5,1) backwards; }
.m-wsk.k1 { top: 27%; width: 77%; rotate: -15deg; } .m-wsk.k2 { top: 42%; width: 74%; rotate: -6deg; } .m-wsk.k3 { top: 57%; width: 61%; rotate: 3deg; } .m-wsk.k4 { top: 70%; width: 51%; rotate: 11deg; }
.m-wsk::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 28%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.85) 50%, transparent); mix-blend-mode: color-dodge; transform: translateX(-120%); animation: m-wsglint 6s calc(2.2s + var(--i, 0) * .3s) ease-in-out infinite; }
.m-wshone { position: absolute; left: 7%; top: 9%; z-index: 3; width: 62%; rotate: -7deg; filter: drop-shadow(0 10px 8px rgba(0,0,0,.55)); animation: m-wshone 3.2s 1.6s ease-in-out infinite; }
.m-wsspark { position: absolute; left: 12%; top: 35%; width: 34px; height: 5px; border-radius: 50%; background: radial-gradient(closest-side, #fff, rgba(255,255,255,0)); opacity: 0; animation: m-wsspark 3.2s 1.6s ease-in-out infinite; }
.m-wsstone { position: absolute; left: 6%; bottom: 6%; z-index: 3; width: 24%; rotate: 5deg; filter: drop-shadow(0 14px 12px rgba(0,0,0,.55)); animation: m-rise .8s .9s var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-wsstone:hover { transform: translateY(-5px); }
@keyframes m-wsdam { to { transform: translateX(-26px) translateY(8px); } }
@keyframes m-wsboard { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@keyframes m-wsfan { from { rotate: 0deg; opacity: 0; } }
@keyframes m-wsglint { 0%, 30% { transform: translateX(-120%); } 70%, 100% { transform: translateX(420%); } }
@keyframes m-wshone { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-7%); } }
@keyframes m-wsspark { 0%, 100% { opacity: 0; transform: translateX(0); } 20% { opacity: .9; } 50% { opacity: 0; transform: translateX(420%); } }
.m-wsblades > span { color: #c9d0d6; }
.m-wsblades a { padding: 4px 12px 4px 4px; border-radius: 4px; background: rgba(255,255,255,.05); border: 1px solid rgba(201,208,214,.35); color: #fff !important; }
.m-wsblades b { display: grid; place-items: center; min-width: 40px; height: 28px; padding: 0 6px; border-radius: 3px; background: linear-gradient(180deg, #eef1f3, #b7bfc6 55%, #8e979f); color: #16181b; font: 600 15px/1 var(--m-head); letter-spacing: .02em; }
.m-wsblades small { color: rgba(236,238,240,.86); }
.m-wsblades a:is(:hover, :focus-visible) { border-color: #c9d0d6; background: rgba(255,255,255,.1); }
.m-wstile { padding: 12px 14px 12px 12px; border-radius: 8px; background: linear-gradient(180deg, #2a2e33, #1b1e22); border: 1px solid #3a3f45; color: #fff !important; box-shadow: 0 12px 26px rgba(0,0,0,.35); transition: transform .4s var(--m-ease), border-color .3s; }
.m-wstile em { position: absolute; right: 12px; top: 8px; font: 600 12px/1 var(--m-head); letter-spacing: .1em; color: #c46a52; font-style: normal; }
.m-wsimg { width: 56px; height: 56px; padding: 4px; border-radius: 6px; background: #fff; }
.m-wstile .m-q8tx b { font: 600 16px/1.15 var(--m-head); letter-spacing: .03em; text-transform: uppercase; color: #fff; } .m-wstile .m-q8tx small { color: #c9d0d6; }
.m-wstile:is(:hover, :focus-visible) { transform: translateY(-4px); border-color: #8c2f1b; }
body.hv-whetstone main h2 { text-transform: uppercase; letter-spacing: .02em; font-weight: 600; }
body.hv-whetstone main section > .wrap > h2::after { content: ""; display: block; width: 150px; height: 6px; margin-top: 12px; background: linear-gradient(90deg, #8c2f1b 0 26px, transparent 26px 32px, #a9b0b7 32px); clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%); }
body.hv-whetstone .pcard:hover, body.hv-whetstone .m-acard:hover { box-shadow: 0 0 0 1.5px #3a3f45, 0 18px 40px rgba(18,20,22,.16); }
body.hv-whetstone .m-acard .m-art { background: linear-gradient(180deg, #fff, #eef0f1); }
body.hv-whetstone .m-cta .m-band { border-radius: 12px; background: radial-gradient(50% 120% at 100% 0, rgba(140,47,27,.35), transparent 70%), linear-gradient(120deg, #0e1012, #2a2e33); box-shadow: inset 0 0 0 1px rgba(201,208,214,.2); }
body.hv-whetstone .m-cta .m-band::before { width: 260px; height: 3px; right: 40px; top: 30px; border-radius: 0; background: linear-gradient(90deg, transparent, rgba(201,208,214,.5), transparent); }
body.hv-whetstone .m-page-hero { background: radial-gradient(60% 120% at 100% 0, rgba(140,47,27,.3), transparent 70%), linear-gradient(120deg, #0e1012, #2a2e33); } body.hv-whetstone .m-page-hero .eyebrow { color: #e3b7a8; }
body.hv-whetstone footer.site { background: #0e1012; color: #c9d0d6; border: 0; } body.hv-whetstone footer.site nav a { color: #fff; }
body.hv-whetstone .m-collage .m-card { border-radius: 10px; }

/* whet (Hammer Stahl): deep red; on hover a steel-grey sheen strokes back and forth like a blade on a stone and an edge line lights along the bottom */
body.bv-whet .btn { border-radius: 6px; padding: 15px 26px; font-size: 14px; letter-spacing: .07em; text-transform: uppercase; }
body.bv-whet :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #9d3720, #8c2f1b 55%, #772715); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 22px rgba(110,36,20,.3); }
body.bv-whet :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #84301c, #6e2414 55%, #5c1e10); color: #fff; }
body.bv-whet .btn::after { background: linear-gradient(100deg, transparent 30%, rgba(235,240,245,.7) 48%, rgba(150,158,166,.35) 55%, transparent 66%); }
body.bv-whet .btn:is(:hover, :focus-visible)::after { transform: translateX(-120%); animation: m-whet 1.1s ease-in-out infinite alternate; }
body.bv-whet .btn::before { content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 1.5px; pointer-events: none; background: linear-gradient(90deg, transparent, #dfe4e8, transparent); transform: scaleX(0); transition: transform .5s var(--m-ease); }
body.bv-whet .btn:is(:hover, :focus-visible)::before { transform: scaleX(1); }
@keyframes m-whet { to { transform: translateX(120%); } }
body.bv-whet .m-cta .btn.m-white:hover { color: var(--m-ink); }

/* kennelplan (Cove Products): a clean facility plan — modular kennel panels snap into a 4×8 run, raised floor tiles slide in, a grooming table rises on its lift, paw prints walk across, real photos pinned to the sheet */
body.hv-kennelplan .m-hero { background: radial-gradient(50% 60% at 78% 42%, #ffffff, transparent 70%), #f2efe6; }
body.hv-kennelplan .m-hero h1 { font-size: clamp(30px, 3.6vw, 52px) !important; line-height: 1.06 !important; letter-spacing: -.02em; }
.m-kp { aspect-ratio: 600 / 560; }
.m-kpgrid { position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(rgba(47,110,79,.09) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(47,110,79,.09) 1px, transparent 1px) 0 0 / 24px 24px, #fbfaf6; border: 1.5px solid #d9dccf; box-shadow: 0 30px 60px rgba(29,43,36,.1); }
.m-kpplan { position: absolute; left: 2%; top: 4%; width: 54%; z-index: 2; }
.m-kplabel { display: inline-block; margin: 0 0 4px 4%; font: 700 11px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #2f6e4f; }
.m-kpsvg { display: block; width: 100%; height: auto; overflow: visible; }
.m-kptile rect { fill: #c3cbce; stroke: #8e979c; stroke-width: 1.2; } .m-kptile path { stroke: rgba(255,255,255,.65); stroke-width: 2; }
.m-kptile { transform-box: fill-box; animation: m-kptile .55s calc(1.5s + var(--i) * .1s) var(--m-ease) backwards; }
.m-kppan { fill: none; stroke: #2f6e4f; stroke-width: 6; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: m-kpsnap .4s calc(.3s + var(--i) * .1s) cubic-bezier(.3,1.7,.5,1) backwards; }
.m-kpgate { fill: none; stroke: #c9a227; stroke-width: 6; stroke-linecap: round; transform-box: view-box; transform-origin: 40px 220px; animation: m-kpgate 7s 2.6s ease-in-out infinite; }
.m-kppost { fill: #fff; stroke: #1d2b24; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: m-kpsnap .3s calc(.3s + var(--i) * .1s) cubic-bezier(.3,1.7,.5,1) backwards; }
.m-kpdim path { fill: none; stroke: #6b7a72; stroke-width: 1.3; } .m-kpdim text { font: 700 15px var(--m-head); fill: #1d2b24; }
.m-kpdim { animation: m-rise .6s 2.4s var(--m-ease) backwards; }
.m-kpkennel { position: absolute; right: 2.5%; top: 8%; z-index: 3; width: 41%; display: block; padding: 7px; border-radius: 10px; background: #fff; box-shadow: 0 18px 34px rgba(29,43,36,.18); rotate: 2deg; animation: m-kppin .8s .1s cubic-bezier(.3,1.3,.5,1) backwards; }
.m-kpkennel img { border-radius: 5px !important; }
.m-kpkennel::before { content: ""; position: absolute; left: 50%; top: -9px; z-index: 1; width: 70px; height: 20px; margin-left: -35px; background: rgba(201,185,143,.75); rotate: -3deg; }
.m-kpbank { position: absolute; left: 33%; bottom: 9%; z-index: 3; width: 18%; display: block; filter: drop-shadow(0 12px 10px rgba(29,43,36,.22)); animation: m-rise .8s 1s var(--m-ease) backwards; }
.m-kplift { position: absolute; left: 4%; bottom: 5%; z-index: 4; width: 24%; animation: m-kplift 6s 2s ease-in-out infinite; }
.m-kplift::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -6px; height: 10px; border-radius: 50%; background: radial-gradient(closest-side, rgba(29,43,36,.25), transparent); }
.m-kptable { display: block; filter: drop-shadow(0 10px 10px rgba(29,43,36,.18)); }
.m-kpfloor { position: absolute; right: 3%; bottom: 7%; z-index: 3; width: 40%; display: block; filter: drop-shadow(0 14px 12px rgba(29,43,36,.2)); animation: m-kpslide 1s .9s var(--m-ease) backwards; }
.m-kpbank, .m-kpfloor, .m-kpkennel { transition: transform .45s var(--m-ease); } :is(.m-kpbank, .m-kpfloor, .m-kpkennel):hover { transform: translateY(-5px); }
.m-kppaws { position: absolute; left: 0; right: 0; bottom: 0.5%; z-index: 5; height: 34px; pointer-events: none; }
.m-kppaws i { position: absolute; left: var(--x); bottom: var(--y); width: 17px; height: 17px; color: rgba(29,43,36,.32); rotate: 90deg; opacity: 0; animation: m-kppaw 8s calc(1s + var(--i) * .45s) infinite; }
.m-kppaws svg { display: block; width: 100%; height: 100%; fill: currentColor; }
@keyframes m-kptile { from { transform: translateX(80px); opacity: 0; } }
@keyframes m-kpsnap { from { transform: scale(.3); opacity: 0; } }
@keyframes m-kpgate { 0%, 20%, 100% { transform: rotate(0deg); } 35%, 70% { transform: rotate(-55deg); } }
@keyframes m-kppin { from { transform: translateY(-24px) rotate(-4deg); opacity: 0; } }
@keyframes m-kplift { 0%, 15%, 100% { transform: translateY(0); } 40%, 70% { transform: translateY(-9%); } }
@keyframes m-kpslide { from { transform: translateX(50px); opacity: 0; } }
@keyframes m-kppaw { 0% { opacity: 0; } 5%, 50% { opacity: 1; } 65%, 100% { opacity: 0; } }
.m-kpsizes > span { color: #23553c; }
.m-kpsizes a { padding: 4px 12px 4px 4px; border-radius: 8px; background: #fff; border: 1.5px dashed #9fb3a6; color: var(--m-ink) !important; }
.m-kpsizes b { display: grid; place-items: center; min-width: 44px; height: 28px; padding: 0 7px; border-radius: 5px; background: #2f6e4f; color: #fff; font: 700 13.5px/1 var(--m-head); }
.m-kpsizes a:is(:hover, :focus-visible) { border-style: solid; border-color: #2f6e4f; box-shadow: 0 8px 18px rgba(29,43,36,.12); }
.m-kptile2 { padding: 12px 14px 12px 12px; border-radius: 12px; background: #fff; border: 1.5px solid #d9dccf; color: var(--m-ink) !important; box-shadow: 0 10px 22px rgba(29,43,36,.06); transition: transform .4s var(--m-ease), border-color .3s, box-shadow .3s; }
.m-kptile2 em { position: absolute; right: 12px; top: 9px; font: 700 10.5px/1 var(--m-body); letter-spacing: .12em; color: #2f6e4f; font-style: normal; }
.m-kpimg { width: 58px; height: 58px; padding: 4px; border-radius: 8px; background: #f2f4f1; outline: 1.5px dashed #9fb3a6; outline-offset: 2px; }
.m-kptile2 .m-q8tx b { font: 700 15px/1.2 var(--m-head); color: var(--m-ink); } .m-kptile2 .m-q8tx small { color: #2f6e4f; }
.m-kptile2:is(:hover, :focus-visible) { transform: translateY(-4px); border-color: #2f6e4f; box-shadow: 0 16px 30px rgba(29,43,36,.12); }
body.hv-kennelplan main section > .wrap > h2::after { content: ""; display: block; width: 130px; height: 12px; margin-top: 12px; background: linear-gradient(#2f6e4f, #2f6e4f) 0 50% / 100% 2px no-repeat, linear-gradient(#2f6e4f, #2f6e4f) 0 0 / 2px 100% no-repeat, linear-gradient(#2f6e4f, #2f6e4f) 100% 0 / 2px 100% no-repeat; }
body.hv-kennelplan .pcard:hover, body.hv-kennelplan .m-acard:hover { box-shadow: 0 0 0 2px #2f6e4f, 0 18px 40px rgba(29,43,36,.12); }
body.hv-kennelplan .m-acard .m-art { background: linear-gradient(rgba(47,110,79,.07) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, rgba(47,110,79,.07) 1px, transparent 1px) 0 0 / 20px 20px, #fbfaf6; }
body.hv-kennelplan .m-cta .m-band { border-radius: 16px; background: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(120deg, #1d2b24, #2f6e4f); }
body.hv-kennelplan .m-cta .m-band::before { width: 170px; height: 110px; right: 40px; top: -30px; border-radius: 4px; background: none; border: 3px dashed rgba(255,255,255,.2); }
body.hv-kennelplan .m-page-hero { background: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(120deg, #1d2b24, #2f6e4f); } body.hv-kennelplan .m-page-hero .eyebrow { color: #cfe3d6; }
body.hv-kennelplan footer.site { background: #1d2b24; color: #d6ded9; border: 0; } body.hv-kennelplan footer.site nav a { color: #fff; }
body.hv-kennelplan .m-collage .m-card { border-radius: 12px; }

/* snap (Cove Products): a small modular panel waits unsnapped at the right end; on hover it slides in and clicks into place with a ring */
body.bv-snap .btn { border-radius: 10px; padding: 15px 52px 15px 24px; }
body.bv-snap .btn .arr { display: none; }
body.bv-snap .btn::before { content: ""; position: absolute; right: 14px; top: 50%; z-index: 1; width: 20px; height: 16px; margin-top: -8px; border: 2px solid currentColor; border-radius: 3px; pointer-events: none; background: repeating-linear-gradient(90deg, currentColor 0 1.5px, transparent 1.5px 5px); opacity: .6; transform: translateX(9px) rotate(14deg); transition: transform .45s cubic-bezier(.3,1.9,.5,1), opacity .3s; }
body.bv-snap .btn:is(:hover, :focus-visible)::before { transform: none; opacity: 1; }
body.bv-snap .btn::after { inset: auto; right: 8px; top: 50%; z-index: 1; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: none; border: 2px solid currentColor; opacity: 0; transform: scale(.4); transition: none; }
body.bv-snap .btn:is(:hover, :focus-visible)::after { animation: m-snapring .5s .22s ease-out both; }
@keyframes m-snapring { from { opacity: .8; transform: scale(.4); } to { opacity: 0; transform: scale(1.35); } }
body.bv-snap .m-cta .btn.m-white:hover { color: var(--m-ink); }

@media (prefers-reduced-motion: reduce) { .m-cxpl { display: none; } .m-cxlid { transform: translate(60%, -60%) rotate(26deg) !important; } .m-shwdoor { transform: rotateY(-40deg) !important; } .m-kppaws i { opacity: 1 !important; } .m-wsspark { opacity: 0 !important; } }
/* phones: batch 12.11 (2) heroes stack */
@media (max-width: 900px) {
  :is(body.hv-showcase, body.hv-craftbox, body.hv-whetstone, body.hv-kennelplan) .m-hero { min-height: 0; } :is(body.hv-showcase, body.hv-craftbox, body.hv-whetstone, body.hv-kennelplan) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr); }
  .m-shwcats, .m-cxcats, .m-wscats, .m-kpcats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-shwcats, .m-cxcats, .m-wscats, .m-kpcats) > a:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .m-shwguide span { font-size: 9px; padding: 4px 7px; } .m-shwrule { width: 11px; } .m-kplabel { font-size: 9px; } .m-kpdim text { font-size: 18px; } .m-cxstk { border-width: 3px; border-radius: 14px; } }
@media (max-width: 420px) {
  .m-shwtile { flex-direction: column; align-items: flex-start; } .m-shwtile::after { top: 14px; margin: 0; }
  .m-shwtile, .m-cxtile, .m-wstile, .m-kptile2 { gap: 9px; padding: 10px; } .m-shwtile { padding-right: 22px; } .m-shwimg, .m-cximg, .m-wsimg, .m-kpimg { width: 44px; height: 44px; }
  :is(.m-shwtile, .m-cxtile, .m-wstile, .m-kptile2) .m-q8tx b { font-size: 13px; } .m-wstile .m-q8tx b { font-size: 14px; } .m-wstile em, .m-kptile2 em { display: none; }
}

/* ===== batch 12.11.2026 (3): benchlab/tare (CGOLDENWALL), gambit/checkmate (WE Games), summit/trailhead (CAMEL CROWN) ===== */
:is(body.hv-benchlab, body.hv-gambit, body.hv-summit) .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); }
:is(body.hv-benchlab, body.hv-gambit, body.hv-summit) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:is(body.hv-benchlab, body.hv-gambit, body.hv-summit) .m-hero .m-copy > * { animation: m-rise .8s var(--m-ease) both; }
:is(body.hv-benchlab, body.hv-gambit, body.hv-summit) .m-hero .m-copy > :nth-child(3) { animation-delay: .08s; } :is(body.hv-benchlab, body.hv-gambit, body.hv-summit) .m-hero .m-copy > :nth-child(4) { animation-delay: .16s; } :is(body.hv-benchlab, body.hv-gambit, body.hv-summit) .m-hero .m-copy > :nth-child(n+5) { animation-delay: .24s; }
:is(body.hv-benchlab, body.hv-gambit, body.hv-summit) .m-hero h1 { text-wrap: balance; max-width: 18ch; }
:is(body.hv-benchlab, body.hv-gambit, body.hv-summit) .m-hero .bgcredit { display: none; }
:is(body.hv-benchlab, body.hv-summit) .m-hero { color: var(--m-ink); }
:is(body.hv-benchlab, body.hv-summit) .m-hero h1 { color: var(--m-ink) !important; }
:is(body.hv-benchlab, body.hv-summit) .m-hero .sub { color: var(--m-body-ink); } :is(body.hv-benchlab, body.hv-summit) .m-hero .eyebrow { color: var(--m-accent-2); }
:is(body.hv-benchlab, body.hv-summit) .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: var(--m-ink) !important; background: rgba(255,255,255,.7) !important; }
:is(body.hv-benchlab, body.hv-summit) .m-hero .m-btn-ghost:hover { background: var(--m-ink) !important; color: #fff !important; }
:is(body.hv-benchlab, body.hv-summit) .m-hero .m-chips span { background: #fff; color: var(--m-ink); border: 1.5px solid color-mix(in srgb, var(--m-ink) 14%, transparent); backdrop-filter: none; }
:is(.m-bn, .m-gm, .m-sm) { position: relative; width: min(100%, 600px); justify-self: center; container-type: inline-size; }
:is(.m-bn, .m-gm, .m-sm) a { -webkit-tap-highlight-color: transparent; }
:is(.m-bn, .m-gm, .m-sm) img { display: block; width: 100%; height: auto; border-radius: 0; }
:is(.m-bncats, .m-gmcats, .m-smcats) { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; padding: 10px clamp(18px, 4vw, 72px) clamp(26px, 4vh, 44px); }
:is(.m-bntile, .m-gmtile, .m-smtile) { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; animation: m-rise .7s calc(.8s + var(--i, 0) * .08s) var(--m-ease) backwards; transition: transform .4s var(--m-ease), border-color .3s, box-shadow .3s, background .3s; }
:is(.m-bnimg, .m-gmimg, .m-smimg) { flex: none; display: block; overflow: hidden; } :is(.m-bnimg, .m-gmimg, .m-smimg) img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; transition: transform .45s var(--m-ease); }
:is(.m-bntile, .m-gmtile, .m-smtile):hover :is(.m-bnimg, .m-gmimg, .m-smimg) img { transform: scale(1.08) rotate(-4deg); }
:is(.m-bntile, .m-gmtile, .m-smtile):focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; }
:is(.m-bntile, .m-gmtile, .m-smtile) em { position: absolute; right: 11px; top: 9px; font-style: normal; }
:is(.m-bnreads, .m-gmsizes, .m-smspecs) { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -6px 0 22px; }
:is(.m-bnreads, .m-gmsizes, .m-smspecs) > span { flex-basis: 100%; margin: 0 0 2px; font: 700 12px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; }
:is(.m-bnreads, .m-gmsizes, .m-smspecs) a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: background .25s, border-color .25s, transform .3s var(--m-ease), box-shadow .3s; animation: m-rise .6s calc(.45s + var(--i, 0) * .06s) var(--m-ease) backwards; }
:is(.m-bnreads, .m-gmsizes, .m-smspecs) a:is(:hover, :focus-visible) { transform: translateY(-2px); }
:is(.m-bnreads, .m-gmsizes, .m-smspecs) small { font: 600 12.5px/1 var(--m-body); white-space: nowrap; }

/* benchlab (CGOLDENWALL): a steel workbench split kitchen/lab — flour pours from a scoop into a weigh boat on the real scale, the balance LCD ticks to 0.0001 g and reads STABLE, a gauge needle sweeps, a centrifuge rotor spins; real photos on the bench */
body.hv-benchlab .m-hero { background: radial-gradient(50% 60% at 78% 40%, #ffffff, transparent 70%), linear-gradient(90deg, #f7f3ea, #f2f3f2 55%, #eef0f1); }
body.hv-benchlab .m-hero h1 { font-size: clamp(32px, 3.8vw, 54px) !important; line-height: 1.04 !important; letter-spacing: -.015em; }
body.hv-benchlab .m-hero .eyebrow { color: #7a5508; letter-spacing: .18em; }
.m-bn { aspect-ratio: 600 / 540; }
.m-bnwall { position: absolute; left: 0; right: 0; top: 0; bottom: 27%; border-radius: 18px 18px 0 0; overflow: hidden; isolation: isolate; background: #fbfbfa; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.m-bnwall::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 50%; z-index: -1; background: linear-gradient(#e4d8c3 1px, transparent 1px) 0 0 / 100% 4cqw, linear-gradient(90deg, #e4d8c3 1px, transparent 1px) 0 0 / 8cqw 100%, #f6efe2; }
.m-bnwall::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 50%; z-index: -1; border-left: 2px solid #c9ccce; background: linear-gradient(#e3e6e8 1px, transparent 1px) 0 0 / 100% 6cqw, linear-gradient(90deg, #e3e6e8 1px, transparent 1px) 0 0 / 6cqw 100%, #fcfcfb; }
.m-bnwall span { position: absolute; top: 3%; left: 3.5%; font: 700 max(9px, 1.9cqw)/1 var(--m-body); letter-spacing: .2em; text-transform: uppercase; color: #8a7a5c; }
.m-bnwall span + span { left: 53.5%; color: #6f7a83; }
.m-bnbench { position: absolute; left: -1.5%; right: -1.5%; top: 72%; bottom: 0; border-radius: 6px 6px 18px 18px; background: linear-gradient(180deg, #f4f5f6 0, #d7dadc 15%, #bfc4c7 21%, #9aa1a6 22%, #b6bcc0 23%, #a3aaaf 60%, #8d9499), repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 3px); background-blend-mode: overlay; box-shadow: 0 24px 50px rgba(30,34,38,.22), inset 0 1px 0 #fff; }
.m-bnbench::before { content: ""; position: absolute; left: 0; right: 0; top: 21%; height: 3px; background: #b07d12; opacity: .85; }
.m-bnbench::after { content: ""; position: absolute; left: 10%; right: 10%; top: 58%; height: 2px; border-radius: 2px; background: rgba(0,0,0,.18); box-shadow: 0 1px 0 rgba(255,255,255,.4); }
.m-bnmill, .m-bnbal, .m-bnvisco, .m-bndewar, .m-bnsc { display: block; position: absolute; z-index: 3; filter: drop-shadow(0 12px 10px rgba(30,34,38,.28)); transition: transform .45s var(--m-ease); }
.m-bnmill { left: 2.5%; bottom: 23%; width: 21%; animation: m-bnin .9s .2s var(--m-ease) backwards; }
.m-bnscale { position: absolute; left: 25.5%; bottom: 22.5%; width: 18.5%; z-index: 4; animation: m-bnin .9s .35s var(--m-ease) backwards; }
.m-bnsc { position: relative; inset: auto; width: 100%; }
.m-bnbal { left: 44.5%; bottom: 23%; width: 33%; z-index: 4; animation: m-bnin .9s .05s var(--m-ease) backwards; }
.m-bnvisco { right: 2%; bottom: 23.5%; width: 17.5%; animation: m-bnin .9s .5s var(--m-ease) backwards; }
.m-bnshelf { position: absolute; right: 2%; top: 33%; width: 25%; height: 2%; z-index: 2; border-radius: 2px; background: linear-gradient(#eef0f1, #a9b0b5); box-shadow: 0 6px 10px rgba(30,34,38,.18); }
.m-bnshelf::before, .m-bnshelf::after { content: ""; position: absolute; top: 100%; width: 6%; height: 260%; background: linear-gradient(135deg, #9aa1a6 50%, transparent 50%); } .m-bnshelf::before { left: 10%; } .m-bnshelf::after { right: 10%; }
.m-bndewar { right: 7%; bottom: 67%; width: 8.4%; z-index: 2; animation: m-bnin .9s .6s var(--m-ease) backwards; }
:is(.m-bnmill, .m-bnbal, .m-bnvisco, .m-bndewar):hover, .m-bnsc:hover { transform: translateY(-5px); }
.m-bnpour { position: absolute; left: 30%; bottom: 64%; width: 52%; height: 132%; z-index: 5; pointer-events: none; }
.m-bnscoop { position: absolute; left: 2%; top: 0; width: 104%; height: auto; overflow: visible; transform-origin: 85% 40%; rotate: -24deg; animation: m-bnscoop 5s ease-in-out infinite; }
.m-bnscoop path { fill: #c5cbcf; stroke: #6f787f; stroke-width: 1.5; } .m-bnscoop .hd { fill: none; stroke: #23272b; stroke-width: 4; stroke-linecap: round; } .m-bnscoop .in { fill: #f3ead6; stroke: none; }
.m-bnstream { position: absolute; left: 21%; top: 21%; bottom: 7%; width: max(5px, 1.3cqw); background: radial-gradient(circle at 35% 50%, #d5bd84 0 1.3px, transparent 1.8px) 0 0 / 100% 5px, radial-gradient(circle at 70% 50%, #e4d2a2 0 1.1px, transparent 1.6px) 0 2px / 100% 7px, radial-gradient(circle at 52% 50%, #cfb47a 0 .9px, transparent 1.4px) 0 4px / 100% 4px, linear-gradient(90deg, transparent 35%, rgba(233,217,174,.45) 50%, transparent 65%); -webkit-mask: linear-gradient(transparent, #000 10%, #000 92%, transparent); mask: linear-gradient(transparent, #000 10%, #000 92%, transparent); transform-origin: 50% 0; animation: m-bnflow .45s linear infinite, m-bnpouring 5s ease-in-out infinite; }
.m-bnboat { position: absolute; left: -3%; bottom: 0; width: 52%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); height: auto; overflow: visible; }
.m-bnboat path { fill: #fdfdfd; stroke: #8c949a; stroke-width: 1.5; stroke-linejoin: round; } .m-bnboat .pile { fill: #e6d29f; stroke: none; transform-box: fill-box; transform-origin: 50% 100%; animation: m-bnpile 5s ease-in-out infinite; }
.m-bnlcd { position: absolute; left: 44%; top: 9%; width: 29%; z-index: 3; padding: 1.4cqw 1.8cqw 1.6cqw; border-radius: 1.4cqw; background: linear-gradient(#2c3135, #1b1e21); border: max(2px, .5cqw) solid #3a4045; box-shadow: 0 10px 22px rgba(30,34,38,.25), inset 0 0 0 1px rgba(255,255,255,.06); color: #ffc04a; animation: m-bnin .8s .1s var(--m-ease) backwards; }
.m-bnlcd::after { content: ""; position: absolute; left: 30%; top: 100%; width: 1.5px; height: 6cqw; background: repeating-linear-gradient(#9aa1a6 0 3px, transparent 3px 6px); }
.m-bnlcd small { display: flex; justify-content: space-between; gap: 6px; font: 700 max(7px, 1.35cqw)/1 var(--m-body); letter-spacing: .08em; text-transform: uppercase; color: #8d969c; white-space: nowrap; }
.m-bnlcd em { font-style: normal; color: #7be08a; animation: m-bnstable 5s steps(1) infinite; }
.m-bndig { display: flex; align-items: flex-end; margin-top: .8cqw; font: 600 max(14px, 4.4cqw)/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: .02em; text-shadow: 0 0 10px rgba(255,192,74,.45); }
.m-bndig u { text-decoration: none; margin-left: .3em; font-size: .6em; line-height: 1.4; color: #e9a93a; }
.m-bnroll { display: inline-block; height: 1em; overflow: hidden; } .m-bnroll i { display: block; } .m-bnroll b { display: block; height: 1em; font-weight: inherit; }
.m-bnroll.r1 i { transform: translateY(-6em); animation: m-bnr1 5s infinite; } .m-bnroll.r2 i { transform: translateY(-43em); animation: m-bnr2 5s infinite; }
.m-bngauge { position: absolute; left: 75%; top: 7%; width: 10.5%; z-index: 3; overflow: visible; filter: drop-shadow(0 6px 8px rgba(30,34,38,.22)); }
.m-bngauge .o { fill: #c3c8cc; } .m-bngauge .f { fill: #fff; stroke: #e2e5e7; } .m-bngauge .arc { fill: none; stroke: #b07d12; stroke-width: 4; stroke-dasharray: 22 100; stroke-dashoffset: -78; } .m-bngauge .t path { stroke: #23272b; stroke-width: 2; stroke-linecap: round; }
.m-bnneedle { transform-box: view-box; transform-origin: 50px 54px; rotate: 20deg; animation: m-bnneedle 5s cubic-bezier(.4,1.5,.5,1) infinite; } .m-bnneedle path { stroke: #c0392b; stroke-width: 3; stroke-linecap: round; } .m-bnneedle circle { fill: #23272b; }
.m-bntag { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: .9cqw; padding: .9cqw 1.6cqw; border-radius: 99px; background: #fff; border: 1.5px solid #d8c597; box-shadow: 0 6px 14px rgba(30,34,38,.14); animation: m-rise .6s calc(.9s + var(--i, 0) * .12s) var(--m-ease) backwards; }
.m-bntag b { font: 700 max(9px, 1.9cqw)/1 var(--m-head); color: #1e2226; white-space: nowrap; font-variant-numeric: tabular-nums; }
.m-bntag.g1 { left: 7%; top: 85%; } .m-bntag.g2 { left: 28.5%; top: 85%; --i: 1; } .m-bntag.g4 { left: 55%; top: 85%; --i: 2; } .m-bntag.g3 { right: 2.5%; top: 38%; --i: 3; padding-left: .7cqw; }
.m-bntag.g1, .m-bntag.g2, .m-bntag.g4 { background: rgba(255,255,255,.85); border-color: rgba(35,39,43,.25); border-radius: 4px; }
.m-bnrotor { width: max(16px, 3.6cqw); height: max(16px, 3.6cqw); } .m-bnrotor .o { fill: #23272b; } .m-bnrotor circle:not(.o) { fill: #c3c8cc; } .m-bnrotor .h { fill: #b07d12 !important; }
.m-bnspin { transform-box: view-box; transform-origin: 20px 20px; animation: m-bnspin .7s linear infinite; }
@keyframes m-bnin { from { opacity: 0; transform: translateY(16px); } }
@keyframes m-bnscoop { 0%, 100% { rotate: -14deg; } 30%, 70% { rotate: -30deg; } }
@keyframes m-bnflow { to { background-position: 0 5px, 0 9px, 0 8px, 0 0; } }
@keyframes m-bnpouring { 0%, 18% { opacity: 0; transform: scaleY(.2); } 30%, 70% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; transform: none; } }
@keyframes m-bnpile { 0%, 20% { transform: scale(.5, .4); } 72%, 100% { transform: none; } }
@keyframes m-bnr1 { 0% { transform: translateY(0); animation-timing-function: steps(6, end); } 60%, 100% { transform: translateY(-6em); } }
@keyframes m-bnr2 { 0% { transform: translateY(0); animation-timing-function: steps(43, end); } 60%, 100% { transform: translateY(-43em); } }
@keyframes m-bnstable { 0% { opacity: .15; } 62%, 100% { opacity: 1; } }
@keyframes m-bnneedle { 0%, 8% { rotate: -120deg; } 40% { rotate: 46deg; } 55% { rotate: 14deg; } 70%, 92% { rotate: 20deg; } 100% { rotate: -120deg; } }
@keyframes m-bnspin { to { rotate: 360deg; } }
.m-bnreads > span { color: #7a5508; }
.m-bnreads a { padding: 4px 12px 4px 4px; border-radius: 6px; background: #fff; border: 1.5px solid #dcdfe1; color: var(--m-ink) !important; }
.m-bnreads b { display: grid; place-items: center; min-width: 46px; height: 28px; padding: 0 7px; border-radius: 4px; background: linear-gradient(#2c3135, #1b1e21); color: #ffc04a; font: 600 13px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.m-bnreads small { color: var(--m-body-ink); }
.m-bnreads a:is(:hover, :focus-visible) { border-color: #b07d12; box-shadow: 0 8px 18px rgba(30,34,38,.1); }
.m-bntile { padding: 14px 14px 12px 12px; border-radius: 10px; background: #fff; border: 1.5px solid #e1e3e5; color: var(--m-ink) !important; box-shadow: 0 10px 22px rgba(30,34,38,.06); overflow: hidden; }
.m-bntile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #b07d12; }
.m-bntile em { padding: 3px 6px; border-radius: 3px; background: #23272b; color: #ffc04a; font: 600 10.5px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .04em; }
.m-bnimg { width: 58px; height: 58px; padding: 4px; border-radius: 8px; background: #f2f3f4; }
.m-bntile .m-q8tx b { font: 700 15px/1.2 var(--m-head); color: var(--m-ink); padding-right: 40px; } .m-bntile .m-q8tx small { color: #7a5508; }
.m-bntile:is(:hover, :focus-visible) { transform: translateY(-4px); border-color: #b07d12; box-shadow: 0 16px 30px rgba(30,34,38,.12); }
body.hv-benchlab main section > .wrap > h2::after { content: ""; display: block; width: 140px; height: 8px; margin-top: 12px; background: linear-gradient(90deg, #b07d12 0 40px, transparent 40px 46px, #23272b 46px) 0 50% / 100% 3px no-repeat, repeating-linear-gradient(90deg, #9aa1a6 0 1.5px, transparent 1.5px 10px) 0 0 / 100% 8px no-repeat; }
body.hv-benchlab .pcard:hover, body.hv-benchlab .m-acard:hover { box-shadow: 0 0 0 2px #b07d12, 0 18px 40px rgba(30,34,38,.12); }
body.hv-benchlab .m-acard .m-art { background: linear-gradient(#e3e6e8 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, #e3e6e8 1px, transparent 1px) 0 0 / 22px 22px, #fcfcfb; }
body.hv-benchlab .m-cta .m-band { border-radius: 14px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), linear-gradient(120deg, #1b1e21, #3a4045); box-shadow: inset 0 0 0 1px rgba(176,125,18,.45); }
body.hv-benchlab .m-cta .m-band::before { width: 210px; height: 64px; right: 40px; top: 26px; border-radius: 8px; background: #23272b; box-shadow: inset 0 0 0 2px #3a4045; }
body.hv-benchlab .m-page-hero { background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 30px 30px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 30px 30px, linear-gradient(120deg, #1b1e21, #3a4045); } body.hv-benchlab .m-page-hero .eyebrow { color: #ffc04a; }
body.hv-benchlab footer.site { background: #1b1e21; color: #c9ced2; border: 0; } body.hv-benchlab footer.site nav a { color: #ffd27a; }
body.hv-benchlab .m-collage .m-card { border-radius: 12px; }

/* tare (CGOLDENWALL): a tiny balance LCD sits in the button; on hover it re-zeroes to 0.000 and counts up */
body.bv-tare .btn { border-radius: 8px; padding: 15px 24px; } body.bv-tare :is(.btn.accent, .pcard .btn, .m-btn-main, .m-white) { padding-right: 92px; }
body.bv-tare :is(.btn.accent, .pcard .btn, .m-btn-main, .m-white) .arr { display: none; }
body.bv-tare :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #c18d1f, #b07d12 55%, #9c6d0d); color: #1a1408; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px rgba(176,125,18,.28); }
body.bv-tare :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #a87810, #946609 55%, #7f5707); color: #fff; }
body.bv-tare :is(.btn.accent, .pcard .btn, .m-btn-main, .m-white)::before { content: "0.000 g"; position: absolute; right: 7px; top: 50%; z-index: 1; min-width: 62px; margin-top: -12px; padding: 0 7px; height: 24px; box-sizing: border-box; border-radius: 4px; pointer-events: none; background: #1b1e21; box-shadow: inset 0 0 0 1px #3a4045; color: #ffc04a; font: 600 11.5px/24px ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; text-align: right; letter-spacing: .02em; }
body.bv-tare :is(.btn.accent, .pcard .btn, .m-btn-main, .m-white):is(:hover, :focus-visible)::before { animation: m-tare 1.4s steps(1) forwards; }
@keyframes m-tare { 0% { content: "-.--- g"; } 12% { content: "0.000 g"; } 30% { content: "0.214 g"; } 44% { content: "0.586 g"; } 58% { content: "0.931 g"; } 72% { content: "1.207 g"; } 86%, 100% { content: "1.250 g"; } }
body.bv-tare .m-cta .btn.m-white:hover { color: var(--m-ink); }
body.bv-tare .pcard .btn { padding-right: 84px; }

/* gambit (WE Games): a walnut-and-maple board in perspective on green felt — pawns slide to e4/e5, knights hop their L to f3 and c6, a brass peg leaps along a cribbage strip, a glass marble rolls into the mancala store; real sets around the board */
body.hv-gambit .m-hero { color: #f6ecd9; background: radial-gradient(48% 60% at 76% 46%, rgba(255,240,200,.12), transparent 70%), radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 1.5px) 0 0 / 5px 5px, linear-gradient(160deg, #1f4d3b, #143529 70%, #10291f); }
body.hv-gambit .m-hero h1 { font-size: clamp(32px, 3.9vw, 56px) !important; line-height: 1.06 !important; letter-spacing: -.01em; color: #fbf3e2 !important; }
body.hv-gambit .m-hero .eyebrow { color: #e3c47e; letter-spacing: .2em; } body.hv-gambit .m-hero .sub { color: rgba(246,236,217,.88); }
body.hv-gambit .m-hero .m-chips span { background: rgba(255,255,255,.07); border-color: rgba(227,196,126,.35); color: #f6ecd9; }
body.hv-gambit .m-hero .m-btn-ghost { border-color: rgba(246,236,217,.7) !important; color: #f6ecd9 !important; } body.hv-gambit .m-hero .m-btn-ghost:hover { background: #f6ecd9 !important; color: #2a1c13 !important; }
.m-gm { aspect-ratio: 600 / 560; }
.m-gmdefs { position: absolute; width: 0; height: 0; overflow: hidden; }
.m-gmfelt { position: absolute; inset: 0; border-radius: 22px; background: radial-gradient(60% 55% at 50% 60%, #2a6650, transparent 75%), radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 1.6px) 0 0 / 4px 4px, #1b4535; box-shadow: inset 0 0 0 6px #6b3f22, inset 0 0 0 8px #b8913f, inset 0 0 40px rgba(0,0,0,.45), 0 30px 60px rgba(0,0,0,.35); }
.m-gmman { position: absolute; left: 3%; top: 4%; width: 33%; z-index: 2; rotate: -3deg; animation: m-gmin 1s .3s var(--m-ease) backwards; }
.m-gmmph { display: block; filter: drop-shadow(0 14px 12px rgba(0,0,0,.45)); }
.m-gmmarble { position: absolute; left: 76%; top: 12%; width: 6%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0 12%, rgba(255,255,255,0) 30%), radial-gradient(circle at 60% 66%, #2fb3c0, #0d6b78 70%); box-shadow: 0 3px 4px rgba(0,0,0,.35); animation: m-gmroll 7s 1.5s cubic-bezier(.45,0,.55,1) infinite; }
.m-gmset { position: absolute; right: 3%; top: 5%; width: 56%; z-index: 2; display: block; filter: drop-shadow(0 18px 16px rgba(0,0,0,.5)); animation: m-gmin 1s .1s var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-gmset:hover, .m-gmman:hover { transform: translateY(-5px); }
.m-gmtable { position: absolute; left: 6%; right: 16%; top: 41%; bottom: 3%; z-index: 3; display: grid; place-items: center; perspective: 110cqw; perspective-origin: 50% -20%; }
.m-gmboard { position: relative; width: 56cqw; aspect-ratio: 1; margin-top: -8cqw; transform-style: preserve-3d; transform: rotateX(56deg); border-radius: 1.2cqw; background: linear-gradient(135deg, #7a4a2b, #4f2e18); padding: 2.4cqw; box-sizing: border-box; box-shadow: 0 0 0 .5cqw #b8913f inset, 0 3cqw 4cqw rgba(0,0,0,.5); animation: m-gmboard 1.1s var(--m-ease) backwards; }
.m-gmsq { position: absolute; inset: 2.4cqw; background: repeating-linear-gradient(95deg, rgba(255,255,255,.05) 0 2px, transparent 2px 7px), conic-gradient(#ecd9b2 0 25%, #8a5532 0 50%, #ecd9b2 0 75%, #8a5532 0) 0 0 / 25% 25%; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.m-gmpc { position: absolute; left: calc(2.4cqw + var(--f) * (100% - 4.8cqw) / 8); bottom: calc(2.4cqw + var(--r) * (100% - 4.8cqw) / 8); width: calc((100% - 4.8cqw) / 8); height: calc((100% - 4.8cqw) / 8); transform-style: preserve-3d; }
.m-gmpc svg { position: absolute; left: 13%; top: 50%; width: 74%; height: auto; overflow: visible; transform-origin: 50% 100%; transform: translateY(-100%) rotateX(-56deg); }
.m-gmpc.w svg { fill: #f3e2bd; stroke: #8a6236; stroke-width: 1.4; } .m-gmpc.b svg { fill: #4a2516; stroke: #1f0e07; stroke-width: 1.4; }
.m-gmpc .eye { fill: currentColor; } .m-gmpc.w { color: #6b3f22; } .m-gmpc.b { color: #e3c47e; }
.m-gmpc.w.pe { animation: m-gmwp 12s 1.2s ease-in-out infinite; } .m-gmpc.b.pe { animation: m-gmbp 12s 1.2s ease-in-out infinite; }
.m-gmpc.w.ng { animation: m-gmwn 12s 1.2s ease-in-out infinite; } .m-gmpc.b.nb { animation: m-gmbn 12s 1.2s ease-in-out infinite; }
.m-gmcrib { position: absolute; right: 3%; top: 45%; width: 7%; height: auto; z-index: 4; overflow: visible; rotate: 5deg; filter: drop-shadow(0 10px 8px rgba(0,0,0,.45)); animation: m-gmin 1s .5s var(--m-ease) backwards; }
.m-gmcrib .wd { fill: #6b3f22; stroke: #4f2e18; stroke-width: 2; } .m-gmcrib .gr { stroke: rgba(255,226,170,.2); stroke-width: 1; } .m-gmcrib .hl circle { fill: #2a1609; }
.m-gmcrib .pg { fill: #d9b45a; stroke: #8a6a2a; stroke-width: .8; } .m-gmcrib .sh { fill: rgba(0,0,0,.35); }
.m-gmpeg { animation: m-gmpeg 9s 1.8s ease-in-out infinite; }
@keyframes m-gmin { from { opacity: 0; transform: translateY(20px); } }
@keyframes m-gmboard { from { opacity: 0; transform: rotateX(70deg) translateY(10%); } }
@keyframes m-gmwp { 0%, 4% { transform: none; } 12%, 84% { transform: translateY(-200%); } 92%, 100% { transform: none; } }
@keyframes m-gmbp { 0%, 14% { transform: none; } 22%, 84% { transform: translateY(200%); } 92%, 100% { transform: none; } }
@keyframes m-gmwn { 0%, 28% { transform: none; } 33% { transform: translate3d(-50%, -100%, 6cqw); } 38%, 84% { transform: translate3d(-100%, -200%, 0); } 88% { transform: translate3d(-50%, -100%, 6cqw); } 92%, 100% { transform: none; } }
@keyframes m-gmbn { 0%, 46% { transform: none; } 51% { transform: translate3d(50%, 100%, 6cqw); } 56%, 84% { transform: translate3d(100%, 200%, 0); } 88% { transform: translate3d(50%, 100%, 6cqw); } 92%, 100% { transform: none; } }
@keyframes m-gmpeg { 0%, 10% { transform: none; } 16% { transform: translate(-7px, -30px); } 22%, 46% { transform: translate(0, -59px); } 52% { transform: translate(-7px, -89px); } 58%, 86% { transform: translate(0, -118px); } 94%, 100% { transform: none; opacity: 1; } 90% { opacity: 0; } }
@keyframes m-gmroll { 0% { transform: none; opacity: 0; } 6% { opacity: 1; } 60% { transform: translate(-920%, 990%) rotate(-540deg); } 70% { transform: translate(-920%, 1030%) scale(.8) rotate(-560deg); opacity: 1; } 84%, 100% { transform: translate(-920%, 1030%) scale(.8); opacity: 0; } }
.m-gmsizes > span { color: #e3c47e; }
.m-gmsizes a { padding: 4px 12px 4px 4px; border-radius: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(227,196,126,.4); color: #fbf3e2 !important; }
.m-gmsizes b { display: grid; place-items: center; min-width: 44px; height: 28px; padding: 0 7px; border-radius: 4px; background: conic-gradient(#ecd9b2 0 25%, #d9c194 0 50%, #ecd9b2 0 75%, #d9c194 0) 0 0 / 14px 14px; color: #2a1c13; font: 700 14px/1 var(--m-head); box-shadow: inset 0 0 0 1.5px #b8913f; }
.m-gmsizes small { color: rgba(246,236,217,.86); }
.m-gmsizes a:is(:hover, :focus-visible) { border-color: #e3c47e; background: rgba(255,255,255,.12); }
.m-gmtile { padding: 12px 14px 12px 12px; border-radius: 10px; color: #2a1c13 !important; background: #f1e2c4; border: 2px solid #b8913f; box-shadow: 0 12px 24px rgba(0,0,0,.25); }
.m-gmtile:nth-child(even) { background: #7a4a2b; color: #fbf3e2 !important; }
.m-gmtile em { font: 400 22px/1 Georgia, "Segoe UI Symbol", "Apple Symbols", serif; color: #b8913f; }
.m-gmimg { width: 58px; height: 58px; padding: 4px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 2px rgba(184,145,63,.6); }
.m-gmtile .m-q8tx b { font: 700 15.5px/1.2 var(--m-head); padding-right: 24px; } .m-gmtile .m-q8tx small { color: #6b3f22; } .m-gmtile:nth-child(even) .m-q8tx small { color: #f1d9a6; }
.m-gmtile:is(:hover, :focus-visible) { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 18px 32px rgba(0,0,0,.32); }
body.hv-gambit .m-gmcats { background: transparent; }
body.hv-gambit main section > .wrap > h2::after { content: ""; display: block; width: 128px; height: 16px; margin-top: 12px; background: conic-gradient(#6b3f22 0 25%, #ecd9b2 0 50%, #6b3f22 0 75%, #ecd9b2 0) 0 0 / 16px 16px; border-radius: 2px; box-shadow: 0 0 0 2px #b8913f; }
body.hv-gambit .pcard:hover, body.hv-gambit .m-acard:hover { box-shadow: 0 0 0 2px #b8913f, 0 18px 40px rgba(42,28,19,.14); }
body.hv-gambit .m-acard .m-art { background: radial-gradient(60% 60% at 50% 45%, #fffaf0, #efe2c8); }
body.hv-gambit .m-cta .m-band { border-radius: 16px; background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 1.6px) 0 0 / 5px 5px, linear-gradient(120deg, #143529, #1f4d3b); box-shadow: inset 0 0 0 4px #6b3f22, inset 0 0 0 6px #b8913f; }
body.hv-gambit .m-cta .m-band::before { width: 176px; height: 176px; right: 30px; top: -50px; border-radius: 6px; opacity: .25; background: conic-gradient(#ecd9b2 0 25%, transparent 0 50%, #ecd9b2 0 75%, transparent 0) 0 0 / 44px 44px; rotate: 12deg; }
body.hv-gambit .m-page-hero { background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 1.6px) 0 0 / 5px 5px, linear-gradient(120deg, #10291f, #1f4d3b); } body.hv-gambit .m-page-hero .eyebrow { color: #e3c47e; }
body.hv-gambit footer.site { background: #2a1c13; color: #e8dcc6; border: 0; } body.hv-gambit footer.site nav a { color: #e3c47e; }
body.hv-gambit .m-collage .m-card { border-radius: 10px; box-shadow: 0 0 0 4px #b8913f, 0 30px 60px rgba(0,0,0,.3); }

/* checkmate (WE Games): walnut; on hover the small king at the right end tips over and the button flips to the light maple square */
body.bv-checkmate .btn { border-radius: 6px; padding: 15px 46px 15px 24px; }
body.bv-checkmate .btn .arr { display: none; }
body.bv-checkmate :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #7a4a2b, #6b3f22 55%, #5a341c); color: #fbf3e2; box-shadow: inset 0 0 0 1.5px rgba(184,145,63,.65), 0 10px 22px rgba(42,28,19,.28); transition: background .35s, color .35s, transform .2s var(--m-ease), box-shadow .3s; }
body.bv-checkmate :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: #ecd9b2; color: #2a1c13; box-shadow: inset 0 0 0 1.5px #b8913f, 0 14px 28px rgba(42,28,19,.22); }
body.bv-checkmate .btn::before { content: ""; position: absolute; right: 17px; top: 50%; z-index: 1; width: 12px; height: 19px; margin-top: -10px; pointer-events: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Cpath d='M18.5 2h3v4h4v3h-4v4h-3V9h-4V6h4Z'/%3E%3Cpath d='M20 13c6 0 10 3 10 7 0 3-2 5-4 6l3 14H11l3-14c-2-1-4-3-4-6 0-4 4-7 10-7Z'/%3E%3Cpath d='M8 40h24l3 9H5Z'/%3E%3Crect x='3' y='49' width='34' height='7' rx='2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Cpath d='M18.5 2h3v4h4v3h-4v4h-3V9h-4V6h4Z'/%3E%3Cpath d='M20 13c6 0 10 3 10 7 0 3-2 5-4 6l3 14H11l3-14c-2-1-4-3-4-6 0-4 4-7 10-7Z'/%3E%3Cpath d='M8 40h24l3 9H5Z'/%3E%3Crect x='3' y='49' width='34' height='7' rx='2'/%3E%3C/svg%3E") center / contain no-repeat; transform-origin: 85% 100%; transition: transform .5s cubic-bezier(.5,-.4,.6,1.4); }
body.bv-checkmate .btn:is(:hover, :focus-visible)::before { transform: rotate(84deg) translate(2px, -3px); }
body.bv-checkmate .btn::after { background: conic-gradient(rgba(107,63,34,.14) 0 25%, transparent 0 50%, rgba(107,63,34,.14) 0 75%, transparent 0) 0 0 / 16px 16px; transform: none; opacity: 0; transition: opacity .35s; }
body.bv-checkmate .btn:is(:hover, :focus-visible)::after { transform: none; opacity: 1; }
body.bv-checkmate .m-cta .btn.m-white:hover { color: var(--m-ink); }

/* summit (CAMEL CROWN): layered ridges drift at different speeds, snow falls on the left half and sun-lit dust drifts on the right, a tent pitches itself, sandal prints walk the trail up to it; real jacket and sandal cut-outs */
body.hv-summit .m-hero { background: radial-gradient(40% 50% at 86% 20%, rgba(255,214,150,.45), transparent 70%), linear-gradient(90deg, #eef5f8, #f6f2ea 55%, #f8eddc); }
body.hv-summit .m-hero h1 { font-size: clamp(32px, 3.7vw, 54px) !important; line-height: 1 !important; letter-spacing: -.01em; text-transform: uppercase; }
body.hv-summit .m-hero .eyebrow { color: #8a4119; letter-spacing: .2em; }
.m-sm { aspect-ratio: 600 / 540; }
.m-smsky { position: absolute; inset: 0; border-radius: 22px; background: linear-gradient(180deg, rgba(143,195,217,.35), transparent 55%), linear-gradient(90deg, #d4e8f2, #ebf1f2 45%, #f8e7c9); box-shadow: 0 30px 60px rgba(34,39,43,.16); }
.m-smsvg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 22px; clip-path: inset(0 round 22px); }
.m-smr { animation: m-smdrift 26s ease-in-out infinite alternate; } .m-smr.r1 { --dx: 6px; animation-duration: 34s; } .m-smr.r2 { --dx: 12px; } .m-smr.r3 { --dx: 20px; animation-duration: 18s; } .m-smr.r4 { animation: none; }
.m-smr .cap { fill: #fff; opacity: .95; }
.m-smsun circle { fill: #ffd38a; } .m-smrays { transform-box: view-box; transform-origin: 530px 78px; animation: m-smspin 40s linear infinite; } .m-smrays path { stroke: #f2b24f; stroke-width: 3; stroke-linecap: round; }
.m-smtent .sh { fill: rgba(34,39,43,.2); } .m-smtent .fly { fill: #c0622b; stroke: #8a4119; stroke-width: 1.5; transform-box: fill-box; transform-origin: 50% 0; animation: m-smfly 12s 1s ease-in-out infinite; }
.m-smtent .door { fill: #6e3214; animation: m-smfade 12s 1s ease-in-out infinite; } .m-smtent .flag { fill: #2f6f8f; transform-box: fill-box; transform-origin: 0 100%; animation: m-smflag 12s 1s ease-in-out infinite; }
.m-smtent .pole { fill: none; stroke: #22272b; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; animation: m-smpole 12s 1s ease-in-out infinite; } .m-smtent .pole.p2 { stroke: #4a5258; opacity: .7; }
.m-smtent .gl { fill: none; stroke: #22272b; stroke-width: 1; stroke-dasharray: 100; animation: m-smpole 12s 1.6s ease-in-out infinite; }
.m-smtrail { fill: none; stroke: #8a6a4a; stroke-width: 2; stroke-dasharray: 4 7; stroke-linecap: round; opacity: .55; }
.m-smprint { fill: #6b4a2e; opacity: .7; animation: m-smstep 9s calc(1.6s + var(--i) * .45s) ease-in-out infinite; }
.m-smsnow, .m-smdust { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; pointer-events: none; }
.m-smsnow i { position: absolute; left: var(--x); top: -2%; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 3px rgba(80,120,150,.6); opacity: .95; animation: m-smsnow var(--t) var(--d) linear infinite backwards; }
.m-smdust i { position: absolute; left: var(--x); top: var(--y); width: 4px; height: 4px; border-radius: 50%; background: rgba(255,214,150,.95); box-shadow: 0 0 6px rgba(255,190,90,.9); opacity: .7; animation: m-smdust var(--t) var(--d) ease-in-out infinite; }
.m-smshell, .m-smpuff, .m-smsand, .m-smsw { position: absolute; display: block; z-index: 3; transition: transform .45s var(--m-ease); }
.m-smshell { left: 3%; top: 8%; width: 40%; filter: drop-shadow(0 18px 16px rgba(34,39,43,.32)); transform-origin: 50% 0; animation: m-smin 1s .1s var(--m-ease) backwards, m-smsway 7s 1.2s ease-in-out infinite; }
.m-smpuff { left: 34%; top: 29%; width: 21%; z-index: 4; filter: drop-shadow(0 14px 12px rgba(34,39,43,.3)); transform-origin: 50% 0; animation: m-smin 1s .3s var(--m-ease) backwards, m-smsway 8s 1.6s ease-in-out infinite reverse; }
.m-smsand { left: 40%; bottom: 3%; width: 24%; z-index: 5; filter: drop-shadow(0 12px 10px rgba(34,39,43,.3)); animation: m-smin 1s .45s var(--m-ease) backwards; }
.m-smsw { right: 2%; bottom: 7%; width: 21%; z-index: 5; filter: drop-shadow(0 12px 10px rgba(34,39,43,.3)); animation: m-smin 1s .55s var(--m-ease) backwards; }
:is(.m-smshell, .m-smpuff, .m-smsand, .m-smsw):hover { transform: translateY(-6px); }
@keyframes m-smin { from { opacity: 0; transform: translateY(20px); } }
@keyframes m-smsway { 0%, 100% { rotate: 0deg; } 50% { rotate: 1.4deg; } }
@keyframes m-smdrift { from { transform: translateX(calc(var(--dx, 10px) * -1)); } to { transform: translateX(var(--dx, 10px)); } }
@keyframes m-smspin { to { rotate: 360deg; } }
@keyframes m-smpole { 0% { stroke-dashoffset: 100; opacity: 1; } 14%, 86% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes m-smfly { 0%, 12% { transform: scaleY(0); opacity: 0; } 15% { opacity: 1; } 26% { transform: scaleY(1.06); } 30%, 86% { transform: none; opacity: 1; } 94%, 100% { transform: none; opacity: 0; } }
@keyframes m-smfade { 0%, 26% { opacity: 0; } 32%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes m-smflag { 0%, 30% { transform: scale(0); } 36% { transform: none; } 40% { transform: skewY(-8deg); } 44%, 86% { transform: none; } 94%, 100% { transform: scale(0); } }
@keyframes m-smstep { 0% { opacity: 0; } 6%, 55% { opacity: .7; } 70%, 100% { opacity: 0; } }
@keyframes m-smsnow { from { transform: translate(0, 0); } to { transform: translate(18px, 92cqw); } }
@keyframes m-smdust { 0%, 100% { transform: translate(0, 0); opacity: .2; } 50% { transform: translate(-14px, -18px); opacity: .9; } }
.m-smspecs > span { color: #8a4119; }
.m-smspecs a { padding: 4px 12px 4px 4px; border-radius: 999px; background: #fff; border: 1.5px solid #e2d6c4; color: var(--m-ink) !important; }
.m-smspecs b { display: grid; place-items: center; min-width: 40px; height: 28px; padding: 0 9px; border-radius: 999px; background: #22272b; color: #fff; font: 700 13.5px/1 var(--m-head); letter-spacing: .02em; }
.m-smspecs a:nth-of-type(-n+2) b { background: #2f6f8f; } .m-smspecs a:nth-of-type(n+3):nth-of-type(-n+4) b { background: #a8501f; }
.m-smspecs a:is(:hover, :focus-visible) { border-color: #a8501f; box-shadow: 0 8px 18px rgba(34,39,43,.12); }
.m-smtile { padding: 14px 14px 12px 12px; border-radius: 12px; background: #fff; border: 1.5px solid #e2d6c4; color: var(--m-ink) !important; box-shadow: 0 10px 22px rgba(34,39,43,.06); overflow: hidden; }
.m-smtile::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: repeating-linear-gradient(90deg, #c0622b 0 6px, transparent 6px 11px); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--m-ease); }
.m-smtile em { display: inline-flex; align-items: center; gap: 4px; font: 700 11px/1 var(--m-head); letter-spacing: .1em; color: #8a4119; } .m-smtile em svg { width: 14px; height: 10px; fill: #8fc3d9; stroke: #2f6f8f; stroke-width: 1.2; }
.m-smimg { width: 58px; height: 58px; padding: 4px; border-radius: 10px; background: linear-gradient(#eef5f8, #f8eddc); }
.m-smtile .m-q8tx b { font: 700 15.5px/1.15 var(--m-head); text-transform: uppercase; letter-spacing: .01em; padding-right: 34px; color: var(--m-ink); } .m-smtile .m-q8tx small { color: #8a4119; }
.m-smtile:is(:hover, :focus-visible) { transform: translateY(-4px); border-color: #c0622b; box-shadow: 0 16px 30px rgba(34,39,43,.12); } .m-smtile:is(:hover, :focus-visible)::after { transform: none; }
body.hv-summit main h2 { text-transform: uppercase; letter-spacing: .01em; }
body.hv-summit main section > .wrap > h2::after { content: ""; display: block; width: 150px; height: 14px; margin-top: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 14'%3E%3Cpath d='M0 13 18 4l10 6 14-9 16 12' fill='none' stroke='%23c0622b' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M62 9h88' stroke='%2322272b' stroke-width='2' stroke-dasharray='5 5'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
body.hv-summit .pcard:hover, body.hv-summit .m-acard:hover { box-shadow: 0 0 0 2px #c0622b, 0 18px 40px rgba(34,39,43,.12); }
body.hv-summit .m-acard .m-art { background: linear-gradient(180deg, #eef5f8, #f8eddc); }
body.hv-summit .m-cta .m-band { border-radius: 18px; background: linear-gradient(170deg, transparent 58%, rgba(255,255,255,.07) 58% 72%, transparent 72%), linear-gradient(200deg, transparent 64%, rgba(0,0,0,.14) 64%), linear-gradient(120deg, #22272b, #3d4a52 60%, #8a4119); }
body.hv-summit .m-cta .m-band::before { width: 120px; height: 120px; right: 60px; top: -40px; background: #ffd38a; opacity: .35; }
body.hv-summit .m-page-hero { background: linear-gradient(170deg, transparent 60%, rgba(255,255,255,.06) 60% 74%, transparent 74%), linear-gradient(120deg, #22272b, #3d4a52 60%, #8a4119); } body.hv-summit .m-page-hero .eyebrow { color: #ffd38a; }
body.hv-summit footer.site { background: #22272b; color: #d7dcdf; border: 0; } body.hv-summit footer.site nav a { color: #ffd38a; }
body.hv-summit .m-collage .m-card { border-radius: 16px; }

/* trailhead (CAMEL CROWN): on hover a dashed trail draws across the bottom of the button up to a small peak at the right end */
body.bv-trailhead .btn { border-radius: 10px; padding: 15px 50px 15px 24px; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; }
body.bv-trailhead .btn .arr { display: none; }
body.bv-trailhead :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #b45a24, #a8501f 55%, #94461a); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 22px rgba(168,80,31,.3); }
body.bv-trailhead :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #8f4519, #7c3b15 55%, #6c3312); color: #fff; }
body.bv-trailhead .btn::before { content: ""; position: absolute; right: 15px; top: 50%; z-index: 1; width: 20px; height: 14px; margin-top: -8px; pointer-events: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M0 14 7 3l3 4 3-7 7 14Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M0 14 7 3l3 4 3-7 7 14Z'/%3E%3C/svg%3E") center / contain no-repeat; transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.3,1.7,.5,1) .35s; }
body.bv-trailhead .btn:is(:hover, :focus-visible)::before { transform: translateY(-2px) scale(1.2); }
body.bv-trailhead .btn::after { inset: auto 46px 7px 16px; z-index: 1; height: 2px; background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 11px); opacity: .9; transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--m-ease); }
body.bv-trailhead .btn:is(:hover, :focus-visible)::after { transform: scaleX(1); }
body.bv-trailhead .m-cta .btn.m-white:hover { color: var(--m-ink); }

@media (prefers-reduced-motion: reduce) { .m-smsnow i { top: var(--x); } .m-bnstream { opacity: 1; } }
/* phones: batch 12.11 (3) heroes stack */
@media (max-width: 900px) {
  :is(body.hv-benchlab, body.hv-gambit, body.hv-summit) .m-hero { min-height: 0; } :is(body.hv-benchlab, body.hv-gambit, body.hv-summit) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr); }
  .m-bncats, .m-gmcats, .m-smcats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-bncats, .m-gmcats, .m-smcats) > a:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .m-bntile, .m-gmtile, .m-smtile { gap: 9px; padding: 10px; } .m-bnimg, .m-gmimg, .m-smimg { width: 44px; height: 44px; }
  :is(.m-bntile, .m-gmtile, .m-smtile) .m-q8tx b { font-size: 13px; padding-right: 0; } :is(.m-bntile, .m-gmtile, .m-smtile) em { display: none; }
  body.bv-tare .pcard .btn { padding-right: 22px; } body.bv-tare .pcard .btn::before { display: none; }
}

/* ===== batch 12.11.2026 (4): vanity/pat (MISSHA), hammam/fold (Arus), patchfit/peel (JINYU-SEGA) ===== */
:is(body.hv-vanity, body.hv-hammam, body.hv-patchfit) .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); color: var(--m-ink); }
:is(body.hv-vanity, body.hv-hammam, body.hv-patchfit) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:is(body.hv-vanity, body.hv-hammam, body.hv-patchfit) .m-hero .m-copy > * { animation: m-rise .8s var(--m-ease) both; }
:is(body.hv-vanity, body.hv-hammam, body.hv-patchfit) .m-hero .m-copy > :nth-child(3) { animation-delay: .08s; } :is(body.hv-vanity, body.hv-hammam, body.hv-patchfit) .m-hero .m-copy > :nth-child(4) { animation-delay: .16s; } :is(body.hv-vanity, body.hv-hammam, body.hv-patchfit) .m-hero .m-copy > :nth-child(n+5) { animation-delay: .24s; }
:is(body.hv-vanity, body.hv-hammam, body.hv-patchfit) .m-hero h1 { color: var(--m-ink) !important; text-wrap: balance; max-width: 18ch; font-size: clamp(34px, 4vw, 58px) !important; line-height: 1.05 !important; }
:is(body.hv-vanity, body.hv-hammam, body.hv-patchfit) .m-hero .sub { color: var(--m-body-ink); }
:is(body.hv-vanity, body.hv-hammam, body.hv-patchfit) .m-hero .bgcredit { display: none; }
:is(body.hv-vanity, body.hv-hammam, body.hv-patchfit) .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: var(--m-ink) !important; background: rgba(255,255,255,.7) !important; }
:is(body.hv-vanity, body.hv-hammam, body.hv-patchfit) .m-hero .m-btn-ghost:hover { background: var(--m-ink) !important; color: #fff !important; }
:is(body.hv-vanity, body.hv-hammam, body.hv-patchfit) .m-hero .m-chips span { background: #fff; color: var(--m-ink); border: 1.5px solid color-mix(in srgb, var(--m-ink) 14%, transparent); backdrop-filter: none; }
:is(.m-vn, .m-hm, .m-pf) { position: relative; width: min(100%, 600px); justify-self: center; container-type: inline-size; }
:is(.m-vn, .m-hm, .m-pf) a { -webkit-tap-highlight-color: transparent; }
:is(.m-vn, .m-hm, .m-pf) img { display: block; width: 100%; height: auto; border-radius: 0; }
:is(.m-vncats, .m-hmcats, .m-pfcats) { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; padding: 10px clamp(18px, 4vw, 72px) clamp(26px, 4vh, 44px); }
:is(.m-vntile, .m-hmtile, .m-pftile) { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; padding: 14px 14px 12px 12px; background: #fff; color: var(--m-ink) !important; overflow: hidden; animation: m-rise .7s calc(.8s + var(--i, 0) * .08s) var(--m-ease) backwards; transition: transform .4s var(--m-ease), border-color .3s, box-shadow .3s; }
:is(.m-vnimg, .m-hmimg, .m-pfimg) { flex: none; display: block; overflow: hidden; width: 58px; height: 58px; padding: 4px; }
:is(.m-vnimg, .m-hmimg, .m-pfimg) img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; transition: transform .45s var(--m-ease); }
:is(.m-vntile, .m-hmtile, .m-pftile):hover :is(.m-vnimg, .m-hmimg, .m-pfimg) img { transform: scale(1.08) rotate(-4deg); }
:is(.m-vntile, .m-hmtile, .m-pftile):focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; }
:is(.m-vntile, .m-hmtile, .m-pftile):is(:hover, :focus-visible) { transform: translateY(-4px); }
:is(.m-vntile, .m-hmtile, .m-pftile) .m-q8tx b { font: 700 15.5px/1.2 var(--m-head); color: var(--m-ink); padding-right: 22px; }
:is(.m-vntile, .m-hmtile, .m-pftile) em { position: absolute; right: 11px; top: 10px; font-style: normal; }
:is(.m-vnspecs, .m-hmspecs, .m-pfspecs) { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -6px 0 18px; }
:is(.m-vnspecs, .m-hmspecs, .m-pfspecs) > span { flex-basis: 100%; margin: 0 0 2px; font: 700 12px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; }
:is(.m-vnspecs, .m-hmspecs, .m-pfspecs) a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; background: #fff; color: var(--m-ink) !important; text-decoration: none; transition: background .25s, border-color .25s, transform .3s var(--m-ease), box-shadow .3s; animation: m-rise .6s calc(.45s + var(--i, 0) * .06s) var(--m-ease) backwards; }
:is(.m-vnspecs, .m-hmspecs, .m-pfspecs) a:is(:hover, :focus-visible) { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,24,40,.1); }
:is(.m-vnspecs, .m-hmspecs, .m-pfspecs) b { display: grid; place-items: center; min-width: 40px; height: 28px; padding: 0 10px; color: #fff; font: 700 13px/1 var(--m-head); white-space: nowrap; }
:is(.m-vnspecs, .m-hmspecs, .m-pfspecs) small { font: 600 12.5px/1 var(--m-body); white-space: nowrap; color: var(--m-body-ink); }
:is(body.hv-vanity, body.hv-hammam, body.hv-patchfit) .m-acard .m-art { position: relative; background: #fff !important; border-bottom: 1px solid color-mix(in srgb, var(--m-ink) 7%, transparent); }
:is(body.hv-vanity, body.hv-hammam, body.hv-patchfit) .m-acard .m-art img { position: absolute; left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); max-height: none; object-fit: contain; border-radius: 0; }
.m-footnote { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; opacity: .9; max-width: 80ch; }

/* vanity (MISSHA): blush marble with a milk-glass shelf; a cushion lid flips open and a puff pats leaving a dewy shimmer, a BB shade ladder slides out (real shade names, linked), a dropper lets a droplet fall into a glass dish; real product cut-outs */
body.hv-vanity .m-hero { background: radial-gradient(46% 60% at 80% 36%, #fff, transparent 70%), radial-gradient(30% 40% at 6% 92%, rgba(232,167,180,.28), transparent 70%), linear-gradient(120deg, #fcf1f1, #fdf8f6 50%, #f8e9ec); }
body.hv-vanity .m-hero h1 { font-weight: 600 !important; letter-spacing: -.015em; }
body.hv-vanity .m-hero .eyebrow { color: #9c2846; letter-spacing: .22em; }
.m-vn { aspect-ratio: 600 / 560; }
.m-vnwall { position: absolute; inset: 0; border-radius: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 560' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23d9b3bd' opacity='.55'%3E%3Cpath d='M-20 120C80 90 140 170 240 130S420 60 620 110' stroke-width='1.3'/%3E%3Cpath d='M-20 330C100 280 200 360 330 310S500 260 620 300' stroke-width='.9'/%3E%3Cpath d='M120 -10C150 80 110 160 170 260S150 400 210 560' stroke-width='.7'/%3E%3Cpath d='M460 -10C420 90 500 150 450 240' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100%, linear-gradient(160deg, #fcf2f3, #f5e1e6 60%, #efd2da); box-shadow: 0 30px 60px rgba(58,31,43,.14), inset 0 0 0 1px rgba(194,58,91,.08); }
.m-vnmirror { position: absolute; left: 3%; top: 3%; width: 52%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff 0, #fdf6f7 42%, #f1dfe4 74%); box-shadow: inset 0 0 0 max(4px, 1.2cqw) #fff, inset 0 0 0 max(5px, 1.6cqw) #ead0d7, 0 20px 40px rgba(58,31,43,.08); }
.m-vnmirror b { position: absolute; left: 50%; top: 50%; width: 2.6cqw; height: 2.6cqw; margin: -1.3cqw 0 0 -1.3cqw; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #ffe9c8 60%, #f3c98f); box-shadow: 0 0 8px rgba(255,214,150,.9); transform: rotate(var(--a)) translateY(-27.4cqw); animation: m-vnbulb 3.2s calc(var(--i) * .25s) ease-in-out infinite; }
.m-vnbb, .m-vnserum, .m-vnbalm { position: absolute; display: block; z-index: 3; transition: transform .45s var(--m-ease); }
.m-vnbb { left: 6%; bottom: 26%; width: 27%; filter: drop-shadow(0 16px 14px rgba(58,31,43,.25)); animation: m-vnin 1s .1s var(--m-ease) backwards; }
.m-vnserum { left: 33%; bottom: 26%; width: 9%; filter: drop-shadow(0 14px 10px rgba(58,31,43,.28)); animation: m-vnin 1s .3s var(--m-ease) backwards; }
.m-vnbalm { right: 4%; bottom: 25.5%; width: 19%; filter: drop-shadow(0 12px 10px rgba(58,31,43,.2)); animation: m-vnin 1s .45s var(--m-ease) backwards; }
:is(.m-vnbb, .m-vnserum, .m-vnbalm):hover { transform: translateY(-6px); }
.m-vnshelf { position: absolute; left: 1.5%; right: 1.5%; top: 73%; height: 4.5%; z-index: 2; border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,236,239,.9) 45%, rgba(226,194,204,.95)); box-shadow: inset 0 1px 0 #fff, 0 18px 30px rgba(58,31,43,.14); }
.m-vndrop { position: absolute; left: 41%; top: 27%; width: 15%; height: auto; z-index: 3; overflow: visible; }
.m-vnpip { animation: m-vnpip 4s 1s ease-in-out infinite; transform-box: view-box; transform-origin: 50px 0; }
.m-vndrop .bulb { fill: #3a1f2b; } .m-vndrop .glass { fill: rgba(255,255,255,.6); stroke: #d9b3bd; stroke-width: 1.5; } .m-vndrop .liq { fill: #f0c27e; opacity: .85; }
.m-vndrop .dish { fill: rgba(255,255,255,.75); stroke: #e3c3cc; stroke-width: 1.5; } .m-vndrop .dtop { fill: rgba(240,194,126,.4); stroke: #f4e3e8; stroke-width: 1.5; }
.m-vndr { fill: #f0c27e; stroke: rgba(255,255,255,.8); stroke-width: 1; transform-box: fill-box; transform-origin: 50% 0; animation: m-vndr 4s 1s cubic-bezier(.5,0,1,.6) infinite; }
.m-vnrip { fill: none; stroke: #e8b770; stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; animation: m-vnrip 4s 1s ease-out infinite; } .m-vnrip.r2 { animation-delay: 1.25s; }
.m-vnlad { position: absolute; left: 57%; right: 2.5%; top: 4%; z-index: 4; display: flex; flex-direction: column; gap: .6cqw; }
.m-vnlad a { display: grid; grid-template-columns: 7.5cqw minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 1.6cqw; padding: .5cqw 1.4cqw .5cqw .5cqw; border-radius: 99px; background: rgba(255,255,255,.82); border: 1px solid rgba(194,58,91,.14); text-decoration: none; color: var(--m-ink) !important; box-shadow: 0 4px 10px rgba(58,31,43,.05); animation: m-vnslide .7s calc(.6s + var(--i) * .08s) var(--m-ease) backwards; transition: transform .3s var(--m-ease), background .3s, border-color .3s; }
.m-vnlad i { grid-row: 1 / 3; height: 3.4cqw; border-radius: 99px 45% 60% 99px; background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.55), transparent 55%), var(--c); box-shadow: inset 0 -1px 2px rgba(0,0,0,.12); transform-origin: 0 50%; transition: transform .35s var(--m-ease); }
.m-vnlad b { font: 700 max(10px, 1.9cqw)/1.05 var(--m-head); color: var(--m-ink); }
.m-vnlad small { font: 500 max(9.5px, 1.75cqw)/1.1 var(--m-body); color: #6e4a5a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-vnlad a:is(:hover, :focus-visible) { transform: translateX(-5px); background: #fff; border-color: #c23a5b; } .m-vnlad a:is(:hover, :focus-visible) i { transform: scaleX(1.18); }
.m-vnlad a:focus-visible { outline: 2px solid #c23a5b; outline-offset: 2px; }
.m-vncomp { position: absolute; left: 3%; bottom: 2%; width: 32%; z-index: 5; perspective: 90cqw; animation: m-vnin 1s .35s var(--m-ease) backwards; }
.m-vncush { display: block; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 18px 30px rgba(58,31,43,.18), 0 0 0 1px rgba(194,58,91,.1); }
.m-vnlid { position: absolute; left: 4%; width: 74%; top: 2%; aspect-ratio: 1; border-radius: 50%; z-index: 2; background: radial-gradient(circle at 35% 30%, #fff, #f9e1e8 45%, #f0c4d2); box-shadow: inset 0 0 0 3px rgba(255,255,255,.7), 0 6px 14px rgba(58,31,43,.2); transform-origin: 50% 0; transform: rotateX(-84deg); animation: m-vnlid 9s 1.2s ease-in-out infinite; pointer-events: none; }
.m-vnpuff { position: absolute; left: 22%; top: 16%; width: 34%; aspect-ratio: 1; z-index: 3; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #f5f0f2 60%, #e3d9dd); box-shadow: 0 10px 14px rgba(58,31,43,.22); opacity: 0; animation: m-vnpuff 9s 1.2s ease-in-out infinite; pointer-events: none; }
.m-vnpuff::after { content: ""; position: absolute; left: 12%; right: 12%; top: 40%; height: 18%; border-radius: 4px; background: #22263a; }
.m-vndew { position: absolute; left: 6%; top: 6%; width: 68%; aspect-ratio: 1; z-index: 2; pointer-events: none; }
.m-vndew i { position: absolute; left: var(--x); top: var(--y); width: 2.4cqw; height: 2.4cqw; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 3px rgba(255,214,170,.9)); opacity: 0; animation: m-vndew 9s calc(1.2s + var(--i) * .12s) ease-in-out infinite; }
@keyframes m-vnin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-vnslide { from { opacity: 0; transform: translateX(-24px); } }
@keyframes m-vnbulb { 0%, 100% { opacity: .75; } 50% { opacity: 1; box-shadow: 0 0 14px rgba(255,214,150,1); } }
@keyframes m-vnlid { 0%, 8% { transform: rotateX(0); } 18%, 84% { transform: rotateX(-84deg); } 94%, 100% { transform: rotateX(0); } }
@keyframes m-vnpuff { 0%, 18% { opacity: 0; transform: translate(30%, -40%) scale(1.15); } 24% { opacity: 1; transform: translate(0, -18%) scale(1.08); } 30% { transform: none; } 34% { transform: translateY(-14%) scale(1.04); } 38% { transform: scale(.97); } 42% { transform: translateY(-14%) scale(1.04); } 46% { transform: scale(.97); } 54% { opacity: 1; transform: translate(40%, -30%) scale(1.1); } 62%, 100% { opacity: 0; transform: translate(60%, -40%) scale(1.1); } }
@keyframes m-vndew { 0%, 36% { opacity: 0; transform: scale(.3); } 44% { opacity: 1; transform: scale(1.1) rotate(20deg); } 70% { opacity: .9; transform: scale(.9); } 84%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes m-vnpip { 0%, 100% { transform: none; } 30% { transform: translateY(2px) scaleY(.98); } }
@keyframes m-vndr { 0% { transform: scale(0); opacity: 1; } 30% { transform: scale(1); } 40% { transform: translateY(0); opacity: 1; } 56% { transform: translateY(104px); opacity: 1; } 58%, 100% { transform: translateY(104px); opacity: 0; } }
@keyframes m-vnrip { 0%, 56% { opacity: 0; transform: scale(.3); } 60% { opacity: .9; } 85%, 100% { opacity: 0; transform: scale(2.4); } }
@container (max-width: 520px) { .m-vnlad small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .m-vnlad a { padding-right: 2cqw; } .m-vnlad b { font-size: max(10px, 2.6cqw); } .m-vnlad { left: 66%; } }
.m-vnspecs > span { color: #9c2846; }
.m-vnspecs a { border-radius: 999px; border: 1.5px solid #f0d3da; }
.m-vnspecs b { border-radius: 999px; background: linear-gradient(180deg, #cc4566, #b03251); }
.m-vnspecs a:nth-of-type(3n+2) b { background: #3a1f2b; } .m-vnspecs a:nth-of-type(3n) b { background: #e8a7b4; color: #3a1f2b; }
.m-vnspecs a:is(:hover, :focus-visible) { border-color: #c23a5b; }
.m-vntile { border-radius: 20px; border: 1.5px solid #f0d8de; box-shadow: 0 10px 22px rgba(58,31,43,.06); }
.m-vntile em { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.6), transparent 55%), var(--c); box-shadow: 0 0 0 3px #fff, 0 0 0 4px #f0d8de; }
.m-vnimg { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #f8e6e8); }
.m-vntile .m-q8tx small { color: #9c2846; }
.m-vntile:is(:hover, :focus-visible) { border-color: #c23a5b; box-shadow: 0 16px 30px rgba(58,31,43,.12); }
body.hv-vanity main section > .wrap > h2::after { content: ""; display: block; width: 150px; height: 8px; margin-top: 12px; border-radius: 99px; background: linear-gradient(90deg, #f2d8c2 0 11%, #e3ba94 0 22%, #d9ab80 0 33%, #cf9d70 0 44%, #c38d60 0 55%, #b98352 0 66%, #a26c45 0 77%, #6b4331 0 88%, #c23a5b 0); }
body.hv-vanity .pcard:hover, body.hv-vanity .m-acard:hover { box-shadow: 0 0 0 2px #e8a7b4, 0 18px 40px rgba(58,31,43,.12); }
body.hv-vanity .m-acard .m-art { background: radial-gradient(60% 60% at 50% 45%, #fff, #f8e6e8); }
body.hv-vanity .m-cta .m-band { border-radius: 26px; background: radial-gradient(40% 70% at 90% 10%, rgba(255,255,255,.18), transparent 70%), linear-gradient(120deg, #3a1f2b, #7a2a46 55%, #c23a5b); }
body.hv-vanity .m-cta .m-band::before { width: 170px; height: 170px; right: 50px; top: -60px; background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.4), rgba(255,255,255,.08) 60%); box-shadow: inset 0 0 0 6px rgba(255,255,255,.14); }
body.hv-vanity .m-page-hero { background: radial-gradient(40% 70% at 85% 20%, rgba(255,255,255,.14), transparent 70%), linear-gradient(120deg, #3a1f2b, #7a2a46 60%, #b03251); } body.hv-vanity .m-page-hero .eyebrow { color: #f6c9d4; }
body.hv-vanity footer.site { background: #3a1f2b; color: #ead6dd; border: 0; } body.hv-vanity footer.site nav a { color: #f6c9d4; }
body.hv-vanity .m-collage .m-card { border-radius: 24px; }

/* pat (MISSHA): rose; on hover a dewy highlight pats twice at the pointer and a fine shimmer appears around it */
body.bv-pat .btn { border-radius: 999px; padding: 15px 26px; }
body.bv-pat :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #cc4566, #c23a5b 55%, #b03251); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 22px rgba(194,58,91,.3); }
body.bv-pat :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #ad2f4f, #9c2846 55%, #86213b); color: #fff; }
body.bv-pat .btn::after { inset: 0; background: radial-gradient(circle at var(--mx, 30%) var(--my, 40%), rgba(255,255,255,.75) 0, rgba(255,255,255,.3) 16px, transparent 40px); transform: none; opacity: 0; transition: opacity .3s; }
body.bv-pat .btn:is(:hover, :focus-visible)::after { transform: none; opacity: .6; animation: m-pat .9s ease-out; }
body.bv-pat :is(.m-white, .m-btn-ghost)::after { background: radial-gradient(circle at var(--mx, 30%) var(--my, 40%), rgba(194,58,91,.28) 0, rgba(194,58,91,.1) 18px, transparent 42px); }
body.bv-pat .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.6px) 0 0 / 13px 11px, radial-gradient(circle, rgba(255,255,255,.75) 0 .8px, transparent 1.3px) 6px 5px / 17px 13px; -webkit-mask: radial-gradient(circle at var(--mx, 30%) var(--my, 40%), #000 0, transparent 60px); mask: radial-gradient(circle at var(--mx, 30%) var(--my, 40%), #000 0, transparent 60px); opacity: 0; transition: opacity .4s .25s; }
body.bv-pat .btn:is(:hover, :focus-visible)::before { opacity: 1; }
body.bv-pat :is(.m-white, .m-btn-ghost)::before { display: none; }
@keyframes m-pat { 0% { opacity: 0; transform: scale(.6); } 18% { opacity: 1; transform: none; } 36% { opacity: .3; transform: scale(.85); } 54% { opacity: 1; transform: scale(1.04); } 100% { opacity: .6; transform: none; } }
body.bv-pat .m-cta .btn.m-white:hover { color: #9c2846; }

/* hammam (Arus): a calm Turkish bath — a real robe stands in a teal arched niche behind a marble basin, steam rises, a terry robe sways on a brass hook, a loupe shows real terry loops, folded throws on a marble bench, slippers on the floor, a geometric tile band */
body.hv-hammam .m-hero { background: radial-gradient(50% 60% at 78% 40%, #fffaf2, transparent 70%), linear-gradient(120deg, #f3e9d9, #faf6ef 55%, #f1e5d2); }
body.hv-hammam .m-hero h1 { font-weight: 600 !important; letter-spacing: .005em; }
body.hv-hammam .m-hero .eyebrow { color: #8e4527; letter-spacing: .22em; }
.m-hm { aspect-ratio: 600 / 560; }
.m-hmwall { position: absolute; inset: 0; border-radius: 26px; background: radial-gradient(circle at 18% 16%, rgba(255,255,255,.65), transparent 55%), radial-gradient(circle at 1px 1px, rgba(120,90,50,.06) 1px, transparent 1.6px) 0 0 / 7px 7px, linear-gradient(180deg, #f0e3cd, #e7d5b9); box-shadow: 0 30px 60px rgba(30,51,53,.15); }
.m-hmband { position: absolute; left: 0; right: 0; top: 50%; height: 8cqw; z-index: 1; border-top: .6cqw solid #b85c38; border-bottom: .6cqw solid #b85c38; background: radial-gradient(circle, #b85c38 0 13%, transparent 14%) 4cqw 4cqw / 8cqw 8cqw, linear-gradient(45deg, transparent 43%, #efe3cd 43% 57%, transparent 57%) 0 0 / 8cqw 8cqw, linear-gradient(-45deg, transparent 43%, #efe3cd 43% 57%, transparent 57%) 0 0 / 8cqw 8cqw, radial-gradient(circle, #f6efe2 0 18%, transparent 19%) 0 0 / 8cqw 8cqw, #2f5d62; box-shadow: 0 6px 12px rgba(30,51,53,.12); }
.m-hmfloor { position: absolute; left: 0; right: 0; bottom: 0; height: 16%; z-index: 1; border-radius: 0 0 26px 26px; border-top: .8cqw solid #d8c39f; background: linear-gradient(90deg, rgba(0,0,0,.07) 1px, transparent 1px) 0 0 / 7cqw 100%, linear-gradient(180deg, #ddcaa9, #cfb994); }
.m-hmarch { position: absolute; left: 5%; top: 5%; width: 40%; bottom: 16%; z-index: 2; border-radius: 999px 999px 6px 6px; background: #f8f1e5; box-shadow: 0 0 0 .6cqw #dcc6a2, 0 18px 40px rgba(30,51,53,.2); animation: m-hmin 1s var(--m-ease) backwards; }
.m-hmniche { position: absolute; inset: 1.6cqw; border-radius: 999px 999px 4px 4px; background: radial-gradient(70% 40% at 50% 14%, rgba(255,236,200,.45), transparent 70%), linear-gradient(180deg, #2f5d62, #1e3335); box-shadow: inset 0 10px 30px rgba(0,0,0,.35); }
.m-hmrobe { position: absolute; left: 50%; bottom: 4%; width: 50%; translate: -50% 0; z-index: 1; filter: drop-shadow(0 14px 14px rgba(0,0,0,.35)); transition: transform .45s var(--m-ease); }
.m-hmrobe:hover { transform: translateY(-5px); }
.m-hmsteam { position: absolute; left: 10%; width: 30%; bottom: 22%; height: auto; z-index: 3; overflow: visible; pointer-events: none; }
.m-hmsteam path { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 34 100; stroke-dashoffset: 0; filter: blur(2.5px); animation: m-hmsteam 6s calc(var(--i) * 1.6s) linear infinite; }
.m-hmbasin { position: absolute; left: 8%; width: 34%; bottom: 9%; height: auto; z-index: 3; overflow: visible; filter: drop-shadow(0 12px 12px rgba(30,51,53,.25)); }
.m-hmbasin .b { fill: url(#m-hmmar); stroke: #cdbfa8; stroke-width: 1.5; } .m-hmbasin .w { fill: #7fb3b0; stroke: #f3ece0; stroke-width: 3; } .m-hmbasin .v { fill: none; stroke: #cbbca4; stroke-width: 1; opacity: .7; } .m-hmbasin .p { fill: #d8cdbb; }
.m-hmrip { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; animation: m-hmrip 4s ease-out infinite; } .m-hmrip.r2 { animation-delay: 2s; }
.m-hmpeg { position: absolute; left: 51%; top: 4%; width: 19%; z-index: 2; }
.m-hmhook { display: block; width: 26%; margin: 0 auto; overflow: visible; } .m-hmhook .pl { fill: #d2ab58; stroke: #9c7a32; stroke-width: 1.5; } .m-hmhook .hk { fill: none; stroke: #b8913f; stroke-width: 4; stroke-linecap: round; } .m-hmhook .hd { fill: #b8913f; }
.m-hmhung { display: block; width: 100%; height: auto; margin-top: -12%; overflow: visible; transform-origin: 50% 3%; filter: drop-shadow(0 12px 10px rgba(30,51,53,.25)); animation: m-hmsway 6s ease-in-out infinite; }
.m-hmhung .loop { fill: none; stroke: #2a5458; stroke-width: 3; } .m-hmhung .bd { fill: url(#m-hmloop); stroke: #24494d; stroke-width: 1.5; } .m-hmhung .sl { fill: #2a5458; stroke: #24494d; stroke-width: 1.5; }
.m-hmhung .col { fill: none; stroke: #e2cfae; stroke-width: 5; stroke-linejoin: round; } .m-hmhung .cuff { stroke: #e2cfae; stroke-width: 5; } .m-hmhung .belt { fill: none; stroke: #24494d; stroke-width: 8; stroke-linecap: round; } .m-hmhung .tail { stroke: #24494d; stroke-width: 6; stroke-linecap: round; } .m-hmhung .pk { stroke: rgba(255,255,255,.25); stroke-width: 2; }
.m-hmloupe { position: absolute; right: 4%; top: 5%; width: 21%; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 1cqw; animation: m-hmin 1s .4s var(--m-ease) backwards; }
.m-hmlens { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: max(3px, .9cqw) solid #c9a24f; background: #fff; box-shadow: 0 12px 24px rgba(30,51,53,.25); }
.m-hmlens img { width: 100%; height: 100% !important; object-fit: cover; transform: scale(1.15); animation: m-hmpan 12s ease-in-out infinite alternate; }
.m-hmlens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.45), transparent 40%); }
.m-hmloupe b { padding: .7cqw 1.4cqw; border-radius: 99px; background: #fbf6ed; border: 1px solid #dcc6a2; font: 700 max(9px, 1.7cqw)/1.15 var(--m-body); letter-spacing: .08em; text-transform: uppercase; color: #1e3335; text-align: center; }
.m-hmbench { position: absolute; right: 3%; width: 44%; bottom: 16%; height: 28%; z-index: 3; }
.m-hmslab { position: absolute; left: 0; right: 0; bottom: 0; height: 13%; border-radius: 4px; background: linear-gradient(180deg, #fbf8f2, #e2d8c6); box-shadow: 0 10px 18px rgba(30,51,53,.2); }
.m-hmslab::before, .m-hmslab::after { content: ""; position: absolute; top: 100%; width: 9%; height: 140%; background: linear-gradient(180deg, #d8cdbb, #c4b59c); } .m-hmslab::before { left: 8%; } .m-hmslab::after { right: 8%; }
.m-hmfold { position: absolute; display: block; filter: drop-shadow(0 8px 8px rgba(30,51,53,.22)); transition: transform .45s var(--m-ease); }
.m-hmfold.f1 { left: 4%; bottom: 10%; width: 66%; animation: m-hmin 1s .55s var(--m-ease) backwards; }
.m-hmfold.f2 { left: 16%; bottom: 52%; width: 50%; animation: m-hmdrop 1s .9s var(--m-ease) backwards; }
.m-hmfold:hover { transform: translateY(-5px); }
.m-hmslip { position: absolute; right: 9%; bottom: 2%; width: 19%; z-index: 4; display: block; filter: drop-shadow(0 8px 8px rgba(30,51,53,.25)); animation: m-hmin 1s .7s var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-hmslip:hover { transform: translateY(-5px); }
@keyframes m-hmin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-hmdrop { from { opacity: 0; transform: translateY(-30px); } }
@keyframes m-hmsway { 0%, 100% { rotate: -2.2deg; } 50% { rotate: 2.2deg; } }
@keyframes m-hmsteam { 0% { stroke-dashoffset: 34; opacity: 0; } 15% { opacity: .9; } 80% { opacity: .5; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes m-hmrip { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes m-hmpan { from { transform: scale(1.15) translate(-4%, -3%); } to { transform: scale(1.3) translate(4%, 3%); } }
.m-hmspecs > span { color: #8e4527; }
.m-hmspecs a { border-radius: 8px; border: 1.5px solid #e3d3b8; }
.m-hmspecs b { border-radius: 5px; background: #2f5d62; } .m-hmspecs a:nth-of-type(even) b { background: #a5512f; }
.m-hmspecs a:is(:hover, :focus-visible) { border-color: #2f5d62; }
.m-hmtile { border-radius: 14px; border: 1.5px solid #e6d8c0; box-shadow: 0 10px 22px rgba(30,51,53,.06); }
.m-hmarc { flex: none; display: block; padding: 3px; border-radius: 999px 999px 6px 6px; background: #2f5d62; }
.m-hmimg { width: 52px; height: 62px; border-radius: 999px 999px 4px 4px; background: #fbf6ed; }
.m-hmtile .m-q8tx small { color: #8e4527; }
.m-hmtile:is(:hover, :focus-visible) { border-color: #2f5d62; box-shadow: 0 16px 30px rgba(30,51,53,.12); }
body.hv-hammam main section > .wrap > h2::after { content: ""; display: block; width: 144px; height: 12px; margin-top: 12px; background: radial-gradient(circle, #b85c38 0 18%, transparent 20%) 6px 6px / 12px 12px, linear-gradient(45deg, transparent 42%, #efe3cd 42% 58%, transparent 58%) 0 0 / 12px 12px, linear-gradient(-45deg, transparent 42%, #efe3cd 42% 58%, transparent 58%) 0 0 / 12px 12px, #2f5d62; border-radius: 2px; }
body.hv-hammam .pcard:hover, body.hv-hammam .m-acard:hover { box-shadow: 0 0 0 2px #2f5d62, 0 18px 40px rgba(30,51,53,.12); }
body.hv-hammam .m-acard .m-art { background: radial-gradient(60% 60% at 50% 45%, #fffaf2, #efe4d2); }
body.hv-hammam .m-cta .m-band { border-radius: 18px; background: radial-gradient(40% 70% at 90% 0%, rgba(255,236,200,.16), transparent 70%), linear-gradient(120deg, #1e3335, #2f5d62); box-shadow: 0 30px 60px rgba(30,51,53,.25); }
body.hv-hammam .m-cta .m-band::before { width: auto; height: 14px; left: 0; right: 0; top: 0; border-radius: 0; background: radial-gradient(circle, #b85c38 0 18%, transparent 20%) 7px 7px / 14px 14px, linear-gradient(45deg, transparent 42%, rgba(239,227,205,.5) 42% 58%, transparent 58%) 0 0 / 14px 14px, linear-gradient(-45deg, transparent 42%, rgba(239,227,205,.5) 42% 58%, transparent 58%) 0 0 / 14px 14px; }
body.hv-hammam .m-page-hero { background: radial-gradient(40% 70% at 85% 10%, rgba(255,236,200,.14), transparent 70%), linear-gradient(120deg, #1e3335, #2f5d62); } body.hv-hammam .m-page-hero .eyebrow { color: #f0c9a8; }
body.hv-hammam footer.site { background: #1e3335; color: #d9e2df; border: 0; box-shadow: inset 0 6px 0 #b85c38; } body.hv-hammam footer.site nav a { color: #f0d9b5; }
body.hv-hammam .m-collage .m-card { border-radius: 140px 140px 16px 16px; }

/* fold (Arus): deep teal; on hover the top-right corner folds down like a towel and a fine terry loop texture shows */
body.bv-fold { --fold-bg: var(--m-bg); }
body.bv-fold .m-hero { --fold-bg: #f6eee1; } body.bv-fold :is(.pcard, .m-rank, .m-vs, .m-acard) { --fold-bg: #fff; } body.bv-fold .m-cta { --fold-bg: #24474a; } body.bv-fold .m-page-hero { --fold-bg: #25494c; }
body.bv-fold .btn { border-radius: 6px; padding: 15px 28px 15px 24px; letter-spacing: .03em; }
body.bv-fold :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #356a70, #2f5d62 55%, #284f53); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px rgba(47,93,98,.3); }
body.bv-fold :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #a5512f, #94472a 55%, #803c23); color: #fff; }
body.bv-fold .btn::before { content: ""; position: absolute; top: 0; right: 0; z-index: 2; width: 7px; height: 7px; pointer-events: none; background: linear-gradient(225deg, var(--fold-bg) 0 50%, #efe4d2 50% 100%); box-shadow: -2px 2px 4px rgba(0,0,0,.18); border-bottom-left-radius: 3px; transition: width .4s var(--m-ease), height .4s var(--m-ease); }
body.bv-fold .btn:is(:hover, :focus-visible)::before { width: 19px; height: 19px; }
body.bv-fold .btn::after { inset: 0; background: radial-gradient(circle, rgba(255,255,255,.2) 0 1px, transparent 1.6px) 0 0 / 5px 5px, radial-gradient(circle, rgba(0,0,0,.08) 0 1px, transparent 1.6px) 2.5px 2.5px / 5px 5px; transform: none; opacity: 0; transition: opacity .35s; }
body.bv-fold .btn:is(:hover, :focus-visible)::after { transform: none; opacity: 1; }
body.bv-fold .m-cta .btn.m-white:hover { color: #2f5d62; }

/* patchfit (JINYU-SEGA): a bright clean card — an overpatch lowers and aligns over a generic round sensor, a dashed fit ring pulses, water droplets bead and roll off, the easy-peel tab lifts; real patterned packs fanned around it */
body.hv-patchfit .m-hero { background: radial-gradient(40% 50% at 82% 30%, rgba(47,181,201,.16), transparent 70%), radial-gradient(30% 40% at 8% 88%, rgba(242,92,138,.1), transparent 70%), linear-gradient(180deg, #f7fbff, #edf5fd); }
body.hv-patchfit .m-hero h1 { letter-spacing: -.02em; }
body.hv-patchfit .m-hero .eyebrow { color: #16518f; letter-spacing: .2em; }
.m-pf { aspect-ratio: 600 / 560; }
.m-pfbg { position: absolute; inset: 0; border-radius: 28px; background: radial-gradient(circle at 1px 1px, rgba(36,112,201,.16) 1px, transparent 1.6px) 0 0 / 16px 16px, radial-gradient(50% 50% at 30% 50%, #fff, transparent 70%), linear-gradient(160deg, #fff, #e6f3fc); box-shadow: 0 30px 60px rgba(18,41,74,.12), inset 0 0 0 1px rgba(36,112,201,.1); }
.m-pfsvg { position: absolute; left: 2%; top: 14%; width: 54%; height: auto; z-index: 2; overflow: visible; }
.m-pfskin { fill: #dcf0f6; stroke: #bfe1ec; stroke-width: 2; }
.m-pfring { fill: none; stroke: #2470c9; stroke-width: 2.2; stroke-dasharray: 7 7; transform-box: fill-box; transform-origin: center; animation: m-pfring 3s ease-in-out infinite; }
.m-pfsensor circle { fill: #f2f5f8; stroke: #a9b6c4; stroke-width: 2.5; } .m-pfsensor .in { fill: #e1e7ed; stroke-width: 1.5; } .m-pfsensor .dot { fill: #8a98a8; stroke: none; }
.m-pfover { transform-box: view-box; transform-origin: 150px 150px; filter: drop-shadow(0 6px 8px rgba(18,41,74,.2)); animation: m-pfover 9s .6s var(--m-ease) infinite; }
.m-pfover .fill { fill: url(#m-pfconf); } .m-pfover .edge { fill: none; stroke: #fff; stroke-width: 3; }
.m-pftab path { fill: #fff; stroke: #c3d2e2; stroke-width: 1.5; } .m-pftab .ln { fill: none; stroke: #9fb3c8; stroke-width: 1.6; stroke-linecap: round; }
.m-pftab { transform-box: fill-box; transform-origin: 0 50%; animation: m-pftab 9s .6s ease-in-out infinite; }
.m-pfdrop { fill: rgba(255,255,255,.9); stroke: #6cc4dc; stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: m-pfdrop 9s calc(.6s + var(--i) * .15s) ease-in infinite; }
.m-pfdim path { fill: none; stroke: #12294a; stroke-width: 1.6; } .m-pfdim text { font: 700 15px var(--m-head); fill: #12294a; }
.m-pffan, .m-pfpod, .m-pfrain { position: absolute; display: block; z-index: 3; transition: transform .45s var(--m-ease); }
.m-pffan { right: 0; top: 0; width: 50%; filter: drop-shadow(0 18px 16px rgba(18,41,74,.22)); animation: m-pfin 1s .1s var(--m-ease) backwards; }
.m-pfpod { left: 45%; bottom: 2%; width: 20%; z-index: 4; rotate: -8deg; filter: drop-shadow(0 12px 10px rgba(18,41,74,.22)); animation: m-pfin 1s .35s var(--m-ease) backwards; }
.m-pfrain { right: 2%; bottom: 4%; width: 30%; filter: drop-shadow(0 12px 10px rgba(18,41,74,.22)); animation: m-pfin 1s .5s var(--m-ease) backwards; }
:is(.m-pffan, .m-pfpod, .m-pfrain):hover { transform: translateY(-6px); }
@keyframes m-pfin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-pfring { 0%, 100% { opacity: .5; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes m-pfover { 0% { opacity: 0; transform: translateY(-46px) scale(1.14); } 10% { opacity: .9; } 24%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-20px) scale(1.06); } }
@keyframes m-pftab { 0%, 56% { transform: none; } 62%, 70% { transform: rotate(-26deg) scaleX(1.12) translateY(-3px); } 76%, 100% { transform: none; } }
@keyframes m-pfdrop { 0%, 28% { opacity: 0; transform: scale(.2); } 34% { opacity: 1; transform: scale(1.1); } 38%, 50% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translate(10px, 56px) scale(.8); } }
.m-pfspecs > span { color: #16518f; }
.m-pfspecs a { border-radius: 999px; border: 1.5px solid #cfe2f5; }
.m-pfspecs b { border-radius: 999px; background: #2470c9; } .m-pfspecs a:nth-of-type(6n+2) b { background: #12294a; } .m-pfspecs a:nth-of-type(6n+3) b { background: #c73a6c; } .m-pfspecs a:nth-of-type(6n+4) b { background: #1d7f8f; } .m-pfspecs a:nth-of-type(6n+5) b { background: #6a4bd0; } .m-pfspecs a:nth-of-type(6n) b { background: #b56d00; }
.m-pfspecs a:is(:hover, :focus-visible) { border-color: #2470c9; }
.m-pfnote { position: relative; margin: -4px 0 0; padding-left: 24px; max-width: 54ch; font-size: 13px; line-height: 1.45; color: #44526a; }
.m-pfnote::before { content: "i"; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%; background: #12294a; color: #fff; font: 700 11px/16px Georgia, serif; text-align: center; }
.m-pftile { border-radius: 18px; border: 1.5px solid #d6e6f6; box-shadow: 0 10px 22px rgba(18,41,74,.06); }
.m-pftile em { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle, #fff 0 4px, var(--c) 4.5px 9px, transparent 9.5px); }
.m-pfimg { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #e2f1fb); }
.m-pftile .m-q8tx small { color: #16518f; }
.m-pftile:is(:hover, :focus-visible) { border-color: #2470c9; box-shadow: 0 16px 30px rgba(18,41,74,.12); }
body.hv-patchfit main section > .wrap > h2::after { content: ""; display: block; width: 140px; height: 12px; margin-top: 12px; background: radial-gradient(circle, #fff 0 2px, #f25c8a 2.5px 5px, transparent 5.5px) 0 0 / 24px 12px, radial-gradient(circle, #fff 0 2px, #2fb5c9 2.5px 5px, transparent 5.5px) 12px 0 / 24px 12px, linear-gradient(#2470c9, #2470c9) 0 50% / 100% 2px no-repeat; }
body.hv-patchfit .pcard:hover, body.hv-patchfit .m-acard:hover { box-shadow: 0 0 0 2px #2470c9, 0 18px 40px rgba(18,41,74,.12); }
body.hv-patchfit .m-acard .m-art { background: radial-gradient(60% 60% at 50% 45%, #fff, #e2f1fb); }
body.hv-patchfit .m-cta .m-band { border-radius: 24px; background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 1.6px) 0 0 / 14px 14px, linear-gradient(120deg, #12294a, #1b56a0 60%, #2470c9); }
body.hv-patchfit .m-cta .m-band::before { width: 160px; height: 160px; right: 40px; top: -50px; background: radial-gradient(circle, transparent 0 34%, rgba(255,255,255,.16) 35% 70%, transparent 71%); box-shadow: none; }
body.hv-patchfit .m-page-hero { background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 1.6px) 0 0 / 16px 16px, linear-gradient(120deg, #12294a, #1b56a0); } body.hv-patchfit .m-page-hero .eyebrow { color: #9fe0ec; }
body.hv-patchfit footer.site { background: #12294a; color: #d3deec; border: 0; } body.hv-patchfit footer.site nav a { color: #9fe0ec; }
body.hv-patchfit .m-collage .m-card { border-radius: 22px; }

/* peel (JINYU-SEGA): a white backing tab with a pre-cut line sits at the right end; on hover it peels back and confetti shows underneath */
body.bv-peel .btn { border-radius: 14px; padding: 15px 42px 15px 22px; }
body.bv-peel .btn .arr { display: none; }
body.bv-peel :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #2a78d2, #1f67bd 55%, #1a5ba8); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 22px rgba(31,103,189,.3); }
body.bv-peel :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #16518f, #12447a 55%, #0f3a68); color: #fff; }
body.bv-peel .btn::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; z-index: 1; width: 26px; pointer-events: none; border-left: 1.5px dashed rgba(18,41,74,.3); background: linear-gradient(90deg, rgba(18,41,74,.08), transparent 6px), repeating-linear-gradient(135deg, transparent 0 5px, rgba(36,112,201,.1) 5px 7px), #fff; transform-origin: 100% 50%; transition: transform .5s cubic-bezier(.3,1.4,.5,1), box-shadow .4s; }
body.bv-peel .btn:is(:hover, :focus-visible)::before { transform: perspective(140px) rotateY(68deg) translateX(-2px); box-shadow: -8px 0 12px rgba(18,41,74,.25); }
body.bv-peel .btn::after { inset: 0 0 0 auto; width: 26px; background: radial-gradient(circle, #f25c8a 0 2.5px, transparent 3px) 4px 6px / 14px 14px, radial-gradient(circle, #ffb938 0 2.5px, transparent 3px) 11px 13px / 14px 14px, radial-gradient(circle, #2fb5c9 0 2px, transparent 2.5px) 2px 16px / 12px 12px; transform: none; opacity: .9; transition: none; }
body.bv-peel .btn:hover::after { transform: none; }
body.bv-peel .m-cta .btn.m-white:hover { color: #1f67bd; }

@media (prefers-reduced-motion: reduce) { .m-vnlid { transform: rotateX(-84deg); } .m-hmsteam path { stroke-dashoffset: 0; } }
/* phones: batch 12.11 (4) heroes stack */
@media (max-width: 900px) {
  :is(body.hv-vanity, body.hv-hammam, body.hv-patchfit) .m-hero { min-height: 0; } :is(body.hv-vanity, body.hv-hammam, body.hv-patchfit) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr); }
  .m-vncats, .m-hmcats, .m-pfcats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-vncats, .m-hmcats, .m-pfcats) > a:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .m-vntile, .m-hmtile, .m-pftile { gap: 9px; padding: 10px; } .m-vnimg, .m-pfimg { width: 44px; height: 44px; } .m-hmimg { width: 40px; height: 48px; }
  :is(.m-vntile, .m-hmtile, .m-pftile) .m-q8tx b { font-size: 13px; padding-right: 0; } :is(.m-vntile, .m-hmtile, .m-pftile) em { display: none; }
  :is(.m-vnspecs, .m-hmspecs, .m-pfspecs) small { white-space: normal; }
}
@media (max-width: 600px) {
  :is(.m-vnspecs, .m-hmspecs, .m-pfspecs) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-vnspecs, .m-hmspecs, .m-pfspecs) > span { grid-column: 1 / -1; }
  :is(.m-vnspecs, .m-hmspecs, .m-pfspecs) a { flex-direction: column; align-items: flex-start; gap: 5px; padding: 6px 10px 8px 6px; border-radius: 12px; }
  :is(.m-vnspecs, .m-hmspecs, .m-pfspecs) small { white-space: normal; line-height: 1.2; padding-left: 2px; }
}

/* logo never shrinks when the nav is long */
header.site .logo{flex-shrink:0}
header.site .logo img{min-width:120px}
/* grid items may shrink below their content width (fixes overflow of 4-column grids at ~1024px) */
body.m .grid>*{min-width:0}
/* long menus: tighter nav on small desktops instead of overflowing */
@media (min-width:901px) and (max-width:1320px){body.m header.site .wrap{gap:14px}body.m header.site nav{gap:0;flex-wrap:wrap;justify-content:flex-end;min-width:0}body.m header.site nav a{padding:8px 7px;font-size:13.5px}body.m header.site .langs a{padding:0 9px}}

/* ===== batch 12.11.2026 (5): lullaby/breathe (MUSICOZY), nailbar (NOVAL), lumen (ANYHI), dresser (Spaco) ===== */
:is(body.hv-lullaby, body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-magmat, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-aimwall, body.hv-manual, body.hv-daycycle) .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); }
:is(body.hv-lullaby, body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-magmat, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-aimwall, body.hv-manual, body.hv-daycycle) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:is(body.hv-lullaby, body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-magmat, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-aimwall, body.hv-manual, body.hv-daycycle) .m-hero .m-copy > * { animation: m-rise .8s var(--m-ease) both; }
:is(body.hv-lullaby, body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-magmat, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-aimwall, body.hv-manual, body.hv-daycycle) .m-hero .m-copy > :nth-child(3) { animation-delay: .08s; } :is(body.hv-lullaby, body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-magmat, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-aimwall, body.hv-manual, body.hv-daycycle) .m-hero .m-copy > :nth-child(4) { animation-delay: .16s; } :is(body.hv-lullaby, body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-magmat, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-aimwall, body.hv-manual, body.hv-daycycle) .m-hero .m-copy > :nth-child(n+5) { animation-delay: .24s; }
:is(body.hv-lullaby, body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-magmat, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-aimwall, body.hv-manual, body.hv-daycycle) .m-hero h1 { text-wrap: balance; max-width: 18ch; font-size: clamp(34px, 4vw, 58px) !important; line-height: 1.06 !important; }
:is(body.hv-lullaby, body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-magmat, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-aimwall, body.hv-manual, body.hv-daycycle) .m-hero .bgcredit { display: none; }
:is(body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-manual, body.hv-daycycle) .m-hero { color: var(--m-ink); }
:is(body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-manual, body.hv-daycycle) .m-hero h1 { color: var(--m-ink) !important; }
:is(body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-manual, body.hv-daycycle) .m-hero .sub { color: var(--m-body-ink); }
:is(body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-manual, body.hv-daycycle) .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: var(--m-ink) !important; background: rgba(255,255,255,.7) !important; }
:is(body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-manual, body.hv-daycycle) .m-hero .m-btn-ghost:hover { background: var(--m-ink) !important; color: #fff !important; }
:is(body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-manual, body.hv-daycycle) .m-hero .m-chips span { background: #fff; color: var(--m-ink); border: 1.5px solid color-mix(in srgb, var(--m-ink) 14%, transparent); backdrop-filter: none; }
:is(.m-ly, .m-nr, .m-lu, .m-ds, .m-mg, .m-gy, .m-py, .m-bk, .m-aim, .m-ib, .m-dy) { position: relative; width: min(100%, 600px); justify-self: center; container-type: inline-size; }
:is(.m-ly, .m-nr, .m-lu, .m-ds, .m-mg, .m-gy, .m-py, .m-bk, .m-aim, .m-ib, .m-dy) a { -webkit-tap-highlight-color: transparent; }
:is(.m-ly, .m-nr, .m-lu, .m-ds, .m-mg, .m-gy, .m-py, .m-bk, .m-aim, .m-ib, .m-dy) img { display: block; width: 100%; height: auto; border-radius: 0; }
:is(.m-lycats, .m-nrcats, .m-lucats, .m-dscats, .m-mgcats, .m-gycats, .m-pycats, .m-bkcats, .m-aimcats, .m-ibcats, .m-dycats) { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; padding: 10px clamp(18px, 4vw, 72px) clamp(26px, 4vh, 44px); }
:is(.m-lytile, .m-nrtile, .m-lutile, .m-dstile, .m-mgtile, .m-gytile, .m-pytile, .m-bktile, .m-aimtile, .m-ibtile, .m-dytile) { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; padding: 14px 14px 12px 12px; background: #fff; color: var(--m-ink) !important; overflow: hidden; animation: m-rise .7s calc(.8s + var(--i, 0) * .08s) var(--m-ease) backwards; transition: transform .4s var(--m-ease), border-color .3s, box-shadow .3s, background .3s; }
:is(.m-lyimg, .m-nrimg, .m-luimg, .m-dsimg, .m-mgimg, .m-gyimg, .m-pyimg, .m-bkimg, .m-aimimg, .m-ibimg, .m-dyimg) { flex: none; display: block; overflow: hidden; width: 58px; height: 58px; padding: 4px; }
:is(.m-lyimg, .m-nrimg, .m-luimg, .m-dsimg, .m-mgimg, .m-gyimg, .m-pyimg, .m-bkimg, .m-aimimg, .m-ibimg, .m-dyimg) img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; transition: transform .45s var(--m-ease); }
:is(.m-lytile, .m-nrtile, .m-lutile, .m-dstile, .m-mgtile, .m-gytile, .m-pytile, .m-bktile, .m-aimtile, .m-ibtile, .m-dytile):hover :is(.m-lyimg, .m-nrimg, .m-luimg, .m-dsimg, .m-mgimg, .m-gyimg, .m-pyimg, .m-bkimg, .m-aimimg, .m-ibimg, .m-dyimg) img { transform: scale(1.08) rotate(-4deg); }
:is(.m-lytile, .m-nrtile, .m-lutile, .m-dstile, .m-mgtile, .m-gytile, .m-pytile, .m-bktile, .m-aimtile, .m-ibtile, .m-dytile):focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; }
:is(.m-lytile, .m-nrtile, .m-lutile, .m-dstile, .m-mgtile, .m-gytile, .m-pytile, .m-bktile, .m-aimtile, .m-ibtile, .m-dytile):is(:hover, :focus-visible) { transform: translateY(-4px); }
:is(.m-lytile, .m-nrtile, .m-lutile, .m-dstile, .m-mgtile, .m-gytile, .m-pytile, .m-bktile, .m-aimtile, .m-ibtile, .m-dytile) .m-q8tx b { font: 700 15.5px/1.2 var(--m-head); color: var(--m-ink); padding-right: 22px; }
:is(.m-lytile, .m-nrtile, .m-lutile, .m-dstile, .m-mgtile, .m-gytile, .m-pytile, .m-bktile, .m-aimtile, .m-ibtile, .m-dytile) em { position: absolute; right: 11px; top: 10px; font-style: normal; }
:is(.m-lyspecs, .m-nrspecs, .m-luspecs, .m-dsspecs, .m-mgspecs, .m-gyspecs, .m-pyspecs, .m-bkspecs, .m-aimspecs, .m-ibspecs, .m-dyspecs) { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -6px 0 18px; }
:is(.m-lyspecs, .m-nrspecs, .m-luspecs, .m-dsspecs, .m-mgspecs, .m-gyspecs, .m-pyspecs, .m-bkspecs, .m-aimspecs, .m-ibspecs, .m-dyspecs) > span { flex-basis: 100%; margin: 0 0 2px; font: 700 12px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; }
:is(.m-lyspecs, .m-nrspecs, .m-luspecs, .m-dsspecs, .m-mgspecs, .m-gyspecs, .m-pyspecs, .m-bkspecs, .m-aimspecs, .m-ibspecs, .m-dyspecs) a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; background: #fff; color: var(--m-ink) !important; text-decoration: none; transition: background .25s, border-color .25s, transform .3s var(--m-ease), box-shadow .3s; animation: m-rise .6s calc(.45s + var(--i, 0) * .06s) var(--m-ease) backwards; }
:is(.m-lyspecs, .m-nrspecs, .m-luspecs, .m-dsspecs, .m-mgspecs, .m-gyspecs, .m-pyspecs, .m-bkspecs, .m-aimspecs, .m-ibspecs, .m-dyspecs) a:is(:hover, :focus-visible) { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,24,40,.12); }
:is(.m-lyspecs, .m-nrspecs, .m-luspecs, .m-dsspecs, .m-mgspecs, .m-gyspecs, .m-pyspecs, .m-bkspecs, .m-aimspecs, .m-ibspecs, .m-dyspecs) b { display: grid; place-items: center; min-width: 40px; height: 28px; padding: 0 10px; color: #fff; font: 700 13px/1 var(--m-head); white-space: nowrap; }
:is(.m-lyspecs, .m-nrspecs, .m-luspecs, .m-dsspecs, .m-mgspecs, .m-gyspecs, .m-pyspecs, .m-bkspecs, .m-aimspecs, .m-ibspecs, .m-dyspecs) small { font: 600 12.5px/1 var(--m-body); white-space: nowrap; color: var(--m-body-ink); }
:is(body.hv-lullaby, body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-magmat, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-aimwall, body.hv-manual, body.hv-daycycle) .m-acard .m-art { position: relative; background: #fff !important; border-bottom: 1px solid color-mix(in srgb, var(--m-ink) 7%, transparent); }
:is(body.hv-lullaby, body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-magmat, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-aimwall, body.hv-manual, body.hv-daycycle) .m-acard .m-art img { position: absolute; left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); max-height: none; object-fit: contain; border-radius: 0; }

/* lullaby (MUSICOZY): a night window over a soft pillow; the real headband rests on the pillow and breathes with it, sound waves ripple from the speaker, stars twinkle, a crescent moon glows, a shooting star, Zzz drift up, an auto-off timer dial runs 1H-2H-3H; a silk star mask floats like a cloud */
body.hv-lullaby .m-hero { color: #fff; background: radial-gradient(40% 50% at 78% 30%, rgba(156,143,232,.28), transparent 70%), radial-gradient(36% 46% at 8% 96%, rgba(199,125,168,.18), transparent 70%), radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 1.6px) 0 0 / 150px 130px, radial-gradient(circle, rgba(255,255,255,.35) 0 .8px, transparent 1.3px) 70px 50px / 190px 170px, linear-gradient(165deg, #120f33, #1f1a55 55%, #2e2775); }
body.hv-lullaby .m-hero h1 { color: #fff !important; letter-spacing: .005em; }
body.hv-lullaby .m-hero .eyebrow { color: #cdc5ff; letter-spacing: .22em; }
body.hv-lullaby .m-hero .sub { color: rgba(236,233,255,.88); }
body.hv-lullaby .m-hero .m-chips span { background: rgba(255,255,255,.08); border: 1px solid rgba(205,197,255,.3); color: #ecebff; }
.m-ly { aspect-ratio: 600 / 560; }
.m-lywin { position: absolute; left: 5%; right: 5%; top: 0; height: 74%; border-radius: 280px 280px 30px 30px; overflow: hidden; background: radial-gradient(60% 50% at 74% 18%, rgba(255,240,200,.16), transparent 70%), linear-gradient(180deg, #0c0a29, #231d62 70%, #3a3190); box-shadow: inset 0 0 0 max(5px, 1.4cqw) #3b3388, inset 0 0 0 max(7px, 1.9cqw) #6d62c9, 0 30px 60px rgba(5,4,25,.5); }
.m-lywin::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: max(4px, 1.1cqw); margin-left: max(-2px, -.55cqw); background: #3b3388; box-shadow: 0 0 0 1px rgba(109,98,201,.6); }
.m-lystars i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(255,255,255,.7); animation: m-lytw 3.6s var(--d) ease-in-out infinite; }
.m-lystars i:nth-child(3n) { background: #ffe9a8; box-shadow: 0 0 6px 1px rgba(255,220,140,.7); }
.m-lyshoot { position: absolute; left: 12%; top: 14%; width: 22%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.9)); rotate: 18deg; opacity: 0; animation: m-lyshoot 9s 2.5s ease-out infinite; }
.m-lymoon { position: absolute; right: 9%; top: 9%; width: 22%; height: auto; overflow: visible; }
.m-lymoon .disc { fill: #fff3cc; filter: drop-shadow(0 0 10px rgba(255,236,170,.6)); } .m-lymoon .glow { transform-box: fill-box; transform-origin: center; animation: m-lyglow 6s ease-in-out infinite; }
.m-lypillow { position: absolute; left: 1%; width: 98%; bottom: 3%; height: 38%; z-index: 2; overflow: visible; filter: drop-shadow(0 22px 26px rgba(5,4,25,.45)); transform-origin: 50% 100%; animation: m-lybreath 6s ease-in-out infinite; }
.m-lypillow .s { fill: none; stroke: rgba(74,63,159,.25); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; } .m-lypillow .c { fill: none; stroke: rgba(74,63,159,.16); stroke-width: 3; stroke-linecap: round; }
.m-lyband { position: absolute; left: 16%; width: 60%; bottom: 19%; z-index: 3; rotate: -4deg; animation: m-lybreath 6s ease-in-out infinite; transform-origin: 50% 100%; }
.m-lybandimg { display: block; filter: drop-shadow(0 14px 12px rgba(10,8,40,.4)); animation: m-lyin 1.1s .1s var(--m-ease) backwards; transition: transform .45s var(--m-ease); } .m-lybandimg:hover { transform: translateY(-6px); }
.m-lywaves { position: absolute; left: 72%; top: 46%; width: 0; height: 0; pointer-events: none; }
.m-lywaves i { position: absolute; left: -9cqw; top: -9cqw; width: 18cqw; height: 18cqw; border-radius: 50%; border: 2px solid transparent; border-right-color: rgba(205,197,255,.95); border-top-color: rgba(205,197,255,.35); border-bottom-color: rgba(205,197,255,.35); opacity: 0; animation: m-lywave 3.2s calc(var(--i) * .8s) ease-out infinite; }
.m-lysilk { position: absolute; left: 1%; top: 9%; width: 33%; z-index: 2; rotate: -9deg; filter: drop-shadow(0 16px 16px rgba(5,4,25,.5)); animation: m-lyin 1s .4s var(--m-ease) backwards, m-lydrift 9s 1.4s ease-in-out infinite; }
.m-lymask { position: absolute; right: -1%; bottom: 0; width: 33%; z-index: 4; rotate: 7deg; filter: drop-shadow(0 14px 12px rgba(5,4,25,.45)); animation: m-lyin 1s .55s var(--m-ease) backwards; transition: transform .45s var(--m-ease); } .m-lymask:hover { transform: translateY(-6px); }
.m-lyzzz { position: absolute; left: 13%; bottom: 46%; z-index: 3; width: 10%; height: 20%; pointer-events: none; }
.m-lyzzz i { position: absolute; left: calc(var(--i) * 30%); bottom: 0; font: 700 clamp(14px, 3.4cqw, 22px)/1 var(--m-head); font-style: normal; color: #e7e2ff; opacity: 0; animation: m-lyz 4.8s calc(var(--i) * 1.6s) ease-out infinite; }
.m-lytimer { position: absolute; left: 0; bottom: 1%; z-index: 4; width: 21%; display: grid; justify-items: center; gap: 4px; padding: 1.6cqw 1.6cqw 1.4cqw; border-radius: 22px; background: rgba(20,17,58,.78); border: 1px solid rgba(205,197,255,.28); backdrop-filter: blur(6px); box-shadow: 0 14px 30px rgba(5,4,25,.4); animation: m-lyin 1s .7s var(--m-ease) backwards; }
.m-lytimer svg { width: 100%; height: auto; overflow: visible; }
.m-lytimer .tr { fill: none; stroke: rgba(205,197,255,.2); stroke-width: 7; } .m-lytimer .arc { fill: none; stroke: #b9adff; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0 100; transform: rotate(-90deg); transform-origin: 60px 60px; animation: m-lyarc 12s 1s linear infinite; }
.m-lytimer text { font: 700 13px var(--m-head); fill: #ecebff; } .m-lytimer .zz { fill: none; stroke: #fff3cc; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.m-lytimer .hand { transform-origin: 60px 60px; animation: m-lyhand 12s 1s linear infinite; } .m-lytimer .hand circle { fill: #fff3cc; filter: drop-shadow(0 0 4px rgba(255,236,170,.8)); }
.m-lytimer b { font: 700 clamp(9px, 1.9cqw, 12px)/1.15 var(--m-body); color: #dcd6ff; text-align: center; letter-spacing: .04em; }
@keyframes m-lytw { 0%, 100% { opacity: .25; scale: .7; } 50% { opacity: 1; scale: 1.15; } }
@keyframes m-lyshoot { 0%, 82% { opacity: 0; translate: 0 0; } 85% { opacity: 1; } 95%, 100% { opacity: 0; translate: 160% 52%; } }
@keyframes m-lyglow { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes m-lybreath { 0%, 100% { scale: 1 1; } 45% { scale: 1.012 1.035; } }
@keyframes m-lywave { 0% { opacity: 0; transform: scale(.35); } 15% { opacity: .95; } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes m-lyin { from { opacity: 0; transform: translateY(20px); } }
@keyframes m-lydrift { 0%, 100% { translate: 0 0; } 50% { translate: 2.4cqw -1.6cqw; } }
@keyframes m-lyz { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: .95; } 100% { opacity: 0; transform: translate(-3cqw, -12cqw) scale(1.25) rotate(-12deg); } }
@keyframes m-lyarc { 0% { stroke-dasharray: 0 100; } 30%, 36% { stroke-dasharray: 33.3 100; } 63%, 69% { stroke-dasharray: 66.6 100; } 94%, 100% { stroke-dasharray: 100 100; } }
@keyframes m-lyhand { 0% { rotate: 0deg; } 30%, 36% { rotate: 120deg; } 63%, 69% { rotate: 240deg; } 94%, 100% { rotate: 360deg; } }
.m-lyspecs > span { color: #cdc5ff; }
.m-lyspecs a { border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(205,197,255,.26); color: #f1efff !important; }
.m-lyspecs small { color: #dcd6ff; }
.m-lyspecs b { border-radius: 999px; background: linear-gradient(135deg, #7a6ee0, #4a3f9f); } .m-lyspecs a:nth-of-type(3n+2) b { background: linear-gradient(135deg, #c77da8, #8a4a8f); } .m-lyspecs a:nth-of-type(3n) b { background: linear-gradient(135deg, #e2b85c, #b5852a); color: #1d1a3f; }
.m-lyspecs a:is(:hover, :focus-visible) { background: rgba(255,255,255,.14); border-color: #b9adff; }
.m-lytile { border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(205,197,255,.22); color: #fff !important; backdrop-filter: blur(6px); }
.m-lytile .m-q8tx b { color: #fff; } .m-lytile .m-q8tx small { color: #cdc5ff; }
.m-lytile em { width: 18px; height: 18px; border-radius: 50%; background: #2a2470; box-shadow: inset var(--p) 0 0 0 #fff3cc, 0 0 8px rgba(255,236,170,.35); }
.m-lyimg { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #e3defa); }
.m-lytile:is(:hover, :focus-visible) { background: rgba(255,255,255,.12); border-color: #b9adff; }
body.hv-lullaby main section > .wrap > h2::after { content: ""; display: block; width: 120px; height: 14px; margin-top: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M0 7Q7.5 0 15 7T30 7T45 7T60 7T75 7T90 7T105 7T120 7' fill='none' stroke='%234a3f9f' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 120px 14px; }
body.hv-lullaby .pcard:hover, body.hv-lullaby .m-acard:hover { box-shadow: 0 0 0 2px #7a6ee0, 0 18px 40px rgba(29,26,63,.14); }
body.hv-lullaby .m-cta .m-band { border-radius: 28px; background: radial-gradient(circle, rgba(255,255,255,.5) 0 1px, transparent 1.6px) 0 0 / 90px 70px, radial-gradient(50% 80% at 85% 20%, rgba(156,143,232,.4), transparent 70%), linear-gradient(120deg, #15123a, #2e2775 60%, #4a3f9f); }
body.hv-lullaby .m-cta .m-band::before { width: 130px; height: 130px; right: 50px; top: -30px; background: transparent; box-shadow: inset -26px 10px 0 0 #fff3cc; opacity: .85; }
body.hv-lullaby .m-page-hero { background: radial-gradient(circle, rgba(255,255,255,.45) 0 1px, transparent 1.6px) 0 0 / 120px 100px, linear-gradient(120deg, #15123a, #2e2775); } body.hv-lullaby .m-page-hero .eyebrow { color: #cdc5ff; }
body.hv-lullaby footer.site { background: #15123a; color: #d6d2f2; border: 0; } body.hv-lullaby footer.site nav a { color: #cdc5ff; }
body.hv-lullaby .m-collage .m-card { border-radius: 26px; }

/* breathe (MUSICOZY): calm night buttons; a soft moonlight glow inside slowly inhales and exhales, on hover the arrow turns into a little equalizer playing */
body.bv-breathe .btn { border-radius: 999px; padding: 15px 28px; }
body.bv-breathe :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #5a4fc0, #4a3f9f 55%, #3f358c); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px rgba(74,63,159,.32); }
body.bv-breathe :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #43399a, #372e80 55%, #2d256b); color: #fff; }
body.bv-breathe .btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(205,197,255,.55), rgba(205,197,255,.12) 55%, transparent); translate: -50% -50%; scale: .35; opacity: .5; animation: m-brth 6s ease-in-out infinite; }
body.bv-breathe .pcard .btn::before { animation: none; opacity: 0; transition: opacity .4s, scale .6s var(--m-ease); }
body.bv-breathe .pcard .btn:is(:hover, :focus-visible)::before { opacity: .7; scale: .9; }
body.bv-breathe :is(.m-white, .m-btn-ghost)::before { background: radial-gradient(closest-side, rgba(122,110,224,.3), rgba(122,110,224,.08) 55%, transparent); }
body.bv-breathe .btn .arr { display: inline-block; transition: opacity .25s, transform .35s var(--m-ease); }
body.bv-breathe .btn::after { inset: auto; right: 26px; top: 50%; width: 15px; height: 14px; margin-top: -7px; transform: none; opacity: 0; transition: opacity .25s; background: linear-gradient(currentColor, currentColor) 0 100% / 2.4px 40% no-repeat, linear-gradient(currentColor, currentColor) 4.2px 100% / 2.4px 80% no-repeat, linear-gradient(currentColor, currentColor) 8.4px 100% / 2.4px 55% no-repeat, linear-gradient(currentColor, currentColor) 12.6px 100% / 2.4px 95% no-repeat; }
body.bv-breathe .btn:has(.arr):is(:hover, :focus-visible) .arr { opacity: 0; transform: translateX(6px); }
body.bv-breathe .btn:has(.arr):is(:hover, :focus-visible)::after { opacity: 1; animation: m-breq .9s linear infinite; }
body.bv-breathe .m-cta .btn.m-white:hover { color: #372e80; }
@keyframes m-brth { 0%, 100% { scale: .35; opacity: .35; } 45% { scale: 1; opacity: .9; } 60% { scale: 1; opacity: .9; } }
@keyframes m-breq { 0%, 100% { background-size: 2.4px 40%, 2.4px 80%, 2.4px 55%, 2.4px 95%; } 25% { background-size: 2.4px 90%, 2.4px 35%, 2.4px 100%, 2.4px 50%; } 50% { background-size: 2.4px 60%, 2.4px 100%, 2.4px 30%, 2.4px 75%; } 75% { background-size: 2.4px 100%, 2.4px 55%, 2.4px 80%, 2.4px 35%; } }

/* phones: batch 12.11 (5) heroes stack */
@media (max-width: 900px) {
  :is(body.hv-lullaby, body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-magmat, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-aimwall, body.hv-manual, body.hv-daycycle) .m-hero { min-height: 0; } :is(body.hv-lullaby, body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-magmat, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-aimwall, body.hv-manual, body.hv-daycycle) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr); }
  .m-lycats, .m-nrcats, .m-lucats, .m-dscats, .m-mgcats, .m-gycats, .m-pycats, .m-bkcats, .m-aimcats, .m-ibcats, .m-dycats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-lycats, .m-nrcats, .m-lucats, .m-dscats, .m-mgcats, .m-gycats, .m-pycats, .m-bkcats, .m-aimcats, .m-ibcats, .m-dycats) > a:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .m-lytile, .m-nrtile, .m-lutile, .m-dstile, .m-mgtile, .m-gytile, .m-pytile, .m-bktile, .m-aimtile, .m-ibtile, .m-dytile { gap: 9px; padding: 10px; } :is(.m-lyimg, .m-nrimg, .m-luimg, .m-dsimg, .m-mgimg, .m-gyimg, .m-pyimg, .m-bkimg, .m-aimimg, .m-ibimg, .m-dyimg) { width: 44px; height: 44px; }
  :is(.m-lytile, .m-nrtile, .m-lutile, .m-dstile, .m-mgtile, .m-gytile, .m-pytile, .m-bktile, .m-aimtile, .m-ibtile, .m-dytile) .m-q8tx b { font-size: 13px; padding-right: 0; } :is(.m-lytile, .m-nrtile, .m-lutile, .m-dstile, .m-mgtile, .m-gytile, .m-pytile, .m-bktile, .m-aimtile, .m-ibtile, .m-dytile) em { display: none; }
}
@media (max-width: 600px) {
  :is(.m-lyspecs, .m-nrspecs, .m-luspecs, .m-dsspecs, .m-mgspecs, .m-gyspecs, .m-pyspecs, .m-bkspecs, .m-aimspecs, .m-ibspecs, .m-dyspecs) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-lyspecs, .m-nrspecs, .m-luspecs, .m-dsspecs, .m-mgspecs, .m-gyspecs, .m-pyspecs, .m-bkspecs, .m-aimspecs, .m-ibspecs, .m-dyspecs) > span { grid-column: 1 / -1; }
  :is(.m-lyspecs, .m-nrspecs, .m-luspecs, .m-dsspecs, .m-mgspecs, .m-gyspecs, .m-pyspecs, .m-bkspecs, .m-aimspecs, .m-ibspecs, .m-dyspecs) a { flex-direction: column; align-items: flex-start; gap: 5px; padding: 6px 10px 8px 6px; border-radius: 12px; }
  :is(.m-lyspecs, .m-nrspecs, .m-luspecs, .m-dsspecs, .m-mgspecs, .m-gyspecs, .m-pyspecs, .m-bkspecs, .m-aimspecs, .m-ibspecs, .m-dyspecs) small { white-space: normal; line-height: 1.2; padding-left: 2px; }
}
@media (max-width: 900px) {
  /* the product scene moves up right under the lede so a real photo is on the first screen */
  :is(body.hv-lullaby, body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-magmat, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-aimwall, body.hv-manual, body.hv-daycycle) .m-hero .m-inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  :is(body.hv-lullaby, body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-magmat, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-aimwall, body.hv-manual, body.hv-daycycle) .m-hero .m-copy { display: contents; }
  :is(body.hv-lullaby, body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-magmat, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-aimwall, body.hv-manual, body.hv-daycycle) .m-hero .m-copy > * { order: 1; }
  :is(body.hv-lullaby, body.hv-nailbar, body.hv-lumen, body.hv-dresser, body.hv-magmat, body.hv-galley, body.hv-playtray, body.hv-backseat, body.hv-aimwall, body.hv-manual, body.hv-daycycle) .m-hero .m-copy > :is(.m-ctas, nav, .m-chips) { order: 3; }
  :is(.m-ly, .m-nr, .m-lu, .m-ds, .m-mg, .m-gy, .m-py, .m-bk, .m-aim, .m-ib, .m-dy) { order: 2; width: min(100%, 520px); align-self: center; margin: 8px 0 4px; }
}

/* nailbar (NOVAL): a salon nail desk; a half-moon lamp arches over marble, its LED strip lights end to end and the light pool shifts 3000K-4500K-6000K, spa tablets fizz in the gold pedicure bowls, a glint runs down the roll-on cuticle oil, rose-gold scissors rest on a folded towel, a pedi menu card steps soak-scrub-masque-lotion */
body.hv-nailbar .m-hero { background: radial-gradient(46% 60% at 78% 40%, #fff, transparent 70%), radial-gradient(30% 40% at 4% 94%, rgba(231,166,194,.3), transparent 70%), linear-gradient(120deg, #fbeff4, #fdf8f9 50%, #f6e6ee); }
body.hv-nailbar .m-hero h1 { font-weight: 600 !important; letter-spacing: -.01em; }
body.hv-nailbar .m-hero .eyebrow { color: #963d64; letter-spacing: .22em; }
.m-nr { aspect-ratio: 600 / 560; }
.m-nrwall { position: absolute; left: 0; right: 0; top: 4%; bottom: 22%; border-radius: 26px 26px 0 0; background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(185,82,127,.05) 46px 48px), linear-gradient(180deg, #f9e9f0, #f3dbe6); box-shadow: inset 0 -30px 40px rgba(185,82,127,.08); }
.m-nrdesk { position: absolute; left: 0; right: 0; top: 76%; bottom: 0; clip-path: polygon(3% 0, 97% 0, 100% 84%, 100% 100%, 0 100%, 0 84%); background: linear-gradient(180deg, transparent 84%, #c79bb0 84%, #a97389), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 90' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23c9b4bd' stroke-width='1.2' opacity='.6'%3E%3Cpath d='M0 30C80 22 120 52 220 40S360 8 450 30 560 60 600 50'/%3E%3Cpath d='M40 80C120 60 200 76 260 64S400 70 520 46'/%3E%3Cpath d='M300 6C330 20 380 18 420 4' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 84% no-repeat, linear-gradient(180deg, #fffdfd, #f1e7eb); box-shadow: 0 20px 40px rgba(59,31,45,.12); }
.m-nrpool, .m-nrpool::before, .m-nrpool::after { position: absolute; pointer-events: none; }
.m-nrpool { left: 9%; right: 9%; top: 28%; bottom: 3%; z-index: 1; background: radial-gradient(48% 22% at 50% 82%, rgba(255,196,120,.75), transparent 72%), radial-gradient(46% 52% at 50% 36%, rgba(255,214,160,.45), transparent 72%); animation: m-nrk1 12s 1.4s ease-in-out infinite; }
.m-nrpool::before, .m-nrpool::after { content: ""; inset: 0; opacity: 0; }
.m-nrpool::before { background: radial-gradient(48% 22% at 50% 82%, rgba(255,246,228,.95), transparent 72%), radial-gradient(46% 52% at 50% 36%, rgba(255,250,240,.6), transparent 72%); animation: m-nrk2 12s 1.4s ease-in-out infinite; }
.m-nrpool::after { background: radial-gradient(48% 22% at 50% 82%, rgba(214,230,255,.95), transparent 72%), radial-gradient(46% 52% at 50% 36%, rgba(220,234,255,.6), transparent 72%); animation: m-nrk3 12s 1.4s ease-in-out infinite; }
.m-nrlamp { position: absolute; left: 0; top: 0; width: 100%; height: auto; z-index: 2; overflow: visible; filter: drop-shadow(0 14px 16px rgba(59,31,45,.25)); }
.m-nrlamp .body { fill: none; stroke: #3b1f2d; stroke-width: 26; stroke-linecap: round; }
.m-nrlamp .led { fill: none; stroke: #ffd9a3; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0 100; filter: drop-shadow(0 0 6px rgba(255,214,160,.9)); animation: m-nrled 1.6s .3s var(--m-ease) forwards, m-nrledc 12s 1.4s ease-in-out infinite; }
.m-nrlamp .foot { fill: #3b1f2d; }
.m-nrkel { position: absolute; right: 0; top: 70%; z-index: 4; width: 17%; height: 7%; border-radius: 999px; background: #3b1f2d; box-shadow: 0 8px 18px rgba(59,31,45,.3), inset 0 0 0 1.5px rgba(255,255,255,.15); }
.m-nrkel i { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(10px, 2.4cqw, 14px)/1 var(--m-body); font-style: normal; letter-spacing: .04em; color: #ffd9a3; opacity: 0; animation: m-nrkt 12s calc(1.4s + var(--k, 0s)) ease-in-out infinite; }
.m-nrkel i:nth-child(2) { color: #fff6e4; --k: 4s; } .m-nrkel i:nth-child(3) { color: #d6e6ff; --k: 8s; }
.m-nrmenu { position: absolute; left: 0; top: 4%; z-index: 4; width: 29%; padding: 2.2cqw 2.4cqw 2cqw; border-radius: 14px; background: #fff; box-shadow: 0 14px 30px rgba(59,31,45,.14), inset 0 0 0 1px rgba(185,82,127,.18); rotate: -3deg; animation: m-nrin 1s .5s var(--m-ease) backwards; }
.m-nrmenu small { display: block; margin-bottom: 1.2cqw; font: 700 clamp(9px, 1.9cqw, 11.5px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #963d64; }
.m-nrmenu ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .8cqw; }
.m-nrmenu li { display: flex; align-items: center; gap: 1.4cqw; padding: .6cqw .8cqw; border-radius: 8px; font: 600 clamp(10px, 2.3cqw, 14px)/1.1 var(--m-head); color: #3b1f2d; animation: m-nrstep 8s calc(1.6s + var(--i) * 2s) ease-in-out infinite; }
.m-nrmenu li b { display: grid; place-items: center; flex: none; width: 3.6cqw; height: 3.6cqw; min-width: 16px; min-height: 16px; border-radius: 50%; background: #f3dbe6; color: #963d64; font: 700 clamp(9px, 1.8cqw, 11px)/1 var(--m-body); }
.m-nrtray { position: absolute; left: 27%; width: 44%; bottom: 9%; z-index: 3; }
.m-nrtrayimg { display: block; filter: drop-shadow(0 14px 12px rgba(120,80,20,.25)); animation: m-nrin 1s .15s var(--m-ease) backwards; transition: transform .45s var(--m-ease); } .m-nrtrayimg:hover { transform: translateY(-5px); }
.m-nrfizz { position: absolute; inset: 0; pointer-events: none; }
.m-nrfizz i { position: absolute; left: var(--x); top: var(--y); width: 1.4cqw; height: 1.4cqw; min-width: 5px; min-height: 5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, rgba(160,220,235,.7) 60%, rgba(120,200,220,.3)); box-shadow: 0 0 0 1px rgba(255,255,255,.6); opacity: 0; animation: m-nrfz 2.6s var(--d) ease-out infinite; }
.m-nroil { position: absolute; right: 17%; bottom: 14%; width: 5.4%; z-index: 3; overflow: hidden; border-radius: 6px 6px 3px 3px; animation: m-nrin 1s .35s var(--m-ease) backwards; }
.m-nroilimg { display: block; filter: drop-shadow(0 10px 8px rgba(59,31,45,.2)); }
.m-nrglint { position: absolute; left: 10%; right: 10%; top: -30%; height: 26%; background: linear-gradient(180deg, transparent, rgba(255,255,255,.85), transparent); animation: m-nrgl 4.5s 2s ease-in-out infinite; }
.m-nrtowel { position: absolute; right: 1%; bottom: 3%; width: 27%; height: 10%; z-index: 3; border-radius: 10px 10px 8px 8px; background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.4) 8px 10px), linear-gradient(180deg, #f6d6e3, #e8b6ca); box-shadow: 0 10px 18px rgba(59,31,45,.15), inset 0 -6px 0 rgba(150,61,100,.15), inset 0 4px 0 rgba(255,255,255,.5); }
.m-nrsciss { position: absolute; right: 9%; bottom: -8%; width: 10.5%; z-index: 4; rotate: 74deg; filter: drop-shadow(0 6px 5px rgba(59,31,45,.3)); animation: m-nrin 1s .5s var(--m-ease) backwards; transition: transform .45s var(--m-ease); } .m-nrsciss:hover { transform: translateY(-5px); }
@keyframes m-nrin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-nrled { to { stroke-dasharray: 100 100; } }
@keyframes m-nrledc { 0%, 28% { stroke: #ffd9a3; } 33%, 61% { stroke: #fff6e4; } 66%, 94% { stroke: #dbe8ff; } 100% { stroke: #ffd9a3; } }
@keyframes m-nrk1 { 0%, 28%, 100% { opacity: 1; } 33%, 94% { opacity: .15; } }
@keyframes m-nrk2 { 0%, 28% { opacity: 0; } 33%, 61% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes m-nrk3 { 0%, 61% { opacity: 0; } 66%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes m-nrkt { 0%, 1% { opacity: 0; } 3%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes m-nrstep { 0%, 2% { background: transparent; } 5%, 23% { background: #fbe9f1; box-shadow: inset 3px 0 0 #b9527f; } 26%, 100% { background: transparent; } }
@keyframes m-nrfz { 0% { opacity: 0; transform: translateY(0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-9cqw) scale(1.1); } }
@keyframes m-nrgl { 0%, 55% { top: -30%; } 85%, 100% { top: 110%; } }
.m-nrspecs > span { color: #963d64; }
.m-nrspecs a { border-radius: 10px; border: 1.5px solid #f0d3df; }
.m-nrspecs b { border-radius: 7px; background: #b9527f; font-family: var(--m-body); } .m-nrspecs a:nth-of-type(3n+2) b { background: #3b1f2d; } .m-nrspecs a:nth-of-type(3n) b { background: #a5803a; }
.m-nrspecs a:is(:hover, :focus-visible) { border-color: #b9527f; }
.m-nrtile { border-radius: 16px 16px 16px 16px; border: 1.5px solid #f0d3df; box-shadow: 0 10px 22px rgba(59,31,45,.06); }
.m-nrtile em { width: 20px; height: 10px; border: 2.5px solid #b9527f; border-bottom: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -3px 8px rgba(255,200,140,.7); }
.m-nrimg { border-radius: 14px; background: radial-gradient(circle at 50% 40%, #fff, #f8e8ef); }
.m-nrtile .m-q8tx small { color: #963d64; }
.m-nrtile:is(:hover, :focus-visible) { border-color: #b9527f; box-shadow: 0 16px 30px rgba(59,31,45,.12); }
body.hv-nailbar main section > .wrap > h2::after { content: ""; display: block; width: 64px; height: 20px; margin-top: 10px; border: 3px solid #b9527f; border-bottom: 0; border-radius: 40px 40px 0 0; box-shadow: 0 -4px 12px rgba(255,200,140,.55); }
body.hv-nailbar .pcard:hover, body.hv-nailbar .m-acard:hover { box-shadow: 0 0 0 2px #b9527f, 0 18px 40px rgba(59,31,45,.12); }
body.hv-nailbar .m-cta .m-band { border-radius: 24px; background: radial-gradient(60% 90% at 85% 100%, rgba(255,214,160,.35), transparent 70%), linear-gradient(120deg, #3b1f2d, #7d3557 60%, #b9527f); }
body.hv-nailbar .m-cta .m-band::before { width: 240px; height: 140px; right: 30px; top: auto; bottom: -20px; border-radius: 120px 120px 0 0; background: transparent; border: 10px solid rgba(255,255,255,.18); border-bottom: 0; box-shadow: 0 -10px 30px rgba(255,214,160,.25); }
body.hv-nailbar .m-page-hero { background: radial-gradient(50% 80% at 80% 100%, rgba(255,214,160,.25), transparent 70%), linear-gradient(120deg, #3b1f2d, #8a3e63); } body.hv-nailbar .m-page-hero .eyebrow { color: #f6c4d9; }
body.hv-nailbar footer.site { background: #3b1f2d; color: #ecd6e0; border: 0; } body.hv-nailbar footer.site nav a { color: #f6c4d9; }
body.hv-nailbar .m-collage .m-card { border-radius: 20px; }

/* halfmoon (NOVAL): on hover a thin half-moon lamp arch draws itself over the label, left leg to right leg, and a warm light pool rises under it */
@property --m-hmn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
body.bv-halfmoon .btn { border-radius: 14px; padding: 16px 28px; }
body.bv-halfmoon :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #c45d8a, #b9527f 55%, #a84a73); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 22px rgba(185,82,127,.3); }
body.bv-halfmoon :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #a3466f, #963d64 55%, #833557); color: #fff; }
body.bv-halfmoon .btn::before { content: ""; position: absolute; left: 9px; right: 9px; top: 5px; bottom: -3px; z-index: -1; pointer-events: none; border: 2px solid rgba(255,236,214,.95); border-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -2px 8px rgba(255,214,160,.6), inset 0 2px 8px rgba(255,214,160,.45); -webkit-mask: conic-gradient(from 270deg at 50% 100%, #000 var(--m-hmn), transparent 0); mask: conic-gradient(from 270deg at 50% 100%, #000 var(--m-hmn), transparent 0); transition: --m-hmn .7s var(--m-ease); }
body.bv-halfmoon .btn:is(:hover, :focus-visible)::before { --m-hmn: 180deg; }
body.bv-halfmoon :is(.m-white, .m-btn-ghost)::before { border-color: #b9527f; box-shadow: 0 -2px 8px rgba(185,82,127,.35); }
body.bv-halfmoon .btn::after { inset: 0; transform: none; background: radial-gradient(60% 70% at 50% 100%, rgba(255,214,160,.55), transparent 70%); opacity: 0; transition: opacity .5s .15s; }
body.bv-halfmoon .btn:is(:hover, :focus-visible)::after { transform: none; opacity: 1; }
body.bv-halfmoon :is(.m-white, .m-btn-ghost)::after { background: radial-gradient(60% 70% at 50% 100%, rgba(185,82,127,.18), transparent 70%); }
body.bv-halfmoon .m-cta .btn.m-white:hover { color: #963d64; }

/* lumen (ANYHI): a mirror wall; the real lighted full-length mirror switches on, a finger taps the smart touch button and the light cycles warm-natural-daylight with a mode readout, a glass sheen sweeps across each mirror, dimension lines draw 62.6 x 23.3 in; real round, oval and framed mirrors beside it */
body.hv-lumen .m-hero { background: radial-gradient(40% 55% at 72% 40%, #fffdf8, transparent 70%), radial-gradient(30% 40% at 4% 96%, rgba(217,190,140,.25), transparent 70%), linear-gradient(120deg, #f6efe4, #fbf8f3 50%, #f1e8da); }
body.hv-lumen .m-hero h1 { font-weight: 500 !important; letter-spacing: .005em; font-size: clamp(40px, 4.8vw, 70px) !important; line-height: 1 !important; }
body.hv-lumen .m-hero .eyebrow { color: #6e5432; letter-spacing: .26em; }
.m-lu { aspect-ratio: 600 / 560; }
.m-luwall { position: absolute; left: 4%; right: 0; top: 4%; bottom: 8%; border-radius: 6px; background: linear-gradient(90deg, transparent 0 calc(50% - .5px), rgba(138,108,66,.1) calc(50% - .5px) calc(50% + .5px), transparent 0) 0 0 / 25% 100%, linear-gradient(180deg, #fbf6ee, #efe4d3); box-shadow: inset 0 0 0 1px rgba(138,108,66,.12); }
.m-lufloor { position: absolute; left: 0; right: -2%; bottom: 0; height: 10%; border-radius: 4px; background: repeating-linear-gradient(90deg, #d9c19b 0 58px, #cfb68e 58px 60px), #d9c19b; box-shadow: inset 0 6px 10px rgba(80,55,20,.18); }
.m-ludims { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; }
.m-ludims path { fill: none; stroke: #6e5432; stroke-width: 1.6; stroke-dasharray: 0 100; animation: m-ludraw 1.4s 1.2s var(--m-ease) forwards; } .m-ludims .h path { animation-delay: 1.6s; }
.m-ludims text { font: 600 14px var(--m-body); fill: #6e5432; letter-spacing: .04em; opacity: 0; animation: m-lufade .6s 2.2s forwards; }
.m-lutall { position: absolute; left: 33%; width: 29%; top: 3%; z-index: 3; overflow: hidden; border-radius: 3px; box-shadow: 0 26px 40px rgba(43,36,28,.28), 0 0 0 1px rgba(110,84,50,.25); animation: m-luin 1s .1s var(--m-ease) backwards; }
.m-lutallimg { display: block; }
.m-ludark, .m-lutint, .m-lubloom, .m-lusheen { position: absolute; inset: 0; pointer-events: none; }
.m-ludark { background: rgba(28,20,10,.62); animation: m-luon 1.4s .7s ease-out forwards; }
.m-lutint { opacity: 0; mix-blend-mode: multiply; } .m-lutint.t1 { background: #ffd59c; animation: m-lut1 12s 2s ease-in-out infinite; } .m-lutint.t3 { background: #d5e4ff; animation: m-lut3 12s 2s ease-in-out infinite; }
.m-lubloom { background: radial-gradient(10% 6% at 8% 50%, rgba(255,244,214,.6), transparent), radial-gradient(10% 6% at 92% 50%, rgba(255,244,214,.6), transparent); box-shadow: inset 0 0 22px rgba(255,236,190,.45); opacity: 0; animation: m-lufade .8s 1.4s forwards; }
.m-lusheen { background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.6) 48%, rgba(255,255,255,.15) 54%, transparent 62%); translate: -110% 0; animation: m-lush 7s 2.2s ease-in-out infinite; }
.m-luoval .m-lusheen { animation-delay: 3.2s; } .m-luround .m-lusheen { animation-delay: 4s; } .m-luframe .m-lusheen { animation-delay: 4.8s; }
.m-luoval, .m-luround, .m-luframe { position: absolute; z-index: 3; overflow: hidden; transition: transform .45s var(--m-ease); }
.m-luoval { left: 1%; top: 10%; width: 22%; border-radius: 50%; box-shadow: 0 16px 26px rgba(43,36,28,.2), 0 0 0 3px #fff, 0 0 0 4px rgba(138,108,66,.25); animation: m-luin 1s .3s var(--m-ease) backwards; }
.m-luround { right: 0; top: 4%; width: 33%; border-radius: 50%; box-shadow: 0 18px 30px rgba(43,36,28,.2), 0 0 0 4px #f8f3ea, 0 0 0 5px rgba(138,108,66,.3); animation: m-luin 1s .45s var(--m-ease) backwards; }
.m-luframe { right: 1%; bottom: 13%; width: 33%; border-radius: 2px; box-shadow: 0 16px 26px rgba(43,36,28,.22); animation: m-luin 1s .6s var(--m-ease) backwards; }
.m-lushape { display: block; } .m-luoval .m-lushape img, .m-luround .m-lushape img { transform: scale(1.04); }
:is(.m-luoval, .m-luround, .m-luframe):hover { transform: translateY(-6px); }
.m-luctl { position: absolute; left: 63.5%; top: 46%; z-index: 4; display: flex; align-items: center; gap: 1.6cqw; animation: m-luin 1s .9s var(--m-ease) backwards; }
.m-lutouch { display: grid; gap: 1.2cqw; padding: 1.4cqw 1.1cqw; border-radius: 999px; background: #2b241c; box-shadow: 0 10px 20px rgba(43,36,28,.3); }
.m-lutouch i { position: relative; display: block; width: 3.4cqw; height: 3.4cqw; min-width: 14px; min-height: 14px; border-radius: 50%; border: 1.5px solid rgba(232,214,180,.8); }
.m-lutouch .pw::before { content: ""; position: absolute; left: 50%; top: 18%; width: 1.5px; height: 40%; margin-left: -.75px; background: #e8d6b4; }
.m-lutouch .cl { background: conic-gradient(#ffd59c 0 33%, #fff6e6 0 66%, #d5e4ff 0); }
.m-lutouch .br::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: linear-gradient(90deg, #e8d6b4 50%, transparent 0); }
.m-lutouch .cl b { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #fff3d6; opacity: 0; animation: m-lutap 4s 2s ease-out infinite; }
.m-lumode { position: relative; display: block; width: 15cqw; min-width: 64px; height: 6.4cqw; min-height: 26px; border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(43,36,28,.14), inset 0 0 0 1px rgba(138,108,66,.2); }
.m-lumode i { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 4px; text-align: center; font: 700 clamp(9px, 1.9cqw, 12px)/1.05 var(--m-body); font-style: normal; color: #2b241c; opacity: 0; animation: m-lumd 12s calc(2s + var(--k)) ease-in-out infinite; }
.m-lumode i:nth-child(1) { color: #8a5a1c; } .m-lumode i:nth-child(3) { color: #2f5a8a; }
@keyframes m-luin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-luon { 0% { opacity: 1; } 30% { opacity: .2; } 45% { opacity: .55; } 100% { opacity: 0; } }
@keyframes m-lufade { to { opacity: 1; } }
@keyframes m-ludraw { to { stroke-dasharray: 100 100; } }
@keyframes m-lut1 { 0%, 30% { opacity: .55; } 34%, 96% { opacity: 0; } 100% { opacity: .55; } }
@keyframes m-lut3 { 0%, 63% { opacity: 0; } 67%, 96% { opacity: .5; } 100% { opacity: 0; } }
@keyframes m-lumd { 0%, 1% { opacity: 0; } 4%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes m-lush { 0%, 55% { translate: -110% 0; } 85%, 100% { translate: 110% 0; } }
@keyframes m-lutap { 0%, 4% { opacity: 0; transform: scale(.6); } 8% { opacity: 1; } 30%, 100% { opacity: 0; transform: scale(1.9); } }
.m-luspecs > span { color: #6e5432; }
.m-luspecs a { border-radius: 4px; border: 1px solid #e6d9c4; }
.m-luspecs b { border-radius: 2px; background: #8a6c42; font-family: var(--m-body); letter-spacing: .02em; } .m-luspecs a:nth-of-type(3n+2) b { background: #2b241c; } .m-luspecs a:nth-of-type(3n) b { background: #5f7f91; }
.m-luspecs a:is(:hover, :focus-visible) { border-color: #8a6c42; }
.m-lutile { border-radius: 8px; border: 1px solid #e6d9c4; box-shadow: 0 10px 22px rgba(43,36,28,.06); }
.m-lutile em { width: 12px; height: 20px; border-radius: 2px; border: 2px solid #8a6c42; background: linear-gradient(115deg, #fff 40%, #f1e6d3 60%); } .m-lutile em.s1 { width: 18px; height: 18px; border-radius: 50%; } .m-lutile em.s2 { width: 20px; height: 15px; border-width: 3px; border-color: #6e5432; } .m-lutile em.s3 { width: 16px; height: 18px; box-shadow: inset 6px 0 0 -4px #8a6c42; }
.m-luimg { border-radius: 6px; background: linear-gradient(135deg, #fff, #f3ece1); }
.m-lutile .m-q8tx b { font-family: var(--m-body); font-weight: 700; font-size: 14.5px; } .m-lutile .m-q8tx small { color: #6e5432; }
.m-lutile:is(:hover, :focus-visible) { border-color: #8a6c42; box-shadow: 0 16px 30px rgba(43,36,28,.12); }
body.hv-lumen main section > .wrap > h2::after { content: ""; display: block; width: 110px; height: 8px; margin-top: 12px; background: radial-gradient(circle, #f4d9a0 0 2.4px, transparent 3px) 0 50% / 14px 8px repeat-x, linear-gradient(#8a6c42, #8a6c42) 0 50% / 100% 1px no-repeat; }
body.hv-lumen .pcard:hover, body.hv-lumen .m-acard:hover { box-shadow: 0 0 0 1.5px #8a6c42, 0 18px 40px rgba(43,36,28,.12); }
body.hv-lumen .m-cta .m-band { border-radius: 14px; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%), linear-gradient(120deg, #2b241c, #5a4429 60%, #8a6c42); }
body.hv-lumen .m-cta .m-band::before { width: 150px; height: 230px; right: 50px; top: -40px; border-radius: 4px; background: transparent; box-shadow: inset 0 0 0 2px rgba(244,217,160,.3); rotate: 0deg; -webkit-mask: none; }
body.hv-lumen .m-page-hero { background: linear-gradient(115deg, transparent 45%, rgba(255,255,255,.06) 52%, transparent 60%), linear-gradient(120deg, #2b241c, #6e5432); } body.hv-lumen .m-page-hero .eyebrow { color: #e8d6b4; }
body.hv-lumen footer.site { background: #2b241c; color: #e3d7c4; border: 0; } body.hv-lumen footer.site nav a { color: #e8d6b4; }
body.hv-lumen .m-collage .m-card { border-radius: 10px; }
body.hv-lumen .pcard h3 { font-family: var(--m-body); }

/* marquee (ANYHI): two rows of tiny Hollywood bulbs line the top and bottom edge; on hover a warm light chases along them and the button glows like a lit vanity */
body.bv-marquee .btn { border-radius: 8px; padding: 17px 28px; letter-spacing: .02em; }
body.bv-marquee :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #957548, #8a6c42 55%, #7d6139); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px rgba(138,108,66,.3); }
body.bv-marquee :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #3a3126, #2b241c 55%, #221c15); color: #fff; box-shadow: 0 0 0 1px rgba(244,217,160,.4), 0 0 26px rgba(255,214,150,.45), 0 10px 22px rgba(43,36,28,.3); }
body.bv-marquee .btn::after { inset: 4px 10px; transform: none; transition: opacity .3s; opacity: .55; background: radial-gradient(circle, rgba(255,246,222,.85) 0 1.2px, transparent 1.7px) 0 0 / 11px 6px repeat-x, radial-gradient(circle, rgba(255,246,222,.85) 0 1.2px, transparent 1.7px) 0 100% / 11px 6px repeat-x; }
body.bv-marquee .btn:hover::after { transform: none; opacity: .35; }
body.bv-marquee .btn::before { content: ""; position: absolute; inset: 3px 10px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s; background: linear-gradient(90deg, transparent, #fff1c8 35%, #ffe2a0 65%, transparent) -50% 0 / 45% 100% no-repeat; -webkit-mask: radial-gradient(circle, #000 0 2.2px, transparent 2.8px) 0 0 / 11px 7px repeat-x, radial-gradient(circle, #000 0 2.2px, transparent 2.8px) 0 100% / 11px 7px repeat-x; mask: radial-gradient(circle, #000 0 2.2px, transparent 2.8px) 0 0 / 11px 7px repeat-x, radial-gradient(circle, #000 0 2.2px, transparent 2.8px) 0 100% / 11px 7px repeat-x; }
body.bv-marquee .btn:is(:hover, :focus-visible)::before { opacity: 1; animation: m-mq 1.3s linear infinite; }
body.bv-marquee :is(.m-white, .m-btn-ghost)::after { background: radial-gradient(circle, rgba(138,108,66,.6) 0 1.2px, transparent 1.7px) 0 0 / 11px 6px repeat-x, radial-gradient(circle, rgba(138,108,66,.6) 0 1.2px, transparent 1.7px) 0 100% / 11px 6px repeat-x; }
body.bv-marquee :is(.m-white, .m-btn-ghost)::before { background: linear-gradient(90deg, transparent, #c99a4a 35%, #b5853a 65%, transparent) -50% 0 / 45% 100% no-repeat; }
body.bv-marquee .m-hero .m-btn-ghost:hover::before { background: linear-gradient(90deg, transparent, #fff1c8 35%, #ffe2a0 65%, transparent) -50% 0 / 45% 100% no-repeat; }
body.bv-marquee .m-cta .btn.m-white:hover { color: #6e5432; }
@keyframes m-mq { from { background-position: -60% 0; } to { background-position: 160% 0; } }

/* dresser (Spaco): a bedroom wall; a fluted walnut six-drawer dresser whose drawers slide out one after another, a tape measure runs along the top and reads the width, a brass lamp switches on; real listing photos hang above as a framed gallery */
body.hv-dresser .m-hero { background: radial-gradient(44% 58% at 76% 40%, #fffdf9, transparent 70%), radial-gradient(30% 40% at 4% 96%, rgba(216,185,143,.28), transparent 70%), linear-gradient(120deg, #f5ede2, #faf7f2 50%, #efe4d5); }
body.hv-dresser .m-hero h1 { letter-spacing: -.015em; }
body.hv-dresser .m-hero .eyebrow { color: #6c4d30; letter-spacing: .22em; }
.m-ds { aspect-ratio: 600 / 560; }
.m-dswall { position: absolute; left: 0; right: 0; top: 0; bottom: 7%; border-radius: 22px 22px 4px 4px; background: linear-gradient(180deg, transparent 0 51.5%, rgba(138,100,64,.25) 51.5% 52.2%, transparent 52.2%), linear-gradient(180deg, #f6efe5, #ece0cf); box-shadow: inset 0 0 0 1px rgba(138,100,64,.12); }
.m-dsfloor { position: absolute; left: -1%; right: -1%; bottom: 0; height: 9%; border-radius: 4px; background: repeating-linear-gradient(135deg, #c9a77c 0 22px, #c19e72 22px 24px, #cdab80 24px 46px, #bf9a6d 46px 48px); box-shadow: inset 0 8px 12px rgba(60,40,20,.2); }
.m-dsframe { position: absolute; z-index: 2; display: block; padding: 1.4cqw; background: #fff; box-shadow: 0 0 0 max(4px, 1.1cqw) #6c4d30, 0 18px 28px rgba(42,33,25,.25); animation: m-dsin 1s var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-dsframe:hover { transform: translateY(-5px); }
.m-dsframe.f1 { left: 4%; top: 6%; width: 48%; animation-delay: .1s; } .m-dsframe.f2 { right: 5%; top: 3%; width: 21%; animation-delay: .3s; } .m-dsframe.f3 { left: 58%; top: 22%; width: 15%; animation-delay: .45s; rotate: -2deg; }
.m-dsart { display: block; }
.m-dsbody { position: absolute; left: 7%; right: 7%; bottom: 6.5%; height: 38%; z-index: 3; animation: m-dsin 1s .2s var(--m-ease) backwards; }
.m-dsbody::before, .m-dsbody::after { content: ""; position: absolute; bottom: 0; width: 2.6%; height: 13%; background: linear-gradient(90deg, #5a3f26, #3e2a18); border-radius: 0 0 3px 3px; transform: skewX(6deg); } .m-dsbody::before { left: 6%; transform: skewX(-6deg); } .m-dsbody::after { right: 6%; }
.m-dsgrid { position: absolute; left: 0; right: 0; top: 0; bottom: 13%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 1.1cqw; padding: 1.3cqw; border-radius: 5px; background: linear-gradient(180deg, #4a321d, #3b2816); border-top: max(5px, 1.4cqw) solid #7a5634; box-shadow: 0 22px 30px rgba(42,33,25,.3), inset 0 0 0 1px rgba(0,0,0,.25); }
.m-dsgrid i { position: relative; display: block; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 2px, transparent 2px 5px, rgba(0,0,0,.12) 5px 6.5px, transparent 6.5px 9px), linear-gradient(180deg, #a27a52, #8a6440 55%, #7a5634); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.18); transform-origin: 50% 100%; animation: m-dsdr 8.4s calc(1.2s + var(--i) * .7s) var(--m-ease) infinite; }
.m-dsgrid i::after { content: ""; position: absolute; left: 50%; top: 22%; width: 26%; height: max(3px, .9cqw); margin-left: -13%; border-radius: 3px; background: linear-gradient(180deg, #f2d48c, #c9a24e 60%, #a8822e); box-shadow: 0 2px 3px rgba(0,0,0,.35); }
.m-dslamp { position: absolute; left: 11%; bottom: 44%; width: 12%; height: 22%; z-index: 4; animation: m-dsin 1s .5s var(--m-ease) backwards; }
.m-dslamp .shade { position: absolute; left: 0; right: 0; top: 0; height: 42%; clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #fbf3e3, #ecdcc0); box-shadow: inset 0 -4px 0 rgba(0,0,0,.05); }
.m-dslamp .stem { position: absolute; left: 47%; top: 42%; bottom: 0; width: 6%; background: linear-gradient(90deg, #f2d48c, #b38a3a); } .m-dslamp .stem::after { content: ""; position: absolute; left: -350%; right: -350%; bottom: 0; height: 9%; border-radius: 50%; background: #b38a3a; }
.m-dslamp .glow { position: absolute; left: -90%; right: -90%; top: -40%; bottom: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,214,140,.65), rgba(255,214,140,.15) 60%, transparent); opacity: 0; animation: m-dson .5s 1.2s ease-out forwards, m-dsflick 6s 2s ease-in-out infinite; }
.m-dsvase { position: absolute; right: 13%; bottom: 44%; width: 8%; height: auto; z-index: 4; overflow: visible; animation: m-dsin 1s .6s var(--m-ease) backwards; }
.m-dsvase .v { fill: #e9dfcf; stroke: #c9b79d; stroke-width: 1.2; } .m-dsvase .br { fill: none; stroke: #6f5a3e; stroke-width: 1.6; stroke-linecap: round; } .m-dsvase .lv { fill: #8f9a6a; }
.m-dsvase .lv, .m-dsvase .br { transform-origin: 30px 70px; animation: m-dssway 5s ease-in-out infinite; }
.m-dstape { position: absolute; right: 7%; bottom: 43.4%; width: 86%; height: 3.2%; z-index: 5; pointer-events: none; }
.m-dstape .band { position: absolute; right: 3.2cqw; top: 22%; height: 56%; width: 0; background: repeating-linear-gradient(90deg, #2a2119 0 1px, transparent 1px 6px), linear-gradient(180deg, #ffd23f, #f1bc12); background-size: 6px 45%, auto; background-repeat: repeat-x, no-repeat; background-position: 0 0, 0 0; box-shadow: 0 2px 3px rgba(0,0,0,.25); animation: m-dstape 10s 1.4s var(--m-ease) infinite; }
.m-dstape .case { position: absolute; right: 0; top: 50%; width: 4.2cqw; height: 4.2cqw; min-width: 18px; min-height: 18px; translate: 0 -50%; border-radius: 30%; background: radial-gradient(circle, #2a2119 0 18%, #f1bc12 20% 55%, #c9950b 57%); box-shadow: 0 3px 6px rgba(0,0,0,.3); }
.m-dstape b { position: absolute; left: 50%; bottom: 130%; translate: -50% 0; padding: .7cqw 1.6cqw; border-radius: 999px; background: #2a2119; color: #ffd23f; font: 700 clamp(10px, 2.2cqw, 13px)/1 var(--m-body); white-space: nowrap; opacity: 0; animation: m-dslbl 10s 1.4s ease-in-out infinite; }
@keyframes m-dsin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-dsdr { 0%, 4% { transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.18); } 10%, 22% { transform: translateY(5%) scale(1.06, 1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 14px rgba(0,0,0,.45); } 30%, 100% { transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.18); } }
@keyframes m-dson { to { opacity: 1; } }
@keyframes m-dsflick { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@keyframes m-dssway { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@keyframes m-dstape { 0% { width: 0; } 22%, 78% { width: calc(100% - 3.2cqw); } 92%, 100% { width: 0; } }
@keyframes m-dslbl { 0%, 18% { opacity: 0; } 24%, 74% { opacity: 1; } 80%, 100% { opacity: 0; } }
.m-dsspecs > span { color: #6c4d30; }
.m-dsspecs a { border-radius: 8px; border: 1px solid #e5d7c3; }
.m-dsspecs b { border-radius: 5px; font-family: var(--m-body); background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, transparent 2px 5px), #8a6440; } .m-dsspecs a:nth-of-type(3n+2) b { background: #2a2119; } .m-dsspecs a:nth-of-type(3n) b { background: #6f8f7a; }
.m-dsspecs a:is(:hover, :focus-visible) { border-color: #8a6440; }
.m-dstile { border-radius: 12px; border: 1px solid #e5d7c3; box-shadow: 0 10px 22px rgba(42,33,25,.06); }
.m-dstile em { width: 20px; height: 15px; border-radius: 2px; background: linear-gradient(#c9a24e, #c9a24e) 50% 30% / 8px 2px no-repeat, linear-gradient(#c9a24e, #c9a24e) 50% 78% / 8px 2px no-repeat, linear-gradient(180deg, #8a6440 0 47%, #4a321d 47% 53%, #8a6440 53%); }
.m-dsimg { border-radius: 8px; background: linear-gradient(135deg, #fff, #f1e9de); }
.m-dstile .m-q8tx small { color: #6c4d30; }
.m-dstile:is(:hover, :focus-visible) { border-color: #8a6440; box-shadow: 0 16px 30px rgba(42,33,25,.12); }
body.hv-dresser main section > .wrap > h2::after { content: ""; display: block; width: 120px; height: 10px; margin-top: 12px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 6px), #8a6440; }
body.hv-dresser .pcard:hover, body.hv-dresser .m-acard:hover { box-shadow: 0 0 0 1.5px #8a6440, 0 18px 40px rgba(42,33,25,.12); }
body.hv-dresser .m-cta .m-band { border-radius: 18px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 3px, transparent 3px 9px, rgba(0,0,0,.08) 9px 11px, transparent 11px 16px), linear-gradient(120deg, #2a2119, #5a3f26 60%, #8a6440); }
body.hv-dresser .m-cta .m-band::before { width: 200px; height: 14px; right: 40px; top: 30px; border-radius: 3px; background: linear-gradient(180deg, #f2d48c, #c9a24e 60%, #a8822e); opacity: .5; box-shadow: none; }
body.hv-dresser .m-page-hero { background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 3px, transparent 3px 9px, rgba(0,0,0,.07) 9px 11px, transparent 11px 16px), linear-gradient(120deg, #2a2119, #6c4d30); } body.hv-dresser .m-page-hero .eyebrow { color: #e9cf9a; }
body.hv-dresser footer.site { background: #2a2119; color: #e3d6c4; border: 0; } body.hv-dresser footer.site nav a { color: #e9cf9a; }
body.hv-dresser .m-collage .m-card { border-radius: 14px; }

/* dovetail (Spaco): a walnut-grain button; on hover pale maple pins slide in from the left and walnut tails from the right along the bottom edge and lock together like a drawer joint */
body.bv-dovetail .btn { border-radius: 6px; padding: 15px 26px 19px; }
body.bv-dovetail :is(.btn.accent, .pcard .btn, .m-btn-main) { background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 7px, rgba(0,0,0,.06) 7px 8px, transparent 8px 13px), linear-gradient(180deg, #94704a, #8a6440 55%, #7a5634); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 22px rgba(138,100,64,.3); }
body.bv-dovetail :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 7px, rgba(0,0,0,.08) 7px 8px, transparent 8px 13px), linear-gradient(180deg, #3a2e23, #2a2119 55%, #211a13); color: #fff; }
body.bv-dovetail .btn::before, body.bv-dovetail .btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; top: auto; z-index: -1; pointer-events: none; opacity: 1; transition: transform .55s var(--m-ease); }
body.bv-dovetail .btn::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 6'%3E%3Cpath d='M2 6 0 0H8L6 6Z' fill='%23e9cf9a'/%3E%3C/svg%3E") 0 0 / 16px 6px repeat-x; transform: translateX(-101%); }
body.bv-dovetail .btn::after { inset: auto 0 0 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 6'%3E%3Cpath d='M6 6 8 0H16L14 6Z' fill='%23c9a24e'/%3E%3C/svg%3E") 0 0 / 16px 6px repeat-x; transform: translateX(101%); }
body.bv-dovetail .btn:is(:hover, :focus-visible)::before, body.bv-dovetail .btn:is(:hover, :focus-visible)::after { transform: none; }
body.bv-dovetail .btn .arr { display: inline-block; transition: transform .35s var(--m-ease); } body.bv-dovetail .btn:hover .arr { transform: translateX(4px); }
body.bv-dovetail .m-cta .btn.m-white:hover { color: #6c4d30; }
@media (min-width: 901px) and (max-width: 1180px) {
  /* 5-6 category tiles do not fit one row on small desktops: three per row */
  :is(.m-lycats, .m-nrcats, .m-lucats, .m-dscats, .m-mgcats, .m-gycats, .m-pycats, .m-bkcats, .m-aimcats, .m-ibcats, .m-dycats):has(> a:nth-of-type(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== batch 12.11.2026 (6): magmat/ratchet (SEESE), galley (SHURFLO), playtray (SKYFIELD), backseat (Smatto); shared layout rules are in the batch (5) block ===== */
/* magmat (SEESE): an open toolbox drawer lined with a magnetic tool mat; real listing photos drop in and snap onto the magnets with a ripple, loose bits get tugged and snap back, a ratchet head clicks forward and reverse */
body.hv-magmat .m-hero { color: #fff; background: radial-gradient(40% 55% at 76% 42%, rgba(194,74,18,.3), transparent 70%), radial-gradient(30% 40% at 4% 96%, rgba(183,209,30,.1), transparent 70%), linear-gradient(45deg, transparent 44%, rgba(255,255,255,.045) 44% 56%, transparent 56%) 0 0 / 24px 24px, linear-gradient(-45deg, transparent 44%, rgba(255,255,255,.045) 44% 56%, transparent 56%) 12px 12px / 24px 24px, linear-gradient(160deg, #131518, #1e2125 55%, #2a2e33); }
body.hv-magmat .m-hero h1 { color: #fff !important; letter-spacing: -.01em; font-stretch: 112%; }
body.hv-magmat .m-hero .eyebrow { color: #ff9a5c; letter-spacing: .2em; }
body.hv-magmat .m-hero .sub { color: rgba(235,237,240,.86); }
body.hv-magmat .m-hero .m-chips span { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #eceef0; }
.m-mg { aspect-ratio: 600 / 560; }
.m-mgbox { position: absolute; inset: 0; border-radius: 20px; background: linear-gradient(180deg, #3b4047, #2a2e33 70%, #23262a); box-shadow: 0 34px 60px rgba(0,0,0,.5), inset 0 0 0 1.5px rgba(255,255,255,.08), inset 0 3px 0 rgba(255,255,255,.1); }
.m-mgmat { position: absolute; left: 3.5%; right: 3.5%; top: 3.5%; bottom: 21%; border-radius: 12px; background: radial-gradient(circle at 44% 40%, #3d4046 0 16%, #24262a 20% 29%, transparent 31%) 0 0 / 6cqw 6cqw, linear-gradient(180deg, #17181b, #111214); box-shadow: inset 0 0 0 max(4px, 1.1cqw) #b7d11e, inset 0 0 0 calc(max(4px, 1.1cqw) + 2px) #0c0d0f, inset 0 10px 24px rgba(0,0,0,.7); }
.m-mgcase, .m-mgpliers, .m-mgrings, .m-mglevel { position: absolute; z-index: 3; display: block; filter: drop-shadow(0 12px 12px rgba(0,0,0,.55)); animation: m-mgdrop .85s var(--dd, 0s) cubic-bezier(.3,.7,.3,1) backwards, m-mgsnap 8s var(--sd, 2s) ease-in-out infinite; transition: transform .45s var(--m-ease); }
.m-mgcase:hover, .m-mgpliers:hover, .m-mgrings:hover, .m-mglevel:hover { transform: translateY(-6px); }
.m-mgcase { left: 7%; top: 7%; width: 50%; --dd: .1s; --sd: 2s; }
.m-mgpliers { left: 61%; top: 5.5%; width: 11%; rotate: -12deg; --dd: .4s; --sd: 4s; }
.m-mgrings { left: 75%; top: 8.5%; width: 19%; --dd: .7s; --sd: 6s; }
.m-mglevel { left: 7%; top: 59.5%; width: 58%; rotate: -1.5deg; --dd: 1s; --sd: 8s; }
.m-mglevel img { clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 86%, 37% 70%, 0 45%); } /* the listing photo has a pale reflection under the level */
.m-mgpulse { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.m-mgpulse i { position: absolute; left: var(--x); top: var(--y); width: 24cqw; height: 24cqw; margin: -12cqw 0 0 -12cqw; border-radius: 50%; border: 2px solid rgba(183,209,30,.85); box-shadow: 0 0 14px rgba(183,209,30,.35), inset 0 0 14px rgba(183,209,30,.25); opacity: 0; animation: m-mgpl 8s calc(1.2s + var(--i, 0) * 2s) ease-out infinite; }
.m-mgpulse i:nth-child(1) { --i: .4; } .m-mgpulse i:nth-child(2) { --i: 1.4; } .m-mgpulse i:nth-child(3) { --i: 2.4; } .m-mgpulse i:nth-child(4) { --i: 3.4; }
.m-mgbits { position: absolute; left: 70%; top: 60%; width: 24%; height: 15%; z-index: 3; }
.m-mgbits i { position: absolute; left: var(--x); bottom: 0; width: 12%; height: 100%; filter: drop-shadow(0 5px 4px rgba(0,0,0,.6)); animation: m-mgbit 6s calc(2.6s + var(--i) * .3s) ease-in-out infinite; }
.m-mgbits svg { display: block; width: 100%; height: 100%; overflow: visible; }
.m-mgbits .h { fill: #9aa1a8; } .m-mgbits .t { fill: #d6dade; } .m-mgbits .g { stroke: #5f656c; stroke-width: 2; } .m-mgbits i:nth-child(2n) .h { fill: #b7d11e; }
.m-mgrat { position: absolute; right: 4.5%; top: 29%; width: 21%; z-index: 4; display: grid; justify-items: center; gap: .9cqw; padding: 1.4cqw 1.2cqw 1.6cqw; border-radius: 16px; background: rgba(29,31,34,.92); box-shadow: 0 14px 26px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.1); animation: m-mgdrop .85s 1.3s cubic-bezier(.3,.7,.3,1) backwards; }
.m-mgrat svg { width: 100%; height: auto; overflow: visible; }
.m-mgrat .ring { fill: #2b2e33; stroke: #8a9097; stroke-width: 3; }
.m-mgrat .gear { fill: #c9ced3; transform-origin: 60px 60px; animation: m-mgclk 6s 1.8s infinite; } .m-mgrat .gear circle { fill: #e2e5e8; } .m-mgrat .sq { fill: #1d1f22; }
.m-mgrat .pawl { fill: #e2621f; transform-origin: 100px 34px; animation: m-mgpawl .34s 1.8s ease-out infinite; }
.m-mgrat b { display: flex; gap: .8cqw; }
.m-mgrat em { display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; min-width: 18px; min-height: 18px; border-radius: 6px; font: 800 clamp(10px, 2.2cqw, 13px)/1 var(--m-head); font-style: normal; color: #8a9097; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); animation: m-mgfr 6s 1.8s steps(1, end) infinite; } .m-mgrat em.r { animation-delay: -1.2s; }
.m-mgrat small { font: 600 clamp(8.5px, 1.8cqw, 11.5px)/1.15 var(--m-body); color: #c9ced3; text-align: center; letter-spacing: .02em; }
.m-mgfront { position: absolute; left: 0; right: 0; bottom: 0; height: 19%; z-index: 4; border-radius: 6px 6px 20px 20px; background: linear-gradient(180deg, #d85c1f, #c24a12 50%, #a53d0e); box-shadow: inset 0 2px 0 rgba(255,255,255,.28), inset 0 -4px 0 rgba(0,0,0,.2), 0 -6px 14px rgba(0,0,0,.35); }
.m-mgfront .handle { position: absolute; left: 34%; right: 7%; top: 34%; height: 24%; border-radius: 999px; background: linear-gradient(180deg, #f6f7f8, #c1c6cb 42%, #8a9097 58%, #d9dcdf); box-shadow: 0 5px 8px rgba(0,0,0,.35); }
.m-mgfront .plate { position: absolute; left: 5%; top: 26%; height: 48%; display: grid; place-items: center; padding: 0 2.4cqw; border-radius: 6px; background: radial-gradient(circle, #8a9097 0 1.6px, transparent 2.2px) 5px 50% / calc(100% - 10px) 100% no-repeat space, #1d1f22; color: #b7d11e; font: 800 clamp(10px, 2.4cqw, 15px)/1 var(--m-head); font-style: normal; letter-spacing: .04em; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
@keyframes m-mgdrop { 0% { opacity: 0; transform: translateY(-9cqw) scale(1.05); } 60% { opacity: 1; transform: translateY(.8cqw) scale(.99); } 80% { transform: translateY(-.3cqw); } 100% { transform: none; } }
@keyframes m-mgsnap { 0%, 70% { translate: 0 0; } 79% { translate: 0 -1.8cqw; } 83% { translate: 0 .35cqw; } 87%, 100% { translate: 0 0; } }
@keyframes m-mgpl { 0%, 82% { opacity: 0; transform: scale(.25); } 84% { opacity: .95; } 100% { opacity: 0; transform: scale(1.2); } }
@keyframes m-mgbit { 0%, 58% { translate: 0 0; rotate: 0deg; } 66% { translate: 0 -3.4cqw; rotate: -10deg; } 72% { translate: 0 .5cqw; rotate: 2deg; } 76%, 100% { translate: 0 0; rotate: 0deg; } }
@keyframes m-mgclk { 0% { rotate: 0deg; animation-timing-function: steps(8, end); } 45%, 50% { rotate: 120deg; } 50% { animation-timing-function: steps(8, end); } 95%, 100% { rotate: 0deg; } }
@keyframes m-mgpawl { 0% { rotate: 0deg; } 30% { rotate: -9deg; } 100% { rotate: 0deg; } }
@keyframes m-mgfr { 0% { background: #b7d11e; color: #1d1f22; } 50%, 100% { background: transparent; color: #8a9097; } }
.m-mgspecs > span { color: #ff9a5c; }
.m-mgspecs a { border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #fff !important; }
.m-mgspecs small { color: #d4d7db; }
.m-mgspecs b { border-radius: 5px; background: #c24a12; font-family: var(--m-head); } .m-mgspecs a:nth-of-type(3n+2) b { background: #b7d11e; color: #1d1f22; } .m-mgspecs a:nth-of-type(3n) b { background: #5b6470; }
.m-mgspecs a:is(:hover, :focus-visible) { background: rgba(255,255,255,.12); border-color: #e2621f; }
.m-mgtile { border-radius: 10px; background: #23262a; border: 1px solid rgba(255,255,255,.12); color: #fff !important; box-shadow: 0 12px 24px rgba(0,0,0,.25); }
.m-mgtile .m-q8tx b { color: #fff; } .m-mgtile .m-q8tx small { color: #ff9a5c; }
.m-mgtile em { width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #eef0f2, #8a9097 60%, #4a4e55); box-shadow: 0 0 0 3px rgba(183,209,30,.35); }
.m-mgimg { border-radius: 8px; background: #fff; }
.m-mgtile:is(:hover, :focus-visible) { background: #2b2f35; border-color: #e2621f; }
body.hv-magmat main section > .wrap > h2::after { content: ""; display: block; width: 120px; height: 8px; margin-top: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 8 12 0V8Z' fill='%23c24a12'/%3E%3C/svg%3E") 0 0 / 12px 8px repeat-x; }
body.hv-magmat .pcard:hover, body.hv-magmat .m-acard:hover { box-shadow: 0 0 0 2px #c24a12, 0 18px 40px rgba(29,31,34,.14); }
body.hv-magmat .m-cta .m-band { border-radius: 16px; background: linear-gradient(45deg, transparent 44%, rgba(255,255,255,.04) 44% 56%, transparent 56%) 0 0 / 22px 22px, linear-gradient(-45deg, transparent 44%, rgba(255,255,255,.04) 44% 56%, transparent 56%) 11px 11px / 22px 22px, linear-gradient(120deg, #1d1f22, #2b2f35 55%, #7a3210); box-shadow: inset 0 -8px 0 #c24a12, 0 30px 60px rgba(29,31,34,.25); }
body.hv-magmat .m-cta .m-band::before { width: 220px; height: 150px; right: 30px; top: 24px; border-radius: 12px; background: radial-gradient(circle at 44% 40%, rgba(255,255,255,.22) 0 16%, transparent 30%) 0 0 / 22px 22px; box-shadow: inset 0 0 0 4px rgba(183,209,30,.35); }
body.hv-magmat .m-page-hero { background: linear-gradient(45deg, transparent 44%, rgba(255,255,255,.035) 44% 56%, transparent 56%) 0 0 / 22px 22px, linear-gradient(-45deg, transparent 44%, rgba(255,255,255,.035) 44% 56%, transparent 56%) 11px 11px / 22px 22px, linear-gradient(120deg, #16181b, #2b2f35); } body.hv-magmat .m-page-hero .eyebrow { color: #ff9a5c; }
body.hv-magmat footer.site { background: #16181b; color: #d4d7db; border: 0; } body.hv-magmat footer.site nav a { color: #ff9a5c; }
body.hv-magmat .m-collage .m-card { border-radius: 12px; }

/* ratchet (SEESE): a pressable orange tool button with a hard bottom lip; on hover a strip of ratchet teeth along the bottom edge clicks forward one tooth at a time and the arrow advances in steps */
body.bv-ratchet .btn { border-radius: 8px; padding: 15px 26px 18px; }
body.bv-ratchet :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #d0551a, #c24a12 55%, #ad410f); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 0 #7d2f0a, 0 12px 20px rgba(194,74,18,.28); }
body.bv-ratchet :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #2b2f35, #1d1f22 55%, #16181b); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 0 #c24a12, 0 12px 20px rgba(29,31,34,.3); }
body.bv-ratchet :is(.btn.accent, .pcard .btn, .m-btn-main):active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 0 #7d2f0a; }
body.bv-ratchet .btn::after { inset: auto 0 0 0; height: 5px; transform: none; opacity: .45; transition: opacity .25s; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3E%3Cpath d='M0 5 10 0V5Z' fill='%23fff'/%3E%3C/svg%3E") 0 0 / 10px 5px repeat-x; }
body.bv-ratchet .btn:is(:hover, :focus-visible)::after { transform: none; opacity: .9; animation: m-rtk 1.2s steps(6, end) infinite; }
body.bv-ratchet :is(.m-white, .m-btn-ghost, .btn.ghost)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3E%3Cpath d='M0 5 10 0V5Z' fill='%23c24a12'/%3E%3C/svg%3E"); }
body.bv-ratchet .m-hero .m-btn-ghost::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3E%3Cpath d='M0 5 10 0V5Z' fill='%23ff9a5c'/%3E%3C/svg%3E"); }
body.bv-ratchet .btn .arr { display: inline-block; transition: none; } body.bv-ratchet .btn:is(:hover, :focus-visible) .arr { transform: none; animation: m-rtarr .9s steps(3, end) infinite; }
body.bv-ratchet .m-cta .btn.m-white:hover { color: #c24a12; }
@keyframes m-rtk { to { background-position: 60px 0; } }
@keyframes m-rtarr { from { translate: 0 0; } to { translate: 9px 0; } }

/* galley (SHURFLO): an RV galley cabinet in cutaway; water runs tank > real clear-bowl strainer > real pump > tap; the gauge primes to 55 PSI, the tap opens, pressure dips, the pump shakes with its run light on, flow dashes run, the tap closes and the needle climbs back */
body.hv-galley .m-hero { background: radial-gradient(44% 58% at 76% 44%, #ffffff, transparent 70%), radial-gradient(30% 40% at 4% 96%, rgba(13,106,168,.14), transparent 70%), radial-gradient(circle, rgba(13,106,168,.09) 0 2px, transparent 2.6px) 0 0 / 34px 34px, linear-gradient(120deg, #e6f0f8, #f4f8fb 50%, #e1edf6); }
body.hv-galley .m-hero h1 { letter-spacing: -.01em; }
body.hv-galley .m-hero .eyebrow { color: #08507f; letter-spacing: .2em; }
.m-gy { aspect-ratio: 600 / 560; --gyd: 2.4s; }
.m-gysvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.m-gysvg .cab { fill: #fbfdff; stroke: #c6dbea; stroke-width: 2; filter: drop-shadow(0 24px 30px rgba(15,34,51,.12)); }
.m-gysvg .cut { fill: none; stroke: #9cbfd8; stroke-width: 2; stroke-dasharray: 6 5; }
.m-gysvg .counter { fill: #e9dfcf; } .m-gysvg .edge { stroke: #c9b79d; stroke-width: 3; }
.m-gysvg .basin { fill: #dfe7ee; stroke: #a9bccb; stroke-width: 3; }
.m-gysvg .splash { fill: none; stroke: #5fb3e4; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: m-gysplash 9s var(--gyd) ease-out infinite; }
.m-gysvg .tank { fill: url(#m-gytk); } .m-gysvg .tankrim { fill: none; stroke: #9cbfd8; stroke-width: 3; } .m-gysvg .tankcap { fill: #0d6aa8; }
.m-gysvg .lvl { fill: rgba(13,106,168,.55); animation: m-gylvl 3.2s linear infinite; }
.m-gysvg .wall { fill: none; stroke: #c3d9e9; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.m-gysvg .water { fill: none; stroke: #0d6aa8; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 12 12; animation: m-gyflow 9s var(--gyd) linear infinite; }
.m-gysvg .gauge { filter: drop-shadow(0 10px 14px rgba(15,34,51,.18)); }
.m-gysvg .rim { fill: #0f2233; } .m-gysvg .face { fill: #fff; } .m-gysvg .zone { fill: none; stroke: #2e9c8a; stroke-width: 6; opacity: .55; }
.m-gysvg .tk path { stroke: #0f2233; stroke-width: 2; } .m-gysvg .num text { font: 600 9px var(--m-body); fill: #3e5263; text-anchor: middle; } .m-gysvg .psi { font: 700 10px var(--m-head); fill: #0d6aa8; text-anchor: middle; letter-spacing: .08em; }
.m-gysvg .prime { transform-box: view-box; transform-origin: 250px 200px; rotate: 13.5deg; animation: m-gyprime 1.8s .5s cubic-bezier(.3,.7,.3,1.15) backwards; }
.m-gysvg .dem { transform-box: view-box; transform-origin: 250px 200px; animation: m-gydem 9s var(--gyd) ease-in-out infinite; }
.m-gysvg .ndl { fill: #e07b39; } .m-gysvg .hub { fill: #0f2233; }
.m-gysvg .neck { fill: none; stroke: #8a9aa6; stroke-width: 9; stroke-linecap: round; } .m-gysvg .base { fill: #6f808c; }
.m-gysvg .lever { transform-box: view-box; transform-origin: 585px 54px; animation: m-gylever 9s var(--gyd) ease-in-out infinite; } .m-gysvg .lever rect { fill: #6f808c; }
.m-gysvg .stream { fill: none; stroke: #5fb3e4; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 108 200; stroke-dashoffset: 108; animation: m-gystream 9s var(--gyd) ease-in-out infinite; }
.m-gystr { position: absolute; left: 24%; top: 60%; width: 21%; z-index: 2; animation: m-gyin 1s .3s var(--m-ease) backwards; }
.m-gystrimg, .m-gypumpimg { display: block; filter: drop-shadow(0 12px 12px rgba(15,34,51,.25)); transition: transform .45s var(--m-ease); } .m-gystrimg:hover, .m-gypumpimg:hover { transform: translateY(-5px); }
.m-gyswirl { position: absolute; left: 30%; right: 30%; top: 50%; bottom: 8%; pointer-events: none; }
.m-gyswirl b { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: rgba(13,106,168,.7); animation: m-gyorb 2.4s linear infinite; } .m-gyswirl b:nth-child(2) { animation-delay: -.6s; width: 3px; height: 3px; } .m-gyswirl b:nth-child(3) { animation-delay: -1.2s; background: rgba(140,110,60,.6); } .m-gyswirl b:nth-child(4) { animation-delay: -1.8s; }
.m-gypump { position: absolute; left: 49%; top: 54%; width: 47%; z-index: 2; animation: m-gyin 1s .1s var(--m-ease) backwards; }
.m-gypump .m-gypumpimg { animation: m-gyvib 9s var(--gyd) linear infinite; }
.m-gyled { position: absolute; right: 6%; top: 4%; width: 2.4cqw; height: 2.4cqw; min-width: 9px; min-height: 9px; border-radius: 50%; background: #9fb0bd; box-shadow: 0 0 0 2px #fff; animation: m-gyled 9s var(--gyd) steps(1, end) infinite; }
.m-gyflow i { position: absolute; z-index: 3; padding: .7cqw 1.6cqw; border-radius: 999px; background: #0f2233; color: #fff; font: 700 clamp(9px, 2cqw, 12px)/1 var(--m-body); font-style: normal; letter-spacing: .04em; white-space: nowrap; translate: -50% 0; box-shadow: 0 6px 12px rgba(15,34,51,.2); animation: m-gyin .8s calc(.6s + var(--k, 0) * .12s) var(--m-ease) backwards; }
.m-gyflow .f0 { left: 11.4%; top: 38%; } .m-gyflow .f1 { left: 34.5%; top: 81%; --k: 1; } .m-gyflow .f2 { left: 72%; top: 94.5%; --k: 2; background: #0d6aa8; } .m-gyflow .f3 { left: 83.4%; top: 30%; --k: 3; }
.m-gyread { position: absolute; left: 31%; top: 46.5%; z-index: 3; display: grid; gap: .5cqw; justify-items: center; font: 600 clamp(9px, 1.9cqw, 11.5px)/1.1 var(--m-body); color: #3e5263; translate: -50% 0; text-align: center; animation: m-gyin .8s 1s var(--m-ease) backwards; }
.m-gyread b { padding: .6cqw 1.4cqw; border-radius: 6px; background: #e3eef6; color: #0d6aa8; font: 800 clamp(11px, 2.4cqw, 15px)/1 var(--m-head); }
@keyframes m-gyin { from { opacity: 0; transform: translateY(16px); } }
@keyframes m-gyprime { from { rotate: -135deg; } }
@keyframes m-gydem { 0%, 15% { rotate: 0deg; } 20% { rotate: -48deg; } 28% { rotate: -40deg; } 40% { rotate: -45deg; } 52% { rotate: -39deg; } 62% { rotate: -42deg; } 70%, 100% { rotate: 0deg; } }
@keyframes m-gylever { 0%, 13% { rotate: 0deg; } 16%, 60% { rotate: -38deg; } 63%, 100% { rotate: 0deg; } }
@keyframes m-gystream { 0%, 15% { stroke-dashoffset: 108; opacity: 1; } 18%, 60% { stroke-dashoffset: 0; opacity: 1; } 63% { stroke-dashoffset: -100; opacity: .2; } 64%, 100% { stroke-dashoffset: 108; opacity: 0; } }
@keyframes m-gysplash { 0%, 18% { opacity: 0; transform: scale(.4); } 20%, 59% { opacity: .9; } 24%, 30%, 36%, 42%, 48%, 54% { transform: scale(1.2); } 21%, 27%, 33%, 39%, 45%, 51%, 57% { transform: scale(.6); } 62%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes m-gyflow { 0%, 15% { stroke-dashoffset: 0; } 70%, 100% { stroke-dashoffset: -240; } }
@keyframes m-gylvl { to { translate: 80px 0; } }
@keyframes m-gyorb { from { transform: rotate(0deg) translateX(7px) rotate(0deg); } to { transform: rotate(360deg) translateX(7px) rotate(-360deg); } }
@keyframes m-gyled { 0% { background: #9fb0bd; box-shadow: 0 0 0 2px #fff; } 18% { background: #3ccf6e; box-shadow: 0 0 0 2px #fff, 0 0 10px #3ccf6e; } 70%, 100% { background: #9fb0bd; box-shadow: 0 0 0 2px #fff; } }
@keyframes m-gyvib { 0%, 17.5% { translate: 0 0; } 18.0% { translate: 0.7px -0.4px; } 18.8% { translate: -0.6px 0.3px; } 19.6% { translate: 0.4px 0.5px; } 20.4% { translate: -0.5px -0.3px; } 21.2% { translate: 0.7px -0.4px; } 22.0% { translate: -0.6px 0.3px; } 22.8% { translate: 0.4px 0.5px; } 23.6% { translate: -0.5px -0.3px; } 24.4% { translate: 0.7px -0.4px; } 25.2% { translate: -0.6px 0.3px; } 26.0% { translate: 0.4px 0.5px; } 26.8% { translate: -0.5px -0.3px; } 27.6% { translate: 0.7px -0.4px; } 28.4% { translate: -0.6px 0.3px; } 29.2% { translate: 0.4px 0.5px; } 30.0% { translate: -0.5px -0.3px; } 30.8% { translate: 0.7px -0.4px; } 31.6% { translate: -0.6px 0.3px; } 32.4% { translate: 0.4px 0.5px; } 33.2% { translate: -0.5px -0.3px; } 34.0% { translate: 0.7px -0.4px; } 34.8% { translate: -0.6px 0.3px; } 35.6% { translate: 0.4px 0.5px; } 36.4% { translate: -0.5px -0.3px; } 37.2% { translate: 0.7px -0.4px; } 38.0% { translate: -0.6px 0.3px; } 38.8% { translate: 0.4px 0.5px; } 39.6% { translate: -0.5px -0.3px; } 40.4% { translate: 0.7px -0.4px; } 41.2% { translate: -0.6px 0.3px; } 42.0% { translate: 0.4px 0.5px; } 42.8% { translate: -0.5px -0.3px; } 43.6% { translate: 0.7px -0.4px; } 44.4% { translate: -0.6px 0.3px; } 45.2% { translate: 0.4px 0.5px; } 46.0% { translate: -0.5px -0.3px; } 46.8% { translate: 0.7px -0.4px; } 47.6% { translate: -0.6px 0.3px; } 48.4% { translate: 0.4px 0.5px; } 49.2% { translate: -0.5px -0.3px; } 50.0% { translate: 0.7px -0.4px; } 50.8% { translate: -0.6px 0.3px; } 51.6% { translate: 0.4px 0.5px; } 52.4% { translate: -0.5px -0.3px; } 53.2% { translate: 0.7px -0.4px; } 54.0% { translate: -0.6px 0.3px; } 54.8% { translate: 0.4px 0.5px; } 55.6% { translate: -0.5px -0.3px; } 56.4% { translate: 0.7px -0.4px; } 57.2% { translate: -0.6px 0.3px; } 58.0% { translate: 0.4px 0.5px; } 58.8% { translate: -0.5px -0.3px; } 59.6% { translate: 0.7px -0.4px; } 60.4% { translate: -0.6px 0.3px; } 61.2% { translate: 0.4px 0.5px; } 62.0% { translate: -0.5px -0.3px; } 62.8% { translate: 0.7px -0.4px; } 63.6% { translate: -0.6px 0.3px; } 64.4% { translate: 0.4px 0.5px; } 65.2% { translate: -0.5px -0.3px; } 66.0% { translate: 0.7px -0.4px; } 66.8% { translate: -0.6px 0.3px; } 67.6% { translate: 0.4px 0.5px; } 68.4% { translate: -0.5px -0.3px; } 69.2% { translate: 0.7px -0.4px; } 70.0% { translate: -0.6px 0.3px; } 70.5%, 100% { translate: 0 0; } }
.m-gyspecs > span { color: #08507f; }
.m-gyspecs a { border-radius: 10px; border: 1.5px solid #cfe1ee; }
.m-gyspecs b { border-radius: 6px; background: #0d6aa8; font-family: var(--m-head); } .m-gyspecs a:nth-of-type(3n+2) b { background: #0f2233; } .m-gyspecs a:nth-of-type(3n) b { background: #2e7f71; }
.m-gyspecs a:is(:hover, :focus-visible) { border-color: #0d6aa8; }
.m-gytile { border-radius: 12px; border: 1.5px solid #cfe1ee; box-shadow: 0 10px 22px rgba(15,34,51,.06); }
.m-gytile em { width: 12px; height: 16px; border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%; rotate: 180deg; background: linear-gradient(0deg, #5fb3e4, #0d6aa8); }
.m-gyimg { border-radius: 10px; background: radial-gradient(circle at 50% 40%, #fff, #e8f1f8); }
.m-gytile .m-q8tx small { color: #08507f; }
.m-gytile:is(:hover, :focus-visible) { border-color: #0d6aa8; box-shadow: 0 16px 30px rgba(15,34,51,.12); }
body.hv-galley main section > .wrap > h2::after { content: ""; display: block; width: 120px; height: 8px; margin-top: 12px; border-radius: 8px; background: repeating-linear-gradient(90deg, #0d6aa8 0 12px, transparent 12px 20px) 0 50% / 100% 4px no-repeat, #d6e6f2; }
body.hv-galley .pcard:hover, body.hv-galley .m-acard:hover { box-shadow: 0 0 0 2px #0d6aa8, 0 18px 40px rgba(15,34,51,.12); }
body.hv-galley .m-cta .m-band { border-radius: 18px; background: radial-gradient(circle, rgba(255,255,255,.12) 0 2px, transparent 2.6px) 0 0 / 30px 30px, linear-gradient(120deg, #0f2233, #0b4b77 55%, #0d6aa8); }
body.hv-galley .m-cta .m-band::before { width: 180px; height: 180px; right: 40px; top: -50px; border-radius: 50%; background: transparent; border: 12px solid rgba(255,255,255,.12); box-shadow: inset 0 0 0 26px rgba(255,255,255,.05); }
body.hv-galley .m-page-hero { background: radial-gradient(circle, rgba(255,255,255,.09) 0 2px, transparent 2.6px) 0 0 / 30px 30px, linear-gradient(120deg, #0f2233, #0d6aa8); } body.hv-galley .m-page-hero .eyebrow { color: #a9d6f3; }
body.hv-galley footer.site { background: #0f2233; color: #d3e1ec; border: 0; } body.hv-galley footer.site nav a { color: #a9d6f3; }
body.hv-galley .m-collage .m-card { border-radius: 14px; }

/* psi (SHURFLO): a pressure button; a small gauge dial sits before the label and on hover its needle sweeps up to the top of the scale while a darker pressure fill runs across the button left to right */
body.bv-psi .btn { border-radius: 10px; padding: 15px 24px 15px 46px; }
body.bv-psi :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(90deg, #08446d 50%, #0d6aa8 50%) 100% 0 / 202% 100% no-repeat; color: #fff; box-shadow: 0 10px 22px rgba(13,106,168,.28); transition: transform .2s var(--m-ease), background-position .7s var(--m-ease), box-shadow .2s, color .2s; }
body.bv-psi :is(.btn.accent, .pcard .btn, .m-btn-main):is(:hover, :focus-visible) { background: linear-gradient(90deg, #08446d 50%, #0d6aa8 50%) 0 0 / 202% 100% no-repeat; color: #fff; }
body.bv-psi .btn::before { content: ""; position: absolute; left: 15px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; border: 2px solid currentColor; background: conic-gradient(from 225deg, currentColor 0 3deg, transparent 3deg 67deg, currentColor 67deg 70deg, transparent 70deg 134deg, currentColor 134deg 137deg, transparent 137deg 201deg, currentColor 201deg 204deg, transparent 204deg 268deg, currentColor 268deg 271deg, transparent 0); -webkit-mask: radial-gradient(circle, transparent 0 4.5px, #000 5px); mask: radial-gradient(circle, transparent 0 4.5px, #000 5px); opacity: .85; pointer-events: none; }
body.bv-psi .btn::after { inset: auto; left: 24px; top: 50%; width: 2px; height: 9px; margin-top: -8px; border-radius: 2px; background: #ffb07a; transform: none; transform-origin: 50% 7px; rotate: -125deg; box-shadow: 0 7px 0 1px currentColor; transition: rotate .8s cubic-bezier(.3,.7,.3,1.3); z-index: 1; }
body.bv-psi .btn:is(:hover, :focus-visible)::after { transform: none; rotate: 100deg; }
body.bv-psi :is(.m-white, .m-btn-ghost, .btn.ghost)::after { background: #e07b39; }
body.bv-psi .m-cta .btn.m-white:hover { color: #0d6aa8; }

/* playtray (SKYFIELD): a wooden play tray on a gingham mat; felt-topped carrots pop out of a soil bed one by one and sink back, chunky shape pieces drop into their slots and lift out again; the real carrot harvest sorter and animal puzzles sit on the tray */
body.hv-playtray .m-hero { background: radial-gradient(44% 58% at 76% 44%, rgba(255,253,247,.95), transparent 70%), linear-gradient(90deg, rgba(53,122,92,.07) 50%, transparent 0) 0 0 / 44px 44px, linear-gradient(0deg, rgba(53,122,92,.07) 50%, transparent 0) 0 0 / 44px 44px, linear-gradient(120deg, #f6efe0, #fbf7ef 50%, #eef4ec); }
body.hv-playtray .m-hero h1 { letter-spacing: .005em; }
body.hv-playtray .m-hero .eyebrow { color: #285f47; letter-spacing: .18em; }
.m-py { aspect-ratio: 600 / 560; }
.m-pytray { position: absolute; inset: 0; border-radius: 34px; background: repeating-linear-gradient(176deg, rgba(150,105,60,.06) 0 3px, transparent 3px 11px, rgba(150,105,60,.04) 11px 13px, transparent 13px 26px), linear-gradient(160deg, #f0d9b5, #e6c79a 60%, #ddbb8a); box-shadow: inset 0 0 0 max(8px, 2.2cqw) #d3ab73, inset 0 0 0 calc(max(8px, 2.2cqw) + 2px) rgba(120,80,40,.25), inset 0 12px 24px rgba(120,80,40,.25), 0 26px 50px rgba(35,53,44,.18); }
.m-pyharvest { position: absolute; left: 5%; top: 5%; width: 41%; z-index: 3; display: block; rotate: -3deg; filter: drop-shadow(0 14px 12px rgba(90,60,25,.3)); animation: m-pyin 1s .1s cubic-bezier(.3,.7,.3,1.3) backwards; transition: transform .45s var(--m-ease); }
.m-pyanimals { position: absolute; left: 53%; top: 50%; width: 42%; z-index: 3; display: block; rotate: 4deg; filter: drop-shadow(0 14px 12px rgba(90,60,25,.3)); animation: m-pyin 1s .35s cubic-bezier(.3,.7,.3,1.3) backwards; transition: transform .45s var(--m-ease); }
.m-pyharvest:hover, .m-pyanimals:hover { transform: translateY(-6px) rotate(2deg); }
.m-pybed { position: absolute; left: 49%; top: 4%; width: 47%; height: auto; z-index: 2; overflow: hidden; filter: drop-shadow(0 10px 10px rgba(90,60,25,.25)); animation: m-pyin 1s .2s var(--m-ease) backwards; }
.m-pybed .back { fill: #8a5a34; } .m-pybed .hole { fill: #4a2e18; } .m-pybed .front { fill: #9b6a40; } .m-pybed .speck { fill: #b98457; }
.m-pybed .root { fill: #ee7a35; } .m-pybed .ring { fill: none; stroke: #c95a1d; stroke-width: 2; stroke-linecap: round; }
.m-pybed .leaf { fill: #4caf6e; transform-box: fill-box; transform-origin: 50% 100%; } .m-pybed .l2 { fill: #3e9a5e; } .m-pybed .l3 { fill: #5cc07c; }
.m-pybed .pop { translate: 0 56px; animation: m-pypop 6.4s calc(1.2s + var(--i) * .9s) cubic-bezier(.3,.7,.3,1.2) infinite; }
.m-pybed .pop .leaf { animation: m-pywob 1.6s calc(var(--i) * .3s) ease-in-out infinite; }
.m-pyboard { position: absolute; left: 4%; top: 53%; width: 46%; height: auto; z-index: 2; overflow: visible; filter: drop-shadow(0 12px 12px rgba(90,60,25,.22)); animation: m-pyin 1s .45s var(--m-ease) backwards; }
.m-pyboard .wood { fill: #f6e3c3; } .m-pyboard .grain { fill: none; stroke: #d9b88a; stroke-width: 3; }
.m-pyboard .slot { fill: #c9a26f; stroke: #b48a55; stroke-width: 2; }
.m-pyboard .pc { animation: m-pydrop 8s calc(1.6s + var(--i) * .8s) cubic-bezier(.3,.7,.3,1.25) infinite; }
.m-pyboard .pc path { stroke: rgba(0,0,0,.12); stroke-width: 2; } .m-pyboard .circle { fill: #e2574c; } .m-pyboard .square { fill: #4a90c2; } .m-pyboard .tri { fill: #f2c14e; } .m-pyboard .star { fill: #4caf6e; }
.m-pyage { position: absolute; left: 33%; top: 46%; z-index: 4; display: grid; place-items: center; width: 17%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6e4, #f2c14e); box-shadow: 0 10px 18px rgba(90,60,25,.25), inset 0 0 0 3px #fff, inset 0 0 0 5px #e0a832; color: #23352c; font: 400 clamp(11px, 2.6cqw, 16px)/1.05 var(--m-head); text-align: center; padding: 1cqw; rotate: -10deg; animation: m-pyin 1s .7s cubic-bezier(.3,.7,.3,1.4) backwards, m-pyswing 5s 2s ease-in-out infinite; }
@keyframes m-pyin { from { opacity: 0; transform: translateY(22px) scale(.92); } }
@keyframes m-pypop { 0%, 8% { translate: 0 56px; } 16%, 40% { translate: 0 -6px; } 48%, 100% { translate: 0 56px; } }
@keyframes m-pywob { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes m-pydrop { 0% { translate: 0 -150px; opacity: 0; } 4% { opacity: 1; } 12%, 70% { translate: 0 0; opacity: 1; } 78% { translate: 0 -24px; opacity: 1; } 84%, 100% { translate: 0 -150px; opacity: 0; } }
@keyframes m-pyswing { 0%, 100% { rotate: -10deg; } 50% { rotate: -4deg; } }
.m-pyspecs > span { color: #285f47; }
.m-pyspecs a { border-radius: 999px; border: 1.5px solid #dfe8dc; }
.m-pyspecs b { border-radius: 999px; background: #357a5c; font-family: var(--m-head); font-weight: 400; } .m-pyspecs a:nth-of-type(4n+2) b { background: #d65f22; } .m-pyspecs a:nth-of-type(4n+3) b { background: #2f6f9e; } .m-pyspecs a:nth-of-type(4n) b { background: #b8462f; }
.m-pyspecs a:is(:hover, :focus-visible) { border-color: #357a5c; }
.m-pytile { border-radius: 22px; border: 1.5px solid #e6dcc6; background: #fffdf8; box-shadow: 0 10px 22px rgba(90,60,25,.07); }
.m-pytile em { width: 12px; height: 20px; background: linear-gradient(#4caf6e, #4caf6e) 50% 0 / 4px 7px no-repeat, linear-gradient(#ee7a35, #ee7a35) 0 7px / 100% 13px no-repeat; clip-path: polygon(30% 0, 70% 0, 70% 35%, 100% 35%, 50% 100%, 0 35%, 30% 35%); }
.m-pyimg { border-radius: 16px; background: #f6ecd9; }
.m-pytile .m-q8tx b { font-weight: 400; } .m-pytile .m-q8tx small { color: #285f47; }
.m-pytile:is(:hover, :focus-visible) { border-color: #357a5c; box-shadow: 0 16px 30px rgba(90,60,25,.12); }
body.hv-playtray main section > .wrap > h2::after { content: ""; display: block; width: 104px; height: 14px; margin-top: 10px; background: radial-gradient(circle, #e2574c 0 6px, transparent 6.5px) 0 50% / 26px 14px no-repeat, linear-gradient(#4a90c2, #4a90c2) 30px 50% / 12px 12px no-repeat, conic-gradient(from 150deg at 50% 0, #f2c14e 0 60deg, transparent 0) 52px 1px / 14px 13px no-repeat, radial-gradient(circle, #4caf6e 0 6px, transparent 6.5px) 78px 50% / 26px 14px no-repeat; }
body.hv-playtray .pcard:hover, body.hv-playtray .m-acard:hover { box-shadow: 0 0 0 2px #357a5c, 0 18px 40px rgba(90,60,25,.12); }
body.hv-playtray .m-cta .m-band { border-radius: 30px; background: linear-gradient(90deg, rgba(255,255,255,.06) 50%, transparent 0) 0 0 / 40px 40px, linear-gradient(0deg, rgba(255,255,255,.06) 50%, transparent 0) 0 0 / 40px 40px, linear-gradient(120deg, #23352c, #2c654c 55%, #357a5c); }
body.hv-playtray .m-cta .m-band::before { width: 120px; height: 120px; right: 60px; top: -30px; border-radius: 50%; background: radial-gradient(circle, #ee7a35 0 30%, transparent 31%); opacity: .4; box-shadow: none; }
body.hv-playtray .m-page-hero { background: linear-gradient(90deg, rgba(255,255,255,.05) 50%, transparent 0) 0 0 / 40px 40px, linear-gradient(0deg, rgba(255,255,255,.05) 50%, transparent 0) 0 0 / 40px 40px, linear-gradient(120deg, #23352c, #357a5c); } body.hv-playtray .m-page-hero .eyebrow { color: #f2c14e; }
body.hv-playtray footer.site { background: #23352c; color: #dbe6dd; border: 0; } body.hv-playtray footer.site nav a { color: #f2c14e; }
body.hv-playtray .m-collage .m-card { border-radius: 24px; }

/* sprout (SKYFIELD): a soft green pill; on hover a strip of soil rises along the bottom edge and a two-leaf seedling springs up in place of the arrow */
body.bv-sprout .btn { border-radius: 999px; padding: 15px 30px 17px; }
body.bv-sprout :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #3e8a68, #357a5c 60%, #2f6e53); color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.14), 0 10px 22px rgba(53,122,92,.28); }
body.bv-sprout :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #2f6e53, #285f47 60%, #224f3b); color: #fff; }
body.bv-sprout .btn::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; z-index: -1; pointer-events: none; background: radial-gradient(circle at 50% 0, transparent 0 4px, #8a5a34 4.5px) 0 0 / 12px 7px repeat-x; transform: translateY(100%); transition: transform .4s var(--m-ease); }
body.bv-sprout .btn:is(:hover, :focus-visible)::before { transform: none; }
body.bv-sprout .btn .arr { display: inline-block; transition: opacity .2s, transform .3s var(--m-ease); }
body.bv-sprout .btn:has(.arr):is(:hover, :focus-visible) .arr { opacity: 0; transform: translateY(6px); }
body.bv-sprout .btn::after { inset: auto; right: 26px; bottom: 9px; width: 18px; height: 20px; transform: scale(0); transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.3,.7,.3,1.6); background: radial-gradient(ellipse 5px 3.4px at 4.5px 7px, #9be0a8 92%, transparent) no-repeat, radial-gradient(ellipse 5px 3.4px at 13.5px 5px, #c3f0b8 92%, transparent) no-repeat, linear-gradient(#9be0a8, #9be0a8) 8px 6px / 2px 14px no-repeat; z-index: 1; }
body.bv-sprout .btn:not(:has(.arr))::after { display: none; }
body.bv-sprout .btn:has(.arr):is(:hover, :focus-visible)::after { transform: scale(1); }
body.bv-sprout :is(.m-white, .m-btn-ghost, .btn.ghost)::after { background: radial-gradient(ellipse 5px 3.4px at 4.5px 7px, #357a5c 92%, transparent) no-repeat, radial-gradient(ellipse 5px 3.4px at 13.5px 5px, #4caf6e 92%, transparent) no-repeat, linear-gradient(#357a5c, #357a5c) 8px 6px / 2px 14px no-repeat; }
body.bv-sprout .m-hero .m-btn-ghost { background: rgba(255,255,255,.75) !important; }
body.bv-sprout .m-cta .btn.m-white:hover { color: #285f47; }

/* backseat (Smatto): a car in side cutaway; a quilted cover unrolls over the back seat from the headrest, the hard-bottom extender flips down flat, a dog hops in leaving muddy paw prints and a cloth wipes them off; the real bench cover and booster seat sit below */
body.hv-backseat .m-hero { background: radial-gradient(46% 58% at 76% 40%, #ffffff, transparent 70%), radial-gradient(30% 40% at 4% 96%, rgba(47,125,109,.14), transparent 70%), linear-gradient(120deg, #e8f1ed, #f5f8f6 50%, #e3eee9); }
body.hv-backseat .m-hero h1 { letter-spacing: -.015em; font-stretch: 105%; }
body.hv-backseat .m-hero .eyebrow { color: #23604f; letter-spacing: .2em; }
.m-bk { aspect-ratio: 600 / 520; --bkd: 1.2s; }
.m-bksvg { position: absolute; left: 0; top: 0; width: 100%; height: auto; z-index: 1; overflow: visible; animation: m-bkin 1s .1s var(--m-ease) backwards; }
.m-bksvg .road { stroke: #b9cdc5; stroke-width: 3; } .m-bksvg .dash { stroke: #cfdfd8; stroke-width: 4; stroke-linecap: round; }
.m-bksvg .car { fill: #2f7d6d; filter: drop-shadow(0 18px 18px rgba(23,48,42,.22)); } .m-bksvg .glass { fill: #cfe6f0; } .m-bksvg .pillar { fill: #23604f; }
.m-bksvg .cabin { fill: #eef3f1; } .m-bksvg .fseat { fill: #9fb3ac; } .m-bksvg .seat > * { fill: #b8c9c3; }
.m-bksvg .door { fill: none; stroke: #8fb5aa; stroke-width: 2.4; stroke-dasharray: 7 6; }
.m-bksvg .wheel { fill: #17302a; } .m-bksvg .hub { fill: #c9d6d1; }
.m-bksvg .cover { fill: none; stroke: url(#m-bkq); stroke-width: 18; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100 100; animation: m-bkcov 10s var(--bkd) ease-in-out infinite; }
.m-bksvg .ext { transform-box: view-box; transform-origin: 364px 224px; animation: m-bkext 10s var(--bkd) cubic-bezier(.3,.7,.3,1.2) infinite; } .m-bksvg .board { stroke: #17302a; stroke-width: 8; stroke-linecap: round; }
.m-bksvg .paw { fill: #7a5232; opacity: 0; animation: m-bkpaw 10s calc(var(--bkd) + var(--i) * .3s) ease-out infinite; }
.m-bksvg .cloth { translate: 470px 262px; opacity: 0; animation: m-bkwipe 10s var(--bkd) ease-in-out infinite; } .m-bksvg .cloth path { fill: #7fb8a8; } .m-bksvg .cloth .fold { fill: none; stroke: #5d9a89; stroke-width: 1.6; }
.m-bksvg .dog { translate: 548px 0; animation: m-bkdogx 10s var(--bkd) linear infinite; }
.m-bksvg .hop { translate: 0 316px; animation: m-bkdogy 10s var(--bkd) linear infinite; }
.m-bksvg .fur { fill: #d9a066; stroke: #b47b40; stroke-width: 2; } .m-bksvg .ear { fill: #a8692f; } .m-bksvg .eye, .m-bksvg .nose { fill: #17302a; }
.m-bkcover { position: absolute; right: 1%; top: 51%; width: 44%; z-index: 3; display: block; filter: drop-shadow(0 16px 14px rgba(23,48,42,.3)); animation: m-bkin 1s .35s var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-bkboost { position: absolute; left: 3%; top: 58%; width: 25%; z-index: 3; display: block; overflow: hidden; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 5px #fff, 0 16px 26px rgba(23,48,42,.22); animation: m-bkin 1s .5s var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-bkboost img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.m-bkcover:hover, .m-bkboost:hover { transform: translateY(-6px); }
.m-bknote { position: absolute; left: 30%; top: 78%; z-index: 4; width: 25%; padding: 1.4cqw 1.8cqw 1.4cqw 5.6cqw; border-radius: 12px; background: #fff; color: #17302a; font: 600 clamp(9px, 2cqw, 12px)/1.2 var(--m-body); box-shadow: 0 10px 20px rgba(23,48,42,.12), inset 0 0 0 1.5px #d3e4dd; animation: m-bkin 1s .7s var(--m-ease) backwards; }
.m-bknote::before { content: ""; position: absolute; left: 1.6cqw; top: 50%; width: 3cqw; height: 3cqw; min-width: 12px; min-height: 12px; translate: 0 -50%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; rotate: 180deg; background: linear-gradient(0deg, #7fb8a8, #2f7d6d); }
@keyframes m-bkin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-bkcov { 0% { stroke-dashoffset: 100; } 14%, 86% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 100; } }
@keyframes m-bkext { 0%, 13% { rotate: -90deg; } 20%, 85% { rotate: 0deg; } 91%, 100% { rotate: -90deg; } }
@keyframes m-bkdogx { 0%, 22% { translate: 548px 0; opacity: 1; } 34% { translate: 404px 0; } 80% { translate: 404px 0; opacity: 1; } 86% { translate: 404px 0; opacity: 0; } 87%, 92% { translate: 548px 0; opacity: 0; } 98%, 100% { translate: 548px 0; opacity: 1; } }
@keyframes m-bkdogy { 0%, 21% { translate: 0 316px; scale: 1; animation-timing-function: ease-out; } 22% { translate: 0 316px; scale: 1.06 .9; animation-timing-function: ease-out; } 28% { translate: 0 168px; scale: 1; animation-timing-function: ease-in; } 34% { translate: 0 212px; scale: 1.06 .9; } 37%, 80% { translate: 0 212px; scale: 1; } 87%, 100% { translate: 0 316px; scale: 1; } }
@keyframes m-bkpaw { 0%, 31% { opacity: 0; scale: .4; } 34% { opacity: .9; scale: 1; } 60% { opacity: .9; } 64%, 100% { opacity: 0; } }
@keyframes m-bkwipe { 0%, 56% { translate: 470px 262px; opacity: 0; } 58% { translate: 470px 262px; opacity: 1; } 63% { translate: 434px 212px; } 72% { translate: 344px 212px; opacity: 1; } 76%, 100% { translate: 344px 212px; opacity: 0; } }
.m-bkspecs > span { color: #23604f; }
.m-bkspecs a { border-radius: 10px; border: 1.5px solid #d3e4dd; }
.m-bkspecs b { border-radius: 6px; background: #2f7d6d; font-family: var(--m-head); } .m-bkspecs a:nth-of-type(3n+2) b { background: #17302a; } .m-bkspecs a:nth-of-type(3n) b { background: #8c5a2b; }
.m-bkspecs a:is(:hover, :focus-visible) { border-color: #2f7d6d; }
.m-bktile { border-radius: 14px; border: 1.5px solid #d3e4dd; box-shadow: 0 10px 22px rgba(23,48,42,.06); }
.m-bktile em { width: 18px; height: 16px; background: radial-gradient(ellipse 4.5px 3.6px at 9px 11.5px, #2f7d6d 92%, transparent), radial-gradient(circle 2px at 3px 6px, #2f7d6d 92%, transparent), radial-gradient(circle 2px at 7px 3px, #2f7d6d 92%, transparent), radial-gradient(circle 2px at 11px 3px, #2f7d6d 92%, transparent), radial-gradient(circle 2px at 15px 6px, #2f7d6d 92%, transparent); }
.m-bkimg { border-radius: 10px; background: radial-gradient(circle at 50% 40%, #fff, #e9f1ee); }
.m-bktile .m-q8tx small { color: #23604f; }
.m-bktile:is(:hover, :focus-visible) { border-color: #2f7d6d; box-shadow: 0 16px 30px rgba(23,48,42,.12); }
body.hv-backseat main section > .wrap > h2::after { content: ""; display: block; width: 110px; height: 12px; margin-top: 10px; border-radius: 3px; background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(255,255,255,.2) 5px 6px), repeating-linear-gradient(-45deg, transparent 0 5px, rgba(255,255,255,.2) 5px 6px), #2f7d6d; }
body.hv-backseat .pcard:hover, body.hv-backseat .m-acard:hover { box-shadow: 0 0 0 2px #2f7d6d, 0 18px 40px rgba(23,48,42,.12); }
body.hv-backseat .m-cta .m-band { border-radius: 20px; background: repeating-linear-gradient(45deg, transparent 0 13px, rgba(255,255,255,.05) 13px 14px), repeating-linear-gradient(-45deg, transparent 0 13px, rgba(255,255,255,.05) 13px 14px), linear-gradient(120deg, #17302a, #23604f 55%, #2f7d6d); }
body.hv-backseat .m-cta .m-band::before { width: 170px; height: 120px; right: 40px; top: 20px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 24'%3E%3Cg fill='%23ffffff' fill-opacity='.22'%3E%3Cellipse cx='9' cy='15' rx='4' ry='3.2'/%3E%3Ccircle cx='4.8' cy='9.6' r='1.6'/%3E%3Ccircle cx='7.6' cy='7.8' r='1.6'/%3E%3Ccircle cx='10.6' cy='7.8' r='1.6'/%3E%3Ccircle cx='13.3' cy='9.6' r='1.6'/%3E%3Cellipse cx='25' cy='9' rx='4' ry='3.2'/%3E%3Ccircle cx='20.8' cy='3.6' r='1.6'/%3E%3Ccircle cx='23.6' cy='1.8' r='1.6'/%3E%3Ccircle cx='26.6' cy='1.8' r='1.6'/%3E%3Ccircle cx='29.3' cy='3.6' r='1.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 68px 48px; opacity: .9; box-shadow: none; }
body.hv-backseat .m-page-hero { background: repeating-linear-gradient(45deg, transparent 0 13px, rgba(255,255,255,.04) 13px 14px), repeating-linear-gradient(-45deg, transparent 0 13px, rgba(255,255,255,.04) 13px 14px), linear-gradient(120deg, #17302a, #2f7d6d); } body.hv-backseat .m-page-hero .eyebrow { color: #f0c58f; }
body.hv-backseat footer.site { background: #17302a; color: #d6e3de; border: 0; } body.hv-backseat footer.site nav a { color: #f0c58f; }
body.hv-backseat .m-collage .m-card { border-radius: 16px; }

/* wipe (Smatto): faint paw prints sit on the button; on hover a squeegee line sweeps left to right and the prints vanish behind it, leaving a clean glossy finish */
body.bv-wipe .btn { border-radius: 12px; padding: 15px 26px; }
body.bv-wipe :is(.btn.accent, .pcard .btn, .m-btn-main) { background: #2f7d6d; color: #fff; box-shadow: 0 10px 22px rgba(47,125,109,.28); }
body.bv-wipe :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #2a6f61, #23604f); color: #fff; }
body.bv-wipe .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 24'%3E%3Cg fill='%23ffffff' fill-opacity='.22'%3E%3Cellipse cx='9' cy='15' rx='4' ry='3.2'/%3E%3Ccircle cx='4.8' cy='9.6' r='1.6'/%3E%3Ccircle cx='7.6' cy='7.8' r='1.6'/%3E%3Ccircle cx='10.6' cy='7.8' r='1.6'/%3E%3Ccircle cx='13.3' cy='9.6' r='1.6'/%3E%3Cellipse cx='25' cy='9' rx='4' ry='3.2'/%3E%3Ccircle cx='20.8' cy='3.6' r='1.6'/%3E%3Ccircle cx='23.6' cy='1.8' r='1.6'/%3E%3Ccircle cx='26.6' cy='1.8' r='1.6'/%3E%3Ccircle cx='29.3' cy='3.6' r='1.6'/%3E%3C/g%3E%3C/svg%3E") 6px 4px / 34px 24px; -webkit-mask: linear-gradient(90deg, transparent 50%, #000 50%) 100% 0 / 200% 100% no-repeat; mask: linear-gradient(90deg, transparent 50%, #000 50%) 100% 0 / 200% 100% no-repeat; transition: -webkit-mask-position .6s var(--m-ease), mask-position .6s var(--m-ease); }
body.bv-wipe .btn:is(:hover, :focus-visible)::before { -webkit-mask-position: 0 0; mask-position: 0 0; }
body.bv-wipe :is(.m-white, .m-btn-ghost, .btn.ghost)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 24'%3E%3Cg fill='%2317302a' fill-opacity='.14'%3E%3Cellipse cx='9' cy='15' rx='4' ry='3.2'/%3E%3Ccircle cx='4.8' cy='9.6' r='1.6'/%3E%3Ccircle cx='7.6' cy='7.8' r='1.6'/%3E%3Ccircle cx='10.6' cy='7.8' r='1.6'/%3E%3Ccircle cx='13.3' cy='9.6' r='1.6'/%3E%3Cellipse cx='25' cy='9' rx='4' ry='3.2'/%3E%3Ccircle cx='20.8' cy='3.6' r='1.6'/%3E%3Ccircle cx='23.6' cy='1.8' r='1.6'/%3E%3Ccircle cx='26.6' cy='1.8' r='1.6'/%3E%3Ccircle cx='29.3' cy='3.6' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); }
body.bv-wipe .btn::after { inset: 0 auto 0 0; width: 14px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6) 60%, rgba(255,255,255,.95) 85%, transparent); transform: translateX(-20px); transition: none; }
body.bv-wipe .btn:is(:hover, :focus-visible)::after { transform: translateX(-20px); animation: m-wp .6s var(--m-ease) forwards; }
body.bv-wipe .m-cta .btn.m-white:hover { color: #23604f; }
@keyframes m-wp { to { transform: translateX(calc(100cqw + 400px)); } }
body.bv-wipe .m-page-hero .m-btn-main { background: #17302a; } body.bv-wipe .m-page-hero .m-btn-main:hover { background: #0f211c; }

/* ===== batch 12.11.2026 (7): aimwall/blinker (LX-LIGHT), manual/stud (MEIEST), daycycle/spectrum (URUQ); shared layout rules are in the batch (5) block ===== */
/* aimwall (LX-LIGHT): a garage at dusk, a headlight on a test stand aimed at a gridded aim wall; the real halo headlight powers on (white DRL ring), the low beam paints a Z-cutoff on the wall, high beam fills the hot spot, then the ring blinks amber as a turn signal; the real halo fog light syncs its DRL, the real JK tail light pulses red on the bench, a dash readout names each mode */
body.hv-aimwall .m-hero { color: #fff; background: radial-gradient(42% 55% at 74% 42%, rgba(240,160,0,.2), transparent 70%), radial-gradient(30% 40% at 6% 96%, rgba(91,127,166,.16), transparent 70%), linear-gradient(165deg, #0e1116, #171b22 55%, #241e14); }
body.hv-aimwall .m-hero h1 { color: #fff !important; letter-spacing: -.005em; }
body.hv-aimwall .m-hero .eyebrow { color: #ffbf47; letter-spacing: .22em; }
body.hv-aimwall .m-hero .sub { color: rgba(232,234,238,.86); }
body.hv-aimwall .m-hero .m-chips span { background: rgba(255,255,255,.06); border: 1px solid rgba(255,191,71,.24); color: #eceef1; }
.m-aim { aspect-ratio: 600 / 560; --aimd: 1s; }
.m-aimsvg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 22px; box-shadow: 0 34px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06); animation: m-aimin 1s .05s var(--m-ease) backwards; }
.m-aimsvg .wall { fill: #1b1f26; } .m-aimsvg .win { fill: url(#m-aimsk); } .m-aimsvg .ridge { fill: #1c1622; } .m-aimsvg .mull { stroke: #2c3039; stroke-width: 6; }
.m-aimsvg .trail { fill: none; stroke: #f6c46a; stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; opacity: .8; }
.m-aimsvg .floor { fill: #25282f; } .m-aimsvg .tape { stroke: #f2b33d; stroke-width: 5; stroke-dasharray: 16 10; opacity: .7; }
.m-aimsvg .ft { font: 600 15px var(--m-head); fill: #c9ccd3; letter-spacing: .04em; }
.m-aimsvg .board { fill: #2a2e36; stroke: #3c414b; stroke-width: 2; } .m-aimsvg .grid { fill: none; stroke: #383d47; stroke-width: 1.2; }
.m-aimsvg .axis { fill: none; stroke: rgba(255,214,140,.55); stroke-width: 1.6; stroke-dasharray: 6 6; } .m-aimsvg text:not(.ft) { font: 700 14px var(--m-head); fill: #ffcf73; }
.m-aimsvg .lo, .m-aimsvg .hi, .m-aimsvg .cone { mix-blend-mode: screen; }
.m-aimsvg .lo { opacity: 1; animation: m-aimlo 12s var(--aimd) linear infinite; } .m-aimsvg .cut { fill: none; stroke: #fff8e0; stroke-width: 2.4; stroke-linejoin: round; }
.m-aimsvg .hi { opacity: 0; animation: m-aimhi 12s var(--aimd) linear infinite; }
.m-aimsvg .cone { opacity: .55; animation: m-aimcone 12s var(--aimd) linear infinite; }
.m-aimsvg .bench { fill: #3b404a; } .m-aimsvg .leg { stroke: #3b404a; stroke-width: 9; }
.m-aimsvg .stand path { fill: none; stroke: #5a616c; stroke-width: 7; stroke-linecap: round; } .m-aimsvg .stand rect { fill: #5a616c; }
.m-aimsvg .wire { fill: none; stroke: #c2410c; stroke-width: 3; stroke-linecap: round; }
.m-aimhead, .m-aimfog, .m-aimtail { position: absolute; z-index: 3; display: block; isolation: isolate; }
.m-aimhead { left: 4%; top: 33%; width: 44%; animation: m-aimin 1s .15s var(--m-ease) backwards; }
.m-aimfog { left: 50%; top: 64.5%; width: 21%; animation: m-aimin 1s .35s var(--m-ease) backwards; }
.m-aimtail { left: 76%; top: 59.3%; width: 17%; animation: m-aimin 1s .5s var(--m-ease) backwards; }
:is(.m-aimheadimg, .m-aimfogimg, .m-aimtailimg) { display: block; filter: drop-shadow(0 14px 14px rgba(0,0,0,.55)); transition: transform .45s var(--m-ease); }
:is(.m-aimheadimg, .m-aimfogimg, .m-aimtailimg):hover { transform: translateY(-6px); }
.m-aimfx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; mix-blend-mode: screen; }
.m-aimfx .drl { fill: none; stroke: #fff; stroke-width: 3.4; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px rgba(214,232,255,.95)); opacity: 1; animation: m-aimdrl 12s var(--aimd) linear infinite; }
.m-aimfog .m-aimfx .drl { stroke-width: 9; }
.m-aimfx .turn { fill: none; stroke: #ffa31a; stroke-width: 3.6; filter: drop-shadow(0 0 3px #ffa31a) drop-shadow(0 0 9px rgba(255,163,26,.9)); opacity: 0; animation: m-aimturn 12s var(--aimd) linear infinite; }
.m-aimfx .lo, .m-aimfx .hi { fill: #fffbe8; filter: blur(2.5px) drop-shadow(0 0 6px #fff4cf); }
.m-aimfx .lo { opacity: 1; animation: m-aimlo 12s var(--aimd) linear infinite; } .m-aimfx .hi { opacity: 0; animation: m-aimhi 12s var(--aimd) linear infinite; }
.m-aimred { position: absolute; inset: -14% -18%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,40,40,.6), rgba(255,40,40,.18) 60%, transparent); opacity: .35; animation: m-aimbrake 4s 1.6s ease-in-out infinite; }
.m-aimdash { position: absolute; left: 50%; right: 3%; top: 87%; height: 8.5%; z-index: 4; display: flex; align-items: center; gap: 2cqw; padding: 0 2.4cqw; border-radius: 10px; background: linear-gradient(180deg, #0c0e12, #15181e); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 22px rgba(0,0,0,.45); animation: m-aimin 1s .65s var(--m-ease) backwards; }
.m-aimdash .led { flex: none; width: 2.6cqw; height: 2.6cqw; min-width: 9px; min-height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; animation: m-aimled 12s var(--aimd) linear infinite; }
.m-aimmodes { position: relative; flex: 1; height: 100%; }
.m-aimmodes i { position: absolute; left: 0; top: 50%; translate: 0 -50%; font: 700 clamp(10px, 2.7cqw, 16px)/1 var(--m-head); font-style: normal; color: #ffe2a0; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: 0; }
.m-aimmodes .k0 { animation: m-aimk0 12s var(--aimd) linear infinite; } .m-aimmodes .k1 { opacity: 1; animation: m-aimk1 12s var(--aimd) linear infinite; } .m-aimmodes .k2 { animation: m-aimk2 12s var(--aimd) linear infinite; } .m-aimmodes .k3 { color: #ffa31a; animation: m-aimk3 12s var(--aimd) linear infinite; }
.m-aimdash small { font: 700 clamp(9px, 2.2cqw, 13px)/1 var(--m-head); color: #8a8f99; letter-spacing: .06em; }
@keyframes m-aimin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-aimdrl { 0%, 8% { opacity: 0; } 10%, 70% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes m-aimturn { 0%, 72.9% { opacity: 0; } 73%, 76.9% { opacity: 1; } 77%, 80.9% { opacity: 0; } 81%, 84.9% { opacity: 1; } 85%, 88.9% { opacity: 0; } 89%, 92.9% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes m-aimlo { 0%, 24% { opacity: 0; } 27%, 69% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes m-aimhi { 0%, 49% { opacity: 0; } 52%, 69% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes m-aimcone { 0%, 24% { opacity: 0; } 27%, 49% { opacity: .55; } 52%, 69% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes m-aimk0 { 0%, 8.9% { opacity: 0; } 9%, 24.9% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes m-aimk1 { 0%, 24.9% { opacity: 0; } 25%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes m-aimk2 { 0%, 49.9% { opacity: 0; } 50%, 71.9% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes m-aimk3 { 0%, 72.9% { opacity: 0; } 73%, 92.9% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes m-aimled { 0%, 8.9% { background: #3a3f48; box-shadow: none; } 9%, 72.9% { background: #fff; box-shadow: 0 0 8px #fff; } 73%, 76.9%, 81%, 84.9%, 89%, 92.9% { background: #ffa31a; box-shadow: 0 0 10px #ffa31a; } 77%, 80.9%, 85%, 88.9%, 93%, 100% { background: #3a3f48; box-shadow: none; } }
@keyframes m-aimbrake { 0%, 100% { opacity: .2; } 12%, 40% { opacity: 1; } 55% { opacity: .2; } }
.m-aimspecs > span { color: #ffcf73; }
.m-aimspecs a { border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,191,71,.26); color: #f1f2f4 !important; }
.m-aimspecs small { color: #d7d9de; }
.m-aimspecs b { border-radius: 999px; background: linear-gradient(180deg, #ffbf47, #f0a000); color: #16181d; } .m-aimspecs a:nth-of-type(3n+2) b { background: #f4f5f7; } .m-aimspecs a:nth-of-type(3n) b { background: linear-gradient(180deg, #ff6a3d, #c2410c); color: #fff; }
.m-aimspecs a:is(:hover, :focus-visible) { background: rgba(255,255,255,.12); border-color: #ffbf47; }
.m-aimtile { border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,191,71,.2); color: #fff !important; backdrop-filter: blur(6px); }
.m-aimtile .m-q8tx b { color: #fff; } .m-aimtile .m-q8tx small { color: #ffcf73; }
.m-aimtile em { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid #ffbf47; box-shadow: 0 0 8px rgba(255,191,71,.55), inset 0 0 4px rgba(255,191,71,.5); transition: background .3s, box-shadow .3s; }
.m-aimtile:is(:hover, :focus-visible) em { background: #fff; border-color: #fff; box-shadow: 0 0 12px #fff, 0 0 22px rgba(214,232,255,.8); }
.m-aimimg { border-radius: 50%; background: radial-gradient(circle at 45% 38%, #fff, #e6e3da); }
.m-aimtile:is(:hover, :focus-visible) { background: rgba(255,255,255,.1); border-color: #ffbf47; }
body.hv-aimwall main section > .wrap > h2::after { content: ""; display: block; width: 120px; height: 8px; margin-top: 12px; border-radius: 999px; background: radial-gradient(closest-side, #fff7dc, #ffbf47 45%, rgba(240,160,0,0)) 0 0 / 42px 8px no-repeat, linear-gradient(90deg, #d08a00, rgba(208,138,0,.15)); }
body.hv-aimwall .pcard:hover, body.hv-aimwall .m-acard:hover { box-shadow: 0 0 0 2px #d08a00, 0 18px 40px rgba(22,24,29,.14); }
body.hv-aimwall .m-cta .m-band { border-radius: 20px; background: radial-gradient(40% 80% at 86% 30%, rgba(240,160,0,.3), transparent 70%), linear-gradient(120deg, #101318, #1d2129 55%, #3a2a0c); }
body.hv-aimwall .m-cta .m-band::before { width: 150px; height: 150px; right: 46px; top: -34px; background: transparent; border: 6px solid rgba(255,255,255,.75); box-shadow: 0 0 18px rgba(255,255,255,.45), inset 0 0 18px rgba(255,255,255,.3); opacity: .55; }
body.hv-aimwall .m-page-hero { background: radial-gradient(40% 80% at 86% 30%, rgba(240,160,0,.22), transparent 70%), linear-gradient(120deg, #101318, #2a2414); } body.hv-aimwall .m-page-hero .eyebrow { color: #ffcf73; }
body.hv-aimwall footer.site { background: #101318; color: #d4d7dd; border: 0; } body.hv-aimwall footer.site nav a { color: #ffcf73; }
body.hv-aimwall .m-collage .m-card { border-radius: 14px; }

/* blinker (LX-LIGHT): an amber lamp button; on hover a white halo ring draws itself around the inside edge like a DRL powering on and the arrow blinks like a turn signal */
@property --m-blk { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
body.bv-blinker .btn { border-radius: 999px; padding: 15px 26px; }
body.bv-blinker :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #ffbf47, #f0a000 55%, #d08a00); color: #16181d; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 24px rgba(208,138,0,.32); }
body.bv-blinker :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #2a2e36, #16181d); color: #ffcf73; box-shadow: 0 14px 30px rgba(22,24,29,.3); }
body.bv-blinker .btn::after { display: none; }
body.bv-blinker .btn::before { content: ""; position: absolute; inset: 3px; z-index: -1; pointer-events: none; border-radius: inherit; border: 2px solid #fff; box-shadow: 0 0 8px rgba(255,255,255,.8), inset 0 0 8px rgba(255,255,255,.5); -webkit-mask: conic-gradient(#000 var(--m-blk), transparent 0); mask: conic-gradient(#000 var(--m-blk), transparent 0); opacity: 0; transition: --m-blk .6s var(--m-ease), opacity .2s; }
body.bv-blinker .btn:is(:hover, :focus-visible)::before { --m-blk: 360deg; opacity: 1; }
body.bv-blinker :is(.m-white, .m-btn-ghost, .btn.ghost)::before { border-color: #f0a000; box-shadow: 0 0 8px rgba(240,160,0,.7), inset 0 0 8px rgba(240,160,0,.4); }
body.bv-blinker .btn .arr { display: inline-block; transition: transform .3s var(--m-ease); }
body.bv-blinker .btn:is(:hover, :focus-visible) .arr { transform: translateX(4px); color: #ffa31a; animation: m-blkarr .9s steps(1, end) infinite; }
body.bv-blinker .m-cta .btn.m-white:hover { color: #7a4c00; }
@keyframes m-blkarr { 0% { opacity: 1; } 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { body.bv-blinker .btn::before { --m-blk: 360deg; } }

/* manual (MEIEST): an open building-instructions booklet; a step counter ticks up while a brick flower assembles stud by stud on the left page, a parts call-out lists the pieces, the right page shows the real finished shop and a check stamp lands; the real phone-box set and typewriter stand on the table with loose micro bricks */
@property --m-ibn { syntax: "<integer>"; inherits: false; initial-value: 13; }
body.hv-manual .m-hero { background: radial-gradient(circle, rgba(184,61,53,.09) 0 3px, transparent 3.6px) 0 0 / 20px 20px, radial-gradient(46% 58% at 76% 42%, #fffdf9, transparent 70%), radial-gradient(30% 40% at 4% 96%, rgba(229,143,164,.2), transparent 70%), linear-gradient(120deg, #fbefe6, #fbf6f0 50%, #f6e8e0); }
body.hv-manual .m-hero h1 { letter-spacing: .005em; }
body.hv-manual .m-hero .eyebrow { color: #962e28; letter-spacing: .2em; }
.m-ib { aspect-ratio: 600 / 560; }
.m-ibbook { position: absolute; left: 3%; right: 3%; top: 3%; height: 63%; border-radius: 8px; background: radial-gradient(60% 100% at 50% 50%, rgba(0,0,0,.06), transparent 60%) 50% 0 / 9% 100% no-repeat, linear-gradient(90deg, #fffdf8 0 48.6%, #ece4d6 49.5%, #d8cdbb 50%, #ece4d6 50.5%, #fffdf8 51.4%); box-shadow: 0 2px 0 #f1e8da, 0 4px 0 #e5dac8, 0 6px 0 #f1e8da, 0 8px 0 #dccfba, 0 26px 40px rgba(42,30,34,.16); animation: m-ibin .9s .05s var(--m-ease) backwards; }
.m-ibbook::before, .m-ibbook::after { content: ""; position: absolute; top: 4%; height: 3px; width: 40%; border-radius: 2px; background: #b83d35; opacity: .8; } .m-ibbook::before { left: 4%; width: 2.4%; } .m-ibbook::after { right: 4%; width: 12%; background: #e9dfd1; }
.m-ibstep { position: absolute; left: 7%; top: 7.5%; z-index: 2; display: grid; line-height: 1; color: #2a1e22; animation: m-ibin .9s .2s var(--m-ease) backwards; }
.m-ibstep small { font: 600 clamp(9px, 2cqw, 12px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #8a7a7e; }
.m-ibstep b { font: 600 clamp(26px, 7.4cqw, 46px)/1 var(--m-head); counter-reset: m-ibn var(--m-ibn); animation: m-ibstep 10s .6s linear infinite; } .m-ibstep b::after { content: counter(m-ibn); }
.m-ibparts { position: absolute; left: 29%; top: 7%; width: 18%; z-index: 2; display: grid; gap: .8cqw; padding: 1.2cqw 1.4cqw; border-radius: 8px; background: #e3f0f8; box-shadow: inset 0 0 0 1.5px #a9cde2; animation: m-ibin .9s .3s var(--m-ease) backwards; }
.m-ibparts i { display: flex; align-items: center; gap: 1.2cqw; font: 600 clamp(9px, 2.2cqw, 13px)/1 var(--m-head); font-style: normal; color: #2a1e22; }
.m-ibparts i::before { content: ""; width: 3.4cqw; height: 3.4cqw; min-width: 11px; min-height: 11px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55) 0 30%, transparent 34%), var(--c); box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); }
.m-ibparts .pk { --c: #e58fa4; } .m-ibparts .gr { --c: #4f9a63; } .m-ibparts .gr::before { border-radius: 2px; } .m-ibparts .yl { --c: #f2b544; }
.m-ibflower { position: absolute; left: 9%; top: 18%; width: 36%; height: auto; z-index: 2; overflow: visible; }
.m-ibflower .pt { animation: m-ibpop 10s calc(.6s + var(--i) * .4s) var(--m-ease) infinite backwards; }
.m-ibflower .pt > :first-child { stroke: rgba(42,30,34,.22); stroke-width: 1.4; }
.m-ibflower .pot > * { fill: #b0703f; } .m-ibflower .pot .sd { fill: #c4844f; }
.m-ibflower .stem > * { fill: #4f9a63; } .m-ibflower .stem .sd { fill: #62ad74; }
.m-ibflower .leaf > * { fill: #6fbf7f; } .m-ibflower .leaf .sd { fill: #8ad197; }
.m-ibflower .pet > * { fill: #e58fa4; } .m-ibflower .pet.b > * { fill: #f0a6b8; } .m-ibflower .pet .sd { fill: #f7c5d1; }
.m-ibflower .mid > * { fill: #f2b544; } .m-ibflower .mid .sd { fill: #f8cf6c; }
.m-ibflower .sd { stroke: rgba(42,30,34,.18); stroke-width: 1; }
.m-ibflower .shd { fill: rgba(42,30,34,.1); }
.m-ibflower .arw, .m-ibflower .arh { fill: none; stroke: #b83d35; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.m-ibflower .arw { stroke-dasharray: 7 6; animation: m-ibarw 1.4s linear infinite; }
.m-ibpg { position: absolute; left: 7%; top: 60%; z-index: 2; font: 600 clamp(9px, 2cqw, 12px)/1 var(--m-head); color: #a79a9d; }
.m-ibfin { position: absolute; left: 54%; top: 8%; width: 38%; z-index: 2; display: block; padding: 1.2cqw 1.2cqw 0; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1.5px #eadfd0, 0 6px 14px rgba(42,30,34,.08); animation: m-ibin .9s .4s var(--m-ease) backwards; }
.m-ibshop { display: block; } .m-ibshop img { border-radius: 4px !important; }
.m-ibfin b { display: block; padding: .9cqw 0 1.1cqw; font: 600 clamp(9px, 2.1cqw, 13px)/1 var(--m-head); color: #962e28; text-align: center; letter-spacing: .04em; }
.m-ibok { position: absolute; left: 86%; top: 3.5%; z-index: 3; display: grid; place-items: center; width: 9.5%; aspect-ratio: 1; border-radius: 50%; background: #b83d35; color: #fff; font: 700 clamp(14px, 4.6cqw, 28px)/1 var(--m-body); box-shadow: 0 0 0 .8cqw rgba(255,255,255,.9), 0 8px 16px rgba(150,46,40,.3); rotate: -10deg; animation: m-ibok 10s .6s var(--m-ease) infinite; }
.m-ibloose { position: absolute; left: 41%; top: 73%; width: 23%; height: auto; z-index: 3; overflow: visible; filter: drop-shadow(0 4px 3px rgba(42,30,34,.18)); }
.m-ibloose .sd { stroke: rgba(0,0,0,.12); } .m-ibloose .lb > rect:first-child { stroke: rgba(0,0,0,.12); }
.m-ibloose .hop > * { animation: m-ibhop 5s 2.5s ease-in-out infinite; }
.m-ibtype, .m-ibbooth { position: absolute; z-index: 4; display: block; transition: transform .45s var(--m-ease); }
.m-ibtype { left: 0; top: 64%; width: 40%; filter: drop-shadow(0 14px 12px rgba(42,30,34,.22)); animation: m-ibin .9s .55s var(--m-ease) backwards; }
.m-ibbooth { left: 66%; top: 40%; width: 32%; filter: drop-shadow(0 16px 14px rgba(42,30,34,.26)); animation: m-ibin .9s .15s var(--m-ease) backwards; }
.m-ibtype:hover, .m-ibbooth:hover, .m-ibfin:hover .m-ibshop { transform: translateY(-6px); }
@keyframes m-ibin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-ibpop { 0% { opacity: 0; translate: 0 -22px; } 4% { opacity: 1; translate: 0 2px; } 6% { translate: 0 0; } 80% { opacity: 1; translate: 0 0; } 86%, 100% { opacity: 0; translate: 0 0; } }
@keyframes m-ibstep { 0% { --m-ibn: 1; } 50%, 86% { --m-ibn: 13; } 90%, 100% { --m-ibn: 1; } }
@keyframes m-ibok { 0%, 52% { opacity: 0; scale: 1.8; } 56% { opacity: 1; scale: .92; } 58%, 84% { opacity: 1; scale: 1; } 88%, 100% { opacity: 0; scale: 1; } }
@keyframes m-ibarw { to { stroke-dashoffset: -26; } }
@keyframes m-ibhop { 0%, 70%, 100% { translate: 0 0; } 78% { translate: 0 -12px; } 86% { translate: 0 0; } 90% { translate: 0 -3px; } }
.m-ibspecs > span { color: #962e28; }
.m-ibspecs a { border-radius: 8px; border: 1.5px solid #eadbd2; }
.m-ibspecs b { position: relative; border-radius: 4px; margin-top: 4px; background: #b83d35; font-family: var(--m-head); font-weight: 600; } .m-ibspecs a:nth-of-type(3n+2) b { background: #3f8a58; } .m-ibspecs a:nth-of-type(3n) b { background: #2a1e22; }
.m-ibspecs b::before { content: ""; position: absolute; left: 6px; right: 6px; top: -4px; height: 4px; border-radius: 2px 2px 0 0; background: radial-gradient(circle at 50% 100%, currentColor 0 0, transparent 0), linear-gradient(90deg, inherit 0 0); background: inherit; -webkit-mask: linear-gradient(90deg, #000 0 8px, transparent 8px 12px) 0 0 / 12px 100% repeat-x; mask: linear-gradient(90deg, #000 0 8px, transparent 8px 12px) 0 0 / 12px 100% repeat-x; }
.m-ibspecs a:is(:hover, :focus-visible) { border-color: #b83d35; }
.m-ibtile { border-radius: 10px; border: 1.5px solid #eadbd2; box-shadow: 0 10px 22px rgba(42,30,34,.06); }
.m-ibtile em { width: 22px; height: 14px; border-radius: 2px; background: radial-gradient(circle at 6px 4px, rgba(255,255,255,.55) 0 2px, transparent 2.4px), radial-gradient(circle at 16px 4px, rgba(255,255,255,.55) 0 2px, transparent 2.4px), #b83d35; box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); transition: translate .3s var(--m-ease); }
.m-ibtile:nth-of-type(4n+2) em { background-color: #e58fa4; } .m-ibtile:nth-of-type(4n+3) em { background-color: #3f8a58; } .m-ibtile:nth-of-type(4n) em { background-color: #f2b544; }
.m-ibimg { border-radius: 8px; background: radial-gradient(circle at 50% 40%, #fff, #f5ebe4); }
.m-ibtile .m-q8tx small { color: #962e28; }
.m-ibtile:is(:hover, :focus-visible) { border-color: #b83d35; box-shadow: 0 16px 30px rgba(42,30,34,.12); } .m-ibtile:is(:hover, :focus-visible) em { translate: 0 -3px; }
body.hv-manual main section > .wrap > h2::after { content: ""; display: block; width: 112px; height: 14px; margin-top: 10px; background: radial-gradient(circle at 7px 3px, #d4655c 0 3px, transparent 3.4px) 0 0 / 14px 14px repeat-x, linear-gradient(#b83d35, #b83d35) 0 4px / 100% 10px no-repeat; border-radius: 2px; }
body.hv-manual .pcard:hover, body.hv-manual .m-acard:hover { box-shadow: 0 0 0 2px #b83d35, 0 18px 40px rgba(42,30,34,.12); }
body.hv-manual .m-cta .m-band { border-radius: 16px; background: radial-gradient(circle, rgba(255,255,255,.12) 0 3px, transparent 3.6px) 0 0 / 22px 22px, linear-gradient(120deg, #5a1f1b, #962e28 55%, #b83d35); }
body.hv-manual .m-cta .m-band::before { width: 160px; height: 84px; right: 46px; top: 26px; border-radius: 6px; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.35) 0 9px, transparent 10px) 0 -26px / 40px 40px repeat-x, rgba(255,255,255,.12); }
body.hv-manual .m-page-hero { background: radial-gradient(circle, rgba(255,255,255,.1) 0 3px, transparent 3.6px) 0 0 / 22px 22px, linear-gradient(120deg, #5a1f1b, #b83d35); } body.hv-manual .m-page-hero .eyebrow { color: #ffd9a0; }
body.hv-manual footer.site { background: #2a1e22; color: #e6d9d6; border: 0; } body.hv-manual footer.site nav a { color: #f6b8a8; }
body.hv-manual .m-collage .m-card { border-radius: 10px; }
body.hv-manual :is(h3, h4, .m-q8tx b, .m-toc h2, aside h2) { font-family: var(--m-body) !important; font-weight: 700 !important; letter-spacing: 0; } /* the pixel face reads C as O at small sizes */

/* stud (MEIEST): a flat brick button with a row of studs on its top edge; on hover the studs pop up one after another like bricks clicking on and the button presses down a notch */
body.bv-stud .btn { border-radius: 6px; padding: 15px 26px; overflow: visible; margin-top: 5px; }
body.bv-stud :is(.btn.accent, .pcard .btn, .m-btn-main) { background: #b83d35; color: #fff; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), 0 10px 20px rgba(184,61,53,.25); }
body.bv-stud :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: #962e28; color: #fff; }
body.bv-stud .btn::after { display: none; }
body.bv-stud .btn::before { content: ""; position: absolute; left: 12px; right: 12px; top: -6px; height: 6px; z-index: -1; pointer-events: none; border-radius: 2px 2px 0 0; background: inherit; background-color: #b83d35; -webkit-mask: linear-gradient(90deg, #000 0 14px, transparent 14px 22px) 0 0 / 22px 100% repeat-x; mask: linear-gradient(90deg, #000 0 14px, transparent 14px 22px) 0 0 / 22px 100% repeat-x; transform-origin: 50% 100%; transition: transform .35s var(--m-ease), background-color .2s; }
body.bv-stud :is(.m-white, .m-btn-ghost, .btn.ghost)::before { background: currentColor; }
body.bv-stud .btn:is(:hover, :focus-visible) { transform: translateY(2px); }
body.bv-stud .btn:is(:hover, :focus-visible)::before { animation: m-studpop .45s var(--m-ease); }
body.bv-stud :is(.btn.accent, .pcard .btn, .m-btn-main):hover::before { background-color: #962e28; }
body.bv-stud .btn .arr { display: inline-block; transition: transform .3s var(--m-ease); } body.bv-stud .btn:hover .arr { transform: translateX(4px); }
body.bv-stud .m-cta .btn.m-white:hover { color: #962e28; }
body.bv-stud .m-cta .btn.m-white::before { background: #fff; }
@keyframes m-studpop { 0% { transform: scaleY(1); } 35% { transform: scaleY(.2); } 70% { transform: scaleY(1.35); } 100% { transform: scaleY(1); } }

/* daycycle (URUQ): a kitchen counter through one 24-hour cycle; the timer hand sweeps 16h on / 8h off, the real garden's grow light switches on (LED strip + violet-pink light over the herbs), the sun crosses the window, seedlings in a pod tray push their domes off and unfold leaves; at night the room dims and the moon rises; bubbles keep rising in the real smart tank */
body.hv-daycycle .m-hero { background: radial-gradient(46% 58% at 76% 42%, #ffffff, transparent 70%), radial-gradient(30% 40% at 4% 96%, rgba(176,77,214,.1), transparent 70%), radial-gradient(34% 44% at 96% 6%, rgba(46,143,90,.12), transparent 70%), linear-gradient(120deg, #e9f3ec, #f6f9f5 50%, #e6f0e9); }
body.hv-daycycle .m-hero h1 { letter-spacing: -.01em; }
body.hv-daycycle .m-hero .eyebrow { color: #1c5f3a; letter-spacing: .2em; }
.m-dy { aspect-ratio: 600 / 560; --dyd: 1s; }
.m-dywall { position: absolute; left: 0; right: 0; top: 0; height: 70%; border-radius: 22px 22px 0 0; background: linear-gradient(#dde9e0 1.5px, transparent 1.5px) 0 0 / 46px 23px, linear-gradient(90deg, #dde9e0 1.5px, transparent 1.5px) 0 0 / 46px 23px, linear-gradient(180deg, #f8fbf8, #eef5f0); box-shadow: inset 0 0 0 1px rgba(27,43,34,.05); animation: m-dyin .9s .05s var(--m-ease) backwards; }
.m-dycounter { position: absolute; left: 0; right: 0; top: 70%; bottom: 0; border-radius: 0 0 22px 22px; background: linear-gradient(180deg, #f0dfc2, #e2c9a2 70%, #c7a77c 70% 74%, #a7c7b2 74%, #93b8a0); box-shadow: 0 26px 40px rgba(27,43,34,.14); animation: m-dyin .9s .05s var(--m-ease) backwards; }
.m-dycounter::after { content: ""; position: absolute; left: 52%; width: 12%; bottom: 10%; height: 4%; border-radius: 99px; background: #e9f2ec; box-shadow: 22cqw 0 0 #e9f2ec; }
.m-dywin { position: absolute; left: 58%; right: 4%; top: 4%; height: 27%; z-index: 1; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 max(5px, 1.2cqw) #fff, 0 10px 22px rgba(27,43,34,.12); }
.m-dywin i { position: absolute; display: block; }
.m-dywin .sky { inset: 0; background: linear-gradient(180deg, #8fd0f2, #dff3f8); }
.m-dywin .night { inset: 0; background: radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.6px) 0 0 / 34px 26px, radial-gradient(circle, rgba(255,255,255,.5) 0 .8px, transparent 1.4px) 14px 12px / 46px 34px, linear-gradient(180deg, #121c36, #2b3c66); opacity: 0; animation: m-dynight 12s var(--dyd) linear infinite; }
.m-dywin .sun { width: 17%; aspect-ratio: 1; left: 40%; top: 14%; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fffbe0, #ffd25a 60%, #f6b52e); box-shadow: 0 0 18px 6px rgba(255,214,90,.55); animation: m-dysun 12s var(--dyd) linear infinite; }
.m-dywin .moon { width: 12%; aspect-ratio: 1; right: 20%; top: 20%; border-radius: 50%; box-shadow: inset -.9cqw .5cqw 0 #f6efcf; opacity: 0; animation: m-dymoon 12s var(--dyd) linear infinite; }
.m-dywin .frame { inset: 0; background: linear-gradient(#fff, #fff) 50% 0 / max(4px, 1cqw) 100% no-repeat, linear-gradient(#fff, #fff) 0 52% / 100% max(4px, 1cqw) no-repeat; }
.m-dytimer { position: absolute; left: 2%; top: 3%; z-index: 6; display: flex; align-items: center; gap: 1.6cqw; padding: 1.2cqw 2.4cqw 1.2cqw 1.2cqw; border-radius: 16px; background: #fff; box-shadow: 0 10px 22px rgba(27,43,34,.12), inset 0 0 0 1.5px #dbe8df; animation: m-dyin .9s .3s var(--m-ease) backwards; }
.m-dytimer svg { width: 9cqw; min-width: 32px; height: auto; flex: none; overflow: visible; }
.m-dytimer .tk { fill: none; stroke: #dbe6ee; stroke-width: 7; } .m-dytimer .on { fill: none; stroke: #f2b33d; stroke-width: 7; stroke-dasharray: 66.7 100; transform: rotate(-90deg); transform-origin: 30px 30px; }
.m-dytimer .hd { transform-origin: 30px 30px; animation: m-dyhand 12s var(--dyd) linear infinite; } .m-dytimer .hd path { stroke: #1b2b22; stroke-width: 3; stroke-linecap: round; } .m-dytimer .hd circle { fill: #b04dd6; } .m-dytimer .ct { fill: #1b2b22; }
.m-dytimer > span { display: grid; gap: .6cqw; }
.m-dytimer b { font: 600 clamp(10px, 2.5cqw, 14px)/1.1 var(--m-head); color: #1b2b22; white-space: nowrap; }
.m-dytimer small { position: relative; display: block; height: 1.3em; font: 600 clamp(9px, 2.1cqw, 12px)/1.3 var(--m-body); white-space: nowrap; }
.m-dytimer small i { position: absolute; left: 0; top: 0; font-style: normal; } .m-dytimer small .lon { color: #8e3fb0; animation: m-dylon 12s var(--dyd) linear infinite; } .m-dytimer small .loff { color: #4a5a50; opacity: 0; animation: m-dyloff 12s var(--dyd) linear infinite; }
.m-dygarden, .m-dytank { position: absolute; z-index: 3; display: block; isolation: isolate; }
.m-dygarden { left: 2%; top: 20%; width: 50%; animation: m-dyin 1s .1s var(--m-ease) backwards; }
.m-dytank { left: 57%; top: 35%; width: 41%; animation: m-dyin 1s .3s var(--m-ease) backwards; }
:is(.m-dygardenimg, .m-dytankimg) { display: block; filter: drop-shadow(0 14px 14px rgba(27,43,34,.2)); transition: transform .45s var(--m-ease); }
:is(.m-dygardenimg, .m-dytankimg):hover { transform: translateY(-5px); }
.m-dygardenimg img { clip-path: polygon(0 0, 100% 0, 100% 66%, 88% 66%, 88% 100%, 0 100%); } /* drops the pale floor shadow the listing photo has right of the planter */
.m-dyglow, .m-dyled { position: absolute; pointer-events: none; }
.m-dyglow { left: 6%; right: 6%; top: 4.5%; height: 62%; background: radial-gradient(52% 75% at 50% 0%, rgba(205,110,255,.55), rgba(255,120,190,.22) 55%, transparent 100%); mix-blend-mode: screen; opacity: 1; animation: m-dyglow 12s var(--dyd) linear infinite; }
.m-dyled { left: 17%; right: 14%; top: 2.4%; height: 2%; border-radius: 99px; background: #2b2d2c; }
.m-dyled::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(90deg, #ff5a7a 0 7px, #fff3f6 7px 9px, #6d8bff 9px 16px, #fff3f6 16px 18px); box-shadow: 0 0 10px 2px rgba(214,120,255,.75), 0 8px 22px rgba(255,110,180,.6); opacity: 1; animation: m-dyglow 12s var(--dyd) linear infinite; }
.m-dybub { position: absolute; left: 24%; width: 16%; top: 23%; height: 42%; pointer-events: none; }
.m-dybub i { position: absolute; left: var(--x); bottom: 0; width: var(--s); height: var(--s); border-radius: 50%; border: 1px solid rgba(255,255,255,.95); background: rgba(190,230,255,.35); opacity: 0; animation: m-dybub 3.2s var(--d) ease-in infinite; }
.m-dypods { position: absolute; left: 2%; top: 72.5%; width: 40%; height: auto; z-index: 4; overflow: visible; animation: m-dyin 1s .45s var(--m-ease) backwards; }
.m-dypods .shd { fill: rgba(27,43,34,.12); } .m-dypods .tr { fill: #f8fbf9; stroke: #cfe0d4; stroke-width: 2; } .m-dypods .lip { fill: #e6efe9; }
.m-dypods .bk { fill: #fff; stroke: #c4d6ca; stroke-width: 1.5; } .m-dypods .sl { stroke: #d6e3da; stroke-width: 2; } .m-dypods .sg { fill: #8a5d3b; }
.m-dypods .st { fill: none; stroke: #4f9a63; stroke-width: 3.4; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: m-dygrow 12s calc(var(--dyd) + var(--i) * .3s) var(--m-ease) infinite; }
.m-dypods .lv { fill: #6cc07c; transform-box: fill-box; transform-origin: 50% 100%; animation: m-dyleaf 12s calc(var(--dyd) + var(--i) * .3s) var(--m-ease) infinite; }
.m-dypods .dm { fill: rgba(255,255,255,.4); stroke: rgba(120,165,140,.7); stroke-width: 1.5; animation: m-dydome 12s calc(var(--dyd) + var(--i) * .3s) var(--m-ease) infinite; }
.m-dydark { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: 22px; background: radial-gradient(60% 50% at 30% 40%, rgba(120,90,200,.12), transparent 70%), rgba(18,28,54,.22); opacity: 0; animation: m-dynight 12s var(--dyd) linear infinite; }
@keyframes m-dyin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-dyglow { 0% { opacity: 0; } 3%, 63% { opacity: 1; } 66.7%, 100% { opacity: 0; } }
@keyframes m-dynight { 0%, 64% { opacity: 0; } 70%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes m-dysun { 0% { left: -12%; top: 100%; } 16% { left: 14%; top: 36%; } 33% { left: 41%; top: 12%; } 50% { left: 68%; top: 36%; } 66.7%, 100% { left: 96%; top: 100%; } }
@keyframes m-dymoon { 0%, 66% { opacity: 0; translate: 0 8px; } 74%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 0; } }
@keyframes m-dyhand { to { rotate: 360deg; } }
@keyframes m-dylon { 0%, 66.6% { opacity: 1; } 66.7%, 100% { opacity: 0; } }
@keyframes m-dyloff { 0%, 66.6% { opacity: 0; } 66.7%, 100% { opacity: 1; } }
@keyframes m-dybub { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: .95; } 85% { opacity: .8; } 100% { opacity: 0; transform: translate(.8cqw, -15cqw); } }
@keyframes m-dygrow { 0%, 4% { scale: 1 0; opacity: 1; } 40% { scale: 1 .6; } 62%, 92% { scale: 1 1; opacity: 1; } 98%, 100% { scale: 1 1; opacity: 0; } }
@keyframes m-dyleaf { 0%, 30% { scale: 0; opacity: 1; } 50% { scale: .7; } 62%, 92% { scale: 1; opacity: 1; } 98%, 100% { scale: 1; opacity: 0; } }
@keyframes m-dydome { 0%, 22% { translate: 0 0; opacity: 1; } 32%, 94% { translate: 0 -30px; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
.m-dyspecs > span { color: #1c5f3a; }
.m-dyspecs a { border-radius: 14px; border: 1.5px solid #d3e4d8; }
.m-dyspecs b { border-radius: 10px; background: #257a4c; font-family: var(--m-head); font-weight: 600; } .m-dyspecs a:nth-of-type(3n+2) b { background: #8e3fb0; } .m-dyspecs a:nth-of-type(3n) b { background: #1b2b22; }
.m-dyspecs a:is(:hover, :focus-visible) { border-color: #257a4c; }
.m-dytile { border-radius: 16px; border: 1.5px solid #d3e4d8; box-shadow: 0 10px 22px rgba(27,43,34,.06); }
.m-dytile em { width: 16px; height: 16px; border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #6cc07c, #2e8f5a); transition: rotate .4s var(--m-ease), background .3s; }
.m-dytile:is(:hover, :focus-visible) em { rotate: -20deg; background: linear-gradient(135deg, #d77cff, #8e3fb0); }
.m-dyimg { border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff, #e6f1e9); }
.m-dytile .m-q8tx small { color: #1c5f3a; }
.m-dytile:is(:hover, :focus-visible) { border-color: #257a4c; box-shadow: 0 16px 30px rgba(27,43,34,.12); }
body.hv-daycycle main section > .wrap > h2::after { content: ""; display: block; width: 116px; height: 6px; margin-top: 12px; border-radius: 99px; background: repeating-linear-gradient(90deg, #ff5a7a 0 8px, transparent 8px 11px, #6d8bff 11px 19px, transparent 19px 22px), #e6efe9; box-shadow: 0 4px 12px rgba(214,120,255,.35); }
body.hv-daycycle .pcard:hover, body.hv-daycycle .m-acard:hover { box-shadow: 0 0 0 2px #257a4c, 0 18px 40px rgba(27,43,34,.12); }
body.hv-daycycle .m-cta .m-band { border-radius: 22px; background: radial-gradient(40% 90% at 84% 0%, rgba(214,120,255,.35), transparent 70%), linear-gradient(120deg, #123222, #1c5f3a 55%, #257a4c); }
body.hv-daycycle .m-cta .m-band::before { width: 200px; height: 8px; right: 40px; top: 26px; border-radius: 99px; background: repeating-linear-gradient(90deg, #ff5a7a 0 10px, rgba(255,255,255,.6) 10px 13px, #6d8bff 13px 23px, rgba(255,255,255,.6) 23px 26px); box-shadow: 0 0 14px 3px rgba(214,120,255,.5); opacity: .8; }
body.hv-daycycle .m-page-hero { background: radial-gradient(40% 90% at 84% 0%, rgba(214,120,255,.25), transparent 70%), linear-gradient(120deg, #123222, #257a4c); } body.hv-daycycle .m-page-hero .eyebrow { color: #bfe8c9; }
body.hv-daycycle footer.site { background: #123222; color: #d3e4d8; border: 0; } body.hv-daycycle footer.site nav a { color: #bfe8c9; }
body.hv-daycycle .m-collage .m-card { border-radius: 18px; }
@media (max-width: 420px) { .m-dytile .m-q8tx b { font-family: var(--m-body); letter-spacing: -.01em; } } /* the wide slab breaks long Spanish words in half-width tiles */

/* spectrum (URUQ): a green button with a full-spectrum LED strip on its top edge; on hover the red and blue diodes light up and a soft violet-pink grow-light wash pours down through the button */
body.bv-spectrum .btn { border-radius: 14px; padding: 15px 26px; }
body.bv-spectrum :is(.btn.accent, .pcard .btn, .m-btn-main) { background: #257a4c; color: #fff; box-shadow: 0 10px 22px rgba(37,122,76,.26); }
body.bv-spectrum :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: #1c5f3a; color: #fff; box-shadow: 0 14px 30px rgba(142,63,176,.3); }
body.bv-spectrum .btn::after { display: none; }
body.bv-spectrum .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(90deg, #ff5a7a 0 6px, transparent 6px 9px, #6d8bff 9px 15px, transparent 15px 18px) 50% 0 / calc(100% - 24px) 3px no-repeat, linear-gradient(180deg, rgba(214,120,255,.55), rgba(255,110,180,.18) 60%, transparent) 0 0 / 100% 0 no-repeat; opacity: .45; transition: background-size .5s var(--m-ease), opacity .25s; }
body.bv-spectrum .btn:is(:hover, :focus-visible)::before { background-size: calc(100% - 24px) 3px, 100% 100%; opacity: 1; animation: m-specf 1.2s ease-in-out infinite; }
body.bv-spectrum :is(.m-white, .m-btn-ghost, .btn.ghost)::before { background: repeating-linear-gradient(90deg, #ff5a7a 0 6px, transparent 6px 9px, #6d8bff 9px 15px, transparent 15px 18px) 50% 0 / calc(100% - 24px) 3px no-repeat, linear-gradient(180deg, rgba(176,77,214,.22), rgba(255,110,180,.08) 60%, transparent) 0 0 / 100% 0 no-repeat; }
body.bv-spectrum :is(.m-white, .m-btn-ghost, .btn.ghost):is(:hover, :focus-visible)::before { background-size: calc(100% - 24px) 3px, 100% 100%; }
body.bv-spectrum .btn .arr { display: inline-block; transition: transform .3s var(--m-ease); } body.bv-spectrum .btn:hover .arr { transform: translateX(4px); }
body.bv-spectrum .m-cta .btn.m-white:hover { color: #1c5f3a; }
@keyframes m-specf { 0%, 100% { filter: none; } 50% { filter: brightness(1.12) saturate(1.2); } }

/* ===== batch 13.11.2026: curlbar/flatpress (VODANA), pipette (VALJEAN LABS), lather (Sunsilk); shared layout for these heroes ===== */
:is(body.hv-curlbar, body.hv-pipette, body.hv-lather) .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); color: var(--m-ink); }
:is(body.hv-curlbar, body.hv-pipette, body.hv-lather) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:is(body.hv-curlbar, body.hv-pipette, body.hv-lather) .m-hero .m-copy > * { animation: m-rise .8s var(--m-ease) both; }
:is(body.hv-curlbar, body.hv-pipette, body.hv-lather) .m-hero .m-copy > :nth-child(3) { animation-delay: .08s; } :is(body.hv-curlbar, body.hv-pipette, body.hv-lather) .m-hero .m-copy > :nth-child(4) { animation-delay: .16s; } :is(body.hv-curlbar, body.hv-pipette, body.hv-lather) .m-hero .m-copy > :nth-child(n+5) { animation-delay: .24s; }
:is(body.hv-curlbar, body.hv-pipette, body.hv-lather) .m-hero h1 { color: var(--m-ink) !important; text-wrap: balance; max-width: 18ch; font-size: clamp(34px, 4vw, 58px) !important; line-height: 1.08 !important; }
:is(body.hv-curlbar, body.hv-pipette, body.hv-lather) .m-hero .bgcredit { display: none; }
:is(body.hv-curlbar, body.hv-pipette, body.hv-lather) .m-hero .sub { color: var(--m-body-ink); }
:is(body.hv-curlbar, body.hv-pipette, body.hv-lather) .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: var(--m-ink) !important; background: rgba(255,255,255,.7) !important; }
:is(body.hv-curlbar, body.hv-pipette, body.hv-lather) .m-hero .m-btn-ghost:hover { background: var(--m-ink) !important; color: #fff !important; }
:is(body.hv-curlbar, body.hv-pipette, body.hv-lather) .m-hero .m-chips span { background: #fff; color: var(--m-ink); border: 1.5px solid color-mix(in srgb, var(--m-ink) 14%, transparent); backdrop-filter: none; }
:is(.m-cb, .m-pp, .m-lh) { position: relative; width: min(100%, 600px); justify-self: center; container-type: inline-size; }
:is(.m-cb, .m-pp, .m-lh) a { -webkit-tap-highlight-color: transparent; }
:is(.m-cb, .m-pp, .m-lh) img { display: block; width: 100%; height: auto; border-radius: 0; }
:is(.m-cbcats, .m-ppcats, .m-lhcats) { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; padding: 10px clamp(18px, 4vw, 72px) clamp(26px, 4vh, 44px); }
:is(.m-cbtile, .m-pptile, .m-lhtile) { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; padding: 14px 14px 12px 12px; background: #fff; color: var(--m-ink) !important; overflow: hidden; animation: m-rise .7s calc(.8s + var(--i, 0) * .08s) var(--m-ease) backwards; transition: transform .4s var(--m-ease), border-color .3s, box-shadow .3s, background .3s; }
:is(.m-cbimg, .m-ppimg, .m-lhimg) { flex: none; display: block; overflow: hidden; width: 58px; height: 58px; padding: 4px; }
:is(.m-cbimg, .m-ppimg, .m-lhimg) img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; transition: transform .45s var(--m-ease); }
:is(.m-cbtile, .m-pptile, .m-lhtile):hover :is(.m-cbimg, .m-ppimg, .m-lhimg) img { transform: scale(1.08) rotate(-4deg); }
:is(.m-cbtile, .m-pptile, .m-lhtile):focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; }
:is(.m-cbtile, .m-pptile, .m-lhtile):is(:hover, :focus-visible) { transform: translateY(-4px); }
:is(.m-cbtile, .m-pptile, .m-lhtile) .m-q8tx b { font: 700 15px/1.2 var(--m-body); color: var(--m-ink); padding-right: 22px; }
:is(.m-cbtile, .m-pptile, .m-lhtile) em { position: absolute; right: 11px; top: 10px; font-style: normal; }
:is(.m-cbspecs, .m-ppspecs, .m-lhspecs) { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -6px 0 18px; }
:is(.m-cbspecs, .m-ppspecs, .m-lhspecs) > span { flex-basis: 100%; margin: 0 0 2px; font: 700 12px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; }
:is(.m-cbspecs, .m-ppspecs, .m-lhspecs) a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; background: #fff; color: var(--m-ink) !important; text-decoration: none; transition: background .25s, border-color .25s, transform .3s var(--m-ease), box-shadow .3s; animation: m-rise .6s calc(.45s + var(--i, 0) * .06s) var(--m-ease) backwards; }
:is(.m-cbspecs, .m-ppspecs, .m-lhspecs) a:is(:hover, :focus-visible) { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,24,40,.12); }
:is(.m-cbspecs, .m-ppspecs, .m-lhspecs) b { display: grid; place-items: center; min-width: 40px; height: 28px; padding: 0 10px; color: #fff; font: 700 13px/1 var(--m-body); white-space: nowrap; }
:is(.m-cbspecs, .m-ppspecs, .m-lhspecs) small { font: 600 12.5px/1 var(--m-body); white-space: nowrap; color: var(--m-body-ink); }
:is(body.hv-curlbar, body.hv-pipette, body.hv-lather) .m-acard .m-art { position: relative; background: #fff !important; border-bottom: 1px solid color-mix(in srgb, var(--m-ink) 7%, transparent); }
:is(body.hv-curlbar, body.hv-pipette, body.hv-lather) .m-acard .m-art img { position: absolute; left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); max-height: none; object-fit: contain; border-radius: 0; }
@media (max-width: 900px) {
  :is(body.hv-curlbar, body.hv-pipette, body.hv-lather) .m-hero { min-height: 0; }
  :is(body.hv-curlbar, body.hv-pipette, body.hv-lather) .m-hero .m-inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  :is(body.hv-curlbar, body.hv-pipette, body.hv-lather) .m-hero .m-copy { display: contents; }
  :is(body.hv-curlbar, body.hv-pipette, body.hv-lather) .m-hero .m-copy > * { order: 1; }
  :is(body.hv-curlbar, body.hv-pipette, body.hv-lather) .m-hero .m-copy > :is(.m-ctas, nav, .m-chips) { order: 3; }
  :is(.m-cb, .m-pp, .m-lh) { order: 2; width: min(100%, 520px); align-self: center; margin: 8px 0 4px; }
  :is(.m-cbcats, .m-ppcats, .m-lhcats) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-cbcats, .m-ppcats, .m-lhcats) > a:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  :is(.m-cbspecs, .m-ppspecs, .m-lhspecs) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-cbspecs, .m-ppspecs, .m-lhspecs) > span { grid-column: 1 / -1; }
  :is(.m-cbspecs, .m-ppspecs, .m-lhspecs) a { flex-direction: column; align-items: flex-start; gap: 5px; padding: 6px 10px 8px 6px; border-radius: 12px; }
  :is(.m-cbspecs, .m-ppspecs, .m-lhspecs) small { white-space: normal; line-height: 1.2; padding-left: 2px; }
}
@media (max-width: 420px) {
  :is(.m-cbtile, .m-pptile, .m-lhtile) { gap: 9px; padding: 10px; } :is(.m-cbimg, .m-ppimg, .m-lhimg) { width: 44px; height: 44px; }
  :is(.m-cbtile, .m-pptile, .m-lhtile) .m-q8tx b { font-size: 13px; padding-right: 0; } :is(.m-cbtile, .m-pptile, .m-lhtile) em { display: none; }
}

/* curlbar (VODANA): a K-beauty vanity; the mirror bulbs light one by one, the real GlamWave iron heats up (a ready ring fills, heat shimmer rises off the barrel), a straight lock of hair beside it turns into a glossy wave and back; barrel-size rings compare 1"-1.6"; the real mint flat iron and the glossy hair oil sit on the counter */
body.hv-curlbar .m-hero { background: radial-gradient(46% 58% at 76% 42%, #fff, transparent 70%), radial-gradient(30% 40% at 4% 96%, rgba(124,199,180,.18), transparent 70%), radial-gradient(34% 44% at 96% 4%, rgba(232,161,92,.14), transparent 70%), linear-gradient(120deg, #fbe7ee, #fff8fa 50%, #f8e2ea); }
body.hv-curlbar .m-hero h1 { letter-spacing: -.005em; }
body.hv-curlbar .m-hero .eyebrow { color: #8c3152; letter-spacing: .2em; }
.m-cb { aspect-ratio: 600 / 560; }
.m-cbmirror { position: absolute; left: 9%; right: 9%; top: 1%; height: 66%; border-radius: 999px 999px 18px 18px; background: radial-gradient(60% 50% at 34% 26%, rgba(255,255,255,.9), transparent 60%), linear-gradient(160deg, #fdf3f7, #f5d9e4 60%, #edc6d5); box-shadow: inset 0 0 0 max(6px, 1.6cqw) #fff, inset 0 0 0 max(8px, 2.2cqw) #e9bccd, 0 24px 40px rgba(94,36,64,.14); animation: m-cbin .9s .05s var(--m-ease) backwards; }
.m-cbmirror::after { content: ""; position: absolute; left: 18%; top: 16%; width: 7%; height: 42%; border-radius: 99px; background: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,0)); rotate: 24deg; }
.m-cbmirror i { position: absolute; width: max(12px, 4.4cqw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #f9ead6 60%, #ecd0ae); box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(94,36,64,.15); animation: m-cbbulb 5s calc(.6s + var(--i) * .12s) ease-in-out infinite; }
.m-cbcounter { position: absolute; left: 0; right: 0; top: 64%; bottom: 0; border-radius: 18px; background: linear-gradient(180deg, #fff 0 7%, #f7e0e8 7%, #f0d2dd); box-shadow: 0 26px 40px rgba(94,36,64,.12); animation: m-cbin .9s .05s var(--m-ease) backwards; }
.m-cblock { position: absolute; left: 13%; top: 11%; width: 14%; height: auto; z-index: 2; overflow: visible; animation: m-cbin .9s .3s var(--m-ease) backwards; }
.m-cblock .clip { fill: #e0628c; }
.m-cblock :is(.st, .cu) { fill: none; stroke: #6b3d2c; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.m-cblock .st { opacity: 0; animation: m-cbst 8s 1.2s ease-in-out infinite; }
.m-cblock .cu { stroke-dasharray: 100 100; stroke-dashoffset: 0; animation: m-cbcu 8s 1.2s ease-in-out infinite; }
.m-cblock .gl { fill: none; stroke: rgba(255,226,206,.85); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 10 90; stroke-dashoffset: 100; opacity: 0; animation: m-cbgl 8s 1.2s ease-in-out infinite; }
.m-cbheat { position: absolute; right: 0; top: 3%; z-index: 5; display: flex; align-items: center; gap: 1.4cqw; padding: 1.1cqw 2.4cqw 1.1cqw 1.1cqw; border-radius: 999px; background: #fff; box-shadow: 0 10px 24px rgba(94,36,64,.14); animation: m-cbin .9s .45s var(--m-ease) backwards; }
.m-cbheat svg { width: max(30px, 8.6cqw); height: auto; overflow: visible; }
.m-cbheat .tr { fill: none; stroke: #f6dbe5; stroke-width: 6; } .m-cbheat .ar { fill: none; stroke: #c25a80; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100 100; transform-box: fill-box; transform-origin: center; rotate: -90deg; animation: m-cbarc 8s 1.2s ease-in-out infinite; }
.m-cbheat .fl { fill: none; stroke: #e8a15c; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.m-cbheat > span { display: grid; gap: 3px; line-height: 1; }
.m-cbheat small { display: grid; font: 600 clamp(9px, 2cqw, 12px)/1 var(--m-body); letter-spacing: .08em; text-transform: uppercase; color: #8c3152; }
.m-cbheat small i { grid-area: 1 / 1; font-style: normal; white-space: nowrap; } .m-cbheat .h { opacity: 0; animation: m-cbh 8s 1.2s ease-in-out infinite; } .m-cbheat .r { animation: m-cbr 8s 1.2s ease-in-out infinite; }
.m-cbheat b { font: 400 clamp(13px, 3cqw, 18px)/1 var(--m-head); color: var(--m-ink); }
.m-cbsizes { position: absolute; left: 1%; top: 72%; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 1.6cqw; padding: 1.6cqw 2.2cqw 2cqw; border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: 0 10px 22px rgba(94,36,64,.1); animation: m-cbin .9s .6s var(--m-ease) backwards; }
.m-cbsizes small { flex-basis: 100%; font: 600 clamp(8px, 1.8cqw, 11px)/1 var(--m-body); letter-spacing: .12em; text-transform: uppercase; color: #8c3152; }
.m-cbsizes i { display: grid; place-items: center; width: calc(var(--s) * 9cqw); min-width: calc(var(--s) * 32px); aspect-ratio: 1; border-radius: 50%; border: 2px solid #c25a80; background: #fff; animation: m-cbsz 6s calc(1.2s + var(--i) * .35s) ease-in-out infinite; }
.m-cbsizes b { font: 700 clamp(7px, 1.7cqw, 10.5px)/1 var(--m-body); color: var(--m-ink); }
.m-cboil, .m-cbflat, .m-cbiron { position: absolute; display: block; transition: transform .45s var(--m-ease); }
.m-cboil { left: 47%; top: 52%; width: 8.5%; z-index: 4; filter: drop-shadow(0 12px 10px rgba(94,36,64,.22)); animation: m-cbin .9s .5s var(--m-ease) backwards; }
.m-cbflat { left: 58%; top: 57%; width: 40%; z-index: 2; filter: drop-shadow(0 14px 12px rgba(40,90,80,.22)); animation: m-cbin .9s .4s var(--m-ease) backwards; }
.m-cbiron { left: 23%; top: 6%; width: 61%; z-index: 3; filter: drop-shadow(0 22px 18px rgba(94,36,64,.26)); animation: m-cbin 1s .15s var(--m-ease) backwards; }
.m-cboil:hover, .m-cbflat:hover, .m-cbiron:hover { transform: translateY(-6px); }
.m-cbshim { position: absolute; left: 27%; top: 0; width: 22%; height: 18%; z-index: 4; pointer-events: none; }
.m-cbshim i { position: absolute; bottom: 0; width: 14%; height: 100%; opacity: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 60'%3E%3Cpath d='M6 60C0 50 12 40 6 30S0 10 6 0' fill='none' stroke='%23e8a15c' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 50% 50% / 100% 100% no-repeat; animation: m-cbshim 2.8s 1.6s ease-out infinite; }
.m-cbshim i:nth-child(1) { left: 12%; } .m-cbshim i:nth-child(2) { left: 44%; animation-delay: 2.5s; } .m-cbshim i:nth-child(3) { left: 76%; animation-delay: 2.1s; }
.m-cbspark { position: absolute; left: 10%; top: 8%; width: 22%; height: 44%; z-index: 4; pointer-events: none; }
.m-cbspark i { position: absolute; width: max(10px, 3.4cqw); aspect-ratio: 1; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px rgba(224,98,140,.6)); opacity: 0; animation: m-cbspark 8s 1.2s ease-in-out infinite; }
.m-cbspark i:nth-child(1) { left: 0; top: 30%; } .m-cbspark i:nth-child(2) { left: 70%; top: 52%; animation-delay: 1.5s; } .m-cbspark i:nth-child(3) { left: 14%; top: 78%; animation-delay: 1.8s; }
@keyframes m-cbin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-cbbulb { 0%, 100% { background: radial-gradient(circle at 40% 35%, #fff, #f9ead6 60%, #ecd0ae); box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(94,36,64,.15); } 30%, 60% { background: radial-gradient(circle at 40% 35%, #fff, #fff6e2 60%, #ffdcae); box-shadow: 0 0 0 2px #fff, 0 0 16px 5px rgba(255,214,150,.8); } }
@keyframes m-cbst { 0%, 16% { opacity: 1; } 28%, 84% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes m-cbcu { 0%, 16% { stroke-dashoffset: 100; } 42%, 84% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 100; } }
@keyframes m-cbgl { 0%, 44% { opacity: 0; stroke-dashoffset: 100; } 48% { opacity: 1; } 76% { opacity: 1; stroke-dashoffset: 0; } 80%, 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes m-cbarc { 0% { stroke-dasharray: 0 100; } 34%, 90% { stroke-dasharray: 100 100; } 100% { stroke-dasharray: 0 100; } }
@keyframes m-cbh { 0%, 30% { opacity: 1; } 36%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes m-cbr { 0%, 30% { opacity: 0; } 36%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes m-cbsz { 0%, 18%, 100% { background: #fff; scale: 1; } 8% { background: #fbdde8; scale: 1.1; } }
@keyframes m-cbshim { 0% { opacity: 0; translate: 0 30%; } 30% { opacity: .9; } 100% { opacity: 0; translate: 0 -45%; } }
@keyframes m-cbspark { 0%, 46%, 70%, 100% { opacity: 0; scale: .3; } 54% { opacity: 1; scale: 1.1; rotate: 45deg; } 62% { opacity: .9; scale: .9; } }
.m-cbspecs > span { color: #8c3152; }
.m-cbspecs a { border-radius: 999px; border: 1.5px solid #f0d0dc; }
.m-cbspecs b { border-radius: 999px; background: #a83f64; } .m-cbspecs a:nth-of-type(3n+2) b { background: #2f7d6c; } .m-cbspecs a:nth-of-type(3n) b { background: #3a2230; }
.m-cbspecs a:is(:hover, :focus-visible) { border-color: #a83f64; }
.m-cbtile { border-radius: 18px; border: 1.5px solid #f0d0dc; box-shadow: 0 10px 22px rgba(94,36,64,.06); }
.m-cbtile em { width: 22px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M2 6C5 1 8 11 11 6S17 1 20 6' fill='none' stroke='%23c25a80' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; transition: translate .4s var(--m-ease); }
.m-cbtile:is(:hover, :focus-visible) em { translate: 3px 0; }
.m-cbimg { border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff, #fbe5ed); }
.m-cbtile .m-q8tx small { color: #8c3152; }
.m-cbtile:is(:hover, :focus-visible) { border-color: #a83f64; box-shadow: 0 16px 30px rgba(94,36,64,.12); }
body.hv-curlbar main section > .wrap > h2::after { content: ""; display: block; width: 120px; height: 14px; margin-top: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M2 7C10 -1 18 15 26 7S42 -1 50 7 66 15 74 7 90 -1 98 7 114 15 118 7' fill='none' stroke='%23a83f64' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 120px 14px; }
body.hv-curlbar .pcard:hover, body.hv-curlbar .m-acard:hover { box-shadow: 0 0 0 2px #a83f64, 0 18px 40px rgba(94,36,64,.12); }
body.hv-curlbar .m-cta .m-band { border-radius: 26px; background: radial-gradient(40% 90% at 86% 10%, rgba(255,214,150,.3), transparent 70%), linear-gradient(120deg, #5e2440, #8c3152 55%, #a83f64); }
body.hv-curlbar .m-cta .m-band::before { width: 180px; height: 40px; right: 40px; top: 30px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 40'%3E%3Cpath d='M4 20C16 4 28 36 40 20S64 4 76 20 100 36 112 20 136 4 148 20 172 36 176 20' fill='none' stroke='white' stroke-opacity='.4' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; }
body.hv-curlbar .m-page-hero { background: radial-gradient(40% 90% at 86% 10%, rgba(255,214,150,.22), transparent 70%), linear-gradient(120deg, #5e2440, #a83f64); } body.hv-curlbar .m-page-hero .eyebrow { color: #ffd6e3; }
body.hv-curlbar footer.site { background: #3a2230; color: #f0dde5; border: 0; } body.hv-curlbar footer.site nav a { color: #f7b9cf; }
body.hv-curlbar .m-collage .m-card { border-radius: 20px; }
body.hv-curlbar :is(h1, h2) { letter-spacing: -.005em; }

/* flatpress (VODANA): a glossy rose button that works like a flat iron; on hover two warm ceramic plates close in from the top and bottom edges and glow with heat, the button gives a small clamp squeeze */
body.bv-flatpress .btn { border-radius: 14px; padding: 15px 26px; }
body.bv-flatpress :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #b84a71, #a83f64 60%, #9a3a5c); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 22px rgba(168,63,100,.28); }
body.bv-flatpress :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #9e3c60, #8c3152 60%, #7c2b49); color: #fff; }
body.bv-flatpress .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, #ffe1c2, #f2a9c0) 0 0 / 100% 0 no-repeat, linear-gradient(0deg, #ffe1c2, #f2a9c0) 0 100% / 100% 0 no-repeat; transition: background-size .35s var(--m-ease); }
body.bv-flatpress :is(.m-white, .m-btn-ghost, .btn.ghost)::before { background: linear-gradient(180deg, #f7c9a6, #e590ae) 0 0 / 100% 0 no-repeat, linear-gradient(0deg, #f7c9a6, #e590ae) 0 100% / 100% 0 no-repeat; }
body.bv-flatpress .btn:is(:hover, :focus-visible)::before { background-size: 100% 5px, 100% 5px; animation: m-fpheat 1.4s .35s ease-in-out infinite; }
body.bv-flatpress .btn:is(:hover, :focus-visible) { animation: m-fppress .45s var(--m-ease); }
body.bv-flatpress .btn .arr { display: inline-block; transition: transform .3s var(--m-ease); } body.bv-flatpress .btn:hover .arr { transform: translateX(4px); }
body.bv-flatpress .m-cta .btn.m-white:hover { color: #8c3152; }
@keyframes m-fpheat { 0%, 100% { filter: none; } 50% { filter: brightness(1.12) saturate(1.3); } }
@keyframes m-fppress { 0% { scale: 1; } 40% { scale: 1.015 .93; } 100% { scale: 1; } }

/* pipette (VALJEAN LABS): a skincare lab bench; a glass dropper's rubber bulb squeezes, the serum level in the pipette drops, a bead forms at the tip, falls into a glass dish and ripples out; a routine card steps Tone - Serum - Oil; ingredient tags float on the counter; the real three-serum set, toner and facial oil stand on the bench */
body.hv-pipette .m-hero { background: radial-gradient(46% 58% at 76% 42%, #fff, transparent 70%), radial-gradient(30% 40% at 4% 96%, rgba(226,160,168,.16), transparent 70%), radial-gradient(34% 44% at 96% 4%, rgba(143,193,181,.24), transparent 70%), linear-gradient(120deg, #e6f1ee, #f6faf8 50%, #e4efeb); }
body.hv-pipette .m-hero h1 { letter-spacing: -.015em; }
body.hv-pipette .m-hero .eyebrow { color: #2f6058; letter-spacing: .16em; }
.m-pp { aspect-ratio: 600 / 560; }
.m-ppwall { position: absolute; left: 0; right: 0; top: 0; height: 70%; border-radius: 24px 24px 0 0; background: linear-gradient(rgba(61,110,102,.07) 1.5px, transparent 1.5px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(61,110,102,.07) 1.5px, transparent 1.5px) 0 0 / 40px 40px, linear-gradient(180deg, #fbfdfc, #eef6f3); box-shadow: inset 0 0 0 1px rgba(31,53,50,.05); animation: m-ppin .9s .05s var(--m-ease) backwards; }
.m-ppbench { position: absolute; left: 0; right: 0; top: 68%; bottom: 0; border-radius: 0 0 24px 24px; background: radial-gradient(70% 60% at 30% 20%, rgba(255,255,255,.8), transparent 70%), linear-gradient(180deg, #fff 0 6%, #dfeae6 6%, #d2e2dd); box-shadow: 0 26px 40px rgba(31,53,50,.12); animation: m-ppin .9s .05s var(--m-ease) backwards; }
.m-ppset, .m-pprep { position: absolute; display: block; transition: transform .45s var(--m-ease); }
.m-ppset { left: 36%; top: 20%; width: 52%; z-index: 3; filter: drop-shadow(0 18px 16px rgba(31,53,50,.2)); animation: m-ppin 1s .15s var(--m-ease) backwards; }
.m-pprep { left: 80%; top: 41%; width: 16%; z-index: 4; filter: drop-shadow(0 14px 12px rgba(31,53,50,.24)); animation: m-ppin .9s .5s var(--m-ease) backwards; }
.m-ppset:hover, .m-pprep:hover { transform: translateY(-6px); }
.m-pppip { position: absolute; left: 12%; top: 2%; width: 12.5%; height: auto; z-index: 5; overflow: visible; filter: drop-shadow(0 10px 10px rgba(31,53,50,.16)); animation: m-ppin .9s .3s var(--m-ease) backwards; }
.m-pppip .bulb path:first-child { fill: #3d6e66; } .m-pppip .bulb .hl { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 3; stroke-linecap: round; }
.m-pppip .bulb { transform-box: fill-box; transform-origin: 50% 100%; animation: m-ppsq 4.5s 1.2s ease-in-out infinite; }
.m-pppip .col { fill: #c9d8d4; stroke: #a9bfba; stroke-width: 1; }
.m-pppip .tube { fill: rgba(255,255,255,.35); stroke: #9cb7b1; stroke-width: 1.6; }
.m-pppip .liq { fill: #a9dccf; transform-box: fill-box; transform-origin: 50% 100%; animation: m-ppliq 4.5s 1.2s ease-in-out infinite; }
.m-pppip .mk { fill: none; stroke: #7f9e98; stroke-width: 1.2; }
.m-ppdrop { position: absolute; left: 18.25%; top: 50%; z-index: 5; width: 3.2%; aspect-ratio: 1; margin-left: -1.6%; border-radius: 0 50% 50% 50%; rotate: 45deg; background: radial-gradient(circle at 60% 60%, #e5f6f1, #8fd0c0 60%, #5fae9c); box-shadow: 0 2px 4px rgba(31,53,50,.2); opacity: 0; animation: m-ppdrop 4.5s 1.2s ease-in infinite; }
.m-ppdish { position: absolute; left: 0; top: 62%; width: 37%; height: auto; z-index: 4; overflow: visible; animation: m-ppin .9s .4s var(--m-ease) backwards; }
.m-ppdish .shd { fill: rgba(31,53,50,.1); } .m-ppdish .wall { fill: rgba(255,255,255,.55); stroke: #a9c4be; stroke-width: 1.6; }
.m-ppdish .pool { fill: #bfe6dc; } .m-ppdish .rim { fill: rgba(255,255,255,.22); stroke: #a9c4be; stroke-width: 2; }
.m-ppdish .rip ellipse { fill: none; stroke: #5fae9c; stroke-width: 1.8; transform-box: fill-box; transform-origin: center; opacity: 0; animation: m-pprip 4.5s 1.2s ease-out infinite; }
.m-ppdish .rip ellipse + ellipse { animation-delay: 1.5s; }
.m-pprt { position: absolute; right: 2%; top: 3%; z-index: 5; display: grid; gap: 1.2cqw; padding: 1.8cqw 2.2cqw; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(31,53,50,.12); animation: m-ppin .9s .45s var(--m-ease) backwards; }
.m-pprt small { font: 700 clamp(8px, 1.8cqw, 11px)/1 var(--m-body); letter-spacing: .12em; text-transform: uppercase; color: #2f6058; }
.m-pprtl { display: flex; gap: 1.4cqw; }
.m-pprtl i { display: flex; align-items: center; gap: .8cqw; padding: .7cqw 1.4cqw .7cqw .7cqw; border-radius: 999px; background: #eef5f3; font: 600 clamp(9px, 2.1cqw, 13px)/1 var(--m-head); font-style: normal; color: #1f3532; white-space: nowrap; animation: m-ppstep 6s calc(1s + var(--i) * 2s) ease-in-out infinite; }
.m-pprtl b { display: grid; place-items: center; width: max(15px, 3.4cqw); aspect-ratio: 1; border-radius: 50%; background: #fff; color: #2f6058; font: 700 clamp(8px, 1.8cqw, 11px)/1 var(--m-body); }
.m-ppings { position: absolute; left: 1%; right: 22%; top: 85%; z-index: 5; display: flex; flex-wrap: wrap; gap: 1.2cqw; }
.m-ppings i { display: inline-flex; align-items: center; gap: .9cqw; padding: .9cqw 1.6cqw .9cqw 1cqw; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 6px 14px rgba(31,53,50,.1); font: 600 clamp(8.5px, 2cqw, 12.5px)/1 var(--m-body); font-style: normal; color: #1f3532; white-space: nowrap; animation: m-ppin .8s calc(.7s + var(--i) * .12s) var(--m-ease) backwards, m-ppfloat 5s calc(1.6s + var(--i) * .8s) ease-in-out infinite; }
.m-ppings i::before { content: ""; width: max(9px, 2.2cqw); aspect-ratio: 1.15; background: #5fae9c; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.m-ppings i:nth-child(2)::before { background: #e8b54e; } .m-ppings i:nth-child(3)::before { background: #b7a6d6; }
@keyframes m-ppin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-ppsq { 0%, 10%, 34%, 100% { scale: 1 1; } 18%, 26% { scale: 1.12 .8; } }
@keyframes m-ppliq { 0%, 14% { scale: 1 1; } 30%, 80% { scale: 1 .78; } 96%, 100% { scale: 1 1; } }
@keyframes m-ppdrop { 0%, 14% { opacity: 0; scale: .2; translate: 0 0; } 22% { opacity: 1; scale: 1; translate: 0 0; } 30% { opacity: 1; scale: 1; translate: 0 0; } 40% { opacity: 1; scale: .9; translate: 0 14cqw; } 41%, 100% { opacity: 0; scale: .5; translate: 0 14cqw; } }
@keyframes m-pprip { 0%, 40% { opacity: 0; scale: .15; } 44% { opacity: .9; } 70%, 100% { opacity: 0; scale: 1.25; } }
@keyframes m-ppstep { 0%, 30% { background: #3d6e66; color: #fff; } 36%, 100% { background: #eef5f3; color: #1f3532; } }
@keyframes m-ppfloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.m-ppspecs > span { color: #2f6058; }
.m-ppspecs a { border-radius: 10px; border: 1.5px solid #d4e5e0; }
.m-ppspecs b { border-radius: 7px; background: #3d6e66; } .m-ppspecs a:nth-of-type(3n+2) b { background: #a0545e; } .m-ppspecs a:nth-of-type(3n) b { background: #1f3532; }
.m-ppspecs a:is(:hover, :focus-visible) { border-color: #3d6e66; }
.m-pptile { border-radius: 16px; border: 1.5px solid #d4e5e0; box-shadow: 0 10px 22px rgba(31,53,50,.06); }
.m-pptile em { width: 12px; height: 16px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(circle at 40% 62%, #e5f6f1, #8fd0c0 60%, #5fae9c); clip-path: polygon(50% 0, 100% 62%, 100% 100%, 0 100%, 0 62%); border-radius: 0 0 50% 50% / 0 0 60% 60%; transition: translate .4s var(--m-ease); }
.m-pptile:is(:hover, :focus-visible) em { translate: 0 4px; }
.m-ppimg { border-radius: 12px; background: radial-gradient(circle at 50% 40%, #fff, #e6f1ee); }
.m-pptile .m-q8tx b { font-family: var(--m-head); font-size: 16.5px; font-weight: 600; } .m-pptile .m-q8tx small { color: #2f6058; }
.m-pptile:is(:hover, :focus-visible) { border-color: #3d6e66; box-shadow: 0 16px 30px rgba(31,53,50,.12); }
body.hv-pipette main section > .wrap > h2::after { content: ""; display: block; width: 110px; height: 10px; margin-top: 12px; background: radial-gradient(circle at 5px 5px, #5fae9c 0 4px, transparent 4.5px) 0 0 / 20px 10px repeat-x; -webkit-mask: linear-gradient(90deg, #000 60%, transparent); mask: linear-gradient(90deg, #000 60%, transparent); }
body.hv-pipette .pcard:hover, body.hv-pipette .m-acard:hover { box-shadow: 0 0 0 2px #3d6e66, 0 18px 40px rgba(31,53,50,.12); }
body.hv-pipette .m-cta .m-band { border-radius: 24px; background: linear-gradient(rgba(255,255,255,.05) 1.5px, transparent 1.5px) 0 0 / 34px 34px, linear-gradient(90deg, rgba(255,255,255,.05) 1.5px, transparent 1.5px) 0 0 / 34px 34px, linear-gradient(120deg, #1d3f3a, #2f6058 55%, #3d6e66); }
body.hv-pipette .m-cta .m-band::before { width: 46px; height: 60px; right: 70px; top: 28px; border-radius: 0 0 50% 50% / 0 0 60% 60%; clip-path: polygon(50% 0, 100% 62%, 100% 100%, 0 100%, 0 62%); background: rgba(191,230,220,.35); }
body.hv-pipette .m-page-hero { background: linear-gradient(rgba(255,255,255,.05) 1.5px, transparent 1.5px) 0 0 / 34px 34px, linear-gradient(90deg, rgba(255,255,255,.05) 1.5px, transparent 1.5px) 0 0 / 34px 34px, linear-gradient(120deg, #1d3f3a, #3d6e66); } body.hv-pipette .m-page-hero .eyebrow { color: #bfe6dc; }
body.hv-pipette footer.site { background: #1f3532; color: #d6e6e2; border: 0; } body.hv-pipette footer.site nav a { color: #a9dccf; }
body.hv-pipette .m-collage .m-card { border-radius: 16px; }

/* serum (VALJEAN LABS): a teal apothecary button; on hover a serum bead drips in from the top edge and the button fills from the bottom with a darker liquid whose surface wobbles */
body.bv-serum .btn { border-radius: 12px; padding: 15px 26px; overflow: hidden; }
body.bv-serum :is(.btn.accent, .pcard .btn, .m-btn-main) { background: #3d6e66; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 22px rgba(61,110,102,.26); }
body.bv-serum :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: #3d6e66; color: #fff; }
body.bv-serum .btn::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5Q10 0 20 5T40 5T60 5T80 5V10H0Z' fill='%231d3f3a'/%3E%3C/svg%3E") 0 0 / 50% 8px repeat-x, linear-gradient(#1d3f3a, #1d3f3a) 0 7px / 100% 100% no-repeat; transition: height .5s var(--m-ease); }
body.bv-serum :is(.m-white, .m-btn-ghost, .btn.ghost)::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5Q10 0 20 5T40 5T60 5T80 5V10H0Z' fill='%23bfe6dc'/%3E%3C/svg%3E") 0 0 / 50% 8px repeat-x, linear-gradient(#bfe6dc, #bfe6dc) 0 7px / 100% 100% no-repeat; }
body.bv-serum .btn:is(:hover, :focus-visible)::before { height: calc(100% + 8px); animation: m-srwob 1.6s linear infinite; }
body.bv-serum .btn::after { inset: auto; left: calc(50% - 5px); top: -14px; width: 10px; height: 13px; border-radius: 0 0 50% 50% / 0 0 60% 60%; clip-path: polygon(50% 0, 100% 62%, 100% 100%, 0 100%, 0 62%); background: #bfe6dc; transform: none; transition: none; z-index: 1; }
body.bv-serum .btn:hover::after, body.bv-serum .btn:focus-visible::after { transform: none; animation: m-srdrop .6s ease-in; }
body.bv-serum :is(.m-white, .m-btn-ghost, .btn.ghost)::after { background: #5fae9c; }
body.bv-serum .m-hero .m-btn-ghost:hover, body.bv-serum .btn.ghost:hover { color: #1f3532 !important; background: rgba(255,255,255,.7) !important; }
body.bv-serum .btn .arr { display: inline-block; transition: transform .3s var(--m-ease); } body.bv-serum .btn:hover .arr { transform: translateX(4px); }
body.bv-serum .m-cta .btn.m-white:hover { color: #1f3532; background: #fff; }
@keyframes m-srwob { to { background-position: 50% 0, 0 7px; } }
@keyframes m-srdrop { 0% { transform: translateY(0); } 100% { transform: translateY(40px); opacity: .2; } }

/* lather (Sunsilk): a sunny shower shelf; a big sun turns slowly behind the real Sunsilk bottles lined up on a tiled ledge, foam puffs at their feet and iridescent bubbles float up past the bottles, droplets slide down the tiles; a hair-type card steps Dry - Frizzy - Wavy - Fine */
body.hv-lather .m-hero { background: radial-gradient(46% 58% at 76% 42%, #fff6dc, transparent 70%), radial-gradient(30% 40% at 4% 96%, rgba(224,69,123,.12), transparent 70%), radial-gradient(34% 44% at 96% 4%, rgba(43,165,181,.12), transparent 70%), linear-gradient(120deg, #fdeec9, #fffaf0 50%, #fbecc6); }
body.hv-lather .m-hero h1 { letter-spacing: .005em; line-height: 1.12 !important; }
body.hv-lather .m-hero .eyebrow { color: #6e4a00; letter-spacing: .16em; }
.m-lh { aspect-ratio: 600 / 560; }
.m-lhwall { position: absolute; left: 0; right: 0; top: 0; height: 72%; border-radius: 26px 26px 0 0; background: linear-gradient(#fff 3px, transparent 3px) 0 0 / 15% 16.66%, linear-gradient(90deg, #fff 3px, transparent 3px) 0 0 / 15% 16.66%, linear-gradient(180deg, #fdf3dc, #f9e6bd); box-shadow: inset 0 0 0 1px rgba(46,36,22,.05); animation: m-lhin .9s .05s var(--m-ease) backwards; }
.m-lhsun { position: absolute; left: 17%; top: -4%; width: 66%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffd65a 0 27%, #ffe28a 28% 30%, transparent 31%), repeating-conic-gradient(from 0deg, rgba(255,196,48,.42) 0 7deg, transparent 7deg 18deg); -webkit-mask: radial-gradient(circle, #000 40%, transparent 70%); mask: radial-gradient(circle, #000 40%, transparent 70%); animation: m-lhin 1s .1s var(--m-ease) backwards, m-lhspin 50s linear infinite; }
.m-lhledge { position: absolute; left: 0; right: 0; top: 70%; bottom: 0; border-radius: 0 0 26px 26px; background: linear-gradient(180deg, #fff 0 7%, #efd29a 7% 11%, #fbecc9 11%, #f6deb0); box-shadow: 0 26px 40px rgba(90,58,0,.12); animation: m-lhin .9s .05s var(--m-ease) backwards; }
.m-lhthick, .m-lhsoft, .m-lhblack, .m-lhmist { position: absolute; bottom: 28%; display: block; transition: transform .45s var(--m-ease); }
.m-lhthick { left: 13%; width: 20%; z-index: 3; filter: drop-shadow(0 14px 12px rgba(90,58,0,.2)); animation: m-lhin .9s .3s var(--m-ease) backwards; }
.m-lhsoft { left: 37%; width: 22%; z-index: 4; filter: drop-shadow(0 18px 14px rgba(90,58,0,.25)); animation: m-lhin 1s .15s var(--m-ease) backwards; }
.m-lhblack { left: 62%; width: 13%; z-index: 3; filter: drop-shadow(0 14px 12px rgba(46,36,22,.25)); animation: m-lhin .9s .4s var(--m-ease) backwards; }
.m-lhmist { left: 79%; width: 9%; z-index: 3; filter: drop-shadow(0 12px 10px rgba(20,90,110,.2)); animation: m-lhin .9s .5s var(--m-ease) backwards; }
.m-lhthick:hover, .m-lhsoft:hover, .m-lhblack:hover, .m-lhmist:hover { transform: translateY(-6px); }
.m-lhfoam { position: absolute; left: 9%; right: 9%; bottom: 26%; height: 6%; z-index: 5; pointer-events: none; }
.m-lhfoam i { position: absolute; bottom: 0; left: calc(var(--i) * 7.4%); width: 8.5%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #f6f8fc 60%, #e2e9f3); box-shadow: inset -2px -3px 6px rgba(140,160,190,.25); transform-origin: 50% 100%; animation: m-lhin .8s calc(.6s + var(--i) * .05s) var(--m-ease) backwards, m-lhpuff 3.2s calc(1.4s + var(--i) * .27s) ease-in-out infinite; }
.m-lhfoam i:nth-child(even) { width: 6.5%; bottom: 14%; } .m-lhfoam i:nth-child(3n) { width: 10%; bottom: -12%; }
.m-lhbub { position: absolute; left: 0; right: 0; top: 0; bottom: 27%; z-index: 6; pointer-events: none; overflow: hidden; border-radius: 26px 26px 0 0; }
.m-lhbub i { position: absolute; left: var(--x); bottom: 0; width: var(--s); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95) 0 12%, transparent 17%), radial-gradient(circle, rgba(255,255,255,.08) 54%, rgba(255,150,200,.45) 68%, rgba(110,200,240,.5) 84%, rgba(255,255,255,.85) 100%); opacity: .85; animation: m-lhup var(--t) var(--d) ease-in infinite; }
.m-lhdrips { position: absolute; left: 0; right: 0; top: 0; height: 70%; z-index: 1; pointer-events: none; }
.m-lhdrips i { position: absolute; top: 6%; width: max(6px, 1.5cqw); aspect-ratio: .75; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 40% 35%, #fff, rgba(150,210,235,.8)); opacity: 0; animation: m-lhdrip 7s 2s ease-in infinite; }
.m-lhdrips i:nth-child(1) { left: 5%; } .m-lhdrips i:nth-child(2) { left: 88%; animation-delay: 4.3s; } .m-lhdrips i:nth-child(3) { left: 94%; top: 30%; animation-delay: 5.6s; }
.m-lhtype { position: absolute; left: 3%; right: 3%; top: 79%; z-index: 7; display: grid; justify-items: center; gap: 1.4cqw; animation: m-lhin .9s .7s var(--m-ease) backwards; }
.m-lhtype small { font: 700 clamp(8.5px, 1.9cqw, 11.5px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #6e4a00; }
.m-lhtype > span { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2cqw; padding: 1cqw; border-radius: 999px; background: #fff; box-shadow: 0 10px 22px rgba(90,58,0,.12); }
.m-lhtype i { padding: 1.2cqw 2.4cqw; border-radius: 999px; font: 600 clamp(10px, 2.4cqw, 14px)/1 var(--m-body); font-style: normal; color: #2e2416; white-space: nowrap; animation: m-lhstep 8s calc(1s + var(--i) * 2s) ease-in-out infinite; }
@keyframes m-lhin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-lhspin { to { rotate: 360deg; } }
@keyframes m-lhpuff { 0%, 100% { scale: 1; } 50% { scale: 1.12 1.18; } }
@keyframes m-lhup { 0% { opacity: 0; translate: 0 0; scale: .4; } 10% { opacity: .95; scale: 1; } 50% { translate: 2.4cqw -30cqw; } 85% { opacity: .9; } 100% { opacity: 0; translate: -1.2cqw -62cqw; scale: 1.1; } }
@keyframes m-lhdrip { 0% { opacity: 0; translate: 0 0; } 8% { opacity: .9; } 70% { opacity: .8; translate: 0 26cqw; } 85%, 100% { opacity: 0; translate: 0 32cqw; } }
@keyframes m-lhstep { 0%, 22% { background: #f2b02a; } 28%, 100% { background: transparent; } }
.m-lhspecs > span { color: #6e4a00; }
.m-lhspecs a { border-radius: 999px; border: 1.5px solid #f1dcae; }
.m-lhspecs b { border-radius: 999px; background: #f2b02a; color: #2e2416; } .m-lhspecs a:nth-of-type(3n+2) b { background: #c2185b; color: #fff; } .m-lhspecs a:nth-of-type(3n) b { background: #2e2416; color: #fff; }
.m-lhspecs a:is(:hover, :focus-visible) { border-color: #e8a317; }
.m-lhtile { border-radius: 22px; border: 1.5px solid #f1dcae; box-shadow: 0 10px 22px rgba(90,58,0,.06); }
.m-lhtile em { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff 0 18%, transparent 24%), radial-gradient(circle, rgba(255,255,255,.2) 50%, rgba(255,150,200,.6) 70%, rgba(110,200,240,.7) 88%); box-shadow: 0 0 0 1px rgba(110,200,240,.35), 9px -6px 0 -4px rgba(255,180,210,.8); transition: translate .45s var(--m-ease); }
.m-lhtile:is(:hover, :focus-visible) em { translate: 0 -5px; }
.m-lhimg { border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff, #fdf0d2); }
.m-lhtile .m-q8tx small { color: #8a5d00; }
.m-lhtile:is(:hover, :focus-visible) { border-color: #e8a317; box-shadow: 0 16px 30px rgba(90,58,0,.12); }
body.hv-lather :is(h3, h4, .m-q8tx b, .m-toc h2, aside h2) { font-family: var(--m-body) !important; font-weight: 700 !important; letter-spacing: 0; } /* the brush display face is for big headings only */
body.hv-lather main section > .wrap > h2::after { content: ""; display: block; width: 110px; height: 14px; margin-top: 10px; background: radial-gradient(circle at 7px 7px, #f2b02a 0 6px, transparent 6.5px) 0 0 / 22px 14px repeat-x, radial-gradient(circle at 18px 10px, #e0457b 0 3px, transparent 3.5px) 0 0 / 22px 14px repeat-x; -webkit-mask: linear-gradient(90deg, #000 55%, transparent); mask: linear-gradient(90deg, #000 55%, transparent); }
body.hv-lather .pcard:hover, body.hv-lather .m-acard:hover { box-shadow: 0 0 0 2px #e8a317, 0 18px 40px rgba(90,58,0,.12); }
body.hv-lather .m-cta .m-band { border-radius: 28px; background: radial-gradient(40% 90% at 86% 0%, rgba(255,214,90,.35), transparent 70%), linear-gradient(120deg, #4a3000, #7a5200 55%, #9a6a00); }
body.hv-lather .m-cta .m-band::before { width: 150px; height: 150px; right: 30px; top: -40px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,90,.5) 0 26%, transparent 27%), repeating-conic-gradient(rgba(255,214,90,.25) 0 8deg, transparent 8deg 20deg); -webkit-mask: radial-gradient(circle, #000 40%, transparent 70%); mask: radial-gradient(circle, #000 40%, transparent 70%); }
body.hv-lather .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(255,214,90,.3), transparent 70%), linear-gradient(120deg, #4a3000, #8a5d00); } body.hv-lather .m-page-hero .eyebrow { color: #ffd65a; }
body.hv-lather footer.site { background: #2e2416; color: #efe3cc; border: 0; } body.hv-lather footer.site nav a { color: #ffd65a; }
body.hv-lather .m-collage .m-card { border-radius: 22px; }

/* suds (Sunsilk): a sunny golden pill with dark text; on hover soap bubbles stream up through the button and the arrow floats up like a bubble */
body.bv-suds .btn { border-radius: 999px; padding: 15px 28px; }
body.bv-suds :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #ffcb45, #f2b02a 60%, #e8a317); color: #2e2416; box-shadow: inset 0 -3px 0 rgba(138,93,0,.22), 0 10px 22px rgba(232,163,23,.35); }
body.bv-suds :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #ffd55e, #f5b838 60%, #eaa81e); color: #2e2416; }
body.bv-suds .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255,255,255,.95) 0 2.5px, rgba(255,255,255,.45) 3px 4.5px, transparent 5px) 10px 60px / 36px 34px repeat-x, radial-gradient(circle, rgba(255,255,255,.9) 0 1.8px, rgba(255,255,255,.4) 2.2px 3px, transparent 3.4px) 26px 76px / 30px 26px repeat-x; transition: opacity .25s; }
body.bv-suds :is(.m-white, .m-btn-ghost, .btn.ghost)::before { background: radial-gradient(circle, rgba(232,163,23,.7) 0 2.5px, rgba(232,163,23,.3) 3px 4.5px, transparent 5px) 10px 60px / 36px 34px repeat-x, radial-gradient(circle, rgba(224,69,123,.55) 0 1.8px, rgba(224,69,123,.25) 2.2px 3px, transparent 3.4px) 26px 76px / 30px 26px repeat-x; }
body.bv-suds .btn:is(:hover, :focus-visible)::before { opacity: 1; animation: m-sdup 1.4s linear infinite; }
body.bv-suds .btn .arr { display: inline-block; transition: transform .35s var(--m-ease); } body.bv-suds .btn:hover .arr { transform: translate(4px, -3px); }
body.bv-suds .m-cta .btn.m-white:hover { color: #6e4a00; }
@keyframes m-sdup { from { background-position: 10px 60px, 26px 76px; } to { background-position: 10px -20px, 26px -14px; } }

/* ===== batch 13.11.2026 (2): dirtpark/treadmark (Sopbost); shared layout for these heroes ===== */
:is(body.hv-dirtpark, body.hv-workday, body.hv-aura) .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); color: var(--m-ink); }
:is(body.hv-dirtpark, body.hv-workday, body.hv-aura) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:is(body.hv-dirtpark, body.hv-workday, body.hv-aura) .m-hero .m-copy > * { animation: m-rise .8s var(--m-ease) both; }
:is(body.hv-dirtpark, body.hv-workday, body.hv-aura) .m-hero .m-copy > :nth-child(3) { animation-delay: .08s; } :is(body.hv-dirtpark, body.hv-workday, body.hv-aura) .m-hero .m-copy > :nth-child(4) { animation-delay: .16s; } :is(body.hv-dirtpark, body.hv-workday, body.hv-aura) .m-hero .m-copy > :nth-child(n+5) { animation-delay: .24s; }
:is(body.hv-dirtpark, body.hv-workday, body.hv-aura) .m-hero h1 { color: var(--m-ink) !important; text-wrap: balance; max-width: 18ch; font-size: clamp(32px, 3.8vw, 54px) !important; line-height: 1.1 !important; }
:is(body.hv-dirtpark, body.hv-workday, body.hv-aura) .m-hero .bgcredit { display: none; }
:is(body.hv-dirtpark, body.hv-workday, body.hv-aura) .m-hero .sub { color: var(--m-body-ink); }
:is(body.hv-dirtpark, body.hv-workday, body.hv-aura) .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: var(--m-ink) !important; background: rgba(255,255,255,.7) !important; }
:is(body.hv-dirtpark, body.hv-workday, body.hv-aura) .m-hero .m-btn-ghost:hover { background: var(--m-ink) !important; color: #fff !important; }
:is(body.hv-dirtpark, body.hv-workday, body.hv-aura) .m-hero .m-chips span { background: #fff; color: var(--m-ink); border: 1.5px solid color-mix(in srgb, var(--m-ink) 14%, transparent); backdrop-filter: none; }
:is(.m-dk, .m-wk, .m-au) { position: relative; width: min(100%, 600px); justify-self: center; container-type: inline-size; }
:is(.m-dk, .m-wk, .m-au) a { -webkit-tap-highlight-color: transparent; }
:is(.m-dk, .m-wk, .m-au) img { display: block; width: 100%; height: auto; border-radius: 0; }
:is(.m-dkcats, .m-wkcats, .m-aucats) { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; padding: 10px clamp(18px, 4vw, 72px) clamp(26px, 4vh, 44px); }
:is(.m-dktile, .m-wktile, .m-autile) { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; padding: 14px 14px 12px 12px; background: #fff; color: var(--m-ink) !important; overflow: hidden; animation: m-rise .7s calc(.8s + var(--i, 0) * .08s) var(--m-ease) backwards; transition: transform .4s var(--m-ease), border-color .3s, box-shadow .3s, background .3s; }
:is(.m-dkimg, .m-wkimg, .m-auimg) { flex: none; display: block; overflow: hidden; width: 58px; height: 58px; padding: 4px; }
:is(.m-dkimg, .m-wkimg, .m-auimg) img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; transition: transform .45s var(--m-ease); }
:is(.m-dktile, .m-wktile, .m-autile):hover :is(.m-dkimg, .m-wkimg, .m-auimg) img { transform: scale(1.08) rotate(-4deg); }
:is(.m-dktile, .m-wktile, .m-autile):focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; }
:is(.m-dktile, .m-wktile, .m-autile):is(:hover, :focus-visible) { transform: translateY(-4px); }
:is(.m-dktile, .m-wktile, .m-autile) .m-q8tx b { font: 700 15px/1.2 var(--m-body); color: var(--m-ink); padding-right: 22px; }
:is(.m-dktile, .m-wktile, .m-autile) em { position: absolute; right: 11px; top: 10px; font-style: normal; }
:is(.m-dkspecs, .m-wkspecs, .m-auspecs) { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -6px 0 18px; }
:is(.m-dkspecs, .m-wkspecs, .m-auspecs) > span { flex-basis: 100%; margin: 0 0 2px; font: 700 12px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; }
:is(.m-dkspecs, .m-wkspecs, .m-auspecs) a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; background: #fff; color: var(--m-ink) !important; text-decoration: none; transition: background .25s, border-color .25s, transform .3s var(--m-ease), box-shadow .3s; animation: m-rise .6s calc(.45s + var(--i, 0) * .06s) var(--m-ease) backwards; }
:is(.m-dkspecs, .m-wkspecs, .m-auspecs) a:is(:hover, :focus-visible) { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,24,40,.12); }
:is(.m-dkspecs, .m-wkspecs, .m-auspecs) b { display: grid; place-items: center; min-width: 40px; height: 28px; padding: 0 10px; color: #fff; font: 700 13px/1 var(--m-body); white-space: nowrap; }
:is(.m-dkspecs, .m-wkspecs, .m-auspecs) small { font: 600 12.5px/1 var(--m-body); white-space: nowrap; color: var(--m-body-ink); }
:is(body.hv-dirtpark, body.hv-workday, body.hv-aura) .m-acard .m-art { position: relative; background: #fff !important; border-bottom: 1px solid color-mix(in srgb, var(--m-ink) 7%, transparent); }
:is(body.hv-dirtpark, body.hv-workday, body.hv-aura) .m-acard .m-art img { position: absolute; left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); max-height: none; object-fit: contain; border-radius: 0; }
@media (max-width: 900px) {
  :is(body.hv-dirtpark, body.hv-workday, body.hv-aura) .m-hero { min-height: 0; }
  :is(body.hv-dirtpark, body.hv-workday, body.hv-aura) .m-hero .m-inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  :is(body.hv-dirtpark, body.hv-workday, body.hv-aura) .m-hero .m-copy { display: contents; }
  :is(body.hv-dirtpark, body.hv-workday, body.hv-aura) .m-hero .m-copy > * { order: 1; }
  :is(body.hv-dirtpark, body.hv-workday, body.hv-aura) .m-hero .m-copy > :is(.m-ctas, nav, .m-chips) { order: 3; }
  :is(.m-dk, .m-wk, .m-au) { order: 2; width: min(100%, 520px); align-self: center; margin: 8px 0 4px; }
  :is(.m-dkcats, .m-wkcats, .m-aucats) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-dkcats, .m-wkcats, .m-aucats) > a:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  :is(.m-dkspecs, .m-wkspecs, .m-auspecs) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-dkspecs, .m-wkspecs, .m-auspecs) > span { grid-column: 1 / -1; }
  :is(.m-dkspecs, .m-wkspecs, .m-auspecs) a { flex-direction: column; align-items: flex-start; gap: 5px; padding: 6px 10px 8px 6px; border-radius: 12px; }
  :is(.m-dkspecs, .m-wkspecs, .m-auspecs) small { white-space: normal; line-height: 1.2; padding-left: 2px; }
}
@media (max-width: 420px) {
  :is(.m-dktile, .m-wktile, .m-autile) { gap: 9px; padding: 10px; } :is(.m-dkimg, .m-wkimg, .m-auimg) { width: 44px; height: 44px; }
  :is(.m-dktile, .m-wktile, .m-autile) .m-q8tx b { font-size: 13px; padding-right: 0; } :is(.m-dktile, .m-wktile, .m-autile) em { display: none; }
}

/* dirtpark (Sopbost): a backyard off-road park; a dirt trail winds over a green hill with rolling tyre tracks and fluttering pennants; the real blue UTV idles in front with dust puffs, the real pink Can-Am rolls along the far trail, the real tractor waits on the hill; a battery card steps 12V - 24V - 36V */
body.hv-dirtpark .m-hero { background: radial-gradient(40% 50% at 78% 30%, #fff1e0, transparent 70%), radial-gradient(30% 40% at 4% 96%, rgba(226,86,28,.10), transparent 70%), linear-gradient(120deg, #fdf0e2, #fffbf5 50%, #f6eedc); }
body.hv-dirtpark .m-hero h1 { letter-spacing: .005em; }
body.hv-dirtpark .m-hero .eyebrow { color: #963409; letter-spacing: .14em; }
.m-dk { aspect-ratio: 600 / 560; }
.m-dksky { position: absolute; inset: 0 0 34% 0; border-radius: 28px 28px 0 0; background: linear-gradient(180deg, #bfe3f5, #e6f4fa 70%, #f4f9f2); animation: m-dkin .9s .05s var(--m-ease) backwards; }
.m-dksun { position: absolute; right: 9%; top: 7%; width: 15%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffd25a 0 52%, rgba(255,210,90,.35) 54% 68%, transparent 70%); animation: m-dkin 1s .1s var(--m-ease) backwards, m-dkglow 5s 1s ease-in-out infinite; }
.m-dkhill { position: absolute; left: 0; right: 0; top: 34%; bottom: 0; border-radius: 50% 50% 28px 28px / 18% 22% 28px 28px; background: radial-gradient(60% 30% at 30% 10%, #a6d36f, transparent 70%), linear-gradient(180deg, #8cc45a, #6fae45 60%, #5c9a3a); box-shadow: 0 26px 40px rgba(60,40,10,.14); animation: m-dkin .9s .05s var(--m-ease) backwards; }
.m-dktrail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; animation: m-dkin .9s .2s var(--m-ease) backwards; }
.m-dktrail .bed { fill: #c99a62; stroke: #b58448; stroke-width: 3; }
.m-dktrail .trk { fill: none; stroke: #9a6c37; stroke-width: 7; stroke-dasharray: 4 12; stroke-linecap: round; opacity: .7; animation: m-dkroll 1.6s linear infinite; }
.m-dkflag { position: absolute; z-index: 2; width: 1.2cqw; min-width: 3px; height: 15%; background: #6b4a2a; border-radius: 2px; animation: m-dkin .8s .5s var(--m-ease) backwards; }
.m-dkflag i { position: absolute; left: 100%; top: 0; width: 5.4cqw; aspect-ratio: 1.3; background: #e2561c; clip-path: polygon(0 0, 100% 50%, 0 100%); transform-origin: 0 50%; animation: m-dkwave 1.8s ease-in-out infinite; }
.m-dkflag.f1 { left: 64%; top: 25%; } .m-dkflag.f2 { left: 90%; top: 40%; } .m-dkflag.f2 i { background: #f2b705; animation-delay: -.7s; }
.m-dktractor, .m-dkcanam, .m-dkutv { position: absolute; display: block; transition: transform .45s var(--m-ease); }
.m-dktractor { left: 0; top: 44%; width: 32%; z-index: 2; filter: drop-shadow(0 10px 8px rgba(40,50,20,.25)); animation: m-dkin .9s .4s var(--m-ease) backwards; }
.m-dkcanam { left: 33%; top: 25%; width: 25%; z-index: 2; filter: drop-shadow(0 8px 7px rgba(60,40,10,.25)); animation: m-dkin .9s .3s var(--m-ease) backwards, m-dkcruise 6s 1.2s ease-in-out infinite; }
.m-dkutv { left: 38%; bottom: 3%; width: 54%; z-index: 4; filter: drop-shadow(0 18px 14px rgba(60,40,10,.3)); animation: m-dkin 1s .15s var(--m-ease) backwards, m-dkidle 1.1s 1.2s ease-in-out infinite; }
.m-dktractor:hover, .m-dkcanam:hover, .m-dkutv:hover { transform: translateY(-6px); }
.m-dkdust { position: absolute; left: 27%; bottom: 6%; width: 22%; height: 16%; z-index: 3; pointer-events: none; }
.m-dkdust i { position: absolute; left: calc(60% - var(--i) * 12%); bottom: calc(var(--i) * 6%); width: calc(30% + var(--i) * 6%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(240,220,190,.95), rgba(214,180,136,.6) 60%, transparent 72%); opacity: 0; animation: m-dkpuff 2.4s calc(1.2s + var(--i) * .4s) ease-out infinite; }
.m-dkbat { position: absolute; left: 3%; top: 4%; z-index: 6; display: grid; gap: 1.4cqw; padding: 2cqw 2.4cqw; border-radius: 16px; background: #fff; box-shadow: 0 12px 26px rgba(60,40,10,.14); animation: m-dkin .9s .7s var(--m-ease) backwards; }
.m-dkbat small { font: 700 clamp(8.5px, 1.9cqw, 11.5px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #963409; }
.m-dkcell { position: relative; display: flex; gap: .8cqw; width: 20cqw; padding: .8cqw; border: 2px solid #1f2a1e; border-radius: 6px; }
.m-dkcell::after { content: ""; position: absolute; right: -1.6cqw; top: 30%; width: 1.2cqw; height: 40%; border-radius: 0 3px 3px 0; background: #1f2a1e; }
.m-dkcell i { flex: 1; height: 3cqw; min-height: 7px; border-radius: 2px; background: #7cb342; opacity: .15; animation: m-dkcell 4s calc(1s + var(--i, 0) * .3s) ease-in-out infinite; }
.m-dkcell i:nth-child(2) { --i: 1; } .m-dkcell i:nth-child(3) { --i: 2; } .m-dkcell i:nth-child(4) { --i: 3; }
.m-dkvolts { display: flex; gap: .8cqw; }
.m-dkvolts i { padding: 1cqw 1.8cqw; border-radius: 999px; font: 700 clamp(10px, 2.3cqw, 14px)/1 var(--m-body); font-style: normal; color: #1f2a1e; background: #f6eedc; animation: m-dkstep 6s calc(1s + var(--i) * 2s) ease-in-out infinite; }
@keyframes m-dkin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-dkglow { 50% { scale: 1.08; } }
@keyframes m-dkroll { to { stroke-dashoffset: -32; } }
@keyframes m-dkwave { 0%, 100% { rotate: 0deg; scale: 1 1; } 50% { rotate: 8deg; scale: .86 1; } }
@keyframes m-dkidle { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -.5cqw; rotate: -.4deg; } }
@keyframes m-dkcruise { 0%, 100% { translate: 0 0; } 50% { translate: -3cqw .8cqw; } }
@keyframes m-dkpuff { 0% { opacity: 0; translate: 0 0; scale: .4; } 15% { opacity: .9; } 100% { opacity: 0; translate: -7cqw -4cqw; scale: 1.3; } }
@keyframes m-dkcell { 0%, 10% { opacity: .15; } 30%, 80% { opacity: 1; } 100% { opacity: .15; } }
@keyframes m-dkstep { 0%, 26% { background: #e2561c; color: #fff; } 32%, 100% { background: #f6eedc; color: #1f2a1e; } }
.m-dkspecs > span { color: #963409; }
.m-dkspecs a { border-radius: 12px; border: 1.5px solid #f1d9c2; }
.m-dkspecs b { border-radius: 8px; background: #b8420f; } .m-dkspecs a:nth-of-type(3n+2) b { background: #1f2a1e; } .m-dkspecs a:nth-of-type(3n) b { background: #2b7a3a; }
.m-dkspecs a:is(:hover, :focus-visible) { border-color: #e2561c; }
.m-dktile { border-radius: 16px; border: 1.5px solid #f1d9c2; box-shadow: 0 10px 22px rgba(60,40,10,.06); }
.m-dktile em { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #f6eedc 0 26%, #1f2a1e 28% 46%, transparent 48%), repeating-conic-gradient(#1f2a1e 0 20deg, #4a4f45 20deg 40deg); transition: rotate .6s var(--m-ease); }
.m-dktile:is(:hover, :focus-visible) em { rotate: 180deg; }
.m-dkimg { border-radius: 12px; background: radial-gradient(circle at 50% 40%, #fff, #fdebdd); }
.m-dktile .m-q8tx small { color: #963409; }
.m-dktile:is(:hover, :focus-visible) { border-color: #e2561c; box-shadow: 0 16px 30px rgba(60,40,10,.12); }
body.hv-dirtpark :is(h3, h4, .m-q8tx b, .m-toc h2, aside h2) { font-family: var(--m-body) !important; font-weight: 700 !important; letter-spacing: 0; }
body.hv-dirtpark main section > .wrap > h2::after { content: ""; display: block; width: 120px; height: 10px; margin-top: 10px; background: repeating-linear-gradient(115deg, #e2561c 0 6px, transparent 6px 14px); -webkit-mask: linear-gradient(90deg, #000 55%, transparent); mask: linear-gradient(90deg, #000 55%, transparent); }
body.hv-dirtpark .pcard:hover, body.hv-dirtpark .m-acard:hover { box-shadow: 0 0 0 2px #e2561c, 0 18px 40px rgba(60,40,10,.12); }
body.hv-dirtpark .m-cta .m-band { border-radius: 24px; background: radial-gradient(40% 90% at 86% 0%, rgba(242,183,5,.3), transparent 70%), linear-gradient(120deg, #3a1a08, #7a2e0a 55%, #b8420f); }
body.hv-dirtpark .m-cta .m-band::before { width: 160px; height: 160px; right: 30px; top: -40px; border-radius: 50%; background: radial-gradient(circle, transparent 0 30%, rgba(255,255,255,.18) 31% 44%, transparent 45%), repeating-conic-gradient(rgba(255,255,255,.14) 0 14deg, transparent 14deg 28deg); }
body.hv-dirtpark .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(242,183,5,.25), transparent 70%), linear-gradient(120deg, #3a1a08, #a63c0e); } body.hv-dirtpark .m-page-hero .eyebrow { color: #ffd25a; }
body.hv-dirtpark footer.site { background: #1f2a1e; color: #e9eadf; border: 0; } body.hv-dirtpark footer.site nav a { color: #ffb48a; }
body.hv-dirtpark .m-collage .m-card { border-radius: 16px; }

/* treadmark (Sopbost): a chunky orange button; on hover a tyre-tread chevron rolls along its bottom edge and the arrow spins like a wheel nut */
body.bv-treadmark .btn { border-radius: 12px; padding: 15px 26px 17px; }
body.bv-treadmark :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #d24d16, #b8420f); color: #fff; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), 0 10px 22px rgba(184,66,15,.3); }
body.bv-treadmark :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #c0450f, #963409); color: #fff; }
body.bv-treadmark .btn::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: -1; pointer-events: none; background: linear-gradient(135deg, transparent 0 35%, rgba(31,42,30,.55) 35% 55%, transparent 55%) 0 0 / 16px 100%, linear-gradient(45deg, transparent 0 35%, rgba(31,42,30,.55) 35% 55%, transparent 55%) 8px 0 / 16px 100%; transition: height .25s var(--m-ease); }
body.bv-treadmark :is(.m-white, .m-btn-ghost, .btn.ghost)::before { background: linear-gradient(135deg, transparent 0 35%, rgba(226,86,28,.6) 35% 55%, transparent 55%) 0 0 / 16px 100%, linear-gradient(45deg, transparent 0 35%, rgba(226,86,28,.6) 35% 55%, transparent 55%) 8px 0 / 16px 100%; }
body.bv-treadmark .btn:is(:hover, :focus-visible)::before { height: 6px; animation: m-tmroll .5s linear infinite; }
body.bv-treadmark .btn .arr { display: inline-block; transition: transform .45s var(--m-ease); } body.bv-treadmark .btn:hover .arr { transform: translateX(4px) rotate(360deg); }
body.bv-treadmark .m-cta .btn.m-white:hover { color: #963409; }
@keyframes m-tmroll { to { background-position: 16px 0, 24px 0; } }

/* workday (Vinsetto): a home-office corner through a workday; daylight sweeps across the wall, the clock ticks round, the desk lamp on the real walnut printer stand clicks on; the real massage chair's vibration points pulse in turn and its lumbar heat glows; a massage-remote card steps Vibration - Heat - Recline; the real blue velvet chair waits by the window */
body.hv-workday .m-hero { background: radial-gradient(44% 56% at 78% 40%, #ffffff, transparent 70%), radial-gradient(30% 40% at 4% 96%, rgba(61,90,115,.10), transparent 70%), linear-gradient(120deg, #eef2f5, #f8f7f4 50%, #f1ece4); }
body.hv-workday .m-hero h1 { letter-spacing: -.015em; }
body.hv-workday .m-hero .eyebrow { color: #3d5a73; letter-spacing: .16em; }
.m-wk { aspect-ratio: 600 / 560; }
.m-wkwall { position: absolute; inset: 0 0 26% 0; border-radius: 24px 24px 0 0; overflow: hidden; background: linear-gradient(180deg, transparent 72%, rgba(255,255,255,.8) 72% 73%, transparent 73%), repeating-linear-gradient(90deg, transparent 0 14%, rgba(28,39,51,.04) 14% 14.3%) 0 72% / 100% 28% no-repeat, linear-gradient(180deg, #dfe7ee, #e9eef2); animation: m-wkin .9s .05s var(--m-ease) backwards; }
.m-wkwin { position: absolute; left: 6%; top: 7%; width: 30%; height: 38%; border-radius: 8px; background: linear-gradient(180deg, #bfdaf0, #eaf3fa); box-shadow: inset 0 0 0 max(4px, 1.2cqw) #fff, 0 10px 20px rgba(28,39,51,.1); overflow: hidden; animation: m-wkin .9s .15s var(--m-ease) backwards; }
.m-wkwin::before, .m-wkwin::after { content: ""; position: absolute; background: #fff; } .m-wkwin::before { left: 49%; top: 0; bottom: 0; width: max(3px, .9cqw); } .m-wkwin::after { top: 49%; left: 0; right: 0; height: max(3px, .9cqw); }
.m-wkwin i { position: absolute; width: 26%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffe08a 0 50%, rgba(255,224,138,.35) 52% 70%, transparent 72%); animation: m-wksun 14s 1s ease-in-out infinite; }
.m-wkbeam { position: absolute; left: 30%; top: 7%; width: 34%; height: 66%; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(255,236,190,.0), rgba(255,236,190,.55) 40%, rgba(255,236,190,0)); clip-path: polygon(0 0, 30% 0, 100% 100%, 50% 100%); mix-blend-mode: soft-light; opacity: .9; transform-origin: 0 0; animation: m-wkbeam 14s 1s ease-in-out infinite; }
.m-wkclock { position: absolute; left: 44%; top: 9%; width: 12%; z-index: 1; overflow: visible; animation: m-wkin .8s .3s var(--m-ease) backwards; }
.m-wkclock .f { fill: #fff; stroke: #1c2733; stroke-width: 3; } .m-wkclock .tk { stroke: #1c2733; stroke-width: 2.5; stroke-linecap: round; } .m-wkclock .c { fill: #c08a55; }
.m-wkclock .h, .m-wkclock .m { stroke: #1c2733; stroke-linecap: round; transform-origin: 30px 30px; } .m-wkclock .h { stroke-width: 3.4; animation: m-wkspin 168s linear infinite; } .m-wkclock .m { stroke-width: 2.2; stroke: #3d5a73; animation: m-wkspin 14s linear infinite; }
.m-wkfloor { position: absolute; left: 0; right: 0; top: 74%; bottom: 0; border-radius: 0 0 24px 24px; background: repeating-linear-gradient(90deg, rgba(90,60,30,.08) 0 2px, transparent 2px 16.6%), linear-gradient(180deg, #d9b98f, #c9a476); box-shadow: 0 26px 40px rgba(28,39,51,.14); animation: m-wkin .9s .05s var(--m-ease) backwards; }
.m-wkrug { position: absolute; left: 14%; width: 62%; bottom: 3%; height: 15%; border-radius: 50%; background: radial-gradient(closest-side, #f2ede4 0 70%, #e2d8c8 72% 82%, #f2ede4 84%); box-shadow: 0 6px 14px rgba(28,39,51,.12); animation: m-wkin .9s .2s var(--m-ease) backwards; }
.m-wkvelvet, .m-wkcab, .m-wkchair { position: absolute; display: block; }
.m-wkvelvet { left: 4%; bottom: 23%; width: 17%; z-index: 2; filter: drop-shadow(0 10px 8px rgba(28,39,51,.2)); animation: m-wkin .9s .45s var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-wkdesk { position: absolute; right: 3%; bottom: 20%; width: 34%; z-index: 2; animation: m-wkin .9s .35s var(--m-ease) backwards; }
.m-wkcab { position: relative; filter: drop-shadow(0 14px 10px rgba(28,39,51,.22)); transition: transform .45s var(--m-ease); }
.m-wklamp { position: absolute; left: 10%; bottom: 96%; width: 42%; overflow: visible; }
.m-wklamp .arm { fill: none; stroke: #1c2733; stroke-width: 4; stroke-linecap: round; } .m-wklamp .shade { fill: #3d5a73; } .m-wklamp .base { fill: #1c2733; }
.m-wklamp .beam { fill: rgba(255,214,120,.55); opacity: 0; animation: m-wklamp 14s 1s ease-in-out infinite; }
.m-wkchair { left: 27%; bottom: 4%; width: 40%; z-index: 4; filter: drop-shadow(0 20px 16px rgba(28,39,51,.28)); animation: m-wkin 1s .15s var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-wkchair a { display: block; }
.m-wkvelvet:hover, .m-wkcab:hover, .m-wkchair:hover { transform: translateY(-6px); }
.m-wkpts { position: absolute; inset: 0; pointer-events: none; }
.m-wkpts i { position: absolute; width: 15%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 2px solid rgba(120,190,255,.95); opacity: 0; animation: m-wkpulse 2.4s calc(1.4s + var(--i) * .6s) ease-out infinite; }
.m-wkpts .heat { position: absolute; left: 40%; top: 40%; width: 34%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255,90,60,.55), rgba(255,90,60,0) 70%); animation: m-wkheat 4s 1.2s ease-in-out infinite; }
.m-wkremote { position: absolute; right: 3%; top: 5%; z-index: 6; display: grid; gap: 1.2cqw; padding: 2cqw 2.2cqw; border-radius: 14px; background: #1c2733; color: #fff; box-shadow: 0 14px 28px rgba(28,39,51,.25); animation: m-wkin .9s .7s var(--m-ease) backwards; }
.m-wkremote small { font: 700 clamp(8.5px, 1.8cqw, 11px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #a9c4da; }
.m-wkmodes { display: grid; gap: .8cqw; }
.m-wkmodes i { display: flex; align-items: center; gap: 1.2cqw; padding: 1cqw 1.6cqw; border-radius: 8px; font: 700 clamp(10px, 2.2cqw, 13.5px)/1 var(--m-body); font-style: normal; animation: m-wkmode 6s calc(1s + var(--i) * 2s) ease-in-out infinite; }
.m-wkmodes em { width: 1.6cqw; min-width: 6px; aspect-ratio: 1; border-radius: 50%; background: #4a5a6a; animation: m-wkled 6s calc(1s + var(--i) * 2s) ease-in-out infinite; }
@keyframes m-wkin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-wksun { 0% { left: -10%; top: 70%; } 50% { left: 40%; top: 10%; } 100% { left: 90%; top: 70%; } }
@keyframes m-wkbeam { 0%, 100% { rotate: -14deg; opacity: .35; } 50% { rotate: 6deg; opacity: .95; } }
@keyframes m-wkspin { to { rotate: 360deg; } }
@keyframes m-wklamp { 0%, 60% { opacity: 0; } 66%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes m-wkpulse { 0% { opacity: 0; scale: .4; } 20% { opacity: 1; } 100% { opacity: 0; scale: 1.6; } }
@keyframes m-wkheat { 0%, 100% { opacity: .35; scale: .9; } 50% { opacity: 1; scale: 1.1; } }
@keyframes m-wkmode { 0%, 26% { background: #3d5a73; } 32%, 100% { background: transparent; } }
@keyframes m-wkled { 0%, 26% { background: #7fe0a8; box-shadow: 0 0 8px #7fe0a8; } 32%, 100% { background: #4a5a6a; box-shadow: none; } }
.m-wkspecs > span { color: #3d5a73; }
.m-wkspecs a { border-radius: 10px; border: 1.5px solid #d6e0e8; }
.m-wkspecs b { border-radius: 7px; background: #3d5a73; } .m-wkspecs a:nth-of-type(3n+2) b { background: #8a5a2e; } .m-wkspecs a:nth-of-type(3n) b { background: #1c2733; }
.m-wkspecs a:is(:hover, :focus-visible) { border-color: #3d5a73; }
.m-wktile { border-radius: 14px; border: 1.5px solid #d6e0e8; box-shadow: 0 10px 22px rgba(28,39,51,.06); }
.m-wktile em { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #7fa7c4; box-shadow: 0 0 0 3px rgba(127,167,196,.25); transition: box-shadow .45s var(--m-ease); }
.m-wktile:is(:hover, :focus-visible) em { box-shadow: 0 0 0 7px rgba(127,167,196,.2), 0 0 0 3px rgba(127,167,196,.35); }
.m-wkimg { border-radius: 10px; background: radial-gradient(circle at 50% 40%, #fff, #e7edf2); }
.m-wktile .m-q8tx small { color: #3d5a73; }
.m-wktile:is(:hover, :focus-visible) { border-color: #3d5a73; box-shadow: 0 16px 30px rgba(28,39,51,.12); }
body.hv-workday main section > .wrap > h2::after { content: ""; display: block; width: 90px; height: 4px; margin-top: 12px; border-radius: 4px; background: linear-gradient(90deg, #3d5a73 0 60%, #c08a55 60%); }
body.hv-workday .pcard:hover, body.hv-workday .m-acard:hover { box-shadow: 0 0 0 2px #3d5a73, 0 18px 40px rgba(28,39,51,.12); }
body.hv-workday .m-cta .m-band { border-radius: 22px; background: radial-gradient(40% 90% at 86% 0%, rgba(192,138,85,.3), transparent 70%), linear-gradient(120deg, #1c2733, #2c4356 55%, #3d5a73); }
body.hv-workday .m-cta .m-band::before { width: 150px; height: 150px; right: 30px; top: -40px; border-radius: 50%; background: radial-gradient(circle, transparent 0 30%, rgba(127,167,196,.3) 31% 33%, transparent 34% 48%, rgba(127,167,196,.2) 49% 51%, transparent 52%); }
body.hv-workday .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(192,138,85,.25), transparent 70%), linear-gradient(120deg, #1c2733, #3d5a73); } body.hv-workday .m-page-hero .eyebrow { color: #e6c49c; }
body.hv-workday footer.site { background: #1c2733; color: #dfe7ee; border: 0; } body.hv-workday footer.site nav a { color: #e6c49c; }
body.hv-workday .m-collage .m-card { border-radius: 14px; }

/* lumbar (Vinsetto): a slate button with a soft cushion; on hover it reclines a touch backwards and two massage rings ripple out from behind the arrow */
body.bv-lumbar .btn { border-radius: 10px 10px 18px 18px; padding: 15px 26px; transform-origin: 50% 100%; }
body.bv-lumbar :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #4a6a85, #3d5a73 55%, #34506a); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -3px 0 rgba(0,0,0,.15), 0 10px 22px rgba(61,90,115,.3); }
body.bv-lumbar :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #3d5a73, #2c4356); color: #fff; }
body.bv-lumbar .btn:hover { transform: perspective(300px) rotateX(10deg) translateY(-2px); }
body.bv-lumbar .btn::before { content: ""; position: absolute; right: 14px; top: 50%; width: 28px; height: 28px; margin-top: -14px; z-index: -1; pointer-events: none; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); opacity: 0; }
body.bv-lumbar :is(.m-white, .m-btn-ghost, .btn.ghost)::before { border-color: rgba(61,90,115,.55); }
body.bv-lumbar .btn:is(:hover, :focus-visible)::before { animation: m-lbring 1.2s ease-out infinite; }
body.bv-lumbar .btn .arr { display: inline-block; transition: transform .3s var(--m-ease); } body.bv-lumbar .btn:hover .arr { transform: translateX(4px); }
body.bv-lumbar .m-cta .btn.m-white:hover { color: #2c4356; }
@keyframes m-lbring { 0% { opacity: .9; scale: .3; } 100% { opacity: 0; scale: 2.2; } }

/* aura (Tracy’s Dog): a calm, abstract studio still life; soft lavender and peach shapes drift and morph, a satin ribbon draws itself, soft glow rings breathe out from the real compact wand on a tall plinth, the real Wetever lube bottles stand on a low plinth, sparkles twinkle; a settings card steps Gentle - Steady - Strong; an 18+ seal */
body.hv-aura .m-hero { background: radial-gradient(46% 58% at 76% 42%, #ffffff, transparent 70%), radial-gradient(30% 40% at 4% 96%, rgba(122,79,208,.12), transparent 70%), radial-gradient(34% 44% at 96% 4%, rgba(229,143,180,.14), transparent 70%), linear-gradient(120deg, #f1eafc, #fbf9fe 50%, #fbeef3); }
body.hv-aura .m-hero h1 { letter-spacing: -.01em; font-size: clamp(36px, 4.4vw, 62px) !important; line-height: 1.04 !important; }
body.hv-aura .m-hero .eyebrow { color: #552fa3; letter-spacing: .16em; }
.m-au { aspect-ratio: 600 / 560; }
.m-aubg { position: absolute; inset: 0; border-radius: 32px; overflow: hidden; background: radial-gradient(60% 50% at 50% 30%, #fff, transparent 70%), linear-gradient(160deg, #e9defb, #f6eefb 50%, #fde6ee); box-shadow: 0 26px 50px rgba(42,26,74,.14); animation: m-auin .9s .05s var(--m-ease) backwards; }
.m-aublobs { position: absolute; inset: 0; border-radius: 32px; overflow: hidden; pointer-events: none; }
.m-aublobs i { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; filter: blur(2px); opacity: .55; animation: m-aumorph 14s ease-in-out infinite; }
.m-aublobs i:nth-child(1) { left: -8%; top: 8%; background: radial-gradient(circle at 40% 40%, #c7b0f2, #a98ae6); }
.m-aublobs i:nth-child(2) { right: -10%; top: -6%; width: 40%; background: radial-gradient(circle at 40% 40%, #ffd3c4, #f6b0c8); animation-duration: 17s; animation-delay: -5s; }
.m-aublobs i:nth-child(3) { right: 6%; bottom: -12%; width: 38%; background: radial-gradient(circle at 40% 40%, #b9e6df, #9fd6cf); opacity: .4; animation-duration: 19s; animation-delay: -9s; }
.m-aurib { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; clip-path: inset(0 round 32px); pointer-events: none; }
.m-aurib path { fill: none; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: m-audraw 2.4s .5s var(--m-ease) forwards, m-ausway 9s 3s ease-in-out infinite; }
.m-aurib .a { stroke: rgba(122,79,208,.45); stroke-width: 14; } .m-aurib .b { stroke: rgba(255,255,255,.85); stroke-width: 5; animation-delay: .7s, 3.2s; }
.m-auspark { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.m-auspark i { position: absolute; width: 3.4cqw; aspect-ratio: 1; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 3px rgba(122,79,208,.6)); opacity: 0; animation: m-autwinkle 3.6s calc(1.2s + var(--i) * .7s) ease-in-out infinite; }
.m-auplinth { position: absolute; z-index: 2; border-radius: 0 0 50% 50% / 0 0 14% 14%; background: linear-gradient(90deg, #e3d6f7, #f8f3ff 45%, #d9c8f3); box-shadow: 0 22px 30px rgba(42,26,74,.14); animation: m-auin .9s .2s var(--m-ease) backwards; }
.m-auplinth::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9cqw; translate: 0 -50%; border-radius: 50%; background: radial-gradient(closest-side, #fff, #f1e9fd); box-shadow: inset 0 -2px 0 rgba(122,79,208,.12); }
.m-auplinth.p1 { left: 27%; width: 33%; bottom: 9%; height: 22%; }
.m-auplinth.p2 { left: 62%; width: 30%; bottom: 9%; height: 12%; background: linear-gradient(90deg, #f6d9e3, #fff4f7 45%, #efc9d7); }
.m-auplinth.p2::before { background: radial-gradient(closest-side, #fff, #fdeef3); }
.m-auwand, .m-aulube, .m-auberry { position: absolute; display: block; z-index: 4; transition: transform .45s var(--m-ease); }
.m-auwand { left: 35%; bottom: 30.5%; width: 17%; filter: drop-shadow(0 16px 14px rgba(42,26,74,.3)); animation: m-auin 1s .15s var(--m-ease) backwards, m-aufloat 6s 1.2s ease-in-out infinite; }
.m-aulube { left: 66%; bottom: 19%; width: 10%; filter: drop-shadow(0 12px 10px rgba(42,26,74,.22)); animation: m-auin .9s .35s var(--m-ease) backwards; }
.m-auberry { left: 78%; bottom: 19%; width: 9.5%; filter: drop-shadow(0 12px 10px rgba(42,26,74,.22)); animation: m-auin .9s .45s var(--m-ease) backwards; }
.m-auwand:hover, .m-aulube:hover, .m-auberry:hover { transform: translateY(-6px); }
.m-aurings { position: absolute; left: 44%; top: 33%; width: 0; height: 0; z-index: 3; pointer-events: none; }
.m-aurings i { position: absolute; left: 0; top: 0; width: 22cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 2px solid rgba(122,79,208,.4); background: radial-gradient(circle, rgba(255,255,255,.0) 50%, rgba(199,176,242,.25)); opacity: 0; animation: m-aubreathe 4.2s calc(1.4s + var(--i, 0) * 1.4s) ease-out infinite; }
.m-aurings i:nth-child(2) { --i: 1; } .m-aurings i:nth-child(3) { --i: 2; }
.m-auset { position: absolute; left: 4%; top: 6%; z-index: 6; display: grid; gap: 1.2cqw; padding: 2cqw 2.4cqw; border-radius: 18px; background: rgba(255,255,255,.85); backdrop-filter: blur(6px); box-shadow: 0 12px 26px rgba(42,26,74,.12); animation: m-auin .9s .7s var(--m-ease) backwards; }
.m-auset small { font: 700 clamp(8.5px, 1.8cqw, 11px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #552fa3; }
.m-aubars { display: grid; gap: .6cqw; }
.m-aubars i { display: flex; align-items: center; gap: 1.4cqw; padding: .9cqw 1.6cqw .9cqw 1cqw; border-radius: 999px; font: 600 clamp(10px, 2.2cqw, 13.5px)/1 var(--m-body); font-style: normal; color: #221a33; animation: m-austep 6s calc(1s + var(--i) * 2s) ease-in-out infinite; }
.m-aubars b { display: flex; align-items: flex-end; gap: 2px; width: 4.4cqw; min-width: 16px; height: 2.4cqw; min-height: 9px; }
.m-aubars em { flex: 1; border-radius: 2px; background: #7a4fd0; } .m-aubars em:nth-child(1) { height: 40%; } .m-aubars em:nth-child(2) { height: 70%; } .m-aubars em:nth-child(3) { height: 100%; }
.m-auseal { position: absolute; right: 4%; top: 5%; z-index: 6; display: grid; place-items: center; width: 11cqw; min-width: 40px; aspect-ratio: 1; border-radius: 50%; font: 700 clamp(12px, 3cqw, 18px)/1 var(--m-body); color: #fff; background: #221a33; box-shadow: 0 0 0 4px rgba(255,255,255,.8), 0 10px 20px rgba(42,26,74,.2); animation: m-auin .9s .8s var(--m-ease) backwards; }
@keyframes m-auin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-aumorph { 0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; translate: 0 0; } 33% { border-radius: 58% 42% 38% 62% / 55% 38% 62% 45%; translate: 4% 6%; } 66% { border-radius: 36% 64% 52% 48% / 60% 52% 48% 40%; translate: -3% 3%; } }
@keyframes m-audraw { to { stroke-dashoffset: 0; } }
@keyframes m-ausway { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.6cqw; } }
@keyframes m-autwinkle { 0%, 100% { opacity: 0; scale: .4; rotate: 0deg; } 40% { opacity: 1; scale: 1; rotate: 45deg; } 70% { opacity: 0; scale: .6; } }
@keyframes m-aufloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.2cqw; } }
@keyframes m-aubreathe { 0% { opacity: 0; scale: .5; } 25% { opacity: .9; } 100% { opacity: 0; scale: 1.7; } }
@keyframes m-austep { 0%, 26% { background: #efe8fb; } 32%, 100% { background: transparent; } }
.m-auspecs > span { color: #552fa3; }
.m-auspecs a { border-radius: 999px; border: 1.5px solid #e4d9f6; }
.m-auspecs b { border-radius: 999px; background: #6b3fc4; } .m-auspecs a:nth-of-type(3n+2) b { background: #221a33; } .m-auspecs a:nth-of-type(3n) b { background: #b4407a; }
.m-auspecs a:is(:hover, :focus-visible) { border-color: #7a4fd0; }
.m-autile { border-radius: 22px; border: 1.5px solid #e4d9f6; box-shadow: 0 10px 22px rgba(42,26,74,.06); }
.m-autile em { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #c7b0f2 60%, #7a4fd0); box-shadow: 0 0 0 4px rgba(199,176,242,.3); transition: box-shadow .45s var(--m-ease); }
.m-autile:is(:hover, :focus-visible) em { box-shadow: 0 0 0 8px rgba(199,176,242,.25); }
.m-auimg { border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff, #efe8fb); }
.m-autile .m-q8tx small { color: #552fa3; }
.m-autile:is(:hover, :focus-visible) { border-color: #7a4fd0; box-shadow: 0 16px 30px rgba(42,26,74,.12); }
body.hv-aura main section > .wrap > h2::after { content: ""; display: block; width: 110px; height: 10px; margin-top: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 10'%3E%3Cpath d='M2 6C20 0 36 10 55 5S90 0 108 5' fill='none' stroke='%237a4fd0' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
body.hv-aura .pcard:hover, body.hv-aura .m-acard:hover { box-shadow: 0 0 0 2px #7a4fd0, 0 18px 40px rgba(42,26,74,.12); }
body.hv-aura .m-cta .m-band { border-radius: 30px; background: radial-gradient(40% 90% at 86% 0%, rgba(246,176,200,.35), transparent 70%), linear-gradient(120deg, #2a1a4a, #4a2c8a 55%, #6b3fc4); }
body.hv-aura .m-cta .m-band::before { width: 170px; height: 170px; right: 30px; top: -50px; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.25), rgba(255,255,255,.05)); }
body.hv-aura .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(246,176,200,.3), transparent 70%), linear-gradient(120deg, #2a1a4a, #6b3fc4); } body.hv-aura .m-page-hero .eyebrow { color: #f6c8da; }
body.hv-aura footer.site { background: #221a33; color: #e8e0f5; border: 0; } body.hv-aura footer.site nav a { color: #d6c3fb; }
body.hv-aura .m-collage .m-card { border-radius: 22px; }

/* satin (Tracy’s Dog): a soft violet pill; on hover a satin sheen glides across and the fill shifts to a deeper plum while the arrow eases forward */
body.bv-satin .btn { border-radius: 999px; padding: 15px 28px; }
body.bv-satin :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(120deg, #7a4fd0, #6b3fc4 50%, #5a33ab) 0 0 / 200% 100%; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px rgba(107,63,196,.3); transition: background-position .6s var(--m-ease), transform .2s var(--m-ease), box-shadow .3s; }
body.bv-satin :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(120deg, #7a4fd0, #6b3fc4 50%, #4a2c8a) 100% 0 / 200% 100%; color: #fff; }
body.bv-satin .btn::before { content: ""; position: absolute; inset: -40% auto -40% -60%; width: 50%; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45) 45%, rgba(255,230,245,.25) 60%, transparent); border-radius: 50%; opacity: 0; }
body.bv-satin :is(.m-white, .m-btn-ghost, .btn.ghost)::before { background: linear-gradient(100deg, transparent, rgba(122,79,208,.22) 45%, rgba(229,143,180,.18) 60%, transparent); }
body.bv-satin .btn:is(:hover, :focus-visible)::before { animation: m-satin 1.6s var(--m-ease) infinite; }
body.bv-satin .btn .arr { display: inline-block; transition: transform .45s var(--m-ease); } body.bv-satin .btn:hover .arr { transform: translateX(5px); }
body.bv-satin .m-cta .btn.m-white:hover { color: #4a2c8a; }
@keyframes m-satin { 0% { left: -60%; opacity: 0; } 20% { opacity: 1; } 100% { left: 120%; opacity: 0; } }

/* ===== batch 13.11.2026 (3): fixture/dimmer (Legental), saddlery/buckle (HESHE), flatlay/seal (Michel Design Works); shared layout for these heroes ===== */
:is(body.hv-fixture, body.hv-saddlery, body.hv-flatlay) .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); color: var(--m-ink); }
:is(body.hv-fixture, body.hv-saddlery, body.hv-flatlay) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:is(body.hv-fixture, body.hv-saddlery, body.hv-flatlay) .m-hero .m-copy > * { animation: m-rise .8s var(--m-ease) both; }
:is(body.hv-fixture, body.hv-saddlery, body.hv-flatlay) .m-hero .m-copy > :nth-child(3) { animation-delay: .08s; } :is(body.hv-fixture, body.hv-saddlery, body.hv-flatlay) .m-hero .m-copy > :nth-child(4) { animation-delay: .16s; } :is(body.hv-fixture, body.hv-saddlery, body.hv-flatlay) .m-hero .m-copy > :nth-child(n+5) { animation-delay: .24s; }
:is(body.hv-fixture, body.hv-saddlery, body.hv-flatlay) .m-hero h1 { color: var(--m-ink) !important; text-wrap: balance; max-width: 18ch; font-size: clamp(32px, 3.8vw, 54px) !important; line-height: 1.1 !important; }
:is(body.hv-fixture, body.hv-saddlery, body.hv-flatlay) .m-hero .bgcredit { display: none; }
:is(body.hv-fixture, body.hv-saddlery, body.hv-flatlay) .m-hero .sub { color: var(--m-body-ink); }
:is(body.hv-fixture, body.hv-saddlery, body.hv-flatlay) .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: var(--m-ink) !important; background: rgba(255,255,255,.7) !important; }
:is(body.hv-fixture, body.hv-saddlery, body.hv-flatlay) .m-hero .m-btn-ghost:hover { background: var(--m-ink) !important; color: #fff !important; }
:is(body.hv-fixture, body.hv-saddlery, body.hv-flatlay) .m-hero .m-chips span { background: #fff; color: var(--m-ink); border: 1.5px solid color-mix(in srgb, var(--m-ink) 14%, transparent); backdrop-filter: none; }
:is(.m-fx, .m-sy, .m-ft) { position: relative; width: min(100%, 600px); justify-self: center; container-type: inline-size; }
:is(.m-fx, .m-sy, .m-ft) a { -webkit-tap-highlight-color: transparent; }
:is(.m-fx, .m-sy, .m-ft) img { display: block; width: 100%; height: auto; border-radius: 0; }
:is(.m-fxcats, .m-sycats, .m-ftcats) { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; padding: 10px clamp(18px, 4vw, 72px) clamp(26px, 4vh, 44px); }
:is(.m-fxtile, .m-sytile, .m-fttile) { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; padding: 14px 14px 12px 12px; background: #fff; color: var(--m-ink) !important; overflow: hidden; animation: m-rise .7s calc(.8s + var(--i, 0) * .08s) var(--m-ease) backwards; transition: transform .4s var(--m-ease), border-color .3s, box-shadow .3s, background .3s; }
:is(.m-fximg, .m-syimg, .m-ftimg) { flex: none; display: block; overflow: hidden; width: 58px; height: 58px; padding: 4px; }
:is(.m-fximg, .m-syimg, .m-ftimg) img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; transition: transform .45s var(--m-ease); }
:is(.m-fxtile, .m-sytile, .m-fttile):hover :is(.m-fximg, .m-syimg, .m-ftimg) img { transform: scale(1.08) rotate(-4deg); }
:is(.m-fxtile, .m-sytile, .m-fttile):focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; }
:is(.m-fxtile, .m-sytile, .m-fttile):is(:hover, :focus-visible) { transform: translateY(-4px); }
:is(.m-fxtile, .m-sytile, .m-fttile) .m-q8tx b { font: 700 15px/1.2 var(--m-body); color: var(--m-ink); padding-right: 22px; }
:is(.m-fxtile, .m-sytile, .m-fttile) em { position: absolute; right: 11px; top: 10px; font-style: normal; }
:is(.m-fxspecs, .m-syspecs, .m-ftspecs) { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -6px 0 18px; }
:is(.m-fxspecs, .m-syspecs, .m-ftspecs) > span { flex-basis: 100%; margin: 0 0 2px; font: 700 12px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; }
:is(.m-fxspecs, .m-syspecs, .m-ftspecs) a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; background: #fff; color: var(--m-ink) !important; text-decoration: none; transition: background .25s, border-color .25s, transform .3s var(--m-ease), box-shadow .3s; animation: m-rise .6s calc(.45s + var(--i, 0) * .06s) var(--m-ease) backwards; }
:is(.m-fxspecs, .m-syspecs, .m-ftspecs) a:is(:hover, :focus-visible) { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,24,40,.12); }
:is(.m-fxspecs, .m-syspecs, .m-ftspecs) b { display: grid; place-items: center; min-width: 40px; height: 28px; padding: 0 10px; color: #fff; font: 700 13px/1 var(--m-body); white-space: nowrap; }
:is(.m-fxspecs, .m-syspecs, .m-ftspecs) small { font: 600 12.5px/1 var(--m-body); white-space: nowrap; color: var(--m-body-ink); }
:is(body.hv-fixture, body.hv-saddlery, body.hv-flatlay) .m-acard .m-art { position: relative; background: #fff !important; border-bottom: 1px solid color-mix(in srgb, var(--m-ink) 7%, transparent); }
:is(body.hv-fixture, body.hv-saddlery, body.hv-flatlay) .m-acard .m-art img { position: absolute; left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); max-height: none; object-fit: contain; border-radius: 0; }
@media (max-width: 900px) {
  :is(body.hv-fixture, body.hv-saddlery, body.hv-flatlay) .m-hero { min-height: 0; }
  :is(body.hv-fixture, body.hv-saddlery, body.hv-flatlay) .m-hero .m-inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  :is(body.hv-fixture, body.hv-saddlery, body.hv-flatlay) .m-hero .m-copy { display: contents; }
  :is(body.hv-fixture, body.hv-saddlery, body.hv-flatlay) .m-hero .m-copy > * { order: 1; }
  :is(body.hv-fixture, body.hv-saddlery, body.hv-flatlay) .m-hero .m-copy > :is(.m-ctas, nav, .m-chips) { order: 3; }
  :is(.m-fx, .m-sy, .m-ft) { order: 2; width: min(100%, 520px); align-self: center; margin: 8px 0 4px; }
  :is(.m-fxcats, .m-sycats, .m-ftcats) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-fxcats, .m-sycats, .m-ftcats) > a:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  :is(.m-fxspecs, .m-syspecs, .m-ftspecs) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-fxspecs, .m-syspecs, .m-ftspecs) > span { grid-column: 1 / -1; }
  :is(.m-fxspecs, .m-syspecs, .m-ftspecs) a { flex-direction: column; align-items: flex-start; gap: 5px; padding: 6px 10px 8px 6px; border-radius: 12px; }
  :is(.m-fxspecs, .m-syspecs, .m-ftspecs) small { white-space: normal; line-height: 1.2; padding-left: 2px; }
}
@media (max-width: 420px) {
  :is(.m-fxtile, .m-sytile, .m-fttile) { gap: 9px; padding: 10px; } :is(.m-fximg, .m-syimg, .m-ftimg) { width: 44px; height: 44px; }
  :is(.m-fxtile, .m-sytile, .m-fttile) .m-q8tx b { font-size: 13px; padding-right: 0; } :is(.m-fxtile, .m-sytile, .m-fttile) em { display: none; }
}

/* fixture (Legental): a ceiling-light retrofit bay; a yellow jobsite string light sags across the dark ceiling and its heads light in turn; the real round LED light engine powers on with a flicker, then its halo cycles 2700K - 4000K - 5000K with the color-temperature card; a dimension line measures the board; the real GX23 stick bulb and 12V power pack stand on the bench */
body.hv-fixture .m-hero { background: radial-gradient(40% 52% at 76% 38%, #ffffff, transparent 70%), radial-gradient(30% 40% at 2% 98%, rgba(31,127,209,.10), transparent 70%), linear-gradient(120deg, #e8f1fa, #f7fafd 52%, #fdf7e8); }
body.hv-fixture .m-hero h1 { letter-spacing: -.005em; }
body.hv-fixture .m-hero .eyebrow { color: #145891; letter-spacing: .16em; }
.m-fx { aspect-ratio: 600 / 560; }
.m-fxceil { position: absolute; inset: 0 0 27% 0; border-radius: 26px 26px 0 0; background: radial-gradient(60% 70% at 46% 46%, #1c3a5c, transparent 72%), linear-gradient(180deg, #0c1b2c, #13283f); background-color: #0f2236; overflow: hidden; animation: m-fxin .9s .05s var(--m-ease) backwards; }
.m-fxceil::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 7.5cqw 7.5cqw, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 7.5cqw 7.5cqw; }
.m-fxbench { position: absolute; left: 0; right: 0; top: 73%; bottom: 0; border-radius: 0 0 26px 26px; background: linear-gradient(180deg, #dfe8f1 0 6%, #f4f7fb 6% 100%); box-shadow: 0 26px 44px rgba(15,34,54,.16), inset 0 3px 0 #c5d3e2; animation: m-fxin .9s .1s var(--m-ease) backwards; }
.m-fxhalo { position: absolute; left: 48%; top: 40.5%; width: 74cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: 1; pointer-events: none; background: radial-gradient(closest-side, var(--k, #ffd7a0), transparent 72%); opacity: 0; animation: m-fxon 1.6s .5s steps(1) forwards, m-fxk 12s 2s linear infinite; }
.m-fxstr { position: absolute; left: 0; top: 0; width: 100%; height: auto; z-index: 3; overflow: hidden; border-radius: 26px 26px 0 0; animation: m-fxin .9s .25s var(--m-ease) backwards; }
.m-fxstr .cab { fill: none; stroke: #e8b10c; stroke-width: 4; stroke-linecap: round; }
.m-fxstr .cord { stroke: #e8b10c; stroke-width: 3; }
.m-fxstr .sock { fill: #f2c230; stroke: #b88a00; stroke-width: 1; }
.m-fxstr .puck { fill: #f3f6fa; }
.m-fxstr .glow { fill: #fff3c8; opacity: .1; filter: blur(4px); animation: m-fxbulb 5s calc(1.2s + var(--i) * .35s) ease-in-out infinite; }
.m-fxstr g:nth-of-type(odd) .glow { animation-duration: 5.6s; }
.m-fxeng { position: absolute; left: 26%; top: 16.5%; width: 44%; z-index: 4; display: block; filter: drop-shadow(0 18px 22px rgba(0,0,0,.45)); animation: m-fxin 1s .15s var(--m-ease) backwards; }
.m-fxengimg { display: block; clip-path: circle(48.5% at 50% 51%); animation: m-fxflick 1.6s .5s linear backwards; }
.m-fxtint { position: absolute; inset: 0; clip-path: circle(48.5% at 50% 51%); background: radial-gradient(circle at 50% 50%, transparent 30%, var(--k, #ffd7a0) 100%); mix-blend-mode: multiply; opacity: .55; pointer-events: none; animation: m-fxk 12s 2s linear infinite; }
.m-fxeng:hover .m-fxengimg { animation: m-fxspin 1.2s var(--m-ease); }
.m-fxdim { position: absolute; left: 73.5%; top: 17%; height: 45%; z-index: 4; width: 0; animation: m-fxin .9s .9s var(--m-ease) backwards; }
.m-fxdim i { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.7); transform-origin: top; animation: m-fxgrow 1.2s 1s var(--m-ease) backwards; }
.m-fxdim i::before, .m-fxdim i::after { content: ""; position: absolute; left: -6px; width: 14px; height: 2px; background: rgba(255,255,255,.7); } .m-fxdim i::before { top: 0; } .m-fxdim i::after { bottom: 0; }
.m-fxdim b { position: absolute; left: 1.8cqw; top: 50%; translate: 0 -50%; padding: .8cqw 1.4cqw; border-radius: 6px; font: 700 clamp(10px, 2.4cqw, 14px)/1 var(--m-head); color: #0f2236; background: #e8b10c; white-space: nowrap; }
.m-fxstick, .m-fxpack { position: absolute; display: block; z-index: 5; transition: transform .45s var(--m-ease); }
.m-fxstick { left: 61%; bottom: 7%; width: 8.5%; filter: drop-shadow(0 10px 8px rgba(15,34,54,.25)); animation: m-fxin .9s .4s var(--m-ease) backwards; }
.m-fxpack { left: 76%; bottom: 7%; width: 9%; filter: drop-shadow(0 10px 8px rgba(15,34,54,.25)); animation: m-fxin .9s .5s var(--m-ease) backwards; }
.m-fxstick:hover, .m-fxpack:hover { transform: translateY(-6px); }
.m-fxkel { position: absolute; left: 4%; bottom: 5%; z-index: 6; display: grid; gap: 1.2cqw; padding: 2cqw 2.4cqw; border-radius: 14px; background: #fff; border: 1.5px solid #d6e2ee; box-shadow: 0 14px 28px rgba(15,34,54,.16); animation: m-fxin .9s .7s var(--m-ease) backwards; }
.m-fxkel small { font: 700 clamp(8.5px, 1.8cqw, 11px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #145891; }
.m-fxkl { display: grid; gap: .5cqw; }
.m-fxkl i { display: flex; align-items: center; gap: 1.4cqw; padding: .9cqw 1.8cqw .9cqw 1cqw; border-radius: 8px; font: 600 clamp(10.5px, 2.3cqw, 14px)/1 var(--m-body); font-style: normal; color: #0f2236; animation: m-fxstep 12s calc(2s + var(--i) * 4s) linear infinite; }
.m-fxkl em { flex: none; width: 2.6cqw; min-width: 10px; aspect-ratio: 1; border-radius: 50%; background: #ffbf73; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #d6e2ee; }
.m-fxkl i:nth-child(2) em { background: #fff0d4; } .m-fxkl i:nth-child(3) em { background: #d9ecff; }
@keyframes m-fxin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-fxon { to { opacity: 1; } }
@keyframes m-fxflick { 0% { filter: brightness(.35) saturate(.6); } 12% { filter: brightness(1.05); } 18% { filter: brightness(.45); } 30% { filter: brightness(1.1); } 36% { filter: brightness(.6); } 50%, 100% { filter: none; } }
@keyframes m-fxk { 0%, 30% { --k: #ffc98a; } 33.3%, 63% { --k: #fff2da; } 66.6%, 96% { --k: #d4eaff; } 100% { --k: #ffc98a; } }
@property --k { syntax: "<color>"; inherits: true; initial-value: #ffd7a0; }
@keyframes m-fxbulb { 0%, 100% { opacity: .1; } 40%, 60% { opacity: .95; } }
@keyframes m-fxgrow { from { scale: 1 0; } }
@keyframes m-fxspin { from { rotate: 0deg; } to { rotate: 90deg; } }
@keyframes m-fxstep { 0%, 30% { background: #e6f0fa; box-shadow: inset 3px 0 0 #1a6fb8; } 33.3%, 100% { background: transparent; box-shadow: none; } }
.m-fxspecs > span { color: #145891; }
.m-fxspecs a { border-radius: 10px; border: 1.5px solid #d6e2ee; }
.m-fxspecs b { border-radius: 7px; background: #1a6fb8; font-family: var(--m-head); } .m-fxspecs a:nth-of-type(3n+2) b { background: #0f2236; } .m-fxspecs a:nth-of-type(3n) b { background: #e8b10c; color: #0f2236; }
.m-fxspecs a:is(:hover, :focus-visible) { border-color: #1a6fb8; }
.m-fxtile { border-radius: 14px; border: 1.5px solid #d6e2ee; box-shadow: 0 10px 22px rgba(15,34,54,.06); }
.m-fxtile em { width: 12px; height: 12px; border-radius: 50%; background: #c5d3e2; transition: background .3s, box-shadow .45s var(--m-ease); }
.m-fxtile:is(:hover, :focus-visible) em { background: #ffd25a; box-shadow: 0 0 0 4px rgba(255,210,90,.3), 0 0 14px 4px rgba(255,210,90,.55); }
.m-fximg { border-radius: 10px; background: radial-gradient(circle at 50% 40%, #fff, #e6f0fa); }
.m-fxtile .m-q8tx small { color: #145891; }
.m-fxtile:is(:hover, :focus-visible) { border-color: #1a6fb8; box-shadow: 0 16px 30px rgba(15,34,54,.12); }
body.hv-fixture main section > .wrap > h2::after { content: ""; display: block; width: 96px; height: 6px; margin-top: 10px; border-radius: 3px; background: linear-gradient(90deg, #ffc98a, #fff2da 50%, #d4eaff); box-shadow: 0 0 0 1px #d6e2ee; }
body.hv-fixture .pcard:hover, body.hv-fixture .m-acard:hover { box-shadow: 0 0 0 2px #1a6fb8, 0 18px 40px rgba(15,34,54,.12); }
body.hv-fixture .m-cta .m-band { border-radius: 22px; background: radial-gradient(40% 90% at 86% 0%, rgba(255,201,138,.28), transparent 70%), linear-gradient(120deg, #0c1b2c, #13355a 55%, #1a6fb8); }
body.hv-fixture .m-cta .m-band::before { width: 170px; height: 170px; right: 30px; top: -50px; border-radius: 50%; background: radial-gradient(circle, rgba(255,242,218,.35), rgba(255,242,218,.04) 70%); }
body.hv-fixture .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(255,201,138,.22), transparent 70%), linear-gradient(120deg, #0c1b2c, #1a6fb8); } body.hv-fixture .m-page-hero .eyebrow { color: #ffd98f; }
body.hv-fixture footer.site { background: #0f2236; color: #dbe6f2; border: 0; } body.hv-fixture footer.site nav a { color: #9fcbf2; }
body.hv-fixture .m-collage .m-card { border-radius: 14px; }

/* dimmer (Legental): a squared pill with a small indicator LED; on hover the fill brightens left to right like a dimmer slider, the LED glows amber and the arrow steps forward */
body.bv-dimmer .btn { border-radius: 12px; padding: 15px 24px 15px 34px; letter-spacing: .01em; }
body.bv-dimmer :is(.btn.accent, .pcard .btn, .m-btn-main) { background: #1a6fb8; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px rgba(26,111,184,.3); }
body.bv-dimmer :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: #145891; color: #fff; }
body.bv-dimmer .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,236,190,.28) 70%, rgba(255,246,220,.5)); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--m-ease); }
body.bv-dimmer :is(.m-white, .m-btn-ghost, .btn.ghost)::before { background: linear-gradient(90deg, rgba(232,177,12,0), rgba(232,177,12,.18) 70%, rgba(232,177,12,.32)); }
body.bv-dimmer .btn:is(:hover, :focus-visible)::before { transform: scaleX(1); }
body.bv-dimmer .btn::after { inset: auto; left: 14px; top: 50%; width: 7px; height: 7px; border-radius: 50%; transform: translateY(-50%); background: rgba(255,255,255,.5); box-shadow: none; z-index: 1; transition: background .3s, box-shadow .3s; }
body.bv-dimmer :is(.m-white, .m-btn-ghost, .btn.ghost)::after { background: color-mix(in srgb, currentColor 45%, transparent); }
body.bv-dimmer .btn:is(:hover, :focus-visible)::after { transform: translateY(-50%); background: #ffd25a; box-shadow: 0 0 0 3px rgba(255,210,90,.3), 0 0 10px 3px rgba(255,210,90,.7); animation: m-dimled 1.4s ease-in-out infinite; }
body.bv-dimmer .btn .arr { display: inline-block; transition: transform .35s steps(3); } body.bv-dimmer .btn:hover .arr { transform: translateX(6px); }
body.bv-dimmer .m-cta .btn.m-white:hover { color: #145891; }
@keyframes m-dimled { 50% { box-shadow: 0 0 0 5px rgba(255,210,90,.15), 0 0 14px 5px rgba(255,210,90,.5); } }

/* saddlery (HESHE): a leather-goods atelier wall; a walnut peg rail with brass hooks, the real cognac sling bag sways on the middle hook beside the real wine hobo tote and brown flap satchel; a warm lamp glow breathes; a saddle stitch sews itself along the walnut counter while the needle runs ahead; a leather-colors card steps Cognac - Black - Wine - Green */
body.hv-saddlery .m-hero { background: radial-gradient(40% 52% at 76% 36%, #fffaf2, transparent 70%), radial-gradient(30% 40% at 2% 98%, rgba(138,75,42,.10), transparent 70%), linear-gradient(120deg, #f6ebdd, #fcf8f3 52%, #f3e3d3); }
body.hv-saddlery .m-hero h1 { letter-spacing: -.01em; }
body.hv-saddlery .m-hero .eyebrow { color: #6e3a1f; letter-spacing: .16em; }
.m-sy { aspect-ratio: 600 / 560; }
.m-sywall { position: absolute; inset: 0; border-radius: 28px; background: repeating-linear-gradient(90deg, rgba(110,58,31,.035) 0 1px, transparent 1px 13cqw), radial-gradient(70% 60% at 50% 0%, #fffaf1, transparent 70%), linear-gradient(180deg, #efe1cf, #e8d6c1); box-shadow: 0 26px 50px rgba(42,26,18,.16); animation: m-syin .9s .05s var(--m-ease) backwards; }
.m-sylamp { position: absolute; left: 50%; top: -4%; width: 90cqw; height: 70%; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,214,150,.55), transparent 75%); pointer-events: none; animation: m-syin 1s .2s var(--m-ease) backwards, m-syglow 6s 1.2s ease-in-out infinite; }
.m-syrail { position: absolute; left: 5%; right: 5%; top: 9%; height: 3.4%; z-index: 2; border-radius: 6px; background: linear-gradient(180deg, #8a5a3a, #5c3620 70%, #4a2a18); box-shadow: 0 8px 12px rgba(42,26,18,.25), inset 0 1px 0 rgba(255,255,255,.25); animation: m-syin .9s .15s var(--m-ease) backwards; }
.m-syrail i { position: absolute; top: 40%; width: 2.2cqw; height: 4.4cqw; translate: -50% 0; border: .8cqw solid #c99a3c; border-top: 0; border-radius: 0 0 2cqw 2cqw; filter: drop-shadow(0 2px 2px rgba(42,26,18,.3)); }
.m-sytote, .m-syflap, .m-sysling { position: absolute; display: block; z-index: 3; transition: transform .45s var(--m-ease); }
.m-sytote { left: 4.5%; top: 11.6%; width: 35%; transform-origin: 50% 0; filter: drop-shadow(0 16px 14px rgba(42,26,18,.25)); animation: m-syin 1s .3s var(--m-ease) backwards, m-syswing 7s 1.6s ease-in-out infinite; --a: 1.2deg; }
.m-syflap { left: 74%; top: 11.8%; width: 24%; transform-origin: 50% 0; filter: drop-shadow(0 14px 12px rgba(42,26,18,.25)); animation: m-syin 1s .4s var(--m-ease) backwards, m-syswing 6s 2s ease-in-out infinite; --a: -1.6deg; }
.m-sysling { left: 37.6%; top: 10.6%; width: 34%; z-index: 4; transform-origin: 60% 0; filter: drop-shadow(0 20px 16px rgba(42,26,18,.3)); animation: m-syin 1s .15s var(--m-ease) backwards, m-syswing 5.5s 1.2s ease-in-out infinite; --a: 2.2deg; }
.m-sytote:hover, .m-syflap:hover, .m-sysling:hover { transform: translateY(-5px); }
.m-sycounter { position: absolute; left: 0; right: 0; bottom: 0; height: 27%; z-index: 5; border-radius: 0 0 28px 28px; background: linear-gradient(180deg, #a06a44 0 5.5%, #7a4a2c 5.5% 11%, #6a3d23 14%, #5a321c); box-shadow: 0 -6px 14px rgba(42,26,18,.18); animation: m-syin .9s .1s var(--m-ease) backwards; }
.m-systitch { position: absolute; left: 3%; right: 3%; bottom: 21.6%; width: 94%; height: 3%; z-index: 6; overflow: visible; }
.m-systitch .th { fill: none; stroke: #f1d9a8; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1.4 .9; vector-effect: non-scaling-stroke; mask: none; clip-path: inset(0 100% 0 0); animation: m-sysew 7s 1.2s linear infinite; }
.m-syneedle { position: absolute; left: 3%; bottom: 22.3%; z-index: 7; width: 6cqw; height: .7cqw; min-height: 2px; border-radius: 0 50% 50% 0 / 0 50% 50% 0; background: linear-gradient(90deg, #b9bfc6, #eef1f4 60%, #9aa1a9); box-shadow: 0 1px 2px rgba(0,0,0,.3); animation: m-syneedle 7s 1.2s linear infinite; }
.m-syfin { position: absolute; left: 4%; bottom: 4%; z-index: 8; display: grid; gap: 1cqw; padding: 1.8cqw 2.4cqw 2cqw; border-radius: 14px; background: #fffaf3; border: 1.5px solid #e6d3bd; box-shadow: 0 12px 24px rgba(42,26,18,.22); animation: m-syin .9s .7s var(--m-ease) backwards; }
.m-syfin small { font: 700 clamp(8.5px, 1.8cqw, 11px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #6e3a1f; }
.m-syfl { display: flex; gap: .6cqw; }
.m-syfl i { display: flex; align-items: center; gap: 1cqw; padding: .8cqw 1.4cqw .8cqw .8cqw; border-radius: 999px; font: 600 clamp(10px, 2.2cqw, 13.5px)/1 var(--m-body); font-style: normal; color: #2a1a12; animation: m-systep 8s calc(1.4s + var(--i) * 2s) linear infinite; }
.m-syfl em { flex: none; width: 2.8cqw; min-width: 10px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d99a62, #9a5a2c); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #e6d3bd; }
.m-syfl i:nth-child(2) em { background: radial-gradient(circle at 35% 30%, #5a5450, #1c1816); } .m-syfl i:nth-child(3) em { background: radial-gradient(circle at 35% 30%, #c0404c, #6e1a24); } .m-syfl i:nth-child(4) em { background: radial-gradient(circle at 35% 30%, #5f8a5a, #2c4a2a); }
@keyframes m-syin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-syglow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes m-syswing { 0%, 100% { rotate: calc(var(--a) * -1); } 50% { rotate: var(--a); } }
@keyframes m-sysew { 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 70% { clip-path: inset(0 0 0 0); opacity: 1; } 88% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes m-syneedle { 0% { left: 3%; opacity: 1; } 70% { left: calc(97% - 6cqw); opacity: 1; } 78%, 100% { left: calc(97% - 6cqw); opacity: 0; } }
@keyframes m-systep { 0%, 22% { background: #f3e7da; box-shadow: inset 0 0 0 1.5px #c99a3c; } 25%, 100% { background: transparent; box-shadow: none; } }
.m-syspecs > span { color: #6e3a1f; }
.m-syspecs a { border-radius: 10px; border: 1.5px solid #e6d3bd; }
.m-syspecs b { border-radius: 7px; background: #8a4b2a; } .m-syspecs a:nth-of-type(3n+2) b { background: #2a1a12; } .m-syspecs a:nth-of-type(3n) b { background: #7a2a35; }
.m-syspecs a:is(:hover, :focus-visible) { border-color: #8a4b2a; }
.m-sytile { border-radius: 16px; border: 1.5px solid #e6d3bd; box-shadow: 0 10px 22px rgba(42,26,18,.06); }
.m-sytile em { width: 12px; height: 16px; border: 2.5px solid #c99a3c; border-radius: 3px; background: linear-gradient(#c99a3c, #c99a3c) center / 100% 2px no-repeat; transition: transform .45s var(--m-ease); }
.m-sytile:is(:hover, :focus-visible) em { transform: translateX(-4px); }
.m-syimg { border-radius: 12px; background: radial-gradient(circle at 50% 40%, #fff, #f3e7da); }
.m-sytile .m-q8tx small { color: #6e3a1f; }
.m-sytile:is(:hover, :focus-visible) { border-color: #8a4b2a; box-shadow: 0 16px 30px rgba(42,26,18,.12); }
body.hv-saddlery main section > .wrap > h2::after { content: ""; display: block; width: 110px; height: 4px; margin-top: 12px; background: linear-gradient(90deg, #8a4b2a 55%, transparent 0) 0 0 / 11px 100% repeat-x; border-radius: 2px; }
body.hv-saddlery .pcard:hover, body.hv-saddlery .m-acard:hover { box-shadow: 0 0 0 2px #8a4b2a, 0 18px 40px rgba(42,26,18,.12); }
body.hv-saddlery .m-cta .m-band { border-radius: 24px; background: radial-gradient(40% 90% at 86% 0%, rgba(201,154,60,.3), transparent 70%), linear-gradient(120deg, #2a1a12, #5a321c 55%, #8a4b2a); box-shadow: inset 0 0 0 6px rgba(42,26,18,.25), inset 0 0 0 7.5px rgba(241,217,168,.35); }
body.hv-saddlery .m-cta .m-band::before { width: 150px; height: 150px; right: 34px; top: -46px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,150,.3), rgba(255,214,150,.03) 70%); }
body.hv-saddlery .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(201,154,60,.25), transparent 70%), linear-gradient(120deg, #2a1a12, #8a4b2a); } body.hv-saddlery .m-page-hero .eyebrow { color: #f1d9a8; }
body.hv-saddlery footer.site { background: #2a1a12; color: #eadccb; border: 0; } body.hv-saddlery footer.site nav a { color: #f1d9a8; }
body.hv-saddlery .m-collage .m-card { border-radius: 16px; }
@media (max-width: 600px) { .m-syfl i { padding-right: 1cqw; } }

/* buckle (HESHE): a leather strap with a brass buckle frame at its start; on hover the strap tugs through the buckle (the frame slides and glints), the leather burnishes darker from the edges and the arrow steps forward */
body.bv-buckle .btn { border-radius: 10px; padding: 15px 24px 15px 42px; letter-spacing: .01em; }
body.bv-buckle :is(.btn.accent, .pcard .btn, .m-btn-main) { background: radial-gradient(120% 140% at 50% 50%, #9a5a34, #8a4b2a 55%, #6e3a1f); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(138,75,42,.3); }
body.bv-buckle :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: radial-gradient(120% 140% at 50% 50%, #8a4b2a, #6e3a1f 60%, #4a2614); color: #fff; }
body.bv-buckle .btn::before { content: ""; position: absolute; left: 7px; right: 7px; top: 5px; bottom: 5px; z-index: -1; pointer-events: none; border-radius: 6px; border: 1.5px dashed rgba(241,217,168,.0); transition: border-color .35s; }
body.bv-buckle .btn:is(:hover, :focus-visible)::before { border-color: rgba(241,217,168,.55); }
body.bv-buckle :is(.m-white, .m-btn-ghost, .btn.ghost):is(:hover, :focus-visible)::before { border-color: color-mix(in srgb, currentColor 40%, transparent); }
body.bv-buckle .btn::after { inset: auto; left: 15px; top: 50%; width: 15px; height: 19px; transform: translateY(-50%); box-sizing: border-box; border: 2.5px solid #d9b26a; border-radius: 4px; background: linear-gradient(#d9b26a, #d9b26a) center / 100% 2.5px no-repeat; z-index: 1; transition: left .35s var(--m-ease), filter .3s; }
body.bv-buckle .btn:is(:hover, :focus-visible)::after { transform: translateY(-50%); left: 18px; filter: brightness(1.25) drop-shadow(0 0 3px rgba(255,220,150,.8)); animation: m-tug .5s var(--m-ease); }
body.bv-buckle :is(.m-white, .m-btn-ghost, .btn.ghost)::after { border-color: #a8742e; background: linear-gradient(#a8742e, #a8742e) center / 100% 2.5px no-repeat; }
body.bv-buckle .btn .arr { display: inline-block; transition: transform .35s var(--m-ease); } body.bv-buckle .btn:hover .arr { transform: translateX(5px); }
body.bv-buckle .m-cta .btn.m-white:hover { color: #6e3a1f; }
@keyframes m-tug { 0% { left: 15px; } 45% { left: 21px; } 100% { left: 18px; } }
@media (min-width: 901px) and (max-width: 1100px) { :is(body.hv-saddlery, body.hv-flatlay) header.site nav a { padding: 8px 5px; font-size: 12.5px; } }

/* flatlay (Michel Design Works): a botanical flat lay on linen; two hand-drawn sprigs sketch themselves and their leaves fill in, the real lemon cocktail napkin lies at a tilt under the real Lavender Rosemary soap bar, a gold wax seal stamps down, the real Lemon Basil foaming soap stands at the side with foam bubbles drifting up from the pump; a match-by-scent card steps through four scents */
body.hv-flatlay .m-hero { background: radial-gradient(40% 52% at 76% 38%, #fffef8, transparent 70%), radial-gradient(30% 40% at 2% 98%, rgba(91,127,74,.10), transparent 70%), linear-gradient(120deg, #eef2e6, #fbfaf5 52%, #fbf3dc); }
body.hv-flatlay .m-hero h1 { letter-spacing: -.005em; font-size: clamp(36px, 4.3vw, 60px) !important; line-height: 1.04 !important; }
body.hv-flatlay .m-hero .eyebrow { color: #3c5a31; letter-spacing: .16em; }
.m-ft { aspect-ratio: 600 / 560; isolation: isolate; }
.m-ftcloth { position: absolute; inset: 0; border-radius: 28px; background: repeating-linear-gradient(0deg, rgba(120,104,70,.05) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(120,104,70,.045) 0 1px, transparent 1px 4px), radial-gradient(70% 60% at 60% 30%, #fffdf6, transparent 70%), linear-gradient(160deg, #f6f1e4, #efe8d6); box-shadow: 0 26px 50px rgba(31,42,28,.14), inset 0 0 0 10px rgba(255,255,255,.35), inset 0 0 0 11px rgba(91,127,74,.18); animation: m-ftin .9s .05s var(--m-ease) backwards; }
.m-ftsprig { position: absolute; z-index: 1; width: 27%; height: auto; overflow: visible; pointer-events: none; }
.m-ftsprig.s1 { right: 1%; top: 2%; width: 15%; rotate: 4deg; }
.m-ftsprig.s2 { left: 50%; bottom: 3%; width: 12%; rotate: -14deg; }
.m-ftsprig .st { fill: none; stroke: #5b7f4a; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: m-ftdraw 1.8s .6s var(--m-ease) forwards; }
.m-ftsprig .lf { fill: rgba(124,160,102,0); stroke: #5b7f4a; stroke-width: 1.6; stroke-dasharray: 100; stroke-dashoffset: 100; animation: m-ftdraw 1s calc(1.1s + var(--i) * .12s) var(--m-ease) forwards, m-ftfill .8s calc(2.2s + var(--i) * .1s) ease forwards; }
.m-ftsprig.s2 .lf { animation-delay: calc(1.5s + var(--i) * .12s), calc(2.6s + var(--i) * .1s); }
.m-ftnap, .m-ftbar, .m-ftfoam { position: absolute; display: block; transition: transform .45s var(--m-ease); }
.m-ftnap { left: 6%; top: 8%; width: 46%; z-index: 2; rotate: -6deg; box-shadow: 0 14px 26px rgba(31,42,28,.18), 0 2px 4px rgba(31,42,28,.1); animation: m-ftin 1s .2s var(--m-ease) backwards; }
.m-ftnap img { outline: 1px solid rgba(0,0,0,.06); outline-offset: -1px; }
.m-ftbar { left: 7%; top: 55%; width: 44%; z-index: 3; rotate: 4deg; filter: drop-shadow(0 14px 12px rgba(31,42,28,.22)); animation: m-ftin 1s .35s var(--m-ease) backwards; }
.m-ftseal { position: absolute; left: 41%; top: 44%; z-index: 4; display: grid; place-items: center; width: 11cqw; min-width: 36px; aspect-ratio: 1; border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%; font: 400 clamp(16px, 5cqw, 30px)/1 Georgia, serif; font-style: normal; color: #7a5a14; background: radial-gradient(circle at 38% 34%, #f6dc8a, #d9b04a 45%, #a9801f 80%); box-shadow: inset 0 0 0 .9cqw rgba(255,240,190,.35), inset 0 -2px 3px rgba(90,60,0,.35), 0 6px 12px rgba(90,60,0,.3); text-shadow: 0 1px 0 rgba(255,240,190,.6); animation: m-ftstamp .7s 1.4s cubic-bezier(.3,1.6,.5,1) backwards; }
.m-ftshadow { position: absolute; left: 57%; top: 63%; width: 26%; height: 4%; z-index: 3; border-radius: 50%; background: radial-gradient(closest-side, rgba(31,42,28,.28), transparent); animation: m-ftin 1s .15s var(--m-ease) backwards; }
.m-ftfoam { left: 57%; top: 3.5%; width: 26%; z-index: 4; mix-blend-mode: multiply; animation: m-ftin 1s .1s var(--m-ease) backwards; }
.m-ftfoamimg { display: block; }
.m-ftfoam:hover { transform: translateY(-6px); } .m-ftnap:hover, .m-ftbar:hover { transform: translateY(-5px); }
.m-ftbub { position: absolute; left: 67%; top: 5%; z-index: 5; width: 0; height: 0; pointer-events: none; }
.m-ftbub i { position: absolute; left: var(--x); top: 0; width: var(--s); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 25%, rgba(255,255,255,.55) 40%, rgba(214,232,200,.4) 70%, rgba(91,127,74,.25)); box-shadow: inset 0 0 0 1px rgba(91,127,74,.25); opacity: 0; animation: m-ftrise 4.4s calc(1.6s + var(--d)) ease-out infinite; }
.m-ftscent { position: absolute; right: 4%; bottom: 4.5%; z-index: 6; display: grid; gap: 1cqw; padding: 2cqw 2.4cqw; border-radius: 16px; background: rgba(255,254,248,.94); border: 1.5px solid #dfe6d2; box-shadow: 0 14px 28px rgba(31,42,28,.16); animation: m-ftin .9s .8s var(--m-ease) backwards; }
.m-ftscent small { font: 700 clamp(8.5px, 1.8cqw, 11px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #3c5a31; }
.m-ftsl { display: grid; gap: .4cqw; }
.m-ftsl i { display: flex; align-items: center; gap: 1.3cqw; padding: .8cqw 1.8cqw .8cqw .9cqw; border-radius: 999px; font: 600 clamp(10.5px, 2.3cqw, 14px)/1 var(--m-body); font-style: normal; color: #1f2a1c; animation: m-ftstep 8s calc(2s + var(--i) * 2s) linear infinite; }
.m-ftsl em { flex: none; width: 2.6cqw; min-width: 10px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3a0, #e3b830 70%); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #dfe6d2; }
.m-ftsl i:nth-child(2) em { background: radial-gradient(circle at 35% 30%, #d9cff5, #8a7bc8 70%); } .m-ftsl i:nth-child(3) em { background: radial-gradient(circle at 35% 30%, #fff, #2a2a2a 75%); } .m-ftsl i:nth-child(4) em { background: radial-gradient(circle at 35% 30%, #ffe1e8, #d9788c 70%); }
@keyframes m-ftin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-ftdraw { to { stroke-dashoffset: 0; } }
@keyframes m-ftfill { to { fill: rgba(124,160,102,.55); } }
@keyframes m-ftstamp { 0% { opacity: 0; scale: 1.8; rotate: -25deg; } 60% { opacity: 1; scale: .9; } 100% { scale: 1; rotate: 0deg; } }
@keyframes m-ftrise { 0% { opacity: 0; translate: 0 0; scale: .5; } 15% { opacity: .95; } 100% { opacity: 0; translate: 1.5cqw -9cqw; scale: 1.1; } }
@keyframes m-ftstep { 0%, 22% { background: #eef2e6; box-shadow: inset 0 0 0 1.5px #b9cba9; } 25%, 100% { background: transparent; box-shadow: none; } }
.m-ftspecs > span { color: #3c5a31; }
.m-ftspecs a { border-radius: 999px; border: 1.5px solid #dfe6d2; }
.m-ftspecs b { border-radius: 999px; background: #4e7140; } .m-ftspecs a:nth-of-type(3n+2) b { background: #1f2a1c; } .m-ftspecs a:nth-of-type(3n) b { background: #8a6a1c; }
.m-ftspecs a:is(:hover, :focus-visible) { border-color: #4e7140; }
.m-fttile { border-radius: 18px; border: 1.5px solid #dfe6d2; box-shadow: 0 10px 22px rgba(31,42,28,.06); }
.m-fttile em { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #f6dc8a, #d9b04a 50%, #a9801f); box-shadow: 0 0 0 3px rgba(217,176,74,.2); transition: transform .45s var(--m-ease), box-shadow .45s var(--m-ease); }
.m-fttile:is(:hover, :focus-visible) em { transform: rotate(-20deg) scale(1.15); box-shadow: 0 0 0 6px rgba(217,176,74,.18); }
.m-ftimg { border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff, #eef2e6); }
.m-fttile .m-q8tx small { color: #3c5a31; }
.m-fttile:is(:hover, :focus-visible) { border-color: #4e7140; box-shadow: 0 16px 30px rgba(31,42,28,.12); }
body.hv-flatlay main section > .wrap > h2::after { content: ""; display: block; width: 120px; height: 14px; margin-top: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M2 7H118' stroke='%235b7f4a' stroke-width='1.6'/%3E%3Cpath d='M30 7C34 1 42 1 46 7C42 13 34 13 30 7ZM74 7C78 1 86 1 90 7C86 13 78 13 74 7Z' fill='%237ca066'/%3E%3Ccircle cx='60' cy='7' r='4' fill='%23d9b04a'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
body.hv-flatlay .pcard:hover, body.hv-flatlay .m-acard:hover { box-shadow: 0 0 0 2px #4e7140, 0 18px 40px rgba(31,42,28,.12); }
body.hv-flatlay .m-cta .m-band { border-radius: 26px; background: radial-gradient(40% 90% at 86% 0%, rgba(227,184,48,.25), transparent 70%), linear-gradient(120deg, #1f2a1c, #2f4626 55%, #4e7140); }
body.hv-flatlay .m-cta .m-band::before { width: 150px; height: 150px; right: 34px; top: -46px; border-radius: 50%; background: radial-gradient(circle, rgba(246,220,138,.3), rgba(246,220,138,.03) 70%); }
body.hv-flatlay .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(227,184,48,.22), transparent 70%), linear-gradient(120deg, #1f2a1c, #4e7140); } body.hv-flatlay .m-page-hero .eyebrow { color: #f6dc8a; }
body.hv-flatlay footer.site { background: #1f2a1c; color: #e3e8da; border: 0; } body.hv-flatlay footer.site nav a { color: #cfe0bf; }
body.hv-flatlay .m-collage .m-card { border-radius: 18px; }

/* seal (Michel Design Works): a soft pill with a gold wax seal at its start; on hover the seal lifts and stamps back down with a twist, a gold ring ripples out from it and the arrow eases forward */
body.bv-seal .btn { border-radius: 999px; padding: 15px 26px 15px 46px; letter-spacing: .01em; }
body.bv-seal :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(120deg, #557a45, #4e7140 50%, #44653a); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px rgba(78,113,64,.3); }
body.bv-seal :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(120deg, #4e7140, #3c5a31 60%, #324b29); color: #fff; }
body.bv-seal .btn::after { inset: auto; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%; background: radial-gradient(circle at 38% 34%, #f6dc8a, #d9b04a 50%, #a9801f); box-shadow: inset 0 0 0 3px rgba(255,240,190,.35), 0 2px 4px rgba(60,40,0,.3); z-index: 1; transition: none; }
body.bv-seal .btn:is(:hover, :focus-visible)::after { transform: translateY(-50%); animation: m-sealstamp .55s cubic-bezier(.3,1.6,.5,1); }
body.bv-seal .btn::before { content: ""; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; z-index: 0; border-radius: 50%; border: 2px solid rgba(246,220,138,.8); opacity: 0; pointer-events: none; }
body.bv-seal .btn:is(:hover, :focus-visible)::before { animation: m-sealring .9s .2s ease-out; }
body.bv-seal .btn .arr { display: inline-block; transition: transform .4s var(--m-ease); } body.bv-seal .btn:hover .arr { transform: translateX(5px); }
body.bv-seal .m-cta .btn.m-white:hover { color: #3c5a31; }
@keyframes m-sealstamp { 0% { scale: 1; rotate: 0deg; } 35% { scale: 1.35; rotate: -18deg; } 70% { scale: .88; } 100% { scale: 1; rotate: 0deg; } }
@keyframes m-sealring { 0% { opacity: .9; scale: 1; } 100% { opacity: 0; scale: 2.6; } }

/* ===== batch 13.11.2026 (4): carryall/zippull (Prite), mantel (Leoben), brunch (MyMini); shared layout for these heroes ===== */
:is(body.hv-carryall, body.hv-mantel, body.hv-brunch) .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); color: var(--m-ink); }
:is(body.hv-carryall, body.hv-mantel, body.hv-brunch) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:is(body.hv-carryall, body.hv-mantel, body.hv-brunch) .m-hero .m-copy > * { animation: m-rise .8s var(--m-ease) both; }
:is(body.hv-carryall, body.hv-mantel, body.hv-brunch) .m-hero .m-copy > :nth-child(3) { animation-delay: .08s; } :is(body.hv-carryall, body.hv-mantel, body.hv-brunch) .m-hero .m-copy > :nth-child(4) { animation-delay: .16s; } :is(body.hv-carryall, body.hv-mantel, body.hv-brunch) .m-hero .m-copy > :nth-child(n+5) { animation-delay: .24s; }
:is(body.hv-carryall, body.hv-mantel, body.hv-brunch) .m-hero h1 { color: var(--m-ink) !important; text-wrap: balance; max-width: 18ch; font-size: clamp(32px, 3.8vw, 54px) !important; line-height: 1.1 !important; }
:is(body.hv-carryall, body.hv-mantel, body.hv-brunch) .m-hero .bgcredit { display: none; }
:is(body.hv-carryall, body.hv-mantel, body.hv-brunch) .m-hero .sub { color: var(--m-body-ink); }
:is(body.hv-carryall, body.hv-mantel, body.hv-brunch) .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: var(--m-ink) !important; background: rgba(255,255,255,.7) !important; }
:is(body.hv-carryall, body.hv-mantel, body.hv-brunch) .m-hero .m-btn-ghost:hover { background: var(--m-ink) !important; color: #fff !important; }
:is(body.hv-carryall, body.hv-mantel, body.hv-brunch) .m-hero .m-chips span { background: #fff; color: var(--m-ink); border: 1.5px solid color-mix(in srgb, var(--m-ink) 14%, transparent); backdrop-filter: none; }
:is(.m-cy, .m-ml, .m-bh) { position: relative; width: min(100%, 600px); justify-self: center; container-type: inline-size; }
:is(.m-cy, .m-ml, .m-bh) a { -webkit-tap-highlight-color: transparent; }
:is(.m-cy, .m-ml, .m-bh) img { display: block; width: 100%; height: auto; border-radius: 0; }
:is(.m-cycats, .m-mlcats, .m-bhcats) { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; padding: 10px clamp(18px, 4vw, 72px) clamp(26px, 4vh, 44px); }
:is(.m-cytile, .m-mltile, .m-bhtile) { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; padding: 14px 14px 12px 12px; background: #fff; color: var(--m-ink) !important; overflow: hidden; animation: m-rise .7s calc(.8s + var(--i, 0) * .08s) var(--m-ease) backwards; transition: transform .4s var(--m-ease), border-color .3s, box-shadow .3s, background .3s; }
:is(.m-cyimg, .m-mlimg, .m-bhimg) { flex: none; display: block; overflow: hidden; width: 58px; height: 58px; padding: 4px; }
:is(.m-cyimg, .m-mlimg, .m-bhimg) img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; transition: transform .45s var(--m-ease); }
:is(.m-cytile, .m-mltile, .m-bhtile):hover :is(.m-cyimg, .m-mlimg, .m-bhimg) img { transform: scale(1.08) rotate(-4deg); }
:is(.m-cytile, .m-mltile, .m-bhtile):focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; }
:is(.m-cytile, .m-mltile, .m-bhtile):is(:hover, :focus-visible) { transform: translateY(-4px); }
:is(.m-cytile, .m-mltile, .m-bhtile) .m-q8tx b { font: 700 15px/1.2 var(--m-body); color: var(--m-ink); padding-right: 22px; }
:is(.m-cytile, .m-mltile, .m-bhtile) em { position: absolute; right: 11px; top: 10px; font-style: normal; }
:is(.m-cyspecs, .m-mlspecs, .m-bhspecs) { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -6px 0 18px; }
:is(.m-cyspecs, .m-mlspecs, .m-bhspecs) > span { flex-basis: 100%; margin: 0 0 2px; font: 700 12px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; }
:is(.m-cyspecs, .m-mlspecs, .m-bhspecs) a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; background: #fff; color: var(--m-ink) !important; text-decoration: none; transition: background .25s, border-color .25s, transform .3s var(--m-ease), box-shadow .3s; animation: m-rise .6s calc(.45s + var(--i, 0) * .06s) var(--m-ease) backwards; }
:is(.m-cyspecs, .m-mlspecs, .m-bhspecs) a:is(:hover, :focus-visible) { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,24,40,.12); }
:is(.m-cyspecs, .m-mlspecs, .m-bhspecs) b { display: grid; place-items: center; min-width: 40px; height: 28px; padding: 0 10px; color: #fff; font: 700 13px/1 var(--m-body); white-space: nowrap; }
:is(.m-cyspecs, .m-mlspecs, .m-bhspecs) small { font: 600 12.5px/1 var(--m-body); white-space: nowrap; color: var(--m-body-ink); }
:is(body.hv-carryall, body.hv-mantel, body.hv-brunch) .m-acard .m-art { position: relative; background: #fff !important; border-bottom: 1px solid color-mix(in srgb, var(--m-ink) 7%, transparent); }
:is(body.hv-carryall, body.hv-mantel, body.hv-brunch) .m-acard .m-art img { position: absolute; left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); max-height: none; object-fit: contain; border-radius: 0; }
@media (max-width: 900px) {
  :is(body.hv-carryall, body.hv-mantel, body.hv-brunch) .m-hero { min-height: 0; }
  :is(body.hv-carryall, body.hv-mantel, body.hv-brunch) .m-hero .m-inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  :is(body.hv-carryall, body.hv-mantel, body.hv-brunch) .m-hero .m-copy { display: contents; }
  :is(body.hv-carryall, body.hv-mantel, body.hv-brunch) .m-hero .m-copy > * { order: 1; }
  :is(body.hv-carryall, body.hv-mantel, body.hv-brunch) .m-hero .m-copy > :is(.m-ctas, nav, .m-chips) { order: 3; }
  :is(.m-cy, .m-ml, .m-bh) { order: 2; width: min(100%, 520px); align-self: center; margin: 8px 0 4px; }
  :is(.m-cycats, .m-mlcats, .m-bhcats) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-cycats, .m-mlcats, .m-bhcats) > a:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  :is(.m-cyspecs, .m-mlspecs, .m-bhspecs) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-cyspecs, .m-mlspecs, .m-bhspecs) > span { grid-column: 1 / -1; }
  :is(.m-cyspecs, .m-mlspecs, .m-bhspecs) a { flex-direction: column; align-items: flex-start; gap: 5px; padding: 6px 10px 8px 6px; border-radius: 12px; }
  :is(.m-cyspecs, .m-mlspecs, .m-bhspecs) small { white-space: normal; line-height: 1.2; padding-left: 2px; }
}
@media (max-width: 420px) {
  :is(.m-cytile, .m-mltile, .m-bhtile) { gap: 9px; padding: 10px; } :is(.m-cyimg, .m-mlimg, .m-bhimg) { width: 44px; height: 44px; }
  :is(.m-cytile, .m-mltile, .m-bhtile) .m-q8tx b { font-size: 13px; padding-right: 0; } :is(.m-cytile, .m-mltile, .m-bhtile) em { display: none; }
}


/* carryall (Prite): a ribbed corduroy wall above a camel-leather vanity shelf; a zipper along the top glides open and shut over a strawberry-pink lining, the real pink polka-dot corduroy tote and the real black crescent crossbody hang on brass pegs and sway, a leather hang tag swings; the real strawberry corduroy makeup bag sits on the shelf and bobs; a pick-a-carry card steps Makeup bag - Corduroy tote - Crescent crossbody */
body.hv-carryall .m-hero { background: radial-gradient(40% 52% at 76% 38%, #fffaf4, transparent 70%), radial-gradient(30% 40% at 2% 98%, rgba(181,131,90,.12), transparent 70%), linear-gradient(120deg, #f4eadf, #fcf8f3 52%, #f9e9e6); }
body.hv-carryall .m-hero h1 { letter-spacing: -.012em; }
body.hv-carryall .m-hero .eyebrow { color: #8c6546; letter-spacing: .16em; }
.m-cy { aspect-ratio: 600 / 560; isolation: isolate; }
.m-cywall { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; background: radial-gradient(70% 55% at 50% 18%, rgba(255,250,242,.6), transparent 70%), repeating-linear-gradient(90deg, #e6d1b8 0, #f2e4d2 .7cqw, #dcc3a6 1.5cqw, #e6d1b8 1.6cqw); box-shadow: 0 26px 50px rgba(43,32,25,.16), inset 0 0 0 1px rgba(43,32,25,.06); animation: m-cyin .9s .05s var(--m-ease) backwards; }
.m-cyzip { position: absolute; left: 6%; right: 6%; top: 5%; height: 3.4%; z-index: 2; border-radius: 6px; background: linear-gradient(180deg, #c99a70, #b5835a); box-shadow: 0 3px 6px rgba(43,32,25,.18); animation: m-cyin .9s .2s var(--m-ease) backwards; }
.m-cyzip::before { content: ""; position: absolute; left: 1%; right: 1%; top: 50%; height: 1.4cqw; translate: 0 -50%; background: repeating-linear-gradient(90deg, #e9c77e 0 .8cqw, transparent .8cqw 1.3cqw); }
.m-cygap { position: absolute; left: 1%; top: 50%; width: 0; height: 2.2cqw; translate: 0 -50%; border-radius: 0 50% 50% 0 / 0 50% 50% 0; background: linear-gradient(180deg, #d9485f, #f2a3b1 50%, #d9485f); box-shadow: 0 -.5cqw 0 -.1cqw #e9c77e, 0 .5cqw 0 -.1cqw #e9c77e; animation: m-cygap 9s 1.2s var(--m-ease) infinite; }
.m-cypull { position: absolute; left: -1.5cqw; top: 50%; width: 4cqw; height: 2.8cqw; translate: 0 -50%; border-radius: 1cqw; background: linear-gradient(180deg, #f6dc9a, #c99a3c 60%, #9a7428); box-shadow: 0 2px 3px rgba(43,32,25,.35); animation: m-cypull 9s 1.2s var(--m-ease) infinite; }
.m-cypull::after { content: ""; position: absolute; left: 50%; top: 70%; width: 2cqw; height: 4.4cqw; translate: -50% 0; border-radius: .5cqw .5cqw 1cqw 1cqw; background: linear-gradient(180deg, #d9485f, #b0344a); box-shadow: inset 0 0 0 .35cqw rgba(255,255,255,.18), 0 2px 3px rgba(43,32,25,.3); transform-origin: 50% 0; animation: m-cytab 9s 1.2s ease-in-out infinite; }
.m-cypegs { position: absolute; left: 0; right: 0; top: 13%; height: 0; z-index: 5; }
.m-cypegs i { position: absolute; top: -1.5cqw; width: 3cqw; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f6dc9a, #c99a3c 55%, #8a6420); box-shadow: 0 3px 4px rgba(43,32,25,.3); animation: m-cyin .8s .25s var(--m-ease) backwards; }
.m-cytote, .m-cycres, .m-cymake { position: absolute; display: block; transition: transform .45s var(--m-ease); }
.m-cytote { left: 10%; top: 12.6%; width: 30%; z-index: 4; transform-origin: 50% 0; filter: drop-shadow(0 16px 14px rgba(43,32,25,.22)); --a: 1.5deg; animation: m-cyin 1s .3s var(--m-ease) backwards, m-cyswing 6.5s 1.4s ease-in-out infinite; }
.m-cycres { left: 64%; top: 12.4%; width: 30%; z-index: 4; transform-origin: 48% 0; filter: drop-shadow(0 16px 14px rgba(43,32,25,.25)); --a: -2deg; animation: m-cyin 1s .4s var(--m-ease) backwards, m-cyswing 5.6s 1.8s ease-in-out infinite; }
.m-cytag { position: absolute; left: 38.5%; top: 23%; z-index: 5; padding: .9cqw 1.6cqw .9cqw 2.6cqw; border-radius: .8cqw 1.4cqw 1.4cqw .8cqw; font: italic 600 clamp(9px, 2.1cqw, 13px)/1 var(--m-head); color: #fff4e6; background: linear-gradient(180deg, #9a6b45, #7a5236); box-shadow: 0 4px 8px rgba(43,32,25,.25), inset 0 0 0 .3cqw rgba(255,244,230,.15); transform-origin: -3cqw -3cqw; animation: m-cyin .9s .6s var(--m-ease) backwards, m-cytagsw 4.2s 1.6s ease-in-out infinite; }
.m-cytag::before { content: ""; position: absolute; left: .9cqw; top: 50%; width: 1cqw; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; background: #f4eadf; box-shadow: inset 0 0 0 .25cqw #c99a3c; }
.m-cytag::after { content: ""; position: absolute; left: 1.4cqw; bottom: 50%; width: 3.6cqw; height: 4.6cqw; border-left: .3cqw solid #8a6420; border-top: .3cqw solid #8a6420; border-radius: 3cqw 0 0 0; transform: rotate(14deg); transform-origin: 0 100%; }
.m-cyshelf { position: absolute; left: 0; right: 0; bottom: 0; height: 29%; z-index: 5; border-radius: 0 0 28px 28px; background: linear-gradient(180deg, #d4a179 0 5%, #9a6b45 5% 9%, #b5835a 9% 60%, #a3744f); box-shadow: 0 -6px 14px rgba(43,32,25,.14); animation: m-cyin .9s .1s var(--m-ease) backwards; }
.m-cyshelf::before { content: ""; position: absolute; left: 3%; right: 3%; top: 17%; border-top: 2px dashed rgba(255,240,222,.55); }
.m-cymake { left: 37%; bottom: 8%; width: 45%; z-index: 6; filter: drop-shadow(0 18px 16px rgba(43,32,25,.3)); animation: m-cyin 1s .15s var(--m-ease) backwards, m-cybob 5s 1.4s ease-in-out infinite; }
.m-cytote:hover, .m-cycres:hover, .m-cymake:hover { transform: translateY(-6px); }
.m-cycard { position: absolute; left: 3.5%; bottom: 4.5%; z-index: 7; display: grid; gap: 1cqw; padding: 1.8cqw 2.2cqw 2cqw; border-radius: 14px; background: #fffaf4; border: 1.5px solid #ead9c6; box-shadow: 0 12px 24px rgba(43,32,25,.2); animation: m-cyin .9s .7s var(--m-ease) backwards; }
.m-cycard small { font: 700 clamp(8.5px, 1.8cqw, 11px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #8c6546; }
.m-cycl { display: grid; gap: .4cqw; }
.m-cycl i { display: flex; align-items: center; gap: 1.2cqw; padding: .8cqw 1.6cqw .8cqw .8cqw; border-radius: 999px; font: 600 clamp(10px, 2.2cqw, 13.5px)/1 var(--m-body); font-style: normal; color: #2b2019; white-space: nowrap; animation: m-cystep 9s calc(1.6s + var(--i) * 3s) linear infinite; }
.m-cycl em { flex: none; width: 2.6cqw; min-width: 10px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd6dd, #d9485f 70%); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #ead9c6; }
.m-cycl i:nth-child(2) em { background: repeating-linear-gradient(90deg, #f2b6bf 0 2px, #e79aa6 2px 3px); } .m-cycl i:nth-child(3) em { background: radial-gradient(circle at 35% 30%, #6b6f78, #1c1f26 70%); }
@keyframes m-cyin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-cyswing { 0%, 100% { rotate: calc(var(--a) * -1); } 50% { rotate: var(--a); } }
@keyframes m-cytagsw { 0%, 100% { rotate: -6deg; } 50% { rotate: 7deg; } }
@keyframes m-cybob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.2cqw; } }
@keyframes m-cygap { 0%, 4% { width: 0; } 42%, 58% { width: 86%; } 94%, 100% { width: 0; } }
@keyframes m-cypull { 0%, 4% { left: -1.5cqw; } 42%, 58% { left: calc(86% - 1.5cqw); } 94%, 100% { left: -1.5cqw; } }
@keyframes m-cytab { 0%, 4%, 58% { rotate: 0deg; } 20% { rotate: 14deg; } 46% { rotate: -8deg; } 76% { rotate: -14deg; } 96% { rotate: 6deg; } 100% { rotate: 0deg; } }
@keyframes m-cystep { 0%, 30% { background: #f9e9e6; box-shadow: inset 0 0 0 1.5px #e8a4b0; } 33.3%, 100% { background: transparent; box-shadow: none; } }
.m-cyspecs > span { color: #8c6546; }
.m-cyspecs a { border-radius: 999px; border: 1.5px solid #ead9c6; }
.m-cyspecs b { border-radius: 999px; background: #8c6546; } .m-cyspecs a:nth-of-type(3n+2) b { background: #2b2019; } .m-cyspecs a:nth-of-type(3n) b { background: #b8384f; }
.m-cyspecs a:is(:hover, :focus-visible) { border-color: #8c6546; }
.m-cytile { border-radius: 16px; border: 1.5px solid #ead9c6; box-shadow: 0 10px 22px rgba(43,32,25,.06); }
.m-cytile em { width: 9px; height: 14px; border-radius: 3px 3px 5px 5px; background: linear-gradient(180deg, #f6dc9a, #c99a3c 60%, #9a7428); box-shadow: 0 1px 2px rgba(43,32,25,.3); transform-origin: 50% 0; transition: transform .45s var(--m-ease); }
.m-cytile:is(:hover, :focus-visible) em { transform: rotate(-24deg) translateX(-2px); }
.m-cyimg { border-radius: 12px; background: repeating-linear-gradient(90deg, #f6ece1 0 4px, #fbf5ee 4px 7px); }
.m-cytile .m-q8tx small { color: #8c6546; }
.m-cytile:is(:hover, :focus-visible) { border-color: #8c6546; box-shadow: 0 16px 30px rgba(43,32,25,.12); }
body.hv-carryall main section > .wrap > h2::after { content: ""; display: block; width: 116px; height: 8px; margin-top: 10px; border-radius: 4px; background: repeating-linear-gradient(90deg, #c99a3c 0 4px, transparent 4px 7px) center / 100% 4px no-repeat, #b5835a; }
body.hv-carryall .pcard:hover, body.hv-carryall .m-acard:hover { box-shadow: 0 0 0 2px #8c6546, 0 18px 40px rgba(43,32,25,.12); }
body.hv-carryall .m-cta .m-band { border-radius: 24px; background: radial-gradient(40% 90% at 86% 0%, rgba(232,164,176,.28), transparent 70%), linear-gradient(120deg, #2b2019, #5a3e2b 55%, #8c6546); }
body.hv-carryall .m-cta .m-band::before { width: 150px; height: 150px; right: 34px; top: -46px; border-radius: 50%; background: radial-gradient(circle, rgba(246,220,154,.3), rgba(246,220,154,.03) 70%); }
body.hv-carryall .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(232,164,176,.25), transparent 70%), linear-gradient(120deg, #2b2019, #8c6546); } body.hv-carryall .m-page-hero .eyebrow { color: #f6dc9a; }
body.hv-carryall footer.site { background: #2b2019; color: #efe2d4; border: 0; } body.hv-carryall footer.site nav a { color: #f2c9a6; }
body.hv-carryall .m-collage .m-card { border-radius: 16px; }

/* zippull (Prite): a soft rectangle with a row of zipper teeth along its lower edge; on hover a gold pull slides along the teeth, the teeth behind it turn gold as if zipping shut, and the arrow steps forward */
body.bv-zippull .btn { border-radius: 12px; padding: 15px 26px 18px; letter-spacing: .01em; }
body.bv-zippull :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #96704f, #8c6546 55%, #7e5a3e); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 24px rgba(140,101,70,.3); }
body.bv-zippull :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #8c6546, #6e4e35 60%, #5e422c); color: #fff; }
body.bv-zippull .btn::before { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 3px; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #f3d48a, #f3d48a) 0 0 / 0% 100% no-repeat, color-mix(in srgb, currentColor 32%, transparent); -webkit-mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 6px); mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 6px); transition: background-size .6s var(--m-ease); }
body.bv-zippull .btn:is(:hover, :focus-visible)::before { background-size: 100% 100%, auto; }
body.bv-zippull :is(.m-white, .m-btn-ghost, .btn.ghost)::before { background: linear-gradient(90deg, #c99a3c, #c99a3c) 0 0 / 0% 100% no-repeat, color-mix(in srgb, currentColor 30%, transparent); }
body.bv-zippull .btn::after { inset: auto; left: 10px; bottom: 2px; width: 9px; height: 9px; transform: none; border-radius: 2px 2px 4px 4px; background: linear-gradient(180deg, #f6dc9a, #c99a3c 60%, #9a7428); box-shadow: 0 1px 2px rgba(0,0,0,.3); z-index: 1; transition: left .6s var(--m-ease); }
body.bv-zippull .btn:is(:hover, :focus-visible)::after { transform: none; left: calc(100% - 19px); }
body.bv-zippull .btn .arr { display: inline-block; transition: transform .35s var(--m-ease) .15s; } body.bv-zippull .btn:hover .arr { transform: translateX(5px); }
body.bv-zippull .m-cta .btn.m-white:hover { color: #6e4e35; }

/* mantel (LEOBEN COMPANY): a dark green paneled wall over a walnut mantel at dusk; candlelight breathes on the wall and in an arched brass mirror, the real lit Prism cut-glass candle flickers (a soft flame and halo over its real flame) while thin smoke wisps curl up; the real amber Vanilla Cedarwood Heirloom jar, the real black Masculine jar and the real amber Dayroom jar stand on the shelf; a brass plaque on the mantel; a listed-burn-time card fills 6 oz - 9 oz - 18 oz in turn */
body.hv-mantel .m-hero { background: radial-gradient(40% 52% at 76% 40%, #fff8ea, transparent 70%), radial-gradient(30% 40% at 2% 98%, rgba(47,59,51,.10), transparent 70%), linear-gradient(120deg, #eceee6, #faf8f3 52%, #f6ecdc); }
body.hv-mantel .m-hero h1 { letter-spacing: -.012em; }
body.hv-mantel .m-hero .eyebrow { color: #2f3b33; letter-spacing: .16em; }
.m-ml { aspect-ratio: 600 / 560; isolation: isolate; }
.m-mlwall { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; background: repeating-linear-gradient(90deg, transparent 0 24.6cqw, rgba(0,0,0,.18) 24.6cqw 24.9cqw, rgba(255,255,255,.05) 24.9cqw 25.2cqw), linear-gradient(180deg, #24302a, #2f3b33 60%, #26312b); box-shadow: 0 26px 50px rgba(27,33,29,.28); animation: m-mlin .9s .05s var(--m-ease) backwards; }
.m-mlwall::before { content: ""; position: absolute; left: 4%; right: 4%; top: 5%; height: 62%; border: 1px solid rgba(255,255,255,.06); border-radius: 6px; box-shadow: inset 0 0 0 1.4cqw rgba(0,0,0,.06); }
.m-mlwall::after { content: ""; position: absolute; left: 64%; top: 56%; width: 120cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,186,96,.34), rgba(255,170,80,.1) 45%, transparent 72%); animation: m-mlbreathe 4.6s 1s ease-in-out infinite; }
.m-mlmirror { position: absolute; right: 9%; top: 9%; width: 18%; height: 34%; z-index: 1; border-radius: 999px 999px 6px 6px; border: .9cqw solid #b8893c; background: radial-gradient(80% 60% at 30% 90%, rgba(255,190,110,.45), transparent 70%), linear-gradient(160deg, #3c4a42, #1d2621 70%); box-shadow: 0 10px 18px rgba(0,0,0,.35), inset 0 0 0 .4cqw rgba(0,0,0,.25); animation: m-mlin .9s .3s var(--m-ease) backwards; }
.m-mlmirror::after { content: ""; position: absolute; left: 18%; top: 10%; width: 14%; height: 60%; border-radius: 99px; background: linear-gradient(180deg, rgba(255,255,255,.18), transparent); rotate: 12deg; }
.m-mlshelf { position: absolute; left: 0; right: 0; top: 74%; bottom: 0; z-index: 2; border-radius: 0 0 26px 26px; background: linear-gradient(180deg, #a06a3e 0 2.4%, #6b4428 2.4% 26%, #4a2f1c 26% 29%, #3a2618 29%); box-shadow: 0 -4px 10px rgba(0,0,0,.25); animation: m-mlin .9s .1s var(--m-ease) backwards; }
.m-mlshelf::after { content: ""; position: absolute; left: 6%; right: 6%; top: 40%; bottom: 14%; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,220,170,.12), inset 0 2px 8px rgba(0,0,0,.35); }
.m-mlheir, .m-mlblack, .m-mlday, .m-mlprism { position: absolute; display: block; transition: transform .45s var(--m-ease); }
.m-mlheir { left: 33%; bottom: 25%; width: 30%; z-index: 6; filter: drop-shadow(0 16px 14px rgba(0,0,0,.45)); animation: m-mlin 1s .15s var(--m-ease) backwards; }
.m-mlblack { left: 9%; bottom: 25%; width: 21%; z-index: 3; filter: drop-shadow(0 12px 12px rgba(0,0,0,.45)); animation: m-mlin 1s .3s var(--m-ease) backwards; }
.m-mlday { left: 74%; bottom: 25%; width: 20%; z-index: 3; filter: drop-shadow(0 12px 12px rgba(0,0,0,.45)); animation: m-mlin 1s .4s var(--m-ease) backwards; }
.m-mlprism { left: 57%; bottom: 21.5%; width: 19%; z-index: 5; animation: m-mlin 1s .5s var(--m-ease) backwards; }
.m-mlprismimg { display: block; filter: drop-shadow(0 10px 10px rgba(0,0,0,.45)); }
.m-mlheir:hover, .m-mlblack:hover, .m-mlday:hover, .m-mlprism:hover { transform: translateY(-6px); }
.m-mlhalo { position: absolute; left: 45%; top: 13%; width: 120%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255,214,140,.5), rgba(255,170,80,.15) 50%, transparent 75%); mix-blend-mode: screen; animation: m-mlhalo 2.8s 1.2s ease-in-out infinite; }
.m-mlflame { position: absolute; left: 45%; top: 1.5%; width: 6.5%; height: 20%; translate: -50% 0; pointer-events: none; border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%; background: radial-gradient(ellipse 50% 60% at 50% 72%, #fffef2 0 26%, #ffd773 50%, rgba(255,150,50,.7) 72%, transparent 76%); mix-blend-mode: screen; transform-origin: 50% 92%; animation: m-mlflick 2.3s 1.2s ease-in-out infinite; }
.m-mlsmoke { position: absolute; left: 45%; bottom: 93%; width: 28%; height: auto; translate: -50% 0; overflow: visible; pointer-events: none; }
.m-mlsmoke path { fill: none; stroke: rgba(240,236,226,.6); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 26 100; stroke-dashoffset: 26; animation: m-mlsmoke 5.5s 1.6s ease-out infinite; }
.m-mlsmoke path + path { stroke-width: 1; animation-duration: 6.4s; animation-delay: 3.2s; }
.m-mlplaque { position: absolute; left: 50%; bottom: 6.5%; z-index: 4; translate: -50% 0; padding: 1cqw 2.4cqw; border-radius: 4px; font: 600 clamp(8.5px, 1.9cqw, 12px)/1 var(--m-body); font-style: normal; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: #3a2618; background: linear-gradient(180deg, #e7c27a, #c8963f 60%, #a87a2e); box-shadow: 0 2px 4px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,240,200,.4); animation: m-mlin .9s .6s var(--m-ease) backwards; }
.m-mlburn { position: absolute; left: 6%; top: 8%; z-index: 4; display: grid; gap: 1.2cqw; width: 34%; padding: 2cqw 2.4cqw 2.2cqw; border-radius: 12px; background: #f7f1e6; border: 1.5px solid #e2d6c0; box-shadow: 0 14px 28px rgba(0,0,0,.35); animation: m-mlin .9s .7s var(--m-ease) backwards; }
.m-mlburn small { font: 700 clamp(8.5px, 1.8cqw, 11px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #2f3b33; }
.m-mlbl { display: grid; gap: 1cqw; }
.m-mlbl i { display: grid; grid-template-columns: 7.5cqw 1fr auto; align-items: center; gap: 1.2cqw; font-style: normal; }
.m-mlbl b { font: 700 clamp(10px, 2.2cqw, 13.5px)/1 var(--m-body); color: #1b211d; white-space: nowrap; }
.m-mlbl em { font: 600 clamp(10px, 2.1cqw, 13px)/1 var(--m-body); font-style: normal; color: #6b4428; white-space: nowrap; }
.m-mlbl s { position: relative; height: 1.2cqw; min-height: 5px; border-radius: 99px; background: #e6dccb; overflow: hidden; text-decoration: none; }
.m-mlbl s::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: linear-gradient(90deg, #c8893a, #e7b45a); transform-origin: left; animation: m-mlfill 9s calc(.9s + var(--i) * .45s) var(--m-ease) infinite backwards; }
@keyframes m-mlin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-mlbreathe { 0%, 100% { opacity: .75; scale: .96; } 50% { opacity: 1; scale: 1.04; } }
@keyframes m-mlhalo { 0%, 100% { opacity: .8; scale: 1; } 30% { opacity: 1; scale: 1.06; } 60% { opacity: .7; scale: .97; } }
@keyframes m-mlflick { 0%, 100% { scale: 1 1; rotate: -2deg; } 22% { scale: .9 1.1; rotate: 3deg; } 48% { scale: 1.06 .93; rotate: -1deg; } 74% { scale: .95 1.06; rotate: 2deg; } }
@keyframes m-mlsmoke { 0% { stroke-dashoffset: 26; opacity: 0; } 15% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes m-mlfill { 0% { scale: 0 1; } 16%, 100% { scale: 1 1; } }
.m-mlspecs > span { color: #2f3b33; }
.m-mlspecs a { border-radius: 8px; border: 1.5px solid #dfe2d8; }
.m-mlspecs b { border-radius: 6px; background: #2f3b33; } .m-mlspecs a:nth-of-type(3n+2) b { background: #6b4428; } .m-mlspecs a:nth-of-type(3n) b { background: #e7b45a; color: #1b211d; }
.m-mlspecs a:is(:hover, :focus-visible) { border-color: #2f3b33; }
.m-mltile { border-radius: 14px; border: 1.5px solid #dfe2d8; box-shadow: 0 10px 22px rgba(27,33,29,.06); }
.m-mltile em { width: 10px; height: 14px; border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%; background: radial-gradient(ellipse at 50% 72%, #fff3cf 0 22%, #e7b45a 55%, #c8893a 80%); opacity: .45; scale: .8; transform-origin: 50% 90%; transition: opacity .3s, scale .3s, box-shadow .3s; }
.m-mltile:is(:hover, :focus-visible) em { opacity: 1; scale: 1.1; box-shadow: 0 0 10px 3px rgba(255,180,90,.55); animation: m-mlflick 1.6s ease-in-out infinite; }
.m-mlimg { border-radius: 10px; background: radial-gradient(circle at 50% 40%, #fff, #edefe8); }
.m-mltile .m-q8tx small { color: #6b4428; }
.m-mltile:is(:hover, :focus-visible) { border-color: #2f3b33; box-shadow: 0 16px 30px rgba(27,33,29,.12); }
body.hv-mantel main section > .wrap > h2::after { content: ""; display: block; width: 96px; height: 4px; margin-top: 12px; border-radius: 2px; background: linear-gradient(90deg, #2f3b33 0 60%, #c8893a 60% 80%, #e7b45a 80%); }
body.hv-mantel .pcard:hover, body.hv-mantel .m-acard:hover { box-shadow: 0 0 0 2px #2f3b33, 0 18px 40px rgba(27,33,29,.12); }
body.hv-mantel .m-cta .m-band { border-radius: 20px; background: radial-gradient(40% 90% at 86% 0%, rgba(231,180,90,.3), transparent 70%), linear-gradient(120deg, #1b211d, #2f3b33 55%, #4a5a4e); }
body.hv-mantel .m-cta .m-band::before { width: 150px; height: 150px; right: 34px; top: -46px; border-radius: 50%; background: radial-gradient(circle, rgba(255,200,120,.32), rgba(255,200,120,.03) 70%); }
body.hv-mantel .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(231,180,90,.24), transparent 70%), linear-gradient(120deg, #1b211d, #2f3b33); } body.hv-mantel .m-page-hero .eyebrow { color: #e7b45a; }
body.hv-mantel footer.site { background: #1b211d; color: #e3e6de; border: 0; } body.hv-mantel footer.site nav a { color: #e7c88a; }
body.hv-mantel .m-collage .m-card { border-radius: 14px; }

/* ember (LEOBEN COMPANY): a pill with an unlit wick flame at its start; on hover the flame catches (it grows, flickers and glows), warm light spreads across the button from the flame and the arrow drifts forward */
body.bv-ember .btn { border-radius: 999px; padding: 15px 26px 15px 42px; letter-spacing: .01em; }
body.bv-ember :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #364439, #2f3b33 55%, #283229); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px rgba(27,33,29,.28); }
body.bv-ember :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #2f3b33, #1e2721 60%, #171e19); color: #fff; }
body.bv-ember .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 160% at 21px 50%, rgba(255,176,80,.36), rgba(255,176,80,.08) 55%, transparent 75%); opacity: 0; transition: opacity .5s var(--m-ease); }
body.bv-ember .btn:is(:hover, :focus-visible)::before { opacity: 1; }
body.bv-ember .btn::after { inset: auto; left: 17px; top: 50%; width: 10px; height: 15px; margin-top: -9px; transform: none; border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%; background: radial-gradient(ellipse at 50% 72%, #fff6d8 0 22%, #ffc35a 50%, #e0782a 80%); opacity: .5; scale: .72; transform-origin: 50% 92%; z-index: 1; transition: opacity .3s, scale .35s var(--m-ease), box-shadow .35s; }
body.bv-ember .btn:is(:hover, :focus-visible)::after { transform: none; opacity: 1; scale: 1.05; box-shadow: 0 0 10px 3px rgba(255,170,70,.55); animation: m-emberflick 1.4s ease-in-out infinite; }
body.bv-ember .btn .arr { display: inline-block; transition: transform .45s var(--m-ease); } body.bv-ember .btn:hover .arr { transform: translateX(5px); }
body.bv-ember .m-cta .btn.m-white:hover { color: #1e2721; }
@keyframes m-emberflick { 0%, 100% { rotate: -3deg; scale: 1.05 1; } 35% { rotate: 3deg; scale: .95 1.1; } 70% { rotate: -1deg; scale: 1.08 .95; } }
body.hv-mantel .m-page-hero .m-btn-main { background: linear-gradient(180deg, #ecc274, #e2ad4e 60%, #d39b3a); color: #1b211d; } body.hv-mantel .m-page-hero .m-btn-main:hover { background: linear-gradient(180deg, #e2ad4e, #c98f30); color: #1b211d; }
@media (min-width: 901px) and (max-width: 1100px) { :is(body.hv-carryall, body.hv-mantel, body.hv-brunch) header.site nav a { padding: 8px 5px; font-size: 12.5px; } }
@media (min-width: 901px) and (max-width: 1000px) { :is(body.hv-mantel, body.hv-brunch) header.site nav a { padding: 7px 3px; font-size: 12px; } :is(body.hv-mantel, body.hv-brunch) header.site .langs { margin-left: 6px; gap: 3px; } :is(body.hv-mantel, body.hv-brunch) header.site .langs a { padding: 0 8px; min-height: 30px; } body.hv-mantel header.site .logo img { height: 30px; width: auto; } }
body.hv-mantel :is(h1, h2, h3, .m-mlburn, .m-mlplaque) { font-variant-numeric: lining-nums; }

/* brunch (MyMini): a retro diner kitchen; butter-yellow checkered tiles over a cream counter with a red edge; the real aqua MyMini waffle maker preheats (its indicator light glows, then goes out while a Preheating / Ready chip flips) and steam curls up from the plates; a red 5-inch plate sticker sits on it; the real red bubble waffle maker stands open beside it, the real navy bundt cake maker waits on a wall shelf; a mini-menu card steps through four dishes */
body.hv-brunch .m-hero { background: radial-gradient(40% 52% at 76% 40%, #fffdf6, transparent 70%), radial-gradient(30% 40% at 2% 98%, rgba(228,72,63,.10), transparent 70%), linear-gradient(120deg, #fff0d6, #fffbf4 52%, #e3f6f3); }
body.hv-brunch .m-hero h1 { letter-spacing: -.005em; font-size: clamp(34px, 4vw, 56px) !important; line-height: 1.06 !important; }
body.hv-brunch .m-hero .eyebrow { color: #a3241f; letter-spacing: .14em; }
.m-bh { aspect-ratio: 600 / 560; isolation: isolate; }
.m-bhtiles { position: absolute; inset: 0 0 26% 0; border-radius: 28px 28px 0 0; overflow: hidden; background: conic-gradient(#fff6e2 25%, #ffe2a6 0 50%, #fff6e2 0 75%, #ffe2a6 0) 0 0 / 9cqw 9cqw; box-shadow: inset 0 -1.2cqw 0 #e4483f, inset 0 -1.8cqw 0 #fff6e2; animation: m-bhin .9s .05s var(--m-ease) backwards; }
.m-bhtiles::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 35%, rgba(255,255,255,.55), transparent 70%); }
.m-bhshelf { position: absolute; left: 4%; top: 41%; width: 34%; height: 2.6%; z-index: 2; border-radius: 4px; background: linear-gradient(180deg, #fff, #f1e6d3); box-shadow: 0 1.2cqw 0 -0.4cqw #e4483f, 0 8px 12px rgba(42,28,26,.18); animation: m-bhin .8s .2s var(--m-ease) backwards; }
.m-bhshelf::before, .m-bhshelf::after { content: ""; position: absolute; top: 100%; width: 2.4cqw; height: 4cqw; border-radius: 0 0 1.2cqw 1.2cqw; background: #e4483f; } .m-bhshelf::before { left: 10%; } .m-bhshelf::after { right: 10%; }
.m-bhbundt, .m-bhbubble, .m-bhaqua { position: absolute; display: block; transition: transform .45s var(--m-ease); }
.m-bhbundt { left: 9%; bottom: 57%; width: 24%; z-index: 3; filter: drop-shadow(0 10px 10px rgba(42,28,26,.25)); animation: m-bhin 1s .35s var(--m-ease) backwards; }
.m-bhcounter { position: absolute; left: 0; right: 0; top: 74%; bottom: 0; z-index: 2; border-radius: 0 0 28px 28px; background: linear-gradient(180deg, #fffdf8 0 22%, #e9dccb 22% 26%, #e4483f 26% 32%, #fff 32% 34%, #c8312a 34%); box-shadow: 0 26px 50px rgba(42,28,26,.16); animation: m-bhin .9s .1s var(--m-ease) backwards; }
.m-bhcounter::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 34%; border-radius: 0 0 28px 28px; background: repeating-linear-gradient(90deg, transparent 0 7cqw, rgba(0,0,0,.08) 7cqw 7.3cqw); }
.m-bhbubble { right: 3%; bottom: 17%; width: 27%; z-index: 3; filter: drop-shadow(0 14px 12px rgba(42,28,26,.25)); animation: m-bhin 1s .3s var(--m-ease) backwards, m-bhbob 4.8s 1.4s ease-in-out infinite; }
.m-bhaqua { left: 25%; bottom: 17.5%; width: 45%; z-index: 4; animation: m-bhin 1s .15s var(--m-ease) backwards; }
.m-bhaquaimg { display: block; filter: drop-shadow(0 18px 16px rgba(42,28,26,.28)); }
.m-bhbundt:hover, .m-bhbubble:hover, .m-bhaqua:hover { transform: translateY(-6px); }
.m-bhled { position: absolute; left: 39.6%; top: 19.4%; width: 7%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #ffd2c8 0 18%, #ff3b2f 40%, rgba(255,59,47,.35) 62%, transparent 72%); mix-blend-mode: screen; animation: m-bhled 9s 1s linear infinite; }
.m-bhsteam { position: absolute; left: 56%; top: 3%; width: 0; height: 0; pointer-events: none; }
.m-bhsteam i { position: absolute; left: calc((var(--i) - 1) * 5.5cqw); bottom: 0; width: 2.6cqw; height: 12cqw; border-radius: 50%; border-left: .6cqw solid rgba(255,255,255,.9); filter: blur(.5px) drop-shadow(0 0 2px rgba(42,28,26,.15)); opacity: 0; animation: m-bhsteam 3.6s calc(1.4s + var(--i) * .9s) ease-out infinite; }
.m-bhsticker { position: absolute; left: -4%; top: 52%; z-index: 2; display: grid; place-items: center; align-content: center; width: 15cqw; aspect-ratio: 1; border-radius: 50%; font: 600 clamp(8px, 1.8cqw, 11px)/1 var(--m-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: radial-gradient(circle at 35% 30%, #f06a5f, #e4483f 55%, #c8312a); box-shadow: 0 6px 12px rgba(42,28,26,.25), inset 0 0 0 .5cqw rgba(255,255,255,.25); rotate: -12deg; animation: m-bhpop .7s .9s cubic-bezier(.3,1.6,.5,1) backwards; }
.m-bhsticker b { display: block; margin-bottom: .3cqw; font: 800 clamp(16px, 4.6cqw, 28px)/1 var(--m-head); letter-spacing: 0; }
.m-bhheat { position: absolute; left: 47.5%; bottom: 5%; z-index: 6; translate: -50% 0; display: flex; align-items: center; gap: 1.4cqw; padding: 1.2cqw 2.2cqw 1.2cqw 1.6cqw; border-radius: 999px; background: #fffdf8; box-shadow: 0 8px 18px rgba(42,28,26,.22); font: 700 clamp(10px, 2.3cqw, 14px)/1 var(--m-body); color: #2a1c1a; white-space: nowrap; animation: m-bhin .9s .6s var(--m-ease) backwards; }
.m-bhheat > i { flex: none; width: 2.2cqw; min-width: 9px; aspect-ratio: 1; border-radius: 50%; animation: m-bhdot 9s 1s linear infinite; background: #ff3b2f; }
.m-bhheat > span { display: grid; }
.m-bhheat b { grid-area: 1 / 1; font-weight: 700; transition: none; }
.m-bhheat b:first-child { animation: m-bhon 9s 1s steps(1) infinite; } .m-bhheat b + b { opacity: 0; color: #1f8a7f; animation: m-bhoff 9s 1s steps(1) infinite; }
.m-bhmenu { position: absolute; right: 4%; top: 6%; z-index: 3; display: grid; gap: 1cqw; padding: 1.8cqw 2.2cqw 2cqw; border-radius: 16px; background: #fffdf8; border: 1.5px solid #f3d9a6; box-shadow: 0 12px 24px rgba(42,28,26,.16); rotate: 2deg; animation: m-bhin .9s .7s var(--m-ease) backwards; }
.m-bhmenu small { font: 700 clamp(8.5px, 1.8cqw, 11px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #a3241f; }
.m-bhml { display: grid; gap: .3cqw; }
.m-bhml i { display: flex; align-items: center; gap: 1.2cqw; padding: .75cqw 1.6cqw .75cqw .8cqw; border-radius: 999px; font: 600 clamp(10px, 2.2cqw, 13.5px)/1 var(--m-body); font-style: normal; color: #2a1c1a; white-space: nowrap; animation: m-bhstep 8s calc(1.6s + var(--i) * 2s) linear infinite; }
.m-bhml em { flex: none; width: 2.4cqw; min-width: 9px; aspect-ratio: 1; border-radius: 30%; background: #f2b33d; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #f3d9a6; }
.m-bhml i:nth-child(2) em { background: #c98b3c; } .m-bhml i:nth-child(3) em { background: #ffd34d; } .m-bhml i:nth-child(4) em { border-radius: 50%; background: #e0a050; }
@keyframes m-bhin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-bhpop { from { opacity: 0; scale: .3; } }
@keyframes m-bhbob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1cqw; } }
@keyframes m-bhled { 0%, 52% { opacity: 1; } 8%, 24%, 40% { opacity: .55; } 16%, 32%, 48% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes m-bhdot { 0%, 54% { background: #ff3b2f; box-shadow: 0 0 0 3px rgba(255,59,47,.2); } 56%, 100% { background: #2bb3a5; box-shadow: 0 0 0 3px rgba(43,179,165,.22); } }
@keyframes m-bhon { 0% { opacity: 1; } 55.5% { opacity: 0; } }
@keyframes m-bhoff { 0% { opacity: 0; } 55.5% { opacity: 1; } }
@keyframes m-bhsteam { 0% { opacity: 0; translate: 0 2cqw; scale: .7 .6; } 25% { opacity: .9; } 100% { opacity: 0; translate: 1.2cqw -8cqw; scale: 1.2 1.1; } }
@keyframes m-bhstep { 0%, 22% { background: #fff0d6; box-shadow: inset 0 0 0 1.5px #f2b33d; } 25%, 100% { background: transparent; box-shadow: none; } }
.m-bhspecs > span { color: #a3241f; }
.m-bhspecs a { border-radius: 999px; border: 1.5px solid #f3e1c3; }
.m-bhspecs b { border-radius: 999px; background: #c8312a; } .m-bhspecs a:nth-of-type(3n+2) b { background: #1f7f75; } .m-bhspecs a:nth-of-type(3n) b { background: #2d3f7a; }
.m-bhspecs a:is(:hover, :focus-visible) { border-color: #c8312a; }
.m-bhtile { border-radius: 20px; border: 1.5px solid #f3e1c3; box-shadow: 0 10px 22px rgba(42,28,26,.06); }
.m-bhtile em { width: 12px; height: 12px; border-radius: 50%; background: #e7dccd; box-shadow: inset 0 0 0 2px #fff; transition: background .3s, box-shadow .3s; }
.m-bhtile:is(:hover, :focus-visible) em { background: #ff3b2f; box-shadow: inset 0 0 0 2px #fff, 0 0 0 4px rgba(255,59,47,.18), 0 0 10px 2px rgba(255,59,47,.45); }
.m-bhimg { border-radius: 50%; background: conic-gradient(#fff6e2 25%, #ffecc4 0 50%, #fff6e2 0 75%, #ffecc4 0) 0 0 / 14px 14px; }
.m-bhtile .m-q8tx small { color: #a3241f; }
.m-bhtile:is(:hover, :focus-visible) { border-color: #c8312a; box-shadow: 0 16px 30px rgba(42,28,26,.12); }
body.hv-brunch main section > .wrap > h2::after { content: ""; display: block; width: 104px; height: 10px; margin-top: 10px; border-radius: 3px; background: conic-gradient(#e4483f 25%, #fff 0 50%, #e4483f 0 75%, #fff 0) 0 0 / 10px 10px; box-shadow: 0 0 0 1.5px #e4483f; }
body.hv-brunch .pcard:hover, body.hv-brunch .m-acard:hover { box-shadow: 0 0 0 2px #c8312a, 0 18px 40px rgba(42,28,26,.12); }
body.hv-brunch .m-cta .m-band { border-radius: 28px; background: radial-gradient(40% 90% at 86% 0%, rgba(108,207,198,.3), transparent 70%), linear-gradient(120deg, #7a1d18, #c8312a 55%, #e4483f); }
body.hv-brunch .m-cta .m-band::before { width: 150px; height: 150px; right: 34px; top: -46px; border-radius: 50%; background: radial-gradient(circle, rgba(255,226,166,.35), rgba(255,226,166,.03) 70%); }
body.hv-brunch .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(108,207,198,.28), transparent 70%), linear-gradient(120deg, #4a1512, #a3241f); } body.hv-brunch .m-page-hero .eyebrow { color: #ffe2a6; }
body.hv-brunch .m-page-hero .btn.m-btn-main { background: #fffbf4; color: #a3241f; } body.hv-brunch .m-page-hero .btn.m-btn-main:hover { background: #ffe2a6; color: #7a1d18; }
body.hv-brunch footer.site { background: #2a1c1a; color: #f3e6dc; border: 0; } body.hv-brunch footer.site nav a { color: #ffd59a; }
body.hv-brunch .m-collage .m-card { border-radius: 20px; }

/* toast (MyMini): a rounded toaster-slot button with a heating coil along its lower edge; on hover the coil glows orange and a slice of toast pops up out of the slot with a springy bounce, then the arrow slides forward */
body.bv-toast .btn { border-radius: 16px; padding: 15px 24px 17px 46px; letter-spacing: .01em; }
body.bv-toast :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #d63a32, #c8312a 55%, #b42a24); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -3px 0 rgba(0,0,0,.12), 0 10px 22px rgba(200,49,42,.28); }
body.bv-toast :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #c8312a, #a3241f 60%, #8f1f1b); color: #fff; }
body.bv-toast .btn::before { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; z-index: -1; pointer-events: none; border-radius: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, currentColor 30%, transparent) 0 8px, transparent 8px 11px); transition: background .4s, box-shadow .4s; }
body.bv-toast .btn:is(:hover, :focus-visible)::before { background: repeating-linear-gradient(90deg, #ffb347 0 8px, transparent 8px 11px); box-shadow: 0 0 8px 1px rgba(255,150,60,.65); }
body.bv-toast .btn::after { inset: auto; left: 15px; top: auto; bottom: -9px; width: 18px; height: 16px; transform: none; border-radius: 7px 7px 2px 2px; background: radial-gradient(circle at 50% 60%, #f6dca8 0 45%, #d99a52 70%, #b5732f); box-shadow: inset 0 0 0 1.5px rgba(122,74,30,.45); z-index: 1; transition: bottom .5s cubic-bezier(.3,1.8,.5,1) .05s; }
body.bv-toast .btn:is(:hover, :focus-visible)::after { transform: none; bottom: 14px; }
body.bv-toast .btn .arr { display: inline-block; transition: transform .35s var(--m-ease) .2s; } body.bv-toast .btn:hover .arr { transform: translateX(5px); }
body.bv-toast .m-cta .btn.m-white:hover { color: #a3241f; }
@media (min-width: 901px) and (max-width: 960px) { :is(body.hv-mantel, body.hv-brunch) header.site nav a { font-size: 11.5px; } :is(body.hv-mantel, body.hv-brunch) header.site .langs { margin-left: 3px; } }

/* ===== batch 13.11.2026 (5): jetset/magsnap (MAGMEN) ===== */
body.hv-jetset .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); color: var(--m-ink); background: radial-gradient(42% 54% at 76% 40%, #fff, transparent 70%), radial-gradient(30% 40% at 2% 98%, rgba(232,88,42,.12), transparent 70%), linear-gradient(120deg, #e9effa, #fffaf5 52%, #ffeee2); }
body.hv-jetset .m-hero .m-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.hv-jetset .m-hero .m-copy > * { animation: m-rise .8s var(--m-ease) both; }
body.hv-jetset .m-hero .m-copy > :nth-child(3) { animation-delay: .08s; } body.hv-jetset .m-hero .m-copy > :nth-child(4) { animation-delay: .16s; } body.hv-jetset .m-hero .m-copy > :nth-child(n+5) { animation-delay: .24s; }
body.hv-jetset .m-hero h1 { color: var(--m-ink) !important; text-wrap: balance; max-width: 17ch; font-size: clamp(34px, 4vw, 58px) !important; line-height: 1.02 !important; letter-spacing: -.01em; }
body.hv-jetset .m-hero .eyebrow { color: #b23a0a; letter-spacing: .16em; }
body.hv-jetset .m-hero .bgcredit { display: none; }
body.hv-jetset .m-hero .sub { color: var(--m-body-ink); }
body.hv-jetset .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: var(--m-ink) !important; background: rgba(255,255,255,.7) !important; }
body.hv-jetset .m-hero .m-btn-ghost:hover { background: var(--m-ink) !important; color: #fff !important; }
body.hv-jetset .m-hero .m-chips span { background: #fff; color: var(--m-ink); border: 1.5px solid color-mix(in srgb, var(--m-ink) 14%, transparent); backdrop-filter: none; }
.m-jt { position: relative; width: min(100%, 600px); justify-self: center; container-type: inline-size; aspect-ratio: 600 / 560; isolation: isolate; }
.m-jt a { -webkit-tap-highlight-color: transparent; }
.m-jt img { display: block; width: 100%; height: auto; border-radius: 0; }
.m-jtwall { position: absolute; inset: 0; border-radius: 30px; overflow: hidden; background: radial-gradient(60% 50% at 30% 30%, rgba(255,255,255,.75), transparent 70%), linear-gradient(180deg, #e7ebf2, #d9dfe9 64%, #cfd6e2); box-shadow: 0 26px 50px rgba(23,33,63,.18), inset 0 0 0 1px rgba(23,33,63,.06); animation: m-jtin .9s .05s var(--m-ease) backwards; }
.m-jtwall::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9%; background: linear-gradient(180deg, #c9d0dc, #dde2eb); box-shadow: 0 1px 0 rgba(255,255,255,.7); }
.m-jtwall::after { content: ""; position: absolute; left: 0; right: 0; top: 53%; height: 1.6%; background: linear-gradient(90deg, #e8582a 0 40%, #17213f 40% 42%, transparent 42%); opacity: .85; }
.m-jtwin { position: absolute; left: 7%; top: 13%; width: 31%; height: 40%; z-index: 1; border-radius: 46% / 36%; padding: 1.4cqw; background: linear-gradient(160deg, #f6f8fb, #c4ccd9); box-shadow: 0 8px 18px rgba(23,33,63,.18), inset 0 0 0 1px rgba(255,255,255,.8); animation: m-jtin .9s .2s var(--m-ease) backwards; }
.m-jtsky { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 46% / 36%; background: linear-gradient(180deg, #4f8fe6, #8cc0f5 55%, #d8ecfb); box-shadow: inset 0 0 0 .7cqw #aeb8c8, inset 0 1.2cqw 2cqw rgba(23,33,63,.3); }
.m-jtsky i { position: absolute; left: 100%; top: calc(14% + var(--i) * 19%); width: calc(10cqw - var(--i) * 1cqw); height: calc(3.4cqw - var(--i) * .3cqw); border-radius: 99px; background: #fff; opacity: .95; box-shadow: 2.6cqw -1.2cqw 0 .2cqw #fff, 5cqw 0 0 -.2cqw #fff; animation: m-jtcloud calc(9s + var(--i) * 2.4s) calc(var(--i) * -3.1s) linear infinite; }
.m-jtsky b { position: absolute; left: -6%; bottom: 10%; width: 78%; height: 16%; background: linear-gradient(180deg, #f2f4f8, #b9c2d0); clip-path: polygon(0 40%, 100% 78%, 100% 100%, 0 100%); }
.m-jtsky b::after { content: ""; position: absolute; right: 0; top: 0; width: 6%; height: 100%; background: #e8582a; clip-path: polygon(0 74%, 100% 30%, 100% 100%, 0 100%); }
.m-jtsky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 45%, transparent 60%); }
.m-jtlamp { position: absolute; left: 44%; top: 2.2%; width: 7%; aspect-ratio: 2.2; z-index: 2; border-radius: 0 0 99px 99px; background: #b8c1cf; box-shadow: inset 0 -.5cqw 0 #9ea9b9; }
.m-jtlamp::after { content: ""; position: absolute; left: 50%; top: 100%; width: 30cqw; height: 34cqw; translate: -50% 0; clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255,236,170,.55), rgba(255,236,170,0) 80%); opacity: 0; animation: m-jtlamp 8s 1.4s ease-in-out infinite; pointer-events: none; }
.m-jtpass { position: absolute; right: 4%; top: 12%; z-index: 8; display: grid; gap: 1cqw; width: 41%; padding: 0 0 2cqw; border-radius: 14px; overflow: hidden; background: #fff; border: 1.5px solid #e3e7ef; box-shadow: 0 14px 28px rgba(23,33,63,.16); rotate: 2deg; animation: m-jtin .9s .7s var(--m-ease) backwards; }
.m-jtph { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; padding: 1.6cqw 2.2cqw; background: #17213f; color: #fff; }
.m-jtph b { font: 700 clamp(8.5px, 1.9cqw, 11.5px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.m-jtph em { font: 700 clamp(9px, 2.1cqw, 13px)/1 var(--m-head); font-style: normal; color: #ff9a6b; letter-spacing: .04em; }
.m-jtpass > small { padding: 0 2.2cqw; font: 700 clamp(8.5px, 1.8cqw, 11px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #b23a0a; }
.m-jtpl { display: grid; gap: .3cqw; padding: 0 1.4cqw; }
.m-jtpl i { display: flex; align-items: center; gap: 1.2cqw; padding: .8cqw 1.2cqw .8cqw .8cqw; border-radius: 8px; font: 600 clamp(10px, 2.2cqw, 13.5px)/1.1 var(--m-body); font-style: normal; color: #17213f; white-space: nowrap; animation: m-jtstep 8s calc(1.6s + var(--i) * 2s) linear infinite; }
.m-jtpl em { flex: none; display: grid; place-items: center; min-width: 4.4cqw; height: 3.4cqw; min-height: 15px; border-radius: 5px; font: 700 clamp(8px, 1.8cqw, 11px)/1 var(--m-head); font-style: normal; color: #fff; background: #17213f; font-variant-numeric: tabular-nums; }
.m-jtpass::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1cqw; background: radial-gradient(circle at 50% 100%, transparent .55cqw, #e8582a .6cqw) 0 0 / 2.4cqw 100%; opacity: .9; }
.m-jttray { position: absolute; left: 3%; right: 3%; top: 57%; bottom: 4%; z-index: 2; border-radius: 20px 20px 26px 26px; background: radial-gradient(70% 60% at 50% 20%, rgba(255,255,255,.35), transparent 70%), linear-gradient(180deg, #8995a8, #6f7c91 40%, #5d6980); box-shadow: inset 0 1cqw 0 rgba(255,255,255,.22), inset 0 -1.4cqw 0 rgba(0,0,0,.14), 0 20px 30px rgba(23,33,63,.3); animation: m-jtin .9s .1s var(--m-ease) backwards; }
.m-jttray::before { content: ""; position: absolute; right: 7%; top: 14%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #5d6980 0 55%, #7d899c 60%, #6a768b); box-shadow: inset 0 .6cqw 1cqw rgba(0,0,0,.25); }
.m-jttray::after { content: ""; position: absolute; left: 44%; top: 3%; width: 12%; height: 5%; border-radius: 99px; background: #4e5a70; box-shadow: inset 0 .4cqw .6cqw rgba(0,0,0,.35); }
.m-jtarch, .m-jtskel, .m-jtballs { position: absolute; display: block; transition: transform .45s var(--m-ease); }
.m-jtarch { left: 3%; bottom: 6%; width: 53%; z-index: 6; animation: m-jtin 1s .15s var(--m-ease) backwards; }
.m-jtarchimg { display: block; filter: drop-shadow(0 16px 14px rgba(23,33,63,.32)); transform-origin: 50% 96%; animation: m-jtsway 6s 1.4s ease-in-out infinite; }
.m-jtskel { right: 3%; bottom: 9%; width: 31%; z-index: 4; filter: drop-shadow(0 14px 12px rgba(23,33,63,.3)); animation: m-jtin 1s .3s var(--m-ease) backwards, m-jtbob 5.2s 1.6s ease-in-out infinite; }
.m-jtballs { right: 30%; bottom: 5%; width: 16%; z-index: 7; rotate: -12deg; filter: drop-shadow(0 12px 10px rgba(23,33,63,.34)); animation: m-jtin 1s .4s var(--m-ease) backwards; }
.m-jtarch:hover, .m-jtskel:hover, .m-jtballs:hover { transform: translateY(-6px); }
.m-jtfield { position: absolute; left: 37%; top: -6%; width: 26%; height: auto; overflow: visible; pointer-events: none; }
.m-jtfield path { fill: none; stroke: #e8582a; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 7; opacity: 0; animation: m-jtfield 3.2s 1.8s ease-in-out infinite; }
.m-jtfield path:nth-child(n+3) { stroke: #2f6fdb; animation-delay: 2.4s; }
.m-jttag { position: absolute; right: 4%; bottom: 6%; z-index: 8; padding: 1cqw 1.8cqw; border-radius: 99px; font: 700 clamp(8.5px, 1.9cqw, 12px)/1 var(--m-body); font-style: normal; white-space: nowrap; color: #fff; background: #17213f; box-shadow: 0 6px 12px rgba(23,33,63,.28); rotate: -4deg; animation: m-jtpop .7s 1s cubic-bezier(.3,1.6,.5,1) backwards; }
.m-jttag::before { content: ""; display: inline-block; width: 1.4cqw; min-width: 6px; aspect-ratio: 1; margin-right: 1cqw; border-radius: 50%; background: #e8582a; box-shadow: 0 0 0 .5cqw rgba(232,88,42,.3); vertical-align: middle; }
@keyframes m-jtin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-jtpop { from { opacity: 0; scale: .3; } }
@keyframes m-jtcloud { from { left: 100%; } to { left: -40%; } }
@keyframes m-jtsway { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } }
@keyframes m-jtbob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1cqw; } }
@keyframes m-jtfield { 0%, 100% { opacity: 0; stroke-dashoffset: 0; } 30%, 60% { opacity: .9; } 100% { stroke-dashoffset: -40; } }
@keyframes m-jtlamp { 0%, 8% { opacity: 0; } 12%, 60% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes m-jtstep { 0%, 22% { background: #ffede0; box-shadow: inset 0 0 0 1.5px #f4a37f; } 25%, 100% { background: transparent; box-shadow: none; } }
.m-jtcats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; padding: 10px clamp(18px, 4vw, 72px) clamp(26px, 4vh, 44px); }
.m-jttile { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; padding: 14px 14px 12px 12px; background: #fff; color: var(--m-ink) !important; overflow: hidden; border-radius: 18px; border: 1.5px solid #e3e7ef; box-shadow: 0 10px 22px rgba(23,33,63,.06); animation: m-rise .7s calc(.8s + var(--i, 0) * .08s) var(--m-ease) backwards; transition: transform .4s var(--m-ease), border-color .3s, box-shadow .3s; }
.m-jtimg { flex: none; display: block; overflow: hidden; width: 58px; height: 58px; padding: 4px; border-radius: 14px; background: radial-gradient(circle at 50% 40%, #fff, #edf1f7); }
.m-jtimg img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; transition: transform .45s var(--m-ease); }
.m-jttile:hover .m-jtimg img { transform: scale(1.08) rotate(-4deg); }
.m-jttile:focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; }
.m-jttile:is(:hover, :focus-visible) { transform: translateY(-4px); border-color: #e8582a; box-shadow: 0 16px 30px rgba(23,33,63,.12); }
.m-jttile .m-q8tx b { font: 700 15px/1.2 var(--m-body); color: var(--m-ink); padding-right: 22px; }
.m-jttile .m-q8tx small { color: #b23a0a; }
.m-jttile em { position: absolute; right: 12px; top: 12px; width: 12px; height: 12px; border-radius: 50%; font-style: normal; background: linear-gradient(90deg, #e8582a 50%, #2f6fdb 50%); opacity: .45; transition: opacity .3s, transform .45s var(--m-ease); }
.m-jttile:is(:hover, :focus-visible) em { opacity: 1; transform: rotate(180deg); }
.m-jtspecs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -6px 0 18px; }
.m-jtspecs > span { flex-basis: 100%; margin: 0 0 2px; font: 700 12px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #b23a0a; }
.m-jtspecs a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1.5px solid #e3e7ef; background: #fff; color: var(--m-ink) !important; text-decoration: none; transition: border-color .25s, transform .3s var(--m-ease), box-shadow .3s; animation: m-rise .6s calc(.45s + var(--i, 0) * .06s) var(--m-ease) backwards; }
.m-jtspecs a:is(:hover, :focus-visible) { transform: translateY(-2px); border-color: #e8582a; box-shadow: 0 8px 18px rgba(23,33,63,.12); }
.m-jtspecs b { display: grid; place-items: center; min-width: 40px; height: 28px; padding: 0 10px; border-radius: 999px; color: #fff; background: #c2410c; font: 700 13px/1 var(--m-body); white-space: nowrap; } .m-jtspecs a:nth-of-type(3n+2) b { background: #17213f; } .m-jtspecs a:nth-of-type(3n) b { background: #2459b8; }
.m-jtspecs small { font: 600 12.5px/1 var(--m-body); white-space: nowrap; color: var(--m-body-ink); }
body.hv-jetset .m-acard .m-art { position: relative; background: #fff !important; border-bottom: 1px solid color-mix(in srgb, var(--m-ink) 7%, transparent); }
body.hv-jetset .m-acard .m-art img { position: absolute; left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); max-height: none; object-fit: contain; border-radius: 0; }
body.hv-jetset main section > .wrap > h2::after { content: ""; display: block; width: 104px; height: 6px; margin-top: 12px; border-radius: 99px; background: linear-gradient(90deg, #e8582a 0 46%, transparent 46% 54%, #2f6fdb 54%); }
body.hv-jetset .pcard:hover, body.hv-jetset .m-acard:hover { box-shadow: 0 0 0 2px #e8582a, 0 18px 40px rgba(23,33,63,.12); }
body.hv-jetset .m-cta .m-band { border-radius: 26px; background: radial-gradient(40% 90% at 86% 0%, rgba(232,88,42,.38), transparent 70%), linear-gradient(120deg, #0f1730, #17213f 55%, #2a3a6b); }
body.hv-jetset .m-cta .m-band::before { width: 150px; height: 150px; right: 34px; top: -46px; border-radius: 50%; background: radial-gradient(circle, rgba(140,192,245,.32), rgba(140,192,245,.03) 70%); }
body.hv-jetset .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(232,88,42,.32), transparent 70%), linear-gradient(120deg, #0f1730, #2a3a6b); } body.hv-jetset .m-page-hero .eyebrow { color: #ffb48f; }
body.hv-jetset .m-page-hero .btn.m-btn-main { background: #fff; color: #9a3412; } body.hv-jetset .m-page-hero .btn.m-btn-main:hover { background: #ffede0; color: #7c2d12; }
body.hv-jetset footer.site { background: #17213f; color: #e4e8f2; border: 0; } body.hv-jetset footer.site nav a { color: #ffb48f; }
body.hv-jetset .m-collage .m-card { border-radius: 18px; }
@media (max-width: 900px) {
  body.hv-jetset .m-hero { min-height: 0; }
  body.hv-jetset .m-hero .m-inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  body.hv-jetset .m-hero .m-copy { display: contents; }
  body.hv-jetset .m-hero .m-copy > * { order: 1; }
  body.hv-jetset .m-hero .m-copy > :is(.m-ctas, nav, .m-chips) { order: 3; }
  .m-jt { order: 2; width: min(100%, 520px); align-self: center; margin: 8px 0 4px; }
  .m-jtcats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-jtcats > a:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .m-jtspecs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-jtspecs > span { grid-column: 1 / -1; }
  .m-jtspecs a { flex-direction: column; align-items: flex-start; gap: 5px; padding: 6px 10px 8px 6px; border-radius: 12px; }
  .m-jtspecs small { white-space: normal; line-height: 1.2; padding-left: 2px; }
}
@media (max-width: 420px) {
  .m-jttile { gap: 9px; padding: 10px; } .m-jtimg { width: 44px; height: 44px; }
  .m-jttile .m-q8tx b { font-size: 13px; padding-right: 0; } .m-jttile em { display: none; }
}

/* magsnap (MAGMEN): a pill with a steel magnet ball parked at its start; on hover two field arcs pulse around the arrow, the ball is pulled along the button and snaps next to the arrow with a springy overshoot, and the arrow gives a small click forward */
body.bv-magsnap .btn { border-radius: 999px; padding: 15px 28px 15px 40px; letter-spacing: .01em; }
body.bv-magsnap :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #cf4a12, #c2410c 55%, #b23a0a); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -3px 0 rgba(0,0,0,.12), 0 10px 22px rgba(194,65,12,.28); }
body.bv-magsnap :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #c2410c, #9a3412 60%, #85300f); color: #fff; }
body.bv-magsnap .btn::before { content: ""; position: absolute; right: 3px; top: 50%; width: 30px; height: 30px; margin-top: -15px; z-index: -1; pointer-events: none; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, currentColor 55%, transparent); opacity: 0; scale: .5; transition: opacity .3s, scale .45s var(--m-ease); }
body.bv-magsnap .btn:is(:hover, :focus-visible)::before { opacity: 1; scale: 1; animation: m-msfield 1.4s .3s ease-out infinite; }
body.bv-magsnap .btn::after { inset: auto; left: 15px; top: 50%; width: 12px; height: 12px; margin-top: -6px; transform: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c9d1de 40%, #7d899c 80%); box-shadow: 0 1px 2px rgba(0,0,0,.35); z-index: 1; transition: left .55s cubic-bezier(.5,-0.3,.4,1.5); }
body.bv-magsnap .btn:is(:hover, :focus-visible)::after { transform: none; left: calc(100% - 24px); }
body.bv-magsnap .btn .arr { display: inline-block; transition: transform .2s var(--m-ease) .45s; } body.bv-magsnap .btn:hover .arr { transform: translateX(4px); }
body.bv-magsnap .m-cta .btn.m-white:hover { color: #9a3412; }
@keyframes m-msfield { 0% { scale: .7; opacity: .9; } 100% { scale: 1.35; opacity: 0; } }
body.hv-jetset :is(h1, h2, h3, .m-jtpass) { font-variant-numeric: lining-nums; }

/* ===== batch 14.11.2026: home blocks (theme.home, opt-in for batch-12 sites): quickpick, table, picker, collections, steps, method, guidehub ===== */
body.m .m-hb { padding: 64px 0; }
.m-hbhead { max-width: 780px; margin: 0 0 28px; }
.m-hbkick { margin: 0 0 10px; font: 700 12.5px/1.2 var(--m-body); letter-spacing: .16em; text-transform: uppercase; color: var(--m-accent); }
body.m .m-hbhead h2 { margin: 0 0 10px; text-wrap: balance; }
.m-hblede { margin: 0; font-size: 17px; line-height: 1.55; color: var(--m-body-ink); text-wrap: pretty; }
.m-hbnote { margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: var(--m-body-ink); }
.m-hbsr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m-hb a:focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; }
.m-hb img { border-radius: 0; }
/* quick pick */
.m-hbqp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.m-hbqpi { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px; background: #fff; border-radius: var(--m-radius); border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); box-shadow: 0 10px 24px rgba(20,24,40,.05); transition: transform .3s var(--m-ease), box-shadow .3s; }
.m-hbqpi:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(20,24,40,.1); }
.m-hbneed { margin: 0; font: 650 16px/1.35 var(--m-body); color: var(--m-ink); text-wrap: balance; }
.m-hbneed small { display: block; margin-bottom: 5px; font: 700 11.5px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: var(--m-accent); }
.m-hbshot { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(var(--m-radius) - 4px); background: var(--m-soft); }
.m-hbshot img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 12px; mix-blend-mode: multiply; transition: transform .45s var(--m-ease); }
.m-hbqpi:hover .m-hbshot img { transform: scale(1.05); }
body.m .m-hbqpi h3 { margin: 2px 0 0; font-size: 18px; line-height: 1.25; }
.m-hbqpn { flex: 1; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--m-body-ink); }
.m-hbqpi .btn { align-self: flex-start; }
/* comparison table: rows become cards on phones */
.m-hbtw { overflow-x: auto; border-radius: var(--m-radius); border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); background: #fff; }
.m-hbt { width: 100%; border-collapse: collapse; font-size: 15px; }
.m-hbt th, .m-hbt td { padding: 14px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid color-mix(in srgb, var(--m-ink) 8%, transparent); }
.m-hbt tbody tr:last-child > * { border-bottom: 0; }
.m-hbt thead th { font: 700 12px/1.25 var(--m-body); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--m-ink); white-space: nowrap; }
.m-hbt tbody th { min-width: 240px; font-weight: 400; }
.m-hbt tbody th > * { display: inline-block; vertical-align: middle; }
.m-hbtimg { width: 58px; height: 58px; margin-right: 12px; overflow: hidden; border-radius: 12px; background: var(--m-soft); }
.m-hbtimg img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.m-hbt tbody th > span { max-width: calc(100% - 74px); }
.m-hbt tbody th b { display: block; font: 650 15px/1.3 var(--m-body); color: var(--m-ink); }
.m-hbt tbody th em { display: inline-block; margin-bottom: 5px; padding: 3px 8px; border-radius: 99px; font: 700 11px/1 var(--m-body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--m-accent); background: var(--m-soft); }
.m-hbt tbody tr { transition: background .2s; } .m-hbt tbody tr:hover { background: color-mix(in srgb, var(--m-soft) 45%, #fff); }
.m-hbt td { color: var(--m-body-ink); }
.m-hbtbtn { text-align: right !important; } .m-hbtbtn .btn { padding: 11px 16px; font-size: 14px; white-space: nowrap; }
/* picker: choose by criterion */
.m-hbpk { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 18px; }
.m-hbpkg { min-width: 0; padding: 20px; background: #fff; border-radius: var(--m-radius); border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); }
body.m .m-hbpkg h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; font-size: 21px; }
.m-hbpkg h3 small { font: 700 12px/1 var(--m-body); letter-spacing: .1em; color: var(--m-accent); }
.m-hbpkg > p { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--m-body-ink); }
.m-hbpkg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.m-hbpko { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 12px; text-decoration: none; color: var(--m-ink) !important; background: var(--m-bg); border: 1.5px solid transparent; transition: border-color .25s, transform .3s var(--m-ease), background .25s; }
.m-hbpko:is(:hover, :focus-visible) { border-color: var(--m-accent); transform: translateX(3px); background: #fff; }
.m-hbpkim { display: block; width: 54px; height: 54px; overflow: hidden; border-radius: 10px; background: #fff; }
.m-hbpkim img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.m-hbpktx { min-width: 0; } .m-hbpktx b { display: block; font: 700 15px/1.25 var(--m-body); }
.m-hbpktx small { display: block; margin-top: 2px; font: 500 13px/1.3 var(--m-body); color: var(--m-body-ink); }
.m-hbpktx em { display: block; margin-top: 3px; font: 600 12.5px/1.3 var(--m-body); font-style: normal; color: var(--m-accent); }
.m-hbpko .arr { font-style: normal; font-weight: 700; color: var(--m-accent); transition: transform .25s var(--m-ease); } .m-hbpko:hover .arr { transform: translateX(3px); }
/* use-case collections → category pages */
.m-hbcol { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.m-hbcoli { display: flex; flex-direction: column; min-width: 0; overflow: hidden; text-decoration: none; color: var(--m-ink) !important; background: #fff; border-radius: var(--m-radius); border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); transition: transform .3s var(--m-ease), box-shadow .3s; }
.m-hbcoli:is(:hover, :focus-visible) { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(20,24,40,.1); }
.m-hbcolim { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 160px; padding: 18px 18px 0; background: var(--m-soft); }
.m-hbcolim img { width: 31%; height: 128px; object-fit: contain; mix-blend-mode: multiply; transition: transform .45s var(--m-ease); }
.m-hbcoli:hover .m-hbcolim img:nth-child(2) { transform: translateY(-6px); }
.m-hbcoltx { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.m-hbcoltx small { font: 700 11.5px/1.3 var(--m-body); letter-spacing: .12em; text-transform: uppercase; color: var(--m-accent); }
.m-hbcoltx b { font: 600 20px/1.25 var(--m-head); color: var(--m-ink); }
.m-hbcoltx em { font-style: normal; font-size: 14.5px; line-height: 1.5; color: var(--m-body-ink); }
.m-hbcoltx i { margin-top: 4px; font: 700 14.5px/1 var(--m-body); font-style: normal; color: var(--m-accent); }
/* steps */
.m-hbst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 18px; counter-reset: hb; }
.m-hbst li { counter-increment: hb; position: relative; min-width: 0; padding: 22px 20px 20px; background: #fff; border-radius: var(--m-radius); border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); }
.m-hbst li::before { content: counter(hb, decimal-leading-zero); display: block; margin-bottom: 12px; font: 600 30px/1 var(--m-head); color: var(--m-accent); font-variant-numeric: lining-nums tabular-nums; }
.m-hbst b { display: block; margin-bottom: 6px; font: 700 16.5px/1.3 var(--m-body); color: var(--m-ink); }
.m-hbst p { margin: 0; font-size: 14.5px; line-height: 1.55; }
/* method / how this guide chooses */
.m-hbme { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 36px; align-items: start; padding: 38px; border-radius: calc(var(--m-radius) + 6px); background: var(--m-ink); color: #fff; }
body.m .m-hbme .m-hbhead { margin: 0; } body.m .m-hbme .m-hbhead h2 { color: #fff; }
.m-hbme .m-hbkick { color: color-mix(in srgb, var(--m-accent) 35%, #fff); }
.m-hbmel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.m-hbmel li { padding-top: 14px; border-top: 2px solid rgba(255,255,255,.2); }
.m-hbmel b { display: block; margin-bottom: 6px; font: 700 16px/1.3 var(--m-body); color: #fff; }
.m-hbmel p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.84); }
/* guide hub */
.m-hbgh { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.m-hbghf { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--m-ink) !important; background: #fff; border-radius: var(--m-radius); border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); transition: transform .3s var(--m-ease), box-shadow .3s; }
.m-hbghf:is(:hover, :focus-visible) { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(20,24,40,.1); }
.m-hbghim { position: relative; display: block; aspect-ratio: 16 / 8; overflow: hidden; background: var(--m-soft); }
.m-hbghim img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; padding: 18px; mix-blend-mode: multiply; }
.m-hbghtx { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.m-hbghtx small { font: 700 11.5px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: var(--m-accent); }
.m-hbghtx b { font: 600 22px/1.25 var(--m-head); color: var(--m-ink); text-wrap: balance; }
.m-hbghtx em { font-style: normal; font-size: 15px; line-height: 1.5; color: var(--m-body-ink); }
.m-hbghtx i { font: 700 14.5px/1 var(--m-body); font-style: normal; color: var(--m-accent); }
.m-hbghl { display: grid; gap: 20px; min-width: 0; }
body.m .m-hbghl h3 { margin: 0 0 6px; font: 700 12.5px/1.2 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: var(--m-accent); }
.m-hbghl ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--m-ink) 12%, transparent); }
.m-hbghl li a { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 2px; border-bottom: 1px solid color-mix(in srgb, var(--m-ink) 12%, transparent); text-decoration: none; color: var(--m-ink); font: 600 15.5px/1.4 var(--m-body); transition: color .2s, padding .25s var(--m-ease); }
.m-hbghl li a::after { content: "→"; flex: none; color: var(--m-accent); }
.m-hbghl li a:is(:hover, :focus-visible) { color: var(--m-accent); padding-left: 8px; }
.m-hbghall { margin: 22px 0 0; } .m-hbghall a { font: 700 15px/1 var(--m-body); }
@media (max-width: 900px) {
  .m-hbqp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-hbpk, .m-hbgh { grid-template-columns: minmax(0, 1fr); }
  .m-hbst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-hbme { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 28px 22px; }
}
@media (max-width: 760px) {
  .m-hbtw { overflow: visible; border: 0; background: none; border-radius: 0; }
  .m-hbt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .m-hbt, .m-hbt tbody { display: block; }
  .m-hbt tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; margin: 0 0 14px; padding: 14px; background: #fff; border-radius: var(--m-radius); border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); }
  .m-hbt tbody tr > * { display: block; padding: 0; border: 0 !important; }
  .m-hbt tbody th { grid-column: 1 / -1; min-width: 0; }
  .m-hbt td { font-size: 14px; line-height: 1.4; }
  .m-hbt td::before { content: attr(data-l); display: block; margin-bottom: 3px; font: 700 10.5px/1.3 var(--m-body); letter-spacing: .1em; text-transform: uppercase; color: var(--m-ink); opacity: .72; }
  .m-hbtbtn { grid-column: 1 / -1; text-align: left !important; } .m-hbtbtn::before { display: none !important; }
  .m-hbtbtn .btn { display: flex; justify-content: center; width: 100%; }
}
@media (max-width: 560px) {
  body.m .m-hb { padding: 44px 0; }
  .m-hbqp, .m-hbst, .m-hbmel { grid-template-columns: minmax(0, 1fr); }
  .m-hbqpi { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-items: start; }
  .m-hbqpi > .m-hbneed { grid-column: 1 / -1; }
  .m-hbqpi > .m-hbshot { grid-row: span 2; aspect-ratio: 1; }
  .m-hbqpi > .m-hbshot img { padding: 6px; }
  .m-hbqpi > .btn { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
  .m-hbcolim { height: 130px; } .m-hbcolim img { height: 104px; }
}

/* ===== batch 14.11.2026: shared hero layout (botica …) ===== */
:is(body.hv-botica, body.hv-popup, body.hv-barber, body.hv-backyard, body.hv-washbay, body.hv-citrus) .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); color: var(--m-ink); }
:is(body.hv-botica, body.hv-popup, body.hv-barber, body.hv-backyard, body.hv-washbay, body.hv-citrus) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:is(body.hv-botica, body.hv-popup, body.hv-barber, body.hv-backyard, body.hv-washbay, body.hv-citrus) .m-hero .m-copy > * { animation: m-rise .8s var(--m-ease) both; }
:is(body.hv-botica, body.hv-popup, body.hv-barber, body.hv-backyard, body.hv-washbay, body.hv-citrus) .m-hero .m-copy > :nth-child(3) { animation-delay: .08s; } :is(body.hv-botica, body.hv-popup, body.hv-barber, body.hv-backyard, body.hv-washbay, body.hv-citrus) .m-hero .m-copy > :nth-child(4) { animation-delay: .16s; } :is(body.hv-botica, body.hv-popup, body.hv-barber, body.hv-backyard, body.hv-washbay, body.hv-citrus) .m-hero .m-copy > :nth-child(n+5) { animation-delay: .24s; }
:is(body.hv-botica, body.hv-popup, body.hv-barber, body.hv-backyard, body.hv-washbay, body.hv-citrus) .m-hero h1 { color: var(--m-ink) !important; text-wrap: balance; max-width: 18ch; font-size: clamp(32px, 3.8vw, 54px) !important; line-height: 1.08 !important; }
:is(body.hv-botica, body.hv-popup, body.hv-barber, body.hv-backyard, body.hv-washbay, body.hv-citrus) .m-hero .bgcredit { display: none; }
:is(body.hv-botica, body.hv-popup, body.hv-barber, body.hv-backyard, body.hv-washbay, body.hv-citrus) .m-hero .sub { color: var(--m-body-ink); }
:is(body.hv-botica, body.hv-popup, body.hv-barber, body.hv-backyard, body.hv-washbay, body.hv-citrus) .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: var(--m-ink) !important; background: rgba(255,255,255,.7) !important; }
:is(body.hv-botica, body.hv-popup, body.hv-barber, body.hv-backyard, body.hv-washbay, body.hv-citrus) .m-hero .m-btn-ghost:hover { background: var(--m-ink) !important; color: #fff !important; }
:is(body.hv-botica, body.hv-popup, body.hv-barber, body.hv-backyard, body.hv-washbay, body.hv-citrus) .m-hero .m-chips span { background: #fff; color: var(--m-ink); border: 1.5px solid color-mix(in srgb, var(--m-ink) 14%, transparent); backdrop-filter: none; }
:is(.m-gq, .m-fw, .m-db, .m-aj, .m-sj, .m-gd) { position: relative; width: min(100%, 600px); justify-self: center; container-type: inline-size; aspect-ratio: 600 / 560; isolation: isolate; }
:is(.m-gq, .m-fw, .m-db, .m-aj, .m-sj, .m-gd) a { -webkit-tap-highlight-color: transparent; }
:is(.m-gq, .m-fw, .m-db, .m-aj, .m-sj, .m-gd) img { display: block; width: 100%; height: auto; border-radius: 0; }
:is(.m-gqcats, .m-fwcats, .m-dbcats, .m-ajcats, .m-sjcats, .m-gdcats) { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; padding: 10px clamp(18px, 4vw, 72px) clamp(26px, 4vh, 44px); }
:is(.m-gqtile, .m-fwtile, .m-dbtile, .m-ajtile, .m-sjtile, .m-gdtile) { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; padding: 14px 14px 12px 12px; background: #fff; color: var(--m-ink) !important; overflow: hidden; animation: m-rise .7s calc(.8s + var(--i, 0) * .08s) var(--m-ease) backwards; transition: transform .35s var(--m-ease), border-color .3s, box-shadow .3s; }
:is(.m-gqimg, .m-fwimg, .m-dbimg, .m-ajimg, .m-sjimg, .m-gdimg) { flex: none; display: block; overflow: hidden; width: 58px; height: 58px; padding: 4px; }
:is(.m-gqimg, .m-fwimg, .m-dbimg, .m-ajimg, .m-sjimg, .m-gdimg) img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; transition: transform .45s var(--m-ease); }
:is(.m-gqtile, .m-fwtile, .m-dbtile, .m-ajtile, .m-sjtile, .m-gdtile):hover :is(.m-gqimg, .m-fwimg, .m-dbimg, .m-ajimg, .m-sjimg, .m-gdimg) img { transform: scale(1.08) rotate(-4deg); }
:is(.m-gqtile, .m-fwtile, .m-dbtile, .m-ajtile, .m-sjtile, .m-gdtile):focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; }
:is(.m-gqtile, .m-fwtile, .m-dbtile, .m-ajtile, .m-sjtile, .m-gdtile):is(:hover, :focus-visible) { transform: translateY(-4px); }
:is(.m-gqtile, .m-fwtile, .m-dbtile, .m-ajtile, .m-sjtile, .m-gdtile) .m-q8tx b { font: 700 15px/1.2 var(--m-body); color: var(--m-ink); padding-right: 22px; }
:is(.m-gqtile, .m-fwtile, .m-dbtile, .m-ajtile, .m-sjtile, .m-gdtile) em { position: absolute; right: 12px; top: 12px; font-style: normal; }
:is(.m-gqspecs, .m-fwspecs, .m-dbspecs, .m-ajspecs, .m-sjspecs, .m-gdspecs) { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -6px 0 18px; }
:is(.m-gqspecs, .m-fwspecs, .m-dbspecs, .m-ajspecs, .m-sjspecs, .m-gdspecs) > span { flex-basis: 100%; margin: 0 0 2px; font: 700 12px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; }
:is(.m-gqspecs, .m-fwspecs, .m-dbspecs, .m-ajspecs, .m-sjspecs, .m-gdspecs) a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; background: #fff; color: var(--m-ink) !important; text-decoration: none; transition: border-color .25s, transform .3s var(--m-ease), box-shadow .3s; animation: m-rise .6s calc(.45s + var(--i, 0) * .06s) var(--m-ease) backwards; }
:is(.m-gqspecs, .m-fwspecs, .m-dbspecs, .m-ajspecs, .m-sjspecs, .m-gdspecs) a:is(:hover, :focus-visible) { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,24,40,.12); }
:is(.m-gqspecs, .m-fwspecs, .m-dbspecs, .m-ajspecs, .m-sjspecs, .m-gdspecs) b { display: grid; place-items: center; min-width: 40px; height: 28px; padding: 0 10px; color: #fff; font: 700 13px/1 var(--m-body); white-space: nowrap; }
:is(.m-gqspecs, .m-fwspecs, .m-dbspecs, .m-ajspecs, .m-sjspecs, .m-gdspecs) small { font: 600 12.5px/1 var(--m-body); white-space: nowrap; color: var(--m-body-ink); }
:is(body.hv-botica, body.hv-popup, body.hv-barber, body.hv-backyard, body.hv-washbay, body.hv-citrus) .m-acard .m-art { position: relative; background: #fff !important; border-bottom: 1px solid color-mix(in srgb, var(--m-ink) 7%, transparent); }
:is(body.hv-botica, body.hv-popup, body.hv-barber, body.hv-backyard, body.hv-washbay, body.hv-citrus) .m-acard .m-art img { position: absolute; left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); max-height: none; object-fit: contain; border-radius: 0; }
@media (max-width: 900px) {
  :is(body.hv-botica, body.hv-popup, body.hv-barber, body.hv-backyard, body.hv-washbay, body.hv-citrus) .m-hero { min-height: 0; }
  :is(body.hv-botica, body.hv-popup, body.hv-barber, body.hv-backyard, body.hv-washbay, body.hv-citrus) .m-hero .m-inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  :is(body.hv-botica, body.hv-popup, body.hv-barber, body.hv-backyard, body.hv-washbay, body.hv-citrus) .m-hero .m-copy { display: contents; }
  :is(body.hv-botica, body.hv-popup, body.hv-barber, body.hv-backyard, body.hv-washbay, body.hv-citrus) .m-hero .m-copy > * { order: 1; }
  :is(body.hv-botica, body.hv-popup, body.hv-barber, body.hv-backyard, body.hv-washbay, body.hv-citrus) .m-hero .m-copy > :is(.m-ctas, nav, .m-chips) { order: 3; }
  :is(.m-gq, .m-fw, .m-db, .m-aj, .m-sj, .m-gd) { order: 2; width: min(100%, 520px); align-self: center; margin: 8px 0 4px; }
  :is(.m-gqcats, .m-fwcats, .m-dbcats, .m-ajcats, .m-sjcats, .m-gdcats) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-gqcats, .m-fwcats, .m-dbcats, .m-ajcats, .m-sjcats, .m-gdcats) > a:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  :is(.m-gqspecs, .m-fwspecs, .m-dbspecs, .m-ajspecs, .m-sjspecs, .m-gdspecs) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-gqspecs, .m-fwspecs, .m-dbspecs, .m-ajspecs, .m-sjspecs, .m-gdspecs) > span { grid-column: 1 / -1; }
  :is(.m-gqspecs, .m-fwspecs, .m-dbspecs, .m-ajspecs, .m-sjspecs, .m-gdspecs) a { flex-direction: column; align-items: flex-start; gap: 5px; padding: 6px 10px 8px 6px; }
  :is(.m-gqspecs, .m-fwspecs, .m-dbspecs, .m-ajspecs, .m-sjspecs, .m-gdspecs) small { white-space: normal; line-height: 1.2; padding-left: 2px; }
}
@media (max-width: 420px) {
  :is(.m-gqtile, .m-fwtile, .m-dbtile, .m-ajtile, .m-sjtile, .m-gdtile) { gap: 9px; padding: 10px; } :is(.m-gqimg, .m-fwimg, .m-dbimg, .m-ajimg, .m-sjimg, .m-gdimg) { width: 44px; height: 44px; }
  :is(.m-gqtile, .m-fwtile, .m-dbtile, .m-ajtile, .m-sjtile, .m-gdtile) .m-q8tx b { font-size: 13px; padding-right: 0; } :is(.m-gqtile, .m-fwtile, .m-dbtile, .m-ajtile, .m-sjtile, .m-gdtile) em { display: none; }
}

/* botica (Goicoechea): azulejo tile wall with drifting shutter light, an arched plaster niche on a marble shelf with the real variety pack, the Reaffirming bottle and the Crio gel tube; an arnica sprig blooms, a cream swirl draws itself in a dish, a read-the-label card steps through the ingredient pairs, a size tag swings */
body.hv-botica .m-hero { background: radial-gradient(46% 60% at 78% 38%, #fff, transparent 70%), radial-gradient(30% 40% at 0% 100%, rgba(201,149,43,.14), transparent 70%), linear-gradient(120deg, #e9f2ed, #fbf8f2 55%, #f6efe2); }
body.hv-botica .m-hero .eyebrow { color: #8a5f12; letter-spacing: .14em; }
body.hv-botica .m-hero h1 { font-weight: 600 !important; letter-spacing: -.015em; }
.m-gqwall { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%23f6f2e8'/%3E%3Cpath d='M20 5c4 6 9 10 15 15-6 5-11 9-15 15-4-6-9-10-15-15 6-5 11-9 15-15z' fill='%232f7d6b'/%3E%3Cpath d='M20 12c2 3 5 6 8 8-3 2-6 5-8 8-2-3-5-6-8-8 3-2 6-5 8-8z' fill='%23f6f2e8'/%3E%3Ccircle cx='20' cy='20' r='2.6' fill='%23c9952b'/%3E%3Cpath d='M0 0h8a8 8 0 0 1-8 8zM40 0v8a8 8 0 0 1-8-8zM40 40h-8a8 8 0 0 1 8-8zM0 40v-8a8 8 0 0 1 8 8z' fill='%238cc2b2'/%3E%3Cpath d='M0 .4h40M.4 0v40' stroke='%23ddd5c2' stroke-width='.8'/%3E%3C/svg%3E") 0 0 / 10cqw 10cqw; box-shadow: 0 26px 50px rgba(23,50,44,.2), inset 0 0 0 1px rgba(23,50,44,.08); animation: m-gqin .9s .05s var(--m-ease) backwards; }
.m-gqwall::after { content: ""; position: absolute; left: 0; right: 0; top: 70%; bottom: 0; background: radial-gradient(70% 90% at 50% 0, rgba(255,255,255,.18), transparent 70%), linear-gradient(180deg, #2f6f60, #23584c); box-shadow: inset 0 1.4cqw 1.6cqw rgba(0,0,0,.25); }
.m-gqwall::before { content: ""; position: absolute; left: 0; right: 0; top: 70%; height: 2.4cqw; z-index: 1; translate: 0 -100%; background: repeating-linear-gradient(90deg, #c9952b 0 2cqw, #f6f2e8 2cqw 2.4cqw, #2f7d6b 2.4cqw 4.4cqw, #f6f2e8 4.4cqw 4.8cqw); opacity: .9; }
.m-gqsun { position: absolute; inset: 0 0 30%; z-index: 1; border-radius: 28px 28px 0 0; pointer-events: none; background: repeating-linear-gradient(105deg, rgba(255,250,232,0) 0 6cqw, rgba(255,250,232,.55) 6cqw 10cqw); mix-blend-mode: soft-light; -webkit-mask: linear-gradient(90deg, transparent, #000 25%, #000 60%, transparent); mask: linear-gradient(90deg, transparent, #000 25%, #000 60%, transparent); -webkit-mask-size: 200% 100%; mask-size: 200% 100%; animation: m-gqsun 16s ease-in-out infinite alternate; }
.m-gqniche { position: absolute; left: 15%; top: 8%; width: 60%; height: 60%; z-index: 2; border-radius: 999px 999px 0 0; background: radial-gradient(60% 50% at 50% 30%, #fffdf8, #f1e9da 70%, #e6dac4); box-shadow: inset 0 2cqw 3cqw rgba(120,90,40,.16), inset 0 -1cqw 2cqw rgba(255,255,255,.6), 0 0 0 1.2cqw #f6f2e8, 0 0 0 1.6cqw #2f7d6b; animation: m-gqin .9s .15s var(--m-ease) backwards; }
.m-gqniche::after { content: ""; position: absolute; left: 50%; top: 18%; width: 70%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,231,170,.6), transparent 66%); animation: m-gqglow 6s ease-in-out infinite; }
.m-gqshelf { position: absolute; left: 3%; right: 3%; top: 67.5%; height: 3.6%; z-index: 3; border-radius: 6px; background: linear-gradient(100deg, transparent 20%, rgba(150,140,125,.25) 22%, transparent 26% 60%, rgba(150,140,125,.2) 63%, transparent 66%), linear-gradient(180deg, #fbf9f5, #e8e2d8); box-shadow: 0 1.2cqw 1.6cqw rgba(0,0,0,.28), inset 0 -.5cqw 0 #d6cdbd; }
.m-gqtrio, .m-gqreaf, .m-gqcrio { position: absolute; display: block; transition: transform .45s var(--m-ease); }
.m-gqtrio { left: 17%; bottom: 31.6%; width: 56%; z-index: 5; filter: drop-shadow(0 14px 12px rgba(23,50,44,.28)); animation: m-gqin 1s .2s var(--m-ease) backwards; }
.m-gqreaf { right: 7.5%; bottom: 31.8%; width: 15.5%; z-index: 4; filter: drop-shadow(0 12px 10px rgba(23,50,44,.26)); animation: m-gqin 1s .35s var(--m-ease) backwards; }
.m-gqcrio { right: 4%; bottom: 31.4%; width: 10.5%; z-index: 6; rotate: 9deg; transform-origin: 50% 100%; filter: drop-shadow(0 10px 8px rgba(23,50,44,.3)); animation: m-gqin 1s .45s var(--m-ease) backwards; }
.m-gqtrio:hover, .m-gqreaf:hover { transform: translateY(-6px); } .m-gqcrio:hover { transform: translateY(-6px) rotate(-4deg); }
.m-gqarn { position: absolute; left: 1.5%; bottom: 31.5%; width: 17%; height: auto; z-index: 6; overflow: visible; }
.m-gqarn .sw { transform-origin: 50% 100%; animation: m-gqsway 7s 1.6s ease-in-out infinite; }
.m-gqarn .st { fill: none; stroke: #4f7a3a; stroke-width: 2.6; stroke-linecap: round; }
.m-gqarn .lf { fill: #6f9a4a; }
.m-gqarn .fl { animation: m-gqbloom 1.1s calc(.7s + var(--i) * .25s) cubic-bezier(.3,1.5,.5,1) backwards; }
.m-gqarn .pt { fill: #f2b51d; stroke: #d9960f; stroke-width: .6; }
.m-gqarn .ce { fill: #c97a12; }
.m-gqdish { position: absolute; left: 63%; bottom: 7%; width: 31%; height: auto; z-index: 7; overflow: visible; animation: m-gqin 1s .55s var(--m-ease) backwards; }
.m-gqdish .sh { fill: rgba(0,0,0,.22); } .m-gqdish .bw { fill: #2f7d6b; } .m-gqdish .rm { fill: #f6f2e8; stroke: #2f7d6b; stroke-width: 2.4; } .m-gqdish .in { fill: #e9e1d1; }
.m-gqdish .cr { fill: none; stroke: #fffdf8; stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 1px 0 rgba(150,130,100,.6)); animation: m-gqswirl 7s 1.2s ease-in-out infinite; }
.m-gqlab { position: absolute; left: 4%; bottom: 4%; z-index: 8; display: grid; gap: .9cqw; width: 52%; padding: 2.2cqw 2.4cqw 2.4cqw; border-radius: 14px; background: #fffdf8; border: 1.5px solid #e6dcc6; box-shadow: 0 14px 26px rgba(10,30,25,.3); rotate: -1.5deg; animation: m-gqin .9s .8s var(--m-ease) backwards; }
.m-gqlab > small { font: 700 clamp(8.5px, 1.8cqw, 11px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #8a5f12; }
.m-gqll { display: grid; gap: .3cqw; }
.m-gqll i { display: flex; align-items: center; gap: 1.4cqw; padding: .8cqw 1.2cqw; border-radius: 8px; font: 600 clamp(10px, 2.2cqw, 13.5px)/1.1 var(--m-body); font-style: normal; color: #17322c; white-space: nowrap; animation: m-gqstep 8s calc(1.6s + var(--i) * 2s) linear infinite; }
.m-gqll em { flex: none; width: 2.2cqw; min-width: 9px; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 .5cqw color-mix(in srgb, var(--c) 25%, transparent); }
.m-gqtag { position: absolute; left: 75%; top: 4%; z-index: 7; display: grid; justify-items: center; transform-origin: 50% 0; animation: m-gqin .8s .9s var(--m-ease) backwards, m-gqswing 5s 1.8s ease-in-out infinite; }
.m-gqtag i { display: block; width: 1.5px; height: 6cqw; background: #8a5f12; }
.m-gqtag b { display: grid; place-items: center; padding: 1.2cqw 1.8cqw; border-radius: 99px; font: 700 clamp(8px, 1.8cqw, 11px)/1 var(--m-body); white-space: nowrap; color: #fff; background: #2f7d6b; box-shadow: 0 6px 12px rgba(23,50,44,.3), inset 0 0 0 1.5px rgba(255,255,255,.35); }
@keyframes m-gqin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-gqsun { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes m-gqglow { 0%, 100% { opacity: .55; scale: .94; } 50% { opacity: 1; scale: 1.04; } }
@keyframes m-gqsway { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
@keyframes m-gqbloom { from { opacity: 0; transform: scale(.15) rotate(-60deg); } }
@keyframes m-gqswirl { 0% { stroke-dashoffset: 100; opacity: 1; } 45%, 80% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes m-gqstep { 0%, 22% { background: #e6f0ea; box-shadow: inset 0 0 0 1.5px #9cc6b6; } 25%, 100% { background: transparent; box-shadow: none; } }
@keyframes m-gqswing { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
.m-gqtile { border-radius: 18px 18px 14px 14px; border: 1.5px solid #dfe8e2; box-shadow: 0 10px 22px rgba(23,50,44,.06); }
.m-gqimg { border-radius: 999px 999px 12px 12px; background: radial-gradient(circle at 50% 40%, #fff, #e6f0ea); }
.m-gqtile:is(:hover, :focus-visible) { border-color: #2f7d6b; box-shadow: 0 16px 30px rgba(23,50,44,.12); }
.m-gqtile .m-q8tx small { color: #8a5f12; }
.m-gqtile em { width: 12px; height: 12px; rotate: 45deg; background: #2f7d6b; box-shadow: inset 0 0 0 3px #f6f2e8, 0 0 0 1px #2f7d6b; opacity: .5; transition: opacity .3s, rotate .45s var(--m-ease); }
.m-gqtile:is(:hover, :focus-visible) em { opacity: 1; rotate: 225deg; }
.m-gqspecs > span { color: #8a5f12; }
.m-gqspecs a { border-radius: 999px; border: 1.5px solid #dfe8e2; } .m-gqspecs a:is(:hover, :focus-visible) { border-color: #2f7d6b; }
.m-gqspecs b { border-radius: 999px; background: #276a5a; } .m-gqspecs a:nth-of-type(2n) b { background: #8a5f12; }
@media (max-width: 600px) { .m-gqspecs a { border-radius: 14px; } }

/* dispense (Goicoechea): a soft lotion-pump pill; on hover a cream drop falls from the nozzle notch into the button, a cream wave rises from the bottom and the arrow nudges forward */
body.bv-dispense .btn { border-radius: 999px; padding: 15px 26px; letter-spacing: .005em; }
body.bv-dispense :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #2f7d6b, #276a5a 60%, #22604f); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 22px rgba(39,106,90,.26); }
body.bv-dispense :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #276a5a, #1e5446); color: #fff; }
body.bv-dispense .btn::before { content: ""; position: absolute; left: 50%; top: -12px; width: 9px; height: 9px; margin-left: -4.5px; z-index: 1; pointer-events: none; border-radius: 50% 0 50% 50%; rotate: -45deg; background: #fffdf8; box-shadow: 0 0 0 1px rgba(0,0,0,.06); opacity: 0; }
body.bv-dispense .btn:is(:hover, :focus-visible)::before { animation: m-dsdrop .7s cubic-bezier(.5,0,.8,.6) forwards; }
body.bv-dispense .btn::after { inset: auto 0 0 0; height: 0; transform: none; background: radial-gradient(55% 9px at 30% 0, rgba(255,253,248,.28) 98%, transparent), radial-gradient(45% 8px at 78% 1px, rgba(255,253,248,.24) 98%, transparent), rgba(255,253,248,.16); transition: height .55s var(--m-ease) .25s; }
body.bv-dispense .btn:is(:hover, :focus-visible)::after { transform: none; height: 100%; }
body.bv-dispense .btn .arr { display: inline-block; transition: transform .25s var(--m-ease) .35s; } body.bv-dispense .btn:hover .arr { transform: translateX(4px); }
body.bv-dispense :is(.m-btn-ghost, .btn.ghost)::before { background: var(--m-accent); }
body.bv-dispense .m-cta .btn.m-white:hover { color: #1e5446; }
@keyframes m-dsdrop { 0% { opacity: 0; top: -12px; scale: .6; } 20% { opacity: 1; scale: 1; } 70% { opacity: 1; top: 42%; scale: 1; } 100% { opacity: 0; top: 52%; scale: 2.4 .6; } }

/* ly-botica (Goicoechea): azulejo bands between sections, arched product frames, label-style cards */
body.ly-botica main section > .wrap > h2::after, body.ly-botica .m-hbhead h2::after { content: ""; display: block; width: 92px; height: 8px; margin-top: 12px; background: repeating-linear-gradient(90deg, #2f7d6b 0 14px, transparent 14px 18px, #c9952b 18px 26px, transparent 26px 30px); border-radius: 2px; }
body.ly-botica .m-hbkick { display: inline-flex; align-items: center; gap: 9px; color: #8a5f12; }
body.ly-botica .m-hbkick::before { content: ""; width: 10px; height: 10px; rotate: 45deg; background: #2f7d6b; box-shadow: inset 0 0 0 2.5px #fbf8f2, 0 0 0 1px #2f7d6b; }
body.ly-botica .m-hb-quickpick, body.ly-botica .m-hb-guidehub, body.ly-botica #compare { position: relative; background: linear-gradient(180deg, #e6f0ea, #f2f6f1); padding: 72px 0 64px; }
body.ly-botica .m-hb-quickpick::before, body.ly-botica .m-hb-guidehub::before, body.ly-botica #compare::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14'%3E%3Crect width='28' height='14' fill='%23f6f2e8'/%3E%3Cpath d='M14 1l6 6-6 6-6-6z' fill='%232f7d6b'/%3E%3Ccircle cx='14' cy='7' r='1.6' fill='%23c9952b'/%3E%3Cpath d='M0 1l6 6-6 6zM28 1l-6 6 6 6z' fill='%238cc2b2'/%3E%3C/svg%3E") 0 0 / 28px 14px repeat-x; }
body.ly-botica .m-hbqpi { border-radius: 18px; border-color: #dfe8e2; }
body.ly-botica .m-hbshot { border-radius: 999px 999px 14px 14px; aspect-ratio: 5 / 4; background: radial-gradient(70% 70% at 50% 35%, #fff, #e9f1ec); }
body.ly-botica .m-hbneed small { color: #8a5f12; }
body.ly-botica .m-hbqpi .btn { margin-top: 2px; }
body.ly-botica #compare .tablewrap { border-radius: 18px; overflow: auto; background: #fff; box-shadow: 0 12px 30px rgba(23,50,44,.07); }
body.ly-botica #compare table.spec thead th { background: #17322c; color: #fff; }
body.ly-botica .m-hb-steps { background: #fbf8f2; }
body.ly-botica .m-hbst li { border-radius: 999px 999px 18px 18px; padding-top: 30px; text-align: center; border-color: #dfe8e2; background: linear-gradient(180deg, #fff, #f8f4ea); }
body.ly-botica .m-hbst li::before { width: 56px; height: 56px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; font-size: 22px; color: #fff; background: #2f7d6b; box-shadow: inset 0 0 0 4px #2f7d6b, inset 0 0 0 6px #f6f2e8; }
body.ly-botica .m-hbnote { padding: 12px 16px; border-radius: 12px; background: #fff; border-left: 4px solid #c9952b; }
body.ly-botica .m-hbme { background: radial-gradient(60% 120% at 100% 0, rgba(201,149,43,.25), transparent 60%), linear-gradient(135deg, #17322c, #23584c); }
body.ly-botica .m-hbmel li { border-top-color: rgba(201,149,43,.55); }
body.ly-botica .m-hbghf { border-radius: 18px; } body.ly-botica .m-hbghim { background: radial-gradient(70% 90% at 50% 40%, #fff, #e6f0ea); }
body.ly-botica .pcard .shot { border-radius: 999px 999px 12px 12px; background: radial-gradient(70% 70% at 50% 35%, #fff, #eef4f0); }
body.ly-botica #faq details.faq { border-radius: 14px; }
body.ly-botica .m-cta .m-band { border-radius: 26px; background: radial-gradient(40% 90% at 88% 0%, rgba(201,149,43,.35), transparent 70%), linear-gradient(120deg, #17322c, #23584c 60%, #2f7d6b); }
body.ly-botica .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(201,149,43,.28), transparent 70%), linear-gradient(120deg, #17322c, #2f6f60); } body.ly-botica .m-page-hero .eyebrow { color: #f2c76b; }
body.ly-botica .m-page-hero .btn.m-btn-main { background: #fff; color: #1e5446; } body.ly-botica .m-page-hero .btn.m-btn-main:hover { background: #e6f0ea; color: #17322c; }
body.ly-botica footer.site { background: #17322c; color: #e3ece7; border: 0; } body.ly-botica footer.site nav a { color: #f2c76b; }
body.hv-botica :is(h1, h2, h3, .m-gqlab) { font-variant-numeric: lining-nums; }

/* popup (FURID): a stitched saddle-leather valet tray on a dark desk under a lamp; the real metal pop-up AirTag wallet fans its cards up and back, Find My rings pulse from the AirTag holder; the real cognac slim wallet and the real chain trifold lie beside it; an RFID card sends reader waves into a shield; a capacity card steps 16 - 15 - 13 - 12 */
body.hv-popup .m-hero { background: radial-gradient(44% 60% at 80% 36%, #fff, transparent 70%), radial-gradient(30% 40% at 0% 100%, rgba(163,82,28,.14), transparent 70%), linear-gradient(120deg, #eceae6, #f7f5f2 55%, #f3ebe2); }
body.hv-popup .m-hero .eyebrow { color: #874314; letter-spacing: .14em; }
body.hv-popup .m-hero h1 { font-weight: 800 !important; letter-spacing: -.01em; line-height: .98 !important; font-size: clamp(38px, 4.6vw, 66px) !important; }
.m-fwdesk { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; background: radial-gradient(60% 50% at 24% 18%, rgba(255,214,150,.22), transparent 70%), repeating-linear-gradient(176deg, rgba(255,255,255,.025) 0 2px, transparent 2px 9px), linear-gradient(160deg, #2b2f35, #1d2025 60%, #16181c); box-shadow: 0 26px 50px rgba(29,32,37,.28), inset 0 0 0 1px rgba(255,255,255,.05); animation: m-fwin .9s .05s var(--m-ease) backwards; }
.m-fwlamp { position: absolute; left: -6%; top: -10%; width: 70%; aspect-ratio: 1; z-index: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,214,150,.35), transparent 62%); animation: m-fwlamp 7s ease-in-out infinite; }
.m-fwtray { position: absolute; left: 4%; right: 4%; top: 4%; height: 70%; z-index: 2; border-radius: 24px; background: radial-gradient(70% 60% at 30% 25%, rgba(255,255,255,.22), transparent 70%), repeating-linear-gradient(32deg, rgba(90,45,15,.05) 0 2px, transparent 2px 6px), linear-gradient(160deg, #dcae7a, #c98a52 55%, #b4743f); box-shadow: inset 0 1.4cqw 2.4cqw rgba(90,45,15,.35), inset 0 -1cqw 1.6cqw rgba(255,240,220,.25), 0 1.6cqw 2.4cqw rgba(0,0,0,.45); animation: m-fwin .9s .12s var(--m-ease) backwards; }
.m-fwtray::before { content: ""; position: absolute; inset: 2.2cqw; border-radius: 16px; border: 2px dashed rgba(255,244,228,.55); }
.m-fwchain, .m-fwcog, .m-fwpop { position: absolute; display: block; }
.m-fwchain { right: 6%; top: 9%; width: 37%; z-index: 3; rotate: 6deg; filter: drop-shadow(0 12px 10px rgba(60,30,10,.4)); animation: m-fwin 1s .3s var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-fwcog { left: 36%; top: 17%; width: 21%; z-index: 4; rotate: -7deg; filter: drop-shadow(0 14px 12px rgba(60,30,10,.42)); animation: m-fwin 1s .38s var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-fwchain:hover, .m-fwcog:hover { transform: translateY(-6px); }
.m-fwpop { left: 10%; top: 8%; width: 22%; z-index: 5; animation: m-fwin 1s .2s var(--m-ease) backwards; }
.m-fwpopimg { position: relative; z-index: 2; display: block; filter: drop-shadow(0 16px 14px rgba(40,20,5,.45)); transition: transform .45s var(--m-ease); }
.m-fwpopimg:hover { transform: translateY(-5px); }
.m-fwfan { position: absolute; left: 14%; top: 1%; width: 60%; height: 15%; z-index: 1; }
.m-fwfan i { position: absolute; inset: 0; border-radius: 6px; transform-origin: 50% 160%; background: linear-gradient(135deg, rgba(255,255,255,.35), transparent 50%), var(--c); box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.25); animation: m-fwfan 6.5s calc(1.2s + var(--i) * .08s) var(--m-ease) infinite; }
.m-fwfan i::after { content: ""; position: absolute; left: 14%; top: 22%; width: 16%; height: 28%; border-radius: 2px; background: linear-gradient(135deg, #f5e3a1, #c9a227); }
.m-fwfan i:nth-child(1) { --r: -14deg; } .m-fwfan i:nth-child(2) { --r: -5deg; } .m-fwfan i:nth-child(3) { --r: 5deg; } .m-fwfan i:nth-child(4) { --r: 14deg; }
.m-fwping { position: absolute; left: 37%; top: 53%; z-index: 3; width: 0; height: 0; pointer-events: none; }
.m-fwping i { position: absolute; left: -9cqw; top: -9cqw; width: 18cqw; height: 18cqw; border-radius: 50%; border: 2px solid rgba(120,220,160,.9); opacity: 0; animation: m-fwping 3s calc(1.6s + var(--d, 0s)) ease-out infinite; }
.m-fwping i:nth-child(2) { --d: 1s; } .m-fwping i:nth-child(3) { --d: 2s; }
.m-fwcap { position: absolute; left: 4%; bottom: 4%; z-index: 8; display: grid; gap: .9cqw; width: 53%; padding: 2.2cqw 2.4cqw 2.4cqw; border-radius: 12px; background: #fbf8f4; border: 1.5px solid #e6dccd; box-shadow: 0 14px 26px rgba(0,0,0,.4); animation: m-fwin .9s .7s var(--m-ease) backwards; }
.m-fwcap > small { font: 700 clamp(8.5px, 1.8cqw, 11px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #874314; }
.m-fwcl { display: grid; gap: .3cqw; }
.m-fwcl i { display: flex; align-items: center; gap: 1.4cqw; padding: .6cqw 1.2cqw .6cqw .6cqw; border-radius: 7px; font: 600 clamp(9.5px, 2.05cqw, 13px)/1.1 var(--m-body); font-style: normal; color: #1d2025; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: m-fwstep 8s calc(1.6s + var(--i) * 2s) linear infinite; }
.m-fwcl b { flex: none; display: grid; place-items: center; min-width: 5cqw; height: 3.6cqw; min-height: 16px; border-radius: 5px; font: 800 clamp(10px, 2.4cqw, 15px)/1 var(--m-head); color: #fff; background: #1d2025; font-variant-numeric: lining-nums tabular-nums; }
.m-fwrf { position: absolute; right: 4%; bottom: 4%; z-index: 8; display: flex; align-items: center; gap: 1.6cqw; width: 37%; padding: 2cqw; border-radius: 12px; background: #2b2f35; border: 1.5px solid rgba(255,255,255,.12); color: #fff; box-shadow: 0 14px 26px rgba(0,0,0,.35); animation: m-fwin .9s .85s var(--m-ease) backwards; }
.m-fwrf svg { flex: none; width: 38%; height: auto; overflow: visible; }
.m-fwrf .wv path { fill: none; stroke: #e8a46a; stroke-width: 3.2; stroke-linecap: round; opacity: 0; animation: m-fwwave 2.4s calc(1.4s + var(--d, 0s)) ease-out infinite; }
.m-fwrf .wv path:nth-child(2) { --d: .25s; } .m-fwrf .wv path:nth-child(3) { --d: .5s; }
.m-fwrf .sh { fill: #1d2025; stroke: #c98a52; stroke-width: 3; stroke-linejoin: round; }
.m-fwrf .ck { fill: none; stroke: #78dca0; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: m-fwck 4.8s 1.8s ease-in-out infinite; }
.m-fwrf > span { display: grid; gap: .6cqw; min-width: 0; }
.m-fwrf b { font: 700 clamp(9.5px, 2.1cqw, 13px)/1.1 var(--m-body); white-space: nowrap; }
.m-fwrf small { font: 500 clamp(8.5px, 1.8cqw, 11.5px)/1.2 var(--m-body); color: rgba(255,255,255,.75); }
@keyframes m-fwin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-fwlamp { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes m-fwfan { 0%, 12%, 88%, 100% { transform: translateY(40%) rotate(0); } 30%, 70% { transform: translateY(-62%) rotate(var(--r)); } }
@keyframes m-fwping { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(1); } }
@keyframes m-fwwave { 0% { opacity: 0; transform: translateX(0); } 25% { opacity: 1; } 70%, 100% { opacity: 0; transform: translateX(22px); } }
@keyframes m-fwck { 0%, 20% { stroke-dashoffset: 30; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 30; } }
@keyframes m-fwstep { 0%, 22% { background: #f3e6d8; box-shadow: inset 0 0 0 1.5px #d9a873; } 25%, 100% { background: transparent; box-shadow: none; } }
.m-fwtile { border-radius: 12px; border: 1.5px solid #e4ded6; box-shadow: 0 10px 22px rgba(29,32,37,.06); }
.m-fwimg { border-radius: 10px; background: radial-gradient(circle at 50% 40%, #fff, #efe9e2); }
.m-fwtile:is(:hover, :focus-visible) { border-color: #a3521c; box-shadow: 0 16px 30px rgba(29,32,37,.12); }
.m-fwtile .m-q8tx small { color: #874314; }
.m-fwtile em { width: 18px; height: 12px; border-radius: 3px; background: linear-gradient(135deg, #f5e3a1, #c9a227); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); opacity: .55; transition: opacity .3s, transform .45s var(--m-ease); }
.m-fwtile:is(:hover, :focus-visible) em { opacity: 1; transform: translateY(-3px) rotate(-8deg); }
.m-fwspecs > span { color: #874314; }
.m-fwspecs a { border-radius: 10px; border: 1.5px solid #e4ded6; } .m-fwspecs a:is(:hover, :focus-visible) { border-color: #a3521c; }
.m-fwspecs b { border-radius: 7px; background: #1d2025; } .m-fwspecs a:nth-of-type(2n) b { background: #a3521c; }

/* cardpop (FURID): a card-cornered button; on hover a gold-chip card pops up out of its bottom edge at the right, tilts and settles next to the arrow, like a pop-up wallet ejecting a card */
body.bv-cardpop .btn { border-radius: 10px; padding: 15px 50px 15px 24px; letter-spacing: .01em; }
body.bv-cardpop :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #2a2e34, #1d2025); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -3px 0 #a3521c, 0 10px 22px rgba(29,32,37,.24); }
body.bv-cardpop :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #34383f, #22252a); color: #fff; }
body.bv-cardpop .btn::before { content: ""; position: absolute; right: 14px; top: 100%; width: 24px; height: 16px; z-index: -1; pointer-events: none; border-radius: 3px; background: radial-gradient(4px 3px at 7px 6px, #8a6d12 60%, transparent 70%), linear-gradient(135deg, #f5e3a1, #c9a227 60%, #a8861a); box-shadow: 0 2px 4px rgba(0,0,0,.3); transition: top .45s cubic-bezier(.3,1.5,.5,1), rotate .45s var(--m-ease); }
body.bv-cardpop .btn:is(:hover, :focus-visible)::before { top: calc(50% - 8px); rotate: -10deg; }
body.bv-cardpop .btn .arr { position: absolute; right: 18px; top: 50%; margin: -.5em 0 0; transition: transform .3s var(--m-ease), opacity .2s; }
body.bv-cardpop .btn:is(:hover, :focus-visible) .arr { transform: translateX(-30px); opacity: 0; }
body.bv-cardpop :is(.m-btn-ghost, .btn.ghost, .m-white) { padding-right: 24px; }
body.bv-cardpop :is(.m-btn-ghost, .btn.ghost, .m-white)::before { display: none; }
body.bv-cardpop :is(.m-btn-ghost, .btn.ghost, .m-white) .arr { position: static; margin-left: 6px; } body.bv-cardpop :is(.m-btn-ghost, .btn.ghost, .m-white):hover .arr { transform: translateX(4px); opacity: 1; }
body.bv-cardpop .m-cta .btn.m-white:hover { color: #874314; }

/* ly-ledger (FURID): spec-sheet rhythm — ruled section heads, a leather-stitched comparison table up front, card-slot quick picks, dark leather collection tiles */
body.ly-ledger main > section:not(.m-hero):not(.m-cta) { border-top: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); }
body.ly-ledger main section > .wrap > h2, body.ly-ledger .m-hbhead h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1; letter-spacing: -.01em; }
body.ly-ledger .m-hbkick { display: inline-block; padding: 6px 10px; border-radius: 6px; color: #fff; background: #1d2025; letter-spacing: .12em; }
body.ly-ledger .m-hb-table { background: linear-gradient(180deg, #f1ece6, #f7f5f2); }
body.ly-ledger .m-hbtw { border: 2px dashed #c98a52; padding: 6px; background: #fff; border-radius: 18px; box-shadow: 0 16px 40px rgba(29,32,37,.08); }
body.ly-ledger .m-hbt thead th { background: #1d2025; } body.ly-ledger .m-hbt thead th:first-child { border-radius: 10px 0 0 10px; } body.ly-ledger .m-hbt thead th:last-child { border-radius: 0 10px 10px 0; }
body.ly-ledger .m-hbt tbody tr:nth-child(even) { background: #faf7f3; }
body.ly-ledger .m-hbt td:nth-last-child(2) { font-weight: 700; color: #3d7a4f; }
body.ly-ledger .m-hbt tbody th em { color: #fff; background: #a3521c; }
body.ly-ledger .m-hbqpi { border-radius: 14px; border: 1.5px solid #e4ded6; background: linear-gradient(180deg, #fff 60%, #fbf8f4); }
body.ly-ledger .m-hbneed { font-size: 17px; } body.ly-ledger .m-hbneed small { color: #874314; }
body.ly-ledger .m-hbshot { border-radius: 10px; background: linear-gradient(180deg, #f3eee8, #e9e2d9); box-shadow: inset 0 -10px 0 #ddd3c6; }
body.ly-ledger .m-hb-collections { background: #1d2025; } body.ly-ledger .m-hb-collections .m-hbhead h2 { color: #fff; } body.ly-ledger .m-hb-collections .m-hblede { color: rgba(255,255,255,.78); }
body.ly-ledger .m-hb-collections .m-hbkick { background: #a3521c; }
body.ly-ledger .m-hbcoli { background: #2b2f35; border-color: rgba(255,255,255,.1); color: #fff !important; }
body.ly-ledger .m-hbcolim { background: radial-gradient(70% 80% at 50% 30%, #dcae7a, #b4743f); }
body.ly-ledger .m-hbcolim img { mix-blend-mode: multiply; }
body.ly-ledger .m-hbcoltx b { color: #fff; font-size: 23px; } body.ly-ledger .m-hbcoltx em { color: rgba(255,255,255,.78); } body.ly-ledger .m-hbcoltx small, body.ly-ledger .m-hbcoltx i { color: #e8a46a; }
body.ly-ledger .m-hbme { background: radial-gradient(50% 120% at 100% 0, rgba(163,82,28,.4), transparent 60%), #1d2025; }
body.ly-ledger .m-hbme .m-hbkick { background: #a3521c; color: #fff; }
body.ly-ledger .m-hbghf { border-radius: 14px; } body.ly-ledger .m-hbghim { background: linear-gradient(180deg, #f3eee8, #e9e2d9); }
body.ly-ledger .pcard { border-radius: 14px; } body.ly-ledger .pcard .shot { background: #f6f2ed; }
body.ly-ledger .m-cta .m-band { border-radius: 22px; background: radial-gradient(40% 90% at 88% 0%, rgba(201,138,82,.4), transparent 70%), linear-gradient(120deg, #16181c, #2b2f35); }
body.ly-ledger .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(201,138,82,.32), transparent 70%), linear-gradient(120deg, #16181c, #2f3339); } body.ly-ledger .m-page-hero .eyebrow { color: #e8a46a; }
body.ly-ledger .m-page-hero .btn.m-btn-main { background: #fff; color: #1d2025; box-shadow: inset 0 -3px 0 #c98a52; } body.ly-ledger .m-page-hero .btn.m-btn-main:hover { background: #f3e6d8; }
body.ly-ledger footer.site { background: #1d2025; color: #e4e1dc; border: 0; } body.ly-ledger footer.site nav a { color: #e8a46a; }
body.hv-popup :is(h1, h2, h3, .m-fwcap) { font-variant-numeric: lining-nums; }
@media (max-width: 760px) { body.ly-ledger .m-hbtw { border: 0; padding: 0; background: none; box-shadow: none; } body.ly-ledger .m-hbt tbody tr { border: 1.5px dashed #c98a52; } }

/* barber (DASHU): a Seoul barber station at night — navy tiled wall, flickering neon sign, a round LED mirror where a quiff styles itself stroke by stroke, a spinning barber pole; the real Super Mat wax, Ultra Holding wax and Extreme Red pomade on the counter, a comb rocks beside them; a hold & finish card steps through hold bars and finish */
body.hv-barber .m-hero { background: radial-gradient(44% 60% at 78% 38%, #fff, transparent 70%), radial-gradient(30% 40% at 0% 100%, rgba(184,20,47,.1), transparent 70%), linear-gradient(120deg, #e7ebf3, #f6f6f3 55%, #f3ecec); }
body.hv-barber .m-hero .eyebrow { color: #8f0f24; letter-spacing: .14em; }
body.hv-barber .m-hero h1 { font-weight: 400 !important; line-height: 1.04 !important; letter-spacing: -.01em; font-size: clamp(30px, 3.5vw, 50px) !important; }
body.ly-barber h1, body.ly-barber h2 { font-weight: 400 !important; letter-spacing: -.005em; }
.m-dbwall { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; background: linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 7cqw 3.6cqw, linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 7cqw 3.6cqw, radial-gradient(60% 50% at 30% 30%, #2c3d60, transparent 70%), linear-gradient(180deg, #1d2a44, #141c2e); box-shadow: 0 26px 50px rgba(20,28,46,.3); animation: m-dbin .9s .05s var(--m-ease) backwards; }
.m-dbneon { position: absolute; left: 51%; top: 8%; z-index: 2; padding: 1.2cqw 2.4cqw; border-radius: 12px; border: 2px solid rgba(255,92,122,.85); font: 400 clamp(14px, 4.6cqw, 30px)/1 var(--m-head); font-style: normal; white-space: nowrap; color: #ffd6de; text-shadow: 0 0 6px #ff5c7a, 0 0 16px #ff2d55, 0 0 30px rgba(255,45,85,.6); box-shadow: 0 0 12px rgba(255,45,85,.55), inset 0 0 12px rgba(255,45,85,.4); rotate: -4deg; animation: m-dbin .8s .5s var(--m-ease) backwards, m-dbflick 6s 1.5s linear infinite; }
.m-dbmirror { position: absolute; left: 6%; top: 7%; width: 40%; aspect-ratio: 1; z-index: 2; border-radius: 50%; background: radial-gradient(60% 60% at 40% 35%, #dfe7f3, #9fb0c9 70%, #7f91ad); box-shadow: 0 0 0 1.2cqw #10172a, 0 0 0 1.7cqw rgba(255,240,210,.95), 0 0 4cqw 1.6cqw rgba(255,226,170,.55), inset 0 0 3cqw rgba(20,28,46,.35); animation: m-dbin .9s .15s var(--m-ease) backwards, m-dbled 5s 1.2s ease-in-out infinite; overflow: hidden; }
.m-dbmirror::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, transparent 35%, rgba(255,255,255,.45) 45%, transparent 55%); }
.m-dbhead { position: absolute; left: 10%; top: 12%; width: 80%; height: auto; }
.m-dbhead .sk { fill: #1d2a44; opacity: .82; } .m-dbhead .ear { fill: none; stroke: #1d2a44; stroke-width: 5; opacity: .82; }
.m-dbhead .hr path { fill: none; stroke: #0b1020; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: m-dbstyle 6s ease-in-out infinite; }
.m-dbhead .hr path:nth-child(2) { animation-delay: .25s; } .m-dbhead .hr path:nth-child(3) { animation-delay: .5s; } .m-dbhead .hr path:nth-child(4) { animation-delay: .75s; }
.m-dbpole { position: absolute; right: 6%; top: 6%; width: 8.5%; height: 54%; z-index: 2; display: block; padding: 2.4cqw 0; animation: m-dbin .9s .25s var(--m-ease) backwards; }
.m-dbpole::before, .m-dbpole::after { content: ""; position: absolute; left: -10%; right: -10%; height: 2.6cqw; border-radius: 99px 99px 4px 4px; background: linear-gradient(90deg, #8d97a8, #e9edf3 45%, #8d97a8); }
.m-dbpole::before { top: 0; } .m-dbpole::after { bottom: 0; border-radius: 4px 4px 99px 99px; }
.m-dbpole i { display: block; height: 100%; border-radius: 99px; background: repeating-linear-gradient(-35deg, #c8102e 0 3cqw, #fff 3cqw 5cqw, #1f4fae 5cqw 8cqw, #fff 8cqw 10cqw) 0 0 / 100% 14.3cqw; box-shadow: inset -1.2cqw 0 1.6cqw rgba(0,0,0,.25), inset 1cqw 0 1.4cqw rgba(255,255,255,.5), 0 0 3cqw rgba(255,255,255,.18); animation: m-dbpole 2.6s linear infinite; }
.m-dbcounter { position: absolute; left: 0; right: 0; top: 64%; bottom: 0; z-index: 3; border-radius: 0 0 28px 28px; background: radial-gradient(70% 70% at 40% 0, rgba(255,255,255,.14), transparent 70%), linear-gradient(180deg, #3a4560, #252f47); box-shadow: inset 0 1cqw 0 rgba(255,255,255,.12), 0 -1px 0 rgba(255,255,255,.2); }
.m-dbultra, .m-dbmat, .m-dbred { position: absolute; display: block; transition: transform .45s var(--m-ease); }
.m-dbultra { left: 7%; bottom: 35.5%; width: 18%; z-index: 4; filter: drop-shadow(0 12px 10px rgba(0,0,0,.45)); animation: m-dbin 1s .3s var(--m-ease) backwards; }
.m-dbmat { left: 25%; bottom: 34%; width: 30%; z-index: 5; filter: drop-shadow(0 16px 14px rgba(0,0,0,.5)); animation: m-dbin 1s .2s var(--m-ease) backwards; }
.m-dbred { left: 54%; bottom: 31%; width: 24%; z-index: 6; rotate: -6deg; filter: drop-shadow(0 12px 12px rgba(0,0,0,.5)); animation: m-dbin 1s .4s var(--m-ease) backwards; }
.m-dbultra:hover, .m-dbmat:hover, .m-dbred:hover { transform: translateY(-6px); }
.m-dbcomb { position: absolute; right: 4%; bottom: 25%; width: 30%; height: auto; z-index: 6; rotate: -10deg; transform-origin: 20% 50%; animation: m-dbin 1s .6s var(--m-ease) backwards, m-dbrock 4.5s 1.6s ease-in-out infinite; }
.m-dbcomb rect { fill: #0b1020; } .m-dbcomb path { stroke: #0b1020; stroke-width: 3.4; stroke-linecap: round; }
.m-dbmeter { position: absolute; left: 4%; bottom: 4%; z-index: 8; display: grid; gap: .9cqw; width: 60%; padding: 2.2cqw 2.4cqw 2.4cqw; border-radius: 12px; background: #fff; border: 1.5px solid #dfe4ee; box-shadow: 0 14px 26px rgba(0,0,0,.35); animation: m-dbin .9s .75s var(--m-ease) backwards; }
.m-dbmeter > small { font: 700 clamp(8.5px, 1.8cqw, 11px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #8f0f24; }
.m-dbml { display: grid; gap: .3cqw; }
.m-dbml i { display: grid; grid-template-columns: minmax(0, 1fr) auto 12cqw; align-items: center; gap: 1.4cqw; padding: .7cqw 1.2cqw; border-radius: 7px; font-style: normal; animation: m-dbstep 8s calc(1.6s + var(--i) * 2s) linear infinite; }
.m-dbml b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 clamp(9.5px, 2.05cqw, 13px)/1.1 var(--m-body); color: #141c2e; }
.m-dbml s { display: flex; gap: .5cqw; text-decoration: none; } .m-dbml u { width: 1.6cqw; min-width: 6px; height: 2.4cqw; min-height: 9px; border-radius: 2px; background: #dfe4ee; }
.m-dbml u.on { background: linear-gradient(180deg, #e0213f, #b8142f); }
.m-dbml em { justify-self: start; padding: .5cqw 1.1cqw; border-radius: 99px; font: 600 clamp(8.5px, 1.75cqw, 11px)/1 var(--m-body); font-style: normal; white-space: nowrap; color: #1d2a44; background: #e8ecf3; }
@keyframes m-dbin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-dbflick { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .35; } }
@keyframes m-dbled { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08); } }
@keyframes m-dbstyle { 0% { stroke-dashoffset: 100; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
@keyframes m-dbpole { to { background-position: 0 -14.3cqw; } }
@keyframes m-dbrock { 0%, 100% { rotate: -10deg; } 50% { rotate: -4deg; } }
@keyframes m-dbstep { 0%, 22% { background: #fdeaee; box-shadow: inset 0 0 0 1.5px #f0a3b1; } 25%, 100% { background: transparent; box-shadow: none; } }
.m-dbtile { border-radius: 12px; border: 1.5px solid #dfe4ee; box-shadow: 0 10px 22px rgba(20,28,46,.06); }
.m-dbimg { border-radius: 10px; background: radial-gradient(circle at 50% 40%, #fff, #e8ecf3); }
.m-dbtile:is(:hover, :focus-visible) { border-color: #b8142f; box-shadow: 0 16px 30px rgba(20,28,46,.12); }
.m-dbtile .m-q8tx small { color: #8f0f24; }
.m-dbtile em { width: 8px; height: 22px; border-radius: 99px; background: repeating-linear-gradient(-35deg, #c8102e 0 4px, #fff 4px 6px, #1f4fae 6px 10px, #fff 10px 12px); box-shadow: 0 0 0 1px #c9d0dc; opacity: .6; transition: opacity .3s; }
.m-dbtile:is(:hover, :focus-visible) em { opacity: 1; animation: m-dbpole 1.2s linear infinite; background-size: 100% 24px; }
.m-dbspecs > span { color: #8f0f24; }
.m-dbspecs a { border-radius: 8px; border: 1.5px solid #dfe4ee; } .m-dbspecs a:is(:hover, :focus-visible) { border-color: #b8142f; }
.m-dbspecs b { border-radius: 6px; background: #1d2a44; } .m-dbspecs a:nth-of-type(2n) b { background: #b8142f; }

/* combover (DASHU): a squared pill; on hover comb teeth sweep across the button from left to right, leaving fine combed lines that fade, and the arrow glides forward */
body.bv-combover .btn { border-radius: 8px; padding: 15px 26px; letter-spacing: .02em; }
body.bv-combover :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #c8183a, #b8142f 60%, #a3102a); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 22px rgba(184,20,47,.25); }
body.bv-combover :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #a3102a, #8f0f24); color: #fff; }
body.bv-combover .btn::after { inset: 0 auto 0 -60px; width: 46px; transform: none; background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 2px, transparent 2px 5px); -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent); transition: none; }
body.bv-combover .btn:is(:hover, :focus-visible)::after { transform: none; animation: m-cosweep .75s cubic-bezier(.5,0,.3,1) forwards; }
body.bv-combover .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 5px); opacity: 0; transition: opacity .5s .2s; }
body.bv-combover .btn:is(:hover, :focus-visible)::before { opacity: 1; }
body.bv-combover .btn .arr { display: inline-block; transition: transform .3s var(--m-ease) .2s; } body.bv-combover .btn:hover .arr { transform: translateX(5px); }
body.bv-combover :is(.m-btn-ghost, .btn.ghost)::after { background: repeating-linear-gradient(90deg, color-mix(in srgb, currentColor 40%, transparent) 0 2px, transparent 2px 5px); }
body.bv-combover .m-cta .btn.m-white:hover { color: #8f0f24; }
@keyframes m-cosweep { from { left: -60px; } to { left: 100%; } }

/* ly-barber (DASHU): barber-stripe rules, a dark navy picker block up front, red-header spec table, outline step numbers */
body.ly-barber main section > .wrap > h2::after, body.ly-barber .m-hbhead h2::after { content: ""; display: block; width: 96px; height: 7px; margin-top: 14px; border-radius: 99px; background: repeating-linear-gradient(-35deg, #c8102e 0 7px, #fff 7px 10px, #1f4fae 10px 17px, #fff 17px 20px); box-shadow: 0 0 0 1px #d5dae4; }
body.ly-barber .m-hbkick { color: #8f0f24; }
body.ly-barber .m-hb-picker { background: radial-gradient(50% 80% at 100% 0, rgba(255,45,85,.18), transparent 60%), linear-gradient(180deg, #1d2a44, #141c2e); }
body.ly-barber .m-hb-picker .m-hbhead h2 { color: #fff; } body.ly-barber .m-hb-picker .m-hblede { color: rgba(255,255,255,.8); }
body.ly-barber .m-hb-picker .m-hbkick { color: #ffb3c1; text-shadow: 0 0 10px rgba(255,45,85,.6); }
body.ly-barber .m-hbpkg { background: #243354; border-color: rgba(255,255,255,.1); }
body.ly-barber .m-hbpkg h3 { color: #fff; } body.ly-barber .m-hbpkg h3 small { color: #ff8fa3; } body.ly-barber .m-hbpkg > p { color: rgba(255,255,255,.72); }
body.ly-barber .m-hbpko { background: #2c3d60; color: #fff !important; }
body.ly-barber .m-hbpko:is(:hover, :focus-visible) { background: #34476e; border-color: #ff5c7a; }
body.ly-barber .m-hbpktx small { color: rgba(255,255,255,.75); } body.ly-barber .m-hbpktx em { color: #ffb3c1; } body.ly-barber .m-hbpko .arr { color: #ff8fa3; }
body.ly-barber .m-hbt thead th { background: #b8142f; }
body.ly-barber .m-hbt tbody th em { color: #fff; background: #1d2a44; }
body.ly-barber .m-hbst li::before { font-size: 46px; color: transparent; -webkit-text-stroke: 1.5px #b8142f; }
body.ly-barber .m-hbst li { border-top: 4px solid #1d2a44; }
body.ly-barber .m-hbme { background: radial-gradient(50% 120% at 100% 0, rgba(184,20,47,.4), transparent 60%), #141c2e; }
body.ly-barber .pcard .shot { background: #f1f3f7; }
body.ly-barber .m-cta .m-band { border-radius: 22px; background: radial-gradient(40% 90% at 88% 0%, rgba(255,45,85,.35), transparent 70%), linear-gradient(120deg, #141c2e, #1d2a44 60%, #2c3d60); }
body.ly-barber .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(255,45,85,.28), transparent 70%), linear-gradient(120deg, #141c2e, #2c3d60); } body.ly-barber .m-page-hero .eyebrow { color: #ffb3c1; }
body.ly-barber .m-page-hero .btn.m-btn-main { background: #fff; color: #8f0f24; } body.ly-barber .m-page-hero .btn.m-btn-main:hover { background: #fdeaee; }
body.ly-barber footer.site { background: #141c2e; color: #e4e8f2; border: 0; } body.ly-barber footer.site nav a { color: #ffb3c1; }
body.hv-barber :is(h1, h2, h3, .m-dbmeter) { font-variant-numeric: lining-nums; }
@media (min-width: 901px) and (max-width: 1180px) { body.ly-barber header.site nav { flex-wrap: nowrap; gap: 0; } body.ly-barber header.site nav a { white-space: nowrap; padding: 8px 7px !important; font-size: 12.5px !important; } body.ly-barber header.site .langs a { padding: 8px 9px !important; } }

/* ===== batch 14.11.2026 (2): home blocks sizer (pick by size, footprint drawn to scale) and reach (pick by distance on a tape) ===== */
.m-hbsz { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.m-hbszi { display: grid; grid-template-columns: 92px 104px minmax(0, 1fr) 112px auto; grid-template-areas: "plot fig tx img btn"; align-items: center; gap: 22px; padding: 16px 22px 16px 16px; background: #fff; border-radius: var(--m-radius); border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); transition: border-color .25s, box-shadow .3s, transform .3s var(--m-ease); }
.m-hbszi:hover { border-color: color-mix(in srgb, var(--m-accent) 45%, transparent); box-shadow: 0 14px 30px rgba(14,42,58,.08); transform: translateY(-2px); }
.m-hbszplot { grid-area: plot; position: relative; display: block; width: 92px; aspect-ratio: 1; border-radius: 8px; border: 1.5px dashed color-mix(in srgb, var(--m-ink) 28%, transparent); background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--m-soft) 70%, #fff) 0 9px, #fff 9px 18px); }
.m-hbszplot i { position: absolute; left: 3px; bottom: 3px; width: calc((100% - 6px) * var(--a)); aspect-ratio: 1; border-radius: 5px; background: repeating-linear-gradient(90deg, #5fae4a 0 7px, #6dbb55 7px 14px); box-shadow: inset 0 0 0 1.5px rgba(30,80,30,.25); transform-origin: 0 100%; transition: transform .45s var(--m-ease); }
.m-hbszi:hover .m-hbszplot i { transform: scale(1.04); }
.m-hbszfig { grid-area: fig; margin: 0; }
.m-hbszfig b { display: block; font: 700 30px/1 var(--m-head); color: var(--m-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.m-hbszfig small { display: block; margin-top: 5px; font: 700 12px/1 var(--m-body); letter-spacing: .12em; text-transform: uppercase; color: var(--m-accent); }
.m-hbsztx { grid-area: tx; min-width: 0; }
.m-hbsztx > small { display: block; margin-bottom: 4px; font: 700 11.5px/1.3 var(--m-body); letter-spacing: .12em; text-transform: uppercase; color: var(--m-accent); }
body.m .m-hbsztx h3 { margin: 0 0 4px; font-size: 18px; line-height: 1.25; }
.m-hbsztx p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--m-body-ink); }
.m-hbsztx p.m-hbszpsi { display: inline-flex; gap: 8px; align-items: center; margin-top: 8px; padding: 4px 10px 4px 4px; border-radius: 99px; font: 700 13px/1 var(--m-body); color: var(--m-ink); background: var(--m-soft); }
.m-hbszpsi span { padding: 4px 8px; border-radius: 99px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--m-ink); }
.m-hbszimg { grid-area: img; display: block; width: 112px; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--m-soft); }
.m-hbszimg img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 8px; mix-blend-mode: multiply; transition: transform .45s var(--m-ease); }
.m-hbszi:hover .m-hbszimg img { transform: scale(1.06); }
.m-hbszi > .btn { grid-area: btn; white-space: nowrap; }
.m-hbrc { display: flex; align-items: center; gap: 16px; margin: 0 0 44px; }
.m-hbrcsp { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; font: 700 13px/1 var(--m-body); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--m-ink); }
.m-hbrcsp::before { content: ""; width: 14px; height: 14px; border-radius: 3px 3px 7px 7px; background: linear-gradient(180deg, #d9b45a, #a8812c); box-shadow: 0 -5px 0 -2px #d9b45a; }
.m-hbrctr { position: relative; flex: 1; height: 34px; margin-right: 22px; border-radius: 6px; background: linear-gradient(90deg, rgba(0,0,0,.4) 1px, transparent 1px) 0 100% / calc(100% / 15) 42% repeat-x, linear-gradient(180deg, #f6d364, #e9b737); box-shadow: inset 0 -2px 0 rgba(0,0,0,.12), 0 6px 14px rgba(14,42,58,.1); }
.m-hbrchose { position: absolute; left: 0; top: 8px; height: 7px; width: 100%; border-radius: 99px; background: linear-gradient(180deg, #3ab4e6, var(--m-accent)); transform-origin: 0 50%; animation: m-hbrcroll 2.4s .3s var(--m-ease) both; }
.m-hbrctr b { position: absolute; top: calc(100% + 6px); translate: -50% 0; font: 700 14px/1 var(--m-head); color: var(--m-ink); white-space: nowrap; }
.m-hbrctr b small { margin-left: 2px; font: 600 11px/1 var(--m-body); color: var(--m-body-ink); }
.m-hbrctr b::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 6px); width: 3px; height: 40px; margin-left: -1.5px; border-radius: 2px; background: var(--m-ink); }
.m-hbrctr b:first-of-type::before { display: none; }
@keyframes m-hbrcroll { from { transform: scaleX(0); } }
.m-hbrcl { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 18px; }
.m-hbrci { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px; background: #fff; border-radius: var(--m-radius); border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); transition: transform .3s var(--m-ease), box-shadow .3s; }
.m-hbrci:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(14,42,58,.1); }
.m-hbrcft { margin: 0; font: 600 14px/1 var(--m-body); color: var(--m-body-ink); }
.m-hbrcft b { font: 700 34px/1 var(--m-head); color: var(--m-ink); font-variant-numeric: tabular-nums; }
.m-hbrcft s { display: block; height: 6px; margin-top: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--m-accent) 0 var(--w), color-mix(in srgb, var(--m-ink) 10%, transparent) var(--w)); }
.m-hbrcimg { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(var(--m-radius) - 4px); background: var(--m-soft); }
.m-hbrcimg img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 12px; mix-blend-mode: multiply; transition: transform .45s var(--m-ease); }
.m-hbrci:hover .m-hbrcimg img { transform: scale(1.05); }
body.m .m-hbrci h3 { margin: 2px 0 0; font-size: 17px; line-height: 1.25; }
.m-hbrci > p:not(.m-hbrcft) { flex: 1; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--m-body-ink); }
.m-hbrci .btn { align-self: flex-start; }
@media (max-width: 1100px) { .m-hbszi { grid-template-columns: 84px 92px minmax(0, 1fr) 96px; grid-template-areas: "plot fig tx img" "btn btn btn btn"; } .m-hbszplot { width: 84px; } .m-hbszimg { width: 96px; } .m-hbszi > .btn { justify-self: end; } }
@media (max-width: 900px) { .m-hbrcl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .m-hbszi { grid-template-columns: 76px minmax(0, 1fr) 76px; grid-template-areas: "plot tx tx" "fig tx tx" "img btn btn"; gap: 10px 14px; padding: 14px; }
  .m-hbszplot { width: 76px; } .m-hbszimg { width: 76px; } .m-hbszfig b { font-size: 24px; }
  .m-hbszi > .btn { justify-self: stretch; text-align: center; display: flex; justify-content: center; align-items: center; }
  .m-hbrc { gap: 10px; } .m-hbrcsp { padding: 8px 10px; font-size: 11px; } .m-hbrctr { margin-right: 14px; } .m-hbrctr b { font-size: 12.5px; }
  .m-hbrcl { grid-template-columns: minmax(0, 1fr); }
  .m-hbrci { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-items: start; }
  .m-hbrci > .m-hbrcft, .m-hbrci > .btn { grid-column: 1 / -1; } .m-hbrci > .m-hbrcimg { grid-row: span 2; aspect-ratio: 1; } .m-hbrci > .m-hbrcimg img { padding: 6px; }
  .m-hbrci > .btn { justify-self: stretch; text-align: center; }
}

/* backyard (Aqua Joe): a back lawn on a summer morning — sky with a sun and drifting clouds over a picket fence, a striped lawn; the real mini oscillating sled sprinkler sprays a fan of water arcs that swings left and right with droplets running along them, the real zinc impulse sprinkler ticks its jet at the back, the real 50 ft hose lies coiled in front; a coverage card steps through the listed sq ft with bars drawn to scale */
body.hv-backyard .m-hero { background: radial-gradient(46% 60% at 78% 36%, #fff, transparent 70%), radial-gradient(34% 44% at 0% 100%, rgba(95,174,74,.16), transparent 70%), linear-gradient(120deg, #e3f3f9, #f3f8f7 55%, #eef6e8); }
body.hv-backyard .m-hero .eyebrow { color: #085a89; letter-spacing: .14em; }
body.hv-backyard .m-hero h1 { letter-spacing: -.02em; font-size: clamp(30px, 3.5vw, 50px) !important; }
.m-ajsky { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; background: radial-gradient(circle at 86% 13%, #fffbe2 0 4.5%, rgba(255,236,160,.6) 8%, transparent 20%), linear-gradient(180deg, #84cdee, #c6ebf8 40%, #ecf9fd 58%); box-shadow: 0 26px 50px rgba(14,42,58,.18); animation: m-ajin .9s .05s var(--m-ease) backwards; }
.m-ajsky b { position: absolute; left: -24%; top: 10%; width: 20%; height: 5cqw; border-radius: 99px; background: #fff; opacity: .9; box-shadow: 4cqw -2.2cqw 0 .6cqw #fff, 9cqw -.6cqw 0 -.2cqw #fff; animation: m-ajcloud 46s linear infinite; }
.m-ajsky b:nth-child(2) { top: 24%; width: 15%; opacity: .7; animation-duration: 60s; animation-delay: -26s; }
.m-ajsky b:nth-child(3) { top: 5%; width: 12%; opacity: .6; animation-duration: 70s; animation-delay: -48s; }
.m-ajfence { position: absolute; left: 0; right: 0; top: 41%; height: 14%; z-index: 1; background: linear-gradient(180deg, transparent 30%, #e8eef0 30% 37%, transparent 37% 70%, #e8eef0 70% 77%, transparent 77%), repeating-linear-gradient(90deg, #fff 0 3.2cqw, transparent 3.2cqw 5cqw); -webkit-mask: linear-gradient(#000, #000) 0 1.6cqw / 100% 100% no-repeat, conic-gradient(from 135deg at 1.6cqw 0, #000 90deg, transparent 0) 0 0 / 5cqw 1.6cqw repeat-x; mask: linear-gradient(#000, #000) 0 1.6cqw / 100% 100% no-repeat, conic-gradient(from 135deg at 1.6cqw 0, #000 90deg, transparent 0) 0 0 / 5cqw 1.6cqw repeat-x; filter: drop-shadow(0 1px 0 rgba(14,42,58,.15)); animation: m-ajin .9s .12s var(--m-ease) backwards; }
.m-ajlawn { position: absolute; left: 0; right: 0; top: 52%; bottom: 0; z-index: 2; border-radius: 0 0 28px 28px; overflow: hidden; background: radial-gradient(38% 26% at 38% 70%, rgba(255,255,255,.22), transparent 70%), linear-gradient(180deg, rgba(40,90,30,.28), transparent 18%), repeating-linear-gradient(102deg, #5aa846 0 9cqw, #69b853 9cqw 18cqw); animation: m-ajin .9s .15s var(--m-ease) backwards; }
.m-ajimp { position: absolute; left: 4%; bottom: 41%; width: 15%; z-index: 3; animation: m-ajin 1s .35s var(--m-ease) backwards; }
.m-ajimpimg { display: block; filter: drop-shadow(0 8px 6px rgba(30,60,20,.35)); transition: transform .45s var(--m-ease); }
.m-ajimpimg:hover { transform: translateY(-5px); }
.m-ajjet { position: absolute; left: 10%; top: -52%; width: 160%; height: auto; overflow: visible; pointer-events: none; }
.m-ajjet g { transform-box: view-box; transform-origin: 60px 56px; animation: m-ajtick 5s steps(10) infinite alternate; }
.m-ajjet path { fill: none; stroke: #1aa6d9; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 6; animation: m-ajflow .7s linear infinite; }
.m-ajspray { position: absolute; left: .2%; top: 4.2%; width: 64%; height: auto; z-index: 4; overflow: visible; pointer-events: none; animation: m-ajfade 1.2s .6s ease both; }
.m-ajspray .osc { transform-box: view-box; transform-origin: 100px 150px; animation: m-ajosc 3.6s ease-in-out infinite alternate; }
.m-ajspray path { fill: none; stroke-linecap: round; }
.m-ajspray .mist path { stroke: rgba(255,255,255,.6); stroke-width: 6; }
.m-ajspray .run path { stroke: #159bd0; stroke-width: 2; stroke-dasharray: .7 6.3; animation: m-ajrun .9s linear infinite; animation-delay: calc(var(--i) * -.15s); }
.m-ajdrops { position: absolute; left: 6%; right: 32%; top: 56%; height: 22%; z-index: 4; pointer-events: none; }
.m-ajdrops i { position: absolute; left: calc(8% + var(--i) * 16%); top: 0; width: .9cqw; height: 1.4cqw; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #8fdcf5; opacity: 0; animation: m-ajdrop 1.8s calc(var(--i) * .3s + 1s) ease-in infinite; }
.m-ajdrops i:nth-child(even) { top: 30%; }
.m-ajsled { position: absolute; left: 16%; bottom: 14%; width: 36%; z-index: 5; display: block; filter: drop-shadow(0 14px 10px rgba(30,60,20,.38)); animation: m-ajin 1s .2s var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-ajcoil { position: absolute; left: 0%; bottom: 2.5%; width: 24%; z-index: 6; display: block; rotate: -4deg; filter: drop-shadow(0 12px 10px rgba(30,60,20,.4)); animation: m-ajin 1s .45s var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-ajsled:hover, .m-ajcoil:hover { transform: translateY(-6px); }
.m-ajcov { position: absolute; right: 3%; bottom: 3.5%; z-index: 8; display: grid; gap: .9cqw; width: 46%; padding: 2cqw 2.2cqw 2.2cqw; border-radius: 14px; background: #fff; border: 1.5px solid #d7e9f1; box-shadow: 0 16px 28px rgba(14,42,58,.22); animation: m-ajin .9s .75s var(--m-ease) backwards; }
.m-ajcov > small { font: 700 clamp(8.5px, 1.8cqw, 11px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #085a89; }
.m-ajcl { display: grid; gap: .25cqw; }
.m-ajcl i { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5cqw 1.2cqw; align-items: center; padding: .6cqw 1cqw .8cqw; border-radius: 8px; font-style: normal; animation: m-ajstep 10s calc(1.6s + var(--i) * 2s) linear infinite; }
.m-ajcl b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 clamp(9px, 1.95cqw, 12.5px)/1.1 var(--m-body); color: #0e2a3a; }
.m-ajcl em { font: 700 clamp(8.5px, 1.85cqw, 12px)/1 var(--m-body); font-style: normal; white-space: nowrap; color: #085a89; font-variant-numeric: tabular-nums; }
.m-ajcl s { grid-column: 1 / -1; display: block; height: max(4px, .9cqw); border-radius: 99px; background: linear-gradient(90deg, #3fae4f, #1aa6d9) 0 0 / var(--w) 100% no-repeat, #e3eef3; }
@keyframes m-ajin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-ajfade { from { opacity: 0; } }
@keyframes m-ajcloud { to { translate: 150cqw 0; } }
@keyframes m-ajosc { from { transform: rotate(-15deg); } to { transform: rotate(15deg); } }
@keyframes m-ajrun { to { stroke-dashoffset: -14; } }
@keyframes m-ajflow { to { stroke-dashoffset: -16; } }
@keyframes m-ajtick { from { transform: rotate(-38deg); } to { transform: rotate(22deg); } }
@keyframes m-ajdrop { 0% { opacity: 0; transform: translateY(-2cqw); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(6cqw); } }
@keyframes m-ajstep { 0%, 18% { background: #e6f5fb; box-shadow: inset 0 0 0 1.5px #9ed6ec; } 21%, 100% { background: transparent; box-shadow: none; } }
.m-ajtile { border-radius: 14px; border: 1.5px solid #d7e9f1; box-shadow: 0 10px 22px rgba(14,42,58,.06); }
.m-ajimg { border-radius: 12px; background: radial-gradient(circle at 50% 40%, #fff, #e1f0f6); }
.m-ajtile:is(:hover, :focus-visible) { border-color: #0a6fa8; box-shadow: 0 16px 30px rgba(14,42,58,.12); }
.m-ajtile .m-q8tx small { color: #085a89; }
.m-ajtile em { width: 11px; height: 11px; border-radius: 0 50% 50% 50%; rotate: 45deg; background: linear-gradient(135deg, #8fdcf5, #1aa6d9); opacity: .65; transition: opacity .3s, translate .3s; }
.m-ajtile:is(:hover, :focus-visible) em { opacity: 1; animation: m-ajbob .9s ease-in-out infinite alternate; }
@keyframes m-ajbob { to { translate: 0 3px; } }
.m-ajspecs > span { color: #085a89; }
.m-ajspecs a { border-radius: 99px; border: 1.5px solid #d7e9f1; } .m-ajspecs a:is(:hover, :focus-visible) { border-color: #0a6fa8; }
.m-ajspecs b { border-radius: 99px; background: #0a6fa8; } .m-ajspecs a:nth-of-type(2n) b { background: #3b8a37; }
/* splash (Aqua Joe): a water-blue pill; on hover three droplets arc across the button like a sprinkler jet and a ripple ring spreads out from the arrow, which nudges forward */
body.bv-splash .btn { border-radius: 999px; padding: 15px 26px; letter-spacing: .005em; }
body.bv-splash :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #1690cf, #0a6fa8 70%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 22px rgba(10,111,168,.28); }
body.bv-splash :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #0a6fa8, #085a89); color: #fff; }
body.bv-splash .btn::before { content: ""; position: absolute; left: 14px; top: 62%; width: 6px; height: 8px; z-index: -1; pointer-events: none; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: rgba(255,255,255,.95); box-shadow: 12px -5px 0 -1px rgba(255,255,255,.75), 22px 1px 0 -2px rgba(255,255,255,.55); opacity: 0; }
body.bv-splash .btn:is(:hover, :focus-visible)::before { animation: m-sparc .9s cubic-bezier(.3,.6,.5,1) forwards; }
body.bv-splash .btn::after { inset: auto; right: 20px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; border: 2px solid rgba(255,255,255,.75); background: none; transform: scale(0); opacity: 0; transition: none; }
body.bv-splash .btn:is(:hover, :focus-visible)::after { transform: scale(0); animation: m-spripple .9s .25s ease-out 2; }
body.bv-splash .btn .arr { display: inline-block; transition: transform .3s var(--m-ease) .1s; } body.bv-splash .btn:hover .arr { transform: translateX(4px); }
body.bv-splash :is(.m-btn-ghost, .btn.ghost)::before { background: var(--m-accent); box-shadow: 12px -5px 0 -1px var(--m-accent), 22px 1px 0 -2px var(--m-accent); }
body.bv-splash :is(.m-btn-ghost, .btn.ghost)::after { border-color: currentColor; }
body.bv-splash .m-cta .btn.m-white::before { background: var(--m-accent); box-shadow: 12px -5px 0 -1px var(--m-accent), 22px 1px 0 -2px var(--m-accent); }
body.bv-splash .m-cta .btn.m-white::after { border-color: var(--m-accent); } body.bv-splash .m-cta .btn.m-white:hover { color: #085a89; }
@keyframes m-sparc { 0% { opacity: 0; translate: 0 0; } 15% { opacity: 1; } 55% { translate: 60px -12px; } 100% { opacity: 0; translate: 130px 4px; } }
@keyframes m-spripple { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(5); } }
/* ly-yardplan (Aqua Joe): lawn-stripe bands between sections, a sky-to-grass rhythm, sizing blocks first, droplet kickers */
body.ly-yardplan main section > .wrap > h2, body.ly-yardplan .m-hbhead h2 { letter-spacing: -.02em; }
body.ly-yardplan .m-hbkick { display: inline-flex; align-items: center; gap: 9px; color: #085a89; }
body.ly-yardplan .m-hbkick::before { content: ""; width: 10px; height: 10px; border-radius: 0 50% 50% 50%; rotate: 45deg; background: linear-gradient(135deg, #8fdcf5, #1aa6d9); }
body.ly-yardplan .m-hb-sizer, body.ly-yardplan .m-hb-guidehub, body.ly-yardplan #compare { position: relative; background: linear-gradient(180deg, #e8f5ea, #f3f8f7 70%); padding: 74px 0 64px; }
body.ly-yardplan .m-hb-sizer::before, body.ly-yardplan .m-hb-guidehub::before, body.ly-yardplan #compare::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: repeating-linear-gradient(102deg, #5aa846 0 42px, #69b853 42px 84px); }
body.ly-yardplan .m-hb-reach { background: linear-gradient(180deg, #e6f4fa, #f3f8f7); }
body.ly-yardplan .m-hbszi, body.ly-yardplan .m-hbrci { border-color: #d7e9f1; }
body.ly-yardplan #compare .tablewrap { border-radius: 16px; overflow: auto; background: #fff; box-shadow: 0 12px 30px rgba(14,42,58,.07); }
body.ly-yardplan #compare table.spec thead th { background: #0d3b52; color: #fff; }
body.ly-yardplan .m-hb-steps { background: #fff; }
body.ly-yardplan .m-hbst li { border-color: #d7e9f1; background: linear-gradient(180deg, #fff, #f1f9fc); }
body.ly-yardplan .m-hbst li::before { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50% 50% 50% 0; font-size: 19px; color: #fff; background: linear-gradient(135deg, #1aa6d9, #0a6fa8); }
body.ly-yardplan .m-hbnote { padding: 12px 16px; border-radius: 12px; background: #fff; border-left: 4px solid #3b8a37; }
body.ly-yardplan .m-hbme { background: radial-gradient(60% 120% at 100% 0, rgba(26,166,217,.35), transparent 60%), linear-gradient(135deg, #0d3b52, #0a5d8c); }
body.ly-yardplan .m-hbme .m-hbkick { color: #9fdcf3; } body.ly-yardplan .m-hbme .m-hbkick::before { background: #9fdcf3; }
body.ly-yardplan .m-hbmel li { border-top-color: rgba(143,220,245,.45); }
body.ly-yardplan .m-hbghim { background: radial-gradient(70% 90% at 50% 40%, #fff, #e1f0f6); }
body.ly-yardplan .pcard .shot { background: radial-gradient(70% 70% at 50% 35%, #fff, #e8f4f8); }
body.ly-yardplan #faq details.faq { border-radius: 14px; border-left: 4px solid #1aa6d9; }
body.ly-yardplan .m-cta .m-band { position: relative; overflow: hidden; border-radius: 26px; background: radial-gradient(40% 90% at 88% 0%, rgba(26,166,217,.4), transparent 70%), linear-gradient(120deg, #0d3b52, #0a5d8c 60%, #0a6fa8); }
body.ly-yardplan .m-cta .m-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: repeating-linear-gradient(102deg, #5aa846 0 42px, #69b853 42px 84px); }
body.ly-yardplan .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(26,166,217,.3), transparent 70%), linear-gradient(120deg, #0d3b52, #0a5d8c); } body.ly-yardplan .m-page-hero .eyebrow { color: #9fdcf3; }
body.ly-yardplan .m-page-hero .btn.m-btn-main { background: #fff; color: #085a89; } body.ly-yardplan .m-page-hero .btn.m-btn-main:hover { background: #e1f0f6; color: #0d3b52; }
body.ly-yardplan footer.site { background: #0d3b52; color: #e2eef3; border: 0; } body.ly-yardplan footer.site nav a { color: #9fdcf3; }
body.ly-yardplan #compare td .btn { padding: 11px 18px; font-size: 14px; white-space: nowrap; color: #fff; background: linear-gradient(180deg, #1690cf, #0a6fa8 70%); box-shadow: 0 8px 18px rgba(10,111,168,.22); }
body.ly-yardplan #compare td .btn:hover { color: #fff; background: linear-gradient(180deg, #0a6fa8, #085a89); }
@media (min-width: 901px) and (max-width: 1240px) { :is(body.ly-yardplan, body.ly-voltage, body.ly-ritual) header.site nav { flex-wrap: nowrap; gap: 0; } :is(body.ly-yardplan, body.ly-voltage, body.ly-ritual) header.site nav a { white-space: nowrap; padding: 9px 7px; font-size: 13px; } }

/* ===== batch 14.11.2026 (2): home blocks gauge (PSI/GPM by job, bars to scale) and platform (battery voltage columns) ===== */
.m-hbga { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.m-hbgar { display: grid; grid-template-columns: 210px 270px 92px minmax(0, 1fr) auto; grid-template-areas: "job meter img tx btn"; align-items: center; gap: 20px; padding: 14px 20px 14px 18px; background: #fff; border-radius: var(--m-radius); border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); transition: border-color .25s, box-shadow .3s; }
.m-hbgar:hover { border-color: color-mix(in srgb, var(--m-accent) 50%, transparent); box-shadow: 0 14px 30px rgba(20,24,16,.08); }
.m-hbgajob { grid-area: job; margin: 0; font: 700 20px/1.15 var(--m-head); color: var(--m-ink); text-wrap: balance; }
.m-hbgajob small { display: block; margin-bottom: 5px; font: 700 12px/1 var(--m-body); letter-spacing: .12em; color: var(--m-accent); }
.m-hbgam { grid-area: meter; display: grid; gap: 9px; min-width: 0; }
.m-hbgab { display: grid; grid-template-columns: 38px minmax(0, 1fr) 64px; align-items: center; gap: 10px; }
.m-hbgab b { font: 800 11.5px/1 var(--m-body); letter-spacing: .1em; color: var(--m-ink); }
.m-hbgab i { position: relative; height: 10px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--m-ink) 10%, transparent); }
.m-hbgab i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, #f2c94c, #f2a900); }
.m-hbgab.gpm i::after { background: linear-gradient(90deg, #c6dc5a, #8fae1b); }
.m-hbgab em { font: 700 14px/1 var(--m-body); font-style: normal; color: var(--m-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-hbgab:not([style]) em { font-size: 11.5px; font-weight: 600; color: var(--m-body-ink); white-space: normal; line-height: 1.1; }
.m-hbgaimg { grid-area: img; display: block; width: 92px; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: var(--m-soft); }
.m-hbgaimg img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6px; mix-blend-mode: multiply; transition: transform .45s var(--m-ease); }
.m-hbgar:hover .m-hbgaimg img { transform: scale(1.06); }
.m-hbgatx { grid-area: tx; min-width: 0; }
body.m .m-hbgatx h3 { margin: 0 0 4px; font-size: 17px; line-height: 1.25; }
.m-hbgatx p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--m-body-ink); }
.m-hbgar > .btn { grid-area: btn; white-space: nowrap; }
.m-hbpf { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 22px; align-items: start; }
.m-hbpfg { min-width: 0; overflow: hidden; background: #fff; border-radius: calc(var(--m-radius) + 4px); border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); }
.m-hbpfh { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 18px; padding: 20px 22px; color: #fff; background: radial-gradient(60% 120% at 100% 0, rgba(242,169,0,.22), transparent 60%), #1b1f16; }
.m-hbpfbat { display: flex; gap: 7px; }
.m-hbpfbat i { position: relative; display: grid; gap: 3px; width: 34px; height: 54px; padding: 9px 6px 6px; border-radius: 6px; background: linear-gradient(180deg, #2f6fd6, #1f56b3); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
.m-hbpfbat i::before { content: ""; position: absolute; left: 50%; top: -5px; width: 14px; height: 6px; margin-left: -7px; border-radius: 3px 3px 0 0; background: #1f56b3; }
.m-hbpfbat u { display: block; border-radius: 2px; background: #c6dc5a; animation: m-hbpfcell 2.4s ease-in-out infinite; }
.m-hbpfbat u:nth-child(1) { animation-delay: .9s; } .m-hbpfbat u:nth-child(2) { animation-delay: .6s; } .m-hbpfbat u:nth-child(3) { animation-delay: .3s; }
@keyframes m-hbpfcell { 0%, 15% { opacity: .25; } 35%, 100% { opacity: 1; } }
.m-hbpfv { margin: 0; } .m-hbpfv b { display: block; font: 800 48px/.9 var(--m-head); color: #f2a900; letter-spacing: -.01em; }
.m-hbpfv small { display: block; margin-top: 4px; font: 700 12px/1.2 var(--m-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.86); }
.m-hbpfhint { grid-column: 1 / -1; margin: 0; font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.82); }
.m-hbpfg ul { list-style: none; margin: 0; padding: 10px; display: grid; gap: 6px; }
.m-hbpfo { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 12px 8px 8px; border-radius: 10px; text-decoration: none; color: var(--m-ink) !important; border: 1.5px solid transparent; transition: border-color .25s, background .25s, transform .3s var(--m-ease); }
.m-hbpfo:is(:hover, :focus-visible) { border-color: var(--m-accent); background: color-mix(in srgb, var(--m-soft) 50%, #fff); transform: translateX(3px); }
.m-hbpfim { display: block; width: 58px; height: 58px; overflow: hidden; border-radius: 10px; background: var(--m-soft); }
.m-hbpfim img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.m-hbpftx { min-width: 0; } .m-hbpftx b { display: block; font: 700 15px/1.25 var(--m-body); }
.m-hbpftx small { display: block; margin-top: 2px; font: 500 13.5px/1.3 var(--m-body); color: var(--m-body-ink); }
.m-hbpftx em { display: inline-block; margin-top: 5px; padding: 3px 8px; border-radius: 99px; font: 600 12px/1.3 var(--m-body); font-style: normal; color: #3d4a10; background: #eef3d6; }
.m-hbpftx em.only { color: #8a3a0c; background: #fde7d6; }
.m-hbpfo .arr { font-style: normal; font-weight: 700; color: var(--m-accent); }
@media (max-width: 1100px) {
  .m-hbgar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 92px; grid-template-areas: "job job img" "meter tx img" "btn btn btn"; }
  .m-hbgar > .btn { justify-self: start; }
}
@media (max-width: 760px) {
  .m-hbpf { grid-template-columns: minmax(0, 1fr); }
  .m-hbgar { grid-template-columns: minmax(0, 1fr) 76px; grid-template-areas: "job img" "meter meter" "tx tx" "btn btn"; gap: 12px; padding: 14px; }
  .m-hbgaimg { width: 76px; } .m-hbgajob { font-size: 18px; }
  .m-hbgar > .btn { justify-self: stretch; display: flex; justify-content: center; }
  .m-hbpfv b { font-size: 40px; }
}

/* washbay (Sun Joe): a driveway in front of a garage door at golden hour — grimy pavers, a wand sweeps a spray fan across them and a clean strip follows, mist drifting off; the real SPX205E-XT washer, foam cannon and pair of 24V packs; a PSI dial swings to each washer's listed PSI while a list steps through PSI and GPM */
body.hv-washbay .m-hero { background: radial-gradient(46% 60% at 78% 36%, #fffaf0, transparent 70%), radial-gradient(34% 44% at 0% 100%, rgba(242,169,0,.18), transparent 70%), linear-gradient(120deg, #f2efe4, #f6f5f0 55%, #efeedd); }
body.hv-washbay .m-hero .eyebrow { color: #6e4a00; letter-spacing: .16em; }
body.hv-washbay .m-hero h1 { text-transform: uppercase; letter-spacing: .005em; line-height: .98 !important; font-size: clamp(38px, 4.6vw, 66px) !important; max-width: 16ch; }
.m-sjwall { position: absolute; inset: 0 0 42% 0; border-radius: 26px 26px 0 0; overflow: hidden; background: linear-gradient(90deg, #2b2f24 0 7%, transparent 7% 93%, #2b2f24 93%), repeating-linear-gradient(180deg, #ebe7da 0 8.4cqw, #cfcabb 8.4cqw 9cqw), #ebe7da; box-shadow: 0 26px 50px rgba(27,31,22,.2); animation: m-sjin .9s .05s var(--m-ease) backwards; }
.m-sjwall::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,214,120,.45) 45%, transparent 62%); animation: m-sjsun 9s ease-in-out infinite alternate; }
.m-sjfloor, .m-sjclean { position: absolute; left: 0; right: 0; top: 58%; bottom: 0; border-radius: 0 0 26px 26px; }
.m-sjfloor { z-index: 1; background: radial-gradient(30% 22% at 30% 40%, rgba(70,55,30,.35), transparent 70%), radial-gradient(26% 30% at 72% 70%, rgba(60,70,40,.35), transparent 70%), linear-gradient(90deg, rgba(40,35,25,.35) 1.5px, transparent 1.5px) 0 0 / 16.6% 100%, linear-gradient(0deg, rgba(40,35,25,.35) 1.5px, transparent 1.5px) 0 0 / 100% 33.4%, linear-gradient(180deg, #8a8473, #9a947f); box-shadow: 0 26px 50px rgba(27,31,22,.2); animation: m-sjin .9s .12s var(--m-ease) backwards; }
.m-sjclean { left: 30%; right: 22%; border-radius: 0; z-index: 2; background: linear-gradient(90deg, rgba(40,35,25,.18) 1.5px, transparent 1.5px) -1.6cqw 0 / 34.6% 100%, linear-gradient(0deg, rgba(40,35,25,.18) 1.5px, transparent 1.5px) 0 0 / 100% 33.4%, linear-gradient(180deg, rgba(255,255,255,.18), transparent 50%), linear-gradient(180deg, #d9d5c8, #e4e0d4); clip-path: inset(0 100% 0 0); animation: m-sjclean 7s 1.2s linear infinite; }
.m-sjwand { position: absolute; left: 31%; top: 40%; width: 10%; height: 36%; z-index: 4; pointer-events: none; animation: m-sjwand 7s 1.2s linear infinite; }
.m-sjwand .w { position: absolute; left: 50%; top: 0; width: 1.2cqw; height: 40%; margin-left: -.6cqw; border-radius: 3px; background: linear-gradient(90deg, #1b1f16, #4a4f40 50%, #1b1f16); rotate: -18deg; transform-origin: 50% 100%; }
.m-sjwand .w::after { content: ""; position: absolute; left: -1.4cqw; top: -1cqw; width: 4cqw; height: 2.4cqw; border-radius: 4px; background: #b9d532; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.m-sjwand .f { position: absolute; left: 0; right: 0; top: 40%; bottom: 0; clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); background: repeating-linear-gradient(90deg, rgba(255,255,255,.9) 0 2px, rgba(190,225,245,.5) 2px 5px); opacity: .85; animation: m-sjflick .18s linear infinite alternate; }
.m-sjwand .m { position: absolute; left: -40%; right: -40%; bottom: -8%; height: 30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.75), transparent); filter: blur(2px); }
.m-sjwasher { position: absolute; left: 3%; bottom: 9%; width: 30%; z-index: 5; display: block; filter: drop-shadow(0 16px 12px rgba(27,31,22,.45)); animation: m-sjin 1s .2s var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-sjfoam { position: absolute; left: 34%; bottom: 4%; width: 9.5%; z-index: 6; display: block; rotate: 4deg; filter: drop-shadow(0 12px 9px rgba(27,31,22,.4)); animation: m-sjin 1s .4s var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-sjpacks { position: absolute; right: 3%; bottom: 4%; width: 27%; z-index: 6; animation: m-sjin 1s .5s var(--m-ease) backwards; }
.m-sjpackimg { display: block; filter: drop-shadow(0 12px 10px rgba(27,31,22,.4)); transition: transform .45s var(--m-ease); }
.m-sjwasher:hover, .m-sjfoam:hover, .m-sjpackimg:hover { transform: translateY(-6px); }
.m-sjtag { position: absolute; left: -16%; top: -18%; padding: .9cqw 1.6cqw; border-radius: 6px; font: 800 clamp(10px, 2.3cqw, 15px)/1 var(--m-head); font-style: normal; letter-spacing: .04em; white-space: nowrap; color: #1b1f16; background: #f2a900; box-shadow: 0 6px 14px rgba(27,31,22,.3); rotate: -6deg; animation: m-sjtag 3.2s 1.5s ease-in-out infinite; }
.m-sjcard { position: absolute; right: 9%; top: 6%; z-index: 7; width: 58%; padding: 1.8cqw 2cqw 2cqw; border-radius: 10px; background: #1b1f16; color: #fff; box-shadow: 0 16px 28px rgba(27,31,22,.35); animation: m-sjin .9s .7s var(--m-ease) backwards; }
.m-sjcard > small { display: block; margin-bottom: 1.2cqw; font: 700 clamp(8.5px, 1.8cqw, 11px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #f2a900; }
.m-sjcb { display: grid; grid-template-columns: 44% minmax(0, 1fr); gap: 2cqw; align-items: center; }
.m-sjdial { display: block; width: 100%; height: auto; overflow: visible; }
.m-sjdial .arc { fill: none; stroke: #3a3f2c; stroke-width: 7; }
.m-sjdial .hot { fill: none; stroke: #f2a900; stroke-width: 7; stroke-dasharray: 100; stroke-dashoffset: 100; animation: m-sjarc 1.4s 1s var(--m-ease) forwards; }
.m-sjdial .tk { stroke: rgba(255,255,255,.7); stroke-width: 1.4; }
.m-sjdial text { font: 600 7px/1 var(--m-body); fill: rgba(255,255,255,.7); }
.m-sjdial circle { fill: #b9d532; }
.m-sjdial .nd { transform-box: view-box; transform-origin: 60px 62px; opacity: 0; transform: rotate(-90deg); animation: m-sjneedle 10s calc(1.6s + var(--i) * 2s) var(--m-ease) infinite; }
.m-sjdial .nd path { stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.m-sjcl { display: grid; gap: .2cqw; min-width: 0; }
.m-sjcl i { display: flex; justify-content: space-between; gap: 1cqw; padding: .55cqw 1cqw; border-radius: 6px; font-style: normal; animation: m-sjstep 10s calc(1.6s + var(--i) * 2s) linear infinite; }
.m-sjcl b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 clamp(8.5px, 1.85cqw, 12px)/1.1 var(--m-body); }
.m-sjcl em { font: 600 clamp(8.5px, 1.75cqw, 11.5px)/1.1 var(--m-body); font-style: normal; white-space: nowrap; color: #d8dcc8; font-variant-numeric: tabular-nums; }
@keyframes m-sjin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-sjsun { from { translate: -20% 0; } to { translate: 20% 0; } }
@keyframes m-sjclean { 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 60% { clip-path: inset(0 0 0 0); opacity: 1; } 86% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes m-sjwand { 0% { left: 25%; opacity: 1; } 60% { left: 72%; opacity: 1; } 66%, 94% { left: 72%; opacity: 0; } 100% { left: 25%; opacity: 0; } }
@keyframes m-sjflick { from { opacity: .7; } to { opacity: .95; } }
@keyframes m-sjtag { 0%, 100% { rotate: -6deg; } 50% { rotate: -2deg; } }
@keyframes m-sjarc { to { stroke-dashoffset: 12; } }
@keyframes m-sjneedle { 0% { opacity: 1; transform: rotate(-90deg); } 7% { transform: rotate(var(--r)); } 18% { opacity: 1; transform: rotate(var(--r)); } 20%, 100% { opacity: 0; transform: rotate(var(--r)); } }
@keyframes m-sjstep { 0%, 18% { background: rgba(242,169,0,.2); box-shadow: inset 0 0 0 1.5px rgba(242,169,0,.7); } 21%, 100% { background: transparent; box-shadow: none; } }
.m-sjtile { border-radius: 8px; border: 1.5px solid #e2dccb; box-shadow: 0 10px 22px rgba(27,31,22,.06); }
.m-sjimg { border-radius: 8px; background: radial-gradient(circle at 50% 40%, #fff, #f1ead6); }
.m-sjtile:is(:hover, :focus-visible) { border-color: #1b1f16; box-shadow: 0 16px 30px rgba(27,31,22,.12), inset 0 -3px 0 #f2a900; }
.m-sjtile .m-q8tx small { color: #6e4a00; }
.m-sjtile em { width: 14px; height: 8px; border-radius: 2px; border: 2px solid #1b1f16; background: linear-gradient(90deg, #b9d532 0 60%, transparent 60%); opacity: .7; transition: opacity .3s; }
.m-sjtile:is(:hover, :focus-visible) em { opacity: 1; animation: m-sjcharge 1s steps(3) infinite; }
@keyframes m-sjcharge { 0% { background-size: 33% 100%; } 100% { background-size: 100% 100%; } }
.m-sjspecs > span { color: #6e4a00; }
.m-sjspecs a { border-radius: 6px; border: 1.5px solid #e2dccb; } .m-sjspecs a:is(:hover, :focus-visible) { border-color: #1b1f16; }
.m-sjspecs b { border-radius: 4px; background: #1b1f16; color: #f2a900 !important; } .m-sjspecs a:nth-of-type(2n) b { background: #f2a900; color: #1b1f16 !important; }
@media (max-width: 900px) { .m-sjcard { right: 4%; width: 64%; } }
/* trigger (Sun Joe): a squared sun-yellow button with a dark trigger-guard edge; on hover a fan of spray bursts out from behind the arrow and a pressure bar fills along the bottom edge */
body.bv-trigger .btn { border-radius: 6px; padding: 15px 26px; letter-spacing: .02em; text-transform: uppercase; font-size: 14px; }
body.bv-trigger :is(.btn.accent, .pcard .btn, .m-btn-main) { background: #f2a900; color: #1b1f16; box-shadow: inset 0 -3px 0 rgba(27,31,22,.25), 0 10px 22px rgba(242,169,0,.3); }
body.bv-trigger :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: #ffb915; color: #1b1f16; }
body.bv-trigger .btn::after { inset: auto auto 0 0; width: 100%; height: 3px; transform: scaleX(0); transform-origin: 0 50%; background: #1b1f16; transition: transform .5s var(--m-ease); }
body.bv-trigger .btn:is(:hover, :focus-visible)::after { transform: scaleX(1); }
body.bv-trigger .btn::before { content: ""; position: absolute; right: 16px; top: 50%; width: 46px; height: 46px; margin-top: -23px; z-index: -1; pointer-events: none; background: repeating-conic-gradient(from 60deg at 100% 50%, rgba(255,255,255,.85) 0 3deg, transparent 3deg 9deg); -webkit-mask: radial-gradient(circle at 100% 50%, transparent 8px, #000 9px, #000 60%, transparent 70%); mask: radial-gradient(circle at 100% 50%, transparent 8px, #000 9px, #000 60%, transparent 70%); clip-path: polygon(100% 50%, 0 0, 0 100%); opacity: 0; transform: scaleX(.2); transform-origin: 100% 50%; }
body.bv-trigger .btn:is(:hover, :focus-visible)::before { animation: m-trspray .7s ease-out forwards; }
body.bv-trigger .btn .arr { display: inline-block; transition: transform .25s var(--m-ease); } body.bv-trigger .btn:hover .arr { transform: translateX(4px); }
body.bv-trigger :is(.m-btn-ghost, .btn.ghost)::before { background: repeating-conic-gradient(from 60deg at 100% 50%, rgba(242,169,0,.9) 0 3deg, transparent 3deg 9deg); }
body.bv-trigger :is(.m-btn-ghost, .btn.ghost)::after { background: #f2a900; }
body.bv-trigger .m-cta .btn.m-white::before { background: repeating-conic-gradient(from 60deg at 100% 50%, rgba(242,169,0,.9) 0 3deg, transparent 3deg 9deg); }
body.bv-trigger .m-cta .btn.m-white::after { background: #f2a900; } body.bv-trigger .m-cta .btn.m-white:hover { color: #1b1f16; }
@keyframes m-trspray { 0% { opacity: 0; transform: scaleX(.2); } 30% { opacity: 1; } 100% { opacity: 0; transform: scaleX(1.6); } }
/* ly-voltage (Sun Joe): workshop rhythm — numbered section kickers, hazard-stripe dividers, a dark gauge block up front, battery headers */
body.ly-voltage main { counter-reset: sjsec; }
body.ly-voltage main section > .wrap > h2, body.ly-voltage .m-hbhead h2 { text-transform: uppercase; letter-spacing: .005em; line-height: 1; font-size: clamp(32px, 4.2vw, 52px); }
body.ly-voltage .m-hbkick { display: inline-flex; align-items: center; gap: 10px; color: #6e4a00; }
body.ly-voltage .m-hbkick::before { counter-increment: sjsec; content: counter(sjsec, decimal-leading-zero); padding: 4px 7px; border-radius: 4px; font-size: 12px; letter-spacing: .04em; color: #f2a900; background: #1b1f16; }
body.ly-voltage .m-hb-gauge, body.ly-voltage .m-hb-quickpick, body.ly-voltage .m-hb-guidehub { position: relative; padding-top: 80px; }
body.ly-voltage .m-hb-gauge::before, body.ly-voltage .m-hb-quickpick::before, body.ly-voltage .m-hb-guidehub::before, body.ly-voltage .m-cta .m-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(-45deg, #f2a900 0 14px, #1b1f16 14px 28px); }
body.ly-voltage .m-hb-gauge { background: #1b1f16; }
body.ly-voltage .m-hb-gauge .m-hbhead h2 { color: #fff; } body.ly-voltage .m-hb-gauge .m-hblede { color: rgba(255,255,255,.8); } body.ly-voltage .m-hb-gauge .m-hbkick { color: #f2a900; } body.ly-voltage .m-hb-gauge .m-hbkick::before { color: #1b1f16; background: #f2a900; }
body.ly-voltage .m-hb-gauge .m-hbnote { color: rgba(255,255,255,.75); background: rgba(255,255,255,.06); border-left: 4px solid #f2a900; padding: 12px 16px; border-radius: 6px; }
body.ly-voltage .m-hbgar { border: 0; box-shadow: inset 4px 0 0 #f2a900; }
body.ly-voltage .m-hb-platform { background: linear-gradient(180deg, #efeedd, #f6f5f0); }
body.ly-voltage .m-hbqp { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.ly-voltage .m-hbqpi { border-radius: 8px; border-top: 4px solid #1b1f16; }
body.ly-voltage .m-hbneed small { color: #6e4a00; }
body.ly-voltage .m-hbshot { border-radius: 6px; background: radial-gradient(70% 70% at 50% 35%, #fff, #f1ead6); }
body.ly-voltage .m-hbme { border-radius: 8px; background: repeating-linear-gradient(-45deg, rgba(242,169,0,.06) 0 14px, transparent 14px 28px), #1b1f16; }
body.ly-voltage .m-hbme .m-hbkick { color: #f2a900; } body.ly-voltage .m-hbme .m-hbkick::before { color: #1b1f16; background: #f2a900; }
body.ly-voltage .m-hbmel li { border-top-color: rgba(242,169,0,.5); }
body.ly-voltage .m-hbghf { border-radius: 8px; } body.ly-voltage .m-hbghim { background: radial-gradient(70% 90% at 50% 40%, #fff, #f1ead6); }
body.ly-voltage .pcard { border-radius: 8px; } body.ly-voltage .pcard .shot { background: radial-gradient(70% 70% at 50% 35%, #fff, #f3eedf); }
body.ly-voltage #faq details.faq { border-radius: 6px; border-left: 4px solid #f2a900; }
body.ly-voltage .m-cta .m-band { position: relative; overflow: hidden; border-radius: 10px; padding-top: 56px; background: radial-gradient(40% 90% at 88% 0%, rgba(242,169,0,.3), transparent 70%), #1b1f16; }
body.ly-voltage .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(242,169,0,.25), transparent 70%), linear-gradient(120deg, #1b1f16, #2f3326); } body.ly-voltage .m-page-hero .eyebrow { color: #f2a900; }
body.ly-voltage .m-page-hero h1 { text-transform: uppercase; }
body.ly-voltage .m-page-hero .btn.m-btn-main { background: #f2a900; color: #1b1f16; }
body.ly-voltage footer.site { background: #1b1f16; color: #e6e4da; border: 0; border-top: 8px solid #f2a900; } body.ly-voltage footer.site nav a { color: #f2c94c; }
@media (max-width: 1000px) { body.ly-voltage .m-hbqp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { body.ly-voltage .m-hbqp { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 901px) { body.ly-voltage header.site nav { flex-wrap: nowrap; gap: 0; } body.ly-voltage header.site nav a { white-space: nowrap; padding: 9px 8px; font-size: 13.5px; } }
@media (min-width: 901px) and (max-width: 1240px) { body.ly-voltage header.site nav a { padding: 8px 5px; font-size: 12.5px; } }
@media (min-width: 901px) { body.ly-voltage header.site nav > a:first-child, body.ly-voltage header.site nav > a[href$="/#compare"] { display: none; } body.ly-voltage header.site .brand, body.ly-voltage header.site a.logo { flex: none; } }
body.ly-voltage .m-hbgatx h3 { font-size: 19px; letter-spacing: .01em; }
@media (min-width: 901px) and (max-width: 1240px) { body.ly-voltage header.site nav > a[href$="/about/"] { display: none; } body.ly-voltage header.site nav a { padding: 8px 6px; } }
body.ly-voltage .m-cta .m-band::before { inset: 0 0 auto 0; width: auto; height: 10px; border-radius: 0; transform: none; opacity: 1; filter: none; animation: none; }

/* ===== batch 14.11.2026 (2): home block routine (AM / PM routine builder with one product per step) ===== */
.m-hbrt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.m-hbrt-am, .m-hbrt-pm { min-width: 0; padding: 26px 26px 18px; border-radius: calc(var(--m-radius) + 8px); }
.m-hbrt-am { background: radial-gradient(70% 60% at 100% 0, rgba(255,214,140,.55), transparent 70%), linear-gradient(160deg, #fff6ea, #fde6cb); color: var(--m-ink); }
.m-hbrt-pm { background: radial-gradient(70% 60% at 100% 0, rgba(176,150,214,.35), transparent 70%), linear-gradient(160deg, #3d3150, #2a2238); color: #f3eef8; }
.m-hbrth { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 16px; margin-bottom: 10px; }
.m-hbrtic { grid-row: span 2; width: 52px; height: 52px; border-radius: 50%; }
.m-hbrt-am .m-hbrtic { background: radial-gradient(circle, #ffd27a 0 46%, transparent 48%), repeating-conic-gradient(#f2a03a 0 10deg, transparent 10deg 30deg); animation: m-hbrtspin 24s linear infinite; }
.m-hbrt-pm .m-hbrtic { background: radial-gradient(circle at 64% 38%, transparent 0 34%, #f1ecf7 35% 60%, transparent 61%); }
@keyframes m-hbrtspin { to { rotate: 360deg; } }
body.m .m-hbrth h3 { margin: 0; font-size: 30px; line-height: 1.05; color: inherit; }
.m-hbrth p { margin: 0; font-size: 14.5px; line-height: 1.4; opacity: .85; }
.m-hbrt ol { position: relative; list-style: none; margin: 0; padding: 0; }
.m-hbrt ol::before { content: ""; position: absolute; left: 17px; top: 26px; bottom: 26px; width: 2px; background: repeating-linear-gradient(180deg, currentColor 0 4px, transparent 4px 9px); opacity: .3; }
.m-hbrt li { position: relative; display: grid; grid-template-columns: 36px 78px minmax(0, 1fr); align-items: start; gap: 14px; padding: 14px 0; }
.m-hbrt li + li { border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.m-hbrtn { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; margin-top: 20px; border-radius: 50%; font: 600 16px/1 var(--m-head); color: #fff; background: var(--m-accent); box-shadow: 0 0 0 4px #fde6cb; }
.m-hbrt-pm .m-hbrtn { color: #2a2238; background: #e2d6f2; box-shadow: 0 0 0 4px #2f2740; }
.m-hbrtimg { display: block; width: 78px; aspect-ratio: 1; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 8px 18px rgba(43,36,32,.08); }
.m-hbrtimg img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6px; transition: transform .45s var(--m-ease); }
.m-hbrt li:hover .m-hbrtimg img { transform: scale(1.06); }
.m-hbrttx { min-width: 0; }
.m-hbrttx small { display: block; margin-bottom: 3px; font: 700 11.5px/1.2 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: var(--m-accent); }
.m-hbrt-pm .m-hbrttx small { color: #f2c08a; }
.m-hbrttx b { display: block; font: 600 17px/1.3 var(--m-head); }
.m-hbrttx p { margin: 4px 0 8px; font-size: 14px; line-height: 1.5; opacity: .9; }
.m-hbrtlink { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 99px; font: 700 13px/1 var(--m-body); text-decoration: none; color: #fff !important; background: var(--m-accent); transition: background .25s, transform .25s var(--m-ease); }
.m-hbrtlink:is(:hover, :focus-visible) { background: var(--m-accent-2); transform: translateX(2px); }
.m-hbrt-pm .m-hbrtlink { color: #2a2238 !important; background: #f2c08a; } .m-hbrt-pm .m-hbrtlink:is(:hover, :focus-visible) { background: #f7d4ae; }
.m-hbrt-pm .m-hbrtlink:focus-visible, .m-hbrt-pm .m-hbrtimg:focus-visible { outline-color: #f2c08a; }
@media (max-width: 860px) { .m-hbrt { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .m-hbrt-am, .m-hbrt-pm { padding: 20px 16px 10px; } .m-hbrt li { grid-template-columns: 30px 62px minmax(0, 1fr); gap: 10px; } .m-hbrtn { width: 30px; height: 30px; font-size: 14px; } .m-hbrt ol::before { left: 14px; } .m-hbrtimg { width: 62px; border-radius: 14px; } }

/* citrus (GOODAL): a vanity ledge from morning to night — the panel shifts from peach morning light to dusky lilac while a sun rises over it and turns into a moon; a green tangerine slice turns, heartleaf leaves sway, black carrot slices rest by the real Black Carrot ampoule and retinol cream tube; a drop falls into a ripple; a routine card switches between AM and PM steps */
body.hv-citrus .m-hero { background: radial-gradient(46% 60% at 78% 36%, #fffaf3, transparent 70%), radial-gradient(34% 44% at 0% 100%, rgba(224,123,26,.14), transparent 70%), linear-gradient(120deg, #fdf1e3, #fbf7f1 55%, #f3eef6); }
body.hv-citrus .m-hero .eyebrow { color: #8f470a; letter-spacing: .16em; }
body.hv-citrus .m-hero h1 { font-weight: 500 !important; letter-spacing: -.015em; line-height: 1.06 !important; font-size: clamp(30px, 3.4vw, 48px) !important; max-width: 20ch; }
.m-gdsky { position: absolute; inset: 0; border-radius: 30px; overflow: hidden; background: radial-gradient(60% 50% at 30% 20%, rgba(255,221,170,.9), transparent 70%), linear-gradient(180deg, #fde3c6, #fbeee0 60%); box-shadow: 0 26px 50px rgba(43,36,32,.16); animation: m-gdin .9s .05s var(--m-ease) backwards; }
.m-gdsky::after { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 40% at 70% 18%, rgba(210,196,240,.6), transparent 70%), linear-gradient(180deg, #8f7fb0, #c9b8d6 60%); opacity: 0; animation: m-gddusk 16s 1s ease-in-out infinite alternate; }
.m-gdorb { position: absolute; left: 50%; top: 70%; z-index: 1; width: 0; height: 0; rotate: -70deg; animation: m-gdarc 16s 1s ease-in-out infinite alternate; }
.m-gdorb i { position: absolute; left: -4.5cqw; top: -44cqw; width: 9cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #ffe3a3, #f29a2e); box-shadow: 0 0 4cqw 1cqw rgba(255,190,90,.55); animation: m-gdmoon 16s 1s ease-in-out infinite alternate; }
.m-gdledge { position: absolute; left: 0; right: 0; top: 70%; bottom: 0; z-index: 2; border-radius: 0 0 30px 30px; background: linear-gradient(180deg, rgba(255,255,255,.7), transparent 12%), linear-gradient(115deg, transparent 40%, rgba(200,184,168,.25) 42%, transparent 46%), linear-gradient(160deg, transparent 62%, rgba(200,184,168,.22) 64%, transparent 68%), linear-gradient(180deg, #f6efe7, #e9ded2); box-shadow: inset 0 1px 0 #fff, 0 -1px 0 rgba(43,36,32,.08); animation: m-gdin .9s .15s var(--m-ease) backwards; }
.m-gdslice { position: absolute; right: 6%; bottom: 16%; width: 25%; height: auto; z-index: 3; filter: drop-shadow(0 10px 10px rgba(80,60,30,.25)); animation: m-gdin 1s .45s var(--m-ease) backwards, m-gdturn 40s linear infinite; }
.m-gdslice .rind { fill: #5d8a3a; } .m-gdslice .pith { fill: #f7f0d8; } .m-gdslice .seg path { fill: #f6a640; stroke: #fbd38a; stroke-width: .8; } .m-gdslice .core { fill: #fff4d8; }
.m-gdleaf { position: absolute; left: 2%; bottom: 24%; width: 19%; height: auto; z-index: 3; overflow: visible; animation: m-gdin 1s .35s var(--m-ease) backwards; }
.m-gdleaf .stem { fill: none; stroke: #4f7a33; stroke-width: 3; stroke-linecap: round; }
.m-gdleaf .lf { fill: #6f9a4a; stroke: #4f7a33; stroke-width: 1.5; transform-box: fill-box; transform-origin: 50% 100%; animation: m-gdsway 5s calc(var(--i) * .6s) ease-in-out infinite alternate; }
.m-gdamp { position: absolute; left: 21%; bottom: 15%; width: 15%; z-index: 5; display: block; filter: drop-shadow(0 16px 12px rgba(60,30,20,.35)); animation: m-gdin 1s .2s var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-gdtube { position: absolute; left: 38%; bottom: 14%; width: 8.5%; z-index: 5; display: block; rotate: 7deg; filter: drop-shadow(0 12px 10px rgba(60,30,20,.3)); animation: m-gdin 1s .3s var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-gdamp:hover, .m-gdtube:hover { transform: translateY(-6px); }
.m-gdcarrot { position: absolute; left: 46%; bottom: 10%; width: 18%; height: auto; z-index: 6; animation: m-gdin 1s .5s var(--m-ease) backwards; }
.m-gdcarrot .c1, .m-gdcarrot .c2 { fill: #4a1f3c; } .m-gdcarrot .r1, .m-gdcarrot .r2 { fill: #7b3a66; stroke: #9a5a86; stroke-width: 1.5; }
.m-gddrop { position: absolute; left: 62%; top: 36%; bottom: 25%; width: 4%; z-index: 4; pointer-events: none; }
.m-gddrop i { position: absolute; left: 50%; top: 0; width: 1.6cqw; height: 2.2cqw; margin-left: -.8cqw; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(circle at 35% 35%, #fff, #f6c27a 60%, #e88a2c); opacity: 0; animation: m-gdfall 3.2s 1.4s cubic-bezier(.5,0,.9,.6) infinite; }
.m-gddrop b { position: absolute; left: 50%; bottom: 0; width: 8cqw; height: 2.2cqw; margin-left: -4cqw; border-radius: 50%; border: 2px solid rgba(232,138,44,.6); opacity: 0; animation: m-gdripple 3.2s 1.4s ease-out infinite; }
.m-gdcard { position: absolute; right: 4%; top: 6%; z-index: 8; display: grid; gap: 1.2cqw; width: 42%; padding: 2cqw 2.2cqw 2.4cqw; border-radius: 18px; background: rgba(255,255,255,.92); border: 1.5px solid #f1e2cf; box-shadow: 0 16px 28px rgba(43,36,32,.16); backdrop-filter: blur(6px); animation: m-gdin .9s .7s var(--m-ease) backwards; }
.m-gdcard > small { font: 700 clamp(8.5px, 1.8cqw, 11px)/1 var(--m-body); letter-spacing: .16em; text-transform: uppercase; color: #8f470a; }
.m-gdtabs { display: flex; gap: .8cqw; }
.m-gdtabs b { padding: .7cqw 1.8cqw; border-radius: 99px; font: 700 clamp(9px, 1.9cqw, 12px)/1 var(--m-body); color: #5a4f46; background: #f6ead9; animation: m-gdtab 16s 1s ease-in-out infinite alternate; }
.m-gdtabs b.pm { animation-name: m-gdtab2; }
.m-gdlists { display: grid; }
.m-gdl { grid-area: 1 / 1; display: grid; gap: .4cqw; align-content: start; animation: m-gdshow 16s 1s ease-in-out infinite alternate; }
.m-gdl.pm { animation-name: m-gdhide; opacity: 0; }
.m-gdl i { display: flex; align-items: center; gap: 1.2cqw; font: 600 clamp(9px, 2cqw, 12.5px)/1.25 var(--m-body); font-style: normal; color: #2b2420; }
.m-gdl em { display: grid; place-items: center; flex: none; width: 3.6cqw; min-width: 14px; aspect-ratio: 1; border-radius: 50%; font: 700 clamp(7px, 1.5cqw, 9.5px)/1 var(--m-body); font-style: normal; color: #fff; background: #e07b1a; }
.m-gdl.pm em { background: #5b4a78; }
@keyframes m-gdin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-gddusk { 0%, 35% { opacity: 0; } 65%, 100% { opacity: .9; } }
@keyframes m-gdarc { from { rotate: -70deg; } to { rotate: 70deg; } }
@keyframes m-gdmoon { 0%, 40% { background: radial-gradient(circle at 40% 38%, #ffe3a3, #f29a2e); box-shadow: 0 0 4cqw 1cqw rgba(255,190,90,.55); } 60%, 100% { background: radial-gradient(circle at 70% 30%, transparent 0 38%, #fbf7ff 40%); box-shadow: 0 0 3cqw .5cqw rgba(240,232,255,.5); } }
@keyframes m-gdturn { to { rotate: 360deg; } }
@keyframes m-gdsway { from { rotate: -5deg; } to { rotate: 6deg; } }
@keyframes m-gdfall { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 70% { opacity: 1; transform: translateY(calc(var(--h, 1) * 13cqw)); } 72%, 100% { opacity: 0; transform: translateY(13cqw); } }
@keyframes m-gdripple { 0%, 68% { opacity: 0; transform: scale(.3); } 72% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes m-gdtab { 0%, 40% { color: #fff; background: #e07b1a; } 60%, 100% { color: #5a4f46; background: #f6ead9; } }
@keyframes m-gdtab2 { 0%, 40% { color: #5a4f46; background: #f6ead9; } 60%, 100% { color: #fff; background: #5b4a78; } }
@keyframes m-gdshow { 0%, 40% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes m-gdhide { 0%, 45% { opacity: 0; } 60%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .m-gdl.pm { opacity: 0; } .m-gdtabs b.am { color: #fff; background: #e07b1a; } }
.m-gdtile { border-radius: 18px; border: 1.5px solid #f1e2cf; box-shadow: 0 10px 22px rgba(43,36,32,.05); }
.m-gdimg { border-radius: 14px; background: radial-gradient(circle at 50% 40%, #fff, #f6ead9); }
.m-gdtile:is(:hover, :focus-visible) { border-color: #e07b1a; box-shadow: 0 16px 30px rgba(43,36,32,.1); }
.m-gdtile .m-q8tx small { color: #8f470a; }
.m-gdtile em { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, #fff4d8 0 22%, #f6a640 24% 70%, #5d8a3a 72%); opacity: .7; transition: opacity .3s; }
.m-gdtile:is(:hover, :focus-visible) em { opacity: 1; animation: m-gdturn 3s linear infinite; }
.m-gdspecs > span { color: #8f470a; }
.m-gdspecs a { border-radius: 99px; border: 1.5px solid #f1e2cf; } .m-gdspecs a:is(:hover, :focus-visible) { border-color: #e07b1a; }
.m-gdspecs b { border-radius: 99px; background: #b0560b; } .m-gdspecs a:nth-of-type(2n) b { background: #5b8a3a; }
/* dropper (GOODAL): a soft serum-orange pill; on hover a glossy bead rolls along the bottom edge from left to right, leaving a thin shining trail, and the arrow nudges forward */
body.bv-dropper .btn { border-radius: 999px; padding: 15px 28px; letter-spacing: .01em; }
body.bv-dropper :is(.btn.accent, .pcard .btn, .m-btn-main) { background: linear-gradient(180deg, #c4620f, #a8520a); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 22px rgba(176,86,11,.25); }
body.bv-dropper :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: linear-gradient(180deg, #a8520a, #8f470a); color: #fff; }
body.bv-dropper .btn::before { content: ""; position: absolute; left: 16px; bottom: 5px; width: 8px; height: 8px; z-index: 1; pointer-events: none; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, rgba(255,236,210,.9) 45%, rgba(255,200,140,.8)); opacity: 0; transition: left .8s cubic-bezier(.45,0,.2,1), opacity .2s; }
body.bv-dropper .btn:is(:hover, :focus-visible)::before { left: calc(100% - 24px); opacity: 1; }
body.bv-dropper .btn::after { inset: auto 20px 8px 20px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s cubic-bezier(.45,0,.2,1); }
body.bv-dropper .btn:is(:hover, :focus-visible)::after { transform: scaleX(1); }
body.bv-dropper .btn .arr { display: inline-block; transition: transform .3s var(--m-ease) .3s; } body.bv-dropper .btn:hover .arr { transform: translateX(4px); }
body.bv-dropper :is(.m-btn-ghost, .btn.ghost)::before, body.bv-dropper .m-cta .btn.m-white::before { background: radial-gradient(circle at 35% 35%, #ffd9a8, #e07b1a); }
body.bv-dropper :is(.m-btn-ghost, .btn.ghost)::after, body.bv-dropper .m-cta .btn.m-white::after { background: linear-gradient(90deg, rgba(224,123,26,0), rgba(224,123,26,.8)); }
body.bv-dropper .m-cta .btn.m-white:hover { color: #8f470a; }
/* ly-ritual (GOODAL): an airy vanity rhythm — serif heads with a three-dot line marker (tangerine, heartleaf, black carrot), rounded cream panels, the routine builder first, soft peach and lilac bands */
body.ly-ritual main section > .wrap > h2, body.ly-ritual .m-hbhead h2 { font-weight: 500 !important; letter-spacing: -.015em; }
body.ly-ritual .m-hbhead h2::before, body.ly-ritual main section > .wrap > h2::before { content: ""; display: block; width: 46px; height: 10px; margin-bottom: 14px; background: radial-gradient(circle, #e07b1a 4px, transparent 5px) 0 0 / 16px 10px no-repeat, radial-gradient(circle, #6f9a4a 4px, transparent 5px) 16px 0 / 16px 10px no-repeat, radial-gradient(circle, #5b2a4a 4px, transparent 5px) 32px 0 / 16px 10px no-repeat; }
body.ly-ritual .m-hbkick { color: #8f470a; }
body.ly-ritual .m-hb-routine { background: linear-gradient(180deg, #fbf7f1, #fff); }
body.ly-ritual .m-hb-collections { background: linear-gradient(180deg, #fdf1e3, #fbf7f1); }
body.ly-ritual .m-hbcoli { border-radius: 26px; border-color: #f1e2cf; }
body.ly-ritual .m-hbcolim { background: radial-gradient(80% 90% at 50% 100%, #fff, #f6ead9); }
body.ly-ritual .m-hbcoli:nth-child(2) .m-hbcolim { background: radial-gradient(80% 90% at 50% 100%, #fff, #e3eedb); }
body.ly-ritual .m-hbcoli:nth-child(3) .m-hbcolim { background: radial-gradient(80% 90% at 50% 100%, #fff, #ece0ea); }
body.ly-ritual .m-hbcoltx b { font-weight: 500; }
body.ly-ritual .m-hb-quickpick { background: linear-gradient(180deg, #f3eef6, #fbf7f1); }
body.ly-ritual .m-hbqp { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.ly-ritual .m-hbqpi { border-radius: 24px; border-color: #ece3f0; }
body.ly-ritual .m-hbshot { border-radius: 18px; background: radial-gradient(70% 70% at 50% 35%, #fff, #f6ead9); }
body.ly-ritual .m-hbneed small { color: #8f470a; }
body.ly-ritual #compare .tablewrap { border-radius: 22px; overflow: auto; background: #fff; box-shadow: 0 12px 30px rgba(43,36,32,.06); }
body.ly-ritual #compare table.spec thead th { background: #3b2a22; color: #fff; }
body.ly-ritual #compare td .btn { padding: 10px 16px; font-size: 13.5px; white-space: nowrap; color: #fff; background: linear-gradient(180deg, #c4620f, #a8520a); }
body.ly-ritual .m-hbst li { border-radius: 24px; border-color: #f1e2cf; background: linear-gradient(180deg, #fff, #fdf5ea); }
body.ly-ritual .m-hbst li::before { font-weight: 500; color: #b0560b; }
body.ly-ritual .m-hbme { border-radius: 30px; background: radial-gradient(60% 120% at 100% 0, rgba(224,123,26,.3), transparent 60%), linear-gradient(135deg, #3b2a22, #4a3442); }
body.ly-ritual .m-hbme .m-hbkick { color: #f2c08a; } body.ly-ritual .m-hbmel li { border-top-color: rgba(242,192,138,.45); }
body.ly-ritual .m-hbme .m-hbhead h2::before { filter: brightness(1.4); }
body.ly-ritual .m-hbghf { border-radius: 24px; } body.ly-ritual .m-hbghim { background: radial-gradient(70% 90% at 50% 40%, #fff, #f6ead9); }
body.ly-ritual .m-hbnote { padding: 12px 16px; border-radius: 16px; background: #fff; border-left: 4px solid #6f9a4a; }
body.ly-ritual .pcard { border-radius: 22px; } body.ly-ritual .pcard .shot { background: radial-gradient(70% 70% at 50% 35%, #fff, #f8efe3); }
body.ly-ritual #faq details.faq { border-radius: 18px; }
body.ly-ritual .m-cta .m-band { border-radius: 30px; background: radial-gradient(40% 90% at 88% 0%, rgba(224,123,26,.4), transparent 70%), linear-gradient(120deg, #3b2a22, #4a3442 60%, #5b3a4f); }
body.ly-ritual .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(224,123,26,.35), transparent 70%), linear-gradient(120deg, #3b2a22, #4a3442); } body.ly-ritual .m-page-hero .eyebrow { color: #f2c08a; }
body.ly-ritual .m-page-hero .btn.m-btn-main { background: #fff; color: #8f470a; } body.ly-ritual .m-page-hero .btn.m-btn-main:hover { background: #fdf1e3; }
body.ly-ritual footer.site { background: #3b2a22; color: #efe6dc; border: 0; } body.ly-ritual footer.site nav a { color: #f2c08a; }
@media (max-width: 1000px) { body.ly-ritual .m-hbqp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { body.ly-ritual .m-hbqp { grid-template-columns: minmax(0, 1fr); } }

/* ===== batch 14.11.2026 (3): shared hero layout (icebox, pullout, balance) ===== */
:is(body.hv-icebox, body.hv-pullout, body.hv-balance) .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); color: var(--m-ink); }
:is(body.hv-icebox, body.hv-pullout, body.hv-balance) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:is(body.hv-icebox, body.hv-pullout, body.hv-balance) .m-hero .m-copy > * { animation: m-rise .8s var(--m-ease) both; }
:is(body.hv-icebox, body.hv-pullout, body.hv-balance) .m-hero .m-copy > :nth-child(3) { animation-delay: .08s; } :is(body.hv-icebox, body.hv-pullout, body.hv-balance) .m-hero .m-copy > :nth-child(4) { animation-delay: .16s; } :is(body.hv-icebox, body.hv-pullout, body.hv-balance) .m-hero .m-copy > :nth-child(n+5) { animation-delay: .24s; }
:is(body.hv-icebox, body.hv-pullout, body.hv-balance) .m-hero h1 { color: var(--m-ink) !important; text-wrap: balance; max-width: 18ch; font-size: clamp(32px, 3.8vw, 54px) !important; line-height: 1.08 !important; }
:is(body.hv-icebox, body.hv-pullout, body.hv-balance) .m-hero .bgcredit { display: none; }
:is(body.hv-icebox, body.hv-pullout, body.hv-balance) .m-hero .sub { color: var(--m-body-ink); }
:is(body.hv-icebox, body.hv-pullout, body.hv-balance) .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: var(--m-ink) !important; background: rgba(255,255,255,.7) !important; }
:is(body.hv-icebox, body.hv-pullout, body.hv-balance) .m-hero .m-btn-ghost:hover { background: var(--m-ink) !important; color: #fff !important; }
:is(body.hv-icebox, body.hv-pullout, body.hv-balance) .m-hero .m-chips span { background: #fff; color: var(--m-ink); border: 1.5px solid color-mix(in srgb, var(--m-ink) 14%, transparent); backdrop-filter: none; }
:is(.m-dl, .m-dn, .m-wb) { position: relative; width: min(100%, 600px); justify-self: center; container-type: inline-size; aspect-ratio: 600 / 560; isolation: isolate; }
:is(.m-dl, .m-dn, .m-wb) a { -webkit-tap-highlight-color: transparent; }
:is(.m-dl, .m-dn, .m-wb) img { display: block; width: 100%; height: auto; border-radius: 0; }
:is(.m-dlcats, .m-dncats, .m-wbcats) { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; padding: 10px clamp(18px, 4vw, 72px) clamp(26px, 4vh, 44px); }
:is(.m-dltile, .m-dntile, .m-wbtile) { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; padding: 14px 14px 12px 12px; background: #fff; color: var(--m-ink) !important; overflow: hidden; animation: m-rise .7s calc(.8s + var(--i, 0) * .08s) var(--m-ease) backwards; transition: transform .35s var(--m-ease), border-color .3s, box-shadow .3s; }
:is(.m-dlimg, .m-dnimg, .m-wbimg) { flex: none; display: block; overflow: hidden; width: 58px; height: 58px; padding: 4px; }
:is(.m-dlimg, .m-dnimg, .m-wbimg) img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; transition: transform .45s var(--m-ease); }
:is(.m-dltile, .m-dntile, .m-wbtile):hover :is(.m-dlimg, .m-dnimg, .m-wbimg) img { transform: scale(1.08) rotate(-4deg); }
:is(.m-dltile, .m-dntile, .m-wbtile):focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; }
:is(.m-dltile, .m-dntile, .m-wbtile):is(:hover, :focus-visible) { transform: translateY(-4px); }
:is(.m-dltile, .m-dntile, .m-wbtile) .m-q8tx b { font: 700 15px/1.2 var(--m-body); color: var(--m-ink); padding-right: 22px; }
:is(.m-dltile, .m-dntile, .m-wbtile) em { position: absolute; right: 12px; top: 12px; font-style: normal; }
:is(.m-dlspecs, .m-dnspecs, .m-wbspecs) { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -6px 0 18px; }
:is(.m-dlspecs, .m-dnspecs, .m-wbspecs) > span { flex-basis: 100%; margin: 0 0 2px; font: 700 12px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; }
:is(.m-dlspecs, .m-dnspecs, .m-wbspecs) a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; background: #fff; color: var(--m-ink) !important; text-decoration: none; transition: border-color .25s, transform .3s var(--m-ease), box-shadow .3s; animation: m-rise .6s calc(.45s + var(--i, 0) * .06s) var(--m-ease) backwards; }
:is(.m-dlspecs, .m-dnspecs, .m-wbspecs) a:is(:hover, :focus-visible) { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,24,40,.12); }
:is(.m-dlspecs, .m-dnspecs, .m-wbspecs) b { display: grid; place-items: center; min-width: 40px; height: 28px; padding: 0 10px; color: #fff; font: 700 13px/1 var(--m-body); white-space: nowrap; }
:is(.m-dlspecs, .m-dnspecs, .m-wbspecs) small { font: 600 12.5px/1 var(--m-body); white-space: nowrap; color: var(--m-body-ink); }
:is(body.hv-icebox, body.hv-pullout, body.hv-balance) .m-acard .m-art { position: relative; background: #fff !important; border-bottom: 1px solid color-mix(in srgb, var(--m-ink) 7%, transparent); }
:is(body.hv-icebox, body.hv-pullout, body.hv-balance) .m-acard .m-art img { position: absolute; left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); max-height: none; object-fit: contain; border-radius: 0; }
@media (max-width: 900px) {
  :is(body.hv-icebox, body.hv-pullout, body.hv-balance) .m-hero { min-height: 0; }
  :is(body.hv-icebox, body.hv-pullout, body.hv-balance) .m-hero .m-inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  :is(body.hv-icebox, body.hv-pullout, body.hv-balance) .m-hero .m-copy { display: contents; }
  :is(body.hv-icebox, body.hv-pullout, body.hv-balance) .m-hero .m-copy > * { order: 1; }
  :is(body.hv-icebox, body.hv-pullout, body.hv-balance) .m-hero .m-copy > :is(.m-ctas, nav, .m-chips) { order: 3; }
  :is(.m-dl, .m-dn, .m-wb) { order: 2; width: min(100%, 520px); align-self: center; margin: 8px 0 4px; }
  :is(.m-dlcats, .m-dncats, .m-wbcats) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-dlcats, .m-dncats, .m-wbcats) > a:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  :is(.m-dlspecs, .m-dnspecs, .m-wbspecs) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-dlspecs, .m-dnspecs, .m-wbspecs) > span { grid-column: 1 / -1; }
  :is(.m-dlspecs, .m-dnspecs, .m-wbspecs) a { flex-direction: column; align-items: flex-start; gap: 5px; padding: 6px 10px 8px 6px; }
  :is(.m-dlspecs, .m-dnspecs, .m-wbspecs) small { white-space: normal; line-height: 1.2; padding-left: 2px; }
}
@media (max-width: 420px) {
  :is(.m-dltile, .m-dntile, .m-wbtile) { gap: 9px; padding: 10px; } :is(.m-dlimg, .m-dnimg, .m-wbimg) { width: 44px; height: 44px; }
  :is(.m-dltile, .m-dntile, .m-wbtile) .m-q8tx b { font-size: 13px; padding-right: 0; } :is(.m-dltile, .m-dntile, .m-wbtile) em { display: none; }
}

/* ===== batch 14.11.2026 (3): home blocks fit (listed measurements drawn as columns to scale), brew (how-to timeline beside a filling carafe), library (guide shelf with photo cards) ===== */
.m-hbfit { display: flex; gap: 18px; align-items: stretch; }
.m-hbfitg { flex: calc(var(--fk, 3) + 1.5) 1 0; min-width: 0; display: flex; flex-direction: column; padding: 22px 20px 18px; background: #fff; border-radius: var(--m-radius); border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); }
body.m .m-hbfitg h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.25; }
.m-hbfitg > p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--m-body-ink); }
.m-hbfitc { flex: 1; list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--fk, 3), minmax(0, 1fr)); gap: 10px; align-items: start; }
.m-hbfito { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--m-ink) !important; border-radius: 12px; padding-bottom: 4px; transition: transform .3s var(--m-ease); }
.m-hbfitar { position: relative; display: block; width: 100%; height: 176px; border-bottom: 3px solid var(--m-ink); background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--m-ink) 7%, transparent) 0 1px, transparent 1px 18px); }
.m-hbfitar i { position: absolute; left: 18%; right: 18%; bottom: 0; height: calc((100% - 34px) * var(--h, .5)); border-radius: 10px 10px 2px 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--m-accent) 55%, #fff), var(--m-accent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); transform-origin: 50% 100%; transition: background .3s, transform .35s var(--m-ease); }
.m-hbfitv { position: absolute; left: 0; right: 0; bottom: calc((100% - 34px) * var(--h, .5) + 5px); display: flex; justify-content: center; align-items: baseline; gap: 2px; text-align: center; }
.m-hbfitv b { font: 700 18px/1 var(--m-head); font-variant-numeric: tabular-nums; } .m-hbfitv small { font: 600 11px/1 var(--m-body); color: var(--m-body-ink); }
.m-hbfitim { display: block; width: 56px; height: 56px; overflow: hidden; border-radius: 12px; background: var(--m-soft); }
.m-hbfitim img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.m-hbfitnm { font: 600 12.5px/1.3 var(--m-body); text-align: center; text-wrap: balance; }
.m-hbfito:is(:hover, :focus-visible) { transform: translateY(-3px); } .m-hbfito:is(:hover, :focus-visible) .m-hbfitar i { background: linear-gradient(180deg, var(--m-accent), var(--m-accent-2)); }
.m-hbfito:is(:hover, :focus-visible) .m-hbfitnm { color: var(--m-accent); }
.m-hbfitft { margin: 14px 0 0; font-size: 14px; } .m-hbfitft a { font-weight: 700; }
.m-hb-brew { background: linear-gradient(160deg, color-mix(in srgb, var(--m-ink) 94%, #000), color-mix(in srgb, var(--m-ink) 62%, #3b2416)); color: #fff; }
body.m .m-hb-brew .m-hbhead h2 { color: #fff; } .m-hb-brew .m-hblede { color: rgba(255,255,255,.84); } .m-hb-brew .m-hbkick { color: #f0c27a; } .m-hb-brew .m-hbnote { color: rgba(255,255,255,.78); }
.m-hb-brew a:focus-visible { outline-color: #f0c27a; }
.m-hbbr { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 34px; align-items: start; }
.m-hbbrart { position: sticky; top: 96px; display: grid; justify-items: center; gap: 20px; padding: 28px 22px 22px; border-radius: calc(var(--m-radius) + 4px); background: radial-gradient(70% 60% at 50% 30%, rgba(240,194,122,.16), transparent 70%), rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.m-hbbrsvg { display: block; width: min(210px, 62%); height: auto; overflow: visible; }
.m-hbbrsvg .gl { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.75); stroke-width: 3; }
.m-hbbrsvg .sh { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 4; stroke-linecap: round; }
.m-hbbrsvg .w { fill: rgba(156,198,220,.45); transform: translateY(150px); animation: m-hbbrw 12s ease-in-out infinite; }
.m-hbbrsvg .c { fill: #5a3418; opacity: 0; transform: translateY(150px); animation: m-hbbrc 12s ease-in-out infinite; }
.m-hbbrsvg .mesh rect { fill: rgba(255,255,255,.1); stroke: #cfd8de; stroke-width: 2; } .m-hbbrsvg .mesh path { fill: none; stroke: rgba(207,216,222,.6); stroke-width: 1; }
.m-hbbrsvg .lid { fill: #efe7da; } .m-hbbrsvg .tab { fill: #f0a030; } .m-hbbrsvg .hd { fill: none; stroke: #efe7da; stroke-width: 10; stroke-linecap: round; }
.m-hbbrsvg .bub circle { fill: rgba(255,255,255,.55); animation: m-hbbrbub 4s ease-in infinite; } .m-hbbrsvg .bub circle:nth-child(2) { animation-delay: 1.3s; } .m-hbbrsvg .bub circle:nth-child(3) { animation-delay: 2.6s; }
@keyframes m-hbbrw { 0% { transform: translateY(150px); } 22%, 100% { transform: translateY(0); } }
@keyframes m-hbbrc { 0%, 18% { opacity: 0; transform: translateY(0); fill: #c9a57c; } 30% { opacity: .55; } 70%, 92% { opacity: 1; fill: #4a2a14; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } }
@keyframes m-hbbrbub { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-120px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .m-hbbrsvg .w, .m-hbbrsvg .c { transform: none; } .m-hbbrsvg .c { opacity: 1; fill: #4a2a14; } }
.m-hbbrp { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; align-items: center; width: 100%; padding: 12px; border-radius: calc(var(--m-radius) - 2px); background: #fff; color: var(--m-ink); }
.m-hbbrimg { display: block; width: 78px; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--m-soft); }
.m-hbbrimg img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 5px; mix-blend-mode: multiply; }
.m-hbbrp b { display: block; font: 700 15.5px/1.3 var(--m-body); } .m-hbbrp small { display: block; margin: 3px 0 10px; font: 500 13px/1.35 var(--m-body); color: var(--m-body-ink); }
.m-hbbrp .btn { padding: 11px 16px; font-size: 14px; }
.m-hbbrst { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.m-hbbrst li { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 16px 18px; border-radius: calc(var(--m-radius) - 4px); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: background .3s, border-color .3s; }
.m-hbbrst li:hover { background: rgba(255,255,255,.1); border-color: rgba(240,194,122,.5); }
.m-hbbrt { grid-row: span 2; display: grid; place-items: center; min-height: 46px; padding: 6px 8px; border-radius: 12px; font: 700 14px/1.15 var(--m-body); text-align: center; color: #23160b; background: #f0c27a; font-variant-numeric: tabular-nums; }
.m-hbbrst b { display: block; font: 700 17px/1.3 var(--m-body); color: #fff; }
.m-hbbrst p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.84); }
.m-hblbfs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.m-hblbf, .m-hblbi { display: grid; min-width: 0; overflow: hidden; text-decoration: none; color: var(--m-ink) !important; background: #fff; border-radius: var(--m-radius); border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); transition: transform .3s var(--m-ease), box-shadow .3s, border-color .3s; }
.m-hblbf { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
.m-hblbf:is(:hover, :focus-visible), .m-hblbi:is(:hover, :focus-visible) { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(20,24,40,.1); border-color: color-mix(in srgb, var(--m-accent) 40%, transparent); }
.m-hblbim { position: relative; display: block; overflow: hidden; background: var(--m-soft); }
.m-hblbim img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; padding: 16px; mix-blend-mode: multiply; transition: transform .45s var(--m-ease); }
.m-hblbf .m-hblbim { min-height: 230px; } .m-hblbi .m-hblbim { aspect-ratio: 16 / 10; }
.m-hblbf:hover .m-hblbim img, .m-hblbi:hover .m-hblbim img { transform: scale(1.05); }
.m-hblbtx { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px 22px; }
.m-hblbtx small { align-self: flex-start; padding: 4px 9px; border-radius: 99px; font: 700 11px/1 var(--m-body); letter-spacing: .1em; text-transform: uppercase; color: var(--m-accent); background: var(--m-soft); }
.m-hblbf .m-hblbtx b { font: 600 21px/1.25 var(--m-head); text-wrap: balance; }
.m-hblbtx em { font-style: normal; font-size: 14.5px; line-height: 1.5; color: var(--m-body-ink); }
.m-hblbtx i { margin-top: auto; font: 700 14.5px/1 var(--m-body); font-style: normal; color: var(--m-accent); }
.m-hblbg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.m-hblbi { grid-template-rows: auto 1fr; }
.m-hblbi .m-hblbtx { padding: 12px 14px 16px; gap: 7px; } .m-hblbi .m-hblbtx b { font: 650 15px/1.35 var(--m-body); }
@media (max-width: 1000px) { .m-hbfit { flex-wrap: wrap; } .m-hbfitg { flex-basis: 100%; } .m-hblbg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .m-hbbr { grid-template-columns: minmax(0, 1fr); gap: 22px; } .m-hbbrart { position: static; } .m-hblbfs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .m-hbfitg { padding: 18px 14px 14px; } .m-hbfitc { gap: 6px; } .m-hbfitar { height: 150px; } .m-hbfitar i { left: 14%; right: 14%; } .m-hbfitim { width: 44px; height: 44px; } .m-hbfitnm { font-size: 11.5px; } .m-hbfitv b { font-size: 15px; } .m-hbfitv small { font-size: 9.5px; }
  .m-hbbrst li { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 14px; } .m-hbbrt { grid-row: auto; justify-self: start; min-height: 0; padding: 6px 10px; }
  .m-hblbf { grid-template-columns: minmax(0, 1fr); } .m-hblbf .m-hblbim { min-height: 0; aspect-ratio: 16 / 9; }
  .m-hblbg { grid-template-columns: minmax(0, 1fr); } .m-hblbi { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto; } .m-hblbi .m-hblbim { aspect-ratio: auto; min-height: 96px; } .m-hblbi .m-hblbim img { padding: 8px; }
}

/* icebox (Delove): an open fridge at night — the LED strip blinks on, cold light spills over a frosted glass shelf; the real white 2 L pitcher and the real 62 oz auto-spout pitcher stand on the top shelf, the real blue 68 oz pitcher below with condensation running down it; the open door holds the real steel canning funnel in its bin; mist rolls out along the floor; a capacity card steps through listed sizes, a thermometer tag shows the listed liner range */
body.hv-icebox .m-hero { background: radial-gradient(46% 60% at 78% 40%, #ffffff, transparent 70%), radial-gradient(36% 46% at 0% 100%, rgba(61,111,142,.16), transparent 70%), linear-gradient(120deg, #e6f0f6, #f5f9fb 55%, #eef3f0); }
body.hv-icebox .m-hero .eyebrow { color: #234f69; letter-spacing: .14em; }
body.hv-icebox .m-hero h1 { font-weight: 600 !important; letter-spacing: -.012em; font-size: clamp(31px, 3.5vw, 50px) !important; max-width: 19ch; }
.m-dlbody { position: absolute; left: 20%; right: 0; top: 0; bottom: 4%; border-radius: 26px; overflow: hidden; background: linear-gradient(180deg, #f6fbff, #dcebf4 64%, #cfe2ed); box-shadow: inset 0 0 0 1.4cqw #fdfeff, inset 0 0 0 1.7cqw #cfdfe9, inset 0 4cqw 7cqw rgba(110,165,200,.3), 0 26px 50px rgba(15,42,61,.22); animation: m-dlin .9s .05s var(--m-ease) backwards; }
.m-dlbody::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 7cqw, rgba(255,255,255,.55) 7cqw 7.3cqw), radial-gradient(70% 50% at 55% 0, rgba(200,236,255,.9), transparent 70%); opacity: 0; animation: m-dllight 1.6s .45s steps(1) forwards; }
.m-dlled { position: absolute; left: 27%; right: 7%; top: 3.2%; height: 1.1cqw; z-index: 2; border-radius: 99px; background: #fff; box-shadow: 0 0 2cqw .6cqw rgba(160,220,255,.95), 0 1cqw 6cqw 2cqw rgba(190,230,255,.6); opacity: .25; animation: m-dlflick 1.6s .45s steps(1) forwards; }
.m-dlshelf { position: absolute; left: 21.4%; right: 1.4%; top: 43%; height: 2.2cqw; z-index: 3; border-radius: .6cqw; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(196,224,240,.75)); border-bottom: .6cqw solid rgba(126,170,198,.7); box-shadow: 0 1.6cqw 2.4cqw rgba(15,42,61,.12); animation: m-dlin .9s .2s var(--m-ease) backwards; }
.m-dldoor { position: absolute; left: 0; top: 3%; bottom: 8%; width: 21%; z-index: 4; border-radius: 22px 8px 8px 22px; background: linear-gradient(90deg, #e3eef5, #fbfdff 55%, #d6e5ee); box-shadow: inset 0 0 0 .5cqw #fff, -.8cqw 1.4cqw 3cqw rgba(15,42,61,.2); transform-origin: 100% 50%; animation: m-dldoor 1.3s .1s var(--m-ease) backwards; }
.m-dlbin { position: absolute; left: 9%; right: 9%; top: 37%; height: 8%; border: .55cqw solid rgba(150,195,222,.95); border-top: 0; border-radius: 0 0 1.4cqw 1.4cqw; background: rgba(214,236,248,.6); }
.m-dldoor::after { content: ""; position: absolute; left: 9%; right: 9%; top: 72%; height: 7%; border: .55cqw solid rgba(150,195,222,.95); border-top: 0; border-radius: 0 0 1.4cqw 1.4cqw; background: rgba(214,236,248,.6); }
.m-dlfun { position: absolute; left: 2.2%; top: 26.5%; width: 16.5%; z-index: 5; display: block; filter: drop-shadow(0 .8cqw .8cqw rgba(15,42,61,.25)); animation: m-dlin 1s .5s var(--m-ease) backwards; }
.m-dlwhite { position: absolute; left: 27%; bottom: 57%; width: 10.6%; z-index: 4; display: block; filter: drop-shadow(0 1cqw 1cqw rgba(15,42,61,.22)); animation: m-dlin 1s .3s var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-dlauto { position: absolute; left: 40%; bottom: 57%; width: 17%; z-index: 4; display: block; filter: drop-shadow(0 1cqw 1cqw rgba(15,42,61,.22)); animation: m-dlin 1s .38s var(--m-ease) backwards; transition: transform .45s var(--m-ease); }
.m-dlblue { position: absolute; left: 35%; bottom: 6.5%; width: 24%; z-index: 6; animation: m-dlin 1s .2s var(--m-ease) backwards; }
.m-dlblueimg { display: block; filter: drop-shadow(0 2cqw 1.6cqw rgba(15,42,61,.3)); transition: transform .45s var(--m-ease); }
.m-dlwhite:hover, .m-dlauto:hover, .m-dlblueimg:hover { transform: translateY(-6px); }
.m-dldrops { position: absolute; left: 22%; right: 26%; top: 30%; height: 52%; pointer-events: none; }
.m-dldrops i { position: absolute; top: 0; left: calc(var(--i) * 22%); width: 1.1cqw; height: 1.5cqw; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, #fff, rgba(255,255,255,.55) 45%, rgba(170,215,240,.5)); box-shadow: 0 .2cqw .3cqw rgba(15,42,61,.18); opacity: 0; animation: m-dldrip 5.5s calc(1.6s + var(--i) * 1.1s) ease-in infinite; }
.m-dlmist { position: absolute; left: 16%; right: -3%; bottom: 0; height: 16%; z-index: 7; pointer-events: none; background: radial-gradient(40% 70% at 30% 70%, rgba(255,255,255,.85), transparent 70%), radial-gradient(36% 60% at 70% 80%, rgba(240,248,255,.8), transparent 70%); opacity: 0; animation: m-dlmist 7s 1.4s ease-in-out infinite alternate; }
.m-dlfit { position: absolute; right: 3%; top: 8%; z-index: 8; display: grid; gap: 1cqw; width: 37%; padding: 2cqw 2.2cqw 2.2cqw; border-radius: 16px; background: rgba(255,255,255,.93); border: 1.5px solid #d6e6ef; box-shadow: 0 16px 28px rgba(15,42,61,.14); backdrop-filter: blur(6px); animation: m-dlin .9s .75s var(--m-ease) backwards; }
.m-dlfit > small { font: 700 clamp(8px, 1.7cqw, 11px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #234f69; }
.m-dlfl { display: grid; gap: .5cqw; }
.m-dlfl i { display: grid; grid-template-columns: 11.5cqw minmax(0, 1fr); align-items: center; gap: 1.2cqw; padding: .6cqw .8cqw; border-radius: 9px; font-style: normal; animation: m-dlrow 8s calc(1.6s + var(--i) * 2s) ease-in-out infinite; }
.m-dlfl b { display: grid; place-items: center; height: 4cqw; min-height: 16px; border-radius: 99px; font: 700 clamp(8.5px, 1.9cqw, 12px)/1 var(--m-body); color: #fff; background: #2f6a8c; white-space: nowrap; }
.m-dlfl em { font: 600 clamp(8.5px, 1.8cqw, 12px)/1.2 var(--m-body); font-style: normal; color: #13283a; }
.m-dltemp { position: absolute; right: 3%; bottom: 13%; z-index: 8; display: flex; align-items: center; gap: 1.2cqw; padding: 1.2cqw 2cqw 1.2cqw 1.2cqw; border-radius: 14px; background: #13283a; color: #fff; box-shadow: 0 14px 24px rgba(15,42,61,.25); rotate: -3deg; animation: m-dlin .9s .9s var(--m-ease) backwards; }
.m-dltemp svg { width: 3.4cqw; height: auto; }
.m-dltemp .tb { fill: rgba(255,255,255,.14); stroke: rgba(255,255,255,.7); stroke-width: 1.5; } .m-dltemp .lv, .m-dltemp .bl { fill: #e0a030; }
.m-dltemp .lv { transform-box: fill-box; transform-origin: 50% 100%; animation: m-dltherm 4s 1.2s ease-in-out infinite alternate; }
.m-dltemp b { font: 700 clamp(9px, 2cqw, 13px)/1.15 var(--m-body); max-width: 16cqw; }
@keyframes m-dlin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-dldoor { from { transform: perspective(900px) rotateY(-62deg); opacity: .4; } }
@keyframes m-dlflick { 0% { opacity: .25; } 15% { opacity: 1; } 25% { opacity: .3; } 40%, 100% { opacity: 1; } }
@keyframes m-dllight { 0% { opacity: 0; } 15% { opacity: 1; } 25% { opacity: .2; } 40%, 100% { opacity: 1; } }
@keyframes m-dldrip { 0% { opacity: 0; transform: translateY(0) scale(.7); } 12% { opacity: 1; transform: translateY(0) scale(1); } 40% { transform: translateY(2cqw); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(22cqw); } }
@keyframes m-dlmist { from { opacity: .35; transform: translateX(-3%); } to { opacity: .9; transform: translateX(3%); } }
@keyframes m-dlrow { 0%, 22% { background: #e3eef4; } 28%, 100% { background: transparent; } }
@keyframes m-dltherm { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .m-dlled { opacity: 1; } .m-dlbody::after { opacity: 1; } .m-dlmist { opacity: .6; } }
.m-dltile { border-radius: 16px; border: 1.5px solid #d6e6ef; box-shadow: 0 10px 22px rgba(15,42,61,.05); }
.m-dlimg { border-radius: 12px; background: radial-gradient(circle at 50% 40%, #fff, #e3eef4); }
.m-dltile:is(:hover, :focus-visible) { border-color: #2f6a8c; box-shadow: 0 16px 30px rgba(15,42,61,.1); }
.m-dltile .m-q8tx small { color: #234f69; }
.m-dltile em { width: 10px; height: 13px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, #fff, #9cc6dc 60%, #3d6f8e); opacity: .7; transition: opacity .3s, transform .4s var(--m-ease); }
.m-dltile:is(:hover, :focus-visible) em { opacity: 1; transform: translateY(4px); }
.m-dlspecs > span { color: #234f69; }
.m-dlspecs a { border-radius: 12px; border: 1.5px solid #d6e6ef; } .m-dlspecs a:is(:hover, :focus-visible) { border-color: #2f6a8c; }
.m-dlspecs b { border-radius: 9px; background: #2f6a8c; } .m-dlspecs a:nth-of-type(2n) b { background: #6b4226; }
/* pour (Delove): a glass-blue tab; on hover a darker liquid pours in and fills it from the bottom with a moving wavy surface, and the arrow tips forward like a spout */
body.bv-pour .btn { border-radius: 14px 14px 18px 18px; padding: 15px 26px; }
body.bv-pour :is(.btn.accent, .pcard .btn, .m-btn-main) { background: #2f6a8c; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px rgba(47,106,140,.26); }
body.bv-pour :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: #2f6a8c; color: #fff; }
body.bv-pour .btn::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 7'%3E%3Cpath d='M0 4Q7 0 14 4T28 4V7H0Z' fill='%231a445c'/%3E%3C/svg%3E") 0 0 / 28px 7px repeat-x, linear-gradient(#1a445c, #1a445c) 0 6px / 100% 100% no-repeat; transform: translateY(102%); transition: transform .65s cubic-bezier(.3,.7,.2,1); }
body.bv-pour .btn:is(:hover, :focus-visible)::before { transform: translateY(-6px); animation: m-dlwave 1.1s linear infinite; }
@keyframes m-dlwave { to { background-position: 28px 0, 0 6px; } }
body.bv-pour .btn .arr { display: inline-block; transition: transform .35s var(--m-ease); transform-origin: 30% 70%; } body.bv-pour .btn:hover .arr { transform: translateX(4px) rotate(24deg); }
body.bv-pour :is(.m-btn-ghost, .btn.ghost):hover { background: transparent !important; color: #fff !important; }
body.bv-pour :is(.m-btn-ghost, .btn.ghost)::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 7'%3E%3Cpath d='M0 4Q7 0 14 4T28 4V7H0Z' fill='%2313283a'/%3E%3C/svg%3E") 0 0 / 28px 7px repeat-x, linear-gradient(#13283a, #13283a) 0 6px / 100% 100% no-repeat; }
body.bv-pour .m-cta .btn.m-white::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 7'%3E%3Cpath d='M0 4Q7 0 14 4T28 4V7H0Z' fill='%23d3e6f1'/%3E%3C/svg%3E") 0 0 / 28px 7px repeat-x, linear-gradient(#d3e6f1, #d3e6f1) 0 6px / 100% 100% no-repeat; }
body.bv-pour .m-cta .btn.m-white:hover { color: #13283a; }
/* ly-chill (Delove): a cool glassware rhythm — serif heads under a small water-level wave, frosted white cards with ice-blue borders, a measuring block first, a dark cold-brew band in the middle, a photo guide library, navy page heroes and footer */
body.ly-chill main section > .wrap > h2, body.ly-chill .m-hbhead h2 { letter-spacing: -.012em; }
body.ly-chill .m-hbhead h2::before, body.ly-chill main section > .wrap > h2::before { content: ""; display: block; width: 56px; height: 9px; margin-bottom: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 9'%3E%3Cpath d='M1 5Q7.5 0 14 5T27 5T40 5T55 5' fill='none' stroke='%232f6a8c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; }
body.ly-chill .m-hb-brew .m-hbhead h2::before { filter: brightness(2.6) saturate(.6); }
body.ly-chill .m-hbkick { color: #234f69; } body.ly-chill .m-hb-brew .m-hbkick { color: #f0c27a; }
body.ly-chill .m-hb-fit { background: linear-gradient(180deg, #eaf3f8, #f5f9fb); }
body.ly-chill .m-hbfitg { border-color: #d6e6ef; box-shadow: 0 12px 28px rgba(15,42,61,.05); }
body.ly-chill .m-hbfitar i { background: linear-gradient(180deg, #b9d8e8, #3d6f8e); }
body.ly-chill .m-hb-brew { background: radial-gradient(50% 70% at 0% 0%, rgba(61,111,142,.4), transparent 70%), linear-gradient(160deg, #10202d, #241812); }
body.ly-chill .m-hblbf, body.ly-chill .m-hblbi { border-color: #d6e6ef; } body.ly-chill .m-hblbim { background: radial-gradient(70% 90% at 50% 40%, #fff, #e3eef4); }
body.ly-chill .m-hb-library { background: linear-gradient(180deg, #f5f9fb, #eaf3f8); }
body.ly-chill .pcard { border-radius: 20px; border-color: #d6e6ef; } body.ly-chill .pcard .shot { background: radial-gradient(70% 70% at 50% 35%, #fff, #e6f0f5); }
body.ly-chill #compare .tablewrap { border-radius: 18px; overflow: auto; background: #fff; box-shadow: 0 12px 30px rgba(15,42,61,.06); }
body.ly-chill #compare table.spec thead th { background: #13283a; color: #fff; }
body.ly-chill #compare td .btn { padding: 10px 16px; font-size: 13.5px; white-space: nowrap; color: #fff; background: #2f6a8c; border-color: #2f6a8c; }
body.ly-chill #materials { background: #fff; }
body.ly-chill #faq details.faq { border-radius: 14px; border-left: 4px solid #3d6f8e; }
body.ly-chill .m-hbme { border-radius: 26px; background: radial-gradient(60% 120% at 100% 0, rgba(156,198,220,.3), transparent 60%), linear-gradient(135deg, #0f2a3d, #234f69); }
body.ly-chill .m-hbme .m-hbkick { color: #b9d8e8; } body.ly-chill .m-hbmel li { border-top-color: rgba(185,216,232,.45); }
body.ly-chill .m-hbme .m-hbhead h2::before { filter: brightness(3) saturate(.4); }
body.ly-chill .m-hbghall a { color: #234f69; }
body.ly-chill .m-cta .m-band { border-radius: 26px; background: radial-gradient(40% 90% at 88% 0%, rgba(156,198,220,.4), transparent 70%), linear-gradient(120deg, #0f2a3d, #234f69 60%, #2f6a8c); }
body.ly-chill .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(156,198,220,.3), transparent 70%), linear-gradient(120deg, #0f2a3d, #234f69); } body.ly-chill .m-page-hero .eyebrow { color: #b9d8e8; }
body.ly-chill .m-page-hero .btn.m-btn-main { background: #fff; color: #234f69; } body.ly-chill .m-page-hero .btn.m-btn-main:hover { background: #e3eef4; color: #13283a; }
body.ly-chill footer.site { background: #0f2a3d; color: #e3eef4; border: 0; } body.ly-chill footer.site nav a { color: #b9d8e8; }
@media (min-width: 901px) and (max-width: 1240px) { body.ly-chill header.site nav { flex-wrap: nowrap; gap: 0; } body.ly-chill header.site nav a { white-space: nowrap; padding: 9px 7px; font-size: 13px; } }
@container (max-width: 460px) { .m-dlfit { width: 43%; right: 2%; top: 7%; padding: 1.6cqw 1.8cqw; } .m-dlfl i { grid-template-columns: 12.5cqw minmax(0, 1fr); padding: .4cqw .6cqw; } }
@media (max-width: 760px) { body.ly-chill #compare table.spec { min-width: 680px; } }

/* ===== batch 14.11.2026 (3): home blocks cabinet (size finder by opening, CSS-only filter) and measure (lettered cabinet diagram + steps) ===== */
.m-hbcab { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.m-hbcabf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 16px 18px; border: 0; border-radius: var(--m-radius); background: var(--m-ink); color: #fff; position: sticky; top: 72px; z-index: 5; box-shadow: 0 14px 30px rgba(20,24,40,.16); }
.m-hbcabf legend { float: left; width: 100%; margin: 0 0 8px; padding: 0; font: 700 12.5px/1.2 var(--m-body); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--m-accent) 30%, #fff); }
.m-hbcabf label { position: relative; cursor: pointer; }
.m-hbcabf input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.m-hbcabf span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 8px; font: 700 14.5px/1 var(--m-body); font-variant-numeric: tabular-nums; color: #fff; border: 1.5px solid rgba(255,255,255,.28); transition: background .2s, color .2s, border-color .2s; }
.m-hbcabf label:hover span { border-color: #fff; }
.m-hbcabf input:checked + span { background: #fff; color: var(--m-ink); border-color: #fff; }
.m-hbcabf input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--m-accent) 50%, #fff); outline-offset: 2px; }
.m-hbcabl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.m-hbcabi { display: grid; grid-template-columns: 84px minmax(0, 1.3fr) minmax(0, 2fr) auto; align-items: center; gap: 18px; padding: 12px 16px 12px 12px; background: #fff; border-radius: var(--m-radius); border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); animation: m-hbcabin .45s calc(var(--i, 0) * .02s) var(--m-ease) backwards; }
@keyframes m-hbcabin { from { opacity: 0; transform: translateY(8px); } }
.m-hbcab:has(.r0:checked) .m-hbcabi:not(.b0), .m-hbcab:has(.r1:checked) .m-hbcabi:not(.b1), .m-hbcab:has(.r2:checked) .m-hbcabi:not(.b2), .m-hbcab:has(.r3:checked) .m-hbcabi:not(.b3), .m-hbcab:has(.r4:checked) .m-hbcabi:not(.b4), .m-hbcab:has(.r5:checked) .m-hbcabi:not(.b5), .m-hbcab:has(.r6:checked) .m-hbcabi:not(.b6), .m-hbcab:has(.r7:checked) .m-hbcabi:not(.b7) { display: none; }
.m-hbcabim { display: block; width: 84px; aspect-ratio: 1; overflow: hidden; border-radius: calc(var(--m-radius) - 2px); background: var(--m-soft); }
.m-hbcabim img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6px; mix-blend-mode: multiply; }
.m-hbcabtx { min-width: 0; }
.m-hbcabtg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.m-hbcabtg span { padding: 4px 8px; border-radius: 6px; font: 700 11px/1 var(--m-body); letter-spacing: .06em; text-transform: uppercase; color: var(--m-ink); background: var(--m-soft); }
.m-hbcabtg span.wire { background: #e4e8eb; } .m-hbcabtg span.wood { background: #f0dfc8; }
body.m .m-hbcabtx h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.25; }
.m-hbcabbar { position: relative; display: block; height: 10px; border-radius: 3px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--m-ink) 22%, transparent) 0 1px, transparent 1px calc(100% / 24)); border-bottom: 1.5px solid color-mix(in srgb, var(--m-ink) 30%, transparent); }
.m-hbcabbar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * 100%); border-radius: 3px; background: var(--m-accent); }
.m-hbcabbar b { position: absolute; top: -3px; bottom: -3px; left: calc(var(--o) * 100%); width: 2px; background: var(--m-ink); }
.m-hbcabd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.m-hbcabd div { min-width: 0; }
.m-hbcabd dt { margin: 0 0 3px; font: 700 10.5px/1.2 var(--m-body); letter-spacing: .08em; text-transform: uppercase; color: var(--m-body-ink); }
.m-hbcabd dd { margin: 0; font: 650 14.5px/1.3 var(--m-body); color: var(--m-ink); font-variant-numeric: tabular-nums; }
.m-hbcabd .op dd { color: var(--m-accent-2); }
.m-hbcabi .btn { padding: 11px 16px; font-size: 14px; white-space: nowrap; }
.m-hbms { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 34px; align-items: start; }
.m-hbmsart { position: sticky; top: 90px; padding: 22px; border-radius: calc(var(--m-radius) + 4px); background: #fff; border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); }
.m-hbmssvg { display: block; width: 100%; height: auto; overflow: visible; }
.m-hbmssvg .ct { fill: #d9d3ca; } .m-hbmssvg .bx { fill: #b88a5c; } .m-hbmssvg .in { fill: #e9dccb; } .m-hbmssvg .bk { fill: #d8c5ac; } .m-hbmssvg .ed { stroke: #c4ab8c; stroke-width: 1.5; fill: none; }
.m-hbmssvg .lip { fill: #a77a4e; } .m-hbmssvg .dr { fill: #c99d6e; stroke: #8f6a44; stroke-width: 2; } .m-hbmssvg .hg { fill: #2a211a; }
.m-hbmssvg .dm path { fill: none; stroke: var(--m-ink); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; animation: m-hbmsdraw 7s ease-in-out infinite; }
.m-hbmssvg .dm.b path { animation-delay: .7s; } .m-hbmssvg .dm.c path { animation-delay: 1.4s; } .m-hbmssvg .dm.d path { animation-delay: 2.1s; } .m-hbmssvg .dm.e path { animation-delay: 2.8s; stroke-dasharray: 4 5; }
.m-hbmssvg .lb circle { fill: var(--m-accent); stroke: #fff; stroke-width: 2; } .m-hbmssvg .lb text { font: 700 12px/1 var(--m-body); fill: #fff; text-anchor: middle; }
@keyframes m-hbmsdraw { 0% { stroke-dashoffset: 100; } 20%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
@media (prefers-reduced-motion: reduce) { .m-hbmssvg .dm path { stroke-dasharray: none; } }
.m-hbmsl { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.m-hbmsl li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--m-ink) 12%, transparent); }
.m-hbmsk { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font: 700 18px/1 var(--m-head); color: #fff; background: var(--m-accent); }
.m-hbmsl b { display: block; margin: 2px 0 4px; font: 700 17px/1.3 var(--m-body); color: var(--m-ink); }
.m-hbmsl p { margin: 0; font-size: 14.5px; line-height: 1.55; }
@media (max-width: 1060px) { .m-hbcabi { grid-template-columns: 76px minmax(0, 1fr) auto; } .m-hbcabd { grid-column: 2 / -1; grid-row: 2; } .m-hbcabim { width: 76px; grid-row: span 2; } }
@media (max-width: 900px) { .m-hbms { grid-template-columns: minmax(0, 1fr); gap: 20px; } .m-hbmsart { position: static; } }
@media (max-width: 640px) {
  .m-hbcabf { top: 64px; padding: 12px; gap: 6px; } .m-hbcabf span { min-height: 36px; padding: 7px 10px; font-size: 13.5px; }
  .m-hbcabi { grid-template-columns: 64px minmax(0, 1fr); gap: 10px 12px; padding: 12px; } .m-hbcabim { width: 64px; grid-row: auto; }
  .m-hbcabd { grid-column: 1 / -1; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .m-hbcabi .btn { grid-column: 1 / -1; justify-content: center; text-align: center; }
}

/* pullout (DINDON): a base cabinet under a stone counter, door swung open with the real matte black knob; the real two-tier wood pull out glides out and back, the real spice rack slides beside it; a tape measure stretches from the hinge across the opening; an opening card steps through listed openings */
body.hv-pullout .m-hero { background: radial-gradient(46% 60% at 78% 40%, #fffdf9, transparent 70%), radial-gradient(36% 46% at 0% 100%, rgba(122,90,58,.14), transparent 70%), linear-gradient(120deg, #f2ebe1, #faf7f2 55%, #eef0ef); }
body.hv-pullout .m-hero .eyebrow { color: #5e4429; letter-spacing: .14em; }
body.hv-pullout .m-hero h1 { font-weight: 700 !important; letter-spacing: -.01em; font-size: clamp(34px, 4vw, 58px) !important; line-height: 1.02 !important; max-width: 17ch; }
.m-dnwall { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; background: linear-gradient(0deg, rgba(255,255,255,0) 0 84%, rgba(255,255,255,.4)), repeating-linear-gradient(0deg, #e9e3da 0 .3cqw, transparent .3cqw 5cqw), repeating-linear-gradient(90deg, #e9e3da 0 .3cqw, transparent .3cqw 10cqw), #f6f2ec; box-shadow: 0 26px 50px rgba(42,33,26,.18); animation: m-dnin .9s .05s var(--m-ease) backwards; }
.m-dncounter { position: absolute; left: 1.5%; right: 1.5%; top: 16%; height: 5%; z-index: 2; border-radius: .8cqw; background: linear-gradient(180deg, #ece8e2, #d3cdc4 70%, #b9b2a8); box-shadow: 0 1.2cqw 1.6cqw rgba(42,33,26,.25); animation: m-dnin .9s .1s var(--m-ease) backwards; }
.m-dnbox { position: absolute; left: 18%; right: 5%; top: 21%; bottom: 3.5%; z-index: 1; border-radius: 0 0 1cqw 1cqw; background: radial-gradient(80% 60% at 50% 100%, #8b6a4a, transparent 70%), linear-gradient(180deg, #3a2c20, #5c4430); box-shadow: inset 0 0 0 2.4cqw #8a6440, inset 0 0 0 2.8cqw #6e4e30, inset 0 3cqw 3cqw 2.8cqw rgba(0,0,0,.35); animation: m-dnin .9s .15s var(--m-ease) backwards; }
.m-dnbox::after { content: ""; position: absolute; left: 2.8cqw; right: 2.8cqw; bottom: 2.4cqw; height: 2cqw; background: linear-gradient(180deg, #a07650, #7a5a3a); }
.m-dndoor { position: absolute; left: 3.5%; top: 21%; bottom: 3.5%; width: 15%; z-index: 4; border-radius: .8cqw; background: linear-gradient(90deg, #a07650, #b88a5c 50%, #9a7049); box-shadow: inset 0 0 0 1.4cqw #b88a5c, inset 0 0 0 1.7cqw #8a6440, -1cqw 1.4cqw 2.4cqw rgba(42,33,26,.3); transform-origin: 100% 50%; animation: m-dndoor 1.3s .2s var(--m-ease) backwards; }
.m-dnknob { position: absolute; left: 14%; top: 46%; width: 34%; filter: drop-shadow(0 .6cqw .5cqw rgba(0,0,0,.4)); }
.m-dnknob img { display: block; width: 100%; height: auto; }
.m-dntier { position: absolute; left: 21%; bottom: 6.5%; width: 50%; z-index: 5; display: block; filter: drop-shadow(0 2cqw 1.6cqw rgba(0,0,0,.35)); animation: m-dnin 1s .3s var(--m-ease) backwards, m-dnpull 7s 1.6s ease-in-out infinite; }
.m-dnspice { position: absolute; right: 7.5%; bottom: 7%; width: 18%; z-index: 4; display: block; filter: drop-shadow(0 1.6cqw 1.2cqw rgba(0,0,0,.35)); animation: m-dnin 1s .4s var(--m-ease) backwards, m-dnpull2 7s 4.6s ease-in-out infinite; }
.m-dntier:hover, .m-dnspice:hover { animation-play-state: paused; }
.m-dntape { position: absolute; left: 21.5%; top: 25.5%; width: 72%; z-index: 6; display: block; height: 7.5cqw; }
.m-dntape svg { position: absolute; left: 0; top: 0; width: 100%; height: 3cqw; transform-origin: 0 50%; animation: m-dntape 7s 1s var(--m-ease) infinite; }
.m-dntape .bl { fill: #f2c230; stroke: #c99a10; stroke-width: .6; } .m-dntape .tk { stroke: #2a211a; stroke-width: .8; fill: none; }
.m-dntcase { position: absolute; top: -1.6cqw; width: 6.4cqw; height: 6cqw; border-radius: 1.4cqw; background: radial-gradient(circle at 50% 50%, #2a211a 0 22%, #f2c230 24% 60%, #d9a412); box-shadow: 0 .8cqw 1.2cqw rgba(0,0,0,.3); left: 0; animation: m-dncase 7s 1s var(--m-ease) infinite; }
.m-dntape b { position: absolute; left: 30%; top: 3.6cqw; padding: .6cqw 1.4cqw; border-radius: 99px; font: 700 clamp(8px, 1.8cqw, 11.5px)/1.1 var(--m-body); color: #fff; background: #2a211a; white-space: nowrap; }
.m-dncard { position: absolute; right: 2%; top: 33%; z-index: 8; display: grid; gap: .9cqw; width: 45%; padding: 1.8cqw 2cqw 2cqw; border-radius: 10px; background: rgba(255,255,255,.95); border: 1.5px solid #e2d5c4; box-shadow: 0 16px 28px rgba(42,33,26,.2); animation: m-dnin .9s .8s var(--m-ease) backwards; }
.m-dncard > small { font: 700 clamp(8px, 1.7cqw, 11px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #5e4429; }
.m-dncl { display: grid; gap: .3cqw; }
.m-dncl i { display: grid; grid-template-columns: 10cqw minmax(0, 1fr); align-items: center; gap: 1cqw; padding: .5cqw .6cqw; border-radius: 6px; font-style: normal; animation: m-dnrow 10s calc(1.6s + var(--i) * 2s) ease-in-out infinite; }
.m-dncl b { font: 700 clamp(9px, 2cqw, 13px)/1 var(--m-head); color: #7a5a3a; font-variant-numeric: tabular-nums; }
.m-dncl em { font: 600 clamp(8.5px, 1.75cqw, 12px)/1.2 var(--m-body); font-style: normal; color: #1f1a16; }
@keyframes m-dnin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-dndoor { from { transform: perspective(900px) rotateY(70deg); } }
@keyframes m-dnpull { 0%, 12% { translate: 0 0; scale: 1; } 38%, 62% { translate: -2% 5%; scale: 1.07; } 88%, 100% { translate: 0 0; scale: 1; } }
@keyframes m-dnpull2 { 0%, 12% { translate: 0 0; scale: 1; } 38%, 62% { translate: 3% 4%; scale: 1.06; } 88%, 100% { translate: 0 0; scale: 1; } }
@keyframes m-dntape { 0% { transform: scaleX(.04); } 30%, 75% { transform: scaleX(1); } 100% { transform: scaleX(.04); } }
@keyframes m-dncase { 0% { left: 0; } 30%, 75% { left: calc(100% - 3cqw); } 100% { left: 0; } }
@keyframes m-dnrow { 0%, 16% { background: #efe6da; } 22%, 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .m-dntcase { left: calc(100% - 3cqw); } }
@container (max-width: 460px) { .m-dncard { width: 50%; top: 38%; padding: 1.4cqw 1.6cqw; } .m-dncl i { grid-template-columns: 11cqw minmax(0, 1fr); } }
.m-dntile { border-radius: 10px; border: 1.5px solid #e2d5c4; box-shadow: 0 10px 22px rgba(42,33,26,.05); }
.m-dnimg { border-radius: 8px; background: radial-gradient(circle at 50% 40%, #fff, #efe6da); }
.m-dntile:is(:hover, :focus-visible) { border-color: #7a5a3a; box-shadow: 0 16px 30px rgba(42,33,26,.12); }
.m-dntile .m-q8tx small { color: #5e4429; }
.m-dntile em { width: 14px; height: 6px; border-radius: 2px; background: repeating-linear-gradient(90deg, #2a211a 0 1px, #f2c230 1px 3px); opacity: .7; transition: opacity .3s, width .4s var(--m-ease); }
.m-dntile:is(:hover, :focus-visible) em { opacity: 1; width: 22px; }
.m-dnspecs > span { color: #5e4429; }
.m-dnspecs a { border-radius: 8px; border: 1.5px solid #e2d5c4; } .m-dnspecs a:is(:hover, :focus-visible) { border-color: #7a5a3a; }
.m-dnspecs b { border-radius: 6px; background: #7a5a3a; } .m-dnspecs a:nth-of-type(2n) b { background: #1f1a16; }
/* glide (DINDON): a squared drawer-front button; on hover a lighter drawer face slides out from the left on a dotted ball-bearing rail along the bottom edge, and the arrow rides out with it */
body.bv-glide .btn { border-radius: 6px; padding: 15px 26px 17px; }
body.bv-glide :is(.btn.accent, .pcard .btn, .m-btn-main) { background: #7a5a3a; color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 10px 22px rgba(122,90,58,.25); }
body.bv-glide :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: #7a5a3a; color: #fff; }
body.bv-glide .btn::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.9) 0 1.2px, transparent 1.6px) 0 calc(100% - 3px) / 7px 6px repeat-x, linear-gradient(90deg, #5e4429, #4a3520); transform: translateX(-101%); transition: transform .55s cubic-bezier(.2,.8,.2,1); }
body.bv-glide .btn:is(:hover, :focus-visible)::before { transform: translateX(0); }
body.bv-glide .btn .arr { display: inline-block; transition: transform .55s cubic-bezier(.2,.8,.2,1); } body.bv-glide .btn:hover .arr { transform: translateX(6px); }
body.bv-glide :is(.m-btn-ghost, .btn.ghost):hover { background: transparent !important; color: #fff !important; }
body.bv-glide :is(.m-btn-ghost, .btn.ghost)::before { background: radial-gradient(circle, rgba(255,255,255,.8) 0 1.2px, transparent 1.6px) 0 calc(100% - 3px) / 7px 6px repeat-x, #1f1a16; }
body.bv-glide .m-cta .btn.m-white::before { background: radial-gradient(circle, #7a5a3a 0 1.2px, transparent 1.6px) 0 calc(100% - 3px) / 7px 6px repeat-x, #efe6da; }
body.bv-glide .m-cta .btn.m-white:hover { color: #1f1a16; }
/* ly-joinery (DINDON): a workshop rhythm — narrow bold heads under a ruler-tick marker, squared cards with walnut and steel accents, the size finder first with a sticky width bar, the measuring diagram next, FAQ before the catalog, matte black page heroes and footer */
body.ly-joinery main section > .wrap > h2, body.ly-joinery .m-hbhead h2 { letter-spacing: -.005em; text-transform: none; }
body.ly-joinery .m-hbhead h2::before, body.ly-joinery main section > .wrap > h2::before { content: ""; display: block; width: 72px; height: 10px; margin-bottom: 14px; background: repeating-linear-gradient(90deg, #7a5a3a 0 2px, transparent 2px 9px) 0 100% / 100% 6px no-repeat, repeating-linear-gradient(90deg, #7a5a3a 0 2px, transparent 2px 36px) 0 100% / 100% 10px no-repeat; border-bottom: 2px solid #7a5a3a; }
body.ly-joinery .m-hbme .m-hbhead h2::before { filter: brightness(2.4); }
body.ly-joinery .m-hbkick { color: #5e4429; }
body.ly-joinery .m-hb-cabinet { background: linear-gradient(180deg, #f2ebe1, #faf7f2 30%); }
body.ly-joinery .m-hbcabi { border-color: #e2d5c4; }
body.ly-joinery .m-hbcabi:hover { border-color: #7a5a3a; }
body.ly-joinery .m-hbcabf { background: #1f1a16; }
body.ly-joinery .m-hbcabbar i { background: linear-gradient(90deg, #b88a5c, #7a5a3a); }
body.ly-joinery .m-hb-measure { background: #fff; } body.ly-joinery .m-hbmsart { background: linear-gradient(180deg, #faf7f2, #f2ebe1); border-color: #e2d5c4; }
body.ly-joinery #faq { background: #f2ebe1; } body.ly-joinery #faq details.faq { border-radius: 8px; border-left: 4px solid #7a5a3a; }
body.ly-joinery .pcard { border-radius: 10px; border-color: #e2d5c4; } body.ly-joinery .pcard .shot { background: radial-gradient(70% 70% at 50% 35%, #fff, #f3ece2); }
body.ly-joinery #compare .tablewrap { border-radius: 10px; overflow: auto; background: #fff; box-shadow: 0 12px 30px rgba(42,33,26,.06); }
body.ly-joinery #compare table.spec thead th { background: #1f1a16; color: #fff; }
body.ly-joinery #compare td .btn { padding: 10px 16px; font-size: 13.5px; white-space: nowrap; color: #fff; background: #7a5a3a; border-color: #7a5a3a; }
@media (max-width: 760px) { body.ly-joinery #compare table.spec { min-width: 680px; } }
body.ly-joinery .m-hbghf { border-radius: 10px; } body.ly-joinery .m-hbghim { background: radial-gradient(70% 90% at 50% 40%, #fff, #efe6da); }
body.ly-joinery .m-hbme { border-radius: 14px; background: radial-gradient(60% 120% at 100% 0, rgba(184,138,92,.3), transparent 60%), linear-gradient(135deg, #1f1a16, #3a2c20); }
body.ly-joinery .m-hbme .m-hbkick { color: #e0c09a; } body.ly-joinery .m-hbmel li { border-top-color: rgba(224,192,154,.45); }
body.ly-joinery .m-hbghall a { color: #5e4429; }
body.ly-joinery .m-cta .m-band { border-radius: 14px; background: radial-gradient(40% 90% at 88% 0%, rgba(184,138,92,.4), transparent 70%), linear-gradient(120deg, #1f1a16, #3a2c20 60%, #5e4429); }
body.ly-joinery .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(184,138,92,.3), transparent 70%), linear-gradient(120deg, #1f1a16, #3a2c20); } body.ly-joinery .m-page-hero .eyebrow { color: #e0c09a; }
body.ly-joinery .m-page-hero .btn.m-btn-main { background: #fff; color: #5e4429; } body.ly-joinery .m-page-hero .btn.m-btn-main:hover { background: #efe6da; color: #1f1a16; }
body.ly-joinery footer.site { background: #1f1a16; color: #efe6da; border: 0; } body.ly-joinery footer.site nav a { color: #e0c09a; }
@media (min-width: 901px) and (max-width: 1240px) { body.ly-joinery header.site nav { flex-wrap: nowrap; gap: 0; } body.ly-joinery header.site nav a { white-space: nowrap; padding: 9px 6px; font-size: 12.5px; } }
@media (max-width: 640px) { .m-hbcabf { min-width: 0; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .m-hbcabf::-webkit-scrollbar { display: none; } .m-hbcabf legend { display: none; } .m-hbcabf label { flex: none; } }
@media (min-width: 901px) and (max-width: 1440px) { html[lang^="es"] :is(body.ly-joinery, body.ly-recess) header.site nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; gap: 0; } html[lang^="es"] :is(body.ly-joinery, body.ly-recess) header.site nav a { white-space: nowrap; padding: 9px 6px; font-size: 12.8px; } }

/* ===== batch 14.11.2026 (3): home blocks seat ("who sits on it" radio tabs, CSS-only) and discs (diameters drawn to scale) ===== */
.m-hbseat { position: relative; }
.m-hbseat > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.m-hbseattabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.m-hbseattabs label { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 20px 8px 8px; border-radius: 99px; cursor: pointer; font: 700 16px/1.1 var(--m-body); color: var(--m-ink); background: #fff; border: 2px solid color-mix(in srgb, var(--m-ink) 12%, transparent); transition: background .25s, color .25s, border-color .25s, transform .3s var(--m-ease); }
.m-hbseattabs label:hover { border-color: var(--m-accent); transform: translateY(-2px); }
.m-hbseatic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--m-soft); }
.m-hbseatic svg { width: 22px; height: 22px; fill: none; stroke: var(--m-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.m-hbseat:has(.t0:checked) .l0, .m-hbseat:has(.t1:checked) .l1, .m-hbseat:has(.t2:checked) .l2, .m-hbseat:has(.t3:checked) .l3 { background: var(--m-ink); color: #fff; border-color: var(--m-ink); }
.m-hbseat:has(.t0:checked) .l0 .m-hbseatic, .m-hbseat:has(.t1:checked) .l1 .m-hbseatic, .m-hbseat:has(.t2:checked) .l2 .m-hbseatic, .m-hbseat:has(.t3:checked) .l3 .m-hbseatic { background: #fff; }
.m-hbseat:has(.t0:focus-visible) .l0, .m-hbseat:has(.t1:focus-visible) .l1, .m-hbseat:has(.t2:focus-visible) .l2, .m-hbseat:has(.t3:focus-visible) .l3 { outline: 3px solid var(--m-accent); outline-offset: 3px; }
.m-hbseat:has(.t0:checked) .m-hbseatp:not(.p0), .m-hbseat:has(.t1:checked) .m-hbseatp:not(.p1), .m-hbseat:has(.t2:checked) .m-hbseatp:not(.p2), .m-hbseat:has(.t3:checked) .m-hbseatp:not(.p3) { display: none; }
.m-hbseatp { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 2.15fr); gap: 18px; align-items: stretch; margin-bottom: 18px; animation: m-hbseatin .5s var(--m-ease); }
@keyframes m-hbseatin { from { opacity: 0; transform: translateY(10px); } }
.m-hbseatg { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; border-radius: var(--m-radius); background: var(--m-ink); color: #fff; }
body.m .m-hbseatg h3 { margin: 0; font-size: 22px; line-height: 1.2; color: #fff; }
.m-hbseatg p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.86); }
.m-hbseatlk { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.1); } .m-hbseatlk b { color: #fff; }
.m-hbseatln { display: flex; flex-direction: column; gap: 8px; margin-top: auto !important; padding-top: 6px; }
.m-hbseatln a { font: 700 14.5px/1.3 var(--m-body); color: #ffd27a !important; text-decoration: none; } .m-hbseatln a:hover { text-decoration: underline; }
.m-hb-seat .m-hbseatg a:focus-visible { outline-color: #ffd27a; }
.m-hbseatc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.m-hbseatc li { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 12px 14px; border-radius: var(--m-radius); background: #fff; border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); transition: transform .3s var(--m-ease), box-shadow .3s; }
.m-hbseatc li:hover { transform: translateY(-4px); box-shadow: 0 18px 32px rgba(20,34,51,.1); }
.m-hbseatim { display: block; aspect-ratio: 1; overflow: hidden; border-radius: calc(var(--m-radius) - 6px); background: var(--m-soft); }
.m-hbseatim img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: multiply; transition: transform .5s var(--m-ease); }
.m-hbseatc li:hover .m-hbseatim img { transform: rotate(-5deg) scale(1.04); }
.m-hbseatc small { margin-top: 4px; font: 700 11.5px/1 var(--m-body); letter-spacing: .1em; text-transform: uppercase; color: var(--m-accent); }
.m-hbseatc b { font: 700 15.5px/1.3 var(--m-body); color: var(--m-ink); }
.m-hbseatf { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.m-hbseatf i { padding: 4px 8px; border-radius: 99px; font: 600 12.5px/1.2 var(--m-body); font-style: normal; color: var(--m-ink); background: var(--m-soft); }
.m-hbseatc .btn { margin-top: auto; justify-content: center; padding: 11px 12px; font-size: 14px; line-height: 1.2; text-align: center; white-space: normal; }
.m-hbdisc { --u: clamp(4px, 2vw, 9px); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 22px 14px; }
.m-hbdisc li { flex: none; width: max(calc(var(--d) * var(--u)), 96px); }
.m-hbdisco { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; text-decoration: none; color: var(--m-ink) !important; }
.m-hbdiscc { position: relative; display: grid; place-items: center; width: calc(var(--d) * var(--u)); aspect-ratio: 1; margin-bottom: 14px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff, var(--m-soft)); border: 2px dashed color-mix(in srgb, var(--m-accent) 55%, transparent); transition: transform .5s var(--m-ease), border-color .3s; }
.m-hbdiscim { display: block; width: 76%; height: 76%; overflow: hidden; border-radius: 50%; }
.m-hbdiscim img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.m-hbdiscc b { position: absolute; left: 50%; bottom: -12px; translate: -50% 0; padding: 5px 10px; border-radius: 99px; font: 700 13px/1 var(--m-body); white-space: nowrap; color: #fff; background: var(--m-accent); font-variant-numeric: tabular-nums; }
.m-hbdisco:is(:hover, :focus-visible) .m-hbdiscc { transform: rotate(-8deg); border-color: var(--m-accent); }
.m-hbdisco small { font: 700 11px/1.2 var(--m-body); letter-spacing: .1em; text-transform: uppercase; color: var(--m-accent); }
.m-hbdiscn { font: 650 13.5px/1.3 var(--m-body); }
.m-hbdisco em { font: 600 12.5px/1.3 var(--m-body); font-style: normal; color: var(--m-body-ink); }
@media (max-width: 1000px) { .m-hbseatp { grid-template-columns: minmax(0, 1fr); } .m-hbseatc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .m-hbseattabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; } .m-hbseattabs::-webkit-scrollbar { display: none; } .m-hbseattabs label { flex: none; min-height: 46px; font-size: 14.5px; } .m-hbseatc { gap: 10px; } .m-hbseatc li { padding: 10px; } .m-hbseatc b { font-size: 14px; } .m-hbseatc .btn { padding: 10px 8px; font-size: 13px; } .m-hbdisc { gap: 18px 10px; } .m-hbdisc li { width: max(calc(var(--d) * var(--u)), 88px); } }

/* balance (Wobble Cushion guide): a bright classroom corner — a window with drifting clouds, a pale blue wall and a wood floor; the real Bouncy Bands wiggle seat wobbles on a stool, the real BOSU trainer bounces softly on the floor, the real EVERYMILE wobble board tips in front; a spirit level's bubble drifts with the wobble; a who-sits-on-it card steps through kids, office and workout */
body.hv-balance .m-hero { background: radial-gradient(46% 60% at 78% 40%, #ffffff, transparent 70%), radial-gradient(36% 46% at 0% 100%, rgba(245,184,61,.16), transparent 70%), linear-gradient(120deg, #e3eefa, #f6f9fc 55%, #fdf3e6); }
body.hv-balance .m-hero .eyebrow { color: #1f5a92; letter-spacing: .14em; }
body.hv-balance .m-hero h1 { font-weight: 400 !important; letter-spacing: -.005em; line-height: 1.08 !important; font-size: clamp(30px, 3.5vw, 50px) !important; max-width: 19ch; }
.m-wbwall { position: absolute; inset: 0; border-radius: 30px; overflow: hidden; background: radial-gradient(60% 50% at 70% 20%, rgba(255,255,255,.8), transparent 70%), linear-gradient(180deg, #d5e7f7, #e8f1fa 70%); box-shadow: 0 26px 50px rgba(20,48,77,.18); animation: m-wbin .9s .05s var(--m-ease) backwards; }
.m-wbwin { position: absolute; left: 8%; top: 7%; width: 36%; height: 33%; z-index: 1; overflow: hidden; border-radius: 14px; background: linear-gradient(180deg, #8cc6ef, #cfe8f9); box-shadow: inset 0 0 0 1.4cqw #fff, inset 0 0 0 1.7cqw #c9dbe9, 0 1cqw 2cqw rgba(20,48,77,.12); animation: m-wbin .9s .1s var(--m-ease) backwards; }
.m-wbwin::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.2cqw; translate: -50% 0; background: #fff; box-shadow: 0 0 0 .3cqw #c9dbe9; }
.m-wbwin b { position: absolute; top: 24%; left: -30%; width: 18cqw; height: 5cqw; border-radius: 99px; background: #fff; opacity: .9; box-shadow: 4cqw -2cqw 0 -.4cqw #fff, 8cqw .5cqw 0 -1cqw #fff; animation: m-wbcloud 26s linear infinite; }
.m-wbwin b + b { top: 58%; width: 12cqw; height: 3.6cqw; animation-duration: 34s; animation-delay: -14s; opacity: .75; }
.m-wbfloor { position: absolute; left: 0; right: 0; top: 72%; bottom: 0; z-index: 1; border-radius: 0 0 30px 30px; background: linear-gradient(180deg, rgba(0,0,0,.08), transparent 18%), repeating-linear-gradient(90deg, #e8c9a0 0 12cqw, #dfbd91 12cqw 12.3cqw), #e8c9a0; animation: m-wbin .9s .15s var(--m-ease) backwards; }
.m-wbstool { position: absolute; left: 31%; width: 38%; top: 51%; bottom: 13%; z-index: 2; animation: m-wbin 1s .2s var(--m-ease) backwards; }
.m-wbstool::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 13%; border-radius: 1.6cqw; background: linear-gradient(180deg, #f5b83d, #e09a1c); box-shadow: 0 1cqw 1.4cqw rgba(20,48,77,.2); }
.m-wbstool i, .m-wbstool::after { content: ""; position: absolute; top: 12%; bottom: 0; width: 5%; border-radius: 99px; background: linear-gradient(90deg, #c98a17, #e9a62a); }
.m-wbstool i { left: 12%; rotate: 6deg; } .m-wbstool::after { right: 12%; rotate: -6deg; }
.m-wbseat { position: absolute; left: 33%; width: 34%; bottom: 48%; z-index: 5; transform-origin: 50% 100%; animation: m-wbin 1s .25s var(--m-ease) backwards, m-wbwob 4s 1.2s ease-in-out infinite; }
.m-wbseatimg { display: block; filter: drop-shadow(0 1.4cqw 1.2cqw rgba(20,48,77,.3)); }
.m-wbbosu { position: absolute; right: 3%; bottom: 8%; width: 30%; z-index: 4; display: block; transform-origin: 50% 100%; filter: drop-shadow(0 1.6cqw 1.2cqw rgba(20,48,77,.28)); animation: m-wbin 1s .35s var(--m-ease) backwards, m-wbbounce 2.6s 1.4s ease-in-out infinite; }
.m-wbboard { position: absolute; left: 2%; bottom: 4.5%; width: 34%; z-index: 6; display: block; transform-origin: 50% 80%; filter: drop-shadow(0 1.4cqw 1cqw rgba(20,48,77,.28)); animation: m-wbin 1s .45s var(--m-ease) backwards, m-wbtip 3.4s 1.6s ease-in-out infinite; }
.m-wbseat:hover, .m-wbbosu:hover, .m-wbboard:hover { animation-play-state: paused; }
.m-wblevel { position: absolute; left: 9%; top: 42.5%; width: 30%; height: 4.6%; z-index: 3; border-radius: .8cqw; background: linear-gradient(180deg, #ffd25e, #f5b83d); box-shadow: 0 .8cqw 1.2cqw rgba(20,48,77,.18); animation: m-wbin 1s .5s var(--m-ease) backwards; }
.m-wblevel::before { content: ""; position: absolute; left: 32%; right: 32%; top: 22%; bottom: 22%; border-radius: 99px; background: linear-gradient(180deg, #d9f5c8, #a9e08a); box-shadow: inset 0 0 0 .3cqw #6aa84f; }
.m-wblevel i { position: absolute; left: 50%; top: 30%; bottom: 30%; width: 3cqw; margin-left: -1.5cqw; border-radius: 99px; background: rgba(255,255,255,.95); animation: m-wbbub 4s 1.2s ease-in-out infinite; }
.m-wbcard { position: absolute; right: 3%; top: 7%; z-index: 8; display: grid; gap: 1cqw; width: 44%; padding: 2cqw 2.2cqw 2.2cqw; border-radius: 18px; background: rgba(255,255,255,.95); border: 2px solid #d3e3f3; box-shadow: 0 16px 28px rgba(20,48,77,.16); animation: m-wbin .9s .8s var(--m-ease) backwards; }
.m-wbcard > small { font: 700 clamp(8px, 1.7cqw, 11px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #1f5a92; }
.m-wbcl { display: grid; gap: .6cqw; }
.m-wbcl i { display: grid; grid-template-columns: 13cqw minmax(0, 1fr); align-items: center; gap: 1.2cqw; padding: .6cqw .8cqw; border-radius: 12px; font-style: normal; animation: m-wbrow 9s calc(1.6s + var(--i) * 3s) ease-in-out infinite; }
.m-wbcl b { display: grid; place-items: center; height: 4.2cqw; min-height: 16px; border-radius: 99px; font: 400 clamp(9px, 2cqw, 13px)/1 var(--m-head); color: #fff; background: #2a6fb0; }
.m-wbcl i:nth-child(2) b { background: #e0901c; color: #1a1206; } .m-wbcl i:nth-child(3) b { background: #d95a49; }
.m-wbcl em { font: 600 clamp(8.5px, 1.85cqw, 12.5px)/1.2 var(--m-body); font-style: normal; color: #142233; }
@keyframes m-wbin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-wbcloud { from { translate: 0 0; } to { translate: 60cqw 0; } }
@keyframes m-wbwob { 0%, 100% { rotate: 0deg; } 20% { rotate: -5deg; } 45% { rotate: 4deg; } 70% { rotate: -2deg; } 85% { rotate: 1deg; } }
@keyframes m-wbbub { 0%, 100% { translate: 0 0; } 20% { translate: -3.6cqw 0; } 45% { translate: 3cqw 0; } 70% { translate: -1.4cqw 0; } 85% { translate: .6cqw 0; } }
@keyframes m-wbbounce { 0%, 100% { translate: 0 0; scale: 1 1; } 40% { translate: 0 -1.4cqw; scale: .98 1.02; } 60% { translate: 0 0; scale: 1.03 .96; } }
@keyframes m-wbtip { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes m-wbrow { 0%, 25% { background: #e4eef8; } 32%, 100% { background: transparent; } }
@container (max-width: 460px) { .m-wbcard { width: 50%; padding: 1.6cqw 1.8cqw; } .m-wbcl i { grid-template-columns: 14cqw minmax(0, 1fr); padding: .4cqw .6cqw; } }
.m-wbtile { border-radius: 20px; border: 2px solid #d3e3f3; box-shadow: 0 10px 22px rgba(20,48,77,.05); }
.m-wbimg { border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff, #e4eef8); }
.m-wbtile:is(:hover, :focus-visible) { border-color: #2a6fb0; box-shadow: 0 16px 30px rgba(20,48,77,.1); }
.m-wbtile:is(:hover, :focus-visible) .m-wbimg img { animation: m-wbwob 1.2s ease-in-out; }
.m-wbtile .m-q8tx small { color: #1f5a92; }
.m-wbtile em { width: 14px; height: 8px; border-radius: 50%; background: radial-gradient(circle, #fff 0 18%, transparent 22%) 0 0 / 4px 4px, #f5b83d; opacity: .8; }
.m-wbspecs > span { color: #1f5a92; }
.m-wbspecs a { border-radius: 99px; border: 2px solid #d3e3f3; } .m-wbspecs a:is(:hover, :focus-visible) { border-color: #2a6fb0; }
.m-wbspecs b { border-radius: 99px; background: #2a6fb0; } .m-wbspecs a:nth-of-type(2n) b { background: #d95a49; }
/* wobble (Wobble Cushion guide): a fat blue pill with a dimpled cushion texture; on hover it wobbles like a seat settling under you and the dimples fade in, the arrow bobbing along */
body.bv-wobble .btn { border-radius: 999px; padding: 15px 28px; }
body.bv-wobble :is(.btn.accent, .pcard .btn, .m-btn-main) { background: #2a6fb0; color: #fff; box-shadow: inset 0 -4px 0 rgba(0,0,0,.14), 0 10px 22px rgba(42,111,176,.28); }
body.bv-wobble :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: #1f5a92; color: #fff; }
body.bv-wobble .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient(circle, rgba(255,255,255,.28) 0 1.4px, transparent 1.8px) 0 0 / 9px 9px; opacity: 0; transition: opacity .3s; }
body.bv-wobble .btn:is(:hover, :focus-visible) { animation: m-wbbtn .7s ease-in-out; }
body.bv-wobble .btn:is(:hover, :focus-visible)::before { opacity: 1; }
@keyframes m-wbbtn { 0% { rotate: 0deg; } 25% { rotate: -3deg; } 50% { rotate: 2.4deg; } 75% { rotate: -1.2deg; } 100% { rotate: 0deg; } }
body.bv-wobble .btn .arr { display: inline-block; } body.bv-wobble .btn:hover .arr { transform: translateX(4px); }
body.bv-wobble :is(.m-btn-ghost, .btn.ghost)::before { background: radial-gradient(circle, rgba(20,34,51,.18) 0 1.4px, transparent 1.8px) 0 0 / 9px 9px; }
body.bv-wobble .m-cta .btn.m-white::before { background: radial-gradient(circle, rgba(42,111,176,.25) 0 1.4px, transparent 1.8px) 0 0 / 9px 9px; }
body.bv-wobble .m-cta .btn.m-white:hover { color: #1f5a92; }
/* ly-recess (Wobble Cushion guide): a playful classroom rhythm — rounded display heads under a dimpled cushion marker, big rounded cards, the who-sits-on-it tabs first and diameters to scale next, blue, sun-yellow and coral accents, navy page heroes and footer */
body.ly-recess main section > .wrap > h2, body.ly-recess .m-hbhead h2 { font-weight: 400 !important; letter-spacing: -.005em; }
body.ly-recess .m-hbhead h2::before, body.ly-recess main section > .wrap > h2::before { content: ""; display: block; width: 54px; height: 16px; margin-bottom: 14px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.7) 0 1.3px, transparent 1.7px) 0 0 / 7px 7px, linear-gradient(180deg, #3a86c8, #1f5a92); box-shadow: 18px 0 0 -4px #f5b83d; }
body.ly-recess .m-hbme .m-hbhead h2::before { box-shadow: 18px 0 0 -4px #f5b83d; }
body.ly-recess .m-hbkick { color: #1f5a92; }
body.ly-recess .m-hb-seat { background: linear-gradient(180deg, #e3eefa, #f6f9fc); }
body.ly-recess .m-hbseatp.p1 .m-hbseatg { background: linear-gradient(160deg, #142233, #1f5a92); } body.ly-recess .m-hbseatp.p2 .m-hbseatg { background: linear-gradient(160deg, #142233, #6b2f28); }
body.ly-recess .m-hbseatc li { border-color: #d3e3f3; }
body.ly-recess .m-hb-discs { background: #fff; }
body.ly-recess .m-hbdisc li:nth-child(3n+2) .m-hbdiscc b { background: #d95a49; } body.ly-recess .m-hbdisc li:nth-child(3n) .m-hbdiscc b { background: #e0901c; color: #1a1206; }
body.ly-recess .m-hb-steps { background: linear-gradient(180deg, #fdf3e6, #f6f9fc); }
body.ly-recess .m-hbst li { border-radius: 24px; border-color: #f2dcb8; }
body.ly-recess .m-hbst li::before { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font-size: 18px; color: #fff; background: radial-gradient(circle, rgba(255,255,255,.3) 0 1.3px, transparent 1.7px) 0 0 / 7px 7px, #2a6fb0; }
body.ly-recess .m-hbnote { padding: 12px 16px; border-radius: 16px; background: #fff; border-left: 4px solid #f5b83d; }
body.ly-recess .pcard { border-radius: 24px; border-color: #d3e3f3; } body.ly-recess .pcard .shot { background: radial-gradient(70% 70% at 50% 35%, #fff, #e8f1fa); }
body.ly-recess #compare .tablewrap { border-radius: 22px; overflow: auto; background: #fff; box-shadow: 0 12px 30px rgba(20,48,77,.06); }
body.ly-recess #compare table.spec thead th { background: #142233; color: #fff; }
body.ly-recess #compare td .btn { padding: 10px 16px; font-size: 13.5px; white-space: nowrap; color: #fff; background: #2a6fb0; border-color: #2a6fb0; }
@media (max-width: 760px) { body.ly-recess #compare table.spec { min-width: 680px; } }
body.ly-recess .m-hbghf { border-radius: 24px; } body.ly-recess .m-hbghim { background: radial-gradient(70% 90% at 50% 40%, #fff, #e4eef8); }
body.ly-recess #faq details.faq { border-radius: 18px; border-left: 4px solid #3a86c8; }
body.ly-recess .m-hbme { border-radius: 30px; background: radial-gradient(60% 120% at 100% 0, rgba(245,184,61,.25), transparent 60%), linear-gradient(135deg, #142233, #1f5a92); }
body.ly-recess .m-hbme .m-hbkick { color: #ffd27a; } body.ly-recess .m-hbmel li { border-top-color: rgba(255,210,122,.45); }
body.ly-recess .m-hbghall a { color: #1f5a92; }
body.ly-recess .m-cta .m-band { border-radius: 30px; background: radial-gradient(40% 90% at 88% 0%, rgba(245,184,61,.35), transparent 70%), linear-gradient(120deg, #142233, #1f5a92 60%, #2a6fb0); }
body.ly-recess .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(245,184,61,.28), transparent 70%), linear-gradient(120deg, #142233, #1f5a92); } body.ly-recess .m-page-hero .eyebrow { color: #ffd27a; }
body.ly-recess .m-page-hero .btn.m-btn-main { background: #fff; color: #1f5a92; } body.ly-recess .m-page-hero .btn.m-btn-main:hover { background: #e4eef8; color: #142233; }
body.ly-recess footer.site { background: #142233; color: #e4eef8; border: 0; } body.ly-recess footer.site nav a { color: #ffd27a; }
@media (min-width: 901px) and (max-width: 1240px) { body.ly-recess header.site nav { flex-wrap: nowrap; gap: 0; } body.ly-recess header.site nav a { white-space: nowrap; padding: 9px 7px; font-size: 13px; } }
@media (max-width: 560px) { .m-hbseatc { grid-template-columns: minmax(0, 1fr); } .m-hbseatc li { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-content: start; } .m-hbseatc li > .m-hbseatim { grid-row: span 3; } .m-hbseatc li > small { margin-top: 2px; } .m-hbseatc li > .btn { grid-column: 1 / -1; white-space: nowrap; font-size: 14px; } .m-hbseatf { margin-bottom: 2px; } }

/* ===== batch 14.11.2026 (4): shared hero layout (forage, lickpad) ===== */
:is(body.hv-forage, body.hv-lickpad) .m-hero { flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100svh - 78px); color: var(--m-ink); }
:is(body.hv-forage, body.hv-lickpad) .m-hero .m-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:is(body.hv-forage, body.hv-lickpad) .m-hero .m-copy > * { animation: m-rise .8s var(--m-ease) both; }
:is(body.hv-forage, body.hv-lickpad) .m-hero .m-copy > :nth-child(3) { animation-delay: .08s; } :is(body.hv-forage, body.hv-lickpad) .m-hero .m-copy > :nth-child(4) { animation-delay: .16s; } :is(body.hv-forage, body.hv-lickpad) .m-hero .m-copy > :nth-child(n+5) { animation-delay: .24s; }
:is(body.hv-forage, body.hv-lickpad) .m-hero h1 { color: var(--m-ink) !important; text-wrap: balance; }
:is(body.hv-forage, body.hv-lickpad) .m-hero .bgcredit { display: none; }
:is(body.hv-forage, body.hv-lickpad) .m-hero .sub { color: var(--m-body-ink); }
:is(body.hv-forage, body.hv-lickpad) .m-hero .m-btn-ghost { color: var(--m-ink) !important; border-color: var(--m-ink) !important; background: rgba(255,255,255,.7) !important; }
:is(body.hv-forage, body.hv-lickpad) .m-hero .m-btn-ghost:hover { background: var(--m-ink) !important; color: #fff !important; }
:is(body.hv-forage, body.hv-lickpad) .m-hero .m-chips span { background: #fff; color: var(--m-ink); border: 1.5px solid color-mix(in srgb, var(--m-ink) 14%, transparent); backdrop-filter: none; }
:is(.m-fg, .m-lx) { position: relative; width: min(100%, 600px); justify-self: center; container-type: inline-size; aspect-ratio: 600 / 560; isolation: isolate; }
:is(.m-fg, .m-lx) a { -webkit-tap-highlight-color: transparent; }
:is(.m-fg, .m-lx) img { display: block; width: 100%; height: auto; border-radius: 0; }
:is(.m-fgcats, .m-lxcats) { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; padding: 10px clamp(18px, 4vw, 72px) clamp(26px, 4vh, 44px); }
:is(.m-fgtile, .m-lxtile) { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; padding: 14px 14px 12px 12px; background: #fff; color: var(--m-ink) !important; overflow: hidden; animation: m-rise .7s calc(.8s + var(--i, 0) * .08s) var(--m-ease) backwards; transition: transform .35s var(--m-ease), border-color .3s, box-shadow .3s; }
:is(.m-fgimg, .m-lximg) { flex: none; display: block; overflow: hidden; width: 58px; height: 58px; padding: 4px; }
:is(.m-fgimg, .m-lximg) img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; transition: transform .45s var(--m-ease); }
:is(.m-fgtile, .m-lxtile):focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; }
:is(.m-fgtile, .m-lxtile):is(:hover, :focus-visible) { transform: translateY(-4px); }
:is(.m-fgtile, .m-lxtile) .m-q8tx b { font: 700 15px/1.2 var(--m-body); color: var(--m-ink); padding-right: 22px; }
:is(.m-fgtile, .m-lxtile) em { position: absolute; right: 12px; top: 12px; font-style: normal; }
:is(.m-fgspecs, .m-lxspecs) { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -6px 0 18px; }
:is(.m-fgspecs, .m-lxspecs) > span { flex-basis: 100%; margin: 0 0 2px; font: 700 12px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; }
:is(.m-fgspecs, .m-lxspecs) a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; background: #fff; color: var(--m-ink) !important; text-decoration: none; transition: border-color .25s, transform .3s var(--m-ease), box-shadow .3s; animation: m-rise .6s calc(.45s + var(--i, 0) * .06s) var(--m-ease) backwards; }
:is(.m-fgspecs, .m-lxspecs) a:is(:hover, :focus-visible) { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,24,40,.12); }
:is(.m-fgspecs, .m-lxspecs) b { display: grid; place-items: center; min-width: 40px; height: 28px; padding: 0 10px; color: #fff; font: 700 13px/1 var(--m-body); white-space: nowrap; }
:is(.m-fgspecs, .m-lxspecs) small { font: 600 12.5px/1 var(--m-body); white-space: nowrap; color: var(--m-body-ink); }
:is(body.hv-forage, body.hv-lickpad) .m-acard .m-art { position: relative; background: #fff !important; border-bottom: 1px solid color-mix(in srgb, var(--m-ink) 7%, transparent); }
:is(body.hv-forage, body.hv-lickpad) .m-acard .m-art img { position: absolute; left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); max-height: none; object-fit: contain; border-radius: 0; }
@media (max-width: 900px) {
  :is(body.hv-forage, body.hv-lickpad) .m-hero { min-height: 0; }
  :is(body.hv-forage, body.hv-lickpad) .m-hero .m-inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  :is(body.hv-forage, body.hv-lickpad) .m-hero .m-copy { display: contents; }
  :is(body.hv-forage, body.hv-lickpad) .m-hero .m-copy > * { order: 1; }
  :is(body.hv-forage, body.hv-lickpad) .m-hero .m-copy > :is(.m-ctas, nav, .m-chips) { order: 3; }
  :is(.m-fg, .m-lx) { order: 2; width: min(100%, 520px); align-self: center; margin: 8px 0 4px; }
  :is(.m-fgcats, .m-lxcats) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-fgcats, .m-lxcats) > a:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  :is(.m-fgspecs, .m-lxspecs) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.m-fgspecs, .m-lxspecs) > span { grid-column: 1 / -1; }
  :is(.m-fgspecs, .m-lxspecs) a { flex-direction: column; align-items: flex-start; gap: 5px; padding: 6px 10px 8px 6px; }
  :is(.m-fgspecs, .m-lxspecs) small { white-space: normal; line-height: 1.2; padding-left: 2px; }
}
@media (max-width: 420px) {
  :is(.m-fgtile, .m-lxtile) { gap: 9px; padding: 10px; } :is(.m-fgimg, .m-lximg) { width: 44px; height: 44px; }
  :is(.m-fgtile, .m-lxtile) .m-q8tx b { font-size: 13px; padding-right: 0; } :is(.m-fgtile, .m-lxtile) em { display: none; }
}

/* forage (Snuffle Mat guide): a living-room floor seen from above with a round sage rug; the real Fanlahmtasy soccer-field mat in the middle, the real CozyCove sunflower mat, Catstages cat puzzle and Hide-A-Squirrel plush around it; kibble drops in and sinks into the fleece, scent rings pulse over the sunflower, paw prints walk in from the corner, a dog-tag card swings through problem → pick */
body.hv-forage .m-hero { background: radial-gradient(50% 60% at 80% 40%, #fffdf5, transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(224,163,58,.16), transparent 70%), linear-gradient(120deg, #eaf1dc, #f8f7f0 55%, #f6eddb); }
body.hv-forage .m-hero .eyebrow { color: #3a5f1b; letter-spacing: .14em; }
body.hv-forage .m-hero h1 { font-weight: 600 !important; letter-spacing: -.025em; line-height: 1.14 !important; font-size: clamp(27px, 3vw, 42px) !important; max-width: 21ch; }
.m-fgfloor { position: absolute; inset: 0; border-radius: 30px; overflow: hidden; background: radial-gradient(70% 60% at 25% 15%, rgba(255,255,255,.4), transparent 70%), repeating-linear-gradient(0deg, transparent 0 31cqw, rgba(90,58,24,.08) 31cqw 31.3cqw), repeating-linear-gradient(90deg, #dcbc8f 0 9cqw, #d2b080 9cqw 9.3cqw), #dcbc8f; box-shadow: 0 26px 50px rgba(42,61,28,.18); animation: m-fgin .9s .05s var(--m-ease) backwards; }
.m-fgrug { position: absolute; left: 5%; right: 5%; top: 7%; bottom: 4%; z-index: 1; border-radius: 50%; background: radial-gradient(closest-side, #b5cd97 0 58%, #f4eedb 58.6% 61.5%, #b5cd97 62% 86%, #f4eedb 86.6% 89%, #98b878 89.5%); box-shadow: 0 1.2cqw 2.4cqw rgba(42,61,28,.2); animation: m-fgin .9s .12s var(--m-ease) backwards; }
.m-fgpaws { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; }
.m-fgpaws .pw { fill: rgba(92,60,28,.55); opacity: 0; animation: m-fgpaw 6s calc(1.2s + var(--i) * .4s) ease-in-out infinite; }
.m-fgflower { position: absolute; left: 4%; top: 5%; width: 32%; z-index: 3; display: block; rotate: -8deg; filter: drop-shadow(0 1.2cqw 1cqw rgba(42,61,28,.3)); animation: m-fgin 1s .25s var(--m-ease) backwards; }
.m-fgfield { position: absolute; left: 15%; top: 38%; width: 62%; z-index: 4; rotate: 3deg; animation: m-fgin 1s .2s var(--m-ease) backwards; }
.m-fgfieldimg { display: block; filter: drop-shadow(0 1.6cqw 1.4cqw rgba(42,61,28,.32)); }
.m-fgsq { position: absolute; right: 2%; top: 37%; width: 27%; z-index: 5; display: block; transform-origin: 50% 100%; filter: drop-shadow(0 1.4cqw 1cqw rgba(42,61,28,.3)); animation: m-fgin 1s .35s var(--m-ease) backwards, m-fgbob 4.6s 1.4s ease-in-out infinite; }
.m-fgbug { position: absolute; left: 3%; bottom: 4%; width: 21%; z-index: 5; display: block; rotate: -10deg; filter: drop-shadow(0 1.2cqw 1cqw rgba(42,61,28,.28)); animation: m-fgin 1s .45s var(--m-ease) backwards; }
.m-fgsq:hover, .m-fgfield:hover { animation-play-state: paused; }
.m-fgkib { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.m-fgkib i { position: absolute; left: var(--x); top: var(--y); width: 2.3cqw; height: 1.8cqw; border-radius: 45% 55% 50% 50%; background: radial-gradient(circle at 35% 30%, #d4964f, #8a4f1f); box-shadow: 0 .3cqw .4cqw rgba(0,0,0,.28); opacity: 0; animation: m-fgdrop 4.4s calc(1.4s + var(--d)) ease-in infinite; }
.m-fgsniff { position: absolute; left: 20%; top: 22%; z-index: 7; width: 0; height: 0; }
.m-fgsniff i { position: absolute; left: -6cqw; top: -6cqw; width: 12cqw; height: 12cqw; border-radius: 50%; border: .5cqw solid rgba(255,255,255,.9); opacity: 0; animation: m-fgringp 3s 1.6s ease-out infinite; }
.m-fgsniff i:nth-child(2) { animation-delay: 2.2s; } .m-fgsniff i:nth-child(3) { animation-delay: 2.8s; }
.m-fgtag { position: absolute; right: 3%; top: 5%; z-index: 8; display: grid; gap: 1cqw; width: 45%; padding: 2.4cqw 2.2cqw 2.2cqw 2.6cqw; border-radius: 18px 18px 18px 26px; background: #fffdf6; border: 2px solid #e6d6b0; box-shadow: 0 16px 28px rgba(42,61,28,.18); transform-origin: 10% 4%; animation: m-fgin .9s .8s var(--m-ease) backwards, m-fgswing 6s 1.8s ease-in-out infinite; }
.m-fgring { position: absolute; left: -1.4cqw; top: -1.4cqw; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; border: .9cqw solid #c9a35a; background: transparent; box-shadow: 0 .3cqw .6cqw rgba(0,0,0,.15); }
.m-fgtag > small { padding-left: 2.6cqw; font: 700 clamp(8px, 1.7cqw, 11px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #3a5f1b; }
.m-fgtl { display: grid; gap: .5cqw; }
.m-fgtl i { display: grid; grid-template-columns: 15cqw minmax(0, 1fr); align-items: center; gap: 1.2cqw; padding: .55cqw .8cqw; border-radius: 12px; font-style: normal; animation: m-fgrow 12s calc(1.6s + var(--i) * 3s) ease-in-out infinite; }
.m-fgtl b { display: grid; place-items: center; height: 4.2cqw; min-height: 16px; padding: 0 .8cqw; border-radius: 99px; font: 700 clamp(8.5px, 1.8cqw, 12px)/1 var(--m-body); white-space: nowrap; color: #fff; background: #4d7a26; }
.m-fgtl i:nth-child(2) b { background: #2d6f86; } .m-fgtl i:nth-child(3) b { background: #a8572a; } .m-fgtl i:nth-child(4) b { background: #6b4f8a; }
.m-fgtl em { font: 600 clamp(8.5px, 1.8cqw, 12.5px)/1.2 var(--m-body); font-style: normal; color: #1f2a17; }
@keyframes m-fgin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-fgdrop { 0% { opacity: 0; translate: 0 -14cqw; scale: 1; } 12% { opacity: 1; translate: 0 0; } 16% { translate: 0 -1.2cqw; } 20% { translate: 0 0; } 55% { opacity: 1; scale: 1; } 70%, 100% { opacity: 0; scale: .3; translate: 0 .6cqw; } }
@keyframes m-fgringp { 0% { opacity: .9; scale: .3; } 100% { opacity: 0; scale: 1.6; } }
@keyframes m-fgpaw { 0% { opacity: 0; } 8%, 60% { opacity: .9; } 78%, 100% { opacity: 0; } }
@keyframes m-fgbob { 0%, 100% { translate: 0 0; rotate: 0deg; } 30% { translate: 0 -1cqw; rotate: -2deg; } 60% { translate: 0 0; rotate: 1.5deg; } }
@keyframes m-fgswing { 0%, 100% { rotate: 0deg; } 50% { rotate: -1.6deg; } }
@keyframes m-fgrow { 0%, 22% { background: #ebf1df; } 27%, 100% { background: transparent; } }
@container (max-width: 460px) { .m-fgtag { width: 54%; padding: 2cqw 1.8cqw 1.8cqw 2.4cqw; } .m-fgtl i { grid-template-columns: 17cqw minmax(0, 1fr); padding: .4cqw .6cqw; } .m-fgflower { width: 30%; } }
.m-fgtile { border-radius: 20px; border: 2px solid #dfe6cf; box-shadow: 0 10px 22px rgba(42,61,28,.05); }
.m-fgimg { border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff, #ebf1df); }
.m-fgtile:is(:hover, :focus-visible) { border-color: #4d7a26; box-shadow: 0 16px 30px rgba(42,61,28,.1); }
.m-fgtile .m-q8tx small { color: #3a5f1b; }
.m-fgtile em { width: 10px; height: 8px; border-radius: 45% 55% 50% 50%; background: radial-gradient(circle at 35% 30%, #d4964f, #8a4f1f); }
.m-fgtile:is(:hover, :focus-visible) em { animation: m-fgdrop 1.6s ease-in; }
.m-fgspecs > span { color: #3a5f1b; }
.m-fgspecs a { border-radius: 99px; border: 2px solid #dfe6cf; } .m-fgspecs a:is(:hover, :focus-visible) { border-color: #4d7a26; }
.m-fgspecs b { border-radius: 99px; background: #4d7a26; } .m-fgspecs a:nth-of-type(2n) b { background: #8a4f1f; }
/* sniff (Snuffle Mat guide): a fat green pill; on hover a dotted scent trail runs along its foot toward the arrow, and the arrow sniffs forward twice */
body.bv-sniff .btn { border-radius: 999px; padding: 15px 28px 16px; }
body.bv-sniff :is(.btn.accent, .pcard .btn, .m-btn-main) { background: #4d7a26; color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.14), 0 10px 22px rgba(77,122,38,.26); }
body.bv-sniff :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: #3a5f1b; color: #fff; }
body.bv-sniff .btn::after { inset: auto 24px 5px 24px; height: 4px; transform: none; background: radial-gradient(circle, currentColor 0 1.3px, transparent 1.8px) 0 50% / 9px 4px repeat-x; opacity: 0; transition: opacity .3s; }
body.bv-sniff .btn:hover::after, body.bv-sniff .btn:focus-visible::after { transform: none; opacity: .6; animation: m-snifftrail .9s linear infinite; }
body.bv-sniff .btn:is(:hover, :focus-visible) .arr { animation: m-sniffnose .8s ease-in-out; }
@keyframes m-snifftrail { to { background-position: 9px 50%; } }
@keyframes m-sniffnose { 0% { transform: translateX(0); } 20% { transform: translateX(5px); } 35% { transform: translateX(2px); } 55% { transform: translateX(6px); } 100% { transform: translateX(4px); } }
body.bv-sniff .m-cta .btn.m-white:hover { color: #3a5f1b; }
@media (prefers-reduced-motion: reduce) { body.bv-sniff .btn::after, body.bv-sniff .btn .arr, .m-fg *, .m-fgtile em { animation: none !important; } .m-fgkib, .m-fgsniff, .m-fgpaws { display: none; } }

/* ===== batch 14.11.2026 (4): home blocks flow (problem → solution rows), matsize (mats drawn to scale on a floor grid by dog size), hide (introduce-the-mat steps with treats hidden deeper) ===== */
.m-hbfl { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.m-hbflr { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1.6fr); align-items: stretch; padding: 18px; border-radius: var(--m-radius); background: #fff; border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); box-shadow: 0 10px 26px rgba(31,42,23,.05); }
.m-hbflp { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 4px 6px 4px 4px; }
.m-hbflic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--m-soft); }
.m-hbflic svg { width: 28px; height: 28px; fill: none; stroke: var(--m-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.m-hbflp > small { position: absolute; right: 6px; top: 6px; font: 700 14px/1 var(--m-head); color: color-mix(in srgb, var(--m-ink) 38%, transparent); }
body.m .m-hbflp h3 { margin: 4px 0 0; font-size: 20px; line-height: 1.3; }
.m-hbflp p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--m-body-ink); }
.m-hbflln { display: flex; flex-direction: column; gap: 6px; margin-top: auto !important; padding-top: 6px; }
.m-hbflln a { font: 700 14.5px/1.3 var(--m-body); color: var(--m-accent) !important; text-decoration: none; } .m-hbflln a:hover { text-decoration: underline; }
.m-hbflar { position: relative; display: grid; place-items: center; }
.m-hbflar i { position: absolute; left: 12px; right: 14px; top: 50%; height: 4px; margin-top: -2px; background: radial-gradient(circle, var(--m-accent) 0 2px, transparent 2.5px) 0 50% / 10px 4px repeat-x; animation: m-hbfltrail 1.6s linear infinite; }
.m-hbflar i::after { content: ""; position: absolute; right: -6px; top: 50%; width: 9px; height: 9px; border: solid var(--m-accent); border-width: 3px 3px 0 0; rotate: 45deg; translate: 0 -50%; }
.m-hbflar b { position: relative; z-index: 1; padding: 6px 10px; border-radius: 99px; background: #fff; border: 2px solid var(--m-soft); font: 700 12px/1 var(--m-body); letter-spacing: .08em; text-transform: uppercase; color: var(--m-accent); }
@keyframes m-hbfltrail { to { background-position: 10px 50%; } }
.m-hbfls { align-self: center; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.m-hbfls li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px 12px; align-items: center; align-content: start; min-width: 0; padding: 10px; border-radius: calc(var(--m-radius) - 6px); background: var(--m-bg); transition: transform .3s var(--m-ease), box-shadow .3s; }
.m-hbfls li:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(31,42,23,.09); }
.m-hbflim { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: #fff; }
.m-hbflim img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 8px; transition: transform .5s var(--m-ease); }
.m-hbfls li:hover .m-hbflim img { transform: scale(1.06) rotate(-3deg); }
.m-hbflst { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.m-hbflst small { font: 700 11.5px/1 var(--m-body); letter-spacing: .1em; text-transform: uppercase; color: var(--m-accent); }
.m-hbflst b { font: 700 15px/1.3 var(--m-body); color: var(--m-ink); }
.m-hbflst em { font: 600 13px/1.35 var(--m-body); font-style: normal; color: var(--m-body-ink); }
.m-hbfls li > .btn { grid-column: 1 / -1; justify-content: center; padding: 11px 14px; font-size: 14px; line-height: 1.2; text-align: center; }
.m-hbmz { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 18px; align-items: start; }
.m-hbmzg { --mc: #8fb06e; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 14px 16px; border-radius: var(--m-radius); background: #fff; border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); }
.m-hbmzg:nth-child(2) { --mc: #d9a54e; } .m-hbmzg:nth-child(3) { --mc: #b9784a; }
.m-hbmzh { display: flex; align-items: center; gap: 12px; padding: 0 4px 6px; border-bottom: 1px dashed color-mix(in srgb, var(--m-ink) 16%, transparent); }
.m-hbmzdog { flex: none; display: flex; align-items: flex-end; justify-content: center; width: 64px; height: 44px; }
.m-hbmzdog svg { display: block; width: 30px; height: auto; fill: var(--m-ink); } .m-hbmzdog.s2 svg { width: 46px; } .m-hbmzdog.s3 svg { width: 64px; }
body.m .m-hbmzh h3 { margin: 0; font-size: 17px; line-height: 1.25; }
.m-hbmzh p { margin: 4px 0 0; font: 700 13px/1 var(--m-body); color: var(--m-accent); font-variant-numeric: tabular-nums; }
.m-hbmzl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; container-type: inline-size; }
.m-hbmzo { display: grid; grid-template-columns: 56cqw minmax(0, 1fr) 12px; gap: 10px; align-items: center; padding: 8px 6px; border-radius: 14px; text-decoration: none; color: var(--m-ink) !important; transition: background .25s; }
.m-hbmzo:is(:hover, :focus-visible) { background: var(--m-soft); }
.m-hbmzo .arr { font-style: normal; color: var(--m-accent); transition: translate .25s; } .m-hbmzo:hover .arr { translate: 3px 0; }
.m-hbmzlane { display: block; width: 56cqw; border-radius: 4px; background: linear-gradient(90deg, rgba(31,42,23,.1) 1px, transparent 1px) 0 0 / 14cqw 14cqw, linear-gradient(180deg, rgba(31,42,23,.1) 1px, transparent 1px) 0 0 / 14cqw 14cqw; }
.m-hbmzrect { position: relative; display: block; width: calc(var(--w) * 56cqw); aspect-ratio: var(--r); border-radius: 8px; background: repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 2px, transparent 2px 6px), var(--mc); outline: 2px dashed rgba(255,255,255,.75); outline-offset: -5px; box-shadow: 0 4px 10px rgba(31,42,23,.18); transition: rotate .4s var(--m-ease); }
.m-hbmzo:is(:hover, :focus-visible) .m-hbmzrect { rotate: -2deg; }
.m-hbmzim { position: absolute; inset: 14%; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: #fff; }
.m-hbmzim img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.m-hbmztx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m-hbmztx b { font: 700 14px/1.2 var(--m-body); font-variant-numeric: tabular-nums; color: var(--m-ink); }
.m-hbmztx small { margin-top: 2px; font: 700 10.5px/1.2 var(--m-body); letter-spacing: .1em; text-transform: uppercase; color: var(--m-accent); }
.m-hbmztx span { font: 600 13.5px/1.3 var(--m-body); }
.m-hbmztx em { font: 500 12.5px/1.3 var(--m-body); font-style: normal; color: var(--m-body-ink); }
.m-hbmzft { margin: auto 0 0; padding: 6px 6px 0; } .m-hbmzft a { font: 700 14.5px/1.3 var(--m-body); color: var(--m-accent) !important; text-decoration: none; } .m-hbmzft a:hover { text-decoration: underline; }
.m-hbhd { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.m-hbhd li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; border-radius: var(--m-radius); background: #fff; border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); }
.m-hbhdmat { position: relative; display: block; width: 96px; aspect-ratio: 1; overflow: hidden; border-radius: 18px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.28) 0 2px, transparent 2.5px) 0 0 / 9px 9px, radial-gradient(circle at 70% 60%, rgba(0,0,0,.09) 0 2px, transparent 2.5px) 0 0 / 11px 11px, #8fb06e; box-shadow: inset 0 0 0 3px #7a9d58; }
.m-hbhdtr { position: absolute; inset: 0; z-index: 1; }
.m-hbhdtr i { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 9px; margin: -4px 0 0 -6px; border-radius: 45% 55% 50% 50%; background: radial-gradient(circle at 35% 30%, #eaa75c, #b2662a); box-shadow: 0 1px 1px rgba(0,0,0,.25); }
.m-hbhdfz { position: absolute; inset: 0; z-index: 2; opacity: 0; background: repeating-linear-gradient(62deg, transparent 0 3px, #6f9150 3px 5px, transparent 5px 9px), repeating-linear-gradient(-58deg, transparent 0 4px, #a3c283 4px 6px, transparent 6px 10px); }
.m-hbhdmat > b { position: absolute; right: 6px; bottom: 6px; z-index: 3; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--m-ink); color: #fff; font: 700 13px/1 var(--m-head); }
.m-hbhd .v-empty .m-hbhdtr { display: none; }
.m-hbhd .v-top .m-hbhdtr i:nth-child(n+7) { display: none; }
.m-hbhd .v-half .m-hbhdfz { opacity: .8; }
.m-hbhd .v-deep .m-hbhdfz { opacity: 1; } .m-hbhd .v-deep .m-hbhdtr i { opacity: .2; }
.m-hbhd .v-mix .m-hbhdfz { opacity: .45; } .m-hbhd .v-mix .m-hbhdtr i:nth-child(odd) { width: 8px; height: 7px; margin: -3px 0 0 -4px; background: radial-gradient(circle at 35% 30%, #9a6a3a, #5e3a18); }
.m-hbhd .v-full .m-hbhdtr { background: radial-gradient(circle, #6e4520 0 2.4px, transparent 3px) 0 0 / 13px 13px, radial-gradient(circle, #7d5228 0 2px, transparent 2.6px) 6px 6px / 13px 13px; }
.m-hbhd .v-full .m-hbhdtr i { width: 8px; height: 7px; margin: -3px 0 0 -4px; background: radial-gradient(circle at 35% 30%, #9a6a3a, #5e3a18); } .m-hbhd .v-full .m-hbhdfz { opacity: .5; }
.m-hbhd li:hover .m-hbhdtr i { animation: m-hbhddrop .5s calc(var(--k) * .04s) var(--m-ease) backwards; }
@keyframes m-hbhddrop { from { translate: 0 -30px; opacity: 0; } }
body.m .m-hbhd h3 { margin: 2px 0 6px; font-size: 18px; line-height: 1.3; }
.m-hbhd p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--m-body-ink); }
@media (max-width: 1000px) {
  .m-hbflr { grid-template-columns: minmax(0, 1fr); gap: 4px; } .m-hbflar { height: 46px; } .m-hbflar i { display: none; } .m-hbflar b::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; }
  .m-hbmz { grid-template-columns: minmax(0, 1fr); } .m-hbhd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) { .m-hbhd { grid-template-columns: minmax(0, 1fr); } .m-hbhd li { grid-template-columns: 80px minmax(0, 1fr); padding: 14px; } .m-hbhdmat { width: 80px; } }
@media (max-width: 560px) { .m-hbflr { padding: 14px; } .m-hbfls { gap: 10px; } .m-hbfls li { grid-template-columns: minmax(0, 1fr); padding: 8px; } .m-hbflim { width: 100%; } .m-hbflst { padding: 0 2px; } .m-hbflst b { font-size: 14px; } .m-hbflst em { font-size: 12.5px; } body.m .m-hbfls li > .btn { min-width: 0; padding: 10px 6px; font-size: 13px; white-space: normal; } body.m .m-hbfls li > .btn .arr { display: none; } }
@media (prefers-reduced-motion: reduce) { .m-hbflar i, .m-hbhd li:hover .m-hbhdtr i { animation: none !important; } }
/* ly-meadow (Snuffle Mat guide): a soft garden rhythm — rounded Lemonada heads under a scent-trail marker that ends in a kibble, problem → fix rows first, mats to scale next, felt-green and oat sections, forest page heroes and footer */
body.ly-meadow main section > .wrap > h2, body.ly-meadow .m-hbhead h2 { letter-spacing: -.02em; }
body.ly-meadow .m-hbhead h2::before, body.ly-meadow main section > .wrap > h2::before { content: ""; display: block; width: 6px; height: 6px; margin: 0 0 16px 2px; border-radius: 50%; background: #b5cd97; box-shadow: 12px 0 0 #98b878, 24px 0 0 #6a9a3c, 36px 0 0 #4d7a26, 51px 0 0 2px #a8652a; }
body.ly-meadow .m-hbkick { color: #3a5f1b; }
body.ly-meadow .m-hb-flow { background: linear-gradient(180deg, #eaf1dc, #f8f7f0); }
body.ly-meadow .m-hb-matsize { background: #fff; }
body.ly-meadow .m-hb-matsize .m-hbmzg { background: #fbfaf4; }
body.ly-meadow .m-hb-hide { background: radial-gradient(circle, rgba(168,101,42,.08) 0 1.5px, transparent 2px) 0 0 / 18px 18px, #f4eedd; }
body.ly-meadow .m-hbnote { padding: 12px 16px; border-radius: 16px; background: #fff; border-left: 4px solid #a8652a; }
body.ly-meadow .pcard { border-radius: 22px; border-color: #dfe6cf; } body.ly-meadow .pcard .shot { background: radial-gradient(70% 70% at 50% 35%, #fff, #eef3e3); }
body.ly-meadow #compare .tablewrap { border-radius: 22px; overflow: auto; background: #fff; box-shadow: 0 12px 30px rgba(42,61,28,.06); }
body.ly-meadow #compare table.spec thead th { background: #2a3d1c; color: #fff; }
body.ly-meadow #compare td .btn { padding: 10px 16px; font-size: 13.5px; white-space: nowrap; color: #fff; background: #4d7a26; border-color: #4d7a26; }
@media (max-width: 760px) { body.ly-meadow #compare table.spec { min-width: 680px; } }
body.ly-meadow #materials { background: #fbfaf4; }
body.ly-meadow .m-hblbf, body.ly-meadow .m-hblbi { border-radius: 22px; } body.ly-meadow .m-hblbim { background: radial-gradient(70% 90% at 50% 40%, #fff, #eef3e3); }
body.ly-meadow #faq details.faq { border-radius: 18px; border-left: 4px solid #6a9a3c; }
body.ly-meadow #about { background: linear-gradient(180deg, #f8f7f0, #eaf1dc); }
body.ly-meadow .m-hbghall a { color: #3a5f1b; }
body.ly-meadow .m-cta .m-band { border-radius: 30px; background: radial-gradient(circle, rgba(255,255,255,.08) 0 2px, transparent 2.5px) 0 0 / 22px 22px, radial-gradient(40% 90% at 88% 0%, rgba(224,163,58,.32), transparent 70%), linear-gradient(120deg, #1f2a17, #2a3d1c 55%, #4d7a26); }
body.ly-meadow .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(224,163,58,.26), transparent 70%), linear-gradient(120deg, #1f2a17, #3a5f1b); } body.ly-meadow .m-page-hero .eyebrow { color: #e8d3a6; }
body.ly-meadow .m-page-hero .btn.m-btn-main { background: #fff; color: #2a3d1c; } body.ly-meadow .m-page-hero .btn.m-btn-main:hover { background: #eaf1dc; color: #1f2a17; }
body.ly-meadow footer.site { background: #1f2a17; color: #eaf1dc; border: 0; } body.ly-meadow footer.site nav a { color: #e8d3a6; }
@media (min-width: 901px) and (max-width: 1240px) { body.ly-meadow header.site nav { flex-wrap: nowrap; gap: 0; } body.ly-meadow header.site nav a { white-space: nowrap; padding: 9px 7px; font-size: 13px; } }
@media (min-width: 901px) and (max-width: 1440px) { html[lang^="es"] body.ly-meadow header.site nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; gap: 0; } html[lang^="es"] body.ly-meadow header.site nav a { white-space: nowrap; padding: 9px 6px; font-size: 12.8px; } }
body.ly-meadow footer.site .note { color: #c9d4bb; }
body.ly-meadow #about h2::before { content: ""; display: block; width: 6px; height: 6px; margin: 0 0 16px 2px; border-radius: 50%; background: #b5cd97; box-shadow: 12px 0 0 #98b878, 24px 0 0 #6a9a3c, 36px 0 0 #4d7a26, 51px 0 0 2px #a8652a; }

/* lickpad (LickiMat catalogue): a kitchen counter under a white tile backsplash; the real Classic Soother lies in front while a silicone spatula sweeps a creamy spread across it and the spread fades as if licked clean; the real Buddy and Playdate mats behind, the real Felix fish mat at the edge; a loupe card zooms into each texture and names the food it holds */
body.hv-lickpad .m-hero { background: radial-gradient(46% 60% at 80% 38%, #ffffff, transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(60,195,209,.14), transparent 70%), linear-gradient(120deg, #ffe9df, #fff8f3 55%, #eef7f6); }
body.hv-lickpad .m-hero .eyebrow { color: #a62b21; letter-spacing: .14em; }
body.hv-lickpad .m-hero h1 { font-weight: 400 !important; letter-spacing: -.01em; line-height: 1.12 !important; font-size: clamp(28px, 3.2vw, 44px) !important; max-width: 19ch; }
.m-lxwall { position: absolute; left: 0; right: 0; top: 0; height: 48%; border-radius: 30px 30px 0 0; overflow: hidden; background: radial-gradient(60% 80% at 70% 0%, rgba(255,255,255,.9), transparent 70%), linear-gradient(90deg, #e3dad0 .45cqw, transparent .45cqw) 0 0 / 9cqw 9cqw, linear-gradient(0deg, #e3dad0 .45cqw, transparent .45cqw) 0 0 / 9cqw 9cqw, linear-gradient(180deg, #fbf8f4, #f1ebe4); animation: m-lxin .9s .05s var(--m-ease) backwards; }
.m-lxtop { position: absolute; left: 0; right: 0; top: 46%; bottom: 0; z-index: 1; border-radius: 0 0 30px 30px; background: radial-gradient(circle, rgba(29,43,51,.09) 0 .25cqw, transparent .35cqw) 0 0 / 3.1cqw 2.7cqw, radial-gradient(circle, rgba(166,43,33,.08) 0 .2cqw, transparent .3cqw) 1.4cqw 1.1cqw / 4.3cqw 3.7cqw, linear-gradient(180deg, #fffdf9, #f1e6da); box-shadow: inset 0 1.1cqw 0 #ffffff, inset 0 1.6cqw 0 #e7dccf, 0 26px 50px rgba(29,43,51,.16); animation: m-lxin .9s .12s var(--m-ease) backwards; }
.m-lxplay { position: absolute; left: 2%; top: 32%; width: 44%; z-index: 2; display: block; rotate: -8deg; filter: drop-shadow(0 1.2cqw 1cqw rgba(29,43,51,.22)); animation: m-lxin 1s .3s var(--m-ease) backwards; }
.m-lxbuddy { position: absolute; right: 0; top: 28%; width: 44%; z-index: 3; display: block; rotate: 9deg; filter: drop-shadow(0 1.2cqw 1cqw rgba(29,43,51,.22)); animation: m-lxin 1s .38s var(--m-ease) backwards; }
.m-lxsooth { position: absolute; left: 20%; top: 47%; width: 52%; z-index: 4; animation: m-lxin 1s .2s var(--m-ease) backwards; }
.m-lxsoothimg { display: block; filter: drop-shadow(0 1.6cqw 1.4cqw rgba(29,43,51,.28)); }
.m-lxfelix { position: absolute; right: 0; bottom: 3%; width: 28%; z-index: 5; display: block; rotate: -14deg; transform-origin: 50% 80%; filter: drop-shadow(0 1.2cqw 1cqw rgba(29,43,51,.25)); animation: m-lxin 1s .46s var(--m-ease) backwards, m-lxfish 5s 1.6s ease-in-out infinite; }
.m-lxspread { position: absolute; left: 6%; top: 18%; width: 86%; height: auto; overflow: visible; pointer-events: none; }
.m-lxspread path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: m-lxspread 7s 1.2s ease-in-out infinite; }
.m-lxspread .sh { stroke: #e8d6bd; stroke-width: 21; }
.m-lxspread .sp { stroke: #fff7ea; stroke-width: 15; }
.m-lxspat { position: absolute; left: 0; top: 14%; width: 40%; z-index: 2; opacity: 0; rotate: -16deg; pointer-events: none; animation: m-lxspat 7s 1.2s ease-in-out infinite; }
.m-lxspat svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 .8cqw .8cqw rgba(29,43,51,.3)); }
.m-lxspat .hd { fill: #1d2b33; } .m-lxspat .nk { fill: #9aa7ae; } .m-lxspat .bl { fill: #e2463a; }
.m-lxlens { position: absolute; left: 3%; top: 4%; z-index: 8; display: flex; align-items: center; gap: 2.4cqw; width: 64%; padding: 1.6cqw 3cqw 1.6cqw 1.6cqw; border-radius: 99px; background: rgba(255,255,255,.96); border: 2px solid #f3d6cc; box-shadow: 0 16px 28px rgba(29,43,51,.16); animation: m-lxin .9s .8s var(--m-ease) backwards; }
.m-lxglass { position: relative; flex: none; width: 19cqw; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.1cqw #1d2b33, inset 0 0 0 .4cqw rgba(255,255,255,.6); }
.m-lxglass i { position: absolute; inset: 0; opacity: 0; animation: m-lxcyc 12s calc(1.2s + var(--i) * 3s) ease-in-out infinite; }
.m-lxglass i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(60% 50% at 30% 25%, rgba(255,255,255,.55), transparent 60%); }
.m-lxglass .t-dots { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='3.6' fill='rgba(0,0,0,.2)'/%3E%3Ccircle cx='7' cy='7' r='1.4' fill='rgba(255,255,255,.5)'/%3E%3C/svg%3E") 0 0 / 4cqw 4cqw, #8fc23f; }
.m-lxglass .t-cross { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M10 4v12M4 10h12' stroke='rgba(0,0,0,.24)' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 4.6cqw 4.6cqw, #3cc3d1; }
.m-lxglass .t-squares { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Crect x='2.5' y='2.5' width='13' height='13' rx='2' fill='rgba(255,255,255,.12)' stroke='rgba(0,0,0,.24)' stroke-width='2.4'/%3E%3C/svg%3E") 0 0 / 4.4cqw 4.4cqw, #f29a2e; }
.m-lxglass .t-tuff { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='3.6' fill='rgba(0,0,0,.2)'/%3E%3Ccircle cx='7' cy='7' r='1.4' fill='rgba(255,255,255,.5)'/%3E%3C/svg%3E") 0 0 / 4cqw 4cqw, #5d6b72; }
.m-lxll { display: grid; gap: .8cqw; min-width: 0; }
.m-lxll > small { font: 700 clamp(8px, 1.7cqw, 11px)/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: #a62b21; }
.m-lxlt { display: grid; }
.m-lxlt b { grid-area: 1 / 1; display: grid; gap: .5cqw; font: 400 clamp(12px, 3.4cqw, 21px)/1.05 var(--m-head); color: #1d2b33; opacity: 0; animation: m-lxcyc 12s calc(1.2s + var(--i) * 3s) ease-in-out infinite; }
.m-lxlt em { font: 600 clamp(9px, 2cqw, 13px)/1.25 var(--m-body); font-style: normal; color: #4a5560; }
@keyframes m-lxin { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-lxcyc { 0% { opacity: 0; } 3%, 22% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes m-lxspread { 0% { stroke-dashoffset: 100; opacity: 1; } 34% { stroke-dashoffset: 0; } 66% { stroke-dashoffset: 0; opacity: 1; } 84%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes m-lxspat { 0% { opacity: 0; translate: 0 0; } 4% { opacity: 1; translate: 0 0; } 12% { translate: 9cqw -2cqw; } 20% { translate: 18cqw 1cqw; } 28% { translate: 27cqw -2.4cqw; } 34% { opacity: 1; translate: 33cqw -1cqw; } 42%, 100% { opacity: 0; translate: 38cqw -8cqw; } }
@keyframes m-lxfish { 0%, 100% { rotate: -14deg; } 50% { rotate: -9deg; } }
@container (max-width: 460px) { .m-lxlens { width: 76%; } }
.m-lxtile { border-radius: 16px; border: 2px solid #f3d6cc; box-shadow: 0 10px 22px rgba(29,43,51,.05); }
.m-lximg { border-radius: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='3.6' fill='rgba(0,0,0,.2)'/%3E%3Ccircle cx='7' cy='7' r='1.4' fill='rgba(255,255,255,.5)'/%3E%3C/svg%3E") 0 0 / 9px 9px, #ffe6dc; }
.m-lxtile:is(:hover, :focus-visible) { border-color: #c8372b; box-shadow: 0 16px 30px rgba(29,43,51,.1); }
.m-lxtile .m-q8tx small { color: #a62b21; }
.m-lxtile em { width: 14px; height: 14px; border-radius: 4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M10 4v12M4 10h12' stroke='rgba(0,0,0,.24)' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 7px 7px, #3cc3d1; }
.m-lxspecs > span { color: #a62b21; }
.m-lxspecs a { border-radius: 12px; border: 2px solid #f3d6cc; } .m-lxspecs a:is(:hover, :focus-visible) { border-color: #c8372b; }
.m-lxspecs b { border-radius: 9px; background: #c8372b; } .m-lxspecs a:nth-of-type(2n) b { background: #1d2b33; }
@media (prefers-reduced-motion: reduce) { .m-lx *, .m-lxlt b, .m-lxglass i { animation: none !important; } .m-lxspat, .m-lxspread { display: none; } .m-lxlt b:first-child, .m-lxglass i:first-child { opacity: 1; } }
/* lick (LickiMat catalogue): a rounded-square red button with a faint dotted Soother texture; on hover a soft wet highlight licks upward across it and the arrow laps forward */
body.bv-lick .btn { border-radius: 14px; padding: 15px 26px; }
body.bv-lick :is(.btn.accent, .pcard .btn, .m-btn-main) { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='3.6' fill='rgba(0,0,0,.2)'/%3E%3Ccircle cx='7' cy='7' r='1.4' fill='rgba(255,255,255,.5)'/%3E%3C/svg%3E") 0 0 / 9px 9px, #c8372b; color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.16), 0 10px 22px rgba(200,55,43,.24); }
body.bv-lick :is(.btn.accent, .pcard .btn, .m-btn-main):hover { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='3.6' fill='rgba(0,0,0,.2)'/%3E%3Ccircle cx='7' cy='7' r='1.4' fill='rgba(255,255,255,.5)'/%3E%3C/svg%3E") 0 0 / 9px 9px, #a62b21; color: #fff; }
body.bv-lick .btn::after { inset: -30% -12%; transform: translateY(115%); transition: none; background: radial-gradient(60% 46% at 50% 0%, rgba(255,255,255,.42), rgba(255,255,255,.14) 72%, transparent 73%); }
body.bv-lick .btn:hover::after, body.bv-lick .btn:focus-visible::after { transform: translateY(115%); animation: m-lickwipe .75s var(--m-ease); }
body.bv-lick .btn:is(:hover, :focus-visible) .arr { animation: m-licklap .7s ease-in-out; }
@keyframes m-lickwipe { from { transform: translateY(115%); } to { transform: translateY(-115%); } }
@keyframes m-licklap { 0% { transform: translateX(0) rotate(0); } 30% { transform: translateX(5px) rotate(-12deg); } 60% { transform: translateX(2px) rotate(8deg); } 100% { transform: translateX(4px) rotate(0); } }
body.bv-lick :is(.m-btn-ghost, .btn.ghost, .btn.secondary) { border-radius: 14px; }
body.bv-lick .m-cta .btn.m-white:hover { color: #a62b21; }
@media (prefers-reduced-motion: reduce) { body.bv-lick .btn::after, body.bv-lick .btn .arr { animation: none !important; } }

/* ===== batch 14.11.2026 (4): home blocks pattern (food chips light up the textures that hold it, CSS-only), spread (topping jars, a never list and an ask-your-vet box), care (dishwasher / freezer wording as listed) ===== */
.m-hbptf { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0 0 20px; padding: 0; border: 0; }
.m-hbptf legend { display: block; width: 100%; margin: 0 0 12px; padding: 0; font: 700 12.5px/1 var(--m-body); letter-spacing: .14em; text-transform: uppercase; color: var(--m-ink); }
.m-hbptf label { position: relative; cursor: pointer; }
.m-hbptf input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.m-hbptf span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 12px; background: #fff; border: 2px solid color-mix(in srgb, var(--m-ink) 14%, transparent); font: 700 14.5px/1.2 var(--m-body); color: var(--m-ink); transition: background .25s, color .25s, border-color .25s, transform .3s var(--m-ease); }
.m-hbptf label:hover span { border-color: var(--m-accent); transform: translateY(-2px); }
.m-hbptf input:checked + span { background: var(--m-ink); color: #fff; border-color: var(--m-ink); }
.m-hbptf input:focus-visible + span { outline: 3px solid var(--m-accent); outline-offset: 2px; }
.m-hbptl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.m-hbpti { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 10px 14px; border-radius: var(--m-radius); background: #fff; border: 2px solid transparent; box-shadow: 0 10px 24px rgba(29,43,51,.07); transition: opacity .35s, filter .35s, transform .35s var(--m-ease), border-color .3s; }
.m-hbptsw { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(var(--m-radius) - 4px); background: var(--c); box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--c), #000 16%); }
.m-hbptsw i { position: absolute; inset: 9px; border-radius: 7px; transition: transform .6s var(--m-ease); }
.m-hbpti:hover .m-hbptsw i { transform: scale(1.12); }
.m-hbptsw.s-dots i { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='3.6' fill='rgba(0,0,0,.2)'/%3E%3Ccircle cx='7' cy='7' r='1.4' fill='rgba(255,255,255,.5)'/%3E%3C/svg%3E") 0 0 / 16px 16px; }
.m-hbptsw.s-cross i { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M10 4v12M4 10h12' stroke='rgba(0,0,0,.24)' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 20px 20px; }
.m-hbptsw.s-squares i { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Crect x='2.5' y='2.5' width='13' height='13' rx='2' fill='rgba(255,255,255,.12)' stroke='rgba(0,0,0,.24)' stroke-width='2.4'/%3E%3C/svg%3E") 0 0 / 18px 18px; }
.m-hbptsw.s-tuff { box-shadow: inset 0 0 0 8px #3a454b; } .m-hbptsw.s-tuff i { inset: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='3.6' fill='rgba(0,0,0,.2)'/%3E%3Ccircle cx='7' cy='7' r='1.4' fill='rgba(255,255,255,.5)'/%3E%3C/svg%3E") 0 0 / 16px 16px; }
.m-hbptsw.s-pockets i { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='3' y='3' width='11' height='11' rx='2' fill='rgba(0,0,0,.26)'/%3E%3Ccircle cx='24' cy='8' r='3.4' fill='rgba(0,0,0,.18)'/%3E%3Ccircle cx='8' cy='24' r='3.4' fill='rgba(0,0,0,.18)'/%3E%3Crect x='18' y='18' width='11' height='11' rx='2' fill='rgba(0,0,0,.26)'/%3E%3C/svg%3E") 0 0 / 32px 32px; }
.m-hbptsw.s-dimples i { inset: 8% 14%; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Ccircle cx='5.5' cy='5.5' r='2.1' fill='rgba(0,0,0,.24)'/%3E%3C/svg%3E") 0 0 / 11px 11px, radial-gradient(circle, transparent 50%, rgba(0,0,0,.14)); }
.m-hbptsw.s-bowl i { inset: 8% 16%; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M10 4v12M4 10h12' stroke='rgba(0,0,0,.24)' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 14px 14px, radial-gradient(circle, rgba(0,0,0,.22) 0 12%, transparent 13% 55%, rgba(0,0,0,.14)); }
.m-hbptsw.s-ribs i { inset: 14% 10%; border-radius: 50% 40% 40% 50% / 50% 50% 50% 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 6Q6 0 12 6T24 6' fill='none' stroke='rgba(0,0,0,.22)' stroke-width='2.4'/%3E%3C/svg%3E") 0 0 / 24px 12px, rgba(255,255,255,.08); clip-path: polygon(0 50%, 22% 8%, 74% 0, 100% 30%, 86% 50%, 100% 70%, 74% 100%, 22% 92%); }
body.m .m-hbpti h3 { margin: 6px 2px 0; font-size: 17px; line-height: 1.2; }
.m-hbptsu { margin: 0 2px; font: 700 11.5px/1.3 var(--m-body); letter-spacing: .06em; text-transform: uppercase; color: var(--m-accent); }
.m-hbpti dl { display: grid; gap: 6px; margin: 2px 2px 6px; }
.m-hbpti dt { font: 700 10.5px/1 var(--m-body); letter-spacing: .1em; text-transform: uppercase; color: var(--m-body-ink); }
.m-hbpti dd { margin: 3px 0 0; font-size: 14px; line-height: 1.4; color: var(--m-ink); }
body.m .m-hbpti .btn { margin-top: auto; justify-content: center; padding: 10px 6px; font-size: 13px; line-height: 1.2; text-align: center; white-space: normal; }
.m-hbpt:has(.r0:checked) .m-hbpti:not(.f0) { opacity: .32; filter: grayscale(.7); transform: scale(.97); } .m-hbpt:has(.r0:checked) .m-hbpti.f0 { border-color: var(--m-accent); transform: translateY(-4px); }
.m-hbpt:has(.r1:checked) .m-hbpti:not(.f1) { opacity: .32; filter: grayscale(.7); transform: scale(.97); } .m-hbpt:has(.r1:checked) .m-hbpti.f1 { border-color: var(--m-accent); transform: translateY(-4px); }
.m-hbpt:has(.r2:checked) .m-hbpti:not(.f2) { opacity: .32; filter: grayscale(.7); transform: scale(.97); } .m-hbpt:has(.r2:checked) .m-hbpti.f2 { border-color: var(--m-accent); transform: translateY(-4px); }
.m-hbpt:has(.r3:checked) .m-hbpti:not(.f3) { opacity: .32; filter: grayscale(.7); transform: scale(.97); } .m-hbpt:has(.r3:checked) .m-hbpti.f3 { border-color: var(--m-accent); transform: translateY(-4px); }
.m-hbpt:has(.r4:checked) .m-hbpti:not(.f4) { opacity: .32; filter: grayscale(.7); transform: scale(.97); } .m-hbpt:has(.r4:checked) .m-hbpti.f4 { border-color: var(--m-accent); transform: translateY(-4px); }
.m-hbpt:has(.r5:checked) .m-hbpti:not(.f5) { opacity: .32; filter: grayscale(.7); transform: scale(.97); } .m-hbpt:has(.r5:checked) .m-hbpti.f5 { border-color: var(--m-accent); transform: translateY(-4px); }
@media (max-width: 1150px) { .m-hbptl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .m-hbptl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .m-hbptf span { min-height: 40px; padding: 7px 12px; font-size: 13.5px; } body.m .m-hbpti h3 { font-size: 15.5px; } .m-hbpti dd { font-size: 13px; } body.m .m-hbpti .btn { padding: 10px 6px; font-size: 13px; } body.m .m-hbpti .btn .arr { display: none; } }
.m-hbsp { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.m-hbspl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.m-hbspl li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; border-radius: var(--m-radius); background: #fff; border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); }
.m-hbspjar { position: relative; display: block; width: 46px; height: 60px; margin-top: 2px; }
.m-hbspjar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 47px; border-radius: 9px 9px 14px 14px; background: linear-gradient(90deg, rgba(255,255,255,.55) 0 18%, transparent 30%), linear-gradient(180deg, transparent 0 34%, rgba(255,255,255,.85) 34% 58%, transparent 58%), var(--c); box-shadow: inset 0 0 0 2px rgba(29,43,51,.16); }
.m-hbspjar i { position: absolute; left: 4px; right: 4px; top: 2px; height: 13px; border-radius: 4px; background: #c8372b; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.m-hbspl li:hover .m-hbspjar i { animation: m-hbsplid .6s var(--m-ease); }
@keyframes m-hbsplid { 40% { translate: 0 -7px; rotate: -8deg; } }
body.m .m-hbspl h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.25; }
.m-hbsptg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.m-hbsptg span { display: inline-flex; flex-direction: column; gap: 2px; padding: 5px 9px; border-radius: 9px; background: var(--m-soft); font: 600 12.5px/1.2 var(--m-body); color: var(--m-ink); }
.m-hbsptg small { font: 700 9.5px/1 var(--m-body); letter-spacing: .1em; text-transform: uppercase; color: var(--m-body-ink); }
.m-hbsptg .fz { background: #e1f2f3; }
.m-hbspl p:last-child { margin: 0; font-size: 14px; line-height: 1.5; color: var(--m-body-ink); }
.m-hbspno { position: sticky; top: 92px; display: grid; gap: 14px; }
.m-hbspsk { padding: 20px; border-radius: var(--m-radius); background: #fff; border: 2px solid #f1b8b0; }
body.m .m-hbspsk h3 { margin: 0 0 12px; font-size: 18px; color: #a62b21; }
.m-hbspsk ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.m-hbspsk li { position: relative; padding-left: 30px; font-size: 14.5px; line-height: 1.45; color: var(--m-ink); }
.m-hbspsk li::before { content: "×"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; font: 700 15px/1 var(--m-body); color: #fff; background: #c8372b; }
.m-hbspvet { padding: 20px; border-radius: var(--m-radius); background: #1d2b33; color: #fff; }
body.m .m-hbspvet h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 18px; color: #fff; }
.m-hbspvet h3::before { content: "+"; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; font: 700 20px/1 var(--m-body); color: #1d2b33; background: #fff; }
.m-hbspvet p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.9); }
@media (max-width: 1000px) { .m-hbsp { grid-template-columns: minmax(0, 1fr); } .m-hbspno { position: static; } }
@media (max-width: 640px) { .m-hbspl { grid-template-columns: minmax(0, 1fr); } }
.m-hbcrl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.m-hbcrl li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 10px 14px 10px 10px; border-radius: var(--m-radius); background: #fff; border: 1px solid color-mix(in srgb, var(--m-ink) 10%, transparent); transition: transform .3s var(--m-ease), box-shadow .3s; }
.m-hbcrl li:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(29,43,51,.08); }
.m-hbcrim { display: block; width: 64px; height: 64px; overflow: hidden; border-radius: 12px; background: #fff; }
.m-hbcrim img { display: block; width: 100%; height: 100%; object-fit: contain; }
.m-hbcrn { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0; }
.m-hbcrn small { font: 700 11px/1.2 var(--m-body); letter-spacing: .1em; text-transform: uppercase; color: var(--m-accent); }
.m-hbcrn b { font: 700 15px/1.3 var(--m-body); color: var(--m-ink); }
.m-hbcrc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.m-hbcrc > i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; }
.m-hbcrc svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-hbcrc.y.dw > i { background: #e6f4ea; color: #2d7a3e; } .m-hbcrc.y.fz > i { background: #e1f0f7; color: #1f6d8f; } .m-hbcrc.n > i { background: #f1f1f1; color: #9aa3a8; }
.m-hbcrc > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font: 600 13.5px/1.3 var(--m-body); color: var(--m-ink); }
.m-hbcrc > span small { font: 700 10px/1 var(--m-body); letter-spacing: .1em; text-transform: uppercase; color: var(--m-body-ink); }
.m-hbcrc.n > span { color: #66717a; font-weight: 500; }
.m-hbcrl li > .btn { padding: 10px 16px; font-size: 13.5px; white-space: nowrap; }
@media (max-width: 860px) { .m-hbcrl li { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 10px; } .m-hbcrim { position: absolute; left: 10px; top: 10px; width: 54px; height: 54px; } .m-hbcrn { grid-column: 1 / -1; min-height: 54px; justify-content: center; padding-left: 66px; } .m-hbcrl li > .btn { grid-column: 1 / -1; justify-content: center; } .m-hbcrc > i { width: 32px; height: 32px; } .m-hbcrc { gap: 8px; } .m-hbcrc > span { font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) { .m-hbspl li:hover .m-hbspjar i { animation: none !important; } }
/* ly-pantry (LickiMat catalogue): a bright kitchen rhythm — chunky Rammetto heads under a dotted mat swatch, the pattern finder first on a faint tile wall, toppings on yogurt cream, care on a frosty blue, the LickiMat categories in between, slate page heroes and footer */
body.ly-pantry main section > .wrap > h2, body.ly-pantry .m-hbhead h2, body.ly-pantry #about h2 { letter-spacing: -.01em; }
body.ly-pantry .m-hbhead h2::before, body.ly-pantry main section > .wrap > h2::before { content: ""; display: block; width: 30px; height: 30px; margin-bottom: 14px; border-radius: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='3.6' fill='rgba(0,0,0,.2)'/%3E%3Ccircle cx='7' cy='7' r='1.4' fill='rgba(255,255,255,.5)'/%3E%3C/svg%3E") 0 0 / 10px 10px, #e2463a; box-shadow: 12px 7px 0 -3px #3cc3d1; }
body.ly-pantry .m-hbme .m-hbhead h2::before { box-shadow: 12px 7px 0 -3px #3cc3d1; }
body.ly-pantry .m-hbkick { color: #a62b21; }
body.ly-pantry .m-hb-pattern { background: linear-gradient(90deg, rgba(227,218,208,.45) 1px, transparent 1px) 0 0 / 54px 54px, linear-gradient(0deg, rgba(227,218,208,.45) 1px, transparent 1px) 0 0 / 54px 54px, #fffdfa; }
body.ly-pantry .m-hb-spread { background: linear-gradient(180deg, #fff3df, #fff8f3); }
body.ly-pantry .m-hb-care { background: linear-gradient(180deg, #eef7f8, #fff8f3); }
body.ly-pantry .m-hbnote { padding: 12px 16px; border-radius: 14px; background: #fff; border-left: 4px solid #3cc3d1; }
body.ly-pantry .pcard { border-radius: 18px; border-color: #f3d6cc; } body.ly-pantry .pcard .shot { background: radial-gradient(70% 70% at 50% 35%, #fff, #fff1ea); }
body.ly-pantry #compare .tablewrap { border-radius: 18px; overflow: auto; background: #fff; box-shadow: 0 12px 30px rgba(29,43,51,.06); }
body.ly-pantry #compare table.spec thead th { background: #1d2b33; color: #fff; }
body.ly-pantry #compare td .btn { padding: 10px 16px; font-size: 13.5px; white-space: nowrap; color: #fff; background: #c8372b; border-color: #c8372b; }
@media (max-width: 760px) { body.ly-pantry #compare table.spec { min-width: 680px; } }
body.ly-pantry .m-hbghf { border-radius: 18px; } body.ly-pantry .m-hbghim { background: radial-gradient(70% 90% at 50% 40%, #fff, #ffe6dc); }
body.ly-pantry #faq details.faq { border-radius: 14px; border-left: 4px solid #e2463a; }
body.ly-pantry .m-hbme { border-radius: 26px; background: radial-gradient(60% 120% at 100% 0, rgba(226,70,58,.32), transparent 60%), radial-gradient(circle, rgba(255,255,255,.06) 0 1.5px, transparent 2px) 0 0 / 16px 16px, linear-gradient(135deg, #1d2b33, #24414c); }
body.ly-pantry .m-hbme .m-hbkick { color: #ffb3a8; } body.ly-pantry .m-hbmel li { border-top-color: rgba(60,195,209,.45); }
body.ly-pantry .m-hbghall a { color: #a62b21; }
body.ly-pantry .m-cta .m-band { border-radius: 26px; background: radial-gradient(circle, rgba(255,255,255,.08) 0 2px, transparent 2.5px) 0 0 / 20px 20px, radial-gradient(40% 90% at 88% 0%, rgba(60,195,209,.32), transparent 70%), linear-gradient(120deg, #1d2b33, #7a2a24 60%, #c8372b); }
body.ly-pantry .m-page-hero { background: radial-gradient(40% 90% at 86% 0%, rgba(226,70,58,.32), transparent 70%), linear-gradient(120deg, #1d2b33, #24414c); } body.ly-pantry .m-page-hero .eyebrow { color: #ffb3a8; }
body.ly-pantry .m-page-hero .btn.m-btn-main { background: #fff; color: #a62b21; } body.ly-pantry .m-page-hero .btn.m-btn-main:hover { background: #ffe6dc; color: #1d2b33; }
body.ly-pantry footer.site { background: #1d2b33; color: #e6eef0; border: 0; } body.ly-pantry footer.site nav a { color: #ffb3a8; } body.ly-pantry footer.site .note { color: #c3cfd4; }
@media (min-width: 901px) and (max-width: 1240px) { body.ly-pantry header.site nav { flex-wrap: nowrap; gap: 0; } body.ly-pantry header.site nav a { white-space: nowrap; padding: 9px 7px; font-size: 13px; } }
@media (min-width: 901px) and (max-width: 1440px) { html[lang^="es"] body.ly-pantry header.site nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; gap: 0; } html[lang^="es"] body.ly-pantry header.site nav a { white-space: nowrap; padding: 9px 6px; font-size: 12.8px; } }