/* mkrst-arlite-2026 */
/* ============================================================
   MKRST Arlite — homepage styling
   Built from the 2026 Figma. Tokens up top; refine against proto.
   ============================================================ */

:root {
	--arl-fg: #000000;
	--arl-bg: #ffffff;
	--arl-muted: #888888;
	--arl-line: #e6e6e6;
	--arl-accent: #ff3600;          /* Arlite orange */
	--arl-accent-dark: #d92e00;
	--arl-dark: #222222;
	--arl-card: #fbfbfb;
	--arl-soft: #fafafa;

	--arl-maxw: 1554px;             /* content container cap (Figma 1728 canvas, 87px margins) */
	--arl-headw: var(--arl-maxw);   /* header, mega menu and footer share one frame: the footer's (maxw + gutter) */
	--arl-head-pad: var(--arl-gutter);
	--arl-gutter: clamp(1.25rem, 5vw, 5.4rem);
	--arl-section-y: clamp(3.5rem, 8vw, 7rem);

	--arl-radius: 999px;
	--arl-radius-card: 16px;
	--arl-section-radius: clamp(24px, 4vw, 56px);

	--arl-font: "Aeonik", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--arl-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
	font-family: var(--arl-font);
	color: var(--arl-fg);
	background: var(--arl-bg);
	-webkit-font-smoothing: antialiased;
}

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Layout primitives ----------------------------------------- */
.section { padding-block: var(--arl-section-y); }
.section__inner {
	max-width: var(--arl-maxw);
	margin-inline: auto;
	padding-inline: var(--arl-gutter);
}

.section-label {
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.5;
	color: var(--arl-fg);
	margin: 0 0 1.5rem;
}

/* Section radius + overlap (Advanced tab toggles). A radiused section gets an
   opaque background and lifts above its neighbour so it layers over it. */
.has-top-radius,
.has-bottom-radius {
	position: relative;
	z-index: 2;
	background: var(--arl-bg);
}
.has-top-radius {
	border-top-left-radius: var(--arl-section-radius);
	border-top-right-radius: var(--arl-section-radius);
	margin-top: calc(var(--arl-section-radius) * -1);
}
.has-bottom-radius {
	border-bottom-left-radius: var(--arl-section-radius);
	border-bottom-right-radius: var(--arl-section-radius);
	margin-bottom: calc(var(--arl-section-radius) * -1);
}
/* (Full-bleed image band sits on the lower layer — z-index set in its module styles.) */

/* Buttons & pills ------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
	font-family: var(--arl-font-ui);
	font-size: 0.98rem; font-weight: 600; line-height: 1;
	padding: 0.55em 1em; border-radius: var(--arl-radius);
	text-decoration: none; cursor: pointer; border: 1px solid transparent;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, top .35s cubic-bezier(.16,1,.3,1);
	position: relative; top: 0;
}
/* Hover lift uses `top` so it never fights GSAP's inline transform/translate on the same element. */
.btn:hover { top: -3px; }
.btn--primary { background: var(--arl-accent); color: #fff; }
.btn--primary:hover { background: var(--arl-accent-dark); }
.btn--dark { background: var(--arl-dark); color: #fff; font-family: var(--arl-font); font-weight: 700; font-size: 0.98rem; padding: 0.75em 1em; }
.btn--dark:hover { background: #000; }
.btn--lg { font-family: var(--arl-font); font-weight: 700; font-size: 1.125rem; padding: 0.89em 1.56em; }
.btn--text { background: transparent; color: var(--arl-fg); padding-inline: 0.25em; font-weight: 500; }
.btn--text:hover { color: var(--arl-accent); }
.btn--ghost { background: transparent; color: var(--arl-fg); border-color: var(--arl-fg); font-weight: 500; padding: 0.5em 0.98em; }
.btn--ghost:hover { background: var(--arl-fg); color: #fff; }

.btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.6rem; }

.pill-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.pill {
	display: inline-flex; align-items: center; gap: 0.45em;
	font-size: 0.8rem; line-height: 1;
	padding: 0.6em 1em; border-radius: var(--arl-radius);
	border: 1px solid var(--arl-line); color: var(--arl-fg);
	text-decoration: none; white-space: nowrap;
	transition: border-color .15s ease, background-color .15s ease;
}
.pill:hover { border-color: var(--arl-fg); }
.m-capability__note .pill { font-family: var(--arl-font-ui); font-weight: 500; font-size: 0.95rem; color: var(--arl-accent); border-color: var(--arl-accent); padding: 0.5em 0.98em; }
.pill--static { pointer-events: none; }
.pill__arrow { color: var(--arl-accent); }

/* ============================================================
   Header
   ============================================================ */
.site-header { position: relative; width: 100%; z-index: 50; padding-top: clamp(1.25rem, 3.1vw, 3.375rem); }
.site-header__inner {
	position: relative;
	max-width: var(--arl-headw); margin-inline: auto;
	padding-inline: var(--arl-head-pad);
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	min-height: 35px;
}
.arlite-logo { display: inline-flex; }
.arlite-logo svg { display: block; height: 27.5px; width: auto; }
.site-header__brand { text-decoration: none; color: var(--arl-fg); display: inline-flex; }
.site-header__actions { display: flex; align-items: center; gap: 1.38rem; }
.site-header__more {
	background: none; border: 0; padding: 0; cursor: pointer;
	font: 500 0.98rem/1 var(--arl-font); color: var(--arl-fg);
}
.site-header__more:hover { color: var(--arl-accent); }

/* "More" opens the primary menu as a card under the header. */
.site-header__nav {
	display: none; position: absolute; top: calc(100% + 0.75rem); right: var(--arl-head-pad);
	min-width: 220px; padding: 0.75rem 1.5rem; background: #fff;
	border-radius: var(--arl-radius-card); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}
.site-header.is-open .site-header__nav { display: block; }
.nav-menu { display: flex; flex-direction: column; gap: 0.2rem; list-style: none; margin: 0; padding: 0; }
.nav-menu a { display: block; padding: 0.55rem 0; text-decoration: none; color: var(--arl-fg); font-size: 1.1rem; font-weight: 500; }
.nav-menu a:hover { color: var(--arl-accent); }

/* ============================================================
   Modules
   ============================================================ */

/* Hero ------------------------------------------------------ */
.m-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.m-hero--h25  { height: 25vh; }
.m-hero--h50  { height: 50vh; }
.m-hero--h75  { height: 75vh; }
.m-hero--h100 { height: 100vh; }

/* Parallax layer — taller than the section so it can drift without gaps. */
.m-hero__media {
	position: absolute;
	left: 0;
	right: 0;
	top: -15%;
	height: 130%;
	will-change: transform;
}
.m-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (prefers-reduced-motion: reduce) {
	.m-hero__media { top: 0; height: 100%; transform: none !important; }
}

/* Bottom gradient scrim — keeps overlay text legible over the image. */
.m-hero__scrim {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 70%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
	z-index: 1;
	pointer-events: none;
}

/* Overlay heading over the image (sits above the eyebrow/pills box). */
.m-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--arl-maxw);
	margin-inline: auto;
	padding: 0 var(--arl-gutter) clamp(1.5rem, 3vw, 2.75rem);
}
.m-hero__heading {
	margin: 0;
	max-width: 20ch;
	color: #fff;
	font-weight: 500;
	font-size: clamp(2rem, 4.5vw, 3.6rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
}

/* White overlay box at the bottom of the hero, rounded top corners. */
.m-hero__overlay {
	position: relative;
	z-index: 2;
	background: var(--arl-bg);
	border-radius: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px) 0 0;
}
.m-hero__overlay-inner {
	max-width: var(--arl-maxw);
	margin-inline: auto;
	padding: clamp(1.5rem, 3vw, 2.5rem) var(--arl-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 1.5rem;
	flex-wrap: wrap;
}
.m-hero__eyebrow {
	color: var(--arl-accent);
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	font-weight: 500;
	margin: 0;
}
.m-hero__pills { justify-content: flex-end; gap: 0.65rem; }
.m-hero__pills .pill,
.service-row__tags .pill {
	font-size: 0.95rem;
	padding: 0.85em 1.4em;
}

/* Intro ----------------------------------------------------- */
.m-intro { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.m-intro__top {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1.5rem; padding-bottom: 2.5rem;
}
.m-intro__eyebrow { color: var(--arl-accent); font-size: clamp(1.05rem, 2vw, 1.4rem); font-weight: 500; margin: 0; }
.m-intro__body {
	max-width: 46ch; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.5;
	margin-bottom: 1.75rem;
}

/* Capability ------------------------------------------------ */
.m-capability { position: relative; --cap-gap: clamp(5rem, 11.5vw, 12.5rem); padding-block: var(--cap-gap); } /* same space above (to the cards) and below (to the photo) so the statement sits centred */
.m-capability__lead { max-width: 1071px; margin-inline: auto; text-align: center; }
.m-capability__heading {
	font-size: clamp(1.5rem, 2.06vw, 2.22rem); line-height: 1.2; font-weight: 400;
	margin-bottom: 2rem;
}
.m-capability__heading p { margin: 0; }
.m-capability__body { font-size: clamp(1.25rem, 2.06vw, 2.22rem); line-height: 1.2; color: var(--arl-fg); }
.m-capability__body p { margin: 0; }

/* Inline copy icons (e.g. [circuit] / [house] in the heading). */
.cap-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--arl-accent);
	vertical-align: -0.12em;
	margin: 0 0.1em;
}
.cap-icon svg { width: auto; height: 1.08em; overflow: visible; }
.cap-icon[data-icon="circuit"] { will-change: transform; }
.m-capability__note {
	display: inline-flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
	justify-content: center; margin-top: 3.2rem; color: var(--arl-fg); font-size: 1rem; font-weight: 500;
}
.m-capability__image {
	margin: 2.5rem 0 0; margin-left: auto; max-width: 320px;
}
.m-capability__image img { border-radius: var(--arl-radius-card); }

/* Services -------------------------------------------------- */
.m-services__list { list-style: none; margin: 0; padding: 0; }
.service-row {
	display: grid; grid-template-columns: 1fr auto auto; align-items: center;
	gap: 1.5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--arl-line);
}
.service-row:first-child { border-top: 1px solid var(--arl-line); }
.service-row__title {
	font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 500; letter-spacing: -0.02em;
	line-height: 1; margin: 0;
}
.service-row__tags { justify-content: flex-end; }
.service-row__cta { white-space: nowrap; }
.service-row__title a { color: inherit; text-decoration: none; }
.service-row__title a:hover { color: var(--arl-accent); }

/* Hover preview — shows the featured image of the hovered service.
   Falls back to a grey placeholder when no featured image is set. */
.arlite-hover-preview {
	position: fixed;
	z-index: 200;
	width: clamp(200px, 22vw, 300px);
	aspect-ratio: 3 / 2;
	border-radius: 14px;
	overflow: hidden;
	background: var(--arl-line) center / cover no-repeat;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, calc(-100% - 18px)) scale(0.95);
	transition: opacity 0.18s ease, transform 0.18s ease;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
}
.arlite-hover-preview.is-visible {
	opacity: 1;
	transform: translate(-50%, calc(-100% - 18px)) scale(1);
}
@media (hover: none) {
	.arlite-hover-preview { display: none; }
}

/* Image band (parallax) ------------------------------------- */
.m-image-band {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 50vh; /* default; overridden by --hXX modifier */
	overflow: hidden;
}
.m-image-band--h25  { height: 25vh; }
.m-image-band--h50  { height: 50vh; }
.m-image-band--h75  { height: 75vh; }
.m-image-band--h100 { height: 100vh; }
.m-image-band__media {
	position: absolute;
	left: 0;
	right: 0;
	top: -15%;
	height: 130%;
	will-change: transform;
}
.m-image-band__img,
.m-image-band__video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) {
	.m-image-band__media { top: 0; height: 100%; transform: none !important; }
}

/* Page fade: Figma "Frame 90" — white at the top, #fafafa from 39% down (stops scaled to the 1728px canvas). */
.site-main { background: linear-gradient(to bottom, #fff 0, #fff 43.4vw, var(--arl-soft) 119.6vw, var(--arl-soft) 100%); }

/* Shared marquee --------------------------------------------- */
.marquee { display: flex; width: max-content; animation: arl-marquee var(--marquee-speed, 60s) linear infinite; will-change: transform; }
.marquee--reverse { animation-direction: reverse; }
.marquee--slow { --marquee-speed: 90s; }
.marquee__track { display: flex; flex: none; gap: var(--marquee-gap, 27px); margin: 0; padding: 0 calc(var(--marquee-gap, 27px) / 2); list-style: none; }
@keyframes arl-marquee { to { transform: translateX(-50%); } }
.marquee:hover { animation-play-state: paused; }
.marquee--slow:hover { animation-play-state: running; } /* hero photo strip never pauses */
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } }

