/* Valentine Psychiatry — site styles
   Palette and type decided 2026-09-20 (see Website/design-brief-2026-09-20.md) */

:root{
  --blue-deep:#1B3A5C;
  --blue:#2C5F8D;
  --blue-hover:#234C71;
  --sky:#A8D3E8;
  --sky-light:#E6F2F8;
  --green:#4F8A6E;
  --green-light:#E6F1EB;
  --off:#F1E9DA;
  --white:#FFFFFF;
  /* Beige surfaces. --white stays pure white because it is also used for
     text and logos sitting on the dark blue bands. */
  --beige:#FAF6EE;
  --card-bg:#FFFCF6;
  --text:#1F2933;
  --muted:#4F5B66;
  --line:#E3D9C8;
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius:14px;
  --shadow:0 12px 32px rgba(27,58,92,.09);
  --shadow-sm:0 4px 14px rgba(27,58,92,.07);
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:1.125rem;line-height:1.65;color:var(--text);background:var(--beige)}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--blue-hover)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--blue-deep);line-height:1.15;margin:0 0 .5em;font-weight:600}
h1{font-size:clamp(2.4rem,5vw,3.6rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.35rem,2.2vw,1.65rem)}
h4{font-size:1.2rem}
p{margin:0 0 1em}
ul,ol{padding-left:1.3em}
.lead{font-size:1.25rem;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:.95rem}
strong{font-weight:600}

/* Layout */
.container{max-width:var(--max);margin:0 auto;padding:0 24px}
.narrow{max-width:800px}
.section{padding:72px 0}
.section-tight{padding:48px 0}
.band-off{background:var(--off)}
.band-sky{background:var(--sky-light)}
.band-deep{background:var(--blue-deep);color:#E6EEF5}
.band-deep h2,.band-deep h3{color:var(--white)}
.band-deep a{color:var(--sky)}
.center{text-align:center}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split .prose{margin-left:0;margin-right:0;max-width:none}
.eyebrow{font-family:var(--sans);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:600;margin:0 0 .8em}
.section-head{max-width:720px;margin-bottom:40px}
.section-head p{color:var(--muted);font-size:1.15rem}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1;padding:15px 26px;border-radius:999px;border:2px solid var(--blue);background:var(--blue);color:var(--white);text-decoration:none;cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s;white-space:nowrap}
.btn:hover{background:var(--blue-hover);border-color:var(--blue-hover);color:var(--white);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--blue)}
.btn-outline:hover{background:var(--blue);color:var(--white)}
.btn-light{background:var(--white);border-color:var(--white);color:var(--blue-deep)}
.btn-light:hover{background:var(--sky-light);border-color:var(--sky-light);color:var(--blue-deep)}
.btn-ghost-light{background:transparent;border-color:rgba(255,255,255,.7);color:var(--white)}
.btn-ghost-light:hover{background:var(--white);border-color:var(--white);color:var(--blue-deep)}
.btn-green{background:var(--green);border-color:var(--green)}
.btn-green:hover{background:#3F7259;border-color:#3F7259}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.arrow-link{font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.4em}
.arrow-link::after{content:"\2192";transition:transform .18s}
.arrow-link:hover::after{transform:translateX(3px)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--beige);border-bottom:1px solid var(--line)}
/* The menu bar gets a wider track than the page body, so nine boxed
   items and the portal button fit on one row. */
.site-header > .container{max-width:1460px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--blue-deep)}
.brand-mark{width:58px;height:37px;overflow:hidden;flex:none}
.brand-mark img{width:58px;height:auto;display:block}
.brand-name{font-family:var(--serif);font-weight:600;font-size:1.25rem;letter-spacing:.08em;text-transform:uppercase;line-height:1;white-space:nowrap}
.brand-name small{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;color:var(--muted);margin-top:5px;font-weight:600}
.nav{display:flex;align-items:center;gap:8px}
.nav > ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px}
/* Each menu item is its own green box so the items read as separate buttons. */
.nav > ul > li > a,.nav .nav-btn{font-size:.86rem;font-weight:600;color:#2F6B51;text-decoration:none;padding:9px 12px;white-space:nowrap;border-radius:9px;display:inline-flex;align-items:center;gap:6px;background:var(--green-light);border:1.5px solid #BFD9CB;font-family:var(--sans);cursor:pointer;transition:background .16s,color .16s,border-color .16s}
.nav > ul > li > a:hover,.nav .nav-btn:hover,.nav .has-dropdown:hover .nav-btn,.nav > ul > li > a[aria-current="page"]{background:var(--green);border-color:var(--green);color:var(--white)}
.has-dropdown{position:relative}
.has-dropdown .nav-btn svg{width:12px;height:12px;transition:transform .18s}
.has-dropdown[aria-expanded="true"] .nav-btn svg,.has-dropdown:hover .nav-btn svg{transform:rotate(180deg)}
/* Invisible bridge across the gap under the button, so moving the mouse
   down onto the dropdown does not close it. */
.has-dropdown::after{content:"";position:absolute;top:100%;left:0;right:0;height:12px}
.dropdown{position:absolute;top:100%;left:0;min-width:220px;background:var(--card-bg);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;list-style:none;margin:8px 0 0;display:none;flex-direction:column;z-index:60}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown,.has-dropdown[aria-expanded="true"] .dropdown{display:flex}
.dropdown a{display:block;padding:10px 12px;white-space:nowrap;font-size:.95rem;font-weight:600;color:var(--blue-deep);text-decoration:none;border-radius:8px}
.dropdown a:hover{background:var(--green-light);color:#2F6B51}
.dropdown .dropdown-all{margin:0;padding:0}
.portal-btn{margin-left:8px;padding:11px 18px;font-size:.95rem}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--blue-deep)}
.nav-toggle svg{width:28px;height:28px}
.mobile-note{display:none}

/* Hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#CFE6F4 0%,#E9F4FA 38%,#DCEDF4 58%,#BCD9E6 100%);min-height:680px;display:flex;align-items:center;isolation:isolate}
.hero-bg{position:absolute;inset:0;background-image:url("../assets/photos/hero-coast.jpg");background-size:cover;background-position:center 62%;z-index:-2}
.hero-wash{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.89) 44%,rgba(255,255,255,.62) 64%,rgba(255,255,255,.16) 85%,rgba(255,255,255,0) 100%)}
/* width:100% because .hero is a flex row — without it the block shrinks to
   fit the headline and stops lining up with the rest of the page. */
.hero-inner{display:block;width:100%;padding-top:44px;min-height:680px}
.hero-copy{padding-top:26px;padding-bottom:70px;max-width:none}
.hero .eyebrow{color:var(--blue)}
/* Sized so each sentence of the headline holds on one line. */
.hero h1{font-size:clamp(1.6rem,5vw,3.625rem);margin-bottom:.4em;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.hero .lead{font-size:1.3rem;max-width:620px;color:var(--text)}
.hero-location{font-size:.98rem;color:var(--muted);margin-top:22px}

/* Pulled left so the butterfly's ink, not its transparent edge, lines up
   with the headline below. Offset scales with the mark at each breakpoint. */
.hero-wordmark{display:flex;align-items:center;gap:18px;margin-bottom:30px;margin-left:-11px}
.hero-wordmark .mark{width:120px;height:77px;overflow:hidden;flex:none}
.hero-wordmark .mark img{width:120px;height:auto;display:block}
.wm-name{display:block;font-family:var(--serif);font-size:clamp(1.9rem,4.2vw,3.375rem);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-deep);line-height:1.05}
.wm-tag{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(.95rem,1.3vw,1.15rem);color:var(--blue);letter-spacing:.06em;margin-top:5px}

/* Credentials strip */
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.badge{display:flex;gap:12px;align-items:flex-start;padding:18px 20px;background:var(--card-bg);border:1px solid var(--line);border-radius:12px;font-weight:600;color:var(--blue-deep);line-height:1.35;box-shadow:var(--shadow-sm)}
.badge svg{flex:none;width:22px;height:22px;color:var(--green);margin-top:2px}
.cred-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:44px;margin-top:44px}
.cred-row img{height:112px;width:auto;opacity:.92}
.cred-label{text-align:center;color:var(--muted);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin:0 0 20px}

/* Cards */
.card{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.card h3{margin-bottom:.4em}
.card p{color:var(--muted)}
.card .arrow-link{margin-top:auto;padding-top:8px}
.card-icon{width:44px;height:44px;color:var(--blue);margin-bottom:16px}
.card-icon svg{width:44px;height:44px}
.card-sky{background:var(--sky-light);border-color:transparent}
/* Offerings grid on the home page: three stacked rows of boxes. */
.grid-eyebrow{margin:46px 0 18px}
.grid + .grid{margin-top:24px}
.card-wide{flex-direction:row;gap:22px;align-items:flex-start}
.card-wide .card-icon{margin-bottom:0;flex:none}
.card-wide > div{flex:1;min-width:0}
/* Single box centred under the two-wide row, matching their width. */
.card-solo{max-width:calc(50% - 12px);margin:24px auto 0}
.card-wide h3{margin-bottom:.35em}
.card-wide p{margin:0}
.card-dark{background:var(--blue-deep);border-color:transparent;color:#DCE8F2}
.card-dark h3{color:var(--white)}
.card-dark p{color:#C9D9E7}
.card-dark .eyebrow{color:var(--sky)}

/* Expand and collapse */
details.reveal{border:1px solid var(--line);border-radius:var(--radius);background:var(--card-bg);padding:0;box-shadow:var(--shadow-sm)}
details.reveal summary{list-style:none;cursor:pointer;padding:20px 26px;font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--blue-deep);display:flex;justify-content:space-between;align-items:center;gap:16px}
details.reveal summary::-webkit-details-marker{display:none}
details.reveal summary::after{content:"+";font-family:var(--sans);font-size:1.6rem;line-height:1;color:var(--blue);font-weight:300;transition:transform .2s}
details.reveal[open] summary::after{transform:rotate(45deg)}
details.reveal .reveal-body{padding:0 26px 26px;border-top:1px solid var(--line);padding-top:20px}

/* FAQ list */
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--blue-deep);display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-family:var(--sans);font-size:1.5rem;font-weight:300;color:var(--blue);line-height:1.2;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-body{padding:0 0 22px;max-width:780px}
.faq h2{font-size:1.35rem;margin:0;font-weight:600}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step}
.step{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow-sm)}
.step-num{width:44px;height:44px;border-radius:50%;background:var(--blue);color:var(--white);font-family:var(--serif);font-size:1.4rem;font-weight:600;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.step h3{font-size:1.4rem}
.step p{color:var(--muted);margin:0}
ol.steps-list{list-style:none;padding:0;margin:0;display:grid;gap:18px}
ol.steps-list li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
ol.steps-list .step-num{margin:0}

/* Checklist */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.checks li{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start}
.checks svg{width:26px;height:26px;color:var(--green);margin-top:3px}
.checks strong{display:block;color:var(--blue-deep);font-family:var(--serif);font-size:1.25rem;font-weight:600}

/* Pull quote and photo */
.photo-frame{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--sky-light)}
.photo-frame img{width:100%;height:100%;object-fit:cover}
.pullquote{font-family:var(--serif);font-size:1.6rem;line-height:1.35;color:var(--blue-deep);border-left:4px solid var(--sky);padding-left:22px;margin:0 0 28px;font-style:italic;font-weight:500}

/* Portrait card (Meet) */
/* width:fit-content so the card hugs the cut-out. The photo runs edge to edge
   in its own file, so any extra card width shows as blue beside his shoulders
   and reads as missing arms. */
.portrait-card{background:linear-gradient(180deg,var(--sky-light),var(--sky));border-radius:var(--radius);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;box-shadow:var(--shadow)}
/* The cut-out ends mid-shoulder, so fade the last stretch into the card
   instead of letting it stop on a hard horizontal line. */
.portrait-card img{max-height:520px;width:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 68%,rgba(0,0,0,.72) 84%,rgba(0,0,0,.28) 94%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 68%,rgba(0,0,0,.72) 84%,rgba(0,0,0,.28) 94%,transparent 100%)}

