/* 유니드디자인 — 차콜 도면 + 월넛 자 (Japandi / M1 라인 드로잉) */

/* ---------- 토큰 ---------- */
:root {
  color-scheme: only light;
  --ink: #2C3639;
  --ink-2: #3C4547;
  --line-dark: #585F60;
  --sand: #D4C5A9;          /* 다크 위 선·라벨 전용 — 배경 금지 */
  --walnut: #8A6446;        /* 주 CTA·핵심 숫자 */
  --walnut-2: #A27B5C;
  --primary: var(--walnut);   /* 별칭 */
  --accent: var(--sand);
  --paper: #F4F4F2;
  --mist: #E6E8E5;
  --white: #FFFFFF;
  --border: #C9CEC9;
  --text-on-light: #1F2628;
  --muted-on-light: #555D5E;
  --text-on-dark: #F2F2EF;
  --muted-on-dark: #B9BDB9;

  --f-serif: 'Noto Serif KR', 'Nanum Myeongjo', serif;
  --f-sans: 'SUIT Variable', 'SUIT', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  --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;
  --gutter: 48px;
  --dp-radius: 2px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 350ms;
  --hdr-h: 76px;
  --sticky-h: 64px;
  --corner: 14px;

}

/* ---------- 리셋·전역 ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
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-sans); font-size: 18px; line-height: 1.8; font-weight: 400;
}
body, p, h1, h2, h3, h4, h5, h6, li, td, th, a, span, div, button, label, figcaption, dt, dd {
  word-break: keep-all;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
svg[stroke] { stroke-width: 1.5px; }
h1, h2, h3, h4 { font-family: var(--f-serif); font-weight: 500; line-height: 1.3; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }
:where(a, button, [role="button"], summary) { touch-action: manipulation; }
:where(a, button, [role="button"], summary, .dp-cta, nav a) { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
:where(p, td, dd, figcaption, small, .diag p) a { min-height: 0; min-width: 0; display: inline; }
:focus-visible { outline: 2px solid var(--walnut); outline-offset: 3px; }
.skip { position: absolute; left: var(--sp-4); top: -80px; z-index: 200; }
.skip:focus { top: var(--sp-4); background: var(--white); padding: var(--sp-2) var(--sp-4); }
.br-mobile { display: none; }

/* 제목 ↔ 본문 간격 */
main :is(h1, h2) { margin-bottom: clamp(24px, 3vw, 40px); }
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); }
main h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); text-wrap: balance; }
main :is(h3, .lead, .answer, .hero__answer) { text-wrap: pretty; }
main .eyebrow + :is(h1, h2) { margin-top: 0; }
/* 좁은 칼럼 제목은 한 단계 작게 — 한 어절씩 떨어지는 줄바꿈 방지 */
main :is(.diag-grid, .figside__txt, .tblwide__head, .faq__head, .method__head, .split, .cta__txt) h2 { font-size: clamp(1.7rem, 2.7vw, 2.5rem); }
main h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }

.wrap { max-width: 75rem; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 48.5rem; }   /* 680 본문 + 좌우 거터 */
.sec { padding-block: clamp(80px, 9vw, 128px); position: relative; }
.sec--tight { padding-block: clamp(72px, 8vw, 120px); }
/* 밝은 섹션이 연달아 오면 위 여백을 줄여 두 여백이 합쳐진 빈 띠를 막는다 */
:is(.sec, .ba-band):not(.on-dark):not(.cta) + .sec:not(.on-dark):not(.cta) { padding-top: clamp(16px, 2vw, 32px); }

/* eyebrow + 눈금 구분선 (M1) */
.eyebrow {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--f-sans); font-size: 14px; font-weight: 600; letter-spacing: .08em;
  color: var(--walnut); margin-bottom: var(--sp-4);
}
.eyebrow::before { content: ''; width: 36px; height: 9px; flex: none;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1.5px no-repeat,
              repeating-linear-gradient(90deg, currentColor 0 1.5px, transparent 1.5px 9px) left bottom / 100% 9px no-repeat; }
.on-dark .eyebrow, .hero .eyebrow, .callout .eyebrow { color: var(--sand); }
.rule { height: 12px; border: 0; margin: 0;
  background: linear-gradient(var(--border), var(--border)) left bottom / 100% 1px no-repeat,
              repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 16px) left bottom / 100% 8px no-repeat; }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--muted-on-light); max-width: 34em; margin-bottom: 0; }
.on-dark { background: var(--ink); color: var(--text-on-dark); }
.on-dark .lead, .on-dark p { color: var(--muted-on-dark); }
.on-dark h2, .on-dark h3 { color: var(--text-on-dark); }

