/*
Theme Name: Movers Magnet Premium
Theme URI: https://www.moversmagnet.co.za/
Author: Nzima AI Solutions
Author URI: https://www.moversmagnet.co.za/
Description: Custom marketing/landing page theme for Movers Magnet - compare moving company quotes across South Africa.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: movers-magnet
*/

/* ══ SELF-HOSTED FONTS ═══════════════════════════════════════
   Previously loaded from fonts.googleapis.com/fonts.gstatic.com — moved
   local to remove that external origin's DNS lookup + connection + render-
   blocking-request overhead entirely. Files live in assets/fonts/ (paths
   below are relative to this stylesheet's own location, i.e. the theme
   root, same as WordPress's own get_stylesheet_uri()).

   Outfit is shipped as ONE variable-font file covering its whole
   weight range (this is exactly what Google's own CSS API was already
   serving, since the theme requests weights 300-900 together) — a single
   `font-weight: 300 900` range, not seven separate declarations.
   Only the "latin" subset was downloaded (this is an English-language
   South African site; latin-ext's extra Vietnamese/diacritic coverage
   isn't needed) — restore it later if non-Latin text is ever added.

   TTF listed second in each src as a fallback for browsers with no woff2
   support at all — woff2 is far smaller and every actually-current browser
   supports it, so it's always listed first and wins in practice; TTF only
   ever loads on very old browsers, which also won't respect the Outfit
   variable font's weight axis and will just render its default instance. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('assets/fonts/outfit-variable-latin.woff2') format('woff2'),
       url('assets/fonts/outfit-variable-latin.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-regular-latin.woff2') format('woff2'),
       url('assets/fonts/instrument-serif-regular-latin.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-italic-latin.woff2') format('woff2'),
       url('assets/fonts/instrument-serif-italic-latin.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ══ RESET & TOKENS ════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); scroll-behavior: smooth; overflow-x:hidden; }

:root {
  --orange:        #ff5923;
  --orange-d:      #e04718;
  --orange-glow:   rgba(255,89,35,0.18);
  --orange-soft:   rgba(255,89,35,0.08);

  /* Light (default) theme */
  --bg:            #f7f5f1;
  --bg-card:       #ffffff;
  --bg-surface:    #fbf9f5;
  --bg-deep:       #ffffff;
  --bg-deep-2:     #fdf0e9;
  --white:         #ffffff;
  --off-white:     #f5f0eb;
  --text:          #17140f;
  --muted:         #6b675f;
  --text-soft:     rgba(23,20,15,0.68);
  --stroke-soft:   rgba(13,10,5,0.14);
  --watermark:     rgba(13,10,5,0.045);
  --border:        rgba(13,10,5,0.09);
  --border-strong: rgba(13,10,5,0.16);
  --border-o:      rgba(255,89,35,0.25);
  --surface-soft:  rgba(13,10,5,0.035);
  --surface-soft-2:rgba(13,10,5,0.055);
  --header-bg:     rgba(247,245,241,0.85);
  --dropdown-bg:   #ffffff;
  --mobile-bg:     rgba(247,245,241,0.98);
  --hero-img:      image-set(url('assets/images/hero-bg-light.avif') type('image/avif'), url('assets/images/hero-bg-light.jpg') type('image/jpeg'));

  --radius-xl:     32px;
  --radius-lg:     24px;
  --radius-md:     16px;
  --trans:         0.45s cubic-bezier(0.16, 1, 0.3, 1);
  --trans-fast:    0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s ease, color 0.4s ease;
}

/* ══ PRELOADER ═══════════════════════════════════════════════
   See the markup + hide script in header.php right after <body> opens. background matches --bg
   exactly so there's no color flash against the page underneath; pointer-events:none from the start
   means it never blocks a click even while visible. mm-preloader-hide (added by JS on window "load")
   is the normal path; the force-hide keyframe below is a pure-CSS fallback that fires on its own
   after 1.6s regardless of JS, so this can never get stuck covering the page. */
.mm-preloader {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  opacity: 1; pointer-events: none;
  transition: opacity 0.45s ease;
  animation: mm-preloader-force-hide 0.4s ease 1.6s forwards;
}
.mm-preloader-hide { opacity: 0; }
.mm-preloader-mark { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.mm-preloader-logo {
  width: 60px; height: auto; object-fit: contain;
  animation: mm-preloader-breathe 1.2s ease-in-out infinite;
}
@keyframes mm-preloader-breathe {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
/* A single thin line beneath the mark, sweeping once per cycle — the only "loading" cue, in place of
   a spinner. var(--orange) at low opacity as the base line, a brighter pass sweeping across it. */
.mm-preloader-line {
  position: relative; width: 44px; height: 1px;
  background: var(--border-strong); overflow: hidden;
}
.mm-preloader-line::after {
  content: ''; position: absolute; inset: 0; width: 60%;
  background: var(--orange);
  animation: mm-preloader-line-sweep 1.9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes mm-preloader-line-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(220%); }
}
@keyframes mm-preloader-force-hide {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-preloader-logo, .mm-preloader-line::after { animation: none; }
  .mm-preloader-logo { opacity: 0.75; }
}

/* ══ UTILS ═══════════════════════════════════════════════════ */
.serif { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; letter-spacing: 0.5px; }
.wrap { width: min(1280px, 90%); margin: 0 auto; position: relative; z-index: 2; }
.wrap-narrow { width: min(920px, 90%); margin: 0 auto; position: relative; z-index: 2; }


/* The Large Watermark */
.watermark-text {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(100px, 20vw, 300px);
    font-weight: 800 !important;
    color: var(--watermark);
    z-index: 1;
    pointer-events: none;
    white-space: nowrap;
font-family:Outfit !important;
}



.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; color: var(--orange);
  text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px;
}
.eyebrow::before {
  content: ''; width: 5px; height: 5px;
  background: var(--orange); border-radius: 50%;
  box-shadow: 0 0 8px var(--orange); flex-shrink: 0;
}

/* Ambient glows */
.g-orb { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; }
.g-1 { top: -10%; right: -5%; width: 600px; height: 600px; background: rgba(255,89,35,0.09); }
.g-2 { top: 30%; left: -10%; width: 500px; height: 500px; background: rgba(255,89,35,0.06); }
.g-3 { bottom: 0%; right: 10%; width: 700px; height: 700px; background: rgba(255,89,35,0.05); }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--orange); color: #fff;
  padding: 14px 28px; border-radius: 100px;
  font-family: 'Outfit', sans-serif; font-size: 14.5px; font-weight: 700;
  text-decoration: none; border: none; cursor: pointer;
  transition: background var(--trans), transform var(--trans), box-shadow var(--trans);
  box-shadow: 0 4px 28px var(--orange-glow);
}
.btn-primary:hover { background: var(--orange-d); transform: translateY(-2px); box-shadow: 0 8px 36px rgba(255,89,35,0.42); }
.btn-primary svg { width: 15px; height: 15px; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; color: var(--text);
  padding: 13px 26px; border-radius: 100px;
  font-size: 14.5px; font-weight: 600; text-decoration: none;
  border: 1.5px solid var(--border-strong);
  transition: border-color var(--trans), background var(--trans), transform var(--trans), color var(--trans);
}
.btn-ghost:hover { border-color: rgba(255,89,35,0.45); background: rgba(255,89,35,0.06); transform: translateY(-2px); }

.btn-dark {
  display: inline-flex; align-items: center; gap: 9px;
  background: #000; color: #fff;
  padding: 14px 28px; border-radius: 100px;
  font-size: 14.5px; font-weight: 700; text-decoration: none;
  transition: background var(--trans), transform var(--trans);
}
.btn-dark:hover { background: #1a1a1a; transform: translateY(-3px); }

/* Scroll reveal — fails OPEN, not closed. .rv used to be opacity:0 unconditionally, with only JS
   (an IntersectionObserver in main.js) ever adding .in to bring it back to opacity:1. That meant ANY
   JS failure anywhere on the page — main.js blocked/failing to load, an ad-blocker, an error earlier
   in the same script (this is exactly how an unrelated GSAP CDN failure once took the whole site's
   text down with it) — left every .rv element (which includes nearly all Elementor heading/text/
   image/button content sitewide, auto-tagged in main.js) permanently invisible with no fallback.
   Now the hidden state itself only exists under .js-ready, a class added by a tiny, dependency-free
   inline script in header.php's <head> (nothing else can fail before it, since it has zero
   dependencies) — so content is visible by default and the reveal animation is purely a progressive
   enhancement on top, never a requirement for the content to show up at all. */
.rv { opacity: 1; transform: none; }
.js-ready .rv { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js-ready .rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.08s; }
.rv-d2 { transition-delay: 0.16s; }
.rv-d3 { transition-delay: 0.24s; }
.rv-d4 { transition-delay: 0.32s; }

/* GSAP curtain reveal (headings / text) */
.reveal-mask-wrapper { overflow: hidden; display: block; }
.line { overflow: hidden; }

/* ══ HEADER ══════════════════════════════════════════════════ */
.mm-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 0;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}
.mm-header.scrolled {
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--border);
}

