/* Expatone directory: uses the existing local fonts and brand tokens. */
:root { --font-head:var(--f-display); --font:var(--f-ui); }
.directory-hero { padding-bottom:56px; }
.directory-hero .page-hero-content { max-width:920px; }
.directory-hero h1 { font:400 clamp(32px,4.2vw,56px)/1.2 var(--font-head); color:#fff; max-width:24ch; margin:0 0 22px; }
.directory-hero .hero-subtitle { max-width:68ch; color:#d3d8df; font-size:18px; line-height:1.75; }
.directory-hero .breadcrumb { flex-wrap:wrap; }
.directory-hero .breadcrumb a,.directory-hero .breadcrumb .cur { color:#d3d8df; }
.directory-hero .btn-outline-white { color:#fff; border-color:#a5aebd; }
.directory-hero .btn-gold { color:#0a1220; }
.directory-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:64px; padding-block:64px; align-items:start; }
.directory-copy { min-width:0; max-width:76ch; font-size:17px; line-height:1.85; }
.directory-copy h2 { font:400 clamp(25px,2.8vw,34px)/1.35 var(--font-head); color:var(--navy-dark); margin:0 0 22px; }
.directory-copy h3 { font:600 19px/1.5 var(--font); margin:26px 0 10px; }
.directory-copy p { margin:0 0 20px; }
.directory-copy section { margin-bottom:52px; scroll-margin-top:110px; }
.directory-copy ul,.directory-copy ol { padding-left:24px; margin:18px 0 24px; }
.directory-copy ul { list-style:disc; }
.directory-copy ol { list-style:decimal; }
.directory-copy li { margin-bottom:12px; }
.directory-copy a,.directory-aside a,.directory-intro a { color:#7c5c2c; text-decoration:underline; text-underline-offset:4px; }
.directory-copy .btn { text-decoration:none; color:var(--navy-dark); }
.directory-aside { background:#f7f5f0; padding:28px; border-radius:10px; }
.directory-aside h2 { font:600 18px/1.4 var(--font); margin:0 0 18px; }
.directory-aside dl { margin:0 0 24px; }
.directory-aside dt { font-size:13px; color:#626871; margin-top:18px; }
.directory-aside dd { margin:6px 0 0; font-size:16px; }
.directory-aside nav { display:grid; gap:14px; font-size:14px; }
.directory-aside p { margin-top:22px; font-size:13px; line-height:1.7; color:#626871; }
.directory-note { background:#f7f5f0; padding:24px; border-left:3px solid #b8965a; border-radius:0 10px 10px 0; }
.directory-note p:last-child { margin:0; }
.directory-faq details { border-bottom:1px solid #dadde1; padding:20px 0; }
.directory-faq summary { cursor:pointer; font-weight:600; line-height:1.6; padding-right:10px; }
.directory-faq details p { margin:16px 0 0; }
.directory-sources { font-size:14px; line-height:1.8; overflow-wrap:anywhere; }
.directory-copy .directory-related { display:grid; gap:12px; list-style:none; padding-left:0!important; }
.directory-related li { margin:0; }
.directory-cta { padding:32px; background:#f7f5f0; border-radius:10px; }
.directory-cta h2 { font-size:28px; }
.directory-cta small { display:block; font-size:13px; line-height:1.65; margin-top:16px; color:#626871; }
.directory-catalog { padding-block:56px; }
.directory-intro { max-width:76ch; font-size:17px; line-height:1.8; margin:0 0 32px; }
.directory-filters { display:grid; grid-template-columns:1.3fr 1fr 1fr auto; gap:16px; align-items:end; padding:24px; background:#f7f5f0; border-radius:10px; }
.directory-filters label { display:grid; gap:8px; font-size:14px; font-weight:500; }
.directory-filters input,.directory-filters select { width:100%; min-height:48px; padding:10px 12px; border:1px solid #a7adb4; border-radius:6px; background:white; color:#14181f; font:16px var(--font); }
.directory-filters button { min-height:48px; padding:10px 16px; border:1px solid #a7adb4; border-radius:6px; background:white; cursor:pointer; color:#14181f; font:14px var(--font); }
.directory-count { font-size:14px; color:#626871; margin:20px 0; }
.zone-list { list-style:none; padding:0; margin:0; }
.zone-row { display:grid; grid-template-columns:minmax(190px,.7fr) 140px minmax(0,1.7fr); gap:28px; padding:27px 0; border-top:1px solid #dadde1; align-items:start; }
.zone-row h2 { font:600 22px/1.45 var(--font); margin:0; }
.zone-row h2 a { color:var(--navy); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.zone-row p { margin:0; font-size:15px; line-height:1.8; }
.zone-row .zone-emirate { font-size:13px; line-height:2; color:#626871; }
.zone-row[hidden],.directory-filters[hidden],.directory-empty[hidden] { display:none!important; }
.directory-empty { padding:28px; background:#f7f5f0; border-radius:10px; }
.directory-copy :focus-visible,.directory-aside :focus-visible,.directory-filters :focus-visible,.zone-row :focus-visible { outline:3px solid #7c5c2c; outline-offset:5px; }
@media(max-width:900px) {
 .directory-layout { grid-template-columns:1fr; gap:34px; padding-block:40px; }
 .directory-aside { grid-row:1; }
 .directory-aside dl { display:flex; flex-wrap:wrap; gap:24px; }
 .directory-aside nav { grid-template-columns:1fr 1fr; }
 .directory-filters { grid-template-columns:1fr 1fr; }
 .zone-row { grid-template-columns:minmax(150px,1fr) 2fr; gap:12px 24px; }
 .zone-row .zone-emirate { grid-column:1; grid-row:2; }
 .zone-row .zone-description { grid-column:2; grid-row:1 / span 2; }
}
@media(max-width:540px) {
 .directory-hero { padding-bottom:38px; }
 .directory-hero h1 { font-size:32px; overflow-wrap:break-word; }
 .directory-hero .hero-subtitle { font-size:16px; }
 .directory-hero .page-hero-actions .btn { width:100%; white-space:normal; text-align:center; }
 .directory-catalog { padding-block:32px; }
 .directory-filters { grid-template-columns:1fr; padding:18px; }
 .directory-copy { font-size:16px; }
 .directory-copy section { margin-bottom:38px; }
 .directory-aside,.directory-cta { padding:22px; }
 .zone-row { display:block; padding:24px 0; }
 .zone-row .zone-emirate { margin:6px 0 10px; }
}