/* ============================================================
   DE-MASTA CLEANING SERVICES — design tokens
   Palette:  --bg #F6F9F8  --surface #FFFFFF  --ink #0E2426
             --navy #0F3C3E  --teal #148C82  --teal-bright #1FC9B7
             --gold #D9A441  --line #DCE6E4
   Type: display = 'Big Shoulders Display' (condensed, industrial,
         reads like signage on a van/uniform) · body = 'Inter'
         · utility/mono = 'IBM Plex Mono' (phone numbers, addresses)
   Signature: the "wipe" — a diagonal streak that sweeps across a
   dulled surface on load/hover, revealing the bright teal beneath.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --bg:#F6F9F8;
  --surface:#FFFFFF;
  --ink:#0E2426;
  --ink-soft:#3D5254;
  --navy:#0F3C3E;
  --teal:#148C82;
  --teal-bright:#1FC9B7;
  --gold:#D9A441;
  --line:#DCE6E4;
  --shadow: 0 12px 32px -16px rgba(14,36,38,0.25);
  --radius: 4px;
  --wrap: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.eyebrow,.logo{ font-family:'Big Shoulders Display',sans-serif; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.mono{ font-family:'IBM Plex Mono',monospace; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,249,248,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px;
}
.logo{
  font-weight:800; font-size:1.5rem; letter-spacing:0.02em;
  color:var(--navy); text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.logo .dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--teal-bright);
  box-shadow:0 0 0 4px rgba(31,201,183,0.18);
}
nav.main-nav{ display:flex; align-items:center; gap:32px; }
nav.main-nav a{
  font-weight:600; font-size:0.92rem; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:0.04em;
  padding:6px 2px; border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
nav.main-nav a:hover, nav.main-nav a.active{
  color:var(--navy); border-bottom-color:var(--teal-bright);
}
.nav-call{
  background:var(--navy); color:#fff !important;
  padding:10px 18px; border-radius:var(--radius);
  font-weight:700 !important; letter-spacing:0.03em;
  border-bottom:none !important;
}
.nav-call:hover{ background:var(--teal); color:#fff !important; }
.nav-toggle{ display:none; }

/* ---------- eyebrow / section labels ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; font-size:0.82rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--teal);
  margin-bottom:14px;
}
.eyebrow::before{
  content:''; width:26px; height:2px; background:var(--gold);
  display:inline-block;
}

/* ---------- hero + wipe signature ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:96px 0 84px;
  background:var(--navy);
  color:#fff;
}
.hero-grid{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center;
  position:relative; z-index:2;
}
.hero h1{
  font-size:clamp(2.6rem,5.4vw,4.4rem);
  line-height:0.98; font-weight:800; text-transform:uppercase;
  letter-spacing:0.01em; margin:0 0 22px;
}
.hero h1 em{ font-style:normal; color:var(--teal-bright); }
.hero p.lede{
  font-size:1.12rem; color:#CFEAE6; max-width:46ch; margin:0 0 32px;
}
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:14px; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 24px; border-radius:var(--radius);
  font-weight:700; font-size:0.95rem; letter-spacing:0.02em;
  border:2px solid transparent; cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--gold); color:var(--navy); }
.btn-primary:hover{ background:#EBB760; }
.btn-outline{ border-color:rgba(255,255,255,0.5); color:#fff; }
.btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,0.08); }
.btn-dark{ background:var(--navy); color:#fff; }
.btn-dark:hover{ background:var(--teal); }

/* the wipe panel: a "dulled" surface swept clean on load */
.wipe-panel{
  position:relative; aspect-ratio:4/5; border-radius:6px;
  overflow:hidden; background:#0B2E30;
  box-shadow:var(--shadow);
}
.wipe-panel::before{
  /* dulled/smudged base state */
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px),
    linear-gradient(160deg,#274748,#0B2E30 70%);
}
.wipe-panel .clean{
  position:absolute; inset:0;
  background:linear-gradient(150deg,var(--teal-bright),var(--teal) 55%,#0E7A70);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  animation: wipe-reveal 1.6s cubic-bezier(.65,0,.35,1) 0.3s forwards;
}
.wipe-panel .streak{
  position:absolute; top:0; bottom:0; width:6%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
  filter:blur(1px);
  left:-10%;
  animation: streak-move 1.6s cubic-bezier(.65,0,.35,1) 0.3s forwards;
}
.wipe-panel .content{
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:flex-end; padding:26px; z-index:2;
}
.wipe-panel .content .tag{
  font-family:'Big Shoulders Display',sans-serif;
  font-size:1.5rem; font-weight:700; color:#fff; text-transform:uppercase;
  line-height:1.05;
}
.wipe-panel .content .sub{
  font-family:'IBM Plex Mono',monospace; font-size:0.78rem;
  color:rgba(255,255,255,0.8); margin-top:8px; letter-spacing:0.03em;
}

@keyframes wipe-reveal{
  0%{ clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  100%{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes streak-move{
  0%{ left:-10%; opacity:0; }
  8%{ opacity:1; }
  92%{ opacity:1; }
  100%{ left:104%; opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .wipe-panel .clean{ animation:none; clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }
  .wipe-panel .streak{ display:none; }
}

/* ---------- trust strip ---------- */
.trust-strip{
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:26px 0;
}
.trust-strip ul{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  gap:28px 40px; justify-content:center;
}
.trust-strip li{
  display:flex; align-items:center; gap:10px;
  font-weight:600; font-size:0.92rem; color:var(--ink-soft);
}
.trust-strip li svg{ flex-shrink:0; color:var(--teal); }

/* ---------- generic section ---------- */
section{ padding:80px 0; }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head h2{
  font-size:clamp(1.9rem,3.4vw,2.7rem); font-weight:800;
  text-transform:uppercase; color:var(--navy); line-height:1.04; margin:0;
}
.section-head p{ color:var(--ink-soft); margin-top:14px; font-size:1.03rem; }

/* ---------- service cards ---------- */
.card-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:22px;
}
.service-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:6px; padding:30px 26px;
  position:relative; overflow:hidden;
  transition:border-color .2s ease, transform .2s ease;
}
.service-card:hover{ border-color:var(--teal-bright); transform:translateY(-4px); }
.service-card .icon{
  width:44px; height:44px; border-radius:50%;
  background:rgba(20,140,130,0.1); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.service-card h3{
  font-size:1.3rem; text-transform:uppercase; color:var(--navy);
  margin:0 0 10px; font-weight:700; letter-spacing:0.01em;
}
.service-card p{ color:var(--ink-soft); font-size:0.96rem; margin:0 0 14px; }
.service-card a.learn{
  font-weight:700; font-size:0.85rem; color:var(--teal);
  text-transform:uppercase; letter-spacing:0.04em;
  display:inline-flex; align-items:center; gap:6px;
}
.service-card a.learn svg{ transition:transform .18s ease; }
.service-card a.learn:hover svg{ transform:translateX(4px); }

/* service detail rows (services.html) */
.service-detail{
  display:grid; grid-template-columns:64px 1fr; gap:24px;
  padding:34px 0; border-top:1px solid var(--line);
}
.service-detail:last-child{ border-bottom:1px solid var(--line); }
.service-detail .icon{
  width:56px; height:56px; border-radius:50%;
  background:var(--navy); color:var(--teal-bright);
  display:flex; align-items:center; justify-content:center;
}
.service-detail h3{
  font-size:1.5rem; text-transform:uppercase; color:var(--navy);
  margin:0 0 8px; font-weight:700;
}
.service-detail p{ color:var(--ink-soft); margin:0 0 14px; max-width:60ch; }
.service-detail ul{ margin:0; padding-left:20px; color:var(--ink-soft); }
.service-detail li{ margin-bottom:6px; }

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--navy); color:#fff; padding:64px 0;
  position:relative; overflow:hidden;
}
.cta-band::after{
  content:''; position:absolute; right:-60px; top:-60px; width:260px; height:260px;
  border-radius:50%; background:radial-gradient(circle,rgba(31,201,183,0.25),transparent 70%);
}
.cta-band .wrap{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
  position:relative; z-index:2;
}
.cta-band h2{
  font-size:clamp(1.7rem,3vw,2.3rem); text-transform:uppercase; margin:0; font-weight:800;
}
.cta-band p.mono{ color:var(--teal-bright); margin-top:8px; font-size:0.95rem; }

/* ---------- about page ---------- */
.about-hero{ background:var(--navy); color:#fff; padding:64px 0 54px; }
.about-hero h1{
  font-size:clamp(2.2rem,4.4vw,3.2rem); text-transform:uppercase; font-weight:800; margin:0 0 14px;
}
.about-hero p{ color:#CFEAE6; max-width:56ch; font-size:1.05rem; }

.about-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start;
}
.values-list{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:18px; }
.values-list li{
  display:grid; grid-template-columns:30px 1fr; gap:14px;
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.values-list .num{
  font-family:'IBM Plex Mono',monospace; color:var(--gold); font-weight:600;
}
.values-list h4{ margin:0 0 4px; color:var(--navy); text-transform:uppercase; font-size:1.02rem; }
.values-list p{ margin:0; color:var(--ink-soft); font-size:0.94rem; }

.contact-card{
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  padding:34px; box-shadow:var(--shadow);
}
.contact-card h3{
  text-transform:uppercase; color:var(--navy); margin:0 0 22px; font-size:1.2rem;
}
.contact-row{
  display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--line);
}
.contact-row:first-of-type{ border-top:none; padding-top:0; }
.contact-row .icon{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:rgba(20,140,130,0.1); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
}
.contact-row .label{
  font-size:0.76rem; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--ink-soft); margin-bottom:3px;
}
.contact-row .value{ font-weight:600; color:var(--ink); }
.contact-row a.value:hover{ color:var(--teal); }
.contact-card .btn{ width:100%; justify-content:center; margin-top:22px; }

.hours-strip{
  margin-top:22px; padding-top:18px; border-top:1px dashed var(--line);
  font-family:'IBM Plex Mono',monospace; font-size:0.85rem; color:var(--ink-soft);
  display:flex; justify-content:space-between;
}

/* ---------- gallery / before-after slider ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.ba-slider{
  position:relative; aspect-ratio:4/3; border-radius:6px; overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow); user-select:none; touch-action:pan-y;
}
.ba-slider .layer{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Big Shoulders Display',sans-serif; font-weight:700; letter-spacing:0.02em; text-transform:uppercase; text-align:center; padding:20px; }
.ba-slider .before{ background:linear-gradient(135deg,#274748,#0B2E30); color:#fff; }
.ba-slider .after{ background:linear-gradient(135deg,var(--teal-bright),var(--teal) 60%,#0E7A70); color:#06201E; overflow:hidden; }
.ba-slider .after-inner{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; text-align:center; }
.ba-slider .tag{
  position:absolute; top:14px; padding:5px 12px; border-radius:20px; font-size:0.7rem;
  font-weight:700; letter-spacing:0.05em; text-transform:uppercase; background:rgba(15,60,62,0.8); color:#fff;
  font-family:'Inter',sans-serif;
}
.ba-slider .tag.before-tag{ left:14px; }
.ba-slider .tag.after-tag{ right:14px; background:var(--teal); }
.ba-slider input[type="range"]{
  position:absolute; inset:0; width:100%; height:100%; margin:0; -webkit-appearance:none; background:transparent; cursor:ew-resize; z-index:5;
}
.ba-slider input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:0; height:0; }
.ba-handle{
  position:absolute; top:0; bottom:0; width:3px; background:#fff; left:50%; transform:translateX(-50%);
  box-shadow:0 0 0 1px rgba(15,60,62,0.2); z-index:4; pointer-events:none;
}
.ba-handle::after{
  content:'⇔'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:38px; height:38px; border-radius:50%; background:#fff; color:var(--navy);
  display:flex; align-items:center; justify-content:center; font-size:1rem; box-shadow:var(--shadow);
}
.ba-caption{ padding:14px 4px 0; font-size:0.9rem; color:var(--ink-soft); text-align:center; font-family:'Inter',sans-serif; }
.gallery-note{ text-align:center; color:var(--ink-soft); font-size:0.86rem; margin-top:26px; }

/* ---------- FAQ ---------- */
.faq-list{ max-width:760px; margin:0 auto; display:grid; gap:12px; }
.faq-item{ border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--surface); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:20px 24px; font-weight:700; color:var(--navy);
  display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:'Inter',sans-serif;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .chev{ transition:transform .2s ease; flex-shrink:0; color:var(--teal); }
.faq-item[open] summary .chev{ transform:rotate(180deg); }
.faq-item .faq-body{ padding:0 24px 20px; color:var(--ink-soft); font-size:0.95rem; }

/* ---------- booking form ---------- */
.book-section{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.book-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:start; }
.book-grid .book-info p{ color:var(--ink-soft); max-width:44ch; }
.book-info .areas{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; }
.book-info .areas span{
  background:var(--bg); border:1px solid var(--line); padding:8px 14px; border-radius:20px;
  font-size:0.84rem; font-weight:600; color:var(--navy); font-family:'Inter',sans-serif;
}
.book-form{ background:var(--bg); border-radius:6px; padding:34px; box-shadow:var(--shadow); border:1px solid var(--line); }
.book-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.book-form label{ display:block; font-size:0.8rem; font-weight:700; color:var(--navy); margin:16px 0 6px; text-transform:uppercase; letter-spacing:0.03em; }
.book-form label:first-of-type{ margin-top:0; }
.book-form input, .book-form select, .book-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:4px;
  font-family:'Inter',sans-serif; font-size:0.95rem; color:var(--ink); background:#fff;
}
.book-form input:focus, .book-form select:focus, .book-form textarea:focus{ outline:2px solid var(--teal); border-color:var(--teal); }
.book-form textarea{ resize:vertical; min-height:90px; }
.book-form .btn{ width:100%; justify-content:center; margin-top:22px; }
.form-status{ margin-top:14px; font-size:0.9rem; font-weight:600; display:none; font-family:'Inter',sans-serif; }
.form-status.show{ display:block; }
.form-status.ok{ color:#0F7A45; }
.form-status.err{ color:#B4432F; }

/* ---------- footer ---------- */
footer.site-footer{ background:#0B2A2C; color:#B9D3D0; padding:52px 0 28px; }
footer .foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; margin-bottom:36px;
}
footer .logo{ color:#fff; margin-bottom:12px; }
footer p.foot-desc{ font-size:0.92rem; color:#8FB0AD; max-width:32ch; }
footer h5{
  text-transform:uppercase; letter-spacing:0.06em; font-size:0.8rem;
  color:#6FA39D; margin:0 0 14px; font-family:'Inter',sans-serif; font-weight:700;
}
footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
footer a{ font-size:0.92rem; color:#B9D3D0; transition:color .18s ease; }
footer a:hover{ color:var(--teal-bright); }
.foot-bottom{
  border-top:1px solid rgba(255,255,255,0.08); padding-top:22px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  font-size:0.8rem; color:#628A87;
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; }
  .wipe-panel{ aspect-ratio:16/9; }
  .about-grid, .book-grid{ grid-template-columns:1fr; }
  footer .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  nav.main-nav{
    position:fixed; inset:64px 0 0 0; background:var(--bg);
    flex-direction:column; align-items:flex-start; padding:28px;
    transform:translateX(100%); transition:transform .25s ease;
    gap:20px;
  }
  nav.main-nav.open{ transform:translateX(0); }
  .nav-toggle{
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; border:1px solid var(--line); border-radius:4px;
    background:none; cursor:pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:''; display:block; width:20px; height:2px; background:var(--navy); position:relative;
  }
  .nav-toggle span::before{ position:absolute; top:-6px; }
  .nav-toggle span::after{ position:absolute; top:6px; }
  .service-detail{ grid-template-columns:1fr; }
  .book-form .form-row{ grid-template-columns:1fr; }
  footer .foot-grid{ grid-template-columns:1fr; }
}

:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }