/* A&F Cleanwork LLC - Optimized Styles */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:95px}
body{margin:0;background:#fffdfd;color:#272431;font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto;object-fit:cover}
.wrap{width:min(1160px,calc(100% - 48px));margin:auto}

/* Typography */
.eyebrow{color:#5a50bb;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.eyebrow.dark{color:#625f71}
.eyebrow>span{display:inline-block;width:19px;height:2px;margin:0 8px 3px 0;background:#ed9cb8}
h1,h2,h3{font-family:'DM Sans',sans-serif;font-weight:600}
h1{font-size:clamp(48px,8vw,72px);line-height:1.1}
h2{font-size:clamp(32px,6vw,48px);line-height:1.2}
h3{font-size:clamp(18px,3vw,24px);line-height:1.3}
i{font-family:'Playfair Display',serif;font-style:italic}

/* Header & Navigation */
.topbar{background:#dff4f8;color:#334b6f;font-size:8px;font-weight:800;letter-spacing:.12em}
.topbar .wrap{min-height:32px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.topbar span:last-child{font-size:7px}
header{position:sticky;top:0;z-index:20;background:rgba(255,253,253,0.95);backdrop-filter:blur(12px);border-bottom:1px solid #e8e6f2}
.nav{min-height:83px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:11px;line-height:1}
.brandmark{position:relative;display:grid;place-items:center;width:48px;height:48px;border:1.5px solid #78c9df;border-radius:50%;color:#4436b7;font-family:'Playfair Display',serif;font-weight:600;font-size:19px;letter-spacing:-.08em}
.brandmark span{color:#ed9cb8}
.brandmark small{position:absolute;top:1px;right:3px;font-size:10px;font-family:sans-serif;color:#ed9cb8}
.brandname b,.brandname small{display:block}
.brandname b{font-size:15px;letter-spacing:.13em}
.brandname small{margin-top:5px;color:#7e7c91;font-size:8px;letter-spacing:.13em}
.nav nav{display:flex;align-items:center;gap:26px;font-size:10px;font-weight:700}
.nav nav>a:not(.navbutton){color:#625f71}
.navbutton{padding:12px 15px;background:#4539b8;color:#fff}
.menu{display:none;border:0;background:none;color:#4539b8;font-size:24px;cursor:pointer}

/* Hero Section */
.hero{padding:73px 0 0;background:radial-gradient(ellipse at 90% 12%,#dff4f8 0,transparent 37%),#f9f7ff;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:65px}
.hero-copy{}
.hero-copy h1{font-size:clamp(42px,7vw,62px)}
.lead{font-size:16px;color:#5a50bb;max-width:500px;margin:1rem 0}
.buttons{display:flex;gap:12px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:6px;font-weight:700;font-size:14px;cursor:pointer;transition:all .2s}
.button.primary{background:#4539b8;color:#fff;border:none}
.button.secondary{background:#fff;border:1px solid #e8e6f2;color:#625f71}
.button.light-outline{background:transparent;border:1px solid #e8e6f2;color:#625f71}
.image-frame{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.08)}
.round-stamp{position:absolute;bottom:-40px;right:-40px;width:140px;height:140px;border-radius:50%;border:2px solid #dff4f8;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 20px 40px rgba(0,0,0,.1);font-family:'Playfair Display',serif;font-size:24px;color:#ed9cb8}
.round-stamp b{font-size:16px;line-height:1;letter-spacing:-.05em}
.round-stamp small{font-size:10px;color:#625f71}
.offer-card{position:absolute;bottom:-90px;left:0;width:220px;background:#fff;padding:20px;border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,.12);border-top:3px solid #ed9cb8}
.offer-card small{font-size:9px;color:#625f71;letter-spacing:.1em}
.offer-card b{display:block;font-size:14px;margin-top:6px}
.offer-card p{font-size:14px;font-family:'Playfair Display',serif;margin-top:4px;color:#272431}
.offer-card span{font-size:9px;color:#ed9cb8;letter-spacing:.1em;margin-top:8px;display:block}

/* Trust Strip */
.trust-strip{display:flex;justify-content:center;gap:24px;padding:24px 0;background:#fff;border-top:1px solid #e8e6f2;flex-wrap:wrap}
.trust-strip span{font-size:10px;color:#625f71;letter-spacing:.1em}
.trust-strip i{min-width:12px}

/* Intro Section */
.intro,.section{padding:96px 0}
.intro-grid{display:flex;align-items:center;gap:56px;flex-wrap:wrap}
.mini-emblem{font-family:'Playfair Display',serif;font-size:28px;color:#4539b8}
.section-head{max-width:600px}
.section-head h2{font-size:clamp(28px,5vw,42px)}
.section-head p{color:#625f71;margin-top:8px}

/* Services */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.service-card{display:flex;flex-direction:column}
.service-image{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:4/3;background:#e8e6f2}
.service-image span{position:absolute;top:12px;left:12px;width:32px;height:32px;background:#4539b8;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;border-radius:8px;z-index:2}
.service-copy{padding:20px;flex:1;display:flex;flex-direction:column}
.service-copy small{font-size:9px;color:#ed9cb8;letter-spacing:.1em;text-transform:uppercase}
.service-copy h3{font-size:18px;margin-top:8px}
.service-copy p{color:#625f71;font-size:14px;margin-top:10px;line-height:1.6}
.service-copy a{color:#4539b8;font-weight:700;display:inline-block;margin-top:auto}
.service-note{font-size:11px;color:#7e7c91;text-align:center;margin-top:32px}

/* Story Section */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.story-visual{position:relative;border-radius:16px;overflow:hidden}
.story-label{position:absolute;bottom:0;left:0;right:0;padding:32px;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);color:#fff}
.story-label small{font-size:10px;letter-spacing:.1em}
.story-label b{font-size:20px;line-height:1.2;font-family:'Playfair Display',serif}
.story-copy{max-width:560px}
.values{display:flex;gap:24px;margin-top:32px;flex-wrap:wrap}
.values>div{flex:1;min-width:150px}
.values>div span{display:block;font-size:24px;font-family:'Playfair Display',serif;color:#4539b8;line-height:1}
.values>div p{font-size:15px;color:#272431;margin-top:6px}
.values>div small{font-size:12px;color:#7e7c91;margin-top:4px}

/* How It Works */
.how .center{max-width:680px;margin:0 auto;text-align:center}
.how .steps{display:grid;grid-template-columns:repeat(3,1fr);}
.step-item{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.step-icon{width:48px;height:48px;background:#f9f7ff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#4539b8;font-weight:700}
.step-item h3{font-size:18px}
.step-item p{color:#625f71;font-size:14px}
.connector{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#ed9cb8;border-radius:50%;font-size:10px;color:#fff}

/* Quote Section */
.quote-section{background:#f9f7ff}
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.info-card{display:flex;gap:16px;margin-top:24px;align-items:flex-start}
.info-card span{font-size:24px;flex-shrink:0}
.info-card div small{font-size:10px;color:#ed9cb8;letter-spacing:.1em;text-transform:uppercase}
.info-card div b{display:block;font-size:16px;color:#272431;margin-top:4px}
.info-card div p{font-size:13px;color:#625f71;margin-top:6px}
.handwritten{font-family:'Playfair Display',serif;font-size:24px;color:#4539b8;margin-top:28px}
.handwritten i{color:#ed9cb8}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:24px 0}
label{display:block;font-size:14px;color:#272431;font-weight:600;margin-bottom:8px}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid #e8e6f2;border-radius:6px;background:#fff;color:#272431;font-family:inherit;font-size:14px}
input:focus,select:focus,textarea:focus{outline:none;border-color:#4539b8}
.submit{margin-top:8px}
.form-help{font-size:11px;color:#7e7c91;display:block;margin-top:12px}
.status{font-size:13px;color:#4539b8;margin-top:12px;min-height:24px}
.hidden{display:none}

/* Footer */
footer{padding:64px 0 40px;border-top:1px solid #e8e6f2}
.footer-main{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
.footer-main>p{color:#625f71;font-size:13px;margin-top:12px}
.footer-bottom{margin-top:32px;display:flex;justify-content:space-between;font-size:11px;color:#7e7c91;flex-wrap:wrap;gap:16px}

/* Mobile */
@media(max-width:950px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .image-frame img{height:380px}
  .story-grid{grid-template-columns:1fr;gap:45px}
  .quote-grid{grid-template-columns:1fr;gap:35px}
  .nav nav{gap:14px}
  .intro-grid{gap:18px}
  .hero-grid{gap:35px}
}
@media(max-width:740px){
  .wrap{width:min(100% - 34px,560px)}
  .nav{min-height:72px}
  .menu{display:block}
  nav{position:absolute;top:71px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:12px 20px 18px;background:#fff;border-bottom:1px solid #e8e6f2}
  nav.open{display:flex}
  nav a{padding:12px 8px}
  .navbutton{margin-top:5px}
  .hero{padding-top:48px}
  .hero-grid{grid-template-columns:1fr;gap:40px;padding-bottom:43px}
  .hero h1{font-size:clamp(40px,10vw,54px)}
  .hero-art{margin-left:0}
  .image-frame img{height:320px}
  .offer-card{position:relative;bottom:0;left:0;width:100%;margin-top:32px}
  .round-stamp{width:96px;height:96px;font-size:18px}
  .round-stamp b{font-size:14px}
  .trust-strip{font-size:7px;gap:8px}
  .intro,.section{padding:65px 0}
  .intro-grid{gap:15px}
  .section-head{align-items:flex-start;flex-direction:column;gap:12px}
  .service-grid{grid-template-columns:1fr}
  .service-image img{height:225px}
  .story-grid,.quote-grid{grid-template-columns:1fr;gap:36px}
  .story-visual img{height:360px}
  .values{gap:16px}
  .steps{gap:20px}
  .step-item{width:100%}
  .connector{margin:-6px 0}
  .footer-main{align-items:flex-start;flex-direction:column;gap:12px}
  .footer-bottom{flex-direction:column;gap:6px}
}
@media(max-width:420px){
  .wrap{width:calc(100% - 28px)}
  .brandmark{width:42px;height:42px}
  .brandname b{font-size:13px}
  .hero h1{font-size:42px}
  .buttons{align-items:stretch;flex-direction:column}
  .offer-card{width:100%}
  .form-grid{grid-template-columns:1fr}
  form{padding:22px 17px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}