/* ---------- 버튼 (각진 2px + 하단 룰 + 화살표) ---------- */
.btn {
  position: relative; gap: var(--sp-3); justify-content: center;
  min-height: 52px; padding: 0 var(--sp-5);
  font-family: var(--f-sans); font-size: 17px; font-weight: 600; text-decoration: none;
  border-radius: var(--dp-radius); border: 1.5px solid transparent;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn::after { content: ''; width: 18px; height: 10px; flex: none;
  background: linear-gradient(currentColor, currentColor) left center / 100% 1.5px no-repeat;
  clip-path: polygon(0 45%, 78% 45%, 60% 0, 68% 0, 100% 50%, 68% 100%, 60% 100%, 78% 55%, 0 55%);
  transition: transform var(--dur) var(--ease); }
.btn--solid { background: var(--walnut); color: var(--white); border-bottom: 3px solid var(--ink); }
.btn--ink { background: var(--ink); color: var(--text-on-dark); border-bottom: 3px solid var(--sand); }
.btn--line { background: transparent; color: var(--text-on-light); border-color: var(--text-on-light); }
.on-dark .btn--line, .cta .btn--line, .hero .btn--line { color: var(--text-on-dark); border-color: var(--text-on-dark); }
.btn:active { transform: translateY(1px); }

/* ---------- 헤더 ---------- */
.site-hdr { position: sticky; top: 0; z-index: 100; background: var(--paper);
  border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.site-hdr.is-scrolled { border-bottom-color: var(--border); box-shadow: 0 4px 0 rgba(44, 54, 57, .04); }
.site-hdr__in { max-width: 75rem; margin-inline: auto; padding: var(--sp-3) var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: var(--hdr-h); }
.brand { gap: var(--sp-3); text-decoration: none; color: var(--ink); }
.brand__mark { flex: none; color: var(--walnut); }
.brand__txt { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-family: var(--f-serif); font-weight: 500; font-size: 21px; letter-spacing: .02em; }
.brand__tag { font-size: 13px; font-variant: small-caps; letter-spacing: .12em; color: var(--muted-on-light); margin-top: 3px; }
.site-hdr .btn { min-height: 46px; padding: 0 var(--sp-4); font-size: 16px; }

/* ---------- 메인 히어로 H3 분할 매거진 ---------- */
.hero { position: relative; overflow: hidden; padding-inline: 0;
  display: grid; grid-template-columns: 5fr 7fr; min-height: 80vh; min-height: calc(100dvh - var(--hdr-h)); background: var(--ink); }
.hero__media { position: relative; overflow: hidden; clip-path: inset(0 0 0 0); animation: hero-clip 1.1s var(--ease) both; }
.hero__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s var(--ease); }
.hero__slide.is-on { opacity: 1; }
.hero__slide:not(.is-on) .hero__chip { visibility: hidden; }
.hero__slide img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center;
  transform: scale(1.06); transition: transform 7s linear; }
.hero__slide.is-on img { transform: scale(1); }
.hero__chip { position: absolute; left: var(--sp-5); bottom: var(--sp-5); z-index: 2;
  background: var(--ink); color: var(--text-on-dark); font-size: 14px; letter-spacing: .04em;
  padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--walnut); }
.hero__content { position: relative; max-width: 75rem; padding: var(--sp-8) var(--gutter) var(--sp-7);
  display: flex; flex-direction: column; justify-content: center; color: var(--text-on-dark); }
.hero__content::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: repeating-linear-gradient(0deg, var(--text-on-dark) 0 1px, transparent 1px 48px),
                    repeating-linear-gradient(90deg, var(--text-on-dark) 0 1px, transparent 1px 48px); }
.hero__content > * { position: relative; animation: rise .8s var(--ease) both; }
.hero__content > *:nth-child(2) { animation-delay: .12s; }
.hero__content > *:nth-child(3) { animation-delay: .24s; }
.hero__content > *:nth-child(4) { animation-delay: .36s; }
.hero__content > *:nth-child(5) { animation-delay: .48s; }
.hero h1 { max-width: 4.6em; max-width: 4.5ic; font-size: clamp(2.2rem, 7vw, 6rem); font-weight: 300; line-height: 1.12; color: var(--text-on-dark); margin-bottom: var(--sp-6); }
.hero__answer { font-size: clamp(1.02rem, 1.3vw, 1.15rem); color: var(--muted-on-dark); max-width: 30em; }
.hero__answer strong { color: var(--sand); font-weight: 600; }
.hero__acts { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.hero__dots { display: flex; gap: var(--sp-1); margin-top: var(--sp-6); }
.hero__dot { min-height: 48px; background: none; border: 0; padding: 0 var(--sp-2) 0 0; cursor: pointer; gap: var(--sp-2); color: var(--muted-on-dark); font-family: var(--f-sans); font-size: 13px; letter-spacing: .08em; transition: color var(--dur) var(--ease); }
.hero__dot[aria-current="true"] { color: var(--sand); }
.hero__dot::before { content: ''; width: 28px; height: 2px; background: var(--line-dark); transition: background-color var(--dur) var(--ease), width var(--dur) var(--ease); }
.hero__dot[aria-current="true"]::before { background: var(--sand); width: 40px; }

/* ---------- 전후 풀블리드 띠 (L1) ---------- */
.ba-band { padding-bottom: clamp(72px, 8vw, 112px); background: var(--paper); }
.ba-band__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ba-pic { position: relative; margin: 0; }
.ba-pic img, .photo img, .card img, .mosaic img, .row img, .case-fig img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; height: auto; }
.ba-pic img { aspect-ratio: 3 / 2; object-position: center 72%; }
.tag-chip { position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: 1;
  background: var(--ink); color: var(--text-on-dark); font-size: 13px; font-weight: 700; letter-spacing: .12em;
  padding: 6px var(--sp-3); border-radius: var(--dp-radius); }
.tag-chip--after { background: var(--walnut); color: var(--white); }
.ba-band__head { position: relative; z-index: 2; max-width: 69rem; margin: 0 auto; width: calc(100% - 2 * var(--gutter)); background: none !important; padding-inline: 0 !important;
  display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--sp-7); align-items: end;
  background: var(--white); padding: var(--sp-7) var(--sp-7) var(--sp-6); border-top: 3px solid var(--walnut); }
.ba-band__head p:last-child { margin-bottom: 0; }
.ba-band__head .eyebrow { grid-column: 1 / -1; }
.ba-band__head h2 { margin-bottom: 0; }

/* ---------- 문제 공감 A4 리듬 (L2) ---------- */
.rows { display: grid; gap: clamp(64px, 9vw, 128px); margin-top: clamp(48px, 6vw, 96px); }
.row { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.row__fig { grid-column: 2; grid-row: 1; margin: 0; position: relative; }
.row__txt { grid-column: 1; grid-row: 1; }
.row:nth-child(even) { grid-template-columns: 6fr 6fr; }
.row:nth-child(even) .row__fig { grid-column: 1; }
.row:nth-child(even) .row__txt { grid-column: 2; }
.row__no { font-family: var(--f-serif); font-size: 15px; color: var(--walnut); letter-spacing: .1em; margin-bottom: var(--sp-2); display: block; }
.diag { display: grid; gap: 0; list-style: none; border-top: 1px solid var(--border); }
.diag li { display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-3); padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); align-items: start; }
.diag svg { color: var(--walnut); margin-top: 4px; }
.diag b { font-size: 15px; color: var(--muted-on-light); font-weight: 600; letter-spacing: .04em; padding-top: 2px; }
.diag p { margin: 0; }

