/* ============================================================
   HAUSTEN TEAM MEMBER — card + popup styles
   Card scoped under .hausten-tm, modal under .hausten-modal-overlay.
   Design A = base. Design B = .hausten-modal--b / .bio-modal--b overrides.
   Adapted verbatim from hausten_landing_page 3 & 4.
   ============================================================ */

.hausten-tm,
.hausten-modal-overlay{
  --teal:#0d6b66; --teal2:#11a6a0;
  --display:'Bebas Neue',Impact,sans-serif;
  --body:'Inter',Arial,sans-serif;
}

/* ---------------- CARD ---------------- */
.hausten-tm{ font-family:var(--body); color:#fafafa; }
.hausten-tm .team-card{
  position:relative;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  padding:28px; min-height:480px;
}
.hausten-tm .team-card.ghost-card{ border-style:dashed; }
.hausten-tm .team-card span{
  color:var(--teal2); font-size:12px; text-transform:uppercase;
  letter-spacing:.18em; font-weight:800;
}
.hausten-tm .team-card h3{
  font-size:28px; margin:6px 0 12px; font-family:var(--body); color:#fff; line-height:1.1;
}
.hausten-tm .team-card p{ color:#c9c9c9; margin:0; }
.hausten-tm .team-card small{
  display:block; margin-top:22px; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12);
  color:#efefef; text-transform:uppercase; letter-spacing:.14em; font-size:12px;
}
.hausten-tm .team-card-head{
  display:flex; justify-content:space-between; gap:18px; align-items:flex-start;
}
.hausten-tm .bio-trigger{
  width:42px; height:42px; flex:0 0 42px;
  display:flex; align-items:center; justify-content:center; padding:0;
  border:1px solid var(--teal2); background:rgba(17,166,160,.08);
  color:#fff; font-size:26px; line-height:1; cursor:pointer; transition:.25s;
}
.hausten-tm .bio-trigger:hover{ background:var(--teal2); color:#001; transform:translateY(-2px); }

.hausten-tm .photo-frame{
  width:100%; aspect-ratio:4/5; margin-bottom:24px;
  border:1px solid rgba(17,166,160,.55);
  background:linear-gradient(135deg,#1b1b1b,#050505);
  overflow:hidden; position:relative; box-shadow:0 0 45px rgba(17,166,160,.10);
	border: 3px solid var(--teal);
	border-bottom-width: 6px;
}
/* .hausten-tm .photo-frame:after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:5px;
  background:linear-gradient(90deg,var(--teal),var(--teal2));
} */
.hausten-tm .photo-frame img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; filter: grayscale(100); transition: all 0.3s;}

.hausten-tm .team-card:hover .photo-frame img{
	filter: grayscale(0);
}
.hausten-tm .photo-placeholder{
  height:100%; display:grid; place-content:center; text-align:center; gap:8px;
  background:radial-gradient(circle at 50% 30%,rgba(17,166,160,.18),transparent 34%),linear-gradient(180deg,#191919,#090909);
}
.hausten-tm .photo-placeholder span{ font-family:var(--display); font-size:82px; color:#fff; letter-spacing:.04em; line-height:1; }
.hausten-tm .photo-placeholder small{
  display:block; margin:0; padding:0; border:0; color:#bdbdbd;
  text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-family:var(--body);
}
.hausten-tm .photo-placeholder.plus span{ color:var(--teal2); }

/* ---------------- MODAL (Design A base) ---------------- */
body.hausten-modal-open{ overflow:hidden; }
.hausten-modal-overlay{
  position:fixed; inset:0; z-index:99999; display:none;
  align-items:center; justify-content:center; padding:34px;
  background:rgba(0,0,0,.54); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  font-family:var(--body); color:#fafafa; line-height:1.55;
}
.hausten-modal-overlay.active{ display:flex; }
.hausten-modal-overlay *{ box-sizing:border-box; }
.hausten-modal-overlay a{ color:inherit; text-decoration:none; }

.hausten-modal-overlay .bio-modal{
  width:min(1500px,96vw); max-height:92vh; overflow:auto; position:relative;
  display:grid; grid-template-columns:minmax(320px,.85fr) 1.55fr;
  background:linear-gradient(135deg,rgba(10,10,10,.92),rgba(4,4,4,.82));
  border:1px solid rgba(255,255,255,.22); box-shadow:0 30px 120px rgba(0,0,0,.65);
}
.hausten-modal-overlay .modal-close{
  position:absolute; right:24px; top:20px; z-index:3;
  width:44px; height:44px; border:0; background:transparent;
  display:flex; align-items:center; justify-content:center; padding:0;
  color:#fff; font-size:34px; font-weight:300; line-height:1; cursor:pointer;
}
.hausten-modal-overlay .modal-photo{
  min-height:680px; background:linear-gradient(180deg,#161616,#090909);
  border-right:1px solid rgba(255,255,255,.12); display:grid; place-items:center; padding:34px;
}
.hausten-modal-overlay .modal-photo img{
  width:min(100%,430px); aspect-ratio:3/4; object-fit:cover; object-position:center top;
  border:1px solid rgba(17,166,160,.42);
}
.hausten-modal-overlay .modal-photo-placeholder{
  width:min(100%,430px); aspect-ratio:3/4; display:grid; place-items:center;
  border:1px solid rgba(17,166,160,.42); font-family:var(--display); font-size:150px; color:#fff;
  background:radial-gradient(circle at 50% 30%,rgba(17,166,160,.14),transparent 34%),linear-gradient(180deg,#202020,#060606);
}
.hausten-modal-overlay .modal-content{ padding:70px clamp(34px,5vw,76px) 46px; }
.hausten-modal-overlay .section-kicker{
  color:var(--teal2); text-transform:uppercase; letter-spacing:.25em; font-weight:800; font-size:12px; margin:0;
}
.hausten-modal-overlay .modal-content h2{
  font-family:var(--body); font-size:clamp(30px,3vw,48px); text-transform:none;
  letter-spacing:-.04em; line-height:1.08; margin:14px 0 0; font-weight:800;
}
.hausten-modal-overlay .teal-rule{ width:72px; height:2px; background:var(--teal2); margin:22px 0; }
.hausten-modal-overlay .modal-content p{ color:#d7d7d7; max-width:780px; }
.hausten-modal-overlay .modal-info-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:54px; margin-top:38px;
  padding-top:32px; border-top:1px solid rgba(255,255,255,.15);
}
.hausten-modal-overlay .modal-info-grid h4{ color:var(--teal2); text-transform:uppercase; letter-spacing:.22em; font-size:13px; }
.hausten-modal-overlay .modal-info-grid ul{ list-style:none; padding:0; margin:0; }
.hausten-modal-overlay .modal-info-grid li{ padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1); color:#efefef; }
.hausten-modal-overlay .modal-info-grid li:before{
  content:'\2713'; display:inline-grid; place-items:center; width:20px; height:20px;
  border:1px solid var(--teal2); border-radius:50%; margin-right:12px; color:var(--teal2); font-size:12px;
}
.hausten-modal-overlay .modal-contact{
  margin-top:34px; padding:24px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.035);
}
.hausten-modal-overlay .modal-contact h3{ font-size:26px; margin:0; }
.hausten-modal-overlay .modal-contact p{ margin:8px 0 0; }
.hausten-modal-overlay .modal-contact p:first-of-type{
  color:var(--teal2); text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:800;
}

/* ---------------- MODAL (Design B overrides) ---------------- */
.hausten-modal-overlay.hausten-modal--b{ background:rgba(0,0,0,.46); -webkit-backdrop-filter:blur(8px) saturate(110%); backdrop-filter:blur(8px) saturate(110%); }
.hausten-modal-overlay .bio-modal--b{
  width:min(1560px,96vw); grid-template-columns:minmax(330px,.78fr) 1.42fr;
  background:linear-gradient(135deg,rgba(18,18,18,.88),rgba(3,5,5,.78));
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 42px 140px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.08);
  border-radius:10px;
}
.hausten-modal-overlay .bio-modal--b:before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 72% 20%,rgba(17,166,160,.10),transparent 30%),linear-gradient(180deg,rgba(255,255,255,.035),transparent 22%);
}
.hausten-modal-overlay .modal-left{
  position:relative; z-index:1; display:grid; grid-template-rows:minmax(440px,1fr) auto;
  border-right:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
}
.hausten-modal-overlay .bio-modal--b .modal-photo{
  min-height:auto; padding:0; border-right:0; border-bottom:1px solid rgba(255,255,255,.13);
  display:block; background:linear-gradient(180deg,#191919,#070707);
}
.hausten-modal-overlay .bio-modal--b .modal-photo-placeholder{
  width:100%; height:100%; min-height:520px; aspect-ratio:auto; border:0; font-size:180px; color:#fff;
  background:radial-gradient(circle at 50% 26%,rgba(17,166,160,.16),transparent 32%),linear-gradient(180deg,#222,#070707);
}
.hausten-modal-overlay .bio-modal--b .modal-photo img{
  width:100%; height:100%; min-height:520px; aspect-ratio:auto; border:0;
  object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.05);
}
.hausten-modal-overlay .modal-contact-panel{ padding:30px 38px 34px; background:linear-gradient(180deg,rgba(20,20,20,.96),rgba(10,10,10,.92)); }
.hausten-modal-overlay .modal-contact-panel h3{ font-size:25px; margin:0 0 3px; text-transform:uppercase; letter-spacing:.03em; }
.hausten-modal-overlay .modal-role-line{ margin:0; color:var(--teal2); text-transform:uppercase; letter-spacing:.18em; font-weight:800; font-size:12px; }
.hausten-modal-overlay .mini-rule{ height:1px; width:100%; background:linear-gradient(90deg,var(--teal2),rgba(255,255,255,.12),transparent); margin:18px 0; }
.hausten-modal-overlay .modal-contact-panel p:not(.modal-role-line){ display:flex; gap:12px; align-items:center; margin:12px 0; color:#dcdcdc; font-size:14px; }
.hausten-modal-overlay .modal-contact-panel p span:first-child{ width:20px; color:var(--teal2); font-size:16px; }
.hausten-modal-overlay .book-btn{
  margin-top:22px; width:100%; display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:13px 22px; border:1px solid transparent;
  background:linear-gradient(135deg,var(--teal),var(--teal2)); color:#fff;
  text-transform:uppercase; font-weight:800; letter-spacing:.14em; font-size:12px; transition:.25s;
}
.hausten-modal-overlay .book-btn:hover{ transform:translateY(-2px); }

.hausten-modal-overlay .bio-modal--b .modal-content{
  position:relative; z-index:1; padding:44px 48px 0; display:grid; grid-template-rows:auto auto auto;
}
.hausten-modal-overlay .modal-story{ padding:20px 54px 30px 0; border-bottom:1px solid rgba(255,255,255,.16); }
.hausten-modal-overlay .bio-modal--b .modal-content h2{ max-width:880px; font-size:clamp(30px,2.55vw,44px); }
.hausten-modal-overlay .bio-modal--b .modal-content p{ font-size:16px; color:#dedede; }
.hausten-modal-overlay .bio-modal--b .teal-rule{ margin:18px 0 22px; }
.hausten-modal-overlay .bio-modal--b .modal-info-grid{ margin-top:0; padding:30px 0; border-top:0; border-bottom:1px solid rgba(255,255,255,.16); gap:0; }
.hausten-modal-overlay .bio-modal--b .modal-info-grid>div{ padding:0 38px 0 0; }
.hausten-modal-overlay .bio-modal--b .modal-info-grid>div+div{ padding-left:42px; border-left:1px solid rgba(255,255,255,.16); }
.hausten-modal-overlay .bio-modal--b .modal-info-grid h4,
.hausten-modal-overlay .modal-gallery-wrap h4{ color:var(--teal2); text-transform:uppercase; letter-spacing:.22em; font-size:13px; margin:0 0 18px; }
.hausten-modal-overlay .bio-modal--b .modal-info-grid li{ display:flex; align-items:center; min-height:42px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.10); }
.hausten-modal-overlay .bio-modal--b .modal-info-grid li:before{ flex:0 0 20px; }
.hausten-modal-overlay .modal-gallery-wrap{ margin:0 -48px; padding:0; border-top:0; }
.hausten-modal-overlay .modal-gallery-wrap h4{ padding:24px 48px 14px; margin:0; }
.hausten-modal-overlay .modal-gallery{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.16); }
.hausten-modal-overlay .gallery-tile{
  min-height:190px; display:grid; place-content:center; text-align:center; gap:8px;
  border-right:1px solid rgba(255,255,255,.16); position:relative; overflow:hidden;
  background:radial-gradient(circle at 50% 30%,rgba(17,166,160,.12),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.02));
}
.hausten-modal-overlay .gallery-tile:last-child{ border-right:0; }
.hausten-modal-overlay .gallery-tile span{ font-family:var(--display); font-size:56px; line-height:1; color:#fff; opacity:.78; }
.hausten-modal-overlay .gallery-tile small{ color:#bdbdbd; text-transform:uppercase; letter-spacing:.16em; font-size:10px; }
.hausten-modal-overlay .gallery-tile:after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg,var(--teal),var(--teal2)); opacity:.8; }
.hausten-modal-overlay .gallery-tile img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; filter:grayscale(1) contrast(1.05); opacity:.88; }
.hausten-modal-overlay .gallery-tile img+span,
.hausten-modal-overlay .gallery-tile img+span+small{ position:relative; z-index:1; text-shadow:0 2px 20px rgba(0,0,0,.9); }
.hausten-modal-overlay .bio-modal--b .modal-close{ right:24px; top:22px; text-shadow:0 6px 24px rgba(0,0,0,.7); }

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:1000px){
  .hausten-modal-overlay .bio-modal{ grid-template-columns:1fr; }
  .hausten-modal-overlay .modal-photo{ min-height:auto; }
  .hausten-modal-overlay .modal-photo img,
  .hausten-modal-overlay .modal-photo-placeholder{ max-width:calc(100% - 25vw); height: auto; }
	.hausten-modal-overlay .bio-modal--b .modal-photo img{ height: auto; min-height: unset;}
  .hausten-modal-overlay .modal-info-grid{ grid-template-columns:1fr; }
  .hausten-modal-overlay .modal-left{ grid-template-rows:auto auto; border-right:0; }
  .hausten-modal-overlay .bio-modal--b .modal-photo-placeholder{ min-height:340px; }
  .hausten-modal-overlay .bio-modal--b .modal-content{ padding:34px 30px 0; }
  .hausten-modal-overlay .modal-story{ padding-right:0; }
  .hausten-modal-overlay .bio-modal--b .modal-info-grid>div,
  .hausten-modal-overlay .bio-modal--b .modal-info-grid>div+div{ padding:0; border-left:0; }
  .hausten-modal-overlay .modal-gallery-wrap{ margin:0 -30px; }
  .hausten-modal-overlay .modal-gallery-wrap h4{ padding-left:30px; }
  .hausten-modal-overlay .modal-gallery{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:640px){
  .hausten-modal-overlay{ padding:14px; }
  .hausten-modal-overlay .modal-content{ padding:58px 22px 28px; }
  .hausten-modal-overlay .modal-close{ right:12px; top:14px; }
  .hausten-modal-overlay .bio-modal{ max-height:94vh; }
  .hausten-modal-overlay .modal-info-grid{ gap:20px; }
  .hausten-modal-overlay .modal-gallery{ grid-template-columns:1fr 1fr; }
  .hausten-modal-overlay .gallery-tile{ min-height:130px; }
  .hausten-modal-overlay .modal-contact-panel{ padding:24px; }
  .hausten-modal-overlay .bio-modal--b .modal-photo-placeholder{ min-height:260px; }
  .hausten-modal-overlay .bio-modal--b .modal-content{ padding:26px 22px 0; }
  .hausten-modal-overlay .modal-gallery-wrap{ margin:0 -22px; }
  .hausten-modal-overlay .modal-gallery-wrap h4{ padding-left:22px; }
  .hausten-modal-overlay .bio-modal--b .modal-info-grid{ padding:22px 0; }
  .hausten-modal-overlay .modal-story{ padding-bottom:24px; }
}