/* ============================================================
   LANDING.CSS — Sections used only by the landing pages:
   navbar, hero, credential badge strip, about, approach,
   process, FAQ accordion, footer, wave dividers.
   ============================================================ */

/* ============================================================
   NAVBAR
   ============================================================ */

.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color-white);
  box-shadow: 0 1px 0 rgba(30, 62, 91, 0.08);
}

.navbar-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.navbar-logo { display: flex; align-items: center; }
.navbar-logo-img { height: 58px; width: auto; }

.navbar-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-links a {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-navy);
}

.navbar-links a:hover { color: var(--color-sand-dark); }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.hamburger span {
  display: block;
  height: 2px;
  width: 26px;
  margin: 0 auto;
  background-color: var(--color-navy);
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border);
}

.mobile-nav.open { display: block; }

.mobile-nav ul { list-style: none; margin: 0; padding: 0.75rem 1.5rem 1.5rem; }
.mobile-nav li { padding: 0.6rem 0; }

.mobile-nav a {
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-navy);
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-teal) 100%);
  padding: 4.5rem 0 7rem;
  overflow: hidden;
}

.hero-grid {
  grid-template-columns: 1.05fr 0.95fr;
  align-items: start;
  gap: 3.5rem;
}

.hero h1 { margin-bottom: 0.5rem; }

.hero-headline {
  font-size: var(--text-4xl);
  color: var(--color-navy);
  margin: 0 0 1rem;
  line-height: 1.22;
}

.hero-subhead {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-navy);
  margin: 0 0 1.75rem;
}

/* --- Practitioner card --- */

.practitioner-card {
  background-color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.75rem;
  /* Sized so the name wraps to two lines and the role stays on one, as on
     the live page: 123px plate + 20px gap + a 285px text column. */
  max-width: 484px;
}

.practitioner-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 1.1rem;
}

/* White rounded plate behind the logo/portrait, matching the live page:
   20px radius, 5px padding, and the image left at its own aspect ratio
   rather than cropped into a circle — the wordmark logo loses its edges
   in a circular crop and the teal hero shows through a transparent PNG. */
.practitioner-photo {
  flex: 0 0 auto;
  width: 123px;          /* 113px logo + 5px padding a side */
  background-color: var(--color-white);
  border-radius: 20px;
  padding: 5px;
}

/* The head-shot pages run their portrait slightly narrower than the logo. */
.practitioner-photo--portrait { width: 104px; }

.practitioner-photo img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.practitioner-name {
  font-family: var(--font-heading);
  font-size: 1.5rem;       /* 24px, as on the live page */
  color: var(--color-navy);
  margin: 0;
  line-height: 1.2;
}

.practitioner-role {
  font-size: 0.875rem;     /* 14px — keeps the role on a single line */
  color: var(--color-text-muted);
  margin: 0.15rem 0 0;
  line-height: 1.5;
}

.practitioner-details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.practitioner-details li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}

.practitioner-details svg {
  flex: 0 0 17px;
  margin-top: 2px;
  color: var(--color-navy);
}

/* --- Hero form card --- */

.hero-form {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 2rem 2rem 2.25rem;
}

.hero-form h2 {
  font-size: 1.6rem;
  margin-bottom: 1.25rem;
}

.field-sublabel {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 0.25rem;
  letter-spacing: 0.2px;
}

/* ============================================================
   WAVE DIVIDERS
   Sit at the bottom edge of a section and mask the join with
   the next one, the way the Elementor shape divider does.
   ============================================================ */

.wave {
  position: absolute;
  left: 0;
  width: 100%;
  line-height: 0;
  pointer-events: none;
  z-index: 1;
}

.wave--bottom { bottom: -1px; }
.wave--top    { top: -1px; transform: rotate(180deg); }

.wave svg {
  display: block;
  width: calc(100% + 1.3px);
  height: 88px;
}

.wave .wave-fill { fill: var(--color-white); }
.wave--teal .wave-fill { fill: var(--color-teal); }

@media (max-width: 860px) {
  .wave svg { height: 52px; }
}

/* ============================================================
   CREDENTIAL BADGE STRIP
   ============================================================ */

.badges { padding: 3.5rem 0 3rem; background-color: var(--color-white); }

/* Seven equal squares across a 1000px row, as on the live page. Every badge
   file is 600x600 with the artwork already padded inside, so a square cell
   plus object-fit: contain reproduces the original sizing exactly. A flex
   row cannot: flex-shrink squeezes the wider artwork and the badges end up
   visibly smaller than the design. */
.badge-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  gap: 10px;
  max-width: 1000px;
  margin: 0 auto;
}

.badge-strip img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

@media (max-width: 860px) {
  .badge-strip { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; max-width: 520px; }
}

