/* 만정누수탐지 — 절제된 잉크 톤 + 가는 선, 넉넉한 여백 */
body, p, h1, h2, h3, h4, h5, h6, li, td, th, a, span, div, button, label, figcaption, dt, dd, small, summary {
  word-break: keep-all;
  overflow-wrap: break-word;
}
:root {
  color-scheme: only light;
  --ink: #13171c;
  --ink-2: #252b33;
  --ink-3: #55606c;
  --signal: #3355ff;
  --signal-text: #8aa2ff;
  --surface: #eff2f6;
  --paper: #f9fafc;
  --line: #d3d9e0;
  --border: #d3d9e0;
  --text-on-light: #13171c;
  --text-on-dark: #f2f5fa;
  --muted-on-dark: #aeb8c6;
  --dp-radius: 0px;
  --proc-badge: 48px;
  --proc-badge-radius: 0px;
  --proc-line: 1px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --gutter: 24px;
  --sticky-h: 64px;
  --f-head: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  --f-body: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  --hdr-h: 72px;
}
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body { margin: 0; background: var(--paper); color: var(--text-on-light); font-family: var(--f-body); font-size: 18px; line-height: 1.85; font-weight: 400; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:where(a, button, [role="button"], summary) { touch-action: manipulation; }
:where(a, button, [role="button"], summary, .btn, nav a) { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
p a, li a.inline { min-height: 0; min-width: 0; display: inline; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 700; line-height: 1.3; margin-top: 0; letter-spacing: -0.02em; }
p { margin: 0 0 var(--sp-4); }
.skip { position: absolute; left: 0; top: 0; background: var(--signal); color: #fff; padding: 10px 16px; z-index: 200; transform: translateY(-120%); transition: transform .2s ease; }
.skip:focus { transform: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

main h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); }
main :is(h1, h2) { margin-bottom: clamp(20px, 2.4vw, 32px); }
main :is(h3, h4) { margin-bottom: var(--sp-3); }
main :is(p, ul, ol, table, figure) + :is(h2) { margin-top: var(--sp-8); }
main :is(p, ul, ol, table, figure) + :is(h3, h4) { margin-top: var(--sp-6); }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: 720px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: max(var(--gutter), calc((100% - 1200px) / 2 + var(--gutter))); }
.sec { padding-block: var(--sp-10); position: relative; }
.sec--tight { padding-block: var(--sp-8); }
.sec--dark { background: var(--ink); color: var(--text-on-dark); }
.sec--surface { background: var(--surface); }

/* 헤더 */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--ink); color: var(--text-on-dark); border-bottom: 1px solid rgba(242, 245, 250, .14); transition: box-shadow .3s ease; }
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(242, 245, 250, .2); }
.hdr-in { max-width: 1200px; margin-inline: auto; padding: 0 var(--gutter); min-height: var(--hdr-h); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.brand { text-decoration: none; display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; color: var(--text-on-dark); }
.brand__mark { flex: none; color: var(--text-on-dark); }
.brand__txt { display: flex; flex-direction: column; line-height: 1.25; }
.brand__name { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }
.brand__kw { font-variant: small-caps; font-size: .875rem; letter-spacing: .14em; color: var(--muted-on-dark); }

/* 버튼 — 평평한 직사각형 */
.btn { justify-content: center; gap: 10px; min-height: 52px; padding: 0 32px; background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: 0; font-family: var(--f-body); font-weight: 600; font-size: 1rem; letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.btn--sm { min-height: 44px; padding: 0 22px; font-size: .95rem; }
.site-header .btn--sm { background: var(--signal); color: #fff; border-color: var(--signal); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--block { width: 100%; }
.btn:active { opacity: .8; }
.sec--dark .btn, .cta-band .btn { background: #fff; color: var(--ink); border-color: #fff; }
.sec--dark .btn--ghost, .cta-band .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.link-arrow { position: relative; text-decoration: none; font-weight: 600; padding-block: 6px; gap: 8px; }
.link-arrow::before { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform-origin: left; transform: scaleX(.3); transition: transform .3s ease; }
.link-arrow::after { content: '\2192'; transition: transform .3s ease; }

/* eyebrow */
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--sp-4); font-size: .875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); min-height: 0; }
.eyebrow::before { content: ''; width: 32px; height: 1px; background: currentColor; flex: none; }
.sec--dark .eyebrow, .sec--method .eyebrow, .cta-band .eyebrow { color: var(--signal-text); }

/* 모티프 M1 */
.motif-line { display: block; width: 100%; height: auto; color: currentColor; }
.motif-line path { stroke-dasharray: 900; stroke-dashoffset: 900; }
.is-in .motif-line path, .no-reveal .motif-line path { animation: draw 1.4s ease forwards; }
.motif-line .node { fill: var(--signal); stroke: currentColor; stroke-width: 2; animation: pulse 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

/* 리빌 */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="rise"] { transform: translateY(40px); }
.js [data-reveal="wipe"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path .9s ease; }
.js [data-reveal="wipe"].is-in { clip-path: inset(0 0 0 0); }

/* HERO (H2 켄번즈 순환) */
.hero { position: relative; overflow: hidden; padding-inline: 0; min-height: 86vh; min-height: 86dvh; display: flex; align-items: flex-end; background: var(--ink); }
.hero__media { position: absolute; inset: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.hero__slide.is-on { opacity: 1; }
.hero__media :is(img, video, picture) { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; }
.hero__slide.is-on img { animation: heroZoom 9s ease-out forwards; }
.hero__content { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); padding-bottom: var(--sp-8); }
.hero__card { background: var(--paper); color: var(--text-on-light); max-width: 560px; padding: var(--sp-8) var(--sp-8) var(--sp-7); animation: heroRise .9s ease both; }
.hero__card h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); margin: 0 0 var(--sp-5); line-height: 1.12; letter-spacing: -0.03em; }
.hero__answer { font-size: 1.02rem; color: var(--ink-3); margin-bottom: var(--sp-6); line-height: 1.85; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); margin: 0; }
.hero__dots { position: absolute; right: var(--gutter); bottom: var(--sp-5); z-index: 3; display: flex; gap: 8px; }
.hero__dots span { display: block; width: 24px; height: 2px; background: rgba(255, 255, 255, .5); transition: background-color .3s ease, width .3s ease; min-height: 0; min-width: 0; }
.hero__dots span.is-on { background: #fff; width: 40px; }

/* 크럼 */
.crumb { margin-bottom: var(--sp-4); }
.crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: .9rem; color: var(--ink-3); }
.crumb li + li::before { content: '/'; margin-right: 6px; }
.crumb a { min-width: 0; padding-right: 2px; text-decoration: underline; text-underline-offset: 3px; }

