/* Lucy Hands Cleaning Co. — retro house-proud palette pulled from the brand art */
:root {
  --cream:      #F1E8CC;
  --cream-deep: #E6DABA;
  --paper:      #FBF7EC;
  --teal:       #4A0D3A;   /* plum — from the "Signed Lucy" wordmark */
  --teal-soft:  #7A2461;
  --magenta:    #C2188C;   /* brand pink — from the buttons + L mark */
  --pink-soft:  #F7A8D4;
  --sage:       #9BC7BB;
  --olive:      #A3B23F;
  --mustard:    #E5B23C;
  --brown:      #6B4B32;
  --ink:        #2B2A22;
  --ink-soft:   #5C5A4C;
  --rule:       rgba(74, 13, 58, .16);
  --shadow:     0 18px 40px -24px rgba(43, 42, 34, .55);
  --wrap: 1140px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Karla", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: min(var(--wrap), calc(100% - 3rem)); margin-inline: auto; }

h1, h2, h3 {
  font-family: "Archivo Black", "Haettenschweiler", Impact, sans-serif;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0;
}
.script {
  font-family: "Sacramento", "Snell Roundhand", cursive;
  font-weight: 400;
  letter-spacing: 0;
}
.eyebrow {
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal-soft);
  margin: 0 0 .9rem;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  border: 2px solid var(--teal);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn--primary { background: var(--magenta); border-color: var(--magenta); color: var(--paper); box-shadow: 0 8px 0 -2px rgba(122,36,97,.28); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 0 -2px rgba(122,36,97,.28); }
.btn--ghost { background: transparent; color: var(--magenta); border-color: var(--magenta); }
.btn--ghost:hover { background: rgba(194,24,140,.08); transform: translateY(-2px); }
.btn--mustard { background: var(--mustard); border-color: var(--brown); color: var(--brown); box-shadow: 0 8px 0 -2px rgba(107,75,50,.3); }
.btn--mustard:hover { transform: translateY(-2px); }

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(241, 232, 204, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.nav { display: flex; align-items: center; gap: 2rem; padding: .8rem 0; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.brand img { width: 44px; height: 44px; border-radius: 50%; }
.brand--mark { padding: .2rem 0; }
.brand--mark img { width: auto; height: 64px; border-radius: 0; }
.brand b {
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 1.02rem; line-height: 1; color: var(--teal); display: block;
  letter-spacing: .01em;
}
.brand small { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.nav nav { display: flex; gap: 1.6rem; }
.nav nav a { text-decoration: none; font-weight: 600; font-size: .93rem; color: var(--teal); opacity: .8; }
.nav nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.nav .btn { padding: .6rem 1.2rem; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 4.5rem 0 0; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: end; }
.hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.7rem); color: var(--teal); max-width: 15ch; }
.hero h1 .script { display: block; font-size: 1.5em; color: var(--magenta); line-height: .8; margin-bottom: .04em; max-width: none; }
.hero p.lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 46ch; margin: 1.4rem 0 2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; }
.hero-copy { padding-bottom: 3.5rem; position: relative; z-index: 2; }
.trust { display: flex; flex-wrap: wrap; gap: 1.4rem; font-size: .82rem; color: var(--ink-soft); }
.trust span { display: flex; align-items: center; gap: .45rem; }
.trust svg { width: 16px; height: 16px; color: var(--olive); flex: none; }

.hero-art { position: relative; isolation: isolate; }
.hero-art .blob {
  position: absolute; z-index: -1;
  left: 50%; bottom: 0; translate: -50% 0;
  width: min(100%, 480px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--sage) 0%, rgba(155,199,187,.5) 52%, rgba(155,199,187,0) 70%);
}
.hero-art img { position: relative; margin-inline: auto; width: 100%; max-width: 460px; }
.sticker {
  position: absolute; z-index: 3;
  background: var(--mustard); color: var(--brown);
  border: 2px solid var(--brown); border-radius: 999px;
  padding: .55rem 1.05rem; font-weight: 800; font-size: .82rem;
  box-shadow: var(--shadow);
}
.sticker--1 { top: 14%; left: -2%; rotate: -8deg; }
.sticker--2 { top: 46%; right: -1%; rotate: 7deg; background: var(--paper); color: var(--teal); border-color: var(--teal); }

