/* =========================================================
   Purefold — cleaning.nextapi.online
   Design system + layout + motion  (cool, crisp, technical)
   ========================================================= */
:root{
  --bg:     #F1F5F6;
  --bg-2:   #E3ECEE;
  --paper:  #FFFFFF;
  --ink:    #0B2A2A;
  --ink-2:  #1D3D3C;
  --muted:  #5C7373;
  --line:   rgba(11,42,42,.13);
  --line-2: rgba(11,42,42,.08);
  --teal:   #0E7C7B;
  --teal-d: #0A5F5E;
  --sky:    #3E9CB9;
  --mint:   #CDE7E2;
  --amber:  #D98A2B;
  --dark:   #0B2A2A;
  --dark-2: #103736;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --pill: 999px;

  --sh-1: 0 1px 2px rgba(11,42,42,.05), 0 12px 30px -22px rgba(11,42,42,.4);
  --sh-2: 0 30px 70px -34px rgba(11,42,42,.5);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --display: "Space Grotesk", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gut: clamp(20px,4vw,48px);
  --sec: clamp(68px,10vw,140px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:clamp(15.5px,1.02vw,17px); line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:600; line-height:1.06; letter-spacing:-.02em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--teal); color:#fff; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.wrap{ width:100%; max-width:1280px; margin-inline:auto; padding-inline:var(--gut); }

.skip{ position:fixed; top:8px; left:8px; z-index:200; background:var(--ink); color:#fff; padding:10px 16px; border-radius:var(--r-sm); transform:translateY(-140%); transition:transform .25s var(--ease); }
.skip:focus{ transform:none; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:4px; }

/* helpers */
.eyebrow{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--display); font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.eyebrow .dot{ width:6px; height:6px; border-radius:2px; background:var(--teal); transform:rotate(45deg); }
.eyebrow--light{ color:rgba(255,255,255,.72); }
.eyebrow--light .dot{ background:var(--mint); }
.lede{ color:var(--ink-2); font-size:clamp(1rem,1.3vw,1.13rem); max-width:58ch; }
.lede--light{ color:rgba(255,255,255,.72); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:.55em; padding:.9em 1.5em; border-radius:var(--pill);
  font-family:var(--display); font-weight:600; font-size:.94rem; letter-spacing:.005em;
  border:1px solid transparent; position:relative; overflow:hidden;
  transition:transform .32s var(--ease-out), background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.btn .arw{ transition:transform .32s var(--ease-out); }
.btn:hover .arw{ transform:translateX(4px); }
.btn-primary{ background:var(--teal); color:#fff; box-shadow:0 12px 26px -16px rgba(14,124,123,.9); }
.btn-primary:hover{ background:var(--teal-d); transform:translateY(-2px); box-shadow:0 18px 34px -16px rgba(14,124,123,.95); }
.btn-primary:active{ transform:translateY(0); }
.btn-outline{ border-color:var(--line); color:var(--ink); }
.btn-outline:hover{ border-color:var(--teal); color:var(--teal-d); transform:translateY(-2px); }
.btn-quiet{ color:var(--muted); padding-inline:.9em; }
.btn-quiet:hover{ color:var(--ink); }
.btn-sm{ padding:.6em 1.05em; font-size:.85rem; }
.btn-block{ width:100%; justify-content:center; }

/* =========================================================
   HEADER
   ========================================================= */
.site-head{ position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .35s var(--ease); }
.site-head.is-stuck{ border-bottom-color:var(--line); }
.head-inner{ display:flex; align-items:center; gap:22px; height:72px; }
.brand{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--display); font-weight:600; font-size:1.14rem; }
.brand-mark{ width:32px; height:32px; border-radius:9px; background:var(--teal); color:#fff; display:grid; place-items:center; }
.brand--light{ color:#fff; }
.brand--light .brand-mark{ background:var(--mint); color:var(--dark); }
.nav{ display:none; gap:28px; margin-left:auto; }
.nav a{ font-size:.92rem; color:var(--ink-2); position:relative; padding:.3em 0; }
.nav a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--teal); transform:scaleX(0); transform-origin:left; transition:transform .32s var(--ease-out); }
.nav a:hover::after{ transform:scaleX(1); }
.head-cta{ margin-left:auto; }
.nav + .head-cta{ margin-left:22px; }
.menu-btn{ display:grid; gap:5px; width:40px; height:40px; place-content:center; }
.menu-btn span{ width:22px; height:1.8px; background:var(--ink); transition:transform .32s var(--ease); }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.4px) rotate(-45deg); }
.mobile-nav{ display:grid; padding:10px var(--gut) 24px; border-top:1px solid var(--line-2); }
.mobile-nav[hidden]{ display:none; }
.mobile-nav a{ padding:14px 2px; font-family:var(--display); font-size:1.25rem; font-weight:500; border-bottom:1px solid var(--line-2); }

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding-top:clamp(28px,5vw,60px); padding-bottom:clamp(48px,7vw,84px); }
.hero-grid{ display:grid; gap:clamp(32px,5vw,56px); }
.hero-title{ font-size:clamp(2.7rem,8.4vw,5.6rem); font-weight:700; margin:.5em 0 .34em; letter-spacing:-.035em; }
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line > span{ display:block; transform:translateY(105%); animation:lineUp 1s var(--ease-out) forwards; }
.hero-title .line:nth-child(2) > span{ animation-delay:.13s; }
.hero-title em{ font-style:normal; color:var(--teal); position:relative; }
.hero-title em::after{ content:""; position:absolute; left:0; right:0; bottom:.08em; height:.12em; background:var(--mint); z-index:-1; }
@keyframes lineUp{ to{ transform:translateY(0); } }
.hero-sub{ color:var(--ink-2); font-size:clamp(1.02rem,1.4vw,1.16rem); max-width:50ch; margin-bottom:1.9em; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.hero-points{ display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:clamp(32px,5vw,52px); padding-top:22px; border-top:1px solid var(--line); }
.hero-points li{ display:inline-flex; align-items:center; gap:.6em; font-size:.92rem; color:var(--ink-2); font-weight:500; }
.tick{ width:20px; height:20px; border-radius:50%; background:var(--mint); position:relative; flex:none; }
.tick::after{ content:""; position:absolute; left:6px; top:5px; width:7px; height:4px; border-left:2px solid var(--teal-d); border-bottom:2px solid var(--teal-d); transform:rotate(-45deg); }

.hero-media{ position:relative; }
.shot{ margin:0; overflow:hidden; border-radius:var(--r-lg); background:var(--bg-2); }
.shot img{ width:100%; height:100%; object-fit:cover; }
.shot-main{ aspect-ratio:4/3; }
.hero-chip{ position:absolute; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 16px; box-shadow:var(--sh-1); display:grid; gap:2px; }
.hero-chip strong{ font-family:var(--display); font-size:.95rem; }
.hero-chip span{ font-size:.76rem; color:var(--muted); }
.hero-chip--a{ left:-8px; bottom:16%; }
.hero-chip--b{ right:-6px; top:12%; }

/* =========================================================
   SERVICES (bento)
   ========================================================= */
.services{ padding-block:var(--sec); }
.sec-head{ max-width:720px; margin-bottom:clamp(34px,5vw,56px); }
.sec-head h2{ font-size:clamp(2rem,5vw,3.4rem); margin:.35em 0 .45em; }
.svc-grid{ display:grid; gap:clamp(14px,1.6vw,20px); }
.svc-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,32px); display:grid; gap:.7em; align-content:start;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s;
}
.svc-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:transparent; }
.svc-ico{ width:46px; height:46px; border-radius:12px; background:var(--mint); color:var(--teal-d); display:grid; place-items:center; margin-bottom:.5em; }
.svc-ico svg{ width:24px; height:24px; }
.svc-card h3{ font-size:clamp(1.25rem,2.2vw,1.55rem); }
.svc-card > p{ color:var(--muted); font-size:.95rem; }
.svc-list{ display:flex; flex-wrap:wrap; gap:6px 8px; margin-top:.6em; }
.svc-list li{ font-size:.76rem; font-weight:500; color:var(--teal-d); background:var(--mint); padding:.32em .7em; border-radius:var(--pill); }

