/* ==========================================================================
   Recreate Counselling — Tanya Ellsworth
   Brand: dark green #005456 · mid #006060 · light #008686 · wash #E2F8E2
          orange #FF6E00 (CTA only, never decoration)
   Fonts: Roboto for headings and sub-headings, Verdana for body (her brand file).
   Verdana is a system font, so nothing is fetched for body text and it renders
   identically on every machine. Only Roboto is loaded.
   ========================================================================== */

:root{
  --green-dark:#005456;
  --green-mid:#006060;
  --green-light:#008686;
  --wash:#E2F8E2;
  --orange:#FF6E00;
  --orange-deep:#d95c00;
  --paper:#ffffff;
  --fawn:#fbfcfb;
  --ink:#1d2321;
  --muted:#4f5b58;
  --hairline:#dde8e2;
  --head:'Roboto', 'Segoe UI', system-ui, sans-serif;
  --body:Verdana, Geneva, 'DejaVu Sans', sans-serif;
  --wrap:66rem;
  --narrow:44rem;
  --radius:14px;
  --shadow:0 16px 38px -26px rgba(0,84,86,.45);
}

*{box-sizing:border-box;}
html{
  /* ★ 21 Sep: ROOT SIZE. Without this, every rem on the page resolved against the
     browser default of 16px while body declared 17px, so anything written as ".82rem"
     rendered at 13.1px rather than the 13.9px it was written for. The identical fault
     was found across 84 EUS pages on 18 September and fixed the same way. */
  font-size:17px;
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--head); color:var(--green-dark); line-height:1.2; margin:0 0 .5em; font-weight:700;}
h1{font-size:clamp(1.9rem,4.4vw,2.85rem); letter-spacing:-.01em;}
h2{font-size:clamp(1.45rem,3vw,2rem);}
h3{font-size:1.12rem; color:var(--green-mid);}
p{margin:0 0 1.1em;}
strong{color:var(--green-dark);}
a{color:var(--green-mid); text-underline-offset:3px;}
a:hover{color:var(--green-dark);}
img{max-width:100%; height:auto; display:block;}
:focus-visible{outline:3px solid var(--green-light); outline-offset:3px; border-radius:6px;}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 1.25rem;}
.narrow{max-width:var(--narrow); margin-left:auto; margin-right:auto;}
.centre{text-align:center;}

/* skip link, for keyboard and screen-reader users */
.skip{position:absolute; left:-9999px; top:0; background:var(--green-dark); color:#fff;
  padding:.7rem 1rem; z-index:100;}
.skip:focus{left:0;}

