/*
Theme Name: EB Email Child
Theme URI: https://www.mswebarts.com/
Description: EB Email Child is a child theme of the Hello Elementor theme, created by MS Web Arts for emanbensalem.email - The Royal Correspondence.
Author: MS Web Arts
Author URI: https://www.mswebarts.com/
Template: hello-elementor
Version: 2.0.1
Text Domain: eb-email-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ==========================================================================
   WHAT BELONGS IN THIS FILE

   Colour, typography, spacing, borders, backgrounds, alignment, flex layout
   and every responsive value are set in the Elementor editor, on the
   container or the widget, so they can be changed without code.

   This file carries only what the editor cannot express:
     - fixed / sticky positioning and the scrolled header state
     - pseudo-element decoration (hairlines, diamonds, the wax seal, separators)
     - image object-fit / object-position and transform-origin
     - gradient overlays that rely on mix-blend-mode
     - @keyframes, scroll reveals and hover choreography
     - max-width measured in `ch`
     - the markup Contact Form 7 renders for itself

   If you find yourself adding a plain colour or font-size here, set it on the
   widget in Elementor instead.
   ========================================================================== */

:root {
	--eb-cream: #F4EFE5;
	--eb-cream2: #EAE2D4;
	--eb-paper: #FBF8F2;
	--eb-ink: #1D1916;
	--eb-ink2: #4A423A;
	--eb-bord: #5A1E2B;
	--eb-brass: #9A7638;
	--eb-hair: rgba( 29, 25, 22, .16 );
	--eb-ease: cubic-bezier( .16, .84, .44, 1 );
	/* Resting header height. `headerMetric()` in eb-motion.js overwrites this
	   with the real measurement once the logo is laid out, but that first runs
	   at DOMContentLoaded - so this value is what the hero is sized against for
	   the first paint, and any gap between the two is a layout shift the visitor
	   sees on load. 81px is what the design's header actually measures. */
	--eb-hdr: 81px;
	/* Height of the WordPress admin bar while it is fixed over the viewport.
	   Every sticky offset and every full-height measure is taken from this, so
	   the page reads identically to a visitor and to a logged-in editor. */
	--eb-bar: 0px;
}

body.admin-bar { --eb-bar: 32px; }
@media screen and ( max-width: 782px ) {
	body.admin-bar { --eb-bar: 46px; }
}
/* Under 600px WordPress stops fixing the bar - it scrolls away with the page
   and no longer takes anything off the top of the viewport. */
@media screen and ( max-width: 600px ) {
	body.admin-bar { --eb-bar: 0px; }
}

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

/* `scale` and `translate` rather than `transform`, so the scroll parallax can
   own `transform` on the same element without fighting the animation. */
