/* NUBIS ad TERRAM: the home page. One machined instrument panel: a cool white slab, raised plates to read, debossed
   wells for what is alive, glass for what is pressed. intelligence.html and atlas.html still use site.css. */
:root{
  --g:#EEF0F5; --ink:#15171C; --muted:#565C6B; --faint:#646A7C;
  /* --faint was #8A90A0, which is 2.80:1 on the slab and fails AA at any size. Every one of its sixteen uses is
     text: places, dates, hint lines, unit counts, the signed in line. #646A7C is 4.73:1 and passes. */
  /* --orange is the FILL. Ink on it is 5.39:1 and fine. But orange AS TEXT on the slab is 2.92:1, which fails even
     the large text threshold, so anything written in orange uses --orange-ink (#BE3600, 4.95:1) instead.
     --orange is for backgrounds and borders only; if it is going on a color: property, it is the wrong one. */
  --orange-ink:#BE3600;
  --hi:#FFFFFF; --lo:rgba(158,169,194,.62); --lo-soft:rgba(158,169,194,.38);
  --orange:#FF4D00; --violet:#5E17EB; --peri:#3F4BC0;
  --display:'Inter Tight',Inter,system-ui,sans-serif;
  --body:'Century Gothic','CenturyGothic','URW Gothic','Questrial',sans-serif;
  --r:22px; --gap:16px; --edge:14px;
  --raised: 10px 10px 24px var(--lo), -10px -10px 24px var(--hi), inset 0 0 0 1px rgba(255,255,255,.7);
  --raised-sm: 5px 5px 12px var(--lo), -5px -5px 12px var(--hi), inset 0 0 0 1px rgba(255,255,255,.7);
  --well: inset 7px 7px 16px var(--lo), inset -7px -7px 16px var(--hi);
  --well-sm: inset 3px 3px 7px var(--lo), inset -3px -3px 7px var(--hi);
  --out: cubic-bezier(.16,1,.3,1);
  /* the first screen: the bar and two rows fill the window exactly, and everything below is the rest of the same board */
  --pad:22px; --bar:46px;
  --H: max(520px, calc(100vh - 56px - var(--edge)*3 - var(--pad)*2 - var(--bar) - var(--gap)*2));
  --r1: calc(var(--H) * .57); --r2: calc(var(--H) * .43);
  --heroH: calc(var(--H) + var(--bar) + var(--gap)*2 + var(--pad)*2);
}
*{box-sizing:border-box}
main{display:block;will-change:transform}                 /* the page glides by transform (see glide() in the script); the layer exists from the start so none has to be made when a glide begins */
html,body{margin:0}
body{background:var(--g);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
h1,h2,p{margin:0;font-weight:400}
.label{font-family:var(--display);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:inherit}

/* ---------- nav: a raised bar ---------- */
.nav{margin:var(--edge) var(--edge) 0;height:56px;border-radius:18px;background:var(--g);box-shadow:var(--raised-sm);display:flex;align-items:center;gap:14px;padding:0 8px 0 8px;
  position:sticky;top:var(--edge);z-index:60;transition:background .4s var(--out),box-shadow .4s var(--out),backdrop-filter .4s var(--out)}
/* At the top of the page the header is part of the slab, embossed like everything else. Once the page has moved it lifts
   off: the same bar, floating, frosted so the cards passing under it stay legible as shapes and never as clutter. */
.nav.is-floating{background:rgba(238,240,245,.74);-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:0 14px 34px rgba(60,70,110,.18),0 2px 6px rgba(60,70,110,.08),inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.6)}
.nav .mark{height:40px;display:flex;align-items:center;padding:0 16px;border-radius:12px;background:var(--orange);color:var(--ink);font-family:var(--display);font-size:17px;letter-spacing:-.01em;box-shadow:4px 4px 10px rgba(201,58,0,.35),-4px -4px 10px var(--hi),inset 0 1px 0 rgba(255,255,255,.45)}
.nav .mark em{font-style:normal;opacity:.7;margin:0 5px}
.nav .clock{height:34px;display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:999px;box-shadow:var(--well-sm);font-variant-numeric:tabular-nums}
.nav .clock i{width:6px;height:6px;border-radius:50%;background:var(--orange);animation:led 1.6s infinite}
@keyframes led{0%,55%{opacity:1}75%{opacity:.2}100%{opacity:1}}
.nav .links{margin-left:auto;display:flex;gap:6px}
.nav .links a{padding:9px 14px;border-radius:999px;color:var(--ink);transition:box-shadow .35s var(--out),color .2s}
.nav .links a:hover{box-shadow:var(--well-sm);color:var(--orange-ink)}
/* the page you are on: same pressed in look as a hover, and the same padding as a link, or it rides high in the row */
.nav .links .cur{padding:9px 14px;border-radius:999px;box-shadow:var(--well-sm);color:var(--orange-ink)}
.nav .cta{height:40px;display:flex;align-items:center;gap:10px;padding:0 8px 0 18px;border-radius:999px;box-shadow:var(--raised-sm);font-family:var(--display);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;transition:box-shadow .35s var(--out),transform .35s var(--out)}
.nav .cta b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:400;transition:background .2s,transform .35s var(--out)}
.nav .cta:hover b{background:var(--orange);transform:translateX(2px)}
.nav .cta:active{box-shadow:var(--well-sm);transform:scale(.985)}

/* ---------- the Atlas header (app.html, property.html). Inside the tool the bar is the tool's own: the three tabs
   ARE the nav, sign out stands apart on its own pill, and Our intelligence to Pricing are gone, because in here they
   are somebody else's furniture. The way back out to the public site is the footer's Explore block.
   On app.html these are <button class="atab"> so js/app.js drives them unchanged; on a building's page they are
   plain links with Library marked, which is both where you are and the way back. Styled together so the two bars
   are the same bar. These sit ABOVE the 700px block on purpose: the phone rules below must still win. ---------- */
