/* aics-base */
/*
 * AICS base — brand-neutral tokens and the motion pre-state contract.
 *
 * AICS never names a client colour. It reads semantic --cmp-* tokens supplied by
 * the client child theme; the fallbacks below are deliberately neutral greys so a
 * missing brand kit is obvious rather than silently "on brand".
 */

body {
	--cmp-ease-out: cubic-bezier(.22, 1, .36, 1);
	--cmp-ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--cmp-dur-fast: .24s;
	--cmp-dur: .5s;
	--cmp-dur-slow: .9s;
	--cmp-glass-blur: 18px;
	--cmp-focus: var(--cmp-accent, #8a8a8a);
}

/* Focus visibility — keyboard users always get a clear ring. */
:where(.elementor-button, .elementor-tab-title, .e-n-tab-title, .elementor-accordion-title, a):focus-visible {
	outline: 2px solid var(--cmp-focus);
	outline-offset: 3px;
	border-radius: 2px;
}

/*
 * Motion pre-states.
 * Only active while <html> has .aics-motion (set by the head gate, removed by the
 * failsafe if the runtime never loads). Only CHILD WIDGETS are ever hidden —
 * never layout containers — and the runtime marks each finished element
 * .aics-done so its resting state is the plain Elementor state.
 */
.aics-motion .cmp-reveal:not(.aics-done),
.aics-motion .cmp-split:not(.aics-done),
.aics-motion .cmp-flow__node > .elementor-widget:not(.aics-done),
.aics-motion .cmp-flow__node > .e-con-inner > .elementor-widget:not(.aics-done),
.aics-motion .cmp-flow__label:not(.aics-done),
.aics-motion .cmp-timeline__marker > .elementor-widget:not(.aics-done),
.aics-motion .cmp-timeline__body > .elementor-widget:not(.aics-done),
.aics-motion .cmp-arrow:not(.aics-done),
.aics-motion .cmp-timeline__pointer:not(.aics-done) {
	opacity: 0;
}

.aics-motion .cmp-line:not(.aics-done) .elementor-divider-separator {
	clip-path: inset(0 100% 0 0);
}

.aics-motion .cmp-line--v:not(.aics-done),
.aics-motion .cmp-timeline__axis:not(.aics-done) {
	clip-path: inset(0 0 100% 0);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Text widgets: the last paragraph never adds trailing space inside a component. */
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Lenis smooth scroll (only active when the runtime adds .aics-lenis). */
html.aics-lenis, html.aics-lenis body { height: auto; }
.aics-lenis.lenis-smooth { scroll-behavior: auto !important; }
.aics-lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.aics-lenis.lenis-stopped { overflow: hidden; }

/* Alpine: hide un-initialised templates. */
[x-cloak] { display: none !important; }

/*
 * Cross-document View Transitions — native, zero-JS page-to-page cross-fade in
 * supporting browsers; others navigate normally. Disabled for reduced motion.
 */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	::view-transition-old(root),
	::view-transition-new(root) { animation-duration: .38s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
}

/* aics-utilities */
/*
 * AICS utilities — reusable polish. Every utility is an enhancement: remove this
 * file and the component keeps its Elementor surface, borders, spacing and content.
 */

/* ---------------------------------------------------------------- Glass
 * Native Elementor supplies the translucent background colour + 1px border
 * (global "Glass" colours). AICS adds the backdrop blur and a specular edge.
 * Use .cmp-glass on dark surfaces, .cmp-glass.cmp-glass--light on light ones.
 */
.cmp-glass {
	position: relative;
	isolation: isolate;
	-webkit-backdrop-filter: blur(var(--cmp-glass-blur)) saturate(150%);
	backdrop-filter: blur(var(--cmp-glass-blur)) saturate(150%);
	box-shadow:
		inset 0 1px 0 0 rgb(255 255 255 / .08),
		0 30px 60px -30px rgb(0 0 0 / .45);
}
.cmp-glass::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(140deg, rgb(255 255 255 / .38), rgb(255 255 255 / 0) 32%, rgb(255 255 255 / 0) 68%, color-mix(in srgb, var(--cmp-accent, #999) 45%, transparent));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	z-index: 2;
}
.cmp-glass--light {
	box-shadow:
		inset 0 1px 0 0 rgb(255 255 255 / .9),
		0 24px 48px -28px rgb(15 25 40 / .22);
}
.cmp-glass--light::after {
	background: linear-gradient(140deg, rgb(255 255 255 / 1), rgb(255 255 255 / 0) 35%, rgb(255 255 255 / 0) 70%, color-mix(in srgb, var(--cmp-accent, #999) 35%, transparent));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.cmp-glass { background-color: color-mix(in srgb, var(--cmp-surface-dark-raised, #333) 88%, transparent) !important; }
	.cmp-glass--light { background-color: color-mix(in srgb, var(--cmp-surface-raised, #fff) 94%, transparent) !important; }
}

/* ---------------------------------------------------------------- Aurora backdrop
 * Slow, low-contrast light fields behind a section's content (+ fine grain).
 * Decorative only; paused for reduced motion.
 */
.cmp-aurora {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.cmp-aurora::after {
	content: "";
	position: absolute;
	inset: -20%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(38% 42% at 78% 22%, color-mix(in srgb, var(--cmp-accent, #999) 22%, transparent), transparent 70%),
		radial-gradient(46% 50% at 12% 88%, color-mix(in srgb, var(--cmp-surface-dark-raised, #555) 90%, transparent), transparent 72%),
		radial-gradient(30% 36% at 40% 40%, color-mix(in srgb, var(--cmp-accent-soft, #bbb) 8%, transparent), transparent 70%);
	filter: blur(10px);
	animation: cmp-aurora-drift 36s var(--cmp-ease-in-out) infinite alternate;
}
.cmp-aurora::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .07;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(https://ipx.demwp.com/wp-content/plugins/ai-component-system/assets/css/%23n)'/></svg>");
}
.cmp-aurora--light::after {
	background:
		radial-gradient(40% 44% at 85% 15%, color-mix(in srgb, var(--cmp-accent-soft, #ccc) 40%, transparent), transparent 70%),
		radial-gradient(40% 50% at 8% 90%, color-mix(in srgb, var(--cmp-accent, #999) 14%, transparent), transparent 72%);
}
.cmp-aurora--light::before { opacity: .05; mix-blend-mode: multiply; }
@keyframes cmp-aurora-drift {
	from { transform: translate3d(-2%, -1%, 0) scale(1); }
	to   { transform: translate3d(3%, 2%, 0) scale(1.06); }
}

/* ---------------------------------------------------------------- Hover: lift
 * Surface rises 4px, gains depth and an accent hairline ring (inset shadow, so
 * the native Elementor border is never overridden).
 */
.cmp-lift {
	transition:
		transform var(--cmp-dur) var(--cmp-ease-out),
		box-shadow var(--cmp-dur) var(--cmp-ease-out);
	will-change: transform;
}
@media (hover: hover) {
	.cmp-lift:hover {
		transform: translate3d(0, -4px, 0);
		box-shadow:
			inset 0 0 0 1px color-mix(in srgb, var(--cmp-accent, #999) 55%, transparent),
			0 28px 56px -28px rgb(10 20 35 / .35);
	}
}
.cmp-lift:focus-within {
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cmp-accent, #999) 70%, transparent);
}

/* ---------------------------------------------------------------- Hover: spotlight
 * A soft light follows the pointer across the surface (JS injects .cmp-spot and
 * feeds --mx/--my). Touch devices and no-JS simply don't get the light.
 */
.cmp-spotlight { position: relative; isolation: isolate; }
.cmp-spot {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: -1;
	opacity: 0;
	transition: opacity var(--cmp-dur) var(--cmp-ease-out);
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--cmp-accent, #999) 16%, transparent), transparent 60%);
}
.cmp-spotlight.is-lit .cmp-spot { opacity: 1; }

/* ---------------------------------------------------------------- Buttons */
.cmp-btn-sheen .elementor-button { position: relative; overflow: hidden; isolation: isolate; }
.cmp-btn-sheen .elementor-button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .45) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform .9s var(--cmp-ease-out);
}
@media (hover: hover) {
	.cmp-btn-sheen .elementor-button:hover::after { transform: translateX(120%); }
}

.cmp-magnetic .elementor-button { will-change: transform; }

.cmp-link-arrow .elementor-button-icon { transition: transform var(--cmp-dur) var(--cmp-ease-out); }
@media (hover: hover) {
	.cmp-link-arrow .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }
}
.cmp-link-arrow .elementor-button:focus-visible .elementor-button-icon { transform: translateX(4px); }

/* Underline that draws on hover for inline text links. */
.cmp-underline a {
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size var(--cmp-dur) var(--cmp-ease-out);
}
.cmp-underline a:hover, .cmp-underline a:focus-visible { background-size: 100% 1px; }

/* ---------------------------------------------------------------- Split text */
.cmp-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.cmp-w__i { display: inline-block; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
	.cmp-aurora::after { animation: none; }
	.cmp-lift:hover { transform: none; }
}

/* aics-components */
/*
 * AICS component polish. Structure, surfaces, borders, spacing and the static
 * connector lines are native Elementor; these rules only add state styling that
 * the runtime toggles (is-reached / is-active) and numeric typesetting.
 */

/* ---------------------------------------------------------------- Metrics */
.cmp-count .elementor-heading-title,
.cmp-tabular .elementor-heading-title {
	font-variant-numeric: lining-nums tabular-nums;
}

/* ---------------------------------------------------------------- Relationship flow */
.cmp-flow__node {
	transition: box-shadow 1.2s var(--cmp-ease-out);
}
.cmp-flow__node.is-reached.cmp-flow__node--key {
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--cmp-accent, #999) 60%, transparent),
		0 0 48px -8px color-mix(in srgb, var(--cmp-accent, #999) 45%, transparent);
}
.cmp-flow__link .elementor-divider { line-height: 0; }

/* ---------------------------------------------------------------- Vertical timeline */
.cmp-timeline__marker {
	transition: box-shadow 1s var(--cmp-ease-out), background-color 1s var(--cmp-ease-out);
}
.cmp-timeline__step.is-active .cmp-timeline__marker {
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--cmp-accent, #999) 16%, transparent);
}
.cmp-timeline__axis { flex-shrink: 0; }

/* ---------------------------------------------------------------- Pinned story (desktop, runtime mode)
 * Static/tablet/mobile: steps are a normal stacked list. The runtime adds
 * .is-pinned-mode only on desktop and removes it when the breakpoint no longer matches.
 */
.cmp-pin.is-pinned-mode .cmp-pin__stage { display: grid !important; align-items: center; }
.cmp-pin.is-pinned-mode .cmp-pin__step { grid-area: 1 / 1; }
.cmp-pin__fill { transform-origin: top center; }
.cmp-pin:not(.is-pinned-mode) .cmp-pin__progress { display: none; }

/* ---------------------------------------------------------------- Fee calculator (Alpine) */
.cmp-calc { display: grid; gap: 28px; font-family: var(--cmp-font-body); color: inherit; }
.cmp-calc__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.cmp-calc__label { font-size: 14px; font-weight: 600; letter-spacing: .02em; opacity: .75; }
.cmp-calc__value { font-family: var(--cmp-font-display); font-size: clamp(32px, 4vw, 48px); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.cmp-calc input[type="range"] { width: 100%; height: 28px; background: transparent; accent-color: var(--cmp-accent); cursor: pointer; }
.cmp-calc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--cmp-line); }
.cmp-calc__cell { padding: 20px 20px 4px 0; }
.cmp-calc__cell + .cmp-calc__cell { padding-left: 20px; border-left: 1px solid var(--cmp-line); }
.cmp-calc__cell dt { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .7; margin: 0 0 8px; }
.cmp-calc__cell dd { margin: 0; font-family: var(--cmp-font-display); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.cmp-calc__cell--key dd { color: var(--cmp-accent-strong); }
.cmp-calc__note { font-size: 13px; line-height: 1.55; opacity: .7; margin: 0; }
@media (max-width: 767px) {
	.cmp-calc__grid { grid-template-columns: 1fr; }
	.cmp-calc__cell, .cmp-calc__cell + .cmp-calc__cell { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--cmp-line); }
}

/* ---------------------------------------------------------------- Header (HD01)
 * Native: navy surface, padding, sticky (Elementor Pro). AICS: condenses into glass
 * once Elementor marks the sticky header as scrolled (.elementor-sticky--effects).
 */
.cmp-header {
	transition: background-color .45s var(--cmp-ease-out), box-shadow .45s var(--cmp-ease-out), padding .45s var(--cmp-ease-out);
}
.cmp-header.elementor-sticky--effects {
	--padding-top: 10px !important;
	--padding-bottom: 10px !important;
	background-color: color-mix(in srgb, var(--cmp-surface-dark, #111) 78%, transparent) !important;
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	backdrop-filter: blur(18px) saturate(150%);
	box-shadow: 0 1px 0 var(--cmp-line-inverse), 0 24px 48px -28px rgb(0 0 0 / .55);
}

/* Mega menu panel + destinations */
.cmp-menu-panel { box-shadow: 0 48px 96px -48px rgb(0 0 0 / .65); }
.cmp-menu-link { position: relative; transition: background-color .3s var(--cmp-ease-out); }
.cmp-menu-link .elementor-heading-title a { transition: color .3s var(--cmp-ease-out); }
.cmp-menu-link .elementor-heading-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cmp-menu-link:hover, .cmp-menu-link:focus-within { background-color: var(--cmp-glass-dark); }
.cmp-menu-link:hover .elementor-heading-title a,
.cmp-menu-link:focus-within .elementor-heading-title a { color: var(--cmp-accent-soft); }
.cmp-menu-panel .cmp-menu-link { animation: cmp-menu-in .55s var(--cmp-ease-out) both; }
.cmp-menu-panel .cmp-menu-link:nth-child(2) { animation-delay: .04s; }
.cmp-menu-panel .cmp-menu-link:nth-child(3) { animation-delay: .08s; }
.cmp-menu-panel .cmp-menu-link:nth-child(4) { animation-delay: .12s; }
.cmp-menu-panel .cmp-menu-link:nth-child(5) { animation-delay: .16s; }
.cmp-menu-panel .cmp-menu-link:nth-child(6) { animation-delay: .2s; }
@keyframes cmp-menu-in { from { opacity: 0; transform: translateY(8px); } }

/* Footer links */
.cmp-footer-link .elementor-heading-title a { transition: color .3s var(--cmp-ease-out); }
.cmp-footer-link .elementor-heading-title a:hover,
.cmp-footer-link .elementor-heading-title a:focus-visible { color: var(--cmp-accent-soft); }

/* Mega menu — collapsed (tablet/mobile) dropdown sits on the dark header surface.
 * Selector mirrors Elementor's own dropdown rule so source order (AICS loads later) decides. */
@media (max-width: 1024px) {
	.cmp-megamenu .e-n-menu[data-layout="dropdown"] .e-n-menu-wrapper {
		padding: 8px 8px 20px;
		background-color: var(--cmp-surface-dark);
		border-top: 1px solid var(--cmp-line-inverse);
		box-shadow: 0 32px 64px -32px rgb(0 0 0 / .6);
		max-height: calc(100dvh - 80px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.cmp-megamenu .cmp-menu-panel { box-shadow: none; }
}

/* ---------------------------------------------------------------- Mobile navigation (mnav.js)
 * Full-screen overlay on tablet / phone: logo + close on top, large menu items (groups expand),
 * gold CTA + phone at the bottom. Built from the header's mega menu by assets/js/mnav.js.
 */
.cmp-mnav { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; height: 100dvh; padding: 0 max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: var(--cmp-surface-dark, #071b2e); color: var(--cmp-text-inverse, #f7f5f0); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; overflow-y: auto; overscroll-behavior: contain; }
.cmp-mnav[hidden] { display: none; }
.cmp-mnav.is-open { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.cmp-mnav::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 70% at 100% 100%, color-mix(in srgb, var(--cmp-accent, #bda05f) 12%, transparent), transparent 60%); }
html.cmp-mnav-open, html.cmp-mnav-open body { overflow: hidden; }
.cmp-mnav__top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; border-bottom: 1px solid var(--cmp-line-inverse, rgba(255,255,255,.12)); }
.cmp-mnav__top .cmp-logo { pointer-events: auto; }
.cmp-mnav__close { position: relative; flex: none; width: 48px; height: 48px; margin-right: -8px; padding: 0; border: 0; background: none !important; cursor: pointer; }
.cmp-mnav__close span { position: absolute; left: 13px; top: 23px; width: 22px; height: 1.5px; background: var(--cmp-text-inverse, #f7f5f0); transform: rotate(45deg); }
.cmp-mnav__close span + span { transform: rotate(-45deg); }
.cmp-mnav__close:focus-visible { outline: 2px solid var(--cmp-accent, #bda05f); outline-offset: -4px; }
.cmp-mnav__list { flex: 1 0 auto; list-style: none; margin: 0; padding: clamp(16px, 4vh, 40px) 0 24px; }
.cmp-mnav__item { border-bottom: 1px solid var(--cmp-line-inverse, rgba(255,255,255,.12)); opacity: 0; transform: translateY(14px); }
.cmp-mnav.is-open .cmp-mnav__item { opacity: 1; transform: none; transition: opacity .5s ease calc(.08s + var(--i, 0) * .05s), transform .6s var(--cmp-ease-out, ease) calc(.08s + var(--i, 0) * .05s); }
.cmp-mnav .cmp-mnav__link { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 64px; padding: 14px 0; border: 0; background: none !important; color: var(--cmp-text-inverse, #f7f5f0) !important; font-family: var(--cmp-font-display, serif); font-size: clamp(26px, 7vw, 34px); font-weight: 400; line-height: 1.15; letter-spacing: 0; text-align: left; text-transform: none; text-decoration: none; cursor: pointer; white-space: normal; }
.cmp-mnav__toggle i { position: relative; flex: none; width: 16px; height: 16px; }
.cmp-mnav__toggle i::before, .cmp-mnav__toggle i::after { content: ""; position: absolute; left: 0; top: 7.5px; width: 16px; height: 1.5px; background: var(--cmp-accent-soft, #d9c89d); transition: transform .35s var(--cmp-ease-out, ease); }
.cmp-mnav__toggle i::after { transform: rotate(90deg); }
.cmp-mnav__toggle[aria-expanded="true"] i::after { transform: rotate(0deg); }
.cmp-mnav__toggle[aria-expanded="true"] { color: var(--cmp-accent-soft, #d9c89d) !important; }
.cmp-mnav__sub { list-style: none; margin: 0; padding: 0 0 18px; }
.cmp-mnav__sub a { display: block; padding: 9px 0 9px 18px; border-left: 1px solid var(--cmp-line-inverse, rgba(255,255,255,.12)); color: var(--cmp-text-inverse-muted, rgba(247,245,240,.72)) !important; font-size: 16px; line-height: 1.4; text-decoration: none; }
.cmp-mnav__sub a:hover, .cmp-mnav__sub a:focus-visible { color: var(--cmp-accent-soft, #d9c89d) !important; border-left-color: var(--cmp-accent, #bda05f); }
.cmp-mnav__foot { flex: none; display: grid; gap: 14px; padding-top: 8px; }
.cmp-mnav__cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; background: var(--cmp-accent, #bda05f); color: var(--cmp-surface-dark, #071b2e) !important; font: 600 13px/1.2 var(--cmp-font-body, sans-serif); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.cmp-mnav__tel { justify-self: center; padding: 6px; color: var(--cmp-text-inverse, #f7f5f0) !important; font-family: var(--cmp-font-display, serif); font-size: 22px; text-decoration: none; }
@media (min-width: 1025px) { .cmp-mnav { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .cmp-mnav, .cmp-mnav__item { transition: none !important; transform: none; } }

/* aics-chrome */
/*
 * AICS site chrome: logo + footer widgets. Small and site-wide (loaded wherever those widgets
 * render), so the full section-widget stylesheet stays off pages that don't need it.
 * Footer styles: s1 inset card over a closing photo (pattern P12), s2 giant wordmark (P11).
 */

.cmp-ico { width: 24px; height: 24px; flex: none; display: block; }

/* logo */
.cmp-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none !important; line-height: 1; }
.cmp-logo__mark { display: block; height: 40px; }
.cmp-logo__mark svg { height: 100%; width: auto; display: block; }
.cmp-logo__type { display: grid; gap: 5px; }
.cmp-logo__name { font-family: var(--cmp-font-display); font-size: 23px; letter-spacing: .06em; line-height: 1; }
.cmp-logo__sub { font-family: var(--cmp-font-body); font-size: 9.5px; font-weight: 600; letter-spacing: .22em; line-height: 1; color: var(--cmp-accent); }
.cmp-logo--light .cmp-logo__name { color: var(--cmp-text-inverse); }
.cmp-logo--dark .cmp-logo__name { color: var(--cmp-text); }
.cmp-logo--dark .cmp-logo__sub { color: var(--cmp-accent-strong); }

/* footer: shared */
.cmp-ft { position: relative; isolation: isolate; overflow: hidden; background: var(--cmp-surface-dark); color: var(--cmp-text-inverse); font-family: var(--cmp-font-body); font-size: 15px; line-height: 1.6; }
.cmp-ft *, .cmp-ft *::before, .cmp-ft *::after { box-sizing: border-box; }
.cmp-ft p { margin: 0; }
.cmp-ft a { color: inherit; text-decoration: none; transition: color .3s; }
.cmp-ft a:hover { color: var(--cmp-accent-soft); }
.cmp-ft__photo { position: absolute; inset: 0; z-index: -2; }
.cmp-ft__photo img { width: 100%; height: 100% !important; max-width: none; object-fit: cover; display: block; }
.cmp-ft__veil { position: absolute; inset: 0; z-index: -1; }
.cmp-ft__blurb { font-size: 15px; line-height: 1.65; max-width: 42ch; }
.cmp-ft__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 36px; }
.cmp-ft__contact a, .cmp-ft__loc { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; }
.cmp-ft__chip { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--cmp-surface-dark); color: var(--cmp-accent-soft); }
.cmp-ft__chip .cmp-ico { width: 18px; height: 18px; }
.cmp-ft__nav { display: flex; flex-wrap: wrap; gap: 10px 28px; font-weight: 600; }
/* logo bars before each footer link (replaces the old slash) */
.cmp-ft__navlink::before { content: ""; display: inline-block; width: .7em; height: 1.05em; margin-right: .55em; vertical-align: -.12em; background: var(--cmp-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 56'%3E%3Cpath d='M1 56V40l2.5-10L6 40v16zM8 56V28l2.5-10L13 28v28zM15 56V13l3-10 3 10v43zM23 56V24l2.5-10L28 24v32zM30 56V37l2.5-10L35 37v19z'/%3E%3C/svg%3E") center bottom / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 56'%3E%3Cpath d='M1 56V40l2.5-10L6 40v16zM8 56V28l2.5-10L13 28v28zM15 56V13l3-10 3 10v43zM23 56V24l2.5-10L28 24v32zM30 56V37l2.5-10L35 37v19z'/%3E%3C/svg%3E") center bottom / contain no-repeat; }
.cmp-ft__dtitle { margin-bottom: 8px !important; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cmp-accent-strong); }
.cmp-ft__disc { font-size: 12.5px; line-height: 1.65; max-width: 125ch; }
.cmp-ft__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 13px; }
.cmp-ft__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.cmp-ft__word { display: none; }

/* footer s1 - inset card over the closing photo (MLD) */
.cmp-ft--s1 { padding: clamp(48px, min(14vw, 100vh - 560px), 220px) max(16px, calc((100% - var(--cmp-container, 1360px)) / 2 + 16px)) 16px; }
.cmp-ft--s1 .cmp-ft__veil { background: linear-gradient(180deg, color-mix(in srgb, var(--cmp-surface-dark) 55%, transparent) 0%, color-mix(in srgb, var(--cmp-surface-dark) 20%, transparent) 45%, color-mix(in srgb, var(--cmp-surface-dark) 70%, transparent) 100%); }
.cmp-ft--s1 .cmp-ft__card { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-areas: "brand contact" "brand nav" "legal legal" "bar bar"; column-gap: clamp(32px, 5vw, 72px); padding: clamp(28px, 3.5vw, 48px); background: var(--cmp-surface); color: var(--cmp-text); border-top: 3px solid var(--cmp-accent); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55); }
.cmp-ft--s1 .cmp-ft__brand { grid-area: brand; padding-right: clamp(24px, 4vw, 56px); border-right: 1px solid var(--cmp-line); }
.cmp-ft--s1 .cmp-ft__blurb { margin-top: 20px !important; color: var(--cmp-text-muted); }
.cmp-ft--s1 .cmp-ft__contact { grid-area: contact; padding-bottom: 24px; border-bottom: 1px solid var(--cmp-line); }
.cmp-ft--s1 .cmp-ft__nav { grid-area: nav; padding-top: 24px; }
.cmp-ft--s1 .cmp-ft__legal { grid-area: legal; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--cmp-line); }
.cmp-ft--s1 .cmp-ft__disc { color: var(--cmp-text-muted); }
.cmp-ft--s1 .cmp-ft__bar { grid-area: bar; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--cmp-line); color: var(--cmp-text-muted); }
.cmp-ft--s1 a:hover { color: var(--cmp-accent-strong); }

/* footer s2 - giant wordmark (Brandigo) */
.cmp-ft--s2 { padding: clamp(72px, 8vw, 112px) max(20px, calc((100% - var(--cmp-container, 1360px)) / 2 + 32px)) 28px; text-align: center; }
.cmp-ft--s2 .cmp-ft__photo { right: auto; width: 24%; opacity: .45; -webkit-mask-image: linear-gradient(90deg, #000 10%, transparent 100%); mask-image: linear-gradient(90deg, #000 10%, transparent 100%); }
.cmp-ft--s2 .cmp-ft__photo--r { left: auto; right: 0; -webkit-mask-image: linear-gradient(270deg, #000 10%, transparent 100%); mask-image: linear-gradient(270deg, #000 10%, transparent 100%); }
.cmp-ft--s2 .cmp-ft__photo img { filter: grayscale(.4); }
.cmp-ft--s2 .cmp-ft__card { display: grid; grid-template-areas: "nav" "word" "brand" "contact" "legal" "bar"; justify-items: center; max-width: 1180px; margin: 0 auto; }
.cmp-ft--s2 .cmp-ft__nav { grid-area: nav; justify-content: center; color: var(--cmp-text-inverse-muted); }
.cmp-ft--s2 .cmp-ft__word { grid-area: word; display: block; margin: 28px 0 16px !important; font-family: var(--cmp-font-display); font-size: clamp(64px, 12.5vw, 196px); line-height: .92; letter-spacing: .02em; white-space: nowrap; background: linear-gradient(180deg, var(--cmp-accent-soft), var(--cmp-accent-strong)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cmp-ft--s2 .cmp-ft__brand { grid-area: brand; }
.cmp-ft--s2 .cmp-ft__brand .cmp-logo { display: none; }
.cmp-ft--s2 .cmp-ft__blurb { margin: 0 auto !important; max-width: 62ch; color: var(--cmp-text-inverse-muted); }
.cmp-ft--s2 .cmp-ft__contact { grid-area: contact; justify-content: center; margin-top: 32px; }
.cmp-ft--s2 .cmp-ft__chip { background: transparent; border: 1px solid var(--cmp-line-inverse); }
.cmp-ft--s2 .cmp-ft__legal { grid-area: legal; width: 100%; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--cmp-line-inverse); text-align: left; }
.cmp-ft--s2 .cmp-ft__dtitle { color: var(--cmp-accent-soft); }
.cmp-ft--s2 .cmp-ft__disc { color: var(--cmp-text-inverse-muted); }
.cmp-ft--s2 .cmp-ft__bar { grid-area: bar; width: 100%; margin-top: 20px; color: var(--cmp-text-inverse-muted); }

@media (max-width: 1024px) {
	.cmp-ft--s1 .cmp-ft__card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "contact" "nav" "legal" "bar"; }
	.cmp-ft--s1 .cmp-ft__brand { padding: 0 0 24px; margin-bottom: 24px; border-right: 0; border-bottom: 1px solid var(--cmp-line); }
	.cmp-ft--s2 .cmp-ft__photo { display: none; }
}
@media (max-width: 767px) {
	.cmp-ft--s1 { padding-top: 96px; }
	.cmp-ft__contact { flex-direction: column; gap: 12px; }
	.cmp-ft--s2 .cmp-ft__contact { align-items: center; }
	.cmp-ft__bar { flex-direction: column; }
	.cmp-logo__mark { height: 32px; }
	.cmp-logo__name { font-size: 19px; }
	.cmp-logo__sub { font-size: 8px; letter-spacing: .18em; }
}

/* short desktop windows (laptops, zoomed browsers): tighter footer card so the reveal still fits */
@media (min-width: 1025px) and (max-height: 680px) {
	.cmp-ft--s1 .cmp-ft__card { padding-block: 24px; }
	.cmp-ft--s1 .cmp-ft__contact { padding-bottom: 16px; }
	.cmp-ft--s1 .cmp-ft__nav { padding-top: 16px; }
	.cmp-ft--s1 .cmp-ft__legal { margin-top: 20px; padding-top: 16px; }
	.cmp-ft--s1 .cmp-ft__bar { margin-top: 14px; padding-top: 12px; }
}