/* ============================================================
   LHB COUNSELING — shared stylesheet
   One system, five pages. Extracted from the approved Option H so a
   change lands everywhere instead of in five copies.
   Homepage-only rules (the photographic hero and its cinematic layers)
   stay in the homepage itself.
   ============================================================ */

:root{
  --plum:#4A2F45; --plum-deep:#331F30; --plum-soft:#6E4F68;
  --amber:#B8763C; --amber-pale:#E9D3B8; --amber-wash:#F7E9D8;
  /* --amber fails 4.5:1 as small text on ivory, so text-weight accents use this */
  --amber-text:#8A5320;
  --ivory:#FBF7F2; --shell:#F4ECE3; --white:#FFFFFF;
  --ink:#2A2028; --ink-soft:#5A4E56; --line:#E3D8CD;
  --green:#1E6B4A; --green-wash:#E7F1EB;

  --s1:8px; --s2:14px; --s3:20px; --s4:30px; --s5:46px; --s6:68px; --s7:94px;
  --r:13px; --r-lg:18px;
  --shadow:0 1px 2px rgba(42,32,40,.05), 0 8px 22px rgba(42,32,40,.07);
  --shadow-lg:0 2px 6px rgba(42,32,40,.06), 0 18px 44px rgba(42,32,40,.12);
  --ease:cubic-bezier(.2,.7,.3,1);
  --cine:1; --cine-speed:1;
}

*,*::before,*::after{box-sizing:border-box}
/* hidden first as a fallback, clip second: hidden alone still lets script
   scroll the page sideways, and one anchor can leave it shifted. */
html,body{overflow-x:hidden; overflow-x:clip}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
/* nothing long and unbreakable can push the layout wider than the screen */
p,li,dd,h1,h2,h3,summary,address,.chip,.ans{overflow-wrap:anywhere}
body{margin:0; background:var(--ivory); color:var(--ink);
  font-family:Raleway,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Lora,Georgia,serif; font-weight:500; line-height:1.18; letter-spacing:-.014em; margin:0}
p{margin:0}
img{max-width:100%; height:auto; display:block}
.wrap{width:100%; max-width:1180px; margin:0 auto; padding:0 24px}

.skip{position:absolute; left:-9999px; top:0; z-index:300; background:var(--plum); color:#fff; padding:12px 20px; font-weight:600; text-decoration:none; border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--amber); outline-offset:3px; border-radius:6px}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:14px 28px; border-radius:999px; cursor:pointer;
  font-family:Raleway,sans-serif; font-weight:600; font-size:16px; text-decoration:none;
  border:2px solid transparent;
  transition:background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease)}
