/* ===================================================================
   Gatewood Therapy - static stylesheet
   One file, hand-maintained. No build step, no framework.
   =================================================================== */

:root {
  --stone: #2c2a26;
  --stone-light: #3d3a34;
  --warm: #f5f0ea;
  --cream: #f5f0ea;
  --sand: #e8e0d4;
  --accent: #8b7355;
  --accent-light: #a6956e;
  --text: #2c2a26;
  --text-secondary: #6b6560;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;

  /* Must be `clip`, not `hidden`.
     `overflow-x: hidden` turns body into a scroll container, which breaks
     every `animation-timeline: view()` on the page. `clip` prevents the
     same horizontal overflow without creating a scroll container. */
  overflow-x: clip;
}

::selection { background: var(--sand); color: var(--stone); }

img { max-width: 100%; height: auto; }


/* ─── Reveal animations ─────────────────────────────────────────────
   Design rule: content is VISIBLE by default. Nothing here can ever
   produce a blank page.

   .reveal-load  fires once on page load, above the fold. Pure CSS.
                 The animation always runs to completion, so the end
                 state is always visible.

   .reveal       fades in as it scrolls into view. Hidden ONLY under
                 `.js`, a class added by a script at the top of the
                 page. No script, no `.js`, no hiding. Crawlers, and
                 anyone with JS disabled, see the content immediately.

   Reduced-motion users never get the `.js` class either, so they get
   static content with no fades at all.
   ------------------------------------------------------------------ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .reveal-load { animation: fadeUp 0.8s ease both; }
  .reveal-load.d1 { animation-delay: 0.10s; }
  .reveal-load.d2 { animation-delay: 0.20s; }
  .reveal-load.d3 { animation-delay: 0.30s; }
  .reveal-load.d4 { animation-delay: 0.45s; }
}

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js .reveal.d1 { transition-delay: 0.10s; }
.js .reveal.d2 { transition-delay: 0.20s; }
.js .reveal.d3 { transition-delay: 0.30s; }
.js .reveal.d4 { transition-delay: 0.40s; }


/* ─── Nav ───────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(245, 240, 234, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(139, 115, 85, 0.1);
  padding: 12px 0;
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.brand {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--stone);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-shrink: 0;
}

/* :not(.btn) matters. The CTA is an <a> inside .nav-links, and without
   this exclusion these rules beat .btn-nav on specificity (0,1,1 vs
   0,1,0), overriding the button's font-size, colour and padding. */
.nav-links a:not(.btn) {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  display: inline-block;
  white-space: nowrap;
  transition: color 0.3s;
}

.nav-links a:not(.btn):hover { color: var(--accent); }

.nav-links a:not(.btn)[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Mobile menu: pure CSS via <details>, no JavaScript */
.mobile-nav { display: none; }

.mobile-nav > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px;
  color: var(--stone);
  display: flex;
  align-items: center;
}

.mobile-nav > summary::-webkit-details-marker { display: none; }
.mobile-nav > summary .icon-close { display: none; }
.mobile-nav[open] > summary .icon-open { display: none; }
.mobile-nav[open] > summary .icon-close { display: block; }

.mobile-nav-panel {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--cream);
  border-bottom: 1px solid var(--sand);
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mobile-nav-panel a {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-decoration: none;
  display: block;
}

.mobile-nav-panel a[aria-current="page"] { color: var(--accent); }

/* Breakpoint is 1200px, not the 900px the React nav used. The full link
   row plus the CTA needs ~1110px of the 1136px available inside a
   1200px container. Below that it overflowed the container and got
   clipped by `overflow-x: clip` on body. */
@media (max-width: 1200px) {
  .nav-links { display: none; }
  .mobile-nav { display: block; }
}


