/* ==========================================================================
   Easy IT — Elementor design system
   --------------------------------------------------------------------------
   Reusable classes you type into an Elementor widget's
   Advanced → CSS Classes field. Every class works in two places:

     1. on the Elementor widget wrapper (.elementor-widget), and
     2. on a plain HTML element, for hand-written PHP fallback templates.

   That is why most rules list two selectors — Elementor puts your class on
   the widget wrapper, not on the <h1> or <a> inside it.

   Brand tokens (--ei-red, --ei-ink, …) come from assets/css/easyit.css, which
   is always enqueued before this file. The @supports-free fallbacks below
   keep the file usable even if that order ever changes.

   1.  Tokens & layout
   2.  Sections & container
   3.  Hero
   4.  Typography: eyebrow, title, lead, red line
   5.  Buttons
   6.  Services grid & cards
   7.  Process
   8.  Geometry backgrounds
   9.  Contact grid & card
   10. Footer CTA
   11. Extra helpers
   12. Elementor plumbing
   13. Responsive
   ========================================================================== */

/* 1. Tokens & layout ------------------------------------------------------ */

:root {
	--ei-el-gap: clamp(1.25rem, 2.5vw, 2rem);
	--ei-el-section-y: clamp(3.5rem, 8vw, 7rem);
	--ei-el-card-pad: clamp(1.5rem, 3vw, 2.25rem);
}

/* 2. Sections & container -------------------------------------------------- */

.easyit-section {
	position: relative;
	padding-block: var(--ei-el-section-y);
}

/* Width wrapper matching the theme header and footer. Put it on an Elementor
   section set to "Full Width" when its content should still line up with the
   logo above it. */
.easyit-container {
	width: min(100% - (var(--ei-gutter, 3rem) * 2), var(--ei-container, 1240px));
	margin-inline: auto;
}

.easyit-section--tight {
	padding-block: clamp(2rem, 4vw, 3.5rem);
}

/* A heading section followed by its content section would otherwise stack two
   lots of padding and tear the block in half. Collapse the seam. */
.easyit-section--tight + .easyit-section--tight {
	padding-top: 0;
}

/* Light grey band. Both names work; easyit-section-light is the canonical one. */
.easyit-section-light,
.easyit-section--muted {
	background: var(--ei-light, #f7f7f7);
}

.easyit-section--dark {
	background: var(--ei-black, #050505);
	color: #ffffff;
}

.easyit-section--dark .easyit-title,
.easyit-section--dark .easyit-title .elementor-heading-title,
.easyit-section--dark h1,
.easyit-section--dark h2,
.easyit-section--dark h3 {
	color: #ffffff;
}

.easyit-section--dark .easyit-lead,
.easyit-section--dark .easyit-lead p {
	color: #c9c9c9;
}

/* 3. Hero ----------------------------------------------------------------- */

.easyit-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3.5rem, 9vw, 7.5rem);
}

/* Two-column hero: copy left, geometry right. Use it on an Elementor section
   or on any wrapper; on mobile it collapses to one column automatically. */
.easyit-hero-grid:not(.elementor-section) {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}

.easyit-hero-grid > * {
	min-width: 0;
}

/* 4. Typography ----------------------------------------------------------- */

