/* HowfenConnect – Areas */
.areas{color:#000;padding:40px 0 0}
.areas a{color:inherit;text-decoration:none}
.areas .sec-head{text-align:center;max-width:760px;margin:0 auto 52px;padding:0 20px}
.areas .sec-head h1{font-size:clamp(2rem,4.2vw,3.25rem);font-weight:700;letter-spacing:-.03em;margin:0 0 14px}
.areas .sec-sub{margin:0;font-size:1.05rem}
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:80px}
.area-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:220px;padding:26px;border-radius:20px;background:var(--ink);color:#fff;overflow:hidden}
.area-tile.hero{grid-column:span 2;min-height:300px;background:var(--accent);color:#000}
.area-tile .cnt{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.area-tile .nm{font-size:clamp(1.5rem,2.4vw,2.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.area-tile.hero .nm{font-size:clamp(2rem,3.6vw,3.25rem)}
.area-tile .go{position:absolute;right:20px;top:20px;width:44px;height:44px;border-radius:50%;background:var(--accent);color:#000;display:grid;place-items:center}
.area-tile.hero .go{background:#000;color:#fff}
.area-tile .go svg{width:18px;height:18px}
.area-tile .bl{margin:10px 0 0;font-size:.95rem;line-height:1.5;max-width:520px}
.area-tile:hover .go{transform:translate(2px,-2px)}
/* area page */
.area-page{padding:40px 0 0;color:#000}
.area-page a{color:inherit;text-decoration:none}
.area-page .sec-head{text-align:center;max-width:760px;margin:0 auto 32px;padding:0 20px}
.area-page .sec-head h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:800;letter-spacing:-.035em;margin:0 0 14px;line-height:1.02}
.area-page .sec-sub{margin:0;font-size:1.05rem}
.area-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 56px}
.area-chips a{padding:9px 16px;border-radius:999px;border:1px solid var(--line);font-size:.9rem;font-weight:600}
.area-chips a.on,.area-chips a:hover{background:var(--accent);border-color:var(--accent)}
.area-map{border-radius:20px;overflow:hidden;border:1px solid var(--line);margin:0 0 56px}
.area-map iframe{display:block;width:100%;height:320px;border:0}
.area-page + .band-wrap,.areas + .band-wrap{padding-top:0;background:#fff}
@media (max-width:1040px){.area-grid{grid-template-columns:1fr 1fr}.area-tile.hero{grid-column:span 2}}
@media (max-width:640px){
  .areas,.area-page{padding-top:24px}
  .area-grid{grid-template-columns:1fr;gap:12px;margin-bottom:56px}
  .area-tile,.area-tile.hero{grid-column:auto;min-height:170px;padding:20px}
  .area-map iframe{height:240px}
}
.areas a.area-tile{color:#fff}.areas a.area-tile.hero{color:#000}
.area-page .search.area-filter{max-width:900px;margin:0 auto 56px;background:var(--accent);border:0;box-shadow:none;display:flex;align-items:center;border-radius:999px;padding:14px 14px 14px 32px}
.area-page .area-filter .field{flex:1;display:flex;align-items:center;gap:12px;padding-right:28px;min-width:0}
.area-page .area-filter .field+.field{padding-left:28px}
.area-page .area-filter .field>svg{width:22px;height:22px;flex:none}
.area-page .area-filter .field-inner{flex:1;position:relative;border-bottom:1px solid rgba(0,0,0,.35);display:flex;min-width:0}
.area-page .area-filter select{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:1.05rem;color:#000;padding:10px 28px 10px 0;-webkit-appearance:none;appearance:none;cursor:pointer}
.area-page .area-filter .field-inner.has-select::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:1.5px solid #000;border-bottom:1.5px solid #000;transform:rotate(45deg);pointer-events:none}
.area-page .area-filter .cta{flex:none;background:#fff}
.area-page .area-filter .cta .ico{background:#000;color:#fff}
@media (max-width:800px){
  .area-page .search.area-filter{flex-direction:column;align-items:stretch;border-radius:28px;padding:20px 20px 16px;gap:8px}
  .area-page .area-filter .field,.area-page .area-filter .field+.field{padding:0}
  .area-page .area-filter .cta{justify-content:space-between;margin-top:10px}
}
.area-page .search.area-filter{max-width:none!important}
.area-tile.hero[style]{color:#fff}
.area-tile.hero[style] .go{background:var(--accent);color:#000}
@media (max-width:480px){
  .area-tile,.area-tile.hero{min-height:150px;padding:18px 18px 16px}
  .area-tile .nm,.area-tile.hero .nm{font-size:clamp(1.3rem,7vw,1.9rem);word-break:break-word;padding-right:44px}
  .area-tile .go{width:38px;height:38px;top:16px;right:16px}
  .area-tile .cnt{font-size:.72rem}
  .area-tile.hero .bl{font-size:.9rem}
}
.area-tile{background:var(--ink);color:#fff}
.area-tile:nth-child(3n){background:var(--accent);color:#000}
.area-tile:nth-child(3n) .go{background:#000;color:#fff}
.area-tile.hero{background:var(--accent);color:#000}
.area-tile,.area-tile:nth-child(3n),.area-tile.hero{background:var(--accent);color:#000}
.area-tile .go,.area-tile:nth-child(3n) .go,.area-tile.hero .go{background:#000;color:#fff}
.area-tile,.area-tile *,.area-tile:hover,.area-tile:hover .go{transition:none!important;transform:none!important;translate:none!important}
.area-tile:hover{box-shadow:none}