:root{
  --ivory:#f8f6f2;
  --sage:#6f7c6a;
  --sage-soft:#dbe1de;
  --button:#74846c;
  --button-dark:#64745d;
  --charcoal:#353535;
  --line:#cfd7cf;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--sage);
  font-family:"PT Serif", Georgia, serif;
}

a{
  color:inherit;
  text-decoration:none;
}

.site-header{
  position:relative;
  padding:30px 48px 0;
  background:linear-gradient(
    180deg,
    #fbfaf7 0%,
    #f8f6f2 100%
  );
  min-height:192px;
}

.logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(500px,45vw);
  margin:0 auto 24px;
  color:#5f705a;
  gap:18px;
}

.logo-icon{
  width:96px;
  height:140px;
  object-fit:contain;
  display:block;
}

.logo-wordmark{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.brand-name{
  font-family:"Gilda Display", Georgia, serif;
  font-size:52px;
  line-height:.95;
  letter-spacing:.5px;
}

.brand-subtitle{
  font-family:Arial, sans-serif;
  font-size:12px;
  letter-spacing:6px;
  margin-top:7px;
  white-space:nowrap;
}

/* Logo divider */

.logo-rule{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:320px;
  margin-top:8px;
}

.logo-rule span{
  flex:1;
  height:1px;
  background:linear-gradient(
    to right,
    transparent,
    #5f705a 20%,
    #5f705a 80%,
    transparent
  );
}

.logo-divider-icon{
  width:40px;
  height:auto;
  display:block;
  flex-shrink:0;
}

.socials,
.header-actions{
  position:absolute;
  top:48px;
  display:flex;
  align-items:center;
  gap:24px;
  color:var(--sage);
  font-size:24px;
}

.socials{
  left:48px;
  font-family:Arial, sans-serif;
  font-weight:700;
}

.socials a{
  opacity:.95;
}

.socials a:hover,
.nav a:hover,
.learn:hover{
  opacity:.7;
}

.header-actions{
  right:48px;
  font-size:22px;
}

.cart{
  font-family:Arial, sans-serif;
  display:flex;
  gap:6px;
  align-items:center;
}

.text-link{
  font-size:22px;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--button);
  color:white;
  padding:19px 36px;
  border-radius:5px;
  font-size:20px;
  line-height:1;
  box-shadow:0 10px 24px rgba(53,53,53,.12);
  transition:.2s ease;
}

.button:hover{
  background:var(--button-dark);
  transform:translateY(-1px);
}

.button-small{
  font-size:18px;
  padding:18px 32px;
}

.nav{
  display:flex;
  justify-content:center;
  gap:54px;
  font-size:22px;
  margin-top:8px;
  color:var(--sage);
}

.nav a.active{
  opacity:.65;
  border-bottom:1px solid var(--sage);
  padding-bottom:4px;
}

.nav a.active:hover{
  opacity:.65;
}




.hero{
  position:relative;
  display:grid;
  grid-template-columns:52% 48%;
  min-height:clamp(430px, calc(100vh - 390px), 650px);
  background:
    radial-gradient(
      circle at 47% 55%,
      rgba(219,225,222,.6),
      transparent 22%
    ),
    var(--ivory);
  overflow:hidden;
}

.hero-copy{
  padding:
    clamp(28px, 4vh, 70px)
    24px
    clamp(24px, 3.5vh, 48px)
    62px;

  max-width:900px;
  width:100%;
  text-align:center;
  z-index:2;
}

.eyebrow{
  font-size:28px;
  line-height:1.3;
  margin:0 0 36px;
  white-space:nowrap;
}

.hero h1{
  font-family:"Gilda Display", Georgia, serif;
  font-weight:400;
  font-size:74px;
  line-height:.95;
  margin:0;
  color:#52624f;
}

/* Main hero divider */

.divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  margin:32px auto;
  width:100%;
}

.divider span{
  flex:1;
  max-width:160px;
  height:1px;
  background:linear-gradient(
    to right,
    transparent,
    var(--sage) 20%,
    var(--sage) 80%,
    transparent
  );
}

.divider-icon{
  width:72px;
  height:auto;
  display:block;
  flex-shrink:0;
}

.subheading{
  font-size:29px;
  line-height:1.25;
  color:#52624f;
  font-weight:400;
  margin:0 0 28px;
}

/* About page */

.about-intro{
  max-width:890px;
  margin:0 auto;
  font-size:23px;
  line-height:1.45;
}


.hero-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:44px;
}

.learn{
  font-size:20px;
  text-align:left;
  border-bottom:1px solid var(--sage);
  padding-bottom:7px;
}

.learn span{
  margin-left:12px;
}

