/*
Theme Name: Tmony Conference
Description: A custom block theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tmony-conference
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* WordPress inserts margin-block-start: var(--wp--style--block-gap) between the
   template's top-level sections (header part, main, footer part) — a gap that
   exists even when no markup asks for it. Zero it so sections butt edge-to-edge
   and own their vertical rhythm via padding; this does not affect block gaps
   inside nested layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

:root {
	--c-base: var( --wp--preset--color--base );
	--c-ink: var( --wp--preset--color--contrast );
	--c-ink-soft: var( --wp--preset--color--ink-soft );
	--c-yellow: var( --wp--preset--color--accent-yellow );
	--c-lavender: var( --wp--preset--color--accent-lavender );
	--c-peach: var( --wp--preset--color--accent-peach );
	--c-sky: var( --wp--preset--color--accent-sky );
	--c-paper: var( --wp--preset--color--paper );
	--display-font: var( --wp--preset--font-family--display );
	--body-font: var( --wp--preset--font-family--body );
}

/* === reset === */
body {
	background: var( --c-base );
	overflow-x: hidden;
}

a {
	text-decoration: none;
}

.wp-block-button__link {
	border-radius: 999px;
	text-transform: uppercase;
	font-family: var( --display-font );
	letter-spacing: 0.01em;
	font-size: 0.95rem;
	padding: 1.1em 1.9em;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wp-block-button__link:hover {
	transform: translate( -2px, -2px );
	box-shadow: 4px 4px 0 var( --c-ink );
}

/* === utilities === */
.conferio-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var( --display-font );
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	padding: 0.55em 1.3em;
	border-radius: 999px;
	border: 2px solid var( --c-ink );
}

.conferio-tag {
	display: inline-flex;
	align-items: center;
	font-family: var( --display-font );
	text-transform: uppercase;
	font-size: 0.95rem;
	padding: 0.5em 1.3em;
	border-radius: 999px;
	color: var( --c-ink );
	white-space: nowrap;
}

.conferio-tag.is-yellow { background: var( --c-yellow ); }
.conferio-tag.is-lavender { background: var( --c-lavender ); }
.conferio-tag.is-peach { background: var( --c-peach ); }
.conferio-tag.is-sky { background: var( --c-sky ); }

.conferio-star {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	background: currentColor;
	clip-path: polygon( 50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39% );
}

.is-reveal {
	opacity: 1;
	transform: none;
}

@media ( prefers-reduced-motion: no-preference ) {
	.is-reveal {
		opacity: 0;
		transform: translateY( 28px );
		transition: opacity 0.7s ease, transform 0.7s ease;
	}
	.is-reveal.is-in-view {
		opacity: 1;
		transform: none;
	}
}
/* === header === */
.conferio-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var( --c-base );
	border-bottom: 2px solid var( --c-ink );
}

.conferio-header .wp-block-group {
	flex-wrap: nowrap;
}

.conferio-header .wp-block-site-title a {
	font-family: var( --display-font );
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.25;
	max-width: 20ch;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.conferio-nav {
	font-family: var( --display-font );
	text-transform: uppercase;
	font-size: 0.8rem;
	flex-shrink: 0;
}

.conferio-nav .wp-block-navigation-item a {
	padding: 0.5em 0.6em;
	white-space: nowrap;
}

.conferio-header-cta {
	flex-shrink: 0;
}

.conferio-header-cta .wp-block-button__link {
	padding: 0.7em 1.5em;
	font-size: 0.85rem;
	border: 2px solid var( --c-ink );
	white-space: nowrap;
}
/* === hero === */
.conferio-hero {
	text-align: center;
	position: relative;
}

.conferio-hero-title {
	max-width: 16ch;
	margin: 0.5em auto 0.4em;
	font-size: clamp(2.6rem, 6vw, 4.5rem) !important;
}

.conferio-hero-sub {
	max-width: 46ch;
	margin: 0 auto 2em;
	font-size: 1.15rem;
	color: var( --c-ink-soft );
}

.conferio-hero-buttons {
	margin-bottom: 3.5rem;
}

.conferio-hero-buttons .is-style-outline .wp-block-button__link {
	border: 2px solid var( --c-ink );
	background: transparent;
}

.conferio-countdown {
	gap: 1.25rem;
	flex-wrap: wrap;
}

.conferio-countdown-item {
	background: var( --c-paper );
	border: 2px solid var( --c-ink );
	border-radius: 18px;
	padding: 1rem 1.4rem;
	min-width: 90px;
	gap: 0.15rem;
}

.conferio-countdown-num {
	font-family: var( --display-font );
	font-size: 2rem;
	line-height: 1;
	margin: 0;
}

.conferio-countdown-label {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0;
	color: var( --c-ink-soft );
}
/* === badges-marquee === */
.conferio-tagrow-track {
	gap: 0.9rem;
	row-gap: 0.7rem;
}

.conferio-eyebrow.is-on-dark {
	border-color: var( --c-base );
	color: var( --c-base );
}
/* === about === */
.conferio-about-cols {
	gap: 3rem;
}

.conferio-stat-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.conferio-stat-card {
	border: 2px solid var( --c-ink );
	border-radius: 20px;
	padding: 1.6rem 1.4rem;
	gap: 0.2rem;
}

.conferio-stat-num {
	font-family: var( --display-font );
	font-size: 2rem;
	margin: 0;
	line-height: 1;
	white-space: nowrap;
}

.conferio-stat-label {
	margin: 0;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
/* === schedule === */
.conferio-schedule-cols {
	gap: 2rem;
	margin-top: 3rem;
}

.conferio-day-tag {
	display: inline-flex;
	border-radius: 999px;
	padding: 0.5em 1.2em;
	font-family: var( --display-font );
	text-transform: uppercase;
	font-size: 0.85rem;
	color: var( --c-ink );
	margin-bottom: 1.5rem;
}

.conferio-sched-item {
	flex-direction: column;
	gap: 0.2rem;
	padding: 1.2rem 0;
	border-bottom: 1px solid rgba(247,243,234,0.25);
}

.conferio-sched-time {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --c-yellow );
	margin: 0;
}

.conferio-sched-item h3 {
	margin: 0.2rem 0;
}

.conferio-sched-meta {
	font-size: 0.9rem;
	opacity: 0.75;
	margin: 0;
}
/* === speakers === */
.conferio-speaker-grid {
	gap: 2rem;
	margin-top: 2.5rem;
}

.conferio-speaker-card {
	text-align: center;
}

.conferio-speaker-photo {
	border: 2px solid var( --c-ink );
	border-radius: 24px;
	aspect-ratio: 1;
	margin-bottom: 1rem;
}

.conferio-speaker-initials {
	font-family: var( --display-font );
	font-size: 2.5rem;
	margin: 0;
}

.conferio-speaker-card h3 {
	margin-bottom: 0.2rem;
}

.conferio-speaker-role {
	font-size: 0.9rem;
	color: var( --c-ink-soft );
	margin: 0;
}
/* === tickets === */
.conferio-ticket-grid {
	gap: 2rem;
	margin-top: 2.5rem;
	align-items: stretch;
}

.conferio-ticket-card {
	background: var( --c-ink-soft );
	border-radius: 24px;
	padding: 2.5rem 2rem;
	position: relative;
	text-align: center;
}

.conferio-ticket-card::before,
.conferio-ticket-card::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX( -50% );
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var( --c-ink );
}

