/* =========================================================
   Blue Cicada Somatic Sex Therapy
   Shared stylesheet — official brand system
   ---------------------------------------------------------
   Palette + fonts from the Blue Cicada branding packet.
   Every color is a variable in :root, so the whole site can
   be adjusted from this one block.
   ========================================================= */

:root {
  /* --- Brand palette (from COLORS.txt) --- */
  --forest:    #21301C;   /* Forest Depth — primary dark, body text, footer */
  --moss:      #4E5227;   /* Moss — deep accent, dividers, labels */
  --olive:     #7E7A2E;   /* Olive — captions, muted/secondary text */
  --pistachio: #C6C56B;   /* Pistachio — highlights on dark */
  --mandarine: #C6772F;   /* Mandarine — primary CTA + links */
  --terracotta:#DE7355;   /* Terracotta — warm accents / hover */
  --apricot:   #EFA268;   /* Apricot — soft warmth */
  --dusty:     #D389A4;   /* Dusty Pink — tenderness accent */
  --lilac:     #E7C3DE;   /* Lilac */
  --blush:     #F2CBBD;   /* Blush */
  --coconut:   #E4DCCB;   /* Coconut — borders, quiet fills */
  --oat:       #F7F1E6;   /* Oat Cream — page canvas */
  --cream-deep:#EFE7D6;   /* Cream Deep */
  --bluebell:  #99A2BC;   /* The blue — use sparingly */
  --surface:   #FFFDF8;   /* near-white warm — cards */

  /* --- Semantic aliases (used throughout) --- */
  --ink:        var(--forest);
  --text:       var(--forest);
  --text-soft:  #6f6a3c;         /* olive, slightly deepened for readability */
  --cicada:     var(--mandarine);/* links / primary */
  --cicada-soft:var(--terracotta);
  --sage:       var(--olive);
  --sand:       var(--coconut);
  --cream:      var(--oat);
  --cream-2:    var(--surface);

  /* --- Fonts (from FONTS.txt) --- */
  --font-head:   "Yeseva One", Georgia, "Times New Roman", serif;
  --font-body:   "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-groovy: "Agbalumo", "Yeseva One", cursive;
  --font-script: "Pacifico", cursive;

  --maxw: 940px;
  --radius: 14px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--oat);
  line-height: 1.75;
  font-size: 18px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-head);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.2px;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); margin: 0 0 0.4em; }
h2 { font-size: clamp(1.55rem, 3.5vw, 2.15rem); margin: 0 0 0.5em; }
h3 { font-size: 1.3rem; margin: 0 0 0.3em; }

p { margin: 0 0 1.2em; }

a { color: var(--mandarine); text-decoration: none; }
a:hover { color: var(--terracotta); text-decoration: underline; }

/* ---------- Header / nav (dark, site-wide) ---------- */
.site-header {
  background: var(--forest);
  border-bottom: 1px solid rgba(255,255,255,.10);
  position: sticky;
  top: 0;
  z-index: 20;
}
.nav {
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 24px;
}
.brand { display: flex; flex-direction: column; align-items: flex-start; }
.brand img { height: 104px; width: auto; display: block; }
.brand:hover { text-decoration: none; }
.brand-cred {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 0.52rem;
  font-weight: 700;
  color: var(--blush);
  margin-top: -8px;
  padding-left: 29%;   /* aligns roughly under the tagline */
  white-space: nowrap;
}
.nav-links {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  align-items: center;
}
.nav-links a {
  color: var(--oat);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { text-decoration: none; color: var(--pistachio); }
.nav-links a.active {
  color: #fff;
  border-bottom-color: var(--pistachio);
}
.nav-cta {
  background: var(--terracotta);
  color: var(--forest) !important;
  padding: 9px 18px !important;
  border-radius: 40px;
  border-bottom: none !important;
  font-weight: 600 !important;
}
.nav-cta:hover { background: var(--apricot); color: var(--forest) !important; text-decoration: none; }

/* ---------- Layout ---------- */
main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 70px 24px 40px;
}
.narrow { max-width: 720px; margin-left: auto; margin-right: auto; }

.hero { text-align: center; padding: 30px 0 50px; }

/* ---------- Split hero (home): copy left, photo floating right ---------- */
.hero-split {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  flex-wrap: wrap;
  padding: 24px 0 30px;
  text-align: left;
}
.hero-split .hero-copy { flex: 1 1 340px; }
.hero-split .hero-copy .eyebrow { text-align: left; color: var(--olive); }
.hero-split .hero-copy h1 { margin-top: 6px; }
.hero-split .hero-copy .btn { background: var(--forest); }
.hero-split .hero-copy .btn:hover { background: var(--moss); }
.hero-photo { flex: 0 1 400px; display: flex; justify-content: center; }
.hero-photo img {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 56% 44% 52% 48% / 55% 52% 48% 45%;  /* soft floating blob */
  box-shadow: 0 18px 40px rgba(33,48,28,.16);
}
.hero-split + .narrow { margin-top: 44px; }
@media (max-width: 720px) {
  .hero-photo img { max-width: 300px; }
}

