/* Nova Mobile Menu — frontend */
:root{
	--novamm-accent:#e10600;
	--novamm-width:92vw;
	--novamm-ease:cubic-bezier(.32,.72,.24,1);
	--novamm-font-heading:inherit;
	--novamm-font-label:inherit;
	--novamm-bg:#fff;
	--novamm-fg:#111;
	--novamm-line:rgba(0,0,0,.1);
	--novamm-soft:rgba(0,0,0,.05);
	--novamm-cols:2;
	--novamm-image-ratio:4/3;
	--novamm-video-ratio:4/3;
	--novamm-video-maxh:320px;
	--novamm-grad-from:#e10600;
	--novamm-grad-to:#ff7a45;
	--novamm-grad-from-dark:#ff3b30;
	--novamm-grad-to-dark:#ffb454;
	--novamm-grad-angle:135deg;
	--novamm-btn-size:46px;
	--novamm-btn-offset:14px;
	--novamm-radius:6px;
	--novamm-gradient: linear-gradient(var(--novamm-grad-angle), var(--novamm-grad-from), var(--novamm-grad-to));
}
.novamm-root[data-theme=dark]{
	--novamm-bg:#101113;--novamm-fg:#f4f4f5;--novamm-line:rgba(255,255,255,.12);--novamm-soft:rgba(255,255,255,.06);
	--novamm-grad-from:var(--novamm-grad-from-dark);--novamm-grad-to:var(--novamm-grad-to-dark);
}
@media(prefers-color-scheme:dark){
	.novamm-root[data-theme=auto]{
		--novamm-bg:#101113;--novamm-fg:#f4f4f5;--novamm-line:rgba(255,255,255,.12);--novamm-soft:rgba(255,255,255,.06);
		--novamm-grad-from:var(--novamm-grad-from-dark);--novamm-grad-to:var(--novamm-grad-to-dark);
	}
}

/* ==========================================================
   Open / Close button — shared base + style variants
   ========================================================== */