@keyframes ebKen {
	0%   { scale: 1.045; translate: 0 0; }
	100% { scale: 1.11; translate: -1.2% -1%; }
}
@keyframes ebBreathe {
	0%   { opacity: .45; transform: scale( 1 ); }
	100% { opacity: .9; transform: scale( 1.06 ); }
}
@keyframes ebSweep {
	0%        { left: -45%; }
	55%, 100% { left: 125%; }
}
@keyframes ebFrameIn {
	to { clip-path: inset( 0 0 0 0 ); }
}
@keyframes ebCapIn {
	to { opacity: 1; transform: none; }
}
@keyframes ebBlink {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}
@keyframes ebGrain {
	0%   { transform: translate( 0, 0 ); }
	20%  { transform: translate( -14px, 8px ); }
	40%  { transform: translate( 10px, -12px ); }
	60%  { transform: translate( -8px, -6px ); }
	80%  { transform: translate( 12px, 10px ); }
	100% { transform: translate( 0, 0 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	*, *::before, *::after {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}

/* --------------------------------------------------------------------------
   Base - only the few things Hello Elementor sets that the design overrides
   -------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	/* Reserve room for the vertical scrollbar from the very first paint. Without
	   this the viewport is full width until the page grows tall enough to scroll;
	   the scrollbar then appears and every full-width element - the sticky header
	   (#masthead / .elementor-element-ae6ced6) included - loses ~15px in a single
	   frame (1912px -> 1897px). Reserving the gutter keeps the client width
	   constant, so the header no longer changes width after load. */
	scrollbar-gutter: stable;
}
body.eb-mail { overflow-x: hidden; }
html.eb-door-running { overflow: hidden; }

/* --------------------------------------------------------------------------
   Brand chrome - entrance doors, progress bar, paper grain
   -------------------------------------------------------------------------- */

.eb-door {
	position: fixed;
	inset: 0;
	z-index: 300;
	pointer-events: none;
	display: flex;
}
.eb-door.is-done { display: none; }

.eb-door__panel {
	flex: 1;
	/* --eb-door-bg is set inline from Customizer > Custom Settings > Preloader. */
	background: var( --eb-door-bg, var( --eb-bord ) );
	transition: transform 1.25s var( --eb-ease );
}
.eb-door.is-open .eb-door__panel--l { transform: translateX( -101% ); }
.eb-door.is-open .eb-door__panel--r { transform: translateX( 101% ); }

.eb-door__name {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	transition: opacity .8s var( --eb-ease );
}
.eb-door.is-open .eb-door__name { opacity: 0; }

.eb-door__title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp( 26px, 5vw, 64px );
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var( --eb-door-fg, var( --eb-cream ) );
	font-weight: 300;
	line-height: 1;
	text-align: center;
	display: flex;
	align-items: center;
	gap: .06em;
}
.eb-door__caret {
	font-style: normal;
	display: inline-block;
	width: 1px;
	height: .86em;
	background: var( --eb-door-fg-80, rgba( 244, 239, 229, .8 ) );
	animation: ebBlink 1s steps( 1 ) infinite;
}
.eb-door.is-typed .eb-door__caret { animation: none; opacity: 0; }

.eb-door__sub {
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 10px;
	letter-spacing: .42em;
	text-transform: uppercase;
	color: var( --eb-door-fg-60, rgba( 244, 239, 229, .6 ) );
	font-weight: 400;
	opacity: 0;
	transition: opacity .8s var( --eb-ease );
}
.eb-door__sub.is-in { opacity: 1; }

.eb-prog {
	position: fixed;
	top: var( --eb-bar );
	left: 0;
	height: 2px;
	width: 100%;
	transform: scaleX( 0 );
	transform-origin: 0 50%;
	background: linear-gradient( 90deg, var( --eb-brass ), var( --eb-bord ) );
	z-index: 200;
	pointer-events: none;
	transition: transform .12s linear;
}

.eb-grain {
	position: fixed;
	inset: -120px;
	z-index: 150;
	pointer-events: none;
	opacity: .05;
	animation: ebGrain 8s steps( 6 ) infinite;
	background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>" );
}

/* --------------------------------------------------------------------------
   Sticky header - position and the deepened scrolled state
   -------------------------------------------------------------------------- */

#masthead {
	position: sticky;
	top: 0;
	z-index: 60;
}
.eb-hdr {
	-webkit-backdrop-filter: blur( 16px ) saturate( 1.1 );
	backdrop-filter: blur( 16px ) saturate( 1.1 );
	transition: box-shadow .5s var( --eb-ease ), background-color .5s var( --eb-ease );
}
body.eb-scrolled .eb-hdr {
	background-color: rgba( 244, 239, 229, .96 ) !important;
	box-shadow: 0 12px 40px -28px rgba( 29, 25, 22, .55 );
}
.eb-hdr > .e-con-inner,
.eb-hdr .eb-hdr-row {
	transition: padding .5s var( --eb-ease );
}
/* The header is a boxed container, so Elementor puts its block padding on
   `.e-con-inner` and reads it from `--padding-block-start` / `--padding-block-end`.
   Setting `padding-top` / `padding-bottom` on the outer `.e-con` therefore does
   not replace that padding, it stacks on top of it - which is why the scrolled
   header grew instead of shrinking. Override the variables the inner element
   already consumes. Elementor's own selector carries three classes, so these
   have to be `!important` to win. */
@media ( min-width: 981px ) {
	body.eb-scrolled .eb-hdr {
		--padding-block-start: 12px !important;
		--padding-block-end: 12px !important;
	}
}

/* --------------------------------------------------------------------------
   Reveal choreography
   `.eb-rl` masks a headline line, `.eb-rv` is the scroll reveal.
   Delay steps are classes so they stay pickable from the editor.
   -------------------------------------------------------------------------- */

.eb-rl { overflow: hidden; }
.eb-rl > * {
	transform: translateY( 110% );
	opacity: 0;
	transition: transform 1.25s var( --eb-ease ), opacity 1.25s var( --eb-ease );
}
.eb-rl.is-in > * { transform: none; opacity: 1; }
.eb-rl-2 > * { transition-delay: 130ms; }
.eb-rl-3 > * { transition-delay: 260ms; }

.eb-rv {
	opacity: 0;
	transform: translateY( 30px );
	transition: opacity 1.15s var( --eb-ease ), transform 1.15s var( --eb-ease );
}
.eb-rv-fade { transform: none; }
.eb-rv-right { transform: translateX( 38px ); }
.eb-rv-left { transform: translateX( -38px ); }
.eb-rv.is-in { opacity: 1; transform: none; }