/* Closing */
.closing{background:linear-gradient(135deg,var(--blue-deep) 0%,#24507A 60%,#2E6A9A 100%);color:var(--white);text-align:center;padding:88px 0}
.closing .eyebrow{color:var(--sky);font-variant:small-caps;letter-spacing:.2em;text-transform:none;font-size:1rem}
.closing h2{color:var(--white)}
.closing p{color:#D7E5F0;font-size:1.2rem;max-width:620px;margin:0 auto 28px}
.closing .btn-row{justify-content:center;margin-bottom:22px}
.closing .after{color:#C6D8E6}
.closing .after a{color:var(--white)}

/* Newsletter form */
.signup{display:flex;gap:10px;margin-top:18px}
.signup input{flex:1;padding:14px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:var(--white);font-family:var(--sans);font-size:1rem}
.signup input::placeholder{color:#B9CCDC}
.signup-light input{background:var(--card-bg);border-color:var(--line);color:var(--text)}
.signup-light input::placeholder{color:var(--muted)}

/* Footer */
.site-footer{background:var(--blue-deep);color:#C9D9E7;padding:64px 0 28px;font-size:.98rem}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:48px;align-items:start}
.footer-brand img{width:150px;margin-bottom:14px}
.footer-brand p{margin:0 0 4px}
.footer-brand .doc{color:var(--white);font-family:var(--serif);font-size:1.4rem;font-weight:700}
.footer-address{margin-top:16px;line-height:1.5}
.footer-phone{margin:14px 0 0;font-size:1.6rem;font-weight:700;line-height:1.1}
.footer-phone a{color:var(--white);font-weight:700}
.footer-phone-alt{color:#AEC4D6;font-size:1rem;margin:2px 0 0}
.site-footer h4{color:var(--white);font-family:var(--sans);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:0 0 9px}
.site-footer a{color:#DCE8F2;text-decoration:none}
.site-footer a:hover{color:var(--white);text-decoration:underline}
.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.crisis{margin-top:48px;padding:16px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);text-align:center;color:var(--white);font-weight:600}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:20px;font-size:.9rem;color:#9FB6C9}

/* Page hero for interior pages */
.page-hero{background:linear-gradient(180deg,var(--sky-light) 0%,var(--beige) 100%);padding:64px 0 40px}
.page-hero h1{margin-bottom:.3em}
.page-hero .lead{max-width:760px}
.prose{max-width:820px;margin-left:auto;margin-right:auto}
.prose h2{margin-top:2.2em;font-size:clamp(1.6rem,2.6vw,2.05rem)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.6em}
.prose ul.plain{list-style:none;padding:0}
.prose ul.plain li{padding:14px 0;border-bottom:1px solid var(--line)}
.prose ul.plain li:first-child{border-top:1px solid var(--line)}
.prose .key{color:var(--blue-deep);font-weight:600}
.callout{background:var(--sky-light);border-radius:var(--radius);padding:26px 28px;margin:1.6em 0}
.callout-green{background:var(--green-light)}
.note{font-size:.95rem;color:var(--muted)}
.cycle{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:28px 0}
.cycle .card{padding:24px}
.cycle .card b{font-family:var(--serif);font-size:1.35rem;color:var(--blue-deep);display:block;margin-bottom:.3em}
.chain{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;align-items:center;margin:28px 0;font-family:var(--serif);font-size:1.3rem;color:var(--blue-deep);font-weight:600}
.chain span{padding:8px 16px;border:1px solid var(--sky);border-radius:999px;background:var(--white)}
.chain i{color:var(--green);font-style:normal}
.chain .loop{width:100%;text-align:center;font-family:var(--sans);font-size:.9rem;color:var(--muted);font-weight:400}
.timeline{list-style:none;padding:0;margin:28px 0;display:grid;gap:14px}
.timeline li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;padding:18px 20px;background:var(--card-bg);border:1px solid var(--line);border-radius:12px}
.timeline b{font-family:var(--serif);font-size:1.3rem;color:var(--blue-deep);display:block;margin-bottom:.2em}
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:36px 0}
.contact-cards .card h3{font-size:1.25rem}
.contact-cards .card p{margin:0}
.map{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.map iframe{width:100%;height:360px;border:0;display:block}
.form-placeholder{border:2px dashed var(--sky);border-radius:var(--radius);padding:36px;text-align:center;color:var(--muted);background:var(--off)}
.form-embed{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);background:var(--card-bg)}
.form-embed iframe{width:100%;height:960px;border:0;display:block}
@media (max-width:640px){.form-embed iframe{height:1080px}}
.post-card img{aspect-ratio:16/9;object-fit:cover;border-radius:10px;margin-bottom:16px}
.post-date{font-size:.85rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:600;margin-bottom:6px}
.quote-card{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius);padding:26px;font-family:var(--serif);font-size:1.3rem;line-height:1.4;color:var(--blue-deep);font-weight:500}
.quote-card cite{display:block;margin-top:14px;font-family:var(--sans);font-style:normal;font-size:.9rem;color:var(--muted);font-weight:600}
.video-card iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:10px;margin-bottom:16px}
.issue-card img{aspect-ratio:1/1;object-fit:cover;border-radius:10px;margin-bottom:16px}
.honors ul{margin:0 0 1em}
.two-col{columns:2;column-gap:40px}
.two-col li{break-inside:avoid}

/* Skip link and focus */
.skip{position:absolute;left:-999px;top:8px;background:var(--blue-deep);color:var(--white);padding:10px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}

/* Responsive */
@media (max-width:1400px){
  .nav > ul > li > a,.nav .nav-btn{padding:8px 10px;font-size:.82rem}
  .nav > ul{gap:5px}
  .brand-name{font-size:1.1rem}
  .portal-btn{padding:9px 13px;font-size:.84rem}
}
@media (max-width:1260px){
  .nav-toggle{display:inline-flex}
  .nav{position:fixed;left:0;right:0;top:78px;height:calc(100vh - 78px);background:var(--beige);flex-direction:column;align-items:stretch;padding:16px 24px 40px;overflow-y:auto;display:none;border-top:1px solid var(--line)}
  .nav.open{display:flex}
  .nav > ul{flex-direction:column;align-items:stretch;gap:8px}
  .nav > ul > li > a,.nav .nav-btn{padding:13px 15px;font-size:1.05rem;border-radius:10px;width:100%;justify-content:space-between}
  .has-dropdown::after{display:none}
  .dropdown{position:static;display:flex;box-shadow:none;border:0;background:none;padding:4px 0 0 14px;margin:0}
  .has-dropdown .nav-btn{display:none}
  .has-dropdown::before{content:"Specialties";display:block;padding:14px 8px 6px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .dropdown .dropdown-all{border:0;margin:0 0 4px;padding:0 0 4px}
  .portal-btn{margin:20px 0 0;width:100%;justify-content:center}
  .mobile-note{display:block;text-align:center;color:var(--muted);font-size:.9rem;margin-top:8px}
  .badges{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:36px}
  .steps{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cycle{grid-template-columns:repeat(2,1fr)}
  .contact-cards{grid-template-columns:1fr}
  .hero-wordmark{margin-bottom:20px;margin-left:-8px}
  .hero-wordmark .mark{width:84px;height:54px}
  .hero-wordmark .mark img{width:84px}
  .cred-row img{height:88px}
  .hero-wash{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 55%,rgba(255,255,255,.55) 100%)}
}
@media (max-width:640px){
  body{font-size:1.05rem}
  .section{padding:52px 0}
  .badges,.grid-4,.grid-3,.grid-2,.footer-grid,.cycle{grid-template-columns:1fr}
  .footer-links{grid-template-columns:1fr 1fr}
  .btn{width:100%}
  .btn-row{flex-direction:column;align-items:stretch}
  .hero-copy{padding-bottom:28px}
  .hero{min-height:0}
  .hero-inner{min-height:0;padding-top:40px}
  .two-col{columns:1}
  .card-wide{flex-direction:column;gap:0}
  .card-solo{max-width:none}
  .card-wide .card-icon{margin-bottom:16px}
  .hero-wordmark{margin-bottom:16px;margin-left:-5px}
  .hero-wordmark .mark{width:60px;height:38px}
  .hero-wordmark .mark img{width:60px}
  .cred-row{gap:28px}
  .cred-row img{height:76px}
  .signup{flex-direction:column}
  .chain{font-size:1.1rem}
}

/* ==========================================================================
   design-v2: quiet-luxury layer (round one, 2026-09-22)
   Sits on top of the rules above and overrides by cascade order, so the
   original decisions stay readable. Colour spend: navy rules, one gold, the
   logo red as a single hairline on the crisis line. Everything else linen.
   ========================================================================== */
:root{
  --gold:#D1AA3F;
  --gold-line:rgba(201,162,39,.85);
  --navy-line:rgba(27,58,92,.38);
  --radius:2px;
  --shadow:none;
  --shadow-sm:none;
}

/* Type: one step larger, one step heavier, so the words come forward. */
body{font-weight:500;font-size:1.1875rem;line-height:1.6}
h1,h2,h3,h4{font-weight:700}
strong{font-weight:700}
.lead{font-size:1.3rem}
.card p,.step p,.section-head p,.badge{color:#2B3843}
.eyebrow{color:var(--blue-deep);font-weight:700;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold);flex:none}
.closing .eyebrow{justify-content:center}
.card .eyebrow{font-size:.78rem}

/* Buttons: square corners, no pill. */
.btn{border-radius:var(--radius);padding:15px 26px}
.btn-outline{border-color:var(--blue-deep);color:var(--blue-deep)}
.btn-outline:hover{background:var(--blue-deep);border-color:var(--blue-deep)}

/* Header: the footer navy with white text, a hairline that draws on hover,
   a white square Patient portal button. */
.site-header{background:var(--blue-deep);border-bottom:1px solid rgba(255,255,255,.12)}
.brand{color:var(--white)}
.brand-name small{color:var(--sky)}
.nav > ul{gap:12px}
.nav > ul > li > a,.nav .nav-btn{background:transparent;border:0;color:var(--white);border-radius:0;padding:10px 6px;position:relative;font-size:.9rem}
.nav > ul > li > a::after,.nav .nav-btn::after{content:"";position:absolute;left:6px;right:6px;bottom:4px;height:1px;background:var(--white);transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.nav > ul > li > a:hover,.nav .nav-btn:hover,.nav .has-dropdown:hover .nav-btn,.nav > ul > li > a[aria-current="page"]{background:transparent;border-color:transparent;color:var(--white)}
.nav > ul > li > a:hover::after,.nav .nav-btn:hover::after,.nav .has-dropdown:hover .nav-btn::after{transform:scaleX(1)}
.nav > ul > li > a[aria-current="page"]::after{transform:scaleX(1);background:var(--gold)}
.portal-btn{background:var(--white);border-color:var(--white);color:var(--blue-deep);margin-left:14px}
.portal-btn:hover{background:var(--sky-light);border-color:var(--sky-light);color:var(--blue-deep);transform:none}
.nav-toggle{color:var(--white)}
.dropdown{border:1px solid var(--navy-line);border-radius:var(--radius);box-shadow:8px 8px 0 rgba(27,58,92,.10);padding:6px;margin-top:6px}
.dropdown a{border-radius:0;border-left:2px solid transparent}
.dropdown a:hover{background:var(--sky-light);color:var(--blue-deep);border-left-color:var(--gold)}

/* Hero: his coast, now moving. The photo stays underneath as the fallback,
   the video sits over it. */
.hero{min-height:720px}
.hero-bg{z-index:-3}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;z-index:-2;pointer-events:none}
.hero h1{text-shadow:none}
.hero h1 .ko-line{padding-bottom:.08em;margin-bottom:-.08em}
.hero-location{color:var(--text)}

/* Trust lines: four short lines under a navy rule, the butterfly as the mark. */
.badges{gap:24px 32px}
.badge{background:none;border:0;border-top:1px solid var(--navy-line);border-radius:0;padding:18px 0 0;box-shadow:none;gap:12px;font-size:1.02rem;line-height:1.4}
.badge .mark-sm{width:30px;height:19px;overflow:hidden;flex:none;margin-top:4px}
.badge .mark-sm img{width:30px;height:auto;display:block}

/* Cards keep their structure, lose the rounded shadowed look: a navy rule,
   square corners, an offset navy shadow on hover, gold on the four specialties. */
.card{border:1px solid var(--navy-line);border-radius:var(--radius);box-shadow:none;transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s cubic-bezier(.22,.61,.36,1)}
.card:hover{box-shadow:6px 6px 0 var(--blue-deep);transform:translate(-2px,-2px)}
.card-spec{border-top:2px solid var(--gold)}
.card-sky{border-color:var(--navy-line)}
.card-icon{color:var(--blue-deep);width:36px;height:36px;margin-bottom:14px}
.card-icon svg{width:36px;height:36px}
.card-plain{background:transparent;border:0;border-top:1px solid var(--navy-line);padding:24px 0 0}
.card-plain:hover{box-shadow:none;transform:none}
.card-dark{border-color:var(--blue-deep)}
.card-dark:hover{box-shadow:6px 6px 0 var(--gold)}
details.reveal{border:1px solid var(--navy-line);border-radius:var(--radius);box-shadow:none}

/* How I work: his 2026 photo, framed by a navy rule, drifting slowly on scroll. */
.photo-frame{border-radius:var(--radius);box-shadow:none;border:1px solid var(--navy-line);aspect-ratio:4/5;max-height:640px;position:relative}
.photo-frame img{position:relative;width:100%;height:118%;top:-9%;object-fit:cover;object-position:center 30%}
/* Meet Dr. Valentine: wide office photo (both lamps, full hair), shown whole, no top/bottom trim. */
.split--meet > .photo-frame{aspect-ratio:31/30;max-height:none}
.split--meet > .photo-frame img{height:100%;top:0}
.pullquote{border-left:2px solid var(--gold)}

/* Getting started: oversized serif numerals, a gold underline that draws in. */
.step{border:1px solid var(--navy-line);border-radius:var(--radius);box-shadow:none;background:transparent;padding:28px 26px 30px}
.steps .step-num{width:auto;height:auto;border-radius:0;background:none;color:var(--blue-deep);font-size:3rem;line-height:1;display:block;position:relative;padding-bottom:12px;margin-bottom:18px}
.steps .step-num::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.22,.61,.36,1) .25s}
.step.is-seen .step-num::after,html:not(.ko-js) .steps .step-num::after{transform:scaleX(1)}

/* Checklist marks in gold. */
.checks svg{color:var(--gold)}

/* Wildflower band: full bleed, silent, drifting. */
.bloom{position:relative;background:var(--blue-deep)}
.bloom-frame{position:relative;height:56svh;min-height:280px;max-height:640px;overflow:hidden}
.bloom-frame img,.bloom-frame video{position:absolute;left:0;width:100%;object-fit:cover}
.bloom-frame img{top:0;height:100%;z-index:0}
.bloom-frame video{top:-10%;height:120%;z-index:1}

/* Meet: the cut-out on a navy panel with a gold hairline, a light tilt on
   desktop hover. width:fit-content stays, see the note on .portrait-card above. */
.portrait-side{perspective:1200px;display:flex;justify-content:center}
.portrait-card img{max-height:600px}
.portrait-card{background:var(--blue-deep);border-radius:var(--radius);border-top:2px solid var(--gold);box-shadow:none;padding-top:28px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,.61,.36,1);will-change:transform}

/* Closing: flat navy. */
.closing{background:var(--blue-deep)}

/* Lighthouse Journal: read or watch, and a slow light sweep every nine seconds. */
.card-dark{position:relative;overflow:hidden}
.card-dark::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-30%;width:26%;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(201,162,39,.10) 35%,rgba(255,255,255,.14) 50%,rgba(201,162,39,.10) 65%,rgba(255,255,255,0) 100%);transform:skewX(-14deg) translateX(0);animation:lh-sweep 9s cubic-bezier(.45,0,.55,1) infinite}
.card-dark > *{position:relative;z-index:1}
@keyframes lh-sweep{0%{transform:skewX(-14deg) translateX(0)}24%{transform:skewX(-14deg) translateX(600%)}100%{transform:skewX(-14deg) translateX(600%)}}
.journal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.journal-mark{width:64px;height:41px;overflow:hidden;flex:none;opacity:.55;animation:lh-glow 9s cubic-bezier(.45,0,.55,1) infinite}
.journal-mark img{width:64px;height:auto;display:block}
@keyframes lh-glow{0%{opacity:.55}10%{opacity:1}22%{opacity:.55}100%{opacity:.55}}
.rw-toggle{display:inline-flex;border:1px solid rgba(255,255,255,.5);margin:2px 0 18px}
.rw-btn{background:transparent;border:0;color:var(--white);font-family:var(--sans);font-size:.86rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:9px 18px;cursor:pointer;line-height:1}
.rw-btn.is-on{background:var(--white);color:var(--blue-deep)}
.rw-btn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.lite-video{position:relative;aspect-ratio:16/9;background:#0F2238;overflow:hidden;border:1px solid rgba(255,255,255,.22);margin-top:6px}
.lite-video img{width:100%;height:100%;object-fit:cover;opacity:.85}
.lite-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lite-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;border:1px solid var(--white);background:rgba(27,58,92,.6);color:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.lite-play svg{width:22px;height:22px;margin-left:3px}
.lite-play:hover{background:var(--blue-deep)}
.lite-title{color:#C9D9E7;font-size:.95rem;margin:10px 0 0}
.signup input{border-radius:var(--radius)}

/* Footer: the one red on the page, a hairline over the crisis line. */
:root{--crisis-line:rgba(203,59,45,.85)}
.crisis{border-top:1px solid var(--crisis-line);border-bottom:1px solid rgba(255,255,255,.14)}

/* Reduced motion: nothing sweeps, tilts, or draws. */
@media (prefers-reduced-motion:reduce){
  .card-dark::before,.journal-mark{animation:none}
  .steps .step-num::after{transform:scaleX(1);transition:none}
  .portrait-card{transition:none;transform:none !important}
  .card,.card:hover{transition:none;transform:none}
}

/* Responsive additions for the new layer. */
@media (max-width:1400px){
  .nav > ul > li > a,.nav .nav-btn{padding:10px 4px;font-size:.84rem}
  .nav > ul{gap:8px}
}
@media (max-width:1260px){
  .nav{background:var(--blue-deep);border-top:1px solid rgba(255,255,255,.12)}
  .nav > ul{gap:0}
  .nav > ul > li > a,.nav .nav-btn{border-radius:0;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.12);font-size:1.1rem}
  .nav > ul > li > a::after,.nav .nav-btn::after{display:none}
  .has-dropdown::before{color:var(--sky)}
  .dropdown{background:none;border:0;box-shadow:none;padding:4px 0 8px 14px}
  .dropdown a{color:var(--white)}
  .dropdown a:hover{background:transparent;color:var(--sky);border-left-color:transparent}
  .portal-btn{margin:22px 0 0}
  .mobile-note{color:var(--sky)}
  .hero{min-height:640px}
}
@media (max-width:640px){
  .hero{min-height:0}
  .bloom-frame{height:38svh;min-height:220px}
  .photo-frame{aspect-ratio:4/5;max-height:520px}
  .steps .step-num{font-size:2.5rem}
  .badges{gap:18px}
}

/* Dark card text stays light (the type rule above would otherwise darken it). */
.card-dark p{color:#C9D9E7}
.card-dark .lite-title{color:#C9D9E7}

@media (max-width:640px){
  /* Each headline sentence holds on one line at phone width. */
  .hero h1{font-size:1.5rem}
}

/* ==========================================================================
   design-v2: round two and three (2026-09-24). Jessee's small list, then the
   doors: two doors over the hero that open onto his own moving coast, once per
   visitor. The head snippet on the home page turns them on unless the visitor
   asked for reduced motion; without it the hero simply shows.
   ========================================================================== */
:root{--radius:4px;--hdr:78px}

/* Small list: name line larger (still under the wordmark), affiliation logos
   larger, shaped-but-not-pill buttons and outlined nav items, second heading
   at the size of the first. */
.brand-name small{font-size:.8rem;letter-spacing:.17em;margin-top:8px;color:#DCE8F2}
.cred-row{gap:40px 52px}
.cred-row img{height:140px}
.btn{border-radius:var(--radius)}
.nav > ul > li > a,.nav .nav-btn{border:2px solid rgba(255,255,255,.9);border-radius:var(--radius);padding:8px 11px;font-size:.88rem;transition:border-color .25s,background .25s}
.nav > ul > li > a::after,.nav .nav-btn::after{display:none}
.nav > ul > li > a:hover,.nav .nav-btn:hover,.nav .has-dropdown:hover .nav-btn{border-color:var(--white);background:rgba(255,255,255,.1)}
.nav > ul > li > a[aria-current="page"]{border-color:var(--gold)}
.nav > ul{gap:8px}
.grid-h2{margin:60px 0 22px}
.grid-h2 + .grid{margin-top:0}

/* Quiet nature behind two sections: soft ridges and a treeline in his blues
   and a little green, low opacity, no outlines, nothing cartoon. */
.section--treats{position:relative;isolation:isolate}
.section--treats::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.9;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%232C5F8D' fill-opacity='.045' d='M0 560c140-70 260-110 400-96 160 16 260 96 420 76 150-18 250-118 400-120 140-2 250 70 380 110V900H0z'/%3E%3Cpath fill='%23A8D3E8' fill-opacity='.22' d='M0 660c180-60 320-70 480-30 150 38 280 86 440 60 160-26 270-120 420-118 110 2 190 48 260 84V900H0z'/%3E%3Cpath fill='%234F8A6E' fill-opacity='.075' d='M0 760c120-50 260-70 400-40 150 32 260 90 420 80 160-10 280-90 440-92 120-2 230 40 340 76V900H0z'/%3E%3Cg fill='%231B3A5C' fill-opacity='.06'%3E%3Cpath d='M92 668l26-70 26 70-10 0 0 34-32 0 0-34z'/%3E%3Cpath d='M150 700l20-56 20 56-8 0 0 26-24 0 0-26z'/%3E%3Cpath d='M1416 640l30-82 30 82-12 0 0 40-36 0 0-40z'/%3E%3Cpath d='M1480 672l22-60 22 60-8 0 0 30-28 0 0-30z'/%3E%3Cpath d='M1540 690l16-44 16 44-6 0 0 22-20 0 0-22z'/%3E%3C/g%3E%3C/svg%3E");background-size:cover;background-position:center bottom;background-repeat:no-repeat}
.section--how{position:relative;isolation:isolate}
.section--how::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%23A8D3E8' fill-opacity='.20' d='M0 700c200-90 380-100 560-60 170 38 300 110 480 80 190-32 320-150 560-140V900H0z'/%3E%3Cg fill='%234F8A6E' fill-opacity='.075'%3E%3Cpath d='M20 760l40-140 40 140-14 0 0 60-52 0 0-60z'/%3E%3Cpath d='M110 790l32-110 32 110-12 0 0 50-40 0 0-50z'/%3E%3Cpath d='M190 815l24-80 24 80-8 0 0 36-32 0 0-36z'/%3E%3Cpath d='M1290 800l28-96 28 96-10 0 0 44-36 0 0-44z'/%3E%3Cpath d='M1370 770l38-132 38 132-14 0 0 56-48 0 0-56z'/%3E%3Cpath d='M1470 800l30-104 30 104-10 0 0 48-40 0 0-48z'/%3E%3Cpath d='M1545 830l22-70 22 70-8 0 0 30-28 0 0-30z'/%3E%3C/g%3E%3Cpath fill='%231B3A5C' fill-opacity='.05' d='M0 860c300-40 520-30 800-10 280 20 520 10 800-30V900H0z'/%3E%3C/svg%3E");background-size:cover;background-position:center bottom;background-repeat:no-repeat}
.section--how .grid{position:relative}

/* Fallback hero: a lighter wash so more of his coast shows. */
.hero-wash{background:linear-gradient(90deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.80) 38%,rgba(255,255,255,.45) 58%,rgba(255,255,255,.10) 80%,rgba(255,255,255,0) 100%)}
.hero-video{filter:saturate(1.12) brightness(1.04)}

/* Footer fills the width: logo, name, address, phone on the left; four
   columns; ages line above the emergency line and larger; links spaced. */
.site-footer{font-size:1.05rem;padding:64px 0 28px}
.site-footer > .container{max-width:1460px}
.footer-grid{grid-template-columns:1.35fr 1fr .85fr .85fr;gap:40px 48px}
.footer-brand img{width:180px;margin-bottom:18px}
.footer-brand .doc{font-size:1.55rem}
.footer-phone{font-size:1.7rem}
.site-footer h4{font-size:.84rem;margin-bottom:18px}
.site-footer li{margin:0 0 13px}
.footer-ages{text-align:center;color:var(--white);font-family:var(--serif);font-size:1.6rem;font-weight:700;margin:52px 0 0}
.crisis{margin-top:14px}
@media (max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.footer-grid{grid-template-columns:1fr}.footer-ages{font-size:1.35rem}.cred-row img{height:100px}.cred-row{gap:24px 32px}.brand-name{font-size:1.1rem}.brand-name small{font-size:.6rem;letter-spacing:.14em;margin-top:6px}}

/* Specialty cards carry his renders: 4:3 at the top, under a 40 percent navy
   wash so the name and copy below stay the point. */
.card-spec{overflow:hidden}
.card-spec .card-img{position:relative;margin:-30px -28px 20px;aspect-ratio:4/3;overflow:hidden;background:var(--blue-deep)}
.card-spec .card-img img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.card-spec .card-img::after{content:"";position:absolute;inset:0;background:rgba(27,58,92,.40)}
.card-spec:hover .card-img img{transform:scale(1.04)}

/* ==========================================================================
   design-v2: round four (2026-09-25). Jessee's round-two checklist. The doors
   are gone (his call: the page is stronger without them). Boxes get a double
   near-black rule and softer corners; the wave from "How treatment is done"
   now sits behind every tan section; the Questions block is a thin banner
   over a drop falling into still water; Arthur has his own place.
   ========================================================================== */
:root{
  --ink:#1F2933;
  --box-radius:14px;
  --gold-text:#8A6A14;
  --waves:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%232C5F8D' fill-opacity='.045' d='M0 560c140-70 260-110 400-96 160 16 260 96 420 76 150-18 250-118 400-120 140-2 250 70 380 110V900H0z'/%3E%3Cpath fill='%23A8D3E8' fill-opacity='.22' d='M0 660c180-60 320-70 480-30 150 38 280 86 440 60 160-26 270-120 420-118 110 2 190 48 260 84V900H0z'/%3E%3Cpath fill='%234F8A6E' fill-opacity='.075' d='M0 760c120-50 260-70 400-40 150 32 260 90 420 80 160-10 280-90 440-92 120-2 230 40 340 76V900H0z'/%3E%3C/svg%3E");
}

/* Boxes: same shapes, a double near-black rule, softer corners. */
.card,.step,details.reveal,.faq-item,.photo-frame,.portrait-card{border:3px double var(--ink);border-radius:var(--box-radius)}
.card-spec{border-top:3px double var(--ink)}
.card-spec .card-img{border-radius:calc(var(--box-radius) - 4px) calc(var(--box-radius) - 4px) 0 0}
.card-plain{border:0;border-top:1px solid var(--navy-line);border-radius:0}
.card-dark{border:3px double var(--gold)}
.card-tan{background:var(--off)}
.portrait-card{border-top:3px double var(--gold)}

/* The wave behind every tan section, and behind "How I work" without the
   upward tree shapes. */
.band-off,.section--how,.section--treats{position:relative;isolation:isolate}
.band-off::before,.section--how::before,.section--treats::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:1;background-image:var(--waves);background-size:cover;background-position:center bottom;background-repeat:no-repeat}
.band-off > .container{position:relative}

/* Hero: even steps between every element, text a half inch further left,
   the location and address resting near the bottom of the coast. */
.hero-inner{min-height:720px;padding-top:40px}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:30px;min-height:680px;padding-top:24px;padding-bottom:40px}
.hero-copy > *{margin:0}
.hero-wordmark{margin-bottom:0}
.hero h1{margin:0;line-height:1.22}
.hero-kicker{font-family:var(--serif);font-size:1.45rem;font-weight:700;letter-spacing:.06em;color:var(--gold-text);margin:10px 0 -12px}
.hero .lead{max-width:640px}
.hero .btn-row{margin-top:8px}
.hero-foot{margin-top:auto;padding-top:26px}
.hero-location{font-size:1.14rem;font-weight:600;color:var(--blue-deep);margin:0}
.hero-address{font-size:1.06rem;color:var(--text);margin:6px 0 0}
.hero-address a{color:var(--blue-deep);font-weight:700;text-decoration:none;white-space:nowrap}
.hero-address a:hover{text-decoration:underline}
@media (min-width:1260px){.hero-copy{margin-left:-48px}}

/* Banner under the hero: one contained panel, four lines. */
.badges--panel{border:3px double var(--ink);border-radius:var(--box-radius);background:var(--card-bg);padding:24px 28px;gap:0}
.badges--panel .badge{border-top:0;padding:4px 22px;border-left:1px solid var(--gold-line)}
.badges--panel .badge:first-child{border-left:0;padding-left:0}

/* How treatment is done: the thin strip under the four methods. */
.card-strip{margin-top:24px;padding:16px 28px;flex-direction:row;justify-content:center;text-align:center}
.card-strip p{margin:0;font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--blue-deep)}
.card-strip:hover{box-shadow:none;transform:none}
.grid-boxes{margin-top:24px}