/* ---------- 공정 다크 섹션 (L8) ---------- */
.method { background: var(--ink); color: var(--text-on-dark); }
.method__bg { position: absolute; inset: 0; margin: 0; opacity: .08; pointer-events: none; }
.method__bg img { width: 100%; height: 100%; object-fit: cover; }
.method .wrap { position: relative; }
.method__bg { overflow: hidden; }
.method__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(48px, 8vw, 128px); align-items: start; }
.method__head { position: sticky; top: calc(var(--hdr-h) + var(--sp-7)); }
.method__head .stats { margin: clamp(48px, 5vw, 80px) 0 0; }
.stats { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0; align-items: start; }
.stat { display: flex; align-items: baseline; gap: var(--sp-5); border-top: 1.5px solid var(--line-dark); padding: var(--sp-4) 0; }
.stat__num { margin: 0; display: block; min-width: 2.8em; font-family: var(--f-serif); font-weight: 300; font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: 1; color: var(--sand); }
.stat__num small { font-size: .4em; margin-left: 2px; }
.stat__lbl { display: block; color: var(--muted-on-dark); font-size: 16px; }

/* 프로세스·타임라인 — 도면 치수선 + 계단형 콜아웃 (사용자 요청으로 재설계)
   상단 눈금 치수선 1개가 전체를 잇고, 각 단계는 노드에서 내려온 인출선 끝에 매달린다.
   단계마다 --i 만큼 한 칸씩 내려가 계단을 이룬다(좌표는 변수 계산, 하드코딩 없음). */
.proc-list { --tl-line: var(--border); --tl-accent: var(--walnut); --tl-step: 28px; --tl-gap: 36px;
  position: relative; display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; margin: 0; padding: 0; }
.method .proc-list, .on-dark .proc-list { --tl-line: var(--line-dark); --tl-accent: var(--sand); }
.proc-list::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: linear-gradient(var(--tl-line), var(--tl-line)) left top / 100% 2px no-repeat,
              repeating-linear-gradient(90deg, var(--tl-line) 0 1px, transparent 1px 12px) left top / 100% 10px no-repeat;
  transform-origin: left; transition: transform 1s var(--ease); }
.js .proc-list[data-reveal="draw"] { opacity: 1; transform: none; }
.js .proc-list[data-reveal="draw"]::before { transform: scaleX(0); }
.js .proc-list[data-reveal="draw"].is-in::before { transform: scaleX(1); }
.proc-step:nth-child(1) { --i: 0; } .proc-step:nth-child(2) { --i: 1; } .proc-step:nth-child(3) { --i: 2; }
.proc-step:nth-child(4) { --i: 3; } .proc-step:nth-child(5) { --i: 4; }
.proc-step { position: relative; min-width: 0; padding: calc(var(--i) * var(--tl-step) + var(--tl-gap)) var(--sp-5) 0 var(--sp-5); text-align: left; }
.proc-step::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; z-index: 1;
  background: var(--tl-accent); transform: rotate(45deg); }
.proc-step::after { content: ''; position: absolute; left: 0; top: 6px; width: 1.5px; height: calc(var(--i) * var(--tl-step) + var(--tl-gap) + 40px);
  background: var(--tl-accent); opacity: .7; transform-origin: top; transition: transform .7s var(--ease) .2s; }
.js .proc-step[data-reveal]::after { transform: scaleY(0); }
.js .proc-step[data-reveal].is-in::after { transform: scaleY(1); }
.proc-num { display: block; margin: 0 0 var(--sp-3); font-family: var(--f-serif); font-weight: 300; line-height: 1;
  font-size: clamp(2.6rem, 4vw, 3.6rem); color: transparent; -webkit-text-stroke: 1.2px var(--tl-accent); letter-spacing: .02em; }
.proc-num::before { content: 'STEP'; display: block; margin-bottom: var(--sp-2); font-family: var(--f-sans); font-size: 12px; font-weight: 600;
  letter-spacing: .24em; color: var(--tl-accent); -webkit-text-stroke: 0; }
.proc-step h3 { font-size: 1.15rem; margin-bottom: var(--sp-3); }
.proc-step p { font-size: 16px; margin-bottom: var(--sp-3); }
.proc-step__meta { display: inline-block; font-size: 14px; padding: 2px 0 2px var(--sp-2); border-left: 2px solid var(--tl-accent); color: var(--tl-accent); }
.lead + .proc-list, .stats + .proc-list { margin-top: var(--sp-7); }
.js .proc-step[data-reveal] { transition-delay: calc(var(--i, 0) * 90ms); }
@media (max-width: 1024px) {
  .proc-list { grid-template-columns: 1fr; row-gap: var(--sp-6); padding-left: 28px; }
  .proc-list::before { left: 0; right: auto; top: 0; bottom: 0; width: 10px; height: auto;
    background: linear-gradient(var(--tl-line), var(--tl-line)) left top / 2px 100% no-repeat,
                repeating-linear-gradient(180deg, var(--tl-line) 0 1px, transparent 1px 12px) left top / 10px 100% no-repeat;
    transform-origin: top; }
  .js .proc-list[data-reveal="draw"]::before { transform: scaleY(0); }
  .js .proc-list[data-reveal="draw"].is-in::before { transform: scaleY(1); }
  .proc-step { padding: 0 0 0 var(--sp-4); }
  .proc-step::before { left: -33px; top: 10px; }
  .proc-step::after { left: -24px; top: 14px; width: calc(24px + var(--sp-2)); height: 1.5px; transform-origin: left; }
  .js .proc-step[data-reveal]::after { transform: scaleX(0); }
  .js .proc-step[data-reveal].is-in::after { transform: scaleX(1); }
  .proc-num { font-size: 2.4rem; display: flex; align-items: baseline; gap: var(--sp-3); }
  .proc-num::before { margin: 0; }
}
/* 세로 치수선 변형 (메인 공정 섹션) */
  .proc-list--v { grid-template-columns: 1fr; row-gap: var(--sp-6); padding-left: 28px; }
  .proc-list--v::before { left: 0; right: auto; top: 0; bottom: 0; width: 10px; height: auto;
    background: linear-gradient(var(--tl-line), var(--tl-line)) left top / 2px 100% no-repeat,
                repeating-linear-gradient(180deg, var(--tl-line) 0 1px, transparent 1px 12px) left top / 10px 100% no-repeat;
    transform-origin: top; }
  .js .proc-list--v[data-reveal="draw"]::before { transform: scaleY(0); }
  .js .proc-list--v[data-reveal="draw"].is-in::before { transform: scaleY(1); }
  .proc-list--v .proc-step { padding: 0 0 0 var(--sp-4); }
  .proc-list--v .proc-step::before { left: -33px; top: 10px; }
  .proc-list--v .proc-step::after { left: -24px; top: 14px; width: calc(24px + var(--sp-2)); height: 1.5px; transform-origin: left; }
  .js .proc-list--v .proc-step[data-reveal]::after { transform: scaleX(0); }
  .js .proc-list--v .proc-step[data-reveal].is-in::after { transform: scaleX(1); }
  .proc-list--v .proc-num { font-size: 2.4rem; display: flex; align-items: baseline; gap: var(--sp-3); }
  .proc-list--v .proc-num::before { margin: 0; }

