html{scroll-padding-top:24px}
.areas-hero{padding:74px 0 68px;background:radial-gradient(ellipse at 88% 20%,rgba(194,153,75,.16),transparent 55%);border-bottom:1px solid var(--line)}
.areas-crumb{display:flex;gap:12px;align-items:center;margin-bottom:24px;color:var(--muted);font-size:14px}
.areas-crumb a{text-decoration:none;border-bottom:1px solid var(--line)}
.areas-crumb a:hover{color:var(--bone)}
.areas-hero h1{font-family:var(--display);font-weight:500;font-size:clamp(34px,5vw,60px);line-height:1.15;letter-spacing:.02em;color:var(--gold-hi)}
.areas-lead{max-width:62ch;margin-top:22px;color:var(--bone);font-size:19px}
.areas-section{padding:76px 0 42px}
.areas-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:64px;align-items:stretch}
.areas-layout>nav{min-width:0;align-self:stretch}
.area-list{min-width:0}
.area-index{position:sticky;top:28px;list-style:none;border-left:1px solid var(--line)}
.area-index a{display:block;padding:11px 0 11px 20px;margin-left:-1px;border-left:2px solid transparent;font-family:var(--display);font-size:14px;letter-spacing:.04em;color:var(--muted);text-decoration:none;transition:color .2s,border-color .2s}
.area-index a:hover{color:var(--bone)}
.area-index a.on{color:var(--gold-hi);border-left-color:var(--gold)}
.area{padding:58px 0;border-top:1px solid var(--line);scroll-margin-top:30px}
.area:first-child{padding-top:0;border-top:0}
.area-head{display:flex;align-items:center;gap:18px;min-width:0}
.area-head svg{width:40px;height:40px;flex:none;stroke:var(--gold);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.area h2{max-width:none;min-width:0;font-size:clamp(26px,3.4vw,36px);color:var(--gold-hi);overflow-wrap:anywhere}
.area .intro{margin-top:20px;max-width:58ch;font-size:18px}
.area h3{margin:32px 0 14px;color:var(--gold);font-family:var(--display);font-size:15px;font-weight:500;letter-spacing:.08em}
.area ul.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 30px;list-style:none}
.area ul.cases li{position:relative;min-width:0;padding-left:22px;color:var(--bone);font-size:16px;line-height:1.55;overflow-wrap:anywhere}
.area ul.cases li::before{content:"";position:absolute;left:0;top:.8em;width:12px;height:1px;background:var(--gold)}
.area .go{margin-top:30px}
.areas-more{padding:30px 0 96px}
.areas-more .more-box{border:1px solid var(--line);background:var(--panel);padding:40px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.areas-more .more-box h2{font-size:clamp(22px,2.8vw,30px)}
.areas-more .more-box .lead{margin-top:10px}
footer .ft-logo img{display:block;width:min(100%,220px);height:auto;object-fit:contain}
@media(max-width:900px){
  .areas-hero{padding:58px 0}
  .areas-layout{grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
  .areas-layout>nav{min-width:0;align-self:auto}
  .area-index{position:static;display:flex;overflow-x:auto;border-left:0;border-bottom:1px solid var(--line);background:var(--ink);margin:0 -28px 34px;padding:0 28px;scrollbar-width:none}
  .area-index li{flex:none}
  .area-index::-webkit-scrollbar{display:none}
  .area-index a{white-space:nowrap;padding:14px 15px;margin:0;border-left:0;border-bottom:2px solid transparent}
  .area-index a.on{border-bottom-color:var(--gold)}
  .area ul.cases{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .areas-hero{padding:44px 0}
  .areas-lead{font-size:17px}
  .areas-section{padding-top:44px}
  .area{padding:42px 0}
  .area-head{gap:12px;align-items:flex-start}
  .area-head svg{width:32px;height:32px}
  .area h2{font-size:clamp(23px,6.3vw,30px);line-height:1.2}
  .area .intro{font-size:16px;overflow-wrap:anywhere}
  .area ul.cases{grid-template-columns:1fr}
  .area .go .btn{max-width:100%;white-space:normal}
  .areas-more .more-box{padding:26px}
  .areas-more{padding-bottom:64px}
}