/* Meet + How I work in one section, one photo. */
.split--meet{align-items:start}
.how-block{margin-top:44px;padding-top:30px;border-top:1px solid var(--gold-line)}
.how-h{font-size:clamp(1.7rem,2.8vw,2.2rem);margin-bottom:.4em}

/* Questions: a thin banner over still water. The rings are the fallback and
   sit under the video; they stop for reduced motion. */
.q-banner{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#BFDDEB 0%,#8FBCD4 100%);min-height:220px;display:flex;align-items:center}
.q-banner__water{position:absolute;inset:0;z-index:-1}
.q-banner__water video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.q-banner__water::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,58,92,.72) 0%,rgba(27,58,92,.45) 45%,rgba(27,58,92,.08) 100%)}
.q-ring{position:absolute;left:72%;top:50%;width:40px;height:14px;margin:-7px 0 0 -20px;border:1.5px solid rgba(255,255,255,.7);border-radius:50%;animation:q-ring 4.8s cubic-bezier(.2,.6,.3,1) infinite;opacity:0}
.q-ring:nth-child(2){animation-delay:1.6s}.q-ring:nth-child(3){animation-delay:3.2s}
@keyframes q-ring{0%{transform:scale(.2);opacity:0}12%{opacity:.9}100%{transform:scale(14);opacity:0}}
.q-banner__inner{position:relative;padding-top:44px;padding-bottom:44px;display:flex;align-items:baseline;gap:18px 36px;flex-wrap:wrap}
.q-banner h2{color:var(--white);margin:0;font-size:clamp(2.2rem,4vw,3rem)}
.arrow-link--light{color:var(--white);font-size:1.15rem;font-weight:600}
.arrow-link--light:hover{color:var(--white)}

