/* ==========================================================================
   BE. WELL. WITHIN. — Elise Kossivas Naturopathy
   Home page prototype · v1
   --------------------------------------------------------------------------
   Palette is locked to the six brand colours from Elise_Branding_Palette.pdf.
   --paper / --paper-hi are tints of Cream (not new brand colours) — they exist
   so the page reads "light and inviting" per Elise's brief, with Cream itself
   used as the alternating band colour.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Brand — locked */
  --cream:      #E9E3D3;
  --cocoa:      #4A3527;
  --clay:       #C08762;
  --taupe:      #7D6656;
  --beige:      #D6C2AC;
  --wine:       #85484C;

  /* Tints of cream, for air */
  --paper:      #F6F2E9;
  --paper-hi:   #FCFAF5;

  /* Ink */
  --ink:        var(--cocoa);
  --ink-70:     rgba(74, 53, 39, .88);
  --ink-55:     rgba(74, 53, 39, .70);
  --ink-40:     rgba(74, 53, 39, .52);
  --rule:       rgba(74, 53, 39, .14);
  --rule-soft:  rgba(74, 53, 39, .08);

  /* On dark */
  --on-dark:      #F2EADD;
  --on-dark-70:   rgba(242, 234, 221, .72);
  --on-dark-rule: rgba(233, 227, 211, .18);

  /* Type */
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:    "Karla", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --gutter:   clamp(1.25rem, 4vw, 3.25rem);
  --shell:    1240px;
  --shell-nr: 1080px;   /* narrow */
  --band:     clamp(4.5rem, 9vw, 8.5rem);

  /* Form */
  --r-lg: 30px;
  --r-md: 18px;
  --r-sm: 10px;
  --pill: 999px;

  --shadow-soft: 0 1px 2px rgba(74,53,39,.04), 0 12px 34px -18px rgba(74,53,39,.30);
  --shadow-lift: 0 2px 6px rgba(74,53,39,.06), 0 26px 60px -26px rgba(74,53,39,.42);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 2. Reset ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height: 1.68;
  font-weight: 400;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--clay); color: #fff; }

:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Paper grain — the whole page sits under a very faint tooth */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: .042;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. Primitives ------------------------------------------------ */

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--nr { max-width: var(--shell-nr); }

.band { padding-block: var(--band); position: relative; overflow: clip; }
.band--cream { background: var(--cream); }
.band--cocoa { background: var(--cocoa); color: var(--on-dark); }
.band--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.band--tucked { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Dapples are absolutely positioned at z-index 0, which in CSS paint order
   puts them *above* normal-flow text. Lift the content of every band so the
   bolder petals stay where they belong — behind it. */
.band > .shell { position: relative; z-index: 1; }

.eyebrow {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--taupe);
  margin: 0 0 1.35rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--clay);
  flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--plain::before { display: none; }
.band--cocoa .eyebrow { color: var(--clay); }

/* These can land on a <p> as well as a heading, so they carry the family
   themselves rather than relying on the h1–h4 rule. */
.display-1, .display-2, .display-3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.display-1 { font-size: clamp(2.85rem, 1.4rem + 5.6vw, 5.6rem); }
.display-2 { font-size: clamp(2.3rem, 1.5rem + 3vw, 3.6rem); }
.display-3 { font-size: clamp(1.65rem, 1.3rem + 1.3vw, 2.15rem); line-height: 1.16; }

/* Elise, 23 Sep: back to clay. She had asked for wine on 7 Sep and changed
   her mind. Capitals and italic stay. */
.gleam { font-style: italic; color: var(--clay); }
.band--cocoa .gleam { color: var(--beige); }

.lede {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.2rem);
  line-height: 1.62;
  color: var(--ink-70);
  max-width: 46ch;
}
.band--cocoa .lede { color: var(--on-dark-70); }

.hair { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* Buttons ---------------------------------------------------------------- */

.btn {
  --btn-bg: var(--clay);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out),
              background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn::after {                       /* light sweeps across on hover */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.30) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(192,135,98,.85); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--cocoa);
  border-color: var(--rule);
}
.btn--ghost:hover { background: rgba(74,53,39,.05); border-color: var(--ink-40); box-shadow: none; }