.conferio-ticket-card::before { top: -12px; }
.conferio-ticket-card::after { bottom: -12px; }

.conferio-ticket-card.is-featured {
	background: var( --c-ink );
	border: 2px solid var( --c-yellow );
}

.conferio-ticket-badge {
	display: inline-block;
	background: var( --c-yellow );
	color: var( --c-ink );
	border-radius: 999px;
	padding: 0.35em 1em;
	font-size: 0.75rem;
	text-transform: uppercase;
	font-family: var( --display-font );
	margin-bottom: 1rem;
}

.conferio-ticket-name {
	font-family: var( --display-font );
	text-transform: uppercase;
	font-size: 1.3rem;
	margin: 0 0 0.3rem;
}

.conferio-ticket-price {
	font-family: var( --display-font );
	font-size: 3rem;
	margin: 0 0 1.5rem;
	color: var( --c-yellow );
}

.conferio-ticket-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.8rem;
	text-align: left;
	display: inline-block;
}

.conferio-ticket-list li {
	padding: 0.5rem 0;
	border-bottom: 1px dashed rgba(247,243,234,0.35);
	font-size: 0.95rem;
}

.conferio-ticket-list li:last-child {
	border-bottom: none;
}
/* === countdown === */
/* === cta === */
.conferio-cta {
	text-align: center;
}

.conferio-cta-title {
	max-width: 20ch;
	margin: 0 auto 0.5rem;
}

.conferio-cta-sub {
	max-width: 40ch;
	margin: 0 auto 2rem;
}
/* === footer === */
.conferio-footer {
	text-align: center;
}

.conferio-footer-word {
	font-size: clamp(2.5rem, 9vw, 6rem);
	margin: 0 0 1.5rem;
	letter-spacing: -0.01em;
}

.conferio-footer-social {
	gap: 1.2rem;
	margin-bottom: 1.5rem;
}

.conferio-footer-social a {
	color: var( --c-base );
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.conferio-footer-nav {
	justify-content: center;
	margin-bottom: 2rem;
	text-transform: uppercase;
	font-family: var( --display-font );
	font-size: 0.85rem;
}

.conferio-footer-tags {
	gap: 0.7rem;
	row-gap: 0.6rem;
	margin-bottom: 2.5rem;
}

.conferio-footer-email {
	font-family: var( --display-font );
	font-size: clamp(1.8rem, 6vw, 3.2rem);
	text-transform: uppercase;
	opacity: 0.18;
	word-break: break-word;
	margin-bottom: 2rem;
}

.conferio-footer-bottom {
	justify-content: center;
	gap: 0.4rem;
	border-top: 1px solid rgba(247,243,234,0.2);
	padding-top: 1.5rem;
	font-size: 0.85rem;
	opacity: 0.7;
}
/* === responsive === */
@media ( max-width: 782px ) {
	.wp-block-navigation__responsive-container-open {
		color: var( --c-ink );
	}

	.wp-block-navigation__responsive-dialog {
		background: var( --c-ink ) !important;
	}

	.wp-block-navigation__responsive-dialog .wp-block-navigation-item a {
		color: var( --c-base );
		font-family: var( --display-font );
		text-transform: uppercase;
		font-size: 1.4rem;
	}

	.wp-block-navigation__responsive-container-close {
		color: var( --c-base );
	}

	.conferio-hero-title {
		font-size: 2.6rem !important;
	}

	.conferio-about-cols,
	.conferio-schedule-cols,
	.conferio-speaker-grid,
	.conferio-ticket-grid {
		flex-wrap: wrap;
	}

	.conferio-about-cols > .wp-block-column,
	.conferio-schedule-cols > .wp-block-column,
	.conferio-speaker-grid > .wp-block-column,
	.conferio-ticket-grid > .wp-block-column {
		flex-basis: 100% !important;
	}

	.conferio-stat-grid {
		grid-template-columns: 1fr 1fr;
	}
}
/* === motion === */
@media ( prefers-reduced-motion: reduce ) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   ONE-PAGER (Elementor) — Home-02 layout
   ============================================================ */

/* == op-tokens == */

.elementor-page {
	--op-gut: clamp( 1.15rem, 4vw, 2.75rem );
}

.elementor-page {
	background: var( --c-base );
	font-family: var( --body-font );
	color: var( --c-ink );
}

/* Elementor containers: drop only the default BLOCK padding so our sections own
   their vertical rhythm. Inline gutters are restored below — zeroing them made
   boxed content bleed to the viewport edge. */
.elementor-page .e-con-inner,
.elementor-page .e-con {
	--padding-block-start: 0;
	--padding-block-end: 0;
	--padding-inline-start: 0;
	--padding-inline-end: 0;
}

/* Boxed containers get the page gutter + max width */
.elementor-page .e-con.e-con-boxed > .e-con-inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var( --op-gut, clamp( 1.15rem, 4vw, 2.75rem ) );
	width: 100%;
}

/* Elementor's Kit applies a global heading colour (ink), which makes headings
   invisible on our dark/coloured panels. Let one-pager headings inherit the
   colour of the section they sit in instead, then override per section. */
.elementor-page [class*="op-"] .elementor-heading-title {
	color: inherit;
}

/* Shared eyebrow tag */
.op-eyebrow p {
	font-family: var( --display-font );
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 0.9rem;
	color: var( --c-ink );
}

.op-eyebrow p::before {
	content: "\2605";
	margin-right: 0.5em;
}

/* Shared section title */
.op-section-title .elementor-heading-title {
	font-family: var( --display-font );
	font-size: clamp( 2rem, 4.6vw, 3.6rem );
	line-height: 0.95;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	margin: 0;
}

.op-section-sub p {
	max-width: 46ch;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var( --c-ink-soft );
	margin: 1rem 0 0;
}

/* Shared pill button */
.op-btn .elementor-button {
	background: var( --c-ink );
	color: var( --c-base );
	font-family: var( --display-font );
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 1.05em 1.7em;
	border: 2px solid var( --c-ink );
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.op-btn .elementor-button:hover {
	transform: translate( -2px, -2px );
	box-shadow: 4px 4px 0 var( --c-ink );
}

.op-btn--arrow .elementor-button::after {
	content: "\2192";
	margin-left: 0.75em;
	font-size: 1.1em;
}

.op-btn--full,
.op-btn--full .elementor-button {
	width: 100%;
}

/* Rotated ribbon sticker */
.op-ribbon p {
	display: inline-block;
	font-family: var( --display-font );
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.5em 1.1em;
	background: var( --c-yellow );
	color: var( --c-ink );
	margin: 0;
	white-space: nowrap;
	box-shadow: 2px 2px 0 rgba( 21, 19, 15, 0.18 );
}

.op-ribbon--sky p {
	background: var( --c-sky );
}

.op-ribbon--peach p {
	background: var( --c-peach );
}

.op-ribbon--lav p {
	background: var( --c-lavender );
}

.op-ribbon--pin p::before {
	content: "\25C9";
	margin-right: 0.45em;
}

/* == op-hero == */

.op-hero {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 320px;
	gap: 0.6rem;
	padding: 0.6rem;
	align-items: stretch;
}

.op-hero-panel {
	background: var( --c-lavender );
	border-radius: 22px;
	padding: 1.6rem clamp( 1.2rem, 3vw, 2.4rem ) 3rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	position: relative;
	overflow: hidden;
}

/* --- top bar --- */
.op-hero-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: nowrap;
	z-index: 3;
}

