/* =========================================================
   MoveCars4u — theme.css
   Ported from the FSE site's final premium pass, rebuilt as
   plain, static CSS (no block-editor classes required).
   ========================================================= */

/* ---------- Header ---------- */
.m4u-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}
.m4u-topbar{
  height: 36px;
  background: var(--c-contrast);
  color: #fff;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Keep the contacts + social icon together as one balanced group instead
   of stretching them to opposite corners of a wide screen — that's what
   left the huge dead gap in the middle. */
.m4u-topbar .container{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
}
.m4u-topbar__contacts{ display:flex; align-items:center; gap:18px; font-size:14px; }
.m4u-topbar__contacts a{ color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.m4u-topbar__social{ display:flex; align-items:center; gap:12px; }
.m4u-topbar__social a{ color:#fff; display:inline-flex; }

.m4u-main-row{
  height: 80px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.m4u-main-row .container{
  display:flex; align-items:center; gap:24px; width:100%;
}
.m4u-logo{ flex: 0 0 auto; display:flex; align-items:center; }
.m4u-logo img{ height:52px; width:auto; display:block; }

.m4u-nav{ flex:1 1 auto; min-width:0; }
.m4u-nav ul{ display:flex; align-items:center; justify-content:center; gap:32px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.m4u-nav a{ text-decoration:none; font-family:var(--font-heading); font-weight:500; font-size:16px; color:var(--c-text); }
.m4u-nav li.current-menu-item > a{ color:var(--c-primary); }

.m4u-header-right{ flex:0 0 auto; display:flex; align-items:center; gap:16px; }

.m4u-lang-dd{ position:relative; display:inline-block; }
.m4u-lang-dd__btn{
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  padding:6px 10px; border:1px solid #e5e5e5; border-radius:999px; background:#fff;
  font-family:var(--font-heading); font-size:14px; cursor:pointer;
}
.m4u-lang-dd__menu{
  display:none; position:absolute; top:calc(100% + 10px); right:0;
  min-width:170px; background:#fff; border-radius:12px;
  box-shadow:0 16px 32px rgba(0,0,0,.18); padding:6px; z-index:200;
}
.m4u-lang-dd.is-open .m4u-lang-dd__menu{ display:block; }
.m4u-lang-dd__item{
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px;
  text-decoration:none; color:#111827; font-size:14px; white-space:nowrap;
}
.m4u-lang-dd__item:hover{ background:#f5f5f5; }
.m4u-lang-dd__item.is-active{ font-weight:700; color:var(--c-primary); }

.m4u-header-cta{ flex-shrink:0; }

.m4u-nav-toggle{ display:none; background:none; border:none; font-size:26px; cursor:pointer; }

@media (max-width: 1300px){
  .m4u-main-row{ height:auto; min-height:80px; padding:10px 0; }
  .m4u-main-row .container{ flex-wrap:wrap; row-gap:10px; }
  .m4u-nav{ order:3; flex:1 1 100%; }
  .m4u-nav ul{ justify-content:center; }
  .m4u-header-right{ order:2; margin-left:auto; }
  .m4u-logo{ order:1; }
}
@media (max-width: 720px){
  .m4u-topbar .container{ flex-wrap:wrap; row-gap:4px; padding:4px 16px; }
  .m4u-topbar{ height:auto; }
  .m4u-nav ul{ display:none; flex-direction:column; align-items:flex-start; width:100%; gap:14px; padding:16px; }
  .m4u-nav.is-open ul{ display:flex; }
  .m4u-nav-toggle{ display:block; }
  .m4u-logo img{ height:48px; }

  /* Language switcher flush left, logo centered, hamburger flush right —
     a 3-column grid instead of flex, since flex can't pin two unrelated
     items to opposite edges while centering a third one between them.
     ".m4u-header-right" is unwrapped via display:contents so its own
     children (the language dropdown and the hamburger button) become
     direct grid items instead of being stuck together as one block. */
  .m4u-main-row .container{
    display:grid; grid-template-columns:auto 1fr auto; align-items:center;
    flex-wrap:nowrap; column-gap:12px;
  }
  .m4u-header-cta{ display:none; }
  .m4u-header-right{ display:contents; }
  .m4u-logo{ grid-column:2; order:2; justify-self:center; }
  .m4u-lang-dd{ grid-column:1; order:1; justify-self:start; }
  .m4u-nav-toggle{ grid-column:3; order:3; justify-self:end; }
  .m4u-nav{ grid-column:1 / -1; order:4; }

  .m4u-lang-dd__label,
  .m4u-lang-dd__chev{ display:none; }
  .m4u-lang-dd__btn{ padding:6px 8px; }

  /* The dropdown menu is normally right-aligned to its button (correct
     when the switcher sits on the right side of a wide header) — now that
     it's flush against the left edge, that same right:0 pushes the menu's
     bulk off-screen to the left. Anchor it from the left instead. */
  .m4u-lang-dd__menu{ left:0; right:auto; }
}

/* ---------- Footer ---------- */
.m4u-footer{
  background: var(--c-contrast);
  color: #fff;
  border-top: 4px solid var(--c-primary);
  padding: 50px 0 0;
}
.m4u-footer a{ color:#fff; text-decoration:none; }
.m4u-footer a:hover{ color:var(--c-primary); }
.m4u-footer__grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:40px; padding-bottom:30px; }
.m4u-footer__logo img{ height:70px; margin-bottom:16px; }
.m4u-footer__tagline{ color:rgba(255,255,255,.75); font-size:14px; line-height:1.6; }
.m4u-footer h3{ position:relative; padding-bottom:10px; margin-bottom:14px; font-size:17px; }
.m4u-footer h3::after{ content:""; position:absolute; left:0; bottom:0; width:34px; height:3px; border-radius:3px; background:var(--c-primary); }
.m4u-footer ul{ list-style:none; margin:0; padding:0; }
.m4u-footer li{ margin-bottom:10px; font-size:14.5px; }
.m4u-footer__social{ margin-top:18px; display:flex; gap:12px; }
.m4u-footer__social a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; }
.m4u-footer__bottom{ border-top:1px solid rgba(255,255,255,.12); padding:16px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:13.5px; color:rgba(255,255,255,.75); }

@media (max-width: 860px){
  .m4u-footer__grid{ grid-template-columns:1fr; gap:28px; }
}

/* ---------- Hero ---------- */
.m4u-hero{
  position: relative;
  color: #fff;
  overflow: hidden;
  min-height: 800px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  animation: m4uKenBurns 22s ease-in-out infinite alternate;
}
@keyframes m4uKenBurns{
  from{ background-size:100% auto; background-position:center; }
  to{ background-size:112% auto; background-position:center 60%; }
}
.m4u-hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(12,18,30,.72) 0%, rgba(12,18,30,.42) 45%, rgba(12,18,30,.08) 75%);
  z-index:1;
}
.m4u-hero .container{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.m4u-hero__content{ flex: 1 1 420px; max-width: 560px; }
.m4u-hero__content h1{
  font-size:clamp(30px, 4vw, 48px); line-height:1.15; letter-spacing:-0.01em;
  color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.25); font-weight:600;
  opacity:0; animation:m4uHeroUp .8s ease forwards; animation-delay:.1s;
}
.m4u-hero__content p{
  font-size:16px; font-weight:300; margin:10px 0 18px; text-shadow:0 1px 10px rgba(0,0,0,.2);
  opacity:0; animation:m4uHeroUp .8s ease forwards; animation-delay:.22s;
}
.m4u-trust-row{ display:flex; flex-wrap:wrap; gap:10px 22px; margin:0 0 18px; padding:0; list-style:none; }
.m4u-trust-row li{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:#fff; opacity:0; animation:m4uHeroUp .6s ease forwards; }
.m4u-trust-row li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--c-primary); flex-shrink:0; }
.m4u-trust-row li:nth-child(1){ animation-delay:.34s; }
.m4u-trust-row li:nth-child(2){ animation-delay:.42s; }
.m4u-trust-row li:nth-child(3){ animation-delay:.5s; }
.m4u-hero__content > .btn{ opacity:0; animation:m4uHeroUp .7s ease forwards; animation-delay:.6s; }
.m4u-hero__form{ flex: 0 1 480px; opacity:0; animation:m4uHeroSideIn .8s ease forwards; animation-delay:.3s; }
@keyframes m4uHeroSideIn{ from{ opacity:0; transform:translateX(28px); } to{ opacity:1; transform:translateX(0); } }

.m4u-hero__scroll{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:2;
  width:26px; height:42px; border:2px solid rgba(255,255,255,.55); border-radius:16px;
}
.m4u-hero__scroll::before{
  content:""; position:absolute; top:6px; left:50%; width:4px; height:8px; margin-left:-2px;
  background:#fff; border-radius:2px; animation:m4uScrollDot 1.8s ease infinite;
}
@keyframes m4uScrollDot{ 0%{ opacity:1; transform:translateY(0); } 70%{ opacity:0; transform:translateY(14px); } 100%{ opacity:0; } }

@media (max-width: 768px){ .m4u-hero{ min-height:auto; padding:40px 0 56px; animation:none; background-size:cover; } .m4u-hero__scroll{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .m4u-hero{ animation:none; }
  .m4u-hero__content h1, .m4u-hero__content p, .m4u-trust-row li, .m4u-hero__content > .btn, .m4u-hero__form{ animation:none; opacity:1; }
  .m4u-hero__scroll::before{ animation:none; }
}

/* ---------- Services ---------- */
.m4u-services{ position:relative; background:linear-gradient(180deg, #fff 0%, var(--c-tertiary) 100%); padding:60px 0 50px; overflow:hidden; }
.m4u-services::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(17,24,39,.06) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 55% 60% at 50% 30%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 55% 60% at 50% 30%, #000 0%, transparent 75%);
  z-index:0;
}
.m4u-services .container{ position:relative; z-index:1; }
.m4u-services__eyebrow{ text-align:center; color:var(--c-primary); font-weight:500; font-size:16px; text-transform:capitalize; margin-bottom:6px; }
.m4u-services__title{ text-align:center; font-size:clamp(26px,3vw,34px); position:relative; padding-bottom:18px; margin-bottom:34px; }
.m4u-services__title::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:56px; height:4px; border-radius:4px; background:var(--c-primary); }
.m4u-services__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.m4u-service-card{
  background:#f5f5f5; border-radius:22px; padding:44px 26px 34px; text-align:center;
  position:relative; box-shadow:0 14px 30px rgba(12,24,48,.10); overflow:hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.m4u-service-card::before{ content:""; position:absolute; top:0; left:16px; right:16px; height:4px; border-radius:0 0 4px 4px; background:var(--c-primary); z-index:1; }
.m4u-service-card:hover{ transform:translateY(-8px); box-shadow:0 22px 40px rgba(12,24,48,.16); }

/* Fix: the base .btn:hover forces white text (correct for the solid red
   .btn), but .btn-outline is a white button — that turned "Learn More"
   into white-on-white on hover. Give outline buttons their own hover:
   fill with the brand red instead of just losing their label. */
.btn-outline:hover{
  background:var(--c-primary); color:#fff; border-color:var(--c-primary);
  box-shadow:0 12px 22px rgba(255,19,29,.32);
}
.m4u-service-card__icon{
  position:relative; width:76px; height:76px; margin:0 auto 20px; border-radius:50%;
  background:var(--c-primary); display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 24px rgba(255,19,29,.32); transition:transform .35s ease;
}
.m4u-service-card:hover .m4u-service-card__icon{ transform:rotate(-10deg) scale(1.08); }
.m4u-service-card__icon img{ width:32px; height:32px; filter:brightness(0) invert(1); }
.m4u-service-card h3{ position:relative; font-size:20px; margin-top:4px; color:#0c1830; }
.m4u-service-card p{ position:relative; font-size:15px; color:#434343; margin-bottom:20px; }
@media (max-width: 900px){ .m4u-services__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 600px){ .m4u-services__grid{ grid-template-columns:1fr; } }

/* ---------- Generic page sections ---------- */
/* Light, photo-free premium header — replaces the old dark stock-photo
   banner. Shared by About/Contact/Gallery/Blog so every interior page
   opens the same clean, editorial way. Animated gradient blobs + a dot
   texture give it depth without a photo; the title/kicker/badges play a
   staggered entrance on load (always above the fold, so it's timed with
   CSS animation-delay rather than a scroll observer). */
.m4u-page-hero{
  position:relative;
  padding:100px 24px 76px;
  text-align:center;
  color:var(--c-text);
  background:#fdfdfd;
  overflow:hidden;
  isolation:isolate;
}

/* Dot-grid texture, fading toward the edges */
.m4u-page-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(17,24,39,.09) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 40%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 60% 60% at 50% 40%, #000 0%, transparent 75%);
  z-index:0;
}

/* Soft floating gradient blobs */
.m4u-page-hero::after{
  content:"";
  position:absolute; inset:-10%;
  background:
    radial-gradient(circle at 18% 25%, rgba(255,19,29,.16), transparent 38%),
    radial-gradient(circle at 82% 70%, rgba(255,19,29,.10), transparent 42%),
    radial-gradient(circle at 60% 15%, rgba(47,47,51,.08), transparent 40%);
  filter:blur(6px);
  animation: m4uHeroDrift 16s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes m4uHeroDrift{
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(2%, -3%) scale(1.06); }
  100% { transform: translate(-2%, 2%) scale(1); }
}

.m4u-page-hero__inner{ position:relative; z-index:2; max-width:720px; margin:0 auto; }

.m4u-page-hero .m4u-kicker{
  display:block; width:fit-content; margin:0 auto;
  opacity:0; animation: m4uHeroUp .7s ease forwards; animation-delay:.05s;
}

.m4u-page-hero h1{
  font-size:clamp(34px, 5vw, 56px); font-weight:800; letter-spacing:-0.03em; line-height:1.05;
  margin:16px 0 14px; color:var(--c-text);
  opacity:0; animation: m4uHeroUp .8s ease forwards; animation-delay:.16s;
  position:relative; display:block; width:fit-content; margin-left:auto; margin-right:auto;
}
.m4u-page-hero h1::after{
  content:""; position:absolute; left:50%; bottom:-10px; height:4px; width:0; border-radius:4px;
  background:var(--c-primary); transform:translateX(-50%);
  animation: m4uUnderline .6s ease forwards; animation-delay:.75s;
}
@keyframes m4uUnderline{ to{ width:64px; } }

.m4u-page-hero .m4u-trust-row{ justify-content:center; margin:26px 0 0; }
.m4u-page-hero .m4u-trust-row li{
  color:var(--c-text); opacity:0; animation: m4uHeroUp .6s ease forwards;
}
.m4u-page-hero .m4u-trust-row li:nth-child(1){ animation-delay:.55s; }
.m4u-page-hero .m4u-trust-row li:nth-child(2){ animation-delay:.68s; }
.m4u-page-hero .m4u-trust-row li:nth-child(3){ animation-delay:.81s; }

@keyframes m4uHeroUp{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (max-width: 560px){ .m4u-page-hero{ padding:70px 18px 50px; } }
@media (prefers-reduced-motion: reduce){
  .m4u-page-hero::after{ animation:none; }
  .m4u-page-hero .m4u-kicker,
  .m4u-page-hero h1,
  .m4u-page-hero h1::after,
  .m4u-page-hero .m4u-trust-row li{ animation:none; opacity:1; }
}
.m4u-section{ padding:60px 0; }
.m4u-section--tight{ padding:30px 0; }

/* Scroll reveal (used on About + can be reused anywhere) */
.m4u-reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.m4u-reveal.is-visible{ opacity:1; transform:translateY(0); }
.m4u-reveal-delay-1.is-visible{ transition-delay:.08s; }
.m4u-reveal-delay-2.is-visible{ transition-delay:.16s; }

/* Reusable red pill "kicker" label */
.m4u-kicker{
  display:inline-block; padding:8px 16px; border:1px solid rgba(255,19,29,.16); border-radius:999px;
  color:var(--c-primary); font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(255,19,29,.055);
}

/* Two-column "History" layout with a tilted, hoverable image card */
.m4u-history{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
.m4u-history__text p{ margin:0 0 16px; }
.m4u-history__image{
  position:relative; border-radius:20px; overflow:hidden; box-shadow:0 24px 50px rgba(12,24,48,.18);
  transform:rotate(-1.2deg); transition:transform .4s ease, box-shadow .4s ease;
}
.m4u-history__image:hover{ transform:rotate(0deg) scale(1.015); box-shadow:0 30px 60px rgba(12,24,48,.24); }
.m4u-history__image img{ display:block; transition:transform .6s ease; }
.m4u-history__image:hover img{ transform:scale(1.05); }
@media (max-width: 900px){ .m4u-history{ grid-template-columns:1fr; gap:30px; } .m4u-history__image{ transform:none; order:-1; } }

/* Pull-quote banner */
.m4u-pullquote{
  max-width:820px; margin:0 auto; padding:8px 0 8px 28px; border-left:4px solid var(--c-primary);
}
.m4u-pullquote h2{ font-size:clamp(24px,2.6vw,34px); margin:0 0 8px; }
.m4u-pullquote p{ margin:0; color:var(--c-muted); font-size:17px; }

/* Feature line ("tick" list) */
.m4u-feature-line{
  display:flex; align-items:flex-start; gap:16px; max-width:900px; margin:0 auto 20px;
  padding:22px 24px; background:#fff; border-radius:16px; box-shadow:0 10px 24px rgba(12,24,48,.08);
  transition:transform .28s ease, box-shadow .28s ease;
}
.m4u-feature-line:hover{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(12,24,48,.14); }
.m4u-feature-line__icon{
  width:42px; height:42px; flex-shrink:0; border-radius:50%; background:var(--c-primary);
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(255,19,29,.3);
}
.m4u-feature-line__icon img{ width:20px; height:20px; filter:brightness(0) invert(1); }
.m4u-feature-line h3{ margin:0 0 8px; text-align:left; }
.m4u-feature-line p{ margin:0; text-align:left; }

/* Info grid (why choose us) */
.m4u-info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; max-width:1200px; margin:0 auto; }
.m4u-info-block{
  display:flex; align-items:flex-start; gap:18px; padding:26px 24px;
  background:#fff; border-radius:18px; box-shadow:0 12px 28px rgba(12,24,48,.08);
  transition:transform .28s ease, box-shadow .28s ease;
}
.m4u-info-block:hover{ transform:translateY(-5px); box-shadow:0 18px 36px rgba(12,24,48,.15); }
.m4u-info-block__icon{ width:56px; height:56px; flex-shrink:0; padding:10px; border-radius:50%; background:var(--c-tertiary); box-sizing:border-box; }
.m4u-info-block h3{ margin:0 0 14px; font-size:1.4rem; }
.m4u-info-block p{ margin:0; line-height:1.7; color:#333; }
@media (max-width: 900px){ .m4u-info-grid{ grid-template-columns:1fr; } }

/* Reusable white CTA card (Bulgaria box, etc.) */
.m4u-cta-box{
  max-width:920px; margin:0 auto; padding:30px 26px; text-align:center; background:#fff;
  border:1px solid rgba(11,28,45,.08); border-radius:18px; box-shadow:0 14px 30px rgba(0,0,0,.06);
}
.m4u-cta-box p{ margin:0 0 18px; font-size:18px; line-height:1.55; color:#2a2a2a; }
.m4u-cta-box{ transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.m4u-cta-box:hover{ transform:translateY(-4px); box-shadow:0 22px 44px rgba(255,19,29,.14); border-color:rgba(255,19,29,.25); }
.m4u-service-cta{ transition:transform .3s ease; }
.m4u-btn-pulse{ animation: m4uRippleRed 2.4s infinite; }
.m4u-btn-pulse:hover{ animation-play-state:paused; }
@keyframes m4uRippleRed{
  0%   { box-shadow:0 0 0 0 rgba(255,19,29,.35); }
  70%  { box-shadow:0 0 0 14px rgba(255,19,29,0); }
  100% { box-shadow:0 0 0 0 rgba(255,19,29,0); }
}
@media (prefers-reduced-motion: reduce){ .m4u-btn-pulse{ animation:none; } }

/* ---------- Contact cards ---------- */
.m4u-cards-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; max-width:1200px; margin:0 auto; }
.m4u-card{
  position:relative; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:18px;
  padding:18px 18px 16px; box-shadow:0 10px 26px rgba(0,0,0,.08); overflow:hidden; min-height:185px;
  transition: transform .28s ease, box-shadow .28s ease;
}
.m4u-card::after{ content:""; position:absolute; left:0; top:0; height:4px; width:100%; background:linear-gradient(90deg, var(--c-primary), rgba(255,19,29,.55)); }
/* transform is driven by the JS tilt effect (main.js) — CSS only handles
   the box-shadow lift and a fallback for touch/no-hover devices. */
.m4u-card{ transition: box-shadow .3s ease; }
.m4u-card:hover{ box-shadow:0 18px 44px rgba(0,0,0,.14); }
.m4u-card__head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.m4u-card__icon{
  width:44px; height:44px; border-radius:12px; background:rgba(255,19,29,.08); display:flex;
  align-items:center; justify-content:center; flex-shrink:0; transition:transform .3s ease, background .3s ease;
}
.m4u-card:hover .m4u-card__icon{ transform:rotate(-8deg) scale(1.1); background:rgba(255,19,29,.15); }
.m4u-card__icon img{ width:26px; height:26px; }
.m4u-card h3{ margin:0; font-size:18px; }
.m4u-card p{ margin:0 0 12px; color:var(--c-muted); font-size:14.8px; line-height:1.55; }
.m4u-card__link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--c-primary); text-decoration:none; }
@media (max-width: 1024px){ .m4u-cards-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px){ .m4u-cards-grid{ grid-template-columns:1fr; } }

/* ---------- Native contact form ---------- */
.m4u-cf{
  position:relative; max-width:1100px; margin:0 auto; padding:40px 34px 34px; background:#fff;
  border:1px solid rgba(0,0,0,.08); border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.10);
  overflow:hidden;
}
.m4u-cf::before{
  content:""; position:absolute; inset:-20% -20% auto auto; width:50%; height:60%;
  background:radial-gradient(circle, rgba(255,19,29,.06), transparent 70%); pointer-events:none;
}
.m4u-cf h2{ position:relative; margin:0 0 26px; font-weight:800; font-size:clamp(26px,2.2vw,36px); }
.m4u-cf__grid3{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:30px 26px; margin-bottom:8px; }

/* Floating labels: input/textarea come first in markup, label floats via
   the :placeholder-shown sibling trick — no JS required. */
.m4u-field{ position:relative; }
.m4u-field input, .m4u-field textarea{
  position:relative; width:100%; border:none; border-bottom:2px solid rgba(0,0,0,.14); border-radius:0;
  background:transparent; padding:14px 2px 10px; outline:none; font-size:16px; color:var(--c-text);
  transition:border-color .2s ease;
}
.m4u-field textarea{ min-height:150px; resize:vertical; }
.m4u-field label{
  position:absolute; left:2px; top:14px; font-size:16px; color:var(--c-muted); font-weight:700;
  pointer-events:none; transform-origin:left top; transition:transform .2s ease, color .2s ease;
}
.m4u-field input:focus ~ label, .m4u-field textarea:focus ~ label,
.m4u-field input:not(:placeholder-shown) ~ label, .m4u-field textarea:not(:placeholder-shown) ~ label{
  transform:translateY(-14px) scale(.8); color:var(--c-primary);
}
/* animated underline that grows from the centre on focus */
.m4u-field::after{
  content:""; position:absolute; left:50%; right:50%; bottom:0; height:2px; background:var(--c-primary);
  transition:left .28s ease, right .28s ease;
}
.m4u-field:focus-within::after{ left:0; right:0; }
.m4u-field:focus-within input, .m4u-field:focus-within textarea{ border-bottom-color:transparent; }

.m4u-cf__full{ position:relative; margin:22px 0; }
.m4u-cf__submit{
  position:relative; display:inline-block; border:none; background:var(--c-primary); color:#fff;
  font-weight:800; font-size:18px; padding:14px 44px; border-radius:999px; cursor:pointer;
  box-shadow:0 14px 28px rgba(255,19,29,.26); overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.m4u-cf__submit::before{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
  animation:m4uShimmer 3.2s ease-in-out infinite;
}
.m4u-cf__submit:hover{ transform:translateY(-2px); box-shadow:0 18px 36px rgba(255,19,29,.34); }

.m4u-cf__notice{
  position:relative; margin:0 0 18px; padding:14px 16px; border-radius:12px; font-weight:700;
  display:flex; align-items:center; gap:10px;
}
.m4u-cf__notice--success{ background:rgba(34,197,94,.14); color:#166534; animation:m4uPopIn .4s ease; }
.m4u-cf__notice--error{ background:rgba(239,68,68,.14); color:#991b1b; animation:m4uPopIn .4s ease; }
.m4u-cf__check{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; flex-shrink:0;
  border-radius:50%; background:#22c55e; color:#fff; animation:m4uCheckPop .45s ease .1s both;
}
@keyframes m4uPopIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
@keyframes m4uCheckPop{ from{ transform:scale(0); } to{ transform:scale(1); } }

@media (max-width: 700px){ .m4u-cf__grid3{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){
  .m4u-cf__submit::before{ animation:none; }
  .m4u-cf__notice--success, .m4u-cf__notice--error, .m4u-cf__check{ animation:none; }
}

/* ---------- Blog grid ---------- */
.m4u-blog-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:22px; }
@media (max-width: 400px){ .m4u-blog-grid{ grid-template-columns:1fr; } }
.m4u-post-card{
  position:relative; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:18px; overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.08); display:flex; flex-direction:column;
  transition: box-shadow .28s ease; /* transform is JS-driven (tilt), see main.js */
}
.m4u-post-card::before{ content:""; position:absolute; left:0; top:0; height:4px; width:100%; background:linear-gradient(90deg, var(--c-primary), rgba(255,19,29,.35)); z-index:2; }
.m4u-post-card:hover{ box-shadow:0 20px 55px rgba(0,0,0,.16); }
.m4u-post-card__thumb{ display:block; aspect-ratio:16/9; overflow:hidden; }
.m4u-post-card__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .5s ease; }
.m4u-post-card:hover .m4u-post-card__thumb img{ transform:scale(1.08); filter:saturate(1.08); }
.m4u-post-card__body{ padding:18px; display:flex; flex-direction:column; flex:1; }
.m4u-post-card__date{ font-size:13px; color:var(--c-muted); margin-bottom:8px; }
.m4u-post-card h3{ font-size:clamp(20px,1.6vw,24px); margin:0 0 8px; }
.m4u-post-card h3 a{ text-decoration:none; color:var(--c-text); }
.m4u-post-card p{ color:var(--c-muted); font-size:14.8px; line-height:1.6; margin:0 0 14px; }
.m4u-post-card__more{
  margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:6px; background:var(--c-primary);
  color:#fff; font-weight:900; font-size:14px; text-decoration:none; padding:12px 16px; border-radius:14px;
  transition:transform .2s ease, box-shadow .2s ease, gap .2s ease; box-shadow:0 8px 16px rgba(255,19,29,.2);
}
.m4u-post-card__more:hover{ transform:translateX(3px); gap:10px; box-shadow:0 10px 20px rgba(255,19,29,.3); }

/* Pagination (native paginate_links output) */
.m4u-pagination{ display:flex; justify-content:center; gap:10px; margin-top:40px; flex-wrap:wrap; }
.m4u-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 8px;
  border-radius:999px; border:1px solid rgba(0,0,0,.1); background:#fff; color:var(--c-text);
  text-decoration:none; font-weight:600; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.m4u-pagination .page-numbers:hover{ transform:translateY(-2px); border-color:rgba(255,19,29,.3); box-shadow:0 10px 20px rgba(0,0,0,.1); }
.m4u-pagination .page-numbers.current{ background:var(--c-primary); border-color:var(--c-primary); color:#fff; }
.m4u-pagination .page-numbers.dots{ border:none; background:none; }

/* ---------- Gallery (swipeable slider + lightbox) ---------- */
.m4u-gallery{ max-width:1100px; margin:0 auto; position:relative; }
.m4u-gallery-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:16px; padding:10px 6px; scrollbar-width:none; }
.m4u-gallery-track::-webkit-scrollbar{ display:none; }
.m4u-slide{ flex:0 0 85%; max-width:85%; scroll-snap-align:center; cursor:zoom-in; }
@media (min-width: 768px){ .m4u-slide{ flex:0 0 33.333%; max-width:33.333%; } }
.m4u-thumb{ position:relative; width:100%; height:230px; border-radius:16px; overflow:hidden; background:#f3f4f6; box-shadow:0 12px 30px rgba(0,0,0,.15); }
@media (max-width: 600px){ .m4u-thumb{ height:210px; } }
.m4u-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
.m4u-slide:hover .m4u-thumb img{ transform:scale(1.08); }
.m4u-thumb::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  opacity:0; transition:opacity .3s ease;
}
.m4u-slide:hover .m4u-thumb::after{ opacity:1; }
.m4u-thumb__zoom{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.6);
  width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--c-primary);
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.m4u-slide:hover .m4u-thumb__zoom{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.m4u-lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.88); display:none; align-items:center; justify-content:center; z-index:9999; padding:20px; opacity:0; transition:opacity .25s ease; touch-action:none; }
.m4u-lightbox.active{ display:flex; opacity:1; }
.m4u-lightbox-inner{ position:relative; width:min(1100px,100%); height:min(82vh,900px); display:flex; align-items:center; justify-content:center; }
.m4u-lightbox img{
  max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.55); user-select:none;
  opacity:0; transform:scale(.96); transition:opacity .25s ease, transform .25s ease;
  position:relative; z-index:1;
}
.m4u-lightbox img.is-visible{ opacity:1; transform:scale(1); }
.m4u-lightbox-counter{
  position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); color:#fff; font-size:13px;
  letter-spacing:.05em; background:rgba(0,0,0,.4); padding:6px 14px; border-radius:999px; z-index:2;
}
.m4u-lightbox-close{ position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.35); color:#fff; font-size:26px; display:grid; place-items:center; cursor:pointer; line-height:1; z-index:2; }
/* .m4u-lightbox img has "transform", which per spec makes it act like a
   positioned element with z-index:0 for stacking purposes — without an
   explicit z-index here, the image (later in the DOM) painted OVER these
   position:absolute arrows instead of under them, hiding most of each
   circle behind the photo. */
.m4u-gallery-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.35); color:#fff; font-size:26px; display:grid; place-items:center; cursor:pointer; user-select:none; transition:background .2s ease, transform .2s ease; z-index:2; }
.m4u-gallery-arrow:hover{ background:rgba(0,0,0,.55); transform:translateY(-50%) scale(1.06); }
.m4u-prev{ left:10px; } .m4u-next{ right:10px; }

/* On a phone the lightbox image runs edge-to-edge, so these buttons end
   up sitting right under it — swipe (added in template-gallery.php)
   replaces them there; kept for desktop, where there's no swipe gesture. */
@media (max-width: 720px){
  .m4u-lightbox .m4u-gallery-arrow{ display:none; }
}

/* Desktop-only arrows that scroll the slider track itself */
.m4u-gallery-arrow--track{
  border-color:rgba(0,0,0,.1); background:#fff; color:var(--c-text); box-shadow:0 10px 24px rgba(0,0,0,.14);
  z-index:5; display:none;
}
.m4u-gallery-arrow--track:hover{ background:#fff; }
.m4u-gallery-arrow--track.m4u-prev{ left:-22px; }
.m4u-gallery-arrow--track.m4u-next{ right:-22px; }
@media (min-width: 900px){ .m4u-gallery-arrow--track{ display:grid; } }

/* ---------- CTA banner ---------- */
.m4u-cta{ text-align:center; padding:50px 20px; background:#fff; }

/* ---------- Cookie consent ---------- */
/* display:flex here was overriding the browser's own [hidden]{display:none}
   rule (author CSS always beats the UA stylesheet, regardless of the
   `hidden` attribute) — so toggling .hidden in JS never actually hid it.
   Fixed by driving visibility off a class instead, hidden by default. */
.m4u-cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:999; max-width:640px; margin:0 auto;
  background:#fff; color:var(--c-text); border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.25);
  padding:20px 22px; display:none; flex-wrap:wrap; align-items:center; gap:16px; justify-content:space-between;
  opacity:0; transform:translateY(12px); transition:opacity .3s ease, transform .3s ease;
}
.m4u-cookie-banner.is-visible{ display:flex; }
.m4u-cookie-banner.is-shown{ opacity:1; transform:translateY(0); }
.m4u-cookie-banner p{ margin:0; font-size:14px; flex:1 1 260px; }
.m4u-cookie-banner p a{ color:var(--c-primary); text-decoration:underline; }
.m4u-cookie-banner__actions{ display:flex; gap:10px; flex-shrink:0; }

/* ---------- Service page ---------- */
.m4u-service-premium{
  position:relative;
  background:#fdfdfd;
  color:#111; padding:100px 24px 90px; overflow:hidden; isolation:isolate;
}
.m4u-service-premium::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(17,24,39,.08) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 65% 70% at 30% 30%, #000 0%, transparent 72%);
  mask-image:radial-gradient(ellipse 65% 70% at 30% 30%, #000 0%, transparent 72%);
  z-index:0;
}
.m4u-service-premium::after{
  content:"";
  position:absolute; inset:-12%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,19,29,.14), transparent 38%),
    radial-gradient(circle at 85% 75%, rgba(255,19,29,.10), transparent 42%);
  filter:blur(8px);
  animation: m4uHeroDrift 18s ease-in-out infinite alternate;
  z-index:0;
}
.m4u-service-wrap{ position:relative; z-index:2; max-width:1180px; margin:0 auto; }
.m4u-service-kicker{
  display:inline-block; margin-bottom:18px; padding:8px 16px; border:1px solid rgba(255,19,29,0.16);
  border-radius:999px; color:var(--c-primary); font-size:13px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; background:rgba(255,19,29,0.055);
  opacity:0; animation: m4uHeroUp .7s ease forwards; animation-delay:.05s;
}
.m4u-service-premium h1{
  max-width:850px; margin:0 0 22px; font-size:clamp(34px,5vw,64px); line-height:1.05; font-weight:800; letter-spacing:-.04em;
  opacity:0; animation: m4uHeroUp .8s ease forwards; animation-delay:.16s;
}
.m4u-service-premium .m4u-lead{
  max-width:820px; margin:0 0 46px; color:#5f5f5f; font-size:20px; line-height:1.7;
  opacity:0; animation: m4uHeroUp .8s ease forwards; animation-delay:.28s;
}