.eb-d1 { transition-delay: 100ms; }
.eb-d2 { transition-delay: 140ms; }
.eb-d3 { transition-delay: 220ms; }
.eb-d4 { transition-delay: 680ms; }
.eb-d5 { transition-delay: 780ms; }
.eb-d6 { transition-delay: 880ms; }

/* Seven gates stagger at 90ms, as the design does. */
.eb-gate:nth-child( 1 ) { transition-delay: 0ms; }
.eb-gate:nth-child( 2 ) { transition-delay: 90ms; }
.eb-gate:nth-child( 3 ) { transition-delay: 180ms; }
.eb-gate:nth-child( 4 ) { transition-delay: 270ms; }
.eb-gate:nth-child( 5 ) { transition-delay: 360ms; }
.eb-gate:nth-child( 6 ) { transition-delay: 450ms; }
.eb-gate:nth-child( 7 ) { transition-delay: 540ms; }

/* --------------------------------------------------------------------------
   Hero - sticky portrait, the four overlay layers, caption, gutter alignment
   -------------------------------------------------------------------------- */

.eb-hero { min-height: calc( 100svh - var( --eb-hdr ) - var( --eb-bar ) ); }

/* The design aligns hero copy to the same 1320px measure the header uses;
   past that width the left padding has to grow with the viewport, which a
   static padding value cannot do. */
@media ( min-width: 1413px ) {
	.eb-hero-copy {
		padding-left: calc( ( 100vw - 1320px ) / 2 + 46px ) !important;
	}
}

.eb-hero-media {
	position: sticky;
	top: calc( var( --eb-hdr ) + var( --eb-bar ) );
	align-self: flex-start;
	height: calc( 100svh - var( --eb-hdr ) - var( --eb-bar ) );
	min-height: min( 60svh, 520px );
	overflow: hidden;
}

.eb-hero-img {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.eb-hero-img .elementor-widget-container,
.eb-hero-img figure,
.eb-hero-img a { height: 100%; }
.eb-hero-img .elementor-widget-container { will-change: transform; }
.eb-hero-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% bottom;
	scale: 1.02;
	will-change: transform;
	animation: ebKen 26s var( --eb-ease ) infinite alternate;
	filter: saturate( 1.03 ) contrast( 1.03 );
}

/* Layer 1 - shadow and bordeaux floor, multiplied into the photograph. */
.eb-hero-media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		radial-gradient( 120% 90% at 50% 108%, rgba( 90, 30, 43, .28 ) 0%, rgba( 90, 30, 43, 0 ) 58% ),
		linear-gradient( 90deg, rgba( 244, 239, 229, .55 ) 0%, rgba( 244, 239, 229, .10 ) 16%, rgba( 244, 239, 229, 0 ) 34% ),
		linear-gradient( 180deg, rgba( 29, 25, 22, .14 ) 0%, rgba( 29, 25, 22, 0 ) 32%, rgba( 29, 25, 22, .06 ) 66%, rgba( 29, 25, 22, .28 ) 100% );
	mix-blend-mode: multiply;
	opacity: .92;
}

/* Layer 2 - the brass glow that breathes. */
.eb-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: radial-gradient( 60% 45% at 62% 22%, rgba( 154, 118, 56, .26 ) 0%, rgba( 154, 118, 56, 0 ) 70% );
	mix-blend-mode: screen;
	opacity: .75;
	animation: ebBreathe 9s ease-in-out infinite alternate;
}

/* Layer 3 - the light sweep. */
.eb-hero-img::before {
	content: "";
	position: absolute;
	top: -40%;
	bottom: -40%;
	width: 38%;
	left: -45%;
	z-index: 4;
	pointer-events: none;
	background: linear-gradient( 100deg, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 252, 244, .30 ) 45%, rgba( 255, 255, 255, 0 ) 100% );
	transform: rotate( 8deg );
	filter: blur( 6px );
	animation: ebSweep 11s var( --eb-ease ) 2.4s infinite;
}

/* Layer 4 - the inset frame that draws itself in. */
.eb-hero-img::after {
	content: "";
	position: absolute;
	inset: 24px;
	z-index: 5;
	pointer-events: none;
	border: 1px solid rgba( 244, 239, 229, .40 );
	clip-path: inset( 0 0 100% 0 );
	animation: ebFrameIn 1.5s var( --eb-ease ) 1.1s forwards;
}

.eb-hero-cap {
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	opacity: 0;
	transform: translateY( 14px );
	animation: ebCapIn 1.1s var( --eb-ease ) 1.5s forwards;
}

/* --------------------------------------------------------------------------
   Measures the editor cannot set - the design specifies them in `ch`
   -------------------------------------------------------------------------- */

