/*
Theme Name: Hadramout Atlas
Description: Trilingual (English, Arabic, German) corporate block theme for Hadramout Investment Group, built from the Atlas design concept.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hadramout-atlas
Tags: full-site-editing, block-patterns, block-styles, wide-blocks
*/

/* WordPress inserts a margin-block-start equal to the block gap (24px unless
   theme.json sets styles.spacing.blockGap) between the template's top-level
   sections (header part, main, footer part) — a gap that exists even when no
   markup asks for it. Zero it so sections butt edge-to-edge and own their
   vertical rhythm via padding; this does not affect block gaps inside nested
   layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* With that gap gone, main carries its own vertical padding so templates this
   theme does not author (WooCommerce shop, product, cart…) still clear the
   header and footer. A descendant selector, not a child one: WooCommerce wraps
   the single-product main in an extra group. Templates built from full-bleed
   sections opt out with is-flush and let the sections own the rhythm. */
.wp-site-blocks main {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}
.wp-site-blocks main.is-flush {
	padding-block: 0;
}

/* === Atlas concept CSS (generated by build.py from concept-atlas/css/site.css) === */



/* =========================================================
   HADRAMOUT INVESTMENT GROUP · CONCEPT "ATLAS"
   Corporate holding-group site: white + deep navy, gold as accent only.
   Strict 12-column grid, fine hairlines, numbered section labels,
   oversized numerals, rectangles only (no radius anywhere).
   Shared by: index, about, businesses, locations, services, contact.
   ========================================================= *//* ---------- 1. tokens ---------- */
:root{
  --ink:var(--wp--preset--color--ink); --navy-900:var(--wp--preset--color--primary); --navy-800:var(--wp--preset--color--navy-800); --navy:var(--wp--preset--color--navy); --royal:var(--wp--preset--color--royal); --blue:var(--wp--preset--color--blue);
  --gold:var(--wp--preset--color--gold); --gold-lt:var(--wp--preset--color--gold-lt); --gold-d:var(--wp--preset--color--gold-d); --bronze-ink:var(--wp--preset--color--bronze-ink);
  --text:var(--wp--preset--color--text); --mist:var(--wp--preset--color--mist); --white:#fff; --ui:var(--wp--preset--color--ui);
  --line:rgba(14,28,46,.12); --line-2:rgba(14,28,46,.22); --line-d:rgba(255,255,255,.14); --line-d2:rgba(255,255,255,.28);
  --ff:"Raleway",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-ar:"Cairo",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-io:cubic-bezier(.7,0,.2,1);
  --wrap:1320px; --gut:clamp(20px,4vw,48px); --cg:clamp(16px,2vw,32px);
  --hdr:84px; --hdr-s:66px;
  --sec:clamp(80px,9vw,136px);
}
@media (max-width:1023px){ :root{ --hdr:68px; --hdr-s:64px; } }


/* ---------- 2. base ---------- */
*,*::before,*::after{box-sizing:border-box; border-radius:0}
html{overflow-anchor:none; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--hdr-s) + 24px)}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{margin:0; background:#fff; color:var(--text); font:400 1.0625rem/1.7 var(--ff); -webkit-font-smoothing:antialiased; overflow-x:clip}
[dir=rtl] body{font-family:var(--ff-ar); line-height:1.85}
img,svg{display:block; max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0; color:var(--navy-900); font-family:var(--ff); font-weight:800; line-height:1.12; letter-spacing:-.015em; text-wrap:balance}
[dir=rtl] :is(h1,h2,h3,h4){font-family:var(--ff-ar); letter-spacing:0; line-height:1.4}
p{margin:0}
:is(ul,:where(.t-ul)),:is(ol,:where(.t-ol)){margin:0; padding:0; list-style:none}
:is(figure,:where(.t-figure)){margin:0}
:is(address,:where(.t-address)){font-style:normal}
button{font:inherit; color:inherit; cursor:pointer; border-radius:0}
input,select,textarea{font:inherit; border-radius:0}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
.dark :focus-visible,.band-photo :focus-visible,.ft :focus-visible,.hero :focus-visible{outline-color:var(--gold-lt)}
::selection{background:var(--gold); color:var(--ink)}


/* ---------- 3. utilities ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:-1px}
.skip{position:fixed; inset-inline-start:12px; top:-80px; z-index:300; background:var(--gold); color:var(--ink); padding:12px 18px; font-weight:700; text-decoration:none}
.skip:focus{top:12px}
.skip:focus-visible{outline:2px solid #fff; outline-offset:2px}
.nw{white-space:nowrap}
.ic{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:square; flex:none}
[dir=rtl] .ic-flip{transform:scaleX(-1)}
.ltr{direction:ltr; unicode-bidi:isolate}


/* 12-column grid */
.g12{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--cg); row-gap:clamp(32px,4vw,56px)}
.c3{grid-column-end:span 3}.c4{grid-column-end:span 4}.c5{grid-column-end:span 5}.c6{grid-column-end:span 6}
.c7{grid-column-end:span 7}.c8{grid-column-end:span 8}.c9{grid-column-end:span 9}.c12{grid-column:1/-1}
.from-2{grid-column-start:2}.from-5{grid-column-start:5}.from-6{grid-column-start:6}.from-7{grid-column-start:7}.from-8{grid-column-start:8}.from-9{grid-column-start:9}
.self-end{align-self:end}.self-center{align-self:center}

/* fine column hairlines laid over a section (decor): add .cols to the section, it draws 12 lines */
.cols{position:relative; isolation:isolate}
.cols::after{content:""; position:absolute; z-index:-1; inset-block:0; inset-inline:max(var(--gut), calc((100% - var(--wrap))/2 + var(--gut))); pointer-events:none;
  background-image:linear-gradient(90deg,var(--hl,var(--line)) 1px,transparent 1px); background-size:calc(100% / 12) 100%;
  border-inline-end:1px solid var(--hl,var(--line)); opacity:.55}
.dark.cols,.band-photo.cols{--hl:rgba(255,255,255,.07)}
.cols.cols-4::after{background-size:25% 100%}


