/* ===========================================================
   Lantern Psychology Centre — shared stylesheet
   Deep Dusk Blue brand system. Every page in the project
   links to this file: <link rel="stylesheet" href="style.css">
   =========================================================== */

:root{
  --ink: #16283A; --ink-2: #1E3752; --ink-3: #2C4A66;
  --blue: #3E6C99; --blue-deep: #2C517A; --blue-light: #8FB1CE;
  --sage: #ABB98C; --sage-deep: #5F7049;
  --parchment: #F5F3EC; --parchment-2: #EAE6DA; --border: #DEDACB;
  --charcoal: #24282B; --cream: #EDEEE7; --cream-dim: rgba(237,238,231,.72);
  --amber-bg: #F3E6CE; --amber-deep: #8A6A2F;
  --gray-bg: #E7E5DD; --gray-deep: #6B6D66;
  --sage-bg: #E6EBDB; --blue-bg: #E3ECF3;

  /* Clinician availability colours. Deliberately NOT part of the brand palette —
     these carry meaning (who is taking clients) and must stay distinguishable
     from each other no matter which colour direction is chosen. */
  --status-accept-bg: #E6EBDB; --status-accept-tx: #5F7049;
  --status-assess-bg: #E3ECF3; --status-assess-tx: #2C517A;
  --status-wait-bg:   #F3E6CE; --status-wait-tx:   #8A6A2F;
  --status-closed-bg: #E7E5DD; --status-closed-tx: #6B6D66;
  --measure: 62ch;
}

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Inter:wght@400;500;600;700&display=swap');

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--parchment);
  color: var(--charcoal);
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  color: inherit;
}
p{ margin: 0; }
a{ color: inherit; text-decoration: none; }
img,svg{ display:block; max-width:100%; }
ul,ol{ margin:0; padding:0; }