/* ─── Buttons (real links, not JS handlers) ─────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.btn-nav {
  background: var(--stone);
  color: var(--cream);
  border: none;
  padding: 10px 24px;
  font-size: 12px;
}

.btn-nav:hover { background: var(--accent); }

.btn-primary {
  background: var(--stone);
  color: var(--cream);
  border: none;
  padding: 14px 40px;
  font-size: 13px;
}

.btn-primary:hover { background: var(--accent); }

.btn-outline {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(245, 240, 234, 0.3);
  padding: 14px 40px;
  font-size: 13px;
}

.btn-outline:hover { background: var(--cream); color: var(--stone); }


/* ─── Layout ────────────────────────────────────────────────────── */

/* No horizontal padding here. The section supplies the 32px gutter, and
   because box-sizing is border-box, padding on the container would be
   subtracted from the 800px, giving a 736px text column instead of 800. */
.container { max-width: 800px; margin: 0 auto; }
.container-narrow { max-width: 700px; margin: 0 auto; }
.container-wide { max-width: 900px; margin: 0 auto; }
/* Long-form articles sit at a narrower measure than the marketing pages. */
.container-article { max-width: 720px; margin: 0 auto; }

.section { padding: 100px 32px; }
.section-sm { padding: 80px 32px; }
.section-lg { padding: 120px 32px; }
.section-lg-tight-bottom { padding: 120px 32px 80px; }
.section-lg-tight-top { padding: 80px 32px 120px; }
/* Closing aside inside a section: grouped with the content above it,
   with the section's own bottom padding keeping it off the next edge. */
.section-note {
  margin-top: 40px;
  font-size: 15px;
  line-height: 1.7;
}
.section-video { padding: 80px 32px 60px; }
.section-after-video { padding: 80px 32px 100px; }

.bg-cream { background: var(--cream); }
.bg-white { background: #fff; }
.bg-warm  { background: var(--warm); }
.bg-stone { background: var(--stone); }

.text-center { text-align: center; }

/* Thematic break between sections. <hr> rather than a styled div so the
   break is semantic and reads as a section boundary to crawlers too.
   Spans the full viewport width, like the section background edges. */
/* In-column rule: separates blocks inside a single section, sitting at
   the text measure rather than running full bleed. The live site insets
   this a further 32px each side; normalised to the 800px measure. */
.rule {
  border: 0;
  border-top: 1px solid var(--sand);
  margin: 60px 0;
}

.divider {
  /* 24px top offsets the last .item's bottom padding, so the line sits
     optically centred in the gap (100px of air on each side). */
  margin: 24px 0 0;
  border: 0;
  border-top: 1px solid var(--sand);
}


/* ─── Page hero ─────────────────────────────────────────────────── */

/* Gutter lives on the section, like every other section, so the hero's
   text column is a full 800px. The live site nests the padding inside
   the 800px box here, giving a narrower 736px hero. Deliberately not
   copied: one measure across the whole page. */
.page-hero {
  padding: 160px 32px 100px;
  background: var(--cream);
  border-bottom: 1px solid var(--sand);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 300;
  line-height: 1.2;
  color: var(--stone);
  margin-bottom: 24px;
}

.lede {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 600px;
}


/* ─── Home hero ─────────────────────────────────────────────────── */

.hero-home {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--cream);
  border-bottom: 1px solid var(--sand);
  position: relative;
}

/* Faint warm wash behind the hero. Decorative only, hence aria-hidden
   on the element and no contribution to the document outline. */
.hero-home::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background: radial-gradient(ellipse at 30% 50%, var(--accent) 0%, transparent 70%);
  pointer-events: none;
}

.hero-home .container-wide {
  padding: 160px 32px 120px;
  position: relative;
  z-index: 1;
}

.hero-home .eyebrow { letter-spacing: 0.14em; margin-bottom: 28px; }

.hero-home h1 {
  font-size: clamp(36px, 5.5vw, 60px);
  line-height: 1.15;
  max-width: 780px;
  margin-bottom: 28px;
}

.hero-home .lede { max-width: 540px; margin-bottom: 44px; }


/* ─── Recognition list (numbered) ───────────────────────────────── */

.recognition-item {
  display: flex;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--sand);
  align-items: flex-start;
}

.recognition-num {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.06em;
  min-width: 28px;
  padding-top: 4px;
  flex-shrink: 0;
}

