/* ============================================================
   Personalized Compassionate Mental Health Care
   Standalone stylesheet — replaces the Tailwind CDN.
   Hand-built to cover exactly the utility classes the site uses,
   so there is no framework, no CDN, and no production warning.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg, iframe { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
summary { cursor: pointer; }

:root {
  --ink:#2A1B12; --cocoa:#4A2E1E; --brick:#A8341F; --rust:#C96A1E;
  --amber:#E4A11B; --ocean:#2F7BB8; --cream:#FBF4E9; --sand:#F3E4CD;
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
body {
  background-color: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, sans-serif;
  line-height: 1.5;
}
.font-body    { font-family: 'Outfit', system-ui, sans-serif; }
.font-display { font-family: 'Fraunces', Georgia, serif; }
.antialiased  { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---------- atmosphere / glass / components ---------- */
.page-bg {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(closest-side at 12% 8%,  rgba(228,161,27,0.30), transparent),
    radial-gradient(closest-side at 88% 18%, rgba(168,52,31,0.22),  transparent),
    radial-gradient(closest-side at 78% 82%, rgba(47,123,184,0.16), transparent),
    radial-gradient(closest-side at 20% 92%, rgba(201,106,30,0.20), transparent),
    var(--cream);
}
.page-grain {
  position: fixed; inset: 0; z-index: -1; opacity: .55; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.glass {
  background: rgba(255,251,244,.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 10px 40px -12px rgba(42,27,18,.28), inset 0 1px 0 rgba(255,255,255,.6);
}
.glass-dark {
  background: rgba(42,27,18,.42);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 48px -14px rgba(0,0,0,.5);
}
.glass-tint {
  background: rgba(228,161,27,.16);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 10px 36px -14px rgba(168,52,31,.35);
}
.nav-scrolled {
  background: rgba(251,244,233,.88) !important;
  box-shadow: 0 6px 28px -14px rgba(42,27,18,.4);
}
.gradient-text {
  background: linear-gradient(115deg, var(--brick) 0%, var(--rust) 38%, var(--amber) 72%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.feather-ring { position: relative; }
.feather-ring::before {
  content: ""; position: absolute; inset: -14px; border-radius: inherit;
  background: conic-gradient(from 200deg, var(--amber), var(--brick), var(--ocean), var(--rust), var(--amber));
  filter: blur(22px); opacity: .55; z-index: -1;
}
.pill-link { transition: color .25s ease; position: relative; }
.pill-link:hover, .pill-link.active { color: var(--brick); }
.pill-link.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--brick), var(--amber));
}
.btn-primary {
  background: linear-gradient(120deg, var(--brick), var(--rust));
  box-shadow: 0 12px 30px -10px rgba(168,52,31,.6);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -10px rgba(168,52,31,.7); }
.btn-ghost { transition: all .25s ease; }
.btn-ghost:hover { background: rgba(42,27,18,.06); transform: translateY(-3px); }
.card-lift { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.card-lift:hover { transform: translateY(-8px); box-shadow: 0 28px 60px -22px rgba(42,27,18,.45); }

.float-slow { animation: floaty 9s ease-in-out infinite; }
.float-med  { animation: floaty 6.5s ease-in-out infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-16px) rotate(3deg)} }

.marquee-track { display:flex; gap:1.25rem; width:max-content; animation: slide 38s linear infinite; }
@keyframes slide { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.animate-pulse { animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.page-enter { animation: pageIn .6s ease both; }
@keyframes pageIn { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }

/* scroll reveal (replaces AOS) */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
[data-reveal].revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .float-slow, .float-med, .marquee-track, .animate-pulse { animation: none !important; }
}

::selection { background: rgba(228,161,27,.4); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--sand); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--rust), var(--brick)); border-radius: 8px; }

/* details marker */
details summary::-webkit-details-marker { display: none; }
details[open] .group-open\:rotate-45 { transform: rotate(45deg); }

/* ============================================================
   Utility classes (the subset of Tailwind the markup uses)
   ============================================================ */

/* layout / display */
.block{display:block} .flex{display:flex} .grid{display:grid}
.inline-flex{display:inline-flex} .hidden{display:none}
.relative{position:relative} .absolute{position:absolute} .fixed{position:fixed}
.inset-x-0{left:0;right:0} .top-0{top:0} .left-1\/2{left:50%} .z-50{z-index:50}
.overflow-hidden{overflow:hidden}

.flex-col{flex-direction:column} .flex-wrap{flex-wrap:wrap}
.items-center{align-items:center} .items-start{align-items:flex-start}
.justify-center{justify-content:center} .justify-between{justify-content:space-between}
.shrink-0{flex-shrink:0}

/* grid */
.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.lg\:col-span-2{} .lg\:col-span-5{} .lg\:col-span-7{}