.btn--dark { --btn-bg: var(--cocoa); --btn-fg: var(--on-dark); }
.btn--dark:hover { box-shadow: 0 14px 28px -14px rgba(74,53,39,.7); }

.btn--onDark { --btn-bg: var(--cream); --btn-fg: var(--cocoa); }
.btn--beige {
  --btn-bg: var(--paper-hi);
  --btn-fg: var(--wine);
  border: 2px solid var(--wine);
  font-weight: 700;
}
.btn--beige:hover { background: var(--wine); color: #fff; box-shadow: none; }

/* "READ ALL FAQS (bit bolder brown outline if possible?)" */
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--cocoa);
  border-width: 2px;
  border-color: var(--cocoa);
  font-weight: 700;
}
.btn--outline:hover { background: var(--cocoa); color: var(--on-dark); box-shadow: none; }
.btn--sm { padding: .7rem 1.25rem; font-size: .72rem; }

/* Text link with a rule that draws itself */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wine);
  padding-bottom: .3rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .45s var(--ease-out), color .3s var(--ease);
}
.tlink:hover { background-size: 30% 100%; background-size: 0% 1px; color: var(--clay); }
.tlink svg { transition: transform .4s var(--ease-out); }
.tlink:hover svg { transform: translateX(4px); }

/* ---------- 4. Atmosphere: dappled leaf-light ---------------------------- */
/* The logo sits on a soft foliage shadow. That motif is the page's texture.  */

.dapple {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  color: var(--taupe);
  filter: blur(6px);
  opacity: .20;
  mix-blend-mode: multiply;
}
.dapple--tr { top: -10%; right: -6%; width: min(38vw, 460px); rotate: 12deg; }
.dapple--bl { bottom: -12%; left: -8%; width: min(34vw, 420px); rotate: -160deg; opacity: .17; }
.dapple--soft { filter: blur(11px); opacity: .12; }
/* Elise, 12 Oct: "can the petal detailing be a little bolder / more visible".
   Crisper and roughly twice the opacity of --soft, used on the FAQ sections
   and behind "What is Naturopathy?" where the background is otherwise plain. */
.dapple--bold { filter: blur(5px); opacity: .28; }
.dapple--bold.dapple--tr { width: min(44vw, 540px); }
.dapple--bold.dapple--bl { width: min(40vw, 500px); }

/* Photo placeholders — "plates". These are designed stand-ins, not grey boxes.
   Swap .plate__art for an <img> once the September shoot lands. */
.plate {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid rgba(74,53,39,.10);
  background: linear-gradient(155deg, var(--beige), var(--cream) 55%, var(--paper-hi));
  isolation: isolate;
}
.plate img { width: 100%; height: 100%; object-fit: cover; }

/* A real photo fills the frame, so the placeholder's wash, sprig and inner
   vignette are not wanted behind it. */
.plate--photo { background: var(--cream); }
.plate--photo::before { display: none; }
.plate--photo::after { opacity: .5; }

/* blurred foliage wash — reads as light falling through leaves */
.plate__wash {
  position: absolute;
  inset: -30%;
  width: 160%; height: 160%;
  color: var(--taupe);
  opacity: .17;
  filter: blur(5px);
  mix-blend-mode: multiply;
}
/* crisp hairline botanical sitting on top of the wash */
.plate__sprig {
  position: absolute;
  inset: 10% 0 6%;
  width: 100%; height: 84%;
  color: var(--cocoa);
  opacity: .26;
  z-index: 1;
}

/* soft vignette so a plate reads as a lit surface rather than a flat swatch */
.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(78% 62% at 32% 26%, transparent 40%, rgba(125,102,86,.20));
}
.plate::after {          /* light rake across the plate */
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(118deg, rgba(255,255,255,.42), transparent 42%);
  pointer-events: none;
}
.plate__tag {
  position: absolute;
  left: 1rem; bottom: 1rem;
  z-index: 3;
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-55);
  background: rgba(252,250,245,.82);
  backdrop-filter: blur(4px);
  padding: .4rem .7rem;
  border-radius: var(--pill);
}

/* ---------- 5. Announcement + navigation --------------------------------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 800;
  background: var(--cocoa);
  color: var(--on-dark);
  transition: box-shadow .4s var(--ease);
}
.nav.is-stuck { box-shadow: 0 14px 34px -22px rgba(74,53,39,.85); }
.nav .shell {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 76px;
}
body { padding-top: 76px; }   /* the nav is fixed, so reserve its height */