.novamm-trigger{
	position:relative;
	width:var(--novamm-btn-size);height:var(--novamm-btn-size);
	border:0;cursor:pointer;font-family:var(--novamm-font-label);
	display:inline-flex;align-items:center;justify-content:center;gap:6px;
	transition:transform .18s var(--novamm-ease),box-shadow .2s ease;
}
.novamm-trigger--fixed{position:fixed;top:var(--novamm-btn-offset);z-index:99998;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.novamm-trigger--fixed[data-position=right]{right:var(--novamm-btn-offset)}
.novamm-trigger--fixed[data-position=left]{left:var(--novamm-btn-offset)}
.novamm-trigger:active{transform:scale(.9)}

/* shape */
.novamm-shape--circle{border-radius:50%}
.novamm-shape--rounded{border-radius:14px}
.novamm-shape--pill{border-radius:999px}
.novamm-trigger--label.novamm-shape--circle{border-radius:999px}

/* color mode */
.novamm-color--solid{background:var(--novamm-accent);color:#fff}
.novamm-color--gradient{background:var(--novamm-gradient);color:#fff;background-size:160% 160%;transition:background-position .5s ease,transform .18s var(--novamm-ease)}
.novamm-color--gradient:hover{background-position:100% 50%}
.novamm-color--outline{background:transparent;color:var(--novamm-fg);border:2px solid var(--novamm-accent)}

/* bars style */
.novamm-trigger--bars span,.novamm-trigger--label .novamm-bars span,.novamm-trigger--ghost span{
	display:block;width:44%;height:2px;background:currentColor;border-radius:2px;
	transition:transform .3s var(--novamm-ease),opacity .2s ease,width .3s var(--novamm-ease);
}
.novamm-trigger--bars{flex-direction:column}
.novamm-trigger--bars span:nth-child(1){transform:translateY(-4px)}
.novamm-trigger--bars span:nth-child(3){transform:translateY(4px)}
.novamm-trigger--bars[aria-expanded=true] span:nth-child(1){transform:translateY(0) rotate(45deg)}
.novamm-trigger--bars[aria-expanded=true] span:nth-child(2){opacity:0;width:0}
.novamm-trigger--bars[aria-expanded=true] span:nth-child(3){transform:translateY(0) rotate(-45deg)}

/* dots style */
.novamm-trigger--dots{gap:5px}
.novamm-trigger--dots span{width:6px;height:6px;border-radius:50%;background:currentColor;transition:transform .35s var(--novamm-ease),opacity .2s}
.novamm-trigger--dots[aria-expanded=true] span:nth-child(1){transform:translate(7px,0) rotate(45deg) scaleX(2.2)}
.novamm-trigger--dots[aria-expanded=true] span:nth-child(2){opacity:0;transform:scale(0)}
.novamm-trigger--dots[aria-expanded=true] span:nth-child(3){transform:translate(-7px,0) rotate(-45deg) scaleX(2.2)}

/* ring style */
.novamm-trigger--ring{padding:0}
.novamm-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.novamm-ring circle{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:107;stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--novamm-ease)}
.novamm-trigger--ring[aria-expanded=true] .novamm-ring circle{stroke-dashoffset:107}
.novamm-ring-x{position:relative;width:16px;height:16px}
.novamm-ring-x span{position:absolute;left:50%;top:50%;width:16px;height:2px;background:currentColor;border-radius:2px;opacity:0;transition:opacity .2s ease,transform .3s var(--novamm-ease)}
.novamm-ring-x span:first-child{transform:translate(-50%,-50%) rotate(45deg) scale(.4)}
.novamm-ring-x span:last-child{transform:translate(-50%,-50%) rotate(-45deg) scale(.4)}
.novamm-trigger--ring[aria-expanded=true] .novamm-ring-x span{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1)}
.novamm-trigger--ring[aria-expanded=true] .novamm-ring-x span:last-child{transform:translate(-50%,-50%) rotate(-45deg) scale(1)}

/* label style */
.novamm-trigger--label{width:auto;padding:0 16px 0 12px}
.novamm-trigger--label .novamm-bars{display:flex;flex-direction:column;gap:4px;width:16px}
.novamm-trigger--label .novamm-bars span{width:100%}
.novamm-trigger--label em{font-style:normal;font-weight:700;font-size:13px;letter-spacing:.02em}
.novamm-trigger--label[aria-expanded=true] .novamm-bars span:first-child{transform:translateY(3px) rotate(45deg)}
.novamm-trigger--label[aria-expanded=true] .novamm-bars span:last-child{transform:translateY(-3px) rotate(-45deg)}

/* ghost style (2 crossing lines, always visible as X-capable minimal icon) */
.novamm-trigger--ghost{flex-direction:column;justify-content:center}
.novamm-trigger--ghost span{position:absolute;width:50%;height:2px}
.novamm-trigger--ghost span:first-child{transform:rotate(0deg)}
.novamm-trigger--ghost span:last-child{transform:rotate(90deg)}
.novamm-trigger--ghost[aria-expanded=true] span:first-child{transform:rotate(45deg)}
.novamm-trigger--ghost[aria-expanded=true] span:last-child{transform:rotate(-45deg)}

/* close button reuses the same classes inside the panel header */
.novamm-close-btn{position:static;box-shadow:none}

.novamm-trigger--inline{position:static;box-shadow:none}

/* ==========================================================
   Root / backdrop / panel
   ========================================================== */
.novamm-root{position:fixed;inset:0;z-index:99999}
.novamm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .3s ease}
.novamm-root.is-open .novamm-backdrop{opacity:1}

.novamm-panel{position:absolute;top:0;bottom:0;width:min(var(--novamm-width),480px);background:var(--novamm-bg);color:var(--novamm-fg);font-family:var(--novamm-font-label);display:flex;flex-direction:column;box-shadow:0 0 40px rgba(0,0,0,.25);transition:transform .38s var(--novamm-ease);will-change:transform}
.novamm-root[data-side=right] .novamm-panel{right:0;transform:translateX(105%)}
.novamm-root[data-side=left]  .novamm-panel{left:0;transform:translateX(-105%)}
.novamm-root.is-open .novamm-panel{transform:translateX(0)}

