/* Marc Allan Construction — static site styles (XEED) */
:root{
  --green:#41A336; --green-dark:#28751F; --ink:#191D23; --text:#15171D; --grey:#464646;
  --light:#F2F2F2; --line:#D1D1D1; --dark:#1D1D1D; --white:#fff;
  --wrap:1210px; --gutter:20px;
  --f-head:'Lexend',system-ui,sans-serif; --f-body:'Manrope',system-ui,sans-serif;
  --f-alt:'Montserrat',system-ui,sans-serif; --f-contact:'Lato',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--f-body);font-size:18px;font-weight:500;line-height:1.75;color:var(--text);background:var(--light);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-dark)}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--ink);font-weight:400;letter-spacing:-.027em;margin:0}
p{margin:0 0 1em}
.wrap{max-width:calc(var(--wrap) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:10px;top:10px}

/* ---------- Header ---------- */
.site-header{position:absolute;inset:0 0 auto 0;z-index:30;padding:41px 0 0}
.site-header .wrap{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;max-width:1240px}
.logo img{width:169px;height:auto}
.nav{display:flex;align-items:center;margin-top:16px}
.nav > ul{list-style:none;margin:0;padding:0;display:flex}
.nav li{position:relative}
.nav > ul > li > a,.nav > ul > li > button{display:flex;align-items:center;gap:6px;font-family:var(--f-head);font-size:15px;font-weight:500;letter-spacing:-.3px;text-transform:uppercase;color:#E6E6E6;padding:0 20px;line-height:23px;background:none;border:0;cursor:pointer}
.nav > ul > li > a:hover,.nav > ul > li > button:hover,.nav li.current > a{color:#fff}
.nav li.current > a{opacity:.75}
.nav .caret{width:9px;height:9px;transition:transform .2s}
.nav .sub{list-style:none;margin:0;padding:10px 0;position:absolute;left:10px;top:calc(100% + 14px);min-width:260px;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.15);opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s}
.nav .sub a{display:block;padding:8px 20px;font-family:var(--f-head);font-size:14px;color:var(--ink);line-height:1.4}
.nav .sub a:hover{background:var(--light);color:var(--green)}
.nav li:hover > .sub,.nav li:focus-within > .sub,.nav li.open > .sub{opacity:1;visibility:visible;transform:none}
.header-contact{text-align:right;font-family:var(--f-contact);line-height:1.1}
.header-contact .tel{display:block;font-size:26px;font-weight:800;color:#fff}
.header-contact .mail{display:block;font-size:14px;font-weight:700;color:#fff;margin-top:8px}
.menu-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:#fff}
.menu-toggle svg{width:28px;height:28px}

/* Mobile drawer */
.drawer{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:.25s}
.drawer.open{opacity:1;visibility:visible}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,88vw);background:var(--ink);color:#fff;padding:24px;overflow:auto;transform:translateX(100%);transition:transform .25s}
.drawer.open .drawer-panel{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.drawer-head img{width:130px}
.drawer-close{background:none;border:0;color:#fff;font-size:30px;line-height:1;cursor:pointer}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer li a,.drawer li span{display:block;padding:10px 0;font-family:var(--f-head);font-size:16px;text-transform:uppercase;color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}
.drawer li span{color:var(--green);font-size:13px;letter-spacing:.08em;border:0;padding-top:18px}
.drawer li li a{text-transform:none;font-size:15px;padding-left:12px;color:#ddd}
.drawer .btn{margin-top:24px;width:100%}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--green);color:#fff;font-family:var(--f-head);font-size:18px;font-weight:400;letter-spacing:-.4px;text-transform:uppercase;line-height:20px;padding:20px;border:0;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--green-dark);color:#fff}
.btn svg{width:16px;height:16px;flex:none}
.btn-cta{display:flex;width:100%;font-family:var(--f-body);font-size:21px;font-weight:700;line-height:40px;padding:15px 20px;border-radius:7px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-head);font-size:18px;font-weight:600;text-transform:uppercase;color:var(--green);line-height:34px}
.link-arrow svg{width:15px;height:15px}
.link-more{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-body);font-size:18px;font-weight:700;text-transform:uppercase;color:var(--grey);line-height:34px}
.link-more svg{width:9px;height:14px}
.link-more:hover{color:var(--green)}

/* ---------- Hero / page banner ---------- */
.banner{position:relative;height:440px;background:#000 center/cover no-repeat;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px var(--gutter) 40px}
.banner::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.6)}
.banner h1{position:relative;color:#fff;font-weight:700;font-size:56px;line-height:1.2;letter-spacing:-1.5px}
.banner .banner-logo{position:relative;width:340px;max-width:70%}
.lift{position:relative;margin-top:-40px;z-index:2}

/* Home hero slider */
.hero-slider{position:relative;height:600px;overflow:hidden;background:#000}
.hero-slider .slide{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity 1s}
.hero-slider .slide::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4)}
.hero-slider .slide.active{opacity:1}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;background:none;border:0;color:#fff;cursor:pointer;padding:12px;opacity:.9}
.slider-arrow svg{width:22px;height:38px}
.slider-arrow.prev{left:14px}.slider-arrow.next{right:14px}

/* ---------- Generic ---------- */
.section{padding:30px 0}
.card{background:#fff;padding:40px}
.white-card{background:#fff;padding:34px 34px 28px}
.label-rule{display:flex;align-items:center;gap:20px;margin:20px 0}
.label-rule::before,.label-rule::after{content:"";flex:1;border-top:1px solid var(--line)}
.label-rule h1,.label-rule h2{font-family:var(--f-body);font-size:16px;font-weight:600;line-height:20px;letter-spacing:2.1px;color:var(--grey);text-transform:uppercase;text-align:center;max-width:260px}
.bar{display:block;width:61px;height:4px;background:var(--green);margin:0 0 20px}
.eyebrow{font-family:var(--f-alt);font-size:12px;font-weight:500;color:var(--green);margin:0 0 6px;letter-spacing:0}
.eyebrow.muted{color:#9a9a9a}

/* Home tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 20px;padding-bottom:30px}
.tile{background:#fff;text-align:center;display:flex;flex-direction:column}
.tile img{width:100%;height:265px;object-fit:cover;transition:opacity .2s}
.tile a:hover img{opacity:.85}
.tile .tile-body{padding:12px 15px 30px;min-height:120px}
.tile h2{font-size:20px;line-height:24px;color:var(--ink)}
.tile h2 a{color:inherit}
.tile .tile-link{font-family:var(--f-head);font-size:16px;font-weight:300;line-height:31px}

/* Testimonials */
.reviews{position:relative;background:#333;color:#fff;padding:60px 20px 40px;text-align:center}

.reviews .wrap{position:relative;max-width:720px}
.reviews .src{font-family:var(--f-head);font-size:44px;font-weight:400;letter-spacing:-1px;line-height:1}
.stars{color:#FBBC04;font-size:22px;letter-spacing:2px;margin:4px 0 14px}
.review{display:none;font-size:17px;font-weight:600;line-height:1.55;min-height:300px;margin:0}
.review.active{display:block}
.review p{margin:0 0 .9em}
.review cite{display:block;font-style:normal;font-weight:700;margin-top:10px}
.dots{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin-top:40px}
.dots button{width:22px;height:26px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.dots button::before{content:"";width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35)}
.dots button.active::before{background:#fff}

/* Split feature rows (home) */
.split{display:grid;grid-template-columns:639fr 571fr;background:#fff;margin:30px 0}
.split.reverse{grid-template-columns:571fr 639fr}
.split .copy{padding:40px 60px 40px 70px;align-self:center}
.split.reverse .copy{padding:40px 60px 40px 70px}
.split h2{font-size:32px;line-height:40px;margin-bottom:10px}
.split .copy p{font-family:var(--f-head);font-size:18px;font-weight:400;line-height:30px}
.split .media img{width:100%;height:100%;object-fit:cover;min-height:500px}

/* Recent projects */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:10px 10px 30px}
.project{background:#fff;display:flex;flex-direction:column}
.project .ph{height:220px;background:center/cover no-repeat}
.project .pb{padding:20px 40px 15px;border-top:5px solid var(--ink);text-align:center;flex:1;display:flex;flex-direction:column}
.project h3{font-family:var(--f-body);font-size:22px;font-weight:700;line-height:44px;letter-spacing:-.6px}
.project .bar{margin:6px auto 18px;width:40px;height:3px}
.project p{font-size:15px;line-height:30px;text-align:left;flex:1}
.project .link-more{align-self:flex-start}

/* Contact strip */
.contact-strip{position:relative;background:#1D1D1D center/cover no-repeat;padding:60px 0}
.contact-strip::before{content:"";position:absolute;inset:0;background:rgba(29,29,29,.85)}
.contact-strip .wrap{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.cbox{background:#fff;text-align:center;padding:30px 20px 20px;border-bottom:4px solid var(--green)}
.cbox .ico{width:45px;height:45px;margin:0 auto 12px;color:var(--green)}
.cbox h2{font-family:var(--f-head);font-size:25px;font-weight:700;color:var(--grey);line-height:31px;margin-bottom:14px}
.cbox p{font-size:15px;font-weight:600;color:var(--grey);line-height:27px;margin:0}
.cbox .big{display:block;font-family:var(--f-head);font-size:20px;font-weight:700;color:var(--green);margin-top:4px}

/* Footer */
.site-footer{background:var(--green);color:#fff;padding:20px 0}
.site-footer .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.social{display:flex;flex-direction:column;gap:6px}
.social a{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.83);color:var(--ink);display:grid;place-items:center}
.social a:hover{background:#fff}
.social svg{width:13px;height:13px}
.badges{display:flex;align-items:center;gap:26px;flex-wrap:wrap;flex:1}
.badges a{display:block}
.badges img{height:auto;max-height:70px;width:auto;max-width:96px}
.foot-meta{font-size:12px;line-height:25px;color:rgba(255,255,255,.76)}
.foot-meta span+span::before{content:"|";margin:0 8px;color:#fff}
.foot-legal{background:#2f7d27;color:rgba(255,255,255,.75);font-size:12px;padding:10px 0;text-align:center}
.foot-legal a{color:#fff}
.mobile-bar{display:none}
.quote-strip{display:none}

/* ---------- Service pages ---------- */
.svc{display:grid;grid-template-columns:1fr 1fr;background:#fff;margin:80px 0}
.svc .copy{padding:30px 40px 40px 70px}
.svc .copy .intro{font-family:var(--f-alt);font-size:16px;font-weight:500;line-height:24px;letter-spacing:-.2px;color:var(--ink);margin-bottom:14px;white-space:pre-line}
.svc .bar{width:40px;height:3px;margin:0 0 20px}
.checks{list-style:none;margin:0 0 28px;padding:0}
.checks li{position:relative;font-family:var(--f-alt);font-size:16px;font-weight:300;line-height:27px;padding:0 0 12px 40px}
.checks li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;background:url(/assets/uploads/2025/09/i-check.svg) center/contain no-repeat}
.svc .media{align-self:start}
.svc .media img{width:100%;height:340px;object-fit:cover}

/* Intro card */
.intro-card{background:#fff;padding:30px 34px;font-family:var(--f-alt);font-size:16px;line-height:24px}
.intro-card p{margin:0 0 12px}

/* Case studies */
.case{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:#fff;margin:50px 0;padding:0}
.case .copy{padding:24px 24px 30px 46px}
.case h2{font-size:28px;line-height:1.3;margin:6px 0 10px}
.case .copy p{font-family:var(--f-body);font-size:15px;font-weight:500;line-height:26px}
.case .bar{width:40px;height:3px;margin:0 0 18px}
.pdf{display:inline-flex;flex-direction:column;align-items:center;gap:4px;margin-top:10px;font-family:var(--f-alt);font-size:13px;color:var(--text)}
.pdf img{width:38px}
.case .media{min-width:0}

/* Gallery slider (case studies / who we are) */
.gslider{position:relative;overflow:hidden}
.gslider .track{display:flex;transition:transform .45s ease}
.gslider .track img{flex:0 0 100%;width:100%;height:340px;object-fit:cover;cursor:zoom-in}
.gslider.two .track img{flex-basis:50%}
.gslider .dots{margin-top:6px}
.gslider .dots button::before{background:#c9c9c9}
.gslider .dots button.active::before{background:#191D23}
.gslider .slider-arrow{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.gslider .slider-arrow svg{width:16px;height:28px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}

/* Team */
.person{display:grid;grid-template-columns:1fr 1fr;background:#fff;margin:40px 0;align-items:center}
.person .copy{padding:30px 40px}
.person h2{font-size:26px;line-height:1.3;margin:4px 0 12px}
.person .bar{width:40px;height:3px;margin:0 0 30px}
.person img{width:100%;height:330px;object-fit:cover}
.person .btn{font-size:14px;padding:12px 18px}

/* Accreditations */
.accred{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 30px;background:#fff;padding:60px 40px 50px;text-align:center}
.accred a,.accred div{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text);font-size:15px;line-height:1.4}
.accred img{height:80px;width:auto;max-width:min(180px,100%);object-fit:contain}
.accred a:hover span{color:var(--green)}

/* Contact form */
.form-card{background:#fff;padding:36px 40px 40px}
.form-card h2{text-align:center;font-weight:600;font-size:28px;margin-bottom:6px}
.form-card .bar{margin:0 auto 20px;width:60px;height:3px}
.form-card .lead{font-size:18px;font-weight:600;line-height:1.45;color:var(--text);margin-bottom:24px}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fgrid .span2{grid-column:span 2}.fgrid .span3{grid-column:1/-1}
.fgrid input,.fgrid select,.fgrid textarea{width:100%;font:inherit;font-size:15px;font-weight:400;padding:15px 14px;border:0;background:#EFEFEF;color:var(--text);border-radius:0}
.fgrid textarea{min-height:64px;resize:vertical}
.fgrid input:focus,.fgrid select:focus,.fgrid textarea:focus{outline:2px solid var(--green)}
.hp{position:absolute;left:-5000px}
.form-card .btn{padding:16px 46px;margin-top:16px}
.form-note{font-size:13px;color:#777;margin-top:10px}
.alert{padding:14px 18px;margin-bottom:18px;font-size:15px}
.alert.ok{background:#e9f6e7;color:#1f5e18}.alert.err{background:#fdecec;color:#8a1f1f}

/* Who we are */
.about-card{background:#fff;padding:34px}
.about-card p{font-family:var(--f-alt);font-size:15px;line-height:24px}
.about-card .btn{font-size:15px;padding:14px 20px;margin-top:6px}

/* Portfolio */
.pf-hero{position:relative;height:420px;background:#333 center/cover;display:flex;align-items:flex-end;padding:0 0 60px}
.pf-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.2))}
.pf-hero .wrap{position:relative;width:100%}
.crumbs{font-size:14px;color:#ddd;margin-bottom:6px}
.crumbs a{color:#fff}
.pf-hero h1{color:#fff;font-size:56px;font-weight:600}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:40px 0}
.gallery a{display:block;aspect-ratio:4/3;overflow:hidden;background:#ddd}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gallery a:hover img{transform:scale(1.04)}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:40px 0}
.pf-card{background:#fff;color:var(--ink)}
.pf-card img{width:100%;height:240px;object-fit:cover}
.pf-card h2{font-size:20px;padding:14px 18px 2px}
.pf-card p{font-size:14px;color:#777;padding:0 18px 16px;margin:0}
.pf-cta{text-align:center;padding:10px 0 50px}

/* Lightbox */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:80;display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:88vh;object-fit:contain}
.lb button{position:absolute;background:none;border:0;color:#fff;font-size:42px;cursor:pointer;padding:10px 18px}
.lb .lb-close{top:10px;right:10px}.lb .lb-prev{left:10px}.lb .lb-next{right:10px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .nav,.header-contact{display:none}
  .menu-toggle{display:block}
  .site-header{position:relative;background:var(--ink);padding:14px 0}
  .site-header .wrap{align-items:center}
  .quote-strip{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--green);color:#fff;font-family:var(--f-head);font-size:14px;font-weight:600;text-transform:uppercase;padding:9px 16px}
  .quote-strip:hover{color:#fff;background:var(--green-dark)}
  .quote-strip svg{width:14px;height:14px}
  .banner{padding-top:40px}
  .hero-slider{height:420px}
  .split,.split.reverse{grid-template-columns:1fr}
  .split.reverse .media{order:-1}
  .split .media img{min-height:0;height:340px}
}
@media (max-width:900px){
  .tiles,.projects,.pf-grid{grid-template-columns:repeat(2,1fr)}
  .contact-strip .wrap{grid-template-columns:1fr;max-width:520px}
  .svc,.case,.person{grid-template-columns:1fr}
  .svc .copy,.case .copy,.person .copy{padding:28px 24px}
  .svc .media,.person .media{order:-1}
  .accred{grid-template-columns:repeat(2,minmax(0,1fr));padding:40px 20px}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .fgrid{grid-template-columns:1fr}.fgrid .span2,.fgrid .span3{grid-column:auto}
}
@media (max-width:600px){
  body{font-size:16px}
  .review{min-height:0;font-size:15px}
  .logo img{width:120px}
  .hero-slider{height:250px}
  .banner{height:220px;padding-top:30px}
  .banner h1{font-size:34px}
  .pf-hero{height:300px}.pf-hero h1{font-size:36px}
  .tiles,.projects,.pf-grid{grid-template-columns:1fr}
  .btn-cta{font-size:15px;line-height:24px}
  .split .copy{padding:30px 24px}
  .split h2{font-size:26px}
  .gslider .track img,.svc .media img{height:240px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .site-footer .wrap{flex-direction:column;align-items:flex-start}
  .social{flex-direction:row;gap:10px}.social a{width:40px;height:40px}.social svg{width:16px;height:16px}
  .accred{gap:32px 16px;padding:32px 14px}.accred img{height:64px}.accred a,.accred div{font-size:14px;overflow-wrap:anywhere}
  .badges{gap:16px}.badges img{max-height:50px;max-width:70px}
  .mobile-bar{display:grid;grid-template-columns:repeat(3,1fr);position:sticky;bottom:0;z-index:40;background:var(--green)}
  .mobile-bar a{color:#fff;text-align:center;font-size:12px;padding:8px 0 10px;display:flex;flex-direction:column;align-items:center;gap:2px}
  .mobile-bar svg{width:20px;height:20px;color:#fff}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}