.proc-list--v { row-gap: clamp(40px, 4vw, 56px); }

/* ---------- 현장 유형 모자이크 (L7) ---------- */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: var(--sp-5); margin-top: clamp(48px, 6vw, 96px); list-style: none; }
.mosaic li { position: relative; min-width: 0; }
.mosaic li:first-child { grid-column: span 2; grid-row: span 2; }
.mosaic figure { margin: 0; height: 100%; display: flex; flex-direction: column; }
.mosaic img { flex: 1; min-height: 0; aspect-ratio: auto; height: 100%; }
.mosaic li:not(:first-child) img { aspect-ratio: 4 / 3; }
.mosaic figcaption { padding: var(--sp-4) 0 0; font-size: 16px; }
.mosaic figcaption b { display: block; font-family: var(--f-serif); font-weight: 500; font-size: 18px; }
.mosaic a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.mosaic__go { color: var(--walnut); font-weight: 600; font-size: 15px; margin-top: var(--sp-1); display: block; }

/* ---------- 비용·조건 (L5) ---------- */
.cost__fig { margin: 0 0 var(--sp-6); border-bottom: 2px solid var(--ink); }
.cost__fig img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--sp-5) 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: 16px; background: var(--white); min-width: 560px; }
.tbl caption { text-align: left; font-size: 15px; color: var(--muted-on-light); padding-bottom: var(--sp-3); caption-side: top; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.tbl thead th { background: var(--ink); color: var(--text-on-dark); font-weight: 600; font-size: 15px; }
.tbl tbody th { font-family: var(--f-serif); font-weight: 500; white-space: nowrap; }
.tbl tfoot td { font-size: 15px; color: var(--muted-on-light); background: var(--mist); }
.spec { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: var(--sp-6) 0 0; border-top: 2px solid var(--ink); }
.spec li { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.spec__k { display: block; font-size: 14px; color: var(--muted-on-light); letter-spacing: .04em; }
.spec__v { display: block; margin: 4px 0 0; font-family: var(--f-serif); font-size: 18px; }

/* ---------- FAQ 스티키 (L6) ---------- */
.faq { display: grid; grid-template-columns: 4fr 8fr; gap: var(--sp-8); align-items: start; }
.faq__head { position: sticky; top: calc(var(--hdr-h) + var(--sp-6)); }
.faq__head h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.qa { list-style: none; border-top: 2px solid var(--ink); }
.qa li { border-bottom: 1px solid var(--border); }
.qa summary { list-style: none; display: grid; grid-template-columns: 56px 1fr 24px; gap: var(--sp-3); align-items: center;
  min-height: 52px; padding: var(--sp-5) 0; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa__no { font-family: var(--f-serif); font-size: 15px; color: var(--walnut); letter-spacing: .08em; }
.qa summary h3 { margin: 0; }
.qa summary::after { content: ''; width: 12px; height: 12px; justify-self: end; margin-right: 6px; border-right: 1.5px solid var(--walnut); border-bottom: 1.5px solid var(--walnut);
  transform: translateY(-3px) rotate(45deg); transition: transform var(--dur) var(--ease); }
.qa details[open] > summary::after { transform: translateY(3px) rotate(-135deg); }
.qa details > p { margin: 0; padding: 0 36px var(--sp-6) calc(56px + var(--sp-3)); color: var(--muted-on-light); }
.qa details[open] > p { animation: rise .35s var(--ease) both; }

/* ---------- 하단 CTA (L4, 브랜드 색면) ---------- */
.cta { background: var(--walnut); color: var(--white); }
.cta--lines { overflow: hidden; }
.cta__grid { display: grid; grid-template-columns: 6fr 6fr; gap: var(--sp-7); align-items: stretch; }
.cta__fig { grid-column: 2; grid-row: 1; margin: calc(var(--sp-9) * -1 - 48px) 0 0; position: relative; z-index: 2; }
.cta__fig img { width: 100%; height: 100%; min-height: 320px; aspect-ratio: auto; object-fit: cover; border-bottom: 6px solid var(--ink); }
.cta__txt { grid-column: 1; grid-row: 1; }
.cta .eyebrow { color: var(--white); }
.cta h2 { color: var(--white); font-size: clamp(2rem, 4.4vw, 3.4rem); }
.cta p { color: rgba(255, 255, 255, .92); }
.cta__acts { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-4); }
.cta small { display: block; font-size: 15px; color: rgba(255, 255, 255, .88); }
.cta .btn--line { border-color: var(--white); color: var(--white); }

/* ---------- 세부페이지 ---------- */
.dhero { position: relative; overflow: hidden; padding-inline: 0; background: var(--ink); }
.dhero__media { position: relative; height: clamp(320px, 64vh, 640px); height: clamp(320px, 64dvh, 640px); margin: 0; }
.dhero__media img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 55%;
  animation: kb 1.2s var(--ease) both; }
.dhero__card { position: relative; z-index: 2; max-width: 69rem; margin: -140px auto 0; background: var(--paper);
  padding: var(--sp-7) var(--sp-7) var(--sp-6); border-top: 3px solid var(--walnut); animation: rise .8s .2s var(--ease) both; }
.dhero h1 { font-size: clamp(2.1rem, 5.4vw, 4.4rem); font-weight: 300; margin-bottom: var(--sp-5); }
.crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); list-style: none; font-size: 15px; color: var(--muted-on-light); margin-bottom: var(--sp-4); }
.crumb li + li::before { content: '/'; margin-right: var(--sp-2); color: var(--border); }
.crumb a { min-height: 44px; text-decoration: none; }
.answer { font-size: clamp(1.05rem, 1.5vw, 1.22rem); max-width: 42em; }
.meta-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin-top: var(--sp-5); }
.meta-chips li { font-size: 15px; padding: 6px var(--sp-3); background: var(--white); border-left: 3px solid var(--ink); }