.eyebrow{
  font-family:'Inter',sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.wrap{ max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow{ max-width: 820px; margin: 0 auto; padding: 0 32px; }

.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ================= BUTTONS ================= */
.btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14.5px; letter-spacing: .01em;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-blue{ background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: var(--cream); }
.btn-blue:hover{ box-shadow: 0 12px 28px -8px rgba(62,108,153,.55); }
.btn-outline-dark{ background: transparent; color: var(--cream); border-color: rgba(237,238,231,.35); }
.btn-outline-dark:hover{ border-color: var(--blue-light); color: var(--blue-light); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: rgba(36,40,43,.25); }
.btn-ghost:hover{ border-color: var(--blue-deep); color: var(--blue-deep); }
.btn svg{ width: 15px; height: 15px; }

.text-link{
  font-weight: 600; font-size: 14.5px;
  border-bottom: 1px solid var(--blue-deep); padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.text-link:hover{ color: var(--blue-deep); }
.text-link.sage{ border-bottom-color: var(--sage-deep); }
.text-link.sage:hover{ color: var(--sage-deep); }

/* ================= PAGE HEADER BAND ================= */
/* Reusable dark header for every interior page (no video/hero, just eyebrow + title + intro) */
.page-top{ background: var(--ink); color: var(--cream); padding: 64px 0 56px; position: relative; overflow: hidden; }
.page-top .eyebrow{ color: var(--blue-light); }
.page-top h1{ margin-top: 12px; font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 600; color: var(--cream); max-width: 22ch; }
.page-top p{ margin-top: 16px; max-width: 62ch; color: var(--cream-dim); font-size: 16.5px; }
.page-top .glow-orb{
  position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(62,108,153,.28) 0%, rgba(62,108,153,.07) 42%, rgba(62,108,153,0) 70%);
  pointer-events: none;
}

/* ================= SECTION HEAD ================= */
.section-head{ max-width: 640px; margin-bottom: 44px; }
.section-head .eyebrow{ color: var(--blue-deep); }
.section-head h2{ margin-top: 14px; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 500; }
.section{ padding: 80px 0; }
.section.tight{ padding: 50px 0; }
.section-alt{ background: var(--parchment-2); }

/* ================= CARDS ================= */
.card-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card-grid.two-col{ grid-template-columns: repeat(2, 1fr); }
.info-card{
  background: var(--parchment); border-radius: 20px; padding: 32px 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.info-card:hover{ transform: translateY(-5px); box-shadow: 0 22px 40px -22px rgba(36,40,43,.35); }
.section-alt .info-card{ background: var(--parchment); }
.info-card h3{ font-size: 19px; font-weight: 600; }
.info-card p{ color: #494D46; font-size: 15px; }
.dot{
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle, var(--sage) 0%, var(--sage-deep) 100%);
  box-shadow: 0 0 0 5px rgba(171,185,140,.22);
}
.card-link{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--blue-deep);
}
.card-link svg{ width:14px; height:14px; transition: transform .2s ease; }
.info-card:hover .card-link svg{ transform: translateX(3px); }

/* ================= LINK ROWS (quick links / index lists) ================= */
.link-row-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.link-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; background: var(--parchment-2); border-radius: 14px;
  font-size: 14.5px; font-weight: 600;
  transition: background .25s ease, transform .25s ease;
}
.link-row:hover{ background: var(--ink); color: var(--cream); transform: translateY(-2px); }
.link-row svg{ width: 14px; height: 14px; flex-shrink: 0; opacity: .6; }

/* ================= PROSE (long-form content pages) ================= */
.prose{ max-width: var(--measure); font-size: 16.5px; color: #3B3F3B; margin-left: auto; margin-right: auto; }
.prose h2{ font-size: 22px; font-weight: 600; color: var(--charcoal); margin: 40px 0 14px; }
.prose h2:first-child{ margin-top: 0; }
.prose h3{ font-size: 17px; font-weight: 600; color: var(--blue-deep); margin: 28px 0 10px; }
.prose p{ margin-bottom: 16px; }
.prose ul, .prose ol{ margin-bottom: 16px; padding-left: 22px; }
.prose li{ margin-bottom: 8px; }
.prose strong{ color: var(--charcoal); font-weight: 600; }

/* ================= FAQ / ACCORDION ================= */
details.faq{ border-bottom: 1px solid var(--parchment-2); padding: 20px 0; }
details.faq summary{
  font-family:'Bricolage Grotesque',sans-serif; font-size: 17px; font-weight: 600;
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::after{ content:"+"; font-size:20px; color: var(--blue-deep); font-weight:400; flex-shrink:0; }
details.faq[open] summary::after{ content:"–"; }
details.faq .faq-body{ margin-top: 14px; font-size: 15.5px; color: #4A4F45; max-width: var(--measure); }
details.faq .faq-body p{ margin-bottom: 12px; }

/* ================= ADDRESS / LOCATION BLOCK ================= */
.address-card{
  background: var(--parchment-2); border-radius: 18px; padding: 30px 28px;
}
.address-card .kicker{ font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-deep); }
.address-card h3{ margin-top: 10px; font-size: 20px; font-weight: 600; }
.address-card address{ font-style: normal; margin-top: 12px; font-size: 15px; color: #494D46; line-height: 1.7; }
.address-card .card-link{ margin-top: 16px; }

/* ================= PEOPLE GRID (Our People) ================= */
.people-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.person-card{
  background:#fff; border:1px solid var(--parchment-2); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; transition: box-shadow .2s ease, transform .2s ease;
}
.person-card:hover{ box-shadow: 0 18px 34px -22px rgba(22,40,58,.35); transform: translateY(-3px); }
/* aspect-ratio alone doesn't stop a tall image stretching the box — a
   percentage height against an auto-height parent falls back to auto, so the
   image renders at its intrinsic size. Absolute positioning inside a relative,
   overflow-hidden box guarantees every photo is identical. */
.person-photo{ width:100%; aspect-ratio: 4 / 5; background: var(--parchment-2);
  position:relative; overflow:hidden; }
.person-photo img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; }
.person-photo .initials{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:44px; font-family:'Bricolage Grotesque',sans-serif; }
.person-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.person-name{ font-size: 21px; font-weight: 600; letter-spacing:-.015em; line-height:1.25; }
.person-title{ font-size: 13px; color: var(--blue-deep); margin-top: 2px; font-weight: 500; }
.person-loc{ font-size: 11px; color:#8A8D86; margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.person-bio{ font-size: 13.5px; color: #4A4F45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.person-badges{ display:flex; flex-wrap:wrap; gap:6px; }
.badge{ font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px; }
.badge.accepting{ background: var(--status-accept-bg); color: var(--status-accept-tx); }
.badge.assessment{ background: var(--status-assess-bg); color: var(--status-assess-tx); }
.badge.waitlist{ background: var(--status-wait-bg); color: var(--status-wait-tx); }
.badge.closed{ background: var(--status-closed-bg); color: var(--status-closed-tx); }
.person-actions{ margin-top:auto; padding-top:12px; border-top:1px solid var(--parchment-2); display:flex; align-items:center; justify-content:space-between; }

/* ================= FOOTER ================= */
.site-footer{ background: var(--ink); color: var(--cream-dim); padding-top: 70px; }
.footer-grid{ display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 56px; border-bottom: 1px solid rgba(237,238,231,.14); }
.footer-logo{ font-family:'Bricolage Grotesque',sans-serif; font-size: 24px; font-weight: 600; color: var(--cream); }
.footer-tagline{ font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-light); margin-top: 4px; }
.footer-blurb{ margin-top: 18px; font-size: 14px; max-width: 30ch; color: var(--cream-dim); }
.footer-social{ margin-top: 22px; display: flex; gap: 12px; }
.footer-social a{ width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(237,238,231,.25); display: flex; align-items:center; justify-content:center; transition: border-color .2s ease, background .2s ease; }
.footer-social a:hover{ border-color: var(--blue-light); background: rgba(143,177,206,.12); }
.footer-social svg{ width: 15px; height: 15px; color: var(--cream); }
.footer-heading{ font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 18px; }
.footer-col a{ display: block; font-size: 14.5px; color: var(--cream-dim); margin-bottom: 12px; line-height: 1.5; }
.footer-col p:not(.footer-blurb):not(.footer-heading){ display: block; font-size: 14.5px; color: var(--cream-dim); margin-bottom: 12px; line-height: 1.5; }
.footer-col a:hover{ color: var(--cream); }
.footer-bottom{ padding: 26px 0 34px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: rgba(237,238,231,.55); }
.footer-bottom-links{ display: flex; gap: 22px; align-items: center; }
.footer-bottom-links a:hover{ color: var(--cream); }

/* ================= RESPONSIVE ================= */
@media (max-width: 880px){
  .card-grid{ grid-template-columns: 1fr; }
  .card-grid.two-col{ grid-template-columns: 1fr; }
  .link-row-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .wrap, .wrap-narrow{ padding: 0 20px; }
  .link-row-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
}

/* ================= SITE HEADER / NAV ================= */
/* The header was the same colour as the dark heroes below it, so there was no
   edge between them and the logo and menu looked like they were floating in
   the hero. A slightly deeper tone separates the bar — no line, no shadow, so
   nothing reads as sitting on top of anything, including over the homepage's
   video hero.

   Derived from --ink rather than hardcoded, so it follows whichever palette is
   active. A fixed navy would have put a blue bar above a green hero under the
   Emerald palette, and would have given no separation at all under Collective,
   whose ink is near-black.

   The plain var(--ink) line is a fallback for browsers without color-mix —
   they get the previous behaviour rather than a broken colour. */
.site-header{
  background: var(--ink);
  background: color-mix(in srgb, var(--ink) 72%, #000);
  position: sticky; top: 0; z-index: 200;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 32px; max-width: 1400px; margin: 0 auto; position: relative; }
.brand-logo{ font-family:'Bricolage Grotesque',sans-serif; font-size: 19px; font-weight: 600; color: var(--cream); display:flex; align-items:baseline; gap:8px; white-space: nowrap; }
.brand-logo span{ font-family:'Inter',sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--blue-light); }
.site-nav{ display:flex; align-items:center; gap:2px; flex-wrap: wrap; }
.site-nav > a, .nav-drop-btn{
  font-family:'Inter',sans-serif; font-size: 13px; font-weight: 600; color: var(--cream-dim);
  padding: 9px 13px; border-radius: 8px; background: none; border: none; cursor: pointer;
  transition: color .2s ease, background .2s ease; white-space: nowrap;
}
.site-nav > a:hover{ color: var(--cream); background: rgba(237,238,231,.08); }
.nav-drop{ position: relative; }
.nav-drop-btn:hover, .nav-drop-btn[aria-expanded="true"]{ color: var(--cream); background: rgba(237,238,231,.08); }
.nav-drop-panel{ display:none; position:absolute; top:100%; left:0; background:#fff; border-radius:12px; padding:8px; min-width:230px; box-shadow: 0 20px 40px -16px rgba(22,40,58,.4); margin-top:8px; }
.nav-drop-panel.open{ display:block; }
.nav-drop-panel a{ display:block; padding:10px 14px; font-size:13.5px; font-weight:500; color: var(--charcoal); border-radius:8px; }
.nav-drop-panel a:hover{ background: var(--parchment-2); color: var(--blue-deep); }
.nav-toggle{ display:none; }
@media (max-width: 1080px){
  .nav-toggle{ display:flex; flex-direction:column; justify-content:center; gap:4px; background:none; border:none; cursor:pointer; padding:10px; }
  .nav-toggle span{ width:22px; height:2px; background:var(--cream); border-radius:1px; }
  .site-nav{ display:none; position:absolute; top:100%; left:0; right:0; background: var(--ink); flex-direction:column; align-items:stretch; padding:10px 16px 16px; gap:2px; }
  .site-nav.open{ display:flex; }
  .site-nav > a{ padding: 12px 10px; }
  .nav-drop{ width: 100%; }
  .nav-drop-btn{ width:100%; text-align:left; display:flex; justify-content:space-between; padding:12px 10px; }
  .nav-drop-panel{ position:static; box-shadow:none; background: rgba(255,255,255,.06); margin-top:2px; }
  .nav-drop-panel a{ color: var(--cream-dim); }
  .nav-drop-panel a:hover{ background: rgba(255,255,255,.1); color: var(--cream); }
}

/* ================= FOOTER: 5-column variant ================= */
.footer-grid.five{ grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; }
.footer-grid.four{ grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 56px; }
.footer-grid.two{ grid-template-columns: minmax(0,340px) minmax(0,240px); gap: 80px; justify-content: start; }
@media (max-width: 1080px){ .footer-grid.four{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px){ .footer-grid.four, .footer-grid.two{ grid-template-columns: 1fr; gap: 40px; } }
.footer-brand picture, .footer-col picture{ display: block; }
@media (max-width: 1080px){ .footer-grid.five{ grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 700px){ .footer-grid.five{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .footer-grid.five{ grid-template-columns: 1fr; } }

/* ================= "COMING SOON" TOAST (for pitch-deck placeholder links) ================= */
.js-soon{ cursor: pointer; }
#soonToast{
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--cream); font-family: 'Inter', sans-serif;
  font-size: 13.5px; font-weight: 600; padding: 12px 22px; border-radius: 999px;
  box-shadow: 0 16px 32px -12px rgba(22,40,58,.5);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  z-index: 999;
}
#soonToast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }

/* ================= LOGO IMAGE ================= */
.brand-logo-img{ height: 52px; width: auto; display: block; }
.brand-logo-link{ display: inline-flex; align-items: center; }
.footer-logo-img{ height: 48px; width: auto; display: block; margin-bottom: 4px; }

/* ================= ANNOUNCEMENT POPUP ================= */
.announce-overlay{
  position: fixed; inset: 0; z-index: 500;
  background: rgba(22,40,58,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; transition: opacity .25s ease;
}
.announce-overlay.show{ opacity: 1; }
.announce-panel{
  background: var(--parchment); border-radius: 22px; padding: 44px 40px;
  max-width: 1080px; width: 100%; max-height: 88vh; overflow-y: auto;
  position: relative;
  transform: translateY(14px); transition: transform .25s ease;
  box-shadow: 0 40px 90px -30px rgba(22,40,58,.5);
}
.announce-overlay.show .announce-panel{ transform: translateY(0); }
.announce-close{
  position: absolute; top: 20px; right: 20px;
  width: 38px; height: 38px; border-radius: 50%;
  background: none; border: 1px solid var(--border); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--charcoal); transition: background .2s ease, border-color .2s ease;
}
.announce-close:hover{ background: var(--parchment-2); border-color: var(--blue-deep); }
.announce-close svg{ width: 17px; height: 17px; }
.announce-title{
  font-family:'Bricolage Grotesque',sans-serif; font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.1rem); color: var(--ink);
  text-align: center; margin-bottom: 36px; padding-right: 40px;
}
.announce-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.announce-card{
  background: #fff; border: 1px solid var(--parchment-2); border-radius: 18px;
  padding: 28px 24px; display: flex; flex-direction: column; gap: 16px; text-align: center;
}
.announce-card h3{
  font-family:'Bricolage Grotesque',sans-serif; font-size: 18px; font-weight: 600; color: var(--ink);
}
.announce-body{ flex-grow: 1; }
.announce-body p{ font-size: 14px; color: #4A4F45; margin-bottom: 10px; line-height: 1.6; }
.announce-body p:last-child{ margin-bottom: 0; }
.announce-btn{
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: var(--cream);
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13.5px;
  padding: 12px 22px; border-radius: 999px; margin-top: auto;
  transition: box-shadow .2s ease, transform .2s ease;
}
.announce-btn:hover{ box-shadow: 0 12px 26px -8px rgba(62,108,153,.5); transform: translateY(-1px); }

@media (max-width: 900px){
  .announce-grid{ grid-template-columns: 1fr 1fr; }
  .announce-panel{ padding: 36px 28px; }
}
@media (max-width: 620px){
  .announce-grid{ grid-template-columns: 1fr; }
  .announce-panel{ padding: 30px 22px; max-height: 84vh; }
  .announce-title{ font-size: 1.4rem; padding-right: 34px; }
}

/* ================= THERAPIST RESULT CARD (shared: find-a-therapist.html, get-started.html) ================= */
.t-card{ background:#fff; border:1px solid var(--parchment-2); border-radius:14px; padding:13px; display:flex; flex-direction:column; gap:8px; transition: box-shadow .2s ease; }
.t-card:hover{ box-shadow: 0 12px 24px -16px rgba(22,40,58,.35); }
.t-top{ display:flex; gap:10px; align-items:flex-start; }
.t-photo{ width:72px; height:72px; border-radius:12px; overflow:hidden; flex-shrink:0; background: var(--parchment-2); }
.t-photo img{ width:100%; height:100%; object-fit:cover; }
.t-photo .initials{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:22px; font-family:'Bricolage Grotesque',sans-serif; }
.t-name{ font-size:14px; font-weight:600; }
.t-title{ font-size:11px; color: var(--blue-deep); margin-top:1px; font-weight:500; }
.t-loc{ font-size:10px; color:#8A8D86; margin-top:2px; text-transform:uppercase; letter-spacing:.03em; font-weight:600; }

.t-badges{ display:flex; flex-wrap:wrap; gap:5px; }
.t-badges .badge{ font-size:9.5px; font-weight:600; padding:3px 8px; border-radius:999px; }
.t-badges .badge.accepting{ background: var(--status-accept-bg); color: var(--status-accept-tx); }
.t-badges .badge.assessment{ background: var(--status-assess-bg); color: var(--status-assess-tx); }
.t-badges .badge.waitlist{ background: var(--status-wait-bg); color: var(--status-wait-tx); }
.t-badges .badge.closed{ background: var(--status-closed-bg); color: var(--status-closed-tx); }

.t-bio{ font-size:11.5px; color:#4A4F45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.t-tags{ display:flex; flex-wrap:wrap; gap:5px; }
.t-tags .tag{ font-size:9.5px; color: var(--charcoal); background: var(--parchment); border:1px solid var(--parchment-2); padding:2px 8px; border-radius:6px; }

.t-actions{ padding-top:7px; border-top:1px solid var(--parchment-2); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.t-contact{ display:flex; gap:10px; }
.t-contact a{ display:flex; align-items:center; gap:4px; font-size:10.5px; color:#4A4F45; }
.t-contact a:hover{ color: var(--blue-deep); }
.t-contact svg{ width:11px; height:11px; }
.profile-link{ font-size:11px; font-weight:600; color: var(--blue-deep); display:flex; align-items:center; gap:4px; white-space:nowrap; }
.profile-link:hover{ color: var(--sage-deep); }
.profile-link svg{ width:10px; height:10px; }

/* ================= HEADING TYPE (Bricolage Grotesque) =================
   Bricolage reads lighter and wider than Fraunces at the same numeric
   weight, so headings step up in weight and pull in on tracking to keep
   the same presence the serif had. */
h1, h2, h3,
.brand-logo, .footer-logo, .fact, .stat .amount, .gi-stat .amount{
  letter-spacing: -0.02em;
}
h1{ font-weight: 600; }
h2{ font-weight: 600; }
h3{ font-weight: 600; }

/* ================= CTA GLOW =================
   Lifted out of the homepage so every closing CTA can use it, rather than the
   effect existing on one page only. Two blooms: a broad light rising from the
   base, and a smaller sage accent offset to the top right so they overlap
   rather than sitting as one symmetrical shape. */
.cta-glow{
  position:absolute; left:50%; bottom:-260px; transform:translateX(-50%);
  width:780px; height:560px; border-radius:50%;
  background: radial-gradient(ellipse at center, rgba(237,238,231,.30) 0%,
              rgba(237,238,231,.13) 38%, rgba(237,238,231,0) 72%);
  filter: blur(10px); pointer-events:none; z-index:1;
  animation: ctaPulse 7s ease-in-out infinite alternate;
}
.cta-glow--accent{
  position:absolute; right:-140px; top:-120px; left:auto; bottom:auto;
  transform:none;
  width:460px; height:460px; border-radius:50%;
  background: radial-gradient(circle, rgba(171,185,140,.20) 0%,
              rgba(171,185,140,.06) 45%, rgba(171,185,140,0) 72%);
  filter: blur(8px); pointer-events:none; z-index:1;
  animation: ctaPulseB 11s ease-in-out infinite alternate-reverse;
}
@keyframes ctaPulse{
  from{ opacity:.7; transform: translateX(-50%) scale(1); }
  to{ opacity:1; transform: translateX(-50%) scale(1.07); }
}
@keyframes ctaPulseB{
  from{ opacity:.65; transform: scale(1); }
  to{ opacity:1; transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce){
  .cta-glow, .cta-glow--accent{ animation:none; }
}

/* Agency credit — deliberately quiet. Same tone as the copyright line beside
   it, with the underline only appearing on hover, so it reads as a credit
   rather than a promotion on a client's footer. */
.footer-credit{
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.footer-credit:hover,
.footer-credit:focus-visible{
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 3px;
}