/* ---------- header ---------- */
.topbar{background:var(--green-dark); height:6px;}
header.site{background:var(--paper); border-bottom:1px solid var(--hairline); position:sticky; top:0; z-index:40;}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:.7rem; padding-bottom:.7rem;}
.logo img{height:52px; width:auto;}
nav.main{display:flex; align-items:center; gap:1.35rem; flex-wrap:wrap;}
nav.main a{font-family:var(--head); font-size:.95rem; font-weight:500; color:var(--green-dark); text-decoration:none;}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--orange); text-decoration:underline;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--head); font-weight:700; font-size:1rem;
  background:var(--orange); color:#fff; text-decoration:none;
  padding:.85rem 1.6rem; border-radius:100px; border:0; cursor:pointer;
  box-shadow:0 10px 24px -14px rgba(255,110,0,.8); transition:background .15s ease;
}
.btn:hover{background:var(--orange-deep); color:#fff;}
.btn.ghost{background:transparent; color:var(--green-dark); border:2px solid var(--green-dark); box-shadow:none;}
.btn.ghost:hover{background:var(--green-dark); color:#fff;}
.btn.small{font-size:.92rem; padding:.65rem 1.25rem;}

/* ---------- sections ---------- */
section{padding:3.2rem 0;}
section.tight{padding:2.2rem 0;}
section.wash{background:var(--wash);}
section.fawn{background:var(--fawn);}
section.deep{background:var(--green-dark); color:#eaf5f3;}
section.deep h2,section.deep h3{color:#fff;}
section.deep strong{color:#fff;}
section.deep a{color:#bfe9e4;}
.eyebrow{
  font-family:var(--head); text-transform:uppercase; letter-spacing:.14em;
  font-size:.8rem; font-weight:700; color:var(--green-light); margin:0 0 .6rem;
}
.lead{font-size:1.08rem; color:var(--muted);}

/* ---------- hero ---------- */
/* ---------- hero: photograph behind the words ----------
   ★ 21 Sep. Was a two-column grid with a portrait beside the copy. Now a full-bleed
   photograph under an EVEN veil. Even and not a gradient, because the copy is centred:
   a gradient veil only works with text pinned to its opaque end, so the veil and the
   alignment are one decision rather than two. See DESIGN.md. */
.hero{
  position:relative; overflow:hidden; padding:4.6rem 0 4rem;
  background-color:var(--green-dark);
  background-image:url('/assets/hero-hands.png');
  background-size:cover;
  /* Aimed at the hands, which sit centre-low. On a wide monitor cover crops most of the
     height, so a centred default lands on the window and the wall. */
  background-position:center 46%;
}
/* ★ 24 Sep, Carrie: "the hero colour overlay is very dark". The dark teal veil (.86) is
   replaced by the treatment on her own EUS services page: a light photograph, a soft white
   scrim concentrated behind the centred words, and dark text. See brand/hero-image-rules.md
   (amended 24 Sep). The photograph shows clearly at the edges; the words sit on near-white. */
.hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 56% 92% at 50% 48%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.84) 45%, rgba(255,255,255,.45) 74%, rgba(255,255,255,.08) 100%),
    linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 64%, rgba(255,255,255,.5) 90%, rgba(255,255,255,.85) 100%);}
.hero > .wrap{position:relative; z-index:2; max-width:var(--narrow); text-align:center;}
.hero .eyebrow{color:var(--green-light);}
.hero h1{color:var(--green-dark);}
.hero p.sub{color:#2e3a38; margin-left:auto; margin-right:auto;}
.hero p.sub strong{color:var(--green-dark);}
@media (min-width:900px){ .hero{padding:5.6rem 0 5rem;} }
.hero p.sub{font-size:1.1rem; max-width:34rem;}
/* 24 Sep: the 7-Day Detox button lives IN the hero so it is above the fold on a phone. */
.hero-cta{margin-top:1.6rem;}
.hero-cta p{margin-bottom:.6rem;}
.hero-cta-lead{color:var(--green-mid); font-family:var(--head); font-weight:700; font-size:1rem; letter-spacing:.04em; text-transform:uppercase;}
.hero-cta-note{color:#2e3a38; font-size:1rem;}
/* Phones: no photograph behind the words (a narrow crop is all scrim and no picture). The
   words sit on the light wash and the full photograph shows underneath them, as on EUS. */
.hero-photo-m{display:none;}
@media (max-width:840px){
  .hero{background-image:none; background-color:var(--wash);}
  .hero::before{display:none;}
  .hero-photo-m{display:block; width:100%; height:auto;}
}
/* Phones: the button moves up to sit straight under the headline, because the stacked nav
   and two paragraphs pushed it ~270px below the fold at 375x812. Desktop keeps the reading
   order headline, paragraphs, button, with the padding tightened so the note clears the fold. */
.hero > .wrap{display:flex; flex-direction:column;}
.hero-cta{order:10;}
@media (max-width:600px){
  .hero{padding:2rem 0 2.4rem;}
  .hero .eyebrow{display:none;}
  .hero p.sub{font-size:1.02rem;}
  .hero-cta{margin-top:.6rem;}
  .hero-cta-lead{display:none;}
}
@media (min-width:900px){ .hero{padding:2.6rem 0 3rem;} .hero-cta{margin-top:1rem;} .hero h1{margin-bottom:.4em;} }

/* the free-gift block in the hero — the small first step */
.giftbox{
  background:var(--wash); border:1px solid var(--hairline); border-left:6px solid var(--orange);
  border-radius:var(--radius); padding:1.4rem 1.5rem; margin:1.6rem 0 0;
}
.giftbox h2{font-size:1.15rem; margin-bottom:.35rem;}
.giftbox p{margin-bottom:.9rem; font-size:.98rem;}
.giftbox .note{font-size:.95rem; color:var(--muted); margin:.7rem 0 0;}

/* ---------- credentials strip (24 Sep) ---------- */
section.creds{padding:1.2rem 0; background:var(--paper); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);}
section.creds ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 2rem;}
section.creds li{font-family:var(--head); font-weight:700; color:var(--green-dark); font-size:1rem; text-align:center;}

/* ---------- portraits (24 Sep) ----------
   Her photographs are 352 x 528, so they never display wider than 320px or they blur. */
.intro{display:grid; gap:2rem; align-items:center;}
@media (min-width:800px){ .intro{grid-template-columns:1.5fr 1fr;} }
.shot img,.portrait img{width:100%; max-width:320px; height:auto; display:block; margin:0 auto; border-radius:var(--radius); box-shadow:var(--shadow);}
figure.portrait{margin:0 auto 1.6rem; max-width:300px;}
@media (min-width:800px){ figure.portrait{float:right; width:280px; margin:.3rem 0 1rem 2rem;} }

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.3rem;}
/* A set of four reads as an orphaned row when auto-fit lands on three across.
   .two forces a 2x2 block, which is what four cards want. */
.cards.two{grid-template-columns:repeat(2,1fr);}
.card{background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius); padding:1.4rem 1.5rem; box-shadow:var(--shadow);}
.card h3{margin-bottom:.4rem;}
.card p:last-child{margin-bottom:0;}