.sec-head { margin-bottom: var(--sp-8); }
.sec-head h2 { margin-bottom: var(--sp-5); }
.sec-head p { max-width: 520px; margin: 0; color: var(--ink-3); }
.sec--dark .sec-head p, .sec--method .sec-head p { color: var(--muted-on-dark); }

/* L7 사진 3장 */
.photo-trio { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(2, clamp(180px, 20vw, 270px)); gap: var(--sp-5) var(--sp-6); margin: 0; }
.photo-trio__item { margin: 0; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.photo-trio__item img { width: 100%; flex: 1 1 auto; min-height: 0; aspect-ratio: auto; object-fit: cover; }
.photo-trio__item figcaption { flex: none; padding-top: var(--sp-3); font-size: .9rem; color: var(--ink-3); line-height: 1.5; }
.photo-trio__item:nth-child(1) { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.photo-trio__item:nth-child(2) { grid-column: 8 / span 5; }
.photo-trio__item:nth-child(3) { grid-column: 8 / span 5; }

/* L6 증상 */
.split-sticky { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-9); align-items: start; }
.sticky-col { position: sticky; top: 120px; }
.sticky-col p { color: var(--ink-3); max-width: 420px; }
.sym-list { border-top: 1px solid var(--ink); }
.sym-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); padding: var(--sp-6) 0; border-bottom: 1px solid var(--line); }
.sym-row p { margin: 0; }
.sym-row__s { font-weight: 600; }
.sym-row__c { color: var(--ink-3); }

/* L8 단계 */
.sec--method { background: var(--ink); color: var(--text-on-dark); overflow: hidden; --border: rgba(242, 245, 250, .28); }
.sec--method::before { content: ''; position: absolute; inset: 0; background: url('/assets/artwork/villa-main-pipe-excavation-01-duotone.jpg') center / cover no-repeat; opacity: .1; }
.sec--method > .wrap { position: relative; z-index: 2; }
.method-split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-9); align-items: start; }
.method-art { color: var(--signal-text); margin-top: var(--sp-7); max-width: 360px; }

