/* =====================================================================
   LOCATIONS GROUP (phase 5, 2026-11-11) — /web-design-services(/*), /usa/*,
   /locations, /website-design-abu-dhabi, /web-development-companies-in-abu-dhabi.
   Loaded after service.css (which owns the sv-* section system). Prefixed loc-*:

   .loc-hero        place photo faded behind the poster type (multiply + mask)
   .loc-facts       four fact chips under the hero CTAs
   .loc-card        hero moment: a ticket with live local / Dubai clocks + facts
   .loc-prose       heading + long copy on a band (usa pages, hubs)
   .loc-items       numbered cards (rules, project shapes, how-we-work)
   .loc-price       pricing statement band
   .loc-links       big-type link rows with a description
   .loc-body        geo body: prose + "at a glance" tiles + place photo aside
   .loc-pills       place / state pills (hubs, directory)
   .loc-metros      photo cards for the dedicated metro pages
   .loc-places      sibling places (kit .ind__list + cursor peek)
   .loc-board       /locations: departures-board summary
   .loc-doc         country pages: long-form body + table of contents
   ===================================================================== */

/* ---------- hero: faded place photo + fact chips + moment slot ---------- */
.loc-hero { --loc-photo: .26; }
.loc-hero__photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.loc-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--loc-pos, 60% 45%); opacity: var(--loc-photo); mix-blend-mode: multiply; filter: saturate(.5) contrast(1.1); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 72%, transparent 100%); }
@media (min-width: 1024px) {
  .loc-hero__photo img { -webkit-mask-image: linear-gradient(calc(90deg * var(--dir)), transparent 16%, #000 50%, #000 100%); mask-image: linear-gradient(calc(90deg * var(--dir)), transparent 16%, #000 50%, #000 100%); }
}
.loc-hero .ph__bg { z-index: -1; }
.loc-hero .ph__title.loc-hero__title { font-size: clamp(38px, 7.6vw, 116px); line-height: .9; }
.loc-hero .ph__title.loc-hero__title--xl { font-size: clamp(44px, 10vw, 150px); }
.loc-hero .ph__title em { font-size: 1.02em; }
.loc-hero .ph__lead { max-width: 40em; }
.loc-facts { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 3; }
.loc-fact { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 9px 14px 8px; border-radius: 999px; background: color-mix(in oklab, var(--fg) 10%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--fg) 18%, transparent); color: var(--fg); font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.loc-fact b { font: 400 21px/1 var(--f-display); text-transform: var(--display-case); letter-spacing: .01em; white-space: nowrap; }
.loc-fact:nth-child(2n) b { color: var(--acc); }
.loc-moment { position: relative; z-index: 3; width: 100%; max-width: 430px; justify-self: center; }
@media (min-width: 1024px) {
  .loc-hero .sv-hero__grid { grid-template-columns: minmax(0, 1.32fr) minmax(330px, .68fr); align-items: center; }
  .loc-hero .sv-hero__grid.loc-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
  .loc-moment { justify-self: end; }
}
@media (prefers-reduced-motion: no-preference) { .loc-moment { animation: locMoment 1.2s .4s var(--ease) both; } }
@keyframes locMoment { from { transform: translateY(28px); } }  /* transform only: the card text is never at reduced opacity */
@media (max-width: 1023px) { .loc-moment { margin-top: 4px; } }

/* ---------- the hero card: clocks + facts ---------- */
.loc-card { --loc-r: -2.5deg; position: relative; margin-inline: auto; width: min(100%, 400px); padding: 20px 20px 18px; border-radius: 16px; background: var(--paper); color: var(--ink); font-size: 14px; box-shadow: 0 34px 60px -34px color-mix(in oklab, var(--ink) 80%, transparent), 0 0 0 1px color-mix(in oklab, var(--ink) 8%, transparent); transform: rotate(calc(var(--loc-r) * var(--dir))); }
.loc-card::before, .loc-card::after { content: ""; position: absolute; top: 96px; width: 18px; height: 18px; border-radius: 50%; background: var(--b2); }
.loc-card::before { inset-inline-start: -9px; } .loc-card::after { inset-inline-end: -9px; }
.loc-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; padding-inline-end: 54px; border-bottom: 2px dashed var(--line); font: 400 22px/1 var(--f-display); text-transform: var(--display-case); letter-spacing: .02em; }
.loc-card__head small { font: 600 11px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); text-align: end; white-space: nowrap; }
.loc-card__stamp { position: absolute; top: 12px; inset-inline-end: -10px; padding: 7px 10px 5px; border: 3px solid var(--b2); border-radius: 8px; color: var(--b2); font: 400 16px/1 var(--f-display); text-transform: uppercase; letter-spacing: .08em; transform: rotate(calc(10deg * var(--dir))); mix-blend-mode: multiply; white-space: nowrap; }
.loc-clocks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 0 6px; }
.loc-clock { display: grid; gap: 6px; padding: 12px 12px 10px; border-radius: 12px; background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--line); }
.loc-clock__t { font: 400 clamp(38px, 4vw, 50px)/.9 var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--ink); }
.loc-clock__l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-weight: 650; font-size: 13.5px; line-height: 1.25; }
.loc-clock__l small { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--ink-2); }
.loc-clock--home { background: var(--deep); color: var(--cream); box-shadow: none; }
.loc-clock--home .loc-clock__t { color: var(--b2-on-deep); }
.loc-clock--home .loc-clock__l small { color: var(--on-deep-2); }
.loc-card--multi .loc-clocks { grid-template-columns: 1fr; gap: 6px; }
.loc-card--multi .loc-clock { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 8px 12px; }
.loc-card--multi .loc-clock__t { font-size: 32px; }
.loc-card__diff { margin-top: 8px; padding: 9px 12px 8px; border-radius: 10px; background: color-mix(in oklab, var(--b2) 22%, var(--paper)); font-weight: 650; font-size: 13.5px; line-height: 1.35; }
.loc-card__rows { display: grid; margin-top: 6px; }
.loc-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px dotted var(--line); }
.loc-card__row dt { color: var(--ink-2); flex: none; }
.loc-card__row dd { font-weight: 700; text-align: end; min-width: 0; }
.loc-card__foot { margin-top: 10px; font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }
.loc-gw { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0 2px; }
.loc-gw span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px; background: color-mix(in oklab, var(--ink) 7%, transparent); font-size: 12.5px; font-weight: 650; }
.loc-gw span.is-ccy { background: var(--deep); color: var(--cream); font: 400 15px/1 var(--f-display); letter-spacing: .04em; }

