/* ============================================================
   service.css — layout to match live ethoswellness.com service page
   Loaded after main.css. Page-specific overrides + new components.
   Brand tokens come from main.css :root (navy/forest/stone/taupe/cream).
   ============================================================ */

/* ---- Hero: large centered title on the forest band (live look) ---- */
.svc-hero h1 {
  font-weight: 600;
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: -0.01em;
}

/* ---- Full-width photo that bleeds across the green/cream seam ----
   Live page: photo is wide, breaks the container, and sits half on the
   forest band and half on the cream below it. We widen the image past
   the normal container so it reads as a near-edge-to-edge band. */
.svc-photo-bleed {
  background: var(--cream);
  position: relative;
  padding: 0;
}
.svc-photo-bleed::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: var(--forest);
  z-index: 0;
}
.svc-photo-bleed .container {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  padding-top: 0;
}
.svc-photo-bleed img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(17, 39, 77, 0.22);
  margin: 0;
}

/* ---- "What to Expect" — photo (left) + forest panel (right) split ----
   Live page: a tall section. Left half is a real photo, right half is a
   forest-green panel holding the eyebrow, H2, lead line and an icon
   checklist (circle check + bold label + description per row). On mobile
   the photo stacks above the panel. */
/* Kill the inherited section padding so the split runs edge to edge,
   matching the live full-bleed photo/panel band. */