.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; margin-right: auto; }
.brand__mark { width: 42px; height: 42px; object-fit: contain; opacity: .95; flex: none; }
.brand__name {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--on-dark);
  line-height: 1;
  white-space: nowrap;
}

.nav__links { display: flex; align-items: center; gap: 1.9rem; }
.nav__links a {
  text-decoration: none;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .07em;
  color: var(--on-dark-70);
  position: relative;
  padding-block: .35rem;
  transition: color .3s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav__links a:hover { color: var(--on-dark); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__links a[aria-current="page"] { color: var(--on-dark); }

.nav__burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--on-dark-rule);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  place-items: center;
  position: relative;
}
.nav__burger span {
  position: absolute;
  width: 17px; height: 1px;
  background: var(--on-dark);
  transition: transform .4s var(--ease-out), opacity .3s var(--ease);
}
.nav__burger span:nth-child(1) { transform: translateY(-5px); }
.nav__burger span:nth-child(3) { transform: translateY(5px); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

/* ---------- 6. Hero panel ------------------------------------------------ */
/* Elise, 14 Aug: keep Layout 3's asymmetric hero, but sit it inside Layout 1's
   neutral box so it separates from the white background. */

.hero { position: relative; overflow: clip; }
.heroHome { padding-block: clamp(1.5rem, 3vw, 2.75rem) 0; }

.panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 82% 6%, rgba(214,194,172,.72), transparent 62%),
    radial-gradient(100% 80% at 10% 94%, rgba(192,135,98,.16), transparent 60%),
    linear-gradient(168deg, var(--paper-hi), var(--cream));
  padding: clamp(2.5rem, 5.5vw, 4.75rem) clamp(1.5rem, 4.5vw, 4rem);
  isolation: isolate;
}
.panel::before {                 /* inner hairline, like a mounted print */
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(74,53,39,.10);
  border-radius: calc(var(--r-lg) - 8px);
  pointer-events: none;
  z-index: 3;
}
.panel__in { position: relative; z-index: 2; max-width: 40ch; }
.panel--short { padding-block: clamp(2.25rem, 4.5vw, 3.75rem); }
.panel--short .display-1 { font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4.1rem); }

.heroHome__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.heroHome h1 { margin-bottom: 1.6rem; }
/* Two lines at desktop, matching the intended "Rooted in nature. / Guided by
   science." break rather than spilling to four. */
.heroHome .display-1 { font-size: clamp(2.5rem, 1rem + 4.1vw, 4.35rem); }
.heroHome__plate { min-height: 300px; }

.actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }

/* Inner-page header */
.pageHead { padding-block: clamp(1.5rem, 3vw, 2.75rem) 0; }
.pageHead .lede { margin-top: 1.3rem; }
/* A dark band starting flush against the panel crops its rounded corners.
   Keep a strip of paper between them. */
.pageHead + .band--cocoa,
.pageHead + .band--cream { margin-top: clamp(2.5rem, 5vw, 4rem); }


/* ---------- 7. Editorial intro ------------------------------------------- */
/* Sits BELOW the three tiles now, with the clay rule between them. */

.edIntro__rule {
  height: 2px;
  background: linear-gradient(90deg, var(--clay), rgba(192,135,98,0));
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.edIntro__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: start;
}
.edIntro__cols {
  columns: 2;
  column-gap: clamp(1.5rem, 3vw, 2.75rem);
  color: var(--ink-70);
}
.edIntro__cols p:first-child::first-letter {
  font-family: var(--display);
  float: left;
  font-size: 3.35em;
  line-height: .82;
  padding: .06em .12em 0 0;
  color: var(--clay);
}
.edIntro__side .display-3 { color: var(--cocoa); }


/* ---------- 8. Discipline tiles ------------------------------------------ */
/* Elise: keep the three coloured tiles and the hover movement, but they are not
   buttons — no link, no "Explore". Third tile is wine, not clay. */

.tiles__lead { justify-content: center; margin-bottom: 1.75rem; }
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  border-radius: var(--r-md);
  min-height: 232px;
  box-shadow: var(--shadow-soft);
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.tile::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(85% 65% at 88% -5%, rgba(255,255,255,.22), transparent 68%);
}
.tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }

