/*
Theme Name:   WD Designs
Theme URI:    https://the-wddesigns.com/
Author:       WD Designs
Description:  Custom theme for WD Designs. Built from scratch to one shared set of rules: one pink, one logo size, one header gap, one hero depth, one menu.
Version:      1.0.0
Requires PHP: 7.4
Text Domain:  wdd
*/

/* =========================================================
   1. DESIGN TOKENS
   Change a value here and every page updates.
   ========================================================= */
:root {
	/* Colour */
	--wdd-black:   #050505;   /* page background, matches image edges */
	--wdd-panel:   #0D0D0D;   /* form card and contact cards */
	--wdd-line:    #1F1F1F;   /* every hairline on the site */
	--wdd-field:   #2A2A2A;   /* form field borders */
	--wdd-white:   #FFFFFF;
	--wdd-text:    #CFCFCF;   /* body copy */
	--wdd-muted:   #8C8C8C;   /* captions, small print */
	--wdd-pink:    #D6204E;   /* THE brand pink. One value, every breakpoint. */

	/* Type */
	--wdd-serif: Georgia, "Times New Roman", Times, serif;
	--wdd-sans:  Arial, "Helvetica Neue", Helvetica, sans-serif;
	--wdd-body-size: 1.0625rem;
	--wdd-body-lh:   1.7;

	/* Layout */
	--wdd-max:        1240px;
	--wdd-gutter:     clamp(20px, 5.5vw, 72px);   /* one side margin site-wide */
	--wdd-logo-w:     clamp(80px, 8.2vw, 118px);  /* one logo size site-wide */
	--wdd-hero-top:   clamp(48px, 5vw, 72px);     /* hairline to first hero line */
	--wdd-hero-min:   clamp(360px, 48vh, 480px);  /* one hero depth */
	--wdd-section:    clamp(48px, 6vw, 80px);     /* space above and below sections */
	--wdd-block:      clamp(40px, 5vw, 64px);     /* space inside repeated blocks */
	--wdd-feature-min: 0px;                       /* feature rows take their depth from content, so space above and below is equal */
	--wdd-band-min:   0px;                        /* closing band depth comes from its padding */
	--wdd-field-gap:  24px;                       /* space between form fields */
}

/* =========================================================
   2. BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--wdd-black);
	color: var(--wdd-text);
	font-family: var(--wdd-sans);
	font-size: var(--wdd-body-size);
	line-height: var(--wdd-body-lh);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

body.wdd-menu-open { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }

a { color: var(--wdd-white); text-decoration-color: var(--wdd-pink); text-underline-offset: 4px; }
a:hover { color: var(--wdd-white); }

:focus-visible { outline: 2px solid var(--wdd-white); outline-offset: 3px; }

::selection { background: var(--wdd-pink); color: var(--wdd-white); }

h1, h2, h3 {
	margin: 0;
	font-family: var(--wdd-serif);
	font-weight: 400;
	color: var(--wdd-white);
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.6rem); line-height: 1.1; }
.wdd-line { display: block; }
h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); line-height: 1.15; }
h3 { font-size: 1.35rem; line-height: 1.3; }

p { margin: 0 0 1.1em; max-width: 62ch; text-wrap: pretty; }  /* avoids a single word left alone on the last line */
p:last-child { margin-bottom: 0; }

figure { margin: 0; }

.wdd-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wdd-skip {
	position: absolute; left: 16px; top: -60px; z-index: 100;
	background: var(--wdd-white); color: var(--wdd-black);
	padding: 10px 16px; font-weight: 700; text-decoration: none;
}
.wdd-skip:focus { top: 16px; }

/* =========================================================
   3. SHARED PIECES
   ========================================================= */
.wdd-wrap {
	width: min(100% - (var(--wdd-gutter) * 2), var(--wdd-max));
	margin-inline: auto;
}

.wdd-dot { color: var(--wdd-pink); }

.wdd-eyebrow {
	margin: 0 0 18px;
	font: 700 0.78rem/1.4 var(--wdd-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wdd-pink);
}

.wdd-rule {
	display: block;
	width: 56px; height: 2px;
	margin: 28px 0;
	border: 0;
	background: var(--wdd-pink);
}

