/* ThriveWays Consultant — design system
   Minimal / dark / premium / enterprise. Deep navy + muted violet.
   The page layout/content is real Elementor widgets (Pages → Consultant →
   Edit with Elementor) — these rules target Elementor's own rendered
   markup via the css_classes/_css_classes applied to each section, column
   and widget, rather than any bespoke template markup. */

.tw-consultant-page {
	--tw-bg: #08080f;
	--tw-bg-soft: #0d0d1a;
	--tw-surface: #14141f;
	--tw-surface-raised: #181826;
	--tw-border: rgba(154, 139, 255, 0.22);
	--tw-border-strong: rgba(154, 139, 255, 0.4);
	--tw-text: #f4f4f8;
	/* Brightness targets (relative to white), tuned for readability:
	   secondary ~80% (main body copy, field labels), tertiary ~70%
	   (descriptions/helper text), quiet ~58% (privacy note), muted ~45%
	   (placeholders only). Previous secondary/muted values sat too low
	   across the board, making body copy hard to read. */
	--tw-text-secondary: #d6d4ee;
	--tw-text-tertiary: #b8b6d2;
	--tw-text-quiet: #9c9ab8;
	--tw-text-muted: #74748f;
	--tw-violet: #7C6BFF;
	--tw-violet-soft: #9A8BFF;
	--tw-violet-alt: #7A63D8;
	--tw-violet-deep: #4A3F8F;
	--tw-pink: #E85DA8;
	--tw-pink-soft: #F2A0CB;
	/* Homepage's actual accent blend (sampled from its hero gradient text
	   and CTA button) — used for the label text and, as a text gradient,
	   the headline highlight, so those two elements genuinely carry the
	   homepage's violet→magenta→pink signature instead of flat violet. */
	--tw-accent-blend: #C34EE5;
	--tw-accent-gradient: linear-gradient(100deg, #CBB3F4 5%, #C34EE5 52%, #F15A9E 95%);
	--tw-radius-lg: 20px;
	--tw-radius-md: 14px;
	--tw-radius-sm: 10px;

	background: var(--tw-bg);
	color: var(--tw-text);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	position: relative;
	-webkit-font-smoothing: antialiased;
}
body:has(.tw-consultant-hero) {
	background: #08080f;
}
.tw-consultant-page * {
	box-sizing: border-box;
}
/* !important below is necessary: Elementor's own generated global.css sets
   ".elementor-section-boxed > .elementor-container { max-width: ... }" at
   equal specificity to this rule, and it loads after our plugin stylesheet
   — so without !important Elementor's own container width wins the
   cascade on load order alone (the same root cause pattern as the CTA
   button color bug below). */
.tw-consultant-page .elementor-container {
	max-width: 1240px !important;
	padding-left: 32px;
	padding-right: 32px;
}

/* ---------- Header ---------- */
/* border/box-shadow:none is a defensive, explicit override — inspection
   found no rule anywhere (ours, Elementor's, or the theme's) currently
   drawing a line here, but this guarantees none can appear regardless
   of load order. */
.tw-consultant-header {
	padding: 36px 0 8px;
	border: none;
	box-shadow: none;
}
.tw-consultant-logo img {
	max-height: 52px;
	width: auto;
}
.tw-consultant-logo a {
	display: inline-block;
	line-height: 0;
}

/* ---------- Hero ---------- */
.tw-consultant-hero {
	position: relative;
	padding: 40px 0 20px;
	overflow: hidden;
}
/* !important on the position:static declarations below is necessary:
   Elementor's own generated CSS ships ".elementor-section .elementor-container
   { position: relative }" and ".elementor-column { position: relative }"
   at equal specificity to these rules, loading after our stylesheet —
   without !important those win the cascade on load order alone (same
   pattern as every other Elementor-conflict fix in this file). The
   planet's containing block and clip boundary need to be the full
   .tw-consultant-hero SECTION (tall enough to reach genuinely below
   the text, and — on mobile — full viewport width, unconstrained by
   this column's own padding) rather than this short, padded column or
   the row between them. Text elements inside still stack correctly
   above the planet because each sets its own z-index (below), compared
   within the section's stacking context. */
.tw-consultant-hero > .elementor-container {
	position: static !important;
	align-items: flex-start;
}
.tw-consultant-hero-content {
	position: static !important;
	padding-right: 56px;
}
/* One more Elementor-default layer sits between the column and each
   widget: ".elementor-widget-wrap" (shared by every widget in this
   column), also position:relative by default. Scoped to this specific
   column's wrap only, so it doesn't affect widget-wraps elsewhere on
   the page. */
.tw-consultant-hero-content > .elementor-widget-wrap {
	position: static !important;
}

.tw-consultant-label {
	position: relative;
	z-index: 2;
}
/* !important on the color declarations below is necessary: Elementor's own
   generated global.css ships ".elementor-widget-heading .elementor-heading-title
   { color: var(--e-global-color-primary) }" at equal selector specificity,
   loading after our plugin stylesheet — without !important every heading
   and icon-box title on this page renders in Elementor's default global
   purple instead of our intended colors (same load-order cascade bug as
   the CTA button and container width above). */
.tw-consultant-label .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--tw-accent-blend) !important;
	text-transform: uppercase;
	margin: 0 0 18px;
}
.tw-consultant-label .elementor-heading-title::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tw-pink);
	box-shadow: 0 0 0 4px rgba(232, 93, 168, 0.18);
}

