/* ==========================================================================
   Relia Spacetech — Main Stylesheet
   Every color/font/size value below reads from a --relia-* CSS variable
   generated by inc/css-output.php from Global Design Settings. Do not
   hardcode brand colors or fonts here — add/adjust a variable instead.
   ========================================================================== */

/* ---- Base ---- */
body {
	font-family: var(--relia-body-font);
	font-size: var(--relia-body-size);
	font-weight: var(--relia-body-weight);
	line-height: var(--relia-body-line);
	letter-spacing: var(--relia-body-tracking);
	color: var(--relia-text);
	background-color: var(--relia-background);
	background-image: var(--relia-main-bg-image);
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

a { color: var(--relia-link-color); text-decoration: none; }
a:hover { color: var(--relia-link-hover-color); }

@media (max-width: 768px) { body { background-attachment: scroll; } }

/* !important on color/font-family here is deliberate: Elementor generates
   its own per-widget CSS using high-specificity ID selectors (e.g. for its
   Kit's default global colors), which otherwise silently wins over these
   plain tag rules even when no per-widget color was intentionally set.
   Global Design Settings is specifically required to be the site's single
   source of truth for typography, so these must always win. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--relia-heading-font) !important;
	color: var(--relia-heading) !important;
	margin: 0 0 0.5em;
}
h1 { color: var(--relia-h1-color) !important; font-size: var(--relia-h1-size); font-weight: var(--relia-h1-weight); line-height: var(--relia-h1-line); letter-spacing: var(--relia-h1-tracking); }
h2 { color: var(--relia-h2-color) !important; font-size: var(--relia-h2-size); font-weight: var(--relia-h2-weight); line-height: var(--relia-h2-line); letter-spacing: var(--relia-h2-tracking); }
h3 { color: var(--relia-h3-color) !important; font-size: var(--relia-h3-size); font-weight: var(--relia-h3-weight); line-height: var(--relia-h3-line); letter-spacing: var(--relia-h3-tracking); }
h4 { color: var(--relia-h4-color) !important; font-size: var(--relia-h4-size); font-weight: var(--relia-h4-weight); line-height: var(--relia-h4-line); letter-spacing: var(--relia-h4-tracking); }

small, .relia-small-text { color: var(--relia-small-color); font-size: var(--relia-small-size); line-height: var(--relia-small-line); }

p { margin: 0 0 1.2em; }
img { display: block; }

.relia-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.relia-section-padding { padding: 90px 0; }
@media (max-width: 1024px) { .relia-section-padding { padding: 64px 0; } }
@media (max-width: 600px) { .relia-section-padding { padding: 44px 0; } }

/* Background utility classes — add as an Elementor "CSS Class" (Advanced tab)
   on any Section/Container to pull from Global Design Settings. Sections
   left blank keep the theme default section background automatically. */
.relia-bg-light { background-color: var(--relia-light-background); }
.relia-bg-dark  { background-color: var(--relia-dark-section-bg, var(--relia-dark-background)); color: var(--relia-footer-text, #fff); }
.relia-bg-dark h1, .relia-bg-dark h2, .relia-bg-dark h3, .relia-bg-dark h4 { color: #fff; }
.relia-bg-hero  { background-image: var(--relia-hero-bg-image); background-size: cover; background-position: center; }
.relia-bg-accent { background-color: var(--relia-accent); }

/* Elementor sections with no custom background set fall back to the global
   default section background, without overriding sections that DO set one. */
/* NOTE: the default-section-background rule that used to live here was
   moved to inc/css-output.php (relia_generate_css_variables()), where it
   is now only emitted when the admin has explicitly enabled it (Global
   Design Settings → Backgrounds → "Apply Default Section Background").
   By default it is omitted entirely, so a section with no configured
   background is transparent and reveals the site's Main Website
   Background Image (body) instead of painting over it. Sections that
   manage their own background (.relia-bg-hero/.relia-bg-light/
   .relia-bg-dark/.relia-bg-accent/.relia-media-section) are always
   excluded from this rule, on or off, so they're never affected. */

/* ---- Buttons (site-wide + Elementor Free button widget) ----
   !important is necessary here: Elementor applies its own default button
   styling (from its Kit) using high-specificity, per-widget generated CSS,
   which otherwise wins over a plain class selector even with no manual
   customization. Since Global Design Settings is required to be the single
   source of truth for button styling, these must always win by default. */
.relia-btn,
.elementor-button {
	display: inline-block;
	font-family: var(--relia-button-font) !important;
	font-size: var(--relia-button-size) !important;
	font-weight: var(--relia-button-weight) !important;
	letter-spacing: var(--relia-button-tracking);
	background-color: var(--relia-button-bg) !important;
	color: var(--relia-button-text) !important;
	fill: var(--relia-button-text);
	border-radius: var(--relia-button-radius) !important;
	padding: var(--relia-button-padding-v) var(--relia-button-padding-h) !important;
	border: none !important;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.relia-btn:hover,
.elementor-button:hover {
	background-color: var(--relia-button-hover-bg) !important;
	color: var(--relia-button-hover-text) !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -8px rgba(0,0,0,0.35);
}
.relia-btn-secondary { background-color: transparent !important; color: var(--relia-primary) !important; border: 1.5px solid var(--relia-primary) !important; }
.relia-btn-secondary:hover { background-color: var(--relia-primary) !important; color: #fff !important; }

/* Elementor heading / text-editor widgets inherit the global type system
   by default; same !important reasoning as above applies. */
.elementor-widget-heading .elementor-heading-title { font-family: var(--relia-heading-font) !important; }
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
	font-family: var(--relia-body-font) !important;
	color: var(--relia-text) !important;
	font-size: var(--relia-body-size);
	line-height: var(--relia-body-line);
}

/* ---- Header ---- */
.site-header {
	background-color: var(--relia-header-bg);
	position: relative;
	z-index: 100;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled { box-shadow: 0 4px 18px rgba(0,0,0,0.06); }
.site-header.is-sticky { position: sticky; top: 0; }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; max-width: 1200px; margin: 0 auto; }
.site-logo { display: flex; align-items: center; }
.site-logo img { max-height: 44px; width: auto; }
.site-logo-text { font-family: var(--relia-heading-font); font-weight: 700; font-size: 22px; color: var(--relia-heading); }

.primary-navigation { display: flex; align-items: center; gap: 32px; }
.primary-navigation ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.primary-navigation a {
	font-family: var(--relia-nav-font) !important;
	font-size: var(--relia-nav-size);
	font-weight: var(--relia-nav-weight);
	letter-spacing: var(--relia-nav-tracking);
	color: var(--relia-nav-color) !important;
}
.primary-navigation a:hover,
.primary-navigation .current-menu-item > a { color: var(--relia-nav-hover-color) !important; }

.primary-navigation ul > li > a {
	position: relative;
}
.primary-navigation ul > li > a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background: var(--relia-nav-hover-color);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}
.primary-navigation ul > li > a:hover::after,
.primary-navigation ul > li.current-menu-item > a::after { transform: scaleX(1); }

.header-cta { margin-left: 12px; }

/* ---- Dynamic "For" dropdown ---- */
.relia-for-dropdown { position: relative; }
.relia-for-toggle {
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--relia-nav-font);
	font-size: var(--relia-nav-size);
	font-weight: var(--relia-nav-weight);
	color: var(--relia-nav-color) !important;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}
.relia-for-caret { font-size: 10px; transition: transform 0.2s ease; }
.relia-for-dropdown.is-open .relia-for-caret { transform: rotate(180deg); }
.relia-for-submenu {
	list-style: none;
	margin: 0;
	padding: 10px 0;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--relia-header-bg);
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 8px;
	box-shadow: 0 12px 28px rgba(0,0,0,0.10);
	min-width: 200px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 200;
}
.relia-for-dropdown.is-open .relia-for-submenu,
.relia-for-dropdown:hover .relia-for-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.relia-for-submenu li { margin: 0; }
.relia-for-submenu a {
	display: block;
	padding: 8px 18px;
	color: var(--relia-nav-color);
	font-size: var(--relia-nav-size);
}
.relia-for-submenu a:hover { color: var(--relia-nav-hover-color); background: var(--relia-light-background); }
@media (max-width: 900px) {
	.relia-for-submenu { position: static; box-shadow: none; border: none; opacity: 1; visibility: visible; transform: none; display: none; }
	.relia-for-dropdown.is-open .relia-for-submenu { display: block; }
}
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.menu-toggle span { display: block; width: 26px; height: 2px; background: var(--relia-heading); margin: 5px 0; }

@media (max-width: 900px) {
	.menu-toggle { display: block; }
	.primary-navigation { position: fixed; inset: 0 0 0 auto; width: 78%; max-width: 340px; background: var(--relia-header-bg); flex-direction: column; align-items: flex-start; padding: 90px 28px 28px; transform: translateX(100%); transition: transform 0.25s ease; box-shadow: -8px 0 24px rgba(0,0,0,0.08); }
	.primary-navigation.is-open { transform: translateX(0); }
	.primary-navigation ul { flex-direction: column; gap: 18px; }
	.header-cta { margin-left: 0; margin-top: 24px; }
}

/* ---- Hero (used by the Elementor hero sections on every page) ---- */
.relia-hero { padding: 120px 0 90px; position: relative; }
@media (max-width: 1024px) { .relia-hero { padding: 80px 0 56px; } }
.relia-hero-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px; color: var(--relia-accent); font-weight: 600; margin-bottom: 14px; }
.relia-hero-grid { display: grid; grid-template-columns: 55% 45%; gap: 48px; align-items: center; }
@media (max-width: 900px) { .relia-hero-grid { grid-template-columns: 1fr; } }

/* ---- Hero Banner Video / Slideshow ----
   Injected by main.js when a video OR 1–3 slideshow images are set in
   Global Design Settings. Both share the same "has-bg-video" class/text
   treatment since visually they play the same role (a full-bleed moving
   background with the hero's own content lifted above it in white text). */
.relia-hero.has-bg-video { overflow: hidden; }
.relia-hero-media-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
video.relia-hero-media-bg { object-fit: cover; }

/* Slideshow: all slides stacked in the same spot, crossfading via opacity. */
.relia-hero-slideshow { overflow: hidden; }
.relia-hero-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.relia-hero-slide.is-active { opacity: 1; }

.relia-hero-media-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1;
}
.relia-hero.has-bg-video > .relia-container {
	position: relative;
	z-index: 2;
}
.relia-hero.has-bg-video h1,
.relia-hero.has-bg-video p,
.relia-hero.has-bg-video .relia-hero-eyebrow,
.relia-hero.has-bg-video .elementor-widget-heading .elementor-heading-title,
.relia-hero.has-bg-video .elementor-widget-text-editor {
	color: #ffffff !important;
}
.relia-hero.has-bg-video .relia-image-slot { display: none; } /* the video/slideshow IS the visual now */

