/* The invitation belongs to the opening copy; no extra scroll chapter or pin. */
html{scrollbar-gutter:stable}
.connected-actions{flex-wrap:wrap;gap:16px 28px}
.connected-actions .product-video-launch{display:flex;align-items:center;justify-content:center;gap:19px;color:var(--ink,#f0f4f4);text-align:start;text-decoration:none;min-height:86px;flex-basis:100%;width:max-content;max-width:100%;border-radius:6px}
.product-video-symbol{position:relative;display:grid;place-items:center;width:76px;height:76px;flex:0 0 76px;border:1px solid #4fd6e8aa;border-radius:50%;background:#071018bf;transition:transform .25s ease,background .25s ease;box-shadow:0 0 0 6px #4fd6e809}
.product-video-symbol::before{content:'';position:absolute;inset:-7px;border:1px solid #4fd6e838;border-radius:50%;clip-path:polygon(50% 0,100% 0,100% 100%,0 100%,0 50%,50% 50%);transition:transform .5s ease}
.product-video-symbol svg{width:25px;height:29px;margin-inline-start:4px;fill:currentColor}
.product-video-label{display:grid;gap:6px}
.product-video-label strong{font-size:clamp(20px,2vw,26px);font-weight:550;letter-spacing:-.02em}
.product-video-label small{font-size:12px;line-height:1.4;letter-spacing:.025em;color:#b8c9ce}
.product-video-launch:hover .product-video-symbol{background:#12323b;transform:scale(1.06)}
.product-video-launch:hover .product-video-symbol::before{transform:rotate(90deg)}
.product-video-launch:focus-visible{outline:2px solid #4fd6e8;outline-offset:7px}
.connected-actions>a:not(.product-video-launch){font-size:13px}
.product-video-dialog{position:fixed;inset:0;margin:auto;width:min(1320px,calc(100vw - 40px));max-width:none;max-height:calc(100svh - 32px);padding:0;border:1px solid #4fd6e85c;border-radius:10px;background:#071018;color:#f0f4f4;overflow:auto;overscroll-behavior:contain;box-shadow:0 32px 130px #000d}
.product-video-dialog[open]{animation:product-video-enter .24s ease-out both}
.product-video-dialog::backdrop{background:#02090fea;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.product-video-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:1px solid #ffffff1a}
.product-video-heading h2{margin:0;font-size:clamp(15px,1.7vw,22px);font-weight:500;line-height:1.25}
.product-video-heading button{flex-shrink:0;display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff40;border-radius:50%;background:transparent;color:inherit;font-size:28px;line-height:1;cursor:pointer}
.product-video-frame{position:relative;background:#000;line-height:0}
.product-video-frame video{display:block;width:100%;height:auto;max-height:calc(100svh - 176px);object-fit:contain;aspect-ratio:16/9;background:#000}
.product-video-resume{position:absolute;inset:0;margin:auto;width:max-content;height:54px;padding:0 24px;border:1px solid #4fd6e8;border-radius:28px;background:#071018ed;color:#f0f4f4;font:inherit;line-height:1.3;cursor:pointer}
.product-video-resume[hidden],.product-video-error[hidden]{display:none}
.product-video-error{margin:0;padding:14px 22px;color:#f2c078;font-size:14px;line-height:1.5}
.product-video-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;color:#bac7ce;font-size:12px;line-height:1.5}
.product-video-footer p{margin:0;color:inherit;font-size:inherit}
/* Sharing (Yusuf, 11 October 2026): one button per service, the link and the system share sheet. Each opens the service
   with the page and the film named; nothing is sent before a reader chooses. */
.product-video-share{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.product-video-share-label{margin-inline-end:4px;color:#bac7ce;font-size:13px}
.share-target{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid #526773;border-radius:50%;background:#101e27;color:#dcecf1;cursor:pointer;padding:0;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.share-target svg{width:18px;height:18px}
.share-target:hover,.share-target:focus-visible{background:#163040;border-color:#4fd6e8;color:#fff}
.share-target:focus-visible{outline:2px solid #4fd6e8;outline-offset:2px}
.share-target[hidden]{display:none}
.product-video-share-panel{padding:0 22px 16px;font:400 13px/1.5 var(--sans);color:#bac7ce}
.product-video-share-panel[hidden],.product-video-share-panel [hidden]{display:none}
.product-video-share-panel label{display:flex;align-items:center;gap:12px}
.product-video-share-panel input{flex:1;min-width:0;min-height:44px;border:1px solid #526773;border-radius:4px;background:#101e27;color:#eef6f8;font:inherit;padding:8px 12px}
.product-video-share-panel p{margin:8px 0 0;font:inherit}
.product-video-dialog :is(button,input,select):focus-visible{outline:2px solid #4fd6e8;outline-offset:3px}
.product-video-dialog[data-orientation=portrait]{width:min(460px,calc(100vw - 24px))}
.product-video-dialog[data-orientation=portrait] .product-video-heading h2{max-width:245px}
.product-video-dialog[data-orientation=portrait] .product-video-footer{flex-wrap:wrap}
@keyframes product-video-enter{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:760px){
 .connected-actions{gap:10px 20px;margin-top:18px}
 .connected-actions .product-video-launch{min-height:72px;gap:15px}
 .product-video-symbol{width:60px;height:60px;flex-basis:60px}
 .product-video-symbol svg{width:20px;height:23px}
 .product-video-label strong{font-size:21px}
 .product-video-label small{font-size:12px}
 .product-video-heading{padding:10px 14px}
 .product-video-footer{padding:10px 14px}
 .product-video-frame video{max-height:calc(100svh - 174px)}
}
@media(max-height:700px){
 .connected-copy{top:16svh}
 .connected-copy h1{font-size:clamp(36px,6.3vw,82px)}
 .connected-copy>p{font-size:14px;line-height:1.4;margin-top:16px}
 .connected-actions{margin-top:14px;gap:9px 20px}
 .connected-actions .product-video-launch{min-height:64px}
 .product-video-symbol{width:54px;height:54px;flex-basis:54px}
 .product-video-label strong{font-size:20px}
}
@media(prefers-reduced-motion:reduce){.product-video-dialog[open]{animation:none}.product-video-symbol,.product-video-symbol::before{transition:none}}
.reduced-motion .product-video-dialog[open]{animation:none}

.product-video-dialog[data-orientation=portrait] video{aspect-ratio:9/16}

.product-video-captions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.product-video-captions>button,.product-video-caption-language select{min-height:44px;border:1px solid #ffffff40;border-radius:6px;background:#101e27;color:#eef6f8;font:inherit;font-size:13px}
.product-video-captions>button{display:flex;align-items:center;gap:8px;padding:8px 13px;cursor:pointer}
.product-video-captions>button>span[aria-hidden]{font-size:12px;font-weight:650;border:1px solid currentColor;border-radius:2px;padding:0 3px;line-height:1.4}
.product-video-captions>button[aria-pressed=true]{background:#153641;border-color:#4fd6e8;color:#78e6f3}
.product-video-caption-language select{padding:8px 30px 8px 11px;max-width:160px;cursor:pointer}
.product-video-caption-language>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.product-video-captions :focus-visible{outline:2px solid #4fd6e8;outline-offset:3px}
.product-video-caption-error{margin:0;padding:0 22px 14px;color:#f2c078;font-size:13px;line-height:1.5}
.product-video-caption-error[hidden]{display:none}
@media(max-width:600px){.product-video-footer{flex-wrap:wrap;gap:10px}.product-video-caption-error{padding-inline:14px}}

/* Sector invitations reuse the player without adding a scroll scene. */
.sector-film-launch{display:flex;align-items:center;gap:14px;text-decoration:none;text-align:start;min-height:74px;color:inherit}
.sector-film-launch .product-video-symbol{width:46px;height:46px;flex-basis:46px;color:#eef6f8}
.sector-film-launch .product-video-symbol svg{width:16px;height:19px}
.sector-film-launch .product-video-label strong{font:500 17px/1.3 var(--sans);letter-spacing:0}
.sector-film-launch .product-video-label small{font:400 12px/1.4 var(--sans);color:inherit;opacity:.8}
.sector-entry>.sector-film-launch{padding:19px 0 6px;margin-top:18px;border-top:1px solid var(--rule,#56646d);display:flex}
.sector-entry>.sector-film-launch span{margin:0}
.editorial-hero>.sector-film-launch{position:absolute;inset-inline-start:24px;bottom:24px;max-width:calc(100% - 48px);padding:18px 24px;background:#071018eb;color:#f0f4f4;border:1px solid #4fd6e866;border-radius:6px}
.editorial-hero .sector-film-launch .product-video-label strong{font-size:clamp(18px,2vw,26px)}
.places-heading>.sector-film-launch{width:max-content;max-width:100%;margin-top:24px}
.product-video-loading{position:absolute;inset-inline:0;top:16px;width:max-content;max-width:90%;margin:auto;padding:9px 14px;border-radius:5px;background:#071018e8;color:#eef6f8;font:400 14px/1.4 var(--sans);pointer-events:none}
.product-video-caption-note{margin:0;padding:0 22px 8px;color:#bac7ce;font:400 13px/1.5 var(--sans)}
.product-video-landscape{margin:0 22px 14px;min-height:44px;padding:8px 13px;border:1px solid #ffffff40;border-radius:6px;background:#101e27;color:#eef6f8;font:400 13px/1.4 var(--sans);cursor:pointer}
.product-video-captions>button:disabled{cursor:default}
.product-video-error a{color:inherit;text-decoration:underline;display:inline-block;padding:8px 0;min-height:44px}
.product-video-dialog [hidden]{display:none}
@media(max-width:600px){.editorial-hero>.sector-film-launch{inset-inline-start:14px;bottom:14px;max-width:calc(100% - 28px);padding:14px}.product-video-caption-note{padding-inline:14px}.product-video-landscape{margin-inline:14px}.product-video-dialog[data-orientation=landscape]{width:calc(100vw - 16px)}}

/* The four place cards' films (Yusuf, 12 October 2026). "Explore the place"'s rule, `.sector-entry a>span`, also matched
   the film button's two spans and outranked them: the ring lost its grid, so the triangle sat in its top corner, and the
   film's title ran into "Watch film · 1:42" in the link's colour (additions.css now leaves the film out). The button now
   stands at the centre of the card's picture, the way a film is offered, and the rest of the picture still opens the
   place's page with the card's words. The title and length sit under the ring on a plain dark plate; no blur, a blurred
   panel being one of the creative direction's refusals. The four pictures share one height, so the titles under them
   start on one line (the first card has no start padding, and at one aspect ratio its picture stood taller). */
/* Five places since 12 October (Yusuf: the fifth film's card, Retail & venues, with its page): five columns, near-square
   pictures, a slightly smaller ring so the ring and its two-line plate stay inside the picture. */
#sector-guides .sector-entries{--sector-media-h:clamp(210px,15vw,280px);--sector-ring:54px}
/* Equal pictures need equal columns: the first card has no start padding and the others have 25 px each side, so its
   column gives up what the others spend on padding (experience.css), and all five pictures come out the same width. */
#sector-guides .sector-entries{grid-template-columns:minmax(0,calc(20% - 20px)) repeat(4,minmax(0,calc(20% + 5px)))}
#sector-guides .sector-entry{display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
/* The cards' padding and dividers in the reading direction: experience.css sets them on the right and left, so in Arabic
   the dividers stood at the wrong edges (one at the outer edge, none between the last two) and each picture pressed on
   its divider. The same values, by start and end. */
#sector-guides .sector-entry{padding-block:32px 20px;padding-inline:0 25px;border-right:0;border-inline-end:1px solid var(--rule)}
#sector-guides .sector-entry+.sector-entry{padding-inline-start:25px}
#sector-guides .sector-entry:last-child{border-inline-end:0}

#sector-guides .sector-entry>a{grid-area:1/1}
#sector-guides .sector-entry img{height:var(--sector-media-h);aspect-ratio:auto}
#sector-guides .sector-entry>.sector-film-launch{z-index:2;align-self:start;justify-self:center;flex-direction:column;gap:10px;min-height:0;max-width:calc(100% - 24px);margin:calc(var(--sector-media-h) / 2 - var(--sector-ring) / 2) 0 0;padding:0;border:0}
#sector-guides .sector-film-launch .product-video-symbol{width:var(--sector-ring);height:var(--sector-ring);flex-basis:auto;background:#071018cc}
#sector-guides .sector-film-launch:hover .product-video-symbol{background:#12323b}
#sector-guides .sector-film-launch .product-video-symbol svg{width:19px;height:22px;color:#f4fbfc}
#sector-guides .sector-film-launch .product-video-label{justify-items:center;gap:2px;padding:7px 12px 8px;border-radius:6px;background:#071018d9;border:1px solid #4fd6e833;color:#f0f4f4;text-align:center}
#sector-guides .sector-film-launch .product-video-label strong{font:500 15px/1.3 var(--sans);color:#f4fbfc}
#sector-guides .sector-film-launch .product-video-label small{font:400 12px/1.35 var(--sans);opacity:.85}
@media(max-width:1100px){#sector-guides .sector-entries{--sector-media-h:clamp(240px,34vw,380px);--sector-ring:60px;grid-template-columns:minmax(0,calc(50% - 12px)) minmax(0,calc(50% + 12px))}#sector-guides .sector-entry:nth-child(2n){border-inline-end:0}#sector-guides .sector-entry:nth-child(2n+1){padding-inline-start:0}}
@media(max-width:760px){#sector-guides .sector-entries{--sector-media-h:calc(100vw - 2 * var(--pad,24px));--sector-ring:56px;grid-template-columns:1fr}#sector-guides .sector-entry,#sector-guides .sector-entry+.sector-entry{padding-block:27px;padding-inline:0;border-inline-end:0}}