/* Top bar */
.header-topbar {
  background: #ff59237a;
backdrop-filter:blur(8px);
  padding: 7px 0;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  letter-spacing: 0.3px;
  transition: height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}
.mm-header.scrolled .header-topbar { height: 0; opacity: 0; padding: 0; overflow: hidden; }

.header-topbar-inner {
  display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap;
}
.header-topbar-inner a { color: #fff; text-decoration: none; }
.topbar-sep { opacity: 0.45; }

/* Social links menu (Appearance > Menus > Social Links Menu) — icon-only, sized down from the
   36px footer version (.footer-social-btn base rule, ~line 927) to fit the slim topbar strip. */
.topbar-socials { display: flex; align-items: center; gap: 8px; }
.topbar-socials .footer-social-btn {
  width: 22px; height: 22px;
  background: transparent; border: none;
  color: #fff; opacity: 0.85;
}
.topbar-socials .footer-social-btn:hover { background: transparent; color: #fff; opacity: 1; }
.topbar-socials .footer-social-btn svg { width: 13px; height: 13px; }

/* Main nav row */
.header-main {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 5%;
  gap: 24px;
}

.header-logo {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
}
.header-logo .custom-logo-link { display: inline-block; }
.header-logo img,
.header-logo .custom-logo {
  height: 74px;
  max-height: 74px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  display: block;
}
.header-logo-text { display: flex; flex-direction: column; }
.header-logo-text strong { font-size: 17px; font-weight: 800; color: #fff; line-height: 1; }
.header-logo-text span { font-size: 10.5px; color: var(--orange); font-weight: 600; letter-spacing: 0.5px; }

nav.main-nav { display: flex; align-items: center; gap: 6px; }
.nav-item { position: relative; }
.nav-item > a {
  display: flex; align-items: center; gap: 5px;
  color: var(--text-soft); text-decoration: none;
  font-size: 14px; font-weight: 500; padding: 8px 14px;
  border-radius: 8px;
  transition: color var(--trans-fast), background var(--trans-fast);
}
.nav-item > a:hover, .nav-item > a.active { color: var(--text); background: var(--surface-soft); }
.nav-item > a svg { width: 11px; height: 11px; transition: transform var(--trans-fast); }
.nav-item:hover > a svg { transform: rotate(180deg); }

/* Dropdown */
.nav-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: var(--dropdown-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px;
  min-width: 240px;
  backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--trans-fast);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: none; }
.nav-dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  color: var(--text-soft); text-decoration: none;
  font-size: 13.5px; font-weight: 500;
  transition: color var(--trans-fast), background var(--trans-fast);
}
.nav-dropdown a:hover { color: var(--text); background: rgba(255,89,35,0.1); }
.nav-dropdown a .dd-icon {
  width: 28px; height: 28px; border-radius: 7px;
  background: rgba(255,89,35,0.1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nav-dropdown a .dd-icon svg { width: 14px; height: 14px; color: var(--orange); }

/* Dynamic wp_nav_menu() output (used once a menu is assigned to the 'primary'
   location) now renders through MM_Nav_Walker (functions.php), which outputs
   the exact same .nav-item/.nav-dropdown/.dd-icon structure as the hardcoded
   fallback above — so it's styled entirely by the rules above, no separate
   .main-nav-menu ruleset needed. */

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-cta { font-size: 13.5px; padding: 10px 22px; }
.header-login-link {
  background: none; border: none; cursor: pointer;
  color: var(--text-soft); font-size: 13.5px; font-weight: 600;
  padding: 8px 4px; transition: color var(--trans-fast);
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
.header-login-link:hover { color: var(--orange); }
.header-user-link svg { flex-shrink: 0; }

/* Logged-in username → hover/focus dropdown (Dashboard + Log Out). Works identically whether
   .header-user-menu was rendered by PHP (on-site login, header.php) or built client-side (portal
   session check, main.js) — same markup either way. */
.header-user-menu { position: relative; }
.header-user-caret { transition: transform var(--trans-fast); }
.header-user-menu:hover .header-user-caret, .header-user-menu:focus-within .header-user-caret { transform: rotate(180deg); }
.header-user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  min-width: 160px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 6px; box-shadow: 0 20px 50px rgba(13,10,5,0.16);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--trans-fast), visibility var(--trans-fast), transform var(--trans-fast);
}
.header-user-menu:hover .header-user-dropdown, .header-user-menu:focus-within .header-user-dropdown {
  opacity: 1; visibility: visible; transform: none;
}
.header-user-dropdown-item {
  display: block; padding: 9px 12px; border-radius: 8px;
  color: var(--text-soft); font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: background var(--trans-fast), color var(--trans-fast);
}
.header-user-dropdown-item:hover { background: var(--surface-soft); color: var(--orange); }
.mobile-provider-login-link {
  background: none; border: none; cursor: pointer; text-align: left;
  color: var(--muted); font-size: 14px; text-decoration: none; font-family: inherit;
}
.mobile-user-link { display: flex; align-items: center; gap: 8px; }
.mobile-user-link svg { flex-shrink: 0; }

/* Shop cart icon (only rendered when WooCommerce is active — see header.php) */
.header-cart-link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: var(--text-soft); text-decoration: none;
  transition: color var(--trans-fast), background var(--trans-fast);
}
.header-cart-link:hover { color: var(--orange); background: var(--surface-soft); }
.header-cart-count {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px;
  background: var(--orange); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

/* ── Provider Login modal ──────────────────────────────────── */
.provider-login-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(15,23,42,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.provider-login-overlay.open { opacity: 1; pointer-events: auto; }
.provider-login-box {
  position: relative;
  background: #fff; border-radius: 20px; padding: 32px;
  width: 100%; max-width: 380px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  transform: translateY(12px);
  transition: transform 0.25s ease;
}
.provider-login-overlay.open .provider-login-box { transform: translateY(0); }
.provider-login-box h3 { font-size: 22px; font-weight: 800; color: var(--ink, #1e293b); margin: 0 0 4px; }
.provider-login-sub { font-size: 13.5px; color: var(--muted); margin: 0 0 20px; }
.provider-login-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--muted);
}
.provider-login-close:hover { background: rgba(0,0,0,0.05); }
.provider-login-field { margin-bottom: 14px; text-align: left; }
.provider-login-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink, #1e293b); margin-bottom: 6px; }
.provider-login-field input {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); font-size: 14px; font-family: inherit;
}
.provider-login-field input:focus { outline: none; border-color: var(--orange); }
.provider-login-error {
  background: rgba(220,38,38,0.08); color: #dc2626;
  border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px;
}
.provider-login-success {
  background: rgba(5,150,105,0.08); color: #059669;
  border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px;
}
.provider-login-submit { width: 100%; justify-content: center; margin-top: 4px; }

/* Provider / Mover toggle */
.login-type-toggle {
  display: flex; background: var(--surface-soft, #f1f5f9); border-radius: 10px;
  padding: 4px; margin-bottom: 20px; gap: 4px;
}
.login-type-btn {
  flex: 1; background: none; border: none; cursor: pointer;
  padding: 9px 10px; border-radius: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--muted);
  transition: background var(--trans-fast), color var(--trans-fast);
}
.login-type-btn.active { background: #fff; color: var(--ink, #1e293b); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* Mobile nav toggle */
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px;
}
.nav-hamburger span {
  display: block; height: 2px; background: var(--text); border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease, background 0.3s ease;
}
.nav-hamburger.open span { background: var(--text); }
.nav-hamburger span:nth-child(1) { width: 24px; }
.nav-hamburger span:nth-child(2) { width: 18px; }
.nav-hamburger span:nth-child(3) { width: 22px; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 24px; }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 24px; }

/* Mobile menu drawer */
.mobile-menu-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: var(--mobile-bg);
  backdrop-filter: blur(24px);
  display: flex; flex-direction: column;
  padding: 100px 5% 40px;
  opacity: 0; pointer-events: none;
  transform: translateX(100%);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.mobile-menu-overlay.open { opacity: 1; pointer-events: auto; transform: none; }
.mobile-menu-overlay nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mobile-nav-link {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--orange); text-decoration: none;
  font-size: 22px; font-weight: 600; padding: 14px 0;
  border-bottom: 1px solid var(--border);
  transition: color var(--trans-fast);
}
.mobile-nav-link:hover { color: var(--orange-d); }
/* Dynamic wp_nav_menu() output in the mobile drawer. */
.mobile-menu-overlay nav li { list-style: none; }
.mobile-menu-overlay nav li > a {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--orange); text-decoration: none;
  font-size: 22px; font-weight: 600; padding: 14px 0;
  border-bottom: 1px solid var(--border);
  transition: color var(--trans-fast);
}
.mobile-menu-overlay nav li > a:hover { color: var(--orange-d); }
.mobile-menu-overlay nav li > a svg { flex-shrink: 0; }

