/* Page 4 - About us (text, values, MAS card).
   Loaded in number order by templates/site.php (order matters: later files win). */
/* ===== 5 · ABOUT ===== */
.about-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(30px,5vw,70px);align-items:center}
.c-about h2{font-size:clamp(28px,2.9vw,40px);max-width:24ch}
.about-foot{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(20px,3vw,40px);align-items:center;margin-top:clamp(22px,3vw,40px);padding-top:clamp(18px,2.5vw,30px);border-top:1px solid var(--line-soft)}
.about-foot .values{margin-top:0}.about-foot .mas{margin-top:0}
.about-grid .story p{color:var(--mist);font-size:19px;margin-top:12px;max-width:none}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px 28px;margin-top:34px}
.about-foot:not(:has(.mas)){grid-template-columns:1fr}
.values div{padding-top:16px;border-top:1px solid var(--line)}
.values h3{font-size:15px;letter-spacing:.1em}
.values p{color:var(--mist);font-size:17.5px;margin-top:8px}
.city-art{perspective:1400px}
.city-art{position:relative}
.city-art::after{content:"";position:absolute;left:10%;right:10%;bottom:-6%;height:18%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);z-index:-1}
.city-art img{width:100%;transform-origin:50% 80%;will-change:transform;
  transform:rotateX(calc((.5 - var(--p,.5)) * 14deg)) translate3d(0,calc((.5 - var(--p,.5)) * 50px),0)}
.mas{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:34px;padding:18px 22px;border-radius:20px;border:1px solid var(--line);background:rgba(4,17,32,.45)}
.mas p{font-size:18px;color:var(--mist);flex:1;min-width:220px}
.mas b{font:600 13px var(--serif);letter-spacing:.08em;color:var(--ivory);display:block}