/* ═══ TEMPLATE D — ORGANIC FLOW — SHARED STYLESHEET ═══
   Best fit: wellness / personal-care / practitioner businesses where warmth
   and approachability matter more than credentialed authority (massage,
   yoga/movement studios, holistic health, beauty/spa, family-oriented
   practices). This is the SECOND option for the wellness/practitioner
   category, alongside Template A, specifically so two nearby competing
   wellness businesses never have to share a template. Multi-page site:
   index.html, about.html, services.html, contact.html share this stylesheet.

   Structural signature that must survive any per-client recolor:
   - Circular/blob-shaped hero portrait cutout, headline offset to one side,
     NOT a rectangular two-column split (that's Template A's signature)
   - Wavy SVG section dividers between major sections instead of hard
     rectangular breaks
   - Services presented as an accordion list (click to expand one at a time),
     NOT alternating rows (Template A) and NOT a bento grid (Template C)
   - A horizontal flowing row of circular "focus area" icon badges, not tiles
   - Overlapping stacked testimonial/quote cards, not a single centered quote
   Do not flatten the accordion into always-visible text blocks, and do not
   square off the circular hero cutout, those two choices are what keep this
   template from reading as "Template A with new colors." See README.md. */

:root {
  --moss:        #6E7F5C;
  --moss-dark:   #57654A;
  --terracotta:  #D98E5B;
  --sand:        #FBF3E7;
  --sand-dim:    #F3E6D3;
  --ink:         #3A342A;
  --muted:       #8A8070;
  --border:      #E8DCC5;
  --white:       #FFFFFF;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Nunito Sans', sans-serif; background: var(--sand); color: var(--ink); line-height: 1.7; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
h1, h2, h3 { font-family: 'Fraunces', serif; font-weight: 500; line-height: 1.15; color: var(--moss-dark); }
.container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
section { padding: 5.5rem 0; position: relative; }

/* WAVY DIVIDER — organic section break, used between most major sections */
.wave-divider { display: block; width: 100%; height: 60px; margin-top: -1px; }

/* NAV */
nav { padding: 1.5rem 0; }
.nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; }
.nav-logo { font-family: 'Fraunces', serif; font-size: 1.4rem; color: var(--moss-dark); display: flex; align-items: center; gap: 0.6rem; }
.nav-links { display: flex; align-items: center; gap: 2.25rem; list-style: none; }
.nav-links a { font-size: 0.9rem; color: var(--ink); font-weight: 600; }
.nav-links a.current { color: var(--terracotta); }
.nav-cta { background: var(--terracotta); color: var(--white) !important; padding: 0.65rem 1.5rem; border-radius: 100px; }

/* PAGE HEADER (About/Services/Contact) */
.page-header { padding: 3.5rem 0 2.5rem; text-align: center; }
.page-header .eyebrow { display: inline-block; margin-bottom: 1rem; }
.page-header h1 { font-size: clamp(2rem, 4vw, 2.9rem); }

/* HERO — circular blob portrait, offset headline, NOT a rectangular grid */
#hero { padding-top: 2rem; padding-bottom: 4rem; overflow: visible; }
.hero-flow { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.eyebrow { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta); font-weight: 700; margin-bottom: 1rem; display: block; }
.hero-flow h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); margin-bottom: 1.5rem; }
.hero-flow .sub { color: var(--muted); font-size: 1.08rem; max-width: 460px; margin-bottom: 2rem; }
.btn { display: inline-block; padding: 0.9rem 2.1rem; border-radius: 100px; font-weight: 700; font-size: 0.92rem; }
.btn-primary { background: var(--moss); color: var(--white); }
.btn-primary:hover { background: var(--moss-dark); }
.btn-text { color: var(--terracotta); font-weight: 700; border-bottom: 2px solid var(--terracotta); padding-bottom: 2px; }

/* width: 100% is required here, not just max-width. .blob-portrait's only children are
   position:absolute (zero intrinsic size), so as a CSS Grid item with the default
   min-width:auto it collapses to 0x0 without an explicit width. Found broken (invisible)
   on a live client build and in this template's own unmodified preview, 2026-08-21. */
.blob-portrait { position: relative; width: 100%; aspect-ratio: 1/1; max-width: 420px; margin: 0 auto; }
.blob-portrait .blob-shape {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--terracotta), var(--moss));
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
}
.blob-portrait .blob-inner {
  position: absolute; inset: 14px;
  background: var(--sand-dim) center/contain no-repeat;
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
}

