/* Buckingham Advanced Psychiatry — bapsychiatry.com */
:root{
  --navy:#2c3e57; --navy-deep:#233247; --gold:#9c8b58; --gold-soft:#c9b27a;
  --ink:#1d2735; --muted:#566172; --teal:#2e6e70; --teal-soft:#e4efee; --teal-light:#8cc3bf;
  --paper:#f9f7f7; --white:#ffffff; --rule:#e2dfda;
  --serif:'Cormorant Garamond', Garamond, Georgia, serif;
  --logo-serif:'Cinzel', 'Trajan Pro', Georgia, serif;
  --sans:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --wrap:1120px; --radius:6px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--white); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.7; font-weight:400}
img,svg{max-width:100%; display:block}
a{color:var(--teal); text-underline-offset:3px}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--teal); outline-offset:3px; border-radius:2px}
.skip{position:absolute; left:-999px; top:8px; background:var(--navy); color:#fff; padding:8px 14px; z-index:100}
.skip:focus{left:16px}

h1,h2,h3{color:var(--navy); margin:0; text-wrap:balance}
h1,h2{font-family:var(--serif); font-weight:500; letter-spacing:0}
h1{font-size:clamp(36px,5.8vw,60px); line-height:1.08}
h2{font-size:clamp(30px,3.8vw,42px); line-height:1.15}
h3{font-family:var(--sans); font-size:19px; font-weight:600; line-height:1.35}
p{margin:0}
p + p{margin-top:1em}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:24px}
.eyebrow{font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--teal)}
.lede{font-size:clamp(18px,2vw,20px); color:var(--muted); max-width:60ch}
.prose{max-width:68ch}
.prose ul{padding-left:1.2em; margin:1em 0 0}
.prose li + li{margin-top:.4em}
.muted{color:var(--muted)}
.small{font-size:14px}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:saturate(1.2) blur(6px); border-bottom:1px solid var(--rule)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:78px}
.brand{display:block; flex:0 0 auto; color:inherit}
.brand svg{height:50px; width:auto}
.nav{display:flex; align-items:center; gap:28px}
.nav a{color:var(--navy); text-decoration:none; font-size:15px; font-weight:500}
.nav a:hover,.nav a[aria-current="page"]{color:var(--teal)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--teal)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 22px; border-radius:var(--radius); font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.02em; text-decoration:none; border:1.5px solid transparent; cursor:pointer; white-space:nowrap}
.btn-primary{background:var(--teal); color:#fff}
.btn-primary:hover{background:#245a5c; color:#fff}
.btn-ghost{border-color:var(--navy); color:var(--navy); background:transparent}
.btn-ghost:hover{background:var(--navy); color:#fff}
.nav .btn{color:#fff; min-height:42px; padding:9px 18px}
.menu-toggle{display:none}

/* Separation notice bar */
.notice{background:var(--navy); color:#eef0f3; font-size:14px; line-height:1.5}
.notice .wrap{padding-block:10px; display:flex; gap:10px; align-items:center; justify-content:center; text-align:center; flex-wrap:wrap}
.notice a{color:var(--teal-light)}
.notice a:hover{color:#fff}
.notice .short{display:none}

/* Hero */
.hero{position:relative; background:var(--paper); overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:48px; align-items:center; padding-block:88px 96px}
.hero h1{margin-top:14px}
.hero .lede{margin-top:22px}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.hero-mark{justify-self:center; width:min(320px,100%)}
.ripples{position:absolute; left:0; right:0; bottom:-2px; height:70px; pointer-events:none}
.ripples path{fill:none; stroke:var(--teal); stroke-width:1.5; opacity:.22}

/* Sections */
section{padding-block:88px}
.section-alt{background:var(--paper)}
.section-head{display:grid; gap:14px; max-width:64ch; margin-bottom:44px}
.rule{display:flex; align-items:center; gap:16px; color:var(--gold)}
.rule::before,.rule::after{content:""; height:1.5px; background:var(--gold); flex:1; max-width:120px}
.rule svg{width:44px; height:auto; fill:var(--gold)}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
.card{background:var(--white); border:1px solid var(--rule); border-radius:8px; padding:36px; display:flex; flex-direction:column; gap:16px}
.card .eyebrow{font-size:12px}
.card h3{font-family:var(--serif); font-weight:500; font-size:32px; color:var(--navy)}
.card ul{margin:0; padding-left:1.1em; color:var(--muted)}
.card li + li{margin-top:.35em}
.card .more{margin-top:auto; padding-top:8px; font-weight:600; text-decoration:none}
.card .more::after{content:" →"}

/* Steps */
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; counter-reset:step; list-style:none; padding:0; margin:0}
.steps li{counter-increment:step; display:grid; gap:10px; align-content:start; border-top:2px solid var(--teal); padding-top:20px}
.steps li::before{content:counter(step,decimal-leading-zero); font-family:var(--serif); font-size:28px; color:var(--gold); line-height:1}
.steps p{color:var(--muted); font-size:16px}

/* Two-column feature */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start}
.panel{background:var(--teal-soft); border-radius:8px; padding:32px}
.panel h3{margin-bottom:10px}
.panel.navy{background:var(--navy); color:#e9ecf1}
.panel.navy h3{color:#fff}
.panel.navy a{color:var(--teal-light)}
.checklist{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.checklist li{position:relative; padding-left:30px}
.checklist li::before{content:""; position:absolute; left:0; top:.55em; width:16px; height:8px; border-left:2px solid var(--teal); border-bottom:2px solid var(--teal); transform:rotate(-45deg)}

/* Facts table */
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:8px; overflow:hidden}
.facts div{background:var(--white); padding:26px}
.facts dt{font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--teal)}
.facts dd{margin:8px 0 0; font-size:17px; color:var(--ink)}
dl{margin:0}

/* FAQ */
.faq{display:grid; gap:0; border-top:1px solid var(--rule); max-width:820px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer; list-style:none; padding:22px 40px 22px 0; font-weight:600; color:var(--navy); position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:6px; top:16px; font-size:26px; font-weight:400; color:var(--teal)}
.faq details[open] summary::after{content:"–"}
.faq details > div{padding:0 0 24px; color:var(--muted); max-width:68ch}

/* Page hero (inner pages) */
.page-hero{background:var(--paper); border-bottom:1px solid var(--rule)}
.page-hero .wrap{padding-block:72px 64px; display:grid; gap:18px}
.crumbs{font-size:14px; color:var(--muted)}
.crumbs a{color:var(--muted)}

/* Safety / crisis */
.crisis{background:#fbf6ea; border-left:4px solid var(--gold); padding:20px 24px; border-radius:0 6px 6px 0; font-size:16px}
.crisis strong{color:var(--navy)}
.isi{border:1px solid var(--rule); border-radius:8px; padding:28px 32px; background:var(--white); font-size:15px}
.isi h3{font-size:15px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:12px}
.isi ul{padding-left:1.2em; margin:.6em 0 0}

/* CTA band */
.cta-band{background:var(--teal); color:#fff}
.cta-band .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-block:56px}
.cta-band h2{color:#fff}
.cta-band p{color:#dcecea; margin-top:8px}
.cta-band .btn-primary{background:#fff; color:var(--teal)}
.cta-band .btn-primary:hover{background:var(--paper)}
.cta-band .btn-ghost{border-color:#fff; color:#fff}
.cta-band .btn-ghost:hover{background:#fff; color:var(--teal)}

/* Footer */
.site-footer{background:var(--navy-deep); color:#c9ced8; font-size:15px}
.site-footer .wrap{padding-block:64px 36px}
.foot-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:40px}
.foot-logo svg{width:250px; height:auto}
.site-footer h4{font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 12px; font-weight:600}
.site-footer a{color:#e7eaf0}
.site-footer a:hover{color:var(--teal-light)}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.site-footer address{font-style:normal}
.foot-legal{border-top:1px solid rgba(255,255,255,.12); margin-top:48px; padding-top:24px; display:grid; gap:10px; font-size:13px; color:#9aa3b3}

/* Logo colors */
.logo .n{fill:var(--navy)} .logo .g{fill:var(--gold)} .logo .t{fill:var(--teal)}
.logo .gs{stroke:var(--gold); fill:none} .logo .ts{stroke:var(--teal); fill:none}
.logo.night .n{fill:#f5f3f0} .logo.night .g{fill:var(--gold-soft)} .logo.night .t{fill:var(--teal-light)}
.logo.night .gs{stroke:var(--gold-soft)} .logo.night .ts{stroke:var(--teal-light)}
.logo .serif{font-family:var(--logo-serif)} .logo .sans{font-family:var(--sans)}

/* Responsive */
@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr; padding-block:64px 80px}
  .hero-mark{display:none}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr; gap:36px}
  .facts{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .menu-toggle{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border:1px solid var(--rule); border-radius:6px; background:#fff; color:var(--navy); cursor:pointer}
  .menu-toggle svg{width:22px; height:22px}
  .nav{display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--rule); flex-direction:column; align-items:stretch; gap:0; padding:8px 24px 20px}
  .nav.open{display:flex}
  .nav a{padding:14px 0; border-bottom:1px solid var(--rule); font-size:17px}
  .nav a[aria-current="page"]{box-shadow:none}
  .nav .btn{margin-top:14px; border-bottom:0}
  .site-header .wrap{position:relative; min-height:68px}
  .brand svg{height:42px}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding-inline:16px}
  section{padding-block:64px}
  .cards,.steps,.facts,.foot-grid{grid-template-columns:1fr}
  .card{padding:26px}
  .brand svg{height:40px}
  .notice .long{display:none} .notice .short{display:inline}
  .hero-actions .btn{flex:1 1 100%}
  .isi{padding:22px 20px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.site-header,.notice,.cta-band,.menu-toggle{display:none}}

sup{line-height:0; font-size:.6em}
h1 sup,h2 sup,h3 sup{font-size:.42em; vertical-align:.95em}
a[href^="tel:"]{white-space:nowrap}