/* ---------- 4. type ---------- */
.h1{font-size:clamp(2.6rem,1.3rem + 4.6vw,5.6rem); font-weight:300; line-height:1.02; letter-spacing:-.025em}
.h2{font-size:clamp(2rem,1.25rem + 2.5vw,3.4rem); font-weight:300; letter-spacing:-.02em}
.h3{font-size:clamp(1.35rem,1.15rem + .6vw,1.75rem); font-weight:700}
:is(.h1,.h2,.h3) em{font-style:normal; font-weight:800; color:var(--gold-d)}
[dir=rtl] :is(.h1,.h2){font-weight:400; letter-spacing:0}
[dir=rtl] .h1{line-height:1.3}
.dark :is(h1,h2,h3,h4),.band-photo :is(h1,h2,h3,h4),.hero :is(h1,h2,h3){color:#fff}
.dark :is(.h1,.h2,.h3) em,.band-photo :is(.h1,.h2,.h3) em,.hero .h1 em{color:var(--gold)}

/* low specificity on purpose: any single-class colour on a <p> (e.g. .lx-k, .map-co) still wins inside dark sections */
:where(.dark,.band-photo) p{color:var(--mist)}
.lead{font-size:clamp(1.1rem,1rem + .35vw,1.3rem); line-height:1.65; color:var(--navy-900); font-weight:500}
[dir=rtl] .lead{font-weight:400}
.dark .lead,.band-photo .lead{color:#fff; opacity:.9}
.prose{display:grid; gap:18px; max-width:40em}
.muted{color:var(--text)}


/* numbered section label: "01 — Who we are" with a hairline that draws in */
.label{display:flex; align-items:center; gap:14px; margin-bottom:clamp(20px,2.4vw,30px); font:700 .74rem/1 var(--ff); letter-spacing:.2em; text-transform:uppercase; color:var(--navy-900)}
[dir=rtl] .label{font-family:var(--ff-ar); letter-spacing:0; font-size:.95rem}
.label b{font-weight:700; color:var(--bronze-ink); font-variant-numeric:tabular-nums}
.label b::after{content:" —"; color:var(--mist); font-weight:400}
.label b{flex:none; white-space:nowrap}
.label :is(span,:where(.t-span)){min-width:0; line-height:1.35}   
/* a label that wraps (narrow screens) keeps readable leading */
.label::after{content:""; flex:1; min-width:24px; height:1px; background:var(--line-2); transform-origin:var(--o-s,left); transition:transform 1.2s var(--ease) .15s}
[dir=rtl] .label{--o-s:right}
.label.short::after{flex:0 0 48px; background:var(--gold); height:2px}
.js .label[data-rv]:not(.in)::after{transform:scaleX(0)}
.dark .label,.band-photo .label,.hero .label{color:#fff}
.dark .label b,.band-photo .label b,.hero .label b{color:var(--gold)}
.dark .label::after,.band-photo .label::after,.hero .label::after{background:var(--line-d2)}


/* section head: label on top, then heading (7 cols) + intro (5 cols) */
.sh{margin-bottom:clamp(40px,5vw,72px)}
.sh-row{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--cg); row-gap:20px; align-items:end}
.sh-row > :first-child{grid-column:span 7}
.sh-row > :nth-child(2){grid-column:9 / -1}
.sh-row > p{max-width:32em}
.sh-act{display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; margin-top:22px}


/* ---------- 5. buttons + links ---------- */
.btn:where(:not(.wp-block-button)),.wp-block-button.btn > .wp-element-button{position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; padding:0 26px; border:1px solid var(--navy-900); background:transparent; color:var(--navy-900); font:700 .78rem/1 var(--ff); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; white-space:nowrap; transition:color .45s var(--ease), border-color .45s var(--ease)}
[dir=rtl] .btn:where(:not(.wp-block-button)),[dir=rtl] .wp-block-button.btn > .wp-element-button{font-family:var(--ff-ar); letter-spacing:0; font-size:.95rem}
.btn:where(:not(.wp-block-button))::before,.wp-block-button.btn > .wp-element-button::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--fill,var(--navy-900)); transform:scaleX(0); transform-origin:var(--o-s,left); transition:transform .5s var(--ease)}
[dir=rtl] .btn:where(:not(.wp-block-button))::before,[dir=rtl] .wp-block-button.btn > .wp-element-button::before{--o-s:right}
.btn:where(:not(.wp-block-button)):hover::before,.wp-block-button.btn > .wp-element-button:hover::before,.btn:where(:not(.wp-block-button)):focus-visible::before,.wp-block-button.btn > .wp-element-button:focus-visible::before{transform:scaleX(1)}
.btn:where(:not(.wp-block-button)):hover,.wp-block-button.btn > .wp-element-button:hover,.btn:where(:not(.wp-block-button)):focus-visible,.wp-block-button.btn > .wp-element-button:focus-visible{color:var(--on,#fff); border-color:var(--fill,var(--navy-900))}
.btn:where(:not(.wp-block-button)) .ic,.wp-block-button.btn > .wp-element-button .ic{transition:transform .45s var(--ease)}
.btn:where(:not(.wp-block-button)):hover .ic,.wp-block-button.btn > .wp-element-button:hover .ic{transform:translateX(4px)}
[dir=rtl] .btn:where(:not(.wp-block-button)):hover .ic,[dir=rtl] .wp-block-button.btn > .wp-element-button:hover .ic{transform:scaleX(-1) translateX(4px)}
.btn--gold:where(:not(.wp-block-button)),.wp-block-button.btn--gold > .wp-element-button{background:var(--gold); border-color:var(--gold); color:var(--ink); --fill:var(--navy-900); --on:#fff}
.btn--navy:where(:not(.wp-block-button)),.wp-block-button.btn--navy > .wp-element-button{background:var(--navy-900); border-color:var(--navy-900); color:#fff; --fill:var(--gold); --on:var(--ink)}
.btn--navy:where(:not(.wp-block-button)):hover,.wp-block-button.btn--navy > .wp-element-button:hover,.btn--navy:where(:not(.wp-block-button)):focus-visible,.wp-block-button.btn--navy > .wp-element-button:focus-visible{border-color:var(--gold)}
.btn--light:where(:not(.wp-block-button)),.wp-block-button.btn--light > .wp-element-button{border-color:rgba(255,255,255,.55); color:#fff; --fill:#fff; --on:var(--navy-900)}
.dark .btn--gold:where(:not(.wp-block-button)),.dark .wp-block-button.btn--gold > .wp-element-button,.band-photo .btn--gold:where(:not(.wp-block-button)),.band-photo .wp-block-button.btn--gold > .wp-element-button,.hero .btn--gold:where(:not(.wp-block-button)),.hero .wp-block-button.btn--gold > .wp-element-button{--fill:#fff; --on:var(--ink)}
.dark .btn--gold:where(:not(.wp-block-button)):hover,.dark .wp-block-button.btn--gold > .wp-element-button:hover,.band-photo .btn--gold:where(:not(.wp-block-button)):hover,.band-photo .wp-block-button.btn--gold > .wp-element-button:hover,.hero .btn--gold:where(:not(.wp-block-button)):hover,.hero .wp-block-button.btn--gold > .wp-element-button:hover{border-color:#fff}
.btn-row{display:flex; flex-wrap:wrap; gap:14px}


/* text link with an underline that draws in, arrow nudges */
.more{display:inline-flex; align-items:center; gap:10px; min-height:44px; font:700 .78rem/1.2 var(--ff); letter-spacing:.14em; text-transform:uppercase; color:var(--navy-900); text-decoration:none; position:relative}
[dir=rtl] .more{font-family:var(--ff-ar); letter-spacing:0; font-size:.95rem; text-transform:none}
.more :is(span,:where(.t-span)){position:relative; padding-block:4px}
.more :is(span,:where(.t-span))::after{content:""; position:absolute; inset-inline:0; bottom:0; height:2px; background:var(--gold); transform:scaleX(.28); transform-origin:var(--o-s,left); transition:transform .5s var(--ease)}
[dir=rtl] .more :is(span,:where(.t-span))::after{--o-s:right}
.more:hover :is(span,:where(.t-span))::after,.more:focus-visible :is(span,:where(.t-span))::after{transform:scaleX(1)}
.more .ic{color:var(--gold-d); transition:transform .45s var(--ease)}
.more:hover .ic{transform:translateX(5px)}
[dir=rtl] .more:hover .ic{transform:scaleX(-1) translateX(5px)}

/* the external-link icon is not an arrow: it neither nudges nor mirrors */
.more .ic.ext{transition:none}
.more:hover .ic.ext,[dir=rtl] .more:hover .ic.ext,.card:hover .more .ic.ext,[dir=rtl] .card:hover .more .ic.ext{transform:none}
.dark .more,.band-photo .more{color:#fff}
.dark .more .ic,.band-photo .more .ic{color:var(--gold)}


/* square icon button (prev/next/pause) */
.sq{width:48px; height:48px; display:inline-grid; place-items:center; border:1px solid var(--line-2); background:transparent; color:var(--navy-900); transition:background .3s, color .3s, border-color .3s}
.sq:hover{background:var(--navy-900); color:#fff; border-color:var(--navy-900)}
.sq:disabled{opacity:.3; pointer-events:none}
.dark .sq,.band-photo .sq,.hero .sq{border-color:var(--line-d2); color:#fff}
.dark .sq:hover,.band-photo .sq:hover,.hero .sq:hover{background:#fff; color:var(--navy-900); border-color:#fff}
.sq .i-play{display:none}
.is-paused .sq .i-play{display:block}
.is-paused .sq .i-pause{display:none}


/* ---------- 6. header ---------- */
.hdr{position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--line); transition:box-shadow .4s var(--ease)}
.hdr.is-scrolled{box-shadow:0 10px 30px -22px rgba(10,20,34,.55)}

/* transparent header over the opening photo (owner request, 12 Nov 2026): the page's first section slides
   up under the bar; the bar turns white again once the page scrolls, a sub-menu opens or the phone menu opens.
   Only with JavaScript (it sets is-scrolled) and only when the page opens with a photo section. */
.hdr{transition:background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease)}
.js #main:has(> .wp-block-post-content > .hero:first-child, > .wp-block-post-content > .pbn:first-child){margin-top:calc(-1 * var(--hdr) - 1px)}
.js #main > .wp-block-post-content > .hero:first-child,.js #main > .wp-block-post-content > .pbn:first-child{padding-top:calc(var(--hdr) + 1px)}
.js #main > .wp-block-post-content > .hero:first-child{min-height:calc(clamp(560px,calc(100svh - var(--hdr) - 120px),780px) + var(--hdr))}
.js #main > .wp-block-post-content > .pbn:first-child{min-height:calc(clamp(380px,46vw,560px) + var(--hdr))}
#main:focus{outline:none}   
/* skip-link target: the container itself shows no ring; the next Tab does */
.top-anchor{position:absolute; top:0}
.brand .logo-r{display:none}
.js .hdr:not(.is-scrolled):not(:has(.nav-item.is-open)):not(:has(.burger[aria-expanded=true])){background:linear-gradient(180deg,rgba(10,20,34,.65),rgba(10,20,34,0)); border-bottom-color:rgba(255,255,255,.18)}
.js .hdr:not(.is-scrolled):not(:has(.nav-item.is-open)):not(:has(.burger[aria-expanded=true])) .brand .logo-c{display:none}
.js .hdr:not(.is-scrolled):not(:has(.nav-item.is-open)):not(:has(.burger[aria-expanded=true])) .brand .logo-r{display:block}
.js .hdr:not(.is-scrolled):not(:has(.nav-item.is-open)):not(:has(.burger[aria-expanded=true])) .nav-link,.js .hdr:not(.is-scrolled):not(:has(.nav-item.is-open)):not(:has(.burger[aria-expanded=true])) .nav-link[aria-current=page],.js .hdr:not(.is-scrolled):not(:has(.nav-item.is-open)):not(:has(.burger[aria-expanded=true])) .dd-btn{color:#fff}
.js .hdr:not(.is-scrolled):not(:has(.nav-item.is-open)):not(:has(.burger[aria-expanded=true])) :focus-visible:not(.lang-o){outline-color:var(--gold-lt)}
.js .hdr:not(.is-scrolled):not(:has(.nav-item.is-open)):not(:has(.burger[aria-expanded=true])) .brand:focus-visible,.js .hdr:not(.is-scrolled):not(:has(.nav-item.is-open)):not(:has(.burger[aria-expanded=true])) .nav-link:focus-visible,.js .hdr:not(.is-scrolled):not(:has(.nav-item.is-open)):not(:has(.burger[aria-expanded=true])) .dd-btn:focus-visible,.js .hdr:not(.is-scrolled):not(:has(.nav-item.is-open)):not(:has(.burger[aria-expanded=true])) .burger:focus-visible{box-shadow:0 0 0 7px rgba(10,20,34,.6)}
.js .hdr:not(.is-scrolled):not(:has(.nav-item.is-open)):not(:has(.burger[aria-expanded=true])) .hdr-tools .lang-btn,.js .hdr:not(.is-scrolled):not(:has(.nav-item.is-open)):not(:has(.burger[aria-expanded=true])) .burger{background:rgba(10,20,34,.28); border-color:rgba(255,255,255,.7); color:#fff}
.js .hdr:not(.is-scrolled):not(:has(.nav-item.is-open)):not(:has(.burger[aria-expanded=true])) .hdr-tools .lang-btn:hover,.js .hdr:not(.is-scrolled):not(:has(.nav-item.is-open)):not(:has(.burger[aria-expanded=true])) .hdr-tools .lang-dd.is-open .lang-btn{background:rgba(10,20,34,.5)}
.js .hdr:not(.is-scrolled):not(:has(.nav-item.is-open)):not(:has(.burger[aria-expanded=true])) .burger :is(span,:where(.t-span)){background:#fff}
.hdr-in{display:flex; align-items:center; gap:clamp(16px,2vw,32px); height:var(--hdr); transition:height .4s var(--ease)}
.hdr.is-scrolled .hdr-in{height:var(--hdr-s)}
.brand{display:block; flex:none; padding-block:6px}
.brand img{height:54px; width:auto; transition:height .4s var(--ease)}
.hdr.is-scrolled .brand img{height:40px}
.nav{margin-inline-start:auto; align-self:stretch; display:flex}
.nav-list{display:flex; align-items:stretch; gap:2px}
.nav-item{display:flex; align-items:center; position:static}
.nav-link{position:relative; display:flex; align-items:center; min-height:44px; padding:0 10px; font:600 .9rem/1 var(--ff); color:var(--navy-900); text-decoration:none; white-space:nowrap}
[dir=rtl] .nav-link{font-family:var(--ff-ar); font-size:1rem; font-weight:600}
.nav-link::after{content:""; position:absolute; inset-inline:10px; bottom:4px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:var(--o-s,left); transition:transform .45s var(--ease)}
[dir=rtl] .nav-link::after{--o-s:right}
.nav-link:hover::after,.nav-link[aria-current=page]::after,.nav-item.is-open .nav-link::after{transform:scaleX(1)}
.nav-link[aria-current=page]{color:var(--navy-900); font-weight:700}
.has-dd .nav-link{padding-inline-end:0}
.has-dd .nav-link::after{inset-inline-end:0}
.dd-btn{display:grid; place-items:center; width:44px; min-height:44px; padding:0; border:0; background:none; color:var(--navy-900)}
.dd-btn .ic{width:14px; height:14px; transition:transform .35s var(--ease)}
.dd-btn[aria-expanded=true] .ic{transform:rotate(180deg)}

/* mega panel */
.dd{position:absolute; inset-inline:0; top:100%; z-index:90; background:#fff; border-top:1px solid var(--line); border-bottom:3px solid var(--gold); box-shadow:0 30px 50px -30px rgba(10,20,34,.45); visibility:hidden; clip-path:inset(0 0 100% 0); transition:clip-path .45s var(--ease-io), visibility 0s .45s}
.nav-item.is-open .dd{visibility:visible; clip-path:inset(0 0 -60px 0); transition:clip-path .5s var(--ease-io), visibility 0s}
.dd-in{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--cg); padding-block:36px 40px}
.dd-intro{grid-column:span 4; display:grid; align-content:start; gap:14px; padding-inline-end:24px; border-inline-end:1px solid var(--line)}
.dd-intro .label{margin:0}
.dd-intro .dd-title{font:300 1.7rem/1.2 var(--ff); color:var(--navy-900); letter-spacing:-.01em}
[dir=rtl] .dd-intro .dd-title{font-family:var(--ff-ar); font-weight:400}
.dd-title em{font-style:normal; font-weight:800; color:var(--gold-d)}
.dd-intro p{font-size:.95rem}
.dd-grid{grid-column:5 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; align-content:start; border-top:1px solid var(--line)}
.dd-grid.c4g{grid-template-columns:repeat(4,minmax(0,1fr))}
.dd-grid :is(li,:where(.t-li)){border-bottom:1px solid var(--line); border-inline-start:1px solid var(--line)}
.dd-grid :is(li,:where(.t-li)):nth-child(3n+1){border-inline-start:0}
.dd-grid.c4g :is(li,:where(.t-li)){border-inline-start:1px solid var(--line)}
.dd-grid.c4g :is(li,:where(.t-li)):nth-child(4n+1){border-inline-start:0}
.dd-a{position:relative; display:grid; align-content:start; gap:6px; min-height:100%; padding:18px 18px 20px; text-decoration:none; color:var(--navy-900); transition:background .3s}
.dd-a::before{content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px; background:var(--gold); transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease)}
.dd-a:hover,.dd-a:focus-visible{background:var(--ui)}
.dd-a:hover::before,.dd-a:focus-visible::before{transform:scaleY(1)}
.dd-a b{font:700 .7rem/1 var(--ff); letter-spacing:.16em; color:var(--bronze-ink)}
.dd-a strong{font:700 1rem/1.3 var(--ff)}
[dir=rtl] .dd-a strong{font-family:var(--ff-ar)}
.dd-a :is(small,:where(.t-small)){font-size:.82rem; line-height:1.4; color:var(--text)}

/* tools */
.hdr-tools{display:flex; align-items:center; gap:10px; flex:none}

/* language dropdown (header + phone menu): a button with the current language's own name, and a list of
   three links (?lang=; JS switches in place). Square, white, gold base line like the menu panels. */
.lang-o{position:relative; display:flex; align-items:center; min-height:44px; padding:0 16px; font:700 .84rem/1.2 var(--ff); letter-spacing:.02em; color:var(--navy-900); text-decoration:none; white-space:nowrap; transition:background .3s, color .3s}
.lang-o:lang(ar){font-family:var(--ff-ar); font-size:.98rem; letter-spacing:0}
.lang-o::before{content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px; background:var(--gold); transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease)}
.lang-o:hover,.lang-o:focus-visible{background:var(--ui)}
.lang-o:not([aria-current]):hover::before,.lang-o:not([aria-current]):focus-visible::before{transform:scaleY(1)}
.lang-o:focus-visible{outline:2px solid var(--navy-900); outline-offset:-4px}
.lang-o[aria-current=true]{background:var(--navy-900); color:#fff; cursor:default}
.lang-o[aria-current=true]:focus-visible{outline-color:var(--gold)}
.lang-dd{position:relative}
.lang-btn{display:flex; align-items:center; justify-content:space-between; gap:8px; height:46px; padding-block:0; padding-inline:16px 12px; border:1px solid var(--line-2); background:#fff; color:var(--navy-900); font:700 .84rem/1 var(--ff); letter-spacing:.02em; cursor:pointer; transition:background .3s}
.hdr-tools .lang-btn{min-width:112px}   
/* one width for English / عربي / Deutsch: the nav does not shift and the list matches it */
.lang-btn:hover,.lang-dd.is-open .lang-btn{background:var(--ui)}
.lang-btn:focus-visible{outline:2px solid var(--navy-900); outline-offset:-4px}
.lang-btn .ic{width:16px; height:16px; flex:none; transition:transform .3s}
.lang-dd.is-open .lang-btn .ic{transform:rotate(180deg)}
.lang-cur:lang(ar){font-family:var(--ff-ar); font-size:.98rem; letter-spacing:0}
.lang-list{position:absolute; top:100%; margin-top:-1px; inset-inline-start:0; z-index:95; width:100%; padding:0; background:#fff; border:1px solid var(--line-2); border-bottom:3px solid var(--gold); box-shadow:0 24px 40px -24px rgba(10,20,34,.45); visibility:hidden; opacity:0; transform:translateY(-4px); transition:opacity .2s, transform .2s, visibility 0s .2s}
.lang-dd.is-open .lang-list{visibility:visible; opacity:1; transform:none; transition:opacity .2s, transform .2s, visibility 0s}
.lang-list :is(li,:where(.t-li)) + :is(li,:where(.t-li)){border-top:1px solid var(--line)}
.no-js .lang-dd,.no-js .burger{display:none}   
/* the language links need JavaScript to apply a language */
.hdr-cta{min-height:46px; min-width:138px; padding:0 20px}
.burger{display:none; position:relative; width:46px; height:46px; border:1px solid var(--line-2); background:#fff}
.burger :is(span,:where(.t-span)){position:absolute; inset-inline:12px; height:2px; background:var(--navy-900); transition:transform .3s var(--ease), opacity .3s}
.burger :is(span,:where(.t-span)):nth-child(1){top:15px}.burger :is(span,:where(.t-span)):nth-child(2){top:21px}.burger :is(span,:where(.t-span)):nth-child(3){top:27px}
.burger[aria-expanded=true] :is(span,:where(.t-span)):nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] :is(span,:where(.t-span)):nth-child(2){opacity:0}
.burger[aria-expanded=true] :is(span,:where(.t-span)):nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hdr-prog{position:absolute; inset-inline:0; bottom:-1px; height:2px; background:var(--gold); transform:scaleX(var(--p,0)); transform-origin:var(--o-s,left); pointer-events:none}
[dir=rtl] .hdr-prog{--o-s:right}
.nav-foot{display:none}


/* ---------- 6b. German: no automatic hyphenation (lang="de" on <html>) ----------
   Running text, labels, links, addresses, brand, company and place names never auto-hyphenate
   (no "Dam-mam", "Hadra-mout", "Ka-rinca", "Part-nerschaft"). overflow-wrap is the safety net; a compound that
   really overflows at 390 gets a soft hyphen (&shy;) in its string. Only h1 / h3 / h4 on phones may still break
   long compounds, and only with 6+ letters on each side */
html:lang(de) body{-webkit-hyphens:manual; hyphens:manual; overflow-wrap:break-word}
@media (max-width:767px){
  html:lang(de) :is(h1,h3,h4,.hero p.h1):not(.label){-webkit-hyphens:auto; hyphens:auto; -webkit-hyphenate-limit-chars:12 6 6; hyphenate-limit-chars:12 6 6}
}
/* figure labels ("GESCHÄFTSFELDER") fit the two-column grid on phones */
@media (max-width:720px){ html:lang(de) .fig-k{letter-spacing:.08em; font-size:.7rem} }
/* Businesses sectors-by-country table: "Deutschland" fits its 84px row header at 390 */
@media (max-width:420px){ html:lang(de) .mx th[scope=row] strong{font-size:.84rem} }


/* ---------- 7. page curtain (internal page changes) ---------- */
.curtain{position:fixed; inset:0; z-index:250; pointer-events:none; background:var(--navy-900); transform:scaleX(0); transform-origin:left center}
.curtain::after{content:""; position:absolute; inset-block:0; width:3px; background:var(--gold); inset-inline-end:0}
[dir=rtl] .curtain{transform-origin:right center}
.is-leaving .curtain{transform:scaleX(1); transition:transform .34s var(--ease-io)}
.has-curtain .curtain{transform-origin:right center; animation:curtainOut .45s var(--ease-io) both}
[dir=rtl].has-curtain .curtain{transform-origin:left center}
@keyframes curtainOut{from{transform:scaleX(1)}to{transform:scaleX(0)}}


/* ---------- 8. page header banner (inner pages) ---------- */
.pbn{position:relative; isolation:isolate; overflow:hidden; background:var(--navy-900); color:#fff; min-height:clamp(380px,46vw,560px); display:flex; align-items:flex-end}
.pbn-media{position:absolute; inset:0; z-index:-2}
.pbn-media img{width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); transform:scale(1.08); animation:pbnZoom 2.4s var(--ease) .1s both}
@keyframes pbnZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.pbn::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(14,28,46,.94) 0%,rgba(14,28,46,.78) 42%,rgba(14,28,46,.35) 100%),linear-gradient(0deg,rgba(10,20,34,.6),transparent 50%)}
[dir=rtl] .pbn::before{background:linear-gradient(270deg,rgba(14,28,46,.94) 0%,rgba(14,28,46,.78) 42%,rgba(14,28,46,.35) 100%),linear-gradient(0deg,rgba(10,20,34,.6),transparent 50%)}
.pbn-in{width:100%; padding-block:clamp(48px,6vw,88px)}
.pbn-in .g12 > :is(div,:where(.t-div)){grid-column:span 8; display:grid; gap:20px}
.pbn h1{color:#fff}
.pbn h1 em{color:var(--gold)}
.pbn p.lead{color:#fff; opacity:.88; max-width:38em}
.crumbs :is(ol,:where(.t-ol)){display:flex; flex-wrap:wrap; align-items:center; gap:10px; font:600 .78rem/1 var(--ff); letter-spacing:.12em; text-transform:uppercase; color:var(--mist)}
[dir=rtl] .crumbs :is(ol,:where(.t-ol)){font-family:var(--ff-ar); letter-spacing:0; font-size:.92rem}
.crumbs :is(li,:where(.t-li)){display:flex; align-items:center; gap:10px}
.crumbs :is(li,:where(.t-li)) + :is(li,:where(.t-li))::before{content:""; width:14px; height:1px; background:var(--gold)}
.crumbs a{display:inline-flex; align-items:center; min-height:44px; color:#fff; text-decoration:none}
.crumbs a:hover{color:var(--gold-lt); text-decoration:underline; text-underline-offset:4px}
.crumbs [aria-current]{color:var(--gold-lt)}
.pbn-foot{position:absolute; inset-inline:0; bottom:0; border-top:1px solid var(--line-d)}

/* small photo caption in the banner corner (which venue the photo shows) */
.pbn-cap{position:absolute; z-index:1; bottom:0; inset-inline-end:0; margin:0; display:grid; gap:2px; padding:12px 20px; background:rgba(10,20,34,.82); border-top:2px solid var(--gold); color:#fff; font-size:.84rem; line-height:1.35}
.pbn-cap b{font-weight:700}
.pbn-cap :is(span,:where(.t-span)){color:var(--mist); font-size:.8rem}
@media (max-width:720px){ .pbn-cap{display:none} }


/* ---------- 9. sections ---------- */
.sec{padding-block:var(--sec)}
.sec--tight{padding-block:clamp(56px,6vw,88px)}
.dark{background:var(--navy-900); color:var(--mist)}
.dark.ink{background:var(--ink)}
.dark.n800{background:var(--navy-800)}
.dark.royal{background:var(--royal)}
.rule-t{border-top:1px solid var(--line)}
.rule-b{border-bottom:1px solid var(--line)}

/* full-bleed photo band with navy overlay */
.band-photo{position:relative; isolation:isolate; overflow:hidden; background:var(--navy-900); color:var(--mist)}
.band-photo > .bp-media{position:absolute; inset:-8% 0; z-index:-2}
.band-photo > .bp-media img{width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); transform:translateY(var(--py,0px)) scale(1.04)}
.band-photo::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(14,28,46,.96) 0%,rgba(14,28,46,.9) 50%,rgba(14,28,46,.8) 100%)}
[dir=rtl] .band-photo::before{background:linear-gradient(270deg,rgba(14,28,46,.96) 0%,rgba(14,28,46,.9) 50%,rgba(14,28,46,.8) 100%)}
.band-photo > .bp-media img{filter:saturate(.7)}

/* is-low: crop the top of the photo away (Home contact band: hides the neighbouring clinic sign above the restaurant fascia) */
.band-photo > .bp-media.is-low{overflow:hidden}
.band-photo > .bp-media.is-low img{position:absolute; left:0; bottom:0; height:135%}


/* framed image with a clip wipe + zoom on hover */
.frame{position:relative; overflow:hidden; background:var(--navy-800)}
.frame img{width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); transition:transform 1.2s var(--ease)}
.frame:hover img{transform:scale(1.05)}
.frame :is(figcaption,:where(.t-figcaption)),.frame .cap{position:absolute; inset-inline-start:0; bottom:0; z-index:2; background:var(--navy-900); color:#fff; padding:14px 20px; font-size:.86rem; line-height:1.4; border-top:2px solid var(--gold)}
.frame :is(figcaption,:where(.t-figcaption)) b,.frame .cap b{display:block; font-weight:700}
.ar-43{aspect-ratio:4/3}.ar-32{aspect-ratio:3/2}.ar-169{aspect-ratio:16/9}.ar-45{aspect-ratio:4/5}.ar-11{aspect-ratio:1/1}


/* three short points with hairlines between */
.points{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line-2)}
.points :is(li,:where(.t-li)){padding:26px 28px 0; border-inline-start:1px solid var(--line-2)}
.points :is(li,:where(.t-li)):first-child{border-inline-start:0; padding-inline-start:0}
.points b{display:block; font:800 1.08rem/1.3 var(--ff); color:var(--navy-900); margin-bottom:8px}
[dir=rtl] .points b{font-family:var(--ff-ar)}
.points p{font-size:.96rem}
.points .pn{display:block; font:700 .72rem/1 var(--ff); letter-spacing:.16em; color:var(--bronze-ink); margin-bottom:14px}
.dark .points,.band-photo .points{border-color:var(--line-d2)}
.dark .points :is(li,:where(.t-li)),.band-photo .points :is(li,:where(.t-li)){border-color:var(--line-d2)}
.dark .points b,.band-photo .points b{color:#fff}
.dark .points .pn,.band-photo .points .pn{color:var(--gold)}
.band-photo .points p{color:rgba(255,255,255,.78)}
.points--lg b{font-size:clamp(1.15rem,1rem + .5vw,1.45rem)}
.points--lg p{font-size:1.02rem}


/* ---------- 10. hero (home) ---------- */
.hero{position:relative; isolation:isolate; overflow:hidden; background:var(--ink); color:#fff; min-height:clamp(560px,calc(100svh - var(--hdr) - 120px),780px); display:flex; flex-direction:column}
.hs{position:absolute; inset:0; z-index:-2}
.hs-s{position:absolute; inset:0; visibility:hidden}
.hs-s img{width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); transform:scale(1.1)}
.hs-s.is-on{visibility:visible; z-index:2}
/* slide 06 (img/tr2.jpg, Istanbul): its shop sign sits in the top third of the photo. Wide screens move it out of frame
   with pos '50% 100%' (data); narrower screens fit the photo by height, so the photo is drawn taller and bottom-aligned
   to lift the sign above the hero text */
@media (max-width:1023px){ .hs-s img[src$="/tr2.jpg"]{position:absolute; inset:auto 0 0; height:142%} }
.hs-s.is-prev{visibility:visible; z-index:1}
.hs-s.is-on img,.hs-s.is-prev img{transform:scale(1); transition:transform 9s linear}
.hs-s.is-in{animation:wipeIn 1.1s var(--ease-io) both}
[dir=rtl] .hs-s.is-in{animation-name:wipeInR}
@keyframes wipeIn{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@keyframes wipeInR{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.hero::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(10,20,34,.94) 0%,rgba(10,20,34,.82) 40%,rgba(10,20,34,.38) 70%,rgba(10,20,34,.18) 100%),linear-gradient(0deg,rgba(10,20,34,.85) 0%,transparent 34%)}
[dir=rtl] .hero::before{background:linear-gradient(270deg,rgba(10,20,34,.94) 0%,rgba(10,20,34,.82) 40%,rgba(10,20,34,.38) 70%,rgba(10,20,34,.18) 100%),linear-gradient(0deg,rgba(10,20,34,.85) 0%,transparent 34%)}
.hero.cols{--hl:rgba(255,255,255,.06)}
.hero-main{flex:1; display:flex; align-items:center; padding-block:clamp(56px,7vw,96px) 40px}
.hero-copy{grid-column:span 7; display:grid; gap:24px; justify-items:start}
.hero .h1{font-size:clamp(2.4rem,1.1rem + 3.7vw,4.7rem)}
.hero .h1 .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.hero .h1 .ln > :is(span,:where(.t-span)){display:block}
.js .hero .h1 .ln > :is(span,:where(.t-span)){transform:translateY(108%); transition:transform 1.1s var(--ease)}
.js .hero .h1.in .ln > :is(span,:where(.t-span)){transform:none}
.js .hero .h1.in .ln:nth-child(2) > :is(span,:where(.t-span)){transition-delay:.12s}

/* the headings of slides 2 and 3 are paragraphs: same face as the h1 */
.hero p.h1{color:#fff; font-family:var(--ff); text-wrap:balance}
[dir=rtl] .hero p.h1{font-family:var(--ff-ar)}

/* three message blocks share one grid cell, so the hero keeps the height of the tallest one;
   only .is-on is visible (the others are also aria-hidden + inert, set in js/home.js) */
.hero-msgs{display:grid; width:100%; min-width:0}
.hmsg{grid-area:1/1; display:grid; gap:24px; align-content:start; justify-items:start; min-width:0}
.hmsg:not(.is-on){opacity:0; visibility:hidden; pointer-events:none}
.js .hmsg{transition:opacity .55s var(--ease) .2s, transform .7s var(--ease) .2s, visibility 0s}
.js .hmsg:not(.is-on){transform:translateY(16px); transition:opacity .3s var(--ease), transform 0s .3s, visibility 0s .3s}

/* supporting line under each heading, set as a quote */
.hmsg-line{max-width:32em; padding-inline-start:18px; border-inline-start:2px solid var(--gold); color:#fff; font:500 clamp(1.05rem,1.4vw,1.2rem)/1.5 var(--ff)}
[dir=rtl] .hmsg-line{font-family:var(--ff-ar)}
.caret{display:inline-block; width:2px; height:1.15em; background:var(--gold); animation:blink 1s steps(1) infinite; vertical-align:-.15em; margin-inline-start:2px}
@keyframes blink{50%{opacity:0}}

/* control bar: caption + segmented progress + pause */
.hero-bar{position:relative; border-top:1px solid var(--line-d); background:rgba(10,20,34,.55); backdrop-filter:blur(8px)}
.hb{display:grid; grid-template-columns:minmax(220px,3fr) minmax(0,8fr) auto; align-items:stretch}
.hb-cap{display:grid; align-content:center; gap:4px; padding-block:16px; padding-inline-end:24px; min-width:0}
.hb-cap .cnt,.rail-count{direction:ltr; unicode-bidi:isolate}   
/* "01 / 03" reads the same in both languages */
.hb-cap .cnt{justify-self:start; font:700 .72rem/1 var(--ff); letter-spacing:.16em; color:var(--gold); font-variant-numeric:tabular-nums}
.hb-cap strong{font:700 .98rem/1.3 var(--ff); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
[dir=rtl] .hb-cap strong{font-family:var(--ff-ar)}
.hb-cap :is(span,:where(.t-span)){font-size:.8rem; color:var(--mist); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.segs{display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.seg{position:relative; display:grid; align-content:center; gap:6px; min-height:72px; padding:16px 14px; border:0; border-inline-start:1px solid var(--line-d); background:none; color:var(--mist); text-align:start; transition:background .3s, color .3s}
.seg:hover{background:rgba(255,255,255,.05); color:#fff}
.seg b{font:700 .68rem/1 var(--ff); letter-spacing:.14em; color:inherit}
.seg :is(span,:where(.t-span)){font:600 .84rem/1.2 var(--ff); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
[dir=rtl] .seg :is(span,:where(.t-span)){font-family:var(--ff-ar); font-size:.92rem}
.seg i{position:absolute; inset-inline:0; top:-1px; height:3px; background:rgba(255,255,255,.12); overflow:hidden}
.seg i::after{content:""; position:absolute; inset:0; background:var(--gold); transform:scaleX(0); transform-origin:var(--o-s,left)}
[dir=rtl] .seg i::after{--o-s:right}
.seg.is-done i::after{transform:scaleX(1); opacity:.45}
.seg[aria-current=true]{color:#fff}
.seg[aria-current=true] b{color:var(--gold)}
.seg[aria-current=true] i::after{animation:segFill var(--dur,7s) linear both}
.hero.is-paused .seg[aria-current=true] i::after{animation-play-state:paused}
.hero.is-static .seg[aria-current=true] i::after{animation:none; transform:scaleX(1)}
@keyframes segFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero.is-static .hb-ctl{display:none}
.hb-ctl{display:flex; align-items:center; gap:8px; padding-inline-start:20px; border-inline-start:1px solid var(--line-d)}


/* ---------- 11. key figures (oversized numerals) ---------- */
.figs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.fig{display:grid; grid-row:span 3; grid-template-rows:subgrid; align-content:start; padding:clamp(32px,4vw,56px) clamp(16px,2vw,32px); border-inline-start:1px solid var(--line)}
.fig:first-child{border-inline-start:0; padding-inline-start:0}
.fig-n{display:block; font:200 clamp(3.4rem,1.6rem + 5vw,7.4rem)/.9 var(--ff); color:var(--navy-900); letter-spacing:-.04em; font-variant-numeric:lining-nums tabular-nums}
.fig-n sup{font-size:.36em; font-weight:700; color:var(--gold-d); vertical-align:top; letter-spacing:0; margin-inline-start:6px; position:relative; top:.4em}
.fig-k{display:flex; align-items:center; gap:10px; margin-top:22px; font:700 .74rem/1.3 var(--ff); letter-spacing:.18em; text-transform:uppercase; color:var(--navy-900)}
.fig-k::before{content:""; flex:none; width:24px; height:2px; background:var(--gold)}
[dir=rtl] .fig-k{font-family:var(--ff-ar); letter-spacing:0; font-size:.95rem}
.fig-l{margin-top:8px; font-size:.92rem; color:var(--text)}   
/* subgrid rows: number, kicker and sub-line line up across a row even when a kicker wraps */
.dark .fig{border-color:var(--line-d)}
.dark .fig-n{color:#fff}
.dark .fig-n sup{color:var(--gold)}
.dark .fig-k{color:#fff}
.dark .fig-l{color:var(--mist)}


/* ---------- 12. cards ---------- */
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--cg)}
.card{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); transition:border-color .4s, box-shadow .5s var(--ease)}
.card::before{content:""; position:absolute; inset-inline:-1px; top:-1px; z-index:3; height:3px; background:var(--gold); transform:scaleX(0); transform-origin:var(--o-s,left); transition:transform .6s var(--ease)}
[dir=rtl] .card::before{--o-s:right}
.card:hover,.card:focus-within{border-color:var(--line-2); box-shadow:0 24px 40px -30px rgba(10,20,34,.45)}
.card:hover::before,.card:focus-within::before{transform:scaleX(1)}
.card-media{position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--navy-800)}
.card-media img{width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); transition:transform 1.2s var(--ease)}
.card:hover .card-media img{transform:scale(1.06)}
.card-media.is-logo{background:#fff; border-bottom:1px solid var(--line); display:grid; place-items:center}
.card-media.is-logo img{position:absolute; inset:0; margin:auto; width:auto; height:62%; object-fit:contain}
.card:hover .card-media.is-logo img{transform:scale(1.04)}
.card-body{flex:1; display:flex; flex-direction:column; gap:12px; padding:24px 26px 22px}
.card-top{display:flex; justify-content:space-between; align-items:center; gap:12px}
.card-n{font:700 .74rem/1 var(--ff); letter-spacing:.16em; color:var(--bronze-ink); font-variant-numeric:tabular-nums}
.card-meta{font:600 .72rem/1.2 var(--ff); letter-spacing:.1em; text-transform:uppercase; color:var(--text); text-align:end}
[dir=rtl] .card-meta{font-family:var(--ff-ar); letter-spacing:0; font-size:.86rem}
.card h3{font-size:1.32rem; font-weight:800}
.card h3 a{text-decoration:none; background:linear-gradient(var(--gold),var(--gold)) no-repeat; background-size:0% 2px; background-position:var(--bp,0 100%); padding-bottom:3px; transition:background-size .5s var(--ease)}
[dir=rtl] .card h3 a{--bp:100% 100%}
.card:hover h3 a,.card h3 a:focus-visible{background-size:100% 2px}
.card h3 a::after{content:""; position:absolute; inset:0; z-index:2}
.card p{font-size:.96rem}
.card .more{margin-top:auto; padding-top:6px; pointer-events:none}
.card:hover .more :is(span,:where(.t-span))::after{transform:scaleX(1)}
.card:hover .more .ic{transform:translateX(5px)}
[dir=rtl] .card:hover .more .ic{transform:scaleX(-1) translateX(5px)}
.dark .card{background:var(--navy-800); border-color:var(--line-d)}
.dark .card h3{color:#fff}
.dark .card p{color:var(--mist)}
.dark .card .card-n{color:var(--gold)}
.dark .card .card-meta{color:var(--mist)}

/* map tile used where there is no photo (real estate, Bangkok) or only a logo (Al-Watania, Karinca):
   a static crop of the route map, one gold square pin, a corner caption, an optional logo chip */
.mtile{position:absolute; inset:0; background:var(--navy-900); overflow:hidden; color:#5F8BC7}
.mtile svg{position:absolute; inset:0; width:100%; height:100%}
.mtile .mt-land{fill:#13284A}
.mtile .mt-dots{opacity:.6}
.dark .mtile,.mtile{box-shadow:inset 0 0 0 1px var(--line-d)}
.mtile .mt-grat{stroke:rgba(255,255,255,.07); fill:none}
.mtile .mt-pin{fill:var(--gold)}
.mtile .mt-halo{fill:rgba(211,155,56,.22)}
.mtile::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,20,34,.55),transparent 45%); pointer-events:none}
.mt-cap{position:absolute; z-index:2; top:0; inset-inline-start:0; display:grid; gap:2px; background:var(--navy-900); color:#fff; padding:12px 18px; border-bottom:2px solid var(--gold); font-size:.86rem; line-height:1.35}
.mt-cap b{font-weight:700}
.mt-cap :is(span,:where(.t-span)){color:var(--mist); font-size:.8rem}
[dir=rtl] .mt-cap{font-family:var(--ff-ar)}
.mt-coord{position:absolute; z-index:2; top:14px; right:14px; font:600 .7rem/1 var(--ff); letter-spacing:.14em; color:var(--gold-lt); direction:ltr}
[dir=rtl] .mt-coord{right:auto; left:14px}   
/* physical: the tag itself is direction:ltr */
.br-chip{position:absolute; z-index:2; bottom:16px; inset-inline-start:16px; width:120px; height:80px; display:flex; align-items:center; justify-content:center; padding:8px; background:#fff; border-top:2px solid var(--gold)}
.br-chip img{display:block; max-width:100%; max-height:62px; min-height:0; width:auto; height:auto; object-fit:contain}
.card:hover .mtile svg,.frame:hover .mtile svg{transform:scale(1.05)}
.mtile svg{transition:transform 1.2s var(--ease)}

/* photo tile (SITE.photoTile): a city photo where a business has no venue photo; logo chip + "City photo" note on top */
.ptile{position:absolute; inset:0; overflow:hidden; background:var(--navy-800)}
.ptile > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); transition:transform 1.2s var(--ease)}
.card:hover .ptile > img,.frame:hover .ptile > img{transform:scale(1.05)}
.ptile::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,20,34,.45),transparent 40%); pointer-events:none}
.pt-note{position:absolute; z-index:2; top:12px; inset-inline-end:12px; padding:6px 9px; background:rgba(14,28,46,.82); color:#fff; font:600 .64rem/1 var(--ff); letter-spacing:.14em; text-transform:uppercase}
[dir=rtl] .pt-note{font-family:var(--ff-ar); letter-spacing:0; font-size:.78rem; text-transform:none}
.ptile .br-chip{width:96px; height:72px}

/* country badge on a photo tile (bottom end corner), like the Businesses photo frames */
.pt-badge{position:absolute; z-index:2; bottom:0; inset-inline-end:0; background:var(--navy-900); color:#fff; padding:12px 18px; font:700 .7rem/1 var(--ff); letter-spacing:.16em; text-transform:uppercase}
[dir=rtl] .pt-badge{font-family:var(--ff-ar); letter-spacing:0; font-size:.86rem; text-transform:none}
.card-media .pt-badge{display:none}   

/* Home cards name the country in the card meta line *//* two panes side by side (Coffee Trade: Berlin + Addis Ababa) */
.ptile--split{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:#fff}
.ptile--split::after{content:none}
.ptile--split > .ptile{position:relative; inset:auto; min-height:0}
.ptile--split .br-chip{width:72px; height:56px; bottom:12px; inset-inline-start:12px; padding:6px}
.ptile--split .br-chip img{max-height:42px}
.ptile--split .pt-badge{padding:10px 12px; font-size:.64rem; letter-spacing:.12em}
[dir=rtl] .ptile--split .pt-badge{font-size:.8rem; letter-spacing:0}
.br-chip img,.card:hover .br-chip img,.frame:hover .br-chip img,.js [data-rv] .br-chip img{transform:none!important}


/* ---------- 13. chips ---------- */
.chip{display:inline-flex; align-items:center; flex:none; min-height:26px; font:700 .64rem/1 var(--ff); letter-spacing:.12em; text-transform:uppercase; padding:6px 9px; border:1px solid var(--line-2); color:var(--text); background:#fff; white-space:nowrap}
[dir=rtl] .chip{font-family:var(--ff-ar); letter-spacing:0; font-size:.8rem; padding:4px 9px}
.chip--uc{border-color:var(--gold); color:var(--bronze-ink); background:rgba(211,155,56,.13)}
.chip--soon{border-color:var(--blue); color:var(--blue); background:rgba(45,91,154,.08)}
.dark .chip{background:transparent; border-color:var(--line-d2); color:var(--mist)}
.dark .chip--uc{border-color:var(--gold); color:var(--gold-lt); background:rgba(211,155,56,.12)}
.dark .chip--soon{border-color:#7FA6DA; color:#BBD0EE; background:rgba(127,166,218,.1)}

/* selectable filter chips (buttons) */
.fchips{display:flex; flex-wrap:wrap; gap:8px}
.fchip{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 16px; border:1px solid var(--line-2); background:#fff; color:var(--navy-900); font:600 .88rem/1 var(--ff); transition:background .3s, color .3s, border-color .3s}
[dir=rtl] .fchip{font-family:var(--ff-ar); font-size:.95rem}
.fchip b{font:700 .66rem/1 var(--ff); letter-spacing:.12em; color:var(--bronze-ink)}
.fchip:hover{border-color:var(--navy-900)}
.fchip[aria-pressed=true],.fchip[aria-selected=true]{background:var(--navy-900); border-color:var(--navy-900); color:#fff}
.fchip[aria-pressed=true] b,.fchip[aria-selected=true] b{color:var(--gold)}
.dark .fchip{background:transparent; border-color:var(--line-d2); color:#fff}
.dark .fchip b{color:var(--gold)}
.dark .fchip:hover{border-color:#fff}
.dark .fchip[aria-pressed=true],.dark .fchip[aria-selected=true]{background:var(--gold); border-color:var(--gold); color:var(--ink)}
.dark .fchip[aria-pressed=true] b,.dark .fchip[aria-selected=true] b{color:var(--ink)}

/* chips used as links: same fill on hover / focus */
a.fchip{text-decoration:none}
a.fchip:hover,a.fchip:focus-visible{background:var(--navy-900); border-color:var(--navy-900); color:#fff}
a.fchip:hover b,a.fchip:focus-visible b{color:var(--gold)}
:is(.dark,.band-photo) a.fchip:hover,:is(.dark,.band-photo) a.fchip:focus-visible{background:#fff; border-color:#fff; color:var(--navy-900)}
:is(.dark,.band-photo) a.fchip:hover b,:is(.dark,.band-photo) a.fchip:focus-visible b{color:var(--bronze-ink)}


/* venue list with status chips */
.vlist{border-top:1px solid var(--line)}
.vlist :is(li,:where(.t-li)){display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line)}
.vlist strong{display:block; font-weight:700; color:var(--navy-900); font-size:.98rem; line-height:1.35}
.vlist :is(small,:where(.t-small)){display:block; font-size:.84rem; color:var(--text)}
.dark .vlist,.dark .vlist :is(li,:where(.t-li)){border-color:var(--line-d)}
.dark .vlist strong{color:#fff}
.dark .vlist :is(small,:where(.t-small)){color:var(--mist)}


/* locations teaser side panel (home; reusable) */
.loc-chips{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.loc-chips .fchip{justify-content:flex-start; padding:0 14px; text-align:start; line-height:1.2}
.loc-chips .is-all{grid-column:1/-1}
.loc-info{margin-top:28px; padding-top:24px; border-top:2px solid var(--gold); display:grid; grid-template-columns:minmax(0,1fr); gap:8px; align-content:start; transition:opacity .25s, transform .35s var(--ease)}
.loc-info.is-swap{opacity:0; transform:translateY(8px)}
.loc-info .li-k{font:700 .7rem/1 var(--ff); letter-spacing:.18em; text-transform:uppercase; color:var(--bronze-ink)}
[dir=rtl] .loc-info .li-k{font-family:var(--ff-ar); letter-spacing:0; font-size:.88rem}
.loc-info h3{font-size:1.6rem; font-weight:800}
.loc-info .li-c{font-size:.92rem}
.loc-info .vlist{margin-top:10px}
.loc-info .more{margin-top:10px}
.dark .loc-info .li-k{color:var(--gold)}
.loc .map-frame{height:100%; min-height:520px; aspect-ratio:auto}


/* ---------- 14. horizontal row of venue cards ---------- */
.row-head{display:flex; justify-content:space-between; align-items:end; gap:24px}
.row-nav{display:flex; gap:8px; flex:none}
.rail{overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail-track{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 3 * var(--cg)) / 4); gap:var(--cg)}
.vcard{position:relative; scroll-snap-align:start; display:flex; flex-direction:column; background:#fff}
.vcard .frame{aspect-ratio:4/5}
.vcard .tag{position:absolute; z-index:2; top:0; inset-inline-start:0; background:var(--navy-900); color:#fff; padding:8px 12px; font:700 .68rem/1 var(--ff); letter-spacing:.14em; text-transform:uppercase}
[dir=rtl] .vcard .tag{font-family:var(--ff-ar); letter-spacing:0; font-size:.82rem}
.vcard .tag b{color:var(--gold); margin-inline-end:6px}
.vcard > a{display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none}
.vcard .vc-cap{padding-top:18px}
.vcard:hover .frame img{transform:scale(1.05)}
.vcard a:focus-visible{outline-offset:4px}
.vcard strong{display:block; font:800 1.08rem/1.3 var(--ff); color:var(--navy-900)}
[dir=rtl] .vcard strong{font-family:var(--ff-ar)}
.vcard :is(span,:where(.t-span)){display:block; font-size:.9rem; color:var(--text); margin-top:4px}
.vcard .bar{display:block; height:2px; margin-top:16px; background:var(--line); position:relative; overflow:hidden}
.vcard .bar::after{content:""; position:absolute; inset:0; background:var(--gold); transform:scaleX(0); transform-origin:var(--o-s,left); transition:transform .6s var(--ease)}
[dir=rtl] .vcard .bar::after{--o-s:right}
.vcard:hover .bar::after{transform:scaleX(1)}
.rail-foot{display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; margin-top:32px}
.rail-count{font:700 .78rem/1 var(--ff); letter-spacing:.14em; color:var(--navy-900); font-variant-numeric:tabular-nums}
.rail-prog{position:relative; height:2px; background:var(--line)}
.rail-prog i{position:absolute; inset-block:0; inset-inline-start:var(--x,0%); width:var(--w,25%); background:var(--gold); transition:inset-inline-start .25s linear}


/* ---------- 15. numbered sequence (services) ---------- */
.seq{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); counter-reset:seq}
.seq :is(li,:where(.t-li)){position:relative; padding:34px clamp(16px,2vw,30px) 0 0; padding-inline:0 clamp(16px,2vw,30px)}
.seq :is(li,:where(.t-li))::before{content:""; position:absolute; top:0; inset-inline:0; height:1px; background:var(--line-2)}
.seq :is(li,:where(.t-li))::after{content:""; position:absolute; top:-5px; inset-inline-start:0; width:11px; height:11px; background:var(--gold)}
.seq .sn{display:block; font:200 clamp(2.6rem,1.8rem + 2vw,3.8rem)/1 var(--ff); color:var(--navy-900); letter-spacing:-.03em; margin-bottom:16px}
.seq h3{font-size:1.2rem; font-weight:800; margin-bottom:8px}
.seq p{font-size:.95rem}
.seq .arr{position:absolute; top:-9px; inset-inline-end:clamp(16px,2vw,30px); color:var(--gold-d)}
.seq :is(li,:where(.t-li)):last-child .arr{display:none}
.dark .seq :is(li,:where(.t-li))::before,.band-photo .seq :is(li,:where(.t-li))::before{background:var(--line-d2)}
.dark .seq .sn,.band-photo .seq .sn{color:#fff}
.dark .seq .arr,.band-photo .seq .arr{color:var(--gold)}


/* ---------- 16. brands grid ---------- */
.brands{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); border-inline-start:1px solid var(--line)}
.brands > :is(li,:where(.t-li)){position:relative; display:grid; grid-template-rows:150px auto; border-inline-end:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff}
.br-logo{position:relative; height:150px; display:grid; place-items:center; padding:24px 32px 8px; overflow:hidden}
.br-logo img{height:84px; max-width:70%; width:auto; object-fit:contain; filter:grayscale(1) contrast(1.15); opacity:.9; transition:filter .5s, opacity .5s, transform .6s var(--ease)}
.brands > :is(li,:where(.t-li)):hover .br-logo img{filter:none; opacity:1; transform:scale(1.04)}

/* dark logos fill the whole logo cell; the Arobica bean photo fills it edge to edge */
.brands > :is(li,:where(.t-li)).is-dark .br-logo{background:#000; margin:0; padding:24px 32px}
.brands > :is(li,:where(.t-li)).is-photo .br-logo{padding:0; background:#000}
.brands > :is(li,:where(.t-li)).is-photo .br-logo img{width:100%; height:150px; max-width:none; max-height:none; object-fit:cover}
.br-word{display:grid; text-align:center; color:var(--navy-900)}
.br-word b{font:800 1.4rem/1 var(--ff); letter-spacing:.24em; margin-inline-end:-.24em}
.br-word :is(small,:where(.t-small)){font:700 .62rem/1 var(--ff); letter-spacing:.55em; margin-top:8px; color:var(--bronze-ink); margin-inline-end:-.55em}
.br-cap{padding:14px 22px 20px; border-top:1px solid var(--line)}
.br-cap strong{display:block; font:700 .92rem/1.3 var(--ff); color:var(--navy-900)}
[dir=rtl] .br-cap strong{font-family:var(--ff-ar)}
.br-cap :is(span,:where(.t-span)){display:block; font-size:.8rem; color:var(--text); line-height:1.4; margin-top:3px}
.br-cap::before{content:""; display:block; width:24px; height:2px; background:var(--gold); margin-bottom:12px; transition:width .5s var(--ease)}
.brands > :is(li,:where(.t-li)):hover .br-cap::before{width:56px}
.brands > :is(li,:where(.t-li)).br-cta{background:var(--navy-900); grid-template-rows:1fr}

/* 10 brand tiles + the CTA = 11 cells: the CTA spans two cells so the last row is full at 4, 3 and 2 columns */
.brands > :is(li,:where(.t-li)).br-cta:nth-child(11){grid-column:span 2}

/* the Bab Al-Yemen logo file is a square with wide margins: show it larger */
.br-logo img[src$="bab-al-yemen-restaurants.jpg"]{height:118px; max-width:86%}

/* brand caption sector link (Businesses): may wrap, so a long sector name never widens its grid column at 390 */
.br-cap .br-sec{flex-wrap:wrap; row-gap:2px}

/* Services brand strip (services.html .svc-logos, 4 / 2 columns): with 10 brands the CTA cell spans two cells */
.svc-logos > :is(li,:where(.t-li)).lg-cta:nth-child(11){grid-column:span 2; aspect-ratio:auto; min-height:120px}
.br-cta a{display:grid; align-content:space-between; gap:20px; padding:28px; color:#fff; text-decoration:none}
.br-cta a strong{font:300 1.6rem/1.2 var(--ff)}
.br-cta a strong em{font-style:normal; font-weight:800; color:var(--gold)}
[dir=rtl] .br-cta a strong{font-family:var(--ff-ar); font-weight:400}
.br-cta .ic{width:28px; height:28px; color:var(--gold); transition:transform .45s var(--ease)}
.br-cta a:hover .ic{transform:translateX(8px)}
[dir=rtl] .br-cta a:hover .ic{transform:scaleX(-1) translateX(8px)}


/* ---------- 17. CTA band + contact rows ---------- */
.cta{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--cg); row-gap:40px; align-items:end}
.cta > :first-child{grid-column:span 7; display:grid; gap:22px; justify-items:start}
.cta > :last-child{grid-column:9 / -1}
.cta .h2{text-wrap:wrap}
.rows :is(li,:where(.t-li)){display:grid; grid-template-columns:46px 1fr; gap:16px; align-items:center; padding:14px 0; border-top:1px solid var(--line-d)}
.rows :is(li,:where(.t-li)):last-child{border-bottom:1px solid var(--line-d)}
.rows .ico{width:46px; height:46px; border:1px solid var(--line-d2); display:grid; place-items:center; color:var(--gold)}
.rows :is(small,:where(.t-small)){display:block; font:700 .66rem/1 var(--ff); letter-spacing:.16em; text-transform:uppercase; color:var(--mist); margin-bottom:6px}
[dir=rtl] .rows :is(small,:where(.t-small)){font-family:var(--ff-ar); letter-spacing:0; font-size:.84rem}
.rows a,.rows :is(address,:where(.t-address)){color:#fff; text-decoration:none; font-weight:600; line-height:1.45}
.rows a{display:inline-flex; align-items:center; min-height:44px}
.rows :is(small,:where(.t-small)){margin-bottom:0}
.rows a:hover{color:var(--gold-lt); text-decoration:underline; text-underline-offset:4px}

/* light version of the rows (on white) */
.rows.on-light :is(li,:where(.t-li)){border-color:var(--line)}
.rows.on-light .ico{border-color:var(--line-2); color:var(--gold-d)}
.rows.on-light :is(small,:where(.t-small)){color:var(--bronze-ink)}
.rows.on-light a,.rows.on-light :is(address,:where(.t-address)){color:var(--navy-900)}
.rows.on-light a:hover{color:var(--blue)}

/* 2026: two phone numbers in one row; small external-link icon (shared header, footer and bands) */
.rows .tels{display:flex; flex-wrap:wrap; column-gap:18px}
.ic.ext{width:14px; height:14px; flex:none}
.ft .ic.ext,.rows .ic.ext{margin-inline-start:6px}


/* ---------- 18. forms (white form card; safe inside dark sections) ---------- */
.form{display:grid; gap:22px; background:#fff; color:var(--text); padding:clamp(28px,4vw,56px); border-top:3px solid var(--gold)}
.form :is(h2,h3){color:var(--navy-900)}
.form :is(h2,h3,.h2,.h3) em,.dark .form :is(.h1,.h2,.h3) em{color:var(--bronze-ink)}
.form p{color:var(--text)}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.field{display:grid; gap:8px; position:relative}
.field label{font:700 .72rem/1.2 var(--ff); letter-spacing:.14em; text-transform:uppercase; color:var(--navy-900)}
[dir=rtl] .field label{font-family:var(--ff-ar); letter-spacing:0; font-size:.92rem}
.field :is(input,select,textarea){width:100%; min-height:52px; padding:12px 14px; border:1px solid transparent; border-bottom:1px solid var(--line-2); background:var(--ui); color:var(--navy-900); font-size:1rem; transition:border-color .3s, background .3s}
.field textarea{min-height:150px; resize:vertical}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--navy-900) 50%),linear-gradient(135deg,var(--navy-900) 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-inline-end:40px}
[dir=rtl] .field select{background-position:15px 50%,20px 50%; padding-inline:14px 40px}
.field :is(input,select,textarea):hover{border-bottom-color:var(--navy-900)}
.field :is(input,select,textarea):focus{outline:none; background:#fff; border-color:var(--navy-900)}
.field::after{content:""; position:absolute; inset-inline:0; bottom:0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:var(--o-s,left); transition:transform .5s var(--ease); pointer-events:none}
.field:has(.field-err:not(:empty))::after,.field.has-err::after{display:none}
[dir=rtl] .field::after{--o-s:right}
.field:focus-within::after{transform:scaleX(1)}
.field [aria-invalid=true]{border-color:#A23B2A; background:#fff}
.field-err{font-size:.84rem; color:#A23B2A; font-weight:600}
.field-err:empty{display:none}
.form-note{font-size:.88rem; color:var(--text)}
.form-note.is-err{color:#A23B2A; font-weight:600}
.form-note.is-ok{color:#2E6B3A; font-weight:600}
.req{color:var(--bronze-ink)}


/* ---------- 19. map (HIGMap skin, copied from Meridian; stroke scales with --k) ---------- */
.map-frame{position:relative; background:#0B1828; overflow:hidden; aspect-ratio:16/10; border:1px solid var(--line-d)}
.map-co{position:absolute; inset-inline-start:14px; top:14px; z-index:3; margin:0; font:600 .72rem/1 var(--ff); letter-spacing:.14em; color:var(--gold-lt); background:rgba(10,20,34,.75); padding:8px 10px; direction:ltr}

/* bottom-left in both languages (the map itself never mirrors): keeps clear of the Yemen origin label */
.map-legend{position:absolute; left:14px; right:auto; bottom:14px; direction:inherit; z-index:3; display:flex; flex-wrap:wrap; gap:14px; background:rgba(10,20,34,.8); padding:8px 12px; font-size:.74rem; color:var(--mist)}
.map-legend :is(span,:where(.t-span)){display:inline-flex; align-items:center; gap:7px}
.map-legend i{width:9px; height:9px; background:var(--gold)}
.map-legend i.hub{background:#fff; box-shadow:0 0 0 2px var(--gold)}
.map-legend i.org{background:transparent; border:1.5px solid var(--gold-lt); transform:rotate(45deg)}
.hm{position:relative}
.hm > svg{position:absolute; inset:0; width:100%; height:100%; color:#5F8BC7}
.hm-land{fill:#12243B}
.hm-dots{opacity:.55}
.hm-grat{stroke:rgba(255,255,255,.06); stroke-width:calc(.6px * var(--k,1)); fill:none}
.hm-r{fill:none; stroke:var(--gold); stroke-width:calc(1.6px * var(--k,1)); stroke-dasharray:1 1; stroke-dashoffset:1; opacity:.55; transition:stroke-dashoffset 1.8s var(--ease), opacity .4s}
.hm.is-drawn .hm-r{stroke-dashoffset:0}
.hm.is-picked .hm-r{opacity:.14}
.hm.is-picked .hm-r.is-on{opacity:1; stroke-width:calc(2.4px * var(--k,1)); animation:draw 1.2s var(--ease) both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.hm-r--origin{stroke-dasharray:calc(3px * var(--k,1)) calc(4px * var(--k,1)); stroke-dashoffset:0; opacity:.6; stroke:var(--gold-lt)}
.hm.is-origin .hm-r--origin{opacity:1; stroke-width:calc(2.4px * var(--k,1))}
.hm-lay{position:absolute; inset:0; direction:ltr; pointer-events:none}
.hm-m{position:absolute; left:0; top:0; display:block; width:0; height:0; padding:0; border:0; background:none; pointer-events:auto; transition:opacity .3s}
.hm-m::before{content:""; position:absolute; left:-22px; top:-22px; width:44px; height:44px}
.hm-m i{position:absolute; left:-5px; top:-5px; width:10px; height:10px; background:var(--gold); box-shadow:0 0 0 3px rgba(211,155,56,.22); transition:transform .3s var(--ease)}
.hm-m:hover i,.hm-m.is-on i,.hm-m:focus-visible i{transform:scale(1.35)}
.hm-m:focus-visible{outline:none}
.hm-m:focus-visible .hm-l{outline:2px solid var(--gold-lt); outline-offset:2px}
.hm-hub i{left:-7px; top:-7px; width:14px; height:14px; background:#fff; box-shadow:0 0 0 3px var(--gold)}
.hm-origin{pointer-events:none}
.hm-origin::before{display:none}
.hm-origin i{transform:rotate(45deg); background:transparent; border:1.5px solid var(--gold-lt); box-shadow:none}
.hm-dot::before{display:none}
.hm-dot i{left:-3px; top:-3px; width:6px; height:6px; background:#fff; box-shadow:none}
.hm-dot.is-soon i{background:transparent; border:1px solid #9FC0EE}
.hm-dot{opacity:0; pointer-events:none}
.hm-dot.is-on{opacity:1}
.hm-l{position:absolute; top:-10px; left:12px; white-space:nowrap; font:600 .74rem/1 var(--ff); color:#fff; background:rgba(10,20,34,.82); padding:5px 7px}
[dir=rtl] .hm-l{font-family:var(--ff-ar); direction:rtl; font-size:.82rem}
.hm-l b{color:var(--gold-lt)}
.hm-l :is(small,:where(.t-small)){color:var(--mist); font-weight:500}
.side-l > .hm-l{left:auto; right:12px}
.side-t > .hm-l{top:auto; bottom:9px; left:0; right:auto; transform:translateX(-50%)}
.side-r.flip > .hm-l{left:auto; right:12px}
.side-l.flip > .hm-l{right:auto; left:12px}
.hm-dot .hm-l{font-size:.68rem; padding:3px 6px; top:-9px; background:rgba(10,20,34,.7)}
.hm-m{visibility:visible; transition:opacity .3s, visibility 0s}
.hm-m.is-out{opacity:0; pointer-events:none; visibility:hidden; transition:opacity .3s, visibility 0s .3s}   
/* hidden pins also leave the tab order */
.hm.is-picked .hm-pin:not(.is-on):not(:hover) .hm-l{opacity:.45}

/* 2026: routes to coming-soon cities are dashed in the "soon" blue and never draw in */
.hm-r.hm-r--soon{stroke:#9FC0EE; stroke-width:calc(1.2px * var(--k,1)); stroke-dasharray:calc(2.5px * var(--k,1)) calc(3px * var(--k,1)); stroke-dashoffset:0; opacity:.5}
.hm.is-picked .hm-r.hm-r--soon{opacity:.12}
.hm.is-picked .hm-r.hm-r--soon.is-on{opacity:.9; stroke-width:calc(1.6px * var(--k,1)); animation:none}

/* legend keys for city dots: operating (white square) and coming soon (blue outline) */
.map-legend i.dot{width:7px; height:7px; background:#fff}
.map-legend i.soon{width:7px; height:7px; background:transparent; border:1px solid #9FC0EE}

/* image note on a photo frame: "Artist's impression" / "City photo" (frame is the positioned parent) */
.img-note{position:absolute; z-index:2; top:12px; inset-inline-end:12px; font:700 .62rem/1 var(--ff); letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(10,20,34,.8); padding:6px 8px; pointer-events:none}
[dir=rtl] .img-note{font-family:var(--ff-ar); letter-spacing:0; font-size:.78rem; padding:5px 8px}


/* ---------- 20. sticky in-page index (businesses / locations) ---------- */
.toc{position:sticky; top:calc(var(--hdr-s) + 28px); display:grid; gap:0; border-top:1px solid var(--line)}
.toc a{position:relative; display:grid; grid-template-columns:34px 1fr; gap:8px; align-items:center; min-height:48px; padding:10px 0; padding-inline-start:16px; border-bottom:1px solid var(--line); color:var(--navy-900); text-decoration:none; font-weight:600; font-size:.95rem; transition:background .3s, color .3s}
.toc a b{font:700 .7rem/1 var(--ff); letter-spacing:.14em; color:var(--bronze-ink)}
.toc a::before{content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px; background:var(--gold); transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease)}
.toc a:hover{background:var(--ui)}
.toc a[aria-current=true]::before,.toc a:hover::before{transform:scaleY(1)}
.toc a[aria-current=true]{color:var(--navy-900); font-weight:800}


/* ---------- 21. portrait with offset gold frame (about) ---------- */
.portrait{position:relative; margin:0 0 24px; margin-inline-end:24px}
.portrait::before{content:""; position:absolute; inset:24px -24px -24px 24px; border:2px solid var(--gold); z-index:0}
[dir=rtl] .portrait::before{inset:24px 24px -24px -24px}
.portrait .frame{position:relative; z-index:1; aspect-ratio:4/5; background:#fff}
.portrait img{object-position:50% 18%}


/* horizontal stepper (about route) */
.stepper{display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); position:relative}
.stepper :is(li,:where(.t-li)){position:relative; padding-top:40px; padding-inline-end:24px}
.stepper :is(li,:where(.t-li))::before{content:""; position:absolute; top:7px; inset-inline:0; height:2px; background:var(--line-2)}
.stepper :is(li,:where(.t-li))::after{content:""; position:absolute; top:0; inset-inline-start:0; width:16px; height:16px; background:var(--gold); border:3px solid #fff; box-shadow:0 0 0 1px var(--gold)}
.stepper b{display:block; font:700 .72rem/1 var(--ff); letter-spacing:.16em; text-transform:uppercase; color:var(--bronze-ink); margin-bottom:10px}
[dir=rtl] .stepper b{font-family:var(--ff-ar); letter-spacing:0; font-size:.9rem}
.stepper strong{display:block; font:800 1.3rem/1.25 var(--ff); color:var(--navy-900); margin-bottom:8px}
[dir=rtl] .stepper strong{font-family:var(--ff-ar)}
.dark .stepper :is(li,:where(.t-li))::before{background:var(--line-d2)}
.dark .stepper :is(li,:where(.t-li))::after{border-color:var(--navy-900)}
.dark .stepper strong{color:#fff}
.dark .stepper b{color:var(--gold)}


/* ---------- 22. footer ---------- */
.ft{background:var(--ink); color:var(--mist); font-size:.94rem; border-top:3px solid var(--gold)}
.ft-top{display:grid; grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.4fr)); gap:40px; padding-block:72px 56px}
.ft-brand img{height:56px; width:auto; margin-bottom:22px}
.ft-brand p{max-width:30em}
.ft h2{font:700 .74rem/1 var(--ff); letter-spacing:.18em; text-transform:uppercase; color:#fff; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line-d)}
[dir=rtl] .ft h2{font-family:var(--ff-ar); letter-spacing:0; font-size:.95rem}
.ft :is(li,:where(.t-li)) a{display:inline-flex; align-items:center; min-height:44px; text-decoration:none}
.ft a{color:var(--mist); transition:color .3s}
.ft a:hover{color:var(--gold-lt)}
.ft :is(address,:where(.t-address)){line-height:1.6; padding-top:6px}
.ft-bot{position:relative; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 20px; padding-block:18px; font-size:.84rem}
.ft-bot::before{content:""; position:absolute; top:0; inset-inline:var(--gut); height:1px; background:var(--line-d)}
.ft-bot a{display:inline-flex; align-items:center; gap:8px; min-height:44px; text-decoration:none}

/* photo credit line (CC BY-SA city photos) */
.ft-credit{flex-basis:100%; order:3; margin:0; font-size:.76rem; line-height:1.6; color:var(--mist); opacity:.85}
.ft-credit a{display:inline; min-height:0; text-decoration:underline; text-underline-offset:2px}


/* ---------- 23. reveals + motion ---------- */
.js [data-rv]{opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease) var(--d,0s), transform 1s var(--ease) var(--d,0s)}
.js [data-rv].in{opacity:1; transform:none}
.js [data-rv=fade]{transform:none}
.js [data-rv=wipe]{opacity:1; transform:none; clip-path:inset(0 100% 0 0); transition:clip-path 1.2s var(--ease-io) var(--d,0s)}
[dir=rtl].js [data-rv=wipe]{clip-path:inset(0 0 0 100%)}
.js [data-rv=wipe-up]{opacity:1; transform:none; clip-path:inset(100% 0 0 0); transition:clip-path 1.2s var(--ease-io) var(--d,0s)}
.js [data-rv=wipe].in,.js [data-rv=wipe-up].in,[dir=rtl].js [data-rv=wipe].in{clip-path:inset(0)}
.js [data-rv=wipe] img,.js [data-rv=wipe-up] img{transform:scale(1.12); transition:transform 1.8s var(--ease) var(--d,0s)}
.js [data-rv=wipe].in img,.js [data-rv=wipe-up].in img{transform:none}
.js .frame[data-rv].in:hover img{transform:scale(1.05); transition-delay:0s; transition-duration:1.2s}
.js [data-rv=line]{opacity:1; transform:scaleX(0); transform-origin:var(--o-s,left); transition:transform 1.2s var(--ease) var(--d,0s)}
[dir=rtl].js [data-rv=line]{--o-s:right}
.js [data-rv=line].in{transform:none}

/* ---------- 24. reduced motion: everything static but complete ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; transition-delay:0s!important}
  .js [data-rv]{opacity:1!important; transform:none!important; clip-path:none!important}
  .js [data-rv] img{transform:none!important}
  .js .hero .h1 .ln > :is(span,:where(.t-span)){transform:none}
  .js .hmsg,.js .hmsg:not(.is-on){transition:none!important; transform:none!important}
  .caret{animation:none; display:none}
  .curtain{display:none}
  .hs-s img,.pbn-media img{transform:none!important; animation:none!important}
  .band-photo > .bp-media img{transform:none!important}
}

/* ---------- 25. responsive ---------- */
@media (max-width:1240px){
  .nav-link{padding:0 9px; font-size:.86rem}
  .has-dd .nav-link{padding-inline-end:0}
  .hdr-cta{padding:0 14px}
  .hb{grid-template-columns:minmax(0,1fr) auto}
  .hb-cap{display:none}
}
@media (max-width:1180px) and (min-width:1024px){
  .hdr-in{gap:14px}
  .brand img{height:40px}
  .hdr.is-scrolled .brand img{height:38px}
  .nav-link{padding:0 6px; font-size:.84rem}
  .nav-link::after{inset-inline:6px}
  [dir=rtl] .nav-link{font-size:.92rem}
  .hdr-in{gap:10px}
  .dd-btn{width:36px}
  .hdr-cta{min-width:121px; padding:0 14px; letter-spacing:.1em}
}
@media (max-width:1023px){
  .burger{display:block}
  .hdr-cta{display:none}
  .hdr-tools{margin-inline-start:auto}
  .brand img,.hdr.is-scrolled .brand img{height:40px}
  .nav{position:fixed; z-index:95; inset:calc(var(--hdr) + 1px) 0 0 0; display:block; background:#fff; overflow-y:auto; overscroll-behavior:contain; padding:8px var(--gut) 40px; visibility:hidden; clip-path:inset(0 0 100% 0); transition:clip-path .5s var(--ease-io), visibility 0s .5s}
  .hdr.is-scrolled .nav{inset-block-start:calc(var(--hdr-s) + 1px)}
  .menu-open .nav{visibility:visible; clip-path:inset(0); transition:clip-path .5s var(--ease-io), visibility 0s}
  .menu-open body{overflow:hidden}
  .nav-list{flex-direction:column; align-items:stretch; gap:0}
  .nav-item{flex-wrap:wrap; border-bottom:1px solid var(--line)}
  .nav-link{flex:1; min-height:60px; padding:0; font-size:1.15rem; font-weight:700}
  [dir=rtl] .nav-link{font-size:1.2rem}
  .nav-link::after{inset-inline:0 auto; width:28px; bottom:12px}
  .has-dd .nav-link::after{inset-inline-end:auto}
  .dd-btn{width:56px; min-height:60px; border-inline-start:1px solid var(--line)}
  .dd-btn .ic{width:18px; height:18px}
  .dd{position:static; flex-basis:100%; visibility:visible; clip-path:none; box-shadow:none; border:0; display:none; transition:none}
  .nav-item.is-open .dd{display:block; clip-path:none}
  .dd-in{display:block; padding:0 0 14px}
  .dd-intro{display:none}
  .dd-grid,.dd-grid.c4g{grid-template-columns:1fr 1fr; border-top:0; background:var(--ui)}
  .dd-grid :is(li,:where(.t-li)),.dd-grid.c4g :is(li,:where(.t-li)){border-inline-start:0; border-bottom:1px solid #fff}
  .dd-grid :is(li,:where(.t-li)):nth-child(odd){border-inline-end:1px solid #fff}
  .dd-a{padding:14px 14px 16px}
  .dd-a :is(small,:where(.t-small)){display:none}
  .dd-a strong{font-size:.95rem}
  .nav-foot{display:grid; gap:14px; margin-top:28px}
  
  /* phone menu: the language dropdown spans the menu width and opens in place (pushes the rest down) */
.lang-dd--menu .lang-btn{width:100%; height:48px; justify-content:space-between; font-size:.86rem}
  .lang-dd--menu .lang-list{position:static; display:none; margin-top:-1px; box-shadow:none; opacity:1; transform:none; visibility:visible; transition:none}
  .lang-dd--menu.is-open .lang-list{display:block}
  .nav-foot .lang-dd--menu .lang-o{display:flex; min-height:48px; padding:0 16px; font-size:.9rem; font-weight:700; color:var(--navy-900)}
  .menu-open .hdr-tools .lang-dd{visibility:hidden}   
  /* the open menu has its own language dropdown */
.nav-foot .lang-dd--menu .lang-o:lang(ar){font-size:1rem}
  .nav-foot .lang-dd--menu .lang-o[aria-current=true]{color:#fff}
  .nav-foot .btn:where(:not(.wp-block-button)),.nav-foot .wp-block-button.btn > .wp-element-button{width:100%}
  .nav-foot p{font-size:.9rem}
  .nav-foot a:not(.btn:where(:not(.wp-block-button))),.nav-foot a:not(.wp-block-button.btn > .wp-element-button){display:inline-flex; align-items:center; min-height:44px; color:var(--navy-900); font-weight:600}
}
@media (max-width:960px){
  .g12 > [class*="c"]:not(.keep){grid-column:1/-1}
  .sh-row > :first-child,.sh-row > :nth-child(2){grid-column:1/-1}
  .hero-copy{grid-column:1/-1}
  .cta > :first-child,.cta > :last-child{grid-column:1/-1}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail-track{grid-auto-columns:calc((100% - 2 * var(--cg)) / 3)}
  .seq{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:44px}
  .seq :is(li,:where(.t-li)):nth-child(2) .arr{display:none}
  .brands{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ft-top{grid-template-columns:1fr 1fr}
  .ft-brand{grid-column:1/-1}
  .figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fig:nth-child(3){border-inline-start:0; padding-inline-start:0}
  .fig:nth-child(n+3){border-top:1px solid var(--line)}
  .dark .fig:nth-child(n+3){border-top-color:var(--line-d)}
  .pbn-in .g12 > :is(div,:where(.t-div)){grid-column:1/-1}
  .toc{position:static}
  .loc .map-frame{min-height:0; aspect-ratio:16/10}
}
@media (max-width:720px){
  :root{--sec:72px}
  .hero{min-height:calc(100svh - var(--hdr))}
  #main > .wp-block-post-content > .hero:first-child{min-height:100svh}
  .hero::before,[dir=rtl] .hero::before{background:linear-gradient(0deg,rgba(10,20,34,.95) 0%,rgba(10,20,34,.78) 55%,rgba(10,20,34,.5) 100%)}
  .hero-main{align-items:flex-end; padding-block:40px 28px}
  .hb{grid-template-columns:minmax(0,1fr) auto}
  .seg{min-height:52px; padding:12px 6px}
  .seg :is(span,:where(.t-span)){display:none}
  .seg b{text-align:center}
  .hb-ctl{padding-inline-start:10px}
  .hb-ctl .sq{width:44px; height:44px}
  .cards{grid-template-columns:1fr}
  .points{grid-template-columns:1fr}
  .points :is(li,:where(.t-li)){border-inline-start:0; padding-inline-start:0; padding-bottom:22px; border-top:1px solid var(--line-2)}
  .points :is(li,:where(.t-li)):first-child{border-top:0}
  .dark .points :is(li,:where(.t-li)){border-top-color:var(--line-d)}
  .rail-track{grid-auto-columns:80%}
  .row-head{flex-direction:column; align-items:flex-start}
  .seq{grid-template-columns:1fr}
  .seq .arr{display:none}
  .brands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brands > :is(li,:where(.t-li)){grid-template-rows:120px auto}
  .br-logo{height:120px; padding:18px 16px 4px}
  .brands > :is(li,:where(.t-li)).is-dark .br-logo{padding:18px 16px}
  .brands > :is(li,:where(.t-li)).is-photo .br-logo img{height:120px}
  .br-logo img{height:70px; max-width:80%}
  .br-logo img[src$="bab-al-yemen-restaurants.jpg"]{height:96px; max-width:92%}
  .br-cap{padding:12px 14px 16px}
  .f-row{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr 1fr; gap:36px 20px; padding-block:56px 40px}
  .ft-top > :is(div,:where(.t-div)):last-child{grid-column:1/-1}
  .br-cta a{padding:20px 16px}
  .br-cta a strong{font-size:1.2rem}
  .card-media{aspect-ratio:16/9}
  .card-body{padding:20px 20px 18px}
  
  /* small map: number-only pin labels; the chosen country keeps its name */
.hm-pin:not(.is-on) .hm-l,.hm-hub:not(.is-on) .hm-l{font-size:0; padding:4px 5px}
  .hm-pin:not(.is-on) .hm-l b,.hm-hub:not(.is-on) .hm-l b{font-size:.66rem}
  .hm-m i{left:-4px; top:-4px; width:8px; height:8px; box-shadow:0 0 0 2px rgba(211,155,56,.22)}
  .hm-hub i{left:-5px; top:-5px; width:10px; height:10px; box-shadow:0 0 0 2px var(--gold)}
  .side-t > .hm-l{bottom:7px}
  .hm-origin .hm-l{display:none}
  .hm-dot .hm-l{display:none}
  .fig{padding:28px 14px}
  .fig:nth-child(odd){padding-inline-start:0}
  .map-legend{display:none}
  .loc .map-frame{aspect-ratio:4/3}
  .hero .label.short::after{display:none}
  .stepper{grid-template-columns:1fr; gap:28px}
  .stepper :is(li,:where(.t-li)){padding-top:0; padding-inline-start:40px}
  .stepper :is(li,:where(.t-li))::before{top:0; bottom:-28px; inset-inline-start:7px; inset-inline-end:auto; width:2px; height:auto}
  .stepper :is(li,:where(.t-li)):last-child::before{display:none}
  .portrait{margin-inline-end:16px}
  .portrait::before{inset:16px -16px -16px 16px}
  [dir=rtl] .portrait::before{inset:16px 16px -16px -16px}
  .dd-grid,.dd-grid.c4g{grid-template-columns:1fr 1fr}
}

/* home sectors: a swipe row on phones */
.rail-foot.sec-foot{display:none}
@media (max-width:720px){
  #sectorCards{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:82%; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; margin-inline:calc(-1 * var(--gut)); padding-inline:var(--gut); scroll-padding-inline:var(--gut); scrollbar-width:none}
  #sectorCards::-webkit-scrollbar{display:none}
  #sectorCards > :is(li,:where(.t-li)){scroll-snap-align:start}
  .js #sectorCards > [data-rv]{opacity:1; transform:none}   
  /* cards off to the side never cross the viewport edge */
#sectorCards .card-media{aspect-ratio:16/10}
  #sectorCards .card-body{gap:10px}
  .rail-foot.sec-foot{display:grid; margin-top:22px}
}
@media (max-width:420px){
  .hdr-tools{gap:8px}
  .hdr-tools .lang-btn{min-width:104px; padding-inline:12px 10px}
  .brand img,.hdr.is-scrolled .brand img{height:36px}
}


/* =========================================================
   BRANCH BROWSER (js/branches.js): locations.html country sections, businesses.html sector sections
   The rows of a country or sector (.bb-list) are buttons; the selected one has a navy fill and a gold rule.
   The pane (.bb-pane) shows that business: a fixed 3:2 photo box (crossfade, no height jump),
   a caption, square thumbnails (sideways scroll inside the pane) and previous/next business.
   Desktop: list beside the pane (pane sticky; the alternating left/right layout is kept).
   <= 1023 px: heading, then the pane, then the list.
   ========================================================= */
.bb-hint{margin-top:22px; font-size:.86rem; line-height:1.5; color:var(--text)}
.dark .bb-hint{color:var(--mist)}
.ctry .vlist.bb-list{margin-top:12px}
.vlist .bb-li{display:block; padding:0}
.bb-li .bb-dir{margin-inline-start:18px}
.bb-row{position:relative; display:flex; justify-content:space-between; align-items:center; gap:14px; width:100%; min-height:44px; margin:0; padding:12px 14px; padding-inline-start:18px; border:0; background:transparent; color:inherit; font:inherit; text-align:start; transition:background .25s}
.bb-row::before{content:""; position:absolute; inset-block:-1px; inset-inline-start:0; width:3px; background:var(--gold); transform:scaleY(0); transform-origin:top; transition:transform .3s var(--ease)}
.bb-row:hover{background:rgba(14,28,46,.045)}
.dark .bb-row:hover{background:rgba(255,255,255,.05)}
.bb-row:hover::before,.bb-row[aria-pressed=true]::before{transform:scaleY(1)}
.bb-row[aria-pressed=true]{background:var(--navy-900)}
.dark .bb-row[aria-pressed=true]{background:var(--navy-800)}
.bb-row[aria-pressed=true] strong{color:#fff}
.bb-row[aria-pressed=true] :is(small,:where(.t-small)){color:var(--mist)}
.bb-row[aria-pressed=true] .v-l{color:var(--gold)}
.bb-row[aria-pressed=true] .chip{background:transparent; border-color:var(--line-d2); color:var(--mist)}
.bb-row[aria-pressed=true] .chip--uc{border-color:var(--gold); color:var(--gold-lt); background:rgba(211,155,56,.12)}
.bb-row[aria-pressed=true] .chip--soon{border-color:#7FA6DA; color:#BBD0EE; background:rgba(127,166,218,.1)}
.bb-row:focus-visible{z-index:1; outline-offset:1px}
.bb-tx{min-width:0}

/* row label (bronze kicker) and address: the same look on both pages (locations.html also sets them for its other lists) */
.bb-list .v-l{margin-bottom:3px; font:700 .66rem/1.35 var(--ff); letter-spacing:.14em; text-transform:uppercase; color:var(--bronze-ink)}
[dir=rtl] .bb-list .v-l{font-family:var(--ff-ar); letter-spacing:0; font-size:.8rem}
.dark .bb-list .v-l{color:var(--gold)}
.bb-list .v-a{margin-top:2px; line-height:1.45}

/* a sub-heading row inside a list (Businesses: "Projects in development"); not a button */
.vlist .bb-sub{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:22px 0 10px; font:700 .72rem/1.3 var(--ff); letter-spacing:.14em; text-transform:uppercase; color:var(--bronze-ink)}
[dir=rtl] .vlist .bb-sub{font-family:var(--ff-ar); letter-spacing:0; font-size:.86rem; text-transform:none}
.dark .vlist .bb-sub{color:var(--gold)}

.bb-pane{position:relative; background:var(--navy-900); color:#fff}
.dark .bb-pane{background:var(--navy-800)}
.bb-pane :focus-visible{outline-color:var(--gold-lt)}
.bb-stage{position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--ink); touch-action:pan-y}
.bb-stage:focus-visible{outline:0}
.bb-stage::after{content:""; position:absolute; inset:0; z-index:4; pointer-events:none; box-shadow:inset 0 0 0 3px var(--gold-lt), inset 0 0 0 5px var(--navy-900); opacity:0}
.bb-stage:focus-visible::after{opacity:1}
.bb-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); opacity:0; transition:opacity .22s ease}
.bb-img.is-on{opacity:1}
.bb-ov{position:absolute; inset:0; z-index:2; pointer-events:none}
.bb-stage .br-chip{width:104px; height:72px}
.bb-ctl{position:absolute; z-index:3; bottom:0; inset-inline-end:0; display:flex; align-items:center; background:rgba(10,20,34,.88); border-top:2px solid var(--gold)}
.bb-pp[hidden]{display:none}
.bb-ctl.is-one .bb-count{min-width:0; padding:0 16px; height:44px; display:grid; place-items:center}
.bb-pp{width:48px; height:48px; display:grid; place-items:center; margin:0; padding:0; border:0; background:transparent; color:#fff; transition:background .25s, color .25s}
.bb-pp:hover{background:#fff; color:var(--navy-900)}
.bb-pp:focus-visible{outline-offset:-4px}
.bb-count{min-width:74px; text-align:center; font:700 .74rem/1 var(--ff); letter-spacing:.14em; color:#fff; font-variant-numeric:tabular-nums}
.bb-cap{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:6px 16px; min-height:86px; padding:16px 20px 14px; border-top:2px solid var(--gold)}
.bb-ct strong{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font:700 1.06rem/1.3 var(--ff); color:#fff}
[dir=rtl] .bb-ct strong{font-family:var(--ff-ar); line-height:1.45}
.bb-ct :is(small,:where(.t-small)){display:block; margin-top:4px; font-size:.84rem; line-height:1.4; color:var(--mist)}
.bb-cap .chip{background:transparent; border-color:var(--line-d2); color:var(--mist)}
.bb-cap .chip--uc{border-color:var(--gold); color:var(--gold-lt); background:rgba(211,155,56,.12)}
.bb-cap .chip--soon{border-color:#7FA6DA; color:#BBD0EE; background:rgba(127,166,218,.1)}
.bb-thumbs{display:flex; gap:8px; height:80px; padding:0 20px 16px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:var(--line-d2) transparent}
.bb-th{position:relative; flex:none; width:64px; height:64px; margin:0; padding:0; border:0; background:var(--ink); opacity:.6; transition:opacity .2s}
.bb-th img{width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%)}
.bb-th:hover,.bb-th[aria-pressed=true]{opacity:1}
.bb-th[aria-pressed=true]::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 2px var(--gold)}
.bb-th:focus-visible{outline:2px solid #fff; outline-offset:-5px}
.bb-nav{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; border-top:1px solid var(--line-d)}
.bb-bn{display:inline-flex; align-items:center; gap:10px; min-height:52px; margin:0; padding:0 20px; border:0; background:transparent; color:#fff; font:700 .7rem/1.2 var(--ff); letter-spacing:.14em; text-transform:uppercase; transition:background .25s}
[dir=rtl] .bb-bn{font-family:var(--ff-ar); letter-spacing:0; font-size:.88rem; text-transform:none}
.bb-bn[hidden]{display:none}
.bb-bn .ic{color:var(--gold)}
.bb-bn:hover{background:rgba(255,255,255,.07)}
.bb-bn:focus-visible{outline-offset:-4px}
.bb-pos{padding:8px; text-align:center; white-space:nowrap; font-size:.84rem; line-height:1.3; color:var(--mist); font-variant-numeric:tabular-nums}

/* The DOM order is heading, pane, list (.bb-g): the reading and Tab order of the stacked layout.
   desktop: heading and list share the text column, centred against the pane (the two 1fr rows take the
   spare height); the pane spans all rows and stays in view while a long list scrolls */
@media (min-width:1024px){
  section.ctry .g12.bb-g{grid-template-rows:1fr auto auto 1fr; row-gap:0}
  .bb-g > .ctry-hd{grid-column:1 / span 4; grid-row:2}
  .bb-g > .ctry-ls{grid-column:1 / span 4; grid-row:3}
  section.ctry .g12.bb-g > .ctry-ph.bb-col{grid-column:6 / span 7; grid-row:1 / -1; align-self:start; position:sticky; top:calc(var(--hdr-s) + 24px)}
  .ctry.is-flip .bb-g > .ctry-hd,.ctry.is-flip .bb-g > .ctry-ls{grid-column:9 / span 4}
  section.ctry.is-flip .g12.bb-g > .ctry-ph.bb-col{grid-column:1 / span 7}
}
/* tablet / phone: heading, then the pane, then the list, in DOM order */
@media (max-width:1023px){
  .bb-g > .ctry-hd,.bb-g > .ctry-ls{grid-column:1/-1}
  section.ctry .g12.bb-g > .ctry-ph.bb-col{position:static; grid-column:1/-1; grid-row:auto}
  section.ctry .ctry-ls .bb-hint{margin-top:0}
}
/* desktop panes are narrow up to ~1180px: the business buttons show their arrow only (the name stays for AT) */
@media (min-width:1024px) and (max-width:1180px){
  .bb-bn{padding:0; width:52px; justify-content:center}
  .bb-bn .lbl{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
}
@media (max-width:600px){
  .bb-bn{padding:0; width:52px; justify-content:center}
  .bb-bn .lbl{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .bb-cap{padding:14px 16px 12px; min-height:80px}
  .bb-thumbs{padding:0 16px 14px; height:70px}
  .bb-th{width:56px; height:56px}
  .bb-stage .br-chip{width:80px; height:56px; bottom:12px; inset-inline-start:12px; padding:6px}
  .bb-stage .br-chip img{max-height:44px}
  .bb-pp{width:44px; height:44px}
  .bb-count{min-width:64px}
}
@media (prefers-reduced-motion:reduce){
  .bb-img,.bb-row,.bb-row::before,.bb-th,.bb-pp,.bb-bn{transition:none}
}

/* ---------- print: a plain white header with the colour logo, no overlap ---------- */
@media print{
  .hdr{position:static; background:#fff!important; border-bottom:1px solid var(--line)!important; box-shadow:none!important}
  .hdr .brand .logo-c{display:block!important}
  .hdr .brand .logo-r{display:none!important}
  .hdr .nav-link,.hdr .dd-btn{color:var(--navy-900)!important}
  .hdr-tools,.hdr-prog,.skip{display:none!important}
  .js #main:has(> .wp-block-post-content > .hero:first-child, > .wp-block-post-content > .pbn:first-child){margin-top:0}
  .js #main > .wp-block-post-content > .hero:first-child,.js #main > .wp-block-post-content > .pbn:first-child{padding-top:0}
}


/* === page: home (from concept-atlas/index.html, scoped to body.atlas-page-home) === */


/* Home only: hero holds while off-screen or in a hidden tab (the visitor's pause state is kept apart) */
:where(.atlas-page-home,.atlas-pat-home) .hero.is-held .seg[aria-current=true] i::after{animation-play-state:paused}

/* map panel rows: names on one line, cut with an ellipsis (full text stays in the DOM) */
:where(.atlas-page-home,.atlas-pat-home) .loc-info{grid-template-columns:minmax(0,1fr)}
:where(.atlas-page-home,.atlas-pat-home) .loc-info .vlist :is(li,:where(.t-li)) > :is(span,:where(.t-span)):first-child{min-width:0}
:where(.atlas-page-home,.atlas-pat-home) .loc-info .vlist .vl-sum strong{white-space:normal}
:where(.atlas-page-home,.atlas-pat-home) .loc-info .vlist strong{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* projects summary row: the status line wraps, the chips stack at the end */
:where(.atlas-page-home,.atlas-pat-home) .loc-info .vlist .vl-sum{align-items:flex-start}
:where(.atlas-page-home,.atlas-pat-home) .loc-info .vlist .vl-sum :is(small,:where(.t-small)){margin-top:2px; line-height:1.5}
:where(.atlas-page-home,.atlas-pat-home) .loc-info .vl-chips{display:grid; gap:6px; justify-items:end}
:where(.atlas-page-home,.atlas-pat-home) .loc-info .li-a{font-size:.92rem}

/* external-link icon in a text link: no arrow nudge, never mirrored */
:where(.atlas-page-home,.atlas-pat-home) .more .ic.ext{transition:none}
:where(.atlas-page-home,.atlas-pat-home) .more:hover .ic.ext,[dir=rtl] :where(.atlas-page-home,.atlas-pat-home) .more:hover .ic.ext{transform:none}
:where(.atlas-page-home,.atlas-pat-home) .map-co[hidden]{display:none}
/* German: section headlines break between words on wide screens (no "Unter-nehmen"); phones keep the shared hyphenation.
   Addresses never hyphenate ("Dam-mam") */
@media (min-width:768px){ html:lang(de) :where(.atlas-page-home,.atlas-pat-home) .h2{hyphens:manual; -webkit-hyphens:manual} }
html:lang(de) :where(.atlas-page-home,.atlas-pat-home) :is(address,:where(.t-address)){hyphens:manual; -webkit-hyphens:manual}

/* hero sub-line: the profile cover tagline (p1), set as a quote under the h1 */
:where(.atlas-page-home,.atlas-pat-home) .hero .tagline{position:relative; max-width:30em; padding-inline-start:18px; border-inline-start:2px solid var(--gold); color:#fff; font:500 clamp(1.05rem,1.4vw,1.2rem)/1.5 var(--ff)}
[dir=rtl] :where(.atlas-page-home,.atlas-pat-home) .hero .tagline{font-family:var(--ff-ar)}
/* hero kicker: on phones "since 2007" takes its own line, the separator dot is dropped at the break */
@media (max-width:520px){
  html:not([dir=rtl]) :where(.atlas-page-home,.atlas-pat-home) .hero .label.kick > :is(span,:where(.t-span)){line-height:1.7}
  html:not([dir=rtl]) :where(.atlas-page-home,.atlas-pat-home) .hero .label.kick .nw{display:block}
  html:not([dir=rtl]) :where(.atlas-page-home,.atlas-pat-home) .hero .label.kick .sep{display:none}
}


/* === page: about (from concept-atlas/about.html, scoped to body.atlas-page-about) === */




/* =========================================================
   ABOUT page only (shared rules live in css/site.css)
   Sections (spec 5.2): banner + jump bar, 01 story, 02 glance, 03 chairman's message, 04 leadership team,
   05 vision & mission, 06 approach, 07 route, 08 explore, 09 contact band
   ========================================================= *//* banner: "on this page" jump bar along the bottom edge (seven links sized to their labels; an ellipsis only as a last resort) */
:where(.atlas-page-about,.atlas-pat-about) .pbn .pbn-in{padding-bottom:calc(clamp(48px,6vw,88px) + 64px)}
:where(.atlas-page-about,.atlas-pat-about) .pbn-foot{background:rgba(10,20,34,.42)}
:where(.atlas-page-about,.atlas-pat-about) .otp{display:flex}
:where(.atlas-page-about,.atlas-pat-about) .otp :is(li,:where(.t-li)){flex:1 1 auto; min-width:0; border-inline-start:1px solid var(--line-d)}
:where(.atlas-page-about,.atlas-pat-about) .otp :is(li,:where(.t-li)):first-child{border-inline-start:0}
:where(.atlas-page-about,.atlas-pat-about) .otp a{position:relative; display:flex; align-items:center; gap:12px; min-width:0; min-height:60px; padding-inline:18px; color:#fff; text-decoration:none; font:600 .86rem/1.2 var(--ff); white-space:nowrap; transition:background .3s}
:where(.atlas-page-about,.atlas-pat-about) .otp a :is(span,:where(.t-span)){min-width:0; overflow:hidden; text-overflow:ellipsis}
[dir=rtl] :where(.atlas-page-about,.atlas-pat-about) .otp a{font-family:var(--ff-ar); font-size:.95rem}
:where(.atlas-page-about,.atlas-pat-about) .otp :is(li,:where(.t-li)):first-child a{padding-inline-start:0}
:where(.atlas-page-about,.atlas-pat-about) .otp a b{flex:none; font:700 .7rem/1 var(--ff); letter-spacing:.14em; color:var(--gold)}
:where(.atlas-page-about,.atlas-pat-about) .otp a::after{content:""; position:absolute; inset-inline:18px; top:-1px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:var(--o-s,left); transition:transform .45s var(--ease)}
:where(.atlas-page-about,.atlas-pat-about) .otp :is(li,:where(.t-li)):first-child a::after{inset-inline-start:0}
[dir=rtl] :where(.atlas-page-about,.atlas-pat-about) .otp a::after{--o-s:right}
:where(.atlas-page-about,.atlas-pat-about) .otp a:hover::after,:where(.atlas-page-about,.atlas-pat-about) .otp a:focus-visible::after{transform:scaleX(1)}
:where(.atlas-page-about,.atlas-pat-about) .otp a:focus-visible{outline-offset:-3px}


/* 01 story: two-photo composition, rectangles only */
:where(.atlas-page-about,.atlas-pat-about) .ab-comp{position:relative; align-self:center; padding-bottom:clamp(64px,10vw,140px)}
:where(.atlas-page-about,.atlas-pat-about) .ab-main{width:86%}
:where(.atlas-page-about,.atlas-pat-about) .ab-sub{position:absolute; bottom:0; inset-inline-end:0; width:44%; aspect-ratio:4/3; border:10px solid #fff; border-bottom:0; border-inline-end:0; z-index:3}
:where(.atlas-page-about,.atlas-pat-about) .ab-mark{position:absolute; z-index:2; top:-16px; inset-inline-end:calc(14% - 16px); width:clamp(64px,8vw,112px); height:clamp(64px,8vw,112px); border-top:2px solid var(--gold); border-inline-end:2px solid var(--gold)}
:where(.atlas-page-about,.atlas-pat-about) .ab-copy .prose{margin-top:28px}
:where(.atlas-page-about,.atlas-pat-about) .ab-quote{margin-top:10px; padding-inline-start:22px; border-inline-start:3px solid var(--gold); font:300 clamp(1.3rem,1.1rem + .6vw,1.6rem)/1.4 var(--ff); color:var(--navy-900); text-wrap:balance}
[dir=rtl] :where(.atlas-page-about,.atlas-pat-about) .ab-quote{font-family:var(--ff-ar); font-weight:400; line-height:1.6}


/* 02 at a glance (dark): figures between hairlines + countries by region */
:where(.atlas-page-about,.atlas-pat-about) #glance .figs{border-block:1px solid var(--line-d)}
:where(.atlas-page-about,.atlas-pat-about) #glance .fig-k{line-height:1.3}
:where(.atlas-page-about,.atlas-pat-about) #glance .sh-row > p{max-width:36em}
:where(.atlas-page-about,.atlas-pat-about) .rg-wrap{margin-top:clamp(56px,6vw,88px)}
:where(.atlas-page-about,.atlas-pat-about) .rg-wrap .label{margin-bottom:0}

/* one column per region group, however many the data gives (the four regions named in the profile; the data files each country under one of them) */
:where(.atlas-page-about,.atlas-pat-about) .rg{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); margin-top:24px; border-top:1px solid var(--line-d)}
:where(.atlas-page-about,.atlas-pat-about) .rg > :is(li,:where(.t-li)){padding:26px clamp(16px,2vw,32px) 0; border-inline-start:1px solid var(--line-d)}
:where(.atlas-page-about,.atlas-pat-about) .rg > :is(li,:where(.t-li)):first-child{border-inline-start:0; padding-inline-start:0}
:where(.atlas-page-about,.atlas-pat-about) .dark .rg-k{font:700 .74rem/1.2 var(--ff); letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}
[dir=rtl] :where(.atlas-page-about,.atlas-pat-about) .rg-k{font-family:var(--ff-ar); letter-spacing:0; font-size:.95rem}
:where(.atlas-page-about,.atlas-pat-about) .dark .rg-n{display:flex; align-items:baseline; gap:10px; margin:16px 0 12px; font:200 clamp(2.6rem,1.8rem + 2vw,3.6rem)/1 var(--ff); color:#fff; letter-spacing:-.03em}
:where(.atlas-page-about,.atlas-pat-about) .rg-n :is(small,:where(.t-small)){font:600 .82rem/1 var(--ff); letter-spacing:.06em; color:var(--mist)}
[dir=rtl] :where(.atlas-page-about,.atlas-pat-about) .rg-n :is(small,:where(.t-small)){font-family:var(--ff-ar); letter-spacing:0; font-size:.9rem}
:where(.atlas-page-about,.atlas-pat-about) .rg :is(ul,:where(.t-ul)){border-top:1px solid var(--line-d)}
:where(.atlas-page-about,.atlas-pat-about) .rg :is(ul,:where(.t-ul)) :is(li,:where(.t-li)){border-bottom:1px solid var(--line-d)}
:where(.atlas-page-about,.atlas-pat-about) .rg :is(ul,:where(.t-ul)) a{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; color:#fff; text-decoration:none; font-weight:600; font-size:.95rem; transition:color .3s}
:where(.atlas-page-about,.atlas-pat-about) .rg :is(ul,:where(.t-ul)) a .ic{width:16px; height:16px; color:var(--gold); opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .4s var(--ease)}
[dir=rtl] :where(.atlas-page-about,.atlas-pat-about) .rg :is(ul,:where(.t-ul)) a .ic{transform:scaleX(-1) translateX(-6px)}
:where(.atlas-page-about,.atlas-pat-about) .rg :is(ul,:where(.t-ul)) a:hover,:where(.atlas-page-about,.atlas-pat-about) .rg :is(ul,:where(.t-ul)) a:focus-visible{color:var(--gold-lt)}
:where(.atlas-page-about,.atlas-pat-about) .rg :is(ul,:where(.t-ul)) a:hover .ic,:where(.atlas-page-about,.atlas-pat-about) .rg :is(ul,:where(.t-ul)) a:focus-visible .ic{opacity:1; transform:none}
[dir=rtl] :where(.atlas-page-about,.atlas-pat-about) .rg :is(ul,:where(.t-ul)) a:hover .ic,[dir=rtl] :where(.atlas-page-about,.atlas-pat-about) .rg :is(ul,:where(.t-ul)) a:focus-visible .ic{transform:scaleX(-1)}


/* 03 chairman's message: portrait column sticky at 961px+ while the five paragraphs scroll beside it */
:where(.atlas-page-about,.atlas-pat-about) .ld-copy{display:grid; gap:18px; align-content:start; justify-items:start; align-self:start}
:where(.atlas-page-about,.atlas-pat-about) .ld-role{display:flex; align-items:center; gap:12px; font:700 .74rem/1.3 var(--ff); letter-spacing:.18em; text-transform:uppercase; color:var(--bronze-ink)}
:where(.atlas-page-about,.atlas-pat-about) .ld-role::before{content:""; width:32px; height:2px; background:var(--gold); flex:none}
[dir=rtl] :where(.atlas-page-about,.atlas-pat-about) .ld-role{font-family:var(--ff-ar); letter-spacing:0; font-size:.98rem}
:where(.atlas-page-about,.atlas-pat-about) .ld-name{font:700 1.35rem/1.3 var(--ff); color:var(--navy-900); letter-spacing:.01em; margin-top:-4px}
[dir=rtl] :where(.atlas-page-about,.atlas-pat-about) .ld-name{font-family:var(--ff-ar); letter-spacing:0; font-size:1.45rem}
:where(.atlas-page-about,.atlas-pat-about) .ld-alt{font:600 1.35rem/1.4 var(--ff-ar); color:var(--text); margin-top:-6px; text-align:match-parent}
:where(.atlas-page-about,.atlas-pat-about) .ld-alt:lang(en){font-family:var(--ff); font-size:1.15rem; letter-spacing:.02em}
:where(.atlas-page-about,.atlas-pat-about) .ld-msg{display:grid; gap:18px; max-width:38em; margin-top:10px; padding-top:28px; border-top:1px solid var(--line)}
:where(.atlas-page-about,.atlas-pat-about) .ld-facts{width:100%; margin-top:14px; border-top:1px solid var(--line-2)}
:where(.atlas-page-about,.atlas-pat-about) .ld-facts :is(li,:where(.t-li)){display:grid; grid-template-columns:minmax(120px,1fr) 2fr; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line)}
:where(.atlas-page-about,.atlas-pat-about) .ld-facts :is(small,:where(.t-small)){font:700 .7rem/1.2 var(--ff); letter-spacing:.16em; text-transform:uppercase; color:var(--bronze-ink)}
[dir=rtl] :where(.atlas-page-about,.atlas-pat-about) .ld-facts :is(small,:where(.t-small)){font-family:var(--ff-ar); letter-spacing:0; font-size:.9rem}
:where(.atlas-page-about,.atlas-pat-about) .ld-facts :is(span,:where(.t-span)){font-weight:600; color:var(--navy-900)}
:where(.atlas-page-about,.atlas-pat-about) .portrait .frame img{height:100%}
:where(.atlas-page-about,.atlas-pat-about) #leadership .portrait .frame{box-shadow:0 0 0 1px var(--line-2)}
:where(.atlas-page-about,.atlas-pat-about) #leadership .portrait::after{content:""; position:absolute; z-index:0; inset:-24px 24px 24px -24px; background:var(--navy-900)}
[dir=rtl] :where(.atlas-page-about,.atlas-pat-about) #leadership .portrait::after{inset:-24px -24px 24px 24px}
:where(.atlas-page-about,.atlas-pat-about) #leadership .portrait{margin-top:24px; margin-inline-start:24px}
@media (min-width:961px) and (min-height:760px){
  :where(.atlas-page-about,.atlas-pat-about) .ld-stick{position:sticky; top:calc(var(--hdr-s) + 28px)}
}


/* 04 leadership team ("leadership register", option D): one row per person between hairlines: gold number, square
   photo on a cool-grey backdrop (multiply turns the white photo backgrounds grey), role and name, e-mail at the end.
   The Chairman first, with a larger photo, a larger name and a navy bar on the start edge. Phones: photo + text. */
:where(.atlas-page-about,.atlas-pat-about) .tm-list{border-top:1px solid var(--line-2)}
:where(.atlas-page-about,.atlas-pat-about) .tm-row{display:grid; grid-template-columns:64px 120px minmax(0,1fr) auto; gap:clamp(16px,3vw,40px); align-items:center; padding:28px 0; border-bottom:1px solid var(--line-2)}
:where(.atlas-page-about,.atlas-pat-about) .tm-n{font:200 2.4rem/1 var(--ff); color:var(--gold-d); font-variant-numeric:tabular-nums}
:where(.atlas-page-about,.atlas-pat-about) .tm-ph{aspect-ratio:1; overflow:hidden; background:#E8ECF1}
:where(.atlas-page-about,.atlas-pat-about) .tm-ph img{width:100%; height:100%; object-fit:cover; object-position:50% 25%; mix-blend-mode:multiply}
:where(.atlas-page-about,.atlas-pat-about) .tm-who{display:grid; gap:8px}
:where(.atlas-page-about,.atlas-pat-about) .tm-role{order:-1; margin:0; font:700 .74rem/1.45 var(--ff); letter-spacing:.16em; text-transform:uppercase; color:var(--bronze-ink)}
[dir=rtl] :where(.atlas-page-about,.atlas-pat-about) .tm-role{font-family:var(--ff-ar); letter-spacing:0; font-size:.92rem}
:where(.atlas-page-about,.atlas-pat-about) .tm-name{margin:0; font:300 clamp(1.5rem,1.1rem + 1vw,2.1rem)/1.2 var(--ff); letter-spacing:-.01em; color:var(--navy-900)}
:where(.atlas-page-about,.atlas-pat-about) .tm-name strong{font-weight:700}
[dir=rtl] :where(.atlas-page-about,.atlas-pat-about) .tm-name{font-family:var(--ff-ar); font-weight:400; letter-spacing:0}
:where(.atlas-page-about,.atlas-pat-about) .tm-mail{justify-self:start; padding-block:6px; font-size:.9rem; font-weight:600; color:var(--navy-900); text-decoration:underline; text-decoration-color:var(--gold-d); text-decoration-thickness:1px; text-underline-offset:4px; transition:text-decoration-color .3s, text-decoration-thickness .2s}
:where(.atlas-page-about,.atlas-pat-about) .tm-mail:hover{text-decoration-color:var(--gold); text-decoration-thickness:2px}
:where(.atlas-page-about,.atlas-pat-about) .tm-lead{grid-template-columns:64px 200px minmax(0,1fr) auto; padding-inline-start:20px; background:linear-gradient(var(--navy-900),var(--navy-900)) no-repeat; background-size:6px 100%}
[dir=rtl] :where(.atlas-page-about,.atlas-pat-about) .tm-lead{background-position:right top}
:where(.atlas-page-about,.atlas-pat-about) .tm-lead .tm-name{font-size:clamp(1.9rem,1.3rem + 1.6vw,2.8rem)}
@media (max-width:960px){
  :where(.atlas-page-about,.atlas-pat-about) .tm-row,:where(.atlas-page-about,.atlas-pat-about) .tm-lead{grid-template-columns:88px minmax(0,1fr); column-gap:18px; row-gap:12px; align-items:start}
  :where(.atlas-page-about,.atlas-pat-about) .tm-n{display:none}
  :where(.atlas-page-about,.atlas-pat-about) .tm-ph{grid-row:span 2}
  :where(.atlas-page-about,.atlas-pat-about) .tm-who,:where(.atlas-page-about,.atlas-pat-about) .tm-mail{grid-column:2}
  :where(.atlas-page-about,.atlas-pat-about) .tm-lead{grid-template-columns:120px minmax(0,1fr); padding-inline-start:18px}
  :where(.atlas-page-about,.atlas-pat-about) .tm-name{font-size:1.4rem}
  :where(.atlas-page-about,.atlas-pat-about) .tm-lead .tm-name{font-size:1.75rem}
  :where(.atlas-page-about,.atlas-pat-about) .tm-mail{font-size:.84rem; padding-block:2px}
}
@media (max-width:400px){
  :where(.atlas-page-about,.atlas-pat-about) .tm-row,:where(.atlas-page-about,.atlas-pat-about) .tm-lead{grid-template-columns:72px minmax(0,1fr); column-gap:14px}
  :where(.atlas-page-about,.atlas-pat-about) .tm-lead{grid-template-columns:96px minmax(0,1fr)}
}
@media print{ :where(.atlas-page-about,.atlas-pat-about) .tm-row{break-inside:avoid; page-break-inside:avoid} :where(.atlas-page-about,.atlas-pat-about) .tm-ph img{mix-blend-mode:normal} }


/* 05 vision & mission (photo band): two columns, each a statement + three numbered points */
:where(.atlas-page-about,.atlas-pat-about) .vm{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--cg); row-gap:56px}
:where(.atlas-page-about,.atlas-pat-about) .vm-col{display:grid; gap:18px; align-content:start}
:where(.atlas-page-about,.atlas-pat-about) .vm-t{display:flex; align-items:center; gap:12px; font:700 .74rem/1.3 var(--ff); letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}
:where(.atlas-page-about,.atlas-pat-about) .band-photo .vm-t{color:var(--gold)}
:where(.atlas-page-about,.atlas-pat-about) .vm-t::before{content:""; width:32px; height:2px; background:var(--gold); flex:none}
[dir=rtl] :where(.atlas-page-about,.atlas-pat-about) .vm-t{font-family:var(--ff-ar); letter-spacing:0; font-size:1rem}
:where(.atlas-page-about,.atlas-pat-about) .vm-col .lead{max-width:30em}
:where(.atlas-page-about,.atlas-pat-about) .vm-pts{grid-template-columns:1fr; margin-top:10px}
:where(.atlas-page-about,.atlas-pat-about) .vm-pts :is(li,:where(.t-li)),:where(.atlas-page-about,.atlas-pat-about) .vm-pts :is(li,:where(.t-li)):first-child{display:grid; grid-template-columns:52px 1fr; column-gap:8px; padding:22px 0; border-inline-start:0; border-bottom:1px solid var(--line-d2)}
:where(.atlas-page-about,.atlas-pat-about) .vm-pts .pn{grid-row:span 2; margin:6px 0 0}
:where(.atlas-page-about,.atlas-pat-about) .vm-pts b{font-size:1.25rem}
:where(.atlas-page-about,.atlas-pat-about) .vm-pts p{max-width:34em}
@media (min-width:961px){
  
  /* line the two statements and the two point lists up on shared rows */
:where(.atlas-page-about,.atlas-pat-about) .vm{grid-template-rows:repeat(3,auto); row-gap:18px}
  :where(.atlas-page-about,.atlas-pat-about) .vm-col{grid-row:span 3; grid-template-rows:subgrid; gap:0}
  :where(.atlas-page-about,.atlas-pat-about) .vm-col > .vm-t{align-self:start}
  :where(.atlas-page-about,.atlas-pat-about) .vm-col > .lead{margin-top:18px; align-self:start}
  :where(.atlas-page-about,.atlas-pat-about) .vm-col > .vm-pts{margin-top:28px; align-self:start}
}


/* 05 approach: two points in a 2-column variant with a top hairline, then the closing lines */
:where(.atlas-page-about,.atlas-pat-about) .ap-pts{grid-template-columns:repeat(2,minmax(0,1fr))}
:where(.atlas-page-about,.atlas-pat-about) .ap-pts :is(li,:where(.t-li)){padding-bottom:6px}
:where(.atlas-page-about,.atlas-pat-about) .ap-pts p{max-width:30em}
:where(.atlas-page-about,.atlas-pat-about) .ap-foot{margin-top:clamp(40px,5vw,64px); padding-top:28px; border-top:1px solid var(--line); align-items:start}
:where(.atlas-page-about,.atlas-pat-about) .ap-foot .ab-quote{margin-top:0; font-size:clamp(1.15rem,1rem + .45vw,1.4rem)}


/* 07 route: stepper line draws in, squares pop */
:where(.atlas-page-about,.atlas-pat-about) #route .stepper{margin-top:8px}
:where(.atlas-page-about,.atlas-pat-about) #route .stepper :is(li,:where(.t-li)){padding-inline-end:clamp(20px,3vw,48px)}
:where(.atlas-page-about,.atlas-pat-about) #route .stepper p{font-size:.98rem; max-width:24em}
:where(.atlas-page-about,.atlas-pat-about) #route .stepper strong{font-size:clamp(1.4rem,1.1rem + 1vw,2rem); font-weight:300; letter-spacing:-.01em}
:where(.atlas-page-about,.atlas-pat-about) #route .stepper strong em{font-style:normal; font-weight:800; color:var(--gold-d)}
[dir=rtl] :where(.atlas-page-about,.atlas-pat-about) #route .stepper strong{font-weight:600}
.js :where(.atlas-page-about,.atlas-pat-about) #route .stepper :is(li,:where(.t-li))::before{transform-origin:var(--o-s,left); transition:transform 1.3s var(--ease) calc(var(--d,0s) + .15s)}
[dir=rtl] :where(.atlas-page-about,.atlas-pat-about) #route .stepper :is(li,:where(.t-li)){--o-s:right}
.js :where(.atlas-page-about,.atlas-pat-about) #route .stepper :is(li,:where(.t-li)):not(.in)::before{transform:scaleX(0)}
.js :where(.atlas-page-about,.atlas-pat-about) #route .stepper :is(li,:where(.t-li))::after{transition:transform .5s var(--ease) var(--d,0s)}
.js :where(.atlas-page-about,.atlas-pat-about) #route .stepper :is(li,:where(.t-li)):not(.in)::after{transform:scale(0)}
:where(.atlas-page-about,.atlas-pat-about) .rt-co{margin-top:clamp(40px,5vw,64px); padding-top:28px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--cg); row-gap:16px; align-items:start}
:where(.atlas-page-about,.atlas-pat-about) .rt-co > .label{grid-column:span 3; margin:12px 0 0}
:where(.atlas-page-about,.atlas-pat-about) .rt-co > :is(ul,:where(.t-ul)){grid-column:4 / -1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
:where(.atlas-page-about,.atlas-pat-about) .rt-co .fchip{width:100%}


/* 08 explore (cards) */
:where(.atlas-page-about,.atlas-pat-about) #explore .card-media{aspect-ratio:16/10}


/* 09 contact: closing photo band */
:where(.atlas-page-about,.atlas-pat-about) #contact .rows{align-self:end}
:where(.atlas-page-about,.atlas-pat-about) #contact :is(address,:where(.t-address)),:where(.atlas-page-about,.atlas-pat-about) .otp a{hyphens:manual}

@media (max-width:1240px){
  
  /* jump bar: seven labels wrap to two lines instead of being cut */
:where(.atlas-page-about,.atlas-pat-about) .otp a{gap:8px; padding-inline:12px; white-space:normal; font-size:.8rem; hyphens:auto}
  [dir=rtl] :where(.atlas-page-about,.atlas-pat-about) .otp a{font-size:.9rem}
  :where(.atlas-page-about,.atlas-pat-about) .otp a :is(span,:where(.t-span)){overflow:visible; text-overflow:clip}
  :where(.atlas-page-about,.atlas-pat-about) .otp a::after{inset-inline:12px}
  :where(.atlas-page-about,.atlas-pat-about) .rt-co > .label,:where(.atlas-page-about,.atlas-pat-about) .rt-co > :is(ul,:where(.t-ul)){grid-column:1/-1}
  :where(.atlas-page-about,.atlas-pat-about) .rt-co > .label{margin:0}
}
@media (max-width:960px){
  :where(.atlas-page-about,.atlas-pat-about) .pbn-foot{display:none}   
  /* seven links do not fit below 961px; the page sections follow directly */
:where(.atlas-page-about,.atlas-pat-about) .pbn .pbn-in{padding-bottom:clamp(48px,6vw,88px)}
  :where(.atlas-page-about,.atlas-pat-about) .rg{grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr))}
  :where(.atlas-page-about,.atlas-pat-about) .rg > :is(li,:where(.t-li)):nth-child(odd){border-inline-start:0; padding-inline-start:0}
  :where(.atlas-page-about,.atlas-pat-about) .rg > :is(li,:where(.t-li)):nth-child(n+3){margin-top:28px}
  :where(.atlas-page-about,.atlas-pat-about) .rt-co > .label,:where(.atlas-page-about,.atlas-pat-about) .rt-co > :is(ul,:where(.t-ul)){grid-column:1/-1}
  :where(.atlas-page-about,.atlas-pat-about) .rt-co > :is(ul,:where(.t-ul)){grid-template-columns:repeat(2,minmax(0,1fr))}
  :where(.atlas-page-about,.atlas-pat-about) .ab-comp{margin-top:8px}
  :where(.atlas-page-about,.atlas-pat-about) .portrait{max-width:520px}
  :where(.atlas-page-about,.atlas-pat-about) .vm{grid-template-columns:1fr}
  :where(.atlas-page-about,.atlas-pat-about) .ap-foot > p{grid-column:1/-1}
}
@media (max-width:720px){
  :where(.atlas-page-about,.atlas-pat-about) .ab-main{width:100%}
  :where(.atlas-page-about,.atlas-pat-about) .ab-comp{padding-bottom:0}
  :where(.atlas-page-about,.atlas-pat-about) .ab-sub{position:relative; width:50%; margin-top:8px; margin-inline-start:auto; border:0}
  :where(.atlas-page-about,.atlas-pat-about) .ab-mark{display:none}
  :where(.atlas-page-about,.atlas-pat-about) .rg > :is(li,:where(.t-li)){padding-inline:0 14px}
  :where(.atlas-page-about,.atlas-pat-about) .rg > :is(li,:where(.t-li)):nth-child(even){padding-inline-start:14px}
  :where(.atlas-page-about,.atlas-pat-about) .ld-facts :is(li,:where(.t-li)){grid-template-columns:1fr; gap:4px}
  :where(.atlas-page-about,.atlas-pat-about) #leadership .portrait::after{inset:-16px 16px 16px -16px}
  [dir=rtl] :where(.atlas-page-about,.atlas-pat-about) #leadership .portrait::after{inset:-16px -16px 16px 16px}
  :where(.atlas-page-about,.atlas-pat-about) #leadership .portrait{margin-top:16px; margin-inline-start:16px}
  :where(.atlas-page-about,.atlas-pat-about) .vm-pts :is(li,:where(.t-li)),:where(.atlas-page-about,.atlas-pat-about) .vm-pts :is(li,:where(.t-li)):first-child{grid-template-columns:40px 1fr; border-top:0}
  :where(.atlas-page-about,.atlas-pat-about) .ap-pts{grid-template-columns:1fr}
  .js :where(.atlas-page-about,.atlas-pat-about) #route .stepper :is(li,:where(.t-li))::before{transform-origin:top}
  .js :where(.atlas-page-about,.atlas-pat-about) #route .stepper :is(li,:where(.t-li)):not(.in)::before{transform:scaleY(0)}
  :where(.atlas-page-about,.atlas-pat-about) #explore .card-media{aspect-ratio:16/9}
}


/* === page: businesses (from concept-atlas/businesses.html, scoped to body.atlas-page-businesses) === */



/* ===== Businesses page only ===== *//* sector explorer: sticky index + one article per sector */
:where(.atlas-page-businesses,.atlas-pat-businesses) .bz-grid{align-items:stretch}
:where(.atlas-page-businesses,.atlas-pat-businesses) .bz-aside{grid-column:span 3}
:where(.atlas-page-businesses,.atlas-pat-businesses) .bz-main{grid-column:4 / -1; min-width:0}
:where(.atlas-page-businesses,.atlas-pat-businesses) .toc-wrap{position:sticky; top:calc(var(--hdr-s) + 28px); display:grid; gap:18px}
:where(.atlas-page-businesses,.atlas-pat-businesses) .toc-wrap .toc{position:static}
:where(.atlas-page-businesses,.atlas-pat-businesses) .toc-wrap .label{margin:0}
:where(.atlas-page-businesses,.atlas-pat-businesses) .toc-foot{display:grid; gap:4px; padding-top:6px}

:where(.atlas-page-businesses,.atlas-pat-businesses) .sx{--sxp:clamp(56px,6vw,96px); padding-block:var(--sxp); border-top:1px solid var(--line); scroll-margin-top:calc(8px - var(--sxp))}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx:first-child{padding-top:0; border-top:0; scroll-margin-top:0}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-head{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--cg); align-items:end; margin-bottom:clamp(28px,3.4vw,48px)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-head .label{grid-column:1 / -1}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-h{font-size:clamp(1.9rem,1.2rem + 1.9vw,3rem); font-weight:300; letter-spacing:-.02em}
[dir=rtl] :where(.atlas-page-businesses,.atlas-pat-businesses) .sx-h{font-weight:400; letter-spacing:0}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-h em{font-style:normal; font-weight:800; color:var(--gold-d)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-num{font:200 clamp(3.6rem,2rem + 4.4vw,7rem)/.8 var(--ff); color:var(--navy-900); letter-spacing:-.04em; font-variant-numeric:lining-nums tabular-nums; padding-bottom:4px}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-num::before{content:""; display:block; width:100%; height:2px; background:var(--gold); margin-bottom:14px}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-body{display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); column-gap:var(--cg); row-gap:32px}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-media{grid-column:span 5; position:relative}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-info{grid-column:span 4; display:grid; gap:20px; align-content:start}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx:nth-child(even) .sx-media{order:2}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-media .frame{aspect-ratio:4/3}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-media .tagline{position:absolute; inset-inline-start:0; bottom:0; z-index:2; background:var(--navy-900); color:#fff; padding:12px 18px; font:700 .7rem/1 var(--ff); letter-spacing:.16em; text-transform:uppercase; border-top:2px solid var(--gold)}
[dir=rtl] :where(.atlas-page-businesses,.atlas-pat-businesses) .sx-media .tagline{font-family:var(--ff-ar); letter-spacing:0; font-size:.86rem}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-info .lead{font-size:clamp(1.08rem,1rem + .3vw,1.22rem)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-dl{margin:0; border-top:1px solid var(--line-2)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-dl > :is(div,:where(.t-div)){display:grid; gap:10px; padding:14px 0 16px; border-bottom:1px solid var(--line)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-dl :is(dt,:where(.t-dt)){font:700 .68rem/1.2 var(--ff); letter-spacing:.16em; text-transform:uppercase; color:var(--bronze-ink)}
[dir=rtl] :where(.atlas-page-businesses,.atlas-pat-businesses) .sx-dl :is(dt,:where(.t-dt)){font-family:var(--ff-ar); letter-spacing:0; font-size:.86rem}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-dl :is(dd,:where(.t-dd)){margin:0; color:var(--navy-900); font-weight:600; font-size:.95rem; line-height:1.45}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-co{display:flex; flex-wrap:wrap; gap:6px}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-co a{position:relative; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border:1px solid var(--line-2); color:var(--navy-900); text-decoration:none; font-weight:600; font-size:.9rem; transition:background .3s, color .3s, border-color .3s}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-co a::after{content:""; width:7px; height:7px; background:var(--gold); flex:none}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-co a:hover,:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-co a:focus-visible{background:var(--navy-900); border-color:var(--navy-900); color:#fff}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-logos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-logos :is(li,:where(.t-li)){height:88px; display:grid; place-items:center; padding:8px 10px; border:1px solid var(--line); background:#fff; overflow:hidden}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-logos :is(li,:where(.t-li)).is-dark{background:#000; border-color:#000}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-logos :is(li,:where(.t-li)).is-photo{padding:0; background:#000}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-logos img{max-height:66px; max-width:100%; width:auto; height:auto; object-fit:contain}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-logos :is(li,:where(.t-li)).is-photo img{width:100%; height:100%; max-height:none; object-fit:cover}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-logos .br-word b{font-size:.92rem; letter-spacing:.2em; margin-inline-end:-.2em}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-logos .br-word :is(small,:where(.t-small)){font-size:.5rem; letter-spacing:.45em; margin-top:5px; margin-inline-end:-.45em}


/* overview index: six large numbered rows between hairlines */
:where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index{border-top:1px solid var(--line-2)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index :is(li,:where(.t-li)){border-bottom:1px solid var(--line)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index a{position:relative; display:grid; grid-template-columns:72px minmax(0,1fr) minmax(0,.9fr) 28px; gap:var(--cg); align-items:center; min-height:84px; padding-block:14px; color:var(--navy-900); text-decoration:none; transition:background .35s}
:where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index a > b,:where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index a > strong,:where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index a > :is(span,:where(.t-span)){transition:transform .45s var(--ease)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index a::before{content:""; position:absolute; inset-block:-1px; inset-inline-start:0; width:3px; background:var(--gold); transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index b{font:700 .78rem/1 var(--ff); letter-spacing:.16em; color:var(--bronze-ink); font-variant-numeric:tabular-nums}
:where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index strong{font:300 clamp(1.6rem,1.2rem + 1.4vw,2.4rem)/1.15 var(--ff); letter-spacing:-.015em}
[dir=rtl] :where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index strong{font-family:var(--ff-ar); font-weight:400; letter-spacing:0}
:where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index :is(span,:where(.t-span)){font-size:.92rem; color:var(--text)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index .ic{color:var(--gold-d); transition:transform .45s var(--ease)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index a:hover,:where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index a:focus-visible{background:var(--ui)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index a:hover > :is(b,strong,:is(span,:where(.t-span))),:where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index a:focus-visible > :is(b,strong,:is(span,:where(.t-span))){transform:translateX(18px)}
[dir=rtl] :where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index a:hover > :is(b,strong,:is(span,:where(.t-span))),[dir=rtl] :where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index a:focus-visible > :is(b,strong,:is(span,:where(.t-span))){transform:translateX(-18px)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index a:hover::before,:where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index a:focus-visible::before{transform:scaleY(1)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index a:hover .ic{transform:translateY(4px)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index a:hover strong{font-weight:400}


/* sector sections alternate: 2nd, 4th and 6th sit on a navy panel that bleeds to the page edge */
:where(.atlas-page-businesses,.atlas-pat-businesses) #sectors{overflow-x:clip}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark{position:relative; isolation:isolate; background:transparent; border-top:0; padding-inline-start:clamp(24px,3vw,48px)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark::before{content:""; position:absolute; z-index:-1; inset-block:0; inset-inline-start:0; inset-inline-end:-100vw; background:var(--navy-900)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark + .sx{border-top:0}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark .sx-h{color:#fff}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark .sx-h em{color:var(--gold)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark .sx-num{color:#fff}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark p{color:var(--mist)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark .lead{color:#fff; opacity:.92}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark .sx-dl{border-color:var(--line-d2)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark .sx-dl > :is(div,:where(.t-div)){border-color:var(--line-d)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark .sx-dl :is(dt,:where(.t-dt)){color:var(--gold)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark .sx-dl :is(dd,:where(.t-dd)){color:#fff}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark .sx-co a{border-color:var(--line-d2); color:#fff}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark .sx-co a:hover,:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark .sx-co a:focus-visible{background:#fff; border-color:#fff; color:var(--navy-900)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark .sx-logos :is(li,:where(.t-li)){border-color:var(--line-d)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark .sx-ven-h h4{color:#fff}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark .sx-ven-h :is(span,:where(.t-span)){color:var(--gold)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark .sx-gal :is(figcaption,:where(.t-figcaption)) b{color:#fff}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark .sx-gal :is(figcaption,:where(.t-figcaption)) :is(span,:where(.t-span)){color:var(--mist)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark .sx-media .frame{background:var(--navy-800)}


/* venues in a sector */
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-ven{margin-top:clamp(36px,4vw,56px)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-ven-h{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-ven-h h4{font:800 1.02rem/1.3 var(--ff); color:var(--navy-900)}
[dir=rtl] :where(.atlas-page-businesses,.atlas-pat-businesses) .sx-ven-h h4{font-family:var(--ff-ar)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-ven-h :is(span,:where(.t-span)){font:700 .72rem/1 var(--ff); letter-spacing:.14em; color:var(--bronze-ink); text-transform:uppercase}
[dir=rtl] :where(.atlas-page-businesses,.atlas-pat-businesses) .sx-ven-h :is(span,:where(.t-span)){font-family:var(--ff-ar); letter-spacing:0; font-size:.86rem}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-vl{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--cg)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-vl.is-one{grid-template-columns:minmax(0,1fr)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-vl :is(li,:where(.t-li)){min-height:64px}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-vl :is(li,:where(.t-li)) > :is(span,:where(.t-span)):first-child{min-width:0}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-vl .chip{flex:none}

/* one row per branch: name, row label (bronze kicker), address */
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-vl :is(li,:where(.t-li)){align-items:flex-start; padding-block:14px}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-vl :is(li,:where(.t-li)) .chip{margin-top:2px}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-vl :is(small,:where(.t-small)).sx-lab{margin-top:4px; font:700 .68rem/1.3 var(--ff); letter-spacing:.14em; text-transform:uppercase; color:var(--bronze-ink); font-variant-numeric:lining-nums}
[dir=rtl] :where(.atlas-page-businesses,.atlas-pat-businesses) .sx-vl :is(small,:where(.t-small)).sx-lab{font-family:var(--ff-ar); letter-spacing:0; font-size:.84rem}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-vl :is(small,:where(.t-small)).sx-addr{margin-top:3px; font-size:.84rem; line-height:1.45}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark .sx-vl :is(small,:where(.t-small)).sx-lab{color:var(--gold)}

/* projects in development (restaurants): their own list under the operating rows */
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-ven.sx-proj{margin-top:clamp(28px,3vw,40px)}

/* branch browser in a sector (js/branches.js; base styles in css/site.css, "BRANCH BROWSER").
   DOM order: text (.sx-info), photo pane (.sx-media.bb-col), list (.sx-ls): the reading and Tab order of the
   stacked layout. Desktop: the pane takes the photo column (left / right alternates as before) and stays in
   view while the list scrolls; text and list share the other column */
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-body.has-bb{grid-template-rows:auto 1fr; row-gap:0}
:where(.atlas-page-businesses,.atlas-pat-businesses) .has-bb > .sx-info{grid-column:6 / span 4; grid-row:1}
:where(.atlas-page-businesses,.atlas-pat-businesses) .has-bb > .sx-ls{grid-column:6 / span 4; grid-row:2; margin-top:clamp(28px,3vw,40px); min-width:0}
:where(.atlas-page-businesses,.atlas-pat-businesses) .has-bb > .sx-media.bb-col{grid-column:1 / span 5; grid-row:1 / span 2; align-self:start; position:sticky; top:calc(var(--hdr-s) + 24px)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx:nth-child(even) .has-bb > .sx-media.bb-col{order:0; grid-column:5 / span 5}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx:nth-child(even) .has-bb > :is(.sx-info,.sx-ls){grid-column:1 / span 4}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-ls .sx-ven-h{margin-bottom:0}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-ls .bb-hint{margin-top:8px}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx .vlist.bb-list{margin-top:12px}
html:lang(de) :where(.atlas-page-businesses,.atlas-pat-businesses) .bb-list :is(.v-l,.v-a){hyphens:manual}

/* the pane here is narrower than on Locations: below 600 px of pane width the previous / next business
   buttons show their arrow only (the name stays for assistive technology), as on Locations at 1024-1180 px */
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx .bb-pane{container-type:inline-size}
@container (max-width:600px){
  :where(.atlas-page-businesses,.atlas-pat-businesses) .bb-bn{padding:0; width:52px; justify-content:center}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .bb-bn .lbl{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
}

/* the thumbnail strip of the narrower sector pane often scrolls (up to nine photos): no grey browser bar on the
   navy pane; the selected thumbnail is kept in view by js/branches.js and previous / next photo reach every photo */
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx .bb-thumbs{scrollbar-width:none}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx .bb-thumbs::-webkit-scrollbar{display:none}
@media (max-width:1023px){
  :where(.atlas-page-businesses,.atlas-pat-businesses) .sx-body.has-bb{grid-template-columns:minmax(0,1fr); row-gap:clamp(28px,4vw,40px)}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .sx-body.has-bb > *{grid-column:1 / -1!important; grid-row:auto!important}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .has-bb > .sx-media.bb-col{position:static}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .has-bb > .sx-ls{margin-top:0}
}

/* a four-photo gallery (real estate) sits in two columns */
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-gal.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-gal.is-2 .frame{aspect-ratio:3/2}


/* restaurant gallery (data venues) */
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-gal{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px); margin-top:clamp(36px,4vw,56px)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-gal :is(figure,:where(.t-figure)){display:grid; gap:10px; align-content:start}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-gal .frame{aspect-ratio:4/3}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-gal :is(figcaption,:where(.t-figcaption)){display:grid; gap:2px; padding-top:2px; border-top:2px solid var(--gold); padding-top:10px}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-gal :is(figcaption,:where(.t-figcaption)) b{font:700 .92rem/1.3 var(--ff); color:var(--navy-900)}
[dir=rtl] :where(.atlas-page-businesses,.atlas-pat-businesses) .sx-gal :is(figcaption,:where(.t-figcaption)) b{font-family:var(--ff-ar)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-gal :is(figcaption,:where(.t-figcaption)) :is(span,:where(.t-span)){font-size:.82rem; line-height:1.35; color:var(--text)}


/* sectors by country matrix (dark photo band) */
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx-wrap{margin-top:8px}
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx{width:100%; border-collapse:collapse; table-layout:fixed; color:#fff}
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx col.mx-c0{width:28%}
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx th,:where(.atlas-page-businesses,.atlas-pat-businesses) .mx td{border-bottom:1px solid var(--line-d); padding:0 8px; text-align:center; vertical-align:middle}
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx thead th{padding-bottom:14px; vertical-align:bottom; border-bottom-color:var(--line-d2)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx thead th:first-child{text-align:start; padding-inline-start:0; font:700 .7rem/1.2 var(--ff); letter-spacing:.16em; text-transform:uppercase; color:var(--mist)}
[dir=rtl] :where(.atlas-page-businesses,.atlas-pat-businesses) .mx thead th:first-child{font-family:var(--ff-ar); letter-spacing:0; font-size:.86rem}
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx thead a{display:grid; justify-items:center; align-content:end; gap:8px; min-height:44px; color:#fff; text-decoration:none; font:600 .84rem/1.25 var(--ff); transition:color .3s}
[dir=rtl] :where(.atlas-page-businesses,.atlas-pat-businesses) .mx thead a{font-family:var(--ff-ar); font-size:.9rem}
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx thead a b{font:700 .7rem/1 var(--ff); letter-spacing:.14em; color:var(--gold)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx thead a:hover{color:var(--gold-lt)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx thead a:hover .nm{text-decoration:underline; text-underline-offset:4px}
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx tbody th{text-align:start; padding:0; padding-inline-end:10px}
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx tbody th a{display:grid; align-content:center; gap:2px; min-height:60px; padding-block:10px; color:#fff; text-decoration:none}
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx tbody th a strong{font:700 1rem/1.3 var(--ff)}
[dir=rtl] :where(.atlas-page-businesses,.atlas-pat-businesses) .mx tbody th a strong{font-family:var(--ff-ar)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx tbody th a :is(small,:where(.t-small)){font-size:.8rem; line-height:1.35; color:var(--mist)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx tbody th a:hover strong{color:var(--gold-lt)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx tbody tr{transition:background .3s}
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx tbody tr:hover{background:rgba(255,255,255,.045)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx td i{display:inline-block; width:14px; height:14px; border:1px solid var(--line-d2); vertical-align:middle}
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx td.on i{background:var(--gold); border-color:var(--gold); transition:transform .5s var(--ease) var(--dl,0s)}
.js :where(.atlas-page-businesses,.atlas-pat-businesses) .mx[data-rv]:not(.in) td.on i{transform:scale(0)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx-key{display:none}
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx-note{margin-top:22px; font-size:.9rem}


/* brand captions: link to the sector */
:where(.atlas-page-businesses,.atlas-pat-businesses) .br-sec{display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:4px; font:700 .7rem/1.2 var(--ff); letter-spacing:.12em; text-transform:uppercase; color:var(--navy-900); text-decoration:none}
[dir=rtl] :where(.atlas-page-businesses,.atlas-pat-businesses) .br-sec{font-family:var(--ff-ar); letter-spacing:0; font-size:.84rem}
:where(.atlas-page-businesses,.atlas-pat-businesses) .br-sec .ic{width:14px; height:14px; color:var(--gold-d); transition:transform .4s var(--ease)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .br-sec:hover{color:var(--blue)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .br-sec:hover .ic{transform:translateX(4px)}
[dir=rtl] :where(.atlas-page-businesses,.atlas-pat-businesses) .br-sec:hover .ic{transform:scaleX(-1) translateX(4px)}
:where(.atlas-page-businesses,.atlas-pat-businesses) .brands .br-cap{padding-bottom:10px}

/* the sector label is one inline run; the arrow follows its last word instead of dropping to its own line */
:where(.atlas-page-businesses,.atlas-pat-businesses) .brands .br-cap .br-sec{display:block; padding-block:12px 10px; min-height:44px; hyphens:manual}
:where(.atlas-page-businesses,.atlas-pat-businesses) .br-sec .ic{display:inline-block; vertical-align:-3px; margin-inline-start:6px}
:where(.atlas-page-businesses,.atlas-pat-businesses) .brands .br-cap .br-sec-t{display:inline; margin:0; font:inherit; color:inherit; line-height:inherit}

:where(.atlas-page-businesses,.atlas-pat-businesses) .nw{white-space:nowrap}

/* German: never hyphenate addresses, place names in chips or the venue row labels */
html:lang(de) :where(.atlas-page-businesses,.atlas-pat-businesses) :is(:is(address,:where(.t-address)),.sx-addr,.sx-lab,.sx-co a,.mx tbody th){hyphens:manual}

@media (prefers-reduced-motion:reduce){
  .js :where(.atlas-page-businesses,.atlas-pat-businesses) .mx[data-rv] td.on i{transform:none!important}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index a > :is(b,strong,:is(span,:where(.t-span))){transition:none; transform:none!important}
}
@media (max-width:960px){
  :where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark::before{inset-inline-start:-100vw}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .bz-aside,:where(.atlas-page-businesses,.atlas-pat-businesses) .bz-main{grid-column:1 / -1}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .bz-aside{display:none}   
  /* on small screens the overview index above already lists the six sectors */
:where(.atlas-page-businesses,.atlas-pat-businesses) .toc-wrap{position:static}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .toc{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--cg)}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .sx:first-child{--sxp:clamp(40px,6vw,56px); padding-top:var(--sxp); scroll-margin-top:calc(8px - var(--sxp))}
}
@media (max-width:720px){
  :where(.atlas-page-businesses,.atlas-pat-businesses) .sx-head{grid-template-columns:minmax(0,1fr)}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .sx-num{display:none}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .sx-body{grid-template-columns:minmax(0,1fr)}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .sx-media,:where(.atlas-page-businesses,.atlas-pat-businesses) .sx-info{grid-column:1 / -1}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .sx:nth-child(even) .sx-media{order:0}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .sx-vl{grid-template-columns:minmax(0,1fr)}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .sx-gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark{padding-inline:0}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .sx.dark::before{inset-inline-start:-100vw}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index a{grid-template-columns:44px minmax(0,1fr) 22px; min-height:68px; gap:12px}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .bx-index :is(span,:where(.t-span)){display:none}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .toc{grid-template-columns:minmax(0,1fr)}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .mx col.mx-c0{width:24%}   
  /* leaves 6 sector columns of 44px+ at 390 */
:where(.atlas-page-businesses,.atlas-pat-businesses) .mx thead a .nm{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .mx th,:where(.atlas-page-businesses,.atlas-pat-businesses) .mx td{padding:0 2px}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .mx thead th:not(:first-child){padding-inline:0}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .mx tbody th{padding-inline-end:6px}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .mx tbody th a :is(small,:where(.t-small)){display:none}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .mx tbody th a strong{font-size:.92rem}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .mx td i{width:12px; height:12px}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .mx-key{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; margin-top:22px; font-size:.84rem; color:var(--mist)}
  :where(.atlas-page-businesses,.atlas-pat-businesses) .mx-key b{color:var(--gold); font:700 .7rem/1 var(--ff); letter-spacing:.12em; margin-inline-end:8px}
}


/* === page: locations (from concept-atlas/locations.html, scoped to body.atlas-page-locations) === */




/* ===== Locations page only ===== *//* --- 01 explorer: country index (tabs) + route map + detail panel --- */
:where(.atlas-page-locations,.atlas-pat-locations) .lx{align-items:stretch; row-gap:var(--cg)}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-idx{grid-column:span 4; display:flex; flex-direction:column}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-mapc{grid-column:span 8}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-tabs{display:grid; border-top:1px solid var(--line-d)}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-tab{position:relative; display:grid; grid-template-columns:30px minmax(0,1fr) 18px; gap:12px; align-items:center; width:100%; min-height:56px; margin:0; padding:9px 14px; padding-inline-start:18px; border:0; border-bottom:1px solid var(--line-d); background:transparent; color:#fff; text-align:start; transition:background .3s}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-tab::before{content:""; position:absolute; inset-block:-1px; inset-inline-start:0; width:3px; background:var(--gold); transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease)}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-tab:hover{background:rgba(255,255,255,.045)}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-tab[aria-selected=true]{background:var(--navy-800)}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-tab[aria-selected=true]::before,:where(.atlas-page-locations,.atlas-pat-locations) .lx-tab:hover::before{transform:scaleY(1)}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-tab:focus-visible{outline-offset:-2px}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-tab b{font:700 .7rem/1 var(--ff); letter-spacing:.14em; color:var(--gold); font-variant-numeric:tabular-nums}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-tab strong{display:block; font:700 1rem/1.25 var(--ff); color:#fff}
[dir=rtl] :where(.atlas-page-locations,.atlas-pat-locations) .lx-tab strong{font-family:var(--ff-ar); font-size:1.02rem}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-tab :is(small,:where(.t-small)){display:block; margin-top:3px; font-size:.78rem; line-height:1.35; color:var(--mist); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-tab .ic{color:var(--gold); opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .4s var(--ease)}
[dir=rtl] :where(.atlas-page-locations,.atlas-pat-locations) .lx-tab .ic{transform:scaleX(-1) translateX(-6px)}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-tab[aria-selected=true] .ic,:where(.atlas-page-locations,.atlas-pat-locations) .lx-tab:hover .ic{opacity:1; transform:none}
[dir=rtl] :where(.atlas-page-locations,.atlas-pat-locations) .lx-tab[aria-selected=true] .ic,[dir=rtl] :where(.atlas-page-locations,.atlas-pat-locations) .lx-tab:hover .ic{transform:scaleX(-1)}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-hint{margin-top:auto; padding-top:18px; font-size:.84rem; color:var(--mist)}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-map{height:100%; min-height:540px; aspect-ratio:auto}

/* the coordinate tag is always top-left (it is direction:ltr), so the reset button is always top-right */
:where(.atlas-page-locations,.atlas-pat-locations) .lx-reset{position:absolute; z-index:4; top:14px; right:14px; left:auto; width:auto; padding-inline:14px; gap:8px; display:inline-flex; align-items:center; background:rgba(10,20,34,.86); font:700 .7rem/1 var(--ff); letter-spacing:.14em; text-transform:uppercase}
[dir=rtl] :where(.atlas-page-locations,.atlas-pat-locations) .lx-reset{font-family:var(--ff-ar); letter-spacing:0; font-size:.86rem}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-reset[hidden]{display:none}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-reset svg{width:16px; height:16px; color:var(--gold)}

:where(.atlas-page-locations,.atlas-pat-locations) .lx-panel{grid-column:1/-1; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--cg); row-gap:24px; background:var(--navy-900); border:1px solid var(--line-d); border-top:2px solid var(--gold); padding:clamp(18px,2.2vw,32px)}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-panel:focus-visible{outline-offset:2px}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-ph{grid-column:span 5; aspect-ratio:auto; min-height:340px; max-height:520px; align-self:stretch}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-info{grid-column:span 7; display:grid; gap:10px; align-content:start; transition:opacity .25s, transform .35s var(--ease)}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-panel.is-swap .lx-info{opacity:0; transform:translateY(8px)}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-k{font:700 .7rem/1.3 var(--ff); letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}
[dir=rtl] :where(.atlas-page-locations,.atlas-pat-locations) .lx-k{font-family:var(--ff-ar); letter-spacing:0; font-size:.88rem}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-info .h3{color:#fff}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-c{font-size:.95rem}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-info .vlist{margin-top:8px}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-note{display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--mist)}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-note .ic{color:var(--gold); margin-top:4px}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-act{display:flex; flex-wrap:wrap; gap:4px 26px; margin-top:6px}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-reg{margin-top:8px; border-top:1px solid var(--line-d)}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-reg :is(li,:where(.t-li)){display:grid; grid-template-columns:minmax(120px,170px) 1fr; gap:10px 16px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line-d)}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-reg :is(li,:where(.t-li)) > b{font:700 .72rem/1.3 var(--ff); letter-spacing:.16em; text-transform:uppercase; color:#fff}
[dir=rtl] :where(.atlas-page-locations,.atlas-pat-locations) .lx-reg :is(li,:where(.t-li)) > b{font-family:var(--ff-ar); letter-spacing:0; font-size:.92rem}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-reg .fchips{gap:6px}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-reg .fchip{min-height:44px; padding:0 14px; font-size:.85rem}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-ph.is-wipe{animation:lxWipe .95s var(--ease-io) both}
[dir=rtl] :where(.atlas-page-locations,.atlas-pat-locations) .lx-ph.is-wipe{animation-name:lxWipeR}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-ph.is-wipe img{animation:lxZoom 1.6s var(--ease) both}
@keyframes lxWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes lxWipeR{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@keyframes lxZoom{from{transform:scale(1.1)}to{transform:none}}

:where(.atlas-page-locations,.atlas-pat-locations) .cc-intro .sh{margin-bottom:0}

/* --- country sections --- */
:where(.atlas-page-locations,.atlas-pat-locations) .ctry .g12{align-items:center}
:where(.atlas-page-locations,.atlas-pat-locations) .ctry-txt{grid-column:1 / span 4}
:where(.atlas-page-locations,.atlas-pat-locations) .ctry-ph{grid-column:6 / span 7}
:where(.atlas-page-locations,.atlas-pat-locations) .ctry.is-flip .ctry-txt{grid-column:9 / span 4}
:where(.atlas-page-locations,.atlas-pat-locations) .ctry.is-flip .ctry-ph{grid-column:1 / span 7; grid-row:1}
:where(.atlas-page-locations,.atlas-pat-locations) .ctry-n{display:flex; align-items:flex-start; gap:10px; margin-bottom:20px; font:200 clamp(4.2rem,2rem + 5.6vw,8.2rem)/.82 var(--ff); letter-spacing:-.045em; color:var(--navy-900); font-variant-numeric:lining-nums tabular-nums; direction:ltr; justify-content:flex-start}
[dir=rtl] :where(.atlas-page-locations,.atlas-pat-locations) .ctry-n{justify-content:flex-end}
:where(.atlas-page-locations,.atlas-pat-locations) .ctry-n :is(small,:where(.t-small)){font:700 .78rem/1 var(--ff); letter-spacing:.14em; color:var(--bronze-ink); margin-top:.7em}
:where(.atlas-page-locations,.atlas-pat-locations) .dark .ctry-n{color:#fff}
:where(.atlas-page-locations,.atlas-pat-locations) .dark .ctry-n :is(small,:where(.t-small)){color:var(--gold)}
:where(.atlas-page-locations,.atlas-pat-locations) .ctry .label{margin-bottom:16px; line-height:1.45}   
/* long eyebrows wrap to 2–3 lines: keep readable leading */
:where(.atlas-page-locations,.atlas-pat-locations) .ctry .h2{font-size:clamp(1.9rem,1.2rem + 1.8vw,2.8rem)}
:where(.atlas-page-locations,.atlas-pat-locations) .ctry-c{margin-top:14px; font:700 .74rem/1.6 var(--ff); letter-spacing:.14em; text-transform:uppercase; color:var(--bronze-ink)}
[dir=rtl] :where(.atlas-page-locations,.atlas-pat-locations) .ctry-c{font-family:var(--ff-ar); letter-spacing:0; font-size:.95rem}
:where(.atlas-page-locations,.atlas-pat-locations) .dark .ctry-c{color:var(--gold)}
:where(.atlas-page-locations,.atlas-pat-locations) .ctry .vlist{margin-top:24px}
:where(.atlas-page-locations,.atlas-pat-locations) .ctry-note{display:flex; gap:10px; align-items:flex-start; margin-top:18px; font-size:.92rem}
:where(.atlas-page-locations,.atlas-pat-locations) .ctry-note .ic{color:var(--gold-d); margin-top:4px}
:where(.atlas-page-locations,.atlas-pat-locations) .dark .ctry-note .ic{color:var(--gold)}
:where(.atlas-page-locations,.atlas-pat-locations) .ctry-act{display:flex; flex-wrap:wrap; gap:4px 26px; margin-top:18px}
/* a long text column (Saudi Arabia) left the centred mosaic floating in empty ground: from 961px the photos sit
   at the top of the column and stay in view while the rows scroll (short sections are unchanged: the mosaic sets their height) */
@media (min-width:961px){
  :where(.atlas-page-locations,.atlas-pat-locations) .ctry-ph{align-self:start; position:sticky; top:calc(var(--hdr-s) + 28px)}
}
:where(.atlas-page-locations,.atlas-pat-locations) .mos{display:grid; grid-template-columns:repeat(var(--r,1),minmax(0,1fr)); gap:clamp(10px,1.2vw,16px)}
:where(.atlas-page-locations,.atlas-pat-locations) .mos .frame{aspect-ratio:4/3}
:where(.atlas-page-locations,.atlas-pat-locations) .mos .m0{grid-column:1/-1; aspect-ratio:16/9}
:where(.atlas-page-locations,.atlas-pat-locations) .mos.n1 .m0{aspect-ratio:3/2}
:where(.atlas-page-locations,.atlas-pat-locations) .mos.n2 .frame,:where(.atlas-page-locations,.atlas-pat-locations) .mos.n2 .m0{grid-column:auto; aspect-ratio:4/5}
:where(.atlas-page-locations,.atlas-pat-locations) .dark .mos .frame{background:var(--navy-800)}


/* --- branch rows (spec 8.7): row label, name, address, chip --- */
:where(.atlas-page-locations,.atlas-pat-locations) .vlist .v-l{margin-bottom:3px; font:700 .66rem/1.35 var(--ff); letter-spacing:.14em; text-transform:uppercase; color:var(--bronze-ink)}
[dir=rtl] :where(.atlas-page-locations,.atlas-pat-locations) .vlist .v-l{font-family:var(--ff-ar); letter-spacing:0; font-size:.8rem}
:where(.atlas-page-locations,.atlas-pat-locations) .dark .vlist .v-l{color:var(--gold)}
:where(.atlas-page-locations,.atlas-pat-locations) .vlist .v-a{margin-top:2px; line-height:1.45}
:where(.atlas-page-locations,.atlas-pat-locations) .vlist :is(li,:where(.t-li)) > :is(span,:where(.t-span)):first-child{min-width:0}
:where(.atlas-page-locations,.atlas-pat-locations) .vlist .v-sum .more{flex:none; font-size:.86rem}

/* cities with a coming-soon project only (Saudi Arabia): one line under the cities */
:where(.atlas-page-locations,.atlas-pat-locations) .c-soon{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px}
:where(.atlas-page-locations,.atlas-pat-locations) .ctry .c-soon{margin-top:8px}
:where(.atlas-page-locations,.atlas-pat-locations) .lx-info .c-soon{font-size:.9rem; color:var(--mist)}


/* --- Coming next (spec 5.4 #3a): inside every country section that has projects --- */
:where(.atlas-page-locations,.atlas-pat-locations) .cn{margin-top:clamp(48px,5vw,72px); padding-top:clamp(32px,3.4vw,48px); border-top:1px solid var(--line)}
:where(.atlas-page-locations,.atlas-pat-locations) .dark .cn{border-color:var(--line-d)}
:where(.atlas-page-locations,.atlas-pat-locations) .cn-head{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px 32px; margin-bottom:clamp(20px,2.4vw,30px)}
:where(.atlas-page-locations,.atlas-pat-locations) .cn .label{margin-bottom:16px; line-height:1.45}
:where(.atlas-page-locations,.atlas-pat-locations) .cn-t{font-size:clamp(1.7rem,1.1rem + 1.4vw,2.4rem)}
:where(.atlas-page-locations,.atlas-pat-locations) .cn-sub{margin:0; font:700 .74rem/1.6 var(--ff); letter-spacing:.14em; text-transform:uppercase; color:var(--bronze-ink); text-align:end}
[dir=rtl] :where(.atlas-page-locations,.atlas-pat-locations) .cn-sub{font-family:var(--ff-ar); letter-spacing:0; font-size:.95rem}
:where(.atlas-page-locations,.atlas-pat-locations) .dark .cn-sub{color:var(--gold)}
:where(.atlas-page-locations,.atlas-pat-locations) .cn-lbl{margin:0 0 18px; font-size:.92rem}
:where(.atlas-page-locations,.atlas-pat-locations) .cn .cards{grid-template-columns:repeat(4,minmax(0,1fr))}   /* eight projects: 4 x 2, as on p23 */
@media (max-width:1180px){ :where(.atlas-page-locations,.atlas-pat-locations) .cn .cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
:where(.atlas-page-locations,.atlas-pat-locations) .cn-card .card-media{aspect-ratio:4/3}
:where(.atlas-page-locations,.atlas-pat-locations) .cn-card .card-body{gap:8px; padding:20px 22px 22px}
:where(.atlas-page-locations,.atlas-pat-locations) .cn-card h4{font-size:1.24rem; font-weight:800; line-height:1.25}
:where(.atlas-page-locations,.atlas-pat-locations) .cn-card .cn-b{margin:0; font-weight:600; font-size:.94rem; color:var(--navy-900)}
:where(.atlas-page-locations,.atlas-pat-locations) .dark .cn-card .cn-b{color:#fff}
:where(.atlas-page-locations,.atlas-pat-locations) .cn-card :is(address,:where(.t-address)){font-style:normal; font-size:.9rem; line-height:1.45; color:var(--text)}
:where(.atlas-page-locations,.atlas-pat-locations) .dark .cn-card :is(address,:where(.t-address)){color:var(--mist)}
:where(.atlas-page-locations,.atlas-pat-locations) .cn-strip{margin-top:clamp(18px,2vw,26px); padding:16px 20px; border:1px solid var(--line); border-inline-start:3px solid var(--gold); font:700 .74rem/1.6 var(--ff); letter-spacing:.12em; text-transform:uppercase; color:var(--navy-900)}
[dir=rtl] :where(.atlas-page-locations,.atlas-pat-locations) .cn-strip{font-family:var(--ff-ar); letter-spacing:0; font-size:.95rem}
:where(.atlas-page-locations,.atlas-pat-locations) .cn-strip b{color:var(--bronze-ink)}
:where(.atlas-page-locations,.atlas-pat-locations) .dark .cn-strip{border-color:var(--line-d); border-inline-start-color:var(--gold); color:#fff}
:where(.atlas-page-locations,.atlas-pat-locations) .dark .cn-strip b{color:var(--gold)}

/* --- responsive --- */
@media (max-width:1240px){
  :where(.atlas-page-locations,.atlas-pat-locations) .lx-tab :is(small,:where(.t-small)){display:none}
}
@media (max-width:960px){
  :where(.atlas-page-locations,.atlas-pat-locations) .lx-idx,:where(.atlas-page-locations,.atlas-pat-locations) .lx-mapc{grid-column:1/-1}
  :where(.atlas-page-locations,.atlas-pat-locations) .lx-mapc{order:-1}
  :where(.atlas-page-locations,.atlas-pat-locations) .lx-map{height:auto; min-height:0; aspect-ratio:16/10}
  :where(.atlas-page-locations,.atlas-pat-locations) .lx-tabs{grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; border-top:0}
  :where(.atlas-page-locations,.atlas-pat-locations) .lx-tab{grid-template-columns:24px minmax(0,1fr); min-height:48px; padding:8px 12px; border:1px solid var(--line-d)}
  :where(.atlas-page-locations,.atlas-pat-locations) .lx-tab .ic{display:none}
  :where(.atlas-page-locations,.atlas-pat-locations) .lx-tab.is-all{grid-column:1/-1}
  :where(.atlas-page-locations,.atlas-pat-locations) .lx-hint{display:none}
  :where(.atlas-page-locations,.atlas-pat-locations) .lx-ph,:where(.atlas-page-locations,.atlas-pat-locations) .lx-info{grid-column:1/-1}
  :where(.atlas-page-locations,.atlas-pat-locations) .lx-ph{aspect-ratio:16/9; min-height:0; max-height:none}
  :where(.atlas-page-locations,.atlas-pat-locations) .ctry-txt,:where(.atlas-page-locations,.atlas-pat-locations) .ctry-ph,:where(.atlas-page-locations,.atlas-pat-locations) .ctry.is-flip .ctry-txt,:where(.atlas-page-locations,.atlas-pat-locations) .ctry.is-flip .ctry-ph{grid-column:1/-1; grid-row:auto}
  :where(.atlas-page-locations,.atlas-pat-locations) .cn .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  :where(.atlas-page-locations,.atlas-pat-locations) .lx-map{aspect-ratio:4/3}
  :where(.atlas-page-locations,.atlas-pat-locations) .lx-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  :where(.atlas-page-locations,.atlas-pat-locations) .lx-reg :is(li,:where(.t-li)){grid-template-columns:1fr; gap:8px}
  :where(.atlas-page-locations,.atlas-pat-locations) .lx-reset .lbl{display:none}
  :where(.atlas-page-locations,.atlas-pat-locations) .lx-reset{width:44px; height:44px; padding:0; justify-content:center}
  :where(.atlas-page-locations,.atlas-pat-locations) .ctry-n{font-size:4.4rem}
  :where(.atlas-page-locations,.atlas-pat-locations) .mos.n4 .m0{aspect-ratio:3/2}
  :where(.atlas-page-locations,.atlas-pat-locations) .cn .cards{grid-template-columns:1fr}
  :where(.atlas-page-locations,.atlas-pat-locations) .cn-head{grid-template-columns:1fr}
  :where(.atlas-page-locations,.atlas-pat-locations) .cn-sub{text-align:start}
  :where(.atlas-page-locations,.atlas-pat-locations) .vlist .v-sum{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  :where(.atlas-page-locations,.atlas-pat-locations) .lx-ph.is-wipe,:where(.atlas-page-locations,.atlas-pat-locations) .lx-ph.is-wipe img{animation:none}
}


/* === page: services (from concept-atlas/services.html, scoped to body.atlas-page-services) === */




/* ================= SERVICES (page-only) ================= *//* overview sequence: the step titles link to their detail sections */
:where(.atlas-page-services,.atlas-pat-services) .seq h3 a{color:inherit; text-decoration:none; background:linear-gradient(var(--gold),var(--gold)) no-repeat; background-size:0% 2px; background-position:var(--bp,0 100%); padding-bottom:3px; transition:background-size .5s var(--ease)}
[dir=rtl] :where(.atlas-page-services,.atlas-pat-services) .seq h3 a{--bp:100% 100%}
:where(.atlas-page-services,.atlas-pat-services) .seq h3 a::after{content:""; position:absolute; inset:0}
:where(.atlas-page-services,.atlas-pat-services) .seq :is(li,:where(.t-li)):hover h3 a,:where(.atlas-page-services,.atlas-pat-services) .seq h3 a:focus-visible{background-size:100% 2px}
:where(.atlas-page-services,.atlas-pat-services) .seq :is(li,:where(.t-li)):hover .sn{color:var(--gold-d)}
:where(.atlas-page-services,.atlas-pat-services) .seq .sn{transition:color .4s}


/* sticky step tracker over the four detail sections */
:where(.atlas-page-services,.atlas-pat-services) .svc-flow{position:relative}
:where(.atlas-page-services,.atlas-pat-services) .trk{position:sticky; top:calc(var(--hdr-s) + 1px); z-index:80; background:#fff; border-block:1px solid var(--line)}
:where(.atlas-page-services,.atlas-pat-services) .trk :is(ol,:where(.t-ol)){display:flex}
:where(.atlas-page-services,.atlas-pat-services) .trk :is(li,:where(.t-li)){flex:1 1 0; min-width:0}
:where(.atlas-page-services,.atlas-pat-services) .trk a{position:relative; display:flex; align-items:center; gap:12px; min-height:58px; padding-inline:18px; border-inline-start:1px solid var(--line); color:var(--text); text-decoration:none; font:600 .9rem/1.2 var(--ff); transition:background .3s, color .3s}
[dir=rtl] :where(.atlas-page-services,.atlas-pat-services) .trk a{font-family:var(--ff-ar); font-size:.98rem}
:where(.atlas-page-services,.atlas-pat-services) .trk :is(li,:where(.t-li)):first-child a{border-inline-start:0}
:where(.atlas-page-services,.atlas-pat-services) .trk a:hover{background:var(--ui); color:var(--navy-900)}
:where(.atlas-page-services,.atlas-pat-services) .trk b{flex:none; font:700 .72rem/1 var(--ff); letter-spacing:.14em; color:var(--bronze-ink); font-variant-numeric:tabular-nums}
:where(.atlas-page-services,.atlas-pat-services) .trk :is(span,:where(.t-span)){min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
:where(.atlas-page-services,.atlas-pat-services) .trk i{position:absolute; inset-inline:0; bottom:-1px; height:3px; background:transparent; overflow:hidden}
:where(.atlas-page-services,.atlas-pat-services) .trk i::after{content:""; position:absolute; inset:0; background:var(--gold); transform:scaleX(var(--p,0)); transform-origin:var(--o-s,left)}
[dir=rtl] :where(.atlas-page-services,.atlas-pat-services) .trk i::after{--o-s:right}
:where(.atlas-page-services,.atlas-pat-services) .trk a[aria-current=step]{color:var(--navy-900); font-weight:800}
:where(.atlas-page-services,.atlas-pat-services) .trk a[aria-current=step] b{color:var(--navy-900)}
:where(.atlas-page-services,.atlas-pat-services) .trk .is-done b{color:var(--bronze-ink)}   


/* completed: bronze-ink number (6.17:1), the full gold bar marks completion (spec 9 H7) *//* one detailed section per service */
:where(.atlas-page-services,.atlas-pat-services) .svc .g12{align-items:center}
:where(.atlas-page-services,.atlas-pat-services) .svc-copy{grid-column:1 / span 5; grid-row:1}
:where(.atlas-page-services,.atlas-pat-services) .svc-media{grid-column:7 / -1; grid-row:1}
:where(.atlas-page-services,.atlas-pat-services) .svc--flip .svc-copy{grid-column:8 / -1}
:where(.atlas-page-services,.atlas-pat-services) .svc--flip .svc-media{grid-column:1 / span 6}
:where(.atlas-page-services,.atlas-pat-services) .svc-num{display:block; overflow:hidden; margin:0 0 18px; font:200 clamp(5.2rem,2.6rem + 7vw,10.5rem)/.82 var(--ff); letter-spacing:-.05em; color:var(--navy-900); font-variant-numeric:lining-nums tabular-nums}
:where(.atlas-page-services,.atlas-pat-services) .svc-num :is(span,:where(.t-span)){display:inline-block; padding-top:.06em}
:where(.atlas-page-services,.atlas-pat-services) .dark .svc-num{color:#fff}
:where(.atlas-page-services,.atlas-pat-services) .svc .h2{margin-bottom:22px}
:where(.atlas-page-services,.atlas-pat-services) .svc-lead{max-width:30em}
:where(.atlas-page-services,.atlas-pat-services) .svc-pts{margin-top:34px; border-top:1px solid var(--line-2)}
:where(.atlas-page-services,.atlas-pat-services) .svc-pts :is(li,:where(.t-li)){display:grid; grid-template-columns:minmax(120px,11rem) 1fr; gap:4px 24px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--line)}
:where(.atlas-page-services,.atlas-pat-services) .svc-pts b{display:flex; align-items:center; gap:12px; font:800 1rem/1.35 var(--ff); color:var(--navy-900)}
[dir=rtl] :where(.atlas-page-services,.atlas-pat-services) .svc-pts b{font-family:var(--ff-ar)}
:where(.atlas-page-services,.atlas-pat-services) .svc-pts b::before{content:""; flex:none; width:8px; height:8px; background:var(--gold)}
:where(.atlas-page-services,.atlas-pat-services) .svc-pts p{font-size:.96rem}
:where(.atlas-page-services,.atlas-pat-services) .dark .svc-pts{border-color:var(--line-d2)}
:where(.atlas-page-services,.atlas-pat-services) .dark .svc-pts :is(li,:where(.t-li)){border-color:var(--line-d)}
:where(.atlas-page-services,.atlas-pat-services) .dark .svc-pts b{color:#fff}
:where(.atlas-page-services,.atlas-pat-services) .svc-next{margin-top:26px}
:where(.atlas-page-services,.atlas-pat-services) .more.svc-next:hover .ic,:where(.atlas-page-services,.atlas-pat-services) [dir] .more.svc-next:hover .ic{transform:translateY(4px)}
:where(.atlas-page-services,.atlas-pat-services) .svc-media .frame :is(figcaption,:where(.t-figcaption)) .chip{display:flex; width:max-content; margin-top:10px}
:where(.atlas-page-services,.atlas-pat-services) .svc-media .frame :is(figcaption,:where(.t-figcaption)) :is(address,:where(.t-address)){font-style:normal; display:block}

/* overview kicker (CR 4.10 title) above body 2 */
:where(.atlas-page-services,.atlas-pat-services) .ov-k{line-height:1.4; margin-bottom:14px}

/* overview head: H2 starts level with the intro column (as in #for-whom), no gap under the 01 label */
:where(.atlas-page-services,.atlas-pat-services) #overview .sh-row{align-items:start}
:where(.atlas-page-services,.atlas-pat-services) .svc-proj{margin-top:14px; font-size:.88rem}
:where(.atlas-page-services,.atlas-pat-services) .svc-proj a{color:var(--navy-900); font-weight:700; text-underline-offset:3px}
:where(.atlas-page-services,.atlas-pat-services) .svc-proj a:hover{color:var(--blue)}
:where(.atlas-page-services,.atlas-pat-services) .frame :is(figcaption,:where(.t-figcaption)) .chip--uc{background:rgba(211,155,56,.16); color:var(--gold-lt); border-color:var(--gold)}


/* brand support: logo tiles + markets */
:where(.atlas-page-services,.atlas-pat-services) .svc-logos{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line-d2); border:1px solid var(--line-d2)}
:where(.atlas-page-services,.atlas-pat-services) .svc-logos :is(li,:where(.t-li)){position:relative; display:grid; place-items:center; aspect-ratio:1/1; padding:16%; background:#fff; overflow:hidden}
:where(.atlas-page-services,.atlas-pat-services) .svc-logos img{position:absolute; inset:0; margin:auto; width:66%; height:66%; object-fit:contain; transition:transform .6s var(--ease)}
:where(.atlas-page-services,.atlas-pat-services) .svc-logos :is(li,:where(.t-li)):hover img{transform:scale(1.06)}
:where(.atlas-page-services,.atlas-pat-services) .svc-logos :is(li,:where(.t-li)).is-dark{background:#000}
:where(.atlas-page-services,.atlas-pat-services) .svc-logos img{filter:grayscale(1) contrast(1.15); opacity:.92}
:where(.atlas-page-services,.atlas-pat-services) .svc-logos :is(li,:where(.t-li)):hover img{filter:none; opacity:1}
:where(.atlas-page-services,.atlas-pat-services) .svc-logos :is(li,:where(.t-li)).is-photo{padding:0}
:where(.atlas-page-services,.atlas-pat-services) .svc-logos :is(li,:where(.t-li)).is-photo img{width:100%; height:100%; object-fit:cover}
:where(.atlas-page-services,.atlas-pat-services) .svc-logos .br-word b{font-size:clamp(.8rem,.6rem + .5vw,1.05rem); letter-spacing:.2em; margin-inline-end:-.2em}
:where(.atlas-page-services,.atlas-pat-services) .svc-logos .br-word :is(small,:where(.t-small)){font-size:.55rem; letter-spacing:.45em; margin-inline-end:-.45em}
:where(.atlas-page-services,.atlas-pat-services) .svc-logos :is(li,:where(.t-li)).lg-cta{padding:0; background:var(--navy-800); container-type:inline-size}
:where(.atlas-page-services,.atlas-pat-services) .lg-cta a{display:grid; align-content:space-between; width:100%; height:100%; padding:10cqi; color:#fff; text-decoration:none; font:300 clamp(.78rem,11cqi,1.3rem)/1.2 var(--ff); transition:background .4s}
[dir=rtl] :where(.atlas-page-services,.atlas-pat-services) .lg-cta a{font-family:var(--ff-ar); font-weight:400}
:where(.atlas-page-services,.atlas-pat-services) .lg-cta a em{font-style:normal; font-weight:800; color:var(--gold)}
:where(.atlas-page-services,.atlas-pat-services) .lg-cta .ic{width:26px; height:26px; color:var(--gold); transition:transform .45s var(--ease)}
:where(.atlas-page-services,.atlas-pat-services) .lg-cta a:hover{background:var(--navy)}
:where(.atlas-page-services,.atlas-pat-services) .lg-cta a:hover .ic{transform:translateX(6px)}
[dir=rtl] :where(.atlas-page-services,.atlas-pat-services) .lg-cta a:hover .ic{transform:scaleX(-1) translateX(6px)}
:where(.atlas-page-services,.atlas-pat-services) .svc-logos-cap{margin-top:14px; font-size:.88rem}
:where(.atlas-page-services,.atlas-pat-services) .svc-mk{padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--line-d)}
:where(.atlas-page-services,.atlas-pat-services) .svc-mk .label{margin-bottom:18px}


/* who it is for (photo band) */
:where(.atlas-page-services,.atlas-pat-services) .for-g{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--cg)}
:where(.atlas-page-services,.atlas-pat-services) .for-card{position:relative; display:flex; flex-direction:column; gap:14px; padding:clamp(28px,3.4vw,48px); border:1px solid var(--line); background:#fff; transition:border-color .4s, box-shadow .5s var(--ease)}
:where(.atlas-page-services,.atlas-pat-services) .for-card:hover,:where(.atlas-page-services,.atlas-pat-services) .for-card:focus-within{border-color:var(--line-2); box-shadow:0 24px 40px -30px rgba(10,20,34,.45)}
:where(.atlas-page-services,.atlas-pat-services) .for-card::before{content:""; position:absolute; inset-inline:-1px; top:-1px; height:3px; background:var(--gold); transform:scaleX(0); transform-origin:var(--o-s,left); transition:transform .6s var(--ease)}
[dir=rtl] :where(.atlas-page-services,.atlas-pat-services) .for-card::before{--o-s:right}
:where(.atlas-page-services,.atlas-pat-services) .for-card:hover::before,:where(.atlas-page-services,.atlas-pat-services) .for-card:focus-within::before{transform:scaleX(1)}
:where(.atlas-page-services,.atlas-pat-services) .for-k{font:700 .74rem/1 var(--ff); letter-spacing:.18em; text-transform:uppercase; color:var(--bronze-ink)}
[dir=rtl] :where(.atlas-page-services,.atlas-pat-services) .for-k{font-family:var(--ff-ar); letter-spacing:0; font-size:.95rem}
:where(.atlas-page-services,.atlas-pat-services) .for-card h3{font-size:clamp(1.6rem,1.2rem + 1vw,2.2rem); font-weight:300; color:var(--navy-900)}
[dir=rtl] :where(.atlas-page-services,.atlas-pat-services) .for-card h3{font-weight:600}
:where(.atlas-page-services,.atlas-pat-services) .for-card > p:not(.for-k){max-width:30em}
:where(.atlas-page-services,.atlas-pat-services) .for-s{margin-top:auto; padding-top:14px}
:where(.atlas-page-services,.atlas-pat-services) .for-s :is(li,:where(.t-li)){border-top:1px solid var(--line)}
:where(.atlas-page-services,.atlas-pat-services) .for-s :is(li,:where(.t-li)):last-child{border-bottom:1px solid var(--line)}
:where(.atlas-page-services,.atlas-pat-services) .for-s a{--sx:8px; display:flex; align-items:center; gap:16px; min-height:54px; color:var(--navy-900); text-decoration:none; font-weight:700; transition:color .3s}
[dir=rtl] :where(.atlas-page-services,.atlas-pat-services) .for-s a{--sx:-8px}
:where(.atlas-page-services,.atlas-pat-services) .for-s a > b,:where(.atlas-page-services,.atlas-pat-services) .for-s a > :is(span,:where(.t-span)){transition:transform .4s var(--ease)}
:where(.atlas-page-services,.atlas-pat-services) .for-s a b{flex:none; font:700 .72rem/1 var(--ff); letter-spacing:.14em; color:var(--bronze-ink)}
:where(.atlas-page-services,.atlas-pat-services) .for-s a :is(span,:where(.t-span)){flex:1}
:where(.atlas-page-services,.atlas-pat-services) .for-s a .ic{color:var(--gold-d); transition:transform .45s var(--ease)}
:where(.atlas-page-services,.atlas-pat-services) .for-s a:hover{color:var(--blue)}
:where(.atlas-page-services,.atlas-pat-services) .for-s a:hover > b,:where(.atlas-page-services,.atlas-pat-services) .for-s a:hover > :is(span,:where(.t-span)){transform:translateX(var(--sx))}
:where(.atlas-page-services,.atlas-pat-services) .for-s a:hover .ic{transform:translateY(3px)}



/* German: no automatic hyphens in labels, service headlines and addresses (long compounds carry &shy; where needed) */
html:lang(de) :where(.atlas-page-services,.atlas-pat-services) .ov-k,html:lang(de) :where(.atlas-page-services,.atlas-pat-services) .svc .h2,html:lang(de) :where(.atlas-page-services,.atlas-pat-services) .rows :is(address,:where(.t-address)),html:lang(de) :where(.atlas-page-services,.atlas-pat-services) .for-k,html:lang(de) :where(.atlas-page-services,.atlas-pat-services) #ct-h{hyphens:manual; -webkit-hyphens:manual}

@media (max-width:960px){
  :where(.atlas-page-services,.atlas-pat-services) .svc-copy,:where(.atlas-page-services,.atlas-pat-services) .svc-media,:where(.atlas-page-services,.atlas-pat-services) .svc--flip .svc-copy,:where(.atlas-page-services,.atlas-pat-services) .svc--flip .svc-media{grid-row:auto}
  :where(.atlas-page-services,.atlas-pat-services) .svc-media{max-width:640px}
  :where(.atlas-page-services,.atlas-pat-services) .for-g{grid-template-columns:1fr}
}
@media (max-width:720px){
  :where(.atlas-page-services,.atlas-pat-services) .trk :is(li,:where(.t-li))[aria-current],:where(.atlas-page-services,.atlas-pat-services) .trk :is(li,:where(.t-li)).is-cur{flex-grow:3.2}
  :where(.atlas-page-services,.atlas-pat-services) .trk a{padding-inline:10px; gap:8px; min-height:52px; justify-content:center}
  :where(.atlas-page-services,.atlas-pat-services) .trk :is(li,:where(.t-li)).is-cur a{justify-content:flex-start}
  :where(.atlas-page-services,.atlas-pat-services) .trk :is(li,:where(.t-li)):not(.is-cur) :is(span,:where(.t-span)){position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  :where(.atlas-page-services,.atlas-pat-services) .svc-pts :is(li,:where(.t-li)){grid-template-columns:1fr}
  :where(.atlas-page-services,.atlas-pat-services) .svc .label.short::after{display:none}
  :where(.atlas-page-services,.atlas-pat-services) .svc-logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  :where(.atlas-page-services,.atlas-pat-services) .svc-logos :is(li,:where(.t-li)){aspect-ratio:3/2}
  :where(.atlas-page-services,.atlas-pat-services) .svc-logos img{width:72%; height:72%}
}
@media (prefers-reduced-motion:reduce){
  :where(.atlas-page-services,.atlas-pat-services) .for-s a > *,:where(.atlas-page-services,.atlas-pat-services) .for-s a .ic{transition:none}
}


/* === page: contact (from concept-atlas/contact.html, scoped to body.atlas-page-contact) === */




/* ===== CONTACT PAGE ONLY (shared rules live in css/site.css) ===== *//* 01 · contact detail tiles: three rectangles on a hairline grid */
:where(.atlas-page-contact,.atlas-pat-contact) .ct-tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line-2); border-inline-start:1px solid var(--line)}
:where(.atlas-page-contact,.atlas-pat-contact) .ct-tile{position:relative; display:flex; flex-direction:column; gap:16px; min-width:0; padding:clamp(26px,3vw,44px); border-inline-end:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff}
:where(.atlas-page-contact,.atlas-pat-contact) .ct-tile::before{content:""; position:absolute; inset-inline:-1px; top:-1px; height:3px; background:var(--gold); transform:scaleX(0); transform-origin:var(--o-s,left); transition:transform .6s var(--ease)}
[dir=rtl] :where(.atlas-page-contact,.atlas-pat-contact) .ct-tile::before{--o-s:right}
:where(.atlas-page-contact,.atlas-pat-contact) .ct-tile:hover::before,:where(.atlas-page-contact,.atlas-pat-contact) .ct-tile:focus-within::before{transform:scaleX(1)}
:where(.atlas-page-contact,.atlas-pat-contact) .ct-top{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:clamp(8px,2vw,28px)}
:where(.atlas-page-contact,.atlas-pat-contact) .ct-n{font:700 .74rem/1 var(--ff); letter-spacing:.16em; color:var(--bronze-ink); font-variant-numeric:tabular-nums}
:where(.atlas-page-contact,.atlas-pat-contact) .ct-ico{width:52px; height:52px; display:grid; place-items:center; border:1px solid var(--line-2); color:var(--gold-d); transition:background .4s var(--ease), color .4s, border-color .4s}
:where(.atlas-page-contact,.atlas-pat-contact) .ct-ico .ic{width:22px; height:22px}
:where(.atlas-page-contact,.atlas-pat-contact) .ct-tile:hover .ct-ico,:where(.atlas-page-contact,.atlas-pat-contact) .ct-tile:focus-within .ct-ico{background:var(--navy-900); border-color:var(--navy-900); color:var(--gold)}
:where(.atlas-page-contact,.atlas-pat-contact) .ct-k{display:flex; align-items:center; gap:10px; font:700 .72rem/1 var(--ff); letter-spacing:.18em; text-transform:uppercase; color:var(--navy-900)}
:where(.atlas-page-contact,.atlas-pat-contact) .ct-k::before{content:""; width:24px; height:2px; background:var(--gold)}
[dir=rtl] :where(.atlas-page-contact,.atlas-pat-contact) .ct-k{font-family:var(--ff-ar); letter-spacing:0; font-size:.95rem}
:where(.atlas-page-contact,.atlas-pat-contact) .ct-v{display:block; font:300 clamp(1.3rem,1rem + .85vw,1.8rem)/1.3 var(--ff); color:var(--navy-900); letter-spacing:-.01em; overflow-wrap:anywhere; text-decoration:none}
[dir=rtl] :where(.atlas-page-contact,.atlas-pat-contact) .ct-v{font-family:var(--ff-ar); font-weight:400; letter-spacing:0}
:where(.atlas-page-contact,.atlas-pat-contact) .ct-v .ltr{font-family:var(--ff)}
:where(.atlas-page-contact,.atlas-pat-contact) a.ct-v{width:fit-content; max-width:100%; min-height:44px; padding-top:6px; background:linear-gradient(var(--gold),var(--gold)) no-repeat; background-size:0% 2px; background-position:var(--bp,0 100%); padding-bottom:4px; transition:background-size .5s var(--ease), color .3s}
[dir=rtl] :where(.atlas-page-contact,.atlas-pat-contact) a.ct-v{--bp:100% 100%}
:where(.atlas-page-contact,.atlas-pat-contact) a.ct-v:hover,:where(.atlas-page-contact,.atlas-pat-contact) a.ct-v:focus-visible{background-size:100% 2px}
:where(.atlas-page-contact,.atlas-pat-contact) :is(address,:where(.t-address)).ct-v{font-style:normal}
:where(.atlas-page-contact,.atlas-pat-contact) .ct-vals{display:grid; gap:2px}
:where(.atlas-page-contact,.atlas-pat-contact) a.ct-v .ic.ext{display:inline-block; vertical-align:middle; width:14px; height:14px; margin-inline-start:8px; color:var(--gold-d)}
:where(.atlas-page-contact,.atlas-pat-contact) .ct-web{font-size:clamp(1.05rem,.9rem + .4vw,1.3rem)}
:where(.atlas-page-contact,.atlas-pat-contact) .ct-sub{font-size:.95rem}
:where(.atlas-page-contact,.atlas-pat-contact) .ct-k2{margin-top:6px}
:where(.atlas-page-contact,.atlas-pat-contact) .ct-tile .more{margin-top:auto}


/* 02 · enquiry: topic buttons (left) + white mailto form (right) */
:where(.atlas-page-contact,.atlas-pat-contact) .etypes{display:grid; border-top:1px solid var(--line-d2); margin-top:clamp(28px,3vw,40px)}
:where(.atlas-page-contact,.atlas-pat-contact) .etype{position:relative; display:grid; grid-template-columns:44px minmax(0,1fr) 20px; gap:4px 12px; align-items:start; width:100%; min-height:44px; padding:18px 14px; padding-inline-start:18px; border:0; border-bottom:1px solid var(--line-d); background:transparent; color:#fff; text-align:start; transition:background .3s}
:where(.atlas-page-contact,.atlas-pat-contact) .etype::before{content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px; background:var(--gold); transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease)}
:where(.atlas-page-contact,.atlas-pat-contact) .etype:hover{background:rgba(255,255,255,.05)}
:where(.atlas-page-contact,.atlas-pat-contact) .etype:hover::before{transform:scaleY(.45)}
:where(.atlas-page-contact,.atlas-pat-contact) .etype[aria-pressed=true]{background:rgba(255,255,255,.07)}
:where(.atlas-page-contact,.atlas-pat-contact) .etype[aria-pressed=true]::before{transform:scaleY(1)}
:where(.atlas-page-contact,.atlas-pat-contact) .etype .en{grid-row:1 / span 2; padding-top:4px; font:700 .72rem/1 var(--ff); letter-spacing:.16em; color:var(--gold)}
:where(.atlas-page-contact,.atlas-pat-contact) .etype strong{font:700 1.04rem/1.35 var(--ff); color:#fff}
[dir=rtl] :where(.atlas-page-contact,.atlas-pat-contact) .etype strong{font-family:var(--ff-ar)}
:where(.atlas-page-contact,.atlas-pat-contact) .etype :is(small,:where(.t-small)){grid-column:2; font-size:.9rem; line-height:1.5; color:var(--mist)}
:where(.atlas-page-contact,.atlas-pat-contact) .etype .ic{grid-column:3; grid-row:1; margin-top:2px; color:var(--gold); opacity:0; transform:translateX(-6px); transition:opacity .35s, transform .45s var(--ease)}
[dir=rtl] :where(.atlas-page-contact,.atlas-pat-contact) .etype .ic{transform:scaleX(-1) translateX(-6px)}
:where(.atlas-page-contact,.atlas-pat-contact) .etype[aria-pressed=true] .ic{opacity:1; transform:none}
[dir=rtl] :where(.atlas-page-contact,.atlas-pat-contact) .etype[aria-pressed=true] .ic{transform:scaleX(-1)}
:where(.atlas-page-contact,.atlas-pat-contact) .et-hint{margin-top:16px; font-size:.88rem}
:where(.atlas-page-contact,.atlas-pat-contact) .enq .form{align-self:start}
:where(.atlas-page-contact,.atlas-pat-contact) .form-head{display:grid; gap:10px; padding-bottom:22px; border-bottom:1px solid var(--line)}
:where(.atlas-page-contact,.atlas-pat-contact) .form-head .h3{font-weight:300; font-size:clamp(1.6rem,1.2rem + 1vw,2.2rem)}
[dir=rtl] :where(.atlas-page-contact,.atlas-pat-contact) .form-head .h3{font-weight:400}
:where(.atlas-page-contact,.atlas-pat-contact) .form-head .h3 em{font-weight:800}
:where(.atlas-page-contact,.atlas-pat-contact) .form-head p{font-size:.92rem}
:where(.atlas-page-contact,.atlas-pat-contact) .field label .req{margin-inline-start:2px}

/* long labels (German) can wrap to two lines: keep the paired inputs on one baseline */
:where(.atlas-page-contact,.atlas-pat-contact) .enq .f-row .field{grid-template-rows:1fr auto}
:where(.atlas-page-contact,.atlas-pat-contact) .enq .f-row .field label{align-self:end}
:where(.atlas-page-contact,.atlas-pat-contact) .form-foot{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; padding-top:6px}
:where(.atlas-page-contact,.atlas-pat-contact) .form-foot .form-note{flex:1 1 240px}
:where(.atlas-page-contact,.atlas-pat-contact) .form-alt{font-size:.9rem; padding-top:18px; border-top:1px solid var(--line)}
:where(.atlas-page-contact,.atlas-pat-contact) .form-alt a{display:inline-flex; align-items:center; min-height:44px; color:var(--navy-900); font-weight:700; text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:4px}
:where(.atlas-page-contact,.atlas-pat-contact) .form-alt a:hover{color:var(--blue)}


/* 03 · head office + map */
:where(.atlas-page-contact,.atlas-pat-contact) .ho-addr{font:300 clamp(1.45rem,1.1rem + 1vw,2.05rem)/1.35 var(--ff); color:var(--navy-900); padding-block:24px; border-block:1px solid var(--line); margin-block:28px 24px}
[dir=rtl] :where(.atlas-page-contact,.atlas-pat-contact) .ho-addr{font-family:var(--ff-ar); font-weight:400; font-size:clamp(1.2rem,.95rem + .8vw,1.75rem)}
:where(.atlas-page-contact,.atlas-pat-contact) .ho-addr strong{display:block; margin-bottom:8px; font:700 .72rem/1 var(--ff); letter-spacing:.18em; text-transform:uppercase; color:var(--bronze-ink)}
[dir=rtl] :where(.atlas-page-contact,.atlas-pat-contact) .ho-addr strong{font-family:var(--ff-ar); letter-spacing:0; font-size:.92rem}
:where(.atlas-page-contact,.atlas-pat-contact) .ho-co{display:inline-block; margin-top:14px; font:600 .78rem/1 var(--ff); letter-spacing:.14em; color:var(--text)}
:where(.atlas-page-contact,.atlas-pat-contact) .ho-map{display:grid; gap:18px}
:where(.atlas-page-contact,.atlas-pat-contact) .ho-map .map-frame{aspect-ratio:16/11}
:where(.atlas-page-contact,.atlas-pat-contact) .ho-map{position:relative}
:where(.atlas-page-contact,.atlas-pat-contact) .ho-legend{position:static; display:flex; margin-top:-8px; padding:0; background:none; color:var(--text); font-size:.8rem}
:where(.atlas-page-contact,.atlas-pat-contact) .ho-legend i.hub{background:var(--navy-900); box-shadow:0 0 0 2px var(--gold)}
:where(.atlas-page-contact,.atlas-pat-contact) .ho-legend i.org{border-color:var(--gold-d)}
:where(.atlas-page-contact,.atlas-pat-contact) .ho-legend i.dot{background:var(--navy-900)}
:where(.atlas-page-contact,.atlas-pat-contact) .ho-legend i.soon{border-color:var(--blue)}
:where(.atlas-page-contact,.atlas-pat-contact) .ct-mail{font-size:clamp(1.2rem,.95rem + .7vw,1.6rem)}
:where(.atlas-page-contact,.atlas-pat-contact) .ho-chips .fchip{min-height:44px; padding:0 14px}
:where(.atlas-page-contact,.atlas-pat-contact) .ho-info{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 20px; padding-top:16px; border-top:2px solid var(--gold); transition:opacity .25s, transform .35s var(--ease)}
:where(.atlas-page-contact,.atlas-pat-contact) .ho-info.is-swap{opacity:0; transform:translateY(6px)}
:where(.atlas-page-contact,.atlas-pat-contact) .ho-info p{font-size:.95rem}
:where(.atlas-page-contact,.atlas-pat-contact) .ho-info p b{color:var(--navy-900); font-weight:800}
:where(.atlas-page-contact,.atlas-pat-contact) .ho-info .soon{display:block; margin-top:4px; font-size:.9rem}
:where(.atlas-page-contact,.atlas-pat-contact) .ho-info .soon i{font-style:normal; font-weight:700; color:var(--blue)}
:where(.atlas-page-contact,.atlas-pat-contact) .ho-info .k{font:700 .7rem/1 var(--ff); letter-spacing:.16em; text-transform:uppercase; color:var(--bronze-ink); margin-inline-end:8px}
[dir=rtl] :where(.atlas-page-contact,.atlas-pat-contact) .ho-info .k{font-family:var(--ff-ar); letter-spacing:0; font-size:.86rem}
:where(.atlas-page-contact,.atlas-pat-contact) .ext{width:14px; height:14px}

@media (max-width:960px){
  :where(.atlas-page-contact,.atlas-pat-contact) .ct-tiles{grid-template-columns:1fr}
  :where(.atlas-page-contact,.atlas-pat-contact) .ct-top{margin-bottom:4px}
}
@media (max-width:720px){
  :where(.atlas-page-contact,.atlas-pat-contact) .ho-map .map-frame{aspect-ratio:4/3}
  :where(.atlas-page-contact,.atlas-pat-contact) .etype{padding-inline:14px 8px}
}
@media (prefers-reduced-motion:reduce){
  :where(.atlas-page-contact,.atlas-pat-contact) .ho-info.is-swap{opacity:1; transform:none}
}


/* === WordPress adaptation layer ===
   Block markup wraps some Atlas elements: an <img> sits in <figure class="wp-block-image">, a link button
   sits in <div class="wp-block-button">, and inline runs between blocks sit in <p class="x-inline">.
   These rules make the wrappers transparent so the Atlas rules above lay out the page as in the concept. */
.x-inline{display:contents}
:where(.wp-block-image){margin:0}
.wp-block-image.x-bare{display:contents}
:where(.wp-block-image figcaption.wp-element-caption){margin:0}
:where(.wp-block-image img){vertical-align:baseline}
.wp-block-button.btn{display:contents}
/* core gives the link width/height 100% of its wrapper; with the wrapper display:contents that would be the whole row */
.wp-block-button.btn > .wp-element-button{width:auto; height:auto; border-radius:0; word-break:normal; text-align:start}
#main{outline:none}

/* === Jetpack contact form in the Atlas form card (same look as the concept's .field rules) === */
.form .contact-form{margin:0}
.form .contact-form .wp-block-jetpack-contact-form{display:grid; grid-template-columns:1fr 1fr; gap:22px; padding:0; margin:0}
.form .contact-form .wp-block-jetpack-contact-form > *{grid-column:1 / -1; margin:0; flex:none; width:auto; max-width:none}
.form .contact-form .wp-block-jetpack-contact-form > .f-half-wrap{grid-column:auto}
.form .contact-form .grunion-field-wrap{display:grid; gap:8px; position:relative; padding:0}
.form .contact-form .grunion-field-label{margin:0; font:700 .72rem/1.2 var(--ff); letter-spacing:.14em; text-transform:uppercase; color:var(--navy-900)}
[dir=rtl] .form .contact-form .grunion-field-label{font-family:var(--ff-ar); letter-spacing:0; font-size:.92rem}
.form .contact-form .grunion-label-required{margin-inline-start:4px; color:var(--bronze-ink); font-weight:700}
.form .contact-form .grunion-field-wrap :is(input,select,textarea){width:100%; min-height:52px; margin:0; padding:12px 14px; border:1px solid transparent; border-bottom:1px solid var(--line-2); border-radius:0; background-color:var(--ui); color:var(--navy-900); font:400 1rem/1.5 var(--ff); box-shadow:none; transition:border-color .3s, background-color .3s}
[dir=rtl] .form .contact-form .grunion-field-wrap :is(input,select,textarea){font-family:var(--ff-ar)}
.form .contact-form .grunion-field-wrap textarea{min-height:150px; resize:vertical}
.form .contact-form .contact-form__select-wrapper{min-height:0; padding:0; border:0; border-bottom:1px solid var(--line-2); border-radius:0; background:var(--ui); box-shadow:none}
.form .contact-form .contact-form__select-wrapper:hover{border-bottom-color:var(--navy-900)}
.form .contact-form .contact-form__select-wrapper select{appearance:none; -webkit-appearance:none; border:0; background-color:transparent; padding-inline-end:40px; cursor:pointer}
.form .contact-form .grunion-field-wrap :is(input,select,textarea):hover{border-bottom-color:var(--navy-900)}
.form .contact-form .grunion-field-wrap :is(input,select,textarea):focus{outline:none; background-color:#fff; border-color:var(--navy-900)}
.form .contact-form .grunion-field-wrap::after{content:""; position:absolute; inset-inline:0; bottom:0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:var(--o-s,left); transition:transform .5s var(--ease); pointer-events:none}
[dir=rtl] .form .contact-form .grunion-field-wrap::after{--o-s:right}
.form .contact-form .grunion-field-wrap:focus-within::after{transform:scaleX(1)}
.form .contact-form .grunion-field-wrap:has(.contact-form__input-error:not(:empty) span:not(:empty))::after{display:none}
.form .contact-form .contact-form__input-error{font-size:.84rem; color:#A23B2A; font-weight:600}
.form .contact-form .wp-block-button{margin-top:6px}
@media (max-width:720px){
  .form .contact-form .wp-block-jetpack-contact-form{grid-template-columns:1fr}
  .form .contact-form .wp-block-jetpack-contact-form > .f-half-wrap{grid-column:1 / -1}
}


/* === Editability ===
   .atlas-note: the editor-only explanation inside areas the theme scripts fill (hidden on the site) */
.atlas-note{display:none}
.editor-styles-wrapper .atlas-note{display:block; margin:0; padding:10px 14px; border:1px dashed var(--gold); background:rgba(211,155,56,.08); color:var(--navy-900); font:600 .8rem/1.45 var(--ff); letter-spacing:0; text-transform:none}
.editor-styles-wrapper :is(.dark,.band-photo,.hero,.ft) .atlas-note{color:#fff}
.editor-styles-wrapper [class*="x-data-cw"]::after,.editor-styles-wrapper [class*="x-data-rcities"]::after{content:"  (filled automatically from the data file)"; font-size:.75em; opacity:.7}

/* hero slides: each slide group holds its photo and labels; on the site the photo is shown full-bleed by the slider */
.hmsg .hmsg-photo,.hmsg .hmsg-meta{display:none}
.editor-styles-wrapper .hero-msgs{display:block; counter-reset:atlas-slide}
.editor-styles-wrapper .hero-msgs > .hmsg{display:block; position:relative; opacity:1; visibility:visible; transform:none; padding:22px 0 18px; border-top:1px dashed rgba(255,255,255,.35); counter-increment:atlas-slide}
.editor-styles-wrapper .hero-msgs > .hmsg::before{content:"Slide " counter(atlas-slide); display:block; margin-bottom:8px; color:var(--gold); font:700 .72rem/1 var(--ff); letter-spacing:.14em; text-transform:uppercase}
.editor-styles-wrapper .hmsg .hmsg-photo{display:block; width:240px; margin:14px 0 8px}
.editor-styles-wrapper .hmsg .hmsg-photo img{width:240px; height:140px; object-fit:cover; object-position:var(--pos,50% 50%)}
.editor-styles-wrapper .hmsg .hmsg-meta{display:block; margin:4px 0 0; color:var(--mist); font-size:.9rem}
.editor-styles-wrapper .hmsg .hmsg-tab::before{content:"Tab: "; color:var(--gold-lt)}
.editor-styles-wrapper .hmsg .hmsg-name::before{content:"Venue: "; color:var(--gold-lt)}
.editor-styles-wrapper .hmsg .hmsg-place::before{content:"Place: "; color:var(--gold-lt)}
.editor-styles-wrapper .hero .ln > span{transform:none}

/* section numbers: a numbered label without a typed number (<b>01</b>) is numbered in page order */
:is(.wp-block-post-content,.is-root-container){counter-reset:atlas-sec}
:is(.wp-block-post-content,.is-root-container) .label:not(.short):not(:has(> b)){counter-increment:atlas-sec}
:is(.wp-block-post-content,.is-root-container) .label:not(.short):not(:has(> b))::before{content:counter(atlas-sec,decimal-leading-zero); flex:none; margin-inline-end:-14px; font-weight:700; color:var(--bronze-ink); font-variant-numeric:tabular-nums; white-space:nowrap}
:is(.wp-block-post-content,.is-root-container) .label:not(.short):not(:has(> b)) > span::before{content:"\00a0\2014"; display:inline-block; margin-inline-end:14px; color:var(--mist); font-weight:400}
:is(.wp-block-post-content,.is-root-container) :is(.dark,.band-photo,.hero) .label:not(.short):not(:has(> b))::before{color:var(--gold)}

/* image focus: block styles (Styles panel of an image block) override the photo's stored focal point */
.wp-block-image.is-style-focus-top img{--pos:50% 0% !important}
.wp-block-image.is-style-focus-upper img{--pos:50% 30% !important}
.wp-block-image.is-style-focus-center img{--pos:50% 50% !important}
.wp-block-image.is-style-focus-lower img{--pos:50% 70% !important}
.wp-block-image.is-style-focus-bottom img{--pos:50% 100% !important}
.wp-block-image.is-style-focus-left img{--pos:20% 50% !important}
.wp-block-image.is-style-focus-right img{--pos:80% 50% !important}

.atlas-pat{display:contents}