.tile__icon { width: 54px; height: 54px; color: currentColor; opacity: .8; }
.tile h3 { font-size: 1.5rem; letter-spacing: -.005em; }
.tile p { font-size: .9375rem; line-height: 1.6; margin: 0; }

.tile:nth-child(1) { background: var(--beige); color: var(--cocoa); }
.tile:nth-child(2) { background: var(--taupe); color: var(--on-dark); }
.tile:nth-child(3) { background: var(--wine); color: var(--on-dark); }
.tile:nth-child(1) p { color: var(--ink-70); }
.tile:nth-child(2) p,
.tile:nth-child(3) p { color: rgba(255,255,255,.90); }


/* ---------- 9. "What is naturopathy" ------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.split--wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }

/* Elise's Meet Elise copy is now much longer than the photo beside it, which
   left a tall empty column. Pin the photo so it travels with the reading. */
.split--tall { align-items: start; }
@media (min-width: 901px) {
  .split--tall > .plate { position: sticky; top: 106px; }
}
.split__plate { aspect-ratio: 4 / 5; }

.statement {
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--cocoa);
  margin: 0 0 1.6rem;
}

.notecard {
  margin-top: 2.25rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-size: .9375rem;
  color: var(--ink-70);
  position: relative;
}
.notecard::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 34px; height: 1px;
  background: var(--clay);
}
.notecard strong {
  display: block;
  font-family: var(--sans);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: .55rem;
}

/* ---------- 10. "How I can help" — the line-drawn grid ------------------- */

.help__head { max-width: 56ch; margin: 0 auto clamp(3rem, 6vw, 4.75rem); text-align: center; }
.help__head .eyebrow { justify-content: center; }

.helpGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.25rem, 4.5vw, 4rem) clamp(1.75rem, 4vw, 3.5rem);
}
.helpItem { text-align: center; position: relative; }
.helpItem__glyph {
  width: 74px; height: 74px;
  margin: 0 auto 1.5rem;
  color: var(--taupe);
  transition: color .5s var(--ease), transform .7s var(--ease-out);
}
.helpItem:hover .helpItem__glyph { color: var(--clay); transform: rotate(9deg) scale(1.045); }
.helpItem h3 {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--cocoa);
  margin-bottom: .85rem;
  line-height: 1.4;
}
.helpItem p { font-size: .9375rem; line-height: 1.62; color: var(--ink-70); max-width: 34ch; margin-inline: auto; }

/* ---------- 11. Approach / why me ---------------------------------------- */

.reasons { display: grid; gap: 0; margin-top: .5rem; }
.reason {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.5rem, 3vw, 2.1rem) 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.reason:last-child { border-bottom: 1px solid var(--rule); }
.reason > * { transition: transform .55s var(--ease-out); }
.reason:hover > * { transform: translateX(8px); }
.reason__glyph {
  width: 34px; height: 34px;
  color: var(--taupe);
  margin-top: .25rem;
  transition: color .5s var(--ease), transform .7s var(--ease-out), translate .55s var(--ease-out);
}
.reason:hover .reason__glyph { color: var(--clay); transform: translateX(8px) rotate(-10deg); }
.reason h3 { font-size: 1.4rem; margin-bottom: .5rem; }
.reason p { font-size: .9375rem; color: var(--ink-70); margin: 0; max-width: 52ch; }

.approach__media { position: relative; }
.approach__plate { aspect-ratio: 3 / 4; }
.approach__stamp {
  position: absolute;
  right: -18px; bottom: -22px;
  width: clamp(112px, 15vw, 152px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  background: var(--paper-hi);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-soft);
  padding: 1rem;
  z-index: 4;
}
.approach__stamp span {
  font-family: var(--display);
  font-size: clamp(.95rem, 1.6vw, 1.15rem);
  line-height: 1.22;
  color: var(--cocoa);
}
.approach__stamp em { display: block; font-size: .5625rem; font-family: var(--sans); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); margin-top: .5rem; }

