/* 에이스홈픽스 싱크대 배수구 교체 — 휴대폰 우선. 스테인리스처럼 밝은 회청색 바탕 + 코발트 파랑 + 검정 선.
   제목은 Hahmlet(각진 명조 계열), 본문은 Gothic A1. 사진이 먼저 나오는 첫 화면, 테두리 알약 메뉴, 줄 목록 증상 바로가기,
   검은 선 액자 카드, 촬영 예시 사진이 들어간 문의 상자, 글자 흐름으로 이어지는 지역 목록.
   숨은 조작 없음: 가로로 넘기는 영역·슬라이더·눌러야 바뀌는 사진을 쓰지 않는다. */
:root{
  --ink:#10151c; --ink2:#4a5563; --bg:#eef1f4; --paper:#fff; --line:#cfd6de; --line2:#10151c;
  --co:#1746c4; --co-d:#0f3494; --co-l:#e6ecfb; --steel:#dfe4ea; --sun:#ffd23f; --red:#d4231b;
  --fb:'Gothic A1',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --fd:'Hahmlet','Gothic A1','Apple SD Gothic Neo','Malgun Gothic',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{font-family:var(--fb);background:var(--bg);color:var(--ink);font-size:16px;line-height:1.75;word-break:keep-all;overflow-wrap:anywhere;padding-bottom:70px}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
ul,ol{list-style:none}
b,strong{font-weight:700}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--sun);color:var(--ink);padding:10px 14px;z-index:99;font-weight:700}
.skip:focus{left:8px;top:8px}

