/* ==========================================================================
   360 Dublin template components (Theme Builder templates and page kits).
   Tokens and rules follow DESIGN.md. Prefix: d360-
   Layout (columns, widths, section padding) is set on Elementor containers;
   this file carries typography details, components and states.
   ========================================================================== */

:root {
	--d360-ink: #000;
	--d360-paper: #fff;
	--d360-ink-glass: rgba(0, 0, 0, 0.8);
	--d360-muted: #767676;
	--d360-rule: #d2d2d2;
	--d360-field-border: #767676; /* 4.5:1 on white; #dde3e8 was 1.3:1, below the 3:1 a field edge needs (2026-10-09) */
	--d360-f-display: "field-gothic-condensed", "Arial Narrow", sans-serif;
	--d360-f-button: "field-gothic-xcondensed", "Arial Narrow", sans-serif;
	--d360-f-utility: "field-gothic", sans-serif;
	--d360-f-body: "itc-avant-garde-gothic-pro", "Century Gothic", sans-serif;
	--d360-measure: calc(640px + 640 * var(--d360-g));
	--d360-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Paper ground everywhere: without it, browsers with a dark canvas show black behind transparent pages. */
html, body { background-color: var(--d360-paper); color: var(--d360-ink); }

::selection { background: var(--d360-ink); color: var(--d360-paper); }

/* ---------- Type helpers (shortcode output) ---------- */

.d360-display.d360-display {
	margin: 0;
	font-family: var(--d360-f-display);
	font-weight: 700;
	font-size: calc(96px + 96 * var(--d360-g));
	line-height: calc(86px + 86 * var(--d360-g));
	letter-spacing: -2px;
	text-wrap: balance;
	overflow-wrap: anywhere;
}
.d360-lede {
	margin: 24px 0 0;
	max-width: calc(760px + 760 * var(--d360-g));
	font-family: var(--d360-f-body);
	font-weight: 300;
	font-size: calc(22px + 22 * var(--d360-g));
	line-height: calc(32px + 32 * var(--d360-g));
}
.d360-meta { color: var(--d360-muted); font-size: calc(13px + 13 * var(--d360-g)); line-height: calc(18px + 18 * var(--d360-g)); }
.d360-label {
	margin: 0;
	font-size: calc(13px + 13 * var(--d360-g));
	line-height: calc(18px + 18 * var(--d360-g));
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.d360-label a { text-decoration: none; color: inherit; }
@media (hover: hover) {
	.d360-label a:hover { text-decoration: underline; }
}
.d360-icon { width: 1em; height: 1em; flex: none; }

@media (max-width: 1024px) {
	.d360-display.d360-display { font-size: 80px; line-height: 74px; letter-spacing: -1.75px; }
}
@media (max-width: 767px) {
	.d360-display.d360-display { font-size: 56px; line-height: 54px; letter-spacing: -1.25px; }
	.d360-lede { font-size: 19px; line-height: 28px; }
}

/* Long words in display headings (search terms) must never force sideways scroll */
.d360-heading-tight .elementor-heading-title { text-wrap: balance; overflow-wrap: anywhere; }

/* ---------- Focus ---------- */

.d360-scope :focus-visible,
.d360-searchbox :focus-visible,
.d360-routes :focus-visible,
.d360-filters :focus-visible,
.d360-toc :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------- Breadcrumbs ---------- */

.d360-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: calc(13px + 13 * var(--d360-g));
	line-height: calc(18px + 18 * var(--d360-g));
	color: var(--d360-muted);
}
.d360-crumbs li + li::before { content: "/"; margin-right: 6px; }
.d360-crumbs a { color: inherit; text-decoration: none; }
@media (hover: hover) {
	.d360-crumbs a:hover { color: var(--d360-ink); text-decoration: underline; }
}

/* ---------- Article header ---------- */

.d360-post-cat { margin: 0; }
.d360-post-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

.d360-hero-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.d360-hero-figure figcaption,
.d360-hero-figure .widget-image-caption {
	margin-top: 10px;
	text-align: left;
	font-size: calc(13px + 13 * var(--d360-g));
	line-height: calc(18px + 18 * var(--d360-g));
	color: var(--d360-muted);
}
@media (max-width: 767px) {
	.d360-hero-figure img { aspect-ratio: 4 / 3; }
}

/* ---------- Contents rail ---------- */

.d360-toc summary {
	font-family: var(--d360-f-display);
	font-weight: 700;
	font-size: calc(23px + 23 * var(--d360-g));
	line-height: 1.1;
	cursor: pointer;
	list-style: none;
}
.d360-toc summary::-webkit-details-marker { display: none; }
.d360-toc ol {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	border-left: 1px solid var(--d360-rule);
}
.d360-toc li a {
	display: block;
	padding: 6px 0 6px 16px;
	margin-left: -1px;
	border-left: 2px solid transparent;
	color: var(--d360-muted);
	text-decoration: none;
	transition: color 160ms ease-out, border-color 160ms ease-out;
}
.d360-toc li a[aria-current="true"] { color: var(--d360-ink); border-left-color: var(--d360-ink); }
@media (hover: hover) {
	.d360-toc li a:hover { color: var(--d360-ink); border-left-color: var(--d360-ink); }
}

.d360-rail { position: sticky; top: calc(var(--d360-sticky-offset, 110px) + 24px); }
.admin-bar .d360-rail { top: calc(var(--d360-sticky-offset, 110px) + 56px); }

@media (max-width: 1024px) {
	.d360-rail { position: static; }
	.d360-rail .d360-rail-cta { display: none; }
	.d360-toc { border-top: 1px solid var(--d360-ink); border-bottom: 1px solid var(--d360-rule); padding: 16px 0; }
	.d360-toc summary { display: flex; justify-content: space-between; align-items: center; }
	.d360-toc summary::after { content: "+"; font-family: var(--d360-f-body); font-weight: 300; font-size: 26px; }
	.d360-toc[open] summary::after { content: "\2212"; }
}

/* ---------- Article body ---------- */

body:not(.d360-built) .d360-prose {
	font-size: calc(16px + 16 * var(--d360-g));
	line-height: calc(26px + 26 * var(--d360-g));
}
body:not(.d360-built) .d360-prose > .elementor-widget-container > *,
body:not(.d360-built) .d360-prose.elementor-widget > :not(.elementor-widget-container) { max-width: var(--d360-measure); }
body:not(.d360-built) .d360-prose p { margin: 0 0 20px; }
body:not(.d360-built) .d360-prose h2 {
	margin: 64px 0 18px;
	font-family: var(--d360-f-display);
	font-weight: 700;
	font-size: calc(48px + 48 * var(--d360-g));
	line-height: calc(48px + 48 * var(--d360-g));
	scroll-margin-top: calc(var(--d360-sticky-offset, 110px) + 24px);
	text-wrap: balance;
}
body:not(.d360-built) .d360-prose h3 {
	margin: 40px 0 14px;
	font-family: var(--d360-f-display);
	font-weight: 700;
	font-size: calc(27px + 27 * var(--d360-g));
	line-height: calc(30px + 30 * var(--d360-g));
}
body:not(.d360-built) .d360-prose > .elementor-widget-container > :first-child,
body:not(.d360-built) .d360-prose.elementor-widget > :first-child { margin-top: 0; }
body:not(.d360-built) .d360-prose ul, body:not(.d360-built) .d360-prose ol { margin: 0 0 20px; padding-left: 1.2em; }
body:not(.d360-built) .d360-prose li + li { margin-top: 8px; }
body:not(.d360-built) .d360-prose a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

/* Inline links in Elementor text blocks and accordion answers. The kit sets no link colour, so browser blue showed through. */
.elementor-widget-text-editor a:not([class]),
.d360-faq .elementor-tab-content a:not([class]) { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

body:not(.d360-built) .d360-prose figure { margin: 36px 0; }
body:not(.d360-built) .d360-prose figure img { width: 100%; height: auto; }
body:not(.d360-built) .d360-prose figure.d360-wide,
body:not(.d360-built) .d360-prose .d360-wide { max-width: none !important; }
body:not(.d360-built) .d360-prose figure.d360-wide img { aspect-ratio: 3 / 2; object-fit: cover; }
body:not(.d360-built) .d360-prose figcaption {
	margin-top: 10px;
	font-size: calc(13px + 13 * var(--d360-g));
	line-height: calc(18px + 18 * var(--d360-g));
	color: var(--d360-muted);
	text-align: left;
}

/* Pull-quote: set as poster type, not a centred bordered box */
body:not(.d360-built) .d360-prose .wp-block-pullquote {
	max-width: none !important;
	margin: 56px 0;
	padding: 0;
	border: 0;
	text-align: left;
}
body:not(.d360-built) .d360-prose .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; }
body:not(.d360-built) .d360-prose .wp-block-pullquote p {
	margin: 0;
	font-family: var(--d360-f-display);
	font-weight: 700;
	font-size: calc(56px + 56 * var(--d360-g));
	line-height: calc(54px + 54 * var(--d360-g));
	letter-spacing: -1px;
	text-indent: -0.42em;
	text-wrap: balance;
}
body:not(.d360-built) .d360-prose .wp-block-pullquote p::before { content: "\201C"; }
body:not(.d360-built) .d360-prose .wp-block-pullquote p::after { content: "\201D"; }
body:not(.d360-built) .d360-prose .wp-block-pullquote cite { display: block; margin-top: 16px; font-size: calc(13px + 13 * var(--d360-g)); font-style: normal; color: var(--d360-muted); }

@media (max-width: 767px) {
	body:not(.d360-built) .d360-prose h2 { font-size: 36px; line-height: 37px; margin-top: 48px; }
	body:not(.d360-built) .d360-prose h3 { font-size: 24px; line-height: 27px; }
	/* Hanging punctuation needs a margin to hang into; 20px is not enough. */
	body:not(.d360-built) .d360-prose .wp-block-pullquote p { font-size: 38px; line-height: 38px; text-indent: 0; }
}

/* ---------- Buttons ---------- */

/* Elementor writes ".elementor-widget-button .elementor-button" with the kit Accent colour and font
   for every Button widget, and Accent is State Green. This file loads after it on the page, but the
   editor injects element styles after the theme, so buttons showed green there (13 Oct 2026).
   Doubled classes outrank that rule in any load order. The variants below are doubled too so they
   still beat the base rules; the .d360-on-dark ones already outrank them and are left as they were. */

/* The editor also injects each button's own rule, ".elementor-113 .elementor-element.elementor-element-<id>
   .elementor-button { background-color: var(--e-global-color-accent) }", which outranks everything here,
   so the Home hero pill still showed green in the editor (14 Oct 2026). Rather than raise specificity
   again, each button class sets that variable to its own colour, so the injected rule paints the right
   one, hover included. On the published page the rules below set the colours anyway. */
.d360-pill { --e-global-color-accent: var(--d360-ink-glass); }
.d360-pill--light { --e-global-color-accent: var(--d360-paper); }
.d360-outline { --e-global-color-accent: transparent; }
@media (hover: hover) {
	.d360-pill .elementor-button:hover { --e-global-color-accent: var(--d360-ink); }
	.d360-pill--light .elementor-button:hover { --e-global-color-accent: var(--d360-rule); }
	.d360-outline .elementor-button:hover { --e-global-color-accent: var(--d360-ink); }
	.d360-on-dark .d360-outline .elementor-button:hover { --e-global-color-accent: var(--d360-paper); }
}

.d360-pill.d360-pill .elementor-button,
a.d360-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: calc(50px + 50 * var(--d360-g));
	padding: 0 24px;
	border-radius: 25px;
	background: var(--d360-ink-glass);
	color: var(--d360-paper);
	font-family: var(--d360-f-button);
	font-weight: 700;
	font-size: calc(24px + 24 * var(--d360-g));
	line-height: 1;
	text-decoration: none;
	transition: background-color 160ms ease-out, color 160ms ease-out;
}
@media (hover: hover) {
	.d360-pill.d360-pill .elementor-button:hover,
	a.d360-pill:hover { background: var(--d360-ink); color: var(--d360-paper); }
}
.d360-pill--light.d360-pill--light .elementor-button,
a.d360-pill--light { background: var(--d360-paper); color: var(--d360-ink); }
@media (hover: hover) {
	.d360-pill--light.d360-pill--light .elementor-button:hover,
	a.d360-pill--light:hover { background: var(--d360-rule); color: var(--d360-ink); }
}
.d360-pill.d360-pill .elementor-button:focus-visible,
a.d360-pill:focus-visible { outline: 2px solid var(--d360-ink); outline-offset: 3px; }
.d360-pill--light.d360-pill--light .elementor-button:focus-visible,
a.d360-pill--light:focus-visible { outline-color: var(--d360-paper); }
.d360-pill--sm.d360-pill--sm .elementor-button { min-height: calc(40px + 40 * var(--d360-g)); padding: 0 18px; font-size: calc(20px + 20 * var(--d360-g)); border-radius: 20px; }
@media (max-width: 767px) {
	.d360-pill.d360-pill .elementor-button, a.d360-pill { min-height: 44px; font-size: 20px; padding: 0 20px; }
	/* Outline buttons stay 40px on desktop (DESIGN.md) but get a full 44px touch target on phones. */
	.d360-outline.d360-outline .elementor-button, a.d360-outline { min-height: 44px; }
}