/* ---------- 12. How it works — the one dark band ------------------------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 4vw, 3.25rem); margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.step { position: relative; display: flex; flex-direction: column; padding-top: 1.6rem; border-top: 1px solid var(--on-dark-rule); }
.step__n {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--clay);
  letter-spacing: .01em;
}
.step h3 { font-size: 1.45rem; color: var(--on-dark); margin: .7rem 0 .6rem; }
.step p { font-size: .9375rem; color: var(--on-dark-70); margin: 0; }
.step__meta { display: block; font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--beige); margin-top: auto; padding-top: 1.4rem; font-weight: 600; }

.band--cocoa .dapple { color: #000; opacity: .30; mix-blend-mode: normal; }

/* ---------- 13. About ---------------------------------------------------- */

.about__plate { aspect-ratio: 4 / 5; }
.about__credentials {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 1.75rem 0 0;
  padding: 0; list-style: none;
}
.about__credentials li {
  font-size: .6875rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--taupe);
  border: 1px solid var(--rule);
  border-radius: var(--pill);
  padding: .45rem .95rem;
  background: var(--paper-hi);
}
/* Elise: "in same orange colour but bold and bigger font size to look like a
   quote of me speaking" */
.signature {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem);
  color: var(--clay);
  margin-top: 2rem;
  line-height: 1.15;
  max-width: 18ch;
}

/* ---------- 14. FAQ (image 2) -------------------------------------------- */

.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.faq__aside h2 { margin-bottom: 1.1rem; }
.faq__aside .lede { max-width: 30ch; margin-bottom: 2rem; }

.faqList { display: grid; gap: .7rem; }

.faqItem {
  border: 1.5px solid var(--wine);
  border-radius: var(--pill);
  background: transparent;
  overflow: hidden;
  transition: border-radius .45s var(--ease), background-color .45s var(--ease), border-color .45s var(--ease);
}
.faqItem.is-open { border-radius: var(--r-md); background: var(--paper-hi); }

.faqItem__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.02rem 1.6rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--wine);
  font-size: 1.0625rem;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .005em;
  transition: color .3s var(--ease);
}
.faqItem__btn:hover { color: var(--clay); }

.faqItem__sign { position: relative; width: 13px; height: 13px; flex: none; }
.faqItem__sign::before,
.faqItem__sign::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .45s var(--ease-out), opacity .35s var(--ease);
}
.faqItem__sign::before { width: 13px; height: 1px; }
.faqItem__sign::after  { width: 1px; height: 13px; }
.faqItem.is-open .faqItem__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faqItem__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease-out);
}
.faqItem.is-open .faqItem__body { grid-template-rows: 1fr; }
.faqItem__body > div { overflow: hidden; }
.faqItem__body p {
  padding: 0 1.7rem 1.35rem;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.66;
  color: var(--ink-70);
  max-width: 62ch;
}

/* ---------- 15. Closing CTA ---------------------------------------------- */

.closer {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4.5rem);
  background:
    radial-gradient(110% 130% at 88% 0%, rgba(192,135,98,.34), transparent 60%),
    linear-gradient(150deg, var(--cream), var(--beige));
  text-align: center;
  isolation: isolate;
}
.closer h2 { margin-bottom: 1.1rem; }
.closer .lede { margin-inline: auto; }
.closer__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 2.2rem; }
.closer__fine { margin-top: 1.6rem; font-size: .75rem; letter-spacing: .04em; color: var(--ink-55); }

/* ---------- 16. Footer --------------------------------------------------- */

.footer { background: var(--cocoa); color: var(--on-dark-70); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); }
.footer__mark { width: 108px; mix-blend-mode: screen; opacity: .82; margin-bottom: 1.4rem; filter: invert(1) brightness(1.8) contrast(.9); }
.footer h4 {
  font-family: var(--sans);
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--beige);
  font-weight: 700;
  margin: 0 0 1.15rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.footer a { text-decoration: none; transition: color .3s var(--ease); font-size: .9375rem; }
.footer a:hover { color: var(--beige); }
.footer__tag { font-family: var(--display); font-size: 1.5rem; color: var(--cream); font-style: italic; line-height: 1.35; max-width: 30ch; }
.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--on-dark-rule);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: .75rem;
  line-height: 1.6;
  color: rgba(242,234,221,.5);
}
.footer__legal { max-width: 62ch; }

/* ---------- 17. Floating furniture --------------------------------------- */

