/* BUILD 1.3.0 — 2026-07-26 · IPS — IN PREMISES SOLUTION */
/* =====================================================================
   180D BASE — the invariant layer.
   Extracted from the ten delivered plugins (Fulaz, ENGR FIX, Boscoo,
   SANA, SAT, LJS1, Super Mentality, KFSH-J, Lolita, Auto-Gate).
   Every one of them contained this layer, modulo the prefix.

   HOW TO USE: replace every ips with the project prefix (kfshj, sat,
   boscoo…). Never edit this file's rules to fix a component — add a
   component rule instead. This layer is the contract that survives the
   HTML → Elementor conversion untouched.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. TOKENS — fill in per project. See references/tokens.md.
   Keep the NAMES exactly; only the VALUES change per project.
   --------------------------------------------------------------------- */
:root {
	/* surfaces — sand canvas */
	--ips-bg:          #EDE6D8;
	--ips-bg-deep:     #E2D8C4;
	--ips-fg:          #14180F;
	--ips-card:        #F8F4EC;
	--ips-card-fg:     #14180F;
	--ips-muted:       #DFD4BE;
	--ips-muted-fg:    #5A5B4C;
	--ips-border:      #D2C5AC;

	/* brand — olive dominant, copper accent */
	--ips-primary:     #5F7E42;
	--ips-primary-fg:  #FDFBF6;
	--ips-primary-glow:#7FA359;
	--ips-accent:      #B87A44;
	--ips-accent-fg:   #FFFFFF;
	--ips-deep:        #0E1210;
	--ips-deep-fg:     #EDE6D8;

	/* type */
	--ips-font:         "Cairo", system-ui, "Segoe UI", Tahoma, sans-serif;
	--ips-font-display: "Cairo", system-ui, "Segoe UI", Tahoma, sans-serif;

	/* geometry — warm personality */
	--ips-radius:      1rem;
	--ips-radius-lg:   1.5rem;
	--ips-max:         80rem;
	--ips-max-narrow:  64rem;
	--ips-pad:         1rem;
	--ips-pad-lg:      2rem;

	/* elevation — warm tinted */
	--ips-shadow-sm:   0 1px 3px rgba(20,24,15,.07);
	--ips-shadow-md:   0 4px 14px -4px rgba(20,24,15,.14);
	--ips-shadow-card: 0 14px 34px -14px rgba(20,24,15,.30);
	--ips-shadow-glow: 0 0 45px rgba(95,126,66,.30), 0 18px 44px -14px rgba(20,24,15,.34);

	/* gradients */
	--ips-gradient-primary: linear-gradient(135deg, #5F7E42, #7FA359);
	--ips-gradient-accent:  linear-gradient(135deg, #B87A44, #D9A472);
	--ips-gradient-hero:    linear-gradient(to top, rgba(22,32,18,.92) 0%, rgba(47,67,33,.72) 38%, rgba(95,126,66,.46) 68%, rgba(184,122,68,.34) 100%);
	--ips-gradient-text:    linear-gradient(100deg, #EDE6D8 0%, #D9A472 55%, #B87A44 100%);

	/* signature — grain */
	--ips-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");

	--ips-transition:  all .3s cubic-bezier(.4, 0, .2, 1);

}

/* ---------------------------------------------------------------------
   1. HORIZONTAL-SCROLL DEFENSE — mandatory, nine layers.
   This block shipped in 10/10 projects. Do not trim it.
   --------------------------------------------------------------------- */
[class^="ips-"], [class*=" ips-"],
[class^="ips-"] *, [class*=" ips-"] *,
[class^="ips-"] *::before, [class*=" ips-"] *::before,
[class^="ips-"] *::after,  [class*=" ips-"] *::after { box-sizing: border-box; }

/* 1b — section-level clip. Add every top-level wrapper class here. */
.ips-section, .ips-hero, .ips-page-hero, .ips-header, .ips-footer,
.ips-cta-banner, .ips-contact, .ips-marquee, .ips-svc-block, .ips-band {
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip;
}

/* 1c — grid/flex children must be allowed to shrink below intrinsic width */
[class^="ips-"][class*="-grid"] > *,
[class^="ips-"][class*="-row"]  > *,
.ips-form-row > *, .ips-form-field { min-width: 0; max-width: 100%; }

/* 1d — media */
[class^="ips-"] img,    [class*=" ips-"] img,
[class^="ips-"] svg,    [class*=" ips-"] svg,
[class^="ips-"] video,  [class*=" ips-"] video,
[class^="ips-"] iframe, [class*=" ips-"] iframe { max-width: 100%; }
[class^="ips-"] img, [class^="ips-"] iframe { height: auto; }

/* 1e — form controls */
[class^="ips-"] input, [class^="ips-"] textarea,
[class^="ips-"] select, [class^="ips-"] button { max-width: 100%; }
[class^="ips-"] input[type="text"],  [class^="ips-"] input[type="email"],
[class^="ips-"] input[type="tel"],   [class^="ips-"] input[type="number"],
[class^="ips-"] textarea, [class^="ips-"] select { width: 100%; }

/* 1f — long unbroken strings (emails, phones, URLs) */
[class^="ips-"] p, [class^="ips-"] a, [class^="ips-"] span,
[class^="ips-"] li, [class^="ips-"] dd { overflow-wrap: anywhere; word-break: break-word; }

/* 1g — honeypot (spam trap, never visible, never pushes layout) */
.ips-honeypot {
	position: absolute !important; left: -10000px !important;
	width: 1px !important; height: 1px !important; overflow: hidden !important;
}

/* ---------------------------------------------------------------------
   2. TYPOGRAPHY BASELINE
   Arabic needs a taller line-height than Latin — this is not optional.
   --------------------------------------------------------------------- */
[class^="ips-"], [class*=" ips-"] { font-family: var(--ips-font); }

[class^="ips-"] h1, [class^="ips-"] h2,
[class^="ips-"] h3, [class^="ips-"] h4,
[class^="ips-"][class*="-title"],
[class^="ips-"][class*="-headline"] {
	font-family: var(--ips-font-display);
	line-height: 1.25;
	margin: 0;
}

[class^="ips-"] p, [class^="ips-"] li,
[class^="ips-"][class*="-desc"] { line-height: 1.75; }

body.rtl      [class^="ips-"] p, body.rtl      [class^="ips-"] li,
html[lang^="ar"] [class^="ips-"] p, html[lang^="ar"] [class^="ips-"] li,
body.rtl      [class^="ips-"][class*="-desc"],
html[lang^="ar"] [class^="ips-"][class*="-desc"] { line-height: 1.9; }

/* Latin runs inside RTL (phone numbers, emails, prices) */
.ips-ltr, [dir="ltr"] { direction: ltr; unicode-bidi: embed; }

/* ---------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   --------------------------------------------------------------------- */
.ips-container {
	width: 100%;
	max-width: var(--ips-max);
	margin-inline: auto;
	padding-inline: var(--ips-pad);
}
.ips-container-narrow { max-width: var(--ips-max-narrow); }
@media (min-width: 768px) { .ips-container { padding-inline: var(--ips-pad-lg); } }

.ips-section { position: relative; padding-block: 4rem; background: var(--ips-bg); }
@media (min-width: 768px) { .ips-section { padding-block: 6rem; } }

/* Responsive grid helper — mobile 1col, tablet 2, desktop N.
   Use .ips-cols-2/3/4 on the same element. */
.ips-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
	.ips-cols-2, .ips-cols-3, .ips-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.ips-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ips-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   4. SECTION-HEAD RHYTHM
   Doubled class = specificity 0,2,0, which beats Elementor's
   `h1..h6 { margin: 0 }` reset. This was the #1 round-two complaint
   before it was single-sourced. Never set head spacing per component.
   --------------------------------------------------------------------- */
.ips-section-head.ips-section-head { margin-bottom: 3rem; }
.ips-section-head.ips-section-head .ips-eyebrow {
	display: block;
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ips-accent);
}
.ips-section-head.ips-section-head .ips-section-title { margin: 0 0 1rem; }
.ips-section-head.ips-section-head .ips-head-rule {
	display: block; width: 6rem; height: 0.25rem;
	margin: 0 auto 1.25rem; border-radius: 999px;
	background: var(--ips-gradient-accent);
}
.ips-section-head.ips-section-head .ips-section-desc {
	margin: 0 auto; max-width: 40rem; color: var(--ips-muted-fg);
}
.ips-align-center { text-align: center; }
.ips-align-center h1, .ips-align-center h2, .ips-align-center h3,
.ips-align-center p,  .ips-align-center span { text-align: center; }
.ips-align-start .ips-head-rule { margin-inline: 0; }

/* ---------------------------------------------------------------------
   5. ICON CONTAINER — SIZE AND LAYOUT ONLY.
   Colour is declared PER COMPONENT against its own chip background.
   This selector is 0,2,0 and silently beat per-component colours in
   three builds, shipping invisible icons. Never add `color` here.
   --------------------------------------------------------------------- */
[class^="ips-"][class*="-icon"],
[class*=" ips-"][class*="-icon"] {
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0; line-height: 1;
}
[class^="ips-"][class*="-icon"] svg,
[class*=" ips-"][class*="-icon"] svg {
	width: 1.5rem; height: 1.5rem; display: block;
	color: inherit; fill: none; stroke: currentColor;
}
[class^="ips-"][class*="-icon"] i,
[class*=" ips-"][class*="-icon"] i { font-size: 1.1rem; color: inherit; line-height: 1; }

/* Icon chip — the recurring "coloured square behind an icon" pattern.
   Set the colour on the chip; the icon inherits it. */
.ips-icon-chip {
	width: 3.5rem; height: 3.5rem;
	border-radius: var(--ips-radius);
	background: var(--ips-gradient-accent);
	color: var(--ips-primary-fg);              /* ← per-component override */
	box-shadow: var(--ips-shadow-md);
	transition: var(--ips-transition);
}

/* ---------------------------------------------------------------------
   6. BUTTON SYSTEM — three-layer defense against theme resets.
   Layer 1 (here): shape. Layer 2: element+class selectors with
   !important on colour. Layer 3: descendant colour lock.
   --------------------------------------------------------------------- */
.ips-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	font-family: var(--ips-font); font-weight: 700; font-size: 1rem; line-height: 1.2;
	padding: 0.85rem 2rem;
	border-radius: 9999px;
	border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
	transition: var(--ips-transition);
}
a.ips-btn.ips-btn-primary, a.ips-btn.ips-btn-primary:link,
a.ips-btn.ips-btn-primary:visited, button.ips-btn.ips-btn-primary,
.ips-btn.ips-btn-primary[class] {
	background: var(--ips-gradient-primary) !important;
	color: var(--ips-primary-fg) !important;
	text-decoration: none !important;
	box-shadow: var(--ips-shadow-md);
}
a.ips-btn.ips-btn-primary:hover, button.ips-btn.ips-btn-primary:hover,
.ips-btn.ips-btn-primary[class]:hover {
	color: var(--ips-primary-fg) !important;
	transform: translateY(-2px);
	box-shadow: var(--ips-shadow-glow);
}
.ips-btn.ips-btn-primary * { color: var(--ips-primary-fg) !important; }

a.ips-btn.ips-btn-outline, button.ips-btn.ips-btn-outline,
.ips-btn.ips-btn-outline[class] {
	background: transparent !important;
	color: var(--ips-fg) !important;
	border: 1px solid var(--ips-border) !important;
}
a.ips-btn.ips-btn-outline:hover, .ips-btn.ips-btn-outline[class]:hover {
	border-color: var(--ips-accent) !important;
	color: var(--ips-accent) !important;
}
.ips-btn-block { width: 100%; }

/* ---------------------------------------------------------------------
   7. CARD
   --------------------------------------------------------------------- */
.ips-card {
	position: relative;
	display: flex; flex-direction: column; gap: 1rem;
	padding: 1.75rem;
	border-radius: var(--ips-radius-lg);
	border: 1px solid var(--ips-border);
	background: var(--ips-card);
	color: var(--ips-card-fg);
	box-shadow: var(--ips-shadow-card);
	transition: var(--ips-transition);
	height: 100%;
}
.ips-card:hover { transform: translateY(-6px); box-shadow: var(--ips-shadow-glow); }
.ips-card-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.ips-card-desc  { color: var(--ips-muted-fg); margin: 0; }

/* ---------------------------------------------------------------------
   8. FORM
   --------------------------------------------------------------------- */
.ips-form-row { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ips-form-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.ips-form-field { margin-bottom: 1.25rem; }
.ips-form-field label {
	display: block; margin-bottom: 0.5rem;
	font-size: 0.75rem; font-weight: 600;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--ips-muted-fg);
}
.ips-form-field input, .ips-form-field textarea, .ips-form-field select {
	width: 100%; max-width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--ips-border);
	border-radius: var(--ips-radius);
	background: var(--ips-card);
	color: var(--ips-fg);
	font: inherit; font-size: 0.9375rem;
	transition: border-color .3s;
}
.ips-form-field textarea { min-height: 8rem; resize: vertical; }
.ips-form-field :is(input, textarea, select):focus {
	outline: 0; border-color: var(--ips-accent);
}
/* Native <select> popup is painted by the OS. On dark themes the option
   text renders white-on-white without these two lines. */