.d360-outline.d360-outline .elementor-button,
a.d360-outline {
	display: inline-flex;
	align-items: center;
	min-height: calc(40px + 40 * var(--d360-g));
	padding: 0 16px;
	border: 1px solid currentColor;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-family: var(--d360-f-body);
	font-weight: 300;
	font-size: calc(16px + 16 * var(--d360-g));
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 160ms ease-out, color 160ms ease-out;
}
@media (hover: hover) {
	.d360-outline.d360-outline .elementor-button:hover,
	a.d360-outline:hover { background: var(--d360-ink); color: var(--d360-paper); }
}
.d360-on-dark .d360-outline .elementor-button,
.d360-on-dark a.d360-outline { color: var(--d360-paper); }
@media (hover: hover) {
	.d360-on-dark .d360-outline .elementor-button:hover,
	.d360-on-dark a.d360-outline:hover { background: var(--d360-paper); color: var(--d360-ink); }
}

.d360-arrow-link,
.d360-arrow-link a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--d360-f-button);
	font-weight: 700;
	font-size: calc(24px + 24 * var(--d360-g));
	line-height: 1;
	color: inherit;
	text-decoration: none;
}
.d360-arrow-link .d360-icon { width: calc(22px + 22 * var(--d360-g)); height: calc(22px + 22 * var(--d360-g)); transition: transform 200ms var(--d360-ease-out); }
@media (hover: hover) {
	.d360-arrow-link:hover .d360-icon, .d360-arrow-link a:hover .d360-icon { transform: translateX(4px); }
}