/* 타임라인 기본 규격(가로) — 변형은 아래 modifier */
.proc-list { display: flex; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; }
.proc-step { flex: 1 1 0; min-width: 0; position: relative; padding: 0 12px; text-align: center; }
.proc-step:not(:last-child)::after { content: ''; position: absolute; z-index: 0; top: calc(var(--proc-badge) / 2 - var(--proc-line) / 2); left: 50%; width: 100%; height: var(--proc-line); background: var(--border); }
.proc-num { position: relative; z-index: 1; width: var(--proc-badge); height: var(--proc-badge); margin: 0 auto 12px; border-radius: var(--proc-badge-radius); background: var(--paper); color: var(--ink); font-weight: 600; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ink); }
.proc-step h3 { font-size: 1.15rem; margin-bottom: var(--sp-3); }
.proc-step p { font-size: .98rem; margin: 0 0 var(--sp-3); color: inherit; }
.proc-step__meta { font-size: .875rem; color: var(--ink-3); }
.proc-step p.proc-step__meta { margin: 0; }
@media (max-width: 1024px) {
  .proc-list { flex-direction: column; gap: 32px; }
  .proc-step { padding: 0 0 0 calc(var(--proc-badge) + 16px); text-align: left; }
  .proc-num { position: absolute; left: 0; top: 0; margin: 0; }
  .proc-step:not(:last-child)::after { top: var(--proc-badge); left: calc(var(--proc-badge) / 2 - var(--proc-line) / 2); width: var(--proc-line); height: calc(100% + 32px); }
}
/* 형태 A: 세로 라인 */
.proc-list--line { display: block; border-left: 1px solid var(--border); margin: 0 0 0 4px; padding: 0; list-style: none; }
.proc-list--line .proc-step { position: relative; text-align: left; padding: 0 0 var(--sp-8) var(--sp-7); }
.proc-list--line .proc-step:last-child { padding-bottom: 0; }
.proc-list--line .proc-step::after { display: none; }
.proc-list--line .proc-step::before { content: ''; position: absolute; left: -5px; top: 8px; width: 9px; height: 9px; background: var(--signal); }
.proc-list--line .proc-num { position: static; display: block; width: auto; height: auto; margin: 0 0 var(--sp-2); padding: 0; background: none; border: 0; font-size: .875rem; letter-spacing: .16em; color: var(--signal-text); font-weight: 600; }
.proc-list--line .proc-step p { color: var(--muted-on-dark); }
.proc-list--line .proc-step p.proc-step__meta { color: var(--muted-on-dark); opacity: .75; }
/* 형태 B: 카드 그리드 */
.proc-list--cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: var(--sp-7) var(--sp-6); }
.proc-list--cards .proc-step { flex: none; display: flex; flex-direction: column; text-align: left; padding: var(--sp-5) 0 0; border-top: 1px solid var(--ink); position: relative; }
.proc-list--cards .proc-step::after { display: none; }
.proc-list--cards .proc-num { position: static; width: auto; height: auto; margin: 0 0 var(--sp-5); background: none; border: 0; display: block; font-size: 2.6rem; font-weight: 300; line-height: 1; color: var(--ink-3); }
.proc-list--cards .proc-step p.proc-step__meta { margin-top: auto; padding-top: var(--sp-3); }
.proc-list--cards .proc-step--cta { background: var(--ink); color: #fff; padding: var(--sp-5); }
.proc-list--cards .proc-step--cta .proc-num { color: var(--signal-text); font-size: 1rem; letter-spacing: .14em; font-weight: 600; margin-bottom: var(--sp-5); }
.proc-list--cards .proc-step--cta a { color: #fff; margin-top: auto; text-decoration: underline; text-underline-offset: 4px; }
.proc-list--cards .proc-step--cta p { color: var(--muted-on-dark); }
.proc-list--cards .proc-step--cta h3 { color: #fff; }

/* L3 실적 */
.record-split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-9); align-items: start; }
.stat-num { margin: var(--sp-7) 0 var(--sp-3); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; line-height: 1; }
.stat-num b { font-weight: 600; font-size: clamp(3.4rem, 8vw, 6.4rem); letter-spacing: -.04em; line-height: 1; }
.stat-num span { font-size: 1.4rem; font-weight: 500; }
.stat-cap { max-width: 380px; color: var(--ink-3); margin: 0; }
.rec-list { border-top: 1px solid var(--ink); }
.rec-list li { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.rec-list li span { font-size: .875rem; letter-spacing: .08em; color: var(--ink-3); }
.rec-note { margin-top: var(--sp-4); font-size: .88rem; color: var(--ink-3); }

/* L5 비용 */
.tbl-wrap { overflow-x: auto; }
.costtable { width: 100%; border-collapse: collapse; font-size: 1rem; }
.costtable caption { text-align: left; font-size: .875rem; letter-spacing: .08em; color: var(--ink-3); padding: 0 0 var(--sp-4); caption-side: top; }
.costtable th, .costtable td { text-align: left; padding: 20px 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.costtable thead th { font-size: .875rem; letter-spacing: .1em; color: var(--ink-3); border-bottom: 1px solid var(--ink); padding-block: 12px; }
.costtable tbody th { width: 34%; font-weight: 600; padding-right: var(--sp-5); }
.cost-note { margin-top: var(--sp-7); }
.cost-note p { margin: 0; color: var(--ink-3); }

/* FAQ 아코디언 — 항상 닫힌 상태 */
.faq-list { border-top: 1px solid var(--ink); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); min-height: 64px; padding: var(--sp-4) 0; width: 100%; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 1.08rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.faq summary::after { content: ''; flex: none; width: 9px; height: 9px; border: solid var(--ink); border-width: 0 1px 1px 0; transform: rotate(45deg); transition: transform .3s ease; margin-right: 6px; }
.faq[open] summary::after { transform: rotate(225deg); }
.faq__a { padding: 0 var(--sp-7) var(--sp-6) 0; }
.faq__a p { margin: 0; color: var(--ink-3); }
.split-risk { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-9); align-items: start; }
.split-risk > :first-child { position: sticky; top: 120px; }
.photo-tag { margin: 0; }
.photo-tag img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-tag figcaption { padding-top: var(--sp-3); font-size: .9rem; color: var(--ink-3); }
.sec--dark .photo-tag figcaption { color: var(--muted-on-dark); }

/* L4 상담 (겹침) */
.cta-sec { background: var(--ink); color: var(--text-on-dark); padding-block: var(--sp-10); position: relative; overflow: hidden; }
.cta-sec::before { content: ''; position: absolute; inset: 0; background: url('/assets/artwork/house-buried-pipe-pit-01-duotone.jpg') center / cover no-repeat; opacity: .12; }
.cta-sec > .wrap { position: relative; z-index: 2; }
.cta-grid { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; }
.cta-photo { grid-column: 6 / span 7; grid-row: 1; margin: 0; position: relative; align-self: stretch; min-height: 440px; background: var(--ink-2); }
.cta-photo img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; position: absolute; inset: 0; }
.cta-card { grid-column: 1 / span 6; grid-row: 1; position: relative; z-index: 2; background: var(--paper); color: var(--text-on-light); padding: var(--sp-9) var(--sp-8); }
.cta-card .eyebrow { color: var(--ink-3); }
.cta-card p { color: var(--ink-3); max-width: 440px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-6) 0 var(--sp-5); }
.cta-card small { display: block; color: var(--ink-3); font-size: .88rem; }

