/* ---------- Fonts ---------- */
/* Golden Plains is the brand script from the logo lockup. The demo cut only
   licenses letters and digits — every punctuation glyph is a "DEMO USE ONLY"
   watermark — so the webfont is subset to A-Z a-z 0-9 and anything else falls
   through to Montserrat. Keep script headings punctuation-free until the full
   family is licensed. */
@font-face {
  font-family: 'Golden Plains';
  src: url('../fonts/GoldenPlains-Demo.woff2') format('woff2'),
       url('../fonts/GoldenPlains-Demo.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020, U+0030-0039, U+0041-005A, U+0061-007A;
}

/* ---------- Variables ---------- */
:root {
  --olive: #868870;
  --olive-dark: #8b715a;
  --deep-brown: #402d1d;
  --mauve: #906564;
  --mauve-dark: #6d4a45;
  --blush-bg: #ecdfda;
  --blush-tint: #f0ebe9;
  --cream: #f3f2f1;
  --gray-bg: #eeece7;
  --text-dark: #3a3a3a;
  --text-muted: #8c8c86;
  --white: #ffffff;
  --font-script: 'Golden Plains', 'Montserrat', cursive;
  --font-body: 'Montserrat', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 19px;
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

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

ul { list-style: none; margin: 0; padding: 0; }

/* ---------- Header / Nav ---------- */
.site-header {
  background: var(--cream);
  padding: 18px 40px;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #e4e1da;
}

.nav-wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
}

.nav-links {
  display: flex;
  gap: 36px;
}

.nav-links a {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0px;
  color: var(--text-dark);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--mauve);
}

.logo {
  display: block;
  flex-shrink: 0;
}

.logo img { display: block; width: 150px; height: auto; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--text-dark);
}

/* ---------- Shared ---------- */
.script-heading {
  font-family: var(--font-script);
  font-size: clamp(34px, 4.2vw, 54px);
  color: var(--olive);
  font-weight: 400;
  margin: 0 0 24px;
}

.script-heading.mauve { color: var(--mauve); }

.script-inline {
  font-family: var(--font-script);
  font-size: 1.5em;
  color: var(--text-dark);
}

.btn {
  display: inline-block;
  padding: 8px 32px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-olive {
  background: var(--olive);
  color: var(--white);
}

.btn-olive:hover {
  background: var(--olive-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(134, 136, 112, 0.35);
}

.btn-white {
  background: var(--white);
  color: var(--mauve);
}

.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

#btn-contact {
    width: 12em;
    text-align: center;
}

/* ---------- Welcome ---------- */
.welcome {
  padding: 70px 40px;
}

.welcome-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 30px;
  align-items: center;
}

.welcome-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 38% center;
  border-radius: 28px;
}

.welcome-heading {
  max-width: 480px;
  margin: 0 auto;
}

.welcome-heading .script-heading {
  margin-left: -50px;
  margin-bottom: 0;
  line-height: 1;
  position: relative;
}

/* Paragraph and button share this box, so the button's auto margins center it on
   the paragraph. Inset from the heading, which sits in its own block and is
   deliberately not nudged; the copy overhangs it on the right and that's fine. */
.welcome-content {
  max-width: 480px;
  margin: 0 auto;
  padding-left: 24px;
}

.welcome-content p {
  color: var(--text-dark);
  font-size: 19px;
  margin-bottom: 30px;
}

.welcome-content .btn {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

/* ---------- Banner ---------- */
.banner {
  background-color: var(--blush-bg);
  background-image: url('../images/banner-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* generous vertical padding: the 3.5em script spans overflow their 0.7
     line boxes, so they encroach on whatever padding is set here */
  padding: 48px 40px 58px;
}

.banner-text {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  font-size: 27px;
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.15;
}

.banner-script {
  font-family: var(--font-script);
  font-size: 3.5em;
  /* unitless line-height inherits as a NUMBER, so at 3.5em these spans would
     compute 1.15 x 94px and force the two lines apart — pin it on the span */
  line-height: 0.7;
  color: var(--text-dark);
}

/* ---------- What I Offer ---------- */
.offer {
  max-width: 1200px;
  margin: 90px auto 60px;
  padding: 0 40px;
}

.offer-text p {
  color: var(--text-dark);
  margin-bottom: 20px;
}

.offer-help-card {
  position: relative;
  margin-top: 56px;
}

.offer-help-label {
  position: absolute;
  top: 0;
  left: 48px;
  /* straddle the card's top edge, half in / half out */
  transform: translateY(-50%);
  z-index: 1;
  background: var(--mauve-dark);
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  padding: 11px 22px;
  border-radius: 8px;
}

.offer-help-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--mauve-dark);
  border-radius: 32px;
  overflow: hidden;
}

.offer-help-col {
  position: relative;
  padding: 60px 12px 40px;
  text-align: center;
  background: var(--white);
}

.offer-help-col:nth-child(odd) { background: var(--blush-tint); }

/* dot separators, centred on the seam between columns and on the heading */
.offer-help-col + .offer-help-col::before {
  content: "";
  position: absolute;
  top: 91px;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mauve);
}

.offer-help-col h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-script);
  font-size: 28px;
  /* Golden Plains is single-weight, so font-weight can't thin these — a softer
     warm grey is what actually lightens them. */
  font-weight: 400;
  line-height: 1.25;
  color: #5f5652;
  /* two lines' worth so every column's list starts at the same baseline */
  min-height: 70px;
  margin: 0 0 16px;
}

