/**
 * Luigi Gaviola child theme: site styles.
 *
 * Only what Elementor's class system can't express lives here: pseudo-elements,
 * descendant/state selectors, and third-party markup (Pro Form).
 *
 * Colors come from the Elementor global variables (Site Settings > Variables), which
 * Elementor prints on :root: --primary, --primary-light, --accent, --accent-bright,
 * --dark, --dark-deep, --light, --white, plus the supporting --muted and --line.
 * Each use carries the hex as a fallback for screens Elementor doesn't style.
 */

:root {
	/* Text and lines on dark backgrounds (derived from the palette, not separate brand colors). */
	--lg-on-dark: #FFFFFF;
	--lg-on-dark-muted: #CBD5E1;
	--lg-on-dark-line: rgba(255, 255, 255, 0.24);
}

/* ------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------ */

/*
 * The parent theme turns on smooth scrolling. GSAP's section snap and the header both drive
 * the scroll position directly, and CSS smoothing makes every one of those moves lag and fight.
 */
html {
	scroll-behavior: auto;
}

/* Sections slide in from the sides (main.js); clip so that never adds a sideways scrollbar.
   "clip" rather than "hidden" keeps the sticky header working. */
body {
	overflow-x: clip;
	font-family: "Geist", system-ui, sans-serif;
	color: var(--dark, #0F172A);
	background: var(--light, #F8FAFC);
	-webkit-font-smoothing: antialiased;
}

:focus-visible {
	outline: 2px solid var(--primary, #2563EB);
	outline-offset: 3px;
}

/*
 * Elementor gives its containers a CSS "transition: transform 0.4s". On anything GSAP animates,
 * that makes the browser chase every GSAP frame with its own 0.4s slide, so motion lags and
 * stutters. These elements are animated only by GSAP (main.js), so their CSS transitions are off.
 */
.elementor .reveal,
.elementor .tool,
.elementor .north-star,
.elementor .north-star-rays,
.elementor .menu-backdrop,
.elementor .shape-drift,
.elementor .hero-content > *,
.elementor .site-nav,
.elementor .site-nav > * {
	transition: none;
}

/*
 * Floating geo shapes: main.js animates these custom properties (an idle float plus a lean
 * away from the pointer). "translate" and "rotate" stack with "transform", so the scroll drift
 * and page-hero motion on the same shapes keep working. Header logo shapes aren't included.
 * !important because GSAP writes an inline "translate: none" on anything it moves.
 */
[data-elementor-post-type="page"] .shape {
	translate: calc(var(--float-x, 0px) + var(--pointer-x, 0px)) calc(var(--float-y, 0px) + var(--pointer-y, 0px)) !important;
	rotate: var(--float-r, 0deg) !important;
	will-change: translate, rotate;
}

/* ------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------ */

/* Elementor wraps the header site part, so the wrapper is what sticks (main.js slides it). */
.elementor-location-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

/* Mobile/tablet menu: shown while open (class toggled by main.js). */
@media (max-width: 1024px) {
	.site-header.is-open .site-nav {
		display: flex;
	}
}

/*
 * Mobile/tablet menu button: a navy tile (size, color and radius from the Elementor
 * "menu-toggle" class) with three right-aligned lines of different lengths; the short middle
 * one is cyan. On hover the lines even out; when the menu opens (aria-expanded, set by main.js)
 * the outer lines swing into an X with a slight overshoot, the middle one slides away, and the
 * tile turns blue. The "Menu" text stays in the markup for the editor; screen readers use the
 * aria-label from main.js.
 */
.elementor .menu-toggle {
	background-image: linear-gradient(var(--accent, #22D3EE), var(--accent, #22D3EE));
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 10px 2px;
	transition: background-color 0.3s ease, background-size 0.3s ease, box-shadow 0.3s ease;
}

.elementor .menu-toggle::before,
.elementor .menu-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background: var(--lg-on-dark);
	transition: transform 0.45s cubic-bezier(0.68, -0.45, 0.27, 1.45), width 0.3s ease;
}

.elementor .menu-toggle::before {
	width: 20px;
	transform: translateY(-7px);
}

.elementor .menu-toggle::after {
	width: 14px;
	transform: translateY(7px);
}

.elementor .menu-toggle:hover,
.elementor .menu-toggle:focus-visible {
	background-size: 20px 2px;
}

.elementor .menu-toggle:hover::after,
.elementor .menu-toggle:focus-visible::after {
	width: 20px;
}

.elementor .menu-toggle[aria-expanded="true"] {
	background-color: var(--primary, #2563EB);
	background-size: 0 2px;
	box-shadow: 0 8px 24px -6px rgba(0, 229, 255, 0.6);
}

.elementor .menu-toggle[aria-expanded="true"]::before {
	transform: rotate(45deg);
}

.elementor .menu-toggle[aria-expanded="true"]::after {
	width: 20px;
	transform: rotate(-45deg);
}

/* Backdrop behind the open mobile menu: the "Menu Backdrop" element in the footer site part
   (position and color come from its Elementor class). Reduced-motion fallback: no GSAP,
   so this class shows it. */
.elementor .menu-backdrop.is-visible {
	opacity: 1;
	visibility: visible;
}

/* ------------------------------------------------------------------
 * Markers: small shapes drawn before labels and headings.
 * Pseudo-elements instead of empty Elementor divs, so the editor
 * doesn't stretch them and the DOM stays smaller.
 * ------------------------------------------------------------------ */

.marker-square::before,
.marker-ring::before,
.marker-dot::before {
	content: "";
	flex: none;
	display: inline-block;
}

/* Square: before service headings and mono labels. */
.marker-square::before {
	width: 8px;
	height: 8px;
	background: var(--primary, #2563EB);
	transform: translateY(-3px);
	transition: transform 0.3s ease;
}

.label.marker-square::before {
	transform: none;
}

/* Ring: capability groups. */
.marker-ring::before {
	width: 10px;
	height: 10px;
	box-sizing: border-box;
	border: 2px solid var(--primary, #2563EB);
	border-radius: 50%;
}

/* Dot: "Works with" label. */
.marker-dot::before {
	width: 8px;
	height: 8px;
	background: var(--accent, #22D3EE);
	border-radius: 50%;
}

/* Accent dash on top of each "Why work with me" point. */
.rule-dash::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 32px;
	height: 2px;
	background: var(--primary, #2563EB);
}

/* Circle where each process step's line starts. */
.rule-node::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 0;
	width: 12px;
	height: 12px;
	box-sizing: border-box;
	border: 2px solid var(--dark, #0F172A);
	border-radius: 50%;
	background: var(--light, #F8FAFC);
}

.rule-node.is-accent::before {
	border-color: var(--accent, #22D3EE);
	background: var(--accent, #22D3EE);
}

/* ------------------------------------------------------------------
 * Row hover (Services, Technical capabilities): the title nudges right
 * and takes the primary color, the marker turns with it.
 * ------------------------------------------------------------------ */

.split-row .split-title {
	transition: color 0.3s ease, transform 0.3s ease;
}

.elementor .split-row:hover .split-title {
	color: var(--primary, #2563EB);
	transform: translateX(6px);
}

.split-row:hover .marker-square::before {
	transform: translateY(-3px) rotate(45deg);
}

/* ------------------------------------------------------------------
 * Dark sections (Hero, Works with, Process, Footer): recolor the text inside.
 * The extra .elementor ancestor outranks Elementor's own default/class rules.
 * ------------------------------------------------------------------ */

.elementor .section--dark h1,
.elementor .section--dark h2,
.elementor .section--dark h3 {
	color: var(--lg-on-dark);
}

.elementor .section--dark p {
	color: var(--lg-on-dark-muted);
}

.elementor .section--dark .label {
	color: var(--accent, #22D3EE);
}

.elementor .section--dark .lead {
	color: #E2E8F0;
}

.elementor .section--dark .link-cta {
	color: var(--lg-on-dark);
	text-decoration-color: var(--accent, #22D3EE);
}

.elementor .section--dark .link-cta:hover {
	color: var(--accent-bright, #00E5FF);
}

/* Outline button reads as white on dark backgrounds. */
.elementor .section--dark .btn-secondary {
	color: var(--lg-on-dark);
	border-color: rgba(255, 255, 255, 0.6);
}

.elementor .section--dark .btn-secondary:hover,
.elementor .section--dark .btn-secondary:focus-visible {
	color: var(--dark, #0F172A);
	background: var(--lg-on-dark);
	border-color: var(--lg-on-dark);
}

/* Process step lines and nodes on dark. */
.section--dark .rule-node::before {
	border-color: var(--lg-on-dark);
	background: var(--dark, #0F172A);
}

.section--dark .rule-node.is-accent::before {
	border-color: var(--accent, #22D3EE);
	background: var(--accent, #22D3EE);
}

/* ------------------------------------------------------------------
 * "How a project runs": a progress track that loads stage by stage
 * as the section scrolls into view (driven by main.js).
 * ------------------------------------------------------------------ */

/* Backdrop: a faint dot grid with a blue glow in the top right corner. */
.elementor .process-section {
	background-image:
		radial-gradient(rgba(148, 163, 184, 0.16) 1px, transparent 1px),
		radial-gradient(ellipse 60% 80% at 90% 0%, rgba(37, 99, 235, 0.3), transparent 70%);
	background-size: 24px 24px, auto;
}

/* The filled part of the track: blue to cyan, with a glowing dot at its leading edge. */
.process-track-fill {
	background: linear-gradient(90deg, var(--primary, #2563EB), var(--accent-bright, #00E5FF));
	box-shadow: 0 0 12px rgba(0, 229, 255, 0.55);
}

.process-track-fill::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -5px;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-radius: 50%;
	background: var(--accent-bright, #00E5FF);
	box-shadow: 0 0 12px 3px rgba(0, 229, 255, 0.7);
}

/* 1200px and below (laptops, tablets, phones): the steps stack and the track runs down the
   left side. Wider than Elementor's own breakpoints, so the stacked layout lives here; the
   phone values in the Elementor classes match it. main.js switches the fill to vertical at
   the same width. */
@media (max-width: 1200px) {
	.elementor .process-steps {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 40px;
		padding-left: 36px;
	}

	.elementor .process-steps > .process-track {
		top: 6px;
		bottom: 6px;
		left: 5px;
		right: auto;
		width: 2px;
		height: auto;
	}

	.elementor .process-steps > .rule-node {
		max-width: 560px;
	}

	.process-track-fill {
		background: linear-gradient(180deg, var(--primary, #2563EB), var(--accent-bright, #00E5FF));
	}

	.process-track-fill::after {
		top: auto;
		bottom: -5px;
		right: auto;
		left: 50%;
		margin: 0 0 0 -5px;
	}

	.elementor .process-steps > .rule-node {
		flex: none;
		padding-top: 0;
	}

	.process-steps > .rule-node::before {
		top: 6px;
		left: -36px;
	}
}

/* Stage states. Only applied once main.js has taken over (.is-animated), so without
   JavaScript, or with reduced motion, every stage simply shows as complete. */
.process-steps.is-animated .rule-node h3,
.process-steps.is-animated .rule-node p {
	transition: color 0.4s ease, opacity 0.4s ease;
}

.elementor .process-steps.is-animated .rule-node h3 {
	color: #64748B;
}

.elementor .process-steps.is-animated .rule-node p {
	opacity: 0.45;
}

.elementor .process-steps.is-animated .rule-node.is-active h3 {
	color: var(--lg-on-dark);
}

.elementor .process-steps.is-animated .rule-node.is-active p {
	opacity: 1;
}

/* Node: grey until reached, then lit cyan with a glow. */
.process-steps.is-animated .rule-node::before {
	border-color: #475569;
	background: var(--dark, #0F172A);
	transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.process-steps.is-animated .rule-node.is-active::before {
	border-color: var(--accent-bright, #00E5FF);
	background: var(--accent-bright, #00E5FF);
	box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.18), 0 0 14px rgba(0, 229, 255, 0.8);
}

/* The stage in progress pulses. */
.process-steps.is-animated .rule-node.is-current::after {
	content: "";
	position: absolute;
	top: -13px;
	left: -6px;
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	border: 1px solid var(--accent-bright, #00E5FF);
	border-radius: 50%;
	animation: lg-pulse 1.6s ease-out infinite;
}

@media (max-width: 1200px) {
	.process-steps.is-animated .rule-node.is-current::after {
		top: 0;
		left: -42px;
	}
}

@keyframes lg-pulse {
	from {
		transform: scale(0.6);
		opacity: 1;
	}

	to {
		transform: scale(1.8);
		opacity: 0;
	}
}

/* Footer links on the dark footer. */
.elementor .section--dark .footer-link {
	color: var(--lg-on-dark-muted);
}

.elementor .section--dark .footer-link:hover {
	color: var(--lg-on-dark);
}

/* ------------------------------------------------------------------
 * Primary-color section (Contact): white text on the blue band.
 * ------------------------------------------------------------------ */

.elementor .section--accent h2 {
	color: var(--lg-on-dark);
}

.elementor .section--accent p {
	color: #DBEAFE;
}

.elementor .section--accent p a {
	color: var(--lg-on-dark);
	font-weight: 600;
	text-decoration-color: var(--accent-bright, #00E5FF);
	text-underline-offset: 4px;
}

/* The form card keeps its own dark-on-white text. */
.elementor .section--accent .contact-form p,
.elementor .section--accent .contact-form label {
	color: var(--dark, #0F172A);
}

/* ------------------------------------------------------------------
 * Hero night sky: soft color glows behind a canvas starfield (drawn by
 * main.js) and one standout "north star" (the .north-star element).
 * ------------------------------------------------------------------ */

.elementor .hero-stars {
	background-image:
		radial-gradient(ellipse 60% 70% at 78% 45%, rgba(34, 211, 238, 0.14), transparent 70%),
		radial-gradient(ellipse 50% 60% at 10% 100%, rgba(37, 99, 235, 0.28), transparent 70%),
		linear-gradient(180deg, var(--dark-deep, #020617) 0%, var(--dark, #0F172A) 100%);
}

/*
 * Hero text: the <h1> is the small "Freelance Web Developer" line (label style); the big
 * headline is a <p> with the display-title class. Highlighted words: wrap them in <span>.
 */
.elementor .section--dark .display-title {
	color: var(--lg-on-dark);
}

.elementor .hero-stars .display-title span {
	color: var(--primary, #2563EB);
}

/* The canvas main.js draws the stars on, inside the "Hero Starfield" element. */
.hero-starfield > canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * The standout star: a bright core with a cyan halo...
 * The halo is all gradient (no CSS filter), and will-change keeps the element on its own
 * GPU layer, so the breathing and turning animations don't repaint the page every frame.
 */
.north-star {
	z-index: 1;
	border-radius: 50%;
	background: radial-gradient(circle,
		#FFFFFF 0 2.4%,
		rgba(224, 252, 255, 0.95) 3.8%,
		rgba(0, 229, 255, 0.7) 8%,
		rgba(34, 211, 238, 0.38) 16%,
		rgba(37, 99, 235, 0.18) 30%,
		rgba(37, 99, 235, 0.06) 46%,
		transparent 66%);
	will-change: transform, opacity;
	contain: layout paint;
}

/* ...two long rays (vertical and horizontal)... */
.north-star::before,
.north-star::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.north-star::before {
	width: 3px;
	height: 100%;
	background: linear-gradient(180deg, transparent, rgba(236, 254, 255, 1) 50%, transparent);
}

.north-star::after {
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, transparent, rgba(236, 254, 255, 1) 50%, transparent);
}

/* ...and two shorter diagonal rays: the "North Star Rays" element (position from its Elementor class),
   kept separate so main.js can turn them on their own. */
.north-star-rays {
	will-change: transform;
}

.north-star-rays::before,
.north-star-rays::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 100%;
	background: linear-gradient(180deg, transparent, rgba(236, 254, 255, 0.7) 50%, transparent);
}

.north-star-rays::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.north-star-rays::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* On phones the star sits behind the text, so it's dimmed. */
@media (max-width: 767px) {
	.north-star {
		opacity: 0.55;
	}
}

/* ------------------------------------------------------------------
 * "Works with" proximity grid (scaling driven by main.js)
 * ------------------------------------------------------------------ */

/* Backdrop: a muted dot grid with soft blue and cyan glows, so the section isn't a flat block of navy. */
.elementor .tools-section {
	background-image:
		radial-gradient(rgba(148, 163, 184, 0.13) 1px, transparent 1px),
		radial-gradient(ellipse 55% 70% at 8% 100%, rgba(37, 99, 235, 0.28), transparent 70%),
		radial-gradient(ellipse 45% 60% at 95% 10%, rgba(34, 211, 238, 0.12), transparent 70%);
	background-size: 24px 24px, auto, auto;
}

/* Scattered look: every other column sits lower, desktop only (margins, so GSAP's scale transform is free). */
@media (min-width: 1025px) {
	.tool-grid > .tool:nth-child(even) {
		margin-top: 40px;
	}

	.tool-grid > .tool:nth-child(3n) {
		margin-top: -16px;
	}
}

.tool {
	cursor: default;
	will-change: transform;
}

/* Tiles glow cyan while the pointer is close (class set by main.js). */
.tool-icon {
	transition: box-shadow 0.3s ease;
}

.tool.is-near .tool-icon {
	box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.6), 0 12px 32px -8px rgba(34, 211, 238, 0.55);
}

.elementor .section--dark .tool-label {
	color: var(--lg-on-dark-muted);
	transition: color 0.3s ease;
}

.elementor .section--dark .tool.is-near .tool-label {
	color: var(--accent-bright, #00E5FF);
}

/* ------------------------------------------------------------------
 * Internal page hero (.page-hero on Projects and Experience, dark via section--dark)
 * Same backdrop as "The tools behind the work", plus a slowly drifting dot grid,
 * a glow that follows the pointer (position set by main.js) and a gradient rule
 * under the title.
 * ------------------------------------------------------------------ */

.elementor .page-hero {
	isolation: isolate;
	overflow: hidden;
	background-image:
		radial-gradient(rgba(148, 163, 184, 0.13) 1px, transparent 1px),
		radial-gradient(ellipse 55% 70% at 8% 100%, rgba(37, 99, 235, 0.28), transparent 70%),
		radial-gradient(ellipse 45% 60% at 95% 10%, rgba(34, 211, 238, 0.12), transparent 70%);
	background-size: 24px 24px, auto, auto;
	animation: lg-grid-drift 18s linear infinite;
}

/* Only the first layer (the dot grid) moves; one full cell per loop, so it repeats seamlessly. */
@keyframes lg-grid-drift {
	from {
		background-position: 0 0, 0 0, 0 0;
	}

	to {
		background-position: 24px 24px, 0 0, 0 0;
	}
}

/* Pointer glow. --spot-x / --spot-y are updated by main.js; it rests top right without a pointer. */
.elementor .page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(420px circle at var(--spot-x, 78%) var(--spot-y, 30%), rgba(0, 229, 255, 0.16), rgba(37, 99, 235, 0.08) 40%, transparent 70%);
}

/* Gradient rule under the title (main.js draws it in from the left). */
.elementor .page-hero .page-hero-title::after {
	content: "";
	display: block;
	width: 96px;
	height: 3px;
	margin-top: 20px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--primary, #2563EB), var(--accent-bright, #00E5FF));
	box-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
	transform: scaleX(var(--rule-scale, 1));
	transform-origin: left center;
}

/* Decorative shapes, recolored for the dark background. */
.elementor .page-hero .page-hero-ring {
	border-color: rgba(34, 211, 238, 0.45);
	box-shadow: 0 0 40px rgba(34, 211, 238, 0.15), inset 0 0 40px rgba(34, 211, 238, 0.08);
}

.elementor .page-hero .page-hero-square {
	border-color: rgba(59, 130, 246, 0.6);
	background-color: rgba(37, 99, 235, 0.12);
	will-change: transform;
	transition: none;
}

/* ------------------------------------------------------------------
 * Technologies as pills (project cards and the Experience skills)
 * main.js splits the comma-separated text inside .projects-tech-list and .skill-list
 * into one .tech-pill per item. Without JavaScript the plain list shows.
 * ------------------------------------------------------------------ */

.skill-list .tech-pill {
	padding: 8px 14px;
	font-size: 13px;
	background: var(--white, #FFFFFF);
}

.tech-pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	font-family: "Geist Mono", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	color: var(--primary, #2563EB);
	background: rgba(37, 99, 235, 0.08);
	border: 1px solid rgba(37, 99, 235, 0.25);
	border-radius: 999px;
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.tech-pill:hover {
	color: var(--white, #FFFFFF);
	background: var(--primary, #2563EB);
	border-color: var(--primary, #2563EB);
}

/* ------------------------------------------------------------------
 * Experience page: work-history table
 * Layout, spacing and type come from the experience-* Elementor classes (a 4-column grid
 * per row on desktop, stacked cards from 1024px down). Here: the details those can't
 * express, plus the states main.js sets.
 * ------------------------------------------------------------------ */

/* Progress line down the table's left edge; main.js grows it (--exp-progress) with the scroll. */
.elementor .experience-table::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: 3px;
	background: linear-gradient(180deg, var(--primary, #2563EB), var(--accent-bright, #00E5FF));
	box-shadow: 0 0 12px rgba(0, 229, 255, 0.45);
	transform: scaleY(var(--exp-progress, 1));
	transform-origin: top;
	pointer-events: none;
}

/* Rows: soft highlight on hover, the role takes the primary color. */
.elementor .experience-row:not(.experience-head) {
	transition: background-color 0.3s ease;
}

.elementor .experience-row:not(.experience-head):hover {
	background-color: #F1F5FF;
}

.experience-row .experience-role {
	transition: color 0.3s ease;
}

.elementor .experience-row:hover .experience-role {
	color: var(--primary, #2563EB);
}

.elementor .experience-row:last-child {
	border-bottom: 0;
}

/* Highlight bullets: a short cyan dash. */
.experience-point::before {
	content: "";
	position: absolute;
	top: 0.8em;
	left: 0;
	width: 10px;
	height: 2px;
	border-radius: 2px;
	background: var(--accent, #22D3EE);
}

/* The current role: a pulsing dot before its period. */
.experience-row-current .experience-period::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 50%;
	vertical-align: 1px;
	background: var(--accent-bright, #00E5FF);
	box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.6);
	animation: lg-live 2s ease-out infinite;
}

@keyframes lg-live {
	70% {
		box-shadow: 0 0 0 8px rgba(0, 229, 255, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(0, 229, 255, 0);
	}
}

/* Stacked cards (1024px and below): the period pill holds the dot inline. */
@media (max-width: 1024px) {
	.experience-row-current .experience-period::before {
		align-self: center;
		vertical-align: 0;
	}
}

/* ------------------------------------------------------------------
 * About: the Lottie animation (Elementor Pro Lottie widget, class "about-animation")
 * sits in front of the square and ring that used to frame the photo.
 * ------------------------------------------------------------------ */

.elementor .about-animation {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* ------------------------------------------------------------------
 * Contact form (Elementor Pro Form widget)
 * Sizing the widget's own controls don't cover. Colors are set on the widget.
 * ------------------------------------------------------------------ */

.contact-form .elementor-field-label {
	font-size: 14px;
	font-weight: 500;
}

.contact-form .elementor-field-textual {
	min-height: 48px;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px;
	border-radius: 4px;
}

.contact-form .elementor-button {
	min-height: 52px;
	padding: 0 26px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	border-radius: 6px;
}

/* ------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------ */

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

	.elementor .page-hero {
		animation: none;
	}

	.experience-row-current .experience-period::before {
		animation: none;
	}
}