/* Submenus (depth 2) — collapsed by default, expanded via the JS-injected
   .mobile-submenu-toggle button (main.js), not the item's own link, so
   tapping the label still navigates normally instead of only expanding. */
.mobile-menu-overlay nav li.menu-item-has-children { position: relative; }
.mobile-menu-overlay nav li.menu-item-has-children > a { padding-right: 40px; }
.mobile-submenu-toggle {
  position: absolute; top: 6px; right: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--orange); cursor: pointer;
}
.mobile-submenu-toggle svg { transition: transform 0.25s ease; }
.mobile-menu-overlay nav li.mobile-submenu-open > .mobile-submenu-toggle svg { transform: rotate(180deg); }
.mobile-menu-overlay nav .sub-menu {
  list-style: none; margin: 0; padding: 0 0 0 16px;
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
}
.mobile-menu-overlay nav li.mobile-submenu-open > .sub-menu { max-height: 600px; }
.mobile-menu-overlay nav .sub-menu li > a {
  font-size: 17px; font-weight: 500; padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.mobile-menu-cta { display: flex; justify-content: center; margin-top: 28px; }
.mobile-menu-cta .btn-primary { width: 100%; max-width: 320px; justify-content: center; padding: 16px 28px; }
.mobile-menu-footer { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.mobile-menu-footer a { color: var(--muted); font-size: 14px; text-decoration: none; }

/* ══ HERO ════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 190px 0 80px;
  overflow: hidden;
}

/* Background video / image area — a white wash over the photo (rather than
   the dark one this used to have) so hero copy reads in dark text and the
   overall impression stays light/white, per the client's request that the
   whole site read as white, not black. Same fade structure as before (heavy
   near the text at bottom/left, fading out toward the photo at top/right),
   just inverted from near-black to near-white. */
.hero-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 60%, rgba(255,255,255,0.98) 100%),
    linear-gradient(to right, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.55) 60%, rgba(255,255,255,0.15) 100%),
    var(--hero-img) center/cover no-repeat;
  transition: background-image 0.4s ease;
}

/* Animated grid */
.hero-grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,89,35,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,89,35,0.03) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.4) 70%, transparent 100%);
  pointer-events: none; z-index: 1;
}

/* Floating particles */
.hero-particles { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.h-particle {
  position: absolute; border-radius: 50%;
  background: var(--orange); opacity: 0;
  animation: float-particle linear infinite;
}
@keyframes float-particle {
  0%   { opacity: 0; transform: translateY(110vh) scale(0); }
  8%   { opacity: 0.6; }
  88%  { opacity: 0.2; }
  100% { opacity: 0; transform: translateY(-8vh) scale(1.8); }
}

.hero-content { position: relative; z-index: 3; }
.hero-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: flex-start;
}

/* Hero entrance — pure CSS, no JS dependency. This used to be a GSAP timeline
   in main.js that set every one of these elements to opacity:0 the moment it
   ran, then animated them in — but that JS only executes after a long serial
   chain (jQuery, jQuery-migrate, Elementor's own scripts, GSAP, ScrollTrigger,
   SplitText, split-type, then main.js itself), which measured ~3.3s on this
   site. Since the H1 here is the page's LCP element, hiding it until that
   entire external script chain finished was directly responsible for a
   ~2,950ms "Element render delay" in PageSpeed's LCP breakdown. A plain CSS
   @keyframes animation runs the instant the stylesheet parses — no waiting on
   any script — so the hero is visible almost immediately, with the same
   staggered fade-up look preserved. Below-the-fold scroll-triggered
   animations (ScrollTrigger, SplitType word/line reveals, the phone showcase)
   are untouched — those were never blocking initial paint, only this
   above-the-fold entrance was. */
@keyframes mm-hero-in {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
#heroPill, #heroH1, #heroSub, #heroActions, #heroTrust, #heroForm {
  animation: mm-hero-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#heroPill  { animation-delay: 0.1s; }
#heroH1    { animation-delay: 0.2s; }
#heroSub   { animation-delay: 0.3s; }
#heroActions { animation-delay: 0.4s; }
#heroTrust { animation-delay: 0.5s; }
#heroForm  { animation-delay: 0.25s; }

/* Hero left */
.hero-pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,89,35,0.10);
  border: 1px solid rgba(255,89,35,0.30);
  border-radius: 100px; padding: 7px 18px;
  font-size: 11.5px; font-weight: 700; color: var(--orange);
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 24px;
}
.hero-pill-dot { width: 6px; height: 6px; background: var(--orange); border-radius: 50%; animation: pulse-d 2.2s ease-in-out infinite; }
@keyframes pulse-d { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)} }

.hero-h1 {
  font-size: clamp(48px, 6.5vw, 88px);
  font-weight: 800; line-height: 1.02; letter-spacing: -2.5px;
  color: var(--text); margin-bottom: 22px;
}
.hero-h1 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--orange); }

.hero-sub {
  font-size: 17px; color: #000000;
  line-height: 1.75; max-width: 480px; margin-bottom: 40px;
}
.hero-sub strong { color: var(--orange); font-weight: 600; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 52px; }

.hero-trust {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.trust-avatars { display: flex; }
.trust-avatars span {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), #8b3500);
  border: 2px solid var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
  margin-right: -10px; flex-shrink: 0;
}
.trust-text strong { display: block; font-size: 14px; color: var(--text); font-weight: 700; }
.trust-text span { font-size: 12.5px; color: var(--muted); }

/* Hero right — quote form card */
.hero-form-wrap {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(28px);
  border: 1px solid rgba(255,89,35,0.20);
  border-radius: 22px;
  padding: 38px 36px;
  box-shadow: 0 32px 80px rgba(13,10,5,0.12);
  position: relative;
}
.hero-form-wrap::before {
  content: '';
  position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,89,35,0.4), transparent);
}
.form-title { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 5px; }
.form-sub { font-size: 13.5px; color: var(--muted); margin-bottom: 26px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 0; }
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--muted); margin-bottom: 6px;
}
.form-group input, .form-group select {
  width: 100%; padding: 12px 15px;
  background: var(--surface-soft);
  border: 1.5px solid var(--stroke-soft);
  border-radius: 10px; color: var(--text);
  font-family: 'Outfit', sans-serif; font-size: 14.5px;
  outline: none; -webkit-appearance: none;
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}
.form-group input::placeholder { color: var(--muted); }
.form-group input:focus, .form-group select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,89,35,0.14);
}
.form-group select option { background: var(--white); color: var(--text); }
.form-submit {
  width: 100%; justify-content: center;
  font-size: 15.5px; padding: 15px; border-radius: 10px; margin-top: 4px;
}
.form-note { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 11px; }
.form-services {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px;
}
.service-chip {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px; border-radius: 10px;
  background: var(--surface-soft); border: 1.5px solid var(--border);
  cursor: pointer; transition: border-color var(--trans-fast), background var(--trans-fast);
  text-align: center;
}
.service-chip:hover, .service-chip.active {
  border-color: rgba(255,89,35,0.45); background: rgba(255,89,35,0.07);
}
.service-chip svg { width: 18px; height: 18px; color: var(--orange); }
.service-chip span { font-size: 10.5px; font-weight: 600; color: var(--text); line-height: 1.3; }