/* 세부 */
.dt-hero__img { position: relative; height: clamp(260px, 56dvh, 520px); background: var(--ink); overflow: hidden; }
.dt-hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; animation: heroZoom 10s ease-out forwards; }
.dt-hero__wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.dt-hero__card { position: relative; z-index: 2; max-width: 720px; margin: -96px 0 0; background: var(--paper); padding: var(--sp-8) var(--sp-8) var(--sp-7); }
.dt-hero__card h1 { font-size: clamp(2.2rem, 5.4vw, 4.2rem); margin-bottom: var(--sp-5); line-height: 1.15; letter-spacing: -0.03em; }
.dt-hero__card p { color: var(--ink-3); margin: 0; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-7); margin: 0; border-top: 1px solid var(--ink); padding-top: var(--sp-6); }
.facts div { min-width: 0; }
.facts dt { font-size: .875rem; letter-spacing: .12em; color: var(--ink-3); margin-bottom: var(--sp-2); }
.facts dd { margin: 0; font-weight: 600; line-height: 1.6; }
.checklist { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-9); border-top: 1px solid var(--ink); }
.checklist li { padding: 24px 0 24px 36px; border-bottom: 1px solid var(--line); position: relative; min-width: 0; }
.checklist li::before { content: ''; position: absolute; left: 4px; top: 30px; width: 7px; height: 13px; border: solid var(--ink); border-width: 0 1px 1px 0; transform: rotate(40deg); }
.callout { border-left: 2px solid var(--signal); padding: var(--sp-2) 0 var(--sp-2) var(--sp-6); }
.callout p { margin: 0; color: var(--muted-on-dark); }
.callout strong { color: #fff; }
.figure-row { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-9); align-items: center; }
.rel-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: var(--sp-6); align-items: stretch; }
.rel-card { display: flex; flex-direction: column; align-items: stretch; height: 100%; min-width: 0; text-decoration: none; }
.rel-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.rel-card__body { flex: 1; padding: var(--sp-5) 0 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.rel-card__body h3 { font-size: 1.15rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rel-card__body p { margin: 0; font-size: .95rem; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rel-card__more { margin-top: auto; font-weight: 600; }
.cmp-table { width: 100%; border-collapse: collapse; }
.cmp-table th, .cmp-table td { text-align: left; padding: 20px 16px 20px 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp-table thead th { font-size: .875rem; letter-spacing: .1em; color: var(--ink-3); border-bottom: 1px solid var(--ink); padding-block: 12px; }
.cmp-table tbody th { font-weight: 600; width: 28%; }

/* 상담 */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: var(--sp-6); align-items: stretch; }
.contact-card { display: flex; flex-direction: column; height: 100%; min-width: 0; padding: var(--sp-8) var(--sp-7); background: #fff; border: 1px solid var(--line); }
.contact-card h2 { font-size: 1.1rem; margin-bottom: 20px; color: var(--ink-3); letter-spacing: .02em; }
.contact-card .big-num { font-size: clamp(1.9rem, 4.2vw, 2.8rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 var(--sp-4); color: var(--ink); }
.contact-card p { color: var(--ink-3); }
.contact-card .btn { margin-top: auto; align-self: flex-start; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: var(--sp-7); }
.why-card { display: flex; flex-direction: column; height: 100%; min-width: 0; padding: var(--sp-5) 0 0; border-top: 1px solid var(--ink); }
.why-card h3 { font-size: 1.15rem; }
.why-card p { margin: 0; flex: 1; color: var(--ink-3); }
.prep { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); border-top: 1px solid var(--ink); padding-top: var(--sp-6); }
.prep li { min-width: 0; }
.prep li b { display: block; font-size: .875rem; letter-spacing: .12em; color: var(--ink-3); margin-bottom: var(--sp-2); font-weight: 600; }
.pg-contact .hero-sm { background: var(--ink); color: var(--text-on-dark); padding: var(--sp-9) 0 var(--sp-8); position: relative; overflow: hidden; }
.pg-contact .hero-sm h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); color: #fff; line-height: 1.12; margin-bottom: var(--sp-5); letter-spacing: -0.03em; }
.hero-sm p { color: var(--muted-on-dark); max-width: 560px; }
.hero-sm .crumb ol, .hero-sm .crumb a { color: var(--muted-on-dark); }
.hero-sm .motif-line { color: var(--signal-text); max-width: 420px; margin-top: var(--sp-7); }
.dt-hero .crumb ol, .dt-hero .crumb a { color: var(--ink-3); }
.nf { padding-block: var(--sp-10); }
.nf__links { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }

/* CTA 밴드 */
.cta-band { position: relative; background: var(--ink); color: var(--text-on-dark); padding-block: var(--sp-10); overflow: hidden; }
.cta-band::before { content: ''; position: absolute; inset: 0; background: url('/assets/artwork/house-buried-pipe-pit-01-duotone.jpg') right center / cover no-repeat; opacity: .2; }
.cta-band > .wrap { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { color: var(--muted-on-dark); max-width: 520px; }
.cta-band small { display: block; color: var(--muted-on-dark); font-size: .88rem; }

/* 푸터 */
.site-footer { background: var(--ink); color: var(--text-on-dark); padding: var(--sp-9) 0 var(--sp-6); }
.site-footer .ft-inner { max-width: 1200px; padding-inline: var(--gutter); margin-inline: auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; align-items: start; text-align: left; }
.ft-cluster__title { font-family: var(--f-body); font-size: 15px; font-weight: 700; margin: 0 0 12px; letter-spacing: .02em; }
.ft-cluster ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ft-cluster li { color: var(--muted-on-dark); font-size: .95rem; line-height: 1.6; }
.ft-cluster a { min-height: 44px; min-width: 0; margin-block: 0; padding-block: 0; line-height: 1.5; color: var(--text-on-dark); text-decoration: none; }
.ft-bottom { padding-right: 150px; max-width: calc(1200px - var(--gutter) * 2); margin-inline: auto; width: calc(100% - var(--gutter) * 2); display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid rgba(242, 245, 250, .2); margin-top: 48px; padding-top: 16px; font-size: .88rem; color: var(--muted-on-dark); gap: var(--sp-4); }

/* 하단 고정 */
#mob-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; justify-content: center; min-height: var(--sticky-h); background: var(--ink); color: #fff; border-top: 1px solid rgba(242, 245, 250, .2); padding: 0 var(--gutter) env(safe-area-inset-bottom); font-weight: 600; font-size: 1.05rem; text-decoration: none; }
#float-cta { position: fixed; right: 24px; bottom: 24px; z-index: 80; background: var(--ink); color: #fff; border: 1px solid rgba(242, 245, 250, .35); padding: 0 24px; min-height: 52px; font-weight: 600; text-decoration: none; transition: background-color .25s ease, color .25s ease; }
#float-cta:active { opacity: .8; }

@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes heroRise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--ink-2); }
  .btn--ghost:hover { background: var(--ink); color: #fff; }
  .site-header .btn--sm:hover { background: #fff; border-color: #fff; }
  .sec--dark .btn:hover, .cta-band .btn:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
  .link-arrow:hover::before { transform: scaleX(1); }
  .link-arrow:hover::after { transform: translateX(4px); }
  .rel-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
  #float-cta:hover { background: var(--signal); color: #fff; }
  .ft-cluster a:hover { color: var(--signal-text); }
  .faq summary:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
  .crumb a:hover { color: var(--ink); }
}

@media (max-width: 1024px) {
  .split-sticky, .split-risk, .record-split, .method-split, .figure-row { grid-template-columns: 1fr; gap: var(--sp-8); }
  .sticky-col, .split-risk > :first-child { position: static; }
  .facts { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
  .why-grid, .prep { grid-template-columns: repeat(2, 1fr); }
  .why-grid > :last-child:nth-child(odd), .prep > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .proc-list--cards { grid-template-columns: repeat(2, 1fr); }
  .cta-grid { display: block; }
  .cta-photo { min-height: 260px; }
  .cta-card { margin: calc(var(--sp-8) * -1) var(--sp-6) 0 0; position: relative; padding: var(--sp-8) var(--sp-7); }
  .sec { padding-block: var(--sp-9); }
  .cmp-table th, .cmp-table td { padding: 14px 10px 14px 0; font-size: .95rem; }
  .proc-list--line .proc-step { padding: 0 0 var(--sp-8) var(--sp-7); text-align: left; }
  .proc-list--line .proc-num { position: static; }
  .proc-list--cards .proc-step { padding: var(--sp-5) 0 0; text-align: left; }
  .proc-list--cards .proc-step--cta { padding: var(--sp-5); }
}
@media (max-width: 768px) {
  :root { --gutter: 20px; --hdr-h: 64px; }
  body { padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom)); }
  #mob-bar { display: inline-flex; }
  #float-cta { display: none; }
  .sec { padding-block: var(--sp-8); }
  .hero { display: block; min-height: 0; }
  .hero__media { position: relative; inset: auto; height: clamp(260px, 56dvh, 520px); }
  .hero__content { padding-inline: 0; padding-bottom: 0; }
  .hero__card { max-width: none; padding: var(--sp-7) var(--gutter); }
  .photo-trio { grid-template-columns: 1fr; grid-template-rows: none; }
  .photo-trio__item:nth-child(n) { grid-column: auto; grid-row: auto; }
  .photo-trio__item img { flex: none; aspect-ratio: 4 / 3; }
  .sym-row { grid-template-columns: 1fr; gap: var(--sp-3); }
  .checklist, .contact-grid, .why-grid, .prep, .rel-grid, .proc-list--cards { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .dt-hero__card { margin-top: -48px; padding: var(--sp-7) var(--gutter); }
  .cta-card { margin: calc(var(--sp-7) * -1) 0 0; padding: var(--sp-7) var(--gutter); }
  .site-footer .ft-inner { grid-template-columns: 1fr; text-align: left; }
  .ft-bottom { flex-direction: column; align-items: flex-start; padding-right: 0; }
  .faq__a { padding-right: 0; }
  .contact-card { padding: var(--sp-7) var(--sp-5); }
  .rec-list li { grid-template-columns: 64px 1fr; }
}
@media (max-width: 480px) {
  .brand__kw { display: none; }
  .facts { grid-template-columns: 1fr; }
  .hero__cta .btn, .cta-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .motif-line path { stroke-dashoffset: 0; }
}

/* 밝은 배경 패턴 — 도면 격자 + 배관 라인 드로잉 (M1) */
.sec:not(.sec--dark):not(.sec--method), .sec--tight {
  background-image:
    linear-gradient(rgba(19, 23, 28, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 23, 28, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
}
.sec--surface:not(.sec--dark) {
  background-image:
    linear-gradient(rgba(19, 23, 28, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 23, 28, .06) 1px, transparent 1px);
}
.sec:not(.sec--dark):not(.sec--method)::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: min(560px, 46%); pointer-events: none; z-index: 0;
  background: url('/assets/pattern-pipe-b.svg') left bottom / contain no-repeat; left: 0;
}
.sec.sec--surface:not(.sec--dark):not(.sec--method)::before {
  left: auto; right: 0; background: url('/assets/pattern-pipe-a.svg') right top / contain no-repeat;
}
.sec--tight::before { display: none; }
.sec > .wrap, .sec > .wrap-narrow, .sec > .wrap-wide { position: relative; z-index: 1; }
@media (max-width: 768px) {
  .sec:not(.sec--dark):not(.sec--method)::before { opacity: .6; width: 80%; }
}

/* 영상·사진 미디어 블록 (사진·영상이 위, 글이 아래) */
.media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); margin: 0 0 var(--sp-6); align-items: start; }
.video-fig, .media-fig { margin: 0; min-width: 0; }
.video-fig figcaption, .media-fig figcaption { padding-top: var(--sp-3); font-size: .92rem; color: var(--ink-3); line-height: 1.6; }
.media-fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; text-decoration: none; min-height: 0; }
.video img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: transform .6s ease; }
.video__play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; background: rgba(19, 23, 28, .88); border: 1px solid rgba(255, 255, 255, .8); transition: background-color .25s ease; }
.video__play::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -11px 0 0 -7px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-text { max-width: 640px; margin-top: var(--sp-8); }
.media-text p { color: var(--ink-3); }
.media-more { margin: 0 0 var(--sp-7); }
.sec--dark .video-fig figcaption, .sec--dark .media-fig figcaption { color: var(--muted-on-dark); }
@media (hover: hover) and (pointer: fine) {
  .video:hover img { transform: scale(1.04); }
  .video:hover .video__play { background: var(--signal); }
  .video:hover .video__play::after { border-left-color: #fff; }
}
@media (max-width: 768px) {
  .media-grid { grid-template-columns: 1fr; margin-bottom: var(--sp-5); }
  .media-text { margin-top: var(--sp-7); }
}
.sec.sec--surface:not(.sec--dark):not(.sec--method)::before { width: min(420px, 34%); opacity: .6; }

/* ===== 세부페이지 변형 (히어로 B·C·E / 미디어 / 섹션 형태 / FAQ / 관련 / CTA) ===== */
.sec--paper { background-color: var(--paper); }
.sec--steps { --border: rgba(242, 245, 250, .28); }
.dh__img { position: relative; overflow: hidden; background: var(--ink); }
.dh__img img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; animation: heroZoom 10s ease-out forwards; }
.dh--inset { padding-block: var(--sp-8) var(--sp-7); }
.dh--inset .dh__img { height: clamp(240px, 42vw, 520px); }
.dh__head { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-8); align-items: start; padding-top: var(--sp-7); }
.dh__head h1, .dh__strip h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 0; }
.dh__head p, .dh__strip p { color: var(--ink-3); margin: 0; }
.dh--band .dh__img { height: clamp(220px, 40dvh, 440px); }
.dh__dark { background: var(--ink); color: var(--text-on-dark); padding-block: var(--sp-9) var(--sp-8); }
.dh__dark h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); color: #fff; line-height: 1.12; letter-spacing: -0.03em; margin-bottom: var(--sp-5); }
.dh__dark p { color: var(--muted-on-dark); max-width: 640px; margin: 0; }
.dh__dark .crumb ol, .dh__dark .crumb a { color: var(--muted-on-dark); }
.dh--strip .dh__img { height: clamp(260px, 52dvh, 540px); }
.dh__strip { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-8); align-items: start; padding-block: var(--sp-8); border-bottom: 1px solid var(--ink); }