.expect-section {
  padding: 0 !important;
}
.svc-expect-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--forest);
  /* full-bleed: this section ignores the page container and runs edge to edge */
  width: 100%;
}
.svc-expect-photo {
  position: relative;
  min-height: 520px;
  background-color: var(--taupe);
}
.svc-expect-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.svc-expect-panel {
  background: var(--forest);
  color: var(--off-white);
  padding: clamp(56px, 7vw, 104px) clamp(28px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 760px;
}
.svc-expect-panel .eyebrow-dot {
  color: rgba(255, 252, 249, 0.72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.svc-expect-panel .eyebrow-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 252, 249, 0.65);
}
.svc-expect-panel h2 {
  color: var(--off-white);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 14px;
}
.svc-expect-lead {
  color: rgba(255, 252, 249, 0.88);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 600;
  margin: 0 0 28px;
}

/* ---- Icon checklist rows inside the forest panel ---- */
.svc-icon-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.svc-icon-item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 18px;
  align-items: start;
}
.svc-icon-item .svc-icon-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 252, 249, 0.12);
  border: 1px solid rgba(255, 252, 249, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.svc-icon-item .svc-icon-mark svg {
  width: 18px;
  height: 18px;
  stroke: var(--off-white);
  stroke-width: 2.4;
  fill: none;
}
.svc-icon-item h3 {
  color: var(--off-white);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 4px 0 6px;
}
.svc-icon-item p {
  color: rgba(255, 252, 249, 0.82);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

/* ---- Mobile: photo stacks above the forest panel ---- */
@media (max-width: 900px) {
  .svc-expect-split { grid-template-columns: 1fr; }
  .svc-expect-photo { min-height: 280px; }
  .svc-expect-panel { max-width: 100%; padding: 48px 24px; }
}
@media (max-width: 480px) {
  .svc-expect-photo { min-height: 220px; }
  .svc-icon-item { grid-template-columns: 34px 1fr; gap: 14px; }
  .svc-icon-item .svc-icon-mark { width: 34px; height: 34px; }
}

/* ============================================================
   INTRO 2-COLUMN — text left, photo right (live look)
   main.css .intro-split already supplies the grid; this just
   guarantees the photo stacks below the text on mobile so the
   heading/CTA stay first.
   ============================================================ */
@media (max-width: 900px) {
  .intro-split-section .intro-split {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .intro-split-section .intro-split-image {
    order: 2;
    aspect-ratio: 16 / 11;
    max-height: 360px;
  }
}

/* ============================================================
   CORE THERAPY MODALITIES — single CENTERED narrow column list
   Scoped to .modalities-list so the Common-Issues / other
   modalities-grids on the site are untouched.
   ============================================================ */
.modalities-list .modalities-list-col {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
  text-align: center;
}
.modalities-list .modality-entry h3 {
  color: var(--navy);
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 12px;
}
.modalities-list .modality-entry p {
  color: var(--stone);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}
.modalities-list .modalities-list-cta {
  max-width: 760px;
  margin: 56px auto 0;
  text-align: center;
}
.modalities-list .modalities-list-cta p {
  color: var(--stone);
  font-size: 16px;
  margin: 0 0 20px;
}

/* ============================================================
   COMMON ISSUES — color-topped cards in a 3-col grid
   ============================================================ */
.issues-section {
  background: var(--cream);
  padding: clamp(72px, 10vw, 120px) 0;
}
.issues-section .section-intro {
  max-width: 820px;
  margin: 0 auto 56px;
  text-align: center;
}
.issues-section .section-intro h2 {
  color: var(--navy);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  margin: 0 0 16px;
}
.issues-section .section-intro p {
  color: var(--stone);
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
}
.issues-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1120px;
  margin: 0 auto;
}
/* Solid checkerboard color cards (live look): forest/navy alternating,
   white text, a circular icon badge in the opposite color at top-left. */
.issue-card {
  border-radius: 16px;
  padding: 40px 34px 36px;
  box-shadow: 0 16px 40px rgba(17, 39, 77, 0.14);
}
.issue-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
}
.issue-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke-width: 1.9;
}
.issue-card h3 {
  color: var(--off-white, #fff);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 14px;
}
.issue-card p {
  color: rgba(255, 252, 249, 0.82);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}
/* checkerboard: odd cards forest, even cards navy; badge is the opposite color */
.issue-card:nth-child(odd)  { background: var(--forest); }
.issue-card:nth-child(even) { background: var(--navy); }
.issue-card:nth-child(odd)  .issue-icon { background: var(--navy); }
.issue-card:nth-child(even) .issue-icon { background: var(--forest); }
.issue-icon svg { stroke: var(--off-white, #fff); }
@media (max-width: 980px) {
  .issues-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .issues-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   CONTACT — full-width single column, cream bg, centered head,
   Google Form embedded full width below (NOT a 2-col split).
   ============================================================ */
/* Live look: stone (#4D4844) band, white LEFT-aligned heading + intro,
   then the full-width form below. */
.contact-full {
  background: var(--stone, #4D4844);
  padding: clamp(72px, 10vw, 120px) 0;
}
.contact-full .eyebrow-dot {
  color: rgba(255, 252, 249, 0.7);
}
.contact-full .eyebrow-dot::before {
  background: rgba(255, 252, 249, 0.62);
}
.contact-full-head {
  max-width: 1080px;
  margin: 0 auto 40px;
  text-align: left;
}
.contact-full-head h2 {
  color: var(--off-white, #fff);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 16px;
}
.contact-full-head p {
  color: rgba(255, 252, 249, 0.85);
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 22px;
  max-width: 760px;
}
.contact-full-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 17px;
  font-weight: 600;
}
.contact-full-meta a {
  color: var(--off-white, #fff);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.contact-full-meta a:hover { color: rgba(255, 252, 249, 0.75); }
.contact-full-sep { color: rgba(255, 252, 249, 0.45); font-weight: 400; }
.contact-full-form {
  max-width: 1080px;
}
.contact-full-form {
  max-width: 1080px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}
.contact-full-form iframe {
  display: block;
  width: 100%;
  min-height: 1100px;
  border: none;
}
@media (max-width: 480px) {
  .contact-full-meta { gap: 8px; font-size: 15px; }
  .contact-full-sep { display: none; }
  .contact-full-meta a { display: block; width: 100%; }
}

/* closing prose paragraph below the What-to-Expect checklist (live look) */
.svc-expect-close {
  color: rgba(255, 252, 249, 0.82);
  font-size: 15px;
  line-height: 1.7;
  margin: 30px 0 0;
}

/* ============================================================
   FRAMEWORK SPLIT — full-bleed photo (left) + NAVY panel (right)
   holding eyebrow, white H2, intro, bulleted phases + CTA.
   Mirrors svc-expect-split but navy and photo-on-left.
   ============================================================ */
.framework-section { padding: 0 !important; }
.svc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  width: 100%;
}
.svc-split-photo {
  position: relative;
  min-height: 540px;
  background-color: var(--taupe);
}
.svc-split-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.svc-split-panel {
  padding: clamp(56px, 7vw, 104px) clamp(28px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 760px;
}
.svc-split--navy { background: var(--navy); }
.svc-split--navy .svc-split-panel { background: var(--navy); color: var(--off-white, #fff); }
.svc-split-panel .eyebrow-dot {
  color: rgba(255, 252, 249, 0.72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.svc-split-panel .eyebrow-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 252, 249, 0.65);
}
.svc-split-panel h2 {
  color: var(--off-white, #fff);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 16px;
}
.svc-split-lead {
  color: rgba(255, 252, 249, 0.88);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 24px;
}
.svc-phase-list {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.svc-phase-list li {
  color: rgba(255, 252, 249, 0.82);
  font-size: 15px;
  line-height: 1.6;
  padding-left: 20px;
  position: relative;
}
.svc-phase-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--forest);
}
.svc-phase-list li strong { color: var(--off-white, #fff); font-weight: 700; }
.svc-phase-cta p {
  color: var(--off-white, #fff);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 16px;
}
.btn-pill-light {
  display: inline-block;
  background: var(--off-white, #fff);
  color: var(--navy);
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.btn-pill-light:hover { background: rgba(255, 252, 249, 0.88); }
@media (max-width: 900px) {
  .svc-split { grid-template-columns: 1fr; }
  .svc-split-photo { min-height: 300px; order: 1; }
  .svc-split-panel { order: 2; max-width: 100%; padding: 48px 24px; }
}

/* ============================================================
   LOCATIONS PAGE — navy office cards with embedded Google Maps
   ============================================================ */
.locations-section { padding: clamp(56px, 8vw, 96px) 0; background: var(--cream); }
.locations-section .section-intro { text-align: center; margin-bottom: 44px; }
.locations-section .section-intro h2 { color: var(--navy); font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; margin: 0; }
.locations-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 1120px; margin: 0 auto; }
.location-card { background: var(--navy); color: var(--off-white, #fff); border-radius: 16px; padding: 30px 28px; box-shadow: 0 16px 40px rgba(17, 39, 77, 0.16); display: flex; flex-direction: column; }
.location-name { text-decoration: none; display: inline-block; }
.location-card h3 { color: var(--off-white, #fff); font-size: 21px; font-weight: 700; margin: 0 0 12px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.location-name:hover h3 { color: rgba(255, 252, 249, 0.82); }
.location-addr { color: rgba(255, 252, 249, 0.82); font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
.location-map { border-radius: 10px; overflow: hidden; margin: 0 0 18px; background: rgba(255,255,255,0.06); }
.location-map iframe { display: block; width: 100%; height: 200px; border: 0; }
.location-contact { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.location-contact a { color: var(--off-white, #fff); font-size: 15px; font-weight: 600; text-decoration: none; }
.location-contact a:hover { color: rgba(255, 252, 249, 0.78); }
@media (max-width: 900px) { .locations-cards { grid-template-columns: 1fr; max-width: 460px; } }

/* ============================================================
   SERVICES HUB — clean cards for age-group + service lists
   ============================================================ */
.svc-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
}
.svc-hub-grid > div {
  background: #fff;
  border: 1px solid rgba(17, 39, 77, 0.08);
  border-top: 3px solid var(--forest);
  border-radius: 14px;
  padding: 30px 28px;
  box-shadow: 0 10px 30px rgba(17, 39, 77, 0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.svc-hub-grid > div:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(17, 39, 77, 0.12); }
.svc-hub-grid > div:nth-child(3n+2) { border-top-color: var(--navy); }
.svc-hub-grid > div:nth-child(3n) { border-top-color: var(--stone); }
.svc-hub-grid h3 { color: var(--navy); font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0 0 12px; }
.svc-hub-grid > div > p { color: var(--stone); font-size: 15px; line-height: 1.65; margin: 0 0 16px; }
.svc-hub-grid > div > p:last-child { margin: auto 0 0; }
.svc-hub-grid a {
  color: var(--forest);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.svc-hub-grid a::after { content: "\2192"; transition: transform 0.2s ease; }
.svc-hub-grid a:hover::after { transform: translateX(4px); }
@media (max-width: 900px) { .svc-hub-grid { grid-template-columns: 1fr; max-width: 460px; } }