/* gaps */
.gap-1{gap:.25rem} .gap-2{gap:.5rem} .gap-3{gap:.75rem} .gap-4{gap:1rem}
.gap-5{gap:1.25rem} .gap-6{gap:1.5rem} .gap-7{gap:1.75rem}
.gap-10{gap:2.5rem} .gap-12{gap:3rem}
.space-y-2>*+*{margin-top:.5rem} .space-y-4>*+*{margin-top:1rem}
.space-y-5>*+*{margin-top:1.25rem} .space-y-7>*+*{margin-top:1.75rem}

/* sizing */
.w-2{width:.5rem} .w-8{width:2rem} .w-11{width:2.75rem} .w-12{width:3rem}
.w-28{width:7rem} .w-36{width:9rem} .w-40{width:10rem} .w-44{width:11rem}
.w-full{width:100%} .w-\[86\%\]{width:86%}
.h-2{height:.5rem} .h-8{height:2rem} .h-11{height:2.75rem} .h-12{height:3rem}
.h-28{height:7rem} .h-36{height:9rem} .h-40{height:10rem} .h-44{height:11rem}
.h-full{height:100%} .aspect-square{aspect-ratio:1/1}
.max-w-2xl{max-width:42rem} .max-w-3xl{max-width:48rem} .max-w-4xl{max-width:56rem}
.max-w-5xl{max-width:64rem} .max-w-6xl{max-width:72rem} .max-w-7xl{max-width:80rem}
.max-w-md{max-width:28rem} .max-w-xl{max-width:36rem}

/* spacing — margin */
.mx-auto{margin-left:auto;margin-right:auto}
.mt-0{margin-top:0} .mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem} .mt-4{margin-top:1rem} .mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem} .mt-7{margin-top:1.75rem} .mt-8{margin-top:2rem}
.mt-10{margin-top:2.5rem} .mt-12{margin-top:3rem}
.mb-1{margin-bottom:.25rem} .mb-1\.5{margin-bottom:.375rem} .mb-2{margin-bottom:.5rem}
.mb-4{margin-bottom:1rem} .mb-6{margin-bottom:1.5rem}
.-mt-2{margin-top:-.5rem} .-mt-4{margin-top:-1rem}

