/* Bloom design system.
   Calm, warm, neurodiversity-affirming. Soft palette, generous spacing,
   high legibility, reduced-motion aware, strong focus states. No harsh reds. */

:root {
  /* Brand palette, taken from the Bloom logo */
  --navy:#304878;      --navy-dark:#25406C;  --navy-soft:#EBEFF6;
  --teal:#4F9DAA;      --teal-soft:#E7F1F3;
  --green:#7FA45E;     --green-soft:#EEF3E6;
  --purple:#8B72B0;    --purple-soft:#F0EAF6;
  --coral:#DB817D;     --coral-soft:#FBEBEA;
  /* legacy names remapped to the brand so existing rules restyle cleanly */
  --sage:var(--navy);  --sage-dark:var(--navy-dark);  --sage-soft:var(--navy-soft);
  --peach:var(--coral); --peach-soft:var(--coral-soft);
  --gold:#DB817D;      /* focus outline: warm, high-visibility */
  --lavender:var(--purple); --lavender-soft:var(--purple-soft);
  --cream:#FBFAF7;     /* soft warm white page background */
  --white:#FFFFFF;
  --ink:#2C384C;       /* deep navy charcoal, readable */
  --muted:#5C6A7D;
  --line:rgba(48,72,120,0.12);
  --shadow:0 10px 30px rgba(44,58,79,0.08);
  --shadow-sm:0 4px 14px rgba(44,58,79,0.06);
  --radius:18px;
  --radius-sm:12px;
  --wrap:1120px;
  --font-head:'Fraunces', Georgia, serif;
  --font-body:'Nunito Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--cream); line-height:1.7; font-size:1.05rem;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--sage-dark); }

h1,h2,h3,h4 { font-family:var(--font-head); font-weight:600; line-height:1.2; color:var(--ink); margin:0 0 .6rem; }
h1 { font-size:clamp(2.1rem,5vw,3.3rem); letter-spacing:-.01em; }
h2 { font-size:clamp(1.7rem,3.4vw,2.4rem); }
h3 { font-size:1.3rem; }
p { margin:0 0 1rem; }

/* accessibility helpers */
.skip-link { position:absolute; left:-999px; top:0; background:var(--sage); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 8px 0; z-index:2000; }
.skip-link:focus { left:0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .card-link:focus-visible {
  outline:3px solid var(--gold); outline-offset:2px; border-radius:6px;
}

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 1.5rem; }
.section { padding:4.5rem 0; }
.section-tight { padding:3rem 0; }
.bg-sage { background:var(--sage-soft); }
.bg-peach { background:var(--peach-soft); }
.bg-lavender { background:var(--lavender-soft); }
.bg-white { background:var(--white); }
.center { text-align:center; }
.lead { font-size:1.18rem; color:var(--muted); max-width:60ch; }
.center .lead { margin-left:auto; margin-right:auto; }
.eyebrow { text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; font-weight:700; color:var(--sage); margin-bottom:.6rem; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--font-body); font-weight:700; font-size:.95rem; letter-spacing:.005em; line-height:1.2; padding:.72rem 1.4rem; border-radius:999px; text-decoration:none; border:2px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn-primary { background:var(--sage); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover { background:var(--sage-dark); transform:translateY(-2px); }
.btn-outline { background:transparent; color:var(--sage-dark); border-color:var(--sage); }
.btn-outline:hover { background:var(--sage-soft); }
.btn-lg { padding:.85rem 1.6rem; font-size:.98rem; }

/* nav */
.nav { position:sticky; top:0; z-index:1000; background:rgba(251,247,240,0.92); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line); }
.nav-inner { max-width:var(--wrap); margin:0 auto; padding:.7rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); font-family:var(--font-head); font-weight:600; font-size:1.5rem; }
.brand .mark { width:48px; height:48px; flex-shrink:0; }
.brand-yp { color:var(--navy); margin-left:1px; }
.nav-links { display:flex; align-items:center; gap:1.4rem; list-style:none; margin:0; padding:0; }
.nav-links a { text-decoration:none; color:var(--ink); font-weight:600; font-size:.98rem; }
.nav-links a:hover { color:var(--sage-dark); }
.nav-cta { display:flex; align-items:center; gap:.8rem; }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:.4rem; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
/* Open state: the hamburger becomes an X (it is the close button). */
.nav.open .nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity:0; }
.nav.open .nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* hero */
.hero { position:relative; overflow:hidden; background:linear-gradient(160deg,var(--sage-soft) 0%,var(--cream) 55%,var(--peach-soft) 100%); }
.hero-inner { max-width:var(--wrap); margin:0 auto; padding:4.5rem 1.5rem; display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; }
.hero h1 { margin-bottom:1rem; }
.hero p.lead { margin-bottom:1.8rem; }
.hero-cta { display:flex; gap:.9rem; flex-wrap:wrap; }
.hero-reassure { margin-top:1.6rem; color:var(--muted); font-size:.95rem; display:flex; align-items:center; gap:.5rem; }
.hero-art { display:flex; align-items:center; justify-content:center; }
.hero-art svg { width:100%; max-width:420px; height:auto; }

/* generic grids + cards */
.grid { display:grid; gap:1.4rem; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-auto { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow-sm); }
.card-soft { background:var(--white); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-sm); }
.card h3 { margin-bottom:.4rem; }
.card p { color:var(--muted); margin:0; }