.btn-primary{background:var(--amber); color:#22160C; border-color:var(--amber)}
.btn-primary:hover{background:#8A5320; border-color:#8A5320; color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.btn-dark{background:var(--plum); color:#fff; border-color:var(--plum)}
.btn-dark:hover{background:var(--plum-deep); border-color:var(--plum-deep); transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.btn-outline{background:transparent; color:var(--plum); border-color:var(--line)}
.btn-outline:hover{border-color:var(--plum); background:var(--white)}
.btn-sm{min-height:44px; padding:10px 20px; font-size:15px}

/* ---------- status bar ---------- */
.statusbar{background:var(--plum-deep); color:#fff; font-size:14.5px}
.statusbar .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 14px; padding-top:4px; padding-bottom:4px; text-align:center}
.statusbar a{display:inline-flex; align-items:center; min-height:44px; color:var(--amber-pale); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.statusbar a:hover{color:#fff}

/* ---------- header ---------- */
.head{position:sticky; top:0; z-index:100; background:rgba(251,247,242,.93); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
.head .wrap{display:flex; align-items:center; gap:24px; min-height:72px}
.brand{display:inline-flex; align-items:center; min-height:44px; font-family:Lora,Georgia,serif; font-size:21px; font-weight:600; color:var(--plum-deep); text-decoration:none; white-space:nowrap}
.brand em{font-style:normal; color:var(--amber)}
.nav{display:flex; gap:2px; margin-left:auto}
.nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 13px; font-size:15px; font-weight:500; color:var(--ink-soft); text-decoration:none; border-radius:8px}
.nav a:hover{color:var(--plum-deep); background:var(--shell)}
.head .btn{margin-left:6px}
@media (max-width:980px){ .nav{display:none} .head .btn{margin-left:auto} }
@media (max-width:400px){ .head .wrap{gap:6px} .brand{font-size:18px} .head .btn{padding:10px 14px; font-size:14px} }

/* ---------- value cards ---------- */
.vals{background:var(--shell); padding:var(--s6) 0; border-bottom:1px solid var(--line)}
.vals-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
.val{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4)}
.val .ico{width:42px; height:42px; border-radius:11px; background:var(--amber-wash); color:var(--amber-text); display:grid; place-items:center; margin-bottom:var(--s3)}
.val h3{font-size:20px; margin-bottom:8px}
.val p{font-size:15.5px; color:var(--ink-soft)}
@media (max-width:900px){ .vals-grid{grid-template-columns:1fr} }

/* ---------- sections ---------- */
.sec{padding:var(--s7) 0; position:relative}
.sec::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 62% at 88% 0%, rgba(184,118,60,.055), transparent 64%)}
.sec > *{position:relative}
.sec.shell{background:var(--shell)}
.sec.shell::before{background:radial-gradient(58% 62% at 12% 100%, rgba(110,79,104,.07), transparent 62%)}
.sec-head{max-width:620px; margin-bottom:var(--s5)}
.sec-head.center{margin-inline:auto; text-align:center}
.eyebrow{font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-text); margin-bottom:12px}
.sec-head h2{font-size:clamp(27px,3.1vw,40px); margin-bottom:var(--s2)}
.sec-head p{color:var(--ink-soft); font-size:17px}
.rule{width:52px; height:2px; background:var(--amber); border:0; margin:0 0 var(--s3)}
.rule.center{margin-inline:auto}
@media (max-width:900px){ .sec{padding:var(--s6) 0} }

/* ---------- conditions ---------- */
.conds{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2)}
.cond{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; font-weight:600; font-size:16px; display:flex; align-items:center; gap:10px}
.cond svg{flex:none; color:var(--green)}
.cond.feature{grid-column:1 / -1; background:var(--plum); border-color:var(--plum); color:#fff; display:block; padding:var(--s4)}
.cond.feature h3{font-size:clamp(21px,2.3vw,27px); margin-bottom:10px; color:#fff}
.cond.feature p{font-weight:400; font-size:16px; color:var(--amber-pale); margin-bottom:var(--s3)}
.tags{display:flex; flex-wrap:wrap; gap:8px}
.tag{font-size:13.5px; font-weight:500; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(233,211,184,.34); color:#fff}
@media (max-width:900px){ .conds{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .conds{grid-template-columns:1fr} }

/* ---------- insurance ---------- */
.ins-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--s2); margin-bottom:var(--s4)}
.ins{display:flex; align-items:center; justify-content:center; gap:10px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r); padding:22px 16px; font-weight:600; font-size:16.5px; text-align:center}
.ins svg{flex:none; color:var(--green)}
@media (max-width:820px){ .ins-grid{grid-template-columns:1fr} }
.note{font-size:15px; color:var(--ink-soft); max-width:74ch; line-height:1.65}

/* ---------- provider ---------- */
.provider{display:grid; grid-template-columns:230px 1fr; gap:var(--s5);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s5); box-shadow:var(--shadow); align-items:start}
.provider .pic{overflow:hidden; aspect-ratio:4/5; border-radius:var(--r); border:1px solid var(--line); display:grid; place-items:center; text-align:center;
  background:radial-gradient(74% 58% at 30% 22%, rgba(233,211,184,.72), transparent 62%), linear-gradient(155deg, var(--shell), #E7DACB)}
.provider .pic .ph{font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--plum-deep); background:rgba(251,247,242,.88); padding:8px 13px; border-radius:999px; border:1px dashed var(--plum-soft)}
.provider h3{font-size:25px; margin-bottom:6px}
.provider .role{font-size:14.5px; color:var(--ink-soft); margin-bottom:var(--s3)}
.quote{font-family:Lora,Georgia,serif; font-style:italic; font-size:18px; line-height:1.5; color:var(--plum-deep); margin:var(--s3) 0; padding-left:var(--s3); border-left:2px solid var(--amber)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:var(--s3) 0}
.chip{background:var(--shell); border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:14px; font-weight:500; color:var(--ink)}
.provider dl{display:grid; grid-template-columns:auto 1fr; gap:8px var(--s3); margin:var(--s3) 0 0; font-size:15px}
.provider dt{font-weight:600; color:var(--ink-soft)}
.provider dd{margin:0}
@media (max-width:820px){ .provider{grid-template-columns:1fr; padding:var(--s4)}  }

/* ---------- team grid ---------- */
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s5)}
.mem{display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease)}
a.mem:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--amber)}

