/* ==========================================================================
   Blossom Designs — foundation layer
   Palette derived directly from the BD-Logo blossom gradient:
   cyan  →  sky  →  periwinkle  →  magenta  →  pink
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TYPEFACE
   BLOXE is self-hosted, so there is no third-party request and no privacy
   trade-off. The file is preloaded from functions.php to avoid a flash of
   fallback text.

   Two details matter here:

     * weight range 100-900. The family ships a single weight, so declaring it
       as one weight would leave the browser free to synthesise a bold from it
       wherever the CSS asks for 600. Declaring the whole range states plainly
       that this file is the only cut there is, and BLOXE is then used as drawn.

     * no unicode-range. BLOXE carries a full ASCII set plus Latin-1 accented
       characters and the typographic quotes. It has no em dash, en dash,
       middot, ellipsis or arrow glyph; the handful of places those appear in a
       heading fall through to the next family in the stack, which is what a
       font stack is for.

   Scope: BLOXE sets display type only — headings, the hero title, stat
   figures, plan prices, the footer wordmark and pull quotes, all of which read
   --bd-display. Body copy, lists, buttons and navigation stay on Jost.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "BLOXE";
	src: url("../fonts/BLOXE.woff2") format("woff2"),
	     url("../fonts/BLOXE.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/*
 * Jost, self-hosted.
 *
 * This is byte-for-byte the file the browser was already downloading from
 * Google — same URL, same 26,576 bytes — served from our own origin instead.
 * That matters: an earlier attempt used Google's other endpoint
 * (/l/font?kit=...), which returns a differently-instanced cut of the same
 * family and rendered text a fraction of a pixel differently, which showed up
 * as a low-amplitude pixel diff across every line of body copy. Using the exact
 * file keeps rendering identical while removing the third-party dependency.
 *
 * One file covers 400, 500 and 600: Google serves the same blob for all three
 * weights, which means it is a variable font, so a font-weight range declaration
 * lets the browser interpolate instead of synthesising.
 *
 * unicode-range is deliberately omitted. It is what Google uses to split a
 * family into subsets, and it only pays off when you ship the extra subsets —
 * with a single Latin file there is nothing to choose between, and an incorrect
 * range would silently push a character onto the fallback face.
 *
 * The file is preloaded from functions.php: this is the body face for the whole
 * page, so every moment spent fetching it is a moment spent not painting text.
 */
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/jost-latin.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
	/* Brand — gradient stops taken from the logo */
	--bd-cyan:      #38bdf8;
	--bd-sky:       #7dd3fc;
	--bd-peri:      #6366f1;
	--bd-indigo:    #4338ca;
	--bd-magenta:   #db2777;
	--bd-pink:      #f472b6;

	/* Tinted neutrals */
	--bd-blush:     #fdf2f8;
	--bd-cream:     #fffafc;
	--bd-lilac:     #f5f3ff;
	--bd-mist:      #f0f9ff;

	/* Ink.
	   --bd-ink-faint was #8b85a0, which measured 3.52:1 on white — below the
	   4.5:1 that WCAG AA requires for body text, and the only contrast failure
	   on the page. It was flagged on the plan cards ("Perfect for a new or first
	   website", the "from" in each price) and on the numbered nav items.

	   #6f6885 is the same muted plum-grey one step darker: 5.26:1 on white and
	   4.79:1 on the worst of the tinted surfaces (blush #fdf2f8). It is checked
	   against every background in this palette rather than against white alone,
	   because this token sits on cream, blush, lilac and mist as well. */
	--bd-ink:       #1b1725;
	--bd-ink-soft:  #5a5470;
	--bd-ink-faint: #6f6885;

	/* Text on a dark surface. Kept as tokens so every dark block agrees, and so
	   the contrast can be reasoned about in one place: on the footer's #1b1725
	   these measure 10.3:1, 7.5:1 and 4.9:1 respectively. */
	--bd-on-dark:        rgba(255, 255, 255, .8);
	--bd-on-dark-strong: #ffffff;
	--bd-on-dark-faint:  rgba(255, 255, 255, .58);

	/* Accents for text and links.
	   The brand blues and violets are tuned for fills and gradients; at text
	   size on a light tint they are loud and low-contrast. These deeper,
	   muted values carry the same brand family but hold up as type: plum reads
	   7.6:1 on cream and 7.2:1 on the lilac blocks, against 4.3:1 for the
	   periwinkle they replace. Strong ones are also valid CSS colours, so they
	   work as borders and focus rings as well as text. */
	--bd-link:      #8e2c5f;
	--bd-link-hover:#6d1f47;
	--bd-accent-text:#7c4a86;
	--bd-accent-strong: #a855f7;
	--bd-on-dark-accent:#c9c3dd;

	/* Lines & surfaces */
	--bd-line:      #ece7f2;
	--bd-line-mid:  #ddd6e6;
	--bd-white:     #ffffff;

	/* Signature gradient */
	--bd-grad: linear-gradient(135deg, var(--bd-cyan) 0%, var(--bd-peri) 52%, var(--bd-magenta) 100%);
	--bd-grad-soft: linear-gradient(135deg, rgba(56, 189, 248, .14) 0%, rgba(99, 102, 241, .12) 52%, rgba(219, 39, 119, .14) 100%);

	/*
	 * The same sweep, deepened so that text can sit in it or on it.
	 *
	 * --bd-grad is built for decorative fills — the hero orb, the section
	 * washes, hairline dividers — where nothing has to be read against it. Its
	 * cyan start is #38bdf8, which measures 2.07:1 on cream: fine behind a
	 * gradient, below the 3:1 that WCAG AA asks of large text. Used as gradient
	 * text (background-clip: text) on the hero headline and the stat figures it
	 * put the light end of the first line under the threshold.
	 *
	 * --bd-grad-readable keeps the blue to indigo to magenta sweep but starts
	 * deeper, so every stop clears both bars at once:
	 *
	 *              on cream (text, needs 3:1)   white on it (fill, needs 4.5:1)
	 *   #2563eb          5.00:1                       5.17:1
	 *   #4f46e5          6.09:1                       6.29:1
	 *   #db2777          4.45:1                       4.60:1
	 *
	 * That is why one token covers both the gradient headline and the solid
	 * button: the button's label is white and the button's own stops are the
	 * fill behind it, so the stricter 4.5:1 bar governs, and all three stops
	 * pass it. The button also scales its background to 170% and slides it on
	 * hover, which means any stop can end up under the label — passing at every
	 * stop is what makes that safe rather than passing on average.
	 */
	--bd-grad-readable: linear-gradient(135deg, #2563eb 0%, #4f46e5 52%, var(--bd-magenta) 100%);

	/* Typography
	   BLOXE is the display face: it sets headings, the hero title, the stat
	   figures, plan prices, the footer wordmark and pull quotes, all of which
	   read --bd-display.

	   Body copy stays on Jost. BLOXE is a high-contrast display serif and is
	   deliberately not used for paragraphs, lists, buttons or navigation.

	   Jost also sits behind BLOXE in the display stack, because BLOXE has no em
	   dash, en dash, middot, ellipsis or arrow glyph — without a fallback those
	   characters would drop to a system font mid-line. Behind Jost are system
	   faces only, so the page still holds together if the webfonts never load. */
	--bd-display: "BLOXE", "Jost", Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
	--bd-body:    "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--bd-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Elevation */
	--bd-shadow-sm: 0 1px 2px rgba(27, 23, 37, .05);
	--bd-shadow:    0 12px 32px -12px rgba(67, 56, 202, .18);
	--bd-shadow-lg: 0 30px 70px -28px rgba(67, 56, 202, .32);
	--bd-glow:      0 0 0 1px rgba(99, 102, 241, .10), 0 18px 44px -20px rgba(219, 39, 119, .30);

	/* Geometry */
	--bd-radius-sm: 10px;
	--bd-radius:    16px;
	--bd-radius-lg: 26px;
	--bd-radius-pill: 999px;

	/* Rhythm */
	--bd-gutter:     clamp(1.15rem, 4vw, 3.25rem);
	--bd-section-y:  clamp(4rem, 9vw, 7.5rem);
	--bd-maxw:       1240px;
	--bd-sidebar-w:  186px;

	/* Hero rhythm.
	   .bd-hero sets its own min-height to the full viewport and does not use a
	   token for it. These govern the breathing room inside that box and are
	   expressed in vh so they tighten automatically on short windows, which is
	   what keeps the copy clear of the edge on a laptop screen. */
	--bd-hero-pad-t: clamp(1.5rem, 4vh, 3rem);
	--bd-hero-pad-b: clamp(2rem, 6vh, 4rem);

	/* Motion */
	--bd-ease:      cubic-bezier(.22, .61, .36, 1);
	--bd-ease-out:  cubic-bezier(.16, 1, .3, 1);
	--bd-dur:       .42s;

	/* Layering */
	--bd-z-rail: 60;
	--bd-z-nav:  70;
	--bd-z-menu: 90;
}