/* ══ GOOGLE REVIEWS TRACK ══════════════════════════════════════ */
.partners-section {
  background: var(--bg-surface); padding: 44px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden;
}
.partners-label {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center; font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 28px;
}
.partners-label .review-stars-inline { color: var(--orange); letter-spacing: 1px; font-size: 13px; }
.track-outer {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.logo-track {
  display: flex; align-items: center; width: max-content;
  animation: scroll-logos 30s linear infinite;
}
.logo-track:hover { animation-play-state: paused; }
@keyframes scroll-logos { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.review-track { align-items: flex-start; animation-duration: 75s; }
.review-item {
  display: flex; flex-direction: column; gap: 10px;
  width: 300px; flex-shrink: 0; padding: 0 28px;
  border-right: 1px solid var(--border);
}
.review-item:last-child { border-right: none; }
.review-item .review-stars span { color: var(--orange); font-size: 13px; letter-spacing: 1px; }
.review-quote { font-size: 13.5px; color: var(--text-soft); line-height: 1.62; font-style: italic; }
.review-author { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.2px; }
.reviews-cta {
  display: block; text-align: center; margin-top: 30px;
  font-size: 13px; font-weight: 700; color: var(--orange); text-decoration: none;
}
.reviews-cta:hover { text-decoration: underline; }

/* ══ HOW IT WORKS ════════════════════════════════════════════ */
.how-section { padding: 110px 0; position: relative; background: var(--bg); }
.how-head { text-align: center; margin-bottom: 72px; }
.section-h2 {
font-family:Outfit !important;
  font-size: clamp(32px, 4.2vw, 54px);
  font-weight: 700; line-height: 1.1; letter-spacing: -1.5px;
  color: var(--text); margin-bottom: 16px;
}
.section-h2 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--orange); }
.section-p { font-size: 16.5px; color: var(--muted); line-height: 1.75; max-width: 500px; margin: 0 auto; }

.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.steps-grid::before {
  content: '';
  position: absolute; top: 42px; left: 12.5%; right: 12.5%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,89,35,0.3), rgba(255,89,35,0.3), transparent);
  pointer-events: none;
}

.step-card { padding: 0 20px; text-align: center; position: relative; z-index: 1; }
.step-num {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--orange); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900; margin: 0 auto 24px;
  font-family: 'Instrument Serif', serif;
  box-shadow: 0 0 0 8px var(--bg), 0 0 0 9px rgba(255,89,35,0.2);
  transition: transform var(--trans), box-shadow var(--trans);
}
.step-card:hover .step-num {
  transform: scale(1.08);
  box-shadow: 0 0 0 8px var(--bg), 0 0 0 12px rgba(255,89,35,0.35);
}
.step-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.step-desc { font-size: 13.5px; color: var(--muted); line-height: 1.72; }

/* ══ SERVICES ════════════════════════════════════════════════ */
.services-section { padding: 110px 0; background: var(--bg-surface); }
.services-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 54px; gap: 24px; flex-wrap: wrap; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.svc-card {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans);
  cursor: default; position: relative;
}
.svc-card:hover {
  border-color: var(--border-o);
  transform: translateY(-7px);
  box-shadow: 0 20px 50px rgba(255,89,35,0.10);
}
.svc-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; transition: transform 0.55s ease; }
.svc-card:hover .svc-card-img { transform: scale(1.06); }
.svc-img-wrap { overflow: hidden; position: relative; }
.svc-img-wrap::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(to top, var(--bg-card), transparent); pointer-events: none;
}
.svc-body { padding: 20px 22px 24px; }
.svc-tag { font-size: 9.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; display: block; }
.svc-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.svc-desc { font-size: 13.5px; color: var(--muted); line-height: 1.7; margin-bottom: 16px; }
.svc-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--orange); text-decoration: none;
  transition: gap var(--trans-fast);
}
.svc-link:hover { gap: 10px; }
.svc-link svg { width: 14px; height: 14px; }

/* ══ TRUST CAROUSEL ══════════════════════════════════════════
   Desktop: GSAP ScrollTrigger pins this section and translates .trust-carousel-track
   horizontally in lock-step with vertical scroll — scrolling down slides the cards
   right-to-left, scrolling back up reverses it left-to-right (see main.js). Mobile skips
   the pin/scroll-jack entirely (small-viewport pinned scrolling is more often janky than
   nice) and just lets the track scroll natively via touch, like an ordinary swipeable row. */
.trust-carousel { background: var(--bg-deep); padding: 80px 0 0; overflow: hidden; }
.trust-carousel-head { text-align: center; margin-bottom: 48px; padding: 0 5%; }
.trust-carousel-head .eyebrow { justify-content: center; }
.trust-carousel-viewport { overflow: hidden; padding-bottom: 90px; }
.trust-carousel-track { display: flex; gap: 24px; width: max-content; padding: 4px 5% 4px; }
.trust-card {
  flex: 0 0 auto; width: 270px; box-sizing: border-box;
  background: var(--surface-soft); border: 1px solid var(--border-strong);
  border-radius: 20px; padding: 28px 26px;
}
.trust-card-icon {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  background: var(--orange-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.trust-card-icon svg { width: 23px; height: 23px; color: var(--orange); }
.trust-card-label { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.trust-card-value { font-size: 30px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; margin-bottom: 6px; }
.trust-card-sub { font-size: 13px; color: var(--muted); }
@media (max-width: 768px) {
  .trust-carousel-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 40px; }
  .trust-card { width: 220px; padding: 24px 22px; }
}

/* ══ STATS BAND ══════════════════════════════════════════════ */
.stats-section {
  background: var(--bg-deep); padding: 80px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.stats-section::after {
  content: ''; position: absolute; width: 600px; height: 600px;
  right: -200px; top: 50%; transform: translateY(-50%);
  background: radial-gradient(circle, rgba(255,89,35,0.06), transparent 65%);
  pointer-events: none;
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-item {
  text-align: center; padding: 28px;
  border-right: 1px solid var(--border);
}
.stat-item:last-child { border-right: none; }
.stat-num {
  display: block; font-family: 'Instrument Serif', serif;
  font-size: clamp(42px, 5vw, 62px); color: var(--orange);
  line-height: 1; letter-spacing: -2px; margin-bottom: 8px;
}
.stat-label { font-size: 13px; color: var(--muted); font-weight: 500; }

/* ══ WHY CHOOSE ══════════════════════════════════════════════ */
.why-section { padding: 110px 0; background: var(--bg); }
.why-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }

.why-image-wrap {
  position: relative; border-radius: 20px; overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}
.why-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.why-image-wrap:hover img { transform: scale(1.04); }
.why-image-wrap::before, .why-image-wrap::after {
  content: ''; position: absolute; width: 52px; height: 52px; border: 2.5px solid var(--orange); z-index: 2;
}
.why-image-wrap::before { top: -2px; right: -2px; border-radius: 0 20px 0 0; border-left: none; border-bottom: none; }
.why-image-wrap::after  { bottom: -2px; left: -2px; border-radius: 0 0 0 20px; border-right: none; border-top: none; }

.why-points { display: flex; flex-direction: column; gap: 18px; margin-top: 30px; }
.why-point { display: flex; gap: 14px; align-items: flex-start; }
.why-bullet {
  width: 28px; height: 28px; background: var(--orange); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;
}
.why-bullet svg { width: 13px; height: 13px; color: #fff; }
.why-point-title { font-size: 15.5px; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.why-point-desc { font-size: 13.5px; color: var(--text); line-height: 1.65; }

/* ══ TESTIMONIALS ════════════════════════════════════════════ */
.test-section { padding: 110px 0; background: var(--bg-surface); }
.test-head { text-align: center; margin-bottom: 60px; }
.test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.test-card {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 34px 28px;
  transition: border-color var(--trans), transform var(--trans);
}
.test-card:hover { border-color: var(--border-o); transform: translateY(-5px); }
.test-stars { display: flex; gap: 3px; margin-bottom: 16px; }
.test-stars span { font-size: 16px; color: var(--orange); }
.test-text { font-size: 15px; color: var(--text-soft); line-height: 1.78; margin-bottom: 22px; font-style: italic; }
.test-author { display: flex; align-items: center; gap: 12px; }
.test-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), #5a1800);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff; flex-shrink: 0;
  border: 2px solid rgba(255,89,35,0.3);
}
.test-name { font-size: 14.5px; font-weight: 700; color: var(--text); }
.test-role { font-size: 12px; color: var(--orange); }

/* ══ MARQUEE ══════════════════════════════════════════════════ */
.marquee-section {
  overflow: hidden; padding: 56px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
}
.marquee-track {
  display: inline-block; white-space: nowrap;
  animation: marquee-scroll 22s linear infinite;
  font-size: 56px; font-weight: 800;
  color: transparent; -webkit-text-stroke: 1px var(--orange);
}
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track .fill { color: var(--text); -webkit-text-stroke: 0; }
.marquee-track .col { color: var(--orange); -webkit-text-stroke: 0; font-family: 'Instrument Serif', serif; font-style: italic; }
.marquee-track span { margin-right: 40px; }

/* ══ CTA SECTION ══════════════════════════════════════════════ */
.cta-section {
  position: relative; padding: 110px 0; overflow: hidden;
  background: linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-deep-2) 50%, var(--bg-deep) 100%);
  text-align: center;
}
.cta-section::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,89,35,0.4), transparent);
}
.cta-section::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,89,35,0.4), transparent);
}
.cta-glow {
  position: absolute; width: 700px; height: 700px;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,89,35,0.10) 0%, transparent 65%);
  pointer-events: none;
}
.cta-rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.cta-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,89,35,0.07); }
.cta-ring-1 { width: 380px; height: 380px; }
.cta-ring-2 { width: 580px; height: 580px; border-color: rgba(255,89,35,0.04); }
.cta-ring-3 { width: 800px; height: 800px; border-color: rgba(255,89,35,0.025); }
.cta-content { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 42px; }