.wdd-lead { font-size: 1.125rem; color: #E6E6E6; }

.wdd-num {
	display: block;
	margin-bottom: 16px;
	font: 700 0.85rem/1 var(--wdd-sans);
	letter-spacing: 0.1em;
	color: var(--wdd-pink);
}

.wdd-signoff {
	margin: 28px 0 0;
	font-family: var(--wdd-serif);
	font-size: 1.05rem;
	color: var(--wdd-white);
}

.wdd-caption {
	margin-top: 14px;
	font: italic 0.95rem/1.5 var(--wdd-serif);
	color: var(--wdd-muted);
}

.wdd-icon { width: 24px; height: 24px; flex: none; }

/* Buttons */
.wdd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 22px;
	border: 1px solid var(--wdd-pink);
	background: var(--wdd-pink);
	color: var(--wdd-white);
	font: 700 0.74rem/1 var(--wdd-sans);   /* one button text size everywhere */
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.wdd-btn:hover { background: transparent; color: var(--wdd-white); }

.wdd-btn--ghost { background: transparent; border-color: var(--wdd-white); }
.wdd-btn--ghost:hover { background: var(--wdd-white); color: var(--wdd-black); }

.wdd-btn--dark { background: var(--wdd-black); border-color: var(--wdd-black); }
.wdd-btn--dark:hover { background: transparent; border-color: var(--wdd-white); }

.wdd-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }

/* Full-bleed hairline: the line runs edge to edge of the screen,
   like the pink band, while the content stays inside the page width. */
.wdd-section--ruled,
.wdd-feature,
.wdd-project,
.wdd-footer__bar {
	border-top: 1px solid var(--wdd-line);
	border-image: linear-gradient(var(--wdd-line), var(--wdd-line)) 1 / 1px 0 0 0 / 0 100vw;
}

/* =========================================================
   4. HEADER
   ========================================================= */
.wdd-header {
	position: relative;
	z-index: 20;
	border-bottom: 1px solid var(--wdd-line);   /* the agreed hairline */
	background: var(--wdd-black);
}

.wdd-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 24px;
}

.wdd-logo { display: block; width: var(--wdd-logo-w); text-decoration: none; }
.wdd-logo img, .wdd-logo .custom-logo { width: 100%; height: auto; }


/* Menu (header and footer share the same markup) */
.wdd-menu { display: flex; gap: clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.wdd-menu li { margin: 0; }
.wdd-menu a {
	position: relative;
	display: inline-block;
	padding-block: 8px;
	font: 400 0.8rem/1.2 var(--wdd-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wdd-white);
}
.wdd-menu a::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--wdd-pink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}
.wdd-menu a:hover::after,
.wdd-menu .current-menu-item > a::after,
.wdd-menu .current_page_item > a::after,
.wdd-menu .is-current > a::after { transform: scaleX(1); }
.wdd-menu .current-menu-item > a,
.wdd-menu .current_page_item > a,
.wdd-menu .is-current > a { color: var(--wdd-pink); }

/* Submenus are not used. If one is ever added in the menu screen it stays hidden. */
.wdd-menu .sub-menu { display: none; }

.wdd-menu-toggle {
	display: none;
	width: 44px; height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wdd-white);
	cursor: pointer;
}
.wdd-menu-toggle .wdd-icon { width: 28px; height: 28px; margin: auto; }
.wdd-menu-toggle .wdd-icon--close { display: none; }
.wdd-menu-toggle[aria-expanded="true"] .wdd-icon--menu { display: none; }
.wdd-menu-toggle[aria-expanded="true"] .wdd-icon--close { display: block; }

/* =========================================================
   5. HERO (identical rules on every page)
   ========================================================= */
.wdd-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
	min-height: var(--wdd-hero-min);
	padding-top: var(--wdd-hero-top);
	padding-bottom: var(--wdd-block);
}
.wdd-hero--single { grid-template-columns: minmax(0, 780px); }

/* Home hero: the device image gets the larger column and extends into the right margin */
.wdd-hero--home { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 0; }  /* Home hero depth set by its content, so the space under the button is exact */
.wdd-hero--home .wdd-hero__media {
	align-self: center;          /* image sits level with the text, no gap underneath */
	margin-left: -32px;          /* same size, moved away from the right margin */
	margin-right: -24px;
}
.wdd-hero--home .wdd-actions { margin-top: 24px; }
@media (min-width: 861px) {
	/* Each sentence of the Home headline stays on one line in the narrower text column */
	.wdd-hero--home h1 { font-size: min(3.6rem, calc(4.2vw - 4px)); }
	.wdd-hero--home .wdd-line { white-space: nowrap; }
}
/* Hero content always starts at the same height below the hairline. */


