/* =====================================================================
   ELM Aesthetics — Editorial layout (preview, Oct 2026)
   Split heroes, photographic bands, intro-left sections. Loads after
   styles.css and only styles .ed-* classes, so the existing pages are
   untouched unless they opt in.
   ===================================================================== */

:root { --ed-gutter: clamp(22px, 5vw, 72px); }

/* ---------- Eyebrow with trailing rule ---------- */
.ed-eyebrow {
  display: inline-flex; align-items: center; gap: 18px;
  font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 22px;
}
.ed-eyebrow::after { content: ""; width: 64px; height: 1px; background: var(--gold); opacity: .8; }
.ed-eyebrow.on-light { color: var(--gold-deep); }
.ed-eyebrow.on-light::after { background: var(--gold-deep); }

/* hero tagline: small caps + italic display, as one line */
.ed-tagline { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; color: var(--gold); }
.ed-tagline .caps { font-family: var(--font-body); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; }
.ed-tagline .it   { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--gold-light); }
.ed-tagline::after { content: ""; width: 56px; height: 1px; background: var(--gold); opacity: .8; align-self: center; }

/* ---------- Hero: text leads, photograph floats right ----------
   Each plate is 1600x1000 with its own left, top and bottom edges already faded to
   --teal-deep, so it sits on the teal hero with no visible edge. It is sized by width
   (a share of the viewport) rather than stretched to the hero, so the image never
   grows into the text column and stays proportionate on wide screens. */
.ed-hero {
  position: relative; overflow: hidden;
  background: var(--teal-deep); color: var(--cream);
  min-height: clamp(560px, 84vh, 780px);
  display: grid; grid-template-columns: minmax(0, 58%) minmax(0, 42%);
  padding: 104px 0 0;          /* overrides the generic section padding */
}
.ed-hero-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ed-hero-media picture { display: contents; }
.ed-hero-media img {
  position: absolute; right: 0; top: calc(50% + 52px); transform: translateY(-50%);
  width: 54vw; max-width: 1200px; height: auto; display: block;
}
/* Text starts on the same line as the page content below (container edge) and may use the full 58% column */
.ed-hero-text { position: relative; z-index: 2; padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 48px) clamp(36px, 4vw, 52px) max(var(--ed-gutter), calc((100vw - var(--container)) / 2 + 24px)); align-self: center; max-width: none; }
.ed-hero-text > * { max-width: 760px; }
.ed-hero-text h1 {
  font-family: var(--font-display); font-weight: 300; line-height: 1.04; letter-spacing: -0.005em;
  font-size: clamp(2.5rem, 4.6vw, 4.4rem); color: var(--cream); margin: 0 0 26px;
  text-wrap: balance;
}
.ed-hero-text h1 em { font-style: italic; color: var(--gold); }
.ed-hero-text .ed-lede { font-family: var(--font-body); font-size: clamp(1rem, 1.25vw, 1.16rem); line-height: 1.72; color: rgba(245,239,231,.9); max-width: 640px; margin: 0 0 32px; }
.ed-hero-text .ed-lede em { font-style: normal; color: var(--gold-light); }
.ed-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; }

/* inner pages: shorter, and the photograph a little smaller still */
.ed-hero.ed-hero-page { min-height: clamp(500px, 66vh, 640px); }
.ed-hero.ed-hero-page .ed-hero-media img { width: 48vw; }
.ed-hero.ed-hero-page h1 { font-size: clamp(2.3rem, 3.9vw, 3.4rem); }
.ed-hero.ed-hero-page h1 em { display: inline; }   /* build 193: was block — forced a second line; now wraps only when it must, as on the live site */