/* ---------- testimonials ---------- */
.quote{background:var(--paper); border:1px solid var(--hairline); border-left:6px solid var(--green-light);
  border-radius:var(--radius); padding:1.4rem 1.6rem; margin:0 0 1.2rem;}
.quote blockquote{margin:0 0 .7rem; font-size:1.02rem;}
.quote cite{font-family:var(--head); font-style:normal; font-weight:700; color:var(--green-dark); font-size:1rem;}

/* ---------- lists ---------- */
ul.ticks{list-style:none; padding:0; margin:0 0 1.2em;}
ul.ticks li{position:relative; padding-left:1.7rem; margin-bottom:.6rem;}
ul.ticks li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--green-light); font-weight:700;}
ul.plain{padding-left:1.15rem;}
ul.plain li{margin-bottom:.5rem;}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--hairline);}
.faq summary{cursor:pointer; list-style:none; padding:1rem 2rem 1rem 0; position:relative;
  font-family:var(--head); font-weight:700; color:var(--green-dark); font-size:1.02rem;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; position:absolute; right:.3rem; top:.85rem; font-size:1.4rem; color:var(--green-light);}
.faq details[open] summary::after{content:"–";}
.faq details p{padding:0 0 1rem;}

/* ---------- final call ---------- */
.finalcall{text-align:center;}
.finalcall p.lead{max-width:36rem; margin-left:auto; margin-right:auto;}