/* FOCUS AREAS — flowing row of circular badges, not tiles/cards */
#focus { background: var(--sand-dim); }
.focus-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem; margin-top: 3rem; }
.focus-badge { display: flex; flex-direction: column; align-items: center; text-align: center; width: 150px; }
.focus-circle { width: 84px; height: 84px; border-radius: 50%; background: var(--white); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.focus-circle .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--terracotta); }
.focus-badge h4 { font-family: 'Fraunces', serif; font-size: 1rem; color: var(--moss-dark); margin-bottom: 0.35rem; }
.focus-badge p { font-size: 0.82rem; color: var(--muted); }

.section-header { text-align: center; margin-bottom: 3rem; }
.section-header .eyebrow { display: block; }

/* ACCORDION — services/approach presented as expand-one-at-a-time, NOT rows/grid */
.accordion { max-width: 780px; margin: 0 auto; }
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 1.6rem 0.5rem; cursor: pointer; font-family: 'Fraunces', serif; font-size: 1.15rem; color: var(--moss-dark); }
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary .plus { font-family: 'Nunito Sans', sans-serif; font-size: 1.4rem; color: var(--terracotta); flex-shrink: 0; margin-left: 1rem; }
.accordion-item[open] summary .plus { transform: rotate(45deg); }
.accordion-item .accordion-body { padding: 0 0.5rem 1.6rem; color: var(--muted); max-width: 640px; }

/* STACKED TESTIMONIAL CARDS — overlapping, not a single centered quote */
#testimonial { background: var(--moss); }
.stack-wrap { position: relative; max-width: 640px; margin: 0 auto; padding: 1rem 0 2.5rem; }
.stack-card { background: var(--white); border-radius: 18px; padding: 2.25rem; box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
.stack-card + .stack-card { margin-top: -2rem; margin-left: 2rem; opacity: 0.85; transform: rotate(1.5deg); }
.stack-card p { font-family: 'Fraunces', serif; font-style: italic; color: var(--ink); font-size: 1.05rem; margin-bottom: 1rem; }
.stack-card cite { font-family: 'Nunito Sans', sans-serif; font-style: normal; font-size: 0.85rem; color: var(--terracotta); font-weight: 700; }

/* WHAT TO EXPECT — flowing numbered path, circles connected by a dotted line */
.flow-path { max-width: 680px; margin: 0 auto; position: relative; }
.flow-path::before { content: ''; position: absolute; left: 27px; top: 10px; bottom: 10px; border-left: 3px dotted var(--border); }
.flow-step { display: flex; gap: 1.75rem; padding-bottom: 2.5rem; position: relative; }
.flow-step:last-child { padding-bottom: 0; }
.flow-step .flow-circle { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--terracotta); color: var(--white); display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-size: 1.2rem; z-index: 1; }
.flow-step h4 { margin-bottom: 0.4rem; font-size: 1.15rem; }
.flow-step p { color: var(--muted); font-size: 0.95rem; }

/* CONTACT */
.contact-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; }
.contact-card { background: var(--white); border-radius: 20px; padding: 2.25rem; border: 1px solid var(--border); }
.contact-card h3 { margin-bottom: 1.25rem; }
.contact-detail { margin-bottom: 1.25rem; }
.contact-detail .label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta); font-weight: 700; display: block; margin-bottom: 0.3rem; }
.contact-detail .value { font-size: 1rem; color: var(--ink); }
.contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
.form-group label { font-size: 0.82rem; color: var(--muted); font-weight: 600; display: block; margin-bottom: 0.4rem; }
.form-group input, .form-group textarea {
  width: 100%; padding: 0.9rem 1.1rem; border: 1px solid var(--border); border-radius: 14px;
  font-family: 'Nunito Sans', sans-serif; font-size: 0.95rem; background: var(--sand-dim); color: var(--ink);
}
.form-group textarea { resize: vertical; min-height: 120px; }

#cta { text-align: center; }
#cta h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin-bottom: 1.25rem; }
#cta p { color: var(--muted); max-width: 480px; margin: 0 auto 2rem; }

footer { background: var(--moss-dark); color: #D8DECB; text-align: center; padding: 3rem 2rem; }
.footer-logo { font-family: 'Fraunces', serif; font-size: 1.25rem; color: var(--white); margin-bottom: 0.5rem; }
.footer-links { display: flex; justify-content: center; gap: 1.75rem; list-style: none; margin: 1rem 0; }
.footer-links a { font-size: 0.8rem; color: #D8DECB; }
.footer-links a:hover { color: var(--terracotta); }
footer p { font-size: 0.8rem; opacity: 0.8; margin-top: 1rem; }

@media (max-width: 800px) {
  .hero-flow, .contact-layout { grid-template-columns: 1fr; }
  .hero-flow > div:last-child { order: -1; }
  .nav-links { display: none; }
  section { padding: 3.5rem 0; }
  .stack-card + .stack-card { margin-left: 0; }
}