/* East Mountain Physical Therapy: "Neighborhood Clinic" */
:root { --ink:#16181d; --mute:#4d5160; --line:#ddd7c8; --brand:#002559; --brand-d:#001a40; --accent:#dde56b; --on-accent:#0b1f45; --dark:#0b1f45; --light:#f9f7f2; --tint:#eeeadf; --link-dark:#e9efa0; --r:14px; --btn-r:14px; --img-r:14px; --btn-case:none; --disp:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif; --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif; --disp-w:600; --disp-case:none; --h1:64px; --h2:40px; --body-px:17px; --space:clamp(56px,8vw,96px); }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; font:400 var(--body-px)/1.65 var(--body); color:var(--ink); background:var(--light); }
img { max-width:100%; height:auto; display:block; }
a { color:var(--brand); text-decoration-color:color-mix(in srgb,var(--brand) 40%,transparent); text-underline-offset:3px; text-decoration-thickness:2px; }
a:hover { color:var(--brand-d); text-decoration-color:currentColor; }
h1,h2,h3,.btn,.mh,.by-n { font-family:var(--disp); }
h1,h2,h3 { font-weight:var(--disp-w); text-transform:var(--disp-case); text-wrap:balance; }
h1,h2 { line-height:1.12; letter-spacing:-.012em; margin:0 0 .5em; }
h1 { font-size:clamp(34px,4.6vw,var(--h1)); }
h2 { font-size:clamp(28px,3.4vw,var(--h2)); }
h3 { font-size:clamp(20px,1.8vw,24px); line-height:1.2; margin:0 0 .4em; }
p { margin:0 0 1em; text-wrap:pretty; }
.wrap { width:min(1180px,100% - 40px); margin-inline:auto; }
.sr,.skip:not(:focus) { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip:focus { position:fixed; top:8px; left:8px; z-index:99; background:var(--brand); color:#fff; padding:10px 16px; border-radius:8px; font-weight:700; }
:focus-visible { outline:3px solid var(--brand); outline-offset:2px; border-radius:4px; }
.sec--dark :focus-visible,.ft :focus-visible { outline-color:#fff; }

/* buttons */
.btn { display:inline-block; background:var(--brand); color:#fff; border:0; font-weight:600; font-size:17px; line-height:1.1; padding:15px 24px; border-radius:var(--btn-r); text-decoration:none; cursor:pointer; white-space:nowrap; text-transform:var(--btn-case); transition:background .15s,color .15s; }
.btn:hover { background:var(--brand-d); color:#fff; }
.btn--ghost,.btn--line { background:transparent; color:var(--brand); box-shadow:inset 0 0 0 2px currentColor; }
.btn--ghost:hover,.btn--line:hover { background:var(--brand); color:#fff; box-shadow:inset 0 0 0 2px var(--brand); }
.sec--dark .btn { background:var(--accent); color:var(--on-accent); }
.sec--dark .btn:hover { background:#fff; color:var(--on-accent); }
.sec--dark .btn--line,.sec--dark .btn--ghost { background:transparent; color:#fff; box-shadow:inset 0 0 0 2px #fff; }
.sec--dark .btn--line:hover,.sec--dark .btn--ghost:hover { background:#fff; color:var(--on-accent); box-shadow:none; }
.acts { display:flex; flex-wrap:wrap; gap:12px 14px; align-items:center; margin:26px 0 0; }

/* header and menus */
.util { background:var(--dark); color:#e8e8ee; font-size:14.5px; } .util .wrap { display:flex; gap:22px; justify-content:flex-end; padding:8px 0; } .util a { color:#e8e8ee; } .util a:hover { color:#fff; }
.hd { background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40; }
.hd-in { display:flex; align-items:center; gap:22px; padding:10px 0; }
.logo { display:block; flex:none; } .logo-crop { display:block; width:190px; overflow:hidden; } .logo-crop img { width:100%; height:auto; }
.nav { flex:1; } .nav > ul { display:flex; gap:2px; list-style:none; margin:0; padding:0; justify-content:center; }
.has-menu, .nav > ul > li { position:relative; display:flex; align-items:center; }
.nav .top { padding:14px 12px; font-weight:600; font-size:16px; color:var(--ink); text-decoration:none; } .nav .top:hover { color:var(--brand); }
.tg { display:none; }
.menu { display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid var(--line); border-radius:0 0 var(--r) var(--r); min-width:240px; padding:20px 24px; box-shadow:0 22px 48px rgba(0,0,0,.14); }
.has-menu:hover > .menu,.has-menu:focus-within > .menu,.has-menu.open > .menu { display:block; }
.menu.wide { width:min(920px,92vw); left:-140px; }
.mgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px 30px; }
.mh { font-weight:700; font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); margin:0 0 8px; }
.menu ul { list-style:none; margin:0; padding:0; } .menu li a { display:block; padding:5px 0; text-decoration:none; font-size:16px; line-height:1.3; color:var(--ink); } .menu li a:hover { color:var(--brand); text-decoration:underline; }
.mall { margin:16px 0 0; padding-top:12px; border-top:1px solid var(--line); font-weight:600; }
.burger { display:none; background:none; border:0; width:44px; height:44px; margin-left:auto; cursor:pointer; padding:10px; } .burger i { display:block; height:3px; border-radius:2px; background:var(--ink); margin:5px 0; }
.hd-cta { display:flex; align-items:center; gap:16px; flex:none; } .hd-phones { display:flex; flex-direction:column; } .hd-phone { font-weight:700; color:var(--ink); text-decoration:none; white-space:nowrap; }

/* sections */
.sec { padding:var(--space) 0; }
.sec--tight { padding:36px 0; }
.sec--light { background:var(--light); } .sec--tint { background:var(--tint); }
.sec--dark { background:var(--dark); color:#fff; } .sec--dark h2,.sec--dark h3 { color:#fff; } .sec--dark a { color:var(--link-dark); }
.sec--warn { background:var(--light); }
.lede { font-size:19.5px; color:var(--mute); max-width:62ch; } .sec--dark .lede { color:rgba(255,255,255,.84); }
.prose { max-width:760px; } .prose ul { padding-left:1.2em; } .prose li { margin:0 0 .4em; }
.phero { background:var(--tint); padding:clamp(40px,6vw,72px) 0 clamp(36px,5vw,56px); } .phero h1 { max-width:20ch; } .phero .lead { font-size:20px; color:var(--mute); max-width:62ch; }
.crumbs { font-size:15px; color:var(--mute); margin:0 0 18px; } .crumbs a { color:var(--mute); } .crumbs span { margin:0 4px; }
.splithead { display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(24px,5vw,64px); } .sh-r .row { padding:0 0 18px; margin:0 0 18px; border-bottom:1px solid var(--line); } .sec--dark .sh-r .row { border-color:rgba(255,255,255,.22); }
.cards { display:grid; gap:20px; margin-top:24px; } .c2 { grid-template-columns:repeat(2,1fr); } .c3 { grid-template-columns:repeat(3,1fr); } .c4 { grid-template-columns:repeat(4,1fr); }
.card { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px; } .sec--dark .card { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.22); } .card ul { padding-left:1.2em; margin:0; } .card h3 a { text-decoration:none; color:inherit; }
.steps { list-style:none; counter-reset:s; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; padding:0; margin:24px 0 0; }
.steps li { counter-increment:s; background:#fff; border-radius:var(--r); padding:22px 22px 18px; border:1px solid var(--line); } .steps li::before { content:counter(s); display:block; font:var(--disp-w) 28px/1 var(--disp); color:var(--brand); margin:0 0 10px; }
.acc details { border-bottom:1px solid var(--line); } .acc summary { cursor:pointer; padding:18px 4px; font-weight:600; font-size:18px; } .acc details > div { padding:0 4px 14px; max-width:70ch; }
.flag { background:#fff8f2; border:1px solid #e3bfae; border-radius:var(--r); padding:26px clamp(20px,3vw,36px); max-width:900px; } .fnote { font-size:15.5px; color:var(--mute); }
.twocol { display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(24px,5vw,64px); align-items:start; }
.checks { list-style:none; margin:0; padding:0; } .checks li { padding:12px 0 12px 34px; border-bottom:1px solid var(--line); position:relative; } .checks li::before { content:"\2713"; position:absolute; left:4px; color:var(--brand); font-weight:700; } .sec--dark .checks li { border-color:rgba(255,255,255,.22); }
.media { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,5vw,64px); align-items:center; } .media.flip .mimg { order:-1; } .ph { width:100%; border-radius:var(--img-r); object-fit:cover; }
.chip,.chips li { display:inline-block; padding:9px 16px; background:#fff; border:1px solid var(--line); border-radius:99px; font-weight:500; font-size:16.5px; line-height:1.25; } .chips { list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:20px 0 0; }
.bandtxt { max-width:760px; } .bandtxt p { color:rgba(255,255,255,.88); }
.rel { list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:12px 0 0; } .rel a { display:inline-block; padding:9px 16px; border:1px solid var(--line); background:#fff; border-radius:99px; text-decoration:none; font-weight:500; }

/* people */
.staff--card { display:grid; gap:28px; } .pcard { display:grid; grid-template-columns:240px 1fr; gap:28px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px; } .pimg img,.pimg .ini { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--img-r); }
.ini { display:grid; place-items:center; background:var(--tint); color:var(--brand); font:700 36px var(--disp); } .role { color:var(--mute); font-weight:600; margin:0 0 12px; } .bio { white-space:pre-line; }
.staff--strip { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:20px; } .pstrip img,.pstrip .ini { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--img-r); margin:0 0 10px; } .pstrip h3 { margin:0; font-size:19px; }
.staff--chips { display:flex; flex-wrap:wrap; gap:10px; }
.by { background:#fff; border-bottom:1px solid var(--line); } .by-in { display:flex; gap:20px; align-items:center; width:min(1180px,100% - 40px); margin:0 auto; padding:22px 0; } .by-in img,.by-in .ini { width:80px; height:100px; object-fit:cover; border-radius:var(--img-r); flex:none; font-size:26px; }
.by-k { font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin:0; } .by-n { font-size:20px; font-weight:700; margin:0; } .by-b { margin:6px 0 4px; color:var(--mute); max-width:70ch; } .by-l { margin:0; font-weight:600; }
.who { font-weight:600; }

/* clinics, workshops */
.clinic h2,.clinic h3 { font-size:22px; margin:0 0 10px; } .clinic a { text-decoration-thickness:1px; }
.hrs-t th { text-align:left; padding:3px 18px 3px 0; font-weight:600; } .hrs-t td { padding:3px 0; }
.locgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.ws-list { display:grid; gap:16px; } .ws { display:flex; justify-content:space-between; gap:20px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px 24px; } .ws h2 { font-size:22px; margin:0 0 4px; } .ws-empty { font-size:19px; }

/* home */
.hero { background:var(--dark); color:#fff; padding:clamp(56px,9vw,120px) 0 clamp(48px,7vw,88px); } .hero h1 { color:#fff; max-width:18ch; } .hero .lead { font-size:21px; color:rgba(255,255,255,.88); max-width:56ch; }
.hero .btn { background:var(--accent); color:var(--on-accent); } .hero .btn--ghost { background:transparent; color:#fff; box-shadow:inset 0 0 0 2px #fff; } .hero .btn--ghost:hover { background:#fff; color:var(--on-accent); }
.hero--split .wrap { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,5vw,64px); align-items:center; } .hero--photo { background-size:cover; background-position:center; position:relative; } .hero--photo .wrap { position:relative; }
.hero--light { background:var(--tint); color:var(--ink); } .hero--light h1 { color:var(--ink); } .hero--light .lead { color:var(--mute); } .hero--light .btn { background:var(--brand); color:#fff; } .hero--light .btn--ghost { background:transparent; color:var(--brand); box-shadow:inset 0 0 0 2px currentColor; } .hero--light .btn--ghost:hover { background:var(--brand); color:#fff; }
.heroimg img { border-radius:var(--img-r); width:auto; max-width:100%; height:auto; max-height:540px; margin-inline:auto; }
.reviews { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:20px; } .rv blockquote { margin:0; } .rv .stars { margin:0 0 10px; } .stars { color:#c58b00; letter-spacing:3px; font-size:20px; line-height:1; margin:0 0 8px; } .sec--dark .stars { color:var(--accent); } .rating-line { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:19px; margin:0 0 22px; } .rating-line .stars { margin:0; font-size:24px; } .also { margin:34px 0 14px; font-size:20px; }
.rv { color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px; margin:0; } .rv p { font-size:18px; } .rv cite { font-style:normal; font-weight:600; color:var(--mute); }
.cond-group { margin:0 0 28px; } .cond-group h3 { margin:0 0 10px; }
.ft { background:var(--dark); color:rgba(255,255,255,.86); padding:56px 0 0; border-top:6px solid var(--accent); } .ft a { color:#fff; } .ft h2,.ft h3,.ft .mh { color:#fff; } .ft-in { display:grid; grid-template-columns:1fr; gap:36px; }
.ft-brand { display:flex; flex-wrap:wrap; gap:18px 36px; align-items:center; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.2); } .ft-brand p { margin:0; } .ft-brand .tag { flex:1 1 280px; font-size:19px; max-width:48ch; } .ft-brand .logo-crop { width:200px; filter:brightness(0) invert(1); } .ft-cta { margin-left:auto !important; }
.ft .btn { background:var(--accent); color:var(--on-accent); } .soc { display:flex; gap:14px; } .soc a { color:#fff; }
.ft-main { display:grid; grid-template-columns:minmax(0,2.7fr) minmax(0,1fr); gap:44px; align-items:start; }
.ft-clinics { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:32px; }
.ft-links { display:grid; grid-template-columns:1fr; gap:26px; padding-left:36px; border-left:1px solid rgba(255,255,255,.2); } .ft-links ul { list-style:none; margin:0; padding:0; } .ft-links li { margin:0 0 7px; } .ft-links a { text-decoration:none; } .ft-links a:hover { text-decoration:underline; }
.copy { margin:36px auto 0; padding:22px 0 28px; border-top:1px solid rgba(255,255,255,.2); font-size:14.5px; } .legal { float:right; display:flex; gap:18px; } .legal a { color:rgba(255,255,255,.86); }
.callbar { display:none; }

@media (max-width:980px) {
  .burger { display:block; } .hd-cta { display:none; } .util .wrap { justify-content:center; flex-wrap:wrap; gap:6px 18px; } .logo-crop { width:150px; }
  .nav { display:none; position:absolute; left:0; right:0; top:100%; background:var(--dark); padding:8px 20px 20px; max-height:80vh; overflow:auto; } .nav.open { display:block; }
  .nav > ul { flex-direction:column; align-items:stretch; } .has-menu { flex-wrap:wrap; border-bottom:1px solid rgba(255,255,255,.2); } .nav .top { color:#fff; flex:1; } .nav .top:hover { color:#fff; }
  .nav > ul > li:not(.has-menu) { display:flex; border-bottom:1px solid rgba(255,255,255,.2); } .tg { display:block; width:44px; height:44px; background:none; border:0; cursor:pointer; position:relative; } .tg::after { content:"+"; color:#fff; font-size:24px; } .has-menu.open .tg::after { content:"\2212"; }
  .menu,.menu.wide { position:static; width:100%; min-width:0; background:transparent; border:0; box-shadow:none; padding:0 0 12px; } .menu li a { color:#fff; } .menu .mh { color:var(--accent); } .mgrid { grid-template-columns:1fr; }
  .has-menu:hover > .menu { display:none; } .has-menu.open > .menu { display:block; }
  .splithead,.twocol,.media,.hero--split .wrap,.pcard { grid-template-columns:1fr; } .c3,.c4 { grid-template-columns:1fr 1fr; } .legal { float:none; margin-top:10px; }
  .callbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--dark); gap:8px; padding:8px; } .callbar a { flex:1; text-align:center; color:#fff; padding:10px 8px; font-weight:700; text-decoration:none; border-radius:var(--btn-r); box-shadow:inset 0 0 0 2px rgba(255,255,255,.4); } .callbar small { display:block; font-weight:400; opacity:.8; } .callbar .cb-main { background:var(--accent); color:var(--on-accent); box-shadow:none; flex:1.4; }
  body { padding-bottom:76px; }
}
.cpanel { display:grid; grid-template-columns:minmax(300px,1fr) minmax(0,1.5fr); gap:32px; align-items:stretch; }
.cp-info { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px 34px; } .cp-info h2 { font-size:28px; margin:0 0 14px; }
.cp-list { margin:0; } .cp-list > div { display:grid; grid-template-columns:84px 1fr; gap:12px; padding:15px 0; border-top:1px solid var(--line); } .cp-list dt { font:700 13px/1.6 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); } .cp-list dd { margin:0; } .cp-phone { font:var(--disp-w) 24px/1.2 var(--disp); text-decoration:none; } .cp-dir { display:inline-block; margin-top:6px; font-weight:600; }
.cp-list .hrs-t th { padding-right:22px; } .cp-info .acts { margin-top:22px; }
.cp-map { margin:0; display:flex; flex-direction:column; } .cp-map img { width:100%; height:100%; min-height:380px; object-fit:cover; object-position:center; border-radius:var(--img-r); } .cp-map iframe { width:100%; height:100%; min-height:440px; border:0; border-radius:var(--img-r); background:var(--tint); }
.cp-map figcaption { font-size:14px; color:var(--mute); margin-top:10px; }
@media (max-width:900px) { .cp-map iframe { min-height:340px; } .cpanel { grid-template-columns:1fr; } .cp-map img { min-height:0; height:auto; } .cp-info { padding:24px 22px; } }
.fullmap { position:relative; background:var(--tint); } .fullmap > .ph { display:block; width:100%; height:560px; object-fit:cover; object-position:64% 50%; border-radius:0; }
.fm-over { position:absolute; inset:0; display:flex; align-items:center; pointer-events:none; } .fm-panel { pointer-events:auto; margin-left:max(20px,calc((100% - 1180px) / 2)); width:min(360px,calc(100% - 40px)); background:#fff; border-radius:var(--r); padding:26px 28px; box-shadow:0 18px 50px rgba(0,16,48,.25); }
.fm-panel h2 { font-size:28px; margin:0 0 6px; } .fm-c { padding:14px 0; border-top:1px solid var(--line); } .fm-c h3 { font-size:19px; margin:0 0 4px; } .fm-c h3 a { color:inherit; text-decoration:none; } .fm-c p { margin:0; line-height:1.55; } .fm-panel .acts { margin:16px 0 0; }
@media (max-width:900px) { .fullmap > .ph { height:300px; } .fm-over { position:static; display:block; } .fm-panel { margin:-56px 20px 0; position:relative; width:auto; } }
@media (max-width:900px) { .ft-main { grid-template-columns:1fr; } .ft-links { grid-template-columns:1fr 1fr; padding-left:0; border-left:0; border-top:1px solid rgba(255,255,255,.2); padding-top:26px; } .ft-cta { margin-left:0 !important; } }
@media (max-width:640px) { .c2,.c3,.c4 { grid-template-columns:1fr; } .ft-links { grid-template-columns:1fr 1fr; } .soc { margin-left:0 !important; } }

[data-f="phone"],[data-f="tel"] { white-space:nowrap; }
body { overflow-x:hidden; }

/* the portal logo is a wide JPG on white, so the footer shows it on a plate instead of recoloring it */
.ft-brand .logo-crop { filter:none; background:#fff; padding:10px 16px; border-radius:var(--r); width:230px; }
.logo-crop { width:210px; }

/* home proof bar: four tiles that overlap the bottom of the hero */
.sec--proof { padding:1px 0 30px; background:transparent; position:relative; z-index:2; } .proof { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); margin:-46px 0 0; padding:0; background:#fff; border-radius:var(--r); box-shadow:0 18px 44px rgba(0,22,64,.18); border-top:5px solid var(--accent); position:relative; }
.proof li { border-right:1px solid var(--line); } .proof li:last-child { border-right:0; } .proof li > .pt, .proof li > a { display:block; padding:24px 26px; text-decoration:none; color:inherit; height:100%; }
.proof b { display:block; font:var(--disp-w) 30px/1.1 var(--disp); color:var(--brand); } .proof b .stars { display:block; margin:0 0 6px; font-size:20px; } .proof li span:not(.stars) { display:block; margin-top:6px; color:var(--mute); font-size:16px; } .proof a:hover b { text-decoration:underline; }
.proof-note { margin:16px 0 0; color:var(--mute); text-align:center; }
@media (max-width:900px) { .proof { grid-template-columns:1fr 1fr; margin-top:-30px; } .proof li { border-bottom:1px solid var(--line); } .proof li:nth-child(2n) { border-right:0; } }
/* about: therapists at work */
.gal { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:22px; } .gal .ph { aspect-ratio:1/1; object-fit:cover; }
@media (max-width:760px) { .gal { grid-template-columns:1fr 1fr; } }
/* patient app: store badges */
.badges { display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin:22px 0 0; } .badge { display:inline-block; text-decoration:none; } .badge svg { height:56px; width:auto; display:block; } .badge .ph { width:auto; height:84px; border-radius:0; margin:-14px -8px; }
/* store badges in a page hero */
.phero .badges { margin:20px 0 0; }