/* ---------- prose band (heading + copy) ---------- */
.loc-prose__grid { display: grid; gap: clamp(22px, 3vw, 40px); }
.loc-prose__head { display: grid; gap: 14px; align-content: start; }
.loc-prose__body { display: grid; gap: 1.05em; max-width: 68ch; }
.loc-prose__body p, .loc-prose__body li { color: var(--fg-2); font-size: clamp(16.5px, 1.2vw, 18.5px); line-height: 1.7; }
.loc-prose__body strong { color: var(--fg); font-weight: 650; }
.loc-prose__body a { color: var(--acc); font-weight: 650; text-decoration-thickness: 1.5px; }
.band--deep .loc-prose__body a, .band--ink .loc-prose__body a { color: var(--b2-on-deep); }
.loc-prose__body ul { display: grid; gap: 12px; padding: 0; list-style: none; }
.loc-prose__body li { position: relative; padding: 14px 16px 14px 46px; border-radius: 14px; background: color-mix(in oklab, var(--fg) 6%, transparent); box-shadow: inset 0 0 0 1px var(--rule); }
[dir="rtl"] .loc-prose__body li { padding: 14px 46px 14px 16px; }
.loc-prose__body li::before { content: ""; position: absolute; top: 22px; inset-inline-start: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--b2); box-shadow: 0 0 0 4px color-mix(in oklab, var(--b2) 25%, transparent); }
.loc-prose--lead .loc-prose__body > p:first-child { font: 500 clamp(19px, 1.7vw, 25px)/1.45 var(--f-body); letter-spacing: -.012em; color: var(--fg); }
@media (min-width: 1024px) {
  .loc-prose__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .loc-prose__head { position: sticky; top: calc(var(--nav-h) + 36px); }
}