/* About: a framed portrait instead of a full-bleed plate */
.ed-hero.ed-hero-portrait {
  background: radial-gradient(ellipse 45% 70% at 78% 55%, rgba(201,140,70,.16) 0%, transparent 70%), var(--teal-deep);
  grid-template-columns: minmax(0, 56%) minmax(0, 44%);
  padding-bottom: 36px;
}
.ed-hero-frame { position: relative; z-index: 2; align-self: center; justify-self: center; width: min(360px, 27vw); margin: 52px 0 92px; }
.ed-hero-frame::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid rgba(224,185,138,.5); z-index: -1; }
.ed-hero-frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 16%; box-shadow: 0 30px 70px rgba(0,0,0,.4); }
.ed-hero-frame figcaption { position: absolute; left: 0; right: 0; bottom: -66px; text-align: left; font-family: var(--font-body); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.ed-hero-frame figcaption span { display: block; font-family: var(--font-display); font-style: italic; text-transform: none; letter-spacing: .01em; font-size: 1.15rem; color: var(--cream); margin-bottom: 4px; }

/* trust row under the hero text */
.ed-trust { display: flex; flex-wrap: wrap; gap: 12px 30px; padding-top: 22px; border-top: 1px solid rgba(224,185,138,.22); }
.ed-trust-item { display: flex; align-items: center; gap: 12px; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5; color: rgba(245,239,231,.9); }
.ed-trust-item svg { width: 30px; height: 30px; flex: 0 0 30px; color: var(--gold); }

/* ---------- Section scaffolding: intro left, content right ---------- */
.ed-section { padding: clamp(64px, 8vw, 110px) 0; }
.ed-section .container { padding-left: var(--ed-gutter); padding-right: var(--ed-gutter); }
.ed-split { display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.ed-intro h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.1; margin: 0 0 18px; }
.ed-intro p  { color: var(--muted); line-height: 1.75; margin: 0 0 22px; }
.section-dark .ed-intro p { color: rgba(245,239,231,.8); }
.section-dark .ed-intro h2 { color: var(--cream); }
.ed-textlink { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.ed-textlink::after { content: "→"; font-size: 0.9rem; }
.section-dark .ed-textlink { color: var(--gold); }

/* ---------- Image cards ---------- */
.ed-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (min-width: 1200px) { .ed-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.ed-card { display: block; background: var(--ivory); color: inherit; text-decoration: none; border: 1px solid rgba(15,44,46,.07); transition: transform .35s ease, box-shadow .35s ease; }
.ed-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,44,46,.14); }
.ed-card-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--teal-deep); }
.ed-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.ed-card:hover .ed-card-img img { transform: scale(1.04); }
.ed-card-body { padding: 20px 20px 22px; }
.ed-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.22rem; line-height: 1.2; margin: 0 0 8px; color: var(--teal-deep); }
.ed-card p  { font-size: 0.86rem; line-height: 1.6; color: var(--muted); margin: 0 0 12px; }
.ed-card .ed-card-price { display: block; font-family: var(--font-display); font-style: italic; color: var(--gold-deep); font-size: 1rem; margin-bottom: 10px; }
.ed-card .ed-arrow { color: var(--gold-deep); font-size: 1.1rem; }
.section-dark .ed-card { background: var(--ivory); }

/* ---------- Founder band ---------- */
.ed-founder { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr) minmax(0, 18%); min-height: 560px; }
.ed-founder-photo { position: relative; background: var(--teal-deep); }
.ed-founder-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.ed-founder-text { background: var(--ivory); padding: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 64px); align-self: center; }
.ed-founder-text h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.12; margin: 0 0 20px; }
.ed-founder-text p  { color: var(--muted); line-height: 1.75; font-size: 0.97rem; }
.ed-founder-text .signature { font-family: var(--font-display); font-style: italic; color: var(--gold-deep); font-size: 1.3rem; margin: 18px 0 26px; }
.ed-founder-quote { position: relative; background: var(--teal-deep); color: var(--cream); display: flex; align-items: flex-end; padding: 32px 26px 40px; overflow: hidden; }
.ed-founder-quote img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; opacity: .7; }
.ed-founder-quote::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,44,46,.05) 0%, rgba(15,44,46,.6) 40%, rgba(15,44,46,.9) 100%); }
.ed-founder-quote blockquote { position: relative; color: var(--cream); margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; line-height: 1.45; }
.ed-founder-quote cite { display: block; font-style: normal; font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-top: 18px; }

/* ---------- Ethos columns ---------- */
.ed-ethos { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; }
.ed-ethos-item { padding: 8px 26px 8px 0; margin-right: 26px; border-right: 1px solid rgba(15,44,46,.1); }
.ed-ethos-item:last-child { border-right: 0; margin-right: 0; }
.ed-ethos-item svg { width: 40px; height: 40px; color: var(--gold-deep); margin-bottom: 18px; }
.ed-ethos-item h3 { font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 12px; }
.ed-ethos-item p  { font-size: 0.92rem; line-height: 1.7; color: var(--muted); margin: 0; }

/* ---------- Testimonial cards ---------- */
.ed-quotes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.ed-quote { background: var(--ivory); border: 1px solid rgba(15,44,46,.08); padding: 30px 28px 26px; }
.ed-quote .stars { color: var(--gold-deep); letter-spacing: .14em; font-size: .8rem; margin-bottom: 16px; }
.ed-quote p { font-family: var(--font-display); font-style: italic; font-size: 1.08rem; line-height: 1.5; color: var(--teal-deep); margin: 0 0 18px; }
.ed-quote cite { font-style: normal; font-family: var(--font-body); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); }

/* ---------- Results strip ---------- */
.ed-results { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr) minmax(0, 150px); gap: clamp(28px, 4vw, 60px); align-items: center; }
.ed-results-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.ed-results-strip a { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--teal-rich); }
.ed-results-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-results-strip .lbl { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cream); background: linear-gradient(0deg, rgba(15,44,46,.85), transparent); }
.ed-results-words { font-family: var(--font-body); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; line-height: 2.6; color: var(--cream); }

/* ---------- Photographic CTA band ---------- */
.ed-cta-band { position: relative; color: var(--cream); text-align: center; padding: clamp(72px, 9vw, 120px) var(--ed-gutter); overflow: hidden; background: var(--teal-deep); }
.ed-cta-band img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .9; }
.ed-cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 75% at 50% 50%, rgba(15,44,46,.72) 0%, rgba(15,44,46,.35) 70%, rgba(15,44,46,.2) 100%); }
.ed-cta-band .inner { position: relative; max-width: 720px; margin: 0 auto; }
.ed-cta-band h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3rem); margin: 0 0 16px; color: var(--cream); }
.ed-cta-band h2 em { font-style: italic; color: var(--gold); }
.ed-cta-band p { color: rgba(245,239,231,.88); line-height: 1.7; max-width: 560px; margin: 0 auto 32px; }
.ed-cta-band .actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }


