/* METAIAM — About, Contact and legal pages. Loaded after solution.css; reuses its tokens and type scale. */

/* Short hero (type only) */
.hero.short{height:auto;min-height:0;padding:clamp(160px,17vw,240px) 0 clamp(90px,9vw,130px)}
.hero.short .hero-copy{position:relative;left:0;right:0;top:auto;width:90%;max-width:1440px;margin:0 auto}
.hero.short .hero-grid{-webkit-mask-image:linear-gradient(90deg,transparent 20%,#000 100%);mask-image:linear-gradient(90deg,transparent 20%,#000 100%)}
.hero.short p{max-width:34ch}

/* Two-column prose */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:5vw;margin-top:56px;padding-top:28px;border-top:1px solid var(--l-line)}
.dark .cols{border-color:var(--hp-line)}
.cols p{margin:0;font-size:17px;line-height:1.65;color:var(--l-ink-2)}
.dark .cols p{color:#aebbc9}

/* Text + image split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:7vw;align-items:center}
.split .body{margin:28px 0 0;font-size:17px;line-height:1.65;color:#aebbc9;max-width:50ch}
.split .body+.body{margin-top:16px}
.split-media{position:relative;height:520px;background:radial-gradient(circle at 50% 50%,rgba(120,191,255,.10),transparent 55%)}
.split-media img{position:absolute;inset:6% 12%;width:76%;height:88%;object-fit:contain;filter:drop-shadow(0 28px 36px rgba(0,0,0,.5))}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:64px;border-top:1px solid var(--l-line)}
.stat{padding:34px 26px 6px 0;border-right:1px solid var(--l-line)}
.stat+.stat{padding-left:26px}
.stat:last-child{border-right:0}
.stat b{display:block;font-weight:300;font-size:clamp(40px,4.4vw,64px);letter-spacing:-.035em;line-height:1;color:var(--l-blue)}
.stat span{display:block;margin-top:14px;font-size:15px;line-height:1.5;color:var(--l-ink-3)}
.note{margin:36px 0 0;font-size:13px;color:var(--l-ink-3)}

/* Contact */
.reach{display:grid;grid-template-columns:1fr auto;gap:6vw;align-items:end;margin-top:56px}
.reach-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--l-line)}
.reach-list li{display:grid;grid-template-columns:240px 1fr;gap:16px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--l-line)}
.reach-list span{font:400 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--l-ink-3)}
.reach-list a{font-size:clamp(20px,2vw,28px);letter-spacing:-.01em;color:#132235;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.reach-list a:hover{color:var(--l-blue);border-color:rgba(23,109,168,.4)}
.qr{display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px;border:1px solid var(--l-line);border-radius:14px;background:#fff;color:#132235;font-size:14px}
.qr img{width:150px;height:150px;display:block}
.qr:hover{border-color:#132235}
.offices{display:grid;grid-template-columns:repeat(4,1fr);margin-top:64px;border-top:1px solid var(--l-line)}
.office{padding:32px 26px 8px 0;border-right:1px solid var(--l-line)}
.office+.office{padding-left:26px}
.office:last-child{border-right:0}
.office h3{margin:0 0 14px;font-size:24px;font-weight:300;letter-spacing:-.01em}
.office p{margin:0;font-size:15px;line-height:1.55;color:var(--l-ink-3)}
.office a{display:inline-block;margin-top:12px;font-size:15px;color:var(--l-blue)}

/* Legal */
.legal{max-width:760px}
.legal .updated{font:400 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#4f5c68;margin:0 0 48px}
.legal h2{font-size:24px;font-weight:300;letter-spacing:-.01em;margin:48px 0 14px}
.legal p,.legal li{font-size:16px;line-height:1.7;color:var(--l-ink-2)}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:20px}
.legal a{color:var(--l-blue);border-bottom:1px solid rgba(23,109,168,.3)}

@media(max-width:1100px){
  .split{grid-template-columns:1fr}
  .split-media{height:400px}
  .stats,.offices{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2),.office:nth-child(2){border-right:0}
  .stat:nth-child(3),.office:nth-child(3){padding-left:0}
  .stat:nth-child(n+3),.office:nth-child(n+3){border-top:1px solid var(--l-line)}
  .reach{grid-template-columns:1fr;align-items:start}
  .qr{align-self:start}
}
@media(max-width:760px){
  .hero.short{padding:140px 0 72px}
  .hero.short .hero-copy{left:0;right:0;top:auto;width:90%;margin:0 auto}
  .cols{grid-template-columns:1fr;gap:18px}
  .split-media{height:320px}
  .stats,.offices{grid-template-columns:1fr}
  .stat,.stat+.stat,.office,.office+.office{padding:24px 0;border-right:0;border-top:0;border-bottom:1px solid var(--l-line)}
  .reach-list li{grid-template-columns:1fr;gap:6px}
}