.eb-pretty, .eb-pretty p { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Seven gates - the hover sweep
   -------------------------------------------------------------------------- */

.eb-gate {
	background-image: linear-gradient( 90deg, rgba( 90, 30, 43, .045 ), rgba( 90, 30, 43, 0 ) 62% );
	background-size: 0% 100%;
	background-repeat: no-repeat;
	transition:
		background-size .6s var( --eb-ease ),
		padding-left .6s var( --eb-ease ),
		opacity 1.15s var( --eb-ease ),
		transform 1.15s var( --eb-ease );
}
.eb-gate:hover { background-size: 100% 100%; padding-left: 30px !important; }
.eb-gate:hover .eb-gate-txt .elementor-heading-title,
.eb-gate:hover .eb-gate-txt { color: var( --eb-bord ); }

/* --------------------------------------------------------------------------
   The letter - the vertical rule and the wax seal
   -------------------------------------------------------------------------- */

.eb-seal-rule::before {
	content: "";
	display: block;
	width: 1px;
	height: 34px;
	margin: 0 auto;
	background: linear-gradient( to bottom, transparent, rgba( 197, 160, 89, .55 ) );
}
.eb-seal {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	margin: 16px auto 0;
	border-radius: 50%;
	background: radial-gradient( circle at 36% 28%, rgba( 106, 36, 49, .92 ) 0%, rgba( 84, 27, 39, .9 ) 52%, rgba( 51, 16, 26, .92 ) 100% );
	box-shadow: 0 16px 30px -16px rgba( 0, 0, 0, .65 ), inset 0 0 0 1px rgba( 255, 255, 255, .07 );
}
.eb-seal::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 1px solid rgba( 244, 239, 229, .2 );
}
.eb-letter-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 58% 40%;
	filter: saturate( .94 );
}
.eb-letter-fig {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
.eb-letter-fig::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient( 90deg, rgba( 29, 25, 22, .18 ), transparent 60% );
}
.eb-letter-img,
.eb-letter-img .elementor-widget-container,
.eb-letter-img figure { height: 100%; }

/* --------------------------------------------------------------------------
   Footer - the brass hairline, the diamond, and the menu separators
   -------------------------------------------------------------------------- */

.eb-foot-rule::before {
	content: "";
	display: block;
	width: 1px;
	height: 38px;
	margin: 0 auto;
	background: linear-gradient( to bottom, transparent, var( --eb-brass ) );
}
.eb-foot-rule::after {
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	margin: 12px auto 0;
	transform: rotate( 45deg );
	border: 1px solid var( --eb-brass );
}

.eb-foot-nav ul.hfe-nav-menu,
.eb-foot-legal ul.hfe-nav-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.eb-foot-nav ul.hfe-nav-menu > .menu-item + .menu-item::before,
.eb-foot-legal ul.hfe-nav-menu > .menu-item + .menu-item::before {
	content: "";
	display: block;
	width: 3px;
	height: 3px;
	transform: rotate( 45deg );
	background: var( --eb-brass );
}
.eb-foot-nav ul.hfe-nav-menu > .menu-item,
.eb-foot-legal ul.hfe-nav-menu > .menu-item {
	display: flex;
	align-items: center;
}
.eb-foot-nav ul.hfe-nav-menu > .menu-item + .menu-item { gap: 34px; }
.eb-foot-legal ul.hfe-nav-menu > .menu-item + .menu-item { gap: 20px; }
.eb-foot-nav ul.hfe-nav-menu > .menu-item + .menu-item > a { margin-left: 0; }

/* The menu widget draws its own borders and indicators; the design has none. */
.eb-foot-nav .menu-item a.hfe-menu-item::after,
.eb-foot-legal .menu-item a.hfe-menu-item::after { display: none; }

/* --------------------------------------------------------------------------
   Contact Form 7
   The plugin renders this markup itself, so it cannot be reached from the
   Elementor editor. Values here mirror the design one to one.
   -------------------------------------------------------------------------- */

.eb-form .wpcf7 { margin: 0; }
.eb-form form.wpcf7-form { margin: 0; }
.eb-form .wpcf7-response-output { display: none; }
.eb-form form.invalid .wpcf7-response-output,
.eb-form form.unaccepted .wpcf7-response-output,
.eb-form form.failed .wpcf7-response-output,
.eb-form form.spam .wpcf7-response-output {
	display: block;
	margin: 20px 0 0;
	padding: 0;
	border: 0;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 12.5px;
	color: var( --eb-bord );
}
.eb-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 11px;
	letter-spacing: .02em;
	color: var( --eb-bord );
}
.eb-form .wpcf7-form-control-wrap { display: block; }

.eb-row {
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
}
.eb-row + .eb-row,
.eb-field-block + .eb-field-block,
.eb-addr > .eb-row,
.eb-addr > .eb-field-block + .eb-row { margin-top: 26px; }
.eb-addr > .eb-field-block + .eb-field-block { margin-top: 26px; }

