/* ==========================================================
   RESET
   ========================================================== */
*,
*::before,
*::after{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* clip (not hidden) so it doesn't create a scroll container — a
     scroll container on an ancestor breaks position:sticky on the header. */
  overflow-x: clip;
  /* .site-header is position:sticky and takes layout space, so first
     sections need no extra headroom; this only offsets in-page #anchors. */
  scroll-padding-top: 130px;
}

/* Hash-linked sections (e.g. services.html#group-therapy) sit under the
   sticky header — keep them clear of it. */
[id]{
  scroll-margin-top: 130px;
}

body{
  background: var(--cream-bg);
  color: var(--text-dark);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: clip;
  width: 100%;
}

a{
  color: inherit;
  text-decoration: none;
}

img{
  max-width: 100%;
  display: block;
}

button{
  font-family: inherit;
  cursor: pointer;
}

:focus-visible{
  outline: 2px solid var(--forest-green);
  outline-offset: 3px;
}

/* Keyboard/screen-reader users otherwise have to tab through the full
   header + nav on every single page before reaching content. Off-screen
   until focused, then drops into view above everything else. */
.skip-link{
  position: absolute;
  top: -100px;
  left: var(--space-sm);
  z-index: 1000;
  padding: 12px 20px;
  background: var(--navy);
  color: var(--text-on-dark);
  font-weight: 600;
  border-radius: 0 0 4px 4px;
  transition: top var(--dur-hover) var(--ease-slow);
}

.skip-link:focus{
  top: 0;
}

/* ==========================================================
   SHARED: buttons
   Was copy-pasted near-identically into every page's own
   layout stylesheet; consolidated here as ONE copy. A page
   may still add its own override after this (e.g. contact.css
   makes .btn full-width) — later source order wins.
   ========================================================== */
.btn{
  display: inline-block;
  padding: 14px 32px;
  border: none;
  border-radius: 4px;
  font-size: var(--size-read);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur-hover);
}

.btn--primary{
  background: var(--forest-green-btn);
  color: var(--text-on-dark);
}

.btn--primary:hover{
  background: var(--navy);
  color: var(--text-on-dark);
}

.btn--secondary{
  background: transparent;
  color: var(--forest-green-ink);
  border: 2px solid var(--forest-green);
}

.btn--secondary:hover{
  background: var(--forest-green);
  color: var(--text-on-dark);
}

.btn--large{
  padding: 18px 48px;
  font-size: var(--size-body-sm);
}

/* ==========================================================
   SHARED: speckled rust panel overlay
   Used by .meeting__why, .journey__intro, .connect__form — the
   grain-speckle texture on terracotta panels. Consolidated here
   as ONE copy so it only ever needs to be edited in one place.
   Add class="speckle-panel" alongside the component's own class.
   ========================================================== */
.speckle-panel{
  position: relative;
  overflow: hidden;
}

.speckle-panel::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.6) 0, transparent 1px),
    radial-gradient(circle at 65% 70%, rgba(0,0,0,0.5) 0, transparent 1px),
    radial-gradient(circle at 40% 85%, rgba(255,255,255,0.5) 0, transparent 1px),
    radial-gradient(circle at 85% 20%, rgba(0,0,0,0.4) 0, transparent 1px),
    radial-gradient(circle at 10% 65%, rgba(255,255,255,0.4) 0, transparent 1px);
  background-size: 3px 3px, 4px 4px, 3px 3px, 5px 5px, 4px 4px;
}

/* ==========================================================
   SHARED: site footer
   Name / location / copyright + social icons, identical on
   every page. Originated on connect.html as .connect__footer;
   consolidated here as ONE copy once it needed to repeat on
   meeting, philosophy, journey, and process too.
   ========================================================== */
.site-footer{
  padding: 32px var(--container-pad) 40px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-sans);
}

.site-footer__name{
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--charcoal);
}

/* Anopy: inline page links between the identity lines and the
   copyright/social row. Injected by js/nav.js renderFooter(). */
.site-footer__links{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 20px;
}

.site-footer__links a{
  font-size: var(--size-ui);
  letter-spacing: 0.02em;
  color: var(--charcoal-soft);
  transition: color var(--dur-hover) var(--ease-slow);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible,
.site-footer__links a[aria-current="page"]{
  color: var(--forest-green-ink);
}

.site-footer__bottom{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.site-footer__copy{
  font-size: 11px;
  line-height: 1;
  color: var(--charcoal-soft);
  opacity: 0.7;
}

.site-footer__socials{
  display: flex;
  align-items: center;
  gap: 14px;
}

.site-footer__socials a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--charcoal-soft);
  opacity: 0.7;
  transition: color var(--dur-hover) var(--ease-slow), opacity var(--dur-hover) var(--ease-slow);
  /* invisible tap-target expansion to the 44px WCAG 2.5.5 minimum —
     padding grows the clickable box, the equal negative margin
     cancels it back out of layout so nothing visibly shifts */
  padding: 12.4px;
  margin: -12.4px;
}

.site-footer__socials a:hover,
.site-footer__socials a:focus-visible{
  color: var(--charcoal);
  opacity: 1;
}

.site-footer__socials svg{
  width: 19.2px;
  height: 19.2px;
  display: block;
}

/* ==========================================================
   UTILITY
   ========================================================== */

/* Present to assistive tech and to search engines, absent from the
   visual design. Used for the per-page <h1> on chapters whose layout
   deliberately opens on an image or a quote rather than a title, so
   the page still has a name in a screen reader's heading list.
   Deliberately not display:none or visibility:hidden — both remove the
   element from the accessibility tree, which would defeat the point. */
.u-visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Spam-trap field (contact.css's Formspree honeypot): pushed off-canvas
   rather than display:none/visibility:hidden so bots that check computed
   visibility are still fooled into filling it in. Paired with
   aria-hidden="true" in the HTML, unlike .u-visually-hidden above, since
   a honeypot should never reach a screen reader at all. */
.u-honeypot{
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* ==========================================================
   FILM GRAIN / POWDER
   A single fixed, non-interactive layer of static monochrome
   noise blended over the whole page — gives flat colour a
   photographic "tooth" without shifting any hue. Static, so it
   is left on for reduced-motion; hidden for print.
   ========================================================== */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  /* No blend mode: overlay/soft-light wash out on near-white grounds.
     Flat low-opacity monochrome noise reads evenly on light and dark. */
  opacity: 0.06;
  background-repeat: repeat;
  background-size: 150px 150px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media print{
  body::after{ display: none; }
}