/* ---------- numbered cards ---------- */
.loc-items { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); counter-reset: none; }
.loc-item { position: relative; display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2.4vw, 32px); padding-top: clamp(26px, 2.8vw, 36px); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line); overflow: clip; }
.band--hot .loc-item { box-shadow: 0 30px 50px -40px color-mix(in oklab, var(--b2-ink) 90%, transparent); }
.loc-item:nth-child(5n+3) { background: var(--deep); color: var(--cream); box-shadow: none; }
.loc-item:nth-child(5n+3) p { color: var(--on-deep-2); }
.loc-item:nth-child(5n+3) a { color: var(--b2-on-deep); }
.loc-item__n { position: absolute; top: 10px; inset-inline-end: 16px; font: 400 64px/.9 var(--f-num); color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklab, currentColor 30%, transparent); pointer-events: none; }
.loc-item h3, .loc-item h4 { font: 400 clamp(24px, 2.1vw, 32px)/1 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); padding-inline-end: 64px; }
.loc-item p { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.loc-item a { color: var(--b1-accent); font-weight: 650; }
.loc-item__tag { justify-self: start; display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px 2px; border-radius: 999px; background: var(--b2); color: var(--ink); font: 400 17px/1 var(--f-num); letter-spacing: .02em; white-space: nowrap; }
.loc-item:nth-child(5n+3) .loc-item__tag { background: var(--cream); }
.loc-item__ico { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--b2); color: var(--ink); font-size: 21px; }
.loc-item:nth-child(5n+3) .loc-item__ico { background: var(--cream); color: var(--deep); }
.loc-items--ico .loc-item h3 { padding-inline-end: 0; }

/* ---------- pricing statement ---------- */
.loc-price__grid { display: grid; gap: clamp(20px, 3vw, 40px); }
.loc-price__body { display: grid; gap: 22px; justify-items: start; }
.loc-price__body p { font: 500 clamp(19px, 1.8vw, 26px)/1.5 var(--f-body); letter-spacing: -.01em; color: var(--fg); max-width: 40em; }
.loc-price__body strong { font: 400 1.35em/1 var(--f-num); color: var(--deep); padding: 0 .08em; white-space: nowrap; }
.band--cream .loc-price__body strong { color: var(--b1-accent); }
@media (min-width: 1024px) { .loc-price__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: end; column-gap: clamp(40px, 6vw, 96px); } }

/* ---------- big-type link rows ---------- */
.loc-links__list { border-top: 2px solid var(--fg); }
.loc-link { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t go" "d go"; column-gap: 18px; row-gap: 4px; align-items: center; min-height: 64px; padding-block: 16px; border-bottom: 1px solid var(--rule); color: var(--fg); text-decoration: none; }
.loc-link__t { grid-area: t; font: 400 clamp(26px, 3.8vw, 58px)/1 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); transition: translate .6s var(--ease), color .3s; }
.loc-link__d { grid-area: d; color: var(--fg-2); font-size: 15px; line-height: 1.45; }
.loc-link i { grid-area: go; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--rule); font-size: 18px; transition: transform .5s var(--ease), background-color .3s, color .3s; }
.loc-link:hover .loc-link__t { translate: calc(12px * var(--dir)) 0; color: var(--acc); }
.band--deep .loc-link:hover .loc-link__t { color: var(--b2-on-deep); }
.loc-link:hover i { background: var(--b2); color: var(--ink); box-shadow: none; transform: rotate(calc(45deg * var(--dir))); }