/* ---------- Ticket CTA band (black) ---------- */

.d360-on-dark { color: var(--d360-paper); }
.d360-on-dark .d360-meta { color: rgba(255, 255, 255, 0.72); }
.d360-on-dark :focus-visible { outline-color: var(--d360-paper); }
.d360-cta-band p { max-width: calc(520px + 520 * var(--d360-g)); }

/* ---------- Cards (loop item "D360 Article Card") ---------- */

/* The whole card is one link: the title link's ::after covers the card. Elementor makes
   every widget and nested container position:relative, which would trap the overlay
   inside the heading, so everything inside the card is reset to static. */
.e-con.d360-card { position: relative; }
.d360-card .elementor-element,
.d360-card .e-con,
.d360-card .elementor-widget-container { position: static; }
.d360-card .d360-card-media { overflow: hidden; background: var(--d360-rule); }
.d360-card .d360-card-media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 600ms var(--d360-ease-out);
}
@media (hover: hover) {
	.d360-card:hover .d360-card-media img { transform: scale(1.03); }
}
.d360-card-meta { display: flex; gap: 10px; margin: 0; }
.d360-card .d360-card-title a { color: inherit; text-decoration: none; }
.d360-card .d360-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.d360-card .d360-card-title a:focus-visible { outline: none; }
.d360-card:has(.d360-card-title a:focus-visible) { outline: 2px solid var(--d360-ink); outline-offset: 6px; }
.d360-card .d360-card-excerpt p,
.d360-card .d360-card-excerpt { margin: 0; }

/* Lead story: the loop grid's alternate template at position 1 */
@media (hover: hover) {
	.d360-card--lead .d360-card-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
}

/* ---------- Category filters ---------- */

.d360-filters ul {
	display: flex;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--d360-rule);
	overflow-x: auto;
	scrollbar-width: none;
}
.d360-filters ul::-webkit-scrollbar { display: none; }
.d360-filters a {
	display: block;
	padding-bottom: 14px;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	font-family: var(--d360-f-button);
	font-weight: 700;
	font-size: calc(22px + 22 * var(--d360-g));
	line-height: 1;
	white-space: nowrap;
	color: var(--d360-muted);
	text-decoration: none;
}
@media (hover: hover) {
	.d360-filters a:hover { color: var(--d360-ink); }
}
.d360-filters a[aria-current="page"] { color: var(--d360-ink); border-bottom-color: var(--d360-ink); }
@media (max-width: 767px) {
	.d360-filters ul { gap: 24px; }
	.d360-filters a { font-size: 20px; }
}

/* ---------- Loop grid pagination ---------- */

.d360-grid .elementor-pagination {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 72px;
	padding-top: 24px;
	border-top: 1px solid var(--d360-rule);
	text-align: left;
}
.d360-grid .elementor-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	margin: 0;
	font-family: var(--d360-f-button);
	font-weight: 700;
	font-size: calc(22px + 22 * var(--d360-g));
	color: var(--d360-ink);
	text-decoration: none;
}
.d360-grid .elementor-pagination .page-numbers.current { background: var(--d360-ink); color: var(--d360-paper); }
@media (hover: hover) {
	.d360-grid .elementor-pagination a.page-numbers:hover { outline: 1px solid var(--d360-ink); }
}
.d360-grid .elementor-pagination .page-numbers.next { margin-left: auto; padding: 0 4px; }

/* ---------- Search box ---------- */

.d360-searchbox {
	display: flex;
	max-width: calc(760px + 760 * var(--d360-g));
	border: 1px solid var(--d360-ink);
	background: var(--d360-paper);
}
.d360-searchbox input[type="search"] {
	flex: 1;
	min-width: 0;
	height: calc(60px + 60 * var(--d360-g));
	padding: 0 20px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--d360-ink);
	font-family: var(--d360-f-body);
	font-weight: 300;
	font-size: calc(18px + 18 * var(--d360-g));
	-webkit-appearance: none;
	appearance: none;
}
.d360-searchbox input[type="search"]::placeholder { color: var(--d360-muted); opacity: 1; }
.d360-searchbox input[type="search"]:focus { outline: none; box-shadow: none; }
.d360-searchbox:focus-within { outline: 2px solid var(--d360-ink); outline-offset: 3px; }
.d360-searchbox button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 22px;
	border: 0;
	border-radius: 0;
	background: var(--d360-ink);
	color: var(--d360-paper);
	font-family: var(--d360-f-button);
	font-weight: 700;
	font-size: calc(22px + 22 * var(--d360-g));
	cursor: pointer;
}
@media (hover: hover) {
	.d360-searchbox button:hover { background: var(--d360-ink-glass); }
}
.d360-searchbox button .d360-icon { width: calc(20px + 20 * var(--d360-g)); height: calc(20px + 20 * var(--d360-g)); }
@media (max-width: 767px) {
	.d360-searchbox input[type="search"] { height: 54px; padding: 0 14px; font-size: 16px; }
	.d360-searchbox button { padding: 0 16px; }
	.d360-searchbox button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Search results ---------- */

.d360-search-head .d360-search-count { margin: 14px 0 28px; }
.d360-search-head .d360-lede { margin: 24px 0 32px; }
.d360-search-head .d360-searchbox { margin-top: 28px; }

.d360-result {
	padding: 28px 0;
	border-top: 1px solid var(--d360-rule);
}
.d360-results .e-loop-item:last-child .d360-result { border-bottom: 1px solid var(--d360-rule); }
.d360-result .d360-result-type { color: var(--d360-muted); }
.d360-result .d360-card-title a { color: inherit; text-decoration: none; }
@media (hover: hover) {
	.d360-result .d360-card-title a:hover { text-decoration: underline; }
}
.d360-result-url { margin: 8px 0 0; }

/* ---------- Routes list (404, empty search) ---------- */

.d360-routes {
	max-width: calc(760px + 760 * var(--d360-g));
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--d360-rule);
}
.d360-routes li { border-top: 1px solid var(--d360-rule); }
.d360-routes a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "label arrow" "hint arrow";
	align-items: center;
	column-gap: 16px;
	padding: 18px 0;
	color: var(--d360-ink);
	text-decoration: none;
}
.d360-routes__label {
	grid-area: label;
	font-family: var(--d360-f-display);
	font-weight: 700;
	font-size: calc(32px + 32 * var(--d360-g));
	line-height: calc(34px + 34 * var(--d360-g));
}
.d360-routes__hint { grid-area: hint; margin-top: 2px; font-size: calc(13px + 13 * var(--d360-g)); line-height: calc(18px + 18 * var(--d360-g)); color: var(--d360-muted); }
.d360-routes .d360-icon { grid-area: arrow; width: calc(28px + 28 * var(--d360-g)); height: calc(28px + 28 * var(--d360-g)); transition: transform 200ms var(--d360-ease-out); }
@media (hover: hover) {
	.d360-routes a:hover .d360-icon { transform: translateX(6px); }
}
@media (hover: hover) {
	.d360-routes a:hover .d360-routes__label { text-decoration: underline; text-decoration-thickness: 2px; }
}
@media (max-width: 767px) {
	.d360-routes__label { font-size: 26px; line-height: 28px; }
}

