:root{
  --cream:#fffaf6;
  --white:#ffffff;
  --navy:#14253b;
  --text:#243247;
  --muted:#657080;
  --pink:#f58fbb;
  --pink-light:#fbd8e7;
  --blue:#cfe8fb;
  --blue-strong:#9fd0f4;
  --line:#e9e4df;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"DM Sans",sans-serif;
  color:var(--text);
  background:var(--cream);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.shell{width:min(1400px,92%);margin:0 auto}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,250,246,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(20,37,59,.06);
}
.nav-wrap{
  min-height:94px;
  display:flex;
  align-items:center;
  gap:30px;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:290px;
}
.brand-mark{
  width:54px;height:54px;
  border:2px solid var(--navy);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:"Playfair Display",serif;
  font-style:italic;
  font-size:30px;
}
.brand-copy{display:flex;flex-direction:column;line-height:1.05}
.brand-copy strong{font-size:20px;letter-spacing:3px}
.brand-copy span{font-size:10px;letter-spacing:2.4px;margin-top:6px}

.nav-links{
  flex:1;
  display:flex;
  justify-content:center;
  gap:34px;
  font-weight:600;
  font-size:14px;
}
.nav-links a{position:relative}
.nav-links a:after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:-8px;
  height:2px;background:var(--pink);
  transition:.25s;
}
.nav-links a:hover:after{right:0}

.top-cta,.button{
  border-radius:999px;
  font-weight:700;
  transition:.2s ease;
}
.top-cta{
  background:var(--pink);
  color:white;
  padding:14px 24px;
  white-space:nowrap;
}
.top-cta span{margin-left:12px}
.top-cta:hover,.button:hover{transform:translateY(-2px)}
.menu-button{display:none;border:0;background:none;font-size:27px;color:var(--navy)}

.hero{
  overflow:hidden;
  padding:70px 0 40px;
}
.hero-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:45px;
  align-items:center;
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:15px;
  width:max-content;
  padding-bottom:8px;
  border-bottom:2px solid var(--blue-strong);
  font-size:12px;
  font-weight:700;
  letter-spacing:2.6px;
}
.eyebrow i{color:var(--pink);font-style:normal;font-size:18px}

h1,h2{
  font-family:"Playfair Display",serif;
  color:var(--navy);
}
h1{
  font-size:clamp(58px,6vw,92px);
  line-height:.92;
  letter-spacing:-3px;
  margin:36px 0 24px;
}
h1 em{color:var(--pink);font-weight:600}
.hero-text{
  max-width:610px;
  font-size:19px;
  color:#344459;
}
.hero-actions{
  display:flex;
  align-items:center;
  gap:44px;
  margin:30px 0;
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 27px;
}
.button-pink{background:var(--pink);color:white}
.button-blue{background:var(--blue);color:var(--navy)}
.button span{margin-left:16px}
.text-link{
  font-weight:700;
  padding-bottom:7px;
  border-bottom:2px solid var(--blue-strong);
}
.text-link span{margin-left:14px}

.care-note{display:flex;align-items:center;gap:16px;margin-top:36px}
.care-icons{display:flex}
.care-icons span{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  margin-right:-4px;
}
.care-icons .blue{background:var(--blue)}
.care-icons .pink{background:var(--pink);color:white}
.care-icons .light-pink{background:var(--pink-light)}
.care-note strong,.care-note small{display:block}
.care-note small{color:var(--muted);margin-top:2px}

