/* 하수구 변기 막힘 119 — 테마 3종(body.t-a·t-b·t-c). 구조는 공통, 토큰·면만 다르다.
   A = Pipe(c00d3961): 검정 캔버스·흰 글자·주황은 전화 행동에만·흑백 톤 사진·그림자 없음
   B = Airbnb(afd145ca): #f7f7f7 캔버스·흰 면·브랜드색은 로고/전화/선택에만·사진 카드 20px·출동 요청 바
   C = Vimeo(260ed304): 작업 장면 풀블리드+어두운 덮개·압축된 큰 제목·밝은/짙은 장 교차·청록은 행동에만 */
.t-a { --bg:#000; --surface:#141414; --surface2:#1c1c1c; --ink:#fff; --muted:#9a9a9a; --line:#262626; --accent:#E2572C; --accent-h:#c94a22; --accent-ink:#000; --display:"Wanted Sans Variable","Wanted Sans",sans-serif; --dw:500; --dt:-.012em; --rc:16px; --rb:8px; --imgf:grayscale(.55) contrast(1.06) brightness(.86); --focus:#fff; }
.t-b { --bg:#f7f7f7; --surface:#fff; --surface2:#fff; --ink:#222; --muted:#6a6a6a; --line:#ebebeb; --accent:#D7263D; --accent-h:#bc1c32; --accent-ink:#fff; --display:"SUIT Sub","SUIT Variable","Pretendard Variable",sans-serif; --dw:700; --dt:-.03em; --rc:20px; --rb:8px; --imgf:none; --focus:#222; }
.t-c { --bg:#fafcfd; --surface:#fff; --surface2:#dfe4ea; --ink:#141a20; --muted:#4c5864; --line:#dfe4ea; --accent:#17d5ff; --accent-h:#13b1d4; --accent-ink:#141a20; --display:"Wanted Sans Variable","Wanted Sans",sans-serif; --dw:700; --dt:-.04em; --rc:12px; --rb:12px; --imgf:none; --focus:#141a20; --dark:#141a20; --dark-ink:#fafcfd; --dark-muted:#b9c3cd; --dark-line:#2a3540; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; font-size: 16px; line-height: 1.62; color: var(--ink); background: var(--bg); word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; padding-bottom: 84px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: var(--dw); letter-spacing: var(--dt); line-height: 1.12; margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 20px; }
.nw { white-space: nowrap; }
.d { font-family: var(--display); font-weight: var(--dw); letter-spacing: var(--dt); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
[id] { scroll-margin-top: 132px; }
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip:focus { width: auto; height: auto; clip: auto; clip-path: none; left: 8px; top: 8px; background: var(--ink); color: var(--bg); padding: 10px 14px; z-index: 60; border-radius: 8px; }
.lead { color: var(--muted); font-size: 17px; margin-top: 12px; max-width: 760px; }
.sec { padding-block: 64px; }
.sec h2 { font-size: clamp(28px, 3.8vw, 44px); }

/* 상단 */
.hdr { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.hdr-in { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; min-height: 64px; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--display); font-weight: var(--dw); letter-spacing: var(--dt); font-size: 19px; white-space: nowrap; min-height: 44px; }
.logo em { font-style: normal; color: var(--accent); }
.t-b .logo i { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 12px; letter-spacing: 0; }
.gnb { order: 3; width: 100%; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 0 8px; }
.gnb::-webkit-scrollbar { display: none; }
.gnb a { flex: none; text-decoration: none; font-size: 15px; font-weight: 600; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--rb); white-space: nowrap; }
.hdr-call { display: none; margin-left: 8px; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--rb); background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.hdr-call:hover { background: var(--accent-h); }

/* 행동 */
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 20px; border-radius: var(--rb); font-weight: 700; font-size: 16px; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.btn svg { flex: none; }
.btn-call { background: var(--accent); color: var(--accent-ink); }
.btn-call:hover { background: var(--accent-h); }
.btn-ghost { border: 1px solid var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--surface2); }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.phone { display: inline-flex; flex-direction: column; margin-top: 24px; text-decoration: none; }
.phone small { font-size: 13px; color: var(--muted); }
.phone b { font-family: var(--display); font-weight: var(--dw); letter-spacing: var(--dt); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; white-space: nowrap; }

/* ── 첫 화면 A: 글 + 흑백 톤 세로 사진 패널 */
.hero-a { padding-block: 24px 56px; }
.hero-a .grid { display: grid; gap: 28px; }
.hero-a .ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rc); filter: var(--imgf); }
.hero-a h1 { font-size: clamp(40px, 6.4vw, 80px); line-height: 1.08; margin-top: 14px; }
.hero-a .sub { color: var(--muted); font-size: 17px; margin-top: 18px; max-width: 540px; }
.hero-a .btn-ghost { border-color: #3a3a3a; }
.facts { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid var(--line); }
.facts li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.facts b { color: var(--ink); font-weight: 600; }

/* ── 첫 화면 B: 제목 + 사진 카드 + 출동 요청 바 */
.hero-b { padding-block: 28px 32px; }
.hero-b h1 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.15; }
.hero-b .sub { color: var(--muted); font-size: 17px; margin-top: 12px; max-width: 620px; }
.hero-b .ph { position: relative; margin: 24px 0 0; }
.hero-b .ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rc); }
.badge { position: absolute; top: 14px; left: 14px; background: #fff; color: #222; border-radius: 4px; padding: 6px 10px; font-size: 12px; font-weight: 700; letter-spacing: .02em; filter: drop-shadow(rgba(0,0,0,.25) 0 2px 6px); }
.reqbar { position: relative; z-index: 2; margin: -48px 12px 0; background: #fff; border-radius: 20px; padding: 8px; box-shadow: rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.04) 0 2px 6px, rgba(0,0,0,.1) 0 4px 8px; display: grid; }
.seg { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.seg b { display: block; font-size: 12px; font-weight: 700; }
.seg span { color: var(--muted); font-size: 15px; }
.go { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; margin: 6px; border-radius: 14px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 700; font-size: 17px; }
.go:hover { background: var(--accent-h); }
.mini { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; color: var(--muted); font-size: 14px; }
.mini b { color: var(--ink); }
.mini a { font-weight: 700; color: var(--ink); }

/* ── 첫 화면 C: 풀블리드 작업 사진 + 덮개 */
.t-c.home .hdr { position: absolute; left: 0; right: 0; top: 0; background: transparent; border-bottom: 0; color: var(--dark-ink); }
.t-c.home .gnb a { border-color: rgba(255,255,255,.35); }
.t-c .hdr { background: var(--dark); color: var(--dark-ink); border-bottom-color: var(--dark-line); }
.t-c .gnb a { border-color: var(--dark-line); }
.hero-c { position: relative; min-height: 92svh; display: flex; align-items: flex-end; color: var(--dark-ink); overflow: hidden; background: var(--dark); }
.hero-c picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-c::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,26,32,.62) 0%, rgba(20,26,32,.35) 38%, rgba(20,26,32,.9) 100%); }
.hero-c .in { position: relative; z-index: 2; padding-block: 150px 40px; }
.hero-c .live { color: #dfe4ea; background: rgba(255,255,255,.14); padding: 6px 12px; border-radius: 9999px; }
.hero-c h1 { font-size: clamp(42px, 7.2vw, 92px); line-height: 1; letter-spacing: -.05em; margin-top: 18px; max-width: 15ch; }
.hero-c .sub { font-size: 18px; margin-top: 18px; max-width: 580px; color: #dfe4ea; }
.hero-c .btn-ghost { border-color: rgba(255,255,255,.7); color: var(--dark-ink); }
.hero-c .btn-ghost:hover { background: rgba(255,255,255,.12); }
.trio { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 28px; margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.22); font-size: 14px; color: #dfe4ea; }
.trio b { display: block; font-family: var(--display); font-weight: var(--dw); font-size: 22px; letter-spacing: -.03em; color: var(--dark-ink); }
.t-c .sec-dark { background: var(--dark); color: var(--dark-ink); }
.t-c .sec-dark .lead, .t-c .sec-dark figcaption, .t-c .sec-dark .muted { color: var(--dark-muted); }

/* 증상 고르기 */
.picker { margin-top: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { font: inherit; font-weight: 600; font-size: 15px; min-height: 44px; padding: 8px 16px; border-radius: var(--rb); border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; }
.t-a .chips button { border-color: #3a3a3a; }
.chips button:hover { background: var(--surface2); }
.chips button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.panel { margin-top: 14px; background: var(--surface); border-radius: var(--rc); padding: 24px; }
.t-c .panel { background: var(--surface2); }
.js .panel[hidden] { display: none; }
.panel dl { margin: 0; display: grid; gap: 14px; }
.panel dt { font-size: 13px; font-weight: 700; color: var(--muted); }
.panel dd { margin: 4px 0 0; }
.panel-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; }
.panel-go a.more { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--accent); padding-block: 10px; }
.panel-go span { color: var(--muted); font-size: 14px; }

/* 서비스 카드 */
.svcs { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.svc { display: grid; text-decoration: none; }
.svc img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rc); filter: var(--imgf); }
.t-b .svc img { aspect-ratio: 1 / 1; }
.svc b { font-family: var(--display); font-weight: var(--dw); letter-spacing: var(--dt); font-size: 18px; margin-top: 10px; line-height: 1.3; }
.svc span { color: var(--muted); font-size: 14px; }
.t-a .svc { background: var(--surface); border-radius: var(--rc); overflow: hidden; padding-bottom: 14px; }
.t-a .svc img { border-radius: 0; }
.t-a .svc b, .t-a .svc span { padding-inline: 14px; }
.svc-more { margin-top: 18px; color: var(--muted); font-size: 15px; }
.svc-more a { font-weight: 700; color: var(--ink); }

/* 현장 기록 */
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.mosaic figure { margin: 0; }
.mosaic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rc); filter: var(--imgf); }
.mosaic figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.45; }
.field-two { display: grid; gap: 40px; margin-top: 48px; }
.field-two h3 { font-size: 22px; }
.process { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.process figure { margin: 0; }
.process img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--rc); filter: var(--imgf); }
.process figcaption { font-size: 13px; line-height: 1.45; margin-top: 8px; color: var(--muted); }
.process figcaption b { display: block; color: var(--ink); font-size: 15px; }
.t-c .sec-dark .process figcaption b, .t-c .sec-dark .equip b { color: var(--dark-ink); }
.equip { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 14px; }
.equip li { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; }
.equip img { width: 72px; height: 72px; object-fit: cover; border-radius: calc(var(--rc) * .6); filter: var(--imgf); }
.equip p { font-size: 14px; color: var(--muted); }