/* ---------- Outline button (secondary CTA) ---------- */
.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--forest);
  border: 2px solid var(--forest);
  padding: 12px 30px;
  border-radius: 40px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-decoration: none;
}
.btn-outline:hover { background: var(--forest); color: #fff; text-decoration: none; }

/* ---------- Service cards (Individuals / Couples / Postpartum) ---------- */
/* ---------- Service cards as floating blobs (one row) ---------- */
.service-cards {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  flex-wrap: nowrap;
  width: min(1120px, 94vw);
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 80px;
  margin-bottom: 50px;
}
.service-card {
  flex: 0 1 300px;
  min-height: 300px;
  padding: 44px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 16px 34px rgba(33,48,28,.12);
}
.service-card h3 {
  font-family: var(--font-groovy);
  color: var(--forest);
  font-size: 1.6rem;
  margin-bottom: 12px;
}
.service-card p { color: var(--forest); margin: 0; }
.sc-individuals {
  background: var(--pistachio);
  border-radius: 63% 37% 54% 46% / 58% 42% 58% 42%;
  transform: translateY(-16px);
}
.sc-couples {
  background: var(--dusty);
  border-radius: 42% 58% 46% 54% / 52% 54% 46% 48%;
  transform: translateY(22px);
}
.sc-postpartum {
  background: var(--blush);
  border-radius: 55% 45% 62% 38% / 46% 60% 40% 54%;
  transform: translateY(-6px);
}
@media (max-width: 720px) {
  .service-cards { flex-wrap: wrap; width: 100%; margin-left: auto; transform: none; }
  .service-card { transform: none; flex-basis: 260px; }
}

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 14px;
  font-weight: 700;
}
.lead { font-size: 1.17rem; color: var(--text); }

/* ---------- Full-width photo hero banner (per-page image set inline) ---------- */
.photo-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: -70px;               /* flush under the nav */
  min-height: 400px;
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.photo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(33, 48, 28, .45);   /* forest scrim keeps the heading legible */
}
.photo-hero .hero-inner {
  position: relative;
  z-index: 1;
  padding: 48px 24px;
  max-width: 720px;
}
.photo-hero .eyebrow { color: var(--pistachio); }
.photo-hero h1 { color: #fff; }
.photo-hero .lead { color: var(--oat); }
@media (max-width: 720px) {
  .photo-hero { margin-top: -48px; min-height: 300px; }
}

/* Hero intro statement — styled to match the page quotes; block centered, text left for clean line ends */
.hero-intro {
  font-family: var(--font-head);
  font-size: 1.32rem;
  line-height: 1.5;
  color: var(--moss);
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}

/* ---------- Buttons ---------- */
.btn {
  background: var(--mandarine);
  color: #fff;
  border: none;
  padding: 14px 34px;
  border-radius: 40px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
}
.btn:hover { background: var(--terracotta); color: #fff; text-decoration: none; }

/* ---------- Love notes ---------- */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin: 30px 0;
}
.note {
  background: var(--surface);
  border: 1px solid var(--coconut);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.note p { font-style: italic; color: var(--text); margin-bottom: 14px; }
.note .who {
  font-style: normal;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--mandarine);
  font-size: 0.85rem;
}
.placeholder-flag {
  text-align: center;
  font-size: 0.8rem;
  color: var(--moss);
  background: var(--pistachio);
  border-radius: 40px;
  display: inline-block;
  padding: 4px 16px;
  margin: 0 auto 8px;
  font-weight: 600;
}
.groovy { font-family: var(--font-groovy); font-weight: 400; color: var(--moss); }

/* ---------- Love notes in blobs (home) ---------- */
.love-notes {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(18px, 3vw, 34px);
  flex-wrap: wrap;
  max-width: 1120px;
  margin: 18px auto 40px;
}
.love-blob {
  flex: 1 1 300px;
  max-width: 360px;
  padding: 40px 38px;
  color: var(--forest);
}
.love-blob p { font-style: italic; line-height: 1.6; margin: 0 0 16px; }
.love-blob .who {
  font-style: normal;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--moss);
  font-size: 0.9rem;
}
.love-blob:nth-child(1) { background: var(--pistachio); border-radius: 58px 42px 55px 45px; transform: translateY(-10px); }
.love-blob:nth-child(2) { background: var(--blush);     border-radius: 42px 58px 45px 55px; transform: translateY(12px); }
.love-blob:nth-child(3) { background: var(--lilac);     border-radius: 55px 45px 42px 58px; transform: translateY(-4px); }
@media (max-width: 720px) {
  .love-blob { transform: none; max-width: 100%; }
}