/* ══ CONTACT CHIPS ════════════════════════════════════════════ */
.contact-chips { display: flex; justify-content: center; gap: 20px; margin-top: 36px; flex-wrap: wrap; }
.contact-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: 100px;
  background: var(--surface-soft); border: 1px solid var(--border);
  color: var(--text-soft); font-size: 13.5px; font-weight: 600;
  text-decoration: none;
  transition: border-color var(--trans-fast), color var(--trans-fast), background var(--trans-fast);
}
.contact-chip:hover { border-color: var(--border-o); color: var(--orange); background: rgba(255,89,35,0.06); }
.contact-chip svg { width: 15px; height: 15px; }

/* ══ FOOTER ══════════════════════════════════════════════════ */
.mm-footer { background: var(--bg-deep); padding: 80px 0 0; border-top: 1px solid var(--border); }
.footer-top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 60px; border-bottom: 1px solid var(--border);
}
.footer-logo { display: block; }
.footer-logo .custom-logo-link { display: inline-block; }
.footer-logo img,
.footer-logo .custom-logo {
  height: 50px;
  max-height: 50px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}
.footer-brand h3 { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 14px; }
.footer-brand p { font-size: 13px; color: var(--muted); line-height: 1.75; margin: 20px 0; max-width:340px;}
.footer-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; border-radius: 100px;
  background: rgba(255,89,35,0.12); border: 1px solid rgba(255,89,35,0.28);
  color: var(--orange); font-size: 12.5px; font-weight: 700;
}
.footer-col h4 { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: 1.4px !important; text-transform: uppercase; margin-bottom: 20px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col ul li a { color: var(--text); text-decoration: none; font-size: 12px; transition: color var(--trans-fast); }
.footer-col ul li a:hover { color: var(--orange); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 0; flex-wrap: wrap; gap: 12px;
}
.footer-bottom p { font-size: 13px; color: var(--muted); }
.footer-socials { display: flex; gap: 12px; }
.footer-social-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-soft); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); text-decoration: none;
  transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast);
}
.footer-social-btn:hover { background: rgba(255,89,35,0.12); color: var(--orange); border-color: var(--border-o); }
.footer-social-btn svg { width: 16px; height: 16px; }

/* ══ DIRECTORY PAGE OVERRIDES ══════════════════════════════════ */
.mmd-filters select, .mmd-filters input[type=text] {
  outline: 1px solid #e2e8f0;
  border: none;
  border-right: 10px solid transparent !important;
}
.mmd-directory {
  margin-top: 50px !important;
}

/* ══ RESPONSIVE ══════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .hero-form-wrap { max-width: 540px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-inner { grid-template-columns: 1fr; gap: 44px; }
  .test-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .steps-grid::before { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 768px) {
  nav.main-nav { display: none; }
  .header-actions { gap: 10px; }
  .header-actions .btn-ghost, .header-actions .header-cta, .header-login-link { display: none; }
  .nav-hamburger { display: flex; }
  .header-topbar-inner > a, .header-topbar-inner > .topbar-sep { display: none; }
  .header-topbar-inner > .topbar-socials { display: flex; }
  .header-main { padding: 14px 5%; }
  .header-logo img, .header-logo .custom-logo { height: 50px; max-height: 50px; }
  .hero { padding-top: 160px; }
  .hero-pill { font-size: 10.5px; padding: 6px 14px; margin-bottom: 18px; }
  .hero-h1 { font-size: 42px; letter-spacing: -1.5px; }
  .hero-form-wrap { padding: 26px 20px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-services { grid-template-columns: repeat(3, 1fr); }
  .services-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item { border-right: none; border-bottom: 1px solid var(--border); }
  .stat-item:nth-child(2n) { border-bottom: 1px solid var(--border); }
  .stat-item:nth-last-child(-n+2) { border-bottom: none; }
  .cta-btns { flex-direction: column; align-items: center; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  .steps-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-trust { flex-direction: column; align-items: flex-start; }
  .marquee-track { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* .js-ready .rv (0,2,0) now outranks a bare .rv override (0,1,0) — matches its specificity here so
     reduced-motion still reliably wins regardless of source order. */
  .rv, .js-ready .rv { opacity: 1; transform: none; }
}


/* ══ ELEMENTOR COMPATIBILITY RESET ═══════════════════════════
   Removes default width/margin constraints so this theme's
   full-bleed sections render edge-to-edge inside the page content
   area that Elementor (or the raw fallback content) renders into. */
#mm-main, .elementor, .elementor-section-wrap {
  max-width: none;
  margin: 0;
  padding: 0;
}
/* .mm-header is position:fixed, so it's out of document flow and would sit
   on top of the very first thing on the page. The front page compensates
   for this itself (.hero has 190px of top padding baked in), but every
   other template has no such spacing, so its content (breadcrumbs first)
   renders straight under the fixed header — reported as the breadcrumb
   trail overlapping the logo, since .mm-header has no background until
   .scrolled is added, so whatever's underneath it shows straight through.
   152px was sized for a single-line topbar, but .header-topbar-inner is
   flex-wrap:wrap (see ~line 222) and genuinely wraps to two lines at
   tablet/narrow-desktop widths (>768px, so it doesn't hit the mobile
   breakpoint's simplified topbar below) — a generous fixed buffer instead
   of a knife-edge measurement, since header height isn't perfectly
   constant. Push it down everywhere except the hero page. */
body:not(.mm-has-hero) #mm-main {
  padding-top: 190px;
}
@media (max-width: 768px) {
  body:not(.mm-has-hero) #mm-main {
    padding-top: 150px;
  }
}

/* ══ ELEMENTOR — FORCE THEME UI ══════════════════════════════════
   Elementor ships its own default typography/color/button styling per widget, independent of
   whatever the active theme looks like — this reskins the common structural widgets (headings, body
   text, buttons, images) to the theme's own tokens, so Elementor-built pages read as part of this
   site rather than a visually distinct page-builder layer bolted on top.

   Deliberately typography/color/decorative only — NOT touching layout-affecting properties (width,
   flex-basis, grid-template, margin/padding sizing that controls spacing between elements), and
   deliberately no changes to #mm-main or body's own position/stacking — both of those categories are
   exactly what caused a real sitewide breakage the one time this scope was exceeded (a position:relative
   added to #mm-main for an unrelated feature hijacked the containing block for other absolutely-positioned
   content across every page). !important is necessary throughout: Elementor's own CSS is per-page/
   globally generated with its own specificity and load order, which this can't reliably out-rank otherwise.

   First pass covering the widget types actually in use (heading, text-editor, button, image) — a
   widget type not covered here (forms, tabs, accordions, sliders, testimonials, price tables, icon
   boxes, etc.) will still show Elementor's own default look until a matching block is added here. */
.elementor-heading-title,
.elementor-widget-text-editor,
.elementor-text-editor,
.elementor-button,
.elementor-button-text {
  font-family: 'Outfit', sans-serif !important;
}
.elementor-heading-title {
  color: var(--text) !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
}
.elementor-widget-text-editor,
.elementor-text-editor,
.elementor-widget-text-editor p,
.elementor-text-editor p {
  color: var(--muted) !important;
  line-height: 1.75 !important;
}
.elementor-widget-text-editor a,
.elementor-text-editor a {
  color: var(--orange) !important;
}
.elementor-widget-text-editor a:hover,
.elementor-text-editor a:hover {
  color: var(--orange-d) !important;
}

/* Buttons — reskin to the theme's own pill-shaped .btn-primary look regardless of whichever
   Elementor button skin (link/default) was picked when the page was built. */
.elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  background: var(--orange) !important;
  color: #fff !important;
  padding: 14px 28px !important;
  border-radius: 100px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 4px 28px var(--orange-glow) !important;
  transition: background var(--trans), transform var(--trans), box-shadow var(--trans) !important;
}
.elementor-button:hover {
  background: var(--orange-d) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 36px rgba(255,89,35,0.42) !important;
}
.elementor-button-link.elementor-button {
  background: transparent !important;
  color: var(--text) !important;
  border: 1.5px solid var(--border-strong) !important;
  box-shadow: none !important;
}
.elementor-button-link.elementor-button:hover {
  border-color: rgba(255,89,35,0.45) !important;
  background: rgba(255,89,35,0.06) !important;
  color: var(--text) !important;
}

