/* ===== Concrete restoration page ===== */

/* feature band: text + graphic */
.cr-band{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.cr-band.flip .cr-figure{ order:-1; }
@media (max-width:860px){ .cr-band{ grid-template-columns:1fr; gap:28px; } .cr-band.flip .cr-figure{ order:0; } }
.cr-figure{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; }
.dark .cr-figure{ background:var(--ink-3); border-color:var(--line-dark); }
.cr-figure svg{ width:100%; height:auto; display:block; }
.cr-figure figcaption{ font-family:var(--f-mono); font-size:12px; color:var(--text-mute); margin-top:14px; letter-spacing:.02em; }
.dark .cr-figure figcaption{ color:var(--invert-mute); }

/* procedure / stage step cards */
.proc{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.stages{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:1000px){ .proc{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px){ .stages{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .proc{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .proc,.stages{ grid-template-columns:1fr; } }
.step{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; }
.step svg{ width:100%; height:auto; display:block; background:var(--paper); border-radius:var(--r); }
.step .step-n{ font-family:var(--f-mono); font-size:11px; color:var(--amber-deep); letter-spacing:.1em; margin-top:12px; display:block; }
.step h4{ font-family:var(--f-display); font-size:16px; margin:5px 0 6px; color:var(--ink); }
.step p{ font-size:13.5px; color:var(--text-soft); margin:0; line-height:1.5; }

/* method icons */
.methods{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:720px){ .methods{ grid-template-columns:1fr; } }
.method{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; text-align:left; }
.method svg{ width:56px; height:56px; margin-bottom:12px; }
.method h4{ font-size:18px; margin:0 0 8px; }
.method p{ font-size:14.5px; color:var(--text-soft); margin:0; }

/* photo placeholders */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:820px){ .gallery{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .gallery{ grid-template-columns:1fr; } }
.photo-ph{ border:2px dashed var(--line); border-radius:var(--r-lg); background:var(--white);
  aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:20px; gap:10px; }
.photo-ph svg{ width:34px; height:34px; color:var(--steel); opacity:.7; }
.photo-ph span{ font-family:var(--f-mono); font-size:12px; color:var(--text-mute); line-height:1.5; letter-spacing:.02em; }
.photo-ph b{ color:var(--text-soft); font-weight:600; display:block; margin-bottom:2px; }

/* expanding subsections reuse .acc; allow taller answers here */
.acc-item.open .acc-a{ max-height:900px; }

/* shared utility copies (page links only styles.css + this) */
ul.ticks{ list-style:none; padding:0; margin:12px 0; }
ul.ticks li{ position:relative; padding:9px 0 9px 28px; color:var(--text-soft); font-size:15.5px; border-top:1px solid var(--line-soft); }
ul.ticks li:first-child{ border-top:none; }
ul.ticks li::before{ content:""; position:absolute; left:2px; top:15px; width:10px; height:10px; border:2px solid var(--amber); border-radius:2px; }
.dark ul.ticks li{ color:var(--invert-soft); border-color:var(--line-dark); }

.note{ border-left:3px solid var(--amber); background:rgba(92,147,186,.08); padding:15px 18px;
  border-radius:0 var(--r) var(--r) 0; font-size:15px; color:var(--text-soft); margin:16px 0; }
.note strong{ color:var(--text); }

.kicker{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-deep); display:block; margin-bottom:12px; }

/* FAQ / accordion for subsections */
.acc{ margin-top:4px; border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; font-family:var(--f-display);
  font-weight:700; font-size:17px; color:var(--ink); padding:18px 40px 18px 0; position:relative; display:block; }
.acc-i{ position:absolute; right:4px; top:50%; transform:translateY(-50%); font-family:var(--f-mono); font-size:21px; color:var(--amber-deep); transition:transform .25s var(--ease); }
.acc-item.open .acc-i{ transform:translateY(-50%) rotate(45deg); }
.acc-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.acc-a p{ padding:0 0 18px; margin:0; font-size:15.5px; color:var(--text-soft); }
.acc-a ul{ padding:0 0 18px; margin:0; }

/* PART banners — assessment vs execution */
.part-band{ background:var(--ink); color:#fff; padding:34px 0; }
.part-band .wrap{ display:flex; gap:22px; align-items:flex-start; }
.part-band .pb-num{ flex:none; font-family:var(--f-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber); border:1px solid rgba(92,147,186,.55);
  border-radius:100px; padding:7px 14px; margin-top:4px; }
.part-band .pb-text h2{ font-family:var(--f-display); font-weight:800;
  font-size:clamp(22px,3vw,32px); color:#fff; margin:0 0 8px; }
.part-band .pb-text p{ margin:0; max-width:70ch; font-size:16.5px; line-height:1.55; color:var(--invert-soft); }
.part-band .pb-text p strong{ color:#fff; }
.part-band.exec{ background:#15242F; border-top:3px solid var(--amber); }
@media (max-width:640px){ .part-band .wrap{ flex-direction:column; gap:12px; } }

/* ---------------------------------------------------------------
   ⚠ THE CRUSHED-DIAGRAM FIX (Phase 7 audit, 12 Jul)

   <figure> carries a BROWSER DEFAULT `margin: 1em 40px`. Nothing in
   this stylesheet ever overrode it. Inside a 308px column that ate
   80px to margin and 52px to padding, delivering a 174px drawing for
   a 440-unit viewBox: rendered at 40%, with labels at 3.6px. Illegible.

   These are technical drawings with leader lines and callouts. Scaling
   the type up would make the labels collide with the drawing — the same
   mistake as turning the .datum timeline into cards. So: kill the margin,
   and let the diagram render at its DESIGN SIZE and scroll sideways
   inside its own frame. The drawing survives intact.
   --------------------------------------------------------------- */
/* <figure> ships with a UA default `margin: 1em 40px`. In the 2-column
   .cr-band that ate 80px of every diagram at EVERY width — the pathology
   drawings were rendering at ~44% with 3.9px labels on DESKTOP as well as
   mobile. Kill it everywhere. */
.cr-figure{ margin-inline:0; }

@media (max-width:860px){
  .cr-figure{
    margin-inline:0;
    padding:14px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    /* a soft right edge, so it reads as scrollable */
    background-image:linear-gradient(to left, rgba(12,30,43,.07), rgba(12,30,43,0) 28px);
  }
  .cr-figure svg{ min-width:420px; }
  .dark .cr-figure{
    background-image:linear-gradient(to left, rgba(255,255,255,.07), rgba(255,255,255,0) 28px);
  }
}