/* Anita Cleaning Service, round one. Palette from her shirt: royal blue, white, the green ground line;
   warm cream paper so text never sits on pure white. Type: Cormorant Garamond (her logo's serif) for
   headings, Atkinson Hyperlegible (made for low-vision readers) for everything read. */
@font-face{font-family:"Atkinson";src:url(/fonts/atkinson-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/fonts/atkinson-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cormorant";src:url(/fonts/cormorant-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --blue:#1F4FC4; --blue-d:#173C99; --navy:#14286B; --green:#8DC63F; --green-d:#3E7516;
  --paper:#FBF7EF; --cream:#F3ECDD; --ink:#1B2240; --muted:#4A5170; --white:#fff;
  --fs:18px; --tap:48px; --r:14px; --w:1180px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:var(--fs);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.6 "Atkinson",system-ui,sans-serif;letter-spacing:.01em;word-spacing:.06em;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-d)}
.wrap{width:100%;max-width:var(--w);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px}
h1,h2,h3{font-family:"Cormorant",Georgia,serif;font-weight:600;color:var(--navy);line-height:1.15;letter-spacing:.005em;margin:0 0 .5em}
h1{font-size:2.35rem}
h2{font-size:2rem}
h3{font:700 1.15rem/1.3 "Atkinson",sans-serif;color:var(--navy);margin-bottom:.4em}
.sec-blue h3{color:#fff}
p{margin:0 0 1em;max-width:62ch}
:focus-visible{outline:3px solid var(--green-d);outline-offset:3px}

/* the logo's own pieces, used as marks */
.spark,.sparks::before{display:inline-block;background:var(--green);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.spark{width:.8em;height:.8em;margin-right:.5em;vertical-align:-.05em}
.sparks{display:block;height:18px;margin-bottom:16px}
.sparks::before{content:"";width:58px;height:18px;
  clip-path:polygon(9px 0,11px 7px,18px 9px,11px 11px,9px 18px,7px 11px,0 9px,7px 7px, 29px 0,31px 7px,38px 9px,31px 11px,29px 18px,27px 11px,20px 9px,27px 7px, 49px 0,51px 7px,58px 9px,51px 11px,49px 18px,47px 11px,40px 9px,47px 7px)}
.sec-blue .sparks::before{background:#fff}

/* buttons: 48 px tall at least */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:.55em 1.2em;border-radius:999px;
  font:700 1rem/1.2 "Atkinson",sans-serif;text-decoration:none;border:2px solid transparent;cursor:pointer;text-align:center;white-space:nowrap}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-d)}