.split { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-7); align-items: start; }
.split--rev { grid-template-columns: 5fr 7fr; }
.case-fig { margin: 0; position: relative; }
.case-fig figcaption { font-size: 15px; color: var(--muted-on-light); padding-top: var(--sp-3); border-bottom: 1px solid var(--border); padding-bottom: var(--sp-3); }
.case-fig--wide img { aspect-ratio: 16 / 7; object-position: center 62%; }
.diag-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; margin-top: clamp(48px, 6vw, 88px); }
.checklist--2 { grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); border-top: 0; }
.checklist--2 li { border-top: 2px solid var(--ink); border-bottom: 0; padding-top: var(--sp-4); }
.checklist--2 li::before { top: 22px; }
.checklist { list-style: none; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.checklist li { position: relative; padding: var(--sp-4) 0 var(--sp-4) 36px; border-bottom: 1px solid var(--border); }
.checklist li::before { content: ''; position: absolute; left: 2px; top: 20px; width: 18px; height: 10px;
  border-left: 1.5px solid var(--walnut); border-bottom: 1.5px solid var(--walnut); transform: rotate(-45deg); }
.checklist b { display: block; font-family: var(--f-serif); font-weight: 500; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-top: var(--sp-6); align-items: stretch; grid-auto-rows: 1fr; }
.compare__col { display: flex; flex-direction: column; height: 100%; min-width: 0; background: var(--white); padding: var(--sp-6); position: relative; border-top: 3px solid var(--border); }
.compare__col--on { border-top-color: var(--walnut); }
.compare__col::before, .card::before { content: ''; position: absolute; right: 10px; top: 10px; width: var(--corner); height: var(--corner);
  border-top: 1.5px solid var(--border); border-right: 1.5px solid var(--border); }
.compare__col h3 { margin-bottom: var(--sp-4); }
.compare__col ul { list-style: none; flex: 1; }
.compare__col li { padding: var(--sp-2) 0; border-bottom: 1px dashed var(--border); font-size: 17px; }
.compare__col .fit { margin-top: auto; padding-top: var(--sp-4); font-size: 16px; color: var(--walnut); font-weight: 600; }

.callout { background: var(--ink); color: var(--text-on-dark); padding: var(--sp-7); position: relative; }
.callout h2 { color: var(--text-on-dark); font-size: clamp(1.6rem, 3vw, 2.4rem); }
.callout ol { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); counter-reset: c; }
.callout li { counter-increment: c; border-top: 1.5px solid var(--line-dark); padding-top: var(--sp-4); color: var(--muted-on-dark); font-size: 17px; }
.callout li::before { content: 'C-0' counter(c); display: block; font-size: 14px; letter-spacing: .1em; color: var(--sand); margin-bottom: var(--sp-2); }
.callout li b { display: block; color: var(--text-on-dark); font-family: var(--f-serif); font-weight: 500; margin-bottom: var(--sp-1); }

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); align-items: stretch; grid-auto-rows: 1fr; list-style: none; margin-top: var(--sp-6); }
.card { position: relative; display: flex; flex-direction: column; height: 100%; min-width: 0; background: var(--white); border-top: 3px solid var(--ink);
  transition: border-color var(--dur) var(--ease); }
.card a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.card__img { overflow: hidden; }
.card__img img { transition: transform var(--dur) var(--ease); }
.card__body { flex: 1; display: flex; flex-direction: column; padding: var(--sp-5); }
.card__body h3 { font-size: 1.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__body p { font-size: 16px; color: var(--muted-on-light); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card__go { margin-top: auto; font-weight: 600; color: var(--walnut); font-size: 16px; }
.card--cta { background: var(--ink); color: var(--text-on-dark); border-top-color: var(--walnut); }
.card--cta .card__body { justify-content: center; padding: var(--sp-7) var(--sp-6); }
.card--cta h3 { color: var(--text-on-dark); }
.card--cta p { color: var(--muted-on-dark); }
.card--cta .card__go { color: var(--sand); margin-top: var(--sp-4); }


/* 세부페이지 보조 */
.qa--2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-7); align-items: stretch; }
.qa--2col li:last-child:nth-child(odd) { grid-column: span 2; }
.cta--lines { position: relative; }
.cta__lines { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--white); opacity: .14; pointer-events: none; }
.cta--lines .wrap { position: relative; }
.cta--lines .cta__txt { max-width: 47.5rem; }