/* --------------------------------------------------------------------------
   2. RESET / NORMALISE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 2rem;
}

body.bd-theme {
	margin: 0;
	background: var(--bd-cream);
	color: var(--bd-ink);
	font-family: var(--bd-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: .002em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.bd-theme img,
body.bd-theme svg,
body.bd-theme video,
body.bd-theme iframe {
	max-width: 100%;
	height: auto;
}

body.bd-theme img { display: block; }

/* --------------------------------------------------------------------------
   3. TYPE SCALE
   -------------------------------------------------------------------------- */
/*
 * The `:where()` wrapper contributes no specificity, so these land at (0,1,1)
 * instead of (0,1,2).
 *
 * That one step matters. A rule like `.bd-ctaband h2 { color: var(--bd-white) }`
 * is also (0,1,1) but lives in layout.css, which loads afterwards — so it wins.
 * At (0,1,2) this heading colour outranked every component rule of that shape,
 * and on the dark call-to-action band the h2 was painted in `--bd-ink`, the same
 * value as the band's own background: invisible.
 *
 * (0,1,1) still beats the parent theme's bare `h2 { … }`, which is all this rule
 * needs to do.
 */
:where(body.bd-theme) h1,
:where(body.bd-theme) h2,
:where(body.bd-theme) h3,
:where(body.bd-theme) h4 {
	margin: 0 0 .55em;
	font-family: var(--bd-display);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.015em;
	color: var(--bd-ink);
	text-wrap: balance;
}