.hero-art{
  position:relative;
  min-height:650px;
  display:grid;
  place-items:center;
}
.hero-art img{
  width:min(850px,100%);
  position:relative;
  z-index:3;
  border-radius:32px;
  mix-blend-mode:multiply;
}
.blue-blob{
  position:absolute;
  z-index:1;
  width:72%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--blue);
  top:2%;left:13%;
}
.pink-blob{
  position:absolute;
  z-index:2;
  width:42%;
  height:30%;
  right:1%;bottom:10%;
  border-radius:50%;
  background:var(--pink-light);
  transform:rotate(10deg);
}
.clean-badge{
  position:absolute;
  z-index:5;
  left:4%;bottom:7%;
  display:flex;align-items:center;gap:15px;
  background:white;
  padding:16px 22px;
  border-radius:13px;
  box-shadow:0 16px 40px rgba(31,48,67,.12);
}
.clean-badge>span{
  width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--pink);color:white;font-size:24px;
}
.clean-badge strong{
  display:block;font-family:"Playfair Display",serif;
  font-style:italic;font-size:20px;
}
.clean-badge small{display:block;color:var(--muted)}
.vertical-copy{
  position:absolute;
  z-index:4;
  right:-18px;
  top:30%;
  writing-mode:vertical-rl;
  font-size:11px;
  font-weight:700;
  letter-spacing:3px;
}

.section{padding:90px 0}
.services{background:white}
.section-heading span,.mini-label{
  color:var(--pink);
  font-weight:700;
  font-size:12px;
  letter-spacing:2.2px;
}
.section-heading h2{
  font-size:clamp(38px,4vw,58px);
  line-height:1;
  margin-top:6px;
}
.service-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
  margin-top:38px;
}
.service-card{
  min-height:230px;
  padding:28px 20px;
  border:1px solid var(--line);
  border-radius:16px;
  text-align:center;
  background:#fff;
  box-shadow:0 8px 30px rgba(20,37,59,.035);
}
.service-icon{
  width:70px;height:70px;
  margin:0 auto 20px;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:30px;
  color:var(--navy);
}
.service-icon.blue{background:var(--blue)}
.service-icon.pink{background:var(--pink);color:white}
.service-card h3{font-size:16px;margin-bottom:8px;color:var(--navy)}
.service-card p{font-size:14px;color:var(--muted)}
.disclaimer{
  margin-top:26px;
  padding:16px 20px;
  border-radius:12px;
  background:#fff5f9;
  color:#765369;
  font-size:14px;
}

.how{background:#f6fbff}
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.lead{font-size:18px;color:var(--muted);margin-top:22px;max-width:520px}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.step{
  display:flex;gap:16px;
  padding:25px;
  background:white;
  border-radius:16px;
  border:1px solid #e3eef7;
}
.step b{
  min-width:45px;height:45px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--pink-light);color:#b94a7a;
}
.step strong{font-size:17px;color:var(--navy)}
.step p{color:var(--muted);font-size:14px;margin-top:4px}

.about{background:var(--cream)}
.about-card{
  background:linear-gradient(135deg,#fff 30%,#f3faff 100%);
  border:1px solid var(--line);
  border-radius:28px;
  padding:60px;
}
.about-card p{font-size:19px;max-width:820px;color:var(--muted);margin-top:22px}

.gallery{background:white}
.gallery-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;margin-top:35px;
}
.gallery-placeholder{
  min-height:300px;
  display:grid;place-items:center;
  border:2px dashed #cfe0ee;
  border-radius:18px;
  background:#f9fcff;
  color:#8190a2;
  font-weight:600;
}