/* 약속·요금·질문·후기 */
.two { display: grid; gap: 48px; }
.promises { list-style: none; padding: 0; margin: 20px 0 0; border-top: 1px solid var(--line); }
.promises li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.promises b { display: block; font-size: 17px; }
.promises p { color: var(--muted); font-size: 15px; margin-top: 2px; }
.price { margin-top: 24px; background: var(--surface); border-radius: var(--rc); padding: 22px; }
.t-c .price { background: var(--surface2); }
.price .l { font-size: 13px; font-weight: 700; color: var(--muted); }
.price .n { font-family: var(--display); font-weight: var(--dw); letter-spacing: var(--dt); font-size: 32px; line-height: 1.2; margin-top: 2px; }
.price p { margin-top: 6px; }
.price .when { margin-top: 12px; font-size: 14px; color: var(--muted); }
.price .when b { display: block; color: var(--ink); }
.faq { margin-top: 20px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 40px 16px 0; font-weight: 700; position: relative; min-height: 52px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--muted); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 18px; color: var(--muted); }
.h-rv { margin-top: 64px; }
.reviews { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 18px; }
.reviews blockquote { margin: 0; border-left: 2px solid var(--accent); padding: 2px 0 2px 16px; }
.reviews cite { display: block; margin-top: 8px; font-style: normal; font-size: 13px; color: var(--muted); }