@media (max-width: 480px) {
  .badge-strip { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

/* ============================================================
   ABOUT — "Get To Know Us/Me"
   ============================================================ */

.about-media { position: relative; }

.about-media img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* Two stacked photos, the second overlapping the first, as on the
   child/teen/family pages. Falls back to a simple stack on mobile. */
.about-collage {
  position: relative;
  padding-bottom: 4.5rem;
  padding-right: 3.5rem;
}

.about-collage .collage-main { width: 82%; }

.about-collage .collage-inset {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55%;
  border: 6px solid var(--color-white);
}

@media (max-width: 480px) {
  .about-collage { padding-bottom: 0; padding-right: 0; }
  .about-collage .collage-main { width: 100%; }
  .about-collage .collage-inset { position: static; width: 100%; border: 0; margin-top: 1rem; }
}

/* ============================================================
   APPROACH
   ============================================================ */

.approach-grid { grid-template-columns: 0.9fr 1.1fr; }

.approach-media img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.benefit-list {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.benefit-list li {
  position: relative;
  padding-left: 2rem;
  line-height: 1.6;
}

.benefit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--color-sand);
  box-shadow: 0 0 0 4px rgba(237, 203, 148, 0.3);
}

/* ============================================================
   PROCESS (discernment counseling only)
   ============================================================ */

.process { background-color: var(--color-bg-soft); }

.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.process-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.process-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}

.process-step {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-navy);
  background-color: var(--color-teal-light);
  border-radius: var(--radius-full);
  padding: 0.25rem 0.85rem;
  margin-bottom: 0.9rem;
}

.process-card ul {
  margin: 0.75rem 0 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.4rem;
}

.process-card li { font-size: var(--text-sm); line-height: 1.6; }

.process-note {
  margin-top: 2.5rem;
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-navy);
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */

.faq {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-teal-light) 100%);
}

.accordion { display: grid; gap: 0.9rem; margin-top: 2.5rem; }

.accordion-item {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  letter-spacing: 0.3px;
  color: var(--color-navy);
  background: none;
  border: 0;
  padding: 1.15rem 1.5rem;
  cursor: pointer;
}

.accordion-icon {
  flex: 0 0 auto;
  display: inline-flex;
  transition: transform 0.25s ease;
}

.accordion-item.open .accordion-icon { transform: rotate(180deg); }

/* Collapsed by max-height so the open/close animates; the value only
   has to exceed the tallest answer. */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-item.open .accordion-content { max-height: 520px; }

.accordion-content p {
  padding: 0 1.5rem 1.35rem;
  font-size: var(--text-sm);
  line-height: 1.75;
  margin: 0;
}

/* ============================================================
   FINAL CTA + FOOTER
   ============================================================ */

.cta-band {
  position: relative;
  background: linear-gradient(180deg, var(--color-teal-light) 0%, var(--color-teal) 100%);
  padding: 4rem 0 5rem;
  text-align: center;
}

.footer {
  background-color: var(--color-white);
  padding: 1.75rem 1.5rem;
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: 1px;
  color: var(--color-text-muted);
}

.footer a { color: var(--color-navy); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .hero-grid, .approach-grid { grid-template-columns: 1fr; }
  .hero { padding-bottom: 5rem; }
}

@media (max-width: 860px) {
  .navbar-links { display: none; }
  .hamburger { display: flex; }
  .practitioner-card { max-width: none; }
  .hero-form { padding: 1.5rem 1.35rem 1.75rem; }
  .approach-media { order: -1; }
}

/* ============================================================
   PAID-SEARCH LANDING PAGES
   Sections used only by the IFS, somatic and medication-assisted
   pages: trust strip, numbered step cards, callout, team band,
   getting-started list, and the hero call-to-action.
   ============================================================ */

.navbar-phone {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  white-space: nowrap;
}

/* --- Hero additions --- */

.hero-copy {
  max-width: 34rem;
  margin-bottom: 1rem;
}

.hero-actions { margin: 1.75rem 0 0.75rem; }

.hero-call {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: 1.75rem;
}

.hero-call-link {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-navy);
  white-space: nowrap;
  margin-left: 0.35rem;
}

.hero-form-intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: 1.35rem;
  line-height: 1.7;
}

.field-optional {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.form-note {
  margin-top: 1rem;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: center;
}

textarea.form-control {
  resize: vertical;
  min-height: 84px;
  font-family: var(--font-body);
  line-height: 1.6;
}

/* --- Trust strip --- */

.trust {
  background-color: var(--color-navy);
  padding: 1.1rem 0;
}

.trust-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.trust-list li {
  position: relative;
  font-size: var(--text-sm);
  letter-spacing: 0.6px;
  color: var(--color-white);
}

/* Separator dots between items, but not trailing the last one. */
.trust-list li:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: -1.05rem;
  color: var(--color-teal);
}

@media (max-width: 860px) {
  .trust-list { gap: 0.4rem 1.25rem; }
  .trust-list li:not(:last-child)::after { right: -0.75rem; }
}

/* --- Centred section heading --- */

