/* ==========================================================================
   Mobile / tablet menu -- premium stage (loaded last; overrides mobile-nav.css
   and mobile-touch.css). Same markup, links, accordions, swipe-to-close and
   focus handling (js/main.js); only the look and motion change:
     - full-screen stage that opens as a circle growing out of the menu
       button (js/mobile-nav-premium.js sets the origin);
     - follows the site theme: light stage in light mode, dark in dark mode,
       both with drifting green/teal glows;
     - large numbered items rising in one after another;
     - sub-links cascading in when a section opens;
     - footer: appearance card with a sun/moon switch, Contact pill with an
       arrow button, square social tiles beside it.
   ========================================================================== */
@media (max-width: 1200px) {
	html body #mobileDrawer {
		/* light theme */
		--mn-bg: #f4f8f6;
		--mn-glow-a: rgba(0, 194, 168, .30);
		--mn-glow-b: rgba(38, 208, 124, .30);
		--mn-text: #0a1712;
		--mn-sub: #33453c;
		--mn-muted: #5b6b63;
		--mn-accent: #0a9a5a;
		--mn-hi: #0a8f55;
		--mn-grad: linear-gradient(90deg, #0a1712, #0a9a5a);
		--mn-line: rgba(10, 23, 18, .08);
		--mn-glass: rgba(255, 255, 255, .75);
		--mn-glass-line: rgba(10, 23, 18, .09);
		--mn-glass-shadow: 0 10px 30px -18px rgba(10, 40, 26, .35);
		--mn-tile: linear-gradient(135deg, rgba(38, 208, 124, .16), rgba(0, 194, 168, .08));
		--mn-tile-line: rgba(10, 154, 90, .22);
		--mn-fade: rgba(244, 248, 246, .92);
		--mn-press: rgba(38, 208, 124, .12);
		--mn-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333453c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
		--color-text: var(--mn-text);
		--color-text-muted: var(--mn-muted);
		--color-border: var(--mn-line);
		--color-bg-rgb: 244, 248, 246;
		--rcn-ox: calc(100% - 38px);
		--rcn-oy: 40px;
		inset: 0;
		width: 100vw;
		max-width: none !important;
		height: 100dvh;
		border: 0;
		border-radius: 0;
		color: var(--mn-text);
		background:
			radial-gradient(120% 60% at 100% 0%, var(--mn-glow-a), transparent 60%),
			radial-gradient(90% 55% at 0% 100%, var(--mn-glow-b), transparent 60%),
			var(--mn-bg);
		box-shadow: none;
		opacity: 1;
		visibility: hidden;
		transform: none;
		clip-path: circle(0px at var(--rcn-ox) var(--rcn-oy));
		transition: clip-path 0.7s cubic-bezier(0.77, 0, 0.18, 1), visibility 0s linear 0.7s;
		padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
	}
	html[data-theme="dark"] body #mobileDrawer {
		--mn-bg: #050807;
		--mn-glow-a: rgba(0, 194, 168, .20);
		--mn-glow-b: rgba(38, 208, 124, .22);
		--mn-text: #f4f8f6;
		--mn-sub: #c9d6d0;
		--mn-muted: #93a39c;
		--mn-accent: #26d07c;
		--mn-hi: #8ff5c2;
		--mn-grad: linear-gradient(90deg, #fff, #8ff5c2);
		--mn-line: rgba(255, 255, 255, .07);
		--mn-glass: rgba(255, 255, 255, .06);
		--mn-glass-line: rgba(255, 255, 255, .12);
		--mn-glass-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8);
		--mn-tile: linear-gradient(135deg, rgba(38, 208, 124, .16), rgba(0, 194, 168, .06));
		--mn-tile-line: rgba(38, 208, 124, .22);
		--mn-fade: rgba(5, 8, 7, .88);
		--mn-press: rgba(38, 208, 124, .1);
		--mn-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfe1d8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
		--color-bg-rgb: 5, 8, 7;
	}
	html body #mobileDrawer.open {
		visibility: visible;
		clip-path: circle(150vmax at var(--rcn-ox) var(--rcn-oy));
		transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.18, 1), visibility 0s, background .4s ease;
	}
	html body #mobileDrawer.is-dragging { transition: none; }
	html body .drawer-overlay { display: none; }

	/* drifting glows (the old hairline and inner border are not needed) */
	html body #mobileDrawer::before,
	html body #mobileDrawer::after {
		content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
		width: 70vmin; height: 70vmin; inset: auto; border: 0; box-shadow: none; opacity: .55;
		filter: blur(50px);
	}
	html body #mobileDrawer::before { top: -18vmin; right: -22vmin; background: radial-gradient(circle, var(--mn-glow-a), transparent 65%); animation: rcn-mn-drift 14s ease-in-out infinite alternate; }
	html body #mobileDrawer::after { bottom: -20vmin; left: -24vmin; background: radial-gradient(circle, var(--mn-glow-b), transparent 65%); animation: rcn-mn-drift 17s ease-in-out infinite alternate-reverse; }
	@keyframes rcn-mn-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-8vmin, 10vmin) scale(1.15); } }
	html body #mobileDrawer > * { position: relative; z-index: 1; }

	/* top bar: theme logo, glass close button */
	html body #mobileDrawer .drawer-top { border-bottom: 0; background: none; padding: 18px 22px 8px; min-height: 76px; }
	html body #mobileDrawer .rcn-logo-ink { display: block !important; }
	html body #mobileDrawer .rcn-logo-light { display: none !important; }
	html[data-theme="dark"] body #mobileDrawer .rcn-logo-ink { display: none !important; }
	html[data-theme="dark"] body #mobileDrawer .rcn-logo-light { display: block !important; }
	html body #mobileDrawer .drawer-logo img { height: 40px; width: auto; }
	html body #mobileDrawer .drawer-close {
		width: 48px !important; height: 48px !important; border-radius: 50%;
		color: var(--mn-text); background: var(--mn-glass); border: 1px solid var(--mn-glass-line);
		-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--mn-glass-shadow);
		transform: rotate(-90deg) scale(.6); opacity: 0;
		transition: transform .6s cubic-bezier(.16, 1, .3, 1) .25s, opacity .4s ease .25s, background .2s;
	}
	html body #mobileDrawer.open .drawer-close { transform: none; opacity: 1; }
	html body #mobileDrawer .drawer-close:active { transform: rotate(90deg) scale(.92); background: rgba(38, 208, 124, .18); }
	html body #mobileDrawer .drawer-close svg { width: 20px; height: 20px; }

	/* the list: big numbered rows */
	html body #mobileDrawer .drawer-links { counter-reset: rcn-mn; padding: 10px 22px 12px; gap: 0; }
	html body #mobileDrawer .drawer-links > .accordion {
		counter-increment: rcn-mn; background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0;
		border-bottom: 1px solid var(--mn-line);
		opacity: 0; transform: translateY(26px); filter: blur(6px);
		transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1), filter .6s ease;
		animation: none !important;
	}
	html body #mobileDrawer.open .drawer-links > .accordion { opacity: 1; transform: none; filter: none; }
	html body #mobileDrawer.open .drawer-links > .accordion:nth-child(1) { transition-delay: .30s; }
	html body #mobileDrawer.open .drawer-links > .accordion:nth-child(2) { transition-delay: .37s; }
	html body #mobileDrawer.open .drawer-links > .accordion:nth-child(3) { transition-delay: .44s; }
	html body #mobileDrawer.open .drawer-links > .accordion:nth-child(4) { transition-delay: .51s; }
	html body #mobileDrawer.open .drawer-links > .accordion:nth-child(5) { transition-delay: .58s; }
	html body #mobileDrawer.open .drawer-links > .accordion:nth-child(6) { transition-delay: .65s; }
	html body #mobileDrawer .accordion::before, html body #mobileDrawer .accordion::after { display: none; }

	html body #mobileDrawer .accordion-trigger { position: relative; min-height: 74px; padding: 14px 0 !important; gap: 14px; background: none !important; color: var(--mn-text); }
	html body #mobileDrawer .accordion-trigger-label { display: flex; align-items: center; gap: 14px; font-size: 22px !important; font-weight: 600; letter-spacing: -.02em; color: var(--mn-text); transition: color .25s, transform .35s cubic-bezier(.16, 1, .3, 1); }
	html body #mobileDrawer .accordion-trigger-label::before {
		content: counter(rcn-mn, decimal-leading-zero); order: -2; min-width: 22px;
		font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--mn-accent); opacity: .9;
	}
	html body #mobileDrawer .accordion-icon {
		width: 42px; height: 42px; border-radius: 13px; flex: none; display: grid; place-items: center;
		color: var(--mn-accent); background: var(--mn-tile); border: 1px solid var(--mn-tile-line);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); transition: transform .4s cubic-bezier(.16, 1, .3, 1), background .3s, color .3s;
	}
	html body #mobileDrawer .accordion-icon svg { width: 20px; height: 20px; }
	html body #mobileDrawer .accordion-trigger:active .accordion-trigger-label { transform: translateX(4px); }
	html body #mobileDrawer .accordion-trigger:active .accordion-icon,
	html body #mobileDrawer .accordion-trigger[aria-expanded="true"] .accordion-icon { color: #04110b; background: linear-gradient(135deg, #26d07c, #00c2a8); border-color: transparent; transform: rotate(-6deg) scale(1.05); box-shadow: 0 10px 24px -10px rgba(38, 208, 124, .8); }
	html body #mobileDrawer .accordion-trigger[aria-expanded="true"] .accordion-trigger-label { background: var(--mn-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
	html body #mobileDrawer .accordion-chevron { width: 34px; height: 34px; padding: 9px; border-radius: 50%; color: var(--mn-sub); background: var(--mn-glass); border: 1px solid var(--mn-glass-line); transition: transform .45s cubic-bezier(.16, 1, .3, 1), background .3s, color .3s; }
	html body #mobileDrawer .accordion-trigger[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); color: #04110b; background: #26d07c; border-color: transparent; }
	/* plain links (no sub-menu) get a small arrow instead of a chevron */
	html body #mobileDrawer a.accordion-trigger::after {
		content: ""; margin-left: auto; width: 34px; height: 34px; flex: none; border-radius: 50%;
		background: var(--mn-arrow) center / 15px no-repeat, var(--mn-glass);
		border: 1px solid var(--mn-glass-line); transition: transform .35s cubic-bezier(.16, 1, .3, 1), background-color .3s;
	}
	html body #mobileDrawer a.accordion-trigger:active::after { transform: rotate(45deg); background: var(--mn-arrow) center / 15px no-repeat, rgba(38, 208, 124, .3); }
	html body #mobileDrawer .accordion-trigger[aria-current="page"] .accordion-trigger-label, html body #mobileDrawer .accordion.is-current > .accordion-trigger .accordion-trigger-label { color: var(--mn-hi); }

	/* sub-links: cascade in when the section opens */
	html body #mobileDrawer .accordion-body-inner { padding: 0 0 0 56px; }
	html body #mobileDrawer .accordion-trigger[aria-expanded="true"] + .accordion-body .accordion-body-inner { padding-bottom: 18px; }
	html body #mobileDrawer .drawer-sector-group { margin: 6px 0 10px; padding: 0; border: 0; background: none; }
	html body #mobileDrawer .drawer-sector-title { min-height: 36px; font-size: 11px !important; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mn-accent) !important; }
	html body #mobileDrawer .drawer-link {
		min-height: 42px; font-size: 15.5px !important; font-weight: 500; color: var(--mn-sub) !important; border-radius: 10px; padding: 8px 10px 8px 14px !important; margin-left: -14px;
		opacity: 0; transform: translateX(-10px); transition: opacity .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1), color .2s, background .2s !important;
	}
	html body #mobileDrawer .drawer-link::before { display: none !important; }
	html body #mobileDrawer .accordion-trigger[aria-expanded="true"] + .accordion-body .drawer-link { opacity: 1; transform: none; }
	html body #mobileDrawer .accordion-trigger[aria-expanded="true"] + .accordion-body .drawer-link:nth-child(2) { transition-delay: .06s !important; }
	html body #mobileDrawer .accordion-trigger[aria-expanded="true"] + .accordion-body .drawer-link:nth-child(3) { transition-delay: .10s !important; }
	html body #mobileDrawer .accordion-trigger[aria-expanded="true"] + .accordion-body .drawer-link:nth-child(4) { transition-delay: .14s !important; }
	html body #mobileDrawer .accordion-trigger[aria-expanded="true"] + .accordion-body .drawer-link:nth-child(5) { transition-delay: .18s !important; }
	html body #mobileDrawer .accordion-trigger[aria-expanded="true"] + .accordion-body .drawer-link:nth-child(6) { transition-delay: .22s !important; }
	html body #mobileDrawer .accordion-trigger[aria-expanded="true"] + .accordion-body .drawer-link:nth-child(7) { transition-delay: .26s !important; }
	html body #mobileDrawer .accordion-trigger[aria-expanded="true"] + .accordion-body .drawer-link:nth-child(n+8) { transition-delay: .30s !important; }
	html body #mobileDrawer .drawer-link:active, html body #mobileDrawer .drawer-link:hover { color: var(--mn-text) !important; background: var(--mn-press); }
	html body #mobileDrawer .drawer-link[aria-current="page"] { color: var(--mn-hi) !important; background: var(--mn-press); }

	/* footer: appearance card on top, then Contact pill + social tiles */
	html body #mobileDrawer .drawer-footer {
		display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: stretch;
		background: linear-gradient(180deg, transparent, var(--mn-fade) 28%); border-top: 0; box-shadow: none;
		-webkit-backdrop-filter: none; backdrop-filter: none;
		padding: 18px 22px calc(18px + env(safe-area-inset-bottom, 0px));
		opacity: 0; transform: translateY(30px); transition: opacity .6s ease .62s, transform .7s cubic-bezier(.16, 1, .3, 1) .62s; animation: none !important;
	}
	html body #mobileDrawer.open .drawer-footer { opacity: 1; transform: none; }

	/* appearance card: icon tile, label + On/Off, sun/moon switch */
	html body #mobileDrawer .drawer-theme-row {
		grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px 10px 10px;
		background: var(--mn-glass); border: 1px solid var(--mn-glass-line); border-radius: 20px; box-shadow: var(--mn-glass-shadow);
		-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	}
	html body #mobileDrawer .drawer-theme-row::before {
		content: ""; flex: none; width: 42px; height: 42px; border-radius: 13px;
		background: center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e08a12' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M6.3 17.7l-1.4 1.4M19.1 4.9l-1.4 1.4'/%3E%3C/svg%3E"), linear-gradient(135deg, #fff4dc, #ffe2b0);
		box-shadow: inset 0 0 0 1px rgba(224, 138, 18, .2);
		transition: background .4s ease;
	}
	html[data-theme="dark"] body #mobileDrawer .drawer-theme-row::before {
		background: center / 19px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ff5c2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E"), linear-gradient(135deg, rgba(38, 208, 124, .2), rgba(0, 194, 168, .08));
		box-shadow: inset 0 0 0 1px rgba(38, 208, 124, .25);
	}
	html body #mobileDrawer .drawer-theme-row span { display: flex; flex-direction: column; gap: 2px; margin-right: auto; color: var(--mn-text) !important; font-size: 15px !important; font-weight: 600; line-height: 1.2; }
	html body #mobileDrawer .drawer-theme-row span::after { content: "Off \00B7  Light theme"; font-size: 12px; font-weight: 500; color: var(--mn-muted); }
	html[data-theme="dark"] body #mobileDrawer .drawer-theme-row span::after { content: "On \00B7  Easier on the eyes"; }
	html body #mobileDrawer .drawer-theme-row .theme-toggle-btn {
		width: 64px !important; height: 36px !important; min-height: 0; flex: none;
		background: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 36'%3E%3Cpath d='M47 12.5a5.5 5.5 0 1 0 4.6 8.4 4.3 4.3 0 0 1-4.6-8.4z' fill='%235b6b63' opacity='.55'/%3E%3C/svg%3E"), #dfe7e3 !important;
		box-shadow: inset 0 1px 3px rgba(0, 0, 0, .14), inset 0 0 0 1px rgba(10, 23, 18, .06) !important;
	}
	html[data-theme="dark"] body #mobileDrawer .drawer-theme-row .theme-toggle-btn {
		background: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 36' fill='none' stroke='%2304110b' stroke-width='1.8' stroke-linecap='round' opacity='.5'%3E%3Ccircle cx='18' cy='18' r='3.2'/%3E%3Cpath d='M18 11v1.6M18 23.4V25M11 18h1.6M23.4 18H25'/%3E%3C/svg%3E"), linear-gradient(135deg, #26d07c, #00c2a8) !important;
		box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2), 0 0 18px -4px rgba(38, 208, 124, .7) !important;
	}
	html body #mobileDrawer .drawer-theme-row .theme-toggle-btn::after {
		top: 4px; left: 4px; width: 28px; height: 28px;
		background-size: 15px; box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
		transition: transform .45s cubic-bezier(.34, 1.4, .64, 1), background-color .3s ease;
	}
	html[data-theme="dark"] body #mobileDrawer .drawer-theme-row .theme-toggle-btn::after { transform: translateX(28px); background-size: 14px; }

	/* Contact: brand pill, label left, arrow in its own round button */
	html body #mobileDrawer .drawer-cta {
		position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 12px;
		min-height: 60px; padding: 6px 6px 6px 24px !important; border-radius: 999px; border: 0;
		font-size: 17px !important; font-weight: 700; letter-spacing: -.01em; color: #04110b !important;
		background: linear-gradient(100deg, #26d07c, #00c2a8);
		box-shadow: 0 16px 34px -14px rgba(38, 208, 124, .85), inset 0 1px 0 rgba(255, 255, 255, .45);
		transition: transform .2s ease, box-shadow .3s ease;
		animation: none !important;
	}
	html body #mobileDrawer .drawer-cta::before { display: none; }
	html body #mobileDrawer .drawer-cta::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -55%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); animation: rcn-mn-sheen 3.6s ease-in-out infinite 1.4s; pointer-events: none; }
	@keyframes rcn-mn-sheen { 0%, 60% { left: -55%; } 100% { left: 130%; } }
	html body #mobileDrawer .drawer-cta svg {
		flex: none; width: 48px; height: 48px; padding: 14px; border-radius: 50%;
		color: #26d07c; background: #04110b; box-shadow: 0 6px 14px -6px rgba(4, 17, 11, .7);
		transition: transform .4s cubic-bezier(.16, 1, .3, 1);
	}
	html body #mobileDrawer .drawer-cta:active { transform: scale(.97); }
	html body #mobileDrawer .drawer-cta:active svg, html body #mobileDrawer .drawer-cta:hover svg { transform: translateX(3px) rotate(-45deg); }

	/* socials: two square glass tiles beside the Contact pill */
	html body #mobileDrawer .drawer-socials { display: flex; gap: 10px; margin: 0; justify-content: flex-end; }
	html body #mobileDrawer .drawer-social-pill {
		width: 60px !important; height: 60px !important; border-radius: 20px; display: grid; place-items: center;
		color: var(--mn-text); background: var(--mn-glass); border: 1px solid var(--mn-glass-line); box-shadow: var(--mn-glass-shadow);
		-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
		transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .25s, color .25s, box-shadow .25s;
	}
	html body #mobileDrawer .drawer-social-pill svg { width: 21px; height: 21px; }
	html body #mobileDrawer .drawer-social-pill[aria-label="LinkedIn"]:active, html body #mobileDrawer .drawer-social-pill[aria-label="LinkedIn"]:hover { color: #fff; background: #0a66c2; border-color: transparent; box-shadow: 0 12px 24px -10px rgba(10, 102, 194, .8); transform: translateY(-3px); }
	html body #mobileDrawer .drawer-social-pill[aria-label="Facebook"]:active, html body #mobileDrawer .drawer-social-pill[aria-label="Facebook"]:hover { color: #fff; background: #1877f2; border-color: transparent; box-shadow: 0 12px 24px -10px rgba(24, 119, 242, .8); transform: translateY(-3px); }
}

/* very narrow phones: socials drop below the Contact pill */
@media (max-width: 359px) {
	html body #mobileDrawer .drawer-footer { grid-template-columns: 1fr; }
	html body #mobileDrawer .drawer-socials { justify-content: center; }
}

@media (max-width: 1200px) and (prefers-reduced-motion: reduce) {
	html body #mobileDrawer, html body #mobileDrawer.open { clip-path: none; transition: visibility 0s; }
	html body #mobileDrawer::before, html body #mobileDrawer::after, html body #mobileDrawer .drawer-cta::after { animation: none !important; }
	html body #mobileDrawer .drawer-links > .accordion, html body #mobileDrawer .drawer-footer, html body #mobileDrawer .drawer-close, html body #mobileDrawer .drawer-link { opacity: 1; transform: none; filter: none; transition: none; }
}