@media (prefers-reduced-motion: reduce) {
	.relia-hero-slide { transition: none; }
}

/* ---- Reusable [relia_section] background system ----
   Separate from the Hero's own video/slideshow CSS above — deliberately
   not shared, so styling changes here can never affect the Hero. */
.relia-media-section { position: relative; }
.relia-media-section--active { overflow: hidden; }
.relia-section-media-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
video.relia-section-media-bg { object-fit: cover; }
.relia-section-slideshow { overflow: hidden; }
.relia-section-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.relia-section-slide.is-active { opacity: 1; }
.relia-section-media-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.relia-media-section--active > .relia-container {
	position: relative;
	z-index: 2;
}
.relia-media-section.has-media-bg h1,
.relia-media-section.has-media-bg h2,
.relia-media-section.has-media-bg h3,
.relia-media-section.has-media-bg h4,
.relia-media-section.has-media-bg p {
	color: #ffffff !important;
}

/* Wrapper around each native WordPress Image block used as a placeholder
   spot (see relia_gb_image_block() in inc/content-builder.php). The image
   itself is our bundled placeholder graphic (already styled with a dashed
   border) until the client replaces it — this wrapper just keeps sizing
   and corners consistent with the rest of the design. */
.relia-image-slot img { display: block; width: 100%; height: auto; border-radius: 10px; }
.relia-image-slot figure { margin: 0; }