.wdd-hero__media img { width: 100%; }

.wdd-ticks {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.95rem;
	color: var(--wdd-white);
}
.wdd-ticks li { display: flex; align-items: center; gap: 8px; }
.wdd-ticks .wdd-icon { width: 18px; height: 18px; color: var(--wdd-pink); }

/* Hero quote (About and Services) */
/* Quote hero: the hairline runs from "CHAPTER ONE" to the last line of the intro,
   and the quote sits vertically centred against it. */
.wdd-hero--quote { align-items: stretch; min-height: 0; }
.wdd-hero--quote > div:first-child { align-self: start; }
.wdd-hero--quote .wdd-quote { display: flex; flex-direction: column; justify-content: center; }
/* About: the intro column alone sets the height, so the line ends level with its last line */
.wdd-hero--fit .wdd-quote { contain: size; }
.wdd-hero--quote .wdd-quote blockquote { max-width: 34ch; }

.wdd-quote {
	padding-left: clamp(24px, 3vw, 48px);
	border-left: 1px solid var(--wdd-line);
}
.wdd-quote__mark { display: block; width: 40px; height: auto; margin-bottom: 20px; color: var(--wdd-pink); }
.wdd-quote blockquote {
	margin: 0;
	font: italic 400 clamp(1.35rem, 1rem + 1.2vw, 1.85rem)/1.45 var(--wdd-serif);
	color: var(--wdd-white);
	max-width: 30ch;
}

/* =========================================================
   6. SECTIONS
   ========================================================= */
.wdd-section { padding-block: var(--wdd-section); }

.wdd-section__head.wdd-section__head--center { display: block; text-align: center; }
.wdd-section__head--center p { margin-inline: auto; max-width: 70ch; }
.wdd-section__head--center h2 { margin-bottom: 24px; }
.wdd-section__head--center .wdd-actions { justify-content: center; }

.wdd-section__head {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: end;
	margin-bottom: clamp(28px, 3.5vw, 44px);
}