.offer-help-col li {
  font-size: 13px;
  color: var(--text-dark);
  margin-bottom: 8px;
}

/* ---------- About Laura ---------- */
.about-laura {
  background-color: var(--cream);
  background-image: url('../images/lotus-pattern.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 90px 40px;
}

.about-laura-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 60px;
}

.about-laura-photo { grid-column: 1; grid-row: 1; }

.about-laura-photo .portrait-img {
  width: 90%;
  height: auto;
  max-width: 520px;
  aspect-ratio: 12 / 5;
  object-fit: contain;
  /* same rounding as the welcome photo */
  border-radius: 28px;
}

.about-laura-intro { grid-column: 1; grid-row: 2; }

.about-laura-intro p,
.about-laura-more p {
  color: var(--text-dark);
  margin: 0 0 16px;
}

.about-laura-more { grid-column: 2; grid-row: 1 / 3; align-self: center; }

/* ---------- Rates ---------- */
.rates {
  max-width: 1200px;
  margin: 90px auto;
  padding: 0 40px;
}

.rates-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: start;
}

.rates-subhead {
  font-weight: 600;
  font-size: 22px;
  color: var(--text-dark);
  margin: 0 0 16px;
}

.rates-text > p { color: var(--text-dark); margin: 0 0 18px; }

.rates-list { margin: 0 0 22px; }

.rates-list li {
  font-size: 19px;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.rates-disclaimer {
  font-size: 11px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.6;
}

.rates-portal-card {
  /* row is align-items: start; centre just this item against the taller text column */
  align-self: center;
  background: var(--olive);
  color: var(--white);
  border-radius: 10px;
  padding: 34px 32px;
  text-align: center;
}

.rates-portal-card p {
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 22px;
  line-height: 1.6;
}

/* ---------- CTA / Contact form ---------- */
.cta {
  background: var(--gray-bg);
  padding: 90px 40px;
  margin-top: 40px;
}

.cta-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 50px;
  align-items: center;
}

.cta-text p {
  color: var(--deep-brown);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 20px;
}

.cta-arrow { width: 400px; height: auto; }

.cta-form-card {
  background: var(--white);
  border-radius: 10px;
  padding: 34px 38px 38px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}

.cta-form-intro {
  color: var(--mauve);
  font-size: 19px;
  margin: 0 0 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.cta-form-card input,
.cta-form-card textarea {
  width: 100%;
  background: var(--gray-bg);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-dark);
  resize: vertical;
}

.cta-form-card input:focus,
.cta-form-card textarea:focus {
  outline: none;
  border-color: var(--olive);
  background: var(--white);
}

.cta-form-card textarea { margin-bottom: 22px; }

.cta-form-card .btn {
  display: block;
  margin: 0 auto;
  padding: 8px 32px;
}

.form-status {
  text-align: center;
  font-size: 11px;
  font-weight: 300;
  color: var(--olive-dark);
  margin: 14px 0 0;
  min-height: 18px;
}

.form-status.error {
  color: var(--mauve-dark);
}

.form-nono {
  position: absolute;
  left: -9999px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--text-dark);
  color: #cfcac2;
  padding: 40px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-contact p { margin: 0 0 4px; font-size: 11px; font-weight: 300; }

.footer-copy p { margin: 0; font-size: 11px; font-weight: 300; color: #b8ada2; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .welcome-inner,
  .cta-inner,
  .rates-inner {
    grid-template-columns: 1fr;
  }

  .welcome-heading .script-heading {
    margin-left: 0;
  }

  .about-laura-inner {
    grid-template-columns: 1fr;
  }

  .about-laura-photo,
  .about-laura-intro,
  .about-laura-more {
    grid-column: 1;
  }

  .about-laura-photo { grid-row: 1; }
  .about-laura-intro { grid-row: 2; }
  .about-laura-more { grid-row: 3; }

  .offer-help-grid { grid-template-columns: 1fr 1fr; }

  /* pill drops into the flow so it can wrap instead of overflowing the card */
  .offer-help-label {
    position: static;
    transform: none;
    display: block;
    white-space: normal;
    text-align: center;
    font-size: 14px;
    margin-bottom: 18px;
    border-radius: 10px;
  }

  .offer-help-col { padding-top: 30px; }
  .offer-help-col + .offer-help-col::before { display: none; }

  .banner { padding-top: 32px; padding-bottom: 39px; }
  .banner-text { font-size: 19px; }

  .cta-text p { text-align: center; }

  /* single-column: the form stacks below, so an arrow pointing right at nothing */
  .cta-arrow { display: none; }

  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* 2-up: checkerboard the fills, otherwise odd/even reads as two solid vertical bands */
@media (max-width: 900px) and (min-width: 721px) {
  .offer-help-col:nth-child(3) { background: var(--white); }
  .offer-help-col:nth-child(4) { background: var(--blush-tint); }
}

@media (max-width: 720px) {
  .site-header { padding: 16px 20px; }

  .logo img { width: 118px; }

  .nav-links { display: none; }

  /* pulled out of the flow so it sits beside the centered lockup, not under it */
  .nav-toggle {
    display: flex;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
  }

  .site-header.open .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    padding: 20px;
    gap: 18px;
    border-bottom: 1px solid #e4e1da;
  }

  .nav-right.nav-links { align-items: flex-start; }

  .welcome, .banner, .about-laura, .offer, .rates, .cta {
    padding-left: 20px;
    padding-right: 20px;
  }

  .offer-help-grid { grid-template-columns: 1fr; }

  .form-row { grid-template-columns: 1fr; }
}