.media-wide { max-width: 920px; margin-bottom: var(--sp-6); }
.media-split { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-6); margin-bottom: var(--sp-6); align-items: start; }
.media-stack { display: grid; gap: var(--sp-6); }
.media-narrow { max-width: 760px; margin: 0 0 var(--sp-6); }

.num-rows { border-top: 1px solid var(--ink); }
.num-rows li { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-5); align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); }
.num-rows li span { font-size: 2rem; font-weight: 300; color: var(--ink-3); line-height: 1; }
.num-rows li p { margin: 0; font-weight: 500; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); border-top: 1px solid var(--ink); padding-top: var(--sp-6); }
.trio__item h3 { font-size: 1.15rem; }
.trio__item p { margin: 0; color: var(--ink-3); }
.checklist--one { grid-template-columns: 1fr; column-gap: 0; }
.split-sticky--sm { grid-template-columns: 4fr 8fr; gap: var(--sp-8); }
.split-sticky--sm .sticky-col h2 { margin-bottom: 0; }
.def-rows { border-top: 1px solid var(--ink); margin: 0; }
.def-rows > div { padding: 24px 0; border-bottom: 1px solid var(--line); }
.def-rows dt { font-weight: 600; margin-bottom: 6px; }
.def-rows dd { margin: 0; color: var(--ink-3); }
.def-rows small { display: block; margin-top: 6px; font-size: .875rem; letter-spacing: .04em; }
.quad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7) var(--sp-7); }
.quad__item { border-top: 1px solid var(--ink); padding-top: var(--sp-5); }
.quad__item small { display: block; font-size: .875rem; letter-spacing: .12em; color: var(--ink-3); margin-bottom: var(--sp-3); }
.quad__item h3 { font-size: 1.2rem; }
.quad__item p { margin: 0; color: var(--ink-3); }

