/* ==========================================================================
   MRFT Movers — design system

   Palette is grounded in Oman rather than the moving industry's default
   orange-and-blue: deep petrol blue from Omani painted doors, frankincense
   green from the flag as the action colour, and a desert sand accent used
   sparingly on rules and the hero tag only.

   Type: Archivo (display) + Public Sans (body).

   Layout note: all supplied photography is ~700px wide, so no image slot in
   this stylesheet exceeds 700px. Nothing is ever upscaled.
   ========================================================================== */

:root {
	--ink:        #0C2231;
	--ink-soft:   #17394E;
	--paper:      #FFFFFF;
	--mist:       #EFF3F2;
	--mist-deep:  #DFE7E5;
	--green:      #0F6B45;
	--green-dk:   #0A4E33;
	--green-lt:   #E3F0EA;
	--sand:       #C9AE7C;
	--text:       #1B2A33;
	--muted:      #566A75;
	--line:       #D6DEDC;
	--wa:         #1FA855;

	--f-display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
	--f-body:    'Public Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

	--wrap: 1180px;
	--r: 10px;
	--r-sm: 6px;

	--pad-y: clamp(3.25rem, 7vw, 6rem);
	--gap:   clamp(1.5rem, 4vw, 3.5rem);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
	margin: 0;
	font-family: var(--f-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--text);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--green-dk); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 3px; }

h1, h2, h3, h4 {
	font-family: var(--f-display);
	color: var(--ink);
	line-height: 1.14;
	letter-spacing: -0.021em;
	margin: 0 0 .6em;
	text-wrap: balance;
}
h1 { font-size: clamp(2.05rem, 5.2vw, 3.35rem); font-weight: 700; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.3rem);  font-weight: 700; }
h3 { font-size: clamp(1.12rem, 2vw, 1.32rem);   font-weight: 600; letter-spacing: -0.012em; }
p  { margin: 0 0 1.1em; max-width: 68ch; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap.narrow { width: min(100% - 2.5rem, 760px); }

/* ---------- skip link ---------- */
.skip {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--ink); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; color: #fff; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	font-family: var(--f-display); font-weight: 600; font-size: 1rem;
	padding: .95rem 1.5rem; border-radius: var(--r-sm); border: 2px solid transparent;
	text-decoration: none; cursor: pointer; line-height: 1.2;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--green); color: #fff; flex-direction: column; gap: .15rem; }
.btn-primary:hover { background: var(--green-dk); color: #fff; }
.btn-primary .btn-sub {
	font-family: var(--f-body); font-weight: 500; font-size: .85rem;
	opacity: .82; letter-spacing: .01em;
}
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: #17903F; color: #fff; }
.btn-sm { padding: .55rem 1rem; font-size: .92rem; }
.btn-block { width: 100%; }

.cta-pair { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.6rem 0; }
.cta-pair.is-stacked { flex-direction: column; align-items: stretch; max-width: 320px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-head {
	position: sticky; top: 0; z-index: 60;
	background: linear-gradient(115deg, #082f49 0%, #075b61 48%, #08734f 100%);
	box-shadow: 0 8px 30px rgba(8,47,73,.16);
	border-bottom: 1px solid rgba(255,255,255,.14);
}
.head-inner {
	display: flex; align-items: center; gap: 1rem;
	min-height: 78px; padding-block: .55rem;
	width: min(100% - 2rem, 1380px);
}
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: #fff; margin-right: auto; }
.brand-mark { color: #f4c45b; display: grid; place-items: center; }
.brand-text { font-family: var(--f-display); line-height: 1; display: flex; flex-direction: column; }
.brand-text strong { font-size: 1.28rem; font-weight: 800; letter-spacing: -.03em; }
.brand-text span { font-size: .74rem; color: rgba(255,255,255,.72); letter-spacing: .13em; font-weight: 500; }

.site-nav .nav-list {
	list-style: none; display: flex; align-items: center; gap: .35rem; margin: 0; padding: 0;
}
.site-nav .nav-list > li > a {
	font-family: var(--f-display); font-weight: 600; font-size: .88rem;
	color: rgba(255,255,255,.92); text-decoration: none; padding: .7rem .78rem;
	border: 1px solid transparent; border-radius: 10px; white-space: nowrap;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}
.site-nav .nav-list > li > a:hover,
.site-nav .nav-list > li.current > a,
.site-nav .nav-list > li.current-menu-item > a,
.site-nav .nav-list > li.menu-item-has-children.is-open > a {
	background: rgba(255,255,255,.11); color: #fff; border-color: rgba(255,255,255,.14);
}

/* ---------- Modern Cargo dropdown: unified hover zone ---------- */
.site-head { overflow: visible; }
.site-nav .nav-list > li { position: relative; }
.site-nav .nav-list > li.menu-item-has-children > a {
	display: inline-flex; align-items: center; gap: .45rem;
}
/* The bridge belongs to the parent <li>, so moving downward never leaves
   the hover zone. It is deliberately wide enough to cover the whole panel. */
.site-nav .nav-list > li.menu-item-has-children::after {
	content: '';
	position: absolute;
	left: 50%; top: 100%;
	width: 560px; height: 18px;
	transform: translateX(-50%);
	background: transparent;
	z-index: 9998;
}
.site-nav .nav-list > li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 7px; height: 7px;
	border-right: 1.7px solid currentColor;
	border-bottom: 1.7px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .18s ease;
}
.site-nav .nav-list > li.menu-item-has-children:hover > a::after,
.site-nav .nav-list > li.menu-item-has-children:focus-within > a::after,
.site-nav .nav-list > li.menu-item-has-children.is-open > a::after {
	transform: rotate(225deg) translate(-1px, -1px);
}
.site-nav .nav-list .sub-menu {
	position: absolute;
	top: calc(100% - 1px); left: 50%;
	transform: translateX(-50%) translateY(-6px);
	width: min(520px, calc(100vw - 32px)); min-width: 520px;
	display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
	margin: 0; padding: .75rem;
	list-style: none !important;
	background: rgba(255,255,255,.985);
	border: 1px solid rgba(12,34,49,.09);
	border-radius: 16px;
	box-shadow: 0 24px 65px rgba(4,29,43,.24), 0 8px 18px rgba(4,29,43,.09);
	backdrop-filter: blur(14px);
	z-index: 9999;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .16s ease, transform .16s ease, visibility 0s linear .55s;
}
.site-nav .nav-list .sub-menu::before {
	content: ''; position: absolute; top: -7px; left: 50%;
	width: 13px; height: 13px; background: #fff;
	border-left: 1px solid rgba(12,34,49,.09); border-top: 1px solid rgba(12,34,49,.09);
	transform: translateX(-50%) rotate(45deg);
}
.site-nav .nav-list > li.menu-item-has-children:hover > .sub-menu,
.site-nav .nav-list > li.menu-item-has-children:focus-within > .sub-menu,
.site-nav .nav-list > li.menu-item-has-children.is-open > .sub-menu {
	opacity: 1; visibility: visible; pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	transition-delay: 0s;
}
.site-nav .nav-list .sub-menu li { margin: 0; list-style: none !important; }
.site-nav .nav-list .sub-menu li a {
	position: relative; display: flex; align-items: center;
	min-height: 58px; padding: .72rem .8rem .72rem 2.35rem;
	border: 0 !important; border-radius: 11px;
	font-family: var(--f-display); font-size: .88rem; font-weight: 600;
	line-height: 1.25; color: var(--ink); white-space: normal;
	transition: background .16s ease, color .16s ease, transform .16s ease;
}
.site-nav .nav-list .sub-menu li a::before {
	content: ''; position: absolute; left: .9rem; top: 50%;
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--sand); box-shadow: 0 0 0 4px rgba(201,174,124,.13);
	transform: translateY(-50%);
}
.site-nav .nav-list .sub-menu li a:hover,
.site-nav .nav-list .sub-menu li a:focus-visible {
	background: linear-gradient(135deg, var(--green-lt), #f7fbf9);
	color: var(--green-dk); transform: translateY(-1px);
}
.site-nav .nav-list .sub-menu li a:hover::before,
.site-nav .nav-list .sub-menu li a:focus-visible::before { background: var(--green); }

.head-actions { display: flex; align-items: center; gap: .65rem; }
.head-phone { padding: .45rem .7rem; border-radius: 10px; color: #fff; background: rgba(255,255,255,.08); }
.head-phone-label { color: rgba(255,255,255,.68); }
.head-phone-num { color: #fff; }
.head-actions .btn-wa { border: 1px solid rgba(255,255,255,.2); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.head-phone { text-decoration: none; color: var(--ink); line-height: 1.15; display: block; }
.head-phone-label { display: block; font-size: .72rem; color: var(--muted); }
.head-phone-num { font-family: var(--f-display); font-weight: 700; font-size: 1rem; white-space: nowrap; }

.nav-toggle {
	display: none; align-items: center; gap: .5rem; background: none;
	border: 1px solid var(--line); border-radius: var(--r-sm);
	padding: .5rem .8rem; font-family: var(--f-display); font-weight: 600;
	color: var(--ink); cursor: pointer;
}
.nav-toggle-bars { display: grid; gap: 4px; }
.nav-toggle-bars i { display: block; width: 18px; height: 2px; background: var(--ink); }

/* ==========================================================================
   Hero — split layout keeps the image inside a ≤700px column
   ========================================================================== */
.hero {
	background:
		linear-gradient(180deg, var(--mist) 0%, #fff 100%);
	padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 6vw, 4.5rem);
	border-bottom: 1px solid var(--line);
}
.hero-inner { padding-block: clamp(2rem, 4vw, 3.5rem); }
.hero-grid {
	display: grid; grid-template-columns: 1fr; gap: var(--gap); align-items: center;
}
@media (min-width: 900px) {
	.hero-grid { grid-template-columns: minmax(0,1fr) minmax(0,560px); }
}
.hero-kicker {
	font-family: var(--f-display); font-size: .88rem; font-weight: 600;
	color: var(--muted); margin: 0 0 .9rem; padding-left: 2.6rem; position: relative;
}
.hero-kicker::before {
	content: ""; position: absolute; left: 0; top: .62em;
	width: 2rem; height: 2px; background: var(--sand);
}
.hero h1 { margin-bottom: .55em; }
.hero-answer { font-size: 1.135rem; color: var(--ink-soft); max-width: 56ch; }
.hero-points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .55rem; }
.hero-points li { position: relative; padding-left: 1.75rem; color: var(--muted); font-size: .98rem; }
.hero-points li::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: .55rem; height: .55rem; border-radius: 50%;
	border: 2px solid var(--green);
}

.hero-fig { margin: 0; position: relative; }
.hero-img {
	width: 100%; border-radius: var(--r);
	box-shadow: 0 18px 40px -22px rgba(12,34,49,.55);
}

/* Signature element: the manifest tag on the hero. Used once, nowhere else. */
.hero-tag {
	position: absolute; left: 1rem; bottom: -1.15rem; right: 1rem;
	background: var(--ink); color: #fff;
	border-top: 3px solid var(--sand);
	border-radius: 2px;
	padding: .7rem .95rem;
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem;
	box-shadow: 0 10px 24px -14px rgba(12,34,49,.8);
}
.hero-tag-l { font-size: .72rem; color: var(--sand); letter-spacing: .1em; font-weight: 600; }
.hero-tag-v { font-family: var(--f-display); font-size: .9rem; font-weight: 500; }

.hero-lp .quote-form-wrap { margin-top: 0; }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding-block: var(--pad-y); }
.section-alt { background: var(--mist); }
.section-dark { background: var(--ink); color: #D9E3E8; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark a { color: #fff; }

.sec-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec-lead { color: var(--muted); font-size: 1.08rem; }
.sec-h-center { text-align: center; margin-bottom: clamp(1.8rem, 4vw, 2.75rem); }

/* Direct-answer paragraph: the block AI Overviews and featured snippets pull.
   Given a subtle sand rule so it reads as the page's definitive answer. */
.answer-block {
	font-size: 1.09rem; color: var(--ink-soft);
	border-left: 3px solid var(--sand);
	padding-left: 1.15rem;
	max-width: 64ch;
}

.note {
	font-size: .95rem; color: var(--muted);
	background: var(--green-lt); border-radius: var(--r-sm);
	padding: .85rem 1.05rem; max-width: 64ch;
}
.section-dark .note { background: rgba(255,255,255,.07); color: #C7D5DC; }

/* ---------- areas block (homepage) ---------- */
.areas-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); align-items: center; }
@media (min-width: 900px) { .areas-grid { grid-template-columns: minmax(0,1fr) minmax(0,480px); } }
.areas-copy > *:last-child { margin-bottom: 0; }

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: 1fr; gap: var(--gap); align-items: center; }
@media (min-width: 900px) {
	.split { grid-template-columns: minmax(0,1.05fr) minmax(0,520px); }
	.split.is-flipped { grid-template-columns: minmax(0,520px) minmax(0,1.05fr); }
	.split.is-flipped .split-media { order: -1; }
}
.split-copy > *:last-child { margin-bottom: 0; }
.r-img { width: 100%; border-radius: var(--r); }

/* ==========================================================================
   Service cards
   ========================================================================== */
.svc-grid {
	display: grid; gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.svc-card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--r);
	overflow: hidden; display: flex; flex-direction: column;
	transition: border-color .15s ease;
}
.svc-card:hover { border-color: var(--green); }
.svc-media { display: block; }
.svc-img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; }
.svc-body { padding: 1.15rem 1.25rem 1.4rem; }
.svc-body h3 { margin-bottom: .4rem; }
.svc-body h3 a { color: var(--ink); text-decoration: none; }
.svc-body h3 a:hover { color: var(--green-dk); text-decoration: underline; }
.svc-body p { font-size: .97rem; color: var(--muted); margin: 0; }