.tw-consultant-heading {
	position: relative;
	z-index: 2;
}
.tw-consultant-heading .elementor-heading-title {
	font-size: 50px;
	line-height: 1.16;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--tw-text) !important;
	margin: 0 0 22px;
	max-width: 440px;
}
.tw-consultant-highlight {
	/* Solid fallback in case background-clip:text isn't supported —
	   @supports below upgrades it to the homepage's actual gradient-text
	   treatment (violet → magenta → pink) wherever it is. */
	color: var(--tw-pink-soft);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.tw-consultant-highlight {
		background: var(--tw-accent-gradient);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.tw-consultant-subcopy {
	position: relative;
	z-index: 2;
	max-width: 460px;
}
/* Elementor's rendered markup for this version has no ".elementor-text-editor"
   wrapper class inside .elementor-widget-container — targeting it matched
   nothing, so this paragraph silently fell back to Elementor's own default
   text styling. Target the <p> directly instead. */
.tw-consultant-subcopy p {
	color: var(--tw-text-secondary) !important;
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 14px;
}
.tw-consultant-subcopy p:last-child {
	margin-bottom: 0;
}

/* ---------- Decorative planet (non-editable visual) ----------
   A large globe genuinely anchored to the BOTTOM of the tall hero
   SECTION (not the short text column) — most of its mass sits below
   the intro copy, with only its upper horizon rising into view.
   Positioned/clipped via .tw-consultant-hero (position:relative +
   overflow:hidden), which spans the section's full height/width, so it
   can extend well below the text without affecting hero-content's own
   box, and can never push layout or reach the form column. Pure CSS
   gradients/shadows only, no canvas/WebGL/images. */
.tw-consultant-planet-wrap {
	position: static !important;
	height: 0;
}
.tw-planet-wrap {
	position: absolute;
	left: -260px;
	bottom: -560px;
	width: 1000px;
	height: 1000px;
	z-index: 0;
	opacity: 0.95;
	pointer-events: none;
	animation: tw-planet-breathe 6.5s ease-in-out infinite;
}
.tw-planet {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	/* The visible slice is now this box's own top ~44% (the rest sits
	   below the section's bottom edge, clipped away) — rim light and
	   highlight sit high (14-20%) so they fall inside that visible band
	   instead of the box's now-hidden lower half. The tight radial stop
	   (54%→57%) is what reads as a thin rim-light arc rather than a
	   diffuse glow. The outer edge of the rim blends toward a muted
	   magenta (homepage-inspired accent) instead of pure violet, for a
	   more dimensional, less flatly-purple glow. */
	background:
		radial-gradient(circle at 60% 14%, transparent 52%, rgba(233, 173, 217, 0.55) 54%, rgba(224, 150, 200, 0.5) 57%, transparent 60%),
		radial-gradient(circle at 58% 16%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 5%),
		radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 18%),
		radial-gradient(circle at 68% 34%, rgba(224, 150, 200, 0.09) 0%, rgba(224, 150, 200, 0) 16%),
		radial-gradient(circle at 62% 20%, #3a3268 0%, #241f45 22%, #14112a 42%, #0a0916 65%, #050409 100%);
	box-shadow:
		inset -50px -50px 100px rgba(0, 0, 0, 0.8),
		inset 26px 18px 60px rgba(154, 139, 255, 0.1),
		0 0 120px 26px rgba(196, 90, 170, 0.14);
}
.tw-planet-ring {
	position: absolute;
	border: 1px solid rgba(154, 139, 255, 0.32);
	border-radius: 50%;
}
.tw-planet-ring-1 {
	inset: -70px;
	transform-origin: center;
	animation: tw-ring-drift-1 95s linear infinite;
}
.tw-planet-ring-2 {
	inset: -130px;
	border-color: rgba(154, 139, 255, 0.18);
	transform-origin: center;
	animation: tw-breathe 8s ease-in-out infinite, tw-ring-drift-2 130s linear infinite;
}
.tw-planet-node {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #d5cbff;
	box-shadow: 0 0 12px 4px rgba(154, 139, 255, 0.7);
	animation: tw-node-pulse 3.4s ease-in-out infinite;
}
.tw-planet-node-1 {
	top: 14%;
	right: 4%;
	animation-duration: 3.2s;
}
.tw-planet-node-2 {
	top: 38%;
	right: 6%;
	animation-duration: 4s;
	animation-delay: 1.4s;
}
.tw-planet-node-3 {
	top: 27%;
	right: 22%;
	animation-duration: 3.6s;
	animation-delay: 0.6s;
}
.tw-planet-star {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #fff;
	opacity: 0.2;
	animation: tw-twinkle 3.6s ease-in-out infinite;
}
/* Delays/durations are deliberately irregular (not an even arithmetic
   progression) so the stars twinkle out of sync with each other rather
   than reading as one synchronized blink. */
.tw-planet-star-1 { top: 10%; left: 34%; animation-duration: 3.6s; }
.tw-planet-star-2 { top: 20%; left: 64%; background: var(--tw-pink-soft); animation-duration: 4.3s; animation-delay: 1.1s; }
.tw-planet-star-3 { top: 5%; left: 80%; animation-duration: 3.9s; animation-delay: 2.4s; }
.tw-planet-star-4 { top: 26%; left: 16%; background: var(--tw-violet-soft); animation-duration: 4.7s; animation-delay: 0.7s; }
.tw-planet-star-5 { top: 32%; left: 46%; animation-duration: 4.1s; animation-delay: 3.1s; }
.tw-planet-star-6 { top: 15%; left: 8%; background: var(--tw-pink-soft); animation-duration: 3.4s; animation-delay: 1.8s; }
/* Replaces the old one-shot "shooting star" streak with a small glowing
   point that continuously travels along an elliptical orbit path — reads
   as a flowing light tracing a trajectory around the planet, rather than
   a meteor flashing across it. offset-path percentages resolve against
   this element's containing block, which is the 1000px .tw-planet-wrap
   (the same box the node/star percentages already use). Falls back to
   simply not appearing in browsers without motion-path support, rather
   than showing a static misplaced bar.
   Built as a container with two pseudo-elements rather than one flat
   gradient bar: ::after is a distinct bright "head" (glow core, with its
   own box-shadow bloom) and ::before is a short soft tail behind it.
   offset-rotate:auto keeps the container's local right edge pointing in
   the direction of travel, so anchoring the head at right:0 makes it
   always lead and the tail always trail, regardless of where on the
   ellipse the element currently is. */
.tw-planet-orbit-light {
	position: absolute;
	top: 0;
	left: 0;
	width: 46px;
	height: 8px;
	pointer-events: none;
	opacity: 0;
}
.tw-planet-orbit-light::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 7px;
	height: 3px;
	transform: translateY(-50%);
	border-radius: 3px;
	background: linear-gradient(90deg, rgba(233, 173, 217, 0) 0%, rgba(233, 173, 217, 0.55) 100%);
}
.tw-planet-orbit-light::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 9px;
	height: 9px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(233, 173, 217, 0.92) 45%, rgba(233, 173, 217, 0) 75%);
	box-shadow: 0 0 14px 3px rgba(233, 173, 217, 0.6), 0 0 5px 1px rgba(255, 255, 255, 0.75);
}
@supports (offset-path: ellipse(1px 1px at 0 0)) {
	.tw-planet-orbit-light {
		opacity: 1;
		offset-path: ellipse(460px 165px at 52% 24%);
		offset-rotate: auto;
		animation: tw-orbit-travel 16s linear infinite;
	}
}
@keyframes tw-breathe {
	0%, 100% { opacity: 0.55; }
	50% { opacity: 1; }
}
@keyframes tw-planet-breathe {
	0%, 100% { filter: brightness(1); }
	50% { filter: brightness(1.07); }
}
@keyframes tw-node-pulse {
	0%, 100% { opacity: 0.55; transform: scale(0.85); }
	50% { opacity: 1; transform: scale(1.15); }
}
@keyframes tw-twinkle {
	0%, 100% { opacity: 0.15; transform: scale(0.8); }
	50% { opacity: 0.85; transform: scale(1.3); }
}
/* Extremely slow full rotations (95s/130s) — not perceptible as spinning,
   just a faint ambient drift to the orbit rings. Each keyframe preserves
   the ring's original static tilt/scale (-12deg/8deg, scaleY 0.32/0.28)
   as its starting angle, so nothing jumps when the animation begins. */
