/* Insights Wellbeing — imagery system + polish.
   Load after site.css on every page. */

/* ================================================== PHOTO SLOTS
   Drop a real file into images/ and it appears. If the file is
   missing the slot degrades to a designed gradient, never a
   broken-image icon. */

.ph{position:relative;overflow:hidden;border-radius:26px;
  background:linear-gradient(150deg,#EFE7FB 0%,#F3ECFC 45%,#F9F0DC 100%);
  box-shadow:0 22px 50px rgba(40,25,90,.13);isolation:isolate}
.ph img{width:100%;height:100%;object-fit:cover;object-position:center 22%;
  display:block;position:relative;z-index:2}
.ph::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(35,26,80,.16) 100%)}
.ph.empty img{display:none}
.ph .fallback{position:absolute;inset:0;z-index:1;display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:12px;
  color:#8E7FC0;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.ph.empty .fallback{display:flex}
.ph.empty::after{display:none}
.ph .fallback svg{width:46px;height:46px;stroke:#B7A6E4;fill:none;stroke-width:1.5}

.ph-4x3{aspect-ratio:4/3}
.ph-square{aspect-ratio:1/1}
.ph-portrait{aspect-ratio:1/1.18}
.ph-wide{aspect-ratio:16/9}

/* ================================================== MONOGRAM AVATARS
   Used wherever a real client is quoted. Never a stock face:
   a photograph there would assert that the person pictured
   received mental health treatment, which is not true and which
   most stock licences prohibit. */

.mono{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:21px;color:#fff;
  letter-spacing:-.01em;flex:none;box-shadow:inset 0 -2px 6px rgba(0,0,0,.13)}
.mono.c1{background:linear-gradient(140deg,#7C5CF0,#5A3FC0)}
.mono.c2{background:linear-gradient(140deg,#E8B14A,#C98F22)}
.mono.c3{background:linear-gradient(140deg,#4FA98B,#2F7A62)}
.mono.c4{background:linear-gradient(140deg,#E0796F,#B94E45)}
.mono.c5{background:linear-gradient(140deg,#5B8FD6,#33619F)}
.mono.c6{background:linear-gradient(140deg,#9A6FD0,#6E45A6)}

/* ================================================== TESTIMONIAL CARDS */

.tc{background:var(--navy-card);border:1px solid rgba(255,255,255,.08);
  border-radius:22px;padding:28px 24px;position:relative;
  transition:transform .22s cubic-bezier(.2,.8,.25,1),box-shadow .22s;
  display:flex;flex-direction:column}
.tc:hover{transform:translateY(-5px);box-shadow:0 24px 48px rgba(12,6,40,.4)}
.tc::before{content:"\201C";position:absolute;top:12px;right:22px;
  font-family:'Fraunces',serif;font-size:64px;line-height:1;
  color:var(--yellow);opacity:.22}
.tc p{font-family:'Lora',serif;font-size:14.6px;color:#EAE5F8;
  line-height:1.72;flex:1;margin:0}
.tc .foot{display:flex;align-items:center;gap:13px;margin-top:20px;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
.tc .foot .nm{font-family:'Poppins',sans-serif;font-weight:600;
  font-size:14.5px;color:#fff;line-height:1.3}
.tc .foot .mt{font-family:'Lora',serif;font-style:italic;
  font-size:12.4px;color:#B3A6E0;margin-top:1px}
.tc .av{display:none}

/* ================================================== ABOUT ROWS */

.about-row .media{border-radius:26px;overflow:hidden;box-shadow:var(--shadow);
  aspect-ratio:4/3.6;background:linear-gradient(160deg,#EFE7FB,#F7EFD8);
  display:flex;align-items:center;justify-content:center;position:relative}

/* ================================================== POLISH */

.btn:focus-visible,a:focus-visible,button:focus-visible{
  outline:3px solid var(--violet);outline-offset:3px;border-radius:8px}

.idx,.svc,.plan,.cc{transition:transform .2s cubic-bezier(.2,.8,.25,1),
  box-shadow .2s,border-color .2s}
.svc:hover,.idx:hover{border-color:#D8C9F6}

.rel{transition:transform .18s,box-shadow .18s,border-color .18s}
.rel:hover{transform:translateY(-4px);border-color:#D8C9F6;
  box-shadow:0 16px 34px rgba(40,25,90,.11)}

img{max-width:100%}

/* photo credit / caption */
.ph-cap{font-family:'Lora',serif;font-size:12.4px;color:var(--muted);
  margin-top:10px;text-align:center}

@media (max-width:900px){
  .mono{width:50px;height:50px;font-size:19px}
  .tc{padding:24px 20px}
}

@media (prefers-reduced-motion:reduce){
  .tc:hover,.rel:hover,.svc:hover,.idx:hover{transform:none}
}