/**
 * Atheria — Utility Stylesheet
 *
 * Global base styles, section rhythm, surface helpers, GSAP hooks,
 * Elementor overrides, forms, and component-level utilities.
 * All values reference --ath-* tokens from atheria-tokens.css.
 *
 * Load order: atheria-tokens → atheria-utilities → atheria-motion → per-widget.
 *
 * @package Atheria_Core
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. GLOBAL BASE
   ───────────────────────────────────────────────────────────────────────────── */

body {
	background:           var(--ath-frost);
	color:                var(--ath-arctic-navy);
	font-feature-settings: "kern" 1, "liga" 1;
	text-rendering:       optimizeLegibility;
	overflow-x:           hidden;
}

/* A scroll container on <body> re-anchors the sticky header's offset to <body>'s padding box the
   moment the root element takes an overflow of its own, painting it one admin bar too low; `clip`
   contains the same overflow and never becomes one. */
@supports (overflow-x: clip) {
	body {
		overflow-x:       clip;
	}
}

/* Elementor widget micro-fixes */
.elementor-widget-heading .elementor-heading-title { text-wrap: balance; }
.elementor-widget-text-editor p:last-child          { margin-bottom: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   2. SECTION RHYTHM — fluid padding utility classes
   Side padding is set as the container's own padding variable, one class
   weightier than Elementor's default and one lighter than padding set on the
   container by hand; a legacy section takes it directly.
   ───────────────────────────────────────────────────────────────────────────── */

.section-xxl,
.section-xl,
.section-l,
.section-m,
.section-s,
.section-xs,
.section-xxs,
.section-header {
	--ath-section-side-padding: clamp(var(--fluid-side-padding-min), 2.2vw + 0.75rem, var(--fluid-side-padding-max));
}

.e-con.section-xxl,
.e-con.section-xl,
.e-con.section-l,
.e-con.section-m,
.e-con.section-s,
.e-con.section-xs,
.e-con.section-xxs,
.e-con.section-header {
	--padding-left:  var(--ath-section-side-padding);
	--padding-right: var(--ath-section-side-padding);
}

/* A full-width container paints its block padding from Elementor's variables, so the vertical rhythm is set there too, at the same weight as the sides. */
.e-con-full:is(.section-xxl, .section-xl, .section-l, .section-m, .section-s, .section-xs, .section-xxs) {
	--padding-top:    var(--ath-section-block);
	--padding-bottom: var(--ath-section-block);
}

.elementor-section.section-xxl,
.elementor-section.section-xl,
.elementor-section.section-l,
.elementor-section.section-m,
.elementor-section.section-s,
.elementor-section.section-xs,
.elementor-section.section-xxs,
.elementor-section.section-header {
	padding-left:  var(--ath-section-side-padding);
	padding-right: var(--ath-section-side-padding);
}

.section-xxl {
	--ath-section-block: clamp(var(--section-xxl-padding-min), 3vw + 5rem,   var(--section-xxl-padding-max));
	padding-top:    var(--ath-section-block);
	padding-bottom: var(--ath-section-block);
}
.section-xl {
	--ath-section-block: clamp(var(--section-xl-padding-min), 2.6vw + 4.5rem, var(--section-xl-padding-max));
	padding-top:    var(--ath-section-block);
	padding-bottom: var(--ath-section-block);
}
.section-l {
	--ath-section-block: clamp(var(--section-l-padding-min), 2.2vw + 4rem, var(--section-l-padding-max));
	padding-top:    var(--ath-section-block);
	padding-bottom: var(--ath-section-block);
}
.section-m {
	--ath-section-block: clamp(var(--section-m-padding-min), 2vw + 3rem, var(--section-m-padding-max));
	padding-top:    var(--ath-section-block);
	padding-bottom: var(--ath-section-block);
}
.section-s {
	--ath-section-block: clamp(var(--section-s-padding-min), 1.6vw + 2.4rem, var(--section-s-padding-max));
	padding-top:    var(--ath-section-block);
	padding-bottom: var(--ath-section-block);
}
.section-xs {
	--ath-section-block: clamp(var(--section-xs-padding-min), 1.2vw + 1.6rem, var(--section-xs-padding-max));
	padding-top:    var(--ath-section-block);
	padding-bottom: var(--ath-section-block);
}
.section-xxs {
	--ath-section-block: clamp(var(--section-xxs-padding-min), 0.9vw + 1rem, var(--section-xxs-padding-max));
	padding-top:    var(--ath-section-block);
	padding-bottom: var(--ath-section-block);
}
.section-header {
	padding-top:    clamp(var(--section-header-padding-min), 0.4vw + 0.85rem, var(--section-header-padding-max));
	padding-bottom: clamp(var(--section-header-padding-min), 0.4vw + 0.85rem, var(--section-header-padding-max));
}

/* Hero */
.section-hero                    { min-height: var(--section-hero-height) !important; }
.section-hero > .e-con-inner     { justify-content: center !important; }

/* Full-bleed */
.e-con.section-full              { --padding-left: 0px; --padding-right: 0px; }
.elementor-section.section-full  { padding-left: 0; padding-right: 0; }
.section-full > .e-con-inner     { max-width: 100% !important; }

/* Max-width constrained */
.section-wide > .e-con-inner     { max-width: var(--section-wide) !important; }
.section-narrow > .e-con-inner   { max-width: var(--section-narrow) !important; }
.section-narrow-xs > .e-con-inner{ max-width: var(--section-narrow-xs) !important; }

/* A hero spans its section; in an Elementor 4 Flexbox, which lays its children in a row, it would otherwise shrink to nothing. */
.e-flexbox-base > .elementor-widget-atheria_about_hero,
.e-flexbox-base > .elementor-widget-atheria_booking_hero,
.e-flexbox-base > .elementor-widget-atheria_experience_hero,
.e-flexbox-base > .elementor-widget-atheria_fullscreen_hero,
.e-flexbox-base > .elementor-widget-atheria_hero_slider,
.e-flexbox-base > .elementor-widget-atheria_home_hero,
.e-flexbox-base > .elementor-widget-atheria_restaurant_hero,
.e-flexbox-base > .elementor-widget-atheria_room_hero {
	flex: 1 1 100%;
}

/* Offset for fixed header */
.section-offset { padding-top: calc(var(--section-offset-header) + var(--section-l-padding-min)); }

@media (max-width: 767px) {
	.section-offset { padding-top: calc(var(--section-offset-header) + var(--section-m-padding-min)); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. SURFACE HELPERS
   Colors without !important — Elementor Style tab always wins if needed.
   ───────────────────────────────────────────────────────────────────────────── */

.ath-surface-light     { background: var(--ath-surface);               color: var(--ath-on-surface); }
.ath-surface-limestone { background: var(--ath-surface);               color: var(--ath-on-surface); }
.ath-surface-dark      { background: var(--ath-surface-inverse);       color: var(--ath-on-inverse); }
.ath-surface-cypress   { background: var(--ath-surface-inverse-muted); color: var(--ath-on-inverse); }
.ath-surface-mist      { background: var(--ath-arctic-mist);           color: var(--ath-on-surface); }

.ath-muted-text  { color: var(--ath-on-surface-muted); }
.ath-accent-text { color: var(--ath-on-surface-accent); }

/* Section Heading's muted words take the light muted tone on navy; cypress has room for one tone, so there they take the section's text colour. */
:where(.ath-surface-dark) .ath-section-heading__title .ath-muted-text    { color: var(--ath-on-inverse-muted); }
:where(.ath-surface-cypress) .ath-section-heading__title .ath-muted-text { color: var(--ath-on-inverse); }

/* Section Heading's title has no margins, so its two spacing controls alone set its gaps; each level keeps the gaps its browser margins used to give as their defaults, and where the eyebrow or the intro is empty, as the heading's own space. */
.ath-section-heading {
	--ath-section-heading-above: 0px;
	--ath-section-heading-below: 0px;
}
.ath-section-heading:has(> h1.ath-section-heading__title) {
	--ath-section-heading-above: calc(0.67 * clamp(2.75rem, 1.83rem + 4.07vw, 5.5rem));
	--ath-section-heading-below: calc(0.67 * clamp(2.75rem, 1.83rem + 4.07vw, 5.5rem));
}
.ath-section-heading:has(> h2.ath-section-heading__title) {
	--ath-section-heading-above: calc(0.83 * clamp(2.13rem, 1.5rem + 2.78vw, 4rem));
	--ath-section-heading-below: calc(0.83 * clamp(2.13rem, 1.5rem + 2.78vw, 4rem));
}
.ath-section-heading:has(> h3.ath-section-heading__title) {
	--ath-section-heading-above: clamp(1.75rem, 1.38rem + 1.67vw, 2.88rem);
	--ath-section-heading-below: clamp(1.75rem, 1.38rem + 1.67vw, 2.88rem);
}
.ath-section-heading:has(> h4.ath-section-heading__title) {
	--ath-section-heading-above: 1.33rem;
	--ath-section-heading-below: 1.33rem;
}
.ath-section-heading:has(> h5.ath-section-heading__title) {
	--ath-section-heading-above: calc(1.67 * 0.83rem);
	--ath-section-heading-below: calc(1.67 * 0.83rem);
}
.ath-section-heading:has(> h6.ath-section-heading__title) {
	--ath-section-heading-above: calc(2.33 * 0.67rem);
	--ath-section-heading-below: calc(2.33 * 0.67rem);
}
.ath-section-heading:has(> p.ath-section-heading__title) {
	--ath-section-heading-below: 1.5rem;
}
.ath-section-heading__title {
	margin: 0;
}
/* The gaps are padding, and the margins are held at zero, so a stylesheet Elementor wrote before this rule, which still sets the old margins, changes nothing. */
.ath-section-heading__eyebrow {
	display:        block;
	margin-bottom:  0 !important;
	padding-bottom: var(--ath-section-heading-eyebrow-gap, var(--ath-section-heading-above));
}
.ath-section-heading__intro {
	margin-top:  0 !important;
	padding-top: var(--ath-section-heading-intro-gap, max(1.25rem, var(--ath-section-heading-below)));
}
.ath-section-heading:not(:has(> .ath-section-heading__eyebrow)) {
	padding-top: var(--ath-section-heading-above);
}
.ath-section-heading:not(:has(> .ath-section-heading__intro)) {
	padding-bottom: var(--ath-section-heading-below);
}

.ath-card {
	border:        1px solid var(--ath-arctic-mist);
	border-radius: var(--ath-radius-lg);
	overflow:      hidden;
	background:    var(--ath-frost);
}

.ath-image-wrap           { overflow: hidden; border-radius: var(--ath-radius-lg); background: var(--ath-reflection); }
.ath-image-wrap img       { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* ─────────────────────────────────────────────────────────────────────────────
   4. GSAP ANIMATION HOOKS
   Classes applied to elements that the Motion Engine targets.
   will-change is set here; GSAP adds/removes it via its own internals too.
   ───────────────────────────────────────────────────────────────────────────── */

.ath-reveal,
.ath-image-reveal,
.ath-card-reveal,
.ath-text-reveal  { will-change: transform, opacity; }

.ath-no-overflow  { overflow: hidden; }
.ath-gsap-pinned  { overflow: clip; contain: paint; }

/* ─────────────────────────────────────────────────────────────────────────────
   5. ELEMENTOR BUTTON UTILITIES
   Variant classes applied via Elementor Advanced → CSS Classes.
   No !important — the widget's own Style tab always takes precedence.
   ───────────────────────────────────────────────────────────────────────────── */

/* Accent (filled blue) */
.ath-btn-accent .elementor-button,
.elementor-button.ath-btn-accent {
	background-color: var(--ath-surface-accent);
	border-color:     var(--ath-surface-accent);
	color:            var(--ath-on-accent);
}
.ath-btn-accent .elementor-button:hover,
.ath-btn-accent .elementor-button:focus-visible,
.elementor-button.ath-btn-accent:hover,
.elementor-button.ath-btn-accent:focus-visible {
	background-color: transparent;
	color:            var(--ath-arctic-blue);
	border-color:     var(--ath-arctic-blue);
}

/* Secondary (outlined navy) */
.ath-btn-secondary .elementor-button,
.elementor-button.ath-btn-secondary {
	background-color: transparent;
	color:            var(--ath-arctic-navy);
	border-color:     var(--ath-arctic-navy);
}
.ath-btn-secondary .elementor-button:hover,
.ath-btn-secondary .elementor-button:focus-visible,
.elementor-button.ath-btn-secondary:hover,
.elementor-button.ath-btn-secondary:focus-visible {
	background-color: var(--ath-arctic-navy);
	color:            var(--ath-frost);
}

/* Light (frost fill — for use on dark surfaces) */
.ath-btn-light .elementor-button,
.elementor-button.ath-btn-light {
	background-color: var(--ath-frost);
	color:            var(--ath-arctic-navy);
	border-color:     var(--ath-frost);
}
.ath-btn-light .elementor-button:hover,
.ath-btn-light .elementor-button:focus-visible,
.elementor-button.ath-btn-light:hover,
.elementor-button.ath-btn-light:focus-visible {
	background-color: transparent;
	color:            var(--ath-frost);
	border-color:     var(--ath-frost);
}

/* Micro-interaction — subtle lift on hover (not branding, safe globally) */
.elementor-button {
	transition:
		background-color 0.35s var(--ath-ease-out),
		color            0.35s var(--ath-ease-out),
		border-color     0.35s var(--ath-ease-out),
		transform        0.35s var(--ath-ease-out);
}
/* A Hover Animation chosen on the button replaces the lift, whichever stylesheet loads first. */
.elementor-button:not([class*="elementor-animation-"]):hover,
.elementor-button:not([class*="elementor-animation-"]):focus-visible { transform: translateY(-1px); }

/* ─────────────────────────────────────────────────────────────────────────────
   5b. KEYBOARD FOCUS RING (D-130)
   Zero specificity, so a buyer's rule, a widget's focus colour and the rings
   components draw themselves all win.
   ───────────────────────────────────────────────────────────────────────────── */

:where([class*="elementor-widget-atheria_"], .ath-menu, .ath-footer) :where(a[href], button, input:not([type="hidden"]), select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline:        var(--ath-focus-ring-width) solid var(--ath-focus-ring);
	outline-offset: var(--ath-focus-ring-offset);
}

.elementor-button:focus-visible {
	outline:        var(--ath-focus-ring-width) solid var(--ath-focus-ring);
	outline-offset: var(--ath-focus-ring-offset);
}

/* atheria-focus-surface.js marks a dark surface, and one where neither tone reaches 3:1, such as a photo or a mid-tone. */
[data-ath-focus-surface="dark"] {
	--ath-focus-ring: var(--ath-focus-ring-inverse);
}

/* Controls over a photo the script cannot see, because the image is not behind them in the page, always take the two-tone ring. */
[data-ath-focus-surface="mixed"],
.ath-exp-gal__ctrl,
.ath-exp-gal__mnav,
.ath-exp-gal__close,
.ath-exp-hero__back,
.ath-exp-hero__lb-close,
.ath-exp-hero__lb-nav,
.ath-room-gallery__nav,
.ath-room-gallery__close,
.arsc-lb__prev,
.arsc-lb__next,
.arsc-lb__close,
.ath-rooms-carousel__arrow,
.ath-sps__btn,
.ath-room-hero__crumb,
.ath-room-hero__link,
.ath-room-hero__scroll,
.ath-home-hero__btn,
.ath-hero-slider__cta .elementor-button,
.ath-booking-hero__wrapper :is(input, select, button),
.ath-booking-hero__mockup :is(input, select),
.ath-modal-close-btn,
.ath-exp-slider__cta,
.ath-hero-slider__corner-cta-btn,
.ath-contact :is(a[href], button, input, select, textarea) {
	--ath-focus-ring:        var(--ath-on-surface);
	--ath-focus-ring-offset: var(--ath-focus-ring-width);
}

/* Neither ring tone reaches 3:1 on cypress, and some controls there draw no halo, so the ring itself is frost, 4.6:1 (D-148). */
:where(.ath-surface-cypress) [data-ath-focus-surface] {
	--ath-focus-ring: var(--ath-on-inverse);
}

[data-ath-focus-surface="mixed"]:is(:focus-visible, :has(:focus-visible)) {
	box-shadow: 0 0 0 var(--ath-focus-ring-width) var(--ath-surface-raised);
}

/* Several of these controls set their own shadow with !important. */
.ath-exp-gal__ctrl:focus-visible,
.ath-exp-gal__mnav:focus-visible,
.ath-exp-gal__close:focus-visible,
.ath-exp-hero__back:focus-visible,
.ath-exp-hero__lb-close:focus-visible,
.ath-exp-hero__lb-nav:focus-visible,
.ath-room-gallery__nav:focus-visible,
.ath-room-gallery__close:focus-visible,
.arsc-lb__prev:focus-visible,
.arsc-lb__next:focus-visible,
.arsc-lb__close:focus-visible,
.ath-rooms-carousel__arrow:focus-visible,
.ath-sps__btn:focus-visible,
.ath-room-hero__crumb:focus-visible,
.ath-room-hero__link:focus-visible,
.ath-room-hero__scroll:focus-visible,
.ath-home-hero__btn:focus-visible,
.ath-hero-slider__cta .elementor-button:focus-visible,
.ath-booking-hero__wrapper :is(input, select, button):focus-visible,
.ath-booking-hero__mockup :is(input, select):focus-visible,
.ath-modal-close-btn:focus-visible,
.ath-exp-slider__cta:focus-visible,
.ath-hero-slider__corner-cta-btn:focus-visible,
.ath-contact :is(a[href], button, input, select, textarea):focus-visible {
	box-shadow: 0 0 0 var(--ath-focus-ring-width) var(--ath-surface-raised) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. FORM UTILITIES
   Focus state only. Field colors come from Theme Style → Form Fields.
   ───────────────────────────────────────────────────────────────────────────── */

.elementor-field-group .elementor-field,
.elementor-form input.elementor-field,
.elementor-form textarea.elementor-field,
.elementor-form select.elementor-field {
	transition:
		background-color 0.25s var(--ath-ease-out),
		border-color     0.25s var(--ath-ease-out),
		box-shadow       0.25s var(--ath-ease-out);
}

.elementor-field-group .elementor-field:focus,
.elementor-form input.elementor-field:focus,
.elementor-form textarea.elementor-field:focus,
.elementor-form select.elementor-field:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ath-arctic-blue) 20%, transparent);
	outline: 0;
}

.elementor-field-group .elementor-field::placeholder,
.elementor-form input.elementor-field::placeholder,
.elementor-form textarea.elementor-field::placeholder {
	color:   color-mix(in srgb, var(--ath-reflection) 80%, var(--ath-arctic-navy));
	opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. ATHERIA BUTTON COMPONENT (custom widget)
   ───────────────────────────────────────────────────────────────────────────── */

.ath-btn-base,
.ath-btn,
.ath-cta-band__btn {
	position:                   relative;
	overflow:                   hidden;
	display:                    inline-flex;
	align-items:                center;
	justify-content:            center;
	gap:                        0.5em;
	padding:                    0.75rem 2rem;
	font-family:                var(--ath-font-body);
	font-weight:                650;
	font-size:                  var(--ath-size-btn);
	letter-spacing:             var(--ath-ls-btn);
	line-height:                1.4;
	border-radius:              10px;
	border:                     2px solid transparent;
	text-decoration:            none;
	cursor:                     pointer;
	white-space:                nowrap;
	-webkit-tap-highlight-color: transparent;
}

/* The CTA band's two buttons. Their fills used to come from control defaults only. */
/* Each button paints as its style does: a filled style takes the accent fill and its hover, and an unfilled one, primary or secondary, its own line or edge. */
.ath-cta-band__btn--primary:is(.ath-btn--solid, .ath-btn--pill, .ath-btn--square, .ath-btn--stagger-text) {
	background-color: var(--ath-surface-accent);
	color:            var(--ath-on-accent);
}
.ath-cta-band__btn--primary:is(.ath-btn--solid, .ath-btn--pill, .ath-btn--square, .ath-btn--stagger-text) .ath-btn__text { color: var(--ath-on-accent); }
.ath-cta-band__btn--primary:is(.ath-btn--solid, .ath-btn--pill, .ath-btn--square, .ath-btn--stagger-text):hover { background-color: var(--ath-glacier-dark-hover); }
.ath-cta-band__btn:not(.ath-btn--solid, .ath-btn--pill, .ath-btn--square, .ath-btn--stagger-text) .ath-btn__text { color: var(--ath-on-surface); }

/* Text span — stays above ::before in slide effects */
.ath-btn .ath-btn__text,
.ath-cta-band__btn .ath-btn__text {
	position:       relative;
	z-index:        1;
	pointer-events: none;
}

/* A button element starts from the browser's grey face; it takes a link's paint at the weight of one class, so every style below and every widget control still wins. */
:where(button).ath-btn {
	-webkit-appearance: none;
	appearance:         none;
	background-color:   transparent;
	color:              var(--ath-on-surface-accent);
}
:where(button).ath-btn:hover { color: var(--ath-on-surface-accent-hover); }

/* Button variants */
/* Pill, Square and Staggered letters are filled as Solid is, so their shape and their letters sit on a surface. */
.ath-btn--solid,
.ath-btn--pill,
.ath-btn--square,
.ath-btn--stagger-text { background-color: var(--ath-surface-accent); color: var(--ath-on-accent); transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; }
/* The label is restated because the theme's link hover outranks the variant and would turn it navy on the fill. */
.ath-btn--solid:hover,
.ath-btn--pill:hover,
.ath-btn--square:hover,
.ath-btn--stagger-text:hover { background-color: var(--ath-glacier-dark-hover); color: var(--ath-on-accent); }
.ath-btn--outline { background-color: transparent; border-color: currentColor; transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; }
.ath-btn--outline:hover { border-color: var(--ath-on-surface-accent-hover); color: var(--ath-on-surface-accent-hover); }
.ath-btn--outline:hover .ath-btn__text { color: var(--ath-on-surface-accent-hover); }
.ath-btn--pill    { border-radius: 100px; }
.ath-btn--oval    { border-radius: 100px; }
.ath-btn--square  { border-radius: 0; }

/* The Button widget's size presets, two classes heavy so they outrank a style's own padding while the widget's Padding control still outranks them. */
.ath-btn.ath-btn--size-xs { padding: 0.375rem 1rem; }
.ath-btn.ath-btn--size-sm { padding: 0.5rem 1.375rem; }
.ath-btn.ath-btn--size-md { padding: 0.75rem 2rem; }
.ath-btn.ath-btn--size-lg { padding: 1rem 2.5rem; }
.ath-btn.ath-btn--size-xl { padding: 1.25rem 3rem; }

/* Slide fills — shared ::before pattern */
.ath-btn--slide-left,
.ath-btn--slide-right,
.ath-btn--slide-top,
.ath-btn--slide-bottom,
.ath-btn--diagonal { transition: color 0.4s ease, border-color 0.35s ease; }

.ath-btn--slide-left::before,
.ath-btn--slide-right::before,
.ath-btn--slide-top::before,
.ath-btn--slide-bottom::before,
.ath-btn--diagonal::before {
	content:    '';
	position:   absolute;
	inset:      0;
	z-index:    0;
}

.ath-btn--slide-left::before   { transform: translateX(-101%);  transition: transform 0.5s var(--ath-ease-out); }
.ath-btn--slide-right::before  { transform: translateX(101%);   transition: transform 0.5s var(--ath-ease-out); }
.ath-btn--slide-top::before    { transform: translateY(-101%);  transition: transform 0.5s var(--ath-ease-out); }
.ath-btn--slide-bottom::before { transform: translateY(101%);   transition: transform 0.5s var(--ath-ease-out); }
.ath-btn--diagonal::before     { transform: translateX(-110%) skewX(-18deg); transition: transform 0.55s var(--ath-ease-out); }

.ath-btn--slide-left:hover::before   { transform: translateX(0); }
.ath-btn--slide-right:hover::before  { transform: translateX(0); }
.ath-btn--slide-top:hover::before    { transform: translateY(0); }
.ath-btn--slide-bottom:hover::before { transform: translateY(0); }
.ath-btn--diagonal:hover::before     { transform: translateX(0) skewX(-18deg); }

/* Staggered letters — each character rolls out upward (staggered) on
   hover, revealing a duplicate set rolling in from below; leaving hover
   reverses the same transition, so letters exit downward and the
   original set returns from above. Letters are split into two stacked
   spans once by JS (atheria-motion.js); this rule only needs the
   duplicate structure to already exist in the DOM. */
.ath-btn--stagger-text .ath-btn__text {
	display:        inline-block;
	overflow:       hidden;
	vertical-align: top;
}
.ath-btn__letters {
	display:     inline-block;
	white-space: pre;
}
.ath-btn__letters--bottom {
	position: absolute;
	top:      0;
	left:     0;
}
.ath-btn__letter {
	display:          inline-block;
	transform:        translateY(0);
	transition:       transform 0.4s var(--ath-ease-out);
	transition-delay: calc(var(--i, 0) * 22ms);
}
.ath-btn__letters--bottom .ath-btn__letter { transform: translateY(100%); }

.ath-btn--stagger-text:hover .ath-btn__letters--top .ath-btn__letter    { transform: translateY(-100%); }
.ath-btn--stagger-text:hover .ath-btn__letters--bottom .ath-btn__letter { transform: translateY(0); }

/* Underline only */
.ath-btn--underline {
	background:    transparent;
	border-radius: 0;
	padding-left:  0;
	padding-right: 0;
	border-bottom: 1.5px solid currentColor;
	border-top:    none;
	border-left:   none;
	border-right:  none;
	transition:    color 0.3s ease;
}
/* The line starts at the border box's edge, under the border, so pixel snapping cannot open a gap between them. */
.ath-btn--underline:hover {
	color:               var(--ath-on-surface-accent-hover);
	background-image:    linear-gradient(currentColor, currentColor);
	background-size:     100% 3px;
	background-position: left bottom;
	background-repeat:   no-repeat;
	background-origin:   border-box;
}

/* Ghost */
/* The edge takes the label's colour, so the glass keeps its shape on a light section as well as over a photo. */
.ath-btn--ghost {
	background:            rgba(255, 255, 255, 0.06);
	border-width:          1px;
	border-color:          color-mix(in srgb, currentColor 35%, transparent);
	backdrop-filter:       blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition:            background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.ath-btn--ghost:hover { background: rgba(255, 255, 255, 0.15); }

/* Border draw */
.ath-btn--border-draw {
	background: transparent;
	transition: color 0.35s ease, background-color 0.35s ease;
}
.ath-btn--border-draw::before,
.ath-btn--border-draw::after {
	content:    '';
	position:   absolute;
	width:      0;
	height:     0;
	transition: width 0.35s ease, height 0.35s ease;
}
.ath-btn--border-draw::before { top: 0; left: 0; border-top: 2px solid currentColor; border-left: 2px solid currentColor; }
.ath-btn--border-draw::after  { bottom: 0; right: 0; border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; }
.ath-btn--border-draw:hover::before,
.ath-btn--border-draw:hover::after { width: 100%; height: 100%; }

/* The light tones fall to 2.39:1 at rest and 1.74:1 on hover on Atheria's dark sections, so unfilled styles sitting on one take the dark tones; cards, plates, the Booking Search panel and Contact's form card are light surfaces and keep theirs, and Home Hero's buttons sit on its photo. */
:where(.ath-surface-dark, .ath-surface-cypress) :is(.ath-btn, .ath-cta-band__btn):not(.ath-btn--solid, .ath-btn--pill, .ath-btn--square, .ath-btn--stagger-text, .ath-home-hero__btn, :where(.ath-card-item, .ath-booking-search, .ath-contact__form-card, .ath-exp-slider__cta-wrap--plate, .ath-room-foot) *),
:where(.ath-surface-dark, .ath-surface-cypress) :is(.ath-btn, .ath-cta-band__btn):not(.ath-btn--solid, .ath-btn--pill, .ath-btn--square, .ath-btn--stagger-text, .ath-home-hero__btn, :where(.ath-card-item, .ath-booking-search, .ath-contact__form-card, .ath-exp-slider__cta-wrap--plate, .ath-room-foot) *) .ath-btn__text {
	color: var(--ath-on-inverse-accent);
}
:where(.ath-surface-dark, .ath-surface-cypress) :is(.ath-btn, .ath-cta-band__btn):not(.ath-btn--solid, .ath-btn--pill, .ath-btn--square, .ath-btn--stagger-text, .ath-home-hero__btn, :where(.ath-card-item, .ath-booking-search, .ath-contact__form-card, .ath-exp-slider__cta-wrap--plate, .ath-room-foot) *):hover,
:where(.ath-surface-dark, .ath-surface-cypress) :is(.ath-btn, .ath-cta-band__btn):not(.ath-btn--solid, .ath-btn--pill, .ath-btn--square, .ath-btn--stagger-text, .ath-home-hero__btn, :where(.ath-card-item, .ath-booking-search, .ath-contact__form-card, .ath-exp-slider__cta-wrap--plate, .ath-room-foot) *):hover .ath-btn__text {
	color: var(--ath-on-inverse-accent-hover);
}
:where(.ath-surface-dark, .ath-surface-cypress) .ath-btn--outline:not(.ath-btn--solid, .ath-btn--pill, .ath-btn--square, .ath-btn--stagger-text, .ath-home-hero__btn, :where(.ath-card-item, .ath-booking-search, .ath-contact__form-card, .ath-exp-slider__cta-wrap--plate, .ath-room-foot) *):hover { border-color: var(--ath-on-inverse-accent-hover); }

/* Ghost's glass lightens what lies behind its label, so on dark sections it rests and hovers in frost with a stronger edge (D-148). */
:where(.ath-surface-dark, .ath-surface-cypress) .ath-btn--ghost:not(.ath-btn--solid, .ath-btn--pill, .ath-btn--square, .ath-btn--stagger-text, .ath-home-hero__btn, :where(.ath-card-item, .ath-booking-search, .ath-contact__form-card, .ath-exp-slider__cta-wrap--plate, .ath-room-foot) *),
:where(.ath-surface-dark, .ath-surface-cypress) .ath-btn--ghost:not(.ath-btn--solid, .ath-btn--pill, .ath-btn--square, .ath-btn--stagger-text, .ath-home-hero__btn, :where(.ath-card-item, .ath-booking-search, .ath-contact__form-card, .ath-exp-slider__cta-wrap--plate, .ath-room-foot) *) .ath-btn__text,
:where(.ath-surface-dark, .ath-surface-cypress) .ath-btn--ghost:not(.ath-btn--solid, .ath-btn--pill, .ath-btn--square, .ath-btn--stagger-text, .ath-home-hero__btn, :where(.ath-card-item, .ath-booking-search, .ath-contact__form-card, .ath-exp-slider__cta-wrap--plate, .ath-room-foot) *):hover,
:where(.ath-surface-dark, .ath-surface-cypress) .ath-btn--ghost:not(.ath-btn--solid, .ath-btn--pill, .ath-btn--square, .ath-btn--stagger-text, .ath-home-hero__btn, :where(.ath-card-item, .ath-booking-search, .ath-contact__form-card, .ath-exp-slider__cta-wrap--plate, .ath-room-foot) *):hover .ath-btn__text,
:where(.ath-surface-cypress) :is(.ath-btn, .ath-cta-band__btn):not(.ath-btn--solid, .ath-btn--pill, .ath-btn--square, .ath-btn--stagger-text, .ath-home-hero__btn, :where(.ath-card-item, .ath-booking-search, .ath-contact__form-card, .ath-exp-slider__cta-wrap--plate, .ath-room-foot) *),
:where(.ath-surface-cypress) :is(.ath-btn, .ath-cta-band__btn):not(.ath-btn--solid, .ath-btn--pill, .ath-btn--square, .ath-btn--stagger-text, .ath-home-hero__btn, :where(.ath-card-item, .ath-booking-search, .ath-contact__form-card, .ath-exp-slider__cta-wrap--plate, .ath-room-foot) *) .ath-btn__text,
:where(.ath-surface-cypress) :is(.ath-btn, .ath-cta-band__btn):not(.ath-btn--solid, .ath-btn--pill, .ath-btn--square, .ath-btn--stagger-text, .ath-home-hero__btn, :where(.ath-card-item, .ath-booking-search, .ath-contact__form-card, .ath-exp-slider__cta-wrap--plate, .ath-room-foot) *):hover,
:where(.ath-surface-cypress) :is(.ath-btn, .ath-cta-band__btn):not(.ath-btn--solid, .ath-btn--pill, .ath-btn--square, .ath-btn--stagger-text, .ath-home-hero__btn, :where(.ath-card-item, .ath-booking-search, .ath-contact__form-card, .ath-exp-slider__cta-wrap--plate, .ath-room-foot) *):hover .ath-btn__text {
	color: var(--ath-on-inverse);
}
:where(.ath-surface-dark) .ath-btn--ghost:not(.ath-btn--solid, .ath-btn--pill, .ath-btn--square, .ath-btn--stagger-text, .ath-home-hero__btn, :where(.ath-card-item, .ath-booking-search, .ath-contact__form-card, .ath-exp-slider__cta-wrap--plate, .ath-room-foot) *) {
	border-color: currentColor;
}
/* Cypress leaves no room under frost for glass, which takes the label below 4.5:1, so Ghost there is drawn as Outline is, with a 1px edge (D-148). */
:where(.ath-surface-cypress) .ath-btn--ghost:not(.ath-btn--solid, .ath-btn--pill, .ath-btn--square, .ath-btn--stagger-text, .ath-home-hero__btn, :where(.ath-card-item, .ath-booking-search, .ath-contact__form-card, .ath-exp-slider__cta-wrap--plate, .ath-room-foot) *) {
	background:              transparent;
	border-color:            currentColor;
	backdrop-filter:         none;
	-webkit-backdrop-filter: none;
}
:where(.ath-surface-cypress) .ath-btn--outline:not(.ath-btn--solid, .ath-btn--pill, .ath-btn--square, .ath-btn--stagger-text, .ath-home-hero__btn, :where(.ath-card-item, .ath-booking-search, .ath-contact__form-card, .ath-exp-slider__cta-wrap--plate, .ath-room-foot) *):hover { border-color: var(--ath-on-inverse); }

/* Icon */
.ath-btn__icon            { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; color: inherit; fill: currentColor; }
.ath-btn__icon svg        { width: 1em; height: 1em; fill: currentColor; }
.ath-btn__icon i          { font-size: 1em; line-height: 1; }

/* Focus */
.ath-cta-band__btn:focus-visible { outline: var(--ath-focus-ring-width) solid var(--ath-focus-ring); outline-offset: var(--ath-focus-ring-offset); }

/* CTA band actions row */
.ath-cta-band__actions {
	display:     flex;
	flex-wrap:   wrap;
	gap:         1rem;
	align-items: center;
}
@media (max-width: 767px) {
	.ath-cta-band__actions                      { flex-direction: column; align-items: stretch; }
	.ath-cta-band__actions .ath-cta-band__btn   { text-align: center; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. AMENITIES LIST COMPONENT
   ───────────────────────────────────────────────────────────────────────────── */

.ath-amenities {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   1rem 1.5rem;
	list-style:            none;
	margin:                0;
	padding:               0;
}
.ath-amenity               { display: flex; align-items: center; gap: 0.625rem; }
.ath-amenity__icon         { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ath-arctic-blue); line-height: 1; }
.ath-amenity__icon svg     { width: 1em; height: 1em; fill: currentColor; }
.ath-amenity__label        { line-height: 1.4; }

/* ─────────────────────────────────────────────────────────────────────────────
   11. CARD GRID COMPONENT  (shared base for Rooms Grid + Experience Grid)

   Architecture: one reusable card system.
     .ath-card-item             — shared shell (shell, image, content, title, cta)
     .ath-card-item--room       — room-specific additions (price, amenity pills)
     .ath-card-item--experience — experience-specific additions (duration, inclusions)
   Add a new CPT card by adding a --modifier only; the base never duplicates.
   ───────────────────────────────────────────────────────────────────────────── */

/* Grid wrapper — shared. Legacy .ath-rooms-cards kept as alias so existing
   Rooms Grid markup and any saved Elementor content keep working unchanged. */
.ath-cards-grid,
.ath-rooms-cards {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   2rem;
	align-items:           stretch;
}
@media (max-width: 1024px) {
	.ath-cards-grid,
	.ath-rooms-cards { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 767px) {
	.ath-cards-grid,
	.ath-rooms-cards { grid-template-columns: 1fr; gap: 1.25rem; padding: 0 1.25rem; }
}

/* Card shell — shared.
   NOTE: block is .ath-card-item (NOT .ath-card) — .ath-card is a pre-existing
   generic surface utility elsewhere in this file; the grid shell must not
   inherit its border/radius, so it uses its own block name. */
.ath-card-item,
.ath-room-card             { display: flex; flex-direction: column; height: 100%; border-radius: 0.75rem; overflow: hidden; background: #fff; }
/* The dark surface classes give the section light text, and a card stays white, so it restates the text colour for a light surface. */
:where(.ath-surface-dark, .ath-surface-cypress) .ath-card-item { color: var(--ath-on-surface); }
.ath-card__img-link,
.ath-room-card__img-link   { display: block; flex-shrink: 0; }
.ath-card__body,
.ath-room-card__body       { padding: 1.25rem 1.25rem 1.5rem; flex: 1; display: flex; flex-direction: column; }

/* Card image — shared */
.ath-card__img-wrap,
.ath-room-img__wrap {
	position:      relative;
	overflow:      hidden;
	aspect-ratio:  4/3;
	border-radius: 0.75rem;
	background:    var(--ath-arctic-mist);
	/* Establish an independent clipping/stacking context so transformed
	   children (.ath-image-reveal scale(1.08), hover zoom) stay clipped by the
	   rounded corners in Chrome/Safari, which otherwise leak a transformed
	   descendant past a rounded overflow:hidden parent. The image itself has
	   NO border-radius — the wrapper's overflow does all the clipping, so a
	   scaled image still fills the rounded corners edge-to-edge. */
	isolation:     isolate;
	transform:     translateZ(0);
}
.ath-card__img-wrap .ath-card__img,
.ath-room-img__wrap .ath-room-img {
	position:      absolute;
	inset:         0;
	width:         100%;
	height:        100%;
	object-fit:    cover;
	display:       block;
	transition:    transform 0.7s var(--ath-ease-out);
	/* The image must have NO radius of its own: the wrapper's overflow:hidden
	   clips it to the wrapper's radius. A radius on the image (it was picking
	   up 28px elsewhere) made the image corners round *inside* the wrapper,
	   exposing the grey background at the four corners. Force square. */
	border-radius: 0 !important;
}
.ath-card__img--placeholder,
.ath-room-img--placeholder { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--ath-arctic-mist); border-radius: 0 !important; }

/* Image hover effects — generic, shared across card types and other widgets */
.ath-img-hover-zoom:hover .ath-card__img,
.ath-img-hover-zoom:hover .ath-room-img           { transform: scale(1.06); }
.ath-img-hover-slide .ath-card__img,
.ath-img-hover-slide .ath-room-img                { transform: scale(1.06) translateX(-2%); }
.ath-img-hover-slide:hover .ath-card__img,
.ath-img-hover-slide:hover .ath-room-img          { transform: scale(1.06) translateX(2%); transition-duration: 4s; }

.ath-img-overlay {
	position:    absolute;
	inset:       0;
	background:  linear-gradient(to top, rgba(26, 40, 50, 0.75) 0%, rgba(26, 40, 50, 0) 55%);
	opacity:     0;
	transition:  opacity 0.45s ease;
	display:     flex;
	align-items: flex-end;
	padding:     1.5rem;
}
.ath-img-hover-overlay:hover .ath-img-overlay { opacity: 1; }
.ath-img-overlay__label {
	color:          var(--ath-frost);
	font-size:      0.875rem;
	font-family:    var(--ath-font-body);
	font-weight:    600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transform:      translateY(6px);
	transition:     transform 0.4s ease;
}
.ath-img-hover-overlay:hover .ath-img-overlay__label { transform: translateY(0); }

/* Card content — shared */
.ath-card__content,
.ath-room-content   { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }

.ath-card__eyebrow,
.ath-room-eyebrow {
	display:        inline-block;
	font-family:    var(--ath-font-eyebrow, sans-serif);
	font-size:      0.75rem;
	font-weight:    600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--ath-on-surface-accent);
	margin-bottom:  0.625rem;
}
.ath-card__title {
	font-family:    var(--ath-font-heading, serif);
	font-size:      var(--ath-size-heading-m);
	font-weight:    500;
	line-height:    1.15;
	letter-spacing: var(--ath-text-h4-ls);
	margin:         0 0 0.75rem;
	overflow-wrap:  break-word;
}
.ath-room-title            { font-family: var(--ath-font-heading, serif); margin: 0 0 0.75rem; min-height: 2.4em; overflow-wrap: break-word; }
.ath-card__title a,
.ath-room-title a          { font-family: inherit; text-decoration: none; color: inherit; transition: color 0.25s ease; }
.ath-card__title a:hover,
.ath-room-title a:hover    { color: var(--ath-on-surface-accent-hover); }

.ath-card__meta,
.ath-room-meta             { font-family: var(--ath-font-body, sans-serif); font-size: 0.875rem; color: var(--ath-on-surface-muted); margin: 0 0 0.75rem; }
.ath-card__status,
.ath-room-status           { font-family: var(--ath-font-body, sans-serif); font-size: 0.875rem; color: var(--ath-on-surface-muted); margin: 0 0 0.75rem; }
.ath-card__excerpt,
.ath-room-excerpt          { font-family: var(--ath-font-body, sans-serif); font-size: 0.9375rem; line-height: 1.65; color: var(--ath-on-surface-muted); margin: 0 0 1.25rem; }

.ath-card__cta,
.ath-room-cta { align-self: flex-start; margin-top: auto; }

/* Pill list — shared base (used by room amenities + experience inclusions).
   Legacy .ath-room-amenit* selectors are kept as aliases so widgets that still
   emit the old class names (e.g. Rooms Scroll Reveal) render identically. */
.ath-card__pills,
.ath-room-amenities {
	list-style:    none;
	margin:        0 0 1.5rem;
	padding:       0;
	display:       flex;
	flex-wrap:     wrap;
	gap:           0.5rem;
	min-height:    2.25rem;
	align-content: flex-start;
}
.ath-card__pill,
.ath-room-amenity {
	display:        inline-flex;
	align-items:    center;
	gap:            0.35rem;
	font-family:    var(--ath-font-body, sans-serif);
	font-size:      0.8125rem;
	font-weight:    500;
	color:          var(--ath-arctic-navy);
	border:         1px solid var(--ath-arctic-mist);
	border-radius:  100px;
	padding:        0.3rem 0.75rem;
	background:     transparent;
	transition:     background 0.2s ease, border-color 0.2s ease;
}

/* A card's pill keeps its label on one line and may reach into the card body's 1.25rem side padding; only a label wider than that wraps. */
.ath-card__pills > .ath-card__pill {
	flex:      0 0 auto;
	width:     max-content;
	max-width: calc(100% + 1.25rem);
}

.ath-card__pill-check,
.ath-room-amenity__check {
	display:       inline-block;
	flex-shrink:   0;
	width:         0.875rem;
	height:        0.875rem;
	border:        1.5px solid var(--ath-arctic-blue);
	border-radius: 50%;
	position:      relative;
}
.ath-card__pill-check::after,
.ath-room-amenity__check::after {
	content:    '';
	position:   absolute;
	top:        50%;
	left:       50%;
	transform:  translate(-55%, -60%) rotate(45deg);
	width:      0.25rem;
	height:     0.4rem;
	border-right:  1.5px solid var(--ath-arctic-blue);
	border-bottom: 1.5px solid var(--ath-arctic-blue);
}

/* ── Room-specific modifier: price ── */
.ath-card-item--room .ath-room-price        { display: inline-flex; align-items: baseline; gap: 0.25rem; font-family: var(--ath-font-body, sans-serif); font-weight: 600; color: var(--ath-on-surface-accent); margin-bottom: 0.75rem; }
.ath-card-item--room .ath-room-price__night { font-size: 0.8em; font-weight: 400; opacity: 0.7; }

/* ── Experience-specific modifier: duration ── */
.ath-card-item--experience .ath-exp-duration { display: inline-flex; align-items: baseline; gap: 0.25rem; font-family: var(--ath-font-body, sans-serif); font-weight: 600; color: var(--ath-on-surface-accent); margin-bottom: 0.75rem; }

/* The price row sits last before the link and takes the free space above it, so prices line up across a row whatever the text above them does. */
.ath-card-item .ath-card__content > .ath-room-price,
.ath-card-item .ath-card__content > .ath-exp-duration                { margin-top: auto; }
.ath-card-item .ath-card__content > .ath-room-price ~ .ath-card__cta,
.ath-card-item .ath-card__content > .ath-exp-duration ~ .ath-card__cta { margin-top: 0; }

/* ── Category links: one pill per category, above a list of rooms or experiences ── */
.ath-category-links__list {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: flex-start;
	gap:             0.5rem;
	margin:          0;
	padding:         0;
	list-style:      none;
}
.ath-category-links__link.ath-card__pill {
	padding:      0.45rem 1rem;
	font-size:    var(--ath-text-caption-size);
	color:        var(--ath-category-link-color, var(--ath-on-surface));
	background:   var(--ath-category-link-bg, transparent);
	border-color: var(--ath-category-link-border, var(--ath-border-subtle));
}
/* A pill that is not current has no fill and sits on the section, so on Atheria's dark sections it takes the inverse tones; a grid's own colours still win. */
:where(.ath-surface-dark, .ath-surface-cypress) .ath-category-links__link.ath-card__pill {
	color:        var(--ath-category-link-color, var(--ath-on-inverse));
	border-color: var(--ath-category-link-border, var(--ath-border-inverse));
}
/* A grid's colour controls set these properties, so a colour chosen for every pill never hides which one is current. */
.ath-category-links__link.ath-card__pill:hover {
	color:        var(--ath-category-link-hover-color, var(--ath-category-link-color, var(--ath-on-surface)));
	background:   var(--ath-category-link-hover-bg, var(--ath-focus-tint));
	border-color: var(--ath-category-link-hover-border, var(--ath-arctic-blue));
}
.ath-category-links__link.ath-card__pill[aria-current="page"] {
	color:        var(--ath-category-link-current-color, var(--ath-category-link-color, var(--ath-on-surface)));
	background:   var(--ath-category-link-current-bg, var(--ath-focus-tint));
	border-color: var(--ath-category-link-current-border, var(--ath-arctic-blue));
}
/* In a card grid the row takes the grid's top space, so the section grows only by the row itself. */
.ath-cards-section--links {
	padding-top: var(--ath-rooms-grid-space-top, clamp(4rem, 6vw, 6rem));
}
.ath-exp-grid-section .ath-cards-section--links {
	padding-top: clamp(2.5rem, 4vw, 3.5rem);
}
.ath-cards-section--links .ath-category-links {
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.ath-category-links__link:focus-visible {
	outline:        2px solid var(--ath-focus-ring);
	outline-offset: 2px;
}
.ath-category-links__status {
	position:    absolute;
	width:       1px;
	height:      1px;
	margin:      -1px;
	padding:     0;
	overflow:    hidden;
	clip-path:   inset(50%);
	white-space: nowrap;
	border:      0;
}
/* ─────────────────────────────────────────────────────────────────────────────
   12. ACCESSIBILITY — REDUCED MOTION
   Overrides all animation and transition durations globally.
   GSAP also respects prefers-reduced-motion via the Motion Engine guard.
   ───────────────────────────────────────────────────────────────────────────── */

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

	.ath-reveal,
	.ath-image-reveal,
	.ath-card-reveal,
	.ath-text-reveal,
	.ath-line-reveal__line,
	.ath-blur-group-item,
	.ath-slide-reveal,
	.ath-scale-reveal {
		transform: none !important;
		opacity:   1 !important;
		filter:    none !important;
	}

	.ath-blur-in,
	.ath-blur-stagger:not([data-ath-blur-items]) > *,
	.ath-blur-stagger:not([data-ath-blur-items]) > .e-con-inner > *,
	.ath-blur-stagger-item {
		translate: none !important;
		opacity:   1 !important;
		filter:    none !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   Experience Grid — optional header above the grid
   ───────────────────────────────────────────────────────────────────────────── */
.ath-exp-grid-section {
	/* Extra breathing room above the whole section when a header is shown. */
	padding-top: clamp(3rem, 6vw, 6rem);
}
.ath-exp-grid-header {
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
	max-width: 46rem;
	margin: 0 auto;
	padding-top: clamp(2rem, 4vw, 4rem);
}
.ath-exp-grid-header__eyebrow {
	font-family: var(--ath-font-eyebrow, sans-serif);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ath-on-surface-accent, #487797);
	margin-bottom: 1rem;
}
.ath-exp-grid-header__title {
	font-family: var(--ath-font-heading, serif);
	color: var(--ath-arctic-navy, #243C4C);
	font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
	line-height: 1.05;
	margin: 0;
}
.ath-exp-grid-header__title em {
	font-style: italic;
}
.ath-exp-grid-header__desc {
	font-family: var(--ath-font-body, sans-serif);
	color: var(--ath-on-surface-muted, #5C7684);
	font-size: 1.0625rem;
	line-height: 1.65;
	margin: 1.25rem 0 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. TYPE LEVEL UTILITIES
   The twelve levels of the design system, applied by name.

   Elementor's typography group control takes no var() in its family and weight
   fields, so a template cannot bind a whole level through the Style tab. These
   classes are the binding surface instead: an editor types the class into
   Elementor's CSS Classes field and the level follows the design system.

   Each level names the widget's inner text node as well as the element the
   class lands on. Elementor applies a CSS Classes value to the widget's outer
   wrapper, never to the <h3> or the <a> inside it, so a single-class selector
   reaches the text only by inheritance — and a declaration matching the inner
   node directly beats an inherited one however specific the ancestor is. The
   theme's own h1-h6 sizing and Elementor's .elementor-button both do exactly
   that. The descendant form is (0,2,0) and outranks them; the bare class is
   kept alongside it for widgets whose text is an unclassed child, such as the
   text editor.

   Declared last in this file on purpose. A level is applied deliberately, so it
   should outrank the generic font sizing a component sets for itself, while
   still losing to Elementor's own per-element output, which is more specific.
   ───────────────────────────────────────────────────────────────────────────── */

.ath-type-display,
.ath-type-display .elementor-heading-title,
.ath-type-display .elementor-button {
	font-family:    var(--ath-font-heading);
	font-size:      var(--ath-text-display-size);
	font-weight:    var(--ath-text-display-weight);
	line-height:    var(--ath-text-display-lh);
	letter-spacing: var(--ath-text-display-ls);
}

.ath-type-h1,
.ath-type-h1 .elementor-heading-title,
.ath-type-h1 .elementor-button {
	font-family:    var(--ath-font-heading);
	font-size:      var(--ath-text-h1-size);
	font-weight:    var(--ath-text-h1-weight);
	line-height:    var(--ath-text-h1-lh);
	letter-spacing: var(--ath-text-h1-ls);
}

.ath-type-h2,
.ath-type-h2 .elementor-heading-title,
.ath-type-h2 .elementor-button {
	font-family:    var(--ath-font-heading);
	font-size:      var(--ath-text-h2-size);
	font-weight:    var(--ath-text-h2-weight);
	line-height:    var(--ath-text-h2-lh);
	letter-spacing: var(--ath-text-h2-ls);
}

.ath-type-h3,
.ath-type-h3 .elementor-heading-title,
.ath-type-h3 .elementor-button {
	font-family:    var(--ath-font-heading);
	font-size:      var(--ath-text-h3-size);
	font-weight:    var(--ath-text-h3-weight);
	line-height:    var(--ath-text-h3-lh);
	letter-spacing: var(--ath-text-h3-ls);
}

.ath-type-h4,
.ath-type-h4 .elementor-heading-title,
.ath-type-h4 .elementor-button {
	font-family:    var(--ath-font-body);
	font-size:      var(--ath-text-h4-size);
	font-weight:    var(--ath-text-h4-weight);
	line-height:    var(--ath-text-h4-lh);
	letter-spacing: var(--ath-text-h4-ls);
}

.ath-type-h5,
.ath-type-h5 .elementor-heading-title,
.ath-type-h5 .elementor-button {
	font-family:    var(--ath-font-body);
	font-size:      var(--ath-text-h5-size);
	font-weight:    var(--ath-text-h5-weight);
	line-height:    var(--ath-text-h5-lh);
	letter-spacing: var(--ath-text-h5-ls);
}

.ath-type-h6,
.ath-type-h6 .elementor-heading-title,
.ath-type-h6 .elementor-button {
	font-family:    var(--ath-font-body);
	font-size:      var(--ath-text-h6-size);
	font-weight:    var(--ath-text-h6-weight);
	line-height:    var(--ath-text-h6-lh);
	letter-spacing: var(--ath-text-h6-ls);
}

.ath-type-eyebrow,
.ath-type-eyebrow .elementor-heading-title,
.ath-type-eyebrow .elementor-button {
	font-family:    var(--ath-font-accent);
	font-size:      var(--ath-text-eyebrow-size);
	font-weight:    var(--ath-text-eyebrow-weight);
	line-height:    var(--ath-text-eyebrow-lh);
	letter-spacing: var(--ath-text-eyebrow-ls);
	text-transform: var(--ath-text-eyebrow-transform);
}

.ath-type-button,
.ath-type-button .elementor-heading-title,
.ath-type-button .elementor-button {
	font-family:    var(--ath-font-accent);
	font-size:      var(--ath-text-button-size);
	font-weight:    var(--ath-text-button-weight);
	line-height:    var(--ath-text-button-lh);
	letter-spacing: var(--ath-text-button-ls);
}

.ath-type-body,
.ath-type-body .elementor-heading-title,
.ath-type-body .elementor-button {
	font-family:    var(--ath-font-body);
	font-size:      var(--ath-text-body-size);
	font-weight:    var(--ath-text-body-weight);
	line-height:    var(--ath-text-body-lh);
	letter-spacing: var(--ath-text-body-ls);
}

.ath-type-lead,
.ath-type-lead .elementor-heading-title,
.ath-type-lead .elementor-button {
	font-family:    var(--ath-font-body);
	font-size:      var(--ath-text-lead-size);
	font-weight:    var(--ath-text-lead-weight);
	line-height:    var(--ath-text-lead-lh);
	letter-spacing: var(--ath-text-lead-ls);
}

.ath-type-caption,
.ath-type-caption .elementor-heading-title,
.ath-type-caption .elementor-button {
	font-family:    var(--ath-font-body);
	font-size:      var(--ath-text-caption-size);
	font-weight:    var(--ath-text-caption-weight);
	line-height:    var(--ath-text-caption-lh);
	letter-spacing: var(--ath-text-caption-ls);
}

/* A link marked ath-hide-unlinked is left out while it has no address: a privacy link until Settings › Privacy names a published page, and an imported link until a page has its address. */
body:not(.elementor-editor-active) .elementor-widget.ath-hide-unlinked:not(:has(a[href]:not([href="#"]))),
body:not(.elementor-editor-active) .ath-hide-unlinked li:has(> a:not([href])) {
	display: none;
}