/* VR Decorations — Round 02 (Owner visual review 01, 2026-10-07). Additive to site.css / visuals.css (the RC22 baseline files are untouched).
   One proportion system for header + media (replaces per-image tweaks), the governed child navigation, tonal tiles for slots without their own visual.
   CSP: external file, no inline. Bands follow the site's own container widths: desktop ≥1280 · tablet 768–1279 · mobile ≤767. */

/* ---------- 1. proportion tokens (one place; every media role below reads from here) ---------- */
@container (min-width:1280px){.vp>*{
  --r2-hd:64px;
  --r2-hero-home:500px;--r2-hero-sv:400px;--r2-hero-sc:300px;--r2-hero-st:380px;--r2-hero-pj:340px;--r2-hero-ar:340px;
  --r2-sec:340px;--r2-sec-s:260px;--r2-wide:360px;--r2-card:220px;--r2-card-w:300px;--r2-stage:580px}}
@container (min-width:768px) and (max-width:1279px){.vp>*{
  --r2-hd:64px;
  --r2-hero-home:340px;--r2-hero-sv:320px;--r2-hero-sc:240px;--r2-hero-st:300px;--r2-hero-pj:260px;--r2-hero-ar:240px;
  --r2-sec:260px;--r2-sec-s:210px;--r2-wide:260px;--r2-card:180px;--r2-card-w:230px;--r2-stage:500px}}
@container (max-width:767px){.vp>*{
  --r2-hd:64px;
  --r2-hero-home:200px;--r2-hero-sv:190px;--r2-hero-sc:170px;--r2-hero-st:190px;--r2-hero-pj:190px;--r2-hero-ar:180px;
  --r2-sec:190px;--r2-sec-s:170px;--r2-wide:180px;--r2-card:150px;--r2-card-w:170px;--r2-stage:440px}}

/* ---------- 2. compact header ---------- */
/* staging note: a slim strip (staging only) */
.stg-note{padding:3px 12px;font-size:.75rem;line-height:1.5}
/* desktop (Top Bar D): one 64px row — logo · navigation · tools · CTA */
@container (min-width:1280px){
  .vp.cP .tp,.vp.cP .tp.nodv{grid-template-rows:var(--r2-hd);height:var(--r2-hd)}
  .vp.cP .tp .tp-l,.vp.cP .tp .tp-n,.vp.cP .tp .tp-c,.vp.cP .tp.nodv .tp-t{grid-row:1}
  .vp.cP .tp .tp-l{padding-inline:28px 24px}
  .vp.cP .tp .tp-l .lg-ar-fc{width:170px!important;height:60px!important}
  .vp.cP .tp .tp-l .lg-en-fc{width:230px!important;height:60px!important}
  .vp.cP .tp .tp-c{grid-template-columns:auto 56px}
  .vp.cP .tp .tp-c b{padding-inline:22px;font-size:15px}
  .vp.cP .tp.tp-scroll .tp-c,.vp.cP .tp.nodv.tp-scroll .tp-c{grid-template-columns:auto 56px}
  .vp.cP .tp.tp-scroll{grid-template-rows:var(--r2-hd)}
  .vp.cP .tp .tp-n .ni{font-size:14.5px}
  .vp.cP .tp.nodv .tp-t{padding-inline:4px 12px}
}
/* tablet header (.tbh) */
@container (min-width:768px) and (max-width:1279px){
  .vp .tbh{height:var(--r2-hd);min-height:var(--r2-hd);padding-block:0}
  .vp .tbh .lg-ar-fc{width:170px!important;height:60px!important}
  .vp .tbh .lg-en-fc{width:230px!important;height:60px!important}
  .vp .tbh .scta{height:44px;min-height:44px}
  .vp .tbh .tbh-m{min-height:44px}
}
/* mobile header (.mh) */
@container (max-width:767px){
  .vp .mh,.proto-ov .mh{height:var(--r2-hd)}
  .vp .mh .lg-ar-fc,.proto-ov .mh .lg-ar-fc{width:160px!important;height:56px!important}
  .vp .mh .lg-en-fc,.proto-ov .mh .lg-en-fc{width:207px!important;height:54px!important}
}