/* ---------- footer ---------- */
footer.site{background:var(--green-dark); color:#cfe7e3; padding:2.6rem 0 2rem; font-size:.95rem;}
footer.site h3{color:#fff; font-size:1rem; margin-bottom:.6rem;}
footer.site a{color:#bfe9e4;}
footer.site .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:1.8rem;}
footer.site ul{list-style:none; padding:0; margin:0;}
footer.site li{margin-bottom:.4rem;}
footer.site .legal{border-top:1px solid rgba(255,255,255,.18); margin-top:1.8rem; padding-top:1.2rem; font-size:.85rem;}

/* ---------- preview banner (removed at launch) ---------- */
.preview{background:#7a2e00; color:#fff; font-family:var(--head); font-size:.85rem;
  text-align:center; padding:.6rem 1rem;}

@media (max-width:820px){
  /* ★ 18px FLOOR on a phone. Her reader is a woman in her forties or fifties reading
     this at night, and 17px was the ceiling rather than the floor. */
  html{font-size:18px;}
  body{font-size:18px;}
  header.site .wrap{flex-direction:column; align-items:flex-start;}
  nav.main{gap:.9rem;}
  section{padding:2.4rem 0;}
}

@media (max-width:820px){ .cards.two{grid-template-columns:1fr;} }

/* ---------- crisis numbers ----------
   Pulled out of the copyright line on 21 September. On a site written for women
   leaving controlling relationships, these are the one thing that could matter more
   tonight than any button, and they were rendering at 15.3px inside the small print.
   Full body size, their own rule above them, and tel: links so a phone dials on a tap. */
footer.site .crisis{
  border-top:1px solid rgba(255,255,255,.18);
  margin-top:1.8rem; padding-top:1.2rem;
  font-size:1rem; line-height:1.7; color:#eaf6f3;
}
footer.site .crisis strong{color:#fff;}
footer.site .crisis a{color:#fff; text-decoration:underline; text-underline-offset:3px;}
footer.site .legal{border-top:none; margin-top:.9rem; padding-top:0;}

/* ---------- pending markers (deleted at launch) ----------
   Carrie wants the gift placeholder visible because it reminds her a decision is open.
   So it is marked as a placeholder rather than removed, and it cannot be mistaken for
   finished copy. Delete this block and the .pending-tag / .pending-inline markup once
   the gift is confirmed. */
.pending-tag{
  display:inline-block; font-family:var(--head); font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; font-size:.75rem; color:#7a2e00; background:#ffe6d2;
  border:1px dashed #d98a4f; border-radius:4px; padding:.25rem .6rem; margin:0 0 .8rem;
}
.pending-inline{
  background:#ffe6d2; border-bottom:1px dashed #d98a4f; padding:0 .2rem;
}

/* ---------- inner-page hero ----------
   The four inner pages do not carry the homepage's photograph hero. They open on a
   plain wash band so the H1 does the work, and so a reader arriving mid-site is not
   made to scroll past a full-bleed image every time. */
section.hero-lite{background:var(--wash); padding:3.4rem 0 2.6rem;}
section.hero-lite h1{margin-bottom:.2em;}
nav.main a.here{color:var(--orange); text-decoration:underline; text-underline-offset:5px;}

/* ---------- video testimonial (25 Sep) ----------
   Her Vimeo clip is portrait (9:16), so it is capped at phone width or it fills the screen. */
figure.video-quote{margin:1.8rem auto; max-width:300px; text-align:center;}
.video-frame{position:relative; padding-top:177.78%; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--hairline);}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
figure.video-quote figcaption{margin-top:.7rem; font-family:var(--head); font-weight:700; color:var(--green-dark); font-size:1rem;}

/* ==========================================================================
   ★ 25 Sep: DEPTH PASS. Carrie: "overall design looks very flat ... add pill boxes and make
   images and program descriptions pop out of the page as they do on my eus site."
   Modelled on her EUS programmes page: white cards with a coloured top edge, a layered
   shadow, and a small lift when you point at them. Her colours only; orange stays on buttons.
   ========================================================================== */
:root{
  --shadow-sm:0 12px 30px -20px rgba(0,84,86,.40);
  --shadow-lg:0 26px 60px -30px rgba(0,84,86,.55);
}

/* pills: section labels become rounded tags */
.eyebrow{display:inline-block; background:var(--wash); color:var(--green-dark); padding:.38rem 1rem; border-radius:100px; letter-spacing:.12em;}
section.wash .eyebrow, section.hero-lite .eyebrow{background:#fff; box-shadow:var(--shadow-sm);}
.eyebrow.centre{display:table; margin-left:auto; margin-right:auto;}
.hero .eyebrow{align-self:center; background:rgba(255,255,255,.9);}
.pill{display:inline-block; font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; color:var(--green-dark); background:var(--wash); padding:.4rem 1.05rem; border-radius:100px;}
section.wash .pill{background:#fff; box-shadow:var(--shadow-sm);}
.pill.soft{text-transform:none; letter-spacing:.02em; font-size:max(16px,.9rem); font-weight:500; background:var(--wash); box-shadow:none; padding:.3rem .8rem;}
.tags{display:flex; flex-wrap:nowrap; gap:.35rem; margin:0 0 1rem;}
.tags .pill.soft{padding:.3rem .65rem; white-space:nowrap;}

/* credentials strip as pills */
section.creds{background:var(--fawn);}
section.creds li{background:#fff; border:1px solid var(--hairline); border-radius:100px; padding:.45rem 1.1rem; box-shadow:var(--shadow-sm);}

/* cards lift */
.card{border-top:4px solid var(--green-light); box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease;}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);}

/* programme cards (services) */
section.stage{padding:3.6rem 0;}
.stagehead{text-align:center; max-width:40rem; margin:0 auto 2rem;}
.stagehead .pill{margin-bottom:.9rem;}
.stagehead p{color:var(--muted);}
.progs{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr)); gap:1.5rem; align-items:stretch;}
.prog{background:#fff; border:1px solid var(--hairline); border-top:5px solid var(--green-light); border-radius:18px; padding:1.8rem 1.7rem 1.6rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease;}
.prog:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.prog.feature{max-width:46rem; margin:0 auto; border-top-color:var(--green-dark); box-shadow:var(--shadow);}
.prog h3{font-size:1.35rem; color:var(--green-dark); margin-bottom:.15rem;}
.prog .subname{font-family:var(--head); font-weight:700; color:var(--green-light); margin-bottom:.8rem;}
.prog .outcome{font-size:1.05rem; color:var(--ink); border-left:4px solid var(--wash); padding-left:.9rem;}
.prog .meta{margin-top:auto; padding-top:.9rem; border-top:1px solid var(--hairline); font-family:var(--head); font-weight:500; color:var(--green-dark);}
.prog .price{font-weight:700; font-size:1.15rem;}
.prog .go{margin:.4rem 0 0;}
.prog .go .btn{width:100%; text-align:center;}
@media (min-width:821px){ .prog.feature .go .btn{width:auto;} }

/* images pop: an offset wash block behind her photographs */
.shot img,.portrait img{box-shadow:14px 14px 0 var(--wash), var(--shadow-lg);}
section.wash .shot img, section.wash .portrait img{box-shadow:14px 14px 0 #fff, var(--shadow-lg);}
figure.video-quote .video-frame{box-shadow:var(--shadow-lg);}

/* testimonials and FAQ lift off the page */
.quote{box-shadow:var(--shadow-sm);}
.faq{background:#fff; border-radius:18px; box-shadow:var(--shadow); padding:1.4rem 1.8rem 1rem;}
.faq .eyebrow, .faq h2{text-align:center;}

/* motion only when the reader hasn't asked for less */
@media (prefers-reduced-motion:reduce){ .card,.prog{transition:none;} .card:hover,.prog:hover{transform:none;} }

/* ---------- blog (25 Sep) ----------
   /blog is a grid of cards; each whole card is one link to its post. Same lift as the programme cards. */
.post-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:1.5rem; margin-top:1.2rem;}
a.post-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--hairline); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm); text-decoration:none; color:var(--ink); transition:transform .18s ease, box-shadow .18s ease;}
a.post-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); color:var(--ink);}
a.post-card:focus-visible{outline:3px solid var(--green-light); outline-offset:3px;}
a.post-card img{width:100%; aspect-ratio:1584/672; object-fit:cover;}
.post-card-band{display:block; height:10px; background:linear-gradient(90deg,var(--green-dark),var(--green-light));}
.post-card-body{display:flex; flex-direction:column; gap:.6rem; padding:1.4rem 1.5rem 1.5rem; flex:1;}
.post-card-body .pill{align-self:flex-start;}
.post-card-title{font-family:var(--head); font-weight:700; font-size:1.2rem; line-height:1.3; color:var(--green-dark);}
.post-card-desc{color:var(--muted); font-size:1rem; flex:1;}
.post-card-more{font-family:var(--head); font-weight:700; color:var(--green-mid); border-bottom:2px solid var(--green-light); align-self:flex-start; padding-bottom:1px;}
a.post-card:hover .post-card-more{color:var(--green-dark);}
.crumb{margin:0 0 .8rem; font-family:var(--head); font-weight:500;}
.crumb a{text-decoration:none;}
.byline{color:var(--muted); font-family:var(--head); font-weight:500; margin:0;}
article.post h2{margin-top:2rem;}
article.post h3{margin-top:1.4rem;}
article.post ol{padding-left:1.3rem;} article.post ol li{margin-bottom:.5rem;}
article.post blockquote{margin:1.4rem 0; padding:1rem 1.3rem; background:var(--wash); border-left:5px solid var(--green-light); border-radius:0 12px 12px 0;}
.post-hero{width:100%; height:auto; aspect-ratio:1584/672; object-fit:cover; border-radius:18px; box-shadow:var(--shadow-lg); margin:0 0 1.8rem;}
.post-cta{margin-top:2rem; padding:1.6rem; background:var(--wash); border-radius:18px; text-align:center;}
@media (prefers-reduced-motion:reduce){ a.post-card{transition:none;} a.post-card:hover{transform:none;} }