/* ---------- ticker ---------- */
.ticker {
  background: var(--teal); color: var(--cream);
  padding: .75rem 0; overflow: hidden; white-space: nowrap;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
}
.ticker div { display: inline-flex; gap: 2.5rem; animation: slide 26s linear infinite; padding-right: 2.5rem; }
.ticker i { font-style: normal; color: var(--pink-soft); }
@keyframes slide { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .ticker div { animation: none; } }

/* ---------- sections ---------- */
section { padding: 5.5rem 0; }
.section-head { max-width: 60ch; margin-bottom: 3rem; }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); color: var(--teal); }
.section-head p { color: var(--ink-soft); margin: 1rem 0 0; }
.on-paper { background: var(--paper); }

/* services */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.card {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 1.9rem 1.6rem;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.on-paper .card { background: var(--cream); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card .ic {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: var(--sage); color: var(--teal);
}
.card .ic svg { width: 24px; height: 24px; }
.card:nth-child(2) .ic { background: var(--mustard); color: var(--brown); }
.card:nth-child(3) .ic { background: var(--olive); color: #fff; }
.card:nth-child(4) .ic { background: var(--brown); color: var(--cream); }
.card:nth-child(5) .ic { background: var(--magenta); color: #fff; }
.card h3 { font-size: 1.12rem; color: var(--teal); margin-bottom: .5rem; }
.card p { margin: 0 0 1.1rem; color: var(--ink-soft); font-size: .95rem; }
.card .price { margin-top: auto; font-weight: 800; color: var(--brown); font-size: .9rem; }
.card .price em { font-style: normal; font-weight: 500; color: var(--ink-soft); }

/* split feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.split img { border-radius: 22px; box-shadow: var(--shadow); }
.checks { list-style: none; padding: 0; margin: 1.6rem 0 2rem; display: grid; gap: .7rem; }
.checks li { display: flex; gap: .7rem; align-items: flex-start; font-size: .97rem; }
.checks svg { width: 20px; height: 20px; color: var(--olive); flex: none; margin-top: .18rem; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; counter-reset: s; }
.step { position: relative; padding-top: 3.2rem; }
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 2.4rem; color: var(--magenta);
}
.step h3 { font-size: 1.1rem; color: var(--teal); margin-bottom: .4rem; }
.step p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* testimonials */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.quote {
  background: var(--paper); border-radius: 20px; padding: 1.9rem 1.7rem;
  border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 1rem;
}
.stars { color: var(--mustard); letter-spacing: .18em; font-size: .95rem; }
.quote blockquote { margin: 0; font-size: 1rem; }
.quote cite { font-style: normal; font-size: .85rem; color: var(--ink-soft); margin-top: auto; }
.quote cite b { display: block; color: var(--teal); font-size: .95rem; }

/* pricing strip */
.strip {
  background: var(--teal); color: var(--cream);
  border-radius: 26px; padding: 3rem clamp(1.6rem, 4vw, 3.4rem);
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 2.5rem; align-items: center;
}
.strip h2 { color: var(--cream); font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.strip p { color: rgba(241,232,204,.78); margin: 1rem 0 0; }
.strip .btns { display: flex; flex-wrap: wrap; gap: .8rem; }
.strip .btn--ghost { color: var(--cream); border-color: rgba(241,232,204,.6); }
.strip .btn--ghost:hover { background: rgba(241,232,204,.12); }

/* faq */
.faq { max-width: 780px; }
details {
  border-bottom: 1px solid var(--rule); padding: 1.15rem 0;
}
details summary {
  cursor: pointer; list-style: none; font-weight: 700; color: var(--teal);
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; font-size: 1.4rem; color: var(--magenta); line-height: 1; }
details[open] summary::after { content: "–"; }
details p { margin: .8rem 0 0; color: var(--ink-soft); font-size: .96rem; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
form { display: grid; gap: 1rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
label { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); }
input, select, textarea {
  width: 100%; margin-top: .35rem; padding: .8rem .95rem;
  border: 1px solid var(--rule); border-radius: 12px;
  background: var(--paper); font: inherit; font-size: .95rem; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--olive); outline-offset: 1px; }
textarea { min-height: 120px; resize: vertical; }
.form-note { font-size: .8rem; color: var(--ink-soft); }
.contact-card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 22px; padding: 2rem;
}
.contact-card ul { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 1rem; }
.contact-card li { display: flex; gap: .8rem; font-size: .95rem; }
.contact-card svg { width: 20px; height: 20px; color: var(--teal-soft); flex: none; margin-top: .2rem; }
.contact-card b { display: block; color: var(--teal); }
.contact-card span { color: var(--ink-soft); }

/* footer */
footer.site { background: var(--teal); color: rgba(241,232,204,.75); padding: 3.5rem 0 2rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; align-items: start; }
footer.site .brand b, footer.site h4 { color: var(--cream); }
footer.site h4 { font-family: "Archivo Black", Impact, sans-serif; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 1rem; }
footer.site ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; font-size: .93rem; }
footer.site a { text-decoration: none; }
footer.site a:hover { color: var(--mustard); }
.sig { max-width: 200px; margin-top: 1.4rem; filter: brightness(0) invert(1); opacity: .82; }
.foot-bottom {
  margin-top: 2.8rem; padding-top: 1.4rem; border-top: 1px solid rgba(241,232,204,.18);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .82rem;
}

/* reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* responsive */
@media (max-width: 960px) {
  .hero-grid, .split, .contact-grid, .strip { grid-template-columns: 1fr; }
  .services, .steps, .quotes, .foot-grid { grid-template-columns: 1fr 1fr; }
  .hero-copy { padding-bottom: 1rem; }
  .split { gap: 2rem; }
  .nav nav { display: none; }
}
@media (max-width: 620px) {
  .services, .steps, .quotes, .foot-grid, .row { grid-template-columns: 1fr; }
  section { padding: 4rem 0; }
  .wrap { width: calc(100% - 2.2rem); }
  .sticker--1 { left: -1%; } .sticker--2 { right: -1%; }
}


/* ---------- arrival fade ----------
   Handed over on shydore.dev's void, so the page comes up out of the same
   colour the expanding card faded into. CSS only — it must not need JS. */
.page-in{position:fixed;inset:0;z-index:9500;background:#0a0b08;pointer-events:none;
  opacity:0;animation:page-in .62s ease;}   /* base state is invisible: if animations never run, the page is still readable */
@keyframes page-in{from{opacity:1;}to{opacity:0;visibility:hidden;}}

/* ---------- the page turn back ----------
   A folded corner, always there, bottom-right. Lifts and names itself on hover
   or focus; otherwise it stays out of the way. */
.back-shy{position:fixed;right:0;bottom:0;z-index:9000;width:74px;height:74px;
  display:block;text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:width .34s cubic-bezier(.42,.02,.18,1),height .34s cubic-bezier(.42,.02,.18,1);}
.back-shy-fold{position:absolute;inset:0;
  clip-path:polygon(100% 0,100% 100%,0 100%);
  background:linear-gradient(315deg,#3A0A2D 0%,#4A0D3A 46%);
  filter:drop-shadow(-5px -5px 9px rgba(74,13,58,.3));
  transition:background .34s ease;}
.back-shy-arr{position:absolute;right:19px;bottom:12px;font-size:15px;line-height:1;
  color:#FBF7EC;transition:transform .34s cubic-bezier(.42,.02,.18,1),color .34s ease;}
.back-shy-txt{position:absolute;right:18px;bottom:15px;white-space:nowrap;
  font-family:'Inter',system-ui,sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#FBF7EC;opacity:0;transform:translateX(8px);
  transition:opacity .3s ease,transform .34s cubic-bezier(.42,.02,.18,1);}
.back-shy-txt b{font-weight:inherit;color:#F5A9D8;}
.back-shy:hover,.back-shy:focus-visible{width:172px;height:172px;outline:0;}
.back-shy:hover .back-shy-arr,.back-shy:focus-visible .back-shy-arr{transform:translate(0,-22px);}
.back-shy:hover .back-shy-txt,.back-shy:focus-visible .back-shy-txt{opacity:1;transform:none;transition-delay:.1s;}
.back-shy:focus-visible{outline:2px solid #C2188C;}
@media (prefers-reduced-motion:reduce){
  .page-in{display:none;}
  .back-shy,.back-shy *{transition:none;}
}
@media (max-width:600px){
  .back-shy{width:58px;height:58px;}
  .back-shy:hover,.back-shy:focus-visible{width:140px;height:140px;}
}

/* touch: the blurred sticky header costs more on an older phone than it is worth
   behind a 92%-opaque cream */
@media (hover: none) {
  header.site { background: rgba(241, 232, 204, .98); backdrop-filter: none; }
}

/* ---------- demo-site gate ----------------------------------------------
   The studio speaking before the example opens: what this is, what it is not,
   and a door. Sits above .page-in (9500) so the visitor lands on it first.

   Hidden until the script turns it on, the same reasoning as .reveal on
   shydore.dev: with no JavaScript there is nothing to dismiss it with, and a
   black screen you cannot get past is worse than no disclaimer. Shown once per
   tab per site, so clicking through the work on a call is not a toll gate.

   Accent and display face come in per site as --dg-accent / --dg-face, so this
   block stays identical in all four and can be edited in one pass. --------- */
.dgate{display:none;position:fixed;inset:0;z-index:9600;background:#0a0b08;color:#e9e6d8;
  place-items:center;padding:34px 22px;overflow-y:auto;opacity:1;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  transition:opacity .28s ease;}
.dgate.on{display:grid;}
.dgate.out{opacity:0;pointer-events:none;}
.dgate-in{max-width:53ch;text-align:center;animation:dgate-up .5s cubic-bezier(.2,.7,.2,1) both;}
@keyframes dgate-up{from{opacity:0;transform:translateY(12px);}}
.dgate-ck{margin:0;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:.64rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--dg-accent,#ff9a1f);}
.dgate-nm{margin:14px 0 22px;font-family:var(--dg-face,inherit);font-weight:var(--dg-weight,400);
  font-size:clamp(1.9rem,6.4vw,3.2rem);line-height:1.04;color:#e9e6d8;text-wrap:balance;}
.dgate-p{margin:0 0 14px;font-size:.94rem;font-weight:400;line-height:1.66;color:#a4a797;}
.dgate-p b{color:#e9e6d8;font-weight:700;}
.dgate-p--care{color:#e9e6d8;}
.dgate-rule{width:46px;height:1px;background:#2b2e22;margin:24px auto 22px;}
.dgate-go{font:inherit;font-size:.87rem;font-weight:700;letter-spacing:.03em;background:#e9e6d8;
  color:#0a0b08;border:0;border-radius:100px;padding:14px 27px;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;
  transition:transform .2s ease,background .2s ease;}
.dgate-go:hover{background:#fff;transform:translateY(-1px);}
.dgate-go:focus-visible,.dgate-back:focus-visible{outline:2px solid var(--dg-accent,#ff9a1f);
  outline-offset:3px;}
.dgate-back{display:block;margin-top:20px;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#6b6e5e;text-decoration:none;}
.dgate-back:hover{color:#a4a797;}
html.dgate-lock,html.dgate-lock body{overflow:hidden;}
@media (prefers-reduced-motion:reduce){
  .dgate,.dgate-go{transition:none;}
  .dgate-in{animation:none;}
}