/* ============================================================
   Elwood Myotherapy — design tokens + base
   Calm & spa-like · warm sage / cream / terracotta · clean sans
   ============================================================ */

:root {
  /* Warm neutrals */
  --cream-50:  #f4f5e6;
  --cream-100: #e8ecd1;
  --cream-200: #dbe3b7;
  --cream-300: #c8d29c;

  /* Sage greens (olive — sampled from elwoodmyotherapy.com.au) */
  --sage-900: #20240d;
  --sage-800: #2e3414; /* brand background */
  --sage-700: #3a4019;
  --sage-600: #474f22;
  --sage-500: #5c6433;
  --sage-300: #aeb493;
  --sage-200: #c8d0a8;

  /* Warm gold accent */
  --terra-600: #c2b06a;
  --terra-500: #cdbb78;
  --terra-400: #d8c98e;
  --terra-200: #6f6a39;

  /* Ink / text */
  --ink:      #f4f5e6;
  --ink-soft: #dbe3b7;
  --muted:    #aeb493;
  --muted-2:  #98a07e;

  /* Semantic */
  --bg:        #2e3414;
  --bg-warm:   #333917;
  --surface:   #3a4019;
  --line:      rgba(219, 227, 183, 0.16);
  --line-soft: rgba(219, 227, 183, 0.09);

  --accent:    var(--terra-500);
  --primary:   var(--sage-700);

  /* Type */
  --font: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* Shadow — soft, warm */
  --shadow-sm: 0 1px 2px rgba(44, 53, 44, 0.05), 0 2px 6px rgba(44, 53, 44, 0.04);
  --shadow-md: 0 6px 20px rgba(44, 53, 44, 0.08), 0 2px 6px rgba(44, 53, 44, 0.05);
  --shadow-lg: 0 18px 50px rgba(44, 53, 44, 0.14), 0 4px 14px rgba(44, 53, 44, 0.06);

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01";
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; color: var(--ink); }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* Type scale */
.display { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; }
.h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); letter-spacing: -0.03em; }
.h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); letter-spacing: -0.025em; }
.h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); }
/* ----------------------------------------------------------------
   BODY COPY SYSTEM — 3 tiers only. Do not introduce new prose sizes.
   · Body Lead  → .lead        clamp(1.1rem,1.6vw,1.3rem) / --ink-soft / 1.55
   · Body       → p, .ep-body  17px                       / --ink-soft / 1.6
   · Body Small → .body-sm     0.95rem                     / --muted    / 1.55
   (The centred .statement block is a deliberate display module, not body.)
   ---------------------------------------------------------------- */
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--ink-soft); }
.eyebrow {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--terra-600);
}

/* Layout helpers */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 9vw, 130px); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em;
  padding: 0.85em 1.5em; border-radius: var(--r-pill);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, box-shadow .25s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { background: var(--sage-700); color: var(--cream-50); }
.btn-primary:hover { background: var(--sage-800); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn-accent { background: var(--terra-500); color: #fff; }
.btn-accent:hover { background: var(--terra-600); box-shadow: 0 10px 28px rgba(244,238,227,.34); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--sage-700); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { background: rgba(61,74,62,.06); box-shadow: inset 0 0 0 1.5px rgba(61,74,62,.28); }
.btn-lg { font-size: 1.05rem; padding: 1em 1.8em; }

/* image-slot base look — clear, attractive media placeholder */
image-slot {
  display: block;
  color: var(--sage-600);
}
image-slot::part(frame) {
  background-color: var(--cream-200) !important;
  background-image:
    repeating-linear-gradient(135deg, rgba(61,74,62,.05) 0 2px, transparent 2px 13px) !important;
  box-shadow: inset 0 0 0 1.5px rgba(61,74,62,.16) !important;
}
image-slot::part(empty) { gap: 9px; }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* Striped placeholder fallback inside slots (when empty + no JS fill) */
.ph-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem; letter-spacing: 0.04em; color: var(--sage-500);
  text-transform: lowercase;
}

::selection { background: var(--terra-200); color: var(--sage-900); }

/* Focus visibility */
a:focus-visible, button:focus-visible {
  outline: 2.5px solid var(--terra-500); outline-offset: 3px; border-radius: 4px;
}

/* ============================================================
   Dark-olive theme patches — keep components legible on the
   dark background (buttons, nav glass, featured card, CTA,
   sticky pill, drawer). Sampled from elwoodmyotherapy.com.au.
   ============================================================ */
.btn-primary { background: var(--cream-200); color: var(--sage-900); }
.btn-primary:hover { background: #fff; color: var(--sage-900); box-shadow: var(--shadow-md); }
.btn-ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { background: rgba(219,227,183,.08); box-shadow: inset 0 0 0 1.5px rgba(219,227,183,.34); }
.logo-mark { background: var(--cream-200); color: var(--sage-900); }
.nav--scrolled { background: rgba(39,45,18,.88); box-shadow: 0 1px 0 var(--line-soft), 0 6px 24px rgba(0,0,0,.28); }
.nav-links > a:hover, .nav-drop-btn:hover { background: rgba(219,227,183,.1); color: #fff; }
.nav-menu a:hover { background: rgba(219,227,183,.08); color: #fff; }
.nav-burger span { background: var(--ink-soft); }
.price-card.featured { color: var(--sage-900); }
.price-card.featured .price-amt { color: var(--sage-900); }
.drawer-panel { background: var(--sage-800); }
.drawer-panel > a:not(.btn) { color: var(--ink); }
.drawer-panel > a:not(.btn):hover { background: rgba(219,227,183,.08); }
::selection { background: var(--cream-200); color: var(--sage-900); }

/* ============================================================
   Image placeholder treatment — removed; real photography now
   supplied via <img> elements.
   ============================================================ */