/* Images — the theme's own soft-rounded, gently-shadowed look instead of Elementor's sharp corners. */
.elementor-widget-image img {
  border-radius: var(--radius-md) !important;
}

/* Containers/sections — background left alone (a deliberately colored section is a real content
   choice, not a mismatch to correct), but text inside inherits the theme's palette rather than
   whatever Elementor's global colors default to. */
.elementor-section,
.elementor-container,
.e-con {
  color: var(--text);
}

/* "Icon box" columns — image + heading + text-editor stacked in one column, the classic 3-across
   feature layout ("Easily Connect with Local Movers" etc.) — reskinned into a proper modern card
   (soft shadow, rounded corners, generous padding, gentle hover lift) instead of sitting bare on the
   page background. :has() scopes this to columns that actually match that pattern, rather than every
   Elementor column sitewide (which would just as easily catch layouts this treatment was never meant
   for) — supported in every current major browser. Any column NOT auto-matched can still get the
   same look by adding "mm-feature-card" as a CSS Class on it in Elementor's Advanced panel. */
.elementor-top-column:has(> .elementor-widget-wrap > .elementor-widget-image):has(> .elementor-widget-wrap > .elementor-widget-heading):has(> .elementor-widget-wrap > .elementor-widget-text-editor) > .elementor-widget-wrap,
.mm-feature-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 40px 32px !important;
  box-shadow: 0 12px 32px -18px rgba(23,20,15,0.14) !important;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans) !important;
}
.elementor-top-column:has(> .elementor-widget-wrap > .elementor-widget-image):has(> .elementor-widget-wrap > .elementor-widget-heading):has(> .elementor-widget-wrap > .elementor-widget-text-editor) > .elementor-widget-wrap:hover,
.mm-feature-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 22px 44px -20px rgba(23,20,15,0.2) !important;
  border-color: var(--border-o) !important;
}

/* ══ LOCATION PAGES ══════════════════════════════════════════════ */
.mm-loc-hero { padding: 20px 0 50px; }
.mm-loc-intro { max-width: 68ch; color: var(--muted); font-size: 16px; line-height: 1.75; }
.mm-loc-intro p { margin-bottom: 14px; }

.mm-loc-form-section { padding: 50px 0; background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.mm-loc-form-iframe {
  display: block; width: 100%; max-width: 640px; margin: 30px auto 0;
  height: 900px; border: none; border-radius: var(--radius-lg);
}
@media (max-width: 600px) { .mm-loc-form-iframe { height: 1050px; } }

.mm-loc-towns { padding: 50px 0; }
.mm-loc-towns h3 { font-size: 20px; font-weight: 700; margin-bottom: 18px; }
.mm-loc-towns-list { display: flex; flex-wrap: wrap; gap: 10px; }
.mm-loc-town-chip {
  font-size: 13px; font-weight: 600; color: var(--text-soft);
  background: var(--surface-soft); border: 1px solid var(--border);
  border-radius: 100px; padding: 8px 16px;
}

.mm-loc-faqs { padding: 50px 0; background: var(--bg-surface); border-top: 1px solid var(--border); }
.mm-loc-faq-list { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }
.mm-loc-faq-item {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 4px 22px;
}
.mm-loc-faq-item summary {
  padding: 16px 0; font-weight: 700; font-size: 15px; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.mm-loc-faq-item summary::-webkit-details-marker { display: none; }
.mm-loc-faq-item summary::after {
  content: '+'; font-size: 20px; color: var(--orange); flex-shrink: 0; transition: transform var(--trans-fast);
}
.mm-loc-faq-item[open] summary::after { transform: rotate(45deg); }
.mm-loc-faq-item p { color: var(--muted); font-size: 14px; line-height: 1.7; padding-bottom: 18px; margin: 0; }

.mm-loc-links { padding: 50px 0 70px; }
.mm-loc-links-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; }
.mm-loc-links h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 14px; }
.mm-loc-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mm-loc-links a { color: var(--text); text-decoration: none; font-size: 14.5px; font-weight: 600; }
.mm-loc-links a:hover { color: var(--orange); }

/* ══ BREADCRUMBS ═══════════════════════════════════════════════ */
.mm-breadcrumbs { padding: 22px 0 4px; }
.mm-breadcrumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0;
  font-size: 12.5px; color: var(--muted);
}
.mm-breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.mm-breadcrumbs li:not(:last-child)::after {
  content: '/'; color: var(--border-strong); margin-left: 6px;
}
.mm-breadcrumbs a { color: var(--muted); text-decoration: none; transition: color var(--trans-fast); }
.mm-breadcrumbs a:hover { color: var(--orange); }
.mm-breadcrumbs li[aria-current="page"] { color: var(--text); font-weight: 600; }

/* Brand-new, fully self-contained elements — deliberately not touching #mm-main/body/.wrap's own CSS.
   .wrap (their shared parent, from the breadcrumb call) already has position:relative from its own
   rule, so these just use that existing context rather than creating a new one.

   Every single one below uses a NEGATIVE z-index. That's not optional: these divs are descendants of
   .wrap, which is what they're judged against for stacking (not body) — and per the CSS
   painting-order spec, a positioned element with z-index 0 or auto always paints ABOVE its stacking
   context's own normal, non-positioned content, no matter what order it appears in the DOM. Only a
   negative z-index paints below it. Getting this wrong on one of these once (z-index:0 instead of -1)
   is exactly what made a watermark bleed through/over a real content card instead of sitting behind
   it — every mark here is negative for that reason, deliberately, not by accident. */
.mm-page-watermark, .mm-page-watermark-side {
  font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; line-height: 1;
  color: var(--watermark); white-space: nowrap; pointer-events: none;
}

/* right: calc(50% - 50vw) is the standard trick for breaking a child out to the true viewport edge
   from inside a horizontally-centered, max-width container (.wrap here) — a plain right:0 would only
   reach .wrap's own edge, which sits well short of the actual browser window edge on any screen wider
   than .wrap's max-width. */