/* 머리: 흰 바탕, 로고 | 키워드, 아래 테두리 알약 메뉴 2열(넓으면 한 줄) */
.top{background:var(--paper);border-bottom:2px solid var(--line2)}
.top-in{max-width:1120px;margin:0 auto;padding:12px 16px 8px}
.brand{display:flex;align-items:center;flex-wrap:wrap;gap:2px 0;text-decoration:none;color:var(--ink)}
.brand i{width:24px;height:24px;border-radius:6px;background:var(--co);position:relative;flex:none;margin-right:8px}
.brand i::before{content:'';position:absolute;inset:6px;border-radius:50%;border:2px solid #fff}
.brand i::after{content:'';position:absolute;left:11px;top:15px;width:2px;height:9px;background:#fff}
.brand b{font-family:var(--fd);font-weight:800;font-size:19px;white-space:nowrap;line-height:1.3}
.brand small{font-size:14px;font-weight:700;color:var(--co);white-space:nowrap;line-height:1.3;border-left:2px solid var(--line);margin-left:10px;padding-left:10px}
.menu{max-width:1120px;margin:0 auto;padding:4px 16px 12px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.menu a{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 14px;border:1.5px solid var(--line2);border-radius:999px;text-decoration:none;font-weight:700;font-size:14.5px;background:var(--paper)}
.menu a:hover{background:var(--co);border-color:var(--co);color:#fff}
.mi{width:18px;height:18px;flex:none;background:var(--co);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.menu a:hover .mi{background:#fff}
.mi01{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c4 5 7 8.5 7 12a7 7 0 0 1-14 0c0-3.5 3-7 7-12z'/%3E%3C/svg%3E")}
.mi02{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14H3zM5 7v10h6V7zm8 0v10h6V7z'/%3E%3C/svg%3E")}
.mi03{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h14v18l-3-2-2 2-2-2-2 2-2-2-3 2zm3 5v2h8V8zm0 4v2h8v-2z'/%3E%3C/svg%3E")}
.mi04{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7zm0 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E")}

/* 공통 틀 */
main{display:block}
.sec,.doc>.sec{max-width:1120px;margin:0 auto;padding:42px 16px 6px}
.h2{font-family:var(--fd);font-weight:800;font-size:24px;line-height:1.35;color:var(--ink);margin-bottom:10px;padding-top:12px;border-top:3px solid var(--line2);display:block}
.h2 a{text-decoration:none}
.sec h3{font-size:17px;margin:18px 0 6px}
.sec p+p{margin-top:10px}
.sub{color:var(--ink2);margin-bottom:16px}
.more{display:flex;justify-content:space-between;align-items:center;min-height:52px;margin-top:16px;padding:0 18px;border:1.5px solid var(--line2);background:var(--paper);font-weight:700;text-decoration:none}
.more::after{content:'';width:22px;height:2px;background:var(--ink)}
.more:hover{background:var(--ink);color:#fff}
.more:hover::after{background:#fff}
.upd{font-size:13px;color:var(--ink2);margin-top:10px}

/* 문의 버튼: 본문 [문자보내기][번호] — 검은 테두리 안 네모 두 칸 */
.cta{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:18px;border:2px solid var(--line2)}
.cta a{display:flex;align-items:center;justify-content:center;min-height:56px;padding:8px;font-weight:700;font-size:17px;text-decoration:none;text-align:center;line-height:1.25}
.b-sms{background:var(--co);color:#fff}
.b-tel{background:var(--paper);color:var(--ink);border-left:2px solid var(--line2)}
.b-sms:hover{background:var(--co-d)}
.b-tel:hover{background:var(--sun)}

/* 첫 화면: 사진 액자가 먼저, 그 아래 제목·첫 문단·버튼 */
.hero{max-width:1120px;margin:0 auto;padding:16px 16px 0}
.hero-ph{display:block;text-decoration:none;color:var(--ink);background:var(--paper);border:2px solid var(--line2);padding:6px}
.hero-ph .ba figure{aspect-ratio:1}
.hero-cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px;padding:8px 4px 2px;font-size:14px}
.hero-cap b{font-size:14.5px}
.hero-cap span{color:var(--co);font-weight:700;white-space:nowrap}
.hero-cap span::after{content:' ↗'}
.hero-t{padding-top:18px}
.hero-k{font-size:13px;font-weight:700;color:var(--ink2);letter-spacing:.02em}
.hero-k::before{content:'';display:inline-block;width:18px;height:2px;background:var(--co);vertical-align:middle;margin-right:6px}
.hero h1{font-family:var(--fd);font-weight:800;font-size:34px;line-height:1.22;margin-top:4px}
.hero h1 small{display:inline-block;font-family:var(--fb);font-weight:700;font-size:17px;line-height:1.45;color:var(--co);margin-top:8px}
.hero .lead{margin-top:12px;font-size:15.5px;color:#27313d}

/* 전후 사진: 나란히, 위쪽 모서리 이름표 */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.ba figure{position:relative;overflow:hidden;background:var(--steel);aspect-ratio:3/4}
.ba img{width:100%;height:100%;object-fit:cover}
.ba figcaption{position:absolute;right:0;top:0;padding:3px 9px;font-size:12.5px;font-weight:700;background:var(--ink);color:#fff}
.ba .aft figcaption{background:var(--sun);color:var(--ink)}

/* 증상 바로가기: 한 줄씩 목록(분류 → 증상 → 설명), 넓으면 2열 */
.sym{display:grid;grid-template-columns:1fr;border-top:1.5px solid var(--line2)}
.sy{display:grid;grid-template-columns:3.4em 1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line);text-decoration:none}
.sy em{grid-row:1 / span 2;font-style:normal;font-size:12.5px;font-weight:700;color:var(--co);border:1.5px solid var(--co);text-align:center;padding:2px 0;line-height:1.4}
.sy b{font-size:16.5px;line-height:1.4}
.sy span{grid-column:2;font-size:13.5px;color:var(--ink2);line-height:1.45}
.sy::after{content:'';grid-column:3;grid-row:1 / span 2;width:9px;height:9px;border-right:2px solid var(--ink);border-top:2px solid var(--ink);transform:rotate(45deg);margin-right:6px}
.sy:hover{background:var(--co-l)}

/* 사례 카드: 검은 선 액자(사진 → 작업 종류 → 제목 → 증상 → 작업 범위), 카드 전체 링크 */
.cards{display:grid;grid-template-columns:1fr;gap:16px}
.cc{display:flex;flex-direction:column;background:var(--paper);border:1.5px solid var(--line2);text-decoration:none;color:var(--ink)}
.cc:hover{box-shadow:5px 5px 0 var(--co)}
.cc .ba{padding:6px 6px 0}
.cc .ba figure{aspect-ratio:1}
.cc-b{display:flex;flex-direction:column;padding:10px 14px 14px}
.cc-kind{font-size:12.5px;font-weight:700;color:var(--co);letter-spacing:.02em}
.cc-kind::before{content:'■ '}
.cc-t{font-family:var(--fd);font-weight:800;font-size:18px;line-height:1.4;margin:4px 0 6px}
.cc-r{display:block;padding:8px 0 0;margin-top:8px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.6;color:var(--ink2)}
.cc-r em{display:block;font-style:normal;font-weight:700;font-size:12.5px;color:var(--ink);margin-bottom:2px}
.cc-go{margin-top:12px;align-self:flex-start;font-weight:700;font-size:14px;background:var(--ink);color:#fff;padding:4px 12px}

/* 서비스 카드: 사진 위, 번호와 이름 아래 — 휴대폰에서도 세로 카드 */
.svs{display:grid;grid-template-columns:1fr;gap:14px}
.sv{display:flex;flex-direction:column;background:var(--paper);border:1.5px solid var(--line2);text-decoration:none;color:var(--ink);overflow:hidden}
.sv-img{position:relative;display:block;background:var(--steel)}
.sv-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.sv-n{position:absolute;left:0;bottom:0;background:var(--co);color:#fff;font-family:var(--fd);font-weight:800;font-size:20px;padding:2px 12px}
.sv-b{display:flex;flex-direction:column;padding:12px 14px 14px}
.sv-b strong{font-family:var(--fd);font-weight:800;font-size:19px;line-height:1.35}
.sv-s{font-size:14px;font-weight:700;color:var(--co);margin-top:4px;line-height:1.45}
.sv-p{font-size:14.5px;color:var(--ink2);margin-top:6px;line-height:1.55}
.sv-go{margin-top:10px;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.sv:hover{box-shadow:5px 5px 0 var(--co)}

/* 교체 범위 비교: 표처럼 세 줄 */
.lead-a{font-size:16.5px;margin-bottom:16px}
.lead-a b{box-shadow:inset 0 -.45em 0 var(--sun)}
.rng{display:grid;grid-template-columns:1fr;border:1.5px solid var(--line2);background:var(--paper)}
.rg{display:grid;grid-template-columns:1fr;gap:3px;padding:14px 16px;text-decoration:none;border-bottom:1px solid var(--line);color:var(--ink)}
.rg:last-child{border-bottom:0}
.rg strong{font-family:var(--fd);font-weight:800;font-size:17.5px}
.rg span{font-size:14.5px;color:var(--ink2)}
.rg-w em{font-style:normal;font-weight:700;color:var(--co);margin-right:6px}
.rg:hover{background:var(--co-l)}

/* 질문 카드: 배지 → 질문 → 결론 → 조건 → 링크 */
.qas{display:grid;grid-template-columns:1fr;gap:12px}
.qa{background:var(--paper);padding:16px;border-left:5px solid var(--co)}
.qa-tag{display:inline-block;font-size:12.5px;font-weight:700;color:var(--ink);background:var(--sun);padding:0 8px}
.qa h3{font-family:var(--fd);font-weight:800;font-size:17.5px;line-height:1.45;margin:8px 0 6px}
.qa p{font-size:14.5px;color:var(--ink2)}
.qa .qa-a{font-size:15.5px;color:var(--ink);font-weight:700;margin-bottom:6px}
.qa a{display:inline-block;margin-top:10px;font-weight:700;color:var(--co);font-size:14.5px}

/* 작업 순서: 점선 세로 줄 */
.tl{position:relative;padding-left:26px}
.tl::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;border-left:2px dashed var(--co)}
.tl li{position:relative;display:grid;grid-template-columns:1fr 100px;gap:12px;align-items:start;padding:10px 0}
.tl li::before{content:'';position:absolute;left:-24px;top:15px;width:14px;height:14px;background:var(--co);border:3px solid var(--bg)}
.tl-img{order:2;overflow:hidden;aspect-ratio:1;border:1.5px solid var(--line2)}
.tl-img img{width:100%;height:100%;object-fit:cover}
.tl-t{font-size:14.5px;color:var(--ink2);line-height:1.6}
.tl-t b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:2px}

/* 문의 상자: 흰 판 + 파란 점선 테두리 + 실제 사진 촬영 예시 */
.ask{max-width:1120px;margin:44px auto 0;padding:0 16px}
.ask-in{background:var(--paper);border:2px dashed var(--co);padding:22px 16px 20px}
.ask-k{font-size:13px;font-weight:700;color:var(--co)}
.ask h2{font-family:var(--fd);font-weight:800;font-size:24px;line-height:1.35;margin:2px 0 6px}
.ask-t{color:var(--ink2)}
.ask-ex{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.ask-ex figure{border:1.5px solid var(--line2);background:var(--paper)}
.ask-ex img{width:100%;aspect-ratio:1;object-fit:cover}
.ask-ex figcaption{padding:8px 10px 10px;font-size:13.5px;color:var(--ink2);line-height:1.5}
.ask-ex figcaption b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.ask-how{margin-top:14px;font-size:14.5px;background:var(--co-l);padding:10px 12px}
.ask-note{font-size:13px;color:var(--ink2);margin-top:10px}

/* 자주 묻는 질문: 번호 + 꺾쇠 */
.faq{counter-reset:q;border-top:1.5px solid var(--line2)}
.faq details{counter-increment:q;border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:14px 40px;font-weight:700;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:counter(q,decimal-leading-zero);position:absolute;left:2px;top:14px;font-family:var(--fd);font-weight:800;color:var(--co)}
.faq summary::after{content:'';position:absolute;right:12px;top:20px;width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(-135deg);top:24px}
.faq details p{padding:0 8px 16px 40px;color:var(--ink2)}

/* 출장 지역: 글자 흐름으로 잇는 목록(검색창 없음, 모두 보기 버튼) */
.area-k{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--co)}
.area-red{color:var(--red);margin:4px 0 6px}
.regions{font-size:15px;padding:10px 0 4px}
.regions a{display:inline-block;padding:0 9px;text-decoration:none;border-right:1px solid var(--line);line-height:1.6;margin:4px 0}
.regions a:hover{color:var(--co);text-decoration:underline}
.js .regions.fold{max-height:250px;overflow:hidden;position:relative}
.js .regions.fold::after{content:'';position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(rgba(238,241,244,0),var(--bg))}
.reg-more{display:flex;width:100%;justify-content:center;align-items:center;min-height:50px;margin-top:8px;border:1.5px solid var(--line2);background:var(--paper);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.reg-more:hover{background:var(--ink);color:#fff}

/* 안쪽 페이지 머리 */
.crumb{max-width:1120px;margin:0 auto;padding:12px 16px 0;font-size:13px;color:var(--ink2);display:flex;flex-wrap:wrap;gap:4px 8px}
.crumb a{color:var(--co)}
.ph{max-width:1120px;margin:8px auto 0;padding:0 16px}
.ph-in{padding:6px 0 4px}
.ph-k{font-size:13px;font-weight:700;color:var(--co)}
.ph h1{font-family:var(--fd);font-weight:800;font-size:27px;line-height:1.32;margin:4px 0 10px}
.ph .lead{font-size:15.5px;color:#27313d}
.doc-ph{max-width:1120px;margin:18px auto 0;padding:0 16px}
.doc-ph .ba{border:1.5px solid var(--line2);padding:6px;background:var(--paper)}
.doc-ph .ba figure{aspect-ratio:4/5}
.pts{max-width:1120px;margin:14px auto 0;padding:0 16px;display:grid}
.pts li{position:relative;padding:9px 4px 9px 30px;border-bottom:1px solid var(--line);font-weight:500}
.pts li::before{content:'';position:absolute;left:4px;top:15px;width:12px;height:7px;border-left:2.5px solid var(--co);border-bottom:2.5px solid var(--co);transform:rotate(-45deg)}
.toc{max-width:1120px;margin:18px auto 0;padding:0 16px;display:grid;grid-template-columns:1fr;border-top:1.5px solid var(--line2)}
.toc a{display:flex;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line);text-decoration:none;font-size:14.5px;line-height:1.45}
.toc a span{font-family:var(--fd);font-weight:800;color:var(--co);flex:none}
.toc a:hover{background:var(--co-l)}
.why{display:grid;gap:10px;margin-top:12px}
.why div{background:var(--paper);padding:12px 14px;border-left:4px solid var(--ink)}
.why dt{font-weight:700}
.why dd{color:var(--ink2);font-size:15px}
.spec{display:grid;margin-top:12px;border:1.5px solid var(--line2);background:var(--paper)}
.sp{display:flex;flex-direction:column;gap:4px;padding:14px;border-bottom:1px solid var(--line)}
.sp:last-child{border-bottom:0}
.sp strong{font-family:var(--fd);font-weight:800;font-size:17px}
.sp span{font-size:14.5px;color:var(--ink2)}
.sp em{font-style:normal;font-weight:700;color:var(--co);margin-right:6px}
.sp-n em{color:var(--red)}
.chk{display:grid;gap:8px;margin-top:12px}
.chk li{background:var(--paper);padding:12px 14px 12px 44px;position:relative;border:1px solid var(--line)}
.chk li::before{content:'';position:absolute;left:14px;top:15px;width:16px;height:16px;border:2px solid var(--co)}
.chk b{display:block}
.chk span{font-size:14.5px;color:var(--ink2)}
.chk.slim li::after{content:'';position:absolute;left:19px;top:17px;width:6px;height:10px;border-right:2.5px solid var(--co);border-bottom:2.5px solid var(--co);transform:rotate(45deg)}
.note>p{background:#fff6d6;border-left:4px solid #e0a100;padding:12px 14px}
.proc{display:grid;gap:16px;margin-top:12px}
.proc li{background:var(--paper);border:1.5px solid var(--line2)}
.proc figure{background:var(--steel)}
.proc img{width:100%;max-height:520px;object-fit:contain;background:var(--steel)}
.proc div{padding:12px 14px 14px}
.proc b{display:inline-block;font-family:var(--fd);font-weight:800;color:#fff;background:var(--co);font-size:14px;padding:0 8px}
.proc h3{margin:6px 0 4px;font-size:17px}
.proc p{font-size:15px;color:var(--ink2)}
.cost{display:grid;margin:12px 0;border-top:1.5px solid var(--line2)}
.cost li{display:flex;flex-direction:column;padding:11px 4px;border-bottom:1px solid var(--line)}
.cost b::before{content:'+ ';color:var(--co)}
.cost span{font-size:14.5px;color:var(--ink2)}
.facts{display:grid;margin-top:10px;border:1.5px solid var(--line2);background:var(--paper)}
.facts div{padding:12px 14px;border-bottom:1px solid var(--line)}
.facts div:last-child{border-bottom:0}
.facts dt{font-size:12.5px;font-weight:700;color:var(--co)}
.facts li{position:relative;padding-left:14px}
.facts li::before{content:'';position:absolute;left:0;top:.72em;width:6px;height:6px;background:var(--ink)}
.facts a{font-weight:700;color:var(--co)}
.why-pick{background:var(--co-l);padding:12px 14px;margin-bottom:14px}
.visit p:first-of-type{font-weight:500}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.shots figure{background:var(--paper);border:1.5px solid var(--line2)}
.shots img{width:100%;aspect-ratio:3/4;object-fit:cover}
.shots figcaption{padding:8px 10px;font-size:13.5px;color:var(--ink2);line-height:1.5}
.shots figcaption b{display:block;color:var(--ink);font-size:15px}
.tip{margin-top:10px;font-size:14.5px;color:var(--ink2)}
.flow{counter-reset:f;display:grid;margin-top:12px;border-top:1.5px solid var(--line2)}
.flow li{counter-increment:f;position:relative;padding:12px 4px 12px 44px;border-bottom:1px solid var(--line)}
.flow li::before{content:counter(f);position:absolute;left:4px;top:12px;width:28px;height:28px;background:var(--co);color:#fff;font-family:var(--fd);font-weight:800;display:flex;align-items:center;justify-content:center}
.links .h2{margin-top:18px}
.links .svs,.links .cards{margin-bottom:10px}

/* 하단 고정: [번호][문자보내기]. 본문 문의 버튼이 보이면 숨김(초점 제외) */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;background:var(--ink);border-top:2px solid var(--ink);transition:transform .2s,visibility .2s;padding-bottom:env(safe-area-inset-bottom)}
.dock a{display:flex;align-items:center;justify-content:center;min-height:58px;padding:6px 8px;font-weight:700;font-size:17px;text-decoration:none;text-align:center;line-height:1.25}
.d-tel{color:#fff}
.d-sms{background:var(--co);color:#fff}
.dock.hide{transform:translateY(110%);visibility:hidden}

/* 아주 좁은 화면: 버튼 번호가 한 줄에 들어가게 */
@media (max-width:359px){.cta a{font-size:15.5px;padding:8px 4px}.dock a{font-size:16px}.menu a{padding:4px 10px;font-size:14px}}

/* 넓은 화면 */
@media (min-width:600px){
  .sym{grid-template-columns:1fr 1fr;column-gap:24px}
  .ask-ex{grid-template-columns:repeat(2,minmax(0,240px))}
  .shots{grid-template-columns:repeat(2,minmax(0,260px))}
}
@media (min-width:760px){
  .top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:0 max(0px,calc((100% - 1120px)/2))}
  .top-in{margin:0;padding:12px 16px}
  .menu{grid-template-columns:repeat(4,auto);padding:8px 16px;margin:0}
  .cards{grid-template-columns:1fr 1fr}
  .qas{grid-template-columns:1fr 1fr}
  .svs{grid-template-columns:repeat(3,1fr)}
  .rng{grid-template-columns:repeat(3,1fr)}
  .rg{border-bottom:0;border-right:1px solid var(--line)}
  .rg:last-child{border-right:0}
  .spec{grid-template-columns:repeat(3,1fr)}
  .sp{border-bottom:0;border-right:1px solid var(--line)}
  .sp:last-child{border-right:0}
  .why,.chk{grid-template-columns:1fr 1fr}
  .toc{grid-template-columns:1fr 1fr;column-gap:24px}
  .proc li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .proc img{height:100%;max-height:460px}
  .doc-ph .ba{max-width:720px}
  .tl li{grid-template-columns:1fr 150px}
  .ask-in{padding:28px 28px 24px}
}
@media (min-width:1000px){
  .hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:40px;align-items:center;padding-top:36px}
  .hero-ph{grid-column:2;grid-row:1}
  .hero-t{grid-column:1;grid-row:1;padding-top:0}
  .hero h1{font-size:48px}
  .cards{grid-template-columns:repeat(3,1fr)}
  .ph h1{font-size:34px}
  .dock{left:auto;right:20px;bottom:20px;width:420px;border:2px solid var(--ink)}
  body{padding-bottom:0}
}