/* ---------- 세부페이지 히어로 변형 ---------- */
.hsplit { position: relative; overflow: hidden; padding-inline: 0; display: grid; grid-template-columns: 6fr 6fr; min-height: 70vh; min-height: 70dvh; }
.hsplit__media { grid-column: 2; grid-row: 1; position: relative; margin: 0; }
.hsplit__media img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; animation: kb 1.2s var(--ease) both; }
.hsplit__txt { grid-column: 1; grid-row: 1; align-self: center; padding: var(--sp-8) clamp(24px, 5vw, 80px) var(--sp-8) max(var(--gutter), calc((100vw - 75rem) / 2 + var(--gutter))); animation: rise .8s .15s var(--ease) both; }
.hsplit h1, .hband h1, .htype h1 { font-size: clamp(2.1rem, 5vw, 4.2rem); font-weight: 300; margin-bottom: var(--sp-5); }
.hband { position: relative; overflow: hidden; padding-inline: 0; }
.hband__media { position: relative; margin: 0; height: clamp(320px, 62vh, 640px); height: clamp(320px, 62dvh, 640px); }
.hband__media img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; animation: kb 1.2s var(--ease) both; }
.hband__txt { background: var(--ink); color: var(--text-on-dark); padding: var(--sp-7) 0 var(--sp-8); }
.hband__txt .wrap { display: grid; grid-template-columns: 6fr 6fr; column-gap: var(--sp-7); align-items: end; animation: rise .8s .15s var(--ease) both; }
.hband__txt .crumb { grid-column: 1 / -1; }
.hband__txt .crumb ol, .hband__txt .crumb a { color: var(--muted-on-dark); }
.hband h1 { color: var(--text-on-dark); margin-bottom: 0; }
.hband .answer { color: var(--muted-on-dark); margin: 0; }
.htype { position: relative; overflow: hidden; padding: var(--sp-8) 0 0; }
.htype__grid { display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--sp-7); align-items: end; margin-bottom: var(--sp-7); animation: rise .8s var(--ease) both; }
.htype h1 { font-size: clamp(2.4rem, 6.4vw, 5.4rem); margin-bottom: 0; line-height: 1.1; }
.htype .answer { margin: 0; }
.htype__media { position: relative; margin: 0; }
.htype__media img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; animation: kb 1.2s var(--ease) both; }

/* 본문 사진 사이드형 */
.figside { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.figside .case-fig img { aspect-ratio: 4 / 3; }
.figside__txt .checklist { margin-top: var(--sp-5); }

/* 스펙 띠 */
.specs__head { max-width: 48.5rem; }
.specs { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: clamp(32px, 4vw, 56px); border-top: 2px solid var(--ink); }
.specs li { padding: var(--sp-5) var(--sp-5) var(--sp-5) 0; border-right: 1px solid var(--border); min-width: 0; }
.specs li + li { padding-left: var(--sp-5); }
.specs li:last-child { border-right: 0; }
.specs__k { display: block; font-size: 14px; letter-spacing: .06em; color: var(--walnut); font-weight: 600; }
.specs__v { display: block; margin-top: var(--sp-2); font-family: var(--f-serif); font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.35; }
.specs__d { display: block; margin-top: var(--sp-2); font-size: 15px; color: var(--muted-on-light); }

/* 밝은 배경 타임라인 섹션 */
.tl-light { background: var(--mist); }
.tl-light .proc-list { --tl-line: #9AA19C; }

/* 비교표 */
.tbl--cmp thead th:nth-child(3) { background: var(--walnut); }
.tbl__fit td { font-weight: 600; color: var(--walnut); }

/* 표 와이드: 좌 제목 / 우 표 */
.tblwide { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.tblwide .tbl-wrap { margin: 0; }
/* 스펙 2×2 */
.specs--g { grid-template-columns: repeat(2, 1fr); border-top: 0; column-gap: var(--sp-7); }
.specs--g li, .specs--g li + li { padding: var(--sp-5) 0; border-right: 0; border-top: 2px solid var(--ink); }
.specs--g .specs__v { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
/* 콜아웃 라이트 */
.callout--light { background: transparent; color: var(--text-on-light); border-left: 3px solid var(--walnut); padding: var(--sp-5) 0 var(--sp-5) clamp(24px, 4vw, 56px); }
.callout--light h2 { color: var(--text-on-light); }
.callout--light li { color: var(--muted-on-light); border-top-color: var(--border); }
.callout--light li b { color: var(--text-on-light); }
.callout--light li::before { color: var(--walnut); }
.callout--light .eyebrow { color: var(--walnut) !important; }
/* 체크리스트 격자형 */
.ckgrid .checklist { margin-top: clamp(24px, 3vw, 40px); }
.ckgrid > div { max-width: 48.5rem; }

/* FAQ 전폭 1열 */
.qa--wide { border-top-width: 1px; }
.qa--wide summary { grid-template-columns: 72px 1fr 24px; padding: var(--sp-6) 0; }
.qa--wide details > p { padding-left: calc(72px + var(--sp-3)); }

/* CTA 변형: l = 사진 왼쪽 / f = 풀블리드 사진 위 카드 */
.cta--l .cta__fig { grid-column: 1; }
.cta--l .cta__txt { grid-column: 2; }
.cta--f { position: relative; padding-block: clamp(96px, 12vw, 176px); background: var(--ink); }
.cta--f .cta__grid { display: block; position: static; }
.cta--f .cta__fig { position: absolute; inset: 0; margin: 0; z-index: 0; }
.cta--f .cta__fig img { height: 100%; min-height: 0; border: 0; }
.cta--f .cta__fig .tag-chip { left: auto; right: var(--sp-5); }
.cta--f .cta__txt { position: relative; z-index: 1; max-width: 36rem; background: var(--walnut); padding: clamp(28px, 4vw, 56px); border-bottom: 6px solid var(--ink); }

/* 연관 서비스 3×2 */
.cards--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- 상담 페이지 ---------- */
.chead { padding-block: var(--sp-8) var(--sp-7); }
.chead h1 { font-size: clamp(2.2rem, 6vw, 4.6rem); font-weight: 300; }
.chead__fig { margin: 0 0 var(--sp-6); }
.chead__fig img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }
.dial { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); grid-auto-rows: 1fr; margin-top: var(--sp-6); }
.dial a { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); height: 100%; min-width: 0;
  padding: var(--sp-6); text-decoration: none; background: var(--ink); color: var(--text-on-dark); border-bottom: 4px solid var(--walnut);
  transition: background-color var(--dur) var(--ease); }
.dial svg { color: var(--sand); }
.dial__lbl { font-size: 16px; color: var(--muted-on-dark); letter-spacing: .06em; }
.dial__num { font-family: var(--f-serif); font-weight: 300; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.1; color: var(--text-on-dark); }
.dial__sub { font-size: 16px; color: var(--sand); font-weight: 600; }
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); grid-auto-rows: 1fr; list-style: none; margin-top: var(--sp-6); }
.why li { display: flex; flex-direction: column; height: 100%; min-width: 0; background: var(--white); padding: var(--sp-6); border-top: 3px solid var(--ink); }
.why svg { color: var(--walnut); margin-bottom: var(--sp-4); }
.why h3 { font-size: 1.2rem; }
.why p { font-size: 16px; color: var(--muted-on-light); margin: 0; }