/* 29 Sep: round client photos on testimonials */
.quote.has-photo{display:grid; grid-template-columns:96px 1fr; column-gap:1.2rem; align-items:start;}
.quote.has-photo .quote-photo{grid-row:1 / span 2; width:96px; height:96px; border-radius:50%; object-fit:cover; border:3px solid var(--wash);}
.quote.has-photo blockquote,.quote.has-photo cite{grid-column:2;}
@media (max-width:560px){ .quote.has-photo{grid-template-columns:1fr;} .quote.has-photo .quote-photo{grid-row:auto; margin-bottom:.8rem;} .quote.has-photo blockquote,.quote.has-photo cite{grid-column:1;} }
@media (max-width:560px){ .tags{flex-wrap:wrap;} }

/* 29 Sep: programme card images (Higgsfield, Tanya's palette). Full-bleed across the top of each card. */
.prog-img{display:block; width:calc(100% + 3.4rem); max-width:none; margin:-1.8rem -1.7rem 1.2rem; aspect-ratio:4/3; object-fit:cover; border-radius:13px 13px 0 0;}
.prog.feature .prog-img{aspect-ratio:21/9;}
/* 29 Sep: prices removed (Carrie). Buttons still sit at the foot of each card, with or without a meta line. */
.prog .go{margin-top:auto; padding-top:.6rem;}
.prog .meta ~ .go{margin-top:.4rem; padding-top:0;}

