:root{--blue:#0277fb;--yellow:#ffcd05;--dark:#101010;--grey:#6c757d;--light:#f4f7fb}
*{box-sizing:border-box}
body{margin:0;font-family:'DM Sans',sans-serif;color:#444;line-height:1.65;background:#fff}
img{max-width:100%;height:auto}
a{color:var(--blue);text-decoration:none}
h1,h2,h3,h4{color:var(--dark);line-height:1.2;margin:0 0 .6em}
h1{font-size:clamp(2rem,4.5vw,3.4rem)}h2{font-size:clamp(1.6rem,3vw,2.4rem)}h3{font-size:1.2rem}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.c{text-align:center}
.btn{display:inline-block;background:var(--blue);color:#fff;padding:13px 28px;border-radius:40px;font-weight:600;border:2px solid var(--blue);cursor:pointer;font-family:inherit;font-size:1rem;transition:.2s}
.btn:hover{background:var(--dark);border-color:var(--dark);color:#fff}
.btn-y{background:var(--yellow);border-color:var(--yellow);color:var(--dark)}
.btn-o{background:transparent;color:var(--blue)}
.eyebrow{display:block;color:var(--blue);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;margin-bottom:.6em}
.topbar{background:var(--dark);color:#ddd;font-size:.85rem;padding:8px 0}
.topbar .wrap{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.topbar a{color:#ddd}.topbar .social{margin-right:auto}
.social{display:flex;gap:8px}
.social a{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;display:grid;place-items:center;font-size:.75rem;font-weight:700}
.site-footer .social a,.info+.social a,.wrap .social a{background:var(--blue)}
.topbar .social a{background:rgba(255,255,255,.15)}
.site-header{position:sticky;top:0;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.08);z-index:50}
.nav{display:flex;align-items:center;gap:28px;padding-top:12px;padding-bottom:12px}
.logo img{height:52px;display:block}
.nav nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav nav a{color:var(--dark);font-weight:600}.nav nav a:hover,.nav nav a.on{color:var(--blue)}
.dd{position:relative}
.dd-menu{display:none;position:absolute;top:100%;left:-12px;background:#fff;min-width:270px;box-shadow:0 10px 30px rgba(0,0,0,.12);border-radius:8px;padding:10px 0}
.dd:hover .dd-menu{display:block}
.dd-menu a{display:block;padding:8px 20px;font-weight:500}
.help{line-height:1.2}.help small{display:block;color:var(--grey)}.help a{font-weight:700;color:var(--dark)}
.burger{display:none;background:none;border:0;font-size:1.8rem;margin-left:auto;cursor:pointer}
.hero{background:linear-gradient(120deg,#eaf3ff,#fff);padding:70px 0}
.hero-in{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center}
.hero img{border-radius:20px;box-shadow:0 20px 50px rgba(2,119,251,.2)}
.banner{background:var(--dark);color:#fff;padding:70px 0;text-align:center;background-image:linear-gradient(rgba(16,16,16,.85),rgba(16,16,16,.85)),url(img/abm-vacuum.jpg);background-size:cover;background-position:center}
.banner h1{color:#fff;font-size:clamp(1.8rem,4vw,2.8rem)}.banner a{color:var(--yellow)}.banner p{margin:0}
.sec{padding:80px 0}.alt{background:var(--light)}
.grid2,.grid3,.grid4{display:grid;gap:24px;margin-top:36px}
.grid2{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:repeat(3,1fr)}.grid4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border-radius:14px;padding:30px;box-shadow:0 6px 24px rgba(0,0,0,.06);transition:.25s;position:relative}
.card:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(2,119,251,.18)}
.num{font-size:2.2rem;font-weight:700;color:var(--yellow);display:block}
.svc{color:#444}.more{color:var(--blue);font-weight:600}
.ind{text-align:center;border-bottom:4px solid var(--yellow)}
.stats b{display:block;font-size:2.6rem;color:var(--blue)}
.logos{display:flex;flex-wrap:wrap;gap:36px;justify-content:center;align-items:center;margin-top:30px}
.logos img{height:70px;width:auto;filter:grayscale(1);opacity:.8;transition:.2s}.logos img:hover{filter:none;opacity:1}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.two.rev>div{order:0}
.two img{border-radius:18px;width:100%}
.ticks{list-style:none;padding:0}
.ticks li{padding-left:30px;position:relative;margin-bottom:10px}
.ticks li:before{content:"✓";position:absolute;left:0;color:#fff;background:var(--blue);width:20px;height:20px;border-radius:50%;font-size:.7rem;display:grid;place-items:center;top:4px}
.stat{display:flex;gap:16px;align-items:center;margin:20px 0}
.stat b{font-size:3.4rem;color:var(--blue);line-height:1}
.cs img{width:100%;border-radius:10px;margin-bottom:16px;aspect-ratio:16/9;object-fit:cover}
.cta{background:var(--blue);color:#fff;text-align:center;padding:70px 0}
.cta h2{color:#fff}.cta a:not(.btn){color:var(--yellow)}
.slider{overflow:hidden;position:relative;max-width:760px;margin:30px auto 0}
.slide{display:none;text-align:center;padding:10px 30px}.slide.on{display:block}
.slide .q{width:34px;margin:0 auto 14px;display:block}
.slide p{font-size:1.15rem}
.who{display:flex;align-items:center;gap:14px;justify-content:center;text-align:left}
.who img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.dots button{width:12px;height:12px;border-radius:50%;border:0;background:#ccd;cursor:pointer;padding:0}.dots button.on{background:var(--blue)}
.info{list-style:none;padding:0}.info li{margin-bottom:12px}.info b{display:block;color:var(--dark)}
.form{display:grid;gap:14px}
.form input,.form select,.form textarea{padding:14px 16px;border:1px solid #dde;border-radius:10px;font:inherit;width:100%}
.form button{justify-self:start}
.site-footer{background:var(--dark);color:#bbb;padding-top:60px}
.site-footer h4{color:#fff;margin-top:1em}.site-footer a{color:#bbb}.site-footer a:hover{color:var(--yellow)}
.site-footer ul{list-style:none;padding:0}.site-footer li{margin-bottom:8px}
.cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.flogo{height:56px;background:#fff;padding:6px 10px;border-radius:8px}
.copy{border-top:1px solid #333;margin-top:40px;padding:20px;text-align:center;font-size:.9rem}
@media(max-width:991px){
 .grid3,.grid4,.cols{grid-template-columns:repeat(2,1fr)}
 .two,.hero-in{grid-template-columns:1fr}
 .burger{display:block}.help,.nav>.btn{display:none}
 .nav nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:20px;box-shadow:0 10px 20px rgba(0,0,0,.1)}
 .menu-open .nav nav{display:flex}
 .dd-menu{display:block;position:static;box-shadow:none;padding:0 0 0 10px}
}
@media(max-width:600px){.grid2,.grid3,.grid4,.cols{grid-template-columns:1fr}.sec{padding:55px 0}.topbar .wrap{gap:10px;font-size:.78rem}}
.video-hero{background:#000;aspect-ratio:16/9;max-height:80vh;width:100%}
.video-hero iframe{width:100%;height:100%;border:0;display:block}

/* ---- match live site: maroon / navy palette ---- */
:root{--blue:#870d0c;--yellow:#870d0c;--dark:#111820;--light:#f3f4f6}
body{color:#4a4a4a}
h1,h2,h3,h4{font-weight:500;letter-spacing:1px;color:#000}
.btn{border-radius:40px}.btn:hover{background:#000;border-color:#000}
.btn-o{background:transparent;color:#111;border-color:#111;padding:10px 26px}.btn-o:hover{background:#111;color:#fff}
.btn-d{background:var(--dark);border-color:var(--dark);color:#fff}
.pill{display:inline-block;background:var(--blue);color:#fff;padding:9px 22px;border-radius:30px;font-weight:500;margin-bottom:18px}
.values,.inds{gap:40px 30px}
.item{display:block;position:relative;padding:10px 0 0;color:#4a4a4a}
.item .ico{display:block;font-size:2.6rem;filter:grayscale(1) opacity(.45);margin-bottom:14px}
.item .badge{position:absolute;top:0;left:56px;background:#000;color:#fff;width:26px;height:26px;border-radius:50%;font-size:.7rem;font-weight:700;display:grid;place-items:center}
.item h3{font-size:1.35rem}
.logos img{filter:none;opacity:1;height:96px}
.know{background:#f7f7f9}
.know .two{align-items:start}
.feat{margin:22px 0}.feat b{display:block;color:#000;font-weight:500;letter-spacing:1px}
.stat{display:flex;gap:60px;align-items:center;margin-top:30px}
.stat b{font-size:4rem;color:var(--blue);display:block;line-height:1}
.stat span{display:block;max-width:200px}
.ceo{display:flex;align-items:center;gap:14px}.ceo img{width:54px;height:54px;border-radius:50%;object-fit:cover}
.ceo strong{display:block;color:#000;letter-spacing:1px}.ceo small{color:var(--grey)}
.collage{position:relative;min-height:420px}
.collage .win{position:absolute;left:0;top:70px;width:46%;border-radius:50%;border:12px solid #fff;background:#fff;z-index:2}
.collage .cap{position:absolute;right:0;top:0;width:58%;border-radius:0 90px 90px 0}
.collage .cap img{width:100%;border-radius:0 0 80px 0;display:block;aspect-ratio:3/4;object-fit:cover}
.collage .cap span{position:absolute;bottom:20px;left:20px;right:20px;background:rgba(60,60,60,.7);color:#fff;border-radius:30px;padding:8px 20px}
.tiles{display:grid;grid-template-columns:1fr 1.85fr 1fr;gap:30px}
.tiles a{position:relative;display:block;overflow:hidden;height:420px}
.tiles img{width:100%;height:100%;object-fit:cover;display:block}
.tiles .n{position:absolute;top:20px;right:24px;background:#fff;color:#000;border-radius:14px;padding:12px 14px}
.tiles .capc{position:absolute;left:74px;bottom:0;background:#fff;padding:22px 30px;width:76%;box-shadow:0 6px 20px rgba(0,0,0,.1)}
.tiles .capc h3{margin:0 0 4px;font-size:1.4rem}.tiles .capc p{margin:0;color:#666}
.cases{display:flex;gap:50px;justify-content:center;margin-top:60px}
.cases img{width:370px;height:460px;object-fit:cover;border-radius:8px;display:block}
.team{background:#f8f9f9;padding-bottom:50px}
.team>img{width:100%;max-height:520px;object-fit:cover;object-position:center 70%;display:block;margin-bottom:34px}
.team h3{font-weight:500}
.bar{background:#fff;display:flex;justify-content:space-between;align-items:center;padding:34px 50px;gap:20px;flex-wrap:wrap;box-shadow:0 4px 24px rgba(0,0,0,.05);margin:-10px 0 20px}
.bar h3{margin:0;font-size:1.9rem}
.slide{padding:30px 40px}.slide p{font-size:1.6rem;color:#222;line-height:2}
.who{justify-content:center;text-align:center}.who b{display:block;color:#000;letter-spacing:1px}.who small{color:var(--blue)}
.dots button.on{background:#fff;border:2px solid var(--blue);box-shadow:inset 0 0 0 3px var(--blue)}
.marquee{overflow:hidden;white-space:nowrap;padding:30px 0}
.marquee div{display:inline-block;font-size:9rem;line-height:1.1;color:transparent;-webkit-text-stroke:2px #e3e3e3;animation:mq 30s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.gallery{display:flex;gap:30px;overflow:hidden;padding:20px 0 40px;justify-content:center}
.gallery img{height:200px;width:auto;flex:none}
.site-footer{background:var(--dark);color:#c9ced4;padding-top:0}
.fsocial{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid #2a323a;text-align:center}
.fsocial a{padding:30px 10px;color:#b6bdc5;border-right:1px solid #2a323a;font-size:1.1rem;letter-spacing:1px}
.fsocial a:last-child{border:0}
.site-footer .cols{grid-template-columns:1fr 1.5fr 1fr;padding-top:60px}
.site-footer h4{color:#fff;font-size:1.3rem;margin-top:0}
.two-col{columns:2;column-gap:40px}
.ci{margin:10px 0}.rel{color:#fff}
.copy{border:0;text-align:left;padding:30px 20px 20px;max-width:1200px;margin:0 auto}
@media(max-width:991px){.tiles{grid-template-columns:1fr}.tiles a{height:300px}.cases{flex-direction:column;align-items:center}.cases img{width:100%;max-width:370px}.fsocial{grid-template-columns:repeat(2,1fr)}.marquee div{font-size:5rem}.collage{min-height:360px}.site-footer .cols{grid-template-columns:1fr}.stat{flex-wrap:wrap;gap:24px}}

/* ---- A Better Maid homepage additions (hero overlay, wordmark, form label) ---- */
.video-hero{position:relative}
.video-hero>img{width:100%;height:100%;object-fit:cover;display:block}
.hero-text{position:absolute;inset:0;background:rgba(17,24,32,.55);display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:#fff}
.hero-text h1{color:#fff;margin-bottom:.4em}.hero-text p{font-size:1.2rem;max-width:620px;margin:0 auto 24px}
.btn-w{background:transparent;border-color:#fff;color:#fff}.btn-w:hover{background:#fff;color:#000;border-color:#fff}
.wordmark{font-size:1.5rem;color:var(--blue);letter-spacing:1px;white-space:nowrap}
h2.pill{font-size:1rem;color:#fff;letter-spacing:0;margin-bottom:18px}
.form label{display:grid;gap:6px;font-size:.9rem;color:var(--grey)}
.marquee div{animation-duration:45s}
.hero-text{pointer-events:none}.hero-text a{pointer-events:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* four-column footer (adds the Our Services column) */
.site-footer .cols.four{grid-template-columns:1.3fr 1fr 1.2fr 1.4fr}
@media(max-width:991px){.site-footer .cols.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.site-footer .cols.four{grid-template-columns:1fr}}
/* CTA band: button and phone link visible on the maroon background */
.cta .btn-y{background:#fff;border-color:#fff;color:var(--dark)}
.cta .btn-y:hover{background:var(--dark);border-color:var(--dark);color:#fff}
.cta a:not(.btn){color:#fff;text-decoration:underline;font-weight:600}
/* A Better Maid logo (white lettering, so it sits on a dark tile in the white header) */
.logo{background:var(--dark);border-radius:12px;padding:4px 14px;display:block}
.logo img{height:60px;width:auto;display:block}

/* FAQ accordion (native <details>, works without JavaScript) */
.faq-list{max-width:860px;margin:36px auto 0;display:grid;gap:14px}
.faq-list details{background:#fff;border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.06);padding:0 24px}
.faq-list summary{cursor:pointer;list-style:none;padding:20px 34px 20px 0;font-weight:500;letter-spacing:1px;color:#000;position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.6rem;color:var(--blue);line-height:1}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list details p{margin:0 0 20px}

/* ---- buttons use the logo green ---- */
:root{--green:#8cc710}
.btn,.btn-y,.btn-d,.cta .btn-y{background:var(--green);border-color:var(--green);color:var(--dark)}
.btn:hover,.btn-y:hover,.btn-d:hover,.cta .btn-y:hover{background:var(--dark);border-color:var(--dark);color:#fff}
.btn-o{background:transparent;border-color:var(--green);color:var(--dark)}
.btn-o:hover{background:var(--green);border-color:var(--green);color:var(--dark)}
.btn-w{background:transparent;border-color:#fff;color:#fff}
.btn-w:hover{background:var(--green);border-color:var(--green);color:var(--dark)}
.btn{font-weight:700}

/* hero video: fills the whole band like a background video; the iframe is oversized and cropped so YouTube's title bar, logo and controls fall outside the visible area */
.video-hero{height:min(56.25vw,80vh);aspect-ratio:auto;max-height:none;overflow:hidden;position:relative;background:#000}
.video-hero iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:125vw;height:70.3vw;min-width:100%;border:0;pointer-events:none}

/* ---- scroll-reveal animation (classes added by main.js; no effect without JavaScript) ---- */
.rv-on .rv{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.65,.3,1),transform .8s cubic-bezier(.2,.65,.3,1);transition-delay:var(--d,0s);will-change:opacity,transform}
.rv-on .rv.rv-left{transform:translateX(-45px)}
.rv-on .rv.rv-right{transform:translateX(45px)}
.rv-on .rv.rv-zoom{transform:scale(.92)}
.rv-on .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv-on .rv{opacity:1;transform:none;transition:none}}

/* ---- phones: taller hero video that still fills the band ---- */
@media(max-width:700px){
  .video-hero{height:56vh;min-height:300px}
  .video-hero iframe{width:calc(56vh * 2.222);height:calc(56vh * 1.25);min-width:100%;min-height:100%}
  .hero-text h1{font-size:1.8rem}
  .bar{padding:24px 20px}.bar h3{font-size:1.4rem}
  .slide{padding:20px 6px}.slide p{font-size:1.15rem;line-height:1.8}
  .team>img{max-height:300px}
  .cases img{height:360px}
  .gallery img{height:150px}
  .wrap{padding:0 16px}
  .btn{padding:12px 22px}
}

/* ---- header styled like the reference: white top bar with maroon icons, centred menu, outlined square CTA ---- */
.topbar{background:#fff;color:#222;border-bottom:1px solid #e6e6e6;font-size:.95rem;padding:10px 0}
.topbar a{color:#222}.topbar a:hover{color:var(--blue)}
.topbar .wrap{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.tb-left{margin-right:auto;display:inline-flex;align-items:center;gap:8px}
.tb-left svg,.tb-item svg{color:var(--blue);flex:none}
.tb-item{display:inline-flex;align-items:center;gap:8px;padding:0 22px}
.tb-item+.tb-item{border-left:1px solid #ddd;padding-right:0}
.site-header{box-shadow:none;border-bottom:1px solid #eee}
.nav{gap:24px;padding-top:14px;padding-bottom:14px}
.logo{padding:3px 12px}.logo img{height:68px}
.nav nav{flex:1;justify-content:center;margin-left:0;gap:clamp(22px,3.4vw,52px)}
.nav nav a{color:#111;font-weight:500;font-size:1.05rem}
.dd>a::after{content:"";display:inline-block;width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin-left:9px;position:relative;top:-3px}
.help{display:flex;align-items:center;gap:12px;line-height:1.35;color:#111}
.help span{display:block}.help small{display:block;color:#111;font-size:1rem}.help b{font-weight:500;font-size:1.05rem;letter-spacing:.3px}
.btn-hdr,.btn-hdr:hover{border-radius:0}
.btn-hdr{background:#fff;border:1px solid #111;color:#111;font-weight:500;padding:16px 38px;white-space:nowrap}
.btn-hdr:hover{background:#111;border-color:#111;color:#fff}
@media(max-width:1100px){.help small{display:none}.nav{gap:16px}.btn-hdr{padding:14px 22px}}
@media(max-width:991px){
  .topbar .wrap{justify-content:flex-start}.tb-left{width:100%;margin-bottom:4px}.tb-item{padding:0 14px 0 0;border:0!important}
  .logo img{height:54px}
  .help{display:none}
  .nav nav{flex:none;margin-left:0}
}
@media(max-width:600px){.topbar{font-size:.8rem}.tb-item svg,.tb-left svg{display:none}.tb-item{padding-right:10px}}

/* ---- service page banner: tall photo of the service, left-aligned title and chevron breadcrumb ---- */
.banner-hero{min-height:500px;display:flex;align-items:flex-end;text-align:left;padding:0 0 56px;background-image:linear-gradient(rgba(17,24,32,.58),rgba(17,24,32,.58)),var(--bg);background-size:cover;background-position:center}
.banner-hero .wrap{width:100%}
.banner-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;margin-bottom:12px}
.banner-hero p{display:flex;align-items:center;gap:0;font-size:1.05rem}
.banner-hero p a{color:#fff}
.banner-hero .sep{margin:0 14px;font-size:1.5rem;line-height:1}
@media(max-width:700px){.banner-hero{min-height:340px;padding-bottom:36px}}

/* ---- service intro: curved photo with maroon swoosh on the left, big bold heading on the right ---- */
.split{position:relative;overflow:hidden;background:#e8edf1;padding:70px 0}
.split-in{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center;position:relative;z-index:1}
.split-img{position:relative;aspect-ratio:5/4;width:100%}
.split-img .band{position:absolute;inset:0;background:var(--blue);clip-path:url(#swoosh-band)}
.split-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;clip-path:url(#swoosh-img)}
.split-text{text-align:right}
.split-text h2{font-size:clamp(2.1rem,4.4vw,3.7rem);font-weight:800;line-height:1.1;letter-spacing:0;color:#000;margin-bottom:.5em}
.split-text p{color:#6b7078;font-size:1.05rem;line-height:1.8}
.split-text .btn{margin-top:12px}
.deco{position:absolute;pointer-events:none;z-index:0}
.deco-x{width:46px;height:46px;right:5%;top:20px;transform:rotate(14deg);background:linear-gradient(45deg,transparent 45%,#c3c8ce 45%,#c3c8ce 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,#c3c8ce 45%,#c3c8ce 55%,transparent 55%)}
.deco-dots{width:60px;height:110px;left:34px;top:20px;background:radial-gradient(circle,var(--blue) 3.5px,transparent 4px) 0 0/20px 20px}
.deco-wave{left:48%;bottom:36px;opacity:.9}
@media(max-width:900px){
  .split{padding:50px 0}
  .split-in{grid-template-columns:1fr}
  .split-text{text-align:left}
  .deco-wave,.deco-x{display:none}
}

/* hero video at its full 16:9 height; iframe only slightly oversized so YouTube's title bar and logo stay outside the visible area */
.video-hero{height:56.25vw;min-height:0;max-height:none}
.video-hero iframe{width:114vw;height:64.1vw;min-width:0;min-height:0}
@media(max-width:700px){
  .video-hero{height:75vw;min-height:0}
  .video-hero iframe{width:152vw;height:85.5vw;min-width:0;min-height:0}
}

/* hero video: full width, nothing cut off at the sides; only a thin strip is trimmed at the top and bottom to hide YouTube's title bar and logo */
.video-hero{height:49vw;min-height:0;max-height:none}
.video-hero iframe{width:100vw;height:56.25vw;min-width:0;min-height:0}
@media(max-width:700px){
  .video-hero{height:49vw;min-height:0}
  .video-hero iframe{width:100vw;height:56.25vw;min-width:0;min-height:0}
}

/* ---- About block on the homepage: icon features, oval photo in a white ring, rounded photo with caption, sparkles ---- */
.know{position:relative;overflow:hidden;background:#f7f7f9}
.know .two{grid-template-columns:1.15fr 1fr;align-items:center}
.kfeat{display:flex;gap:18px;align-items:flex-start;margin:26px 0}
.kicon{position:relative;flex:none;width:64px;height:64px;display:grid;place-items:center}
.kicon::before{content:"";position:absolute;left:2px;top:4px;width:30px;height:20px;background:#f5a623;transform:skewY(-18deg);z-index:0}
.kicon svg{position:relative;z-index:1}
.kfeat h3{margin:0 0 4px;font-size:1.1rem}.kfeat p{margin:0}
.know-foot{display:flex;align-items:center;gap:36px;flex-wrap:wrap;margin-top:34px}
.know-call{display:flex;align-items:center;gap:14px;color:#111;line-height:1.3}
.know-call small{display:block;color:var(--grey)}.know-call b{font-weight:600;font-size:1.1rem}
.kphone{font-size:1.6rem;filter:grayscale(1)}
.know .collage{min-height:520px}
.know .collage .win{aspect-ratio:3/4;object-fit:cover;width:46%;top:60px;border:16px solid #fff;box-shadow:0 8px 30px rgba(0,0,0,.08)}
.know .collage .cap{top:0;width:56%}
.sponge{position:absolute;left:44%;bottom:6px;font-size:3.2rem;z-index:3;filter:sepia(1) saturate(3) hue-rotate(-10deg)}
.spark{position:absolute;color:#cfd5d9;z-index:0;pointer-events:none}
.sp1{left:46%;top:72%;font-size:2.4rem}.sp2{left:60%;bottom:6%;font-size:1.3rem;color:#7fbfb0}.sp3{right:4%;top:10%;font-size:1rem;color:#7fbfb0}
@media(max-width:900px){.know .two{grid-template-columns:1fr}.know .collage{min-height:420px}.know-foot{gap:20px}}

/* ---- services slider (homepage): 3 slides on desktop, 1 on phones, swipe + arrows + auto-play ---- */
.tiles{display:block;position:relative;grid-template-columns:none;gap:0}
.tiles-track{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tiles-track::-webkit-scrollbar{display:none}
.tiles .tile{flex:0 0 calc((100% - 60px) / 3);scroll-snap-align:start;position:relative;display:block;overflow:hidden;height:420px}
.tiles .tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.tiles .tile:hover img{transform:scale(1.05)}
.tiles .capc{left:24px;right:24px;width:auto;bottom:0}
.tiles-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:#111;font-size:1.8rem;line-height:1;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.tiles-btn:hover{background:var(--green);}
.tiles-btn.prev{left:14px}.tiles-btn.next{right:14px}
@media(max-width:991px){.tiles .tile{flex-basis:calc((100% - 30px) / 2)}}
@media(max-width:600px){.tiles-track{gap:0}.tiles .tile{flex-basis:100%;height:340px}.tiles-btn{width:40px;height:40px}}

/* About collage (oval photo + caption photo) is hidden on phones */
@media(max-width:700px){.know .collage,.know .spark{display:none}}

/* top info bar (hours, address, email) is hidden on phones */
@media(max-width:700px){.topbar{display:none}}

/* About block: centre the button and phone number on phones */
@media(max-width:700px){.know-foot{flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center}.know-call{justify-content:center}.know-foot .btn{margin:0}}

/* footer link hover: green so it stays readable on the dark background */
.site-footer a:hover,.fsocial a:hover{color:var(--green)}

/* footer top strip: on phones/tablets drop "Contact Us" so the links make a clean 2x2 grid */
@media(max-width:991px){.fsocial a:nth-child(5){display:none}}