/* Arthur */
.arthur__panel{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;border:3px double var(--ink);border-radius:var(--box-radius);background:var(--card-bg);padding:44px 48px}
.arthur .eyebrow{color:var(--gold-text)}
.arthur h2{margin-bottom:.15em}
.arthur__sub{font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--blue);margin-bottom:.8em}
.arthur__how{list-style:none;padding:0;margin:18px 0;display:flex;flex-wrap:wrap;gap:10px 26px;counter-reset:ah}
.arthur__how li{counter-increment:ah;font-weight:600;color:var(--blue-deep)}
.arthur__how li::before{content:counter(ah);display:inline-block;font-family:var(--serif);font-size:1.4rem;color:var(--gold-text);margin-right:8px}
.arthur__note{font-size:.92rem;color:var(--muted);margin:0}
.arthur__widget{display:flex;justify-content:center;align-items:center;min-height:160px}

/* Ready to begin: the three words a touch larger. */
.closing .eyebrow{font-size:1.22rem}

/* Footer: room between address and phone, columns sit a little lower,
   white rule under each column heading. */
.footer-phone{margin-top:26px}
.footer-grid > div:not(.footer-brand){padding-top:34px}
.site-footer h4{padding-bottom:10px;border-bottom:1px solid var(--white);display:inline-block;min-width:60%}

@media (max-width:1000px){
  .badges--panel .badge:nth-child(3){border-left:0;padding-left:0}
  .badges--panel{row-gap:18px}
  .arthur__panel{grid-template-columns:1fr;padding:32px 28px}
}
@media (max-width:640px){
  .hero-inner{min-height:0}
  .hero-copy{min-height:0;gap:22px}
  .hero-kicker{font-size:1.2rem;margin:4px 0 -8px}
  .hero-foot{padding-top:6px}
  .hero-address a{display:inline-block}
  .badges--panel{padding:20px}
  .badges--panel .badge{border-left:0;padding:0;border-top:1px solid var(--gold-line);padding-top:14px}
  .badges--panel .badge:first-child{border-top:0;padding-top:0}
  .q-ring{left:80%}
  .footer-grid > div:not(.footer-brand){padding-top:0}
}
@media (prefers-reduced-motion:reduce){.q-ring{animation:none;display:none}.q-banner__water video{display:none}}
.q-banner__inner{width:100%}
.q-banner__water::after{background:linear-gradient(90deg,rgba(27,58,92,.70) 0%,rgba(27,58,92,.38) 34%,rgba(27,58,92,0) 60%)}
.q-banner__water video{object-position:center 58%;filter:saturate(1.1) brightness(1.06)}
.steps .step{background:var(--card-bg)}

/* ==========================================================================
   Round five (2026-09-25): the home page's look carried onto the interior
   pages. Split hero with his render in a framed panel under the same 40
   percent navy wash as the home cards, gold hairlines, double-bordered
   lists and callouts, and the wave at the foot of every long text section.
   Copy untouched. Motion comes from ko-motion data attributes in the pages.
   ========================================================================== */
.page-hero--media{padding:56px 0 64px;border-bottom:1px solid var(--gold-line);position:relative;isolation:isolate}
.page-hero--media::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--waves);background-size:100% auto;background-position:center bottom;background-repeat:no-repeat;opacity:.9}
.ph-split{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:56px;align-items:center}
.ph-copy .lead{max-width:none;color:var(--text)}
.ph-copy h1{margin-bottom:.35em}
.ph-media{position:relative;margin:0;aspect-ratio:4/3;border:3px double var(--ink);border-top:3px double var(--gold);border-radius:var(--box-radius);overflow:hidden;background:var(--blue-deep);box-shadow:0 18px 40px -24px rgba(27,58,92,.55)}
.ph-media--wide{aspect-ratio:16/11}
.ph-media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.22,.61,.36,1)}
.ph-media::after{content:"";position:absolute;inset:0;background:rgba(27,58,92,.40);pointer-events:none}
.ph-media:hover img{transform:scale(1.03)}

/* Headings in long text get the gold hairline the eyebrows use. */
.prose--r5 h2::before{content:"";display:block;width:48px;height:2px;background:var(--gold);margin-bottom:16px}
.prose--r5 > h2:first-child{margin-top:0}

/* Symptom and point lists: one double-bordered panel, gold hairline rows. */
.prose--r5 ul.plain{border:3px double var(--ink);border-radius:var(--box-radius);background:var(--card-bg);padding:8px 30px;margin:1.4em 0}
.prose--r5 ul.plain li{position:relative;padding:16px 0 16px 26px;border-bottom:1px solid var(--gold-line);border-top:0}
.prose--r5 ul.plain li:first-child{border-top:0}
.prose--r5 ul.plain li:last-child{border-bottom:0}
.prose--r5 ul.plain li::before{content:"";position:absolute;left:0;top:1.45em;width:12px;height:1px;background:var(--gold)}
.page-hero--media ~ .section .callout,.page-hero--media ~ .section-tight .callout{border:3px double var(--ink);border-radius:var(--box-radius)}

/* The wave at the foot of the long text sections and the closing band. */
.section--prose,.section--prose + .band-sky{position:relative;isolation:isolate}
.section--prose::before,.section--prose + .band-sky::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--waves);background-size:100% auto;background-position:center bottom;background-repeat:no-repeat}
.section--prose + .band-sky{border-top:1px solid var(--gold-line);padding:84px 0}

@media (max-width:900px){
  .ph-split{grid-template-columns:1fr;gap:28px}
  .ph-media{order:-1;aspect-ratio:16/10}
  .page-hero--media{padding:28px 0 44px}
  .prose--r5 ul.plain{padding:4px 20px}
}
@media (prefers-reduced-motion:reduce){.ph-media img{transition:none}.ph-media:hover img{transform:none}}
/* Round five: the wave behind the two home sections that sat on plain tan. */
.band-wave{position:relative;isolation:isolate}
.band-wave::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--waves);background-size:cover;background-position:center bottom;background-repeat:no-repeat}

/* ==========================================================================
   Round six (2026-09-25 call): no dark tint on any image, the home motion
   loops on the interior heroes, eyebrows at the size of the line under the
   headline, the FAQ in his four sections with jump links, and centred
   headings, intros and buttons on phones.
   ========================================================================== */
.ph-media::after,.card-spec .card-img::after,.q-banner__water::after{content:none;display:none}
.ph-media video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.ph-media--bright video{filter:brightness(1.1) saturate(1.06)}
.q-banner h2,.q-banner .arrow-link--light{text-shadow:0 1px 2px rgba(20,40,64,.45),0 0 18px rgba(20,40,64,.35)}
.lj-issue .lj-video-play{background:none}

