@charset "UTF-8";
/* Udoka Addy Psychiatry - shared design system. Edit here, not per page. */

:root{
  --ink: #13140F;
  --ink-2: #1C1D17;
  --cream: #F2ECDF;
  --cream-2: #EAE1CE;
  --cream-3: #DED3BB;
  --stone: #6E675A;
  --stone-2: #6F6858;
  --rust: #B34A2B;
  --rust-text: #A8421F;
  --rust-on-dark: #CC6A48;
  --rust-deep: #8E3A22;
  --ivory: #F5EFE1;
  --ivory-dim: #C9C1B1;
  --hairline: rgba(19, 20, 15, 0.12);
  --hairline-d: rgba(245, 239, 225, 0.14);
  --serif: 'Instrument Serif', 'Fraunces', 'Times New Roman', Georgia, serif;
  --serif-body: 'Fraunces', 'Times New Roman', Georgia, serif;
  --sans: 'Geist', 'Söhne', 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, sans-serif;
  --max: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 3px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --nav-eyebrow-h: 38px;
  --grain: 0.30;
}

/* --- shared grain (single source of truth) --- */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:var(--grain);mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* --- rules verified byte-identical across pages --- */
*, *::before, *::after { box-sizing: border-box; }
.answer-card{margin-top:-1px;background:var(--cream-2);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.answer-card h2{margin:0;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rust)}
.answer-card p{margin:0;max-width:78ch;font-family:var(--serif-body);font-weight:300;font-size:clamp(18px,1.4vw,22px);line-height:1.55;color:var(--ink)}
.answer-card-inner{display:grid;grid-template-columns:minmax(180px,.32fr) minmax(0,.68fr);gap:clamp(24px,5vw,76px);padding-top:clamp(30px,5vw,52px);padding-bottom:clamp(30px,5vw,52px)}
.band-cream{background:var(--cream)}
.band-cream-2{background:var(--cream-2)}
.band-ink{background:var(--ink);color:var(--ivory)}
.band-ink .section-label{color:var(--ivory-dim)}
.boundary-card{border:0;border-radius:0;background:var(--cream-2)}
.boundary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline);margin-top:44px}
.brand {
      font-family: var(--serif);
      font-size: 22px;
      letter-spacing: -0.01em;
      font-weight: 400;
    }
.brand small {
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      font-weight: 500;
      margin-left: 10px;
      opacity: .65;
      vertical-align: 1.5px;
    }
.btn-ghost:hover{border-color:var(--ivory)}
.btn-primary{background:var(--rust);border:1px solid var(--rust);color:var(--ivory)}
.btn-primary:hover{background:var(--rust-deep);border-color:var(--rust-deep)}
.btn:hover svg { transform: translateX(4px); }
.care-note{color:var(--stone);max-width:68ch}
.care-terms .scope-card{background:rgba(255,252,245,.58)}
.d-1{transition-delay:.12s}
.d-2{transition-delay:.22s}
.drawer {
      position: fixed;
      top: calc(72px + var(--nav-eyebrow-h));
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--cream);
      color: var(--ink);
      z-index: 99;
      transform: translateY(-100%);
      transition: transform .5s var(--ease);
      padding: 48px var(--gutter);
      display: none;
      flex-direction: column;
      gap: 8px;
    }
.drawer .drawer-cta:hover {
      background: var(--ink-2);
      color: var(--cream);
      border-color: var(--ink-2);
    }
.drawer.is-open { transform: translateY(0); }
.faq{border-top:1px solid var(--hairline)}
.faq details[open] .faq-toggle{transform:rotate(45deg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--rust)}
.faq-a p{margin:0}
.final-cta{text-align:center;padding:clamp(90px,12vw,160px) 0}
.final-cta p{margin:0 auto 36px;max-width:48ch;font-family:var(--serif-body);font-weight:300;font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:var(--ivory-dim)}
.footer {
      background: var(--cream-2);
      color: var(--ink);
      padding: 80px 0 40px;
      font-size: 13px;
      line-height: 1.65;
      position: relative;
      z-index: 2;
    }
.footer a {
      border-bottom: 1px solid transparent;
      padding-bottom: 1px;
      transition: border-color .2s var(--ease);
    }
