/**
 * ONE WIDI – Custom front-end styles.
 *
 * Supplements theme.json with component-level styles.
 * Brand: Gold (#C08A2E) / Ink (#0F0E0C) / Ivory (#F6F3EC).
 *
 * @package OneWidi
 * @since   1.0.0
 */

/* ----------------------------------------------------------------
 * 1. Skip Link
 * -------------------------------------------------------------- */
.skip-link {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

.skip-link:focus {
	background-color: var(--wp--preset--color--ivory);
	clip: auto !important;
	display: block;
	font-size: 1rem;
	font-weight: 600;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 0.75rem 1.5rem;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	color: var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--border-radius--full);
}

/* ----------------------------------------------------------------
 * 2. Buttons – secondary (outline) variant
 * -------------------------------------------------------------- */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--gold);
	border: 1.5px solid var(--wp--preset--color--gold);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--white);
}

/* ----------------------------------------------------------------
 * 3. Section spacing & backgrounds
 * -------------------------------------------------------------- */
.one-section {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}

.one-section--ivory {
	background-color: var(--wp--preset--color--ivory);
}

.one-section--navy {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* ----------------------------------------------------------------
 * 4. Newsletter form
 * -------------------------------------------------------------- */
.one-newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	align-items: stretch;
}

.one-newsletter-form__fields {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	width: 100%;
}

.one-newsletter-form__field-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

/* Shared input styles – name, company, email */
.one-newsletter-form input[type="text"],
.one-newsletter-form input[type="email"] {
	flex: 1 1 200px;
	padding: 0.75rem 1.25rem;
	border: 1.5px solid var(--wp--preset--color--ink-muted);
	border-radius: var(--wp--custom--border-radius--full);
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--medium);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	transition: border-color 0.2s ease;
}

.one-newsletter-form input[type="text"]:focus,
.one-newsletter-form input[type="email"]:focus {
	outline: none;
	border-color: var(--wp--preset--color--gold);
	box-shadow: 0 0 0 2px rgba(192, 138, 46, 0.15);
}

.one-newsletter-form input[type="text"]::placeholder,
.one-newsletter-form input[type="email"]::placeholder {
	color: var(--wp--preset--color--ink-muted);
	opacity: 0.6;
}

/* Email field needs wider flex-basis (shares row with button) */
.one-newsletter-form input[type="email"] {
	flex-basis: 280px;
}

.one-newsletter-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

.one-newsletter-form button[type="submit"] {
	flex: 0 0 auto;
	padding: 0.75rem 2rem;
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: var(--wp--custom--border-radius--full);
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.one-newsletter-form button[type="submit"]:hover {
	background-color: var(--wp--preset--color--gold-light);
}

.one-newsletter-form button[type="submit"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Honeypot — must be invisible to users but accessible to bots */
.one-newsletter-form .one-hp {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	width: 0;
	overflow: hidden;
}

/* Form feedback messages */
.one-newsletter-msg {
	width: 100%;
	padding: 0.75rem 1rem;
	border-radius: var(--wp--custom--border-radius--small);
	font-size: var(--wp--preset--font-size--small);
	margin-top: var(--wp--preset--spacing--20);
}

.one-newsletter-msg--success {
	background-color: #e8f5e9;
	color: #2e7d32;
}

.one-newsletter-msg--error {
	background-color: #fce4ec;
	color: #c62828;
}

/* ----------------------------------------------------------------
 * 5. Gold accent bar (decorative heading underline)
 * -------------------------------------------------------------- */
.one-accent-bar {
	width: 48px;
	height: 3px;
	background-color: var(--wp--preset--color--gold);
	border-radius: 2px;
	margin-bottom: var(--wp--preset--spacing--40);
}

/* ----------------------------------------------------------------
 * 6. Chip label (gold eyebrow with trailing line)
 * -------------------------------------------------------------- */
.one-chip {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	line-height: 1;
}

.one-chip::after {
	content: "";
	display: inline-block;
	width: 32px;
	height: 1px;
	background-color: var(--wp--preset--color--gold);
}

/* Dark-bg variant (e.g. ink, navy) */
.one-chip--dark {
	color: var(--wp--preset--color--gold-light, var(--wp--preset--color--gold));
}

.one-chip--dark::after {
	background-color: var(--wp--preset--color--gold-light, var(--wp--preset--color--gold));
}

/* ----------------------------------------------------------------
 * 7. Gold bar (heading underline — 3px width)
 * -------------------------------------------------------------- */
.one-gold-bar {
	width: 48px;
	height: 3px;
	background-color: var(--wp--preset--color--gold);
	border-radius: 2px;
	margin-top: var(--wp--preset--spacing--30);
}

/* ----------------------------------------------------------------
 * 8. Hero – gold left border
 * -------------------------------------------------------------- */
.one-hero--border-left {
	border-left: 5px solid var(--wp--preset--color--gold);
}

/* ----------------------------------------------------------------
 * 9. Hero metadata strip (4-column key/value grid)
 * -------------------------------------------------------------- */
.one-hero-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--wp--preset--color--ink-muted);
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
}

