/* Procedure page layout, used with styles.css */
.crumbs{font-size:13px;color:var(--muted);margin:0 0 18px}
.crumbs a{text-decoration:none;color:var(--teal-d)}
.crumbs a:hover{text-decoration:underline}

.phero{background:linear-gradient(180deg,#f7f9fe,#fff);padding:56px 0 64px}
.phero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,72px);align-items:center}
.phero h1{font-size:clamp(34px,4.4vw,58px);margin-bottom:18px}
.phero p.lead{font-size:1.15rem;color:#2c3e50;max-width:560px;margin:0 0 28px}
.phero .actions{display:flex;flex-wrap:wrap;gap:12px}
.phero figure{margin:0;position:relative}
.phero figure img{width:100%;height:auto;border-radius:var(--radius);box-shadow:0 18px 50px rgba(29,63,113,.16)}
.phero figcaption{font-size:13px;color:var(--muted);margin-top:12px}

/* quick facts strip */
.facts-strip{background:#1d3f71;color:#fff}
.facts-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.facts-strip .f{padding:26px 24px;border-left:1px solid rgba(255,255,255,.18)}
.facts-strip .f:first-child{border-left:0;padding-left:0}
.facts-strip b{display:block;font-weight:300;font-size:1.7rem;line-height:1.15;margin-bottom:4px}
.facts-strip span{font-size:.9rem;opacity:.85}

/* prose + aside */
.split{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.prose p{max-width:680px}
.prose h3{color:var(--navy);font-weight:500;font-size:1.25rem;margin:30px 0 8px}
.aside{position:sticky;top:176px;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.aside img{border-radius:8px;margin-bottom:16px;width:100%}
.aside h3{margin:0 0 6px;color:var(--navy);font-size:1.15rem}
.aside p{margin:0 0 14px;font-size:.95rem;color:var(--muted)}

/* three problems */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.three .item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.three .n{font-weight:300;font-size:2.4rem;line-height:1;color:var(--teal);margin-bottom:12px}
.three h3{margin:0 0 8px;color:var(--navy);font-size:1.15rem}
.three p{margin:0;color:var(--muted);font-size:.97rem}

/* local vs general */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.compare .col{border-radius:var(--radius);padding:30px;border:1px solid var(--line);background:#fff}
.compare .col.alt{background:#1d3f71;color:#fff;border-color:#1d3f71}
.compare h3{margin:0 0 4px;font-weight:500;font-size:1.3rem}
.compare .tagline{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-d);font-weight:700;margin-bottom:14px}
.compare .alt .tagline{color:#8fdcec}
.compare ul{margin:12px 0 0;padding-left:20px}
.compare li{margin:6px 0}

/* recovery timeline */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.timeline .step{padding:0 22px 0 0;position:relative}
.timeline .step::before{content:"";display:block;height:4px;background:linear-gradient(90deg,#27b6c9,#7fc241,#f9c41b,#f58220,#e8433c,#a63c96,#4b3a8f);background-size:400% 100%;margin-bottom:18px;border-radius:2px}
.timeline .step:nth-child(1)::before{background-position:0 0}
.timeline .step:nth-child(2)::before{background-position:33% 0}
.timeline .step:nth-child(3)::before{background-position:66% 0}
.timeline .step:nth-child(4)::before{background-position:100% 0}
.timeline .when{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-d);font-weight:700;margin-bottom:6px}
.timeline h3{margin:0 0 8px;color:var(--navy);font-size:1.15rem}
.timeline p{margin:0;color:var(--muted);font-size:.97rem}

/* note box */
.note-box{border-left:4px solid var(--teal);background:var(--soft);padding:20px 24px;border-radius:0 var(--radius) var(--radius) 0;max-width:780px}
.note-box p{margin:0}

@media (max-width:980px){
  .phero .wrap,.split,.compare{grid-template-columns:1fr}
  .aside{position:static}
  .three{grid-template-columns:1fr}
  .facts-strip .wrap{grid-template-columns:1fr 1fr}
  .facts-strip .f:nth-child(odd){border-left:0;padding-left:0}
  .timeline{grid-template-columns:1fr 1fr;row-gap:30px}
}
@media (max-width:560px){
  .facts-strip .wrap,.timeline{grid-template-columns:1fr}
  .facts-strip .f{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.18)}
  .facts-strip .f:first-child{border-top:0}
}

/* "Your surgeon" card: the scrubs photo, portrait-shaped. */
.aside img{aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;height:auto}

/* With the surgeon card moved into the full-width About band, a lone column spans the whole row. */
.split > :only-child{grid-column:1/-1;max-width:860px}

/* Phone: page title band and full-width stacked buttons, like his current site. */
@media (max-width:700px){
  .phero{background:#f2f2f9;padding:30px 0 38px}
  .phero .actions{flex-direction:column;gap:10px}
  .phero .actions .btn{width:100%;box-sizing:border-box;justify-content:center;text-align:center}
}