/* icon badge (line SVG, no emoji) */
.icon { width:52px; height:52px; border-radius:14px; background:var(--sage-soft); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.icon svg { width:26px; height:26px; stroke:var(--sage-dark); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.icon.peach { background:var(--coral-soft); } .icon.peach svg { stroke:var(--coral); }
.icon.lav { background:var(--purple-soft); } .icon.lav svg { stroke:var(--purple); }
.icon.teal { background:var(--teal-soft); } .icon.teal svg { stroke:var(--teal); }
.icon.green { background:var(--green-soft); } .icon.green svg { stroke:var(--green); }
/* multi-colour rotation for service grids, echoing the logo */
.svc-grid > *:nth-child(5n+1) .icon { background:var(--navy-soft); } .svc-grid > *:nth-child(5n+1) .icon svg { stroke:var(--navy); }
.svc-grid > *:nth-child(5n+2) .icon { background:var(--teal-soft); } .svc-grid > *:nth-child(5n+2) .icon svg { stroke:var(--teal); }
.svc-grid > *:nth-child(5n+3) .icon { background:var(--coral-soft); } .svc-grid > *:nth-child(5n+3) .icon svg { stroke:var(--coral); }
.svc-grid > *:nth-child(5n+4) .icon { background:var(--purple-soft); } .svc-grid > *:nth-child(5n+4) .icon svg { stroke:var(--purple); }
.svc-grid > *:nth-child(5n+5) .icon { background:var(--green-soft); } .svc-grid > *:nth-child(5n+5) .icon svg { stroke:var(--green); }

/* values */
.value { display:flex; gap:1rem; align-items:flex-start; }
.value .dot { width:14px; height:14px; border-radius:50%; background:var(--sage); flex-shrink:0; margin-top:.5rem; }
.value h3 { font-size:1.12rem; margin-bottom:.2rem; }
.value p { color:var(--muted); margin:0; font-size:.98rem; }

/* needs chips */
.chips { display:flex; flex-wrap:wrap; gap:.6rem; }
.chip { background:var(--white); border:1px solid var(--line); border-radius:999px; padding:.5rem 1rem; font-size:.92rem; color:var(--ink); box-shadow:var(--shadow-sm); }

/* team */
.team-card { text-align:center; }
.avatar { width:96px; height:96px; margin:0 auto 1rem; border-radius:50%; background:linear-gradient(135deg,var(--sage) 0%,var(--peach) 100%); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:2rem; }
.team-card .role { color:var(--sage-dark); font-weight:700; font-size:.92rem; margin-bottom:.6rem; }
.team-card p { color:var(--muted); font-size:.96rem; text-align:left; }

/* prose blocks. Wider than a classic reading measure because the guide pages
   felt too narrow on desktop, but still capped so lines do not get so long they
   are tiring, which matters for our neurodivergent readers. */
.prose { max-width:78ch; }
.prose p { color:var(--ink); }
/* Guide pages fill the site's content width (same as the nav and footer) so they
   do not look narrow on desktop. We do not go wider than --wrap, otherwise the
   text would stick out past the header/footer and lose alignment with the site. */
.prose.narrow { max-width:var(--wrap); }

/* faq accordion */
.faq { max-width:800px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-q { width:100%; text-align:left; background:none; border:none; padding:1.3rem 0; font-family:var(--font-body); font-weight:700; font-size:1.08rem; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-q .plus { flex-shrink:0; width:22px; height:22px; position:relative; }
.faq-q .plus::before,.faq-q .plus::after { content:''; position:absolute; background:var(--sage); border-radius:2px; }
.faq-q .plus::before { top:10px; left:0; width:22px; height:2px; }
.faq-q .plus::after { top:0; left:10px; width:2px; height:22px; transition:transform .2s; }
.faq-q[aria-expanded="true"] .plus::after { transform:rotate(90deg) scaleX(0); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-a-inner { padding:0 0 1.3rem; color:var(--muted); }

/* testimonials */
.quote { background:var(--white); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow-sm); border-top:3px solid var(--peach); }
.quote p { font-size:1.05rem; color:var(--ink); font-style:italic; }
.quote .who { color:var(--muted); font-size:.9rem; font-style:normal; margin:0; }

/* callout strip */
.strip { background:var(--sage); color:#fff; border-radius:var(--radius); padding:2.4rem; text-align:center; }
.strip h2 { color:#fff; }
.strip p { color:rgba(255,255,255,.9); max-width:56ch; margin:0 auto 1.4rem; }
.strip .btn-primary { background:#fff; color:var(--sage-dark); }
.strip .btn-primary:hover { background:var(--cream); }

/* forms */
.form-field { margin-bottom:1.2rem; }
.form-field label { display:block; font-weight:700; margin-bottom:.4rem; font-size:.98rem; }
.form-field .hint { font-weight:400; color:var(--muted); font-size:.9rem; }
.form-field input, .form-field textarea, .form-field select {
  width:100%; padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:1rem; background:var(--white); color:var(--ink);
}
.form-field input:focus, .form-field textarea:focus { border-color:var(--sage); outline:none; }
.req { color:var(--peach); }
.hp { position:absolute; left:-9999px; }

/* flash */
.flash-wrap { max-width:var(--wrap); margin:1rem auto 0; padding:0 1.5rem; }
.flash { padding:1rem 1.2rem; border-radius:var(--radius-sm); margin-bottom:.6rem; font-weight:600; }
.flash-success { background:var(--sage-soft); color:var(--sage-dark); border:1px solid rgba(94,139,110,.3); }
.flash-error { background:var(--peach-soft); color:#a35a36; border:1px solid rgba(231,166,124,.4); }

/* page header (inner pages) */
.page-head { background:linear-gradient(160deg,var(--sage-soft),var(--cream)); padding:3.4rem 0 2.6rem; text-align:center; }
.page-head .lead { margin:0 auto; }

/* footer */
.footer { background:var(--ink); color:rgba(255,255,255,.75); padding:3.5rem 0 2rem; margin-top:1rem; }
.footer a { color:rgba(255,255,255,.75); text-decoration:none; }
.footer a:hover { color:#fff; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:2rem; }
.footer h4 { color:#fff; font-family:var(--font-body); font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:1rem; }
.footer ul { list-style:none; margin:0; padding:0; }
.footer li { margin-bottom:.55rem; }
.footer .brand { color:#fff; margin-bottom:.6rem; }
.footer .tag { font-size:.95rem; line-height:1.6; max-width:32ch; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:2.5rem; padding-top:1.5rem; font-size:.85rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-bottom a { text-decoration:underline; }

/* breadcrumb */
.crumb { font-size:.9rem; color:var(--muted); margin-bottom:1rem; }
.crumb a { color:var(--sage-dark); text-decoration:none; }

/* responsive */
@media (max-width:900px){
  .hero-inner { grid-template-columns:1fr; gap:2rem; }
  .hero-art { order:-1; max-width:320px; margin:0 auto; }
  .grid-3 { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  /* Collapse to the hamburger menu early enough that the desktop nav never
     wraps/crowds on tablets and small laptops. */
  .nav-links, .nav-cta .btn-outline { display:none; }
  .qt-label { display:none; }
  .quiet-toggle { padding:.42rem .5rem; }
  .nav-toggle { display:block; }
  .nav-cta .btn-primary { white-space:nowrap; padding:.5rem 1rem; font-size:.9rem; }
  .nav.open .nav-links { display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; text-align:center; background:var(--cream); border-bottom:1px solid var(--line); padding:1rem 1.5rem; gap:1rem; }
  .nav.open .nav-links a { padding:.3rem 0; }
}
@media (max-width:600px){
  /* Phone: the header is tight, so drop the nav CTA button. Contact is one tap
     away via the hero button, the menu and the WhatsApp/chat float. */
  .nav-cta .btn-primary { display:none; }
}
@media (max-width:640px){
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .section { padding:3rem 0; }
}

/* research-informed reassurance list */
.reassure-list { list-style:none; margin:0; padding:0; }
.reassure-list li { display:flex; align-items:flex-start; gap:.7rem; margin-bottom:.95rem; color:var(--ink); font-weight:600; line-height:1.5; }
.reassure-list li:last-child { margin-bottom:0; }
.rl-tick { flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--sage-soft); color:var(--navy); display:flex; align-items:center; justify-content:center; }
.rl-tick svg { width:15px; height:15px; }

/* Quiet mode: a calmer, lower-sensory view (research-backed for autistic users) */
.quiet-toggle { display:inline-flex; align-items:center; gap:.4rem; background:none; border:1.5px solid var(--line); border-radius:999px; padding:.42rem .8rem; font-family:var(--font-body); font-size:.8rem; font-weight:700; color:var(--muted); cursor:pointer; }
.quiet-toggle:hover { border-color:var(--sage); color:var(--sage-dark); }
.quiet-toggle svg { width:15px; height:15px; }
/* Quiet mode: a clearly calmer, flat, low-sensory view. The `html` prefix lifts
   specificity so it wins across all three designs (v1, v2, v3). */
html body.quiet { background:#EAEEF3 !important; }
html body.quiet .hero, html body.quiet .page-head { background:#E1E7EF !important; }
html body.quiet .bg-sage, html body.quiet .bg-peach, html body.quiet .bg-lavender { background:#F0F3F7 !important; }
html body.quiet .strip { background:#54637E !important; }
html body.quiet .card, html body.quiet .card-soft, html body.quiet .quote, html body.quiet .chip { box-shadow:none !important; border-color:#DDE3EB !important; }
html body.quiet .icon, html body.quiet .svc-grid > * .icon { background:#E1E7EF !important; }
html body.quiet .icon svg, html body.quiet .svc-grid > * .icon svg { stroke:#3C4C68 !important; }
html body.quiet .btn-primary { background:#3C4C68 !important; }
html body.quiet .brand-yp { color:var(--muted) !important; }
html body.quiet .hero-art img { opacity:.9; }
body.quiet *, body.quiet *::before, body.quiet *::after { animation:none !important; transition:none !important; }
/* the toggle itself shows clearly as ON */
body.quiet .quiet-toggle { background:var(--navy); border-color:var(--navy); color:#fff; }

/* respect reduced motion (important for this audience) */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Gentle reveal-on-scroll (opt-in via JS; skipped for reduced-motion + quiet) */
.reveal { opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s ease; transition-delay:var(--reveal-delay,0ms); will-change:opacity, transform; }
.reveal.is-in { opacity:1; transform:none; }
body.quiet .reveal { opacity:1 !important; transform:none !important; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Floating action buttons: Facebook + AI assistant */
.fab-stack { position:fixed; right:20px; bottom:20px; z-index:2500; display:flex; flex-direction:column; gap:.7rem; align-items:center; }
.fab { width:54px; height:54px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(44,58,79,.24); transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.fab:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(44,58,79,.3); }
.fab svg { width:26px; height:26px; }
.fab-fb { background:#1877F2; color:#fff; text-decoration:none; }
.fab-fb:hover { background:#0f66d9; }
/* WhatsApp fab: self-contained SVG icon (green + white), identical across all themes */
.fab-wa { background:transparent; text-decoration:none; overflow:hidden; padding:0; }
.fab-wa img { width:100%; height:100%; display:block; }
.fab-toast { position:absolute; right:64px; bottom:0; white-space:nowrap; background:rgba(20,28,44,0.94); color:#fff; font-size:.82rem; font-weight:600; padding:.55rem .85rem; border-radius:10px; box-shadow:0 8px 22px rgba(20,28,44,.28); opacity:0; transform:translateX(8px); transition:opacity .25s ease, transform .25s ease; pointer-events:none; }
.fab-toast.show { opacity:1; transform:translateX(0); }
.fab-toast::after { content:''; position:absolute; right:-5px; bottom:14px; width:10px; height:10px; background:inherit; transform:rotate(45deg); }
.fab-chat { background:var(--sage); color:#fff; position:relative; }
.fab-chat:hover { background:var(--sage-dark); }
.fab-chat .ic-close { display:none; }
.fab-chat.is-open .ic-chat { display:none; }
.fab-chat.is-open .ic-close { display:block; }

/* AI assistant panel */
.chat-panel { position:fixed; right:20px; bottom:86px; z-index:2600; width:min(370px, calc(100vw - 40px)); max-height:min(72vh, 620px); background:var(--white); border:1px solid var(--line); border-radius:20px; box-shadow:0 24px 60px rgba(44,58,79,.28); display:flex; flex-direction:column; overflow:hidden; }
.chat-panel[hidden] { display:none !important; }
.chat-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.95rem 1.1rem; background:var(--sage); color:#fff; }
.chat-head-id { display:flex; align-items:center; gap:.6rem; }
.chat-head strong { font-family:var(--font-head); font-weight:600; display:block; line-height:1.15; }
.chat-head .chat-sub { font-size:.78rem; opacity:.85; }
.chat-dot { width:10px; height:10px; border-radius:50%; background:#8fd6a6; box-shadow:0 0 0 3px rgba(143,214,166,.3); flex-shrink:0; }
.chat-close { background:rgba(255,255,255,.16); border:none; color:#fff; width:32px; height:32px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.chat-close svg { width:18px; height:18px; }
.chat-close:hover { background:rgba(255,255,255,.28); }
.chat-log { flex:1; overflow-y:auto; padding:1.1rem; display:flex; flex-direction:column; gap:.7rem; background:var(--cream); }
.chat-msg { max-width:85%; }
.chat-msg p { margin:0; padding:.7rem .95rem; border-radius:16px; font-size:.96rem; line-height:1.55; }
.chat-msg.bot { align-self:flex-start; }
.chat-msg.bot p { background:var(--white); border:1px solid var(--line); border-bottom-left-radius:5px; color:var(--ink); }
.chat-msg.user { align-self:flex-end; }
.chat-msg.user p { background:var(--sage); color:#fff; border-bottom-right-radius:5px; }
.chat-msg.typing p { display:flex; gap:5px; }
.chat-msg.typing span { width:7px; height:7px; border-radius:50%; background:var(--muted); opacity:.5; animation:chatblink 1.2s infinite; }
.chat-msg.typing span:nth-child(2) { animation-delay:.2s; }
.chat-msg.typing span:nth-child(3) { animation-delay:.4s; }
@keyframes chatblink { 0%,60%,100%{opacity:.25; transform:translateY(0);} 30%{opacity:.9; transform:translateY(-3px);} }
.chat-suggest { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem; }
.chip-btn { background:var(--white); border:1px solid var(--line); color:var(--sage-dark); border-radius:999px; padding:.45rem .8rem; font-family:var(--font-body); font-size:.82rem; font-weight:700; cursor:pointer; transition:background .15s ease; }
.chip-btn:hover { background:var(--sage-soft); }
.chat-form { display:flex; gap:.5rem; padding:.7rem; border-top:1px solid var(--line); background:var(--white); }
.chat-form input { flex:1; border:1.5px solid var(--line); border-radius:999px; padding:.65rem 1rem; font-family:var(--font-body); font-size:.95rem; background:var(--cream); color:var(--ink); }
.chat-form input:focus { outline:none; border-color:var(--sage); }
.chat-send { flex-shrink:0; width:42px; height:42px; border-radius:50%; border:none; background:var(--sage); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.chat-send svg { width:19px; height:19px; }
.chat-send:hover { background:var(--sage-dark); }
.chat-note { margin:0; padding:.55rem 1.1rem .8rem; font-size:.74rem; color:var(--muted); background:var(--white); text-align:center; }
.chat-note a { color:var(--sage-dark); }
@media (max-width:520px){
  .chat-panel { right:12px; left:12px; bottom:82px; width:auto; }
  .fab-stack { right:14px; bottom:14px; }
}

/* Resources sub-navigation (anchor links) */
.res-subnav { position:sticky; top:0; z-index:900; background:rgba(251,247,240,0.94); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line); }
.res-subnav-inner { display:flex; flex-wrap:wrap; gap:.4rem; padding:.6rem 1.5rem; }
.res-subnav a { text-decoration:none; color:var(--sage-dark); font-weight:700; font-size:.9rem; padding:.4rem .9rem; border-radius:999px; border:1px solid var(--line); background:var(--white); }
.res-subnav a:hover { background:var(--sage-soft); border-color:var(--sage); }

/* County accordion (expandable signposting) */
.county-list { display:flex; flex-direction:column; gap:.9rem; max-width:900px; margin-left:auto; margin-right:auto; }
.county { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.county-summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 1.6rem; font-family:var(--font-head); font-weight:600; font-size:1.2rem; color:var(--ink); }
.county-summary::-webkit-details-marker { display:none; }
.county-summary::after { content:''; width:12px; height:12px; border-right:2px solid var(--sage); border-bottom:2px solid var(--sage); transform:rotate(45deg); transition:transform .2s ease; flex-shrink:0; }
.county[open] .county-summary::after { transform:rotate(-135deg); }
.county-count { font-family:var(--font-body); font-size:.82rem; font-weight:700; color:var(--muted); background:var(--sage-soft); padding:.25rem .7rem; border-radius:999px; margin-left:auto; }
.county-body { padding:0 1.6rem 1.6rem; }
.county-note { color:var(--muted); margin:0; }
@media (prefers-reduced-motion:reduce){ .county-summary::after { transition:none; } }

/* Footer social icons */
.footer-social { display:flex; gap:.6rem; margin-top:1rem; }
.footer-social a { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1); color:rgba(255,255,255,.85); transition:background .18s ease, color .18s ease; }
.footer-social a:hover { background:rgba(255,255,255,.2); color:#fff; }
.footer-social svg { width:19px; height:19px; }

/* Demo design switcher (floating version picker) */
.design-switcher {
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:3000; display:flex; align-items:center; gap:.25rem;
  background:rgba(20,28,44,0.92); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14); border-radius:999px;
  padding:.3rem .35rem .3rem .9rem; box-shadow:0 12px 34px rgba(20,28,44,.28);
}
.design-switcher .ds-label { color:rgba(255,255,255,.6); font-family:var(--font-body); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; margin-right:.35rem; }
.ds-btn { display:flex; align-items:center; gap:.38rem; text-decoration:none; color:rgba(255,255,255,.82); background:transparent; border-radius:999px; padding:.38rem .72rem; font-family:var(--font-body); font-size:.84rem; font-weight:700; white-space:nowrap; transition:background .18s ease, color .18s ease; }
.ds-btn b { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.14); font-size:.78rem; flex-shrink:0; }
.ds-btn:hover { background:rgba(255,255,255,.1); color:#fff; }
.ds-btn.is-active { background:#fff; color:#1a2438; }
.ds-btn.is-active b { background:rgba(26,36,56,.12); color:#1a2438; }
/* Eight variants: below a wide desktop width, show numbers only so the pill
   row never crowds or overflows on laptops, tablets and phones. */
@media (max-width:1300px){
  .ds-btn span { display:none; }
  .design-switcher .ds-label { display:none; }
  .ds-btn { padding:.4rem; gap:0; }
}
@media (max-width:520px){
  .design-switcher { bottom:12px; padding:.24rem .3rem; gap:.16rem; }
  .ds-btn { padding:.34rem; }
  .ds-btn b { width:18px; height:18px; font-size:.72rem; }
}

/* Home v1: hero illustration + small logo mark composition */
.hero-art-stack { position:relative; display:inline-block; width:100%; max-width:440px; }
.hero-illustration {
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  background:var(--white);
}
.hero-mark {
  position:absolute;
  right:-14px;
  bottom:-14px;
  width:104px;
  height:104px;
  border-radius:50%;
  background:var(--white);
  padding:.35rem;
  box-shadow:var(--shadow-sm);
}
@media (max-width:640px){
  .hero-mark { width:78px; height:78px; right:-6px; bottom:-6px; }
}

/* ===========================================================================
   Mobile-friendliness + polish pass (shared across all three designs)
   Root-cause fixes for overflow, tap targets, refined nav + hero CTAs.
   =========================================================================== */

/* Belt-and-braces guard against any horizontal page scroll. overflow:clip
   (not hidden) so it never turns the body into a scroll container and so it
   never clips the fixed FABs / chat panel / design switcher. */
html { overflow-x:clip; }
body { overflow-x:clip; }

/* Buttons never overflow their container on very small screens */
.btn { max-width:100%; }

/* --- Refined, compact navigation on phones -------------------------------- */
/* Higher-specificity selectors so these win over v2/v3 brand + button rules. */
@media (max-width:640px){
  .nav .nav-inner { padding:.55rem 1rem; gap:.5rem; }
  .nav .nav-inner .brand { font-size:1.24rem; }
  .nav .nav-inner .brand .mark { width:40px; height:40px; }
  .nav .nav-cta { gap:.45rem; }
  .nav .nav-cta .btn-primary { padding:.52rem .95rem; font-size:.9rem; }
  /* usable, well-spaced mobile menu with proper tap targets */
  .nav.open .nav-links { padding:.6rem 1rem 1rem; gap:.2rem; }
  .nav.open .nav-links a { display:block; padding:.7rem .3rem; font-size:1.02rem; border-radius:10px; }
  .nav.open .nav-links a:hover { background:var(--sage-soft); }
}
@media (max-width:380px){
  .nav .nav-inner { padding:.5rem .8rem; gap:.4rem; }
  .nav .nav-inner .brand { font-size:1.08rem; }
  .nav .nav-inner .brand .mark { width:36px; height:36px; }
  .nav .nav-cta { gap:.35rem; }
  .nav .nav-cta .btn-primary { padding:.5rem .8rem; font-size:.85rem; }
  .quiet-toggle { padding:.4rem .45rem; }
}

/* --- Hero CTAs: tidy width + even, tight spacing on phones ----------------- */
/* The reported bug: btn-lg buttons wrapped to uneven widths with a big gap.
   On phones stack them full-width with a small consistent gap. */
@media (max-width:560px){
  /* centre the hero buttons, auto-width so they hug their text */
  .hero-cta { gap:.6rem .7rem; justify-content:center; }
  .hero-cta .btn { width:auto; }
  .hero-cta .btn-lg { padding:.78rem 1.5rem; font-size:.95rem; }
  /* smaller, tighter floating buttons so they do not crowd the hero */
  .fab { width:46px; height:46px; }
  .fab svg { width:22px; height:22px; }
  .fab-wa svg { width:26px; height:26px; }
  .fab-stack { right:12px; bottom:14px; gap:.5rem; }
}
/* mobile-only "Get in touch" inside the hamburger menu */
.mob-only { display:none; }
.nav.open .mob-only { display:block; }

/* --- Comfortable tap targets + calmer spacing on phones ------------------- */
@media (max-width:640px){
  .section { padding:2.8rem 0; }
  .section-tight { padding:2.4rem 0; }
  .strip { padding:2rem 1.4rem; }
  .card { padding:1.5rem; }
  .card-soft { padding:1.4rem; }
  .page-head { padding:2.8rem 0 2.2rem; }
  .footer { padding:3rem 0 2rem; }
  .footer-bottom { margin-top:2rem; }
  /* the standalone hero-cta on inner pages / final CTA reads better centred */
  .center .btn { max-width:100%; }
}

/* --- Chat + FAB refinements on small screens ------------------------------ */
/* Prevent iOS zoom-on-focus (needs >=16px) and give a touch more clearance
   between the bottom-right FAB stack and the centred design switcher. */
@media (max-width:560px){
  .chat-form input { font-size:16px; }
  .chat-close { width:36px; height:36px; }
}
@media (max-width:360px){
  .fab { width:50px; height:50px; }
  .fab svg { width:24px; height:24px; }
  .fab-wa svg { width:27px; height:27px; }
  .fab-stack { right:12px; gap:.6rem; }
}

/* ===========================================================================
   Rebuild 2026-08: Bloom YP content model (shorter, more visual, honest).
   New homepage bands, offer/coming-soon, founders' promise, resource images,
   team teaser, crisis block, privacy note, county signposting.
   =========================================================================== */

/* Footer wordmark: keep the blue "YP" legible on the dark footer */
/* Keep the "YP" reading as blue on the dark footer (light blue tint of the navy,
   legible on dark, still clearly blue not teal, for brand consistency). */
.footer .brand-yp { color:#8FB4EE; }

/* Generic linked card (resource + team teasers) */
.card-link { text-decoration:none; color:inherit; display:block; transition:transform .18s ease, box-shadow .18s ease; }
.card-link:hover { transform:translateY(-3px); box-shadow:var(--shadow); }

/* Hero: large brand lock-up beside the family illustration */
.hero-lockup { display:block; width:160px; height:auto; margin-bottom:1.3rem; }
@media (max-width:900px){ .hero-lockup { margin-bottom:1rem; } }
@media (max-width:560px){ .hero-lockup { width:124px; } }

/* Why choose Bloom YP band */
.why-grid { grid-template-columns:repeat(4,1fr); }
.why-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-sm); }
.why-card h3 { font-size:1.12rem; margin:.1rem 0 .4rem; }
.why-card p { color:var(--muted); margin:0; font-size:.96rem; }
.why-tick { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:var(--navy-soft); color:var(--navy); margin-bottom:.9rem; }
.why-tick svg { width:20px; height:20px; }
@media (max-width:900px){ .why-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .why-grid { grid-template-columns:1fr; } }

/* Featured "all behaviour is communication" line */
.behaviour-line { text-align:center; font-family:var(--font-head); font-size:clamp(1.3rem,2.6vw,1.75rem); color:var(--navy); line-height:1.35; max-width:26ch; margin:2.8rem auto 0; }

/* Offer now + coming soon */
.offer-split { margin-top:3rem; display:grid; gap:2rem; }
.offer-now > .eyebrow { text-align:center; }
.coming-soon { background:var(--white); border:1px dashed rgba(48,72,120,0.28); border-radius:var(--radius); padding:1.6rem 1.8rem; }
.coming-soon .cs-label { margin:0 0 .7rem; }
.cs-tag { display:inline-block; background:var(--navy-soft); color:var(--navy-dark); font-weight:800; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; padding:.4rem .85rem; border-radius:999px; }
.cs-intro { color:var(--muted); font-size:.95rem; margin:0 0 1rem; max-width:70ch; }
.cs-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.cs-list li { background:var(--cream); border:1px solid var(--line); border-radius:999px; padding:.5rem 1rem; font-size:.92rem; color:var(--muted); }

/* Founders' promise (replaces testimonials) */
.promise-card { background:var(--white); }
.promise-signoff { font-family:var(--font-head); color:var(--navy); font-size:1.15rem; margin:1.3rem 0 0; }
.promise-signoff::before { content:"With care, "; color:var(--muted); font-family:var(--font-body); font-size:.95rem; font-weight:600; }

/* Resource cards with a leading image (or a calm coloured band) */
.res-card { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.res-card-img { width:100%; height:172px; object-fit:cover; display:block; }
.res-card-band { display:block; height:172px; background:linear-gradient(135deg,var(--navy-soft),var(--teal-soft)); }
.res-card-body { padding:1.6rem; }
.res-card-body p:last-of-type { margin-bottom:0; }
.res-more, .res-link { color:var(--navy-dark); font-weight:700; text-decoration:none; }
.res-more { display:inline-block; margin-top:1rem; }
.res-link:hover { text-decoration:underline; }

/* Team teaser (homepage) + real team photos (About) */
.team-teaser-card { text-align:center; }
.team-teaser-photo { width:118px; height:118px; border-radius:50%; object-fit:cover; margin:0 auto 1rem; display:block; box-shadow:var(--shadow-sm); }
.team-teaser-card h3 { margin-bottom:.3rem; }
.team-teaser-card .role { color:var(--navy-dark); font-weight:700; font-size:.9rem; margin:0; }
.team-photo { width:124px; height:124px; border-radius:50%; object-fit:cover; margin:0 auto 1rem; display:block; box-shadow:var(--shadow-sm); }

/* Article body image + honesty note */
.article-img { width:100%; border-radius:var(--radius); margin-bottom:1.6rem; box-shadow:var(--shadow-sm); }
.article-note { color:var(--muted); font-size:.95rem; border-top:1px solid var(--line); padding-top:1.2rem; margin-top:1.8rem; }

/* County signposting */
.county-list { display:grid; gap:2.2rem; }
.county { border-left:3px solid var(--teal); padding-left:1.3rem; }
.county-head h3 { margin-bottom:.25rem; font-size:1.4rem; }
.county-note { color:var(--muted); margin:0; max-width:70ch; }

/* Contact privacy note */
.privacy-note { display:flex; gap:1rem; align-items:flex-start; margin-top:1.6rem; padding:1.2rem 1.4rem; background:var(--navy-soft); border:1px solid var(--line); border-radius:var(--radius-sm); }
.pn-icon { flex-shrink:0; width:40px; height:40px; border-radius:12px; background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:center; }
.pn-icon svg { width:22px; height:22px; }
.privacy-note h3 { font-size:1.05rem; margin-bottom:.3rem; }
.privacy-note p { margin:0; color:var(--muted); font-size:.92rem; }

/* Crisis / urgent-help block (site-wide, in the footer) */
.crisis { border-top:1px solid rgba(255,255,255,.12); margin-top:2.5rem; padding-top:2rem; }
.crisis-head { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.3rem; }
.crisis-badge { flex-shrink:0; width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center; }
.crisis-badge svg { width:22px; height:22px; }
.crisis h4 { color:#fff; font-family:var(--font-head); font-weight:600; font-size:1.2rem; text-transform:none; letter-spacing:normal; margin-bottom:.3rem; }
.crisis-head p { margin:0; color:rgba(255,255,255,.72); font-size:.92rem; max-width:74ch; line-height:1.6; }
.crisis-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.7rem; }
.crisis-list li { display:flex; flex-direction:column; gap:.15rem; padding:.7rem .95rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:12px; }
.crisis-name { font-weight:700; color:#fff; font-size:.9rem; }
.crisis-contact { color:#fff; font-weight:800; font-size:1.05rem; text-decoration:none; }
a.crisis-contact:hover { text-decoration:underline; }
.crisis-note { color:rgba(255,255,255,.62); font-size:.82rem; line-height:1.45; }

/* Quiet mode: calm the new brand accents too */
html body.quiet .why-tick, html body.quiet .cs-tag { background:#E1E7EF !important; color:#3C4C68 !important; }
html body.quiet .behaviour-line, html body.quiet .promise-signoff { color:#3C4C68 !important; }
html body.quiet .res-card-band { background:#E1E7EF !important; }
html body.quiet .county { border-left-color:#B9C4D4 !important; }
html body.quiet .footer .brand-yp { color:var(--muted) !important; }

/* Nav uses the full Bloom YP logo image (icon + wordmark), no separate text */
.brand-logo { height:46px; width:auto; display:block; }
@media (max-width:640px){ .nav .nav-inner .brand-logo { height:40px; } }

/* Mobile: tighten vertical rhythm so the page is not endlessly long/empty */
@media (max-width:640px){
  .section { padding:2.4rem 0; }
  .section-tight { padding:1.8rem 0; }
  .hero-inner { padding-top:2.2rem; padding-bottom:2.2rem; }
  .wrap .center h2, .section h2 { margin-bottom:.5rem; }
}

/* Mobile: centre the text-based cards (why-choose, help areas, offered-now) so
   they read cleanly on a phone */
@media (max-width:640px){
  .why-card, .svc-grid .card, .offer-now .card { text-align:center; }
  .why-card .why-tick, .svc-grid .icon, .offer-now .icon { margin-left:auto; margin-right:auto; }
  .why-grid, .svc-grid { justify-items:stretch; }
}

/* Nav dropdown (Resources) - hover/focus on desktop, expanded in the mobile menu */
.nav-has-drop { position:relative; }
.nav-caret { width:13px; height:13px; vertical-align:-1px; margin-left:1px; }
.nav-drop { position:absolute; top:100%; left:0; min-width:210px; background:var(--white); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:.5rem; list-style:none; margin:.5rem 0 0; display:none; z-index:1100; }
/* Desktop only: hover/focus opens the dropdown. On mobile the accordion is
   controlled solely by the .is-open class (JS), so focus does not force it open. */
@media (min-width:901px){
  .nav-has-drop:hover .nav-drop, .nav-has-drop:focus-within .nav-drop, .nav-has-drop.is-open .nav-drop { display:block; }
  /* Invisible bridge across the gap so moving the mouse from "Resources" down
     to the items keeps the menu open instead of closing under the cursor. */
  .nav-has-drop::after { content:""; position:absolute; top:100%; left:0; right:0; height:.6rem; }
  /* The arrow is a click target that pins the menu open (stays when the mouse
     moves away). The text still links through to the resources page. */
  .nav-has-drop > a .nav-caret { cursor:pointer; padding:6px; margin:-6px -2px; box-sizing:content-box; border-radius:6px; transition:transform .2s ease, background .15s ease; }
  .nav-has-drop > a .nav-caret:hover { background:var(--sage-soft); }
  .nav-has-drop.is-open > a .nav-caret { transform:rotate(180deg); }
}
.nav-drop li { margin:0; }
.nav-drop a { display:block; padding:.55rem .8rem; border-radius:8px; font-size:.95rem; white-space:nowrap; color:var(--ink); }
.nav-drop a:hover { background:var(--sage-soft); color:var(--sage-dark); }
@media (max-width:900px){
  /* Resources sub-menu becomes a tap-to-expand accordion, clearly nested. */
  .nav.open .nav-has-drop > a { display:flex; align-items:center; justify-content:center; gap:.35rem; }
  .nav-caret { display:inline-block; transition:transform .2s ease; }
  .nav-has-drop.is-open > a .nav-caret { transform:rotate(180deg); }
  .nav-drop {
    position:static; display:none; box-shadow:none; border:none; min-width:0;
    background:var(--sage-soft); border-radius:12px; text-align:center;
    padding:.3rem .6rem; margin:.55rem auto .1rem; max-width:300px;
  }
  .nav-has-drop.is-open .nav-drop { display:block; }
  .nav-drop li:not(:last-child) { border-bottom:1px solid rgba(48,72,120,.08); }
  .nav-drop a { display:block; padding:.65rem 0; font-size:.92rem; color:var(--sage-dark); border-radius:0; }
  .nav-drop a:hover { background:transparent; }
}

/* ==========================================================================
   Instagram "Follow us" section (shared across all home designs).
   Self-contained, no third-party scripts. IG gradient accents, square tiles
   with a soft caption overlay on hover/focus. Quiet mode calms the motion.
   ========================================================================== */
.ig-section { background:linear-gradient(180deg,#FFFFFF 0%, #F6F3FA 100%); }
.ig-head { text-align:center; max-width:640px; margin:0 auto; }
.ig-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:16px; color:#fff; margin-bottom:1rem;
  background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  box-shadow:0 10px 24px rgba(188,24,136,0.28);
}
.ig-badge svg { width:30px; height:30px; }
.ig-eyebrow { color:#C13584; }
.ig-handle {
  display:inline-block; margin:.5rem 0 .2rem; font-weight:800; font-size:1.15rem;
  letter-spacing:.01em; text-decoration:none;
  background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ig-handle:hover { text-decoration:underline; text-decoration-color:#dc2743; }
.ig-intro { margin-top:.6rem; }

.ig-grid {
  list-style:none; padding:0; margin:2.4rem 0 0;
  /* Mobile default: a horizontal swipe strip so the section stays compact and
     you scroll sideways to see more. Becomes a grid at wider widths. */
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding-bottom:.6rem; scrollbar-width:none;
}
.ig-grid::-webkit-scrollbar { display:none; }
.ig-tile { margin:0; flex:0 0 80%; scroll-snap-align:start; }
.ig-tile a {
  display:flex; flex-direction:column; height:100%; overflow:hidden; border-radius:18px;
  background:#fff; border:1px solid var(--line); box-shadow:0 8px 22px rgba(33,55,98,.08);
  text-decoration:none; color:var(--ink); outline-offset:3px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.ig-tile a:hover, .ig-tile a:focus-visible { transform:translateY(-3px); box-shadow:0 16px 34px rgba(33,55,98,.15); }
.ig-thumb { position:relative; display:block; aspect-ratio:1/1; background:#EFE9F3; overflow:hidden; }
.ig-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.ig-tile a:hover .ig-thumb img, .ig-tile a:focus-visible .ig-thumb img { transform:scale(1.05); }
.ig-thumb-badge {
  position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(45deg,#f09433,#dc2743,#bc1888); box-shadow:0 4px 12px rgba(188,24,136,.35);
}
.ig-thumb-badge svg { width:17px; height:17px; }
.ig-body { display:flex; flex-direction:column; gap:.55rem; padding:1rem 1.1rem 1.1rem; flex:1; }
.ig-caption {
  font-size:.96rem; line-height:1.5; color:var(--ink); margin:0;
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.ig-meta { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding-top:.3rem; }
.ig-date { font-size:.82rem; color:var(--muted); }
.ig-view { font-size:.85rem; font-weight:700; color:#C13584; display:inline-flex; align-items:center; gap:.25rem; white-space:nowrap; }
.ig-view::after { content:"\2192"; }

.ig-cta { margin-top:2.4rem; }
.ig-follow-btn {
  display:inline-flex; align-items:center; gap:.6rem; color:#fff; border:none;
  padding:.85rem 1.7rem; font-weight:700;
  background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  box-shadow:0 10px 26px rgba(188,24,136,0.30);
}
.ig-follow-btn:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(188,24,136,0.4); color:#fff; }
.ig-follow-btn svg { width:20px; height:20px; }

@media (min-width:560px){
  .ig-grid { display:grid; grid-template-columns:repeat(2,1fr); overflow:visible; gap:18px; padding-bottom:0; }
  .ig-tile { flex:none; }
}
@media (min-width:1000px){ .ig-grid { grid-template-columns:repeat(4,1fr); gap:20px; } }

/* Calm the motion in quiet mode or for reduced-motion users */
body.quiet .ig-thumb img, body.quiet .ig-tile a { transition:none; }
body.quiet .ig-tile a:hover, body.quiet .ig-tile a:focus-visible { transform:none; }
body.quiet .ig-tile a:hover .ig-thumb img { transform:none; }
@media (prefers-reduced-motion:reduce){ .ig-thumb img, .ig-tile a, .ig-follow-btn { transition:none; } }

/* Stacked (square) nav logo: a touch larger than the wordmark so the "bloomYP"
   under the mark stays legible in the bar. */
.brand-logo--stacked { height:72px; }
@media (max-width:640px){
  .nav .nav-inner .brand-logo--stacked { height:56px; }
  .nav .nav-inner { min-height:70px; }   /* keep a comfortable bar height on phones */
}

/* Team member qualifications and training list (About page) */
.quals-head { margin:1.1rem 0 .5rem; font-weight:800; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--navy); }
.quals-list { list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.quals-list li { position:relative; padding-left:1.4rem; font-size:.95rem; line-height:1.45; color:var(--muted); }
.quals-list li::before { content:""; position:absolute; left:.2rem; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--teal, #4F9DAA); }

/* Balanced team rows on About: photo left, details right; stacks on mobile. */
.team-rows { display:grid; gap:1.5rem; max-width:940px; margin:2.6rem auto 0; }
.team-row {
  display:grid; grid-template-columns:190px 1fr; gap:2rem; align-items:start;
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:1.7rem 1.9rem; box-shadow:0 8px 24px rgba(33,55,98,.06);
}
.team-row-photo { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:16px; display:block; }
.team-row .avatar { width:120px; height:120px; }
.team-row-body h3 { margin:0 0 .15rem; }
.team-row-body .role { margin:0 0 .9rem; color:var(--teal, #4F9DAA); font-weight:700; }
.quals-list--cols { grid-template-columns:1fr 1fr; gap:.4rem 1.4rem; }
@media (max-width:680px){
  .team-row { grid-template-columns:1fr; gap:1.1rem; padding:1.4rem; }
  .team-row-media { max-width:150px; }
  .quals-list--cols { grid-template-columns:1fr; }
}

/* JWS signature in the footer: brand orange name + tangerine mark */
.jws-credit { color:#FF6B35; font-weight:700; text-decoration:none; }
.jws-credit:hover { text-decoration:underline; }

/* Downloadable resource cards (printable PDFs) */
.dl-grid { max-width:780px; margin-left:auto; margin-right:auto; grid-template-columns:repeat(2,1fr); }
.dl-card { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.dl-thumb { background:#fff; padding:16px 16px 0; display:block; }
.dl-thumb img { width:100%; height:220px; object-fit:contain; display:block; }
.dl-card .res-card-body { padding:1.2rem 1.4rem 1.4rem; }
.dl-btn { display:inline-flex; align-items:center; gap:.5rem; margin-top:.9rem; font-weight:700; color:var(--sage-dark); font-size:.95rem; }
.dl-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dl-card:hover .dl-btn, .dl-card:focus-visible .dl-btn { text-decoration:underline; }
@media (max-width:640px){ .dl-grid { grid-template-columns:1fr; } }

/* Resources search + topic filter */
.res-filter { background:var(--cream); border-bottom:1px solid var(--line); }
.res-filter .wrap { padding-top:1.5rem; padding-bottom:1.4rem; }
.res-search-wrap { position:relative; max-width:580px; }
.res-search-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--muted); pointer-events:none; }
#res-search { width:100%; padding:.85rem 1rem .85rem 2.9rem; font-size:1rem; font-family:inherit; border:1.5px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); }
#res-search:focus { outline:none; border-color:var(--sage); box-shadow:0 0 0 3px var(--sage-soft); }
.res-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.res-chip { font-family:inherit; font-size:.88rem; font-weight:700; cursor:pointer; padding:.42rem .95rem; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--muted); transition:background .15s, color .15s, border-color .15s; }
.res-chip:hover { border-color:var(--sage); color:var(--sage-dark); }
.res-chip.is-active { background:var(--sage); border-color:var(--sage); color:#fff; }
.res-noresults { text-align:center; color:var(--muted); font-size:1.05rem; padding:1.6rem 0; }
/* guarantee filtered items/groups hide regardless of other display rules */
.res-item[hidden], [data-res-group][hidden], #res-noresults[hidden], #res-stagenote[hidden] { display:none !important; }
@media (max-width:560px){ .res-search-wrap { max-width:none; } }

/* Chat: "talk to a person" options + form pre-fill note */
.chat-human { border-top:1px solid var(--line); padding:.75rem .95rem .85rem; }
.chat-human-label { display:block; font-size:.82rem; font-weight:700; color:var(--muted); margin-bottom:.5rem; }
.chat-human-row { display:flex; gap:.5rem; flex-wrap:wrap; }
.chat-human-btn { display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:700; text-decoration:none; color:var(--sage-dark); background:var(--sage-soft); border:1px solid var(--line); border-radius:999px; padding:.42rem .85rem; }
.chat-human-btn:hover { background:var(--white); border-color:var(--sage); }
.chat-human-btn svg { width:15px; height:15px; }
.chat-human .chat-note { margin:.7rem 0 0; font-size:.75rem; color:var(--muted); }
.prefill-note { background:var(--sage-soft); border:1px solid var(--line); border-radius:10px; padding:.7rem .9rem; font-size:.9rem; color:var(--ink); margin-bottom:.8rem; }

/* Resources page: quick links, synced with the nav dropdown (content.RESOURCE_NAV) */
.res-quicklinks { border-bottom:1px solid var(--line); background:var(--white); }
.res-quicklinks .wrap { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem 1.2rem; padding-top:.85rem; padding-bottom:.85rem; }
.res-quicklinks-label { font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.res-quicklinks ul { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; list-style:none; margin:0; padding:0; }
.res-quicklinks a { font-size:.92rem; font-weight:600; color:var(--sage-dark); text-decoration:none; border-bottom:2px solid transparent; padding-bottom:2px; }
.res-quicklinks a:hover { border-bottom-color:var(--sage); }

/* Structured guide bodies (headings, lists, quotes) + on-page download block */
.prose-h { font-size:1.35rem; margin:2.1rem 0 .6rem; color:var(--ink); }
.prose .prose-h:first-child { margin-top:0; }
.prose-ul { margin:0 0 1.3rem 1.1rem; padding:0; }
.prose-ul li { margin:.35rem 0; color:var(--ink); line-height:1.6; }
.prose-quote { margin:1.3rem 0; padding:.9rem 1.2rem; border-left:4px solid var(--sage); background:var(--sage-soft); border-radius:0 12px 12px 0; font-style:italic; color:var(--ink); }
.prose-quote p:last-child { margin-bottom:0; }
.guide-download { display:flex; gap:1.3rem; align-items:center; flex-wrap:wrap; margin:2.2rem 0 .5rem; padding:1.4rem; background:var(--peach-soft); border:1px solid var(--line); border-radius:16px; }
.guide-download-thumb { width:120px; height:auto; border-radius:8px; box-shadow:var(--shadow-sm); flex-shrink:0; }
.guide-download > div { flex:1; min-width:210px; }
.guide-download h3 { margin-bottom:.3rem; }
.guide-download p { color:var(--muted); margin-bottom:.9rem; }
@media (max-width:560px){ .guide-download { flex-direction:column; align-items:flex-start; } }

/* "Ask our assistant" help block at the foot of every resource guide */
.guide-help { margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.guide-help .article-note { border:none; padding-top:0; margin-top:0; }
.guide-help-actions { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.1rem; }
.guide-help-note { color:var(--muted); font-size:.88rem; margin-top:1rem; margin-bottom:0; }

/* Chat: expand / collapse for a bigger reading area on desktop */
.chat-head-actions { display:flex; align-items:center; gap:.4rem; }
.chat-expand .ic-collapse { display:none; }
.chat-panel.expanded .chat-expand .ic-expand { display:none; }
.chat-panel.expanded .chat-expand .ic-collapse { display:block; }
@media (min-width:641px){
  .chat-panel { transition:width .18s ease, max-height .18s ease; }
  .chat-panel.expanded { width:min(600px, calc(100vw - 40px)); max-height:min(88vh, 900px); }
}
@media (max-width:640px){ .chat-expand { display:none; } }

/* Chat: full-screen mode */
.chat-fs .ic-fs-exit { display:none; }
.chat-panel.fullscreen .chat-fs .ic-fs { display:none; }
.chat-panel.fullscreen .chat-fs .ic-fs-exit { display:block; }
.chat-panel.fullscreen .chat-expand { display:none; }   /* expand is redundant in full screen */
.chat-panel.fullscreen {
  right:0; left:0; top:0; bottom:0; width:auto; height:auto;
  max-height:none; border-radius:0; border:none;
}
/* Keep the reading column centred and comfortable on wide screens in full screen */
@media (min-width:721px){
  .chat-panel.fullscreen .chat-log,
  .chat-panel.fullscreen .chat-form,
  .chat-panel.fullscreen .chat-human { padding-left:max(1.1rem, calc(50% - 340px)); padding-right:max(1.1rem, calc(50% - 340px)); }
}

/* Homepage newsletter subscribe band */
.subscribe-band { background:var(--sage-soft); }
.subscribe-form { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; max-width:540px; margin:1.6rem auto 0; }
.subscribe-form input[type=email] { flex:1 1 260px; min-width:0; padding:.82rem 1.15rem; border-radius:999px; border:1.5px solid var(--line); background:var(--white); font-family:inherit; font-size:1rem; color:var(--ink); }
.subscribe-form input[type=email]:focus { outline:none; border-color:var(--sage); box-shadow:0 0 0 3px rgba(48,72,120,.14); }
@media (max-width:520px){ .subscribe-form { flex-direction:column; } .subscribe-form input[type=email] { flex:0 0 auto; width:100%; } .subscribe-form .btn { width:100%; } }

/* Compact, collapsible "Talk to a person" handoff (keeps the panel conversation-first) */
.chat-human { border-top:1px solid var(--line); padding:.45rem .9rem; }
.chat-human-toggle { display:inline-flex; align-items:center; gap:.4rem; background:none; border:none; cursor:pointer; font-family:inherit; font-size:.82rem; font-weight:700; color:var(--sage-dark); padding:.3rem 0; }
.chat-human-toggle > svg:first-child { width:15px; height:15px; }
.chat-human-caret { width:14px; height:14px; transition:transform .2s ease; }
.chat-human-toggle.is-open .chat-human-caret { transform:rotate(180deg); }
.chat-human-opts { display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin-top:.35rem; padding-bottom:.15rem; }
.chat-human-opts[hidden] { display:none; }
.chat-human-link { font-size:.82rem; font-weight:700; color:var(--sage-dark); text-decoration:none; border-bottom:1px solid transparent; }
.chat-human-link:hover { border-bottom-color:var(--sage); }