/* Vanua OS illustrated infographics (owner-approved 12 Nov 2026): the lease road, the staircase, the payment ring, the numbers, a lease through time.
   Drawn by vanua-infographics-20261112.js. Everything is scoped under .vig so nothing here touches the rest of the page. */
.vig{--vig-ink:#22323a;--vig-dim:#5d6e75;--vig-card:#fff;--vig-line:#d9d3c5;--vig-coral:#e8694a;
 --vig-display:"Baloo 2","Vanua Display",system-ui,sans-serif;--vig-body:"Nunito","Vanua Body",system-ui,sans-serif;
 color:var(--vig-ink);font-family:var(--vig-body);display:flex;flex-direction:column;gap:10px;line-height:1.4;text-align:left}
.vig *{box-sizing:border-box}

/* containers: plain fallback until the script has drawn the piece, then the fallback is hidden */
.vig-host{margin:22px 0 26px}
.vig-host:empty{display:none}
.vig-host:not(.vig-on){padding:16px 18px;background:#fff;border:1px solid var(--line,#c9dedb);border-radius:16px}
.vig-host+.vig-host.vig-on{margin-top:34px}
.vig-fallback-title{margin:0 0 6px;font-weight:700}
.vig-fallback{margin:0;padding-left:22px;line-height:1.7}
.vig-on>:not(.vig){display:none}
.vh-ig.vig-on{background:none;border:0;box-shadow:none;padding:0;min-height:0}

.vig .vig-h{font-size:clamp(24px,4vw,36px);line-height:1.05;margin:0;padding:0;color:var(--vig-coral);text-transform:uppercase;max-width:none;display:block}
.vig-board{background:var(--vig-card);border-radius:24px;border:2px solid var(--vig-line);overflow:hidden;position:relative}
.vig-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.vig-board svg{display:block;width:100%;height:auto;max-width:none}
.vig svg text{font-family:var(--vig-body)}
.vig svg text.vig-num{font-family:var(--vig-display);font-weight:800}
.vig-hint{font:700 13px/1.4 var(--vig-body);color:var(--vig-dim)}
.vig-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.vig-read{font:800 clamp(18px,2.6vw,24px)/1.2 var(--vig-display);margin-left:auto;font-variant-numeric:tabular-nums;color:var(--vig-ink)}

/* buttons: every property is set here so the site's own button themes cannot restyle them */
.vig .vig-btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:42px;min-height:42px;padding:0 16px;border-radius:999px;border:2px solid var(--vig-ink);background:var(--vig-card);color:var(--vig-ink);font-size:14px;font-weight:800;line-height:1;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.vig .vig-btn.vig-go{background:var(--vig-coral);border-color:var(--vig-coral);color:#fff}
.vig .vig-btn:disabled{opacity:.4;cursor:default}

/* entry: pieces pop in one after another */
.vig .vig-pop{opacity:0;translate:0 16px;transition:opacity .5s,translate .5s cubic-bezier(.3,1.5,.5,1)}
.vig .vig-in .vig-pop{opacity:1;translate:0 0}
/* the + hotspot */
.vig .vig-hot{cursor:pointer}
.vig .vig-hot .vig-ring{animation:vig-pulse 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes vig-pulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}
.vig .vig-stop{cursor:pointer}
.vig .vig-stop .vig-halo{opacity:0;transition:opacity .3s}
.vig .vig-stop.vig-on-stop .vig-halo{opacity:1}
.vig .vig-hot:focus,.vig .vig-pole:focus{outline:none}
.vig .vig-hot:focus-visible,.vig .vig-pole:focus-visible{outline:3px solid var(--vig-ink);outline-offset:3px}

/* the ring's list of stage names: phones only */
.vig .vig-legend{display:none;list-style:none;margin:0;padding:0;grid-template-columns:1fr 1fr;gap:8px}
.vig .vig-legend li{margin:0;padding:0;list-style:none;display:flex}
.vig .vig-leg{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:9px;width:100%;min-height:52px;padding:7px 10px;border-radius:14px;border:2px solid var(--vig-line);background:var(--vig-card);color:var(--vig-ink);font-size:14px;font-weight:800;line-height:1.2;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vig .vig-leg i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font:800 16px/1 var(--vig-display);font-style:normal}
.vig .vig-leg small{display:block;font-size:12px;font-weight:700;color:var(--vig-dim);margin-top:1px}
.vig .vig-leg.vig-on-row{border-color:var(--vig-ink)}

/* a lease through time */
.vig-strip{background:#12303a}
.vig-pill{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:3;background:#fff;color:var(--vig-ink);font:800 15px/1.3 var(--vig-body);padding:7px 16px;border-radius:999px;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.vig-stage{position:relative;height:330px;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;background:#12303a url(/vanua-village-photo-20261104.jpg) center/cover}
.vig-stage.vig-grab{cursor:grabbing}
.vig-shade{position:absolute;inset:0;background:rgba(10,32,40,.55)}
.vig-lane{position:absolute;top:62px;left:0;height:250px;will-change:transform}
.vig .vig-card{all:unset;box-sizing:border-box;position:absolute;display:block;border-radius:18px;overflow:hidden;background:#fff;text-align:left;cursor:pointer;color:var(--vig-ink);box-shadow:0 10px 26px rgba(0,0,0,.35);-webkit-tap-highlight-color:transparent}
.vig-ctop{height:104px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:#fff}
.vig-ctop b{font:800 64px/1 var(--vig-display)}
.vig-ctop .vig-cicon{width:62px;height:62px;flex:none;display:block}
.vig-cbody{display:block;padding:12px 16px 14px}
.vig-cname{display:block;font:800 18px/1.15 var(--vig-display)}
.vig-cmeta{display:block;font:800 12.5px/1.3 var(--vig-body);margin-top:4px}
.vig-over{position:relative;height:46px;background:#0b1f26;touch-action:none;cursor:pointer}
.vig-over i{position:absolute;top:17px;width:12px;height:12px;border-radius:50%}
.vig-win{position:absolute;top:5px;bottom:5px;border:3px solid #fff;border-radius:8px;background:rgba(255,255,255,.14)}

/* pop-up */
.vig-veil[hidden]{display:none}
.vig-veil{position:fixed;inset:0;background:rgba(20,32,38,.62);display:grid;place-items:center;z-index:10000;padding:16px}
.vig-modal{background:var(--vig-card);border-radius:24px;max-width:520px;width:100%;overflow:hidden;animation:vig-rise .35s cubic-bezier(.3,1.4,.5,1);max-height:calc(100vh - 32px);overflow-y:auto}
@keyframes vig-rise{from{opacity:0;transform:translateY(24px) scale(.94)}}
.vig-mtop{display:flex;align-items:center;gap:14px;padding:18px 20px;color:#fff}
.vig-mtop b{font:800 54px/1 var(--vig-display)}
.vig-veil .vig-mtop h3{font-size:24px;line-height:1.1;margin:0;padding:0;flex:1;color:#fff;display:block;text-transform:none}
.vig-veil .vig-mx{all:unset;box-sizing:border-box;flex:none;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.25);color:#fff;font-size:20px;font-weight:800;line-height:38px;text-align:center;cursor:pointer}
.vig-mbody{padding:18px 20px;display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center}
.vig-mpic svg{display:block;width:110px;height:110px}
.vig-chip{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:5px 12px;font:800 13px/1.3 var(--vig-body);color:#fff;margin:0 6px 6px 0}
.vig-veil .vig-mbody p{margin:6px 0 0;font-size:16px;line-height:1.45;color:var(--vig-ink);max-width:none}
.vig-mfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 20px 18px}
.vig-mfoot span{font:800 13px/1.3 var(--vig-body);color:var(--vig-dim)}

/* The site's design sheet forces fonts, heading weights and focus rings with !important from inside its own layer.
   Important rules in a layer beat important rules outside it, so these overrides sit in the same layer with a tighter selector. */
@layer vanua-design{
 .vig .vig-btn,.vig .vig-leg,.vig .vig-card,.vig-veil .vig-mx{font-family:var(--vig-body)!important}
 .vig .vig-h,.vig-veil .vig-mtop h3{font-family:var(--vig-display)!important;font-weight:800!important;font-style:normal!important}
 .vig .vig-h{letter-spacing:.01em!important}
 .vig-veil .vig-mtop h3{letter-spacing:0!important}
 .vig :is(.vig-btn,.vig-leg,.vig-card,.vig-mx):focus-visible{outline:3px solid var(--vig-ink)!important;outline-offset:3px!important}
 .vig-strip .vig-card:focus-visible,.vig-veil .vig-mx:focus-visible{outline-color:#fff!important}
}

@media (max-width:640px){
 .vig .vig-wide{min-width:880px}
 .vig-mbody{grid-template-columns:76px 1fr}
 .vig-mpic svg{width:76px;height:76px}
 .vig-read{margin-left:0;width:100%}
 .vig .vig-legend{display:grid}
}
@media (prefers-reduced-motion:reduce){
 .vig .vig-pop{transition:none;opacity:1;translate:0 0}
 .vig .vig-hot .vig-ring{animation:none;opacity:0}
 .vig-modal{animation:none}
 .vig .vig-stop .vig-halo{transition:none}
}

/* Home page: keep the staircase and the numbers to a readable size on wide screens. */
#igWaypath .vig-board,#igFactwall .vig-board{width:100%;max-width:820px;margin-inline:auto}