/* Elevated Polished Cleaning — design system
   Display: Cormorant Garamond (from the wordmark)
   UI/body: Jost (from the POLISHED CLEANING lockup)
   Accent:  gold, drawn from the mark, used as hairlines and labels only */

@font-face{
  font-family:"Cormorant Garamond";
  src:url("/assets/fonts/cormorant-garamond.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:optional;
}
@font-face{
  font-family:"Jost";
  src:url("/assets/fonts/jost.woff2") format("woff2");
  font-weight:300 600; font-style:normal; font-display:optional;
}

:root{
  --ink:#0E0F0C;
  --ink-2:#35372F;
  --paper:#FAF8F4;
  --cream:#F2EEE5;
  --muted:#6E6B62;
  --rule:#E0DACE;
  --rule-2:#CFC7B7;
  --gold:#A8841F;
  --gold-dark:#D6B45F;
  --dark:#111210;
  --dark-2:#1A1B17;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ui:"Jost","Helvetica Neue",Arial,sans-serif;
  --measure:66ch;
  --gutter:clamp(20px,5vw,40px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{
  margin:0; background:var(--paper); color:var(--ink-2);
  font-family:var(--ui); font-weight:400; font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--gold); text-underline-offset:3px; text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
}
.shell{max-width:1120px; margin:0 auto; padding-inline:var(--gutter)}
.narrow{max-width:760px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:10px;z-index:100;background:var(--paper);color:var(--ink);padding:10px 14px}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display); font-weight:600; color:var(--ink);
  line-height:1.14; letter-spacing:-.005em; text-wrap:balance; margin:0}
h1{font-size:clamp(34px,5.4vw,54px)}
h2{font-size:clamp(25px,3.4vw,36px)}
h3{font-size:clamp(20px,2.4vw,24px)}
h4{font-family:var(--ui); font-weight:500; font-size:17px; color:var(--ink); margin:0}
p{margin:0; max-width:var(--measure)}
.label{
  font-family:var(--ui); font-weight:400; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin:0;
}
.lead{font-size:clamp(18px,2.1vw,20.5px); line-height:1.6; color:var(--ink-2)}
.flow > * + *{margin-top:1.1em}
.flow > * + h2{margin-top:2.2em}
.flow > * + h3{margin-top:1.9em}
.flow > h2 + *,.flow > h3 + *{margin-top:.85em}
.flow ul{margin:0; padding-left:1.15em; max-width:var(--measure)}
.flow li{margin-bottom:.45em}
.flow li::marker{color:var(--rule-2)}

/* diamond rule — echoes the mark */
.diamond{display:block; width:100%; height:9px; border:0; margin:0;
  background:
    linear-gradient(to right,var(--rule),var(--rule)) left center/calc(50% - 16px) 1px no-repeat,
    linear-gradient(to right,var(--rule),var(--rule)) right center/calc(50% - 16px) 1px no-repeat;
  position:relative;
}
.diamond::after{
  content:""; position:absolute; left:50%; top:50%; width:7px; height:7px;
  transform:translate(-50%,-50%) rotate(45deg); border:1px solid var(--gold);
}