body.bd-theme h1 { font-size: clamp(2.35rem, 6.2vw, 4.6rem); }
body.bd-theme h2 { font-size: clamp(1.85rem, 4vw, 3rem); }
body.bd-theme h3 { font-size: clamp(1.2rem, 2.1vw, 1.6rem); }
body.bd-theme h4 { font-size: 1.05rem; }

/* (0,1,1) for the same reason as the headings and links above. At (0,1,2) this
   outranked `.bd-ctaband p`, so the call-to-action band's supporting line was
   painted in body ink on the band's own colour. */
:where(body.bd-theme) p { margin: 0 0 1.1em; }
:where(body.bd-theme) p:last-child { margin-bottom: 0; }

/* (0,1,1) for the same reason as the headings above: components such as
   .bd-post__title a, .bd-legalnav__list a and .bd-social__list a set their own
   link colours and must be able to win. */
:where(body.bd-theme) a {
	color: var(--bd-link);
	text-decoration-color: rgba(99, 102, 241, .35);
	text-underline-offset: .18em;
	transition: color .18s var(--bd-ease), text-decoration-color .18s var(--bd-ease);
}

:where(body.bd-theme) a:hover,
:where(body.bd-theme) a:focus { color: var(--bd-link-hover); text-decoration-color: currentColor; }

body.bd-theme strong { font-weight: 600; }

/* Accessible, always-visible focus ring */
body.bd-theme :focus-visible {
	outline: 2.5px solid var(--bd-peri);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   4. SKIP LINK
   -------------------------------------------------------------------------- */
.bd-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: .85rem 1.4rem;
	background: var(--bd-ink);
	color: var(--bd-white);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--bd-radius-sm) 0;
}
.bd-skip:focus {
	left: 0;
	color: var(--bd-white);
	outline-offset: 0;
}

/* --------------------------------------------------------------------------
   5. UTILITIES
   -------------------------------------------------------------------------- */
.bd-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bd-icon { flex: 0 0 auto; }