.hero-image{
  background-image:
    linear-gradient(
      90deg,
      rgba(248,246,242,.85) 0%,
      rgba(248,246,242,.35) 28%,
      rgba(248,246,242,0) 55%
    ),
    url("assets/hero-mother-baby.png");

  background-size:cover;
  background-position:center right;
  min-height:clamp(430px, calc(100vh - 390px), 650px);
}


.services-hero-image{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:38px 38px 38px 70px;

  background-image:
    linear-gradient(
      rgba(248,246,242,.28),
      rgba(248,246,242,.28)
    ),
    url("assets/hero-mother-baby.png");

  background-size:cover;
  background-position:center right;
}

/* Services page fee overlay Card */

.services-fee-overlay{
  position:relative;
  z-index:2;
  width:min(470px, 90%);
  padding:34px 38px;

  background:rgba(248,246,242,.95);
  border:1px solid rgba(111,124,106,.18);
  border-radius:6px;
  box-shadow:0 12px 30px rgba(53,53,53,.10);

  color:#52624f;

  transform:translate(-45px, 20px);
}


.services-fee-heading{
  margin:0 0 24px;
  text-align:center;
  font-size:18px;
  font-weight:400;
}


.services-fee-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:center;
}


.services-fee-row h2{
  margin:0 0 10px;

  font-family:"Gilda Display", Georgia, serif;
  font-size:27px;
  line-height:1.1;
  font-weight:400;

  color:#52624f;
}


.services-fee-description{
  margin:0;
  max-width:330px;

  font-size:16px;
  line-height:1.4;

  color:#5f665c;
}


.services-fee-price{
  margin:0;

  font-family:"Gilda Display", Georgia, serif;
  font-size:40px;
  line-height:1;

  color:#52624f;
}


.services-fee-rule{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:12px;
  margin:26px 0;
}


.services-fee-rule span{
  flex:1;
  height:1px;

  background:rgba(111,124,106,.35);
}


.services-fee-rule img{
  display:block;
  width:34px;
  height:auto;
  max-width:34px;
  flex:0 0 34px;
}


.services-fee-duration{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.3;
  font-weight:400;
  color:#6f7c6a;
}





.about-hero-image{
  background-image:
    linear-gradient(
      90deg,
      rgba(248,246,242,.85) 0%,
      rgba(248,246,242,.35) 28%,
      rgba(248,246,242,0) 55%
    ),
    url("assets/OliviaDaughter.png");

  background-position:center 5%;
}



/* FAQ page */

.faq-hero-image{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:38px 38px 38px 70px;

  background-image:
    linear-gradient(
      rgba(248,246,242,.28),
      rgba(248,246,242,.28)
    ),
    url("assets/hero-mother-baby.png");

  background-size:cover;
  background-position:center right;
}


.faq-card{
  position:relative;
  z-index:2;
  width:min(500px, 92%);
  padding:30px 36px;

  background:rgba(248,246,242,.95);
  border:1px solid rgba(111,124,106,.18);
  border-radius:6px;

  box-shadow:0 12px 30px rgba(53,53,53,.10);

  color:#52624f;

  transform:translate(-45px, 20px);
}


.faq-card-heading{
  margin:0 0 18px;
  text-align:center;
  font-size:18px;
}


.faq-item{
  border-top:1px solid rgba(111,124,106,.25);
}


.faq-item:first-of-type{
  border-top:0;
}


.faq-item summary{
  position:relative;
  cursor:pointer;

  padding:16px 32px 16px 0;

  font-family:"Gilda Display", Georgia, serif;
  font-size:21px;
  line-height:1.2;

  color:#52624f;

  list-style:none;
}


.faq-item summary::-webkit-details-marker{
  display:none;
}


.faq-item summary::after{
  content:"+";

  position:absolute;
  right:0;
  top:50%;

  transform:translateY(-50%);

  font-family:Arial, sans-serif;
  font-size:24px;
  font-weight:300;

  color:var(--sage);
}


.faq-item[open] summary::after{
  content:"−";
}


.faq-item p{
  margin:0;
  padding:0 18px 16px 0;

  font-size:15px;
  line-height:1.45;

  color:#5f665c;
}


.faq-intro{
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
}










.contact-hero-image{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:38px 38px 38px 70px;

  background-image:
    linear-gradient(
      rgba(248,246,242,.28),
      rgba(248,246,242,.28)
    ),
    url("assets/hero-mother-baby.png");

  background-size:cover;
  background-position:center right;
}


.contact-card{
  position:relative;
  z-index:2;
  width:min(470px, 90%);
  padding:34px 38px;

  background:rgba(248,246,242,.95);
  border:1px solid rgba(111,124,106,.18);
  border-radius:6px;
  box-shadow:0 12px 30px rgba(53,53,53,.10);

  color:#52624f;

  transform:translate(-45px, 20px);
}