.novamm-head{display:flex;justify-content:flex-end;padding:14px 16px}

/* Body / sections */
.novamm-body-wrap{position:relative;flex:1;display:flex;min-height:0}
.novamm-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 20px 24px;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}
.novamm-body::-webkit-scrollbar{width:0;height:0;display:none}

/* Custom overlay scroll indicator: invisible at rest, fades in only while
   actively scrolling — thinner and quieter than any native scrollbar, and
   themeable with the same accent used everywhere else in the panel. */
.novamm-scrollbar{position:absolute;top:8px;bottom:8px;right:3px;width:3px;pointer-events:none;z-index:2}
.novamm-scrollbar-thumb{position:absolute;left:0;width:100%;border-radius:999px;background:var(--novamm-gradient);opacity:0;transition:opacity .35s ease;will-change:transform,height}
.novamm-scrollbar.is-active .novamm-scrollbar-thumb{opacity:.55}
.novamm-section{border-bottom:1px solid var(--novamm-line)}
.novamm-sec-heading{margin:0}
.novamm-sec-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:20px 2px;border:0;background:none;color:var(--novamm-fg);font-family:var(--novamm-font-heading);font-size:20px;font-weight:600;text-align:left;cursor:pointer}
.novamm-sec-toggle:active{background:var(--novamm-soft)}
.novamm-plus{position:relative;width:18px;height:18px;flex:none;transition:transform .3s var(--novamm-ease)}
.novamm-plus::before,.novamm-plus::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;transition:transform .3s var(--novamm-ease)}
.novamm-plus::before{width:18px;height:2px;transform:translate(-50%,-50%)}
.novamm-plus::after{width:2px;height:18px;transform:translate(-50%,-50%)}
.novamm-sec-toggle[aria-expanded=true] .novamm-plus{transform:rotate(45deg)}

/* Staggered headline reveal — section titles rise in with a slight delay
   per section as the panel opens, instead of just appearing instantly.
   The root toggles .novamm-headlines-in once, shortly after is-open. */
.novamm-sec-toggle span:first-child{display:inline-block;transition:opacity .5s var(--novamm-ease),transform .5s var(--novamm-ease)}
.novamm-root:not(.novamm-headlines-in) .novamm-sec-toggle span:first-child{opacity:0;transform:translateY(10px)}
.novamm-root.novamm-headlines-in .novamm-section:nth-child(1) .novamm-sec-toggle span:first-child{transition-delay:.08s}
.novamm-root.novamm-headlines-in .novamm-section:nth-child(2) .novamm-sec-toggle span:first-child{transition-delay:.15s}
.novamm-root.novamm-headlines-in .novamm-section:nth-child(3) .novamm-sec-toggle span:first-child{transition-delay:.22s}
.novamm-root.novamm-headlines-in .novamm-section:nth-child(4) .novamm-sec-toggle span:first-child{transition-delay:.29s}
.novamm-root.novamm-headlines-in .novamm-section:nth-child(n+5) .novamm-sec-toggle span:first-child{transition-delay:.36s}

.novamm-sec-panel{overflow:hidden;height:0;transition:height .35s var(--novamm-ease)}
.novamm-sec-panel[hidden]{display:block}

/* ==========================================================
   Item grid — 1 or 2 columns, global or per-section
   ========================================================== */
.novamm-grid{list-style:none;margin:0;padding:6px 0 24px;display:grid;grid-template-columns:repeat(var(--novamm-cols),1fr);gap:26px 18px}

/* Full-width feed layout: one item per row, media stretches near edge-to-edge —
   use this when you want a hero-style photo or video to dominate the panel */