.proc-list--rows { display: block; border-top: 1px solid var(--ink); margin: 0; padding: 0; }
.proc-list--rows .proc-step { flex: none; display: grid; grid-template-columns: 112px 1fr 220px; grid-template-areas: "n h m" "n p m"; column-gap: var(--sp-6); align-items: baseline; text-align: left; padding: 28px 0; border-bottom: 1px solid var(--line); position: relative; }
.proc-list--rows .proc-step::after { display: none; }
.proc-list--rows .proc-num { grid-area: n; position: static; width: auto; height: auto; margin: 0; background: none; border: 0; display: block; font-size: 2.4rem; font-weight: 300; line-height: 1; color: var(--ink-3); }
.proc-list--rows .proc-step h3 { grid-area: h; margin: 0 0 12px; }
.proc-list--rows .proc-step p { grid-area: p; margin: 0; color: var(--ink-3); }
.proc-list--rows .proc-step p.proc-step__meta { grid-area: m; text-align: right; font-size: .875rem; align-self: start; padding-top: 6px; }
.proc-list--stair { display: block; margin: 0; padding: 0; }
.proc-list--stair .proc-step { flex: none; text-align: left; position: relative; max-width: 560px; padding: 0 0 var(--sp-6) var(--sp-6); border-left: 1px solid var(--ink); margin-left: calc(var(--i, 0) * 9%); }
.proc-list--stair .proc-step::after { display: none; }
.proc-list--stair .proc-num { position: static; width: auto; height: auto; margin: 0 0 var(--sp-2); background: none; border: 0; display: block; font-size: .875rem; letter-spacing: .16em; color: var(--ink-3); }
.proc-list--stair .proc-step p { color: var(--ink-3); }