.contact-heading{
  margin:0 0 26px;
  text-align:center;
  font-size:18px;
}


.contact-item{
  text-align:left;
}


.contact-label{
  display:block;
  margin-bottom:6px;
  font-size:15px;
  color:var(--sage);
}


.contact-item a,
.contact-item p{
  margin:0;
  font-family:"Gilda Display", Georgia, serif;
  font-size:25px;
  line-height:1.25;
  color:#52624f;
}


.contact-rule{
  height:1px;
  margin:22px 0;
  background:rgba(111,124,106,.28);
}


.email-icon{
  transform:scale(1.25);
  transform-origin:center;
}



.features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  background:linear-gradient(
    180deg,
    #eef2ec 0%,
    #e6ede6 100%
  );
  border-top:1px solid #e0e5df;
  padding:
    clamp(20px, 3vh, 34px)
    64px
    clamp(22px, 3.5vh, 38px);
}

.features article{
  text-align:center;
  padding:0 38px;
  border-left:1px solid rgba(111,124,106,.18);
}

.features article:first-child{
  border-left:0;
}

/* Shared feature icon styling */

.icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  margin:0 auto 12px;
  color:var(--sage);
  font-size:40px;
  line-height:1;
}

.baby-icon{
  width:50px;
  height:50px;
  display:block;
}


/* Inline family SVG */

.family-symbol{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  margin:0 auto 12px;
  color:var(--sage);
  line-height:1;
}

.family-symbol svg{
  display:block;
  width:50px;
  height:50px;
  max-width:none;
  flex-shrink:0;
}

.features h3{
  font-weight:400;
  margin:0 0 8px;
  font-size:20px;
}

.features p{
  margin:0;
  color:#4e4e4e;
  font-size:16px;
  line-height:1.45;
}

@media (max-width:900px){

  .site-header{
    padding:24px 22px 0;
    min-height:auto;
  }

  .logo{
    width:310px;
    margin-bottom:20px;
    gap:12px;
  }

  .logo-icon{
    width:64px;
    height:92px;
  }

  .brand-name{
    font-size:36px;
  }

  .logo-rule{
    width:220px;
    gap:10px;
  }

  .logo-divider-icon{
    width:32px;
  }

  .brand-subtitle{
    font-size:9px;
    letter-spacing:3.5px;
  }

  .socials,
  .header-actions{
    position:static;
    justify-content:center;
    font-size:18px;
    margin:8px 0;
  }

  .header-actions .text-link,
  .header-actions .cart{
    display:none;
  }

  .nav{
    flex-wrap:wrap;
    gap:24px;
    font-size:18px;
    margin-bottom:18px;
  }

  .hero{
    grid-template-columns:1fr;
  }

  .hero-copy{
    padding:52px 24px 36px;
    margin:auto;
  }

  .eyebrow{
    font-size:22px;
    white-space:normal;
  }

  .hero h1{
    font-size:48px;
  }

  .divider{
    gap:18px;
    margin:28px auto;
  }

  .divider span{
    max-width:130px;
  }

  .divider-icon{
    width:64px;
  }

  .subheading{
    font-size:22px;
  }

  .about-intro{
  max-width:650px;
  font-size:19px;
  line-height:1.5;
}


  .hero-actions{
    flex-direction:column;
    gap:18px;
  }

  .hero-image{
    min-height:420px;
    background-position:center;
  }

  .about-hero-image{
  background-position:center 5%;
}

  .features{
    grid-template-columns:1fr 1fr;
    padding:26px 20px;
    gap:24px;
  }

  .features article{
    border-left:0;
    padding:0 12px;
  }

.services-hero-image{
  padding:32px 24px;
  justify-content:center;
}

.services-fee-overlay{
  transform:none;
  width:min(470px, 100%);
}






.faq-hero-image{
  padding:32px 24px;
  justify-content:center;
}

.faq-card{
  transform:none;
  width:min(500px, 100%);
}



.contact-hero-image{
  padding:32px 24px;
  justify-content:center;
}

.contact-card{
  transform:none;
  width:min(470px, 100%);
}



}

@media (max-width:560px){

  .hero h1{
    font-size:42px;
  }

  .features{
    grid-template-columns:1fr;
  }

  .button{
    width:100%;
    max-width:320px;
  }

  .logo-rule{
    width:200px;
    gap:8px;
  }

  .logo-divider-icon{
    width:28px;
  }

  .divider{
    gap:14px;
  }

  .divider span{
    max-width:96px;
  }

  .divider-icon{
    width:56px;
  }

  .nav{
    gap:18px;
  }

  .socials{
    gap:20px;
  }

  .button-small{
    width:auto;
  }
}