/* Home: pink services band */
.wdd-services-band { background: var(--wdd-pink); color: #F6ECEF; }
.wdd-services-band__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wdd-service {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(20px, 2.4vw, 32px) clamp(24px, 3vw, 44px);
	border-left: 1px solid rgba(255, 255, 255, 0.28);
}
.wdd-service:first-child { border-left: 0; padding-left: 0; }
.wdd-service:last-child { padding-right: 0; }
.wdd-service .wdd-icon { width: 28px; height: 28px; margin-bottom: 12px; color: var(--wdd-white); }
.wdd-service h3 { margin-bottom: 8px; }
.wdd-service p { margin-bottom: 0; }
.wdd-service a { display: inline-block; margin-top: 10px; font-size: 0.9rem; text-decoration-color: var(--wdd-white); }


/* Split: image one side, text the other */
.wdd-split {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

/* Larger image that bleeds off the left edge of the screen (Home About, About 01) */
.wdd-split--bleed { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }  /* image base level with the button base */
.wdd-feature.wdd-feature--bleed { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 0; }

/* Image fills the full height of its text block (About 01):
   top level with the section number, base level with the last line of text.
   The picture is cropped at the sides to fit, so the alignment holds at every screen width. */
.wdd-feature.wdd-feature--fill { align-items: stretch; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }  /* wider image, slightly narrower text: taller block, larger picture */
.wdd-feature--fill > div { align-self: center; }
.wdd-feature--fill > .wdd-feature__media {
	position: relative;
	margin-top: 8px;        /* optical: level with the top of "01" */
	margin-bottom: 10px;    /* optical: level with the baseline of the last line */
}
.wdd-feature--fill > .wdd-feature__media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: 60% 50%;
}

/* Text block the same width as the hero intro column */
.wdd-half { max-width: calc((100% - clamp(32px, 5vw, 72px)) / 2); }
.wdd-h2-gap { margin-bottom: 24px; }

/* Text on the left, testimonial on the right (About 02).
   The hairline runs the height of the left block, with the testimonial centred against it. */
.wdd-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(32px, 5vw, 72px);
	align-items: stretch;
}
.wdd-pair > div:first-child { align-self: start; }
.wdd-testimonial {
	display: flex; flex-direction: column;
	margin: 0;
	padding-left: clamp(24px, 3vw, 48px);
	border-left: 1px solid var(--wdd-line);
	contain: size;
}
.wdd-testimonial .wdd-eyebrow { margin: 0; line-height: 1; }  /* heading level with the section number */
.wdd-testimonial blockquote { margin: auto 0 0; }              /* quote drops to the bottom, level with the last line of the intro */
.wdd-testimonial blockquote p {
	margin: 0;
	max-width: 40ch;
	font: italic 400 1.2rem/1.6 var(--wdd-serif);
	color: var(--wdd-white);
}
.wdd-testimonial figcaption {
	margin-top: 18px;
	margin-bottom: 0.36rem;   /* lifts the smaller text so it sits on the same baseline as the intro */
	font: 700 0.72rem/1.4 var(--wdd-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #BDBDBD;
}

/* A section that uses the tighter spacing above and below */
.wdd-section--tight { padding-block: var(--wdd-block); }

/* Home featured project: space under the monitors matches the space under the hero button.
   The negative margin removes the soft shadow below the monitor stands from the measurement. */
.wdd-section--featured { padding-bottom: var(--wdd-block); }
.wdd-section--featured > figure { margin-bottom: -1.8%; }
.wdd-split--bleed > figure,
.wdd-feature--bleed > .wdd-feature__media {
	margin-left: calc((100vw - min(100vw - (var(--wdd-gutter) * 2), var(--wdd-max))) / -2);
}
.wdd-split--bleed > figure img,
.wdd-feature--bleed > .wdd-feature__media img { width: 100%; }
/* The image bleeds, but its caption stays inside the page margin */
.wdd-feature--bleed > .wdd-feature__media .wdd-caption {
	padding-left: calc((100vw - min(100vw - (var(--wdd-gutter) * 2), var(--wdd-max))) / 2);
}

/* Feature rows: About 01, Services 01 to 03 */
.wdd-feature {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	min-height: var(--wdd-feature-min);
	padding-block: var(--wdd-block);
}
.wdd-feature--flip .wdd-feature__media { order: 2; }
.wdd-feature > div { padding-top: 6px; }   /* optical correction: the space above and below the text block looks equal */
.wdd-feature h2 { margin-bottom: 24px; }
.wdd-includes { margin-top: 24px; font-size: 0.95rem; color: var(--wdd-muted); }
.wdd-includes strong { color: var(--wdd-white); font-weight: 700; }

/* About: three principles */
.wdd-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.wdd-trio__item { padding-top: 0; }
.wdd-trio__item .wdd-icon { width: 30px; height: 30px; margin-bottom: 20px; color: var(--wdd-pink); }
.wdd-trio__item h3 { margin-bottom: 12px; }

/* Projects: one template for every project */
.wdd-project {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	padding-block: var(--wdd-block);
}
.wdd-project h2 { margin-bottom: 20px; }

/* Closing band: identical on every page that has one */
.wdd-closing { background: var(--wdd-pink); color: #F6ECEF; }
.wdd-closing__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	min-height: var(--wdd-band-min);
	padding-block: clamp(28px, 3vw, 40px);
}
.wdd-closing h2 { margin-bottom: 10px; }
.wdd-closing .wdd-dot { color: inherit; }

/* =========================================================
   7. CONTACT
   ========================================================= */
.wdd-contact { align-items: start; }
@media (min-width: 861px) {
	/* Form card sits with equal space above and below it */
	.wdd-hero.wdd-contact { padding-bottom: var(--wdd-hero-top); }
	.wdd-contact .wdd-form-card { align-self: center; }
}

.wdd-methods { display: grid; gap: 16px; margin-top: 40px; }
.wdd-method {
	display: flex; align-items: center; gap: 18px;
	padding: 20px;
	border: 1px solid var(--wdd-line);
	background: var(--wdd-panel);
	text-decoration: none;
}
.wdd-method__icon {
	display: grid; place-items: center;
	width: 44px; height: 44px;
	border: 1px solid var(--wdd-pink);
	color: var(--wdd-pink);
}
.wdd-method__icon .wdd-icon { width: 20px; height: 20px; }
.wdd-method__label { display: block; font: 700 0.7rem/1.4 var(--wdd-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wdd-pink); }
.wdd-method__value { display: block; color: var(--wdd-white); overflow-wrap: anywhere; }
.wdd-method:hover .wdd-method__value { text-decoration: underline; text-decoration-color: var(--wdd-pink); }

.wdd-form-card {
	padding: clamp(24px, 4vw, 48px);
	border: 1px solid var(--wdd-line);
	background: var(--wdd-panel);
}
.wdd-form-card h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin-bottom: 10px; }
.wdd-form-card > p { font-size: 0.95rem; color: var(--wdd-muted); margin-bottom: 32px; }