/* ---------- geo body: prose + at-a-glance tiles + aside ---------- */
.loc-body__grid { display: grid; gap: clamp(30px, 4vw, 56px); }
.loc-body .prose { max-width: none; }
.loc-body .prose > p:first-child { font: 500 clamp(19px, 1.7vw, 25px)/1.45 var(--f-body); letter-spacing: -.012em; color: var(--fg); max-width: 34em; }
.loc-body .prose h2 { margin-top: 1.4em; }
.loc-body .prose p { max-width: 64ch; }
.loc-body .prose ul.geo-facts { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); margin-top: 1.1em; }
.loc-body .prose ul.geo-facts li { display: grid; gap: 6px; align-content: start; padding: 16px 18px 18px; border-radius: 18px; background: var(--paper); color: var(--ink-2); font-size: 15.5px; line-height: 1.55; box-shadow: 0 0 0 1px var(--line); }
.loc-body .prose ul.geo-facts li::marker { content: none; }
.loc-body .prose ul.geo-facts li strong { display: block; font: 400 22px/1 var(--f-display); text-transform: var(--display-case); letter-spacing: .01em; color: var(--ink); }
.loc-body .prose ul.geo-facts li:nth-child(3) { background: var(--deep); color: var(--on-deep-2); box-shadow: none; }
.loc-body .prose ul.geo-facts li:nth-child(3) strong { color: var(--b2-on-deep); }
.loc-body .prose ul.geo-facts li:nth-child(4) { background: var(--b2); color: var(--ink); box-shadow: none; }
.loc-body__aside { display: grid; gap: 22px; align-content: start; }
.loc-figure { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--cream-2); box-shadow: 0 40px 60px -44px color-mix(in oklab, var(--ink) 80%, transparent); }
.loc-figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.loc-figure figcaption { position: absolute; inset-inline: 12px; bottom: 12px; padding: 8px 12px; border-radius: 12px; background: color-mix(in oklab, var(--paper) 90%, transparent); color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.loc-cities { display: grid; gap: 14px; }
.loc-cities h2 { font: 400 clamp(26px, 2.6vw, 38px)/1 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); }
.loc-cities ul { display: flex; flex-wrap: wrap; gap: 8px; }
.loc-cities li { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 6px; border-radius: 999px; font: 400 clamp(18px, 1.5vw, 23px)/1 var(--f-display); text-transform: var(--display-case); box-shadow: inset 0 0 0 1.5px var(--ink); }
.loc-cities li:nth-child(3n+1) { background: var(--b2); box-shadow: none; }
.loc-cities li:nth-child(3n+2) { background: var(--deep); color: var(--cream); box-shadow: none; }
.loc-cities li i { font-size: .7em; }
@media (min-width: 1024px) {
  .loc-body__grid { grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); column-gap: clamp(40px, 5vw, 80px); align-items: start; }
  .loc-body__aside { position: sticky; top: calc(var(--nav-h) + 30px); }
}

