/* Arrow case study: same visual language as CEND (cend.css), its own structure and accent */

.ar{--accent:#E8572A;--accent-soft:#FCE6DA}
.ar-intro{padding-top:160px;padding-bottom:56px}
.ar-intro h1{margin:24px 0 0;max-width:960px;font-size:clamp(38px,5.2vw,68px);line-height:1.08;letter-spacing:-.03em;font-weight:500}

.ar-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ar-bento .panel{aspect-ratio:416/520;display:flex;align-items:center;justify-content:center}
.ar-bento .panel.wide{grid-column:span 2;aspect-ratio:848/520}

.ar-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(40px,5vw,64px);border-top:1px solid #E2E2E2}
.ar-meta>div{padding:20px 24px 0 0}
.ar-meta>div+div{padding-left:24px;border-left:1px solid #E2E2E2}
.ar-meta p{margin:0}
.ar-meta .k{font-size:14px;color:#888;margin-bottom:6px}
.ar-meta .v{font-size:17px}


.ar-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);padding-top:clamp(72px,10vw,140px);padding-bottom:clamp(56px,7vw,96px)}
.ar-trio h3{margin:16px 0 10px;font-size:24px;font-weight:500;letter-spacing:-.02em}
.ar-trio p{margin:0;font-size:17px;line-height:1.55;color:#555}

.ar-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:center;margin-bottom:16px}
.ar-row.flip{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.ar-row.flip .ar-copy{order:2}
.ar-copy h2{margin:16px 0 14px;font-size:clamp(28px,3vw,40px);line-height:1.12;letter-spacing:-.025em;font-weight:500}
.ar-copy p{margin:0;font-size:18px;line-height:1.55;color:#555;max-width:380px}

.ar-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:clamp(56px,7vw,96px) 0}
.ar-stats>div{border-radius:16px;background:#F3F1EF;padding:28px 24px}
.ar-stats .big{margin:0;font-size:clamp(40px,4.4vw,60px);letter-spacing:-.04em;line-height:1}
.ar-stats .lbl{margin:12px 0 0;font-size:15px;color:#666}



.ar-mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ar-mosaic figure{margin:0;border-radius:16px;background:#F3F1EF;padding:clamp(14px,1.6vw,22px)}
.ar-mosaic img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 12px 28px -14px rgba(20,22,45,.35)}
.ar-mosaic figcaption{margin:14px 4px 2px;font-size:14px;color:#666}
.ar-mosaic .col{display:flex;flex-direction:column;gap:16px}


@media (max-width:860px){
  .ar-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ar-meta>div:nth-child(3){border-left:0;padding-left:0}
  .ar-meta>div{padding-bottom:16px}
  .ar-trio,.ar-stats{grid-template-columns:minmax(0,1fr)}
  .ar-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ar-row,.ar-row.flip{grid-template-columns:minmax(0,1fr);margin-bottom:48px}
  .ar-row.flip .ar-copy{order:0}
  .ar-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ar-bento .panel.wide{grid-column:span 2;aspect-ratio:848/560}
  .ar-bento .panel.wide .bw{width:84%!important}
  .ar-mosaic{grid-template-columns:minmax(0,1fr)}
}
.ar .marquee .card{background:#F3EEEA}