/* Legacy plain-placeholder styling, kept in case any content still uses
   the older non-block placeholder pattern. */
.relia-image-placeholder {
	background: repeating-linear-gradient(45deg, var(--relia-light-background), var(--relia-light-background) 10px, #ececec 10px, #ececec 20px);
	border: 1.5px dashed var(--relia-secondary);
	border-radius: 10px;
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
}
.relia-image-placeholder span { color: var(--relia-secondary); font-size: 13px; font-weight: 600; max-width: 240px; }

/* ---- Motion ----
   IMPORTANT: Elementor's native per-widget Entrance Animation setting was
   tried here and removed — on this live site, elements using it rendered
   permanently invisible (Elementor sets animated elements to opacity:0 and
   relies on its own front-end JS to reveal them on scroll, which never
   fired for content written directly into the database rather than saved
   through Elementor's own editor). Content visibility must never depend on
   a script that might not run, so the only animation used below is a pure
   CSS @keyframes entrance with `animation-fill-mode: both` — mathematically
   guaranteed to end in a fully visible, final state with no JS involved at
   all, even if the animation itself never plays for any reason (reduced
   motion, an older browser, anything). The 3D cursor-tilt and hero
   parallax in main.js are additional, separate effects — continuous
   hover/scroll interactions rather than a hidden→visible transition, so
   they carry none of the same risk. */
@keyframes reliaFadeInUp {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}
.relia-hero .relia-hero-eyebrow,
.relia-hero h1,
.relia-hero p,
.relia-hero .elementor-widget-heading .elementor-heading-title,
.relia-hero .elementor-widget-text-editor,
.relia-hero .relia-btn,
.relia-hero .elementor-button {
	animation: reliaFadeInUp 0.6s ease both;
}
.relia-hero h1,
.relia-hero .elementor-widget-heading .elementor-heading-title { animation-delay: 0.05s; }
.relia-hero .elementor-widget-text-editor { animation-delay: 0.15s; }
.relia-hero .relia-btn,
.relia-hero .elementor-button { animation-delay: 0.25s; }

/* Guaranteed minimum breathing room between any two stacked Elementor
   sections, so consecutive sections (e.g. a heading-only section followed
   by a content section) never visually touch or overlap. */
.elementor-section + .elementor-section { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
	.relia-hero *,
	.relia-tilt, .relia-bg-hero {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ---- Cards / grids used inside generated Elementor content ---- */
.relia-card { background: var(--relia-light-background); border-radius: 10px; padding: 32px; height: 100%; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.relia-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.08); }

/* ---- Lightweight 3D tilt (cards, image placeholders, Elementor images) ----
   Pure CSS transition + a small vanilla-JS mousemove handler in main.js —
   no 3D library, no WebGL/canvas. Skipped automatically on touch devices. */
.relia-tilt { transition: transform 0.2s ease-out; will-change: transform; transform: perspective(900px) rotateX(0deg) rotateY(0deg); }
.relia-image-placeholder.relia-tilt,
.relia-image-slot.relia-tilt,
.elementor-widget-image.relia-tilt img { box-shadow: 0 18px 40px rgba(0,0,0,0.10); }
.relia-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.relia-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.relia-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .relia-grid-3, .relia-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .relia-grid-2, .relia-grid-3, .relia-grid-4 { grid-template-columns: 1fr; } }

.relia-step-number { font-family: var(--relia-heading-font); font-size: 34px; font-weight: 700; color: var(--relia-accent); margin-bottom: 10px; display: block; }

table.relia-table { width: 100%; border-collapse: collapse; }
table.relia-table th, table.relia-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,0.08); }
table.relia-table th { font-family: var(--relia-heading-font); color: var(--relia-heading); }
@media (max-width: 700px) { table.relia-table, table.relia-table thead, table.relia-table tbody, table.relia-table th, table.relia-table td, table.relia-table tr { display: block; } table.relia-table thead { display:none; } table.relia-table td { border: none; padding: 6px 0; } table.relia-table tr { padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,0.08); } }