.bd-grad-text {
	background: var(--bd-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   Three variants only:

     .bd-btn--solid  primary — gradient fill, for the single most important
                     action in a section
     .bd-btn--outline  secondary — solid white with a strong border, for the
                     paired alternative and for buttons on cards
     .bd-btn--link   tertiary — bare text with an arrow, for low-emphasis
                     actions such as "read more"

   Contrast: white on the gradient fill is >= 3.4:1 at every stop (WCAG AA for
   large text and UI components); --bd-ink on white is 17:1.
   -------------------------------------------------------------------------- */
.bd-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .82rem 1.55rem;
	border: 1.5px solid transparent;
	border-radius: var(--bd-radius-pill);
	background: transparent;
	color: var(--bd-ink);
	font-family: var(--bd-body);
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	transition: background-color .24s var(--bd-ease),
	            border-color .24s var(--bd-ease),
	            color .24s var(--bd-ease),
	            box-shadow .24s var(--bd-ease),
	            transform .24s var(--bd-ease);
}

.bd-btn .bd-icon {
	flex: 0 0 auto;
	transition: transform .24s var(--bd-ease);
}

/* --- Primary: gradient fill --------------------------------------------- *
 * .bd-btn carries a 1.5px transparent border so that the solid and outline
 * variants share one box model. With the gradient painted against the border
 * box, that transparent ring becomes a seam: Chromium resolves the rounded
 * corner by blending the gradient's magenta end stop with the edge, which
 * leaves a thin magenta fringe along the outside of the pill.
 *
 * background-clip: padding-box stops the fill at the padding edge, so nothing
 * is painted beneath the transparent border and the rounded corner antialiases
 * cleanly. Measured at 8x device scale, the fringe was 8 device pixels of
 * rgb(199, 49, 139) — closer to the magenta stop than to the cyan one — and is
 * zero after the change. The gradient still covers the full padding box, so the
 * pill looks identical apart from the artefact.
 *
 * background-origin stays at padding-box (its initial value), which is what
 * keeps the 170% hover sweep identical with the smaller painting area.
 * ------------------------------------------------------------------------ */
.bd-btn--solid {
	/* --bd-grad-readable, not --bd-grad: the label is white and sits directly on
	   this fill, so every stop has to clear 4.5:1 against white. The bright
	   gradient's cyan start is 2.14:1. */
	background-image: var(--bd-grad-readable);
	background-clip: padding-box;
	background-size: 170% 170%;
	background-position: 0% 50%;
	color: var(--bd-white);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), var(--bd-shadow);
	text-shadow: 0 1px 2px rgba(49, 10, 60, .22);
}

.bd-btn--solid:hover,
.bd-btn--solid:focus-visible {
	color: var(--bd-white);
	background-position: 100% 50%;
	transform: translateY(-2px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 18px 38px -14px rgba(219, 39, 119, .5);
}

.bd-btn--solid:hover .bd-icon { transform: translateX(3px); }

/* --- Secondary: solid white with a strong border ------------------------ */
.bd-btn--outline,
.bd-btn--ghost {
	background: var(--bd-white);
	border-color: var(--bd-line-mid);
	color: var(--bd-ink);
	box-shadow: var(--bd-shadow-sm);
}

.bd-btn--outline:hover,
.bd-btn--outline:focus-visible,
.bd-btn--ghost:hover,
.bd-btn--ghost:focus-visible {
	background: var(--bd-blush);
	border-color: var(--bd-magenta);
	color: var(--bd-magenta);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -16px rgba(219, 39, 119, .42);
}

.bd-btn--outline:hover .bd-icon,
.bd-btn--ghost:hover .bd-icon { transform: translateX(3px); }

/* --- Tertiary: bare text with a moving arrow ---------------------------- */
.bd-btn--link {
	padding: .4rem 0;
	gap: .45rem;
	border-radius: 0;
	color: var(--bd-link);
	overflow: visible;
}

.bd-btn--link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s var(--bd-ease);
}

.bd-btn--link:hover { color: var(--bd-link-hover); transform: none; }
.bd-btn--link:hover::after { transform: scaleX(1); }

/* --- Small: dense contexts such as the footer --------------------------- */
.bd-btn--small {
	padding: .62rem 1.15rem;
	font-size: .72rem;
	letter-spacing: .09em;
	gap: .45rem;
}

/* --- Layout helpers ----------------------------------------------------- */
.bd-btn--block { width: 100%; }

/* In-page navigation is driven by script, so these targets carry no href and
   would otherwise not advertise themselves as clickable or show a hand. */
.bd-nav__item a[data-bd-target],
.bd-btn[data-bd-target] { cursor: pointer; }

/* The script moves focus to the section it scrolls to, which is what keeps a
   keyboard user in sync with the viewport. A section is not normally
   focusable, so suppress the ring there — the movement is the feedback. */
.bd-section:focus,
.bd-section:focus-visible { outline: none; }

/* Card footers: keep the two plan CTAs aligned on a common baseline even when
   the feature lists above them differ in length. */