.op-logo .elementor-heading-title {
	font-family: var( --display-font );
	font-size: clamp( 1.05rem, 2vw, 1.35rem );
	text-transform: uppercase;
	letter-spacing: -0.02em;
	margin: 0;
	white-space: nowrap;
}

.op-nav ul.op-nav-list {
	display: flex;
	gap: clamp( 0.9rem, 2vw, 1.9rem );
	list-style: none;
	margin: 0;
	padding: 0;
}

.op-nav ul.op-nav-list li {
	margin: 0;
}

.op-nav ul.op-nav-list a {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --c-ink );
	white-space: nowrap;
}

.op-nav ul.op-nav-list a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.op-btn--ticket .elementor-button {
	border-radius: 8px;
	font-size: 0.7rem;
	padding: 0.8em 0.8em 0.8em 1.15em;
	display: inline-flex;
	align-items: center;
	gap: 0.9em;
	white-space: nowrap;
}

.op-btn--ticket .elementor-button::after {
	content: "\2192";
	background: var( --c-yellow );
	color: var( --c-ink );
	border-radius: 5px;
	width: 1.9em;
	height: 1.7em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95em;
}

/* --- headline stage --- */
.op-hero-stage {
	position: relative;
	text-align: center;
	padding: clamp( 4.5rem, 11vw, 8rem ) 0 clamp( 5rem, 12vw, 8.5rem );
}

.op-hero-eyebrow p {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 0.4rem;
}

.op-hero-title .elementor-heading-title {
	font-family: var( --display-font );
	font-size: clamp( 1.9rem, 5.6vw, 4.1rem );
	line-height: 0.92;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	margin: 0;
	max-width: 17ch;
	margin-inline: auto;
	position: relative;
	z-index: 3;
}

/* star-clipped photo, top-left of stage */
.op-hero-star {
	position: absolute;
	top: 0.5rem;
	left: 4%;
	width: clamp( 76px, 11vw, 128px );
	z-index: 1;
	opacity: 0.9;
}

.op-hero-star img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
}

/* ribbons pinned around the headline */
.op-hero-stage .op-ribbon {
	position: absolute;
	z-index: 4;
}

.op-hero-stage .op-ribbon--pin {
	top: 1.5rem;
	left: 26%;
	transform: rotate( -12deg );
}

.op-hero-stage .op-ribbon--sky {
	top: 2.2rem;
	right: 4%;
	transform: rotate( -8deg );
}

.op-hero-stage .op-ribbon--peach {
	bottom: 1.6rem;
	left: 6%;
	transform: rotate( -11deg );
}

.op-hero-stage .op-ribbon--peach p {
	font-size: 1.05rem;
	padding: 0.55em 1.5em;
}

/* circular scroll seal */
.op-seal-wrap {
	position: absolute;
	right: 8%;
	bottom: 6%;
	z-index: 4;
}

.op-seal-wrap p {
	margin: 0;
}

.op-seal {
	position: relative;
	display: grid;
	place-items: center;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	border: 1px dashed rgba( 21, 19, 15, 0.5 );
	color: var( --c-ink );
}

.op-seal__ring {
	position: absolute;
	inset: 0;
	font-family: var( --display-font );
	font-size: 0.42rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	clip-path: circle( 50% );
	display: grid;
	place-items: center;
	text-align: center;
	padding: 0.5rem;
	line-height: 1.25;
	opacity: 0.75;
}

.op-seal__arrow {
	position: relative;
	z-index: 2;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var( --c-ink );
	color: var( --c-base );
	display: grid;
	place-items: center;
	font-size: 1.1rem;
	transition: transform 0.3s ease;
}

.op-seal:hover .op-seal__arrow {
	transform: translateY( 4px );
}

/* --- info card rail --- */
.op-hero-rail {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.op-info-card {
	border-radius: 16px;
	padding: 1.2rem 1.3rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.4rem;
	min-height: 0;
}

.op-info-card__label p {
	margin: 0;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.75;
}

.op-info-card__value .elementor-heading-title {
	font-family: var( --display-font );
	font-size: 1.18rem;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin: 0;
}

.op-info-card--dark {
	background: var( --c-ink );
	color: var( --c-base );
}

.op-info-card--sky {
	background: var( --c-sky );
}

.op-info-card--yellow {
	background: var( --c-yellow );
}

.op-info-card--peach {
	background: var( --c-peach );
}

.op-info-card--cta {
	justify-content: center;
	align-items: center;
	text-align: center;
	cursor: pointer;
	transition: transform 0.25s ease;
}

.op-info-card--cta:hover {
	transform: translateY( -3px );
}

.op-info-card--cta .op-info-card__value .elementor-heading-title {
	font-size: 1.35rem;
}

/* == op-about == */

.op-about {
	padding: clamp( 4rem, 9vw, 7rem ) 0 clamp( 3rem, 6vw, 5rem );
}

.op-about-grid > .e-con-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp( 1.5rem, 4vw, 3.5rem );
	align-items: start;
}

.op-about-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.4rem;
}

.op-about-intro p {
	font-size: clamp( 1rem, 1.6vw, 1.22rem );
	line-height: 1.65;
	color: var( --c-ink );
	margin: 0;
	max-width: 42ch;
}

.op-about-year p {
	font-family: var( --display-font );
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0.6rem 0 0;
	opacity: 0.5;
}

.op-about-small {
	width: 100%;
	max-width: 340px;
}

.op-about-small img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 14px;
}

.op-about-headwrap {
	position: relative;
	margin-top: 1rem;
	width: 100%;
}

.op-about-title .elementor-heading-title {
	font-family: var( --display-font );
	font-size: clamp( 1.7rem, 3.6vw, 2.9rem );
	line-height: 0.98;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	margin: 0;
	max-width: 20ch;
}

.op-about-headwrap .op-ribbon--tr {
	position: absolute;
	top: -1.6rem;
	right: 0;
	transform: rotate( 7deg );
}

.op-about-headwrap .op-ribbon--bl {
	margin-top: 1.2rem;
	transform: rotate( -4deg );
	display: inline-block;
}

.op-about-right {
	position: relative;
}

.op-about-main img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 18px;
}

/* == op-sched ==
   Rebuilt to match the reference's Home-02 event timeline: a sticky left rail
   (day pill + vertical outlined "SCHEDULE") beside an hour-marked list of
   bordered session cards, each closed by a coloured 3-item meta bar. Light
   paper background, replacing the old dark full-bleed band. */

.op-sched {
	background: var( --c-base );
	color: var( --c-ink );
	padding: clamp( 4rem, 8vw, 6.5rem ) 0;
}

.op-sched-head {
	margin-bottom: clamp( 2rem, 5vw, 3.5rem );
}

.op-sched-main {
	display: grid;
	grid-template-columns: 128px minmax( 0, 1fr );
	gap: clamp( 1.5rem, 4vw, 3rem );
	align-items: start;
}