.wdd-field { margin-bottom: var(--wdd-field-gap); }
.wdd-field label {
	display: block; margin-bottom: 10px;
	font: 700 0.72rem/1.4 var(--wdd-sans); letter-spacing: 0.14em; text-transform: uppercase; color: #BDBDBD;
}
.wdd-field input,
.wdd-field textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--wdd-field);
	border-radius: 0;
	background: var(--wdd-black);
	color: var(--wdd-white);
	font: 400 1rem/1.5 var(--wdd-sans);
	-webkit-appearance: none; appearance: none;
}
.wdd-field textarea { min-height: 160px; resize: vertical; }
.wdd-field input::placeholder, .wdd-field textarea::placeholder { color: #6E6E6E; }
.wdd-field input:focus, .wdd-field textarea:focus { outline: none; border-color: var(--wdd-pink); box-shadow: 0 0 0 1px var(--wdd-pink); }

/* Contact: what happens next (a real sequence, so it is numbered) */
.wdd-next { margin-top: 48px; }
.wdd-steps { margin: 0; padding: 0; list-style: none; counter-reset: wdd-step; }
.wdd-steps li {
	position: relative;
	padding-left: 44px;
	margin-top: 24px;
	counter-increment: wdd-step;
}
.wdd-steps li:first-child { margin-top: 0; }
.wdd-steps li::before {
	content: counter(wdd-step, decimal-leading-zero);
	position: absolute; left: 0; top: 4px;
	font: 700 0.85rem/1 var(--wdd-sans);
	letter-spacing: 0.1em;
	color: var(--wdd-pink);
}
.wdd-steps h3 { margin-bottom: 6px; font-size: 1.15rem; }
.wdd-steps p { margin: 0; font-size: 0.95rem; color: var(--wdd-muted); }

/* Contact: privacy line under the Send button */
.wdd-form-note { margin: 18px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--wdd-muted); }
.wdd-form-note a { color: var(--wdd-white); }

.wdd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wdd-notice {
	margin-bottom: 28px;
	padding: 14px 18px;
	border-left: 3px solid var(--wdd-pink);
	background: var(--wdd-black);
	color: var(--wdd-white);
	font-size: 0.95rem;
}

/* =========================================================
   8. GENERIC PAGES (Privacy Policy and any new page)
   ========================================================= */
.wdd-prose { max-width: 72ch; padding-bottom: var(--wdd-section); }
.wdd-prose h2 { font-size: 1.75rem; margin: 2em 0 0.6em; }
.wdd-prose h3 { margin: 1.6em 0 0.5em; }
.wdd-prose ul, .wdd-prose ol { padding-left: 1.2em; }
.wdd-prose li { margin-bottom: 0.4em; }

/* =========================================================
   9. FOOTER
   ========================================================= */
.wdd-footer { --wdd-footer-space: 40px; border-top: 1px solid var(--wdd-line); padding-top: var(--wdd-footer-space); }  /* same space above and below the logo */
.wdd-footer__grid {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--wdd-footer-space);
	align-items: end;
	padding-bottom: var(--wdd-footer-space);
}
.wdd-footer .wdd-menu { justify-content: center; }
.wdd-footer__link { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 0.92rem; text-decoration: none; }
.wdd-footer__link:first-child { margin-top: 0; }
.wdd-footer__link .wdd-icon { width: 18px; height: 18px; color: var(--wdd-pink); }
.wdd-footer__link:hover span { text-decoration: underline; text-decoration-color: var(--wdd-pink); }

