/*
 * RUADE — mobile-v4.css (v5)
 * Small-screen refinements that must win the cascade over any legacy rules.
 */

html,
body {
	max-width: 100%;
	overflow-x:clip;
}

.rr-home img,
.rr-footer img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 900px) {
	.rr-home { min-height: 100svh; }
	.rr-btn,
	.ruade-site-header a,
	.ruade-site-header summary {
		min-height:48px;
	}
	.rr-hero::before { background:linear-gradient(180deg,#fff,#eef6f2); }
	.rr-partner-hero { min-height:470px; }
	.rr-hero-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
	.rr-hero-readout { order: 2; }
	.rr-caps { grid-template-columns: repeat(2, 1fr); }
	.rr-prod-shell { grid-template-columns: 1fr; }
	.rr-prod-aside { position: static !important; }
	.rr-index { grid-template-columns: repeat(2, 1fr); }
	.rr-industries { grid-template-columns: repeat(2, 1fr); }
	.rr-process { grid-template-columns: repeat(3, 1fr); }
	.rr-process .rr-step { border-inline-start: 0; border-top: 2px solid var(--rr-border); padding-inline: 0; padding-inline-end: 16px; }
	.rr-process .rr-step:first-child { border-top-color: var(--rr-cta); }
	.rr-rfq { grid-template-columns: 1fr; }
	.rr-foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.rr-partner-hero { min-height:420px; }
	.rr-partner-main { width:88%; height:250px; top:76px; }
	.rr-partner-tools { width:60%; height:165px; }
	.rr-partner-rotary { width:44%; height:145px; }
	.rr-caps { grid-template-columns: 1fr; }
	.rr-index { grid-template-columns: 1fr; }
	.rr-industries { grid-template-columns: 1fr; }
	.rr-process { grid-template-columns: 1fr; }
	.rr-foot { grid-template-columns: 1fr; }
	.rr-section-head { grid-template-columns: 1fr; }
}

/* Full-width, viewport-safe mobile navigation. */
@media (max-width: 900px) {
	.ruade-header-shell { overflow: visible; }
	.ruade-site-header {
		position: relative;
		inline-size: 100%;
		box-sizing: border-box;
	}
	.ruade-site-header .mobile-nav {
		position: static !important;
		margin-inline-start: auto;
	}
	.ruade-site-header .mobile-nav summary {
		position: relative;
		z-index: 1002;
		min-width: 96px;
		justify-content: center;
		color: #152549;
		background: #fff;
		border-color: #88aa9d;
	}
	.ruade-site-header .mobile-nav summary i,
	.ruade-site-header .mobile-nav summary i::before,
	.ruade-site-header .mobile-nav summary i::after {
		display: block;
		inline-size: 18px;
		block-size: 2px;
		border-radius: 99px;
		background: #0b6b50;
		transition: transform .2s ease, opacity .2s ease;
	}
	.ruade-site-header .mobile-nav summary i { position: relative; }
	.ruade-site-header .mobile-nav summary i::before,
	.ruade-site-header .mobile-nav summary i::after {
		content: "";
		position: absolute;
		inset-inline-start: 0;
	}
	.ruade-site-header .mobile-nav summary i::before { transform: translateY(-6px); }
	.ruade-site-header .mobile-nav summary i::after { transform: translateY(6px); }
	.ruade-site-header .mobile-nav[open] summary i { background: transparent; }
	.ruade-site-header .mobile-nav[open] summary i::before { transform: rotate(45deg); }
	.ruade-site-header .mobile-nav[open] summary i::after { transform: rotate(-45deg); }
	.ruade-site-header .mobile-nav[open] > nav {
		position: absolute;
		z-index: 1001;
		inset-inline: 0;
		top: calc(100% + 1px);
		box-sizing: border-box;
		inline-size: 100%;
		max-height: calc(100dvh - 82px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 12px;
		background: rgba(255,255,255,.99);
		border: 1px solid #d5e3dc;
		border-radius: 0 0 16px 16px;
		box-shadow: 0 24px 50px rgba(21,37,73,.2);
	}
	.ruade-site-header .mobile-nav[open] > nav ul { gap: 3px; }
	.ruade-site-header .mobile-nav[open] > nav a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 10px 14px;
		color: #152549;
		background: transparent;
		border-radius: 9px;
		font-size: 16px;
		font-weight: 600;
	}
	.ruade-site-header .mobile-nav[open] > nav a:hover,
	.ruade-site-header .mobile-nav[open] > nav a:focus-visible {
		color: #0b5a45;
		background: #edf7f2;
	}
	.ruade-site-header .mobile-nav[open] > nav .is-rfq a {
		justify-content: center;
		margin-top: 5px;
		color: #fff !important;
	}
	.ruade-site-header .mobile-nav[open] > nav .language-switch a {
		justify-content: center;
		border: 1px solid #88aa9d;
		color: #0b5a45;
	}
}
@media (max-width: 420px) {
	.ruade-site-header .ruade-brand img { height: 48px; max-width: 145px; }
	.ruade-site-header .mobile-nav summary { min-width: 82px; padding-inline: 10px; }
}