@keyframes tw-ring-drift-1 {
	from { transform: rotate(-12deg) scaleY(0.32); }
	to { transform: rotate(348deg) scaleY(0.32); }
}
@keyframes tw-ring-drift-2 {
	from { transform: rotate(8deg) scaleY(0.28); }
	to { transform: rotate(368deg) scaleY(0.28); }
}
@keyframes tw-orbit-travel {
	from { offset-distance: 0%; }
	to { offset-distance: 100%; }
}

/* ---------- Form shell / card ---------- */
.tw-consultant-form-shell {
	position: relative;
	z-index: 2;
}
.tw-consultant-form-card {
	background: var(--tw-surface-raised);
	border: 1px solid var(--tw-border-strong);
	border-radius: var(--tw-radius-lg);
	padding: 28px 32px 26px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 24px 60px -20px rgba(0, 0, 0, 0.65),
		0 0 0 1px rgba(124, 107, 255, 0.05),
		0 0 48px -10px rgba(124, 107, 255, 0.22);
}
.tw-consultant-form-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--tw-text);
}

.tw-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 12px;
}
.tw-field-row .tw-field {
	margin-bottom: 0;
}
.tw-field {
	margin-bottom: 12px;
}
.tw-field label,
.tw-field-legend {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--tw-text-secondary);
	margin-bottom: 5px;
}
/* Visually hidden only — the underlying <input required> attributes
   still drive real HTML5/JS/PHP validation regardless of whether this
   asterisk is shown, so hiding it is purely cosmetic. */
