/* Class site — on top of base.css */
.hero{position:relative; isolation:isolate; overflow:hidden; padding:84px 0 56px; border-bottom:1px solid var(--rule)}
.hero-bg{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(6,11,18,.78) 0%,rgba(6,11,18,.45) 35%,rgba(6,11,18,.82) 78%,var(--bg) 100%),
    url("media/hero-poster-portrait.jpg") center 30% / cover no-repeat}
.hero .display{max-width:14ch}
html:lang(ko) .hero .display{max-width:none}
.hero .lead{color:#d5dce2}
.facts-strip{display:grid; grid-template-columns:1fr 1fr; margin:0 0 28px; border-top:1px solid var(--rule2)}
.facts-strip div{padding:12px 0; border-bottom:1px solid var(--rule)}
.facts-strip dt{font:500 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mute)}
html:lang(ko) .facts-strip dt{letter-spacing:.04em}
.facts-strip dd{margin:2px 0 0; font-family:var(--serif); font-size:24px; line-height:1.2}
html:lang(ko) .facts-strip dd{font-weight:500; font-size:21px; letter-spacing:-.03em}
.ctas{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.hero-note{margin:18px 0 0}
.hero-note b{color:var(--accent); font-weight:500}

.two{display:grid; gap:36px}
.big-num{font-family:var(--serif); font-size:44px; line-height:1; color:var(--accent); margin:0 0 10px}
.two p{color:var(--ink2)}
.spec{margin-top:28px; padding-top:14px; border-top:1px solid var(--rule)}

.steps{list-style:none; margin:0 0 24px; padding:0; display:grid; border-top:1px solid var(--rule2)}
.steps li{padding:22px 0; border-bottom:1px solid var(--rule)}
.step-k{font:500 12px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin:0 0 10px}
.steps p{color:var(--ink2); margin:0}
.steps .step-k{color:var(--mute)}

.timeline{list-style:none; margin:0 0 18px; padding:0; border-top:1px solid var(--rule2)}
.timeline li{display:grid; grid-template-columns:92px 1fr; gap:12px; padding:14px 0; border-bottom:1px solid var(--rule); align-items:baseline}
.tt{font:400 13px var(--mono); color:var(--mute); font-variant-numeric:tabular-nums}
.tx{color:var(--ink2)}
.timeline li.main .tx{color:var(--ink); font-family:var(--serif); font-size:19px; line-height:1.4}
html:lang(ko) .timeline li.main .tx{font-weight:500; font-size:17.5px; letter-spacing:-.02em}
.timeline li.main .tt{color:var(--accent)}
.timeline b{font-weight:500; color:var(--accent)}
.timeline li.rest .tx{color:var(--mute)}

.rows li{color:var(--ink2)}
.rows b{color:var(--ink); font-weight:500}
#work .rows{margin:0 0 26px}

.teasers{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-self:start; max-width:460px}
.teasers a{text-decoration:none; font-size:13px; color:var(--mute)}
.teasers img{width:100%; aspect-ratio:9/16; object-fit:cover; margin-bottom:8px; filter:saturate(.9)}

.info{margin:0 0 24px; display:grid; grid-template-columns:1fr; border-top:1px solid var(--rule2)}
.info div{display:grid; grid-template-columns:96px 1fr; gap:12px; padding:13px 0; border-bottom:1px solid var(--rule)}
.info dt{font:500 11.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--mute); padding-top:3px}
html:lang(ko) .info dt{letter-spacing:.03em; font-size:12.5px}
.info dd{margin:0; color:var(--ink)}
.info dd a{color:var(--accent)}
.apply-row{display:flex; flex-direction:column; gap:12px; align-items:flex-start; margin-bottom:48px}
.apply-row .small{margin:0}

.poster{margin:0; max-width:480px}
.poster img{width:100%; height:auto; border:1px solid var(--rule)}
.poster figcaption{margin-top:10px; font-size:12.5px; color:var(--mute)}

@media (min-width:760px){
  .hero{padding:140px 0 90px}
  .hero-bg{background:linear-gradient(90deg,rgba(6,11,18,.85) 0%,rgba(6,11,18,.55) 50%,rgba(6,11,18,.25) 100%),
    linear-gradient(180deg,transparent 60%,var(--bg) 100%),
    url("media/hero-poster.jpg") center 40% / cover no-repeat}
  .facts-strip{grid-template-columns:repeat(4,1fr); max-width:760px}
  .facts-strip div{padding-right:16px}
  .ctas{flex-direction:row}
  .two{grid-template-columns:1fr 1fr; gap:64px}
  .steps{grid-template-columns:repeat(3,1fr); gap:0 40px; border-top:0}
  .steps li{border-top:1px solid var(--rule2); border-bottom:0}
  .timeline li{grid-template-columns:120px 1fr}
  .info{grid-template-columns:1fr 1fr; column-gap:48px}
  .apply-row{flex-direction:row; justify-content:space-between; align-items:center}
}