.mem .shot .ph{font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--plum-deep); background:rgba(251,247,242,.9); padding:8px 13px; border-radius:999px; border:1px dashed var(--plum-soft)}
.mem .body{padding:var(--s4); display:flex; flex-direction:column; flex:1}
.mem h3{font-size:20px; margin-bottom:4px}
.mem .role{font-size:13.5px; color:var(--ink-soft); margin-bottom:var(--s3)}
.mem .blurb{font-size:15px; color:var(--ink-soft); flex:1}
.mem .chips{margin:var(--s3) 0 0}
.mem .more{margin-top:var(--s3); font-weight:600; font-size:14.5px; color:var(--plum); display:inline-flex; align-items:center; gap:7px}
a.mem:hover .more{gap:11px}
@media (max-width:900px){ .team{grid-template-columns:1fr}  }

/* ---------- proof strip ---------- */
.proof{background:var(--plum); color:#fff; padding:var(--s5) 0}
.proof-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); text-align:center}
.proof b{display:block; font-family:Lora,Georgia,serif; font-size:30px; font-weight:500}
.proof span{display:block; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--amber-pale); margin-top:5px}
.stars{display:inline-flex; gap:3px; color:var(--amber-pale)}
@media (max-width:760px){ .proof-grid{grid-template-columns:repeat(2,1fr); gap:var(--s4)} }

/* ---------- quote band ---------- */
.band{position:relative; overflow:hidden; isolation:isolate; padding:var(--s7) 0; background:var(--plum-deep); text-align:center}
.band .filmbg img{object-position:34% 56%; animation:drift calc(26s * var(--cine-speed)) ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.04)} to{transform:scale(1.13) translate3d(-1.2%,-.8%,0)}}
.glow{position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(34% 44% at 68% 34%, rgba(255,219,150,.50), transparent 72%);
  background:radial-gradient(34% 44% at 68% 34%, rgba(255,219,150,calc(.50*var(--cine))), transparent 72%);
  animation:bloom calc(7.5s * var(--cine-speed)) ease-in-out infinite alternate}
.band-scrim{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(0deg, rgba(24,13,22,.86), rgba(24,13,22,.72) 50%, rgba(24,13,22,.86)),
             radial-gradient(70% 80% at 50% 50%, transparent 30%, rgba(24,13,22,.45) 100%)}
.band .wrap{position:relative; z-index:3}
.band blockquote{margin:0 auto; max-width:24ch; font-family:Lora,Georgia,serif; font-style:italic;
  font-size:clamp(23px,3.2vw,40px); line-height:1.35; color:var(--ivory)}
.band .attr{margin-top:var(--s4); font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--amber-pale)}
.band .attr span{display:block; margin-top:6px; letter-spacing:.06em; text-transform:none; font-weight:500; font-size:14px; color:rgba(251,247,242,.72)}