.op-sched-rail {
	position: sticky;
	top: 2rem;
	display: flex;
	flex-direction: column;
	gap: clamp( 1.75rem, 4vw, 2.75rem );
}

.op-sched-days {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.op-sched-day p {
	margin: 0;
	border: 1.5px solid var( --c-ink );
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	color: var( --c-ink );
	background: transparent;
}

.op-sched-day--active p {
	background: var( --c-lavender );
}

/* vertical outlined wordmark. The `.elementor-page` prefix is required: the
   shared `[class*="op-"] .elementor-heading-title { color: inherit }` rule above
   would otherwise out-specify `color: transparent` and kill the outline. */
.elementor-page .op-sched-wordmark .elementor-heading-title {
	font-family: var( --display-font );
	font-size: clamp( 2.4rem, 5vw, 4rem );
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0;
	writing-mode: vertical-rl;
	transform: rotate( 180deg );
	color: transparent;
	-webkit-text-stroke: 1px rgba( 21, 19, 15, 0.5 );
	line-height: 1;
}

.op-sched-col {
	min-width: 0;
}

.op-sched-dayhead {
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: clamp( 1.5rem, 4vw, 2.5rem );
	padding-bottom: 1rem;
	border-bottom: 2px solid var( --c-ink );
}

.op-sched-dayno .elementor-heading-title {
	font-family: var( --display-font );
	font-size: clamp( 1.6rem, 3.5vw, 2.4rem );
	text-transform: uppercase;
	margin: 0;
	color: var( --c-ink );
}

.op-sched-daytime p {
	margin: 0;
	font-family: var( --display-font );
	font-size: clamp( 1.4rem, 3.2vw, 2.1rem );
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1px rgba( 21, 19, 15, 0.55 );
}

.op-sched-list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp( 1.5rem, 3vw, 2.25rem );
}

/* the connecting vertical guideline running through the hour markers */
.op-sched-list::before {
	content: "";
	position: absolute;
	top: 0.6rem;
	bottom: 0.6rem;
	left: 2.6rem;
	width: 1px;
	background: rgba( 21, 19, 15, 0.18 );
}

.op-sched-row {
	position: relative;
	align-items: flex-start;
	gap: clamp( 1rem, 3vw, 2rem );
}

.op-sched-hour {
	flex: 0 0 auto;
	width: 2.6rem;
	padding-top: 0.5rem;
	font-family: var( --display-font );
	font-size: 0.78rem;
	text-transform: uppercase;
	color: var( --c-ink );
	position: relative;
	z-index: 1;
}

.op-sched-card {
	flex: 1 1 auto;
	min-width: 0;
	background: var( --c-base );
	border: 1.5px solid var( --c-ink );
	border-radius: 14px;
	padding: clamp( 1.1rem, 2.5vw, 1.6rem );
}

.op-sched-card__time p {
	margin: 0 0 0.4rem;
	font-size: 0.82rem;
	color: var( --c-ink-soft );
}

.op-sched-card__title .elementor-heading-title {
	font-family: var( --display-font );
	font-size: clamp( 1.2rem, 2.4vw, 1.7rem );
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: -0.015em;
	margin: 0 0 0.6rem;
	color: var( --c-ink );
}

.op-sched-card__desc p {
	margin: 0 0 1.1rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var( --c-ink-soft );
	max-width: 60ch;
}

/* colored 3-item meta footer bar */
.op-sched-meta {
	border-radius: 10px;
	overflow: clip;
}

.op-sched-meta__item p {
	margin: 0;
	padding: 0.65rem 1rem;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var( --c-ink );
	white-space: nowrap;
}

.op-sched-meta__speaker p {
	flex: 1 1 auto;
}

.op-sched-meta__speaker p::before {
	content: "\25CF";
	margin-right: 0.5rem;
	font-size: 0.6rem;
	vertical-align: middle;
}

.op-sched-meta__loc p::before {
	content: "\1F4CD\FE0E ";
}

.op-sched-meta__dur p::before {
	content: "\1F551\FE0E ";
}

.op-sched-meta--yellow .op-sched-meta__item {
	background: var( --c-yellow );
}

.op-sched-meta--lav .op-sched-meta__item {
	background: var( --c-lavender );
}

.op-sched-meta--sky .op-sched-meta__item {
	background: var( --c-sky );
}

.op-sched-meta--peach .op-sched-meta__item {
	background: var( --c-peach );
}

.op-sched-meta__item:not( :last-child ) {
	border-right: 1.5px solid rgba( 21, 19, 15, 0.14 );
}

/* == op-spk == */

.op-spk-sec {
	padding: clamp( 4rem, 8vw, 6.5rem ) 0;
}

.op-spk-head {
	margin-bottom: clamp( 2.5rem, 5vw, 4rem );
}

.op-spk-grid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: clamp( 1rem, 2.4vw, 1.8rem );
	align-items: start;
}

.op-spk {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

/* offset rhythm */
.op-spk--down {
	margin-top: clamp( 0rem, 4vw, 3rem );
}

.op-spk__photo {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: var( --c-paper );
}

.op-spk__img img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.op-spk:hover .op-spk__img img {
	transform: scale( 1.05 );
}

/* rotated sticker badge over the portrait */
.op-spk__badge {
	position: absolute;
	bottom: 0.8rem;
	left: 0.7rem;
	transform: rotate( -5deg );
	z-index: 2;
}

.op-spk__badge p {
	font-size: 0.62rem;
	padding: 0.42em 0.85em;
}

.op-spk--yellow .op-spk__badge p {
	background: var( --c-yellow );
}

.op-spk--lav .op-spk__badge p {
	background: var( --c-lavender );
}

.op-spk--sky .op-spk__badge p {
	background: var( --c-sky );
}

.op-spk--peach .op-spk__badge p {
	background: var( --c-peach );
}

.op-spk__name .elementor-heading-title {
	font-family: var( --display-font );
	font-size: 1.06rem;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin: 0;
}

.op-spk__social p {
	margin: 0;
	display: flex;
	gap: 0.5rem;
}

.op-spk__social a {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --c-ink );
	border: 1px solid rgba( 21, 19, 15, 0.25 );
	border-radius: 999px;
	padding: 0.3em 0.7em;
	transition: background 0.2s ease, color 0.2s ease;
}

.op-spk__social a:hover {
	background: var( --c-ink );
	color: var( --c-base );
}

/* == op-facts == */

.op-facts {
	background: var( --c-peach );
	padding: clamp( 4rem, 8vw, 6.5rem ) 0;
}

.op-facts-head {
	margin-bottom: clamp( 2rem, 4vw, 3rem );
}

/* Fun Facts photo strip is now a horizontal scroll carousel (Elementor
   image-carousel widget), so it is a single full-width block, not a 2-col grid. */
.op-facts-photos {
	margin-bottom: clamp( 2rem, 4vw, 3rem );
}

.op-facts-carousel .swiper-slide img,
.op-facts-carousel .elementor-carousel-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 16px;
	display: block;
}

/* Elementor renders slide backgrounds via .elementor-carousel-image when
   "stretch" is on — give those the same rounding/ratio. */
.op-facts-carousel .elementor-carousel-image {
	background-size: cover;
	background-position: center;
}