.bd-plan .bd-btn,
.bd-care .bd-btn { width: 100%; }

/* --- Keyboard focus ----------------------------------------------------- */
.bd-btn:focus-visible {
	outline: 2.5px solid var(--bd-indigo);
	outline-offset: 3px;
}

/* --- Colour safety net -------------------------------------------------- *
 * A parent theme, a plugin or a WordPress palette can each inject a later
 * `a { color: … }` rule and repaint every button label. These selectors weigh
 * an element plus a class, so they outrank a bare element selector no matter
 * what loads after this file — the variant colour always wins.
 * ------------------------------------------------------------------------ */
body.bd-theme a.bd-btn { text-decoration: none; }

body.bd-theme a.bd-btn--solid,
body.bd-theme button.bd-btn--solid { color: var(--bd-white); }

/*
 * Outline and ghost buttons are only dark-inked on a LIGHT surface.
 *
 * The dark surfaces — `.bd-ctaband` and `.bd-footer` in layout.css — carry their
 * own colour at (0,2,1), one step above this rule, so they win. Anything that
 * pushes this default to (0,3,0) or higher will tie with them and, because this
 * file loads first, silently win instead: the ghost button's white label gets
 * overpainted with body ink and renders as an empty pill on the dark band.
 */
/*
 * The wrapper is `:where()`, which contributes nothing to specificity. That is
 * the point: this default lands at (0,2,0), comfortably above the parent
 * theme's bare `a { color }` rule that this safety net exists to beat, while
 * sitting BELOW the dark-surface overrides in layout.css at (0,2,1).
 *
 * Raising it instead — to `main.bd-main a.bd-btn--ghost` at (0,3,1) — tied
 * with those overrides and, because this file loads first, silently won: the
 * ghost button on the dark CTA band and footer came out dark-on-dark and read
 * as an empty pill.
 */
:where(body.bd-theme) a.bd-btn--outline,
:where(body.bd-theme) a.bd-btn--ghost,
:where(body.bd-theme) button.bd-btn--outline,
:where(body.bd-theme) button.bd-btn--ghost { color: var(--bd-ink); }

:where(body.bd-theme) a.bd-btn--outline:hover,
:where(body.bd-theme) a.bd-btn--outline:focus-visible,
:where(body.bd-theme) a.bd-btn--ghost:hover,
:where(body.bd-theme) a.bd-btn--ghost:focus-visible { color: var(--bd-magenta); }

body.bd-theme a.bd-btn--link { color: var(--bd-link); }

/* --------------------------------------------------------------------------
   7. LISTS
   -------------------------------------------------------------------------- */
.bd-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .55rem;
}

.bd-list li {
	position: relative;
	padding-left: 1.7rem;
	color: var(--bd-ink-soft);
	font-size: .95rem;
	line-height: 1.6;
}

.bd-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	background: var(--bd-grad);
}

.bd-list--roomy { gap: .9rem; }
.bd-list--roomy li { padding-left: 1.9rem; }

/* --------------------------------------------------------------------------
   8. RICH TEXT (editor content)
   -------------------------------------------------------------------------- */
.bd-rich > * + * { margin-top: 1.05em; }

.bd-rich ul,
.bd-rich ol {
	margin: 0 0 1.1em;
	padding-left: 1.35rem;
	color: var(--bd-ink-soft);
	display: grid;
	gap: .45rem;
}

.bd-rich blockquote {
	margin: 1.6em 0;
	padding: .4rem 0 .4rem 1.5rem;
	border-left: 3px solid;
	border-image: var(--bd-grad) 1;
	font-family: var(--bd-display);
	font-size: 1.28em;
	font-style: italic;
	color: var(--bd-ink);
}

.bd-rich code {
	font-family: var(--bd-mono);
	font-size: .88em;
	padding: .12em .42em;
	border-radius: 6px;
	background: var(--bd-lilac);
	color: var(--bd-accent-text);
}

.bd-rich img { border-radius: var(--bd-radius); }

.bd-rich table {
	width: 100%;
	border-collapse: collapse;
	font-size: .94rem;
}
.bd-rich th,
.bd-rich td {
	padding: .7rem .9rem;
	border-bottom: 1px solid var(--bd-line);
	text-align: left;
}

/* --------------------------------------------------------------------------
   9. FORMS
   -------------------------------------------------------------------------- */
/* Two short fields per row on wide screens keeps the enquiry form compact.
   Anything taller (the textarea) spans the full width. */
