/* ============================================================
   AvestaTech — the contact section
   The stage's decorative layer, the console, channel rows and
   the Contact Form 7 skin. Shipped on the two templates that
   render the contact pattern: the homepage and the About page.
   ============================================================ */

/* ---------- Contact: orbit rings and a soft ambient glow drifting behind a
   glass console — the same "one calm light source" language the site
   already used before this rewrite (see avesta-contact-glow below), just
   paired with a bit more motion. Sits directly on the page's own background
   (the site-wide aurora), not a dedicated dark slab; everything decorative
   lives in aria-hidden layers and stops entirely under
   prefers-reduced-motion. ---------- */

.avesta-contact-stage {
	position: relative;
	isolation: isolate;
	/* The decorative layer is inset past the stage edges; clip keeps it from
	   widening the document (and scrolling the page sideways on mobile). */
	overflow: clip;
	padding-block: clamp(1.5rem, 4vw, 3.5rem);
}

/* ---- The stage: rings, orbs and mesh, all purely decorative ---- */

.avesta-contact-shapes {
	position: absolute;
	z-index: -1;
	inset: -6% -4%;
	overflow: hidden;
	pointer-events: none;
	/* Fade the whole ornament out at the frame edge so it reads as depth
	   behind the section rather than a graphic that got cropped. */
	-webkit-mask-image: radial-gradient(92% 88% at 50% 46%, #000 52%, transparent 97%);
	mask-image: radial-gradient(92% 88% at 50% 46%, #000 52%, transparent 97%);
}

.avesta-contact-mesh {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent) 1px, transparent 1px);
	background-size: 28px 28px;
	opacity: 0.5;
	-webkit-mask-image: radial-gradient(52% 46% at 50% 44%, #000, transparent 76%);
	mask-image: radial-gradient(52% 46% at 50% 44%, #000, transparent 76%);
}

.avesta-contact-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(52px);
	opacity: 0.45;
	animation: avesta-contact-drift 18s ease-in-out infinite alternate;
}

.avesta-contact-orb-a {
	inset-block-start: 34%;
	inset-inline-end: 8%;
	inline-size: clamp(18rem, 38vw, 34rem);
	aspect-ratio: 1;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent), transparent 76%);
}

.avesta-contact-orb-b {
	inset-block-end: 4%;
	inset-inline-start: 6%;
	inline-size: clamp(15rem, 32vw, 29rem);
	aspect-ratio: 1;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--wp--preset--color--primary-deep) 48%, transparent), transparent 76%);
	animation-duration: 24s;
	animation-direction: alternate-reverse;
}

@keyframes avesta-contact-drift {
	from { transform: translate(0, 0) scale(1); }
	to { transform: translate(-4%, 4%) scale(1.08); }
}

/* ---- Intro copy ---- */

.avesta-contact-intro {
	text-align: center;
	margin-block-end: clamp(2rem, 4vw, 3rem);
}

.avesta-contact-title {
	margin: 0;
	line-height: 1.24;
	text-wrap: balance;
}

.avesta-contact-lead {
	margin: 0.9rem auto 0;
	max-inline-size: 34rem;
}

/* ---- The console ---- */

.avesta-contact-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(1.5rem, 3.4vw, 2.75rem);
	max-inline-size: 64rem;
	margin-inline: auto;
	border-radius: clamp(1.65rem, 2.6vw, 2.25rem);
}

/* One soft glow anchored behind the card — a single light source, not a
   stack of blurred shapes, so it reads as calm depth rather than noise. */
.avesta-contact-glow {
	position: absolute;
	z-index: -1;
	inset: -20%;
	background: radial-gradient(46% 54% at 82% 8%, color-mix(in srgb, var(--wp--preset--color--primary) 38%, transparent), transparent 72%);
	filter: blur(48px);
	opacity: 0.5;
	animation: avesta-contact-glow-drift 16s ease-in-out infinite;
}

@keyframes avesta-contact-glow-drift {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-2%, 2%) scale(1.05); }
}

/* A single wide glint crossing the glass on a long loop — the "polish" pass
   on the surface, deliberately rare so it never turns into a strobe. */
.avesta-contact-sheen {
	position: absolute;
	z-index: 1;
	inset: 0;
	pointer-events: none;
	opacity: 0.5;
	background: linear-gradient(105deg,
		transparent 38%,
		rgba(255, 255, 255, 0.22) 47%,
		rgba(255, 255, 255, 0.55) 50%,
		rgba(255, 255, 255, 0.22) 53%,
		transparent 62%);
	translate: -130% 0;
	animation: avesta-contact-sweep 11s ease-in-out infinite;
}

@keyframes avesta-contact-sweep {
	0%, 62% { translate: -130% 0; }
	86%, 100% { translate: 130% 0; }
}