.floatBook {
  position: fixed;
  left: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 700;
  box-shadow: 0 18px 40px -18px rgba(74,53,39,.75);
  opacity: 0;
  transform: translateY(18px) scale(.96);
  pointer-events: none;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.floatBook.is-in { opacity: 1; transform: none; pointer-events: auto; }
.floatBook__pulse { position: relative; display: inline-flex; width: 7px; height: 7px; }
.floatBook__pulse i {
  position: absolute; inset: 0; border-radius: 50%; background: #fff;
}
.floatBook__pulse i:first-child { animation: pulse 2.4s var(--ease-out) infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .8 } 70%,100% { transform: scale(3.4); opacity: 0 } }

.chatIg {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 700;
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity .5s var(--ease-out) .1s, transform .5s var(--ease-out) .1s;
}
.chatIg.is-in { opacity: 1; transform: none; pointer-events: auto; }
.chatIg__label {
  background: var(--paper-hi);
  border: 1px solid var(--rule);
  color: var(--cocoa);
  border-radius: var(--r-md);
  padding: .68rem 1rem;
  font-size: .8125rem;
  line-height: 1.35;
  font-weight: 500;
  max-width: 16ch;
  box-shadow: var(--shadow-soft);
  transition: transform .45s var(--ease-out);
}
.chatIg:hover .chatIg__label { transform: translateX(-4px); }
.chatIg__badge {
  width: 52px; height: 52px;
  border-radius: 17px;
  display: grid; place-items: center;
  color: #fff;
  flex: none;
  background:
    radial-gradient(120% 120% at 28% 108%, #FDD05B 0%, #E4713B 26%, #C9366B 52%, #A32C8E 74%, #6A38C2 100%);
  box-shadow: 0 14px 30px -12px rgba(163,44,142,.7);
  transition: transform .5s var(--ease-out);
}
.chatIg:hover .chatIg__badge { transform: scale(1.06) rotate(-4deg); }
.chatIg__badge svg { width: 26px; height: 26px; }

/* ---------- 20. Reveal on scroll ----------------------------------------- */

/* The reveal animates `translate`, NOT `transform`.
   `transform` is what hover states use, and `.reveal.is-in { transform: none }`
   has the same specificity as `.tile:hover` while appearing later in the file,
   so it silently won and the hover lift never moved. `translate` is an
   independent property, so the two compose instead of fighting. */
/* Scoped to .js on purpose. The reveal is JS-driven, so if the script never
   runs these elements would stay at opacity 0 forever - 24 of them on the home
   page alone, which is most of it. The inline script in <head> adds .js before
   first paint, so there is no flash; with JS off the content is simply there. */
.js .reveal {
  opacity: 0;
  translate: 0 20px;
  transition: opacity .9s var(--ease-out), translate .9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-in { opacity: 1; translate: none; }

/* .reveal declares its own transition, which was overriding the tile's faster
   hover transition and dropping box-shadow from it entirely. Elise called out
   the tile hover specifically, so hand control back once the reveal is done. */
.tile.reveal.is-in {
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.svc.reveal.is-in {
  transition: background-color .45s var(--ease), transform .55s var(--ease-out);
}

/* Hero entrance — orchestrated, runs once on load */
.enter > * { animation: rise .95s var(--ease-out) both; }
.enter > *:nth-child(1) { animation-delay: .05s; }
.enter > *:nth-child(2) { animation-delay: .16s; }
.enter > *:nth-child(3) { animation-delay: .27s; }
.enter > *:nth-child(4) { animation-delay: .38s; }
.enter > *:nth-child(5) { animation-delay: .49s; }
.enter > *:nth-child(6) { animation-delay: .60s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---------- 21. Responsive ----------------------------------------------- */

@media (max-width: 1080px) {
  .helpGrid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--cocoa);
    border-bottom: 1px solid var(--on-dark-rule);
    padding: .5rem var(--gutter) 1.5rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .35s var(--ease), transform .45s var(--ease-out), visibility 0s linear .45s;
    box-shadow: 0 24px 40px -30px rgba(74,53,39,.7);
  }
  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity .35s var(--ease), transform .45s var(--ease-out), visibility 0s;
  }
  .nav__links a { width: 100%; padding: .95rem 0; border-bottom: 1px solid var(--on-dark-rule); font-size: 1.05rem; color: var(--on-dark); }
  .nav__links a:last-child { border-bottom: 0; }
  /* the header CTA is hidden on small screens, so give the menu its own */
  .nav__links::after { content: ""; display: block; height: .25rem; }
  .nav__burger { display: grid; }
  .nav .btn { display: none; }

  .heroEd__grid, .edIntro__grid, .split, .split--wide, .faq__grid {
    grid-template-columns: 1fr;
  }
  .edIntro__cols { columns: 1; }
  .tiles { grid-template-columns: 1fr; }
  [data-layout="b"] .tile { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  [data-layout="b"] .tile:first-child { border-top: 0; }
  .steps { grid-template-columns: 1fr; gap: 2.5rem; }
  .heroEd__plate { aspect-ratio: 5 / 4; min-height: 0; }
  .approach__stamp { right: 8px; bottom: -28px; }
  .split--flip > *:first-child { order: 2; }
}

@media (max-width: 620px) {
  .helpGrid { grid-template-columns: 1fr; gap: 2.75rem; }
  .footer__top { grid-template-columns: 1fr; }
  .reason { grid-template-columns: 1fr; gap: .4rem; }
  .chatIg__label { display: none; }
  .review__tag { display: none; }
  .review__in { justify-content: center; }
  .heroOpen__panel::before { inset: 8px; }
  .ticker .shell { min-height: 34px; font-size: .5625rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; translate: none; }
}

/* ---------- 22. Print ---------------------------------------------------- */
@media print {
  .review, .floatBook, .chatIg, .nav { display: none !important; }
  body::after { display: none; }
}

/* ---------- 21. Services, chips and utilities ---------------------------- */

.sectionHead { max-width: 56ch; margin: 0 auto clamp(3rem, 6vw, 4.5rem); text-align: center; }
.sectionHead--left { margin-inline: 0; text-align: left; max-width: 46ch; }
.sectionHead .lede { margin-inline: auto; }
.sectionHead--left .lede { margin-inline: 0; }

.svcGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
/* Elise, 12 Oct: back to how they were before 23 Sep — the boxes sit on the
   brown band as hairline outlines with the band showing through, matching the
   "Three steps" band she pointed at. Her 7 Sep ask for bold capitalised
   appointment titles still stands, so only the colours revert. */
.svc {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: clamp(1.6rem, 2.6vw, 2.25rem);
  border-radius: var(--r-md);
  border: 1px solid var(--on-dark-rule);
  background: rgba(242,234,221,.05);
  transition: background-color .45s var(--ease), transform .55s var(--ease-out);
}
.svc:hover { background: rgba(242,234,221,.09); transform: translateY(-4px); }
.svc__head { display: flex; flex-direction: column; gap: .45rem; }
.svc h3 {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--on-dark);
}
.svc__meta {
  font-size: .625rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--clay);
}
.svc p { font-size: .9375rem; color: var(--on-dark-70); margin: 0; }
.svc__note {
  font-size: .8125rem !important;
  font-style: italic;
  color: var(--on-dark-70) !important;
  border-top: 1px solid var(--on-dark-rule);
  padding-top: .8rem;
}
/* 19. Elise: "All boxes to be same size or close to" */
.svcGrid { grid-auto-rows: 1fr; }
.svc__body { flex: 1; }
.svc .btn { align-self: flex-start; margin-top: auto; }
.svc .btn--ghost { --btn-fg: var(--on-dark); border-color: var(--on-dark-rule); }
.svc .btn--ghost:hover { background: rgba(242,234,221,.12); border-color: var(--beige); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.chips li {
  font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 600; color: var(--taupe);
  border: 1px solid var(--rule); border-radius: var(--pill);
  padding: .45rem .95rem; background: var(--paper-hi);
}
/* Elise, 12 Oct: "the wine coloured tiles are okay - I like them!"
   Then 16 Oct: invert them, so the wine is only the outline and the writing and
   the fill is cream - "exactly how the brown version was but with the wine
   colour outline instead of the brown". On the homepage the band behind them is
   already cream, so they read as genuinely hollow; on Meet Elise the band is
   paper, so the cream fill shows as a faint warm tint. Her words were explicit
   about cream, so cream it is on both. */
.chips--wine li {
  background: var(--cream);
  border-color: var(--wine);
  color: var(--wine);
}
.reasons--wide .reason { grid-template-columns: 3.5rem 1fr; }

.faqList--full { max-width: 900px; margin-inline: auto; }

.svcNotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1px solid var(--on-dark-rule);
}
.svcNotes p {
  margin: 0;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--on-dark-70);
}
@media (max-width: 780px) {
  .svcNotes { grid-template-columns: 1fr; gap: 1rem; }
}

