/* ============================================================
   Toronto Therapy Practice — shared stylesheet
   Loaded by every page. Page-specific components stay in each
   page's own <style> block.

   BRAND PALETTE
   Sampled from the reproductive mental health one-pager.
   --espresso, --ink, --taupe and --bronze-text are derived: the
   brand has no dark value, and text and CTAs need one that meets
   WCAG AA. --bronze is the brand's own value and is decorative
   only, it does not pass contrast for text.
   ============================================================ */
:root{
  --cream:#FFF8EF;
  --greige:#EBE0D1;
  --blush:#E2C5BD;
  --blush-wash:#F5E9E4;
  --rose:#BC988E;
  --bronze:#B2855B;

  --espresso:#33261D;
  --ink:#2A211B;
  --taupe:#6E5D4C;
  --bronze-text:#7E5A2E;
  /* the same two roles, dark enough to clear 4.5:1 on the --blush ground */
  --bronze-deep:#654720;
  --taupe-deep:#554636;

  --card:#FFFDF9;
  --line:#E3D6C6;
  --line-dark:#A38B72;
  --ok:#6E8F6A;
  --wait:#B2855B;

  --max:1180px;
  --r:14px;
}

/* ---------- self-hosted fonts ----------
   Was a render-blocking request to fonts.googleapis.com on every page.
   Self-hosting removes the third-party round trip, and keeps visitor IPs
   from being sent to Google, which matters more than usual for a
   healthcare site. */
@font-face{font-family:"Gilda Display";src:url("fonts/gilda-display-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:Figtree;src:url("fonts/figtree-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:Figtree;src:url("fonts/figtree-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:Figtree;src:url("fonts/figtree-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:Figtree;src:url("fonts/figtree-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:Figtree,system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.62;
}
img{max-width:100%;height:auto;display:block}
p{margin:0 0 1em}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--bronze-text);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.narrow{max-width:66ch}
/* A utility class has to beat whatever display the component sets, or it
   does nothing. .post-card{display:flex} and .person{display:grid} are both
   declared later in this file at the same specificity, so for the whole life
   of the blog and therapist filters the count updated and nothing ever hid.
   !important is the point of the class, not a workaround. */
.hidden{display:none !important}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--espresso);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 8px 0;text-decoration:none;font-weight:600}
.skip:focus{left:0}

/* ---------- typography ---------- */
h1,h2,h3,h4{
  font-family:"Gilda Display",Georgia,serif;
  font-weight:400;
  margin:0;
  letter-spacing:0;
  line-height:1.18;
}
h1{letter-spacing:.004em;line-height:1.1}
.eyebrow{font-size:.85rem;font-weight:700;color:var(--bronze-text);margin:0 0 .9rem;font-family:Figtree,sans-serif}
/* Section headings run the full measure of their container rather than being
   capped at a character count. The old 34ch cap left about 325px of dead space
   to the right of every heading on a 1440 screen and stacked two-line headings
   into a narrow column. Slightly smaller type is the trade that buys the span:
   at 2.25rem almost every heading on the site sits on one line at desktop. */
h2.big{font-size:clamp(1.7rem,2.55vw,2.25rem);max-width:100%;text-wrap:pretty}
/* Inside an already-narrow column, balancing reads better than a full first
   line followed by a two-word stub. */