.eb-field {
	flex: 1 1 180px;
	display: block;
	min-width: 0;
}
.eb-flabel {
	display: block;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 10px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var( --eb-ink2 );
	font-weight: 500;
	line-height: 1.75;
}
.eb-flabel i {
	font-style: normal;
	color: rgba( 29, 25, 22, .42 );
	text-transform: none;
	letter-spacing: .02em;
	font-size: 11px;
}

.eb-form .eb-field .wpcf7-form-control-wrap { position: relative; }
/* The resting hairline and the bordeaux focus sweep are painted on the input's
   own border box as two background layers.

   They used to be a pseudo-element pinned to the bottom of
   `.wpcf7-form-control-wrap`, but Contact Form 7 appends its validation tip
   inside that wrapper, after the input - so as soon as a field failed the
   wrapper grew and the underline slid down below the error message. Anchored
   to the input itself, the lines stay on the field whatever CF7 adds beneath
   it. The border stays in the box at 1px, transparent, so the field keeps
   exactly the height it had. */
.eb-form .eb-field input {
	width: 100%;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	--eb-line: var( --eb-hair );
	background-color: transparent;
	background-image:
		linear-gradient( var( --eb-bord ), var( --eb-bord ) ),
		linear-gradient( var( --eb-line ), var( --eb-line ) );
	background-repeat: no-repeat;
	background-origin: border-box;
	background-position: 0 100%, 0 100%;
	/* The resting width is `0%`, not `0` - Chrome will not interpolate a length
	   against a percentage, and a `0px` start leaves the sweep frozen. */
	background-size: 0% 1px, 100% 1px;
	transition: background-size .55s var( --eb-ease );
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 15.5px;
	line-height: 1.75;
	color: var( --eb-ink );
	padding: 12px 2px;
	font-weight: 400;
	outline: none;
	box-shadow: none;
}
.eb-form .eb-field input::placeholder { color: rgba( 29, 25, 22, .5 ); }
.eb-form .eb-field input:focus,
.eb-form .eb-field input:not( :placeholder-shown ),
.eb-form .eb-field input.eb-filled { background-size: 100% 1px, 100% 1px; }

/* A field that failed validation keeps its hairline in bordeaux, so the state
   is legible before the visitor puts the cursor back in it. */
.eb-form .eb-field input.wpcf7-not-valid { --eb-line: var( --eb-bord ); }

/* The optional-entry card */
.eb-entry {
	position: relative;
	display: block;
	margin-top: 30px;
	padding: 18px 20px;
	border: 1px solid var( --eb-hair );
	background: rgba( 251, 248, 242, .55 );
	transition: border-color .45s var( --eb-ease ), background .45s var( --eb-ease );
}
.eb-entry:hover { border-color: var( --eb-brass ); background: rgba( 251, 248, 242, .9 ); }
.eb-entry:has( input:checked ) { border-color: var( --eb-brass ); }
.eb-entry .wpcf7-list-item { margin: 0; }
.eb-entry label {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	cursor: pointer;
}
.eb-entry input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.eb-entry label::before {
	content: "";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	border: 1px solid var( --eb-brass );
	transition: border-color .35s var( --eb-ease );
}
.eb-entry label::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    width: 8px;
    height: 8px;
    background: var(--eb-bord);
    transform: scale(0);
    transition: transform .35s var(--eb-ease);
}
.eb-entry label:has( input:checked )::before { border-color: var( --eb-bord ); }
.eb-entry label:has( input:checked )::after { transform: scale( 1 ); }
.eb-entry .wpcf7-list-item-label {
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 14px;
	color: var( --eb-ink );
	font-weight: 400;
	line-height: 1.6;
}
.eb-entry-sub {
	display: block;
	margin: 4px 0 0 32px;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 12.5px;
	color: rgba( 29, 25, 22, .55 );
	line-height: 1.6;
	font-weight: 300;
}

/* The optional second pane. Conditional Fields decides whether the group
   exists at all; this decides when it is on screen. */
.eb-form form:not( .eb-on-step2 ) .eb-addr { display: none; }
.eb-form form.eb-on-step2 .eb-step1 { display: none; }
.eb-addr > .eb-field-block:first-child { margin-top: 0; }
.eb-step-back {
	display: inline-block;
	margin-top: 28px;
	background: none;
	border: 0;
	padding: 0;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var( --eb-ink2 );
	font-weight: 500;
	cursor: pointer;
	transition: color .35s;
}
.eb-step-back:hover { color: var( --eb-bord ); }
.eb-form form:not( .eb-on-step2 ) .eb-back-row { display: none; }
.eb-sub-form .eb-back-row { text-align: center; }