.wdd-footer__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 16px;
	align-items: center;
	padding-block: 24px;
	font-size: 0.82rem;
	color: var(--wdd-muted);
}
.wdd-footer__bar p { margin: 0; max-width: none; }
.wdd-footer__bar a { color: var(--wdd-pink); text-decoration: none; }
.wdd-footer__bar a:hover { text-decoration: underline; }
.wdd-footer__bar > :last-child { text-align: right; }

/* =========================================================
   10. RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
	.wdd-trio { grid-template-columns: 1fr; }
	.wdd-footer__grid { grid-template-columns: 1fr; align-items: start; }
	.wdd-footer .wdd-menu { justify-content: flex-start; flex-wrap: wrap; gap: 8px 24px; }
}

@media (max-width: 860px) {
	.wdd-menu-toggle { display: grid; }

	.wdd-header .wdd-nav {
		display: none;
		position: absolute; top: 100%; left: 0; right: 0;
		padding: 12px var(--wdd-gutter) 32px;
		border-top: 1px solid var(--wdd-line);
		border-bottom: 1px solid var(--wdd-line);
		background: var(--wdd-black);
	}
	.wdd-header .wdd-nav.is-open { display: block; }
	.wdd-header .wdd-menu { flex-direction: column; gap: 4px; }
	.wdd-header .wdd-menu a { padding-block: 12px; font-size: 0.95rem; }

	.wdd-hero,
	.wdd-section__head,
	.wdd-split,
	.wdd-feature,
	.wdd-project { grid-template-columns: 1fr; }

	.wdd-hero--quote { align-items: start; }
	.wdd-hero--fit .wdd-quote { contain: none; }
	.wdd-half { max-width: none; }
	.wdd-feature.wdd-feature--fill { grid-template-columns: 1fr; }
	.wdd-feature--fill > .wdd-feature__media { margin: 0 calc(var(--wdd-gutter) * -1); }
	.wdd-feature--fill > .wdd-feature__media img { position: static; height: auto; }
	.wdd-pair { grid-template-columns: 1fr; }
	.wdd-testimonial { contain: none; }
	.wdd-testimonial blockquote { margin-top: 16px; }
	#wdd-main .wdd-testimonial .wdd-eyebrow { text-align: left; }   /* heading follows its quote block */
	.wdd-feature,
	.wdd-feature.wdd-feature--bleed { grid-template-columns: 1fr; min-height: 0; }
	.wdd-feature--flip .wdd-feature__media { order: 0; }

	.wdd-services-band__grid { grid-template-columns: 1fr; }
	.wdd-service,
	.wdd-service:first-child,
	.wdd-service:last-child { padding: 24px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.28); }
	.wdd-service:first-child { border-top: 0; }

	.wdd-hero--home .wdd-hero__media { margin: 0; }
	.wdd-split--bleed > figure,
	.wdd-feature--bleed > .wdd-feature__media { margin-inline: calc(var(--wdd-gutter) * -1); }
	.wdd-feature--bleed > .wdd-feature__media .wdd-caption { padding-inline: var(--wdd-gutter); }

	/* PHONE ALIGNMENT RULE: page content is left-aligned, sharing one left edge.
	   Only standalone statements are centred: the Home featured project,
	   the pink closing band and the footer. Forms always stay left-aligned. */
	#wdd-main .wdd-section__head--center,
	#wdd-main .wdd-closing { text-align: center; }
	#wdd-main .wdd-section__head--center p,
	#wdd-main .wdd-closing p { margin-inline: auto; }
	#wdd-main .wdd-section__head--center .wdd-actions { justify-content: center; }
	.wdd-closing__inner { align-items: center; }

	.wdd-closing__inner { flex-direction: column; justify-content: center; }

	/* Footer on phones: centred, menu on two balanced lines */
	.wdd-footer__grid { justify-items: center; text-align: center; }
	.wdd-footer .wdd-menu { justify-content: center; gap: 8px 24px; }
	.wdd-footer .wdd-menu li:nth-child(-n+3) { order: 1; }
	.wdd-footer .wdd-menu::after { content: ""; flex-basis: 100%; order: 2; }   /* line break after Services */
	.wdd-footer .wdd-menu li:nth-child(n+4) { order: 3; }
	.wdd-footer__link { justify-content: center; }
	.wdd-footer__bar { grid-template-columns: 1fr; text-align: center; }
	.wdd-footer__bar > :last-child { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Heading that sits above a grid */
.wdd-head-gap { margin-bottom: clamp(28px, 3.5vw, 44px); }