/*
Theme Name: The Cleaning Scientist
Description: A commercial cleaning website with a walkthrough enquiry form.
Version: 2.4.2
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: cleaning-scientist
*/

:root{--paper:#f4f7f1;--white:#fcfefa;--ink:#102621;--muted:#475c53;--green:#104f3d;--deep:#0b2922;--mint:#d8f3dd;--gold:#6e9b75;--line:#d4e2d7;--sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;--serif:Georgia,"Times New Roman",serif}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #ac7132;outline-offset:4px}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{line-height:1.08}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.045em}
h1{font-size:clamp(3rem,7.4vw,7rem);margin-bottom:24px}
h2{font-size:clamp(2.35rem,4.7vw,4.45rem);margin-bottom:18px}
h3{font-size:1.3rem;letter-spacing:-.025em;margin-bottom:12px}
p{margin-bottom:1em}
[hidden]{display:none!important}
.wrap{width:min(1160px,calc(100% - 64px));margin-inline:auto}
.skip{position:absolute;z-index:20;left:1rem;top:1rem;transform:translateY(-180%);background:white;padding:8px 14px}
.skip:focus{transform:none}
.header{background:var(--paper);border-bottom:1px solid var(--line)}
.header-inner{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--serif);font-size:1.32rem;letter-spacing:-.045em;line-height:1.05}
.brand-mark{display:grid;place-items:center;width:39px;height:39px;border-radius:50%;background:var(--green);color:#fff;font:600 .69rem/1 var(--sans);letter-spacing:.08em}
.nav{display:flex;align-items:center;gap:clamp(12px,2vw,25px)}
.nav a{font-size:.86rem;font-weight:650;text-decoration:none;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:47px;padding:11px 18px;border:1px solid var(--green);border-radius:5px;background:var(--green);color:white;text-decoration:none;font-size:.91rem;font-weight:700}
.button:hover{background:var(--deep)}
.button-light{background:var(--mint);color:var(--deep);border-color:var(--mint)}
.button-light:hover{background:white}
.text-link{font-weight:700;text-underline-offset:5px}
.label{display:flex;align-items:center;gap:9px;margin-bottom:19px;color:var(--green);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em}
.label::before{content:"";width:21px;height:1px;background:var(--gold)}
.hero{position:relative;overflow:hidden;background:var(--deep);color:var(--white)}
.hero-inner{display:grid;grid-template-columns:1.16fr .84fr;align-items:center;gap:42px;min-height:555px;padding-block:66px}
.hero .label,.dark .label{color:var(--mint)}
.hero h1 em{display:block;color:#bde2c8;font-weight:400}
.hero-copy p:not(.label){max-width:490px;color:#d5e1d9;font-size:1.14rem}
.actions{display:flex;align-items:center;gap:23px;flex-wrap:wrap;margin-top:29px}
.section{padding-block:clamp(48px,7vw,92px)}
.section-tight{padding-block:38px}
.section-light{background:var(--white);border-block:1px solid var(--line)}
.dark{background:var(--deep);color:var(--white)}
.lead{max-width:630px;color:var(--muted);font-size:1.08rem}
.dark .lead{color:#d5e1d9}
.head-row{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:27px}
.head-row .lead{margin-bottom:0}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.card{background:var(--white);border:1px solid var(--line);border-radius:7px;padding:25px;scroll-margin-top:20px}
.card .number{display:block;margin-bottom:27px;font-size:.73rem;font-weight:800;letter-spacing:.13em;color:var(--green)}
.card p,.steps p,.faq p{color:var(--muted)}
.card p:last-child,.steps p:last-child{margin-bottom:0}
.card a{font-size:.92rem}
.split{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:clamp(24px,6vw,72px)}
.steps{list-style:none;padding:0;margin:0;counter-reset:step}
.steps li{padding:15px 0 17px 46px;border-top:1px solid var(--line);position:relative}
.steps li::before{counter-increment:step;content:"0" counter(step);position:absolute;left:0;top:15px;color:var(--green);font-weight:800;font-size:.76rem}
.steps h3{margin:0 0 6px}
.page-intro{padding-block:61px 53px;background:#e6eee4;border-bottom:1px solid var(--line)}
.page-intro h1{font-size:clamp(2.9rem,6.4vw,5.4rem);margin-bottom:13px}
.page-intro .lead{margin-bottom:0}
.sample{border:1px solid var(--line);border-radius:8px;background:var(--white);padding:25px;color:var(--ink)}
.sample h3{margin-bottom:7px}
.sample p{color:var(--muted)}
.sample table{border-collapse:collapse;width:100%;font-size:.91rem}
.sample th,.sample td{text-align:left;border-top:1px solid var(--line);padding:11px 5px}
.sample th{font-weight:800}
.sample td:last-child{color:var(--green);font-weight:700}
.pills{display:flex;gap:9px;flex-wrap:wrap;padding:0;list-style:none}
.pills li{border:1px solid #a8bcad;background:#e8f0e5;border-radius:100px;padding:5px 12px;font-size:.85rem;font-weight:650}
.faq details{border-top:1px solid var(--line);padding:14px 0}
.faq summary{font-weight:750;cursor:pointer}
.faq p{margin:8px 0 0}
.footer{background:var(--deep);color:#f6f5ed}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:29px}
.footer p{margin:0;color:#d5e1d9;font-size:.84rem}
.footer .brand-mark{background:var(--mint);color:var(--deep)}
.footer a{white-space:nowrap}
.form{background:var(--white);border:1px solid var(--line);border-radius:7px;padding:24px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field-full{grid-column:1/-1}
.field label{display:block;font-size:.85rem;font-weight:750;margin-bottom:4px}
.field input,.field select,.field textarea{display:block;width:100%;padding:8px 10px;border:1px solid #a4b2a8;border-radius:4px;background:#fff;color:var(--ink);min-height:43px}
.field textarea{min-height:110px;resize:vertical}
.form .button{margin-top:15px}
.form-note,.feedback{margin:11px 0 0;font-size:.85rem;color:var(--muted)}
.feedback{padding:11px;background:#e6eee4;border-radius:4px;color:var(--deep)}
.form-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:850px){
  .wrap{width:calc(100% - 38px)}
  .header-inner{align-items:flex-start;flex-direction:column;gap:11px;padding-block:15px}
  .nav{flex-wrap:wrap;gap:10px 17px}
  .nav .button{min-height:38px;padding:6px 11px}
  .hero-inner{gap:25px;min-height:0;padding-block:51px}
}
@media(max-width:620px){
  .hero-inner,.grid,.split,.fields{grid-template-columns:1fr}
  .hero h1{margin-bottom:16px}
  .hero-copy p:not(.label){font-size:1rem}
  .head-row,.footer-inner{align-items:flex-start;flex-direction:column}
  .head-row{gap:12px}
  .card{padding:18px}
  .card .number{margin-bottom:12px}
  .nav a{font-size:.8rem}
  .form,.sample{padding:16px}
}
.card-title{font:700 1.35rem/1.1 var(--sans);letter-spacing:-.025em;margin-bottom:12px}
.sample-caption{text-align:left;padding-bottom:6px;color:var(--muted);font-size:.8rem}
.arrow{display:inline-block;position:relative;width:.65em;height:.65em;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;margin-left:.15em}
.arrow::after{content:"";position:absolute;left:-.14em;top:.2em;width:.76em;border-top:1.5px solid currentColor;transform:rotate(-45deg)}

.brand-mark {
  width: 47px;
  height: 47px;
  flex: 0 0 47px;
  object-fit: cover;
}
.hero {
  background: radial-gradient(ellipse at 82% 35%, #174a3c 0%, #0b2922 62%);
}
.hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 640px;
}
.hero h1 {
  font-size: clamp(3rem, 5.9vw, 5.8rem);
  letter-spacing: -.065em;
}
.hero h1 em { color: #caeed3; }
.label, .number, .sample-tag { font-family: var(--mono); }
.checkup {
  margin: 0;
  min-width: 0;
  background: #102f27;
  border: 1px solid #658d7b;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 70px #071c18a0;
}
.checkup-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #446b5e;
}
.checkup-heading small, .checkup-heading strong { display: block; }
.checkup-heading small {
  font: 600 clamp(.59rem, 1vw, .72rem)/1.5 var(--mono);
  letter-spacing: .07em;
  color: #b8dcc5;
}
.checkup-heading strong { font-size: clamp(1.15rem, 2.3vw, 1.55rem); }
.sample-tag {
  border: 1px solid #7fa58f;
  border-radius: 100px;
  padding: 3px 9px;
  color: #d9f0df;
  font-size: .71rem;
  text-transform: uppercase;
}
.floor-plan { position: relative; }
.floor-plan img { width: 100%; }
.checkpoint {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 1px solid #91bba4;
  border-radius: 50%;
  width: clamp(23px, 3vw, 36px);
  aspect-ratio: 1;
  background: #143e32;
  color: #e5f7e9;
  font: 700 clamp(.56rem, 1vw, .74rem)/1 var(--mono);
}
.checkpoint-entry { top: 36%; left: 30%; }
.checkpoint-washroom { top: 41%; left: 74%; }
.checkpoint-meeting { top: 66%; left: 35%; }
.checkup:has(#tcs-entry:checked) .checkpoint-entry,
.checkup:has(#tcs-washroom:checked) .checkpoint-washroom,
.checkup:has(#tcs-meeting:checked) .checkpoint-meeting {
  color: #0b2922;
  background: #d8f3dd;
  box-shadow: 0 0 0 5px #d8f3dd30;
}
.zone-control {
  padding: 0 16px 15px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.zone-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.zone-control label {
  padding: 8px 2px;
  border: 1px solid #5f8573;
  border-radius: 5px;
  text-align: center;
  font: 650 clamp(.59rem, 1.05vw, .75rem)/1.35 var(--mono);
  cursor: pointer;
}
.zone-control input:checked + label { background: #d8f3dd; color: #102621; }
.zone-control input:focus-visible + label { outline: 3px solid #c3efca; outline-offset: 2px; }
.zone-notes { grid-column: 1/-1; min-height: 4.6rem; padding: 10px 2px 0; }
.zone-notes p { display: none; margin: 0; }
.zone-notes span { display: block; color: #c7ded0; font-size: .85rem; }
#tcs-entry:checked ~ .zone-notes .entry-note,
#tcs-washroom:checked ~ .zone-notes .washroom-note,
#tcs-meeting:checked ~ .zone-notes .meeting-note { display: block; }
.card { border-top: 3px solid #79a889; }
.page-intro {
  background-color: #e6eee4;
  background-image: linear-gradient(#66947a20 1px, transparent 1px), linear-gradient(90deg, #66947a20 1px, transparent 1px);
  background-size: 24px 24px;
}
.formula {
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #e7f1e7;
}
.formula p:nth-child(2) {
  display: flex;
  align-items: center;
  gap: .5em;
  flex-wrap: wrap;
  font-size: clamp(.95rem, 2.4vw, 1.55rem);
}
.formula p:last-child { color: var(--muted); margin-bottom: 0; }
.formula span { color: var(--green); }
@media (max-width: 850px) {
  .hero-inner { min-height: 0; }
}
@media (max-width: 720px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(2.8rem, 9.4vw, 4.3rem); }
  .checkup { max-width: 560px; }
  .zone-control label { font-size: .68rem; }
}

.method-home { scroll-margin-top: 1rem; }
.method-home .method-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.method-steps { display: grid; align-items: start; gap: .75rem; }
.method-step { background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.method-step[open] { border-color: var(--gold); }
.method-step summary {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .9rem 1rem;
  border-radius: 7px;
  color: var(--green);
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}
.method-step summary::-webkit-details-marker { display: none; }
.method-step summary:hover, .method-step[open] summary { background: var(--mint); }
.method-step summary::after {
  content: "";
  width: .5rem;
  height: .5rem;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.method-step[open] summary::after { transform: rotate(225deg); }
.method-number { font: 700 .73rem var(--mono); }
.method-step p { margin: 0; padding: .85rem 1rem 1rem; color: var(--muted); }
.method-step p + p { padding-top: 0; }
@media (max-width: 900px) {
  .method-home .method-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .method-home .method-steps { grid-template-columns: 1fr; }
}

.report-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.report-header .label { margin-bottom: .55rem; }
.report-header h3 { font-size: clamp(1.35rem, 3vw, 2rem); margin: 0; }
.report-badge { border: 1px solid var(--line); border-radius: 100px; padding: .35rem .75rem; color: var(--green); font: 600 .75rem var(--mono); }
.report-scroll { overflow-x: auto; }
.report-scroll:focus-visible { outline: 3px solid #ac7132; outline-offset: 3px; }
.report-scroll table { min-width: 480px; }
.report-note { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9rem; }
.report-link { margin: 1.2rem 0 0; }
.contact-details { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.contact-details .label { margin-bottom: .6rem; }
.contact-details p:last-child { margin-bottom: 0; }
.footer-contact { display: grid; gap: .25rem; min-width: 0; overflow-wrap: anywhere; }
.footer-contact span { color: #d5e1d9; font-size: .84rem; }