/* NUBIS ad TERRAM: Our Intelligence and Atlas. Loaded AFTER home.css, which carries the tokens, the header, the tray,
   plates, wells, glass, keys, the carved numerals, the closing call and the footer. This sheet adds what those two pages
   have that the home page has not: figures, screens, the specialists, the scroll read, the dossier, the sliders, the
   wall, the globe, and the sign in plate. Same material rules: raised plates are for reading, debossed wells hold what
   is alive, glass is what sits over a picture, and a SCREEN is a well with a display in it. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.page main{will-change:auto}                      /* only the home page glides by transform; a layer this tall would be wasted here */
.page .tray{overflow:clip}                        /* clip, not hidden: hidden would make the tray a scroll box and the scroll read could never stick */
.page .grid{grid-template-rows:none;grid-auto-rows:auto}
.page h3{margin:0;font-weight:400}
.nav .links .cur{padding:9px 14px;border-radius:999px;box-shadow:var(--well-sm);color:var(--orange-ink)}

/* ---------- the page head: what the page is, the live field, the index, Nunu ---------- */
.ph-head{grid-column:1 / span 7;min-height:clamp(320px,44vh,500px);justify-content:space-between;gap:40px}
.ph-head h1{font-family:var(--display);font-size:clamp(40px,5.4vw,102px);line-height:.97;letter-spacing:-.02em;max-width:11ch;text-wrap:balance}
/* the display word on the sub pages, same call as .head h1 span in home.css: live orange, not ink */
.ph-head h1 span{color:var(--orange)}
.ph-head h1 span.vio{color:var(--violet)}   /* Book a demo, 2026-09-25: "building." in violet at his request */
.ph-head .stand{margin-top:20px;max-width:54ch;font-size:clamp(15px,1.12vw,18px);line-height:1.5;color:#2A2D36}
.cloudbox{grid-column:8 / span 5;background:var(--violet);color:#fff;overflow:hidden;justify-content:space-between;min-height:260px;
  box-shadow:10px 10px 24px rgba(74,18,190,.34),-10px -10px 24px var(--hi),inset 0 1px 0 rgba(255,255,255,.28)}
.cloudbox canvas,.cloudbox .fuzzloop{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit}
.cloudbox .fuzzloop{left:0;top:0;transform:none;aspect-ratio:auto;object-fit:cover;mix-blend-mode:normal}
.cloudbox>div{position:relative}
.cloudbox .label{color:#E4DBFD}
.cloudbox .who{font-family:var(--display);font-size:14px}
.toc{grid-column:1 / span 10;justify-content:space-between;gap:18px}
.toc ol{flex:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
/* The seven are cards: number at the top, a small mark in the middle, the title at the foot. The mark is the
   point of the middle space, which used to be empty. The only thing kept from the key experiment is a real :active,
   because these are links and a press should read as one. */
.toc a{display:flex;flex-direction:column;justify-content:space-between;gap:10px;height:100%;min-height:96px;
  padding:12px 14px 13px;border-radius:14px;box-shadow:var(--well-sm);
  font-family:var(--display);font-size:clamp(13.5px,1.02vw,16px);line-height:1.15;letter-spacing:-.01em;
  transition:box-shadow .45s var(--out),color .25s,transform .45s var(--out)}
.toc a small{font-size:10.5px;letter-spacing:.06em;color:var(--faint);transition:color .25s}
.toc a:hover{box-shadow:var(--raised-sm);color:var(--orange-ink);transform:translateY(-1px)} .toc a:hover small{color:var(--orange-ink)}
.toc a:active{box-shadow:var(--well-sm);transform:translateY(0) scale(.99)}

.page .pet{grid-column:11 / span 2;grid-row:auto;--wd:calc(100% - 32px)}
.page .pet::before{content:"";display:block;padding-top:calc(100% + 30px)}       /* the label's strip, then a well as wide as the card */
.page .pet .well,.page .pet .dish{top:46px;left:16px;width:calc(100% - 32px)}

/* ---------- a section: its own twelve columns on the board, a banner first ---------- */
.sec{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin-top:clamp(22px,2.6vw,44px);scroll-margin-top:96px}
.sec>.banner{grid-column:1 / -1}
.page .num{width:clamp(112px,9.4vw,176px)}
.page .banner h2{font-size:clamp(24px,2.5vw,42px);letter-spacing:-.03em;line-height:1.05}
.banner .hint{margin-top:14px;max-width:56ch;font-size:15.5px;line-height:1.55;color:#2A2D36}
.banner--o{background:var(--orange);box-shadow:10px 10px 24px rgba(201,58,0,.32),-10px -10px 24px var(--hi),inset 0 1px 0 rgba(255,255,255,.4)}
.banner--o .num text{fill:#D23F00}
.banner--o .cell{box-shadow:inset 3px 3px 7px rgba(160,42,0,.42),inset -3px -3px 7px rgba(255,150,100,.75)}
.banner--o .cell p,.banner--o .label{color:#3A1100}
.banner--o .cell h3{font-size:clamp(20px,1.7vw,28px)}
.cells--4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- figures: a white display sunk in the slab. The photograph is put through the point screen ---------- */
.fig,.shot{position:relative;overflow:hidden;border-radius:14px;background:#fff}
.fig{aspect-ratio:4 / 3}
.fig::after,.shot::after,.dossier::after,.wall__tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;
  box-shadow:inset 5px 5px 12px rgba(120,132,160,.55),inset -4px -4px 10px rgba(255,255,255,.9)}
.pscr{position:absolute;inset:0;background:#fff;filter:contrast(40) grayscale(1)}
.pscr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.9) contrast(1.25)}
.pscr::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;background:radial-gradient(circle,#000 0 .7px,#fff 1.4px) 0 0 / 3px 3px}
.pscr--plain{filter:none} .pscr--plain img{filter:none} .pscr--plain::after{display:none}      /* the real colour photograph, for the specialists and the scroll read */
.fig .ov{position:absolute;inset:0;pointer-events:none;z-index:2}
.fig .ov svg{position:absolute;inset:0;width:100%;height:100%}
.fig .ov text{font-family:var(--display);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;fill:var(--ink)}
.fig .bx{position:absolute;border:1.5px solid var(--orange);border-radius:3px}
.fig .bx::after{content:attr(data-l);position:absolute;left:-1.5px;top:-18px;background:var(--orange);color:var(--ink);font-family:var(--display);font-size:9.5px;line-height:1;padding:3px 6px;border-radius:3px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.fig .lbl{position:absolute;left:10px;bottom:10px;z-index:5;max-width:calc(100% - 20px);padding:4px 10px;border-radius:999px;background:rgba(238,240,245,.94);font-family:var(--display);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 01 the method */
.panel{grid-column:span 4;gap:12px}
.panel__k{display:flex;justify-content:space-between;align-items:center}
.panel__k .label{display:inline-flex;align-items:center;gap:8px}
.panel__k .label i{width:7px;height:7px;border-radius:50%;background:var(--orange)}
.panel--b .panel__k .label i{background:var(--peri)} .panel--c .panel__k .label i{background:var(--violet)}
.panel h3{font-family:var(--display);font-size:clamp(20px,1.7vw,28px);line-height:1.08;letter-spacing:-.025em;max-width:16ch;margin-top:6px}
.panel p{font-size:14.5px;line-height:1.55;color:var(--muted);max-width:44ch}
.panel .fig{margin-top:auto}
.panel p+.fig{margin-top:auto}

/* 02 the specialists: five keys. The one that is down is the one being read */
/* ---- 02, the specialists, is a FOLDER: the five names sit along the top of one sheet and the chosen one is the
   top edge of it, so a label is attached to the body it belongs to. Same move as the Atlas header, same reason.
   The body had to be joined up first: it was a 5 column plate beside a 7 column figure, two objects, so a tab in
   the fifth position had nothing under it to join. .svc__body is that one sheet now, and .svc__txt has given up
   being a plate of its own.
   The sheet keeps BOTH top corners round and only squares the one the chosen tab stands on, which is what makes a
   row of tabs read as a folder rather than a strip of buttons. Below 1100 the tabs wrap onto more than one row and
   the join would be a lie, so the fusion is dropped there and they go back to separate rounded shapes. ---- */
.svc{grid-column:1 / -1}
.tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.tabs .tab{appearance:none;border:0;margin:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer;
  position:relative;display:flex;flex-direction:column;gap:8px;padding:13px 16px 15px;
  border-radius:16px 16px 0 0;background:transparent;box-shadow:none;
  transition:background .3s var(--out),box-shadow .3s var(--out),color .25s}
.tabs .tab .no{font-family:var(--display);font-size:10.5px;letter-spacing:.07em;color:var(--faint)}
.tabs .tab .t{font-family:var(--display);font-size:clamp(14px,1.1vw,17px);letter-spacing:-.01em}
.tabs .tab:hover{color:var(--orange-ink)}
.tabs .tab[aria-selected="true"]{background:var(--g);box-shadow:var(--raised-sm);
  clip-path:inset(-22px -22px 0 -22px);margin-bottom:-1px;z-index:1}
.tabs .tab[aria-selected="true"] .no{color:var(--orange-ink)}

.svc__body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap);
  background:var(--g);box-shadow:var(--raised);border-radius:var(--r);padding:clamp(16px,1.8vw,28px)}
.svc:has(.tab:first-child[aria-selected="true"]) .svc__body{border-top-left-radius:0}
.svc:has(.tab:last-child[aria-selected="true"]) .svc__body{border-top-right-radius:0}
.svc__txt{grid-column:auto;display:flex;flex-direction:column;justify-content:center;gap:0;min-width:0;padding:clamp(6px,1vw,16px)}
.svc__txt .no{color:#C43B00}
.svc__txt h3{font-family:var(--display);font-size:clamp(30px,3.2vw,52px);line-height:1;letter-spacing:-.03em;margin-top:12px}
.chip{display:inline-block;align-self:flex-start;margin-top:16px;padding:7px 13px;border-radius:999px;box-shadow:var(--well-sm)}
.svc__txt .copy{margin-top:22px;display:grid;gap:14px;font-size:15.5px;line-height:1.6;color:#2A2D36;max-width:54ch}
.svc__fig{grid-column:auto;aspect-ratio:auto;min-height:clamp(280px,30vw,520px)}

/* ---------- a screen: a dark display sunk in the slab. The point renders that are drawn in light live on one ---------- */
.screen{grid-column:1 / -1;position:relative;border-radius:var(--r);padding:10px;box-shadow:var(--well)}
.screen__in{position:relative;overflow:hidden;border-radius:14px;background:#10121A;color:#fff;height:100%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 18px 40px rgba(0,0,0,.45)}
.screen__in::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:80px 80px}
.screen .label{color:#A9AFC0}

/* ---------- the scroll read: the panel holds still while the scroll reads the building, then wipes to after works ---------- */
.scrub{grid-column:1 / -1;height:270vh;position:relative;margin-top:var(--gap);scroll-margin-top:96px}
.scrub__sticky{position:sticky;top:84px;height:calc(100vh - 98px);min-height:420px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-content:center;align-items:stretch}
.shot{grid-column:1 / span 8;border-radius:var(--r);padding:0}
.compare{position:relative;width:100%;aspect-ratio:3 / 2;max-height:calc(100vh - 150px);min-height:100%;overflow:hidden;user-select:none}
.compare__after{clip-path:inset(0 0 0 var(--split,50%))}
.compare__handle{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:var(--g);transform:translateX(-1px);pointer-events:none;z-index:3;box-shadow:0 0 0 1px rgba(21,23,28,.25)}
.compare__handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px var(--g),2px 3px 8px 5px rgba(21,23,28,.3)}
.compare__tag{position:absolute;top:16px;z-index:5;padding:6px 12px;border-radius:999px;background:rgba(238,240,245,.94);pointer-events:none;color:var(--ink)}
.compare__tag--l{left:16px} .compare__tag--r{right:16px}
.det{position:absolute;z-index:2;border:1.5px solid var(--orange);border-radius:4px;background:rgba(255,77,0,.12);opacity:0;transform:scale(1.06);transition:opacity .35s,transform .35s var(--out);pointer-events:none}
.det.on{opacity:1;transform:none}
.det>b{position:absolute;left:-1.5px;bottom:100%;margin-bottom:4px;background:var(--orange);color:var(--ink);font-family:var(--display);font-weight:400;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:4px 7px;border-radius:3px;white-space:nowrap;line-height:1}
.det>b::after{content:' ' attr(data-c)}
.findings{grid-column:9 / span 4;justify-content:center;gap:0}
/* The four findings hang off one line, and the line is the journey: it fills orange from the top as the scroll
   reveals them, so how far down the rail the colour has reached is how far through the read you are. --journey is
   set by scrubUpdate() in js/intelligence.js, 0 to 1, and is the same number that decides which findings are on.
   The rail is inset top and bottom by half a row so it starts at the first node and ends at the last, rather than
   running out into the padding. */
.findings__list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:clamp(16px,2.2vh,32px);position:relative}
.findings__list::before,.findings__list::after{content:"";position:absolute;left:50%;translate:-50% 0;width:2px;
  top:var(--rail-inset,26px);bottom:var(--rail-inset,26px);border-radius:1px}
.findings__list::before{background:rgba(158,169,194,.42)}
.findings__list::after{bottom:auto;height:calc((100% - var(--rail-inset,26px) * 2) * var(--journey,0));
  background:var(--orange);transition:height .25s linear}
@media (prefers-reduced-motion:reduce){.findings__list::after{transition:none}}
/* a finding not read yet lies flat and pale; read, it is pressed into the plate and opens */
.finding{position:relative;padding:4px 0;opacity:.38;transition:opacity .4s}
.finding.on{opacity:1}
/* name, node, score: the middle column is the rail's column, so the line runs behind the nodes and between the
   words rather than through them */
.finding .row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px}
.finding .name{font-family:var(--display);font-size:16.5px;letter-spacing:-.01em;text-align:right}
.finding .conf{font-family:var(--display);font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:left}
.finding .hot{color:var(--orange-ink);font-style:normal}
.finding .node{width:11px;height:11px;border-radius:50%;background:var(--g);box-shadow:var(--well-sm);
  transition:background .3s,box-shadow .3s}
.finding.on .node{background:var(--orange);box-shadow:0 0 0 3px rgba(255,77,0,.16)}
.findings__foot{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.55}
.scrub__hint{position:absolute;left:50%;bottom:6px;z-index:6;transform:translate(-50%,8px);display:flex;align-items:center;gap:12px;padding:8px 16px 8px 12px;border-radius:999px;background:var(--g);box-shadow:var(--raised-sm);opacity:0;transition:opacity .5s,transform .5s var(--out);pointer-events:none}
.scrub__hint.on{opacity:1;transform:translate(-50%,0)}
.scrub__mouse{position:relative;width:16px;height:25px;border-radius:9px;box-shadow:var(--well-sm)}
.scrub__mouse i{position:absolute;left:50%;top:5px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:var(--orange);animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(9px);opacity:0}100%{transform:translateY(0);opacity:0}}

/* ---------- the sample dossier: a glass report over the building it reads ---------- */
.dossier{grid-column:1 / -1;position:relative;overflow:hidden;border-radius:var(--r);background:#fff;min-height:clamp(520px,46vw,720px);display:flex;align-items:center;justify-content:flex-end;padding:clamp(18px,4vw,64px);scroll-margin-top:96px}
.dossier__bg{z-index:0}
.window{position:relative;z-index:5;width:min(780px,100%);border-radius:20px;overflow:hidden;color:var(--ink);
  background:rgba(238,240,245,.8);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 30px 70px rgba(40,48,80,.28),0 3px 10px rgba(40,48,80,.12),inset 0 1px 0 rgba(255,255,255,.95)}
.window__bar{display:flex;align-items:center;gap:16px;padding:13px 20px;border-bottom:1px solid rgba(158,169,194,.45);box-shadow:0 1px 0 rgba(255,255,255,.8)}
.window__dots{display:inline-flex;gap:6px}
.window__dots i{width:9px;height:9px;border-radius:50%;box-shadow:var(--well-sm)}
.window__dots i:first-child{background:var(--orange);box-shadow:none}
.window__title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.window__live{display:inline-flex;align-items:center;gap:8px;color:#C43B00}
.window__live i{width:7px;height:7px;border-radius:50%;background:var(--orange);animation:led 1.6s infinite}
.window__body{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:26px 28px}
.meter{display:grid;grid-template-columns:74px 1fr 40px;align-items:center;gap:12px;margin-top:14px;font-size:14px}
.meter__bar,.groove{height:8px;border-radius:99px;box-shadow:var(--well-sm);overflow:hidden}
.meter__bar i,.groove>i{display:block;height:100%;width:var(--w);border-radius:99px;background:var(--orange);transition:width .35s var(--out)}
.meter b{font-family:var(--display);font-weight:400;color:#C43B00;text-align:right;font-variant-numeric:tabular-nums}
.kv{display:flex;justify-content:space-between;gap:16px;margin-top:12px;padding-bottom:10px;font-size:14px;border-bottom:1px solid rgba(158,169,194,.45);box-shadow:0 1px 0 rgba(255,255,255,.8)}
.kv span{color:var(--muted)} .kv b{font-weight:400;text-align:right}
.big-num{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;font-size:14px}
.big-num span{color:var(--muted)}
.big-num b{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.big-num--red b{color:#C43B00}
.score{display:flex;align-items:baseline;gap:14px;margin-top:12px;font-size:13px;line-height:1.45;color:var(--muted)}
.score b{font-family:var(--display);font-weight:400;font-size:52px;letter-spacing:-.02em;line-height:1;color:var(--orange-ink)}
.window__foot{padding:14px 28px 18px;font-size:12.5px;color:var(--muted);border-top:1px solid rgba(158,169,194,.45);line-height:1.55}
.window .gap{margin-top:26px}

/* ---------- repairs ranked: sliders are a groove and a knob ---------- */
.calc-in{grid-column:span 4;gap:0}
.calc-out{grid-column:span 8;gap:0}
.field{display:block;margin-top:22px}
.calc-in .field:first-of-type{margin-top:20px}
.field .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;font-size:15.5px}
.field .row span:last-child{font-family:var(--display);font-variant-numeric:tabular-nums}
.field .row .val{color:#C43B00}
.slider{-webkit-appearance:none;appearance:none;display:block;width:100%;height:30px;margin:0;background:transparent;cursor:pointer;--f:.5}
.slider::-webkit-slider-runnable-track{height:10px;border-radius:99px;box-shadow:inset 2px 2px 4px rgba(90,100,130,.45),inset -1px -1px 1px rgba(255,255,255,.55);
  background:linear-gradient(to right,var(--orange) calc(13px + (100% - 26px) * var(--f)),transparent calc(13px + (100% - 26px) * var(--f)))}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-8px;border:0;border-radius:50%;background:var(--g) radial-gradient(circle,var(--orange) 0 3px,transparent 3.6px);
  box-shadow:3px 3px 8px var(--lo),-3px -3px 8px var(--hi),inset 0 0 0 1px rgba(255,255,255,.85);transition:transform .3s var(--out)}
.slider:active::-webkit-slider-thumb{transform:scale(.94)}
.slider::-moz-range-track{height:10px;border-radius:99px;box-shadow:var(--well-sm);background:transparent}
.slider::-moz-range-progress{height:10px;border-radius:99px;background:var(--orange)}
.slider::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:var(--g) radial-gradient(circle,var(--orange) 0 3px,transparent 3.6px);box-shadow:3px 3px 8px var(--lo),-3px -3px 8px var(--hi),inset 0 0 0 1px rgba(255,255,255,.85)}
.slider:focus-visible{outline:none} .slider:focus-visible::-webkit-slider-thumb{outline:2px solid var(--violet);outline-offset:3px}
.outs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:26px}
.outs>div{padding:14px 18px 16px;border-radius:16px;box-shadow:var(--well-sm)}
.outs .l{font-size:13px;color:var(--muted)}
.outs .v{font-family:var(--display);font-size:clamp(26px,2.6vw,40px);letter-spacing:-.02em;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums}
.outs .v.red{color:var(--orange-ink)}
/* every repair keeps its own row whatever its value, so this plate's height never changes as the sliders move */
.rank{padding:14px 0 16px;min-height:68px;border-top:1px solid rgba(158,169,194,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.rank--off{opacity:.45}
.rank .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-family:var(--display);font-size:17px;letter-spacing:-.01em;min-height:26px}
.rank .row .d{font-family:var(--body);font-size:14px;letter-spacing:0;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.rank .groove{margin-top:10px}
.note{font-size:13px;color:var(--muted);margin-top:16px;line-height:1.55;max-width:70ch}

/* ---------- the wall: three displays. The chosen one shows its true colours inside the orange frame ---------- */
.wall__tile{grid-column:span 4;appearance:none;border:0;margin:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;position:relative;overflow:hidden;aspect-ratio:4 / 5;border-radius:var(--r);background:#fff;
  transition:transform .5s var(--out)}
.wall__tile:hover{transform:translateY(-2px)}
.wall__full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(50% 50% 50% 50%);z-index:1;pointer-events:none;transition:clip-path .6s var(--out)}
.wall__tile .frame{position:absolute;z-index:2;border:2px solid var(--orange);border-radius:4px;pointer-events:none;opacity:0;transition:opacity .3s}
.wall__tile[aria-pressed="true"] .frame{opacity:1}
.wall__cap{position:absolute;left:14px;right:14px;bottom:14px;z-index:5;padding:12px 16px 13px;border-radius:14px;pointer-events:none;
  background:rgba(238,240,245,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 22px rgba(40,48,80,.22),inset 0 1px 0 rgba(255,255,255,.95)}
.wall__act{grid-column:1 / -1;margin-top:var(--gap)}
.wall__cap .name{font-family:var(--display);font-size:clamp(17px,1.4vw,22px);letter-spacing:-.015em;line-height:1.1;margin-top:3px}
.wall__tile[aria-pressed="true"] .wall__cap .label{color:#C43B00}
.stat{grid-column:span 3;padding:18px 20px 20px;border-radius:18px;box-shadow:var(--well-sm);min-height:132px}
.stat .big{font-family:var(--display);font-size:clamp(20px,1.8vw,28px);letter-spacing:-.02em;margin-top:8px;line-height:1.1}
.stat .s{font-size:14px;color:var(--muted);margin-top:4px}
.stat--v{background:var(--violet);color:#fff;box-shadow:6px 6px 14px rgba(74,18,190,.34),-6px -6px 14px var(--hi),inset 0 1px 0 rgba(255,255,255,.28)}
.stat--v .label{color:#E4DBFD} .stat--v .s{color:#EDE7FF}

/* ---------- where we read ---------- */
.reach{grid-column:span 5;gap:0}
.reach .ttl{margin-top:12px}
.reach h2{font-family:var(--display);font-size:clamp(30px,3.3vw,58px);line-height:.98;letter-spacing:-.03em;margin-top:clamp(18px,2vw,32px)}
.reach .list{margin-top:auto;padding-top:clamp(18px,2vw,30px);display:grid;gap:10px}
.reach details{border-radius:14px;box-shadow:var(--well-sm);transition:box-shadow .45s var(--out)}
.reach summary{display:grid;grid-template-columns:22px 1fr auto 12px;gap:12px;align-items:baseline;padding:13px 16px;cursor:pointer;list-style:none;font-size:14.5px;line-height:1.4;border-radius:inherit}
.reach summary::-webkit-details-marker{display:none}
.reach summary b{font-family:var(--display);font-weight:500}
.reach .n{font-family:var(--display);font-size:10.5px;letter-spacing:.06em;color:var(--faint)}
.reach .st{font-family:var(--display);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.reach .st.on{color:#C43B00}
.reach .chev{align-self:center;width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .35s var(--out)}
.reach details[open] .chev{transform:rotate(-135deg) translate(-2px,-2px)}
.reach .desc{padding:0 16px 14px 50px;font-size:14px;line-height:1.5;color:var(--muted)}
.screen--globe{grid-column:span 7;min-height:clamp(420px,44vw,680px)}
.screen--globe .cv{position:absolute;inset:0;cursor:grab;touch-action:pan-y}
.screen--globe .cv.drag{cursor:grabbing}
.screen--globe canvas{position:absolute;inset:0;width:100%;height:100%}
.glbl .lbl{position:absolute;font-family:var(--display);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(16,18,26,.78);padding:3px 8px;border-radius:999px;transform:translate(12px,-50%);white-space:nowrap;pointer-events:none;transition:opacity .2s}
.screen__cap{position:absolute;left:18px;bottom:16px;z-index:2}

/* ---------- the closing call and the footer, without the home page's board rows and Nunu's last well ---------- */
.page .ask{grid-row:auto;margin-top:clamp(22px,2.6vw,44px);scroll-margin-top:96px}
.page .ask__l{grid-column:1 / span 7} .page .ask__r{grid-column:8 / span 5;padding-right:clamp(22px,2.2vw,38px)}
.page .foot2{grid-row:auto}

body.auth{min-height:0}
/* ---------- Atlas: one screen, one narrow column, two rows. Above, the sky in a small display; below, the credentials.
   The display is as wide as it takes for the painted sun, and so Nunu who sits on it, to be Nunu's usual size (the ball is
   about a quarter of the picture's width). It shows the whole picture, so it keeps the picture's own proportions. ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.authgrid{grid-template-columns:minmax(0,1fr) !important;grid-template-rows:auto auto !important;align-content:center;justify-items:center;min-height:calc(100dvh - 56px - var(--edge) * 4)}
.authcol{width:min(100%,680px,calc((100dvh - 535px) * 1.6));   /* 535: the header, the form and the note it shows when pressed, so the screen never has to scroll */
 min-width:min(100%,420px)}
.skywell{position:relative;overflow:hidden;border-radius:var(--r);background:#fff;aspect-ratio:16 / 10;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:16px}
.skywell::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;box-shadow:inset 7px 7px 16px rgba(120,132,160,.55),inset -5px -5px 12px rgba(255,255,255,.9)}
.skywell picture{position:absolute;inset:0;display:block}
.skyart{width:100%;height:100%;object-fit:cover;object-position:50% 50%;user-select:none;pointer-events:none}
/* Nunu's seat: laid over the painted sun by js/auth.js. The canvas overhangs it the way it does a dish */
.sunseat{position:absolute;z-index:1;visibility:hidden;pointer-events:none}
.sunseat canvas{position:absolute;left:-9%;top:-9%;width:118%;height:118%;display:block}
.skywell>.glass{z-index:2}
.signin{padding:clamp(20px,2.2vw,30px)}
.signin form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px var(--gap);align-items:end}
.signin .field{margin:0}
.signin .field .lbl{display:block;margin-bottom:8px}
.signin input[type=text],.signin input[type=password]{width:100%;height:56px;border:0;border-radius:999px;padding:0 22px;background:var(--g);box-shadow:var(--well-sm);font:15.5px/1.3 var(--body);color:var(--ink);transition:box-shadow .35s var(--out)}
.signin input::placeholder{color:var(--muted);opacity:1}
.signin input[type=text]:focus,.signin input[type=password]:focus{outline:none;box-shadow:var(--well-sm),0 0 0 2px var(--violet)}
.pw{position:relative;display:block}
.pw input{padding-right:52px !important}
.reveal{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:grid;place-items:center;border:0;background:var(--g);cursor:pointer;border-radius:50%;color:var(--muted);box-shadow:var(--raised-sm);transition:box-shadow .3s var(--out),color .2s}
.reveal:hover{color:var(--ink)} .reveal.on{box-shadow:var(--well-sm);color:var(--orange-ink)}
.reveal svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.reveal .e-slash{opacity:0;transition:opacity .15s} .reveal.on .e-slash{opacity:1}
.authrow{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 6px;font-size:14px}
.check{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;border-radius:7px;box-shadow:var(--well-sm);cursor:pointer;display:grid;place-items:center;transition:background .25s,box-shadow .25s}
.check input::after{content:"";width:10px;height:5px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .3s var(--out)}
.check input:checked{background:var(--orange);box-shadow:2px 2px 5px rgba(201,58,0,.4),-2px -2px 5px var(--hi),inset 0 1px 0 rgba(255,255,255,.45)}
.check input:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.mini{color:var(--muted);border-bottom:1px solid transparent;transition:color .2s,border-color .2s} .mini:hover{color:var(--ink);border-bottom-color:currentColor}
.authbtn{width:100%;height:56px;border:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 26px;border-radius:999px;background:var(--orange);color:var(--ink);
  font-family:var(--display);font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:6px 6px 14px rgba(201,58,0,.38),-6px -6px 14px var(--hi),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .45s var(--out),box-shadow .45s var(--out)}
.authbtn b{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:400;font-size:15px;transition:transform .45s var(--out)}
.authbtn:hover{transform:translateY(-2px)} .authbtn:hover b{transform:translateX(3px)}
.authbtn:active{transform:translateY(1px);box-shadow:inset 4px 4px 9px rgba(160,42,0,.5),inset -4px -4px 9px rgba(255,150,100,.7)}
.authnote{grid-column:1 / -1;margin:2px 0 0;padding:12px 16px;border-radius:14px;box-shadow:var(--well-sm);font-size:13.5px;line-height:1.5;color:var(--ink);font-family:var(--body);letter-spacing:0;text-transform:none}
.authgo{grid-column:1 / -1}
.authfoot{grid-column:1 / -1;margin:0;font-size:14px;color:var(--muted);text-align:center}
.authfoot a{color:var(--ink);border-bottom:1px solid currentColor}
.authbase{position:absolute;left:calc(var(--pad) + 6px);right:calc(var(--pad) + 6px);bottom:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 24px}

@media (max-width:900px){.skywell{aspect-ratio:4 / 3}}          /* the small sky file is four by three */

/* ---------- smaller screens ---------- */
/* the orb (it left the home page on 2026-09-25, where the globe took over): a white screen sunk into the slab with
   the pre rendered loop in it. Desktop: between the title and the particle card, which give up two and one columns
   for it. Stacked: a full width screen under the title. */
.fieldbox{display:flex;grid-column:6 / span 3;background:#fff;overflow:hidden;
  box-shadow:inset 6px 6px 14px var(--lo),inset -6px -6px 14px rgba(255,255,255,.9)}
.ph-head{grid-column:1 / span 5} .cloudbox{grid-column:9 / span 4}
/* the whole orb, turning: the loop is a square with the orb edge to edge, so it is shown whole under the pill,
   never cropped to fill the box */
.fieldbox video{display:block;width:min(100%,460px);aspect-ratio:1;height:auto;margin:14px auto 0;object-fit:contain}
.fieldbox .label{order:-1;align-self:flex-start;position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;
  border-radius:999px;background:rgba(255,255,255,.86);box-shadow:var(--raised-sm)}
.fieldbox .label i{width:7px;height:7px;border-radius:50%;background:var(--violet)}
/* the live orb (desktop with a mouse): the same square the loop takes; its source video only feeds the canvas */
.fieldbox .orbstage{position:relative;width:min(100%,460px);aspect-ratio:1;margin:14px auto 0}
.fieldbox .orbstage .orbsrc{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;transform:none}
.fieldbox .orbstage .orbcv{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:1100px){
  .fieldbox{grid-column:1 / -1}
  .ph-head,.cloudbox{grid-column:1 / -1} .ph-head{min-height:0} .cloudbox{min-height:min(52vw,360px)}
  .toc{grid-column:1 / span 4} .toc ol{grid-template-columns:repeat(2,minmax(0,1fr))} .toc a{min-height:0;gap:8px}
  .page .pet{grid-column:5 / span 2;min-height:0} .page .pet .well,.page .pet .dish{left:16px;width:calc(100% - 32px);translate:none}
  .panel{grid-column:span 12} .panel .fig{margin-top:8px}
  .tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .calc-in,.calc-out,.reach,.screen--globe{grid-column:1 / -1}
  /* the tabs wrap onto two rows here, so nothing is standing on the sheet and the fusion would be a lie: they go
     back to separate rounded shapes, the chosen one pressed in the way the rest of the site marks a chosen thing */
  .svc__body{grid-template-columns:minmax(0,1fr)}
  .tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .tabs .tab{border-radius:14px;box-shadow:var(--raised-sm);background:var(--g)}
  .tabs .tab[aria-selected="true"]{box-shadow:var(--well-sm);clip-path:none;margin-bottom:0}
  .svc__body,.svc:has(.tab:first-child[aria-selected="true"]) .svc__body,
  .svc:has(.tab:last-child[aria-selected="true"]) .svc__body{border-radius:var(--r);margin-top:var(--gap)}
  .svc__fig{min-height:0;aspect-ratio:4 / 3}
  /* no room to hold a panel still: the read is laid out finished (the script does the same) */
  .scrub{height:auto} .scrub__sticky{position:static;height:auto;min-height:0} .shot,.findings{grid-column:1 / -1} .compare{max-height:none;min-height:0}
  .finding{opacity:1} .scrub__hint{display:none}
  .cells--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dossier{justify-content:center}
  .stat{grid-column:span 6}
  .screen--globe{min-height:min(86vw,560px)}
  .page .ask{display:block}
  .authgrid{min-height:0;padding-bottom:56px}
}
@media (max-width:700px){
  .toc,.page .pet{grid-column:1 / -1} .page .pet::before{padding-top:0;height:282px} .page .pet .well,.page .pet .dish{left:50%;width:220px;translate:-50% 0}
  .tabs{grid-template-columns:repeat(2,minmax(0,1fr))} .tabs .tab:last-child{grid-column:1 / -1}
  .cells--4{grid-template-columns:minmax(0,1fr)}
  .window__body{grid-template-columns:minmax(0,1fr);gap:26px;padding:20px} .window__bar{padding:12px 16px} .window__foot{padding:12px 20px 16px} .window__live span{display:none}
  .dossier{padding:12px;min-height:0}
  .outs{grid-template-columns:minmax(0,1fr)} .rank .row{flex-direction:column;gap:2px} .rank .row .d{text-align:left}
  .wall__tile{grid-column:1 / -1;aspect-ratio:4 / 3} .stat{grid-column:1 / -1;min-height:0}
  .reach summary{grid-template-columns:18px 1fr 12px} .reach .st{grid-column:2;grid-row:2} .reach .desc{padding-left:46px}
  .authcol{width:100%;min-width:0} .signin form{grid-template-columns:minmax(0,1fr)}
  .skywell{justify-content:flex-end}                 /* the pill goes to the foot of the small sky, clear of Nunu */
  .fig .lbl{white-space:normal;border-radius:12px}
}
@media (prefers-reduced-motion:reduce){.scrub__mouse i,.window__live i{animation:none}}

/* ---------- the verifier's tall frozen render (?flat=1): nothing may be sized from the window's height ---------- */
body.flat .scrub{height:auto}
body.flat .scrub__sticky{position:static;height:auto;min-height:0}
body.flat .compare{max-height:none;min-height:0}
body.flat .ph-head{min-height:420px}
body.flat .authgrid{min-height:760px} body.flat .authcol{width:min(100%,680px)}

/* ============================================================================================================
   THE SEVEN MARKS, in the middle of each card on intelligence.html. Each one says something about its own
   section: bars converging, specialists lighting, points settling on ground, a report filling, repairs ranked,
   a wall, four places with one calibrated.

   TWO STATES, and the split is the whole idea.
   At REST every mark does the same very quiet thing: one slow breath, 9s, staggered per card by --i so the row
   never pulses in lockstep. It is opacity only, which the compositor handles, and it is deliberately almost
   nothing: seven marks performing at once would be noise, and on a laptop it would be battery.
   On HOVER or FOCUS the mark plays its own motion, once, in well under a second.

   Everything animates opacity or transform and nothing else, so no frame does layout. Under reduced motion the
   marks hold their finished state and never move at all.
   ============================================================================================================ */
.mk{display:block;width:100%;height:24px;color:var(--faint);transition:color .25s}
.mk svg{display:block;width:100%;height:100%;overflow:visible}
.mk :is(rect,circle,path){fill:currentColor}
.mk .arc{fill:none;stroke:currentColor}
.toc a:hover .mk,.toc a:focus-visible .mk{color:var(--orange-ink)}

/* the resting breath: the only thing running when nobody is looking */
@keyframes mkBreathe{0%,100%{opacity:.34}50%{opacity:.6}}
.mk svg{animation:mkBreathe 9s ease-in-out infinite;animation-delay:calc(var(--n,0) * -1.3s)}
.toc li:nth-child(1) .mk svg{--n:0} .toc li:nth-child(2) .mk svg{--n:1} .toc li:nth-child(3) .mk svg{--n:2}
.toc li:nth-child(4) .mk svg{--n:3} .toc li:nth-child(5) .mk svg{--n:4} .toc li:nth-child(6) .mk svg{--n:5}
.toc li:nth-child(7) .mk svg{--n:6}

/* ---- on hover and on focus, each mark does its own thing. --i staggers the parts within one mark. ---- */
.toc a:is(:hover,:focus-visible) .mk svg{animation:none;opacity:1}
.mk :is(.b,.d,.dt,.c,.r,.k,.q1,.q2,.base,.arc){animation-duration:.62s;animation-timing-function:var(--out);
  animation-fill-mode:both;animation-delay:calc(var(--i,0) * 70ms)}

/* 01 three models, one report: the bars slide into one line */
@keyframes mkConverge{to{transform:translate(calc((1 - var(--i)) * 0px), calc((1 - var(--i)) * 6px))}}
.toc a:is(:hover,:focus-visible) .mk--method .b{animation-name:mkConverge}

/* 02 five specialists: they light in order, then hold */
@keyframes mkLight{0%{opacity:.35;transform:scale(1)}45%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:scale(1)}}
.mk--spec .d{transform-box:fill-box;transform-origin:center}
.toc a:is(:hover,:focus-visible) .mk--spec .d{animation-name:mkLight}

/* 03 the findings: three boxes land on the building, one after another, the way the read marks them */
@keyframes mkBox{0%{opacity:0;transform:scale(.72)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes mkBase{to{opacity:1}}
.mk--find .dt{fill:none;stroke:currentColor;stroke-width:1.5;transform-box:fill-box;transform-origin:center;opacity:.55}
.toc a:is(:hover,:focus-visible) .mk--find .dt{animation-name:mkBox;animation-delay:calc(var(--i,0) * 110ms)}
.toc a:is(:hover,:focus-visible) .mk--find .base{animation-name:mkBase}

/* 04 one building, read four ways: the report fills a cell at a time */
@keyframes mkFill{0%{opacity:.28}100%{opacity:1}}
.toc a:is(:hover,:focus-visible) .mk--report .c{animation-name:mkFill;animation-delay:calc(var(--i,0) * 110ms)}

/* 05 repairs ranked: the bars grow out to what each one returns */
@keyframes mkGrow{0%{transform:scaleX(.08)}100%{transform:scaleX(1)}}
.mk--rank .r{transform-box:fill-box;transform-origin:left center}
.toc a:is(:hover,:focus-visible) .mk--rank .r{animation-name:mkGrow;animation-delay:calc(var(--i,0) * 90ms)}

/* 06 the wall: the light passes along it */
@keyframes mkSweep{0%,100%{opacity:.3}30%{opacity:1}}
.toc a:is(:hover,:focus-visible) .mk--wall .k{animation-name:mkSweep;animation-duration:.9s;animation-delay:calc(var(--i,0) * 85ms)}

/* 07 four countries, one calibrated: the arc draws, the calibrated one stays lit */
@keyframes mkArc{0%{opacity:0}100%{opacity:.55}}
@keyframes mkPin{0%{opacity:.3;transform:translateY(-3px)}100%{opacity:1;transform:translateY(0)}}
.mk--where .q1{color:var(--orange-ink)}
.mk--where .q1,.mk--where .q2{transform-box:fill-box}
.toc a:is(:hover,:focus-visible) .mk--where .arc{animation-name:mkArc}
.toc a:is(:hover,:focus-visible) .mk--where :is(.q1,.q2){animation-name:mkPin;animation-delay:calc(var(--i,0) * 95ms)}

@media (prefers-reduced-motion:reduce){
  .mk svg{animation:none;opacity:.55}
  .mk :is(.b,.d,.dt,.c,.r,.k,.q1,.q2,.base,.arc){animation:none}
}

/* ---------- Our intelligence: cards rise into place the first time they are scrolled to (2026-09-25) ----------
   js/intelligence.js adds .rv to every card below the first screen and .rv-in as it arrives, with --rv-d staggering
   the ones that arrive together; once the move is over both classes come off, so each card is back to its own
   styles (the wall tiles' hover lift included). Marketing page, seen occasionally: a longer, softer entrance. */
.rv{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .7s var(--out),transform .9s var(--out);transition-delay:var(--rv-d,0ms)}
.rv.rv-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{transform:none;transition:opacity .45s ease;transition-delay:var(--rv-d,0ms)}}
body.flat .rv{opacity:1;transform:none;transition:none}

/* ---------- Our intelligence, section by section (desktop with a mouse, 2026-09-25): js/steps.js ----------
   body.stepped is only ever set there. Every section is made to fit one screen under the header, the title cards give up
   two columns for Nunu's well, and the before / after stops scrolling and is played instead. */
.ndock{display:none}
body.stepped main{position:relative}                       /* Nunu's rider is placed in <main>'s coordinates */
#rider{position:absolute;left:0;top:0;z-index:40;pointer-events:none;transform-origin:0 0;will-change:transform}
#rider canvas{position:absolute;left:-9%;top:-9%;width:118%;height:118%;display:block}
body.stepped .sec>.banner{grid-column:1 / span 10}
body.stepped .ndock{display:block;grid-column:11 / span 2;border-radius:var(--r);box-shadow:var(--well);min-height:150px}
body.stepped .foot2{position:relative;padding-right:100px}
body.stepped .ndock--foot{position:absolute;right:8px;top:6px;width:76px;height:76px;min-height:0;border-radius:50%;box-shadow:var(--well-sm)}
body.stepped .scrub{height:auto}
body.stepped .scrub__sticky{position:static;height:clamp(420px,calc(100vh - 360px),640px);min-height:0}
body.stepped .dossier{min-height:0;height:clamp(420px,calc(100vh - 420px),640px)}
body.stepped .wall__tile{aspect-ratio:auto;height:clamp(240px,calc(100vh - 560px),440px)}
body.stepped .screen--globe{min-height:0;height:clamp(300px,calc(100vh - 470px),480px)}
/* 07 shares the last stop with the contact card and the footer: its card takes the wide side so the country rows and
   the headline each fit one line, and the globe the narrow one */
body.stepped .reach{grid-column:span 7}
body.stepped .reach .num{width:110px}
body.stepped .reach h2{font-size:clamp(26px,2.4vw,42px)}
body.stepped .reach h2 br{display:none}
body.stepped .reach .list{padding-top:18px;gap:8px}
body.stepped .reach summary{padding:11px 16px}
body.stepped .screen--globe{grid-column:span 5}