.recognition-item p {
  font-family: var(--serif);
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--stone);
  font-style: italic;
}


/* ─── Who I work with (card grid) ───────────────────────────────── */

.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}

.client-card {
  display: block;
  text-decoration: none;
  padding: 32px 0;
  border-top: 1px solid rgba(139, 115, 85, 0.2);
}

.client-card h3 {
  font-size: 22px;
  margin-bottom: 12px;
  transition: color 0.3s;
}

.client-card p { font-size: 15px; line-height: 1.65; }

.client-card:hover h3 { color: var(--accent); }


/* ─── Video embed (16:9, responsive) ────────────────────────────── */

.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 4px;
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ─── Read-next card ────────────────────────────────────────────── */

.read-next { display: block; text-decoration: none; }

.read-next h3 {
  font-size: 22px;
  font-weight: 300;
  line-height: 1.4;
  margin-bottom: 8px;
  transition: color 0.3s;
}

.read-next p { font-size: 15px; line-height: 1.65; }

.read-next:hover h3 { color: var(--accent); }


/* ─── Pull quote ────────────────────────────────────────────────── */

.pull-quote { background: var(--stone); padding: 100px 32px; }

.pull-quote p {
  font-family: var(--serif);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--cream);
  border-left: 2px solid var(--accent);
  padding-left: 32px;
}


/* ─── Typography ────────────────────────────────────────────────── */

h2 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 300;
  color: var(--stone);
  margin-bottom: 20px;
  line-height: 1.3;
}

h2.display {
  font-size: clamp(28px, 4vw, 40px);
}

/* Section-opening heading: more air beneath it than a run-of-text h2. */
h2.section-head {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 56px;
}

h2.section-head.measure-short { max-width: 600px; }

h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--stone);
  margin-bottom: 8px;
}

p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-secondary);
}

p + p { margin-top: 24px; }

a { color: var(--accent); text-decoration: underline; }


/* ─── Bordered item list ────────────────────────────────────────── */

.item {
  padding: 24px 0;
  border-top: 1px solid rgba(139, 115, 85, 0.2);
}

.item p { font-size: 15px; line-height: 1.65; }


/* ─── About: portrait ───────────────────────────────────────────── */

.portrait {
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
}

.portrait img { width: 500px; max-width: 100%; height: auto; }


/* ─── About: credentials ────────────────────────────────────────── */

.credentials p {
  font-size: 15px;
  line-height: 2;
}

/* Tighter than the 24px default: this is a list of entries, not prose. */
.credentials p + p { margin-top: 16px; }

.credentials strong { color: var(--stone); font-weight: 500; }

.seal { display: inline-block; margin-top: 32px; }
.seal img { display: block; }


/* ─── FAQ ───────────────────────────────────────────────────────── */

.faq-item { padding: 28px 0; border-top: 1px solid rgba(139, 115, 85, 0.2); }
.faq-item h3 { font-size: 21px; margin-bottom: 12px; }

/* Dedicated FAQ page: many short entries grouped under category
   headings, so everything is a notch tighter than an in-page FAQ. */
.faq-group h2 {
  font-size: 28px;
  margin-bottom: 8px;
}

/* Groups are separated by <hr class="rule">, so the adjacent-sibling
   target is the rule, not another .faq-group. */
.rule + .faq-group h2 { margin-top: 16px; }

.faq-group .faq-item { padding: 24px 0; }

.faq-group .faq-item h3 {
  font-size: 19px;
  line-height: 1.4;
  margin-bottom: 10px;
}

.faq-group .faq-item p { font-size: 15px; line-height: 1.7; }


/* ─── Long-form article ─────────────────────────────────────────── */

.article-hero {
  padding: 160px 32px 80px;
  background: var(--cream);
  border-bottom: 1px solid var(--sand);
}

.article-sub {
  font-size: 18px;
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 28px;
}