/* ---------- services ---------- */
.svc{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
.svc a{display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4); text-decoration:none;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease)}
.svc a:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--amber)}
.svc .num{font-family:Lora,Georgia,serif; font-size:15px; color:var(--amber-text); margin-bottom:var(--s2)}
.svc h3{font-size:21px; margin-bottom:8px}
.svc p{font-size:15.5px; color:var(--ink-soft); flex:1}
.svc .more{margin-top:var(--s3); font-weight:600; font-size:15px; color:var(--plum); display:inline-flex; align-items:center; gap:7px}
@media (max-width:900px){ .svc{grid-template-columns:1fr} }

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4)}
.step{padding-top:var(--s3); border-top:3px solid var(--amber)}
.step b{display:block; font-family:Lora,Georgia,serif; font-size:14px; color:var(--amber-text); margin-bottom:8px}
.step h3{font-size:19px; margin-bottom:6px}
.step p{font-size:15.5px; color:var(--ink-soft)}
@media (max-width:820px){ .steps{grid-template-columns:1fr} }

.book-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); align-items:start}
@media (max-width:900px){ .book-grid{grid-template-columns:1fr} }

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative; font-family:Lora,Georgia,serif; font-size:18px; color:var(--plum-deep); min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--amber-text)}
.faq summary::after{content:""; position:absolute; right:10px; top:50%; width:10px; height:10px; border-right:2px solid var(--amber-text); border-bottom:2px solid var(--amber-text); transform:translateY(-70%) rotate(45deg); transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{padding:0 44px 22px 0; color:var(--ink-soft); font-size:16px; max-width:72ch}

/* ---------- closing ---------- */
.close{position:relative; overflow:hidden; isolation:isolate; background:var(--plum-deep); color:#fff; padding:var(--s7) 0; text-align:center}
.close .filmbg img{object-position:78% 72%; animation:drift calc(26s * var(--cine-speed)) ease-in-out infinite alternate}
.close-scrim{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(0deg, rgba(24,13,22,.90), rgba(24,13,22,.74) 46%, rgba(24,13,22,.88)),
             radial-gradient(64% 78% at 50% 46%, transparent 26%, rgba(24,13,22,.42) 100%)}
.close .wrap{position:relative; z-index:3}
.close h2{font-size:clamp(29px,3.5vw,44px); max-width:20ch; margin:0 auto var(--s3); color:#fff}
.close p{color:var(--amber-pale); font-size:18px; max-width:50ch; margin:0 auto var(--s4)}
.close-cta{display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:center}
.close .btn-outline{color:#fff; border-color:rgba(255,255,255,.45)}
.close .btn-outline:hover{background:rgba(255,255,255,.12); border-color:#fff}

/* ---------- footer ---------- */
.foot{background:var(--plum-deep); color:rgba(255,255,255,.78); padding:var(--s6) 0 var(--s4); font-size:15px; border-top:1px solid rgba(233,211,184,.16)}
.crisis{background:rgba(184,118,60,.16); border:1px solid rgba(233,211,184,.36); border-radius:var(--r); padding:var(--s3); color:#fff; margin-bottom:var(--s5); line-height:1.6}
.crisis strong{color:var(--amber-pale)}
.crisis a{color:#fff}
.trustrow{display:flex; flex-wrap:wrap; gap:var(--s3); padding:var(--s3) 0; border-top:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); margin-bottom:var(--s4)}
.trustrow span{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:rgba(255,255,255,.82)}
.trustrow svg{color:var(--amber-pale)}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:var(--s4); margin-bottom:var(--s5)}
.foot h4{color:#fff; font-family:Raleway,sans-serif; font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; margin-bottom:var(--s2)}
.foot a{color:rgba(255,255,255,.85); text-decoration:none; display:inline-block; padding:10px 0; min-height:44px}
.foot a:hover{color:var(--amber-pale); text-decoration:underline}
.foot address{font-style:normal; line-height:1.9}
.legal{font-size:13.5px; color:rgba(255,255,255,.6); display:flex; flex-wrap:wrap; gap:8px var(--s4); justify-content:space-between}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr} }

/* ---------- SimplePractice appointment-request widget ----------
   Their embed ships its own small blue button. We keep their markup and
   script exactly as supplied so the widget keeps working, and override the
   appearance so it matches the rest of the page. If their script fails to
   load, the anchor is still a live link to the Client Portal. */
.book-widget{display:grid; gap:var(--s3)}
.book-widget .spwidget-button-wrapper{text-align:left}
.book-widget .spwidget-button{
  display:inline-flex !important; align-items:center; justify-content:center; gap:9px;
  min-height:52px !important; padding:14px 30px !important;
  background:var(--amber) !important; color:#22160C !important;
  border:2px solid var(--amber) !important; border-radius:999px !important;
  font-family:Raleway,sans-serif !important; font-weight:600 !important; font-size:16px !important;
  text-decoration:none !important; cursor:pointer;
  transition:background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.book-widget .spwidget-button:hover{
  background:#8A5320 !important; border-color:#8A5320 !important; color:#fff !important;
  transform:translateY(-2px); box-shadow:var(--shadow-lg);
}
.book-widget .spwidget-button:active{box-shadow:none !important; transform:none}
.book-widget .spwidget-button:focus-visible{outline:3px solid var(--plum); outline-offset:3px}
.book-hint{font-size:14.5px; color:var(--ink-soft)}

/* ---------- placeholders ---------- */
.ph-inline{background:#FDF0DC; border:1px dashed #8A5320; color:#6B4318; padding:2px 9px; border-radius:5px; font-size:14px; font-weight:600; overflow-wrap:anywhere}
.ph-block{background:#FDF0DC; border:1px dashed #8A5320; color:#6B4318; border-radius:var(--r); padding:var(--s5) var(--s3); text-align:center; font-size:15px; font-weight:600}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .filmbg, .filmbg img, .hero-sun, .hero-shimmer, .hero-rays, .hero-mist, .glow, .hero-copy > *{animation:none !important}
  .filmbg img{transform:scale(1.04)}
  .hero-sun{opacity:.70} .hero-shimmer{opacity:.34} .hero-rays{opacity:.42} .hero-mist{opacity:.44} .glow{opacity:.62}
  .hero-copy > *{opacity:1; transform:none}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}
.provider .pic{max-width:230px; overflow:hidden; position:relative; border-radius:var(--r)}
.provider .pic picture{display:block; width:100%}

/* tap-to-navigate address in the footer. Block-level so the whole address
   is one target, and comfortably over 44px on a phone. */
.foot address .maplink{
  display:inline-block; padding:8px 0; min-height:44px;
  color:rgba(255,255,255,.85); text-decoration:none; line-height:1.6;
}
.foot address .maplink:hover{color:var(--amber-pale); text-decoration:underline}
.maplink-inline{color:var(--plum); text-decoration:none; border-bottom:1px solid var(--line);
  display:inline-block; padding:6px 0; min-height:44px}
.maplink-inline:hover{border-bottom-color:var(--amber)}

/* ---------- services page: link through to each detail page ---------- */
.svc-more{margin-top:var(--s4)}
.svc-more .more{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font-weight:600; font-size:16px; color:var(--plum); text-decoration:none;
  border-bottom:2px solid var(--amber); padding-bottom:2px;
  transition:gap .2s var(--ease), color .2s var(--ease);
}
.svc-more .more:hover{gap:12px; color:var(--amber-text)}

/* ---------- service pages: the "what it covers" grid ---------- */
.conds .cond{display:block}
.conds .cond h3{font-size:18px; margin-bottom:6px}
.conds .cond p{font-size:15px; color:var(--ink-soft); font-weight:400}

/* ---------- service pages: the quoted description ---------- */
.hisword{
  margin:var(--s5) 0 0; padding:var(--s4) var(--s5);
  background:var(--shell); border-left:4px solid var(--amber); border-radius:var(--r);
}
.hisword blockquote{
  margin:0; font-family:Lora,Georgia,serif; font-style:italic;
  font-size:17.5px; line-height:1.6; color:var(--ink); max-width:70ch;
}

/* ============================================================
   CLINICIAN CARDS — one photo-frame contract for both layouts.
   .mem    = compact card, homepage grid
   .member = full card, About page
   The ratio ALWAYS goes on the <img>, never the container, and the
   frame always clips. Safari will not resolve a percentage height
   against an aspect-ratio box, and an unclipped frame lets the photo
   render at intrinsic size straight over the text.
   ============================================================ */
.mem .shot, .member .shot{
  position:relative; overflow:hidden; display:block;
  border:1px solid var(--line); background:var(--shell);
}
.mem .shot picture, .member .shot picture{display:block; width:100%}
.mem .shot img, .member .shot img{
  display:block; width:100%; height:auto;
  object-fit:cover; object-position:50% 30%;
}
.mem .shot img{aspect-ratio:4/5}
.member .shot{border-radius:var(--r)}
.member .shot img{aspect-ratio:1/1}
@media (max-width:900px){
  .mem .shot img{aspect-ratio:16/9}
}
@media (max-width:860px){
  .member{grid-template-columns:1fr; padding:var(--s4)}
  .member .shot{max-width:none}
  .member .shot img{aspect-ratio:16/10; object-position:50% 28%}
}

/* About page card frame */
.team-detail{display:grid; grid-template-columns:1fr; gap:var(--s5)}
.team-detail > *, .member, .member-body{min-width:0}
.member{display:grid; grid-template-columns:260px 1fr; gap:var(--s5); align-items:start;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s5); box-shadow:var(--shadow)}
.member h3{font-size:26px; margin-bottom:6px}
.member .role{font-size:14.5px; color:var(--ink-soft); margin-bottom:var(--s3)}
.member .lead-line{font-size:17.5px; color:var(--ink)}

/* ============================================================
   MOBILE NAVIGATION
   Below 980px the desktop nav is hidden. Without this, the only way
   to reach another page on a phone was to scroll to the footer, which
   on the homepage is roughly 17 screens down.
   Button + panel, ARIA-driven, works with keyboard, closes on Escape
   and on outside click. No dependency: if the script fails the nav
   simply stays visible as a plain list.
   ============================================================ */
.nav-toggle{
  display:none; align-items:center; justify-content:center; gap:5px;
  width:46px; height:46px; margin-left:auto; padding:0;
  background:transparent; border:1px solid var(--line); border-radius:10px;
  cursor:pointer; flex-direction:column;
}
.nav-toggle:hover{background:var(--shell); border-color:var(--plum-soft)}
.nav-toggle:focus-visible{outline:3px solid var(--amber); outline-offset:3px}
.nav-toggle span{
  display:block; width:20px; height:2px; background:var(--plum-deep); border-radius:2px;
  transition:transform .22s var(--ease), opacity .18s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:980px){
  .nav-toggle{display:flex}
  /* small gap between the button and the menu; margin-left:auto on the
     button does the work of pushing it away from the wordmark */
  .head .wrap{flex-wrap:wrap; gap:8px}
  .head .btn{margin-left:auto; order:2}
  .nav-toggle{margin-left:0; order:3}

  /* the panel */
  .nav{
    display:block; order:4; width:100%; margin-left:0;
    max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height .3s var(--ease), visibility 0s linear .3s;
    border-top:1px solid transparent;
  }
  .nav.open{
    max-height:60vh; overflow-y:auto; visibility:visible;
    border-top-color:var(--line);
    transition:max-height .3s var(--ease), visibility 0s;
  }
  .nav a{
    display:flex; align-items:center; width:100%; min-height:52px;
    padding:0 4px; font-size:17px; border-radius:0;
    border-bottom:1px solid var(--line);
  }
  .nav a:last-child{border-bottom:0}
  .nav a[aria-current="page"]{color:var(--plum-deep); font-weight:600}
  .nav a[aria-current="page"]::before{
    content:""; width:3px; height:20px; background:var(--amber);
    margin-right:12px; border-radius:2px;
  }
}
@media (prefers-reduced-motion:reduce){
  .nav, .nav-toggle span{transition:none !important}
}