/* home.css — home-only components (2026-09-26 rebuild). Tokens and chrome live
   in styles.css. Order of the page is the order a US buyer asks questions in:
   what is this and is it for me (hero, fit), what does it cost (make), how does
   it run (process), how do I know it will be right (quality, cases), who is
   behind it (people), then the form. */

.sec{padding-block:clamp(40px,6vw,84px)}
.sec--alt{background:oklch(0.975 0.004 80)}
.answer{font-size:1.08em; max-width:70ch; margin-bottom:clamp(18px,2.4vw,28px)}
.small{font-size:.88rem; color:var(--ink-60); margin-top:14px; max-width:90ch}
.small a,.link{color:var(--ink); text-decoration:underline; text-decoration-color:var(--blaze); text-decoration-thickness:2px; text-underline-offset:3px; font-weight:600}

/* 01 hero */
.hero{padding-block:clamp(22px,4vw,56px) clamp(28px,4vw,56px); border-bottom:1px solid var(--rule)}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center}
.hero__kicker{color:var(--blaze-ink)}
.hero h1{margin:10px 0 16px; font-size:clamp(1.75rem,1rem + 2.6vw,3rem)}
.hero__lede{font-size:clamp(1.02rem,.96rem + .3vw,1.16rem); color:var(--ink-60); max-width:58ch}
.facts{list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:22px 0; border-top:2px solid var(--ink); border-bottom:1px solid var(--rule)}
.facts li{padding:12px 12px 12px 0}
.facts li+li{padding-left:12px; border-left:1px solid var(--rule)}
.facts b{display:block; font-family:var(--disp); font-stretch:110%; font-size:clamp(1.05rem,.9rem + .6vw,1.35rem); font-weight:800}
.facts span{font-size:.8rem; color:var(--ink-60); line-height:1.3; display:block}
.hero__cta{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px}
.hero__promise{margin-top:14px; font-size:1rem; border-left:3px solid var(--blaze); padding-left:10px}
.hero__who{margin-top:14px; font-size:.9rem; color:var(--ink-60)}
.hero__img img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.hero__img figcaption{font-size:.8rem; color:var(--ink-60); margin-top:6px}
@media(max-width:880px){
  .hero__grid{grid-template-columns:1fr}
  .hero__img{margin-inline:calc(var(--gut) * -1)}
  .hero__img img{aspect-ratio:16/9}
  .hero__img figcaption{padding-inline:var(--gut)}
}
@media(max-width:560px){
  .facts{grid-template-columns:1fr 1fr}
  .facts li:nth-child(3){padding-left:0; border-left:0}
  .facts li:nth-child(n+3){border-top:1px solid var(--rule)}
  .hero__cta .btn{flex:1 1 100%; text-align:center}
}

/* 02 proof */
.proof{background:var(--ink); color:#fff}
.proof__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,2vw,28px); padding-block:clamp(18px,2.4vw,28px)}
.proof p{font-size:.88rem; color:rgb(255 255 255 / .74); max-width:none}
.proof b{display:block; color:#fff; font-family:var(--disp); font-stretch:115%; font-weight:800; font-size:clamp(1.5rem,1.1rem + 1.4vw,2.3rem); line-height:1.05}
@media(max-width:720px){.proof__grid{grid-template-columns:1fr 1fr}}

/* 03 fit */
.fit{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,32px)}
.fit__col{border-top:2px solid var(--ink); padding-top:14px}
.fit__col--no{border-top-color:var(--rule)}
.fit h3{margin-bottom:10px}
.fit ul{display:grid; gap:8px; padding-left:1.1em}
.fit__col--yes li::marker{content:"✓  "; color:var(--blaze-ink); font-weight:700}
.fit__col--no li::marker{content:"—  "; color:var(--ink-38)}
.fit__note{margin-top:14px; font-size:.92rem}
.fit__note a{text-decoration-color:var(--blaze); text-underline-offset:3px}
@media(max-width:720px){.fit{grid-template-columns:1fr}}