.ips-form-field select {
	-webkit-appearance: none; appearance: none;
	/* dark themes only: color-scheme: dark; background-color: <solid dark>; */
}
.ips-form-notice { display: none; margin-top: 1rem; padding: 0.9rem 1.1rem; border-radius: var(--ips-radius); font-size: 0.9rem; }
.ips-form-notice.is-ok   { display: block; background: rgba(22,163,74,.12); color: #16A34A; }
.ips-form-notice.is-err  { display: block; background: rgba(220,38,38,.12); color: #DC2626; }

/* 8b — FORM-SECTION CONTAINMENT (v7.1 layer 9).
   The contact section is where horizontal scroll came back three times. */
.ips-contact, .ips-contact * { min-width: 0; }
.ips-contact { overflow-x: clip; }

/* ---------------------------------------------------------------------
   9. MOTION — see references/motion.md for the full keyframe set.
   --------------------------------------------------------------------- */
@keyframes ips-fade-up   { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ips-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ips-slide-l   { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes ips-slide-r   { from { opacity: 0; transform: translateX(60px); }  to { opacity: 1; transform: none; } }
@keyframes ips-float     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ips-marquee   { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.ips-anim-fade  { animation: ips-fade-up .7s cubic-bezier(.2,.8,.2,1) both; }
.ips-anim-left  { animation: ips-slide-l .75s cubic-bezier(.2,.8,.2,1) both; }
.ips-anim-right { animation: ips-slide-r .75s cubic-bezier(.2,.8,.2,1) both; }
.ips-anim-float { animation: ips-float 4s ease-in-out infinite; }

/* Scroll reveal — JS adds .is-visible. NEVER apply .ips-reveal to
   dynamic content (filtered grids, AJAX lists, WooCommerce archives):
   re-rendered nodes never receive .is-visible and stay invisible. */
.ips-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.ips-reveal.is-visible { opacity: 1; transform: none; }

/* Editor preview + reduced motion — force final state so the canvas is
   never blank while an animation delay is pending. */
.elementor-editor-active [class*="ips-anim-"],
.elementor-editor-active .ips-reveal,
body.elementor-editor-preview [class*="ips-anim-"],
body.elementor-editor-preview .ips-reveal {
	opacity: 1 !important; transform: none !important; animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
	[class*="ips-anim-"], .ips-reveal {
		opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important;
	}
}

/* ---------------------------------------------------------------------
   10. MOBILE PERFORMANCE BUDGET
   Blur/backdrop-filter and large shadows repaint every scroll frame.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	[class^="ips-"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
	.ips-anim-float { animation: none !important; }
	.ips-card { box-shadow: 0 4px 12px -6px rgba(0,0,0,.35) !important; }
}

/* ---------------------------------------------------------------------
   11. WORDPRESS/ELEMENTOR NEUTRALISATION
   Keep this block even in the HTML build — it is dead weight in the
   browser and load-bearing after conversion.
   --------------------------------------------------------------------- */
.elementor-widget-container > [class^="ips-"] { width: 100%; }
[class^="ips-"] a { text-decoration: none; }
[class^="ips-"] ul, [class^="ips-"] ol { list-style: none; margin: 0; padding: 0; }

/* ---------------------------------------------------------------------
   12. IMAGE SLOTS
   Class B (factual: projects, gallery, real products) ships as a visible
   placeholder that reserves the final dimensions, so nothing reflows when
   the client uploads the real image in WordPress.
   See references/imagery.md.
   --------------------------------------------------------------------- */
.ips-media { position: relative; overflow: hidden; border-radius: var(--ips-radius-lg); }
.ips-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s ease; }
.ips-media:hover img { transform: scale(1.05); }

.ips-placeholder {
	display: grid; place-items: center; min-height: 12rem;
	border: 1px dashed var(--ips-border);
	border-radius: var(--ips-radius-lg);
	background:
		repeating-linear-gradient(45deg, var(--ips-muted) 0 12px, transparent 12px 24px),
		var(--ips-bg-deep);
}
.ips-placeholder-label {
	font-size: .8rem; letter-spacing: .15em; color: var(--ips-muted-fg);
}

/* =====================================================================
   IPS COMPONENT LAYER — sections in page order.
   Everything below is project CSS. The base layer above is untouched.
   ===================================================================== */

/* ---------------------------------------------------------------------
   R. RTL SCOPE — named wrappers only, never body.
   --------------------------------------------------------------------- */
.ips-section, .ips-header, .ips-footer, .ips-hero, .ips-page-hero,
.ips-cta-banner, .ips-contact, .ips-svc-block {
	direction: rtl;
	text-align: right;
}
.ips-section a, .ips-header a, .ips-footer a { color: inherit; }

/* Arabic must not be letter-spaced — kill any inherited tracking. */
.ips-section h1, .ips-section h2, .ips-section h3, .ips-section p,
.ips-hero h1, .ips-hero p, .ips-page-hero h1, .ips-page-hero p { letter-spacing: 0; }

/* Eyebrow: Arabic ignores uppercase/tracking, so it carries a copper rule. */
.ips-section-head.ips-section-head .ips-eyebrow {
	letter-spacing: 0;
	text-transform: none;
	font-size: .875rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
}
.ips-section-head.ips-section-head .ips-eyebrow::before {
	content: ""; width: 1.75rem; height: 2px; border-radius: 999px;
	background: var(--ips-gradient-accent); flex: 0 0 auto;
}
.ips-align-center .ips-eyebrow { justify-content: center; }

/* Eyebrow used standalone (split intros) — same rhythm, no inline styles. */
.ips-eyebrow {
	display: inline-flex; align-items: center; gap: .6rem;
	margin-bottom: .75rem;
	font-size: .875rem; font-weight: 700; letter-spacing: 0;
	color: var(--ips-accent);
}
.ips-section .ips-eyebrow::before {
	content: ""; width: 1.75rem; height: 2px; border-radius: 999px;
	background: var(--ips-gradient-accent); flex: 0 0 auto;
}

.ips-section-title { font-size: 1.875rem; font-weight: 800; color: var(--ips-fg); }
@media (min-width: 768px) { .ips-section-title { font-size: 2.25rem; } }

/* Signature effect: grain. Applied to every deep/olive band, nowhere else. */
.ips-grain { position: relative; isolation: isolate; }
.ips-grain::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image: var(--ips-grain); background-size: 140px 140px;
	opacity: .16; mix-blend-mode: overlay;
}
.ips-grain > * { position: relative; z-index: 1; }

/* Alternating band */
.ips-band-deep { background: var(--ips-bg-deep); }
.ips-band-olive {
	background: var(--ips-gradient-primary);
	color: var(--ips-primary-fg);
}
.ips-band-olive .ips-section-title,
.ips-band-olive .ips-section-desc,
.ips-band-olive p, .ips-band-olive h2, .ips-band-olive h3 { color: var(--ips-primary-fg); }
.ips-band-olive .ips-eyebrow { color: #F0D8BF !important; }

/* ---------------------------------------------------------------------
   1. HEADER
   --------------------------------------------------------------------- */
.ips-header {
	position: sticky; top: 0; z-index: 90;
	background: var(--ips-bg);
	border-bottom: 1px solid var(--ips-border);
	transition: var(--ips-transition);
}
.ips-header.is-scrolled {
	box-shadow: var(--ips-shadow-md);
}
.ips-header-inner {
	display: flex; align-items: center; gap: 1rem;
	min-height: 4.75rem;
}
.ips-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ips-logo img { height: 3rem; width: auto; display: block; }
.ips-nav { display: none; align-items: center; justify-content: center; gap: .35rem; }
/* ≥1024 the header becomes a 1fr / auto / 1fr grid so the menu is centred on
   the page, not merely centred in whatever space the logo and CTA leave.
   The burger is display:none at this width, so it leaves the grid entirely. */
@media (min-width: 1024px) {
	.ips-nav { display: flex; }
	.ips-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
	.ips-logo { justify-self: start; }
	.ips-header-cta { justify-self: end; }
}
.ips-nav-link {
	position: relative; padding: .55rem .9rem; border-radius: 999px;
	font-weight: 600; font-size: .95rem; color: var(--ips-fg);
	transition: var(--ips-transition);
}
.ips-nav-link::after {
	content: ""; position: absolute; inset-inline: .9rem; bottom: .3rem; height: 2px;
	border-radius: 999px; background: var(--ips-gradient-accent);
	transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.ips-nav-link:hover { color: var(--ips-primary); }
.ips-nav-link:hover::after, .ips-nav-link.is-active::after { transform: scaleX(1); }
.ips-nav-link.is-active { color: var(--ips-primary); }
.ips-header-cta { display: none; padding: .7rem 1.5rem; font-size: .9rem; }
/* Copper, not olive: on the sand header the olive gradient reads as a dark
   slab. The accent gradient is unmistakably brand and clears contrast. */
a.ips-header-cta.ips-btn-primary[class],
.ips-mobile-menu a.ips-btn.ips-btn-primary[class] {
	background: var(--ips-gradient-accent) !important;
	color: var(--ips-accent-fg) !important;
	box-shadow: 0 6px 18px -6px rgba(184,122,68,.65);
}
a.ips-header-cta.ips-btn-primary[class]:hover,
.ips-mobile-menu a.ips-btn.ips-btn-primary[class]:hover {
	box-shadow: 0 10px 26px -8px rgba(184,122,68,.8);
}
a.ips-header-cta.ips-btn-primary[class] *,
.ips-mobile-menu a.ips-btn.ips-btn-primary[class] * { color: var(--ips-accent-fg) !important; }
@media (min-width: 1024px) { .ips-header-cta { display: inline-flex; } }

.ips-burger {
	margin-inline-start: auto;
	display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
	width: 2.9rem; height: 2.9rem; padding: 0 .7rem;
	background: var(--ips-card); border: 1px solid var(--ips-border);
	border-radius: var(--ips-radius); cursor: pointer;
}
.ips-burger span {
	display: block; height: 2px; width: 100%; border-radius: 2px;
	background: var(--ips-fg); transition: var(--ips-transition);
}
.ips-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ips-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ips-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1024px) { .ips-burger { display: none; } }

.ips-mobile-menu {
	direction: rtl; text-align: right;
	border-top: 1px solid var(--ips-border);
	background: var(--ips-card);
	padding: 1rem var(--ips-pad) 1.5rem;
}
.ips-mobile-menu[hidden] { display: none; }
.ips-mobile-menu a {
	display: block; padding: .85rem .25rem;
	font-weight: 700; font-size: 1.05rem;
	color: var(--ips-fg);                       /* explicit — never inherits header */
	border-bottom: 1px solid var(--ips-border);
}
.ips-mobile-menu a:last-of-type { border-bottom: 0; }
.ips-mobile-menu .ips-btn { margin-top: 1rem; color: var(--ips-primary-fg); }

/* ---------------------------------------------------------------------
   2. HERO — full-bleed slider, 3 slides, crossfade
   --------------------------------------------------------------------- */
/* Hero height: deliberately short of a full viewport so the section below
   is always partly visible — it is what makes people scroll. */
.ips-hero {
	position: relative; display: grid; align-items: end;
	min-height: 82svh; min-height: 82dvh;
	padding-block: 7.5rem 3rem;
	background: var(--ips-deep);
}
@media (min-width: 768px) { .ips-hero { min-height: 84svh; padding-block: 9rem 3.5rem; } }
.ips-hero-media { position: absolute; inset: 0; overflow: hidden; }
.ips-hero-slide {
	position: absolute; inset: 0; opacity: 0;
	transition: opacity 1.4s ease;
	will-change: opacity;
}
.ips-hero-slide.is-active { opacity: 1; }
.ips-hero-slide img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transform: scale(1.12);
}
.ips-hero-slide.is-active img { animation: ips-kenburns 8s ease-out forwards; }
@keyframes ips-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }

.ips-hero-scrim {
	position: absolute; inset: 0; z-index: 1;
	background: var(--ips-gradient-hero);
}
.ips-hero-scrim::after {
	content: ""; position: absolute; inset: 0;
	background-image: var(--ips-grain); background-size: 140px 140px;
	opacity: .2; mix-blend-mode: overlay;
}
.ips-hero-body { position: relative; z-index: 2; }
.ips-hero .ips-eyebrow {
	display: inline-flex; align-items: center; gap: .6rem;
	padding: .5rem 1.1rem; border-radius: 999px;
	background: rgba(237,230,216,.14); border: 1px solid rgba(237,230,216,.28);
	color: #F0D8BF; font-weight: 700; font-size: .85rem;
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ips-hero .ips-eyebrow::before {
	content: ""; width: .5rem; height: .5rem; border-radius: 999px;
	background: var(--ips-accent); box-shadow: 0 0 0 0 rgba(184,122,68,.7);
	animation: ips-ping 2.4s ease-out infinite;
}
@keyframes ips-ping {
	0%   { box-shadow: 0 0 0 0 rgba(184,122,68,.7); }
	70%  { box-shadow: 0 0 0 .7rem rgba(184,122,68,0); }
	100% { box-shadow: 0 0 0 0 rgba(184,122,68,0); }
}
.ips-hero-title.ips-hero-title {
	margin: 1.25rem 0 0; font-size: 2.25rem; font-weight: 800;
	line-height: 1.25; color: var(--ips-deep-fg); max-width: 20ch;
}
@media (min-width: 768px)  { .ips-hero-title { font-size: 3.25rem; } }
@media (min-width: 1024px) { .ips-hero-title { font-size: 3.9rem; } }
.ips-hero-title .ips-hl {
	background: var(--ips-gradient-text);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.ips-hero-sub {
	margin: 1.25rem 0 0; max-width: 46ch;
	font-size: 1.05rem; color: rgba(237,230,216,.86);
}
@media (min-width: 768px) { .ips-hero-sub { font-size: 1.15rem; } }
.ips-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.ips-hero .ips-btn-outline {
	color: var(--ips-deep-fg) !important;
	border-color: rgba(237,230,216,.45) !important;
	background: rgba(237,230,216,.08) !important;
}
.ips-hero .ips-btn-outline:hover {
	background: rgba(237,230,216,.18) !important;
	border-color: var(--ips-accent) !important;
	color: #F0D8BF !important;
}

/* slide dots */
.ips-hero-dots {
	display: flex; gap: .6rem; margin-top: 2.5rem;
}
.ips-hero-dot {
	width: 2.6rem; height: 4px; border: 0; padding: 0; cursor: pointer;
	border-radius: 999px; background: rgba(237,230,216,.3);
	transition: var(--ips-transition);
}
.ips-hero-dot.is-active { background: var(--ips-accent); width: 4rem; }

/* scroll cue */
.ips-hero-cue {
	position: absolute; z-index: 2; inset-inline-end: var(--ips-pad); bottom: 2rem;
	display: none; align-items: center; gap: .6rem;
	color: rgba(237,230,216,.7); font-size: .8rem; font-weight: 600;
}
@media (min-width: 768px) {
	.ips-hero-cue { display: inline-flex; inset-inline-end: var(--ips-pad-lg); }
}
.ips-hero-cue span:last-child {
	display: block; width: 1px; height: 2.5rem;
	background: linear-gradient(to bottom, rgba(237,230,216,.7), transparent);
	animation: ips-cue 2s ease-in-out infinite;
}
@keyframes ips-cue { 0%,100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }

/* ---------------------------------------------------------------------
   3. PAGE HERO (inner pages)
   --------------------------------------------------------------------- */
.ips-page-hero {
	position: relative; padding-block: 6rem 4rem;
	background: var(--ips-deep); overflow: hidden;
}
.ips-page-hero-media { position: absolute; inset: 0; }
.ips-page-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.ips-page-hero::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to top, rgba(22,32,18,.94) 0%, rgba(47,67,33,.78) 45%, rgba(95,126,66,.48) 80%, rgba(184,122,68,.30) 100%);
}
.ips-page-hero::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background-image: var(--ips-grain); background-size: 140px 140px;
	opacity: .18; mix-blend-mode: overlay;
}
.ips-page-hero .ips-container { position: relative; z-index: 2; }
.ips-page-hero .ips-eyebrow {
	display: inline-flex; align-items: center; gap: .6rem;
	color: #F0D8BF; font-weight: 700; font-size: .875rem;
}
.ips-page-hero .ips-eyebrow::before {
	content: ""; width: 1.75rem; height: 2px; border-radius: 999px;
	background: var(--ips-gradient-accent);
}
.ips-page-title.ips-page-title {
	margin: .9rem 0 0; font-size: 2.25rem; font-weight: 800;
	color: var(--ips-deep-fg);
}
@media (min-width: 768px) { .ips-page-title { font-size: 3rem; } }
.ips-page-lead { margin: 1rem 0 0; max-width: 52ch; color: rgba(237,230,216,.82); }
.ips-crumb { margin-top: 1.5rem; font-size: .85rem; color: rgba(237,230,216,.6); }
.ips-crumb a:hover { color: var(--ips-accent); }

/* ---------------------------------------------------------------------
   4. MARQUEE — services strip, four groups
   --------------------------------------------------------------------- */
.ips-marquee {
	overflow: hidden; direction: ltr;
	background: var(--ips-deep); color: var(--ips-deep-fg);
	padding-block: 1.1rem;
	border-block: 1px solid rgba(237,230,216,.12);
}
.ips-marquee-track { display: flex; width: max-content; animation: ips-marquee 34s linear infinite; }
.ips-marquee-group { display: flex; flex-shrink: 0; }
.ips-marquee-item {
	flex: 0 0 auto; width: 14rem; margin-inline: 1.25rem;
	display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
	font-weight: 700; font-size: .95rem; white-space: nowrap;
}
.ips-marquee-item::before {
	content: ""; width: .45rem; height: .45rem; border-radius: 999px;
	background: var(--ips-accent); flex: 0 0 auto;
}
.ips-marquee:hover .ips-marquee-track { animation-play-state: paused; }

/* ---------------------------------------------------------------------
   5. PROMISE GRID — the brand promise (feature grid)
   --------------------------------------------------------------------- */
.ips-promise-card {
	position: relative; overflow: hidden;
	background: var(--ips-card);
	border-color: var(--ips-border);
}
.ips-promise-card::before {
	content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
	background: var(--ips-gradient-primary);
	transform: scaleX(0); transform-origin: right;
	transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.ips-promise-card:hover::before { transform: scaleX(1); }
.ips-promise-icon {
	width: 3.5rem; height: 3.5rem; border-radius: var(--ips-radius);
	background: var(--ips-gradient-primary);
	color: var(--ips-primary-fg);               /* per-component icon colour */
	box-shadow: var(--ips-shadow-md);
	transition: var(--ips-transition);
}
.ips-promise-card:hover .ips-promise-icon { transform: rotate(-6deg) scale(1.06); }
.ips-promise-card .ips-card-title { color: var(--ips-fg); }
.ips-promise-num {
	position: absolute; inset-block-start: .5rem; inset-inline-start: 1rem;
	font-size: 3.5rem; font-weight: 800; line-height: 1;
	color: var(--ips-primary); opacity: .08;
}

/* ---------------------------------------------------------------------
   6. SERVICES GRID — 7 services, image cards
   --------------------------------------------------------------------- */
.ips-svc-card {
	position: relative; display: flex; flex-direction: column;
	overflow: hidden; height: 100%;
	border-radius: var(--ips-radius-lg);
	border: 1px solid var(--ips-border);
	background: var(--ips-card);
	box-shadow: var(--ips-shadow-card);
	transition: var(--ips-transition);
}
.ips-svc-card:hover { transform: translateY(-6px); box-shadow: var(--ips-shadow-glow); }
.ips-svc-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.ips-svc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.ips-svc-card:hover .ips-svc-media img { transform: scale(1.07); }
.ips-svc-media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(14,18,16,.55), transparent 55%);
}
.ips-svc-tag {
	position: absolute; z-index: 2; inset-block-start: .9rem; inset-inline-start: .9rem;
	padding: .35rem .85rem; border-radius: 999px;
	background: rgba(237,230,216,.92); color: var(--ips-primary);
	font-size: .75rem; font-weight: 700;
}
.ips-svc-body { display: flex; flex-direction: column; gap: .65rem; padding: 1.5rem; flex: 1; }
.ips-svc-title { font-size: 1.2rem; font-weight: 800; margin: 0; color: var(--ips-fg); }
.ips-svc-desc { margin: 0; color: var(--ips-muted-fg); font-size: .95rem; }
.ips-svc-link {
	margin-top: auto; padding-top: .5rem;
	display: inline-flex; align-items: center; gap: .45rem;
	font-weight: 700; font-size: .9rem; color: var(--ips-primary);
}
.ips-svc-link svg { width: 1rem; height: 1rem; transform: scaleX(-1); transition: transform .3s ease; }
.ips-svc-card:hover .ips-svc-link svg { transform: scaleX(-1) translateX(4px); }

