/* Homepage Option E intro (staging, 14 Nov 2026). Fonts/colours from
   ck-home-hero.css / ck-clinics-d.css. Scoped to .ck-intro. */
.ck-intro{
  --d-red:#C20E35;
  --d-ink:#1A1F23;
  --d-mute:#5b6270;
  --d-line:#e6e2da;
  --d-cream:#FBF8F2;
  --ckc-h:Archivo,system-ui,sans-serif;
  --ckc-b:"Red Hat Text",system-ui,sans-serif;
  box-sizing:border-box;
  margin:0;
  padding:0;
  color:var(--d-ink);
  background:var(--d-cream);
  font-family:var(--ckc-b);
  overflow-x:hidden;
}
.ck-intro *,.ck-intro *::before,.ck-intro *::after{box-sizing:border-box}
.ck-intro img{display:block;max-width:100%;height:auto}
.ck-intro-wrap{max-width:1320px;margin:0 auto;padding:0 32px;min-width:0}
.ck-intro a{color:var(--d-red);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ck-intro a:hover{color:#9a0b2a}
.ck-intro h2{
  font-family:var(--ckc-h);
  font-size:38px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.08;
  margin:0 0 16px;
  color:var(--d-ink);
  max-width:18em;
}
.ck-intro p{margin:0 0 14px;font-size:17px;line-height:1.6;color:#2c3237}
.ck-intro p:last-child{margin-bottom:0}
.ck-intro--e{padding:80px 0 72px}
.ck-intro-e-grid{
  display:grid;
  grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  gap:72px;
  align-items:center;
}
.ck-intro-copy{min-width:0}
.ck-intro-drop{font-size:18px;line-height:1.65}
.ck-intro-drop::first-letter{
  font:800 80px/.8 var(--ckc-h);
  float:left;
  margin:6px 12px 0 0;
  color:var(--d-red);
  letter-spacing:-.04em;
}
.ck-intro-pull{
  margin:22px 0;
  padding:4px 0 4px 20px;
  border-left:3px solid var(--d-red);
  font-family:var(--ckc-h);
  font-size:24px;
  font-weight:500;
  font-style:italic;
  line-height:1.35;
  letter-spacing:-.02em;
  color:var(--d-ink);
  max-width:22em;
}
.ck-intro-collage{position:relative;min-height:560px;min-width:0}
.ck-intro-collage figure{
  margin:0;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(20,40,50,.16);
  background:#d7e4ea;
}
.ck-intro-collage picture,
.ck-intro-collage img{width:100%;height:100%;object-fit:cover;display:block}
.ck-intro-c1{width:74%;aspect-ratio:4/5;position:relative;z-index:1}
.ck-intro-c1 img{object-position:58% 42%}
.ck-intro-c2{
  position:absolute;top:18px;right:0;width:48%;aspect-ratio:1;z-index:2;
  box-shadow:0 20px 48px rgba(20,40,50,.22);border:4px solid #fff;
}
.ck-intro-c3{
  position:absolute;right:10%;bottom:0;width:58%;aspect-ratio:16/10;z-index:3;
  box-shadow:0 16px 40px rgba(20,40,50,.2);border:4px solid #fff;
}
@media (max-width:760px){
  .ck-intro-wrap{padding:0 20px}
  .ck-intro h2{font-size:30px}
  .ck-intro p{font-size:16px}
  /* 100px bottom matches the hero’s clearance above .ck-wa__btn
     (64×64, right/bottom 20px; 60×60 at 16px under 480px) */
  .ck-intro--e{padding:48px 0 100px}
  .ck-intro-e-grid{grid-template-columns:1fr;gap:28px}
  .ck-intro-drop::first-letter{font-size:62px}
  .ck-intro-pull{font-size:20px;margin:18px 0}
  .ck-intro-collage{min-height:420px;max-width:520px}
  .ck-intro-c1{width:78%}
  .ck-intro-c2{width:50%;top:10px}
  .ck-intro-c3{width:62%;right:4%}
}