/* ==========================================================================
   Pearl IMS — About & Contact page templates
   (templates/page-about.php, templates/page-contact.php)
   ========================================================================== */

/* ---- Shared hero bits ---------------------------------------------------- */




/* ---- About: Hero ---------------------------------------------------------- */



/* ---- About: Story ---------------------------------------------------------- */
.pim-about-story{ display:flex; flex-wrap:wrap; align-items:center; gap:56px; }
.pim-about-story__copy{ flex:1 1 380px; min-width:min(280px,100%); }
.pim-about-story__media{ flex:1 1 360px; min-width:min(260px,100%); }
.pim-about-story__shot{ border-radius:var(--pim-radius-xl); border:1px solid #E3E7F4; }

/* ---- About: Values (dark band) --------------------------------------------- */
.pim-about-values{ position:relative; overflow:hidden; background:var(--pim-navy-2); padding:var(--pim-section-pad) 0; }
.pim-card--on-dark{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); }
.pim-card--on-dark:hover{ transform:none; box-shadow:none; border-color:rgba(255,255,255,.1); }
.pim-card--on-dark .pim-card__title{ color:#fff; font-size:18px; }
.pim-card--on-dark .pim-card__body{ color:var(--pim-on-dark-muted); font-size:14.5px; }

/* ---- About: Team ------------------------------------------------------------ */
/* Founder / featured member ------------------------------------------------
   Photo beside the words rather than a bigger tile in the same grid: a bio
   needs a measure to be readable, and a centred column under a square photo
   gives it neither. */
.pim-founder{
  display:grid; grid-template-columns:1fr; gap:26px;
  margin-top:40px; padding-bottom:40px;
  border-bottom:1px solid var(--pim-border-3);
}
@media (min-width: 760px){
  .pim-founder{ grid-template-columns:340px minmax(0,1fr); gap:48px; align-items:start; }
}
.pim-founder__photo{ max-width:340px; }
.pim-founder__shot{ border-radius:18px; border:1px solid #E3E7F4; overflow:hidden; }
.pim-founder__body{ max-width:62ch; }
.pim-founder__name{ margin:0; font-size:clamp(22px,2.6vw,27px); font-weight:800; letter-spacing:-.02em; color:var(--pim-text); }
.pim-founder__role{ margin:6px 0 0; font-size:14.5px; font-weight:600; color:var(--pim-blue); }
.pim-founder__bio{ margin-top:16px; }
.pim-founder__bio p{ margin:0 0 12px; font-size:15.5px; line-height:1.75; color:var(--pim-text-muted); }
.pim-founder__bio p:last-child{ margin-bottom:0; }
/* Editor-only prompt, so an empty bio is discoverable without showing
   visitors an apology. */
.pim-founder__bio--empty{
  font-size:13px; color:#6B5415;
  background:#FFF8E5; border:1px solid #F0DCA4; border-radius:10px;
  padding:10px 12px;
}

.pim-team-subhead{
  margin:36px 0 0; font-size:13px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--pim-text-faint);
}
.pim-team-grid{ margin-top:24px; }
/* The shared auto-260 grid stretches its tracks to fill the row, so three
   people left after the founder was lifted out got 367px-wide cards — wider
   than the founder's own photo, which inverted the hierarchy the section
   exists to express. Cap the card and centre it in its track instead. */
.pim-team-grid .pim-team-card{ max-width:260px; margin-inline:auto; }

.pim-team-card{ text-align:center; }
.pim-team-card__bio{ margin:8px 0 0; font-size:13px; line-height:1.6; color:var(--pim-text-muted); }
.pim-team-card__photo{ border-radius:16px; border:1px solid #E3E7F4; margin-bottom:16px; }
.pim-team-card__name{ font-weight:700; font-size:16px; color:var(--pim-text); }
.pim-team-card__role{ margin-top:3px; font-size:13px; color:var(--pim-text-faint); }

/* ---- Contact: Hero / info / form layout -------------------------------------- */
/* Info + form block (the page heading itself now comes from the shared hero). */
.pim-contact-hero{ position:relative; background:#fff; }
.pim-contact-hero__inner{ position:relative; padding:clamp(40px,5vw,64px) 0 clamp(48px,6vw,84px); display:flex; flex-wrap:wrap; gap:56px; }
.pim-contact-hero__copy{ flex:1 1 360px; min-width:min(280px,100%); }
.pim-contact-hero__form-col{ flex:1 1 380px; min-width:min(300px,100%); }

.pim-contact-info{ margin-top:32px; display:flex; flex-direction:column; gap:18px; }
.pim-contact-info__row{ display:flex; align-items:center; gap:14px; }
.pim-contact-info__icon{ flex:none; width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; }
.pim-contact-info__icon--blue{ background:var(--pim-blue-light); color:var(--pim-blue); }
.pim-contact-info__icon--green{ background:var(--pim-green-bg); color:var(--pim-green); }
.pim-contact-info__label{ font-size:12.5px; color:var(--pim-text-faint); }
.pim-contact-info__value{ margin-top:2px; font-size:15.5px; font-weight:700; color:var(--pim-text); }

/* ---- Contact: form card ------------------------------------------------------ */
.pim-contact-form-card{ background:#fff; border:1px solid var(--pim-border); border-radius:var(--pim-radius-xl); padding:32px; box-shadow:var(--pim-shadow-md); }
.pim-contact-form-card__title{ margin:0 0 20px; font-weight:800; font-size:22px; letter-spacing:-.02em; color:var(--pim-text); }
.pim-contact-form{ display:flex; flex-direction:column; gap:16px; }
.pim-form-row{ display:flex; flex-wrap:wrap; gap:14px; }
.pim-form-row .pim-form-field{ flex:1 1 140px; min-width:140px; }
.pim-contact-form textarea{ resize:vertical; }
.pim-contact-form__status{ margin:0; min-height:18px; font-size:13.5px; font-weight:600; }
.pim-contact-form__status[data-state="success"]{ color:var(--pim-green); }
.pim-contact-form__status[data-state="error"]{ color:#C0392B; }
.pim-contact-form__note{ margin:0; text-align:center; font-size:12.5px; color:var(--pim-text-faint-2); }

/* Honeypot field — hidden from real users, left for bots to fill in */
.pim-hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---- Contact: Map / offices ---------------------------------------------------- */
.pim-contact-map__shot{ border-radius:var(--pim-radius-xl); border:1px solid var(--pim-border); }

/* ---- Responsive ------------------------------------------------------------- */
@media (max-width: 640px){

	.pim-contact-hero__inner{ padding:32px 0 56px; }
	.pim-contact-form-card{ padding:24px; }
}