.tw-req {
	display: none;
}
.tw-field input[type="text"],
.tw-field input[type="email"],
.tw-field input[type="tel"],
.tw-field textarea {
	width: 100%;
	background: var(--tw-bg-soft);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--tw-radius-sm);
	padding: 10px 14px;
	color: var(--tw-text);
	font-size: 14px;
	font-family: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tw-field textarea {
	min-height: 62px;
	resize: vertical;
	padding-right: 10px;
	scrollbar-width: thin;
	scrollbar-color: rgba(154, 139, 255, 0.3) transparent;
}
.tw-field textarea::-webkit-scrollbar {
	width: 5px;
}
.tw-field textarea::-webkit-scrollbar-track {
	background: transparent;
	margin: 4px 0;
}
.tw-field textarea::-webkit-scrollbar-thumb {
	background: rgba(154, 139, 255, 0.28);
	border-radius: 8px;
}
.tw-field textarea::-webkit-scrollbar-thumb:hover {
	background: rgba(154, 139, 255, 0.45);
}
.tw-field input::placeholder,
.tw-field textarea::placeholder {
	color: var(--tw-text-muted);
}
.tw-field input:focus,
.tw-field textarea:focus {
	outline: none;
	border-color: var(--tw-violet);
	box-shadow: 0 0 0 3px rgba(124, 107, 255, 0.18);
}
.tw-char-count {
	display: block;
	text-align: right;
	font-size: 11px;
	color: var(--tw-text-muted);
	margin-top: 4px;
}
.tw-field-error {
	display: none;
	color: #ef8a9c;
	font-size: 12px;
	margin: 6px 0 0;
}
.tw-field.tw-invalid input,
.tw-field.tw-invalid textarea {
	border-color: #ef8a9c;
}
.tw-field.tw-invalid .tw-field-error,
.tw-field-error.tw-visible {
	display: block;
}