/* ---------------------------------------------------------------------
   7. SPLIT — image + text, asymmetric 1.15fr .85fr
   --------------------------------------------------------------------- */
.ips-split { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: minmax(0,1fr); }
@media (min-width: 1024px) { .ips-split { grid-template-columns: 1.15fr .85fr; gap: 4rem; } }
.ips-split-rev .ips-split-media { order: -1; }
@media (min-width: 1024px) { .ips-split-rev .ips-split-media { order: 0; } }
.ips-split-media { position: relative; }
.ips-split-media img {
	width: 100%; height: auto; display: block;
	border-radius: var(--ips-radius-lg);
	box-shadow: var(--ips-shadow-card);
}
.ips-split-media::before {
	content: ""; position: absolute; z-index: 2; pointer-events: none;
	inset-block-start: -.9rem; inset-inline-start: -.9rem;
	width: 45%; height: 45%;
	border: 2px solid var(--ips-accent);
	border-inline-end: 0; border-block-end: 0;
	border-start-start-radius: var(--ips-radius-lg);
	opacity: .8;
}
.ips-split-badge {
	position: absolute; inset-block-end: -1.5rem; inset-inline-end: 1.5rem;
	padding: 1rem 1.4rem; border-radius: var(--ips-radius);
	background: var(--ips-gradient-primary); color: var(--ips-primary-fg);
	box-shadow: var(--ips-shadow-card); text-align: center;
}
.ips-split-badge b { display: block; font-size: 1.75rem; line-height: 1; }
.ips-split-badge span { font-size: .8rem; opacity: .85; }
.ips-split-title.ips-split-title { font-size: 1.875rem; font-weight: 800; margin: 0 0 1.25rem; }
@media (min-width: 768px) { .ips-split-title.ips-split-title { font-size: 2.25rem; } }
.ips-check-list { display: grid; gap: .9rem; margin-top: 1.75rem; }
.ips-check-item { display: flex; gap: .75rem; align-items: flex-start; }
.ips-check-icon {
	width: 1.6rem; height: 1.6rem; border-radius: 999px; margin-top: .2rem;
	background: var(--ips-primary); color: var(--ips-primary-fg);
}
.ips-check-icon svg { width: .9rem; height: .9rem; stroke-width: 3; }
.ips-check-item p { margin: 0; font-size: .98rem; }

