/*
Theme Name:   MRA Woodworks
Theme URI:    https://mrawoodworks.com
Description:  Child theme of Hello Elementor for MRA Woodworks. Holds only what no Elementor control can do (conversion checklist section 11).
Author:       Benson Matheka
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hello-elementor-child
*/

/* Every rule hangs on a class set in a widget's or container's CSS Classes field, named after its
   checklist row. Colours and fonts are Kit variables, so a Kit change reaches these rules too. */

/* T10: focus rings and reduced motion (prototype site.css: 3 px Primary outline, offset 3; Accent on dark). */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--e-global-color-primary);
	outline-offset: 3px;
}
.mra-dark :focus-visible { outline-color: var(--e-global-color-accent); }
/* The footer is Accent green, so its focus ring is Ink. */
.mra-footer :focus-visible { outline-color: var(--e-global-color-ink); }
/* Footer links underline on hover (prototype .site-footer .link-list a:hover); Icon List has no underline control. */
@media (hover: hover) and (pointer: fine) { .mra-footer .elementor-icon-list-item > a:hover .elementor-icon-list-text { text-decoration: underline; } }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* T1: on phones the logo shrinks with its column (299 px wide at most, 34 px tall), so the menu
   button never leaves the screen (prototype revision 17). */
@media (max-width: 767px) {
	.mra-brand { flex: 0 1 299px !important; min-width: 0; }
	.mra-brand img { width: 100% !important; max-width: 299px; height: auto !important; }
}

/* T2: menu links underline from the centre, 2 px Primary, on hover and on the current page
   (the Menu widget has no pointer control). Not in the phone dropdown, which marks the current
   item with a 3 px bar instead (prototype site.css, <=1024). */
@media (min-width: 1025px) {
	.mra-menu .e-n-menu-title-container {
		background: linear-gradient(var(--e-global-color-gold), var(--e-global-color-gold)) no-repeat center bottom / 0 2px; /* gold accent, 2026-11-04 */
		transition: background-size .25s ease;
	}
	.mra-menu .e-n-menu-title.e-current .e-n-menu-title-container { background-size: 100% 2px; }
	@media (hover: hover) and (pointer: fine) { .mra-menu .e-n-menu-title:hover .e-n-menu-title-container { background-size: 100% 2px; } }
}
@media (max-width: 1024px) {
	.mra-menu .e-n-menu-item { border-bottom: 1px solid var(--e-global-color-line); }
	.mra-menu .e-n-menu-title.e-current { box-shadow: inset 3px 0 0 var(--e-global-color-primary); padding-left: 14px !important; }
	/* The toggle reads "Menu" beside its bars on tablets; phones keep the bars only (prototype). */
	.mra-menu .e-n-menu-toggle { display: inline-flex; align-items: center; width: auto; }
	.mra-menu .e-n-menu-toggle::after { content: "Menu"; margin-left: 10px; font-weight: 600; font-size: 16px; color: var(--e-global-color-ink); }
}
@media (max-width: 767px) { .mra-menu .e-n-menu-toggle::after { content: none; } }

/* T3: the estimate link (menu item with id "nav-cta" on its title) shows only inside the phone
   dropdown, as a full-width green button. */