/* tables */
.tbl{overflow-x:auto}
table.price,table.qc{border-collapse:collapse; width:100%; font-size:.96rem}
.price caption{caption-side:top; text-align:left; font-size:.85rem; color:var(--ink-60); padding-bottom:8px}
.price th,.price td,.qc th,.qc td{padding:11px 12px; border-bottom:1px solid var(--rule); text-align:left; vertical-align:top}
.price thead th,.qc thead th{border-bottom:2px solid var(--ink); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em}
.price tbody th,.qc tbody th{font-weight:600}
.price td{font-variant-numeric:tabular-nums; white-space:nowrap}
.price td:last-child{font-weight:700}
@media(max-width:560px){
  .price thead,.qc thead{display:none}
  .price tr,.qc tr{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--rule); padding-block:8px}
  .price tbody th,.qc tbody th{grid-column:1/-1; border:0; padding:4px 0}
  .price td,.qc td{border:0; padding:2px 0}
  .price td::before,.qc td::before{content:attr(data-label); display:block; font-size:.78rem; color:var(--ink); text-transform:uppercase; letter-spacing:.05em}
}

/* 05 steps */
.steps{list-style:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px)}
.steps img{width:100%; aspect-ratio:3/2; object-fit:cover; margin-bottom:10px; background:var(--rule)}
.steps h3{font-size:1rem; margin-bottom:6px}
.steps p{font-size:.9rem; color:var(--ink-60)}
@media(max-width:1000px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){
  .steps{grid-template-columns:1fr; gap:16px}
  .steps li{display:grid; grid-template-columns:110px 1fr; gap:4px 14px; align-items:start}
  .steps img{grid-row:1 / span 2; margin:0}
}

/* 06 quality */
.qgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(20px,4vw,48px); align-items:start}
@media(max-width:880px){.qgrid{grid-template-columns:1fr}}
.qc td:last-child{font-weight:600}

/* 07 cases */
.cases{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,36px)}
.case img{width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:12px}
.case .mono{color:var(--blaze-ink); margin-bottom:6px}
.case h3{margin-bottom:8px}
.case p{font-size:.95rem}
@media(max-width:720px){.cases{grid-template-columns:1fr}}

/* 08 people */
.people{display:grid; grid-template-columns:1fr 1fr 1.25fr; gap:clamp(16px,3vw,32px); align-items:start; margin-bottom:18px}
.person img{width:100%; aspect-ratio:1/1; object-fit:cover; object-position:top; margin-bottom:10px}
.person h3 span{font-weight:500; color:var(--ink-60); font-size:.85em; margin-left:6px}
.person p{font-size:.92rem; color:var(--ink-60); margin-top:6px}
.company{border-top:2px solid var(--ink)}
.company div{display:grid; grid-template-columns:9.5em 1fr; gap:10px; padding:9px 0; border-bottom:1px solid var(--rule); font-size:.92rem}
.company dt{color:var(--ink-60)}
.company dd{font-weight:600}
@media(max-width:880px){.people{grid-template-columns:1fr 1fr}.company{grid-column:1/-1}}
@media(max-width:480px){.company div{grid-template-columns:1fr; gap:2px}}

/* 09 faq */
.faq-wrap{max-width:860px}
.faq-wrap details{border-bottom:1px solid var(--rule)}
.faq-wrap summary{cursor:pointer; list-style:none; padding:16px 32px 16px 0; font-family:var(--disp); font-weight:700; font-size:1.06rem; position:relative}
.faq-wrap summary::-webkit-details-marker{display:none}
.faq-wrap summary::after{content:"+"; position:absolute; right:4px; top:12px; font-size:1.4rem; color:var(--blaze-ink)}
.faq-wrap details[open] summary::after{content:"–"}
.faq-wrap details p{padding-bottom:16px; color:var(--ink-60)}