/* Hero (light, 2026) ------------------------------------------ */
.m-hero-light { overflow: hidden; padding-top: clamp(4rem, 8.7vw, 9.4rem); text-align: center; }
.m-hero-light__inner { width: min(100% - 2 * var(--arl-gutter), var(--arl-maxw)); margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.m-hero-light__eyebrow { margin: 0 0 clamp(1.3rem, 2.1vw, 2.3rem); font-size: clamp(0.9rem, 1.04vw, 1.1rem); }
.m-hero-light__heading { text-wrap: balance; margin: 0 0 clamp(1.2rem, 2vw, 2.2rem); font-weight: 700; font-size: clamp(2.3rem, 3.85vw, 4.15rem); line-height:  1.08; letter-spacing: -0.02em; } /* +35% on the Figma 3.53vw */
.m-hero-light__desc { margin: 0 0 clamp(2.2rem, 3.4vw, 3.8rem); font-size: clamp(1.1rem, 1.56vw, 1.7rem); line-height: 1.3; }
.rating-line { display: inline-flex; align-items: center; gap: 0.62rem; margin: clamp(2.2rem, 7.9vw, 8.5rem) 0 0; font: 400 0.94rem/1 var(--arl-font-ui); color: var(--arl-muted); }
.rating-line__stars, .review-card__stars { display: inline-flex; gap: 3px; }
.rating-line__stars img, .review-card__stars img { width: 16px; height: 16px; display: block; }
.m-hero-light__strip { margin-top: 2.9rem; --marquee-gap: 27px; }
.m-hero-light__tile { flex: none; width: clamp(280px, 28.9vw, 500px); aspect-ratio: 500 / 514; border-radius: var(--arl-radius-card); overflow: hidden; }
.m-hero-light__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Brands marquee ---------------------------------------------- */
.m-brands { padding-block: clamp(2.5rem, 3.8vw, 4.1rem) 0; overflow: hidden; --marquee-gap: 7.6px; --marquee-speed: 55s; }
.brand-cell { flex: none; display: flex; align-items: center; justify-content: center; width: 285px; height: 95px; padding: 5px 11px; border-radius: 60px; color: var(--arl-fg); }
.brand-cell__logo { display: block; max-height: 40px; max-width: 142px; width: auto; }
span.brand-cell__logo svg { display: block; width: 100%; height: auto; max-height: 40px; }
.brand-cell__name { font-weight: 700; letter-spacing: -0.01em; }

/* Approach cards ---------------------------------------------- */
.m-approach { padding-block: clamp(3.5rem, 9.6vw, 10.4rem) 0; }
.m-approach__heading { margin: 0 0 clamp(2rem, 4.7vw, 5.1rem); text-align: center; font-weight: 400; font-size: clamp(1.5rem, 2.06vw, 2.22rem); line-height: 1.2; }
.m-approach__body { max-width: 52ch; margin: 0 auto 2.5rem; text-align: center; font-size: 1.25rem; line-height: 1.4; }
.m-approach__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 27px; }
.step-card { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; min-height: 486px; padding: 45px 35px; background: #fff; border-radius: var(--arl-radius-card); }
.step-card__head { margin: 0; display: flex; gap: 20px; font-size: 1.25rem; line-height: 1.2; }
.step-card__num, .step-card__title { font-size: 1.25rem; font-weight: 400; margin: 0; }
.step-card__foot { display: block; }
.step-card__desc { margin: 0 0 1.8rem; font-size: 1.25rem; line-height: 1.2; }
.step-card__link {
	display: inline; color: var(--arl-accent); font-size: 1.25rem; line-height: 1.35; font-weight: 500; text-decoration: none;
	padding-bottom: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
	background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
	transition: background-size .55s cubic-bezier(.16,1,.3,1);
}
/* Underline wipes in from the left and out to the right */
.step-card__link:hover, .step-card__link:focus-visible { background-position: 0 100%; background-size: 100% 1px; }

/* Service showcase -------------------------------------------------- */
.m-showcase { padding-bottom: clamp(2rem, 4.4vw, 4.8rem); }
.m-showcase__wrap { max-width: var(--arl-maxw); margin-inline: auto; padding-inline: var(--arl-gutter); }
.m-showcase__photo { position: relative; height: clamp(300px, 34.3vw, 593px); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.m-showcase__photo .arl-media { inset: auto; left: 0; top: -20%; width: 100%; height: 140%; will-change: transform; } /* 20% overscan top and bottom for the parallax */
.m-showcase__photo .arl-media__el { object-position: 50% 64%; }
.m-showcase__heading { position: relative; margin: 0; color: #fff; font-weight: 400; font-size: clamp(1.5rem, 2.06vw, 2.22rem); text-align: center; }
.m-showcase__grid { list-style: none; margin: 0; padding: clamp(2rem, 4.5vw, 4.8rem) clamp(1.5rem, 6.5vw, 7rem); background: #fff; border-radius: 0 0 var(--arl-radius-card) var(--arl-radius-card); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 37px; }
.m-showcase__link { display: flex; align-items: center; gap: 24px; color: inherit; text-decoration: none; }
.m-showcase__icon { flex: none; width: 36px; height: 39px; }
.m-showcase__text { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.m-showcase__title { font-size: 1.25rem; line-height: 1.2; }
.m-showcase__desc { color: var(--arl-muted); font-size: 1rem; line-height: 1.2; }
a.m-showcase__link:hover .m-showcase__title { color: var(--arl-accent); }
.m-showcase__foot { margin: clamp(2rem, 4.4vw, 4.7rem) 0 0; text-align: center; font-size: 1rem; font-weight: 500; padding-inline: var(--arl-gutter); }

/* CTA ------------------------------------------------------------ */
.m-cta { background: linear-gradient(#fff, var(--arl-soft)); padding-block: clamp(3rem, 6vw, 6.5rem) clamp(2rem, 4vw, 4rem); }
.m-cta__inner { text-align: center; max-width: 820px; }
.m-cta__eyebrow { color: var(--arl-accent); font-size: 1.05rem; margin: 0 0 0.75rem; }
.m-cta__heading { font-size: clamp(1.5rem, 2.06vw, 2.22rem); font-weight: 400; line-height: 1.2; margin: 0 0 clamp(1.2rem, 2.4vw, 2.6rem); }
.m-cta__body { font-size: 1.25rem; margin: 0 0 clamp(1.5rem, 3vw, 3.2rem); }
.m-cta .btn-group { justify-content: center; gap: 1.6rem; }

/* Testimonials ------------------------------------------------- */
.m-testimonials { position: relative; overflow: hidden; background: var(--arl-soft); display: flex; flex-direction: column; gap: 24px; padding: clamp(1.5rem, 3vw, 3rem) 0 clamp(3rem, 6vw, 6.5rem); --marquee-gap: 24px; --marquee-speed: 90s; }
.m-testimonials::before, .m-testimonials::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(60px, 15vw, 260px); z-index: 2; pointer-events: none; }
.m-testimonials::before { left: 0; background: linear-gradient(to right, var(--arl-soft), rgba(250, 250, 250, 0)); }
.m-testimonials::after { right: 0; background: linear-gradient(to left, var(--arl-soft), rgba(250, 250, 250, 0)); }
.marquee--reviews .marquee__track { align-items: stretch; }
.marquee--reviews:nth-of-type(2) { margin-left: -170px; }
.review-card { flex: none; width: 400px; display: flex; flex-direction: column; justify-content: space-between; padding: 30px; background: var(--arl-card); border-radius: 20px; font-family: var(--arl-font-ui); }
.review-card__quote { display: flex; flex-direction: column; gap: 18px; padding-bottom: 26px; }
.review-card__quote p { margin: 0; font-size: 1.0625rem; line-height: 26px; }
.review-card__who { display: flex; align-items: center; gap: 12px; }
.review-card__avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #f2f2f2; border: 1px solid var(--arl-line); font-size: 0.8125rem; font-weight: 500; }
.review-card__id { display: flex; flex-direction: column; gap: 2px; }
.review-card__name { font-size: 0.9375rem; font-weight: 500; }
.review-card__meta { font-size: 0.8125rem; color: var(--arl-muted); }

/* ============================================================
   Footer
   ============================================================ */
/* Clips the footer's slide-up transform so it can't inflate page scroll height. */
.footer-reveal {
	--arl-foot-r: clamp(20px, 3vw, 36px);
	overflow: hidden;
	/* Tuck the footer up over the last section so the section's own background
	   (colour, image or video) shows through the rounded corners. */
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * var(--arl-foot-r));
}
.site-footer {
	background: var(--arl-dark);
	color: #fff;
	border-radius: var(--arl-foot-r) var(--arl-foot-r) 0 0;
}
.site-footer__inner { display: block; max-width: var(--arl-maxw); margin-inline: auto; padding: 3rem var(--arl-gutter); }
.site-footer__finance { margin-top: 2rem; }
.site-footer__top {
	display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem;
	padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
.site-footer__brand { color: #fff; text-decoration: none; }
.site-footer__brand .arlite-logo svg { height: 26px; }
.site-footer__phone { color: var(--arl-accent); text-decoration: none; font: 600 1.0625rem/1 var(--arl-font); letter-spacing: -0.01em; white-space: nowrap; align-self: center; margin-right: 0.5rem; }
.site-footer__phone:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.footer-menu { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.footer-menu a { color: rgba(255,255,255,.85); text-decoration: none; font-size: 0.9rem; }
.footer-menu a:hover { color: #fff; }
.site-footer__actions { display: flex; gap: 0.75rem; margin-left: auto; }

.site-footer__finance {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1.5rem; padding: 2rem 0; border-bottom: 1px solid rgba(255,255,255,.12);
}
.site-footer__finance-text { color: rgba(255,255,255,.7); font-size: 0.85rem; margin: 0; max-width: 30ch; }
.site-footer__finance-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; list-style: none; margin: 0; padding: 0; color: rgba(255,255,255,.9); font-weight: 700; }
.site-footer__finance-logo { height: 22px; width: auto; filter: brightness(0) invert(1); }
span.site-footer__finance-logo { display: flex; filter: none; color: rgba(255,255,255,.9); }
span.site-footer__finance-logo { height: auto; }
span.site-footer__finance-logo svg { display: block; width: 100%; height: auto; }

.site-footer__legal {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1rem; padding-top: 1.5rem; font-size: 0.78rem; color: rgba(255,255,255,.55);
}
.site-footer__meta { display: flex; gap: 1.25rem; margin: 0; }
.site-footer__meta a { color: inherit; text-decoration: none; }
.site-footer__meta a:hover { color: #fff; }
.site-footer__licenses { margin: 0; }

/* Light variant (Arlite Settings > Footer style) — same layout, white surface. */
.site-footer--light { background: #fff; color: var(--arl-fg); }
.site-footer--light .site-footer__brand { color: var(--arl-accent); }
.site-footer--light .site-footer__top { border-bottom-color: var(--arl-line); }
.site-footer--light .footer-menu a { color: var(--arl-fg); }
.site-footer--light .footer-menu a:hover { color: var(--arl-accent); }
.site-footer--light .site-footer__finance { border-bottom-color: var(--arl-line); }
.site-footer--light .site-footer__finance-text { color: var(--arl-fg); }
.site-footer--light .site-footer__finance-logos,
.site-footer--light span.site-footer__finance-logo { color: var(--arl-fg); }
.site-footer--light .site-footer__legal { color: var(--arl-fg); }
.site-footer--light .site-footer__meta a:hover { color: var(--arl-accent); }
.site-footer--dark .site-footer__brand { color: #fff; }
.site-footer--dark .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .4); }
.site-footer--dark .btn--ghost:hover { background: transparent; border-color: #fff; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
	.m-approach__steps { grid-template-columns: 1fr; }
	.step-card { min-height: 0; }
	.m-showcase__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.site-header__nav { right: var(--arl-gutter); left: var(--arl-gutter); }
	.review-card { width: 300px; }
	.marquee--reviews:nth-of-type(2) { margin-left: -100px; }
	.brand-cell { width: 200px; height: 72px; }
	.site-footer__actions { margin-left: 0; }
	.service-row { grid-template-columns: 1fr; align-items: start; }
	.service-row__tags { justify-content: flex-start; }
	.m-capability__image { margin-inline: auto; }
}
@media (max-width: 600px) {
	.m-showcase__grid { grid-template-columns: 1fr; gap: 2rem; }
	.m-showcase__wrap { padding-inline: 0; }
	.m-showcase__grid { border-radius: 0; }
}

.site-main { min-height: 50vh; }

/* ============================================================
   Motion layer (see assets/js/motion.js)
   Initial hidden states apply only while html.js-motion is set,
   so no-JS and reduced-motion visitors always see the full page.
   ============================================================ */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

html.js-motion .site-header__inner { opacity: 0; transform: translateY(-12px); }
html.js-motion .m-hero-light__eyebrow,
html.js-motion .m-hero-light__desc,
html.js-motion .m-hero-light .rating-line { opacity: 0; transform: translateY(12px); }
html.js-motion .m-hero-light__heading { opacity: 0; }
html.js-motion .m-hero-light .btn { opacity: 0; transform: translateY(16px) scale(.96); }
html.js-motion .m-hero-light__tile { opacity: 0; }
html.js-motion .m-approach__heading,
html.js-motion .m-capability__heading p,
html.js-motion .m-capability__body p,
html.js-motion .m-showcase__heading,
html.js-motion .m-cta__heading,
html.js-motion .m-cta__body { visibility: hidden; }
html.js-motion .step-card { opacity: 0; transform: translateY(60px); }
html.js-motion .m-showcase__item { opacity: 0; transform: translateY(24px); }

.m-hero-light__tile { position: relative; }
.m-hero-light__tile .arl-media { will-change: transform; }

/* Scroll progress */
.scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; background: var(--arl-accent); z-index: 10000; pointer-events: none; }

/* Link underline wipe */
.nav-menu a, .footer-menu a, .site-footer__meta a {
	background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
	transition: background-size .55s cubic-bezier(.16,1,.3,1), color .2s;
	padding-bottom: 2px;
}
.nav-menu a:hover, .footer-menu a:hover, .site-footer__meta a:hover { background-position: 0 100%; background-size: 100% 1px; }

/* Card hover weight (shadow only: transform belongs to GSAP) */
.step-card, .review-card { transition: box-shadow .5s cubic-bezier(.16,1,.3,1); }
.step-card:hover { box-shadow: 0 24px 60px rgba(0,0,0,.07); }


/* Keep the 2px scroll bar from drawing across open overlays */
html.has-menu .scroll-progress, html.has-modal .scroll-progress { opacity: 0; }

/* SplitText line masks clip descenders (y, g, p): give each mask room below the baseline and take it back with a negative margin. */
:is(.m-hero-light__heading, .m-approach__heading, .m-capability__heading p, .m-showcase__heading, .m-cta__heading, .m-cta__body) > div {
	padding-bottom: 0.18em; margin-bottom: -0.18em;
}

/* Gravity Forms — every form on the site gets the brand button, not GF's default blue. */
.gform_wrapper.gform-theme,
.gform_wrapper {
	--gf-ctrl-btn-bg-color-primary: var(--arl-accent);
	--gf-ctrl-btn-bg-color-hover-primary: var(--arl-accent-dark);
	--gf-ctrl-btn-border-color-primary: var(--arl-accent);
	--gf-ctrl-btn-color-primary: #fff;
	--gf-ctrl-btn-radius: 999px;
}
.gform_wrapper :is(.gform_button, input[type="submit"], button[type="submit"]) {
	background: var(--arl-accent); color: #fff; border: 0; border-radius: 999px; cursor: pointer;
	font: 600 1.0625rem/1 var(--arl-font); padding: 1em 1.8em; position: relative; top: 0;
	transition: background-color .15s ease, top .35s cubic-bezier(.16,1,.3,1);
}
.gform_wrapper :is(.gform_button, input[type="submit"], button[type="submit"]):hover { background: var(--arl-accent-dark); top: -3px; }

/* Bigger submit buttons on every Gravity Form. */
.gform_wrapper.gform_wrapper :is(.gform_button, input[type="submit"], button[type="submit"]) {
	font-size: 1.25rem !important; font-weight: 600; line-height: 1; padding: 1.15em 2.2em !important; min-height: 3.6rem;
}
.gform_wrapper.gform_wrapper :is(.gform_button, input[type="submit"], button[type="submit"]) { --gf-local-font-size: 1.25rem; --gf-local-padding-y: 0; --gf-local-padding-x: 2.2em; --gf-local-min-height: 3.6rem; }

/* Hero photo strip: drag to scrub. */
.m-hero-light__strip .marquee { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.m-hero-light__strip .marquee.is-dragging { cursor: grabbing; }
.m-hero-light__strip .marquee img { -webkit-user-drag: none; pointer-events: none; }
.marquee--reviews { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.marquee--reviews.is-dragging { cursor: grabbing; }

/* Slim, quiet scrollbars for inner scrolling panels (contents list, search results, menu panel). */
.m-legal__toc, .sup-search__list, .mega__panel {
	scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .16) transparent;
}
.m-legal__toc::-webkit-scrollbar, .sup-search__list::-webkit-scrollbar, .mega__panel::-webkit-scrollbar { width: 6px; }
.m-legal__toc::-webkit-scrollbar-track, .sup-search__list::-webkit-scrollbar-track, .mega__panel::-webkit-scrollbar-track { background: transparent; }
.m-legal__toc::-webkit-scrollbar-thumb, .sup-search__list::-webkit-scrollbar-thumb, .mega__panel::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .16); border-radius: 6px; }
.m-legal__toc::-webkit-scrollbar-thumb:hover, .sup-search__list::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .3); }
/* Contents list: no bar at all, a soft fade at the bottom shows there is more. */
.m-legal__toc { scrollbar-width: none; padding-right: 0; }
.m-legal__toc::-webkit-scrollbar { display: none; width: 0; }
@media (min-width: 901px) {
	.m-legal__toc { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent); padding-bottom: 2.5rem; }
}

/* Showcase grid: every title on one line on desktop (the longest is "Developer and Builder Partnerships"). */
@media (min-width: 1101px) {
	.m-showcase__grid { padding-inline: clamp(1.5rem, 4vw, 4.5rem); }
	.m-showcase__link { gap: clamp(14px, 1.4vw, 24px); }
	.m-showcase__title { font-size: clamp(.85rem, 1.18vw, 1.2rem); white-space: nowrap; }
}

/* arlite-media */
/* Shared media renderer (inc/media.php): image, MP4 or YouTube/Vimeo, always cover-fit. */
.arl-media { position: absolute; inset: 0; overflow: hidden; container-type: size; background: #ececec center / cover no-repeat; }
.arl-media__el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Iframes cannot object-fit: size a 16:9 box so it always covers the wrapper, then centre it. */
.arl-media__frame {
	position: absolute; top: 50%; left: 50%; border: 0; pointer-events: none;
	width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw);
	transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: reduce) {
	/* No autoplaying embeds: fall back to the poster (wrapper background) if one was set. */
	.arl-media--embed .arl-media__frame { display: none; }
}

/* arlite-mega-menu */
/* ============================================================
   Mega menu (Apple-style full-width panel)
   State is driven by mega-menu.js; GSAP animates opacity / clip-path / y.
   ============================================================ */

/* No JS: the panel is a plain list at the end of the page; More jumps to it. */
.mega { display: none; position: relative; background: var(--arl-bg); padding: 3rem var(--arl-head-pad); }
.mega__backdrop, .mega__bar, .mega__toggle { display: none; }
.mega__panel { max-width: var(--arl-headw); margin-inline: auto; }
.mega__sections, .mega__links { list-style: none; margin: 0; padding: 0; }
.mega__heading { margin: 1.5rem 0 0.5rem; font: 400 1.5rem/1.2 var(--arl-font); }
.mega__heading-link { color: var(--arl-fg); text-decoration: none; }
.mega__col { margin-bottom: 1rem; }
.mega__col-title { margin: 0 0 0.4rem; font: 500 0.8rem/1.3 var(--arl-font-ui); color: var(--arl-muted); }
.mega__col-title a { color: inherit; text-decoration: none; }
.mega__link { color: var(--arl-fg); text-decoration: none; display: inline-block; padding: 0.2rem 0; }
.mega__feature { display: block; margin-top: 1rem; color: var(--arl-fg); }
html:not(.arl-mm-js) .mega:target { display: block; }
html:not(.arl-mm-js) button.site-header__more { display: none; }
a.site-header__more { font: 500 0.98rem/1 var(--arl-font); color: var(--arl-fg); text-decoration: none; }
html:not(.arl-mm-js) .site-header__nav { display: none !important; }

/* ---------- JS enhanced ---------- */
.arl-mm-js .mega {
	display: block; position: fixed; inset: 0; z-index: 9000; padding: 0;
	background: none; pointer-events: none;
}
.arl-mm-js .mega[hidden] { display: none; }
.arl-mm-js .mega.is-open { pointer-events: auto; }
/* The old dropdown is replaced by the mega panel. */
.arl-mm-js .site-header__nav { display: none !important; }

.arl-mm-js .mega__backdrop {
	display: block; position: absolute; inset: 0; cursor: pointer;
	background: var(--arl-glass-tint, rgba(12, 12, 14, 0.34));
	-webkit-backdrop-filter: blur(var(--arl-glass-blur, 24px)) saturate(1.15);
	backdrop-filter: blur(var(--arl-glass-blur, 24px)) saturate(1.15);
	opacity: 0;
}

.arl-mm-js .mega__panel {
	position: absolute; top: 0; left: 0; right: 0; max-width: none; margin: 0;
	background: var(--arl-bg);
	border-radius: 0 0 var(--arl-radius-card) var(--arl-radius-card);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
	max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
	padding: clamp(1.25rem, 3.1vw, 3.375rem) var(--arl-sbw, 0px) clamp(2rem, 4vw, 3.75rem) 0; /* same top offset as .site-header; sbw keeps the centre where the page's was */
	clip-path: inset(0 0 100% 0);
}
.arl-mm-js .mega.is-open .mega__panel { clip-path: inset(0 0 0 0); }

.arl-mm-js .mega__bar {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	max-width: var(--arl-headw); margin-inline: auto; box-sizing: border-box; min-height: 73px; /* = .site-header__inner (41px actions row + 16px padding) */
	padding: 16px var(--arl-head-pad);
}
.mega__brand { display: inline-flex; color: var(--arl-fg); border-radius: 4px; }
.mega__close {
	display: inline-flex; align-items: center; gap: 0.6rem; background: none; border: 0; padding: 0.4rem 0;
	cursor: pointer; font: 500 0.98rem/1 var(--arl-font); color: var(--arl-fg);
}
.mega__close:hover { color: var(--arl-accent); }
.mega__close-x { position: relative; width: 14px; height: 14px; }
.mega__close-x::before, .mega__close-x::after {
	content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; background: currentColor;
}
.mega__close-x::before { transform: rotate(45deg); }
.mega__close-x::after { transform: rotate(-45deg); }

.arl-mm-js .mega__nav {
	max-width: var(--arl-headw); margin-inline: auto;
	padding: clamp(2rem, 4.5vw, 4.5rem) var(--arl-head-pad) 0;
}
.arl-mm-js .mega__sections {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: clamp(2rem, 5vw, 6rem);
	min-height: 25rem; align-content: start;
}
.arl-mm-js .mega__section { display: contents; }
.arl-mm-js .mega__heading { margin: 0; justify-self: start; font-weight: 500; font-size: clamp(1.9rem, 2.03vw, 2.19rem); line-height: 1.25; }
.arl-mm-js .mega__heading-link {
	display: inline-block; padding: 0.35rem 0; color: #a0a0a0; transition: color .35s cubic-bezier(.16, 1, .3, 1);
}
.arl-mm-js .mega__section.is-active .mega__heading-link,
.arl-mm-js .mega__heading-link:hover { color: var(--arl-fg); }

/* All details share the right column; only the active one shows. */
.arl-mm-js .mega__detail { grid-column: 2; grid-row: 1 / span 8; opacity: 0; visibility: hidden; }
.arl-mm-js .mega__section.is-active .mega__detail { opacity: 1; visibility: visible; }
.arl-mm-js .mega__detail-inner {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 3.5rem);
	align-items: start;
}
.arl-mm-js .mega__col { margin: 0; }
.mega__col-title { font-size: 0.8125rem; letter-spacing: 0.01em; margin-bottom: 0.9rem; }
.mega__col-title a:hover { color: var(--arl-fg); }

.mega__links { display: flex; flex-direction: column; gap: 0.3rem; }
.mega__link {
	font: 500 1.125rem/1.35 var(--arl-font); padding: 0.2rem 0 0.25rem;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .45s cubic-bezier(.16, 1, .3, 1), color .2s;
}
.mega__link:hover { background-size: 100% 1px; color: var(--arl-accent); }

.mega__feature {
	grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; align-items: center;
	padding: 1.25rem 1.5rem; background: var(--arl-card); border: 1px solid var(--arl-line); border-radius: var(--arl-radius-card);
	text-decoration: none; margin-top: 0;
	transition: border-color .3s, background-color .3s;
}
.mega__feature:hover { border-color: var(--arl-accent); background: #fff; }
.mega__feature-title { font: 500 1.25rem/1.25 var(--arl-font); }
.mega__feature-text { grid-column: 1; font: 400 0.9375rem/1.4 var(--arl-font-ui); color: var(--arl-muted); }
.mega__feature-arrow { grid-row: 1 / span 2; grid-column: 2; color: var(--arl-accent); font-size: 1.5rem; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.mega__feature:hover .mega__feature-arrow { transform: translateX(4px); }

/* Focus rings */
.mega a:focus-visible, .mega button:focus-visible {
	outline: 2px solid var(--arl-accent); outline-offset: 4px; border-radius: 4px;
}
.site-header__more:focus-visible { outline: 2px solid var(--arl-accent); outline-offset: 4px; border-radius: 4px; }

/* Scroll lock (scrollbar width is compensated in JS via --arl-sbw) */
html.has-menu { overflow: hidden; padding-right: var(--arl-sbw, 0px); }

/* ---------- Mobile: full-screen sheet + accordion ---------- */
@media (max-width: 860px) {
	.arl-mm-js .mega__panel { height: 100vh; height: 100dvh; max-height: none; border-radius: 0; padding: 0 var(--arl-sbw, 0px) 2rem 0; }
	.arl-mm-js .mega__bar {
		position: sticky; top: 0; z-index: 2; background: var(--arl-bg); padding-bottom: 16px;
		padding-top: calc(clamp(1.25rem, 3.1vw, 3.375rem) + 16px); box-sizing: content-box; min-height: 41px;
	}
	.mega__close { padding: 0.9rem 0 0.9rem 1rem; min-height: 44px; }
	.arl-mm-js .mega__nav { padding-top: 0.5rem; }
	.arl-mm-js .mega__sections { display: block; min-height: 0; }
	.arl-mm-js .mega__section { display: block; border-bottom: 1px solid var(--arl-line); }
	.arl-mm-js .mega__heading { display: flex; align-items: center; justify-content: space-between; font-size: 1.75rem; }
	.arl-mm-js .mega__heading-link { flex: 1; padding: 1.05rem 0; min-height: 56px; color: var(--arl-fg); }
	.arl-mm-js .mega__toggle {
		display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
		background: none; border: 0; cursor: pointer; color: var(--arl-fg); margin-right: -1rem;
	}
	.mega__toggle span {
		width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translateY(-2px); transition: transform .4s cubic-bezier(.16, 1, .3, 1);
	}
	.mega__toggle[aria-expanded="true"] span { transform: rotate(-135deg) translateY(-2px); }
	.arl-mm-js .mega__detail { grid-column: auto; grid-row: auto; display: block; height: 0; overflow: hidden; opacity: 1; visibility: hidden; }
	.arl-mm-js .mega__section.is-active .mega__detail { height: auto; visibility: visible; }
	.arl-mm-js .mega__detail-inner { grid-template-columns: 1fr; gap: 1.5rem; padding: 0.25rem 0 1.75rem; }
	.mega__link { font-size: 1.1875rem; padding: 0.55rem 0; min-height: 44px; display: flex; align-items: center; }
	.mega__links { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.mega__link, .mega__feature, .mega__feature-arrow, .mega__toggle span, .arl-mm-js .mega__heading-link { transition: none; }
}

/* arlite-modal */
/* ============================================================
   Modal dialogs (inc/modal.php, assets/js/modal.js)
   The glass recipe is shared: other overlays (mega menu) should use the same two variables.
   ============================================================ */
:root {
	--arl-glass-blur: 24px;
	--arl-glass-tint: rgba(12, 12, 14, 0.34);
}

/* Inline link with the brand underline */
.link-underline {
	color: inherit;
	text-decoration: none;
	border-bottom: 1.5px solid var(--arl-accent);
	padding-bottom: 1px;
	transition: color .2s ease;
}
.link-underline:hover,
.link-underline:focus-visible { color: var(--arl-accent); }

.arl-modal { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: clamp(0.75rem, 3vw, 2.5rem); }
.arl-modal[hidden] { display: none; }

.arl-modal__backdrop {
	position: absolute; inset: 0;
	background: var(--arl-glass-tint);
	-webkit-backdrop-filter: blur(var(--arl-glass-blur)) saturate(1.15);
	backdrop-filter: blur(var(--arl-glass-blur)) saturate(1.15);
}

.arl-modal__panel {
	position: relative; width: min(100%, 680px); max-height: min(92vh, 900px); overflow: hidden;
	display: flex; flex-direction: column; outline: none;
	background: #fff; color: var(--arl-fg);
	border-radius: 28px; padding: 14px 6px 14px 0;
	box-shadow: 0 40px 120px rgba(0, 0, 0, 0.28);
}

.arl-modal__scroll {
	overflow-y: auto; overscroll-behavior: contain;
	padding: clamp(1.1rem, 3vw, 2.4rem) clamp(1.1rem, 3.2vw, 2.6rem) clamp(1.1rem, 3vw, 2.4rem) clamp(1.35rem, 3.5vw, 2.75rem);
	scrollbar-width: thin; scrollbar-color: #d4d4d4 transparent;
}
.arl-modal__scroll::-webkit-scrollbar { width: 10px; }
.arl-modal__scroll::-webkit-scrollbar-track { background: transparent; }
.arl-modal__scroll::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 10px; border: 3px solid #fff; }
.arl-modal__scroll::-webkit-scrollbar-thumb:hover { background: #bdbdbd; }

.arl-modal__close {
	position: absolute; top: 1rem; right: 1.35rem; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%;
	background: var(--arl-soft); cursor: pointer; transition: background-color .2s ease;
}
.arl-modal__close:hover { background: #eee; }
.arl-modal__close span, .arl-modal__close span::before {
	position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: var(--arl-fg); content: "";
}
.arl-modal__close span { transform: translate(-50%, -50%) rotate(45deg); }
.arl-modal__close span::before { left: 0; top: 0; transform: rotate(90deg); }
.arl-modal__close:focus-visible, .arl-modal a:focus-visible, .arl-modal :is(input, select, textarea, button):focus-visible { outline: 2px solid var(--arl-accent); outline-offset: 2px; }

.arl-modal__head { padding-right: 3rem; margin-bottom: 1.5rem; }
.arl-modal__title { margin: 0 0 0.6rem; font-weight: 400; font-size: clamp(1.5rem, 2.06vw, 2.22rem); line-height: 1.15; }
.arl-modal__intro { margin: 0; color: var(--arl-muted); font-size: 1.0625rem; line-height: 1.35; }

/* Gravity Forms, themed to the site (GF 2.9 theme-framework variables + overrides) */
.arl-modal .gform-theme--framework, .arl-modal .gform_wrapper {
	--gf-color-primary: var(--arl-accent);
	--gf-color-primary-darker: var(--arl-accent-dark);
	--gf-color-primary-lighter: var(--arl-accent);
	--gf-radius: 12px;
	--gf-font-family-base: var(--arl-font-ui);
}
.arl-modal .gform_wrapper .gfield_label, .arl-modal .gform_wrapper legend.gfield_label { font-family: var(--arl-font); font-weight: 500; font-size: 0.9375rem; color: var(--arl-fg); }
.arl-modal .gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	width: 100%; font: 400 1rem/1.3 var(--arl-font-ui); color: var(--arl-fg);
	background: #fff; border: 1px solid var(--arl-line); border-radius: 12px; padding: 0.8em 1em; box-shadow: none;
	transition: border-color .2s ease;
}
.arl-modal .gform_wrapper :is(input, select, textarea):focus { border-color: var(--arl-accent); outline: none; }
.arl-modal .gform_wrapper textarea { min-height: 7.5rem; }
.arl-modal .gform_wrapper select {
	height: auto; min-height: 3.1em; line-height: 1.3; appearance: none; -webkit-appearance: none;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 1em center;
	padding-right: 2.5em;
}
.arl-modal .gform_wrapper .ginput_complex { gap: 0.75rem; }
.arl-modal .gform_wrapper .gform_footer { margin-top: 1.25rem; padding: 0; }
.arl-modal .gform_wrapper :is(.gform_button, input[type="submit"]) {
	background: var(--arl-accent); color: #fff; border: 0; border-radius: 999px; cursor: pointer;
	font: 600 1.0625rem/1 var(--arl-font); padding: 1em 1.8em; transition: background-color .15s ease, top .35s cubic-bezier(.16,1,.3,1);
	position: relative; top: 0;
}
.arl-modal .gform_wrapper :is(.gform_button, input[type="submit"]):hover { background: var(--arl-accent-dark); top: -3px; }
.arl-modal .gform_confirmation_message { font-size: 1.25rem; line-height: 1.3; padding: 1.5rem 0; }
.arl-modal .gform_wrapper .gfield_required { color: var(--arl-accent); }
.arl-modal .gform_wrapper .gform_validation_errors, .arl-modal .gform_wrapper .gfield_validation_message { border-radius: 12px; }

html.has-modal { overflow: hidden; }

@media (max-width: 600px) {
	.arl-modal { align-items: flex-end; padding: 0; }
	.arl-modal__panel { width: 100%; max-height: 94vh; border-radius: 24px 24px 0 0; padding: 12px 4px 0 0; }
}

/* Choice modal: compact rows in the same soft-card style as the mega menu's quick quote. */
.arl-modal--choice .arl-modal__panel { width: min(100%, 440px); }
.arl-choice { display: grid; gap: 0.6rem; padding-bottom: 0.5rem; }
.arl-choice__btn {
	display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; row-gap: 0.15rem; padding: 1rem 1.25rem;
	border: 1px solid var(--arl-line); border-radius: 16px; background: var(--arl-soft); color: var(--arl-fg); text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease;
}
.arl-choice__btn::after {
	content: ""; grid-column: 2; grid-row: 1 / span 2; width: 16px; height: 16px; background: var(--arl-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%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 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .25s ease;
}
.arl-choice__btn:hover, .arl-choice__btn:focus-visible { border-color: #cfcfcf; background: #f4f4f4; }
.arl-choice__btn:hover::after { transform: translateX(3px); }
.arl-choice__label { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.arl-choice__note { font-size: 0.875rem; color: var(--arl-muted); line-height: 1.3; }

/* "Prefer to talk? Call ..." under the booking form */
.arl-modal__call { margin: 1.25rem 0 0; text-align: center; color: var(--arl-muted); font-size: 0.9375rem; line-height: 1.35; }
.arl-modal__call a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* arlite-pages */
/* ============================================================
   MKRST Arlite — inner pages (For Home). Loads after main.css.
   ============================================================ */

/* "Explore ..." links: accent text with the wipe underline (same as .step-card__link) */
.arl-link {
	display: inline; color: var(--arl-accent); font-size: 1rem; line-height: 1.35; font-weight: 500; text-decoration: none;
	padding-bottom: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
	background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
	transition: background-size .55s cubic-bezier(.16,1,.3,1);
}
a.arl-link:hover, a.arl-link:focus-visible { background-position: 0 100%; background-size: 100% 1px; }
.arl-link--static { background: none; cursor: default; }

/* Service grid ------------------------------------------------------ */
.m-sgrid { background: linear-gradient(#fff, var(--arl-soft) 39%); padding-block: clamp(2rem, 4.4vw, 4.8rem) clamp(3rem, 7.5vw, 8rem); }
.m-sgrid__wrap { max-width: var(--arl-maxw); margin-inline: auto; padding-inline: var(--arl-gutter); }
.m-sgrid__photo { position: relative; height: clamp(260px, 34.3vw, 593px); overflow: hidden; }
.m-sgrid__photo .arl-media { inset: auto; left: 0; top: -20%; width: 100%; height: 140%; will-change: transform; } /* 20% overscan above and below for the parallax */
.m-sgrid__photo .arl-media__el { object-position: 50% 64%; }
.m-sgrid__body { display: grid; grid-template-columns: 45.7% minmax(0, 1fr); margin-top: clamp(2.5rem, 7.2vw, 7.8rem); }
.m-sgrid__statement { margin: 0; max-width: 14.75em; font-weight: 500; font-size: clamp(1.5rem, 2.06vw, 2.22rem); line-height: 1.3; }
/* Two-column layout: cap the statement in ch so it never runs up against the list (headlines.js sets an inline max-width, hence !important). */
@media (min-width: 1101px) { .m-sgrid__statement { max-width: min(26ch, 100%) !important; padding-right: 1rem; } }
.m-sgrid__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 358px)); gap: clamp(2.2rem, 2.9vw, 3.1rem) clamp(2rem, 4.1vw, 4.4rem); }
.m-sgrid__item { display: flex; flex-direction: column; align-items: flex-start; }
.m-sgrid__title { margin: 0 0 13px; font-size: 1.25rem; font-weight: 400; line-height: 1.2; }
.m-sgrid__desc { margin: 0 0 38px; color: var(--arl-muted); font-size: 1rem; line-height: 1.2; }
.m-sgrid__link { margin-top: auto; }

/* Feature cards ------------------------------------------------------ */
.m-fcards { background: #151515; color: #fff; padding-block: clamp(4rem, 7vw, 7.5rem) clamp(4rem, 7.5vw, 8.1rem); }
.m-fcards__head { display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: var(--arl-gutter); margin-bottom: clamp(3rem, 8vw, 8.6rem); }
.m-fcards__heading { margin: 0 0 clamp(1.2rem, 2.4vw, 2.5rem); max-width: 10.6em; text-wrap: balance; font-weight: 500; font-size: clamp(1.75rem, 2.06vw, 2.22rem); line-height: 1.2; }
.m-fcards__desc { margin: 0 0 clamp(1.5rem, 2.5vw, 2.7rem); max-width: 21.6em; font-size: clamp(1.05rem, 1.16vw, 1.25rem); line-height: 1.3; }
.m-fcards__grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1516px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #3e3e3e; border-left: 1px solid #3e3e3e; }
.m-fcards__cell { position: relative; min-height: clamp(460px, 35.9vw, 620px); border-right: 1px solid #3e3e3e; border-bottom: 1px solid #3e3e3e; overflow: hidden; }
.m-fcards__cell .arl-media { z-index: 0; will-change: transform; }
.m-fcards__cell.has-media:not(.is-photo)::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.15) 60%); pointer-events: none; }
.m-fcards__inner { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; min-height: inherit; height: 100%; padding: 36px 32px; box-sizing: border-box; }
.m-fcards__label { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.2; }
.m-fcards__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.m-fcards__title { margin: 0; font-size: clamp(1.6rem, 2.1vw, 2.25rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.m-fcards__cdesc { margin: 0; font-size: clamp(1rem, 1.04vw, 1.125rem); line-height: 1.5; }
.m-fcards .arl-link { font-size: 1rem; }

/* Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
	.m-sgrid__body { grid-template-columns: 1fr; gap: 3rem; }
	.m-fcards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.m-sgrid__list { grid-template-columns: 1fr; }
	.m-sgrid__desc { margin-bottom: 1rem; }
	.m-fcards__grid { grid-template-columns: 1fr; margin-inline: var(--arl-gutter); }
	.m-fcards__cell { min-height: 440px; }
	.m-fcards__cell.is-photo { min-height: 320px; }
}

/* Motion: hidden start states apply only while html.js-motion is set ---------- */
html.js-motion .m-sgrid__statement,
html.js-motion .m-fcards__heading { visibility: hidden; }
html.js-motion .m-sgrid__item { opacity: 0; transform: translateY(28px); }
html.js-motion .m-fcards__desc,
html.js-motion .m-fcards__btn { opacity: 0; transform: translateY(18px); }
html.js-motion .m-fcards__cell { opacity: 0; transform: translateY(60px); }
:is(.m-sgrid__statement, .m-fcards__heading) > div { padding-bottom: 0.18em; margin-bottom: -0.18em; }


/* arlite-chat */
/* ============================================================
   Chat assistant (inc/chat.php, assets/js/chat.js): iframe in the glass modal + floating launcher.
   ============================================================ */
.arl-modal--chat .arl-modal__panel { width: min(100%, 620px); height: min(88vh, 780px); padding: 14px 0 0; }
.arl-chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.arl-chat .arl-modal__head { margin: 0; padding: clamp(1.1rem, 3vw, 1.9rem) 4rem 0.9rem clamp(1.35rem, 3.5vw, 2.1rem); }
.arl-chat .arl-modal__title { font-size: clamp(1.35rem, 1.8vw, 1.8rem); margin-bottom: 0.3rem; }
.arl-chat .arl-modal__intro { font-size: 0.9375rem; }
.arl-chat__frame { flex: 1; min-height: 0; width: 100%; border: 0; background: transparent; border-radius: 0 0 28px 28px; }

@media (max-width: 600px) {
	.arl-modal--chat .arl-modal__panel { height: 94dvh; max-height: 94dvh; border-radius: 24px 24px 0 0; }
}

.arl-chat-launcher {
	position: fixed; right: clamp(0.9rem, 2.2vw, 1.75rem); bottom: clamp(0.9rem, 2.2vw, 1.75rem); z-index: 9000;
	display: inline-flex; align-items: center; gap: 0.55rem; height: 52px; padding: 0 1.3rem 0 1.1rem;
	border: 0; border-radius: 999px; background: var(--arl-accent); color: #fff; cursor: pointer;
	font: 600 1rem/1 var(--arl-font); box-shadow: 0 10px 30px rgba(255, 54, 0, 0.35);
	transition: background-color .15s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}
.arl-chat-launcher:hover { background: var(--arl-accent-dark); transform: translateY(-3px); }
.arl-chat-launcher:focus-visible { outline: 2px solid var(--arl-fg); outline-offset: 3px; }
html.has-modal .arl-chat-launcher { visibility: hidden; }

@media (max-width: 600px) {
	.arl-chat-launcher { width: 52px; padding: 0; justify-content: center; }
	.arl-chat-launcher span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
	.arl-chat-launcher { transition: none; }
	.arl-chat-launcher:hover { transform: none; }
}

.arl-chat-launcher { transition: background-color .15s ease, transform .35s cubic-bezier(.16, 1, .3, 1), opacity .3s ease; }
.arl-chat-launcher.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* arlite-service */
/* ============================================================
   MKRST Arlite — service pages (Tier 2). Loads after pages.css.
   ============================================================ */

/* Header over a full-bleed hero ------------------------------------------ */
.has-hero-media .site-header { position: absolute; top: 0; left: 0; right: 0; }
.has-hero-media.hero-media-light .site-header__brand,
.has-hero-media.hero-media-light .site-header__more { color: #fff; }
.has-hero-media.hero-media-light .site-header__more:hover { color: var(--arl-accent); }
.has-hero-media.hero-media-light .site-header .btn--dark { background: #fff; color: var(--arl-fg); }
.has-hero-media.hero-media-light .site-header .btn--dark:hover { background: var(--arl-accent); color: #fff; }

/* Hero on media ------------------------------------------------------------ */
.m-hero-media { position: relative; overflow: hidden; isolation: isolate; color: var(--arl-fg); background: #151515;
	min-height: clamp(620px, 55.4vw, 1000px); padding-top: clamp(8rem, 13.9vw, 15rem); padding-bottom: clamp(8rem, 13vw, 14rem); text-align: center; }
.m-hero-media--light { color: #fff; }
.m-hero-media__media { position: absolute; left: 0; top: -20%; width: 100%; height: 140%; z-index: -2; will-change: transform; } /* 20% overscan above and below for the parallax */
.m-hero-media__media .arl-media { inset: 0; }
.m-hero-media__media .arl-media__el { object-position: 50% 14%; }
.m-hero-media__scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.m-hero-media--scrim1 .m-hero-media__scrim { background: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, rgba(0,0,0,.14) 31%, rgba(0,0,0,.14) 66%, rgba(0,0,0,.6) 100%); }
.m-hero-media--scrim2 .m-hero-media__scrim { background: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.35) 40%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.7)); }
.m-hero-media--scrim3 .m-hero-media__scrim { background: rgba(0,0,0,.55); }
.m-hero-media--dark.m-hero-media--scrim1 .m-hero-media__scrim { background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,.1) 35%, rgba(255,255,255,.1) 65%, rgba(255,255,255,.55)); }
.m-hero-media__inner { width: min(100% - 2 * var(--arl-gutter), var(--arl-maxw)); margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.m-hero-media__eyebrow { margin: 0 0 clamp(1.3rem, 2.1vw, 2.3rem); font-size: clamp(0.9rem, 1.04vw, 1.1rem); max-width: 36em; }
.m-hero-media__heading { text-wrap: balance; margin: 0 0 clamp(1.8rem, 3.4vw, 3.8rem); max-width: 19em; font-weight: 700; font-size: clamp(2.3rem, 3.85vw, 4.15rem); line-height: 1.08; letter-spacing: -0.02em; }
.m-hero-media__rating { margin-top: clamp(1.8rem, 5.6vw, 6.2rem); }
.m-hero-media--light .rating-line { color: #fff; }

/* Brands row pulled up over the hero (set "Custom classes" to brands--on-hero) */
.m-brands.brands--on-hero { position: relative; z-index: 3; color: #fff; padding-block: 0; margin-top: calc(-1 * (95px + 2.4vw)); margin-bottom: 2.4vw; }
.m-brands.brands--on-hero .brand-cell { color: #fff; }
.m-brands.brands--on-hero .brand-cell__logo { filter: brightness(0) invert(1); }

/* Feature cards: wide media cell and closing block --------------------------- */
.m-fcards__lead { position: relative; overflow: hidden; width: min(1507px, 100%); height: clamp(240px, 28.2vw, 488px); margin: calc(-1 * clamp(0rem, 2vw, 2.2rem)) auto clamp(2rem, 3.5vw, 3.75rem); }
.m-fcards__lead .arl-media { will-change: transform; }
.m-fcards__lead .arl-media__el { object-position: 50% 30%; }
.m-fcards__foot { margin: clamp(4rem, 9.5vw, 10.3rem) 0 0; margin-bottom: 0; }
.m-fcards__fdesc { margin: 0 0 clamp(1.5rem, 2.5vw, 2.7rem); max-width: 21.6em; font-size: clamp(1.05rem, 1.16vw, 1.25rem); line-height: 1.3; }
.m-fcards__foot .m-fcards__heading { max-width: 12em; }
.m-fcards__grid + .m-fcards__foot { margin-top: clamp(4rem, 9.5vw, 10.3rem); }
.m-fcards__foot:last-child { padding-bottom: 0; }
@media (max-width: 600px) {
	.m-fcards__lead { width: auto; margin-inline: var(--arl-gutter); height: 220px; }
}

/* Motion: hidden start states apply only while html.js-motion is set ---------- */
html.js-motion .m-hero-media__eyebrow,
html.js-motion .m-hero-media__btn,
html.js-motion .m-hero-media__rating { opacity: 0; transform: translateY(14px); }
html.js-motion .m-hero-media__heading { visibility: hidden; }
html.js-motion .m-fcards__fdesc,
html.js-motion .m-fcards__fbtn { opacity: 0; transform: translateY(18px); }
html.js-motion .m-fcards__lead { opacity: 0; transform: translateY(40px); }
.m-hero-media__heading > div { padding-bottom: 0.18em; margin-bottom: -0.18em; }
.m-hero-media--light .m-hero-media__eyebrow,
.m-hero-media--light .m-hero-media__rating { text-shadow: 0 1px 14px rgba(0,0,0,.5); }

/* Image band: top edge fades in from the section above (Fade in: Dark / Light) */
.m-image-band--fade-dark::after,
.m-image-band--fade-light::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; z-index: 2; pointer-events: none; }
.m-image-band--fade-dark::after { background: linear-gradient(to bottom, #151515 0%, rgba(21,21,21,.85) 25%, rgba(21,21,21,.4) 65%, rgba(21,21,21,0) 100%); }
.m-image-band--fade-light::after { background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.85) 25%, rgba(255,255,255,.4) 65%, rgba(255,255,255,0) 100%); }
.m-image-band--fade-dark { background: #151515; }
.m-image-band--fade-light { background: #fff; }

/* Hero: tall variant, image focus, bottom fade ----------------------------------- */
.m-hero-media--tall { min-height: clamp(680px, 72.5vw, 1300px); }
.m-hero-media--focus-centre .m-hero-media__media .arl-media__el { object-position: 50% 50%; }
.m-hero-media--focus-bottom .m-hero-media__media .arl-media__el { object-position: 50% 100%; }
.m-hero-media--fade-dark::after,
.m-hero-media--fade-light::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; z-index: 0; pointer-events: none; }
.m-hero-media--fade-dark::after { background: linear-gradient(to top, #151515 0%, #151515 8%, rgba(21,21,21,.88) 30%, rgba(21,21,21,.5) 58%, rgba(21,21,21,.18) 80%, rgba(21,21,21,0) 100%); }
.m-hero-media--fade-light::after { background: linear-gradient(to top, #fff 0%, #fff 8%, rgba(255,255,255,.88) 30%, rgba(255,255,255,.5) 58%, rgba(255,255,255,.18) 80%, rgba(255,255,255,0) 100%); }

/* Feature cards: two columns, flush variants for stacking dark sections ---------------- */
.m-fcards--cols2 .m-fcards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-fcards--cols2 .m-fcards__cell { min-height: clamp(420px, 32.7vw, 565px); }
.m-fcards--cols2 .m-fcards__cell.is-photo { min-height: 0; }
.m-fcards.fcards--flush-top { padding-top: 0; }
.m-fcards.fcards--flush-bottom { padding-bottom: 0; }
@media (max-width: 1100px) { .m-fcards--cols2 .m-fcards__cell { min-height: 440px; } .m-fcards--cols2 .m-fcards__cell.is-photo { min-height: 320px; } }
@media (max-width: 600px) { .m-fcards--cols2 .m-fcards__grid { grid-template-columns: 1fr; } }

/* Brands on a dark band (Custom classes: brands--dark) */
.m-brands.brands--dark { background: #151515; color: #fff;  position: relative; padding-block: clamp(1.25rem, 1.9vw, 2rem) clamp(1rem, 1.4vw, 1.5rem); }
.m-brands.brands--dark .m-brands__clip { position: relative; overflow: hidden; width: min(1516px, 100%); margin-inline: auto; }
.m-brands.brands--dark .m-brands__clip::before, .m-brands.brands--dark .m-brands__clip::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8%; z-index: 2; pointer-events: none; }
.m-brands.brands--dark .m-brands__clip::before { left: 0; background: linear-gradient(to right, #151515, rgba(21,21,21,0)); }
.m-brands.brands--dark .m-brands__clip::after { right: 0; background: linear-gradient(to left, #151515, rgba(21,21,21,0)); }
@media (max-width: 600px) { .m-brands.brands--dark .m-brands__clip { width: auto; margin-inline: var(--arl-gutter); } }
.m-brands.brands--dark .brand-cell { color: #fff; }
.m-brands.brands--dark .brand-cell__logo { filter: brightness(0) invert(1); }

/* Call to action panel ------------------------------------------------------------- */
.m-panel { background: #151515; color: #fff; padding: clamp(2rem, 3.5vw, 3.7rem) var(--arl-gutter) clamp(4rem, 6.1vw, 6.6rem); }
.m-panel__box { max-width: 1516px; margin-inline: auto; background: #2a2a2a; border-radius: var(--arl-radius-card); padding: clamp(1.75rem, 2.2vw, 2.3rem) clamp(1.5rem, 3.7vw, 4rem); display: flex; align-items: center; justify-content: space-between; gap: 2rem clamp(2rem, 4vw, 5rem); }
.m-panel__text { max-width: 44em; }
.m-panel__heading { margin: 0 0 clamp(.9rem, 1.4vw, 1.5rem); font-weight: 500; font-size: clamp(1.75rem, 2.55vw, 2.75rem); line-height: 1.1; letter-spacing: -0.03em; }
.m-panel__body { margin: 0; font-size: clamp(1rem, 1.04vw, 1.125rem); line-height: 1.5; }
.m-panel__btn { flex: none; }
@media (max-width: 760px) { .m-panel__box { flex-direction: column; align-items: flex-start; } }
html.js-motion .m-panel__box { opacity: 0; transform: translateY(40px); }

/* Reviews: glass style, one row of frosted cards over the bottom of the hero above ---------- */
.m-testimonials--glass { position: relative; z-index: 3; background: linear-gradient(to bottom, transparent calc(100% - 120px), #151515 calc(100% - 14px)); color: #fff; display: block; overflow: hidden;
	margin-top: calc(-1 * (264px + 10.8vw)); padding: 0 0 6.5vw; }
.m-testimonials--glass + .m-fcards { padding-top: clamp(1.5rem, 2.5vw, 2.5rem); }
/* edge fade via a mask on the row, so nothing darkens the hero behind it */
.m-testimonials--glass::before, .m-testimonials--glass::after { content: none; }
/* No mask on the row: a mask makes the row a backdrop root, so the cards' backdrop-filter would blur nothing */
.m-testimonials--glass .review-card { background: var(--arl-glass-tint, rgba(12,12,14,.34)); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); -webkit-backdrop-filter: blur(var(--arl-glass-blur, 24px)) saturate(1.15); backdrop-filter: blur(var(--arl-glass-blur, 24px)) saturate(1.15); }
.m-testimonials--glass .review-card__meta { color: rgba(255,255,255,.55); }
.m-testimonials--glass .review-card__avatar { background: #1c1c1c; border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.75); }

/* Hero seam: a fractional hero height must not leave a hairline of page background before the next section */
.m-hero-media { margin-bottom: -1px; }

/* Feature cards: dividers only between cells, no outer left or right line ---------------- */
.m-fcards__grid { border-left: 0; }
.m-fcards__cell:nth-child(3n) { border-right: 0; }
.m-fcards--cols2 .m-fcards__cell:nth-child(3n) { border-right: 1px solid #3e3e3e; }
.m-fcards--cols2 .m-fcards__cell:nth-child(2n) { border-right: 0; }
@media (max-width: 1100px) {
	.m-fcards__cell:nth-child(3n) { border-right: 1px solid #3e3e3e; }
	.m-fcards__cell:nth-child(2n) { border-right: 0; }
}
@media (max-width: 600px) {
	.m-fcards__cell,
	.m-fcards__cell:nth-child(3n),
	.m-fcards--cols2 .m-fcards__cell:nth-child(3n) { border-right: 0; }
}

/* Feature cards: optional brand logo, small, top right of the cell */
.m-fcards__logo { position: absolute; top: 36px; right: 32px; display: block; line-height: 0; }
.m-fcards__logo svg { display: block; height: clamp(16px, 1.4vw, 24px); width: auto; max-width: 140px; }

/* Hero: compact variant for simple pages (no rating line, no logo strip) */
.m-hero-media--compact { min-height: clamp(440px, 33vw, 620px); padding-top: clamp(7rem, 11vw, 12rem); padding-bottom: clamp(3.5rem, 5vw, 6rem); }
.m-hero-media--compact .m-hero-media__heading { margin-bottom: clamp(1.4rem, 2.4vw, 2.6rem); }

/* CTA panel: equal space above and below (Custom classes: panel--balanced) */
.m-panel.panel--balanced { padding-block: clamp(2rem, 3.5vw, 3.7rem); }

/* Content and FAQ (dark) ------------------------------------------------------------ */
.m-content { background: #151515; color: #fff; padding: clamp(3rem, 6vw, 6.5rem) var(--arl-gutter) clamp(4rem, 8vw, 8.5rem); }
.m-content__wrap { max-width: 1516px; margin-inline: auto; display: flex; flex-direction: column; gap: clamp(3rem, 6vw, 6.5rem); }
.m-content__main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.m-content__label { margin: 0 0 1rem; font-size: 1rem; line-height: 1.2; color: rgba(255,255,255,.6); }
.m-content__heading { margin: 0; font-weight: 500; font-size: clamp(1.75rem, 2.55vw, 2.75rem); line-height: 1.1; letter-spacing: -0.03em; max-width: 12em; text-wrap: balance; }
.m-content__body { font-size: clamp(1rem, 1.04vw, 1.125rem); line-height: 1.6; color: rgba(255,255,255,.84); max-width: 42em; }
.m-content__body p { margin: 0 0 1.2em; }
.m-content__body p:last-child { margin-bottom: 0; }
.m-content__body h3 { margin: 1.8em 0 .5em; font-size: 1.25rem; font-weight: 500; color: #fff; }
.m-content__body a { color: var(--arl-accent); }
.m-content__faqs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.m-content__faq-heading { margin: 0; font-weight: 500; font-size: clamp(1.4rem, 1.7vw, 1.9rem); line-height: 1.15; letter-spacing: -0.02em; }
.m-content__faq-list { border-bottom: 1px solid #3e3e3e; }
.m-content__faq { border-top: 1px solid #3e3e3e; }
.m-content__faq summary { cursor: pointer; list-style: none; position: relative; padding: 1.25rem 2.5rem 1.25rem 0; font-size: clamp(1.05rem, 1.16vw, 1.25rem); line-height: 1.3; font-weight: 500; }
.m-content__faq summary::-webkit-details-marker { display: none; }
.m-content__faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--arl-accent); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.m-content__faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.m-content__faq summary:hover { color: var(--arl-accent); }
.m-content__faq p { margin: 0; padding: 0 2.5rem 1.4rem 0; font-size: clamp(1rem, 1.04vw, 1.125rem); line-height: 1.55; color: rgba(255,255,255,.8); max-width: 44em; }
@media (max-width: 900px) { .m-content__main, .m-content__faqs { grid-template-columns: 1fr; } }

/* Form with side text ----------------------------------------------------------------- */
.m-form { background: var(--arl-soft); padding: clamp(3rem, 6vw, 6.5rem) var(--arl-gutter); scroll-margin-top: 2rem; }
.m-form__wrap { max-width: 1516px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.m-form__heading { margin: 0 0 1.2rem; font-weight: 500; font-size: clamp(1.75rem, 2.55vw, 2.75rem); line-height: 1.1; letter-spacing: -0.03em; max-width: 11em; text-wrap: balance; }
.m-form__intro { margin: 0 0 2.2rem; font-size: clamp(1rem, 1.16vw, 1.25rem); line-height: 1.4; max-width: 28em; color: #444; }
.m-form__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; counter-reset: pt; }
.m-form__points li { counter-increment: pt; display: grid; grid-template-columns: 2rem 1fr; column-gap: .75rem; }
.m-form__points li::before { content: counter(pt, decimal-leading-zero); grid-row: 1 / span 2; font-size: .9rem; color: var(--arl-accent); padding-top: .15rem; }
.m-form__pt-title { font-weight: 500; font-size: 1.125rem; line-height: 1.3; }
.m-form__pt-text { color: var(--arl-muted); font-size: 1rem; line-height: 1.4; margin-top: .25rem; }
.m-form__card { background: #fff; border: 1px solid var(--arl-line); border-radius: 24px; padding: clamp(1.5rem, 3vw, 3rem); }
.m-form .gform-theme--framework, .m-form .gform_wrapper { --gf-color-primary: var(--arl-accent); --gf-color-primary-darker: var(--arl-accent-dark); --gf-color-primary-lighter: var(--arl-accent); --gf-radius: 12px; --gf-font-family-base: var(--arl-font-ui); }
.m-form .gform_wrapper .gfield_label, .m-form .gform_wrapper legend.gfield_label { font-family: var(--arl-font); font-weight: 500; font-size: 0.9375rem; color: var(--arl-fg); }
.m-form .gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) { width: 100%; font: 400 1rem/1.3 var(--arl-font-ui); color: var(--arl-fg); background: #fff; border: 1px solid var(--arl-line); border-radius: 12px; padding: 0.8em 1em; box-shadow: none; transition: border-color .2s ease; }
.m-form .gform_wrapper :is(input, select, textarea):focus { border-color: var(--arl-accent); outline: none; }
.m-form .gform_wrapper textarea { min-height: 9rem; }
.m-form .gform_wrapper select { height: auto; min-height: 3.1em; line-height: 1.3; appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 1em center; padding-right: 2.5em; }
.m-form .gform_wrapper .ginput_complex { gap: 0.75rem; }
.m-form .gform_wrapper .gform_footer { margin-top: 1.25rem; padding: 0; }
.m-form .gform_wrapper :is(.gform_button, input[type="submit"]) { background: var(--arl-accent); color: #fff; border: 0; border-radius: 999px; cursor: pointer; font: 600 1.0625rem/1 var(--arl-font); padding: 1em 1.8em; transition: background-color .15s ease, top .35s cubic-bezier(.16,1,.3,1); position: relative; top: 0; }
.m-form .gform_wrapper :is(.gform_button, input[type="submit"]):hover { background: var(--arl-accent-dark); top: -3px; }
.m-form .gform_confirmation_message { font-size: 1.25rem; line-height: 1.3; padding: 1.5rem 0; }
.m-form .gform_wrapper .gfield_required { color: var(--arl-accent); }
@media (max-width: 900px) { .m-form__wrap { grid-template-columns: 1fr; } }
html.js-motion .m-form__side, html.js-motion .m-form__card { opacity: 0; transform: translateY(40px); }

/* T3 hero: wider, larger headline */
.service-t3 .m-hero-media__heading { max-width: 26em; font-size: clamp(2.3rem, 5.2vw, 6rem); line-height: 1.06; }
@media (max-width: 767px) { .service-t3 .m-hero-media__heading { max-width: 19em; font-size: clamp(2.3rem, 9vw, 3rem); } }

/* Content: body copy starts level with the headline, not the eyebrow */
@media (min-width: 901px) { .m-content__main:has(.m-content__label) .m-content__body { margin-top: calc(2.2rem - 0.2em); } }

/* Photo cell that spans two columns (3-column grid) */
.m-fcards__cell.is-wide { grid-column: span 2; border-right: 0; }
@media (max-width: 1100px) { .m-fcards__cell.is-wide { grid-column: auto; } }

/* Closing statement under the glass reviews: give the headline and lead room to breathe. */
.m-testimonials--glass + .m-fcards .m-fcards__heading { max-width: 20em; }
.m-testimonials--glass + .m-fcards .m-fcards__desc { max-width: 32em; }

/* Landing pages: balanced titles and leads, compact process cards ------------------------- */
.m-approach__heading, .m-sgrid__statement, .m-cta__heading, .step-card__title { text-wrap: balance; }
.m-approach__body, .m-cta__body, .step-card__desc, .m-fcards__cdesc { text-wrap: pretty; }
.m-approach.approach--compact { padding-block: clamp(3rem, 6vw, 6.5rem) 0; }
.m-approach.approach--compact .m-approach__heading { margin-bottom: clamp(0.9rem, 1.4vw, 1.4rem); }
.m-approach.approach--compact .m-approach__body { margin-bottom: clamp(2rem, 3.4vw, 3.4rem); }
.m-approach.approach--compact .step-card__desc { margin-bottom: 1.2rem; }

/* Story cards (expectation, challenge, solution): plain dark, no empty cell at two columns, compact when stacked */
@media (max-width: 1100px) and (min-width: 601px) {
	.m-fcards.fcards--story .m-fcards__cell:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
}
@media (max-width: 1100px) {
	.m-fcards.fcards--story .m-fcards__cell { min-height: 0; }
	.m-fcards.fcards--story .m-fcards__inner { gap: clamp(3rem, 8vw, 5rem); padding-block: 32px 40px; }
}
/* Landing page hero: let the headline wrap naturally on phones instead of breaking mid-line */
@media (max-width: 600px) {
	/* the glass review row overlaps the hero by 264px + 10.8vw, so lift the button and rating clear of it */
	.m-hero-media.hero--landing { padding-bottom: calc(264px + 10.8vw + 2.5rem); }
}

/* Service grid straight after the process steps: start on the page grey and end white, so the CTA (white to grey) and the footer follow without a seam */
.m-approach.approach--compact + .m-sgrid { background: linear-gradient(var(--arl-soft), #fff); }

/* Landing page hero: headline always sets on at least two balanced lines, so the block sits centred rather than high */
.m-hero-media.hero--landing .m-hero-media__heading { max-width: 14em; margin-inline: auto; text-wrap: balance; }

/* Text-only card grid (no photos): shorter cells so the grid does not tower over its copy. */
.m-fcards.fcards--text .m-fcards__cell,
.m-fcards--cols2.fcards--text .m-fcards__cell { min-height: clamp(240px, 19vw, 300px); }
@media (max-width: 1100px) { .m-fcards--cols2.fcards--text .m-fcards__cell { min-height: 240px; } }
.m-fcards.fcards--text .m-fcards__head { margin-bottom: clamp(1.5rem, 3vw, 3rem); }
.m-cta.cta--roomy { padding-block: clamp(4rem, 8vw, 9rem) clamp(4.5rem, 9vw, 10rem); }

/* Hero text rule: vertically centred in the space it really has, below the header and above any logos or
   reviews pulled up over the bottom of the hero (so it sits higher when something is under it). ---------- */
section.m-hero-media {
	--hero-head: calc(clamp(1.25rem, 3.1vw, 3.375rem) + 73px);       /* the header, which overlays the hero */
	--hero-under: 0px;                                                 /* what the next section pulls up over the hero */
	--hero-air: clamp(1rem, 2vw, 2rem);
	display: flex; flex-direction: column; justify-content: center;
	padding-top: calc(var(--hero-head) + var(--hero-air));
	padding-bottom: calc(var(--hero-under) + var(--hero-air));
}
section.m-hero-media:has(+ .m-brands.brands--on-hero) { --hero-under: calc(95px + 2.4vw); }
section.m-hero-media:has(+ .m-testimonials--glass) { --hero-under: calc(264px + 10.8vw); }
/* Landing heroes carried a phone-only padding-bottom meant for a review row that no longer overlaps them; the centring rule above decides now. */
section.m-hero-media.hero--landing { padding-bottom: calc(var(--hero-under) + var(--hero-air)); }

/* arlite-transitions */
/* Page transitions: cross-document View Transitions (inc/transitions.php, assets/js/transitions.js).
   The browser keeps the old page on screen, swaps in the new one and cross-fades only what differs, so the
   header, the chat launcher and every unchanged pixel stay still. Browsers without support navigate instantly. */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: 0.28s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
::view-transition-old(root) { animation: arl-vt-out 0.16s ease both; }
::view-transition-new(root) { animation: arl-vt-in 0.28s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes arl-vt-out { to { opacity: 0; } }
@keyframes arl-vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
}
/* Pages after the first in a visit: the header is already on screen, do not re-introduce it. */
html.arl-seen .site-header__inner { opacity: 1 !important; transform: none !important; }

/* arlite-support */
/* MKRST Arlite — Support Centre (inc/support.php, assets/js/support.js). Prefix .sup-. */

.sup-wrap { max-width: var(--arl-maxw); margin-inline: auto; padding-inline: var(--arl-gutter); }
.sup-wrap--narrow { max-width: calc(860px + 2 * var(--arl-gutter)); }
.sup-tag { font-style: normal; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--arl-accent); border: 1px solid currentColor; border-radius: 999px; padding: .1em .55em; margin-left: .35em; white-space: nowrap; }
.sup-icon { width: 36px; height: 39px; display: block; }

/* Hero + search ------------------------------------------------ */
.sup-landing .site-header { position: absolute; top: 0; left: 0; right: 0; }
.sup-hero { padding: 0; text-align: center; }
.sup-hero { position: relative; z-index: 5; }
.sup-hero__panel {
	/* Full width, running up behind the (absolutely positioned) header so the two read as one piece */
	position: relative; width: 100%;
	border-radius: 0 0 clamp(24px, 4vw, 56px) clamp(24px, 4vw, 56px);
	background:
		radial-gradient(55% 90% at 88% -10%, rgba(255,54,0,.12), transparent 65%),
		radial-gradient(45% 80% at 0 110%, rgba(0,0,0,.05), transparent 70%),
		linear-gradient(#fff, var(--arl-soft));
	padding-top: calc(clamp(1.25rem, 3.1vw, 3.375rem) + 73px + clamp(1rem, 2vw, 2rem));
	padding-bottom: clamp(3rem, 6vw, 6rem);
}
.sup-hero__panel::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .5;
	background-image: radial-gradient(rgba(0,0,0,.16) 1px, transparent 1.4px); background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(70% 90% at 50% 40%, transparent 30%, #000 100%); mask-image: radial-gradient(70% 90% at 50% 40%, transparent 30%, #000 100%);
}
.sup-hero__inner { position: relative; max-width: calc(860px + 2 * var(--arl-gutter)); margin-inline: auto; padding-inline: var(--arl-gutter); }
.sup-hero__eyebrow { margin: 0 0 clamp(1rem, 1.8vw, 1.8rem); font-size: clamp(.9rem, 1.04vw, 1.1rem); }
.sup-hero__title { margin: 0 0 1.1rem; font-weight: 700; font-size: clamp(2.3rem, 3.85vw, 4.15rem); line-height: 1.08; letter-spacing: -0.02em; padding-bottom: .12em; text-wrap: balance; white-space: nowrap; }
.sup-hero__desc { margin: 0 auto clamp(1.8rem, 3vw, 2.8rem); max-width: 34rem; font-size: clamp(1.05rem, 1.4vw, 1.4rem); line-height: 1.35; color: #333; }

.sup-search { position: relative; z-index: 10; display: flex; gap: .6rem; align-items: center; max-width: 720px; margin-inline: auto; text-align: left; }
.sup-search__field { position: relative; flex: 1 1 auto; min-width: 0; }
.sup-search__input::-webkit-search-cancel-button, .sup-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.sup-search__input {
	display: block; width: 100%; height: 3.6rem; padding: 0 1.4rem; border: 1px solid var(--arl-line); border-radius: var(--arl-radius);
	background: #fff; font: 500 1.05rem/1 var(--arl-font-ui); color: var(--arl-fg); box-shadow: 0 1px 2px rgba(0,0,0,.04);
	transition: border-color .2s ease, box-shadow .2s ease; -webkit-appearance: none; appearance: none;
}
.sup-search__input::placeholder { color: var(--arl-muted); }
.sup-search__input:focus, .sup-search__input:focus-visible { outline: none; border-radius: var(--arl-radius); border-color: var(--arl-fg); box-shadow: 0 0 0 4px rgba(255,54,0,.16); }
.sup-search__btn { height: 3.6rem; padding-inline: 1.7rem; font-size: 1.02rem; }
.sup-search__list {
	position: absolute; z-index: 20; top: calc(100% + .5rem); left: 0; right: 0; margin: 0; padding: .4rem; list-style: none;
	background: #fff; border: 1px solid var(--arl-line); border-radius: 20px; box-shadow: 0 18px 50px rgba(0,0,0,.12);
	max-height: min(60vh, 26rem); overflow-y: auto;
}
.sup-search__list[hidden] { display: none; }
.sup-search__list a { display: block; padding: .75rem 1rem; border-radius: 14px; text-decoration: none; color: var(--arl-fg); }
.sup-search__list a:hover, .sup-search__list a.is-active { background: var(--arl-soft); }
.sup-search__list .t { display: block; font-weight: 600; line-height: 1.3; }
.sup-search__list .m { display: block; margin-top: .15rem; font-size: .88rem; color: var(--arl-muted); line-height: 1.4; }
.sup-search__list .none { padding: .9rem 1rem; color: var(--arl-muted); line-height: 1.5; }
.sup-search__list .none a { display: inline; padding: 0; color: var(--arl-accent); background: none; }

/* Blocks --------------------------------------------------------- */
.sup-block { padding-block: clamp(2rem, 4vw, 4rem) clamp(1rem, 2vw, 2rem); }
.sup-block__title { margin: 0 0 1.4rem; font-weight: 500; font-size: clamp(1.45rem, 1.9vw, 2rem); letter-spacing: -0.02em; line-height: 1.2; }
.sup-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.sup-card__link {
	display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.5rem; text-decoration: none; color: var(--arl-fg);
	background: var(--arl-card); border: 1px solid var(--arl-line); border-radius: var(--arl-radius-card);
	transition: border-color .25s ease, transform .5s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.sup-card__link:hover, .sup-card__link:focus-visible { border-color: #111; transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.07); }
.sup-card__icon { display: block; height: 39px; margin-bottom: .6rem; }
.sup-card__name { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.sup-card__desc { color: #444; line-height: 1.45; font-size: .98rem; }
.sup-card__count { margin-top: auto; padding-top: .8rem; font-family: var(--arl-font-ui); font-size: .85rem; color: var(--arl-muted); }

/* Article rows (landing, category, search, related) ------------ */
.sup-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--arl-line); }
.sup-row { border-bottom: 1px solid var(--arl-line); }
.sup-row__link { position: relative; display: grid; gap: .25rem; padding: 1.15rem 2.5rem 1.15rem 0; text-decoration: none; color: var(--arl-fg); }
a.sup-row__link:hover .sup-row__title, a.sup-row__link:focus-visible .sup-row__title { color: var(--arl-accent); }
.sup-row__cat { font-family: var(--arl-font-ui); font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--arl-muted); }
.sup-row__title { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; transition: color .2s ease; }
.sup-row__sum { color: #555; line-height: 1.45; font-size: .98rem; }
.sup-row__arrow { position: absolute; right: .25rem; top: 50%; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); transition: transform .3s ease, color .2s ease; }
a.sup-row__link:hover .sup-row__arrow { transform: translateY(-50%) translateX(4px) rotate(45deg); color: var(--arl-accent); }
.sup-row--soon .sup-row__link { padding-right: 0; opacity: .6; }
.sup-block--list { padding-bottom: clamp(2rem, 5vw, 5rem); }

/* Closing CTA on landing --------------------------------------- */
.sup-cta { padding-block: clamp(3rem, 6vw, 6rem) clamp(4rem, 7vw, 7rem); text-align: center; }
.sup-cta__title { margin: 0 0 .7rem; font-weight: 400; font-size: clamp(1.5rem, 2.06vw, 2.22rem); line-height: 1.2; }
.sup-cta__text { margin: 0 0 1.8rem; font-size: 1.15rem; }
.sup-cta .btn-group { justify-content: center; }

/* Inner pages (category, article, search) ---------------------- */
.sup-page { padding-top: clamp(1.25rem, 2.5vw, 2.5rem); padding-bottom: clamp(5rem, 9vw, 9rem); }
.sup-page__title { margin: 0 0 1rem; font-weight: 700; font-size: clamp(2rem, 3.1vw, 3.4rem); line-height: 1.1; letter-spacing: -0.02em; padding-bottom: .1em; text-wrap: balance; }
.sup-page__meta { margin: 1.5rem 0 .8rem; color: var(--arl-muted); font-size: .95rem; }
.sup-page .sup-search { margin: 1.5rem 0 0; max-width: none; }
.sup-empty { margin-top: 2.5rem; padding: 2rem; background: var(--arl-card); border: 1px solid var(--arl-line); border-radius: var(--arl-radius-card); }
.sup-empty__title { margin: 0 0 .4rem; font-size: 1.25rem; font-weight: 600; }

.sup-crumbs { margin-bottom: clamp(1.2rem, 2.4vw, 2.2rem); font-family: var(--arl-font-ui); font-size: .85rem; }
.sup-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .5rem; color: var(--arl-muted); }
.sup-crumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .6; }
.sup-crumbs a { color: var(--arl-fg); text-decoration: none; }
.sup-crumbs a:hover { color: var(--arl-accent); }

.sup-layout { display: block; }
.sup-main { min-width: 0; }

/* Left nav */
.sup-nav__sum { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: .85rem 1.1rem; border: 1px solid var(--arl-line); border-radius: 14px; background: #fff; font-weight: 500; margin-bottom: .75rem; }
.sup-nav__sum::-webkit-details-marker { display: none; }
.sup-nav__sum::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s ease; }
.sup-nav__d[open] > .sup-nav__sum::after { transform: rotate(-135deg); }
.sup-nav__d { margin-bottom: 1.75rem; }
.sup-nav a { display: block; text-decoration: none; color: var(--arl-fg); line-height: 1.35; }
.sup-nav__home, .sup-nav__cat { padding: .45rem 0; font-weight: 500; font-size: .98rem; }
.sup-nav__group { margin-top: .5rem; }
.sup-nav__list { list-style: none; margin: 0 0 .5rem; padding: 0; border-left: 1px solid var(--arl-line); }
.sup-nav__list a { padding: .4rem 0 .4rem .85rem; margin-left: -1px; border-left: 2px solid transparent; font-size: .93rem; color: #444; }
.sup-nav a:hover { color: var(--arl-accent); }
.sup-nav a.is-current { color: var(--arl-accent); }
.sup-nav__list a.is-current { border-left-color: var(--arl-accent); }
.sup-nav a:focus-visible, .sup-toc a:focus-visible, .sup-row__link:focus-visible, .sup-card__link:focus-visible { outline: 2px solid var(--arl-accent); outline-offset: 3px; border-radius: 4px; }

/* Article header */
.sup-arthead__cat { display: inline-block; margin-bottom: .9rem; font-family: var(--arl-font-ui); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--arl-accent); text-decoration: none; }
.sup-arthead__meta { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .6rem 0 0; color: var(--arl-muted); font-size: .95rem; }
.sup-arthead__meta > span + span:not(.sup-tag)::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin-right: 1.2rem; vertical-align: middle; opacity: .5; }
.sup-arthead { margin-bottom: 2rem; }
.sup-cathead__icon { display: block; margin-bottom: 1rem; }
.sup-cathead__desc { margin: 0 0 2rem; max-width: 40rem; font-size: 1.15rem; line-height: 1.5; color: #333; }

/* Contents */
.sup-toc ol { list-style: none; margin: 0; padding: 0; }
.sup-toc a { display: block; text-decoration: none; color: #555; line-height: 1.35; transition: color .2s ease; }
.sup-toc a:hover, .sup-toc a.is-active { color: var(--arl-accent); }
.sup-toc__title { margin: 0 0 .75rem; font-family: var(--arl-font-ui); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--arl-muted); }
.sup-toc--inline { margin-bottom: 2rem; }
.sup-toc--inline summary { cursor: pointer; padding: .85rem 1.1rem; border: 1px solid var(--arl-line); border-radius: 14px; background: var(--arl-soft); font-weight: 600; list-style: none; }
.sup-toc--inline summary::-webkit-details-marker { display: none; }
.sup-toc--inline ol { padding: .6rem 1.1rem 0; }
.sup-toc--inline a { padding: .4rem 0; }
.sup-toc .lv3 a { padding-left: .9rem; font-size: .93rem; }
.sup-rail { display: none; }

/* Article body */
.sup-body { font-size: clamp(1.05rem, 1.1vw, 1.15rem); line-height: 1.7; }
.sup-body > :first-child { margin-top: 0; }
.sup-body h2, .sup-body .sup-h2 { margin: clamp(2.6rem, 4.5vw, 4rem) 0 .9rem; font-size: clamp(1.5rem, 2vw, 2.1rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; scroll-margin-top: 1.5rem; }
.sup-body h3 { margin: 2rem 0 .5rem; font-size: 1.2rem; font-weight: 600; line-height: 1.3; scroll-margin-top: 1.5rem; }
.sup-body p, .sup-body ul, .sup-body ol { margin: 0 0 1.15rem; }
.sup-body ul, .sup-body ol { padding-left: 1.3rem; }
.sup-body li { margin-bottom: .45rem; padding-left: .2rem; }
.sup-body li::marker { color: var(--arl-accent); }
.sup-body strong { font-weight: 600; }
.sup-body a { color: var(--arl-accent); font-weight: 500; text-decoration: none; padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; transition: background-size .55s cubic-bezier(.16,1,.3,1); }
.sup-body a:hover, .sup-body a:focus-visible { background-position: 0 100%; background-size: 100% 1px; }
.sup-figure { margin: 2rem 0; }
.sup-figure img { display: block; width: 100%; height: auto; border-radius: var(--arl-radius-card); }
.sup-figure figcaption { margin-top: .6rem; font-size: .9rem; color: var(--arl-muted); }

/* Steps */
.sup-steps__list { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.sup-steps__item { position: relative; counter-increment: step; padding: 0 0 1.5rem 3.2rem; }
.sup-steps__item::before { content: counter(step); position: absolute; left: 0; top: -.1rem; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 50%; background: var(--arl-dark); color: #fff; font: 600 .95rem/1 var(--arl-font-ui); }
.sup-steps__item:not(:last-child)::after { content: ""; position: absolute; left: 1.03rem; top: 2.2rem; bottom: .3rem; width: 1px; background: var(--arl-line); }
.sup-body .sup-steps__title { margin: 0 0 .3rem; font-size: 1.1rem; }
.sup-steps__text > :last-child { margin-bottom: 0; }

/* Safe to DIY / Call us callout */
.sup-callout { --c: #146c3a; --c-bg: #eef8f1; --c-line: #bfe3cc; display: flex; gap: .9rem; align-items: flex-start; margin: 2rem 0; padding: 1.15rem 1.3rem; background: var(--c-bg); border: 1px solid var(--c-line); border-left: 4px solid var(--c); border-radius: 14px; }
.sup-callout--call { --c: #b42318; --c-bg: #fdf0ee; --c-line: #f4c6c0; }
.sup-callout__icon { flex: none; color: var(--c); margin-top: .1rem; display: inline-flex; }
.sup-callout__body { min-width: 0; font-size: 1rem; line-height: 1.6; }
.sup-callout__body > :last-child { margin-bottom: 0; }
.sup-body .sup-callout p { margin-bottom: .6rem; }
.sup-body .sup-callout .sup-callout__title { margin-bottom: .35rem; font-weight: 600; color: var(--c); font-size: 1.05rem; }


.sup-service { margin: 2.5rem 0 0; }

/* Was this helpful */
.sup-helpful { margin-top: clamp(2.5rem, 4vw, 4rem); padding: 1.4rem 0; border-block: 1px solid var(--arl-line); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; }
.sup-helpful__q, .sup-helpful__thanks { margin: 0; font-weight: 500; }
.sup-helpful__btns { display: flex; gap: .6rem; }
.sup-helpful[hidden], .sup-helpful [hidden] { display: none; }

.sup-related { margin-top: clamp(2.5rem, 4vw, 4rem); }
.sup-related__title { margin: 0 0 1rem; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; }

/* Still stuck */
.sup-still { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; margin-top: clamp(2.5rem, 4vw, 4rem); padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--arl-dark); color: #fff; border-radius: 28px; }
.sup-still__title { margin: 0 0 .3rem; font-size: clamp(1.35rem, 1.8vw, 1.8rem); font-weight: 500; letter-spacing: -0.02em; }
.sup-still p { margin: 0; color: rgba(255,255,255,.75); }

/* Desktop columns */
@media (min-width: 900px) {
	.sup-layout--cat { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
	.sup-nav__sum { display: none; }
	.sup-side { position: static; }
	.sup-nav__d { margin-bottom: 0; }
}
@media (min-width: 1180px) {
	.sup-layout--article { display: grid; grid-template-columns: 250px minmax(0, 1fr) 220px; column-gap: clamp(2.5rem, 4vw, 4.5rem); align-items: start; }
	.sup-rail { display: block; position: sticky; top: 2rem; }
	.sup-toc--inline { display: none; }
	.sup-toc--rail ol { border-left: 1px solid var(--arl-line); }
	.sup-toc--rail a { padding: .4rem 0 .4rem .9rem; margin-left: -1px; border-left: 2px solid transparent; font-size: .92rem; }
	.sup-toc--rail .lv3 a { padding-left: 1.7rem; }
	.sup-toc--rail a.is-active { border-left-color: var(--arl-accent); }
}
@media (min-width: 900px) and (max-width: 1179px) {
	.sup-layout--article { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
}
@media (max-width: 899px) {
	.sup-search { flex-direction: column; align-items: stretch; }
	.sup-search__btn { width: 100%; }
}

/* Motion: only when the motion layer is on (class never set for reduced motion) */
html.js-motion .sup-hero__inner > *, html.js-motion .sup-arthead > *, html.js-motion .sup-cathead > * { opacity: 0; transform: translateY(14px); }
html.js-motion .sup-card, html.js-motion .sup-block__title { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
	.sup-card__link, .sup-row__title, .sup-row__arrow, .sup-body a { transition: none; }
}

/* Topic chips under the search */
.sup-chips { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.sup-chips a { display: inline-block; padding: .5em 1em; border: 1px solid var(--arl-line); border-radius: 999px; background: #fff; color: var(--arl-fg); text-decoration: none; font: 500 .92rem/1 var(--arl-font-ui); transition: border-color .2s ease, color .2s ease; }
.sup-chips a:hover, .sup-chips a:focus-visible { border-color: var(--arl-fg); color: var(--arl-accent); }

/* Article / category header panel */
.sup-arthead, .sup-cathead {
	position: relative; overflow: hidden; margin-bottom: 2rem; padding: clamp(1.4rem, 3vw, 2.4rem);
	border: 1px solid var(--arl-line); border-radius: 28px;
	background: radial-gradient(60% 120% at 100% 0, rgba(255,54,0,.09), transparent 65%), linear-gradient(#fff, var(--arl-soft));
}
.sup-arthead__cat { display: inline-flex; align-items: center; gap: .6rem; }
.sup-arthead__icon .sup-icon { width: 24px; height: 26px; }
.sup-arthead__sum { margin: 0 0 1.1rem; max-width: 42rem; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.5; color: #333; }
.sup-arthead .sup-page__title, .sup-cathead .sup-page__title { margin-bottom: .8rem; }
.sup-cathead__desc { margin-bottom: 0; }

/* FAQ in articles: quiet white card, smaller than the site-wide glass FAQ */
.sup-faq__panel { padding: 0; background: none; border-radius: 0; }
.sup-faq .arl-faq {
	--faq-row: 48px; --faq-pad: 1.1rem;
	width: 100%; border-radius: 18px; background: #fff; border: 1px solid var(--arl-line); box-shadow: 0 1px 2px rgba(0,0,0,.03);
	-webkit-backdrop-filter: none; backdrop-filter: none;
}
.sup-faq .arl-faq__list { padding: 0; }
.sup-faq .arl-faq__btn { font-size: 1rem; letter-spacing: -0.01em; min-height: 48px; padding-block: .5rem; line-height: 1.3; }
.sup-faq .arl-faq__a-inner { font-size: .95rem; line-height: 1.55; padding-bottom: 1rem; padding-top: 0; }
.sup-faq .arl-faq__item { border-bottom-color: var(--arl-line); }
.sup-faq .arl-faq__q { margin: 0; }
.sup-faq .arl-faq__item:first-child .arl-faq__btn { border-radius: 18px 18px 0 0; }
.sup-faq .arl-faq__item:last-child .arl-faq__btn { border-radius: 0 0 18px 18px; }

/* Who is writing this */
.sup-about { display: flex; gap: 1.1rem; align-items: flex-start; margin-top: 1.6rem; color: #444; font-size: .95rem; line-height: 1.55; }
.sup-about p { margin: 0; max-width: 40rem; }
.sup-about__mark { flex: none; color: var(--arl-accent); padding-top: .15rem; }
.sup-about__mark .arlite-logo svg { height: 18px; }
@media (max-width: 599px) { .sup-about { flex-direction: column; gap: .6rem; } }

/* No DIY banner: on every article */
.sup-nodiy { display: flex; gap: .85rem; align-items: flex-start; margin: 0 0 2rem; padding: 1rem 1.2rem; background: #b42318; color: #fff; border-radius: 14px; }
.sup-nodiy__icon { flex: none; display: inline-flex; margin-top: .1rem; color: #fff; }
.sup-nodiy__text { margin: 0; font-size: .98rem; line-height: 1.5; }
.sup-nodiy__text strong { font-weight: 700; letter-spacing: .02em; text-transform: uppercase; margin-right: .2em; }

/* Sidebar: five single-line items per topic, full title on hover, no inner scrollbar */
.sup-nav__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.sup-nav__all { flex: none; font-family: var(--arl-font-ui); font-size: .78rem; color: var(--arl-muted); opacity: 0; transition: opacity .2s ease, color .2s ease; }
.sup-nav__group:hover .sup-nav__all, .sup-nav__all:focus-visible { opacity: 1; }
@media (hover: none) { .sup-nav__all { opacity: 1; } }
.sup-nav__list a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-block: .3rem; }
.sup-nav__group { margin-top: .25rem; }
@media (min-width: 900px) and (min-height: 880px) {
	.sup-side { position: sticky; top: 2rem; }
}

/* Steps: beat the generic .sup-body ol / li padding so the number sits in its own gutter */
.sup-body .sup-steps__list { padding: 0; margin: 0 0 1.15rem; }
.sup-body .sup-steps__item { padding: 0 0 1.6rem 3.4rem; margin: 0; min-height: 2.2rem; }
.sup-body .sup-steps__item::marker { content: none; }
.sup-body .sup-steps__item:last-child { padding-bottom: .4rem; }
.sup-body .sup-steps__title { margin: .2rem 0 .35rem; line-height: 1.3; }

/* Direct answer (also the speakable text) */
.sup-body .sup-answer { font-size: clamp(1.15rem, 1.35vw, 1.3rem); line-height: 1.55; font-weight: 500; color: #111; padding-left: 1rem; border-left: 3px solid var(--arl-accent); margin-bottom: 1.6rem; }

/* Official guidance */
.sup-sources { margin-top: clamp(2rem, 3vw, 3rem); padding: 1.3rem 1.5rem; background: var(--arl-soft); border: 1px solid var(--arl-line); border-radius: 16px; }
.sup-sources__title { margin: 0 0 .4rem; font-size: 1.1rem; font-weight: 500; letter-spacing: -0.01em; }
.sup-sources p { margin: 0 0 .7rem; color: #555; font-size: .95rem; line-height: 1.5; }
.sup-sources ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sup-sources a { display: inline-block; padding: .45em .95em; border: 1px solid var(--arl-line); border-radius: 999px; background: #fff; color: var(--arl-fg); text-decoration: none; font: 500 .88rem/1 var(--arl-font-ui); transition: border-color .2s ease, color .2s ease; }
.sup-sources a:hover, .sup-sources a:focus-visible { border-color: var(--arl-fg); color: var(--arl-accent); }

/* The article body's list spacing must not leak into the FAQ card */
.sup-body .sup-faq .arl-faq__list { margin: 0; padding: 0; }
.sup-body .sup-faq .arl-faq__item { margin: 0; padding: 0; }
.sup-body .sup-faq .arl-faq__item::marker { content: none; }
.sup-body .sup-faq .arl-faq__a-inner p { margin: 0 0 .7em; }

/* arlite-faq */
/* ============================================================
   Glass FAQ (inc/faq.php, assets/js/faq.js)
   Figma 611:58 → panel 849px, radius 33px, rows 72px, 20px Aeonik Medium, 55px side padding.
   Shares --arl-glass-blur / --arl-glass-tint from modal.css, with a darker tint and stronger blur.
   ============================================================ */
.arl-faq {
	--faq-blur: calc(var(--arl-glass-blur) * 1.7);
	--faq-pad: clamp(1.25rem, 3.2vw, 3.45rem);
	--faq-row: 72px;
	position: relative;
	width: min(100%, 849px);
	margin-inline: auto;
	border-radius: 33px;
	overflow: hidden;
	font-family: var(--arl-font);
	-webkit-backdrop-filter: blur(var(--faq-blur)) saturate(1.2);
	backdrop-filter: blur(var(--faq-blur)) saturate(1.2);
	isolation: isolate;
}
.arl-faq__list { list-style: none; margin: 0; padding: 7px 0; }
.arl-faq__item { margin: 0; padding: 0; border-bottom: 1px solid var(--faq-line); }
.arl-faq__item:last-child { border-bottom: 0; }
.arl-faq__q { margin: 0; font: inherit; }

.arl-faq__btn {
	all: unset;
	box-sizing: border-box;
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	width: 100%; min-height: var(--faq-row);
	padding: 0.9rem var(--faq-pad);
	cursor: pointer;
	color: var(--faq-fg);
	font-family: var(--arl-font); font-weight: 500;
	font-size: 20px; line-height: 1.25; letter-spacing: -0.03em; /* -0.6px on 20px */
	transition: background-color .35s ease;
	-webkit-tap-highlight-color: transparent;
}
.arl-faq__text { flex: 1 1 auto; min-width: 0; text-wrap: pretty; }
.arl-faq__btn:hover { background-color: var(--faq-hover); }
.arl-faq__btn:focus-visible { outline: 2px solid var(--arl-accent); outline-offset: -3px; border-radius: 12px; }

/* Chevron: Figma 8.3 × 14.7 right-pointing glyph, turns to point down when open. */
.arl-faq__chev {
	flex: none; width: 8.3125px; height: 14.7188px;
	background-color: currentColor;
	-webkit-mask: url("https://arlite.co/wp-content/themes/mkrst-arlite-2026/assets/css/../img/icons/faq-chevron.svg") center / contain no-repeat;
	mask: url("https://arlite.co/wp-content/themes/mkrst-arlite-2026/assets/css/../img/icons/faq-chevron.svg") center / contain no-repeat;
	transform: translateX(0) rotate(0deg);
	transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.arl-faq__btn:hover .arl-faq__chev { transform: translateX(4px); }
.arl-faq__btn[aria-expanded="true"] .arl-faq__chev,
.arl-faq__btn[aria-expanded="true"]:hover .arl-faq__chev { transform: translateX(0) rotate(90deg); }

.arl-faq__a { overflow: hidden; }
.arl-faq__a-inner {
	padding: 0 var(--faq-pad) 1.6rem;
	max-width: 46rem;
	color: var(--faq-body);
	font-size: 16px; line-height: 1.6; letter-spacing: -0.005em;
}
.arl-faq__a-inner > :first-child { margin-top: 0; }
.arl-faq__a-inner > :last-child { margin-bottom: 0; }
.arl-faq__a-inner p { margin: 0 0 .8em; }
.arl-faq__a-inner ul, .arl-faq__a-inner ol { margin: 0 0 .8em; padding-left: 1.2em; }
.arl-faq__a-inner a { color: var(--faq-fg, #fff); text-decoration: underline; text-decoration-color: var(--arl-accent); text-underline-offset: 3px; }

/* With JS the answers start closed (no JS: every answer stays open and readable). */
.arl-faq-js .arl-faq:not(.is-ready) .arl-faq__item:not(.is-open) .arl-faq__a { display: none; }

/* Dark smoked glass (Figma) */
.arl-faq--dark {
	--faq-fg: #fff;
	--faq-body: rgba(255, 255, 255, 0.78);
	--faq-line: rgba(255, 255, 255, 0.19);
	--faq-hover: rgba(255, 255, 255, 0.055);
	background: linear-gradient(180deg, rgba(34, 30, 28, 0.46), rgba(14, 12, 12, 0.5));
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Light frosted glass for a white page */
.arl-faq--light {
	--faq-fg: #111;
	--faq-body: rgba(17, 17, 17, 0.72);
	--faq-line: rgba(0, 0, 0, 0.09);
	--faq-hover: rgba(0, 0, 0, 0.035);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(250, 249, 247, 0.72));
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ---- Overlay inside the media band ----------------------------------------- */
.m-image-band.m-image-band--faq {
	height: auto;
	display: grid;
	place-items: center;
	padding-block: clamp(4.5rem, 12vh, 8rem);
	padding-inline: var(--arl-gutter);
}
.m-image-band--faq.m-image-band--h25  { min-height: 25vh; }
.m-image-band--faq.m-image-band--h50  { min-height: 50vh; }
.m-image-band--faq.m-image-band--h75  { min-height: 75vh; }
.m-image-band--faq.m-image-band--h100 { min-height: 100vh; }
.m-image-band__scrim {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		radial-gradient(ellipse 62% 70% at 50% 50%, rgba(10, 9, 9, 0.42), rgba(10, 9, 9, 0) 100%),
		linear-gradient(rgba(10, 9, 9, 0.16), rgba(10, 9, 9, 0.16));
}
.m-image-band__faq { position: relative; z-index: 3; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 1.25rem; }
.m-image-band__faq-heading {
	margin: 0; color: #fff; text-align: center; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
	font-family: var(--arl-font); font-weight: 500; font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -0.03em; line-height: 1.1;
}

/* ---- Standalone block -------------------------------------------------------- */
.m-faq { position: relative; padding-block: var(--arl-section-y); }
.m-faq__wrap { max-width: var(--arl-maxw); margin-inline: auto; padding-inline: var(--arl-gutter); }
.m-faq__head { max-width: 40rem; margin: 0 auto clamp(1.75rem, 3.5vw, 3rem); text-align: center; }
.m-faq__heading { margin: 0; font-weight: 500; font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.04; letter-spacing: -0.04em; }
.m-faq__intro { margin: 1rem 0 0; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.5; color: var(--arl-muted); }
.m-faq--dark { background: #151515; color: #fff; }
.m-faq--dark::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(ellipse 50% 60% at 50% 55%, rgba(255, 140, 80, 0.14), rgba(255, 140, 80, 0) 100%);
}
.m-faq--dark .m-faq__wrap { position: relative; }
.m-faq--dark .m-faq__intro { color: rgba(255, 255, 255, 0.65); }
.m-faq--light { background: transparent; }

/* ---- Motion states (revealed by faq.js) ----------------------------------------- */
html.js-motion .arl-faq { opacity: 0; transform: translateY(28px); }
html.js-motion .arl-faq__item { opacity: 0; transform: translateY(14px); }

@media (max-width: 640px) {
	.arl-faq { --faq-pad: 1.25rem; --faq-row: 64px; border-radius: 26px; }
	.arl-faq__btn { font-size: 17px; }
	.arl-faq__a-inner { font-size: 15px; padding-bottom: 1.3rem; }
	.m-image-band.m-image-band--faq { padding-inline: 1rem; padding-block: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.arl-faq__chev, .arl-faq__btn { transition: none; }
}