.two h2.big,.proof-top h2.big,.ig-head h2.big,.hero-grid h2.big,.closing-2 h2.big{text-wrap:balance}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.82rem 1.35rem;border-radius:999px;border:1.5px solid transparent;
  font-weight:600;font-size:.95rem;text-decoration:none;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn-primary{background:var(--espresso);color:#fff}
.btn-primary:hover{background:var(--ink)}
.btn-ghost{border-color:var(--line-dark);color:var(--espresso);background:transparent}
.btn-ghost:hover{background:var(--espresso);color:#fff;border-color:var(--espresso)}
.btn-sm{padding:.6rem 1.05rem;font-size:.86rem}

/* ---------- small shared atoms ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 1.1rem}
.chip{font-size:.79rem;background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:.28rem .68rem;color:#574636}
.tag{font-size:.79rem;background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:.26rem .66rem;color:#574636}
.tag.hit{background:var(--blush);border-color:var(--rose);color:#5D4318;font-weight:600}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.badge{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none}
a.badge:hover .badge-go{border-bottom-color:var(--blush)}
.badge-go{margin-left:.5rem;font-weight:700;color:var(--blush);border-bottom:1px solid transparent}
.avail{display:flex;align-items:center;gap:.45rem;font-weight:600;color:var(--espresso)}

/* ---------- utility bar ---------- */
.utility{background:var(--espresso);color:#F0E6DA;font-size:.82rem}
.utility .wrap{display:flex;gap:1.4rem;align-items:center;justify-content:space-between;padding-top:.55rem;padding-bottom:.55rem;flex-wrap:wrap}
.utility a{text-decoration:none}
.utility a:hover{text-decoration:underline}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:40;background:var(--cream);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:2rem;padding-top:16px;padding-bottom:16px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.mark img{height:38px;width:auto}
.mark .tagline{
  font-family:Figtree,sans-serif;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--taupe);font-weight:600;padding-left:12px;border-left:1px solid var(--blush);
  line-height:1.3;max-width:132px;
}
.navtoggle{display:none;margin-left:auto;background:none;border:1.5px solid var(--line-dark);border-radius:999px;padding:.5rem .9rem;font-weight:600;font-size:.86rem}


/* ---------- primary navigation ----------
   Four grouped triggers plus the CTA. nowrap on the row and on each trigger is
   what guarantees no item ever sits on two lines; the previous flat nav wrapped
   onto three rows at every width once it grew past six items. */
nav.main{margin-left:auto;display:flex;flex-wrap:nowrap;gap:.25rem;align-items:center}
.navgroup{position:relative}
.navtop{
  background:none;border:0;cursor:pointer;white-space:nowrap;text-decoration:none;
  font-size:.94rem;font-weight:500;color:var(--ink);
  padding:.55rem .7rem;border-radius:8px;display:inline-flex;align-items:center;gap:.4rem;
}
.navtop:after{content:"";width:6px;height:6px;border-right:1.5px solid var(--taupe);border-bottom:1.5px solid var(--taupe);transform:rotate(45deg) translateY(-2px);transition:transform .15s ease}
.navtop:hover,.navgroup.open .navtop{background:var(--greige)}
.navgroup.open .navtop:after{transform:rotate(225deg) translateY(-2px)}
.navcta{margin-left:.6rem;white-space:nowrap;flex:0 0 auto}

.megapanel{
  display:none;position:absolute;top:calc(100% + 10px);left:-12px;z-index:50;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 18px 40px rgba(42,33,27,.13);
  padding:22px;gap:30px;grid-template-columns:repeat(3,minmax(190px,1fr));
}
.megapanel-sm{grid-template-columns:minmax(250px,1fr)}
.megapanel-2{grid-template-columns:minmax(230px,1fr) minmax(250px,1.05fr);gap:30px}
.megalabel{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);margin:0 0 .5rem}
.megacol a.meganame{padding:7px 10px;font-weight:600;font-size:.94rem}
.megacol a.meganame span{display:block;font-weight:400;font-size:.8rem;color:var(--taupe);margin-top:1px}
/* Implications counselling sits in its own tinted column rather than nested
   under fertility. It is a different purchase: a single required session with
   a letter, bought because a clinic asked for it, not because someone is
   looking for ongoing therapy. */
/* Four columns are wider than the group they hang off, so this one is
   positioned against the header row and spans its full width instead of
   running off the right edge of the window. */
header.site .wrap{position:relative}
.navgroup:has(.megapanel-4){position:static}
.megapanel-4{left:0;right:0;grid-template-columns:.85fr 1fr .95fr 1.05fr;gap:30px}
/* Groups that sit near the right of the header open leftwards, or the panel
   runs off the side of the window. */
.megapanel-right{left:auto;right:-12px}
/* The topics panel is a plain list, so two columns and a footer row read
   faster than three columns of one-word links. */
.megapanel-topics{grid-template-columns:repeat(2,minmax(170px,1fr));gap:30px 34px}
.megafoot{grid-column:1/-1;border-top:1px solid var(--line);padding-top:.7rem;margin-top:-.2rem}
.megafoot a{display:block;text-decoration:none;padding:.5rem .6rem;margin:0 -.6rem;border-radius:8px}
.megafoot a:hover{background:var(--cream)}
.megafoot a b{font-weight:600;font-size:.95rem;color:var(--bronze-text)}
.navgroup.open .megapanel{display:grid}
/* Bridges the gap between the header item and the panel so the pointer is
   never over neither of them on the way down. Overhangs sideways too,
   because the panels are offset from the item they belong to. */
.megapanel:before{content:"";position:absolute;top:-14px;left:-24px;right:-24px;height:14px}
.megahead{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);margin:0 0 .7rem}
.megacol a{display:block;text-decoration:none;padding:.5rem .6rem;margin:0 -.6rem;border-radius:8px}
.megacol a:hover{background:var(--cream)}
.megacol a b{display:block;font-weight:600;font-size:.95rem;color:var(--ink)}
.megacol a span{display:block;font-size:.82rem;color:var(--taupe);line-height:1.4;margin-top:.1rem}
.megacol-feat{background:var(--blush-wash);border-radius:10px;padding:16px;margin:-4px}
.megacol-feat a:hover{background:rgba(255,255,255,.6)}

/* utility bar */
.util-right{display:flex;gap:1.3rem;align-items:center;flex-wrap:wrap}
.badge-wrap{min-width:0}

/* ---------- sections ---------- */
/* One vertical rhythm token. A fixed 84px was proportionally much heavier at
   1024 than at 1600; scaling it keeps the band-to-band gap feeling the same
   across the desktop range. */
:root{--sec:clamp(56px,5.6vw,80px)}
section{padding:var(--sec) 0}
/* a trailing paragraph's own margin was adding its own 13 to 16px on top of
   the section padding, so sections ended at slightly different depths */
section > .wrap > *:last-child,
.shead .wrap > *:last-child{margin-bottom:0}
/* grids carry a margin-top meant to clear the heading above them. When one
   is the first thing in a section that margin stacks on the section padding. */
section > .wrap > *:first-child{margin-top:0}
.sec-oat{background:var(--greige)}
/* The fourth ground. cream, blush-wash and greige sit within 1.13:1 of each
   other, so two of the three "different" section colours were invisible and
   the page read as one long cream. --blush is a real brand value and the only
   light ground with genuine separation (1.54:1 from cream). It is dark enough
   that --taupe and --bronze-text drop to 3.8:1 on it, so the section
   redefines both tokens locally and everything inside inherits the fix. */
