/*
Theme Name: World Develop & Design
Theme URI: https://worlddd.net
Description: Child theme of Twenty Twenty Five for worlddd.net. Dark navy with cyan and magenta, matched to the worlddd.net logo. Design only: import the page content separately.
Author: World Develop & Design
Template: twentytwentyfive
Version: 4.3.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wdd-child
*/

/* ==========================================================
   Tokens
   Layout: full width dark bands, content in a 1180px column,
   one glowing grid moment in the hero.
   ========================================================== */

:root {
	--wdd-night: #0B1020;
	--wdd-navy: #0E1424;
	--wdd-deep: #070B16;
	--wdd-panel: #141B2E;
	--wdd-line: #26304A;
	--wdd-text: #E8ECF5;
	--wdd-muted: #9AA4BC;
	--wdd-cyan: #2EE6F0;
	--wdd-cyan-2: #14AEE8;
	--wdd-violet: #B23CF2;
	--wdd-magenta: #F23DD0;
	--wdd-grad: linear-gradient(100deg, #2EE6F0 0%, #B23CF2 55%, #F23DD0 100%);
	--wdd-display: "Montserrat", system-ui, sans-serif;
	--wdd-body: "Figtree", system-ui, sans-serif;
}

/* ==========================================================
   Base
   ========================================================== */

body {
	background: var(--wdd-night);
	color: var(--wdd-text);
}

.wp-site-blocks {
	padding-top: 0;
	padding-bottom: 0;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Inside our sections, spacing comes from gap, not from WordPress flow margins */
:is(.wdd-section, .wdd-band, .wdd-header, .wdd-footer, .wdd-section *, .wdd-band *, .wdd-header *, .wdd-footer *):not(#wdd-reset) > * {
	margin-block: 0;
}

.wdd-section,
.wdd-band {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	padding: 104px 24px;
	background: var(--wdd-night);
	color: var(--wdd-text);
	font-family: var(--wdd-body);
	font-size: 18px;
	line-height: 1.6;
	border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Section tones (class names kept from the first version so imported pages keep working) */
.wdd-section--peach { background: var(--wdd-navy); }
.wdd-section--sage { background: #10172A; }
.wdd-section--butter { background: var(--wdd-navy); }

/* Hero: the one glowing moment, echoing the logo artwork */
.wdd-section--tight {
	padding-block: 32px 112px;
	border-top: 0;
	background:
		radial-gradient(520px 360px at 82% 38%, rgba(178, 60, 242, 0.22), transparent 70%),
		radial-gradient(460px 340px at 66% 70%, rgba(46, 230, 240, 0.14), transparent 70%),
		radial-gradient(1.5px 1.5px at 20px 30px, rgba(140, 170, 255, 0.55), transparent 60%) 0 0 / 170px 130px,
		radial-gradient(1px 1px at 90px 80px, rgba(46, 230, 240, 0.5), transparent 60%) 0 0 / 230px 190px,
		linear-gradient(rgba(120, 140, 200, 0.07) 1px, transparent 1px) 0 0 / 96px 96px,
		linear-gradient(90deg, rgba(120, 140, 200, 0.07) 1px, transparent 1px) 0 0 / 96px 96px,
		var(--wdd-night);
}

/* Contact: closing glow */
.wdd-section--oak {
	background:
		radial-gradient(600px 400px at 85% 20%, rgba(242, 61, 208, 0.18), transparent 70%),
		radial-gradient(600px 420px at 10% 90%, rgba(46, 230, 240, 0.12), transparent 70%),
		var(--wdd-navy);
}

.wdd-wrap {
	box-sizing: border-box;
	max-width: 1180px;
	margin-inline: auto !important;
	display: flex;
	flex-direction: column;
	gap: 52px;
}

.wdd-intro {
	max-width: 700px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wdd-split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 40px;
}

.wdd-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 24px;
}

.wdd-row > * {
	flex: 1 1 300px;
	min-width: 0;
}

.wdd-section a { color: inherit; }
.wdd-section a:hover { color: var(--wdd-cyan); }

:is(.wdd-section, .wdd-header, .wdd-footer) :is(a, button, input, textarea):focus-visible {
	outline: 2px solid var(--wdd-cyan);
	outline-offset: 3px;
}

/* ==========================================================
   Type
   ========================================================== */

/* Eyebrow labels, set like the logo's DEVELOP & DESIGN line */
.wdd-script {
	font-family: var(--wdd-display);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wdd-cyan);
}

.wdd-h1,
.wdd-h2,
.wdd-h3 {
	font-family: var(--wdd-display);
	font-weight: 800;
	color: #FFFFFF;
	text-wrap: balance;
}

.wdd-h1 { font-size: clamp(42px, 6vw, 74px); line-height: 1.04; letter-spacing: -0.03em; }
.wdd-h2 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.1; letter-spacing: -0.025em; }
.wdd-h2--big { font-size: clamp(36px, 5.2vw, 62px); line-height: 1.05; }
.wdd-h3 { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }

/* The hero headline carries the logo gradient */
.wdd-hero .wdd-h1 {
	background: linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 45%, #9FEFF6 70%, #E9A2F5 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.wdd-lead { font-size: 20px; max-width: 580px; color: #C3CADB; }
.wdd-muted,
.wdd-section p.wdd-muted { color: var(--wdd-muted); }

.wdd-pin {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	color: var(--wdd-muted);
}

.wdd-pin::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232EE6F0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wdd-link {
	font-weight: 700;
	color: var(--wdd-cyan);
}

/* ==========================================================
   Buttons
   ========================================================== */

.wdd-section .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
}

.wdd-section .wp-block-button__link {
	display: inline-block;
	padding: 17px 30px;
	border: 0;
	border-radius: 999px;
	background: var(--wdd-grad);
	color: var(--wdd-night);
	font-family: var(--wdd-display);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: 0 8px 28px rgba(178, 60, 242, 0.35);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wdd-section .wp-block-button__link:hover {
	color: var(--wdd-night);
	transform: translateY(-1px);
	box-shadow: 0 10px 36px rgba(46, 230, 240, 0.4);
}

.wdd-section .is-style-outline .wp-block-button__link {
	padding: 15px 28px;
	background: transparent;
	border: 2px solid var(--wdd-cyan);
	color: #FFFFFF;
	box-shadow: none;
}

.wdd-section .is-style-outline .wp-block-button__link:hover {
	background: rgba(46, 230, 240, 0.1);
	color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
	.wdd-section .wp-block-button__link { transition: none; }
	.wdd-section .wp-block-button__link:hover { transform: none; }
}

/* ==========================================================
   Hero
   ========================================================== */

.wdd-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 56px 64px;
}

.wdd-hero-text {
	flex: 1.1 1 480px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.wdd-hero-media {
	flex: 1 1 400px;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

@keyframes wdd-rise {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

.wdd-hero-text > *,
.wdd-hero-media {
	animation: wdd-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.wdd-hero-text > :nth-child(2) { animation-delay: 0.08s; }
.wdd-hero-text > :nth-child(3) { animation-delay: 0.16s; }
.wdd-hero-text > :nth-child(4) { animation-delay: 0.24s; }
.wdd-hero-text > :nth-child(5) { animation-delay: 0.3s; }
.wdd-hero-media { animation-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
	.wdd-hero-text > *,
	.wdd-hero-media { animation: none; }
}

.editor-styles-wrapper .wdd-hero-text > *,
.editor-styles-wrapper .wdd-hero-media { animation: none; }

/* Hero illustration */
.wdd-hero-media--art {
	display: block;
}

.wdd-section .wdd-hero-art {
	margin: 0;
	line-height: 0;
}

.wdd-hero-art img {
	display: block;
	width: 100%;
	max-width: 640px;
	height: auto;
	margin-inline: auto;
}

/* Gradient bordered card, used for "Based right here" and the featured plan */
.wdd-home-card,
.wdd-plan--featured {
	border: 1.5px solid transparent;
	background:
		linear-gradient(var(--wdd-panel), var(--wdd-panel)) padding-box,
		var(--wdd-grad) border-box;
}

.wdd-home-card {
	min-height: 200px;
	padding: 22px;
	border-radius: 22px;
	color: var(--wdd-text);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	box-shadow: 0 0 40px rgba(178, 60, 242, 0.18);
}

.wdd-home-card .wdd-script { font-size: 12px; color: var(--wdd-magenta); }
.wdd-home-card .wdd-big {
	font-family: var(--wdd-display);
	font-weight: 800;
	font-size: 26px;
	line-height: 1.1;
	color: #FFFFFF;
}
.wdd-home-card .wdd-small { font-size: 15px; color: var(--wdd-muted); }

/* ==========================================================
   Photos (placeholders until you add an image block inside)
   ========================================================== */

.wdd-photo {
	position: relative;
	overflow: hidden;
	min-height: 260px;
	padding: 22px;
	border-radius: 22px;
	border: 1.5px dashed rgba(46, 230, 240, 0.35);
	background:
		linear-gradient(rgba(120, 140, 200, 0.06) 1px, transparent 1px) 0 0 / 24px 24px,
		linear-gradient(90deg, rgba(120, 140, 200, 0.06) 1px, transparent 1px) 0 0 / 24px 24px,
		var(--wdd-panel);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
}

.wdd-photo--tall { grid-row: span 2; min-height: 420px; }
.wdd-photo--short { min-height: 200px; }
.wdd-photo--peach,
.wdd-photo--butter { border-color: rgba(242, 61, 208, 0.35); }

.wdd-photo > p {
	font-size: 14px;
	font-weight: 600;
	color: var(--wdd-cyan);
}

.wdd-photo--peach > p,
.wdd-photo--butter > p { color: #F58BE4; }

/* An image block placed inside a photo frame fills it */
.wdd-photo:has(.wp-block-image) { border-style: solid; border-color: var(--wdd-line); }

.wdd-photo .wp-block-image,
.wdd-photo .wp-block-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: top center;
}

/* Website screenshots in project cards */
.wdd-project .wdd-photo:has(.wdd-shot) {
	min-height: 0;
	aspect-ratio: 800 / 455;
	max-width: 100%;
	padding: 0;
	border: 1px solid var(--wdd-line);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.wdd-project-info .wdd-h3 a {
	color: #FFFFFF;
	text-decoration: none;
}

.wdd-project-info .wdd-h3 a:hover {
	color: var(--wdd-cyan);
}

/* ==========================================================
   Who we help band
   ========================================================== */

.wdd-band {
	padding-block: 36px;
	background: var(--wdd-panel);
	border-block: 1px solid var(--wdd-line);
}

.wdd-band .wdd-wrap {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 32px;
}

.wdd-band-title {
	font-family: var(--wdd-display);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wdd-magenta);
}

.wdd-chips {
	flex: 1 1 520px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wdd-chips li {
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--wdd-line);
	background: var(--wdd-night);
	font-size: 15px;
	font-weight: 500;
	color: var(--wdd-text);
}

/* ==========================================================
   Cards (services)
   ========================================================== */

.wdd-card {
	box-sizing: border-box;
	padding: 34px;
	border-radius: 22px;
	border: 1px solid var(--wdd-line);
	background: var(--wdd-panel);
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wdd-card:hover {
	border-color: rgba(46, 230, 240, 0.5);
	box-shadow: 0 0 36px rgba(46, 230, 240, 0.12);
}

.wdd-card p:not(.wdd-h3) { color: var(--wdd-muted); }

.wdd-card[class*="wdd-icon-"]::before {
	content: "";
	width: 56px;
	height: 56px;
	border-radius: 16px;
	border: 1.5px solid transparent;
	background:
		var(--icon) center / 28px no-repeat padding-box,
		linear-gradient(var(--wdd-night), var(--wdd-night)) padding-box,
		var(--wdd-grad) border-box;
	box-sizing: border-box;
}

.wdd-icon-site {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232EE6F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 8l-4 4 4 4M15 8l4 4-4 4M13 6l-2 12'/%3E%3C/svg%3E");
}

.wdd-icon-search {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B23CF2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20.5 20.5l-4.8-4.8'/%3E%3C/svg%3E");
}

.wdd-icon-care {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F23DD0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17l5-5 4 4 7-8'/%3E%3Cpath d='M15 8h5v5'/%3E%3C/svg%3E");
}

/* ==========================================================
   Service area
   ========================================================== */

.wdd-area {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 48px 72px;
}

.wdd-area-text {
	flex: 1 1 380px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.wdd-area-text p:not(.wdd-script) { color: var(--wdd-muted); }

.wdd-towns {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 24px;
	font-weight: 600;
	color: var(--wdd-text);
}

.wdd-towns li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.wdd-towns li::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wdd-cyan);
	box-shadow: 0 0 8px var(--wdd-cyan);
}

.wdd-map {
	flex: 1 1 420px;
	min-width: 0;
	box-sizing: border-box;
	padding: 20px;
	border-radius: 26px;
	border: 1px solid var(--wdd-line);
	background: var(--wdd-night);
}

.wdd-map svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* Logo marks placed in page content */
.wdd-section .wdd-card-mark,
.wdd-section .wdd-contact-mark {
	margin: 0;
	line-height: 0;
}

.wdd-card-mark img {
	width: 56px;
	height: 56px;
}

.wdd-contact-mark img {
	width: 84px;
	height: 84px;
	filter: drop-shadow(0 0 18px rgba(178, 60, 242, 0.45));
}

.wdd-home-card { justify-content: flex-start; }
.wdd-home-card .wdd-small { margin-top: auto !important; }

/* Map colors for pages imported before version 4.1 (newer pages carry these colors already) */
.wdd-map svg rect[fill="#FFFCF7"] { fill: var(--wdd-night); }
.wdd-map svg path[stroke="#E3ECE2"] { stroke: rgba(46, 230, 240, 0.1); }
.wdd-map svg line[stroke="#E7D3BF"] { stroke: var(--wdd-line); }
.wdd-map svg text[fill="#9A7A5C"] { fill: #6B7694; }
.wdd-map svg text[fill="#1F2420"] { fill: var(--wdd-text); }
.wdd-map svg circle[fill="#24452F"] { fill: var(--wdd-cyan); }
.wdd-map svg circle[stroke-dasharray] { fill: var(--wdd-violet); fill-opacity: 0.12; stroke: var(--wdd-violet); stroke-opacity: 0.7; }
.wdd-map svg circle[stroke="#FFFCF7"] { fill: var(--wdd-magenta); stroke: var(--wdd-night); }
.wdd-map svg rect[fill="#24452F"] { fill: var(--wdd-magenta); }
.wdd-map svg text[fill="#FFFCF7"] { fill: var(--wdd-night); font-family: Montserrat, sans-serif; }

/* ==========================================================
   Projects
   ========================================================== */

.wdd-project {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wdd-project-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-inline: 4px;
}

.wdd-project-info .wdd-h3 { font-size: 22px; }
.wdd-project-info p:not(.wdd-h3) { font-size: 16px; color: var(--wdd-muted); }
.wdd-project-info p.wdd-result { font-weight: 600; color: var(--wdd-cyan); }

/* ==========================================================
   Reviews
   ========================================================== */

.wdd-section .wdd-review {
	box-sizing: border-box;
	margin: 0;
	padding: 32px;
	border: 1px solid var(--wdd-line);
	border-radius: 22px;
	background: var(--wdd-panel);
	display: flex;
	flex-direction: column;
	gap: 20px;
	font-style: normal;
}

.wdd-review::before {
	content: "";
	width: 36px;
	height: 28px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 28'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%232EE6F0'/%3E%3Cstop offset='1' stop-color='%23F23DD0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 28V16C0 7 5 1.5 14 0l1.5 4C10 5.6 7.5 9 7.5 13H14v15H0zm20 0V16c0-9 5-14.5 14-16l1.5 4C30 5.6 27.5 9 27.5 13H34v15H20z' fill='url(%23g)'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wdd-review p {
	font-size: 18px;
	line-height: 1.6;
	font-style: normal;
	color: var(--wdd-text);
}

.wdd-section .wdd-review cite {
	margin-top: auto !important;
	font-style: normal;
	font-size: 15px;
	color: var(--wdd-muted);
}

/* ==========================================================
   Plans
   ========================================================== */

.wdd-plan {
	position: relative;
	box-sizing: border-box;
	padding: 36px;
	border-radius: 22px;
	border: 1px solid var(--wdd-line);
	background: var(--wdd-panel);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.wdd-plan .wdd-h3 { font-size: 20px; }

.wdd-price {
	font-family: var(--wdd-display);
	font-weight: 800;
	font-size: 40px;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #FFFFFF;
}

.wdd-per {
	margin-top: -14px !important;
	font-size: 15px;
	font-weight: 500;
	color: var(--wdd-muted);
}

.wdd-plan p:not(.wdd-h3, .wdd-price, .wdd-per, .wdd-badge) { color: var(--wdd-muted); }
.wdd-checks { color: var(--wdd-text); }

.wdd-plan .wp-block-buttons { margin-top: auto !important; padding-top: 8px; }
.wdd-plan .wp-block-button,
.wdd-plan .wp-block-button__link { width: 100%; box-sizing: border-box; text-align: center; }

.wdd-plan--featured {
	box-shadow: 0 0 60px rgba(178, 60, 242, 0.25);
}

.wdd-plan--featured .wdd-price {
	background: var(--wdd-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.wdd-badge {
	position: absolute;
	top: -15px;
	right: 28px;
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--wdd-grad);
	color: var(--wdd-night);
	font-family: var(--wdd-display);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
}

.wdd-checks {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wdd-checks li {
	display: flex;
	gap: 12px;
}

.wdd-checks li::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 3px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232EE6F0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wdd-plan--featured .wdd-checks li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F23DD0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* ==========================================================
   Steps (numbered automatically)
   ========================================================== */

.wdd-steps {
	counter-reset: wdd-step;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.wdd-step {
	counter-increment: wdd-step;
	position: relative;
	flex: 1 1 280px;
	min-width: 0;
	padding-left: 70px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wdd-step::before {
	content: counter(wdd-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1.5px solid transparent;
	background:
		linear-gradient(var(--wdd-night), var(--wdd-night)) padding-box,
		var(--wdd-grad) border-box;
	color: var(--wdd-cyan);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wdd-display);
	font-weight: 800;
	font-size: 17px;
}

.wdd-step .wdd-h3 { font-size: 22px; }
.wdd-step p:not(.wdd-h3) { color: var(--wdd-muted); }

/* ==========================================================
   Contact
   ========================================================== */

.wdd-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 48px 72px;
}

.wdd-contact-text {
	flex: 1 1 380px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.wdd-contact-text .wdd-lead { max-width: 460px; }

.wdd-ci {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 17px;
	font-weight: 600;
	color: var(--wdd-text);
}

.wdd-ci::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.wdd-ci--phone::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232EE6F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
}

.wdd-ci--mail::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B23CF2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}

.wdd-ci--pin::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F23DD0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
}

.wdd-form-card {
	flex: 1 1 400px;
	min-width: 0;
	box-sizing: border-box;
	padding: 36px;
	border-radius: 22px;
	border: 1px solid var(--wdd-line);
	background: rgba(20, 27, 46, 0.85);
	color: var(--wdd-text);
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

/* Styles for the sample form and for most form plugin fields */
.wdd-form-card form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.wdd-form-card label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	font-size: 16px;
	color: var(--wdd-text);
}

.wdd-form-card :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	border: 1px solid var(--wdd-line);
	border-radius: 12px;
	background: var(--wdd-night);
	color: var(--wdd-text);
	font: inherit;
}

.wdd-form-card :is(input, textarea, select):focus {
	border-color: var(--wdd-cyan);
	outline: none;
	box-shadow: 0 0 0 3px rgba(46, 230, 240, 0.2);
}

.wdd-form-card :is(button, input[type="submit"]) {
	padding: 18px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--wdd-grad);
	color: var(--wdd-night);
	font-family: var(--wdd-display);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 8px 28px rgba(178, 60, 242, 0.35);
}

.wdd-form-note,
.wdd-section p.wdd-form-note {
	font-size: 14px;
	text-align: center;
	color: var(--wdd-muted);
}

/* ==========================================================
   Header
   ========================================================== */

.wdd-header {
	box-sizing: border-box;
	padding: 18px 24px;
	background: rgba(11, 16, 32, 0.92);
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.wdd-header-inner {
	box-sizing: border-box;
	max-width: 1180px;
	margin-inline: auto !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
}

/* The site title shows the worlddd.net logo; the text stays for screen readers and search */
.wdd-header .wp-block-site-title {
	margin: 0;
	line-height: 0;
}

.wdd-header .wp-block-site-title a {
	display: block;
	width: 216px;
	height: 52px;
	background: url("assets/logo-horizontal.svg") left center / contain no-repeat;
	color: transparent;
	font-size: 0;
	text-decoration: none;
}

.wdd-header .wp-block-navigation {
	font-family: var(--wdd-display);
	font-size: 15px;
	font-weight: 600;
	gap: 4px 28px;
	color: var(--wdd-text);
}

.wdd-header .wp-block-navigation a {
	text-decoration: none;
}

.wdd-header .wp-block-navigation a:hover {
	color: var(--wdd-cyan);
}

.wdd-header .wp-block-navigation-item.wdd-nav-cta > a {
	padding: 11px 22px;
	border-radius: 999px;
	border: 1.5px solid transparent;
	background:
		linear-gradient(var(--wdd-night), var(--wdd-night)) padding-box,
		var(--wdd-grad) border-box;
	color: #FFFFFF;
}

/* Mobile menu overlay */
.wdd-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wdd-night);
	color: var(--wdd-text);
}

.wdd-header .wp-block-navigation__responsive-container-open,
.wdd-header .wp-block-navigation__responsive-container-close {
	color: var(--wdd-text);
}

/* ==========================================================
   Footer
   ========================================================== */

.wdd-footer {
	box-sizing: border-box;
	padding: 40px 24px;
	background: var(--wdd-deep);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	color: var(--wdd-muted);
	font-family: var(--wdd-body);
	font-size: 15px;
}

.wdd-footer-inner {
	box-sizing: border-box;
	max-width: 1180px;
	margin-inline: auto !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
}

.wdd-footer-brand {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Footer logo: the text stays for screen readers */
.wdd-footer .wdd-footer-logo {
	width: 190px;
	height: 46px;
	background: url("assets/logo-horizontal.svg") left center / contain no-repeat;
	color: transparent;
	font-size: 0;
	line-height: 0;
}

.wdd-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	font-weight: 600;
}

.wdd-footer a {
	color: var(--wdd-text);
	text-decoration: none;
}

.wdd-footer a:hover {
	color: var(--wdd-cyan);
}