*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#234f4c;
  --soft:#78988b;
  --cream:#f5f3ea;
  --sage:#b8cbb9;
}
html,body{min-height:100%;scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:"DM Sans",sans-serif;
  color:var(--ink);
  background:var(--cream);
}
.page{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  background:linear-gradient(90deg,#f5f3ea 0%,#f5f3ea 47%,rgba(245,243,234,.18) 75%,rgba(245,243,234,0) 100%);
}
.visual{
  position:absolute;
  inset:0 0 0 43%;
  background:
    linear-gradient(90deg,rgba(245,243,234,1) 0%,rgba(245,243,234,.62) 15%,rgba(245,243,234,0) 45%),
    url("assets/mind-healing.jpg") center center/cover no-repeat;
}
.content{
  position:relative;
  z-index:2;
  width:58%;
  min-height:100vh;
  padding:5vh 0 9vh 8.5vw;
  display:flex;
  flex-direction:column;
}
.brand{display:flex;align-items:center}
.logo{
  width:min(390px,34vw);
  height:auto;
  display:block;
  object-fit:contain;
  object-position:left center;
  mix-blend-mode:multiply;
}
.hero{margin-top:12vh;max-width:720px}
.eyebrow{font-size:15px;letter-spacing:7px;margin-bottom:20px}
h1{
  font-family:"Playfair Display",serif;
  font-size:clamp(58px,6.5vw,96px);
  line-height:.95;
  font-weight:500;
  letter-spacing:-2px;
}
h2{
  margin-top:26px;
  font-size:clamp(27px,3vw,43px);
  line-height:1.15;
  font-weight:400;
  color:var(--soft);
}
h2 span{color:var(--ink)}
.intro{
  max-width:540px;
  margin-top:30px;
  font-size:17px;
  line-height:1.9;
  color:#315b58;
}
.progress-wrap{
  display:flex;
  align-items:center;
  gap:18px;
  max-width:470px;
  margin-top:38px;
}
.progress{
  height:10px;
  flex:1;
  border-radius:30px;
  background:rgba(169,189,174,.28);
  overflow:hidden;
}
.progress span{
  display:block;
  width:0;
  height:100%;
  background:#78998a;
  border-radius:30px;
  transition:width 1.4s ease;
}
.progress-wrap strong{font-size:14px;font-weight:500}
.connect{margin-top:56px}
.connect p{font-size:14px;letter-spacing:2px;margin-bottom:14px}
.socials{display:flex;gap:12px}
.socials a{
  width:36px;height:36px;border-radius:50%;
  background:#52766e;color:#fff;
  display:grid;place-items:center;
  text-decoration:none;font-weight:600;font-size:16px;
  transition:transform .2s ease,background .2s ease;
}
.socials a:hover{transform:translateY(-3px);background:#315b58}
.location{
  display:flex;gap:13px;align-items:flex-start;
  margin-top:70px;font-size:14px
}
.pin{font-size:13px;margin-top:4px}
.location strong,.location small{display:block}
.location small{margin-top:7px;color:#55706d}
.quote{
  position:absolute;right:6vw;top:7vh;z-index:3;
  text-align:right;font-size:18px;line-height:1.45;color:#55746d
}
.quote span{display:block}
.quote:after{
  content:"";display:block;width:52px;height:1px;
  background:#90a89b;margin:14px 0 0 auto
}
.wave{
  position:absolute;z-index:4;left:-5%;right:-5%;bottom:-85px;height:160px;
  background:var(--sage);
  border-radius:50% 50% 0 0/35% 35% 0 0
}
@media(max-width:900px){
  .page{display:block;background:#f5f3ea}
  .visual{
    position:relative;inset:auto;height:46vh;
    background:
      linear-gradient(180deg,rgba(245,243,234,0) 55%,#f5f3ea 100%),
      url("assets/mind-healing.jpg") center/cover no-repeat
  }
  .content{width:100%;min-height:auto;padding:30px 8vw 100px}
  .brand{position:absolute;top:25px;left:8vw;right:8vw}
  .logo{width:min(300px,60vw);max-height:100px;object-fit:contain;object-position:left center}
  .hero{margin-top:-3vh}
  .quote{top:25px;right:8vw;font-size:13px}
  h1{font-size:clamp(50px,13vw,75px)}
  .desktop-break{display:none}
  .intro{font-size:15px;line-height:1.75}
  .connect{margin-top:42px}
  .location{margin-top:45px}
}
@media(max-width:520px){
  .visual{height:38vh}
  .logo{width:62vw;max-height:80px}
  .quote{display:none}
  .hero{margin-top:-1vh}
  .eyebrow{font-size:11px;letter-spacing:4px}
  h1{font-size:52px}
  h2{font-size:26px;margin-top:20px}
  .progress-wrap{margin-top:30px}
}