.tw-option-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.tw-option-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--tw-bg-soft);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--tw-radius-sm);
	padding: 10px 12px;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.tw-option-card input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.tw-option-card .tw-option-icon {
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--tw-text-secondary);
}
.tw-option-card .tw-option-icon svg {
	width: 20px;
	height: 20px;
}
.tw-option-title {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tw-text);
}
.tw-option-sub {
	display: block;
	font-size: 11.5px;
	color: var(--tw-text-tertiary);
	line-height: 1.4;
	margin-top: 2px;
}
.tw-option-map-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 6px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--tw-violet-soft);
	text-decoration: none;
}
.tw-option-map-link:hover {
	color: var(--tw-text);
}
.tw-option-map-link svg {
	width: 12px;
	height: 12px;
	flex: none;
}
.tw-option-card:has(input:checked) {
	border-color: var(--tw-violet);
	background: rgba(124, 107, 255, 0.08);
}
.tw-option-card:has(input:checked) .tw-option-icon {
	color: var(--tw-violet-soft);
}
.tw-option-card:has(input:focus-visible) {
	box-shadow: 0 0 0 3px rgba(124, 107, 255, 0.25);
}

.tw-chip-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.tw-chip {
	position: relative;
	cursor: pointer;
}
.tw-chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.tw-chip span {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: var(--tw-bg-soft);
	color: var(--tw-text-secondary);
	font-size: 13px;
	font-weight: 500;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.tw-chip:has(input:checked) span {
	border-color: var(--tw-violet);
	background: rgba(124, 107, 255, 0.14);
	color: var(--tw-text);
}
.tw-chip:has(input:focus-visible) span {
	box-shadow: 0 0 0 3px rgba(124, 107, 255, 0.25);
}

.tw-submit-btn {
	/* !important on width/display below is deliberate and necessary: the
	   active theme (Hello Elementor) ships a global
	   `[type="submit"], button { width: auto; display: inline-block; }`
	   rule at equal CSS specificity to this single class selector, loading
	   after our plugin stylesheet — without !important the theme collapses
	   the CTA to its content width instead of filling the card, the same
	   load-order cascade bug as the color/border hardening below. */
	width: 100% !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 6px;
	padding: 14px 20px;
	/* !important below is deliberate and necessary: the active theme
	   (Hello Elementor) ships a global `button, [type="submit"]` rule with
	   a pink accent color at equal CSS specificity to a single class
	   selector, and its stylesheet loads after ours — so without
	   !important the theme wins the cascade on load order alone. This is
	   the actual root cause of every "CTA still looks pink" report. */
	border: none !important;
	border-radius: var(--tw-radius-sm);
	/* Matches the homepage's own CTA gradient (sampled directly from its
	   "Explore our capabilities" button) — violet into magenta into a
	   warm pink, rather than our previous more muted violet-only blend. */
	background: linear-gradient(110deg, #9F45DD 0%, #CE378F 58%, #F0447B 100%) !important;
	color: #fff !important;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
	box-shadow: 0 12px 26px -12px rgba(150, 55, 130, 0.55);
}
.tw-submit-btn:hover {
	background: linear-gradient(110deg, #9F45DD 0%, #CE378F 58%, #F0447B 100%) !important;
	color: #fff !important;
	filter: brightness(1.04);
	box-shadow: 0 16px 32px -12px rgba(150, 55, 130, 0.65);
}
.tw-submit-btn:active {
	transform: translateY(1px);
}
.tw-submit-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(124, 107, 255, 0.35);
}
.tw-submit-btn:disabled {
	opacity: 0.7;
	cursor: progress;
}
.tw-submit-arrow {
	width: 16px;
	height: 16px;
	transition: transform 0.18s ease;
}
.tw-submit-btn:hover .tw-submit-arrow {
	transform: translateX(3px);
}

.tw-privacy-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 10px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--tw-text-quiet);
}
.tw-privacy-note svg {
	width: 14px;
	height: 14px;
	flex: none;
	margin-top: 1px;
}

