
:root{
  --ink:#111714;
  --paper:#f5f4ef;
  --white:#ffffff;
  --muted:#66706a;
  --line:#dfe3df;
  --lime:#c9ff52;
  --lime-dark:#173b2b;
  --terracotta:#d86d44;
  --sand:#efe7db;
  --radius:22px;
  --shadow:0 24px 70px rgba(13,24,18,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",Arial,sans-serif;-webkit-font-smoothing:antialiased}
body.nav-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%}
button,input,select,textarea{font:inherit}
button{color:inherit}
.container{width:min(1200px,calc(100% - 48px));margin:0 auto}
.kicker{font-size:12px;line-height:1.2;text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:#707a74}
.kicker.light{color:rgba(255,255,255,.68)}
.display{font-family:"Manrope",Arial,sans-serif;font-size:clamp(48px,7vw,98px);line-height:.93;letter-spacing:-.065em;margin:0}
.h2{font-family:"Manrope",Arial,sans-serif;font-size:clamp(38px,5vw,68px);line-height:.98;letter-spacing:-.055em;margin:0}
.h3{font-family:"Manrope",Arial,sans-serif;font-size:24px;line-height:1.15;letter-spacing:-.035em;margin:0}
.body-lg{font-size:18px;line-height:1.7;color:var(--muted)}
.body-md{font-size:15px;line-height:1.7;color:var(--muted)}
.small{font-size:13px;line-height:1.55;color:var(--muted)}
.section{padding:108px 0}
.section.white{background:#fff}
.section.dark{background:var(--ink);color:#fff}
.section.soft{background:#efeee8}
.section-heading{display:grid;grid-template-columns:.78fr 1.22fr;gap:70px;align-items:end;margin-bottom:52px}
.section-heading p{margin:0;max-width:650px}
.section-heading .kicker{margin-bottom:14px}
.section-heading-copy{display:flex;flex-direction:column;gap:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 20px;border-radius:999px;border:1px solid transparent;font-weight:700;font-size:14px;transition:.25s ease;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn.dark{background:var(--ink);color:#fff}
.btn.light{background:#fff;color:var(--ink)}
.btn.lime{background:var(--lime);color:var(--ink)}
.btn.outline{border-color:rgba(255,255,255,.3);color:#fff;background:rgba(255,255,255,.04)}
.btn.outline-dark{border-color:#cfd5d0;color:var(--ink);background:transparent}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border:1px solid rgba(255,255,255,.25);border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.reveal.visible{opacity:1;transform:none}

/* Header */
.site-header{position:fixed;z-index:100;top:16px;left:0;width:100%;pointer-events:none}
.nav-shell{pointer-events:auto;width:min(1200px,calc(100% - 32px));margin:auto;min-height:66px;padding:9px 10px 9px 16px;border:1px solid rgba(255,255,255,.18);background:rgba(16,22,18,.82);backdrop-filter:blur(18px);border-radius:18px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 12px 36px rgba(0,0,0,.15)}
.brand{display:flex;align-items:center;gap:11px;color:#fff;font-family:"Manrope",Arial,sans-serif;font-size:15px;font-weight:800;letter-spacing:.12em}
.brand-box{width:37px;height:37px;border-radius:10px;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-size:16px;letter-spacing:0}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{font-size:13px;font-weight:600;color:rgba(255,255,255,.75);padding:11px 12px;border-radius:10px}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-links .nav-cta{background:var(--lime);color:var(--ink);margin-left:8px;padding-left:16px;padding-right:16px}
.menu-button{display:none;border:0;background:transparent;width:44px;height:44px;padding:10px;cursor:pointer}
.menu-button i{display:block;height:2px;background:#fff;margin:5px 0;border-radius:3px}

/* Home split */
.home-hero{background:#0d1310;color:#fff;padding:96px 16px 16px;min-height:100svh;display:flex;flex-direction:column}
.home-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;width:min(1200px,100%);margin:0 auto;padding:28px 6px 34px}
.home-intro h1{font-family:"Manrope",Arial,sans-serif;font-size:clamp(39px,5vw,72px);line-height:.98;letter-spacing:-.055em;margin:0;max-width:760px}
.home-intro p{max-width:370px;margin:0;color:rgba(255,255,255,.62);line-height:1.65}
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(1400px,100%);margin:auto;flex:1}
.split-card{position:relative;min-height:560px;border-radius:24px;overflow:hidden;color:#fff;isolation:isolate;display:flex;align-items:flex-end;padding:34px}
.split-card img{position:absolute;inset:0;height:100%;object-fit:cover;z-index:-3;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.split-card:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(0,0,0,.05) 15%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.88) 100%)}
.split-card:after{content:"";position:absolute;inset:0;z-index:-1;border:1px solid rgba(255,255,255,.16);border-radius:inherit}
.split-card:hover img{transform:scale(1.035)}
.split-card-content{width:100%;display:grid;grid-template-columns:1fr auto;gap:25px;align-items:end}
.split-card h2{font-family:"Manrope",Arial,sans-serif;font-size:clamp(36px,4vw,58px);line-height:.95;letter-spacing:-.055em;margin:12px 0 15px}
.split-card p{max-width:480px;margin:0;color:rgba(255,255,255,.72);line-height:1.6}
.split-number{font-family:"Manrope",Arial,sans-serif;font-size:18px;font-weight:800;border:1px solid rgba(255,255,255,.3);border-radius:999px;width:50px;height:50px;display:grid;place-items:center}
.home-trust{width:min(1200px,100%);margin:16px auto 0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden}
.trust-item{padding:17px 18px;border-right:1px solid rgba(255,255,255,.12)}
.trust-item:last-child{border-right:0}
.trust-item strong{display:block;font-size:13px}
.trust-item span{display:block;color:rgba(255,255,255,.52);font-size:12px;margin-top:4px}

/* About home */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.about-copy{display:flex;flex-direction:column;gap:24px}
.about-copy p{margin:0}
.about-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.about-list div{padding:18px;border-top:1px solid #bfc6c1}
.about-list strong{display:block;font-family:"Manrope",Arial,sans-serif;font-size:16px;margin-bottom:6px}
.image-stack{position:relative;min-height:560px}
.image-stack .main-photo{position:absolute;inset:0 70px 50px 0;height:calc(100% - 50px);object-fit:cover;border-radius:26px}
.image-stack .small-photo{position:absolute;width:45%;height:42%;right:0;bottom:0;object-fit:cover;border-radius:20px;border:8px solid var(--paper)}
.image-caption{position:absolute;left:24px;bottom:74px;background:#fff;border-radius:14px;padding:14px 16px;font-size:12px;box-shadow:var(--shadow);max-width:210px}

/* cards */
.service-overview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.service-overview{padding:26px;min-height:260px;background:#fff;border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column}
.service-overview .num{font-family:"Manrope",Arial,sans-serif;font-weight:800;font-size:12px;color:#8a938d}
.service-overview h3{margin-top:auto;margin-bottom:12px}
.service-overview p{margin:0}
.service-overview.dark-card{background:var(--ink);color:#fff;border-color:var(--ink)}
.service-overview.dark-card p{color:rgba(255,255,255,.58)}

/* projects */
.project-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:12px}
.project-card{position:relative;min-height:430px;border-radius:22px;overflow:hidden;color:#fff;isolation:isolate}
.project-card img{position:absolute;inset:0;height:100%;object-fit:cover;z-index:-2}
.project-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.78));z-index:-1}
.project-card-content{position:absolute;left:24px;right:24px;bottom:24px}
.project-card h3{font-family:"Manrope",Arial,sans-serif;font-size:25px;letter-spacing:-.035em;margin:8px 0}
.project-card p{margin:0;color:rgba(255,255,255,.68);font-size:13px;line-height:1.55}

/* banner */
.big-banner{padding:72px;border-radius:28px;background:var(--lime);display:grid;grid-template-columns:1.4fr .6fr;gap:60px;align-items:end}
.big-banner.reno{background:#e7794f}
.big-banner p{margin:0 0 22px;max-width:470px;color:#273029;line-height:1.6}

/* Inner hero */
.inner-hero{min-height:820px;height:94svh;max-height:940px;position:relative;color:#fff;display:flex;align-items:flex-end;overflow:hidden;background:#111}
.inner-hero img{position:absolute;inset:0;height:100%;object-fit:cover;z-index:-3}
.inner-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,11,9,.88) 0%,rgba(7,11,9,.62) 45%,rgba(7,11,9,.14) 78%),linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.45));z-index:-2}
.inner-hero.reno:before{background:linear-gradient(90deg,rgba(26,17,13,.9) 0%,rgba(26,17,13,.62) 48%,rgba(26,17,13,.14) 80%),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.48))}
.hero-copy{padding:165px 0 74px;max-width:800px}
.hero-copy .kicker{margin-bottom:18px}
.hero-copy p{max-width:630px;color:rgba(255,255,255,.72);font-size:19px;line-height:1.65;margin:28px 0 32px}
.hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}

/* intro stats */
.stats-strip{background:#fff;border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:1.3fr repeat(3,.7fr)}
.stat-intro,.stat{padding:34px 26px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat-intro strong{font-family:"Manrope",Arial,sans-serif;font-size:18px}
.stat strong{display:block;font-family:"Manrope",Arial,sans-serif;font-size:24px;letter-spacing:-.04em}
.stat span{display:block;margin-top:7px;color:var(--muted);font-size:12px;line-height:1.5}

/* services internal */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.service-card{padding:28px;background:#fff;border:1px solid var(--line);border-radius:20px;min-height:275px;display:flex;flex-direction:column;transition:.25s ease}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.service-card .service-num{font-family:"Manrope",Arial,sans-serif;font-size:12px;font-weight:800;color:#8e9791}
.service-card h3{margin-top:auto;margin-bottom:12px}
.service-card p{margin:0}

/* target audience */
.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.audience-card{padding:30px;border-radius:20px;background:#181f1b;border:1px solid rgba(255,255,255,.09);min-height:220px}
.audience-card .label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.45)}
.audience-card h3{margin:50px 0 10px}
.audience-card p{color:rgba(255,255,255,.6);margin:0;line-height:1.65}

/* process */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #bbc2bd}
.process-step{padding:26px 28px 10px 0;border-right:1px solid #d7dbd8;margin-right:28px;min-height:245px}
.process-step:last-child{border-right:0;margin-right:0}
.process-step .step{font-family:"Manrope",Arial,sans-serif;font-size:12px;font-weight:800;color:#838d87}
.process-step h3{margin:72px 0 12px}
.process-step p{margin:0}

/* feature with image */
.feature-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feature-photo{min-height:620px;border-radius:24px;overflow:hidden}
.feature-photo img{height:100%;object-fit:cover}
.feature-copy{border-radius:24px;background:#fff;padding:54px;display:flex;flex-direction:column;justify-content:center}
.feature-copy .h2{margin:14px 0 22px}
.feature-copy p{margin:0 0 30px}
.benefit-list{display:grid;gap:0}
.benefit{padding:16px 0;border-top:1px solid var(--line)}
.benefit strong{display:block;font-size:14px;margin-bottom:5px}
.benefit span{font-size:13px;color:var(--muted);line-height:1.55}

/* sample projects internal */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.case-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.case-card img{height:260px;object-fit:cover}
.case-copy{padding:22px}
.case-copy .tag{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7c857f}
.case-copy h3{margin:10px 0 8px}
.case-copy p{margin:0}

/* FAQ */
.faq-wrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px}
.faq-list{border-top:1px solid #c7cdc9}
details{border-bottom:1px solid #c7cdc9}
summary{cursor:pointer;list-style:none;padding:22px 34px 22px 0;font-weight:700;position:relative}
summary::-webkit-details-marker{display:none}
summary:after{content:"";position:absolute;right:4px;top:50%;width:12px;height:12px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:.2s}
details[open] summary:after{transform:translateY(-25%) rotate(225deg)}
details p{margin:0;padding:0 0 22px;max-width:760px;color:var(--muted);line-height:1.7;font-size:14px}

/* Contact */
.contact-shell{display:grid;grid-template-columns:.8fr 1.2fr;gap:75px}
.contact-copy .h2{margin:14px 0 22px}
.contact-copy p{margin:0}
.contact-data{margin-top:34px;display:grid;gap:10px}
.contact-data div{padding:15px 0;border-top:1px solid #cdd2ce}
.contact-data span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#7c857f;display:block;margin-bottom:6px}
.contact-data strong{font-size:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:12px;font-weight:700}
.field input,.field select,.field textarea{width:100%;border:1px solid #d5dad6;background:#fff;border-radius:13px;padding:14px 15px;outline:none}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#7d8b82;box-shadow:0 0 0 3px rgba(80,100,88,.08)}
.form-note{grid-column:1/-1;font-size:11px;color:#7b857e;line-height:1.5;margin:3px 0 0}
.toast{position:fixed;right:22px;bottom:22px;background:#111714;color:#fff;border-radius:13px;padding:15px 17px;z-index:200;max-width:360px;box-shadow:0 20px 60px rgba(0,0,0,.2);opacity:0;transform:translateY(20px);pointer-events:none;transition:.25s}
.toast.show{opacity:1;transform:none}

/* footer */
.footer{background:#0c110e;color:#fff;padding:70px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.3fr .7fr .7fr .7fr;gap:50px;padding-bottom:56px}
.footer-brand p{color:rgba(255,255,255,.5);line-height:1.65;max-width:380px;margin:18px 0 0}
.footer-col h4{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.42);margin:0 0 15px}
.footer-col a,.footer-col span{display:block;font-size:13px;color:rgba(255,255,255,.7);padding:5px 0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:rgba(255,255,255,.4)}

/* mobile */
@media(max-width:980px){
  .section{padding:82px 0}
  .section-heading,.two-col,.faq-wrap,.contact-shell{grid-template-columns:1fr;gap:34px}
  .service-overview-grid{grid-template-columns:1fr 1fr}
  .project-grid{grid-template-columns:1fr 1fr}
  .project-card:first-child{grid-column:1/-1}
  .services-grid,.case-grid{grid-template-columns:1fr 1fr}
  .process-grid{grid-template-columns:1fr 1fr}
  .process-step{border-bottom:1px solid #d7dbd8}
  .feature-split{grid-template-columns:1fr}
  .feature-photo{min-height:470px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat-intro{grid-column:1/-1;border-bottom:1px solid var(--line)}
  .big-banner{grid-template-columns:1fr;padding:50px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:800px){
  .nav-links{position:absolute;top:76px;left:16px;right:16px;display:none;flex-direction:column;align-items:stretch;background:#111714;border:1px solid rgba(255,255,255,.1);padding:10px;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
  .nav-open .nav-links{display:flex}
  .nav-links a{padding:14px}
  .nav-links .nav-cta{margin:4px 0 0;text-align:center}
  .menu-button{display:block}
  .home-hero{padding-top:92px}
  .home-intro{align-items:flex-start;flex-direction:column;padding-top:18px}
  .split-grid{grid-template-columns:1fr}
  .split-card{min-height:520px}
  .home-trust{grid-template-columns:1fr 1fr}
  .trust-item:nth-child(2){border-right:0}
  .trust-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}
  .inner-hero{min-height:720px;height:auto}
  .inner-hero:before{background:linear-gradient(90deg,rgba(7,11,9,.88),rgba(7,11,9,.4)),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.55))}
  .hero-copy{padding-top:155px}
  .audience-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .container{width:min(100% - 30px,1200px)}
  .section{padding:68px 0}
  .display{font-size:54px}
  .h2{font-size:40px}
  .body-lg{font-size:16px}
  .home-hero{padding-left:8px;padding-right:8px;padding-bottom:8px}
  .home-intro{padding-left:8px;padding-right:8px}
  .home-intro h1{font-size:43px}
  .split-card{min-height:500px;padding:24px;border-radius:18px}
  .split-card-content{grid-template-columns:1fr}
  .split-number{display:none}
  .service-overview-grid,.services-grid,.case-grid,.stats-grid,.process-grid{grid-template-columns:1fr}
  .stat-intro,.stat{grid-column:auto;border-right:0;border-bottom:1px solid var(--line)}
  .project-grid{grid-template-columns:1fr}
  .project-card:first-child{grid-column:auto}
  .project-card{min-height:360px}
  .about-list{grid-template-columns:1fr}
  .image-stack{min-height:470px}
  .image-stack .main-photo{inset:0 35px 40px 0;height:calc(100% - 40px)}
  .image-stack .small-photo{width:50%;height:36%}
  .feature-photo{min-height:390px}
  .feature-copy{padding:30px 24px}
  .big-banner{padding:36px 24px}
  .form-grid{grid-template-columns:1fr}
  .field.full,.form-note{grid-column:auto}
  .footer-grid{grid-template-columns:1fr}
  .footer-brand{grid-column:auto}
  .footer-bottom{flex-direction:column}
  .home-trust{grid-template-columns:1fr}
  .trust-item{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .reveal{opacity:1;transform:none}
}


/* Area selector landing */
.landing-page{overflow:hidden;background:#0b110e}
.landing-shell{position:fixed;inset:0;overflow:hidden;color:#fff}
.landing-backdrop{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(8,15,11,.92),rgba(8,15,11,.54)),
  url("assets/renovation-finished.svg") center/cover no-repeat;transform:scale(1.03)}
.landing-backdrop:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 20%,rgba(201,255,82,.18),transparent 28%),linear-gradient(180deg,transparent 45%,rgba(5,9,7,.68))}
.landing-brand{position:absolute;z-index:2;left:38px;right:38px;top:30px;display:flex;align-items:center;justify-content:space-between}
.landing-label{font-size:12px;color:rgba(255,255,255,.56);text-transform:uppercase;letter-spacing:.14em}
.landing-copy{position:absolute;z-index:2;left:max(38px,5vw);bottom:54px;max-width:620px}
.landing-copy h1{font-family:"Manrope",Arial,sans-serif;font-size:clamp(52px,7vw,96px);line-height:.9;letter-spacing:-.065em;margin:14px 0 22px}
.landing-copy p{max-width:480px;color:rgba(255,255,255,.65);font-size:17px;line-height:1.6;margin:0}

.area-modal{position:fixed;z-index:500;inset:0;display:grid;place-items:center;padding:24px;background:rgba(4,8,6,.62);backdrop-filter:blur(14px)}
.area-modal-panel{width:min(1080px,100%);max-height:calc(100svh - 48px);overflow:auto;background:#f7f6f1;border:1px solid rgba(255,255,255,.22);border-radius:28px;box-shadow:0 34px 100px rgba(0,0,0,.34);padding:30px}
.area-modal-head{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:end;padding:4px 4px 26px}
.area-modal-head h1{font-family:"Manrope",Arial,sans-serif;font-size:clamp(30px,4vw,50px);line-height:1;letter-spacing:-.05em;margin:10px 0 0}
.area-modal-head p{font-size:14px;line-height:1.65;color:#67716b;margin:0}
.area-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.area-choice{display:block;background:#fff;border:1px solid #dde2de;border-radius:22px;overflow:hidden;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.area-choice:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(12,22,16,.12)}
.area-choice-cleaning:hover{border-color:#a6cc78}
.area-choice-renovation:hover{border-color:#d9a083}
.area-choice-media{height:235px;overflow:hidden;background:#dce6e0}
.area-choice-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.area-choice:hover .area-choice-media img{transform:scale(1.025)}
.area-choice-body{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:24px}
.area-choice-index{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;font-family:"Manrope",Arial,sans-serif;font-size:12px;font-weight:800;background:#edf1ed}
.area-choice-cleaning .area-choice-index{background:#e4f3da;color:#23573c}
.area-choice-renovation .area-choice-index{background:#f4e1d7;color:#72432f}
.area-choice h2{font-family:"Manrope",Arial,sans-serif;font-size:29px;line-height:1.05;letter-spacing:-.04em;margin:7px 0 10px}
.area-choice p{font-size:13px;line-height:1.6;color:#69726c;margin:0 0 20px}
.area-choice-link{display:inline-block;font-size:13px;font-weight:800;padding-bottom:4px;border-bottom:1px solid currentColor}
.area-choice-cleaning .area-choice-link{color:#245f43}
.area-choice-renovation .area-choice-link{color:#8a4b31}
.area-modal-foot{display:flex;justify-content:space-between;gap:20px;padding:18px 4px 0;color:#89908b;font-size:10px;line-height:1.4}

/* Distinct service environments */
.cleaning-theme{--area-accent:#c9ff52;--area-dark:#123f2f}
.renovation-theme{--area-accent:#e7794f;--area-dark:#593526;--paper:#f4f0ea}
.cleaning-theme .brand-box,.cleaning-theme .nav-cta,.cleaning-theme .btn.lime{background:var(--area-accent);color:#111714}
.renovation-theme .brand-box,.renovation-theme .nav-cta,.renovation-theme .btn.lime{background:var(--area-accent);color:#fff}
.renovation-theme .section.soft{background:#eee6dc}
.renovation-theme .kicker:not(.light){color:#8a5c47}
.renovation-theme .service-card:hover{border-color:#d9ad97}
.cleaning-theme .service-card:hover{border-color:#b7d992}
.renovation-theme .big-banner{background:#e7794f}
.cleaning-theme .big-banner{background:#c9ff52}
.renovation-theme .inner-hero:before{background:linear-gradient(90deg,rgba(28,17,12,.9) 0%,rgba(28,17,12,.64) 46%,rgba(28,17,12,.16) 82%),linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.46))}
.cleaning-theme .inner-hero:before{background:linear-gradient(90deg,rgba(5,19,14,.9) 0%,rgba(5,19,14,.6) 44%,rgba(5,19,14,.12) 80%),linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.42))}
.renovation-theme .audience-card{background:#251b16}
.cleaning-theme .audience-card{background:#15231c}

@media(max-width:760px){
  .landing-brand{left:20px;right:20px;top:18px}
  .landing-label{display:none}
  .landing-copy{left:22px;right:22px;bottom:28px}
  .landing-copy h1{font-size:52px}
  .area-modal{padding:10px}
  .area-modal-panel{max-height:calc(100svh - 20px);padding:18px;border-radius:20px}
  .area-modal-head{grid-template-columns:1fr;gap:12px;padding:4px 2px 18px}
  .area-modal-head h1{font-size:32px}
  .area-choice-grid{grid-template-columns:1fr}
  .area-choice-media{height:155px}
  .area-choice-body{padding:18px}
  .area-choice h2{font-size:25px}
  .area-choice p{margin-bottom:14px}
  .area-modal-foot{display:none}
}


/* Motion system */
.scroll-progress{
  position:fixed;z-index:450;left:0;top:0;width:100%;height:3px;
  transform:scaleX(0);transform-origin:left center;
  background:var(--area-accent,var(--lime));pointer-events:none;
  will-change:transform;
}
.site-header{transition:transform .38s ease,opacity .38s ease}
.site-header.nav-compact .nav-shell{box-shadow:0 16px 44px rgba(0,0,0,.2)}

.reveal{
  --motion-x:0px;--motion-y:38px;--motion-scale:1;--motion-rotate:0deg;--motion-delay:0ms;
  opacity:0;
  transform:translate3d(var(--motion-x),var(--motion-y),0) scale(var(--motion-scale)) rotate(var(--motion-rotate));
  filter:blur(7px);
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1) var(--motion-delay),
    transform .9s cubic-bezier(.16,1,.3,1) var(--motion-delay),
    filter .8s ease var(--motion-delay);
  will-change:transform,opacity,filter;
}
.reveal.visible{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0);filter:blur(0)}
.reveal.motion-left{--motion-x:-54px;--motion-y:8px}
.reveal.motion-right{--motion-x:54px;--motion-y:8px}
.reveal.motion-scale{--motion-y:18px;--motion-scale:.94}
.reveal.motion-tilt-left{--motion-x:-28px;--motion-y:32px;--motion-rotate:-2.5deg}
.reveal.motion-tilt-right{--motion-x:28px;--motion-y:32px;--motion-rotate:2.5deg}
.reveal.motion-rise{--motion-y:62px}

.section-heading{
  position:relative;
}
.section-heading.motion-heading:after{
  content:"";position:absolute;left:0;right:0;bottom:-22px;height:1px;
  background:currentColor;opacity:.18;
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.05s cubic-bezier(.16,1,.3,1) .18s;
}
.section-heading.motion-heading.visible:after{transform:scaleX(1)}

.motion-title{
  opacity:0;transform:translateY(28px);
  clip-path:inset(0 0 100% 0);
  transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1),clip-path .9s cubic-bezier(.16,1,.3,1);
}
.motion-title.title-visible{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

.media-reveal{
  clip-path:inset(0 0 100% 0 round 22px);
  transform:translateY(20px) scale(.985);
  transition:clip-path 1.05s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1);
}
.media-reveal.media-visible{clip-path:inset(0 0 0 0 round 22px);transform:none}

.parallax-media{overflow:hidden}
.parallax-media>img{
  transform:translate3d(0,var(--parallax-y,0px),0) scale(1.07);
  transform-origin:center;
  will-change:transform;
}
.inner-hero>img{
  transform:translate3d(0,var(--hero-parallax,0px),0) scale(1.035);
  will-change:transform;
}

.service-card,.service-overview,.audience-card,.case-card,.process-step{
  --card-delay:0ms;
}
.service-card.reveal,.service-overview.reveal,.audience-card.reveal,.case-card.reveal,.process-step.reveal{
  --motion-delay:var(--card-delay);
}

.process-step.visible .step{
  animation:stepPulse .65s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--card-delay) + 180ms);
}
@keyframes stepPulse{
  0%{transform:scale(.7);opacity:.15}
  65%{transform:scale(1.15);opacity:1}
  100%{transform:scale(1);opacity:1}
}

.big-banner.reveal.visible{
  animation:bannerSettle .95s cubic-bezier(.16,1,.3,1) both;
}
@keyframes bannerSettle{
  0%{border-radius:44px}
  100%{border-radius:28px}
}

.area-modal{
  animation:modalBackdropIn .42s ease both;
}
.area-modal-panel{
  animation:modalPanelIn .72s cubic-bezier(.16,1,.3,1) both;
}
.area-choice{
  opacity:0;transform:translateY(24px) scale(.98);
  animation:choiceIn .72s cubic-bezier(.16,1,.3,1) forwards;
}
.area-choice:nth-child(1){animation-delay:.18s}
.area-choice:nth-child(2){animation-delay:.29s}
.area-modal-head>*{opacity:0;transform:translateY(15px);animation:modalTextIn .65s cubic-bezier(.16,1,.3,1) forwards}
.area-modal-head>*:nth-child(2){animation-delay:.08s}
@keyframes modalBackdropIn{from{background:rgba(4,8,6,0);backdrop-filter:blur(0)}to{background:rgba(4,8,6,.62);backdrop-filter:blur(14px)}}
@keyframes modalPanelIn{from{opacity:0;transform:translateY(30px) scale(.965)}to{opacity:1;transform:none}}
@keyframes choiceIn{to{opacity:1;transform:none}}
@keyframes modalTextIn{to{opacity:1;transform:none}}

.landing-backdrop{
  animation:landingDrift 12s ease-in-out infinite alternate;
}
@keyframes landingDrift{
  from{transform:scale(1.03) translate3d(0,0,0)}
  to{transform:scale(1.075) translate3d(-1.2%,.8%,0)}
}

@media(max-width:760px){
  .reveal.motion-left,.reveal.motion-right,.reveal.motion-tilt-left,.reveal.motion-tilt-right{
    --motion-x:0px;--motion-y:30px;--motion-rotate:0deg;
  }
  .parallax-media>img{transform:translate3d(0,var(--parallax-y,0px),0) scale(1.035)}
  .inner-hero>img{transform:translate3d(0,var(--hero-parallax,0px),0) scale(1.02)}
}
@media(prefers-reduced-motion:reduce){
  .scroll-progress{display:none}
  .reveal,.motion-title,.media-reveal,.area-modal,.area-modal-panel,.area-choice,.area-modal-head>*{
    animation:none!important;transition:none!important;opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;
  }
  .landing-backdrop{animation:none!important}
  .parallax-media>img,.inner-hero>img{transform:none!important}
}


/* Performance pass: compositor-only motion */
.nav-shell{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  background:rgba(16,22,18,.96);
}
.reveal{
  filter:none!important;
  --motion-x:0px;
  --motion-y:26px;
  --motion-scale:1;
  --motion-rotate:0deg;
  opacity:0;
  transform:translate3d(var(--motion-x),var(--motion-y),0) scale(var(--motion-scale)) rotate(var(--motion-rotate));
  transition:
    opacity .52s ease var(--motion-delay),
    transform .68s cubic-bezier(.16,1,.3,1) var(--motion-delay);
  will-change:auto;
}
.reveal.visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1) rotate(0);
}
.reveal.motion-left{--motion-x:-34px;--motion-y:6px}
.reveal.motion-right{--motion-x:34px;--motion-y:6px}
.reveal.motion-scale{--motion-y:15px;--motion-scale:.97}
.reveal.motion-tilt-left{--motion-x:-18px;--motion-y:22px;--motion-rotate:-1deg}
.reveal.motion-tilt-right{--motion-x:18px;--motion-y:22px;--motion-rotate:1deg}
.reveal.motion-rise{--motion-y:38px}

.motion-title{
  opacity:0;
  transform:translate3d(0,24px,0);
  clip-path:none!important;
  transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1);
}
.motion-title.title-visible{opacity:1;transform:translate3d(0,0,0)}

.media-reveal{
  position:relative;
  opacity:0;
  clip-path:none!important;
  transform:translate3d(0,20px,0) scale(.985);
  transition:opacity .55s ease,transform .78s cubic-bezier(.16,1,.3,1);
}
.media-reveal.media-visible{opacity:1;transform:translate3d(0,0,0) scale(1)}

.parallax-media>img,.inner-hero>img{
  will-change:auto;
}
@media (min-width:1025px) and (pointer:fine){
  .parallax-media>img{
    transform:translate3d(0,var(--parallax-y,0px),0) scale(1.035);
  }
  .inner-hero>img{
    transform:translate3d(0,var(--hero-parallax,0px),0) scale(1.02);
  }
}
@media (max-width:1024px), (pointer:coarse){
  .parallax-media>img,.inner-hero>img{
    transform:none!important;
  }
  .scroll-progress{height:2px}
  .reveal.motion-left,.reveal.motion-right,.reveal.motion-tilt-left,.reveal.motion-tilt-right{
    --motion-x:0px;
    --motion-y:22px;
    --motion-rotate:0deg;
  }
}