.m4u-service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:42px; counter-reset: m4uStep; }
.m4u-service-step{
  position:relative; padding:34px; border-radius:24px; background:#fff; border:1px solid #ececec;
  box-shadow:0 18px 55px rgba(0,0,0,.075); transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  overflow:hidden;
}
.m4u-service-step::before{
  counter-increment: m4uStep;
  content: counter(m4uStep, decimal-leading-zero);
  position:absolute; top:-16px; right:6px; font-size:110px; font-weight:900; line-height:1;
  color:rgba(255,19,29,.06); z-index:0; pointer-events:none; transition:color .35s ease, transform .35s ease;
}
.m4u-service-step:hover{ transform:translateY(-8px); border-color:rgba(255,19,29,.42); box-shadow:0 28px 70px rgba(255,19,29,.14); }
.m4u-service-step:hover::before{ color:rgba(255,19,29,.11); transform:scale(1.06); }
.m4u-service-step span{
  position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-bottom:20px; border-radius:50%; background:var(--c-primary);
  color:#fff; font-weight:800; font-size:13px; letter-spacing:0; box-shadow:0 8px 16px rgba(255,19,29,.3);
}
.m4u-service-step h3{ position:relative; z-index:1; margin:0 0 14px; font-size:23px; line-height:1.2; }
.m4u-service-step p{ position:relative; z-index:1; color:#5f5f5f; line-height:1.75; margin:0; }

.m4u-service-content{ max-width:980px; display:grid; grid-template-columns:1fr 1fr; gap:34px; margin:20px 0 52px; }
.m4u-service-content p{ font-size:17px; color:#5f5f5f; line-height:1.75; }

.m4u-service-cta{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:28px;
  padding:34px 38px; border-radius:28px; overflow:hidden;
  background:linear-gradient(135deg, var(--c-primary) 0%, #a90f0f 100%); box-shadow:0 28px 80px rgba(200,0,0,.22);
}
.m4u-service-cta::before{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%);
  animation: m4uShimmer 4.5s ease-in-out infinite;
}
@keyframes m4uShimmer{
  0%   { left:-60%; }
  55%  { left:130%; }
  100% { left:130%; }
}
.m4u-service-cta > div, .m4u-service-cta > a{ position:relative; z-index:1; }
.m4u-service-cta h3{ margin:0 0 6px; color:#fff; font-size:30px; }
.m4u-service-cta p{ color:rgba(255,255,255,.86); line-height:1.75; margin:0; }
.m4u-cta-btn{
  display:inline-flex; align-items:center; justify-content:center; min-width:170px; padding:16px 26px;
  border-radius:999px; background:#fff; color:#111; font-weight:800; text-decoration:none;
  transition:transform .3s ease, box-shadow .3s ease; white-space:nowrap;
  animation: m4uRipple 2.4s infinite;
}
.m4u-cta-btn:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.24); animation-play-state:paused; }
@keyframes m4uRipple{
  0%   { box-shadow:0 0 0 0 rgba(255,255,255,.45); }
  70%  { box-shadow:0 0 0 14px rgba(255,255,255,0); }
  100% { box-shadow:0 0 0 0 rgba(255,255,255,0); }
}

@media (max-width: 900px){ .m4u-service-grid, .m4u-service-content{ grid-template-columns:1fr; } .m4u-service-cta{ flex-direction:column; align-items:flex-start; } }
@media (max-width: 560px){ .m4u-service-premium{ padding:70px 18px; } .m4u-service-step, .m4u-service-cta{ padding:26px; border-radius:20px; } .m4u-service-premium .m4u-lead{ font-size:18px; } }
@media (prefers-reduced-motion: reduce){
  .m4u-service-premium::after, .m4u-service-cta::before, .m4u-cta-btn{ animation:none; }
  .m4u-service-kicker, .m4u-service-premium h1, .m4u-service-premium .m4u-lead{ animation:none; opacity:1; }
}