/* =====================================================================================
   Brand Elite - area (zone) pages: "How to Reach Our Office from <zone>?" section (includes/area-local.php), 16 Oct 2026.
   Loaded only on area pages, after the service page's own CSS. Tokens from css/system.css. Prefix: ar-
   ===================================================================================== */
.ar-local [id]{scroll-margin-top:110px}
.ar-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,2vw,32px);align-items:stretch;margin-top:clamp(32px,3vw,40px)}
@media (max-width:899.98px){.ar-grid{grid-template-columns:minmax(0,1fr)}}
.ar-map{border-radius:24px;overflow:hidden;min-height:320px;background:#e6eef9;box-shadow:0 22px 40px -22px rgba(30,64,130,.4)}
.ar-map iframe{display:block;width:100%;height:100%;min-height:320px;border:0}
.ar-card{display:flex;flex-direction:column;gap:16px;padding:clamp(22px,2.2vw,32px);border-radius:24px;background:#fff;border:1px solid rgba(16,25,40,.06);box-shadow:0 22px 40px -22px rgba(30,64,130,.32)}
.ar-row{display:flex;gap:12px;margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body)}
.ar-row svg{width:22px;height:22px;flex:none;margin-top:2px;stroke:#f46a10;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ar-row b{display:block;color:var(--navy);font-weight:600}
.ar-routes{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid rgba(16,25,40,.08);display:grid;gap:14px}
.ar-routes li{display:flex;gap:12px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body)}
.ar-routes b{display:block;color:var(--navy);font-weight:600}
.ar-ic{width:38px;height:38px;flex:none;border-radius:12px;background:linear-gradient(160deg,#fff2e6,#ffe1c7);display:flex;align-items:center;justify-content:center;color:#f46a10}
.ar-ic-s{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ar-acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:auto;padding-top:6px}
.ar-acts .rm{margin-top:0}
.ar-b{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid rgba(16,25,40,.14);font-size:var(--fs-btn);font-weight:500;color:var(--navy);text-decoration:none;transition:border-color .25s,color .25s}
.ar-b svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ar-b.wa svg{stroke:#1faa53}
@media (hover:hover){.ar-b:hover{border-color:#f46a10;color:#c2410c}}
.ar-b:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.ar-local .ar-sub{margin:clamp(48px,4.6vw,64px) 0 clamp(20px,2vw,28px);text-align:center;font-size:var(--fs-h3);font-weight:700;color:var(--navy)}
.ar-areas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ar-areas li{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid rgba(16,25,40,.08);font-size:var(--fs-label);font-weight:600;color:var(--navy)}
.ar-areas svg{width:14px;height:14px;stroke:#f46a10;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}