.nav--app .links{margin-left:14px;gap:6px}
.nav--app .links a,.nav--app .links button{padding:9px 14px;border-radius:999px;border:0;background:transparent;
  cursor:pointer;font-family:var(--display);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink);transition:box-shadow .35s var(--out),color .2s}
.nav--app .links a:hover,.nav--app .links button:hover{box-shadow:var(--well-sm);color:var(--orange-ink)}
.nav--app .links .cur,.nav--app .links [aria-selected=true]{box-shadow:var(--well-sm);color:var(--orange-ink)}
.nav--app .navwho{margin-left:auto;font-size:12.5px;color:var(--faint);white-space:nowrap}
.nav--app .out{margin-left:14px}

/* ---------- One slab. The bar and the board below it are the same piece of material: the gap between them closes,
   the facing corners go square, and the seam is removed rather than covered. Three things make the join invisible:
   the two share background var(--g); the bar's raised shadow is clipped flat along its bottom edge, so it casts
   nothing onto the board; and the board's sunk top edge is taken off in css/app.css. The bar keeps position:sticky
   and never gains .is-floating here, because neither Atlas page loads js/frame.js, so the surface stays solid.
   The tab that is DOWN is the top edge of the card under it: raised like a plate rather than pressed like a key,
   square along the bottom, and standing the full height of the bar so it runs into the board. Sign out keeps its
   own rounded pill and its own shadow, because it is not a tab and does not belong to any card. ---------- */
.nav--app{margin-bottom:0;border-radius:18px 18px 0 0;clip-path:inset(-24px -24px 0 -24px)}
.nav--app .links{align-self:stretch;align-items:flex-end;gap:4px}
/* all three are the same height, so their labels sit on one line. What tells the open one apart is the material,
   not the size: give the active tab a shorter box instead and its label rides a few pixels above the others. */
.nav--app .links a,.nav--app .links button{display:flex;align-items:center;height:100%;
  border-radius:18px 18px 0 0;padding:0 18px}   /* a folder tab's corners, not a button's */
.nav--app .links .cur,.nav--app .links [aria-selected=true]{box-shadow:var(--raised-sm);color:var(--orange-ink);
  margin-bottom:-1px;position:relative;z-index:1;clip-path:inset(-18px -18px 0 -18px)}
.nav--app .links a:hover,.nav--app .links button:hover{box-shadow:var(--well-sm);color:var(--orange-ink)}
.nav--app .links .cur:hover,.nav--app .links [aria-selected=true]:hover{box-shadow:var(--raised-sm)}
/* The header carries five links and nothing else: Our intelligence, Atlas, Contact, Book a demo, Pricing. There is no
   orange key beside them, because it said Book a demo too and that was the same words twice. The clock goes at 1280 so
   the five have room. On a phone they used to be hidden, with the key standing in for the lot: now they stay, as one
   strip that slides sideways inside its own box, so the page itself never scrolls sideways.
   These rules live here, not in app.css, because every page has this nav. */
@media (max-width:1280px){.nav .clock{display:none}}
.nav .burger{display:none}   /* phones only, below */
@media (max-width:700px){
  /* the bar takes a second row rather than sliding sideways: a strip that scrolls lands mid word and reads as broken,
     and all five fit across 390 once the mark has given up some room. Row one is the mark, and sign out where there
     is one; row two is the five links, spread. */
  .nav{height:auto;flex-wrap:wrap;padding:8px 10px;gap:6px 0}
  .nav .mark{height:34px;padding:0 11px;font-size:14px}
  .nav .out{order:2;margin-left:auto;height:34px;padding:0 13px;font-size:11px}
  /* Six links since 2026-09-24, when Home was added. Five came to exactly the width available at 390, so the sixth
     had to be paid for out of the others: 4px of side padding each became 2px and the tracking came in. Measured
     again at 390 and 360. flex-wrap is the floor, not the plan: if anything else is ever added, or the text grows
     in another language, the strip takes a second line rather than being clipped or scrolling sideways. */
  /* Since 2026-09-25 the six links fold behind a burger (js/site.js adds it): row one is the mark and the burger, and
     the links open underneath as a column of full width keys, each a proper thumb's height. */
  .nav:not(.nav--app){gap:0}
  .nav .burger{order:2;margin-left:auto;width:44px;height:44px;border:0;border-radius:14px;background:var(--g);cursor:pointer;
    box-shadow:var(--raised-sm);display:grid;place-content:center;gap:5px;-webkit-tap-highlight-color:transparent;transition:box-shadow .35s var(--out)}
  .nav .burger i{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .35s var(--out),opacity .2s}
  .nav.is-open .burger{box-shadow:var(--well-sm)}
  .nav.is-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.is-open .burger i:nth-child(2){opacity:0}
  .nav.is-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* the menu pops out over the page (his call, 2026-09-25): a frosted panel hung under the header, growing from the
     burger's corner. Nothing below it moves. Closed it is invisible and untouchable, not removed, so it can animate. */
  .nav:not(.nav--app) .links{position:absolute;top:calc(100% + 8px);left:0;right:0;margin:0;display:flex;flex-direction:column;gap:4px;
    padding:8px;border-radius:18px;background:rgba(238,240,245,.94);-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
    box-shadow:0 18px 40px rgba(60,70,110,.22),0 2px 6px rgba(60,70,110,.08),inset 0 1px 0 rgba(255,255,255,.95);
    transform-origin:calc(100% - 22px) 0;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);pointer-events:none;
    transition:opacity .18s var(--out),transform .22s var(--out),visibility 0s linear .22s}
  .nav.is-open .links{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .18s var(--out),transform .22s var(--out),visibility 0s}
  @media (prefers-reduced-motion:reduce){.nav:not(.nav--app) .links{transform:none}}
  .nav:not(.nav--app) .links a,.nav:not(.nav--app) .links .cur{display:flex;align-items:center;min-height:48px;padding:0 16px;
    border-radius:14px;font-size:13px;letter-spacing:.05em;white-space:nowrap}
  .nav--app .links{order:3;width:100%;justify-content:space-between;flex-wrap:wrap;gap:2px}
  /* the Atlas bar takes the same second row, and has an easier time of it: three short words where there were five
     long ones. Who is signed in goes, because the sign out pill beside it says the same thing in fewer pixels. */
  .nav--app .links{margin-left:0}
  .nav--app .links button{padding:8px 4px;font-size:10px;letter-spacing:.04em}
  .nav--app .navwho{display:none}
}