/* ---------- 404 ---------- */

.d360-lost-media img { width: 100%; height: 100%; min-height: calc(480px + 480 * var(--d360-g)); object-fit: cover; }
.d360-lost-media .widget-image-caption,
.d360-lost-media figcaption { margin-top: 10px; text-align: left; font-size: calc(13px + 13 * var(--d360-g)); line-height: calc(18px + 18 * var(--d360-g)); color: var(--d360-muted); }
@media (max-width: 1024px) {
	.d360-lost-media img { min-height: 0; aspect-ratio: 3 / 2; }
}

/* ---------- Smart Glasses: stops route ---------- */

.d360-route-track {
	display: flex;
	gap: 35px;
	margin: 0;
	padding: 56px var(--d360-edge) 88px; /* the content edge (style.css tokens); 20px on phones below */
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--d360-edge);
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
	overscroll-behavior-x: contain;
}
.d360-route-track:focus-visible { outline: 2px solid var(--d360-paper); outline-offset: -2px; }
.d360-route-track::-webkit-scrollbar { height: 6px; }
.d360-route-track::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.5); }
.d360-stop { flex: 0 0 calc(340px + 340 * var(--d360-g)); scroll-snap-align: start; color: var(--d360-paper); }
.d360-stop__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--d360-ink); }
.d360-stop__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d360-stop__media--num {
	display: flex;
	align-items: flex-end;
	padding: 0 20px 6px;
	border: 1px solid rgba(255, 255, 255, 0.28);
}
.d360-stop__media--num span {
	font-family: var(--d360-f-display);
	font-weight: 700;
	font-size: calc(150px + 150 * var(--d360-g));
	line-height: 0.8;
	letter-spacing: -4px;
}
.d360-stop__meta { display: flex; gap: 12px; margin: 18px 0 0; font-size: calc(13px + 13 * var(--d360-g)); line-height: calc(18px + 18 * var(--d360-g)); color: rgba(255, 255, 255, 0.72); }
.d360-stop__n { color: var(--d360-paper); text-transform: uppercase; letter-spacing: 0.06em; }
.d360-stop h3 {
	margin: 8px 0 0;
	font-family: var(--d360-f-display);
	font-weight: 700;
	font-size: calc(27px + 27 * var(--d360-g));
	line-height: calc(30px + 30 * var(--d360-g));
	color: var(--d360-paper);
}
.d360-stop p:last-child { margin: 10px 0 0; color: rgba(255, 255, 255, 0.86); }

.d360-route-nav { display: flex; gap: 12px; }
.d360-route-nav[hidden] { display: none; }
.d360-route-nav button {
	display: inline-grid;
	place-items: center;
	width: calc(56px + 56 * var(--d360-g));
	height: calc(56px + 56 * var(--d360-g));
	padding: 0;
	border: 1px solid var(--d360-paper);
	border-radius: 50%;
	background: none;
	color: var(--d360-paper);
	cursor: pointer;
	transition: background-color 160ms ease-out, color 160ms ease-out, opacity 160ms ease-out;
}
@media (hover: hover) {
	.d360-route-nav button:hover { background: var(--d360-paper); color: var(--d360-ink); }
}
.d360-route-nav button:disabled { opacity: 0.3; pointer-events: none; }
.d360-route-nav .d360-icon { width: calc(24px + 24 * var(--d360-g)); height: calc(24px + 24 * var(--d360-g)); }
.d360-route-nav [data-dir="-1"] .d360-icon { transform: scaleX(-1); }

@media (max-width: 767px) {
	.d360-route-nav { display: none; }
	.d360-route-track { gap: 20px; padding: 36px 20px 48px; scroll-padding-inline: 20px; }
	.d360-stop { flex-basis: 80vw; }
}

/* ---------- FAQ (Elementor accordion with class d360-faq) ---------- */

.d360-faq .e-n-accordion-item { border-top: 1px solid var(--d360-rule); }
.d360-faq .e-n-accordion-item:last-child { border-bottom: 1px solid var(--d360-rule); }

/* ---------- Motion ---------- */

/* Fade up (DESIGN.md "Motion"): the one movement on the site. templates.js adds d360-rise-wait only
   to key elements below the first screen, then swaps it for d360-rise-in when they scroll into view.
   The class is tripled on purpose: Elementor gives every element its own `transition` (transform only,
   0.4s), and at equal weight it won, so the opacity snapped to 1 instead of fading (measured 8 Oct). */
