@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Raleway:wght@200;300;400;500&display=swap');

:root {
  color-scheme: light;
  --terra: #9d6857;
  --terra-deep: #764c40;
  --blush: #f4e5e1;
  --ink: #453a36;
  --cream: #f8f5f1;
  --display: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Montserrat', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--body); }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.hero { min-height: 790px; display: grid; grid-template-columns: 44% 56%; background: var(--terra); color: #fff; overflow: hidden; position: relative; }
.hero__content { position: relative; z-index: 2; padding: 52px clamp(32px, 7.2vw, 120px) 76px max(38px, calc((100vw - 1380px) / 2)); display: flex; flex-direction: column; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; }
.brand { display: flex; flex-direction: column; text-decoration: none; min-width: max-content; }
.brand img { display: block; width: clamp(165px, 16vw, 230px); height: auto; }
.site-header nav { display: flex; gap: 25px; }
.site-header nav a { text-decoration: none; font-size: 11px; }
.site-header nav a:hover, .site-header nav a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.hero__copy { margin-top: auto; max-width: 610px; padding-top: 90px; }
.hero h1 { font: 200 clamp(75px, 8.2vw, 142px)/.86 var(--display); letter-spacing: -.045em; margin: 0 0 38px; white-space: nowrap; }
.hero__subhead { max-width: 420px; font: 400 clamp(22px, 2.25vw, 34px)/1.24 var(--body); letter-spacing: .2em; margin: 0 0 34px; }
.hero__description { font-size: 15px; line-height: 1.7; letter-spacing: .04em; max-width: 370px; margin: 0 0 46px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 50px; border-radius: 100px; padding: 12px 28px; font: 500 14px/1.3 var(--body); text-align: center; text-decoration: none; letter-spacing: .025em; transition: transform .2s ease, background-color .2s ease; }
.button[href]:hover { transform: translateY(-2px); }
.button[href]:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.button[aria-disabled="true"] { cursor: not-allowed; }
.button--light { background: #fff; color: #3f302c; }
.button--terra { background: var(--terra); color: #fff; }
.hero__media { min-height: 790px; position: relative; overflow: hidden; }
.hero__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 26%; }
.hero__portrait { position: absolute; z-index: 3; left: 37.5%; top: 51%; width: clamp(130px, 12.4vw, 220px); aspect-ratio: 238 / 448; border-radius: 999px; overflow: hidden; }
.hero__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.intro { background: var(--blush); text-align: center; padding: 120px 24px 140px; }
.intro__inner { max-width: 900px; margin: auto; }
.intro h2 { color: var(--terra); font: 300 clamp(42px, 5.3vw, 82px)/1.05 var(--display); letter-spacing: -.025em; margin: 0 auto 48px; max-width: 900px; }
.intro p { max-width: 760px; margin: 0 auto 40px; font: 400 17px/1.8 var(--body); letter-spacing: .025em; }

.care { padding: 0 24px 125px; }
.care__image { width: min(1260px, 100%); height: clamp(430px, 48vw, 680px); margin: -75px auto 90px; border-radius: 110px; position: relative; overflow: hidden; }
.care__image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.care__columns { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.care h2 { color: var(--terra); font: 300 clamp(32px, 3.2vw, 52px)/1.22 var(--display); letter-spacing: -.02em; margin: 0; }
.care h2 strong { font-weight: 500; }
.care__details { padding: 18px 0 18px 58px; border-left: 2px solid var(--terra); font-size: 15px; line-height: 1.8; letter-spacing: .025em; }
.care__details p { margin: 0 0 20px; }
.care ul, .journey ul { list-style: none; padding: 0; margin: 0; }
.care li::before, .journey li::before { content: '– '; }
.care__closing { max-width: 780px; margin: 90px auto 0; text-align: center; font: 300 clamp(27px, 3vw, 42px)/1.28 var(--display); }

.journey { background: var(--terra); color: #fff; padding: 100px 24px 120px; }
.journey__inner { max-width: 1120px; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 80px; margin: auto; }
.journey__photo { width: 100%; height: 600px; border-radius: 180px 180px 130px 130px; border: 1px solid rgba(255,255,255,.65); overflow: hidden; }
.journey__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
.journey h2 { font: 300 clamp(42px, 4.8vw, 70px)/1.02 var(--display); letter-spacing: -.03em; margin: 0 0 28px; }
.journey__lead { font-size: 23px; font-weight: 300; margin: 0 0 20px; }
.journey__copy > p:not(.journey__lead), .journey li { font-size: 15px; line-height: 1.65; letter-spacing: .015em; }
.journey__copy > p:not(.journey__lead) { margin: 0 0 18px; max-width: 620px; }
.journey ul { margin-bottom: 30px; }

.about { padding: 100px 24px 0; overflow: hidden; }
.about__inner { max-width: 1160px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 45px; align-items: stretch; }
.about__copy { padding: 20px 0 110px; position: relative; z-index: 2; }
.about h2 { color: var(--terra); max-width: 570px; font: 300 clamp(47px, 5.1vw, 78px)/1.02 var(--display); letter-spacing: -.035em; margin: 0 0 38px; }
.about__copy > p { max-width: 500px; font-size: 15px; line-height: 1.8; letter-spacing: .02em; margin: 0 0 50px; }
.about__credentials { background: var(--terra); color: #fff; padding: 32px 36px; border-radius: 40px; width: min(740px, calc(100% + 130px)); }
.about__credentials p { font-size: 12px; font-weight: 600; letter-spacing: .04em; margin: 0 0 14px; }
.about__credentials ul { list-style: none; padding: 0; margin: 0; }
.about__credentials li { font-size: 14px; line-height: 1.8; letter-spacing: .02em; }
.about__credentials li::before { content: '– '; }
.about__photo { min-height: 790px; position: relative; overflow: hidden; border-radius: 250px 250px 0 0; background: var(--blush); }
.about__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }

.final-cta { background: var(--blush); padding: 110px 24px 0; }
.final-cta__inner { max-width: 1400px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; background: #b5a49b; min-height: 640px; }
.final-cta__photo { min-height: 640px; overflow: hidden; }
.final-cta__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.final-cta__copy { padding: clamp(60px, 7vw, 130px) clamp(36px, 6vw, 100px); color: #fff; }
.final-cta h2 { color: var(--terra-deep); font: 300 clamp(44px, 5vw, 76px)/1.04 var(--display); letter-spacing: -.035em; margin: 0 0 32px; }
.final-cta p { max-width: 490px; font-size: 16px; line-height: 1.7; letter-spacing: .03em; margin: 0 0 40px; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 42px max(24px, calc((100vw - 1200px) / 2)); background: var(--terra); color: #fff; font-size: 12px; }
.site-footer__brand { display: block; width: 190px; height: auto; }

@media (max-width: 980px) {
  .hero { min-height: unset; grid-template-columns: 1fr; }
  .hero__content { padding: 26px 6vw 62px; min-height: 630px; }
  .site-header { width: 100%; }
  .hero__copy { padding-top: 100px; }
  .hero h1 { font-size: clamp(72px, 13vw, 125px); }
  .hero__media { min-height: 520px; }
  .hero__portrait { display: none; }
  .care__columns, .journey__inner, .about__inner, .final-cta__inner { grid-template-columns: 1fr; }
  .journey__inner { max-width: 720px; }
  .journey__photo { height: 540px; }
  .about__inner { max-width: 720px; }
  .about__copy { padding-bottom: 0; }
  .about__credentials { width: 100%; }
  .about__photo { min-height: 620px; }
  .final-cta__photo { min-height: 500px; }
  .final-cta__copy { padding: 60px 7vw 90px; }
}

@media (max-width: 600px) {
  .hero__content { min-height: 600px; padding: 24px 6vw 50px; }
  .site-header { align-items: flex-start; }
  .brand img { width: clamp(148px, 43vw, 178px); }
  .site-header nav { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
  .site-header nav a { font-size: 10px; }
  .hero__copy { padding-top: 80px; }
  .hero h1 { font-size: clamp(60px, 15vw, 86px); white-space: normal; margin-bottom: 27px; }
  .hero__subhead { font-size: 21px; letter-spacing: .12em; margin-bottom: 24px; }
  .hero__description { font-size: 14px; margin-bottom: 30px; }
  .hero__media { min-height: 390px; }
  .intro { padding: 78px 24px 90px; }
  .intro h2 { font-size: clamp(42px, 10vw, 58px); margin-bottom: 28px; }
  .intro p { font-size: 15px; line-height: 1.75; }
  .care { padding: 0 20px 85px; }
  .care__image { height: 350px; margin: -30px auto 55px; border-radius: 60px; }
  .care__columns { gap: 30px; }
  .care h2 { font-size: 35px; }
  .care__details { padding: 0 0 0 23px; font-size: 14px; }
  .care__closing { margin-top: 55px; font-size: 31px; }
  .journey { padding: 72px 20px 85px; }
  .journey__inner { gap: 45px; }
  .journey__photo { height: 420px; border-radius: 120px 120px 80px 80px; }
  .journey h2 { font-size: 43px; }
  .journey__lead { font-size: 20px; }
  .about { padding: 70px 20px 0; }
  .about h2 { font-size: 47px; }
  .about__copy > p { font-size: 14px; margin-bottom: 32px; }
  .about__credentials { padding: 25px 24px; border-radius: 28px; }
  .about__credentials li { font-size: 13px; }
  .about__photo { min-height: 440px; margin-top: 42px; border-radius: 140px 140px 0 0; }
  .final-cta { padding: 70px 20px 0; }
  .final-cta__photo { min-height: 380px; }
  .final-cta__copy { padding: 50px 28px 70px; }
  .final-cta h2 { font-size: 46px; }
  .final-cta p { font-size: 14px; }
  .site-footer { flex-direction: column; align-items: flex-start; padding: 34px 24px; line-height: 1.6; }
}