/* ---------- the tray: one deep well that holds the orb, with plates standing in it ---------- */
.tray{position:relative;margin:var(--edge);border-radius:30px;overflow:hidden;background:var(--g)}
/* the tray's sunk edge. It was one inset box-shadow with a 28px blur round an element the whole height of the board, which
   the browser has to draw afresh for every new strip that scrolls in. Four thin gradients look the same and cost nothing. */
.tray::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 0 1px rgba(158,169,194,.25);
  background:linear-gradient(to right,rgba(158,169,194,.5),rgba(158,169,194,0)) left / 30px 100% no-repeat,
    linear-gradient(to bottom,rgba(158,169,194,.5),rgba(158,169,194,0)) top / 100% 30px no-repeat,
    linear-gradient(to left,rgba(255,255,255,.95),rgba(255,255,255,0)) right / 30px 100% no-repeat,
    linear-gradient(to top,rgba(255,255,255,.95),rgba(255,255,255,0)) bottom / 100% 30px no-repeat}
.orbwrap{position:absolute;left:30%;top:calc(var(--heroH) * -.2);width:100%;height:var(--heroH);z-index:0;pointer-events:none}
.orbsrc{position:absolute;left:50%;top:50%;width:min(288vh,234vw);max-width:none;aspect-ratio:1;transform:translate(-50%,-50%);object-fit:cover;opacity:0;pointer-events:none}
.orbcv{position:absolute;inset:0;width:100%;height:100%}
.fuzzloop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:96%;aspect-ratio:1;object-fit:cover;mix-blend-mode:multiply;pointer-events:none}

.grid{position:relative;z-index:2;padding:var(--pad);display:grid;gap:var(--gap);
  grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:var(--bar) var(--r1) var(--r2) minmax(var(--r2),auto);grid-auto-rows:auto}
.plate{position:relative;border-radius:var(--r);background:var(--g);box-shadow:var(--raised);padding:clamp(18px,1.7vw,28px);display:flex;flex-direction:column;min-width:0}

/* headline plate. On a desktop it gives up being a plate and is centred on the slab: see "the first screen on a desktop" */
.head{grid-column:1 / span 7;grid-row:2;justify-content:space-between}
/* tracking opened from -.04em to -.02em on request: at this size the tight setting made the letters run together */
.head h1{font-family:var(--display);font-size:clamp(40px,6.2vw,122px);line-height:.97;letter-spacing:-.02em}
/* The one word in the headline is the LIVE orange, not --orange-ink, decided 2026-09-25: the darker one reads as
   dull at display size, where the vivid one is the brand. It is 2.92:1 on the slab, which misses the 3:1 large
   text threshold, and that is accepted here and nowhere else: this is one word at 60px or more, not something
   anybody has to read a paragraph of. Everything set in orange at body size stays --orange-ink. */
.head h1 span{color:var(--orange)}
.specs{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.specs div{padding:9px 14px;border-radius:12px;box-shadow:var(--well-sm);font-size:12.5px;line-height:1.35;color:var(--muted)}
.specs b{display:block;font-family:var(--display);font-weight:500;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}

/* the open cell: no plate, the orb shows through, glass sits on it */
.open{grid-column:8 / span 5;grid-row:2;position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:6px;min-height:0}
.glass{position:relative;isolation:isolate;overflow:hidden;color:var(--ink);
  background:rgba(255,255,255,.30);backdrop-filter:blur(6px) saturate(1.08);-webkit-backdrop-filter:blur(8px) saturate(1.05);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 14px 34px rgba(60,70,110,.16),0 2px 6px rgba(60,70,110,.08),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.55)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:.5;
  background:linear-gradient(118deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 68%,rgba(255,255,255,.34) 100%)}
.glass>*:not(.cardlight){position:relative;z-index:2}
.cardlight{position:absolute;left:-36px;top:-36px;width:calc(100% + 72px);height:calc(100% + 72px);pointer-events:none;z-index:-1;opacity:.85;filter:url(#glass-card)}
.pill{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--violet)}
.acts{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 10px 0 24px;border-radius:999px;font-family:var(--display);font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  transition:transform .45s var(--out),box-shadow .45s var(--out),background .3s}
.btn b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:400;font-size:15px;transition:background .25s,transform .45s var(--out)}
.btn.hot b{background:var(--orange)}
.btn.plain{padding:0 24px}
.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.46);box-shadow:0 20px 44px rgba(60,70,110,.2),0 3px 8px rgba(60,70,110,.1),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.6)}
.btn:hover b{transform:translateX(3px)}
.btn:active{transform:translateY(1px) scale(.985);box-shadow:0 4px 12px rgba(60,70,110,.14),inset 0 2px 6px rgba(60,70,110,.18)}

/* the row under the first screen; columns 8 and 9 stay empty for Nunu's way down */
.lede{grid-column:1 / span 4;grid-row:4;background:var(--violet);color:#fff;justify-content:space-between;
  box-shadow:10px 10px 24px rgba(74,18,190,.34),-10px -10px 24px var(--hi),inset 0 1px 0 rgba(255,255,255,.28)}
.lede{overflow:hidden;justify-content:flex-start;gap:14px}
.lede p{font-size:clamp(14.5px,1.12vw,18px);line-height:1.5;max-width:46ch}
/* the spray orb rises like a horizon in whatever room the words leave, so it can never sit behind them.
   The plate clips it; a plate's own shadow is not clipped by its overflow. */