.novamm-grid--feed{grid-template-columns:1fr;gap:22px;margin:0 -14px;padding:6px 0 24px}
.novamm-item--feed{padding:0 14px}
.novamm-item--feed .novamm-media{aspect-ratio:var(--novamm-image-ratio,16/10);max-height:min(60vh,520px);margin-bottom:12px}
.novamm-item--feed .novamm-video{max-height:min(60vh,520px)}
.novamm-item--feed .novamm-label{font-size:var(--novamm-label-size,18px)}

/* Text + media mix: a thumbnail beside real wrapping text — for entries like
   "About Us" or a feature callout that need a photo plus a full sentence or
   two, not just a short tag under a centered product shot. Generous spacing
   throughout — this layout is meant to breathe, not feel like a dense list. */
.novamm-grid--split{display:flex;flex-direction:column;gap:0;padding:8px 0 22px}
.novamm-item--split{border-bottom:1px solid var(--novamm-line)}
.novamm-item--split:first-child{border-top:1px solid var(--novamm-line)}
.novamm-item--split a{
	display:flex;align-items:center;gap:20px;padding:24px 4px;text-align:left;
}
.novamm-item--split .novamm-media{
	width:104px;flex:none;aspect-ratio:1/1;margin-bottom:0;
}
.novamm-item--split .novamm-img{object-fit:cover}
.novamm-item--split .novamm-link-text{display:flex;flex-direction:column;gap:7px;min-width:0}
.novamm-item--split .novamm-label{
	font-family:var(--novamm-font-heading);font-size:var(--novamm-label-size,21px);font-weight:600;
	line-height:1.2;
}
.novamm-item--split .novamm-sub{display:block;margin-top:0;white-space:normal;line-height:1.55;opacity:.7}
.novamm-item--split .novamm-sub--chip{display:inline-block;white-space:nowrap}
.novamm-item--split .novamm-badge--inline{margin-top:2px}

/* Text-only links layout: no media at all — for entries like "About Us", "Models",
   "Careers" that are pure navigation. Big, confident type and generous row
   height — this should read like a headline list, not a dense menu. */