/* ---------- 7 Oct (round 2): her tagline and "You're not doing this alone." ----------
   Tanya asked for both on more pages. Never below 16px: the tagline overrides the small eyebrow style. */
.tagline,.eyebrow.tagline{
  font-family:var(--head); text-transform:none; letter-spacing:.04em;
  font-size:1.05rem; font-weight:500; color:var(--green-light); margin:0 0 .7rem;
}
.not-alone{font-family:var(--head); font-size:1.2rem; font-weight:600; color:var(--green-dark); margin-top:1.4rem;}
.post-close{margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--hairline); text-align:center;}
.post-close .not-alone{margin:0 0 .4rem;}
.post-close .tagline{margin:0;}
.section-photo{margin:2rem 0 0;}
.section-photo img{display:block; width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow);}

/* 7 Oct: buttons inside dark sections. "section.deep a" (pale aqua link colour) was beating .btn, so the homepage's final
   "Book a first conversation" button had pale text on orange (Carrie: hard to read). Buttons keep white text everywhere. */
section.deep a.btn, section.deep a.btn:hover{color:#fff;}
/* ...and the tagline in a dark section: no white pill, light text on the green. */
section.deep .eyebrow.tagline{background:transparent; box-shadow:none; color:#cfe7e3; padding:0;}