/* Arrows: sticker-style circles in the Conferio ink/cream palette. */
.op-facts-carousel .elementor-swiper-button {
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: var( --c-ink );
	color: var( --c-base );
	display: grid;
	place-items: center;
	border: 2px solid var( --c-ink );
	transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.op-facts-carousel .elementor-swiper-button svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.op-facts-carousel .elementor-swiper-button:hover {
	background: var( --c-yellow );
	color: var( --c-ink );
	transform: scale( 1.1 );
}

.op-facts-carousel .elementor-swiper-button-prev {
	left: 6px;
}

.op-facts-carousel .elementor-swiper-button-next {
	right: 6px;
}

.op-facts-stats {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: clamp( 0.8rem, 2vw, 1.2rem );
}

.op-stat {
	background: var( --c-base );
	border-radius: 14px;
	padding: 1.5rem 1.3rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	transition: transform 0.25s ease;
}

.op-stat:hover {
	transform: translateY( -4px );
}

.op-stat__num .elementor-heading-title {
	font-family: var( --display-font );
	font-size: clamp( 1.7rem, 3.4vw, 2.5rem );
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 0;
	white-space: nowrap;
}

.op-stat__label p {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.45;
	color: var( --c-ink-soft );
}

/* == op-spon == */

.op-spon {
	padding: clamp( 4rem, 8vw, 6.5rem ) 0 clamp( 2rem, 4vw, 3rem );
}

.op-spon-head {
	margin-bottom: clamp( 2rem, 4vw, 3rem );
}

.op-spon-tiers {
	display: flex;
	flex-direction: column;
	gap: clamp( 1rem, 2.5vw, 1.6rem );
}

.op-spon-tier {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.op-spon-tier__label .elementor-heading-title {
	font-family: var( --display-font );
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0;
	opacity: 0.6;
}

.op-logo-grid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 1px;
	border-radius: 14px;
	overflow: hidden;
	background: rgba( 21, 19, 15, 0.12 );
}

.op-logo-cell {
	background: var( --c-paper );
	display: grid;
	place-items: center;
	min-height: 92px;
	padding: 1rem;
	transition: background 0.25s ease;
}

.op-logo-cell .elementor-heading-title {
	font-family: var( --display-font );
	font-size: clamp( 0.85rem, 1.6vw, 1.15rem );
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin: 0;
	text-align: center;
	opacity: 0.75;
	transition: opacity 0.25s ease;
}

.op-logo-cell:hover .elementor-heading-title {
	opacity: 1;
}

.op-logo-grid--lav .op-logo-cell {
	background: var( --c-lavender );
}

.op-logo-grid--yellow .op-logo-cell {
	background: var( --c-yellow );
}

.op-logo-grid--sky .op-logo-cell {
	background: var( --c-sky );
}

/* == op-vibe == */

.op-vibe-sec {
	padding: clamp( 3rem, 6vw, 5rem ) 0 clamp( 4rem, 8vw, 6.5rem );
}

.op-vibe-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: clamp( 1rem, 2.5vw, 1.8rem );
	margin-top: clamp( 2.5rem, 5vw, 3.75rem );
	align-items: stretch;
}

.op-vibe {
	border-radius: 18px;
	padding: 1.8rem 1.6rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	border: 2px solid var( --c-ink );
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.op-vibe:nth-child( odd ) {
	transform: rotate( -1.6deg );
}

.op-vibe:nth-child( even ) {
	transform: rotate( 1.4deg );
}

.op-vibe:hover {
	transform: rotate( 0deg ) translateY( -5px );
	box-shadow: 6px 6px 0 var( --c-ink );
}

.op-vibe--yellow {
	background: var( --c-yellow );
}

.op-vibe--lav {
	background: var( --c-lavender );
}

.op-vibe--peach {
	background: var( --c-peach );
}

.op-vibe__star .elementor-heading-title {
	font-size: 1.5rem;
	line-height: 1.3;
	margin: 0;
}

.op-vibe__title .elementor-heading-title {
	font-family: var( --display-font );
	font-size: clamp( 1.2rem, 2.2vw, 1.6rem );
	text-transform: uppercase;
	letter-spacing: -0.02em;
	margin: 0;
}

.op-vibe__desc p {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.6;
	color: var( --c-ink );
	opacity: 0.8;
}

/* == op-dir == */

.op-dir {
	position: relative;
	background: var( --c-paper );
	padding: clamp( 4rem, 8vw, 6.5rem ) 0;
	overflow: hidden;
}

/* giant watermark wordmark */
.op-dir-wordmark {
	margin-bottom: clamp( -1rem, -2vw, -2.5rem );
}

.elementor-page .op-dir-wordmark .elementor-heading-title {
	font-family: var( --display-font );
	font-size: clamp( 3rem, 11vw, 9rem );
	text-transform: uppercase;
	letter-spacing: -0.04em;
	line-height: 0.8;
	margin: 0;
	color: transparent;
	-webkit-text-stroke: 1px rgba( 21, 19, 15, 0.14 );
	text-align: center;
	pointer-events: none;
	user-select: none;
}

.op-dir-inner {
	position: relative;
	z-index: 2;
}

.op-dir-inner > .e-con-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp( 1.5rem, 4vw, 3.5rem );
	align-items: center;
}

.op-dir-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.op-dir-title .elementor-heading-title {
	font-family: var( --display-font );
	font-size: clamp( 1.9rem, 4vw, 3rem );
	line-height: 0.98;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	margin: 0;
}

.op-dir-addr p {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.55;
	color: var( --c-ink-soft );
}

.op-dir-meta {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	margin: 0.6rem 0 0.4rem;
}

.op-dir-meta__item {
	display: grid;
	grid-template-columns: 110px minmax( 0, 1fr );
	gap: 1rem;
	align-items: baseline;
	padding: 0.85rem 0;
	border-top: 1px dashed rgba( 21, 19, 15, 0.28 );
}

.op-dir-meta__item:last-child {
	border-bottom: 1px dashed rgba( 21, 19, 15, 0.28 );
}

.op-dir-meta__label .elementor-heading-title {
	font-family: var( --display-font );
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0;
	opacity: 0.6;
}

.op-dir-meta__value p {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.5;
}

/* fanned photo pair */
.op-dir-photos {
	position: relative;
	min-height: clamp( 320px, 42vw, 460px );
	padding: 1.5rem 1rem;
}

.op-dir-photo img {
	width: 100%;
	object-fit: cover;
	border-radius: 16px;
	border: 5px solid var( --c-base );
	box-shadow: 0 12px 30px rgba( 21, 19, 15, 0.16 );
	display: block;
}

.op-dir-photo {
	position: absolute;
	width: 58%;
}

.op-dir-photo--a {
	top: 1rem;
	left: 1rem;
	transform: rotate( -5deg );
	z-index: 2;
}

.op-dir-photo--b {
	bottom: 1rem;
	right: 1rem;
	transform: rotate( 4deg );
	z-index: 1;
}

.op-dir-photo--a img {
	aspect-ratio: 4 / 5;
}

.op-dir-photo--b img {
	aspect-ratio: 4 / 5;
}

/* == op-tick == */

.op-tick-sec {
	padding: clamp( 4rem, 8vw, 6.5rem ) 0;
}