.mra-menu .e-n-menu-item:has(> #nav-cta) { display: none; }
@media (max-width: 767px) {
	.mra-menu .e-n-menu-item:has(> #nav-cta) { display: block; padding-top: 18px; border-bottom: 0; }
	.mra-menu #nav-cta { justify-content: center; background: var(--e-global-color-primary); border-radius: 6px; box-shadow: none; }
	.mra-menu #nav-cta .e-n-menu-title-text { color: var(--e-global-color-white) !important; font-size: 15px; font-weight: 700; }
}

/* T5: the phone estimate bar slides up once the first section has scrolled away (assets/site.js
   adds .is-shown) and never shows on Contact, where the form is already on screen. */
.mra-mobile-cta { transform: translateY(110%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; box-shadow: 0 -8px 24px var(--e-global-color-shadow); }
.mra-mobile-cta.is-shown { transform: none; visibility: visible; transition: transform .3s ease; }
body.page-id-64005 .mra-mobile-cta { display: none !important; }

/* T4: the footer's green wave along its top edge (one SVG; Shape Divider has no custom path). */
.mra-footer { position: relative; }
.mra-footer::before {
	content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 22px; pointer-events: none;
	background: no-repeat center top / 100% 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v6C1080 22 360-6 0 14z' fill='%23029F87'/%3E%3C/svg%3E");
}

/* T6: hover and focus cues limited to mouse users (hover: hover) where the prototype limits them. */
.mra-tile .elementor-image-caption, .mra-photo .mra-zoom { opacity: 0; transition: opacity .25s ease, transform .25s ease; }
.mra-tile a:focus-visible .elementor-image-caption, .mra-photo a:focus-visible ~ .mra-zoom { opacity: 1; }
@media (hover: none) { .mra-photo .mra-zoom { opacity: 1; } }
@media (hover: hover) and (pointer: fine) {
	.mra-tile:hover .elementor-image-caption, .mra-photo:hover .mra-zoom { opacity: 1; }
	.mra-zoom-img img { transition: transform .4s ease; }
	.mra-zoom-img:hover img { transform: scale(1.03); }
}

/* T11: the photo count after each filter chip's name (count added by functions.php). */
.mra-filter .filter-count { min-width: 22px; margin-left: 8px; padding: 1px 6px; border-radius: 999px; background: var(--e-global-color-band); color: var(--e-global-color-ink); font-size: 13px; text-align: center; }
.mra-filter .e-filter-item[aria-pressed="true"] .filter-count { background: var(--e-global-color-white); color: var(--e-global-color-primary); }
.elementor .mra-filter .e-filter .e-filter-item { min-height: 44px; height: auto; line-height: 1.6; display: inline-flex; align-items: center; white-space: nowrap; }

/* T5 (continued): on phones the footer keeps 72 px clear at its foot so the estimate bar never
   covers the copyright line; not on Contact, which has no bar (prototype .site-footer:has(.mobile-cta)). */
@media (max-width: 767px) {
	body:not(.page-id-64005) .mra-footer { padding-bottom: 104px !important; }
}

/* Hello Elementor's reset adds an 8 px top margin to every heading, including Icon Box titles. */
.elementor-icon-box-title, .elementor-image-box-title { margin-block-start: 0; }
.elementor-widget-text-editor p { margin-block: 0; }
.elementor-widget-text-editor p + p { margin-top: 1em; }

/* Photo ratios that follow the card or column width (the Image widget's height control is fixed px). */
.mra-ratio-16x10 img { aspect-ratio: 16 / 10; }
.mra-ratio-4x3 img { aspect-ratio: 4 / 3; }
.mra-ratio-1x1 img { aspect-ratio: 1 / 1; }
.mra-ratio-3x4 img { aspect-ratio: 3 / 4; }
.mra-ratio-21x7 img { aspect-ratio: 21 / 7; }
@media (max-width: 767px) { .mra-ratio-21x7 img { aspect-ratio: 4 / 3; } }
[class*="mra-ratio-"] img { width: 100%; height: auto; object-fit: cover; display: block; }
.elementor-widget-image a { display: block; }

/* Cards: the title link covers the whole card; hover lift for mouse users only (T6). */
.mra-card { position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.mra-stretch .elementor-icon-box-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mra-stretch .elementor-icon-box-title a { color: inherit; text-decoration: none; }
.mra-card:has(:focus-visible) { transform: translateY(-2px); box-shadow: 0 18px 40px var(--e-global-color-shadow) !important; }
@media (hover: hover) and (pointer: fine) {
	.mra-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px var(--e-global-color-shadow) !important; }
	.mra-card:hover .mra-zoom-img img { transform: scale(1.03); }
	.mra-card:hover .mra-card-more .elementor-button-icon { transform: translateX(3px); }
}
.mra-zoom-img { overflow: hidden; border-radius: 6px; }
.mra-card-more .elementor-button { pointer-events: none; }

/* Work band mosaic: alternate tiles sit 28 px lower; labels show on hover (T6); none below 1025 px. */
.mra-drop { transform: translateY(28px); }
@media (max-width: 1024px) { .mra-drop { transform: none; } }
.mra-tile figure { position: relative; margin: 0; }
.mra-tile .widget-image-caption {
	position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0; padding: 10px 12px; border-radius: 6px; text-align: left;
	background: var(--e-global-color-white); color: var(--e-global-color-primary); font-size: 14px; font-weight: 700; line-height: 1.25;
	opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease;
}
.mra-tile a:focus-visible + .widget-image-caption { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .mra-tile:hover .widget-image-caption { opacity: 1; transform: none; } }

/* Split hero: the photo fills its column's full height; stacked below 1025 px at 16:9, phones 4:3. */
.mra-hero-media { position: relative; overflow: hidden; }
/* The photo fills its column without setting the hero height (portrait photos would): site.css .hero-media > .elementor-widget. */
.mra-hero-media > .elementor-widget-image { position: absolute; inset: 0; }
.mra-hero-media > .elementor-widget-image a, .mra-hero-media img { height: 100%; }
.mra-hero-media img { width: 100%; object-fit: cover; }
@media (max-width: 1024px) {
	.mra-hero-media { aspect-ratio: 16 / 9; }
	.mra-hero-bg { min-height: 0 !important; height: 100%; }
}
@media (max-width: 767px) { .mra-hero-media { aspect-ratio: 4 / 3; } }

/* Work photo card: "View Project" only when its project is published (functions.php leaves the link out). */
.mra-project-link .elementor-button:not([href]) { display: none; }
.mra-photo .elementor-widget-image a { cursor: zoom-in; }

/* Related photos: hidden when the service has fewer than two (functions.php adds the body class). */
.mra-few-related .mra-related { display: none; }

/* Breadcrumbs (Rank Math): small muted trail, "/" separators as the prototype. */
.mra-crumbs { font-size: var(--e-global-typography-small-font-size); line-height: 1.6; color: var(--e-global-color-muted); }
.mra-crumbs a { color: var(--e-global-color-muted); }
.mra-crumbs .separator { color: var(--e-global-color-line); margin: 0; }
/* Whole crumbs wrap, 8 px apart, as the prototype's flex list (a long title moves down whole). */
.mra-crumbs p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.mra-crumbs p { margin: 0; }

/* Reading width: prototype Text Editor paragraphs stop at 64 characters (site.css). Icon Boxes that stand
   in for a heading plus a Text Editor carry .mra-measure; card and step text does not. */
.elementor-widget-text-editor p, .mra-measure .elementor-icon-box-description { max-width: 64ch; }
.mra-measure-hero .elementor-icon-box-description { max-width: 560px; }
.mra-measure-center .elementor-icon-box-description { margin-inline: auto; }
/* A Text Editor fed by an ACF field prints plain text without <p>: cap the widget itself. */
.elementor.elementor .e-con > .elementor-widget.mra-measure-text { max-width: 64ch; }  /* outranks Elementor's .elementor.elementor .e-con > .elementor-widget { max-width: 100% } */

.mra-ratio-4x5 img { aspect-ratio: 4 / 5; }

/* About: the hero's first paragraph is the lead (site.css .lead-first). */
.mra-lead-first p:first-child { font-size: var(--e-global-typography-lead-font-size); line-height: var(--e-global-typography-lead-line-height); }
.mra-lead-first p { max-width: 560px; }

/* About: the linked service list, each row ruled underneath (site.css .tick-list.linked). */
.mra-linked-list .elementor-icon-list-item > a { padding: 14px 0; border-bottom: 1px solid var(--e-global-color-line); width: 100%; transition: color .2s ease; }
.mra-linked-list .elementor-icon-list-item > a .elementor-icon-list-icon { align-self: flex-start; margin-top: 3px; }
@media (hover: hover) and (pointer: fine) { .mra-linked-list .elementor-icon-list-item > a:hover .elementor-icon-list-text { color: var(--e-global-color-primary); } }

/* Legal pages: sticky contents column; the contents list with a rule on its left (site.css .toc-*). */
@media (min-width: 881px) { .mra-legal-side { position: sticky; top: 110px; } }
.mra-toc { --box-padding: 0px; --box-border-width: 0px; --header-separator-width: 0px; }
.mra-toc .elementor-toc__header-title { margin: 0; }
.mra-toc .elementor-toc__header { padding: 0; border: 0; margin: 0 0 12px; }
.mra-toc .elementor-toc__list-item { margin: 0; padding: 0; line-height: 1.6; }
.mra-toc .elementor-toc__list-item-text-wrapper { margin: 0; padding: 0; }
.mra-toc .elementor-toc__header-title { font-size: var(--e-global-typography-small-font-size); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--e-global-color-muted); }
.mra-toc .elementor-toc__body { padding: 0; max-height: none; }
.mra-toc .elementor-toc__list-wrapper { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--e-global-color-line); }
.mra-toc .elementor-toc__list-item-text-wrapper::before { display: none; }
.mra-toc .elementor-toc__list-item-text { display: block; padding: 7px 0 7px 16px; margin-left: -2px; border-left: 2px solid transparent; color: var(--e-global-color-text); font-size: var(--e-global-typography-text-font-size); }
.mra-toc .elementor-toc__list-item-text:hover, .mra-toc .elementor-toc__list-item-text:focus-visible { color: var(--e-global-color-primary); border-left-color: var(--e-global-color-primary); }
.mra-legal-main [id] { scroll-margin-top: 110px; }
.mra-prose ul { list-style: disc; margin: 8px 0 12px; padding-left: 22px; display: grid; gap: 6px; max-width: 64ch; }
.mra-prose li::marker { color: var(--e-global-color-primary); }

/* T7: the inquiry form (Pro Form, three steps) styled as the prototype's .inquiry. */
.mra-measure-620 .elementor-icon-box-description { max-width: 620px; }
@media (max-width: 767px) { .mra-measure-620 .elementor-icon-box-description { font-size: var(--e-global-typography-text-font-size) !important; } }  /* outranks the widget's own lead size */
.mra-inquiry .e-form__indicators { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 20px; padding: 0; }
.mra-inquiry .e-form__indicators__indicator { flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; padding: 0 0 10px; border-bottom: 3px solid var(--e-global-color-line); color: var(--e-global-color-muted); font-size: var(--e-global-typography-small-font-size); font-weight: 600; flex-basis: auto; }
.mra-inquiry .e-form__indicators__indicator--state-active, .mra-inquiry .e-form__indicators__indicator--state-completed { border-bottom-color: var(--e-global-color-primary); }
.mra-inquiry .e-form__indicators__indicator--state-active { color: var(--e-global-color-ink); }
.mra-inquiry .e-form__indicators__indicator--state-completed { color: var(--e-global-color-primary); }
.mra-inquiry .e-form__indicators__indicator__separator { display: none; }
.mra-inquiry .e-form__indicators__indicator__number { width: 26px; height: 26px; min-width: 26px; border-radius: 50%; border: 2px solid currentColor; font-size: 13px; display: inline-grid; place-items: center; margin: 0; }
.mra-inquiry .e-form__indicators__indicator--state-active .e-form__indicators__indicator__number,
.mra-inquiry .e-form__indicators__indicator--state-completed .e-form__indicators__indicator__number { background: var(--e-global-color-primary); border-color: var(--e-global-color-primary); color: var(--e-global-color-white); }
.mra-inquiry .e-form__indicators__indicator__label { margin: 0; font-size: var(--e-global-typography-small-font-size); color: inherit; }
.mra-step-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 9px; width: 100%; padding: 0 12px; }  /* Pro pulls the fields out by half the 24 px column gap */
.mra-step-head .mra-step-count { font-size: var(--e-global-typography-label-font-size); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--e-global-color-primary); }
.mra-step-head strong { font-size: var(--e-global-typography-h3-font-size); font-weight: 600; color: var(--e-global-color-ink); flex-basis: 100%; }
.mra-step-head .mra-step-hint { color: var(--e-global-color-muted); }
.mra-inquiry .elementor-field-subgroup { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mra-inquiry .elementor-field-subgroup .elementor-field-option { display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 0; padding: 12px 16px; border: 1px solid var(--e-global-color-line); border-radius: 6px; background: var(--e-global-color-white); font-weight: 500; color: var(--e-global-color-ink); line-height: 1.3; }
.mra-inquiry .elementor-field-subgroup .elementor-field-option:has(input:checked) { border-color: var(--e-global-color-primary); box-shadow: 0 0 0 1px var(--e-global-color-primary); }
/* UI polish 3 (skill ui-polish; Uiverse, uiverse.io, MIT; Benson 2026-11-05): drawn tick boxes and radios whose
   mark scales in when chosen, as the prototype's .f-choice (site.css). The group class is named twice to outweigh
   the Kit's input selector. Under reduced motion the mark appears at once (transition none below). */
.mra-inquiry .elementor-field-group .elementor-field-subgroup .elementor-field-option input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; padding: 0; margin: 0; border: 1.5px solid var(--e-global-color-muted); border-radius: 4px; background: var(--e-global-color-white); display: grid; place-items: center; cursor: pointer; transition: background-color .18s ease-out, border-color .18s ease-out; }
.mra-inquiry .elementor-field-group .elementor-field-subgroup .elementor-field-option input[type="radio"] { border-radius: 50%; }
.mra-inquiry .elementor-field-group .elementor-field-subgroup .elementor-field-option input:focus-visible { outline: 2px solid var(--e-global-color-primary); outline-offset: 3px; }
.mra-inquiry .elementor-field-group .elementor-field-subgroup .elementor-field-option input:checked { border-color: var(--e-global-color-primary); background: var(--e-global-color-primary); }
.mra-inquiry .elementor-field-subgroup .elementor-field-option input::after { content: ""; transition: transform .2s cubic-bezier(.2, .8, .2, 1.4); }
.mra-inquiry .elementor-field-subgroup .elementor-field-option input[type="checkbox"]::after { width: 10px; height: 6px; border: solid var(--e-global-color-white); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0); }
.mra-inquiry .elementor-field-subgroup .elementor-field-option input[type="checkbox"]:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.mra-inquiry .elementor-field-subgroup .elementor-field-option input[type="radio"]::after { width: 8px; height: 8px; border-radius: 50%; background: var(--e-global-color-white); transform: scale(0); }
.mra-inquiry .elementor-field-subgroup .elementor-field-option input[type="radio"]:checked::after { transform: scale(1); }
/* UI polish 2: a quiet tick once a field passes site.js's own check (.mra-valid), as the prototype's .is-valid. */
.mra-inquiry .elementor-field-group.mra-valid input.elementor-field-textual { padding-right: 42px; background: var(--e-global-color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302826E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; }
/* UI polish 4: Pro disables Send and inserts a Font Awesome 4 spinner while it sends; that icon is replaced by the
   prototype's ring (keyframe mra-spin, listed under motion in exceptions.json). A still ring under reduced motion. */
.mra-inquiry .elementor-form-spinner { display: none; }
.mra-inquiry button[type="submit"][disabled] { cursor: progress; }
.mra-inquiry button[type="submit"][disabled] .elementor-button-content-wrapper::before { content: ""; flex: none; width: 16px; height: 16px; margin-right: 10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: var(--e-global-color-white); animation: mra-spin .7s linear infinite; }
@keyframes mra-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.mra-inquiry .elementor-field-subgroup .elementor-field-option input, .mra-inquiry .elementor-field-subgroup .elementor-field-option input::after { transition: none; }
	.mra-inquiry button[type="submit"][disabled] .elementor-button-content-wrapper::before { animation: none; border-top-color: rgba(255, 255, 255, .35); }
}
.mra-inquiry .elementor-field-subgroup .elementor-field-option label { margin: 0; cursor: pointer; }
.mra-inquiry .elementor-field-input-description { font-size: var(--e-global-typography-small-font-size); color: var(--e-global-color-muted); margin: 6px 0 0 !important; padding: 0 !important; }
.mra-inquiry .mra-f-privacy { display: block; margin: 20px 0 0; }
.mra-inquiry .elementor-field-group-phone_number { position: relative; }  /* Pro puts the field's CSS class on the input; the group has its own class */
/* The Kit styles every input with a heavier selector (.elementor-kit-N input:not(...):not(...)), so these name the group twice. */
.mra-inquiry .elementor-field-group.elementor-field-group-phone_number input.elementor-field-textual { padding-left: 62px; }
.mra-inquiry .elementor-field-group-phone_number::before { content: "+1"; position: absolute; left: calc(var(--column-gap, 24px) / 2); top: calc(1.6em + 6px); height: 50px; width: 48px; display: grid; place-items: center; border-right: 1px solid var(--e-global-color-line); color: var(--e-global-color-ink); font-weight: 600; pointer-events: none; z-index: 1; }
/* A lone Next or Send sits on the right; Back takes the left (site.css .f-nav). The last field already
   carries the 22 px row gap, so 2 px more makes the prototype's 24. */