/* ---------- Love notes carousel ---------- */
.love-carousel {
  position: relative;
  width: min(1260px, 94vw);
  margin: 8px 0 0;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 0 54px;
}
.love-viewport { overflow: hidden; }
.love-track { display: flex; width: 100%; transition: transform .45s ease; }
.love-slide {
  flex: 0 0 100%;
  display: flex;
  gap: clamp(16px, 2.5vw, 28px);
  align-items: flex-start;
  padding: 10px 4px 6px;
}
.love-slide .love-blob { flex: 1 1 0; max-width: none; }
.love-arrow {
  position: absolute;
  top: 46%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--forest);
  color: var(--oat);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background .2s ease, opacity .2s ease;
}
.love-arrow:hover { background: var(--moss); }
.love-arrow:disabled { opacity: .3; cursor: default; }
.love-prev { left: 0; }
.love-next { right: 0; }
.love-dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.love-dot { width: 11px; height: 11px; border-radius: 50%; border: none; background: var(--coconut); cursor: pointer; padding: 0; }
.love-dot.is-active { background: var(--mandarine); }
@media (max-width: 720px) {
  .love-carousel { padding: 0; width: 100%; margin-left: auto; transform: none; }
  .love-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .love-viewport::-webkit-scrollbar { display: none; }
  .love-track { flex-direction: row; transform: none !important; gap: 16px; padding: 4px 20px; }
  .love-slide { display: contents; }
  .love-slide .love-blob {
    flex: 0 0 84%;
    max-width: 84%;
    transform: none;
    scroll-snap-align: center;
  }
  .love-arrow, .love-dots { display: none; }
}

/* ---------- "Who I work with" — three clean columns ---------- */
.who-i-work {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 4vw, 44px);
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 22px auto 10px;
}
.who-col {
  flex: 1 1 250px;
  max-width: 290px;
  text-align: center;
}
.who-col .who-accent {
  width: 46px;
  height: 4px;
  border-radius: 4px;
  margin: 0 auto 14px;
}
.who-col:nth-child(1) .who-accent { background: var(--pistachio); }
.who-col:nth-child(2) .who-accent { background: var(--dusty); }
.who-col:nth-child(3) .who-accent { background: var(--bluebell); }
.who-col h3 {
  font-family: var(--font-groovy);
  color: var(--moss);
  font-size: 1.35rem;
  margin-bottom: 8px;
}
.who-col p { margin: 0; color: var(--text); }

/* ---------- Staggered paragraphs (Approach) ---------- */
.stagger { margin: 24px 0; }
.stagger .block {
  max-width: 640px;
  margin-bottom: 14px;
  padding: 30px 38px;
  color: var(--forest);
}
.stagger .block p:last-child { margin-bottom: 0; }
.stagger .left  { margin-right: auto; border-radius: 44px 44px 44px 8px; }
.stagger .right { margin-left: auto; text-align: left; border-radius: 44px 44px 8px 44px; }
/* alternating box colors — soft, light, readable; on-palette */
.stagger .block:nth-child(4n+1) { background: var(--pistachio); }
.stagger .block:nth-child(4n+2) { background: var(--lilac); }
.stagger .block:nth-child(4n+3) { background: var(--blush); }
.stagger .block:nth-child(4n+4) { background: var(--bluebell); }

/* Section title (e.g., "Before becoming a therapist…") */
.section-title {
  font-family: var(--font-groovy);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  color: var(--moss);
  text-align: center;
  margin: 0 0 10px;
}

/* Full-width soft background band for alternating sections */
.band {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 50px;
  background: var(--cream-deep);
  padding: 48px 24px 44px;
}
.band-inner { max-width: var(--maxw); margin: 0 auto; }
.band .stagger { margin-top: 24px; }
/* a distinct-colored band to separate a closing section (e.g. good-fit CTA + quote) */
.band-cta { background: var(--coconut); margin-top: 30px; margin-bottom: 0; padding-top: 40px; padding-bottom: 56px; }
.band-cta .quote { margin-top: 30px; margin-bottom: 0; }
/* good-fit page: run the closing band straight into the footer (no white gap) */
body.page-fit main { padding-bottom: 0; }
body.page-fit .site-footer { margin-top: 0; }
.mini-head {
  font-family: var(--font-groovy);
  font-size: 1.35rem;
  color: var(--moss);
  margin: 40px 0 6px;
  text-align: center;
}