.fineprint {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--ink-55);
  max-width: 70ch;
}
.fineprint a { color: var(--wine); }

.tlink--onDark { color: var(--beige); }
.tlink--onDark:hover { color: var(--clay); }

.center { text-align: center; }
.center-block { margin-inline: auto; }
.mt { margin-top: 1.75rem; }
.mt-lg { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.mb { margin-bottom: 2.5rem; }

/* Elise: footer mark is now the plant sprig, not the circular logo */
.footer__mark {
  color: var(--beige);
  opacity: .85;
  margin-bottom: 1.6rem;
  width: 64px;
  height: auto;
}
.footer__mark use { stroke-width: 1.6; }
.footer__plain { color: var(--on-dark-70); font-size: .9375rem; }
.footer__tag span {
  display: block;
  font-size: .8rem; font-style: normal;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark-70); margin-top: .6rem;
}
.footer__bottom p { margin: 0; }

@media (max-width: 900px) {
  .svcGrid { grid-template-columns: 1fr; }
  .heroHome__grid { grid-template-columns: 1fr; }
  .heroHome__plate { aspect-ratio: 5 / 4 !important; min-height: 0; }
  .panel__in { max-width: none; }
}


/* ---------- 22. Pull-quotes and prose ------------------------------------ */
/* Elise on the green text: "can this be in quotation marks, the orange colour
   from the palette and maybe larger/bolder so it looks like im speaking these
   as quotes? And to give the page a bit more dimension". */