/* Submit */
.eb-btnrow {
	display: flex;
	gap: 26px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 36px;
}
.eb-sub-form .eb-btnrow { justify-content: center; margin-top: 38px; }
.eb-btnwrap {
	position: relative;
	display: inline-block;
	overflow: hidden;
	isolation: isolate;
	background: var( --eb-bord );
	transition: transform .5s var( --eb-ease ), box-shadow .5s var( --eb-ease );
}
.eb-btnwrap::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var( --eb-ink );
	transform: translateY( 101% );
	transition: transform .55s var( --eb-ease );
	z-index: 0;
}
.eb-btnwrap:hover { transform: translateY( -2px ); box-shadow: 0 18px 34px -22px rgba( 29, 25, 22, .75 ); }
.eb-btnwrap:hover::before { transform: translateY( 0 ); }
.eb-form .wpcf7-submit {
	position: relative;
	z-index: 1;
	display: block;
	background: transparent;
	color: var( --eb-cream );
	border: 0;
	border-radius: 0;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 11px;
	letter-spacing: .24em;
	text-transform: uppercase;
	font-weight: 500;
	line-height: 1.75;
	padding: 19px 44px;
	cursor: pointer;
	transition: none;
}
.eb-sub-form .wpcf7-submit { padding: 19px 48px; }
.eb-form .wpcf7-spinner {
	position: absolute;
	right: -34px;
	top: 50%;
	transform: translateY( -50% );
	margin: 0;
}
.eb-btnnote {
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 12.5px;
	color: rgba( 29, 25, 22, .58 );
	font-weight: 400;
	max-width: 26ch;
	line-height: 1.7;
}
.eb-optin-note {
	display: block;
	margin-top: 20px;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 12.5px;
	color: rgba( 29, 25, 22, .58 );
	font-weight: 400;
	text-align: center;
}

/* The confirmation panel replaces the form once the letter is on its way. */
.eb-thanks { display: none; }
.eb-form form.sent .eb-thanks {
	display: block;
	margin-top: 40px;
	max-width: 520px;
	border: 1px solid var( --eb-hair );
	background: rgba( 251, 248, 242, .75 );
	padding: 44px 40px;
	animation: ebCapIn .9s var( --eb-ease ) forwards;
	opacity: 0;
	transform: translateY( 14px );
}
.eb-sub-form form.sent .eb-thanks {
	max-width: none;
	padding: 52px 40px;
	text-align: center;
}
.eb-form form.sent .eb-step1,
.eb-form form.sent .eb-addr,
.eb-form form.sent .eb-btnrow,
.eb-form form.sent .eb-back-row,
.eb-form form.sent .eb-optin-note { display: none !important; }

.eb-thanks-rule {
	display: block;
	width: 1px;
	height: 30px;
	background: linear-gradient( to bottom, transparent, var( --eb-brass ) );
}
.eb-sub-form .eb-thanks-rule { margin: 0 auto; }
.eb-thanks-eyebrow {
	display: block;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 11px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var( --eb-brass );
	font-weight: 500;
	margin-top: 22px;
}
.eb-thanks-title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 300;
	font-size: clamp( 26px, 3vw, 38px );
	line-height: 1.18;
	margin-top: 14px;
	color: var( --eb-ink );
}
.eb-thanks-body {
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 15.5px;
	line-height: 1.9;
	color: var( --eb-ink2 );
	margin-top: 18px;
	max-width: 44ch;
	font-weight: 400;
	text-wrap: pretty;
}
.eb-thanks-body em { font-style: italic; color: var( --eb-bord ); }
.eb-thanks-note {
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 12.5px;
	color: rgba( 29, 25, 22, .55 );
	margin-top: 20px;
	line-height: 1.7;
	font-weight: 400;
}
.eb-sub-form .eb-thanks-body,
.eb-sub-form .eb-thanks-note { margin-left: auto; margin-right: auto; }
.eb-sub-form .eb-thanks-note { max-width: 48ch; }

/* --------------------------------------------------------------------------
   Narrow viewports - only the pieces that are positioned here
   -------------------------------------------------------------------------- */


@media ( max-width: 760px ) {
	.eb-hero-img::after { inset: 14px; }
	.eb-row { gap: 18px; }
	.eb-form .wpcf7-spinner { right: 6px; }
}

/* --------------------------------------------------------------------------
   Elementor / plugin bridge
   Rules that exist only because the builder or a plugin renders the markup.
   Anything that could be set on the widget itself, was.
   -------------------------------------------------------------------------- */

/* The hero wraps at the point the two columns stop fitting - a min-width
   question rather than a breakpoint, and Elementor has no min-width control. */
.eb-hero-copy { min-width: min( 100%, 440px ); }
.eb-hero-media { min-width: min( 100%, 360px ); }