/* Cursor-tracked specular pool, same language as the liquid-glass buttons:
   --mx/--my are written by interactions.js on fine pointers only. */
.avesta-contact-cursor {
	position: absolute;
	z-index: -1;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	background: radial-gradient(18rem 18rem at var(--mx, 50%) var(--my, 0%),
		color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent),
		transparent 70%);
	transition: opacity 380ms ease;
}

.avesta-contact-card:hover .avesta-contact-cursor {
	opacity: 1;
}

.avesta-contact-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: clamp(1.5rem, 3.5vw, 2.75rem);
	align-items: stretch;
}

/* The form column sets the card's height; the copy column spreads its blocks
   across that height instead of clustering in the middle and leaving the
   card looking half-empty. */
.avesta-contact-copy {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	gap: 1rem;
}

/* ---- Channel rows ---- */

.avesta-contact-channels {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.avesta-channel {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.8rem 0.9rem;
	border-radius: var(--avesta-radius-sm);
	background: var(--avesta-glass-bg);
	-webkit-backdrop-filter: blur(calc(var(--avesta-blur) / 2)) saturate(180%);
	backdrop-filter: blur(calc(var(--avesta-blur) / 2)) saturate(180%);
	border: 1px solid var(--avesta-glass-border);
	box-shadow: 0 0 0 1px var(--avesta-glass-ring), inset 0 1px 0 var(--avesta-glass-top);
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: translate 260ms var(--avesta-ease), box-shadow 260ms var(--avesta-ease), border-color 260ms var(--avesta-ease);
}

/* Hover glint sweeps the row itself, so the pointer feels like it is
   catching light on the glass rather than toggling a flat state. */
.avesta-channel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
	translate: -120% 0;
	pointer-events: none;
	transition: translate 700ms var(--avesta-ease);
}

.avesta-channel:hover,
.avesta-channel:focus-visible {
	translate: 0 -3px;
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 45%, var(--avesta-glass-border));
	box-shadow:
		0 0 0 1px var(--avesta-glass-ring),
		0 14px 30px -14px color-mix(in srgb, var(--wp--preset--color--primary) 65%, transparent),
		inset 0 1px 0 var(--avesta-glass-top);
}

.avesta-channel:hover::before,
.avesta-channel:focus-visible::before {
	translate: 120% 0;
}

.avesta-channel-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 2.6rem;
	block-size: 2.6rem;
	/* Squircle, the macOS app-icon silhouette the dock already uses. */
	border-radius: 32%;
	background: linear-gradient(150deg,
		color-mix(in srgb, var(--wp--preset--color--primary) 92%, white),
		var(--wp--preset--color--primary));
	color: #fff;
	box-shadow:
		0 8px 18px -10px color-mix(in srgb, var(--wp--preset--color--primary) 80%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.45);
	transition: rotate 320ms var(--avesta-bounce), scale 320ms var(--avesta-bounce);
}

.avesta-channel-icon svg {
	inline-size: 1.35rem;
	block-size: 1.35rem;
}

.avesta-channel:hover .avesta-channel-icon {
	rotate: -6deg;
	scale: 1.06;
}

.avesta-channel-text {
	display: grid;
	gap: 0.15rem;
	min-inline-size: 0;
}

.avesta-channel-text small {
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted);
}

.avesta-channel-text strong {
	font-size: 0.95rem;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.avesta-channel-go {
	margin-inline-start: auto;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	color: var(--wp--preset--color--primary);
	opacity: 0.55;
	transition: opacity 220ms ease, translate 260ms var(--avesta-ease);
}

.avesta-channel-go svg {
	inline-size: 1.1rem;
	block-size: 1.1rem;
}

.avesta-channel:hover .avesta-channel-go {
	opacity: 1;
	/* Inline-start is leftward in this RTL document — the arrow leans the
	   way the chevron points. */
	translate: -4px 0;
}

/* ---- "What happens next": the promise attached to the submit button, so
   the form isn't a black box the visitor drops a message into. ---- */

.avesta-contact-next {
	padding: 0.95rem 1rem;
	border-radius: var(--avesta-radius-sm);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 7%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
}

.avesta-contact-next-tag {
	display: block;
	margin-block-end: 0.7rem;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--primary);
}

.avesta-contact-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
	counter-reset: none;
}

.avesta-contact-steps li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}

/* Numbered chips, not bullets — they carry the sequence at a glance and
   echo the dock's rounded-square icon language at a small size. */
.avesta-contact-steps li span {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 1.45rem;
	block-size: 1.45rem;
	border-radius: 34%;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
	color: var(--wp--preset--color--primary-deep);
	font-size: 0.75rem;
	font-weight: 800;
}

/* ---- Reassurance chips ---- */

