/* 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-legal */
/* MKRST Arlite — legal pages (privacy policy, terms). Text-led, no imagery. */

.m-legal { padding-top: clamp(2.5rem, 6vw, 6rem); padding-bottom: clamp(4rem, 9vw, 9rem); }
.m-legal__inner { display: block; }

.m-legal__head { max-width: 72ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.m-legal__title {
	margin: 0; font-weight: 700; font-size: clamp(2.3rem, 3.85vw, 4.15rem);
	line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance;
	padding-bottom: 0.12em; /* keep descenders (y, g, p) clear of any clip */
}
.m-legal__updated { margin: 1rem 0 0; color: var(--arl-muted); font-size: 1rem; line-height: 1.4; }

/* Contents list */
.m-legal__toc { margin-bottom: clamp(2rem, 4vw, 3rem); padding: 1.25rem 1.5rem; background: var(--arl-soft); border: 1px solid var(--arl-line); border-radius: var(--arl-radius-card); }
.m-legal__toc-title { margin: 0 0 .75rem; font-family: var(--arl-font-ui); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--arl-muted); }
.m-legal__toc-list { list-style: none; margin: 0; padding: 0; counter-reset: legal-toc; display: grid; gap: .1rem; }
.m-legal__toc-list li { counter-increment: legal-toc; display: flex; gap: .65rem; line-height: 1.35; }
.m-legal__toc-list li::before { content: counter(legal-toc) "."; flex: 0 0 1.6em; color: var(--arl-muted); font-variant-numeric: tabular-nums; padding: .3rem 0; }
.m-legal__toc-list a {
	display: block; padding: .3rem 0; color: var(--arl-fg); text-decoration: none; font-size: .98rem;
	transition: color .25s ease;
}
.m-legal__toc-list a:hover, .m-legal__toc-list a:focus-visible, .m-legal__toc-list a.is-active { color: var(--arl-accent); }

/* Body */
.m-legal__body { max-width: 72ch; font-size: clamp(1.02rem, 1.1vw, 1.15rem); line-height: 1.65; }
.m-legal__body > :first-child { margin-top: 0; }
.m-legal__body h2 {
	margin: clamp(2.5rem, 4.5vw, 4rem) 0 .9rem; font-size: clamp(1.45rem, 1.9vw, 2rem);
	font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; scroll-margin-top: 2rem;
}
.m-legal__body h2:first-child { margin-top: 0; }
.m-legal__body h3 { margin: 1.9rem 0 .5rem; font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.m-legal__body p, .m-legal__body ul, .m-legal__body ol { margin: 0 0 1.1rem; }
.m-legal__body ul, .m-legal__body ol { padding-left: 1.3rem; }
.m-legal__body li { margin: 0 0 .45rem; padding-left: .2rem; }
.m-legal__body li::marker { color: var(--arl-accent); }
.m-legal__body strong { font-weight: 600; }
.m-legal__body a {
	color: var(--arl-accent); 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);
}
.m-legal__body a:hover, .m-legal__body a:focus-visible { background-position: 0 100%; background-size: 100% 1px; }
.m-legal a:focus-visible { outline: 2px solid var(--arl-accent); outline-offset: 3px; border-radius: 2px; }

/* Wide screens: contents list sticks to the left of the text */
@media (min-width: 1024px) {
	.m-legal__inner.has-toc {
		display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 72ch);
		column-gap: clamp(3rem, 7vw, 8rem); align-items: start;
	}
	.m-legal__inner.has-toc .m-legal__head { grid-column: 1 / -1; }
	.m-legal__toc {
		position: sticky; top: 2rem; margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
		max-height: calc(100vh - 4rem); overflow-y: auto;
	}
	.m-legal__toc-list a { font-size: .92rem; }
}

/* Quiet reveal of the heading block (only when the motion layer is on) */
html.js-motion .m-legal__head > * { opacity: 0; transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) {
	html.js-motion .m-legal__head > * { opacity: 1; transform: none; }
	.m-legal__body a, .m-legal__toc-list a { transition: none; }
}