.mra-inquiry .e-form__buttons { display: flex; width: 100%; justify-content: flex-end; margin-top: 2px; padding: 0; }  /* each button wrapper already carries half the 24 px column gap, which lands the button on the card edge */
.mra-inquiry .e-form__buttons .elementor-field-type-previous { margin-right: auto; }
@media (max-width: 767px) {
	.mra-inquiry .elementor-field-subgroup { grid-template-columns: minmax(0, 1fr); }
	.mra-inquiry .e-form__indicators__indicator__label { display: none; }
	.mra-inquiry .e-form__indicators__indicator { justify-content: center; }
	.mra-inquiry .e-form__buttons { flex-direction: column-reverse; }
	.mra-inquiry .e-form__buttons > * { width: 100%; }
	.mra-inquiry .e-form__buttons .elementor-button { width: 100%; justify-content: center; }
}

/* Contact side: sticky beside the form on wide screens; contact lines underlined (site.css .meta-list). */
@media (min-width: 1025px) { .mra-contact-side { position: sticky; top: 110px; } }
.mra-meta-list .elementor-icon-list-item > a { min-height: 32px; display: inline-flex; align-items: center; }
.mra-meta-list .elementor-icon-list-text { text-decoration: underline; text-underline-offset: 3px; }

/* Our Work: the details text drops to the small size on phones (site.css .gallery-head p). */
@media (max-width: 767px) { .mra-small-mobile .elementor-icon-box-description { font-size: var(--e-global-typography-small-font-size) !important; } }