/* ---------------------------------------------------------------------
   8. STATS
   --------------------------------------------------------------------- */
.ips-stat { text-align: center; padding: 1.5rem .75rem; }
.ips-stat-num {
	display: block; font-size: 2.75rem; font-weight: 800; line-height: 1;
	direction: ltr; unicode-bidi: embed;
}
@media (min-width: 768px) { .ips-stat-num { font-size: 3.5rem; } }
.ips-stat-label { display: block; margin-top: .6rem; font-size: .9rem; font-weight: 600; opacity: .8; }
.ips-band-olive .ips-stat-num { color: var(--ips-primary-fg); }

/* ---------------------------------------------------------------------
   9. PROCESS / STEPS
   --------------------------------------------------------------------- */
.ips-steps { position: relative; display: grid; gap: 2rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 1024px) { .ips-steps { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.5rem; } }
.ips-steps::before {
	content: ""; position: absolute; z-index: 0;
	inset-inline-start: 1.6rem; inset-block: 1.5rem;
	width: 2px; background: linear-gradient(to bottom, var(--ips-accent), transparent);
}
@media (min-width: 1024px) {
	.ips-steps::before {
		inset-inline: 3rem; inset-block-start: 1.7rem; inset-block-end: auto;
		width: auto; height: 2px;
		background: linear-gradient(to left, var(--ips-accent), var(--ips-border));
	}
}
.ips-step { position: relative; z-index: 1; padding-inline-start: 4.5rem; }
@media (min-width: 1024px) { .ips-step { padding-inline-start: 0; text-align: center; } }
.ips-step-num {
	position: absolute; inset-block-start: 0; inset-inline-start: 0;
	width: 3.4rem; height: 3.4rem; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--ips-gradient-primary); color: var(--ips-primary-fg);
	font-weight: 800; font-size: 1.15rem;
	box-shadow: 0 0 0 6px var(--ips-bg-deep);
	transition: var(--ips-transition);
}
@media (min-width: 1024px) {
	.ips-step-num { position: relative; margin: 0 auto 1.25rem; display: flex; }
}
.ips-step:hover .ips-step-num { transform: scale(1.08); box-shadow: 0 0 0 6px var(--ips-bg-deep), var(--ips-shadow-glow); }
.ips-step-title.ips-step-title { font-size: 1.1rem; font-weight: 800; margin: 0 0 .5rem; }
.ips-step-desc { margin: 0; font-size: .93rem; color: var(--ips-muted-fg); }

