.detail-page { background: var(--white); }
.detail-page .site-header { background: rgba(248, 245, 238, 0.97); }
.detail-page main { overflow: hidden; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
  color: #b9c2c5;
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.breadcrumb a { color: #e8a47a; }
.breadcrumb span::before { margin-right: 8px; content: "/"; color: #748085; }

.detail-hero { position: relative; color: var(--white); background: var(--charcoal-2); }
.detail-hero::before { position: absolute; top: -260px; right: -100px; width: 680px; height: 680px; border: 1px solid rgba(200, 115, 63, 0.17); border-radius: 50%; box-shadow: 0 0 0 90px rgba(200, 115, 63, 0.035), 0 0 0 180px rgba(200, 115, 63, 0.02); content: ""; }
.detail-hero-inner { position: relative; z-index: 1; padding-block: clamp(56px, 7vw, 100px); }
.detail-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.72fr); align-items: center; gap: clamp(45px, 7vw, 105px); }
.detail-kicker { display: flex; align-items: center; gap: 15px; color: #eca77b; font-size: 0.66rem; font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; }
.detail-kicker::before { width: 42px; height: 3px; background: var(--clay); content: ""; }
.detail-hero h1 { max-width: 850px; margin: 23px 0 27px; color: var(--white); font-size: clamp(3.35rem, 6.4vw, 6.6rem); line-height: 0.92; }
.detail-hero .answer { max-width: 790px; margin: 0; color: #d7dddf; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.7; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.hero-proof span { padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.17); color: #c7d0d3; font-size: 0.64rem; font-weight: 700; }

.detail-hero-card { overflow: hidden; border-top: 6px solid var(--clay); color: var(--charcoal); background: var(--limestone); box-shadow: 0 28px 75px rgba(0, 0, 0, 0.32); }
.detail-hero-card > img { width: 100%; height: 175px; object-fit: cover; }
.detail-hero-card .card-form { padding: 24px 27px 28px; }
.detail-hero-card .hero-form-heading p { font-size: 1.3rem; }
.detail-hero-card .hero-form-note { color: var(--ink-soft); }
.detail-hero-card .form-preview-success-compact { padding: 26px; }

.article-hero .detail-hero-grid { grid-template-columns: minmax(0, 0.85fr) minmax(420px, 0.95fr); }
.article-hero .detail-media { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 25px 70px rgba(0, 0, 0, 0.28); }
.article-hero .detail-media img { width: 100%; min-height: 430px; object-fit: cover; }
.media-labels { position: absolute; right: 18px; bottom: 18px; left: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.media-labels span { padding: 12px; color: var(--white); background: rgba(22, 27, 29, 0.9); font-size: 0.65rem; font-weight: 850; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; }
.media-labels span:last-child { background: rgba(164, 65, 45, 0.94); }

.section-nav { color: var(--white); background: var(--brick); }
.section-nav .shell { display: flex; align-items: center; gap: 0; overflow-x: auto; }
.section-nav a { flex: 0 0 auto; padding: 20px 23px; border-right: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.67rem; font-weight: 800; white-space: nowrap; }
.section-nav a:first-child { padding-left: 0; padding-right: 28px; }

.detail-section { padding-block: clamp(75px, 9vw, 128px); }
.detail-section-stone { background: var(--limestone); }
.detail-section-pale { background: var(--limestone-2); }
.detail-section-dark { color: var(--white); background: var(--charcoal); }
.detail-section-dark h2, .detail-section-dark h3 { color: var(--white); }
.detail-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.45fr); align-items: end; gap: 50px; margin-bottom: 52px; }
.detail-heading h2 { max-width: 850px; margin: 0; font-size: clamp(2.7rem, 5vw, 5.25rem); }
.detail-heading > p { margin: 0 0 8px; color: var(--ink-soft); }
.detail-section-dark .detail-heading > p { color: #b9c3c6; }
.detail-heading-single { max-width: 880px; margin-bottom: 52px; }
.detail-heading-single h2 { font-size: clamp(2.7rem, 5vw, 5.25rem); }
.detail-heading-single > p:not(.eyebrow) { color: var(--ink-soft); }

.lede-grid { display: grid; grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1fr); gap: clamp(48px, 8vw, 110px); }
.lede-aside { padding: 28px; border-top: 5px solid var(--brick); background: var(--limestone); }
.lede-aside h2 { font-size: 1.8rem; }
.lede-aside p { color: var(--ink-soft); font-size: 0.8rem; }
.lede-aside ul { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.lede-aside li { position: relative; padding-left: 21px; font-size: 0.75rem; font-weight: 700; }
.lede-aside li::before { position: absolute; top: 0.62em; left: 0; width: 9px; height: 5px; border-bottom: 2px solid var(--brick); border-left: 2px solid var(--brick); content: ""; transform: rotate(-45deg); }
.prose { color: var(--ink-soft); }
.prose h2, .prose h3 { color: var(--charcoal); }
.prose h2 { margin-top: 0; font-size: clamp(2.35rem, 4vw, 4.25rem); }
.prose h3 { margin-top: 30px; font-size: 1.55rem; }
.prose p, .prose li { font-size: 0.92rem; line-height: 1.78; }
.prose a { color: var(--brick); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.signal-grid, .priority-grid, .problem-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.signal-card, .priority-card, .problem-mini-card { min-height: 225px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.signal-card > span, .priority-card > span, .problem-mini-card > span { color: var(--brick); font-family: var(--serif); font-size: 0.82rem; }
.signal-card h3, .priority-card h3, .problem-mini-card h3 { margin: 34px 0 11px; }
.signal-card p, .priority-card p, .problem-mini-card p { margin: 0; color: var(--ink-soft); font-size: 0.78rem; }

.diagnostic-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--charcoal); box-shadow: var(--shadow); }
.diagnostic-image { position: relative; min-height: 620px; }
.diagnostic-image img { width: 100%; height: 100%; object-fit: cover; }
.diagnostic-image::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(22, 27, 29, 0.76), transparent 58%); content: ""; }
.diagnostic-image figcaption { position: absolute; z-index: 1; right: 22px; bottom: 18px; left: 22px; color: #e2e6e7; font-size: 0.64rem; }
.diagnostic-copy { display: flex; justify-content: center; flex-direction: column; padding: clamp(35px, 6vw, 78px); color: #c4cdcf; }
.diagnostic-copy h2 { color: var(--white); font-size: clamp(2.6rem, 4.3vw, 4.7rem); }
.diagnostic-list { display: grid; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; }
.diagnostic-list li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.15); }
.diagnostic-list span { color: #e8a176; font-family: var(--serif); }
.diagnostic-list strong { display: block; margin-bottom: 3px; color: var(--white); }
.diagnostic-list small { color: #aeb9bc; }

.photo-process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.photo-step { overflow: hidden; background: var(--white); box-shadow: 0 12px 35px rgba(31, 37, 40, 0.09); }
.photo-step img { width: 100%; height: 230px; object-fit: cover; }
.photo-step div { padding: 25px 26px 28px; }
.photo-step span { color: var(--brick); font-family: var(--serif); }
.photo-step h3 { margin: 17px 0 10px; font-size: 1.45rem; }
.photo-step p { margin: 0; color: var(--ink-soft); font-size: 0.78rem; }

.steps-line { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); list-style: none; }
.steps-line li { min-height: 235px; padding: 27px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.steps-line span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: var(--white); background: var(--brick); font-family: var(--serif); }
.steps-line h3 { margin: 42px 0 10px; font-size: 1.3rem; }
.steps-line p { margin: 0; color: var(--ink-soft); font-size: 0.73rem; }

.decision-table { overflow-x: auto; border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow); }
.decision-table table { width: 100%; min-width: 760px; border-collapse: collapse; }
.decision-table th, .decision-table td { padding: 21px 23px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.decision-table th { color: var(--white); background: var(--charcoal); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }
.decision-table td { color: var(--ink-soft); font-size: 0.8rem; }
.decision-table td:first-child { color: var(--charcoal); font-family: var(--serif); font-size: 1.08rem; font-weight: 750; }
.decision-table tr:last-child td { border-bottom: 0; }
.decision-table th:last-child, .decision-table td:last-child { border-right: 0; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(38px, 7vw, 90px); }
.content-card { padding: clamp(28px, 4vw, 46px); border-top: 5px solid var(--brick); background: var(--white); box-shadow: 0 12px 36px rgba(31, 37, 40, 0.08); }
.content-card h3 { font-size: 1.75rem; }
.content-card p, .content-card li { color: var(--ink-soft); font-size: 0.82rem; }
.content-card ul { display: grid; gap: 9px; padding-left: 19px; }
.warning-card { border-color: #c45b3e; background: #2b3134; }
.warning-card h3 { color: var(--white); }
.warning-card p, .warning-card li { color: #c6ced0; }

.service-directory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.service-directory a { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 20px; border-left: 4px solid var(--brick); background: var(--white); box-shadow: 0 7px 20px rgba(31, 37, 40, 0.06); font-family: var(--serif); font-size: 0.95rem; font-weight: 750; }
.service-directory a span { color: var(--brick); font-family: var(--sans); }
.service-directory a:hover { color: var(--white); background: var(--brick); }
.service-directory a:hover span { color: var(--white); }

.local-feature { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: clamp(45px, 8vw, 105px); }
.local-feature-image { position: relative; }
.local-feature-image img { width: 100%; min-height: 580px; object-fit: cover; box-shadow: var(--shadow); }
.local-feature-image .image-caption { position: absolute; right: 18px; bottom: 18px; left: 18px; margin: 0; padding: 13px 15px; color: #e4e8e9; background: rgba(22, 27, 29, 0.88); font-size: 0.63rem; }
.local-feature-copy h2 { font-size: clamp(2.8rem, 5vw, 5.2rem); }
.local-feature-copy > p { color: var(--ink-soft); }
.fact-list { display: grid; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; }
.fact-list li { padding: 17px 0; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.82rem; }
.fact-list strong { display: block; margin-bottom: 4px; color: var(--charcoal); }

.compare-visual { overflow: hidden; border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow); }
.compare-image { position: relative; }
.compare-image img { width: 100%; max-height: 650px; object-fit: cover; }
.compare-image-labels { position: absolute; top: 20px; right: 20px; left: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compare-image-labels div { padding: 15px 18px; color: var(--white); background: rgba(31, 37, 40, 0.92); }
.compare-image-labels div:last-child { background: rgba(164, 65, 45, 0.93); }
.compare-image-labels strong { display: block; font-family: var(--serif); font-size: 1.2rem; }
.compare-image-labels small { font-size: 0.64rem; }
.compare-caption { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 25px 29px; }
.compare-caption p { margin: 0; color: var(--ink-soft); font-size: 0.74rem; }
.compare-caption strong { color: var(--charcoal); }

.term-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.term-card { padding: clamp(30px, 5vw, 55px); border-top: 6px solid var(--charcoal); background: var(--white); box-shadow: 0 12px 38px rgba(31, 37, 40, 0.08); }
.term-card:last-child { border-color: var(--brick); }
.term-card > span { color: var(--brick); font-size: 0.65rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.term-card h2 { margin: 24px 0 16px; font-size: clamp(2.4rem, 4vw, 4.3rem); }
.term-card p { color: var(--ink-soft); }
.term-card .plain-definition { padding-top: 18px; border-top: 1px solid var(--line); color: var(--charcoal); font-weight: 700; }

.depth-demo { display: grid; grid-template-columns: 1fr 1fr; align-items: center; overflow: hidden; background: var(--charcoal); }
.depth-demo img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.depth-copy { padding: clamp(34px, 6vw, 72px); }
.depth-copy h2 { color: var(--white); font-size: clamp(2.7rem, 4.6vw, 4.8rem); }
.depth-copy p { color: #bdc7ca; }
.depth-rule { margin: 30px 0 0; padding: 21px; border-left: 5px solid var(--clay); background: rgba(255, 255, 255, 0.06); }
.depth-rule strong { display: block; color: var(--white); font-family: var(--serif); font-size: 1.25rem; }
.depth-rule span { color: #b9c4c7; font-size: 0.72rem; }

.source-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.source-list li { padding: 16px 18px; border-left: 4px solid var(--brick); background: var(--white); color: var(--ink-soft); font-size: 0.75rem; }
.source-list a { color: var(--brick); font-weight: 800; }
.source-date { margin-top: 18px; color: var(--ink-soft); font-size: 0.68rem; }

.neighbor-links { display: flex; flex-wrap: wrap; gap: 10px; }
.neighbor-links a { padding: 13px 17px; border: 1px solid var(--line); background: var(--white); font-size: 0.74rem; font-weight: 800; }
.neighbor-links a:hover { color: var(--white); border-color: var(--brick); background: var(--brick); }

.inline-estimate { padding-block: clamp(75px, 9vw, 120px); background: var(--limestone); }
.inline-estimate .estimate-layout { align-items: start; }

.detail-page .faq-section { padding-block: clamp(75px, 9vw, 120px); }
.detail-page .final-cta h2 { font-size: clamp(2.5rem, 4.8vw, 5rem); }
.footnote { color: var(--ink-soft); font-size: 0.64rem; }

@media (max-width: 1050px) {
  .detail-hero-grid, .article-hero .detail-hero-grid { grid-template-columns: 1fr; }
  .detail-hero-copy { max-width: 850px; }
  .detail-hero-card { width: min(100%, 650px); }
  .article-hero .detail-media { width: min(100%, 820px); }
  .signal-grid, .priority-grid, .problem-mini-grid, .service-directory { grid-template-columns: repeat(2, 1fr); }
  .steps-line { grid-template-columns: repeat(3, 1fr); }
  .photo-process { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
  .detail-heading, .lede-grid, .diagnostic-panel, .two-col, .local-feature, .depth-demo { grid-template-columns: 1fr; }
  .detail-heading { align-items: start; gap: 18px; }
  .diagnostic-image { min-height: 430px; }
  .local-feature-image img { min-height: 420px; }
  .steps-line { grid-template-columns: repeat(2, 1fr); }
  .term-cards { grid-template-columns: 1fr; }
  .article-hero .detail-media img { min-height: 350px; }
}

@media (max-width: 560px) {
  .detail-hero-inner { padding-block: 44px 60px; }
  .detail-hero h1 { font-size: clamp(2.85rem, 13vw, 4.2rem); }
  .breadcrumb { margin-bottom: 22px; }
  .section-nav a { padding-block: 17px; }
  .signal-grid, .priority-grid, .problem-mini-grid, .service-directory, .steps-line, .photo-process { grid-template-columns: 1fr; }
  .signal-card, .priority-card, .problem-mini-card { min-height: 190px; }
  .photo-step img { height: 215px; }
  .article-hero .detail-media img { min-height: 300px; }
  .media-labels, .compare-image-labels { position: static; gap: 1px; }
  .compare-caption { grid-template-columns: 1fr; gap: 13px; }
  .depth-demo img { min-height: 350px; }
  .detail-hero-card .card-form { padding: 22px 20px 25px; }
}

/* Site-wide readability, square media and narrative order */
.detail-hero-grid, .article-hero .detail-hero-grid {
  grid-template-columns: minmax(0, 920px);
  align-items: start;
  justify-content: start;
  gap: 24px;
}
.detail-hero-copy { display: contents; }
.detail-hero .detail-kicker { order: 1; font-size: 0.8rem; }
.detail-hero h1 { order: 2; max-width: 920px; margin: 10px 0 18px; font-size: clamp(3.2rem, 5vw, 5.2rem); line-height: 1.03; }
.detail-hero-card { order: 3; width: min(100%, 720px); }
.detail-hero-card > img { display: none; }
.article-hero .detail-media { order: 3; width: min(100%, 720px); margin: 0; }
.detail-media-image { aspect-ratio: 1 / 1; overflow: hidden; }
.article-hero .detail-media img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.detail-hero .answer { order: 4; max-width: 880px; font-size: 1.08rem; line-height: 1.78; }
.detail-hero .hero-proof { order: 5; }
.hero-proof span { font-size: 0.8rem; font-weight: 750; }
.media-labels { position: static; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--charcoal); }
.media-labels span { padding: 17px 19px; font-size: 1rem; font-weight: 800; line-height: 1.4; }
.breadcrumb { font-size: 0.78rem; }
.section-nav a { font-size: 0.84rem; }
.detail-heading h2, .detail-heading-single h2, .local-feature-copy h2, .depth-copy h2 { font-size: clamp(2.35rem, 3.8vw, 4.15rem); line-height: 1.07; }
.detail-heading > p, .detail-heading-single > p:not(.eyebrow), .local-feature-copy > p { font-size: 1rem; }
.lede-aside p, .lede-aside li { font-size: 0.88rem; }
.prose p, .prose li { font-size: 1rem; line-height: 1.8; }
.signal-card p, .priority-card p, .problem-mini-card p { font-size: 0.88rem; }
.signal-card > span, .priority-card > span, .problem-mini-card > span { font-size: 0.9rem; }
.diagnostic-image { min-height: 0; aspect-ratio: 1 / 1; }
.diagnostic-image img { width: 100%; height: 100%; object-fit: cover; }
.diagnostic-copy { font-size: 1rem; }
.diagnostic-list small { font-size: 0.82rem; }
.photo-step img { height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.photo-step p, .steps-line p { font-size: 0.84rem; }
.decision-table td { font-size: 0.9rem; }
.decision-table th { font-size: 0.76rem; }
.content-card p, .content-card li { font-size: 0.9rem; }
.service-directory a { color: var(--charcoal); font-size: 1.02rem; }
.service-directory a span { font-size: 1.15rem; }
.local-feature-image img { width: 100%; height: auto; min-height: 0; aspect-ratio: 1 / 1; object-fit: cover; }
.fact-list li { font-size: 0.9rem; }
.compare-image { display: grid; place-items: center; aspect-ratio: 1 / 1; background: #d9d0c3; }
.compare-image img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.compare-image-labels { position: static; grid-template-columns: 1fr 1fr; gap: 2px; }
.compare-image-labels div { padding: 20px 22px; background: var(--charcoal); }
.compare-image-labels div:last-child { background: var(--brick); }
.compare-image-labels strong { font-family: var(--sans); font-size: 1.58rem; line-height: 1.2; }
.compare-image-labels small { margin-top: 8px; display: block; font-size: 1rem; font-weight: 650; line-height: 1.5; }
.compare-caption p { font-size: 0.86rem; }
.term-card p { font-size: 0.98rem; }
.depth-demo img { width: 100%; height: auto; min-height: 0; aspect-ratio: 1 / 1; object-fit: cover; }
.depth-copy p { font-size: 0.96rem; }
.depth-rule span { font-size: 0.82rem; }
.source-list li { font-size: 0.9rem; line-height: 1.6; }
.source-date, .footnote { font-size: 0.8rem; }
.neighbor-links a { font-size: 0.9rem; }

.layer-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.layer-guide > li { overflow: hidden; border: 1px solid var(--line); background: var(--white); box-shadow: 0 12px 34px rgba(31, 37, 40, 0.08); }
.joint-stage { position: relative; display: grid; aspect-ratio: 1 / 1; align-content: center; gap: 16px; padding: 52px 28px 28px; background: #eee9e0; }
.stage-edge { position: absolute; top: 18px; right: 20px; left: 20px; display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 0.72rem; font-weight: 850; text-transform: uppercase; }
.brick-slab { display: grid; min-height: 84px; place-items: center; border: 3px solid #7f2f20; color: #fff3ec; background: #a94732; font-size: 0.82rem; font-weight: 850; }
.joint-channel { position: relative; display: flex; height: 68px; overflow: hidden; border: 3px solid #685b50; background: #d9d0c2; }
.joint-channel i { display: block; height: 100%; }
.old-mortar { width: 25%; background: #7a6e61; }
.open-pocket { flex: 1; background: repeating-linear-gradient(135deg, #f7f3ec 0 10px, #ddd5c8 10px 20px); }
.inner-lift { width: 34%; background: #b79f81; box-shadow: inset -3px 0 #6d5d4c; }
.outer-lift { flex: 1; background: #d0b796; }
.tooled-face { width: 10px; border-left: 3px solid #77644f; background: #f0d4ae; }
.layer-copy { padding: 26px 27px 30px; }
.layer-copy > span { color: var(--brick); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.layer-copy h3 { margin: 13px 0 12px; }
.layer-copy p { color: var(--ink-soft); font-size: 0.9rem; }
.layer-copy strong { display: block; margin-top: 18px; font-size: 0.9rem; }

.method-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.method-card { padding: 28px; border-top: 7px solid var(--green); background: var(--white); box-shadow: 0 12px 36px rgba(31, 37, 40, 0.08); }
.method-bad { border-color: #b8432e; }
.method-verdict { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; font-size: 1.15rem; }
.method-verdict span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: var(--white); background: var(--green); font-size: 1.5rem; font-weight: 900; }
.method-bad .method-verdict span { background: #b8432e; }
.method-card .joint-stage { margin-bottom: 26px; }
.method-card h3 { margin-bottom: 16px; }
.method-card ul { display: grid; gap: 10px; padding-left: 21px; color: var(--ink-soft); font-size: 0.92rem; }
.method-card > p { margin-bottom: 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.92rem; }
.loose-core { width: 62%; background: repeating-linear-gradient(145deg, #7e7061 0 7px, #a69988 7px 13px); }
.hidden-void { flex: 1; background: #30383c; }
.thin-smear { width: 8%; background: #d6bb97; }

@media (max-width: 780px) {
  .detail-hero-grid, .article-hero .detail-hero-grid { gap: 20px; }
  .detail-hero h1 { font-size: clamp(2.55rem, 10vw, 3.8rem); line-height: 1.04; }
  .detail-hero-card { width: 100%; }
  .detail-hero .answer { font-size: 1.02rem; line-height: 1.72; }
  .article-hero .detail-media { width: 100%; aspect-ratio: 1 / 1; }
  .diagnostic-image, .local-feature-image img, .depth-demo img, .compare-image { aspect-ratio: 1 / 1; }
  .media-labels, .compare-image-labels, .compare-caption { grid-template-columns: 1fr; }
  .media-labels span, .compare-image-labels div { padding: 16px 18px; text-align: left; }
  .section-nav a { font-size: 0.88rem; }
  .layer-guide, .method-compare { grid-template-columns: 1fr; }
  .joint-stage { aspect-ratio: 1 / 1; }
}

/* Natural guide visuals and responsive hero correction */
.instruction-visual {
  margin: 34px 0 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 14px 42px rgba(31, 37, 40, 0.1);
}
.instruction-visual > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.instruction-visual figcaption {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
}
.instruction-visual figcaption span {
  padding: 20px 22px;
  color: var(--ink-soft);
  background: var(--white);
  font-size: 0.92rem;
  line-height: 1.55;
}
.instruction-visual figcaption b {
  display: block;
  margin-bottom: 5px;
  color: var(--charcoal);
  font-size: 1.06rem;
}
.instruction-compare figcaption { grid-template-columns: 1fr 1fr; }
.instruction-compare .caption-good { border-top: 6px solid var(--green); }
.instruction-compare .caption-bad { border-top: 6px solid #b8432e; }
.layer-guide-text { margin-top: 18px; }
.layer-guide-text > li { min-height: 0; }
.layer-guide-text .layer-copy { height: 100%; }
.method-compare { margin-top: 18px; }
.method-card { padding: 30px 32px; }
.method-card h3 { margin: 8px 0 16px; }
.method-card ul { margin-bottom: 22px; }
.compare-image {
  aspect-ratio: 16 / 9;
  background: #d9d0c3;
}
.compare-image img { object-fit: cover; }

@media (min-width: 781px) {
  .detail-hero-grid,
  .article-hero .detail-hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(410px, 0.82fr);
    align-items: start;
    justify-content: stretch;
    gap: clamp(44px, 6vw, 88px);
  }
  .detail-hero-copy { display: block; }
  .detail-hero h1 {
    max-width: 760px;
    margin: 12px 0 20px;
    font-size: clamp(2.9rem, 4vw, 4.65rem);
    line-height: 1.04;
  }
  .detail-hero .answer { max-width: 760px; font-size: 1.02rem; line-height: 1.72; }
  .detail-hero-card,
  .article-hero .detail-media {
    width: 100%;
    margin: 0;
    align-self: start;
  }
  .article-hero .detail-media { position: sticky; top: 150px; }
  .article-hero .detail-media-image { aspect-ratio: 4 / 3; }
  .article-hero .detail-media img { object-fit: cover; }
  .detail-hero .value-bullets { margin-top: 24px; }
}

@media (max-width: 780px) {
  .detail-hero-copy { display: contents; }
  .detail-hero .answer { order: 4; }
  .detail-hero .value-bullets { order: 5; margin-top: 2px; }
  .detail-hero .hero-proof { order: 6; }
  .article-hero .detail-media-image { aspect-ratio: 1 / 1; }
  .instruction-visual > img,
  .compare-image { aspect-ratio: 1 / 1; object-fit: cover; }
  .instruction-visual figcaption,
  .instruction-compare figcaption { grid-template-columns: 1fr; }
  .instruction-visual figcaption span { padding: 17px 18px; }
}