/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1100px) {
  .ed-ethos { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 36px; }
  .ed-ethos-item:nth-child(2) { border-right: 0; }
  .ed-founder { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
  .ed-founder-quote { grid-column: 1 / -1; min-height: 220px; }
  .ed-results { grid-template-columns: 1fr; }
  .ed-results-words { display: none; }
}
@media (max-width: 900px) {
  .ed-hero, .ed-hero.ed-hero-page, .ed-hero.ed-hero-portrait { grid-template-columns: 1fr; padding: 96px 0 0; min-height: 0; }
  .ed-hero-media { position: relative; height: 68vw; min-height: 250px; order: -1; }
  .ed-hero-media img, .ed-hero.ed-hero-page .ed-hero-media img { position: absolute; inset: 0; top: 0; transform: none; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 78% 50%; }
  .ed-hero-frame { order: -1; width: min(300px, 72vw); margin: 34px auto 90px; }
  .ed-hero-text { padding: 26px 22px 44px; }
  .ed-tagline { flex-wrap: wrap; gap: 8px 12px; }
  .ed-tagline .caps { white-space: nowrap; }
  .ed-tagline .it { white-space: nowrap; }
  .ed-tagline::after { display: none; }
  .ed-split { grid-template-columns: 1fr; gap: 28px; }
  .ed-quotes { grid-template-columns: 1fr; }
  .ed-founder { grid-template-columns: 1fr; }
  .ed-founder-photo { height: 110vw; max-height: 520px; }
  .ed-results-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ed-trust { gap: 12px 22px; }
}
@media (max-width: 600px) {
  .ed-cards { grid-template-columns: 1fr; }
  .ed-ethos { grid-template-columns: 1fr; }
  .ed-ethos-item { border-right: 0; margin-right: 0; padding-right: 0; }
}

/* ---------- Split CTA band: image right, teal left (Journal) ---------- */
.ed-cta-band.ed-cta-split { text-align: left; }
.ed-cta-band.ed-cta-split img { opacity: 1; object-position: 100% 50%; }
.ed-cta-band.ed-cta-split::before { background: none; }
.ed-cta-band.ed-cta-split .inner { margin: 0; max-width: 560px; }
.ed-cta-band.ed-cta-split p { margin-left: 0; }
.ed-cta-band.ed-cta-split .actions { justify-content: flex-start; }

/* ---------- About: quote panel in place of the duplicate portrait ---------- */
.about-quote-panel { position: relative; background: var(--teal-deep); }
.about-quote-panel img { object-position: 78% 50% !important; }
.about-quote-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,44,46,0) 30%, rgba(15,44,46,.82) 78%, rgba(15,44,46,.92) 100%); }
.about-quote-panel blockquote { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 0 clamp(26px, 3vw, 44px) clamp(30px, 3vw, 46px); font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.4; color: var(--cream); }
.about-quote-panel blockquote::before { content: ""; display: block; width: 48px; height: 1px; background: var(--gold); margin-bottom: 20px; }
.about-quote-panel cite { display: block; margin-top: 16px; font-style: normal; font-family: var(--font-body); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }


/* =====================================================================
   Home page rhythm (build 159): sections alternate dark / light so no two
   neighbouring bands share a background.
   hero (teal) / Autumn (ivory) / Founder (teal) / Treatments (cream) /
   Ethos (teal) / Testimonials + Results (ivory, one block) / CTA (teal)
   ===================================================================== */
/* Founder band on teal */
.ed-founder { background: var(--teal-rich); }
.ed-founder-text { background: var(--teal-rich); color: var(--cream); }
.ed-founder-text h2 { color: var(--cream); }
.ed-founder-text p { color: rgba(245,239,231,.82); }
.ed-founder-text .signature { color: var(--gold); }
.ed-founder-quote { border-left: 1px solid rgba(224,185,138,.18); }

/* Treatments on cream: cards lift off the background */
.section-cream .ed-card { background: #fff; border-color: rgba(15,44,46,.06); box-shadow: 0 10px 28px rgba(15,44,46,.07); }

/* Ethos on teal */
.section-dark .ed-intro h2 { color: var(--cream); }
.section-dark .ed-ethos-item { border-right-color: rgba(224,185,138,.2); }
.section-dark .ed-ethos-item svg,
.section-dark .ed-ethos-item h3 { color: var(--gold); }
.section-dark .ed-ethos-item p { color: rgba(245,239,231,.8); }

/* Testimonials + Results read as one light section, divided by a gold hairline */
.ed-section-lead { padding-bottom: clamp(40px, 5vw, 64px); }
.ed-section-joined { padding-top: 0; }
.ed-section-joined .ed-results { border-top: 1px solid rgba(138,101,65,.28); padding-top: clamp(44px, 5vw, 68px); }
.ed-section-joined .ed-intro h2 { color: var(--teal-deep); }
.ed-section-joined .ed-results-words { color: var(--teal-deep); }
.ed-section-joined .ed-textlink { color: var(--gold-deep); }

/* A fine gold rule where the closing band meets the footer */
.site-footer { border-top: 1px solid rgba(224,185,138,.22); }

/* =====================================================================
   Journal index: photo covers (build 160)
   ===================================================================== */
.journal-card-cover.has-photo { background: var(--teal-deep); overflow: hidden; }
.journal-card-cover.has-photo picture { display: contents; }
.journal-card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.journal-card:hover .journal-card-photo { transform: scale(1.04); }
.journal-card-cover.has-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,44,46,.62) 0%, rgba(15,44,46,0) 34%, rgba(15,44,46,0) 72%, rgba(15,44,46,.3) 100%); }
.journal-card-cover.has-photo::after { z-index: 2; }
.journal-card-cover.has-photo .journal-card-cat { z-index: 3; }
.journal-card-cover.has-photo .journal-card-emblem { display: none; }

