/*
Theme Name: McMahon Ultra Mobile
Theme URI: https://dacostaconsulting.ca/
Author: DaCosta Consulting Web Designs
Description: Ultra mobile-first theme with Services CPT, FormSubmit contact, reviews, hero/about images, and a before/after slider.
Version: 4.5.3
Text Domain: mcpmum
*/

:root{
  --bg:#0e1116;
  --surface:#121826;
  --ink:#f2f7fb;
  --muted:#a9b4c2;
  --accent:#28c46c;
  --border:rgba(255,255,255,.08);
  --radius:18px;
  --gutter:40px;
  --container:1200px;
}
@media(min-width:900px){ :root{ --gutter:28px; } }

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}

.container{width:min(100% - (var(--gutter)*2), var(--container));margin-inline:auto}
.container.wide{width:min(100% - var(--gutter), 1400px)}
.section{padding:56px 0;border-top:1px solid var(--border)}

/* Header */
header.site-header{position:sticky;top:0;z-index:1000;background:rgba(10,13,18,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;padding-inline:var(--gutter)}
.brand a{display:flex;flex-direction:column;gap:2px;color:var(--ink);font-weight:900;line-height:1.1}
.brand .sub{color:var(--muted);font-size:12px;line-height:1}
.burger{display:none;background:transparent;border:0;color:var(--ink);font-size:26px}
@media(max-width:900px){ .burger{display:block} }
.nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav ul a{display:inline-block;padding:10px 12px;border-radius:12px;color:var(--ink)}
.nav ul a:hover{background:#1a2130}
@media(max-width:900px){
  .site-header .nav > ul,
  .site-header .nav > nav,
  .site-header .nav > div[class*="menu"]{ display:none !important; }
}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .2s;z-index:998}
.overlay.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;left:0;right:0;top:64px;background:#0c111a;border-bottom:1px solid var(--border);box-shadow:0 14px 28px rgba(0,0,0,.4);z-index:999;transform:translateY(-10px);opacity:0;pointer-events:none;transition:transform .2s, opacity .2s;border-bottom-left-radius:18px;border-bottom-right-radius:18px}
.drawer.show{transform:translateY(0);opacity:1;pointer-events:auto}
.drawer .container{padding:10px 0}
.drawer .menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.drawer .menu a{display:block;background:#121826;border:1px solid var(--border);padding:14px 16px;border-radius:14px;color:var(--ink)}
@media(min-width:901px){ .drawer,.overlay{display:none !important} }

/* Buttons */
.btn{display:inline-block;background:var(--accent);color:#08110a;padding:12px 18px;border-radius:999px;font-weight:800;transition:transform .16s ease;box-shadow:none}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{background:#1a2130;color:var(--ink)}

/* Hero */
.hero{position:relative;overflow:hidden;padding:48px 0}
.hero .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
@media(max-width:900px){ .hero .grid{grid-template-columns:1fr} }
.hero h1{font-size:clamp(26px,6vw,40px);line-height:1.12;margin:0 0 12px}
.hero .lede{color:var(--muted);font-size:clamp(15px,3.3vw,18px);margin:0 0 18px}
.tag{display:inline-block;padding:6px 10px;border-radius:999px;background:#1b2332;color:#b7c6d9;font-size:12px}
.card{background:linear-gradient(180deg,#121826,#0e1420);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 14px 28px rgba(0,0,0,.35)}

/* Background layers */
.section.has-bg, .hero.has-bg { position: relative; }
.bg-layer { position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat; z-index:0; }
.bg-overlay::after { content:""; position:absolute; inset:0;
  background: radial-gradient(1200px 600px at 20% 50%, rgba(0,0,0,.35), rgba(0,0,0,.7) 60%, rgba(0,0,0,.8));
}
.hero.has-bg > .container, .section.has-bg > .container { position:relative; z-index:1; }
@media(max-width:900px){ .bg-overlay::after { background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.85)); } }

/* Grids */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1000px){ .grid3{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .grid3{grid-template-columns:1fr} }
.card-service img{width:100%;height:180px;object-fit:cover;border-top-left-radius:18px;border-top-right-radius:18px}
.card-body{padding:14px}
.card-service h3{margin:0 0 6px;font-size:20px}
.card-service p{margin:0;color:#aab4c4}
.card-service .actions{display:flex;gap:10px;padding:12px 14px}

/* About */
.about{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.about img{width:100%;border-radius:18px;border:1px solid var(--border);box-shadow:0 10px 24px rgba(0,0,0,.35)}
@media(max-width:900px){ .about{grid-template-columns:1fr} }

/* Before/After slider (wider + shorter + after-on-top) */
.ba-wrap{ padding:36px 0; }
.ba{ position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--border); background:#0b0f15;
     aspect-ratio:16/9; max-height:520px; }
@media(max-width:900px){ .ba{ aspect-ratio:4/3; max-height:380px; } }
.ba .ba-layer{ position:absolute; inset:0; }
.ba .ba-img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.ba .ba-bottom{ z-index:0; }       /* BEFORE image behind */
.ba .ba-top{ z-index:1; width:50%; overflow:hidden; }
.ba .ba-handle{ position:absolute; top:0; bottom:0; left:calc(var(--ba) * 1%); width:2px; background:rgba(255,255,255,.75); pointer-events:none; }
.ba .ba-handle::before{ content:""; position:absolute; top:50%; left:-14px; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; border:2px solid rgba(255,255,255,.9); background:rgba(8,11,15,.8); box-shadow:0 2px 8px rgba(0,0,0,.4); }
.ba .ba-range{ -webkit-appearance:none; appearance:none; position:absolute; inset:0; width:100%; height:100%; background:transparent; cursor:ew-resize; }
.ba .ba-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:32px; height:32px; border-radius:50%; background:transparent; cursor:ew-resize; }
.ba .ba-range::-moz-range-thumb{ width:32px; height:32px; border-radius:50%; background:transparent; cursor:ew-resize; }
.ba-caption{ margin-top:10px; color:var(--muted); font-size:14px; }
@media(max-width:900px){ .ba-wrap{ padding:28px 0; } }


/* Before/After v2 — CSS clip-path slider */
.before-after .container{ width:min(100% - (var(--gutter,40px)*2), var(--container,1200px)); margin-inline:auto; }
.ba-card{ border:1px solid var(--border, rgba(255,255,255,.08)); border-radius:18px; background:#0b0f15; padding:0; }
.ba2{ position:relative; overflow:hidden; aspect-ratio:21/9; }
@media(max-width:1100px){ .ba2{ aspect-ratio:16/9; } }
@media(max-width:900px){ .ba2{ aspect-ratio:4/3; } }
.ba2 img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ba2 .after{ clip-path: inset(0 calc(100% - var(--pct,50%)) 0 0); }
.ba2 .handle{ position:absolute; top:0; bottom:0; left:var(--pct,50%); width:0; border-left:2px solid rgba(255,255,255,.9); pointer-events:none; }
.ba2 .handle::before{ content:""; position:absolute; top:50%; left:-18px; transform:translateY(-50%); width:36px; height:36px;
  border-radius:50%; border:2px solid rgba(255,255,255,.95); background:rgba(8,11,15,.85); box-shadow:0 2px 10px rgba(0,0,0,.45); }
/* Reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review{background:#121826;border:1px solid var(--border);border-radius:18px;padding:16px}
@media(max-width:900px){ .reviews{grid-template-columns:1fr} }

/* Footer */
footer.site-footer{padding:36px 0;background:#0b0f15;border-top:1px solid var(--border)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
@media(max-width:900px){ .footer-grid{grid-template-columns:1fr} }

/* Animations */
.fade-in{opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s}
.fade-in.visible{opacity:1;transform:none}

/* Ensure header/overlay/drawer sit above all */
header.site-header{ position:sticky; top:0; z-index:3000 }
.overlay{ z-index:2998 }
.drawer{ z-index:2999 }

/* v4.5.3 — Bigger Before/After on mobile */
@media (max-width: 768px){
  .before-after .container{ width: calc(100% - 24px); margin-inline:auto; }
  .ba-card{ border-radius: 20px; }
  .ba2{ aspect-ratio: 4 / 3; } /* taller on phones */
  .ba2 .handle{ border-left-width: 3px; }
  .ba2 .handle::before{ width: 44px; height: 44px; left: -22px; }
}
@media (max-width: 420px){
  .before-after .container{ width: calc(100% - 16px); }
  .ba2{ aspect-ratio: 1 / 1; } /* nearly square for max visual size */
}