/* ---- Forms (contact + talent forms) ---- */
.relia-form { max-width: 720px; }
.relia-form-row { margin-bottom: 20px; }
.relia-form-row label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--relia-heading); font-size: 14px; }
/* !important is used deliberately here (and nowhere else in this file):
   Elementor's own frontend CSS applies a generic browser-style reset to
   form elements (stripping default border/background) so its own Form
   widget can be styled from scratch. That reset also catches our plain
   HTML form inputs since they render inside an Elementor Shortcode
   widget. These rules guarantee our form always stays visible/usable
   regardless of Elementor version or load order. */
.relia-form-row input[type="text"],
.relia-form-row input[type="email"],
.relia-form-row input[type="tel"],
.relia-form-row input[type="file"],
.relia-form-row select,
.relia-form-row textarea {
	display: block !important;
	width: 100% !important;
	padding: 12px 14px !important;
	border: 1px solid rgba(0,0,0,0.25) !important;
	border-radius: 6px !important;
	font-family: var(--relia-body-font) !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	background: #fff !important;
	color: var(--relia-text) !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	height: auto !important;
	min-height: 46px;
	appearance: auto !important;
	-webkit-appearance: auto !important;
}
.relia-form-row textarea { min-height: 130px !important; resize: vertical; }
.relia-form-row input:focus,
.relia-form-row select:focus,
.relia-form-row textarea:focus {
	outline: none !important;
	border-color: var(--relia-primary) !important;
	box-shadow: 0 0 0 3px rgba(252, 101, 21, 0.15) !important;
}
.relia-form-hp { position: absolute; left: -9999px; top: -9999px; }
.relia-form-success { padding: 16px 18px; border-radius: 6px; background: #eaf6ec; color: #1f5c2a; margin-bottom: 20px; }
.relia-form-error { padding: 16px 18px; border-radius: 6px; background: #fbeaea; color: #7a1f1f; margin-bottom: 20px; }
.relia-field-error { color: #b3261e; font-size: 13px; margin-top: 4px; display: block; }

/* ---- Footer ---- */
.site-footer { background-color: var(--relia-footer-bg); color: var(--relia-footer-text); padding: 64px 0 28px; }
.site-footer a { color: var(--relia-footer-text); }
.site-footer a:hover { color: var(--relia-footer-link); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }
.relia-footer-widget-title { font-family: var(--relia-heading-font); color: var(--relia-footer-text); font-size: 16px; margin-bottom: 16px; }
.footer-brand-tagline { color: var(--relia-footer-link); margin-top: 8px; font-weight: 500; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; font-size: 13px; opacity: 0.8; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.footer-menu ul { list-style: none; margin: 0; padding: 0; }
.footer-menu li { margin-bottom: 10px; }

/* ---- Icon system (social, contact, service icons) ---- */
.relia-icon { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; }
.relia-icon svg { width: 100%; height: 100%; display: block; }
.relia-social-icons { display: flex; gap: 12px; margin-top: 16px; }
.relia-social-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.08);
	color: var(--relia-footer-text);
	font-size: 16px;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.relia-social-icon:hover { background: var(--relia-footer-link); color: #fff; transform: translateY(-2px); }
.relia-social-icon:focus-visible { outline: 2px solid var(--relia-footer-link); outline-offset: 2px; }

.relia-contact-icon-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.relia-contact-icon-row .relia-icon { font-size: 20px; color: var(--relia-accent); flex-shrink: 0; margin-top: 2px; }

.relia-service-icon { font-size: 32px; color: var(--relia-primary); margin-bottom: 14px; display: block; }

/* ---- Blog ---- */
.relia-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 900px) { .relia-blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .relia-blog-grid { grid-template-columns: 1fr; } }
.relia-post-card img { border-radius: 8px; margin-bottom: 16px; aspect-ratio: 3/2; object-fit: cover; }
.relia-post-meta { font-size: 13px; color: var(--relia-secondary); margin-bottom: 8px; }
.relia-pagination { display: flex; gap: 10px; margin-top: 40px; }
.relia-pagination a, .relia-pagination span { padding: 8px 14px; border-radius: 6px; background: var(--relia-light-background); }
.single-post-content { max-width: 760px; margin: 0 auto; }
.single-post-content img { border-radius: 8px; }

/* Lazy-load native attribute support styling hook (no extra JS needed). */
img[loading="lazy"] { background: var(--relia-light-background); }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--relia-primary); color: #fff; padding: 10px 16px; z-index: 999; }
.skip-link:focus { left: 10px; top: 10px; }