/* ==========================================================================
   Steps — numbered because this genuinely is a sequence
   ========================================================================== */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
@media (min-width: 860px) {
	.steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
	.steps-inline { grid-template-columns: 1fr; }
}
.steps li { counter-increment: s; position: relative; padding-top: 2.9rem; }
.steps li::before {
	content: counter(s);
	position: absolute; top: 0; left: 0;
	width: 2.1rem; height: 2.1rem; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--ink); color: #fff;
	font-family: var(--f-display); font-weight: 700; font-size: .95rem;
}
.steps li::after {
	content: ""; position: absolute; top: 1.05rem; left: 2.55rem; right: 0;
	height: 1px; background: var(--line);
}
.steps li:last-child::after { display: none; }
.steps-inline li { padding-top: 0; padding-left: 3.1rem; padding-bottom: .2rem; }
.steps-inline li::after { display: none; }
.steps li h3 { margin-bottom: .3rem; }
.steps li p { font-size: .97rem; color: var(--muted); margin: 0; }

/* ==========================================================================
   Lists, chips, tables
   ========================================================================== */
.ticks { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .65rem; }
.ticks li { position: relative; padding-left: 1.9rem; }
.ticks li::before {
	content: ""; position: absolute; left: .1rem; top: .48em;
	width: .72rem; height: .38rem;
	border-left: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green);
	transform: rotate(-45deg);
}

.area-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.4rem; padding: 0; }
.area-chips li {
	font-size: .89rem; font-weight: 500;
	background: #fff; border: 1px solid var(--line);
	border-radius: 100px; padding: .32rem .85rem; color: var(--ink-soft);
}
.section-alt .area-chips li { background: #fff; }

.table-wrap { overflow-x: auto; margin: 0 0 1.4rem; }
.data-table { width: 100%; border-collapse: collapse; font-size: .97rem; min-width: 480px; }
.data-table th, .data-table td {
	text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top;
}
.data-table thead th {
	font-family: var(--f-display); font-weight: 600; color: var(--ink);
	border-bottom: 2px solid var(--sand); white-space: nowrap;
}
.data-table tbody th { font-family: var(--f-display); font-weight: 600; color: var(--ink); }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: none; }

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.gallery figure { margin: 0; }
.g-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }

/* ==========================================================================
   Quote block
   ========================================================================== */