/* benefits ticket: one-sentence checks */
.loc-benefits .sv-check p { font-size: 16.5px; line-height: 1.5; color: var(--ink); font-weight: 550; }
.loc-benefits .sv-check__body { align-self: center; }
@media (min-width: 1280px) { .loc-benefits .sv-ticket__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- place pills (hubs, directory) ---------- */
.loc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.loc-pill { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 16px 6px 8px; border-radius: 999px; background: color-mix(in oklab, var(--fg) 7%, transparent); box-shadow: inset 0 0 0 1.5px var(--rule); color: var(--fg); font-weight: 650; font-size: 15px; line-height: 1.2; text-decoration: none; transition: background-color .3s, color .3s, transform .4s var(--ease); }
[dir="rtl"] .loc-pill { padding: 6px 8px 6px 16px; }
.loc-pill__code { display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 6px; border-radius: 999px; background: var(--b2); color: var(--ink); font: 700 11.5px/1 var(--f-body); letter-spacing: .05em; }
.loc-pill--plain { padding-inline-start: 16px; }
.loc-pill--hub { background: var(--b2); color: var(--ink); box-shadow: none; }
.loc-pill:hover { background: var(--fg); color: var(--bg); transform: translateY(-2px); }
.loc-pill:hover .loc-pill__code { background: var(--acc); color: var(--cream); }
.band--deep .loc-pill:hover .loc-pill__code, .band--ink .loc-pill:hover .loc-pill__code { color: var(--ink); background: var(--b2); }
.loc-region { display: grid; gap: 14px; padding-block: clamp(18px, 2.4vw, 30px); border-top: 1px solid var(--rule); }
.loc-region:first-child { border-top: 2px solid var(--fg); }
.loc-region__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; font: 400 clamp(28px, 3.2vw, 48px)/1 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); }
.loc-region__h a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.loc-region__h small { font: 650 13px/1.2 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); }
.loc-region__flag { font-size: .8em; line-height: 1; }
.loc-region__hd { display: grid; gap: 6px; align-content: start; }
.loc-region__n { font: 650 13px/1.2 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); }
@media (min-width: 1024px) { .loc-region { grid-template-columns: minmax(220px, .32fr) minmax(0, 1fr); align-items: start; column-gap: 40px; } }

/* ---------- metro photo cards ---------- */
.loc-metros { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.loc-metros .sc__img { height: 150px; }
.loc-metros h4 { font: 400 24px/1 var(--f-display); text-transform: var(--display-case); padding-inline-end: 30px; }
.loc-metros .sc__go { top: 126px; }
.loc-sub { margin: clamp(30px, 4vw, 52px) 0 16px; font: 400 clamp(26px, 2.6vw, 38px)/1 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); }
.loc-note { margin-top: 18px; max-width: 78ch; color: var(--fg-2); font-size: 16.5px; line-height: 1.75; }
.loc-note strong { color: var(--fg); }

/* ---------- sibling places (kit big-type list) ---------- */
.loc-places .ind__name { font-size: clamp(30px, 5.4vw, 74px); }
.loc-places__hub { margin-top: 22px; }
.loc-places__hub .link-arrow { color: var(--b2-on-deep); font-weight: 700; font-size: 17px; }

/* ---------- /locations: departures board ---------- */
.loc-board { --loc-r: -1.5deg; position: relative; width: min(100%, 440px); margin-inline: auto; padding: 18px 18px 14px; border-radius: 18px; background: var(--ink); color: var(--cream); box-shadow: 0 40px 60px -36px color-mix(in oklab, var(--ink) 90%, transparent); transform: rotate(calc(var(--loc-r) * var(--dir))); }
.loc-board__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in oklab, var(--cream) 20%, transparent); font: 400 22px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--b2-on-deep); }
.loc-board__head small { font: 600 11px/1 var(--f-body); letter-spacing: .1em; color: color-mix(in oklab, var(--cream) 65%, var(--ink)); }
.loc-board__rows { display: grid; }
.loc-board__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed color-mix(in oklab, var(--cream) 16%, transparent); font-size: 14px; }
.loc-board__code { display: grid; place-items: center; height: 30px; border-radius: 6px; background: color-mix(in oklab, var(--cream) 12%, transparent); font: 700 12px/1 var(--f-body); letter-spacing: .06em; }
.loc-board__name { font-weight: 650; line-height: 1.25; }
.loc-board__n { font: 400 24px/1 var(--f-num); color: var(--b2-on-deep); font-variant-numeric: tabular-nums; text-align: end; }
.loc-board__n small { display: block; font: 600 10.5px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in oklab, var(--cream) 60%, var(--ink)); }
.loc-board__foot { margin-top: 10px; font-size: 11.5px; color: color-mix(in oklab, var(--cream) 62%, var(--ink)); }
.loc-dir { display: grid; gap: 0; }
.loc-dir .loc-region__h { font-size: clamp(26px, 2.8vw, 42px); }