.sec-blush{background:var(--blush);--taupe:var(--taupe-deep);--bronze-text:var(--bronze-deep)}
.sec-blush h2,.sec-blush h3{color:var(--ink)}
.sec-blush .card,.sec-blush .fee,.sec-blush .tcard,.sec-blush .fee-card{border-color:var(--rose)}
.sec-blush .chip{background:var(--cream);border-color:var(--rose)}
.sec-deep{background:var(--blush-wash);color:var(--ink)}
.sec-deep h2,.sec-deep h3{color:var(--ink)}
.sec-deep .eyebrow{color:var(--bronze-text)}
.sec-deep hr,.sec-deep .rule{border-color:var(--rose)}
/* Two text columns start at the same baseline. Centring them pushed the
   shorter column down by as much as 66px, so two sibling headings sat at
   different heights. */
.two{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
/* Text beside a photo: the text column carries a heading plus three stacked
   items, so it needs more of the width than the image does. */
.two-fig{grid-template-columns:1.12fr .88fr}

/* ---------- photography ----------
   The arch crop echoes the sunrise in the wordmark. Used sparingly. */
.figure{aspect-ratio:4/5;overflow:hidden;background:var(--blush)}
.arch{border-radius:200px 200px var(--r) var(--r);overflow:hidden;background:var(--blush)}
.arch img{width:100%;height:100%;object-fit:cover}
.band{position:relative;height:clamp(210px,24vw,340px);overflow:hidden;background:var(--blush)}
.band img{width:100%;height:100%;object-fit:cover;object-position:52% 42%}
.band .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(42,33,27,.78) 0%,rgba(42,33,27,.55) 34%,rgba(42,33,27,.12) 72%,rgba(42,33,27,0) 100%)}
.band .line{position:absolute;inset:0;display:flex;align-items:center}
.band .line .wrap{width:100%}
.band .line p{
  font-family:"Gilda Display",Georgia,serif;color:var(--cream);
  font-size:clamp(1.25rem,2.4vw,2rem);max-width:23ch;margin:0;line-height:1.32;
}

