:root{
    --ember:#E1611F;
    --ember-dark:#B84A15;
    --ember-light:#F2905C;
    --teal:#2C6B58;
    --teal-dark:#1B443774;
    --teal-deep:#16332B;
    --cream:#FBF6EE;
    --cream-2:#F3ECDD;
    --ink:#1B1D1B;
    --sage:#E6EFE7;
    --line: rgba(27,29,27,0.1);
    --shadow: 0 30px 60px -25px rgba(20,30,25,0.35);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'Manrope', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces', serif;
    margin:0;
    letter-spacing:-0.01em;
  }
  .script{
    font-family:'Petit Formal Script', cursive;
    line-height:1;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1240px; margin:0 auto; padding:0 clamp(20px,5vw,64px);}
  .eyebrow{
    text-transform:uppercase;
    letter-spacing:0.22em;
    font-size:12px;
    font-weight:700;
    color:var(--ember-dark);
  }
  .eyebrow.on-dark{color:var(--ember-light);}
  ::selection{background:var(--ember); color:#fff;}

  /* reveal on scroll */
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.16,.8,.3,1), transform .9s cubic-bezier(.16,.8,.3,1);}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ============ NAV ============ */
  header.site-nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px clamp(20px,5vw,64px);
    background:rgba(251,246,238,0.0);
    transition:background .4s ease, box-shadow .4s ease, padding .4s ease;
  }
  header.site-nav.scrolled{
    background:rgba(251,246,238,0.92);
    backdrop-filter:blur(14px);
    box-shadow:0 8px 30px -18px rgba(20,20,20,0.25);
    padding:12px clamp(20px,5vw,64px);
  }
  .brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px;}
  .brand .script{color:var(--ember); font-size:28px;}
  .brand small{display:block; font-size:10.5px; letter-spacing:0.16em; font-weight:700; color:var(--teal-deep); text-transform:uppercase;}
  nav.links{display:flex; gap:34px; align-items:center;}
  nav.links a{font-size:14px; font-weight:600; color:var(--teal-deep); position:relative; padding:4px 0;}
  nav.links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--ember);transition:width .3s ease;}
  nav.links a:hover::after{width:100%;}
  .nav-cta{
    background:var(--ember); color:#fff !important; padding:11px 22px; border-radius:100px;
    font-weight:700; font-size:14px; box-shadow:0 12px 24px -10px rgba(225,97,31,0.6);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .nav-cta:hover{transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(225,97,31,0.75);}
  .burger{display:none;}

  /* ============ HERO ============ */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex; align-items:center;
    overflow:hidden;
    background:
      radial-gradient(ellipse 900px 600px at 82% 10%, rgba(225,97,31,0.16), transparent 60%),
      radial-gradient(ellipse 700px 500px at 8% 90%, rgba(44,107,88,0.18), transparent 60%),
      linear-gradient(180deg, #FEFBF5 0%, var(--cream) 100%);
  }
  .hero-photo{
    position:absolute; top:0; right:0; bottom:0; width:56%; z-index:1;
    clip-path:polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
  }
  .hero-photo img{width:100%; height:100%; object-fit:cover;}
  .hero-photo::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(100deg, var(--cream) 0%, rgba(251,246,238,0) 16%), linear-gradient(0deg, rgba(20,25,20,0.35), rgba(20,25,20,0) 45%);
  }
  .hero-triangle{
    position:absolute; top:-8%; left:-6%; width:min(46vw,560px); height:130%;
    background:var(--ember);
    clip-path:polygon(0 0, 100% 0, 50% 100%, 0 100%);
    opacity:0.95;
    z-index:0;
  }
  .hero-triangle::after{
    content:"";position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,0.14), transparent 50%);
  }
  .floor-shine{
    position:absolute; left:0; right:0; bottom:0; height:34%;
    background:
      linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.55) 46%, transparent 62%),
      linear-gradient(180deg, #caa06b, #7c5a34 55%, #4a3520);
    opacity:0.9;
  }
  .floor-shine .sweep{
    position:absolute; top:0; bottom:0; width:26%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
    animation:sweep 5.5s ease-in-out infinite;
    mix-blend-mode:overlay;
  }
  @keyframes sweep{
    0%{ left:-30%; }
    60%{ left:110%; }
    100%{ left:110%; }
  }
  .hero-inner{
    position:relative; z-index:3; width:100%;
    display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;
    padding-top:120px;
  }
  .hero-copy h1{
    font-size:clamp(40px,5.6vw,74px);
    font-weight:600;
    line-height:1.02;
    color:var(--teal-deep);
  }
  .hero-copy h1 em{
    font-style:italic; color:var(--ember);
  }
  .hero-sub{
    margin-top:22px; font-size:19px; line-height:1.6; color:#3c433f; max-width:480px;
  }
  .hero-badges{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px;}
  .badge-pill{
    display:flex; align-items:center; gap:8px;
    background:#fff; border:1px solid var(--line); padding:9px 16px; border-radius:100px;
    font-size:13px; font-weight:700; color:var(--teal-deep); box-shadow:0 8px 20px -14px rgba(0,0,0,0.3);
  }
  .badge-pill svg{width:16px; height:16px; color:var(--ember);}
  .hero-cta-row{display:flex; gap:16px; margin-top:34px; flex-wrap:wrap;}
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 28px; border-radius:100px; font-weight:700; font-size:15px;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
    cursor:pointer; border:none;
  }
  .btn-primary{background:var(--ember); color:#fff; box-shadow:0 16px 30px -12px rgba(225,97,31,0.65);}
  .btn-primary:hover{transform:translateY(-3px); box-shadow:0 20px 36px -12px rgba(225,97,31,0.8);}
  .btn-outline{background:transparent; border:1.5px solid var(--teal-deep); color:var(--teal-deep);}
  .btn-outline:hover{background:var(--teal-deep); color:#fff; transform:translateY(-3px);}

  .hero-card{
    position:relative; z-index:3;
    background:rgba(255,255,255,0.55);
    border:1px solid rgba(255,255,255,0.7);
    backdrop-filter:blur(18px);
    border-radius:28px;
    padding:32px;
    box-shadow:var(--shadow);
  }
  .hero-card .rating{display:flex; align-items:center; gap:10px; margin-bottom:18px;}
  .stars{color:var(--ember); font-size:16px; letter-spacing:2px;}
  .hero-card h3{font-size:22px; color:var(--teal-deep); margin-bottom:6px;}
  .hero-card p{font-size:14px; color:#4b5350; line-height:1.6; margin:0 0 20px;}
  .hero-card .divider{height:1px; background:var(--line); margin:18px 0;}
  .hero-contact-row{display:flex; align-items:center; gap:12px; margin-bottom:14px; font-size:14.5px; font-weight:600; color:var(--teal-deep);}
  .hero-contact-row svg{width:18px; height:18px; color:var(--ember); flex-shrink:0;}
  .mini-illustration{position:relative; height:150px; margin-top:10px; border-radius:18px; overflow:hidden; background:linear-gradient(160deg, var(--sage), #fff);}
  .scroll-cue{
    position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:4;
    display:flex; flex-direction:column; align-items:center; gap:8px; font-size:11px;
    letter-spacing:0.18em; text-transform:uppercase; color:var(--teal-deep); font-weight:700;
  }
  .scroll-cue .line{width:1px; height:38px; background:var(--teal-deep); position:relative; overflow:hidden;}
  .scroll-cue .line::after{content:"";position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--ember); animation:dropline 1.8s ease-in-out infinite;}
  @keyframes dropline{0%{top:-100%;}100%{top:100%;}}

  /* floating bubbles */
  .bubble{position:absolute; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.05) 70%); border:1px solid rgba(255,255,255,0.5); opacity:0.7; animation:float 9s ease-in-out infinite;}
  @keyframes float{0%,100%{transform:translateY(0) translateX(0);}50%{transform:translateY(-26px) translateX(10px);}}

  /* ============ SECTION SHELL ============ */
  section{position:relative; padding:118px 0;}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-head h2{font-size:clamp(30px,4vw,46px); font-weight:600; color:var(--teal-deep); margin-top:12px; line-height:1.08;}
  .section-head p{font-size:16.5px; color:#4b5350; margin-top:16px; line-height:1.65;}

  /* mop-stroke divider (signature element) */
  .mop-divider{position:relative; height:120px; overflow:hidden;}
  .mop-divider svg{width:100%; height:100%; display:block;}
  .mop-divider .stroke-path{
    stroke-dasharray:1400; stroke-dashoffset:1400;
    transition:stroke-dashoffset 1.6s cubic-bezier(.16,.8,.3,1);
  }
  .mop-divider.in .stroke-path{stroke-dashoffset:0;}

  /* ============ SERVICES SPLIT ============ */
  .split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
  .split.reverse{grid-template-columns:1fr 1fr;}
  .split.reverse .split-visual{order:2;}
  .split-visual{
    position:relative; border-radius:28px; overflow:hidden; min-height:420px;
    display:flex; align-items:flex-end; justify-content:center;
    box-shadow:var(--shadow);
  }
  .split-visual.residential{background:linear-gradient(155deg,#fff, var(--sage) 60%, #cfe4d5);}
  .split-visual.commercial{background:linear-gradient(155deg,#fff3ea, #ffd9bb 60%, #f2b285);}
  .visual-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.16,.8,.3,1);}
  .split-visual:hover .visual-photo{transform:scale(1.05);}
  .split-visual::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(20,25,20,0.42) 0%, rgba(20,25,20,0) 42%);
    pointer-events:none;
  }
  .split-visual .glass-tag{
    position:absolute; top:26px; left:26px; z-index:2;
    background:rgba(255,255,255,0.85); backdrop-filter:blur(10px);
    padding:9px 18px; border-radius:100px; font-size:12.5px; font-weight:700;
    color:var(--teal-deep); border:1px solid rgba(255,255,255,0.8);
  }
  .split-copy h3{font-size:14px;}
  .split-copy h2{font-size:clamp(28px,3.4vw,38px); font-weight:600; color:var(--teal-deep); margin:12px 0 18px; line-height:1.15;}
  .split-copy p{font-size:16px; line-height:1.75; color:#464e4a;}
  .split-copy em{font-style:italic; color:var(--ember-dark); font-weight:600;}
  .split-copy strong{color:var(--teal-deep);}

  /* silhouette illustrations (svg, matches flyer's silhouette figures) */
  .silhouette-fig{position:relative; z-index:2;}

  /* ============ INCLUDES / SERVICE CARDS ============ */
  .band-icons{
    background:var(--teal); padding:26px 0; overflow:hidden;
  }
  .band-icons .row{display:flex; align-items:center; justify-content:space-around; gap:20px;}
  .band-icons svg{width:30px; height:30px; color:#fff; opacity:0.9;}

  .cards-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
  .service-card{
    background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px 24px;
    position:relative; overflow:hidden;
    transition:transform .35s cubic-bezier(.16,.8,.3,1), box-shadow .35s ease, border-color .35s ease;
  }
  .service-card:hover{transform:translateY(-8px); box-shadow:0 26px 50px -22px rgba(20,30,25,0.28); border-color:transparent;}
  .service-card .icon-wrap{
    width:56px; height:56px; border-radius:16px; background:var(--sage);
    display:flex; align-items:center; justify-content:center; margin-bottom:20px;
    transition:background .35s ease;
  }
  .service-card:hover .icon-wrap{background:var(--ember);}
  .service-card .icon-wrap svg{width:26px; height:26px; color:var(--teal-deep); transition:color .35s ease;}
  .service-card:hover .icon-wrap svg{color:#fff;}
  .service-card h4{font-family:'Fraunces',serif; font-size:19px; font-weight:600; color:var(--teal-deep); margin-bottom:8px;}
  .service-card p{font-size:14px; color:#5a615d; line-height:1.6; margin:0;}
  .service-card .shine{
    position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
    transform:skewX(-18deg);
    transition:left .8s ease;
  }
  .service-card:hover .shine{left:130%;}

  /* ============ WHY / TRUST ============ */
  .why-wrap{background:var(--teal-deep); color:#fff; border-radius:32px; padding:70px clamp(24px,6vw,80px); position:relative; overflow:hidden;}
  .why-wrap::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(circle 420px at 90% 0%, rgba(225,97,31,0.25), transparent 60%),
      radial-gradient(circle 380px at 0% 100%, rgba(255,255,255,0.08), transparent 60%);
  }
  .why-grid{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
  .why-list{display:flex; flex-direction:column; gap:26px; margin-top:30px;}
  .why-item{display:flex; gap:16px; align-items:flex-start;}
  .why-item .num{
    font-family:'Fraunces',serif; font-size:15px; font-weight:600; color:var(--ember-light);
    width:34px; height:34px; border:1px solid rgba(255,255,255,0.3); border-radius:50%;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .why-item h4{font-size:17px; font-weight:700; margin-bottom:4px;}
  .why-item p{font-size:14.5px; color:rgba(255,255,255,0.72); line-height:1.6; margin:0;}
  .why-badge-cloud{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px;}
  .cloud-pill{background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); padding:10px 18px; border-radius:100px; font-size:13px; font-weight:700;}

  /* service area map graphic */
  .map-visual{position:relative; border-radius:24px; overflow:hidden; min-height:340px; background:linear-gradient(160deg,#22574a,#123028);}
  .map-visual svg{position:absolute; inset:0; width:100%; height:100%;}
  .map-label{
    position:absolute; padding:8px 16px; background:#fff; color:var(--teal-deep);
    border-radius:100px; font-size:12.5px; font-weight:800; box-shadow:0 10px 20px -8px rgba(0,0,0,0.4);
  }

  /* ============ CONTACT ============ */
  .contact-wrap{display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:32px; overflow:hidden; box-shadow:var(--shadow);}
  .contact-visual{
    position:relative; background:linear-gradient(155deg, var(--ember), var(--ember-dark));
    padding:56px 48px; color:#fff; display:flex; flex-direction:column; justify-content:space-between;
    overflow:hidden;
  }
  .contact-visual::after{content:"";position:absolute; right:-60px; bottom:-60px; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,0.08);}
  .contact-visual h3{font-size:30px; font-weight:600; margin-bottom:14px;}
  .contact-visual p{font-size:15px; line-height:1.7; color:rgba(255,255,255,0.9); max-width:340px;}
  .contact-detail{display:flex; gap:14px; align-items:flex-start; margin-top:22px; position:relative; z-index:2;}
  .contact-detail svg{width:20px; height:20px; flex-shrink:0; margin-top:2px;}
  .contact-detail span{font-size:14.5px; line-height:1.6; font-weight:600;}
  .contact-form{background:#fff; padding:56px 48px;}
  .contact-form h3{font-size:26px; color:var(--teal-deep); font-weight:600; margin-bottom:8px;}
  .contact-form p.lead{font-size:14.5px; color:#5a615d; margin-bottom:28px;}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
  .form-field{display:flex; flex-direction:column; gap:6px;}
  .form-field label{font-size:12.5px; font-weight:700; color:var(--teal-deep); text-transform:uppercase; letter-spacing:0.06em;}
  .form-field input, .form-field select, .form-field textarea{
    border:1.5px solid var(--line); border-radius:12px; padding:13px 14px; font-size:14.5px; font-family:inherit;
    background:var(--cream); transition:border-color .25s ease, background .25s ease;
  }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:none; border-color:var(--ember); background:#fff;}
  .submit-btn{width:100%; margin-top:6px; justify-content:center; background:var(--teal-deep);}
  .submit-btn:hover{background:var(--ember);}

  /* ============ FOOTER ============ */
  footer{background:var(--teal-deep); color:rgba(255,255,255,0.85); padding:70px 0 30px; position:relative; overflow:hidden;}
  footer::before{content:"";position:absolute; inset:0; background:linear-gradient(180deg, rgba(225,97,31,0.08), transparent 40%);}
  .footer-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.12);}
  .footer-brand .script{color:var(--ember-light); font-size:30px;}
  .footer-brand p{font-size:13.5px; line-height:1.7; color:rgba(255,255,255,0.6); margin-top:14px; max-width:280px;}
  .footer-col h5{font-size:12.5px; text-transform:uppercase; letter-spacing:0.14em; color:var(--ember-light); margin-bottom:16px;}
  .footer-col a{display:block; font-size:14px; color:rgba(255,255,255,0.75); margin-bottom:11px; transition:color .25s ease;}
  .footer-col a:hover{color:#fff;}
  .footer-bottom{position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:12.5px; color:rgba(255,255,255,0.5); flex-wrap:wrap; gap:12px;}

  /* responsive */
  @media (max-width:980px){
    nav.links{display:none;}
    .hero-inner{grid-template-columns:1fr; padding-top:130px;}
    .split, .split.reverse{grid-template-columns:1fr;}
    .split.reverse .split-visual{order:0;}
    .cards-grid{grid-template-columns:1fr 1fr;}
    .why-grid{grid-template-columns:1fr;}
    .contact-wrap{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .band-icons .row{flex-wrap:wrap; justify-content:center;}
  }
  @media (max-width:600px){
    .cards-grid{grid-template-columns:1fr;}
    .form-row{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .hero-badges{gap:10px;}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

/* ============ INNER PAGE HEADER ============ */
.page-hero{
  position:relative; min-height:56vh; display:flex; align-items:flex-end;
  overflow:hidden; padding-bottom:64px; padding-top:160px;
}
.page-hero .ph-bg{position:absolute; inset:0; z-index:0;}
.page-hero .ph-bg img{width:100%; height:100%; object-fit:cover;}
.page-hero .ph-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, var(--teal-deep) 4%, rgba(22,51,43,0.55) 55%, rgba(22,51,43,0.25) 100%);
}
.page-hero .wrap{position:relative; z-index:2;}
.page-hero h1{font-size:clamp(34px,5vw,58px); color:#fff; font-weight:600; margin-top:12px;}
.page-hero p.lede{color:rgba(255,255,255,0.85); font-size:16.5px; max-width:560px; margin-top:14px; line-height:1.6;}
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,0.7); font-weight:600;}
.breadcrumb a{color:rgba(255,255,255,0.9);}
.breadcrumb a:hover{color:#fff; text-decoration:underline;}

/* ============ GALLERY GRID ============ */
.gallery-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.gallery-item{
  position:relative; border-radius:22px; overflow:hidden; box-shadow:var(--shadow);
  aspect-ratio:4/5;
}
.gallery-item.wide{grid-column:span 2; aspect-ratio:auto;}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,.8,.3,1);}
.gallery-item:hover img{transform:scale(1.06);}
.gallery-item .g-tag{
  position:absolute; bottom:18px; left:18px; z-index:2;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  padding:8px 16px; border-radius:100px; font-size:12.5px; font-weight:700; color:var(--teal-deep);
}
.gallery-item::after{content:"";position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,25,20,0.45), rgba(20,25,20,0) 40%);}
@media (max-width:900px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-item.wide{grid-column:span 2;}
}
@media (max-width:600px){
  .gallery-grid{grid-template-columns:1fr;}
  .gallery-item.wide{grid-column:span 1;}
}

/* ============ SIMPLE STAT ROW (about) ============ */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:50px;}
.stat-card{text-align:center; padding:26px 16px; background:#fff; border:1px solid var(--line); border-radius:20px;}
.stat-card .num{font-family:'Fraunces',serif; font-size:34px; font-weight:600; color:var(--ember-dark);}
.stat-card .label{font-size:13px; color:#5a615d; font-weight:600; margin-top:6px;}
@media (max-width:700px){ .stat-row{grid-template-columns:repeat(2,1fr);} }