.novamm-grid--links{display:flex;flex-direction:column;gap:0;padding:6px 0 22px}
.novamm-item--links{border-bottom:1px solid var(--novamm-line)}
.novamm-item--links:first-child{border-top:1px solid var(--novamm-line)}
.novamm-item--links a{
	display:flex;align-items:center;justify-content:space-between;gap:18px;
	padding:26px 4px;text-align:left;
}
.novamm-item--links .novamm-link-text{display:flex;flex-direction:column;gap:5px;min-width:0}
.novamm-item--links .novamm-label{
	font-family:var(--novamm-font-heading);font-size:var(--novamm-label-size,34px);font-weight:600;
	line-height:1.1;letter-spacing:-.01em;position:relative;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.novamm-item--links .novamm-label::after{
	content:"";position:absolute;left:1px;bottom:-5px;height:2px;width:calc(100% - 2px);
	background:var(--novamm-gradient);transform:scaleX(0);transform-origin:left;
	transition:transform .4s var(--novamm-ease);
}
.novamm-sub--inline{display:block;margin:0;padding:0;background:none;font-style:normal;font-size:14px;opacity:.6;text-transform:none;letter-spacing:normal;border-radius:0}
.novamm-badge--inline{position:static;flex:none}
.novamm-link-arrow{flex:none;width:12px;height:12px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.5;transition:transform .25s var(--novamm-ease),opacity .2s ease}
.novamm-item--links a:active .novamm-link-arrow{transform:rotate(45deg) translateX(3px)}
@media (hover:hover) and (pointer:fine){
	.novamm-item--links a:hover .novamm-link-arrow{transform:rotate(45deg) translateX(3px);opacity:1}
	.novamm-item--links a:hover .novamm-label{color:var(--novamm-grad-from)}
	.novamm-item--links a:hover .novamm-label::after{transform:scaleX(1)}
}

.novamm-item a{display:block;text-decoration:none;color:inherit;text-align:var(--novamm-title-align,center);-webkit-tap-highlight-color:transparent;transition:transform .18s var(--novamm-ease)}
.novamm-item a:active{transform:scale(.98)}
.novamm-item a:active .novamm-media{transform:scale(.96);filter:brightness(.9)}
.novamm-media{transition:transform .18s var(--novamm-ease),filter .18s ease}
.novamm-img,.novamm-video{transition:transform .3s var(--novamm-ease),filter .3s ease}
.novamm-label{transition:color .2s ease}

/* Liquid grayscale-to-color reveal — a black & white duplicate sits on top of
   the real (color) photo. On a mouse/trackpad it's hover-driven: the color
   opens smoothly from wherever the cursor enters and closes from wherever it
   leaves. On touch (no hover) it's driven by press/release instead.
   JS sets --novamm-tap-x/--novamm-tap-y and toggles the class. */
.novamm-img-mono{
	position:absolute;inset:0;filter:grayscale(1) contrast(1.03);pointer-events:none;
	clip-path:circle(150% at 50% 50%);
	transition:clip-path .85s cubic-bezier(.19,.68,.14,1.0);
}
.novamm-media.is-color-reveal .novamm-img-mono{
	clip-path:circle(0% at var(--novamm-tap-x,50%) var(--novamm-tap-y,50%));
	transition:clip-path .7s cubic-bezier(.19,.68,.14,1.0);
}

/* Hover polish — scoped to devices that actually have hover (mouse/trackpad), so
   nothing gets "stuck on" after a tap on touchscreens */
@media (hover:hover) and (pointer:fine){
	.novamm-item a:hover .novamm-img,
	.novamm-item a:hover .novamm-video{transform:scale(1.05)}
	.novamm-item a:hover .novamm-label{color:var(--novamm-grad-from)}
	.novamm-item a:hover .novamm-badge--quiet{background:rgba(0,0,0,.5)}
	.novamm-sec-toggle{border-radius:8px;transition:background-color .2s ease}
	.novamm-sec-toggle:hover{background:var(--novamm-soft)}
	.novamm-trigger:hover{transform:scale(1.06);box-shadow:0 6px 20px rgba(0,0,0,.25)}
	.novamm-close-btn:hover{transform:scale(1.08)}
	.novamm-cta:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
	.novamm-embed:hover .novamm-play{transform:translate(-50%,-50%) scale(1.1)}
	.novamm-play{transition:transform .25s var(--novamm-ease)}
}

/* Keyboard focus — visible ring in the accent color, invisible for mouse/touch clicks */
.novamm-item a:focus-visible,
.novamm-sec-toggle:focus-visible,
.novamm-trigger:focus-visible,
.novamm-cta:focus-visible,
.novamm-embed:focus-visible{outline:2px solid var(--novamm-grad-from);outline-offset:2px;border-radius:4px}

.novamm-media{position:relative;display:block;aspect-ratio:var(--novamm-image-ratio);margin-bottom:10px;border-radius:var(--novamm-radius);overflow:hidden;background:var(--novamm-soft)}

/* Soft light pulse on tap release — a brief warm glow that washes over the
   image and fades, distinct from the press-in dim above (which happens on
   contact). Triggered by a JS-added class so it plays once per tap. */
.novamm-media::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.4),transparent 65%);opacity:0;pointer-events:none}
.novamm-media.novamm-tap-glow::after{animation:novamm-tap-pulse .6s ease-out}
@keyframes novamm-tap-pulse{0%{opacity:.55}100%{opacity:0}}
.novamm-img{width:100%;height:100%;object-fit:contain;display:block;border-radius:var(--novamm-radius)}