/* 404 */
.nf { min-height: 60vh; min-height: 60dvh; display: flex; align-items: center; }
.nf__in { max-width: 48.5rem; margin-inline: auto; padding: var(--sp-9) var(--gutter); }
.nf h1 { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 300; }
.nf__links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- 푸터 (고정 규격) ---------- */
.site-footer { background: var(--ink); color: var(--muted-on-dark); padding: var(--sp-8) 0 var(--sp-6); font-size: 16px; }
.site-footer .ft-inner { padding-inline: var(--gutter); }
.site-footer .ft-inner { max-width: 75rem; margin-inline: auto; display: grid;
  grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; align-items: start; text-align: left }
.ft-cluster__title { font-size: 15px; font-weight: 700; margin-bottom: 12px; color: var(--text-on-dark); font-family: var(--f-sans); }
.ft-cluster ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
.ft-cluster li { line-height: 1.6; }
.ft-cluster a { min-height: 32px; min-width: 0; display: inline; padding: 0 32px 0 0; line-height: 1.5; color: var(--text-on-dark); text-decoration: none; }
.ft-bottom { width: calc(100% - 2 * var(--gutter)); max-width: calc(75rem - 2 * var(--gutter)); margin-inline: auto; display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  border-top: 1px solid var(--line-dark); margin-top: 40px; padding-top: 16px }
.ft-bottom small { font-size: 14px; }

/* ---------- 모바일 고정 CTA ---------- */
.float-cta { position: fixed; right: var(--sp-5); z-index: 80; bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
  gap: var(--sp-2); padding: 0 var(--sp-5); min-height: 52px; background: var(--walnut); color: var(--white);
  text-decoration: none; font-weight: 600; border-bottom: 3px solid var(--ink); border-radius: var(--dp-radius);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.float-cta.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
.sticky-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; min-height: var(--sticky-h);
  padding: 8px var(--sp-4) calc(8px + env(safe-area-inset-bottom)); justify-content: center; align-items: center;
  background: var(--walnut); color: var(--white); text-decoration: none; font-weight: 700; font-size: 17px;
  border-top: 3px solid var(--ink); }