.d360-rise-wait.d360-rise-wait.d360-rise-wait { opacity: 0; transform: translateY(14px); transition: none; }
.d360-rise-in.d360-rise-in.d360-rise-in {
	opacity: 1;
	transform: none;
	/* 0.9s `ease`: the Coming Soon page's fade-in, the brand's existing motion. */
	transition: opacity 900ms ease, transform 900ms ease;
	transition-delay: var(--d360-rise-delay, 0ms);
}
@media print {
	.d360-rise-wait.d360-rise-wait.d360-rise-wait { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.d360-rise-wait.d360-rise-wait.d360-rise-wait { opacity: 1; transform: none; }
	.d360-rise-in.d360-rise-in.d360-rise-in { transition: none; }
	.d360-card .d360-card-media img,
	.d360-arrow-link .d360-icon,
	.d360-routes .d360-icon { transition: none; }
	.d360-card:hover .d360-card-media img { transform: none; }
}

/* ---------- Home: rooftop view carousel (Elementor image carousel, class d360-view-carousel) ---------- */

/* A fixed frame so the crossfade never changes height between photos of different shapes. */
.d360-view-carousel .swiper-slide-image { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.d360-view-carousel .elementor-image-carousel-caption {
	margin-top: 10px;
	font-family: var(--d360-f-body);
	font-size: calc(13px + 13 * var(--d360-g));
	line-height: calc(18px + 18 * var(--d360-g));
	font-weight: 300;
	color: var(--d360-muted);
	text-align: left;
}
.d360-view-carousel .swiper-pagination-bullet { background: var(--d360-ink); opacity: 0.25; }
.d360-view-carousel .swiper-pagination-bullet-active { opacity: 1; }
/* Doubled class beats the kit's .elementor-kit-5 button rules (including :hover). */
.elementor-widget.d360-view-carousel .d360-carousel-toggle,
.elementor-widget.d360-view-carousel .d360-carousel-toggle:hover,
.elementor-widget.d360-view-carousel .d360-carousel-toggle:focus {
	display: block;
	width: auto;
	min-height: 0;
	margin: 12px 0 0 auto;
	padding: 6px 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--d360-f-body);
	font-size: calc(13px + 13 * var(--d360-g));
	line-height: calc(18px + 18 * var(--d360-g));
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	color: var(--d360-ink);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

/* ---------- Home: social grid of visitor photos (class d360-social-grid) ---------- */

.d360-social-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

/* ---------- Menu popup: Explore column (class d360-menu-explore) ---------- */

/* On phones the popup's columns wrap and centre; at its natural width this column lines up with the main list. */
@media (max-width: 767px) {
	.e-con.d360-menu-explore { --width: auto; width: auto; }
}

/* ---------- Gallery page (Elementor basic gallery, class d360-gallery) ---------- */

/* A real grid instead of WordPress's floats, which snag when some items carry captions and others don't.
   Portrait and landscape shots share one 4:3 frame; the lightbox shows the whole photo. */
/* Gutter 20px (12px on phones and tablets), the system gutter. Elementor gives .gallery a negative margin
   for its own spacing, which pushed the grid past the right edge, so the margin is reset at its weight. */
.d360-gallery .gallery,
.elementor-widget.d360-gallery .elementor-image-gallery .gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; }
.d360-gallery .gallery > br { display: none; }
/* Five classes: beats Elementor's .elementor-image-gallery .gallery.gallery-columns-N .gallery-item phone rule. */
.elementor-widget.d360-gallery .elementor-image-gallery .gallery .gallery-item { width: auto; max-width: none; margin: 0; padding: 0; float: none; }
.d360-gallery .gallery-caption { display: none; }
.d360-gallery .gallery-item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.d360-gallery .gallery-item a { display: block; }
@media (max-width: 1024px) {
	.d360-gallery .gallery,
	.elementor-widget.d360-gallery .elementor-image-gallery .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	/* An odd count would leave one tile alone on the last row; it takes the full row instead. */
	.elementor-widget.d360-gallery .elementor-image-gallery .gallery .gallery-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.d360-gallery .gallery-item a:focus-visible { outline: 2px solid var(--d360-ink); outline-offset: 3px; }

/* ---------- Article excerpt and lead card ---------- */

.e-con.e-con > .e-con-inner > .elementor-widget.d360-excerpt,
.elementor.elementor .e-con > .elementor-widget.d360-excerpt { max-width: calc(760px + 760 * var(--d360-g)); }
.d360-excerpt p { margin: 0; }
.d360-card--lead .d360-card-media img { aspect-ratio: 869 / 553; }
.d360-card--lead .d360-card-title a::after { z-index: 1; }

.d360-result-excerpt { margin: 0; max-width: 72ch; }
.d360-result-excerpt mark { background: none; color: inherit; font-weight: 700; }

/* ---------- Smart Glasses page: Elementor bindings ---------- */

.e-con.d360-ar-hero__text {
	padding: 72px 48px 72px var(--d360-edge); /* the content edge (DESIGN.md Layout) */
}
/* Photo first, text second (Home's Smart Glasses band): the text ends on the content edge instead,
   or on wide screens it drifts past the grid (found 2026-10-14). */
@media (min-width: 1025px) {
	.d360-ar-hero__media + .e-con.d360-ar-hero__text { padding-left: 48px; padding-right: var(--d360-edge); }
}
.d360-ar-hero__text .elementor-heading-title { max-width: calc(740px + 740 * var(--d360-g)); }
.e-con.e-con > .elementor-widget.d360-hero-lede,
.elementor.elementor .e-con > .elementor-widget.d360-hero-lede { max-width: calc(470px + 470 * var(--d360-g)); }
.d360-hero-lede p { margin: 0; }
.e-con.d360-ar-hero__media { position: relative; min-height: calc(420px + 420 * var(--d360-g)); }
.d360-ar-hero__img,
.d360-ar-hero__img .elementor-widget-container { position: absolute; inset: 0; }
.d360-ar-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 40%; }
.d360-ar-hero .d360-outline .elementor-button { min-height: calc(50px + 50 * var(--d360-g)); color: var(--d360-paper); }
@media (hover: hover) {
	.d360-ar-hero .d360-outline .elementor-button:hover { background: var(--d360-paper); color: var(--d360-ink); }
}
@media (max-width: 1024px) {
	.e-con.d360-ar-hero__text { padding: 40px 60px 48px; }
	.e-con.d360-ar-hero__media { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 767px) {
	.e-con.d360-ar-hero__text { padding: 40px 20px 48px; }
	.e-con.d360-ar-hero__media { aspect-ratio: 1 / 1; }
	.d360-ar-hero__img img { object-position: 72% 40%; }
	.d360-ar-hero .d360-outline .elementor-button { min-height: 44px; }
}

.d360-row-media img { width: 100%; aspect-ratio: 869 / 553; object-fit: cover; }
.d360-way__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.d360-ways .elementor-widget-text-editor ul { margin: 12px 0 0; padding-left: 1.2em; }
.d360-ways .elementor-widget-text-editor li + li { margin-top: 6px; }
.d360-ways .elementor-widget-text-editor p { margin: 0; max-width: calc(520px + 520 * var(--d360-g)); }

.e-con.d360-route-track { overflow-x: auto; }
.e-con.d360-stop { flex: 0 0 calc(340px + 340 * var(--d360-g)); max-width: calc(340px + 340 * var(--d360-g)); scroll-snap-align: start; }
.d360-stop .elementor-widget-text-editor p { margin: 0; }
.e-con.d360-stop .elementor-widget-text-editor p.d360-stop__meta { margin-top: 18px; }
.d360-stop .elementor-widget-heading h3 { margin-top: 8px; }
.e-con.d360-stop .elementor-widget-text-editor:last-child p { margin-top: 10px; color: rgba(255, 255, 255, 0.86); }
.elementor-widget.d360-stop__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--d360-ink); }
.elementor-widget.d360-stop__media img { width: 100%; height: 100%; object-fit: cover; }
.elementor-widget.d360-stop__media--num {
	display: flex;
	align-items: flex-end;
	padding: 0 20px 6px;
	border: 1px solid rgba(255, 255, 255, 0.28);
}
.d360-stop__media--num .elementor-heading-title {
	font-family: var(--d360-f-display);
	font-weight: 700;
	font-size: calc(150px + 150 * var(--d360-g));
	line-height: 0.8;
	letter-spacing: -4px;
}
@media (max-width: 767px) {
	.e-con.d360-stop { flex-basis: 80vw; max-width: 80vw; }
}