/* Text editor paragraphs carry spacing on the widget, not the tag. */
.eb-mail .elementor-widget-text-editor em { font-style: italic; color: var( --eb-bord ); }
.eb-letter .elementor-widget-text-editor em { color: inherit; }

/* Baseline alignment - the container control offers no baseline option. */
.eb-gate, .eb-lrow { align-items: baseline; }
.eb-gate-txt, .eb-lrow-desc { flex: 1 1 200px; min-width: 0; }
.eb-gate-num, .eb-lrow-num, .eb-lrow-label { flex: 0 0 auto; }

/* Thesis band - the brass glow that breathes behind the quote. */
.eb-band { position: relative; }
.eb-band::before {
	content: "";
	position: absolute;
	inset: -30% -10%;
	pointer-events: none;
	background: radial-gradient( 45% 55% at 50% 50%, rgba( 154, 118, 56, .34 ) 0%, rgba( 154, 118, 56, 0 ) 70% );
	animation: ebBreathe 12s ease-in-out infinite alternate;
}
.eb-band > .e-con-inner { position: relative; }

/* The wax seal is a heading widget; the disc itself is drawn here. */
.eb-seal .elementor-widget-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.eb-seal .elementor-heading-title { line-height: 1; }

/* Header logo never overflows its column. */
.eb-hdr-logo img { max-width: 100%; height: auto; }

/* Footer social - Elementor has no padding control for the icon box. */
.eb-foot-social .elementor-widget-container .elementor-icon.elementor-social-icon {
	width: 38px;
	height: 38px;
	padding: 0;
	transition: color .35s, border-color .35s, transform .35s, background-color .35s;
}
.eb-foot-social .elementor-social-icon:hover { transform: translateY( -2px ); }
.eb-foot-social .elementor-social-icon svg,
.eb-foot-social .elementor-social-icon i { font-size: 18px; width: 18px; height: 18px; }

/* HFE wraps the footer in a helper div that must not clip the layout. */
.footer-width-fixer { width: 100%; }

/* Contact Form 7 checkbox markup is inline by default. */
.eb-entry .wpcf7-form-control.wpcf7-checkbox,
.eb-entry .wpcf7-list-item { display: block; }

/* The rule and diamond are drawn as pseudo-elements; the spacer box itself
   only exists because Elementor will not render a zero-height spacer. */
.eb-foot-rule .elementor-spacer,
.eb-seal-rule .elementor-spacer { display: none; }

/* --------------------------------------------------------------------------
   Measures in `ch`
   Elementor gives every widget `max-width: 100%`, and there is no max-width
   control in the panel, so the design's `ch` measures are applied to the
   element that actually carries the type - the heading title, or the widget
   container for a text editor, where 1ch resolves against the right font.
   -------------------------------------------------------------------------- */

.eb-m20 .elementor-heading-title, .eb-m20 > .elementor-widget-container > p, .eb-m20 > p { max-width: 20ch; }
.eb-m24 .elementor-heading-title, .eb-m24 > .elementor-widget-container > p, .eb-m24 > p { max-width: 24ch; margin-left: auto; margin-right: auto; }
.eb-m26 .elementor-heading-title, .eb-m26 > .elementor-widget-container > p, .eb-m26 > p { max-width: 26ch; }
.eb-m34 .elementor-heading-title, .eb-m34 > .elementor-widget-container > p, .eb-m34 > p { max-width: 34ch; }
.eb-m44 .elementor-heading-title, .eb-m44 > .elementor-widget-container > p, .eb-m44 > p { max-width: 44ch; }
.eb-m48 .elementor-heading-title, .eb-m48 > .elementor-widget-container > p, .eb-m48 > p { max-width: 48ch; margin-left: auto; margin-right: auto; }
.eb-m50 .elementor-heading-title, .eb-m50 > .elementor-widget-container > p, .eb-m50 > p { max-width: 50ch; }
.eb-m52 .elementor-heading-title, .eb-m52 > .elementor-widget-container > p, .eb-m52 > p { max-width: 52ch; }
.eb-m60 .elementor-heading-title, .eb-m60 > .elementor-widget-container > p, .eb-m60 > p { max-width: 60ch; }

/* --------------------------------------------------------------------------
   Sticky header
   UAE ships `.ehf-header #masthead { position: relative }`, which the design's
   sticky header has to outrank.
   -------------------------------------------------------------------------- */

body.ehf-header #masthead {
	position: sticky;
	top: var( --eb-bar );
	z-index: 60;
}

/* The scrolled bar is 20px shorter than the resting one. If the masthead shrank
   with it, the whole page below would jump 20px every time the state changed -
   and the state changes right next to the top of the page, where a reader is
   most likely to come to rest. The masthead keeps the resting height as a floor
   instead, so only the bar moves and the document never re-flows. The strip that
   leaves below the bar is empty and must not swallow clicks meant for the page. */
