/* Colorado Mental Wellness. Rules behind these choices: DESIGN.md */

:root{
  --spruce:#2F4A43; --spruce-deep:#243A34; --spruce-hover:#3C5C54;
  --river:#5B7F92; --river-ink:#46697B;
  --gold:#C9A25E; --gold-soft:#D6B276; --gold-ink:#2B2517;
  --mist:#F2F5F3; --sage:#E7E9DF; --sky:#E3EBEF;
  --paper:#F7F3EC;  /* warm page background; reads softer than mist for long text */
  --ink:#443F39; --ink-soft:#5A534C; --muted:#6B645C;  /* warm charcoal family */
  --rule:#DAD3C7; --rule-sky:#C3D3DB;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-sm:3px; --r-md:6px;
  --section:clamp(64px,9vw,104px);
}

/* base */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:17.5px;line-height:1.65;color:var(--ink);background:var(--paper);}
img{max-width:100%;}
h1,h2,h3{font-family:var(--serif);font-optical-sizing:auto;color:var(--spruce);font-weight:500;line-height:1.12;letter-spacing:-.015em;}
h2,h3{font-weight:600;}
@media(min-width:900px){body{font-size:18px;}}
h1{font-size:clamp(42px,6vw,68px);text-wrap:balance;}
h2{font-size:clamp(30px,3.8vw,44px);}
h3{font-size:clamp(22px,2.4vw,28px);}
/* subtitle inside a heading: <h3>Mood Disorders<span class="aka">Anxiety and depression</span></h3> */
.aka{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:.72em;line-height:1.3;letter-spacing:0;color:var(--ink-soft);margin-top:4px;}
a{color:var(--river-ink);text-underline-offset:3px;}
a:hover{color:var(--spruce);}
:focus-visible{outline:2.5px solid var(--river-ink);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
/* reading text is serif (body); interface text is sans */
.skip,.btn,.link-arrow,.inline-list,.site-nav,.hero .note,.site-footer{font-family:var(--sans);}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
section{padding:var(--section) 0;}
.pt-0{padding-top:0;}
.tint{background:var(--sage);}
.kicker{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.3;color:var(--ink-soft);margin-bottom:8px;}
.lead{font-size:clamp(20px,2vw,22px);max-width:52ch;}

.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--spruce);color:#fff;padding:10px 16px;border-radius:var(--r-sm);font-weight:600;}
.skip:focus{top:12px;color:#fff;}

/* buttons and links */
.btn{display:inline-block;background:var(--spruce);color:#fff;text-decoration:none;padding:15px 26px;border-radius:var(--r-sm);font-weight:600;font-size:17px;line-height:1.2;transition:background-color .15s ease;}
.btn:hover{background:var(--spruce-hover);color:#fff;}
.btn-sm{padding:10px 18px;font-size:16px;}
.btn-gold{background:var(--gold);color:var(--gold-ink);}
.btn-gold:hover{background:var(--gold-soft);color:var(--gold-ink);}
.link-arrow{font-weight:600;color:var(--spruce);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:6px;transition:text-decoration-color .15s ease;}
.link-arrow::after{content:"\00a0\2192";}
.link-arrow:hover{text-decoration-color:var(--spruce);}

.inline-list{list-style:none;display:flex;flex-wrap:wrap;font-weight:600;color:var(--spruce);}
/* separator trails each item, so a wrapped line never starts with a dot */
.inline-list li{white-space:nowrap;}
.inline-list li:not(:last-child)::after{content:"\00b7";color:var(--gold);font-weight:700;margin:0 .6em;}

/* nav */
.site-nav{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule);}
.nav-inner{display:flex;align-items:center;gap:32px;min-height:76px;}
.brand{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--spruce);text-decoration:none;line-height:1.1;letter-spacing:-.01em;}
.brand span{display:block;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--river-ink);letter-spacing:.02em;margin-top:4px;}
.nav-links{display:flex;gap:28px;margin-left:auto;}
.nav-links a{color:var(--ink);text-decoration:none;font-size:16px;font-weight:600;text-underline-offset:8px;text-decoration-thickness:2px;}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--spruce);text-decoration-line:underline;text-decoration-color:var(--gold);}
@media(max-width:760px){
  .nav-inner{flex-wrap:wrap;gap:12px;padding-top:12px;padding-bottom:10px;min-height:0;}
  .nav-cta{margin-left:auto;}
  .nav-links{order:3;width:100%;margin-left:0;gap:22px;padding-top:10px;border-top:1px solid var(--rule);}
  .nav-links a{font-size:15px;}
}
/* "Contact" link only exists in the nav on phones, where it replaces the button */
.nav-contact{display:none;}
@media(max-width:480px){
  .nav-cta{display:none;}
  .nav-contact{display:inline;}
  .nav-links{gap:18px;}
}