.one-hero-strip__item {
	padding-right: var(--wp--preset--spacing--30);
}

.one-hero-strip__key {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	margin-bottom: 4px;
}

.one-hero-strip__val {
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 600px) {
	.one-hero-strip {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--preset--spacing--30);
	}

	/* Stack newsletter form fields vertically on mobile */
	.one-newsletter-form__row {
		flex-direction: column;
	}

	.one-newsletter-form__row input[type="email"],
	.one-newsletter-form__row .one-newsletter-form__submit {
		width: 100%;
		flex: 0 0 auto;
	}

	.one-newsletter-form__field-group {
		flex-direction: column;
	}

	.one-newsletter-form__field-group input[type="text"] {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* ----------------------------------------------------------------
 * 10. Ink background section
 * -------------------------------------------------------------- */
.one-section--ink {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ivory);
}

/* Newsletter form inside dark sections (ink / navy) */
.one-section--ink .one-newsletter-form input[type="text"],
.one-section--ink .one-newsletter-form input[type="email"],
.one-section--navy .one-newsletter-form input[type="text"],
.one-section--navy .one-newsletter-form input[type="email"] {
	border-color: rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.06);
	color: var(--wp--preset--color--ivory);
}

.one-section--ink .one-newsletter-form input[type="text"]::placeholder,
.one-section--ink .one-newsletter-form input[type="email"]::placeholder,
.one-section--navy .one-newsletter-form input[type="text"]::placeholder,
.one-section--navy .one-newsletter-form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.one-section--ink .one-newsletter-form input[type="text"]:focus,
.one-section--ink .one-newsletter-form input[type="email"]:focus,
.one-section--navy .one-newsletter-form input[type="text"]:focus,
.one-section--navy .one-newsletter-form input[type="email"]:focus {
	border-color: var(--wp--preset--color--gold);
	background: rgba(255, 255, 255, 0.1);
}

/* ----------------------------------------------------------------
 * 11. Entrance animation (subtle fade-up)
 * -------------------------------------------------------------- */
@keyframes one-fadeUp {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.one-animate-up {
	animation: one-fadeUp 0.6s ease both;
}

/* ----------------------------------------------------------------
 * 12. Smooth scroll
 * -------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

/* ----------------------------------------------------------------
 * 13. Selection color
 * -------------------------------------------------------------- */
::selection {
	background-color: var(--wp--preset--color--ivory);
	color: var(--wp--preset--color--ink);
}

/* ----------------------------------------------------------------
 * 14. Demo Banner
 * -------------------------------------------------------------- */
.one-demo-banner {
	background-color: #D4764E;
	color: #fff;
	padding: 0.4rem 1rem;
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	text-align: center;
	width: 100%;
}

.one-demo-banner p {
	margin: 0;
	color: inherit;
}

.one-demo-banner strong {
	font-weight: 700;
}

/* ----------------------------------------------------------------
 * 15. Variant B – Bold Hero (full viewport)
 * -------------------------------------------------------------- */
.one-hero-bold .one-newsletter-form {
	justify-content: center;
}

.one-hero-bold .one-newsletter-form input[type="email"] {
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.08);
	color: var(--wp--preset--color--white);
}