.prose { max-width: 74ch; margin: clamp(2.5rem, 5vw, 4rem) auto 0; }
.prose > p { color: var(--ink-70); }

.pullquote {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem);
  line-height: 1.22;
  color: var(--clay);
  margin: clamp(2rem, 4vw, 3rem) 0;
  text-wrap: balance;
}


/* ---------- 23. Round-3 layouts (Elise, 23 Sep 2026) --------------------- */

/* Meet Elise: story left, the two closing paragraphs right, image and chips
   beneath the story. Explicit grid placement so the source order still reads
   correctly when it stacks on mobile: story, aside, image, chips. */
.meetSplit {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
/* Elise, 3 Oct: portrait top right beside the opening text; the closing
   paragraphs stay bottom right but sit a little lower; second image bottom
   left, above the tiles. Source order is story / portrait / aside / media so
   the mobile stack still reads in narrative order. */
.meetSplit__story    { grid-column: 1; grid-row: 1; }
.meetSplit__portrait { grid-column: 2; grid-row: 1; margin: 0; }
.meetSplit__aside    { grid-column: 2; grid-row: 2; padding-top: clamp(1.5rem, 4vw, 3.25rem); }
.meetSplit__media    { grid-column: 1; grid-row: 2; }
.meetSplit__aside p { color: var(--ink-70); }
.meetSplit__media .chips { margin-top: 1.5rem; }

@media (max-width: 900px) {
  .meetSplit { grid-template-columns: 1fr; }
  .meetSplit__story,
  .meetSplit__portrait,
  .meetSplit__aside,
  .meetSplit__media { grid-column: 1; grid-row: auto; align-self: auto; padding-top: 0; }
}

/* Elise: "move the quote from the left to the middle of the page" */
.signature--centre {
  text-align: center;
  max-width: none;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
}

/* Naturopathy preview, added back to the homepage at her request */
.natPreview {
  max-width: 70ch;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.natPreview .statement { margin-top: 1.6rem; }
.natPreview > p:last-child { color: var(--ink-70); }

/* FAQs page in two columns of five, with a gap down the middle.
   Two independent stacks, not one grid, so a two-line question cannot leave a
   gap in the opposite column. */
.faqList--two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.faqCol { display: grid; gap: .7rem; align-content: start; }
@media (max-width: 860px) {
  .faqList--two { grid-template-columns: 1fr; gap: .7rem; }
}

/* The approach lede is the heading on the homepage now that
   "Holism, Health & Healing" has been removed there */
.approachLede { color: var(--cocoa); }