.quote-grid { display: grid; gap: var(--gap); align-items: start; grid-template-columns: 1fr; }
@media (min-width: 900px) { .quote-grid { grid-template-columns: minmax(0,1fr) minmax(0,520px); } }
.quote-copy p { color: #B9CAD2; }
.quote-eyebrow {
	font-family: var(--f-display); font-size: .72rem; font-weight: 700; letter-spacing: .12em;
	color: var(--sand) !important; margin: 0 0 .7rem;
}
.quote-copy h2 { max-width: 15ch; margin-bottom: .7rem; }
.quote-lead { max-width: 48ch; font-size: 1.06rem; line-height: 1.65; }
.quote-benefits { display: grid; gap: .7rem; margin: 1.5rem 0 1.25rem; max-width: 560px; }
.quote-benefit {
	display: flex; align-items: flex-start; gap: .8rem; padding: .8rem .9rem;
	border: 1px solid rgba(255,255,255,.10); border-radius: var(--r-sm);
	background: rgba(255,255,255,.045);
}
.quote-benefit-icon {
	flex: 0 0 1.45rem; width: 1.45rem; height: 1.45rem; border-radius: 50%;
	display: grid; place-items: center; background: var(--sand); color: var(--ink);
	font-weight: 800; font-size: .78rem; margin-top: .05rem;
}
.quote-benefit strong, .quote-benefit span { display: block; }
.quote-benefit strong { color: #fff; font-family: var(--f-display); font-size: .95rem; margin-bottom: .12rem; }
.quote-benefit div > span { color: #B9CAD2; font-size: .86rem; line-height: 1.45; }
.quote-points { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: .55rem; }
.quote-points li { position: relative; padding-left: 1.75rem; color: #B9CAD2; font-size: .98rem; }
.quote-points li::before {
	content: ""; position: absolute; left: 0; top: .52em;
	width: .6rem; height: .6rem; background: var(--sand); border-radius: 2px;
}
.quote-direct { font-size: 1.02rem; }
.quote-direct a { font-family: var(--f-display); font-weight: 700; }

.quote-form-wrap { background: #fff; border-radius: var(--r); padding: clamp(1.35rem, 3vw, 2rem); color: var(--text); }
.quote-form-wrap.is-card { border: 1px solid var(--line); box-shadow: 0 16px 40px -28px rgba(12,34,49,.5); }
.form-h { font-size: 1.3rem; margin-bottom: 1rem; }

/* ---------- form ---------- */
.quote-form .field-row { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 520px) { .quote-form .field-row { grid-template-columns: 1fr 1fr; } }
.quote-form .field { margin: 0 0 1rem; max-width: none; }
.quote-form label {
	display: block; font-family: var(--f-display); font-weight: 600;
	font-size: .9rem; color: var(--ink); margin-bottom: .35rem;
}
.quote-form .opt { font-family: var(--f-body); font-weight: 400; color: var(--muted); font-size: .82rem; }
.quote-form input, .quote-form select, .quote-form textarea {
	width: 100%; font: inherit; font-size: 1rem; color: var(--text);
	padding: .72rem .85rem; border: 1px solid var(--line); border-radius: var(--r-sm);
	background: #fff;
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
	border-color: var(--green); outline: 2px solid rgba(15,107,69,.25); outline-offset: 0;
}
.quote-form textarea { resize: vertical; }
.quote-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .87rem; color: var(--muted); margin: .8rem 0 0; }
.form-msg { margin: .9rem 0 0; font-size: .95rem; font-weight: 500; }
.form-msg.is-ok  { color: var(--green-dk); }
.form-msg.is-err { color: #A32828; }
.quote-form.is-busy { opacity: .6; pointer-events: none; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
	list-style: none; cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: 1.06rem; }
.faq summary::after {
	content: ""; position: absolute; right: .5rem; top: 1.55rem;
	width: .6rem; height: .6rem;
	border-right: 2px solid var(--green); border-bottom: 2px solid var(--green);
	transform: rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .faq-a { padding: 0 0 1.25rem; }
.faq .faq-a p { color: var(--muted); margin: 0; }

/* ==========================================================================
   Related cards
   ========================================================================== */
.rel-grid { display: grid; gap: 1.35rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.rel-card {
	background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--sand);
	border-radius: var(--r-sm); padding: 1.4rem 1.5rem;
}
.rel-card h2, .rel-card h3 { font-size: 1.15rem; margin-bottom: .45rem; }
.rel-card a { color: var(--ink); text-decoration: none; }
.rel-card h2 a:hover, .rel-card h3 a:hover { color: var(--green-dk); text-decoration: underline; }
.rel-card p { font-size: .96rem; color: var(--muted); margin-bottom: .9rem; }
.rel-more { font-family: var(--f-display); font-weight: 600; font-size: .92rem; color: var(--green-dk); }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.crumbs { padding-block: 1rem .25rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; font-size: .87rem; }
.crumbs li + li::before { content: "/"; color: var(--line); margin-right: .4rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--green-dk); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }

/* ==========================================================================
   Contact + prose
   ========================================================================== */
.contact-list { margin: 0 0 1.5rem; }
.contact-list dt {
	font-family: var(--f-display); font-weight: 600; font-size: .82rem;
	color: var(--muted); margin-top: 1rem;
}
.contact-list dd { margin: .15rem 0 0; font-size: 1.08rem; font-weight: 500; }

.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.7rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .5rem; }
.prose img { border-radius: var(--r); margin-block: 1.5rem; }
.post-meta { font-size: .9rem; color: var(--muted); }
.post-hero { margin: 0 0 2rem; }
.post-hero img { border-radius: var(--r); }
.inline-cta { margin-top: 1.6rem; }
.pagination { margin-top: 2.5rem; }
.pagination .page-numbers { padding: .5rem .8rem; border: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none; margin-right: .3rem; }
.pagination .current { background: var(--ink); color: #fff; border-color: var(--ink); }

.search-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; }
.search-form label { font-family: var(--f-display); font-weight: 600; font-size: .9rem; width: 100%; }
.search-form input { padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot { background: var(--ink); color: #A9BDC6; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.foot-top { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .foot-top { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1040px) { .foot-top { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; } }
.foot-name { font-family: var(--f-display); font-weight: 800; font-size: 1.35rem; color: #fff; margin: 0 0 .5rem; }
.foot-blurb { font-size: .96rem; max-width: 40ch; }
.foot-h { font-family: var(--f-display); font-size: .95rem; font-weight: 600; color: #fff; margin: 0 0 .9rem; padding-bottom: .55rem; border-bottom: 1px solid rgba(201,174,124,.4); }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .95rem; }
.site-foot a { color: #A9BDC6; text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.foot-areas { grid-template-columns: 1fr 1fr; }
.foot-contact li { display: grid; gap: .1rem; }
.foot-lbl { font-size: .74rem; color: #7B929D; }
.foot-contact a, .foot-contact span:not(.foot-lbl) { color: #fff; font-weight: 500; }
.foot-bottom {
	margin-top: 2.75rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.11);
	display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
	font-size: .88rem;
}
.foot-bottom p { margin: 0; }

/* Developer credit. Deliberately quieter than the business contact details and
   set apart from them, so nobody mistakes this number for MRFT's own. */
.foot-credit {
	/* Own full-width row: sharing the row with the copyright and footer nav
	   squeezed the nav into three stacked lines at 1440px. */
	/* max-width:none is required — the global `p { max-width: 68ch }` rule was
	   capping this at 567px, so flex-basis:100% could never take a full row. */
	flex-basis: 100%; max-width: none; order: 3;
	display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
	margin-top: .9rem !important; padding-top: .9rem;
	border-top: 1px solid rgba(255,255,255,.07);
	font-size: .82rem; color: #7B929D;
}
.foot-credit strong { color: #C3D2D9; font-weight: 600; }
.foot-credit-sep { color: rgba(255,255,255,.22); }
.foot-credit-wa {
	display: inline-flex; align-items: center; gap: .32rem;
	color: #A9BDC6; text-decoration: none;
	border: 1px solid rgba(255,255,255,.16); border-radius: 100px;
	padding: .18rem .6rem; line-height: 1.5;
}
.foot-credit-wa:hover { color: #fff; border-color: var(--wa); text-decoration: none; }
.foot-credit-wa svg { color: var(--wa); flex: none; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Specificity note: `.site-foot ul` sets display:grid and outranks a bare
   `.foot-nav`, which stacked the footer links vertically. Scoped selector wins. */
.foot-bottom .foot-nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.foot-bottom nav { flex: 0 0 auto; }

/* ==========================================================================
   Sticky mobile action bar
   ========================================================================== */
.mobile-bar { display: none; }
@media (max-width: 780px) {
	.mobile-bar {
		display: grid; grid-template-columns: 1fr 1fr;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
		border-top: 1px solid rgba(0,0,0,.08);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.mobile-bar a {
		text-align: center; padding: .95rem .5rem; text-decoration: none;
		font-family: var(--f-display); font-weight: 600; font-size: 1rem;
		background: var(--green); color: #fff;
	}
	.mobile-bar a.wa { background: var(--wa); }
	body { padding-bottom: 3.6rem; }
}

/* ==========================================================================
   Responsive nav
   ========================================================================== */
@media (max-width: 1180px) {
	.nav-toggle { display: inline-flex; order: 3; }
	.head-actions { order: 2; }
	.site-nav {
		order: 4; flex-basis: 100%;
		display: none; padding-top: .5rem; border-top: 1px solid var(--line); margin-top: .6rem;
	}
	.site-nav.is-open { display: block; }
	.site-nav .nav-list { flex-direction: column; gap: 0; }
	.site-nav .nav-list li { border-bottom: 1px solid var(--line); }
	.site-nav .nav-list li:last-child { border-bottom: none; }
	.site-nav .nav-list .sub-menu { position: static; transform: none; width: auto; min-width: 0; margin: 0; padding: .25rem 0 .5rem .65rem; border: 0; border-radius: 0; box-shadow: none; display: block; background: transparent; opacity: 1; visibility: visible; pointer-events: auto; }
	.site-nav .nav-list .sub-menu::before { display: none; }
	.site-nav .nav-list .sub-menu li { border-bottom: 0; }
	.site-nav .nav-list .sub-menu li a { min-height: 0; padding: .65rem .5rem .65rem 1.8rem; }
	.site-nav .nav-list .sub-menu li a::before { left: .45rem; }
	.site-nav a { display: block; padding: .85rem .2rem; border-bottom: none; }
	.head-inner { flex-wrap: wrap; }
}
/* Between the hamburger breakpoint and full width the WhatsApp button is the
   first thing to go — the phone number stays, and the sticky mobile bar and
   in-page CTAs still carry WhatsApp. */
@media (max-width: 1320px) {
	.head-actions .btn-wa { display: none; }
}
@media (max-width: 600px) {
	/* The header phone link is dropped on small screens: it forced the Menu
	   button onto a second row and ate ~90px of vertical space above the fold.
	   Call and WhatsApp are permanently visible in the sticky bottom bar, so
	   nothing is lost. */
	.head-phone { display: none; }
	.head-inner { flex-wrap: nowrap; gap: .75rem; }
	.nav-toggle { order: 2; margin-left: auto; }
	.head-actions { order: 3; }
	.site-nav { order: 4; }
	.hero { padding-block: 1.75rem 2.5rem; }
	.hero-answer { font-size: 1.04rem; }
	.hero-tag { position: static; margin-top: .9rem; border-radius: var(--r-sm); }
	.cta-pair .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
	.site-head, .site-foot, .mobile-bar, .cta-pair, .quote-form-wrap { display: none !important; }
	body { color: #000; }
}

/* ==========================================================================
   Service-page polish: tighter rhythm, subtle motion, page transition
   ========================================================================== */
.service-page .section { padding-block: clamp(2.7rem, 5vw, 4.2rem); }
.service-page .section + .section { border-top: 1px solid rgba(12,34,49,.035); }
.service-page .split { gap: clamp(1.75rem, 4vw, 3rem); }
.service-page .sec-h-center { margin-bottom: 1.8rem; }
.service-page .gallery { gap: 1rem; }
.service-page .hero-inner { padding-block: clamp(2rem, 4vw, 3rem); }
.service-page .answer-block { margin-bottom: 1rem; }
.service-page .ticks { margin-top: 1rem; }
.service-page .steps { margin-top: 1.1rem; }

/* Gentle reveal: content enters once, without heavy scroll effects. */
.service-page .hero-copy,
.service-page .hero-media,
.service-page .split-copy,
.service-page .split-media,
.service-page .gallery figure,
.service-page .rel-card {
	animation: mrftReveal .5s cubic-bezier(.2,.75,.25,1) both;
}
.service-page .hero-media { animation-delay: .06s; }
.service-page .split-media { animation-delay: .05s; }
@keyframes mrftReveal {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* SEO cluster cue: useful to people, not keyword stuffing. */
.service-intent { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 0; }
.service-intent span { display:inline-flex; align-items:center; min-height:30px; padding:.3rem .7rem; border:1px solid rgba(12,34,49,.1); border-radius:999px; background:rgba(255,255,255,.72); color:var(--green-dk); font-size:.76rem; font-weight:650; letter-spacing:.01em; }
.service-page .hero-answer { max-width:62ch; }
.service-page .section { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.service-page .section:first-of-type { padding-top: clamp(2rem, 3.5vw, 3rem); }
.service-page .section h2 { text-wrap:balance; }
.service-page .rel-card { transition: transform .18s ease, box-shadow .18s ease; }
.service-page .rel-card:hover { transform:translateY(-3px); box-shadow:0 14px 35px rgba(12,34,49,.08); }
@media (max-width: 899px) { .service-intent { margin-top:.8rem; } .service-page .section { padding-block:2rem; } }
@media (prefers-reduced-motion: reduce) { .service-page .rel-card { transition:none; } .service-page .rel-card:hover { transform:none; } }


/* ========================================================================== 
   MRFT Modern UX v2 — deliberate visual system + mobile-first navigation
   ========================================================================== */
:root{
  --ink:#0b1f2a; --ink-soft:#183746; --paper:#fff; --mist:#f4f6f4;
  --mist-deep:#e5ebe8; --green:#0b6b49; --green-dk:#075237; --green-lt:#e6f2ec;
  --sand:#c8a66a; --text:#23343c; --muted:#5d6d74; --line:#d9e1de; --wa:#18a957;
  --r:14px; --r-sm:9px; --wrap:1240px;
  --f-display:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-body:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
html{scroll-padding-top:88px}
body{background:#fff;color:var(--text);font-size:1.02rem;line-height:1.7}
.wrap{width:min(100% - 2rem,var(--wrap))}.wrap.narrow{width:min(100% - 2rem,760px)}
h1,h2,h3,h4{letter-spacing:-.035em}
h1{font-size:clamp(2.45rem,5vw,4.65rem);line-height:1.02}
h2{font-size:clamp(1.8rem,3.2vw,3rem);line-height:1.08}

.site-head{background:rgba(7,30,41,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 30px rgba(7,30,41,.13);border-bottom:1px solid rgba(255,255,255,.1)}
.head-inner{min-height:74px;width:min(100% - 2rem,var(--wrap));padding-block:.45rem}
.brand{gap:.7rem}.brand-mark{color:#e1b96d}.brand-text strong{font-size:1.35rem}.brand-text span{font-size:.68rem}
.site-nav .nav-list{gap:.15rem}.site-nav .nav-list>li>a{font-size:.86rem;padding:.65rem .7rem;border-radius:8px}.site-nav .nav-list>li>a:hover,.site-nav .nav-list>li.current>a,.site-nav .nav-list>li.current-menu-item>a,.site-nav .nav-list>li.menu-item-has-children.is-open>a{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12)}
.head-actions{display:flex;align-items:center;gap:.6rem}.head-phone{color:#fff!important;text-decoration:none!important;font-size:.78rem;line-height:1.15;padding-right:.65rem;border-right:1px solid rgba(255,255,255,.15)}.head-phone-label{display:block;color:rgba(255,255,255,.58);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em}.head-phone-num{font-weight:700}
.btn{border-radius:8px;min-height:48px}.btn-primary{background:var(--green)}.btn-primary:hover{background:#064a32}.btn-wa{background:#18a957}.btn-wa:hover{background:#118545}

.hero{background:linear-gradient(180deg,#f5f7f5 0%,#fff 100%);border-bottom:1px solid var(--line);padding-block:clamp(2.4rem,6vw,5.5rem)}
.hero-grid{gap:clamp(2rem,5vw,5rem)}
.hero-copy{max-width:680px}.hero-kicker{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1rem;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dk)}.hero-kicker:before{content:"";width:28px;height:2px;background:var(--sand)}
.hero-answer{font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.65;color:#4c6068;max-width:60ch}.hero-points{margin-top:1.35rem}.hero-points li{font-size:.96rem}
.hero-media{position:relative}.hero-fig{border-radius:20px;overflow:hidden;box-shadow:0 28px 70px rgba(11,31,42,.15);background:#dfe6e3}.hero-img{width:100%;aspect-ratio:1.15/1;object-fit:cover}.hero-tag{left:18px;right:18px;bottom:18px;top:auto;border-radius:10px;background:rgba(8,29,40,.9);border:1px solid rgba(255,255,255,.15);padding:.75rem 1rem;backdrop-filter:blur(8px)}

.section{padding-block:clamp(3rem,6vw,6rem)}.section-alt{background:#f5f7f5}.section-dark{background:#0b1f2a}
.sec-head{max-width:760px;margin-bottom:2.5rem}.sec-lead{font-size:1.06rem;line-height:1.7}.answer-block{border-left:2px solid var(--sand);padding-left:1.2rem}
.svc-grid{gap:1rem}.svc-card{border:1px solid #dfe6e3;border-radius:14px;box-shadow:0 8px 24px rgba(11,31,42,.035);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.svc-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(11,31,42,.09);border-color:#b8ccc3}.svc-img{aspect-ratio:1.35/1}.svc-body{padding:1.25rem 1.3rem 1.45rem}.svc-body h3{font-size:1.2rem}
.steps{gap:1rem}.steps li{background:#fff;border:1px solid #e0e6e4;border-radius:12px;padding:3.2rem 1.25rem 1.2rem}.steps li::before{left:1.1rem;top:1rem;width:2rem;height:2rem;border-radius:7px;background:var(--green)}.steps li::after{display:none}
.area-chips li{border-radius:8px;padding:.4rem .75rem;background:#fff}
.quote-form-wrap{border-radius:14px;box-shadow:0 20px 55px rgba(0,0,0,.16)}.quote-form input,.quote-form select,.quote-form textarea{border-radius:8px;min-height:48px}.quote-form textarea{min-height:120px}
.faq details{background:#fff}.faq summary{padding:1.2rem 2.8rem 1.2rem 0}.faq summary h3{font-size:1.02rem}
.rel-card{border:1px solid #dce5e1;border-left:3px solid var(--sand);border-radius:12px;box-shadow:0 6px 22px rgba(11,31,42,.04)}
.r-img,.g-img,.post-hero img{border-radius:14px}
.site-foot{background:#081d27}.foot-h{border-bottom-color:rgba(200,166,106,.45)}
.mobile-bar{box-shadow:0 -8px 25px rgba(7,30,41,.12)}

/* Mobile navigation is a real drawer, not a desktop menu stacked vertically. */
.nav-toggle{display:none;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;border-radius:9px;min-width:48px;min-height:46px;padding:.55rem}.nav-toggle-bars{display:grid;gap:4px}.nav-toggle-bars i{display:block;width:18px;height:2px;background:currentColor;border-radius:3px}.nav-toggle-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:1180px){
 .nav-toggle{display:inline-grid;place-items:center;order:3}.head-actions{order:2}.site-nav{order:4;flex-basis:100%;display:none;border:0;margin:0;padding:.8rem 0 1rem}.site-nav.is-open{display:block}.site-nav .nav-list{display:grid;gap:.25rem}.site-nav .nav-list>li{border:0}.site-nav .nav-list>li>a{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;border-radius:9px}.site-nav .nav-list .sub-menu{display:none;position:static;width:auto;min-width:0;margin:.1rem 0 .35rem;padding:.2rem 0 .2rem .8rem;border:0;border-left:1px solid rgba(255,255,255,.16);border-radius:0;box-shadow:none;background:transparent;opacity:1;visibility:visible;pointer-events:auto;transform:none}.site-nav .nav-list .sub-menu.is-mobile-open{display:block}.site-nav .nav-list .sub-menu li{border:0}.site-nav .nav-list .sub-menu li a{display:block;min-height:44px;padding:.7rem .8rem;color:rgba(255,255,255,.76);font-size:.9rem}.site-nav .nav-list .sub-menu li a:hover{color:#fff;background:rgba(255,255,255,.06)}
 .site-head:has(.site-nav.is-open){box-shadow:0 16px 40px rgba(7,30,41,.25)}
}
@media(min-width:1181px){.site-nav .nav-list .sub-menu{background:#fff;border:1px solid #dbe4e1;box-shadow:0 22px 50px rgba(8,29,40,.15);border-radius:12px;padding:.55rem;min-width:300px}.site-nav .nav-list .sub-menu li a{border-radius:8px}.site-nav .nav-list .sub-menu li a:hover{background:#f0f5f2}}
@media(max-width:720px){
 .head-inner{min-height:68px}.head-phone{display:none}.head-actions .btn-wa{display:none}.head-actions{margin-left:auto}.nav-toggle{order:3}.site-nav{order:4}.hero{padding-block:2.3rem 3rem}.hero-grid{grid-template-columns:1fr}.hero-img{aspect-ratio:1.15/1}.hero-tag{position:static;margin-top:.7rem}.hero h1{font-size:clamp(2.35rem,11vw,3.35rem)}.cta-pair{gap:.6rem}.cta-pair .btn{flex:1 1 100%;width:100%}.section{padding-block:3.3rem}.svc-grid{grid-template-columns:1fr}.svc-card:hover{transform:none}.steps li{padding-top:3.1rem}.quote-grid{grid-template-columns:1fr}.mobile-bar a{min-height:58px;padding:.95rem .5rem;font-size:.95rem}.wrap{width:min(100% - 1.25rem,var(--wrap))}
}
@media(max-width:390px){.brand-text strong{font-size:1.15rem}.brand-mark svg{width:25px;height:25px}.hero h1{font-size:2.2rem}}

/* Do not animate the entire page on load. Motion is reserved for user actions. */
.service-page .hero-copy,.service-page .hero-media,.service-page .split-copy,.service-page .split-media,.service-page .gallery figure,.service-page .rel-card{animation:none}

/* Accessible submenu controls are only visible in the mobile drawer. */
.submenu-toggle{display:none}
@media(max-width:1180px){
 .site-nav .menu-item-has-children{position:relative}
 .site-nav .menu-item-has-children > .submenu-toggle{display:grid;place-items:center;position:absolute;right:.55rem;top:.45rem;width:42px;height:42px;border:0;border-radius:8px;background:transparent;color:rgba(255,255,255,.7);font:700 1.2rem/1 var(--f-body);cursor:pointer;z-index:2}
 .site-nav .menu-item-has-children > .submenu-toggle:hover{background:rgba(255,255,255,.08);color:#fff}
 .site-nav .menu-item-has-children > .submenu-toggle span{transition:transform .18s ease}
 .site-nav .menu-item-has-children > .submenu-toggle.is-open span{transform:rotate(45deg)}
 .site-nav .menu-item-has-children > a{padding-right:3.5rem!important}
}


/* ========================================================================
   MOBILE MENU FINAL FIX
   The mobile navigation is a full-width, fixed drawer below the header.
   It must never share the header's flex row or render as a narrow column.
   ======================================================================== */
@media (max-width: 1180px) {
	.site-head { z-index: 100; }
	.head-inner { position: relative; }
	.site-nav {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		top: 68px !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		max-height: calc(100dvh - 68px) !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		-webkit-overflow-scrolling: touch;
		background: #fff !important;
		border: 0 !important;
		border-top: 1px solid #e2e8e6 !important;
		box-shadow: 0 18px 45px rgba(8,29,40,.18) !important;
		padding: .65rem 1rem calc(1.25rem + env(safe-area-inset-bottom)) !important;
		margin: 0 !important;
		z-index: 99 !important;
	}
	.site-nav:not(.is-open) {
		display: none !important;
	}
	.site-nav.is-open {
		display: block !important;
	}
	.site-nav .nav-list {
		display: block !important;
		width: min(100%, 760px) !important;
		margin: 0 auto !important;
		padding: 0 !important;
	}
	.site-nav .nav-list > li {
		width: 100% !important;
		margin: 0 !important;
		border-bottom: 1px solid #e1e6e4 !important;
		background: #fff !important;
	}
	.site-nav .nav-list > li:last-child { border-bottom: 0 !important; }
	.site-nav .nav-list > li > a {
		min-height: 58px !important;
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		padding: .9rem 3.25rem .9rem .4rem !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		color: #102532 !important;
		font-family: var(--f-display) !important;
		font-size: 1.02rem !important;
		font-weight: 650 !important;
		line-height: 1.25 !important;
		text-decoration: none !important;
	}
	.site-nav .nav-list > li > a:hover,
	.site-nav .nav-list > li.current > a,
	.site-nav .nav-list > li.current-menu-item > a {
		background: #f4f7f6 !important;
		color: var(--green-dk) !important;
	}
	.site-nav .nav-list > li.menu-item-has-children > a::after {
		display: none !important;
	}
	.site-nav .menu-item-has-children > .submenu-toggle {
		right: .2rem !important;
		top: .45rem !important;
		width: 46px !important;
		height: 46px !important;
		border: 1px solid #d8e1de !important;
		border-radius: 8px !important;
		background: #f7f9f8 !important;
		color: #17333f !important;
		z-index: 3 !important;
	}
	.site-nav .menu-item-has-children > .submenu-toggle:hover {
		background: #edf3f0 !important;
		color: var(--green-dk) !important;
	}
	.site-nav .menu-item-has-children > .submenu-toggle span {
		display: block;
		font-size: 1.45rem;
		font-weight: 400;
		line-height: 1;
	}
	.site-nav .nav-list .sub-menu {
		display: none !important;
		position: static !important;
		width: 100% !important;
		margin: 0 !important;
		padding: .15rem .35rem .7rem 1rem !important;
		border: 0 !important;
		border-left: 2px solid #d9e3df !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: #f8faf9 !important;
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}
	.site-nav .nav-list .sub-menu.is-mobile-open {
		display: block !important;
	}
	.site-nav .nav-list .sub-menu li {
		border: 0 !important;
		width: 100% !important;
	}
	.site-nav .nav-list .sub-menu li a {
		position: relative;
		display: flex !important;
		align-items: center !important;
		min-height: 48px !important;
		width: 100% !important;
		padding: .7rem .65rem .7rem 1.45rem !important;
		border-radius: 6px !important;
		color: #203743 !important;
		font-family: var(--f-body) !important;
		font-size: .96rem !important;
		font-weight: 600 !important;
		line-height: 1.35 !important;
		text-decoration: none !important;
	}
	.site-nav .nav-list .sub-menu li a::before {
		content: '' !important;
		position: absolute !important;
		left: .25rem !important;
		top: 50% !important;
		width: 6px !important;
		height: 6px !important;
		border-radius: 50% !important;
		background: var(--sand) !important;
		transform: translateY(-50%) !important;
	}
	.site-nav .nav-list .sub-menu li a:hover,
	.site-nav .nav-list .sub-menu li a:focus-visible {
		background: #edf3f0 !important;
		color: var(--green-dk) !important;
	}
	body.mobile-menu-open { overflow: hidden !important; }
}

@media (max-width: 600px) {
	.site-nav { top: 68px !important; max-height: calc(100dvh - 68px) !important; padding-inline: .75rem !important; }
	.site-nav .nav-list > li > a { min-height: 56px !important; font-size: 1rem !important; }
}
@media (max-width: 390px) {
	.site-nav { top: 64px !important; max-height: calc(100dvh - 64px) !important; }
}


/* ========================================================================
   MRFT MOBILE NAVIGATION — HARD OVERRIDE
   This intentionally sits above every theme/layout rule. The navigation is
   removed from the header flex layout and becomes a true viewport drawer.
   ======================================================================== */
@media screen and (max-width: 1180px) {
  html { overflow-x: hidden !important; }
  body { overflow-x: hidden !important; }
  .site-head { position: sticky !important; top: 0 !important; z-index: 10000 !important; overflow: visible !important; }
  .site-head .head-inner { position: relative !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; min-height: 68px !important; width: 100% !important; padding: .45rem .75rem !important; gap: .65rem !important; }
  .site-head .brand { flex: 0 0 auto !important; margin: 0 !important; }
  .site-head .nav-toggle { flex: 0 0 auto !important; margin-left: auto !important; order: 2 !important; position: relative !important; z-index: 10003 !important; display: inline-grid !important; place-items: center !important; min-width: 48px !important; min-height: 46px !important; }
  .site-head .head-actions { flex: 0 0 auto !important; order: 3 !important; margin: 0 !important; }
  .site-head .head-actions .head-phone,
  .site-head .head-actions .btn-wa { display: none !important; }

  /* The critical part: remove nav from flex sizing and pin it to the viewport. */
  .site-head .site-nav {
    position: fixed !important;
    inset: 68px 0 0 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: calc(100dvh - 68px) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: .35rem 0 calc(1.25rem + env(safe-area-inset-bottom)) !important;
    display: none !important;
    float: none !important;
    clear: both !important;
    flex: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 0 !important;
    border-top: 1px solid #e2e8e6 !important;
    box-shadow: 0 18px 45px rgba(8,29,40,.18) !important;
    z-index: 10001 !important;
  }
  .site-head .site-nav.is-open { display: block !important; }
  .site-head .site-nav .nav-list {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 .75rem !important;
    box-sizing: border-box !important;
  }
  .site-head .site-nav .nav-list > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #e1e6e4 !important;
    box-sizing: border-box !important;
  }
  .site-head .site-nav .nav-list > li > a {
    display: flex !important;
    width: 100% !important;
    min-height: 56px !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding: .85rem 3.5rem .85rem .5rem !important;
    margin: 0 !important;
    color: #102532 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    white-space: normal !important;
  }
  .site-head .site-nav .nav-list > li > a:hover,
  .site-head .site-nav .nav-list > li.current > a,
  .site-head .site-nav .nav-list > li.current-menu-item > a { background: #f4f7f6 !important; color: #075237 !important; }
  .site-head .site-nav .nav-list > li.menu-item-has-children > a::after { display: none !important; content: none !important; }
  .site-head .site-nav .menu-item-has-children { position: relative !important; }
  .site-head .site-nav .menu-item-has-children > .submenu-toggle {
    display: grid !important;
    position: absolute !important;
    right: .35rem !important;
    top: .35rem !important;
    width: 44px !important;
    height: 44px !important;
    place-items: center !important;
    z-index: 10002 !important;
    border: 1px solid #d8e1de !important;
    border-radius: 8px !important;
    background: #f7f9f8 !important;
    color: #17333f !important;
  }
  .site-head .site-nav .nav-list .sub-menu {
    display: none !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: .2rem .25rem .65rem 1rem !important;
    border: 0 !important;
    border-left: 2px solid #d9e3df !important;
    background: #f8faf9 !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .site-head .site-nav .nav-list .sub-menu.is-mobile-open { display: block !important; }
  .site-head .site-nav .nav-list .sub-menu li { display: block !important; width: 100% !important; border: 0 !important; }
  .site-head .site-nav .nav-list .sub-menu li a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    padding: .65rem .5rem .65rem 1.25rem !important;
    color: #203743 !important;
    background: transparent !important;
    border: 0 !important;
    font-size: .95rem !important;
    line-height: 1.35 !important;
  }
  .site-head .site-nav .nav-list .sub-menu li a::before { left: .2rem !important; }

  .mobile-nav-backdrop {
    display: none !important;
    position: fixed !important;
    inset: 68px 0 0 0 !important;
    background: rgba(5,20,27,.42) !important;
    z-index: 9999 !important;
  }
  .mobile-nav-backdrop.is-visible { display: block !important; }
  body.mobile-menu-open { overflow: hidden !important; }
}
@media screen and (max-width: 600px) {
  .site-head .head-inner { min-height: 64px !important; }
  .site-head .site-nav { inset: 64px 0 0 0 !important; height: calc(100dvh - 64px) !important; }
  .mobile-nav-backdrop { inset: 64px 0 0 0 !important; }
}

/* ========================================================================== 
   HOMEPAGE — editorial / premium service-business layer
   ========================================================================== */
.home-hero { position:relative; isolation:isolate; overflow:hidden; background:#071D2A; color:#fff; min-height:min(760px,calc(100vh - 78px)); display:flex; align-items:center; }
.home-hero-bg { position:absolute; inset:0; z-index:-2; background:radial-gradient(circle at 80% 20%,rgba(31,168,85,.18),transparent 30%),linear-gradient(112deg,#061A26 0%,#0A2F40 56%,#073E39 100%); }
.home-hero::after { content:""; position:absolute; inset:0; z-index:-1; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,black,transparent 90%); pointer-events:none; }
.home-hero-inner { width:min(100% - 2.5rem,1380px); padding:clamp(3.5rem,7vw,6.5rem) 0; display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(2rem,5vw,5.5rem); align-items:center; }
.home-hero-copy { max-width:650px; }
.home-eyebrow,.section-label { font-family:var(--f-display); text-transform:uppercase; letter-spacing:.14em; font-weight:700; font-size:.72rem; margin:0 0 1rem; }
.home-eyebrow { color:#DCC48E; display:flex; align-items:center; gap:.55rem; }
.home-eyebrow span { width:28px; height:2px; background:#DCC48E; display:inline-block; }
.home-hero h1 { color:#fff; font-size:clamp(2.55rem,5.5vw,5.2rem); line-height:.99; letter-spacing:-.045em; max-width:10ch; margin-bottom:1.35rem; }
.home-hero-lead { color:#D2DEE2; font-size:clamp(1.02rem,1.7vw,1.18rem); line-height:1.72; max-width:56ch; }
.home-hero-cta { margin-top:1.8rem; }
.home-btn-ghost { border-color:rgba(255,255,255,.28); color:#fff; background:rgba(255,255,255,.04); }
.home-btn-ghost:hover { background:#fff; border-color:#fff; color:var(--ink); }
.home-trust-row { display:flex; flex-wrap:wrap; gap:.65rem 1.25rem; margin-top:2rem; color:#B9CBD1; font-size:.82rem; }
.home-trust-row span { display:inline-flex; align-items:center; gap:.4rem; }
.home-trust-row b { color:#fff; font-family:var(--f-display); font-size:.72rem; }
.home-slider { min-width:0; position:relative; }
.home-slider-viewport { position:relative; overflow:hidden; border-radius:18px; box-shadow:0 30px 70px rgba(0,0,0,.32); background:#0A2532; }
.home-slides { position:relative; min-height:520px; }
.home-slide { position:absolute; inset:0; opacity:0; visibility:hidden; transform:scale(1.025); transition:opacity .55s ease,transform .75s cubic-bezier(.2,.7,.2,1),visibility 0s linear .6s; }
.home-slide.is-active { opacity:1; visibility:visible; transform:scale(1); transition-delay:0s; }
.home-slide-media,.home-slide-img { position:absolute; inset:0; width:100%; height:100%; display:block; }
.home-slide-img { object-fit:cover; }
.home-slide-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,19,27,.08) 15%,rgba(3,19,27,.18) 35%,rgba(3,19,27,.88) 100%); }
.home-slide-content { position:absolute; left:clamp(1.4rem,4vw,2.5rem); right:clamp(1.4rem,4vw,2.5rem); bottom:clamp(1.5rem,4vw,2.5rem); max-width:650px; }
.home-slide-kicker { color:#DCC48E; font-family:var(--f-display); font-size:.72rem; text-transform:uppercase; letter-spacing:.15em; font-weight:700; margin:0 0 .55rem; }
.home-slide h2 { color:#fff; font-size:clamp(1.75rem,3.5vw,3rem); margin-bottom:.55rem; }
.home-slide h2 a { color:#fff; text-decoration:none; }
.home-slide-content > p:not(.home-slide-kicker) { color:#E0EAED; font-size:.94rem; line-height:1.55; margin-bottom:.85rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.home-slide-link,.home-card-link,.text-link { font-family:var(--f-display); font-weight:700; text-decoration:none; }
.home-slide-link { color:#fff; font-size:.9rem; }
.home-slide-link span,.home-card-link span,.text-link span { display:inline-block; margin-left:.3rem; transition:transform .2s ease; }
.home-slide-link:hover span,.home-card-link:hover span,.text-link:hover span { transform:translateX(4px); }
.home-slider-controls { position:absolute; left:1rem; right:1rem; bottom:1rem; z-index:5; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.home-slider-counter { color:#fff; background:rgba(5,22,30,.72); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.12); padding:.5rem .7rem; border-radius:8px; font-family:var(--f-display); font-size:.78rem; pointer-events:auto; }
.home-slider-counter strong { font-size:1rem; }
.home-slider-counter span { color:#AFC0C6; margin-left:.2rem; }
.home-slider-arrows { display:flex; gap:.45rem; pointer-events:auto; }
.slider-arrow { width:42px; height:42px; border:1px solid rgba(255,255,255,.2); border-radius:50%; background:rgba(5,22,30,.72); color:#fff; cursor:pointer; font-size:1.15rem; transition:background .2s ease,transform .2s ease; }
.slider-arrow:hover { background:var(--green); transform:translateY(-2px); }
.home-slider-dots { display:flex; justify-content:center; gap:.38rem; margin-top:.9rem; }
.slider-dot { width:22px; height:3px; border:0; padding:0; background:rgba(255,255,255,.28); cursor:pointer; border-radius:20px; transition:width .25s ease,background .25s ease; }
.slider-dot.is-active { width:42px; background:#DCC48E; }
.home-intro-grid { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:var(--gap); align-items:start; }
.section-label { color:var(--green); }
.section-label-light { color:#DCC48E; }
.home-intro-heading h2 { max-width:13ch; font-size:clamp(2rem,4vw,3.1rem); }
.home-intro-copy { max-width:720px; }
.home-intro-lead { font-family:var(--f-display); color:var(--ink); font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.55; }
.text-link { color:var(--green-dk); font-size:.94rem; }
.home-section-head { display:flex; justify-content:space-between; gap:2rem; align-items:end; margin-bottom:2.5rem; }
.home-section-head > div { flex:1 1 55%; }
.home-section-head > p { flex:0 1 480px; margin:0; color:var(--muted); }
.home-section-head h2 { margin-bottom:0; max-width:17ch; }
.home-section-head-center { display:block; text-align:center; }
.home-section-head-center h2 { max-width:none; }
.home-service-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.home-service-card { background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; min-width:0; transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease; }
.home-service-card:hover { transform:translateY(-6px); border-color:rgba(15,107,69,.35); box-shadow:0 22px 42px rgba(12,34,49,.11); }
.home-service-media { position:relative; display:block; overflow:hidden; aspect-ratio:1.55; }
.home-service-img { width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.home-service-card:hover .home-service-img { transform:scale(1.045); }
.home-service-number { position:absolute; top:.75rem; left:.75rem; padding:.35rem .5rem; background:rgba(7,29,42,.82); color:#fff; font:700 .7rem var(--f-display); letter-spacing:.08em; border-radius:5px; }
.home-service-body { padding:1.05rem 1.05rem 1.2rem; display:flex; flex-direction:column; flex:1; }
.home-service-kicker { font:700 .67rem var(--f-display); text-transform:uppercase; letter-spacing:.1em; color:var(--green); margin-bottom:.45rem; }
.home-service-body h3 { margin-bottom:.4rem; font-size:1.08rem; }
.home-service-body h3 a { color:var(--ink); text-decoration:none; }
.home-service-body p:not(.home-service-kicker) { color:var(--muted); font-size:.88rem; line-height:1.52; margin-bottom:.9rem; }
.home-card-link { margin-top:auto; font-size:.82rem; color:var(--ink); }
.home-process-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); }
.home-process-step { padding:1.25rem 1.35rem 1.5rem; border-top:1px solid var(--line); border-right:1px solid var(--line); position:relative; }
.home-process-step:first-child { border-left:1px solid var(--line); }
.home-process-step > span { display:block; font:800 2.2rem var(--f-display); color:#C9AE7C; margin-bottom:2.5rem; }
.home-process-step h3 { font-size:1.05rem; margin-bottom:.4rem; }
.home-process-step p { font-size:.9rem; color:var(--muted); margin:0; }
.home-hub { background:#071D2A; color:#fff; overflow:hidden; }
.home-hub-grid { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
.home-hub-copy h2,.home-quote-copy h2,.home-final-inner h2 { color:#fff; }
.home-hub-copy > p:not(.section-label),.home-quote-copy > p:not(.section-label),.home-final-inner > div > p:not(.section-label) { color:#BFD0D6; }
.home-hub-links { display:grid; grid-template-columns:1fr 1fr; gap:0 1.5rem; margin-top:1.6rem; border-top:1px solid rgba(255,255,255,.12); }
.home-hub-links a { padding:.95rem 0; color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.12); font-family:var(--f-display); font-weight:600; font-size:.93rem; display:flex; justify-content:space-between; }
.home-hub-links a span { color:#DCC48E; transition:transform .2s ease; }
.home-hub-links a:hover span { transform:translateX(4px); }
.home-hub-media { position:relative; }
.home-hub-img { width:100%; aspect-ratio:1.1; object-fit:cover; border-radius:14px; }
.home-hub-stamp { position:absolute; bottom:1rem; left:1rem; background:#fff; color:var(--ink); padding:.75rem 1rem; border-radius:8px; display:flex; flex-direction:column; box-shadow:0 12px 28px rgba(0,0,0,.2); }
.home-hub-stamp strong { font:800 1.1rem var(--f-display); line-height:1; }
.home-hub-stamp span { font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:.2rem; }
.home-areas-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gap); align-items:center; }
.home-area-img { width:100%; aspect-ratio:1.2; object-fit:cover; border-radius:14px; }
.home-areas-copy h2 { max-width:15ch; }
.home-area-list { list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; margin:1.3rem 0 1.35rem; padding:0; }
.home-area-list li { border:1px solid var(--line); padding:.35rem .7rem; border-radius:100px; font:600 .78rem var(--f-display); color:var(--ink-soft); }
.home-quote { background:linear-gradient(120deg,#0A2938,#0A3D3C); }
.home-quote-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--gap); align-items:start; }
.home-quote-copy { padding-top:.7rem; }
.home-quote-copy h2 { font-size:clamp(2rem,4vw,3.4rem); max-width:11ch; }
.home-quote-points { list-style:none; padding:0; margin:1.6rem 0; display:grid; gap:.8rem; }
.home-quote-points li { display:flex; flex-direction:column; padding-left:1rem; border-left:2px solid #DCC48E; }
.home-quote-points b { color:#fff; font:700 .9rem var(--f-display); }
.home-quote-points span { color:#AFC3CA; font-size:.82rem; }
.home-quote-phone { color:#AFC3CA; font-size:.88rem; }
.home-quote-phone span { margin-right:.35rem; }
.home-quote-phone a { color:#fff; font:700 1rem var(--f-display); }
.home-quote-form { background:#fff; padding:clamp(1.2rem,3vw,2rem); border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.22); }
.home-fleet { background:var(--mist); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.home-fleet-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
.home-fleet-media { position:relative; }
.home-fleet-media a { display:block; position:relative; overflow:hidden; border-radius:14px; background:#071D2A; box-shadow:0 24px 55px rgba(4,29,43,.2); }
.home-fleet-img { width:100%; aspect-ratio:1.35; object-fit:cover; filter:brightness(.74) contrast(1.04); transition:transform .45s ease, filter .3s ease; }
.home-fleet-media a:hover .home-fleet-img { transform:scale(1.025); filter:brightness(.82) contrast(1.04); }
.home-fleet-badge { position:absolute; left:1rem; bottom:1rem; background:rgba(7,29,42,.9); color:#fff; border:1px solid rgba(255,255,255,.13); border-radius:8px; padding:.72rem .9rem; display:flex; flex-direction:column; box-shadow:0 12px 28px rgba(0,0,0,.22); }
.home-fleet-badge strong { font:800 .82rem var(--f-display); letter-spacing:.08em; }
.home-fleet-badge span { color:#BFD0D6; font-size:.72rem; margin-top:.18rem; }
.home-fleet-copy h2 { max-width:14ch; }
.home-fleet-lead { font-size:1.08rem; color:var(--ink-soft); }
.home-fleet-points { list-style:none; margin:1.3rem 0; padding:0; display:grid; gap:.55rem; }
.home-fleet-points li { position:relative; padding-left:1.45rem; }
.home-fleet-points li::before { content:'✓'; position:absolute; left:0; top:0; color:var(--green); font-family:var(--f-display); font-weight:800; }
.gallery figure img[src*="mrft-body-truck"] { filter:brightness(.78) contrast(1.04); transition:filter .25s ease, transform .35s ease; }
.gallery figure:hover img[src*="mrft-body-truck"] { filter:brightness(.86) contrast(1.04); transform:scale(1.015); }

.home-final-cta { background:var(--ink); color:#fff; padding:clamp(2.75rem,6vw,4.5rem) 0; }
.home-final-inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.home-final-inner h2 { margin-bottom:.45rem; }
.home-final-inner .cta-pair { margin:0; flex-shrink:0; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1); transition-delay:var(--reveal-delay,0ms); }
.reveal-left { transform:translateX(-28px); }
.reveal-right { transform:translateX(28px); }
.reveal.is-visible { opacity:1; transform:none; }
@media (max-width:1100px) { .home-service-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .home-hero-inner { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
@media (max-width:860px) { .home-hero { min-height:auto; } .home-hero-inner,.home-intro-grid,.home-hub-grid,.home-areas-grid,.home-quote-grid,.home-fleet-grid { grid-template-columns:1fr; } .home-hero-inner { padding-block:3.25rem 3.5rem; } .home-hero h1 { max-width:13ch; } .home-slider { margin-top:.5rem; } .home-slides { min-height:460px; } .home-intro-heading h2,.home-areas-copy h2 { max-width:none; } .home-service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .home-process-grid { grid-template-columns:repeat(2,1fr); } .home-process-step:nth-child(3) { border-left:1px solid var(--line); } .home-section-head { align-items:start; flex-direction:column; margin-bottom:1.8rem; } .home-section-head > p { flex:initial; } .home-hub-media { order:-1; } .home-hub-img { aspect-ratio:1.5; } .home-final-inner { flex-direction:column; align-items:flex-start; } }
@media (max-width:560px) { .home-fleet-grid { gap:1.75rem; } .home-fleet-img { aspect-ratio:1.15; } .home-fleet-copy h2 { max-width:none; } .home-hero-inner { width:min(100% - 1.25rem,1380px); padding-block:2.5rem 2.75rem; } .home-hero h1 { font-size:clamp(2.35rem,12vw,3.4rem); } .home-hero-lead { font-size:.98rem; } .home-hero-cta { flex-direction:column; align-items:stretch; } .home-hero-cta .btn { width:100%; } .home-trust-row { gap:.5rem .9rem; font-size:.72rem; } .home-slides { min-height:430px; } .home-slide-content { bottom:4.35rem; } .home-slide-content > p:not(.home-slide-kicker) { -webkit-line-clamp:2; font-size:.84rem; } .home-slider-controls { bottom:.65rem; } .home-slider-dots { display:none; } .home-service-grid { grid-template-columns:1fr; } .home-service-media { aspect-ratio:1.65; } .home-process-grid { grid-template-columns:1fr; } .home-process-step,.home-process-step:nth-child(3) { border-left:1px solid var(--line); border-right:1px solid var(--line); } .home-process-step + .home-process-step { border-top:0; } .home-process-step > span { margin-bottom:1.25rem; } .home-hub-links { grid-template-columns:1fr; } .home-hub-media { order:-1; } .home-hub-img { aspect-ratio:1.15; } .home-quote-form { border-radius:10px; padding:1rem; } .home-final-inner .cta-pair { width:100%; flex-direction:column; align-items:stretch; } .home-final-inner .btn { width:100%; } }
/* Mobile truck slide: show the complete body truck instead of cropping the ends. */
@media (max-width:560px) {
  .home-slide-body-truck .home-slide-img { object-fit:contain; object-position:center center; background:#0A2532; }
  .home-slide-body-truck .home-slide-shade { background:linear-gradient(180deg,rgba(3,19,27,.02) 20%,rgba(3,19,27,.16) 48%,rgba(3,19,27,.90) 100%); }
}

@media (prefers-reduced-motion:reduce) { .reveal,.reveal-left,.reveal-right { opacity:1; transform:none; transition:none; } .home-slide,.home-service-card,.home-service-img,.slider-arrow,.home-slide-link span,.home-card-link span,.text-link span { transition:none; } }

/* Image motion is deliberately subtle: movement on hover, not constant looping. */
.r-img,.g-img,.hero-img { transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.split-media:hover .r-img,.gallery figure:hover .g-img,.hero-media:hover .hero-img { transform:scale(1.018); }
/* Final mobile body-truck framing: preserve the full source photo and keep the truck visible. */
@media (max-width:560px) {
  .home-slide-body-truck .home-slide-media {
    background:#0A2532;
  }
  .home-slide-body-truck .home-slide-img.home-body-truck-img {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center top !important;
    transform:none !important;
  }
  .home-slide-body-truck .home-slide-shade {
    background:linear-gradient(180deg,rgba(3,19,27,.02) 0%,rgba(3,19,27,.06) 36%,rgba(3,19,27,.72) 68%,rgba(3,19,27,.96) 100%) !important;
  }
}