:root{
  --cream:#fdf6ec;
  --cream-2:#f7ecdd;
  --blue:#7ba3bd;
  --blue-dk:#5b83a0;
  --blue-soft:#dfeaf1;
  --warm:#a9a29a;
  --char:#33322f;
  --char-soft:#6b6762;
  --white:#ffffff;
  --round:'Nunito',system-ui,sans-serif;
  --body:'Open Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--char);background:var(--cream);line-height:1.75;-webkit-font-smoothing:antialiased;border-radius:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,100% - 3rem);margin-inline:auto}

/* ribbon */
.ribbon{background:var(--blue-soft);color:var(--blue-dk);font-size:.76rem;letter-spacing:.06em}
.rb-in{display:flex;align-items:center;justify-content:center;gap:.9rem;padding:.45rem 0;flex-wrap:wrap}
.rb-dot{width:4px;height:4px;border-radius:50%;background:var(--blue-dk);display:inline-block}

/* header */
.hdr{background:var(--cream);position:sticky;top:0;z-index:60;box-shadow:0 2px 0 rgba(51,50,47,.04);transition:box-shadow .25s}
.hdr.tuck{box-shadow:0 8px 26px rgba(91,131,160,.16)}
.hdr-in{display:flex;align-items:center;gap:1.6rem;padding:1rem 0}
.brand{display:flex;align-items:center;gap:.75rem;margin-right:auto}
.leaf{width:40px;height:40px;border-radius:50% 50% 50% 12px;background:var(--blue);display:grid;place-items:center;flex:none}
.leaf i{width:14px;height:14px;background:var(--cream);border-radius:50%;display:block}
.brand-t{font-family:var(--round);font-weight:800;font-size:1.2rem;line-height:1.05;color:var(--char)}
.brand-t em{display:block;font-style:normal;font-weight:600;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-dk);margin-top:.2rem}
.nav{display:flex;gap:1.8rem;font-size:.92rem;color:var(--char-soft)}
.nav a{padding:.3rem 0;border-radius:999px;transition:color .25s,background .25s}
.nav a:hover,.nav a.on{color:var(--blue-dk);background:var(--blue-soft)}
.outline-call{border:1.5px solid var(--blue);color:var(--blue-dk);padding:.6rem 1.2rem;border-radius:999px;font-weight:600;font-size:.9rem;transition:background .25s,color .25s}
.outline-call:hover{background:var(--blue);color:var(--white)}
.burger{display:none;width:44px;height:40px;background:none;border:1.5px solid var(--blue);border-radius:999px;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer}
.burger span{width:18px;height:2px;background:var(--blue-dk);border-radius:2px;transition:transform .25s,opacity .2s}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* hero */
.hero{position:relative;padding:4.5rem 0 5rem;overflow:hidden}
.blob{position:absolute;border-radius:50%;background:var(--blue-soft);opacity:.7}
.b1{width:280px;height:280px;top:-90px;right:8%}
.b2{width:120px;height:120px;bottom:-40px;left:4%;background:var(--cream-2)}
.b3{width:60px;height:60px;top:22%;left:6%;background:#f0e2d0}
.hero-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.soft-label{display:inline-block;background:var(--blue-soft);color:var(--blue-dk);padding:.4rem 1rem;border-radius:999px;font-size:.78rem;font-weight:600;letter-spacing:.04em}
.hero h1{font-family:var(--round);font-weight:800;font-size:clamp(2rem,4vw,3.2rem);line-height:1.14;margin-top:1.2rem;letter-spacing:-.01em}
.hero-p{margin-top:1.2rem;color:var(--char-soft);max-width:46ch}
.soft-phone{margin-top:1.5rem;font-size:1rem;color:var(--char)}
.soft-phone a{font-weight:700;color:var(--blue-dk);border-bottom:2px solid var(--blue);padding-bottom:1px}
.soft-phone a:hover{color:var(--char);border-color:var(--char)}
.frame{position:relative;border-radius:190px 190px 26px 26px;overflow:hidden;box-shadow:0 22px 46px rgba(91,131,160,.2)}
.frame::after{content:"";position:absolute;inset:14px;border:2px solid rgba(255,255,255,.45);border-radius:180px 180px 18px 18px;pointer-events:none}
.frame img{width:100%;height:520px;object-fit:cover}

/* services */
.services{padding:1rem 0 5rem}
.svc-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.svc{background:var(--white);border-radius:28px;padding:2.4rem 2rem;box-shadow:0 8px 26px rgba(51,50,47,.05);transition:transform .3s,box-shadow .3s}
.svc:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(91,131,160,.16)}
.svc-ico{width:56px;height:56px;border-radius:50% 50% 50% 14px;background:var(--blue-soft);display:grid;place-items:center;color:var(--blue-dk);font-size:1.3rem;margin-bottom:1.4rem}
.svc h2{font-family:var(--round);font-weight:800;font-size:1.4rem;margin-bottom:.6rem}
.svc p{color:var(--char-soft);font-size:.95rem}
.ticks{list-style:none;margin-top:1.2rem;border-top:1px dashed #d8cfc2;padding-top:1rem}
.ticks li{position:relative;padding-left:1.6rem;font-size:.9rem;color:var(--char);margin-bottom:.4rem}
.ticks li::before{content:"";position:absolute;left:0;top:.55rem;width:9px;height:9px;border-radius:50%;background:var(--blue)}

/* about */
.about{padding:4.5rem 0;background:var(--cream-2);border-radius:44px 0 0 44px}
.center{text-align:center;font-family:var(--round);font-weight:800;font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.28;max-width:20ch;margin:0 auto 2.5rem}
.two{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem;max-width:900px;margin-inline:auto}
.two p{color:var(--char-soft);font-size:.98rem}

/* guide */
.guide{padding:5rem 0}
.g-label{display:inline-block;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-dk);margin-bottom:1.2rem}
.comfort{margin-bottom:2.8rem}
.comfort-frame{border-radius:26px;overflow:hidden;box-shadow:0 16px 34px rgba(91,131,160,.16)}
.comfort-frame img{width:100%;height:400px;object-fit:cover}
.comfort figcaption{margin-top:.9rem;font-size:.88rem;color:var(--char-soft);max-width:60ch}
.g-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem;margin-top:2rem}
.g-card{background:var(--white);border-radius:22px;padding:1.6rem 1.3rem;text-align:center;transition:transform .3s,background .3s}
.g-card:hover{transform:translateY(-6px);background:var(--blue-soft)}
.g-card i{font-size:1.4rem;color:var(--blue);margin-bottom:.9rem;display:block}
.g-card h3{font-family:var(--round);font-weight:700;font-size:1.02rem;margin-bottom:.45rem}
.g-card p{font-size:.85rem;color:var(--char-soft);line-height:1.65}