.bd-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .85rem 1.05rem;
	align-items: start;
}

.bd-form__row {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin: 0;
	min-width: 0;
}

/* Full-width rows, and the footer row that carries the button. */
.bd-form__row--full,
.bd-form__row:has(textarea),
.bd-form__footer > .bd-form__note {
	grid-column: 1 / -1;
}

.bd-form label {
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--bd-ink-soft);
}

.bd-form input[type="text"],
.bd-form input[type="email"],
.bd-form input[type="tel"],
.bd-form input[type="url"],
.bd-form select,
.bd-form textarea {
	width: 100%;
	padding: .66rem .85rem;
	border: 1.5px solid var(--bd-line);
	border-radius: var(--bd-radius-sm);
	background: var(--bd-white);
	color: var(--bd-ink);
	font-family: var(--bd-body);
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color .2s var(--bd-ease), box-shadow .2s var(--bd-ease);
	-webkit-appearance: none;
	appearance: none;
}

.bd-form select {
	background-image: linear-gradient(45deg, transparent 50%, var(--bd-peri) 50%),
	                  linear-gradient(135deg, var(--bd-peri) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.6rem;
}

.bd-form textarea { resize: vertical; min-height: 88px; }

.bd-form input:focus,
.bd-form select:focus,
.bd-form textarea:focus {
	outline: none;
	border-color: var(--bd-peri);
	box-shadow: 0 0 0 4px rgba(99, 102, 241, .13);
}

.bd-form .bd-invalid {
	border-color: var(--bd-magenta);
	box-shadow: 0 0 0 4px rgba(219, 39, 119, .12);
}

/* Submit button and status share one row so the form ends level. */
.bd-form__footer {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .65rem 1.1rem;
	margin-top: .1rem;
}

.bd-form__footer .bd-form__status { flex: 1 1 12rem; }

.bd-form__status {
	margin: 0;
	min-height: 1.2rem;
	font-size: .88rem;
	font-weight: 500;
}
.bd-form__status.is-ok    { color: #047857; }
.bd-form__status.is-error { color: var(--bd-magenta); }

/* Placeholder styling */
.bd-form ::placeholder { color: var(--bd-ink-faint); opacity: 1; }

/* Phones fall back to a single column so nothing is cramped. */
@media (max-width: 620px) {
	.bd-form { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   10. CONTACT FORM 7 / plugin forms inherit the look
   -------------------------------------------------------------------------- */
.bd-form--embed .wpcf7-form p,
.bd-form--embed .contact-form label { margin: 0 0 .35rem; }

.bd-form--embed input:not([type="submit"]),
.bd-form--embed textarea,
.bd-form--embed select {
	width: 100%;
	padding: .88rem 1rem;
	border: 1.5px solid var(--bd-line);
	border-radius: var(--bd-radius-sm);
	background: var(--bd-white);
	font-family: var(--bd-body);
	font-size: 1rem;
}

.bd-form--embed input[type="submit"],
.bd-form--embed button[type="submit"] {
	padding: .92rem 1.7rem;
	border: 0;
	border-radius: var(--bd-radius-pill);
	background: var(--bd-grad);
	color: var(--bd-white);
	font-family: var(--bd-body);
	font-size: .92rem;
	font-weight: 500;
	letter-spacing: .035em;
	text-transform: uppercase;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   11. MOTION SAFETY
   Everything stays fully visible when motion is reduced or JS is absent.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Before the reveal script runs, nothing is hidden — content is visible by
   default so crawlers and no-JS visitors always see the full page. The script
   adds .bd-js to <html>, and only then do reveal animations apply. */
.bd-reveal { opacity: 1; }

html.bd-js .bd-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s var(--bd-ease-out), transform .7s var(--bd-ease-out);
	will-change: opacity, transform;
}

html.bd-js .bd-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html.bd-js .bd-reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   12. MOBILE DRAWER — lock background scrolling while open
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	/* Scrolling is locked only while the drawer is open. The script adds and
	   removes this class, and it removes it on resize, on Escape and on every
	   link tap, so the page can never be left stuck. */
	body.bd-nav-open {
		overflow: hidden;
		overscroll-behavior: none;
	}
}

/* --------------------------------------------------------------------------
   13. TILE / GALLERY IMAGES (optional post thumbnails)
   -------------------------------------------------------------------------- */
.bd-tile-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--bd-radius);
}