/* BirthWise page styles. Text content lives in index.html. */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  --plum:#55304c;
  --dark:#422451;
  --rose:#ce83a2;
  --pale:#faf3f4;
  --sage:#728d76;
  --aqua:#cce5e3
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  color:var(--dark);
  font-family:'DM Sans',sans-serif;
  background:#fff
}
a {
  color:inherit
}
header {
  height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:none;
  margin:auto;
  padding:0 4.7%
}
.logo-image {
  display:block;
  width:300px;
  height:auto;
  max-width:100%
}
.logo {
  text-decoration:none;
  color:var(--rose);
  line-height:.8;
  display:flex;
  align-items:center;
  gap:12px
}
.logo-mark {
  font-size:50px;
  color:#8eb7a2
}
.logo strong {
  font-family:'DM Serif Display',serif;
  font-size:39px;
  font-weight:400
}
.logo small {
  display:block;
  font-family:'DM Serif Display',serif;
  font-size:22px;
  text-align:center;
  margin-top:8px
}
nav {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:14px
}
nav a {
  text-decoration:none
}
nav a:hover {
  color:var(--rose)
}
.button {
  display:inline-block;
  background:var(--rose);
  color:white!important;
  text-decoration:none;
  padding:15px 27px;
  border-radius:40px;
  font-weight:600
}
.hero {
  min-height:455px;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#fcfbfa
}
.hero-image {
  position:absolute;
  inset:0 0 0 43%;
  background-image:linear-gradient(90deg,#fcfbfa 0%,transparent 35%),url('hero.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat
}
.hero-copy {
  position:relative;
  max-width:none;
  width:100%;
  margin:auto;
  padding:55px 5.2%;
  z-index:1
}
.eyebrow {
  color:var(--sage);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-weight:700;
  font-size:11px
}
.hero h1 {
  font-size:clamp(58px,7vw,88px);
  letter-spacing:-.055em;
  line-height:.94;
  color:var(--plum);
  margin:20px 0
}
.hero p {
  font-size:18px;
  line-height:1.5;
  max-width:410px;
  margin:0 0 24px;
  color:#62475e
}
.arrow {
  padding-left:14px
}
.services {
  background:var(--pale);
  padding:44px 3% 24px;
  text-align:center
}
.services h2,.about h2 {
  font-size:clamp(30px,3.6vw,42px);
  letter-spacing:-.035em;
  line-height:1.1;
  margin:12px 0 24px
}
.cards {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  max-width:none;
  margin:auto
}
.card {
  background:#fff;
  border-radius:12px;
  padding:22px 20px 20px;
  min-height:275px;
  display:flex;
  align-items:center;
  flex-direction:column
}
.icon {
  width:82px;
  height:82px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:36px;
  color:#a55f7c;
  background:#f5e3e9
}
.card:nth-child(2) .icon {
  background:#cfe7e4;
  color:#528e7b
}
.card:nth-child(3) .icon {
  background:#e8d9ec;
  color:#976783
}
.card:nth-child(4) .icon {
  background:#dce7d5;
  color:#65845e
}
.card h3 {
  font-size:19px;
  letter-spacing:-.03em;
  margin:14px 0 7px
}
.card p {
  font-size:15px;
  line-height:1.5;
  color:#665477;
  margin:0;
  max-width:230px
}
.card a {
  margin-top:auto;
  padding-top:14px;
  text-decoration:none;
  color:#a45d7d
}
.about {
  max-width:none;
  margin:auto;
  padding:0 3% 0 0;
  display:grid;
  grid-template-columns:minmax(0, 48%) minmax(0, 1fr);
  gap:clamp(24px,3.2vw,48px);
  align-items:center
}
.about-copy {
  padding:26px 0
}
.about-image {
  aspect-ratio:480 / 420;
  height:auto;
  background-image:url('family.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#e4d7d0
}
.about h2 {
  margin:12px 0
}
.about p {
  line-height:1.55;
  color:#665477;
  font-size:16px
}
.values {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:25px
}
.value .icon {
  width:52px;
  height:52px;
  font-size:25px
}
.value:nth-child(2) .icon {
  background:#cfe7e4;
  color:#528e7b
}
.value:nth-child(3) .icon {
  background:#e8d9ec;
  color:#976783
}
.value h3 {
  font-size:16px;
  margin:10px 0 4px
}
.value p {
  font-size:14px;
  line-height:1.4;
  margin:0
}
.quote {
  min-height:146px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background-color:#cce5e3;
  background-image:url("flowers-left.png"),url("flowers-right.png");
  background-position:left bottom,right bottom;
  background-size:auto 100%,auto 100%;
  background-repeat:no-repeat;
  text-align:center;
  padding:32px 20px 38px;
  color:var(--plum);
  font-family:'DM Serif Display',serif;
  font-size:clamp(24px,3vw,32px);
  line-height:1.3
}
.quote span {
  display:block;
  color:var(--rose);
  font:30px sans-serif;
  margin-top:12px
}
.contact {
  text-align:center;
  padding:60px 20px;
  background:#fff
}
.contact h2 {
  font-size:32px;
  margin:10px
}
.contact p {
  color:#665477;
  line-height:1.6;
  max-width:600px;
  margin:12px auto
}
footer {
  background:#faf3f4;
  padding:25px 5%;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#765f72;
  font-size:13px
}
footer a {
  text-decoration:none
}
@media(max-width:800px) {
  .logo-image {
    width:220px
  }
  .quote {
    background-size:auto 65%,auto 65%
  }
  header {
    height:auto;
    min-height:90px;
    gap:16px;
    flex-wrap:wrap;
    padding:18px 5%
  }
  .logo strong {
    font-size:30px
  }
  .logo small {
    font-size:18px
  }
  .logo-mark {
    font-size:38px
  }
  nav {
    gap:15px;
    flex-wrap:wrap
  }
  nav .button {
    padding:10px 15px
  }
  .hero {
    min-height:540px;
    align-items:flex-start
  }
  .hero-image {
    inset:200px 0 0 25%;
    background-size:cover;
    background-position:center;
    opacity:.8
  }
  .hero-copy {
    padding-top:45px
  }
  .hero h1 {
    font-size:60px
  }
  .hero p {
    max-width:360px
  }
  .cards {
    grid-template-columns:repeat(2,1fr)
  }
  .about {
    grid-template-columns:1fr;
    gap:0;
    padding:0 0 28px
  }
  .about-image {
    width:min(100%,600px)
  }
  .about-copy {
    padding:20px 5% 0
  }
}
@media(max-width:480px) {
  .logo-image {
    width:190px
  }
  .quote {
    background-size:auto 40%,auto 40%
  }
  nav {
    font-size:12px;
    gap:12px
  }
  nav .button {
    display:none
  }
  .hero h1 {
    font-size:52px
  }
  .hero p {
    font-size:16px;
    max-width:290px
  }
  .hero-image {
    inset:240px 0 0 12%
  }
  .cards {
    grid-template-columns:1fr 1fr
  }
  .card {
    padding:18px 10px;
    min-height:285px
  }
  .card h3 {
    font-size:16px
  }
  .card p {
    font-size:13px
  }
  .icon {
    width:65px;
    height:65px;
    font-size:29px
  }
  .values {
    gap:10px
  }
  .value p {
    font-size:12px
  }
  .about-image {
    height:auto;
    background-size:cover;
    background-position:center
  }
  footer {
    flex-direction:column
  }
}