.mm-page-watermark {
  position: absolute; z-index: -1; top: -14px; right: calc(50% - 50vw); left: calc(50% - 50vw);
  height: 260px; overflow: hidden;
}
.mm-page-watermark::before {
  content: 'Magnet';
  position: absolute; top: -0.18em; right: 0;
  font-size: clamp(90px, 11vw, 190px);
}
.mm-page-watermark::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(var(--stroke-soft) 1.2px, transparent 1.2px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(60% 100% at 100% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(60% 100% at 100% 0%, #000 0%, transparent 75%);
}

/* Same mechanism as "Magnet" above now — position:absolute inside .wrap, scrolling away with the page
   rather than staying pinned to the viewport. Sits a bit further down than "Magnet" (which is right
   at the top) purely so the two don't overlap each other on initial load, touching the left edge via
   the same calc(50% - 50vw) full-bleed trick. */
.mm-page-watermark-side {
  position: absolute; z-index: -1; top: 260px; left: calc(50% - 50vw);
  font-size: clamp(80px, 10vw, 170px);
}

@media (max-width: 640px) {
  .mm-page-watermark, .mm-page-watermark-side { display: none; }
}

/* ══ WOOCOMMERCE (moving-boxes shop) ═══════════════════════════════
   Restyles WooCommerce's default markup to match this theme's own design language rather than
   its stock purple/blue look — colors, radii, and card treatment all reuse the same custom
   properties as the rest of the site (see :root, near the top of this file). The page chrome
   itself (header/footer/#mm-main wrapper/breadcrumbs) comes from mm_woocommerce_wrapper_start()/
   mm_woocommerce_breadcrumb() in functions.php, not from anything here — this section is purely
   visual styling for WooCommerce's own template output.
   functions.php also dequeues WooCommerce's bundled "layout" stylesheet (its own float/percentage
   grid on ul.products li.product, which was fighting the grid below and squashing cards into thin
   columns) — the !important flags below are a belt-and-suspenders safety net in case a caching
   layer ever serves that stylesheet again, not the primary fix. */
.woocommerce { padding: 24px 0 80px; }
.woocommerce .page-title { font-size: 34px; font-weight: 800; color: var(--text); margin: 0 0 32px; letter-spacing: -0.5px; }

/* Shop archive layout — product grid + filter sidebar as two real columns. See sidebar-shop.php
   and mm_woocommerce_wrapper_end() in functions.php for how the sidebar lands here specifically
   (manually, mid-layout) rather than wherever WooCommerce's own hook would otherwise place it. */
.mm-shop-layout { display: grid; grid-template-columns: 1fr 260px; gap: 40px; align-items: start; }
.mm-shop-main { min-width: 0; }
@media (max-width: 900px) {
  .mm-shop-layout { grid-template-columns: 1fr; }
  .mm-shop-sidebar { order: 2; }
}
/* Custom filter panel (Category/Size pills, Price/Weight dual-range sliders) — see
   mm_render_shop_filters() in functions.php. Sticky so filters stay reachable while scrolling a
   long result grid. */
.mm-shop-filters {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px; position: sticky; top: 100px;
}
.mm-filter-group { margin-bottom: 28px; }
.mm-filter-group:last-child { margin-bottom: 0; }
.mm-filter-title { font-size: 12px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 14px; }

.mm-filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-filter-pill {
  padding: 8px 14px; border-radius: 100px; border: 1.5px solid var(--border); background: var(--bg-card);
  font-size: 12.5px; font-weight: 600; color: var(--text-soft); cursor: pointer; transition: all var(--trans-fast);
}
.mm-filter-pill:hover { border-color: var(--orange); color: var(--orange); }
.mm-filter-pill.active { background: var(--orange); border-color: var(--orange); color: #fff; }
.mm-filter-pill-count { opacity: 0.7; font-weight: 500; }
.mm-filter-pill.active .mm-filter-pill-count { opacity: 0.85; }

/* Price/weight distribution bars behind the slider — purely decorative, computed server-side in
   mm_theme_price_histogram(). */
.mm-filter-histogram { display: flex; align-items: flex-end; gap: 3px; height: 36px; margin-bottom: 6px; }
.mm-filter-histogram span { flex: 1; background: var(--surface-soft); border-radius: 2px 2px 0 0; min-height: 4px; }

/* Dual-handle range slider — two overlapping native <input type=range> elements sharing one visual
   track (the standard accessible pattern: free keyboard support, no hand-rolled drag math). Each
   input is fully transparent/track-less except its thumb, which is styled to look like a single
   handle on the custom track underneath. */
.mm-filter-slider { position: relative; height: 20px; margin: 6px 0 12px; }
.mm-filter-slider-track { position: absolute; top: 50%; left: 0; right: 0; height: 4px; margin-top: -2px; background: var(--border); border-radius: 4px; }
.mm-filter-slider-range { position: absolute; top: 0; height: 100%; background: var(--orange); border-radius: 4px; }
.mm-filter-range-native {
  position: absolute; top: 0; left: 0; width: 100%; height: 20px; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
}
.mm-filter-range-native::-webkit-slider-runnable-track { -webkit-appearance: none; background: transparent; height: 20px; }
.mm-filter-range-native::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; margin-top: 1px;
  background: #fff; border: 2px solid var(--orange); border-radius: 50%; cursor: pointer;
  box-shadow: 0 2px 6px rgba(15,23,42,0.18);
}
.mm-filter-range-native::-moz-range-track { background: transparent; height: 20px; border: none; }
.mm-filter-range-native::-moz-range-thumb {
  pointer-events: auto; width: 18px; height: 18px; background: #fff; border: 2px solid var(--orange);
  border-radius: 50%; cursor: pointer; box-shadow: 0 2px 6px rgba(15,23,42,0.18);
}
.mm-filter-range-native:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255,89,34,0.2); }

.mm-filter-range-inputs { display: flex; align-items: center; gap: 10px; }
.mm-filter-range-field { flex: 1; }
.mm-filter-range-field label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.mm-filter-range-input {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
  font-size: 13px; font-family: inherit; text-align: center; box-sizing: border-box;
}
.mm-filter-range-input:focus { outline: none; border-color: var(--orange); }

/* Toolbar — live "active filters" chip bar (kept in sync by shop-filters.js) + the sort dropdown,
   replacing WooCommerce's own default result-count/ordering row (see mm_render_shop_toolbar()). */
.mm-shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.mm-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mm-active-filters-count { font-size: 13px; color: var(--muted); font-weight: 600; margin-right: 4px; }
.mm-filter-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 14px; border-radius: 100px;
  background: var(--surface-soft); border: 1px solid var(--border); color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.mm-filter-chip:hover { border-color: var(--orange); }
.mm-filter-chip span { color: var(--muted); font-size: 15px; line-height: 1; }
.mm-active-filters-clear { background: none; border: none; color: var(--orange); font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 6px 4px; }
.mm-shop-sort .woocommerce-ordering { margin: 0; }
.mm-shop-sort select {
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); font-size: 13px; font-family: inherit; background: var(--bg-card);
}

.mm-shop-main.mm-loading { opacity: 0.5; pointer-events: none; transition: opacity 0.2s ease; }
.mm-no-products { font-size: 14px; color: var(--muted); padding: 40px 0; }

/* Shop / archive product grid — a boutique catalogue feel: generous white space, a soft neutral
   stage behind every product photo (so even a placeholder image reads as "considered" rather than
   "broken"), and a quiet gold accent on ratings kept separate from the orange call-to-action color
   so the two signals (quality vs. "click here") don't blur together. */
.woocommerce ul.products {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 28px !important;
  list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.woocommerce ul.products li.product {
  width: auto !important; float: none !important; clear: none !important; margin: 0 !important;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px; text-align: left; transition: box-shadow var(--trans-fast), transform var(--trans-fast);
}
.woocommerce ul.products li.product:hover { box-shadow: 0 20px 44px rgba(15,23,42,0.09); transform: translateY(-4px); border-color: rgba(255,89,34,0.25); }
.woocommerce ul.products li.product a { text-decoration: none; color: inherit; }
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail {
  display: block; width: 100% !important; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
  background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px; box-sizing: border-box; margin: 0 0 16px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 15.5px; font-weight: 700; color: var(--text); margin: 0 0 8px; line-height: 1.4;
}
.woocommerce ul.products li.product .price {
  font-family: 'Instrument Serif', serif; font-style: italic; font-size: 20px; font-weight: 400; color: var(--orange);
}
.woocommerce ul.products li.product .price del { font-family: 'Inter', sans-serif; font-style: normal; color: var(--muted); font-weight: 500; font-size: 14px; opacity: 0.7; margin-right: 8px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .star-rating { font-size: 13px; margin: 6px 0 10px; color: rgba(13,10,5,0.14); }
.woocommerce ul.products li.product .star-rating span { color: #c9973c; }
/* Related products / upsells always render WooCommerce's fixed "columns" count (4 by default) —
   match that exactly instead of auto-fill, so a card count that doesn't evenly divide the row
   width never leaves a lone card stranded alone on its own row. */
.woocommerce .related ul.products, .woocommerce .upsells ul.products { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 700px) {
  .woocommerce .related ul.products, .woocommerce .upsells ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
.woocommerce span.onsale {
  background: var(--orange); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 6px; padding: 3px 9px; top: 14px; left: 14px; min-height: 0; min-width: 0; line-height: 1.6;
}

/* Buttons — add to cart, checkout, etc. all reuse the site's own .btn-primary look */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce-page a.button {
  background: var(--orange); color: #fff; border: none; border-radius: 100px;
  font-size: 13.5px; font-weight: 700; padding: 12px 24px;
  transition: background var(--trans-fast), transform var(--trans-fast), box-shadow var(--trans-fast);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--orange-d); color: #fff; box-shadow: 0 8px 20px rgba(255,89,34,0.28); transform: translateY(-1px);
}
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--orange); }
.woocommerce a.added_to_cart { color: var(--orange); font-weight: 700; font-size: 13px; margin-left: 10px; }

/* "Related products" / "You may also like" section headings — matches the .eyebrow treatment used
   for section labels everywhere else on the site, so the shop reads as native, not bolted-on. */
.woocommerce .related > h2, .woocommerce .upsells > h2 {
  font-size: 12px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: 2px;
  margin: 56px 0 24px; padding-top: 40px; border-top: 1px solid var(--border);
}

/* Single product page — two-column image/summary layout. WooCommerce's own bundled
   "woocommerce-layout" stylesheet used to provide this split (see the dequeue note up top); now
   that it's gone, this theme owns the layout instead. Anything besides the gallery/summary that
   WooCommerce adds as a direct child of div.product (tabs, related, upsells) spans both columns
   on its own row rather than getting squeezed into the two-column grid. */
.woocommerce div.product {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 44px; align-items: start;
}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .woocommerce div.product { grid-template-columns: 1fr; }
}
.woocommerce div.product .woocommerce-product-gallery {
  background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px; margin-bottom: 0; box-sizing: border-box;
}
.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--radius-md); }
.woocommerce div.product .product_title { font-size: 30px; font-weight: 800; color: var(--text); margin: 0 0 12px; letter-spacing: -0.3px; }
.woocommerce div.product p.price, .woocommerce div.product span.price {
  font-family: 'Instrument Serif', serif; font-style: italic; color: var(--orange); font-size: 26px; font-weight: 400;
}
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--text-soft); font-size: 15px; line-height: 1.75; margin: 18px 0; }
.woocommerce div.product form.cart { display: flex; align-items: center; gap: 14px; margin: 24px 0; flex-wrap: wrap; }
.woocommerce div.product .quantity .qty {
  width: 68px; padding: 12px 10px; border-radius: 10px; border: 1px solid var(--border);
  font-size: 14px; text-align: center;
}
.woocommerce .quantity .qty:focus { outline: none; border-color: var(--orange); }
.woocommerce div.product .product_meta { font-size: 12.5px; color: var(--muted); padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--border); }
.woocommerce div.product .product_meta a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 2px; }
.woocommerce div.product .woocommerce-tabs { margin-top: 48px; }
.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--border); list-style: none; padding: 0; margin: 0 0 24px; display: flex; gap: 28px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--muted); font-weight: 700; font-size: 13.5px; text-decoration: none; padding-bottom: 12px; display: inline-block; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--text); border-bottom: 2px solid var(--orange); }
.woocommerce div.product .woocommerce-tabs .panel { font-size: 14.5px; line-height: 1.8; color: var(--text-soft); }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 18px; font-weight: 800; color: var(--text); margin: 0 0 16px; }