/* Skeleton shimmer shown while an image hasn't finished loading */
.novamm-img:not(.is-loaded){opacity:0}
.novamm-media:has(.novamm-img:not(.is-loaded))::before{
	content:"";position:absolute;inset:0;
	background:linear-gradient(100deg,var(--novamm-soft) 30%,rgba(255,255,255,.35) 50%,var(--novamm-soft) 70%);
	background-size:200% 100%;animation:novamm-shimmer 1.4s ease-in-out infinite;
}
@keyframes novamm-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Blur-unfold: images sharpen in as the section opens (toggle: data-reveal on root).
   Kept subtle on purpose — a strong blur held even briefly (e.g. a slow connection,
   or a screenshot caught mid-transition) reads as "broken image", not "elegant". */
.novamm-root[data-reveal="1"] .novamm-sec-panel .novamm-img,
.novamm-root[data-reveal="1"] .novamm-sec-panel .novamm-video{
	filter:blur(3px);transform:scale(1.02);opacity:0;
	transition:filter .4s var(--novamm-ease),transform .4s var(--novamm-ease),opacity .35s ease;
}
.novamm-root[data-reveal="1"] .novamm-sec-panel.is-revealed .novamm-img.is-loaded,
.novamm-root[data-reveal="1"] .novamm-sec-panel.is-revealed .novamm-video{
	filter:blur(0);transform:scale(1);opacity:1;
}
/* The mono grayscale layer needs blur + grayscale combined in the same filter
   value (filter isn't additive across separate CSS rules) so the liquid
   reveal effect survives the blur-unfold's own filter changes. */
.novamm-root[data-reveal="1"] .novamm-sec-panel .novamm-img-mono{filter:blur(3px) grayscale(1) contrast(1.03)}
.novamm-root[data-reveal="1"] .novamm-sec-panel.is-revealed .novamm-img-mono.is-loaded{filter:blur(0) grayscale(1) contrast(1.03)}
.novamm-root[data-reveal="1"] .novamm-sec-panel.is-revealed .novamm-item:nth-child(1) .novamm-img{transition-delay:.08s}
.novamm-root[data-reveal="1"] .novamm-sec-panel.is-revealed .novamm-item:nth-child(2) .novamm-img{transition-delay:.15s}
.novamm-root[data-reveal="1"] .novamm-sec-panel.is-revealed .novamm-item:nth-child(3) .novamm-img{transition-delay:.22s}
.novamm-root[data-reveal="1"] .novamm-sec-panel.is-revealed .novamm-item:nth-child(4) .novamm-img{transition-delay:.29s}
.novamm-root[data-reveal="1"] .novamm-sec-panel.is-revealed .novamm-item:nth-child(5) .novamm-img{transition-delay:.36s}
.novamm-root[data-reveal="1"] .novamm-sec-panel.is-revealed .novamm-item:nth-child(n+6) .novamm-img{transition-delay:.4s}

/* Video: uses its own configurable aspect ratio + height cap, independent of image grid cells */
.novamm-video{
	width:100%;
	aspect-ratio:var(--novamm-video-ratio);
	max-height:var(--novamm-video-maxh);
	object-fit:cover;
	display:block;border-radius:8px;background:var(--novamm-soft);
}
.novamm-media:has(.novamm-video){aspect-ratio:var(--novamm-video-ratio);max-height:var(--novamm-video-maxh)}

.novamm-label{display:block;font-family:var(--novamm-font-label);font-weight:700;font-size:var(--novamm-label-size,16px);letter-spacing:.01em}

/* Subtitle — three styles. Chip (default, filled pill) suits a short tag like
   "45 km/h". Plain and Outline suit a longer tagline that would look cramped
   or oddly-shaped as a wrapped pill. */
.novamm-sub{display:inline-block;margin-top:6px;font-size:var(--novamm-sub-size,11px);max-width:100%}
.novamm-sub--chip{padding:3px 10px;background:var(--novamm-fg);color:var(--novamm-bg);font-weight:600;border-radius:3px;font-style:italic}
.novamm-sub--plain{padding:0;background:none;color:var(--novamm-fg);opacity:.65;font-weight:400;font-style:normal;line-height:1.4}
.novamm-sub--outline{padding:3px 10px;background:none;border:1px solid var(--novamm-line);color:var(--novamm-fg);opacity:.8;font-weight:500;border-radius:3px;font-style:normal}