/* spacing — padding */
.p-2{padding:.5rem} .p-3{padding:.75rem} .p-4{padding:1rem} .p-5{padding:1.25rem}
.p-6{padding:1.5rem} .p-7{padding:1.75rem} .p-8{padding:2rem} .p-10{padding:2.5rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-7{padding-left:1.75rem;padding-right:1.75rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-7{padding-top:1.75rem;padding-bottom:1.75rem}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.py-24{padding-top:6rem;padding-bottom:6rem}
.pt-4{padding-top:1rem} .pt-7{padding-top:1.75rem} .pt-10{padding-top:2.5rem}
.pt-28{padding-top:7rem} .pt-32{padding-top:8rem}
.pb-2{padding-bottom:.5rem} .pb-4{padding-bottom:1rem} .pb-10{padding-bottom:2.5rem}
.pb-14{padding-bottom:3.5rem} .pb-16{padding-bottom:4rem} .pb-20{padding-bottom:5rem}
.pb-24{padding-bottom:6rem}
.pr-4{padding-right:1rem}

/* typography */
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-6xl{font-size:3.75rem;line-height:1}
.text-7xl{font-size:4.5rem;line-height:1}
.text-\[10px\]{font-size:10px} .text-\[11px\]{font-size:11px}
.text-\[15px\]{font-size:15px}
.font-medium{font-weight:500} .font-semibold{font-weight:600}
.italic{font-style:italic}
.uppercase{text-transform:uppercase}
.text-center{text-align:center}
.leading-none{line-height:1} .leading-tight{line-height:1.25}
.leading-snug{line-height:1.375} .leading-relaxed{line-height:1.625}
.leading-\[1\.08\]{line-height:1.08}
.tracking-wider{letter-spacing:.05em}
.tracking-\[0\.18em\]{letter-spacing:.18em}
.tracking-\[0\.2em\]{letter-spacing:.2em}
.tracking-\[0\.22em\]{letter-spacing:.22em}
.whitespace-nowrap{white-space:nowrap}
.list-none{list-style:none}

/* colors — text */
.text-ink{color:var(--ink)} .text-cocoa{color:var(--cocoa)}
.text-brick{color:var(--brick)} .text-rust{color:var(--rust)}
.text-amber{color:var(--amber)} .text-cream{color:var(--cream)}
.text-cocoa\/40{color:rgba(74,46,30,.4)} .text-cocoa\/60{color:rgba(74,46,30,.6)}
.text-cocoa\/70{color:rgba(74,46,30,.7)} .text-cocoa\/80{color:rgba(74,46,30,.8)}
.text-cocoa\/85{color:rgba(74,46,30,.85)} .text-cocoa\/90{color:rgba(74,46,30,.9)}
.text-cream\/55{color:rgba(251,244,233,.55)} .text-cream\/65{color:rgba(251,244,233,.65)}
.text-cream\/80{color:rgba(251,244,233,.8)}
.text-sand\/80{color:rgba(243,228,205,.8)}
.text-amber\/40{color:rgba(228,161,27,.4)}
.text-brick\/40{color:rgba(168,52,31,.4)}
.text-rust\/40{color:rgba(201,106,30,.4)}

/* colors — bg */
.bg-ink{background-color:var(--ink)}
.bg-ocean{background-color:var(--ocean)}
.bg-white\/70{background-color:rgba(255,255,255,.7)}
.bg-sand\/40{background-color:rgba(243,228,205,.4)}
.bg-amber\/30{background-color:rgba(228,161,27,.3)}
.bg-amber\/40{background-color:rgba(228,161,27,.4)}
.bg-ocean\/20{background-color:rgba(47,123,184,.2)}
.bg-ocean\/30{background-color:rgba(47,123,184,.3)}

/* borders / radius */
.border{border:1px solid var(--border-c,rgba(42,27,18,.1))}
.border-b{border-bottom:1px solid var(--border-c,rgba(42,27,18,.1))}
.border-t{border-top:1px solid var(--border-c,rgba(42,27,18,.1))}
.border-y{border-top:1px solid var(--border-c,rgba(42,27,18,.1));border-bottom:1px solid var(--border-c,rgba(42,27,18,.1))}
.border-ink\/10{--border-c:rgba(42,27,18,.1)}
.border-ink\/15{--border-c:rgba(42,27,18,.15)}
.border-cream\/15{--border-c:rgba(251,244,233,.15)}
.rounded-xl{border-radius:.75rem} .rounded-2xl{border-radius:1rem}
.rounded-3xl{border-radius:1.5rem} .rounded-full{border-radius:9999px}
.rounded-\[1\.5rem\]{border-radius:1.5rem} .rounded-\[1\.8rem\]{border-radius:1.8rem}
.rounded-\[2rem\]{border-radius:2rem} .rounded-\[2\.5rem\]{border-radius:2.5rem}

/* effects */
.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.blur-xl{filter:blur(24px)} .blur-3xl{filter:blur(64px)}
.ring-2{box-shadow:0 0 0 2px var(--ring-c,transparent)}
.ring-amber\/50{--ring-c:rgba(228,161,27,.5)}
.ring-amber\/60{--ring-c:rgba(228,161,27,.6)}
.object-cover{object-fit:cover}
.scale-110{transform:scale(1.1)}
.-translate-x-1\/2{transform:translateX(-50%)}
.cursor-pointer{cursor:pointer}
.transition{transition:all .2s ease}
.transition-all{transition:all .3s ease}
.transition-transform{transition:transform .3s ease}
.duration-300{transition-duration:.3s}

/* positioning offsets */
.-top-6{top:-1.5rem} .-top-10{top:-2.5rem}
.-bottom-5{bottom:-1.25rem} .-bottom-7{bottom:-1.75rem}
.-bottom-8{bottom:-2rem} .-bottom-12{bottom:-3rem}
.-left-5{left:-1.25rem} .-left-6{left:-1.5rem} .-left-10{left:-2.5rem}
.-right-6{right:-1.5rem} .-right-8{right:-2rem}

/* form focus */
.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--ring-c,transparent)}
.focus\:ring-rust\/50:focus{--ring-c:rgba(201,106,30,.5)}
.placeholder-cocoa\/40::placeholder{color:rgba(74,46,30,.4)}
.resize-none{resize:none}

/* hover */
.hover\:text-amber:hover{color:var(--amber)}
.hover\:text-brick:hover{color:var(--brick)}
.hover\:underline:hover{text-decoration:underline}
.group:hover .group-hover\:translate{}

/* ---------- responsive: sm (>=640px) ---------- */
@media (min-width:640px){
  .sm\:inline-flex{display:inline-flex}
  .sm\:flex-row{flex-direction:row}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:text-sm{font-size:.875rem;line-height:1.25rem}
  .sm\:text-base{font-size:1rem;line-height:1.5rem}
  .sm\:text-\[11px\]{font-size:11px}
  .sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}
  .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .sm\:text-5xl{font-size:3rem;line-height:1}
  .sm\:px-8{padding-left:2rem;padding-right:2rem}
  .sm\:p-10{padding:2.5rem} .sm\:p-14{padding:3.5rem} .sm\:p-16{padding:4rem}
  .sm\:pt-6{padding-top:1.5rem} .sm\:pt-32{padding-top:8rem} .sm\:pt-40{padding-top:10rem}
}

/* ---------- responsive: md (>=768px) ---------- */
@media (min-width:768px){
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- responsive: lg (>=1024px) ---------- */
@media (min-width:1024px){
  .lg\:flex{display:flex}
  .lg\:hidden{display:none}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .lg\:col-span-2{grid-column:span 2/span 2}
  .lg\:col-span-5{grid-column:span 5/span 5}
  .lg\:col-span-7{grid-column:span 7/span 7}
  .lg\:text-5xl{font-size:3rem;line-height:1}
  .lg\:text-6xl{font-size:3.75rem;line-height:1}
}