/* routine */
.routine{background:var(--blue-soft);padding:4.5rem 0}
.rt-in{display:grid;grid-template-columns:.95fr 1.05fr;gap:3rem;align-items:center}
.rt-txt h2{font-family:var(--round);font-weight:800;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.24;margin-bottom:.9rem}
.rt-txt p{color:var(--char-soft)}
.rt-list{list-style:none}
.rt-list li{display:flex;align-items:center;gap:.9rem;background:var(--white);border-radius:999px;padding:.85rem 1.3rem;margin-bottom:.6rem;font-size:.94rem;box-shadow:0 4px 12px rgba(51,50,47,.04)}
.rt-list i{color:var(--blue-dk);font-size:.85rem}

/* banner */
.banner{padding:4rem 0}
.banner-in{background:var(--cream-2);border-radius:32px;padding:2.6rem 3rem;display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.banner h2{font-family:var(--round);font-weight:800;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.2}
.banner p{margin-top:.5rem;color:var(--char-soft)}
.big-phone{font-family:var(--round);font-weight:800;font-size:clamp(1.6rem,3vw,2.3rem);color:var(--blue-dk);white-space:nowrap;transition:color .25s}
.big-phone:hover{color:var(--char)}

/* where strip */
.where{padding:3.5rem 0}
.where-in{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.wh{background:var(--white);border-radius:22px;padding:1.8rem 1.6rem;box-shadow:0 6px 18px rgba(51,50,47,.05);transition:transform .3s,box-shadow .3s}
.wh:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(91,131,160,.15)}
.wh h4{font-family:var(--round);font-weight:700;font-size:1.05rem;color:var(--blue-dk);margin-bottom:.6rem}
.wh p{font-size:.94rem;color:var(--char-soft);line-height:1.8}
.wh a{color:var(--char);border-bottom:1px solid var(--blue);transition:color .25s}
.wh a:hover{color:var(--blue-dk)}

/* footer */
.ftr{background:var(--char);color:#b4ada5;font-size:.84rem;padding:2.2rem 0}
.ftr-in{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

[data-reveal],.soft-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
[data-reveal].in,.soft-reveal.in{opacity:1;transform:none}

@media(max-width:1024px){
  .hero-in{grid-template-columns:1fr}
  .hero-pic{order:-1}
  .frame img{height:400px}
  .frame{border-radius:120px 120px 22px 22px}
  .frame::after{border-radius:110px 110px 16px 16px}
  .svc-wrap{grid-template-columns:1fr}
  .g-cards{grid-template-columns:repeat(2,1fr)}
  .comfort-frame img{height:300px}
  .rt-in{grid-template-columns:1fr;gap:2rem}
}
@media(max-width:760px){
  .wrap{width:min(1180px,100% - 2rem)}
  .burger{display:flex}
  .outline-call{display:none}
  .nav{position:absolute;top:100%;left:1rem;right:1rem;background:var(--cream);flex-direction:column;gap:0;border-radius:24px;box-shadow:0 16px 30px rgba(91,131,160,.2);max-height:0;overflow:hidden;transition:max-height .3s ease}
  .nav.open{max-height:300px}
  .nav a{padding:.85rem 1.2rem;border-radius:0;font-size:1rem}
  .two{grid-template-columns:1fr}
  .g-cards{grid-template-columns:1fr}
  .about{border-radius:28px 0 0 28px}
  .banner-in{flex-direction:column;align-items:flex-start;padding:2rem 1.5rem}
  .where-in{grid-template-columns:1fr}
}