/* Book page: deposit note and search sit left-aligned inside the editorial hero */
.ed-hero.bk-hero .bk-deposit { margin: 0 0 22px; }
.ed-hero.bk-hero .bk-search { margin-left: 0; margin-right: 0; max-width: 560px; }

/* =====================================================================
   Hero image framing (build 161)
   The plate is always shown whole: it sits below the 104px header and is
   scaled to fit the space left (object-fit: contain), so nothing is ever
   cropped top or bottom on short or very wide screens. The plate's own
   edges are teal, so any spare space simply reads as background.
   ===================================================================== */
.ed-hero-media img {
  top: 104px; bottom: 0; right: 0; transform: none;
  height: calc(100% - 104px); width: 54vw; max-width: none;
  object-fit: contain; object-position: 100% 50%;
}
.ed-hero.ed-hero-page .ed-hero-media img { width: 48vw; }
@media (max-width: 900px) {
  /* Strip has exactly the plate's 5:4 proportions, so the whole plate shows */
  .ed-hero-media { height: 80vw; min-height: 0; }
  .ed-hero-media img, .ed-hero.ed-hero-page .ed-hero-media img {
    inset: 0; top: 0; height: 100%; width: 100%; object-fit: cover; object-position: 100% 50%;
  }
}


/* =====================================================================
   Home section layout (build 162): intro becomes a header row on desktop
   so cards, why-choose columns, quotes and results use the full width.
   ===================================================================== */