/* Classic accordion as the FAQ list */
.d360-faq .elementor-accordion-item { border: 0; border-top: 1px solid var(--d360-rule); }
.d360-faq .elementor-accordion-item:last-child { border-bottom: 1px solid var(--d360-rule); }
.d360-faq .elementor-accordion-item + .elementor-accordion-item { border-top: 1px solid var(--d360-rule); }
.d360-faq .elementor-tab-title {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 22px 0;
	border: 0;
}
.d360-faq .elementor-tab-title a,
.d360-faq .elementor-accordion-title {
	font-family: var(--d360-f-display);
	font-weight: 700;
	font-size: calc(24px + 24 * var(--d360-g));
	line-height: 1.15;
	color: var(--d360-ink);
	text-decoration: none;
}
.d360-faq .elementor-accordion-icon { color: var(--d360-ink); font-size: calc(16px + 16 * var(--d360-g)); }
.d360-faq .elementor-tab-content { padding: 0 0 22px; border: 0; }
.d360-faq .elementor-tab-content p { margin: 0; max-width: 72ch; }
@media (max-width: 767px) {
	.d360-faq .elementor-tab-title { padding: 18px 0; }
	.d360-faq .elementor-tab-title a, .d360-faq .elementor-accordion-title { font-size: 21px; }
}

/* Empty search: the loop grid renders an empty 60px box; drop it so the
   suggestions sit with the search box they belong to (40px on phones). */
.d360-results-wrap .elementor-widget-loop-grid:not(:has(.e-loop-item)) { display: none; }
.d360-results-wrap .d360-routes { margin-top: 8px; }

/* Text blocks inside template sections: the container gap sets the rhythm, so the
   paragraph's own 1em margins are removed at the block edges (kept between paragraphs). */
[class*="d360-"] .elementor-widget-text-editor p:first-child { margin-top: 0; }
[class*="d360-"] .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* 404: headline, intro and search read as one group; the routes sit one step further away. */
.d360-lost-text .d360-searchbox { margin-top: 8px; }
.d360-lost-text .d360-routes { margin-top: 16px; }

/* "See the eleven stops" lands below the sticky header, not under it. */
.d360-route { scroll-margin-top: calc(var(--d360-sticky-offset, 110px) - 40px); }

/* Safari ignores aspect-ratio on these stretched flex items, so number cards came out
   shorter than photo cards. Stop widths are fixed, so the 3:2 height is set outright. */
.e-con.d360-stop .elementor-widget.d360-stop__media { height: calc(226px + 226 * var(--d360-g)); aspect-ratio: auto; }
@media (max-width: 767px) {
	.e-con.d360-stop .elementor-widget.d360-stop__media { height: calc(80vw / 1.5); }
}

/* Home "What's in a visit" (13 Oct 2026): a short route whose four stops share the content width
   on desktop, so nothing scrolls and the arrows go. Tablets and phones keep the scroller. */
@media (min-width: 1025px) {
	.d360-route--fit .e-con.d360-stop { flex: 1 1 0; max-width: none; min-width: 0; }
	.d360-route--fit .e-con.d360-stop .elementor-widget.d360-stop__media { height: calc((min(100vw - 120px, var(--d360-container)) - 105px) / 6); }
	.d360-route--fit .d360-route-nav { display: none; }
}

/* ==========================================================================
   Standard page and landing kits (8 Oct 2026)
   ========================================================================== */

/* ---------- Standard page ---------- */
.d360-page-head .d360-lede { margin-top: 24px; }

/* Elementor-built pages keep their own full-width layouts inside the Standard page
   template: no crumbs, head, rail or help strip, and no extra box or padding. */
body.d360-built .d360-page-crumbs,
body.d360-built .d360-page-head-wrap,
body.d360-built .d360-page-rail,
body.d360-built .d360-help-strip { display: none; }
body.d360-built .e-con.d360-page-layout {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--content-width: 100%;
}
body.d360-built .e-con.d360-page-layout > .e-con-inner { max-width: none; }
body.d360-built .e-con.d360-page-main { --width: 100%; width: 100%; }

/* Elementor-built pages that opt in to the Standard head (custom field d360_page_head = 1): crumbs,
   head and help strip come back; the body keeps its own Elementor layout and the rail stays hidden. */
body.d360-built.d360-headed .d360-page-crumbs,
body.d360-built.d360-headed .d360-page-head-wrap,
body.d360-built.d360-headed .d360-help-strip { display: flex; }
body.d360-built.d360-headed .e-con.d360-page-layout { --padding-top: 64px; }
@media (max-width: 767px) {
	body.d360-built.d360-headed .e-con.d360-page-layout { --padding-top: 32px; }
}

/* The help strip never links to the page it sits on. */
body.page-id-311 .d360-help-strip .elementor-widget-button:has(a[href*="/faqs/"]),
body.page-id-257 .d360-help-strip .elementor-widget-button:has(a[href*="/contact-us/"]) { display: none; }

.d360-help-strip > .e-con-inner {
	padding: 32px 0;
	border-top: 1px solid var(--d360-ink);
	border-bottom: 1px solid var(--d360-rule);
}

/* Help, legal and form bodies under the Standard head (class d360-help-body on the container): one
   column on the content edge, held to the lede's 760px measure so lines and fields stay readable. */
.e-con.d360-help-body > .e-con-inner > .elementor-widget,
.e-con.d360-help-body.e-con-full > .elementor-widget { width: 100%; max-width: calc(760px + 760 * var(--d360-g)); }
.e-con.d360-help-body .elementor-widget-text-editor ul { padding-left: 1.2em; }

/* Space before the footer skyline (DESIGN.md "Page end"): a light page ends 96px above the skyline,
   64px on phones; a dark band runs flush. Elementor puts a boxed container's top and bottom padding
   on its inner box, which the ruled band above replaces, so the help strip's own padding never
   applied and it sat on the skyline. The space round it is set here as margin instead. */
.e-con.d360-help-strip { margin-top: 64px; margin-bottom: 96px; }
body.d360-built:not(.d360-headed) .e-con.d360-page-main:not(:has(.elementor > .e-con.d360-on-dark:last-child)) { padding-bottom: 96px; }
@media (max-width: 767px) {
	.e-con.d360-help-strip { margin-top: 48px; margin-bottom: 64px; }
	body.d360-built:not(.d360-headed) .e-con.d360-page-main:not(:has(.elementor > .e-con.d360-on-dark:last-child)) { padding-bottom: 64px; }
}