.op-tick-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: clamp( 1rem, 2.5vw, 1.8rem );
	margin-top: clamp( 2rem, 4vw, 3rem );
	align-items: start;
}

.op-tick {
	position: relative;
	border: 2px solid var( --c-ink );
	border-radius: 18px;
	padding: 1.8rem 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	background: var( --c-base );
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.op-tick:hover {
	transform: translateY( -5px );
	box-shadow: 6px 6px 0 var( --c-ink );
}

.op-tick--sky {
	background: var( --c-sky );
}

.op-tick--yellow {
	background: var( --c-yellow );
}

.op-tick--lav {
	background: var( --c-lavender );
}

.op-tick--featured {
	margin-top: -0.9rem;
	padding-bottom: 2.1rem;
	box-shadow: 5px 5px 0 var( --c-ink );
}

/* NOTE: Elementor reserves `.e-con::before` for its background-overlay layer
   (absolutely positioned and sized to the whole container), so a ::before badge
   here inherits that sizing and paints over the entire card. Use ::after. */
.op-tick--featured::after {
	content: "Most popular";
	position: absolute;
	top: -0.85rem;
	right: 1.2rem;
	width: auto;
	height: auto;
	background: var( --c-ink );
	color: var( --c-base );
	font-family: var( --display-font );
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	padding: 0.5em 0.9em;
	border-radius: 999px;
	z-index: 3;
}

.op-tick__name .elementor-heading-title {
	font-family: var( --display-font );
	font-size: 0.76rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0;
	opacity: 0.7;
}

.op-tick__price .elementor-heading-title {
	font-family: var( --display-font );
	font-size: clamp( 2rem, 4vw, 2.9rem );
	line-height: 1;
	letter-spacing: -0.035em;
	margin: 0;
	white-space: nowrap;
}

.op-tick__note p {
	margin: 0 0 0.4rem;
	font-size: 0.84rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	opacity: 0.7;
}

.op-tick__feats ul.op-tick__list {
	list-style: none;
	margin: 0.5rem 0 1.2rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.op-tick__feats ul.op-tick__list li {
	font-size: 0.9rem;
	line-height: 1.45;
	padding: 0.55rem 0 0.55rem 1.4rem;
	position: relative;
	border-bottom: 1px dashed rgba( 21, 19, 15, 0.28 );
}

.op-tick__feats ul.op-tick__list li:last-child {
	border-bottom: none;
}

.op-tick__feats ul.op-tick__list li::before {
	content: "\2605";
	position: absolute;
	left: 0;
	top: 0.55rem;
	font-size: 0.7rem;
	opacity: 0.65;
}

.op-tick .op-btn {
	margin-top: auto;
	width: 100%;
}

/* == op-reg == */

.op-reg {
	background: var( --c-ink );
	color: var( --c-base );
	padding: clamp( 4rem, 8vw, 6.5rem ) 0;
}

.op-reg-inner > .e-con-inner {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp( 2rem, 5vw, 4rem );
	align-items: start;
}

.op-reg .op-eyebrow p {
	color: var( --c-yellow );
}

.op-reg-title .elementor-heading-title {
	font-family: var( --display-font );
	font-size: clamp( 2rem, 4.6vw, 3.4rem );
	line-height: 0.95;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	margin: 0 0 1.1rem;
	color: var( --c-base );
}

.op-reg-copy p {
	margin: 0 0 1.4rem;
	font-size: 1rem;
	line-height: 1.65;
	color: rgba( 247, 243, 234, 0.7 );
	max-width: 40ch;
}

.op-reg-meta p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba( 247, 243, 234, 0.85 );
}

.op-reg-meta strong {
	font-family: var( --display-font );
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var( --c-yellow );
}

/* --- Jetpack form styling --- */
.op-reg-form .wp-block-jetpack-contact-form,
.op-reg-form .contact-form {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0.9rem 1rem;
}

.op-reg-form .grunion-field-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
}

/* full-width rows: select + textarea + submit */
.op-reg-form .grunion-field-select-wrap,
.op-reg-form .grunion-field-textarea-wrap,
.op-reg-form .contact-form-submission,
.op-reg-form p.contact-submit {
	grid-column: 1 / -1;
}

.op-reg-form label,
.op-reg-form .grunion-field-label {
	font-family: var( --display-font );
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba( 247, 243, 234, 0.72 );
	font-weight: 400;
	margin: 0;
}

.op-reg-form .grunion-label-required {
	color: var( --c-yellow );
}