.lede .horizon{flex:1;min-height:92px;position:relative;margin:4px calc(clamp(18px,1.7vw,28px) * -1) calc(clamp(18px,1.7vw,28px) * -1)}
/* the brief: the orb must be darker than the violet, not lighter. The artwork is pale, so it is used as a stencil:
   its alpha, grain and spray cut a deep violet fill. Two layers, because the artwork is only about 40% opaque. */
.lede .horizon i{position:absolute;left:3%;right:3%;top:0;aspect-ratio:1100 / 545;background:#2A0A8A;pointer-events:none;
  -webkit-mask:url(../img/orb-spray-mask.webp) center top / 100% auto no-repeat;mask:url(../img/orb-spray-mask.webp) center top / 100% auto no-repeat}
.lede .horizon i+i{background:#1E0670}
.lede .label{color:#D9CCFB}
.ways{grid-column:5 / span 3;grid-row:4;justify-content:space-between;gap:14px}
.ways h2{font-family:var(--display);font-size:clamp(18px,1.55vw,26px);line-height:1.08;letter-spacing:-.025em;max-width:14ch}
.ways ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ways a{display:flex;align-items:baseline;gap:8px;padding:11px 14px;border-radius:14px;box-shadow:var(--well-sm);font-family:var(--display);font-size:14px;letter-spacing:-.01em;
  transition:box-shadow .45s var(--out),color .25s,transform .45s var(--out)}
.ways a small{font-size:10.5px;color:var(--faint);letter-spacing:.06em}
.ways a:hover{box-shadow:var(--raised-sm);color:var(--orange-ink);transform:translateY(-1px)}
.pet{grid-column:8 / span 2;grid-row:3;padding:0;z-index:5}
/* the holder Nunu rides in. It has no look of its own: it lies exactly over the card's round well, and leaves it when Nunu travels */
.dish{position:absolute;left:16px;top:16px;width:calc(100% - 32px);aspect-ratio:1;will-change:translate,scale}
/* Nunu's canvas overhangs the holder a little: the ball is 59% of its canvas. SCALE in the loader script must agree with this. */
.dish canvas{position:absolute;left:-9%;top:-9%;width:118%;height:118%;display:block}
#petcap{position:absolute;left:clamp(18px,1.7vw,28px);top:clamp(16px,1.5vw,24px)}
/* the well sits under the label, as big as the card allows in either direction */
.pet{--wd:min(calc(100% - 32px),calc(var(--r2) - 66px))}
.pet .well,.pet .tagring,.pet .dish{top:50px;width:var(--wd);left:calc((100% - var(--wd)) / 2)}
.where{grid-column:10 / span 3;grid-row:4;background:var(--orange);color:var(--ink);justify-content:space-between;
  box-shadow:10px 10px 24px rgba(201,58,0,.32),-10px -10px 24px var(--hi),inset 0 1px 0 rgba(255,255,255,.4)}
.where .label{color:#4A1600}
.where ul{list-style:none;margin:0;padding:0;font-family:var(--display);font-size:clamp(17px,1.5vw,25px);line-height:1.16;letter-spacing:-.02em}
.where li small{font-family:var(--body);font-size:12px;letter-spacing:0;color:#4A1600;margin-left:8px}
/* See the atlas is a white pill: a key on the orange, not an underlined link */
.where a.more{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-family:var(--display);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;align-self:flex-start;
  padding:11px 18px 11px 20px;border-radius:999px;background:#fff;color:var(--ink);box-shadow:0 8px 18px rgba(150,40,0,.28),inset 0 -1px 0 rgba(0,0,0,.06);transition:gap .35s var(--out),transform .35s var(--out),box-shadow .35s var(--out)}
.where a.more:hover{gap:14px;transform:translateY(-1px);box-shadow:0 12px 24px rgba(150,40,0,.32),inset 0 -1px 0 rgba(0,0,0,.06)}
.where a.more:active{transform:translateY(1px) scale(.985);box-shadow:0 3px 8px rgba(150,40,0,.24),inset 0 2px 5px rgba(0,0,0,.12)}
/* at rest Where we read covers the two columns of Nunu's lane as well as its own three. When Nunu travels between its
   home and 01 the card pulls back to open the lane, and grows over it again once Nunu is through (board.js toggles .wide) */
.run .where{transition:margin-left .5s cubic-bezier(.4,0,.1,1)}
.run.wide .where{margin-left:calc(-2 * (var(--c) + var(--gap)))}
.jump .where{transition:none !important}

/* the reading bar: a glass strip across the top of the tray, the orb moving underneath it. It sits at the top so the
   column under Nunu's box is clear all the way down the board */
.bar{grid-column:1 / -1;grid-row:1;align-self:center;border-radius:999px;padding:12px 0;white-space:nowrap}
.bar .track{display:inline-block;animation:tick 70s linear infinite}
.bar:hover .track{animation-play-state:paused}
.bar span{display:inline-block;padding:0 22px;color:var(--muted)}
.bar span b{font-weight:500;color:var(--ink)}
.bar span i{font-style:normal;color:var(--orange-ink)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- the board below the first screen. One scroll is one section: the script glides the page there.
   01: the long card grows to where "four ways" ends and is finished before Nunu moves; then Nunu drops straight down into
       the dock under its home while the three questions appear on the right.
   02: Nunu drops again, then travels right, and the orange card expands along behind it, the two moving together.
   03: the card grows, then Nunu drops straight down the right hand column. Last, it drops into the well in the contact
       plate and is its full size again. Every section is fully shown by the time Nunu has passed it. ---------- */
.well{position:absolute;left:16px;top:16px;width:calc(100% - 32px);aspect-ratio:1;border-radius:50%;box-shadow:var(--well)}
/* the orange tag on the rim of a well. It rests at nine o'clock and turns a quarter to point the way Nunu is about to
   go: down to six when it is leaving downwards, up to twelve when it is going back */
.tagring{position:absolute;left:16px;top:16px;width:calc(100% - 32px);aspect-ratio:1;border-radius:50%;pointer-events:none;rotate:0deg;transition:rotate var(--t-tag,.2s) cubic-bezier(.4,0,.1,1)}
.tagring[data-way="down"]{rotate:-90deg} .tagring[data-way="up"]{rotate:90deg}
.tag{position:absolute;left:-10px;top:50%;width:20px;height:8px;margin-top:-4px;border-radius:4px;background:var(--orange);box-shadow:1px 2px 4px rgba(201,58,0,.45),inset 0 1px 0 rgba(255,255,255,.45)}
.dock{position:relative;align-self:end;aspect-ratio:1 / .82;border-radius:var(--r);background:var(--g);box-shadow:var(--raised)}
.dock .well,.dock .tagring{left:22%;top:50%;width:56%;translate:0 -50%}
#dock-1{grid-column:8 / span 2;grid-row:5} #dock-2{grid-column:11 / span 2;grid-row:6} #dock-3{grid-column:11 / span 2;grid-row:7}

/* a card is a real shape that grows: its inner edge is pulled back by a margin and let out. The words are laid out once
   at full width so nothing reflows, and they fade in after the card has opened, so no letter is sliced by the edge */
.banner{position:relative;border-radius:var(--r);background:var(--g);box-shadow:var(--raised);min-width:0;overflow:hidden;display:flex;
  transition:margin var(--t-open,.48s) cubic-bezier(.4,0,.1,1)}
.banner__in{flex:none;width:100%;padding:clamp(22px,2.2vw,38px);display:grid;gap:clamp(16px,1.8vw,30px);align-content:start}
.main .banner__in{grid-template-columns:minmax(0,5fr) minmax(0,8fr)}
#m01{grid-column:1 / span 7;--shut:4} #m02,#m03{grid-column:1 / span 10;--shut:7}      /* --shut: how many columns a closed card gives up, so that closed it is a block three columns wide */
.run .banner__in{width:var(--inw)}
/* (the words' card keeps its full size in the run: the growing is done by the body behind it, by sliding) */
/* the words wait until the card has all but arrived (70% of however long this opening takes), so its moving edge never cuts them */
/* these fade or travel during a step: they are given their layers up front, because making a layer in the middle of a glide drops a frame */
.run .rv,.run .dock,.run .qcard>*,.run .tagring{will-change:opacity,translate}
.rv{transition:opacity .34s ease-out calc(var(--t-open,.48s) * .7),translate .46s var(--out) calc(var(--t-open,.48s) * .7)}
.run .banner:not(.is-open) .rv{opacity:0;translate:-12px 0;transition:opacity .14s,translate .14s}
.jump .banner,.jump .rv,.jump #dish,.jump .tagring{transition:none !important}
#m01{grid-row:5} #m02{grid-row:6} #m03{grid-row:7}
/* the three questions: three cards in a column that fills the row, made one after another from the top */
.stack{grid-column:10 / span 3;grid-row:5;display:grid;gap:var(--gap);grid-template-rows:repeat(3,minmax(0,1fr))}
.qcard{position:relative;border-radius:var(--r);background:var(--g);box-shadow:var(--raised);padding:18px 20px 20px;display:flex;flex-direction:column;justify-content:center}
.qcard h3{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:clamp(17px,1.35vw,22px);line-height:1.12;letter-spacing:-.02em}
.qcard p{font-size:14px;line-height:1.5;color:var(--muted)}
.run .qcard>*{opacity:0;translate:0 -8px;transition:opacity .2s,translate .2s}
.run .qcard.is-in>*{opacity:1;translate:0 0;transition:opacity .3s ease-out,translate .42s var(--out)}
/* the fluid layer. In the run, a card's BODY is not its own any more: it is a plain rectangle on a layer behind the words,
   and the layer is put through the goo filter, so bodies bridge where they come close. The wrapper casts the raised shadow
   from whatever outline the bodies make together, which is what lets a merged section read as one embossed piece. */
.goo{display:none;position:absolute;z-index:0;pointer-events:none;filter:drop-shadow(10px 10px 12px var(--lo)) drop-shadow(-10px -10px 12px var(--hi))}
.goo--o{filter:drop-shadow(10px 10px 12px rgba(201,58,0,.32)) drop-shadow(-10px -10px 12px var(--hi))}
.run .goo{display:block}
/* The live shadow (two drop-shadow filters round whatever outline the bodies make) has to be worked out again on every
   frame that the section moves on screen, which is every frame of every glide, for all three sections. But at rest a
   section is always a plain rounded rectangle: shut, it is the numeral block; run together, it is the whole row. So at rest
   the filter is switched off and .rest, a box of exactly that size, carries an ordinary box-shadow, which is drawn once.
   The filter comes back only for the section that is changing shape, and only while it does. */
.goo .rest{display:none;position:absolute;border-radius:var(--r);box-shadow:10px 10px 12px var(--lo),-10px -10px 12px var(--hi)}
.goo--o .rest{box-shadow:10px 10px 12px rgba(201,58,0,.32),-10px -10px 12px var(--hi)}
.goo.is-rest{filter:none} .goo.is-rest .rest{display:block}
/* Chrome draws an SVG filter in software, over the whole layer, on every frame in which a body moves: measured at 50 to
   75 ms a frame at full size. So the layer is laid out at HALF size (bodies at half their coordinates, half the blur) and
   the compositor scales it back up. will-change keeps Chrome from re-drawing it at full size, and the script only applies
   the scale after the first paint, because the scale a will-change layer is first painted at is the scale it keeps.
   A quarter of the pixels, half the blur radius; the edge it softens is a liquid edge anyway. */
.goo__in{position:absolute;left:0;top:0;width:50%;height:50%;transform-origin:0 0;will-change:transform;filter:url(#goo)}
/* How a card grows. It does not change size: the body is a fixed shape, as long as the whole row, that SLIDES out from
   behind a window with rounded corners (.clip). Sliding is a transform, so the compositor does it, at the display's own
   rate and in fractions of a pixel, whatever the main thread is doing. Growing by width went through layout and the
   software goo filter on every frame, and at half resolution moved in two pixel steps: that was the stagger.
   .pod is the step Nunu's well sits on, fixed to the body's leading edge; shut, it is slid back behind the body.
   .fill (01 only) rises from below the window to close Nunu's lane when the section runs together.
   The goo filter is left with the one job that needs it: the three questions budding and joining. */
.goo .clip{position:absolute;inset:0;overflow:hidden;border-radius:var(--r)}
.goo .slide{position:absolute;will-change:transform}
.goo .slide i,.goo .fill{position:absolute;display:block;background:var(--g)}
.goo .fill{will-change:transform}
.goo .body{border-radius:0 var(--r) var(--r) 0}
.goo .pod{border-radius:0 var(--r) var(--r) 0;will-change:transform}
/* the inside corner where the step meets the card is rounded by a fillet that travels with the step */
.goo .pod::before{content:"";position:absolute;left:24px;top:-22px;width:22px;height:22px;background:radial-gradient(circle at 100% 0,transparent 21.4px,var(--g) 22px)}
.goo--o .slide i{background:var(--orange)}
.goo--o .pod::before{background:radial-gradient(circle at 100% 0,transparent 21.4px,var(--orange) 22px)}
.jump .goo .slide,.jump .goo .pod,.jump .goo .fill{transition:none !important}
.goo__in i{position:absolute;border-radius:11px;background:var(--g)} .goo--o .goo__in i{background:var(--orange)}
.run .fluid,.run .fluid.dock{background:none !important;box-shadow:none !important}
.jump .goo__in i,.jump .qcard>*,.jump .dock,.jump .cell::details-content{transition:none !important}   /* the answers are measured open while the board is laid out */
#dock-2 .well{box-shadow:inset 7px 7px 16px rgba(160,42,0,.5),inset -7px -7px 16px rgba(255,150,100,.8)} #dock-2 .tag{background:#fff;box-shadow:1px 2px 4px rgba(120,30,0,.45)}   /* on the orange card the tag is white; it was near black */
/* without the run (reduced motion, or no script) the docks are not shown and the cards take their room */
/* a dock's well is not shown until its pod has budded, and 02's rides with its pod */
.dock{display:none} .run .dock{display:block;opacity:0;translate:var(--tuck,0px) 0;transition:opacity .22s ease-out,translate var(--t-open,.48s) cubic-bezier(.4,0,.1,1)}
/* --tuck: where the pod lies hidden inside the shut card. The well starts there with it and rides out on it; it used to
   wait at the far end and slide back to meet the pod, a ring floating on its own beside the card */
.run .dock.is-in{opacity:1;translate:0 0} .run #dock-2.is-in.is-mid{translate:var(--mid) 0}
.grid:not(.run) #m01{grid-column:1 / span 9} .grid:not(.run) #m02,.grid:not(.run) #m03{grid-column:1 / -1}
/* the numerals: carved deep, by the SVG filter, so the shadow sits under the upper left wall */
.num{display:block;width:clamp(140px,13.5vw,250px);height:auto;overflow:visible;user-select:none}
/* the floor of the cut is the surface colour in shade: clearly darker than the card, never lighter */
.num text{font-family:var(--display);font-size:176px;letter-spacing:-10px;fill:#D5DAE6}
#m02 .num text{fill:#D23F00}
.ttl{font-family:var(--display);font-size:clamp(22px,2.1vw,38px);line-height:1;letter-spacing:-.03em;margin-top:14px}
.banner h2{font-family:var(--display);font-size:clamp(22px,2vw,34px);line-height:1.1;letter-spacing:-.025em;max-width:22ch}
.prose{margin-top:16px;display:grid;gap:12px;max-width:56ch;font-size:15.5px;line-height:1.55;color:#2A2D36}
.cells{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cell{padding:16px 18px 18px;border-radius:16px;box-shadow:var(--well-sm)}
.cell .label{display:block;margin-bottom:8px}
.cell h3{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:clamp(17px,1.35vw,22px);line-height:1.12;letter-spacing:-.02em}
.cell p{font-size:14px;line-height:1.5;color:var(--muted)}
#m02{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)}
#m02 .cell{box-shadow:inset 3px 3px 7px rgba(160,42,0,.42),inset -3px -3px 7px rgba(255,150,100,.75)}
#m02 .cell p,#m02 .label{color:#3A1100}

/* ---------- 02's cells are disclosures. The promise is always on show; the sentence under it opens. Native
   <details>, so it is keyboard operable, it works with no JS, and there is no state for us to keep. The default
   triangle is taken off both ways (list-style for the standard marker, the webkit pseudo for older Safari) and a
   chevron drawn in currentColor takes its place, so it inherits the dark brown these cells use on orange. ---------- */
.cell summary{display:block;position:relative;cursor:pointer;padding-right:30px;list-style:none}
.cell summary::-webkit-details-marker{display:none}
.cell summary::after{content:"";position:absolute;right:5px;top:50%;width:9px;height:9px;margin-top:-7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.5;
  transition:transform .3s var(--out),opacity .2s}
.cell[open] summary::after{transform:rotate(-135deg);margin-top:-2px;opacity:.85}
.cell summary:hover::after{opacity:1}
.cell summary h3{margin:0}                       /* the space below belongs to the answer, and only when it is open */
.cell summary:focus-visible{outline:2px solid var(--violet);outline-offset:4px;border-radius:10px}

/* Space. Three things were wrong and they are all about room:
   1. the row stretched every cell to the tallest, so opening one resized the other two and the short answers sat
      over 39px to 78px of dead space. align-items:start gives each card its own height.
   2. the answer sat 10px under the promise and 18px off the floor, which is the padding and nothing else.
   3. it snapped open. A <details> can animate now: ::details-content with interpolate-size, so the card grows into
      the answer instead of jumping 84px to 136px in one frame. */
.cells{align-items:start}
.cell{padding-bottom:16px}
.cell p{padding-top:14px}
@supports (interpolate-size: allow-keywords){
  .cell{interpolate-size:allow-keywords}
  .cell::details-content{block-size:0;overflow:hidden;
    transition:block-size .34s var(--out),content-visibility .34s allow-discrete}
  .cell[open]::details-content{block-size:auto}
}
@media (prefers-reduced-motion:reduce){
  .cell summary::after{transition:none}
  .cell::details-content{transition:none}
}

/* the three questions carry their question and one link. What each answer contains is section 04 of
   intelligence.html, and saying it twice was most of the words on this page. */
.qcard .qmore{margin-top:12px;align-self:flex-start;font-family:var(--display);font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);transition:color .2s}
.qcard .qmore:hover{color:var(--orange-ink)}
/* a whole card that is a link */
a.go{display:flex;flex-direction:column;justify-content:space-between;gap:18px;height:100%;color:inherit}
a.go h3{margin:8px 0 8px;font-family:var(--display);font-weight:400;font-size:clamp(19px,1.6vw,26px);line-height:1.1;letter-spacing:-.02em}
a.go p{font-size:14.5px;color:var(--muted);transition:color .35s var(--out)}
a.go b{align-self:flex-end;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:400;transition:background .3s,transform .45s var(--out)}
.inlink{grid-column:1 / -1;padding:20px 22px;border-radius:18px;box-shadow:var(--raised-sm);transition:background .35s var(--out),color .35s var(--out),box-shadow .45s var(--out)}
.inlink:hover{background:var(--violet);color:#fff} .inlink:hover p,.inlink:hover .label{color:#DDD2FB}
.inlink:hover b{background:#fff;color:var(--violet);transform:translateX(3px)}
.links{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .links .inlink{grid-column:auto}

/* the closing call. It shares the board's columns, so its well stands exactly under Nunu's column, at Nunu's home size.
   There is no orb under this plate to bend, so its buttons are keys cut from the plate, not glass */
.ask{grid-column:1 / -1;grid-row:8;display:grid;grid-template-columns:subgrid;align-items:center;padding:clamp(22px,2.2vw,38px) 0;border-radius:var(--r);background:var(--violet);color:#fff;
  box-shadow:10px 10px 24px rgba(74,18,190,.34),-10px -10px 24px var(--hi),inset 0 1px 0 rgba(255,255,255,.28)}
.ask__l{grid-column:1 / span 6;padding-left:clamp(22px,2.2vw,38px)} .ask__r{grid-column:7 / span 4;padding-right:clamp(12px,1.4vw,24px)}
.ask__well{grid-column:11 / span 2;position:relative;aspect-ratio:1;margin-right:0}
.ask__well .well{left:16px;top:16px;box-shadow:inset 7px 7px 16px rgba(42,8,128,.75),inset -7px -7px 16px rgba(140,92,255,.6)}
.ask .label{color:#D9CCFB;margin-bottom:16px}
.ask h2{font-family:var(--display);font-size:clamp(34px,4.2vw,76px);line-height:.98;letter-spacing:-.03em;max-width:12ch}
.ask p{font-size:15.5px;line-height:1.55;color:#EDE7FF}
.ask .acts{margin-top:20px}
.key{display:inline-flex;align-items:center;gap:12px;height:50px;padding:0 10px 0 22px;border-radius:999px;font-family:var(--display);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:#fff;
  box-shadow:5px 5px 12px rgba(50,8,140,.55),-5px -5px 12px rgba(134,82,255,.55),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .45s var(--out),box-shadow .45s var(--out),background .3s}
.key b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--violet);font-weight:400;font-size:15px;transition:transform .45s var(--out)}
.key.hot b{background:var(--orange);color:var(--ink)}
.key:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)} .key:hover b{transform:translateX(3px)}
.key:active{transform:translateY(1px);box-shadow:inset 4px 4px 9px rgba(50,8,140,.6),inset -4px -4px 9px rgba(134,82,255,.5)}
/* One slim row. The brand block went on 2026-09-24: the name is already the mark in the header on every page, and
   the paragraph under it was the third time the same sentence appeared in a session. Explore now sits on the same
   line as the copyright and the tagline, between them, so the footer is one strip rather than a block.
   NOTE what went with the paragraph: "Based in Singapore, working across four countries" is no longer anywhere on
   the site. Contact lost its Where we are block earlier, and this was the last place that fact lived.
   The class is .explore__row and not .row, because .row is a building in the Atlas library. */
.foot2{grid-column:1 / -1;grid-row:9;padding:26px 8px 6px;font-size:14.5px;color:var(--muted)}
.foot2 a{transition:color .2s} .foot2 a:hover{color:var(--orange-ink)}
.foot2 .base{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 28px;
  padding-top:18px;border-top:1px solid rgba(158,169,194,.4);box-shadow:0 -1px 0 #fff}
.foot2 .explore__row{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px}

/* ---------- the drop in loader: the ball and nothing else. No floor, no shadow, no ripples ---------- */
.drop{position:fixed;inset:0;z-index:90;background:var(--g);transition:opacity .7s var(--out)}
.drop.gone{opacity:0;pointer-events:none}
.drop .sign{position:absolute;left:0;right:0;bottom:7vh;text-align:center}
.drop .sign .mark{font-family:var(--display);font-size:19px;letter-spacing:-.01em}
.drop .sign .mark em{font-style:normal;color:var(--peri);margin:0 5px}
/* every movement of the ball is a transform animation, so the browser runs it off the main thread
   and it stays smooth while the page's graphics are being built underneath */
#fly{position:fixed;z-index:95;left:0;top:0;will-change:transform;pointer-events:none}
#fly canvas{display:block;width:100%;height:100%;will-change:transform}

/* ---------- the first screen on a desktop: one composition, centre left. The headline and its two asks stand on the slab
   with no plate of their own, in the vertical middle of the left hand columns, left aligned, and the orb is centred behind
   them; the orb is a whole globe on the right, bigger than the screen is tall. Nunu keeps columns 8 and 9, straight above its dock in 01, so its way down is a straight drop through the lane the
   row below leaves empty; under the headline it would have to cut across the four ways plate. The pill is a caption in
   the bottom left corner. ---------- */
@media (min-width:1101px){
  .orbwrap{left:calc(24% + 51px + var(--orb-dx,0px));top:calc(var(--heroH) * -.2 + 161px + var(--orb-dy,0px));height:calc(var(--heroH) * 1.2);
    /* its box starts part way across the page and ends inside the row below, so any of those edges would show as a
       straight cut (the bottom one does whenever Where we read pulls back off Nunu's lane). The orb fades out
       over its last stretch on the left, top and bottom instead; the right edge is the page's own */
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 120px,#000 calc(100% - 260px),transparent),linear-gradient(to right,transparent,#000 240px);
    -webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent,#000 120px,#000 calc(100% - 260px),transparent),linear-gradient(to right,transparent,#000 240px);mask-composite:intersect}
    /* placed with tools/orb-editor.html (x +101, y +111, 120% then 72%). It runs on behind the row below the first screen: he is happy for it to show there as background */   /* the orb is a whole globe: big, its centre right of the middle, running off the right edge */
  .head{grid-column:1 / span 8;grid-row:2;background:none;box-shadow:none;padding:0 0 0 clamp(8px,1vw,18px);align-items:flex-start;justify-content:center;text-align:left;gap:clamp(16px,2.4vh,30px)}
  .head{top:50px}   /* his call: the group sits 50px under the middle; top on a relative box moves it without moving anything else */
  .head h1{font-size:clamp(48px,6.2vw,120px)}
  .head>.label{padding:7px 14px;border-radius:999px;background:rgba(238,240,245,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}   /* it stands on the orb's dots now */
  .open{grid-column:1 / span 4;grid-row:3;align-self:end;padding:0}
}
/* ---------- smaller screens ---------- */
@media (max-width:1100px){
  .tray{height:auto}
  .grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:none}
  .head{grid-column:1 / -1;grid-row:auto;gap:40px}
  .head h1{font-size:clamp(40px,7.6vw,96px)}
  .open{display:none}   /* stacked, the home page has no orb: the headline follows the reading bar (the orb is on Our intelligence) */
  .open .orbwrap{left:0;top:0;width:100%;height:100%}
  /* stacked, the orb is a pre rendered video on white. Rather than fight the white, the cell is made what it looks like:
     a white screen sunk into the slab, with the field playing on it and the glass sitting over it */
  .open{background:#fff;border-radius:var(--r);overflow:hidden;padding:16px;box-shadow:inset 6px 6px 14px var(--lo),inset -6px -6px 14px rgba(255,255,255,.9)}
  .open::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;box-shadow:inset 6px 6px 14px var(--lo),inset -4px -4px 10px rgba(255,255,255,.9)}
  .fuzzloop{mix-blend-mode:normal;height:100%}
  .open>.glass,.open>.acts{z-index:2}
  .lede{grid-column:1 / span 3;grid-row:auto} .ways{grid-column:4 / span 3;grid-row:auto}
  .pet{grid-column:5 / span 2;grid-row:auto;min-height:282px}
  /* stacked, Nunu's card is wide and short, so its well is a fixed size in the middle instead of the card's full width */
  .pet .well,.pet .tagring,.pet .dish{left:50%;width:min(220px,calc(100% - 32px));translate:-50% 0} .where{grid-column:1 / -1;grid-row:auto}
  .bar{grid-row:auto;order:-2}          /* stays the first thing on the board when the grid stacks */
  .dock{display:none !important} .stack{grid-column:1 / -1;grid-row:auto;grid-template-rows:none} .ask{display:block;grid-row:auto;padding:clamp(22px,4vw,38px)} .ask__l,.ask__r{padding:0} .ask__r{margin-top:18px} .ask__well{display:none}
  .banner{grid-column:1 / -1 !important;grid-row:auto !important} .foot2{grid-row:auto}
}
@media (max-width:700px){
  :root{--gap:12px;--edge:10px;--r:18px}
  .nav .clock{display:none}                       /* the links stay: with no key beside them they are the only way through on a phone */
  .tray{border-radius:24px} .grid{padding:14px;grid-template-columns:minmax(0,1fr)}
  .head,.open,.lede,.ways,.pet,.where{grid-column:1 / -1}
  .head h1{font-size:clamp(30px,9.4vw,60px)}
  .open{min-height:86vw;order:-1}
  .pet{min-height:300px}
  .num{width:68px}   /* 01 02 03: half size on phones, his call 2026-09-25; the carving scales with the svg */
  /* stacked, so Explore reads from the left like everything above it */
  .foot2 .explore__row{justify-content:flex-start;gap:4px 16px}
  .btn{height:50px}
  .main .banner__in{grid-template-columns:minmax(0,1fr)} .cells,.links{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .bar .track,.nav .clock i{animation:none} .cardlight{filter:none;opacity:.4} *{transition-duration:.01ms !important}
}

/* ---------- the verifier's tall frozen render (?flat=1 puts .flat on the body) ----------
   The first screen is sized from the window height, and the verifier's window is nine thousand pixels tall, so there the
   sizes are given outright. */
body.flat{--H:720px;--r1:calc(var(--H) * .57);--r2:calc(var(--H) * .43);--heroH:calc(var(--H) + var(--bar) + var(--gap)*2 + var(--pad)*2)}