.easyit-eyebrow,
.easyit-eyebrow .elementor-heading-title,
.easyit-eyebrow p {
	display: block;
	margin: 0 0 1rem;
	color: var(--ei-gray, #555555);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .28em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Red arrow-marker in front of an eyebrow, matching the coming soon badge. */
.easyit-eyebrow--marked .elementor-heading-title::before,
.easyit-eyebrow--marked::before {
	content: "";
	display: inline-block;
	width: 34px;
	height: 1px;
	margin-right: .8rem;
	background: var(--ei-red, #f20d0d);
	vertical-align: middle;
}

.easyit-title,
.easyit-title .elementor-heading-title {
	margin: 0 0 1rem;
	color: var(--ei-black, #050505);
	font-size: clamp(2rem, 4.6vw, 3.5rem);
	font-weight: 200;
	line-height: 1.06;
	letter-spacing: -.03em;
}

.easyit-title--hero,
.easyit-title--hero .elementor-heading-title {
	font-size: clamp(2.5rem, 6vw, 4.75rem);
	line-height: .99;
	letter-spacing: -.035em;
}

.easyit-title--section,
.easyit-title--section .elementor-heading-title {
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
}

/* Wrap a word in <span class="easyit-accent"> inside any heading to make it
   brand red — the same trick the coming soon page uses for "it" in easyit.rs. */
.easyit-accent {
	color: var(--ei-red, #f20d0d);
}

.easyit-lead,
.easyit-lead p {
	margin: 0 0 1.25rem;
	max-width: 60ch;
	color: var(--ei-gray, #555555);
	font-size: clamp(1rem, 1.15vw, 1.125rem);
	font-weight: 300;
	line-height: 1.75;
}

.easyit-lead > *:last-child,
.easyit-lead p:last-child {
	margin-bottom: 0;
}

/* Thin red accent rule. Put it on an Elementor Divider widget, or use the
   standalone element in a fallback template. easyit-red-line is the canonical
   name; easyit-rule is kept as an alias so older markup keeps working. */
.easyit-red-line,
.easyit-red-line .elementor-divider-separator,
.easyit-rule,
.easyit-rule .elementor-divider-separator {
	width: 64px;
	max-width: 64px;
	height: 2px;
	margin: 0 0 clamp(1.5rem, 3vw, 2rem);
	border: 0;
	background: var(--ei-red, #f20d0d);
}

.easyit-red-line .elementor-divider,
.easyit-rule .elementor-divider {
	padding-block: 0;
	justify-content: flex-start;
}

/* Full-bleed hairline variant, for separating two sections. */
.easyit-red-line--wide,
.easyit-red-line--wide .elementor-divider-separator {
	width: 100%;
	max-width: none;
	height: 1px;
}

/* 5. Buttons -------------------------------------------------------------- */

.easyit-button .elementor-button,
a.easyit-button {
	display: inline-flex;
	align-items: center;
	gap: .85rem;
	padding: 1.05rem 2.1rem;
	background: var(--ei-red, #f20d0d);
	border: 1px solid var(--ei-red, #f20d0d);
	border-radius: 2px;
	color: #ffffff;
	fill: #ffffff;
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .16em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.easyit-button .elementor-button:hover,
.easyit-button .elementor-button:focus,
a.easyit-button:hover,
a.easyit-button:focus {
	background: var(--ei-black, #050505);
	border-color: var(--ei-black, #050505);
	color: #ffffff;
}

.easyit-button-secondary .elementor-button,
a.easyit-button-secondary {
	display: inline-flex;
	align-items: center;
	gap: .85rem;
	padding: 1.05rem 2.1rem;
	background: transparent;
	border: 1px solid var(--ei-line, #e6e6e6);
	border-radius: 2px;
	color: var(--ei-black, #050505);
	fill: var(--ei-black, #050505);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .16em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: border-color .2s ease, color .2s ease;
}

.easyit-button-secondary .elementor-button:hover,
.easyit-button-secondary .elementor-button:focus,
a.easyit-button-secondary:hover,
a.easyit-button-secondary:focus {
	border-color: var(--ei-black, #050505);
	color: var(--ei-red, #f20d0d);
}

/* Buttons sitting side by side. Put this on the column or a container. */
.easyit-button-row {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.5rem;
}

/* An Elementor widget is full width by default, so two button widgets dropped
   in the same column would stack. Shrinking them to their content lets them sit
   next to each other without setting each widget's width by hand in the editor.
   Specificity (0,2,0) beats Elementor's own .elementor-widget rule. */
.elementor-widget.easyit-button,
.elementor-widget.easyit-button-secondary {
	width: auto;
	margin-right: .75rem;
}

/* …except inside a card, where the link should keep its own line. */
.easyit-service-card .elementor-widget.easyit-service-card__link {
	width: 100%;
	margin-right: 0;
}

/* 6. Services grid & cards ------------------------------------------------- */

.easyit-services-grid:not(.elementor-section) {
	display: grid;
	gap: var(--ei-el-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.easyit-services-grid--2:not(.elementor-section) { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.easyit-services-grid--4:not(.elementor-section) { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }

.easyit-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--ei-el-card-pad);
	background: #ffffff;
	border: 1px solid var(--ei-line, #e6e6e6);
	border-radius: 2px;
	transition: border-color .2s ease, transform .2s ease;
}

.easyit-service-card:hover {
	border-color: var(--ei-red, #f20d0d);
	transform: translateY(-2px);
}

/* Small red triangle in the card corner — the logo motif, drawn in CSS. */
.easyit-service-card::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-top: 14px solid var(--ei-red, #f20d0d);
	border-left: 14px solid transparent;
	opacity: 0;
	transition: opacity .2s ease;
}

.easyit-service-card:hover::after {
	opacity: 1;
}

.easyit-service-card__num {
	display: block;
	margin-bottom: .9rem;
	color: var(--ei-red, #f20d0d);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .2em;
}

/* Icon slot at the top of a service card. Drop an Elementor Icon widget in it,
   or leave it empty and it renders the red triangle motif on its own. */
.easyit-service-icon {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 44px;
	height: 44px;
	margin-bottom: 1.25rem;
	color: var(--ei-red, #f20d0d);
}

.easyit-service-icon:empty::before {
	content: "";
	width: 0;
	height: 0;
	border-bottom: 24px solid var(--ei-red, #f20d0d);
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
}

.easyit-service-icon svg,
.easyit-service-icon .elementor-icon,
.easyit-service-icon i {
	width: 100%;
	height: 100%;
	color: inherit;
	fill: currentColor;
	font-size: 28px;
}

.easyit-service-icon .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0;
}

.easyit-service-card__title,
.easyit-service-card h3 {
	margin: 0 0 .6rem;
	color: var(--ei-black, #050505);
	font-size: 1.1875rem;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.easyit-service-card__text,
.easyit-service-card p {
	margin: 0;
	color: var(--ei-gray, #555555);
	font-size: .9375rem;
	line-height: 1.7;
}

.easyit-service-card__link {
	margin-top: auto;
	padding-top: 1.25rem;
	color: var(--ei-black, #050505);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-decoration: none;
	text-transform: uppercase;
}

.easyit-service-card__link:hover,
.easyit-service-card__link .elementor-button:hover {
	color: var(--ei-red, #f20d0d);
}

/* Same link, rendered by an Elementor Button widget instead of a bare <a>. */
.easyit-service-card__link .elementor-button {
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--ei-black, #050505);
	fill: var(--ei-black, #050505);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* Standalone hero artwork block. The geometry SVG is pulled in from the theme
   folder by relative path, so it works on any domain and needs no upload to
   the media library. */
.easyit-hero-art {
	display: block;
	width: 100%;
	aspect-ratio: 8 / 9;
	background-image: url("../img/easyit-geometry.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.easyit-hero-art--triangle {
	aspect-ratio: 1 / 1;
	background-image: url("../img/easyit-triangle.svg");
}

/* Reference/project grid. */
.easyit-projects-grid:not(.elementor-section) {
	display: grid;
	gap: var(--ei-el-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

/* Project/reference card — same skeleton, lighter treatment. */
.easyit-project-card {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 11rem;
	padding: var(--ei-el-card-pad);
	background: var(--ei-light, #f7f7f7);
	border: 1px solid transparent;
	border-radius: 2px;
	transition: border-color .2s ease, background-color .2s ease;
}

.easyit-project-card:hover {
	background: #ffffff;
	border-color: var(--ei-line, #e6e6e6);
}

.easyit-project-card__name {
	margin: 0;
	color: var(--ei-black, #050505);
	font-size: 1.125rem;
	font-weight: 400;
	letter-spacing: -.01em;
}

.easyit-project-card__meta {
	margin: .35rem 0 0;
	color: var(--ei-gray, #555555);
	font-size: .8125rem;
}

/* 7. Process --------------------------------------------------------------- */

/* easyit-process-grid is the canonical name; easyit-process is an alias. */
.easyit-process-grid:not(.elementor-section),
.easyit-process:not(.elementor-section) {
	display: grid;
	gap: var(--ei-el-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
	counter-reset: easyit-step;
}

.easyit-process-step {
	position: relative;
	padding-top: 2.25rem;
	border-top: 1px solid var(--ei-line, #e6e6e6);
	counter-increment: easyit-step;
}

/* The step number is generated, so reordering steps in Elementor renumbers
   them automatically — nothing to keep in sync by hand. */
.easyit-process-step::before {
	content: counter(easyit-step, decimal-leading-zero);
	position: absolute;
	top: 1rem;
	left: 0;
	color: var(--ei-red, #f20d0d);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .2em;
}

.easyit-process-step::after {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 28px;
	height: 1px;
	background: var(--ei-red, #f20d0d);
}

.easyit-process-step__title,
.easyit-process-step h3 {
	margin: 0 0 .5rem;
	color: var(--ei-black, #050505);
	font-size: 1.0625rem;
	font-weight: 400;
	letter-spacing: -.01em;
}

.easyit-process-step__text,
.easyit-process-step p {
	margin: 0;
	color: var(--ei-gray, #555555);
	font-size: .9375rem;
	line-height: 1.7;
}

/* 8. Geometry backgrounds -------------------------------------------------- */

/* Decorative triangle composition. Path is relative to this stylesheet, so it
   resolves on any domain without touching the media library. */
.easyit-geometry-bg {
	position: relative;
}

.easyit-geometry-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../img/easyit-geometry.svg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
	opacity: .9;
	pointer-events: none;
	z-index: 0;
}

.easyit-geometry-bg > * {
	position: relative;
	z-index: 1;
}

.easyit-geometry-bg--left::before {
	background-position: left center;
}

.easyit-geometry-bg--soft::before {
	opacity: .35;
}

/* Single triangle accent, for section corners and card decks. */
.easyit-geometry-accent {
	position: relative;
}

.easyit-geometry-accent::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(8rem, 18vw, 16rem);
	aspect-ratio: 1 / 1;
	background-image: url("../img/easyit-triangle.svg");
	background-repeat: no-repeat;
	background-position: top right;
	background-size: contain;
	opacity: .6;
	pointer-events: none;
}

/* Dotted field, useful behind stats or a contact card. */
.easyit-dots-bg {
	background-image: url("../img/easyit-dots.svg");
	background-repeat: repeat;
	background-position: left top;
}

/* 9. Contact grid & card ---------------------------------------------------- */

/* Copy on the left, contact card on the right; stacks on mobile. */
.easyit-contact-grid:not(.elementor-section) {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	align-items: start;
	gap: clamp(2rem, 5vw, 4rem);
}

.easyit-contact-card {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: clamp(1.75rem, 4vw, 3rem);
	background: var(--ei-light, #f7f7f7);
	border-radius: 2px;
	border-left: 2px solid var(--ei-red, #f20d0d);
}

.easyit-contact-card__row {
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.easyit-contact-card__label {
	color: var(--ei-gray, #555555);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .28em;
	text-transform: uppercase;
}

.easyit-contact-card__value,
.easyit-contact-card a {
	color: var(--ei-black, #050505);
	font-size: 1.125rem;
	font-weight: 300;
	letter-spacing: -.01em;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.easyit-contact-card a:hover,
.easyit-contact-card a:focus {
	color: var(--ei-red, #f20d0d);
}

/* 10. Footer CTA ----------------------------------------------------------- */

.easyit-footer-cta {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 7vw, 5.5rem);
	background: var(--ei-black, #050505);
	color: #ffffff;
	text-align: center;
}

.easyit-footer-cta .easyit-title,
.easyit-footer-cta .easyit-title .elementor-heading-title,
.easyit-footer-cta h2 {
	color: #ffffff;
}

.easyit-footer-cta .easyit-lead,
.easyit-footer-cta .easyit-lead p {
	margin-inline: auto;
	color: #c9c9c9;
	text-align: center;
}

.easyit-footer-cta .easyit-button-row {
	justify-content: center;
}

.easyit-footer-cta .easyit-button-secondary .elementor-button,
.easyit-footer-cta a.easyit-button-secondary {
	border-color: rgba(255, 255, 255, .35);
	color: #ffffff;
	fill: #ffffff;
}

.easyit-footer-cta .easyit-button-secondary .elementor-button:hover,
.easyit-footer-cta a.easyit-button-secondary:hover {
	border-color: #ffffff;
	color: #ffffff;
}

/* Thin red rule across the top of the CTA band. */
.easyit-footer-cta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--ei-red, #f20d0d);
}

/* 11. Extra helpers -------------------------------------------------------- */

.easyit-narrow {
	max-width: 46rem;
	margin-inline: auto;
}

.easyit-center {
	text-align: center;
}

.easyit-center .easyit-lead,
.easyit-center .easyit-lead p {
	margin-inline: auto;
}

.easyit-center .easyit-rule,
.easyit-center .easyit-rule .elementor-divider-separator {
	margin-inline: auto;
}

.easyit-grid-2:not(.elementor-section) { display: grid; gap: var(--ei-el-gap); grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.easyit-grid-3:not(.elementor-section) { display: grid; gap: var(--ei-el-gap); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.easyit-grid-4:not(.elementor-section) { display: grid; gap: var(--ei-el-gap); grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }

.easyit-stat__value {
	display: block;
	color: var(--ei-black, #050505);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 200;
	letter-spacing: -.03em;
	line-height: 1;
}

.easyit-stat__label {
	display: block;
	margin-top: .5rem;
	color: var(--ei-gray, #555555);
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.easyit-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.easyit-list li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: .6rem;
	color: var(--ei-gray, #555555);
}

.easyit-list li::before {
	content: "";
	position: absolute;
	top: .65em;
	left: 0;
	width: 0;
	height: 0;
	border-left: 7px solid var(--ei-red, #f20d0d);
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
}

/* 12. Elementor plumbing --------------------------------------------------- */

/* Grid bridge.
   The grid classes above assume the class sits on the element that should
   become the grid. On an Elementor *section* that element is one level down
   (.elementor-container), and Elementor gives each column a percentage width.
   These rules move the grid onto the inner container and hand sizing back to
   the grid, so you can drop easyit-services-grid straight onto a section and
   add or remove columns without touching widths. */
.elementor-section.easyit-services-grid > .elementor-container,
.elementor-section.easyit-projects-grid > .elementor-container,
.elementor-section.easyit-process-grid > .elementor-container,
.elementor-section.easyit-contact-grid > .elementor-container,
.elementor-section.easyit-hero-grid > .elementor-container,
.elementor-section.easyit-grid-2 > .elementor-container,
.elementor-section.easyit-grid-3 > .elementor-container,
.elementor-section.easyit-grid-4 > .elementor-container {
	display: grid;
	gap: var(--ei-el-gap);
}

.elementor-section.easyit-services-grid > .elementor-container {
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.elementor-section.easyit-projects-grid > .elementor-container {
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

.elementor-section.easyit-process-grid > .elementor-container {
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
	counter-reset: easyit-step;
}

.elementor-section.easyit-contact-grid > .elementor-container {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	align-items: start;
	gap: clamp(2rem, 5vw, 4rem);
}

.elementor-section.easyit-hero-grid > .elementor-container {
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}

.elementor-section.easyit-grid-2 > .elementor-container { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.elementor-section.easyit-grid-3 > .elementor-container { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.elementor-section.easyit-grid-4 > .elementor-container { grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }

/* Let the grid size the columns instead of Elementor's percentages. */
.elementor-section.easyit-services-grid > .elementor-container > .elementor-column,
.elementor-section.easyit-projects-grid > .elementor-container > .elementor-column,
.elementor-section.easyit-process-grid > .elementor-container > .elementor-column,
.elementor-section.easyit-contact-grid > .elementor-container > .elementor-column,
.elementor-section.easyit-hero-grid > .elementor-container > .elementor-column,
.elementor-section.easyit-grid-2 > .elementor-container > .elementor-column,
.elementor-section.easyit-grid-3 > .elementor-container > .elementor-column,
.elementor-section.easyit-grid-4 > .elementor-container > .elementor-column {
	width: auto;
	max-width: none;
	min-width: 0;
}

/* Elementor's own container widths win over the theme's; make sure a section
   dropped on a full-width page is never squeezed by a theme wrapper. */
.easyit-elementor-page .site-main,
.easyit-elementor-page .entry,
.easyit-elementor-page .entry__content {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Elementor Canvas has no theme header/footer at all — nothing to correct.
   Elementor Full Width keeps them, so only reset the gap the theme adds. */
.elementor-template-full-width .site-main {
	padding: 0;
}

/* Keep the theme's own container available inside Elementor when a section is
   set to Full Width but its content should still line up with the header. */
.easyit-align-container {
	width: min(100% - (var(--ei-gutter, 3rem) * 2), var(--ei-container, 1240px));
	margin-inline: auto;
}

/* 13. Responsive ----------------------------------------------------------- */

@media (max-width: 62rem) {
	.easyit-hero-grid:not(.elementor-section),
	.elementor-section.easyit-hero-grid > .elementor-container {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
		gap: 2rem;
	}
}

@media (max-width: 48rem) {
	.easyit-hero-grid:not(.elementor-section),
	.easyit-contact-grid:not(.elementor-section),
	.elementor-section.easyit-hero-grid > .elementor-container,
	.elementor-section.easyit-contact-grid > .elementor-container {
		grid-template-columns: 1fr;
	}

	/* Geometry drops below the copy and shifts right, exactly like the
	   coming soon page — it must never sit behind the text on a phone. */
	.easyit-hero-grid:not(.elementor-section) > *:last-child,
	.elementor-section.easyit-hero-grid > .elementor-container > .elementor-column:last-child {
		justify-self: end;
		width: 82%;
		max-width: 22rem;
		margin-top: 2.5rem;
	}

	.easyit-geometry-bg::before {
		background-position: right bottom;
		background-size: 78% auto;
		opacity: .5;
	}

	.easyit-geometry-accent::before {
		width: 8rem;
		opacity: .4;
	}

	/* Full-width, centred buttons on phones — same as the coming soon page. */
	.elementor-widget.easyit-button,
	.elementor-widget.easyit-button-secondary {
		width: 100%;
		margin-right: 0;
	}

	.easyit-button .elementor-button,
	.easyit-button-secondary .elementor-button,
	.easyit-button-row a.easyit-button,
	.easyit-button-row a.easyit-button-secondary {
		width: 100%;
		justify-content: center;
	}

	.easyit-button-row {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.easyit-service-card,
	.easyit-project-card {
		transition: none;
	}

	.easyit-service-card:hover {
		transform: none;
	}
}