/* ISSLA RISK - /where-we-work/ only (minimal, one idea per screen). Loaded after archive.css + service.css (hero, strip, moments, FAQ, folder CTA, sticky bar).
   1. Globe layer: fixed full-viewport backdrop + canvas (globe.js) behind the content; CSS dotted disc as the no-JS / pre-init fallback.
   2. "Sky": hero, strip and the jurisdiction story ([data-story]: one region per screen, giant name, one country line, one benefit line,
      large photo on the opposite side; globe.js turns the planet to each region). Text sits on soft veils (contrast measured >= 4.5:1).
   3. "Ground": opaque paper sections below (focus emblems, access steps, FAQ, CTA).
   No loops in CSS; motion-paused / reduced motion handled by globe.js (one still frame) and the shared system. */

/* 1. Globe layer */
.gl { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(80rem 56rem at 68% 48%, #0b2c3d 0%, #061c27 52%, #03141d 100%); }
.gl__in { position: absolute; inset: 0; }
.gl__cv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.gl__body { /* sphere body + atmosphere, placed by globe.js with transform only (R = 500px * scale) */
  display: none; position: absolute; left: 0; top: 0; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; border-radius: 50%; transform-origin: 50% 50%; will-change: transform;
  background: radial-gradient(circle at 31% 29%, rgba(27, 81, 108, 0.42) 0%, rgba(13, 48, 66, 0.32) 52%, rgba(5, 24, 33, 0.5) 72%);
  box-shadow: 0 0 0 1px rgba(149, 184, 201, 0.16), 0 0 60px 8px rgba(93, 150, 178, 0.12), 0 0 160px 40px rgba(58, 114, 142, 0.06);
}
.gl.is-live .gl__body { display: block; }
.gl__disc {
  position: absolute; left: 67%; top: 55%; width: min(74vh, 60vw); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(184, 203, 213, 0.3) 0.9px, transparent 1.5px) 0 0 / 11px 11px,
    radial-gradient(circle at 32% 30%, rgba(27, 81, 108, 0.5), rgba(13, 48, 66, 0.35) 60%, rgba(5, 24, 33, 0.6));
  box-shadow: 0 0 0 1px rgba(149, 184, 201, 0.14), 0 0 90px 12px rgba(93, 150, 178, 0.1);
  transition: opacity 1400ms var(--ease-out);
}
.gl.is-live .gl__disc { opacity: 0; }
@media (max-width: 759.98px) { .gl__disc { left: 50%; top: 80%; width: 112vw; } }

/* 2. Sky: content over the globe */
.ww-sky { color: var(--on-dark); --focus: #e3c27a; --link-rest: rgba(246, 244, 238, 0.4); }
.ww-sky a:not(.btn) { color: var(--on-dark); }
.ww-sky .hs__title { color: var(--on-dark); }
.ww-sky .sv-intro { color: var(--on-dark-soft); }

.hero--globe { display: flex; align-items: center; min-height: calc(100svh - var(--header-h) - 2.8rem); background: transparent; }
.hero--globe .wrap { width: 100%; }
.hero--globe .hero__inner { max-width: 40rem; }
.hero--globe h1 { max-width: 38rem; }
.hero--globe .lede { max-width: 36rem; }
.hero--compact.hero--globe::before {
  background: linear-gradient(90deg, rgba(4, 17, 24, 0.92) 0%, rgba(4, 17, 24, 0.88) 45%, rgba(4, 17, 24, 0.55) 62%, rgba(4, 17, 24, 0.1) 80%, rgba(4, 17, 24, 0) 100%),
    radial-gradient(ellipse 75% 85% at 50% 48%, transparent 60%, rgba(1, 8, 11, 0.4) 100%);
}
@media (max-width: 760px) {
  .hero--globe { align-items: flex-start; }
  .hero--compact.hero--globe::before { background: linear-gradient(180deg, rgba(4, 17, 24, 0.9) 0%, rgba(4, 17, 24, 0.82) 62%, rgba(4, 17, 24, 0.3) 100%); }
}


/* Story: one region per screen; the globe (behind the text column) turns to it */
.ws { overflow-x: clip; padding-top: clamp(5rem, 3rem + 6vw, 9rem); }
.ws__head { position: relative; isolation: isolate; text-align: center; }
.ws__head::before, .wst__tx::before { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.ws__head::before { inset: -60% 10%; background: radial-gradient(closest-side, rgba(4, 17, 24, 0.88), rgba(4, 17, 24, 0.76) 60%, rgba(4, 17, 24, 0) 100%); }
.ws__title { margin: 0 auto var(--sp-3); font: 500 var(--fs-800) / 1.1 var(--font-serif); color: var(--on-dark); }
.ws__sub { margin: 0; color: var(--on-dark-soft); font-size: var(--fs-500); }
.ws__steps { margin: 0; padding: 0; list-style: none; }
.wst { display: flex; align-items: center; min-height: 80vh; padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.wst__in { display: grid; gap: var(--sp-6); align-items: center; }
.wst__tx { position: relative; isolation: isolate; }
.wst__tx::before { inset: -1.75rem -2.25rem; border-radius: 32px; background: rgba(4, 17, 24, 0.86); box-shadow: 0 0 48px 32px rgba(4, 17, 24, 0.55); } /* soft, feathered shade: the lit region shows beside the text, never under it at full strength */
.wst__name { margin: 0 0 var(--sp-4); font: 500 clamp(3rem, 1.6rem + 5vw, 6rem) / 1 var(--font-serif); letter-spacing: -0.02em; color: var(--on-dark); }
.wst__c { display: flex; flex-wrap: wrap; gap: 0.2rem 0; margin: 0 0 var(--sp-4); padding: 0; list-style: none; color: var(--on-dark); font-size: var(--fs-400); }
.wst__c li:not(:last-child)::after { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 0.6rem; border-radius: 50%; background: var(--brass); vertical-align: middle; }
.wst__b { margin: 0; max-width: 30rem; font: 500 var(--fs-600) / 1.35 var(--font-serif); color: #e6cd8e; text-wrap: balance; }
.wst__note { margin: var(--sp-3) 0 0; font-size: var(--fs-300); color: var(--on-dark-soft); }
.wst__ph { overflow: hidden; border-radius: 18px; aspect-ratio: 1024 / 573; background: var(--petrol-800); box-shadow: 0 40px 60px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(196, 164, 104, 0.25); }
.wst__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .wst__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); }
  .wst--r .wst__in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .wst--r .wst__tx { order: 2; }
}
@media (max-width: 899.98px) { .wst { min-height: 0; } .ws { background: rgba(4, 17, 24, 0.5); } }

/* 3. Ground: opaque sections below the globe */
.ww-ground { background: var(--paper); }
.ww-focus { padding-block: clamp(3.5rem, 2rem + 4vw, 6rem); background: var(--paper-alt); }
.ww-focus__h, .ww-acc__h { margin: 0 0 var(--sp-5); font: 500 var(--fs-700) / 1.15 var(--font-serif); color: var(--ink); }
/* Focus emblems: dot-matrix crops (tools/build_globe.py -> partials), three / four petrol tones, relief layer, brass lines drawn on entry */
.fe { display: grid; gap: clamp(3rem, 2rem + 4vw, 5rem); margin-top: var(--sp-6); }
.fe__fig { margin: 0 0 var(--sp-5); }
.fe-svg { display: block; width: 100%; height: auto; overflow: hidden; }
.fe-land { fill: #d3dbdf; }
.fe-c { stroke: none; }
.fe-c--nb { fill: #d3dbdf; } .fe-c--br, .fe-c--ve { fill: #8eb1c2; } .fe-c--ar, .fe-c--gy { fill: #1b516c; } .fe-c--py, .fe-c--sr, .fe-c--tt { fill: #0a2837; }
.fe-bd .fe-c { fill: none; stroke: #f6f4ee; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fe-bd .fe-c--nb, .fe-bd .fe-c--br { stroke: none; }
.fe-coast { fill: none; stroke: #092432; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fe-lb { font: 600 20px / 1 var(--font-sans); paint-order: stroke; stroke-width: 3px; stroke-linejoin: round; }
.fe__p--r .fe-lb { font-size: 23px; }
.fe-lb--lt { fill: #f6f4ee; stroke: rgba(4, 17, 24, 0.55); } .fe-lb--dk { fill: #092432; stroke: rgba(255, 255, 255, 0.45); } .fe-lb--ink { fill: #13232b; stroke: #ebe8df; }
.fe-ld { fill: none; stroke: #13232b; stroke-width: 1; vector-effect: non-scaling-stroke; }
.fe-b { fill: none; stroke: #9c7a35; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.fe-n { fill: #9c7a35; stroke: var(--paper-alt); stroke-width: 2; }
.fe-ring, .fe-tt { fill: none; stroke: #9c7a35; stroke-width: 1.6; }
.fe-tt { stroke-dasharray: 2 3; }
html.motion .fe__fig[data-reveal] .fe-b { stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-out) var(--ease-out); }
html.motion .fe__fig[data-reveal].is-in .fe-b { stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--ease-out) calc(300ms + var(--k, 0) * 160ms); }
html.motion-paused .fe-b { stroke-dashoffset: 0 !important; transition: none !important; }
.fe__cap { margin-top: var(--sp-3); font-size: var(--fs-300); color: var(--ink-soft); }
.fe__t { margin: 0 0 var(--sp-2); font: 500 var(--fs-800) / 1.05 var(--font-serif); color: var(--ink); }
.fe__l { margin: 0; max-width: 30rem; color: var(--ink-soft); font-size: var(--fs-500); }
@media (min-width: 900px) {
  .fe { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .fe__p--r { text-align: right; }
  .fe__p--r .fe__l { margin-left: auto; }
}
.ww-acc { padding-block: clamp(4rem, 2.5rem + 5vw, 7.5rem); }
.ww-focus__h, .ww-acc__h { text-align: center; } .ww-acc__h { margin-bottom: var(--sp-7); }
.ww-acc .mom__t { margin: 0; max-width: 18rem; }
.ww-acc__foot { margin: var(--sp-7) 0 0; text-align: center; color: var(--ink-soft); }