@charset "UTF-8";
/**
 * ElevatorApp front-end styles.
 *
 * Design tokens (color, font, spacing) come from theme.json as CSS custom
 * properties (--wp--preset--*). This file styles the homepage section
 * components that core block supports can't express cleanly on their own.
 * Mobile-first: base rules target phones; min-width queries scale up.
 *
 * The Ask Box block ships its own styles in the plugin (blocks/ask-box/style.css).
 */

/* ---------------------------------------------------------------------------
   Tokens shorthand (local aliases to the theme.json presets)
--------------------------------------------------------------------------- */
:root {
	--ea-navy: var(--wp--preset--color--navy);
	--ea-navy-deep: var(--wp--preset--color--navy-deep);
	--ea-steel: var(--wp--preset--color--steel);
	--ea-amber: var(--wp--preset--color--amber);
	--ea-amber-dark: var(--wp--preset--color--amber-dark);
	--ea-ink: var(--wp--preset--color--ink);
	--ea-muted: var(--wp--preset--color--muted);
	--ea-line: var(--wp--preset--color--line);
	--ea-sky: var(--wp--preset--color--sky);
	--ea-white: var(--wp--preset--color--white);
	--ea-maxw: 1160px;
	--ea-radius-card: 14px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { -webkit-font-smoothing: antialiased; }

/* Shared visual focus ring for keyboard users (WCAG 2.4.7 / 2.4.11). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.wp-block-button__link:focus-visible,
.ea-chip:focus-visible,
.ea-qlink:focus-visible {
	outline: 2px solid var(--ea-amber);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Skip link */
.ea-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--ea-navy);
	color: #fff;
	padding: 12px 18px;
	border-radius: 0 0 8px 0;
	font-weight: 600;
}
.ea-skip-link:focus { left: 0; }

/* Constrained inner wrapper for custom sections. */
.ea-wrap { max-width: var(--ea-maxw); margin-inline: auto; padding-inline: 28px; width: 100%; }

.ea-eyebrow {
	font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--ea-steel); margin: 0;
}
.ea-eyebrow.is-on-dark { color: var(--ea-amber); }

/* Section vertical rhythm (mobile-first). */
.ea-section { padding-block: 60px; }
@media (min-width: 782px) { .ea-section { padding-block: 82px; } }

.ea-sec-head { max-width: 60ch; margin: 0 auto 32px; }
.ea-sec-head.is-left { margin-inline: 0; }
@media (min-width: 782px) { .ea-sec-head { margin-bottom: 42px; } }
.ea-sec-head p { color: var(--ea-muted); font-size: 18px; margin-top: 14px; }

/* ---------------------------------------------------------------------------
   Buttons (core buttons styled by theme.json; these are the extra variants)
--------------------------------------------------------------------------- */
.wp-block-button.is-style-ea-ghost .wp-block-button__link {
	background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.28);
}
.wp-block-button.is-style-ea-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ea-ghost .wp-block-button__link:focus {
	border-color: var(--ea-amber); color: var(--ea-amber);
}
.wp-block-button.is-style-ea-outline .wp-block-button__link {
	background: #fff; color: var(--ea-navy); border: 1px solid var(--ea-line);
}
.wp-block-button.is-style-ea-outline .wp-block-button__link:hover,
.wp-block-button.is-style-ea-outline .wp-block-button__link:focus {
	border-color: var(--ea-steel); color: var(--ea-steel);
}

/* ---------------------------------------------------------------------------
   Header
--------------------------------------------------------------------------- */
.ea-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--ea-white); border-bottom: 1px solid var(--ea-line);
}
.ea-header .ea-bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; min-height: 72px;
}
.ea-header .ea-logo img,
.ea-header .ea-logo svg { height: 30px; width: auto; display: block; }
.ea-header .ea-nav { display: none; gap: 26px; font-size: 15px; font-weight: 500; }
.ea-header .ea-nav a { color: var(--ea-ink); }
.ea-header .ea-nav a:hover { color: var(--ea-steel); }
.ea-bar-right { display: flex; align-items: center; gap: 14px; }
.ea-header .ea-login { font-size: 15px; font-weight: 500; color: var(--ea-ink); display: none; margin: 0; }
.ea-header .ea-login a { color: var(--ea-ink); }
.ea-header .ea-login a:hover { color: var(--ea-steel); }
@media (min-width: 940px) {
	.ea-header .ea-nav { display: flex; }
	.ea-header .ea-login { display: inline-block; }
	.ea-bar-right { gap: 18px; }
}