/* homepage hero */
.hero{position:relative;overflow:hidden;padding:clamp(64px,9vw,112px) 0 300px;background:linear-gradient(180deg,#F8EFE3 0%,#F3F0E9 45%,#EAF0EB 100%);}
.hero .wrap{position:relative;z-index:2;}
.hero-copy{max-width:640px;}
.hero h1{margin-bottom:24px;}
.hero .lead{margin-bottom:36px;}
.cta-row{display:flex;gap:28px;flex-wrap:wrap;align-items:center;}
.hero .note{font-size:15px;color:var(--muted);margin-top:24px;}
.art{position:absolute;left:0;right:0;bottom:-2px;z-index:1;pointer-events:none;}
.art svg{display:block;width:100%;height:auto;}
@media(max-width:760px){.hero{padding-bottom:200px;}}

/* interior page header: typographic, no illustration */
.page-head{padding:clamp(56px,8vw,96px) 0 clamp(48px,6vw,72px);border-bottom:1px solid var(--rule);}
.page-head h1{margin-bottom:20px;}

/* editorial rows */
/* same columns as .area, so the intro lines up with the row text below it */
.focus-head{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:40px;align-items:start;margin-bottom:44px;}
.focus-head h2{text-wrap:balance;}
.focus-head p{font-size:clamp(20px,2vw,22px);max-width:52ch;padding-top:.5em;}
.section-title{margin-bottom:36px;}
.areas{border-top:2px solid var(--spruce);}
.area{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:40px;padding:34px 0;border-bottom:1px solid var(--rule);}
.area h3{font-size:clamp(25px,2.8vw,30px);letter-spacing:-.02em;}
.area p{max-width:58ch;}
@media(max-width:760px){.focus-head,.area{grid-template-columns:1fr;gap:12px;} .focus-head p{padding-top:0;}}

/* EMDR panel */
.emdr{background:var(--sky);border-radius:var(--r-md);padding:56px;display:grid;grid-template-columns:1fr 1.15fr;gap:56px;}
.areas + .emdr{margin-top:64px;}
.emdr h2{font-size:clamp(30px,3.6vw,42px);margin-bottom:14px;}
.emdr .lede{font-size:19px;margin-bottom:24px;}
.emdr .full{font-size:16.5px;}
.track{position:relative;height:28px;margin:0 0 30px;max-width:300px;}
.track::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:#B5C8D2;}
.track .dot{position:absolute;top:50%;left:0;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--river);box-shadow:0 0 0 6px rgba(91,127,146,.18);animation:glide 2.6s ease-in-out infinite alternate;}
@keyframes glide{to{left:calc(100% - 16px);}}
@media(prefers-reduced-motion:reduce){.track .dot{animation:none;left:calc(50% - 8px);}}
.points{list-style:none;}
.points li{padding:18px 0;border-top:1px solid var(--rule-sky);}
.points li:last-child{border-bottom:1px solid var(--rule-sky);}
.points strong{display:block;font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.3;color:var(--spruce);margin-bottom:4px;}
.points span{font-size:16.5px;}
.also{margin-top:32px;}  /* sits under .points in the right column */
.also h3{font-size:20px;margin-bottom:10px;}
@media(max-width:860px){.emdr{grid-template-columns:1fr;padding:40px 24px;gap:28px;}}

/* turning points */
.turning h2{margin-bottom:10px;}
.turning .intro{max-width:56ch;margin-bottom:40px;}
.turns{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.turn{border-top:3px solid var(--gold);padding-top:18px;}
.turn h3{font-size:24px;}
.turn p{margin-top:10px;font-size:16.5px;}
@media(max-width:900px){.turns{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.turns{grid-template-columns:1fr;}}

/* portrait + intro */
img.portrait{display:block;width:300px;height:380px;flex:none;object-fit:cover;object-position:center 25%;border-radius:var(--r-md);background:#CBD8D2;}
.about-flex{display:flex;gap:64px;align-items:center;}
.about-copy{max-width:580px;}
.about-copy h2{font-size:clamp(28px,3.2vw,38px);margin-bottom:18px;}
.about-copy p{margin-bottom:16px;}
.about-copy .inline-list{margin:24px 0 28px;font-size:16px;}
@media(max-width:820px){.about-flex{flex-direction:column;align-items:flex-start;gap:36px;}}

/* about: photo beside the page heading */
.page-head-photo{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:clamp(28px,5vw,64px);align-items:center;}
.page-head-photo img.portrait{width:100%;height:auto;aspect-ratio:4/5;}
.page-head-photo .lead{max-width:48ch;}
@media(max-width:560px){.page-head-photo{grid-template-columns:1fr;gap:28px;} .page-head-photo img.portrait{max-width:260px;}}

/* split: heading column + content column, same proportions as .area */
.split{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:40px;align-items:start;}
.split > div > h2{margin-bottom:16px;text-wrap:balance;}
.split .side p{max-width:34ch;margin-bottom:16px;}
@media(max-width:760px){.split{grid-template-columns:1fr;gap:32px;}}

/* plain prose block in the content column */
.prose{max-width:60ch;}
.prose p + p{margin-top:16px;}
.prose .big{font-size:clamp(23px,2.5vw,28px);line-height:1.3;color:var(--spruce);}

/* rates (rows reuse .area) */
.area .amt{font-size:clamp(30px,3.4vw,40px);font-weight:500;line-height:1;color:var(--spruce);font-variant-numeric:lining-nums;}
.area .fine{font-size:16.5px;}
.area .fine + .fine{margin-top:12px;}

/* FAQ */
.faq{border-top:2px solid var(--spruce);}
.faq details{border-bottom:1px solid var(--rule);}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:24px 0;font-size:clamp(21px,2.2vw,25px);font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--spruce);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";flex:none;font-family:var(--sans);font-size:28px;font-weight:400;line-height:1;color:var(--gold);}
.faq details[open] summary::after{content:"\2212";}
.faq summary:hover{color:var(--spruce-hover);}
.faq .a{padding:0 0 28px;max-width:62ch;}
.faq .a p + p{margin-top:14px;}

/* contact */
.direct a.big{display:block;width:fit-content;font-size:clamp(21px,2.2vw,25px);color:var(--spruce);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:6px;margin-bottom:10px;}
.direct a.big:hover{text-decoration-color:var(--spruce);}
.direct p{margin-top:20px;}
.callout{border-left:3px solid var(--gold);padding-left:18px;font-size:16.5px;}
.form{display:grid;gap:22px;max-width:560px;}
.form label{display:block;font-family:var(--sans);font-size:16px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.form label .opt{font-weight:400;color:var(--muted);}
.form input,.form textarea{width:100%;font-family:var(--sans);font-size:17px;line-height:1.4;color:var(--ink);background:#fff;border:1px solid #AEBFB7;border-radius:var(--r-sm);padding:12px 14px;}
.form input:focus,.form textarea:focus{border-color:var(--spruce);}
.form textarea{resize:vertical;min-height:120px;}
.form .hint{font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--muted);margin-top:6px;}
.form button{justify-self:start;border:0;cursor:pointer;}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* closing CTA */
.cta{background:var(--spruce);color:#D4DFD9;}
.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;}
.cta h2{color:#fff;font-size:clamp(28px,3.4vw,38px);margin-bottom:8px;}
.cta p{max-width:48ch;}
.cta :focus-visible{outline-color:var(--gold);}

/* footer */
.site-footer{background:var(--spruce-deep);color:#BFCEC7;padding:56px 0 44px;font-size:16px;}
.site-footer .wrap{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.site-footer .brand{color:#fff;}
.site-footer .brand span{color:#BFCEC7;}
.site-footer a{color:#DCE7E1;text-decoration:none;}
.site-footer a:hover{color:#fff;text-decoration:underline;}
.footer-contact{margin-top:18px;}
.site-footer nav a{display:block;margin-bottom:8px;}
.site-footer small{display:block;margin-top:28px;font-size:14px;color:#8FA49B;}
.site-footer :focus-visible{outline-color:var(--gold);}