.op-reg-form input[ type="text" ],
.op-reg-form input[ type="email" ],
.op-reg-form select,
.op-reg-form textarea {
	width: 100%;
	background: rgba( 247, 243, 234, 0.06 );
	border: 1px solid rgba( 247, 243, 234, 0.25 );
	border-radius: 10px;
	padding: 0.85rem 1rem;
	color: var( --c-base );
	font-family: var( --body-font );
	font-size: 0.95rem;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.op-reg-form textarea {
	min-height: 130px;
	resize: vertical;
}

.op-reg-form input:focus,
.op-reg-form select:focus,
.op-reg-form textarea:focus {
	outline: none;
	border-color: var( --c-yellow );
	background: rgba( 247, 243, 234, 0.1 );
}

.op-reg-form input::placeholder,
.op-reg-form textarea::placeholder {
	color: rgba( 247, 243, 234, 0.4 );
}

/* Jetpack renders the select inside its own wrapper with a light background;
   force the dark treatment on both so it matches the other fields. */
.op-reg-form .grunion-field-select-wrap select,
.op-reg-form .contact-form select {
	background-color: rgba( 247, 243, 234, 0.06 );
	color: var( --c-base );
	appearance: none;
	background-image: linear-gradient( 45deg, transparent 50%, rgba( 247, 243, 234, 0.7 ) 50% ), linear-gradient( 135deg, rgba( 247, 243, 234, 0.7 ) 50%, transparent 50% );
	background-position: calc( 100% - 20px ) center, calc( 100% - 14px ) center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.5rem;
}

.op-reg-form select option {
	color: var( --c-ink );
	background: var( --c-base );
}

.op-reg-form button[ type="submit" ],
.op-reg-form input[ type="submit" ],
.op-reg-form .wp-block-button__link {
	background: var( --c-yellow );
	color: var( --c-ink );
	border: 2px solid var( --c-yellow );
	border-radius: 999px;
	font-family: var( --display-font );
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 1.05em 2.2em;
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.op-reg-form button[ type="submit" ]:hover,
.op-reg-form input[ type="submit" ]:hover,
.op-reg-form .wp-block-button__link:hover {
	transform: translate( -2px, -2px );
	box-shadow: 4px 4px 0 var( --c-base );
}

/* == op-sup ==
   Big centred headline with sticker ribbons over a fanned photo arc, matching
   the reference's "Get in touch" block. */

.op-sup {
	background: var( --c-base );
	overflow: clip;
	padding-block: clamp( 3rem, 8vw, 6rem ) clamp( 4rem, 10vw, 7rem );
}

.op-sup-inner {
	position: relative;
}

.op-sup-head {
	position: relative;
	text-align: center;
	max-width: 62rem;
	margin-inline: auto;
	padding-inline: 1rem;
	z-index: 2;
}

.op-sup-title .elementor-heading-title {
	font-family: var( --wp--preset--font-family--display );
	text-transform: uppercase;
	font-size: clamp( 2.2rem, 6vw, 4.5rem );
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var( --c-ink );
}

.op-sup-rib {
	position: absolute;
	top: -0.5rem;
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	border: 2px solid var( --c-ink );
	font-family: var( --wp--preset--font-family--display );
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	z-index: 3;
}

.op-sup-rib p {
	margin: 0;
}

.op-sup-rib--sky {
	top: -1.75rem;
	right: 4%;
	background: var( --c-sky );
	transform: rotate( 10deg );
}

.op-sup-rib--lav {
	left: 2%;
	bottom: -0.5rem;
	top: auto;
	background: var( --c-lavender );
	transform: rotate( -8deg );
}

.op-sup-arc {
	position: relative;
	margin-top: clamp( 2.5rem, 6vw, 4rem );
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 0;
	padding-inline: 1rem;
}

.op-sup-card {
	flex: 0 0 auto;
	width: clamp( 130px, 15vw, 220px );
	margin-inline: clamp( -34px, -3vw, -18px );
	transition: transform 0.35s ease, z-index 0s;
}

.op-sup-card img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 14px;
	border: 3px solid var( --c-ink );
	box-shadow: 0 14px 28px rgba( 21, 19, 15, 0.18 );
	display: block;
}

/* Fan the seven cards into an arc: middle card tallest/frontmost, tapering
   outward with alternating rotation and a slight vertical rise. */
.op-sup-card:nth-child( 1 ) { transform: rotate( -18deg ) translateY( 38px ); z-index: 1; }
.op-sup-card:nth-child( 2 ) { transform: rotate( -11deg ) translateY( 18px ); z-index: 2; }
.op-sup-card:nth-child( 3 ) { transform: rotate( -5deg ) translateY( 4px ); z-index: 3; }
.op-sup-card:nth-child( 4 ) { transform: rotate( 0deg ) translateY( -8px ); z-index: 4; }
.op-sup-card:nth-child( 5 ) { transform: rotate( 5deg ) translateY( 4px ); z-index: 3; }
.op-sup-card:nth-child( 6 ) { transform: rotate( 11deg ) translateY( 18px ); z-index: 2; }
.op-sup-card:nth-child( 7 ) { transform: rotate( 18deg ) translateY( 38px ); z-index: 1; }

.op-sup-arc:hover .op-sup-card {
	z-index: 5;
}

.op-sup-card:hover {
	transform: translateY( -14px ) scale( 1.05 ) !important;
	z-index: 6 !important;
}

@media ( max-width: 782px ) {
	.op-sup-card:nth-child( 1 ),
	.op-sup-card:nth-child( 7 ) {
		display: none;
	}
	.op-sup-card {
		width: clamp( 110px, 22vw, 160px );
	}

	/* On narrow screens the title wraps to several lines, so absolute-positioned
	   ribbons (sized for a 1-2 line desktop headline) start landing on top of the
	   text. Switch them into the normal flow, stacked above the title, instead of
	   chasing a taller title box with more offsets. */
	.op-sup-head {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.75rem;
	}

	.op-sup-head .op-sup-rib {
		position: static;
		order: -1;
	}

	.op-sup-head .op-sup-rib--sky {
		align-self: flex-end;
		margin-right: 6%;
		transform: rotate( 4deg );
	}

	.op-sup-head .op-sup-rib--lav {
		align-self: flex-start;
		margin-left: 4%;
		transform: rotate( -3deg );
	}
}

@media ( max-width: 540px ) {
	.op-sup-card:nth-child( 2 ),
	.op-sup-card:nth-child( 6 ) {
		display: none;
	}
}

/* == op-foot == */

.op-foot {
	background: var( --c-ink );
	color: var( --c-base );
	padding: clamp( 3rem, 6vw, 4.5rem ) 0 2rem;
	border-top: 1px solid rgba( 247, 243, 234, 0.14 );
}

.op-foot-top {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 0.7fr ) ) minmax( 0, 1.2fr );
	gap: clamp( 1.5rem, 3vw, 2.5rem );
	margin-bottom: clamp( 2rem, 5vw, 3.5rem );
}

