/* ============================================================
   Saugatuck Website v2 — applied theme
   The look chosen from the homepage Tweaks panel, baked in as
   static CSS so the interior pages match without the panel:
     • Ensign palette  (logo's two blues + white)
     • Bold accent     (accent works hard on actions / bands)
     • Navy hero        (page hero on the deep navy field)
   Layered on top of styles.css + brand-lockup.css.
   ============================================================ */

/* — Ensign palette: deep navy field + steel-blue water + white flag — */
:root{
  --ink:#0C1B2B;
  --navy:#0C2743;
  --navy-2:#15375A;
  --copper:#2F77A4;
  --bone:#E8EFF5;
  --bone-2:#D5E2EC;
  --paper:#FBFDFE;
  --sage:#2F77A4;
  --rule:rgba(12,39,67,0.16);
  /* Unify all display type to Libre Caslon (matches the logo wordmark) */
  --serif:'Libre Caslon Text', Georgia, serif;
}
/* Caslon carries real weight, so relax the tracking tuned for Instrument */
.hero h1, .pagehero h1, .sec-head h2, .cta-inner h2{ letter-spacing:-0.005em; }

/* — Bold accent: accent carries the actions and accent bands — */
.btn-primary{ background:var(--copper); color:#fff; }
.btn-primary:hover{ background:var(--copper); filter:brightness(0.92); }
.nav-cta{ background:var(--copper); }
.nav-cta:hover{ background:var(--copper); filter:brightness(0.92); }
.why-item{ border-top-color:var(--copper); }
.prod-index{ border-top-color:var(--copper); }
.sec-head .eyebrow{ color:var(--copper); opacity:1; }
.cta-band{ background:var(--copper); }
.cta-band .eyebrow{ color:#fff; opacity:0.85; }

/* — Hero: pale band so the dark moonrise image keeps its contrast — */
.pagehero{ background:var(--bone); }
.pagehero .btn-primary{ background:var(--copper); color:#fff; }
.pagehero .btn-primary:hover{ background:var(--copper); filter:brightness(0.92); }

/* — Leadership grid — */
.leader-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,2.6vw,40px); }
.leader{ display:flex; flex-direction:column; }
.leader .shot{ width:100%; aspect-ratio:4/5; background:var(--bone-2); border:1px solid var(--rule); overflow:hidden; }
.leader .shot image-slot, .leader .shot img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.leader h3{ font-family:var(--serif); font-weight:400; font-size:clamp(22px,2vw,27px); line-height:1.08; letter-spacing:-0.01em; color:var(--navy); margin:20px 0 0; }
.leader .role{ font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--copper); margin-top:9px; }
.leader .bio{ font-size:15px; line-height:1.55; color:var(--ink); opacity:0.78; margin-top:14px; text-wrap:pretty; }
.leader .email{ display:inline-block; font-size:14px; line-height:1.4; color:var(--copper); margin-top:13px; border-bottom:1px solid transparent; transition:border-color var(--dur-fast); overflow-wrap:anywhere; }
.leader .email:hover{ border-bottom-color:var(--copper); }

/* Gold product status (Professional Liability — nearest-term line) */
.prod .prod-status.gold{ color:#C79A3A; opacity:1; }
/* Crisp product-card titles (real Libre Caslon bold, not faux-bolded Instrument) */
.prod h3{ font-family:'Libre Caslon Text', Georgia, serif; letter-spacing:0.005em; }
@media (max-width:780px){ .leader-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .leader-grid{ grid-template-columns:1fr; } }

/* — Leadership Team: smaller circular portraits, centered — */
.leader-team .leader{ align-items:center; text-align:center; }
.leader-team .shot{ width:clamp(130px,15vw,168px); aspect-ratio:1/1; border-radius:50%; }
.leader-team .shot img{ object-position:center 22%; }
.leader-team .leader h3{ margin-top:22px; }
.leader-team .role{ color:var(--copper); }
.leader-team .email{ margin-top:10px; }

/* — Mobile: prevent the no-wrap partnerships email from overflowing the screen — */
.contact-channels{ min-width:0; }
.contact-channels .cch{ min-width:0; }
.contact-channels .cch .main{ overflow-wrap:anywhere; }
@media (max-width:620px){
  .contact-channels .cch .main{ white-space:normal !important; font-size:16px !important; }
}