@media (min-width: 901px) {
  .ed-split { grid-template-columns: 1fr; gap: clamp(36px, 4vw, 52px); }
  .ed-intro, .ed-results > .ed-intro {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "eb eb" "h p" "h a";
    column-gap: clamp(40px, 6vw, 96px); align-items: end;
  }
  .ed-intro > .ed-eyebrow { grid-area: eb; margin-bottom: 18px; }
  .ed-intro > h2 { grid-area: h; margin: 0; align-self: end; }
  .ed-intro > p { grid-area: p; margin: 0 0 18px; max-width: 520px; }
  .ed-intro > a { grid-area: a; justify-self: start; align-self: start; }
  .ed-intro h2 br { display: none; }
  .ed-intro h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); }
  /* Results: header row, then a full-width strip */
  .ed-results { grid-template-columns: 1fr; gap: clamp(36px, 4vw, 52px); }
  .ed-results-words { display: none; }
}
/* Cards: larger, with type to match */
.ed-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (min-width: 1000px) { .ed-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
@media (max-width: 560px) { .ed-cards { grid-template-columns: 1fr; } }
.ed-card-body { padding: 24px 24px 26px; }
.ed-card h3 { font-size: clamp(1.25rem, 1.6vw, 1.45rem); }
.ed-card p { font-size: .92rem; }
/* Results strip: bigger tiles and labels */
.ed-results-strip { gap: 16px; }
.ed-results-strip .lbl { font-size: .66rem; padding: 12px 14px; }
@media (max-width: 560px) { .ed-results-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Why-choose columns get room for the longer headings */
.ed-ethos-item h3 { line-height: 1.6; }

.ed-intro h2, .ed-founder-text h2 { text-wrap: balance; }

/* =====================================================================
   Portrait offset frames (build 163) — one consistent, clearly deliberate
   treatment for Melody (About hero, on teal) and Georgia (team block, on cream)
   ===================================================================== */
/* Melody — bolder offset, caption moved clear of the frame */
.ed-hero-frame { margin: 52px 28px 124px 0; isolation: isolate; }
.ed-hero-frame::before { inset: 28px -28px -28px 28px; border: 1px solid rgba(224,185,138,.75); }
.ed-hero-frame figcaption { bottom: -96px; }

/* Georgia — same device, deep gold for the light background */
.team-portrait { overflow: visible; border: 0; border-radius: 0; background: none; isolation: isolate; margin: 0 24px 24px 0; }
.team-portrait::before { content: ""; position: absolute; inset: 24px -24px -24px 24px; border: 1px solid rgba(138,101,65,.6); z-index: -1; pointer-events: none; }
.team-portrait img { box-shadow: 0 24px 50px rgba(15,44,46,.18); }

@media (max-width: 900px) {
  .ed-hero-frame { margin: 34px auto 118px; }
  .ed-hero-frame::before { inset: 20px -20px -20px 20px; }
  .ed-hero-frame figcaption { bottom: -84px; }
}
@media (max-width: 860px) {
  .team-portrait { margin: 0 auto 24px; }
  .team-portrait::before { inset: 18px -18px -18px 18px; }
}

/* Treatment pages: several "Read more" links stack neatly (build 164) */
.tp-related a { display: block; margin-top: 6px; }
.team-more { margin-top: 22px; }

/* ---- Home: testimonials + real results on brand cream (build 167) ---- */
.home-cream { background: var(--cream); }          /* #F5EFE7 — warmer than ivory; lets the ivory quote cards read as cards */
.home-cream .ed-quote { background: var(--ivory); border-color: rgba(15,44,46,.07); box-shadow: 0 1px 2px rgba(15,44,46,.03), 0 8px 24px -16px rgba(15,44,46,.18); }

/* ---- Home founder photo: show the whole portrait incl. the ELM logo on Melody's tunic (build 168) ---- */
.ed-founder { grid-template-columns: minmax(0, min(40%, 620px)) minmax(0, 1fr) minmax(0, 18%); }
.ed-founder-photo { aspect-ratio: 1086 / 1448; align-self: stretch; }
.ed-founder-photo img { object-position: 50% 30%; }
@media (max-width: 1100px) {
  .ed-founder { grid-template-columns: minmax(0, min(46%, 560px)) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ed-founder { grid-template-columns: 1fr; }
  .ed-founder-photo { height: auto; max-height: none; aspect-ratio: auto; }
  .ed-founder-photo img { position: relative; inset: auto; display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; object-fit: initial; }
}

/* ---- Home hero trust row: five points, 3 over 2 with the bottom pair centred (build 170) ---- */
.ed-trust { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 26px; row-gap: 0; max-width: 700px; }
.ed-trust-item { flex: 0 0 auto; margin: 8px 0; }
.ed-trust-item:nth-child(-n+3) { flex: 1 1 0; min-width: 0; justify-content: center; }   /* top three share the row, each centred in its third */
.ed-trust-break { flex-basis: 100%; height: 0; }                      /* row break after the third point */
@media (min-width: 1280px) { .ed-trust-item span { white-space: nowrap; } }
@media (max-width: 600px) {
  .ed-trust { flex-direction: column; align-items: flex-start; }
  .ed-trust-item, .ed-trust-item:nth-child(-n+3) { flex: 0 0 auto; margin: 6px 0; justify-content: flex-start; }
  .ed-trust-break { display: none; }
}

/* ---- New Melody photography (build 170) ---- */
.about-quote-melody img { aspect-ratio: 4 / 5; object-position: 50% 0% !important; }
.about-quote-melody::after { background: linear-gradient(180deg, rgba(15,44,46,0) 46%, rgba(15,44,46,.78) 80%, rgba(15,44,46,.92) 100%); }
.tp-figure { margin: 38px auto 42px; max-width: 440px; }
.tp-figure img { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 0 18px 40px -24px rgba(15,44,46,.45); }
.tp-figure figcaption { margin-top: 14px; font-family: var(--font-display); font-style: italic; font-size: 1rem; line-height: 1.5; color: var(--muted); text-align: center; }
@media (min-width: 1000px) {
  .tp-figure { float: right; width: 42%; max-width: 380px; margin: 6px 0 28px 40px; }
  .tp-figure figcaption { text-align: left; font-size: .95rem; }
}
.article-body h2 { clear: none; }

/* =====================================================================
   Gold standardisation (build 172)
   One gold for lettering on dark/teal backgrounds:  --gold #E0B98A (brand spec)
   One gold for lettering on light backgrounds:      #9A7450 (deep tone; WCAG AA 4.5:1 on ivory/cream —
   the brand gold itself is only 1.6–1.7:1 on light and cannot be read there)
   ===================================================================== */
:root { --gold-on-light: #9A7450; --gold-on-light-lg: #C8A07A; }   /* build 194: small text = live-site gold; large/decorative = brand Gold Deep */
/* gold-light (#F0D0B0) was being used for lettering on teal — bring it back to the brand gold */
.ed-tagline .it,
.ed-hero-text .ed-lede em,
.bk-hero .bk-deposit,
.melody-quote blockquote em,
.journal-card-cat,
.hero-centered-h1 em, .hero-centered-lede em, .hero-editorial-tagline em, .hero-editorial-body em,
.hero-blended-h1 em, .hero-blended-tagline em, .hero-blended-body em { color: var(--gold); }
/* pale brand gold sitting on light backgrounds — use the readable deep tone */
.section-ivory .ethos-item-num, .section-cream .ethos-item-num,
.section-ivory .credential svg, .section-cream .credential svg,
.section-ivory .divider-diamond, .section-cream .divider-diamond,
.testimonial-card .testimonial-card-stars,
.bk-search svg { color: var(--gold-on-light); stroke: var(--gold-on-light); }
.section-ivory .divider-diamond, .section-cream .divider-diamond, .testimonial-card .testimonial-card-stars, .section-ivory .ethos-item-num, .section-cream .ethos-item-num { stroke: none; }

/* ---- Home founder photo: smaller (build 172) ---- */
.ed-founder { grid-template-columns: minmax(0, min(34%, 480px)) minmax(0, 1fr) minmax(0, 18%); }
@media (max-width: 1100px) { .ed-founder { grid-template-columns: minmax(0, min(40%, 420px)) minmax(0, 1fr); } }
@media (max-width: 900px)  { .ed-founder { grid-template-columns: 1fr; } .ed-founder-photo img { max-width: 400px; } }
.ed-founder-text > * { max-width: 620px; }   /* comfortable line length on wide screens */

/* ---- Home cards: bigger — two across (build 173) ---- */
.ed-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
@media (min-width: 1000px) { .ed-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (max-width: 640px)  { .ed-cards { grid-template-columns: 1fr; gap: 22px; } }
.ed-card-img { aspect-ratio: 16 / 10; }
.ed-card-body { padding: 28px 30px 30px; }
.ed-card h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); margin-bottom: 10px; }
.ed-card p  { font-size: 0.95rem; line-height: 1.65; max-width: 44ch; }
.ed-card .ed-card-price { font-size: 1.1rem; }

/* ---- Hero images: soft left edge as a safety net, so no plate can ever show a hard vertical line (build 175) ---- */
@media (min-width: 901px) {
  .ed-hero-media img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%);
            mask-image: linear-gradient(90deg, transparent 0, #000 18%);
  }
}

/* ---- Home founder: two balanced columns inside the page width; quote moves into the text (build 177) ---- */
.ed-founder {
  grid-template-columns: minmax(0, 480px) minmax(0, 620px);
  justify-content: center; column-gap: clamp(40px, 6vw, 96px);
  padding: clamp(56px, 7vw, 96px) max(24px, calc((100vw - 1240px) / 2));
}
.ed-founder-photo { box-shadow: 0 24px 60px -30px rgba(0,0,0,.55); }
.ed-founder-text { padding: 0; }
.ed-founder-pull {
  margin: 26px 0 0; padding: 4px 0 4px 22px; border-left: 1px solid var(--gold);
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.45; color: var(--gold-light, #F0D0B0);
}
.ed-founder-pull { color: var(--cream); }
@media (max-width: 1100px) {
  .ed-founder { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ed-founder { grid-template-columns: 1fr; padding: 0 0 48px; row-gap: 0; }
  .ed-founder-text { padding: 36px 22px 0; }
}

/* ---- Home tagline: one italic line (build 178) ---- */
.ed-tagline .it { font-size: clamp(1.2rem, 1.6vw, 1.4rem); letter-spacing: .01em; color: var(--gold); }
@media (max-width: 900px) { .ed-tagline .it { white-space: normal; } }

/* ---- Home hero: signature line under the lede (build 179) ---- */
.ed-hero-text .ed-lede:has(+ .ed-lede-sign) { margin-bottom: 14px; }
.ed-lede-sign { font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1.45vw, 1.32rem); line-height: 1.45; color: var(--gold); margin: 0 0 32px; max-width: 640px; }

/* ---- Gold on light backgrounds, refined (build 180) ----
   Small text (eyebrows, links, prices): #9A7450 — same hue family as the brand gold, 4.5:1 on cream/ivory (WCAG AA).
   Large display text (heading italics ≥24px, large numerals) and decorative marks: #C8A07A — a true gold,
   3:1 on cream/ivory, which WCAG AA allows for large text and graphics. Replaces the browner #9A7450. */
.section-ivory :is(h1,h2) em, .section-cream :is(h1,h2) em,
.section-ivory .h-section em, .section-cream .h-section em,
.section-ivory .ethos-item-num, .section-cream .ethos-item-num,
.section-ivory .divider-diamond, .section-cream .divider-diamond,
.testimonial-card .testimonial-card-stars { color: var(--gold-on-light-lg) !important; }
.tp-related .eyebrow { color: var(--gold-on-light); }                                   /* 4.5:1+ on the tinted related-reading box */
.google-cta-box .divider-diamond { color: var(--gold) !important; }        /* dark box inside a light section */
.ed-quote .stars { color: var(--gold-on-light-lg); }                          /* rating stars are graphics: 3:1 rule */

/* (build 196: header spacing rules moved to styles.css so every page — incl. privacy/terms/404 — shares them) */

/* =====================================================================
   Build 184: Signature treatments restored on home — six cards, 3 across
   ===================================================================== */
.ed-cards.ed-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
@media (min-width: 1000px) { .ed-cards.ed-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
@media (max-width: 640px)  { .ed-cards.ed-cards-3 { grid-template-columns: 1fr; gap: 22px; } }
.ed-cards-3 .ed-card-img { aspect-ratio: 4 / 3; }

/* =====================================================================
   Build 191: Treatments navigation: menu + pinned bar below 1024px, tabs from 1024px ===== */
.tpanels{min-width:0}

/* ---------- Phones & tablets in portrait (< 1024px): the treatment menu ---------- */
.tmenu{margin-bottom:48px;scroll-margin-top:calc(var(--tn-hdr,72px) + 16px)}
.tmenu-head .eyebrow{color:var(--gold-on-light,#9A7450)}
.tmenu-head h2{font-family:var(--font-display);font-weight:400;color:var(--teal-deep);font-size:clamp(2rem,6vw,2.6rem);line-height:1.1;margin:10px 0 8px}
.tmenu-head p{color:var(--muted);font-size:.95rem;line-height:1.6;max-width:520px;margin:0 0 22px}
.tmenu ul,.tsheet ul{list-style:none;margin:0;padding:0}
.tmenu-fam{border-top:1px solid rgba(200,160,122,.28);padding:16px 0 8px}
.tmenu-famh{display:flex;align-items:baseline;gap:12px;font-family:var(--font-display);font-weight:400;font-size:1.45rem;color:var(--teal-deep);margin:0 0 4px}
.tm-num{font-size:1.35rem;color:var(--gold-on-light-lg,#C8A07A);min-width:28px}
.tmenu-item,.tsheet-item{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 4px 12px 40px;border-bottom:1px dashed rgba(200,160,122,.2);color:var(--charcoal);text-decoration:none;font-size:.95rem;transition:background .25s,color .25s}
.tsheet-item{padding-left:10px}
.tm-price{font-family:var(--font-display);font-style:italic;color:var(--gold-on-light,#9A7450);font-size:1.02rem;white-space:nowrap}
.tmenu-item .tm-price::after{content:" \2192";font-style:normal;color:var(--gold-on-light-lg,#C8A07A)}
.tmenu-item:hover,.tsheet-item:hover{background:rgba(224,185,138,.10)}
.tmenu-item.active,.tsheet-item.active{color:var(--teal-deep);font-weight:500;background:rgba(224,185,138,.14);box-shadow:inset 3px 0 0 var(--gold-on-light-lg,#C8A07A)}
.tmenu-item:focus-visible,.tsheet-item:focus-visible,.tbar button:focus-visible,.tmenu-summary:focus-visible,.ttab:focus-visible{outline:2px solid var(--gold-on-light-lg,#C8A07A);outline-offset:2px}
/* collapsed summary after choosing */
.tmenu-summary{display:none}
.tmenu.collapsed{margin-bottom:28px}
.tmenu.collapsed .tmenu-head p,.tmenu.collapsed .tmenu-head h2,.tmenu.collapsed .tmenu-fams{display:none}
.tmenu.collapsed .tmenu-summary{display:grid;grid-template-columns:1fr auto;grid-template-areas:"l c" "n c";align-items:center;gap:2px 12px;width:100%;margin-top:12px;padding:14px 16px;background:#143638;color:#EDE6DA;border:0;border-radius:2px;text-align:left;cursor:pointer;font:inherit}
.tms-l{grid-area:l;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.tms-name{grid-area:n;font-family:var(--font-display);font-size:1.3rem;line-height:1.2}
.tms-change{grid-area:c;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(224,185,138,.45);padding:8px 10px;border-radius:30px;white-space:nowrap}
.treatment-panel.active{scroll-margin-top:calc(var(--tn-hdr,72px) + 96px)}
.treatment-panel.tn-arrive{animation:tnArrive .7s ease}
@keyframes tnArrive{from{opacity:.25;transform:translateY(14px)}to{opacity:1;transform:none}}
/* pinned selector bar */
.tbar{position:fixed;left:0;right:0;top:var(--tn-hdr,72px);z-index:90;display:flex;align-items:center;gap:10px;padding:10px 14px;background:#143638;color:#EDE6DA;box-shadow:0 8px 20px rgba(8,30,32,.18);transform:translateY(-110%);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s}
.tbar.show{transform:none;opacity:1;pointer-events:auto}
.tbar button{background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.tbar-arr{width:40px;height:40px;flex:none;border:1px solid rgba(224,185,138,.45)!important;border-radius:50%;color:var(--gold)!important;font-size:1.05rem}
.tbar-arr:disabled{opacity:.3;cursor:default}
.tbar-mid{flex:1;min-width:0;text-align:center;padding:2px 4px}
.tbar-mid small{display:block;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.tbar-mid b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* bottom sheet */
.tsheet{position:fixed;inset:0;z-index:2000}
.tsheet[hidden]{display:none}
.tsheet-scrim{position:absolute;inset:0;background:rgba(8,30,32,.55);animation:tnFade .25s ease}
.tsheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:86vh;overflow-y:auto;background:var(--ivory);border-radius:22px 22px 0 0;padding:10px 22px calc(26px + env(safe-area-inset-bottom));animation:tnUp .32s cubic-bezier(.2,.7,.2,1)}
.tsheet-grab{width:44px;height:4px;border-radius:3px;background:#cfc8bc;margin:0 auto 10px}
.tsheet-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.tsheet-top h2{font-family:var(--font-display);font-weight:400;font-size:1.6rem;color:var(--teal-deep);margin:0}
.tsheet-x{background:none;border:1px solid rgba(200,160,122,.4);width:38px;height:38px;border-radius:50%;font-size:1.4rem;line-height:1;color:var(--teal-deep);cursor:pointer}
.tsheet-g{font-family:var(--font-body);font-weight:500;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-on-light,#9A7450);margin:18px 0 2px}
@keyframes tnUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes tnFade{from{opacity:0}to{opacity:1}}
body.tn-lock{overflow:hidden}
.ttabs{display:none}

/* ---------- Laptops, desktops & tablets in landscape (>= 1024px): the tabs ---------- */
@media (min-width:1024px){
  .tmenu,.tbar,.tsheet{display:none!important}
  .ttabs{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 8px;position:sticky;top:var(--tn-hdr,72px);z-index:50;margin:0 0 52px;padding:10px 0 8px;border-bottom:1px solid rgba(201,165,107,.25)}
  .ttabs::before{content:"";position:absolute;top:0;bottom:-1px;left:-50vw;right:-50vw;background:var(--ivory);z-index:-1;transition:box-shadow .3s}
  .ttabs.stuck::before{box-shadow:0 10px 24px -14px rgba(15,44,46,.28)}
  .ttab{position:relative;padding:12px 18px 16px;font-family:var(--font-body);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);background:none;border:0;cursor:pointer;transition:color var(--transition)}
  .ttab:hover{color:var(--teal-deep)}
  .ttab.active{color:var(--gold-on-light,#9A7450)}
  .ttab.active::after{content:"";position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:28px;height:2px;background:var(--gold-on-light-lg,#C8A07A)}
  .treatment-panel.active{scroll-margin-top:calc(var(--tn-hdr,72px) + var(--tn-tabs,110px) + 24px)}
}
@media (min-width:1024px) and (max-width:1279px){
  .ttab{letter-spacing:.14em;padding:11px 11px 15px;font-size:.7rem}
}


/* Build 191: Book page category bar now sticks under the header (sticky fix), so group jumps clear both */
.bk-group{scroll-margin-top:calc(var(--site-hdr,72px) + 56px)}

/* =====================================================================
   Build 193: page banners — italic serif lede, as on the live site banners
   ===================================================================== */
.ed-hero.ed-hero-page .ed-lede { font-family: var(--font-display); font-style: italic; font-size: clamp(1.14rem, 1.42vw, 1.32rem); line-height: 1.55; color: rgba(245,239,231,.9); max-width: 600px; }
.ed-hero.ed-hero-page .ed-lede em { font-style: normal; }
.ed-hero.ed-hero-page h1 { text-wrap: balance; }

/* =====================================================================
   Build 195: gold ornament (◆ divider) on centred headings; footer strapline
   ===================================================================== */
/* Brand guide: Gold for rules on dark, Gold Deep for dividers on light */
.section-ivory .divider, .section-cream .divider, .home-cream .divider { color: var(--gold-on-light-lg); }
.section-ivory .divider-diamond, .section-cream .divider-diamond { color: var(--gold-on-light-lg) !important; }
.final-cta .divider, .ed-cta-band .divider, .about-stat .divider { color: var(--gold); margin: 18px auto 22px; }
.ed-cta-band .divider { position: relative; }

/* Build 198: faint tree watermark on the home "Why choose" band (right-hand side, behind the text) */
.home-why { background-image: url('assets/tree-watermark-fainter.png'); background-repeat: no-repeat; background-position: right 4% center; background-size: auto 84%; }   /* build 199: whole tree visible */
/* Build 207: below 1100px the Why-choose grid is 2×2 or stacked with divider lines, so the tree sits beneath the grid instead of behind it */
@media (max-width: 1100px) { .home-why { background-position: center bottom 36px; background-size: min(70%, 300px) auto; padding-bottom: calc(clamp(64px, 8vw, 110px) + 260px); } }

/* =====================================================================
   Build 200: mobile hero photo — crop to the subject instead of showing the
   whole plate (whose left 40% is empty teal kept for desktop text).
   ===================================================================== */
@media (max-width: 900px) {
  .ed-hero-media { height: clamp(250px, 74vw, 520px); overflow: hidden; }
  .ed-hero-media img, .ed-hero.ed-hero-page .ed-hero-media img {
    inset: auto; top: 50%; right: 0; left: auto; bottom: auto;
    width: 162%; height: auto; max-width: none;
    transform: translateY(-56%); object-fit: initial;
  }
  .ed-hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(15,44,46,0) 62%, #0F2C2E 100%), linear-gradient(90deg, #0F2C2E 0, rgba(15,44,46,0) 14%); }
}

/* ===== Build 210: mobile CTA band — dedicated portrait "welcome" image (subject in the top 60%, copy on the empty teal below) + hero blend ===== */
@media (max-width: 900px) {
  .ed-cta-band, .ed-cta-band.ed-cta-split { padding: 0 var(--ed-gutter) 72px; }
  .ed-cta-band::before { display: none; }
  .ed-cta-band picture { display: block; position: relative; margin: 0 calc(-1 * var(--ed-gutter)); line-height: 0; }
  .ed-cta-band img, .ed-cta-band.ed-cta-split img { position: relative; display: block; inset: auto; width: 100%; height: auto; max-width: none; opacity: 1; object-fit: initial; object-position: initial; }
  .ed-cta-band picture::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(15,44,46,0) 52%, rgba(15,44,46,.45) 75%, #0F2C2E 100%); }
  .ed-cta-band .inner, .ed-cta-band.ed-cta-split .inner { position: relative; z-index: 2; margin: -62vw auto 0; max-width: 720px; }
  .ed-cta-band.ed-cta-split .inner { margin-left: 0; }

  .ed-hero-media::after { background: linear-gradient(180deg, rgba(15,44,46,0) 40%, rgba(15,44,46,.85) 78%, #0F2C2E 100%), linear-gradient(90deg, #0F2C2E 0, rgba(15,44,46,0) 14%); }
  .ed-hero:not(.ed-hero-portrait) .ed-hero-text { margin-top: -84px; padding-top: 0; }
}