.avesta-contact-chips {
	list-style: none;
	margin: 0.15rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.avesta-contact-chips li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	border: 1px solid var(--avesta-hairline);
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
}

.avesta-contact-chips svg {
	inline-size: 0.9rem;
	block-size: 0.9rem;
	color: var(--wp--preset--color--primary);
	flex: 0 0 auto;
}

/* ---------- Contact form (Contact Form 7), skinned as its own quiet glass
   panel inside the card — labeled fields with icon cues and a brand-blue
   border, not a generic gray box. ---------- */

.avesta-contact-form-wrap {
	position: relative;
	padding: clamp(1.15rem, 2.2vw, 1.6rem);
	border-radius: clamp(1.1rem, 2vw, 1.6rem);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, var(--avesta-glass-bg-strong));
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 22%, var(--avesta-glass-border));
	/* Reads as a panel recessed into the console rather than a box sitting on
	   top of it: a lit top edge plus its own soft drop. */
	box-shadow:
		inset 0 1px 0 var(--avesta-glass-top),
		0 18px 40px -26px color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent);
}

.avesta-contact-form-wrap p {
	margin: 0;
}

.avesta-contact-form-wrap label {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

/* CF7 hard-codes a <br> between the label and field; kill it so spacing
   comes only from the label's own margin, not an extra forced line. */
.avesta-contact-form-wrap label + br {
	display: none;
}

.avesta-contact-form-wrap .wpcf7-form-control-wrap {
	display: block;
	position: relative;
}

.avesta-contact-form-wrap .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.avesta-cf7-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.avesta-cf7-row {
	display: flex;
	flex-direction: column;
}

/* Field-type icon, drawn with a mask so it always matches the primary
   color — one SVG per data-name instead of extra markup per field. */
.avesta-contact-form-wrap .wpcf7-form-control-wrap::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset-inline-end: 0.85rem;
	inset-block-start: 50%;
	translate: 0 -50%;
	inline-size: 1.2rem;
	block-size: 1.2rem;
	background: var(--wp--preset--color--primary);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
	opacity: 1;
}

.avesta-contact-form-wrap [data-name="your-name"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E");
}

.avesta-contact-form-wrap [data-name="your-phone"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5c0 8.284 6.716 15 15 15l2-4-5-2-2 2c-2.5-1-4-2.5-5-5l2-2-2-5-4 1Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5c0 8.284 6.716 15 15 15l2-4-5-2-2 2c-2.5-1-4-2.5-5-5l2-2-2-5-4 1Z'/%3E%3C/svg%3E");
}

.avesta-contact-form-wrap [data-name="your-email"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
}

.avesta-contact-form-wrap [data-name="your-message"]::before {
	inset-block-start: 1.1rem;
	translate: 0 0;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

.avesta-contact-form-wrap .wpcf7-form-control {
	box-sizing: border-box;
	inline-size: 100%;
	/* Symmetric and logical. Text is centered (not RTL-start), so an
	   asymmetric gutter puts the content box off-center: centered text then
	   sits flush against whichever side has the smaller padding — the icon
	   clearance side — with no breathing room. Equal padding on both sides
	   (sized to clear the icon: 1.05rem icon + 0.85rem inset ≈ 1.9rem) keeps
	   the content box, and therefore the centered text, truly centered. */
	padding-block: 0.7rem;
	padding-inline: 2.2rem;
	border-radius: var(--avesta-radius-sm);
	/* Resting state reads as "ready", not washed out — the glass-bg-strong
	   default was swapped with the old :focus look. Same border-less glass
	   ring recipe as the rest of the site's glass panels, not a heavy
	   solid-color outline. */
	background: var(--avesta-glass-bg);
	-webkit-backdrop-filter: blur(calc(var(--avesta-blur) / 2)) saturate(180%);
	backdrop-filter: blur(calc(var(--avesta-blur) / 2)) saturate(180%);
	border: 1px solid var(--avesta-glass-border);
	box-shadow: 0 0 0 1px var(--avesta-glass-ring), inset 0 1px 0 var(--avesta-glass-top);
	color: inherit;
	font-family: inherit;
	font-size: 0.9rem;
	transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease, translate 200ms ease;
}

/* Persian fields (name, message) read and get typed right-to-left; phone
   and email are Latin/digit content, so both their placeholder and the
   typing caret should start from the left instead. */
.avesta-contact-form-wrap [data-name="your-name"] .wpcf7-form-control,
.avesta-contact-form-wrap [data-name="your-message"] .wpcf7-form-control {
	text-align: right;
	/* Right-aligned Persian text — tighten the right-side (inline-start)
	   gutter so typed text sits close to the edge; the left side keeps the
	   full 2.2rem for the icon. */
	padding-inline-start: 1rem;
}

.avesta-contact-form-wrap [data-name="your-phone"] .wpcf7-form-control,
.avesta-contact-form-wrap [data-name="your-email"] .wpcf7-form-control {
	text-align: left;
}

.avesta-contact-form-wrap textarea.wpcf7-form-control {
	block-size: 7.5rem;
	resize: vertical;
}

.avesta-contact-form-wrap .wpcf7-form-control::placeholder {
	color: var(--wp--preset--color--muted);
}

/* Hover: its own cue, distinct from both the resting state above and the
   focus ring below — a lift plus a soft glow, no border-color fight.
   :not(.wpcf7-submit) — the submit button also carries the generic
   wpcf7-form-control class, and this pseudo-class selector would otherwise
   outrank .wpcf7-submit's own (non-pseudo-class) background rule by
   specificity, flashing it white on hover/focus instead of its brand style. */
.avesta-contact-form-wrap .wpcf7-form-control:not(.wpcf7-submit):hover {
	background: var(--avesta-glass-bg-strong);
	translate: 0 -1px;
	box-shadow:
		0 8px 18px -10px color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent),
		inset 0 1px 0 var(--avesta-glass-top);
}