/* =========================================================
   METHOD (dark)
   ========================================================= */
.method{ background:var(--dark); color:#fff; padding-block:var(--sec); }
.method .sec-head h2{ color:#fff; }
.steps{ display:grid; gap:clamp(24px,3vw,32px); }
.steps li{ padding-top:1.4em; border-top:1px solid rgba(255,255,255,.16); }
.step-no{ font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--mint); letter-spacing:.05em; }
.steps h3{ font-size:1.4rem; margin:.5em 0 .35em; }
.steps p{ color:rgba(255,255,255,.66); font-size:.94rem; }

/* =========================================================
   CHECKLIST
   ========================================================= */
.check{ padding-block:var(--sec); }
.check-grid{ display:grid; gap:clamp(30px,4.5vw,64px); align-items:start; }
.check-copy h2{ font-size:clamp(2rem,5vw,3.4rem); margin:.35em 0 .5em; }
.check-count{ margin-top:1.6em; font-family:var(--display); color:var(--muted); }
.check-count strong{ color:var(--teal); font-size:1.5rem; }
.check-panel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(18px,2.4vw,28px); box-shadow:var(--sh-1); }
.check-list{ display:grid; gap:10px; margin:0; padding:0; border:0; }
.check-item{ position:relative; }
.check-item input{ position:absolute; opacity:0; width:0; height:0; }
.check-item label{
  display:flex; align-items:center; gap:.85em; padding:.95em 1.05em;
  border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer;
  font-weight:500; transition:border-color .25s, background .25s, transform .25s var(--ease-out);
}
.check-item label::before{
  content:""; width:22px; height:22px; flex:none; border:1.6px solid var(--line);
  border-radius:7px; transition:background .25s, border-color .25s; position:relative;
}
.check-item label::after{
  content:""; position:absolute; left:calc(1.05em + 5px); top:50%; width:9px; height:5px;
  border-left:2.2px solid #fff; border-bottom:2.2px solid #fff; transform:translateY(-70%) rotate(-45deg) scale(0);
  transition:transform .25s var(--ease-out); transform-origin:center;
}
.check-item label:hover{ border-color:var(--teal); transform:translateY(-1px); }
.check-item input:checked + label{ border-color:var(--teal); background:color-mix(in srgb, var(--mint) 55%, #fff); }
.check-item input:checked + label::before{ background:var(--teal); border-color:var(--teal); }
.check-item input:checked + label::after{ transform:translateY(-70%) rotate(-45deg) scale(1); }
.check-item input:focus-visible + label{ outline:2px solid var(--teal); outline-offset:2px; }
.check-item .c-hint{ color:var(--muted); font-weight:400; font-size:.84rem; margin-left:auto; }
.check-foot{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:1.4em; padding-top:1.4em; border-top:1px solid var(--line); }

/* =========================================================
   AREAS
   ========================================================= */
.areas{ background:var(--dark-2); color:#fff; padding-block:clamp(56px,8vw,110px); }
.areas-inner{ display:grid; gap:clamp(26px,4vw,56px); align-items:start; }
.areas h2{ font-size:clamp(1.9rem,4.6vw,3.1rem); color:#fff; margin-top:.35em; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:1.6em; }
.chips span{ border:1px solid rgba(255,255,255,.24); color:rgba(255,255,255,.9); padding:.5em 1em; border-radius:var(--pill); font-size:.86rem; font-weight:500; transition:background .25s, border-color .25s, transform .25s var(--ease-out); }
.chips span:hover{ background:rgba(255,255,255,.1); border-color:var(--mint); transform:translateY(-2px); }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ padding-block:var(--sec); }
.faq-grid{ display:grid; gap:clamp(28px,4.5vw,60px); align-items:start; }
.faq-grid header h2{ font-size:clamp(1.9rem,4.6vw,3.1rem); margin:.35em 0 .5em; }
.acc{ border-bottom:1px solid var(--line); }
.acc:first-child{ border-top:1px solid var(--line); }
.acc-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:1.25em 0; text-align:left; font-family:var(--display); font-size:clamp(1.02rem,1.9vw,1.24rem); font-weight:500; transition:color .25s; }
.acc-btn:hover{ color:var(--teal-d); }
.acc-ico{ position:relative; width:18px; height:18px; flex:none; }
.acc-ico::before,.acc-ico::after{ content:""; position:absolute; inset:50% 0 auto; height:2px; background:currentColor; transform:translateY(-50%); transition:transform .32s var(--ease); border-radius:2px; }
.acc-ico::after{ transform:translateY(-50%) rotate(90deg); }
.acc-btn[aria-expanded="true"] .acc-ico::after{ transform:translateY(-50%) rotate(0); }
.acc-panel{ overflow:hidden; height:0; transition:height .38s var(--ease-out); }
.acc-panel p{ padding-bottom:1.4em; color:var(--ink-2); max-width:64ch; }

/* =========================================================
   QUOTE
   ========================================================= */
.quote{ padding-block:var(--sec); background:var(--paper); border-top:1px solid var(--line); }
.quote-grid{ display:grid; gap:clamp(30px,4.5vw,64px); align-items:start; }
.quote-intro h2{ font-size:clamp(1.9rem,4.6vw,3.1rem); margin:.35em 0 .5em; }
.contact-list{ margin-top:1.9em; border-top:1px solid var(--line); }
.contact-list li{ display:grid; grid-template-columns:84px 1fr; gap:14px; padding:1em 0; border-bottom:1px solid var(--line); align-items:baseline; }
.c-label{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.contact-list a{ color:var(--teal-d); border-bottom:1px solid transparent; transition:border-color .25s; }
.contact-list a:hover{ border-bottom-color:var(--teal); }

.quote-form{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,3.2vw,36px); }
.field{ margin-bottom:1.1em; }
.field-row{ display:grid; gap:1.1em; grid-template-columns:1fr 1fr; }
.field label{ display:block; font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:.5em; }
.field .opt{ text-transform:none; letter-spacing:0; font-weight:400; }
.field input,.field select,.field textarea{ width:100%; padding:.82em 1em; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); transition:border-color .25s, box-shadow .25s; }
.field textarea{ resize:vertical; min-height:84px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 20%, transparent); }
.field.invalid input,.field.invalid select{ border-color:var(--amber); }
.err{ display:block; min-height:0; font-size:.78rem; color:var(--amber); margin-top:.4em; }
.field.invalid .err{ min-height:1em; }
.form-status{ min-height:1.4em; margin-top:.9em; font-size:.9rem; font-weight:600; color:var(--teal-d); }
.fineprint{ font-size:.78rem; color:var(--muted); margin-top:.5em; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-foot{ background:var(--dark); color:#fff; padding-top:clamp(52px,7vw,90px); }
.foot-grid{ display:grid; gap:clamp(26px,4vw,46px); padding-bottom:clamp(36px,5vw,58px); }
.foot-brand p{ color:rgba(255,255,255,.6); max-width:34ch; margin-top:.9em; }
.foot-col{ display:grid; gap:.65em; align-content:start; }
.foot-col h4{ font-family:var(--display); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:600; margin-bottom:.35em; }
.foot-col a,.foot-col span{ color:rgba(255,255,255,.82); font-size:.94rem; }
.foot-col a{ width:max-content; transition:color .25s; }
.foot-col a:hover{ color:var(--mint); }
.foot-base{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding-block:24px; border-top:1px solid rgba(255,255,255,.12); font-size:.82rem; color:rgba(255,255,255,.55); }

/* =========================================================
   REVEAL
   ========================================================= */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); }