/* ---------------------------------------------------------------------------
   Hero
--------------------------------------------------------------------------- */
.ea-hero {
	position: relative; overflow: hidden; color: #fff;
	background:
		linear-gradient(135deg, rgba(14,38,60,0.96) 0%, rgba(21,52,80,0.93) 55%, rgba(21,52,80,0.88) 128%),
		url(../img/ea-traction-machine.jpg) center right / cover no-repeat,
		var(--ea-navy-deep);
}
@media (min-width: 782px) {
	.ea-hero {
		background:
			linear-gradient(115deg, rgba(14,38,60,0.97) 0%, rgba(14,38,60,0.94) 34%, rgba(21,52,80,0.84) 66%, rgba(21,52,80,0.76) 128%),
			url(../img/ea-traction-machine.jpg) right center / cover no-repeat,
			var(--ea-navy-deep);
	}
}
.ea-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(1100px 440px at 82% -12%, rgba(246,178,30,0.14), transparent 60%);
}
.ea-hero .ea-hero-inner { position: relative; max-width: 820px; padding-block: 44px 52px; }
@media (min-width: 782px) { .ea-hero .ea-hero-inner { padding-block: 52px 60px; } }
.ea-hero h1 { color: #fff; font-weight: 800; }
.ea-kicker {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 14px; font-weight: 600; color: var(--ea-amber); margin-bottom: 18px;
}
.ea-kicker::before {
	content: ""; width: 8px; height: 8px; border-radius: 50%;
	background: var(--ea-amber); box-shadow: 0 0 10px var(--ea-amber);
}
.ea-hero .ea-sub {
	margin-top: 18px; font-size: 19px; color: rgba(255,255,255,0.82); max-width: 48ch;
}

/* ---------------------------------------------------------------------------
   Dispatch
--------------------------------------------------------------------------- */
.ea-dispatch { background: var(--ea-sky); border-bottom: 1px solid var(--ea-line); }
.ea-dispatch-card {
	display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
	background: var(--ea-white); border: 1px solid var(--ea-line);
	border-radius: 18px; padding: 28px; box-shadow: 0 20px 50px rgba(21,52,80,0.07);
}
@media (min-width: 820px) {
	.ea-dispatch-card { grid-template-columns: 1.1fr 0.9fr; gap: 40px; padding: 40px; }
}
.ea-dispatch-card h2 { font-weight: 800; }
.ea-dispatch-card p { margin-top: 12px; color: var(--ea-muted); font-size: 17px; max-width: 44ch; }
.ea-dispatch-card p.is-safety { margin-top: 14px; font-size: 15px; }
.ea-dispatch-actions { display: flex; flex-direction: column; gap: 14px; }
.ea-call {
	display: flex; align-items: center; gap: 16px;
	background: var(--ea-navy); color: #fff; border-radius: 14px; padding: 22px 24px;
}
.ea-call:hover { background: var(--ea-navy-deep); }
.ea-call .ea-ring {
	width: 46px; height: 46px; border-radius: 50%; background: var(--ea-amber);
	color: #20160a; display: grid; place-items: center; flex: none;
}
.ea-call .ea-lbl { font-size: 13px; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.1em; }
.ea-call .ea-num { font-family: var(--wp--preset--font-family--sora); font-weight: 800; font-size: 24px; }
.ea-or { display: flex; align-items: center; gap: 12px; color: #8A94A0; font-size: 13px; }
.ea-or::before, .ea-or::after { content: ""; height: 1px; background: var(--ea-line); flex: 1; }

/* "What happens next" 3-step */
.ea-steps { display: grid; gap: 12px; margin-top: 22px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ea-steps { grid-template-columns: repeat(3, 1fr); } }
.ea-step { background: var(--ea-sky); border: 1px solid var(--ea-line); border-radius: 12px; padding: 16px 18px; }
.ea-step .ea-step-n {
	display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
	background: var(--ea-navy); color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 8px;
}
.ea-step h3 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.ea-step p { font-size: 14px; color: var(--ea-muted); margin: 0; }

/* Service-page "How it works" (reuses .ea-steps) */
.ea-how { margin: 30px 0 12px; }
.ea-how-h { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.ea-step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ea-step-ic { width: 22px; height: 22px; color: var(--ea-steel); opacity: 0.9; }
/* Compact horizontal step flow with arrows (service pages). Mobile: stacks, arrows point down. */
.ea-flow { display: flex; align-items: stretch; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.ea-flow .ea-step { flex: 1 1 0; min-width: 155px; margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.ea-flow .ea-step-lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ea-steel); }
.ea-flow .ea-step h3 { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 500; }
.ea-flow .ea-step p { margin: 3px 0 0; }
.ea-flow-arrow { display: flex; align-items: center; flex: none; color: var(--ea-steel); font-size: 20px; font-weight: 800; }
@media (max-width: 640px) {
	.ea-flow { flex-direction: column; align-items: stretch; }
	.ea-flow-arrow { transform: rotate(90deg); align-self: center; }
}

/* Owner-fill placeholder token styling (dev only; visually flags TODOs). */
.ea-placeholder {
	display: inline-block; background: rgba(246,178,30,0.16);
	border: 1px dashed var(--ea-amber-dark); border-radius: 6px;
	padding: 0 6px; font-weight: 600; color: #7a5600;
}

/* Form embed slot */
.ea-form-slot { margin-top: 8px; }

/* Pricing transparency line (Standard 8: no hidden fees). */
.ea-dispatch-fee {
	max-width: 60ch; margin: 22px auto 0; color: var(--ea-muted);
	font-size: 15px;
}

/* Secondary "request online" link under the call CTA. */
.ea-or-online { text-align: center; margin: 12px 0 0; font-size: 14px; }
.ea-or-online a { color: var(--ea-steel); font-weight: 600; }
.ea-dispatch-hours { text-align: center; font-size: 13px; color: var(--ea-muted); margin: 8px 0 0; font-weight: 600; letter-spacing: 0.02em; }

/* Request-service form: collapsed by default (native <details>) so it doesn't
   dominate the section. Opens on click — no JS. */
.ea-request { max-width: 680px; margin: 34px auto 0; }
.ea-request-summary {
	list-style: none; cursor: pointer; display: block; text-align: center;
	background: var(--ea-white); color: var(--ea-navy);
	border: 2px solid var(--ea-navy); border-radius: 10px;
	padding: 14px 24px;
	box-shadow: 0 6px 18px rgba(21,52,80,0.12);
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ea-request-summary::-webkit-details-marker { display: none; }
.ea-rs-title { display: block; font-weight: 700; font-size: 16px; }
.ea-rs-title::after { content: " \2193"; color: var(--ea-amber-dark); }
.ea-rs-call { display: block; margin-top: 3px; font-weight: 500; font-size: 13.5px; color: var(--ea-muted); }
.ea-rs-call a { color: var(--ea-steel); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.ea-rs-call a:hover { color: var(--ea-navy); }
.ea-request-summary:hover { border-color: var(--ea-steel); color: var(--ea-steel); box-shadow: 0 10px 26px rgba(21,52,80,0.16); }
.ea-request[open] .ea-request-summary {
	border-color: var(--ea-line); border-bottom: none;
	border-radius: 10px 10px 0 0; background: var(--ea-sky);
}
.ea-request[open] .ea-rs-title::after { content: " \2191"; }
.ea-request-body {
	border: 1px solid var(--ea-line); border-top: none;
	border-radius: 0 0 12px 12px; padding: 24px; background: var(--ea-white);
}
.ea-request-sub { color: var(--ea-muted); font-size: 15px; margin: 0 0 18px; text-align: center; }
/* Keep the embedded Gravity Form tight. */
.ea-request-body .gform_wrapper { margin: 0; }

/* "No provider — call us" callout inside the intake form */
.ea-callout {
	background: rgba(246,178,30,0.12); border: 1px solid var(--ea-amber);
	border-radius: 10px; padding: 16px 18px; font-size: 15px; line-height: 1.5;
	color: var(--ea-ink);
}
.ea-callout strong { color: var(--ea-navy); }
.ea-request-body .gform_footer { padding-bottom: 0; margin-bottom: 0; }

/* Gravity Forms — dispatch intake, styled to match ElevatorApp.
   Form #23 runs in GF's MODERN themed framework (markupVersion 2), whose
   own styles sit in a cascade layer — so these unlayered author rules win
   cleanly without !important. Two-column layout via our own .ea-half class. */
.ea-request-body .gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 16px;
	align-items: start;
	margin: 0;
	padding: 0;
}
.ea-request-body .gform_wrapper .gform_fields > .gfield { grid-column: 1 / -1; }
.ea-request-body .gform_wrapper .gform_fields > .gfield.ea-half { grid-column: span 1; }
@media (max-width: 560px) {
	.ea-request-body .gform_wrapper .gform_fields > .gfield.ea-half { grid-column: 1 / -1; }
}

.ea-request-body .gfield_label {
	font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--ea-ink);
	margin: 0 0 7px; display: block;
}
.ea-request-body .gfield_required { color: var(--ea-amber-dark); margin-left: 2px; }

.ea-request-body input[type="text"],
.ea-request-body input[type="email"],
.ea-request-body input[type="tel"],
.ea-request-body input[type="number"],
.ea-request-body textarea,
.ea-request-body select {
	width: 100%; box-sizing: border-box;
	border: 1px solid var(--ea-line); border-radius: 10px;
	padding: 12px 14px; font: inherit; font-size: 16px; line-height: 1.5;
	color: var(--ea-ink); background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ea-request-body input:focus,
.ea-request-body textarea:focus,
.ea-request-body select:focus {
	outline: none; border-color: var(--ea-steel);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ea-amber) 32%, transparent);
}
.ea-request-body input::placeholder,
.ea-request-body textarea::placeholder { color: #98a2b0; }

/* Textarea starts compact (~2 rows); ea-form-enhance.js grows it as text fills it. */
.ea-request-body textarea { min-height: 52px; overflow: hidden; resize: none; }

/* Custom select chevron so the dropdown matches the brand, not the OS default.
   line-height:normal is required — a larger line-height clips the selected
   value inside a native <select> in Chrome. */
.ea-request-body select {
	appearance: none; -webkit-appearance: none;
	line-height: normal; height: auto; min-height: 48px;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23516074' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center;
}

/* Bottom-align the "who is your provider?" box with the Yes/No buttons
   (its label is one line vs the two-line radio label). Desktop only —
   on mobile the fields stack. */
@media (min-width: 561px) {
	.ea-request-body .gform_wrapper .gform_fields > #field_23_8 { align-self: end; }
}

.ea-request-sub a { color: var(--ea-steel); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.ea-request-sub a:hover { color: var(--ea-ink); }

.ea-request-body .gfield_description { color: var(--ea-muted); font-size: 13px; margin-top: 5px; }

/* Radios */
/* Yes/No render as compact click-buttons — no radio circle, side by side.
   GF's orbital theme lays choices out full-width one-per-row, so we force
   the row and reset the per-choice width. */
.ea-request-body .gform_wrapper .gfield_radio {
	list-style: none; display: flex !important; flex-flow: row wrap;
	gap: 10px; padding: 0; margin: 8px 0 0;
}
.ea-request-body .gform_wrapper .gchoice {
	position: relative; display: inline-flex; flex: 0 0 auto;
	width: auto !important; max-width: none; margin: 0;
}
.ea-request-body .gchoice input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.ea-request-body .gchoice label {
	margin: 0; cursor: pointer; user-select: none; text-align: center; min-width: 88px;
	border: 1.5px solid var(--ea-line); border-radius: 10px;
	padding: 10px 26px; font-weight: 600; font-size: 15px; color: var(--ea-ink); background: #fff;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ea-request-body .gchoice label:hover { border-color: var(--ea-steel); }
.ea-request-body .gchoice:has(input:checked) label {
	border-color: var(--ea-amber-dark); background: color-mix(in srgb, var(--ea-amber) 16%, #fff);
	box-shadow: inset 0 0 0 1px var(--ea-amber-dark);
}
.ea-request-body .gchoice:has(input:focus-visible) label {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ea-amber) 32%, transparent);
}

/* Payment: $50 fee summary line + Stripe card field (shown on the Yes path). */
.ea-request-body .gfield.ea-fee { background: var(--ea-sky); border: 1px solid var(--ea-line); border-radius: 10px; padding: 14px 16px; }
.ea-request-body .gfield.ea-fee .gfield_label { margin-bottom: 4px; }
.ea-request-body .gfield.ea-fee .ginput_container_product,
.ea-request-body .gfield.ea-fee .ginput_product_price,
.ea-request-body .gfield.ea-fee .gfield_price { font-size: 18px; font-weight: 700; color: var(--ea-ink); }
.ea-request-body .ginput_container_creditcard,
.ea-request-body .ginput_container_stripe_creditcard,
.ea-request-body .ginput_stripe_creditcard,
.ea-request-body .GFStripeCard {
	border: 1px solid var(--ea-line); border-radius: 10px; padding: 13px 14px; background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ea-request-body .ginput_container_creditcard:focus-within,
.ea-request-body .ginput_container_stripe_creditcard:focus-within,
.ea-request-body .GFStripeCard.StripeElement--focus,
.ea-request-body .StripeElement--focus {
	border-color: var(--ea-steel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ea-amber) 32%, transparent);
}
.ea-request-body .StripeElement { width: 100%; }

/* Submit */
.ea-request-body .gform_footer { margin-top: 22px; }
.ea-request-body .gform_footer input[type="submit"],
.ea-request-body .gform_footer button {
	background: var(--ea-amber); color: var(--ea-amber-ink, #20160A); border: none;
	border-radius: 10px; padding: 14px 32px; font-weight: 700; font-size: 16px; cursor: pointer;
	box-shadow: 0 1px 2px rgba(21,52,80,0.10);
	transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.ea-request-body .gform_footer input[type="submit"]:hover,
.ea-request-body .gform_footer button:hover {
	background: var(--ea-amber-dark); transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(21,52,80,0.16);
}

.ea-request-body .validation_message,
.ea-request-body .gfield_validation_message { color: #B42318; font-size: 13px; margin-top: 5px; }
.ea-request-body .gform_validation_errors { border: 1px solid #F0C6C0; background: #FEF6F5; border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; }

/* Pre-payment note ("we'll ask for the address after payment") */
.ea-prepay-note { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ea-steel); background: var(--ea-sky, #eef4fb); border: 1px solid var(--ea-line); border-radius: 10px; padding: 11px 14px; }

/* Step-2 post-payment details page */
.page-id-10265 .wp-block-post-title { display: none; } /* drop the duplicate theme page title */
.ea-step2-wrap { padding: 28px 16px 56px; }
.ea-step2-wrap > h1 { font-size: clamp(1.35rem, 5vw, 1.8rem); font-weight: 700; line-height: 1.2; margin: 0 0 8px; }
.ea-step2-wrap > p { color: var(--ea-muted); font-size: 15.5px; line-height: 1.5; margin: 0; }
.ea-step2-wrap .ea-request-body { margin-top: 18px; border-radius: 14px; padding: 20px; }
@media (max-width: 560px) {
	.ea-step2-wrap { padding: 18px 12px 44px; }
	.ea-step2-wrap .ea-request-body { padding: 16px; }
}

/* Form pages (Contact, etc.) — hide the duplicate theme title on any page that
   uses the .ea-form-page wrapper, and give it the same clean, mobile-first frame. */
body:has(.ea-form-page) .wp-block-post-title { display: none; }
.ea-form-page { padding: 32px 16px 64px; }
.ea-form-page > h1 { font-size: clamp(1.6rem, 5.5vw, 2.15rem); font-weight: 700; line-height: 1.15; margin: 0 0 10px; }
.ea-form-page > p { color: var(--ea-muted); font-size: 16px; line-height: 1.55; margin: 0 0 10px; }
.ea-form-page .ea-contact-note { font-size: 13.5px; line-height: 1.5; color: var(--ea-steel); background: var(--ea-sky, #eef4fb); border: 1px solid var(--ea-line); border-radius: 10px; padding: 11px 14px; margin: 4px 0 0; }
.ea-form-page .ea-contact-note a { color: var(--ea-steel); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.ea-form-page > .ea-request-body { margin-top: 22px; border-radius: 14px; padding: 24px; }
.ea-form-page .ea-request { margin-top: 26px; }
@media (max-width: 560px) {
	.ea-form-page { padding: 22px 12px 48px; }
	.ea-form-page > .ea-request-body { padding: 16px; }
}

/* Mobile hamburger (WP Mobile Menu) — amber font icon so it's visible on ANY
   background (it was steel-blue and vanished over the dark hero). */
.mob-menu-icon,
.mobmenu-trigger-action .mob-menu-icon,
.mobmenu-trigger-action,
.mob-icon-close { color: var(--ea-amber, #EDA31B) !important; }

/* Dispatch Terms of Service — compact scrollable box + required consent checkbox */
.ea-request-body .ea-terms-intro { font-size: 14px; font-weight: 600; color: var(--ea-ink); margin: 0 0 8px; }
.ea-request-body .ea-terms-scroll {
	max-height: 240px; overflow-y: auto; overscroll-behavior: contain;
	border: 1px solid var(--ea-line); border-radius: 10px; padding: 14px 16px; background: #fbfcfd;
	font-size: 10px; line-height: 1.3; color: var(--ea-ink);
}
.ea-request-body .ea-terms-scroll:focus-visible { outline: 2px solid var(--ea-steel); outline-offset: 2px; }
.ea-request-body .ea-terms-scroll p { margin: 0 0 2px; }
.ea-request-body .ea-terms-scroll .ea-terms-title { font-size: 11px; text-align: center; margin-bottom: 2px; }
.ea-request-body .ea-terms-scroll .ea-terms-note { text-align: center; color: var(--ea-muted); font-style: italic; margin-bottom: 5px; }
.ea-request-body .ea-terms-scroll .ea-terms-h { margin: 6px 0 1px; color: var(--ea-navy); }

/* Fee field — one label only (drop GF's redundant "Price" sub-label), keep the amount */
.ea-request-body .ea-fee .ginput_product_price_wrapper label { display: none; }

/* Compact fee: price is baked into the label ("… — $150"); hide GF's price input box */
.ea-request-body .ea-fee .ginput_container_singleproduct { display: none !important; }
.ea-request-body .ea-fee .gfield_label { font-size: 15.5px; font-weight: 700; color: var(--ea-ink); margin-bottom: 4px; }
.ea-request-body .ea-fee .gfield_description { margin-top: 2px; }

/* Consent field is gated by the terms popup on "Continue to payment" — hide it. */
.ea-request-body .ea-consent-hidden { display: none !important; }

/* Consultation terms popup — fires when they click "Continue to payment".
   Header (title/note) + footer (buttons) stay fixed; the terms scroll between. */
.ea-terms-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(21,52,80,0.55); }
.ea-terms-modal[hidden] { display: none; }
.ea-terms-modal-box { position: relative; background: #fff; max-width: 560px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; border-radius: 14px; padding: 26px 24px 22px; box-shadow: 0 24px 64px rgba(0,0,0,0.32); color: var(--ea-ink); }
.ea-terms-modal-box .ea-terms-title { font-size: 16px; margin: 0 26px 3px 0; }
.ea-terms-modal-box .ea-terms-note { font-size: 12px; color: var(--ea-muted); font-style: italic; margin: 0 0 12px; }
.ea-terms-modal-box .ea-terms-scroll { flex: 0 0 auto; height: 104px; overflow-y: scroll; font-size: 12px; line-height: 1.45; border: 1px solid var(--ea-line); border-radius: 10px; background: #f7f9fb; padding: 13px 15px; margin: 0 0 16px; }
.ea-terms-modal-box .ea-terms-scroll p { margin: 0 0 8px; }
.ea-terms-modal-box .ea-terms-scroll p:last-child { margin-bottom: 0; }
.ea-terms-close { position: absolute; top: 8px; right: 14px; border: none; background: none; font-size: 30px; line-height: 1; color: var(--ea-muted); cursor: pointer; padding: 0; }
.ea-terms-close:hover { color: var(--ea-ink); }
/* The authorization/agreement statement shown right above the "I agree" button. */
.ea-terms-modal-box .ea-terms-ack { font-size: 12.5px; line-height: 1.45; color: var(--ea-ink); background: #f7f9fb; border: 1px solid var(--ea-line); border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; }
.ea-terms-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
/* "I agree" must be the SAME button as the service form's submit (GF blue #204CE5,
   Inter 14/500, 3px radius) so every service looks identical. Cancel = secondary grey. */
.ea-terms-modal-box .ea-terms-actions button { font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1; border-radius: 3px; padding: 0 18px; min-height: 44px; cursor: pointer; border: none; }
.ea-terms-modal-box .ea-terms-accept { background: #204CE5 !important; color: #fff !important; }
.ea-terms-modal-box .ea-terms-accept:hover { background: #1c44cc !important; }
.ea-terms-modal-box .ea-terms-cancel { background: #eef1f6 !important; color: var(--ea-ink) !important; }
.ea-terms-modal-box .ea-terms-cancel:hover { background: #e3e8ef !important; }
.ea-request-body .ea-terms-scroll::-webkit-scrollbar { width: 12px; }
.ea-request-body .ea-terms-scroll::-webkit-scrollbar-track { background: #eef2f6; border-radius: 0 10px 10px 0; }
.ea-request-body .ea-terms-scroll::-webkit-scrollbar-thumb { background: #b9c4d0; border-radius: 6px; border: 3px solid #eef2f6; }
.ea-request-body .ea-terms-scroll::-webkit-scrollbar-thumb:hover { background: var(--ea-steel); }

.ea-request-body .ea-consent .ginput_container_consent { display: flex; align-items: flex-start; gap: 11px; margin-top: 4px; }
.ea-request-body .ea-consent .ginput_container_consent input[type="checkbox"] {
	width: 20px; height: 20px; accent-color: var(--ea-amber); margin: 2px 0 0; flex: 0 0 auto; cursor: pointer;
}
.ea-request-body .ea-consent .gform-field-label--type-inline,
.ea-request-body .ea-consent .ginput_container_consent label {
	margin: 0; font-weight: 500; font-size: 14px; line-height: 1.45; color: var(--ea-ink); cursor: pointer;
}

/* Invoice & Proposal Review — live 5% fee display (this fee is dynamic, so unlike
   the flat-fee services we SHOW the calculated amount rather than hiding it). */
.ea-request-body .ea-calcfee .gfield_label { font-size: 15px; font-weight: 700; color: var(--ea-ink); margin-bottom: 6px; }
.ea-request-body .ea-calcfee .ginput_container_product,
.ea-request-body .ea-calcfee .ginput_container { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ea-request-body .ea-calcfee .ginput_product_price { font-size: 26px; font-weight: 800; color: var(--ea-navy); }
.ea-request-body .ea-calcfee .gfield_description { color: var(--ea-muted); }
.ea-request-body .ea-calcfee .ginput_quantity,
.ea-request-body .ea-calcfee .ginput_quantity_label,
.ea-request-body .ea-calcfee .gfield_price_label,
.ea-request-body .ea-calcfee .ginput_product_price_label { display: none !important; }

/* Scaled-fee fields start hidden; ea-form-enhance.js shows the right one based
   on the amount entered (fee when <= $20k, the "book a call" notice when over). */
.ea-request-body .gfield.ea-cond { display: none; }

/* Optional paid add-on (product option checkbox) — readable checkbox row */
.ea-request-body .ea-addon .ginput_container_option ul,
.ea-request-body .ea-addon .gfield_checkbox { margin: 0; padding: 0; list-style: none; }
.ea-request-body .ea-addon .gchoice { display: flex; align-items: flex-start; gap: 10px; }
.ea-request-body .ea-addon input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--ea-amber); margin-top: 2px; flex: 0 0 auto; }
.ea-request-body .ea-addon label { font-weight: 500; font-size: 14px; line-height: 1.45; color: var(--ea-ink); }

/* Fields we keep for processing but never show (e.g. the hidden base product on
   the Maintenance Agreement, where pricing is revealed only at Stripe checkout). */
.ea-hide-field { display: none !important; }

/* "How many elevators" only needs a small box, not a full-width one. */
.ea-request-body .ea-num-small .ginput_container_number,
.ea-request-body .ea-num-small input { max-width: 150px; }

/* Running total — the price line the customer actually pays */
.ea-request-body .ea-total .gfield_label { font-size: 15px; font-weight: 700; color: var(--ea-ink); }
.ea-request-body .ea-total .ginput_total,
.ea-request-body .ea-total .ginput_container_total { font-size: 26px; font-weight: 800; color: var(--ea-navy); }

/* Over-$20k branch — "book a call" notice instead of self-serve payment */
.ea-notice-call { background: #fff7e8; border: 1px solid var(--ea-amber, #EDA31B); border-radius: 12px; padding: 18px 20px; }
.ea-notice-call p { margin: 0 0 10px; }
.ea-notice-call p:last-child { margin-bottom: 0; }
.ea-btn-primary { display: inline-block; background: #204CE5; color: #fff !important; text-decoration: none; font-weight: 600; font-size: 15px; padding: 12px 22px; border-radius: 3px; }
.ea-btn-primary:hover { background: #1c44cc; }

/* File upload fields — tidy the GF default button/drop area */
.ea-request-body .gfield--type-fileupload .gform_drop_area,
.ea-request-body .gfield--type-fileupload .ginput_container_fileupload { font-size: 14px; }

/* Declutter service forms: drop GF's verbose "Accepted file types… Max size…" line
   (a short human hint covers it) and the redundant "(Required)" markers
   (validation still guides on submit). */
.ea-request-body .gform_fileupload_rules { display: none !important; }
.ea-request-body .gfield_required { display: none !important; }
/* GF's number-range instruction ("enter a number greater than or equal to 1") is
   clutter under our own hint — drop it. */
.ea-request-body .ea-amount .gfield_description.instruction { display: none !important; }

/* ---------------------------------------------------------------------------
   Elevator Maintenance on Demand page
--------------------------------------------------------------------------- */
.ea-mod-hero { background: linear-gradient(135deg, var(--ea-navy-deep) 0%, var(--ea-navy) 55%, var(--ea-steel) 135%); color: #fff; text-align: center; }
.ea-mod-hero .ea-eyebrow { color: var(--ea-amber, #EDA31B); }
.ea-mod-hero h1 { color: #fff; font-weight: 800; }
.ea-mod-hero .ea-mod-sub { color: rgba(255,255,255,0.88); font-size: 19px; max-width: 46ch; margin-left: auto; margin-right: auto; }
.ea-mod-hero .wp-element-button { background: var(--ea-amber, #EDA31B); color: #20160A; border: none; }
.ea-mod-hero .wp-element-button:hover { filter: brightness(0.96); }
.ea-mod-cta { background: var(--ea-sky, #eef4fb); }
.ea-mod-cta h2 { margin-top: 0; }

/* Google Places autocomplete dropdown */
.pac-container { z-index: 100001; border-radius: 10px; border: 1px solid var(--ea-line); box-shadow: 0 16px 40px rgba(21,52,80,0.14); font-family: inherit; margin-top: 4px; }
.pac-item { padding: 8px 12px; font-size: 14px; cursor: pointer; }

/* ---------------------------------------------------------------------------
   Service paths (help cards)
--------------------------------------------------------------------------- */
.ea-service-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 600px) { .ea-service-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .ea-service-grid { grid-template-columns: repeat(3, 1fr); } }
.ea-card {
	background: var(--ea-white); border: 1px solid var(--ea-line); border-radius: 14px;
	padding: 26px; transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
	display: flex; flex-direction: column;
}
.ea-card:hover { box-shadow: 0 16px 40px rgba(21,52,80,0.1); transform: translateY(-3px); border-color: #D3DEEA; }
.ea-card .ea-q { font-size: 13px; font-weight: 600; color: var(--ea-steel); margin: 0 0 6px; }
.ea-card h3 { font-size: 18px; font-weight: 700; margin: 0 0 7px; }
.ea-card p { font-size: 15px; color: var(--ea-muted); margin: 0; }
.ea-card .ea-go { margin-top: 13px; font-size: 14px; font-weight: 600; color: var(--ea-steel); }
.ea-card a.ea-card-link::after { content: ""; position: absolute; inset: 0; } /* full-card click target */
.ea-card { position: relative; }

/* Navy "I Need Service" card — the dispatch entry point, filled so it stands out. */
.ea-card.ea-card--primary { background: var(--ea-navy); border-color: var(--ea-navy); }
.ea-card.ea-card--primary:hover { border-color: var(--ea-navy-deep); box-shadow: 0 18px 44px rgba(21,52,80,0.30); }
.ea-card.ea-card--primary .ea-q { color: var(--ea-amber, #EDA31B); }
.ea-card.ea-card--primary h3 { color: #fff; }
.ea-card.ea-card--primary p { color: rgba(255,255,255,0.82); }
.ea-card.ea-card--primary .ea-go,
.ea-card.ea-card--primary .ea-card-link { color: #fff; }
.ea-card.ea-card--primary .ea-card-link:hover { color: var(--ea-amber, #EDA31B); }

/* ---------------------------------------------------------------------------
   Independence
--------------------------------------------------------------------------- */
.ea-independence {
	color: #fff;
	background: linear-gradient(135deg, var(--ea-navy) 0%, var(--ea-steel) 150%);
}
.ea-independence h2 { color: #fff; font-weight: 800; max-width: 22ch; }
.ea-independence p { margin-top: 18px; color: rgba(255,255,255,0.85); font-size: 19px; max-width: 56ch; }
.ea-proof { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
@media (min-width: 700px) { .ea-proof { grid-template-columns: repeat(3, 1fr); } }
.ea-proof li {
	list-style: none; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
	border-radius: 12px; padding: 16px 18px; font-size: 15px; color: rgba(255,255,255,0.92);
}
.ea-proof { padding: 0; margin-inline: 0; }
.ea-proof strong { display: block; font-family: var(--wp--preset--font-family--sora); margin-bottom: 4px; color: #fff; }

.ea-ind-top { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
@media (min-width: 860px) { .ea-ind-top { grid-template-columns: 1.15fr 0.85fr; gap: 48px; } }
.ea-ind-media { margin: 0; }
.ea-ind-media img {
	display: block; width: 100%; height: 100%; max-height: 340px; object-fit: cover;
	border-radius: 16px; border: 1px solid rgba(255,255,255,0.16);
	box-shadow: 0 24px 60px rgba(0,0,0,0.32);
}

/* ---------------------------------------------------------------------------
   Answers teaser
--------------------------------------------------------------------------- */
.ea-answers { background: var(--ea-sky); border-top: 1px solid var(--ea-line); border-bottom: 1px solid var(--ea-line); }
.ea-qlist { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .ea-qlist { grid-template-columns: 1fr 1fr; } }
.ea-qlink {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	background: var(--ea-white); border: 1px solid var(--ea-line); border-radius: 12px;
	padding: 18px 22px; font-weight: 500; color: var(--ea-ink);
	transition: border-color 0.15s ease, transform 0.12s ease;
}
.ea-qlink:hover { border-color: var(--ea-steel); transform: translateX(3px); }
.ea-qlink .ea-arw { color: var(--ea-steel); font-weight: 700; }

/* ---------------------------------------------------------------------------
   Industries
--------------------------------------------------------------------------- */
.ea-tags { display: flex; flex-wrap: wrap; gap: 11px; padding: 0; margin: 0; }
.ea-tag {
	list-style: none; border: 1px solid var(--ea-line); border-radius: 100px;
	padding: 10px 18px; font-size: 15px; background: var(--ea-sky); color: var(--ea-ink);
}
.ea-tag.is-lead { background: rgba(246,178,30,0.14); border-color: var(--ea-amber); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Final CTA
--------------------------------------------------------------------------- */
.ea-final {
	color: #fff; text-align: center;
	background: linear-gradient(135deg, var(--ea-navy-deep), var(--ea-navy) 60%, var(--ea-steel) 150%);
}
.ea-final h2 { color: #fff; font-weight: 800; max-width: 18ch; margin-inline: auto; }
.ea-final p { margin-top: 16px; color: rgba(255,255,255,0.8); font-size: 18px; }
.ea-final .ea-fc { display: flex; gap: 13px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   Answer pages (Layer 2 library)
--------------------------------------------------------------------------- */
.ea-answer-page .ea-answer-head { margin-bottom: 28px; }
.ea-answer-page .ea-answer-head .ea-eyebrow a { color: var(--ea-steel); }
.ea-answer-page h1 { font-size: clamp(30px, 4vw, 44px); margin-top: 8px; }

.ea-answer-cta {
	margin-top: 48px; background: var(--ea-sky); border: 1px solid var(--ea-line);
	border-radius: 16px; padding: 32px;
}
.ea-answer-cta h2 { font-size: clamp(22px, 3vw, 28px); }
.ea-answer-cta p { color: var(--ea-muted); margin-top: 10px; }
.ea-answer-cta .wp-block-buttons { margin-top: 20px; }

/* Answers archive / hub */
.ea-answers-archive .ea-answer-list { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 8px; }
@media (min-width: 700px) { .ea-answers-archive .ea-answer-list { grid-template-columns: 1fr 1fr; } }
.ea-answer-card {
	background: var(--ea-white); border: 1px solid var(--ea-line); border-radius: 14px;
	padding: 24px; transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.ea-answer-card:hover { box-shadow: 0 16px 40px rgba(21,52,80,0.1); transform: translateY(-3px); border-color: #D3DEEA; }
.ea-answer-card h2 { font-size: 20px; line-height: 1.25; margin: 0 0 8px; }
.ea-answer-card h2 a { color: var(--ea-navy); }
.ea-answer-card h2 a:hover { color: var(--ea-steel); }
.ea-answer-card .wp-block-post-excerpt { color: var(--ea-muted); font-size: 15px; }
.ea-answer-card .wp-block-post-excerpt__more-link { display: inline-block; margin-top: 8px; color: var(--ea-steel); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Solution pages (Ask an Expert, Proposal Review, etc.)
--------------------------------------------------------------------------- */
.ea-sol-hero .ea-hero-inner { max-width: 760px; }
.ea-sol-value .ea-card { position: static; }
.ea-sol-value .ea-card h3 { margin-bottom: 7px; }
.ea-intake {
	max-width: 680px; margin: 0 auto; background: var(--ea-white);
	border: 1px solid var(--ea-line); border-radius: 16px; padding: 32px;
	box-shadow: 0 20px 50px rgba(21,52,80,0.07);
}
.ea-intake h2 { font-size: clamp(24px, 3vw, 32px); }
.ea-intake .ea-sub { color: var(--ea-muted); margin: 10px 0 20px; }
.ea-sol-fee { color: var(--ea-muted); font-size: 14px; margin-top: 14px; text-align: center; }

/* Service-page heading band: photo sits behind the title as atmosphere */
.ea-svc-band {
	border-radius: 18px; margin: 0 0 26px; padding: 40px 28px;
	background-size: cover; background-position: center right; background-repeat: no-repeat;
	background-color: var(--ea-navy-deep);
	box-shadow: 0 18px 44px rgba(21,52,80,0.14);
}
@media (min-width: 782px) { .ea-svc-band { padding: 58px 42px; } }
.ea-svc-band h1, .ea-svc-band h2 { color: #fff; margin: 0; max-width: 20ch; }

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */
.ea-footer { background: var(--ea-navy-deep); color: rgba(255,255,255,0.72); padding: 52px 0 40px; }
.ea-footer a { color: rgba(255,255,255,0.8); }
.ea-footer a:hover { color: var(--ea-amber); }
.ea-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
.ea-foot .ea-logo img, .ea-foot .ea-logo svg { height: 26px; width: auto; margin-bottom: 16px; }
.ea-foot-col h4 {
	font-family: var(--wp--preset--font-family--sora); font-size: 13px; letter-spacing: 0.08em;
	text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 14px; font-weight: 700;
}
.ea-foot-col a { display: block; font-size: 15px; margin-bottom: 9px; }
.ea-foot-fine {
	margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12);
	font-size: 13px; color: rgba(255,255,255,0.5); display: flex; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   Cookie notice (Cookie Notice plugin v3) — brand styling.
   The plugin sets a background colour inline and ships its own button styles,
   so the overrides below need !important to win.
--------------------------------------------------------------------------- */
#cookie-notice {
	background-color: rgba(14,38,60,0.97) !important;
	border-top: 1px solid rgba(255,255,255,0.14);
	box-shadow: 0 -12px 34px rgba(0,0,0,0.20);
}
#cookie-notice .cookie-notice-container {
	max-width: 1160px; margin: 0 auto; padding: 16px 24px !important;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 12px 20px; text-align: left;
}
#cookie-notice #cn-notice-text {
	font-size: 14px; line-height: 1.55;
	color: rgba(255,255,255,0.86);
}
#cookie-notice #cn-accept-cookie {
	background: var(--ea-amber, #F6B21E) !important;
	color: var(--ea-amber-ink, #20160A) !important;
	border: 0 !important; border-radius: 10px !important;
	padding: 11px 24px !important; margin: 0 !important;
	font-weight: 700; font-size: 15px; line-height: 1.2;
	text-shadow: none !important; text-decoration: none !important;
	box-shadow: 0 6px 16px rgba(246,178,30,0.26);
	transition: background .15s ease, transform .15s ease;
}
#cookie-notice #cn-accept-cookie:hover {
	background: var(--ea-amber-dark, #E4A410) !important; transform: translateY(-1px);
}
#cookie-notice #cn-accept-cookie:focus-visible {
	outline: 2px solid #fff; outline-offset: 2px;
}
#cookie-notice .cn-close-icon { opacity: 0.55; transition: opacity .15s ease; }
#cookie-notice .cn-close-icon:hover { opacity: 1; }
@media (max-width: 600px) {
	#cookie-notice .cookie-notice-container { padding: 14px 18px !important; gap: 12px; }
	#cookie-notice #cn-accept-cookie { width: 100%; text-align: center; }
}

/* ---------------------------------------------------------------------------
   Legal / terms pages — one consistent, on-brand look across all of them.
--------------------------------------------------------------------------- */
.ea-legal .entry-content { max-width: 800px; margin-inline: auto; }
.ea-legal .entry-content h1 { color: var(--ea-navy); }
.ea-legal .entry-content h2 { color: var(--ea-navy); margin-top: 1.7em; }
.ea-legal .entry-content h3 { color: var(--ea-steel); margin-top: 1.15em; }
.ea-legal .entry-content p,
.ea-legal .entry-content li { color: var(--ea-ink); line-height: 1.6; }