/* ---------- Good fit list ---------- */
/* ---------- "Could we be a good fit?" — organized boxes, matching Cate's Approach ---------- */
.fit-list { list-style: none; padding: 0; margin: 24px 0 10px; }
.fit-list li {
  max-width: 640px;
  padding: 26px 36px 26px 98px;
  margin-bottom: 14px;
  position: relative;
  display: flex;
  align-items: center;
  color: var(--forest);
}
.fit-list li:nth-child(odd)  { margin-right: auto; border-radius: 44px 44px 44px 8px; }
.fit-list li:nth-child(even) { margin-left: auto;  border-radius: 44px 44px 8px 44px; }
/* cicada icon as the bullet */
.fit-list li::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 54px;
  background: url("logos/transparent/icon-forest.png") center/contain no-repeat;
}
/* light, readable colors — on-palette */
.fit-list li:nth-child(4n+1) { background: var(--pistachio); }
.fit-list li:nth-child(4n+2) { background: var(--lilac); }
.fit-list li:nth-child(4n+3) { background: var(--blush); }
.fit-list li:nth-child(4n+4) { background: var(--bluebell); }
@media (max-width: 720px) {
  .fit-list li { max-width: 100%; }
}

/* ---------- FAQ accordion ---------- */
.faq { margin: 20px 0; }
.faq-item { border-bottom: 1px solid var(--coconut); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-head);
  font-size: 1.18rem;
  color: var(--forest);
  padding: 24px 44px 24px 4px;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}
.faq-q:hover { color: var(--mandarine); }
.faq-q::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  color: var(--mandarine);
  font-family: var(--font-body);
  transition: transform 0.25s ease;
}
.faq-q[aria-expanded="true"]::after { transform: translateY(-50%) rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-a-inner { padding: 0 4px 24px; color: var(--text); }

/* ---------- Rates ---------- */
.rates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 30px 0;
}
.rate {
  background: var(--surface);
  border: 1px solid var(--coconut);
  border-radius: var(--radius);
  padding: 26px;
  text-align: center;
}
.rate .price { font-family: var(--font-head); font-size: 2rem; color: var(--mandarine); }
.rate .unit { color: var(--text-soft); font-size: 0.95rem; }

/* ---------- Contact form ---------- */
.form { margin: 30px 0; }
.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
  color: var(--forest);
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--coconut);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--surface);
  color: var(--text);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--olive);
  border-color: var(--moss);
}
.hipaa {
  font-size: 0.85rem;
  color: var(--moss);
  background: var(--cream-deep);
  border: 1px solid var(--coconut);
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 10px;
}

/* ---------- Quote block ---------- */
.quote { max-width: 680px; margin: 60px auto 20px; text-align: center; padding: 0 20px; }
.quote .cicada-motif { height: 56px; width: auto; margin: 0 auto 18px; display: block; opacity: 0.85; }
.quote blockquote {
  font-family: var(--font-head);
  font-size: 1.32rem;
  color: var(--moss);
  line-height: 1.5;
  margin: 0 0 12px;
}
.quote cite {
  font-style: normal;
  font-size: 0.9rem;
  letter-spacing: 1px;
  color: var(--olive);
  text-transform: uppercase;
}

/* ---------- Footnote / footer ---------- */
.site-footer { background: var(--forest); color: #d8dcc9; margin-top: 60px; }
.footer-logo { max-width: var(--maxw); margin: 0 auto; padding: 40px 24px 0; text-align: center; }
.footer-logo img { height: 84px; width: auto; }
.footnote {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 24px 40px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  line-height: 1.6;
}
.footnote .fn-left { flex: 1 1 400px; color: #c3c9b0; }
.footnote .fn-left a { color: var(--pistachio); }
.footnote .fn-right { flex: 1 1 460px; font-weight: 700; color: var(--oat); text-align: right; text-wrap: balance; }
@media (max-width: 640px) { .footnote .fn-right { text-align: left; } }

/* ---------- Responsive nav + mobile hamburger ---------- */
.nav-toggle-cb { display: none; }
.nav-toggle { display: none; }
@media (max-width: 980px) {
  .nav { flex-wrap: wrap; }
  .nav-links { justify-content: center; }
}
@media (max-width: 820px) {
  .nav { justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; }
  .nav-toggle {
    display: block;
    cursor: pointer;
    color: var(--oat);
    font-size: 1.7rem;
    line-height: 1;
    padding: 4px 8px;
    user-select: none;
  }
  .nav-links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 12px 0 8px;
  }
  .nav-toggle-cb:checked ~ .nav-links { display: flex; }
}
@media (max-width: 720px) {
  main { padding-top: 48px; }
  .brand img { height: 80px; }
}