.tw-form-status {
	margin-top: 14px;
	font-size: 13px;
	padding: 10px 12px;
	border-radius: var(--tw-radius-sm);
}
.tw-form-status.tw-status-error {
	color: #ef8a9c;
	background: rgba(239, 138, 156, 0.1);
	border: 1px solid rgba(239, 138, 156, 0.3);
}

.tw-form-success {
	text-align: center;
	padding: 30px 10px;
}
.tw-success-icon {
	display: inline-flex;
	width: 52px;
	height: 52px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(124, 107, 255, 0.14);
	color: var(--tw-violet-soft);
	margin-bottom: 16px;
}
.tw-success-icon svg {
	width: 26px;
	height: 26px;
}
.tw-form-success h3 {
	font-size: 18px;
	margin: 0 0 8px;
	color: var(--tw-text);
}
.tw-form-success p {
	font-size: 13.5px;
	color: var(--tw-text-secondary);
	line-height: 1.6;
	margin: 0;
}

/* ---------- Entrance motion ---------- */
.tw-consultant-page [data-twc-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.tw-consultant-page [data-twc-reveal].tw-in-view {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.tw-consultant-page [data-twc-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.tw-planet-wrap,
	.tw-planet-ring-1,
	.tw-planet-ring-2,
	.tw-planet-node,
	.tw-planet-star,
	.tw-planet-orbit-light {
		animation: none !important;
	}
	/* The rings' static tilt/scale normally comes from the drift
	   animation's "from" keyframe — with the animation disabled here,
	   restore that starting transform directly so the ring shape doesn't
	   snap back to an unrotated circle. */
	.tw-planet-ring-1 {
		transform: rotate(-12deg) scaleY(0.32) !important;
	}
	.tw-planet-ring-2 {
		transform: rotate(8deg) scaleY(0.28) !important;
	}
	.tw-planet-star {
		opacity: 0.35 !important;
	}
	.tw-planet-orbit-light {
		display: none !important;
	}
}

/* ---------- Large desktop / ultra-wide (4K etc.) ----------
   .tw-planet-wrap's "left" is calculated from .tw-consultant-hero — the
   full-bleed SECTION, not the centered 1240px content container (it has
   to be section-relative so it can extend past the column's own padding
   and be cropped by the section's edges — see the big comment above).
   That's invisible up to ~1440px, where the section is barely wider than
   the capped container, but beyond it the container stays centered with
   growing empty margins on both sides while the planet — still anchored
   to the section's actual left edge — stays pinned to the far-left
   viewport edge instead of following the content. On a 4K/ultra-wide
   screen this reads as a fully-exposed circle floating alone in empty
   space, disconnected from the hero text, rather than a decorative
   element cropped near it.
   Fixed by tracking the container's centering gap once it appears: at
   exactly 1440px this evaluates to the same -260px as the unqualified
   base rule (zero change to the already-verified 1440px look), and for
   each px wider than that, it shifts right by half — mirroring how much
   further the centered container has drifted from the section's edge. */
@media (min-width: 1441px) {
	.tw-planet-wrap {
		left: calc(-260px + (100% - 1440px) / 2);
	}
}

/* ---------- Tablet (intermediate layout, not a naive shrink) ---------- */
@media (max-width: 1024px) {
	.tw-consultant-page .elementor-container {
		padding: 0 28px;
	}
	.tw-consultant-hero {
		padding: 32px 0 36px;
	}
	.tw-consultant-hero-content {
		padding-right: 0;
	}
	.tw-consultant-heading .elementor-heading-title {
		font-size: 36px;
		max-width: 480px;
	}
	/* Recalibrated after the value points were removed: the gap between
	   the subcopy and the section's bottom edge shrank a lot, so the old
	   smaller box (560px, bottom:-320px) now sits mostly below the fold
	   with a large dead gap above it. A bigger box positioned to start
	   right after the subcopy — while still extending well past the
	   section's bottom edge to get genuinely cropped, not fully exposed
	   — closes that gap while keeping the "mostly hidden globe" look. */
	.tw-planet-wrap {
		width: 1150px;
		height: 1150px;
		left: -310px;
		bottom: -575px;
	}
	.tw-planet-node-3,
	.tw-planet-star-5,
	.tw-planet-star-6 {
		display: none;
	}
	/* Scaled up from the desktop ellipse (460px/165px on a 1000px box) to
	   match this breakpoint's larger 1150px box, at the same proportions —
	   this effect stays visible (not hidden) on tablet, just resized. */
	@supports (offset-path: ellipse(1px 1px at 0 0)) {
		.tw-planet-orbit-light {
			offset-path: ellipse(529px 190px at 52% 24%);
			width: 53px;
			height: 9px;
		}
		.tw-planet-orbit-light::before {
			right: 8px;
		}
		.tw-planet-orbit-light::after {
			width: 10px;
			height: 10px;
		}
	}
	.tw-consultant-form-card {
		padding: 26px 26px 24px;
	}
	.tw-field {
		margin-bottom: 12px;
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.tw-consultant-page .elementor-container {
		padding: 0 20px;
	}
	.tw-consultant-header {
		padding: 20px 0 0;
	}
	.tw-consultant-logo img {
		max-height: 38px;
	}
	.tw-consultant-hero {
		padding: 16px 0 24px;
	}
	/* Mobile stacks hero-content and the form into ONE tall column, so
	   the section's bottom edge sits far past the form, not just past
	   the hero text — anchoring from the bottom (as desktop/tablet do)
	   would need a huge, fragile offset. Anchoring from the section's
	   TOP instead is stable regardless of how tall the form is: it
	   starts right where the subcopy ends and extends down into where
	   the form begins — z-index keeps the opaque form card painting
	   over that overlap, so nothing shows through. left is relative to
	   the full-width section (not this column's padded box), so a small
	   negative value genuinely reaches past the viewport's left edge
	   (full-bleed) instead of stopping at the column's own padding. */
	.tw-planet-wrap {
		width: 480px;
		height: 480px;
		left: -140px;
		bottom: auto;
		top: 180px;
		opacity: 0.9;
		animation-duration: 13s;
	}
	/* The base .tw-planet box-shadow's large outer bloom (0 0 160px 50px)
	   is sized for the desktop planet's much bigger scale — on a 390px
	   viewport that same radius floods almost the entire hero with a flat
	   violet tint ("purple wash") instead of reading as a cropped planet
	   edge. Mobile needs a tighter, crisper glow so the rim-light arc
	   stays a defined edge rather than a diffuse haze. */
	.tw-planet {
		box-shadow:
			inset -24px -24px 50px rgba(0, 0, 0, 0.85),
			inset 14px 10px 32px rgba(154, 139, 255, 0.08),
			0 0 50px 8px rgba(124, 107, 255, 0.1);
	}
	.tw-planet-ring-1,
	.tw-planet-ring-2 {
		display: none;
	}
	/* Still present on mobile (not hidden) — scaled down to match the
	   480px box (0.48x the desktop 1000px reference, same proportions),
	   dimmer and slower for a lighter, more performance-friendly feel.
	   The opacity override must stay inside @supports too — outside it,
	   the base rule's opacity:0 is what keeps this invisible (rather
	   than showing a static misplaced bar) in browsers with no
	   offset-path support. */
	@supports (offset-path: ellipse(1px 1px at 0 0)) {
		.tw-planet-orbit-light {
			opacity: 0.7;
			offset-path: ellipse(221px 79px at 52% 24%);
			animation-duration: 20s;
			width: 24px;
			height: 5px;
		}
		.tw-planet-orbit-light::before {
			right: 4px;
			height: 2px;
		}
		.tw-planet-orbit-light::after {
			width: 5px;
			height: 5px;
			box-shadow: 0 0 8px 2px rgba(233, 173, 217, 0.5), 0 0 3px 1px rgba(255, 255, 255, 0.65);
		}
	}
	/* Restrained on mobile: only 1 subtle pulsing node (not 2-3) and only
	   2 twinkling stars (not 6), slowed down — a lighter version of the
	   desktop animation set, not a full copy of it. */
	.tw-planet-node-2,
	.tw-planet-node-3 {
		display: none;
	}
	.tw-planet-node {
		opacity: 0.7;
	}
	.tw-planet-star-3,
	.tw-planet-star-4,
	.tw-planet-star-5,
	.tw-planet-star-6 {
		display: none;
	}
	.tw-planet-star {
		animation-duration: 4.5s;
	}
	.tw-consultant-heading .elementor-heading-title {
		font-size: 28px;
		line-height: 1.2;
		max-width: none;
	}
	.tw-consultant-subcopy {
		max-width: none;
	}
	.tw-consultant-subcopy p {
		font-size: 14.5px;
	}
	.tw-consultant-hero-content {
		padding-right: 0;
		/* +15px requested gap between the last hero paragraph and the
		   form card — mobile stacks them directly adjacent (0px gap)
		   otherwise, since the column has no bottom padding/margin. */
		padding-bottom: 15px;
	}
	.tw-consultant-form-card {
		padding: 24px 18px 22px;
	}
	/* Uniform vertical rhythm: every field — whether it was paired in a
	   two-column row on desktop or stands alone — gets the same gap below
	   it on mobile. */
	.tw-field {
		margin-bottom: 18px;
	}
	.tw-field label,
	.tw-field-legend {
		font-size: 13px;
	}
	/* The row itself carries no spacing on mobile (fields stack in one
	   column) — previously a "last field in the row gets margin-bottom:0"
	   override meant to avoid doubling up with the row's own desktop
	   margin-bottom also applied here, but since the row's margin-bottom
	   is 0 on mobile too, that collapsed the gap after e.g. "Công ty" to
	   zero, reading as a cramped, uneven jump before "Email". */
	.tw-field-row {
		grid-template-columns: 1fr;
		gap: 0;
		margin-bottom: 0;
	}
	/* The base (desktop) stylesheet sets ".tw-field-row .tw-field
	   {margin-bottom:0}" at a HIGHER specificity (two classes) than the
	   plain ".tw-field {margin-bottom:18px}" above (one class) — CSS
	   specificity beats source order, so that desktop rule would still
	   silently win here even inside this mobile media query unless
	   matched at the same specificity. This is that match: it restores
	   the uniform 18px gap for fields that happen to sit inside a row. */
	.tw-field-row .tw-field {
		margin-bottom: 18px;
	}
	/* Slightly taller than the desktop 10px vertical padding so inputs
	   meet a comfortable ~44px touch target on mobile. */
	.tw-field input[type="text"],
	.tw-field input[type="email"],
	.tw-field input[type="tel"],
	.tw-field textarea {
		padding: 13px 14px;
	}
	.tw-field textarea {
		min-height: 88px;
	}
	.tw-option-cards {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.tw-option-card {
		padding: 14px 16px;
	}
	/* Even 2x2 grid reads as a deliberate set of pill controls rather than
	   whatever happens to fit per row — natural wrapping produced uneven
	   groupings (row breaks landing in different places) since the four
	   labels are different lengths. */
	.tw-chip-group {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.tw-chip {
		width: 100%;
	}
	.tw-chip span {
		width: 100%;
		justify-content: center;
		text-align: center;
		padding: 12px 14px;
		font-size: 13.5px;
	}
	.tw-submit-btn {
		margin-top: 10px;
	}
	/* Pre-existing specificity bug fixed here: the base stylesheet's input
	   rule is ".tw-field input[type="text"]" etc — one class + one
	   attribute selector — which is MORE specific than a plain
	   ".tw-field input" and therefore always won regardless of cascade
	   order, silently no-opping this 16px override for every text/email/
	   tel input (it only ever worked for textarea/option-card/submit-btn,
	   which don't have a competing type-attribute rule). Matching the same
	   type-attribute selectors here is what actually makes this rule apply
	   — needed to keep genuinely preventing iOS Safari's zoom-on-focus. */
	.tw-field input[type="text"],
	.tw-field input[type="email"],
	.tw-field input[type="tel"],
	.tw-field textarea,
	.tw-option-card,
	.tw-submit-btn {
		font-size: 16px; /* avoid iOS zoom-on-focus */
	}
}