.btn-line{background:transparent;color:var(--blue-d);border-color:var(--blue)}
.btn-line:hover{background:#E6EDFB}
.btn-white{background:#fff;color:var(--blue-d);border-color:var(--blue)}

/* header */
.top{background:var(--paper);border-bottom:1px solid #E4DCC8;position:relative;z-index:5}
.top-in{display:flex;align-items:center;gap:20px;min-height:72px;padding-top:8px;padding-bottom:8px}
.brand{flex:0 0 auto}.brand img{width:285px}
.nav{display:none;gap:2px;margin-left:auto;flex-wrap:nowrap;white-space:nowrap}
.nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 .7em;color:var(--navy);text-decoration:none;font-weight:700;border-radius:8px}
.nav a:hover{background:var(--cream)}
.top-cta{display:none}

/* hero: words on paper, the picture framed in her logo's arch, the green ground line under it */
.hero{padding:22px 0 30px}
.hero-in{display:grid;gap:22px}
.eyebrow{font-weight:700;color:var(--green-d);text-transform:none;margin-bottom:.6em}
.lead{font-size:1.12rem;color:var(--ink)}
.small{font-size:.92rem;color:var(--muted);margin-top:.9em}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.arch{margin:0;position:relative;order:-1}
.arch picture,.arch img{border-radius:999px 999px 18px 18px}
.arch img{width:100%;aspect-ratio:4/3;object-fit:cover;border:7px solid var(--blue);box-shadow:0 0 0 6px var(--paper) inset}
.ground{position:absolute;left:-4%;right:-4%;bottom:-14px;height:24px;background:var(--green);
  clip-path:ellipse(50% 30% at 50% 100%);border-radius:50%}

/* trust strip, the shirt's blue */
.strip{background:var(--blue);color:#fff}
.strip-in{list-style:none;margin:0 auto;padding-top:14px;padding-bottom:14px;display:grid;gap:8px;font-weight:700}
.strip .spark{background:var(--green)}

.sec{padding:52px 0}
.sec-blue{background:var(--navy);color:#fff}
.sec-blue h2,.sec-blue h3{color:#fff}
.sec-cream{background:var(--cream)}
.intro{font-size:1.1rem;color:var(--muted)}
.cards{display:grid;gap:22px;margin-top:22px}
.card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 2px 0 #E4DCC8}
.card img{aspect-ratio:3/2;object-fit:cover;width:100%}
.card h3,.card p{padding:0 18px}
.card h3{margin-top:16px}
.trust{display:grid;gap:18px;margin-top:20px}
.t-item{background:var(--blue);border-radius:var(--r);padding:20px}
.t-item p{margin:0}
.about{display:grid;gap:26px;align-items:center}
.about-pic{margin:0}
.about-pic img{border-radius:var(--r) var(--r) 999px 999px;aspect-ratio:1/1;object-fit:cover;width:100%;max-width:440px}
.hp{position:absolute;left:-5000px;width:1px;height:1px;opacity:0}

/* form */
.contact{display:grid;gap:26px}
.form{background:#fff;border-radius:var(--r);padding:22px;display:grid;gap:14px;box-shadow:0 2px 0 #E4DCC8}
.form label{display:grid;gap:6px;font-weight:700}
.form input:not([type=checkbox]),.form textarea{font:400 1rem/1.4 "Atkinson",sans-serif;min-height:var(--tap);padding:10px 12px;border:2px solid #C9C2B0;border-radius:10px;background:var(--paper);color:var(--ink);width:100%}
.form fieldset{border:0;padding:0;margin:0;display:grid;gap:4px}
.form legend{font-weight:700;margin-bottom:6px}
.form .chk{display:flex;align-items:center;gap:12px;font-weight:400;min-height:var(--tap)}
.chk input{width:24px;height:24px;accent-color:var(--blue)}
.form-msg{margin:0;font-weight:700;color:var(--green-d)}
.form-msg.err{color:#A3261B}

.foot{background:var(--navy);color:#fff;padding:36px 0 120px}
.foot-in{display:grid;gap:20px;align-items:center}
.foot img{width:120px;border-radius:12px;background:var(--blue);padding:8px}
.credits{font-size:.85rem;opacity:.85}

/* phone call bar: always one tap from a call */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(251,247,239,.97);border-top:1px solid #E4DCC8}
.callbar .btn{padding:.5em .6em}

/* DESK (wide, normal zoom) and ZOOMED DESK share the desk structure */
@media (min-width:900px){
  .nav,.top-cta{display:inline-flex}
  .callbar{display:none}
  .foot{padding-bottom:40px}
  .brand img{width:280px}
  .arch img{aspect-ratio:4/3.6}
  .hero{padding:56px 0 64px}
  .hero-in{grid-template-columns:1.05fr .95fr;align-items:center;gap:56px}
  .arch{order:0}
  h1{font-size:3.3rem}
  h2{font-size:2.5rem}
  .strip-in{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(4,1fr)}
  .trust{grid-template-columns:repeat(3,1fr)}
  .about{grid-template-columns:.8fr 1.2fr;gap:56px}
  .contact{grid-template-columns:.9fr 1.1fr;align-items:start;gap:56px}
  .foot-in{grid-template-columns:auto 1fr}
}
@media (min-width:900px) and (max-width:1199px){ .cards{grid-template-columns:repeat(2,1fr)} }

/* ZOOMED desk: same structure, bigger type and targets, nothing pinned, nothing clipped */
html.zoomed{--fs:20px;--tap:52px}
html.zoomed .nav,html.zoomed .top-cta{display:inline-flex}
html.zoomed .callbar{display:none}
html.zoomed .foot{padding-bottom:40px}
html.zoomed .top-in{flex-wrap:wrap}
html.zoomed .nav{margin-left:0;order:3;width:100%;flex-wrap:wrap}
html.zoomed .top-cta{margin-left:auto}
html.zoomed .cards{grid-template-columns:repeat(2,1fr)}
html.zoomed h1{font-size:2.8rem}
@media (max-width:899px){
  html.zoomed .hero-in{grid-template-columns:1fr 1fr;align-items:center;gap:32px}
  html.zoomed .arch{order:0}
  html.zoomed .trust{grid-template-columns:repeat(3,1fr)}
  html.zoomed .about,html.zoomed .contact{grid-template-columns:1fr 1fr;gap:32px;align-items:start}
  html.zoomed .strip-in{grid-template-columns:repeat(3,1fr)}
  html.zoomed h1{font-size:2.3rem}
}
@media (max-width:799px){ html.zoomed .trust,html.zoomed .strip-in{grid-template-columns:1fr} html.zoomed .cards{grid-template-columns:1fr 1fr} }
/* a phone held sideways or a small tablet that is NOT a zoomed desk keeps the call bar */
html.phone .callbar{display:grid}
html.phone .nav,html.phone .top-cta{display:none}

/* gentle motion, and none for those who asked for none */
@media (prefers-reduced-motion:no-preference){
  .hero .spark{animation:twinkle 3.2s ease-in-out infinite}
  @keyframes twinkle{0%,100%{opacity:1}50%{opacity:.45}}
  @supports (animation-timeline:view()){
    .card,.t-item{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
    @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  }
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* r3: pricing steps, the testimonial, the quote form's rows */
.big{font:600 1.7rem/1.25 "Cormorant",Georgia,serif;color:var(--navy)}
.steps{margin:0 0 22px;padding-left:1.4em;display:grid;gap:10px;max-width:62ch}
.steps li::marker{color:var(--green-d);font-weight:700}
.quote{margin:22px 0 0;background:var(--blue);border-radius:var(--r);padding:26px 24px;max-width:780px}
.quote blockquote{margin:0;font-size:1.08rem}
.quote blockquote p:last-child{margin-bottom:0}
.quote figcaption{margin-top:14px;font-weight:700;color:#DDE6FA}
.quote figcaption::before{content:"";display:inline-block;width:.8em;height:.8em;margin-right:.5em;background:var(--green);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.more{margin-top:18px;opacity:.9}
.direct{display:flex;flex-wrap:wrap;gap:12px}
.two,.four{display:grid;gap:14px}
.four{grid-template-columns:1fr 1fr}
.hint{margin:-6px 0 0;font-size:.92rem;color:var(--muted)}
.form select{font:400 1rem/1.4 "Atkinson",sans-serif;min-height:var(--tap);padding:8px 10px;border:2px solid #C9C2B0;border-radius:10px;background:var(--paper);color:var(--ink);width:100%}
.form input[type=file]{min-height:var(--tap);padding:8px;font-size:.95rem}
.form button:disabled{opacity:.6}
.form-msg a{color:#A3261B}
.foot a{color:#fff}
@media (min-width:560px){ .two{grid-template-columns:1fr 1fr} .four{grid-template-columns:repeat(4,1fr)} }
html.zoomed .four{grid-template-columns:1fr 1fr}

/* the Text button (his 16:17 Oct 23 word, the David Locksmith way): a phone opens a text draft; a desk shows a QR code that opens the draft on the phone */
.textqr{display:flex;gap:14px;align-items:center;margin:14px 0 4px;padding:12px;border:1px solid var(--blue);border-radius:12px;background:#fff;max-width:440px}
.textqr[hidden]{display:none}
.textqr img{flex:none;width:148px;height:148px;border-radius:6px}
.textqr p{margin:0;font-size:15px;line-height:1.5}