.contact{background:var(--cream)}
.contact-card{
  padding:55px 60px;
  border-radius:28px;
  background:linear-gradient(120deg,var(--blue),#eff7ff 60%,var(--pink-light));
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
}
.contact-card h2{font-size:52px;margin:5px 0 10px}
.contact-card p{max-width:650px;color:#455469}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap}

footer{background:var(--navy);color:white;padding:36px 0}
.footer-wrap{display:flex;justify-content:space-between;align-items:center;gap:20px}
.footer-wrap div{display:flex;flex-direction:column}
.footer-wrap span,.footer-wrap p{opacity:.72;font-size:13px}

@media(max-width:1100px){
  .nav-links{gap:18px}
  .brand{min-width:auto}
  .service-grid{grid-template-columns:repeat(3,1fr)}
  .hero-grid{grid-template-columns:1fr 1fr}
  .hero-art{min-height:520px}
}

@media(max-width:820px){
  .nav-wrap{min-height:78px}
  .menu-button{display:block;margin-left:auto}
  .nav-links{
    display:none;
    position:absolute;
    left:4%;right:4%;top:78px;
    padding:20px;
    background:white;
    border-radius:16px;
    box-shadow:0 20px 45px rgba(20,37,59,.15);
    flex-direction:column;
    align-items:flex-start;
  }
  .nav-links.open{display:flex}
  .top-cta{display:none}
  .brand-copy strong{font-size:16px}
  .brand-copy span{font-size:8px}
  .brand-mark{width:45px;height:45px;font-size:25px}

  .hero{padding-top:45px}
  .hero-grid{grid-template-columns:1fr}
  h1{font-size:clamp(50px,15vw,75px)}
  .hero-art{min-height:auto;margin-top:10px}
  .hero-actions{gap:24px;flex-wrap:wrap}
  .vertical-copy{display:none}

  .service-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:35px}
  .gallery-grid{grid-template-columns:1fr}
  .contact-card{padding:40px 28px;flex-direction:column;align-items:flex-start}
  .contact-card h2{font-size:42px}
  .footer-wrap{flex-direction:column;align-items:flex-start}
}

@media(max-width:520px){
  .shell{width:min(92%,460px)}
  .hero-text{font-size:16px}
  h1{letter-spacing:-2px}
  .hero-actions{align-items:flex-start;flex-direction:column}
  .care-note{align-items:flex-start}
  .service-grid{grid-template-columns:1fr}
  .service-card{min-height:auto}
  .steps{grid-template-columns:1fr}
  .about-card{padding:35px 24px}
  .gallery-placeholder{min-height:220px}
  .clean-badge{left:1%;bottom:3%;transform:scale(.82);transform-origin:left bottom}
}


/* ---- Improved mobile layout ---- */
@media (max-width: 520px) {
  body { overflow-x: hidden; }

  .site-header .shell { width: calc(100% - 32px); }
  .nav-wrap { min-height: 74px; gap: 10px; }

  .brand { gap: 10px; }
  .brand-mark {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: 23px;
  }
  .brand-copy strong {
    font-size: 14px;
    letter-spacing: 2px;
    white-space: nowrap;
  }
  .brand-copy span {
    font-size: 7px;
    letter-spacing: 1.7px;
    white-space: nowrap;
  }
  .menu-button { font-size: 24px; padding: 6px; }

  .hero {
    padding: 34px 0 45px;
  }
  .hero-grid {
    gap: 24px;
  }
  .eyebrow {
    max-width: 100%;
    font-size: 10px;
    letter-spacing: 2px;
    gap: 10px;
  }

  h1 {
    font-size: clamp(43px, 13vw, 58px);
    line-height: .96;
    letter-spacing: -1.8px;
    margin: 26px 0 20px;
  }

  .hero-text {
    font-size: 16px;
    line-height: 1.65;
  }

  .hero-actions {
    margin: 25px 0 28px;
    gap: 20px;
  }
  .button {
    padding: 14px 22px;
  }
  .button-pink {
    width: auto;
    min-width: 220px;
  }
  .text-link { font-size: 15px; }

  .care-note {
    margin-top: 25px;
    gap: 12px;
  }
  .care-icons span {
    width: 34px;
    height: 34px;
  }
  .care-note strong { font-size: 15px; }
  .care-note small { font-size: 12px; }

  .hero-art {
    width: 100%;
    min-height: 0;
    margin-top: 4px;
    padding-bottom: 14px;
  }
  .hero-art img {
    width: 100%;
    border-radius: 22px;
  }
  .blue-blob, .pink-blob {
    display: none;
  }
  .clean-badge {
    left: 10px;
    bottom: 2px;
    padding: 11px 14px;
    gap: 10px;
    transform: none;
  }
  .clean-badge > span {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
  .clean-badge strong { font-size: 16px; }
  .clean-badge small { font-size: 10px; }

  .section { padding: 58px 0; }
  .section-heading h2 {
    font-size: 42px;
  }

  .service-grid {
    gap: 14px;
    margin-top: 28px;
  }
  .service-card {
    padding: 24px 18px;
  }
  .service-icon {
    width: 60px;
    height: 60px;
    font-size: 26px;
  }

  .contact-card h2 { font-size: 38px; }
}