/* ---------------------------------------------------------------------
   10. GALLERY GRID — natural heights, never cropped to a fixed ratio
   --------------------------------------------------------------------- */
/* Masonry via CSS columns, NOT grid. The client photos are a mix of tall
   portraits and wide landscapes; a row-based grid stretches every row to the
   tallest item and leaves dead space under the short ones. Columns let two
   short photos stack beside one tall photo, which is what balances the wall.
   The brief also forbids cropping to a fixed ratio, so object-fit is out. */
.ips-gal {
	column-count: 2;
	column-gap: 1.25rem;
}
@media (min-width: 768px)  { .ips-gal { column-count: 3; column-gap: 1.5rem; } .ips-gal-item { margin-bottom: 1.5rem; } }
@media (min-width: 768px)  { .ips-gal-item { margin-bottom: 1.5rem; } }
@media (min-width: 1280px) { .ips-gal { column-count: 4; } }
/* A gallery of one or two photos must not be squeezed into four columns. */
.ips-gal[data-count="1"] { column-count: 1; max-width: 34rem; }
@media (min-width: 768px) { .ips-gal[data-count="2"] { column-count: 2; max-width: 52rem; } }
@media (min-width: 1280px) { .ips-gal[data-count="2"] { column-count: 2; } }
.ips-gal[data-count="1"], .ips-gal[data-count="2"] { margin-inline: auto; }