/* Defensive: if a stray legacy/default widget (Pages, Archives, Categories, etc.) ever ends up
   rendered raw inside the WooCommerce content area — from a source outside this theme's own
   templates — hide it rather than let unstyled blue links spill out under the shop. Scoped to
   #mm-main so it can never touch the real footer widgets, which live in a different wrapper. */
#mm-main .widget_pages, #mm-main .widget_archive, #mm-main .widget_categories,
#mm-main .widget_meta, #mm-main .widget_recent_entries, #mm-main .widget_search { display: none !important; }

/* Cart & checkout tables */
.woocommerce table.shop_table {
  width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
}
.woocommerce table.shop_table th {
  background: var(--surface-soft); color: var(--text); font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; padding: 14px 16px; text-align: left;
}
.woocommerce table.shop_table td { padding: 16px; border-top: 1px solid var(--border); font-size: 14px; }
.woocommerce table.shop_table td.product-remove a { color: #dc2626; }
.woocommerce-cart table.cart img { border-radius: 8px; }
/* Cart totals box — same "column that used to come from woocommerce-layout.css" situation as the
   single-product gallery/summary split above: WooCommerce doesn't size or place this on its own. */
.woocommerce .cart-collaterals { display: flex; justify-content: flex-end; }
.woocommerce .cart-collaterals .cart_totals { width: 100%; max-width: 380px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; box-sizing: border-box; }
.woocommerce .cart_totals h2 { font-size: 18px; font-weight: 800; margin: 0 0 16px; }
.woocommerce .cart_totals .order-total .amount { color: var(--orange); font-weight: 800; }

/* Checkout form fields — same look as the login modal's inputs elsewhere in this file */
.woocommerce form .form-row label { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; display: block; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border);
  font-size: 14px; font-family: inherit;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row select:focus, .woocommerce form .form-row textarea:focus {
  outline: none; border-color: var(--orange);
}
/* Checkout's billing-details / order-review two-column split — another layout WooCommerce leaves
   entirely to the theme once woocommerce-layout.css is out of the picture. */
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 44px; }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: auto; float: none; }
@media (max-width: 860px) {
  .woocommerce-checkout .col2-set { grid-template-columns: 1fr; }
}
.woocommerce-checkout #payment { background: var(--surface-soft); border-radius: var(--radius-md); padding: 4px; }
.woocommerce-checkout #payment div.payment_box { background: var(--bg-card); border-radius: var(--radius-md); font-size: 13.5px; color: var(--muted); }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-radius: 10px !important; padding: 14px 18px !important; font-size: 13.5px !important;
  border-top: none !important; list-style: none !important;
}
.woocommerce-message { background: rgba(5,150,105,0.08) !important; color: #059669 !important; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none !important; }
.woocommerce-info { background: rgba(59,130,246,0.08) !important; color: #2563eb !important; }
.woocommerce-error { background: rgba(220,38,38,0.08) !important; color: #dc2626 !important; }
.woocommerce-message .button, .woocommerce-info .button { float: none !important; margin-left: 14px; }

/* My Account */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block; padding: 10px 14px; border-radius: 8px; color: var(--text-soft); text-decoration: none; font-size: 14px; font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--surface-soft); color: var(--orange); }

@media (max-width: 640px) {
  .woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 14px !important; }
  .woocommerce div.product form.cart { flex-direction: column; align-items: stretch; }
}

/* ══ FORMINATOR — Contact page form ═════════════════════════════════
   Restyles the Contact Us page's Forminator form (a third-party plugin, own generated markup —
   .forminator-ui/.forminator-custom-form/.forminator-row/.forminator-col/.forminator-field/etc.)
   to match this theme's own design language instead of Forminator's stock look, same pattern as
   the Elementor override above: typography, color, spacing and the submit button only — nothing
   that would touch Forminator's own layout/JS-driven structure (the intl-tel-input country-code
   picker on the phone field keeps its own internal markup untouched). */
.forminator-ui.forminator-custom-form {
  max-width: 640px; margin: 0 auto;
}
.forminator-ui .forminator-row { margin-bottom: 22px !important; }
.forminator-ui .forminator-field { margin-bottom: 0; }
.forminator-ui .forminator-label,
.forminator-ui label {
  font-family: 'Outfit', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text) !important;
  margin-bottom: 8px !important;
  display: block;
}
.forminator-ui input[type="text"].forminator-input,
.forminator-ui input[type="email"].forminator-input,
.forminator-ui input[type="tel"].forminator-input,
.forminator-ui input[type="number"].forminator-input,
.forminator-ui input[type="url"].forminator-input,
.forminator-ui textarea.forminator-input,
.forminator-ui .forminator-select2 .select2-selection {
  width: 100% !important;
  padding: 13px 16px !important;
  border: none !important;
  border-bottom: 1.5px solid var(--border-strong) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 15px !important;
  color: var(--text) !important;
  box-shadow: none !important;
  transition: border-color var(--trans-fast);
}
.forminator-ui textarea.forminator-input { min-height: 130px; resize: vertical; }
.forminator-ui input.forminator-input:focus,
.forminator-ui textarea.forminator-input:focus,
.forminator-ui .forminator-select2.select2-container--focus .select2-selection {
  outline: none !important;
  border-bottom-color: var(--orange) !important;
}
.forminator-ui input.forminator-input::placeholder,
.forminator-ui textarea.forminator-input::placeholder { color: var(--muted); opacity: 0.7; }
/* Phone field's intl-tel-input country picker — bottom-border only, matching the other inputs;
   its own dropdown/flag markup is left completely alone. */
.forminator-ui .iti { width: 100%; }
.forminator-ui .iti input.forminator-input { border-bottom: 1.5px solid var(--border-strong) !important; }
.forminator-ui .forminator-select2 .select2-selection {
  height: auto !important; display: flex; align-items: center;
}
.forminator-ui .forminator-select2 .select2-selection__arrow { height: 100% !important; }

.forminator-ui .forminator-button-submit,
.forminator-ui button.forminator-button {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--orange) !important; color: #fff !important;
  padding: 15px 34px !important; border-radius: 100px !important; border: none !important;
  font-family: 'Outfit', sans-serif !important; font-size: 14.5px !important; font-weight: 700 !important;
  text-transform: none; cursor: pointer;
  box-shadow: 0 4px 28px var(--orange-glow);
  transition: background var(--trans), transform var(--trans), box-shadow var(--trans);
}
.forminator-ui .forminator-button-submit:hover,
.forminator-ui button.forminator-button:hover {
  background: var(--orange-d) !important; transform: translateY(-2px);
  box-shadow: 0 8px 36px rgba(255,89,35,0.42);
}
.forminator-ui .forminator-response-message.forminator-success {
  border-radius: 10px !important; padding: 14px 18px !important; font-size: 13.5px !important;
  background: rgba(5,150,105,0.08) !important; color: #059669 !important; border: none !important;
}
.forminator-ui .forminator-response-message.forminator-error {
  border-radius: 10px !important; padding: 14px 18px !important; font-size: 13.5px !important;
  background: rgba(220,38,38,0.08) !important; color: #dc2626 !important; border: none !important;
}