/* ---------- header ---------- */
.masthead{background:var(--dark); color:#EDEAE2}
.masthead a{color:#EDEAE2; text-decoration:none}
.mast-inner{display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding-block:18px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-mark{width:30px; height:30px; flex:none}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-name{font-family:var(--display); font-weight:600; font-size:22px; letter-spacing:.1em; color:#F3F0E8}
.brand-sub{font-family:var(--ui); font-weight:300; font-size:8.5px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold-dark); margin-top:4px}
.nav{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.nav a{font-family:var(--ui); font-size:14px; font-weight:300; letter-spacing:.06em; opacity:.85}
.nav a:hover,.nav a[aria-current="page"]{opacity:1; color:var(--gold-dark)}
.nav .tel{letter-spacing:.04em; font-weight:400}
.btn{
  display:inline-block; font-family:var(--ui); font-size:13px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:13px 24px; border:1px solid var(--gold); color:var(--gold); background:transparent;
  cursor:pointer;
}
.btn:hover{background:var(--gold); color:var(--dark)}
.masthead .btn{border-color:var(--gold-dark); color:var(--gold-dark)}
.masthead .btn:hover{background:var(--gold-dark); color:var(--dark)}
.btn-solid{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.btn-solid:hover{background:var(--gold); border-color:var(--gold); color:var(--dark)}

/* ---------- hero ---------- */
.hero{background:var(--dark); color:#E8E5DC; padding-block:clamp(56px,9vw,104px)}
.hero h1{color:#F6F3EB; max-width:19ch}
.hero .label{color:var(--gold-dark)}
.hero p{color:#C6C2B6; max-width:56ch}
.hero .stack{display:flex; flex-direction:column; gap:22px; align-items:flex-start}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center}

/* page intro (non-home) */
.page-head{background:var(--dark); color:#E8E5DC; padding-block:clamp(44px,6.5vw,72px)}
.page-head h1{color:#F6F3EB; max-width:22ch}
.page-head .lead{color:#C6C2B6; max-width:58ch; margin-top:18px}
.page-head .label{color:var(--gold-dark); margin-bottom:16px}
.crumbs{font-size:13px; color:#908C81; margin-bottom:18px; font-weight:300}
.crumbs a{color:#B6B1A4; text-decoration:none}
.crumbs a:hover{color:var(--gold-dark)}

/* ---------- sections ---------- */
.section{padding-block:clamp(48px,7vw,84px)}
.section--cream{background:var(--cream)}
.section--dark{background:var(--dark); color:#D8D4C9}
.section--dark h2,.section--dark h3{color:#F3F0E8}
.section--dark .label{color:var(--gold-dark)}
.section--dark a{color:var(--gold-dark)}
.sec-head{margin-bottom:34px}
.sec-head .label{margin-bottom:14px}

/* ---------- grids ---------- */
.grid{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.cell{background:var(--paper); padding:26px 24px}
.section--cream .cell{background:var(--cream)}
.cell h3{font-size:21px; margin-bottom:8px}
.cell p{font-size:15.5px; color:var(--muted); line-height:1.6}
.cell a{text-decoration:none}
.cell a:hover h3{color:var(--gold)}

/* numbered steps */
.steps{display:grid; gap:0; counter-reset:step}
.step{display:grid; grid-template-columns:54px 1fr; gap:20px;
  padding-block:22px; border-top:1px solid var(--rule)}
.step:first-child{border-top:0}
.step-n{font-family:var(--display); font-size:26px; color:var(--gold); line-height:1.1}
.step h3{font-size:20px; margin-bottom:6px}
.step p{font-size:16px; color:var(--ink-2)}

/* credential strip */
.creds{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0}
.creds li{font-family:var(--ui); font-size:12px; font-weight:400; letter-spacing:.1em;
  text-transform:uppercase; border:1px solid var(--rule-2); padding:9px 14px; color:var(--ink-2)}
.section--dark .creds li{border-color:#33342C; color:#C6C2B6}

/* area link columns */
.areas-group + .areas-group{margin-top:26px}
.areas-group h4{color:var(--gold); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:400; margin-bottom:12px}
.arealinks{display:flex; flex-wrap:wrap; gap:8px 0; list-style:none; padding:0; margin:0}
.arealinks li{display:flex; align-items:center}
.arealinks li + li::before{content:""; width:4px; height:4px; transform:rotate(45deg);
  background:var(--rule-2); margin:0 14px}
.arealinks a{font-family:var(--ui); font-size:16px; text-decoration:none; color:var(--ink-2)}
.arealinks a:hover{color:var(--gold)}
.section--dark .arealinks a{color:#C6C2B6}
.section--dark .arealinks a:hover{color:var(--gold-dark)}
.section--dark .arealinks li + li::before{background:#3A3B33}

/* pull / method panel */
.panel{background:var(--cream); border-left:2px solid var(--gold); padding:26px 28px; max-width:var(--measure)}
.section--cream .panel{background:var(--paper)}
.panel > * + *{margin-top:1em}

/* testimonial */
.quote{max-width:62ch}
.quote blockquote{margin:0; font-family:var(--display); font-size:clamp(21px,2.6vw,27px);
  line-height:1.4; color:var(--ink)}
.quote cite{display:block; margin-top:16px; font-family:var(--ui); font-style:normal;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}

/* FAQ */
.faq{border-top:1px solid var(--rule); max-width:var(--measure)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{padding:18px 30px 18px 0; cursor:pointer; list-style:none;
  font-family:var(--ui); font-weight:500; font-size:17px; color:var(--ink); position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:4px; top:50%; width:8px; height:8px;
  border-right:1px solid var(--gold); border-bottom:1px solid var(--gold);
  transform:translateY(-70%) rotate(45deg)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details > p{padding:0 0 20px; font-size:16px; color:var(--ink-2)}

/* form */
.form{max-width:600px; display:grid; gap:18px}
.field{display:grid; gap:7px}
.field label{font-family:var(--ui); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:var(--ui); font-size:16px; color:var(--ink); background:var(--paper);
  border:1px solid var(--rule-2); padding:12px 14px; border-radius:0; width:100%;
}
.field textarea{min-height:110px; resize:vertical}
.form-note{font-size:14px; color:var(--muted); max-width:56ch}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}

/* honeypot — hidden from people, visible to naive bots.
   Not display:none, which some bots detect and skip. */
.hp{position:absolute!important; left:-9999px!important; top:auto!important;
  width:1px!important; height:1px!important; overflow:hidden!important}

/* journal */
.posts{display:grid; gap:0; border-top:1px solid var(--rule)}
.post-row{display:grid; grid-template-columns:150px 1fr; gap:26px;
  padding-block:26px; border-bottom:1px solid var(--rule); text-decoration:none}
.post-row:hover h3{color:var(--gold)}
.post-meta{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-top:6px}
.post-row h3{font-size:23px; margin-bottom:7px}
.post-row p{font-size:15.5px; color:var(--muted); line-height:1.6}

/* footer */
.footer{background:var(--dark); color:#9D998E; padding-block:56px 34px; font-size:14.5px}
.footer a{color:#C6C2B6; text-decoration:none}
.footer a:hover{color:var(--gold-dark)}
.footer h4{color:var(--gold-dark); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:400; margin-bottom:14px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:38px}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{margin-bottom:8px}
.footer-base{margin-top:40px; padding-top:22px; border-top:1px solid #2A2B24;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:13px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr; gap:30px}
}
@media (max-width:680px){
  body{font-size:16.5px}
  .grid--3,.grid--2{grid-template-columns:1fr}
  .mast-inner{padding-block:14px}
  .nav{gap:16px; width:100%; justify-content:flex-start}
  .nav .btn{display:none}
  .post-row{grid-template-columns:1fr; gap:8px}
  .post-meta{padding-top:0}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .step{grid-template-columns:38px 1fr; gap:14px}
}