.footer a:hover { border-bottom-color: var(--rust); }
.footer p, .footer li { margin: 0 0 6px 0; color: var(--ink-2); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer-bottom {
      padding-top: 36px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
      font-family: var(--sans);
      font-size: 12px;
      color: var(--stone);
      letter-spacing: 0.02em;
    }
.footer-bottom a { color: var(--stone); }
.footer-bottom a:hover { color: var(--ink); }
.footer-brand {
      font-family: var(--serif);
      font-size: 28px;
      letter-spacing: -0.01em;
      line-height: 1.1;
      margin-bottom: 8px;
    }
.footer-brand small {
      display: block;
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--stone);
      margin-top: 10px;
      font-weight: 500;
    }
.footer-emergency {
      margin-top: 20px;
      padding: 16px 18px;
      background: rgba(179, 74, 43, 0.08);
      border: 1px solid rgba(179, 74, 43, 0.25);
      border-radius: 3px;
      font-size: 13px;
      color: var(--ink);
      max-width: 36ch;
    }
.footer-emergency strong {
      color: var(--rust-deep);
      font-weight: 600;
      display: block;
      margin-bottom: 4px;
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }
.footer-pt-seal-wrap {
      margin-top: 14px;
      max-width: 160px;
      opacity: 0.72;
      filter: grayscale(1);
      transition: opacity 0.2s var(--ease);
    }
.footer-pt-seal-wrap .sx-verified-seal {
      display: inline-block;
      line-height: 0;
    }
.footer-pt-seal-wrap img {
      display: block;
      max-width: 100%;
      height: auto;
    }
.footer-pt-seal-wrap:hover {
      opacity: 0.95;
      filter: grayscale(0.65);
    }
.footer-top {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: clamp(32px, 5vw, 64px);
      padding-bottom: 56px;
      border-bottom: 1px solid var(--hairline);
    }
.hero-card{background:rgba(245,239,225,.07);border:1px solid rgba(245,239,225,.14);padding:clamp(24px,3vw,34px);border-radius:3px}
.hero-card p{margin:0;font-family:var(--serif-body);font-weight:300;font-size:clamp(18px,1.4vw,22px);line-height:1.52;color:var(--ivory)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:clamp(44px,7vw,110px);align-items:end}
.hero-note{color:var(--ivory-dim)}
.nav {
      position: fixed;
      top: var(--nav-eyebrow-h);
      left: 0;
      right: 0;
      z-index: 100;
      color: var(--ivory);
      transition: background .4s var(--ease), color .4s var(--ease);
      border-bottom: 1px solid transparent;
    }
.nav-eyebrow {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 101;
      box-sizing: border-box;
      min-height: var(--nav-eyebrow-h);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 7px var(--gutter);
      background: var(--ink-2);
      border-bottom: 1px solid rgba(245, 239, 225, 0.12);
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.06em;
      line-height: 1.35;
      text-align: center;
      color: rgba(245, 239, 225, 0.88);
    }
.nav-eyebrow a {
      color: inherit;
      text-decoration: none;
      transition: color .2s var(--ease);
    }
.nav-eyebrow a:focus-visible {
      outline: 2px solid var(--rust);
      outline-offset: 3px;
      border-radius: 2px;
    }
.nav-eyebrow a:hover {
      color: var(--ivory);
    }
.nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 72px;
    }
.nav-links a {
      position: relative;
      padding: 6px 0;
      opacity: .8;
      transition: opacity .2s var(--ease);
    }
.nav-links a.active {
      opacity: 1;
    }
.nav-links a.active::after {
      transform: scaleX(1);
    }
.nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s var(--ease);
    }
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-toggle {
      display: none;
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
    }
.nav-toggle span {
      display: block;
      width: 22px;
      height: 1px;
      background: currentColor;
      position: relative;
    }
.nav-toggle span::after { top: 7px; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::before,
    .nav-toggle span::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 1px;
      background: currentColor;
    }