body.ehf-header #masthead {
	min-height: var( --eb-hdr );
	pointer-events: none;
}
body.ehf-header #masthead > * {
	pointer-events: auto;
}

/* The UAE logo widget wraps the image in inline boxes, which adds a baseline
   gap under it. */
.eb-hdr-logo img { display: block; }
.eb-hdr-logo a,
.eb-hdr-logo .hfe-site-logo-set,
.eb-hdr-logo .hfe-site-logo-container { display: block; line-height: 1; }

/* Text editor paragraphs must take the widget's type, not the theme's. */
.eb-mail .elementor-widget-text-editor p {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	line-height: inherit;
	margin: 0;
}

/* The closing form runs on a slightly tighter rhythm than the hero form. */
.eb-sub-form .eb-row { gap: 24px; }
.eb-sub-form .eb-row + .eb-row,
.eb-sub-form .eb-addr > .eb-row,
.eb-sub-form .eb-addr > .eb-field-block + .eb-field-block,
.eb-sub-form .eb-addr > .eb-field-block + .eb-row { margin-top: 24px; }
.eb-sub-form .eb-entry { margin-top: 26px; }

/* The letter columns wrap on the same min-width rule the design uses. */
.eb-letter-fig, .eb-letter-copy { min-width: min( 100%, 320px ); }

/* The closing form's fields sit on a 160px basis, the hero form's on 180px. */
.eb-sub-form .eb-field { flex: 1 1 160px; }

/* Wrapped footer menu rows keep the same gap the row itself uses. UAE's own
   row-space control adds the gap even when nothing wraps, so it lives here. */
.eb-foot-nav ul.hfe-nav-menu { row-gap: 34px; }
.eb-foot-legal ul.hfe-nav-menu { row-gap: 20px; }

/* UAE prints a hamburger toggle even when the responsive dropdown is off. */
.eb-foot-nav .hfe-nav-menu__toggle,
.eb-foot-legal .hfe-nav-menu__toggle { display: none; }

/* --------------------------------------------------------------------------
   Elementor editor canvas

   The reveal choreography parks every animated element at `opacity: 0` and
   waits for eb-motion.js to add `is-in`. That is correct on the front of the
   site, but the editor rebuilds each widget from its own JavaScript template
   after the page has loaded, throwing those classes away - so the canvas went
   blank apart from the hero photograph and the section backgrounds, which are
   pure CSS.

   Inside the editor there is no motion: everything rests in its final state so
   the owner can see and click what they are editing. `body.eb-editor` is set
   by the child theme when Elementor renders the preview, and survives the
   editor's own class juggling; `elementor-editor-active` / `-preview` are
   Elementor's, kept as a safety net.
   -------------------------------------------------------------------------- */

body.eb-editor .eb-rl,
body.elementor-editor-active .eb-rl,
body.elementor-editor-preview .eb-rl { overflow: visible; }

body.eb-editor .eb-rl > *,
body.eb-editor .eb-rv,
body.eb-editor .eb-hero-cap,
body.eb-editor .eb-door__sub,
body.elementor-editor-active .eb-rl > *,
body.elementor-editor-active .eb-rv,
body.elementor-editor-active .eb-hero-cap,
body.elementor-editor-preview .eb-rl > *,
body.elementor-editor-preview .eb-rv,
body.elementor-editor-preview .eb-hero-cap {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	animation: none !important;
}

/* The clipped frame and the looping ambience only distract in the canvas. */
body.eb-editor .eb-hero-img::after,
body.elementor-editor-active .eb-hero-img::after,
body.elementor-editor-preview .eb-hero-img::after {
	clip-path: none !important;
	animation: none !important;
}
body.eb-editor .eb-hero-img img,
body.eb-editor .eb-hero-img::before,
body.eb-editor .eb-hero-media::after,
body.eb-editor .eb-band::before,
body.eb-editor .eb-grain,
body.elementor-editor-active .eb-hero-img img,
body.elementor-editor-active .eb-hero-img::before,
body.elementor-editor-active .eb-hero-media::after,
body.elementor-editor-active .eb-band::before,
body.elementor-editor-active .eb-grain { animation: none !important; }

/* The entrance doors and the reading-progress bar are front-of-site chrome.
   The theme does not print them in the editor; this covers a cached render. */
body.eb-editor .eb-door,
body.eb-editor .eb-prog,
body.elementor-editor-active .eb-door,
body.elementor-editor-active .eb-prog,
body.elementor-editor-preview .eb-door,
body.elementor-editor-preview .eb-prog { display: none !important; }