/* ---------- closing block ---------- */
.closing{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:52px;text-align:center}
.closing h2{font-size:clamp(1.7rem,3vw,2.4rem);max-width:30ch;margin:0 auto;text-wrap:balance}
.closing p{max-width:52ch;margin:1.1rem auto 1.8rem;color:#574636}
.closing .btns{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

.closing-2{display:grid;grid-template-columns:.78fr 1.22fr;gap:52px;align-items:center;text-align:left}
.closing-2 h2{margin:0;max-width:34ch}
.closing-2 p{margin:1.1rem 0 1.8rem;max-width:48ch}
.closing-2 .btns{justify-content:flex-start}
.closing-2 .arch{aspect-ratio:3/4}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#C6B5A3;padding:64px 0 32px;font-size:.9rem}
footer.site a{text-decoration:none;color:#F0E6DA}
footer.site a:hover{text-decoration:underline}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
footer.site h4,footer.site .fcol-h{font-family:Figtree,sans-serif;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--line-dark);margin-bottom:.9rem;font-weight:700}
footer.site ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.fbadges{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:40px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.fbadge{display:inline-flex;align-items:center;gap:9px;font-size:.8rem;line-height:1.25;color:#C6B5A3;text-decoration:none}
.fbadge:hover{color:#F0E6DA;text-decoration:none}
.fbadge b{display:block;color:#F0E6DA;font-size:.82rem;font-weight:600}
.fbadge span{display:block;font-size:.74rem;opacity:.8}
.fbadge span a{color:#F0E6DA;text-decoration:underline;text-underline-offset:2px}
.fbadge svg{flex:none}
.fbadge-logo{flex:none;width:34px;height:34px;border-radius:50%;display:block}
.fbadge-logo-pad{border-radius:6px;background:#fff;padding:3px;box-sizing:border-box}
.fbadge-mark{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  font-family:"Gilda Display",Georgia,serif;font-size:.84rem;color:#F0E6DA;letter-spacing:.02em}
@media (max-width:620px){.fbadges{gap:16px}.fbadge{width:100%}}
.crisis{margin-top:44px;padding-top:22px;border-top:1px solid #46372B;font-size:.85rem;color:#B0A08E;display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}

/* ---------- sticky mobile CTA ---------- */
.sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--card);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px}
.sticky .btn{flex:1}

/* ============================================================
   Breakpoints. One set, largest to smallest.
   ============================================================ */
@media (max-width:960px){
  .two{grid-template-columns:1fr;gap:40px}
  .fgrid{grid-template-columns:1fr 1fr}
}

@media (max-width:860px){
  .closing-2{grid-template-columns:1fr;gap:28px}
  .closing-2 .arch{max-width:230px;margin:0 auto}
}


@media (max-width:760px){
  body{font-size:16px;padding-bottom:74px}
  .mark .tagline{display:none}
  /* the logo is the only non-inline tap target under 44px on a phone */
  .mark{min-height:44px}
  .utility{font-size:.78rem}
  .closing{padding:34px 24px}
  .sticky{display:flex}
  .btn{min-height:46px}
  footer.site a{display:inline-block;padding:6px 0}
}

@media (max-width:520px){
  .fgrid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- answer block ----------
   Sits high on concern pages. Plain declarative sentences that answer the
   question people actually type, in a form an answer engine can lift whole. */
/* The answer block closes the page intro, so it keeps a small gap above
   (it is continuing the hero) and a full one below. It used to have none:
   harmless while the next section was also cream, but now that the grounds
   alternate the last line of the answer sat hard against the colour change. */
.answer-sec{padding:0 0 var(--sec)}
.answer-h{font-size:1.5rem;max-width:30ch;margin-bottom:1.1rem}
.answer-body{max-width:74ch;border-left:2px solid var(--rose);padding-left:1.5rem}
.answer-body p{font-size:1.04rem;color:#453629;line-height:1.66}
.answer-body p:last-child{margin-bottom:0}
@media (max-width:760px){.answer-body{padding-left:1.1rem}}

/* ---------- FAQ page ---------- */
.faq-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.faq-nav a{font-size:.87rem;text-decoration:none;border:1.5px solid var(--line-dark);color:var(--espresso);border-radius:999px;padding:.4rem .9rem;font-weight:500}
.faq-nav a:hover{background:var(--espresso);color:#fff;border-color:var(--espresso)}
.qgroup{padding:56px 0 0}
.qgroup h2{font-size:1.9rem;max-width:34ch;text-wrap:balance}
.qgroup .intro{max-width:66ch;margin-top:.8rem;color:#574636;font-size:.98rem}
.qlist{margin-top:1.8rem;border-top:1px solid var(--line)}
.qlist details{border-bottom:1px solid var(--line)}
.qlist summary{padding:20px 0;cursor:pointer;font-weight:600;font-size:1.06rem;list-style:none;display:flex;gap:1.2rem;align-items:flex-start}
.qlist summary::-webkit-details-marker{display:none}
.qlist summary:after{content:"+";margin-left:auto;font-size:1.5rem;color:var(--bronze-text);line-height:1;flex:none}
.qlist details[open] summary:after{content:"–"}
.qlist .a{padding:0 0 22px;max-width:72ch;font-size:1rem;color:#453629}
.qlist .a p{margin:0 0 .9rem}
.qlist .a p:last-child{margin:0}
.qlist .a ul{margin:0 0 .9rem;padding-left:1.15rem}
.qlist .a li{margin-bottom:.4rem}
.qlist .a a{color:var(--bronze-text);font-weight:600}

/* ---------- contact / refer / careers ---------- */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.route{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column}
.route .kicker{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze-text);margin-bottom:.7rem}
.route h2{font-size:1.5rem;margin-bottom:.6rem}
/* Tatiana's photo used to run full width between the intro and the three
   contact options, which pushed all three below the fold. It now sits with
   her name, at the size a headshot actually needs. */
.route-who{display:flex;align-items:center;gap:14px;margin-bottom:.6rem}
.route-who img{width:68px;height:68px;border-radius:50%;object-fit:cover;object-position:center 22%;flex:none;border:1px solid var(--line)}
.route-who h2{margin-bottom:0}
.route-who .who-sub{font-size:.78rem;color:var(--taupe);margin:2px 0 0}
.route p{font-size:.95rem;color:#574636;margin-bottom:1.4rem}
.route .btn{margin-top:auto;align-self:flex-start;max-width:100%;white-space:normal;word-break:break-word;text-align:center}
dl.detail{margin:1.6rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.85rem 2rem;font-size:.96rem}
dl.detail dt{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--taupe);padding-top:.2rem}
dl.detail dd{margin:0;color:#453629}
.notecard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin-top:1.2rem}
.notecard h3{font-family:Figtree,sans-serif;font-size:1rem;font-weight:700;margin-bottom:.4rem}
.notecard p{font-size:.94rem;color:#574636;margin:0}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:2.4rem}
.steps3 h3{font-size:1.25rem;margin-bottom:.5rem;border-top:2px solid var(--bronze);padding-top:1rem}
.steps3 p{font-size:.95rem;color:#574636;margin:0}
ul.reqs{margin:1.6rem 0 0;padding-left:1.15rem;font-size:.97rem;color:#453629}
ul.reqs li{margin-bottom:.6rem}
@media (max-width:900px){
  .routes,.steps3{grid-template-columns:1fr}
  .route{padding:24px}
  dl.detail{grid-template-columns:1fr;gap:.3rem}
  dl.detail dd{margin-bottom:.8rem}
  /* .74rem lands at 11.8px, under the 12px floor for readable body text */
  dl.detail dt{font-size:.82rem}
}

.route-note{background:var(--blush-wash);border:1px solid var(--rose);border-radius:var(--r);padding:16px 20px;margin-bottom:1.8rem;max-width:74ch}
.route-note p{margin:0;font-size:.95rem;color:#453629}
.route-note a{color:var(--bronze-text);font-weight:600}

/* ============================================================
   ARTICLE TEMPLATE
   Long-form reading: wider type, narrower measure, sticky TOC.
   ============================================================ */
.reading-bar{position:fixed;top:0;left:0;height:3px;background:var(--bronze);z-index:70;width:0;transition:width .1s linear}
.art-head{padding:48px 0 28px;border-bottom:1px solid var(--line)}
.art-kicker{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze-text);margin-bottom:1rem}
.art-head h1{font-size:clamp(2.1rem,4.2vw,3.2rem);max-width:26ch;line-height:1.12;text-wrap:balance}
.art-standfirst{font-size:1.2rem;line-height:1.6;max-width:58ch;margin-top:1.4rem;color:#453629}
.art-meta{display:flex;align-items:center;gap:14px;margin-top:2rem;flex-wrap:wrap}
.art-meta img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:center 20%;flex:none;background:var(--blush)}
.art-meta .by{font-size:.92rem;line-height:1.45}
.art-meta .by b{display:block;font-size:1rem}
.art-meta .by span{color:var(--taupe)}
.art-dates{margin-left:auto;font-size:.84rem;color:var(--taupe);text-align:right}

.art-grid{display:grid;grid-template-columns:232px minmax(0,1fr);gap:64px;padding:44px 0 0;align-items:start}
.toc{position:sticky;top:96px;font-size:.9rem}
.toc h2{font-family:Figtree,sans-serif;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);margin-bottom:.9rem}
.toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.toc li a{display:block;padding:.42rem 0 .42rem 1rem;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;color:var(--taupe);line-height:1.35}
.toc li a:hover{color:var(--ink)}
.toc li a.on{color:var(--espresso);font-weight:600;border-left-color:var(--bronze)}
.toc .toc-cta{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.toc .toc-cta p{font-size:.85rem;color:var(--taupe);margin-bottom:.7rem;line-height:1.45}

.prose-art{max-width:68ch;overflow-wrap:break-word;font-size:1.09rem;line-height:1.72;color:#372b21}
.prose-art > p{margin:0 0 1.35em}
.prose-art h2{font-size:1.85rem;margin:2.8rem 0 .9rem;scroll-margin-top:110px}
.prose-art h3{font-size:1.3rem;margin:2rem 0 .6rem;scroll-margin-top:110px}
.prose-art ul,.prose-art ol{margin:0 0 1.4em;padding-left:1.3rem}
.prose-art li{margin-bottom:.55rem}
.prose-art strong{font-weight:700;color:var(--ink)}
.prose-art a:not(.btn){color:var(--bronze-text);font-weight:600;overflow-wrap:anywhere;word-break:break-word}
.prose-art blockquote{margin:2rem 0;padding:0 0 0 1.6rem;border-left:3px solid var(--rose);font-family:"Gilda Display",Georgia,serif;font-size:1.3rem;line-height:1.5;color:var(--ink)}
.prose-art hr{border:0;border-top:1px solid var(--line);margin:2.6rem 0}

/* liftable summary: the block an answer engine quotes */
.takeaways{background:var(--blush-wash);border-radius:var(--r);padding:26px 30px;margin:0 0 2.6rem}
.takeaways h2{font-family:Figtree,sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze-text);margin:0 0 .9rem}
.takeaways ul{margin:0;padding-left:1.15rem}
.takeaways li{margin-bottom:.6rem;font-size:1rem;line-height:1.6}
.takeaways li:last-child{margin-bottom:0}

.callout{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--bronze);border-radius:0 var(--r) var(--r) 0;padding:20px 24px;margin:2rem 0}
.callout h3{font-family:Figtree,sans-serif;font-size:1rem;font-weight:700;margin:0 0 .4rem}
.callout p{font-size:.97rem;margin:0 0 .7rem;color:#574636}
.callout p:last-child{margin:0}

.art-foot{max-width:68ch;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}
.reviewed{font-size:.88rem;color:var(--taupe);background:var(--greige);border-radius:10px;padding:14px 18px;margin-bottom:2rem}
.reviewed b{color:var(--ink)}

.post-list{display:grid;gap:0;border-top:1px solid var(--line);margin-top:2.4rem}
.post-row{display:grid;grid-template-columns:150px 1fr;gap:28px;padding:26px 0;border-bottom:1px solid var(--line);text-decoration:none;align-items:start}
.post-row:hover h3{color:var(--bronze-text)}
.post-row .when{font-size:.84rem;color:var(--taupe);padding-top:.3rem}
.post-row h3{font-size:1.45rem;margin-bottom:.45rem}
.post-row p{font-size:.97rem;color:#574636;margin:0;max-width:62ch}
.post-row .cat{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bronze-text);margin-top:.6rem}

@media (max-width:1040px){
  .art-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .art-grid > *{min-width:0}
  .toc{position:static;margin-bottom:2.4rem;background:var(--greige);border-radius:var(--r);padding:18px 22px;max-width:100%;overflow-wrap:break-word}
  .toc ol{border-left:0;columns:2;column-gap:28px}
  .toc li a{padding-left:0;border-left:0}
  .toc li a.on{border-left:0}
  .toc .toc-cta{display:none}
}
@media (max-width:760px){
  .prose-art{font-size:1.04rem}
  .art-meta{gap:10px}
  .art-dates{margin-left:0;width:100%;text-align:left}
  .toc ol{columns:1;column-count:1}
  .post-row{grid-template-columns:1fr;gap:6px}
  .post-row .when{padding-top:0}
}

/* ---------- services + comparison ---------- */
.svc-list{border-top:1px solid var(--line);margin-top:2.2rem}
.svc{display:grid;grid-template-columns:1fr auto;gap:32px;padding:26px 0;border-bottom:1px solid var(--line);align-items:start}
.svc h3{font-size:1.45rem;margin-bottom:.4rem}
.svc p{font-size:.98rem;color:#574636;margin:0;max-width:62ch}
.svc-links{margin-top:.7rem!important;font-size:.9rem!important}
.svc-links a{color:var(--bronze-text);font-weight:600;text-decoration:none}
.svc-links a:hover{text-decoration:underline}
.svc-price{text-align:right;white-space:nowrap}
.svc-price .dur{display:block;font-size:.8rem;color:var(--taupe);margin-bottom:.2rem}
.svc-price b{font-family:"Gilda Display",Georgia,serif;font-size:1.5rem;font-weight:400}
.route-list{margin-top:2.2rem;border-top:1px solid var(--line)}
.route-row{padding:24px 0;border-bottom:1px solid var(--line);max-width:74ch}
.route-h{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap}
.route-h h3{font-size:1.4rem}
.route-cost{margin-left:auto;font-family:"Gilda Display",Georgia,serif;font-size:1.25rem;color:var(--bronze-text)}
.route-access{font-size:.85rem;color:var(--taupe);margin:.35rem 0 .7rem}
.route-row > p:last-child{font-size:.98rem;color:#453629;margin:0}
@media (max-width:760px){
  .svc{grid-template-columns:1fr;gap:10px}
  .svc-price{text-align:left}
  .route-cost{margin-left:0}
}

.toc-bare{background:none;padding:0}
.toc-bare .toc-cta{border-top:0;padding-top:0;margin-top:0}
@media (max-width:1040px){.toc-bare{display:none}}

/* ---------- article hero + post cards ---------- */
.art-hero{max-width:var(--max);margin:30px auto 4px;padding:0 24px}
.art-hero img{width:100%;height:clamp(220px,34vw,420px);object-fit:cover;border-radius:var(--r);background:var(--blush)}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:2.4rem}
.post-card{display:flex;flex-direction:column;text-decoration:none;border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--line);transition:border-color .15s ease}
.post-card:hover{border-color:var(--rose)}
.post-card:hover b{color:var(--bronze-text)}
.pc-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--blush)}
/* Cards for posts that came across without a hero image. The glow rising from
   the lower edge echoes the sunrise in the wordmark, so an image-less card
   still reads as part of the set rather than as a failed photo. */
.pc-tile{display:grid;place-items:center;padding:20px;background:var(--blush-wash);position:relative}
.pc-tile:before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 58% 46% at 50% 106%,rgba(188,152,142,.5) 0%,rgba(188,152,142,0) 68%)}
/* --rose reads as the right watermark weight here but only manages 2:1 on
   these tints. This is the muted warm brown that still looks like a watermark
   and clears 3.9:1 on every one of them. */
.pc-tile-word{position:relative;font-family:"Gilda Display",Georgia,serif;font-size:1.5rem;
  line-height:1.2;color:#8A6557;text-align:center;text-wrap:balance}
.pc-tile[data-cat="postpartum"]{background:var(--greige)}
.pc-tile[data-cat="pregnancy"]{background:#F3E8DC}
.pc-tile[data-cat="pregnancy-loss"]{background:#EFE7DF}
.pc-tile[data-cat="couples"]{background:#EDE1D6}
.pc-tile[data-cat="fertility"]{background:var(--blush-wash)}
.pc-tile[data-cat="choosing-a-therapist"],.pc-tile[data-cat="therapy-basics"]{background:var(--greige)}
.post-card-feat .pc-tile-word{font-size:clamp(2rem,3.4vw,2.9rem)}
.pc-img img{width:100%;height:100%;object-fit:cover;display:block}
.pc-body{display:flex;flex-direction:column;padding:18px 20px 20px;flex:1}
.post-card .cat{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--bronze-text);margin-bottom:.5rem}
.post-card b{font-family:"Gilda Display",Georgia,serif;font-weight:400;font-size:1.22rem;line-height:1.25;color:var(--ink);margin-bottom:.5rem}
.pc-desc{font-size:.92rem;color:#574636;line-height:1.5}
.pc-date{font-size:.8rem;color:var(--taupe);margin-top:auto;padding-top:.9rem}
.post-card-feat{grid-column:1/-1;flex-direction:row}
.post-card-feat .pc-img{flex:0 0 58%;aspect-ratio:auto}
.post-card-feat .pc-body{justify-content:center;padding:34px 38px}
.post-card-feat b{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.18}
.post-card-feat .pc-desc{font-size:1.02rem;max-width:46ch}
.post-card.demote{grid-column:auto;flex-direction:column}
.post-card.demote .pc-img{flex:none;aspect-ratio:16/10}
.post-card.demote .pc-body{padding:18px 20px 20px;justify-content:flex-start}
.post-card.demote b{font-size:1.22rem}
.post-card.demote .pc-desc{font-size:.92rem}

/* search + sort controls */
.fsearch{flex:1;min-width:200px;max-width:420px;font:inherit;font-size:.92rem;padding:.5rem .85rem;border:1.5px solid var(--line-dark);border-radius:999px;background:var(--cream);color:var(--ink)}
.fsearch::placeholder{color:var(--taupe)}
.fsort{display:inline-flex;align-items:center;gap:.5rem;font-size:.84rem;color:var(--taupe);margin-left:auto}
.fsort select{font:inherit;font-size:.88rem;padding:.45rem .7rem;border:1.5px solid var(--line-dark);border-radius:999px;background:var(--cream);color:var(--ink)}
.f span{opacity:.6;font-variant-numeric:tabular-nums}

/* hub link back to the service page */
.hublink{background:var(--blush-wash);border-radius:var(--r);padding:22px 26px;margin:2.8rem 0 0;max-width:68ch}
.hublabel{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--bronze-text);margin:0 0 .6rem}
.hublink a{display:block;text-decoration:none}
.hublink a b{font-family:"Gilda Display",Georgia,serif;font-weight:400;font-size:1.45rem;color:var(--ink);display:block;margin-bottom:.25rem}
.hublink a:hover b{color:var(--bronze-text)}
.hublink a span{font-size:.95rem;color:#574636}

/* related articles on a service page */
.hub-articles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:2.2rem}

@media (max-width:980px){
  .post-grid,.hub-articles{grid-template-columns:repeat(2,1fr)}
  .post-card-feat{flex-direction:column}
  .post-card-feat .pc-img{flex:none;aspect-ratio:16/9}
  .post-card-feat .pc-body{padding:22px 24px 24px}
}
@media (max-width:680px){
  .post-grid,.hub-articles{grid-template-columns:1fr;gap:20px}
  .fsort{margin-left:0}
  .fsearch{max-width:none}
}

.matchnote{font-size:.82rem;font-weight:600;color:var(--bronze-text);background:var(--blush-wash);border-radius:999px;padding:.25rem .7rem;display:inline-block;margin:0 0 .9rem}

/* consecutive sections on the SAME ground double their padding, which reads as
   a gap rather than a rhythm. Across a colour change the full padding has to
   stay, or the content sits flush against the edge of the band. */
.sec-oat + .sec-oat,
.sec-deep + .sec-deep,
section:not([class]) + section:not([class]){padding-top:0}
.shead + section.answer-sec{padding-top:8px}
.art-grid{padding-top:40px}
@media (max-width:760px){
  .art-hero{margin-top:18px;padding:0 24px}
  .art-grid{padding-top:26px}
}

/* The five-group nav plus the logo is wider than a 768px viewport, so the
   drawer has to engage well above the phone breakpoint. */
@media (max-width:900px){
  nav.main{
    display:none;position:absolute;top:100%;left:0;right:0;
    /* No flex-wrap here. In a column flex container with a max-height, wrap
       spills the overflow into a second column instead of scrolling, which is
       what put the nav items side by side on a phone. */
    flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap;
    background:var(--card);border-bottom:1px solid var(--line);
    padding:8px 24px 20px;box-shadow:0 14px 24px rgba(42,33,27,.10);
    max-height:calc(100vh - 110px);overflow-y:auto;
  }
  nav.main.open{display:flex}
  .navgroup{position:static}
  .navtop{width:100%;justify-content:space-between;padding:14px 0;font-size:1.02rem;font-weight:600;border-bottom:1px solid var(--line);border-radius:0}
  .navtop:hover,.navgroup.open .navtop{background:none}
  .megapanel{position:static;display:none;box-shadow:none;border:0;background:none;padding:4px 0 12px;grid-template-columns:1fr !important;gap:0}
  .megapanel-right{left:0;right:0}
  .megafoot{border-top:0;padding-top:0;margin-top:0}
  .navgroup.open .megapanel{display:grid}
  .megahead{margin-top:.6rem}
  .megacol-feat{background:none;padding:0;margin:0}
  .navcta{margin:16px 0 0;width:100%}
  .navtoggle{display:block}
  header.site .wrap{position:relative;gap:1rem}
}

/* blog filter bar: the three rows were competing for one line */
.filters .frow{align-items:center;gap:14px;margin-bottom:14px}
.filters .flabel{min-width:62px}
.filters .fchips{gap:.45rem}
.filters .fmeta{margin-top:14px;padding-top:14px}
@media (min-width:681px){
  .fsearch{min-width:300px}
}
@media (max-width:680px){
  .filters .frow{flex-wrap:wrap;gap:10px}
  .filters .flabel{min-width:0;width:100%;margin-bottom:-2px}
  .fsort{width:100%;justify-content:space-between}
}

/* ---------- social ---------- */
.social{display:flex;gap:.55rem;margin-top:1.2rem}
.social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid #46372B;color:#C6B5A3;transition:background .15s ease,color .15s ease,border-color .15s ease}
.social a:hover{background:var(--blush);color:var(--ink);border-color:var(--blush)}

/* ---------- Instagram grid ----------
   Static tiles, no Meta script. See ig-note for why. */
.ig-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:2.2rem}
.ig-tile{position:relative;display:block;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:var(--blush);text-decoration:none;border:1px solid var(--line)}
.ig-tile:hover{border-color:var(--rose)}
.ig-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ig-live .ig-ph{display:none}
/* Until the Behold feed URL is in place these tiles have no image, and a bare
   gradient square reads as a photo that failed to load. Giving the placeholder
   the same rising glow as the article tiles, plus the Instagram glyph, makes it
   a designed card. Real photos replace it the moment the feed is connected. */
.ig-ph{position:absolute;inset:0;background:var(--blush-wash)}
.ig-ph:before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 62% 50% at 50% 104%,rgba(188,152,142,.55) 0%,rgba(188,152,142,0) 70%)}
.ig-ph:after{content:"";position:absolute;top:14px;left:16px;width:19px;height:19px;
  border:1.8px solid var(--rose);border-radius:6px;
  box-shadow:inset 0 0 0 1.8px transparent, 0 0 0 0 transparent}
.ig-tile .ig-dot{position:absolute;top:19.5px;left:21.5px;width:8px;height:8px;
  border:1.8px solid var(--rose);border-radius:50%}
.ig-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;font-size:.86rem;line-height:1.4;color:var(--ink);background:linear-gradient(to top,rgba(255,253,249,.97),rgba(255,253,249,.82) 62%,rgba(255,253,249,0))}
.ig-note{font-size:.84rem;color:var(--taupe);margin-top:1.4rem;max-width:62ch}
@media (max-width:860px){.ig-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.ig-grid{grid-template-columns:1fr 1fr;gap:12px}.ig-cap{font-size:.78rem;padding:10px 12px}}

.profile-links{font-size:.88rem;margin:.5rem 0 0}
.profile-links a{color:var(--bronze-text);font-weight:600}

/* ============================================================
   MOBILE ERGONOMICS
   Touch targets to 44px and nothing below 12px, which is the floor
   for comfortable reading on a phone held one-handed at 3am.
   ============================================================ */
@media (max-width:900px){
  /* filter chips, sort control and utility links become thumb-sized */
  .f{min-height:44px;padding:.6rem 1rem;font-size:.9rem}
  .fsearch{min-height:44px}
  .fsort select{min-height:44px;padding:.6rem .9rem}
  .clear{min-height:44px;padding:.4rem 0}
  .utility .wrap{gap:.5rem}
  .util-right{gap:1rem}
  .utility a,.badge{min-height:40px;display:inline-flex;align-items:center}
  .megacol a{padding:.75rem .6rem}
  .social a{width:44px;height:44px}

  /* nothing under 12px on a phone */
  .post-card .cat{font-size:.78rem}
  .megahead{font-size:.76rem}
  .mark .tagline{font-size:.72rem}
  .stage-btn .num{width:30px;height:30px;font-size:.8rem}
  .pc-date,.art-dates,.ig-note,.proof-cap{font-size:.82rem}
}
@media (max-width:420px){
  /* the two sticky CTAs need to stay comfortably tappable at 320px */
  .sticky .btn{min-height:48px;padding:.6rem .7rem;font-size:.84rem}
  .wrap{padding:0 18px}
  .closing{padding:28px 20px}
}

@media (max-width:900px){
  /* standalone card CTAs are not inline links, so they get a real target */
  .concern a{min-height:44px;display:inline-flex;align-items:center;padding:.3rem 0}
  .mark .tagline{font-size:.76rem}
}

@media (max-width:900px){
  .crumb a{min-height:44px;display:inline-flex;align-items:center}
  .toc li a{min-height:44px;display:flex;align-items:center}
  .faq-nav a{min-height:44px;display:inline-flex;align-items:center}
  .hublabel,.route .kicker,.fmt .kicker,.art-kicker{font-size:.78rem}
}

/* WCAG 2.5.8 wants at least a 24px target. Card and list titles that are links
   measured 22px tall, just under. A little vertical padding, pulled back with a
   matching negative margin, so nothing on the page shifts. */
.tcard h3 a,
.person .mid h2 a,
.hub-articles h3 a,
.also h3 a,
.post-card h3 a,
.proof-wide a{display:inline-block;padding:3px 0;margin:-3px 0}

/* "See all N articles on X" under a service page's article grid. The class was
   in the markup on all seven service pages with no rule behind it, so it
   rendered as a bare default-blue paragraph link under the cards. */
.hub-seeall{margin:1.9rem 0 0;text-align:center}
.hub-seeall a{display:inline-block;padding:11px 22px;border:1px solid var(--line);border-radius:999px;
  font-size:.93rem;font-weight:600;color:var(--bronze-text);text-decoration:none;
  transition:background .18s ease,border-color .18s ease}
.hub-seeall a:hover,.hub-seeall a:focus-visible{background:var(--oat);border-color:var(--bronze-text)}
@media(max-width:640px){.hub-seeall a{display:block;text-align:center}}

/* ---- Enquiry form (contact page only) --------------------------------------
   One form, on one page. Deliberately not in the footer of every page: a form
   under every article invites people to type clinical detail into an
   unencrypted field, and it competes with the booking link, which is the
   action that actually matters. */
.formlede{max-width:60ch;color:var(--taupe);margin:.9rem 0 2rem}
.enq{max-width:720px}
.enq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.fld{margin:0 0 1.25rem}
.fld label{display:block;font-size:.88rem;font-weight:600;color:var(--ink);margin-bottom:.4rem}
.req,.opt{font-weight:500;font-size:.78rem;letter-spacing:.02em;text-transform:lowercase}
.req{color:var(--bronze-deep)}
.opt{color:var(--taupe)}
.enq input[type=text],.enq input[type=email],.enq input[type=tel],
.enq select,.enq textarea{
  width:100%;box-sizing:border-box;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--card);border:1px solid var(--line-dark);border-radius:10px;
  padding:13px 14px;min-height:48px;
  transition:border-color .16s ease,box-shadow .16s ease}
.enq textarea{min-height:120px;resize:vertical;line-height:1.55}
.enq select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E5D4C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px}
.enq :is(input,select,textarea):focus-visible{outline:none;border-color:var(--bronze-text);
  box-shadow:0 0 0 3px rgba(126,90,46,.18)}
.help{display:block;font-size:.84rem;line-height:1.5;color:var(--taupe);margin-top:.45rem;max-width:58ch}
.fld-check label{display:flex;align-items:flex-start;gap:11px;font-weight:500;font-size:.92rem;
  line-height:1.5;color:var(--ink);max-width:62ch}
.fld-check input{flex:none;width:24px;height:24px;margin:1px 0 0;accent-color:var(--bronze-text)}
.formfoot{font-size:.84rem;line-height:1.55;color:var(--taupe);margin:1.1rem 0 0;max-width:58ch}
.formfoot a{color:var(--bronze-text)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:640px){.enq-grid{grid-template-columns:1fr}}

/* Any anchor target, not just article headings: the header is sticky, so a
   jump to #form or #how would otherwise land with the heading underneath it.
   #main is excluded because the skip link should land at the very top. */
section[id],div[id]:not(#main),h1[id],h2[id],h3[id]{scroll-margin-top:110px}
.route-alt{font-size:.86rem;color:var(--taupe);margin:.85rem 0 0}
.route-alt a{color:var(--bronze-text)}

/* Service-page hero image.
   .shead .arch sets min-height:380px on the CONTAINER and height:100% on the
   image. A percentage height against a container sized by its own content
   resolves to auto, so a landscape photo kept its natural ratio, came up short
   of 380px, and left the container's blush background showing underneath.
   Portrait photos happened to fill it, which is why only the postpartum page
   showed the gap. Putting the minimum on the image itself makes cover crop
   rather than letterbox, whatever shape the photo is. */
.shead .arch{display:grid}
.shead .arch img{grid-area:1/1;width:100%;height:100%;min-height:380px;object-fit:cover}
@media(max-width:900px){.shead .arch img{min-height:300px}}
.enq-error{max-width:720px;margin:0 0 1.6rem;padding:14px 18px;border-radius:12px;
  border:1px solid #C2704F;background:#FBEFE9;color:#5C2C17;font-size:.93rem;line-height:1.55}
.enq-error p{margin:0}
.enq-error a{color:#5C2C17}