/* Service pages: tick lists (site.css .tick-list) and the related photo strip (2 or 3 photos, 2 on phones). */
.mra-ticks .elementor-icon-list-icon { align-self: flex-start; margin-top: 3px; }
.mra-related-grid .elementor-loop-container:not(:has(> .e-loop-item:nth-of-type(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .mra-related-grid .e-loop-item:nth-of-type(3) { display: none; } }

/* Error 404: the page links with arrows (site.css .link-list.arrows). */
.mra-arrow-links .elementor-icon-list-item > a { font-weight: 600; text-decoration: none; }
.mra-few-photos .mra-project-photos { display: none; }

/* Project photos (Basic Gallery): each photo at its own shape, top-aligned, rounded and lifted (site.css .p-grid). */
.mra-project-gallery .gallery { align-items: flex-start; }
.mra-project-gallery .gallery-item img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 10px 30px var(--e-global-color-shadow); }
.mra-project-gallery .gallery-icon a { display: block; cursor: zoom-in; }
.mra-project-gallery .gallery { margin: 0 !important; }
.mra-project-gallery .gallery-caption { display: none; }
.mra-project-gallery .gallery-item { margin-bottom: 0 !important; }
.mra-project-gallery .gallery-icon img { display: block; }

/* T7: the Contact form's checks and helpers, as on the prototype (site.css "inquiry" rules). Field errors use
   Pro's own markup (.elementor-error and an inline .elementor-message-danger) so the server's errors and the
   script's look the same; the colours and size are the prototype's .f-err. */
.mra-inquiry .elementor-field-group.elementor-error .elementor-field-textual,
.mra-inquiry .elementor-field-group.elementor-error .elementor-field-option { border-color: var(--e-global-color-invalid); box-shadow: 0 0 0 1px var(--e-global-color-invalid); }
.mra-inquiry .elementor-field-group.elementor-error .elementor-field-textual:focus-visible { outline: 2px solid var(--e-global-color-invalid); outline-offset: 2px; box-shadow: none; }
.mra-inquiry .elementor-form-help-inline.elementor-message-danger { display: block; width: 100%; margin: 6px 0 0; font-size: var(--e-global-typography-small-font-size); font-weight: 600; line-height: 1.5; color: var(--e-global-color-invalid); }
.mra-inquiry .elementor-form-help-inline.elementor-message-danger::before { content: none; }
.mra-inquiry .elementor-form-spinner { display: none; }  /* the button says "Sending Your Inquiry" instead */
/* "Did you mean ...?" under the email field (FM3). */
.mra-inquiry .f-suggest { width: 100%; margin: 4px 0 0; font-size: var(--e-global-typography-small-font-size); color: var(--e-global-color-text); }
.mra-inquiry .f-suggest-btn { padding: 0; border: 0; background: none; color: var(--e-global-color-primary); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
/* Place search (FM5, places.js). */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mra-inquiry .place-box { position: relative; width: 100%; }
.mra-inquiry .elementor-field-group .place-box input.elementor-field-textual { padding-right: 40px; background: var(--e-global-color-white) no-repeat right 14px center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2302826E' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E"); }
.mra-inquiry .place-list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: 300px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--e-global-color-white); border: 1px solid var(--e-global-color-line); border-radius: 6px; box-shadow: 0 12px 32px rgba(1, 1, 1, .16), 0 2px 6px rgba(1, 1, 1, .08); }
.mra-inquiry .place-list [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px 8px 14px; border-radius: 4px; color: var(--e-global-color-text); cursor: pointer; }
.mra-inquiry .place-list [role="option"]:hover, .mra-inquiry .place-list [aria-selected="true"] { background: var(--e-global-color-band); box-shadow: inset 3px 0 0 var(--e-global-color-accent); }
.mra-inquiry .place-list .pn { font-weight: 500; }
.mra-inquiry .place-list .pp { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--e-global-color-band); color: var(--e-global-color-ink); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.mra-inquiry .place-list mark { background: none; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.mra-inquiry .place-none { padding: 12px 14px; color: var(--e-global-color-muted); font-size: 15px; }
/* Thank-you panel with the reference number, shown in place of the form (prototype .f-success). */
.mra-success { padding: 32px; border-radius: 6px; background: var(--e-global-color-white); border: 1px solid var(--e-global-color-line); border-left: 4px solid var(--e-global-color-accent); }
.mra-success:focus { outline: none; }
.mra-success h3 { margin: 0 0 8px; font-family: var(--e-global-typography-h3-font-family); font-size: var(--e-global-typography-h3-font-size); font-weight: 600; color: var(--e-global-color-ink); }
.mra-success p { margin: 0 0 8px; }
.mra-success .f-ref-value { font-family: ui-monospace, Consolas, monospace; color: var(--e-global-color-primary); letter-spacing: .02em; }
/* Error summary above the steps (prototype .f-summary): the step's problems as links to their fields. */
.mra-inquiry .f-summary { width: 100%; margin: 0 0 20px; padding: 14px 16px; border-radius: 6px; background: var(--e-global-color-white); border: 1px solid var(--e-global-color-line); border-left: 4px solid var(--e-global-color-invalid); font-weight: 600; color: var(--e-global-color-ink); }
.mra-inquiry .f-summary p { margin: 0; }
.mra-inquiry .f-summary ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.mra-inquiry .f-summary li a { color: var(--e-global-color-invalid); font-weight: 600; text-decoration: underline; }
/* "Next: Your project" carries the prototype's arrow (Font Awesome 5 arrow-right); Pro's step buttons take no icon. */
.mra-inquiry .e-form__buttons__wrapper__button-next { display: inline-flex; align-items: center; gap: 10px; }
.mra-inquiry .e-form__buttons__wrapper__button-next::after { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Header shadow once the page scrolls (prototype .site-header.is-scrolled): Pro's sticky header gets
   .elementor-sticky--effects after 80 px (the container's Sticky > Effects Offset). The selector is heavy enough to beat
   Elementor's own border-colour rule for the element (.elementor-65001 .elementor-element.elementor-element-ID). */
.mra-header { transition: box-shadow .25s ease, border-color .25s ease; }
.mra-header.elementor-sticky--effects.elementor-sticky--active.e-con { box-shadow: 0 6px 24px var(--e-global-color-shadow); border-bottom-color: transparent; }
/* Skip-link target after the header: takes no space; focusing it shows no outline. */
.mra-main-target { display: block; height: 0; outline: none; }
/* T9: entrance motion at the prototype's distance and pace (site.css "motion"). Each element carries
   Elementor's own Entrance Animation (fadeInUp or fadeIn, set by the generators' add_motion); Elementor's
   fadeInUp travels a whole element height in 1.25 s, the prototype's 24 px in 0.5 s, so the animation is
   swapped for mra-rise. Hero lines take 0.6 s, photos fade in over 0.8 s. "both" keeps an item hidden
   during its delay. Reduced motion: Elementor removes .animated animations; the T10 rule above ends any other. */
@keyframes mra-rise { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@keyframes mra-settle { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.elementor-element.animated.fadeInUp { animation-name: mra-rise; animation-duration: .5s; animation-timing-function: ease; animation-fill-mode: both; animation-delay: var(--mra-d, 0s); }
.elementor-element.animated.fadeInUp.mra-hero-line { animation-duration: .6s; }
.elementor-element.animated.fadeIn { animation-duration: .8s; animation-timing-function: ease; animation-fill-mode: both; }
/* Photos in the Work band mosaic and the related strip settle from 106 % inside their frames
   (prototype .reveal-photo); the frame itself (.mra-zoom-img, overflow hidden) does not fade. */
.elementor-element.animated.mra-settle { animation-name: none; }
.elementor-element.animated.mra-settle img { animation: mra-settle 1.2s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--mra-d, 0s); }
/* Loop Grid items arrive 80 ms apart within their grid, at most 5 steps (prototype site.js GRIDS);
   Elementor sets one delay per Loop Item template, so the place in the grid sets it here (counted
   among the items only: the Loop container can hold other elements before the first item). */
.e-loop-item:nth-child(2 of .e-loop-item) > .mra-loop-motion { --mra-d: .08s; }
.e-loop-item:nth-child(3 of .e-loop-item) > .mra-loop-motion { --mra-d: .16s; }
.e-loop-item:nth-child(4 of .e-loop-item) > .mra-loop-motion { --mra-d: .24s; }
.e-loop-item:nth-child(5 of .e-loop-item) > .mra-loop-motion { --mra-d: .32s; }
.e-loop-item:nth-child(n+6 of .e-loop-item) > .mra-loop-motion { --mra-d: .4s; }
@media (prefers-reduced-motion: reduce) {
	.elementor-element.animated.mra-settle img { animation: none; }
}