/* Spec metadata line — tiny uppercase, wide-tracked, dot-separated technical
   detail under an item ("330 CV · 240 KM/H · 0-100: 5.3 SEC"). Deliberately
   quiet: it is reference information, not a selling line. */
.novamm-spec{display:block;margin-top:5px;font-size:10px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;opacity:.5;line-height:1.5}

/* Stat block — bold number + tiny caption, up to 3 across a row. Distinct
   from .novamm-spec: this is meant to draw the eye, not sit quietly. */
.novamm-stats{display:flex;gap:18px;margin-top:9px}
.novamm-stat{display:flex;flex-direction:column;align-items:flex-start}
.novamm-stat-value{font-family:var(--novamm-font-heading);font-size:24px;font-weight:700;line-height:1}
.novamm-stat-label{font-size:10px;font-weight:400;opacity:.6;margin-top:3px}
.novamm-item--links .novamm-stats,.novamm-item--split .novamm-stats{margin-top:10px}
.novamm-item:not(.novamm-item--links):not(.novamm-item--split) .novamm-stats{justify-content:var(--novamm-title-align,center)}

/* Active/hover marked by a thin rule under the label instead of a colour change.
   More restrained — the type stays neutral and only the rule moves. */
.novamm-root[data-active-style="underline"] .novamm-item a:hover .novamm-label,
.novamm-root[data-active-style="underline"] .novamm-sec-toggle:hover,
.novamm-root[data-active-style="underline"] .novamm-sec-toggle.is-tab-active{color:var(--novamm-fg)!important;filter:none!important}
.novamm-root[data-active-style="underline"] .novamm-item .novamm-label{position:relative;display:inline-block}
/* Timing matches the measured Maserati mega-menu spec exactly: nav-level
   underlines are fast and linear (0.12s / 0.1s), not eased — interaction
   feedback should feel instant, while content changes (below) stay slow
   and eased. That split, not any single value, is what reads as "considered". */
.novamm-root[data-active-style="underline"] .novamm-item .novamm-label::after{
	content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
	transform:scaleX(0);transform-origin:left;transition:transform .12s linear;
}
.novamm-root[data-active-style="underline"] .novamm-item a:hover .novamm-label::after{transform:scaleX(1)}
.novamm-root[data-active-style="underline"] .novamm-sec-toggle{position:relative}
.novamm-root[data-active-style="underline"] .novamm-sec-toggle::after{
	content:"";position:absolute;left:0;bottom:6px;height:1px;width:100%;max-width:calc(100% - 24px);background:currentColor;
	transform:scaleX(0);transform-origin:left;transition:transform .1s linear;
}
.novamm-root[data-active-style="underline"] .novamm-sec-toggle:hover::after,
.novamm-root[data-active-style="underline"] .novamm-sec-toggle.is-tab-active::after{transform:scaleX(1)}

/* Accent reserved for the CTA only — everything else stays monochrome. One
   colour, used once, reads more expensive than accent applied everywhere. */
.novamm-root[data-accent-scope="cta"] .novamm-badge--gradient{background:var(--novamm-fg);color:var(--novamm-bg)}
.novamm-root[data-accent-scope="cta"] .novamm-item a:hover .novamm-label{color:var(--novamm-fg)}
.novamm-root[data-accent-scope="cta"] .novamm-item--links .novamm-label::after{background:currentColor}
.novamm-root[data-accent-scope="cta"] .novamm-scrollbar-thumb{background:var(--novamm-fg)}
.novamm-root[data-accent-scope="cta"] .novamm-play{background:var(--novamm-fg)}