/* ---------- Facts grid ---------- */
.e-con.d360-fact { padding: 22px 0 26px; border-top: 1px solid var(--d360-ink); }
.d360-fact .d360-fact__label p { color: var(--d360-muted); }
.d360-fact .d360-fact__note p { color: var(--d360-muted); }
@media (max-width: 767px) { .e-con.d360-fact { padding: 18px 0 20px; } }
/* The last row's bottom padding is invisible space (cards carry a top rule only), so the block gives it
   back and the next block sits the usual 96px (64px) below the last fact. */
.e-con.d360-block-facts { margin-bottom: -26px; }
@media (max-width: 767px) { .e-con.d360-block-facts { margin-bottom: -20px; } }

/* ---------- Full-bleed photo with Ink Glass panel ---------- */
.e-con.d360-glass-panel { background: var(--d360-ink-glass); }
.d360-glass-panel ul { margin: 0; padding-left: 1.2em; }
.d360-glass-panel li + li { margin-top: 8px; }
@media (max-width: 767px) {
	.e-con.d360-glass-band {
		--min-height: 0px;
		min-height: 0;
		padding-top: 75vw;
		/* Fill the 75vw photo area by height; landscape photos then cover the full width. */
		background-size: auto 75vw !important;
		background-position: top center !important;
		background-repeat: no-repeat !important;
		background-color: var(--d360-ink);
	}
	.e-con.d360-glass-panel { --width: 100%; width: 100%; background: var(--d360-ink); }
}

/* ---------- Poster hero (campaign) ---------- */
.e-con.d360-poster { position: relative; overflow: hidden; }
.e-con.d360-poster::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* Bottom-up layer sits under the text block; the side layer keeps the face clear. */
	background:
		linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0) 72%);
}
.e-con.d360-poster > .e-con-inner,
.e-con.d360-poster > .elementor-element { position: relative; z-index: 1; }
.d360-poster .elementor-heading-title { max-width: calc(760px + 760 * var(--d360-g)); }
.d360-poster .d360-poster__lede { max-width: calc(500px + 500 * var(--d360-g)); }
.d360-poster .d360-poster__note p { color: rgba(255, 255, 255, 0.78); }
@media (max-width: 767px) {
	.e-con.d360-poster::after { background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.65) 55%, rgba(0, 0, 0, 0.05) 85%); }
}

/* ---------- Proof points, steps, group types ---------- */
.e-con.d360-proof__item { padding-top: 22px; border-top: 1px solid var(--d360-ink); }
.e-con.d360-step { padding: 20px 0 24px; border-top: 1px solid var(--d360-ink); }
.d360-step__n .elementor-heading-title { font-family: var(--d360-f-display); font-weight: 700; font-size: calc(64px + 64 * var(--d360-g)); line-height: 0.85; }
/* Fixed number column so step text aligns whatever the digit's width. */
.e-con.d360-step > .elementor-widget.d360-step__n { flex: 0 0 calc(40px + 40 * var(--d360-g)); width: calc(40px + 40 * var(--d360-g)); max-width: calc(40px + 40 * var(--d360-g)); }
@media (max-width: 767px) {
	.d360-step__n .elementor-heading-title { font-size: 48px; }
	.e-con.d360-step > .elementor-widget.d360-step__n { flex-basis: 30px; width: 30px; max-width: 30px; }
}
.d360-media-fill img { width: 100%; height: 100%; min-height: calc(420px + 420 * var(--d360-g)); object-fit: cover; }
@media (max-width: 1024px) { .d360-media-fill img { min-height: 0; aspect-ratio: 3 / 2; } }
.d360-ratio-3-2 img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.d360-ratio-4-3 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Arrow link as an Elementor button: text, not a pill */
.elementor-widget.d360-arrow-link .elementor-button {
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--d360-ink);
	font-family: var(--d360-f-button);
	font-weight: 700;
	font-size: calc(22px + 22 * var(--d360-g));
	line-height: 1;
}
.elementor-widget.d360-arrow-link .elementor-button-icon svg { width: calc(20px + 20 * var(--d360-g)); height: calc(20px + 20 * var(--d360-g)); transition: transform 200ms var(--d360-ease-out); }
@media (hover: hover) {
	.elementor-widget.d360-arrow-link .elementor-button:hover { background: none; color: var(--d360-ink); }
	.elementor-widget.d360-arrow-link .elementor-button:hover .elementor-button-icon svg { transform: translateX(4px); }
}

/* ---------- Photo strip ---------- */
.e-con.d360-strip > .e-con { flex: 1 1 0; min-width: 0; }
.d360-strip .d360-strip__caption { padding: 0 60px; }
@media (max-width: 1024px) { .d360-strip .d360-strip__caption { padding: 0 20px; } }
@media (max-width: 767px) {
	.e-con.d360-strip { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-left: 20px; padding-right: 20px; }
	.e-con.d360-strip::-webkit-scrollbar { display: none; }
	.e-con.d360-strip > .e-con { flex: 0 0 80vw; scroll-snap-align: center; }
	.d360-strip .d360-strip__caption { padding: 0; }
}

/* ---------- Enquiry form (Elementor Pro form, class d360-form) ---------- */
/* The rule splits the usual 96px (64px on phones) between blocks: half above it, half below. The inner
   padding replaces the container's own top padding (Elementor puts it on the inner box), so the half
   above is margin on the block itself. */
.e-con.d360-enquire { margin-top: 48px; }
.e-con.d360-enquire > .e-con-inner { padding-top: 48px; border-top: 1px solid var(--d360-ink); }
@media (max-width: 767px) {
	.e-con.d360-enquire { margin-top: 32px; }
	.e-con.d360-enquire > .e-con-inner { padding-top: 32px; }
}
.d360-enquire .d360-contact-line p { display: flex; align-items: center; gap: 10px; margin: 0; }
.d360-form .elementor-field-group { margin-bottom: 0; }
.d360-form .elementor-form-fields-wrapper { row-gap: 20px; }
.d360-form .elementor-field-label {
	margin-bottom: 8px;
	font-family: var(--d360-f-body);
	font-weight: 300;
	font-size: calc(13px + 13 * var(--d360-g));
	line-height: calc(18px + 18 * var(--d360-g));
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--d360-ink);
}
.d360-form .elementor-field-textual,
.d360-form .elementor-field-group .elementor-select-wrapper select {
	min-height: calc(53px + 53 * var(--d360-g));
	padding: 14px 16px;
	border: 1px solid var(--d360-field-border);
	border-radius: 0;
	background: var(--d360-paper);
	color: var(--d360-ink);
	font-family: var(--d360-f-body);
	font-weight: 300;
	font-size: calc(16px + 16 * var(--d360-g));
}
.d360-form .elementor-field-textual:focus,
.d360-form .elementor-select-wrapper select:focus { outline: 2px solid var(--d360-ink); outline-offset: 0; border-color: var(--d360-ink); box-shadow: none; }
.d360-form .elementor-field-type-acceptance .elementor-field-subgroup label,
.d360-form .elementor-field-option label { font-size: calc(14px + 14 * var(--d360-g)); line-height: calc(20px + 20 * var(--d360-g)); text-transform: none; letter-spacing: 0; }
.d360-form input[type="checkbox"] { width: calc(20px + 20 * var(--d360-g)); height: calc(20px + 20 * var(--d360-g)); accent-color: var(--d360-ink); }
.d360-form .elementor-button {
	min-height: calc(50px + 50 * var(--d360-g));
	padding: 0 24px;
	border-radius: 25px;
	background: var(--d360-ink-glass);
	color: var(--d360-paper);
	font-family: var(--d360-f-button);
	font-weight: 700;
	font-size: calc(24px + 24 * var(--d360-g));
}
@media (hover: hover) { .d360-form .elementor-button:hover { background: var(--d360-ink); } }
.d360-form .elementor-button:focus-visible { outline: 2px solid var(--d360-ink); outline-offset: 3px; }
.d360-form .elementor-message { font-size: calc(16px + 16 * var(--d360-g)); }