.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--sp-9); border-top: 1px solid var(--ink); margin: 0; }
.spec-grid > div { padding: 24px 0; border-bottom: 1px solid var(--line); }
.spec-grid dt { font-weight: 600; margin-bottom: 4px; }
.spec-grid dd { margin: 0; color: var(--ink-3); }
.faq-list--cols { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--sp-8); align-items: start; }
.faq-list--cols .faq:first-child { border-top: 0; }

.rel-grid--3 { grid-template-columns: repeat(3, 1fr); }
.rel-card--dark .rel-card__body { background: var(--ink); color: #fff; padding: var(--sp-5); }
.rel-card--dark .rel-card__body p { color: var(--muted-on-dark); }
.rel-rows { border-top: 1px solid var(--ink); }
.rel-row { display: grid; grid-template-columns: 160px 1fr; gap: var(--sp-5); align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; min-height: 0; }
.rel-row img { width: 160px; aspect-ratio: 4 / 3; object-fit: cover; }
.rel-row b { display: block; font-size: 1.1rem; }
.rel-row small { display: block; color: var(--ink-3); font-size: .95rem; margin-top: 4px; }

.cta-light { background: var(--surface); padding-block: var(--sp-10); border-top: 1px solid var(--line); }
.cta-light h2 { font-size: clamp(2rem, 5vw, 3.6rem); max-width: 16ch; line-height: 1.2; }
.cta-light p { color: var(--ink-3); max-width: 520px; }
.cta-light small { display: block; color: var(--ink-3); font-size: .88rem; }
.cta-split { background: var(--ink); color: var(--text-on-dark); padding-block: var(--sp-10); }
.cta-split__in { display: grid; grid-template-columns: 6fr 6fr; gap: var(--sp-9); align-items: end; }
.cta-split h2 { color: #fff; margin-bottom: 0; font-size: clamp(2rem, 4.4vw, 3.2rem); }
.cta-split p { color: var(--muted-on-dark); }
.cta-split .eyebrow { color: var(--signal-text); }
.cta-split small { display: block; color: var(--muted-on-dark); font-size: .88rem; }
.cta-split .btn { background: #fff; color: var(--ink); border-color: #fff; }
.cta-split .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
@media (hover: hover) and (pointer: fine) {
  .rel-row:hover b { text-decoration: underline; text-underline-offset: 4px; }
  .cta-split .btn:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
}
@media (max-width: 1024px) {
  .dh__head, .dh__strip, .split-sticky--sm, .cta-split__in, .media-split { grid-template-columns: 1fr; gap: var(--sp-6); }
  .rel-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .trio { grid-template-columns: 1fr; gap: var(--sp-6); }
  .proc-list--rows .proc-step { grid-template-columns: 80px 1fr; grid-template-areas: "n h" "n p" "n m"; }
  .proc-list--rows .proc-step p.proc-step__meta { text-align: left; padding-top: 8px; }
  .proc-list--stair .proc-step { margin-left: calc(var(--i, 0) * 4%); }
  .quad, .spec-grid, .faq-list--cols { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .rel-grid--3 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
  .dh--inset { padding-block: var(--sp-6); }
  .dh__dark { padding-block: var(--sp-8) var(--sp-7); }
  .num-rows li { grid-template-columns: 56px 1fr; }
  .proc-list--rows .proc-num { font-size: 1.8rem; }
  .proc-list--stair .proc-step { margin-left: 0; }
  .rel-row { grid-template-columns: 112px 1fr; }
  .rel-row img { width: 112px; }
}

/* 메인 5-이미지 서비스 그리드 (3+2) */
.svc-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-7) var(--sp-6); list-style: none; margin: 0; padding: 0; }
.svc-grid__item { grid-column: span 4; min-width: 0; display: flex; }
.svc-grid__item:nth-child(n+4) { grid-column: span 6; }
.svc-grid__item a { display: flex; flex-direction: column; width: 100%; min-height: 0; min-width: 0; text-decoration: none; align-items: stretch; }
.svc-grid__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.svc-grid__item:nth-child(n+4) img { aspect-ratio: 16 / 9; }
.svc-grid__cap { display: flex; flex-direction: column; gap: 4px; padding-top: var(--sp-4); border-top: 1px solid var(--ink); margin-top: var(--sp-4); }
.svc-grid__cap b { font-size: 1.15rem; letter-spacing: -0.01em; }
.svc-grid__cap small { color: var(--ink-3); font-size: .95rem; }
@media (hover: hover) and (pointer: fine) { .svc-grid__item a:hover b { text-decoration: underline; text-underline-offset: 4px; } }
@media (max-width: 1024px) { .svc-grid__item, .svc-grid__item:nth-child(n+4) { grid-column: span 6; } .svc-grid__item:nth-child(5) { grid-column: 1 / -1; } }
@media (max-width: 768px) { .svc-grid__item, .svc-grid__item:nth-child(n+4), .svc-grid__item:nth-child(5) { grid-column: 1 / -1; } }

@media (max-width: 768px) { .svc-grid { grid-template-columns: 1fr; gap: var(--sp-6); } .dh--inset .wrap { padding-inline: 0; } .dh--inset .dh__head { padding-inline: var(--gutter); } }

/* 줄바꿈 품질 — 제목은 균형 있게, 본문은 마지막 줄 고아 단어 방지 */
h1, h2, h3, h4, .sec-head p, .hero__answer, figcaption, summary h3 { text-wrap: balance; }
p, li, dd, td { text-wrap: pretty; }

.nb { white-space: nowrap; }

@media (max-width: 480px) { .rel-grid--3 { grid-template-columns: 1fr; } }