/* ---------- country pages: long-form body + table of contents ---------- */
.loc-doc__grid { display: grid; gap: clamp(26px, 4vw, 56px); }
.loc-doc .prose { max-width: 72ch; }
.loc-doc .prose > :first-child { margin-top: 0; }
.loc-doc .prose h2 { scroll-margin-top: calc(var(--nav-h) + 24px); }
.loc-doc .prose h3 { font: 400 clamp(22px, 2vw, 30px)/1.05 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); color: var(--fg); padding-top: 1em; border-top: 1px solid var(--rule); }
.loc-doc .prose h2 + h3 { border-top: 0; padding-top: 0; }
.loc-doc .prose em { color: var(--fg-2); }
.loc-toc { display: grid; gap: 14px; align-content: start; }
.loc-toc__t { font: 700 12px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.loc-toc .toc a { min-height: 44px; }
.loc-toc .toc a.is-on { color: var(--fg); border-inline-start-color: var(--acc); font-weight: 650; }
@media (max-width: 1023px) { .loc-toc { padding-bottom: 8px; } .loc-toc .loc-figure { display: none; } }
@media (min-width: 1024px) {
  .loc-doc__grid { grid-template-columns: minmax(220px, .3fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 100px); align-items: start; }
  .loc-toc { position: sticky; top: calc(var(--nav-h) + 36px); }
}

/* ---------- Abu Dhabi pages: tech tiles + sector rows ---------- */
.loc-tech { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); margin-top: clamp(20px, 2.6vw, 34px); }
.loc-tech li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 18px 30px -26px color-mix(in oklab, var(--b2-ink) 90%, transparent); }
.loc-tech i { grid-row: span 2; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--deep); color: var(--b2); font-size: 18px; }
.loc-tech b { font: 400 21px/1 var(--f-display); text-transform: var(--display-case); }
.loc-tech span { font-size: 13.5px; color: var(--ink-2); line-height: 1.35; }
.loc-sectors { display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); border-top: 2px solid var(--fg); }
.loc-sector { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 18px 4px; border-bottom: 1px solid var(--rule); }
.loc-sector i { grid-row: span 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--b2); color: var(--ink); font-size: 19px; }
.loc-sector b { font: 400 clamp(22px, 1.9vw, 28px)/1.02 var(--f-display); text-transform: var(--display-case); }
.loc-sector span { color: var(--fg-2); font-size: 15px; line-height: 1.5; }
@media (min-width: 720px) { .loc-sector:nth-child(odd) { padding-inline-end: 28px; } }

/* Abu Dhabi intro: the place photo beside the lead statement */
.loc-intro .loc-figure img { aspect-ratio: 16 / 10; }
@media (min-width: 1024px) {
  .loc-intro .loc-figure { grid-column: 1; grid-row: 1; align-self: start; }
  .loc-intro .sv-intro__lead { grid-column: 2; grid-row: 1; }
}
.sv-check .link-arrow { font-size: 14px; font-weight: 650; color: var(--b1-accent); }
.loc-hero .sv-stubs { margin-inline: auto; }


