/* Areas We Serve only. Shared chrome and approved pages are unchanged. */
.areas-page { background:#fff; }
.areas-page .ar-section { padding-block:clamp(50px,6vw,88px); }
.areas-page h1 { font-size:clamp(2.65rem,4.2vw,4rem); line-height:1.09; letter-spacing:-.045em; }
.areas-page h1 span { display:block; color:var(--em-red); margin-top:8px; }
.areas-page h2 { font-size:clamp(1.85rem,3vw,2.7rem); line-height:1.16; }
.areas-page h3 { font-size:1.17rem; line-height:1.35; }
.areas-page p { color:var(--em-muted); line-height:1.8; }
.areas-page .em-eyebrow { color:var(--em-red); }
.areas-page .ar-image { width:100%; height:100%; display:block; object-fit:cover; }
.areas-page .ar-hero { padding-block:50px 64px; background:linear-gradient(120deg,#f1f5f8 35%,#f6f1e9); }
.areas-page .ar-hero-grid { display:grid; grid-template-columns:1fr 1.03fr; gap:48px; align-items:center; }
.areas-page .ar-lead { font-size:1.02rem; margin-block:24px 18px; }
.areas-page .ar-hero-photo { height:540px; overflow:hidden; border-radius:18px 65px 18px 18px; box-shadow:var(--em-shadow-md); }
.areas-page .ar-hero-photo img { object-position:58% center; }
.areas-page .ar-badge { display:flex; gap:9px; align-items:center; width:fit-content; padding:7px 12px; border:1px solid #d7e1ea; background:#fff; border-radius:24px; font-size:.79rem; font-weight:650; color:var(--em-navy); margin:0 0 25px; }
.areas-page .ar-badge .em-icon { width:18px; height:18px; color:var(--em-red); flex-shrink:0; }
.areas-page .ar-note { display:flex; gap:9px; align-items:center; font-size:.78rem; margin:20px 0 0; }
.areas-page .ar-note .em-icon { width:18px; height:18px; flex-shrink:0; }
.areas-page .ar-heading { max-width:740px; text-align:center; margin:0 auto 36px; }
.areas-page .ar-map { background:#edf2f7; }
.areas-page .ar-coverage { position:relative; height:340px; max-width:1080px; margin:48px auto 20px; }
.areas-page .ar-connections { position:absolute; inset:0; width:100%; height:100%; color:#a9b9c9; }
.areas-page .ar-coverage-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:180px; height:180px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; border:8px solid #fff; border-radius:50%; background:var(--em-navy); color:#fff; box-shadow:0 0 0 1px #d9e2ec,0 16px 35px #14254315; }
.areas-page .ar-coverage-center .em-icon { width:25px; height:25px; color:#ff9eaa; }
.areas-page .ar-coverage-center strong { font-size:2.5rem; line-height:1.2; letter-spacing:-.035em; }
.areas-page .ar-coverage-center small { font-size:.71rem; margin-top:5px; padding:0 10px; }
.areas-page .ar-map-label { position:absolute; display:flex; align-items:center; gap:12px; min-height:62px; width:28%; padding:15px 18px; border:1px solid #d8e2ed; border-radius:12px; background:#fff; color:var(--em-navy); font-weight:650; font-size:.95rem; text-decoration:none; box-shadow:0 4px 14px #14254305; transition:transform 160ms ease,border-color 160ms ease; }
.areas-page .ar-map-label .em-icon { width:21px; height:21px; color:var(--em-red); flex-shrink:0; }
.areas-page .ar-map-label .em-icon:last-child { margin-left:auto; width:17px; }
.areas-page .ar-map-label-1 { left:0; top:6%; }
.areas-page .ar-map-label-2 { left:0; top:41%; }
.areas-page .ar-map-label-3 { left:0; top:76%; }
.areas-page .ar-map-label-4 { right:0; top:0; }
.areas-page .ar-map-label-5 { right:0; top:26%; }
.areas-page .ar-map-label-6 { right:0; top:52%; }
.areas-page .ar-map-label-7 { right:0; top:78%; }
.areas-page .ar-map-note { text-align:center; font-size:.78rem; margin:26px 0 0; }
.areas-page .ar-emirate-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.areas-page .ar-emirate-card { min-width:0; padding:27px; border:1px solid #dce4ed; border-radius:16px; background:#fff; transition:transform 180ms ease,box-shadow 180ms ease; scroll-margin-top:160px; }
.areas-page .ar-emirate-card:first-child { grid-column:span 2; background:linear-gradient(130deg,#edf3f9,#f8f4ee); }
.areas-page .ar-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:25px; }
.areas-page .ar-index { color:#708092; font-size:.83rem; letter-spacing:.12em; }
.areas-page .ar-tile { width:44px; height:44px; display:grid; place-items:center; flex-shrink:0; color:var(--em-red); background:#fff3f3; border-radius:12px; }
.areas-page .ar-emirate-card h3 { margin:0 0 12px; }
.areas-page .ar-emirate-card p { margin:0; font-size:.9rem; }
.areas-page .ar-split { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.areas-page .ar-split > * { min-width:0; }
.areas-page .ar-inter { background:var(--em-navy); color:#fff; }
.areas-page .ar-inter h2 { color:#fff; }
.areas-page .ar-inter p { color:#d2dce8; }
.areas-page .ar-inter .em-eyebrow { color:#ff9eab; }
.areas-page .ar-inter .ar-badge { background:#ffffff08; border-color:#ffffff25; color:#fff; margin-top:24px; }
.areas-page .ar-inter .ar-badge .em-icon { color:#ff9eab; }
.areas-page .ar-routes { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.areas-page .ar-routes li { display:grid; grid-template-columns:1fr 22px 1fr; align-items:center; gap:17px; min-height:63px; padding:17px 22px; background:#ffffff06; border:1px solid #ffffff24; border-radius:12px; font-size:.93rem; }
.areas-page .ar-routes li .em-icon { color:#ff9eab; width:22px; }
.areas-page .ar-routes li span:last-child { text-align:right; }
.areas-page .ar-route-note { font-size:.78rem; margin:17px 0 0; }
.areas-page .ar-types { background:#f6f4f0; }
.areas-page .ar-type-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.areas-page .ar-type-grid article { padding:32px; background:#fff; border:1px solid #e1e5e9; border-radius:16px; border-top:3px solid var(--em-red); }
.areas-page .ar-type-grid article:last-child { border-top-color:var(--em-navy); }
.areas-page .ar-type-grid h3 { font-size:1.5rem; margin:22px 0; }
.areas-page .ar-points { list-style:none; margin:24px 0 28px; padding:0; display:grid; gap:17px; }
.areas-page .ar-points li { display:flex; gap:11px; align-items:flex-start; font-size:.91rem; line-height:1.5; }
.areas-page .ar-points .em-icon { flex-shrink:0; width:22px; height:22px; color:var(--em-red); }
.areas-page small { display:block; margin-top:4px; }
.areas-page .ar-service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.areas-page .ar-service-grid a { display:flex; align-items:center; gap:15px; padding:23px; min-height:100px; border:1px solid #dce4ed; border-radius:14px; text-decoration:none; background:#fff; transition:border-color 160ms ease,background 160ms ease; }
.areas-page .ar-service-grid h3 { font-size:.99rem; margin:0; }
.areas-page .ar-service-grid a>.em-icon { color:var(--em-red); width:19px; flex-shrink:0; margin-left:auto; }
.areas-page .ar-storage { background:#edf2f7; }
.areas-page .ar-photo { height:460px; overflow:hidden; border-radius:16px; }
.areas-page .ar-storage .ar-points { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.areas-page .ar-storage .ar-points li { display:flex; flex-direction:column; align-items:flex-start; gap:9px; font-weight:650; border-top:1px solid #ccd7e2; padding-top:16px; }
.areas-page .ar-availability { background:#fff3f1; border-block:1px solid #eedbd8; }
.areas-page .ar-availability-inner { display:grid; grid-template-columns:95px 1fr auto; gap:30px; align-items:center; }
.areas-page .ar-clock { width:90px; height:90px; display:grid; place-items:center; background:#fff; color:var(--em-red); border-radius:50%; border:1px solid #eedbd8; }
.areas-page .ar-clock .em-icon { width:48px; height:48px; }
.areas-page .ar-availability .button-row { flex-direction:column; }
.areas-page .ar-availability p { margin-bottom:0; max-width:580px; }
.areas-page .ar-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; padding:0; margin:0; border:1px solid #dce4ed; border-radius:16px; overflow:hidden; }
.areas-page .ar-steps li { padding:27px; border-right:1px solid #dce4ed; }
.areas-page .ar-steps li:last-child { border:0; }
.areas-page .ar-step-number { display:block; font-size:1.7rem; font-weight:700; color:var(--em-red); margin-bottom:19px; }
.areas-page .ar-steps h3 { font-size:1rem; margin:0; }
.areas-page .ar-faq { background:#f6f8fa; }
.areas-page .ar-faq .ar-split { grid-template-columns:.8fr 1.2fr; align-items:start; }
.areas-page .ar-questions details { border-bottom:1px solid #d9e2ec; }
.areas-page .ar-questions details:first-child { border-top:1px solid #d9e2ec; }
.areas-page .ar-questions summary { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:64px; padding:21px 4px; font-size:.95rem; line-height:1.5; font-weight:650; cursor:pointer; list-style:none; }
.areas-page .ar-questions summary::-webkit-details-marker { display:none; }
.areas-page .ar-questions summary span { font-size:1.4rem; color:var(--em-red); transition:transform 150ms ease; }
.areas-page .ar-questions details[open] summary span { transform:rotate(45deg); }
.areas-page .ar-questions p { margin:0; padding:0 28px 24px 4px; font-size:.92rem; }
.areas-page :is(a,summary):focus-visible,.areas-page .ar-emirate-card:focus { outline:3px solid #2874be; outline-offset:5px; }
.areas-page .ar-emirate-card:target { border-color:var(--em-red); box-shadow:0 0 0 3px #d8293c10; }
.areas-page .ar-cta { background:var(--em-red); }
.areas-page .ar-cta h2,.areas-page .ar-cta p { color:#fff; }
.areas-page .ar-cta .em-eyebrow { color:#ffe1e6; }
.areas-page .ar-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:42px; }
.areas-page .ar-cta-inner>div:first-child { max-width:720px; }
.areas-page .ar-cta .button-row { flex-shrink:0; flex-direction:column; }
@media(hover:hover) { .areas-page .ar-map-label:hover { border-color:var(--em-red); transform:translateY(-2px); } .areas-page .ar-emirate-card:hover { transform:translateY(-3px); box-shadow:var(--em-shadow-md); } .areas-page .ar-service-grid a:hover { border-color:var(--em-red); background:#fcf7f6; } }
@media(max-width:1199px) { .areas-page .ar-split,.areas-page .ar-hero-grid { gap:32px; } .areas-page .ar-hero-photo { height:520px; } .areas-page .ar-emirate-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .areas-page .ar-emirate-card:first-child { grid-column:span 2; } .areas-page .ar-service-grid a { padding:18px; gap:12px; } .areas-page .ar-availability-inner { grid-template-columns:80px 1fr; } .areas-page .ar-availability .button-row { grid-column:2; flex-direction:row; } .areas-page .ar-clock { width:72px; height:72px; } }
@media(max-width:1024px) { .areas-page .ar-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } .areas-page .ar-steps li { border-bottom:1px solid #dce4ed; } .areas-page .ar-steps li:nth-child(2n) { border-right:0; } .areas-page .ar-steps li:nth-last-child(2) { border-bottom:0; } }
@media(max-width:900px) { .areas-page .ar-hero-grid,.areas-page .ar-split,.areas-page .ar-faq .ar-split { grid-template-columns:1fr; } .areas-page .ar-hero-photo { height:420px; } .areas-page .ar-hero-photo img { object-position:center 35%; } .areas-page .ar-photo { height:410px; } .areas-page .ar-service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .areas-page .ar-cta-inner { flex-direction:column; align-items:flex-start; gap:26px; } .areas-page .ar-cta .button-row { flex-direction:row; } .areas-page .ar-map-label { width:30%; padding:14px 12px; gap:8px; font-size:.9rem; } .areas-page .ar-map-label .em-icon:last-child { display:none; } .areas-page .ar-coverage-center { width:155px; height:155px; } }
@media(max-width:600px) { .areas-page .ar-hero { padding-block:34px 42px; } .areas-page h1 { font-size:clamp(2.4rem,9.5vw,3.2rem); } .areas-page .ar-hero-photo { height:325px; border-radius:16px 42px 16px 16px; } .areas-page .ar-hero-photo img { object-position:58% center; } .areas-page .ar-coverage { height:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:25px; } .areas-page .ar-connections { display:none; } .areas-page .ar-coverage-center { position:static; transform:none; grid-column:1/-1; justify-self:center; margin-bottom:14px; } .areas-page .ar-map-label { position:static; width:auto; min-height:64px; font-size:.88rem; } .areas-page .ar-map-label:last-child { grid-column:1/-1; } .areas-page .ar-map-label:last-child .em-icon:last-child { display:block; } .areas-page .ar-emirate-grid,.areas-page .ar-type-grid,.areas-page .ar-service-grid,.areas-page .ar-steps { grid-template-columns:1fr; } .areas-page .ar-emirate-card:first-child { grid-column:auto; } .areas-page .ar-emirate-card { scroll-margin-top:125px; padding:24px; } .areas-page .ar-card-top { margin-bottom:20px; } .areas-page .ar-routes li { padding:16px; gap:12px; font-size:.88rem; } .areas-page .ar-type-grid article { padding:26px; } .areas-page .ar-service-grid a { min-height:85px; padding:18px; } .areas-page .ar-photo { height:320px; } .areas-page .ar-storage .ar-points li { font-size:.83rem; } .areas-page .ar-availability-inner { grid-template-columns:1fr; gap:22px; } .areas-page .ar-availability .button-row { grid-column:auto; } .areas-page .ar-steps li { border-right:0; display:grid; grid-template-columns:34px 1fr; align-items:center; gap:18px; padding:24px; } .areas-page .ar-steps li:nth-last-child(2) { border-bottom:1px solid #dce4ed; } .areas-page .ar-step-number { margin:0; font-size:1.4rem; } .areas-page .ar-steps p { grid-column:2; margin:0; } }
@media(max-width:480px) { .areas-page .button-row,.areas-page .ar-availability .button-row,.areas-page .ar-cta .button-row { flex-direction:column; width:100%; } .areas-page .button-row .em-button { width:100%; } }
@media(prefers-reduced-motion:reduce) { .areas-page .ar-map-label,.areas-page .ar-emirate-card,.areas-page .ar-questions summary span { transition:none; } .areas-page .ar-map-label:hover,.areas-page .ar-emirate-card:hover { transform:none; } }