/* VR Decorations — visual / media / 360 layer (Owner pilot 2026-10-07). Additive to site.css (RC22 baseline untouched). CSP: external file, no inline. */
/* focal point of a real image: object-position in steps of 10 % on both axes (class fp<x>_<y>; CSP forbids style attributes) */
.im img.bg{object-position:50% 50%}.ph-im img.bg{object-position:50% 70%}
.im img.bg.fp0_0{object-position:0% 0%}.im img.bg.fp0_10{object-position:0% 10%}.im img.bg.fp0_20{object-position:0% 20%}.im img.bg.fp0_30{object-position:0% 30%}.im img.bg.fp0_40{object-position:0% 40%}.im img.bg.fp0_50{object-position:0% 50%}.im img.bg.fp0_60{object-position:0% 60%}.im img.bg.fp0_70{object-position:0% 70%}.im img.bg.fp0_80{object-position:0% 80%}.im img.bg.fp0_90{object-position:0% 90%}.im img.bg.fp0_100{object-position:0% 100%}.im img.bg.fp10_0{object-position:10% 0%}.im img.bg.fp10_10{object-position:10% 10%}.im img.bg.fp10_20{object-position:10% 20%}.im img.bg.fp10_30{object-position:10% 30%}.im img.bg.fp10_40{object-position:10% 40%}.im img.bg.fp10_50{object-position:10% 50%}.im img.bg.fp10_60{object-position:10% 60%}.im img.bg.fp10_70{object-position:10% 70%}.im img.bg.fp10_80{object-position:10% 80%}.im img.bg.fp10_90{object-position:10% 90%}.im img.bg.fp10_100{object-position:10% 100%}.im img.bg.fp20_0{object-position:20% 0%}.im img.bg.fp20_10{object-position:20% 10%}.im img.bg.fp20_20{object-position:20% 20%}.im img.bg.fp20_30{object-position:20% 30%}.im img.bg.fp20_40{object-position:20% 40%}.im img.bg.fp20_50{object-position:20% 50%}.im img.bg.fp20_60{object-position:20% 60%}.im img.bg.fp20_70{object-position:20% 70%}.im img.bg.fp20_80{object-position:20% 80%}.im img.bg.fp20_90{object-position:20% 90%}.im img.bg.fp20_100{object-position:20% 100%}.im img.bg.fp30_0{object-position:30% 0%}.im img.bg.fp30_10{object-position:30% 10%}.im img.bg.fp30_20{object-position:30% 20%}.im img.bg.fp30_30{object-position:30% 30%}.im img.bg.fp30_40{object-position:30% 40%}.im img.bg.fp30_50{object-position:30% 50%}.im img.bg.fp30_60{object-position:30% 60%}.im img.bg.fp30_70{object-position:30% 70%}.im img.bg.fp30_80{object-position:30% 80%}.im img.bg.fp30_90{object-position:30% 90%}.im img.bg.fp30_100{object-position:30% 100%}.im img.bg.fp40_0{object-position:40% 0%}.im img.bg.fp40_10{object-position:40% 10%}.im img.bg.fp40_20{object-position:40% 20%}.im img.bg.fp40_30{object-position:40% 30%}.im img.bg.fp40_40{object-position:40% 40%}.im img.bg.fp40_50{object-position:40% 50%}.im img.bg.fp40_60{object-position:40% 60%}.im img.bg.fp40_70{object-position:40% 70%}.im img.bg.fp40_80{object-position:40% 80%}.im img.bg.fp40_90{object-position:40% 90%}.im img.bg.fp40_100{object-position:40% 100%}.im img.bg.fp50_0{object-position:50% 0%}.im img.bg.fp50_10{object-position:50% 10%}.im img.bg.fp50_20{object-position:50% 20%}.im img.bg.fp50_30{object-position:50% 30%}.im img.bg.fp50_40{object-position:50% 40%}.im img.bg.fp50_50{object-position:50% 50%}.im img.bg.fp50_60{object-position:50% 60%}.im img.bg.fp50_70{object-position:50% 70%}.im img.bg.fp50_80{object-position:50% 80%}.im img.bg.fp50_90{object-position:50% 90%}.im img.bg.fp50_100{object-position:50% 100%}.im img.bg.fp60_0{object-position:60% 0%}.im img.bg.fp60_10{object-position:60% 10%}.im img.bg.fp60_20{object-position:60% 20%}.im img.bg.fp60_30{object-position:60% 30%}.im img.bg.fp60_40{object-position:60% 40%}.im img.bg.fp60_50{object-position:60% 50%}.im img.bg.fp60_60{object-position:60% 60%}.im img.bg.fp60_70{object-position:60% 70%}.im img.bg.fp60_80{object-position:60% 80%}.im img.bg.fp60_90{object-position:60% 90%}.im img.bg.fp60_100{object-position:60% 100%}.im img.bg.fp70_0{object-position:70% 0%}.im img.bg.fp70_10{object-position:70% 10%}.im img.bg.fp70_20{object-position:70% 20%}.im img.bg.fp70_30{object-position:70% 30%}.im img.bg.fp70_40{object-position:70% 40%}.im img.bg.fp70_50{object-position:70% 50%}.im img.bg.fp70_60{object-position:70% 60%}.im img.bg.fp70_70{object-position:70% 70%}.im img.bg.fp70_80{object-position:70% 80%}.im img.bg.fp70_90{object-position:70% 90%}.im img.bg.fp70_100{object-position:70% 100%}.im img.bg.fp80_0{object-position:80% 0%}.im img.bg.fp80_10{object-position:80% 10%}.im img.bg.fp80_20{object-position:80% 20%}.im img.bg.fp80_30{object-position:80% 30%}.im img.bg.fp80_40{object-position:80% 40%}.im img.bg.fp80_50{object-position:80% 50%}.im img.bg.fp80_60{object-position:80% 60%}.im img.bg.fp80_70{object-position:80% 70%}.im img.bg.fp80_80{object-position:80% 80%}.im img.bg.fp80_90{object-position:80% 90%}.im img.bg.fp80_100{object-position:80% 100%}.im img.bg.fp90_0{object-position:90% 0%}.im img.bg.fp90_10{object-position:90% 10%}.im img.bg.fp90_20{object-position:90% 20%}.im img.bg.fp90_30{object-position:90% 30%}.im img.bg.fp90_40{object-position:90% 40%}.im img.bg.fp90_50{object-position:90% 50%}.im img.bg.fp90_60{object-position:90% 60%}.im img.bg.fp90_70{object-position:90% 70%}.im img.bg.fp90_80{object-position:90% 80%}.im img.bg.fp90_90{object-position:90% 90%}.im img.bg.fp90_100{object-position:90% 100%}.im img.bg.fp100_0{object-position:100% 0%}.im img.bg.fp100_10{object-position:100% 10%}.im img.bg.fp100_20{object-position:100% 20%}.im img.bg.fp100_30{object-position:100% 30%}.im img.bg.fp100_40{object-position:100% 40%}.im img.bg.fp100_50{object-position:100% 50%}.im img.bg.fp100_60{object-position:100% 60%}.im img.bg.fp100_70{object-position:100% 70%}.im img.bg.fp100_80{object-position:100% 80%}.im img.bg.fp100_90{object-position:100% 90%}.im img.bg.fp100_100{object-position:100% 100%}
/* real images in RC22 boxes: the approved .im rules already cover picture/img.bg; video sits above the poster and fades in when it really plays */
.im .vid-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .6s}
.im.is-playing .vid-v{opacity:1}
.im .vid-pause{all:unset;box-sizing:border-box;position:absolute;z-index:3;inset-block-end:12px;inset-inline-end:12px;width:44px;height:44px;display:none;align-items:center;justify-content:center;gap:5px;background:#0C1A1B;color:#EFEFEC;cursor:pointer;box-shadow:0 0 0 1px rgba(239,239,236,.4)}
.im.is-playing .vid-pause,.im.vid-paused .vid-pause{display:inline-flex}
.im.vid-done .vid-pause{display:none}
.im .vid-pause i{display:block;width:4px;height:16px;background:currentColor}
.im .vid-pause[aria-pressed="true"] i:first-child{width:0;height:0;background:none;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent currentColor}
.im .vid-pause[aria-pressed="true"] i:last-child{display:none}
.im .vid-pause:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #0C1A1B}
@media (prefers-reduced-motion:reduce){.im .vid-v{display:none}}
/* internal review flag (staging/local only; never rendered on production) */
.im .lbl-x{position:absolute;top:12px;inset-inline-start:12px;background:#8A5A00;color:#fff;font-size:12px;line-height:1.5;padding:2px 8px;letter-spacing:.02em}
/* title-led hero with an optional image (services / sectors / design studies without an RC22 hero block) */
.hkn-f{margin:0;grid-column:2}
.hkn-im{height:440px}
.pgal{padding:0 var(--m)}
.pgal-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.pgal-g figure{margin:0}
.pgal-im{height:340px}
@container (max-width:1279px){.mv .hkn-f{grid-column:1}.mv .hkn-im{height:260px}.mv .pgal-g{grid-template-columns:1fr}.mv .pgal-im{height:240px}}
/* global 360 entry (outside the locked RC22 chrome; opposite corner to the Orabi button) */
.v360{box-sizing:border-box;position:absolute;z-index:8;inset-inline-start:24px;bottom:82px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;background:#0C1A1B;color:#EFEFEC;font-size:14px;font-weight:500;line-height:1;text-decoration:none;box-shadow:0 10px 28px -18px rgba(12,26,27,.55),0 0 0 1px rgba(239,239,236,.35)}
.v360 svg{width:20px;height:20px;flex:none}
.v360:hover{background:#00625E}
.v360:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #0C1A1B}
.ofab.flip~.v360{display:none}
@media (max-width:767px){.proto .v360{inset-inline-start:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));padding:0 14px}}
/* contextual 360 module on service / sector / style pages */
.v360-ctx{padding:0 var(--m);margin:28px 0}
.v360-ctx a{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:center;color:#0C1A1B;text-decoration:none;background:#fff;box-shadow:0 0 0 1px #C9CCC9;min-height:44px}
.v360-ctx a:hover{box-shadow:0 0 0 2px #00625E}
.v360-ctx a:focus-visible{outline:3px solid #0C1A1B;outline-offset:2px}
.v360-ctx-im{height:112px}
.v360-ctx span small{display:block;font-size:12px;color:#00625E;font-weight:500}
.v360-ctx span b{display:block;font-size:20px;font-weight:500;margin:2px 0}
.v360-ctx span span{font-size:14px;color:#5E6664}
@container (max-width:1279px){.mv .v360-ctx{padding:0 var(--m)}.mv .v360-ctx a{grid-template-columns:120px minmax(0,1fr);gap:14px}.mv .v360-ctx-im{height:96px}}
/* 360 gallery hub */
.tg{padding:24px var(--m) 64px;background:#EFEFEC}
.tg-h{max-width:52em;margin-bottom:28px}
.tg-h h1{font-size:56px;font-weight:300;line-height:1.2}
.tg-h .lead{font-size:17px;line-height:1.85;margin-top:14px}
.tg-d{font-size:14px;color:#5E6664;margin-top:10px}
.tg-f{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.tg-f a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:#fff;color:#0C1A1B;text-decoration:none;font-size:14px;box-shadow:0 0 0 1px #C9CCC9}
.tg-f a[aria-current="true"]{background:#0C1A1B;color:#EFEFEC}
.tg-f a:focus-visible,.tg-c a:focus-visible,.tv-start:focus-visible,.tv-close:focus-visible{outline:3px solid #0C1A1B;outline-offset:2px}
.tg-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.tg-c a{display:block;color:#0C1A1B;text-decoration:none;background:#fff;box-shadow:0 0 0 1px #C9CCC9}
.tg-c a:hover{box-shadow:0 0 0 2px #00625E}
.tg-im{aspect-ratio:16/9;height:auto}
.tg-b{display:grid;gap:6px;padding:18px 20px 22px}
.tg-b b{font-size:22px;font-weight:500}
.tg-b span{font-size:14px;color:#5E6664;line-height:1.7}
.tg-go{font-style:normal;font-size:14px;color:#00625E;font-weight:500}
@container (max-width:1279px){.mv .tg-g{grid-template-columns:1fr}.mv .tg-h h1{font-size:36px}}
/* 360 scene page */
.tv{padding:24px var(--m) 24px;background:#EFEFEC}
.tv-h{max-width:52em;margin-bottom:20px}
.tv-h h1{font-size:48px;font-weight:300;line-height:1.2}
.tv-h .kick{font-size:14px;color:#00625E;font-weight:500;margin-bottom:8px}
.tv-h .lead{font-size:17px;line-height:1.85;margin-top:12px}
.tv-stage{position:relative;aspect-ratio:16/9;width:100%;background:#0C1A1B;overflow:hidden}
.tv-stage .tv-poster{position:absolute;inset:0;height:100%}
.tv-ov{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(0deg,rgba(12,26,27,.55),rgba(12,26,27,.15))}
.tv-start{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 28px;background:#00625E;color:#fff;font-size:17px;font-weight:500;cursor:pointer;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.tv-start:hover{background:#004A47}
.tv-pano{position:absolute;inset:0}
.tv-stage[data-state="live"] .tv-poster,.tv-stage[data-state="live"] .tv-ov{display:none}
.tv-stage[data-state="loading"] .tv-start{opacity:.7}
.tv-msg{position:absolute;inset-inline:0;bottom:0;margin:0;padding:12px 16px;background:#0C1A1B;color:#EFEFEC;font-size:14px;text-align:center}
.tv-close{all:unset;box-sizing:border-box;position:absolute;z-index:5;top:12px;inset-inline-end:12px;min-width:44px;min-height:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;background:#0C1A1B;color:#EFEFEC;font-size:14px;cursor:pointer;box-shadow:0 0 0 1px rgba(239,239,236,.4)}
.tv-help,.tv-note{font-size:14px;color:#5E6664;margin:12px 0 0}
.tv-disc{font-size:14px;color:#5E6664}
.tv-tags{list-style:none;margin:14px 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tv-tags a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;background:#fff;color:#0C1A1B;text-decoration:none;font-size:14px;box-shadow:0 0 0 1px #C9CCC9}
.tv-tags small{color:#00625E;margin-inline-end:6px}
.tv-ml{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tv-ml a{display:inline-flex;align-items:center;min-height:44px;color:#0C1A1B}
.tv-about,.tv-more{padding-inline:var(--m)}
@container (max-width:1279px){.mv .tv-stage{aspect-ratio:4/5;max-height:78svh}.mv .tv-h h1{font-size:34px}}
@media (prefers-reduced-motion:reduce){.tv-start,.im .vid-v{transition:none}}
/* the vendored viewer's own controls use the site typeface (its stylesheet ships Helvetica) */
.tv-stage .pnlm-container,.tv-stage .pnlm-container *{font-family:Alexandria,system-ui,sans-serif}
/* viewer chrome inside the stage: keep Pannellum's own controls above our overlay and readable */
.tv-stage .pnlm-container{background:#0C1A1B}