[data-reveal].in{ opacity:1; transform:none; }
.svc-grid [data-reveal]{ transition-delay:calc(var(--i,0) * 55ms); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width:600px){
  .steps{ grid-template-columns:repeat(2,1fr); }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1.5fr 1fr 1fr 1fr; }
  .check-list{ grid-template-columns:1fr 1fr; }
}
@media (min-width:900px){
  .nav{ display:flex; }
  .head-cta{ margin-left:0; }
  .menu-btn{ display:none; }
  .hero-grid{ grid-template-columns:1fr 1.05fr; align-items:center; }
  .hero-title{ font-size:clamp(3.4rem,6vw,5.6rem); }
  .steps{ grid-template-columns:repeat(4,1fr); }
  .check-grid{ grid-template-columns:.82fr 1.18fr; }
  .areas-inner{ grid-template-columns:.8fr 1.2fr; }
  .faq-grid{ grid-template-columns:.8fr 1.2fr; }
  .quote-grid{ grid-template-columns:1fr 1.05fr; }

  /* bento rhythm */
  .svc-grid{ grid-template-columns:repeat(6,1fr); }
  .svc-card:nth-child(1){ grid-column:span 3; }
  .svc-card:nth-child(2){ grid-column:span 3; }
  .svc-card:nth-child(3){ grid-column:span 2; }
  .svc-card:nth-child(4){ grid-column:span 2; }
  .svc-card:nth-child(5){ grid-column:span 2; }
  .svc-card:nth-child(6){ grid-column:span 6; }
  .svc-card:nth-child(6){ grid-template-columns:auto 1fr; align-items:center; column-gap:26px; }
  .svc-card:nth-child(6) .svc-ico{ grid-row:1; }
  .svc-card:nth-child(6) .svc-list{ grid-column:2; }
}
@media (min-width:1200px){
  .check-list{ grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .hero-title .line > span{ transform:none; }
}