/* ---------- /website-design-abu-dhabi body (SEO rewrite 2026-11-11) ---------- */
.loc-stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.loc-stat { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.loc-stat:nth-child(2) { background: var(--deep); color: var(--cream); box-shadow: none; }
.loc-stat:nth-child(2) p { color: var(--on-deep-2); }
.loc-stat:nth-child(2) strong { color: var(--cream); }
.loc-stat__n { font: 400 clamp(52px, 6.4vw, 96px)/.86 var(--f-num); color: var(--b1-accent); letter-spacing: .005em; }
.loc-stat:nth-child(2) .loc-stat__n { color: var(--b2-on-deep); }
.loc-stat p { color: var(--ink-2); font-size: 16px; line-height: 1.62; }
.loc-stat strong { color: var(--ink); }
.loc-reg { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.loc-reg li { display: grid; gap: 6px; align-content: start; padding: 18px 20px; border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 40px -34px color-mix(in oklab, var(--b2-ink) 90%, transparent); }
.loc-reg li:first-child { background: var(--deep); color: var(--cream); }
.loc-reg li:first-child span { color: var(--on-deep-2); }
.loc-reg b { font: 400 clamp(22px, 1.9vw, 28px)/1.02 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); }
.loc-reg span { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.loc-licence__more { display: grid; gap: 16px; margin-top: clamp(24px, 3vw, 40px); max-width: 76ch; }
.loc-licence__more > p { font-size: 17px; line-height: 1.65; }
.loc-licence__more > .loc-licence__k { font: 400 clamp(24px, 2.2vw, 32px)/1 var(--f-display); text-transform: var(--display-case); }
.loc-ticks { display: grid; gap: 10px; }
.loc-ticks li { position: relative; padding: 16px 18px 16px 52px; border-radius: 16px; background: color-mix(in oklab, var(--paper) 88%, transparent); color: var(--ink); font-size: 16px; line-height: 1.6; }
[dir="rtl"] .loc-ticks li { padding: 16px 52px 16px 18px; }
.loc-ticks li::before { content: "\2713"; position: absolute; top: 15px; inset-inline-start: 16px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); color: var(--b2); font-weight: 800; font-size: 13px; }
.loc-cmp2 { display: grid; gap: 14px; }
.loc-cmp2__col { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1.5px var(--rule); }
.loc-cmp2__col p { color: var(--fg-2); font-size: 16.5px; line-height: 1.65; }
.loc-cmp2__col strong { color: var(--fg); }
.loc-cmp2__col--hl { background: var(--b2); box-shadow: none; }
.loc-cmp2__col--hl p, .loc-cmp2__col--hl strong { color: var(--ink); }
.loc-cmp2__t { font: 400 clamp(24px, 2.4vw, 36px)/1 var(--f-display) !important; text-transform: var(--display-case); letter-spacing: var(--display-track); color: var(--fg) !important; }
.loc-cmp2__col--hl .loc-cmp2__t { color: var(--ink) !important; }
.loc-adgm__after { margin-top: clamp(22px, 3vw, 36px); }
@media (min-width: 900px) { .loc-cmp2 { grid-template-columns: 1fr 1fr; } }
.loc-pk { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.loc-pk__t { position: relative; display: grid; gap: 12px; align-content: start; padding: clamp(24px, 2.6vw, 34px); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: 0 40px 60px -46px color-mix(in oklab, var(--b2-ink) 95%, transparent); container-type: inline-size; }
.loc-pk__t:nth-child(2) { background: var(--deep); color: var(--cream); }
.loc-pk__t:nth-child(2) p { color: var(--on-deep-2); }
.loc-pk__t .loc-pk__price { font: 400 clamp(40px, 4.6vw, 64px)/.9 var(--f-num); color: var(--b1-accent); padding-bottom: 12px; border-bottom: 2px dashed var(--line); }
.loc-pk__t:nth-child(2) .loc-pk__price { color: var(--b2-on-deep); border-bottom-color: color-mix(in oklab, var(--cream) 25%, transparent); }
.loc-pk__price [data-price] { font-size: min(1em, calc(100cqi / var(--px-em, 6))); }
.loc-pk__t h3 { font: 400 clamp(24px, 2.2vw, 32px)/1 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); }
.loc-pk__t p { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.loc-pk__when { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
.loc-pk__more a, .loc-note a { color: var(--fg); font-weight: 700; text-decoration-thickness: 2px; }
.loc-linkgroups__grid { display: grid; gap: clamp(24px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.loc-linkgroup { display: grid; gap: 12px; align-content: start; }
.loc-linkgroup ul { display: grid; border-top: 2px solid var(--fg); }
.loc-linkgroup a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 10px 0; border-bottom: 1px solid var(--rule); color: var(--fg); font-weight: 650; font-size: 16px; line-height: 1.3; text-decoration: none; transition: color .3s; }
.loc-linkgroup a:hover { color: var(--b2-on-deep); }
.loc-linkgroup a i { flex: none; transition: transform .4s var(--ease); }
.loc-linkgroup a:hover i { transform: rotate(calc(45deg * var(--dir))); }
.loc-sources__h { font: 400 clamp(26px, 2.6vw, 38px)/1 var(--f-display); text-transform: var(--display-case); margin-bottom: 14px; }
.loc-sources__list { display: grid; gap: 8px; list-style: decimal; padding-inline-start: 1.4em; color: var(--fg-2); font-size: 14.5px; line-height: 1.5; max-width: 90ch; }
.loc-sources__list a { color: var(--fg); font-weight: 600; text-decoration-thickness: 1px; }
.loc-sources__u { display: inline-block; margin-inline-start: 6px; color: var(--fg-2); font-size: 12.5px; overflow-wrap: anywhere; }
.loc-alain .loc-figure img { aspect-ratio: 16 / 11; }


/* ---------- country pages: province / state sections (SEO blocks 2026-11-11) ---------- */
.loc-geo .wrap { display: grid; gap: clamp(18px, 2.2vw, 28px); }
.loc-geo .sv-head { margin-bottom: 0; }
.loc-geo__qa { max-width: 78ch; padding: clamp(18px, 2.2vw, 28px); border-radius: var(--r-lg); background: var(--b2); color: var(--ink); font-size: clamp(16.5px, 1.25vw, 18.5px); line-height: 1.65; }
.loc-geo__h { font: 400 clamp(24px, 2.4vw, 36px)/1.02 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); color: var(--fg); scroll-margin-top: calc(var(--nav-h) + 24px); }
.loc-geo .cmp-wrap { margin-top: -6px; }
.loc-geo__table th[scope="row"] { white-space: normal; min-width: 150px; }
.loc-geo__table td, .loc-geo__table th { font-size: 14.5px; line-height: 1.45; vertical-align: top; }
.loc-geo__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.loc-geo__card { display: grid; gap: 12px; align-content: start; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r-lg); background: var(--cream); box-shadow: 0 0 0 1px var(--line); color: var(--ink); }
.loc-geo__card--wide { grid-column: 1 / -1; }
.loc-geo__card .loc-geo__h { font-size: clamp(22px, 2vw, 30px); }
.loc-geo__card p, .loc-geo__card li { color: var(--ink-2); font-size: 16px; line-height: 1.65; }
.loc-geo__card strong { color: var(--ink); }
.loc-geo__card ul { display: grid; gap: 10px; padding-inline-start: 1.2em; list-style: disc; }
.loc-geo__card li::marker { color: var(--b1-accent); }
.loc-geo__card--deep { background: var(--deep); box-shadow: none; }
.loc-geo__card--deep .loc-geo__h, .loc-geo__card--deep strong { color: var(--cream); }
.loc-geo__card--deep p, .loc-geo__card--deep li { color: var(--on-deep-2); }
.loc-geo__card--deep li::marker { color: var(--b2); }
.loc-geo__faq { max-width: 980px; }
.loc-geo__links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.loc-geo__links .link-arrow { font-weight: 700; }

/* phones / tablets: room under the hero for the pulled-up answer card when the hero has a moment slot */
@media (max-width: 1023px) { .loc-hero .ph__in { padding-block-end: clamp(104px, 16vw, 150px); } }

/* phones: tighter hero chips, cards keep 44px targets */
@media (max-width: 560px) {
  .loc-fact { font-size: 12.5px; padding: 8px 12px 7px; }
  .loc-fact b { font-size: 18px; }
  .loc-clock__t { font-size: 34px; }
  .loc-card { padding: 18px 16px 16px; }
  .loc-card__head { font-size: 19px; }
  .loc-link__t { font-size: 25px; }
}