/* ---------- Campaign header ---------- */
.d360-campaign-header .d360-campaign-logo img { width: calc(88px + 88 * var(--d360-g)); height: auto; }
@media (max-width: 767px) { .d360-campaign-header .d360-campaign-logo img { width: 64px; } }

/* Measure limits on Elementor widgets need Elementor's own specificity to win. */
.e-con.e-con > .e-con-inner > .elementor-widget.d360-poster__lede,
.elementor.elementor .e-con > .elementor-widget.d360-poster__lede { max-width: calc(500px + 500 * var(--d360-g)); }
.e-con.e-con > .e-con-inner > .elementor-widget.d360-hero-lede,
.elementor.elementor .e-con > .elementor-widget.d360-hero-lede { max-width: calc(470px + 470 * var(--d360-g)); }

/* ---------- A light block that ends a page needs room before the footer skyline ---------- */
.elementor[data-elementor-type="wp-page"] > .e-con:last-child:is(.d360-block-enquiry, .d360-block-facts, .d360-block-faq, .d360-block-proof, .d360-block-row, .d360-block-steps, .d360-block-strip, .d360-block-types) { padding-bottom: 96px; }
@media (max-width: 767px) {
	.elementor[data-elementor-type="wp-page"] > .e-con:last-child:is(.d360-block-enquiry, .d360-block-facts, .d360-block-faq, .d360-block-proof, .d360-block-row, .d360-block-steps, .d360-block-strip, .d360-block-types) { padding-bottom: 64px; }
}

/* ---------- Touch targets (critique 2026-10-09) ----------
   A control that stands on its own gets a 44px target on phones; links inside running text are
   exempt (WCAG 2.5.8). The doubled classes are needed to outrank Elementor's size classes and the
   component rules above. */
.elementor-widget.d360-form .elementor-button { min-height: calc(50px + 50 * var(--d360-g)); }
.d360-crumbs a { display: inline-block; padding-block: 14px; margin-block: -14px; }
/* Carousel dots stay 6px but take a 24px target, the WCAG 2.2 minimum; 24px apart so targets never overlap. */
.elementor-widget.d360-view-carousel .swiper-pagination-bullet { position: relative; margin: 0 9px; }
.elementor-widget.d360-view-carousel .swiper-pagination-bullet::after { content: ""; position: absolute; inset: -9px; }
@media (max-width: 767px) {
	.elementor-widget.d360-outline .elementor-button,
	.elementor-widget.d360-form .elementor-button { min-height: 44px; }
	.elementor-widget.elementor-widget.d360-view-carousel .d360-carousel-toggle { padding: 13px 0; }
	.d360-toc summary { min-height: 44px; }
}

/* ---------- Home hero video (HTML widget with class d360-hero-video) ----------
   The video fills the hero behind its gradient overlay (::after, z-index 1) and above the still
   photo (::before). The hero's own rule lifts every direct child to z-index 2, so the widget is
   pinned back down here. The poster shows until the video plays, and stays under reduced motion. */
.e-con > .elementor-widget.d360-hero-video {
	position: absolute !important;
	inset: 0;
	z-index: 0 !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	pointer-events: none;
}
.d360-hero-video .elementor-widget-container { position: absolute; inset: 0; }
.d360-hero-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Doubled class beats the kit's .elementor-kit-5 button rules (including :hover). */
.e-con > .d360-hero-video__toggle.d360-hero-video__toggle,
.e-con > .d360-hero-video__toggle.d360-hero-video__toggle:hover,
.e-con > .d360-hero-video__toggle.d360-hero-video__toggle:focus {
	position: absolute !important;
	z-index: 3 !important;
	right: max(60px, calc((100% - var(--d360-container)) / 2));
	bottom: 16px;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 13px 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--d360-f-body);
	font-size: calc(13px + 13 * var(--d360-g));
	line-height: calc(18px + 18 * var(--d360-g));
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	color: var(--d360-paper);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}
.e-con > .d360-hero-video__toggle:focus-visible { outline: 2px solid var(--d360-paper); outline-offset: 3px; }
@media (max-width: 767px) {
	.e-con > .d360-hero-video__toggle.d360-hero-video__toggle { right: 20px; bottom: 8px; }
}

/* ---------- Recite Me toolbar launchers (inc/recite.php, templates.js "Recite Me") ---------- */

/* Toolbar-only links (the footer's "Accessibility toolbar") stay hidden until a key is set. */
body:not(.d360-recite-on) .elementor-icon-list-item:has(> a[data-d360-recite-optional]) { display: none; }
a[data-d360-recite]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* Loading: a dimmed launcher and a progress cursor; no animation, nothing changes size. */
a[data-d360-recite][aria-busy="true"] { opacity: 0.6; cursor: progress; }
/* The header's small utility link gets a 44px tall hit area without moving anything. */
.elementor-location-header a[data-d360-recite] { position: relative; }
.elementor-location-header a[data-d360-recite]::before {
	content: "";
	position: absolute;
	left: -8px;
	right: -8px;
	top: 50%;
	height: 44px;
	transform: translateY(-50%);
}
/* Accessibility page block: the outline button, not an underlined prose link. */
.d360-recite-cta a.d360-outline.d360-outline { text-decoration: none; }
@media (hover: hover) {
	.d360-recite-cta a.d360-outline.d360-outline:hover { color: var(--d360-paper); }
}
.d360-recite-status:empty { margin: 0; }
/* The first message ("Loading") appears on the click itself; from then on the status keeps room for its
   longest message (two lines of prose, three on phones), so a later message never pushes the page down. */
.d360-recite-status:not(:empty) { min-height: 52px; }
@media (max-width: 767px) {
	.d360-recite-status:not(:empty) { min-height: 78px; }
}

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

/* ---------- Map consent placeholder (large screens, 2026-10-14) ---------- */

/* Before consent, Complianz sizes a blocked map's placeholder from its image's ratio and the
   container's width. On the full-width maps (Contact, Getting Here) that made the placeholder
   2,763px tall at 3840 wide, though the map itself is 748px. Keep it at the map's own height. */
.elementor-widget-google_maps .cmplz-placeholder-parent.cmplz-blocked-content-container { height: auto; }