.section-head {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

/* --- Numbered step cards --- */

.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.step-card {
  position: relative;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2.25rem 1.5rem 1.75rem;
  box-shadow: var(--shadow-sm);
}

.step-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}

.step-card p {
  font-size: var(--text-sm);
  line-height: 1.7;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--color-sand);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  line-height: 1;
}

.step-card .step-num {
  position: absolute;
  top: -19px;
  left: 1.5rem;
}

/* --- Callout --- */

.callout {
  margin-top: 2.5rem;
  background-color: var(--color-teal-light);
  border-left: 4px solid var(--color-navy);
  border-radius: var(--radius-md);
  padding: 1.75rem 2rem;
}

.callout h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }

.callout-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.callout-list li { line-height: 1.7; }
.callout-list strong { color: var(--color-navy); }

.callout-footer {
  margin-top: 1.25rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* --- Team band --- */

.team-intro {
  margin-top: 1rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.team-content .btn { margin-top: 1.5rem; }

.team-cta {
  margin-top: 1.5rem;
  font-size: var(--text-sm);
  line-height: 1.7;
}

.team-cta a { font-weight: 500; white-space: nowrap; }

/* --- Getting started --- */

.steps {
  list-style: none;
  counter-reset: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.steps li {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
}

.steps .step-num { flex: 0 0 38px; margin-top: 2px; }

.steps strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--color-navy);
  margin-bottom: 0.25rem;
}

.steps p { font-size: var(--text-sm); line-height: 1.7; }

@media (max-width: 480px) {
  .steps li { gap: 0.85rem; }
  .hero-call-link { display: block; margin-left: 0; margin-top: 0.25rem; }
}

/* On a phone the paid-search hero carries more copy than the original
   seven pages, which pushed the consultation form roughly two screens
   down. `display: contents` promotes the hero text to grid items so the
   form can be ordered above the practitioner card, and the duplicate CTA
   button is dropped because the form itself is now directly below.
   Scoped to .hero--lp so the seven existing pages are untouched. */
@media (max-width: 1024px) {
  /* gap must be 0: display:contents promotes the hero text to flex items, so
     the grid's 3.5rem gap would otherwise land between every paragraph. The
     elements' own margins do the spacing instead. */
  .hero--lp .hero-grid { display: flex; flex-direction: column; gap: 0; }
  .hero--lp .hero-content { display: contents; }
  .hero--lp .hero-form { order: 5; margin-top: 1.75rem; }
  .hero--lp .practitioner-card { order: 6; margin-top: 1.75rem; max-width: none; }
}

@media (max-width: 860px) {
  .hero--lp .hero-actions { display: none; }
}

/* --- Sticky mobile CTA (paid-search pages only) --- */

.lp-sticky-cta { display: none; }

@media (max-width: 860px) {
  .lp-sticky-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background-color: var(--color-border);
    box-shadow: 0 -2px 14px rgba(30, 62, 91, 0.16);
    /* Clear the home indicator on iOS. */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .lp-sticky-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 54px;
    font-family: var(--font-heading);
    font-size: 1rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .lp-sticky-call {
    background-color: var(--color-white);
    color: var(--color-navy);
  }

  .lp-sticky-book {
    background-color: var(--color-sand);
    color: var(--color-ink);
  }

  /* Stop the bar covering the footer and the last CTA. The env() has to
     match the bar's own padding-bottom or iOS grows the bar past the gap. */
  body { padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }
}

/* The paid-search subheads are full sentences, not the short taglines the
   original pages carry. Marcellus SC is small-caps, which is hard work to
   read at that length, so these use the body face instead. */
.hero--lp .hero-subhead {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-navy);
  margin-bottom: 1.5rem;
}

/* ============================================================
   PAID-SEARCH PAGES — TIGHTER MOBILE RHYTHM
   These pages carry more sections than the original seven, so on
   a phone they ran close to eight screens. Everything here is
   scoped to body.lp; the original seven are untouched.
   ============================================================ */

@media (max-width: 860px) {
  /* The practitioner card repeated the trust strip directly below it —
     same four facts, different wording — so on a phone it is redundant
     height. It still shows on desktop, where the two sit far apart. */
  .lp .hero--lp .practitioner-card { display: none; }

  .lp .hero { padding: 3.5rem 0 4rem; }
  .lp .section { padding: 2.5rem 0; }
  .lp .badges { padding: 2.25rem 0 2rem; }

  .lp .step-grid { gap: 1.1rem; }
  .lp .step-card { padding: 1.9rem 1.25rem 1.4rem; }
  .lp .callout { margin-top: 1.75rem; padding: 1.35rem 1.25rem; }
  .lp .section-head { margin-bottom: 1.75rem; }
  .lp .hero-form { padding: 1.5rem 1.25rem 1.75rem; }
}

@media (max-width: 480px) {
  /* Four across keeps the seven badges to two rows instead of three. */
  .lp .badge-strip { grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
}