/* 10 quote */
.quote{background:var(--ink); color:#fff}
.quote__grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(20px,4vw,56px); align-items:start}
.quote p{color:rgb(255 255 255 / .78)}
.quote a{color:#fff; text-decoration-color:var(--blaze)}
.quote .rfq label{color:#fff}
.quote .rfq input,.quote .rfq select,.quote .rfq textarea{border-color:transparent}
.quote .rfq__status.is-err,.quote .rfq label b{color:oklch(0.78 0.14 50)}
.quote .rfq__fit{color:var(--ink)}
.quote .rfq__done{border-color:#fff}
@media(max-width:880px){.quote__grid{grid-template-columns:1fr}}
@media(max-width:560px){
  .people{grid-template-columns:1fr; gap:18px}
  .person{display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:start}
  .person img{margin:0}
  .person h3 span{display:block; margin:2px 0 0}
}

/* hero team (2026-09-26): the two people, first thing on the page */
.hero__team{border-top:2px solid var(--ink); padding-top:12px}
.hero__kr{display:flex; align-items:center; gap:8px; font-weight:700; font-size:.95rem; margin-bottom:12px}
.hero__kr img{border:1px solid var(--rule)}
.hero__faces{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.hero__faces img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top}
.hero__faces figcaption{font-size:.84rem; color:var(--ink-60); margin-top:6px; line-height:1.35}
.hero__faces figcaption b{display:block; color:var(--ink); font-size:1rem}
.hero__std{margin-top:12px; font-size:.95rem; font-weight:600; max-width:48ch}
@media(max-width:880px){.hero__faces img{aspect-ratio:1/1}}
.qfig{margin:14px 0 12px}
.qfig figcaption{font-size:.8rem; color:var(--ink-60); margin-top:6px}
.people .person{border-top:2px solid var(--ink); padding-top:10px}

/* leader cards in the hero (2026-09-26, owner's layout: photo + flag, name, role, line, fact rows) */
.leader__photo{position:relative}
.leader__photo img:first-child{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top; background:var(--rule)}
.leader__flag{position:absolute; right:0; bottom:0; width:36px; height:auto; border:3px solid #fff; border-width:3px 0 0 3px}
.leader figcaption{margin-top:10px}
.leader__name{display:block; font-family:var(--disp); font-stretch:110%; font-weight:800; font-size:1.2rem; line-height:1.1}
.leader__role{display:block; margin-top:4px; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blaze-ink)}
.leader__line{display:block; margin-top:6px; font-size:.95rem; line-height:1.35}
.leader__facts{list-style:none; margin-top:8px; border-top:1px solid var(--rule)}
.leader__facts li{padding:6px 0; border-bottom:1px solid var(--rule); font-size:.86rem; color:var(--ink-60); line-height:1.3}
@media(max-width:880px){.leader__photo img:first-child{aspect-ratio:1/1}}
@media(max-width:420px){.leader__name{font-size:1.05rem}.leader__line{font-size:.88rem}.leader__facts li{font-size:.8rem}}
.hero__faces .leader__line{color:var(--ink)}

/* round-4 fixes */
@media(max-width:560px){.people .person{display:block}}
.hero__mini{display:none}
@media(max-width:880px){
  .hero__mini{display:flex; flex-wrap:wrap; gap:10px 18px; margin:-4px 0 14px}
  .hero__mini span{display:flex; align-items:center; gap:7px; font-size:.85rem; color:var(--ink-60)}
  .hero__mini img:first-child{width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:top}
  .hero__mini b{color:var(--ink)}
  .hero__mini .f{border:1px solid var(--rule)}
}
.hero__faces .leader__flag{width:36px; height:auto; aspect-ratio:auto; object-fit:fill}

/* 같이 일하는 회사 카드(10/12). 우리가 쓴 사실 카드 — 별점·인용 없음 */
.clients{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,22px); margin-top:12px}
.clients__where{font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--blaze-ink); margin-top:26px}
.client{background:var(--paper); border:1px solid var(--rule); border-radius:14px; padding:clamp(18px,2vw,24px); display:flex; flex-direction:column}
.client__stat{font-family:var(--disp); font-stretch:115%; font-weight:800; font-size:clamp(1.2rem,1rem + .8vw,1.6rem); line-height:1.12; margin-bottom:10px; color:var(--ink)}
.client > p:not(.client__stat){font-size:.95rem; color:var(--ink-60); flex:1}
.client footer{display:flex; align-items:center; gap:12px; border-top:1px solid var(--rule); margin-top:18px; padding-top:14px}
.client__ini{flex:none; width:40px; height:40px; border-radius:50%; background:oklch(0.96 0.004 80); border:1px solid var(--rule); display:grid; place-items:center; font-size:.74rem; font-weight:700; letter-spacing:.02em}
.client footer b{display:block; font-size:.95rem; line-height:1.2}
.client footer small{display:block; font-size:.8rem; color:var(--ink-60)}
.clients__note{margin-top:6px}
.clients__more{margin-top:14px; font-size:.95rem; color:var(--ink-60)}
@media(max-width:1000px){.clients{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.clients{grid-template-columns:1fr}}
/* 10-14 HZ: 버튼 글자가 두 줄로 꺾여도 가운데(모든 언어 홈) */
.btn{text-align:center}