/* ---------- 3. child navigation: desktop dropdown ---------- */
.proto .tp-n .nx{all:unset;box-sizing:border-box;flex:none;display:flex;align-items:center;justify-content:center;width:24px;margin-inline:-6px 4px;cursor:pointer;color:inherit;position:relative;z-index:2}
.proto .tp-n .nx:hover{color:#00625E}
.proto .tp-n .nx:focus-visible{outline:3px solid #0C1A1B;outline-offset:-3px}
.proto .tp-n .nx[aria-expanded="true"] .cv{transform:rotate(180deg)}
.proto .tp-n .ni-x[aria-expanded="true"] .cv{transform:rotate(180deg)}
.nxp{position:absolute;inset-inline:0;top:100%;z-index:31;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:32px;padding:24px var(--m) 28px;background:#fff;color:#0C1A1B;border-top:1px solid #E3E5E3;box-shadow:0 10px 28px -18px rgba(12,26,27,.28)}
.nxp-a{display:grid;align-content:start;gap:14px;justify-items:start}
.nxp-a .kick{margin:0}
.nxp-l{list-style:none;margin:0;padding:0;columns:3;column-gap:32px}
.nxp-l li{break-inside:avoid}
.nxp-l a{display:flex;align-items:baseline;gap:10px;min-height:40px;padding:6px 0;color:inherit;text-decoration:none}
.nxp-l small{font-size:12px;color:#5E6664;font-variant-numeric:tabular-nums}
.nxp-l b{font-size:16px;font-weight:400}
.nxp-l a:hover b{text-decoration:underline;text-underline-offset:4px}
.nxp-l a[aria-current="page"] b{color:#00625E;font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.nxp a:focus-visible{outline:3px solid #0C1A1B;outline-offset:2px}
@container (min-width:1280px) and (max-width:1439px){
  .vp.cP .tp .tp-n .ni{padding-inline:8px}
  .vp.cP .tp .tp-n .ni small{display:none}
  .vp.cP .tp .tp-l{padding-inline:20px 16px}
  .vp.cP .tp .tp-c b{padding-inline:16px}
}

/* ---------- 4. child navigation: menu (tablet / mobile) ---------- */
.pmm li.pmm-p{flex-wrap:wrap;align-items:center;padding-block:0}
.pmm-p>a{flex:1 1 0;min-width:0;display:flex;align-items:baseline;gap:12px;padding-block:13px;min-height:52px;color:inherit;text-decoration:none}
.pmm-d{all:unset;box-sizing:border-box;flex:none;width:52px;min-height:52px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#5E6664}
.pmm-d .cv{width:14px;height:14px;transition:transform .2s}
.pmm-d[aria-expanded="true"] .cv{transform:rotate(180deg)}
.pmm-d:focus-visible,.pmm-c a:focus-visible,.pmm-p>a:focus-visible{outline:3px solid #0C1A1B;outline-offset:-3px}
.pmm-c{flex:0 0 100%;list-style:none;margin:0;padding:0 0 8px;display:grid}
.pmm-c[hidden]{display:none}
.pmm .pmm-c li{display:block;padding:0;font-size:16px;border:0}
.pmm-c a{display:flex;align-items:center;min-height:44px;padding-inline:30px 8px;color:#5E6664;text-decoration:none;font-size:16px}
.pmm-c a[aria-current="page"]{color:#00625E;font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
@media (prefers-reduced-motion:reduce){.pmm-d .cv{transition:none}}

/* ---------- 5. media proportions (one rule per role; desktop → tablet → mobile via the tokens) ---------- */
/* home hero: the image no longer runs the whole viewport; the card inset repeated a picture and is retired */
.vp .aph{height:auto!important;min-height:0!important;padding-bottom:40px}
.vp .aph .ph-f{height:var(--r2-hero-home)!important;margin-top:0}
.vp .ph-card{display:none!important}
.vp .aph .ph-seq{margin-top:28px}
.vp .mph-f{height:var(--r2-hero-home)!important}
@container (min-width:768px) and (max-width:900px){.vp .aph .ph-f{height:var(--r2-hero-home)!important}}
/* service · sector · style · design study · article heroes */
.vp .hsv-im,.vp .mhsv-im{height:var(--r2-hero-sv)!important}
.vp .hsc-band,.vp .mhsc-band{height:var(--r2-hero-sc)!important}
.vp .sdh-im{height:var(--r2-hero-st)!important;aspect-ratio:auto!important}
.vp .hkn-im{height:var(--r2-hero-pj)!important}
.vp .hart-im{height:var(--r2-hero-ar)!important}
/* section images, cards, galleries */
.vp .gabs-im,.vp .gexp-im,.vp .gkf-im{height:var(--r2-sec)!important}
.vp .gneed-p .im,.vp .gneed-p>.im{height:var(--r2-sec)!important}
.vp .ghp-im{height:var(--r2-sec-s)!important}
.vp .gkn-fi{height:var(--r2-sec-s)!important}
.vp .pgal-im{height:var(--r2-sec-s)!important}
.vp .pr-a,.vp .pr-b,.vp .pvd-p .im,.vp .pvd-p>.im{height:var(--r2-wide)!important}
.vp .gst-bi{height:var(--r2-wide)!important}
.vp .gst-si{height:var(--r2-sec-s)!important}
.vp .gpr-im{height:var(--r2-sec)!important}
.vp .gsr-im{height:var(--r2-card)!important}
.vp .sxi-f .sxi-im,.vp .sxi-f.w .sxi-im{aspect-ratio:4/3!important;height:auto!important}
.vp .sxs-im{aspect-ratio:16/9!important}
/* 360 */
.tv-stage{aspect-ratio:auto!important;height:var(--r2-stage);max-height:72svh}
.tg-im{aspect-ratio:16/10}
/* 360 pointer on service / sector / style pages: text only (a tour's poster belongs to the tour) */
.v360-ctx a{grid-template-columns:auto minmax(0,1fr)!important;gap:16px;padding:12px 18px}
.v360-ctx svg{width:30px;height:30px;color:#00625E;flex:none}
.v360-ctx-im{display:none}

/* ---------- 6. tonal tile: a slot without its own approved visual (never a repeated picture) ---------- */
.im.im-tone{background:color-mix(in srgb,#00625E 12%,#EFEFEC);overflow:hidden}
.im.im-tone .bg.s-tone{background:linear-gradient(60deg,rgba(0,98,94,.10) 0 38%,transparent 38% 100%),linear-gradient(180deg,color-mix(in srgb,#00625E 12%,#EFEFEC),color-mix(in srgb,#00625E 20%,#EFEFEC))}
.im.im-tone::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:36%;height:3px;background:rgba(0,98,94,.35)}

/* ---------- 7. staging review marks (never rendered on production) ---------- */
.im .lbl-s{position:absolute;z-index:3;top:12px;right:12px;left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:calc(100% - 24px)}
.im .lbl-s .lbl-p,.im .lbl-s .lbl-x{position:static;inset:auto;background:#8A5A00;color:#fff;font-size:12px;line-height:1.5;padding:2px 8px;letter-spacing:.02em}
.pvd .im.im-tone .bg.s-tone{background:linear-gradient(60deg,rgba(255,255,255,.05) 0 38%,transparent 38% 100%),linear-gradient(180deg,color-mix(in srgb,#00625E 22%,#0C1A1B),color-mix(in srgb,#00625E 10%,#0C1A1B))}
.pvd .im.im-tone::after{background:rgba(255,255,255,.28)}

/* ---------- 8. remaining roles (found in the page-family audit) ---------- */
.vp .svA>figure>.im,.vp .svA figure .im{height:var(--r2-sec)!important}
.tg-im{aspect-ratio:auto;height:var(--r2-sec)}
.vp .sxi-f.w .sxi-im{aspect-ratio:16/10!important}
.tg-ref{margin:12px 0 0;padding:8px 12px;max-width:52em;background:color-mix(in srgb,#8A5A00 10%,#EFEFEC);color:#0C1A1B;font-size:13px;line-height:1.6;border-inline-start:3px solid #8A5A00}

/* disclosure chevrons never shrink below the 24 px target size (WCAG 2.5.8), the RC22 Design Styles one included */
.proto .tp-n .ni-x,.proto .tp-n .nx{flex:none;min-width:24px}
@container (min-width:1280px){.vp.cP .tp:lang(en) .tp-l{padding-inline:20px 16px}.vp.cP .tp:lang(en) .tp-l .lg-en-fc{width:224px!important;height:58px!important}}

/* ---------- 9. footer: no reserved blank band; group-companies strip ends the page (Owner round 02) ---------- */
/* root cause of the blank area: the RC22 prototype shell reserved 96 px (72 px on phones) under the footer for its floating controls; the controls dock around content on their own */
.proto.vp.vp{padding-bottom:0}
@media (min-width:768px){.proto.vp.vp{padding-bottom:0}}
.cmp{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:0 18px;height:52px;padding:0 var(--m);background:color-mix(in srgb,#00625E 8%,#EFEFEC);border-top:1px solid color-mix(in srgb,#00625E 22%,#EFEFEC);color:#0C1A1B;white-space:nowrap}
.cmp-360{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-inline:6px 18px;color:#0C1A1B;text-decoration:none;font-size:14px;font-weight:500;border-inline-end:1px solid color-mix(in srgb,#00625E 28%,#EFEFEC)}
.cmp-360 svg{width:24px;height:24px;flex:none;color:#00625E}
.cmp-360 .cmp-t{font-variant-numeric:tabular-nums}
.cmp-360:hover .cmp-tx{text-decoration:underline;text-underline-offset:4px}
.cmp-360:focus-visible,.cmp-g a:focus-visible{outline:3px solid #0C1A1B;outline-offset:2px}
.cmp-co{display:flex;align-items:center;gap:0 16px;margin:0}
.cmp-l{flex:none;margin:0;padding:0;font-size:13px;font-weight:500;line-height:1.4;color:#5E6664}
.cmp-g{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:0 18px}
.cmp-g li{margin:0;padding:0}
.cmp-g a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:4px}
.cmp-g img{display:block;height:30px;width:auto}
.cmp-g .cmp-eq img{height:27px}
.cmp-g a:hover img{opacity:.8}
@container (max-width:767px){.cmp{gap:0 10px;padding:0 12px;height:52px}.cmp-360{padding-inline:2px 10px;gap:5px}.cmp-360 .cmp-tx{display:none}.cmp-co{gap:0 8px}.cmp-l{font-size:12px}.cmp-g{gap:0 8px}.cmp-g img{height:24px}.cmp-g .cmp-eq img{height:22px}}

/* ---------- 10. 360 project tour (Owner round 02): stage + room label + bar + rail + plan + facts ---------- */
.tvp{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
.tvp-main{min-width:0}
.tvp-side{display:grid;gap:20px;min-width:0}
@container (max-width:1279px){.mv .tvp{grid-template-columns:1fr}}
.tv-room{position:absolute;z-index:4;inset-block-start:12px;inset-inline-start:12px;margin:0;display:flex;align-items:baseline;gap:8px;padding:6px 12px;background:rgba(12,26,27,.82);color:#EFEFEC;font-size:14px;line-height:1.4;max-width:calc(100% - 140px)}
.tv-room small{font-size:12px;opacity:.85}.tv-room b{font-weight:500}.tv-room i{font-style:normal;font-size:12px;font-variant-numeric:tabular-nums;opacity:.85}
.tv-bar{position:absolute;z-index:4;inset-inline:12px;inset-block-end:12px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;pointer-events:none}
.tv-bar button{all:unset;box-sizing:border-box;pointer-events:auto;min-height:44px;min-width:44px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;background:rgba(12,26,27,.88);color:#EFEFEC;font-size:14px;font-weight:500;cursor:pointer}
.tv-bar button:hover:not(:disabled){background:#00625E}
.tv-bar button:disabled{opacity:.45;cursor:default}
.tv-bar button:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #0C1A1B}
.tv-stage[data-state="idle"] .tv-bar{display:none}
.tv-stage:fullscreen{max-height:none;height:100%;aspect-ratio:auto}
.tv-rail ol{list-style:none;margin:12px 0 0;padding:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin}
.tv-rail a{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;white-space:nowrap;background:#fff;color:#0C1A1B;text-decoration:none;font-size:14px;box-shadow:0 0 0 1px #C9CCC9}
.tv-rail a small{font-size:12px;color:#00625E;font-variant-numeric:tabular-nums}
.tv-rail a[aria-current="true"]{background:#0C1A1B;color:#EFEFEC;box-shadow:none}
.tv-rail a[aria-current="true"] small{color:#EFEFEC}
.tv-rail a:focus-visible{outline:3px solid #0C1A1B;outline-offset:2px}
.tv-plan{margin:0;padding:12px;background:#fff;box-shadow:0 0 0 1px #C9CCC9}
.tv-plansvg{display:block;width:100%;height:auto}
.tv-plansvg .p-r rect{fill:color-mix(in srgb,#00625E 6%,#fff);stroke:#5E6664;stroke-width:1.5}
.tv-plansvg .p-r.on rect{fill:color-mix(in srgb,#00625E 22%,#fff);stroke:#00625E;stroke-width:2.5}
.tv-plansvg text{font-size:10px;fill:#0C1A1B;font-family:Alexandria,system-ui,sans-serif}
.tv-plansvg .p-me{display:none}.tv-plansvg .p-me.on{display:inline}
.tv-plansvg .p-me circle{fill:#00625E}.tv-plansvg .p-cone{fill:rgba(0,98,94,.35)}
.tv-plan figcaption{margin-top:6px;font-size:12px;color:#5E6664}
.tv-facts h2{font-size:18px;font-weight:500;margin:0 0 8px}
.tv-facts p{font-size:14px;line-height:1.8;margin:0 0 8px}
.tg-n{display:inline-block;font-style:normal;font-size:12px;color:#00625E;font-weight:500}
/* hotspots: 44 px targets with a visible label (touch has no hover) */
.pnlm-hotspot-base.vrd-hs{width:44px!important;height:44px!important;margin:-22px 0 0 -22px!important;background-size:contain!important;border-radius:50%;background-color:rgba(12,26,27,.55)!important;outline:2px solid #fff}
.pnlm-hotspot-base.vrd-hs span{visibility:visible!important;display:block;position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;width:auto!important;max-width:200px;padding:4px 10px;background:rgba(12,26,27,.9);color:#EFEFEC;font:500 13px/1.4 Alexandria,system-ui,sans-serif;white-space:nowrap;border-radius:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.tv-bar button{transition:none}}
.tv-plansvg .p-r.off rect{fill:transparent;stroke-dasharray:4 3;stroke:#5E6664}
.tv-plansvg .p-r.off text{fill:#5E6664}
/* the panorama is geometry: it never mirrors with the page direction (RTL pages otherwise anchor absolutely positioned hotspots at the wrong edge); labels keep their own text direction */
.tv-stage .pnlm-container{direction:ltr}
.pnlm-hotspot-base.vrd-hs span{unicode-bidi:plaintext;transform:translateX(calc(-50% + var(--lx,0px)))}
.pnlm-hotspot-base.vrd-hs.lb-up span{top:auto;bottom:100%;margin-top:0;margin-bottom:6px}
.pnlm-hotspot-base.vrd-hs.lb-off span{visibility:hidden!important}
/* the project page owns the room label and the zoom controls: hide the viewer's own scene caption, keep its zoom buttons at the bottom end */
.tv-project .tv-stage .pnlm-panorama-info{display:none!important}
.tv-plansvg text{font-size:9px}
.tv-project .tv-stage .pnlm-title-box,.tv-project .tv-stage .pnlm-controls-container{display:none!important}

/* ---------- 11. the global 360 entry lives in the page-end strip (Owner round 02); the floating pill is retired ---------- */
.v360{display:none!important}
/* staging review chips sit below the room label in the tour stage */
.tv-project .tv-stage .lbl-s{top:56px}

/* Core Media Batch A (Homepage): the video band has no published video yet (V3 reserved) — no fake play affordance until one is bound */
.pvd-p:not(:has([data-vid])) .vd-b{display:none}

/* Safari remediation 2026-10-08 — dock safe-area: compact variant used only when the dock must rest on a large picture (accessible name unchanged) */
.proto .ofab.dk-c{padding:0;width:44px;min-height:44px;justify-content:center}
.proto .ofab.dk-c>b{flex-direction:column;gap:3px;font-size:13px;line-height:1;font-weight:600}
.proto .ofab.dk-c>b .orb-d{margin:0}
.proto .ofab.dk-c .orv{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.proto .hb.dk-c .hb-b{padding:0;width:44px;height:44px;justify-content:center;font-size:0;gap:0}
.proto .hb.dk-c .hb-b svg{width:22px;height:22px}
/* desktop: the footer keeps a reserved lane for the dock (tablet/mobile already reserve 110 px in RC22) */
@container (min-width:1280px){.vp .ft{padding-bottom:104px}}

/* Safari remediation 2026-10-08 — plan ⇄ visualisation comparison is now a real control (the RC22 divider was a static drawing: no handler existed).
   --pr = the divider's physical position from the left edge; the RC22 clip polygons are re-expressed with it (50 % = the approved resting state). */
.prA .pr-s{--pr:50%;touch-action:pan-y;cursor:ew-resize;-webkit-user-select:none;user-select:none}
.prA .pr-b{clip-path:polygon(var(--pr) 0,100% 0,100% 100%,var(--pr) 100%)}
.vp[dir=rtl] .prA .pr-b{clip-path:polygon(0 0,var(--pr) 0,var(--pr) 100%,0 100%)}
.prA .pr-h{left:var(--pr);width:44px;margin-left:-22px;background:none;z-index:4;cursor:ew-resize;touch-action:none}
.prA .pr-h::before{content:"";position:absolute;top:0;bottom:0;left:21px;width:2px;background:#fff}
.prA .pr-h::after{left:0;margin-top:-22px}
.prA .pr-h:focus-visible{outline:none}
.prA .pr-h:focus-visible::after{outline:3px solid #0C1A1B;outline-offset:2px;box-shadow:0 0 0 6px #fff}
.prA .pr-s.is-dragging{cursor:grabbing}
.prA .pr-s.is-anim .pr-b,.prA .pr-s.is-anim .pr-h{transition:clip-path .28s ease,left .28s ease}
@media (prefers-reduced-motion:reduce){.prA .pr-s.is-anim .pr-b,.prA .pr-s.is-anim .pr-h{transition:none}}
.pr-n{margin:10px 0 0;font-size:13px;line-height:1.7;color:#5E6664;max-width:68ch}

/* video band: user-initiated play button (same look as the RC22 play affordance) — the video is shown only after the visitor presses play */
.im .vid-play{all:unset;box-sizing:border-box;position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;background:#EFEFEC;color:#0C1A1B;font:500 15px/1 Alexandria,system-ui,sans-serif;cursor:pointer}
.im .vid-play[hidden]{display:none}
.im .vid-play svg{width:22px;height:22px}
.im .vid-play:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #0C1A1B}
.im[data-vtap] .vid-v{object-fit:cover}
.im[data-vtap].is-playing .vid-v{opacity:1}
.im[data-vtap] .vid-st{position:absolute;z-index:3;inset-inline:12px;bottom:12px;padding:6px 10px;background:rgba(12,26,27,.9);color:#EFEFEC;font-size:13px}
.im[data-vtap] .vid-st:empty{display:none}
@media (prefers-reduced-motion:reduce){.im[data-vtap] .vid-v{display:block}}   /* a film the visitor started is not auto-motion */
.vp .prA .pr-s{height:var(--r2-wide)}   /* the strip is exactly as tall as its two pictures (it was 520 px for 360 px of picture: dead space and an over-long divider) */
.prA .pr-s img{-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none;pointer-events:none}   /* a mouse drag must move the divider, never start the browser's native image drag (it cancels the pointer stream) */

/* 360 page, tablet/mobile: the mini-plan keeps a 56 px lane on its inline-end side, so the (compact) dock can rest beside it instead of on it — a lane on this one block, not page padding */
@container (max-width:1279px){.vp .tv-plan{margin-inline-end:56px}}

/* Core Media B–F — template boxes that did not exist: hero beside the title (`hkn-im`), gallery section (`vgal`) */
.vp .vgal{padding:48px var(--m,64px) 16px}
.vgal-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vgal-g figure{margin:0;min-width:0}
.vp .vgal-im{aspect-ratio:3/2;height:auto!important}
@container (max-width:1279px){.mv .vgal-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:767px){.vp .vgal{padding:32px 20px}.mv .vgal-g{grid-template-columns:1fr}}

/* Core Media G — film section on service pages (poster first, user-initiated) */
.vp .vfilm{padding:48px var(--m,64px) 16px}
.vfilm-b{max-width:960px}
.vp .vfilm-im{aspect-ratio:16/9;height:auto!important}
@container (max-width:767px){.vp .vfilm{padding:32px 20px}}

/* SEO-04 (Supervisor Report 02): the mobile hero variants use <p class="h1m" role="heading" aria-level="1"> so the document carries one <h1>; these mirror the RC22 `.mph|.mhsv|.mhsc h1` rules */
.proto .h1m{overflow-wrap:anywhere;min-width:0}
.mph .h1m{font-size:36px;font-weight:300;line-height:1.3}
.mph .h1m:lang(en){line-height:1.12}
.mhsv .h1m{font-size:38px;font-weight:300;line-height:1.25}
.mhsc .h1m{font-size:32px;font-weight:300;line-height:1.3}
.vp .mph .h1m+.h1b{margin-top:14px}
.vp .mhsv .h1m+.lead,.vp .mhsc .h1m+.lead{margin-top:16px}
/* C-04 (Supervisor Report 02): the hero's space-type labels are inert captions (the real explorer is further down) — they must not look like a selected tab or a control */
figcaption.gtabs span.gtab,.gtabs.m span.gtab{cursor:default;pointer-events:none}
figcaption.gtabs span.gtab.on,.gtabs.m span.gtab.on{box-shadow:none;color:#5E6664;font-weight:400}

/* Projects hub filters (Gate 03 §7): server-rendered chips, ≥ 44 px targets, no script */
.pflt{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0 0 28px}
.pflt-g{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pflt-g b{font-weight:500;color:#5E6664;margin-inline-end:4px}
.pflt-g a{display:inline-flex;align-items:center;min-height:44px;padding-inline:14px;border:1px solid #c9ccc9;border-radius:22px;color:#0C1A1B;text-decoration:none;font-size:15px}
.pflt-g a.on{background:#00625E;border-color:#00625E;color:#fff}
.pflt-e{margin:0 0 28px;color:#5E6664}
/* Design studies: a gallery of exactly three pictures sits in three columns on wide screens (no lonely last cell) */
@container (min-width:1280px){.mv .pgal-g:has(> figure:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Final review P3 (2026-10-09): the «Design styles» row of the mobile menu keeps its chevron in the SAME 52 px column as the other rows (it was sitting next to its label). */
.pmm-sti .pmm-x{align-items:center;min-height:52px;padding-block:0}
.pmm-sti .pmm-x svg{flex:none;width:14px;height:14px;margin-inline-start:auto;margin-inline-end:19px;color:#5E6664}
/* Orabi conversation UI (2026-10-09): log + quick choices + input; the panel itself does not scroll, the log does. Tokens only (#00625E / #0C1A1B / #EFEFEC / #5E6664). */
#ov .adwrap .ad-p.orb-chat{overflow:hidden}
.orb-chat .orb-log{flex:1 1 auto;min-height:96px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding:8px 20px}
.orb-chat .orb-log:focus-visible{outline:3px solid #0C1A1B;outline-offset:-3px}
.orb-m{margin:0;padding:10px 14px;font-size:15px;line-height:1.7;max-width:94%;white-space:pre-line;overflow-wrap:anywhere}
.orb-bot{background:#EFEFEC;color:#0C1A1B;align-self:flex-start}
.orb-user{background:#00625E;color:#fff;align-self:flex-end}
.orb-draft{display:inline;font-size:12px;color:#5E6664}
.orb-ref{font-weight:600;white-space:nowrap}
.orb-acts,.orb-qc{display:flex;flex-wrap:wrap;gap:8px}
.orb-act{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid #00625E;color:#00625E;text-decoration:none;font-size:14px;background:#fff}
.orb-act:focus-visible,.orb-chat .chip:focus-visible,.orb-send:focus-visible,.orb-reset:focus-visible{outline:3px solid #0C1A1B;outline-offset:2px}
.orb-chat .chips{flex:0 0 auto;max-height:34%;overflow-y:auto;padding-block:8px}
.orb-qc .chip,.orb-chat .chips .chip{font:inherit;font-size:14px;background:#fff;color:#0C1A1B;cursor:pointer}
.orb-qc{padding-block:2px}
.orb-form{flex:0 0 auto;display:flex;gap:8px;padding:8px 20px;border-top:1px solid #C9CCC9;background:#fff}
.orb-in{flex:1 1 auto;min-width:0;min-height:44px;padding:0 12px;border:1px solid #5E6664;font:inherit;font-size:16px;color:#0C1A1B;background:#fff}
.orb-in:focus-visible{outline:3px solid #0C1A1B;outline-offset:1px}
.orb-send{flex:none;min-height:44px;padding:0 18px;border:0;background:#00625E;color:#fff;font:inherit;font-size:15px;cursor:pointer}
.orb-send:disabled{opacity:.55;cursor:default}
.orb-hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.orb-pv{margin:0;padding:4px 20px;font-size:12px;color:#8A5A00;background:#FBF3E0}
.orb-chat .ad-bd{padding-block:4px;font-size:13px}
.orb-chat .ad-n{padding-block:6px;margin-top:0;font-size:12px!important;line-height:1.5}
.orb-reset{all:unset;cursor:pointer;color:#00625E;text-decoration:underline;min-height:24px}
.orb-chat .ad-r:empty{display:none}
@media (max-width:480px){.orb-chat .orb-log{padding-inline:14px}.orb-form{padding-inline:14px}.orb-chat .chips{padding-inline:14px}.orb-m{max-width:100%}}
@media (prefers-reduced-motion:no-preference){.orb-log{scroll-behavior:smooth}}
#ov .adwrap:has(.orb-chat){height:min(640px,calc(100dvh - 96px))}
.orb-chat.orb-started .chips{display:none}   /* the starter choices are only for an empty chat; later choices come with each reply */
.orb-chat .orb-pv{padding-block:3px;font-size:12px}
/* SAF-03 (Supervisor C12): on a dark band the Contact pill (dark fill) had no visible edge; a light hairline keeps the shape visible on every ground (invisible on light grounds). */
.hb .hb-b{box-shadow:0 0 0 1px rgba(239,239,236,.7)}

/* Slideshow remediation (G07-FC-C14): sector strip Prev/Next + position, service-hero slide tabs */
.gsr-nav{display:flex;align-items:center;gap:12px;padding:20px var(--m,64px) 0 0;justify-content:flex-end}
.mv .gsr-nav{padding-inline-end:20px}
.gsr-nav button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid #0C1A1B;background:transparent;color:#0C1A1B;cursor:pointer;font:inherit}
.gsr-nav button .ar{width:16px;height:16px}
.gsr-pv .ar{transform:rotate(180deg)}
:root[dir=rtl] .gsr-pv .ar{transform:none}
:root[dir=rtl] .gsr-nx .ar{transform:rotate(180deg)}
.gsr-nav button[aria-disabled=true]{opacity:.38;cursor:default}
.gsr-ct{min-width:4.5em;text-align:center;font-size:14px;color:#5E6664;font-variant-numeric:tabular-nums}
.hss .gtabs.hss-t{display:flex;flex-wrap:wrap;gap:6px;padding-top:14px}
.hss .gtab{background:none;border:0;font:inherit;font-size:15px;cursor:pointer}
.hss-m .gtabs.hss-t{padding-top:0}
.hss [role=tabpanel]{margin:0}

/* Owner 2026-10-10: the inert pause glyph is gone; the four stage labels share the row */
.ph-seq{grid-template-columns:repeat(4,1fr)}
/* C17 SEO16-03: the visual «Required» marker sits beside the step heading instead of inside the <h1> */
.sy-hw{display:flex;flex-wrap:wrap;align-items:baseline}

/* C18 — home hero stages: real photographic thumbnails, accessible active state, caption + illustrative note */
.hst .pl{background:none;border:0;padding:0;margin:0;font:inherit;font-size:13px;color:#5E6664;text-align:start;cursor:pointer;display:grid;gap:6px;align-content:start;min-height:44px}
.hst .pl .hst-th{display:block;height:64px;overflow:hidden;background:#D9DBD8;opacity:.62;transition:opacity .15s}
.hst .pl .hst-th picture,.hst .pl .hst-th img{display:block;width:100%;height:100%}
.hst .pl .hst-th img{object-fit:cover}
.hst .pl:hover .hst-th{opacity:.9}
.hst .pl.on{color:#0C1A1B;font-weight:500}
.hst .pl.on .hst-th{opacity:1;box-shadow:inset 0 -3px 0 #00625E;outline:2px solid #00625E;outline-offset:-2px}
.hst .pl:focus-visible{outline:3px solid #00625E;outline-offset:3px}
.hst-c{margin-top:16px;min-height:3.2em}
.hst-c p{margin:0;font-size:15px;line-height:1.55;max-width:46ch;color:#0C1A1B}
.hst-c b{font-weight:500;color:#00625E}
.hst-n{margin:8px 0 0;font-size:12px;color:#5E6664}
.hst-s [role=tabpanel]{margin:0}
.hst-s .ph-f>[role=tabpanel],.hst-s .mph-f>[role=tabpanel]{position:absolute;inset:0}
.hst-s .ph-f>[role=tabpanel] .im,.hst-s .mph-f>[role=tabpanel] .im{position:absolute;inset:0}
.mph-seq.hst .pl .hst-th{height:44px}
.mph-seq.hst .pl{font-size:12px}

/* Owner 2026-10-13 — phone bottom bar: four equal tabs (Orabi · WhatsApp · Call · Email), full width, icon over label, thin dividers, Orabi tab highlighted.
   Phones only (the container query matches the .v-m variants); replaces the floating Orabi button and the scroll-revealed menu bar there. Tablet/desktop keep the dock.
   Pages without a .mtab (Start Your Project) keep the existing dock — every rule is scoped with :has(.mtab). */
@container (max-width:767px){
  .vp:has(.mtab){padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .vp:has(.mtab) .mnB,.vp:has(.mtab) .oinv{display:none!important}
  .mtab{position:fixed;z-index:9;inset-inline:0;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:calc(64px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:#0C1A1B;box-sizing:border-box}
  .mtab>a{grid-column:span 1;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:44px;color:#fff;text-decoration:none;font-size:14px;font-weight:500;line-height:1;border-inline-start:1px solid rgba(255,255,255,.2)}
  .mtab>a:nth-child(1){grid-column:2}.mtab>a:nth-child(2){grid-column:3}.mtab>a:nth-child(3){grid-column:4}
  .mtab>a svg{width:24px;height:24px}
  .mtab>a b{font-weight:500}
  .mtab>a:focus-visible,.vp:has(.mtab) .ofab:focus-visible{outline:3px solid #fff;outline-offset:-5px}
  .vp:has(.mtab) .ofab{position:fixed!important;z-index:10;inset-block-start:auto!important;inset-block-end:0!important;inset-inline-start:0!important;inset-inline-end:auto!important;left:auto;right:auto;translate:none!important;transform:none!important;
    width:25%!important;height:calc(64px + env(safe-area-inset-bottom,0px))!important;min-height:44px!important;padding:0 0 env(safe-area-inset-bottom,0px)!important;margin:0!important;box-sizing:border-box;
    display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#00625E!important;color:#fff!important;border-radius:0;box-shadow:none!important;font-size:14px;font-weight:500;line-height:1;opacity:1;visibility:visible;pointer-events:auto}
  .vp:has(.mtab) .ofab::before{content:"";width:24px;height:24px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 5.5h14a1.5 1.5 0 0 1 1.5 1.5v8A1.5 1.5 0 0 1 19 16.5h-8l-4.5 3.5v-3.5H5A1.5 1.5 0 0 1 3.5 15V7A1.5 1.5 0 0 1 5 5.5z' fill='none' stroke='white' stroke-width='1.6' stroke-linejoin='round'/></svg>") center/contain no-repeat}
  .vp:has(.mtab) .ofab>b{display:block;flex-direction:row;gap:0;font-size:14px;font-weight:500;line-height:1}
  .vp:has(.mtab) .ofab .orb-d{display:none}
  .vp:has(.mtab) .ofab .orv{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vp:has(.mtab) .ofab.yield{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
}
@media (prefers-reduced-motion:reduce){.mtab,.ofab{transition:none!important}}
/* phone bottom bar: the Orabi dialog rests ABOVE the bar, never under it (the overlay container is outside #app, hence a media query) */
@media (max-width:767px){
  body:has(.mtab) #ov .adwrap:has(.orb-chat){bottom:calc(64px + env(safe-area-inset-bottom,0px) + 8px);height:min(640px,calc(100dvh - 96px - 64px - env(safe-area-inset-bottom,0px)))}
}