/* Eyebrow above each page headline: same size as the lead under it. */
.page-hero .eyebrow{font-size:1.3rem;letter-spacing:.1em}
.page-hero .eyebrow::before{width:40px}

/* FAQ: jump links to the four sections, a subtle heading per section,
   questions still one after the other. */
.faq-jump{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 44px}
.faq-jump__item{display:flex;flex-direction:column;gap:8px;padding:18px 20px;border:3px double var(--ink);border-top:3px double var(--gold);border-radius:var(--box-radius);background:var(--card-bg);text-decoration:none;color:var(--blue-deep);transition:transform .25s ease,box-shadow .25s ease}
.faq-jump__item:hover{transform:translateY(-2px);box-shadow:0 12px 26px -18px rgba(27,58,92,.55)}
.faq-jump__num,.faq-group__num{font-family:var(--serif);font-weight:700;color:var(--gold-text);font-size:1.2rem}
.faq-jump__label{font-family:var(--serif);font-weight:700;font-size:1.2rem;line-height:1.25}
.faq-group{max-width:860px;margin:0 auto;scroll-margin-top:110px}
.faq-group + .faq-group{margin-top:40px}
.faq-group__h{display:flex;align-items:baseline;gap:14px;font-size:clamp(1.45rem,2.4vw,1.8rem);margin:0 0 6px;padding-bottom:10px;border-bottom:1px solid var(--gold-line)}
.faq-group .faq details:first-of-type{border-top:0}
.faq h3{font-size:1.3rem;margin:0;font-weight:600}
.faq summary{padding:16px 0}
@media (max-width:900px){.faq-jump{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.faq-jump__item{transition:none}.faq-jump__item:hover{transform:none}}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Phones: headings, short intros and button rows centred; long body copy
   and lists stay left for reading. */
@media (max-width:640px){
  .page-hero h1,.page-hero .lead,.ph-copy,.section-head,.section-head h2,.section-head p,
  .grid-h2,.q-banner__inner,.closing,.hero-copy h1,.hero-copy .lead,.hero-kicker{text-align:center}
  .page-hero .eyebrow,.section-head .eyebrow,.hero .eyebrow{justify-content:center}
  .hero-copy{align-items:center}
  .page-hero .btn-row,.section-head .btn-row,.hero .btn-row{justify-content:center}
  .q-banner__inner{justify-content:center}
  .faq-jump{grid-template-columns:1fr 1fr;gap:10px}
  .faq-jump__item{padding:14px;text-align:center;align-items:center}
  .faq-jump__label{font-size:1.05rem}
  .faq-group__h{justify-content:center;text-align:center}
}

/* Round six, part two: his specialty images move (Higgsfield loops) in the
   specialty heroes and on the four Specialties cards. Poster = the still. */
.card-spec .card-img video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.card-spec:hover .card-img video{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.card-spec .card-img video{transition:none}.card-spec:hover .card-img video{transform:none}}

/* ===== Round seven (Jessee's 9/27 checklist) ===== */
/* Specializing in / Additional Areas of Focus: small caps label with a hairline, three cards, then two centred */
.spec-label{display:flex;align-items:center;gap:18px;margin:4px 0 22px;font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-deep)}
.spec-label::after{content:"";flex:1;height:1px;background:var(--navy-line)}
.spec-label--more{margin-top:52px}
.section--treats .section-head{margin-bottom:22px}
.grid-pair{max-width:calc((200% - 24px) / 3);margin-left:auto;margin-right:auto}
@media (max-width:1260px){.grid-pair{max-width:none}}
/* Specialties drop-down: divider + label above Anxiety and Depression */
.dropdown .dropdown-label{border-top:1px solid var(--line);margin:6px 0 0;padding:12px 12px 4px;font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
@media (max-width:1260px){.dropdown .dropdown-label{border-top-color:rgba(255,255,255,.18);color:var(--sky);padding:14px 4px 4px}}
/* Getting Started: numbers centred in their boxes */
.steps .step-num{text-align:center}
.steps .step-num::after{left:50%;margin-left:-24px;transform-origin:center}
/* How Change Happens: gold opening line */
.prose .lead-gold,.lead-gold{color:var(--gold-text);font-weight:600}
/* How It Works: follow-up headings on their own line; bigger What You Can Expect text */
.plain--stack .key{display:block;margin-bottom:.15em}
.checks--lg li div{font-size:1.32rem;line-height:1.6}
.checks--lg strong{font-size:1.55rem}
/* Insights: diagram */
.diagram-figure{max-width:900px;margin:44px auto 0}
.diagram-figure a{display:block;border-radius:var(--box-radius);overflow:hidden;border:1px solid var(--line);background:#F4F1EA}
.diagram-figure img{display:block;width:100%;height:auto}
/* Insights: Where the Work Happens (his diagram rebuilt as live text) */
.wwh{max-width:1040px;margin:0 auto;background:#F1E9DC;border-radius:var(--box-radius);padding:48px 44px 44px;color:#1F2A44}
.wwh-head{text-align:center;margin-bottom:26px}
.wwh-head h2{margin:0 0 .25em}
.wwh-head p{margin:0;font-size:1.1rem;color:#34405A}
.wwh-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.wwh-phase{border-radius:12px;padding:18px 20px}
.wwh-phase h3{margin:0 0 .2em;font-size:1.5rem;font-weight:500}
.wwh-phase p{margin:0;font-size:.95rem;line-height:1.45}
.wwh-phase .wwh-stages{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.4em}
.wwh-phase--insight{background:#E3ECF5;border:1px solid #CFDDEB}
.wwh-phase--integration{background:#C3D5E7;border:1px solid #B1C7DD}
.wwh-phase--individuation{background:#2E5078;color:#fff}
.wwh-phase--individuation h3,.wwh-phase--individuation p{color:#fff}
.wwh-note{text-align:center;font-family:var(--serif);font-style:italic;font-size:1.15rem;margin:26px 0 18px;color:#34405A}
.wwh-cols{display:grid;grid-template-columns:1fr 200px 1fr;gap:18px;text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4A5566;margin-bottom:12px}
.wwh-col--in{color:#7A5C45}.wwh-col--ch{color:#2E5078}
.wwh-map{position:relative;display:grid;grid-template-columns:1fr 200px 1fr;grid-template-rows:repeat(7,minmax(64px,auto));gap:10px 18px;align-items:center}
.wwh-line{grid-column:2;grid-row:1 / 8;justify-self:center;align-self:stretch;width:2px;background:#B9D0E0}
.wwh-link{grid-column:2;grid-row:var(--r);justify-self:center;position:relative;z-index:1;min-width:150px;text-align:center;padding:10px 18px;background:#fff;border:1px solid #B9D0E0;border-radius:999px;font-family:var(--serif);font-size:1.3rem;color:#1F2A44}
.wwh-stage{grid-column:var(--c);grid-row:var(--r) / span var(--span,1);align-self:stretch;display:flex;align-items:center;gap:14px;background:#FFFAF2;border-radius:12px;padding:14px 18px}
.wwh-stage h4{margin:.15em 0 .1em;font-family:var(--serif);font-size:1.35rem;font-weight:500;color:#1F2A44}
.wwh-stage p{margin:0;font-size:.92rem;line-height:1.4;color:#34405A}
.wwh-num{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.15rem;color:#fff}
.wwh-in .wwh-num{background:#7A5C45}
.wwh-ch .wwh-num{background:#2E5078}
.wwh-observer{border:1.5px dashed #2E5078;background:#F6EFE3}
.wwh-observer .wwh-num{background:#fff;color:#2E5078;border:1.5px solid #2E5078}
.wwh-tag{display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.wwh-tag--insight{background:#E3ECF5;color:#2E5078}
.wwh-tag--integration{background:#C3D5E7;color:#1F3A5C}
.wwh-tag--individuation{background:#2E5078;color:#fff}
.wwh-back{width:max-content;max-width:100%;margin:22px auto 6px;padding:10px 22px;background:#fff;border:1px solid #B9D0E0;border-radius:999px;font-size:1rem;text-align:center}
.wwh-copy{text-align:center;font-size:.8rem;color:#6B7380;margin:0 0 26px}
.wwh-quote{text-align:center;font-family:var(--serif);font-size:1.45rem;line-height:1.35;max-width:760px;margin:0 auto 20px;color:#1F2A44}
.wwh-body{max-width:860px;margin:0 auto;font-size:1rem;line-height:1.7;color:#2B3843}
@media (max-width:800px){
  .wwh{padding:32px 18px}
  .wwh-phases{grid-template-columns:1fr}
  .wwh-cols{display:none}
  .wwh-map{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .wwh-line{position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);z-index:0}
  .wwh-link{align-self:center;margin-top:8px}
  .wwh-stage{position:relative;z-index:1}
  .wwh-in{border-left:4px solid #7A5C45}
  .wwh-ch{border-left:4px solid #2E5078}
  .wwh-back{width:auto;border-radius:14px}
}
/* Depression page */
.ph-sub{font-family:var(--serif);font-size:1.6rem;line-height:1.2;color:var(--blue-deep);margin:-.1em 0 .7em}
.care-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 8px}
.care-box{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--box-radius);padding:20px 22px}
.care-box h3{font-family:var(--sans);font-size:1.08rem;font-weight:700;color:var(--blue-deep);margin:0 0 .35em}
.care-box p{margin:0;font-size:.98rem}
.prose .callout h3{margin-top:0}
.first-step{background:var(--blue-deep);border-radius:var(--box-radius);text-align:center;padding:44px 28px;margin:48px 0 28px}
.prose .first-step h2,.first-step h2{color:#fff;margin:0 0 20px}
.prose .first-step h2::before,.prose .first-step h2::after{display:none}
.crisis-note{background:#EEE8DB;border-radius:var(--box-radius);padding:16px 20px;font-size:.95rem;color:var(--muted);margin:0}
@media (max-width:640px){.care-grid{grid-template-columns:1fr}}
/* Contact: static map (no business labels), links to directions */
.map--static{display:block;position:relative;text-decoration:none}
.map--static img{display:block;width:100%;height:360px;object-fit:cover;object-position:52% 50%}
.map-cta{position:absolute;left:16px;bottom:16px;background:var(--blue-deep);color:#fff;font-family:var(--sans);font-weight:600;font-size:.95rem;padding:10px 16px;border-radius:var(--radius)}
.map--static:hover .map-cta,.map--static:focus-visible .map-cta{background:var(--blue-hover)}
@media (max-width:640px){.map--static img{height:300px}}
/* Nav fit: the full nav (10 items + portal) must fit from 1261 px up; it overflowed before round seven at 1261 to 1370 */
@media (min-width:1261px) and (max-width:1500px){
  .header-inner{gap:14px}
  .nav{gap:6px}
  .nav > ul{gap:4px}
  .nav > ul > li > a,.nav .nav-btn{padding:7px 7px;font-size:.8rem}
  .portal-btn{padding:8px 11px;font-size:.8rem}
  .brand-name{font-size:1rem}
}
@media (min-width:1261px) and (max-width:1340px){
  .nav > ul > li > a,.nav .nav-btn{padding:6px 5px;font-size:.76rem}
  .nav > ul{gap:3px}
  .brand-mark img{width:46px}
}
@media (max-width:640px){.page-hero .eyebrow--long{font-size:.92rem;letter-spacing:.12em}.page-hero .eyebrow--long::before{width:22px}}

/* ---- round eight (Jessee 9/27 afternoon) ---- */
/* drifting "Now accepting new patients" cloud in the hero sky */
.hero-cloud{position:absolute;left:0;right:0;top:14px;height:140px;z-index:0;pointer-events:none;overflow:hidden}
.hero-cloud__drift{position:absolute;top:0;left:0;width:330px;height:128px;animation:heroCloud 44s linear infinite;animation-delay:-12s;will-change:transform,opacity}
.hero-cloud__shape{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 6px 14px rgba(27,58,92,.18))}
.hero-cloud__text{position:absolute;left:0;right:0;top:66%;transform:translateY(-50%);padding:0 30px;margin:0;text-align:center;font-family:var(--serif);font-size:1.12rem;font-weight:600;line-height:1.15;color:var(--blue-deep);white-space:nowrap}
/* desktop: open sky right of the wordmark, drifts right and out */
@keyframes heroCloud{0%{transform:translateX(calc(100vw - 470px));opacity:0}10%{opacity:1}80%{opacity:1}100%{transform:translateX(calc(100vw - 150px));opacity:0}}
@media (max-width:960px){
  .hero-copy{padding-top:96px}
  .hero-cloud{top:6px;height:100px}
  .hero-cloud__drift{width:236px;height:92px;animation:heroCloudM 34s linear infinite;animation-delay:-9s}
  .hero-cloud__text{font-size:.9rem;padding:0 20px}
  @keyframes heroCloudM{0%{transform:translateX(-236px)}100%{transform:translateX(100vw)}}
}
@media (prefers-reduced-motion:reduce){.hero-cloud__drift{animation:none;transform:translateX(calc(100vw - 400px))}}
@media (prefers-reduced-motion:reduce) and (max-width:960px){.hero-cloud__drift{transform:translateX(calc(50vw - 118px))}}

/* Insights: Concepts section */
#concepts,#how-change-happens,#where-the-work-happens,#reflections,#videos,#articles{scroll-margin-top:110px}
.concept-h{font-size:clamp(1.8rem,3vw,2.3rem);margin:0 0 .5em}
.concept-wwh{margin-top:64px}
.diagram-figure--native{max-width:876px}
.wwh-both{grid-column:2;grid-row:3 / span 2;justify-self:center;align-self:center;position:relative;z-index:2;display:block;width:20px;height:24px;color:#6F8FAE;background:#F1E9DC}
.wwh-both svg{display:block;width:100%;height:100%}
@media (max-width:760px){.wwh-both{display:none}}

/* quote cards size to their own text */
.quote-cols{column-count:3;column-gap:24px}
.quote-cols--2{column-count:2}
.quote-cols .quote-card{break-inside:avoid;display:inline-block;width:100%;margin:0 0 24px}
@media (max-width:900px){.quote-cols{column-count:2}}
@media (max-width:640px){.quote-cols,.quote-cols--2{column-count:1}}

/* OCD box list */
.callout h3{margin:0 0 .6em}
.callout-list{margin:0 0 1em;padding-left:1.2em}
.callout-list li{margin:0 0 .35em}

/* ---- round nine (Jessee 9/27 evening) ---- */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Insights: a gold bar under each heading */
.h-gold::after{content:"";display:block;width:56px;height:3px;border-radius:2px;background:var(--gold);margin:14px 0 0}
.text-center .h-gold::after,.narrow .h-gold::after{margin-left:auto;margin-right:auto}
/* Insights: his two diagrams as finished images */
.diagram-figure--wwh{max-width:1000px}
/* Home cloud: higher, see-through, a little faster, clear of the mountains */
.hero-cloud{top:-6px}
.hero-cloud__drift{animation-duration:34s}
.hero-cloud__shape{opacity:.5}
@media (max-width:960px){
  .hero-cloud{top:-4px}
  .hero-cloud__drift{animation-duration:26s}
}

/* ---- round 9.1 (Jessee 9/28): phone digits are tap-to-call too ---- */
.footer-phone-alt a{color:inherit;text-decoration:none}
.footer-phone-alt a:hover{text-decoration:underline}

/* ---- round 9.3 (Jessee 9/28): phone under his name in the header, left aligned, tap to call ---- */
.brand-text{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.brand-name{text-decoration:none;color:inherit}
.brand-mark{display:block}
.brand-phone{display:inline-block;margin-top:7px;font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.06em;line-height:1;color:var(--gold,#D4AC3F);text-decoration:none;white-space:nowrap}
.brand-phone:hover,.brand-phone:focus-visible{text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.brand-phone{font-size:.66rem;letter-spacing:.04em;margin-top:6px}}

/* ---- round 9.4 (Jessee call 9/29): one intro-call button + contact form link, three ways to reach out ---- */
.cta-sublink{margin:14px 0 0;font-size:.95rem;font-weight:600}
.cta-sublink a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px}
.closing .cta-sublink a{color:var(--white)}
.reach-list{margin:8px 0 0;padding-left:1.2em;text-align:left}
.reach-list li{margin:0 0 6px}
.reach-list a{color:inherit;text-decoration:underline;text-underline-offset:3px;font-weight:600}
@media (max-width:640px){.hero .cta-sublink{text-align:center}}

/* ---- Jessee 9/29: header and footer phone numbers in the gold of the logo wings ---- */
.brand-phone,
.footer-phone-alt,
.site-footer .footer-phone a,
.site-footer .footer-phone a:hover,
.site-footer .footer-phone-alt a:hover{color:#E2BD6B}
/* Jessee 10/25: footer office names in the same gold */
.site-footer .footer-address strong{color:#E2BD6B}

/* ---- Jessee 9/29: the three reach-out options inside How It Works step 1 ---- */
ol.steps-list .reach-list li{display:list-item}
/* Contact page: small caption tucked directly under a button (9/29) */
.btn-row--top{align-items:flex-start}
.btn-stack{display:flex;flex-direction:column;align-items:center;gap:6px}
.btn-stack .small{margin:0;text-align:center}
@media (max-width:640px){.btn-row--top{align-items:stretch}.btn-stack{align-items:stretch}}

/* ---- Insights diagrams (9/29): Operating System + Insight/Integration/Individuation wheel,
   with their text and the seven shift cards as live text ---- */
#operating-system,#insight-integration-individuation,#new-patient-package{scroll-margin-top:110px}
.diagram-text{margin-top:36px}
.diagram-text__h{font-size:clamp(1.6rem,2.6vw,2rem);margin:0 0 .5em}
.diagram-text__h--italic{font-style:italic;font-weight:500;margin-top:1.2em}
.diagram-text--center{text-align:center}
.shifts{display:grid;grid-template-columns:1fr 2fr 2fr 2fr;gap:18px;margin:32px 0 0}
.shift-group__label{font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0 0 10px;padding-bottom:8px;border-bottom:4px solid}
.shift-group__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:12px}
.shift-card{position:relative;border:2px solid;border-radius:14px;padding:16px 16px 18px;font-size:1rem;line-height:1.5}
.shift-card h4{font-size:1.35rem;line-height:1.15;margin:10px 0 6px;color:inherit}
.shift-card p{margin:0}
.shift-card .shift-card__path{font-size:.86rem;font-weight:700;letter-spacing:.03em;margin:0 0 8px;opacity:.85}
.shift-card__num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-family:var(--serif);font-size:1.2rem;font-weight:600;font-variant-numeric:lining-nums;color:#fff}
.shift-card__bolt{width:11px;height:18px;margin-left:8px;fill:#9B3A2B;vertical-align:middle}
.shift-group--before .shift-group__label{color:#6E6150;border-color:#CFC8BC}
.shift-group--before .shift-card{background:#FBF9F5;border-color:#D3CCC1;color:#22304A}
.shift-group--before .shift-card__num{background:#7A7064}
.shift-group--insight .shift-group__label{color:#8B6A20;border-color:#E8D3A0}
.shift-group--insight .shift-card{background:#F4E6C4;border-color:#DFC27C;color:#22304A}
.shift-group--insight .shift-card__num{background:#8B6A20}
.shift-group--integration .shift-group__label{color:#16264A;border-color:#16264A}
.shift-group--integration .shift-card{background:#16264A;border-color:#16264A;color:#F4F1EA}
.shift-group--integration .shift-card h4{color:#fff}
.shift-group--integration .shift-card__num{background:#fff;color:#16264A}
.shift-group--individuation .shift-group__label{color:#2B6FA0;border-color:#A8D3F0}
.shift-group--individuation .shift-card{background:#D9EDF9;border-color:#86C1E6;color:#22304A}
.shift-group--individuation .shift-card__num{background:#2B6FA0}
.diagram-closing{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.45;color:var(--blue-deep);text-align:center;margin:44px auto 0;max-width:1000px;text-wrap:balance}
@media (max-width:1100px){
  .shifts{grid-template-columns:1fr;gap:26px;max-width:820px;margin-left:auto;margin-right:auto}
  .shift-group__cards{grid-template-columns:1fr 1fr}
  .shift-group--before .shift-group__cards{grid-template-columns:1fr}
}
@media (max-width:600px){
  .shift-group__cards{grid-template-columns:1fr}
  .diagram-text--center{text-align:left}
}

/* ---- 9/30: a closing band that sits directly above the footer is light blue,
   so it reads as its own band instead of merging into the dark footer.
   Home's mid-page "Ready to Begin?" band stays dark. ---- */
main > .closing:last-child{background:var(--sky-light);color:var(--text);padding:64px 0;border-top:1px solid #CFE3EE}
main > .closing:last-child h2{color:var(--blue-deep)}
main > .closing:last-child p,main > .closing:last-child .after{color:var(--muted)}
main > .closing:last-child .eyebrow{color:var(--blue)}
main > .closing:last-child .after a,main > .closing:last-child .cta-sublink a{color:var(--blue)}
main > .closing:last-child .btn-light{background:var(--blue);border-color:var(--blue);color:var(--white)}
main > .closing:last-child .btn-light:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
main > .closing:last-child .btn-ghost-light{border-color:var(--blue);color:var(--blue)}
main > .closing:last-child .btn-ghost-light:hover{background:var(--blue);color:var(--white)}

/* Office move notice above the header (owner 10/2/2026); remove with the notice after December 2, 2026. */
.site-notice{background:var(--sky-light);color:var(--blue-deep);border-bottom:2px solid var(--gold);text-align:center;font-size:.95rem;line-height:1.45;padding:9px 18px}
.site-notice p{margin:0;max-width:1100px;margin-inline:auto}
.site-notice strong{font-weight:700}
.site-notice a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Treatment approaches strip at the foot of the hero (owner 10/9/2026).
   Each item carries its own gold dot in front; the list is pulled left by one
   dot's width and the wrapper clips it, so a wrapped line never starts with a dot. */
.hero-modalities{overflow:hidden;margin-top:16px;padding-top:14px;border-top:1px solid var(--gold-line)}
.hero-modalities ul{display:flex;flex-wrap:wrap;list-style:none;margin:0 0 0 -1.5em;padding:0;row-gap:4px;font-size:.98rem}
.hero-modalities li{flex:none;white-space:nowrap;font-weight:600;letter-spacing:.02em;color:var(--blue-deep)}
.hero-modalities li::before{content:"\2022" / "";display:inline-block;width:1.5em;text-align:center;color:var(--gold-text);font-weight:700;transform:scale(1.5)}

/* New Patient Package under the hero button (owner 10/9/2026). The summary line does
   the selling for visitors who never open it; the panel opens in place, no pop-up. */
.hero-package{max-width:640px}
.hero-package .nowrap{white-space:nowrap}
.hero-package summary{list-style:none;cursor:pointer;font-size:1.02rem;line-height:1.5;color:var(--text)}
.hero-package summary::-webkit-details-marker{display:none}
.hero-package__name{font-weight:700;color:var(--blue-deep)}
.hero-package__more{display:flex;width:fit-content;margin-top:12px;align-items:center;gap:.5em;padding:8px 18px;font-size:.98rem;font-weight:700;color:var(--blue-deep);background:rgba(209,170,63,.12);border:1px solid var(--gold-line);border-radius:999px;white-space:nowrap;transition:background-color .2s,color .2s}
.hero-package__more::after{content:"";width:.45em;height:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15em) rotate(45deg);transition:transform .25s}
.hero-package[open] .hero-package__more::after{transform:translateY(.1em) rotate(-135deg)}
.hero-package summary:hover .hero-package__more{color:var(--blue-hover);background:rgba(209,170,63,.22)}
.hero-package summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
.hero-package__body{margin-top:14px;padding:20px 24px;background:rgba(255,252,246,.94);border:1px solid var(--gold-line);border-left:3px solid var(--gold);border-radius:10px;box-shadow:var(--shadow-sm)}
.hero-package__body ul{margin:0;padding-left:1.1em;display:grid;gap:10px}
.hero-package__body li{line-height:1.5;color:var(--text)}
.hero-package__body li::marker{color:var(--gold-text)}
.hero-package__body strong{color:var(--blue-deep)}
.hero-package__note{margin:14px 0 0;font-size:.95rem;color:var(--muted)}
.hero-package[open] .hero-package__body{animation:heroPackageIn .35s ease-out}
@keyframes heroPackageIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero-package[open] .hero-package__body{animation:none}}
@media (max-width:640px){.hero-package summary{text-align:center}.hero-package__more{margin-left:auto;margin-right:auto}.hero-package__body{text-align:left}}

/* Explore the Practice: one clickable card per main page, under the hero. */
.explore-card{text-decoration:none;color:var(--text);padding:26px 24px}
.explore-card h3{font-size:1.55rem;line-height:1.2;color:var(--blue-deep);margin-bottom:14px}
.explore-card h3::after{content:"";display:block;width:40px;height:2px;margin-top:12px;background:var(--gold)}
.explore-card p{margin:0 0 18px;flex-grow:1;line-height:1.5}
.explore-card .arrow-link,.explore-card .arrow-link::after{color:var(--gold-text,#8A6A14)}
.explore-card:hover .arrow-link::after{transform:translateX(3px)}
.explore-card:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.explore-card .explore-short{display:none}
.explore-grid{grid-auto-rows:1fr}
@media (max-width:640px){
  .explore-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .explore-card{padding:16px 14px}
  .explore-card h3{font-size:1.15rem;margin-bottom:10px}
  .explore-card h3::after{width:28px;margin-top:8px}
  .explore-card p{display:none}
  .explore-card .explore-short{display:block;margin:0 0 8px;font-size:.92rem;line-height:1.4;color:var(--muted)}
  .explore-grid{grid-auto-rows:auto}
  .explore-card .arrow-link{font-size:0;margin-top:auto;padding-top:0;line-height:1}
  .explore-card .arrow-link::after{font-size:1.15rem}
}

/* Hero: small round headshot beside the "Yale-trained psychiatrist" line. */
.hero-meet{display:flex;align-items:center;gap:18px}
.hero-meet .hero-kicker{margin:0}
.hero-meet__photo{width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:center 22%;background:#DCEDF4;border:3px solid var(--gold);box-shadow:0 4px 14px rgba(27,58,92,.15);flex-shrink:0}
@media (max-width:640px){.hero-meet{justify-content:center}.hero-meet__photo{width:72px;height:72px}}

/* "Now accepting new patients" as a still line: phones only (computers keep the cloud). */
.hero-accepting{display:none;margin:0;font-family:var(--serif);font-size:1.05rem;font-weight:700;letter-spacing:.08em;color:var(--gold-text);text-align:center}

/* Shorter hero on phones (owner 10/10/2026): less empty sky above the logo, tighter
   spacing, smaller logo and photo, so the booking button sits higher on the first screen. */
@media (max-width:640px){
  .hero-inner{padding-top:12px}
  .hero-copy{padding-top:76px;gap:10px}
  .hero-wordmark .mark{width:48px;height:31px}
  .hero-wordmark .mark img{width:48px}
  /* The name and butterfly are already in the header bar right above, so phones skip the big one. */
  .hero-wordmark{display:none}
  /* Services list first in the foot, so it shows right under the package. */
  .hero-foot{display:flex;flex-direction:column}
  /* Services as one centered paragraph with gold dots between, like the computer version.
     main.js marks the last item on each line (.eol) so no dot is left dangling. */
  .hero-modalities{order:-1;margin:-4px 0 16px;padding:0;border-top:0}
  .hero-modalities ul{display:block;text-align:center;margin:0;font-size:.8rem;line-height:1.5;letter-spacing:0}
  .hero-modalities li{display:inline;white-space:nowrap}
  .hero-modalities li::before{display:none}
  .hero-modalities li:not(:last-child)::after{content:"\2022";display:inline-block;margin:0 .45em;color:var(--gold-text);font-weight:700}
  .hero-modalities li.eol::after{visibility:hidden}
  /* The drifting cloud needs empty sky above the headline; phones get a still line instead. */
  .hero-cloud{display:none}
  .hero-copy{padding-top:12px}
  .hero-accepting{display:block}
  /* Smaller "See what's included" pill. */
  .hero-package__more{padding:5px 14px;font-size:.88rem;margin-top:6px}
  .hero-package summary{font-size:.95rem;line-height:1.42}
  .hero-meet{gap:12px}
  .hero-meet__photo{width:60px;height:60px}
  .hero-kicker{font-size:1.02rem;letter-spacing:.03em;line-height:1.3}
  .hero-meet .hero-kicker{text-align:left}
  .hero .lead{font-size:1.04rem;line-height:1.42}
  .hero .lead strong{white-space:nowrap}
  /* "In person..." line the same size as the address under it. */
  .hero-location{font-size:1.06rem}
  /* Two short lines on phones: "In person: ..." and "Telehealth: ..." */
  .hero-location .loc-part{display:block}
  .hero-location .loc-sep{display:none}
  .hero .btn-row{margin-top:2px}
  .hero .btn-row .btn{padding:11px 22px}
}


/* Header fit on phones (owner 10/10/2026): at 360px the logo, name and menu
   button came to 389px, so the page could slide sideways. Tighter gaps, a smaller
   butterfly and a slimmer menu button bring it inside the screen. */
@media (max-width:640px){
  .header-inner{gap:8px}
  .brand{gap:8px}
  .brand-mark{width:44px;height:28px}
  .brand-mark img{width:44px}
  .nav-toggle{padding:4px;margin-right:-4px}
}
/* Header name a little bigger and bolder on phones (owner 10/10/2026), sized to the room left
   beside the menu button so it never pushes the page sideways. */
@media (max-width:640px){
  .brand-name{font-weight:700;letter-spacing:.05em;font-size:min(1.3rem,calc((100vw - 140px) / 12.6));-webkit-text-stroke:.35px currentColor}
  .brand-name small{-webkit-text-stroke:0}
}
@media (max-width:345px){
  .site-header .container{padding:0 14px}
  .brand-name{font-size:.98rem;letter-spacing:.06em}
  .brand-name small{font-size:.5rem;letter-spacing:.06em}
}

/* Home "What the Practice Treats": fewer boxes on phones. Specialty cards show a short
   summary; treatment cards and three of the four practice cards are hidden (computers unchanged). */
.card-spec .spec-short{display:none}
.collab-phone{display:none}
@media (max-width:640px){
  .section--treats .card-spec p:not(.spec-short){display:none}
  .section--treats .card-spec .spec-short{display:block}
  .section--treats .grid-h2,
  .section--treats .grid-4,
  .section--treats .card-strip,
  .section--treats .card-wide:not(.card-tan){display:none}
  /* Collaboration card moves above the heading on phones (owner 10/10/2026). */
  .section--treats .grid-boxes{display:none}
  .section--treats .card-wide.collab-phone{display:flex;margin-bottom:16px}
  .section--treats .collab-phone + .section-head{margin-top:48px}
  .section--treats .collab-phone + .collab-phone{margin-bottom:0}
}

/* Phone hero, round 2 (owner 10/10/2026): briefer specialties list, "Psychiatrist" under
   "Double Board-Certified", package name and "See what's included" side by side with the
   description moved inside the box, larger services text. Computers unchanged. */
.hero .lead--phone,.hero-package__phone,.hero-package__lead{display:none}
@media (max-width:640px){
  .hero .lead--full{display:none}
  .hero .lead--phone{display:block;line-height:1.5}
  .hero .lead--phone strong{color:var(--blue-deep)}
  .hero-kicker{display:flex;align-items:baseline}
  .kicker-yale{flex:none;white-space:pre}
  .hero-package summary{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 12px}
  .hero-package__colon,.hero-package__desc{display:none}
  .hero-package__more{margin:0}
  .hero-package__phone{display:block}
  .hero-package__body .hero-package__full{display:none}
  .hero-package__phone .arrow-link{display:inline;line-height:1.45}
  .hero-package__phone .arrow-link::after{display:inline-block;margin-left:.35em}
  .hero-package__phone .hero-package__note{margin:12px 0}
  .hero-modalities ul{font-size:.875rem}
}

/* Phone home page, round 4 (owner 10/10/2026): drop the repeated "specializes in" paragraph
   from Meet Dr. Valentine, and slim Writings From the Practice to titles and links. */
@media (max-width:640px){
  .meet-repeat{display:none}
  .section--writing .writing-desc,
  .section--writing .rw-toggle{display:none}
}

/* Phone hero: services list folds behind a white "Treatment Approaches" strip (owner 10/10/2026).
   Computers keep the open list. */
.hero-modalities__toggle{display:none}
@media (max-width:640px){
  .hero-modalities__toggle{display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;margin:0;padding:9px 16px;font:inherit;font-size:.95rem;font-weight:700;color:var(--blue-deep);background:#fff;border:1px solid var(--gold-line);border-radius:999px;cursor:pointer}
  .hero-modalities__toggle::after{content:"";width:.45em;height:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15em) rotate(45deg);transition:transform .25s}
  .hero-modalities.is-open .hero-modalities__toggle::after{transform:translateY(.1em) rotate(-135deg)}
  .hero-modalities__toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  .hero-modalities.is-collapsible:not(.is-open) .hero-modalities__panel{display:none}
  .hero-modalities.is-open .hero-modalities__panel{margin-top:10px}
}

/* Phone hero: "New Patient Package" as a white strip matching "Treatment Approaches"
   (owner 10/10/2026); the separate "See what's included" pill is hidden on phones. */
@media (max-width:640px){
  .hero-package summary{display:flex;align-items:center;justify-content:center;gap:.5em;padding:9px 16px;font-size:.95rem;line-height:1.3;background:#fff;border:1px solid var(--gold-line);border-radius:999px}
  .hero-package__more{display:none}
  .hero-package summary::after{content:"";width:.45em;height:.45em;border-right:2px solid var(--blue-deep);border-bottom:2px solid var(--blue-deep);transform:translateY(-.15em) rotate(45deg);transition:transform .25s}
  .hero-package[open] summary::after{transform:translateY(.1em) rotate(-135deg)}
  .hero-modalities{margin-top:0}
}

/* Phone hero bars (owner 10/10/2026): booking button and both strips the same width,
   lined up on the left so more of the beach shows on the right. */
@media (max-width:640px){
  .hero .btn-row{justify-content:flex-start;align-self:stretch}
  .hero .btn-row .btn,.hero-package summary,.hero-modalities__toggle{width:250px;max-width:100%}
  .hero .btn-row .btn{justify-content:center;padding-left:12px;padding-right:12px}
  .hero-package summary,.hero-modalities__toggle{padding-left:12px;padding-right:12px;white-space:nowrap;line-height:1.3}
  .hero-package{align-self:stretch}
  .hero-modalities{align-self:stretch}
  .hero-modalities ul{text-align:left}
}

/* Phone hero sizing (owner 10/10/2026): larger headline and credentials, package wording
   back above a thinner package bar, bars a little lower, smaller location and address. */
@media (max-width:640px){
  .hero h1{font-size:1.7rem}
  .hero-kicker{font-size:1.125rem;letter-spacing:0}
  .hero-meet{gap:10px}
  .hero-meet__photo{width:52px;height:52px}
  .hero .btn-row{margin-top:14px}
  .hero-package__lead{display:block;align-self:stretch;margin:4px 0 -2px;font-size:.92rem;line-height:1.42;color:var(--text);text-align:left}
  .hero-package__lead strong{color:var(--blue-deep)}
  .hero-package__lead .nowrap{white-space:nowrap}
  .hero-package summary{padding-top:5px;padding-bottom:5px}
  .hero-location{font-size:.9rem}
  .hero-address{font-size:.875rem}
}
/* Phone hero, more spacious (owner 10/10/2026): both strips equally thin, more room
   between the pieces, location and address lower. */
@media (max-width:640px){
  .hero-modalities__toggle{padding-top:5px;padding-bottom:5px}
  .hero-modalities{margin-top:6px}
  .hero .lead--phone{margin-top:6px;line-height:1.6}
  .hero-package__lead{margin-top:10px}
  .hero-location{margin-top:30px}
  .hero-address{margin-top:8px}
}
/* Phone hero order (owner 10/10/2026): Treatment Approaches first, then the package,
   then the booking button. The foot box steps aside so its pieces can be reordered. */
@media (max-width:640px){
  .hero-foot{display:contents}
  .hero-modalities{order:1;margin-top:14px;margin-bottom:0}
  .hero-package__lead{order:2}
  .hero-package{order:3}
  .hero .btn-row{order:4;margin-top:8px}
  .hero-location{order:5;align-self:stretch}
  .hero-address{order:6;margin-top:-2px;align-self:stretch}
}
/* Phone hero (owner 10/10/2026): the package sentence is the opener again, ending in a
   small "See what's included" pill right after "cost." The separate wide bar is gone. */
@media (max-width:640px){
  .hero-package__lead{display:none}
  .hero-package{align-self:stretch}
  .hero-package summary{display:block;width:auto;margin-top:10px;padding:0;background:none;border:0;border-radius:0;text-align:left;font-size:.92rem;line-height:1.5;white-space:normal;color:var(--text)}
  .hero-package summary::after{display:none}
  .hero-package__colon,.hero-package__desc{display:inline}
  .hero-package__more{display:inline-flex;margin:0 0 0 .3em;padding:1px 10px;font-size:.8rem;line-height:1.5;vertical-align:baseline;background:#fff}
  /* Pill sits right after "cost." so it reads as part of the package sentence. */
  .hero-package__more{margin-left:.4em}
}
@media (max-width:380px){.hero-kicker{font-size:1.04rem}.hero h1{font-size:1.6rem}.hero .lead--phone{font-size:.95rem}}

/* Phone package pill reads "Details" so it fits beside "cost." (owner 10/10/2026). */
.more-short{display:none}
@media (max-width:640px){.hero-package__more .more-full{display:none}.hero-package__more .more-short{display:inline}}
/* Phone hero: a little more room around the package sentence (owner 10/10/2026). */
@media (max-width:640px){
  .hero-package summary{margin-top:18px}
  .hero .btn-row{margin-top:16px}
}

/* About "How I Show Up" cards (owner 10/10/2026): on computers and tablets the two short
   cards stack on the left beside the taller "Mind, Body, and Spirit" card. Phones unchanged. */
@media (min-width:641px){
  .values-grid{grid-template-columns:3fr 2fr}
  .values-grid .card:nth-child(3){grid-column:2;grid-row:1 / span 2}
}

/* Home "Meet Dr. Valentine" (owner 10/10/2026): the two blue card headings read bolder
   (Cormorant is already at its heaviest loaded weight, so a hairline stroke thickens it). */
.section--how .card-sky h3{-webkit-text-stroke:.5px currentColor}
/* When the section stacks (phones, tablets, small laptops), the photo moves up to sit right
   after the "Meet Dr. Valentine" introduction, before "How I Work". */
@media (max-width:1260px){
  .split--meet{gap:0}
  .split--meet > div:first-child{display:contents}
  .split--meet > div:first-child > *{order:0}
  .split--meet > .photo-frame{order:1;margin:28px 0 0}
  .split--meet > div:first-child > .how-block{order:2}
}

/* New Patient Package: X in the top-right corner of the opened box (10/10/2026). */
.hero-package__body.has-close{position:relative}
.hero-package__close{position:absolute;top:8px;right:8px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--gold-line);border-radius:50%;background:#fff;color:var(--blue-deep);font:400 22px/1 "Source Sans 3",sans-serif;cursor:pointer}
.hero-package__close:hover{background:rgba(209,170,63,.18)}
.hero-package__close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hero-package__body.has-close ul > li:first-child{padding-right:30px}

/* Computers: treatment approaches list fully bold so it stands out (10/10/2026). Phones unchanged. */
@media (min-width:641px){.hero-modalities li{font-weight:700}.hero-modalities ul{font-size:1.08rem}}

/* Phone hero, more spacious (owner 10/11/2026): the four phone lines a little lower and larger;
   order is now package sentence, then Treatment Approaches, then the booking button (a bit lower).
   A note about therapy and existing therapists closes the Treatment Approaches list (phones and computers). */
.hero-modalities__note{margin:10px 0 0;font-size:.95rem;line-height:1.5;font-style:italic;color:var(--text)}
@media (max-width:640px){
  .hero .lead--phone{margin-top:14px;font-size:1.1rem}
  .hero-package{order:2}
  .hero-package summary{margin-top:22px}
  .hero-modalities{order:3;margin-top:16px}
  .hero .btn-row{order:4;margin-top:22px}
  .hero-modalities__note{display:block;margin:10px 0 0;font-size:.875rem;line-height:1.45;font-style:italic;color:var(--text);text-align:left}
}
@media (max-width:380px){.hero .lead--phone{font-size:1rem}}
/* Phone package sentence fits on 3 lines; bars, Book button and sentence all 300px wide; "Details" pill right after "cost." (owner 10/11/2026). */
@media (max-width:640px){
  .hero .btn-row .btn,.hero-package summary,.hero-modalities__toggle{width:300px;max-width:100%}
  .hero-package__more{float:none;margin:0 0 0 .5em}
  .hero-package summary{margin-top:18px}
  .hero-modalities{margin-top:14px}
  .hero .btn-row{margin-top:18px}
}
/* Phone hero: the four lines left-aligned to match the package, bars and Book button (owner 10/11/2026). */
@media (max-width:640px){.hero .lead--phone{text-align:left;align-self:stretch;margin-left:0;margin-right:0}}
/* Phone credentials line ("Yale-trained | Double Board-Certified Psychiatrist"): soft white glow behind
   the gold so it lifts off the sky (owner 10/11/2026). Computers unchanged. */
@media (max-width:640px){.hero-kicker{text-shadow:0 0 8px rgba(255,255,255,.95),0 0 3px rgba(255,255,255,.95)}}
/* Phone credentials row (owner 10/11/2026): "Yale-trained" left, a slightly larger photo centered,
   "Double Board-Certified / Psychiatrist" right. Computers unchanged. */
@media (max-width:640px){
  .hero-meet{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:12px;align-self:stretch}
  .hero-meet .hero-kicker{display:contents}
  .hero-meet__photo{grid-column:2;grid-row:1;width:68px;height:68px;max-width:none}
  .kicker-yale{grid-column:1;grid-row:1;justify-self:end;text-align:right;white-space:nowrap}
  .kicker-sep{display:none}
  .kicker-board{grid-column:3;grid-row:1;justify-self:start;text-align:left;line-height:1.25}
  .kicker-psy{display:block}
}
/* Phone credentials in the sturdy bold font; "Yale-Trained" about 12% larger (owner 10/11/2026). */
@media (max-width:640px){
  .hero-kicker{font-family:"Source Sans 3",sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:0}
  .kicker-yale{font-size:1.18rem}
}
@media (max-width:380px){
  .hero-meet{column-gap:8px}
  .hero-meet__photo{width:60px;height:60px}
  .hero-kicker{font-size:.92rem}
  .kicker-yale{font-size:1.03rem}
}
@media (min-width:381px) and (max-width:413px){.hero-kicker{font-size:.97rem}.kicker-yale{font-size:1.09rem}.hero-meet{column-gap:10px}}
@media (max-width:340px){.hero-kicker{font-size:.85rem}.kicker-yale{font-size:.95rem}.hero-meet__photo{width:54px;height:54px}}
/* Phone credentials: right side on 3 lines (Double / Board-Certified / Psychiatrist) so the photo sits
   exactly in the center (owner 10/11/2026). Computers keep one line. */
@media (max-width:640px){.kicker-dbl,.kicker-bc{display:block}}
/* Phone headshot larger now that the right side is 3 lines (owner 10/11/2026); a few gaps below
   trimmed so the booking button stays on the first screen. */
@media (max-width:640px){
  .hero-meet .hero-meet__photo{width:92px;height:92px}
  .hero .lead--phone{margin-top:6px}
  .hero-package summary{margin-top:14px}
  .hero .btn-row{margin-top:14px}
}
@media (max-width:380px){.hero-meet .hero-meet__photo{width:80px;height:80px}}
@media (max-width:340px){.hero-meet .hero-meet__photo{width:70px;height:70px}}

/* Phone booking bar (owner 10/11/2026): "Book a free intro call | Patient Portal" fixed to the bottom of
   phone screens on every page except thank-you, privacy and terms (added by build-pages.py). Sits under
   the open menu (header is z-index 50). The home page's top-section Book button is hidden on phones. */
.mbar{display:none}
@media (max-width:640px){
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:8px;padding:6px 10px calc(6px + env(safe-area-inset-bottom));background:rgba(255,252,246,.97);border-top:1px solid var(--gold-line);box-shadow:0 -6px 20px rgba(27,58,92,.12)}
  .mbar a{display:flex;align-items:center;justify-content:center;height:42px;border-radius:6px;font:700 1.05rem "Source Sans 3",sans-serif;text-decoration:none;white-space:nowrap}
  .mbar .mbar-book{flex:1;background:#fff;color:var(--blue-deep);border:5px solid var(--blue,#2C5F8D)}
  .mbar .mbar-portal{flex:1;background:#fff;color:var(--blue-deep);border:5px solid var(--gold)}
  .mbar a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  body.has-mbar{padding-bottom:calc(54px + env(safe-area-inset-bottom))}
  .hero .btn-row{display:none}
}
/* Bar text steps down on narrower phones so it never crowds the borders. */
@media (max-width:389px){.mbar a{font-size:1rem}}
@media (max-width:374px){.mbar a{font-size:.95rem}}
@media (max-width:359px){.mbar a{font-size:.8rem}}
@media print{.mbar{display:none !important}}
/* Phone hero list: aligned left (owner 10/19/2026; was centered, "version C", 10/15/2026). */
@media (max-width:640px){.hero .lead--phone{text-align:left}}
/* Phone banner: name line and phone number larger so they are easy to read (owner 10/15/2026). */
@media (max-width:640px){.site-header .brand-name small{font-size:.82rem;letter-spacing:.07em;margin-top:7px}.site-header .brand-phone{font-size:.9rem;letter-spacing:.02em;margin-top:7px}}
/* Phone hero foot (owner 10/11/2026): location lines and address larger; address on its own lines
   (street / city, state ZIP / phone). Computers keep the one-line address. */
@media (max-width:640px){
  .hero-location{font-size:1.06rem}
  .hero-address{font-size:1rem;line-height:1.45}
  .addr-street,.addr-city,.hero-address a{display:block}
  .addr-comma,.addr-sep{display:none}
}
/* Smallest phones (owner 10/19/2026): at 320px the name line pushed the menu button 4px past
   the screen edge. The name line shrinks just enough to fit; 340px and up are unchanged. */
@media (max-width:345px){.site-header .brand-name small{font-size:min(.82rem,calc((100vw - 120px) / 16.4))}}
/* Two offices (owner 10/23/2026): King of Prussia and Society Hill, Philadelphia. Home top section
   shows one address per line on computers (phone after the second); phones stack street / city. */
.hero-address .addr-line{display:block}
@media (max-width:640px){.hero-address .addr-line + .addr-line{margin-top:8px}}
.footer-address + .footer-address{margin-top:12px}
.contact-cards .card p.office + p.office{margin-top:12px}
.map-alt{margin:14px 0 0}
/* Phones: the two office names each get their own line instead of "Philadelphia" wrapping alone. */
.loc-office{white-space:nowrap}
@media (max-width:640px){.loc-pipe{display:none}.loc-office{display:block}}
/* Narrow boxes (Depression "Locations and Ages"): one line per place on every screen size. */
.loc-stack span{display:block}
/* "&" between the two offices where they stack (phones only for the home top line; computers keep "|"). */
.loc-amp{display:none}
@media (max-width:640px){.loc-amp{display:inline}}
/* Home top section addresses as pills (owner 10/23/2026); each pill opens Google Maps directions. */
.hero-address--pills{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:10px}
.hero-address--pills a.addr-pill{display:inline-block;padding:6px 16px;border:1px solid var(--gold-line);border-radius:999px;background:rgba(255,255,255,.78);color:var(--text);font-weight:600;line-height:1.35;white-space:normal;text-decoration:none;transition:background-color .2s,color .2s}
.hero-address--pills a.addr-pill:hover{background:#fff;color:var(--blue-deep);text-decoration:none}
.hero-address--pills .addr-pill .addr-street,.hero-address--pills .addr-pill .addr-city{display:inline}
.hero-address--pills .addr-pill .addr-comma{display:inline}
@media (max-width:640px){
  .hero-address--pills{flex-direction:column;align-items:flex-start;gap:8px}
  .hero-address--pills a.addr-pill{border-radius:18px;padding:7px 16px}
  .hero-address--pills .addr-pill .addr-street,.hero-address--pills .addr-pill .addr-city{display:block}
  .hero-address--pills .addr-pill .addr-comma{display:none}
}
/* Home top section phone number (owner 10/23/2026): solid blue pill so it stands out next to the address pills. */
.hero-address--pills a.addr-phone{display:inline-block;padding:7px 18px;border-radius:999px;background:var(--blue-deep);color:#fff;font-size:1.12rem;font-weight:700;letter-spacing:.02em;line-height:1.3;text-decoration:none;transition:background-color .2s}
.hero-address--pills a.addr-phone:hover{background:var(--blue-hover);color:#fff;text-decoration:none}
@media (max-width:640px){.hero-address--pills a.addr-phone{font-size:1.15rem;padding:8px 20px}}