/* ==========================================================================
   Homepage stage — the scroll track and the pinned screen every section sits on.

   Mobile-first: the base rules are the portrait (phone) layout; landscape — the
   recording's own layout — is the override. Portrait is a re-set, not a shrink.

   Units: 1u = 1px of the recording's 998px intro frame,
          1v = 1px of its 936x527 final panel.
   Sizing uses dvh, not svh: with svh iOS Safari leaves a dead white band under
   the stage once its toolbar collapses. The track stays in svh so the scroll
   length doesn't move when the toolbar does.
   ========================================================================== */

:root {
	--as-u: min(100vw / 440, 100dvh / 760);
	--as-v: min(100vw / 440, 100dvh / 760);
	--as-nav-size: 13.5;
}

@media not all and (max-aspect-ratio: 1/1) {
	:root {
		--as-u: min(100vw / 998, 100dvh / 560);
		--as-v: min(100vw / 936, 100dvh / 527);
		--as-nav-size: 11;
	}
}

html,
body { background: var(--wp--preset--color--white); }
body { overflow-x: clip; }

/* Blocks bring flow margins and figure margins; nothing on the stage flows. */
.as-home,
.as-home .as-stage * { margin-block: 0; }
.as-home figure { margin: 0; }

/* Scroll track: its height is the scroll distance that drives the animation. */
.as-home .as-scroll {
	position: relative;
	height: 450svh;
}

/* The stage stays pinned while the track scrolls past, at the live visible height. */
.as-home .as-stage {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100dvh;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	line-height: normal;
}

/* Logged in: WordPress's admin bar (32px, 46px on phones) sits over the top of the
   page. The stage pins below it and shortens by its height, so nothing — in
   particular the phone's bottom nav row with "Get in touch" — ends up off screen. */
.admin-bar .as-home .as-stage {
	top: var(--wp-admin--admin-bar--height, 0px);
	height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}
/* Under 600px the bar scrolls away with the page instead of staying fixed. */
@media (max-width: 600px) {
	.admin-bar .as-home .as-stage { top: 0; }
}

/* Probe (inserted by home.js): lets the script read the resolved u and v. */
.as-probe {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(var(--as-u) * 100);
	height: calc(var(--as-v) * 100);
	visibility: hidden;
	pointer-events: none;
}

/* While the enquiry panel is open the page must not scroll behind it. */
html.as-form-open,
html.as-form-open body { overflow: hidden; }

/* ==== No JS: show the final composition only ============================ */

html:not(.as-js) body:not(.editor-styles-wrapper) .as-home .as-intro,
html:not(.as-js) body:not(.editor-styles-wrapper) .as-home .as-marks { display: none; }
html:not(.as-js) body:not(.editor-styles-wrapper) .as-home .as-scroll { height: 100dvh; }

/* ==== Page-builder leftovers =============================================
   Elementor still prints its popup / header / footer templates into the page
   (they carry data-elementor-type). Its CSS and JS are removed on the homepage
   (functions.php), so they would show up unstyled below the stage. Nothing
   Elementor-built belongs on this page. This file loads on the homepage only. */

[data-elementor-type],
.elementor-location-popup,
.elementor-location-header,
.elementor-location-footer { display: none !important; }