.avesta-contact-form-wrap .wpcf7-form-control:not(.wpcf7-submit):focus {
	outline: none;
	background: var(--avesta-glass-bg);
	border-color: var(--wp--preset--color--primary);
	translate: 0 0;
	box-shadow:
		0 0 0 4px color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent),
		inset 0 1px 0 var(--avesta-glass-top);
}

.avesta-contact-form-wrap .wpcf7-form-control.wpcf7-not-valid {
	border-color: #e0546a;
}

.avesta-contact-form-wrap .wpcf7-not-valid-tip {
	margin-top: 0.3rem;
	font-size: 0.8rem;
	color: #e0546a;
}

.avesta-contact-form-wrap .wpcf7-response-output {
	margin: 0.6rem 0 0;
	padding: 0.6rem 0.9rem;
	border-radius: var(--avesta-radius-sm);
	font-size: 0.8rem;
}

.avesta-contact-form-wrap .wpcf7-submit {
	inline-size: 100%;
	margin-top: 0.15rem;
	padding: 0.8rem 1.75rem;
	border: none;
	border-radius: var(--avesta-radius-sm);
	/* An <input> can't carry ::before/::after, so the hover glint is a second
	   background layer that slides across via background-position instead of
	   a pseudo-element. */
	background-image:
		linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%),
		linear-gradient(135deg,
			color-mix(in srgb, var(--wp--preset--color--primary) 92%, white),
			var(--wp--preset--color--primary));
	background-size: 250% 100%, 100% 100%;
	background-position: 210% 0, 0 0;
	background-repeat: no-repeat;
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	box-shadow:
		0 12px 28px -12px color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
	transition: translate 250ms var(--avesta-ease), box-shadow 250ms ease, background-position 750ms var(--avesta-ease);
}

.avesta-contact-form-wrap .wpcf7-submit:hover,
.avesta-contact-form-wrap .wpcf7-submit:focus-visible {
	translate: 0 -3px;
	background-position: -110% 0, 0 0;
	box-shadow:
		0 16px 34px -12px color-mix(in srgb, var(--wp--preset--color--primary) 80%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

@media (max-width: 30rem) {
	.avesta-cf7-split {
		grid-template-columns: 1fr;
	}
}

.avesta-contact-form-wrap .wpcf7-spinner {
	margin-inline-start: 0.6rem;
}

@media (max-width: 55rem) {
	.avesta-contact-grid {
		grid-template-columns: 1fr;
		align-items: stretch;
	}

	.avesta-contact-shapes {
		inset: -2% -8%;
	}

	/* Stacked, the copy blocks read as one list — spreading them to the
	   column's full height would just open holes between them. */
	.avesta-contact-copy {
		justify-content: flex-start;
	}
}

/* Under prefers-reduced-motion every decorative loop in this section stops:
   the orbs, glow and sheen. Each element keeps its resting look, so nothing
   disappears. */
@media (prefers-reduced-motion: reduce) {
	.avesta-contact-orb,
	.avesta-contact-glow,
	.avesta-contact-sheen {
		animation: none;
	}

	.avesta-contact-sheen {
		opacity: 0;
	}

	.avesta-channel::before {
		display: none;
	}

	.avesta-channel:hover,
	.avesta-channel:focus-visible {
		translate: none;
	}

	.avesta-channel:hover .avesta-channel-icon {
		rotate: none;
		scale: none;
	}

	.avesta-contact-form-wrap .wpcf7-submit:hover,
	.avesta-contact-form-wrap .wpcf7-submit:focus-visible {
		translate: none;
	}
}