/* ---------- 스크롤 리빌 ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="wipe"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease); }
.js [data-reveal="wipe"].is-in { clip-path: inset(0 0 0 0); }
.js [data-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: calc(var(--i, 0) * 75ms); }
.js [data-stagger].is-in > * { opacity: 1; transform: none; }
.rule-grow { transform-origin: left; }
.js .rule-grow { transform: scaleX(0); transition: transform .9s var(--ease); }
.js .is-in .rule-grow, .js .rule-grow.is-in { transform: scaleX(1); }

@keyframes hero-clip { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes kb { from { transform: scale(1.08); } to { transform: scale(1); } }

/* ---------- 호버 (포인터 기기 전용) ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover { background: var(--ink); }
  .btn--ink:hover { background: var(--ink-2); }
  .btn--line:hover { background: var(--ink); color: var(--text-on-dark); border-color: var(--ink); }
  .cta .btn--line:hover, .hero .btn--line:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
  .btn:hover::after { transform: translateX(4px); }
  .card:hover { border-top-color: var(--walnut); }
  .card:hover .card__img img, .mosaic a:hover img { transform: scale(1.03); }
  .mosaic img { transition: transform var(--dur) var(--ease); }
  .dial a:hover { background: var(--ink-2); }
  .float-cta:hover { background: var(--ink); }
  .ft-cluster a:hover, .crumb a:hover { text-decoration: underline; }
  .qa summary:hover h3 { color: var(--walnut); }
}

/* ---------- 반응형 ---------- */
@media (max-width: 1151px) {
  :root { --gutter: 32px; }
}
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr 1fr; }
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .mosaic li:first-child { grid-row: span 1; }
  .faq { grid-template-columns: 1fr; gap: var(--sp-6); }
  .cards--3 { grid-template-columns: repeat(2, 1fr); }
  .specs { grid-template-columns: repeat(2, 1fr); }
  .specs li:nth-child(2) { border-right: 0; }
  .specs li:nth-child(3) { padding-left: 0; border-top: 1px solid var(--border); }
  .specs li:nth-child(4) { border-top: 1px solid var(--border); }
  .hsplit { grid-template-columns: 1fr 1fr; }
  .faq__head { position: static; }
  .method__grid { grid-template-columns: 1fr; }
  .method__head { position: static; }
  .callout ol { grid-template-columns: 1fr; }
  .why { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
  .dhero__card { margin-inline: var(--gutter); }
}
@media (max-width: 768px) {
  :root { --gutter: 20px; --hdr-h: 64px; }
  body { padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom)); }
  body.no-bar { padding-bottom: 0; }
  .br-mobile { display: inline; }
  .br-desktop { display: none; }
  .sec { padding-block: var(--sp-8); }
  .sec--tight { padding-block: var(--sp-7); }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__media { height: clamp(260px, 56vh, 520px); height: clamp(260px, 56dvh, 520px); }
  .hero__content { padding: var(--sp-7) var(--gutter); }
  .ba-band__pics { grid-template-columns: 1fr; }
  .ba-band { padding-bottom: var(--sp-7); }
  .ba-band__head { margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-5); grid-template-columns: 1fr; }
  .ba-band__head h2 { margin-bottom: clamp(20px, 2.4vw, 32px); }
  .row, .row:nth-child(even) { grid-template-columns: 1fr; gap: var(--sp-5); }
  .row__fig, .row:nth-child(even) .row__fig { grid-column: 1; grid-row: 1; }
  .row__txt, .row:nth-child(even) .row__txt { grid-column: 1; grid-row: 2; }
  .diag li { grid-template-columns: 26px 1fr; }
  .diag b { grid-column: 2; }
  .diag p { grid-column: 2; }
  .diag svg { grid-row: 1 / span 2; }
  .spec { grid-template-columns: 1fr; }
  .tbl { min-width: 0; }
  .tbl thead { display: none; }
  .tbl tr, .tbl th, .tbl td { display: block; }
  .tbl tbody tr { border-bottom: 2px solid var(--ink); padding: var(--sp-2) 0; }
  .tbl tbody th { white-space: normal; border-bottom: 0; padding-bottom: 0; }
  .tbl td { border-bottom: 0; padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
  .tbl td[data-label]::before { content: attr(data-label); display: block; font-size: 14px; color: var(--muted-on-light); }
    .qa--2col { grid-template-columns: 1fr; }
  .qa summary { grid-template-columns: 40px 1fr 20px; }
  .qa details > p { padding: 0 0 var(--sp-5); }
  .qa--2col li:last-child:nth-child(odd) { grid-column: span 1; }
  .cta__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .cta__fig { grid-column: 1; grid-row: 1; margin: 0; }
  .cta__fig img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .cta__txt { grid-column: 1; grid-row: 2; }
  .cta--l .cta__fig, .cta--l .cta__txt { grid-column: 1; }
  .cta--f { padding-block: 0 var(--sp-7); }
  .cta--f .cta__fig { position: relative; inset: auto; margin: 0 calc(var(--gutter) * -1); }
  .cta--f .cta__fig img { aspect-ratio: 4 / 3; height: auto; }
  .cta--f .cta__txt { margin-top: 0; }
  .qa--wide summary { grid-template-columns: 40px 1fr 20px; }
  .tblwide { grid-template-columns: 1fr; gap: 0; }
  .specs--g { grid-template-columns: 1fr; }
  .qa--wide details > p { padding-left: 0; }
  .split, .split--rev { grid-template-columns: 1fr; gap: var(--sp-5); }
  .diag-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hsplit { grid-template-columns: 1fr; min-height: 0; }
  .hsplit__media { grid-column: 1; grid-row: 1; height: clamp(260px, 56vh, 520px); height: clamp(260px, 56dvh, 520px); }
  .hsplit__txt { grid-column: 1; grid-row: 2; padding: var(--sp-6) var(--gutter) var(--sp-7); }
  .hband__media { height: clamp(260px, 56vh, 520px); height: clamp(260px, 56dvh, 520px); }
  .hband__txt .wrap { grid-template-columns: 1fr; row-gap: var(--sp-5); }
  .htype { padding-top: var(--sp-6); }
  .htype__grid { grid-template-columns: 1fr; row-gap: var(--sp-5); margin-bottom: var(--sp-5); }
  .htype__media { margin-inline: calc(var(--gutter) * -1); }
  .htype__media img { aspect-ratio: 4 / 3; }
  .figside { grid-template-columns: 1fr; gap: var(--sp-5); }
  .case-fig--wide img { aspect-ratio: 4 / 3; }
  .compare { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .cards, .cards--3 { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .dial { grid-template-columns: 1fr; }
  .why { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .dhero__media { height: clamp(260px, 56vh, 520px); height: clamp(260px, 56dvh, 520px); }
  .dhero__card { margin: -56px var(--gutter) 0; padding: var(--sp-6) var(--sp-5) var(--sp-5); }
  .callout { padding: var(--sp-6) var(--sp-5); }
  .float-cta { display: none; }
  .sticky-bar { display: flex; }
  .chead__fig { margin-inline: calc(var(--gutter) * -1); }
  .site-footer .ft-inner { grid-template-columns: 1fr; text-align: left }
  .ft-bottom { flex-direction: column; align-items: flex-start }
  .site-footer { padding-bottom: var(--sp-7); }
}
@media (max-width: 480px) {
  .brand__tag { display: none; }
  main h2 { font-size: 1.72rem; }
  main :is(.diag-grid, .figside__txt, .tblwide__head, .faq__head, .method__head, .split, .cta__txt) h2 { font-size: 1.62rem; }
  .brand__name { font-size: 19px; }
  .site-hdr .btn { padding: 0 var(--sp-3); }
  .site-hdr .btn::after { display: none; }
  .mosaic { grid-template-columns: 1fr; }
  .specs { grid-template-columns: 1fr; }
  .specs li, .specs li + li { padding: var(--sp-4) 0; border-right: 0; border-top: 1px solid var(--border); }
  .specs li:first-child { border-top: 0; }
  .checklist--2 { grid-template-columns: 1fr; }
  .mosaic li:first-child { grid-column: span 1; }
  .hero__acts .btn, .cta__acts .btn { width: 100%; }
  .tbl { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .proc-step[data-reveal]::after, .js .proc-list[data-reveal="draw"]::before { transform: none !important; }
  .js [data-reveal], .js [data-stagger] > *, .js .rule-grow { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero__slide img { transform: none !important; }
}