/* 출동 지역·연락 */
.area-grid { display: grid; gap: 14px; margin-top: 26px; }
.district { background: var(--surface); border-radius: var(--rc); padding: 20px; }
.t-c .sec-dark .district { background: #1d2630; }
.district h3 { font-size: 19px; }
.district p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.t-c .sec-dark .district p { color: var(--dark-muted); }
.final { margin-top: 36px; }

/* 바닥·고정 바 */
.ftr { border-top: 1px solid var(--line); padding-block: 28px 32px; font-size: 14px; color: var(--muted); }
.t-c .ftr { background: var(--dark); color: var(--dark-muted); border-top-color: var(--dark-line); }
.ftr .nm { font-family: var(--display); font-weight: var(--dw); letter-spacing: var(--dt); color: var(--ink); font-size: 17px; }
.t-c .ftr .nm, .t-c .ftr a { color: var(--dark-ink); }
.ftr p + p { margin-top: 4px; }
.ftr a { font-weight: 700; color: var(--ink); }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
.t-c .dock { background: var(--dark); border-top-color: var(--dark-line); }
.dock a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: var(--rb); font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; }
.dock .call { background: var(--accent); color: var(--accent-ink); }
.dock .sms { border: 1px solid var(--line); color: var(--ink); }
.t-b .dock .sms { border-color: #222; }
.t-c .dock .sms { border-color: rgba(255,255,255,.5); color: var(--dark-ink); }

/* 서비스 문서 */
.crumb { display: flex; align-items: center; gap: 4px; padding-top: 14px; font-size: 14px; color: var(--muted); }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-right: 6px; font-weight: 700; color: var(--ink); text-decoration: none; }
.svc-top { display: grid; gap: 28px; padding-block: 8px 48px; }
.svc-top h1 { font-size: clamp(36px, 6vw, 64px); margin-top: 12px; }
.svc-top .ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rc); filter: var(--imgf); }
.svc-top .ph figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.t-c .svc-band { background: var(--dark); color: var(--dark-ink); }
.t-c .svc-band .lead, .t-c .svc-band .crumb, .t-c .svc-band .phone small, .t-c .svc-band .ph figcaption, .t-c .svc-band .facts li { color: var(--dark-muted); }
.t-c .svc-band .crumb a, .t-c .svc-band .facts b { color: var(--dark-ink); }
.t-c .svc-band .facts, .t-c .svc-band .facts li { border-color: var(--dark-line); }
.t-c .svc-band .btn-ghost { border-color: rgba(255,255,255,.7); color: var(--dark-ink); }
.svc-body { display: grid; gap: 48px; padding-block: 48px 72px; max-width: 860px; }
.svc-body h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 14px; }
.ticks { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.ticks li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.causes { margin: 0; display: grid; gap: 16px; }
.causes dt { font-weight: 700; }
.causes dd { margin: 2px 0 0; color: var(--muted); }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; display: grid; gap: 10px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: baseline; }
.steps li::before { content: counter(s); font-family: var(--display); font-weight: var(--dw); color: var(--muted); font-size: 18px; }
.gal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gal figure { margin: 0; }
.gal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rc); filter: var(--imgf); }
.gal figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.others ul { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.others a { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; text-decoration: none; min-height: 72px; }
.others img { width: 88px; height: 66px; object-fit: cover; border-radius: calc(var(--rc) * .6); filter: var(--imgf); }
.others span { font-family: var(--display); font-weight: var(--dw); letter-spacing: var(--dt); font-size: 18px; }
.others p a { display: inline; font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }

@media (min-width: 480px) { .reqbar { margin-inline: 24px; } }
@media (min-width: 640px) {
  .svcs { grid-template-columns: repeat(2, 1fr); }
  .mosaic { grid-template-columns: repeat(3, 1fr); }
  .reviews { grid-template-columns: 1fr 1fr; }
  .area-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .others ul { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  body { padding-bottom: 0; font-size: 17px; }
  .wrap { padding-inline: 40px; }
  [id] { scroll-margin-top: 84px; }
  .hdr-in { flex-wrap: nowrap; min-height: 72px; }
  .gnb { order: 0; width: auto; margin-left: auto; padding: 0; overflow: visible; gap: 2px; }
  .gnb a { border: 0; font-size: 15px; }
  .gnb a:hover { background: var(--surface2); }
  .t-c.home .gnb a:hover, .t-c .gnb a:hover { background: rgba(255,255,255,.12); }
  .hdr-call { display: inline-flex; }
  .dock { display: none; }
  .sec { padding-block: 88px; }
  .hero-a { padding-block: 48px 88px; }
  .hero-a .grid { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 64px; }
  .hero-a .ph { order: 2; }
  .hero-a .ph img { max-height: 660px; }
  .hero-b { padding-block: 48px 40px; }
  .hero-b .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: center; }
  .hero-b .ph { margin: 0; grid-column: 2; grid-row: 1; }
  .hero-b .ph img { aspect-ratio: 5 / 6; max-height: 620px; }
  .reqbar { grid-column: 1 / 3; width: min(100%, 940px); margin: -56px auto 0; grid-template-columns: 1fr 1fr 1fr auto; align-items: center; border-radius: 9999px; padding: 6px; }
  .seg { border-bottom: 0; border-right: 1px solid var(--line); }
  .seg:nth-child(3) { border-right: 0; }
  .go { margin: 0; border-radius: 9999px; padding: 0 24px; }
  .mini { grid-column: 1 / 3; justify-content: center; }
  .hero-c .in { padding-block: 180px 72px; }
  .panel dl { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .svcs { grid-template-columns: repeat(4, 1fr); }
  .mosaic { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .field-two { grid-template-columns: 1.3fr 1fr; gap: 64px; }
  .two { grid-template-columns: 1fr 1.1fr; gap: 72px; }
  .reviews { grid-template-columns: repeat(4, 1fr); }
  .final { display: flex; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
  .final .cta { margin-top: 0; }
  .svc-top { grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; padding-block: 16px 72px; }
  .svc-top .ph img { max-height: 620px; }
}
@media (prefers-reduced-motion: reduce) { .live i { animation: none; } .btn { transition: none; } }