.one-hero-bold .one-newsletter-form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.one-hero-bold .one-newsletter-form input[type="email"]:focus {
	border-color: var(--wp--preset--color--gold);
	background: rgba(255, 255, 255, 0.12);
}

/* ----------------------------------------------------------------
 * 16. Variant C – Editorial dot-grid accent
 * -------------------------------------------------------------- */
.one-dot-grid-accent img {
	max-width: 180px;
	opacity: 0.25;
	margin-left: auto;
}

/* Hero variant: fill the entire right column */
.one-dot-grid-accent--hero {
	position: relative;
	height: 100%;
	min-height: 280px;
	overflow: hidden;
}

.one-dot-grid-accent--hero img {
	max-width: none;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0.22;
}

.one-dot-grid-column {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ----------------------------------------------------------------
 * 17. Variant C – Gold banner top border
 * -------------------------------------------------------------- */
.one-section--gold-banner .one-newsletter-form,
.one-section--navy .one-newsletter-form {
	justify-content: center;
}

/* ----------------------------------------------------------------
 * 18. Variant switcher nav (demo review)
 * -------------------------------------------------------------- */
.one-variant-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: var(--wp--preset--color--ink, #0F0E0C);
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	position: sticky;
	top: 0;
	z-index: 9999;
}

.one-variant-nav__label {
	color: var(--wp--preset--color--ink-muted, #3A3835);
	font-weight: 600;
	margin-right: 0.25rem;
}

.one-variant-nav__link {
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	padding: 0.3rem 0.75rem;
	border-radius: 4px;
	font-weight: 500;
	transition: color 0.15s, background-color 0.15s;
}

.one-variant-nav__link:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.one-variant-nav__link--active {
	color: var(--wp--preset--color--ink, #0F0E0C);
	background: var(--wp--preset--color--gold, #C08A2E);
	font-weight: 600;
}

.one-variant-nav__link--active:hover {
	color: var(--wp--preset--color--ink, #0F0E0C);
	background: var(--wp--preset--color--gold-light, #D4A94A);
}

/* ----------------------------------------------------------------
 * 19. Footer branding lockup
 * -------------------------------------------------------------- */
.one-footer-brand {
	display: flex;
	align-items: center;
	gap: 18px;
}

.one-footer-dots {
	display: grid;
	grid-template-columns: repeat(3, 6px);
	gap: 4px;
	flex-shrink: 0;
}

.one-fd {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold, #C08A2E);
}

.one-fd--d {
	opacity: 0.4;
}

.one-fd--dd {
	opacity: 0.18;
}

.one-footer-lockup__name {
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-weight: 700;
	font-size: 1.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory, #F6F3EC);
	line-height: 1;
}

.one-footer-lockup__bar {
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--gold, #C08A2E);
	margin: 8px 0 6px;
}

.one-footer-lockup__sub {
	font-size: 0.5625rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-50, #7A7870);
}

/* ================================================================
 * PREMIUM DESIGN ENHANCEMENTS (v2.1.0)
 * Documented for selective rollback — each section is independent.
 * ================================================================ */

/* ----------------------------------------------------------------
 * 20. Scroll-reveal animation
 * Elements with .one-reveal fade up when they enter the viewport.
 * Applied via IntersectionObserver (scroll-reveal.js).
 * -------------------------------------------------------------- */
.one-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.one-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger children: 2nd, 3rd, 4th child get progressive delay */
.one-reveal-stagger > .one-reveal:nth-child(2) { transition-delay: 0.1s; }
.one-reveal-stagger > .one-reveal:nth-child(3) { transition-delay: 0.2s; }
.one-reveal-stagger > .one-reveal:nth-child(4) { transition-delay: 0.25s; }
.one-reveal-stagger > .one-reveal:nth-child(5) { transition-delay: 0.3s; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.one-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ----------------------------------------------------------------
 * 21. Card elevation (Variant B feature cards)
 * Subtle shadow + gentle hover lift. Not clickable-looking —
 * uses low-contrast shadow, no pointer change.
 * -------------------------------------------------------------- */
.one-feature-card {
	box-shadow: 0 1px 3px rgba(15, 14, 12, 0.04),
	            0 4px 16px rgba(15, 14, 12, 0.06);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.one-feature-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 6px rgba(15, 14, 12, 0.06),
	            0 8px 28px rgba(15, 14, 12, 0.09);
}

/* ----------------------------------------------------------------
 * 22. Button micro-interaction
 * CTA buttons get subtle lift + shadow on hover.
 * -------------------------------------------------------------- */
.wp-block-button.is-style-fill .wp-block-button__link {
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.2s ease;
	box-shadow: 0 2px 8px rgba(192, 138, 46, 0.15);
}

.wp-block-button.is-style-fill .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(192, 138, 46, 0.25);
}

.wp-block-button.is-style-fill .wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: 0 1px 4px rgba(192, 138, 46, 0.15);
}

/* Also apply to newsletter submit button */
.one-newsletter-form button[type="submit"] {
	box-shadow: 0 2px 8px rgba(192, 138, 46, 0.15);
}

.one-newsletter-form button[type="submit"]:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(192, 138, 46, 0.25);
}

/* ----------------------------------------------------------------
 * 23. Gold number accent (Variant C numbered items)
 * Subtle text-shadow gives depth to large gold numbers.
 * -------------------------------------------------------------- */
.one-numbered-item .has-gold-color {
	text-shadow: 0 2px 12px rgba(192, 138, 46, 0.18);
	transition: text-shadow 0.3s ease;
}

/* ----------------------------------------------------------------
 * 24. Gold bar & chip line grow-in on reveal
 * The gold bar and chip ::after line animate width on scroll.
 * -------------------------------------------------------------- */
.one-reveal .one-gold-bar,
.one-reveal .one-accent-bar {
	width: 0;
	transition: width 0.6s 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.one-reveal.is-visible .one-gold-bar,
.one-reveal.is-visible .one-accent-bar {
	width: 48px;
}

.one-reveal .one-chip::after {
	width: 0;
	transition: width 0.5s 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.one-reveal.is-visible .one-chip::after {
	width: 32px;
}

/* ----------------------------------------------------------------
 * 25. Dark section inner depth
 * Subtle top/bottom vignette on navy & ink sections for a
 * premium layered feel.
 * -------------------------------------------------------------- */
.one-section--ink,
.one-section--navy,
.has-navy-background-color {
	position: relative;
}

.one-section--ink::before,
.has-navy-background-color::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, transparent 18%),
		linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0%, transparent 15%);
	z-index: 0;
}

/* Ensure content sits above the vignette */
.one-section--ink > *,
.has-navy-background-color > * {
	position: relative;
	z-index: 1;
}

/* ----------------------------------------------------------------
 * 26. Dot-grid wave animation
 * Wave of light sweeps from top-left to bottom-right across
 * the 3×3 grid. Plays once on hero load (via .is-visible) and
 * on hover for footer / small instances.
 * Diagonal position:  [0]  [1]  [2]
 *                     [1]  [2]  [3]
 *                     [2]  [3]  [4]
 * -------------------------------------------------------------- */
@keyframes one-dotWave {
	0%   { opacity: var(--fd-base, 1); }
	30%  { opacity: 1; }
	60%  { opacity: var(--fd-base, 1); }
	100% { opacity: var(--fd-base, 1); }
}

/* ---- Hero large dot-grid (Variant C) – play once on reveal ---- */
.one-dot-grid-hero {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, 3vw, 28px);
	width: 100%;
	height: 100%;
	padding: clamp(24px, 5vw, 64px);
	align-content: center;
}

.one-dot-grid-hero .one-gd {
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--gold, #C08A2E);
	opacity: var(--fd-base, 1);
	will-change: opacity;
}

/* Base opacities matching the SVG gradient – top-left bright, bottom-right faint */
.one-dot-grid-hero .one-gd:nth-child(1) { --fd-base: 1; }
.one-dot-grid-hero .one-gd:nth-child(2) { --fd-base: 0.55; }
.one-dot-grid-hero .one-gd:nth-child(3) { --fd-base: 0.28; }
.one-dot-grid-hero .one-gd:nth-child(4) { --fd-base: 0.5; }
.one-dot-grid-hero .one-gd:nth-child(5) { --fd-base: 0.28; }
.one-dot-grid-hero .one-gd:nth-child(6) { --fd-base: 0.12; }
.one-dot-grid-hero .one-gd:nth-child(7) { --fd-base: 0.25; }
.one-dot-grid-hero .one-gd:nth-child(8) { --fd-base: 0.12; }
.one-dot-grid-hero .one-gd:nth-child(9) { --fd-base: 0.06; }

/* Activate wave on scroll-reveal */
.one-reveal.is-visible .one-dot-grid-hero .one-gd {
	animation: one-dotWave 1.2s ease-out forwards;
}

/* Stagger by diagonal position */
.one-reveal.is-visible .one-dot-grid-hero .one-gd:nth-child(1) { animation-delay: 0s; }
.one-reveal.is-visible .one-dot-grid-hero .one-gd:nth-child(2),
.one-reveal.is-visible .one-dot-grid-hero .one-gd:nth-child(4) { animation-delay: 0.12s; }
.one-reveal.is-visible .one-dot-grid-hero .one-gd:nth-child(3),
.one-reveal.is-visible .one-dot-grid-hero .one-gd:nth-child(5),
.one-reveal.is-visible .one-dot-grid-hero .one-gd:nth-child(7) { animation-delay: 0.24s; }
.one-reveal.is-visible .one-dot-grid-hero .one-gd:nth-child(6),
.one-reveal.is-visible .one-dot-grid-hero .one-gd:nth-child(8) { animation-delay: 0.36s; }
.one-reveal.is-visible .one-dot-grid-hero .one-gd:nth-child(9) { animation-delay: 0.48s; }

/* ---- Footer small dot-grid – wave on hover ---- */
.one-footer-dots .one-fd {
	transition: opacity 0.3s ease;
}

.one-footer-dots:hover .one-fd {
	animation: one-dotWave 1s ease-out forwards;
}

.one-footer-dots:hover .one-fd:nth-child(1) { --fd-base: 1;    animation-delay: 0s; }
.one-footer-dots:hover .one-fd:nth-child(2) { --fd-base: 0.4;  animation-delay: 0.08s; }
.one-footer-dots:hover .one-fd:nth-child(3) { --fd-base: 0.18; animation-delay: 0.16s; }
.one-footer-dots:hover .one-fd:nth-child(4) { --fd-base: 0.4;  animation-delay: 0.08s; }
.one-footer-dots:hover .one-fd:nth-child(5) { --fd-base: 0.18; animation-delay: 0.16s; }
.one-footer-dots:hover .one-fd:nth-child(6) { --fd-base: 0.08; animation-delay: 0.24s; }
.one-footer-dots:hover .one-fd:nth-child(7) { --fd-base: 0.18; animation-delay: 0.16s; }
.one-footer-dots:hover .one-fd:nth-child(8) { --fd-base: 0.08; animation-delay: 0.24s; }
.one-footer-dots:hover .one-fd:nth-child(9) { --fd-base: 0.04; animation-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
	.one-dot-grid-hero .one-gd,
	.one-footer-dots .one-fd {
		animation: none !important;
	}
}

/* ----------------------------------------------------------------
 * 27. Newsletter input enhanced focus
 * Stronger glow ring on focus for premium feel.
 * -------------------------------------------------------------- */
.one-newsletter-form input[type="email"]:focus {
	box-shadow: 0 0 0 3px rgba(192, 138, 46, 0.12),
	            0 2px 8px rgba(192, 138, 46, 0.08);
}

/* ----------------------------------------------------------------
 * 28. Heading letter-spacing refinement
 * Tighter tracking on large headings for editorial premium feel.
 * -------------------------------------------------------------- */
.one-hero h1,
.one-hero-bold h1 {
	letter-spacing: -0.025em;
}

/* ----------------------------------------------------------------
 * 29. Header dot-grid logo – small 3×3, hover wave
 * Replaces static SVG with animated HTML dots.
 * -------------------------------------------------------------- */
.one-header-logo {
	display: inline-flex;
	flex-shrink: 0;
	text-decoration: none;
}

.one-header-dots {
	display: grid;
	grid-template-columns: repeat(3, 7px);
	gap: 3px;
	width: 28px;
	height: 28px;
	align-content: center;
	justify-content: center;
}

.one-hd {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold, #C08A2E);
	opacity: 1;
	will-change: opacity;
}

.one-hd--d {
	opacity: 0.4;
}

.one-hd--dd {
	opacity: 0.18;
}

.one-header-logo:hover .one-hd {
	animation: one-dotWave 1s ease-out forwards;
}

.one-header-logo:hover .one-hd:nth-child(1) { --fd-base: 1;    animation-delay: 0s; }
.one-header-logo:hover .one-hd:nth-child(2) { --fd-base: 0.4;  animation-delay: 0.08s; }
.one-header-logo:hover .one-hd:nth-child(3) { --fd-base: 0.18; animation-delay: 0.16s; }
.one-header-logo:hover .one-hd:nth-child(4) { --fd-base: 0.4;  animation-delay: 0.08s; }
.one-header-logo:hover .one-hd:nth-child(5) { --fd-base: 0.18; animation-delay: 0.16s; }
.one-header-logo:hover .one-hd:nth-child(6) { --fd-base: 0.12; animation-delay: 0.24s; }
.one-header-logo:hover .one-hd:nth-child(7) { --fd-base: 0.18; animation-delay: 0.16s; }
.one-header-logo:hover .one-hd:nth-child(8) { --fd-base: 0.12; animation-delay: 0.24s; }
.one-header-logo:hover .one-hd:nth-child(9) { --fd-base: 0.06; animation-delay: 0.32s; }

/* ----------------------------------------------------------------
 * 30. Newsletter success dot-grid feedback
 * Small animated 3×3 grid shown inline with the success message.
 * -------------------------------------------------------------- */
.one-newsletter-dots {
	display: inline-grid;
	grid-template-columns: repeat(3, 5px);
	gap: 3px;
	vertical-align: middle;
	margin-right: 8px;
}

.one-nd {
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold, #C08A2E);
	opacity: 0.2;
}

.one-newsletter-dots--active .one-nd {
	animation: one-dotWave 1s ease-out forwards;
}

.one-newsletter-dots--active .one-nd:nth-child(1) { --fd-base: 0.2; animation-delay: 0s; }
.one-newsletter-dots--active .one-nd:nth-child(2) { --fd-base: 0.2; animation-delay: 0.08s; }
.one-newsletter-dots--active .one-nd:nth-child(3) { --fd-base: 0.2; animation-delay: 0.16s; }
.one-newsletter-dots--active .one-nd:nth-child(4) { --fd-base: 0.2; animation-delay: 0.08s; }
.one-newsletter-dots--active .one-nd:nth-child(5) { --fd-base: 0.2; animation-delay: 0.16s; }
.one-newsletter-dots--active .one-nd:nth-child(6) { --fd-base: 0.2; animation-delay: 0.24s; }
.one-newsletter-dots--active .one-nd:nth-child(7) { --fd-base: 0.2; animation-delay: 0.16s; }
.one-newsletter-dots--active .one-nd:nth-child(8) { --fd-base: 0.2; animation-delay: 0.24s; }
.one-newsletter-dots--active .one-nd:nth-child(9) { --fd-base: 0.2; animation-delay: 0.32s; }

/* ----------------------------------------------------------------
 * 31. Splash overlay – first-visit dot-grid animation
 * Full-screen overlay shown once per session, fades out.
 * -------------------------------------------------------------- */
.one-splash {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--ivory, #F6F3EC);
	opacity: 0;
	pointer-events: none;
}

.one-splash--active {
	opacity: 1;
	pointer-events: auto;
}

.one-splash--fade {
	transition: opacity 0.6s ease-out;
	opacity: 0;
	pointer-events: none;
}

.one-splash__dots {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(10px, 3vw, 24px);
	width: clamp(80px, 20vw, 160px);
	height: clamp(80px, 20vw, 160px);
}

.one-sd {
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--gold, #C08A2E);
	opacity: 0.12;
}

.one-splash--active .one-sd {
	animation: one-dotWave 1.2s ease-out forwards;
}

.one-splash--active .one-sd:nth-child(1) { --fd-base: 0.12; animation-delay: 0s; }
.one-splash--active .one-sd:nth-child(2) { --fd-base: 0.12; animation-delay: 0.1s; }
.one-splash--active .one-sd:nth-child(3) { --fd-base: 0.12; animation-delay: 0.2s; }
.one-splash--active .one-sd:nth-child(4) { --fd-base: 0.12; animation-delay: 0.1s; }
.one-splash--active .one-sd:nth-child(5) { --fd-base: 0.12; animation-delay: 0.2s; }
.one-splash--active .one-sd:nth-child(6) { --fd-base: 0.12; animation-delay: 0.3s; }
.one-splash--active .one-sd:nth-child(7) { --fd-base: 0.12; animation-delay: 0.2s; }
.one-splash--active .one-sd:nth-child(8) { --fd-base: 0.12; animation-delay: 0.3s; }
.one-splash--active .one-sd:nth-child(9) { --fd-base: 0.12; animation-delay: 0.4s; }

/* ----------------------------------------------------------------
 * 32. 404 page – looping animated dot-grid
 * Large centered grid with continuous diagonal wave.
 * -------------------------------------------------------------- */
@keyframes one-dotWaveLoop {
	0%   { opacity: var(--fd-base, 0.18); }
	30%  { opacity: 1; }
	60%, 100% { opacity: var(--fd-base, 0.18); }
}

.one-404 {
	text-align: center;
	padding: var(--wp--preset--spacing--60, 3rem) 0;
}

.one-404__dots {
	display: inline-grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(10px, 3vw, 24px);
	width: clamp(100px, 25vw, 180px);
	margin-bottom: var(--wp--preset--spacing--50, 2rem);
}

.one-404__dots .one-gd {
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--gold, #C08A2E);
	opacity: var(--fd-base, 0.18);
	animation: one-dotWaveLoop 2.4s ease-in-out infinite;
}

.one-404__dots .one-gd:nth-child(1) { --fd-base: 1;    animation-delay: 0s; }
.one-404__dots .one-gd:nth-child(2) { --fd-base: 0.55; animation-delay: 0.15s; }
.one-404__dots .one-gd:nth-child(3) { --fd-base: 0.28; animation-delay: 0.3s; }
.one-404__dots .one-gd:nth-child(4) { --fd-base: 0.5;  animation-delay: 0.15s; }
.one-404__dots .one-gd:nth-child(5) { --fd-base: 0.28; animation-delay: 0.3s; }
.one-404__dots .one-gd:nth-child(6) { --fd-base: 0.12; animation-delay: 0.45s; }
.one-404__dots .one-gd:nth-child(7) { --fd-base: 0.25; animation-delay: 0.3s; }
.one-404__dots .one-gd:nth-child(8) { --fd-base: 0.12; animation-delay: 0.45s; }
.one-404__dots .one-gd:nth-child(9) { --fd-base: 0.06; animation-delay: 0.6s; }

.one-404__title {
	font-family: var(--wp--preset--font-family--ibm-plex-sans, 'IBM Plex Sans', sans-serif);
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink, #0F0E0C);
	margin: 0 0 0.75rem;
}

.one-404__text {
	font-size: 1rem;
	color: var(--wp--preset--color--ink-muted, #3A3835);
	margin: 0 0 2rem;
}

.one-404__link {
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold, #C08A2E);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.one-404__link:hover {
	color: var(--wp--preset--color--gold-light, #D4A94A);
}

/* Extend reduced-motion preferences for new animations */
@media (prefers-reduced-motion: reduce) {
	.one-header-logo .one-hd,
	.one-newsletter-dots .one-nd,
	.one-splash .one-sd,
	.one-404__dots .one-gd {
		animation: none !important;
	}

	.one-splash {
		display: none !important;
	}
}