/* By A Thread Therapy — shared brand tokens */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  --forest: #2D4A3E;
  --forest-deep: #233a31;
  --sage: #8FAF8A;
  --sage-soft: #b5cbb0;
  --sage-ink: #4F6B49;
  --cream: #F0EDE6;
  --cream-warm: #ebe6db;
  --taupe: #D6CFC4;
  --charcoal: #2E2E2E;
  --charcoal-muted: #5a5754;
  --white: #FFFFFF;

  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', 'Jost', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; }
.eyebrow {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--forest);
}
.serif-italic { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px; font-family: var(--sans); font-weight: 500;
  font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px; transition: all .25s ease;
  cursor: pointer;
}
.btn-primary { background: var(--forest); color: var(--cream); }
.btn-primary:hover { background: var(--forest-deep); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--forest); border: 1px solid var(--forest); }
.btn-ghost:hover { background: var(--forest); color: var(--cream); }
.btn .arr { transition: transform .25s ease; }
.btn:hover .arr { transform: translateX(4px); }

/* Logo mark (three circles) */
.logo-mark { display: inline-flex; align-items: flex-start; gap: 6px; }
.logo-mark .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--forest); display: inline-block; }
.logo-mark .dot.sage { background: var(--sage); position: relative; }
.logo-mark .dot.sage::after {
  content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 14px;
  background: var(--sage); transform: translateX(-50%);
}

/* Scroll fade in */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Form */
input, textarea, select {
  width: 100%; font: inherit; color: var(--charcoal);
  background: transparent; border: none;
  border-bottom: 1px solid var(--taupe);
  padding: 14px 0; outline: none;
  transition: border-color .2s;
}
input:focus, textarea:focus, select:focus { border-color: var(--forest); }
label { display: block; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--charcoal-muted); margin-bottom: 4px; }
textarea { resize: vertical; min-height: 100px; }

/* Botanical placeholder (subtle striped frame with monospace caption) */
.placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(143,175,138,0.10) 0 1px, transparent 1px 14px),
    var(--cream-warm);
  border: 1px solid rgba(45,74,62,0.10);
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 14px;
  color: var(--forest);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  position: relative;
}
.img { background-size: cover; background-position: center; background-color: var(--cream-warm); }
.placeholder.dark {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 14px),
    var(--forest);
  color: var(--sage-soft);
  border-color: rgba(255,255,255,0.10);
}

/* FAQ */
.faq-item { border-top: 1px solid var(--taupe); }
.faq-item:last-child { border-bottom: 1px solid var(--taupe); }
.faq-q {
  width: 100%; text-align: left; padding: 28px 0;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--serif); font-size: 24px; color: var(--forest);
  transition: color .2s;
}
.faq-q .plus { font-family: var(--sans); font-size: 22px; color: var(--sage-ink); transition: transform .3s; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden; transition: max-height .4s ease;
  color: var(--charcoal-muted);
}
.faq-item.open .faq-a { max-height: 400px; }
.faq-a-inner { padding: 0 0 28px 0; max-width: 620px; }

/* Footer common */
.foot { background: var(--forest); color: var(--cream); padding: 80px 0 36px; }
.foot a:hover { color: var(--sage-soft); }
.foot-bottom { border-top: 1px solid rgba(255,255,255,0.10); margin-top: 60px; padding-top: 28px; font-size: 13px; opacity: 0.7; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;}

.container { max-width: 1240px; margin: 0 auto; padding: 0 48px; }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 48px; }

@media (max-width: 720px) {
  .container, .container-narrow { padding: 0 22px; }
}