.article-byline {
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.article-body h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

/* A button following prose needs more breathing room than the 24px
   paragraph rhythm: it is a change of mode, not the next sentence.
   Without this the gap is 0, since `p + p` does not apply to an <a>. */
.article-body p + .btn { margin-top: 36px; }

/* A real <ul> that reads as running paragraphs. Semantics for crawlers
   and screen readers, identical appearance to the prose around it. */
.plain-list {
  list-style: none;
  padding: 0;
  /* Matches the paragraph rhythm: `p + p` does not apply across a <ul>. */
  margin: 24px 0 0;
}

.plain-list li {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-secondary);
}

.plain-list li + li { margin-top: 24px; }

.author-bio { padding: 32px 0; }

.author-bio .eyebrow {
  font-size: 13px;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.author-bio p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 16px;
}

/* The author's own name reads as a name, not as another inline link. */
.author-bio a.author-name { color: var(--stone); }

/* Visible publication date. Google treats a date that appears on the
   page as more trustworthy than one that exists only in schema. */
.article-date {
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  margin-top: 20px;
}


/* ─── Contact blocks ────────────────────────────────────────────── */

.contact-block {
  padding: 32px 0;
  border-top: 1px solid var(--sand);
}

.contact-block:last-of-type { border-bottom: 1px solid var(--sand); }

.contact-block .eyebrow {
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.contact-block p { font-size: 15px; line-height: 1.65; }

.contact-block .btn { margin-top: 20px; }


/* ─── Essay (dark section, no-JS expander) ──────────────────────── */

.essay { padding: 80px 32px; background: var(--stone); }

.essay .eyebrow {
  font-size: 11px;
  color: rgba(200, 170, 130, 0.8);
  margin-bottom: 12px;
}

.essay h2 {
  font-size: 24px;
  color: var(--cream);
  margin-bottom: 16px;
  line-height: 1.4;
}

.essay .byline {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(245, 240, 234, 0.6);
  font-style: italic;
}

.essay .teaser {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.8;
  color: var(--cream);
  margin-top: 24px;
}

.essay-body { margin-top: 0; }

.essay-body p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.8;
  color: var(--cream);
  margin-top: 20px;
}

.essay-body > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: rgba(200, 170, 130, 0.9);
  letter-spacing: 0.06em;
  padding: 12px 0;
  margin-top: 8px;
  transition: opacity 0.2s;
}

.essay-body > summary::-webkit-details-marker { display: none; }
.essay-body > summary:hover { opacity: 0.7; }
.essay-body > summary::after { content: " \2193"; }
.essay-body[open] > summary::after { content: " \2191"; }
.essay-body[open] > summary .label-closed { display: none; }
.essay-body > summary .label-open { display: none; }
.essay-body[open] > summary .label-open { display: inline; }


/* ─── Dark CTA ──────────────────────────────────────────────────── */

.cta-dark { background: var(--stone); padding: 80px 32px; }
.cta-dark h2 { color: var(--cream); }
.cta-dark p { color: rgba(245, 240, 234, 0.7); font-size: 16px; line-height: 1.7; margin-bottom: 36px; }
.cta-dark a { color: rgba(245, 240, 234, 0.7); }

.cta-light { background: var(--cream); padding: 80px 32px; }
.cta-light p { margin-bottom: 36px; }


/* ─── Footer ────────────────────────────────────────────────────── */

.footer {
  background: var(--stone);
  border-top: 1px solid rgba(245, 240, 234, 0.08);
  padding: 48px 32px 36px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 32px;
}

.footer .brand { font-size: 20px; color: var(--cream); margin-bottom: 8px; display: block; }

.footer-address {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(245, 240, 234, 0.4);
  line-height: 1.6;
}

.footer-links { display: flex; gap: 32px; flex-wrap: wrap; }

.footer-links a {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(245, 240, 234, 0.5);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-links a:hover { color: var(--cream); }

.footer-legal {
  max-width: 1200px;
  margin: 32px auto 0;
  border-top: 1px solid rgba(245, 240, 234, 0.06);
  padding-top: 20px;
}

.footer-legal p {
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(245, 240, 234, 0.25);
}