.op-foot-col {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.op-foot-col__label .elementor-heading-title {
	font-family: var( --display-font );
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0;
	color: var( --c-yellow );
}

.op-foot-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.op-foot-links a {
	font-size: 0.92rem;
	color: rgba( 247, 243, 234, 0.72 );
	transition: color 0.2s ease;
}

.op-foot-links a:hover {
	color: var( --c-base );
}

.op-foot-contact p {
	margin: 0 0 0.5rem;
	font-size: 0.92rem;
	line-height: 1.55;
	color: rgba( 247, 243, 234, 0.66 );
}

.op-foot-contact p.op-foot-email a {
	font-family: var( --display-font );
	font-size: clamp( 1.05rem, 2.2vw, 1.5rem );
	text-transform: uppercase;
	letter-spacing: -0.02em;
	color: var( --c-base );
}

.op-foot-contact p.op-foot-email a:hover {
	color: var( --c-yellow );
}

/* giant footer wordmark */
.op-foot-wordmark .elementor-heading-title {
	font-family: var( --display-font );
	font-size: clamp( 3.2rem, 17vw, 15rem );
	line-height: 0.78;
	text-transform: uppercase;
	letter-spacing: -0.045em;
	margin: 0;
	text-align: center;
	color: var( --c-base );
	user-select: none;
}

.op-foot-bottom {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 2rem;
	padding-top: 1.4rem;
	border-top: 1px solid rgba( 247, 243, 234, 0.14 );
}

.op-foot-copy p,
.op-foot-legal p {
	margin: 0;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba( 247, 243, 234, 0.5 );
}

.op-foot-legal p {
	display: flex;
	gap: 1.2rem;
	flex-wrap: wrap;
}

.op-foot-legal a {
	color: rgba( 247, 243, 234, 0.5 );
}

.op-foot-legal a:hover {
	color: var( --c-base );
}

/* == op-responsive == */

@media ( max-width: 1024px ) {
	.op-hero {
		grid-template-columns: 1fr;
	}

	.op-hero-rail {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.op-spk-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.op-facts-stats {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.op-foot-top {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 782px ) {
	.op-hero-bar {
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	.op-nav ul.op-nav-list {
		flex-wrap: wrap;
		justify-content: center;
	}

	/* the star photo and seal crowd the headline on narrow screens */
	.op-hero-star,
	.op-seal-wrap {
		display: none;
	}

	.op-hero-stage {
		padding: 1.5rem 0 2rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.75rem;
	}

	/* Absolute ribbons collide with the headline at narrow widths — flow them
	   inline above/below the title instead. */
	.op-hero-stage .op-ribbon {
		position: static;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
	}

	.op-hero-stage .op-ribbon--pin {
		order: 1;
		transform: rotate( -3deg );
	}

	.op-hero-stage .op-ribbon--sky {
		order: 2;
		transform: rotate( 2deg );
	}

	.op-hero-eyebrow {
		order: 3;
	}

	.op-hero-title {
		order: 4;
	}

	.op-hero-stage .op-ribbon--peach {
		order: 5;
		margin-top: 0.4rem;
		transform: rotate( -2deg );
	}

	.op-about-grid > .e-con-inner,
	.op-dir-inner > .e-con-inner,
	.op-reg-inner > .e-con-inner {
		grid-template-columns: 1fr;
	}

	.op-about-right {
		order: -1;
	}

	.op-sched-main {
		grid-template-columns: 1fr;
	}

	.op-sched-rail {
		position: static;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 1.5rem;
	}

	.op-sched-days {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.elementor-page .op-sched-wordmark .elementor-heading-title {
		writing-mode: horizontal-tb;
		transform: none;
		font-size: 1.6rem;
	}

	.op-sched-list::before {
		left: 1.9rem;
	}

	.op-sched-meta {
		flex-wrap: wrap;
	}

	.op-vibe-grid,
	.op-tick-grid,
	.op-logo-grid {
		grid-template-columns: 1fr;
	}

	.op-tick--featured {
		margin-top: 0.6rem;
	}

	.op-dir-photos {
		min-height: clamp( 380px, 92vw, 520px );
	}

	.op-dir-meta__item {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.op-reg-form .wp-block-jetpack-contact-form,
	.op-reg-form .contact-form {
		grid-template-columns: 1fr;
	}

	.op-foot-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media ( max-width: 540px ) {
	.op-hero-rail,
	.op-spk-grid,
	.op-facts-stats,
	.op-foot-top {
		grid-template-columns: 1fr;
	}

	.op-spk--down {
		margin-top: 0;
	}

	.op-vibe:nth-child( odd ),
	.op-vibe:nth-child( even ) {
		transform: none;
	}
}

/* == op-motion == */

/* Hover motion. Entrance animations are Elementor Motion Effects controls
   (editable per element under Advanced -> Motion Effects); these hover states
   are theme CSS so they stay consistent across every card. */

/* Info-card rail */
.op-info-card {
	transition: transform 0.3s cubic-bezier( 0.34, 1.56, 0.64, 1 ), box-shadow 0.3s ease;
}

.op-info-card:hover {
	transform: translateY( -5px ) rotate( -1deg );
	box-shadow: 0 10px 26px rgba( 21, 19, 15, 0.2 );
}

/* Schedule cards: lift the card and nudge the colour bar in on hover */
.op-sched-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.op-sched-row:hover .op-sched-card {
	transform: translateY( -4px );
	box-shadow: 0 10px 24px rgba( 21, 19, 15, 0.12 );
}

.op-sched-card__title .elementor-heading-title {
	transition: color 0.25s ease, transform 0.3s ease;
}

.op-sched-row:hover .op-sched-card__title .elementor-heading-title {
	transform: translateX( 4px );
}

.op-sched-meta {
	transition: transform 0.3s ease;
}

.op-sched-row:hover .op-sched-meta {
	transform: translateX( 4px );
}

/* Speaker cards: lift card, straighten and pop the sticker badge */
.op-spk {
	transition: transform 0.35s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

.op-spk:hover {
	transform: translateY( -8px );
}

.op-spk__badge {
	transition: transform 0.35s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

.op-spk:hover .op-spk__badge {
	transform: rotate( 0deg ) scale( 1.08 );
}

/* Sponsor logo cells */
.op-logo-cell {
	transition: transform 0.28s ease, background 0.25s ease;
}

.op-logo-cell:hover {
	transform: scale( 1.06 );
	z-index: 2;
}

/* Vibe card star spins on hover */
.op-vibe__star .elementor-heading-title {
	display: inline-block;
	transition: transform 0.5s ease;
}

.op-vibe:hover .op-vibe__star .elementor-heading-title {
	transform: rotate( 72deg ) scale( 1.2 );
}

/* Direction photos fan apart on hover */
.op-dir-photo {
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.op-dir-photos:hover .op-dir-photo--a {
	transform: rotate( -8deg ) translate( -8px, -6px );
}

.op-dir-photos:hover .op-dir-photo--b {
	transform: rotate( 7deg ) translate( 8px, 6px );
}

/* Stat cards */
.op-stat__num .elementor-heading-title {
	transition: transform 0.3s cubic-bezier( 0.34, 1.56, 0.64, 1 );
	display: inline-block;
}

.op-stat:hover .op-stat__num .elementor-heading-title {
	transform: scale( 1.1 );
}

/* Nav underline sweep */
.op-nav ul.op-nav-list a {
	position: relative;
	transition: color 0.2s ease;
}

.op-nav ul.op-nav-list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background: var( --c-ink );
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 0.28s ease;
}

.op-nav ul.op-nav-list a:hover {
	text-decoration: none;
}

.op-nav ul.op-nav-list a:hover::after {
	transform: scaleX( 1 );
}

/* Seal ring rotates continuously; paused unless reduced motion is off */
@keyframes op-seal-spin {
	to {
		transform: rotate( 360deg );
	}
}

.op-seal__ring {
	animation: op-seal-spin 18s linear infinite;
}

/* == op-splittext ==
   Character-by-character wordmark reveal, mirroring the Conferio reference.

   Progressive enhancement: the default state below is the FINAL visible state,
   so the block editor, no-JS visitors and reduced-motion users always see
   finished text. scripts.js adds `.op-split` (hidden start) + `.op-split--in`
   (revealed) only when motion is allowed. */
.elementor-page .op-char {
	display: inline-block;
	will-change: transform, opacity;
}

.elementor-page .op-split .op-char {
	opacity: 0;
	transform: scale( 0.5 );
	transition:
		opacity 0.5s cubic-bezier( 0.645, 0.045, 0.355, 1 ),
		transform 0.5s cubic-bezier( 0.645, 0.045, 0.355, 1 );
}

.elementor-page .op-split--in .op-char {
	opacity: 1;
	transform: scale( 1 );
}

/* == op-parallax ==
   Gentle scroll drift. Applied to the inner <img> because the wrapper already
   owns decorative rotation and the hover "fan apart" transform — writing to the
   wrapper here would clobber both. `--op-par` is set by scripts.js and defaults
   to 0, so with no JS the images sit exactly where the layout puts them. */
.elementor-page .op-facts-photo img,
.elementor-page .op-dir-photo img,
.elementor-page .op-about-small img {
	transform: translate3d( 0, var( --op-par, 0px ), 0 );
	will-change: transform;
}

/* Honour reduced-motion for BOTH our hover CSS and Elementor's entrance
   animations. Elementor hides pending elements with `.elementor-invisible`
   (visibility: hidden) and removes the class via JS on scroll, so we must force
   visibility back — otherwise cancelling the animation would leave elements
   permanently hidden.

   Deliberately NOT resetting `transform` here: the rotated ribbon stickers and
   tilted vibe cards are static decorative geometry, not motion, and those
   elements also carry `.elementor-invisible`. Elementor's entrance keyframes do
   not use `animation-fill-mode: forwards` (only `.reverse` does), so cancelling
   the animation leaves no residual transform to clean up. */
@media ( prefers-reduced-motion: reduce ) {
	.elementor-page [class*="op-"],
	.elementor-page [class*="op-"] * {
		animation: none !important;
		transition: none !important;
	}

	.elementor-page .elementor-invisible,
	.elementor-page .animated {
		visibility: visible !important;
		opacity: 1 !important;
		animation: none !important;
	}
}