.nav:not(.is-scrolled) .nav-cta{background:rgba(245,239,225,.08);border-color:rgba(245,239,225,.35);color:var(--ivory)}
.nav:not(.is-scrolled) .nav-cta:hover{background:rgba(245,239,225,.14);border-color:var(--ivory)}
.prose p{margin:0}
.reading-card a{display:inline-block;margin-top:18px;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--rust);border-bottom:1px solid rgba(179,74,43,.45);padding-bottom:2px}
.reading-card a:hover{border-bottom-color:var(--rust)}
.reveal.in {
      opacity: 1;
      transform: translateY(0);
    }
.skip-link {
      position: absolute;
      left: -9999px;
      top: auto;
      padding: 8px 14px;
      background: var(--ink);
      color: var(--cream);
      border-radius: 3px;
      font-size: 13px;
      z-index: 9999;
    }
.wrap {
      width: 100%;
      max-width: var(--max);
      margin: 0 auto;
      padding-left: var(--gutter);
      padding-right: var(--gutter);
      position: relative;
      z-index: 2;
    }
::selection { background: var(--rust); color: var(--ivory); }
:focus-visible {
      outline: 2px solid var(--rust);
      outline-offset: 3px;
      border-radius: 2px;
    }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }


/* ----------------------------------------------------------
   Contrast corrections (WCAG AA)
   --stone-2 was #9A9182 = 2.64:1 on cream; now 4.70:1 (set in :root above).
   --rust #B34A2B is 4.54:1 on cream (passes) but only 3.46:1 on ink,
   so small rust text on dark bands uses --rust-on-dark (5.04:1).
   Large display italics keep the brighter --rust: at >=24px the bar is 3:1.
   Selectors are deliberately more specific than the per-page rules,
   because page <style> blocks load after this file.
---------------------------------------------------------- */
.band-ink .section-label .num,
.band-ink .eyebrow .num,
.hero .eyebrow .num,
.band-ink .signal span,
.band-ink .faq-toggle,
.band-ink .entry-num,
.band-ink .principle-num,
.band-ink .course-num,
.begin .section-label .num { color: var(--rust-on-dark); }

/* ----------------------------------------------------------
   Keep the booking action visible at every width.
   Navigation belongs behind the hamburger; a conversion action does not.
---------------------------------------------------------- */
.nav .nav-cta { display: inline-flex; }
@media (max-width: 860px){
  /* >=44px tall for comfortable tap targets */
  .nav .nav-cta { min-height: 44px; align-items: center; padding: 10px 16px; }
}
@media (max-width: 420px){
  .nav .nav-cta { padding: 10px 12px; font-size: 11px; letter-spacing: 0; }
  .nav .brand small { display: none; }
}
@media (max-width: 330px){
  .nav .nav-cta { display: none; }
}

/* ----------------------------------------------------------
   Closed mobile drawer must not bleed into the header.
   The drawer is translateY(-100%), but its content is taller
   than its own box, so the tail (the drawer CTA) overflowed
   back into view behind the nav. Hide it properly when closed
   and let tall content scroll inside instead of spilling.
   `body .drawer` outranks the per-page @media `.drawer` rules,
   which load after this file.
---------------------------------------------------------- */
body .drawer{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  visibility: hidden;
  pointer-events: none;
  transition: transform .5s var(--ease), visibility .5s var(--ease);
}
body .drawer.is-open{
  visibility: visible;
  pointer-events: auto;
}

/* ----------------------------------------------------------
   .btn base. Pages carry four slightly different variants of
   this rule; each page's own <style> still wins, so this only
   supplies a sane default for pages that define none (404).
---------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 15px 22px;
  border-radius: 999px;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn-ghost{ border: 1px solid rgba(245, 239, 225, 0.34); color: var(--ivory); }

/* ----------------------------------------------------------
   Article FAQ blocks. .article-body h3 is a small uppercase
   label elsewhere, which would render a question smaller and
   dimmer than its own answer. Specificity is deliberately
   higher than the per-page rule, which loads after this file.
---------------------------------------------------------- */
.article-body h3.article-faq-q{
  margin: 1.5em 0 0.35em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(21px, 1.9vw, 27px);
  line-height: 1.22;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ivory);
}
.band-cream .article-body h3.article-faq-q,
.band-cream-2 .article-body h3.article-faq-q{ color: var(--ink); }