.ips-gal-item {
	position: relative; display: block; overflow: hidden;
	break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
	margin-bottom: 1.25rem;
	border-radius: var(--ips-radius); background: var(--ips-muted);
	box-shadow: var(--ips-shadow-md);
	transition: var(--ips-transition);
	cursor: zoom-in;
}
.ips-gal-item img { width: 100%; height: auto; display: block; transition: transform .8s ease; }
.ips-gal-item::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(95,126,66,.6), transparent 60%);
	opacity: 0; transition: opacity .4s ease;
}
.ips-gal-item:hover { transform: translateY(-4px); box-shadow: var(--ips-shadow-glow); }
.ips-gal-item:hover img { transform: scale(1.06); }
.ips-gal-item:hover::after { opacity: 1; }
.ips-gal-zoom {
	position: absolute; z-index: 2; inset-block-end: .75rem; inset-inline-end: .75rem;
	width: 2.4rem; height: 2.4rem; border-radius: 999px;
	background: rgba(237,230,216,.94); color: var(--ips-primary);
	opacity: 0; transform: translateY(8px); transition: var(--ips-transition);
}
.ips-gal-item:hover .ips-gal-zoom { opacity: 1; transform: none; }

/* lightbox */
.ips-lightbox {
	position: fixed; inset: 0; z-index: 200;
	display: none; place-items: center; padding: 1.5rem;
	background: rgba(14,18,16,.92);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ips-lightbox.is-open { display: grid; animation: ips-fade-in .3s ease both; }
.ips-lightbox img { max-width: min(100%, 68rem); max-height: 88vh; width: auto; height: auto; border-radius: var(--ips-radius); }
.ips-lightbox-close {
	position: absolute; inset-block-start: 1.25rem; inset-inline-end: 1.25rem;
	width: 3rem; height: 3rem; border-radius: 999px; border: 0; cursor: pointer;
	background: rgba(237,230,216,.14); color: var(--ips-deep-fg);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.6rem; line-height: 1;
}
.ips-lightbox-close:hover { background: var(--ips-accent); }

/* ---------------------------------------------------------------------
   11. VIDEO ROW
   --------------------------------------------------------------------- */
.ips-vids { display: grid; gap: 1.25rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 640px)  { .ips-vids { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .ips-vids { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem; } }
.ips-vid {
	position: relative; overflow: hidden;
	border-radius: var(--ips-radius); background: var(--ips-deep);
	box-shadow: var(--ips-shadow-card);
	transition: var(--ips-transition);
}
.ips-vid:hover { transform: translateY(-4px); box-shadow: var(--ips-shadow-glow); }
.ips-vid video {
	width: 100%; height: 100%; display: block;
	aspect-ratio: 4 / 5;              /* the source clips are mixed portrait
	                                     and landscape — one ratio keeps the
	                                     grid rows level */
	object-fit: cover; background: var(--ips-deep);
}
.ips-vid-play {
	position: absolute; inset: 0; z-index: 2; border: 0; cursor: pointer;
	display: grid; place-items: center; padding: 0;
	background: linear-gradient(to top, rgba(14,18,16,.6), rgba(14,18,16,.15));
	transition: opacity .35s ease;
}
.ips-vid.is-playing .ips-vid-play { opacity: 0; pointer-events: none; }
.ips-vid-play span {
	width: 4rem; height: 4rem; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(237,230,216,.94); color: var(--ips-primary);
	box-shadow: var(--ips-shadow-md);
	transition: var(--ips-transition);
}
.ips-vid-play span svg { width: 1.4rem; height: 1.4rem; fill: currentColor; stroke: none; }
.ips-vid-play:hover span { transform: scale(1.1); background: var(--ips-accent); color: var(--ips-accent-fg); }
.ips-vid-cap {
	position: absolute; z-index: 3; inset-block-end: .75rem; inset-inline-start: .75rem;
	padding: .3rem .8rem; border-radius: 999px;
	background: rgba(14,18,16,.65); color: var(--ips-deep-fg);
	font-size: .75rem; font-weight: 700;
	pointer-events: none;
}

/* EDITOR-ONLY slot placeholders.
   On the front end an empty videos repeater / empty before-after pair
   renders NOTHING — the whole block is absent. These styles exist so the
   empty control is discoverable inside the Elementor canvas, where the
   widget renders the slot instead of returning early. */
.ips-vid-slot {
	display: grid; place-items: center; gap: .5rem; padding: 2rem 1rem;
	aspect-ratio: 4 / 5;
	border: 1px dashed var(--ips-border); border-radius: var(--ips-radius);
	background: repeating-linear-gradient(45deg, var(--ips-muted) 0 12px, transparent 12px 24px), var(--ips-bg-deep);
	color: var(--ips-muted-fg); text-align: center;
}
.ips-vid-slot b { font-size: .9rem; }
.ips-vid-slot small { font-size: .75rem; opacity: .8; }

/* ---------------------------------------------------------------------
   12. BEFORE / AFTER — button toggle with a soft wipe
   --------------------------------------------------------------------- */
.ips-ba {
	display: grid; gap: 2rem; align-items: center;
	grid-template-columns: minmax(0,1fr);
	padding: 1.75rem;
	border-radius: var(--ips-radius-lg);
	border: 1px solid var(--ips-border);
	background: var(--ips-card);
	box-shadow: var(--ips-shadow-card);
}
@media (min-width: 1024px) { .ips-ba { grid-template-columns: 1.25fr .75fr; gap: 3rem; padding: 2rem; } }
.ips-ba-stage {
	position: relative; overflow: hidden;
	border-radius: var(--ips-radius);
	background: var(--ips-muted);
	aspect-ratio: 16 / 10;
}
.ips-ba-layer { position: absolute; inset: 0; }
.ips-ba-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The wipe. The AFTER layer sits underneath at full opacity; the BEFORE
   layer sits on top and is ERASED right-to-left (RTL reading direction)
   by animating a soft-edged mask via a registered custom property.
   Fallback where @property is unsupported: the opacity transition below
   still crossfades, so the block never breaks. */
@property --ips-wipe {
	syntax: '<percentage>';
	initial-value: -12%;
	inherits: false;
}
.ips-ba-before {
	--ips-wipe: -12%;
	-webkit-mask-image: linear-gradient(to left, transparent var(--ips-wipe), #000 calc(var(--ips-wipe) + 11%));
	mask-image: linear-gradient(to left, transparent var(--ips-wipe), #000 calc(var(--ips-wipe) + 11%));
	transition: --ips-wipe 1.1s cubic-bezier(.65,0,.35,1), opacity 1.1s ease;
}
.ips-ba.is-after .ips-ba-before { --ips-wipe: 100%; opacity: 0; }

.ips-ba-chip {
	position: absolute; z-index: 3; inset-block-start: .9rem; inset-inline-start: .9rem;
	padding: .35rem .95rem; border-radius: 999px;
	background: rgba(14,18,16,.72); color: var(--ips-deep-fg);
	font-size: .78rem; font-weight: 700; pointer-events: none;
	transition: var(--ips-transition);
}
.ips-ba.is-after .ips-ba-chip { background: var(--ips-primary); }

.ips-ba-slot {   /* editor-only, see note above */
	display: grid; place-items: center; gap: .4rem; height: 100%;
	border: 1px dashed var(--ips-border);
	background: repeating-linear-gradient(45deg, var(--ips-muted) 0 12px, transparent 12px 24px), var(--ips-bg-deep);
	color: var(--ips-muted-fg); text-align: center; padding: 1rem;
}
.ips-ba-slot b { font-size: .95rem; }
.ips-ba-slot small { font-size: .75rem; }

.ips-ba-title.ips-ba-title { font-size: 1.35rem; font-weight: 800; margin: 0 0 .75rem; }
.ips-ba-desc { margin: 0 0 1.5rem; color: var(--ips-muted-fg); font-size: .95rem; }
.ips-ba-toggle {
	display: inline-flex; align-items: center; gap: .6rem;
	padding: .8rem 1.6rem; border: 0; cursor: pointer;
	border-radius: 999px; font: inherit; font-weight: 700;
	background: var(--ips-gradient-primary); color: var(--ips-primary-fg);
	box-shadow: var(--ips-shadow-md);
	transition: var(--ips-transition);
}
.ips-ba-toggle:hover { transform: translateY(-2px); box-shadow: var(--ips-shadow-glow); }
.ips-ba-toggle svg { width: 1.1rem; height: 1.1rem; transition: transform .5s ease; }
.ips-ba.is-after .ips-ba-toggle svg { transform: rotate(180deg); }

/* ---------------------------------------------------------------------
   13. SERVICE BLOCK (works page) — head + gallery + videos + before/after
   --------------------------------------------------------------------- */
.ips-svc-block { padding-block: 4rem; }
@media (min-width: 768px) { .ips-svc-block { padding-block: 6rem; } }
.ips-svc-block + .ips-svc-block { border-top: 1px solid var(--ips-border); }
.ips-svc-block.ips-band-deep { border-top: 0; }
.ips-subhead.ips-subhead {
	display: flex; align-items: center; gap: .75rem;
	margin: 6rem 0 2.5rem;          /* air above AND below — the sub-blocks
	                                   read as separate sections, not a list */
	font-size: 1.15rem; font-weight: 800; color: var(--ips-primary);
}
@media (max-width: 767px) { .ips-subhead.ips-subhead { margin: 4rem 0 2rem; font-size: 1.05rem; } }
/* the first sub-block sits closer to the section head it belongs to */
.ips-svc-block .ips-subhead:first-of-type { margin-block-start: 1rem; }
.ips-subhead::after {
	content: ""; flex: 1; height: 1px; background: var(--ips-border);
}
.ips-band-deep .ips-subhead::after { background: var(--ips-border); }

/* ---------------------------------------------------------------------
   14. CTA BANNER
   --------------------------------------------------------------------- */
.ips-cta-banner {
	position: relative; padding-block: 4rem;
	background: var(--ips-gradient-primary); color: var(--ips-primary-fg);
	text-align: center; overflow: hidden;
}
.ips-cta-banner::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: var(--ips-grain); background-size: 140px 140px;
	opacity: .18; mix-blend-mode: overlay;
}
.ips-cta-banner .ips-container { position: relative; z-index: 1; }
.ips-cta-title.ips-cta-title { font-size: 1.75rem; font-weight: 800; margin: 0 0 1rem; color: var(--ips-primary-fg); }
@media (min-width: 768px) { .ips-cta-title.ips-cta-title { font-size: 2.25rem; } }
.ips-cta-desc { margin: 0 auto 2rem; max-width: 46ch; color: rgba(253,251,246,.88); }
.ips-cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.ips-cta-banner .ips-btn-primary[class] {
	background: var(--ips-bg) !important; color: var(--ips-primary) !important;
}
.ips-cta-banner .ips-btn-primary[class] * { color: var(--ips-primary) !important; }
.ips-cta-banner .ips-btn-outline[class] {
	color: var(--ips-primary-fg) !important;
	border-color: rgba(253,251,246,.5) !important;
}
.ips-cta-banner .ips-btn-outline[class]:hover {
	background: rgba(253,251,246,.14) !important;
	border-color: var(--ips-primary-fg) !important;
	color: var(--ips-primary-fg) !important;
}

/* ---------------------------------------------------------------------
   15. CONTACT
   --------------------------------------------------------------------- */
.ips-contact-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 1024px) { .ips-contact-grid { grid-template-columns: 1.15fr .85fr; gap: 3.5rem; } }
.ips-form-card {
	padding: 1.75rem; border-radius: var(--ips-radius-lg);
	border: 1px solid var(--ips-border); background: var(--ips-card);
	box-shadow: var(--ips-shadow-card);
}
@media (min-width: 768px) { .ips-form-card { padding: 2.25rem; } }
.ips-form-field label { letter-spacing: 0; text-transform: none; font-size: .85rem; color: var(--ips-fg); }
.ips-req { color: var(--ips-accent); }
.ips-info-list { display: grid; gap: 1rem; }
.ips-info-item {
	display: flex; gap: 1rem; align-items: flex-start;
	padding: 1.25rem; border-radius: var(--ips-radius);
	border: 1px solid var(--ips-border); background: var(--ips-card);
	transition: var(--ips-transition);
}
.ips-info-item:hover { transform: translateY(-3px); box-shadow: var(--ips-shadow-md); border-color: var(--ips-primary); }
.ips-info-icon {
	width: 2.9rem; height: 2.9rem; border-radius: var(--ips-radius); flex: 0 0 auto;
	background: var(--ips-gradient-accent); color: var(--ips-accent-fg);
}
.ips-info-label { display: block; font-size: .78rem; font-weight: 700; color: var(--ips-muted-fg); margin-bottom: .2rem; }
.ips-info-value { display: block; font-weight: 700; color: var(--ips-fg); font-size: 1rem; }
.ips-wa-card {
	margin-top: 1rem; padding: 1.5rem; border-radius: var(--ips-radius-lg);
	background: var(--ips-gradient-primary); color: var(--ips-primary-fg);
	box-shadow: var(--ips-shadow-card);
}
.ips-wa-card p { margin: .5rem 0 1.25rem; color: rgba(253,251,246,.88); font-size: .95rem; }
.ips-wa-card .ips-btn { background: var(--ips-bg) !important; color: var(--ips-primary) !important; }

/* floating whatsapp */
.ips-wa-float {
	position: fixed; z-index: 120;
	inset-block-end: 1.25rem; inset-inline-start: 1.25rem;
	width: 3.4rem; height: 3.4rem; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	background: #25D366; color: #fff;
	box-shadow: 0 10px 26px -8px rgba(20,24,15,.5);
	transition: var(--ips-transition);
}
.ips-wa-float:hover { transform: scale(1.08); }
.ips-wa-float svg { width: 1.7rem; height: 1.7rem; fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------------
   16. FOOTER
   --------------------------------------------------------------------- */
.ips-footer {
	position: relative; overflow: hidden;
	background: var(--ips-deep); color: var(--ips-deep-fg);
	padding-block: 4rem 0;
}
.ips-footer::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: var(--ips-grain); background-size: 140px 140px;
	opacity: .14; mix-blend-mode: overlay;
}
.ips-footer .ips-container { position: relative; z-index: 1; }
.ips-footer-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 640px)  { .ips-footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .ips-footer-grid { grid-template-columns: 1.4fr .8fr .8fr 1fr; gap: 3rem; } }
.ips-footer-logo img { height: 3.4rem; width: auto; }
.ips-footer-blurb { margin: 1.25rem 0 0; color: rgba(237,230,216,.68); font-size: .95rem; max-width: 34ch; }
.ips-footer-title.ips-footer-title { font-size: 1rem; font-weight: 800; margin: 0 0 1.25rem; color: var(--ips-deep-fg); }
.ips-footer-links { display: grid; gap: .7rem; }
.ips-footer-links a { color: rgba(237,230,216,.68); font-size: .93rem; transition: var(--ips-transition); }
.ips-footer-links a:hover { color: var(--ips-accent); padding-inline-start: .35rem; }
.ips-socials { display: flex; gap: .6rem; margin-top: 1.5rem; }
.ips-social {
	width: 2.5rem; height: 2.5rem; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(237,230,216,.1); color: var(--ips-deep-fg);
	transition: var(--ips-transition);
}
.ips-social svg { width: 1.1rem; height: 1.1rem; }
.ips-social:hover { background: var(--ips-accent); color: var(--ips-accent-fg); transform: translateY(-3px); }
.ips-footer-bottom {
	margin-top: 3rem; padding-block: 1.5rem;
	border-top: 1px solid rgba(237,230,216,.14);
	display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between;
	font-size: .85rem; color: rgba(237,230,216,.6);
}
.ips-footer-bottom a { color: var(--ips-accent); font-weight: 700; }

/* ---------------------------------------------------------------------
   17. LONG-PAGE PERFORMANCE
   --------------------------------------------------------------------- */
@supports (content-visibility: auto) {
	.ips-defer { content-visibility: auto; contain-intrinsic-size: 900px; }
}

/* ---------------------------------------------------------------------
   18. FAQ
   --------------------------------------------------------------------- */
.ips-faq-item { padding: 0 !important; overflow: hidden; }
.ips-faq-q { text-align: right; }
.ips-faq-icon { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.ips-faq-q[aria-expanded="true"] .ips-faq-icon { transform: rotate(-90deg); }
.ips-faq-q[aria-expanded="true"] { color: var(--ips-primary) !important; }

/* ---------------------------------------------------------------------
   19. ANCHOR SCROLLING under the sticky header.
   NOTE: `ips-defer` (content-visibility) is deliberately NOT applied to
   the service blocks on the works page — deferred sections have no
   measured height yet, so in-page anchors land in the wrong place.
   --------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.ips-svc-block[id], .ips-section[id] { scroll-margin-block-start: 5.75rem; }

/* ---------------------------------------------------------------------
   20. RESPONSIVE HARDENING — checked at 320 / 375 / 768 / 1024 / 1440
   --------------------------------------------------------------------- */
@media (max-width: 380px) {
	.ips-hero-title  { font-size: 1.95rem; }
	.ips-page-title  { font-size: 1.9rem; }
	.ips-section-title, .ips-split-title { font-size: 1.6rem; }
	.ips-cta-title   { font-size: 1.45rem; }
	.ips-logo img    { height: 2.5rem; }
	.ips-btn         { padding: .75rem 1.25rem; font-size: .9rem; }
	.ips-hero-actions .ips-btn, .ips-cta-actions .ips-btn { flex: 1 1 100%; }
	.ips-card, .ips-ba, .ips-form-card { padding: 1.25rem; }
	.ips-stat-num    { font-size: 2.25rem; }
	.ips-step        { padding-inline-start: 3.9rem; }
}

/* the works-page jump nav scrolls sideways instead of stacking seven rows */
@media (max-width: 640px) {
	[data-widget="jump-nav"] .ips-container > div {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		justify-content: flex-start !important;
		padding-block-end: .5rem;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	[data-widget="jump-nav"] .ips-container > div::-webkit-scrollbar { display: none; }
	[data-widget="jump-nav"] .ips-btn { flex: 0 0 auto; }
}

/* tablet: the before/after stage should not get taller than its column */
@media (min-width: 640px) and (max-width: 1023px) {
	.ips-ba-stage { aspect-ratio: 16 / 9; }
}

/* nothing, anywhere, may exceed the viewport */
html, body { max-width: 100%; overflow-x: clip; }

/* ---------------------------------------------------------------------
   21. WORKS PAGE — explicit air. Padding on the block wrappers, not
   margins, so nothing can collapse it away.
   --------------------------------------------------------------------- */
.ips-svc-block .ips-gal,
.ips-svc-block .ips-vids,
.ips-svc-block .ips-ba { margin-block-end: 1.5rem; }
/* head -> first sub-head gap = 2.5rem + 1.5rem = 4rem */
.ips-svc-block .ips-section-head.ips-section-head { margin-bottom: 2.5rem; }
.ips-svc-block .ips-subhead:first-of-type { margin-block-start: 1.5rem; }

/* page hero: centred, no breadcrumb */
.ips-page-hero { text-align: center; }
.ips-page-hero .ips-eyebrow { justify-content: center; }
.ips-page-hero .ips-page-lead { margin-inline: auto; }

/* hero: the quote CTA is solid white so it reads first on the dark media */
.ips-hero a.ips-btn.ips-btn-outline[class] {
	background: #FFFFFF !important;
	border-color: #FFFFFF !important;
	color: var(--ips-primary) !important;
	box-shadow: var(--ips-shadow-md);
}
.ips-hero a.ips-btn.ips-btn-outline[class]:hover {
	background: #FFFFFF !important;
	border-color: #FFFFFF !important;
	color: var(--ips-primary) !important;
	transform: translateY(-2px);
	box-shadow: 0 14px 34px -10px rgba(0,0,0,.55);
}
.ips-hero a.ips-btn.ips-btn-outline[class] * { color: var(--ips-primary) !important; }

/* ---------------------------------------------------------------------
   22. WORDPRESS BUILD — rules that were inline styles in the static
   build. Everything a widget renders now has a real rule.
   --------------------------------------------------------------------- */

/* before/after: the after layer only needs to sit under the before layer */
.ips-ba-after { z-index: 0; }

/* FAQ */
.ips-faq-list { display: grid; gap: 1rem; }
.ips-faq-q {
	all: unset;
	box-sizing: border-box;
	display: flex; width: 100%;
	align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.25rem 1.5rem;
	cursor: pointer;
	font-family: var(--ips-font); font-weight: 800; font-size: 1rem;
	color: var(--ips-fg);
	text-align: right;
}
.ips-faq-a {
	padding: 0 1.5rem 1.35rem;
	color: var(--ips-muted-fg);
	line-height: 1.9;
}
.ips-faq-a[hidden] { display: none; }

/* contact form */
.ips-form { display: block; }
.ips-form-title.ips-form-title { font-size: 1.5rem; margin: 0 0 .5rem; }
.ips-form-lead { margin: 0 0 2rem; color: var(--ips-muted-fg); }

/* gallery CTA row */
.ips-gal-cta { text-align: center; margin-top: 3rem; }

/* jump nav */
.ips-jumpnav { padding-block: 2rem; }
.ips-jumpnav-row {
	display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
}
.ips-jumpnav-row .ips-btn { padding: .5rem 1.1rem; font-size: .85rem; }
@media (max-width: 640px) {
	.ips-jumpnav-row {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		padding-block-end: .5rem;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.ips-jumpnav-row::-webkit-scrollbar { display: none; }
	.ips-jumpnav-row .ips-btn { flex: 0 0 auto; }
}

/* split body + button */
.ips-split-body { color: var(--ips-muted-fg); }
.ips-split-body p { margin: 0 0 1rem; }
.ips-split-body p:last-child { margin-bottom: 0; }
.ips-split-btn { margin-top: 2rem; }