/* Badge — gradient by default, solid override when a badge color is set */
.novamm-badge{position:absolute;top:6px;right:2px;color:#fff;font-size:10px;font-weight:700;letter-spacing:.02em;padding:4px 8px;border-radius:3px;font-style:italic}
.novamm-badge--gradient{background:var(--novamm-gradient)}

/* Quiet badge: a small translucent tag with no solid fill, for editorial/luxury
   templates where a colored pill reads as too loud against the photo. The subtle
   scrim (matched to the panel's own background) keeps it legible over any image. */
.novamm-badge--quiet{
	background:rgba(0,0,0,.35);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
	padding:3px 7px;border-radius:3px;font-style:normal;font-weight:500;
	color:#fff;text-transform:uppercase;letter-spacing:.08em;font-size:10px;
}

/* Embed (YouTube/Vimeo) */
.novamm-embed{position:relative;width:100%;height:100%;border:0;border-radius:8px;background:var(--novamm-soft) center/cover no-repeat;cursor:pointer}
.novamm-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--novamm-gradient)}
.novamm-play::after{content:"";position:absolute;left:56%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff}
.novamm-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:8px}

/* Staggered reveal */
.novamm-sec-panel .novamm-item{opacity:0;transform:translateY(14px)}
.novamm-sec-panel.is-revealed .novamm-item{opacity:1;transform:none;transition:opacity .4s ease,transform .45s var(--novamm-ease)}
.novamm-sec-panel.is-revealed .novamm-item:nth-child(1){transition-delay:.04s}
.novamm-sec-panel.is-revealed .novamm-item:nth-child(2){transition-delay:.09s}
.novamm-sec-panel.is-revealed .novamm-item:nth-child(3){transition-delay:.14s}
.novamm-sec-panel.is-revealed .novamm-item:nth-child(4){transition-delay:.19s}
.novamm-sec-panel.is-revealed .novamm-item:nth-child(5){transition-delay:.24s}
.novamm-sec-panel.is-revealed .novamm-item:nth-child(n+6){transition-delay:.28s}

/* Footer CTA — gradient accent */
.novamm-foot{padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--novamm-line);background:var(--novamm-bg)}
.novamm-cta{display:block;text-align:center;padding:14px;border-radius:10px;background:var(--novamm-gradient);background-size:160% 160%;color:#fff;font-weight:700;text-decoration:none;transition:transform .18s var(--novamm-ease),background-position .4s ease}
.novamm-cta:active{transform:scale(.97)}
.novamm-cta:hover{background-position:100% 50%}

/* Body lock */
body.novamm-locked{overflow:hidden}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
	.novamm-panel,.novamm-backdrop,.novamm-sec-panel,.novamm-plus,.novamm-plus::before,.novamm-plus::after,
	.novamm-item a,.novamm-trigger,.novamm-trigger span,.novamm-ring circle,.novamm-ring-x span,.novamm-cta,
	.novamm-img,.novamm-video,.novamm-media,.novamm-label,.novamm-close-btn,.novamm-sec-toggle,.novamm-play{transition:none!important}
	.novamm-sec-panel .novamm-item{opacity:1;transform:none;transition:none!important}
	.novamm-root[data-reveal="1"] .novamm-img,.novamm-root[data-reveal="1"] .novamm-video{filter:none!important;transform:none!important;opacity:1!important}
	.novamm-media::before{animation:none!important}
	.novamm-media.novamm-tap-glow::after{animation:none!important}
	.novamm-img-mono{display:none!important} /* skip the reveal motion entirely — just show the real color photo */
	.novamm-sec-toggle span:first-child,.novamm-item--links .novamm-label::after{transition:none!important}
	.novamm-root:not(.novamm-headlines-in) .novamm-sec-toggle span:first-child{opacity:1!important;transform:none!important}
	.novamm-root[data-active-style="underline"] .novamm-item .novamm-label::after,
	.novamm-root[data-active-style="underline"] .novamm-sec-toggle::after,
	.novamm-cascade-img,.novamm-cascade-stage{transition:none!important}
}

/* Fallback for browsers without :has() — video keeps its own ratio via the element itself,
   grid cell just won't pre-size around it (no layout break, minor CLS only on very old browsers) */